菜单搜索

data/magic-api/api/后台/菜单管理/搜索菜单数据.ms

@@ -0,0 +1,30 @@
+{
+  "properties" : { },
+  "id" : "0adb88c728814db88b901701faa56161",
+  "script" : null,
+  "groupId" : "67b2ce258e24491194b74992958c74aa",
+  "name" : "搜索菜单数据",
+  "createTime" : null,
+  "updateTime" : 1641828392961,
+  "lock" : "0",
+  "method" : "GET",
+  "path" : "/search",
+  "parameters" : [ ],
+  "option" : "[]",
+  "requestBody" : "",
+  "headers" : [ ],
+  "paths" : [ ],
+  "responseBody" : null,
+  "description" : null,
+  "requestBodyDefinition" : null,
+  "responseBodyDefinition" : null,
+  "optionMap" : { }
+}
+================================
+var toTree = (list,pid) => select t.*,toTree(list,t.id) children from list t where t.pid = pid
+var list = toTree(db.select('select id,name as label,pid,url from sys_menu where is_del = 0 and is_show = 1 order by sort'),'0')
+
+return {
+    list: list,
+    total: list.getLength()
+}

magic-boot-ui/src/layout/components/Sidebar/index.vue

@@ -7,6 +7,18 @@
       </span>
     </div>
     <logo v-if="showLogo" :collapse="isCollapse" />
+    <el-form>
+      <el-form-item>
+        <treeselect
+          style="width: 90%;margin: 0px 5%"
+          :options="menuTree"
+          placeholder="输入菜单名称搜索查找"
+          :disable-branch-nodes="true"
+          :show-count="true"
+          @select="selectMenu"
+        />
+      </el-form-item>
+    </el-form>
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
         :default-active="activeMenu"
@@ -25,8 +37,11 @@
 </template>
 
 <style scoped>
+  .el-form-item--small.el-form-item{
+    margin-bottom: 0px;
+  }
   .el-scrollbar >>> .el-scrollbar__wrap{
-    height: calc(100% - 60px)
+    height: calc(100% - 60px - 36px)
   }
   .logo-title {
     color:white;
@@ -35,7 +50,7 @@
     line-height: 60px;
     text-align: center;
     font-weight: 300;
-    box-shadow: 0px -1px 5px 0px #000;
+    /*box-shadow: 0px -1px 5px 0px #000;*/
     z-index: 1;
     position: relative;
   }
@@ -46,9 +61,12 @@ import { mapGetters } from 'vuex'
 import Logo from './Logo'
 import SidebarItem from './SidebarItem'
 import variables from '@/styles/variables.scss'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import treeTable from "@/scripts/treeTable";
 
 export default {
-  components: { SidebarItem, Logo },
+  components: { SidebarItem, Logo, Treeselect },
   computed: {
     ...mapGetters([
       'permission_routes',
@@ -72,6 +90,34 @@ export default {
     isCollapse() {
       return !this.sidebar.opened
     }
+  },
+  data() {
+    return {
+      menuTree: []
+    }
+  },
+  mounted() {
+    this.$get('menu/search').then(res => {
+      this.menuTree = res.data.list
+      this.deleteEmptyChildren(this.menuTree)
+    })
+  },
+  methods: {
+    deleteEmptyChildren(children) {
+      for(var i in children){
+        var chi = children[i]
+        if(chi.children && chi.children.length == 0){
+          delete chi.children
+        }else{
+          this.deleteEmptyChildren(chi.children)
+        }
+      }
+    },
+    selectMenu(node) {
+      if(node.url){
+        this.$router.push({ path: node.url })
+      }
+    }
   }
 }
 </script>