Skip to content

Commit 032c714

Browse files
cuongdevjscuongdevjs
committedAug 14, 2019
#update:
_feature login _module store vuex _router redirect _mixins file _move scss to file _register module vuex in app-main
1 parent 0fe33d8 commit 032c714

File tree

15 files changed

+344
-274
lines changed

15 files changed

+344
-274
lines changed
 

‎src/App-main.vue

+17-1
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,24 @@
44

55
<script lang="ts">
66
import { Component, Vue } from "vue-property-decorator";
7+
import { LoginModule } from "./store/modules/login";
8+
import { generalInfo } from "./store/modules/generalApp";
9+
import { DrawingModule } from "./store/modules/userDrawing";
710
@Component
8-
export default class AppMain extends Vue {}
11+
export default class AppMain extends Vue {
12+
// declare module
13+
public get isLogged() {
14+
return LoginModule.isLogged;
15+
}
16+
17+
public get listNodes() {
18+
return DrawingModule.listNodes;
19+
}
20+
21+
public get isCollapseMenu() {
22+
return generalInfo.isCollapse;
23+
}
24+
}
925
</script>
1026

1127
<style scoped></style>

‎src/assets/style/general/_general.scss

+81-81
Original file line numberDiff line numberDiff line change
@@ -78,105 +78,105 @@
7878
width: 100%;
7979
height: calc(100vh - 48px);
8080
position: relative;
81-
}
8281

