| | |
| | | import { Modal, Form, Row, Col, Select, Icon, Radio, Tooltip, Input, InputNumber, Tabs, Button } from 'antd' |
| | | |
| | | import Utils from '@/utils/utils.js' |
| | | import { getPieChartOptionForm } from './formconfig' |
| | | import { getOptionForm } from './formconfig' |
| | | import { getBaseForm } from '../../antv-bar/chartcompile/formconfig' |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import ColorSketch from '@/mob/colorsketch' |
| | | import './index.scss' |
| | |
| | | const { TabPane } = Tabs |
| | | |
| | | const EditTable = asyncComponent(() => import('@/templates/zshare/editTable')) |
| | | const NormalForm = asyncComponent(() => import('@/menu/components/share/normalform')) |
| | | |
| | | class LineChartDrawerForm extends Component { |
| | | static propTpyes = { |
| | |
| | | visible: false, |
| | | plot: null, |
| | | formlist: null, |
| | | baseFormlist: null, |
| | | view: 'normal', |
| | | colorColumns: [ |
| | | { |
| | |
| | | visible: true, |
| | | view: 'normal', |
| | | plot: fromJS(config.plot).toJS(), |
| | | formlist: getPieChartOptionForm(config.plot, config.columns, sysRoles, MenuType) |
| | | baseFormlist: getBaseForm(config.plot, sysRoles, MenuType), |
| | | formlist: getOptionForm(config.plot, config.columns) |
| | | }) |
| | | } |
| | | |
| | |
| | | return fields |
| | | } |
| | | |
| | | axisChange = (e) => { |
| | | const { plot } = this.state |
| | | let val = e.target.value |
| | | let fieldvalue = {} |
| | | |
| | | plot.customs.forEach(item => { |
| | | if (this.props.form.getFieldValue(item.field + '$axis') === val) { |
| | | fieldvalue[item.field + '$axis'] = 'unset' |
| | | } |
| | | }) |
| | | |
| | | this.props.form.setFieldsValue(fieldvalue) |
| | | } |
| | | |
| | | enabledChange = (e) => { |
| | | let val = e.target.value |
| | | |
| | | this.setState({enabled: val}) |
| | | } |
| | | |
| | | onSubmit = () => { |
| | | const { config } = this.props |
| | | const { plot, view } = this.state |
| | |
| | | this.props.plotchange({...config, plot: _plot}) |
| | | } |
| | | }) |
| | | } else if (view === 'base') { |
| | | this.baseRef.handleConfirm().then(res => { |
| | | let _plot = {...plot, ...res} |
| | | |
| | | this.setState({ |
| | | plot: _plot, |
| | | visible: false |
| | | }) |
| | | |
| | | this.props.plotchange({...config, plot: _plot}) |
| | | }) |
| | | } else { |
| | | this.setState({ |
| | | visible: false |
| | |
| | | } |
| | | |
| | | changeTab = (tab) => { |
| | | const { plot } = this.state |
| | | const { plot, view } = this.state |
| | | |
| | | if (tab === 'color') { |
| | | if (view === 'normal') { |
| | | this.props.form.validateFieldsAndScroll((err, values) => { |
| | | if (!err) { |
| | | let _plot = {...plot, ...values} |
| | |
| | | view: tab |
| | | }) |
| | | } |
| | | }) |
| | | } else if (view === 'base') { |
| | | this.baseRef.handleConfirm().then(res => { |
| | | let _plot = {...plot, ...res} |
| | | |
| | | this.setState({ |
| | | plot: _plot, |
| | | view: tab |
| | | }) |
| | | }) |
| | | } else { |
| | | this.setState({ |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { visible, plot, colorColumns, view } = this.state |
| | | const { visible, plot, colorColumns, view, baseFormlist } = this.state |
| | | const formItemLayout = { |
| | | labelCol: { |
| | | xs: { span: 24 }, |
| | |
| | | destroyOnClose |
| | | > |
| | | <Tabs activeKey={view} className="menu-chart-edit-box" onChange={this.changeTab}> |
| | | <TabPane tab="基础设置" key="normal"> |
| | | <TabPane tab="组件设置" key="base"> |
| | | <NormalForm dict={this.props.dict} formlist={baseFormlist} inputSubmit={this.onSubmit} wrappedComponentRef={(inst) => this.baseRef = inst}/> |
| | | </TabPane> |
| | | <TabPane tab="图表设置" key="normal"> |
| | | <Form {...formItemLayout}> |
| | | <Row gutter={16}>{this.getFields()}</Row> |
| | | </Form> |