From f6adeb27e1c1ff7299bbf5079a5749cbcd7864de Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 03 八月 2023 14:39:32 +0800
Subject: [PATCH] 2023-08-03
---
src/tabviews/custom/components/chart/antv-X6/nodeupdate/index.scss | 18 +++
src/tabviews/custom/components/chart/antv-X6/index.jsx | 47 ++++++---
src/tabviews/custom/components/chart/antv-X6/nodeupdate/nodeform.jsx | 168 +++++++++++++++++++++++++++++++++
src/tabviews/custom/components/chart/antv-X6/nodeupdate/index.jsx | 34 ++++--
4 files changed, 241 insertions(+), 26 deletions(-)
diff --git a/src/tabviews/custom/components/chart/antv-X6/index.jsx b/src/tabviews/custom/components/chart/antv-X6/index.jsx
index dad76ed..a29bd40 100644
--- a/src/tabviews/custom/components/chart/antv-X6/index.jsx
+++ b/src/tabviews/custom/components/chart/antv-X6/index.jsx
@@ -139,7 +139,7 @@
{
inherit: 'rect',
width: 66,
- height: 36,
+ height: 40,
attrs: {
body: {
strokeWidth: 1,
@@ -169,7 +169,7 @@
{
inherit: 'polygon',
width: 66,
- height: 36,
+ height: 40,
attrs: {
body: {
strokeWidth: 1,
@@ -199,7 +199,7 @@
{
inherit: 'polygon',
width: 66,
- height: 36,
+ height: 40,
attrs: {
body: {
strokeWidth: 1,
@@ -226,8 +226,8 @@
'mk-circle',
{
inherit: 'circle',
- width: 36,
- height: 36,
+ width: 40,
+ height: 40,
attrs: {
body: {
strokeWidth: 1,
@@ -257,7 +257,7 @@
{
inherit: 'ellipse',
width: 66,
- height: 36,
+ height: 40,
attrs: {
body: {
strokeWidth: 1,
@@ -286,8 +286,8 @@
'mk-star',
{
inherit: 'polygon',
- width: 36,
- height: 36,
+ width: 40,
+ height: 40,
points: '100,10 40,198 190,78 10,78 160,198',
attrs: {
body: {
@@ -319,7 +319,7 @@
{
inherit: 'text-block',
width: 66,
- height: 36,
+ height: 40,
text: '鏂囨湰鍩�',
attrs: {
body: {
@@ -899,6 +899,7 @@
const r1 = graph.createNode({
shape: 'mk-rect',
mknode: 'start',
+ mkdata: {status: 0},
attrs: {
body: {
rx: 20,
@@ -941,6 +942,20 @@
}
})
const r4 = graph.createNode({
+ shape: 'mk-rect',
+ attrs: {
+ body: {
+ rx: 0,
+ ry: 0,
+ fill: '#fff7e6',
+ stroke: '#fa8c16'
+ },
+ text: {
+ text: '鑺傜偣'
+ }
+ }
+ })
+ const r5 = graph.createNode({
shape: 'mk-polygon',
attrs: {
body: {
@@ -953,7 +968,7 @@
}
}
})
- const r5 = graph.createNode({
+ const r6 = graph.createNode({
shape: 'mk-paral',
attrs: {
body: {
@@ -966,7 +981,7 @@
}
}
})
- const r6 = graph.createNode({
+ const r7 = graph.createNode({
shape: 'mk-circle',
attrs: {
body: {
@@ -979,7 +994,7 @@
}
})
- const r7 = graph.createNode({
+ const r8 = graph.createNode({
shape: 'mk-rect',
mknode: 'end',
attrs: {
@@ -996,7 +1011,7 @@
}
})
- stencil.load([r1, r2, r3, r4, r5, r6, r7], 'group1')
+ stencil.load([r1, r2, r3, r4, r5, r6, r7, r8], 'group1')
const p1 = graph.createNode({
shape: 'mk-ellipse',
@@ -1661,6 +1676,8 @@
} else {
this.selectNode.attr('line/strokeDasharray', 0)
}
+ } else if (key === 'mkdata') {
+ this.selectNode.prop('mkdata', value)
}
} else if (node.shape === 'lane') {
if (key === 'title') {
@@ -1796,12 +1813,12 @@
const { plot, status } = this.state
let _status = status === 10 ? 0 : 10
- let nodes = this.mkGraph.toJSON()
if (plot.subtype === 'xflow' && _status === 10) {
+ let nodes = this.mkGraph.toJSON()
let start_num = nodes.cells.filter(cell => cell.mknode === 'start').length
let end_num = nodes.cells.filter(cell => cell.mknode === 'end').length
-
+
if (start_num === 0) {
notification.warning({
top: 92,
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 911bb00..9aef657 100644
--- a/src/tabviews/custom/components/chart/antv-X6/nodeupdate/index.jsx
+++ b/src/tabviews/custom/components/chart/antv-X6/nodeupdate/index.jsx
@@ -5,6 +5,7 @@
import { FormOutlined } from '@ant-design/icons'
import ColorSketch from '@/mob/colorsketch'
+import NodeForm from './nodeform'
import './index.scss'
const { TextArea } = Input
@@ -17,12 +18,14 @@
state = {
formlist: null,
- mknode: null
+ mknode: null,
+ mkdata: null
}
UNSAFE_componentWillMount () {
this.setState({
- mknode: null,
+ mknode: this.props.node,
+ mkdata: this.props.node.mkdata || '',
formlist: this.getFormList(this.props.node)
})
}
@@ -30,10 +33,11 @@
UNSAFE_componentWillReceiveProps(nextProps) {
if (!is(fromJS(this.props.node), fromJS(nextProps.node))) {
this.setState({
- mknode: null,
formlist: null
}, () => {
this.setState({
+ mknode: nextProps.node,
+ mkdata: nextProps.node.mkdata || '',
formlist: this.getFormList(nextProps.node)
})
})
@@ -133,8 +137,7 @@
},
{
type: 'other',
- label: '鑷畾涔変俊鎭�',
- initval: node
+ label: '鑷畾涔変俊鎭�'
}
]
} else if (node.shape === 'lane') {
@@ -359,8 +362,7 @@
},
{
type: 'other',
- label: '鑷畾涔変俊鎭�',
- initval: node
+ label: '鑷畾涔変俊鎭�'
}
]
}
@@ -383,11 +385,14 @@
}
confirm = () => {
- this.setState({visible: false})
+ 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
@@ -466,6 +471,13 @@
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' ? <div>鏍囪锛歿mkdata.sign || ''}</div> : null}
+ {mkdata.roleId ? <div>瑙掕壊锛歿mkdata.roleName || ''}</div> : null}
+ {mkdata.depId ? <div>閮ㄩ棬锛歿mkdata.depName || ''}</div> : null}
+ <div>澶囨敞锛歿mkdata.remark || ''}</div>
+ </div> : null}
</Col>
)
}
@@ -474,7 +486,7 @@
}
render() {
- const { visible } = this.state
+ const { visible, mkdata, mknode } = this.state
return (
<div className="node-edit-form-wrap">
@@ -491,7 +503,7 @@
onCancel={() => this.setState({visible: false})}
destroyOnClose
>
-
+ <NodeForm node={mknode} data={mkdata} rolelist={this.props.rolelist} handleSubmit={() => this.confirm()} wrappedComponentRef={(inst) => this.nodeRef = inst}/>
</Modal>
</div>
)
diff --git a/src/tabviews/custom/components/chart/antv-X6/nodeupdate/index.scss b/src/tabviews/custom/components/chart/antv-X6/nodeupdate/index.scss
index 68f75dc..a7317be 100644
--- a/src/tabviews/custom/components/chart/antv-X6/nodeupdate/index.scss
+++ b/src/tabviews/custom/components/chart/antv-X6/nodeupdate/index.scss
@@ -8,6 +8,13 @@
padding-bottom: 2px;
font-size: 13px;
}
+ .mk-data {
+ font-size: 13px;
+ padding: 0 12px;
+ >div {
+ padding-bottom: 2px;
+ }
+ }
textarea.ant-input {
padding: 0px 4px;
border-radius: 0px;
@@ -100,4 +107,15 @@
border-radius: 3px;
border: 1px solid rgba(0, 0, 0, 0.07);
background: rgba(0, 0, 0, 0);
+}
+
+.normal-node-form {
+ >.ant-row >.ant-col-24 {
+ .ant-form-item-label {
+ width: 16%;
+ }
+ .ant-form-item-control-wrapper {
+ width: 84%;
+ }
+ }
}
\ No newline at end of file
diff --git a/src/tabviews/custom/components/chart/antv-X6/nodeupdate/nodeform.jsx b/src/tabviews/custom/components/chart/antv-X6/nodeupdate/nodeform.jsx
new file mode 100644
index 0000000..83ef825
--- /dev/null
+++ b/src/tabviews/custom/components/chart/antv-X6/nodeupdate/nodeform.jsx
@@ -0,0 +1,168 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import { Form, Row, Col, Select, Input, Radio, Tooltip, InputNumber } from 'antd'
+import { QuestionCircleOutlined } from '@ant-design/icons'
+
+const { TextArea } = Input
+
+class NodeForm extends Component {
+ static propTpyes = {
+ node: PropTypes.any,
+ data: PropTypes.any,
+ rolelist: PropTypes.array
+ }
+
+ state = {
+ ctrlType: this.props.data.ctrlType || 'role'
+ }
+
+ handleConfirm = () => {
+ const { rolelist } = this.props
+
+ return new Promise((resolve, reject) => {
+ this.props.form.validateFieldsAndScroll((err, values) => {
+ if (!err) {
+ if (values.roleId) {
+ values.roleName = ''
+ rolelist.forEach(item => {
+ if (item.RoleID === values.roleId) {
+ values.roleName = item.RoleName
+ }
+ })
+ }
+ if (values.depId) {
+ values.depName = ''
+ rolelist.forEach(item => {
+ if (item.RoleID === values.depId) {
+ values.depName = item.RoleName
+ }
+ })
+ }
+ resolve(values)
+ } else {
+ reject(err)
+ }
+ })
+ })
+ }
+
+ render() {
+ const { node, rolelist } = this.props
+ const { getFieldDecorator } = this.props.form
+ const { ctrlType } = this.state
+ const formItemLayout = {
+ labelCol: {
+ xs: { span: 24 },
+ sm: { span: 8 }
+ },
+ wrapperCol: {
+ xs: { span: 24 },
+ sm: { span: 16 }
+ }
+ }
+ let data = this.props.data || {}
+
+ return (
+ <Form {...formItemLayout} className="normal-node-form">
+ <Row gutter={24}>
+ <Col span={12}>
+ <Form.Item label="鐘舵�佸��">
+ {getFieldDecorator('status', {
+ initialValue: data.status || 0,
+ rules: [
+ {
+ required: true,
+ message: '璇疯緭鍏ョ姸鎬佸��!'
+ }
+ ]
+ })(
+ <InputNumber precision={0}/>
+ )}
+ </Form.Item>
+ </Col>
+ <Col span={12}>
+ <Form.Item label="鐘舵�佸悕">
+ {getFieldDecorator('statusName', {
+ initialValue: data.statusName || ''
+ })(
+ <Input placeholder="" autoComplete="off"/>
+ )}
+ </Form.Item>
+ </Col>
+ {node.shape !== 'edge' ? <Col span={12}>
+ <Form.Item label={
+ <Tooltip placement="topLeft" title="鏍囪灏嗕綔涓鸿妭鐐笽D">
+ <QuestionCircleOutlined className="mk-form-tip" />
+ 鏍囪
+ </Tooltip>
+ }>
+ {getFieldDecorator('sign', {
+ initialValue: data.sign || ''
+ })(
+ <Input placeholder="" autoComplete="off"/>
+ )}
+ </Form.Item>
+ </Col> : null}
+ <Col span={12}>
+ <Form.Item label="绫诲瀷">
+ {getFieldDecorator('ctrlType', {
+ initialValue: data.ctrlType || 'role'
+ })(
+ <Radio.Group onChange={(e) => this.setState({ctrlType: e.target.value})}>
+ <Radio value="role">瑙掕壊</Radio>
+ <Radio value="department">閮ㄩ棬</Radio>
+ <Radio value="none">鏃�</Radio>
+ </Radio.Group>
+ )}
+ </Form.Item>
+ </Col>
+ {ctrlType === 'role' ? <Col span={12}>
+ <Form.Item label="瑙掕壊">
+ {getFieldDecorator('roleId', {
+ initialValue: data.roleId || '',
+ rules: [
+ {
+ required: true,
+ message: '璇烽�夋嫨瑙掕壊!'
+ }
+ ]
+ })(
+ <Select showSearch filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
+ {rolelist.map(item => (<Select.Option key={item.RoleID} value={item.RoleID}>{item.RoleName}</Select.Option>))}
+ </Select>
+ )}
+ </Form.Item>
+ </Col> : null}
+ {ctrlType === 'department' ? <Col span={12}>
+ <Form.Item label="閮ㄩ棬">
+ {getFieldDecorator('depId', {
+ initialValue: data.depId || '',
+ rules: [
+ {
+ required: true,
+ message: '璇烽�夋嫨閮ㄩ棬!'
+ }
+ ]
+ })(
+ <Select showSearch filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
+ {rolelist.map(item => (<Select.Option key={item.RoleID} value={item.RoleID}>{item.RoleName}</Select.Option>))}
+ </Select>
+ )}
+ </Form.Item>
+ </Col> : null}
+ <Col span={24}>
+ <Form.Item label="澶囨敞">
+ {getFieldDecorator('remark', {
+ initialValue: data.remark || ''
+ })(
+ <TextArea rows={2}/>
+ )}
+ </Form.Item>
+ </Col>
+ </Row>
+ </Form>
+ )
+ }
+}
+
+export default Form.create()(NodeForm)
\ No newline at end of file
--
Gitblit v1.8.0