feat: 抄送人新增环境变量

src/components/PeopleSelector/index.jsx

@@ -23,7 +23,8 @@ import styles from './index.less';
 import CardCheck from './CardCheck';
 
 const PeopleSelector = props => {
-  const { confirmModal, onCancel, visible, onSubumit, userIds, roleIds } = props;
+  const { confirmModal, onCancel, visible, onSubumit, userIds, roleIds, env } = props;
+  console.log('props', props)
   const [allList, setAllist] = useState([]); // 用于展示得数据
   const [checkListRoles, setCheckListRoles] = useState([]); // 选中得数据集合
   const [loading, setLoading] = useState(false);
@@ -32,6 +33,7 @@ const PeopleSelector = props => {
   const [pageSize, setPageSize] = useState(10);
   const [searchName, setSearchName] = useState();
   const [flag, setFlag] = useState(0);
+  const [envList, setEnvList] = useState([])
   const checkList = useRef([]);
   const [type, setType] = useState('人员');
   const [roleArr, setRoleArr] = useState([]); // 新角色机构选择列表
@@ -43,6 +45,7 @@ const PeopleSelector = props => {
       setType('人员');
       setCurrentPage(1);
       checkList.current = userIds;
+      setEnvList(env?.split(',') || [])
       getData(searchName, 1, pageSize);
       if (roleIds.length > 0) {
         roleIds.forEach(item => {
@@ -105,7 +108,7 @@ const PeopleSelector = props => {
       role.push({ label: val.roleName, value: val.roleId });
     });
     let person = checkList.current;
-    onSubumit({ person, role });
+    onSubumit({ person, role, env: envList.join(',') });
   };
   // 搜索
   const onSearch = () => {
@@ -292,6 +295,10 @@ const PeopleSelector = props => {
     }
   };
 
+  const delSelectedEnv = (item) => {
+    setEnvList(envList.filter(v => v !== item))
+  }
+
   const getState = (list, check) => {
     if (list.length === check.length && check.length !== 0) {
       return true;
@@ -544,6 +551,19 @@ const PeopleSelector = props => {
             >
               角色
             </div>
+            <div
+              className={classnames({
+                [styles.people]: true,
+                [styles.peoplePick]: type === '环境变量',
+              })}
+              onClick={() => {
+                setType('环境变量');
+                setSearchName('');
+                // getRoleData();
+              }}
+            >
+              环境变量
+            </div>
             <Input.Search
               value={searchName}
               placeholder={type === '人员' ? '请输入部门或用户' : '请输入角色'}
@@ -551,15 +571,15 @@ const PeopleSelector = props => {
               onSearch={onSearch}
               className={styles.searchInput}
               style={{
-                marginLeft: '165px',
+                marginLeft: '156px',
                 marginBottom: '4px',
               }}
             />
             <div className={styles.list}>已选列表</div>
             <div className={styles.checkList}>
-              <div className={styles.person} /> 人员
-              <div className={styles.role} />
-              角色
+              <div className={styles.person} />人员
+              <div className={styles.role} />角色
+              <div className={styles.env} />环境变量
             </div>
           </div>
           <div className={styles.content}>
@@ -568,7 +588,6 @@ const PeopleSelector = props => {
                 <Spin spinning={loading}>
                   {type === '人员' ? (
                     <>
-                      {' '}
                       {allList.map((item, index) => (
                         <div className={styles.checkBoxContent} key={item.groupId}>
                           <CardCheck
@@ -580,8 +599,12 @@ const PeopleSelector = props => {
                         </div>
                       ))}
                     </>
-                  ) : (
-                    <>{roleDom()}</>
+                  ) : (type === '角色') ? roleDom() : (
+                    <div style={{ padding: '10px' }}>
+                      <Checkbox.Group value={envList} onChange={(value) => setEnvList(value)}>
+                        <Checkbox value={'发起人'}>发起人</Checkbox>
+                      </Checkbox.Group>
+                    </div>
                   )}
                 </Spin>
               </div>
@@ -596,15 +619,28 @@ const PeopleSelector = props => {
                       </Tag>
                     </div>
                   ))}
-                  {checkListRoles.map(val => {
-                    return (
-                      <div className={styles.selectValue} key={val.value}>
-                        <Tag closable color="purple" onClose={() => delSelected(val)}>
-                          {val.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>
+                      );
+                    })
+                  }
+                  {
+                    envList.map(val => {
+                      return (
+                        <div className={styles.selectValue} key={val}>
+                          <Tag closable color="green" onClose={() => delSelectedEnv(val)}>
+                            {val}
+                          </Tag>
+                        </div>
+                      );
+                    })
+                  }
                 </div>
               ) : (
                 <Empty

src/components/PeopleSelector/index.less

 .pushTestContent {
   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;
@@ -29,8 +36,9 @@
     margin-left: -15px;
     margin-right: -15px;
     line-height: 40px;
+
     .people {
-      width: 62px;
+      width: 70px;
       height: 38px;
       color: #666666;
       display: flex;
@@ -38,10 +46,15 @@
       justify-content: center;
       border-top-left-radius: 5px;
       border-top-right-radius: 5px;
+
+      &:hover {
+        cursor: pointer;
+      }
     }
+
     .peoplePick {
       background: #fff;
-      width: 62px;
+      width: 70px;
       height: 38px;
       color: #50a9f1;
       text-align: center;
@@ -51,14 +64,16 @@
       border-top-left-radius: 5px;
       border-top-right-radius: 5px;
     }
+
     .list {
       height: 40px;
       line-height: 40px;
-      margin-left: 45px;
+      margin-left: 20px;
       font-weight: 700;
       font-size: 14px;
       color: #00070d;
     }
+
     .searchInput {
       width: 200px;
       z-index: 1;
@@ -80,6 +95,7 @@
         border-bottom-right-radius: 20px !important;
       }
     }
+
     .checkList {
       display: flex;
       align-items: center;
@@ -91,6 +107,7 @@
         background-color: #87e8de;
         margin-left: 20px;
       }
+
       .role {
         width: 10px;
         height: 3px;
@@ -98,7 +115,16 @@
         background-color: #a785dd;
         margin-left: 20px;
       }
+
+      .env {
+        width: 10px;
+        height: 3px;
+        margin-right: 5px;
+        background-color: #90c759;
+        margin-left: 20px;
+      }
     }
+
     .person {
       width: 10px;
       height: 3px;
@@ -106,6 +132,7 @@
       background-color: #87e8de;
       margin-left: 20px;
     }
+
     .role {
       width: 10px;
       height: 3px;
@@ -114,12 +141,14 @@
       margin-left: 20px;
     }
   }
+
   .checkContainer {
     height: 500px;
     width: 500px;
     overflow-y: scroll;
     margin: 0 0 10px 0;
     padding-right: 5px;
+
     .checkContent {
       display: flex;
       width: 100%;
@@ -129,24 +158,30 @@
       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 {
+
+      .topCheckbox>label :hover {
         font-weight: 600;
       }
+
       .bottomCheckbox {
         margin-top: 10px;
+
         .ant-checkbox-wrapper {
           min-width: 150px;
           margin-left: 0;
           margin-bottom: 5px;
         }
+
         // .ant-checkbox-group-item {
         //   min-width: 150px !important;
         // }
@@ -154,12 +189,14 @@
         //   min-width: 150px !important;
         // }
       }
+
       .checkdiv {
         display: flex;
         flex-wrap: wrap;
       }
     }
   }
+
   .checkContainer1 {
     height: 500px;
     overflow-y: scroll;
@@ -169,41 +206,49 @@
         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;
             }
@@ -236,6 +281,7 @@
           }
         }
       }
+
       .checkGroupContent {
         display: flex;
         flex-wrap: wrap;
@@ -256,12 +302,13 @@
           height: 20px;
           margin: -10px 0 0 20px;
           line-height: 20px;
-          > span {
+
+          >span {
             background-color: white;
           }
         }
 
-        .topCheckbox > label :hover {
+        .topCheckbox>label :hover {
           font-weight: 600;
         }
 
@@ -270,6 +317,7 @@
           flex-wrap: wrap;
           // margin-left: -88px;
           margin-top: 15px;
+
           .ant-checkbox-wrapper {
             display: flex;
             margin-left: 0;
@@ -279,10 +327,12 @@
             text-overflow: ellipsis;
             white-space: nowrap;
             margin-top: 10px;
-            .ant-checkbox + span {
+
+            .ant-checkbox+span {
               display: flex;
             }
           }
+
           .fontlabel {
             display: inline-block;
             width: 130px;
@@ -306,6 +356,7 @@
       }
     }
   }
+
   .tableRight {
     margin-left: 10px;
     padding: 10px 0px 10px 10px;
@@ -313,6 +364,7 @@
     height: 510px;
     width: 370px;
     overflow-y: scroll;
+
     .selectContent {
       display: flex;
       flex-wrap: wrap;
@@ -323,4 +375,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file

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

@@ -91,6 +91,7 @@ const ConfigCopyPerson = (props, ref) => {
     list[ruleIndex].PersonList = [...val.person, ...val.role];
     list[ruleIndex].UserList = val.person;
     list[ruleIndex].RoleList = val.role;
+    list[ruleIndex].Env = val.env
     RuleList.current = list;
     nodeChage('CCRuleList', list);
     setShowPersonSelect(false);
@@ -207,6 +208,7 @@ const ConfigCopyPerson = (props, ref) => {
   const addRule = () => {
     let list = JSON.parse(JSON.stringify(RuleList.current));
     list.push({
+      Env: '',
       RuleContent: '',
       RuleName: '',
       PersonList: [],
@@ -337,6 +339,7 @@ const ConfigCopyPerson = (props, ref) => {
 
       <PeopleSelector
         visible={showPersonSelect}
+        env={RuleList.current[ruleIndex]?.Env}
         userIds={RuleList.current[ruleIndex]?.UserList}
         roleIds={RuleList.current[ruleIndex]?.RoleList}
         onCancel={() => setShowPersonSelect(false)}