菜单管理

src/api/systerm.ts

@@ -1,11 +1,26 @@
 import createAxios from '@/utils/request'
 
 // 菜单修改
-export function updateMenu(params:anyObj) {
+export function updateMenu(params: anyObj) {
     return createAxios({
         url: '/user-boot/function/update',
         method: 'PUT',
-        data:params
+        data: params
+    })
+}
+
+export function addMenu(params: anyObj) {
+    return createAxios({
+        url: '/user-boot/function/add',
+        method: 'POST',
+        data: params
+    })
+}
+
+export function delMenu(id: string) {
+    return createAxios({
+        url: '/user-boot/function/delete?id=' + id,
+        method: 'delete'
     })
 }
 

src/views/auth/menu/index.vue

@@ -17,6 +17,7 @@ import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
 import popupForm from './popupForm.vue'
 import { useNavTabs } from '@/stores/navTabs'
+import {  delMenu } from '@/api/systerm'
 
 defineOptions({
     name: 'auth/menu'
@@ -63,11 +64,27 @@ const tableStore = new TableStore({
                         confirmButtonType: 'danger',
                         title: '确定删除该菜单吗？'
                     },
-                    click: row => {}
+                    click: row => {
+                        delMenu(row.id).then(() => {
+                            tableStore.index()
+                        })
+                    }
                 }
             ]
         }
-    ]
+    ],
+    loadCallback:()=>{
+        // 过滤数组中type等于1的数据，children下钻
+        const filterData = (arr:any[])=>{
+            return  arr.filter((item:any)=>{
+                if (item.children.length) {
+                    item.children = filterData(item.children)
+                }
+                return item.type != 1
+            })
+        }
+        tableStore.table.data = filterData(tableStore.table.data)
+    }
 })
 provide('tableStore', tableStore)
 

src/views/auth/menu/popupForm.vue

@@ -1,57 +1,57 @@
 <template>
-    <el-dialog class="ba-operate-dialog" v-model="dialogVisible" :title="title">
+    <el-dialog class='ba-operate-dialog' v-model='dialogVisible' :title='title'>
         <el-scrollbar>
-            <el-form :inline="false" :model="form" label-width="120px">
+            <el-form :inline='false' :model='form' label-width='120px'>
-                <el-form-item label="上级菜单">
+                <el-form-item label='上级菜单'>
                     <el-cascader
-                        v-model="form.pid"
+                        v-model='form.pid'
-                        :options="tableStore.table.data"
+                        :options='tableStore.table.data'
-                        :props="cascaderProps"
+                        :props='cascaderProps'
-                        style="width: 100%"
+                        style='width: 100%'
                     />
                 </el-form-item>
-                <el-form-item label="菜单名称">
+                <el-form-item label='菜单名称'>
-                    <el-input v-model="form.name" placeholder="请输入菜单名称" />
+                    <el-input v-model='form.name' placeholder='请输入菜单名称' />
                 </el-form-item>
-                <el-form-item label="图标">
+                <el-form-item label='图标'>
-                    <IconSelector v-model="form.icon" placeholder="请选择图标" />
+                    <IconSelector v-model='form.icon' placeholder='请选择图标' />
                 </el-form-item>
-                <el-form-item label="菜单路由">
+                <el-form-item label='菜单路由'>
-                    <el-input v-model="form.path" placeholder="请输入菜单名称" />
+                    <el-input v-model='form.path' placeholder='请输入菜单名称' />
                 </el-form-item>
-                <el-form-item label="组件路径">
+                <el-form-item label='组件路径'>
-                    <el-input v-model="form.routeName" placeholder="请输入组件路径，如/src/views/dashboard/index.vue" />
+                    <el-input v-model='form.routeName' placeholder='请输入组件路径，如/src/views/dashboard/index.vue' />
                 </el-form-item>
-                <el-form-item label="排序">
+                <el-form-item label='排序'>
-                    <el-input-number v-model="form.sort" :min="0" />
+                    <el-input-number v-model='form.sort' :min='0' />
                 </el-form-item>
-                <el-form-item label="菜单描述">
+                <el-form-item label='菜单描述'>
-                    <el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" />
+                    <el-input v-model='form.remark' :rows='2' type='textarea' placeholder='请输入描述' />
                 </el-form-item>
             </el-form>
         </el-scrollbar>
 
         <template #footer>
-            <span class="dialog-footer">
+            <span class='dialog-footer'>
-                <el-button @click="dialogVisible = false">取消</el-button>
+                <el-button @click='dialogVisible = false'>取消</el-button>
-                <el-button type="primary" @click="submit">确认</el-button>
+                <el-button type='primary' @click='submit'>确认</el-button>
             </span>
         </template>
     </el-dialog>
 </template>
-<script lang="ts" setup>
+<script lang='ts' setup>
 import { ref, inject } from 'vue'
 import { reactive } from 'vue'
 import TableStore from '@/utils/tableStore'
 import IconSelector from '@/components/baInput/components/iconSelector.vue'
-import { updateMenu } from '@/api/systerm'
+import { updateMenu, addMenu } from '@/api/systerm'
 
 const tableStore = inject('tableStore') as TableStore
 const cascaderProps = {
     label: 'title',
     value: 'id'
 }
-const form = reactive({
+const form: any = reactive({
     code: '',
     icon: '',
     id: '',
@@ -59,7 +59,7 @@ const form = reactive({
     path: '',
     pid: '0',
     remark: '',
-    routeName: null,
+    routeName: '',
     sort: 0,
     type: 0
 })
@@ -75,14 +75,28 @@ const open = (text: string, data?: anyObj) => {
         }
         form.path = data.routePath
         form.name = data.title
+    } else {
+        // 重置表单
+        for (let key in form) {
+            form[key] = ''
+        }
+        form.pid = '0'
+        form.sort = 0
+        form.type = 0
     }
     dialogVisible.value = true
 }
-const submit = () => {
+const submit = async () => {
-    updateMenu(form).then(res => {
+    if (form.id) {
+        await updateMenu(form)
+    } else {
+        form.code = 'menu'
+        let obj = JSON.parse(JSON.stringify(form))
+        delete obj.id
+        await addMenu(obj)
+    }
     tableStore.index()
     dialogVisible.value = false
-    })
 }
 
 defineExpose({ open })