菜单修改

2023-12-26 16:17:30 +08:00
parent c37fdba0e7
commit 0d24db0aca
10 changed files with 307 additions and 1996 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,4 +1,10 @@
 <template>
-    <router-view></router-view>
+    <el-config-provider :locale="zhCn">
+        <router-view></router-view>
+    </el-config-provider>
 </template>
-<script setup lang="ts"></script>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+</script>
--- a/src/api/auth.ts
+++ b/src/api/auth.ts
@@ -0,0 +1,8 @@
+import createAxios from '@/utils/request'
+
+//登录获取token
+export function getRouteMenu() {
+    return createAxios({
+        url: '/user-boot/function/getRouteMenu'
+    })
+}
--- a/src/components/table/header/index.vue
+++ b/src/components/table/header/index.vue
@@ -0,0 +1,153 @@
+<template>
+    <!-- 通用搜索 -->
+    <transition name="el-zoom-in-bottom" mode="out-in">
+        <div class="table-com-search" v-if="isShowSelect">
+            <el-form @submit.prevent="" @keyup.enter="onComSearch" label-position="left" :inline="true">
+                <slot name="select"></slot>
+                <el-form-item>
+                    <el-button  @click="onComSearch" type="primary">查询</el-button>
+                    <el-button @click="onResetForm">重置</el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+    </transition>
+
+    <div class="table-header ba-scroll-style">
+        <slot name="operation"></slot>
+        <!-- 右侧搜索框和工具按钮 -->
+        <div class="table-search">
+            <div class="table-search-button-group">
+                    <el-button class="table-search-button-item" color="#dcdfe6" plain @click="showSelect">
+                        <Icon size="14" name="el-icon-Search" />
+                    </el-button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { inject,ref } from 'vue'
+import type TableStore from '@/utils/tableStore'
+
+const tableStore = inject('tableStore') as TableStore
+const isShowSelect = ref(false)
+const showSelect = () => {
+    isShowSelect.value = !isShowSelect.value
+}
+const onComSearch = () => {}
+const onResetForm = () => {}
+</script>
+
+<style scoped lang="scss">
+.table-header {
+    position: relative;
+    overflow-x: auto;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    max-width: 100%;
+    background-color: var(--ba-bg-color-overlay);
+    border: 1px solid var(--ba-border-color);
+    border-bottom: none;
+    padding: 13px 15px;
+    font-size: 14px;
+    .table-header-operate-text {
+        margin-left: 6px;
+    }
+}
+
+.table-com-search {
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
+    background-color: var(--ba-bg-color-overlay);
+    border: 1px solid var(--ba-border-color);
+    border-bottom: none;
+    padding: 13px 15px 0 15px;
+    font-size: 14px;
+    .com-search-col {
+        display: flex;
+        align-items: center;
+        padding-top: 8px;
+        color: var(--el-text-color-regular);
+        font-size: 13px;
+    }
+    .com-search-col-label {
+        width: 33.33%;
+        padding: 0 15px;
+        text-align: right;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+    .com-search-col-input {
+        padding: 0 15px;
+        width: 66.66%;
+    }
+    .com-search-col-input-range {
+        display: flex;
+        align-items: center;
+        padding: 0 15px;
+        width: 66.66%;
+        .range-separator {
+            padding: 0 5px;
+        }
+    }
+}
+.mlr-12 {
+    margin-left: 12px;
+}
+.mlr-12 + .el-button {
+    margin-left: 12px;
+}
+.table-search {
+    display: flex;
+    margin-left: auto;
+    .quick-search {
+        width: auto;
+    }
+}
+.table-search-button-group {
+    display: flex;
+    margin-left: 12px;
+    border: 1px solid var(--el-border-color);
+    border-radius: var(--el-border-radius-base);
+    overflow: hidden;
+    button:focus,
+    button:active {
+        background-color: var(--ba-bg-color-overlay);
+    }
+    button:hover {
+        background-color: var(--el-color-info-light-7);
+    }
+    .table-search-button-item {
+        height: 30px;
+        border: none;
+        border-radius: 0;
+    }
+    .el-button + .el-button {
+        margin: 0;
+    }
+    .right-border {
+        border-right: 1px solid var(--el-border-color);
+    }
+}
+
+html.dark {
+    .table-search-button-group {
+        button:focus,
+        button:active {
+            background-color: var(--el-color-info-dark-2);
+        }
+        button:hover {
+            background-color: var(--el-color-info-light-7);
+        }
+        button {
+            background-color: var(--ba-bg-color-overlay);
+            el-icon {
+                color: white !important;
+            }
+        }
+    }
+}
+</style>
--- a/src/components/table/search/index.vue
+++ b/src/components/table/search/index.vue
--- a/src/layouts/admin/index.vue
+++ b/src/layouts/admin/index.vue
@@ -19,6 +19,7 @@ import { useEventListener } from '@vueuse/core'
 import { isEmpty } from 'lodash-es'
 import { setNavTabsWidth } from '@/utils/layout'
 import { adminBaseRoutePath } from '@/router/static'
+import { getRouteMenu } from '@/api/auth'

 defineOptions({
    components: { Default, Classic, Streamline, Double }
@@ -49,111 +50,38 @@ const init = () => {
    /**
     * 后台初始化请求，获取站点配置，动态路由等信息
     */
-    handleAdminRoute([
-        {
-            id: 1,
-            pid: 0,
-            type: 'menu',
-            title: '控制台',
-            name: 'dashboard',
-            path: 'dashboard',
-            icon: 'fa fa-dashboard',
-            menu_type: 'tab',
-            url: '',
-            component: '/src/views/dashboard/index.vue',
-            keepalive: 'dashboard',
-            extend: 'none',
-            children: [
-                {
-                    id: 94,
-                    pid: 1,
-                    type: 'button',
-                    title: '查看',
-                    name: 'dashboard/index',
-                    path: '',
-                    icon: '',
-                    menu_type: null,
-                    url: '',
-                    component: '',
-                    keepalive: 0,
-                    extend: 'none'
+    getRouteMenu().then((res: any) => {
+        const handlerMenu = (data: any) => {
+            data.forEach((item: any) => {
+                item.path = item.routeName || item.title
+                item.name = item.routeName || item.title
+                item.component = '/src/views/dashboard/index.vue'
+                item.type = item.children && item.children.length > 0 ? 'menu_dir' : 'menu'
+                item.menu_type = item.children && item.children.length > 0 ? null : 'tab'
+                if (item.children) {
+                    handlerMenu(item.children)
                }
-            ]
-        },
-        {
-            id: 3,
-            pid: 0,
-            type: 'menu',
-            title: '测试1',
-            name: 'test',
-            path: 'test',
-            icon: 'fa fa-dashboard',
-            menu_type: 'tab',
-            url: '',
-            component: '/src/views/dashboard/test.vue',
-            keepalive: 'test',
-            extend: 'none'
-        },
-        {
-            id: 2,
-            pid: 0,
-            type: 'menu_dir',
-            title: '权限管理',
-            name: 'auth',
-            path: 'auth',
-            icon: 'fa fa-group',
-            menu_type: null,
-            url: '',
-            component: '',
-            keepalive: 0,
-            extend: 'none',
-            children: [
-                {
-                    id: 3,
-                    pid: 2,
-                    type: 'menu',
-                    title: '角色管理',
-                    name: 'auth/role',
-                    path: 'auth/role',
-                    icon: 'fa fa-group',
-                    menu_type: 'tab',
-                    url: '',
-                    component: '/src/views/auth/role.vue',
-                    keepalive: 'auth/role',
-                    extend: 'none',
-                    children: []
-                },
-                {
-                    id: 13,
-                    pid: 2,
-                    type: 'menu',
-                    title: '菜单规则管理',
-                    name: 'auth/menu',
-                    path: 'auth/menu',
-                    icon: 'el-icon-Grid',
-                    menu_type: 'tab',
-                    url: '',
-                    component: '/src/views/auth/menu/index.vue',
-                    keepalive: 'auth/menu',
-                    extend: 'none',
-                    children: []
-                }
-            ]
+            })
        }
-    ])
-    // 预跳转到上次路径
-    if (route.params.to) {
-        const lastRoute = JSON.parse(route.params.to as string)
-        if (lastRoute.path != adminBaseRoutePath) {
-            let query = !isEmpty(lastRoute.query) ? lastRoute.query : {}
-            routePush({ path: lastRoute.path, query: query })
-            return
-        }
-    }
+        handlerMenu(res.data)
+        handleAdminRoute(res.data)

-    // 跳转到第一个菜单
-    let firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
-    if (firstRoute) routePush(firstRoute.path)
+        // 预跳转到上次路径
+        if (route.params.to) {
+            const lastRoute = JSON.parse(route.params.to as string)
+            if (lastRoute.path != adminBaseRoutePath) {
+                let query = !isEmpty(lastRoute.query) ? lastRoute.query : {}
+                routePush({ path: lastRoute.path, query: query })
+                return
+            }
+        }
+
+        // 跳转到第一个菜单
+        console.log(navTabs.state.tabsViewRoutes)
+        let firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
+        console.log(firstRoute)
+        if (firstRoute) routePush(firstRoute.path)
+    })
 }

 const onAdaptiveLayout = () => {
--- a/src/utils/router.ts
+++ b/src/utils/router.ts
@@ -8,6 +8,7 @@ import { closeShade } from '@/utils/pageShade'
 import { adminBaseRoute } from '@/router/static'
 import { compact, isEmpty, reverse } from 'lodash-es'
 import { isAdminApp } from '@/utils/common'
+import { log } from 'console'

 /**
 * 导航失败有错误消息的路由push
--- a/src/utils/tableStore.ts
+++ b/src/utils/tableStore.ts
--- a/src/views/auth/menu/index.vue
+++ b/src/views/auth/menu/index.vue
@@ -1,26 +1,64 @@
 <template>
+    <TableHeader>
+        <template v-slot:select>
+            <el-form-item label="Activity name">
+                <el-input />
+            </el-form-item>
+            <el-form-item label="Activity name">
+                <el-input />
+            </el-form-item>
+            <el-form-item label="Activity name">
+                <el-input />
+            </el-form-item>
+            <el-form-item label="Activity name">
+                <el-input />
+            </el-form-item>
+            <el-form-item label="Activity name">
+                <el-input />
+            </el-form-item>
+            <el-form-item label="Activity name">
+                <el-input />
+            </el-form-item>
+            <el-form-item label="Activity name">
+                <el-input />
+            </el-form-item>
+            <el-form-item label="Activity name">
+                <el-input />
+            </el-form-item>
+            <el-form-item label="Activity name">
+                <el-input />
+            </el-form-item>
+            <el-form-item label="Activity name">
+                <el-input />
+            </el-form-item>
+        </template>
+        <template v-slot:operation>
+            <el-button type="primary">新增</el-button>
+        </template>
+    </TableHeader>
    <Table ref="tableRef" :pagination="false" />
 </template>
 <script setup lang="ts">
 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'
+
 defineOptions({
    name: 'auth/menu'
 })
 const tableRef = ref()
 const tableStore = new TableStore({
-    url: '/menu',
+    url: '/user-boot/function/functionTree',
    column: [
        { type: 'selection', align: 'center', width: '60' },
-        { label: '标题', prop: 'title', align: 'left' },
+        { label: '菜单名称', prop: 'title', align: 'left' },
        {
            label: '图标',
            prop: 'icon',
            align: 'center',
            width: '60',
-            render: 'icon',
-            default: 'fa fa-circle-o'
+            render: 'icon'
        },
        {
            label: '操作',