WorkloadWeb/src/pages/PurchaseAdmin/PurchaseList/Detail/CommitAuditModalNew.js

import React, { useEffect, useState, useRef, useMemo } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Modal, Input, Select, message } from 'antd';
import { connect } from 'dva';

const { TextArea } = Input;
const { Option } = Select;

// 提交
function CommitAuditModal(props) {
  const { visible, onClose, onOk, form, loading, version, versionList, flowDetail } = props;
  const [auditId, setAuditId] = useState();
  const handleOk = () => {
    form.validateFields((err, fieldsValue) => {
      console.log("-------",fieldsValue )
      if (err) return;
      let approvalNode = flowDetail.nodes.find?.(item => item.Id == fieldsValue.node_id);
      let serviceNode = flowDetail.nodes.find?.(
        item => item.Id == fieldsValue.next_template_node_id
      );
      let params = {
        desc: fieldsValue.desc,
        // 审核流程id
        flow_id: approvalNode?.flow_id || 0,
        node_level_id: approvalNode?.flow_id ? 1 : 0,

        id: version.id,
        project_id: version.project_id,
        cur_template_node_id: version.template_node_id * 1, // 当前节点
        template_node_id: approvalNode?.Id, // 将要流转的节点审批节点
        next_template_node_id: serviceNode.Id * 1, // 审核完成后的业务节点

        // 模板id.一致就行
        template_id: version.template_id,
        cur_template_id: version.template_id,
        next_template_id: version.template_id,
      };
      if (approvalNode?.Id) {
        if (!approvalNode?.flow_id) {
          message.error('审批节点未绑定审批流程!请联系管理员。');
          return;
        }
      }
      // // 判断业务节点是否允许多清单
      // if (!serviceNode.muti_version) {
      //   //audit_status=4 表示为清单推进后留存的副本.不计入多清单计算
      //   let serviceVersion = versionList.find(
      //     item => item.audit_status != 4 && item.template_node_id == serviceNode.Id
      //   );
      //   if (serviceVersion) {
      //     message.error(
      //       `流转失败！业务节点【${serviceNode.label}】为单清单节点。已存在清单【${serviceVersion.version_name}】。`
      //     );
      //     return;
      //   }
      // }


      setAuditId();
      // onOk(params);
    });
  };
  const currentNodeId = useMemo(() => {
    let Id = version.template_node_id;
    return flowDetail.nodes.find?.(item => item.Id == Id)?.node_id;
  }, [flowDetail, version]);
  /**
   *
   * @param {*} currentId 当前节点
   * @param {*} type 下一个节点的类型  custom-circle: 审批节点   custom-rect: 业务节点
   * @returns
   */
  const getNextNodes = (currentId, type) => {
    const { edges, nodes } = flowDetail;
    if (!currentId) return [];
    let targetIds = edges
      .filter(edge => edge.source.cell == currentId)
      .map(item => item.target.cell);
    let auditNodes = nodes.filter(node => {
      if (type && node.name != type) {
        return false;
      }
      return targetIds.indexOf(node.id) != -1;
    });
    return auditNodes || [];
  };

  const changeAudit = id => {
    let node = flowDetail.nodes.find?.(item => item.Id == id);
    setAuditId(node.node_id);
  };

  return (
    <Modal
      confirmLoading={loading}
      destroyOnClose
      title="提交流转目标"
      visible={visible}
      onCancel={() => {
        setAuditId();
        onClose();
      }}
      onOk={handleOk}
    >
      <Form.Item labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label="审批节点">
        {form.getFieldDecorator('node_id')(
          <Select style={{ width: '100%' }} onChange={changeAudit}>
            {getNextNodes(currentNodeId, 'custom-circle').map(item => (
              <Option key={item.Id}>{item.label}</Option>
            ))}
          </Select>
        )}
      </Form.Item>
      {/* <Form.Item labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label="审批节点2">
        {form.getFieldDecorator('nod_id')(
          <Select style={{ width: '100%' }} onChange={changeAudit}>
            {getNextNodes(auditId || currentNodeId, 'custom-circle').map(item => (
              <Option key={item.Id}>{item.label}</Option>
            ))}
          </Select>
        )}
      </Form.Item> */}
      <Form.Item labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label="业务节点">
        {form.getFieldDecorator('next_template_node_id')(
          <Select style={{ width: '100%' }}>
            {getNextNodes(auditId || currentNodeId, auditId ? 'custom-rect' : '').map(item => (
              <Option key={item.Id}>{item.label}</Option>
            ))}
          </Select>
        )}
      </Form.Item>
      <Form.Item labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label="备注信息">
        {form.getFieldDecorator('desc')(<Input.TextArea />)}
      </Form.Item>
    </Modal>
  );
}

export default connect(({ xflow, detail }) => ({
  flowDetail: xflow.flowDetail,
  versionList: detail.versionList,
}))(Form.create()(CommitAuditModal));