修改查看直接弹出flowDetail流程

src/components/Flow/node/rect/mapServe.tsx

@@ -166,7 +166,7 @@ const Component = (props: any) => {
         {nodeConfig.is_start_node == 1 && (
           <>
             <InputFiled
-              label="版本名称"
+              label="模板名称"
               value={nodeConfig.version_name}
               onChange={value => {
                 onNodeConfigChange('version_name', value);

src/pages/PurchaseAdmin/PurchaseList/Detail/ExportModal.js

@@ -34,34 +34,34 @@ function CompareModal(props) {
   const [checkValue, setCheckValue] = useState([]);
   const [tabList, setTabList] = useState([]);
   const [active, setActive] = useState();
-  
-  useEffect(() => {
-      const list = []
-      if (sheet && sheet.length > 0) {
-        const sheetData = JSON.parse(JSON.stringify(sheet));
-        sheetData.forEach(item => {
-            let obj = {}
-            obj.name = item.name;
-            if(item.data && item.data[0]){
-                obj.list = item.data[0]?.filter( cur => cur);
-            }
-            obj.id = item.index;
-            list.push(obj)
-          });
 
-          setCheckValue([]);
-          setTabList(list);
-          setActive(list[0]?.id);
+  useEffect(() => {
+    const list = [];
+    if (sheet && sheet.length > 0) {
+      const sheetData = JSON.parse(JSON.stringify(sheet));
+      sheetData.forEach(item => {
+        let obj = {};
+        obj.name = item.name;
+        if (item.data && item.data[0]) {
+          obj.list = item.data[0]?.filter(cur => cur);
         }
-      },[sheet])
+        obj.id = item.index;
+        list.push(obj);
+      });
+
+      setCheckValue([]);
+      setTabList(list);
+      setActive(list[0]?.id);
+    }
+  }, [sheet]);
 
   const onChange = check => {
-      setCheckValue(check);
-      console.log(check)
+    setCheckValue(check);
+    console.log(check);
   };
 
   const handleOk = () => {
-    onOk(checkValue)
+    onOk(checkValue);
   };
 
   return (
@@ -77,13 +77,11 @@ function CompareModal(props) {
           {tabList.map(tab => (
             <TabPane tab={tab.name} key={tab.id}>
               <Row>
-                {tab.list.map(item => 
-                (
+                {tab.list.map(item => (
                   <Col span={8} key={item.m}>
                     <Checkbox value={item.v}>{item.v}</Checkbox>
                   </Col>
-                )
-                )}
+                ))}
               </Row>
             </TabPane>
           ))}
@@ -92,4 +90,4 @@ function CompareModal(props) {
     </Modal>
   );
 }
-export default CompareModal
+export default CompareModal;

src/pages/PurchaseAdmin/PurchaseList/Detail/FilesModal.js

@@ -9,70 +9,87 @@ import moment from 'moment/moment';
 import PreviewFile from '@/components/PreviewFile';
 // 历史清单
 function FilesModal(props) {
-    const { visible, onClose, onUpload, data, uploadProps, DeleteFile, downloadFile, loading } = props;
-    const handleSelect = item => {
-        // onSelect(item);
-        // onClose();
-    };
-    const columns = [
-        {
-            title: '预览',
-            dataIndex: 'name',
-            render: (text, item) => {
-                return <PreviewFile name={item.name} src={item.url} />;
-            },
-        },
-        {
-            title: '上传时间',
-            dataIndex: 'c_time',
-            render: text => {
-                return text ? moment(text).format('YYYY年MM月DD日  HH:mm:ss') : null;
-            },
-        },
-        {
-            title: '上传人',
-            dataIndex: 'CreatorUser',
-            render: record => (record.CName || '')
-        },
-        {
-            title: '操作',
-            render: record => (
-                <>
-                    <a onClick={() => { downloadFile(record) }}>
-                        查看
-                    </a>
-                    <a onClick={() => {
-                        confirm({
-                            title: '提醒',
-                            content: '确认删除该文件，删除后无法复原',
-                            okText: '确认',
-                            cancelText: '取消',
-                            onOk() {
-                                DeleteFile(record.id);
-                            },
-                        });
+  const {
+    visible,
+    onClose,
+    onUpload,
+    data,
+    uploadProps,
+    DeleteFile,
+    downloadFile,
+    loading,
+  } = props;
+  const handleSelect = item => {
+    // onSelect(item);
+    // onClose();
+  };
+  const columns = [
+    {
+      title: '预览',
+      dataIndex: 'name',
+      render: (text, item) => {
+        return <PreviewFile name={item.name} src={item.url} />;
+      },
+    },
+    {
+      title: '上传时间',
+      dataIndex: 'c_time',
+      render: text => {
+        return text ? moment(text).format('YYYY年MM月DD日  HH:mm:ss') : null;
+      },
+    },
+    {
+      title: '上传人',
+      dataIndex: 'CreatorUser',
+      render: record => record.CName || '',
+    },
+    {
+      title: '操作',
+      render: record => (
+        <>
+          <a
+            onClick={() => {
+              downloadFile(record);
+            }}
+          >
+            查看
+          </a>
+          <a
+            onClick={() => {
+              confirm({
+                title: '提醒',
+                content: '确认删除该文件，删除后无法复原',
+                okText: '确认',
+                cancelText: '取消',
+                onOk() {
+                  DeleteFile(record.id);
+                },
+              });
+            }}
+            style={{ marginLeft: 10 }}
+          >
+            删除
+          </a>
+        </>
+      ),
+    },
+  ];
 
-                    }} style={{ marginLeft: 10 }}>删除</a>
-                </>
-            ),
-        },
-    ];
-
-    const onClick = item => {
-        // onClose();
-        // onSelect(item);
-    };
-    return (
-        <Modal title="附件列表" width="60%" onCancel={onClose} visible={visible} footer={false}>
-            <div>
-                <Upload {...uploadProps}>
-                    <Button type="primary" style={{ marginBottom: 20 }} loading={loading}>
-                        <UploadOutlined /> 上传文件
-                    </Button>
-                </Upload>
-            </div>
-            <Table rowKey="id" columns={columns} dataSource={data} loading={loading} />
-        </Modal>
-    );
+  const onClick = item => {
+    // onClose();
+    // onSelect(item);
+  };
+  return (
+    <Modal title="附件列表" width="60%" onCancel={onClose} visible={visible} footer={false}>
+      <div>
+        <Upload {...uploadProps}>
+          <Button type="primary" style={{ marginBottom: 20 }} loading={loading}>
+            <UploadOutlined /> 上传文件
+          </Button>
+        </Upload>
+      </div>
+      <Table rowKey="id" columns={columns} dataSource={data} loading={loading} />
+    </Modal>
+  );
 }
-export default FilesModal
+export default FilesModal;

src/pages/PurchaseAdmin/PurchaseList/Detail/FlowModal.js

@@ -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;

src/pages/PurchaseAdmin/PurchaseList/Detail/Index.js

@@ -227,9 +227,7 @@ function Detail(props) {
         item => item.audit_status != 4 && item.template_node_id == currentNode.Id
       );
       if (serviceVersion) {
-        message.error(
-          `新建清单失败！业务节点【${currentNode.label}】只能有一个清单！`
-        );
+        message.error(`新建清单失败！业务节点【${currentNode.label}】只能有一个清单！`);
         return;
       }
     }
@@ -331,28 +329,31 @@ function Detail(props) {
     let isSingle = false;
     let serviceNode;
     const flowNode = flow.currentNode;
-    const getLastTemplateNodeId = (data) => {
+    const getLastTemplateNodeId = data => {
       let result;
-      const getFun = (item) => {
-        if(item.flow_path?.length > 0){
-          getFun(item.flow_path[0])
-        }else{
+      const getFun = item => {
+        if (item.flow_path?.length > 0) {
+          getFun(item.flow_path[0]);
+        } else {
           result = item.template_node_id;
         }
-      }
-      if(!data) return version.template_node_id
-      getFun(data[0])
+      };
+      if (!data) return version.template_node_id;
+      getFun(data[0]);
       return result;
-    }
+    };
     let lastTemplateNodeId = version.template_node_id;
-    if(version.flow_path){
+    if (version.flow_path) {
       //如果多节点审批  获取当前是否审批流程的最后一个审批节点
-      let flowPathList = JSON.parse(version.flow_path)
-      lastTemplateNodeId = getLastTemplateNodeId(flowPathList)
+      let flowPathList = JSON.parse(version.flow_path);
+      lastTemplateNodeId = getLastTemplateNodeId(flowPathList);
     }
-    
+
     // 判断是否为最后一个审批节点
-    if (lastTemplateNodeId == version.template_node_id && flow.current == flow.list.FlowNodes.length - 1) {
+    if (
+      lastTemplateNodeId == version.template_node_id &&
+      flow.current == flow.list.FlowNodes.length - 1
+    ) {
       serviceNode = flowDetail.nodes.find?.(item => item.Id == version.next_template_node_id);
       if (!serviceNode.muti_version) {
         //audit_status=4 表示为清单推进后留存的副本.不计入多清单计算
@@ -386,7 +387,7 @@ function Detail(props) {
                 id: templateId,
               },
             });
-            
+
             // 更新审批流
             dispatch({
               type: 'detail/queryAuditList',
@@ -554,21 +555,23 @@ function Detail(props) {
       <Menu.Item key="attachment">附件</Menu.Item>,
     ];
     // version.audit_status：4 为副本。不可操作
-    if (version.audit_status != 4 ) {
+    if (version.audit_status != 4) {
       //判断权限配置，如果配置了，就指定权限的人可提交，没配置就全部人都可提交
       const getIsSubmit = () => {
         const nodeId = version.template_node_id;
         if (!flowDetail?.nodes || !nodeId) return;
         const node = flowDetail.nodes.find(item => item.Id == nodeId);
-        if(node.name=='custom-circle') return ;
-        if( node?.role_list ){
-          return node.role_list.split(",").some(id=> currentUser.roleList?.find(role=>role.ID == id))
-        } 
+        if (node.name == 'custom-circle') return;
+        if (node?.role_list) {
+          return node.role_list
+            .split(',')
+            .some(id => currentUser.roleList?.find(role => role.ID == id));
+        }
         return true;
-      }
-      console.log("是否有权限提交流转   ", getIsSubmit())
-      if(getIsSubmit() && version.audit_status != 3) menuList.push(<Menu.Item key="commitAudit">提交流转</Menu.Item>);
-      
+      };
+      console.log('是否有权限提交流转   ', getIsSubmit());
+      if (getIsSubmit() && version.audit_status != 3)
+        menuList.push(<Menu.Item key="commitAudit">提交流转</Menu.Item>);
 
       if (!isAuditor && canEdit() && !version.flow_id) {
         // menuList.push(<Menu.Item key="edit">编辑</Menu.Item>);
@@ -595,10 +598,10 @@ function Detail(props) {
 
   const renderAlert = () => {
     const audit_comment = history.list[0]?.audit_comment;
-    let item = ''; 
+    let item = '';
     switch (active_audit) {
       case 0:
-        if (!flow.list || flow.list.FlowNodes?.length == 0) return
+        if (!flow.list || flow.list.FlowNodes?.length == 0) return;
         item = <Alert message="审批拒绝" type="error" />;
         break;
       case 1:
@@ -618,7 +621,7 @@ function Detail(props) {
         item = <Alert message="审批通过" type="success" />;
         break;
     }
-    
+
     return <div style={{ marginTop: 20 }}>{item}</div>;
   };
 
@@ -748,11 +751,11 @@ function Detail(props) {
     setVersion(version);
     //请求历史版本
     dispatch({
-      type:'detail/queryVersionsTree',
+      type: 'detail/queryVersionsTree',
       payload: {
         excel_id: version.id || localStorage.excelId,
       },
-    })
+    });
 
     // 判断是否审批节点
     if (version.flow_id) {
@@ -801,11 +804,12 @@ function Detail(props) {
     if (!flowDetail?.nodes || !nodeId) return;
     const node = flowDetail.nodes.find(item => item.Id == nodeId);
     // return `当前清单：${version.version_name || '-'};    当前节点：${node?.label || '-'}`;
-    return(
+    return (
       <span className={styles.curTitle}>
-        当前清单: <span>{version.version_name || '-'}</span>当前节点: <span>{node?.label || '-'}</span>
+        当前清单: <span>{version.version_name || '-'}</span>当前节点:{' '}
+        <span>{node?.label || '-'}</span>
       </span>
-    )
+    );
   };
 
   const handleSubmitCell = (value, callback) => {
@@ -836,7 +840,6 @@ function Detail(props) {
     dispatch({
       type: 'user/fetch',
     });
-    
   }, []);
 
   useEffect(() => {
@@ -878,15 +881,23 @@ function Detail(props) {
               新建清单
             </Button>
           )}
-         {renderNode()}
+          {renderNode()}
         </div>
-        <div className={styles.btns}> 
-          <Button type="primary" style={{ marginRight: 20 }} onClick={() => setVersionTreeVisible(true)}>
+        <div className={styles.btns}>
+          <Button
+            type="primary"
+            style={{ marginRight: 20 }}
+            onClick={() => setVersionTreeVisible(true)}
+          >
             历史版本
           </Button>
           <Avatar.Group style={{ marginRight: 20 }}>
             {user.map((item, id) => (
-              <Avatar key={`${id}-${item.name}`} style={{ backgroundColor: '#008dff' }} size="large">
+              <Avatar
+                key={`${id}-${item.name}`}
+                style={{ backgroundColor: '#008dff' }}
+                size="large"
+              >
                 {item.Name}
               </Avatar>
             ))}
@@ -928,7 +939,7 @@ function Detail(props) {
         </div>
       )}
 
-      <HistoryDrawer 
+      <HistoryDrawer
         versionTree={versionTree}
         version={version}
         visible={versionTreeVisible}
@@ -967,6 +978,7 @@ function Detail(props) {
         onOk={downloadExcel}
       />
       <FlowModal
+        flowDetail={flowDetail}
         visible={flowVisible}
         onClose={() => setFlowVisible(false)}
         version={version}

src/pages/PurchaseAdmin/PurchaseList/Detail/Index.less

@@ -54,3 +54,6 @@
   margin-right: 10px;
  }
 }
+.topF{
+  margin: 20px;
+}

src/pages/PurchaseAdmin/PurchaseList/Detail/models/detail.js

@@ -71,8 +71,8 @@ export default {
     fileList: [],
     roleList: [],
     authority: [],
-    versionTree:[],
-    auditExcel:[],
+    versionTree: [],
+    auditExcel: [],
   },
 
   effects: {
@@ -167,8 +167,8 @@ export default {
             // template_id: payload.template_id,
             // template_node_id: payload.template_node_id,
           },
-          callback: (versionList) => {
-            let newVersion = versionList.find(item => item.id == response.data.id)
+          callback: versionList => {
+            let newVersion = versionList.find(item => item.id == response.data.id);
             callback && callback(newVersion);
           },
         });
@@ -501,13 +501,13 @@ export default {
         });
       }
     },
-    *queryAuditExcel({ payload,  callback  }, { call, put }) {
+    *queryAuditExcel({ payload, callback }, { call, put }) {
       const response = yield call(queryAuditExcel, payload);
       if (response) {
         callback && callback(response.data?.all);
       }
     },
-    *queryAuditRecord({ payload,  callback  }, { call, put }) {
+    *queryAuditRecord({ payload, callback }, { call, put }) {
       const response = yield call(queryAuditRecord, payload);
       if (response) {
         callback && callback(response.data?.all);

src/pages/PurchaseAdmin/PurchaseList/List/NewList.js

@@ -2,9 +2,18 @@ import React, { useState, useEffect } from 'react';
 import { Table, Divider } from 'antd';
 import { connect } from 'dva';
 import router from 'umi/router';
+import FlowModal from '../Detail/FlowModal';
+import { queryBoomFlowDetail, queryRecordSheet } from '@/services/boom';
+import { async } from '@antv/x6/es/registry/marker/async';
+import { getToken } from '@/utils/utils';
 
 function List(props) {
   const { excel, loading, project, dispatch } = props;
+  const [flowVisible, setFlowVisible] = useState(false);
+  const [version, setVersion] = useState({});
+  const [versionVisible, setVersionVisible] = useState(false);
+  const [flowDetail, setFlowDetail] = useState();
+  let token = getToken();
 
   const columns = [
     {
@@ -26,9 +35,14 @@ function List(props) {
         if (record.is_parent) return null;
         return (
           <a
-            onClick={() => {
+            onClick={async () => {
               localStorage.excelId = record.id;
-              router.push(`/home/detail/${record.project_id}/${record.template_id}`);
+
+              const data = await queryBoomFlowDetail({ id: record.template_id });
+              setFlowDetail(data);
+              setVersion(record);
+              setFlowVisible(true);
+              // router.push(`/home/detail/${record.project_id}/${record.template_id}`);
             }}
           >
             查看
@@ -60,6 +74,58 @@ function List(props) {
     });
   }, []);
 
+  const changeVersion = item => {
+    if (typeof item == 'object') {
+      localStorage.excelId = item.id;
+    }
+    router.push(`/home/detail/${item.project_id}/${item.template_id}`);
+  };
+
+  const getLoading = () => {
+    let effects = loadingVersion.effects;
+    return !loadingVersion.effects['detail/queryComment'] && loadingVersion.models.detail;
+  };
+
+  const onCommit = async (values, id) => {
+    let currentNode = flowDetail.nodes.find?.(item => item.Id == version.template_node_id);
+    let sheets = await queryRecordSheet({ gridKey: version.id, 'JWT-TOKEN': token });
+    if (!currentNode.muti_version) {
+      // audit_status=4 表示为清单推进后留存的副本.不计入多清单计算
+      let serviceVersion = versionList.find(
+        item => item.audit_status != 4 && item.template_node_id == currentNode.Id
+      );
+      if (serviceVersion) {
+        message.error(`新建清单失败！业务节点【${currentNode.label}】只能有一个清单！`);
+        return;
+      }
+    }
+    let params = {
+      ...values,
+      id: id,
+      project_id: version.project_id,
+      name: version.name,
+      guid: version.guid,
+      template_id: version.template_id,
+      template_node_id: version.template_node_id,
+      flow_id: version.flow_id,
+      node_id: version.node_id,
+      new_version: '0',
+      audit_status: 0,
+      data: sheets,
+      base_id: version.id,
+    };
+    dispatch({
+      type: 'newList/commitSheet',
+      payload: params,
+      callback: async newVersion => {
+        // 更新flow流程图
+        const data = await queryBoomFlowDetail({ id: newVersion.template_id });
+        console.log(data);
+        setFlowDetail(data);
+      },
+    });
+  };
+
   return (
     <div>
       <Table
@@ -70,6 +136,21 @@ function List(props) {
         columns={columns}
         onChange={queryList}
       />
+      <FlowModal
+        isOut={true}
+        flowDetail={flowDetail}
+        visible={flowVisible}
+        onClose={() => setFlowVisible(false)}
+        version={version}
+        onCommit={onCommit}
+        onChangeVersion={version => changeVersion(version)}
+      />
+      {/* <VersionModal
+        loading={getLoading()}
+        visible={versionVisible}
+        onClose={() => setVersionVisible(false)}
+        onOk={values => onCommit(values)}
+      /> */}
     </div>
   );
 }
@@ -78,4 +159,5 @@ export default connect(({ newList, loading }) => ({
   excel: newList.excel,
   project: newList.project,
   loading: loading.models.newList,
+  loadingVersion: loading,
 }))(List);

src/pages/PurchaseAdmin/PurchaseList/List/models/newList.js

@@ -1,8 +1,7 @@
 import { queryProjectRecord } from '@/services/boom';
-import {
-  queryProject,
-} from '@/services/PurchaseList';
+import { queryProject } from '@/services/PurchaseList';
 import { message } from 'antd';
+import { commitSheet, queryVersionsList } from '@/services/boom';
 
 export default {
   namespace: 'newList',
@@ -50,6 +49,30 @@ export default {
         });
       }
     },
+    *queryVersionsList({ payload, callback }, { call, put }) {
+      const response = yield call(queryVersionsList, payload);
+      if (response) {
+        callback && callback(response.data);
+      }
+    },
+    *commitSheet({ payload, callback }, { call, put }) {
+      let response = yield call(commitSheet, payload);
+      if (response) {
+        message.success('提交成功');
+        yield put({
+          type: 'queryVersionsList',
+          payload: {
+            project_id: payload.project_id,
+            // template_id: payload.template_id,
+            // template_node_id: payload.template_node_id,
+          },
+          callback: versionList => {
+            let newVersion = versionList.find(item => item.id == response.data.id);
+            callback && callback(newVersion);
+          },
+        });
+      }
+    },
   },
 
   reducers: {

src/services/boom.js

@@ -92,15 +92,15 @@ export async function queryBoomFlowList(params) {
   return request(`/purchase/bom/flows?${stringify(params)}`);
 }
 //请求历史版本
-export async function queryVersionsTree(params){
+export async function queryVersionsTree(params) {
   return request(`/api/v1/purchase/record/version/tree?${stringify(params)}`);
 }
 //查询业务节点的审核记录
-export async function queryAuditExcel(params){
+export async function queryAuditExcel(params) {
   return request(`/api/v1/purchase/audit/excel?${stringify(params)}`);
 }
 //查询审批节点的审核记录
-export async function queryAuditRecord(params){
+export async function queryAuditRecord(params) {
   return request(`/api/v1/purchase/audit/record?${stringify(params)}`);
 }
 /**
@@ -277,3 +277,10 @@ export async function addAuditNode(data) {
 export async function queryOSSData() {
   return request(`/config/chart-template-img?destDir=public/bom`);
 }
+
+export async function queryRecordSheet(data) {
+  return request(`/purchase/record/sheet?${stringify(data)}`, {
+    method: 'POST',
+    body: data,
+  });
+}