增加权限判断

src/router/index.ts

@@ -12,6 +12,7 @@ import tableRouter from './modules/table'
 import errorRouter from './modules/error'
 import excelRouter from './modules/excel'
 import nestedRouter from './modules/nested'
+import systemRouter from './modules/system'
 
 
 interface extendRoute {
@@ -108,6 +109,7 @@ export const asyncRoutes = [
   errorRouter,
   externalLink,
   clipboardTable,
+    systemRouter,
   permissionRouter,
 
   {

src/router/modules/system.ts

@@ -0,0 +1,36 @@
+/** When your routing table is too long, you can split it into small modules**/
+
+import Layout from '@/layout/index.vue'
+
+const systemRouter = {
+    path: '/system',
+    component: Layout,
+    redirect: 'noRedirect',
+    name: 'system',
+    meta: {
+        title: '系统管理',
+        icon: 'management'
+    },
+    children: [
+        {
+            path: 'user',
+            component: () => import('@/views/system/user.vue'),
+            name: 'user',
+            meta: { title: '用户管理', roles: ['other'] }
+        },
+        {
+            path: 'role',
+            component: () => import('@/views/system/role.vue'),
+            name: 'role',
+            meta: { title: '角色管理', roles: ['other'] }
+        },
+        {
+            path: 'menu',
+            component: () => import('@/views/system/menu.vue'),
+            name: 'menu',
+            meta: { title: '菜单管理', roles: ['other'] }
+        },
+    ]
+}
+
+export default systemRouter

src/views/home/index.vue

@@ -19,6 +19,7 @@
                 <div>性别：男</div>
                 <div>现住址：中国-浙江-杭州</div>
                 <div>邮箱：1135957121@qq.com</div>
+                <div>微信：19550102670(欢迎加)</div>
                 <div>技术栈：JavaScript、HTML、CSS、Vue、Node、React</div>
               </div>
               <el-divider></el-divider>

src/views/system/data/user.ts

@@ -0,0 +1,237 @@
+export const userData =[
+    {
+        username:'zzb',
+        nickname:'林峰',
+        sex:1,
+        role:'超级管理员',
+        status:true,
+    },
+    {
+        username:'zhangsan',
+        nickname:'张三',
+        sex:0,
+        role:'管理员',
+        status:true,
+    },
+    {
+        username:'lisi',
+        nickname:'李四',
+        sex:1,
+        role:'管理员',
+        status:true,
+    },
+    {
+        username:'wangwu',
+        nickname:'王五',
+        sex:0,
+        role:'超级管理员',
+        status:false,
+    },
+    {
+        username:'zhaoliu',
+        nickname:'赵柳',
+        sex:0,
+        role:'普通用户',
+        status:false,
+    },
+
+]
+
+
+export const roleData =[
+    {
+        roleName:'超级管理员',
+        roleId:'admin',
+        createTime:'2022-09-02',
+    },
+    {
+        roleName:'管理员',
+        roleId:'role',
+        createTime:'2022-09-02',
+    },
+    {
+        roleName:'普通用户',
+        roleId:'other',
+        createTime:'2022-09-02',
+    },
+
+]
+
+
+export const menuData =[
+    {
+        menuName:'首页',
+        menuType:'菜单',
+        menuRouter:'/home',
+        identification:'menu:home',
+        parentId:0,
+        level:1,
+        id:0,
+        createTime:'2022-09-02',
+    },
+    {
+        menuName:'表格',
+        menuType:'目录',
+        menuRouter:'/table',
+        identification:'menu:table',
+        parentId:0,
+        level:1,
+        id:1,
+        createTime:'2022-09-02',
+        children:[
+            {
+                menuName:'菜单1',
+                menuType:'菜单',
+                menuRouter:'/table',
+                identification:'menu1:view',
+                parentId:1,
+                level:2,
+                id:10,
+                createTime:'2022-09-02',
+                children:[
+                    {
+                        menuName:'按钮1',
+                        menuType:'按钮',
+                        menuRouter:'/table',
+                        identification:'menu1:view:btn1',
+                        parentId:10,
+                        id:20,
+                        level:3,
+                        createTime:'2022-09-02',
+                    },
+                    {
+                        menuName:'按钮2',
+                        menuType:'按钮',
+                        menuRouter:'/table',
+                        identification:'menu1:view:btn2',
+                        parentId:10,
+                        id:21,
+                        level:3,
+                        createTime:'2022-09-02',
+                    },
+                    {
+                        menuName:'按钮3',
+                        menuType:'按钮',
+                        menuRouter:'/table',
+                        identification:'menu1:view:btn2',
+                        parentId:10,
+                        id:22,
+                        level:3,
+                        createTime:'2022-09-02',
+                    }
+                ]
+            }
+        ]
+    },
+
+    {
+        menuName:'可视化图表',
+        menuType:'目录',
+        menuRouter:'/charts',
+        identification:'menu:charts',
+        parentId:0,
+        level:1,
+        id:1,
+        createTime:'2022-09-02',
+        children:[
+            {
+                menuName:'菜单1',
+                menuType:'菜单',
+                menuRouter:'/charts',
+                identification:'menu1:view',
+                parentId:1,
+                level:2,
+                id:10,
+                createTime:'2022-09-02',
+                children:[
+                    {
+                        menuName:'按钮1',
+                        menuType:'按钮',
+                        menuRouter:'/charts',
+                        identification:'menu1:view:btn1',
+                        parentId:10,
+                        id:20,
+                        level:3,
+                        createTime:'2022-09-02',
+                    },
+                    {
+                        menuName:'按钮2',
+                        menuType:'按钮',
+                        menuRouter:'/charts',
+                        identification:'menu1:view:btn2',
+                        parentId:10,
+                        id:21,
+                        level:3,
+                        createTime:'2022-09-02',
+                    },
+                    {
+                        menuName:'按钮3',
+                        menuType:'按钮',
+                        menuRouter:'/charts',
+                        identification:'menu1:view:btn2',
+                        parentId:10,
+                        id:22,
+                        level:3,
+                        createTime:'2022-09-02',
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        menuName:'基础组件',
+        menuType:'目录',
+        menuRouter:'/components',
+        identification:'menu:components',
+        parentId:0,
+        level:1,
+        id:1,
+        createTime:'2022-09-02',
+        children:[
+            {
+                menuName:'菜单1',
+                menuType:'菜单',
+                menuRouter:'/components',
+                identification:'menu1:view',
+                parentId:1,
+                level:2,
+                id:10,
+                createTime:'2022-09-02',
+                children:[
+                    {
+                        menuName:'按钮1',
+                        menuType:'按钮',
+                        menuRouter:'/components',
+                        identification:'menu1:view:btn1',
+                        parentId:10,
+                        id:20,
+                        level:3,
+                        createTime:'2022-09-02',
+                    },
+                    {
+                        menuName:'按钮2',
+                        menuType:'按钮',
+                        menuRouter:'/components',
+                        identification:'menu1:view:btn2',
+                        parentId:10,
+                        id:21,
+                        level:3,
+                        createTime:'2022-09-02',
+                    },
+                    {
+                        menuName:'按钮3',
+                        menuType:'按钮',
+                        menuRouter:'/components',
+                        identification:'menu1:view:btn2',
+                        parentId:10,
+                        id:22,
+                        level:3,
+                        createTime:'2022-09-02',
+                    }
+                ]
+            }
+        ]
+    },
+]
+
+

src/views/system/menu.vue

@@ -0,0 +1,202 @@
+<template>
+  <u-container-layout class="components-container">
+    <el-form :inline="true" :model="formInline" class="demo-form-inline"  ref="ruleFormRef1">
+      <el-form-item label="用户名" prop="username">
+        <el-input v-model="formInline.username" />
+      </el-form-item>
+      <el-form-item>
+        <el-button  @click="reset(ruleFormRef1)">重置</el-button>
+        <el-button type="primary" @click="onSubmit">查询</el-button>
+      </el-form-item>
+    </el-form>
+    <div style="margin-bottom: 15px;display: flex;justify-content: flex-end">
+      <el-button type="primary" @click="add">新增</el-button>
+    </div>
+    <el-table :data="tableData" style="width: 100%" border default-expand-all row-key="id">
+      <el-table-column prop="menuName" label="权限名称"  />
+      <el-table-column prop="menuType" label="权限类型"  />
+      <el-table-column prop="menuRouter" label="权限路由" />
+      <el-table-column prop="identification" label="权限标识" />
+      <el-table-column prop="status" label="操作" >
+        <template #default="scope">
+          <el-button
+              type="primary"
+              size="small"
+              icon="Edit"
+              @click="edit(scope.row)"
+          >
+            编辑
+          </el-button>
+          <el-button
+              @click="del(scope.row)"
+              type="danger"
+              size="small"
+              icon="Delete"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-drawer
+        v-model="dialogVisible"
+        :title="title"
+        width="50%"
+    >
+      <el-form
+          ref="ruleFormRef"
+          :model="ruleForm"
+          :rules="rules"
+          label-width="120px"
+          class="demo-ruleForm"
+          :size="formSize"
+      >
+        <el-form-item label="权限类型" prop="menuType">
+          <el-radio-group v-model="ruleForm.menuType">
+            <el-radio-button label="目录" />
+            <el-radio-button label="菜单" />
+            <el-radio-button label="按钮" />
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="权限名称" prop="menuName">
+          <el-input v-model="ruleForm.menuName" />
+        </el-form-item>
+        <el-form-item label="父级菜单" prop="role">
+          <el-cascader :options="menuData" :props="props1" clearable />
+        </el-form-item>
+        <el-form-item label="权限标识" prop="identification">
+          <el-input v-model="ruleForm.identification" />
+        </el-form-item>
+
+      </el-form>
+      <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleClose(ruleFormRef)"
+        >确定</el-button
+        >
+      </span>
+      </template>
+    </el-drawer>
+
+
+  </u-container-layout>
+</template>
+
+<script lang="ts" setup>
+import {ElMessageBox, ElMessage, FormInstance} from 'element-plus'
+import {reactive, ref} from "vue";
+import {menuData} from './data/user'
+import * as dayjs from "dayjs";
+const tableData = ref(menuData)
+const dialogVisible = ref(false)
+const title = ref('新增')
+const formSize = ref('default')
+const ruleFormRef = ref<FormInstance>()
+const ruleFormRef1 = ref<FormInstance>()
+const formInline = reactive({})
+const props1 = {
+  value:'menuName',
+  label:'menuName',
+  checkStrictly: true,
+}
+const rules = reactive({
+  nickname: [
+    { required: true, message: '请输入昵称', trigger: 'blur' },
+    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
+  ],
+  username:[
+    { required: true, message: '请输入', trigger: 'blur' },
+  ],
+  role: [
+    {
+      required: true,
+      message: '请选择角色',
+      trigger: 'change',
+    },
+  ],
+  sex: [
+    {
+      required: true,
+      message: '请选择性别',
+      trigger: 'change',
+    },
+  ],
+})
+const onSubmit = () => {
+  console.log('submit!',formInline)
+
+}
+const reset = (formEl: FormInstance | undefined)=>{
+
+}
+const add = ()=>{
+  title.value='新增'
+  dialogVisible.value = true
+}
+const ruleForm = reactive({
+  name: '',
+  sex: null,
+  price:null,
+})
+const edit = (row)=>{
+  title.value='编辑'
+  // rowObj.value = row
+  dialogVisible.value = true
+}
+
+const del = (row)=>{
+  ElMessageBox.confirm(
+      '你确定要删除当前项吗?',
+      '温馨提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+        draggable: true,
+      }
+  )
+      .then(() => {
+
+      })
+      .catch(() => {
+
+      })
+}
+const changeStatus = (row )=>{
+  ElMessageBox.confirm(
+      `确定要${!row.status?'禁用':'启用'} ${row.username} 账户吗？`,
+      '提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+  )
+      .then(async () => {
+      })
+      .catch(() => {
+        row.status=!row.status
+      })
+}
+
+const handleClose = async (done:  () => void) => {
+  await ruleFormRef.value.validate((valid, fields) => {
+    if (valid) {
+
+      dialogVisible.value = false
+      console.log('submit!',obj)
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+
+
+
+</script>
+
+<style scoped>
+
+</style>
+

src/views/system/role.vue

@@ -0,0 +1,197 @@
+<template>
+  <u-container-layout class="components-container">
+    <el-form :inline="true" :model="formInline" class="demo-form-inline"  ref="ruleFormRef1">
+      <el-form-item label="角色名称" prop="roleName">
+        <el-input v-model="formInline.roleName" />
+      </el-form-item>
+      <el-form-item>
+        <el-button  @click="reset(ruleFormRef1)">重置</el-button>
+        <el-button type="primary" @click="onSubmit">查询</el-button>
+      </el-form-item>
+    </el-form>
+    <div style="margin-bottom: 15px;display: flex;justify-content: flex-end">
+      <el-button type="primary" @click="add">新增</el-button>
+    </div>
+    <el-table :data="tableData" style="width: 100%" border >
+      <el-table-column prop="roleName" label="角色名称"  />
+      <el-table-column prop="createTime" label="创建时间" />
+      <el-table-column prop="status" label="操作" >
+        <template #default="scope">
+          <el-button
+              type="primary"
+              size="small"
+              icon="Edit"
+              @click="edit(scope.row)"
+          >
+            编辑
+          </el-button>
+          <el-button
+              @click="del(scope.row)"
+              type="danger"
+              size="small"
+              icon="Delete"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-drawer
+        v-model="dialogVisible"
+        :title="title"
+        width="50%"
+    >
+      <el-form
+          ref="ruleFormRef"
+          :model="ruleForm"
+          :rules="rules"
+          label-width="120px"
+          class="demo-ruleForm"
+          :size="formSize"
+      >
+        <el-form-item label="角色名称" prop="roleName">
+          <el-input v-model="ruleForm.roleName" />
+        </el-form-item>
+        <div style="padding-left: 50px;">
+          <div>权限菜单分配</div>
+          <div style="padding-top: 20px;padding-left: 20px;">
+            <el-tree
+                :default-expand-all="true"
+                :data="menuData"
+                show-checkbox
+                node-key="id"
+                :props="defaultProps"
+            />
+          </div>
+        </div>
+      </el-form>
+      <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleClose(ruleFormRef)"
+        >确定</el-button
+        >
+      </span>
+      </template>
+    </el-drawer>
+
+
+  </u-container-layout>
+</template>
+
+<script lang="ts" setup>
+import {ElMessageBox, ElMessage, FormInstance} from 'element-plus'
+import {reactive, ref} from "vue";
+import {roleData,menuData} from './data/user'
+import * as dayjs from "dayjs";
+const tableData = ref(roleData)
+const dialogVisible = ref(false)
+const title = ref('新增')
+const formSize = ref('default')
+const ruleFormRef = ref<FormInstance>()
+const ruleFormRef1 = ref<FormInstance>()
+const formInline = reactive({})
+const defaultProps = {
+  children: 'children',
+  label: 'menuName',
+}
+const rules = reactive({
+  nickname: [
+    { required: true, message: '请输入昵称', trigger: 'blur' },
+    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
+  ],
+  username:[
+    { required: true, message: '请输入', trigger: 'blur' },
+  ],
+  role: [
+    {
+      required: true,
+      message: '请选择角色',
+      trigger: 'change',
+    },
+  ],
+  sex: [
+    {
+      required: true,
+      message: '请选择性别',
+      trigger: 'change',
+    },
+  ],
+})
+const onSubmit = () => {
+  console.log('submit!',formInline)
+
+}
+const reset = (formEl: FormInstance | undefined)=>{
+
+}
+const add = ()=>{
+  title.value='新增'
+  dialogVisible.value = true
+}
+const ruleForm = reactive({
+  name: '',
+  sex: null,
+  price:null,
+})
+const edit = (row)=>{
+  title.value='编辑'
+  // rowObj.value = row
+  dialogVisible.value = true
+}
+
+const del = (row)=>{
+  ElMessageBox.confirm(
+      '你确定要删除当前项吗?',
+      '温馨提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+        draggable: true,
+      }
+  )
+      .then(() => {
+
+      })
+      .catch(() => {
+
+      })
+}
+const changeStatus = (row )=>{
+  ElMessageBox.confirm(
+      `确定要${!row.status?'禁用':'启用'} ${row.username} 账户吗？`,
+      '提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+  )
+      .then(async () => {
+      })
+      .catch(() => {
+        row.status=!row.status
+      })
+}
+
+const handleClose = async (done:  () => void) => {
+  await ruleFormRef.value.validate((valid, fields) => {
+    if (valid) {
+
+      dialogVisible.value = false
+      console.log('submit!',obj)
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+
+
+
+</script>
+
+<style scoped>
+
+</style>
+

src/views/system/user.vue

@@ -0,0 +1,204 @@
+<template>
+  <u-container-layout class="components-container">
+    <el-form :inline="true" :model="formInline" class="demo-form-inline"  ref="ruleFormRef1">
+      <el-form-item label="用户名" prop="username">
+        <el-input v-model="formInline.username" />
+      </el-form-item>
+      <el-form-item>
+        <el-button  @click="reset(ruleFormRef1)">重置</el-button>
+        <el-button type="primary" @click="onSubmit">查询</el-button>
+      </el-form-item>
+    </el-form>
+    <div style="margin-bottom: 15px;display: flex;justify-content: flex-end">
+      <el-button type="primary" @click="add">新增</el-button>
+    </div>
+    <el-table :data="tableData" style="width: 100%" border >
+      <el-table-column prop="username" label="用户名"  />
+      <el-table-column prop="nickname" label="昵称"  />
+      <el-table-column prop="sex" label="性别" />
+      <el-table-column prop="role" label="角色" />
+      <el-table-column prop="status" label="状态" >
+        <template #default="scope">
+          <el-switch v-model="scope.row.status"  @change="changeStatus(scope.row)"/>
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="操作" >
+        <template #default="scope">
+          <el-button
+              type="primary"
+              size="small"
+              icon="Edit"
+              @click="edit(scope.row)"
+          >
+            编辑
+          </el-button>
+          <el-button
+              @click="del(scope.row)"
+              type="danger"
+              size="small"
+              icon="Delete"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-dialog
+        v-model="dialogVisible"
+        :title="title"
+        width="50%"
+    >
+    <el-form
+        ref="ruleFormRef"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="120px"
+        class="demo-ruleForm"
+        :size="formSize"
+    >
+      <el-form-item label="用户名" prop="username">
+        <el-input v-model="ruleForm.username" />
+      </el-form-item>
+      <el-form-item label="昵称" prop="nickname">
+        <el-input v-model="ruleForm.nickname" />
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <el-radio-group v-model="ruleForm.sex">
+          <el-radio :label="1" >男</el-radio>
+          <el-radio :label="0" >女</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="角色" prop="role">
+        <el-select v-model="ruleForm.role"  placeholder="请选择" >
+          <el-option label="超级管理员" value="超级管理员" :key="0"></el-option>
+          <el-option label="管理员" value="管理员" :key="1"></el-option>
+          <el-option label="普通用户" value="普通用户" :key="2"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleClose(ruleFormRef)"
+        >确定</el-button
+        >
+      </span>
+    </template>
+    </el-dialog>
+
+
+  </u-container-layout>
+</template>
+
+<script lang="ts" setup>
+    import {ElMessageBox, ElMessage, FormInstance} from 'element-plus'
+    import {reactive, ref} from "vue";
+    import {userData} from './data/user'
+    import * as dayjs from "dayjs";
+    const tableData = ref(userData)
+    const dialogVisible = ref(false)
+    const title = ref('新增')
+    const formSize = ref('default')
+    const ruleFormRef = ref<FormInstance>()
+    const ruleFormRef1 = ref<FormInstance>()
+    const formInline = reactive({})
+    const rules = reactive({
+      nickname: [
+        { required: true, message: '请输入昵称', trigger: 'blur' },
+        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
+      ],
+      username:[
+        { required: true, message: '请输入', trigger: 'blur' },
+      ],
+      role: [
+        {
+          required: true,
+          message: '请选择角色',
+          trigger: 'change',
+        },
+      ],
+      sex: [
+        {
+          required: true,
+          message: '请选择性别',
+          trigger: 'change',
+        },
+      ],
+    })
+    const onSubmit = () => {
+      console.log('submit!',formInline)
+
+    }
+    const reset = (formEl: FormInstance | undefined)=>{
+
+    }
+    const add = ()=>{
+      title.value='新增'
+      dialogVisible.value = true
+    }
+    const ruleForm = reactive({
+      name: '',
+      sex: null,
+      price:null,
+    })
+    const edit = (row)=>{
+      title.value='编辑'
+      // rowObj.value = row
+      dialogVisible.value = true
+    }
+
+    const del = (row)=>{
+      ElMessageBox.confirm(
+          '你确定要删除当前项吗?',
+          '温馨提示',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+            draggable: true,
+          }
+      )
+          .then(() => {
+
+          })
+          .catch(() => {
+
+          })
+    }
+    const changeStatus = (row )=>{
+      ElMessageBox.confirm(
+          `确定要${!row.status?'禁用':'启用'} ${row.username} 账户吗？`,
+          '提示',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+          }
+      )
+          .then(async () => {
+          })
+          .catch(() => {
+            row.status=!row.status
+          })
+    }
+
+    const handleClose = async (done:  () => void) => {
+      await ruleFormRef.value.validate((valid, fields) => {
+        if (valid) {
+
+          dialogVisible.value = false
+          console.log('submit!',obj)
+        } else {
+          console.log('error submit!', fields)
+        }
+      })
+    }
+
+
+
+</script>
+
+<style scoped>
+
+</style>
+

vite.config.ts

@@ -58,4 +58,14 @@ export default defineConfig({
     https: false,
     proxy: {},
   },
+  // 生产环境打包配置
+  //去除 console debugger
+  // build: {
+  //   terserOptions: {
+  //     compress: {
+  //       drop_console: true,
+  //       drop_debugger: true,
+  //     },
+  //   },
+  // },
 })