import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Modal, Tabs } from 'antd'
|
import { EditOutlined } from '@ant-design/icons'
|
|
import { getBaseForm } from './formconfig'
|
import asyncComponent from '@/utils/asyncComponent'
|
// import './index.scss'
|
|
const { TabPane } = Tabs
|
const ModalForm = asyncComponent(() => import('@/components/normalform/modalform'))
|
const CodeMirror = asyncComponent(() => import('@/templates/zshare/codemirror'))
|
|
class CustomChartDrawerForm extends Component {
|
static propTpyes = {
|
plot: PropTypes.object,
|
config: PropTypes.object,
|
plotchange: PropTypes.func
|
}
|
|
state = {
|
view: 'base',
|
visible: false,
|
plot: null,
|
baseFormlist: null,
|
}
|
|
showDrawer = () => {
|
const { config } = this.props
|
|
this.setState({
|
visible: true,
|
view: 'base',
|
plot: fromJS(config.plot).toJS(),
|
baseFormlist: getBaseForm(config.plot),
|
})
|
}
|
|
onSubmit = () => {
|
const { config } = this.props
|
const { plot, view } = this.state
|
|
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
|
})
|
this.props.plotchange({...config, plot})
|
}
|
}
|
|
changeTab = (tab) => {
|
const { plot, view } = this.state
|
|
if (view === 'base') {
|
this.baseRef.handleConfirm().then(res => {
|
this.setState({
|
plot: {...plot, ...res},
|
view: tab
|
})
|
})
|
} else {
|
this.setState({
|
view: tab
|
})
|
}
|
}
|
|
onChange = (val) => {
|
const { plot } = this.state
|
|
this.setState({
|
plot: {...plot, script: val},
|
})
|
}
|
|
render() {
|
const { config } = this.props
|
const { view, visible, baseFormlist, plot } = this.state
|
|
return (
|
<>
|
<EditOutlined style={{color: '#1890ff'}} title="编辑" onClick={this.showDrawer} />
|
<Modal
|
wrapClassName="mk-pop-modal"
|
visible={visible}
|
width={950}
|
maskClosable={false}
|
onOk={this.onSubmit}
|
onCancel={() => { this.setState({ visible: false }) }}
|
destroyOnClose
|
>
|
{config.name ? <div className="mk-com-name">{config.name} - 编辑</div> : null}
|
<Tabs activeKey={view} onChange={this.changeTab}>
|
<TabPane tab="组件设置" key="base">
|
<ModalForm formlist={baseFormlist} inputSubmit={this.onSubmit} wrappedComponentRef={(inst) => this.baseRef = inst}/>
|
</TabPane>
|
{plot ? <TabPane tab="JS" key="JS">
|
{plot.chartType === 'antv' ? <div>入参：Chart、 chartId（dom节点id）、data、 config</div> : <div>入参：echarts、 chartId（dom节点id）、 data、 config</div>}
|
<CodeMirror mode="text/javascript" theme="cobalt" value={plot.script} onChange={this.onChange} />
|
</TabPane> : null}
|
</Tabs>
|
</Modal>
|
</>
|
);
|
}
|
}
|
|
export default CustomChartDrawerForm
|
