fix 组织结构控件-角色单选逻辑

hookehuyr
Commit 1d70f65da4040a42321ff4ff84076068d07e9707 1d70f65d 1 parent 159ead62
Showing 1 changed file with 84 additions and 9 deletions
src/components/OrgPickerField/MyComponent.vue
--- a/src/components/OrgPickerField/MyComponent.vue
View file @1d70f65
+++ b/src/components/OrgPickerField/MyComponent.vue
View file @1d70f65
 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-08-05 16:53:52
+ * @LastEditTime: 2024-08-05 18:23:40
  * @FilePath: /data-table/src/components/OrgPickerField/MyComponent.vue
  * @Description: 树形组件
 -->
@@ -145,7 +145,6 @@
                 @change="onUserChange"
               >
                 <van-checkbox
-
                   @click="onCheckUserChange(user, $event)"
                   v-for="(user, index) in userList"
                   :id="user.id"
@@ -155,7 +154,10 @@
                   :name="user.id"
                   shape="square"
                   icon-size="13px"
-                :checked-color="styleColor.baseColor" style="margin-bottom: 0.5rem;">{{ user.name }}</van-checkbox>
+                  :checked-color="styleColor.baseColor"
+                  :disabled="user.disabled"
+                  style="margin-bottom: 0.5rem;"
+                >{{ user.name }}</van-checkbox>
               </van-checkbox-group>
               <div style="height: 10vh;"></div>
             </van-col>
@@ -487,6 +489,15 @@ const resetRoleDisabled = () => {
     }
 }
+const resetUserDisabled = () => {
+  // 如果角色没有选中，解除禁用
+  if (!user_checked.value.length) {
+    userList.value.forEach(item => {
+      item.disabled = false;
+    });
+  }
+}
+
 const onRemoveDeptTag = (dept) => { // 移除部门标签
   // 移除选中框显示
   const index = checkedGroup.value.dept.findIndex(item => JSON.stringify(item) === JSON.stringify(dept));
@@ -498,7 +509,8 @@ const onRemoveDeptTag = (dept) => { // 移除部门标签
   search_result_checked.value.splice(idx, 1);
   // 单选模式
   if (check_type.value === 'single') {
-    resetRoleDisabled();
+    resetRoleDisabled();// 重置角色禁用状态
+    resetUserDisabled(); // 重置成员禁用状态
   }
 }
@@ -513,7 +525,8 @@ const onRemoveRoleTag = (role) => { // 移除角色标签
   search_result_checked.value.splice(i, 1);
   // 单选模式
   if (check_type.value === 'single') {
-    resetRoleDisabled();
+    resetRoleDisabled();// 重置角色禁用状态
+    resetUserDisabled(); // 重置成员禁用状态
   }
 }
@@ -528,7 +541,8 @@ const onRemoveUserTag = (user) => { // 移除成员标签
   search_result_checked.value.splice(i, 1);
   // 单选模式
   if (check_type.value === 'single') {
-    resetRoleDisabled();
+    resetRoleDisabled(); // 重置角色禁用状态
+    resetUserDisabled(); // 重置成员禁用状态
   }
 }
@@ -586,7 +600,26 @@ const roleListReset = () => { // 角色重置列表
 const userListReset = () => { // 成员重置列表
   userTreeRef.value.setData(role_list);
-  userTreeRef.value.setExpand(35697, true)
+  userTreeRef.value.setExpand(35697, true);
+  if (check_type.value === 'single') {
+    if (treeCheckedCount.value) { // 已勾选值一个
+      if (checkedGroup.value.user.length) {
+        checkedGroup.value.user.forEach(user => {
+          userList.value.forEach(item => {
+            if (user.id === item.id) {
+              item.disabled = false;
+            } else {
+              item.disabled = true;
+            }
+          });
+        })
+      } else {
+        userList.value.forEach(item => {
+          item.disabled = true;
+        })
+      }
+    }
+  }
 }
 /**************** END *****************/
@@ -691,7 +724,28 @@ const user_checked = ref([]); // 成员多选选中值
 const onUserTreeClick = (node) => { // 点击成员树形回调
   userList.value = node.user;
-  user_checked.value = checkedGroup.value.user.map(item => item.id)
+  user_checked.value = checkedGroup.value.user.map(item => item.id);
+  // 单选模式判断
+  if (check_type.value === 'single') {
+    if (treeCheckedCount.value) { // 已勾选值一个
+      if (checkedGroup.value.user.length) { // 成员列表有勾选值
+        checkedGroup.value.user.forEach(user => {
+          node.user.forEach(item => {
+            if (user.id === item.id) {
+              item.disabled = false;
+            } else {
+              item.disabled = true;
+            }
+          });
+        })
+      } else { // 成员列表没有勾选值
+        showToast('单选模式下，只能勾选一个')
+        userList.value = []
+      }
+    } else {
+      resetUserDisabled();
+    }
+  }
 }
 const onUserChange = (val) => { // 成员多选组点击回调
@@ -729,7 +783,28 @@ const onCheckUserChange = (val, evt) => {
         checkedGroup.value.user.splice(index, 1);
       }
     }
-  })
+  });
+  if (val.disabled) { // 节点禁用时不能操作
+    showToast('单选模式下，只能勾选一个')
+    return;
+  }
+  if (check_type.value === 'single') {
+    // 移除选中框显示
+    const index = checkedGroup.value['user'].findIndex(item => item === val.id);
+    checkedGroup.value['user'].splice(index, 1);
+    // 超出选中1个，禁用其他选中
+    if (!treeCheckedCount.value) {
+      userList.value.forEach(item => {
+        if (item.id === val.id) {
+          item.disabled = false;
+        } else {
+          item.disabled = true;
+        }
+      });
+    }
+    // 如果没有选中，解除禁用
+    resetUserDisabled();
+  }
 }
 /**************** END *****************/