<template>
|
<el-form size="large" class="login-content-form">
|
<el-form-item class="login-animation1">
|
<el-input text placeholder="请输入用户登录账号默认是手机号码" v-model="state.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="state.isShowPassword ? 'text' : 'password'"
|
:placeholder="$t('message.account.accountPlaceholder2')"
|
v-model="state.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="state.isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
|
@click="state.isShowPassword = !state.isShowPassword"
|
>
|
</i>
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item v-if="state.clients.length>1">
|
<el-select v-model="state.ruleForm.clientCode" placeholder="请选择登录客户">
|
<el-option v-for="item in state.clients" :key="item.code" :label="item.clientName" :value="item.code" />
|
</el-select>
|
</el-form-item>
|
<!-- <el-form-item class="login-animation3">
|
<el-col :span="15">
|
<el-input
|
text
|
maxlength="4"
|
:placeholder="$t('message.account.accountPlaceholder3')"
|
v-model="state.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" v-waves>1234</el-button>
|
</el-col>
|
</el-form-item> -->
|
<el-form-item class="login-animation4">
|
<el-button type="primary" class="login-content-submit" round v-waves @click="onSignIn" :loading="state.loading.signIn">
|
<span>{{ $t('message.account.accountBtnText') }}</span>
|
</el-button>
|
</el-form-item>
|
</el-form>
|
</template>
|
|
<script setup lang="ts" name="loginAccount">
|
import { reactive, 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,Local } from '/@/utils/storage';
|
import { formatAxis } from '/@/utils/formatTime';
|
import { NextLoading } from '/@/utils/loading';
|
import { confirmClient, getuserinfo, signIn,getclients } from '/@/api/login';
|
|
// 定义变量内容
|
const { t } = useI18n();
|
const storesThemeConfig = useThemeConfig();
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
const route = useRoute();
|
const router = useRouter();
|
const state = reactive({
|
LS_token: '',
|
isShowPassword: false,
|
ruleForm: {
|
userName: '',
|
password: '',
|
code: '',
|
clientCode: '',
|
},
|
clients: [],
|
loading: {
|
signIn: false,
|
},
|
});
|
|
// 时间获取
|
const currentTime = computed(() => {
|
return formatAxis(new Date());
|
});
|
// 登录
|
const onSignIn = async () => {
|
try {
|
// 第二次请求登录获取到了客户 换绑定token
|
if (state.ruleForm.clientCode) {
|
// 重新绑定token
|
const tokenRe= await confirmClient('clientCode='+state.ruleForm.clientCode);
|
// 更新token
|
Session.set('token', tokenRe.data);
|
// 更新客户选择缓存
|
Local.set('client_'+state.ruleForm.userName,state.ruleForm.clientCode)
|
console.log('更新tokeng重新请求用户信息')
|
// 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
|
Cookies.set('userName', state.ruleForm.userName);
|
// 前端控制路由，2、请注意执行顺序
|
const isNoPower = await initFrontEndControlRoutes();
|
signInSuccess(isNoPower);
|
|
} else { //第一次登录没有选择到客户
|
state.loading.signIn = true;
|
const signInRes = await signIn(`userno=${state.ruleForm.userName}&password=${state.ruleForm.password}`);
|
if (signInRes.data) {
|
// 存储 token 到浏览器缓存
|
Session.set('token', signInRes.data);
|
const userinfoRes = await getuserinfo();
|
if (userinfoRes?.data?.clientInfos.length > 1) {
|
console.log('多中心管理账号');
|
console.log(userinfoRes.data);
|
state.clients = userinfoRes?.data?.clientInfos;
|
state.loading.signIn = false;
|
console.log(Local.get('client_'+state.ruleForm.userName))
|
// 看看有没有缓存客户选择
|
const lscode=Local.get('client_'+state.ruleForm.userName)
|
if(lscode){
|
const x=state.clients.findIndex((cl:any)=>{return cl.code===lscode})
|
if(x>=0){
|
// 默认选择客户项
|
state.ruleForm.clientCode=lscode
|
}
|
|
}
|
ElMessage.success('请选择登录客户再登录')
|
} else if (
|
userinfoRes?.data?.roles.findIndex((ro: any) => {
|
return ro.roleName === 'admin';
|
}) >= 0
|
) {
|
|
console.log('管理员登录');
|
state.loading.signIn = false;
|
state.clients=userinfoRes?.data?.管理员能看到的客户列表
|
// 看看有没有缓存客户选择
|
const lscode=Local.get('client_'+state.ruleForm.userName)
|
|
if(lscode){
|
const x=state.clients.findIndex((cl:any)=>{return cl.code===lscode})
|
if(x>=0){
|
// 默认选择客户项
|
state.ruleForm.clientCode=lscode
|
}
|
}
|
ElMessage.success('请选择登录客户再登录')
|
|
} else {
|
console.log('普通登录');
|
console.log('-----------用token 换用户信息---------------');
|
// 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
|
Cookies.set('userName', state.ruleForm.userName);
|
// 前端控制路由，2、请注意执行顺序
|
const isNoPower = await initFrontEndControlRoutes();
|
signInSuccess(isNoPower);
|
}
|
}
|
}
|
} catch (err) {
|
console.log(err);
|
state.loading.signIn = false;
|
}
|
|
// 存储 token 到浏览器缓存
|
// Session.set('token', '999');
|
// 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
|
// Cookies.set('userName', state.ruleForm.userName);
|
// if (!themeConfig.value.isRequestRoutes) {
|
// // 前端控制路由，2、请注意执行顺序
|
// const isNoPower = await initFrontEndControlRoutes();
|
// signInSuccess(isNoPower);
|
// } else {
|
// // 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
|
// // 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
|
// const isNoPower = await initBackEndControlRoutes();
|
// // 执行完 initBackEndControlRoutes，再执行 signInSuccess
|
// signInSuccess(isNoPower);
|
// }
|
};
|
// 登录成功后的跳转
|
const signInSuccess = (isNoPower: boolean | undefined) => {
|
if (isNoPower) {
|
ElMessage.warning('抱歉，您没有登录权限');
|
Session.clear();
|
} else {
|
// 初始化登录成功时间问候语
|
let currentTimeInfo = currentTime.value;
|
// 登录成功，跳到转首页
|
// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
|
if (route.query?.redirect) {
|
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('/');
|
}
|
// 登录成功提示
|
const signInText = t('message.signInText');
|
ElMessage.success(`${currentTimeInfo}，${signInText}`);
|
// 添加 loading，防止第一次进入界面时出现短暂空白
|
NextLoading.start();
|
}
|
state.loading.signIn = false;
|
};
|
</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>
|
