2024-04-22

king

2024-04-22 fc8c8d714687a22f711d642d192bd4149f3b7e88

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

@@ -1,40 +1,79 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Select, Input, Radio, Tooltip, InputNumber } from 'antd'
import { Form, Row, Col, Input, Radio, Tooltip, InputNumber, Switch, notification } from 'antd'
import { QuestionCircleOutlined } from '@ant-design/icons'

import MemberForm from './memberform'
const { TextArea } = Input

class NodeForm extends Component {
  static propTpyes = {
    node: PropTypes.any,
    data: PropTypes.any,
    rolelist: PropTypes.array
    orgs: PropTypes.array,
    handleSubmit: PropTypes.func
  }

  state = {}
  state = {
    flowType: 'approval',
    execCondition: false,
    approvalMethod: 'orsign',
    readOnly: false,
    options: []
  }

  UNSAFE_componentWillMount() {
    const { node, data } = this.props

    let options = []
    let readOnly = false

    if (node.mknode === 'start') {
      readOnly = true
    } else if (node.mknode === 'end') {

    } else if (node.mknode === 'endEdge') {
      options = ['approvalMethod']
    } else if (node.mknode === 'startEdge') {
      readOnly = true
    } else if (node.mknode === 'firstEdge') {
      options = ['approver', 'members', 'copys']
    } else if (node.shape !== 'edge') { // node
      options = ['sign']
    } else {
      options = ['flowType', 'approvalMethod', 'approver', 'members', 'copys', 'execCondition']
    }

    this.setState({
      flowType: data.flowType || 'approval',
      execCondition: options.includes('execCondition') && data.execCondition === 'open',
      approvalMethod: data.approvalMethod || 'orsign',
      options,
      readOnly
    })
  }

  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.approvalMethod === 'countersign' && values.members.length > 5) {
            notification.warning({
              top: 92,
              message: '会签时审批人不可超过5人！',
              duration: 10
            })
            return
          }
          if (values.depId) {
            values.depName = ''
            rolelist.forEach(item => {
              if (item.RoleID === values.depId) {
                values.depName = item.RoleName
              }
            })

          if (values.execCondition === true) {
            values.execCondition = 'open'
          } else if (values.execCondition === false) {
            values.execCondition = 'close'
          }

          if (values.matchVal) {
            values.matchVal = values.matchVal.replace(/\t+|\v+|\s+/g, '')
          }
          resolve(values)
        } else {
@@ -45,8 +84,9 @@
  }

  render() {
    const { node, rolelist } = this.props
    const { orgs } = this.props
    const { getFieldDecorator } = this.props.form
    const { flowType, execCondition, approvalMethod, readOnly, options } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -58,28 +98,22 @@
      }
    }
    let data = this.props.data || {}
    let nodetype = node.shape !== 'edge' ? 'node' : 'edge'
    if (node.mknode === 'start') {
      nodetype = 'start'
    } else if (node.mknode === 'end') {
      nodetype = 'end'
    }

    return (
      <Form {...formItemLayout} className="normal-node-form">
        <Row gutter={24}>
          {options.includes('approver') ? <Col span={24}>
            <p className="mk-split">按钮执行命令</p>
          </Col> : null}
          <Col span={12}>
            <Form.Item label="状态值">
              {getFieldDecorator('status', {
                initialValue: data.status === undefined ? 0 : data.status,
                initialValue: data.status,
                rules: [
                  {
                    required: true,
                    message: '请输入状态值!'
                  }
                  { required: true, message: '请输入状态值!' }
                ]
              })(
                <InputNumber precision={0}/>
                <InputNumber readOnly={readOnly} precision={0} onPressEnter={() => this.props.handleSubmit()}/>
              )}
            </Form.Item>
          </Col>
@@ -88,11 +122,11 @@
              {getFieldDecorator('statusName', {
                initialValue: data.statusName || ''
              })(
                <Input placeholder="" autoComplete="off"/>
                <Input autoComplete="off" onPressEnter={() => this.props.handleSubmit()}/>
              )}
            </Form.Item>
          </Col>
          {nodetype === 'node' ? <Col span={12}>
          {options.includes('sign') ? <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="标记将作为节点ID">
                <QuestionCircleOutlined className="mk-form-tip" />
@@ -102,12 +136,65 @@
              {getFieldDecorator('sign', {
                initialValue: data.sign || ''
              })(
                <Input placeholder="" autoComplete="off"/>
                <Input autoComplete="off" onPressEnter={() => this.props.handleSubmit()}/>
              )}
            </Form.Item>
          </Col> : null}
          {nodetype === 'node' ? <Col span={12}>
            <Form.Item label="审批人">
          {options.includes('flowType') ? <Col span={12}>
            <Form.Item label="操作类型">
              {getFieldDecorator('flowType', {
                initialValue: flowType
              })(
                <Radio.Group onChange={(e) => this.setState({flowType: e.target.value})}>
                  <Radio value="approval">审批</Radio>
                  <Radio value="reject">驳回</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col> : null}
          {options.includes('approvalMethod') && flowType !== 'reject' ? <Col span={12}>
            <Form.Item label="审批方式">
              {getFieldDecorator('approvalMethod', {
                initialValue: approvalMethod
              })(
                <Radio.Group onChange={(e) => this.setState({approvalMethod: e.target.value})}>
                  <Radio value="orsign">或签</Radio>
                  <Radio value="countersign">会签</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col> : null}
          {options.includes('approvalMethod') && flowType !== 'reject' && approvalMethod === 'countersign' ? <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="示例：“财务经理张总已审核”，其中“已审核”为会签标记。">
                <QuestionCircleOutlined className="mk-form-tip" />
                会签标记
              </Tooltip>
            }>
              {getFieldDecorator('mark', {
                initialValue: data.mark || '已审核',
                rules: [
                  { required: true, message: '请输入会签标记!' }
                ]
              })(
                <Input autoComplete="off" onPressEnter={() => this.props.handleSubmit()}/>
              )}
            </Form.Item>
          </Col> : null}
          <Col span={24}>
            <Form.Item label="备注">
              {getFieldDecorator('remark', {
                initialValue: data.remark || ''
              })(
                <TextArea rows={2}/>
              )}
            </Form.Item>
          </Col>
          {options.includes('approver') ? <Col span={24}>
            <p className="mk-split">下一步审批权限</p>
          </Col> : null}
          {options.includes('approver') ? <Col span={12}>
            <Form.Item label="设置审批人">
              {getFieldDecorator('approver', {
                initialValue: data.approver || 'member'
              })(
@@ -119,61 +206,70 @@
              )}
            </Form.Item>
          </Col> : null}
          {nodetype === 'node' ? <Col span={12}>
            <Form.Item label="审批方式">
              {getFieldDecorator('approvalMethod', {
                initialValue: data.approvalMethod || 'countersign'
          {options.includes('members') ? <Col span={12}>
            <Form.Item label="审批人">
              {getFieldDecorator('members', {
                initialValue: data.members || [],
                rules: [
                  { required: true, message: '请添加审批人!' }
                ]
              })(
                <MemberForm orgs={orgs} title="审批人"/>
              )}
            </Form.Item>
          </Col> : null}
          {options.includes('copys') ? <Col span={12}>
            <Form.Item label="抄送人">
              {getFieldDecorator('copys', {
                initialValue: data.copys || []
              })(
                <MemberForm orgs={orgs} title="抄送人"/>
              )}
            </Form.Item>
          </Col> : null}
          {options.includes('execCondition') && flowType !== 'reject' ? <Col span={24}>
            <p className="mk-split">分支执行条件</p>
          </Col> : null}
          {options.includes('execCondition') && flowType !== 'reject' ? <Col span={12}>
            <Form.Item label="执行条件">
              {getFieldDecorator('execCondition', {
                valuePropName: 'checked',
                initialValue: execCondition
              })(
                <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={(val) => this.setState({execCondition: val})} />
              )}
            </Form.Item>
          </Col> : null}
          {flowType !== 'reject' && execCondition ? <Col span={12}>
            <Form.Item label="对比方式">
              {getFieldDecorator('match', {
                initialValue: data.match || '='
              })(
                <Radio.Group>
                  <Radio value="countersign">会签</Radio>
                  <Radio value="orsign">或签</Radio>
                  <Radio value="=">=</Radio>
                  <Radio value="<">&lt;</Radio>
                  <Radio value=">">&gt;</Radio>
                  <Radio value="<=">&lt;=</Radio>
                  <Radio value=">=">&gt;=</Radio>
                  <Radio value="!=">!=</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col> : null}
          <Col span={12}>
            <Form.Item label="角色">
              {getFieldDecorator('roleId', {
                initialValue: data.roleId || '',
                rules: [
                  {
                    required: true,
                    message: '请选择角色!'
                  }
                ]
          {flowType !== 'reject' && execCondition ? <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="对比值中不可包含制表符、空格、换行符等。">
                <QuestionCircleOutlined className="mk-form-tip" />
                对比值
              </Tooltip>
            }>
              {getFieldDecorator('matchVal', {
                initialValue: data.matchVal || ''
              })(
                <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>
                <Input autoComplete="off" onPressEnter={() => this.props.handleSubmit()}/>
              )}
            </Form.Item>
          </Col>
          <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>
          <Col span={24}>
            <Form.Item label="备注">
              {getFieldDecorator('remark', {
                initialValue: data.remark || ''
              })(
                <TextArea rows={2}/>
              )}
            </Form.Item>
          </Col>
          </Col> : null}
        </Row>
      </Form>
    )