单选模式下，角色列表的控制

hookehuyr
Commit 159ead6279d7e7f91d68047268e942b5f49e418d 159ead62 1 parent 4028d27f
Showing 1 changed file with 88 additions and 22 deletions
src/components/OrgPickerField/MyComponent.vue
--- a/src/components/OrgPickerField/MyComponent.vue
View file @159ead6
+++ b/src/components/OrgPickerField/MyComponent.vue
View file @159ead6
 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-08-05 14:40:59
+ * @LastEditTime: 2024-08-05 16:53:52
  * @FilePath: /data-table/src/components/OrgPickerField/MyComponent.vue
  * @Description: 树形组件
 -->
@@ -89,6 +89,7 @@
             :showFooter="false"
             :cascade="false"
             :defaultExpandAll="false"
+            :disableAll="deptTreeDisableAll"
             @check="deptTreeCheck"
             @uncheck="deptTreeUncheck"
             @checked-change="deptTreeCheckedChange"
@@ -98,19 +99,22 @@
           </Vtree>
         </div>
-        <div v-if="tabActive === 1" style="padding: 0 0 0 1rem; overflow: scroll; height: 60vh;">
+        <div v-if="tabActive === 1" style="padding: 0 0 0 1rem; overflow: scroll; height: 60vh;" @click.stop>
           <van-checkbox-group
             v-model="role_checked"
             @change="roleChangeMethod"
           >
             <van-checkbox
               v-for="(role, index) in roleList"
+              :id="role.id"
               :key="index"
               :name="role.id"
               shape="square"
               icon-size="13px"
               :checked-color="styleColor.baseColor"
+              :disabled="role.disabled"
               style="margin-bottom: 0.5rem;"
+              @click="onRoleClick(role, $event)"
             >{{ role.name }}</van-checkbox>
           </van-checkbox-group>
           <div style="height: 10vh;"></div>
@@ -278,19 +282,6 @@ let role_list = [];
 let dept_list = [];
 let check_type = ref(''); // 单选/多选模式
-const validateGroupObject = (obj) => {
-  let flag = false;
-
-  // 获取有值的数组属性
-  const nonEmptyArrays = [...obj.dept, ...obj.user, ...obj.role];
-
-  // 确保只有一个数组属性有值
-  if (nonEmptyArrays.length > 1) {
-    flag = true;
-  }
-
-  return flag
-}
 // 处理Tab显示问题
 const tree_tabs = ['dept', 'role', 'user'];
