菜单管理

src/api/modules/system/menu.js

@@ -1,6 +1,7 @@
 import { HcApi } from '../../request/index'
 
 export default {
+    //懒加载菜单列表
     async getLazyList(form) {
         return HcApi({
             url: '/api/blade-system/menu/lazy-list',
@@ -8,4 +9,50 @@ export default {
             params: form,
         }, false)
     },
+    //全加载菜单树
+    async getMenuTree(tenantId) {
+        return HcApi({
+            url: '/api/blade-system/menu/tree',
+            method: 'get',
+            params: {
+                tenantId,
+            },
+        }, false)
+    },
+    //菜单详情
+    async detail(id) {
+        return HcApi({
+            url: '/api/blade-system/menu/detail',
+            method: 'get',
+            params: {
+                id,
+            },
+        }, false)
+    },
+    //新增菜单
+    async add(form) {
+        return HcApi({
+            url: '/api/blade-system/menu/submit',
+            method: 'post',
+            data: form,
+        }, false)
+    },
+    //更新菜单
+    async update(form) {
+        return HcApi({
+            url: '/api/blade-system/menu/submit',
+            method: 'post',
+            data: form,
+        }, false)
+    },
+    //删除菜单
+    async del(ids) {
+        return HcApi({
+            url: '/api/blade-system/menu/remove',
+            method: 'post',
+            params: {
+                ids,
+            },
+        }, false)
+    },
 }

src/views/system/menu.vue

@@ -11,7 +11,7 @@
             </div>
         </template>
         <template #extra>
-            <el-button hc-btn type="primary">新增</el-button>
+            <el-button hc-btn type="primary" @click="addClick">新增</el-button>
             <el-button hc-btn type="danger">删除</el-button>
         </template>
         <hc-table
@@ -32,19 +32,60 @@
                 <el-link type="danger">删除</el-link>
             </template>
         </hc-table>
+
+        <!-- 新增/修改 菜单 -->
+        <hc-new-dialog v-model="isDialogShow" :footer="false" widths="800px" :title="`${formModel.id ? '修改' : '新增'}菜单`" @close="dialogClose">
+            <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="top" label-width="auto">
+                <el-row :gutter="20">
+                    <el-col :span="8">
+                        <el-form-item label="菜单名称：" prop="name">
+                            <el-input v-model="formModel.name" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="路由地址：" prop="path">
+                            <el-input v-model="formModel.path" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="菜单编号：" prop="code">
+                            <el-input v-model="formModel.code" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="菜单图标：">
+                            <el-input v-model="formModel.source" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="所属系统：" prop="sysId">
+                            <el-select v-model="formModel.sysId" placeholder="选择所属系统" filterable clearable block>
+                                <el-option v-for="item in clinets" :key="item.id" :label="item.clientId" :value="item.id" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="上级菜单：">
+                            <el-tree-select v-model="formModel.parentId" placeholder="选择上级菜单" :data="levelMenu" filterable check-strictly block :render-after-expand="false" />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+        </hc-new-dialog>
     </hc-new-card>
 </template>
 
 <script setup>
 import { onActivated, ref } from 'vue'
-import mainApi from '~api/system/menu'
 import { getArrValue } from 'js-fast-way'
 import { getClinetAll } from '~api/other'
+import mainApi from '~api/system/menu'
 
 //激活
 onActivated(() => {
     getClinetAllApi()
     getTableData()
+    getLevelMenuData()
 })
 
 //获取所有系统
@@ -110,6 +151,48 @@ const tableCheckKeys = ref([])
 const tableCheckChange = (rows) => {
     tableCheckKeys.value = rows
 }
+
+//上级菜单
+const levelMenu = ref([])
+const getLevelMenuData = async () => {
+    const { data } = await mainApi.getMenuTree()
+    levelMenu.value = getArrValue(data)
+}
+
+//新增/修改 弹窗
+const isDialogShow = ref(false)
+
+//菜单表单
+const formRef = ref(null)
+const formModel = ref({})
+const formRules = {
+    name: {
+        required: true,
+        trigger: 'blur',
+        message: '请输入菜单名称',
+    },
+    path: {
+        required: true,
+        trigger: 'blur',
+        message: '请输入路由地址',
+    },
+    code: {
+        required: true,
+        trigger: 'blur',
+        message: '请输入菜单编号',
+    },
+}
+
+//新增菜单
+const addClick = () => {
+    formModel.value = {}
+    isDialogShow.value = true
+}
+
+//关闭弹窗
+const dialogClose = () => {
+    isDialogShow.value = false
+}
 </script>
 
 <style scoped lang="scss">