357 lines
12 KiB
Vue
357 lines
12 KiB
Vue
|
<template>
|
||
|
|
<div class="login_page">
|
||
|
|
<div class="login_content">
|
||
|
|
<div class="login_content_body">
|
||
|
|
<img class="login_logo" src='@/assets/images/login_logo.png'>
|
||
|
|
<div class="login_form_content">
|
||
|
|
<img class="login_form_logo" src='@/assets/images/home_logo.png'>
|
||
|
|
<a-input class="login_form_input" size="large" placeholder="account" v-model:value="username">
|
||
|
|
<template #prefix>
|
||
|
|
<span class="icon iconfont icon-yonghuming form_icon_content"></span>
|
||
|
|
</template>
|
||
|
|
</a-input>
|
||
|
|
<a-input type="password" class="login_form_input" size="large" v-model:value="password" placeholder="password" >
|
||
|
|
<template #prefix>
|
||
|
|
<span class="icon iconfont icon-weibiaoti form_icon_content"></span>
|
||
|
|
</template>
|
||
|
|
</a-input>
|
||
|
|
<a-checkbox class="form_checkbox" v-model:checked="isRemember">Remenber Me</a-checkbox>
|
||
|
|
<a-button class="login_button" size="large" type="primary" @click="submitPerLogin">Login</a-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="login_footer_content">copyright ©2023 CodeCreate</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { defineComponent,onMounted,ref,reactive } from "vue";
|
||
|
|
import { Https } from "@/tool/https";
|
||
|
|
import { setCookie } from "@/tool/cookie";
|
||
|
|
import { message } from "ant-design-vue";
|
||
|
|
import { useRouter } from 'vue-router'
|
||
|
|
import { encode, decode } from 'js-base64';
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name:'login',
|
||
|
|
setup(){
|
||
|
|
const router = useRouter()
|
||
|
|
let username = ref('')
|
||
|
|
let password = ref('')
|
||
|
|
let isRemember = ref(false)
|
||
|
|
let menuList:any = reactive([{
|
||
|
|
name:'Workdesk',
|
||
|
|
code:'WORK_BENCH',
|
||
|
|
route:'/home/worktable',
|
||
|
|
icon:'icon-gongzuotai',
|
||
|
|
key:'/home/worktable',
|
||
|
|
isShow:false,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name:'Product Management',
|
||
|
|
code:'PRODUCT_LIST',
|
||
|
|
route:'/home/productmanage',
|
||
|
|
icon:'icon-shangpinguanli',
|
||
|
|
key:'/home/productmanage',
|
||
|
|
isShow:false,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name:'Store Management',
|
||
|
|
code:'STORE_LIST',
|
||
|
|
route:'/home/storemanage',
|
||
|
|
icon:'icon-mendianguanli',
|
||
|
|
key:'/home/storemanage',
|
||
|
|
isShow:false,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name:'Label Management',
|
||
|
|
code:'LABEL_LIST',
|
||
|
|
route:'/home/labelmanage',
|
||
|
|
icon:'icon-biaoqian',
|
||
|
|
key:'/home/labelmanage',
|
||
|
|
isShow:false,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name:'Setting',
|
||
|
|
code:'SYS_MANAGER',
|
||
|
|
route:'',
|
||
|
|
icon:'icon-xitongguanli',
|
||
|
|
key:'sub2',
|
||
|
|
expandIcon:'icon-xialajiantouxiao',
|
||
|
|
isShow:false,
|
||
|
|
children:[
|
||
|
|
{
|
||
|
|
code:'USER_MANAGER',
|
||
|
|
name:'User Management',
|
||
|
|
route:'/home/usermanage',
|
||
|
|
icon:'',
|
||
|
|
key:'/home/usermanage',
|
||
|
|
isShow:false,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
code:'ROLE_MANAGER',
|
||
|
|
name:'Access Permission',
|
||
|
|
route:'/home/rolemanage',
|
||
|
|
icon:'',
|
||
|
|
key:'/home/rolemanage',
|
||
|
|
isShow:false,
|
||
|
|
},
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name:'Export Excil',
|
||
|
|
code:'MI_TU_EXPORT',
|
||
|
|
route:'/home/exportExcil',
|
||
|
|
icon:'icon-xiazaiwenjian',
|
||
|
|
key:'/home/exportExcil',
|
||
|
|
isShow:false,
|
||
|
|
},
|
||
|
|
// {
|
||
|
|
// name:'Export Excil',
|
||
|
|
// code:'EXPORT_EXCIL',
|
||
|
|
// route:'/home/exportExcil',
|
||
|
|
// icon:'icon-xiazaiwenjian',
|
||
|
|
// key:'sub3',
|
||
|
|
// key:'/home/exportExcil',
|
||
|
|
// expandIcon:'icon-xialajiantouxiao',
|
||
|
|
// isShow:true,
|
||
|
|
// children:[
|
||
|
|
// {
|
||
|
|
// code:'USER_MANAGER',
|
||
|
|
// name:'User Management',
|
||
|
|
// route:'/home/excil1',
|
||
|
|
// icon:'',
|
||
|
|
// key:'/home/excil1',
|
||
|
|
// isShow:true,
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// code:'ROLE_MANAGER',
|
||
|
|
// name:'Access Permission',
|
||
|
|
// route:'/home/excil2',
|
||
|
|
// icon:'',
|
||
|
|
// key:'/home/excil2',
|
||
|
|
// isShow:true,
|
||
|
|
// },
|
||
|
|
// ]
|
||
|
|
// }
|
||
|
|
])
|
||
|
|
|
||
|
|
let submitPerLogin = () =>{
|
||
|
|
if (!username) {
|
||
|
|
message.error("Please enter your account");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if(!password){
|
||
|
|
message.error("Please enter your password");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let data = {
|
||
|
|
userAccount: username.value,
|
||
|
|
password: encode(password.value),
|
||
|
|
};
|
||
|
|
Https.axiosPost(Https.httpUrls.accountLogin, data).then(
|
||
|
|
(rv: any) => {
|
||
|
|
if (rv) {
|
||
|
|
let token = rv.token;
|
||
|
|
setCookie("token", token);
|
||
|
|
setCookie("userInfo", JSON.stringify(rv));
|
||
|
|
rememberAccount()
|
||
|
|
getMenuRole()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
let rememberAccount = () =>{
|
||
|
|
if(isRemember){
|
||
|
|
let accountInfo = {
|
||
|
|
account:username.value,
|
||
|
|
password:password.value,
|
||
|
|
}
|
||
|
|
localStorage.setItem('accountInfo',JSON.stringify(accountInfo))
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
let getMenuRole = () =>{
|
||
|
|
Https.axiosGet(Https.httpUrls.queryUsrPermission).then(
|
||
|
|
(rv: any) => {
|
||
|
|
if (rv) {
|
||
|
|
let rolePermission = rv.rolePermission.level1ResourceList
|
||
|
|
let setMenuListShow = (role:any) =>{
|
||
|
|
for(let menu of menuList){
|
||
|
|
|
||
|
|
if(role.code === menu.code){
|
||
|
|
console.log(menu,role);
|
||
|
|
menu.isShow = role.select == 1 ? true :false
|
||
|
|
if(role.operationList){
|
||
|
|
menu.operationList = role.operationList
|
||
|
|
}
|
||
|
|
break
|
||
|
|
}
|
||
|
|
if(menu.children){
|
||
|
|
for(let child of menu.children){
|
||
|
|
if(role.code == child.code){
|
||
|
|
child.isShow = role.select == 1 ? true :false
|
||
|
|
if(role.operationList){
|
||
|
|
child.operationList = role.operationList
|
||
|
|
}
|
||
|
|
break
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
for(let role of rolePermission){
|
||
|
|
setMenuListShow(role)
|
||
|
|
for(let level2 of role.level2ResourceList){
|
||
|
|
setMenuListShow(level2)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
sessionStorage.setItem('menuList',JSON.stringify(menuList))
|
||
|
|
let worktable = menuList.filter((v:any) => v.code === 'WORK_BENCH')[0]
|
||
|
|
if(worktable.isShow){
|
||
|
|
router.push("/home/worktable")
|
||
|
|
}else{
|
||
|
|
message.error('You do not have permission to access this website, please contact your manager.')
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(()=>{
|
||
|
|
if(localStorage.getItem('accountInfo')){
|
||
|
|
let accountInfo:any = localStorage.getItem('accountInfo')
|
||
|
|
accountInfo = JSON.parse(accountInfo)
|
||
|
|
username.value = accountInfo.account
|
||
|
|
password.value = accountInfo.password
|
||
|
|
isRemember.value = true
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
return {
|
||
|
|
username,
|
||
|
|
password,
|
||
|
|
isRemember,
|
||
|
|
submitPerLogin,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.login_page {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
.login_content{
|
||
|
|
width: 1440px;
|
||
|
|
margin: 0 auto;
|
||
|
|
height: 100%;
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.login_content_body{
|
||
|
|
width: 100%;
|
||
|
|
padding: 0 160px 0 80px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.login_logo{
|
||
|
|
width: 457px;
|
||
|
|
height: 370px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.login_form_content{
|
||
|
|
width: 600px;
|
||
|
|
height: 540px;
|
||
|
|
padding: 0 60px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
background: #FFFFFF;
|
||
|
|
box-shadow: -3px 20px 59px 0px rgba(200,200,200,0.3);
|
||
|
|
border-radius: 10px;
|
||
|
|
|
||
|
|
.login_form_logo{
|
||
|
|
width: 165px;
|
||
|
|
margin: 78px auto 60px;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.login_form_input{
|
||
|
|
width: 480px;
|
||
|
|
height: 50px;
|
||
|
|
border: 1px solid #DFDFDF;
|
||
|
|
border-radius: 25px;
|
||
|
|
margin-bottom: 29px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form_checkbox{
|
||
|
|
font-size: 16px;
|
||
|
|
color: #151515;
|
||
|
|
margin-bottom: 29px;
|
||
|
|
|
||
|
|
.ant-checkbox-inner{
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
border: 1px solid #DFDFDF;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.form_icon_content{
|
||
|
|
font-size: 18px;
|
||
|
|
color: #343579;
|
||
|
|
}
|
||
|
|
|
||
|
|
.login_button{
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
height: 50px;
|
||
|
|
background: #343579;
|
||
|
|
border-radius: 25px;
|
||
|
|
font-size: 18px;
|
||
|
|
font-family: Roboto;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.login_footer_content{
|
||
|
|
width: 100%;
|
||
|
|
font-size: 13px;
|
||
|
|
font-family: Roboto;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #151515;
|
||
|
|
text-align: center;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 68px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
<style lang="less">
|
||
|
|
.login_page {
|
||
|
|
.ant-input-prefix{
|
||
|
|
margin: 0px 15px;
|
||
|
|
}
|
||
|
|
.ant-input-affix-wrapper:focus{
|
||
|
|
border-color: #343579 !important;
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
.ant-input-affix-wrapper-focused{
|
||
|
|
border-color: #343579 !important;
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|