抄送人修改

src/components/Flow/node/auditNode/index.tsx

@@ -82,26 +82,26 @@ const CustomRect = (props: any) => {
   // const type: TYPE = 0;
   const titleDom = () => {
     let color = COLOR.AUDIT;
-    let text = label == '动作节点' ? TITLETEXT.AUDIT : label;
+    let text = label;
     switch (type) {
       case TYPE.AUDIT:
         color = COLOR.AUDIT;
-        text = TITLETEXT.AUDIT;
+        text = label !== '动作节点' ? label : TITLETEXT.AUDIT;
         break;
       case TYPE.INITIATOR:
         color = COLOR.INITIATOR;
-        text = TITLETEXT.INITIATOR;
+        text = label !== '动作节点' ? label : TITLETEXT.INITIATOR;
         break;
       case TYPE.COPYMAN:
         color = COLOR.COPYMAN;
-        text = TITLETEXT.COPYMAN;
+        text = label !== '动作节点' ? label : TITLETEXT.COPYMAN;
         break;
     }
     return (
       <div
         style={{
           width: '100%',
-          height: `${fontSize + 16}px`,
+          height: '22px',
           paddingLeft: '6px',
           backgroundColor: color,
           color: 'white',

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

@@ -51,6 +51,7 @@ export interface IConfig {
   process_code?: string;
   type: TYPE;
   initiator: {
+    label: string; //描述
     type: string;
     value: number;
     origin?: string | number;
@@ -58,10 +59,12 @@ export interface IConfig {
   }[];
   //审批人目前只支持单选角色或者单选人
   audits: {
+    label: string; //描述
     type: string;
     value: number;
     origin?: string | number;
     name?: string;
+    is_cc: number;
   }[];
 }
 
@@ -123,7 +126,6 @@ const Component = (props: any) => {
     console.log(bool);
     setIsRole(bool);
   }, []);
-  console.log('===================', nodeConfig);
 
   const handleTreeChange = (values: (string | number)[]) => {
     const newValues = values.map((cur) => {
@@ -134,7 +136,7 @@ const Component = (props: any) => {
           origin: cur,
         };
       } else {
-        return { type: IDTYPE.DEP, value: cur, origin: cur };
+        return { type: IDTYPE.DEP, value: cur, origin: cur, is_cc: 1 };
       }
     });
     onNodeConfigChange('initiator', newValues);
@@ -163,7 +165,14 @@ const Component = (props: any) => {
               value={nodeConfig.audits?.map((item) => item.value)}
               onChange={(value) => {
                 onNodeConfigChange('audits', [
-                  { type: IDTYPE.USER, value: Number(value) },
+                  {
+                    type: IDTYPE.USER,
+                    label:
+                      nodeConfig.label == '动作节点'
+                        ? '审批人'
+                        : nodeConfig.label,
+                    value: Number(value),
+                  },
                 ]);
               }}
               filterOption={(input, option) =>
@@ -191,7 +200,14 @@ const Component = (props: any) => {
               }
               onChange={(value) => {
                 onNodeConfigChange('audits', [
-                  { type: IDTYPE.ROLE, value: Number(value) },
+                  {
+                    type: IDTYPE.ROLE,
+                    label:
+                      nodeConfig.label == '动作节点'
+                        ? '审批人'
+                        : nodeConfig.label,
+                    value: Number(value),
+                  },
                 ]);
               }}
             >
@@ -215,7 +231,14 @@ const Component = (props: any) => {
               }
               onChange={(value) => {
                 onNodeConfigChange('audits', [
-                  { type: IDTYPE.LEADER, value: Number(value) },
+                  {
+                    type: IDTYPE.LEADER,
+                    label:
+                      nodeConfig.label == '动作节点'
+                        ? '审批人'
+                        : nodeConfig.label,
+                    value: Number(value),
+                  },
                 ]);
               }}
             />
@@ -232,7 +255,13 @@ const Component = (props: any) => {
           label="标题"
           value={nodeConfig.label}
           onChange={(value) => {
-            onNodeConfigChange('label', value);
+            onNodeConfigChange('', {
+              label: value,
+              audits:
+                nodeConfig?.audits?.length > 0
+                  ? [{ ...(nodeConfig?.audits[0] || []), label: value }]
+                  : [],
+            });
           }}
         />
         <SelectField
@@ -297,12 +326,9 @@ const Component = (props: any) => {
             }}
           />
         </div>
-        {nodeConfig.type != TYPE.AUDIT && (
+        {nodeConfig.type == TYPE.INITIATOR && (
           <div className="group">
-            <label>
-              {typeOption.find((item) => item.value == nodeConfig.type)
-                ?.label || '-'}
-            </label>
+            <label>发起人</label>
             <TreeSelect
               showSearch
               multiple
@@ -337,6 +363,38 @@ const Component = (props: any) => {
           </div>
         )}
       </div>
+      {nodeConfig.type == TYPE.COPYMAN && (
+        <div className="group">
+          <label>抄送人:</label>
+          <Select
+            showSearch
+            style={{ width: '80%' }}
+            value={nodeConfig.audits?.map((item) => item.value)}
+            onChange={(value) => {
+              onNodeConfigChange('audits', [
+                {
+                  type: IDTYPE.USER,
+                  label:
+                    nodeConfig.label == '动作节点'
+                      ? '抄送人'
+                      : nodeConfig.label,
+                  value: Number(value),
+                  is_cc: 1,
+                },
+              ]);
+            }}
+            filterOption={(input, option) =>
+              option?.props?.children.indexOf(input) >= 0
+            }
+          >
+            {(userList || []).map((item) => (
+              <Option key={item.ID} value={item.ID}>
+                {item.CName}
+              </Option>
+            ))}
+          </Select>
+        </div>
+      )}
 
       {/* <Button style={{ marginTop: 20 }} type="primary" onClick={onSave}>
         保存

src/pages/Flow/components/ApprovalProcess.tsx

@@ -1,8 +1,20 @@
 import React, { CSSProperties, useEffect, useMemo, useState } from 'react';
 import { queryUserListByRoleID, queryLeader } from '@/services/boom';
 import { connect } from 'umi';
-import { CheckOutlined, PlusOutlined } from '@ant-design/icons';
-import { Popover, Radio, RadioChangeEvent, Spin, Steps } from 'antd';
+import {
+  CheckOutlined,
+  PlusOutlined,
+  PlusSquareOutlined,
+} from '@ant-design/icons';
+import {
+  Popover,
+  Radio,
+  RadioChangeEvent,
+  Space,
+  Spin,
+  Steps,
+  Timeline,
+} from 'antd';
 import { useModel, useRequest } from '@umijs/max';
 
 const { Step } = Steps;
@@ -19,6 +31,7 @@ interface AuditNode {
   type: (typeof TYPE)[keyof typeof TYPE];
   value: number[];
   checkValue: [];
+  label: string;
 }
 
 const ApprovalProcess = (props: any) => {
@@ -45,6 +58,7 @@ const ApprovalProcess = (props: any) => {
         type: item[0].type,
         checkValue: [],
         seq: index,
+        label: item[0].label,
         value: item.map((node: any) => node.value),
       };
 
@@ -76,10 +90,10 @@ const ApprovalProcess = (props: any) => {
     fontSize: 16,
   };
 
-  return (
-    <div>
-      <div style={rowStyle}>
-        {auditList.map((item: AuditNode, index: number) => (
+  const renderAudits = (list: AuditNode[]) => {
+    return list.map((item: AuditNode, index: number) => {
+      return {
+        children: (
           <AuditNodeStep
             key={`${item.type}-${item.value.join('.')}-${index}`}
             leaderData={leaderData}
@@ -89,24 +103,16 @@ const ApprovalProcess = (props: any) => {
             value={checkValue[item.seq]}
             onChange={(value: number) => onCheckValue(value, item.seq)}
           />
-        ))}
-      </div>
-      {ccList.length > 0 && (
-        <div style={rowStyle}>
-          <h3 style={{ margin: "20px 0", fontWeight: 'bold' }}>抄送人</h3>
-          {ccList.map((item: AuditNode, index: number) => (
-            <AuditNodeStep
-              key={`${item.type}-${item.value.join('.')}-${index}`}
-              leaderData={leaderData}
-              item={item}
-              roleList={roleList}
-              userList={userList}
-              value={checkValue[item.seq]}
-              onChange={(value: number) => onCheckValue(value, item.seq)}
-            />
-          ))}
-        </div>
-      )}
+        ),
+      };
+    });
+  };
+
+  return (
+    <div>
+      <Timeline items={renderAudits(auditList)}></Timeline>
+
+      {ccList.length > 0 && <Timeline items={renderAudits(ccList)}></Timeline>}
     </div>
   );
 };
@@ -184,18 +190,29 @@ const AuditNodeStep = (props: AuditNodeStepProps) => {
     );
   }
   if (item.type == TYPE.ROLE) {
-    let title = '';
+    let label = item.label || '';
+    let userName = '';
+    const names = item.value.map((id) => {
+      const role = roleList.find((cur: any) => cur.ID == id);
+      return role?.Name;
+    });
+    let title = `从${names.join('、')}选择`;
     if (value) {
-      title = userList.find((cur: any) => cur.ID == value)?.CName;
-    } else {
-      const names = item.value.map((id) => {
-        const role = roleList.find((cur: any) => cur.ID == id);
-        return role?.Name;
-      });
-      title = `从${names.join('、')}选择`;
+      userName = userList.find((cur: any) => cur.ID == value)?.CName;
     }
     return (
-      <div style={{ marginBottom: 20, cursor: 'pointer' }}>
+      <div
+        style={{
+          marginBottom: 20,
+          cursor: 'pointer',
+          display: 'flex',
+          justifyContent: 'space-between',
+        }}
+      >
+        <div>
+          <div style={{ fontSize: '18px' }}>{label}</div>
+          <div style={{ fontSize: '14px', color: 'gray' }}>{title}</div>
+        </div>
         <Popover
           placement="bottomLeft"
           title={'选择审批人'}
@@ -205,19 +222,36 @@ const AuditNodeStep = (props: AuditNodeStepProps) => {
           onOpenChange={handleOpen}
           style={{ marginBottom: 20 }}
         >
-          <PlusOutlined style={{ marginRight: 20 }} /> {title}
+          <Space>
+            {userName}
+            <PlusSquareOutlined style={{ fontSize: '36px', color: 'gray' }} />
+          </Space>
         </Popover>
       </div>
     );
   }
+
+  let label = item.label || '';
+
+  let title = item.is_cc ? '抄送1人' : '1人审批';
   const names = item.value.map((id) => {
     const user = userList.find((cur: any) => cur.ID == id);
     return user?.CName;
   });
 
   return (
-    <div style={{ marginBottom: 20 }}>
-      <CheckOutlined style={{ marginRight: 20 }} /> {names.join('、')}
+    <div
+      style={{
+        marginBottom: 20,
+        display: 'flex',
+        justifyContent: 'space-between',
+      }}
+    >
+      <div>
+        <div style={{ fontSize: '18px' }}>{label}</div>
+        <div style={{ fontSize: '14px', color: 'gray' }}>{title}</div>
+      </div>
+      {names.join('、')}
     </div>
   );
 };

src/pages/Flow/index.js

@@ -27,7 +27,7 @@ function Audit(props) {
     {
       title: '分类',
       dataIndex: 'classify_id',
-      render: (id) => classify?.find((item) => item.id == id)?.name || '-',
+      render: (id) => classify?.find((item) => item.id == id)?.name || 'BOM',
     },
     {
       title: '操作',

src/pages/Flow/models/flow.js

@@ -63,10 +63,11 @@ export default {
     *queryAuditList({ payload }, { call, put }) {
       try {
         const response = yield call(queryAuditList, payload);
+        const res = yield call(queryAuditList);
         yield put({
           type: 'save',
           payload: {
-            auditList: response.data,
+            auditList: [...response.data, ...res.data],
           },
         });
       } catch (error) {}