组织结构组件-搜索单选功能完善

hookehuyr
Commit 4d87560d0b3d39629f7c277826684b95867aae18 4d87560d 1 parent 1d70f65d
Showing 1 changed file with 75 additions and 6 deletions
src/components/OrgPickerField/MyComponent.vue
--- a/src/components/OrgPickerField/MyComponent.vue
View file @4d87560
+++ b/src/components/OrgPickerField/MyComponent.vue
View file @4d87560
 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-08-05 18:23:40
+ * @LastEditTime: 2024-08-05 19:27:33
  * @FilePath: /data-table/src/components/OrgPickerField/MyComponent.vue
  * @Description: 树形组件
 -->
@@ -183,7 +183,10 @@
               :text="dept.name"
               :key="dept.id"
               :name="dept.id"
-              shape="square" icon-size="13px" :checked-color="styleColor.baseColor" style="margin-bottom: 0.5rem;">
+              shape="square" icon-size="13px"
+              :checked-color="styleColor.baseColor"
+              :disabled="dept.disabled"
+              style="margin-bottom: 0.5rem;">
               {{ dept.name }}
             </van-checkbox>
             <div v-if="!user_dept_role.dept.length" style="color: #999;">暂无数据</div>
@@ -201,7 +204,11 @@
               :text="role.name"
               :key="role.id"
               :name="role.id"
-              shape="square" icon-size="13px" :checked-color="styleColor.baseColor" style="margin-bottom: 0.8rem;">
+              shape="square"
+              icon-size="13px"
+              :checked-color="styleColor.baseColor"
+              :disabled="role.disabled"
+              style="margin-bottom: 0.8rem;">
               {{ role.name }}
             </van-checkbox>
             <div v-if="!user_dept_role.role.length" style="color: #999;">暂无数据</div>
@@ -219,7 +226,11 @@
               :text="user.name"
               :key="user.id"
               :name="user.id"
-              shape="square" icon-size="13px" :checked-color="styleColor.baseColor" style="margin-bottom: 0.5rem;">
+              shape="square"
+              icon-size="13px"
+              :checked-color="styleColor.baseColor"
+              :disabled="user.disabled"
+              style="margin-bottom: 0.5rem;">
               <div class="van-ellipsis" :style="{ maxWidth: maxWidth + 'px' }">
                 <span>{{ user.name }}</span>
                 <span v-if="user.role_list.length">/
@@ -326,7 +337,7 @@ onMounted(async () => {
   // 如果有默认值处理
   props.value = props.component_props.default;
   // TEST
-  check_type.value = 'single'; // 默认单选
+  check_type.value = ''; // 默认单选
   if (props.value) {
     props.value.forEach(item => {
       if (item.type === 'dept') {
@@ -425,6 +436,22 @@ const search_result_checked = ref([]);
 const onSearchBlur = async () => { // 搜索框失去焦点
   const { code, data } = await searchUserDeptRoleAPI({ form_code: $route.query.code, word: searchValue.value })
   if (code) {
+    // 单选模式
+    if (check_type.value === 'single') {
+      if (treeCheckedCount.value) {
+        let arr = [...checkedGroup.value.dept, ...checkedGroup.value.role, ...checkedGroup.value.user]
+        for (const key in data) {
+          const element = data[key];
+          element.forEach(item => {
+            if (item.id === arr[0].id) { // 禁用其他
+              item.disabled = false;
+            } else {
+              item.disabled = true;
+            }
+          });
+        }
+      }
+    }
     user_dept_role.value = data;
   }
 }
@@ -498,6 +525,22 @@ const resetUserDisabled = () => {
   }
 }
+const resetSearchDisable = () => {
+  for (const key in user_dept_role.value) {
+    const element = user_dept_role.value[key];
+    element.forEach(item => {
+      item.disabled = false;
+      // search_result_checked.value.forEach(val => {
+      //   if (item.id === val) { // 禁用其他
+      //     item.disabled = false;
+      //   } else {
+      //     item.disabled = true;
+      //   }
+      // })
+    });
+  }
+}
+
 const onRemoveDeptTag = (dept) => { // 移除部门标签
   // 移除选中框显示
   const index = checkedGroup.value.dept.findIndex(item => JSON.stringify(item) === JSON.stringify(dept));
@@ -511,6 +554,7 @@ const onRemoveDeptTag = (dept) => { // 移除部门标签
   if (check_type.value === 'single') {
     resetRoleDisabled();// 重置角色禁用状态
     resetUserDisabled(); // 重置成员禁用状态
+    resetSearchDisable(); // 重置搜索结果禁用状态
   }
 }
@@ -527,6 +571,7 @@ const onRemoveRoleTag = (role) => { // 移除角色标签
   if (check_type.value === 'single') {
     resetRoleDisabled();// 重置角色禁用状态
     resetUserDisabled(); // 重置成员禁用状态
+    resetSearchDisable(); // 重置搜索结果禁用状态
   }
 }
@@ -543,6 +588,7 @@ const onRemoveUserTag = (user) => { // 移除成员标签
   if (check_type.value === 'single') {
     resetRoleDisabled(); // 重置角色禁用状态
     resetUserDisabled(); // 重置成员禁用状态
+    resetSearchDisable(); // 重置搜索结果禁用状态
   }
 }
@@ -817,7 +863,7 @@ const user_dept_role = ref({
 const onSearchResultChange = (val) => { // 监听搜索结果集点击回调，结果集为选中项
 }
-
+const deptCheckboxRef = ref(null);
 const onSearchResultClick = (val, evt) => { // 搜索结果集项点击回调
   nextTick(() => {
     let checked = false;
@@ -859,6 +905,29 @@ const onSearchResultClick = (val, evt) => { // 搜索结果集项点击回调
         deptTreeRef.value?.setChecked(obj.id, false);
       }
     }
+
+
+    // 单选模式
+    if (check_type.value === 'single') {
+        if (val.disabled) { // 节点禁用时不能操作
+          showToast('单选模式下，只能勾选一个')
+          return;
+        }
+        if (treeCheckedCount.value) {
+          for (const key in user_dept_role.value) {
+            const element = user_dept_role.value[key];
+            element.forEach(item => {
+              if (item.id === val.id) { // 禁用其他
+                item.disabled = false;
+              } else {
+                item.disabled = true;
+              }
+            });
+          }
+        } else {
+          resetSearchDisable();
+        }
+    }
   });
 }