'菜单'

Your Name

2022-06-28 043265de0da38fcc727bcc60d7c88da4c3c3513f

'菜单'

 src/router/backEnd.ts

@@ -29,8 +29,6 @@
export async function initBackEndControlRoutes() {
    if (window.nextLoading === undefined) NextLoading.start();
    if (!Session.get('token')) return false;
    useUserInfo().setUserInfos();
    // if(Session.get('ifMenu'))
    const res = await getBackEndControlRoutes(Session.get('projectId'));
    useRequestOldRoutes().setRequestOldRoutes(JSON.parse(JSON.stringify(res.data.data)));
    dynamicRoutes[0].children = await backEndComponent(res.data.data);
@@ -67,9 +65,9 @@


export async function getBackEndControlRoutes(value : string) {
    const stores = useUserInfo(pinia);
    const { userInfos } = storeToRefs(stores);
    const auth = userInfos.value.roles[0];
    // const stores = useUserInfo(pinia);
    // const { userInfos } = storeToRefs(stores);
    // const auth = userInfos.value.roles[0];
    return menuApi.getMenuAdmin(value);

}

 src/router/frontEnd.ts

@@ -13,7 +13,7 @@
export async function initFrontEndControlRoutes() {
    if (window.nextLoading === undefined) NextLoading.start();
    if (!Session.get('token')) return false;
    useUserInfo(pinia).setUserInfos();
    // useUserInfo(pinia).setUserInfos();
    await setAddRoute();
    await setFilterMenuAndCacheTagsViewRoutes();
}

 src/router/index.ts

@@ -10,6 +10,7 @@
import { staticRoutes } from '/@/router/route';
import { initFrontEndControlRoutes } from '/@/router/frontEnd';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import {useUserInfo} from "/@/stores/userInfo";




 src/stores/interface/index.ts

@@ -10,7 +10,8 @@
    roles: string[];
    time: number;
    userName: string;
    sign:string;
    uid:string;
    projectId:string;
}
export interface UserInfosStates {
    userInfos: UserInfosState;
@@ -41,6 +42,14 @@
    projectId:string,
}

export interface loginInfoState {
    loginUser:{
        projectId:string,
        token:string,
        uid:string,
    }
}

// 布局配置
export interface ThemeConfigState {
    isDrawer: boolean;

 src/stores/loginInfo.ts

对比新文件
@@ -0,0 +1,20 @@
import { defineStore } from 'pinia';
import { loginInfoState } from './interface';

/**
 * 路由列表
 * @methods setRoutesList 设置路由数据
 * @methods setColumnsMenuHover 设置分栏布局菜单鼠标移入 boolean
 * @methods setColumnsNavHover 设置分栏布局最左侧导航鼠标移入 boolean
 */
export const useLoginInfo = defineStore('loginInfo', {
    state: (): loginInfoState => ({
        loginUser:{
            projectId:'',
            token:'',
            uid:'',
        }
    }),
    actions: {
    },
});

