From d3272e82652361e5e9bd045925222ef042b6731f Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 18 十一月 2020 18:15:15 +0800
Subject: [PATCH] 2020-11-18
---
src/menu/components/chart/antv-pie/chartcompile/index.jsx | 121 ++++++++++++++++++++++++++++++++++------
1 files changed, 103 insertions(+), 18 deletions(-)
diff --git a/src/menu/components/chart/antv-pie/chartcompile/index.jsx b/src/menu/components/chart/antv-pie/chartcompile/index.jsx
index f883858..7107522 100644
--- a/src/menu/components/chart/antv-pie/chartcompile/index.jsx
+++ b/src/menu/components/chart/antv-pie/chartcompile/index.jsx
@@ -1,11 +1,17 @@
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 } from 'antd'
+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 asyncComponent from '@/utils/asyncComponent'
import ColorSketch from '@/mob/colorsketch'
import './index.scss'
+
+const { TabPane } = Tabs
+
+const EditTable = asyncComponent(() => import('@/templates/zshare/editTable'))
class LineChartDrawerForm extends Component {
static propTpyes = {
@@ -20,7 +26,27 @@
state = {
visible: false,
plot: null,
- formlist: null
+ formlist: null,
+ view: 'normal',
+ colorColumns: [
+ {
+ title: '鎸囨爣',
+ dataIndex: 'label',
+ inputType: 'input',
+ editable: true,
+ width: '40%'
+ },
+ {
+ title: '棰滆壊',
+ dataIndex: 'color',
+ inputType: 'color',
+ editable: true,
+ width: '40%',
+ render: (text, record) => {
+ return (<div style={{width: '80px', height: '23px', background: text}}></div>)
+ }
+ },
+ ]
}
showDrawer = () => {
@@ -28,6 +54,7 @@
this.setState({
visible: true,
+ view: 'normal',
plot: fromJS(config.plot).toJS(),
formlist: getPieChartOptionForm(config.plot, config.columns, sysRoles, MenuType)
})
@@ -211,25 +238,72 @@
onSubmit = () => {
const { config } = this.props
- const { plot } = this.state
+ const { plot, view } = this.state
- this.props.form.validateFieldsAndScroll((err, values) => {
- if (!err) {
- let _plot = {...plot, ...values}
-
- this.setState({
- plot: _plot,
- visible: false
- })
+ if (view === 'normal') {
+ this.props.form.validateFieldsAndScroll((err, values) => {
+ if (!err) {
+ let _plot = {...plot, ...values}
+
+ this.setState({
+ plot: _plot,
+ visible: false
+ })
+
+ this.props.plotchange({...config, plot: _plot})
+ }
+ })
+ } else {
+ this.setState({
+ visible: false
+ })
- this.props.plotchange({...config, plot: _plot})
- }
- })
+ this.props.plotchange({...config, plot: plot})
+ }
}
+ changeTab = (tab) => {
+ const { plot } = this.state
+
+ if (tab === 'color') {
+ this.props.form.validateFieldsAndScroll((err, values) => {
+ if (!err) {
+ let _plot = {...plot, ...values}
+
+ this.setState({
+ plot: _plot,
+ view: tab
+ })
+ }
+ })
+ } else {
+ this.setState({
+ view: tab
+ })
+ }
+ }
+
+ addColor = () => {
+ let plot = fromJS(this.state.plot).toJS()
+ plot.colors = plot.colors || []
+
+ plot.colors.push({
+ uuid: Utils.getuuid(),
+ label: `鎸囨爣${plot.colors.length}`,
+ color: 'rgb(91, 143, 249)'
+ })
+
+ this.setState({plot})
+ }
+
+ changeColor = (colors) => {
+ const { plot } = this.state
+
+ this.setState({plot: {...plot, colors}})
+ }
render() {
- const { visible } = this.state
+ const { visible, plot, colorColumns, view } = this.state
const formItemLayout = {
labelCol: {
xs: { span: 24 },
@@ -254,9 +328,20 @@
onCancel={() => { this.setState({ visible: false }) }}
destroyOnClose
>
- <Form {...formItemLayout}>
- <Row gutter={16}>{this.getFields()}</Row>
- </Form>
+ <Tabs activeKey={view} className="menu-chart-edit-box" onChange={this.changeTab}>
+ <TabPane tab="鍩虹璁剧疆" key="normal">
+ <Form {...formItemLayout}>
+ <Row gutter={16}>{this.getFields()}</Row>
+ </Form>
+ </TabPane>
+ {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}/>
+ </div>
+ </TabPane> : null}
+ </Tabs>
+
</Modal>
</div>
);
--
Gitblit v1.8.0