From ecd6ecebd8372239c1bf3a13c11c0b743ee1b946 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期二, 12 七月 2022 15:34:10 +0800
Subject: [PATCH] 菜单跳转
---
.env.development | 3
/dev/null | 190 -----------------------------------------------
src/views/loginPage/component/accountLogin.vue | 5
src/views/homeMenu/homeMenu.vue | 33 ++++++-
4 files changed, 32 insertions(+), 199 deletions(-)
diff --git a/.env.development b/.env.development
index 806f441..edf9969 100644
--- a/.env.development
+++ b/.env.development
@@ -2,8 +2,9 @@
ENV = 'development'
# 本地环境接口地址
-VITE_API_URL = 'http://192.168.0.76:8009'
+#VITE_API_URL = 'http://192.168.0.76:8009'
# VITE_API_URL = 'http://192.168.0.8:8008'
+ VITE_API_URL = 'http://192.168.0.35:8008'
# VITE_API_URL = 'http://192.168.0.10:8008'
# VITE_API_URL = 'http://192.168.0.62:8008'
diff --git a/src/views/homeMenu/homeMenu.vue b/src/views/homeMenu/homeMenu.vue
index 2dea8a3..9d3f67c 100644
--- a/src/views/homeMenu/homeMenu.vue
+++ b/src/views/homeMenu/homeMenu.vue
@@ -61,6 +61,9 @@
import {useRoute, useRouter} from "vue-router";
import {initBackEndControlRoutes} from "/@/router/backEnd";
import {useUserInfo} from "/@/stores/userInfo";
+ import { ElMessage } from 'element-plus';
+ import pinia from '/@/stores';
+ import { useRoutesList } from '/@/stores/routesList';
// 定义接口来定义对象的类型
interface LoginState {
@@ -76,6 +79,8 @@
const router = useRouter();
const userInfo = useUserInfo()
const { userInfos } = storeToRefs(userInfo);
+ const routeToStore = useRoutesList(pinia);
+ const { routesList } = storeToRefs(routeToStore);
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const state = reactive<LoginState>({
@@ -90,12 +95,28 @@
const onLoginOut = () => {
console.log('退出登录')
};
- const renderMenu = async (value: string) => {
- Session.set('projectId',value)
- userInfos.value.projectId = value
- await initBackEndControlRoutes();
- router.push('/home')
- };
+ const renderMenu = async (value: string) => {
+ Session.set('projectId', value);
+ userInfos.value.projectId = value;
+ await initBackEndControlRoutes().then(() => {
+ let linkToMenu = [...routesList.value];
+ if (linkToMenu && linkToMenu.length > 1) {
+ console.log(linkToFirstMenu(JSON.parse(JSON.stringify(linkToMenu))[1]));
+ router.push(linkToFirstMenu(JSON.parse(JSON.stringify(linkToMenu))[1]));
+ } else {
+ ElMessage({ type: 'warning', message: '你没有该项目的权限' });
+ }
+ });
+ };
+ const linkToFirstMenu: any = (value: any) => {
+ debugger
+ let returnMenu = value;
+ if (returnMenu.children?.length > 0) {
+ return linkToFirstMenu(returnMenu.children[0]);
+ } else {
+ return returnMenu.path;
+ }
+ };
//点击进入特殊作业
const toSpecialWorkSys = () => {
router.push('/layoutPage');
diff --git a/src/views/login/component/account.vue b/src/views/login/component/account.vue
deleted file mode 100644
index ca1e619..0000000
--- a/src/views/login/component/account.vue
+++ /dev/null
@@ -1,193 +0,0 @@
-<template>
- <el-form size="large" class="login-content-form">
- <el-form-item class="login-animation1">
- <el-input type="text" :placeholder="$t('message.account.accountPlaceholder1')" v-model="ruleForm.username" clearable autocomplete="off">
- <template #prefix>
- <el-icon class="el-input__icon"><ele-User /></el-icon>
- </template>
- </el-input>
- </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"
- >
- <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"
- >
- </i>
- </template>
- </el-input>
- </el-form-item>
- <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"
- >
- <template #prefix>
- <el-icon class="el-input__icon"><ele-Position /></el-icon>
- </template>
- </el-input>
- </el-col>
- <el-col :span="1"></el-col>
- <el-col :span="8">
- <el-button class="login-content-code">1234</el-button>
- </el-col>
- </el-form-item>
- <el-form-item class="login-animation4">
- <el-button type="primary" class="login-content-submit" round @click="onSignIn" :loading="loading.signIn">
- <span>{{ $t('message.account.accountBtnText') }}</span>
- </el-button>
- </el-form-item>
- </el-form>
-</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";
-
- 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.uid);
- 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-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
deleted file mode 100644
index 4273e6e..0000000
--- a/src/views/login/index.vue
+++ /dev/null
@@ -1,190 +0,0 @@
-<template>
- <div class="login-container">
- <div class="login-icon-group">
- <img :src="loginIconTwo" class="login-icon-group-icon" />
- </div>
- <div class="login-content">
- <div class="login-content-main">
- <h4 class="login-content-title ml15"></h4>
- <div v-if="!isScan">
- <el-tabs v-model="tabsActiveName">
- <el-tab-pane :label="$t('message.label.one1')" name="account">
- <Account />
- </el-tab-pane>
- </el-tabs>
- </div>
- <Scan v-if="isScan" />
- <div class="login-content-main-sacn" @click="isScan = !isScan">
- <div class="login-content-main-sacn-delta"></div>
- </div>
- </div>
- </div>
- </div>
-</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';
-
- // 定义接口来定义对象的类型
- 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),
- };
- },
- });
-</script>
-
-<style scoped lang="scss">
- .login-container {
- width: 100%;
- height: 100%;
- position: relative;
- 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);
- }
- }
- &::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;
- transition: all 0.3s ease;
- }
- }
- .login-content-main-sacn {
- position: absolute;
- top: 0;
- right: 0;
- width: 50px;
- height: 50px;
- 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/loginPage/component/accountLogin.vue b/src/views/loginPage/component/accountLogin.vue
index c8a4242..6be3a40 100644
--- a/src/views/loginPage/component/accountLogin.vue
+++ b/src/views/loginPage/component/accountLogin.vue
@@ -14,6 +14,7 @@
v-model="ruleForm.password"
autocomplete="off"
size="large"
+ @keyup.enter.native="onSignIn"
>
<template #prefix>
<el-icon class="el-input__icon" style="margin-right: 20px"><img src="../../../assets/loginPage/login_icon_password.png" style="width: 24px;height: 24px"></el-icon>
@@ -66,8 +67,8 @@
const state = reactive({
isShowPassword: false,
ruleForm: {
- username: 'admin',
- password: '123456',
+ username: '',
+ password: '',
},
loading: {
signIn: false,
--
Gitblit v1.9.2