From dd2576bf9887b29c47d128cd6c070f8d70756865 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期四, 21 七月 2022 18:27:13 +0800
Subject: [PATCH] 更新首页登录页
---
src/views/system/menu/index.vue | 361 +++++++++++++++++++++++++++------------------------
1 files changed, 192 insertions(+), 169 deletions(-)
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 652beff..f20befb 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -1,177 +1,200 @@
<template>
- <div class="system-menu-container">
- <el-card shadow="hover">
- <div class="system-menu-search mb15">
- <el-select size="default" v-model="projectId" placeholder="请选择项目名称" style="max-width: 180px" @change="getMenuList()">
- <el-option
- v-for="item in projectList"
- :key="item.key"
- :value="item.id"
- :label="item.name"
- >
- </el-option>
- </el-select>
- <el-button size="default" type="primary" class="ml10" @click="getMenuList">
- <el-icon>
- <ele-Search />
- </el-icon>
- 查询
- </el-button>
- <el-button size="default" type="success" class="ml10" @click="onOpenMenuDialog('新增')">
- <el-icon>
- <ele-FolderAdd />
- </el-icon>
- 新增菜单
- </el-button>
- </div>
- <el-table :data="menuTableData" style="width: 100%" row-key="path" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
- <el-table-column label="菜单名称" show-overflow-tooltip>
- <template #default="scope">
- <SvgIcon :name="scope.row.meta.icon" />
- <span class="ml10">{{ scope.row.meta.title }}</span>
- </template>
- </el-table-column>
- <el-table-column prop="path" label="路由路径" show-overflow-tooltip></el-table-column>
- <el-table-column label="组件路径" show-overflow-tooltip>
- <template #default="scope">
- <span>{{ scope.row.component }}</span>
- </template>
- </el-table-column>
- <el-table-column label="权限标识" show-overflow-tooltip>
- <template #default="scope">
- <span>{{ scope.row.meta.roles }}</span>
- </template>
- </el-table-column>
- <el-table-column label="排序" show-overflow-tooltip width="80">
- <template #default="scope">
- {{ scope.$index }}
- </template>
- </el-table-column>
- <el-table-column label="类型" show-overflow-tooltip width="80">
- <template #default="scope">
- <el-tag type="success" size="small">{{ scope.row.xx }}菜单</el-tag>
- </template>
- </el-table-column>
- <el-table-column label="操作" show-overflow-tooltip width="140">
- <template #default="scope">
- <el-button size="small" text type="primary" @click="onOpenMenuDialog('新增')">新增</el-button>
- <el-button size="small" text type="primary" @click="onOpenMenuDialog('修改',scope.row)">修改</el-button>
- <el-button size="small" text type="primary" @click="deleteMenu(scope.row)">删除</el-button>
- </template>
- </el-table-column>
- </el-table>
- </el-card>
- <menuDialog ref="menuDialog" @getMenuList="getMenuList"/>
- </div>
+ <div class="system-menu-container">
+ <el-card shadow="hover">
+ <div class="system-menu-search mb15">
+ <el-select size="default" v-model="projectId" placeholder="请选择项目名称" style="max-width: 180px" @change="getMenuList()">
+ <el-option v-for="item in projectList" :key="item.key" :value="item.id" :label="item.name"> </el-option>
+ </el-select>
+ <el-button size="default" type="primary" class="ml10" @click="getMenuList">
+ <el-icon>
+ <ele-Search />
+ </el-icon>
+ 查询
+ </el-button>
+ <el-button size="default" type="success" class="ml10" @click="onOpenMenuDialog('新增')">
+ <el-icon>
+ <ele-FolderAdd />
+ </el-icon>
+ 新增菜单
+ </el-button>
+ </div>
+ <el-table :data="menuTableData" style="width: 100%" row-key="path" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+ <el-table-column label="菜单名称" show-overflow-tooltip>
+ <template #default="scope">
+ <SvgIcon :name="scope.row.meta.icon" />
+ <span class="ml10">{{ scope.row.meta.title }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="path" label="路由路径" show-overflow-tooltip></el-table-column>
+ <el-table-column label="组件路径" show-overflow-tooltip>
+ <template #default="scope">
+ <span>{{ scope.row.component }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column label="权限标识" show-overflow-tooltip>
+ <template #default="scope">
+ <span>{{ parseRole(scope.row.meta.roles) }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column label="排序" show-overflow-tooltip width="80">
+ <template #default="scope">
+ {{ scope.$index }}
+ </template>
+ </el-table-column>
+ <el-table-column label="类型" show-overflow-tooltip width="80">
+ <template #default="scope">
+ <el-tag type="success" size="small">{{ scope.row.xx }}菜单</el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="操作" show-overflow-tooltip width="140">
+ <template #default="scope">
+ <el-button size="small" text type="primary" @click="onOpenMenuDialog('新增')">新增</el-button>
+ <el-button size="small" text type="primary" @click="onOpenMenuDialog('修改', scope.row)">修改</el-button>
+ <el-button size="small" text type="primary" @click="deleteMenu(scope.row)">删除</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-card>
+ <menuDialog ref="menuDialog" @getMenuList="getMenuList" />
+ </div>
</template>
<script lang="ts">
- import { ref, toRefs, reactive, computed, onMounted, defineComponent } from 'vue';
- import { RouteRecordRaw } from 'vue-router';
- import { ElMessageBox, ElMessage } from 'element-plus';
- import { storeToRefs } from 'pinia';
- import { useRoutesList } from '/@/stores/routesList';
- import menuDialog from '/@/views/system/menu/component/menuDialog.vue';
- import {useMenuApi} from "/@/api/system/menu";
- import {Session} from "/@/utils/storage";
- import pinia from "/@/stores";
- import {dynamicRoutes} from "/@/router/route";
- import {useUserInfo} from "/@/stores/userInfo";
- import {initBackEndControlRoutes} from "/@/router/backEnd";
+import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import { useRoutesList } from '/@/stores/routesList';
+import menuDialog from '/@/views/system/menu/component/menuDialog.vue';
+import { useMenuApi } from '/@/api/system/menu';
+import { Session } from '/@/utils/storage';
+import { initBackEndControlRoutes } from '/@/router/backEnd';
+import { useRoleApi } from '/@/api/system/role';
- export default defineComponent({
- name: 'systemMenu',
- components: { menuDialog },
- setup() {
- const menuDialog = ref();
- const storesRoutesList = useRoutesList();
- const state = reactive({
- projectId:'1',
- menuData:[],
- menuTableData:[],
- projectList:[
- { id: '1', name: '基础数据权限管理系统', key: 0 },
- { id: '2', name: '双重预防系统', key: 1 },
- { id: '3', name: '特殊作业系统', key: 2 },
- { id: '4', name: '智能巡检系统', key: 3 },
- { id: '5', name: '安全风险综合预警预报平台', key: 4 },
- { id: '6', name: '应急管理系统', key: 5 },
- { id: '7', name: '目标责任管理系统', key: 6 },
- { id: '8', name: '事故管理系统', key: 7 },
- { id: '9', name: '设备综合管控系统', key: 8 },
- { id: '10', name: '安全知识图谱系统', key: 9 },
- { id: '11', name: '危险化学品全生命周期安全', key: 10 }
- ],
- });
- // // 获取 vuex 中的路由
- // const menuTableData = computed(() => {
- // return routesList.value;
- // });
- // 打开新增菜单弹窗
- const onOpenMenuDialog = (type: string,value: any) => {
- menuDialog.value.openDialog(type,value,state.projectList,state.projectId);
- };
- // 打开编辑菜单弹窗
- // 删除当前行
- const deleteMenu = (row: any) => {
- ElMessageBox.confirm(`此操作将永久删除路由：${row.path}, 是否继续?`, '提示', {
- confirmButtonText: '删除',
- cancelButtonText: '取消',
- type: 'warning',
- }).then(async () => {
- let res = await useMenuApi().deleteMenu({id:row.id})
- if(res.data.code ==='200'){
- ElMessage({
- type:'success',
- duration:2000,
- message:'删除成功'
- })
- await getMenuList()
- if(Session.get('projectId') == state.projectId) await initBackEndControlRoutes()
- }else{
- ElMessage({
- type:'warning',
- message:res.data.msg
- })
- }
- }).catch(() => {});
- };
- const getMenuList = async () => {
- let res = await useMenuApi().getMenuAdmin(state.projectId)
- if(res.data.code === '200'){
- state.menuTableData = res.data.data
- if(Session.get('projectId') == state.projectId) await initBackEndControlRoutes()
- }else{
- ElMessage({
- type:'warning',
- message:res.data.msg
- })
- }
- };
+export default defineComponent({
+ name: 'systemMenu',
+ components: { menuDialog },
+ filters: {
+ parseRole: (roles: Array<string>) => {
+ return ['1', '2'];
+ }
+ },
+ setup() {
+ const menuDialog = ref();
+ const storesRoutesList = useRoutesList();
+ const state = reactive({
+ projectId: '1',
+ menuData: [],
+ roleList: [],
+ menuTableData: [],
+ projectList: [
+ { id: '1', name: '基础数据权限管理系统', key: 0 },
+ { id: '2', name: '双重预防系统', key: 1 },
+ { id: '3', name: '特殊作业系统', key: 2 },
+ { id: '4', name: '智能巡检系统', key: 3 },
+ { id: '5', name: '安全风险综合预警预报平台', key: 4 },
+ { id: '6', name: '应急管理系统', key: 5 },
+ { id: '7', name: '目标责任管理系统', key: 6 },
+ { id: '8', name: '事故管理系统', key: 7 },
+ { id: '9', name: '设备综合管控系统', key: 8 },
+ { id: '10', name: '安全知识图谱系统', key: 9 },
+ { id: '11', name: '危险化学品全生命周期安全', key: 10 }
+ ]
+ });
+ // // 获取 vuex 中的路由
+ // const menuTableData = computed(() => {
+ // return routesList.value;
+ // });
+ // 打开新增菜单弹窗
+ const onOpenMenuDialog = (type: string, value: any) => {
+ menuDialog.value.openDialog(type, value, state.projectList, state.projectId, state.roleList);
+ };
- const getProjectList = async () => {
- let res = await useMenuApi().getProjectList()
- if(res.data.code === '200'){
- state.menuTableData = res.data.data
- if(Session.get('projectId') == state.projectId) await initBackEndControlRoutes()
- }else{
- ElMessage({
- type:'warning',
- message:res.data.msg
- })
- }
- };
+ // 删除当前行
+ const deleteMenu = (row: any) => {
+ ElMessageBox.confirm(`此操作将永久删除路由：${row.path}, 是否继续?`, '提示', {
+ confirmButtonText: '删除',
+ cancelButtonText: '取消',
+ type: 'warning'
+ })
+ .then(async () => {
+ let res = await useMenuApi().deleteMenu({ id: row.id });
+ if (res.data.code === '200') {
+ ElMessage({
+ type: 'success',
+ duration: 2000,
+ message: '删除成功'
+ });
+ await getMenuList();
+ if (Session.get('projectId') == state.projectId) await initBackEndControlRoutes();
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ })
+ .catch(() => {});
+ };
+ const getMenuList = async () => {
+ let res = await useMenuApi().getMenuAdmin(state.projectId);
+ if (res.data.code === '200') {
+ state.menuTableData = res.data.data;
+ if (Session.get('projectId') == state.projectId) await initBackEndControlRoutes();
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
- onMounted( () => {
- getMenuList()
- });
- return {
- getMenuList,
- menuDialog,
- onOpenMenuDialog,
- deleteMenu,
- ...toRefs(state),
- };
- },
- });
+ const getRoleList = async () => {
+ let res = await useRoleApi().getRoleList();
+ if (res.data.code === '200') {
+ state.roleList = res.data.data;
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
+
+ const getProjectList = async () => {
+ let res = await useMenuApi().getProjectList();
+ if (res.data.code === '200') {
+ state.menuTableData = res.data.data;
+ if (Session.get('projectId') == state.projectId) await initBackEndControlRoutes();
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
+
+ const parseRole = (roles: Array<string>) => {
+ let role = roles.map((item) => {
+ for (let i in state.roleList) {
+ if (state.roleList[i].roleCode === item) {
+ return state.roleList[i].roleName;
+ }
+ }
+ });
+ return role;
+ };
+
+ onMounted(() => {
+ getMenuList();
+ getRoleList();
+ });
+ return {
+ parseRole,
+ getMenuList,
+ menuDialog,
+ onOpenMenuDialog,
+ deleteMenu,
+ ...toRefs(state)
+ };
+ }
+});
</script>
--
Gitblit v1.9.2