import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Modal, Form, Tabs } from 'antd'
|
import { EditOutlined } from '@ant-design/icons'
|
|
import { getBaseForm, getOptionForm } from './formconfig'
|
import asyncComponent from '@/utils/asyncComponent'
|
import './index.scss'
|
|
const { TabPane } = Tabs
|
const NormalForm = asyncComponent(() => import('@/components/normalform/modalform'))
|
|
class LineChartDrawerForm extends Component {
|
static propTpyes = {
|
plot: PropTypes.object,
|
config: PropTypes.object,
|
plotchange: PropTypes.func
|
}
|
|
state = {
|
view: 'normal',
|
visible: false,
|
plot: null,
|
formlist: null,
|
baseFormlist: null
|
}
|
|
showDrawer = () => {
|
const { config } = this.props
|
|
this.setState({
|
visible: true,
|
view: 'normal',
|
plot: fromJS(config.plot).toJS(),
|
baseFormlist: getBaseForm(config.plot, config.columns),
|
formlist: getOptionForm(config.plot, config.uuid)
|
})
|
}
|
|
onSubmit = () => {
|
const { plot, view } = this.state
|
|
if (view === 'normal') {
|
this.norRef.handleConfirm().then(res => {
|
this.resetPlot({...plot, ...res})
|
})
|
} else if (view === 'base') {
|
this.baseRef.handleConfirm().then(res => {
|
this.resetPlot({...plot, ...res})
|
})
|
}
|
}
|
|
resetPlot = (plot) => {
|
const { config } = this.props
|
|
if (plot.click !== 'menus') {
|
delete plot.menus
|
}
|
if (plot.click !== 'menu') {
|
delete plot.menu
|
delete plot.MenuID
|
delete plot.MenuName
|
delete plot.MenuNo
|
delete plot.tabType
|
} else if (sessionStorage.getItem('appType') === '' && plot.menu) {
|
let list = null
|
try {
|
list = JSON.parse(sessionStorage.getItem('thdMenuList')) || []
|
} catch (e) {
|
list = []
|
}
|
|
let id = plot.menu[plot.menu.length - 1]
|
|
list.forEach(item => {
|
if (item.MenuID === id) {
|
plot.MenuID = id
|
plot.MenuName = item.MenuName
|
plot.MenuNo = item.MenuNo
|
plot.tabType = item.type
|
}
|
})
|
}
|
|
if (plot.gridType === 'none') {
|
plot.grid = {visible: false}
|
} else if (plot.gridType === 'dot') {
|
plot.grid = {
|
visible: true,
|
type: 'dot',
|
args: {
|
color: '#a0a0a0',
|
thickness: 1
|
}
|
}
|
} else if (plot.gridType === 'mesh') {
|
plot.grid = {
|
visible: true,
|
type: 'mesh',
|
args: {
|
color: '#ddd',
|
thickness: 1
|
}
|
}
|
}
|
|
this.setState({
|
plot: plot,
|
visible: false
|
})
|
|
this.props.plotchange({...config, plot: plot})
|
}
|
|
changeTab = (tab) => {
|
const { plot, view } = this.state
|
|
if (view === 'normal') {
|
this.norRef.handleConfirm().then(res => {
|
this.setState({
|
plot: {...plot, ...res},
|
view: tab
|
})
|
})
|
} else if (view === 'base') {
|
this.baseRef.handleConfirm().then(res => {
|
this.setState({
|
plot: {...plot, ...res},
|
view: tab
|
})
|
})
|
}
|
}
|
|
render() {
|
const { config } = this.props
|
const { view, visible, baseFormlist, formlist } = this.state
|
|
return (
|
<div className="line-chart-drawer-form">
|
<EditOutlined title="编辑" onClick={this.showDrawer} />
|
<Modal
|
wrapClassName="mk-pop-modal"
|
visible={visible}
|
width={850}
|
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">
|
<NormalForm formlist={baseFormlist} inputSubmit={this.onSubmit} wrappedComponentRef={(inst) => this.baseRef = inst}/>
|
</TabPane>
|
<TabPane tab="图表设置" key="normal">
|
<NormalForm formlist={formlist} inputSubmit={this.onSubmit} wrappedComponentRef={(inst) => this.norRef = inst}/>
|
</TabPane>
|
</Tabs>
|
</Modal>
|
</div>
|
);
|
}
|
}
|
|
export default Form.create()(LineChartDrawerForm)
|
