temp

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

@@ -94,7 +94,7 @@ const AuditDetailed = props => {
   };
 
   return (
-    <Form style={{ height: '300px', overflowY: 'scroll' }} layout="vertical" autoComplete="off">
+    <Form layout="vertical" autoComplete="off">
       {items.map(item => GetComponent(item))}
     </Form>
   );

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

@@ -0,0 +1,171 @@
+import React, { useMemo } from 'react';
+import { Steps } from 'antd';
+import styles from './Index.less';
+import { queryDDProcessesForecast } from '@/services/boom';
+
+const { Step } = Steps;
+
+const ACTOR_TYPE = {
+  approver: '审批人',
+  notifier: '抄送人',
+  audit: '办理人',
+};
+const APPROVAL_TYPE = {
+  MANUAL: '人工审批',
+  AUTO_AGREE: '自动通过',
+  AUTO_REFUSE: '自动拒绝',
+};
+const APPROVAL_METHOD = {
+  ONE_BY_ONE: '依次审批',
+  AND: '会签审批',
+  OR: '或签审批',
+};
+const ACTIVITY_TYPE = {
+  target_select: '自选审批人',
+  target_approval: '指定审批人',
+};
+
+let timer = {
+  id: '',
+  status: false,
+};
+
+function AuditFlow(props) {
+  const {
+    processCode,
+    deptId = '14169890',
+    userId = '16569001414345099',
+    formComponentValues,
+    activityId,
+    direction,
+  } = props;
+  const flow = {
+    workflowActivityRules: [
+      {
+        activityId: 'xi0m_sJzp',
+        prevActivityId: 'sid-startevent',
+        workflowActor: {
+          actorType: 'approver',
+          approvalType: 'MANUAL',
+          actorActivateType: 'ONE_BY_ONE',
+          approvalMethod: 'ONE_BY_ONE',
+          allowedMulti: true,
+          actorSelectionRange: {},
+          required: false,
+        },
+        isTargetSelect: false,
+        activityName: '连续多级主管',
+        activityType: 'target_approval',
+      },
+      {
+        activityId: 'a890_1358',
+        prevActivityId: 'xi0m_sJzp',
+        workflowActor: {
+          actorType: 'approver',
+          approvalType: 'MANUAL',
+          actorActivateType: 'ONE_BY_ONE',
+          approvalMethod: 'ONE_BY_ONE',
+          allowedMulti: true,
+          actorSelectionRange: {},
+          required: false,
+        },
+        isTargetSelect: false,
+        activityName: '审批人',
+        activityType: 'target_approval',
+      },
+    ],
+    workflowForecastNodes: [
+      {
+        activityId: 'sid-startevent',
+        outId: 'line-random-sid-startevent-xi0m_sJzp',
+      },
+      {
+        activityId: 'xi0m_sJzp',
+        outId: 'line-random-xi0m_sJzp-a890_1358',
+      },
+      {
+        activityId: 'a890_1358',
+        outId: 'line-random-a890_1358-endId',
+      },
+      {
+        activityId: 'endId',
+      },
+    ],
+    processId: 64338972901,
+    processCode: 'PROC-F2AD61A8-25CF-47AB-96EA-E0D0850BBE35',
+    isForecastSuccess: true,
+    userId: '16569001414345099',
+    isStaticWorkflow: true,
+  };
+  const current = useMemo(() => {
+    if (!activityId) {
+      return flow.workflowActivityRules.length;
+    } else {
+      return flow.workflowActivityRules.findIndex(item => item.activityId == activityId);
+    }
+  }, [activityId]);
+
+  const renderDesc = item => {
+    return <></>;
+  };
+
+  const customDot = (dot, { status, index }) => {
+    let item = flow.workflowActivityRules[index];
+
+    return (
+      <Popover
+        content={
+          <div>
+            节点类型：{ACTIVITY_TYPE[item.activityType]}
+            <br />
+            操作人类型：{ACTOR_TYPE[item.workflowActor?.actorType]}
+            <br />
+            审批类型：{APPROVAL_TYPE[item.workflowActor?.approvalType]}
+            <br />
+            审批方式：{APPROVAL_METHOD[item.workflowActor?.approvalMethod]}
+          </div>
+        }
+      >
+        {dot}
+      </Popover>
+    );
+  };
+
+  const getDetail = async () => {
+    if (!timer.status) {
+      // 上锁
+      timer.status = true;
+      let flow = await queryDDProcessesForecast({
+        processCode,
+        deptId,
+        userId,
+        formComponentValues,
+      });
+      // 解锁
+      timer.status = false;
+    } else {
+      clearTimeout(timer.id);
+      // 延迟调用
+      timer.id = setTimeout(() => {
+        getDetail();
+      }, 2000);
+    }
+  };
+
+  useEffect(() => {
+    getDetail();
+  }, [processCode, formComponentValues]);
+
+  return (
+    <div className={styles.top}>
+      <Steps current={current} progressDot={customDot} direction={direction}>
+        {flow.workflowActivityRules.map(item => (
+          <Step key={item.activityId} title={item?.activityName} />
+        ))}
+        {/* <Step key={item.activityId} title={item?.activityName} description={renderDesc(item)} /> */}
+      </Steps>
+    </div>
+  );
+}
+
+export default AuditFlow;

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