 src/stores/userInfo.ts

@@ -15,51 +15,56 @@
            time: 0,
            roles: [],
            authBtnList: [],
            sign:'',
            uid:'',
            projectId:''
        },
    }),
    actions: {
        async setUserInfos() {
            const userName = Cookies.get('userName');
            // 模拟数据
            let defaultRoles: Array<string> = [];
            let defaultAuthBtnList: Array<string> = [];
            // admin 页面权限标识，对应路由 meta.roles，用于控制路由的显示/隐藏
            let adminRoles: Array<string> = ['admin'];
            // admin 按钮权限标识
            let adminAuthBtnList: Array<string> = ['btn.add', 'btn.del', 'btn.edit', 'btn.link'];
            // test 页面权限标识，对应路由 meta.roles，用于控制路由的显示/隐藏
            let testRoles: Array<string> = ['common'];
            // test 按钮权限标识
            let testAuthBtnList: Array<string> = ['btn.add', 'btn.link'];
            // 不同用户模拟不同的用户权限
            if (userName === 'admin') {
                defaultRoles = adminRoles;
                defaultAuthBtnList = adminAuthBtnList;
            } else {
                defaultRoles = testRoles;
                defaultAuthBtnList = testAuthBtnList;
            }
            // 用户信息模拟数据
            const userInfos = {
                userName: userName,
                photo:
                    userName === 'admin'
                        ? 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg'
                        : 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=317673774,2961727727&fm=26&gp=0.jpg',
                time: new Date().getTime(),
                roles: defaultRoles,
                authBtnList: defaultAuthBtnList,
                sign:'',
            };
            // 存储用户信息到浏览器缓存
            Session.set('userInfo', userInfos);

            if (Session.get('userInfo')) {
                this.userInfos = Session.get('userInfo');
            } else {
                this.userInfos = userInfos;
            }
        async setUserInfos(value: any) {
            this.userInfos.userName = value.username
            this.userInfos.uid = value.id
            this.userInfos.roles = value.role
            // const userName = Cookies.get('userName');
            // // 模拟数据
            // let defaultRoles: Array<string> = [];
            // let defaultAuthBtnList: Array<string> = [];
            // // admin 页面权限标识，对应路由 meta.roles，用于控制路由的显示/隐藏
            // let adminRoles: Array<string> = ['admin'];
            // // admin 按钮权限标识
            // let adminAuthBtnList: Array<string> = ['btn.add', 'btn.del', 'btn.edit', 'btn.link'];
            // // test 页面权限标识，对应路由 meta.roles，用于控制路由的显示/隐藏
            // let testRoles: Array<string> = ['common'];
            // // test 按钮权限标识
            // let testAuthBtnList: Array<string> = ['btn.add', 'btn.link'];
            // // 不同用户模拟不同的用户权限
            // if (userName === 'admin') {
            //     defaultRoles = adminRoles;
            //     defaultAuthBtnList = adminAuthBtnList;
            // } else {
            //     defaultRoles = testRoles;
            //     defaultAuthBtnList = testAuthBtnList;
            // }
            // // 用户信息模拟数据
            // const userInfos = {
            //     userName: userName,
            //     photo:
            //         userName === 'admin'
            //             ? 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg'
            //             : 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=317673774,2961727727&fm=26&gp=0.jpg',
            //     time: new Date().getTime(),
            //     roles: defaultRoles,
            //     authBtnList: defaultAuthBtnList,
            //     uid:'',
            //     projectId:'',
            // };
            // // 存储用户信息到浏览器缓存
            // Session.set('userInfo', userInfos);
            //
            // if (Session.get('userInfo')) {
            //     this.userInfos = Session.get('userInfo');
            // } else {
            //     this.userInfos = userInfos;
            // }
        },
    },
});

 src/utils/request.ts

@@ -1,6 +1,8 @@
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Session } from '/@/utils/storage';
import {useUserInfo} from "/@/stores/userInfo";
import {storeToRefs} from "pinia";

