From 2aa5ab63b4bbce5c36dbb3511b205b3b5f6af9bd Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 07 五月 2024 11:34:20 +0800
Subject: [PATCH] 2024-05-07
---
src/tabviews/custom/components/chart/antv-X6/nodeupdate/index.jsx | 133 ++++++++++++++++++++++++++++++++++++--------
1 files changed, 109 insertions(+), 24 deletions(-)
diff --git a/src/tabviews/custom/components/chart/antv-X6/nodeupdate/index.jsx b/src/tabviews/custom/components/chart/antv-X6/nodeupdate/index.jsx
index e423161..80c4e33 100644
--- a/src/tabviews/custom/components/chart/antv-X6/nodeupdate/index.jsx
+++ b/src/tabviews/custom/components/chart/antv-X6/nodeupdate/index.jsx
@@ -1,26 +1,38 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
-import { Form, Row, Col, Input, Select, Radio, InputNumber } from 'antd'
+import { Form, Row, Col, Input, Select, Radio, InputNumber, Modal } from 'antd'
+import { FormOutlined } from '@ant-design/icons'
-import ColorSketch from '@/mob/colorsketch'
-
+import ColorSketch from '@/tabviews/zshare/mutilform/mkColor'
+import NodeForm from './nodeform'
+import MKEmitter from '@/utils/events.js'
import './index.scss'
+
+const { TextArea } = Input
class NodeUpdate extends Component {
static propTpyes = {
node: PropTypes.object,
- rolelist: PropTypes.array
+ orgs: PropTypes.array
}
state = {
- formlist: null
+ formlist: null,
+ mknode: null,
+ mkdata: null
}
UNSAFE_componentWillMount () {
this.setState({
+ mknode: this.props.node,
+ mkdata: this.props.node.mkdata || '',
formlist: this.getFormList(this.props.node)
})
+ }
+
+ componentDidMount () {
+ MKEmitter.addListener('mk-x6-dbclick', this.trigger)
}
UNSAFE_componentWillReceiveProps(nextProps) {
@@ -29,10 +41,31 @@
formlist: null
}, () => {
this.setState({
+ mknode: nextProps.node,
+ mkdata: nextProps.node.mkdata || '',
formlist: this.getFormList(nextProps.node)
})
})
}
+ }
+
+ /**
+ * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊锛屾竻闄ゅ揩鎹烽敭璁剧疆
+ */
+ componentWillUnmount () {
+ this.setState = () => {
+ return
+ }
+
+ MKEmitter.removeListener('mk-x6-dbclick', this.trigger)
+ }
+
+ trigger = () => {
+ const { formlist } = this.state
+
+ if (!formlist || formlist.findIndex(item => item.type === 'other') === -1) return
+
+ this.setState({visible: true})
}
getFormList = (node) => {
@@ -71,6 +104,8 @@
lineType = 'dash'
}
+ let font = node.labels && node.labels[0] ? node.labels[0].attrs.label : {}
+
return [
{
type: 'title',
@@ -80,7 +115,7 @@
type: 'text',
field: 'title',
label: '鏍囩',
- initval: title
+ initval: font.text || ''
},
{
type: 'title',
@@ -107,6 +142,26 @@
{value: 'solid', text: '瀹炵嚎'},
{value: 'dash', text: '铏氱嚎'}
]
+ },
+ {
+ type: 'title',
+ label: '鏍囩鏍峰紡'
+ },
+ {
+ type: 'number',
+ field: 'fontSize',
+ label: '瀛楀彿',
+ initval: font.fontSize || 14
+ },
+ {
+ type: 'color',
+ field: 'fontFill',
+ label: '棰滆壊',
+ initval: font.fill || '#000000'
+ },
+ {
+ type: 'other',
+ label: '鑷畾涔変俊鎭�'
}
]
} else if (node.shape === 'lane') {
@@ -228,7 +283,7 @@
label: '鍐呭'
},
{
- type: 'text',
+ type: 'textarea',
field: 'title',
label: '鏍囩',
initval: title
@@ -330,22 +385,9 @@
initval: fontFill
},
{
- type: 'title',
+ type: 'other',
label: '鑷畾涔変俊鎭�'
- },
- {
- type: 'text',
- field: 'mksign',
- label: '鏍囪',
- initval: node.mksign || ''
- },
- {
- type: 'select',
- field: 'mkroleid',
- label: '瑙掕壊',
- initval: node.mkroleid || '',
- options: this.props.rolelist.map(item => ({value: item.RoleID, text: item.RoleName}))
- },
+ }
]
}
}
@@ -366,8 +408,15 @@
this.props.onChange(value, key)
}
+ confirm = () => {
+ this.nodeRef.handleConfirm().then(res => {
+ this.setState({visible: false, mkdata: res})
+ this.props.onChange(res, 'mkdata')
+ })
+ }
+
getFields() {
- const { formlist } = this.state
+ const { formlist, mkdata, mknode } = this.state
const fields = []
if (!formlist) return
@@ -385,6 +434,12 @@
<Form.Item label={item.label}>
<Input defaultValue={item.initval} placeholder="" autoComplete="off" onChange={(e) => this.change(e.target.value, item.field)} />
</Form.Item>
+ </Col>
+ )
+ } else if (item.type === 'textarea') {
+ fields.push(
+ <Col span={24} key={index} style={{padding: '0 12px'}}>
+ <TextArea defaultValue={item.initval} rows={3} onChange={(e) => this.change(e.target.value, item.field)} />
</Col>
)
} else if (item.type === 'number') {
@@ -432,8 +487,22 @@
fields.push(
<Col span={24} key={index}>
<Form.Item label={item.label}>
- <ColorSketch defaultValue={item.initval} onChange={(value) => this.change(value, item.field)}/>
+ <ColorSketch config={{initval: item.initval}} onChange={(value) => this.change(value, item.field)}/>
</Form.Item>
+ </Col>
+ )
+ } else if (item.type === 'other') {
+ fields.push(
+ <Col span={24} key={index}>
+ <span className="split-line">{item.label}锛�<FormOutlined onClick={() => {this.setState({visible: true})}}/></span>
+ {mkdata ? <div className="mk-data">
+ <div>鐘舵�侊細{mkdata.status}<span style={{float: 'right'}}>{mkdata.statusName}</span></div>
+ {mknode.shape !== 'edge' && !mknode.mknode ? <div>鏍囪锛歿mkdata.sign || ''}</div> : null}
+ {mknode.shape === 'edge' && mkdata.flowType ? <div>鎿嶄綔锛歿mkdata.flowType === 'reject' ? '椹冲洖' : '瀹℃壒'}</div> : null}
+ {mkdata.members && mkdata.members.length ? <div>瀹℃壒浜猴細{mkdata.members.map(item => item.workername).join('銆�')}</div> : null}
+ {mkdata.copys && mkdata.copys.length ? <div>鎶勯�佷汉锛歿mkdata.copys.map(item => item.workername).join('銆�')}</div> : null}
+ <div>澶囨敞锛歿mkdata.remark || ''}</div>
+ </div> : null}
</Col>
)
}
@@ -442,11 +511,27 @@
}
render() {
+ const { visible, mkdata, mknode } = this.state
+
return (
<div className="node-edit-form-wrap">
<Form className="node-edit-form">
<Row>{this.getFields()}</Row>
</Form>
+ <Modal
+ title={mknode && mknode.shape === 'edge' ? '杩炵嚎缂栬緫' : '鑺傜偣缂栬緫'}
+ wrapClassName="mk-x6-modal"
+ visible={visible}
+ closable={false}
+ maskClosable={false}
+ width={1070}
+ centered={true}
+ onOk={this.confirm}
+ onCancel={() => this.setState({visible: false})}
+ destroyOnClose
+ >
+ <NodeForm node={mknode} data={mkdata} orgs={this.props.orgs} handleSubmit={() => this.confirm()} wrappedComponentRef={(inst) => this.nodeRef = inst}/>
+ </Modal>
</div>
)
}
--
Gitblit v1.8.0