fix 搜索框逻辑整理

hookehuyr
Commit 4624d69114aa9dd8158a4b513878aee90fdf4511 4624d691 1 parent b2129af0
Showing 1 changed file with 99 additions and 137 deletions
src/components/TreeField/index.vue
--- a/src/components/TreeField/index.vue
View file @4624d69
+++ b/src/components/TreeField/index.vue
View file @4624d69
 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-05-31 00:19:33
+ * @LastEditTime: 2024-05-31 11:32:37
  * @FilePath: /data-table/src/components/TreeField/index.vue
  * @Description: 树形组件
 -->
@@ -13,14 +13,22 @@
     </div>
     <van-popup
-      v-model:show="showBottom"
+      v-model:show="showPopover"
       position="bottom"
       :style="{ height: '90vh' }"
     >
       <div v-if="!is_search" class="search-box" @click="onSearchFocus">
         <van-icon name="search" size="1.1rem" />&nbsp;点击搜索
       </div>
-      <van-field ref="searchInputRef" v-else v-model="search_value" label="" placeholder="可通过名称，手机号或邮箱查询" :border="false" @blur="onSearchBlur" @focus="onSearchFocus">
+      <van-field
+        v-else
+        ref="searchInputRef"
+        v-model="searchValue"
+        placeholder="可通过名称，手机号或邮箱查询"
+        :border="false"
+        @blur="onSearchBlur"
+        @focus="onSearchFocus"
+      >
         <template #button>
           <van-button size="small" type="primary" @click="onCloseSearch">关闭</van-button>
         </template>
@@ -86,8 +94,8 @@
           <van-row gutter="">
             <van-col span="10" style="border-right: 1px solid #eee; height: 60vh; overflow: scroll;">
               <Vtree
-                ref="memberTreeRef"
+                ref="userTreeRef"
-                v-model="select_member_value"
+                v-model="select_user_value"
                 selectable
                 titleField="name"
                 keyField="id"
@@ -101,22 +109,22 @@
             </van-col>
             <van-col span="14">
               <van-checkbox-group
-                v-model="member_checked"
+                v-model="user_checked"
                 style="padding: 0 0 1rem 1rem;"
-                @change="onMemberChange"
+                @change="onUserChange"
               >
                 <van-checkbox
-                @click="onCheckMemberChange(member, $event)"
+                @click="onCheckUserChange(user, $event)"
-                v-for="(member, index) in memberList"
+                v-for="(user, index) in userList"
-                :id="member.id"
+                :id="user.id"
-                :type="member.type"
+                :type="user.type"
-                :text="member.name"
+                :text="user.name"
                 :key="index"
-                :name="member.id"
+                :name="user.id"
                 shape="square"
                 icon-size="13px"
-                :checked-color="styleColor.baseColor" style="margin-bottom: 0.5rem;">{{ member.name }}</van-checkbox>
+                :checked-color="styleColor.baseColor" style="margin-bottom: 0.5rem;">{{ user.name }}</van-checkbox>
               </van-checkbox-group>
             </van-col>
           </van-row>
@@ -212,93 +220,79 @@ const isGroup = computed(() => {
   return props.item.component_props.is_field_group
 });