// 配置新建一个 axios 实例
const service = axios.create({
@@ -13,8 +15,10 @@
    (config) => {
        // 在发送请求之前做些什么 token
        if (Session.get('token')) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            (<any>config.headers).common['Authorization'] = `${Session.get('token')}`;
            (<any>config.headers).common['uid'] = `${Session.get('sign')}`;
            (<any>config.headers).common['uid'] = `${Session.get('uid')}`;
        }
        return config;
    },
@@ -28,7 +32,7 @@

    (response) => {
        // 对响应数据做点什么
        if(response.data.code && (response.data.code ==='A0215' || response.data.code === 'A0214')){
        if(response.data.code && (response.data.code ==='A0215' || response.data.code === 'A0214' || response.data.code === 'A0213')){
            Session.clear()
            window.location.href = '/'
            return Promise.reject(response)

 src/views/doublePreventSystem/riskLevelManage/index.vue

对比新文件
@@ -0,0 +1,13 @@
<template>
    <router-view></router-view>
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style scoped>

</style>

 src/views/doublePreventSystem/riskLevelManage/productionDevice/index.vue

对比新文件
@@ -0,0 +1,13 @@
<template>
    <div>1</div>
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style scoped>

</style>

 src/views/doublePreventSystem/riskLevelManage/riskControlManage/index.vue

对比新文件
@@ -0,0 +1,13 @@
<template>
    <div>4</div>
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style scoped>

</style>

 src/views/doublePreventSystem/riskLevelManage/safetyRiskAnalyseUnit/index.vue

对比新文件
@@ -0,0 +1,13 @@
<template>
    <div>2</div>
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style scoped>

</style>

 src/views/doublePreventSystem/riskLevelManage/safetyRiskEvent/index.vue

对比新文件
@@ -0,0 +1,13 @@
<template>
    <div>3</div>
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style scoped>

</style>

 src/views/home/index.vue

@@ -50,16 +50,11 @@
</template>

<script lang="ts">
import { toRefs, reactive, defineComponent, onMounted, ref, watch, nextTick, onActivated } from 'vue';
import * as echarts from 'echarts';
import { toRefs, reactive, defineComponent, } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import {Session} from "/@/utils/storage";
import {useRoutesList} from "/@/stores/routesList";
import pinia from "/@/stores";

import {useUserInfo} from "/@/stores/userInfo";
import { Session } from '/@/utils/storage';
let global: any = {
    homeChartOne: null,
    homeChartTwo: null,
@@ -68,7 +63,6 @@
};

interface stateType {
    projectId:string,
    homeOne: Array <type>
}
interface type {
@@ -78,18 +72,15 @@
export default defineComponent({
    name: 'home',
    setup() {
        const storesRoutesList = useRoutesList(pinia);
        const { routesList } = storeToRefs(storesRoutesList);
        // const storesTagsViewRoutes = useTagsViewRoutes();
        // const storesThemeConfig = useThemeConfig();
        const userInfo = useUserInfo()
        const { userInfos } = storeToRefs(userInfo);
        const state  = reactive<stateType>({
            projectId:'',
            homeOne:[{id:1,name:'基础数据权限管理系统'},{id:2,name:'系统1'},{id:3,name:'系统2'},{id:4,name:'系统3'},{id:5,name:'系统4'}],
            homeOne:[{id:1,name:'基础数据权限管理系统'},{id:2,name:'双重预防系统'},{id:3,name:'系统2'},{id:4,name:'系统3'},{id:5,name:'系统4'}],
        });
        // 折线图
        const renderMenu = async (value: string) => {
            state.projectId = value
            Session.set('projectId',value)
            Session.set('projectId',value)
            userInfos.value.projectId = value
            await initBackEndControlRoutes();
        };
        return {

 src/views/login/component/account.vue

@@ -76,9 +76,6 @@
    setup() {
        const { t } = useI18n();
        const userInfo = useUserInfo()
        const { userInfos } = storeToRefs(userInfo);
        const storesThemeConfig = useThemeConfig();
        const { themeConfig } = storeToRefs(storesThemeConfig);
        const route = useRoute();
        const router = useRouter();
        const state = reactive({
@@ -101,11 +98,11 @@
            // 存储 token 到浏览器缓存
            let res = await useLoginApi().signIn(state.ruleForm)
            if(res.data.code === '200'){
                Session.set('ifMenu',false)
                Session.set('projectId','')
                userInfo.setUserInfos(res.data.data)
                Session.set('token', res.data.data.accessToken);
                Session.set('sign',res.data.data.id)
                await initFrontEndControlRoutes();
                Session.set('projectId','');
                Session.set('uid',res.data.data.id);
                await initBackEndControlRoutes();
                signInSuccess();
            }else{
                state.loading.signIn = false

 src/views/system/menu/component/menuDialog.vue

@@ -6,12 +6,12 @@
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="上级菜单">
                            <el-cascader
                                :options="menuData"
                                :props="{ checkStrictly: true, value: 'id', label: 'title' }"
                                placeholder="请选择上级菜单"
                                clearable
                                class="w100"
                                v-model="ruleForm.menuSuperior"
                                    :options="menuData"
                                    :props="{ checkStrictly: true, value: 'id', label: 'title' }"
                                    placeholder="请选择上级菜单"
                                    clearable
                                    class="w100"
                                    v-model="ruleForm.menuSuperior"
                            >
                            </el-cascader>
                        </el-form-item>
@@ -56,12 +56,12 @@
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="项目名">
                            <el-select v-model="ruleForm.projectId" controls-position="right" placeholder="请输入排序" class="w100">
                            <el-select @change="handelMenu" v-model="ruleForm.projectId" controls-position="right" placeholder="请输入排序" class="w100">
                                <el-option
                                v-for="item in projectList"
                                :key="item.key"
                                :value="item.id"
                                :label="item.name"
                                        v-for="item in projectList"
                                        :key="item.key"
                                        :value="item.id"
                                        :label="item.name"
                                >
                                </el-option>
                            </el-select>
@@ -93,179 +93,175 @@
</template>

<script lang="ts">
import { reactive, toRefs, onMounted, defineComponent } from 'vue';
import { storeToRefs } from 'pinia';
import { useRoutesList } from '/@/stores/routesList';
import { i18n } from '/@/i18n/index';
import IconSelector from '/@/components/iconSelector/index.vue';
import { useMenuApi } from '/@/api/menu/index'
import { ElMessageBox, ElMessage } from 'element-plus';
import {Session} from "/@/utils/storage";
// import { setBackEndControlRefreshRoutes } from "/@/router/backEnd";
    import { reactive, toRefs, onMounted, defineComponent } from 'vue';
    import { storeToRefs } from 'pinia';
    import { useRoutesList } from '/@/stores/routesList';
    import { i18n } from '/@/i18n/index';
    import IconSelector from '/@/components/iconSelector/index.vue';
    import { useMenuApi } from '/@/api/menu/index'
    import { ElMessageBox, ElMessage } from 'element-plus';
    import {Session} from "/@/utils/storage";
    // import { setBackEndControlRefreshRoutes } from "/@/router/backEnd";

export default defineComponent({
    name: 'systemAddMenu',
    components: { IconSelector },
    setup(props,context) {
        const stores = useRoutesList();
        const { routesList } = storeToRefs(stores);
        const state = reactive({
            isShowDialog: false,
            title:'',
            buttonName:'',
            // 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
            ruleForm: {
                projectId:'',
                parentId:0,
                menuSuperior: [], // 上级菜单
                menuType: 'menu', // 菜单类型
                name: '', // 路由名称
                component: '', // 组件路径
                priority: 0, // 菜单排序
                path: '', // 路由路径
                redirect: '', // 路由重定向，有子集 children 时
                meta: {
                    title: '', // 菜单名称
                    icon: '', // 菜单图标
                    isHide: false, // 是否隐藏
                    isKeepAlive: true, // 是否缓存
                    isAffix: false, // 是否固定
                    isLink: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink: 链接地址不为空`
                    isIframe: false, // 是否内嵌，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
                    roles: '', // 权限标识，取角色管理
                },
                btnPower: '', // 菜单类型为按钮时，权限标识
            },
            menuData: [], // 上级菜单数据
            projectList:[
                {id:'1',name:'基础数据权限管理系统',key:0},
                {id:'2',name:'系统1',key:1},
                {id:'3',name:'系统2',key:2},
                {id:'4',name:'系统3',key:3},
                {id:'5',name:'系统4',key:4},
                {id:'6',name:'应急管理系统',key:5},
                {id:'7',name:'目标责任管理系统',key:6},
                {id:'8',name:'事故管理系统',key:7},
                {id:'9',name:'设备综合管控系统',key:8},
            ],
        });
        // 获取 vuex 中的路由
        const getMenuList = (routes: any) => {
            const arr: any = [];
            routes.map((val: any) => {
                val['title'] = val.meta.title;
                val['id'] = val.id
                arr.push(val);
                if (val.children) getMenuList(val.children);
            });
            return arr;
        };
        // 打开弹窗
        const openDialog = (type:string,value:any) => {
            state.isShowDialog = true;
            if(type === '新增菜单'){
                state.buttonName = '新增'
                state.title = '新增菜单'
                state.ruleForm = {
    export default defineComponent({
        name: 'systemAddMenu',
        components: { IconSelector },
        setup(props,context) {
            const stores = useRoutesList();
            const { routesList } = storeToRefs(stores);
            const state = reactive({
                isShowDialog: false,
                title:'',
                buttonName:'',
                // 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
                ruleForm: {
                    projectId:'',
                    parentId:0,
                    menuSuperior: [],
                    menuType: 'menu',
                    name: '',
                    component: '',
                    priority: 0,
                    path: '',
                    redirect: '',
                    menuSuperior: [], // 上级菜单
                    menuType: 'menu', // 菜单类型
                    name: '', // 路由名称
                    component: '', // 组件路径
                    priority: 0, // 菜单排序
                    path: '', // 路由路径
                    redirect: '', // 路由重定向，有子集 children 时
                    meta: {
                        title: '',
                        icon: '',
                        isHide: false,
                        isKeepAlive: true,
                        isAffix: false,
                        isLink: '',
                        isIframe: false,
                        roles: '',
                        title: '', // 菜单名称
                        icon: '', // 菜单图标
                        isHide: false, // 是否隐藏
                        isKeepAlive: true, // 是否缓存
                        isAffix: false, // 是否固定
                        isLink: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink: 链接地址不为空`
                        isIframe: false, // 是否内嵌，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
                        roles: '', // 权限标识，取角色管理
                    },
                    btnPower: '',
                }
            }else{
                state.buttonName = '修改'
                state.title = '修改菜单'
                state.ruleForm = JSON.parse(JSON.stringify(value))
            }
        };
        // 关闭弹窗
        const closeDialog = () => {
            state.isShowDialog = false;
        };
        // 是否内嵌下拉改变
        // const onSelectIframeChange = () => {
        //     if (state.ruleForm.meta.isIframe) state.ruleForm.isLink = true;
        //     else state.ruleForm.isLink = false;
        // };
        // 取消
        const onCancel = () => {
            closeDialog();
        };
        // 新增
        const onSubmit = async () => {
            if(state.ruleForm.menuSuperior && state.ruleForm.menuSuperior !== []){
                let menuId = JSON.parse(JSON.stringify(state.ruleForm.menuSuperior))
                state.ruleForm.parentId = menuId[menuId.length - 1]
            }
            if(state.title === '新增菜单'){
                let res = await useMenuApi().addMenu(state.ruleForm)
                if(res.data.code === '200'){
                    ElMessage({
                        type:'success',
                        message:'菜单新增成功',
                        duration:2000
                    })
                    closeDialog();
                    context.emit('getMenuList')
                    btnPower: '', // 菜单类型为按钮时，权限标识
                },
                menuData: [], // 上级菜单数据
                projectList:[
                ],
            });
            // 获取 vuex 中的路由
            const getMenuList = (routes: any) => {
                const arr: any = [];
                routes.map((val: any) => {
                    val['title'] = val.meta.title;
                    val['id'] = val.id
                    arr.push(val);
                    if (val.children) getMenuList(val.children);
                });
                return arr;
            };
            // 打开弹窗
            const openDialog = (type:string,value:any,projectList: any,projectId:string) => {
                state.projectList = JSON.parse(JSON.stringify(projectList))
                state.isShowDialog = true;
                if(type === '新增'){
                    state.buttonName = '新增'
                    state.title = '新增菜单'
                    state.ruleForm = {
                        projectId:projectId,
                        parentId:0,
                        menuSuperior: [],
                        menuType: 'menu',
                        name: '',
                        component: '',
                        priority: 0,
                        path: '',
                        redirect: '',
                        meta: {
                            title: '',
                            icon: '',
                            isHide: false,
                            isKeepAlive: true,
                            isAffix: false,
                            isLink: '',
                            isIframe: false,
                            roles: '',
                        },
                        btnPower: '',
                    }
                }else{
                    ElMessage({
                        type:'warning',
                        message:res.data.msg
                    })
                    state.buttonName = '修改'
                    state.title = '修改菜单'
                    state.ruleForm = JSON.parse(JSON.stringify(value))
                    state.ruleForm.projectId = projectId.toString()
                }
            }else{
                let res = await useMenuApi().modMenu(state.ruleForm)
                if(res.data.code === '200'){
                    ElMessage({
                        type:'success',
                        message:'菜单修改成功',
                        duration:2000
                    })
                    closeDialog();
                    context.emit('getMenuList')
                handelMenu()
            };
            // 关闭弹窗
            const closeDialog = () => {
                state.isShowDialog = false;
            };
            // 是否内嵌下拉改变
            // const onSelectIframeChange = () => {
            //     if (state.ruleForm.meta.isIframe) state.ruleForm.isLink = true;
            //     else state.ruleForm.isLink = false;
            // };
            // 取消
            const onCancel = () => {
                closeDialog();
            };
            // 新增
            const onSubmit = async () => {
                if(state.ruleForm.menuSuperior && state.ruleForm.menuSuperior !== []){
                    let menuId = JSON.parse(JSON.stringify(state.ruleForm.menuSuperior))
                    state.ruleForm.parentId = menuId[menuId.length - 1]
                }
                if(state.title === '新增菜单'){
                    let res = await useMenuApi().addMenu(state.ruleForm)
                    if(res.data.code === '200'){
                        ElMessage({
                            type:'success',
                            message:'菜单新增成功',
                            duration:2000
                        })
                        closeDialog();
                        context.emit('getMenuList')
                    }else{
                        ElMessage({
                            type:'warning',
                            message:res.data.msg
                        })
                    }
                }else{
                    ElMessage({
                        type:'warning',
                        message:res.data.msg
                    })
                    let res = await useMenuApi().modMenu(state.ruleForm)
                    if(res.data.code === '200'){
                        ElMessage({
                            type:'success',
                            message:'菜单修改成功',
                            duration:2000
                        })
                        closeDialog();
                        context.emit('getMenuList')
                    }else{
                        ElMessage({
                            type:'warning',
                            message:res.data.msg
                        })
                    }
                }

                // closeDialog(); // 关闭弹窗
                // setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试
            };

            const handelMenu = async () => {
                let res = await useMenuApi().getMenuAdmin(state.ruleForm.projectId)
                state.menuData = JSON.parse(JSON.stringify(getMenuList(res.data.data)))
            }

            // closeDialog(); // 关闭弹窗
            // setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试
        };

        const show = () => {
            console.log(JSON.parse(JSON.stringify(state.ruleForm.menuSuperior)));
        }
        // 页面加载时
        onMounted(async () => {
            let res = await useMenuApi().getMenuAdmin(Session.get('projectId'))
            state.menuData = JSON.parse(JSON.stringify(getMenuList(res.data.data)))
        });
        return {
            openDialog,
            closeDialog,
            onCancel,
            onSubmit,
            ...toRefs(state),
        };
    },
});
            // 页面加载时
            onMounted(async () => {
                // let res = await useMenuApi().getMenuAdmin(Session.get('projectId'))
                // state.menuData = JSON.parse(JSON.stringify(getMenuList(res.data.data)))
            });
            return {
                openDialog,
                closeDialog,
                onCancel,
                onSubmit,
                handelMenu,
                ...toRefs(state),
            };
        },
    });
</script>

 src/views/system/menu/index.vue

@@ -2,8 +2,16 @@
    <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-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>
@@ -48,7 +56,7 @@
                    <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>
<!--                        <el-button size="small" text type="primary" @click="onTabelRowDel(scope.row)">删除</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
@@ -58,71 +66,81 @@
</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/menu";
import {Session} from "/@/utils/storage";
import pinia from "/@/stores";
import {dynamicRoutes} from "/@/router/route";
    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/menu";
    import {Session} from "/@/utils/storage";
    import pinia from "/@/stores";
    import {dynamicRoutes} from "/@/router/route";
    import {useUserInfo} from "/@/stores/userInfo";

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),
        };
    },
});
    export default defineComponent({
        name: 'systemMenu',
        components: { menuDialog },
        setup() {
            const menuDialog = ref();
            const state = reactive({
                projectId:'1',
                menuData:[],
                menuTableData:[],
                projectList:[
                    {id:'1',name:'基础数据权限管理系统',key:0},
                    {id:'2',name:'双重预防系统',key:1},
                    {id:'3',name:'系统2',key:2},
                    {id:'4',name:'系统3',key:3},
                    {id:'5',name:'系统4',key:4},
                    {id:'6',name:'应急管理系统',key:5},
                    {id:'7',name:'目标责任管理系统',key:6},
                    {id:'8',name:'事故管理系统',key:7},
                    {id:'9',name:'设备综合管控系统',key:8},
                ],
            });
            // // 获取 vuex 中的路由
            // const menuTableData = computed(() => {
            //     return routesList.value;
            // });
            // 打开新增菜单弹窗
            const onOpenMenuDialog = (type: string,value: any) => {
                menuDialog.value.openDialog(type,value,state.projectList,state.projectId);
            };
            // 打开编辑菜单弹窗
            // 删除当前行
            const onTabelRowDel = (row: RouteRecordRaw) => {
                ElMessageBox.confirm(`此操作将永久删除路由：${row.path}, 是否继续?`, '提示', {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    ElMessage.success('删除成功');
                }).catch(() => {});
            };
            const getMenuList = async () => {
                let res = await useMenuApi().getMenuAdmin(state.projectId)
                if(res.data.code === '200'){
                    state.menuTableData = 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,
                onTabelRowDel,
                ...toRefs(state),
            };
        },
    });
</script>

 src/views/system/role/index.vue

@@ -136,7 +136,6 @@
                .catch(() => {});
        };
        const handleSearch = () => {
            debugger
            initTableData()
        }
        // 分页改变