fix:修改指派对象弹窗对象树的key

7e03883a · yuananting · 8cbb2129 · 7e03883a · 7e03883a
Commit 7e03883a authored Aug 18, 2021 by yuananting
Hide whitespace changes
Inline Side-by-side

Showing with 24 additions and 15 deletions

src/modules/task-center/train-task/components/BasicInfo.less
+1 -1

src/modules/task-center/train-task/modal/ChooseAssignorModal.jsx
+23 -14

No files found.
--- a/src/modules/task-center/train-task/components/BasicInfo.less
+++ b/src/modules/task-center/train-task/components/BasicInfo.less
@@ -114,7 +114,7 @@
    .ant-tag {
      border: 1px solid #cccccc;
      color: #666666;
-      margin-bottom: 12px;
+      margin-bottom: 10px;
      font-size: 14px;
    }
  }

--- a/src/modules/task-center/train-task/modal/ChooseAssignorModal.jsx
+++ b/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-17 14:50:50
+ * @LastEditTime: 2021-08-18 15:41:13
 * @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(props.currentAssignorList.map((item) => item.checkedId) || []);
+  const [checkedAssignorKeys, setCheckedAssignorKeys] = useState(handleCheckedKeys(props.currentAssignorList, []));
  const [queryName, setQueryName] = useState(''); // 搜索框内的值
  const [departmentUserVOList, setDepartmentUserVOList] = useState([]);
  const [departmentVOList, setDepartmentVOList] = useState([]);
@@ -81,21 +81,32 @@ function ChooseAssignorModal(props) {
    };
    StoreService.getDepartmentUserNotPage(params).then((res) => {
      const { result = [] } = res;
      const structureData = handleStructureData(result.departmentVOList);
-      const checkedKeys = checkedAssignorList.map((item) => item.checkedId);
+      const checkedKeys = handleCheckedKeys(structureData, []);
      setStructureData(structureData);
      setCheckedAssignorKeys(checkedKeys);
    });
  }
+  function handleCheckedKeys(dataArray, 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);
+      }
+    });
+    return checkedKeys;
+  }
  function handleStructureData(dataArray) {
    const _dataArray = dataArray.map((item, index) => {
      item.title = '';
      item.checkedId = item.storeCustomerId || item.id;
      item.checkedType = item.storeCustomerId ? 'CUSTOMER' : AssignTypeEnum[activeKey];
      item.checkedName = item.storeCustomerId ? item.userName : item.name;
-      item.key = item.checkedId;
+      item.key = item.id;
      item.children = [];
      if (activeKey !== 'departMentTab' && item.depLevel === 0) {
        item.disableCheckbox = true;
@@ -119,7 +130,6 @@ function ChooseAssignorModal(props) {
  function onCheckAssignor(key, e) {
    const { node, checked } = e;
    let _checkedAssignorList = [...checkedAssignorList];
    if (checked) {
@@ -130,14 +140,14 @@ function ChooseAssignorModal(props) {
      });
    }
-    const _checkedAssignorKeys = _checkedAssignorList.map((item) => item.checkedId);
+    const _checkedAssignorKeys = _checkedAssignorList.map((item) => item.id);
    setCheckedAssignorKeys(_checkedAssignorKeys);
    setCheckedAssignorList(_checkedAssignorList);
  }
  function removeCheckedAssignor(item) {
    const _checkedAssignorList = checkedAssignorList.filter((childItem) => childItem.checkedId !== item.checkedId);
-    const _checkedAssignorKeys = _checkedAssignorList.map((item) => item.checkedId);
+    const _checkedAssignorKeys = _checkedAssignorList.map((item) => item.id);
    setCheckedAssignorKeys(_checkedAssignorKeys);
    setCheckedAssignorList(_checkedAssignorList);
  }
@@ -165,21 +175,22 @@ function ChooseAssignorModal(props) {
      const _departmentUserVOList = departmentUserVOList.map((item) => {
        item.checkedName = item.userName;
        item.checkedId = item.storeCustomerId;
-        item.checked = checkedAssignorKeys.includes(item.checkedId);
+        item.checked = checkedAssignorList.find((checkedItem) => checkedItem.checkedId === item.checkedId);
        item.checkedType = 'CUSTOMER';
        return item;
      });
      const _departmentVOList = departmentVOList.map((item) => {
        item.checkedName = item.name;
        item.checkedId = item.id;
-        item.checked = checkedAssignorKeys.includes(item.checkedId);
+        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 = checkedAssignorKeys.includes(item.checkedId);
+        item.checked = checkedAssignorList.find((checkedItem) => checkedItem.checkedId === item.checkedId);
        item.checkedType = AssignTypeEnum[activeKey];
        return item;
      });
@@ -268,7 +279,7 @@ function ChooseAssignorModal(props) {
      setSubLevelDepartmentVOList(_subLevelDepartmentVOList);
    }
-    const _checkedAssignorKeys = _checkedAssignorList.map((item) => item.checkedId);
+    const _checkedAssignorKeys = _checkedAssignorList.map((item) => item.id);
    setCheckedAssignorKeys(_checkedAssignorKeys);
    setCheckedAssignorList(_checkedAssignorList);
  }
@@ -398,7 +409,6 @@ function ChooseAssignorModal(props) {
            placeholder={handlePlaceHolder()}
            value={queryName}
            enterButton={<span className='icon iconfont'>&#xe832;</span>}
-            // onFocus={() => setDropDownVisible(true)}
            onChange={(e) => {
              setQueryName(e.target.value);
              setDropDownVisible(!!e.target.value);
@@ -496,7 +506,6 @@ function ChooseAssignorModal(props) {
                <LottieIcon title='暂无数据' type='college' size={150} />
              </Otherwise>
            </Choose>
          </div>
        </div>
      </div>