fix: '工单抄送，按照条件抄送'

src/components/PeopleSelector/index.jsx

+/* eslint-disable no-else-return */
+/* eslint-disable indent */
 import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { Modal, Input, Button, message, Spin, Pagination, Table } from 'antd';
+import {
+  Modal,
+  Input,
+  Button,
+  message,
+  Spin,
+  Pagination,
+  Tag,
+  Empty,
+  Checkbox,
+  notification,
+} from 'antd';
+import { DesktopOutlined, MobileOutlined, WindowsOutlined } from '@ant-design/icons';
+import { GetRoleUser, GetRoleUserNew } from '@/services/workflow/workflow';
 import { GetGroupUserTree, TestPush } from '@/services/messagemanage/messagemanage';
+import classnames from 'classnames';
+import lodash from 'lodash';
 import styles from './index.less';
 
 import CardCheck from './CardCheck';
 
 const PeopleSelector = props => {
-  const { confirmModal, onCancel, visible, onSubumit, personList } = props;
+  const { confirmModal, onCancel, visible, onSubumit, userIds, roleIds } = props;
   const [allList, setAllist] = useState([]); // 用于展示得数据
-  // const [checkList, setCheckList] = useState([]); // 选中得数据集合
+  const [checkListRoles, setCheckListRoles] = useState([]); // 选中得数据集合
   const [loading, setLoading] = useState(false);
   const [total, setTotal] = useState();
   const [currentPage, setCurrentPage] = useState(1);
@@ -16,20 +33,57 @@ const PeopleSelector = props => {
   const [searchName, setSearchName] = useState();
   const [flag, setFlag] = useState(0);
   const checkList = useRef([]);
+  const [type, setType] = useState('人员');
+  const [roleArr, setRoleArr] = useState([]); // 新角色机构选择列表
+  const [delArr, setDelArr] = useState(new Map()); // 删除了的元素
+  const [selected, setSelected] = useState(new Map()); // 已勾选角色列表
 
   useEffect(() => {
     if (visible) {
+      setType('人员');
       setCurrentPage(1);
-      // setCheckList(personList);
-      checkList.current = personList;
+      checkList.current = userIds;
       getData(searchName, 1, pageSize);
+      if (roleIds.length > 0) {
+        roleIds.forEach(item => {
+          selected.set(item.value, {
+            roleName: item.label,
+            roleId: item.value,
+            type: 2,
+            defauletUserName: '',
+            defaultUserId: [],
+          });
+        });
+        setSelected(selected);
+        let arr = [];
+        selected.forEach((val, key) => {
+          arr.push({ label: val.roleName, value: val.roleId });
+        });
+        setCheckListRoles(arr);
+      }
     } else {
-      // setCheckList([]);
       checkList.current = [];
+      setCheckListRoles([]);
       setAllist([]);
       setSearchName('');
+      setSelected(new Map());
+      setDelArr(new Map());
     }
   }, [visible]);
+
+  const showTypeIcon = item => {
+    if (item.type === 'mobile') {
+      return <MobileOutlined />;
+    }
+    if (item.visibleValue == 'CS') {
+      return <WindowsOutlined />;
+    }
+    if (item.visibleTitle.indexOf('手持') !== -1) {
+      return <MobileOutlined />;
+    }
+    return <DesktopOutlined />;
+  };
+
   // 选中后得回调函数
   const checkCallBack = useCallback(newCheckList => {
     if (newCheckList) {
@@ -46,25 +100,28 @@ const PeopleSelector = props => {
   };
   // 提交勾选的测试人员
   const onFinish = () => {
-    console.log(checkList.current, 'checkList');
-    onSubumit(checkList.current);
+    let role = [];
+    selected.forEach((val, key) => {
+      role.push({ label: val.roleName, value: val.roleId });
+    });
+    let person = checkList.current;
+    onSubumit({ person, role });
   };
   // 搜索
   const onSearch = () => {
     setCurrentPage(1);
-    getData(searchName, 1, pageSize);
-  };
-  // 重置
-  const onReset = () => {
-    setCurrentPage(1);
-    getData('', 1, pageSize);
-    setSearchName('');
+    if (type === '人员') {
+      getData(searchName, 1, pageSize);
+    } else {
+      getRoleData(searchName);
+    }
   };
+
   // 搜索框监听
   const searchChange = e => {
     setSearchName(e.target.value);
   };
-  // 获取数据
+  // 获取人员数据
   const getData = (username, page, pageSizes) => {
     setLoading(true);
     GetGroupUserTree({
@@ -75,7 +132,6 @@ const PeopleSelector = props => {
       .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 => {
@@ -84,7 +140,6 @@ const PeopleSelector = props => {
             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);
                 }
@@ -109,7 +164,6 @@ const PeopleSelector = props => {
               plainOptions: options,
             };
           });
-          console.log(list, 'list');
           setAllist(list);
         } else {
           message.error(res.msg);
@@ -121,14 +175,336 @@ const PeopleSelector = props => {
       });
   };
 
-  const columns = [
-    {
-      title: '已选人员',
-      dataIndex: 'label',
-      key: 'label',
-      width: 300,
-    },
-  ];
+  // 获取角色选择数据
+  const getRoleData = roleName => {
+    roleName = roleName || '';
+    setLoading(true);
+    GetRoleUserNew({
+      roleName,
+    }).then(res => {
+      setLoading(false);
+      if (res.code === 0 && res.data.length) {
+        let list = JSON.parse(JSON.stringify(res.data));
+        list.forEach(item => {
+          if (item.child.length) {
+            item.child.forEach(v => {
+              v.roleList.forEach(vv => {
+                vv.roleID = Number(vv.roleID);
+                if (selected.has(vv.roleID)) {
+                  vv.isChecked = true;
+                } else {
+                  vv.isChecked = false;
+                }
+              });
+            });
+          }
+          item.roleList.forEach(v => {
+            v.roleID = Number(v.roleID);
+            if (selected.has(v.roleID)) {
+              v.isChecked = true;
+            } else {
+              v.isChecked = false;
+            }
+          });
+        });
+        setRoleArr(list);
+      } else {
+        setRoleArr([]);
+        notification.error({
+          message: '提示',
+          duration: 3,
+          description: res.msg,
+        });
+      }
+    });
+  };
+
+  // 删除已选中列表
+  const delSelected = (value, name) => {
+    if (name === '人员') {
+      let list = lodash.cloneDeep(checkList.current);
+      let newList = list.filter(i => i.value != value.value);
+      checkList.current = newList;
+      let newData = allList.map(item => {
+        let indeterminate = false;
+        let checkedList = [];
+        let checkAll = false;
+        let options = item.plainOptions.map(val => {
+          newList.forEach(ele => {
+            if (val.value === ele.value) {
+              checkedList.push(ele.value);
+            }
+          });
+          return {
+            label: val.label,
+            value: val.value,
+          };
+        });
+        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,
+        };
+      });
+      setAllist(newData);
+    } else {
+      let id = value.value;
+      delArr.set(id, selected.get(id));
+      selected.delete(id);
+      setDelArr(delArr);
+      setSelected(selected);
+      let arr = [];
+      selected.forEach((val, key) => {
+        arr.push({ label: val.roleName, value: val.roleId });
+      });
+      setCheckListRoles(arr);
+      let list = JSON.parse(JSON.stringify(roleArr));
+      list.forEach(item => {
+        if (item.child.length) {
+          let newArr = [];
+          item.child[0].roleList.forEach(v => {
+            if (v.roleID === id) {
+              v.isChecked = false;
+            }
+            if (v.isChecked) {
+              newArr.push(v.isChecked);
+            }
+          });
+          item.child[0].isChecked = getState(item.child[0].roleList, newArr);
+          item.child[0].indeterminate = getIndeterminate(item.child[0].roleList, newArr);
+        }
+        item.roleList.forEach(v => {
+          if (v.roleID === id) {
+            v.isChecked = false;
+          }
+        });
+      });
+      setRoleArr(list);
+    }
+  };
+
+  const getState = (list, check) => {
+    if (list.length === check.length && check.length !== 0) {
+      return true;
+    } else if (list.length > check.length && check.length !== 0) {
+      return false;
+    } else {
+      return false;
+    }
+  };
+
+  const getIndeterminate = (list, check) => {
+    if (list.length > check.length && check.length !== 0) {
+      return true;
+    }
+    return false;
+  };
+
+  // 复选框监听事件
+  const selectChange = (e, index, value, name, i, j) => {
+    let list = JSON.parse(JSON.stringify(roleArr));
+    if (name === 'child') {
+      list[i].child[j].roleList[index].isChecked = e.target.checked;
+    } else {
+      list[i].roleList[index].isChecked = e.target.checked;
+    }
+    list.forEach(item => {
+      if (item.child.length) {
+        item.child.forEach(ele => {
+          let arr = [];
+          ele.roleList.forEach(v => {
+            if (v.isChecked) {
+              arr.push(v.isChecked);
+            }
+          });
+          ele.isChecked = getState(ele.roleList, arr);
+          ele.indeterminate = getIndeterminate(ele.roleList, arr);
+        });
+      }
+      let arrList = [];
+      item.roleList.forEach(v => {
+        if (v.isChecked) {
+          arrList.push(v.isChecked);
+        }
+      });
+      item.checkAll = getState(item.roleList, arrList);
+      item.indeterminate = getIndeterminate(item.roleList, arrList);
+    });
+    // 存储勾选角色
+    if (e.target.checked) {
+      // 存储已选角色或站点的默认承办人
+      if (delArr.has(value.roleID)) {
+        selected.set(value.roleID, delArr.get(value.roleID));
+        delArr.delete(value.roleID);
+      } else {
+        selected.set(value.roleID, {
+          roleName: value.roleName,
+          type: 2,
+          roleId: value.roleID,
+          defauletUserName: '',
+          defaultUserId: [],
+        });
+      }
+    } else {
+      delArr.set(value.roleID, selected.get(value.roleID));
+      selected.delete(value.roleID);
+    }
+    let arr = [];
+    selected.forEach((val, key) => {
+      arr.push({ label: val.roleName, value: val.roleId });
+    });
+    setCheckListRoles(arr);
+    setDelArr(delArr);
+    setSelected(selected);
+    setRoleArr(list);
+  };
+
+  // 全选复选框监听事件
+  const selectChangeAll = (e, index, value, num, i) => {
+    let list = JSON.parse(JSON.stringify(roleArr));
+    list[i].child[index].checkAll = e.target.checked;
+    list[i].child[index].indeterminate = false;
+    list[i].child[index].roleList.map(item => {
+      item.isChecked = e.target.checked;
+    });
+    value.roleList.map(val => {
+      if (e.target.checked) {
+        // 存储已选角色或站点的默认承办人
+        if (delArr.has(val.roleID)) {
+          selected.set(val.roleID, delArr.get(val.roleID));
+          delArr.delete(val.roleID);
+        } else {
+          selected.set(val.roleID, {
+            roleName: val.roleName,
+            type: 2,
+            roleId: val.roleID,
+            defauletUserName: '',
+            defaultUserId: [],
+          });
+        }
+      } else {
+        delArr.set(val.roleID, selected.get(val.roleID));
+        selected.delete(val.roleID);
+      }
+    });
+    console.log(list);
+    debugger;
+    let arr = [];
+    selected.forEach((val, key) => {
+      arr.push({ label: val.roleName, value: val.roleId });
+    });
+    setCheckListRoles(arr);
+    setDelArr(delArr);
+    setSelected(selected);
+    setRoleArr(list);
+  };
+
+  // 角色列表样式
+  const roleDom = () => (
+    <>
+      <div className={styles.checkContainer1}>
+        {roleArr.length ? (
+          <div className={styles.checkContents}>
+            {roleArr.map((v, i) => {
+              return (
+                <div className={styles.list} key={v.visibleTitle}>
+                  <div className={styles.parent}>
+                    {/* <Checkbox
+                        checked={v.checkAll}
+                        indeterminate={v.indeterminate}
+                        onChange={e => {
+                          selectChangeAll(e, i, v, '1');
+                        }}
+                      >
+                        <>
+                          <span style={{ color: '#1890ff', marginRight: '10px' }}>
+                            {showTypeIcon(v)}
+                          </span>
+                          <span>{v.visibleTitle}</span>
+                        </>
+                      </Checkbox> */}
+                    <span>
+                      <span style={{ color: '#1890ff', marginRight: '10px' }}>
+                        {showTypeIcon(v)}
+                      </span>
+                      <span>{v.visibleTitle}</span>
+                    </span>
+                  </div>
+                  <div className={styles.childs}>
+                    {v.child.length
+                      ? v.child.map((item, index) => (
+                          <div className={styles.checkGroupContent}>
+                            <div className={styles.topCheckbox}>
+                              <Checkbox
+                                checked={item.isChecked}
+                                indeterminate={item.indeterminate}
+                                onChange={e => {
+                                  selectChangeAll(e, index, item, '2', i);
+                                }}
+                              >
+                                {item.visibleTitle}
+                              </Checkbox>
+                            </div>
+                            <div className={styles.bottomCheckbox}>
+                              {item.roleList.length
+                                ? item.roleList.map((items, indexC) => (
+                                    <div
+                                      key={items.roleID}
+                                      className={styles.check}
+                                      title={items.name}
+                                    >
+                                      <Checkbox
+                                        checked={items.isChecked}
+                                        onChange={e => {
+                                          selectChange(e, indexC, items, 'child', i, index);
+                                        }}
+                                      >
+                                        {items.roleName}
+                                      </Checkbox>
+                                    </div>
+                                  ))
+                                : null}
+                            </div>
+                          </div>
+                        ))
+                      : null}
+                    <div className={styles.checkContent1}>
+                      {v.roleList.length
+                        ? v.roleList.map((item, index) => (
+                            <div key={item.roleID} className={styles.check} title={item.name}>
+                              <Checkbox
+                                checked={item.isChecked}
+                                onChange={e => {
+                                  selectChange(e, index, item, '', i);
+                                }}
+                              >
+                                {item.roleName}
+                              </Checkbox>
+                            </div>
+                          ))
+                        : null}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="未有查找到角色" />
+        )}
+      </div>
+    </>
+  );
+
   return (
     <>
       <Modal
@@ -136,59 +512,119 @@ const PeopleSelector = props => {
         visible={visible}
         onOk={onFinish}
         width="900px"
+        className={styles.pushTestContent}
         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.searchHeader}>
+            <div
+              className={classnames({
+                [styles.people]: true,
+                [styles.peoplePick]: type === '人员',
+              })}
+              onClick={() => {
+                setType('人员');
+                setSearchName('');
+                getData('', 1, pageSize);
+              }}
+            >
+              人员
             </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
+              className={classnames({
+                [styles.people]: true,
+                [styles.peoplePick]: type === '角色',
+              })}
+              onClick={() => {
+                setType('角色');
+                setSearchName('');
+                getRoleData();
+              }}
+            >
+              角色
             </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"
+            <Input.Search
+              value={searchName}
+              placeholder={type === '人员' ? '请输入部门或用户' : '请输入角色'}
+              onChange={searchChange}
+              onSearch={onSearch}
+              className={styles.searchInput}
+              style={{
+                marginLeft: '165px',
+                marginBottom: '4px',
+              }}
             />
+            <div className={styles.list}>已选列表</div>
+            <div className={styles.checkList}>
+              <div className={styles.person} /> 人员
+              <div className={styles.role} />
+              角色
+            </div>
+          </div>
+          <div className={styles.content}>
+            <div className={styles.leftContent}>
+              <div className={styles.checkContainer}>
+                <Spin spinning={loading}>
+                  {type === '人员' ? (
+                    <>
+                      {' '}
+                      {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>
+                      ))}
+                    </>
+                  ) : (
+                    <>{roleDom()}</>
+                  )}
+                </Spin>
+              </div>
+            </div>
+            <div className={styles.tableRight}>
+              {[...checkList.current].length > 0 || checkListRoles.length > 0 ? (
+                <div className={styles.selectContent}>
+                  {[...checkList.current].map(item => (
+                    <div className={styles.selectValue} key={item.value}>
+                      <Tag closable color="cyan" onClose={() => delSelected(item, '人员')}>
+                        {item.label}
+                      </Tag>
+                    </div>
+                  ))}
+                  {checkListRoles.map(val => {
+                    return (
+                      <div className={styles.selectValue} key={val.value}>
+                        <Tag closable color="purple" onClose={() => delSelected(val)}>
+                          {val.label}
+                        </Tag>
+                      </div>
+                    );
+                  })}
+                </div>
+              ) : (
+                <Empty
+                  image={Empty.PRESENTED_IMAGE_SIMPLE}
+                  description={type === '人员' ? '请选择人员' : '请选择角色'}
+                />
+              )}
+            </div>
           </div>
         </div>
-        <div>
+        <div
+          style={{
+            display: type === '人员' ? 'block' : 'none',
+            position: 'absolute',
+            bottom: 15,
+            left: 15,
+          }}
+        >
           {/* 分页 */}
           <Pagination
             total={total}
@@ -199,7 +635,7 @@ const PeopleSelector = props => {
             onChange={paginationChange}
             style={{ width: '100%' }}
             size="small"
-            showQuickJumper
+            // showQuickJumper
             showSizeChanger
           />
         </div>

src/components/PeopleSelector/index.less

 .pushTestContent {
-  display: flex;
+  position: relative;
+  width: 900px;
+  .ant-modal-header {
+    border-bottom: none;
+  }
+  .ant-modal-title {
+    margin-top: 10px;
+  }
+  .ant-modal-body {
+    padding-bottom: 0;
+  }
+  :global {
+    ::-webkit-scrollbar-thumb {
+      border-radius: 0;
+    }
+    ::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  .content {
+    display: flex;
+  }
   .searchHeader {
     display: flex;
+    align-items: flex-end;
+    background-color: #f2f1f1;
+    height: 40px;
+    margin-left: -15px;
+    margin-right: -15px;
+    line-height: 40px;
+    .people {
+      width: 62px;
+      height: 38px;
+      color: #666666;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+    }
+    .peoplePick {
+      background: #fff;
+      width: 62px;
+      height: 38px;
+      color: #50a9f1;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+    }
+    .list {
+      height: 40px;
+      line-height: 40px;
+      margin-left: 45px;
+      font-weight: 700;
+      font-size: 14px;
+      color: #00070d;
+    }
+    .searchInput {
+      width: 200px;
+      z-index: 1;
+
+      .ant-input,
+      .ant-input-affix-wrapper {
+        border-top-left-radius: 20px;
+        border-bottom-left-radius: 20px;
+      }
+
+      .ant-input-group-addon {
+        border-top-right-radius: 20px;
+        border-bottom-right-radius: 20px;
+      }
+
+      .ant-input-search-button {
+        width: 40px;
+        border-top-right-radius: 20px !important;
+        border-bottom-right-radius: 20px !important;
+      }
+    }
+    .checkList {
+      display: flex;
+      align-items: center;
+
+      .person {
+        width: 10px;
+        height: 3px;
+        margin-right: 5px;
+        background-color: #87e8de;
+        margin-left: 20px;
+      }
+      .role {
+        width: 10px;
+        height: 3px;
+        margin-right: 5px;
+        background-color: #a785dd;
+        margin-left: 20px;
+      }
+    }
+    .person {
+      width: 10px;
+      height: 3px;
+      margin-right: 5px;
+      background-color: #87e8de;
+      margin-left: 20px;
+    }
+    .role {
+      width: 10px;
+      height: 3px;
+      margin-right: 5px;
+      background-color: #a785dd;
+      margin-left: 20px;
+    }
   }
   .checkContainer {
     height: 500px;
     width: 500px;
     overflow-y: scroll;
-    margin: 20px 0;
+    margin: 0 0 10px 0;
     padding-right: 5px;
     .checkContent {
       display: flex;
@@ -34,6 +145,7 @@
         .ant-checkbox-wrapper {
           min-width: 150px;
           margin-left: 0;
+          margin-bottom: 5px;
         }
         // .ant-checkbox-group-item {
         //   min-width: 150px !important;
@@ -48,7 +160,167 @@
       }
     }
   }
+  .checkContainer1 {
+    height: 500px;
+    overflow-y: scroll;
+
+    .checkContents {
+      .list {
+        border: 1px solid #c2cdfd;
+        border-radius: 5px;
+        margin-top: 20px;
+        .parent {
+          margin: -20px 0 0 20px;
+          height: 38px;
+          line-height: 38px;
+          transition: all 0.3s;
+          overflow: hidden;
+          span {
+            color: grey;
+            font-size: 12px;
+            background: #fff;
+          }
+          .imgDown {
+            display: inline-block;
+            position: relative;
+            top: -2px;
+            margin-right: 5px;
+            &:hover {
+              cursor: pointer;
+            }
+          }
+        }
+        .childs {
+          overflow: hidden;
+          width: 490px;
+          transition: all 0.3s;
+          .child {
+            overflow: hidden;
+            height: 38px;
+            line-height: 38px;
+            padding-left: 30px;
+            border-bottom: 1px solid #f2f2f2;
+            &:hover {
+              color: #0087f7;
+              cursor: pointer;
+            }
+            &[active='true'] {
+              color: #0087f7;
+            }
+          }
+        }
+      }
+
+      .checkContent1 {
+        display: flex;
+        flex-wrap: wrap;
+        margin-left: 15px;
+        width: 475px;
+        margin-top: 0px;
+        flex-direction: row;
+        // border: 1px solid #c2cdfd;
+        // border-radius: 5px;
+        min-height: 50px;
+        padding: 10px 10px 0px 6px;
+
+        .check {
+          width: 130px;
+          margin-bottom: 10px;
+          margin-right: 10px;
+
+          .ant-checkbox-wrapper span {
+            max-width: 130px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
+      .checkGroupContent {
+        display: flex;
+        flex-wrap: wrap;
+        width: 460px;
+        flex-direction: row;
+        border: 1px solid #c2cdfd;
+        border-radius: 5px;
+        margin: 10px 15px;
+        margin-right: 5px;
+        min-height: 50px;
+        padding: 0 10px 10px 16px;
+
+        .ant-checkbox-wrapper {
+          background-color: #fff;
+        }
+
+        .topCheckbox {
+          height: 20px;
+          margin: -10px 0 0 20px;
+          line-height: 20px;
+          > span {
+            background-color: white;
+          }
+        }
+
+        .topCheckbox > label :hover {
+          font-weight: 600;
+        }
+
+        .bottomCheckbox {
+          display: flex;
+          flex-wrap: wrap;
+          margin-left: -88px;
+          margin-top: 15px;
+          .ant-checkbox-wrapper {
+            display: flex;
+            margin-left: 0;
+            width: 130px;
+            margin-right: 10px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin-top: 10px;
+            .ant-checkbox + span {
+              display: flex;
+            }
+          }
+          .fontlabel {
+            display: inline-block;
+            width: 130px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            // white-space: nowrap;
+          }
+
+          // .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;
+    padding: 10px 0px 10px 10px;
+    border-left: 1px solid #f0f0f0;
+    height: 510px;
+    width: 370px;
+    overflow-y: scroll;
+    .selectContent {
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: row;
+
+      .selectValue {
+        margin-bottom: 15px;
+      }
+    }
   }
 }

src/components/RuleConfig/index.jsx

+/* eslint-disable no-else-return */
 import React, { useEffect, useState, useRef } from 'react';
 import { RuleValidation, RuleValidationPost } from '@/services/workflow/workflow';
 import { Modal, Input, Form, message, Dropdown, Menu } from 'antd';
@@ -9,6 +10,7 @@ const fnList = [
   { label: '是否为工作时间', value: '$fn.isWorkTime()' },
   { label: '上报人工单统计', value: '$fn.caseNum()' },
 ];
+
 const RuleConfig = props => {
   const {
     visible,
@@ -26,6 +28,22 @@ const RuleConfig = props => {
   const ruleText = useRef();
   const chooseIndex = useRef(0);
   const [form] = Form.useForm();
+
+  const options = val => {
+    if (val === '撤回') {
+      return `$action.nodeAction='撤回'`;
+    } else if (val === '回退') {
+      return `$action.nodeAction='回退'`;
+    } else if (val === '转办') {
+      return `$action.nodeAction='转办'`;
+    } else if (val === '移交') {
+      return `$action.nextNodeName`;
+    } else if (val === '挂起') {
+      return `$action.nodeAction='挂起'`;
+    } else if (val === '解挂') {
+      return `$action.nodeAction='解挂'`;
+    }
+  };
   useEffect(() => {
     if (visible) {
       setExpandedKey(fieldList?.[0]?.TableName);
@@ -68,7 +86,13 @@ const RuleConfig = props => {
   });
   const onSelect = (prop, treeNode) => {
     if (!treeNode.node.children) {
-      insert(`{${treeNode.node.key}}`);
+      let name = treeNode.node.key.split('.')[0];
+      if (name === '操作动作') {
+        let aa = treeNode.node.title;
+        insert(options(aa));
+      } else {
+        insert(`{${treeNode.node.key}}`);
+      }
     }
     setCurrentSelectId(prop[0]);
   };
@@ -115,7 +139,7 @@ const RuleConfig = props => {
             />
           </div>
           <div className={styles.rightContent}>
-            {flag == 1 && <div className={styles.title}>符合以下条件时工单扭转到对应的节点</div>}
+            {/* {flag == 1 && <div className={styles.title}>符合以下条件时工单扭转到对应的节点</div>} */}
             <div className={styles.textAreaBox}>
               {flag == 1 && (
                 <Dropdown overlay={fnListRender} placement="bottom" arrow>

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

@@ -222,6 +222,31 @@ const FlowChart = props => {
         label: ele.userName,
         value: ele.userID,
       }));
+      if (obj.CCRuleList?.length > 0) {
+        obj.CCRuleList.map(i => {
+          if (i.UserIds?.length > 0) {
+            i.UserList = i.UserIds.map(ele => ({
+              label: ele.UserName,
+              value: ele.UserID,
+            }));
+            i.UserIds = i.UserIds.map(ele => ele.UserID).toString();
+          } else {
+            i.UserList = [];
+            i.UserIds = '';
+          }
+          if (i.RoleIds?.length > 0) {
+            i.RoleList = i.RoleIds.map(ele => ({
+              label: ele.UserName,
+              value: ele.UserID,
+            }));
+            i.RoleIds = i.RoleIds.map(ele => ele.UserID).toString();
+          } else {
+            i.RoleList = [];
+            i.RoleIds = '';
+          }
+          i.PersonList = [...i.UserList, ...i.RoleList];
+        });
+      }
       if (obj.points === '') {
         if (obj.NodeType === '1') {
           obj.points = `${(index * 200).toString()}" 100"`;
@@ -344,6 +369,7 @@ const FlowChart = props => {
       RuleList: [],
       roleList: [],
       CarbonCopyPeopleList: [],
+      CCRuleList: [],
       ExtendPageList: [],
       FlowNodeBackfillConfigs: [],
       FlowTimerList: [],

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

@@ -267,6 +267,31 @@ const FlowChart = props => {
         label: ele.userName,
         value: ele.userID,
       }));
+      if (obj.CCRuleList?.length > 0) {
+        obj.CCRuleList.map(i => {
+          if (i.UserIds?.length > 0) {
+            i.UserList = i.UserIds.map(ele => ({
+              label: ele.UserName,
+              value: ele.UserID.toString(),
+            }));
+            i.UserIds = i.UserIds.map(ele => ele.UserID).toString();
+          } else {
+            i.UserList = [];
+            i.UserIds = '';
+          }
+          if (i.RoleIds?.length > 0) {
+            i.RoleList = i.RoleIds.map(ele => ({
+              label: ele.UserName,
+              value: ele.UserID,
+            }));
+            i.RoleIds = i.RoleIds.map(ele => ele.UserID).toString();
+          } else {
+            i.RoleList = [];
+            i.RoleIds = '';
+          }
+          i.PersonList = [...i.UserList, ...i.RoleList];
+        });
+      }
       if (obj.points === '') {
         if (obj.NodeType === '1') {
           obj.points = `${(index * 200).toString()}" 100"`;
@@ -418,12 +443,12 @@ const FlowChart = props => {
       RuleList: [],
       roleList: [],
       CarbonCopyPeopleList: [],
+      CCRuleList: [],
       ExtendPageList: [],
       FlowNodeBackfillConfigs: [],
       FlowTimerList: [],
       TurnOnCc: 1,
       NodeAliasName: '',
-
       TableName: '',
       Fields: '',
       WebPage: '',
@@ -1270,9 +1295,13 @@ const FlowChart = props => {
     //   });
     //   return;
     // }
+
     let list = new Set([]);
     let errorList = new Set();
     diagramObj.nodeDataArray.forEach(item => {
+      if ((item.NodeType !== '20' || item.NodeType !== '21') && item.RuleList) {
+        item.RuleList = [];
+      }
       if (item.NodeType === '1' || item.NodeType === '1' || item.NodeType === '1') {
         if (!item.TableName || !item.Fields) {
           errorList.add(item.NodeName);
@@ -1282,12 +1311,10 @@ const FlowChart = props => {
         item.RuleList.forEach(ele => {
           if (!ele.RuleName) {
             list.add(item.NodeName);
-
             return;
           }
           if (!ele.NextNodeId && ele.NextNodeId !== 0) {
             list.add(item.NodeName);
-
             return;
           }
           if (!ele.RuleContent) {

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

@@ -70,7 +70,7 @@ const NodeModal = props => {
         return;
       }
 
-      if (!obj.Fields&&editMsg.NodeType==1) {
+      if (!obj.Fields && editMsg.NodeType == 1) {
         message.error('请选择编辑字段');
         return;
       }
@@ -252,7 +252,13 @@ const NodeModal = props => {
             {/* 承办管理 */}
             <ConfgUndertake ref={refConfgUndertake} nodeChage={nodeChage} editMsg={editMsg} />
             {/* 节点抄送人 */}
-            <ConfigCopyPerson ref={refConfigCopyPerson} nodeChage={nodeChage} editMsg={editMsg} />
+            <ConfigCopyPerson
+              ref={refConfigCopyPerson}
+              nodeChage={nodeChage}
+              flowID={flowID}
+              editMsg={editMsg}
+              flowData={flowData}
+            />
           </div>
           {/* 子流程配置 */}
           {editMsg.NodeType === '30' && (

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/nodeModalComponents/ConfigCopyPerson.jsx

 import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
-import { Divider, Tooltip, Switch } from 'antd';
-import { PlusOutlined } from '@ant-design/icons';
+import { Divider, Tooltip, Switch, Select, Input, message } from 'antd';
+import lodash from 'lodash';
+import { PlusOutlined, PlusCircleOutlined, DeleteOutlined } from '@ant-design/icons';
+import RuleConfig from '@/components/RuleConfig';
 import PeopleSelector from '@/components/PeopleSelector';
+import { GetFormDataSource, GetRoleUserNew } from '@/services/workflow/workflow';
 import styles from '../NodeModal.less';
 
+let chnNumChar = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
+let chnUnitSection = ['', '万', '亿', '万亿', '亿亿'];
+let chnUnitChar = ['', '十', '百', '千'];
+
 const ConfigCopyPerson = (props, ref) => {
-  const { nodeChage, editMsg } = props;
+  const { nodeChage, editMsg, flowID, flowData } = props;
   const [showPersonSelect, setShowPersonSelect] = useState(false); // 是否显示人员选择器
-  const CarbonCopyPeopleList = useRef([]); // 抄送人列表
   const TurnOnCc = useRef(0);
+  const [fieldList, setFieldList] = useState([]); // 当规则字段
+  const [ruleIndex, setRuleIndex] = useState(); // 编辑当前规则索引
+  const allFieldList = useRef([]); // 所有字段列表
+  const talbeList = useRef([]);
+  const [showRule, setShowRule] = useState(false); // 是否显示节点扭转规则弹窗
+  const RuleList = useRef([]); // 规则配置列表
   const [flag, setFlag] = useState(0); // 用于刷新界面
+
   useImperativeHandle(ref, () => ({
     getParmar,
   }));
+
   useEffect(() => {
-    // if(editMsg)
     if (JSON.stringify(editMsg) === '{}') {
       return;
     }
-    CarbonCopyPeopleList.current = [];
+    allFieldList.current = [];
+    talbeList.current = [];
     TurnOnCc.current = 0;
-    CarbonCopyPeopleList.current = editMsg.CarbonCopyPeopleList;
     TurnOnCc.current = editMsg.TurnOnCc;
+    RuleList.current = editMsg.CCRuleList || [];
+    // 获取表数据
+    GetFormDataSource({ flowID }).then(res => {
+      let list = new Set(talbeList.current);
+      allFieldList.current = [];
+      res.data.forEach(item => {
+        if (!allFieldList.current.some(ele => ele.TableName === item.TableName)) {
+          let data = item.TableFieldNames.filter(i => i !== '关联表单');
+          allFieldList.current.push({
+            TableFieldNames: data,
+            TableName: item.TableName,
+          });
+        }
+        list.add(item.TableName);
+      });
+      talbeList.current = [...list];
+    });
     setFlag(flag + 1);
   }, [editMsg]);
-  const getParmar = () => ({ CarbonCopyPeopleList: CarbonCopyPeopleList.current });
-  // 选择人员回填
-  const savePerson = e => {
-    console.log(e);
-    // setCarbonCopyPeopleList(e);
-    CarbonCopyPeopleList.current = e;
-    nodeChage('CarbonCopyPeopleList', CarbonCopyPeopleList.current);
-    setShowPersonSelect(false);
-  };
+  const getParmar = () => ({ CCRuleList: RuleList.current });
+
   // 配置当前节点抄送人
-  const editCC = () => {
+  const editCC = index => {
+    setRuleIndex(index);
     setShowPersonSelect(true);
   };
+
   const onChange = e => {
-    console.log(e, 'e');
     if (e) {
       TurnOnCc.current = 1;
     } else {
       TurnOnCc.current = 0;
-      // CarbonCopyPeopleList.current = [];
-      // nodeChage('CarbonCopyPeopleList', CarbonCopyPeopleList.current);
     }
-    console.log(TurnOnCc.current);
     nodeChage('TurnOnCc', TurnOnCc.current);
     setFlag(flag + 1);
   };
+
+  // 规则回填
+  const saveRule = e => {
+    let list = JSON.parse(JSON.stringify(RuleList.current));
+    list[ruleIndex].RuleContent = e;
+    RuleList.current = list;
+    nodeChage('CCRuleList', list);
+    setShowRule(false);
+  };
+
+  // 选择人员回填
+  const savePerson = val => {
+    let list = JSON.parse(JSON.stringify(RuleList.current));
+    let useId = val.person?.map(i => i.value);
+    let roleId = val.role?.map(i => i.value);
+    list[ruleIndex].UserIds = useId.toString();
+    list[ruleIndex].RoleIds = roleId.toString();
+    list[ruleIndex].PersonList = [...val.person, ...val.role];
+    list[ruleIndex].UserList = val.person;
+    list[ruleIndex].RoleList = val.role;
+    RuleList.current = list;
+    nodeChage('CCRuleList', list);
+    setShowPersonSelect(false);
+  };
+
+  // 网关表单配置监听
+  const formChage = (e, index, field) => {
+    let list = lodash.cloneDeep(RuleList.current);
+    if (field === 'RuleName') {
+      e.persist();
+      list[index][field] = e.target.value;
+    }
+    RuleList.current = list;
+    nodeChage('CCRuleList', list);
+    setFlag(flag + 1);
+  };
+
+  // 配置当前规则
+  const editRule = (msg, index) => {
+    let listfleld = talbeList.current;
+    let list = [
+      {
+        TableFieldNames: [
+          '上报人名称',
+          '上报人部门',
+          '上报站点',
+          '处理站点',
+          '更新时间',
+          '上报时间',
+        ],
+        TableName: '内部字段',
+      },
+    ];
+    listfleld.forEach(item => {
+      let obj = allFieldList.current.find(ele => ele.TableName === item);
+      if (obj.TableName && obj.TableFieldNames?.length > 0) {
+        list.push({
+          TableFieldNames: obj.TableFieldNames,
+          TableName: obj.TableName,
+        });
+      }
+    });
+    list.push({
+      TableFieldNames: ['撤回', '回退', '转办', '移交', '挂起', '解挂'],
+      TableName: '操作动作',
+    });
+    setFieldList(list);
+    setRuleIndex(index);
+    setShowRule(true);
+  };
+
+  // 删除规则
+  const deleRule = index => {
+    let list = JSON.parse(JSON.stringify(RuleList.current));
+    list.splice(index, 1);
+    RuleList.current = list;
+    nodeChage('CCRuleList', list);
+    setFlag(flag + 1);
+  };
+  // 数字转中文
+  const SectionToChinese = section => {
+    let strIns = '';
+    let chnStr = '';
+    let unitPos = 0;
+    let zero = true;
+    while (section > 0) {
+      let v = section % 10;
+      if (v === 0) {
+        if (!zero) {
+          zero = true;
+          chnStr = chnNumChar[v] + chnStr;
+        }
+      } else {
+        zero = false;
+        strIns = chnNumChar[v];
+        strIns += chnUnitChar[unitPos];
+        chnStr = strIns + chnStr;
+      }
+      // eslint-disable-next-line no-plusplus
+      unitPos++;
+      section = Math.floor(section / 10);
+    }
+    return chnStr;
+  };
+  // 数字转中文
+  const NumberToChinese = num => {
+    let unitPos = 0;
+    let strIns = '';
+    let chnStr = '';
+    let needZero = false;
+
+    if (num === 0) {
+      return chnNumChar[0];
+    }
+
+    while (num > 0) {
+      let section = num % 10000;
+      if (needZero) {
+        chnStr = chnNumChar[0] + chnStr;
+      }
+      strIns = SectionToChinese(section);
+      strIns += section !== 0 ? chnUnitSection[unitPos] : chnUnitSection[0];
+      chnStr = strIns + chnStr;
+      needZero = section < 1000 && section > 0;
+      num = Math.floor(num / 10000);
+      // eslint-disable-next-line no-plusplus
+      unitPos++;
+    }
+
+    return chnStr;
+  };
+
+  // 添加规则
+  const addRule = () => {
+    let list = JSON.parse(JSON.stringify(RuleList.current));
+    list.push({
+      RuleContent: '',
+      RuleName: '',
+      PersonList: [],
+      UserIds: [],
+      RoleIds: [],
+      UserList: [],
+      RoleList: [],
+    });
+    RuleList.current = list;
+    nodeChage('CCRuleList', list);
+    setFlag(flag + 1);
+  };
+
   return (
     <div>
       <Divider
@@ -70,31 +240,105 @@ const ConfigCopyPerson = (props, ref) => {
           onChange={onChange}
         />
       </div>
+      <div className={styles.titleBox}>
+        当开启”允许抄送“后，本节点具备抄送功能： 配置不同的抄送规则，可抄送给指定人员；
+        当不配置规则的时候，则默认本届点任何办理操作都会抄送给指定人员。
+      </div>
       <div
-        className={styles.buttonBox}
+        className={styles.btnAddRule}
+        onClick={addRule}
         style={{ display: TurnOnCc.current === 1 ? 'flex' : 'none' }}
-        onClick={() => editCC()}
       >
-        <div
-          className={styles.setButton}
-          style={{ textAlign: CarbonCopyPeopleList?.current.length > 0 ? 'left' : 'center' }}
-        >
-          <Tooltip title={CarbonCopyPeopleList?.current.map(item => item.label).join(',')}>
-            <span>
-              {CarbonCopyPeopleList?.current.length > 0
-                ? CarbonCopyPeopleList?.current.map(item => item.label).join(',')
-                : '选择抄送人'}
-            </span>
-          </Tooltip>
-        </div>
-        <div className={styles.addIcon}>
-          <PlusOutlined />
-        </div>
+        <PlusCircleOutlined style={{ marginRight: '10px' }} />
+        添加规则
       </div>
+      <div className={styles.ruleContent}>
+        {RuleList.current.map((item, index) => (
+          <div className={styles.ruleBox} key={index}>
+            <div
+              className={styles.ruleTitle}
+              style={{ display: TurnOnCc.current === 1 ? 'flex' : 'none' }}
+            >
+              <div className={styles.textContet}>规则{NumberToChinese(index + 1)}</div>
+              <DeleteOutlined style={{ cursor: 'pointer' }} onClick={() => deleRule(index)} />
+            </div>
+            <div
+              className={styles.formBox}
+              style={{ display: TurnOnCc.current === 1 ? 'flex' : 'none' }}
+            >
+              <div className={styles.label}>规则名称：</div>
+              <div className={styles.item}>
+                <Input
+                  style={{ width: '100%' }}
+                  value={item.RuleName}
+                  placeholder="请输入规则名称"
+                  onChange={e => {
+                    formChage(e, index, 'RuleName');
+                  }}
+                />
+              </div>
+            </div>
+            <div
+              className={styles.buttonBox}
+              style={{ display: TurnOnCc.current === 1 ? 'flex' : 'none', marginBottom: '10px' }}
+              onClick={() => editCC(index)}
+            >
+              <div
+                className={styles.setButton}
+                style={{ textAlign: item.PersonList ? 'left' : 'center' }}
+              >
+                <Tooltip
+                  title={
+                    item.PersonList?.length > 0 &&
+                    item.PersonList?.map(item => item.label).join(',')
+                  }
+                >
+                  <span>
+                    {item.PersonList?.length > 0
+                      ? item.PersonList?.map(item => item.label).join(',')
+                      : '选择抄送人'}
+                  </span>
+                </Tooltip>
+              </div>
+              <div className={styles.addIcon}>
+                <PlusOutlined />
+              </div>
+            </div>
+            <div
+              className={styles.buttonBox}
+              onClick={() => editRule(item, index)}
+              style={{ display: TurnOnCc.current === 1 ? 'flex' : 'none' }}
+            >
+              <div
+                className={styles.setButton}
+                style={{ textAlign: item.RuleContent ? 'left' : 'center' }}
+              >
+                <Tooltip title={item.RuleContent}>
+                  <span>{item.RuleContent ? item.RuleContent : '设置条件'} </span>
+                  {/* <span>{item.RuleContent} </span> */}
+                </Tooltip>
+              </div>
+              <div className={styles.addIcon}>
+                <PlusOutlined />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+      <RuleConfig
+        RuleContent={RuleList.current[ruleIndex]?.RuleContent}
+        fieldList={fieldList}
+        visible={showRule}
+        handleCancel={() => setShowRule(false)}
+        onSubumit={e => saveRule(e)}
+        flag={1}
+        flowID={flowID}
+      />
 
       <PeopleSelector
         visible={showPersonSelect}
-        personList={CarbonCopyPeopleList.current}
+        userIds={RuleList.current[ruleIndex]?.UserList}
+        roleIds={RuleList.current[ruleIndex]?.RoleList}
         onCancel={() => setShowPersonSelect(false)}
         onSubumit={e => savePerson(e)}
       />