添加审批表单tab页

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef, useMemo } from 'react';
 import '@ant-design/compatible/assets/index.css';
-import { Modal, Input, Select, message, Cascader, Form } from 'antd';
+import { Modal, Input, Select, message, Cascader, Form, Tabs } from 'antd';
 import { connect } from 'dva';
 import { isArray, result } from 'lodash';
 import { useForm } from 'rc-field-form';
@@ -8,6 +8,7 @@ import { async } from '@antv/x6/lib/registry/marker/async';
 
 const { TextArea } = Input;
 const { Option } = Select;
+const { TabPane } = Tabs;
 
 // 提交
 function CommitAuditModal(props) {
@@ -16,7 +17,9 @@ function CommitAuditModal(props) {
   const [data, setData] = useState([]);
   const [length, setLength] = useState(1);
   const [formData, setFromData] = useState({});
+  const [auditList, setAuditList] = useState([]); //用于创建Tabs表单
   const [form] = Form.useForm();
+
   useEffect(() => {
     const { edges, nodes } = flowDetail;
     let Id = version.template_node_id;
@@ -28,6 +31,7 @@ function CommitAuditModal(props) {
 
   useEffect(() => {
     form.resetFields();
+    setAuditList([]);
   }, [visible]);
 
   const treeData = currentId => {
@@ -40,7 +44,6 @@ function CommitAuditModal(props) {
       });
     };
     fun(list);
-    console.log(list);
     const fun2 = list => {
       const parents = list.filter(item => list.findIndex(node => node.Id == item.parentId) == -1);
       let translator = (parents, children) => {
@@ -113,6 +116,23 @@ function CommitAuditModal(props) {
 
   const onChange = value => {
     changeAudit(value[value.length - 1]);
+    setAuditListFun();
+  };
+  //处理tabs页
+  const setAuditListFun = async () => {
+    var fieldsValue = await form.validateFields();
+    let result = Object.values(fieldsValue)
+      .map(item => {
+        if (item && Array.isArray(item)) return item;
+      })
+      .filter(item => item)
+      .flat(Infinity);
+    let addAuditList = [...new Set(result)]
+      .map(Id => {
+        return flowDetail.nodes.find?.(item => item.Id == Id);
+      })
+      .filter(item => item);
+    setAuditList(addAuditList);
   };
 
   const onFinish = async () => {
@@ -150,6 +170,10 @@ function CommitAuditModal(props) {
       })
       .filter(item => item);
     let serviceNode = flowDetail.nodes.find?.(item => item.Id == fieldsValue.next_template_node_id);
+    if (!serviceNode) {
+      message.error('请选择需要流转的业务节点。');
+      return;
+    }
     let params = {
       desc: fieldsValue.desc,
       // 审核流程id
@@ -186,21 +210,20 @@ function CommitAuditModal(props) {
       params.flow_path = result.map(item => getFlowPath(item));
     }
     if (!hasFlowId) {
-      message.error('审批节点未绑定审批流程!请联系管理员。');
+      message.error('当前存在审批节点未绑定审批流程!请联系管理员。');
       return;
     }
+    // onOk(params);
+  };
 
-    //   if (approvalNode?.Id) {
-    //     if (!approvalNode?.flow_id) {
-    //       message.error('审批节点未绑定审批流程!请联系管理员。');
-    //       return;
-    //     }
-    //   }
-
-    // setAuditId();
-    onOk(params);
+  const onTabChange = key => {
+    console.log('=====================', key);
   };
 
+  useEffect(() => {
+    console.log('========================', auditList);
+  }, [auditList]);
+
   const CascaderNode = index => {
     return (
       <Form.Item
@@ -245,6 +268,13 @@ function CommitAuditModal(props) {
           <Input.TextArea />
         </Form.Item>
       </Form>
+      <Tabs defaultActiveKey="1" onChange={onTabChange}>
+        {auditList.map(item => (
+          <TabPane tab={item.label} key={`${item.Id}_${item.label}`}>
+            {item.label}
+          </TabPane>
+        ))}
+      </Tabs>
     </Modal>
   );
 }