优化审批表单计算流程样式

config/config.js

@@ -140,8 +140,8 @@ export default {
   chainWebpack: webpackPlugin,
   proxy: {
     '/api': {
-      target: 'http://192.168.20.152:8888/',
-      // target: 'http://47.96.12.136:8896/',
+      // target: 'http://192.168.20.152:8888/',
+      target: 'http://47.96.12.136:8896/',
       // target: 'http://oraysmart.com:8889/',
       // target: 'http://oraysmart.com:8888/api',
       // changeOrigin: true,

src/pages/PurchaseAdmin/PurchaseList/Detail/ApprovalProcess.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+
+import { queryUserListByRoleID } from '@/services/boom';
+import { connect } from 'dva';
+import { PlusOutlined } from '@ant-design/icons';
+import { Popover, Radio, RadioChangeEvent, Spin, Steps } from 'antd';
+
+const { Step } = Steps;
+
+enum TYPR {
+  ROLE = 'role',
+  USER = 'user',
+}
+
+const ApprovalProcess = props => {
+  const { id, approvalProcess, userList, onChange } = props;
+  const [selectUserList, setSelectUserList] = useState([]);
+  const [curNodeIdx, setCurNodeIdx] = useState(-1);
+  const [loading, setLoading] = useState(false);
+  // console.log(approvalProcess);
+
+  const list = approvalProcess[id];
+  list?.forEach(item => {
+    if (item.length > 1 && item[0].type == TYPR.USER) {
+      item.forEach(curUser => {
+        curUser.name = userList.find(user => user.ID == curUser.value)?.CName || '-';
+      });
+    } else if (item.length == 1 && item[0].type == TYPR.USER) {
+      item[0].name = userList.find(user => user.ID == item[0].value)?.CName || '-';
+    } else if (item.length == 1 && item[0].nowType == TYPR.USER) {
+      item[0].name = userList.find(user => user.ID == item[0].nowValue)?.CName || '-';
+    } else {
+      item[0].name = null;
+    }
+  });
+  console.log(list);
+
+  const onStepsChange = async (current, list) => {
+    setLoading(true);
+    const itemNode = list[current][0];
+    if (itemNode.type !== 'role') return;
+    const data = await queryUserListByRoleID({ role_id: itemNode.value });
+    setCurNodeIdx(current);
+    setSelectUserList(data);
+    setLoading(false);
+  };
+
+  const selectedUserId = ({ target: { value } }: RadioChangeEvent) => {
+    //userId
+    const name = userList.find(user => user.ID == value)?.CName || '-';
+    const data = { nowType: TYPR.USER, nowValue: Number(value), name }; //type: TYPR.USER, value: Number(value)
+    list[curNodeIdx][0] = { ...list[curNodeIdx][0], ...data };
+    console.log(list);
+    onChange?.({ ...approvalProcess, [id]: list });
+  };
+
+  const content = (
+    <Spin spinning={loading}>
+      <Radio.Group onChange={selectedUserId}>
+        {selectUserList.map(item => (
+          // <Button onClick={() => selectedUserId(item.user_id)}>{item.c_name}</Button>
+          <Radio.Button value={item.user_id}>{item.c_name}</Radio.Button>
+        ))}
+      </Radio.Group>
+    </Spin>
+  );
+
+  return (
+    <>
+      <Steps current={-1} direction="vertical" onChange={value => onStepsChange(value, list)}>
+        {list?.map(item => (
+          <Step
+            key={item[0]?.value}
+            icon={
+              item[0].type != TYPR.USER || item[0].nowType == TYPR.USER ? (
+                <Popover
+                  placement="bottomLeft"
+                  title={'选择审批人'}
+                  content={content}
+                  trigger="click"
+                  overlayStyle={{ width: '300px' }}
+                >
+                  <PlusOutlined />
+                </Popover>
+              ) : null
+              // <PlusOutlined />
+            }
+            title={item[0]?.name}
+          />
+        ))}
+      </Steps>
+      {/* {selectUserList.map(item => (
+        <Button onClick={() => selectedUserId(item.user_id)}>{item.c_name}</Button>
+      ))} */}
+    </>
+  );
+};
+export default connect(({ xflow, detail, user }) => ({
+  userList: user.list,
+}))(ApprovalProcess);

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

@@ -27,6 +27,7 @@ import { Form as Form3x } from '@ant-design/compatible';
 import { getCurrentUser } from '@/utils/authority';
 import DDCode from '@/components/DDComponents/DDCode';
 import { uploadFile, queryUserListByRoleID } from '@/services/boom';
+import ApprovalProcess from './ApprovalProcess';
 
 const { TextArea } = Input;
 const { Option } = Select;
@@ -310,11 +311,15 @@ function CommitAuditModal(props) {
     firstList.forEach(id => {
       let approvalNode = flowDetail.nodes.find?.(item => item.Id == id);
       let values = data[approvalNode.Id] || [];
+      const audit_list = approvalProcess[approvalNode.Id]?.map(item => {
+        if (item[0].type == 'role') return item[0].nowValue;
+        return item[0].value;
+      });
       const formItem = {
         flow_id: approvalNode.flow_id,
         template_node_id: approvalNode.Id,
         formComponentValues: [...values], //{ name: '附件', value: JSON.stringify(attachment) }
-        audit_list: approvalProcess[approvalNode.Id]?.map(item => item[0].value) || [],
+        audit_list: audit_list || [],
       };
       result.push(JSON.stringify(formItem));
     });
@@ -350,6 +355,17 @@ function CommitAuditModal(props) {
 
   const onFinish = async () => {
     console.log(approvalProcess);
+    const isOk = Object.values(approvalProcess).every(item => {
+      console.log(item);
+      return item.every(cur => {
+        if (cur[0].type == 'role') return cur[0].nowValue;
+        return true;
+      });
+    });
+    if (!isOk) {
+      message.error('请选择审批人。');
+      return;
+    }
     var fieldsValue = await form.validateFields();
     let hasFlowId = true; //是否都绑定审批节点
     const getFlowPath = node => {
@@ -433,7 +449,6 @@ function CommitAuditModal(props) {
       message.error('当前存在审批节点未绑定审批流程!请联系管理员。');
       return;
     }
-    console.log(params);
     onOk(params);
   };
   const CascaderNode = index => {
@@ -472,74 +487,6 @@ function CommitAuditModal(props) {
     }
   };
 
-  const renderSteps = id => {
-    const list = approvalProcess[id];
-    list?.forEach(item => {
-      if (item.length > 1 && item[0].type == 'user') {
-        item.forEach(curUser => {
-          curUser.name = userList.find(user => user.ID == curUser.value)?.CName || '-';
-        });
-      } else if (item.length == 1 && item[0].type == 'user') {
-        item[0].name = userList.find(user => user.ID == item[0].value)?.CName || '-';
-      } else {
-        item[0].name = null;
-      }
-    });
-    console.log(list);
-
-    const onStepsChange = async (current, list) => {
-      const itemNode = list[current][0];
-      if (itemNode.type !== 'role') return;
-      const data = await queryUserListByRoleID({ role_id: itemNode.value });
-      console.log(data);
-      setCurNodeIdx(current);
-      setSelectUserList(data);
-    };
-
-    const selectedUserId = userId => {
-      const name = userList.find(user => user.ID == userId)?.CName || '-';
-      const data = { type: 'user', value: Number(userId), name };
-      list[curNodeIdx][0] = data;
-      console.log(list);
-      setApprovalProcess({ ...approvalProcess, [id]: list });
-      // const newData = userIdData[id] || [];
-      // newData[curNodeIdx] = userId;
-      // setUserIdData({ ...userIdData, [id]: newData });
-      // console.log(userId, curNodeIdx, { ...userIdData, [id]: newData });
-    };
-
-    return (
-      <>
-        <Steps current={-1} direction="vertical" onChange={value => onStepsChange(value, list)}>
-          {list?.map(item => (
-            <Step
-              key={item[0]?.value}
-              icon={
-                item[0]?.name ? null : (
-                  // <Popover
-                  //   placement="rightTop"
-                  //   title={'选择审批人'}
-                  //   content={selectUserList.map(item => {
-                  //     <div>{item.c_name}</div>;
-                  //   })}
-                  //   trigger="click"
-                  // >
-                  //   <PlusOutlined />
-                  // </Popover>
-                  <PlusOutlined />
-                )
-              }
-              title={item[0]?.name}
-            />
-          ))}
-        </Steps>
-        {selectUserList.map(item => (
-          <Button onClick={() => selectedUserId(item.user_id)}>{item.c_name}</Button>
-        ))}
-      </>
-    );
-  };
-
   return (
     <Modal
       confirmLoading={loading}
@@ -584,9 +531,12 @@ function CommitAuditModal(props) {
                 {!formComponentValues[item.nodeId] || !approvalProcess[item.nodeId] ? (
                   <Empty description="请先填写表单" />
                 ) : (
-                  renderSteps(item.nodeId)
+                  <ApprovalProcess
+                    id={item.nodeId}
+                    approvalProcess={approvalProcess}
+                    onChange={setApprovalProcess}
+                  />
                 )
-                // ({renderSteps(item.nodeId)})
                 // <AuditFlow
                 //   processCode={item.formCode}
                 //   formComponentValues={formComponentValues[item.nodeId]}

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

@@ -890,54 +890,10 @@ function Detail(props) {
           version_id: version.version_id,
         },
       });
-      // dispatch({
-      //   type: 'detail/queryDingInstanceDetail',
-      //   payload: {
-      //     process_instance_id: version.ding_instance_id, //创建表单成功返回的id
-      //   },
-      // });
     }
   };
 
   const onSubmitNextNode = values => {
-    const ddd = {
-      id: 1117,
-      project_id: 76,
-      cur_template_node_id: 777,
-      next_template_node_id: 779,
-      template_id: 47,
-      cur_template_id: 47,
-      next_template_id: 47,
-      template_node_id: 791,
-      flow_path: [
-        {
-          template_id: 47,
-          flow_id: 2,
-          node_level_id: 1,
-          template_node_id: 791,
-          flow_path: [{ template_id: 47, flow_id: 2, node_level_id: 1, template_node_id: 778 }],
-        },
-        {
-          template_id: 47,
-          flow_id: 2,
-          node_level_id: 1,
-          template_node_id: 792,
-          flow_path: [{ template_id: 47, flow_id: 2, node_level_id: 1, template_node_id: 778 }],
-        },
-      ],
-      form_list: [
-        '{"flow_id":2,"template_node_id":791,"formComponentValues":[{"name":"联系人","id":"InnerContactField_8dd67dc0-3a12-47ca-9cd9-ec80c2189ede","value":["448"]},{"name":"单选框","id":"DDSelectField_1fcb0fa7-7123-42d2-951e-d99b4ab61367","value":["111"]},{"name":"多选框","id":"DDMultiSelectField_7b7cebd4-6495-490e-ab39-c1d79137d807","value":["555"]},{"name":"数字输入框","id":"NumberField_f7b96ef8-ab94-4f99-93b5-663d1619e7f8","value":["2"]}]}',
-        '{"flow_id":2,"template_node_id":792,"formComponentValues":[{"name":"联系人","id":"InnerContactField_8dd67dc0-3a12-47ca-9cd9-ec80c2189ede","value":["67"]},{"name":"单选框","id":"DDSelectField_1fcb0fa7-7123-42d2-951e-d99b4ab61367","value":["222"]},{"name":"多选框","id":"DDMultiSelectField_7b7cebd4-6495-490e-ab39-c1d79137d807","value":["333","444"]},{"name":"数字输入框","id":"NumberField_f7b96ef8-ab94-4f99-93b5-663d1619e7f8","value":["2"]}]}',
-        '{"flow_id":2,"template_node_id":778,"formComponentValues":[{"name":"联系人","id":"InnerContactField_8dd67dc0-3a12-47ca-9cd9-ec80c2189ede","value":["448"]},{"name":"单选框","id":"DDSelectField_1fcb0fa7-7123-42d2-951e-d99b4ab61367","value":["111"]},{"name":"多选框","id":"DDMultiSelectField_7b7cebd4-6495-490e-ab39-c1d79137d807","value":["333","444"]},{"name":"数字输入框","id":"NumberField_f7b96ef8-ab94-4f99-93b5-663d1619e7f8","value":["3"]}]}',
-      ],
-    };
-    // dispatch({
-    //   type: 'detail/advanceSubmitNextNode',
-    //   payload: ddd, //values,
-    //   callback: data => {
-    //     console.log('=======================================', JSON.stringify(data));
-    //   },
-    // });
     dispatch({
       type: 'detail/submitNextNode',
       payload: values,
@@ -1051,7 +1007,6 @@ function Detail(props) {
 
   return (
     <Spin spinning={false}>
-      <Button onClick={onSubmitNextNode}>测试</Button>
       <div className={styles.top}>
         <div>
           <Button type="primary" style={{ marginRight: 20 }} onClick={() => setFlowVisible(true)}>

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

@@ -22,7 +22,11 @@ function TimeNode(props) {
             <Step
               key={item.id}
               title={item.node}
-              // description={`审批角色：${item?.AuditRoleInfo.Name || '-'}`}
+              description={
+                item?.AuditRoleInfo
+                  ? `审批人：${item?.AuditRoleInfo.Name || '-'}`
+                  : `审批人：${item?.AuditorUser.CName || '-'}`
+              }
             />
           ))}
         </Steps>