| | |
| | | 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 } from 'antd' |
| | | import { Modal, Form, Row, Col, Select, Radio, Tooltip, Input, InputNumber, Tabs } from 'antd' |
| | | import { QuestionCircleOutlined, EditOutlined } from '@ant-design/icons' |
| | | |
| | | import { getBaseForm, getOptionForm } from './formconfig' |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | |
| | | |
| | | class LineChartDrawerForm extends Component { |
| | | static propTpyes = { |
| | | dict: PropTypes.object, |
| | | plot: PropTypes.object, |
| | | config: PropTypes.object, |
| | | plotchange: PropTypes.func |
| | | } |
| | | |
| | | state = { |
| | | view: 'normal', |
| | | view: 'base', |
| | | visible: false, |
| | | plot: null, |
| | | formlist: null, |
| | |
| | | |
| | | this.setState({ |
| | | visible: true, |
| | | view: 'normal', |
| | | view: 'base', |
| | | plot: fromJS(config.plot).toJS(), |
| | | baseFormlist: getBaseForm(config.plot), |
| | | formlist: getOptionForm(config.plot, config.columns) |
| | |
| | | <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 |
| | | }> |
| | |
| | | rules: [ |
| | | { |
| | | required: !!item.required, |
| | | message: this.props.dict['form.required.input'] + item.label + '!' |
| | | message: '请输入' + item.label + '!' |
| | | } |
| | | ] |
| | | })(<Input placeholder="" autoComplete="off" disabled={item.readonly} onPressEnter={this.onSubmit}/>)} |
| | |
| | | <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 |
| | | }> |
| | |
| | | rules: [ |
| | | { |
| | | required: !!item.required, |
| | | message: this.props.dict['form.required.input'] + item.label + '!' |
| | | message: '请输入' + item.label + '!' |
| | | } |
| | | ] |
| | | })(<InputNumber min={item.min} max={item.max} precision={item.decimal} onPressEnter={this.onSubmit}/>)} |
| | |
| | | <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 |
| | | }> |
| | |
| | | rules: [ |
| | | { |
| | | required: !!item.required, |
| | | message: this.props.dict['form.required.select'] + item.label + '!' |
| | | message: '请选择' + 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 |
| | | }> |
| | |
| | | rules: [ |
| | | { |
| | | required: !!item.required, |
| | | message: this.props.dict['form.required.select'] + item.label + '!' |
| | | message: '请选择' + 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 |
| | | }> |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { config } = this.props |
| | | const { view, visible, baseFormlist } = this.state |
| | | const formItemLayout = { |
| | | labelCol: { |
| | |
| | | |
| | | return ( |
| | | <div className="line-chart-drawer-form"> |
| | | <Icon type="edit" title="编辑" onClick={this.showDrawer} /> |
| | | <EditOutlined title="编辑" onClick={this.showDrawer} /> |
| | | <Modal |
| | | wrapClassName="popview-modal menu-chart-edit-modal" |
| | | title="图表编辑" |
| | | wrapClassName="mk-pop-modal" |
| | | visible={visible} |
| | | width={850} |
| | | maskClosable={false} |
| | |
| | | onCancel={() => { this.setState({ visible: false }) }} |
| | | destroyOnClose |
| | | > |
| | | {config.name ? <div className="mk-com-name">{config.name} - 编辑</div> : null} |
| | | <Tabs activeKey={view} className="menu-chart-edit-box" onChange={this.changeTab}> |
| | | <TabPane tab="组件设置" key="base"> |
| | | <NormalForm dict={this.props.dict} formlist={baseFormlist} inputSubmit={this.onSubmit} wrappedComponentRef={(inst) => this.baseRef = inst}/> |
| | | <NormalForm formlist={baseFormlist} inputSubmit={this.onSubmit} wrappedComponentRef={(inst) => this.baseRef = inst}/> |
| | | </TabPane> |
| | | <TabPane tab="图表设置" key="normal"> |
| | | <Form {...formItemLayout}> |