🚧

src/assets/css/custom-element.scss

@@ -23,22 +23,32 @@
         color: $main-color;
     }
 }
+.el-button.is-link {
+    color: $main-color;
+    &:hover,
+    &:active {
+        color: rgba($main-color, .8);
+    }
 
+    &:focus {
+        color: rgba($main-color, .7);
+    }
+}
 .el-button.el-button--primary {
     background-color: $main-color;
     border-color: $main-color;
     opacity: 1;
-    transition: all .6;
+    transition: all .6s;
 
     &:hover,
     &:active {
         opacity: .7;
-        transition: all .6;
+        transition: all .6s;
     }
 
     &:focus {
         opacity: .9;
-        transition: all .6;
+        transition: all .6s;
     }
 }
 .el-form-item {

src/assets/css/global.scss

@@ -152,4 +152,56 @@ body {
             }
         }
     }
+}
+
+.table-page {
+    width: 100%;
+    height: 100%;
+    .search-part {
+        width: 100%;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        &>* ~ * {
+            margin-left: 20px;
+        }
+        .search-cell {
+            display: flex;
+            align-items: center;
+            .label {
+                flex-shrink: 0;
+                margin-right: 10px;
+            }
+        }
+    }
+    .button-part {
+        width: 100%;
+        height: 40px;
+        margin-top: 20px;
+        display: flex;
+        align-items: center;
+        &>* ~ * {
+            margin-left: 20px;
+        }
+    }
+    .table-part {
+        width: 100%;
+        height: calc(100% - 170px);
+        margin-top: 10px;
+        .el-table {
+            .el-table__header {
+                th {
+                    background: rgba($main-color, .05);
+                }
+            }
+        }
+    }
+    .pagination-part {
+        width: 100%;
+        height: 50px;
+        margin-top: 20px;
+        .el-pagination {
+            justify-content: flex-end;
+        }
+    }
 }

src/components/common-menu.vue

@@ -0,0 +1,55 @@
+<template>
+    <el-menu :default-active="defaultActive" router @select="handleSelect">
+        <el-menu-item v-for="(item, index) in menuData" :key="'menu-' + index" :index="item.path">
+            <span>{{ item.name }}</span>
+        </el-menu-item>
+    </el-menu>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import type { MenuItem } from '@/utils/public-interface'
+
+const router = useRouter()
+const route = useRoute()
+
+const emit = defineEmits(['selectMenu'])
+
+interface Props {
+    menuData: Array<MenuItem>
+}
+const props = withDefaults(defineProps<Props>(), {
+    menuData: () => [{
+        name: '名称',
+        path: '/'
+    }]
+})
+
+const defaultActive = ref('/permissions-manage/role-manage')
+
+router.beforeEach((to, from, next) => {
+    handleSelect(to.path)
+    next()
+});
+
+onMounted(() => {
+    router.isReady().then(() => {
+        handleSelect(route.path)
+    })
+})
+
+const handleSelect = (index: string) => {
+    defaultActive.value = index
+    emit('selectMenu', props.menuData.find((o: MenuItem) => o.path === index))
+}
+</script>
+
+<style lang='scss' scoped>
+.el-menu {
+    border: 0;
+    .el-menu-item.is-active {
+        background: #f2f3f5;
+    }
+}
+</style>

src/components/common-pagination.vue

@@ -0,0 +1,27 @@
+<template>
+    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" background
+        layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100]" :total="total"
+        @size-change="paginationChange" @current-change="paginationChange" />
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+
+interface Props {
+    total: number
+}
+const props = withDefaults(defineProps<Props>(), {
+    total: () => 0
+})
+
+const currentPage = ref(1)
+const pageSize = ref(10)
+
+const emit = defineEmits(['paginationChange'])
+
+const paginationChange = () => {
+    emit('paginationChange', currentPage.value, pageSize.value)
+}
+</script>
+
+<style lang='scss' scoped></style>

src/components/page-tabs.vue

