import React, { useRef, useState } from 'react'; import { Button, Col, Empty, Form, Row, message } from 'antd'; import ApprovalProcess from './components/ApprovalProcess'; import AuditDetailed from './components/AuditDetailed'; import PageContent from '@/components/PageContent'; // import AliyunOSSUpload from '@/components/OssUpload/AliyunOssUploader'; import { queryProcessFlows, createAduit, advanceSubmitNextNode, // queryOSSData, queryLeader, } from '@/services/boom'; import { useParams, useRequest, useNavigate } from 'umi'; import table from '../Table'; const OaDetail = () => { const [form] = Form.useForm(); const [approvalProcess, setApprovalProcess] = useState([]); const [auditCheck, setAuditCheck] = useState([]); const [tableData, setTableData] = useState([]); const { oaId } = useParams(); const formValueRef = useRef({ form: '', }); const uploadList = useRef([]); const navigate = useNavigate(); const { data, loading } = useRequest(queryProcessFlows, { defaultParams: [{ ids: oaId }], onSuccess() { advanceSubmit(null, {}); }, }); // const { data: OSSData } = useRequest(queryOSSData, { // defaultParams: [{ ids: oaId }], // }); const { loading: createLoadin, run: createRun } = useRequest(createAduit, { manual: true, onSuccess() { message.success('申请审批成功'); navigate(-1); }, }); const { run } = useRequest(advanceSubmitNextNode, { debounceInterval: 500, manual: true, formatResult(res) { setApprovalProcess(res.data[0]); }, }); const { data: leaderData } = useRequest(queryLeader, {}); //填写表单实时计算审批流程 const advanceSubmit = async (changedFields, allValues) => { console.log(changedFields, allValues); let formValues = (data?.formData || []) .map((item) => { const itemProps = item.props; let val = allValues[itemProps.id]; if (!itemProps.label) return; if (!val && val !== 0) return; if (val instanceof Object) { return { name: itemProps.label, id: itemProps.id, value: [...val], }; } else if (allValues[itemProps.id]) { return { name: itemProps.label, id: itemProps.id, type: item.componentName, value: [allValues[itemProps.id]] || undefined, }; } }) .filter((item) => item); let params = { flow_id: Number(oaId), template_node_id: 0, formComponentValues: formValues, audit_list: [], }; formValueRef.current.form = formValues; run(params); }; const handleTableValChange = (value, id, label) => { let ids = id.split(';'); let [rowIndex, colIndex] = ids[0].split(',').map((item) => Number(item)); let [columnID, tableID] = ids[1].split('>'); let [columnLabel, tableLabel] = label.split('>'); const cell = { name: columnLabel, id: columnID, type: columnID.split('_')[0], value: [value], }; // 组装可能用到的数据 const cols = []; cols[colIndex] = cell; const rows = []; rows[rowIndex] = cols; // 如果已经有数据 let oldTableData = []; // 这里不知道为什么不能直接读取state(tableData) setTableData((prevState) => { oldTableData = prevState; return prevState; }); console.clear(); console.log(oldTableData); if (oldTableData && oldTableData.length > 0) { let table = oldTableData.find((item) => item.id === tableID); // 如果某个表格数据存在 if (table) { const oldRows = table.value; // 如果某个表格的行数据存在 if (oldRows) { let odlCols = oldRows[rowIndex]; // 如果某个表格的某个行数据存在 if (odlCols) { // 记录可编辑控件 table.value[rowIndex][colIndex] = cell; // 不可编辑控件 table.value[rowIndex] = addUnEditableColumn( table.value[rowIndex], tableID, ); const newTableData = oldTableData.map((item) => { if (item.id === table.id) { return table; } return item; }); setTableData(newTableData); } else { // 如果某个表格的某个行数据不存在 // 写入可编辑控件 table.value[rowIndex] = cols; // 写入不可编辑控件的值 table.value[rowIndex] = addUnEditableColumn( table.value[rowIndex], tableID, ); const newTableData = oldTableData.map((item) => { if (item.id === table.id) { return table; } return item; }); setTableData([]); setTableData(newTableData); } } else { // 如果某个表格的行数据不存在 // 写入可编辑控件 table.value = rows; // 写入不可编辑控件 table.value[rowIndex] = addUnEditableColumn( table.value[rowIndex], tableID, ); const newTableData = oldTableData.map((item) => { if (item.id === table.id) { return table; } return item; }); setTableData(newTableData); } } else { // 如果某个table的数据不存在 rows[rowIndex] = addUnEditableColumn(rows[rowIndex], tableID); const newTableData = [ { name: tableLabel, id: tableID, type: tableID.split('_')[0], value: rows, }, ]; setTableData([...oldTableData, ...newTableData]); } } else { // 如果没有数据 // 添加不可编辑控件 rows[rowIndex] = addUnEditableColumn(rows[rowIndex], tableID); const newTableData = [ { name: tableLabel, id: tableID, type: tableID.split('_')[0], value: rows, }, ]; setTableData(newTableData); } }; const addUnEditableColumn = (rows, tableID) => { const { columns: originColumns } = data.formData.find( (item) => item.props.id === tableID, ); // 检查是否有文字说明控件,有的话需要添加在第几列的index后写入tableData const allTextNote = originColumns.filter((item, index) => { if (item.componentName === 'TextNote') { item.index = index; return true; } return false; }); // 对这个表格的每个第 (allTextNote.item 的 index )列写入 let textNoteCellList = []; if (allTextNote && allTextNote.length) { textNoteCellList = allTextNote.map((item) => { return { name: item.props.label, id: item.props.id, type: item.componentName, value: [item.props.placeholder], colIndex: item.index, }; }); } if (textNoteCellList.length) { for (const note of textNoteCellList) { rows[note.colIndex] = note; } } return rows; }; const submit = async () => { form.validateFields().then((values) => { const { form: formCur } = formValueRef.current; let audit_list = []; let cc_list = []; approvalProcess?.forEach((item, index) => { let arr = item[0].is_cc === 1 ? cc_list : audit_list; if (item[0].type === 'role') arr.push(auditCheck[index]); else if (item[0].type === 'leader') arr.push( ...leaderData.slice(0, item[0].value).map((leader) => leader.ID), ); else arr.push(item.map((cur) => cur.value)); }); let files = []; let formData = []; formCur.forEach((item) => { if (item.type === 'DDAttachment') { files = files.concat(item.value); } else { formData.push(item); } }); // 根据表格在原来的form中的顺序插入 const tableIndex = tableData.map((table) => { return data.formData.findIndex((item) => item.props.id === table.id); }); // 按保存的顺序把表格再插入进去 tableIndex.forEach((item, index) => { formData.splice(item, 0, tableData[index]); }); createRun({ flow_id: Number(oaId), form: JSON.stringify(formData), audit_list: audit_list.flat(), cc_list: cc_list.flat(), files: files.join(','), }); }); }; // const OnModelFileDone = (file) => { // var path = OSSData.host + '/' + file.url; // uploadList.current = [...uploadList.current, path]; // }; return ( 提交审批 , ]} > {/* {OSSData && ( )} */} {approvalProcess.length == 0 ? ( ) : ( )} ); }; export default OaDetail;