import React, { useEffect, useState, useRef, useMemo, memo } from 'react'; import { Modal, Input, Select, List, Row, Col, Table, message, Steps, Space, Button, Popover, Cascader, AutoComplete, } from 'antd'; import Flow from '@/components/Flow/index'; import { connect } from 'dva'; import { GetTokenFromUrl, getToken } from '@/utils/utils'; import { MODELS, useXFlowApp, useModelAsync } from '@antv/xflow'; import { CheckOutlined } from '@ant-design/icons'; import { queryDelPurchaseExcel, queryDingInstanceDetail, queryRecordSheet, queryVserionByNode, } from '@/services/boom'; import { async } from '@antv/x6/lib/registry/marker/async'; import VersionModal from './VersionModal'; import AuditFlow from './AuditFlow'; const { Option } = Select; const { Step } = Steps; const { TextArea } = Input; const localData = JSON.parse(localStorage.ggDetaiData || '{}'); const PAGE_SIZE = 8; // 提交 function FlowModal(props) { let token = getToken(); const SELECT_TYPE = { NAME: '0', TYPE: '1', CREATOR: '2', }; const { visible, version, onClose, onChangeVersion, onDelVersion, form, loading, flowDetail, dispatch, isOut, onCommit, commitLoading, currentUser, typeOptions, userList, } = props; const [data, setData] = useState([]); const [showData, setShowData] = useState([]); const [nodeLoading, setNodeLoading] = useState(false); const [pageSize, setPageSize] = useState(PAGE_SIZE); const [stepsData, setStepsData] = useState([]); const [versionVisible, setVersionVisible] = useState(false); const [selectType, setSelectType] = useState(SELECT_TYPE.NAME); const [inputValue, setInputValue] = useState(''); const graphData = useMemo(() => { if (!flowDetail) return; let nodes = flowDetail.nodes?.map(item => ({ ...item, isCheck: item.Id == version.template_node_id, })); return { nodes, edges: flowDetail.edges, }; }, [flowDetail, version.template_node_id]); useEffect(() => { if (!visible) updateSteps([]); }, [visible, version]); useEffect(() => { if (stepsData.length <= 0) { setPageSize(PAGE_SIZE); } else { setPageSize(PAGE_SIZE - stepsData.length); } }, [stepsData]); const handleSelectNode = async args => { let res; const id = args.nodeId || args.nodeIds[0]; if (!id) return; let node = graphData.nodes.find(item => item.id == id); setNodeLoading(true); try { res = await queryVserionByNode({ template_node_id: node.Id }); let data = []; if (!res.data.excel_version_tree) setData([]); res.data.excel_version_tree?.map(arr => { if (res.data.flow_id) { data = [...data, { ...arr, flow_id: res.data.flow_id }]; } else { data = [...data, arr]; } }); data.sort((a, b) => b.id - a.id); data.forEach((item, id) => { //解决key报错问题 data[id].key = `${id}-${item.name}`; item.isParent = true; }); console.log(data); setData(data); } catch (error) { console.log(error); } setNodeLoading(false); updateSteps([]); }; const updateSteps = (data, curNodeId) => { let newData = []; let set = new Set(); data.forEach(item => set.add(item.template_node_id)); let list = [...set]; if (set.has(curNodeId)) { set.delete(curNodeId); list = [curNodeId, ...set]; } let dataList = list.map(template_node_id => { let itemDataList = data.filter(item => item.template_node_id == template_node_id); let curid = 3; let status = 'process'; itemDataList.forEach(item => { if (item.audit_status != 3 && item.node_id <= curid) curid = item.node_id - 1; if (item.audit_status == 2) status = 'error'; }); let curNode = flowDetail.nodes.find(item => item.Id == itemDataList[0].template_node_id); const seqList = itemDataList[0].FlowInfo.FlowNodes.filter( item => item.template_node_id == template_node_id ).sort((a, b) => a.seq - b.seq); let obj = { status, current: curid, list: seqList, name: curNode?.label || itemDataList[0].FlowInfo.name, }; // itemDataList.forEach((itemData, idx) => { // if (idx >= obj.list.length) return; // obj.list[idx].auditor = itemData.AuthorInfo.CName; // }); return obj; }); setStepsData(dataList); }; // const updateSteps = async (data, curNodeId) => { // const dataList = []; // for (let i = 0; i < data.length; i++) { // let curNode = flowDetail.nodes.find(item => item.Id == data[i].template_node_id); // console.log(curNode); // const response = await queryDingInstanceDetail({ // process_instance_id: data[i].ding_instance_id, //创建表单成功返回的id // }); // if (response) { // const processInstance = response.data?.process_instance; // let data = { // processCode: '', // deptId: '14169890', // tasks: [], // // userId: '16569001414345099', // // deptId: currentUser.DingDepId || getCurrentUser()?.DingDepId, // userId: currentUser.DingUserId || getCurrentUser()?.DingUserId, // formComponentValues: [], // activityId: '', // cc_userids: [], // status: 'undefined', // name: curNode?.label || '未知节点', // }; // if (processInstance?.tasks && processInstance.tasks?.length > 0) { // // let item = flowDetail.nodes.find(item => item.Id == version.template_node_id); // // if (!item) return data; // const { tasks, form_component_values, cc_userids } = processInstance; // data.processCode = curNode.process_code; // data.activityId = tasks[tasks.length - 1]?.activity_id; // data.tasks = tasks || []; // data.cc_userids = cc_userids; // data.formComponentValues = form_component_values?.filter(curNode => curNode.name); // } // dataList.push(data); // } // } // console.log(dataList); // setStepsData(dataList); // }; const handleChangeClick = item => { let file = isOut ? 'newList' : 'detail'; let type = item.flow_id ? '/queryAuditRecord' : '/queryAuditExcel'; console.log(`${file}${type}`, item); dispatch({ type: `${file}${type}`, payload: { excel_id: item.id, pageSize: 100, }, callback: res => { updateSteps(res, item.template_node_id); }, }); }; const columns = useMemo(() => { return [ { title: '名称', width: '25%', render: item => ( {item.id == version.id && !item.isParent && ( )} {item.version_no && !item.children?.length ? `${item.version_name}.${item.version_no}` : item.version_name} ), }, { title: '创建人', width: '15%', render: item => { return ( item.isParent && ( {userList.find(cur => cur.ID == item.author)?.CName || '-'} ) ); }, }, { title: '分类', width: '15%', render: item => { return ( item.isParent && ( {typeOptions.find(cur => cur.id == item.classify_id)?.name} ) ); }, }, { title: '状态', width: '15%', render: item => { if (!item.flow_id && item.isParent) return; let style = { color: getColor(item) }; let txt = ''; let dom = ''; switch (item.audit_status) { case 0: txt = '未提交'; break; case 1: txt = '待审批'; break; case 2: txt = '已拒绝'; break; case 3: txt = '已通过'; break; case 4: txt = '已提交'; break; } if (item.status == 1) txt = '已失效'; // 显示拒绝原因 if (item.audit_comment) { dom = ( {txt} ); } else { dom = txt; } return item.audit_status != 0 ? ( ) : ( {dom} ); }, }, { title: '操作', width: '20%', render: item => (item.flow_id || !item.isParent) && item.id != version.id && ( { console.log(item); onChangeVersion(item); onClose(); }} > 加载 {item.audit_status == 0 && item.author == currentUser.ID && ( //自己创建的&&未提交的清单自己可以删除 { onDelVersion({ excel_id: item.id }); }} > 删除 )} ), }, ]; }, [version]); const childColumns = useMemo(() => { return [ { title: '名称', width: '50%', render: item => ( {item.id == version.id && !item.isParent && ( )} {item.version_no && !item.children?.length ? `${item.version_name}.${item.version_no}` : item.version_name} ), }, { title: '状态', render: item => { if (!item.flow_id && item.isParent) return; let style = { color: getColor(item) }; let txt = ''; let dom = ''; switch (item.audit_status) { case 0: txt = '未提交'; break; case 1: txt = '待审批'; break; case 2: txt = '已拒绝'; break; case 3: txt = '已通过'; break; case 4: txt = '已提交'; break; } if (item.status == 1) txt = '已失效'; // 显示拒绝原因 if (item.audit_comment) { dom = ( {txt} ); } else { dom = txt; } return item.audit_status != 0 ? ( ) : ( {dom} ); }, }, { title: '操作', width: '30%', render: item => (item.flow_id || !item.isParent) && item.id != version.id && ( { console.log(item); onChangeVersion(item); onClose(); }} > 加载 {item.audit_status == 0 && item.author == currentUser.ID && ( //自己创建的&&未提交的清单自己可以删除 { onDelVersion({ excel_id: item.id }); }} > 删除 )} ), }, ]; }, [version]); const onChange = value => { updateSteps([]); }; useEffect(() => { if (!inputValue) { setShowData(data); return; } let resultData = [...data]; switch (selectType) { case SELECT_TYPE.NAME: resultData = data.filter(item => item.version_name.includes(inputValue)); break; case SELECT_TYPE.TYPE: const classify = typeOptions.find(item => item.name.includes(inputValue)); if (classify) { resultData = data.filter(item => item.classify_id == classify.id); } break; case SELECT_TYPE.CREATOR: resultData = data.filter(item => item.AuthorInfo?.CName.includes(inputValue)); break; } setShowData(resultData); }, [inputValue, data]); return ( <>
清单列表
{isOut && ( )}
setInputValue(e.target.value)} />
( //
// ), // rowExpandable: record => record.children?.length > 0, // }} /> {stepsData.map((item, idx) => (
{item.name}
{item.list.map(node => ( ))}
))} setVersionVisible(false)} onOk={values => { onCommit?.(values, null, () => { setVersionVisible(false); }); }} loading={commitLoading} /> ); } const getColor = item => { let color = ''; switch (item.audit_status) { case 2: // 审批拒绝 color = '#f5222d'; break; case 3: // 审批成功 color = '#7cb305'; break; case 4: // 历史清单 color = '#9b9b9b'; break; default: break; } return color; }; export default connect(({ loading, user }) => ({ loading, currentUser: user.currentUser, userList: user.list, }))(FlowModal); // export default FlowModal;