sk_fems_ui commit
This commit is contained in:
unknown
266
pages/login/index.vue
Normal file
266
pages/login/index.vue
Normal file
@ -0,0 +1,266 @@
|
||||
<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: 'test',
|
||||
userPw: '1234',
|
||||
userComId: 'SKCC',
|
||||
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,
|
||||
};
|
||||
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>
|
||||
Reference in New Issue
Block a user