| | |
| | | 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); |
| | |
| | | |
| | | |
| | | 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); |
| | | |
| | | } |
| | |
| | | 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(); |
| | | } |
| | |
| | | import { staticRoutes } from '/@/router/route'; |
| | | import { initFrontEndControlRoutes } from '/@/router/frontEnd'; |
| | | import { initBackEndControlRoutes } from '/@/router/backEnd'; |
| | | import {useUserInfo} from "/@/stores/userInfo"; |
| | | |
| | | |
| | | |
| | |
| | | roles: string[]; |
| | | time: number; |
| | | userName: string; |
| | | sign:string; |
| | | uid:string; |
| | | projectId:string; |
| | | } |
| | | export interface UserInfosStates { |
| | | userInfos: UserInfosState; |
| | |
| | | projectId:string, |
| | | } |
| | | |
| | | export interface loginInfoState { |
| | | loginUser:{ |
| | | projectId:string, |
| | | token:string, |
| | | uid:string, |
| | | } |
| | | } |
| | | |
| | | // 布局配置 |
| | | export interface ThemeConfigState { |
| | | isDrawer: boolean; |
对比新文件 |
| | |
| | | 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: { |
| | | }, |
| | | }); |
| | |
| | | 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; |
| | | // } |
| | | }, |
| | | }, |
| | | }); |
| | |
| | | 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({ |
| | |
| | | (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; |
| | | }, |
| | |
| | | |
| | | (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) |
对比新文件 |
| | |
| | | <template> |
| | | <router-view></router-view> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | name: "index" |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | |
| | | </style> |
对比新文件 |
| | |
| | | <template> |
| | | <div>1</div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | name: "index" |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | |
| | | </style> |
对比新文件 |
| | |
| | | <template> |
| | | <div>4</div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | name: "index" |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | |
| | | </style> |
对比新文件 |
| | |
| | | <template> |
| | | <div>2</div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | name: "index" |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | |
| | | </style> |
对比新文件 |
| | |
| | | <template> |
| | | <div>3</div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | name: "index" |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | |
| | | </style> |
| | |
| | | </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, |
| | |
| | | }; |
| | | |
| | | interface stateType { |
| | | projectId:string, |
| | | homeOne: Array <type> |
| | | } |
| | | interface type { |
| | |
| | | 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 { |
| | |
| | | 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({ |
| | |
| | | // 存储 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 |
| | |
| | | <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> |
| | |
| | | </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> |
| | |
| | | </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> |
| | |
| | | <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> |
| | |
| | | <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> |
| | |
| | | </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> |
| | |
| | | .catch(() => {}); |
| | | }; |
| | | const handleSearch = () => { |
| | | debugger |
| | | initTableData() |
| | | } |
| | | // 分页改变 |