From 1229f3ec76bffe282d85b48daf0b32bc17022810 Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期五, 26 八月 2022 12:29:18 +0800
Subject: [PATCH] Default Changelist
---
src/views/system/menu/index.vue | 306 ++++++++++++++++++++++++++++++++-------------------
1 files changed, 192 insertions(+), 114 deletions(-)
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 2197f6a..4bc20a5 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -1,60 +1,62 @@
<template>
- <div class="system-menu-container">
- <el-card shadow="hover">
- <div class="system-menu-search mb15">
- <el-input size="default" placeholder="请输入菜单名称" style="max-width: 180px"> </el-input>
- <el-button size="default" type="primary" class="ml10">
- <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="onTabelRowDel(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">
@@ -64,65 +66,141 @@
import { storeToRefs } from 'pinia';
import { useRoutesList } from '/@/stores/routesList';
import menuDialog from '/@/views/system/menu/component/menuDialog.vue';
-import {useMenuApi} from "/@/api/menu";
-import {Session} from "/@/utils/storage";
-import pinia from "/@/stores";
-import {dynamicRoutes} from "/@/router/route";
+import { useMenuApi } from '/@/api/systemManage/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 { useRoleApi } from '/@/api/systemManage/role';
export default defineComponent({
- name: 'systemMenu',
- components: { menuDialog },
- setup() {
- const stores = useRoutesList();
- const { routesList } = storeToRefs(stores);
- const menuDialog = ref();
- const state = reactive({
- menuData:[],
- });
- // 获取 vuex 中的路由
- const menuTableData = computed(() => {
- return routesList.value;
- });
- // 打开新增菜单弹窗
- const onOpenMenuDialog = (type: string,value: any) => {
- debugger
- menuDialog.value.openDialog(type,value);
- };
- // 打开编辑菜单弹窗
- // 删除当前行
- const onTabelRowDel = (row: RouteRecordRaw) => {
- ElMessageBox.confirm(`此操作将永久删除路由：${row.path}, 是否继续?`, '提示', {
- confirmButtonText: '删除',
- cancelButtonText: '取消',
- type: 'warning',
- }).then(() => {
- ElMessage.success('删除成功');
- }).catch(() => {});
- };
- const getMenuList = async () => {
- let res = await useMenuApi().getMenuAdmin(Session.get('projectId'))
- if(res.data.code === '200'){
- // state.menuData = res.data.data
- const storesRoutesList = useRoutesList(pinia);
- storesRoutesList.setRoutesList(res.data.data);
- }else{
- ElMessage({
- type:'warning',
- message:res.data.msg
- })
- }
- };
- onMounted( () => {
- getMenuList()
- });
- return {
- getMenuList,
- menuDialog,
- onOpenMenuDialog,
- menuTableData,
- onTabelRowDel,
- ...toRefs(state),
- };
- },
+ 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 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
+ });
+ }
+ };
+
+ 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();
+ console.log(1);
+ });
+ return {
+ parseRole,
+ getMenuList,
+ menuDialog,
+ onOpenMenuDialog,
+ deleteMenu,
+ ...toRefs(state)
+ };
+ }
});
</script>
--
Gitblit v1.9.2