:recycle: Refactoring code. 顶部菜单优化

src/api/admin/menu.js

@@ -28,15 +28,16 @@ export function getMenu(id) {
 export function getTopMenu() {
   return request({
     url: '/admin/menu',
-    params: {type: 'left'},
+    params: {type: 'top'},
     method: 'get'
   })
 }
 
-export function fetchMenuTree() {
+export function fetchMenuTree(lazy, parentId) {
   return request({
     url: '/admin/menu/tree',
-    method: 'get'
+    method: 'get',
+    params: {lazy: lazy, parentId: parentId}
   })
 }
 

src/const/crud/admin/menu.js

@@ -18,6 +18,7 @@ import iconList from '@/const/iconList'
 
 export const tableOption = {
   tip: false,
+  lazy:true,
   dialogWidth: "60%",
   tree: true,
   border: true,
@@ -46,13 +47,17 @@ export const tableOption = {
       valueFormat: "string",
       dicData: [
         {
-          label: "菜单",
+          label: "左菜单",
           value: "0"
         },
+        {
+          label: "顶菜单",
+          value: "2"
+        },
         {
           label: "按钮",
           value: "1"
-        }
+        },
       ],
       rules: [
         {
@@ -82,6 +87,8 @@ export const tableOption = {
       prop: "parentId",
       type: "tree",
       dicUrl: "/admin/menu/tree",
+      addDisplay: true,
+      editDisplay: true,
       hide: true,
       props: {
         label: "name",

src/page/index/logo.vue

@@ -12,7 +12,7 @@
       <template v-if="!keyCollapse">
         <span
           key="1"
-          class="avue-logo_title">{{ website.indexTitle }} </span>
+          class="avue-logo_title" @click="goIndex">{{ website.indexTitle }} </span>
       </template>
     </transition-group>
   </div>
@@ -22,14 +22,14 @@
 import { mapGetters } from 'vuex'
 export default {
   name: 'Logo',
-  data() {
-    return {}
-  },
-  created() {},
   computed: {
     ...mapGetters(['website', 'keyCollapse'])
   },
-  methods: {}
+  methods: {
+    goIndex: function () {
+      window.location.href = '/'
+    }
+  }
 }
 </script>
 

src/page/index/tags.vue

@@ -137,7 +137,7 @@
             src: tag.value
           }),
           query: tag.query
-        })
+        }).catch(() => {})
       },
       closeOthersTags() {
         this.contextmenuFlag = false

src/views/admin/menu/index.vue

@@ -9,7 +9,7 @@
                @row-del="rowDel"
                @row-update="rowUpdate"
                @row-save="rowSave"
-               @on-load="onLoad">
+               @tree-load="treeLoad">
       <template slot-scope="scope"
                 slot="icon">
         <div style="text-align:center">
@@ -19,7 +19,7 @@
       <template slot-scope="scope"
                 slot="type">
         <div style="text-align:center">
-          <el-tag v-if="scope.row.type === '0'" size="small" type="success">菜单</el-tag>
+          <el-tag v-if="scope.row.type !== '1'" size="small" type="success">菜单</el-tag>
           <el-tag v-else-if="scope.row.type === '1'" size="small" type="info">按钮</el-tag>
         </div>
       </template>
@@ -38,9 +38,13 @@
       return {
         form: {},
         option: tableOption,
+        lazy:true,
         data: []
       };
     },
+    created() {
+      this.onLoad()
+    },
     watch: {
       'form.type'() {
         this.showHide()
@@ -98,24 +102,47 @@
         done();
       },
       onLoad() {
-        fetchMenuTree().then(res => {
+        fetchMenuTree(this.option.lazy).then(res => {
           this.data = res.data.data;
         });
       },
+      treeLoad(node, child, resolve){
+        fetchMenuTree(this.option.lazy, node.id).then(res => {
+          resolve(res.data.data)
+        })
+      },
       showHide(){
         this.$refs.crud.option.column.filter(item => {
+          // 不是按钮类型 要输入path
           if (item.prop === "path") {
-            item.addDisplay = this.form.type === "0"
-            item.editDisplay = this.form.type === "0"
+            item.addDisplay = this.form.type !== "1"
+            item.editDisplay = this.form.type !== "1"
           }
+          // 不是按钮类型 要输入path
           if (item.prop === "icon") {
-            item.addDisplay = this.form.type === "0"
-            item.editDisplay = this.form.type === "0"
+            item.addDisplay = this.form.type !== "1"
+            item.editDisplay = this.form.type !== "1"
+          }
+
+          // 是按钮类型输入code
+          if (item.prop === "code") {
+            item.addDisplay = this.form.type === "1"
+            item.editDisplay = this.form.type === "1"
           }
+
+          // 是按钮类型输入code
           if (item.prop === "code") {
             item.addDisplay = this.form.type === "1"
             item.editDisplay = this.form.type === "1"
           }
+
+          // 是顶部菜单不显示上级菜单
+          if (item.prop === "parentId") {
+            item.addDisplay = this.form.type !== "2"
+            item.editDisplay = this.form.type !== "2"
+          }
+
+          // 是按钮类型输入 上级菜单
           if (item.prop === "parentId") {
             item.rules[0].required = this.form.type === "1"
           }