@@ -359,7 +350,9 @@ const openTree = () => {
   showPopover.value = true;
   // 获取数据
   nextTick(() => {
-    getDeptTreeData();
+    // 动态判断点击显示的tab，默认点击第一个
+    onClickTab({ title: tabList.value[0]['title'] })
+    // getDeptTreeData();
     // 获取已选择的数据
     checkedGroup.value = _.cloneDeep(emitCheckedGroup.value);
     syncResultToList(); // 同步勾选状态
@@ -485,6 +478,15 @@ const checkedGroup = ref({
   user: [] // 成员
 });
+const resetRoleDisabled = () => {
+  // 如果角色没有选中，解除禁用
+  if (!role_checked.value.length) {
+      roleList.value.forEach(item => {
+        item.disabled = false;
+      });
+    }
+}
+
 const onRemoveDeptTag = (dept) => { // 移除部门标签
   // 移除选中框显示
   const index = checkedGroup.value.dept.findIndex(item => JSON.stringify(item) === JSON.stringify(dept));
@@ -494,6 +496,10 @@ const onRemoveDeptTag = (dept) => { // 移除部门标签
   // 移除搜索结果选中显示
   const idx = search_result_checked.value.findIndex(item => JSON.stringify(item) === JSON.stringify(dept));
   search_result_checked.value.splice(idx, 1);
+  // 单选模式
+  if (check_type.value === 'single') {
+    resetRoleDisabled();
+  }
 }
 const onRemoveRoleTag = (role) => { // 移除角色标签
@@ -505,6 +511,10 @@ const onRemoveRoleTag = (role) => { // 移除角色标签
   // 移除搜索结果选中显示
   const i = search_result_checked.value.findIndex(item => JSON.stringify(item) === JSON.stringify(role));
   search_result_checked.value.splice(i, 1);
+  // 单选模式
+  if (check_type.value === 'single') {
+    resetRoleDisabled();
+  }
 }
 const onRemoveUserTag = (user) => { // 移除成员标签
@@ -516,6 +526,10 @@ const onRemoveUserTag = (user) => { // 移除成员标签
   // 移除搜索结果选中显示
   const i = search_result_checked.value.findIndex(item => JSON.stringify(item) === JSON.stringify(user));
   search_result_checked.value.splice(i, 1);
+  // 单选模式
+  if (check_type.value === 'single') {
+    resetRoleDisabled();
+  }
 }
 /*************** Tab 功能模块 ****************/
@@ -551,6 +565,23 @@ const deptListReset = () => { // 组织重置列表
 const roleListReset = () => { // 角色重置列表
   roleList.value = dept_list;
+  // 单选模式下，勾选项目操作一个时，角色选项不可勾选
+  if (check_type.value === 'single') {
+    if (treeCheckedCount.value) {
+      roleList.value.forEach(item => {
+        item.disabled = true;
+        checkedGroup.value.role.forEach(role => {
+          if (role.id === item.id) {
+            item.disabled = false;
+          }
+        })
+      });
+    } else {
+      roleList.value.forEach(item => {
+        item.disabled = false;
+      })
+    }
+  }
 }
 const userListReset = () => { // 成员重置列表
@@ -561,6 +592,7 @@ const userListReset = () => { // 成员重置列表
 /************* 组织结构模块 ***************/
 const select_dept_value = ref(); // 组织结构树形选中值
+const deptTreeDisableAll = ref(false); // 组织结构树形禁用
 const getDeptTreeData = () => { // 获取组织结构数据
   deptTreeRef.value.setData(role_list);
@@ -569,10 +601,12 @@ const getDeptTreeData = () => { // 获取组织结构数据
 }
 const deptTreeCheck = (node) => { // 组织结构单选勾中
-  if (check_type.value === 'single' && treeCheckedCount.value) {
+  if (check_type.value === 'single') {
-    showToast('单选模式下，只能勾选一个')
+    if (treeCheckedCount.value) {
-    // 移除树结构选中的项
+      showToast('单选模式下，只能勾选一个')
-    deptTreeRef.value?.setChecked(node.id, false);
+      // 移除树结构选中的项
+      deptTreeRef.value?.setChecked(node.id, false);
+    }
   }
 }
@@ -593,8 +627,10 @@ const treeCheckedCount = computed(() => { // 选中框的数量是否大于一
 });
 const deptTreeCheckedChange = (arr) => { // 组织结构勾选回调
-  if (check_type.value === 'single' && treeCheckedCount.value) {
+  if (check_type.value === 'single') {
-    return false
+    if (treeCheckedCount.value) {
+      return false
+    }
   }
   checkedGroup.value.dept = arr.map((item) => {
@@ -612,10 +648,40 @@ const role_checked = ref([]); // 角色多选选中值
 const roleList = ref([]);
 const roleChangeMethod = (val) => { // 角色多选组点击回调
+  if (check_type.value === 'single') {
+    if (treeCheckedCount.value) {
+      return;
+    }
+  }
+
   let result = val.map(id => roleList.value.find(obj => obj.id === id));
   // 过滤掉未找到的项（即返回undefined的项）
   checkedGroup.value.role = result.filter(item => item !== undefined);
 }
+
+const onRoleClick = (role, evt) => { // 角色单击回调
+  if (role.disabled) { // 节点禁用时不能操作
+    showToast('单选模式下，只能勾选一个')
+    return;
+  }
+  if (check_type.value === 'single') {
+    // 移除选中框显示
+    const index = checkedGroup.value['role'].findIndex(item => item === role.id);
+    checkedGroup.value['role'].splice(index, 1);
+    // 超出选中1个，禁用其他选中
+    if (!treeCheckedCount.value) {
+      roleList.value.forEach(item => {
+        if (item.id === role.id) {
+          item.disabled = false;
+        } else {
+          item.disabled = true;
+        }
+      });
+    }
+    // 如果没有选中，解除禁用
+    resetRoleDisabled();
+  }
+}
 /**************** END *****************/
 /************* 成员模块 ***************/