-const showBottom = ref(true);
+/******* 搜索输入项 *******/
+const showPopover = ref(true); // 显示/隐藏弹框
-const search_value = ref('');
+const searchInputRef = ref(null);
-const onSearch = (val) => {
+const searchValue = ref('');
-  console.log(val);
+const is_search = ref(false); // 默认不显示搜索框
-};
+/**
-const onCancel = () => {
+ * 搜索选中结果集
-  search_value.value = '';
+ * @param {Number} id
-};
+ */
+const search_result_checked = ref([]);
+
+const onSearchBlur = () => { // 搜索框失去焦点
+}
+
+const onSearchFocus = () => { // 搜索框获取焦点回调
+  is_search.value = true; // 打开搜索状态
+
+  // 自动选中搜索框
+  nextTick(() => {
+    searchInputRef.value.focus();
+  });
+
+  // 如果选中框有值，点击搜索框后把结果选中到搜索结果集里面
+  // TODO：待实现 真实情况应该是请求搜索结果后做
+  handleSelectToSearch();
+}
+const handleSelectToSearch = () => { // 把选中结果集同步，到搜索结果集上勾中显示
+  let dept = checkedGroup.value.dept.map(item => item.id);
+  let role = checkedGroup.value.role.map(item => item.id);
+  let user = checkedGroup.value.user.map(item => item.id);
+  search_result_checked.value = [...dept, ...role, ...user]; // 搜索选中结果集
+}
+
+const onCloseSearch = () => { // 点击搜索关闭按钮回调
+  tabActive.value = 0; // 默认选中组织结构
+  is_search.value = false; // 关闭搜索状态
+  // 组织结构，勾选状态还原
+  deptTreeRef.value?.setCheckedKeys(checkedGroup.value.dept.map(item => item.id), true);
+  // 角色选中，勾选状态还原
+  role_checked.value = checkedGroup.value.role.map(item => item.id);
+  // 成员选中，勾选状态还原
+  user_checked.value = checkedGroup.value.user.map(item => item.id)
+}
+/****************************** END ********************************/
+
+/*************** Tab 功能模块 ****************/
 const tabRef = ref(null);
 const tabActive = ref(0);
-const select_dept_value = ref();
+const select_dept_value = ref(); // 组织结构树形选中值
 const deptTreeRef = ref();
-const role_checked = ref([]);
+const role_checked = ref([]); // 角色多选选中值
 const roleList = ref([]);
-const select_member_value = ref();
+const select_user_value = ref(); // 成员树形选中值
-const memberTreeRef = ref();
+const userTreeRef = ref();
-const member_checked = ref([]);
+const user_checked = ref([]); // 成员多选选中值
-const memberList = ref([]);
+const userList = ref([]);
 const onClickTab = ({ title }) => { // tab点击事件
-  if (title === '组织结构') {
+  nextTick(() => {
-    nextTick(() => {
+    if (title === '组织结构') {
       deptListReset();
-    });
+    }
-  }
+    if (title === '角色') {
-  if (title === '角色') {
-    nextTick(() => {
       roleListReset();
-    });
+    }
-  }
+    if (title === '成员') {
-  if (title === '成员') {
+      userListReset();
-    nextTick(() => {
+    }
-      memberListReset();
+  });
-    });
-  }
 };
