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 AuditFlow from './AuditFlow'; import { queryDingSchema } from '@/services/boom'; import { Form as Form3x } from '@ant-design/compatible'; 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 [formComponentValues, setFormComponentValues] = useState({}); //用于创建Tabs表单 const [form] = Form.useForm(); useEffect(() => { if (!visible) return; 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, visible]); 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); }) .filter(item => item.process_code); for (let i = 0; i < codeList.length; i++) { let res = await queryDingSchema({ process_code: codeList[i].process_code }); if (res) { res.data.result.nodeId = codeList[i].Id; addAuditList.push(res.data.result); } } console.log(addAuditList); addAuditList.forEach((item, index) => { let Components = Form3x.create({ onValuesChange: (props, changedValues, allValues) => { const { items } = props; console.log(item); formComponentValues[item.nodeId] = items .map(item => { const itemProps = item.props; if (!itemProps.label) return; let val = allValues[itemProps.id]; if (val instanceof Object) { return { name: itemProps.label, id: itemProps.id, ...val, }; } return { name: itemProps.label, // id: itemProps.id, value: allValues[itemProps.id] || '', }; }) .filter(item => item); setFormComponentValues({ ...formComponentValues }); }, })(AuditDetailed); item.FormComponents = ; }); setAuditList(addAuditList); }; const getFromData = idList => { const data = formComponentValues; const result = []; //获取流转节点的层级关系 let len = 0; let list = []; idList.forEach(item => { if (len < item.length) len = item.length; }); for (let i = 0; i < len; i++) { idList.forEach(item => { if (item && item[i]) list.push(item[i]); }); } let firstList = [...new Set(list)]; // let firstList = idList[0]; // for (let i = 1; i < idList.length; i++) { // let item = idList[i]; // item.forEach(itemId => { // let idx = firstList.findIndex(id => id == itemId); // if (idx > 0 && !firstList.find(cur => cur == item[idx - 1])) { // firstList.splice(idx, 0, item[i - 1]); // } // }); // } firstList.forEach(id => { let approvalNode = flowDetail.nodes.find?.(item => item.Id == id); const formItem = { processCode: approvalNode.process_code, originatorUserId: '16569001414345099', deptId: '14169890', template_node_id: `${approvalNode.Id}`, formComponentValues: data[approvalNode.Id], }; result.push(JSON.stringify(formItem)); }); return result; }; const onFinish = async () => { var fieldsValue = await form.validateFields(); console.log(formComponentValues); 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; } const flowPath = result.map(item => getFlowPath(item)); const formList = getFromData(result); 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]; // 将要流转的节点审批节点 params.form_list = formList; //创建钉钉表单所需数据 if (approvalNode?.Id) { if (!approvalNode?.flow_id) { hasFlowId = false; } } } else { //多节点审批 params.template_node_id = result[0][0]; // 将要流转的节点审批节点 params.flow_path = flowPath; params.form_list = formList; //创建钉钉表单所需数据 } if (!hasFlowId) { message.error('当前存在审批节点未绑定审批流程!请联系管理员。'); return; } console.log(JSON.stringify(params)); console.log(params); onOk(params); }; const onTabChange = key => { console.log('=====================', key); }; const CascaderNode = index => { return ( ); }; return ( { setAuditId(); onClose(); }} onOk={onFinish} >
{data.map((item, idx) => (data.length == 1 ? CascaderNode('') : CascaderNode(idx)))}
{auditList.map((item, idx) => ( // // // {item.FormComponents} ))}
); } export default connect(({ xflow, detail }) => ({ flowDetail: xflow.flowDetail, versionList: detail.versionList, }))(CommitAuditModal);