Fedex / iClear-Connect-Pre-Clearance

Go to a project
Toggle navigation Toggle navigation pinning
jinhui.wang
fa61e853 1 parent 481b22de

文本修改，样式修改

Inline Side-by-side
Showing 7 changed files with 884 additions and 442 deletions
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 - <head> 3 +
4 - <meta charset="utf-8" /> 4 +<head>
5 - <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 5 + <meta charset="utf-8" />
6 - <meta name="renderer" content="webkit" /> 6 + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7 - <meta 7 + <meta name="renderer" content="webkit" />
8 - name="viewport" 8 + <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
9 - content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" 9 + <meta http-equiv="Content-Security-Policy" content="
10 - />
11 - <meta http-equiv="Content-Security-Policy" content="
12 worker-src blob:; 10 worker-src blob:;
13 child-src blob: gap:; 11 child-src blob: gap:;
14 img-src 'self' blob: data:; 12 img-src 'self' blob: data:;
15 default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:"> 13 default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
16 - 14 +
17 - 15 +
18 - <link rel="icon" href="<%= BASE_URL %>favicon.ico" /> 16 + <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
19 - <title><%= webpackConfig.name %></title> 17 + <title>
20 - <!--[if lt IE 11 18 + <%= webpackConfig.name %>
19 + </title>
20 + <!--[if lt IE 11
21 ]><script> 21 ]><script>
22 window.location.href = "/html/ie.html"; 22 window.location.href = "/html/ie.html";
23 </script><! 23 </script><!
24 [endif]--> 24 [endif]-->
25 - <style> 25 + <style>
26 - html, 26 + html,
27 - body, 27 + body,
28 - #app { 28 + #app {
29 - height: 100%; 29 + height: 100%;
30 - margin: 0px; 30 + margin: 0px;
31 - padding: 0px; 31 + padding: 0px;
32 - } 32 + }
33 - .chromeframe { 33 +
34 - margin: 0.2em 0; 34 + .chromeframe {
35 - background: #ccc; 35 + margin: 0.2em 0;
36 - color: #000; 36 + background: #ccc;
37 - padding: 0.2em 0; 37 + color: #000;
38 - } 38 + padding: 0.2em 0;
39 - 39 + }
40 - #loader-wrapper { 40 +
41 - position: fixed; 41 + #loader-wrapper {
42 - top: 0; 42 + position: fixed;
43 - left: 0; 43 + top: 0;
44 - width: 100%; 44 + left: 0;
45 - height: 100%; 45 + width: 100%;
46 - z-index: 999999; 46 + height: 100%;
47 - } 47 + z-index: 999999;
48 - 48 + }
49 - #loader { 49 +
50 - display: block; 50 + #loader {
51 - position: relative; 51 + display: block;
52 - left: 50%; 52 + position: relative;
53 - top: 50%; 53 + left: 50%;
54 - width: 150px; 54 + top: 50%;
55 - height: 150px; 55 + width: 150px;
56 - margin: -75px 0 0 -75px; 56 + height: 150px;
57 - border-radius: 50%; 57 + margin: -75px 0 0 -75px;
58 - border: 3px solid transparent; 58 + border-radius: 50%;
59 - border-top-color: #fff; 59 + border: 3px solid transparent;
60 - -webkit-animation: spin 2s linear infinite; 60 + border-top-color: #fff;
61 - -ms-animation: spin 2s linear infinite; 61 + -webkit-animation: spin 2s linear infinite;
62 - -moz-animation: spin 2s linear infinite; 62 + -ms-animation: spin 2s linear infinite;
63 - -o-animation: spin 2s linear infinite; 63 + -moz-animation: spin 2s linear infinite;
64 - animation: spin 2s linear infinite; 64 + -o-animation: spin 2s linear infinite;
65 - z-index: 1001; 65 + animation: spin 2s linear infinite;
66 - } 66 + z-index: 1001;
67 - 67 + }
68 - #loader:before { 68 +
69 - content: ""; 69 + #loader:before {
70 - position: absolute; 70 + content: "";
71 - top: 5px; 71 + position: absolute;
72 - left: 5px; 72 + top: 5px;
73 - right: 5px; 73 + left: 5px;
74 - bottom: 5px; 74 + right: 5px;
75 - border-radius: 50%; 75 + bottom: 5px;
76 - border: 3px solid transparent; 76 + border-radius: 50%;
77 - border-top-color: #fff; 77 + border: 3px solid transparent;
78 - -webkit-animation: spin 3s linear infinite; 78 + border-top-color: #fff;
79 - -moz-animation: spin 3s linear infinite; 79 + -webkit-animation: spin 3s linear infinite;
80 - -o-animation: spin 3s linear infinite; 80 + -moz-animation: spin 3s linear infinite;
81 - -ms-animation: spin 3s linear infinite; 81 + -o-animation: spin 3s linear infinite;
82 - animation: spin 3s linear infinite; 82 + -ms-animation: spin 3s linear infinite;
83 - } 83 + animation: spin 3s linear infinite;
84 - 84 + }
85 - #loader:after { 85 +
86 - content: ""; 86 + #loader:after {
87 - position: absolute; 87 + content: "";
88 - top: 15px; 88 + position: absolute;
89 - left: 15px; 89 + top: 15px;
90 - right: 15px; 90 + left: 15px;
91 - bottom: 15px; 91 + right: 15px;
92 - border-radius: 50%; 92 + bottom: 15px;
93 - border: 3px solid transparent; 93 + border-radius: 50%;
94 - border-top-color: #fff; 94 + border: 3px solid transparent;
95 - -moz-animation: spin 1.5s linear infinite; 95 + border-top-color: #fff;
96 - -o-animation: spin 1.5s linear infinite; 96 + -moz-animation: spin 1.5s linear infinite;
97 - -ms-animation: spin 1.5s linear infinite; 97 + -o-animation: spin 1.5s linear infinite;
98 - -webkit-animation: spin 1.5s linear infinite; 98 + -ms-animation: spin 1.5s linear infinite;
99 - animation: spin 1.5s linear infinite; 99 + -webkit-animation: spin 1.5s linear infinite;
100 - } 100 + animation: spin 1.5s linear infinite;
101 - 101 + }
102 - @-webkit-keyframes spin { 102 +
103 - 0% { 103 + @-webkit-keyframes spin {
104 - -webkit-transform: rotate(0deg); 104 + 0% {
105 - -ms-transform: rotate(0deg); 105 + -webkit-transform: rotate(0deg);
106 - transform: rotate(0deg); 106 + -ms-transform: rotate(0deg);
107 - } 107 + transform: rotate(0deg);
108 - 100% { 108 + }
109 - -webkit-transform: rotate(360deg); 109 +
110 - -ms-transform: rotate(360deg); 110 + 100% {
111 - transform: rotate(360deg); 111 + -webkit-transform: rotate(360deg);
112 - } 112 + -ms-transform: rotate(360deg);
113 - } 113 + transform: rotate(360deg);
114 - 114 + }
115 - @keyframes spin { 115 + }
116 - 0% { 116 +
117 - -webkit-transform: rotate(0deg); 117 + @keyframes spin {
118 - -ms-transform: rotate(0deg); 118 + 0% {
119 - transform: rotate(0deg); 119 + -webkit-transform: rotate(0deg);
120 - } 120 + -ms-transform: rotate(0deg);
121 - 100% { 121 + transform: rotate(0deg);
122 - -webkit-transform: rotate(360deg); 122 + }
123 - -ms-transform: rotate(360deg); 123 +
124 - transform: rotate(360deg); 124 + 100% {
125 - } 125 + -webkit-transform: rotate(360deg);
126 - } 126 + -ms-transform: rotate(360deg);
127 - 127 + transform: rotate(360deg);
128 - #loader-wrapper .loader-section { 128 + }
129 - position: fixed; 129 + }
130 - top: 0; 130 +
131 - width: 51%; 131 + #loader-wrapper .loader-section {
132 - height: 100%; 132 + position: fixed;
133 - background: #4d148c; 133 + top: 0;
134 - z-index: 1000; 134 + width: 51%;
135 - -webkit-transform: translateX(0); 135 + height: 100%;
136 - -ms-transform: translateX(0); 136 + background: #4d148c;
137 - transform: translateX(0); 137 + z-index: 1000;
138 - } 138 + -webkit-transform: translateX(0);
139 - 139 + -ms-transform: translateX(0);
140 - #loader-wrapper .loader-section.section-left { 140 + transform: translateX(0);
141 - left: 0; 141 + }
142 - } 142 +
143 - 143 + #loader-wrapper .loader-section.section-left {
144 - #loader-wrapper .loader-section.section-right { 144 + left: 0;
145 - right: 0; 145 + }
146 - } 146 +
147 - 147 + #loader-wrapper .loader-section.section-right {
148 - .loaded #loader-wrapper .loader-section.section-left { 148 + right: 0;
149 - -webkit-transform: translateX(-100%); 149 + }
150 - -ms-transform: translateX(-100%); 150 +
151 - transform: translateX(-100%); 151 + .loaded #loader-wrapper .loader-section.section-left {
152 - -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 152 + -webkit-transform: translateX(-100%);
153 - transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 153 + -ms-transform: translateX(-100%);
154 - } 154 + transform: translateX(-100%);
155 - 155 + -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
156 - .loaded #loader-wrapper .loader-section.section-right { 156 + transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
157 - -webkit-transform: translateX(100%); 157 + }
158 - -ms-transform: translateX(100%); 158 +
159 - transform: translateX(100%); 159 + .loaded #loader-wrapper .loader-section.section-right {
160 - -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 160 + -webkit-transform: translateX(100%);
161 - transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 161 + -ms-transform: translateX(100%);
162 - } 162 + transform: translateX(100%);
163 - 163 + -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
164 - .loaded #loader { 164 + transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
165 - opacity: 0; 165 + }
166 - -webkit-transition: all 0.3s ease-out; 166 +
167 - transition: all 0.3s ease-out; 167 + .loaded #loader {
168 - } 168 + opacity: 0;
169 - 169 + -webkit-transition: all 0.3s ease-out;
170 - .loaded #loader-wrapper { 170 + transition: all 0.3s ease-out;
171 - visibility: hidden; 171 + }
172 - -webkit-transform: translateY(-100%); 172 +
173 - -ms-transform: translateY(-100%); 173 + .loaded #loader-wrapper {
174 - transform: translateY(-100%); 174 + visibility: hidden;
175 - -webkit-transition: all 0.3s 1s ease-out; 175 + -webkit-transform: translateY(-100%);
176 - transition: all 0.3s 1s ease-out; 176 + -ms-transform: translateY(-100%);
177 - } 177 + transform: translateY(-100%);
178 - 178 + -webkit-transition: all 0.3s 1s ease-out;
179 - .no-js #loader-wrapper { 179 + transition: all 0.3s 1s ease-out;
180 - display: none; 180 + }
181 - } 181 +
182 - 182 + .no-js #loader-wrapper {
183 - .no-js h1 { 183 + display: none;
184 - color: #222222; 184 + }
185 - } 185 +
186 - 186 + .no-js h1 {
187 - #loader-wrapper .load_title { 187 + color: #222222;
188 - font-family: "Open Sans"; 188 + }
189 - color: #fff; 189 +
190 - font-size: 19px; 190 + #loader-wrapper .load_title {
191 - width: 100%; 191 + font-family: "Open Sans";
192 - text-align: center; 192 + color: #fff;
193 - z-index: 9999999999999; 193 + font-size: 19px;
194 - position: absolute; 194 + width: 100%;
195 - top: 60%; 195 + text-align: center;
196 - opacity: 1; 196 + z-index: 9999999999999;
197 - line-height: 30px; 197 + position: absolute;
198 - } 198 + top: 60%;
199 - 199 + opacity: 1;
200 - #loader-wrapper .load_title span { 200 + line-height: 30px;
201 - font-weight: normal; 201 + }
202 - font-style: italic; 202 +
203 - font-size: 13px; 203 + #loader-wrapper .load_title span {
204 - color: #fff; 204 + font-weight: normal;
205 - opacity: 0.5; 205 + font-style: italic;
206 - } 206 + font-size: 13px;
207 - </style> 207 + color: #fff;
208 - </head> 208 + opacity: 0.5;
209 - <body> 209 + }
210 - <div id="app"> 210 + </style>
211 - <div id="loader-wrapper"> 211 +</head>
212 - <div id="loader"></div> 212 +
213 - <div class="loader-section section-left"></div> 213 +<body>
214 - <div class="loader-section section-right"></div> 214 + <div id="app">
215 - <div class="load_title">正在加載系統資源，請耐心等待</div> 215 + <div id="loader-wrapper">
216 - </div> 216 + <div id="loader"></div>
217 + <div class="loader-section section-left"></div>
218 + <div class="loader-section section-right"></div>
219 + <div class="load_title">Loading system resources, please be patient</div>
217 </div> 220 </div>
218 - </body> 221 + </div>
219 -</html> 222 +</body>
223 +
224 +</html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -1106,4 +1106,59 @@ input:disabled { ...@@ -1106,4 +1106,59 @@ input:disabled {
1106 1106
1107 .questionIcon { 1107 .questionIcon {
1108 color: $fedexColor; 1108 color: $fedexColor;
1109 +}
1110 +
1111 +.uploadHistoryDialog {
1112 + .el-dialog__header {
1113 + .el-dialog__title {
1114 + font-size: 18px;
1115 + }
1116 + }
1117 +
1118 + .el-dialog__body {
1119 + padding: 10px 50px !important;
1120 + }
1121 +}
1122 +
1123 +.uploadHistoryTable {
1124 + .el-table__header-wrapper {
1125 + .el-table__header {
1126 + thead {
1127 + tr {
1128 + th {
1129 + background-color: #fff !important;
1130 + }
1131 + }
1132 + }
1133 + }
1134 + }
1135 +
1136 + .el-table__body-wrapper {
1137 + tbody {
1138 + tr {
1139 + td {
1140 + background-color: $formItemBackgroundColor;
1141 + }
1142 +
1143 + .el-table__expand-column {
1144 + .cell {
1145 + .el-table__expand-icon {
1146 + display: none !important;
1147 + }
1148 + }
1149 + }
1150 +
1151 + .el-table__expanded-cell {
1152 + padding: 0px;
1153 + background-color: #fff !important;
1154 + }
1155 + }
1156 +
1157 + tr:hover {
1158 + .el-table__expanded-cell {
1159 + background-color: #fff !important;
1160 + }
1161 + }
1162 + }
1163 + }
1109 } 1164 }
...\ No newline at end of file ...\ No newline at end of file
......
1 <template> 1 <template>
2 - <el-form-item 2 + <div style="pointer-events: auto" @click="formItemClick">
3 - class="fedexFormItem" 3 + <el-form-item
4 - :label="itemLabel" 4 + class="fedexFormItem"
5 - :prop="prop" 5 + :label="itemLabel"
6 - :required="required" 6 + :prop="prop"
7 - :error="error" 7 + :required="required"
8 - :id="'inputOuter-' + type + '-' + prop" 8 + :error="error"
9 - > 9 + :id="'inputOuter-' + type + '-' + prop"
10 - <slot name="title" slot="label"></slot> 10 + >
11 - <slot></slot> 11 + <slot name="title" slot="label"></slot>
12 - <template v-slot:error="scoped"> 12 + <el-tooltip
13 - <div class="formError">{{ scoped.error }}</div> 13 + v-if="toolyipShow"
14 - </template> 14 + class="item"
15 - </el-form-item> 15 + effect="dark"
16 + :content="content"
17 + :disabled="tooltipDisabled"
18 + placement="top"
19 + >
20 + <slot></slot>
21 + </el-tooltip>
22 + <slot v-else></slot>
23 + <template v-slot:error="scoped">
24 + <div class="formError">{{ scoped.error }}</div>
25 + </template>
26 + </el-form-item>
27 + </div>
16 </template> 28 </template>
17 29
18 <script> 30 <script>
...@@ -42,11 +54,25 @@ export default { ...@@ -42,11 +54,25 @@ export default {
42 type: String, 54 type: String,
43 default: "", 55 default: "",
44 }, 56 },
57 + disabled: {
58 + type: Boolean,
59 + default: true,
60 + },
61 + toolyipShow: {
62 + type: Boolean,
63 + default: false,
64 + },
65 + eventType: {
66 + type: Boolean,
67 + default: false,
68 + },
45 }, 69 },
46 data() { 70 data() {
47 return { 71 return {
48 itemLabel: this.label, 72 itemLabel: this.label,
49 inputFocusType: false, 73 inputFocusType: false,
74 + content: "",
75 + tooltipDisabled: true,
50 }; 76 };
51 }, 77 },
52 watch: { 78 watch: {
...@@ -62,8 +88,13 @@ export default { ...@@ -62,8 +88,13 @@ export default {
62 let outInput = document.querySelector( 88 let outInput = document.querySelector(
63 "#inputOuter-" + this.type + "-" + this.prop 89 "#inputOuter-" + this.type + "-" + this.prop
64 ); //获取formitem 90 ); //获取formitem
91 + let dateEditor = document.querySelector(".el-date-editor");
65 if (inputInner) { 92 if (inputInner) {
93 + if (inputInner.disabled && this.eventType) {
94 + inputInner.style = "pointer-events:none";
95 + }
66 //通过input得id是否存在判断效果是否激活 96 //通过input得id是否存在判断效果是否激活
97 + this.activeType ? inputInner.classList.add("inputFocus") : "";
67 inputInner.addEventListener("focus", (e) => { 98 inputInner.addEventListener("focus", (e) => {
68 this.inputFocusType = true; 99 this.inputFocusType = true;
69 inputInner.classList.add("inputFocus"); 100 inputInner.classList.add("inputFocus");
...@@ -73,12 +104,8 @@ export default { ...@@ -73,12 +104,8 @@ export default {
73 inputInner.addEventListener("blur", (e) => { 104 inputInner.addEventListener("blur", (e) => {
74 if (!e.target.value && !e.target.placeholder) { 105 if (!e.target.value && !e.target.placeholder) {
75 // input失焦时如果无内容则移除active class 106 // input失焦时如果无内容则移除active class
76 - if (this.labelInput) { 107 + this.itemLabel = this.label;
77 - this.itemLabel = this.label; 108 + !this.activeType ? inputInner.classList.remove("inputFocus") : "";
78 - // labelInputInner_parentNode.style.display = 'inline-block'
79 - } else {
80 - !this.activeType ? inputInner.classList.remove("inputFocus") : "";
81 - }
82 } else { 109 } else {
83 inputInner.classList.add("inputFocus"); 110 inputInner.classList.add("inputFocus");
84 } 111 }
...@@ -89,12 +116,8 @@ export default { ...@@ -89,12 +116,8 @@ export default {
89 inputInner.addEventListener("change", (e) => { 116 inputInner.addEventListener("change", (e) => {
90 if (!e.target.value && !e.target.placeholder) { 117 if (!e.target.value && !e.target.placeholder) {
91 // input失焦时如果无内容则移除active class 118 // input失焦时如果无内容则移除active class
92 - if (this.labelInput) { 119 + this.itemLabel = this.label;
93 - this.itemLabel = this.label; 120 + !this.activeType ? inputInner.classList.remove("inputFocus") : "";
94 - // labelInputInner_parentNode.style.display = 'inline-block'
95 - } else {
96 - !this.activeType ? inputInner.classList.remove("inputFocus") : "";
97 - }
98 } else { 121 } else {
99 inputInner.classList.add("inputFocus"); 122 inputInner.classList.add("inputFocus");
100 } 123 }
...@@ -113,7 +136,62 @@ export default { ...@@ -113,7 +136,62 @@ export default {
113 if (inputInner.value) { 136 if (inputInner.value) {
114 inputInner.classList.add("inputFocus"); 137 inputInner.classList.add("inputFocus");
115 } 138 }
139 + this.content = inputInner.value;
116 }); 140 });
141 + } else {
142 + if (dateEditor) {
143 + this.activeType
144 + ? document
145 + .querySelector(".inputInner-" + this.type + "-" + this.prop)
146 + .classList.add("inputFocus")
147 + : "";
148 + if (
149 + document.querySelector(".inputInner-" + this.type + "-" + this.prop)
150 + ) {
151 + let dataInner = document
152 + .querySelector(".inputInner-" + this.type + "-" + this.prop)
153 + .getElementsByClassName("el-range-input");
154 + dataInner[0].addEventListener("focus", (e) => {
155 + this.inputFocusType = true;
156 + dataInner[0].classList.add("inputFocus");
157 + outInput.classList.add("activeBorder");
158 + });
159 +
160 + dataInner[1].addEventListener("focus", (e) => {
161 + this.inputFocusType = true;
162 + dataInner[1].classList.add("inputFocus");
163 + outInput.classList.add("activeBorder");
164 + });
165 +
166 + dataInner[0].addEventListener("blur", (e) => {
167 + if (!e.target.value && !e.target.placeholder) {
168 + // input失焦时如果无内容则移除active class
169 + this.itemLabel = this.label;
170 + !this.activeType
171 + ? dataInner[0].classList.remove("inputFocus")
172 + : "";
173 + } else {
174 + dataInner[0].classList.add("inputFocus");
175 + }
176 + this.inputFocusType = false;
177 + outInput.classList.remove("activeBorder");
178 + });
179 +
180 + dataInner[1].addEventListener("blur", (e) => {
181 + if (!e.target.value && !e.target.placeholder) {
182 + // input失焦时如果无内容则移除active class
183 + this.itemLabel = this.label;
184 + !this.activeType
185 + ? dataInner[1].classList.remove("inputFocus")
186 + : "";
187 + } else {
188 + dataInner[1].classList.add("inputFocus");
189 + }
190 + this.inputFocusType = false;
191 + outInput.classList.remove("activeBorder");
192 + });
193 + }
194 + }
117 } 195 }
118 }, 196 },
119 updated() { 197 updated() {
...@@ -123,27 +201,73 @@ export default { ...@@ -123,27 +201,73 @@ export default {
123 let outInput = document.querySelector( 201 let outInput = document.querySelector(
124 "#inputOuter-" + this.type + "-" + this.prop 202 "#inputOuter-" + this.type + "-" + this.prop
125 ); //获取formitem 203 ); //获取formitem
204 + let dateEditor = document.querySelector(".el-date-editor");
126 this.$nextTick(() => { 205 this.$nextTick(() => {
127 - if (inputInner && inputInner.value) { 206 + if (inputInner) {
128 - inputInner.classList.add("inputFocus"); 207 + if (
208 + inputInner.value != undefined &&
209 + inputInner.value != "" &&
210 + inputInner.value != null
211 + ) {
212 + inputInner.classList.add("inputFocus");
213 + } else {
214 + !this.inputFocusType ? inputInner.classList.remove("inputFocus") : "";
215 + this.activeType ? inputInner.classList.add("inputFocus") : "";
216 + }
129 } else { 217 } else {
130 - !this.inputFocusType ? inputInner?.classList.remove("inputFocus") : ""; 218 + if (dateEditor) {
219 + if (this.activeType) {
220 + document.querySelector(".inputInner-" + this.type + "-" + this.prop)
221 + .classList
222 + ? document
223 + .querySelector(".inputInner-" + this.type + "-" + this.prop)
224 + .classList.add("inputFocus")
225 + : "";
226 + }
227 + }
228 + }
229 + if (
230 + inputInner &&
231 + inputInner.offsetWidth &&
232 + inputInner.offsetWidth < inputInner.scrollWidth
233 + ) {
234 + this.content = inputInner.value;
235 + !this.disabled
236 + ? (this.tooltipDisabled = false)
237 + : (this.tooltipDisabled = true);
131 } 238 }
132 }); 239 });
133 }, 240 },
134 methods: { 241 methods: {
242 + formItemClick() {
243 + this.$emit("event", this.prop);
244 + },
135 getDateEditorNode() { 245 getDateEditorNode() {
136 let dateInput = document.getElementsByClassName("el-date-editor"); 246 let dateInput = document.getElementsByClassName("el-date-editor");
137 dateInput.forEach((item) => { 247 dateInput.forEach((item) => {
138 - item 248 + item.querySelector(".el-input__suffix")
139 - .querySelector(".el-input__suffix") 249 + ? item
140 - .children[0].children[0].classList.add("el-icon-date"); 250 + .querySelector(".el-input__suffix")
251 + .children[0].children[0].classList.add("el-icon-date")
252 + : "";
141 }); 253 });
142 let selectInput = document.getElementsByClassName("el-select"); 254 let selectInput = document.getElementsByClassName("el-select");
143 selectInput.forEach((item) => { 255 selectInput.forEach((item) => {
144 // item.querySelector('.el-input__suffix').children[0].children[0].style.display = 'none' 256 // item.querySelector('.el-input__suffix').children[0].children[0].style.display = 'none'
145 }); 257 });
146 }, 258 },
259 + onMouseOver(str) {
260 + if (this.$refs[str]) {
261 + const parentWidth = this.$refs[str].parentNode.offsetWidth;
262 + const contentWidth = this.$refs[str].offsetWidth;
263 + // 判断是否开启tooltip功能
264 + if (contentWidth > parentWidth) {
265 + this.isShowTooltip = false;
266 + } else {
267 + this.isShowTooltip = true;
268 + }
269 + }
270 + },
147 }, 271 },
148 }; 272 };
149 </script> 273 </script>
......
...@@ -6,10 +6,10 @@ export default { ...@@ -6,10 +6,10 @@ export default {
6 }, 6 },
7 // 公用 7 // 公用
8 common: { 8 common: {
9 - sureBtn: "確定", 9 + sureBtn: "OK",
10 goBack: "返回", 10 goBack: "返回",
11 submitBtn: "提交", 11 submitBtn: "提交",
12 - cancleBtn: "取消", 12 + cancleBtn: "Cancel",
13 useBtn: "使用", 13 useBtn: "使用",
14 saveBtn: "保存", 14 saveBtn: "保存",
15 closeBtn: "關閉", 15 closeBtn: "關閉",
...@@ -86,8 +86,8 @@ export default { ...@@ -86,8 +86,8 @@ export default {
86 onlineDeclare: "線上申報平臺帳號登錄", 86 onlineDeclare: "線上申報平臺帳號登錄",
87 registerNumber: "註冊線上申報平臺帳號", 87 registerNumber: "註冊線上申報平臺帳號",
88 userInfo: "用戶信息維護", 88 userInfo: "用戶信息維護",
89 - logOut: "退出登錄", 89 + logOut: "log out",
90 - logOutDia: "確定註銷並退出系統嗎？", 90 + logOutDia: "Are you sure to log out and exit the system?",
91 }, 91 },
92 // 申报输入 92 // 申报输入
93 fillIn: { 93 fillIn: {
......
...@@ -100,7 +100,6 @@ import TopNav from "@/components/TopNav"; ...@@ -100,7 +100,6 @@ import TopNav from "@/components/TopNav";
100 import Hamburger from "@/components/Hamburger"; 100 import Hamburger from "@/components/Hamburger";
101 import { removeToken } from "@/utils/auth"; 101 import { removeToken } from "@/utils/auth";
102 102
103 -
104 export default { 103 export default {
105 components: { 104 components: {
106 Breadcrumb, 105 Breadcrumb,
...@@ -109,9 +108,13 @@ export default { ...@@ -109,9 +108,13 @@ export default {
109 }, 108 },
110 data() { 109 data() {
111 return { 110 return {
112 - lang: localStorage.getItem("lang") || "zh-TW", 111 + lang: localStorage.getItem("lang") || "en",
113 langOptions: [ 112 langOptions: [
114 { 113 {
114 + label: "English",
115 + value: "en",
116 + },
117 + {
115 label: "中文繁體", 118 label: "中文繁體",
116 value: "zh-TW", 119 value: "zh-TW",
117 }, 120 },
...@@ -147,7 +150,7 @@ export default { ...@@ -147,7 +150,7 @@ export default {
147 this.$store.dispatch("app/toggleSideBar"); 150 this.$store.dispatch("app/toggleSideBar");
148 }, 151 },
149 async logout() { 152 async logout() {
150 - this.$confirm(this.$t("layout.logOutDia"), "提示", { 153 + this.$confirm(this.$t("layout.logOutDia"), "Tip", {
151 confirmButtonText: this.$t("common.sureBtn"), 154 confirmButtonText: this.$t("common.sureBtn"),
152 cancelButtonText: this.$t("common.cancleBtn"), 155 cancelButtonText: this.$t("common.cancleBtn"),
153 type: "warning", 156 type: "warning",
...@@ -165,7 +168,7 @@ export default { ...@@ -165,7 +168,7 @@ export default {
165 this.$emit("login", "login"); 168 this.$emit("login", "login");
166 } else if (val == "create") { 169 } else if (val == "create") {
167 this.$emit("login", "create"); 170 this.$emit("login", "create");
168 - }else if(val == "fedexRegister"){ 171 + } else if (val == "fedexRegister") {
169 this.$emit("login", "fedexRegister"); 172 this.$emit("login", "fedexRegister");
170 } 173 }
171 }, 174 },
......
1 <template> 1 <template>
2 <div class="loginForm"> 2 <div class="loginForm">
3 - <FedexAlert v-if="errorTip.length > 0" class="mb20" :tipList="errorTip" @close="errorTipClose" /> 3 + <FedexAlert
4 + v-if="errorTip.length > 0"
5 + class="mb20"
6 + :tipList="errorTip"
7 + @close="errorTipClose"
8 + />
4 <div v-if="loginType == 'login'"> 9 <div v-if="loginType == 'login'">
5 <div class="form-title">{{ $t("login.userTitle") }}</div> 10 <div class="form-title">{{ $t("login.userTitle") }}</div>
6 - <!-- <div class="form-tip buttonType" @click="loginType = 'create'"> 11 + <el-form
7 - {{ $t("login.create") }} 12 + class="fedexFormStyle"
8 - </div> --> 13 + style="margin-top: 100px"
9 - <el-form class="fedexFormStyle" style="margin-top: 100px;" ref="loginFormRef" :model="loginForm" :rules="loginRules" label-position="top"> 14 + ref="loginFormRef"
15 + :model="loginForm"
16 + :rules="loginRules"
17 + label-position="top"
18 + >
10 <Formitem :label="$t('login.userNum')" prop="accNo"> 19 <Formitem :label="$t('login.userNum')" prop="accNo">
11 - <el-input type="text" :id="'inputInner--accNo'" v-model="loginForm.accNo" auto-complete="off"></el-input> 20 + <el-input
21 + type="text"
22 + :id="'inputInner--accNo'"
23 + v-model="loginForm.accNo"
24 + auto-complete="off"
25 + ></el-input>
12 </Formitem> 26 </Formitem>
13 <Formitem :label="$t('login.passWord')" prop="password"> 27 <Formitem :label="$t('login.passWord')" prop="password">
14 - <el-input type="password" :id="'inputInner--password'" v-model="loginForm.password" show-password 28 + <el-input
15 - auto-complete="off"></el-input> 29 + type="password"
30 + :id="'inputInner--password'"
31 + v-model="loginForm.password"
32 + show-password
33 + auto-complete="off"
34 + ></el-input>
16 </Formitem> 35 </Formitem>
17 <el-checkbox class="mt10" v-model="loginForm.rememberMe">{{ 36 <el-checkbox class="mt10" v-model="loginForm.rememberMe">{{
18 $t("login.checkPassWord") 37 $t("login.checkPassWord")
19 }}</el-checkbox> 38 }}</el-checkbox>
20 </el-form> 39 </el-form>
21 <div class="form-option"> 40 <div class="form-option">
22 - <el-button class="entrySaveButton entrySaveButton-background" :loading="loading" size="medium" type="primary" 41 + <el-button
23 - @click.native.prevent="handleLogin"> 42 + class="entrySaveButton entrySaveButton-background"
43 + :loading="loading"
44 + size="medium"
45 + type="primary"
46 + @click.native.prevent="handleLogin"
47 + >
24 <span v-if="!loading">{{ $t("login.loginBtn") }}</span> 48 <span v-if="!loading">{{ $t("login.loginBtn") }}</span>
25 <span v-else>{{ $t("login.loggingBtn") }}</span> 49 <span v-else>{{ $t("login.loggingBtn") }}</span>
26 </el-button> 50 </el-button>
27 - <!-- <div class="rePassword buttonType" @click="loginType = 'reset'">
28 - {{ $t("login.forgetPassWord") }}
29 - </div> -->
30 </div> 51 </div>
31 </div> 52 </div>
32 <div v-else-if="loginType == 'rePassword'"> 53 <div v-else-if="loginType == 'rePassword'">
33 <div class="form-title">{{ $t("login.resetPassWord") }}</div> 54 <div class="form-title">{{ $t("login.resetPassWord") }}</div>
34 <div class="form-tip">{{ $t("login.resetTip") }}</div> 55 <div class="form-tip">{{ $t("login.resetTip") }}</div>
35 - <el-form class="fedexFormStyle" ref="rePassword" :model="rePasswordForm" :rules="rePasswordFormRules" 56 + <el-form
36 - label-position="top"> 57 + class="fedexFormStyle"
58 + ref="rePassword"
59 + :model="rePasswordForm"
60 + :rules="rePasswordFormRules"
61 + label-position="top"
62 + >
37 <Formitem :label="$t('login.userNum')" type="rePassword" prop="accNo"> 63 <Formitem :label="$t('login.userNum')" type="rePassword" prop="accNo">
38 - <el-input type="text" :id="'inputInner-rePassword-accNo'" v-model="rePasswordForm.accNo"></el-input> 64 + <el-input
65 + type="text"
66 + :id="'inputInner-rePassword-accNo'"
67 + v-model="rePasswordForm.accNo"
68 + ></el-input>
39 </Formitem> 69 </Formitem>
40 </el-form> 70 </el-form>
41 <div class="form-option"> 71 <div class="form-option">
42 - <el-button class="entrySaveButton entrySaveButton-background" size="medium" type="primary" @click="rePassword">{{ 72 + <el-button
43 - $t("login.resetPassWordBtn") }}</el-button> 73 + class="entrySaveButton entrySaveButton-background"
44 - <el-button class="entrySaveButton" size="medium" type="primary" @click="loginType = 'login'">{{ 74 + size="medium"
45 - $t("common.goBack") }}</el-button> 75 + type="primary"
76 + @click="rePassword"
77 + >{{ $t("login.resetPassWordBtn") }}</el-button
78 + >
79 + <el-button
80 + class="entrySaveButton"
81 + size="medium"
82 + type="primary"
83 + @click="loginType = 'login'"
84 + >{{ $t("common.goBack") }}</el-button
85 + >
46 </div> 86 </div>
47 </div> 87 </div>
48 - 88 +
49 <div v-else-if="loginType == 'create'"> 89 <div v-else-if="loginType == 'create'">
50 <div class="form-title">{{ $t("login.createUserNum") }}</div> 90 <div class="form-title">{{ $t("login.createUserNum") }}</div>
51 <div class="form-tip"></div> 91 <div class="form-tip"></div>
52 - <!-- <div class="form-tip">{{ $t("login.createUserNumTip") }}</div> --> 92 + <el-form
53 - <el-form class="fedexFormStyle" ref="createUserRef" :model="createUserForm" :rules="createUserRules" 93 + class="fedexFormStyle"
54 - label-position="top"> 94 + ref="createUserRef"
95 + :model="createUserForm"
96 + :rules="createUserRules"
97 + label-position="top"
98 + >
55 <el-row :gutter="10"> 99 <el-row :gutter="10">
56 <el-col :span="12"> 100 <el-col :span="12">
57 <Formitem :label="$t('login.userNum')" type="create" prop="accNo"> 101 <Formitem :label="$t('login.userNum')" type="create" prop="accNo">
58 - <el-input type="text" :id="'inputInner-create-accNo'" v-model="createUserForm.accNo" 102 + <el-input
59 - oninput="value = value.replace(/\s+/g,'')" auto-complete="off"></el-input> 103 + type="text"
104 + :id="'inputInner-create-accNo'"
105 + v-model="createUserForm.accNo"
106 + oninput="value = value.replace(/\s+/g,'')"
107 + auto-complete="off"
108 + ></el-input>
60 </Formitem> 109 </Formitem>
61 </el-col> 110 </el-col>
62 <el-col :span="12"> 111 <el-col :span="12">
63 - <Formitem :label="$t('login.userName')" type="create" prop="userName"> 112 + <Formitem
64 - <el-input type="text" :id="'inputInner-create-userName'" v-model="createUserForm.userName" 113 + :label="$t('login.userName')"
65 - autocomplete="new-password"></el-input> 114 + type="create"
115 + prop="userName"
116 + >
117 + <el-input
118 + type="text"
119 + :id="'inputInner-create-userName'"
120 + v-model="createUserForm.userName"
121 + autocomplete="new-password"
122 + ></el-input>
66 </Formitem> 123 </Formitem>
67 </el-col> 124 </el-col>
68 </el-row> 125 </el-row>
69 <el-row :gutter="10"> 126 <el-row :gutter="10">
70 <el-col :span="12"> 127 <el-col :span="12">
71 - <Formitem :label="$t('login.passWord')" type="create" prop="password"> 128 + <Formitem
72 - <el-input type="text" :id="'inputInner-create-password'" v-model="createUserForm.password" show-password 129 + :label="$t('login.passWord')"
73 - autocomplete="new-password"></el-input> 130 + type="create"
131 + prop="password"
132 + >
133 + <el-input
134 + type="text"
135 + :id="'inputInner-create-password'"
136 + v-model="createUserForm.password"
137 + show-password
138 + autocomplete="new-password"
139 + ></el-input>
74 </Formitem> 140 </Formitem>
75 </el-col> 141 </el-col>
76 <el-col :span="12"> 142 <el-col :span="12">
77 - <Formitem :label="$t('login.confirmPassWord')" type="create" prop="password2"> 143 + <Formitem
78 - <el-input type="text" :id="'inputInner-create-password2'" v-model="createUserForm.password2" show-password 144 + :label="$t('login.confirmPassWord')"
79 - auto-complete="off"></el-input> 145 + type="create"
146 + prop="password2"
147 + >
148 + <el-input
149 + type="text"
150 + :id="'inputInner-create-password2'"
151 + v-model="createUserForm.password2"
152 + show-password
153 + auto-complete="off"
154 + ></el-input>
80 </Formitem> 155 </Formitem>
81 </el-col> 156 </el-col>
82 </el-row> 157 </el-row>
83 <el-row :gutter="10"> 158 <el-row :gutter="10">
84 <el-col :span="12"> 159 <el-col :span="12">
85 - <Formitem :label="$t('login.fedexNum')" type="create" prop="fedexAccNo"> 160 + <Formitem
86 - <el-input type="text" :id="'inputInner-create-fedexAccNo'" v-model="createUserForm.fedexAccNo" 161 + :label="$t('login.fedexNum')"
87 - auto-complete="off"></el-input> 162 + type="create"
163 + prop="fedexAccNo"
164 + >
165 + <el-input
166 + type="text"
167 + :id="'inputInner-create-fedexAccNo'"
168 + v-model="createUserForm.fedexAccNo"
169 + auto-complete="off"
170 + ></el-input>
88 </Formitem> 171 </Formitem>
89 </el-col> 172 </el-col>
90 <el-col :span="12"> 173 <el-col :span="12">
91 - <Formitem :label="$t('login.confirmFedexNum')" type="create" prop="fedexAccNo2"> 174 + <Formitem
92 - <el-input type="text" :id="'inputInner-create-fedexAccNo2'" v-model="createUserForm.fedexAccNo2" 175 + :label="$t('login.confirmFedexNum')"
93 - auto-complete="off"></el-input> 176 + type="create"
177 + prop="fedexAccNo2"
178 + >
179 + <el-input
180 + type="text"
181 + :id="'inputInner-create-fedexAccNo2'"
182 + v-model="createUserForm.fedexAccNo2"
183 + auto-complete="off"
184 + ></el-input>
94 </Formitem> 185 </Formitem>
95 </el-col> 186 </el-col>
96 </el-row> 187 </el-row>
97 <el-row :gutter="10"> 188 <el-row :gutter="10">
98 <el-col :span="12"> 189 <el-col :span="12">
99 <Formitem :label="$t('login.emailNum')" type="create" prop="email"> 190 <Formitem :label="$t('login.emailNum')" type="create" prop="email">
100 - <el-input type="text" :id="'inputInner-create-email'" v-model="createUserForm.email" 191 + <el-input
101 - auto-complete="off"></el-input> 192 + type="text"
193 + :id="'inputInner-create-email'"
194 + v-model="createUserForm.email"
195 + auto-complete="off"
196 + ></el-input>
102 </Formitem> 197 </Formitem>
103 </el-col> 198 </el-col>
104 <el-col :span="12"> 199 <el-col :span="12">
105 <Formitem :label="$t('login.phone')" type="create" prop="phone"> 200 <Formitem :label="$t('login.phone')" type="create" prop="phone">
106 - <el-input type="text" :id="'inputInner-create-phone'" maxlength="40" v-model="createUserForm.phone" 201 + <el-input
107 - auto-complete="off"></el-input> 202 + type="text"
203 + :id="'inputInner-create-phone'"
204 + maxlength="40"
205 + v-model="createUserForm.phone"
206 + auto-complete="off"
207 + ></el-input>
108 </Formitem> 208 </Formitem>
109 </el-col> 209 </el-col>
110 </el-row> 210 </el-row>
111 <el-row :gutter="10"> 211 <el-row :gutter="10">
112 <el-col :span="12"> 212 <el-col :span="12">
113 - <Formitem :label="$t('login.company')" type="create" prop="companyName"> 213 + <Formitem
114 - <el-input type="text" :id="'inputInner-create-companyName'" v-model="createUserForm.companyName" 214 + :label="$t('login.company')"
115 - auto-complete="off"></el-input> 215 + type="create"
216 + prop="companyName"
217 + >
218 + <el-input
219 + type="text"
220 + :id="'inputInner-create-companyName'"
221 + v-model="createUserForm.companyName"
222 + auto-complete="off"
223 + ></el-input>
116 </Formitem> 224 </Formitem>
117 </el-col> 225 </el-col>
118 <el-col :span="12"> 226 <el-col :span="12">
119 - <Formitem :label="$t('login.unifyNum')" type="create" prop="unifiedBusinessNum"> 227 + <Formitem
120 - <el-input type="text" :id="'inputInner-create-unifiedBusinessNum'" maxlength="10" 228 + :label="$t('login.unifyNum')"
121 - oninput="value = value.replace(/\s+/g, '')" v-model="createUserForm.unifiedBusinessNum" 229 + type="create"
122 - auto-complete="off"></el-input> 230 + prop="unifiedBusinessNum"
231 + >
232 + <el-input
233 + type="text"
234 + :id="'inputInner-create-unifiedBusinessNum'"
235 + maxlength="10"
236 + oninput="value = value.replace(/\s+/g, '')"
237 + v-model="createUserForm.unifiedBusinessNum"
238 + auto-complete="off"
239 + ></el-input>
123 </Formitem> 240 </Formitem>
124 </el-col> 241 </el-col>
125 </el-row> 242 </el-row>
126 <el-row :gutter="10"> 243 <el-row :gutter="10">
127 <el-col :span="12"> 244 <el-col :span="12">
128 - <Formitem :label="$t('login.customsNum')" type="create" prop="customsSerialNum"> 245 + <Formitem
129 - <el-input type="text" :id="'inputInner-create-customsSerialNum'" v-model="createUserForm.customsSerialNum" 246 + :label="$t('login.customsNum')"
130 - auto-complete="off"></el-input> 247 + type="create"
248 + prop="customsSerialNum"
249 + >
250 + <el-input
251 + type="text"
252 + :id="'inputInner-create-customsSerialNum'"
253 + v-model="createUserForm.customsSerialNum"
254 + auto-complete="off"
255 + ></el-input>
131 </Formitem> 256 </Formitem>
132 </el-col> 257 </el-col>
133 </el-row> 258 </el-row>
134 - <el-checkbox class="mt10" v-model="createUserForm.policyFlag" style="margin-right: 0px">{{ $t("login.checkAgree1") 259 + <el-checkbox
135 - }}</el-checkbox><a @click="openPrivacy">{{ $t("login.policy1") }}</a> 260 + class="mt10"
261 + v-model="createUserForm.policyFlag"
262 + style="margin-right: 0px"
263 + >{{ $t("login.checkAgree1") }}</el-checkbox
264 + ><a @click="openPrivacy">{{ $t("login.policy1") }}</a>
136 <el-checkbox v-model="createUserForm.clauseFlag">{{ 265 <el-checkbox v-model="createUserForm.clauseFlag">{{
137 $t("login.checkAgree2_1") 266 $t("login.checkAgree2_1")
138 }}</el-checkbox> 267 }}</el-checkbox>
139 <span>{{ $t("login.policy2") }}</span> 268 <span>{{ $t("login.policy2") }}</span>
140 - <!-- <a href="">{{ $t("login.policy2") }}</a> --> 269 + <span>{{ $t("login.checkAgree2_2") }}</span
141 - <span>{{ $t("login.checkAgree2_2") }}</span><a @click="openTermPdf">{{ $t("login.policy3") }}</a><span>{{ 270 + ><a @click="openTermPdf">{{ $t("login.policy3") }}</a
142 - $t("login.checkAgree2_3") }}</span> 271 + ><span>{{ $t("login.checkAgree2_3") }}</span>
143 </el-form> 272 </el-form>
144 <div class="form-option"> 273 <div class="form-option">
145 - <el-button class="entrySaveButton entrySaveButton-background" size="medium" type="primary" @click="createUser">{{ 274 + <el-button
146 - $t("common.submitBtn") }}</el-button> 275 + class="entrySaveButton entrySaveButton-background"
147 - <el-button class="entrySaveButton" size="medium" type="primary" @click="loginType = 'login'">{{ 276 + size="medium"
148 - $t("common.goBack") }}</el-button> 277 + type="primary"
278 + @click="createUser"
279 + >{{ $t("common.submitBtn") }}</el-button
280 + >
281 + <el-button
282 + class="entrySaveButton"
283 + size="medium"
284 + type="primary"
285 + @click="loginType = 'login'"
286 + >{{ $t("common.goBack") }}</el-button
287 + >
149 </div> 288 </div>
150 </div> 289 </div>
151 <div v-else-if="loginType == 'reset'"> 290 <div v-else-if="loginType == 'reset'">
152 <div class="form-title">忘記了您的用户密碼？</div> 291 <div class="form-title">忘記了您的用户密碼？</div>
153 <div class="form-tip">提供您的用戶帳號</div> 292 <div class="form-tip">提供您的用戶帳號</div>
154 <div class="form-option"> 293 <div class="form-option">
155 - <el-button class="entrySaveButton entrySaveButton-background" size="medium" type="primary" 294 + <el-button
156 - @click="loginType = 'rePassword'">重置密码</el-button> 295 + class="entrySaveButton entrySaveButton-background"
157 - <el-button class="entrySaveButton" size="medium" type="primary" @click="loginType = 'login'">{{ 296 + size="medium"
158 - $t("common.goBack") }}</el-button> 297 + type="primary"
298 + @click="loginType = 'rePassword'"
299 + >重置密码</el-button
300 + >
301 + <el-button
302 + class="entrySaveButton"
303 + size="medium"
304 + type="primary"
305 + @click="loginType = 'login'"
306 + >{{ $t("common.goBack") }}</el-button
307 + >
159 </div> 308 </div>
160 </div> 309 </div>
161 - <!-- 修改密码 --> 310 + <!-- 修改密码 -->
162 - <div v-else-if="loginType == 'resetPwd'"> 311 + <div v-else-if="loginType == 'resetPwd'">
163 <div class="form-title"> 312 <div class="form-title">
164 - {{ $t('login.loginPassword.resetPassword.title') }} 313 + {{ $t("login.loginPassword.resetPassword.title") }}
314 + </div>
315 + <div class="form-tip">
316 + {{ $t("login.loginPassword.resetPassword.tip") }}
165 </div> 317 </div>
166 - <div class="form-tip">{{ $t('login.loginPassword.resetPassword.tip') }}</div> 318 + <el-form
167 - <el-form class="fedexFormStyle" ref="resetPassword" :model="resetPasswordForm" :rules="resetPasswordRules" 319 + class="fedexFormStyle"
168 - label-position="top"> 320 + ref="resetPassword"
169 - <Formitem :label="$t('login.loginPassword.resetPassword.loginNameLabel')" type="reset" prop="loginName"> 321 + :model="resetPasswordForm"
170 - <el-input type="text" :id="'inputInner-reset-loginName'" v-model="resetPasswordForm.loginName" disabled 322 + :rules="resetPasswordRules"
171 - autocomplete="new-password"></el-input> 323 + label-position="top"
324 + >
325 + <Formitem
326 + :label="$t('login.loginPassword.resetPassword.loginNameLabel')"
327 + type="reset"
328 + prop="loginName"
329 + >
330 + <el-input
331 + type="text"
332 + :id="'inputInner-reset-loginName'"
333 + v-model="resetPasswordForm.loginName"
334 + disabled
335 + autocomplete="new-password"
336 + ></el-input>
172 </Formitem> 337 </Formitem>
173 - <div class="formTitle" style="font-size: 16px;margin-top:30px">{{ 338 + <div class="formTitle" style="font-size: 16px; margin-top: 30px">
174 - $t('login.loginPassword.resetPassword.password') }}<span class="tip">{{$t('login.loginPassword.resetPassword.passwordTip') }}</span></div> 339 + {{ $t("login.loginPassword.resetPassword.password")
175 - <Formitem :label="$t('login.loginPassword.resetPassword.newPassword')" type="reset" prop="password"> 340 + }}<span class="tip">{{
176 - <el-input type="password" :id="'inputInner-reset-password'" v-model="resetPasswordForm.password" show-password 341 + $t("login.loginPassword.resetPassword.passwordTip")
177 - autocomplete="new-password"></el-input> 342 + }}</span>
343 + </div>
344 + <Formitem
345 + :label="$t('login.loginPassword.resetPassword.newPassword')"
346 + type="reset"
347 + prop="password"
348 + >
349 + <el-input
350 + type="password"
351 + :id="'inputInner-reset-password'"
352 + v-model="resetPasswordForm.password"
353 + show-password
354 + autocomplete="new-password"
355 + ></el-input>
178 </Formitem> 356 </Formitem>
179 - <Formitem :label="$t('login.loginPassword.resetPassword.confirmPassword')" type="reset" prop="confirmPassword"> 357 + <Formitem
180 - <el-input type="password" :id="'inputInner-reset-confirmPassword'" show-password 358 + :label="$t('login.loginPassword.resetPassword.confirmPassword')"
181 - v-model="resetPasswordForm.confirmPassword" autocomplete="new-password"></el-input> 359 + type="reset"
360 + prop="confirmPassword"
361 + >
362 + <el-input
363 + type="password"
364 + :id="'inputInner-reset-confirmPassword'"
365 + show-password
366 + v-model="resetPasswordForm.confirmPassword"
367 + autocomplete="new-password"
368 + ></el-input>
182 </Formitem> 369 </Formitem>
183 </el-form> 370 </el-form>
184 <div class="form-option"> 371 <div class="form-option">
185 - <el-button class="entrySaveButton entrySaveButton-background" size="medium" type="primary" :loading="loading" 372 + <el-button
186 - @click="resetPasswordSubmit">{{ $t('common.submitBtn') }}</el-button> 373 + class="entrySaveButton entrySaveButton-background"
187 - <el-button class="entrySaveButton" size="medium" type="primary" @click="loginType = 'login'">{{ 374 + size="medium"
188 - $t('common.goBack') }}</el-button> 375 + type="primary"
376 + :loading="loading"
377 + @click="resetPasswordSubmit"
378 + >{{ $t("common.submitBtn") }}</el-button
379 + >
380 + <el-button
381 + class="entrySaveButton"
382 + size="medium"
383 + type="primary"
384 + @click="loginType = 'login'"
385 + >{{ $t("common.goBack") }}</el-button
386 + >
189 </div> 387 </div>
190 </div> 388 </div>
191 </div> 389 </div>
192 </template> 390 </template>
193 391
194 <script> 392 <script>
195 -import { encrypt, decrypt } from "@/utils/jsencrypt"; 393 +import {
196 -import { addUser, getUserByAccNo, updPwd ,resetPwd,verifyResetPwd} from "@/api/login.js"; 394 + addUser,
395 + getUserByAccNo,
396 + updPwd,
397 + resetPwd,
398 + verifyResetPwd,
399 +} from "@/api/login.js";
197 export default { 400 export default {
198 props: { 401 props: {
199 loginType: { 402 loginType: {
200 type: String, 403 type: String,
201 default: "login", 404 default: "login",
202 - },loginName: { 405 + },
203 - type: String, 406 + loginName: {
204 - default: '' 407 + type: String,
205 - } 408 + default: "",
409 + },
206 }, 410 },
207 data() { 411 data() {
208 return { 412 return {
...@@ -232,33 +436,51 @@ export default { ...@@ -232,33 +436,51 @@ export default {
232 }, 436 },
233 rePasswordForm: { 437 rePasswordForm: {
234 username: "", 438 username: "",
235 - },//重置密码数据 439 + }, //重置密码数据
236 resetPasswordForm: { 440 resetPasswordForm: {
237 - loginName: '', 441 + loginName: "",
238 - password: null, 442 + password: null,
239 - confirmPassword: null, 443 + confirmPassword: null,
240 }, 444 },
241 - rePasswordData:null, 445 + rePasswordData: null,
242 loginRules: { 446 loginRules: {
243 accNo: [ 447 accNo: [
244 - { required: true, trigger: "blur", message: "User account cannot be empty." }, 448 + {
449 + required: true,
450 + trigger: "blur",
451 + message: "User account cannot be empty.",
452 + },
245 ], 453 ],
246 password: [ 454 password: [
247 - { required: true, trigger: "blur", message: "Password cannot be empty." }, 455 + {
456 + required: true,
457 + trigger: "blur",
458 + message: "Password cannot be empty.",
459 + },
248 ], 460 ],
249 }, 461 },
250 rePasswordFormRules: { 462 rePasswordFormRules: {
251 accNo: [ 463 accNo: [
252 - { required: true, trigger: "blur", message: "User account cannot be empty." }, 464 + {
465 + required: true,
466 + trigger: "blur",
467 + message: "User account cannot be empty.",
468 + },
253 ], 469 ],
254 }, 470 },
255 createUserRules: { 471 createUserRules: {
256 accNo: [ 472 accNo: [
257 - { required: true, trigger: "blur", message: "User account cannot be empty." }, 473 + {
474 + required: true,
475 + trigger: "blur",
476 + message: "User account cannot be empty.",
477 + },
258 { 478 {
259 validator: (rule, value, callback) => { 479 validator: (rule, value, callback) => {
260 if (this.regExp.pattern.test(value)) { 480 if (this.regExp.pattern.test(value)) {
261 - callback("The username does not allow special characters or spaces!"); 481 + callback(
482 + "The username does not allow special characters or spaces!"
483 + );
262 } else { 484 } else {
263 getUserByAccNo(value) 485 getUserByAccNo(value)
264 .then((res) => { 486 .then((res) => {
...@@ -400,32 +622,57 @@ export default { ...@@ -400,32 +622,57 @@ export default {
400 ], 622 ],
401 }, 623 },
402 resetPasswordRules: { 624 resetPasswordRules: {
403 - loginName: [{ required: true, trigger: "blur", message: this.$t('login.loginPassword.formCheck.resetloginName') }], 625 + loginName: [
404 - password: [{ required: true, trigger: "blur", message: this.$t('login.loginPassword.formCheck.resetPasswordPassword') },
405 { 626 {
406 - validator: (rule, value, callback) => { 627 + required: true,
407 - 628 + trigger: "blur",
408 - if (!this.regExp.passwordExp.test(value)) { 629 + message: this.$t("login.loginPassword.formCheck.resetloginName"),
409 - callback(this.$t('login.loginPassword.resetPassword.passwordTip')) 630 + },
410 - } else { 631 + ],
411 - callback() 632 + password: [
412 - } 633 + {
413 - }, 634 + required: true,
414 - trigger: "blur", 635 + trigger: "blur",
415 - }], 636 + message: this.$t(
416 - confirmPassword: [ 637 + "login.loginPassword.formCheck.resetPasswordPassword"
417 - { required: true, trigger: "blur", message: this.$t('login.loginPassword.formCheck.resetPasswordConfirmPassword1') }, 638 + ),
418 - { 639 + },
419 - validator: (rule, value, callback) => { 640 + {
420 - if (value != this.resetPasswordForm.password) { 641 + validator: (rule, value, callback) => {
421 - callback(this.$t('login.loginPassword.formCheck.resetPasswordConfirmPassword2')) 642 + if (!this.regExp.passwordExp.test(value)) {
422 - } else { 643 + callback(
423 - callback() 644 + this.$t("login.loginPassword.resetPassword.passwordTip")
424 - } 645 + );
425 - }, 646 + } else {
426 - trigger: "blur", 647 + callback();
427 } 648 }
428 - ] 649 + },
650 + trigger: "blur",
651 + },
652 + ],
653 + confirmPassword: [
654 + {
655 + required: true,
656 + trigger: "blur",
657 + message: this.$t(
658 + "login.loginPassword.formCheck.resetPasswordConfirmPassword1"
659 + ),
660 + },
661 + {
662 + validator: (rule, value, callback) => {
663 + if (value != this.resetPasswordForm.password) {
664 + callback(
665 + this.$t(
666 + "login.loginPassword.formCheck.resetPasswordConfirmPassword2"
667 + )
668 + );
669 + } else {
670 + callback();
671 + }
672 + },
673 + trigger: "blur",
674 + },
675 + ],
429 }, 676 },
430 loading: false, 677 loading: false,
431 redirect: undefined, 678 redirect: undefined,
...@@ -446,23 +693,25 @@ export default { ...@@ -446,23 +693,25 @@ export default {
446 handler: function (route) { 693 handler: function (route) {
447 this.redirect = route.query && route.query.redirect; 694 this.redirect = route.query && route.query.redirect;
448 if (route.query.changePasswordType) { 695 if (route.query.changePasswordType) {
449 - // route.query.changePasswordType == 'resetPwd' ? 696 + // route.query.changePasswordType == 'resetPwd' ?
450 - // this.resetPasswordForm.loginName = route.query.loginname : this.resetPasswordForm.loginName = ''; 697 + // this.resetPasswordForm.loginName = route.query.loginname : this.resetPasswordForm.loginName = '';
451 - if(route.query.changePasswordType == 'resetPwd' && route.query.loginname){ 698 + if (
452 - verifyResetPwd(route.query.loginname).then(res => { 699 + route.query.changePasswordType == "resetPwd" &&
453 - if(res.code==200){ 700 + route.query.loginname
454 - this.rePasswordData=res; 701 + ) {
455 - this.resetPasswordForm.loginName=res.data; 702 + verifyResetPwd(route.query.loginname).then((res) => {
456 - }else{ 703 + if (res.code == 200) {
457 - this.$alert(res.msg, "提示", { 704 + this.rePasswordData = res;
458 - dangerouslyUseHTMLString: true, 705 + this.resetPasswordForm.loginName = res.data;
459 - type: "error", 706 + } else {
460 - }) 707 + this.$alert(res.msg, "提示", {
461 - this.resetPasswordForm.loginName = '' 708 + dangerouslyUseHTMLString: true,
462 - } 709 + type: "error",
463 - }) 710 + });
464 - } 711 + this.resetPasswordForm.loginName = "";
465 - 712 + }
713 + });
714 + }
466 } 715 }
467 }, 716 },
468 immediate: true, 717 immediate: true,
...@@ -535,28 +784,32 @@ export default { ...@@ -535,28 +784,32 @@ export default {
535 rePassword() { 784 rePassword() {
536 this.$refs.rePassword.validate((valid) => { 785 this.$refs.rePassword.validate((valid) => {
537 if (valid) { 786 if (valid) {
538 - //根据用户账号发送修改密码邮件 787 + //根据用户账号发送修改密码邮件
539 - updPwd(this.rePasswordForm.accNo).then((res) => { 788 + updPwd(this.rePasswordForm.accNo)
540 - if (res.code == 200 ) { 789 + .then((res) => {
541 - this.$alert(this.$t('login.loginPassword.resetPassword.sendEmail'), "提示", { 790 + if (res.code == 200) {
542 - dangerouslyUseHTMLString: true, 791 + this.$alert(
543 - type: "success", 792 + this.$t("login.loginPassword.resetPassword.sendEmail"),
544 - }).then(()=>{ 793 + "提示",
545 - this.loginType="login"; 794 + {
546 - }) 795 + dangerouslyUseHTMLString: true,
547 - 796 + type: "success",
548 - }else{ 797 + }
549 - this.$alert(res.msg, "提示", { 798 + ).then(() => {
799 + this.loginType = "login";
800 + });
801 + } else {
802 + this.$alert(res.msg, "提示", {
550 dangerouslyUseHTMLString: true, 803 dangerouslyUseHTMLString: true,
551 type: "warning", 804 type: "warning",
552 - }) 805 + });
553 - } 806 + }
554 - }).catch((err) => { 807 + })
808 + .catch((err) => {
555 console.log(err); 809 console.log(err);
556 }); 810 });
557 } 811 }
558 }); 812 });
559 -
560 }, 813 },
561 errorTipClose() { 814 errorTipClose() {
562 this.errorTip = []; 815 this.errorTip = [];
...@@ -567,42 +820,45 @@ export default { ...@@ -567,42 +820,45 @@ export default {
567 openTermPdf() { 820 openTermPdf() {
568 window.open(this.linkList.term); 821 window.open(this.linkList.term);
569 }, 822 },
570 - //重置密码 823 + //重置密码
571 - resetPasswordSubmit() { 824 + resetPasswordSubmit() {
572 this.$refs.resetPassword.validate((valid) => { 825 this.$refs.resetPassword.validate((valid) => {
573 - if(valid){ 826 + if (valid) {
574 // verifyResetPwd(this.resetPasswordForm.loginName).then(res => { 827 // verifyResetPwd(this.resetPasswordForm.loginName).then(res => {
575 - if(this.rePasswordData.code==200){ 828 + if (this.rePasswordData.code == 200) {
576 - resetPwd({accNo:this.rePasswordData.data,newPwd:this.resetPasswordForm.password,newPwd2:this.resetPasswordForm.confirmPassword}).then(res1 =>{ 829 + resetPwd({
577 - if(res1.code==200){ 830 + accNo: this.rePasswordData.data,
831 + newPwd: this.resetPasswordForm.password,
832 + newPwd2: this.resetPasswordForm.confirmPassword,
833 + }).then((res1) => {
834 + if (res1.code == 200) {
578 this.$alert(res1.msg, "提示", { 835 this.$alert(res1.msg, "提示", {
579 dangerouslyUseHTMLString: true, 836 dangerouslyUseHTMLString: true,
580 type: "success", 837 type: "success",
581 - }).then(()=>{ 838 + }).then(() => {
582 - location.href = '/IcTw/#/login' 839 + location.href = "/IcTw/#/login";
583 - this.loginType = 'login' 840 + this.loginType = "login";
584 - }) 841 + });
585 - }else{ 842 + } else {
586 this.$alert(res1.msg, "提示", { 843 this.$alert(res1.msg, "提示", {
587 dangerouslyUseHTMLString: true, 844 dangerouslyUseHTMLString: true,
588 type: "warning", 845 type: "warning",
589 - }) 846 + });
590 } 847 }
591 - }) 848 + });
592 - }else{ 849 + } else {
593 - this.$alert(this.rePasswordData.msg, "提示", { 850 + this.$alert(this.rePasswordData.msg, "提示", {
594 - dangerouslyUseHTMLString: true, 851 + dangerouslyUseHTMLString: true,
595 - type: "warning", 852 + type: "warning",
596 - }) 853 + });
597 - } 854 + }
598 - // }) 855 + // })
599 } 856 }
600 - 857 + });
601 - })
602 }, 858 },
603 errorTipClose() { 859 errorTipClose() {
604 - this.errorTip = [] 860 + this.errorTip = [];
605 - } 861 + },
606 }, 862 },
607 }; 863 };
608 </script> 864 </script>
...@@ -657,7 +913,7 @@ export default { ...@@ -657,7 +913,7 @@ export default {
657 margin-top: 100px; 913 margin-top: 100px;
658 914
659 .el-button { 915 .el-button {
660 - width: 120px; 916 + min-width: 120px;
661 height: 60px; 917 height: 60px;
662 font-size: 16px; 918 font-size: 16px;
663 } 919 }
......
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
36 <div class="buttonItem-icon"> 36 <div class="buttonItem-icon">
37 <svg-icon class="el-icon-user-solid" icon-class="fedex-login" /> 37 <svg-icon class="el-icon-user-solid" icon-class="fedex-login" />
38 </div> 38 </div>
39 - <div class="buttonItem-title">在線申報平臺帳號登錄</div> 39 + <div class="buttonItem-title">user log in</div>
40 <div class="textCenter"> 40 <div class="textCenter">
41 <svg-icon 41 <svg-icon
42 class="el-icon-user-solid" 42 class="el-icon-user-solid"
...@@ -205,14 +205,13 @@ export default { ...@@ -205,14 +205,13 @@ export default {
205 }, 205 },
206 attrs: { class: "font-style" }, 206 attrs: { class: "font-style" },
207 }, 207 },
208 - "註冊完成後請回到FedEx線上申報平臺重新登錄。" 208 + "After registration is completed, please return to the FedEx online declaration platform and log in again."
209 ), 209 ),
210 ]), 210 ]),
211 confirmButtonClass: "confirm-button", 211 confirmButtonClass: "confirm-button",
212 showCancelButton: true, 212 showCancelButton: true,
213 - 213 + confirmButtonText: this.$t("common.sureBtn"),
214 - confirmButtonText: "確定", 214 + cancelButtonText: this.$t("common.cancleBtn"),
215 - cancelButtonText: "取消",
216 iconClass: "el-icon-warning", 215 iconClass: "el-icon-warning",
217 center: true, 216 center: true,
218 // showClose: false, 217 // showClose: false,
...@@ -409,10 +408,10 @@ export default { ...@@ -409,10 +408,10 @@ export default {
409 } 408 }
410 } 409 }
411 .guide-box { 410 .guide-box {
412 - height: 170px;
413 font-size: 16px; 411 font-size: 16px;
414 padding-left: 249px; 412 padding-left: 249px;
415 - padding-top: 48px; 413 + padding-top: 24px;
414 + padding-bottom: 24px;
416 background: #f8f8f8; 415 background: #f8f8f8;
417 .guide { 416 .guide {
418 color: #4d148c; 417 color: #4d148c;
......