菜单管理界面

web/src/apps/AppMenu.vue

@@ -1,23 +1,74 @@
 <template>
   <section class="AppMenu">
     <ku-layout :title="$options.label">
-
+      <ku-search-bar>
+        <template #left>
+          <el-button type="primary" :icon="CirclePlus">新增一级菜单</el-button>
+        </template>
+        <template #right>
+          <el-input v-model="search.name" placeholder="搜索菜单名称" @click="page.current=1,getTableData()" clearable/>
+        </template>
+      </ku-search-bar>
+      <ku-table :data="tableData" :columns="columns" @list="getTableData()">
+        <template v-slot:ops="{row}">
+          <el-button text v-text="`删除`" @click="handleDelete(row)"/>
+          <el-button text v-text="`添加下级`" @click="addMenu(row)" v-if="row.type<2"/>
+          <el-button text v-text="`编辑`" @click="handleEdit(row)"/>
+        </template>
+      </ku-table>
     </ku-layout>
   </section>
 </template>
 
 <script>
 import KuLayout from "../components/KuLayout";
+import KuSearchBar from "../components/KuSearchBar";
+import {CirclePlus} from "@element-plus/icons-vue";
+import KuTable from "../components/KuTable";
 
 export default {
   name: "AppMenu",
-  components: {KuLayout},
+  components: {KuTable, KuSearchBar, KuLayout},
   label: "菜单管理",
   data() {
-    return {}
+    return {
+      CirclePlus,
+      search: {name: ""},
+      page: {current: 1},
+      tableData: [
+        {
+          id: 1, menuName: "测试", type: "菜单", status: 1, showIndex: 1,
+          children: [
+            {id: 2, menuName: "测试2", type: "菜单", status: 1, showIndex: 1},
+            {id: 3, menuName: "测试3", type: "菜单", status: 1, showIndex: 2},
+          ]
+        }
+      ],
+      columns: [
+        {label: "菜单名称", prop: "menuName"},
+        {label: "菜单类型", prop: "type"},
+        {label: "应用模块", prop: "component"},
+        {label: "是否显示", prop: "status", dict: "yesOrNo"},
+        {label: "排序", prop: "showIndex"},
+      ]
+    }
+  },
+  methods: {
+    getTableData() {
+
+    },
+    handleDelete(row) {
+
+    },
+    handleEdit(row) {
+
+    },
+    addMenu(row) {
+
+    }
   },
-  methods: {},
   created() {
+    this.getTableData()
   }
 }
 </script>

web/src/components/KuLayout.vue

@@ -3,7 +3,7 @@
     <ku-title :title="title" border>
       <slot name="title" v-if="$slots.title"/>
     </ku-title>
-    <div class="content fill pad-v16">
+    <div class="content fill pad-t16 pad-h16 mar-v16">
       <slot/>
     </div>
   </section>
@@ -30,6 +30,8 @@ export default {
   overflow: hidden;
 
   .content {
+    background: #fff;
+    padding-bottom: 40px;
   }
 }
 </style>

web/src/components/KuSearchBar.vue

@@ -0,0 +1,71 @@
+<template>
+  <section>
+    <div ref="SearchBarZone" class="KuSearchBar" :class="{bottomBorder}">
+      <div class="searchLeftZone">
+        <slot name="left"/>
+      </div>
+      <div class="searchRightZone" ref="searchRightZone">
+        <slot name="right"/>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "KuSearchBar",
+  props: {
+    bottomBorder: Boolean,
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.KuSearchBar {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 10px;
+  padding-bottom: 12px;
+
+  &.bottomBorder {
+    border-bottom: 1px solid #eee;
+  }
+
+  :deep(.searchLeftZone ) {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+  }
+
+  :deep(.searchRightZone ) {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    align-self: flex-start;
+
+    .el-input {
+      width: 280px;
+    }
+
+    * + button, * + div, * + section {
+      margin-left: 8px;
+    }
+  }
+
+  .el-input {
+    width: auto;
+  }
+}
+
+.AiPullDown {
+  margin-top: 8px;
+}
+
+:deep( .searchLeftZone > .el-button), :deep( .searchRightZone > .el-button ) {
+  margin-left: 0;
+}
+</style>

web/src/components/KuTable.vue

@@ -1,7 +1,12 @@
 <template>
   <section class="KuTable">
-    <el-table :data="data">
+    <el-table :data="data" row-key="id">
       <el-table-column v-for="col in columns" v-bind="col"/>
+      <el-table-column v-if="$slots.ops" label="操作" align="center">
+        <template v-slot="{row,$index}">
+          <slot name="ops" :row="row" :index="$index"/>
+        </template>
+      </el-table-column>
     </el-table>
   </section>
 </template>