fix: 节点添加抄送人员面板

src/components/PeopleSelector/CardCheck.jsx

+import React, { useState, useEffect, useRef } from 'react';
+import { Checkbox } from 'antd';
+import styles from './index.less';
+const CheckboxGroup = Checkbox.Group;
+
+const CardCheck = props => {
+  // 自定义获取改变后的值hooks
+  const usePrevious = value => {
+    const ref = useRef();
+    useEffect(() => {
+      ref.current = value;
+    });
+    return ref.current;
+  };
+  const { cardMsg, callback, checkList } = props;
+  const [checkedList, setCheckedList] = useState([]); // 选中列表
+  const [indeterminate, setIndeterminate] = useState(false);
+  const [checkAll, setCheckAll] = useState(false);
+  const [plainOptions, setPlainOptions] = useState([]);
+  const prevAmount = usePrevious({ checkedList });
+
+  useEffect(() => {
+    const msg = JSON.parse(JSON.stringify(cardMsg));
+    setPlainOptions(msg.plainOptions);
+    setCheckedList(msg.checkedList);
+    setIndeterminate(msg.indeterminate);
+    setCheckAll(msg.checkAll);
+  }, [cardMsg]);
+  // 获取勾选新增得数据
+  const addData = (arr1, arr2) => arr2.filter(val => arr1.indexOf(val) === -1);
+  // 获取勾选删除得数据
+  const delData = (arr1, arr2) => arr1.filter(val => arr2.indexOf(val) === -1);
+  // 单选监听
+  const onChange = list => {
+    let newCheckList = [...checkList];
+    let arr;
+    if (checkedList.length > list.length) {
+      // 取消勾选
+      arr = delData(checkedList, list);
+      arr.forEach(item => {
+        newCheckList.splice(newCheckList.findIndex(ele => ele.value === item), 1);
+      });
+    } else {
+      // 勾选元素
+      arr = addData(checkedList, list);
+      arr.forEach(item => {
+        let checkName = plainOptions.find(ele => ele.value === item);
+        newCheckList.push(checkName);
+      });
+    }
+    callback(newCheckList);
+    setCheckedList(list);
+    setIndeterminate(!!list.length && list.length < plainOptions.length);
+    setCheckAll(list.length === plainOptions.length);
+  };
+  // 全选监听
+  const onCheckAllChange = e => {
+    let newCheckList = [...checkList];
+    let arr;
+    if (e.target.checked) {
+      // 全选
+      arr = addData(checkedList, plainOptions.map(item => item.value));
+      arr.forEach(item => {
+        let checkName = plainOptions.find(ele => ele.value === item);
+        newCheckList.push(checkName);
+      });
+    } else {
+      arr = delData(checkedList, []);
+      arr.forEach(item => {
+        newCheckList.splice(newCheckList.findIndex(ele => ele.value === item), 1);
+      });
+    }
+    callback(newCheckList);
+    setCheckedList(e.target.checked ? plainOptions.map(item => item.value) : []);
+    setIndeterminate(false);
+    setCheckAll(e.target.checked);
+  };
+  return (
+    <div className={styles.checkContent}>
+      <div className={styles.topCheckbox}>
+        <Checkbox
+          indeterminate={indeterminate}
+          onChange={e => onCheckAllChange(e)}
+          checked={checkAll}
+        >
+          {cardMsg.groupName}
+        </Checkbox>
+      </div>
+      <div className={styles.bottomCheckbox}>
+        <CheckboxGroup
+          value={checkedList}
+          onChange={list => onChange(list)}
+          style={{ display: 'flex', flexWrap: 'wrap' }}
+        >
+          {plainOptions.map(item => (
+            <Checkbox key={item.value} value={item.value}>
+              {item.label}
+            </Checkbox>
+          ))}
+        </CheckboxGroup>
+      </div>
+    </div>
+  );
+};
+
+export default CardCheck;

src/components/PeopleSelector/index.jsx