@@ -0,0 +1,64 @@
+<template>
+    <div class="page-tabs">
+        <div class="tabs-item" v-for="(item, index) in tabs" :key="index" :class="{'active': tabActive === item.path}" @click="tabClick(item)">{{ item.name }}</div>
+    </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+import type { MenuItem } from '@/utils/public-interface'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const tabs = ref([] as Array<MenuItem>)
+const tabActive = ref('')
+
+defineExpose({
+    setTab
+})
+
+function setTab(e: MenuItem) {
+    tabActive.value = e.path
+    if(!tabs.value.some((o: MenuItem) => o.path === e.path)) {
+        tabs.value.push(e)
+    }
+}
+
+const tabClick = (e: MenuItem) => {
+    setTab(e)
+    router.push(e.path)
+}
+
+
+</script>
+
+<style lang='scss' scoped>
+.page-tabs {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    background: white;
+    border-top: 1px solid $border-color;
+    .tabs-item {
+        cursor: pointer;
+        width: auto;
+        height: 100%;
+        padding: 0 20px;
+        display: flex;
+        align-items: center;
+        transition: background .6s;
+        &:hover {
+            color: $main-color;
+            background: rgba($main-color, .05);
+            transition: background .6s;
+        }
+        &.active {
+            color: $main-color;
+            background: rgba($main-color, .1);
+            font-weight: 600;
+            transition: background .6s;
+        }
+    }
+}
+</style>

src/components/system-logs.vue

@@ -19,7 +19,6 @@ while (activities.length < 10) {
         ip: '127.0.0.1'
     })
 }
-console.log(activities)
 </script>
 
 <style lang='scss' scoped></style>

src/router/index.ts

