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, Tabs } 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';
import AuditDetailed from './AuditDetailed';
import { queryDingSchema } from '@/services/boom';

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

// 提交
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 [auditList, setAuditList] = useState([]); //用于创建Tabs表单
  const [form] = Form.useForm();

  const res = {
    result: {
      creatorUserId: '1649060463062661',
      gmtModified: '2022-08-10T15:24Z',
      formUuid: 'FORM-50442153-A9E8-4247-903C-AAF68B4C6219',
      bizType: '',
      ownerIdType: 'orgId',
      formCode: 'PROC-F2AD61A8-25CF-47AB-96EA-E0D0850BBE35',
      memo: '',
      engineType: 0,
      ownerId: '8642326',
      gmtCreate: '2022-08-09T11:53Z',
      schemaContent: {
        icon: 'promotion',
        title: '测试2',
        items: [
          {
            children: [
              {
                componentName: 'NumberField',
                props: {
                  id: 'NumberField_S1TT9HEIZGG0',
                  label: '数字输入框',
                  required: false,
                },
              },
              {
                componentName: 'DDSelectField',
                props: {
                  id: 'DDSelectField_1UAHP7C7C3NK0',
                  label: '单选框',
                  required: false,
                },
              },
              {
                props: {
                  id: 'PhoneField_SEIS8H2KAQO0',
                  label: '电话',
                  required: false,
                },
              },
            ],
            componentName: 'TableField',
            props: {
              staffStatusEnabled: false,
              holidayOptions: [],
              id: 'TableField_1NFDDN09KZQ80',
              label: '表格',
              push: {},
              actionName: '添加',
            },
          },
          {
            componentName: 'DepartmentField',
            props: {
              staffStatusEnabled: false,
              holidayOptions: [],
              id: 'DepartmentField_23VD81FG2G5C0',
              label: '部门',
              placeholder: '请选择',
              required: false,
              push: {},
            },
          },
          {
            componentName: 'DDAttachment',
            props: {
              staffStatusEnabled: false,
              holidayOptions: [],
              id: 'DDAttachment_YP8901BICJ4',
              label: '附件',
              required: false,
              push: {},
            },
          },
          {
            componentName: 'TextareaField',
            props: {
              staffStatusEnabled: false,
              holidayOptions: [],
              id: '请假事由',
              label: '请假事由',
              placeholder: '请输入请假事由',
              required: false,
              push: {},
            },
          },
          {
            componentName: 'DDPhotoField',
            props: {
              staffStatusEnabled: false,
              holidayOptions: [],
              id: '图片',
              label: '上传病假单（如病假）',
              push: {},
            },
          },
        ],
      },
      appUuid: 'ding0cdce2d5dbf986d9',
      appType: 0,
      visibleRange: 'PRIVATE',
      listOrder: 1084,
      name: '测试2',
      status: 'PUBLISHED',
      procType: '',
    },
  };
  const [schemaContent, setSchemaContent] = useState(res.result.schemaContent);

  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);
    console.log('================data', data, currentId, version);
    setData(data);
  }, [auditId, version]);

  useEffect(() => {
    form.resetFields();
    setAuditList([]);
  }, [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);
    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 => {
    //     let line = edge.attrs?.line?.strokeDasharray?.split(' ');
    //     return edge.source.cell == currentId && line && line[0] == '0';
    //   })
    //   .map(item => item.target.cell);
    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]);
    setAuditListFun();
  };
  //处理tabs页
  const setAuditListFun = async () => {
    var fieldsValue = await form.validateFields();
    let addAuditList = [];
    let result = Object.values(fieldsValue)
      .map(item => {
        if (item && Array.isArray(item)) return item;
      })
      .filter(item => item)
      .flat(Infinity);
    let codeList = [...new Set(result)]
      .map(Id => {
        return flowDetail.nodes.find?.(item => item.Id == Id).process_code;
      })
      .filter(item => item); // && !auditList.find(node => node.formCode == item)
    console.log('=========================auditfvsfs', codeList, auditList);
    codeList.map(async process_code => {
      let res = await queryDingSchema({ process_code });
      if (res) {
        addAuditList.push(res.data.result);
      }
    });
    setAuditList(addAuditList);
  };

  useEffect(() => {
    console.log(auditList);
  }, [auditList]);

  const onFinish = async () => {
    var fieldsValue = await form.validateFields();
    let hasFlowId = true; //是否都绑定审批节点
    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++;
        if (approvalNode?.Id) {
          if (!approvalNode?.flow_id) {
            hasFlowId = false;
          }
        }
        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);
    if (!serviceNode) {
      message.error('请选择需要流转的业务节点。');
      return;
    }
    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]; // 将要流转的节点审批节点
      if (approvalNode?.Id) {
        if (!approvalNode?.flow_id) {
          hasFlowId = false;
        }
      }
    } else {
      //多节点审批
      params.template_node_id = result[0][0]; // 将要流转的节点审批节点
      params.flow_path = result.map(item => getFlowPath(item));
    }
    // if (!hasFlowId) {
    //   message.error('当前存在审批节点未绑定审批流程!请联系管理员。');
    //   return;
    // }
    onOk(params);
  };

  const onTabChange = key => {
    console.log('=====================', key);
  };

  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>
      <Tabs defaultActiveKey="1" onChange={onTabChange}>
        {auditList.map((item, idx) => (
          <TabPane tab={item.name} key={`${idx}_${item.name}`}>
            <AuditDetailed items={item.schemaContent.items} />
          </TabPane>
        ))}
      </Tabs>
    </Modal>
  );
}

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