|
@@ -1,5 +1,5 @@
|
|
|
import React, { useEffect, useState, useRef, useMemo } from 'react';
|
|
|
-import { Modal, Input, Select, List, Row, Col, Table, message } from 'antd';
|
|
|
+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';
|
|
@@ -7,15 +7,19 @@ import { MODELS, useXFlowApp, useModelAsync } from '@antv/xflow';
|
|
|
import { CheckOutlined } from '@ant-design/icons';
|
|
|
import { queryVserionByNode } from '@/services/boom';
|
|
|
import { async } from '@antv/x6/lib/registry/marker/async';
|
|
|
+const { Step } = Steps;
|
|
|
|
|
|
const { TextArea } = Input;
|
|
|
const localData = JSON.parse(localStorage.ggDetaiData || '{}');
|
|
|
|
|
|
// 提交
|
|
|
function FlowModal(props) {
|
|
|
- const { visible, version, onClose, onChangeVersion, form, loading, flowDetail } = 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 [stepsData, setStepsData] = useState([])
|
|
|
+ const [auditvisible, setAuditVisible] = useState(false);
|
|
|
// const app = useXFlowApp();
|
|
|
// const appRef = userRef()
|
|
|
|
|
@@ -30,6 +34,10 @@ function FlowModal(props) {
|
|
|
};
|
|
|
}, [flowDetail, version.template_node_id]);
|
|
|
|
|
|
+ useEffect(() => {
|
|
|
+ if(!visible) setAuditVisible(false);
|
|
|
+ }, [visible, version])
|
|
|
+
|
|
|
const handleSelectNode = async args => {
|
|
|
let res;
|
|
|
const id = args.nodeId || args.nodeIds[0];
|
|
@@ -41,22 +49,52 @@ function FlowModal(props) {
|
|
|
let data = [];
|
|
|
Object.values(res.data.excel_version).map(arr => {
|
|
|
if (res.data.flow_id) {
|
|
|
- data = [...data, arr[0]];
|
|
|
+ data = [...data, {...arr[0], flow_id:res.data.flow_id}];
|
|
|
+ console.log(data)
|
|
|
} else {
|
|
|
data = [...data, ...arr];
|
|
|
}
|
|
|
});
|
|
|
//解决key报错问题
|
|
|
data.forEach((item, id)=>data[id].key=`${id}-${item.name}`)
|
|
|
+ console.log(data.length)
|
|
|
setData(data);
|
|
|
} catch (error) {
|
|
|
console.log(error);
|
|
|
}
|
|
|
setNodeLoading(false);
|
|
|
+ setAuditVisible(false);
|
|
|
+ };
|
|
|
+
|
|
|
+ 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,
|
|
|
+ }
|
|
|
+ newData.push(list);
|
|
|
+ })
|
|
|
+ setStepsData(newData)
|
|
|
+ setPageSize(pageSize - data.length)
|
|
|
};
|
|
|
- const handleChangeClick = (audit_status) => {
|
|
|
- if(audit_status != 1) return
|
|
|
+
|
|
|
+ const handleChangeClick = (item) => {
|
|
|
message.success('哈哈哈哈')
|
|
|
+ dispatch({
|
|
|
+ type: 'detail/queryAuditExcel',
|
|
|
+ payload: {
|
|
|
+ excel_id: item.id,
|
|
|
+ // project_id: item.project_id,
|
|
|
+ // template_id:item.template_id,
|
|
|
+ // template_node_id:item.template_node_id,
|
|
|
+ },
|
|
|
+ callback: res => {
|
|
|
+ updateSteps(res);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ setAuditVisible(true)
|
|
|
}
|
|
|
const columns = useMemo(() => {
|
|
|
return [
|
|
@@ -74,7 +112,7 @@ function FlowModal(props) {
|
|
|
title: '状态',
|
|
|
width: '33%',
|
|
|
render: item => {
|
|
|
- let style = { color: getColor(item) };
|
|
|
+ let style = { color: getColor(item) };
|
|
|
let txt = '';
|
|
|
switch (item.audit_status) {
|
|
|
case 0:
|
|
@@ -93,7 +131,11 @@ function FlowModal(props) {
|
|
|
txt = '已提交';
|
|
|
break;
|
|
|
}
|
|
|
- return <span style={style} onClick={()=>handleChangeClick(item.audit_status)}>{txt}</span>;
|
|
|
+ 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>
|
|
|
+
|
|
|
},
|
|
|
},
|
|
|
{
|
|
@@ -127,8 +169,23 @@ function FlowModal(props) {
|
|
|
<Col span={18}>
|
|
|
<Flow meta={{ type: 'view' }} flowDetail={graphData} onSelectNode={handleSelectNode} />
|
|
|
</Col>
|
|
|
- <Col span={6}>
|
|
|
- <Table columns={columns} dataSource={data} loading={nodeLoading} bordered={false} />
|
|
|
+ <Col span={6} >
|
|
|
+ <div style={{width:'100%'}}>
|
|
|
+ <Table style={{maxHeight:'90%'}} columns={columns} dataSource={data} loading={nodeLoading} bordered={false} pagination={{ 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>
|
|
|
</Col>
|
|
|
</Row>
|
|
|
</Modal>
|