菜单管理

src/views/auth/menu/api.vue

@@ -0,0 +1,122 @@
+<template>
+    <div>
+        <div class="menu-index-header">
+            <div style="flex: 1; font-weight: 700">接口权限列表</div>
+            <el-input
+                v-model="tableStore.table.params.searchValue"
+                style="width: 240px"
+                placeholder="请输入菜单名称"
+                class="ml10"
+                clearable
+                @input="search"
+            />
+            <el-button :icon="Plus" type="primary" @click="addMenu" class="ml10" :disabled="!props.id">新增</el-button>
+        </div>
+        <Table ref="tableRef" />
+        <popupApi ref="popupRef" @init="tableStore.index()"></popupApi>
+    </div>
+</template>
+<script setup lang="ts">
+import { Plus } from '@element-plus/icons-vue'
+import { ref, Ref, inject, provide, watch } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import popupApi from './popupApi.vue'
+import { deleteMenu } from '@/api/user-boot/function'
+
+defineOptions({
+    name: 'auth/menu/api'
+})
+const emits = defineEmits<{
+    (e: 'init'): void
+}>()
+const props = defineProps({
+    id: {
+        type: String,
+        default: ''
+    }
+})
+const tableRef = ref()
+const popupRef = ref()
+const apiList = ref([])
+const tableStore = new TableStore({
+    showPage: false,
+    url: '/user-boot/function/getButtonById',
+    column: [
+        { title: '普通接口/接口名称', field: 'name' },
+        { title: '接口类型', field: 'type' },
+        { title: 'URL接口路径', field: 'path' },
+        {
+            title: '操作',
+            align: 'center',
+            width: '130',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '编辑编辑',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'tipButton',
+                    click: row => {
+                        popupRef.value.open('编辑接口权限', row)
+                    }
+                },
+                {
+                    name: 'del',
+                    title: '删除接口',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'confirmButton',
+                    popconfirm: {
+                        confirmButtonText: '确认',
+                        cancelButtonText: '取消',
+                        confirmButtonType: 'danger',
+                        title: '确定删除该菜单吗？'
+                    },
+                    click: row => {
+                        deleteMenu(row.id).then(() => {
+                            tableStore.index()
+                        })
+                    }
+                }
+            ]
+        }
+    ],
+    loadCallback: () => {
+        apiList.value = tableStore.table.data
+        search()
+    }
+})
+tableStore.table.loading = false
+watch(
+    () => props.id,
+    () => {
+        tableStore.table.params.id = props.id
+        tableStore.index()
+    }
+)
+provide('tableStore', tableStore)
+
+const addMenu = () => {
+    console.log(popupRef)
+    popupRef.value.open('新增接口权限', {
+        pid: props.id
+    })
+}
+const search = () => {
+    tableStore.table.data = apiList.value.filter(
+        (item: any) =>
+            !tableStore.table.params.searchValue ||
+            item.name.indexOf(tableStore.table.params.searchValue) !== -1 ||
+            item.path.indexOf(tableStore.table.params.searchValue) !== -1
+    )
+}
+</script>
+<style lang="scss">
+.menu-index-header {
+    display: flex;
+    padding: 13px 15px;
+    align-items: center;
+}
+</style>

src/views/auth/menu/index.vue

@@ -1,101 +1,38 @@
 <template>
-    <div class="default-main">
-        <TableHeader>
-            <template v-slot:operation>
-                <el-button :icon="Plus" type="primary" @click="addMenu">新增</el-button>
-            </template>
-        </TableHeader>
-        <Table ref="tableRef" />
-        <popupForm ref="popupRef"></popupForm>
+    <div class='default-main' style='display: flex' v-loading='loading'>
+        <Menu style='width: 500px' @init='init' @select='select' :menu-data='menuData' />
+        <Api style='width: calc(100% - 500px)' @init='init' :id='selectedId' />
     </div>
 </template>
-<script setup lang="ts">
-import { Plus } from '@element-plus/icons-vue'
-import { ref, onMounted, provide } from 'vue'
-import TableStore from '@/utils/tableStore'
-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'
+<script setup lang='ts'>
+import { functionTree } from '@/api/user-boot/function'
+import Menu from './menu.vue'
+import Api from './api.vue'
+import { provide, reactive, ref } from 'vue'
 
 defineOptions({
     name: 'auth/menu'
 })
