|
@@ -11,15 +11,15 @@ const { Step } = Steps;
|
|
|
|
|
|
const { TextArea } = Input;
|
|
|
const localData = JSON.parse(localStorage.ggDetaiData || '{}');
|
|
|
+const PAGE_SIZE = 8
|
|
|
|
|
|
// 提交
|
|
|
function FlowModal(props) {
|
|
|
const { visible, version, onClose, onChangeVersion, form, loading, flowDetail, dispatch } = props;
|
|
|
const [data, setData] = useState([]);
|
|
|
const [nodeLoading, setNodeLoading] = useState(false);
|
|
|
- const [pageSize, setPageSize] = useState(9)
|
|
|
+ const [pageSize, setPageSize] = useState(PAGE_SIZE)
|
|
|
const [stepsData, setStepsData] = useState([])
|
|
|
- const [auditvisible, setAuditVisible] = useState(false);
|
|
|
// const app = useXFlowApp();
|
|
|
// const appRef = userRef()
|
|
|
|
|
@@ -35,9 +35,17 @@ function FlowModal(props) {
|
|
|
}, [flowDetail, version.template_node_id]);
|
|
|
|
|
|
useEffect(() => {
|
|
|
- if(!visible) setAuditVisible(false);
|
|
|
+ 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];
|
|
@@ -45,72 +53,90 @@ 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 = [];
|
|
|
- Object.values(res.data.excel_version).map(arr => {
|
|
|
+ res.data.excel_version_tree.map(arr => {
|
|
|
if (res.data.flow_id) {
|
|
|
- data = [...data, {...arr[0], flow_id:res.data.flow_id}];
|
|
|
- console.log(data)
|
|
|
+ data = [...data, {...arr, flow_id:res.data.flow_id}];
|
|
|
} else {
|
|
|
- data = [...data, ...arr];
|
|
|
+ data = [...data, arr];
|
|
|
}
|
|
|
});
|
|
|
- //解决key报错问题
|
|
|
- data.forEach((item, id)=>data[id].key=`${id}-${item.name}`)
|
|
|
- console.log(data.length)
|
|
|
+ data.sort((a,b) => a.id - b.id)
|
|
|
+ data.forEach((item, id)=>{
|
|
|
+ //解决key报错问题
|
|
|
+ data[id].key=`${id}-${item.name}`;
|
|
|
+ item.isParent = true;
|
|
|
+ })
|
|
|
setData(data);
|
|
|
} catch (error) {
|
|
|
console.log(error);
|
|
|
}
|
|
|
setNodeLoading(false);
|
|
|
- setAuditVisible(false);
|
|
|
+ updateSteps([]);
|
|
|
};
|
|
|
|
|
|
- const updateSteps = (data) => {
|
|
|
- let newData = []
|
|
|
- data?.forEach(item => {
|
|
|
- let list = {
|
|
|
- current: item.audit_status == 0 ? item.audit_status : item.audit_status-1,
|
|
|
- list:item.FlowInfo.FlowNodes,
|
|
|
- name:item.FlowInfo.name,
|
|
|
+ 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)
|
|
|
+ let obj = {
|
|
|
+ status,
|
|
|
+ current:curid,
|
|
|
+ list: itemDataList[0].FlowInfo.FlowNodes,
|
|
|
+ name: curNode?.label || itemDataList[0].FlowInfo.name,
|
|
|
}
|
|
|
- newData.push(list);
|
|
|
+ itemDataList.forEach((itemData, idx) => {
|
|
|
+ if(idx >= obj.list.length) return;
|
|
|
+ obj.list[idx].auditor = itemData.AuthorInfo.CName;
|
|
|
+ })
|
|
|
+ return obj
|
|
|
})
|
|
|
- setStepsData(newData)
|
|
|
- setPageSize(pageSize - data.length)
|
|
|
+ setStepsData(dataList)
|
|
|
};
|
|
|
|
|
|
const handleChangeClick = (item) => {
|
|
|
- message.success('哈哈哈哈')
|
|
|
+ let type = item.flow_id ? 'detail/queryAuditRecord' : 'detail/queryAuditExcel'
|
|
|
dispatch({
|
|
|
- type: 'detail/queryAuditExcel',
|
|
|
+ type,
|
|
|
payload: {
|
|
|
excel_id: item.id,
|
|
|
- // project_id: item.project_id,
|
|
|
- // template_id:item.template_id,
|
|
|
- // template_node_id:item.template_node_id,
|
|
|
+ pageSize: 100,
|
|
|
},
|
|
|
callback: res => {
|
|
|
- updateSteps(res);
|
|
|
+ updateSteps(res, item.template_node_id);
|
|
|
},
|
|
|
});
|
|
|
- setAuditVisible(true)
|
|
|
}
|
|
|
const columns = useMemo(() => {
|
|
|
return [
|
|
|
{
|
|
|
title: '名称',
|
|
|
- width: '33%',
|
|
|
+ // width: '33%',
|
|
|
render: item => (
|
|
|
- <div style={{ color: item.audit_status != 0 ? '#9b9b9b' : '' }}>
|
|
|
+ <span style={{ color: item.audit_status != 0 ? '#9b9b9b' : '' }}>
|
|
|
{item.id == version.id && <CheckOutlined style={{ marginRight: 10 }} />}
|
|
|
- {item.version_name}
|
|
|
- </div>
|
|
|
+ {item.version_no && !item.isParent ? `${item.version_name}.${item.version_no}` : item.version_name}
|
|
|
+ </span>
|
|
|
),
|
|
|
},
|
|
|
{
|
|
|
title: '状态',
|
|
|
- width: '33%',
|
|
|
+ width: '30%',
|
|
|
render: item => {
|
|
|
let style = { color: getColor(item) };
|
|
|
let txt = '';
|
|
@@ -122,24 +148,24 @@ function FlowModal(props) {
|
|
|
txt = '待审批';
|
|
|
break;
|
|
|
case 2:
|
|
|
- txt = '拒绝';
|
|
|
+ txt = '已拒绝';
|
|
|
break;
|
|
|
case 3:
|
|
|
- txt = '通过';
|
|
|
+ txt = '已通过';
|
|
|
break;
|
|
|
case 4:
|
|
|
txt = '已提交';
|
|
|
break;
|
|
|
}
|
|
|
- return <Button onClick={()=>handleChangeClick(item)}>{txt}</Button>
|
|
|
- // (item.audit_status == 1 || item.audit_status == 4) ?
|
|
|
- // <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>
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
title: '操作',
|
|
|
+ width: '20%',
|
|
|
render: item =>
|
|
|
item.id != version.id && (
|
|
|
<a
|
|
@@ -148,13 +174,17 @@ function FlowModal(props) {
|
|
|
onClose();
|
|
|
}}
|
|
|
>
|
|
|
- 切换
|
|
|
+ 加载
|
|
|
</a>
|
|
|
),
|
|
|
},
|
|
|
];
|
|
|
}, [version]);
|
|
|
|
|
|
+ const onChange = () => {
|
|
|
+ updateSteps([]);
|
|
|
+ }
|
|
|
+
|
|
|
return (
|
|
|
<Modal
|
|
|
confirmLoading={loading}
|
|
@@ -166,26 +196,25 @@ function FlowModal(props) {
|
|
|
width="98%"
|
|
|
>
|
|
|
<Row gutter={8}>
|
|
|
- <Col span={18}>
|
|
|
+ <Col span={16}>
|
|
|
<Flow meta={{ type: 'view' }} flowDetail={graphData} onSelectNode={handleSelectNode} />
|
|
|
</Col>
|
|
|
- <Col span={6} >
|
|
|
- <div style={{width:'100%'}}>
|
|
|
- <Table style={{maxHeight:'90%'}} columns={columns} dataSource={data} loading={nodeLoading} bordered={false} pagination={{ pageSize}}/>
|
|
|
+ <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>
|
|
|
- <Space direction="vertical" size='8' style={{ display: auditvisible ? 'flex' : 'none' }}>
|
|
|
- {stepsData.map((item ,idx)=> <div key={`${item.name}_${idx}`} style={{marginBottom:'8px'}}>
|
|
|
- <div style={{marginBottom:'4px'}}>{item.name}</div>
|
|
|
- <Steps size='small' current={item.current} >
|
|
|
- {item.list.map(node =>
|
|
|
- <Step
|
|
|
- key={`${node.id}_${node.node}`}
|
|
|
- title={node.node}
|
|
|
- />
|
|
|
- )}
|
|
|
- </Steps>
|
|
|
- </div>)}
|
|
|
- </Space>
|
|
|
+ {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>
|