refactor(user.js): 重构-用户管理页面

src/components/CategoryTree/index.vue

@@ -54,7 +54,7 @@
           @pagination="getPageList" />
         <!-- 折叠分类侧边栏 -->
         <div class="arrow"
-          @click="hideSideBar = true">
+          @click="handleClick">
           <svg-icon icon-class="left-arrow" />
         </div>
       </div>
@@ -62,7 +62,7 @@
     <!-- 展开分类侧边栏 -->
     <div class="arrow"
       v-show="hideSideBar"
-      @click="hideSideBar = !hideSideBar">
+      @click="handleClick">
       <svg-icon icon-class="right-arrow" />
     </div>
   </el-col>
@@ -150,7 +150,7 @@ watch(searchValue, (val) => {
   } else {
     // 有分页，走外面接口搜索
     queryParams.searchKey = val
-    emits('search', queryParams)
+    // emits('search', queryParams)
   }
 })
 
@@ -167,11 +167,12 @@ watch(() => props.modelValue, (val) => {
 // 点击空白位置-取消选中效果
 const cancelSel = () => {
   // 刚才有过点击的某行
+  console.log(666, lastRow.value)
   if (lastRow.value) {
     treeRef.value.setCurrentKey(null)
     lastRow.value = null
     emits('update:modelValue', '')
-    emits('search')
+    emits('search', null)
   }
 }
 
@@ -181,11 +182,13 @@ const handleNodeClick = (row) => {
   if (lastRowId.value === row[props.nodeKey]) {
     treeRef.value.setCurrentKey(null)
     lastRowId.value = null
+    lastRow.value = null
   } else {
     lastRowId.value = row[props.nodeKey]
+    lastRow.value = row
   }
   emits('update:modelValue', lastRowId.value ? row[props.nodeKey] : '')
-  emits('search')
+  emits('search', row)
 }
 
 // tree 筛选节点
@@ -198,6 +201,10 @@ const filterNode = (value, data) => {
 const getPageList = () => {
   emits('pageChange', queryParams)
 }
+
+const handleClick = () => {
+  hideSideBar.value =!hideSideBar.value
+}
 </script>
 
 <style scoped

src/components/ToolTip/index.vue

+<template>
+  <div class="wrap">
+    <el-tooltip v-if="show"
+      v-bind="$attrs">
+      <slot></slot>
+    </el-tooltip>
+    <div @mouseenter="show = true"
+      @mouseleave="show = false"
+      v-else>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MouseToolTip',
+  data() {
+    return {
+      show: false
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.wrap{
+  display: inline-block;
+}
+</style>
\ No newline at end of file

src/main.js

@@ -48,6 +48,8 @@ import NoData from '@/components/NoData'
 import CategoryTree from '@/components/CategoryTree'
 // 返回头部
 import BackToUp from '@/components/BackToUp'
+// 自定义 toolTip
+import CustomToolTip from '@/components/ToolTip'
 
 const app = createApp(App)
 
@@ -76,6 +78,7 @@ app.component('GroupLegend', GroupLegend)
 app.component('NoData', NoData)
 app.component('CategoryTree', CategoryTree)
 app.component('BackToUp', BackToUp)
+app.component('CustomToolTip', CustomToolTip)
 
 // 全局插件
 app.use(plugins)