|
|
@@ -1,30 +1,43 @@
|
|
|
-import React, { useEffect, useState, useRef, useMemo } from 'react';
|
|
|
+import React, { useEffect, useState, useRef, useMemo, memo } from 'react';
|
|
|
import { Modal, Input, Select, List, Row, Col, Table, message, Steps, Space, Button } 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 { queryVserionByNode } from '@/services/boom';
|
|
|
+import { queryRecordSheet, queryVserionByNode } from '@/services/boom';
|
|
|
import { async } from '@antv/x6/lib/registry/marker/async';
|
|
|
+import VersionModal from './VersionModal';
|
|
|
const { Step } = Steps;
|
|
|
|
|
|
const { TextArea } = Input;
|
|
|
const localData = JSON.parse(localStorage.ggDetaiData || '{}');
|
|
|
-const PAGE_SIZE = 8
|
|
|
+const PAGE_SIZE = 8;
|
|
|
|
|
|
// 提交
|
|
|
function FlowModal(props) {
|
|
|
- const { visible, version, onClose, onChangeVersion, form, loading, flowDetail, dispatch } = props;
|
|
|
+ const {
|
|
|
+ visible,
|
|
|
+ version,
|
|
|
+ onClose,
|
|
|
+ onChangeVersion,
|
|
|
+ form,
|
|
|
+ loading,
|
|
|
+ flowDetail,
|
|
|
+ dispatch,
|
|
|
+ isOut,
|
|
|
+ onCommit,
|
|
|
+ } = props;
|
|
|
const [data, setData] = useState([]);
|
|
|
const [nodeLoading, setNodeLoading] = useState(false);
|
|
|
- const [pageSize, setPageSize] = useState(PAGE_SIZE)
|
|
|
- const [stepsData, setStepsData] = useState([])
|
|
|
- // const app = useXFlowApp();
|
|
|
- // const appRef = userRef()
|
|
|
+ const [pageSize, setPageSize] = useState(PAGE_SIZE);
|
|
|
+ const [stepsData, setStepsData] = useState([]);
|
|
|
+ const [versionVisible, setVersionVisible] = useState(false);
|
|
|
+ let token = getToken();
|
|
|
|
|
|
const graphData = useMemo(() => {
|
|
|
- let nodes = flowDetail.nodes.map(item => ({
|
|
|
+ if (!flowDetail) return;
|
|
|
+ let nodes = flowDetail.nodes?.map(item => ({
|
|
|
...item,
|
|
|
isCheck: item.Id == version.template_node_id,
|
|
|
}));
|
|
|
@@ -35,16 +48,16 @@ function FlowModal(props) {
|
|
|
}, [flowDetail, version.template_node_id]);
|
|
|
|
|
|
useEffect(() => {
|
|
|
- if(!visible) updateSteps([]);
|
|
|
- }, [visible, version])
|
|
|
+ if (!visible) updateSteps([]);
|
|
|
+ }, [visible, version]);
|
|
|
|
|
|
- useEffect(()=>{
|
|
|
- if(stepsData.length <= 0){
|
|
|
+ useEffect(() => {
|
|
|
+ if (stepsData.length <= 0) {
|
|
|
setPageSize(PAGE_SIZE);
|
|
|
- }else{
|
|
|
- setPageSize(PAGE_SIZE - stepsData.length)
|
|
|
+ } else {
|
|
|
+ setPageSize(PAGE_SIZE - stepsData.length);
|
|
|
}
|
|
|
- },[stepsData])
|
|
|
+ }, [stepsData]);
|
|
|
|
|
|
const handleSelectNode = async args => {
|
|
|
let res;
|
|
|
@@ -53,21 +66,23 @@ function FlowModal(props) {
|
|
|
let node = graphData.nodes.find(item => item.id == id);
|
|
|
setNodeLoading(true);
|
|
|
try {
|
|
|
- res = await queryVserionByNode({ template_node_id: node.Id});
|
|
|
+ res = await queryVserionByNode({ template_node_id: node.Id });
|
|
|
let data = [];
|
|
|
- res.data.excel_version_tree.map(arr => {
|
|
|
+ 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}];
|
|
|
+ data = [...data, { ...arr, flow_id: res.data.flow_id }];
|
|
|
} else {
|
|
|
data = [...data, arr];
|
|
|
}
|
|
|
});
|
|
|
- data.sort((a,b) => a.id - b.id)
|
|
|
- data.forEach((item, id)=>{
|
|
|
+ data.sort((a, b) => a.id - b.id);
|
|
|
+ data.forEach((item, id) => {
|
|
|
//解决key报错问题
|
|
|
- data[id].key=`${id}-${item.name}`;
|
|
|
+ data[id].key = `${id}-${item.name}`;
|
|
|
item.isParent = true;
|
|
|
- })
|
|
|
+ });
|
|
|
+ console.log(data);
|
|
|
setData(data);
|
|
|
} catch (error) {
|
|
|
console.log(error);
|
|
|
@@ -78,39 +93,39 @@ function FlowModal(props) {
|
|
|
|
|
|
const updateSteps = (data, curNodeId) => {
|
|
|
let newData = [];
|
|
|
- let set = new Set()
|
|
|
- data.forEach(item=>set.add(item.template_node_id));
|
|
|
+ let set = new Set();
|
|
|
+ data.forEach(item => set.add(item.template_node_id));
|
|
|
let list = [...set];
|
|
|
- if(set.has(curNodeId)){
|
|
|
+ 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
|
|
|
+ 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)
|
|
|
- let obj = {
|
|
|
+ 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);
|
|
|
+ let obj = {
|
|
|
status,
|
|
|
- current:curid,
|
|
|
+ current: curid,
|
|
|
list: itemDataList[0].FlowInfo.FlowNodes,
|
|
|
name: curNode?.label || itemDataList[0].FlowInfo.name,
|
|
|
- }
|
|
|
+ };
|
|
|
itemDataList.forEach((itemData, idx) => {
|
|
|
- if(idx >= obj.list.length) return;
|
|
|
+ if (idx >= obj.list.length) return;
|
|
|
obj.list[idx].auditor = itemData.AuthorInfo.CName;
|
|
|
- })
|
|
|
- return obj
|
|
|
- })
|
|
|
- setStepsData(dataList)
|
|
|
+ });
|
|
|
+ return obj;
|
|
|
+ });
|
|
|
+ setStepsData(dataList);
|
|
|
};
|
|
|
|
|
|
- const handleChangeClick = (item) => {
|
|
|
- let type = item.flow_id ? 'detail/queryAuditRecord' : 'detail/queryAuditExcel'
|
|
|
+ const handleChangeClick = item => {
|
|
|
+ let type = item.flow_id ? 'detail/queryAuditRecord' : 'detail/queryAuditExcel';
|
|
|
dispatch({
|
|
|
type,
|
|
|
payload: {
|
|
|
@@ -121,7 +136,8 @@ function FlowModal(props) {
|
|
|
updateSteps(res, item.template_node_id);
|
|
|
},
|
|
|
});
|
|
|
- }
|
|
|
+ };
|
|
|
+
|
|
|
const columns = useMemo(() => {
|
|
|
return [
|
|
|
{
|
|
|
@@ -130,7 +146,9 @@ function FlowModal(props) {
|
|
|
render: item => (
|
|
|
<span style={{ color: item.audit_status != 0 ? '#9b9b9b' : '' }}>
|
|
|
{item.id == version.id && <CheckOutlined style={{ marginRight: 10 }} />}
|
|
|
- {item.version_no && !item.isParent ? `${item.version_name}.${item.version_no}` : item.version_name}
|
|
|
+ {item.version_no && !item.isParent
|
|
|
+ ? `${item.version_name}.${item.version_no}`
|
|
|
+ : item.version_name}
|
|
|
</span>
|
|
|
),
|
|
|
},
|
|
|
@@ -138,7 +156,7 @@ function FlowModal(props) {
|
|
|
title: '状态',
|
|
|
width: '30%',
|
|
|
render: item => {
|
|
|
- let style = { color: getColor(item) };
|
|
|
+ let style = { color: getColor(item) };
|
|
|
let txt = '';
|
|
|
switch (item.audit_status) {
|
|
|
case 0:
|
|
|
@@ -157,10 +175,12 @@ function FlowModal(props) {
|
|
|
txt = '已提交';
|
|
|
break;
|
|
|
}
|
|
|
- if(item.status == 1) txt = '已失效';
|
|
|
- return item.audit_status != 0 ?
|
|
|
- <Button onClick={()=>handleChangeClick(item)}>{txt}</Button> :
|
|
|
- <span style={style} >{txt}</span>
|
|
|
+ if (item.status == 1) txt = '已失效';
|
|
|
+ return item.audit_status != 0 ? (
|
|
|
+ <Button onClick={() => handleChangeClick(item)}>{txt}</Button>
|
|
|
+ ) : (
|
|
|
+ <span style={style}>{txt}</span>
|
|
|
+ );
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
@@ -183,41 +203,71 @@ function FlowModal(props) {
|
|
|
|
|
|
const onChange = () => {
|
|
|
updateSteps([]);
|
|
|
- }
|
|
|
+ };
|
|
|
|
|
|
return (
|
|
|
- <Modal
|
|
|
- confirmLoading={loading}
|
|
|
- destroyOnClose
|
|
|
- title="流程图"
|
|
|
- visible={visible}
|
|
|
- onCancel={onClose}
|
|
|
- footer={false}
|
|
|
- width="98%"
|
|
|
- >
|
|
|
- <Row gutter={8}>
|
|
|
- <Col span={16}>
|
|
|
- <Flow meta={{ type: 'view' }} flowDetail={graphData} onSelectNode={handleSelectNode} />
|
|
|
- </Col>
|
|
|
- <Col span={8} >
|
|
|
- <div style={{width:'100%'}}>
|
|
|
- <Table style={{maxHeight:'90%'}} columns={columns} dataSource={data} loading={nodeLoading} bordered={false} pagination={{pageSize:8, onChange}} scroll={{ y: 65*pageSize }}/>
|
|
|
- </div>
|
|
|
- {stepsData.map((item ,idx)=> <div key={`${item.name}_${idx}`} style={{marginBottom:'20px'}}>
|
|
|
- <div style={{marginBottom:'4px'}}>{item.name}</div>
|
|
|
- <Steps size='small' current={item.current} status={item.status} >
|
|
|
- {item.list.map(node =>
|
|
|
- <Step
|
|
|
- key={`${node.id}_${node.node}`}
|
|
|
- title={node.node}
|
|
|
- description={`审批人：${node.auditor || '-'}`}
|
|
|
- />
|
|
|
- )}
|
|
|
- </Steps>
|
|
|
- </div>)}
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- </Modal>
|
|
|
+ <>
|
|
|
+ <Modal
|
|
|
+ confirmLoading={loading}
|
|
|
+ destroyOnClose
|
|
|
+ title="流程图"
|
|
|
+ visible={visible}
|
|
|
+ onCancel={onClose}
|
|
|
+ footer={false}
|
|
|
+ width="98%"
|
|
|
+ >
|
|
|
+ <Row gutter={8}>
|
|
|
+ <Col span={16}>
|
|
|
+ <Flow meta={{ type: 'view' }} flowDetail={graphData} onSelectNode={handleSelectNode} />
|
|
|
+ </Col>
|
|
|
+ <Col span={8}>
|
|
|
+ {isOut && data.length == 1 && !data[0].children && (
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ style={{ float: 'right', marginBottom: '10px' }}
|
|
|
+ onClick={() => setVersionVisible(true)}
|
|
|
+ >
|
|
|
+ 新建清单
|
|
|
+ </Button>
|
|
|
+ )}
|
|
|
+ <div style={{ width: '100%' }}>
|
|
|
+ <Table
|
|
|
+ style={{ maxHeight: '90%' }}
|
|
|
+ columns={columns}
|
|
|
+ dataSource={data}
|
|
|
+ loading={nodeLoading}
|
|
|
+ bordered={false}
|
|
|
+ pagination={{ pageSize: 8, onChange }}
|
|
|
+ scroll={{ y: 65 * pageSize }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ {stepsData.map((item, idx) => (
|
|
|
+ <div key={`${item.name}_${idx}`} style={{ marginBottom: '20px' }}>
|
|
|
+ <div style={{ marginBottom: '4px' }}>{item.name}</div>
|
|
|
+ <Steps size="small" current={item.current} status={item.status}>
|
|
|
+ {item.list.map(node => (
|
|
|
+ <Step
|
|
|
+ key={`${node.id}_${node.node}`}
|
|
|
+ title={node.node}
|
|
|
+ description={`审批人：${node.auditor || '-'}`}
|
|
|
+ />
|
|
|
+ ))}
|
|
|
+ </Steps>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </Modal>
|
|
|
+ <VersionModal
|
|
|
+ // loading={getLoading()}
|
|
|
+ visible={versionVisible}
|
|
|
+ onClose={() => setVersionVisible(false)}
|
|
|
+ onOk={values => {
|
|
|
+ onCommit?.(values);
|
|
|
+ setVersionVisible(false);
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
@@ -243,6 +293,7 @@ const getColor = item => {
|
|
|
return color;
|
|
|
};
|
|
|
|
|
|
-export default connect(({ xflow, detail }) => ({
|
|
|
- flowDetail: xflow.flowDetail,
|
|
|
-}))(FlowModal);
|
|
|
+// export default connect(({ xflow, detail }) => ({
|
|
|
+// flowDetail: xflow.flowDetail,
|
|
|
+// }))(FlowModal);
|
|
|
+export default FlowModal;
|
