Merge branch 'develop_0715' of http://120.55.44.4:10080/xujunjie/WorkloadWeb into develop_0715

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,121 @@
+import React, { useMemo, useEffect, useState, useRef } from 'react';
+import { Steps, Popover } 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: '指定审批人',
+};
+
+function AuditFlow(props) {
+  const {
+    processCode,
+    deptId = '14169890',
+    userId = '16569001414345099',
+    formComponentValues,
+    activityId,
+    direction,
+  } = props;
+  const [flow, setFlow] = useState({ workflowActivityRules: [] });
+  const timerRef = useRef({
+    id: '',
+    status: false,
+  });
+  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 () => {
+    console.log(timerRef.current);
+    if (!timerRef.current.status) {
+      // 上锁
+      timerRef.current.status = true;
+      try {
+        let flow = await queryDDProcessesForecast({
+          processCode,
+          deptId,
+          userId,
+          formComponentValues,
+        });
+        console.log(flow);
+        setFlow(flow);
+      } catch (error) {}
+      setTimeout(() => {
+        // 延时解锁
+        timerRef.current.status = false;
+      }, 2000);
+    } else {
+      clearTimeout(timerRef.current.id);
+      // 延迟调用
+      timerRef.current.id = setTimeout(() => {
+        getDetail();
+      }, 2000);
+    }
+  };
+
+  useEffect(() => {
+    if (!processCode || !formComponentValues) return;
+    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,119 +22,8 @@ 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;
@@ -256,46 +146,40 @@ 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[item.formCode] = 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.forEach((item, index) => {
+      let Components = Form3x.create({
+        onValuesChange: (props, changedValues, allValues) => {
+          const { items } = props;
+          console.log(props, allValues);
+          formComponentValues[item.formCode] = 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],
+                  id: itemProps.id,
+                  ...val,
                 };
-              })
-              .filter(item => item);
-            console.log(formData);
-          },
-        })(AuditDetailed);
-
-        return {
-          ...item,
-          FormComponents: <FormComponents items={item.schemaContent.items} />,
-        };
-      })
-    );
+              }
+              return {
+                name: itemProps.label,
+                // id: itemProps.id,
+                value: allValues[itemProps.id] || '',
+              };
+            })
+            .filter(item => item);
+          setFormComponentValues({ ...formComponentValues });
+        },
+      })(AuditDetailed);
+      item.FormComponents = <Components items={item.schemaContent.items} />;
+    });
+    setAuditList(addAuditList);
   };
 
   const getFromData = idList => {
-    const data = formDataRef.current;
+    const data = formComponentValues;
     const result = [];
     //获取流转节点的层级关系
     let len = 0;
@@ -333,7 +217,7 @@ function CommitAuditModal(props) {
   };
   const onFinish = async () => {
     var fieldsValue = await form.validateFields();
-    console.log(formDataRef.current);
+    console.log(formComponentValues);
     let hasFlowId = true; //是否都绑定审批节点
     const getFlowPath = node => {
       //[134, 135]
@@ -476,6 +360,10 @@ function CommitAuditModal(props) {
           // </TabPane>
           <TabPane tab={item.name} key={`${idx}_${item.title}`}>
             {item.FormComponents}
+            <AuditFlow
+              processCode={item.formCode}
+              formComponentValues={formComponentValues[item.formCode]}
+            />
           </TabPane>
         ))}
       </Tabs>

src/services/boom.js

@@ -1,3 +1,4 @@
+import { message } from 'antd';
 import request from '@/utils/request';
 import { async } from '@antv/x6/lib/registry/marker/async';
 import { stringify } from 'qs';
@@ -305,3 +306,15 @@ 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,
+  });
+  if (res.data.message) {
+    // message.error(res.data.message);
+    throw new Error(res.data.message);
+  }
+  return res.data.result;
+}