fix:指派对象弹窗搜索、左树右选中项关联修改

src/modules/task-center/train-task/modal/ChooseAssignorModal.jsx

@@ -2,7 +2,7 @@
  * @Author: yuananting
  * @Date: 2021-08-05 17:09:36
  * @LastEditors: yuananting
- * @LastEditTime: 2021-08-18 15:41:13
+ * @LastEditTime: 2021-08-18 16:23:22
  * @Description: 新建培训任务-选择指派学员
  * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
@@ -38,7 +38,7 @@ function ChooseAssignorModal(props) {
   const [structureData, setStructureData] = useState([]);
   const [activeKey, setActiveKey] = useState('departMentTab');
   const [checkedAssignorList, setCheckedAssignorList] = useState(props.currentAssignorList || []); // 勾选的指派学员
-  const [checkedAssignorKeys, setCheckedAssignorKeys] = useState(handleCheckedKeys(props.currentAssignorList, []));
+  const [checkedAssignorKeys, setCheckedAssignorKeys] = useState(handleCheckedKeys(props.currentAssignorList, props.currentAssignorList, []));
   const [queryName, setQueryName] = useState(''); // 搜索框内的值
   const [departmentUserVOList, setDepartmentUserVOList] = useState([]);
   const [departmentVOList, setDepartmentVOList] = useState([]);
@@ -82,19 +82,19 @@ function ChooseAssignorModal(props) {
     StoreService.getDepartmentUserNotPage(params).then((res) => {
       const { result = [] } = res;
       const structureData = handleStructureData(result.departmentVOList);
-      const checkedKeys = handleCheckedKeys(structureData, []);
+      const checkedKeys = handleCheckedKeys(structureData, checkedAssignorList, []);
       setStructureData(structureData);
       setCheckedAssignorKeys(checkedKeys);
     });
   }
 
-  function handleCheckedKeys(dataArray, checkedKeys) {
+  function handleCheckedKeys(dataArray, checkedAssignorList, checkedKeys) {
     dataArray.map((item, index) => {
       if (checkedAssignorList.find((checkedItem) => checkedItem.checkedId === item.checkedId)) {
         checkedKeys.push(item.id);
       }
       if (item.children?.length > 0) {
-        handleCheckedKeys(item.children, checkedKeys);
+        handleCheckedKeys(item.children, checkedAssignorList, checkedKeys);
       }
     });
     return checkedKeys;
@@ -140,9 +140,9 @@ function ChooseAssignorModal(props) {
       });
     }
 
-    const _checkedAssignorKeys = _checkedAssignorList.map((item) => item.id);
-    setCheckedAssignorKeys(_checkedAssignorKeys);
+    const _checkedAssignorKeys = handleCheckedKeys(structureData, _checkedAssignorList, []);
     setCheckedAssignorList(_checkedAssignorList);
+    setCheckedAssignorKeys(_checkedAssignorKeys);
   }
 
   function removeCheckedAssignor(item) {
@@ -180,14 +180,15 @@ function ChooseAssignorModal(props) {
         return item;
       });
       const _departmentVOList = departmentVOList.map((item) => {
+        item.disabled = activeKey !== 'departMentTab';
         item.checkedName = item.name;
         item.checkedId = item.id;
         item.checked = checkedAssignorList.find((checkedItem) => checkedItem.checkedId === item.checkedId);
         item.checkedType = AssignTypeEnum[activeKey];
         return item;
       });
+
       const _subLevelDepartmentVOList = subLevelDepartmentVOList.map((item) => {
-        item.disableCheckbox = true;
         item.checkedName = item.name;
         item.checkedId = item.id;
         item.checked = checkedAssignorList.find((checkedItem) => checkedItem.checkedId === item.checkedId);
@@ -279,7 +280,7 @@ function ChooseAssignorModal(props) {
       setSubLevelDepartmentVOList(_subLevelDepartmentVOList);
     }
 
-    const _checkedAssignorKeys = _checkedAssignorList.map((item) => item.id);
+    const _checkedAssignorKeys = handleCheckedKeys(structureData, _checkedAssignorList, []);
     setCheckedAssignorKeys(_checkedAssignorKeys);
     setCheckedAssignorList(_checkedAssignorList);
   }
@@ -345,31 +346,36 @@ function ChooseAssignorModal(props) {
             })}
           </div>
         )}
-        {departmentVOList.length > 0 && (
+        {subLevelDepartmentVOList.length > 0 && (
           <div>
             <div>{DeptTypeEnum[activeKey][0]}</div>
-            {departmentVOList.map((record) => {
+            {subLevelDepartmentVOList.map((record) => {
               return (
-                <Checkbox checked={record.checked} value={record} key={record.checkedId} onChange={(e) => handleCheckedSearchAssignor(e, 'DEPART')}>
+                <Checkbox checked={record.checked} value={record} key={record.checkedId} onChange={(e) => handleCheckedSearchAssignor(e, 'GROUP')}>
                   <div className='search-result-item' depId={record.checkedId} type={type}>
-                    <div className='search-result-item__left'>
-                      {activeKey === 'departMentTab' ? <WWOpenDataCom type='departmentName' openid={record.name} /> : <span>{record.name}</span>}
-                    </div>
-                    <div className='search-result-item__right'>{activeKey === 'postGrouptab' && <span>{record.parentName}</span>}</div>
+                    <div className='search-result-item__left'>{<WWOpenDataCom type='departmentName' openid={record.name} />}</div>
                   </div>
                 </Checkbox>
               );
             })}
           </div>
         )}
-        {subLevelDepartmentVOList.length > 0 && (
+        {departmentVOList.length > 0 && (
           <div>
-            <div>{DeptTypeEnum[activeKey][1]}</div>
-            {subLevelDepartmentVOList.map((record) => {
+            <div>{activeKey === 'departMentTab' ? DeptTypeEnum[activeKey][0] : DeptTypeEnum[activeKey][1]}</div>
+            {departmentVOList.map((record) => {
               return (
-                <Checkbox checked={record.checked} value={record} key={record.checkedId} onChange={(e) => handleCheckedSearchAssignor(e, 'GROUP')}>
+                <Checkbox
+                  disabled={record.disabled}
+                  checked={record.checked}
+                  value={record}
+                  key={record.checkedId}
+                  onChange={(e) => handleCheckedSearchAssignor(e, 'DEPART')}>
                   <div className='search-result-item' depId={record.checkedId} type={type}>
-                    <div className='search-result-item__left'>{<WWOpenDataCom type='departmentName' openid={record.name} />}</div>
+                    <div className='search-result-item__left'>
+                      {activeKey === 'departMentTab' ? <WWOpenDataCom type='departmentName' openid={record.name} /> : <span>{record.name}</span>}
+                    </div>
+                    <div className='search-result-item__right'>{activeKey === 'postGrouptab' && <span>{record.parentName}</span>}</div>
                   </div>
                 </Checkbox>
               );