TASK
This commit is contained in:
shahaibo
357
src/views/LoginPage.vue
Normal file
357
src/views/LoginPage.vue
Normal file
@@ -0,0 +1,357 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user