+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { Modal, Input, Button, message, Spin, Pagination, Table } from 'antd';
+import { GetGroupUserTree, TestPush } from '@/services/messagemanage/messagemanage';
+import styles from './index.less';
+
+import CardCheck from './CardCheck';
+
+const PeopleSelector = props => {
+  const { confirmModal, onCancel, visible, onSubumit, personList } = props;
+  const [allList, setAllist] = useState([]); // 用于展示得数据
+  // const [checkList, setCheckList] = useState([]); // 选中得数据集合
+  const [loading, setLoading] = useState(false);
+  const [total, setTotal] = useState();
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [searchName, setSearchName] = useState();
+  const [flag, setFlag] = useState(0);
+  const checkList = useRef([]);
+
+  useEffect(() => {
+    if (visible) {
+      setCurrentPage(1);
+      // setCheckList(personList);
+      checkList.current = personList;
+      getData(searchName, 1, pageSize);
+    } else {
+      // setCheckList([]);
+      checkList.current = [];
+      setAllist([]);
+      setSearchName('');
+    }
+  }, [visible]);
+  // 选中后得回调函数
+  const checkCallBack = useCallback(newCheckList => {
+    if (newCheckList) {
+      checkList.current = newCheckList;
+      setFlag(flag + 1);
+      // setCheckList(newCheckList);
+    }
+  });
+  // 监听分页
+  const paginationChange = (page, pageSizes) => {
+    setCurrentPage(page);
+    setPageSize(pageSizes);
+    getData(searchName, page, pageSizes);
+  };
+  // 提交勾选的测试人员
+  const onFinish = () => {
+    console.log(checkList.current, 'checkList');
+    onSubumit(checkList.current);
+  };
+  // 搜索
+  const onSearch = () => {
+    setCurrentPage(1);
+    getData(searchName, 1, pageSize);
+  };
+  // 重置
+  const onReset = () => {
+    setCurrentPage(1);
+    getData('', 1, pageSize);
+    setSearchName('');
+  };
+  // 搜索框监听
+  const searchChange = e => {
+    setSearchName(e.target.value);
+  };
+  // 获取数据
+  const getData = (username, page, pageSizes) => {
+    setLoading(true);
+    GetGroupUserTree({
+      key: username,
+      pageSize: pageSizes,
+      PageIndex: page,
+    })
+      .then(res => {
+        setLoading(false);
+        if (res.code === 0) {
+          console.log(checkList.current, 'checkList.current');
+          setTotal(res.data.count);
+          // 数据处理成checkbox组件需要得形式
+          let list = res.data.data.map(item => {
+            let indeterminate = false;
+            let checkedList = [];
+            let checkAll = false;
+            let options = item.users.map(val => {
+              checkList.current.forEach(ele => {
+                console.log(ele, 'elel');
+                if (val.userId === ele.value) {
+                  checkedList.push(ele.value);
+                }
+              });
+              return {
+                label: val.userName,
+                value: val.userId,
+              };
+            });
+            if (checkedList.length === options.length && checkedList.length > 0) {
+              checkAll = true;
+            }
+            if (checkedList.length < options.length && checkedList.length > 0) {
+              indeterminate = true;
+            }
+            return {
+              groupName: item.groupName,
+              groupId: item.groupId,
+              indeterminate,
+              checkAll,
+              checkedList,
+              plainOptions: options,
+            };
+          });
+          console.log(list, 'list');
+          setAllist(list);
+        } else {
+          message.error(res.msg);
+        }
+      })
+      .catch(() => {
+        setLoading(false);
+        message.error('网络异常，请稍后再试');
+      });
+  };
+
+  const columns = [
+    {
+      title: '已选人员',
+      dataIndex: 'label',
+      key: 'label',
+      width: 300,
+    },
+  ];
+  return (
+    <>
+      <Modal
+        title="选择抄送人"
+        visible={visible}
+        onOk={onFinish}
+        width="900px"
+        onCancel={onCancel}
+        maskClosable={false}
+        destroyOnClose
+        centered
+      >
+        <div className={styles.pushTestContent}>
+          <div className={styles.leftContent}>
+            {/* 头部搜索框 */}
+            <div className={styles.searchHeader}>
+              <Input.Search
+                value={searchName}
+                placeholder="请输入部门或用户"
+                onChange={searchChange}
+                onSearch={onSearch}
+                enterButton
+                style={{ width: '300px', marginRight: '15px' }}
+              />
+              <Button type="primary" htmlType="submit" onClick={onReset}>
+                重置
+              </Button>
+            </div>
+            {/* 复选框模块 */}
+
+            <div className={styles.checkContainer}>
+              <Spin spinning={loading}>
+                {allList.map((item, index) => (
+                  <div className={styles.checkBoxContent} key={item.groupId}>
+                    <CardCheck
+                      cardMsg={item}
+                      cardIndex={index}
+                      callback={(val, newCheckList) => checkCallBack(val, newCheckList)}
+                      checkList={checkList.current}
+                    />
+                  </div>
+                ))}
+              </Spin>
+            </div>
+          </div>
+          <div className={styles.tableRight}>
+            <Table
+              bordered
+              style={{ width: '350px', overflowX: 'hidden' }}
+              rowKey={record => record.value}
+              columns={columns}
+              dataSource={checkList.current}
+              pagination={false}
+              size="small"
+              scroll={{ y: 530 }}
+              ItemTypes="pushTest"
+            />
+          </div>
+        </div>
+        <div>
+          {/* 分页 */}
+          <Pagination
+            total={total}
+            showTotal={(totals, range) => `共 ${totals} 条`}
+            defaultPageSize={pageSize}
+            defaultCurrent={1}
+            current={currentPage}
+            onChange={paginationChange}
+            style={{ width: '100%' }}
+            size="small"
+            showQuickJumper
+            showSizeChanger
+          />
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default PeopleSelector;

src/components/PeopleSelector/index.less

+.pushTestContent {
+  display: flex;
+  .searchHeader {
+    display: flex;
+  }
+  .checkContainer {
+    height: 500px;
+    width: 500px;
+    overflow-y: scroll;
+    margin: 20px 0;
+    padding-right: 5px;
+    .checkContent {
+      display: flex;
+      width: 100%;
+      flex-direction: column;
+      border: 1px solid #c2cdfd;
+      border-radius: 5px;
+      margin-top: 20px;
+      min-height: 50px;
+      padding: 0 10px 10px 20px;
+      .ant-checkbox-wrapper {
+        background-color: #fff;
+      }
+      .topCheckbox {
+        height: 20px;
+        margin: -10px 0 0 0px;
+        line-height: 20px;
+      }
+      .topCheckbox > label :hover {
+        font-weight: 600;
+      }
+      .bottomCheckbox {
+        margin-top: 10px;
+        .ant-checkbox-wrapper {
+          min-width: 150px;
+          margin-left: 0;
+        }
+        // .ant-checkbox-group-item {
+        //   min-width: 150px !important;
+        // }
+        // .ant-checkbox-wrapper {
+        //   min-width: 150px !important;
+        // }
+      }
+      .checkdiv {
+        display: flex;
+        flex-wrap: wrap;
+      }
+    }
+  }
+  .tableRight {
+    margin-left: 10px;
+  }
+}

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/FlowChart.jsx

@@ -158,6 +158,10 @@ const FlowChart = props => {
       obj.key = item.NodeId;
 
       obj.nodeDetail = JSON.stringify(obj);
+      obj.CarbonCopyPeopleList = obj.CarbonCopyPeopleList.map(ele => ({
+        label: ele.userName,
+        value: ele.userID,
+      }));
       if (obj.points === '') {
         if (obj.NodeType === '1') {
           obj.points = `${(index * 200).toString()}" 100"`;
@@ -232,8 +236,7 @@ const FlowChart = props => {
     leaveCallBack(true);
     diagram.commandHandler.deleteSelection();
   };
-  // 创建面板
-  const makePalette = () => {};
+
   const animateFadeDown = e => {
     let diagrams = e.diagram;
     let animation = new go.Animation();
@@ -268,6 +271,7 @@ const FlowChart = props => {
           aheadHandle: 1,
           NodeHandling: 1,
           RuleList: [],
+          CarbonCopyPeopleList: [],
           roleList: [],
         },
         {
@@ -279,6 +283,7 @@ const FlowChart = props => {
           NodeHandling: 1,
           RuleList: [],
           roleList: [],
+          CarbonCopyPeopleList: [],
         },
         {
           category: 'nodeEnd',
@@ -289,6 +294,7 @@ const FlowChart = props => {
           NodeHandling: 1,
           RuleList: [],
           roleList: [],
+          CarbonCopyPeopleList: [],
         },
       ]),
     });
@@ -341,6 +347,7 @@ const FlowChart = props => {
           NodeHandling: 1,
           RuleList: [],
           roleList: [],
+          CarbonCopyPeopleList: [],
         },
         {
           category: 'gatewayParallel',
@@ -351,6 +358,7 @@ const FlowChart = props => {
           NodeHandling: 1,
           RuleList: [],
           roleList: [],
+          CarbonCopyPeopleList: [],
         },
         {
           category: 'gatewayJoin',
@@ -361,6 +369,7 @@ const FlowChart = props => {
           NodeHandling: 1,
           RuleList: [],
           roleList: [],
+          CarbonCopyPeopleList: [],
         },
       ]),
     });
@@ -821,6 +830,7 @@ const FlowChart = props => {
       NodeHandling: 1,
       RuleList: [],
       roleList: [],
+      CarbonCopyPeopleList: [],
     };
     diagram.model.addNodeData({ ...obj, nodeDetail: JSON.stringify(obj) });
     setAddNodes([...AddNodes, newKey]);
@@ -862,6 +872,7 @@ const FlowChart = props => {
       NodeHandling,
       nodeDetail,
       RuleList,
+      CarbonCopyPeopleList,
     } = obj;
     nodeData.NodeName = NodeName;
     nodeData.NodeType = NodeType;
@@ -872,6 +883,7 @@ const FlowChart = props => {
     nodeData.NodeHandling = NodeHandling;
     nodeData.nodeDetail = nodeDetail;
     nodeData.RuleList = RuleList;
+    nodeData.CarbonCopyPeopleList = CarbonCopyPeopleList;
     diagram.model.updateTargetBindings(nodeData);
     console.log(nodeData, 'nodeData');
     // 给线上添加文字
@@ -954,6 +966,9 @@ const FlowChart = props => {
     //   });
     //   return;
     // }
+    diagramObj.nodeDataArray.forEach(item => {
+      item.CarbonCopyPeopleList = item.CarbonCopyPeopleList.map(ele => Number(ele.value));
+    });
     SaveNodeChange({
       FlowId: flowID,
       DeleteNodes,

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/NodeModal.jsx

@@ -24,6 +24,7 @@ import RoalChoose from './nodeModalComponents/RoalChoose';
 import Undertaker from './nodeModalComponents/Undertaker';
 
 import RuleConfig from '@/components/RuleConfig';
+import PeopleSelector from '@/components/PeopleSelector';
 
 import styles from './NodeModal.less';
 import { GetFormDataSource } from '@/services/workflow/workflow';
@@ -47,6 +48,7 @@ const NodeModal = props => {
   const [showRoal, setShowRoal] = useState(false); // 是否显示选择角色用户弹窗
   const [showRule, setShowRule] = useState(false); // 是否显示节点扭转规则弹窗
   const [showUnderTaker, setShowUnderTaker] = useState(false); // 是否显示选择默认承办人弹窗
+  const [showPersonSelect, setShowPersonSelect] = useState(false); // 是否显示人员选择器
   const [editIndex, setEditIndex] = useState(); // 当前编辑默认承办人索引
   const [chooseUser, setChooseUser] = useState(); // 当前编辑角色或者机构的默认承办人
   const [ruleIndex, setRuleIndex] = useState(); // 编辑当前规则索引
@@ -59,8 +61,9 @@ const NodeModal = props => {
     roleList: [],
     nodeDetail: {},
     RuleList: {},
+    CarbonCopyPeopleList: {},
   });
-
+  const [CarbonCopyPeopleList, setCarbonCopyPeopleList] = useState([]);
   const [RuleList, setRuleList] = useState([]); // 规则配置列表
   const [flag, setFlag] = useState(0);
   const [fieldList, setFieldList] = useState([]); // 当规则字段
@@ -77,6 +80,7 @@ const NodeModal = props => {
         getNextLinkNodes(editMsg.key);
         // getPreviousLinkNodes(editMsg.key);
         setRuleList(editMsg.RuleList);
+
         // 获取表数据
         GetFormDataSource({ flowID }).then(res => {
           let list = new Set(talbeList.current);
@@ -96,6 +100,8 @@ const NodeModal = props => {
           talbeList.current = [...list];
           setFlag(flag + 1);
         });
+      } else {
+        setCarbonCopyPeopleList(editMsg.CarbonCopyPeopleList);
       }
 
       getFormData();
@@ -105,6 +111,7 @@ const NodeModal = props => {
       previousLinkNodes.current = [];
       talbeList.current = [];
       setRuleList([]);
+      setCarbonCopyPeopleList([]);
     }
   }, [visible]);
   const SectionToChinese = section => {
@@ -245,6 +252,7 @@ const NodeModal = props => {
           roleList: nodeMsg.roleList,
           nodeDetail,
           RuleList,
+          CarbonCopyPeopleList,
         };
         console.log(nextlinkNodes.current);
         onSubumit(obj, nextlinkNodes.current);
@@ -255,14 +263,19 @@ const NodeModal = props => {
   const delUser = (record, index) => {
     let roleList = [...nodeMsg.roleList];
     roleList.splice(index, 1);
-    let nodeDetail = JSON.stringify({ ...nodeMsg, roleList, RuleList });
-    setNodeMsg({ ...nodeMsg, roleList, nodeDetail, RuleList });
+    let nodeDetail = JSON.stringify({ ...nodeMsg, roleList, RuleList, CarbonCopyPeopleList });
+    setNodeMsg({ ...nodeMsg, roleList, nodeDetail, RuleList, CarbonCopyPeopleList });
   };
   // 添加角色或机构
   const addUser = selectList => {
     console.log(selectList, 'selectList');
-    let nodeDetail = JSON.stringify({ ...nodeMsg, roleList: selectList, RuleList });
-    setNodeMsg({ ...nodeMsg, roleList: selectList, nodeDetail, RuleList });
+    let nodeDetail = JSON.stringify({
+      ...nodeMsg,
+      roleList: selectList,
+      RuleList,
+      CarbonCopyPeopleList,
+    });
+    setNodeMsg({ ...nodeMsg, roleList: selectList, nodeDetail, RuleList, CarbonCopyPeopleList });
     setShowRoal(false);
   };
   // 添加默认承办人
@@ -272,8 +285,8 @@ const NodeModal = props => {
     console.log(editIndex, 'editIndex');
     list[editIndex].defauletUserName = userName;
     list[editIndex].defaultUserId = userId;
-    let nodeDetail = JSON.stringify({ ...nodeMsg, roleList: list, RuleList });
-    setNodeMsg({ ...nodeMsg, roleList: list, nodeDetail, RuleList });
+    let nodeDetail = JSON.stringify({ ...nodeMsg, roleList: list });
+    setNodeMsg({ ...nodeMsg, roleList: list, nodeDetail });
     setShowUnderTaker(false);
   };
   // 编辑默认承办人
@@ -312,6 +325,12 @@ const NodeModal = props => {
     setRuleList(list);
     setShowRule(false);
   };
+  // 选择人员回填
+  const savePerson = e => {
+    console.log(e);
+    setCarbonCopyPeopleList(e);
+    setShowPersonSelect(false);
+  };
   // 网关表单配置监听
   const formChage = (e, index, field) => {
     let list = lodash.cloneDeep(RuleList);
@@ -362,6 +381,10 @@ const NodeModal = props => {
     setRuleIndex(index);
     setShowRule(true);
   };
+  // 配置当前节点抄送人
+  const editCC = () => {
+    setShowPersonSelect(true);
+  };
   // 节点信息监听
   const changeValue = (changedFields, allFields) => {
     if (changedFields[0].name[0] === 'NodeType') {
@@ -477,7 +500,6 @@ const NodeModal = props => {
             borderTopColor: '#99bbe8',
             color: '#15428b',
             fontWeight: 700,
-            // marginBottom: '30px',
           }}
         >
           {nodeMsg.NodeType === '20' || nodeMsg.NodeType === '21' || nodeMsg.NodeType === '22'
@@ -519,15 +541,7 @@ const NodeModal = props => {
                 : '节点'
             }名称`}
             name="NodeName"
-            rules={[
-              { required: true, message: '请输入节点名称' },
-              // {
-              //   validator: (_, value) =>
-              //     value.length > 12
-              //       ? Promise.reject(new Error('节点名称太长啦~'))
-              //       : Promise.resolve(),
-              // },
-            ]}
+            rules={[{ required: true, message: '请输入节点名称' }]}
           >
             <Input
               placeholder={`请输入${
@@ -537,22 +551,7 @@ const NodeModal = props => {
               }名称`}
             />
           </Form.Item>
-          {/* <Form.Item
-            label="节点类型"
-            name="NodeType"
-            rules={[{ required: true, message: '请选择节点类型' }]}
-          >
-            <Select placeholder="请选择节点类型" disabled={modalType === 'edit'}>
-              <Option value="1">开始节点</Option>
-              <Option value="0">普通节点</Option>
-              <Option value="3">审批节点</Option>
-              <Option value="2">结束节点</Option>
-              <Option value="4">抄送节点</Option>
-              <Option value="20">条件网关</Option>
-              <Option value="21">汇合网关</Option>
-              <Option value="22">并行网关</Option>
-            </Select>
-          </Form.Item> */}
+
           <div style={{ display: 'none' }}>
             <Form.Item label="检查前面在办" name="aheadHandle">
               <Select>
@@ -599,7 +598,6 @@ const NodeModal = props => {
               borderTopColor: '#99bbe8',
               color: '#15428b',
               fontWeight: 700,
-              // margin: '30px 0 10px 0',
             }}
           >
             承办管理
@@ -627,6 +625,26 @@ const NodeModal = props => {
             })}
             pagination={false}
           />
+          <Divider
+            orientation="left"
+            style={{
+              borderTopColor: '#99bbe8',
+              color: '#15428b',
+              fontWeight: 700,
+            }}
+          >
+            节点抄送人
+          </Divider>
+          <div className={styles.buttonBox} onClick={() => editCC()}>
+            <div className={styles.setButton}>
+              <Tooltip title={CarbonCopyPeopleList.map(item => item.label).join(',')}>
+                <span>{CarbonCopyPeopleList.map(item => item.label).join(',')} </span>
+              </Tooltip>
+            </div>
+            <div className={styles.addIcon}>
+              <PlusOutlined />
+            </div>
+          </div>
         </div>
         <div
           style={{
@@ -751,6 +769,12 @@ const NodeModal = props => {
         onSubumit={e => saveRule(e)}
         flag={1}
       />
+      <PeopleSelector
+        visible={showPersonSelect}
+        personList={CarbonCopyPeopleList}
+        onCancel={() => setShowPersonSelect(false)}
+        onSubumit={e => savePerson(e)}
+      />
     </>
   );
 };

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/NodeModal.less

@@ -22,6 +22,37 @@
   cursor: pointer;
 }
 
+.buttonBox {
+  padding-left: 15px;
+  width: 100%;
+  height: 34px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+
+  .setButton {
+    width: 90%;
+    height: 100%;
+    line-height: 34px;
+    border: 2px solid #6A98FA;
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding: 0 10px;
+
+  }
+
+  .addIcon {
+    height: 100%;
+    flex: 1;
+    border: 2px solid #6A98FA;
+    border-left: 0px;
+    text-align: center;
+  }
+}
+
 .ruleContent {
   width: 100%;
 

src/pages/userCenter/roleManage/SelectUser/NewSelectUser.jsx

@@ -58,7 +58,7 @@ const NewSelectUser = props => {
           value: item.userID,
           groupName: item.OUName,
         }));
-
+        console.log(listCheck, 'listCheck');
         setCheckList(listCheck);
         // 数据处理成checkbox组件需要得形式
         let list = res[1].data.data.map(item => {