From 999935f3e7a6ff1cf286bedfdbb7ccd64bed556a Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期二, 28 六月 2022 17:08:03 +0800
Subject: [PATCH] 'lct'
---
.env.development | 2
src/stores/userInfo.ts | 90 +-
src/views/system/menu/index.vue | 157 +++---
src/views/home/index.vue | 247 ++++-----
src/stores/interface/index.ts | 11
src/utils/request.ts | 10
src/views/login/index.vue | 290 +++++-----
src/router/frontEnd.ts | 2
src/views/login/component/account.vue | 285 +++++-----
src/router/backEnd.ts | 10
src/views/system/menu/component/menuDialog.vue | 345 ++++++-------
11 files changed, 724 insertions(+), 725 deletions(-)
diff --git a/.env.development b/.env.development
index 7e17cb9..46ce6ac 100644
--- a/.env.development
+++ b/.env.development
@@ -2,7 +2,7 @@
ENV = 'development'
# 本地环境接口地址
-VITE_API_URL = 'http://192.168.0.35:8009'
+VITE_API_URL = 'http://192.168.0.35:8008'
# VITE_API_URL = 'http://192.168.0.8:8008'
# VITE_API_URL = 'http://192.168.0.10:8008'
diff --git a/src/router/backEnd.ts b/src/router/backEnd.ts
index 6d7f365..c6e18e0 100644
--- a/src/router/backEnd.ts
+++ b/src/router/backEnd.ts
@@ -29,14 +29,12 @@
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);
await setAddRoute();
await setFilterMenuAndCacheTagsViewRoutes();
- }
+}
export function setFilterMenuAndCacheTagsViewRoutes() {
@@ -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);
}
diff --git a/src/router/frontEnd.ts b/src/router/frontEnd.ts
index af8432b..f672db5 100644
--- a/src/router/frontEnd.ts
+++ b/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();
}
diff --git a/src/stores/interface/index.ts b/src/stores/interface/index.ts
index 994b9a5..25c6fd4 100644
--- a/src/stores/interface/index.ts
+++ b/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;
diff --git a/src/stores/userInfo.ts b/src/stores/userInfo.ts
index 97176a8..1408dfa 100644
--- a/src/stores/userInfo.ts
+++ b/src/stores/userInfo.ts
@@ -15,51 +15,57 @@
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) {
+ debugger
+ 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;
+ // }
},
},
});
diff --git a/src/utils/request.ts b/src/utils/request.ts
index 146e09b..9de0cfe 100644
--- a/src/utils/request.ts
+++ b/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,13 +32,13 @@
(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)
}
// if(response.data.code && response.data.code !== '200'){
- return Promise.resolve(response)
+ return Promise.resolve(response)
// }
// Session.clear()
// window.location.href = '/'
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 45dd9ce..762393f 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -2,14 +2,14 @@
<div class="home-container">
<el-row :gutter="15" class="home-card-one mb15">
<el-col
- :xs="24"
- :sm="12"
- :md="12"
- :lg="4"
- :xl="4"
- v-for="(v, k) in homeOne"
- :key="k"
- :class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }"
+ :xs="24"
+ :sm="12"
+ :md="12"
+ :lg="4"
+ :xl="4"
+ v-for="(v, k) in homeOne"
+ :key="k"
+ :class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }"
>
<div class="home-card-item flex" >
<el-button @click="renderMenu(v.id)">{{v.name}}</el-button>
@@ -50,142 +50,133 @@
</template>
<script lang="ts">
-import { toRefs, reactive, defineComponent, onMounted, ref, watch, nextTick, onActivated } from 'vue';
-import * as echarts from 'echarts';
-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 { toRefs, reactive, defineComponent, } from 'vue';
+ import { storeToRefs } from 'pinia';
+ import { initBackEndControlRoutes } from '/@/router/backEnd';
+ import {useUserInfo} from "/@/stores/userInfo";
+ import { Session } from '/@/utils/storage';
+ let global: any = {
+ homeChartOne: null,
+ homeChartTwo: null,
+ homeCharThree: null,
+ dispose: [null, '', undefined],
+ };
-let global: any = {
- homeChartOne: null,
- homeChartTwo: null,
- homeCharThree: null,
- dispose: [null, '', undefined],
-};
-
-interface stateType {
- projectId:string,
- homeOne: Array <type>
-}
-interface type {
- id:number,
- name: string
-}
-export default defineComponent({
- name: 'home',
- setup() {
- const storesRoutesList = useRoutesList(pinia);
- const { routesList } = storeToRefs(storesRoutesList);
- // const storesTagsViewRoutes = useTagsViewRoutes();
- // const storesThemeConfig = useThemeConfig();
- 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'}],
- });
- // 折线图
- const renderMenu = async (value: string) => {
- state.projectId = value
- Session.set('projectId',value)
- await initBackEndControlRoutes();
- };
- return {
- renderMenu,
- ...toRefs(state),
- };
- },
-});
+ interface stateType {
+ homeOne: Array <type>
+ }
+ interface type {
+ id:number,
+ name: string
+ }
+ export default defineComponent({
+ name: 'home',
+ setup() {
+ const userInfo = useUserInfo()
+ const { userInfos } = storeToRefs(userInfo);
+ const state = reactive<stateType>({
+ homeOne:[{id:1,name:'基础数据权限管理系统'},{id:2,name:'系统1'},{id:3,name:'系统2'},{id:4,name:'系统3'},{id:5,name:'系统4'}],
+ });
+ // 折线图
+ const renderMenu = async (value: string) => {
+ Session.set('projectId',value)
+ userInfos.value.projectId = value
+ await initBackEndControlRoutes();
+ };
+ return {
+ renderMenu,
+ ...toRefs(state),
+ };
+ },
+ });
</script>
<style scoped lang="scss">
-$homeNavLengh: 8;
-.home-container {
- overflow: hidden;
- .home-card-one,
- .home-card-two,
- .home-card-three {
- .home-card-item {
- width: 100%;
- height: 130px;
- border-radius: 4px;
- transition: all ease 0.3s;
- padding: 20px;
- overflow: hidden;
- background: var(--el-color-white);
- color: var(--el-text-color-primary);
- border: 1px solid var(--next-border-color-light);
- &:hover {
- box-shadow: 0 2px 12px var(--next-color-dark-hover);
+ $homeNavLengh: 8;
+ .home-container {
+ overflow: hidden;
+ .home-card-one,
+ .home-card-two,
+ .home-card-three {
+ .home-card-item {
+ width: 100%;
+ height: 130px;
+ border-radius: 4px;
transition: all ease 0.3s;
- }
- &-icon {
- width: 70px;
- height: 70px;
- border-radius: 100%;
- flex-shrink: 1;
- i {
- color: var(--el-text-color-placeholder);
+ padding: 20px;
+ overflow: hidden;
+ background: var(--el-color-white);
+ color: var(--el-text-color-primary);
+ border: 1px solid var(--next-border-color-light);
+ &:hover {
+ box-shadow: 0 2px 12px var(--next-color-dark-hover);
+ transition: all ease 0.3s;
+ }
+ &-icon {
+ width: 70px;
+ height: 70px;
+ border-radius: 100%;
+ flex-shrink: 1;
+ i {
+ color: var(--el-text-color-placeholder);
+ }
+ }
+ &-title {
+ font-size: 15px;
+ font-weight: bold;
+ height: 30px;
}
}
- &-title {
- font-size: 15px;
- font-weight: bold;
- height: 30px;
+ }
+ .home-card-one {
+ @for $i from 0 through 3 {
+ .home-one-animation#{$i} {
+ opacity: 0;
+ animation-name: error-num;
+ animation-duration: 0.5s;
+ animation-fill-mode: forwards;
+ animation-delay: calc($i/10) + s;
+ }
}
}
- }
- .home-card-one {
- @for $i from 0 through 3 {
- .home-one-animation#{$i} {
- opacity: 0;
- animation-name: error-num;
- animation-duration: 0.5s;
- animation-fill-mode: forwards;
- animation-delay: calc($i/10) + s;
- }
- }
- }
- .home-card-two,
- .home-card-three {
- .home-card-item {
- height: 400px;
- width: 100%;
- overflow: hidden;
- .home-monitor {
- height: 100%;
- .flex-warp-item {
- width: 25%;
- height: 111px;
- display: flex;
- .flex-warp-item-box {
- margin: auto;
- text-align: center;
- color: var(--el-text-color-primary);
+ .home-card-two,
+ .home-card-three {
+ .home-card-item {
+ height: 400px;
+ width: 100%;
+ overflow: hidden;
+ .home-monitor {
+ height: 100%;
+ .flex-warp-item {
+ width: 25%;
+ height: 111px;
display: flex;
- border-radius: 5px;
- background: var(--next-bg-color);
- cursor: pointer;
- transition: all 0.3s ease;
- &:hover {
- background: var(--el-color-primary-light-9);
+ .flex-warp-item-box {
+ margin: auto;
+ text-align: center;
+ color: var(--el-text-color-primary);
+ display: flex;
+ border-radius: 5px;
+ background: var(--next-bg-color);
+ cursor: pointer;
transition: all 0.3s ease;
+ &:hover {
+ background: var(--el-color-primary-light-9);
+ transition: all 0.3s ease;
+ }
}
- }
- @for $i from 0 through $homeNavLengh {
- .home-animation#{$i} {
- opacity: 0;
- animation-name: error-num;
- animation-duration: 0.5s;
- animation-fill-mode: forwards;
- animation-delay: calc($i/10) + s;
+ @for $i from 0 through $homeNavLengh {
+ .home-animation#{$i} {
+ opacity: 0;
+ animation-name: error-num;
+ animation-duration: 0.5s;
+ animation-fill-mode: forwards;
+ animation-delay: calc($i/10) + s;
+ }
}
}
}
}
}
}
-}
</style>
diff --git a/src/views/login/component/account.vue b/src/views/login/component/account.vue
index 29b40dd..5e2275a 100644
--- a/src/views/login/component/account.vue
+++ b/src/views/login/component/account.vue
@@ -9,19 +9,19 @@
</el-form-item>
<el-form-item class="login-animation2">
<el-input
- :type="isShowPassword ? 'text' : 'password'"
- :placeholder="$t('message.account.accountPlaceholder2')"
- v-model="ruleForm.password"
- autocomplete="off"
+ :type="isShowPassword ? 'text' : 'password'"
+ :placeholder="$t('message.account.accountPlaceholder2')"
+ v-model="ruleForm.password"
+ autocomplete="off"
>
<template #prefix>
<el-icon class="el-input__icon"><ele-Unlock /></el-icon>
</template>
<template #suffix>
<i
- class="iconfont el-input__icon login-content-password"
- :class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
- @click="isShowPassword = !isShowPassword"
+ class="iconfont el-input__icon login-content-password"
+ :class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
+ @click="isShowPassword = !isShowPassword"
>
</i>
</template>
@@ -30,12 +30,12 @@
<el-form-item class="login-animation3">
<el-col :span="15">
<el-input
- type="text"
- maxlength="4"
- :placeholder="$t('message.account.accountPlaceholder3')"
- v-model="ruleForm.code"
- clearable
- autocomplete="off"
+ type="text"
+ maxlength="4"
+ :placeholder="$t('message.account.accountPlaceholder3')"
+ v-model="ruleForm.code"
+ clearable
+ autocomplete="off"
>
<template #prefix>
<el-icon class="el-input__icon"><ele-Position /></el-icon>
@@ -56,141 +56,138 @@
</template>
<script lang="ts">
-import { toRefs, reactive, defineComponent, computed } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { ElMessage } from 'element-plus';
-import { useI18n } from 'vue-i18n';
-import Cookies from 'js-cookie';
-import { storeToRefs } from 'pinia';
-import { useThemeConfig } from '/@/stores/themeConfig';
-import { initFrontEndControlRoutes } from '/@/router/frontEnd';
-import { initBackEndControlRoutes } from '/@/router/backEnd';
-import { Session } from '/@/utils/storage';
-import { formatAxis } from '/@/utils/formatTime';
-import { NextLoading } from '/@/utils/loading';
-import { useLoginApi } from '/@/api/login';
-import {useUserInfo} from "/@/stores/userInfo";
+ import { toRefs, reactive, defineComponent, computed } from 'vue';
+ import { useRoute, useRouter } from 'vue-router';
+ import { ElMessage } from 'element-plus';
+ import { useI18n } from 'vue-i18n';
+ import Cookies from 'js-cookie';
+ import { storeToRefs } from 'pinia';
+ import { useThemeConfig } from '/@/stores/themeConfig';
+ import { initFrontEndControlRoutes } from '/@/router/frontEnd';
+ import { initBackEndControlRoutes } from '/@/router/backEnd';
+ import { Session } from '/@/utils/storage';
+ import { formatAxis } from '/@/utils/formatTime';
+ import { NextLoading } from '/@/utils/loading';
+ import { useLoginApi } from '/@/api/login';
+ import {useUserInfo} from "/@/stores/userInfo";
-export default defineComponent({
- name: 'loginAccount',
- 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({
- isShowPassword: false,
- ruleForm: {
- username: 'admin',
- password: '123456',
- },
- loading: {
- signIn: false,
- },
- });
- // 时间获取
- const currentTime = computed(() => {
- return formatAxis(new Date());
- });
- // 登录
- const onSignIn = async () => {
- state.loading.signIn = true;
- // 存储 token 到浏览器缓存
- let res = await useLoginApi().signIn(state.ruleForm)
- if(res.data.code === '200'){
- Session.set('ifMenu',false)
- Session.set('projectId','')
- Session.set('token', res.data.data.accessToken);
- Session.set('sign',res.data.data.id)
- await initFrontEndControlRoutes();
- signInSuccess();
- }else{
- state.loading.signIn = false
- ElMessage({
- type:'warning',
- message:res.data.msg
- })
- }
- // Session.set('token', Math.random().toString(36).substr(0));
- // // 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
- // Cookies.set('userName', state.ruleForm.username);
- // if (!themeConfig.value.isRequestRoutes) {
- // // 前端控制路由，2、请注意执行顺序
- // await initFrontEndControlRoutes();
- // signInSuccess();
- // } else {
- // // 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
- // // 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
- // await initBackEndControlRoutes();
- // // 执行完 initBackEndControlRoutes，再执行 signInSuccess
- // signInSuccess();
- // }
- };
- // 登录成功后的跳转
- const signInSuccess = async () => {
- // 初始化登录成功时间问候语
- let currentTimeInfo = currentTime.value;
- // 登录成功，跳到转首页
- // 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
- if (route.query?.redirect) {
- router.push('/');
- // router.push({
- // path: <string>route.query?.redirect,
- // query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
- // });
- } else {
- router.push('/login');
- }
- state.loading.signIn = true;
- const signInText = t('message.signInText');
- ElMessage.success(`${currentTimeInfo}，${signInText}`);
- // 登录成功提示
- // 关闭 loading
- // 添加 loading，防止第一次进入界面时出现短暂空白
- // NextLoading.start();
- };
- return {
- onSignIn,
- ...toRefs(state),
- };
- },
-});
+ export default defineComponent({
+ name: 'loginAccount',
+ setup() {
+ const { t } = useI18n();
+ const userInfo = useUserInfo()
+ const route = useRoute();
+ const router = useRouter();
+ const state = reactive({
+ isShowPassword: false,
+ ruleForm: {
+ username: 'admin',
+ password: '123456',
+ },
+ loading: {
+ signIn: false,
+ },
+ });
+ // 时间获取
+ const currentTime = computed(() => {
+ return formatAxis(new Date());
+ });
+ // 登录
+ const onSignIn = async () => {
+ state.loading.signIn = true;
+ // 存储 token 到浏览器缓存
+ let res = await useLoginApi().signIn(state.ruleForm)
+ if(res.data.code === '200'){
+ userInfo.setUserInfos(res.data.data)
+ Session.set('token', res.data.data.accessToken);
+ Session.set('projectId','');
+ Session.set('uid',res.data.data.id);
+ await initBackEndControlRoutes();
+ signInSuccess();
+ }else{
+ state.loading.signIn = false
+ ElMessage({
+ type:'warning',
+ message:res.data.msg
+ })
+ }
+ // Session.set('token', Math.random().toString(36).substr(0));
+ // // 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
+ // Cookies.set('userName', state.ruleForm.username);
+ // if (!themeConfig.value.isRequestRoutes) {
+ // // 前端控制路由，2、请注意执行顺序
+ // await initFrontEndControlRoutes();
+ // signInSuccess();
+ // } else {
+ // // 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
+ // // 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
+ // await initBackEndControlRoutes();
+ // // 执行完 initBackEndControlRoutes，再执行 signInSuccess
+ // signInSuccess();
+ // }
+ };
+ // 登录成功后的跳转
+ const signInSuccess = async () => {
+ // 初始化登录成功时间问候语
+ let currentTimeInfo = currentTime.value;
+ // 登录成功，跳到转首页
+ // 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
+ if (route.query?.redirect) {
+ router.push('/');
+ // router.push({
+ // path: <string>route.query?.redirect,
+ // query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
+ // });
+ } else {
+ router.push('/login');
+ }
+ state.loading.signIn = true;
+ const signInText = t('message.signInText');
+ ElMessage.success(`${currentTimeInfo}，${signInText}`);
+ // 登录成功提示
+ // 关闭 loading
+ // 添加 loading，防止第一次进入界面时出现短暂空白
+ // NextLoading.start();
+ };
+ return {
+ onSignIn,
+ ...toRefs(state),
+ };
+ },
+ });
</script>
<style scoped lang="scss">
-.login-content-form {
- margin-top: 20px;
- @for $i from 1 through 4 {
- .login-animation#{$i} {
- opacity: 0;
- animation-name: error-num;
- animation-duration: 0.5s;
- animation-fill-mode: forwards;
- animation-delay: calc($i/10) + s;
+ .login-content-form {
+ margin-top: 20px;
+ @for $i from 1 through 4 {
+ .login-animation#{$i} {
+ opacity: 0;
+ animation-name: error-num;
+ animation-duration: 0.5s;
+ animation-fill-mode: forwards;
+ animation-delay: calc($i/10) + s;
+ }
+ }
+ .login-content-password {
+ display: inline-block;
+ width: 20px;
+ cursor: pointer;
+ &:hover {
+ color: #909399;
+ }
+ }
+ .login-content-code {
+ width: 100%;
+ padding: 0;
+ font-weight: bold;
+ letter-spacing: 5px;
+ }
+ .login-content-submit {
+ width: 100%;
+ letter-spacing: 2px;
+ font-weight: 300;
+ margin-top: 15px;
}
}
- .login-content-password {
- display: inline-block;
- width: 20px;
- cursor: pointer;
- &:hover {
- color: #909399;
- }
- }
- .login-content-code {
- width: 100%;
- padding: 0;
- font-weight: bold;
- letter-spacing: 5px;
- }
- .login-content-submit {
- width: 100%;
- letter-spacing: 2px;
- font-weight: 300;
- margin-top: 15px;
- }
-}
</style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 3ded06e..4273e6e 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -23,168 +23,168 @@
</template>
<script lang="ts">
-import { toRefs, reactive, computed, defineComponent, onMounted } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useThemeConfig } from '/@/stores/themeConfig';
-import logoMini from '/@/assets/logo-mini.svg';
-import loginIconTwo from '/@/assets/login-icon-two.svg';
-import { NextLoading } from '/@/utils/loading';
-import Account from '/@/views/login/component/account.vue';
+ import { toRefs, reactive, computed, defineComponent, onMounted } from 'vue';
+ import { storeToRefs } from 'pinia';
+ import { useThemeConfig } from '/@/stores/themeConfig';
+ import logoMini from '/@/assets/logo-mini.svg';
+ import loginIconTwo from '/@/assets/login-icon-two.svg';
+ import { NextLoading } from '/@/utils/loading';
+ import Account from '/@/views/login/component/account.vue';
-// 定义接口来定义对象的类型
-interface LoginState {
- tabsActiveName: string;
- isScan: boolean;
-}
+ // 定义接口来定义对象的类型
+ interface LoginState {
+ tabsActiveName: string;
+ isScan: boolean;
+ }
-export default defineComponent({
- name: 'loginIndex',
- components: { Account, },
- setup() {
- const storesThemeConfig = useThemeConfig();
- const { themeConfig } = storeToRefs(storesThemeConfig);
- const state = reactive<LoginState>({
- tabsActiveName: 'account',
- isScan: false,
- });
- // 获取布局配置信息
- const getThemeConfig = computed(() => {
- return themeConfig.value;
- });
- // 页面加载时
- onMounted(() => {
- NextLoading.done();
- });
- return {
- logoMini,
- loginIconTwo,
- getThemeConfig,
- ...toRefs(state),
- };
- },
-});
+ export default defineComponent({
+ name: 'loginIndex',
+ components: { Account, },
+ setup() {
+ const storesThemeConfig = useThemeConfig();
+ const { themeConfig } = storeToRefs(storesThemeConfig);
+ const state = reactive<LoginState>({
+ tabsActiveName: 'account',
+ isScan: false,
+ });
+ // 获取布局配置信息
+ const getThemeConfig = computed(() => {
+ return themeConfig.value;
+ });
+ // 页面加载时
+ onMounted(() => {
+ NextLoading.done();
+ });
+ return {
+ logoMini,
+ loginIconTwo,
+ getThemeConfig,
+ ...toRefs(state),
+ };
+ },
+ });
</script>
<style scoped lang="scss">
-.login-container {
- width: 100%;
- height: 100%;
- position: relative;
- background: var(--el-color-white);
- .login-icon-group {
+ .login-container {
width: 100%;
height: 100%;
position: relative;
- .login-icon-group-title {
- position: absolute;
- top: 50px;
- left: 80px;
- display: flex;
- align-items: center;
- img {
- width: 30px;
- height: 30px;
+ background: var(--el-color-white);
+ .login-icon-group {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ .login-icon-group-title {
+ position: absolute;
+ top: 50px;
+ left: 80px;
+ display: flex;
+ align-items: center;
+ img {
+ width: 30px;
+ height: 30px;
+ }
+ &-text {
+ padding-left: 15px;
+ color: var(--el-color-primary);
+ }
}
- &-text {
- padding-left: 15px;
- color: var(--el-color-primary);
- }
- }
- &::before {
- content: '';
- position: absolute;
- bottom: 0;
- left: 0;
- width: 60%;
- overflow: hidden;
- height: 80%;
- -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='1200' height='770' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cg%3E%3Cpath id='svg_1' d='M58.4 47.77C104.6 59.51 135.26 67.37 162.11 78.04C188.97 88.72 226.33 102.69 265.92 123.55C305.51 144.4 366.96 167.09 441.43 121.52C515.9 75.95 546.48 61.01 577.69 46.27C608.9 31.53 625.86 23.69 680.26 12.28C734.65 0.87 837.29 10.7 867.29 21.8C897.29 32.9 935.51 51.9 962.21 95.45C988.9 139.01 972.91 177.36 951.37 221.39C929.83 265.43 883.49 306 890.44 337.33C897.4 368.66 974.73 412.18 974.73 411.47C974.73 412.18 1066.36 457.62 1106.36 491.06C1146.36 524.5 1178.8 563.36 1184.03 579.63C1189.26 595.9 1200.4 622.49 1181.55 676.88C1162.71 731.26 1127.16 764.32 1115.31 778.64C1103.45 792.96 5.34 783.61 4.32 784.63C3.3 785.65 -172.34 2.38 1.13 35.04L58.4 47.77L58.4 47.77Z' fill='%23409eff'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
- background: var(--el-color-primary-light-5);
- transition: all 0.3s ease;
- }
- &::after {
- content: '';
- width: 150px;
- height: 300px;
- position: absolute;
- right: 0;
- top: 0;
- -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='150' height='300' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cg%3E%3Cpath id='svg_1' d='M-0.56 -0.28C41.94 36.17 67.73 18.94 93.33 33.96C118.93 48.98 107.58 73.56 101.94 89.76C96.29 105.96 50.09 217.83 47.87 231.18C45.64 244.52 46.02 255.2 64.4 270.05C82.79 284.91 121.99 292.31 111.98 289.81C101.97 287.32 153.96 301.48 151.83 299.9C149.69 298.32 149.98 -1.36 149.71 -1.18C149.98 -1.36 -43.06 -36.74 -0.56 -0.28L-0.56 -0.28Z' fill='%23409eff'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
- background: var(--el-color-primary-light-5);
- transition: all 0.3s ease;
- }
- &-icon {
- width: 60%;
- height: 70%;
- position: absolute;
- left: 0;
- bottom: 0;
- }
- }
- .login-content {
- width: 500px;
- padding: 20px;
- position: absolute;
- right: 200px;
- top: 50%;
- transform: translateY(-50%) translate3d(0, 0, 0);
- background-color: var(--el-color-white);
- border: 5px solid var(--el-color-primary-light-8);
- border-radius: 5px;
- overflow: hidden;
- z-index: 1;
- height: 460px;
- .login-content-main {
- margin: 0 auto;
- width: 80%;
- .login-content-title {
- color: var(--el-text-color-primary);
- font-weight: 500;
- font-size: 22px;
- text-align: center;
- letter-spacing: 4px;
- margin: 15px 0 30px;
- white-space: nowrap;
- z-index: 5;
- position: relative;
+ &::before {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 60%;
+ overflow: hidden;
+ height: 80%;
+ -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='1200' height='770' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cg%3E%3Cpath id='svg_1' d='M58.4 47.77C104.6 59.51 135.26 67.37 162.11 78.04C188.97 88.72 226.33 102.69 265.92 123.55C305.51 144.4 366.96 167.09 441.43 121.52C515.9 75.95 546.48 61.01 577.69 46.27C608.9 31.53 625.86 23.69 680.26 12.28C734.65 0.87 837.29 10.7 867.29 21.8C897.29 32.9 935.51 51.9 962.21 95.45C988.9 139.01 972.91 177.36 951.37 221.39C929.83 265.43 883.49 306 890.44 337.33C897.4 368.66 974.73 412.18 974.73 411.47C974.73 412.18 1066.36 457.62 1106.36 491.06C1146.36 524.5 1178.8 563.36 1184.03 579.63C1189.26 595.9 1200.4 622.49 1181.55 676.88C1162.71 731.26 1127.16 764.32 1115.31 778.64C1103.45 792.96 5.34 783.61 4.32 784.63C3.3 785.65 -172.34 2.38 1.13 35.04L58.4 47.77L58.4 47.77Z' fill='%23409eff'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+ background: var(--el-color-primary-light-5);
transition: all 0.3s ease;
}
+ &::after {
+ content: '';
+ width: 150px;
+ height: 300px;
+ position: absolute;
+ right: 0;
+ top: 0;
+ -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='150' height='300' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cg%3E%3Cpath id='svg_1' d='M-0.56 -0.28C41.94 36.17 67.73 18.94 93.33 33.96C118.93 48.98 107.58 73.56 101.94 89.76C96.29 105.96 50.09 217.83 47.87 231.18C45.64 244.52 46.02 255.2 64.4 270.05C82.79 284.91 121.99 292.31 111.98 289.81C101.97 287.32 153.96 301.48 151.83 299.9C149.69 298.32 149.98 -1.36 149.71 -1.18C149.98 -1.36 -43.06 -36.74 -0.56 -0.28L-0.56 -0.28Z' fill='%23409eff'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+ background: var(--el-color-primary-light-5);
+ transition: all 0.3s ease;
+ }
+ &-icon {
+ width: 60%;
+ height: 70%;
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ }
}
- .login-content-main-sacn {
+ .login-content {
+ width: 500px;
+ padding: 20px;
position: absolute;
- top: 0;
- right: 0;
- width: 50px;
- height: 50px;
+ right: 200px;
+ top: 50%;
+ transform: translateY(-50%) translate3d(0, 0, 0);
+ background-color: var(--el-color-white);
+ border: 5px solid var(--el-color-primary-light-8);
+ border-radius: 5px;
overflow: hidden;
- cursor: pointer;
- transition: all ease 0.3s;
- color: var(--el-text-color-primary);
- &-delta {
+ z-index: 1;
+ height: 460px;
+ .login-content-main {
+ margin: 0 auto;
+ width: 80%;
+ .login-content-title {
+ color: var(--el-text-color-primary);
+ font-weight: 500;
+ font-size: 22px;
+ text-align: center;
+ letter-spacing: 4px;
+ margin: 15px 0 30px;
+ white-space: nowrap;
+ z-index: 5;
+ position: relative;
+ transition: all 0.3s ease;
+ }
+ }
+ .login-content-main-sacn {
position: absolute;
- width: 35px;
- height: 70px;
- z-index: 2;
- top: 2px;
- right: 21px;
- background: var(--el-color-white);
- transform: rotate(-45deg);
- }
- &:hover {
- opacity: 1;
- transition: all ease 0.3s;
- color: var(--el-color-primary) !important;
- }
- i {
- width: 47px;
+ top: 0;
+ right: 0;
+ width: 50px;
height: 50px;
- display: inline-block;
- font-size: 48px;
- position: absolute;
- right: 2px;
- top: -1px;
+ overflow: hidden;
+ cursor: pointer;
+ transition: all ease 0.3s;
+ color: var(--el-text-color-primary);
+ &-delta {
+ position: absolute;
+ width: 35px;
+ height: 70px;
+ z-index: 2;
+ top: 2px;
+ right: 21px;
+ background: var(--el-color-white);
+ transform: rotate(-45deg);
+ }
+ &:hover {
+ opacity: 1;
+ transition: all ease 0.3s;
+ color: var(--el-color-primary) !important;
+ }
+ i {
+ width: 47px;
+ height: 50px;
+ display: inline-block;
+ font-size: 48px;
+ position: absolute;
+ right: 2px;
+ top: -1px;
+ }
}
}
}
-}
</style>
diff --git a/src/views/system/menu/component/menuDialog.vue b/src/views/system/menu/component/menuDialog.vue
index 8b2f441..826201a 100644
--- a/src/views/system/menu/component/menuDialog.vue
+++ b/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>
@@ -58,10 +58,10 @@
<el-form-item label="项目名">
<el-select 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,174 @@
</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))
}
- }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>
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 06f0a82..9c942d7 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -2,7 +2,7 @@
<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">
+ <el-select size="default" v-model="projectId" placeholder="请选择项目名称" style="max-width: 180px" @change="getMenuList()">
<el-option
v-for="item in projectList"
:key="item.key"
@@ -11,7 +11,7 @@
>
</el-option>
</el-select>
- <el-button size="default" type="primary" class="ml10">
+ <el-button size="default" type="primary" class="ml10" @click="getMenuList">
<el-icon>
<ele-Search />
</el-icon>
@@ -66,82 +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({
- projectId:'',
- 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 menuTableData = computed(() => {
- return routesList.value;
- });
- // 打开新增菜单弹窗
- const onOpenMenuDialog = (type: string,value: any) => {
- 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:'系统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 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>
--
Gitblit v1.9.2