@@ -6,6 +6,7 @@ import { isArray, result } from 'lodash';
 import { useForm } from 'rc-field-form';
 import { async } from '@antv/x6/lib/registry/marker/async';
 import AuditDetailed from './AuditDetailed';
+import AuditFlow from './AuditFlow';
 import { queryDingSchema } from '@/services/boom';
 import { Form as Form3x } from '@ant-design/compatible';
 
@@ -21,120 +22,10 @@ function CommitAuditModal(props) {
   const [length, setLength] = useState(1);
   const [formData, setFromData] = useState({});
   const [auditList, setAuditList] = useState([]); //用于创建Tabs表单
+  const [formComponentValues, setFormComponentValues] = useState([]); //用于创建Tabs表单
   const [form] = Form.useForm();
   const formDataRef = useRef([]);
 
-  const res = {
-    result: {
-      creatorUserId: '1649060463062661',
-      gmtModified: '2022-08-10T15:24Z',
-      formUuid: 'FORM-50442153-A9E8-4247-903C-AAF68B4C6219',
-      bizType: '',
-      ownerIdType: 'orgId',
-      formCode: 'PROC-F2AD61A8-25CF-47AB-96EA-E0D0850BBE35',
-      memo: '',
-      engineType: 0,
-      ownerId: '8642326',
-      gmtCreate: '2022-08-09T11:53Z',
-      schemaContent: {
-        icon: 'promotion',
-        title: '测试2',
-        items: [
-          {
-            children: [
-              {
-                componentName: 'NumberField',
-                props: {
-                  id: 'NumberField_S1TT9HEIZGG0',
-                  label: '数字输入框',
-                  required: false,
-                },
-              },
-              {
-                componentName: 'DDSelectField',
-                props: {
-                  id: 'DDSelectField_1UAHP7C7C3NK0',
-                  label: '单选框',
-                  required: false,
-                },
-              },
-              {
-                componentName: 'PhoneField',
-                props: {
-                  id: 'PhoneField_SEIS8H2KAQO0',
-                  label: '电话',
-                  required: false,
-                },
-              },
-            ],
-            componentName: 'TableField',
-            props: {
-              staffStatusEnabled: false,
-              holidayOptions: [],
-              id: 'TableField_1NFDDN09KZQ80',
-              label: '表格',
-              push: {},
-              actionName: '添加',
-            },
-          },
-          {
-            componentName: 'DepartmentField',
-            props: {
-              staffStatusEnabled: false,
-              holidayOptions: [],
-              id: 'DepartmentField_23VD81FG2G5C0',
-              label: '部门',
-              placeholder: '请选择',
-              required: false,
-              push: {},
-            },
-          },
-          {
-            componentName: 'DDAttachment',
-            props: {
-              staffStatusEnabled: false,
-              holidayOptions: [],
-              id: 'DDAttachment_YP8901BICJ4',
-              label: '附件',
-              required: false,
-              push: {},
-            },
-          },
-          {
-            componentName: 'TextareaField',
-            props: {
-              staffStatusEnabled: false,
-              holidayOptions: [],
-              id: '请假事由',
-              label: '请假事由',
-              placeholder: '请输入请假事由',
-              required: false,
-              push: {},
-            },
-          },
-          {
-            componentName: 'DDPhotoField',
-            props: {
-              staffStatusEnabled: false,
-              holidayOptions: [],
-              id: '图片',
-              label: '上传病假单（如病假）',
-              push: {},
-            },
-          },
-        ],
-      },
-      appUuid: 'ding0cdce2d5dbf986d9',
-      appType: 0,
-      visibleRange: 'PRIVATE',
-      listOrder: 1084,
-      name: '测试2',
-      status: 'PUBLISHED',
-      procType: '',
-    },
-  };
-  const [schemaContent, setSchemaContent] = useState(res.result.schemaContent);
-
   useEffect(() => {
     if (!visible) return;
     const { edges, nodes } = flowDetail;
@@ -256,46 +147,44 @@ function CommitAuditModal(props) {
       }
     }
     console.log(addAuditList);
-    setAuditList(
-      addAuditList.map((item, index) => {
-        let FormComponents = Form3x.create({
-          onValuesChange: (props, changedValues, allValues) => {
-            const { items } = props;
-            console.log(props, allValues);
-            let formData = formDataRef.current;
-            formData[index] = items
-              .map(item => {
-                const itemProps = item.props;
-                if (!itemProps.label) return;
-                let val = allValues[itemProps.id];
-                if (val instanceof Object) {
-                  return {
-                    name: itemProps.label,
-                    id: itemProps.id,
-                    ...val,
-                  };
-                }
+    addAuditList = addAuditList.map((item, index) => {
+      let FormComponents = Form3x.create({
+        onValuesChange: (props, changedValues, allValues) => {
+          const { items } = props;
+          console.log(props, allValues);
+          formComponentValues[index] = items
+            .map(item => {
+              const itemProps = item.props;
+              if (!itemProps.label) return;
+              let val = allValues[itemProps.id];
+              if (val instanceof Object) {
                 return {
                   name: itemProps.label,
                   id: itemProps.id,
-                  value: allValues[itemProps.id],
+                  ...val,
                 };
-              })
-              .filter(item => item);
-            console.log(formData[index]);
-          },
-        })(AuditDetailed);
+              }
+              return {
+                name: itemProps.label,
+                id: itemProps.id,
+                value: allValues[itemProps.id],
+              };
+            })
+            .filter(item => item);
+          setFormComponentValues([...formComponentValues])
+        },
+      })(AuditDetailed);
 
-        return {
-          ...item,
-          FormComponents: <FormComponents items={item.schemaContent.items} />,
-        };
-      })
-    );
+      return {
+        ...item,
+        FormComponents: <FormComponents items={item.schemaContent.items} />,
+      };
+    });
+    setAuditList(addAuditList);
   };
   const onFinish = async () => {
     var fieldsValue = await form.validateFields();
-    console.log(formDataRef.current);
+    console.log(formComponentValues);
     let hasFlowId = true; //是否都绑定审批节点
     const getFlowPath = node => {
       //[134, 135]
@@ -430,6 +319,7 @@ function CommitAuditModal(props) {
           // </TabPane>
           <TabPane tab={item.name} key={`${idx}_${item.title}`}>
             {item.FormComponents}
+            <AuditFlow processCode={item.formCode} formComponentValues={formComponentValues[idx]} />
           </TabPane>
         ))}
       </Tabs>

src/services/boom.js

@@ -299,3 +299,11 @@ export async function queryDDdepList(data) {
   });
   return res.data.result
 }
+
+export async function queryDDProcessesForecast(data) {
+  let res = await request(`/api/v1/purchase/bom/ding/processes-forecast`, {
+    method: 'POST',
+    body: data,
+  });
+  return res.data.result
+}