Admin
2022-09-15 28c8649014bb0030bb62c74da1b3f7854493d036
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<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="min-width: 350px" @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" style="color: red" 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/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 },
    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>