| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { fromJS } from 'immutable' |
| | | import { Modal, Form, Row, Col, Select, Icon, Radio, Tooltip, Input, InputNumber, Tabs, Button } from 'antd' |
| | | import { Modal, Form, Row, Col, Select, Radio, Tooltip, Input, InputNumber, Tabs, Button } from 'antd' |
| | | import { QuestionCircleOutlined, EditOutlined } from '@ant-design/icons' |
| | | |
| | | import Utils from '@/utils/utils.js' |
| | | import { getBaseForm, getOptionForm } from './formconfig' |
| | |
| | | |
| | | class LineChartDrawerForm extends Component { |
| | | static propTpyes = { |
| | | MenuType: PropTypes.any, |
| | | dict: PropTypes.object, |
| | | plot: PropTypes.object, |
| | | config: PropTypes.object, |
| | |
| | | } |
| | | |
| | | showDrawer = () => { |
| | | const { config, MenuType } = this.props |
| | | const { config } = this.props |
| | | |
| | | this.setState({ |
| | | visible: true, |
| | | view: 'normal', |
| | | plot: fromJS(config.plot).toJS(), |
| | | baseFormlist: getBaseForm(config.plot, MenuType), |
| | | baseFormlist: getBaseForm(config.plot), |
| | | formlist: getOptionForm(config.plot, config.columns) |
| | | }) |
| | | } |
| | |
| | | formlist: formlist.map(item => { |
| | | if (item.key === 'innerRadius') { |
| | | item.hidden = val === 'pie' |
| | | } else if (item.key === 'type') { |
| | | item.hidden = val !== 'nest' |
| | | } else if (item.key === 'legend') { |
| | | item.hidden = val === 'nest' |
| | | } |
| | | return item |
| | | }) |
| | |
| | | <Col span={12} key={index}> |
| | | <Form.Item label={item.tooltip ? |
| | | <Tooltip placement="topLeft" title={item.tooltip}> |
| | | <Icon type="question-circle" /> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | {item.label} |
| | | </Tooltip> : item.label |
| | | }> |
| | |
| | | <Col span={12} key={index}> |
| | | <Form.Item label={item.tooltip ? |
| | | <Tooltip placement="topLeft" title={item.tooltip}> |
| | | <Icon type="question-circle" /> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | {item.label} |
| | | </Tooltip> : item.label |
| | | }> |
| | |
| | | <Col span={12} key={index}> |
| | | <Form.Item label={item.tooltip ? |
| | | <Tooltip placement="topLeft" title={item.tooltip}> |
| | | <Icon type="question-circle" /> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | {item.label} |
| | | </Tooltip> : item.label |
| | | }> |
| | |
| | | })( |
| | | <Select mode={item.multi ? 'multiple' : ''}> |
| | | {item.options.map((option, index) => |
| | | <Select.Option key={index} value={option.field}> |
| | | <Select.Option key={index} value={option.field || option.value}> |
| | | {option.label} |
| | | </Select.Option> |
| | | )} |
| | |
| | | <Col span={12} key={index}> |
| | | <Form.Item label={item.tooltip ? |
| | | <Tooltip placement="topLeft" title={item.tooltip}> |
| | | <Icon type="question-circle" /> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | {item.label} |
| | | </Tooltip> : item.label |
| | | }> |
| | |
| | | } |
| | | ] |
| | | })( |
| | | <Radio.Group disabled={item.readonly} onChange={(e) => this.radioChange(e, item.key)}> |
| | | <Radio.Group style={{whiteSpace: 'nowrap'}} disabled={item.readonly} onChange={(e) => this.radioChange(e, item.key)}> |
| | | {item.options.map(option => { |
| | | return ( |
| | | <Radio key={option.value} value={option.value}>{option.text}</Radio> |
| | |
| | | <Col span={12} key={index}> |
| | | <Form.Item label={item.tooltip ? |
| | | <Tooltip placement="topLeft" title={item.tooltip}> |
| | | <Icon type="question-circle" /> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | {item.label} |
| | | </Tooltip> : item.label |
| | | }> |
| | |
| | | |
| | | return ( |
| | | <div className="line-chart-drawer-form"> |
| | | <Icon type="edit" onClick={this.showDrawer} /> |
| | | <EditOutlined title="编辑" onClick={this.showDrawer} /> |
| | | <Modal |
| | | wrapClassName="popview-modal menu-chart-edit-modal" |
| | | title="图表编辑" |
| | |
| | | {plot ? <TabPane tab="颜色设置" key="color"> |
| | | <div> |
| | | <Button className="color-add mk-green" onClick={this.addColor}>{this.props.dict['model.add']}</Button> |
| | | <EditTable data={plot.colors || []} columns={colorColumns} onChange={this.changeColor}/> |
| | | <EditTable actions={['edit', 'move', 'del']} data={plot.colors || []} columns={colorColumns} onChange={this.changeColor}/> |
| | | </div> |
| | | </TabPane> : null} |
| | | </Tabs> |