@@ -23,7 +23,25 @@ const router = createRouter({
                 {
                     path: '/permissions-manage',
                     name: '权限管理',
+                    redirect: '/permissions-manage/doctor-manage',
                     component: () => import('@/views/permissions-manage/permissions-manage.vue'),
+                    children: [
+                        {
+                            path: '/permissions-manage/doctor-manage',
+                            name: '医生管理',
+                            component: () => import('@/views/permissions-manage/doctor-manage.vue'),
+                        },
+                        {
+                            path: '/permissions-manage/role-manage',
+                            name: '角色管理',
+                            component: () => import('@/views/permissions-manage/role-manage.vue'),
+                        },
+                        {
+                            path: '/permissions-manage/menu-manage',
+                            name: '菜单管理',
+                            component: () => import('@/views/permissions-manage/menu-manage.vue'),
+                        }
+                    ]
                 },
                 {
                     path: '/patients-manage',

src/utils/public-interface.ts

@@ -0,0 +1,4 @@
+export interface MenuItem {
+    name: string
+    path: string
+}

src/views/index.vue

@@ -5,7 +5,7 @@
                 <img src="@/assets/imgs/logo.png" />
             </div>
             <ul class="menu-box">
-                <li class="menu-item" v-for="item in menus" :key="item.path" :class="{ 'active': menuActive === item.path }"
+                <li class="menu-item" v-for="item in menus" :key="item.path" :class="{ 'active': menuActive.indexOf(item.path) === 0 }"
                     @click="menuToPath(item)"><i :class="item.icon"></i><span>{{ item.label
                     }}</span></li>
             </ul>
@@ -82,12 +82,15 @@ const menus = [
 ]
 
 const isShowUserInfoDrawer = ref(false)
-const menuActive = ref('/home')
+const menuActive = ref('/')
 
 router.isReady().then(() => {
-    console.log(route)
     menuActive.value = route.path
 })
+router.beforeEach((to, from, next) => {
+    menuActive.value = to.path
+    next()
+});
 
 onMounted(() => {
 
@@ -170,17 +173,19 @@ const userCommand = (e: string) => {
                 line-height: 50px;
                 padding: 0 20px;
                 margin: 0;
-                transition: all .3s;
+                transition: all .5s;
-                -webkit-transition: all .3s;
+                -webkit-transition: all .5s;
 
                 &:hover {
                     background: #F5F7FA;
-                    transition: all .3s;
+                    transition: all .5s;
-                    -webkit-transition: all .3s;
+                    -webkit-transition: all .5s;
                 }
 
                 &.active {
                     background: rgba($main-color, .1);
+                    transition: all .5s;
+                    -webkit-transition: all .5s;
                 }
 
                 img {

src/views/permissions-manage/doctor-manage.vue

@@ -0,0 +1,68 @@
+<template>
+    <div class="table-page">
+        <div class="search-part">
+            <div class="search-cell">
+                <span class="label">用户名</span>
+                <el-input v-model="queryParams.userName" placeholder="请输入用户名"></el-input>
+            </div>
+            <el-button type="primary" icon="Search">查询</el-button>
+            <el-button icon="Refresh">重置</el-button>
+        </div>
+        <div class="button-part">
+            <el-button type="primary" icon="FirstAidKit">新增</el-button>
+            <el-button icon="FirstAidKit">导入</el-button>
+            <el-button icon="Delete">删除</el-button>
+            <el-button icon="Download">导出</el-button>
+        </div>
+        <div class="table-part">
+            <el-table ref="tableRef" :data="tableData" height="100%" border show-overflow-tooltip>
+                <el-table-column type="selection" width="55" />
+                <el-table-column type="index" label="#" width="55" align="center" />
+                <el-table-column property="name" label="姓名" width="120" align="center" />
+                <el-table-column label="手机号" width="220" align="center">
+                    <template #default="scope">{{ scope.row.phone.slice(0, 3) + '****' + scope.row.phone.slice(7) }}</template>
+                </el-table-column>
+                <el-table-column property="role" label="角色" width="220" align="center" />
+                <el-table-column label="启用" width="120" align="center">
+                    <template #default="scope"><el-switch v-model="scope.row.enable" /></template>
+                </el-table-column>
+                <el-table-column label="操作" align="center">
+                    <template #default="scope">
+                        <el-button link icon="RefreshLeft">密码</el-button>
+                        <el-button link icon="EditPen">修改</el-button>
+                        <el-button link icon="Delete">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div class="pagination-part">
+            <CommonPagination :total="100" @paginationChange="paginationChange" />
+        </div>
+    </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+import CommonPagination from '@/components/common-pagination.vue'
+
+const queryParams = ref({
+    userName: ''
+})
+const tableData = ref([] as any)
+
+while (tableData.value.length < 10) {
+    tableData.value.push({
+        userName: 'cscs',
+        name: '测试',
+        phone: '12312345678',
+        role: '高级管理员',
+        enable: true,
+    })
+}
+
+const paginationChange = (page: number, size: number) => {
+
+}
+</script>
+
+<style lang='scss' scoped></style>

src/views/permissions-manage/menu-manage.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+        
+    </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+
+
+</script>
+
+<style lang='scss' scoped>
+
+</style>

src/views/permissions-manage/permissions-manage.vue

@@ -1,14 +1,74 @@
 <template>
-    <div>
+    <div class="permissions-manage-page">
-        权限管理
+        <div class="menu-box">
+            <CommonMenu :menuData="menuData" @selectMenu="selectMenu" />
+        </div>
+        <div class="content-box">
+            <div class="header-box">
+                <PageTabs ref="pageTabsRef" />
+            </div>
+            <div class="main-box">
+                <div class="background-block">
+                    <RouterView />
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script lang='ts' setup>
 import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+import type { MenuItem } from '@/utils/public-interface'
+import CommonMenu from '@/components/common-menu.vue'
+import PageTabs from '@/components/page-tabs.vue'
 
+const menuData = [
+    { name: '医生管理', path: '/permissions-manage/doctor-manage' },
+    { name: '角色管理', path: '/permissions-manage/role-manage' },
+    { name: '菜单管理', path: '/permissions-manage/menu-manage' }
+]
+
+const pageTabsRef = ref()
+const selectMenu = (e: MenuItem) => {
+    console.log(e)
+    pageTabsRef.value.setTab(e)
+}
 </script>
 
 <style lang='scss' scoped>
+.permissions-manage-page {
+    width: 100%;
+    height: 100%;
+    display: flex;
 
-</style>
+    .menu-box {
+        width: 200px;
+        height: 100%;
+        background: white;
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+
+    .content-box {
+        width: calc(100% - 200px);
+        height: 100%;
+
+        .header-box {
+            width: 100%;
+            height: 50px;
+        }
+
+        .main-box {
+            width: 100%;
+            height: calc(100% - 50px);
+            padding: 10px;
+            .background-block {
+                width: 100%;
+                height: 100%;
+                background: white;
+                border-radius: 15px;
+                padding: 20px;
+            }
+        }
+    }
+}</style>

src/views/permissions-manage/role-manage.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+        
+    </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+
+
+</script>
+
+<style lang='scss' scoped>
+
+</style>