【字典分类】分类按钮显示在右侧；取消全部菜单按钮；初始化默认获取第一条菜单列表

src/views/demo/Categories/index.vue

@@ -1,20 +1,14 @@
 <template>
   <div class="page-div categories-page">
     <div class="left-div w-1/4 xl:w-1/5 m-4 mr-0">
-      <div class="header">
-        <div class="buttons-div">
-          <a-button type="primary" color='error' @click="buttonClick('left-del')">删除分类</a-button>
-          <a-button type="primary" color='info' @click="buttonClick('left-add')">添加分类</a-button>
-        </div>
+      <div class="header mb-1">
+        <div class='header-title'>分类列表</div>
         <div class="search-div">
-          <a-input-search size="small" v-model:value="LValue" placeholder="请输入内容" enter-button @search="searchData('left')"/>
+          <a-input-search size="small" v-model:value="LValue" placeholder="搜索" enter-button @search="searchData('left')"/>
         </div>
         
       </div>
       <div class="content">
-        <div class="show-all-button">
-          <a-button type="link" @click="changeTypeId('')">全部字典>></a-button>
-        </div>
         <div class="showTree">
           <BasicTree :treeData="showLTree" :loading="lLoading" @select="(selectedKeys,{node}) => {getLeftSelectId(node.id);changeTypeId(node.key)}"/>
         </div>
@@ -64,9 +58,17 @@ const modalData = reactive({
   data:{},
   type:'',
 })
+const firstRequestCode = ref('')
+
 const [registerTable,{reload,getSelectRows}] = useTable({
   beforeFetch: (params) => {
-    return {...params, code:typeId.value,}
+    console.log(firstRequestCode.value,'before')
+    if(firstRequestCode.value !== ''){
+      params = {...params, code: firstRequestCode.value}
+    }else{
+      params = {...params, code:typeId.value}
+    }
+    return params
   },
   api:getRightTable,
   columns,
@@ -84,22 +86,32 @@ const [registerTable,{reload,getSelectRows}] = useTable({
   handleSearchInfoFn(info) {
       return info;
   },
+  immediate:false,
+  afterFetch(res){
+    firstRequestCode.value = ''
+    return res
+  },
 
 })
-const getLeftTreeData = () => {
+const getLeftTreeData = (isMounted) => {
   lLoading.value = true
   getLeftTree().then(res => {
     let data = dataProcess(res)
     lTree.value = data
     showLTree.value = data
     lLoading.value = false
+    if(isMounted && data.length > 0){
+      firstRequestCode.value = data[0].key
+      typeId.value = data[0].key
+    }
+    reload()
   }).catch(err => {
     console.log(err)
     lLoading.value = false
   })
 }
 onMounted(() => {
-  getLeftTreeData()
+  getLeftTreeData(true)
 })
 const changeTypeId = (value) => {
   typeId.value = value
@@ -121,7 +133,7 @@ const submit = () => {
   switch(modalData.type){
     case 'leftadd':
       addLeftItem(modalData.data).then(res => {
-        getLeftTreeData()
+        getLeftTreeData(false)
         openModal.value = false
       }).catch(err => {
         console.log(err)
@@ -179,7 +191,7 @@ const buttonClick = (diffType) => {
           onOk() {
             if(isLeft){
               return delLeftItem({id:selectLeftId.value}).then(res => {
-                getLeftTreeData()
+                getLeftTreeData(false)
                 typeId.value = ''
                 reload()
               }).catch(err => {
@@ -233,14 +245,18 @@ const clearModal = () => {
     flex-direction: column;
     .header{
       display: flex;
-      flex-direction: column;
+      align-items: center;
       padding:10px;
-      .buttons-div{
-        display: flex;
-        justify-content: space-between;
+      border-bottom: 1px solid #eee;
+      .header-title{
+        width: 132px;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 24px;
+        cursor: pointer;
+        user-select: none;
       }
       .search-div{
-        margin-top:10px;
         display: flex;
       } 
     }
@@ -248,14 +264,8 @@ const clearModal = () => {
       border-radius: 5px;
       height:100%;
       overflow: auto;
-      .show-all-button{
-        height:34px;
-        line-height: 34px;
-        padding-left: 20px;
-        border-bottom: 1px solid #ccc;
-      }
       .showTree {
-        height: calc(100% - 34px);
+        height: 100%;
         overflow: auto;
       }
     }