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 (