-const tableRef = ref()
-const popupRef = ref()
-const navTabs = useNavTabs()
-const tableStore = new TableStore({
-    showPage: false,
-    url: '/user-boot/function/functionTree',
-    column: [
-        { title: '菜单名称', field: 'title', align: 'left', treeNode: true },
-        {
-            title: '图标',
-            field: 'icon',
-            align: 'center',
-            width: '60',
-            render: 'icon'
-        },
-        {
-            title: '操作',
-            align: 'center',
-            width: '130',
-            render: 'buttons',
-            buttons: [
-                {
-                    name: 'edit',
-                    title: '编辑',
-                    type: 'primary',
-                    icon: 'el-icon-EditPen',
-                    render: 'tipButton',
-                    click: row => {
-                        popupRef.value.open('编辑菜单', row)
-                    }
-                },
-                {
-                    name: 'del',
-                    title: '删除',
-                    type: 'danger',
-                    icon: 'el-icon-Delete',
-                    render: 'confirmButton',
-                    popconfirm: {
-                        confirmButtonText: '确认',
-                        cancelButtonText: '取消',
-                        confirmButtonType: 'danger',
-                        title: '确定删除该菜单吗？'
-                    },
-                    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)
-
-onMounted(() => {
-    tableStore.table.ref = tableRef.value
-    tableStore.index()
-    tableStore.table.loading = false
-})
-const addMenu = () => {
-    console.log(popupRef)
-    popupRef.value.open('新增菜单')
+const menuData = ref<any[]>([])
+const selectedId = ref('')
+const loading = ref(true)
+const select = (id: string) => {
+    selectedId.value = id
 }
+const filterData = (arr: any[]) => {
+    return arr.filter((item: any) => {
+        if (item.children.length) {
+            item.children = filterData(item.children)
+        }
+        return item.type === 0
+    })
+}
+const init = () => {
+    loading.value = true
+    functionTree().then(res => {
+        menuData.value = filterData(res.data)
+        loading.value = false
+    })
+}
+init()
 </script>

src/views/auth/menu/menu.vue

@@ -0,0 +1,160 @@
+<template>
+    <div>
+        <div class="menu-index-header">
+            <div style="flex: 1; font-weight: 700">菜单列表</div>
+            <el-input
+                v-model="tableStore.table.params.searchValue"
+                style="width: 240px"
+                placeholder="请输入菜单名称"
+                class="ml10"
+                clearable
+                @input="search"
+            />
+            <el-button :icon="Plus" type="primary" @click="addMenu" class="ml10">新增</el-button>
+        </div>
+        <Table
+            :tree-config="{ reserve: true, expandAll: !!tableStore.table.params.searchValue }"
+            @currentChange="currentChange"
+        />
+        <popupMenu ref="popupRef" @init="emits('init')"></popupMenu>
+    </div>
+</template>
+<script setup lang="ts">
+import { Plus } from '@element-plus/icons-vue'
+import { ref, nextTick, inject, provide, watch } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import popupMenu from './popupMenu.vue'
+import { delMenu } from '@/api/systerm'
+
+defineOptions({
+    name: 'auth/menu/menu'
+})
+const emits = defineEmits<{
+    (e: 'init'): void
+    (e: 'select', row: any): void
+}>()
+const props = withDefaults(
+    defineProps<{
+        menuData: treeData[]
+    }>(),
+    {
+        menuData: () => {
+            return []
+        }
+    }
+)
+const popupRef = ref()
+const tableStore = new TableStore({
+    showPage: false,
+    url: '/user-boot/function/functionTree',
+    column: [
+        { title: '菜单名称', field: 'title', align: 'left', treeNode: true },
+        {
+            title: '图标',
+            field: 'icon',
+            align: 'center',
+            width: '60',
+            render: 'icon'
+        },
+        {
+            title: '操作',
+            align: 'center',
+            width: '130',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '新增菜单',
+                    type: 'primary',
+                    icon: 'el-icon-Plus',
+                    render: 'tipButton',
+                    click: row => {
+                        popupRef.value.open('新增菜单', { pid: row.id })
+                    }
+                },
+                {
+                    name: 'edit',
+                    title: '编辑菜单',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'tipButton',
+                    click: row => {
+                        popupRef.value.open('编辑菜单', row)
+                    }
+                },
+                {
+                    name: 'del',
+                    title: '删除菜单',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'confirmButton',
+                    popconfirm: {
+                        confirmButtonText: '确认',
+                        cancelButtonText: '取消',
+                        confirmButtonType: 'danger',
+                        title: '确定删除该菜单吗？'
+                    },
+                    click: row => {
+                        delMenu(row.id).then(() => {
+                            emits('init')
+                        })
+                    }
+                }
+            ]
+        }
+    ]
+})
+tableStore.table.loading = false
+watch(
+    () => props.menuData,
+    () => {
+        search()
+    }
+)
+provide('tableStore', tableStore)
+
+const addMenu = () => {
+    console.log(popupRef)
+    popupRef.value.open('新增菜单')
+}
+const currentChange = (newValue: any) => {
+    emits('select', newValue.row.id)
+}
+const search = () => {
+    tableStore.table.data = filterData(JSON.parse(JSON.stringify(props.menuData)))
+    if (tableStore.table.params.searchValue) {
+        nextTick(() => {
+            tableStore.table.ref?.setAllTreeExpand(true)
+        })
+    } else {
+        nextTick(() => {
+            tableStore.table.ref?.setAllTreeExpand(false)
+        })
+    }
+}
+
+// 过滤
+const filterData = (arr: treeData[]): treeData[] => {
+    if (!tableStore.table.params.searchValue) {
+        return arr
+    }
+    return arr.filter((item: treeData) => {
+        if (item.title.includes(tableStore.table.params.searchValue)) {
+            return true
+        } else if (item.children?.length > 0) {
+            item.children = filterData(item.children)
+            return item.children.length > 0
+        } else {
+            return false
+        }
+    })
+}
+</script>
+<style lang="scss">
+.menu-index-header {
+    display: flex;
+    padding: 13px 15px;
+    align-items: center;
+}
+</style>

src/views/auth/menu/popupApi.vue

@@ -0,0 +1,103 @@
+<template>
+    <el-dialog class="cn-operate-dialog" v-model="dialogVisible" :title="title">
+        <el-scrollbar>
+            <el-form :mode="form" :inline="false" :model="form" label-width="120px" :rules="rules">
+                <el-form-item prop="name" label="接口/按钮名称">
+                    <el-input v-model="form.name" placeholder="请输入接口名称" />
+                </el-form-item>
+                <el-form-item prop="code" label="接口/按钮标识">
+                    <el-input v-model="form.code" placeholder="请输入英文接口标识" />
+                </el-form-item>
+                <el-form-item prop="path" label="接口路径">
+                    <el-input v-model="form.path" placeholder="请输入接口路径" />
+                </el-form-item>
+                <el-form-item prop="type" label="接口类型">
+                    <el-radio-group v-model="form.type">
+                        <el-radio :label="1">普通接口</el-radio>
+                        <el-radio :label="2">公用接口</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item prop="sort" label="排序">
+                    <el-input-number v-model="form.sort" :min="0" />
+                </el-form-item>
+                <el-form-item prop="remark" label="接口/按钮描述">
+                    <el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" />
+                </el-form-item>
+            </el-form>
+        </el-scrollbar>
+
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="dialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="submit">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, inject } from 'vue'
+import { reactive } from 'vue'
+import { update, add } from '@/api/user-boot/function'
+
+defineOptions({
+    name: 'auth/menu/popupApi'
+})
+const emits = defineEmits<{
+    (e: 'init'): void
+}>()
+const form: any = reactive({
+    id: '',
+    pid: '0',
+    code: '',
+    name: '',
+    path: '',
+    type: 1,
+    sort: '',
+    remark: ''
+})
+const rules = {
+    code: [
+        { required: true, message: '标识不能为空', trigger: 'blur' },
+        {
+            pattern: /^[a-zA-Z_]{1}[a-zA-Z0-9_]{2,15}$/,
+            message: '请输入至少3-20位英文',
+            min: 3,
+            max: 20,
+            trigger: 'blur'
+        }
+    ],
+    name: [{ required: true, message: '请输入接口名称', trigger: 'blur' }],
+    sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
+    path: [{ required: true, message: '请输入接口路径', trigger: 'blur' }]
+}
+const dialogVisible = ref(false)
+const title = ref('新增菜单')
+const open = (text: string, data: anyObj) => {
+    title.value = text
+    // 重置表单
+    for (let key in form) {
+        form[key] = ''
+    }
+    form.type = 1
+    form.pid = data.pid
+    if (data.id) {
+        for (let key in form) {
+            form[key] = data[key] || ''
+        }
+    }
+    dialogVisible.value = true
+}
+const submit = async () => {
+    if (form.id) {
+        await update(form)
+    } else {
+        let obj = JSON.parse(JSON.stringify(form))
+        delete obj.id
+        await add(obj)
+    }
+    emits('init')
+    dialogVisible.value = false
+}
+
+defineExpose({ open })
+</script>

src/views/auth/menu/popupMenu.vue

@@ -46,10 +46,18 @@ import TableStore from '@/utils/tableStore'
 import IconSelector from '@/components/baInput/components/iconSelector.vue'
 import { updateMenu, addMenu } from '@/api/systerm'
 
+defineOptions({
+    name: 'auth/menu/popupMenu'
+})
+const emits = defineEmits<{
+    (e: 'init'): void
+}>()
 const tableStore = inject('tableStore') as TableStore
 const cascaderProps = {
     label: 'title',
-    value: 'id'
+    value: 'id',
+    checkStrictly: true,
+    emitPath: false
 }
 const form: any = reactive({
     code: '',
@@ -69,20 +77,20 @@ const title = ref('新增菜单')
 const open = (text: string, data?: anyObj) => {
     console.log(data)
     title.value = text
+    // 重置表单
+    for (let key in form) {
+        form[key] = ''
+    }
+    form.pid = '0'
+    form.sort = 0
+    form.type = 0
+
     if (data) {
         for (let key in form) {
-            form[key] = data[key]
+            form[key] = data[key] || ''
         }
-        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
+        form.path = data.routePath || ''
+        form.name = data.title || ''
     }
     dialogVisible.value = true
 }
@@ -95,9 +103,9 @@ const submit = async () => {
         delete obj.id
         await addMenu(obj)
     }
-    tableStore.index()
+    emits('init')
     dialogVisible.value = false
 }
 
 defineExpose({ open })
-</script>
+</script>