2024-04-22

king

2024-04-22 fc8c8d714687a22f711d642d192bd4149f3b7e88

 src/tabviews/custom/components/chart/antv-X6/nodeupdate/index.jsx

@@ -1,23 +1,31 @@
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 './index.scss'

const { TextArea } = Input

class NodeUpdate extends Component {
  static propTpyes = {
    node: PropTypes.object
    node: PropTypes.object,
    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)
    })
  }
@@ -28,6 +36,8 @@
        formlist: null
      }, () => {
        this.setState({
          mknode: nextProps.node,
          mkdata: nextProps.node.mkdata || '',
          formlist: this.getFormList(nextProps.node)
        })
      })
@@ -70,6 +80,8 @@
        lineType = 'dash'
      }

      let font = node.labels && node.labels[0] ? node.labels[0].attrs.label : {}

      return [
        {
          type: 'title',
@@ -79,7 +91,7 @@
          type: 'text',
          field: 'title',
          label: '标签',
          initval: title
          initval: font.text || ''
        },
        {
          type: 'title',
@@ -106,6 +118,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') {
@@ -196,14 +228,30 @@
        }
      ]
    } else if (node.shape === 'mk-text') {
      let fontFill = '#262626'
      if (node.attrs && node.attrs.text) {
        fontFill = node.attrs.text.fill || '#262626'
      if (node.attrs && node.attrs.label) {
        title = node.attrs.label.text || ''
      }

      let fontSize = 12
      if (node.attrs && node.attrs.text) {
        fontSize = node.attrs.text.fontSize || 12
      let fill = ''

      if (node.attrs && node.attrs.body) {
        fill = node.attrs.body.fill || ''
      }

      let stroke = ''

      if (node.attrs && node.attrs.body) {
        stroke = node.attrs.body.stroke || ''
      }

      let fontFill = '#262626'
      if (node.attrs && node.attrs.label) {
        fontFill = node.attrs.label.style.color || '#262626'
      }

      let fontSize = 14
      if (node.attrs && node.attrs.label) {
        fontSize = node.attrs.label.style.fontSize || 14
      }
      return [
        {
@@ -211,10 +259,26 @@
          label: '内容'
        },
        {
          type: 'text',
          type: 'textarea',
          field: 'title',
          label: '标签',
          initval: title
        },
        {
          type: 'title',
          label: '样式'
        },
        {
          type: 'color',
          field: 'fill',
          label: '背景',
          initval: fill
        },
        {
          type: 'color',
          field: 'stroke',
          label: '边框',
          initval: stroke
        },
        {
          type: 'title',
@@ -297,15 +361,9 @@
          initval: fontFill
        },
        {
          type: 'title',
          type: 'other',
          label: '自定义信息'
        },
        {
          type: 'text',
          field: 'mksign',
          label: '标记',
          initval: node.mksign || ''
        },
        }
      ]
    }
  }
@@ -326,8 +384,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
@@ -345,6 +410,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') {
@@ -392,8 +463,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>
        )
      }
@@ -402,11 +487,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={1050}
          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>
    )
  }