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

import React, { useEffect, useState, useRef, useMemo } from 'react';
import '@ant-design/compatible/assets/index.css';
import { Modal, Input, Select, message, Cascader, Form } from 'antd';
import { connect } from 'dva';
import { isArray, result } from 'lodash';
import { useForm } from 'rc-field-form';
import { async } from '@antv/x6/lib/registry/marker/async';

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

// 提交
function CommitAuditModal(props) {
  const { visible, onClose, onOk, loading, version, versionList, flowDetail } = props;
  const [auditId, setAuditId] = useState();
  const [data, setData] = useState([])
  const [length, setLength] = useState(1)
  const [formData, setFromData] = useState({})
  const [form] = Form.useForm();
  useEffect(() => {
    const { edges, nodes } = flowDetail;
    let Id = version.template_node_id;
    const currentId = flowDetail.nodes.find?.(item => item.Id == Id)?.node_id
    const data = treeData(currentId)
    if(data.length <= 0) setAuditId(currentId)
    setData(data)
  }, [auditId, version.template_node_id])
  
  useEffect(()=>{
    form.resetFields()
  },[visible])

  const treeData = (currentId) => {
    const list = getNextNodes(currentId,'custom-circle');
    const fun = (nodes) => {
      const re = nodes?.forEach((item, idx)=>{
        const data = getNextNodes(item.Id,'custom-circle');
        if(data || data.length > 0) list.push(...data);
        fun(data)
      })
    }
    fun(list)
    console.log(list)
    const fun2 = (list) => {
      const parents = list.filter(item=>list.findIndex(node=>node.Id == item.parentId) == -1)
      let translator = (parents, children) => {
        setLength(length+1)
        parents.forEach((parent) => {
            children.forEach((current, index) => {
                if (current.parentId === parent.Id) {
                    let temp = JSON.parse(JSON.stringify(children))
                    temp.splice(index, 1)
                    translator([current], temp)
                    if(!parent.children.find(item=>item.Id == current.Id))parent.children.push(current)
                }
            })
        })
      }   
      translator(parents, list)   
      return parents
    } 
    return fun2(list)
  }

  const currentNodeId = useMemo(() => {
    let Id = version.template_node_id;
    setAuditId(currentNodeId)
    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);
    edges.filter(edge =>  edge.source.cell == currentId)
    let auditNodes = nodes.filter(node => {
      if (type && node.name != type) {
        return false;
      }
      return targetIds.indexOf(node.id) != -1;
    });
    const result = auditNodes.map(item=>{return { label:item.label, value:item.Id, Id:item.node_id,parentId:currentId, children:[]}})
    return result || [];
  };

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

  const onChange = (value) => {
    changeAudit(value[value.length-1])
  };

  const onFinish = async() => {
    var fieldsValue = await form.validateFields();

    const getFlowPath = (node) => { //[134, 135]
      let itemData = {}
      const Function = (curId,index) => {
        if(!curId) return;
        let data = {}
        let approvalNode = flowDetail.nodes.find?.(item => item.Id == curId);
        data.template_id = version.template_id;
        data.flow_id = approvalNode?.flow_id || 0;
        data.node_level_id = approvalNode?.flow_id ? 1 : 0;
        data.template_node_id = approvalNode?.Id;
        index++;
        const res = Function(node[index], index);
        if(res) {
          data.flow_path = [res]
        }
        return data
      }
      itemData = Function(node[0], 0)
      return itemData
    }
    let  result = Object.values(fieldsValue).map(item=> {if(item && Array.isArray(item)) return item}).filter(item=>item)
    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, // 当前节点
      next_template_node_id: serviceNode.Id * 1, // 审核完成后的业务节点
      // template_node_id: result[0][0], // 将要流转的节点审批节点
      // flow_path:flow_path, //审批节点数组
      // 模板id.一致就行
      template_id: version.template_id,
      cur_template_id: version.template_id,
      next_template_id: version.template_id,
    };
    if(result.length <= 0){
      //直接走业务节点
    }else if(result.length <= 1 && result[0]?.length <= 1){
      //单个审批节点
      let approvalNode = flowDetail.nodes.find?.(item => item.Id == result[0][0]);
      params.flow_id = approvalNode?.flow_id || 0;
      params.node_level_id = approvalNode?.flow_id ? 1 : 0;
      params.template_node_id = result[0][0]; // 将要流转的节点审批节点
    }else{
      //多节点审批
      params.template_node_id = result[0][0]; // 将要流转的节点审批节点
      params.flow_path = result.map(item=>getFlowPath(item));
    }

    
    //   if (approvalNode?.Id) {
    //     if (!approvalNode?.flow_id) {
    //       message.error('审批节点未绑定审批流程!请联系管理员。');
    //       return;
    //     }
    //   }
    
    // setAuditId();
    onOk(params);
  }

  const CascaderNode = (index) => {
    return(
      <Form.Item labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label={`审批节点${index+1}`} name={`circle${index}`} key={`circle${index}`}>
        <Cascader style={{ width: '100%' }}  options={data} onChange={onChange} />
      </Form.Item>
    )
  }

  return (
    <Modal
      confirmLoading={loading}
      destroyOnClose
      title="提交流转目标"
      visible={visible}
      onCancel={() => {
        setAuditId();
        onClose();
      }}
      onOk={onFinish}
    > 
    <Form form={form}>
      {data.map((item, idx)=>  data.length == 1? CascaderNode(''): CascaderNode(idx) )}
      <Form.Item labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label="业务节点" name='next_template_node_id' >
          <Select style={{ width: '100%' }}>
            {getNextNodes(data.length < 0 ?currentNodeId : auditId,  'custom-rect' ).map(item => (
              <Option key={item.value}>{item.label}</Option>
            ))}
          </Select>
      </Form.Item>
      <Form.Item labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label="备注信息" name="desc">
        <Input.TextArea />
      </Form.Item>
    </Form>
    </Modal>
  );
}

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