287 lines
6.9 KiB
Vue
287 lines
6.9 KiB
Vue
<template>
|
|
<div class="login">
|
|
<div class="login-inner">
|
|
<!-- <div class="login-logo">FEMS</div>-->
|
|
<div class="login-logo">
|
|
<img v-if="isDarkMode" src="@/assets/images/logo_dm.png" />
|
|
<img v-else src="@/assets/images/logo_lm.png" />
|
|
</div>
|
|
<div class="login-img">
|
|
<v-avatar size="100" :color="isDarkMode ? '#1d2132' : '#fff'">
|
|
<v-icon size="60" :color="isDarkMode ? '#fff' : '#3f4d7d'"
|
|
>mdi-account</v-icon
|
|
>
|
|
</v-avatar>
|
|
<!-- <img v-if="isDarkMode" src="@/assets/images/login_dm.png" />
|
|
<img v-else src="@/assets/images/login_lm.png" /> -->
|
|
</div>
|
|
<div>
|
|
<AlertPopup ref="alertPop" v-show="false" :item="alertItem" />
|
|
<div ref="form">
|
|
<div class="login-form">
|
|
<v-text-field
|
|
v-model.trim="userId"
|
|
ref="userId"
|
|
type="text"
|
|
@keypress.enter="focusPw()"
|
|
class="v-input__custom"
|
|
placeholder="아이디"
|
|
:hide-details="true"
|
|
height="44"
|
|
></v-text-field>
|
|
</div>
|
|
<div class="login-form">
|
|
<v-text-field
|
|
v-model.trim="userPw"
|
|
ref="userPw"
|
|
type="password"
|
|
@keypress.enter="mberCheck()"
|
|
class="v-input__custom"
|
|
placeholder="비밀번호"
|
|
:hide-details="true"
|
|
height="44"
|
|
></v-text-field>
|
|
</div>
|
|
<template v-if="this.comIdHidden">
|
|
<div class="login-form">
|
|
<v-text-field
|
|
v-model.trim="userComId"
|
|
ref="userComId"
|
|
type="text"
|
|
@keypress.enter="mberCheck()"
|
|
class="v-input__custom"
|
|
placeholder="회사코드"
|
|
:hide-details="true"
|
|
height="44"
|
|
></v-text-field>
|
|
</div>
|
|
</template>
|
|
<v-btn type="button" :ripple="false" @click="mberCheck" large block>
|
|
로그인
|
|
</v-btn>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapMutations } from 'vuex';
|
|
import $cookie from 'vue-cookie';
|
|
import AlertPopup from '~/components/common/modal/AlertPopup';
|
|
export default {
|
|
layout: 'landing',
|
|
components: {
|
|
AlertPopup,
|
|
},
|
|
data: () => ({
|
|
valid: true,
|
|
userId: '',
|
|
userPw: '',
|
|
userComId: '',
|
|
alertItem: {},
|
|
comIdHidden: true,
|
|
}),
|
|
computed: {
|
|
...mapState(['indexRoot', 'isDarkMode', 'myHome']),
|
|
},
|
|
|
|
mounted() {
|
|
const routerComIdPath = this.$router.currentRoute.fullPath;
|
|
const routerComIdQuery = this.$router.currentRoute.query;
|
|
|
|
if (routerComIdPath != '/login') {
|
|
let key = Object.keys(routerComIdQuery);
|
|
this.userComId = decodeURI(key[0]);
|
|
this.comIdHidden = false;
|
|
}
|
|
|
|
this.focusId();
|
|
},
|
|
|
|
methods: {
|
|
...mapMutations({
|
|
setUserInfo: 'setUserInfo',
|
|
}),
|
|
focusId() {
|
|
this.$refs.userId.focus();
|
|
},
|
|
focusPw() {
|
|
this.$refs.userPw.focus();
|
|
},
|
|
focusComId() {
|
|
this.$refs.userComId.focus();
|
|
},
|
|
async mberCheck() {
|
|
// if (this.userId == '') {
|
|
// // alert("사용자 아이디는 필수항목입니다.");
|
|
// this.alertItem = {
|
|
// label: '경고',
|
|
// message: '사용자 아이디를 입력해주세요',
|
|
// };
|
|
// this.$refs['alertPop'].dialog = true;
|
|
// this.focusId();
|
|
// return;
|
|
// }
|
|
|
|
// if (this.userPw == '') {
|
|
// // alert("비밀번호는 필수항목입니다.");
|
|
// this.alertItem = {
|
|
// label: '경고',
|
|
// message: '비밀번호를 입력해주세요',
|
|
// };
|
|
// this.$refs['alertPop'].dialog = true;
|
|
// this.focusPw();
|
|
// return;
|
|
// }
|
|
|
|
// if (this.userComId == '') {
|
|
// // alert("회사코드는 필수항목입니다.");
|
|
// this.alertItem = {
|
|
// label: '경고',
|
|
// message: '회사코드를 입력해주세요',
|
|
// };
|
|
// this.$refs['alertPop'].dialog = true;
|
|
// this.focusComId();
|
|
// return;
|
|
// }
|
|
await this.loginChk();
|
|
},
|
|
// async loginChk() {
|
|
// const DOMAIN = '';
|
|
// const apiUrl = 'loginChk';
|
|
// const params = {
|
|
// local: 'ko',
|
|
// comId: this.userComId, // 요청 comId는 클라우드 서비스시는 입력 값으로 처리 되어야 할수 있음.
|
|
// userId: this.userId,
|
|
// userPswd: this.userPw,
|
|
// };
|
|
// const res = await this.$axios.post(DOMAIN + apiUrl, { params: params });
|
|
// const femsSessionCookie = 3434;
|
|
// const FEMS_SESSION = femsSessionCookie;
|
|
// $cookie.set('FEMS_SESSION', FEMS_SESSION);
|
|
// this.setUserInfo(res.data.dataset.userInfo);
|
|
// // alert("임시로 로그인 처리 되었습니다. dashboard 페이지로 이동합니다.");
|
|
// // console.log('res.data.dataset.userInfo: ', res.data.dataset.userInfo);
|
|
// // return;
|
|
// this.$router.push({ path: this.myHome.root });
|
|
|
|
// },
|
|
async loginChk() {
|
|
const DOMAIN = '';
|
|
const apiUrl = 'loginChk';
|
|
const params = {
|
|
local: 'ko',
|
|
comId: this.userComId, // 요청 comId는 클라우드 서비스시는 입력 값으로 처리 되어야 할수 있음.
|
|
userId: this.userId,
|
|
userPswd: this.userPw,
|
|
};
|
|
console.log('asdasd' + JSON.stringify( DOMAIN) + params)
|
|
const res = await this.$axios.post(DOMAIN + apiUrl, { params: params });
|
|
if (res.data.retnCd === -9001) {
|
|
alert(res.data.retnMsg);
|
|
return {};
|
|
} else {
|
|
const femsSessionCookie = res.data.dataset.FEMS_SESSION;
|
|
const FEMS_SESSION = femsSessionCookie;
|
|
|
|
$cookie.set('FEMS_SESSION', FEMS_SESSION);
|
|
this.setUserInfo(res.data.dataset.userInfo);
|
|
|
|
console.log('FEMS_SESSION', FEMS_SESSION);
|
|
console.log('$cookie.get', $cookie.get('FEMS_SESSION'));
|
|
console.log('userInfo', JSON.stringify(res.data.dataset.userInfo));
|
|
|
|
// alert("임시로 로그인 처리 되었습니다. dashboard 페이지로 이동합니다.");
|
|
this.$router.push({ path: this.myHome.root });
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@import '@/assets/scss/var.scss';
|
|
@import '@/assets/scss/mixin.scss';
|
|
|
|
::v-deep {
|
|
.v-avatar {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.v-text-field input {
|
|
padding: 12px !important;
|
|
font-size: 1rem;
|
|
}
|
|
.v-btn {
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
|
|
.login {
|
|
height: calc(100% - 64px);
|
|
position: relative;
|
|
&-inner {
|
|
width: 480px;
|
|
padding: 30px 40px 50px;
|
|
border-radius: 20px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
&-logo {
|
|
margin-bottom: 28px;
|
|
text-align: center;
|
|
}
|
|
&-img {
|
|
// width: 100px;
|
|
// height: 100px;
|
|
// border-radius: 50%;
|
|
margin-bottom: 30px;
|
|
text-align: center;
|
|
// img {
|
|
// width: 110px;
|
|
// height: 70px;
|
|
// }
|
|
}
|
|
&-form {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.v-input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
@each $theme in dark, light {
|
|
@include theme($theme);
|
|
.v-application.#{$theme}-mode {
|
|
.login {
|
|
@if $theme == dark {
|
|
background-color: #1d2133;
|
|
} @else {
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
.login-inner {
|
|
@if $theme == dark {
|
|
background-color: rgba(113, 120, 152, 0.3);
|
|
} @else {
|
|
background-color: rgba(204, 204, 204, 0.35);
|
|
}
|
|
}
|
|
.v-btn {
|
|
@if $theme == dark {
|
|
background-color: #18579e;
|
|
} @else {
|
|
background-color: #3f4d7d;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|