-const testData = [{
-  id: 1,
-  name: '西园寺',
-  children: [{
-    name: '保安',
-    id: 2,
-    children: [{
-      name: '1号',
-      id: 3
-    }]
-  }, {
-    name: '餐饮',
-    id: 4,
-    children: [{
-      name: '5号',
-      id: 5
-    }]
-  }, {
-    name: '保安',
-    id: 21,
-    children: [{
-      name: '1号',
-      id: 31
-    }]
-  }, {
-    name: '餐饮',
-    id: 41,
-    children: [{
-      name: '5号',
-      id: 51
-    }]
-  }, {
-    name: '保安',
-    id: 22,
-    children: [{
-      name: '1号',
-      id: 32
-    }]
-  }, {
-    name: '餐饮',
-    id: 42,
-    children: [{
-      name: '5号',
-      id: 52
-    }]
-  }]
-}];
-
 const checkedGroup = ref({
   dept: [],
   role: [],
@@ -329,9 +323,8 @@ onMounted(() => {
   deptTreeRef.value.setData(role_list);
   // 默认展开第一个
   deptTreeRef.value.setExpand(35697, true)
-  // memberTreeRef.value.setData(testData);
   // // 默认展开第一个
-  // memberTreeRef.value.setExpand(1, true)
+  // userTreeRef.value.setExpand(1, true)
 });
 const searchMethod = (value) => {
@@ -351,37 +344,6 @@ const checkedChangeMethod = (arr) => {
   checkedGroup.value.dept = list;
 }
-const is_search = ref(false); // 默认不显示搜索框
-
-const onSearchBlur = () => { // 搜索框失去焦点
-  // search_result_checked.value = []
-}
-
-const onSearchFocus = () => { // 搜索框获取焦点
-  is_search.value = true;
-  nextTick(() => {
-    searchInputRef.value.focus()
-  })
-  // 角色选中
-  let dept = checkedGroup.value.dept.map(item => item.id);
-  let role = checkedGroup.value.role.map(item => item.id);
-  let user = checkedGroup.value.user.map(item => item.id);
-  search_result_checked.value = [...dept, ...role, ...user];
-}
-
-const onCloseSearch = () => { // 搜索关闭按钮
-  tabActive.value = 0
-  is_search.value = false;
-  // 组织结构勾选状态还原
-  deptTreeRef.value?.setCheckedKeys(checkedGroup.value.dept.map(item => item.id), true);
-  // console.warn(checkedGroup.value.role);
-  // 角色选中
-  role_checked.value = checkedGroup.value.role.map(item => item.id);
-  //
-  member_checked.value = checkedGroup.value.user.map(item => item.id)
-}
-
-const searchInputRef = ref(null);
 const deptListReset = () => { // 组织重置列表
   deptTreeRef.value.setData(role_list);
@@ -391,18 +353,18 @@ const deptListReset = () => { // 组织重置列表
 const roleListReset = () => {
   roleList.value = dept_list;
 }
-const memberListReset = () => {
+const userListReset = () => {
-  memberTreeRef.value.setData(role_list);
+  userTreeRef.value.setData(role_list);
-  memberTreeRef.value.setExpand(35697, true)
+  userTreeRef.value.setExpand(35697, true)
 }
 const onNodeClick = (node) => {
   // console.warn(node);
   console.warn(checkedGroup.value.user);
   // console.warn(node.user);
-  memberList.value = node.user;
+  userList.value = node.user;
-  member_checked.value = checkedGroup.value.user.map(item => item.id)
+  user_checked.value = checkedGroup.value.user.map(item => item.id)
 }
 const roleChangeMethod = (val) => { // 角色多选组点击回调
@@ -423,13 +385,13 @@ const roleChangeMethod = (val) => { // 角色多选组点击回调
 }
 const onChange = (val) => {
-  console.warn(memberList.value);
+  console.warn(userList.value);
 }
 const roleTreeList = ref(role_list);
-const onMemberChange = (val) => { // 成员多选组点击回调
+const onUserChange = (val) => { // 成员多选组点击回调
-  // memberList.value.forEach(item => {
+  // userList.value.forEach(item => {
   //   if (val.includes(item.id)) {
   //     item.checked = true;
   //   } else {
@@ -437,7 +399,7 @@ const onMemberChange = (val) => { // 成员多选组点击回调
   //   }
   // });
-  // checkedGroup.value.user = member_checked.value;
+  // checkedGroup.value.user = user_checked.value;
 }
 const onRemoveDeptTag = (dept) => { // 移除部门标签
@@ -467,8 +429,8 @@ const onRemoveUserTag = (user) => { // 移除成员标签
   const index = checkedGroup.value.user.indexOf(user);
   checkedGroup.value.user.splice(index, 1);
   //
-  const idx = member_checked.value.indexOf(user);
+  const idx = user_checked.value.indexOf(user);
-  member_checked.value.splice(index, 1);
+  user_checked.value.splice(index, 1);
   // 移除搜索结果选中显示
   const i = search_result_checked.value.indexOf(user);
   search_result_checked.value.splice(i, 1);
@@ -512,7 +474,7 @@ const user_dept_role = ref({
   ]
 });
-const search_result_checked = ref([]);
+
 // watch(
 //   search_result_checked
@@ -648,8 +610,8 @@ const onSearchUserChange = (val, evt) => {
         const index = checkedGroup.value.user.findIndex(user => user.id === obj.id);
         checkedGroup.value.user.splice(index, 1);
         // //
-        // const idx = member_checked.value.indexOf(obj);
+        // const idx = user_checked.value.indexOf(obj);
-        // member_checked.value.splice(index, 1);
+        // user_checked.value.splice(index, 1);
         // // 移除搜索结果选中显示
         // const i = search_result_checked.value.indexOf(obj);
         // search_result_checked.value.splice(i, 1);
@@ -658,7 +620,7 @@ const onSearchUserChange = (val, evt) => {
   })
 }
-const onCheckMemberChange = (val, evt) => {
+const onCheckUserChange = (val, evt) => {
   nextTick(() => {
     let checked = false;
     let id = '';