83-
.pPopupDetail {
84-
position: absolute;
85-
top: 0;
86-
left: 0;
87-
padding: 0;
88-
max-width: 240px;
89-
@include size(100%, 100%);
90-
background-color: var(--color-light-2);
91-
border-left: 1px solid hsla(240, 1%, 85%, 0.5);
92-
box-shadow: 12px 0 24px rgba(0, 0, 0, 0.1);
93-
z-index: 10;
94-
95-
&-title {
96-
margin: 4px 0 0;
97-
}
82+
.pPopupDetail {
83+
position: absolute;
84+
top: 0;
85+
left: 0;
86+
padding: 0;
87+
max-width: 240px;
88+
@include size(100%, 100%);
89+
background-color: var(--color-light-2);
90+
border-left: 1px solid hsla(240, 1%, 85%, 0.5);
91+
box-shadow: 12px 0 24px rgba(0, 0, 0, 0.1);
92+
z-index: 10;
93+
94+
&-title {
95+
margin: 4px 0 0;
96+
}
9897

99-
&-header {
100-
position: relative;
101-
}
98+
&-header {
99+
position: relative;
100+
}
102101

103-
&-iClose {
104-
color: var(--color-dark);
105-
background: var(--color-light);
106-
@include size(24px, 24px);
107-
border-radius: 8px;
108-
transition: all 0.15s ease-out;
102+
&-iClose {
103+
color: var(--color-dark);
104+
background: var(--color-light);
105+
@include size(24px, 24px);
106+
border-radius: 8px;
107+
transition: all 0.15s ease-out;
109108

110-
&:hover {
111-
color: var(--color-red);
112-
background: white;
109+
&:hover {
110+
color: var(--color-red);
111+
background: white;
112+
}
113113
}
114-
}
115114

116-
.form {
117-
height: calc(100% - 98px);
118-
border-bottom: 1px solid var(--color-light);
119-
padding: 0 8px 8px;
115+
.form {
116+
height: calc(100% - 98px);
117+
border-bottom: 1px solid var(--color-light);
118+
padding: 0 8px 8px;
120119

121-
.el-form-item {
122-
margin-bottom: 0;
120+
.el-form-item {
121+
margin-bottom: 0;
122+
}
123123
}
124-
}
125124

126-
.header {
127-
margin: 12px 8px;
128-
color: var(--color-dark);
129-
@extend .flex-row__between;
130-
}
125+
.header {
126+
margin: 12px 8px;
127+
color: var(--color-dark);
128+
@extend .flex-row__between;
129+
}
131130

132-
.el-form-item__content {
133-
line-height: initial;
134-
border-bottom: 1px solid var(--color-light);
135-
padding: 4px 0 12px;
131+
.el-form-item__content {
132+
line-height: initial;
133+
border-bottom: 1px solid var(--color-light);
134+
padding: 4px 0 12px;
136135

137-
.label {
138-
width: 100%;
139-
font-size: 13px;
140-
margin-bottom: 4px;
141-
display: block;
142-
}
136+
.label {
137+
width: 100%;
138+
font-size: 13px;
139+
margin-bottom: 4px;
140+
display: block;
141+
}
143142

144-
.el-input__inner {
145-
border-radius: 4px;
146-
height: 32px;
147-
line-height: 32px;
148-
padding: 0 8px;
143+
.el-input__inner {
144+
border-radius: 4px;
145+
height: 32px;
146+
line-height: 32px;
147+
padding: 0 8px;
149148

150-
&:focus {
151-
background: white !important;
152-
border-color: transparent !important;
153-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
149+
&:focus {
150+
background: white !important;
151+
border-color: transparent !important;
152+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
153+
}
154154
}
155155
}
156-
}
157156

158-
.actions {
159-
padding: 8px;
160-
background-color: white;
161-
@extend .flex-row__between;
162-
163-
button {
164-
height: 32px;
165-
display: flex;
166-
align-items: center;
167-
padding: 0 20px;
168-
border: none;
169-
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
170-
}
157+
.actions {
158+
padding: 8px;
159+
background-color: white;
160+
@extend .flex-row__between;
161+
162+
button {
163+
height: 32px;
164+
display: flex;
165+
align-items: center;
166+
padding: 0 20px;
167+
border: none;
168+
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
169+
}
171170

172-
.btnSave {
173-
background: var(--color-blue);
174-
}
171+
.btnSave {
172+
background: var(--color-blue);
173+
}
175174

176-
.btnDelete {
177-
background: rgba(229, 77, 66, 0.2);
178-
color: var(--color-red);
179-
box-shadow: none;
175+
.btnDelete {
176+
background: rgba(229, 77, 66, 0.2);
177+
color: var(--color-red);
178+
box-shadow: none;
179+
}
180180
}
181181
}
182182
}

‎src/assets/style/index.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
@import "./mixins/variable";
2-
@import "./mixins/_mixin";
2+
@import "./mixins/mixin";
33
@import "./mixins/animation";
44

55
@import "./general/base";
66
@import "./general/layout";
77
@import "./general/general";
8+
9+
@import "./page/login";

‎src/assets/style/page/_login.scss

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
.pLogin {
2+
height: 100vh;
3+
width: 100%;
4+
background: #20a8d8 !important;
5+
font-family: "Nunito", sans-serif;
6+
7+
.pHeader {
8+
font-size: 55px;
9+
font-family: "Nunito", sans-serif;
10+
font-weight: 700;
11+
}
12+
13+
&-scroll {
14+
width: 100%;
15+
height: calc(100% - 20px);
16+
padding: 50px 38px 125px 38px;
17+
display: flex;
18+
flex-direction: column;
19+
justify-content: center;
20+
align-items: center;
21+
}
22+
23+
.leftSection {
24+
color: #ffffff;
25+
26+
.logo-lv1 {
27+
width: 200px;
28+
}
29+
30+
.tt-2 {
31+
font-size: 20px;
32+
opacity: 0.8;
33+
width: 80%;
34+
}
35+
}
36+
37+
.rightSection {
38+
max-width: 500px;
39+
width: 40%;
40+
height: 100%;
41+
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
42+
0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
43+
background-color: #fff;
44+
min-width: 350px;
45+
position: relative;
46+
overflow: hidden;
47+
-webkit-overflow-scrolling: touch;
48+
border-radius: 8px 0 0px 8px;
49+
50+
.logo-lv2 {
51+
width: 150px;
52+
margin-top: -25px;
53+
}
54+
55+
.title {
56+
font-size: 18px;
57+
text-align: center;
58+
margin: 20px 0 10px 0;
59+
margin-top: -15px;
60+
}
61+
62+
.btnSubmit {
63+
width: 100%;
64+
background-color: #039be5;
65+
}
66+
}
67+
}

‎src/config/auth.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
export default {
22
saveToken(token: string) {
3-
return localStorage.setItem("bus_token", token);
3+
return localStorage.setItem("aquaDraw_token", token);
44
},
55

66
removeToken() {
7-
return localStorage.removeItem("bus_token");
7+
return localStorage.removeItem("aquaDraw_token");
88
},
99

1010
checkIsAuthenticated: function() {
11-
let tokenDataStr = localStorage.getItem("bus_token");
11+
let tokenDataStr = localStorage.getItem("aquaDraw_token");
1212
return Promise.resolve(tokenDataStr);
1313
},
1414

1515
getToken() {
16-
let tokenStr = localStorage.getItem("bus_token");
16+
let tokenStr = localStorage.getItem("aquaDraw_token");
1717
return tokenStr || null;
1818
},
1919

‎src/config/axios.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ axios.interceptors.request.use(
1919
: store.dispatch("LOGOUT");
2020
});
2121
// config progressbar start
22-
temp === 0 && new Vue().$Progress.start();
22+
temp === 0 && app.$Progress.start();
2323
temp++;
2424
// config data not auto convert to json data that convert to type object[key]=value
2525
config.paramsSerializer = (params: any) => {
@@ -39,13 +39,13 @@ axios.interceptors.response.use(
3939
(response: any) => {
4040
// config progressbar finish
4141
temp--;
42-
temp === 0 && new Vue().$Progress.finish();
42+
temp === 0 && app.$Progress.finish();
4343

4444
return response.data;
4545
},
4646
(error: any) => {
4747
temp--;
48-
temp === 0 && new Vue().$Progress.fail();
48+
temp === 0 && app.$Progress.fail();
4949

5050
if (error.response.status === 500) {
5151
new Vue().$messageError("Server errors! Try again!");

‎src/mixin/mixins.ts

+27-25
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Vue, Component } from "vue-property-decorator";
2+
import { objInstance } from "../store/types/index";
23
import {
34
checkNotSpecialCharacter,
45
allowOnlyTypeNumber,
@@ -79,42 +80,43 @@ export default class Mixin extends Vue {
7980
}
8081

8182
public $messageSuccess(message: string) {
82-
this.$message.success(message);
83+
this.$message({
84+
message: message,
85+
type: "success",
86+
showClose: true
87+
});
8388
}
8489

8590
public $messageError(message: string) {
86-
this.$message.error(message);
91+
this.$message({
92+
message: message,
93+
type: "error",
94+
showClose: true
95+
});
8796
}
8897

8998
private hasKey<O>(obj: O, key: string | number | symbol): key is keyof O {
9099
return key in obj;
91100
}
92101

93-
// public $notify(message: string, type: string, content: string) {
94-
// let config: any = {
95-
// message: message,
96-
// description: content,
97-
// duration: 3.5
98-
// };
99-
// if (this.hasKey(this.$notification, type)) {
100-
// this.$notification[type](config);
101-
// }
102-
// }
102+
public $notification(message: string, type: string, content: string) {
103+
let config: any = {
104+
title: message,
105+
message: content,
106+
type: type
107+
};
108+
this.$notify(config);
109+
}
103110

104111
public $confirmPopup(title: string, content: string, callback?: any) {
105-
let config: any = {
106-
title: title,
107-
content: content,
108-
okText: "Submit",
109-
okType: "danger",
110-
cancelText: "Cancel",
111-
onOk() {
112+
this.$confirm(content, title, {
113+
confirmButtonText: "Xác nhận",
114+
cancelButtonText: "Huỷ bỏ",
115+
type: "warning"
116+
})
117+
.then(() => {
112118
callback();
113-
},
114-
onCancel() {
115-
() => {};
116-
}
117-
};
118-
this.$confirm(config);
119+
})
120+
.catch(() => {});
119121
}
120122
}

‎src/mixins.d.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@ declare module "vue/types/vue" {
77
widthClient: number;
88
heightClient: number;
99
validationRules: object;
10+
1011
getNumberRandom(min: number, max: number): number;
1112
getRandomColor(): void;
1213
$messageSuccess(message: string): void;
1314
$messageError(message: string): void;
14-
// $notify(message: string, type: string, content: string): void;
15+
$notification(message: string, type: string, content: string): void;
1516
$confirmPopup(title: string, content: string, callback?: any): void;
1617

1718
$post(key: string, params?: any): any;

‎src/router/index.ts

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Vue from "vue";
22
import Router from "vue-router";
33
import { concat } from "lodash";
4+
import auth from "@/config/auth";
45
Vue.use(Router);
56

67
const routerInstance: any = new Router({
@@ -13,8 +14,7 @@ const routerInstance: any = new Router({
1314
children: concat([
1415
{
1516
path: "home",
16-
component: () =>
17-
import(/* webpackChunkName: "home" */ "@/views/home/index.vue"),
17+
component: () => import("../views/home/index.vue"),
1818
name: "home"
1919
},
2020
{
@@ -35,7 +35,7 @@ const routerInstance: any = new Router({
3535
],
3636
[
3737
{
38-
path: "/*",
38+
path: "*",
3939
redirect: {
4040
name: "home"
4141
}
@@ -44,14 +44,14 @@ const routerInstance: any = new Router({
4444
)
4545
});
4646

47-
// routerInstance.beforeEach((to: any, from: any, next: any) => {
48-
// auth.checkIsAuthenticated().then((valid: any) => {
49-
// if (valid) {
50-
// to.name === "login" ? next({ name: "home" }) : next();
51-
// } else {
52-
// to.name !== "login" ? next({ name: "login" }) : next();
53-
// }
54-
// });
55-
// });
47+
routerInstance.beforeEach((to: any, from: any, next: any) => {
48+
auth.checkIsAuthenticated().then((valid: any) => {
49+
if (valid) {
50+
to.name === "login" ? next({ name: "home" }) : next();
51+
} else {
52+
to.name !== "login" ? next({ name: "login" }) : next();
53+
}
54+
});
55+
});
5656

5757
export default routerInstance;

‎src/store/modules/generalApp.ts

-15
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,16 @@ import {
77
} from "vuex-module-decorators";
88
import { Vue } from "vue-property-decorator";
99
import store from "@/store";
10-
import auth from "@/config/auth";
11-
import router from "@/router";
12-
import { objInstance } from "../types";
1310

1411
export interface IGeneralApp {
1512
flagLoading: number;
1613
isCollapse: boolean;
17-
infoUser: object;
1814
}
1915

2016
@Module({ dynamic: true, store, name: "generalInfo" })
2117
class General extends VuexModule implements IGeneralApp {
2218
public flagLoading: number = 0;
2319
public isCollapse: boolean = false;
24-
public infoUser: object = {};
2520
public vm: Vue = new Vue();
2621

2722
@Mutation
@@ -39,11 +34,6 @@ class General extends VuexModule implements IGeneralApp {
3934
this.isCollapse = !this.isCollapse;
4035
}
4136

42-
@Mutation
43-
private setInfoUser(payload: objInstance) {
44-
this.infoUser = payload;
45-
}
46-
4737
@Action
4838
public SET_START_LOADING() {
4939
this.context.commit("startLoading");
@@ -58,11 +48,6 @@ class General extends VuexModule implements IGeneralApp {
5848
public SET_COLLAPSE() {
5949
this.context.commit("setCollapse");
6050
}
61-
62-
@Action
63-
public SET_INFO_USER(payload: objInstance) {
64-
this.context.commit("setInfoUser", payload);
65-
}
6651
}
6752

6853
export const generalInfo = getModule(General);

‎src/store/modules/login.ts

+53-28
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,88 @@
1-
import { VuexModule, Module, Mutation, Action, getModule } from "vuex-module-decorators";
2-
import {Vue} from 'vue-property-decorator';
3-
import store from '@/store';
4-
import { objInstance } from '../types/index';
5-
import auth from '@/config/auth';
6-
import router from '@/router';
7-
1+
import {
2+
VuexModule,
3+
Module,
4+
Mutation,
5+
Action,
6+
getModule
7+
} from "vuex-module-decorators";
8+
import { Vue } from "vue-property-decorator";
9+
import store from "@/store";
10+
import { objInstance } from "../types/index";
11+
import auth from "@/config/auth";
12+
import router from "@/router";
813

914
export interface ILogin {
10-
isLogged: boolean
15+
isLogged: boolean;
16+
infoUser: object;
1117
}
1218

13-
14-
@Module({dynamic: true, store, name: "login"});
19+
@Module({ dynamic: true, store, name: "login" })
1520
class Login extends VuexModule implements ILogin {
1621
public isLogged: boolean = false;
22+
public infoUser: object = {};
23+
1724
public vm = new Vue();
1825

1926
@Mutation
20-
setLogged(payload: boolean) {
27+
private setLogged(payload: boolean) {
2128
this.isLogged = payload;
2229
}
2330

2431
@Mutation
25-
logout() {
32+
private logout() {
2633
auth.removeToken();
27-
router.push({name: "login"})
34+
router.push({ name: "login" });
35+
}
36+
37+
@Mutation
38+
private setInfoUser(payload: objInstance) {
39+
this.infoUser = payload;
2840
}
2941

3042
@Action
31-
SET_LOGGED(payload: boolean) {
32-
this.context.commit("setLogged", payload)
43+
public SET_LOGGED(payload: boolean) {
44+
this.context.commit("setLogged", payload);
3345
}
3446

35-
@Action({rawError: true})
36-
LOGIN(payload: objInstance) {
47+
@Action({ rawError: true })
48+
public LOGIN(payload: objInstance) {
3749
return this.vm.$post("Account/Login", JSON.stringify(payload));
3850
}
3951

52+
@Action({ rawError: true })
53+
public CHANGE_PW(payload: objInstance) {
54+
return this.vm.$post("Account/UserChangePassword", JSON.stringify(payload));
55+
}
4056

41-
@Action({rawError: true})
42-
CHANGE_PW(payload: objInstance) {
43-
return this.vm.$post('Account/UserChangePassword', JSON.stringify(payload));
57+
@Action({ rawError: true })
58+
public CREATE_USER(payload: objInstance) {
59+
return this.vm.$post("Account/CreateUser", JSON.stringify(payload));
4460
}
4561

46-
@Action({rawError: true})
47-
CREATE_USER(payload: objInstance) {
48-
return this.vm.$post('Account/CreateUser', JSON.stringify(payload));
62+
@Action({ rawError: true })
63+
public REMOVE_USER(payload: objInstance) {
64+
return this.vm.$post("Account/RemoveUser", JSON.stringify(payload));
4965
}
5066

51-
@Action({rawError: true})
52-
REMOVE_USER(payload: objInstance) {
53-
return this.vm.$post('Account/RemoveUser', JSON.stringify(payload));
67+
@Action({ rawError: true })
68+
public VIEW_ALL_ACCOUNT_ADMIN(payload: objInstance) {
69+
return this.vm.$post(
70+
"Account/ViewAll",
71+
JSON.stringify({
72+
tokenkey: auth.getToken()
73+
})
74+
);
5475
}
5576

5677
@Action
57-
LOGOUT() {
78+
public LOGOUT() {
5879
this.context.commit("logout");
5980
}
60-
}
6181

82+
@Action
83+
public SET_INFO_USER(payload: objInstance) {
84+
this.context.commit("setInfoUser", payload);
85+
}
86+
}
6287

6388
export const LoginModule = getModule(Login);

‎src/store/modules/userDrawing.ts

+37-22
Original file line numberDiff line numberDiff line change
@@ -6,84 +6,99 @@ import {
66
Mutation
77
} from "vuex-module-decorators";
88
import { Vue } from "vue-property-decorator";
9-
import store from '@/store';
10-
import { objInstance } from '../types';
9+
import store from "@/store";
10+
import { objInstance } from "../types";
1111

1212
export interface IDrawing {
1313
listNodes: Array<objInstance>;
1414
listLines: Array<objInstance>;
15+
isShowPopupDetail: boolean;
1516
}
1617

17-
@Module({dynamic: true, store, name: 'Drawing'});
18+
@Module({ dynamic: true, store, name: "Drawing" })
1819
class Drawing extends VuexModule implements IDrawing {
1920
public listNodes: Array<objInstance> = [];
2021
public listLines: Array<objInstance> = [];
22+
public isShowPopupDetail: boolean = false;
2123
public vm = new Vue();
2224

2325
@Mutation
24-
setListNodes(payload: Array<objInstance>) {
26+
private setListNodes(payload: Array<objInstance>) {
2527
this.listNodes = payload;
2628
}
2729

2830
@Mutation
29-
setListLines(payload: Array<objInstance>) {
31+
private setListLines(payload: Array<objInstance>) {
3032
this.listLines = payload;
3133
}
3234

33-
@Action({rawError: true})
35+
@Mutation
36+
private setIsShowPopupDetail(payload: boolean) {
37+
this.isShowPopupDetail = payload;
38+
}
39+
40+
@Action({ rawError: true })
3441
GET_LIST_NODES(payload: objInstance) {
35-
this.vm.$post("Draw/ViewAllNode", JSON.stringify(payload)).then((res: any) => {
36-
this.context.commit("setListNodes", res);
37-
})
42+
this.vm
43+
.$post("Draw/ViewAllNode", JSON.stringify(payload))
44+
.then((res: any) => {
45+
this.context.commit("setListNodes", res);
46+
});
3847
}
3948

40-
@Action({rawError: true})
49+
@Action({ rawError: true })
4150
ADD_NODE(payload: objInstance) {
4251
return this.vm.$post("Draw/AddNode", JSON.stringify(payload));
4352
}
4453

45-
@Action({rawError: true})
54+
@Action({ rawError: true })
4655
REMOVE_NODE(payload: objInstance) {
4756
return this.vm.$post("Draw/RemoveNode", JSON.stringify(payload));
4857
}
4958

50-
@Action({rawError: true})
59+
@Action({ rawError: true })
5160
DETAIL_NODE(payload: objInstance) {
5261
return this.vm.$post("Draw/ViewNode", JSON.stringify(payload));
5362
}
5463

55-
@Action({rawError: true})
64+
@Action({ rawError: true })
5665
UPDATE_NODE(payload: objInstance) {
5766
return this.vm.$post("Draw/EditNode", JSON.stringify(payload));
5867
}
5968

60-
@Action({rawError: true})
69+
@Action({ rawError: true })
6170
GET_LIST_LINES(payload: objInstance) {
62-
this.vm.$post("Draw/ViewAllLine", JSON.stringify(payload)).then((res: any) => {
63-
this.context.commit("setListLines", res);
64-
})
71+
this.vm
72+
.$post("Draw/ViewAllLine", JSON.stringify(payload))
73+
.then((res: any) => {
74+
this.context.commit("setListLines", res);
75+
});
6576
}
6677

67-
@Action({rawError: true})
78+
@Action({ rawError: true })
6879
ADD_LINE(payload: objInstance) {
6980
return this.vm.$post("Draw/AddLine", JSON.stringify(payload));
7081
}
7182

72-
@Action({rawError: true})
83+
@Action({ rawError: true })
7384
REMOVE_LINE(payload: objInstance) {
7485
return this.vm.$post("Draw/RemoveLine", JSON.stringify(payload));
7586
}
7687

77-
@Action({rawError: true})
88+
@Action({ rawError: true })
7889
DETAIL_LINE(payload: objInstance) {
7990
return this.vm.$post("/Draw/ViewLine", JSON.stringify(payload));
8091
}
8192

82-
@Action({rawError: true})
93+
@Action({ rawError: true })
8394
UPDATE_LINE(payload: objInstance) {
8495
return this.vm.$post("Draw/EditLine", JSON.stringify(payload));
8596
}
86-
}
8797

98+
@Action
99+
SET_IS_SHOW_POPUP_DETAIL(payload: boolean) {
100+
this.context.commit("setIsShowPopupDetail", payload);
101+
}
102+
}
88103

89104
export const DrawingModule = getModule(Drawing);

‎src/store/types/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import Vue from "vue";
12
export interface objInstance {
23
[key: string]: any;
34
}

‎src/views/home/index.vue

-11
Original file line numberDiff line numberDiff line change
@@ -89,17 +89,6 @@ export default class Dashboard extends Vue {
8989
lat: 21.15648895639665,
9090
lng: 105.5981367021484
9191
};
92-
93-
public mounted() {
94-
console.log("akflkasjf");
95-
this.$post(
96-
"Account/Login",
97-
JSON.stringify({
98-
username: "user",
99-
password: "user"
100-
})
101-
).then((res: any) => console.log(res));
102-
}
10392
}
10493
</script>
10594

‎src/views/login/index.vue

+37-70
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
</div>
2222
<div class="rightSection">
2323
<VuePerfectScrollbar
24-
class="scroll-pLogin"
24+
class="pLogin-scroll"
2525
:settings="perfectScrollbarSetting"
2626
>
2727
<img
@@ -77,9 +77,14 @@
7777
</el-input>
7878
</el-form-item>
7979
<el-form-item>
80-
<el-button type="primary" class="btnSubmit margin-top-10"
81-
>Đăng nhập</el-button
80+
<el-button
81+
type="primary"
82+
class="btnSubmit margin-top-10"
83+
:disabled="!isValidForm"
84+
@click="login"
8285
>
86+
Đăng nhập
87+
</el-button>
8388
</el-form-item>
8489
</el-form>
8590
</div>
@@ -90,6 +95,8 @@
9095

9196
<script lang="ts">
9297
import { Component, Vue } from "vue-property-decorator";
98+
import { LoginModule } from "../../store/modules/login";
99+
import auth from "@/config/auth";
93100
94101
@Component({
95102
components: {
@@ -98,84 +105,44 @@ import { Component, Vue } from "vue-property-decorator";
98105
})
99106
export default class element extends Vue {
100107
public isShowPassword: boolean = false;
108+
public isValidForm: boolean = false;
101109
public form: object = {};
102110
public ruleForm: object = {
103111
username: [
104112
{
105113
required: true,
106114
message: "Trường này là bắt buộc",
107-
trigger: "blur"
115+
trigger: ["blur", "change"]
108116
}
109117
]
110118
};
111-
}
112-
</script>
113-
<style lang="scss" scoped>
114-
.pLogin {
115-
height: 100vh;
116-
width: 100%;
117-
background: #20a8d8 !important;
118-
font-family: "Nunito", sans-serif;
119-
}
120-
121-
.pLogin .pHeader {
122-
font-size: 55px;
123-
font-family: "Nunito", sans-serif;
124-
font-weight: 700;
125-
}
126-
127-
.tt-2 {
128-
font-size: 20px;
129-
opacity: 0.8;
130-
width: 80%;
131-
}
132-
133-
.leftSection {
134-
color: #ffffff;
135-
}
136-
137-
.logo-lv1 {
138-
width: 200px;
139-
}
140119
141-
.logo-lv2 {
142-
width: 150px;
143-
margin-top: -25px;
144-
}
145-
146-
.rightSection {
147-
max-width: 500px;
148-
width: 40%;
149-
height: 100%;
150-
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
151-
0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
152-
background-color: #fff;
153-
min-width: 350px;
154-
position: relative;
155-
overflow: hidden;
156-
-webkit-overflow-scrolling: touch;
157-
border-radius: 8px 0 0px 8px;
158-
}
120+
public checkValidationForms(formName: string) {
121+
(this.$refs.form as any).validate((valid: boolean) => {
122+
this.isValidForm = valid;
123+
});
124+
}
159125
160-
.scroll-pLogin {
161-
width: 100%;
162-
height: calc(100% - 20px);
163-
padding: 50px 38px 125px 38px;
164-
display: flex;
165-
flex-direction: column;
166-
justify-content: center;
167-
align-items: center;
168-
}
126+
public saveToLocalStorage(res: any) {
127+
auth.saveToken(res.tokenkey);
128+
auth.set("aquaDraw_username", res.username);
129+
auth.set("aquaDraw_info", res.info);
130+
}
169131
170-
.title {
171-
font-size: 18px;
172-
text-align: center;
173-
margin: 20px 0 10px 0;
174-
margin-top: -15px;
175-
}
132+
public redirectToHome() {
133+
this.$messageSuccess("Đăng nhập thành công!");
134+
this.$router.push({ name: "home" });
135+
}
176136
177-
.btnSubmit {
178-
width: 100%;
179-
background-color: #039be5;
137+
public login() {
138+
this.$store.dispatch("LOGIN", this.form).then((res: any) => {
139+
if (res.hasOwnProperty("tokenkey")) {
140+
this.saveToLocalStorage(res);
141+
LoginModule.SET_INFO_USER(res);
142+
this.redirectToHome();
143+
}
144+
});
145+
}
180146
}
181-
</style>
147+
</script>
148+
<style lang="scss" scoped></style>

0 commit comments

Comments
 (0)
Please sign in to comment.