Fedex / iClear-Connect-Pre-Clearance

Go to a project
Toggle navigation Toggle navigation pinning
tao.mo
45ab4bb5 2 parents d6abd6c9 fa61e853

Merge remote-tracking branch 'origin/master'

Inline Side-by-side
Showing 18 changed files with 948 additions and 2857 deletions
...@@ -2,8 +2,7 @@ ...@@ -2,8 +2,7 @@
2 2
3 ```bash 3 ```bash
4 # 克隆项目 4 # 克隆项目
5 -git clone https://gitee.com/y_project/RuoYi-Vue 5 +git clone http://118.178.128.178/Fedex/iClear-Connect-Pre-Clearance.git
6 -
7 # 进入项目目录 6 # 进入项目目录
8 cd IMAC-ui 7 cd IMAC-ui
9 8
...@@ -27,4 +26,4 @@ npm run build:stage ...@@ -27,4 +26,4 @@ npm run build:stage
27 26
28 # 构建生产环境 27 # 构建生产环境
29 npm run build:prod 28 npm run build:prod
30 -```
...\ No newline at end of file ...\ No newline at end of file
29 +```
......
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
......
1 +<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2 +<path d="M13 1.08571L7 6.14286L1 1" stroke="#007AB7" stroke-miterlimit="10"/>
3 +<path d="M13 5.37087L7 10.428L1 5.28516" stroke="#007AB7" stroke-miterlimit="10"/>
4 +</svg>
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 3 <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
4 <defs><style type="text/css"></style></defs> 4 <defs><style type="text/css"></style></defs>
5 -<circle cx="16.5" cy="16.4" r="4" stroke-width="2" stroke-linejoin="round"/> 5 +<circle cx="16.5" cy="16.4" r="4" stroke-width="2" stroke-linejoin="round" stroke="currentColor"/>
6 -<path d="M19 19L23 23" stroke-width="2" stroke-linejoin="round"/> 6 +<path d="M19 19L23 23" stroke-width="2" stroke-linejoin="round" stroke="currentColor"/>
7 -<path d="M19 10V5L14 1H9.8H6L1 5V18H10" stroke-width="2" stroke-linejoin="round"/> 7 +<path d="M19 10V5L14 1H9.8H6L1 5V18H10" stroke-width="2" stroke-linejoin="round" stroke="currentColor"/>
8 -<path d="M10 6V1" stroke-width="2" stroke-linejoin="round"/> 8 +<path d="M10 6V1" stroke-width="2" stroke-linejoin="round" stroke="currentColor"/>
9 -<path d="M1 6H19" stroke-width="2" stroke-linejoin="round"/> 9 +<path d="M1 6H19" stroke-width="2" stroke-linejoin="round" stroke="currentColor"/>
10 </svg> 10 </svg>
......
1 +<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
2 +<path d="M8.5 1C4.4 1 1 4.4 1 8.5C1 12.6 4.4 16 8.5 16C12.6 16 16 12.6 16 8.5C16 4.4 12.6 1 8.5 1Z" stroke="#007AB7" stroke-miterlimit="10"/>
3 +<path d="M8.5 13.5C9.05228 13.5 9.5 13.0523 9.5 12.5C9.5 11.9477 9.05228 11.5 8.5 11.5C7.94772 11.5 7.5 11.9477 7.5 12.5C7.5 13.0523 7.94772 13.5 8.5 13.5Z" fill="#007AB7"/>
4 +<path d="M6.5 6.5C6.5 5 7.5 4 8.5 4C9.5 4 10.5 4.5 10.5 6C10.5 6.9 10 7.6 9.5 8C8.6 8.7 8.5 8.6 8.5 9.5V10.5" stroke="#007AB7" stroke-miterlimit="10"/>
5 +</svg>
1 +<svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
2 +<path d="M13 10.342L7 5.28488L1 10.4277" stroke="#007AB7" stroke-miterlimit="10"/>
3 +<path d="M13 6.05686L7 0.999721L1 6.14258" stroke="#007AB7" stroke-miterlimit="10"/>
4 +</svg>
...@@ -346,6 +346,7 @@ input:disabled { ...@@ -346,6 +346,7 @@ input:disabled {
346 /*标题平移至合适位置*/ 346 /*标题平移至合适位置*/
347 transition: all 0.2s ease; 347 transition: all 0.2s ease;
348 cursor: text; 348 cursor: text;
349 + z-index: 99;
349 } 350 }
350 351
351 .el-form-item__content { 352 .el-form-item__content {
...@@ -1062,4 +1063,102 @@ input:disabled { ...@@ -1062,4 +1063,102 @@ input:disabled {
1062 input::placeholder { 1063 input::placeholder {
1063 color: #409EFF 1064 color: #409EFF
1064 } 1065 }
1066 +}
1067 +
1068 +.el-range-editor {
1069 + width: 100%;
1070 + height: 100%;
1071 +
1072 + .el-range-input {
1073 + padding: 0px;
1074 + }
1075 +
1076 + .el-range-separator {
1077 + line-height: 50px;
1078 + }
1079 +
1080 + input {
1081 + width: 100%;
1082 + height: 100% !important;
1083 + border: none !important;
1084 + background-color: transparent;
1085 + padding-top: 0.775rem;
1086 + // padding-right: 1.15rem;
1087 + padding-left: calc(.6rem + .1875rem);
1088 + font-size: 0.875rem !important;
1089 + }
1090 +
1091 +}
1092 +
1093 +.el-range-editor.el-input__inner {
1094 + padding: 15px 10px 0px 10px;
1095 +}
1096 +
1097 +.el-range-editor {
1098 + .el-range-separator {
1099 + line-height: 35px;
1100 + }
1101 +}
1102 +
1103 +.el-input__inner {
1104 + background-color: transparent !important;
1105 +}
1106 +
1107 +.questionIcon {
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 + }
1065 } 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;
......
1 -<template>
2 - <el-dialog
3 - class="entryDialog systemDialog"
4 - :title="title"
5 - :visible.sync="outerVisible"
6 - :show-close="false"
7 - :close-on-click-modal="false"
8 - v-loading="loadings.editLoading"
9 - width="25%"
10 - @close="close"
11 - ></el-dialog>
12 -</template>
13 -
14 -<script>
15 -export default {
16 - data() {
17 - return {};
18 - },
19 -};
20 -</script>
21 -
22 -<style lang="scss" scoped>
23 -@import "@/assets/styles/variables.scss";
24 -</style>
1 -<template>
2 - <div class="search-wrap">
3 - <div class="search-box">
4 - <el-form
5 - class="fedexFormStyle queryTextarea-box"
6 - ref="sreachForm"
7 - :model="sreachFormData"
8 - label-position="top"
9 - size="small"
10 - :rules="rules"
11 - >
12 - <el-row :gutter="6">
13 - <el-col :span="5">
14 - <Formitem label="提單號碼（支持多個提單號查詢）" prop="deliveryNo">
15 - <el-input
16 - type="textarea"
17 - class="inputShadow-deliveryNo"
18 - name="deliveryNo"
19 - id="inputInner--deliveryNo"
20 - resize="none"
21 - :rows="deliveryNoRows"
22 - v-model="sreachFormData.deliveryNo"
23 - clearable
24 - placeholder=""
25 - @focus="consignmentCodeFocus"
26 - @blur="consignmentCodeBlur"
27 - ></el-input>
28 - <el-badge
29 - v-if="
30 - deliveryNoRows == 1 &&
31 - sreachFormData.deliveryNoList.length > 1
32 - "
33 - type="info"
34 - :value="`+${sreachFormData.deliveryNoList.length}`"
35 - class="item texttareaTip"
36 - ></el-badge>
37 - </Formitem>
38 - </el-col>
39 - <el-col :span="4">
40 - <Formitem label="貨物輸出統一編號" prop="deliveryCode">
41 - <el-input
42 - type="textarea"
43 - class="inputShadow"
44 - name="deliveryCode"
45 - id="inputInner--deliveryCode"
46 - resize="none"
47 - :rows="deliveryCodeRows"
48 - v-model="sreachFormData.deliveryCode"
49 - clearable
50 - placeholder=""
51 - @focus="consignmentCodeFocus"
52 - @blur="consignmentCodeBlur"
53 - ></el-input>
54 - <el-badge
55 - v-if="
56 - deliveryCodeRows == 1 &&
57 - sreachFormData.deliveryCodelist.length > 1
58 - "
59 - type="info"
60 - :value="`+${sreachFormData.deliveryCodelist.length}`"
61 - class="item texttareaTip"
62 - ></el-badge>
63 - </Formitem>
64 - </el-col>
65 - <el-col :span="6">
66 - <el-row class="commitTime">
67 - <el-col :span="11"
68 - ><Formitem
69 - label="提交時間(從)"
70 - prop="commitTimeFrom"
71 - style="margin-bottom: 0px"
72 - >
73 - <el-date-picker
74 - class="unIconDatePicker"
75 - v-model="sreachFormData.commitTimeFrom"
76 - format="yyyy-MM-dd"
77 - value-format="yyyy-MM-dd"
78 - type="date"
79 - id="inputInner--commitTimeFrom"
80 - placeholder=""
81 - prefix-icon="none"
82 - @change="checkDate1"
83 - ></el-date-picker> </Formitem
84 - ></el-col>
85 - <el-col
86 - :span="2"
87 - style="line-height: 50px; font-size: 20px; font-weight: 700"
88 - >-</el-col
89 - >
90 - <el-col :span="11">
91 - <Formitem
92 - label="提交時間(至)"
93 - prop="commitTimeTo"
94 - style="margin-bottom: 0px"
95 - >
96 - <el-date-picker
97 - class="unIconDatePicker"
98 - v-model="sreachFormData.commitTimeTo"
99 - format="yyyy-MM-dd"
100 - value-format="yyyy-MM-dd"
101 - type="date"
102 - id="inputInner--commitTimeTo"
103 - placeholder=""
104 - prefix-icon="none"
105 - @change="checkDate1"
106 - ></el-date-picker> </Formitem
107 - ></el-col>
108 - </el-row>
109 - </el-col>
110 - <el-col :span="2" class="search-btn">
111 - <el-button @click="searchTable">
112 - <!-- <img src="../../assets/images/select.svg" alt="" /> -->
113 - </el-button>
114 - </el-col>
115 - </el-row>
116 - </el-form>
117 - <span class="textCenter export-btn">
118 - <el-button
119 - class="entrySaveButton"
120 - :loading="exportLoading"
121 - @click="exportBtn()"
122 - >
123 - 導出
124 - </el-button>
125 - </span>
126 - </div>
127 - <el-table
128 - :data="tableData"
129 - style="width: 100%"
130 - :height="tableMaxheight"
131 - :row-class-name="tableRowClassName"
132 - v-loading="tableLoading"
133 - class="queryTable"
134 - @sort-change="handleSortChange"
135 - >
136 - <el-table-column
137 - v-for="(item, index) in tableHeaderList"
138 - :key="index"
139 - :prop="item.prop"
140 - :label="item.label"
141 - :min-width="item.width"
142 - :fixed="item.fixed ? item.fixed : false"
143 - :align="item.align"
144 - :sortable="item.sort"
145 - >
146 - <template slot-scope="scope">
147 - <!-- 操作 -->
148 - <template v-if="item.tem == 'opt'">
149 - <el-dropdown trigger="click">
150 - <span style="cursor: pointer">
151 - 操作
152 - <!-- <img src="../../assets/images/declareOpt.png" alt="" /> -->
153 - </span>
154 - <el-dropdown-menu slot="dropdown">
155 - <el-dropdown-item @click.native="viewDeclare(scope.row)">
156 - 查看
157 - </el-dropdown-item>
158 - <el-dropdown-item @click.native="downloadFiles(scope.row)"
159 - >下載附件</el-dropdown-item
160 - >
161 - </el-dropdown-menu>
162 - </el-dropdown>
163 - </template>
164 - <span v-else>{{ scope.row[item.prop] }}</span>
165 - </template>
166 - </el-table-column>
167 - </el-table>
168 - <el-pagination
169 - @size-change="handleSizeChange"
170 - @current-change="handleCurrentChange"
171 - :current-page="page.curPage"
172 - :page-sizes="[20, 30, 50, 100]"
173 - :page-size="page.pageSize"
174 - layout="total, sizes, prev, pager, next, jumper"
175 - :total="page.total"
176 - >
177 - </el-pagination>
178 - </div>
179 -</template>
180 -
181 -<script>
182 -export default {
183 - name: "",
184 - data() {
185 - return {
186 - sreachFormData: {
187 - deliveryNo: "",
188 - commitTimeFrom: "",
189 - commitTimeTo: "",
190 - deliveryNoList: [],
191 - deliveryCodelist: [],
192 - },
193 - oldSreachFormData: {
194 - deliveryNo: "",
195 - commitTimeFrom: "",
196 - commitTimeTo: "",
197 - deliveryNoList: [],
198 - deliveryCodelist: [],
199 - },
200 - rules: {},
201 - tableData: [],
202 - tableHeaderList: [
203 - {
204 - label: "提單號碼",
205 - prop: "deliveryNo",
206 - width: "",
207 - align: "left",
208 - sort: false,
209 - },
210 - {
211 - label: "報單類別",
212 - prop: "deliveryNo",
213 - width: "",
214 - align: "left",
215 - sort: false,
216 - },
217 - {
218 - label: "提交時間",
219 - prop: "deliveryNo",
220 - width: "",
221 - align: "left",
222 - sort: false,
223 - },
224 - {
225 - label: "文件轉換Tiff",
226 - prop: "deliveryNo",
227 - width: "",
228 - align: "left",
229 - sort: false,
230 - },
231 - {
232 - label: "傳送狀態/時間",
233 - prop: "deliveryNo",
234 - width: "",
235 - align: "left",
236 - sort: false,
237 - },
238 - {
239 - label: "貨物輸出統一編號",
240 - prop: "deliveryNo",
241 - width: "",
242 - align: "left",
243 - sort: false,
244 - },
245 - {
246 - label: "聯絡人 ",
247 - prop: "deliveryNo",
248 - width: "",
249 - align: "left",
250 - sort: false,
251 - },
252 - {
253 - label: "聯絡人e-mail ",
254 - prop: "deliveryNo",
255 - width: "",
256 - align: "left",
257 - sort: false,
258 - },
259 - {
260 - label: "操作",
261 - prop: "opt",
262 - width: "",
263 - align: "center",
264 - tem: "opt",
265 - sort: false,
266 - },
267 - ],
268 - page: {
269 - curPage: 1,
270 - pageSize: 20,
271 - total: 0, //数据总和
272 - },
273 - tableLoading: false,
274 - exportLoading: false,
275 - deliveryNoRows: 1,
276 - deliveryCodeRows: 1,
277 - };
278 - },
279 - computed: {
280 - tableMaxheight() {
281 - return window.innerHeight - 300;
282 - },
283 - },
284 - methods: {
285 - searchTable() {},
286 - //查看
287 - viewDeclare() {},
288 - //下载附件
289 - downloadFiles(data) {},
290 - //导出
291 - exportBtn() {},
292 - // 改变偶数行背景色
293 - tableRowClassName({ row, rowIndex }) {
294 - if ((rowIndex + 1) % 2 === 0) {
295 - return "bgc-row";
296 - }
297 - return "";
298 - },
299 - checkDate1() {},
300 - // column 当前列数据 prop 当前排序的字段 order 排序规则
301 - handleSortChange({ column, prop, order }) {
302 - if (prop == "operStatusAndTime1") {
303 - this.sortOrder = order ? (order == "descending" ? 2 : 1) : 0;
304 - } else if (prop == "delStatus") {
305 - this.sortOrder = order ? (order == "descending" ? 4 : 3) : 0;
306 - }
307 - this.page.curPage = 1;
308 - let paramsData = {
309 - ...this.oldSreachFormData,
310 - page: this.page.curPage,
311 - query: this.defQuery,
312 - size: this.page.pageSize,
313 - sort: this.sortOrder,
314 - };
315 -
316 - this.sreachData(paramsData);
317 - },
318 - // 改变页面条数
319 - handleSizeChange(val) {
320 - this.page.pageSize = val;
321 - this.sreachData(null);
322 - },
323 - // 切换页码
324 - handleCurrentChange(val) {
325 - this.page.curPage = val;
326 - this.sreachData(null);
327 - },
328 - //文本域切换
329 - consignmentCodeFocus(val) {
330 - if (val.target.name == "deliveryNo") {
331 - this.deliveryNoRows = 5;
332 - } else if (val.target.name == "") {
333 - this.deliveryCodeRows = 5;
334 - }
335 - this.$nextTick(() => {
336 - let inputInner = document.querySelector(
337 - "#inputInner--" + val.target.name
338 - ).parentNode;
339 - let inputOuter = document.querySelector(
340 - "#inputOuter--" + val.target.name
341 - );
342 - inputInner.classList.add("consignmentCode-textarea");
343 - document.querySelector("#inputInner--" + val.target.name).focus();
344 - setTimeout(() => {
345 - inputOuter.classList.add("active");
346 - inputOuter.classList.add("activeBorder");
347 - }, 100);
348 - });
349 - },
350 - consignmentCodeBlur(val) {
351 - let data = null;
352 - if (val.target.name == "deliveryNo") {
353 - this.deliveryNoRows = 1;
354 - } else if (val.target.name == "") {
355 - this.deliveryCodeRows = 1;
356 - }
357 - this.$nextTick(() => {
358 - let inputInner = document.querySelector(
359 - "#inputInner--" + val.target.name
360 - ).parentNode;
361 - inputInner.classList.remove("consignmentCode-textarea");
362 - });
363 - data = val.target.value.split("\n");
364 - let arr = [];
365 - data.forEach((item) => {
366 - if (item != "" && item != null) {
367 - arr.push(item);
368 - }
369 - });
370 - if (val.target.name == "deliveryNo") {
371 - this.sreachFormData.deliveryNoList = arr;
372 - } else if (val.target.name == "") {
373 - this.sreachFormData.deliveryCodelist = arr;
374 - }
375 - },
376 - },
377 -};
378 -</script>
379 -
380 -<style lang="scss" scoped>
381 -@import "@/assets/styles/variables.scss";
382 -.search-wrap {
383 - height: calc(100% - 28px);
384 - margin: 12px 12px 16px 16px;
385 - background-color: #fff;
386 - padding: 20px;
387 -
388 - .search-box {
389 - margin-bottom: 12px;
390 - position: relative;
391 -
392 - .export-btn {
393 - position: absolute;
394 - right: 12px;
395 - top: 0;
396 - }
397 - }
398 -
399 - ::v-deep .el-table .bgc-row {
400 - background: #f2f2f2;
401 - }
402 -
403 - .el-pagination {
404 - text-align: right;
405 - margin-top: 10px;
406 -
407 - ::v-deep .el-input.is-focus .el-input__inner {
408 - border: 1px solid $fedexColor;
409 - }
410 -
411 - ::v-deep .el-input .el-input__inner:hover {
412 - border: 1px solid $fedexColor;
413 - }
414 -
415 - ::v-deep .el-input__inner:focus {
416 - border: 1px solid $fedexColor;
417 - }
418 -
419 - ::v-deep .el-pager li.active {
420 - color: $fedexColor;
421 - }
422 -
423 - ::v-deep .el-pager li:hover {
424 - color: $fedexColor;
425 - }
426 - }
427 -
428 - // .el-table__body-wrapper {
429 - // overflow: auto;
430 - // }
431 -}
432 -
433 -.search-btn {
434 - ::v-deep .el-button {
435 - border: 1px solid #cccccc;
436 - height: 50px;
437 - width: 90px;
438 -
439 - .el-icon-search {
440 - color: #cccccc;
441 - font-size: 20px;
442 - }
443 - }
444 -
445 - .el-button:hover,
446 - .el-button:focus {
447 - background: #f3f1f1;
448 - }
449 -}
450 -
451 -.texttareaTip {
452 - position: absolute;
453 - top: 50%;
454 - right: 20px;
455 - transform: translate(0, -50%);
456 - z-index: 10;
457 -}
458 -
459 -.consignmentCode-textarea {
460 - position: absolute;
461 - top: 25px;
462 - left: 1px;
463 - z-index: 10;
464 - min-height: 170px !important;
465 - border: 2px solid $fedexBorder;
466 - background-color: $fedexTablebackgroundColor;
467 - transition: all 0.2s ease;
468 -}
469 -
470 -.queryTable {
471 - ::v-deep .cell {
472 - text-align: center;
473 - white-space: pre-line;
474 - }
475 -}
476 -
477 -.commitTime {
478 - background-color: $formItemBackgroundColor;
479 -}
480 -</style>
1 -<template>
2 - <el-dialog
3 - title="下載附件"
4 - :visible.sync="dialogVisible"
5 - width="50%"
6 - :show-close="true"
7 - class="detail-dialog"
8 - >
9 - <Table
10 - class="fedexDetialTable mt20"
11 - :data="tableData"
12 - :headerData="headerData"
13 - :selection="false"
14 - height="400px"
15 - :order="false"
16 - :border="false"
17 - :pagination="false"
18 - :selectFixed="false"
19 - :pageSizes="[20, 30, 50, 100]"
20 - @selectionChange="handleSelectionChange"
21 - :loading="tableLodaing"
22 - >
23 - <template v-slot:name="scope">
24 - <p> {{ scope.row.name }}{{ scope.row.type }}</p>
25 - </template>
26 - <template v-slot:down="scope">
27 - <el-button
28 - class="plain"
29 - size="mini"
30 - @click.native.stop="downLoadOneFile(scope.row)"
31 - :loading="scope.row.downloadLoading"
32 - >下載</el-button
33 - >
34 - </template>
35 - </Table>
36 - <div class="width-btn-box">
37 - <el-button
38 - class="entrySaveButton entrySaveButton-background"
39 - @click="batchDownloadBtn"
40 - style="margin-right: 30px;width: 110px;"
41 - :loading="allDownload"
42 - :disabled="this.tableData<=0"
43 - >
44 - 下載全部
45 - </el-button>
46 - <el-button class="entrySaveButton" style="width: 110px;" @click="closeDialog">取消</el-button>
47 - </div>
48 - </el-dialog>
49 -</template>
50 -<script>
51 -import { getFindSysByDeclareId } from "@/api/fillForm.js";
52 -import { downLoadZip,downLoadFile } from "@/utils/zipdownload";
53 -export default {
54 - components: {},
55 - props: {},
56 - data() {
57 - return {
58 - tableLodaing:false,
59 - allDownload:false,
60 - dialogVisible: false,
61 - declareId: null,
62 - tableData: [],
63 - headerData: [
64 - {
65 - name: "附件名稱",
66 - value: "name",
67 - width: "",
68 - align: "left",
69 - slot: true,
70 - },
71 - {
72 - name: "操作",
73 - value: "down",
74 - width: "100",
75 - align: "center",
76 - slot: true,
77 - },
78 - ],
79 - selectCheckList: [],
80 - customsFileId: null,
81 - };
82 - },
83 - methods: {
84 - // 打开弹窗
85 - openDialog(row) {
86 - this.dialogVisible = true;
87 - this.declareId = row.id;
88 - this.customsFileId = row.customsFileId;
89 - this.getUploadFileList();
90 - },
91 - // 关闭弹窗
92 - closeDialog() {
93 - this.dialogVisible = false;
94 - },
95 - // 选择下载的附件
96 - handleSelectionChange(val) {
97 - this.selectCheckList = val;
98 - },
99 - // 下载
100 - downLoadOneFile(fileRow) {
101 - fileRow.downloadLoading=true;
102 - downLoadFile(
103 - "/icleartw/cusFile/downLoadFile",
104 - fileRow.id,
105 - fileRow.name+ fileRow.type
106 - ).then(() => {
107 -
108 - this.$message.success("下載成功");
109 - this.exportLoading = false;
110 - })
111 - .catch(() => {
112 - this.exportLoading = false;
113 - }).finally(()=>{
114 - fileRow.downloadLoading = false;
115 - })
116 -
117 - },
118 - // 批量下载
119 - batchDownloadBtn() {
120 - this.allDownload=true;
121 - downLoadZip(
122 - "/icleartw/cusFile/downLoadCusFileAll",
123 - this.customsFileId,
124 - "附件"
125 - )
126 - .then(() => {
127 - this.allDownload = false;
128 - this.exportLoading = false;
129 - })
130 - .catch(() => {
131 - this.exportLoading = false;
132 - });
133 - },
134 - // 获取文件列表
135 - getUploadFileList() {
136 - this.tableData=[];
137 - this.tableLodaing=true;
138 - getFindSysByDeclareId(this.declareId).then((res) => {
139 - if (res.code == 200) {
140 - this.tableData = res.data;
141 - if (this.tableData != null) {
142 - this.tableData = this.tableData.map(item => {
143 - return {
144 - ...item,
145 - downloadLoading: false
146 - };
147 - });
148 - }
149 - }else{
150 - this.$message.error(res.msg);
151 - }
152 - }).catch((res)=>{
153 - this.$message.error(res.msg);
154 - }).finally(()=>{
155 - this.tableLodaing = false;
156 - })
157 - },
158 - },
159 -};
160 -</script>
161 -
162 -<style lang="scss" scoped>
163 -.detail-dialog {
164 - .title-box {
165 - font-size: 16px;
166 - font-weight: 600;
167 - // line-height: 22px;
168 - color: #000000;
169 - display: flex;
170 - justify-content: space-between;
171 - .el-button {
172 - padding: 0;
173 - font-size: 12px;
174 - }
175 - }
176 - .content {
177 - color: #333;
178 - font-size: 12px;
179 - .small-title {
180 - margin: 12px 0 4px 0;
181 - font-size: 14px;
182 - }
183 - .info-box {
184 - width: 100%;
185 - height: 50px;
186 - line-height: 17px;
187 - background: #f2f2f2;
188 - padding: 8px;
189 - margin-bottom: 4px;
190 - }
191 - }
192 - .download {
193 - .el-button {
194 - padding: 0;
195 - font-size: 12px;
196 - }
197 - img {
198 - vertical-align: -4px;
199 - }
200 - }
201 - ::v-deep .el-dialog {
202 - padding: 20px 100px;
203 - }
204 - ::v-deep .el-dialog__header {
205 - text-align: center;
206 - }
207 - .width-btn-box {
208 - width: 100%;
209 - text-align: center;
210 - margin-top: 16px;
211 - .el-button {
212 - width: 100px;
213 - }
214 - }
215 - ::v-deep .el-table__body-wrapper .el-table__body tbody tr {
216 - height: 50px;
217 - }
218 -}
219 -</style>
1 -<template>
2 - <div class="search-wrap">
3 - <div class="search-box">
4 - <el-form class="fedexFormStyle queryTextarea-box" ref="sreachForm" :model="sreachFormData" label-position="top"
5 - size="small" :rules="rules">
6 - <el-row :gutter="6">
7 - <el-col :span="5">
8 - <Formitem label="提單號碼（支持多個提單號查詢）" prop="deliveryNo">
9 - <!-- <el-input
10 - type="text"
11 - id="inputInner--deliveryNo"
12 - v-model="sreachFormData.deliveryNo"
13 - clearable
14 - >
15 - </el-input> -->
16 - <el-input type="textarea" class="inputShadow" id="inputInner--deliveryNo" resize="none"
17 - :rows="consignmentCodeRows" v-model="sreachFormData.deliveryNo" clearable placeholder=""
18 - @focus="consignmentCodeFocus" @blur="consignmentCodeBlur"></el-input>
19 - <el-badge v-if="consignmentCodeRows == 1 &&
20 - sreachFormData.consignmentCode.length > 1
21 - " type="info" :value="`+${sreachFormData.consignmentCode.length}`"
22 - class="item texttareaTip"></el-badge>
23 - </Formitem>
24 - </el-col>
25 - <el-col :span="4">
26 - <Formitem label="提交時間(從)" prop="commitTimeFrom">
27 - <el-date-picker v-model="sreachFormData.commitTimeFrom" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
28 - type="date" id="inputInner--commitTimeFrom" placeholder="" prefix-icon="none"
29 - @change="checkDate1"></el-date-picker>
30 - <!-- :picker-options="startPickerOptions"> -->
31 - <!-- </el-date-picker> -->
32 - </Formitem>
33 - </el-col>
34 - <el-col :span="4">
35 - <Formitem label="提交時間(至)" prop="commitTimeTo">
36 - <el-date-picker v-model="sreachFormData.commitTimeTo" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
37 - type="date" id="inputInner--commitTimeTo" placeholder="" prefix-icon="none"
38 - @change="checkDate2"></el-date-picker>
39 - <!-- :picker-options="endPickerOptions">
40 - </el-date-picker> -->
41 - </Formitem>
42 - </el-col>
43 - <el-col :span="2" class="search-btn">
44 - <el-button @click="searchTable">
45 - <img src="../../assets/images/select.svg" alt="" />
46 - </el-button>
47 - </el-col>
48 - </el-row>
49 - </el-form>
50 - <span class="textCenter export-btn">
51 - <el-button class="entrySaveButton" :loading="exportLoading" @click="exportBtn()">
52 - 導出
53 - </el-button>
54 - </span>
55 - </div>
56 - <el-table :data="tableData" style="width: 100%" :height="tableMaxheight" :row-class-name="tableRowClassName"
57 - v-loading="tableLoading" class="queryTable" @sort-change="handleSortChange">
58 - <el-table-column v-for="(item, index) in tableHeaderList" :key="index" :prop="item.prop" :label="item.label"
59 - :min-width="item.width" :fixed="item.fixed ? item.fixed : false" :align="item.align" :sortable="item.sort">
60 -
61 - <template slot-scope="scope">
62 - <template v-if="item.tem == 'operStatusAndTime1'">
63 - <div>
64 - {{ scope.row.operStatus }}
65 - </div>
66 - <div>
67 - {{ scope.row.commitTime }}
68 - </div>
69 - </template>
70 - <!-- 传送时间 -->
71 - <template v-if="item.tem == 'delStatus'">
72 - <div class="query_page_popover">
73 - <el-popover v-if="scope.row.failedMsg" trigger="hover" placement="bottom" :open-delay="1000">
74 - <p>{{ scope.row.failedMsg }}</p>
75 - <div slot="reference" class="name-wrapper">
76 - {{ scope.row.delStatusAndTime }}
77 - </div>
78 - </el-popover>
79 - <span v-else>{{ scope.row.delStatusAndTime }}</span>
80 - </div>
81 -
82 - </template>
83 - <!-- 操作 -->
84 - <template v-if="item.tem == 'opt'">
85 - <el-dropdown trigger="click">
86 - <span style="cursor: pointer">
87 - <img src="../../assets/images/declareOpt.png" alt="" />
88 - </span>
89 - <el-dropdown-menu slot="dropdown">
90 - <el-dropdown-item @click.native="viewDeclare(scope.row)">
91 - 查看
92 - </el-dropdown-item>
93 - <el-dropdown-item v-if="scope.row.operStatus == '已提交'" @click.native="reEditDeclare(scope.row)">
94 - 重新编辑
95 - </el-dropdown-item>
96 -
97 - <el-dropdown-item v-else @click.native="editDeclare(scope.row)">
98 - 編輯
99 - </el-dropdown-item>
100 -
101 - <el-dropdown-item :disabled="scope.row.operStatus == '已提交'" @click.native="deleteDeclare(scope.row)">
102 - 刪除
103 - </el-dropdown-item>
104 - <el-dropdown-item @click.native="downloadFiles(scope.row)">下載附件</el-dropdown-item>
105 - </el-dropdown-menu>
106 - </el-dropdown>
107 - </template>
108 - <span v-else>{{ scope.row[item.prop] }}</span>
109 - </template>
110 - </el-table-column>
111 - </el-table>
112 - <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.curPage"
113 - :page-sizes="[20, 30, 50, 100]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
114 - :total="page.total">
115 - </el-pagination>
116 - <detail-dialog ref="detailDialogRef"></detail-dialog>
117 - <detail-drawer ref="detailDrawerRef" :pageIndex="pageIndex" @viewPdf="openViewPdf"></detail-drawer>
118 - </div>
119 -</template>
120 -
121 -<script>
122 -import { getTableFindAll, declareDeleteById, reedit } from "@/api/declareTable.js";
123 -import detailDrawer from "../declarationInput/detailDrawer.vue";
124 -import detailDialog from "./detailDialog.vue";
125 -import { tableHeaderKeys } from "./tableHeaderKey.js";
126 -import { downLoadXlsx, downLoadViewPdf } from "@/utils/zipdownload";
127 -export default {
128 - name: "declareQuery",
129 - components: {
130 - detailDialog,
131 - detailDrawer,
132 - },
133 -
134 - data() {
135 - return {
136 - pageIndex: "query",
137 - tableData: [], //运单数据
138 - tableHeaderList: tableHeaderKeys,
139 - sreachFormData: {
140 - deliveryNo: "",
141 - commitTimeFrom: "",
142 - commitTimeTo: "",
143 - consignmentCode: [],
144 - },
145 - oldSreachFormData: {
146 - deliveryNo: "",
147 - commitTimeFrom: "",
148 - commitTimeTo: "",
149 - consignmentCode: [],
150 - },
151 - startDate: new Date() - 3,
152 - endDate: new Date,
153 - page: {
154 - curPage: 1,
155 - pageSize: 20,
156 - total: 0, //数据总和
157 - },
158 - tableSelect: true,
159 - tableLoading: false, //表格loading
160 - exportLoading: false,
161 - defQuery: 0,
162 - consignmentCodeRows: 1,
163 - startPickerOptions: {
164 - disabledDate: (time) => {
165 - if (
166 - this.sreachFormData.commitTimeTo != "" &&
167 - this.sreachFormData.commitTimeTo != null
168 - ) {
169 - let commitTimeTo = new Date(
170 - this.sreachFormData.commitTimeTo
171 - ).getTime();
172 - return time.getTime() > commitTimeTo;
173 - } else {
174 - return !time.getTime();
175 - }
176 - },
177 - },
178 - endPickerOptions: {
179 - disabledDate: (time) => {
180 - if (
181 - this.sreachFormData.commitTimeFrom != "" &&
182 - this.sreachFormData.commitTimeFrom != null
183 - ) {
184 - let commitTimeFrom = new Date(
185 - this.sreachFormData.commitTimeFrom
186 - ).getTime();
187 - return time.getTime() < commitTimeFrom - 24 * 60 * 60 * 1000;
188 - } else {
189 - return !time.getTime();
190 - }
191 - },
192 - },
193 - sortOrder: 0, //查询排序 默认根据操作状态呢降序排序
194 - };
195 - },
196 - computed: {
197 - tableMaxheight() {
198 - return window.innerHeight - 300;
199 - },
200 - getOldDate() {
201 - let oldDate = new Date(new Date().getTime() - 3600 * 1000 * 24 * 2);
202 - return oldDate.getFullYear() + '-' + (oldDate.getMonth() + 1).toString().padStart(2, 0) + '-' + (oldDate.getDate()).toString().padStart(2, 0);
203 - }, getNewDate() {
204 - let nowDate = new Date();
205 - return nowDate.getFullYear() + '-' + (nowDate.getMonth() + 1).toString().padStart(2, 0) + '-' + (nowDate.getDate()).toString().padStart(2, 0);
206 - },
207 - rules() {
208 - let rules = {
209 - commitTimeFrom: [
210 - {
211 - validator: (rule, value, callback) => {
212 -
213 - if (!value) {
214 - this.$refs.sreachForm.clearValidate(['commitTimeTo']);
215 - this.tableSelect = true;
216 - }
217 - // new Date(year, month, day, hour, minute, second, millisecond);
218 - if (value && this.sreachFormData.commitTimeTo) {
219 - if (new Date(value + " 00:00:00").getTime() > new Date(this.sreachFormData.commitTimeTo + " 00:00:00").getTime()) {
220 - callback("開始時間不能晚於截止時間")
221 - this.tableSelect = false;
222 - } else {
223 - callback()
224 - this.tableSelect = true;
225 - }
226 - }
227 - },
228 - trigger: "change",
229 - },
230 - ],
231 - commitTimeTo: [
232 - {
233 - validator: (rule, value, callback) => {
234 - if (!value) {
235 - this.$refs.sreachForm.clearValidate(['commitTimeFrom']);
236 - this.tableSelect = true;
237 - }
238 -
239 - if (value && this.sreachFormData.commitTimeFrom) {
240 - if (new Date(value + " 00:00:00").getTime() < new Date(this.sreachFormData.commitTimeFrom + " 00:00:00").getTime()) {
241 - callback("截止時間不能早於開始時間")
242 - this.tableSelect = false;
243 - } else {
244 - callback()
245 - this.tableSelect = true;
246 - }
247 - }
248 - },
249 - trigger: "change",
250 - },
251 - ]
252 - }
253 - return rules;
254 - },
255 - },
256 - created() { },
257 - mounted() {
258 - // let oldDate = new Date(new Date().getTime() - 3600 * 1000 * 24 * 2);
259 - // let nowDate = new Date();
260 - this.sreachFormData.commitTimeFrom = this.getOldDate;
261 - this.sreachFormData.commitTimeTo = this.getNewDate;
262 - // this.$set(this.sreachFormData,'commitTimeFrom', );
263 - // this.$set(this.sreachFormData,'commitTimeTo', nowDate.getFullYear() + '-' + (nowDate.getMonth()+1) + '-' + (nowDate.getDate()));
264 - this.sreachData(null);
265 - },
266 - methods: {
267 - // 查询
268 - sreachData(paramsData) {
269 -
270 - // this.$refs["sreachForm"].validate((valid, object) => {
271 - if (this.tableSelect) {
272 - if (!paramsData) {
273 - paramsData = {
274 - ...this.sreachFormData,
275 - deliveryNo: this.sreachFormData.consignmentCode.join(";"),
276 - page: this.page.curPage,
277 - query: this.defQuery,
278 - size: this.page.pageSize,
279 - sort: this.sortOrder,
280 - };
281 - this.oldSreachFormData={
282 - ...this.sreachFormData,
283 - };
284 - }
285 -
286 - if (paramsData.deliveryNo.split(';').length > 1000) {
287 - this.$alert('單次最多可查詢1000個提單號碼', '提示', {
288 - confirmButtonText: '確定',
289 - type: 'warning'
290 -
291 - });
292 - return;
293 - } else {
294 - this.tableLoading = true;
295 - delete paramsData.consignmentCode;
296 - getTableFindAll(paramsData)
297 - .then((res) => {
298 - if (res.code == 200) {
299 - this.tableData = res.data.list;
300 - this.page.total = res.data.total;
301 -
302 - } else {
303 - this.msgWarning(res.msg);
304 - }
305 - })
306 - .finally(() => {
307 - this.tableLoading = false;
308 - });
309 - }
310 - }
311 - // });
312 -
313 -
314 -
315 - },
316 - checkDate1() {
317 - this.$refs.sreachForm.validateField('commitTimeFrom', valid => {
318 - if (!valid) {
319 - this.$refs.sreachForm.validateField('commitTimeTo');
320 - }
321 - });
322 -
323 - },
324 - checkDate2() {
325 - this.$refs.sreachForm.validateField('commitTimeTo', valid => {
326 - if (!valid) {
327 - this.$refs.sreachForm.validateField('commitTimeFrom');
328 - }
329 - });
330 -
331 - },
332 - // column 当前列数据 prop 当前排序的字段 order 排序规则
333 - handleSortChange({ column, prop, order }) {
334 - if (prop == "operStatusAndTime1") {
335 -
336 - this.sortOrder = order ? order == 'descending' ? 2 : 1 : 0;
337 - } else if (prop == "delStatus") {
338 - this.sortOrder = order ? order == 'descending' ? 4 : 3 : 0;
339 - }
340 - this.page.curPage=1;
341 - let paramsData = {
342 - ...this.oldSreachFormData,
343 - page: this.page.curPage,
344 - query: this.defQuery,
345 - size: this.page.pageSize,
346 - sort: this.sortOrder,
347 - };
348 -
349 - this.sreachData(paramsData);
350 -
351 - },
352 - // 查询按钮
353 - searchTable() {
354 - this.page.curPage = 1;
355 - this.defQuery = "";
356 - this.sreachData(null);
357 - },
358 - // 改变偶数行背景色
359 - tableRowClassName({ row, rowIndex }) {
360 - if ((rowIndex + 1) % 2 === 0) {
361 - return "bgc-row";
362 - }
363 - return "";
364 - },
365 - //操作
366 - deleteDeclare(row) {
367 - this.$confirm('是否確認刪除', '提示', {
368 - confirmButtonText: '確定',
369 - cancelButtonText: '取消',
370 - type: 'warning'
371 - }).then(() => {
372 - declareDeleteById(row.id).then((res) => {
373 - if (res.code == 200) {
374 - this.$message({
375 - type: 'success',
376 - message: '刪除成功!'
377 - });
378 - this.sreachData(null);
379 - } else {
380 - this.msgWarning(res.msg);
381 - }
382 - });
383 - }).catch(() => {
384 - // this.$message({
385 - // type: 'info',
386 - // message: '刪除失敗'
387 - // });
388 - })
389 -
390 - },
391 - // 改变页面条数
392 - handleSizeChange(val) {
393 - this.page.pageSize = val;
394 - this.sreachData(null);
395 - },
396 - // 切换页码
397 - handleCurrentChange(val) {
398 - this.page.curPage = val;
399 - this.sreachData(null);
400 - },
401 - // 导出
402 - exportBtn() {
403 - let paramsData = {
404 - ...this.oldSreachFormData,
405 - query: this.defQuery,
406 - sort: this.sortOrder,
407 - };
408 - this.exportLoading = true;
409 - downLoadXlsx("/icleartw/declare/export", paramsData, "提單表")
410 - .then(() => {
411 - this.$message.success("導出成功");
412 - this.exportLoading = false;
413 - })
414 - .catch(() => {
415 - this.exportLoading = false;
416 - });
417 - },
418 - // 查看
419 - viewDeclare(row) {
420 - this.$refs.detailDrawerRef.openDrawer(row, "table");
421 - },
422 - // 下载附件
423 - downloadFiles(row) {
424 - this.$refs.detailDialogRef.openDialog(row);
425 - },
426 - // 编辑
427 - editDeclare(row) {
428 - this.$router
429 - .push({
430 - name: "declarationInput",
431 - params: {
432 - step: JSON.stringify(row.saveStep),
433 - id: JSON.stringify(row.id),
434 - },
435 - })
436 - .catch(() => { });
437 - },
438 - //重新编辑
439 - reEditDeclare(row) {
440 - this.$store.dispatch('AppLoading', true);
441 - reedit(row.id).then((res) => {
442 - if (res.code = 200) {
443 - this.$router
444 - .push({
445 - name: "declarationInput",
446 - params: {
447 - step: 1,
448 - id: JSON.stringify(res.data.id),
449 - },
450 - })
451 - .catch(() => { });
452 - } else {
453 - $message.error(res.msg);
454 - }
455 - }).catch(() => { }).finally(() => {
456 - this.$store.dispatch('AppLoading', false);
457 - })
458 -
459 - },
460 - //文本域切换
461 - consignmentCodeFocus() {
462 - this.consignmentCodeRows = 5;
463 - this.$nextTick(() => {
464 - let inputInner = document.querySelector(
465 - "#inputInner--deliveryNo"
466 - ).parentNode;
467 - let inputOuter = document.querySelector("#inputOuter--deliveryNo");
468 - inputInner.classList.add("consignmentCode-textarea");
469 - document.querySelector("#inputInner--deliveryNo").focus();
470 - setTimeout(() => {
471 - inputOuter.classList.add("active");
472 - inputOuter.classList.add("activeBorder");
473 - }, 100);
474 - });
475 - },
476 - consignmentCodeBlur(val) {
477 - this.consignmentCodeRows = 1;
478 - this.$nextTick(() => {
479 - let inputInner = document.querySelector(
480 - "#inputInner--deliveryNo"
481 - ).parentNode;
482 - inputInner.classList.remove("consignmentCode-textarea");
483 - });
484 - this.sreachFormData.consignmentCode = val.target.value.split("\n");
485 - let arr = []
486 - this.sreachFormData.consignmentCode.forEach(item => {
487 - if (item != '' && item != null) {
488 - arr.push(item)
489 - }
490 - })
491 - this.sreachFormData.consignmentCode = arr
492 - },// 查看pdf
493 - openViewPdf(file) {
494 - file.findLoading = true;
495 - downLoadViewPdf("/icleartw/cusFile/previewFile", { fileId: file.id }, file.name + file.type).then(() => {
496 -
497 - }).finally(() => {
498 - file.findLoading = false;
499 - });
500 - },
501 - },
502 -};
503 -</script>
504 -<style>
505 -.el-dropdown-menu__item.is-disabled {
506 - color: #bbb;
507 -}
508 -</style>
509 -<style lang="scss" scoped>
510 -@import "@/assets/styles/variables.scss";
511 -
512 -.search-wrap {
513 - height: calc(100% - 28px);
514 - margin: 12px 12px 16px 16px;
515 - background-color: #fff;
516 - padding: 20px;
517 -
518 - .search-box {
519 - margin-bottom: 12px;
520 - position: relative;
521 -
522 - .export-btn {
523 - position: absolute;
524 - right: 12px;
525 - top: 0;
526 - }
527 - }
528 -
529 - ::v-deep .el-table .bgc-row {
530 - background: #f2f2f2;
531 - }
532 -
533 - .el-pagination {
534 - text-align: right;
535 - margin-top: 10px;
536 -
537 - ::v-deep .el-input.is-focus .el-input__inner {
538 - border: 1px solid $fedexColor;
539 - }
540 -
541 - ::v-deep .el-input .el-input__inner:hover {
542 - border: 1px solid $fedexColor;
543 - }
544 -
545 - ::v-deep .el-input__inner:focus {
546 - border: 1px solid $fedexColor;
547 - }
548 -
549 - ::v-deep .el-pager li.active {
550 - color: $fedexColor;
551 - }
552 -
553 - ::v-deep .el-pager li:hover {
554 - color: $fedexColor;
555 - }
556 - }
557 -
558 - // .el-table__body-wrapper {
559 - // overflow: auto;
560 - // }
561 -}
562 -
563 -.search-btn {
564 - ::v-deep .el-button {
565 - border: 1px solid #cccccc;
566 - height: 50px;
567 - width: 90px;
568 -
569 - .el-icon-search {
570 - color: #cccccc;
571 - font-size: 20px;
572 - }
573 - }
574 -
575 - .el-button:hover,
576 - .el-button:focus {
577 - background: #f3f1f1;
578 - }
579 -}
580 -
581 -.texttareaTip {
582 - position: absolute;
583 - top: 50%;
584 - right: 20px;
585 - transform: translate(0, -50%);
586 - z-index: 10;
587 -}
588 -
589 -.consignmentCode-textarea {
590 - position: absolute;
591 - top: 25px;
592 - left: 1px;
593 - z-index: 10;
594 - min-height: 170px !important;
595 - border: 2px solid $fedexBorder;
596 - background-color: $fedexTablebackgroundColor;
597 - transition: all 0.2s ease;
598 -
599 -
600 -}
601 -
602 -.queryTable {
603 - ::v-deep .cell {
604 - text-align: center;
605 - white-space: pre-line;
606 - }
607 -
608 -}
609 -
610 -</style>
1 -export const tableHeaderKeys = [
2 - {
3 - label: "提單號碼",
4 - prop: "deliveryNo",
5 - width: 150,
6 - align: "left",
7 - sort: false,
8 - },
9 - {
10 - label: "報單類別",
11 - prop: "customsDeclarationType",
12 - width: 150,
13 - align: "left",
14 - sort: false,
15 - },
16 - {
17 - label: "操作狀態/時間",
18 - prop: "operStatusAndTime1",
19 - width: 150,
20 - align: "left",
21 - tem:"operStatusAndTime1",
22 - sort: "custom",
23 - },
24 - {
25 - label: "傳送狀態/時間",
26 - prop: "delStatus",
27 - width: 150,
28 - align: "left",
29 - tem: "delStatus",
30 - sort:"custom",
31 -
32 - },
33 - {
34 - label: "操作",
35 - prop: "opt",
36 - width: 150,
37 - align: "center",
38 - tem: "opt",
39 - sort: false,
40 - },
41 -];
1 -@import "./variables.scss";
2 -@import "./mixin.scss";
3 -@import "./transition.scss";
4 -@import "./element-ui.scss";
5 -@import "./sidebar.scss";
6 -@import "./btn.scss";
7 -
8 -//fedex样式
9 -.el-loading-spinner .path {
10 - stroke: $fedexColor !important;
11 -}
12 -
13 -// checkbox
14 -.el-checkbox__inner {
15 - width: 1.25rem;
16 - min-width: 1.25rem;
17 - height: 1.25rem;
18 - border: 2px solid $fedexButton;
19 - content: "";
20 - box-sizing: border-box;
21 -}
22 -
23 -.el-checkbox__input.is-indeterminate .el-checkbox__inner {
24 - background-color: #fff;
25 - border-color: $fedexButton !important;
26 - color: $fedexButton !important;
27 -}
28 -
29 -.el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
30 - background-color: $fedexButton !important;
31 - top: 7px;
32 -}
33 -
34 -.el-checkbox__input.is-focus .el-checkbox__inner {
35 - border-color: $fedexButton !important;
36 -}
37 -
38 -.el-checkbox__inner:hover {
39 - border-color: $fedexButton !important;
40 -}
41 -
42 -.is-checked {
43 - .el-checkbox__inner {
44 - border: 2px solid $fedexButton !important;
45 - background-color: transparent !important;
46 - }
47 -
48 - .el-checkbox__inner::after {
49 - border: 2px solid $fedexButton;
50 - border-top: 0;
51 - border-right: 0;
52 - // left: 0.3125rem;
53 - display: block;
54 - position: absolute;
55 - content: " ";
56 - top: 0.2rem;
57 - width: 0.625rem;
58 - height: 0.3125rem;
59 - box-sizing: border-box;
60 - transform: rotate(-45deg) scaleY(1) !important;
61 - }
62 -}
63 -
64 -//radio
65 -.el-radio__input {
66 - .el-radio__inner {
67 - width: 16px;
68 - height: 16px;
69 - border: 2px solid $fedexButton !important;
70 - }
71 -}
72 -
73 -.el-radio__label {
74 - color: #999;
75 - font-size: 12px;
76 -}
77 -
78 -.el-radio__inner::after {
79 - background-color: $fedexButton;
80 -}
81 -
82 -.el-radio__input.is-checked .el-radio__inner::after {
83 - transform: translate(-50%, -50%) scale(2);
84 -}
85 -
86 -.el-radio__input.is-checked .el-radio__inner {
87 - background-color: #fff !important;
88 -}
89 -
90 -.el-radio__input.is-checked+.el-radio__label {
91 - color: $fedexButton !important;
92 -}
93 -
94 -//button
95 -.el-button {
96 - border-radius: 0;
97 - border-color: $fedexButton;
98 - color: $fedexButton;
99 - font-weight: 600;
100 -}
101 -
102 -.el-button:hover,
103 -.el-button:focus,
104 -.el-button.is-plain:hover,
105 -.el-button.is-plain:focus {
106 - background: $fedexButton;
107 - border-color: $fedexButton;
108 - color: #fff;
109 -}
110 -
111 -.el-button--text:hover,
112 -.el-button--text:focus {
113 - background: transparent;
114 - border: none;
115 - color: $fedexButton;
116 -}
117 -
118 -.el-button--primary,
119 -.el-button--primary:hover,
120 -.el-button--primary:focus {
121 - color: #fff;
122 - background: transparent;
123 - border-color: $fedexBottonColor;
124 -}
125 -
126 -.el-button-noHover:hover {
127 - color: $fedexButton !important;
128 - background-color: rgba(0, 122, 183, 0.1) !important;
129 -}
130 -
131 -.is-circle {
132 - border-radius: 20px !important;
133 - padding: 7px 12px !important;
134 -}
135 -
136 -.el-button--text {
137 - color: $fedexButton !important;
138 - font-weight: 600 !important;
139 - border: none;
140 -}
141 -
142 -.entrySave {
143 - // margin-top: 64px;
144 - text-align: center;
145 -
146 - .el-button {
147 - width: 112px;
148 - height: 56px;
149 - font-size: 1.1875rem;
150 - font-weight: 700;
151 - }
152 -
153 - .saveTip {
154 - font-size: 16px;
155 - font-weight: 100;
156 - color: #000000;
157 - margin-top: 16px;
158 - }
159 -}
160 -
161 -.entrySaveButton {
162 - background-color: transparent;
163 - border-color: $fedexBottonColor !important;
164 - border-width: 2px;
165 - color: $fedexBottonColor;
166 -}
167 -
168 -.entrySaveButton-background {
169 - background-color: $fedexBottonColor !important;
170 - color: #fff !important;
171 -}
172 -
173 -.entrySaveButton:hover,
174 -.entrySaveButton:focus {
175 - color: #fff !important;
176 - background-color: $fedexBottonColor !important;
177 -}
178 -
179 -.entrySaveButton-background:hover,
180 -.entrySaveButton-background:focus {
181 - background-color: rgba(255, 102, 0, 0.7) !important;
182 -}
183 -
184 -.whiteBtn-background {
185 - background-color: #fff !important;
186 - color: $fedexBottonColor !important;
187 - border: 2px solid $fedexBottonColor;
188 -}
189 -
190 -.whiteBtn-background:hover,
191 -.whiteBtn-background:focus {
192 - color: #fff !important;
193 - background-color: $fedexBottonColor !important;
194 -}
195 -
196 -.button-noHover:hover,
197 -.button-noHover:focus {
198 - border-color: $fedexButton !important;
199 - color: $fedexButton !important;
200 - background-color: #fff !important;
201 -}
202 -
203 -.el-button.is-disabled,
204 -.el-button.is-disabled:focus,
205 -.el-button.is-disabled:hover {
206 - // border-color: #ebeef5 !important;
207 - // color: #c0c4cc !important;
208 - // background-color: #fff !important;
209 -}
210 -
211 -//update
212 -.upload-demo {
213 - .el-upload-list {
214 - .el-upload-list__item {
215 - margin: 0px;
216 - line-height: normal;
217 - }
218 - }
219 -}
220 -
221 -//pagination
222 -.el-pagination.is-background .el-pager li:not(.disabled):hover {
223 - color: $fedexColor;
224 -}
225 -
226 -.el-pagination.is-background .el-pager li:not(.disabled).active {
227 - background-color: $fedexColor !important;
228 - color: #fff;
229 -}
230 -
231 -//dialog
232 -.el-dialog {
233 - display: flex;
234 - flex-direction: column;
235 - margin: 0;
236 - position: absolute;
237 - top: 50%;
238 - left: 50%;
239 - transform: translate(-50%, -50%);
240 - max-height: auto;
241 - max-width: 100%;
242 -}
243 -
244 -.el-dialog__title {
245 - font-size: 16px;
246 - font-weight: 400;
247 - color: #333333;
248 -}
249 -
250 -.el-dialog-change {
251 - transform: translate(-50%, -35%) !important;
252 -}
253 -
254 -//form
255 -.el-input,
256 -.el-textarea,
257 -.el-select {
258 -
259 - input,
260 - textarea {
261 - border-radius: 0px !important;
262 - font-family: FedExSansArabic, FedExSans, Arial, sans-serif !important;
263 - }
264 -}
265 -
266 -input,
267 -textarea {
268 - outline: none !important;
269 - border-radius: 0px !important;
270 - font-family: FedExSansArabic, FedExSans, Arial, sans-serif !important;
271 -}
272 -
273 -input:disabled {
274 - color: $formDisabledColor;
275 - cursor: not-allowed;
276 -}
277 -
278 -.inputShadow {
279 - // box-shadow: inset 0 0 0.1rem #f2f2f2;
280 -}
281 -
282 -.el-textarea__inner:focus {
283 - border-color: $fedexBorder;
284 -}
285 -
286 -.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label::before {
287 - content: "";
288 -}
289 -
290 -.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:after {
291 - content: "*";
292 - color: #ff4949;
293 - margin-right: 4px;
294 -}
295 -
296 -.fedexRadiusInput {
297 - input {
298 - border-radius: 50px 0 0 50px !important;
299 - }
300 -
301 - .el-input-group__append {
302 - border-radius: 0 50px 50px 0;
303 - background-color: #fff;
304 - }
305 -}
306 -
307 -.fedexRadiusTowInput {
308 - input {
309 - border-radius: 50px !important;
310 - }
311 -
312 - .el-input-group__append {
313 - border-radius: 50px;
314 - // background-color: #fff;
315 - }
316 -}
317 -
318 -.fedexFormStyle {
319 - // margin-top: 4px;
320 -
321 - .formTitle {
322 - font-size: 14px;
323 - font-weight: 600;
324 - color: #333333;
325 - margin-top: 12px;
326 - margin-bottom: 4px;
327 - }
328 -
329 - .el-form-item {
330 - position: relative;
331 - height: 50px;
332 - background-color: $formItemBackgroundColor;
333 - margin-bottom: 5px;
334 - // padding-top: 3px;
335 -
336 - .el-form-item__label {
337 - position: relative;
338 - font-size: 0.75rem;
339 - font-weight: 700;
340 - color: #333;
341 - height: max-content;
342 - padding: 0 0 0 0.6rem;
343 - line-height: 14px;
344 - /*设置行高，防止因为字体缩放导致元素高度变化*/
345 - transform: translate3d(0, 10px, 0);
346 - /*标题平移至合适位置*/
347 - transition: all 0.2s ease;
348 - cursor: text;
349 - }
350 -
351 - .el-form-item__content {
352 - position: absolute;
353 - width: 100%;
354 - height: 100%;
355 - top: 0;
356 - bottom: 0px;
357 - line-height: normal;
358 -
359 - .el-input,
360 - // .el-select,
361 - .el-date-editor,
362 - .el-range-editor,
363 - .el-checkbox,
364 - .el-autocomplete {
365 - width: 100%;
366 - height: 100%;
367 -
368 - .el-range-input {
369 - padding: 0px;
370 - }
371 -
372 - .el-range-separator {
373 - line-height: 50px;
374 - }
375 -
376 - input {
377 - width: 100%;
378 - height: 100% !important;
379 - border: none !important;
380 - background-color: transparent;
381 - padding-top: 0.775rem;
382 - // padding-right: 1.15rem;
383 - padding-left: calc(0.6rem + 0.1875rem);
384 - font-size: 0.875rem !important;
385 - }
386 - }
387 -
388 -
389 - .el-select {
390 - width: 100%;
391 - // height: 100%;
392 -
393 -
394 -
395 - input {
396 - width: 100%;
397 - height: 100% !important;
398 - border: none !important;
399 - background-color: transparent;
400 - margin-bottom: 4%;
401 - padding-top: 1.15rem;
402 - // padding-right: 1.15rem;
403 - padding-left: calc(0.6rem + 0.1875rem);
404 - font-size: 0.875rem !important;
405 - }
406 - }
407 -
408 - input {
409 - width: 100% !important;
410 - height: 100% !important;
411 - border: none !important;
412 - background-color: transparent;
413 - padding-top: 0.775rem;
414 - // padding-right: 1.15rem;
415 - padding-left: calc(0.6rem + 0.1875rem);
416 - font-size: 0.875rem !important;
417 - }
418 -
419 - .el-textarea {
420 - textarea {
421 - border: none !important;
422 - background-color: transparent;
423 - // margin-top: 1.15rem;
424 - // padding-right: 1.15rem;
425 - padding-left: calc(0.625rem + 0.1875rem);
426 - font-size: 1rem !important;
427 - }
428 - }
429 -
430 - .el-range-editor.el-input__inner {
431 - border: none;
432 - }
433 - }
434 -
435 - .formError {
436 - height: max-content;
437 - line-height: 20px;
438 - color: $fedexError;
439 - font-size: 0.75rem;
440 - padding: 0 0.9375rem;
441 - }
442 -
443 - .el-date-editor {
444 - // .el-input__prefix {
445 - // display: none;
446 - // }
447 - }
448 - }
449 -
450 - .formItem-justItem {
451 - .el-form-item__content {
452 - &:first-child {
453 - // border-bottom: 1px solid $fedexBorder;
454 - }
455 -
456 - .el-form-item {
457 - height: 25px !important;
458 - line-height: 25px;
459 - margin-bottom: 0;
460 -
461 - .el-form-item__label {
462 - transform: translate3d(0, -2px, 0);
463 - }
464 -
465 - .el-form-item__content {
466 -
467 - .el-input,
468 - .el-select,
469 - .el-date-editor,
470 - .el-range-editor,
471 - .el-autocomplete {
472 - input {
473 - padding-top: 0px;
474 - }
475 -
476 - .el-input__suffix {
477 - top: 5px;
478 - }
479 - }
480 - }
481 - }
482 - }
483 - }
484 -
485 - .el-form-item:has(input:disabled) {
486 - color: $formDisabledColor !important;
487 -
488 - .el-form-item__label {
489 - color: $formDisabledColor;
490 - }
491 -
492 - .el-form-item__content {
493 - input {
494 - color: $formDisabledColor !important;
495 - }
496 - }
497 - }
498 -
499 - .is-error {
500 - margin-bottom: 40px;
501 - border-left: 3px solid $fedexError;
502 -
503 - .el-form-item__label {
504 - color: $fedexError;
505 - }
506 - }
507 -
508 - .el-form-item:has(.inputFocus) {
509 - .el-form-item__label {
510 - position: relative;
511 - font-size: 0.625rem;
512 - font-weight: 700;
513 - height: max-content;
514 - padding: 0 0 0 0.6rem;
515 - line-height: 14px;
516 - /*设置行高，防止因为字体缩放导致元素高度变化*/
517 - transform: translate3d(0, 1px, 0);
518 - /*标题平移至合适位置*/
519 - transition: all 0.2s ease;
520 - z-index: 99;
521 - }
522 - }
523 -
524 - // .active {
525 -
526 - // .el-form-item__label {
527 - // position: relative;
528 - // font-size: 0.625rem;
529 - // font-weight: 700;
530 - // height: max-content;
531 - // padding: 0 0 0 .6rem;
532 - // line-height: 14px;
533 - // /*设置行高，防止因为字体缩放导致元素高度变化*/
534 - // transform: translate3d(0, 1px, 0);
535 - // /*标题平移至合适位置*/
536 - // transition: all .2s ease;
537 - // z-index: 99;
538 - // }
539 - // }
540 -
541 - .formItem-justItem .el-form-item:has(.inputFocus) {
542 - .el-form-item__label {
543 - display: none;
544 - }
545 - }
546 -
547 - .formItem-justItem:has(.formError) {
548 - margin-bottom: 36px;
549 - }
550 -
551 - .borderFormItemContent {
552 - .el-form-item__content {
553 - top: 10px;
554 - border-left: 2px solid #333;
555 - }
556 - }
557 -
558 - .activeBorder {
559 - border-left: 3px solid $fedexColor;
560 - }
561 -}
562 -
563 -.fedexformSreach {
564 - background-color: #fff;
565 - border-bottom: 1px solid $fedexBorder;
566 -
567 - .el-form-item {
568 - background-color: transparent;
569 - border-right: 1px solid $fedexBorder !important;
570 - margin-bottom: 0px;
571 - line-height: 25px;
572 -
573 - .el-button {
574 - margin-top: 8px;
575 - }
576 - }
577 -
578 - .activeBorder {
579 - border: none;
580 - }
581 -}
582 -
583 -.fedexTableForm {
584 - height: 100%;
585 -
586 - .el-form-item {
587 - .el-form-item__label {
588 - width: 100%;
589 - height: 34px;
590 - line-height: 34px;
591 - font-size: 12px;
592 - font-weight: 600;
593 - color: #333;
594 - background-color: #e3e3e3;
595 - padding-left: 16px;
596 - }
597 -
598 - .el-form-item__content {
599 - width: 100%;
600 - height: 100%;
601 - min-height: 36px;
602 - background-color: #f2f2f2;
603 - margin-top: 2px;
604 -
605 - div {
606 - height: 100%;
607 - // padding: 0 15px;
608 - }
609 -
610 - .el-input,
611 - .el-select {
612 - width: 100%;
613 -
614 - input {
615 - border: none;
616 - background-color: transparent;
617 - }
618 - }
619 - }
620 - }
621 -}
622 -
623 -.backgroundCol {
624 - .el-form-item {
625 - .el-form-item__label {
626 - color: $fedexBottonColor !important;
627 - }
628 - }
629 -}
630 -
631 -//table
632 -.fedexDetialTable {
633 - width: 100%;
634 - height: auto;
635 - position: relative;
636 -
637 - .el-table::before {
638 - height: 0;
639 - }
640 -
641 - .el-table tbody tr:hover>td {
642 - background-color: rgba(0, 122, 183, 0.1) !important;
643 - }
644 -
645 - .el-table__header-wrapper {
646 - width: 100%;
647 -
648 - .el-table__header {
649 - .has-gutter {
650 - tr {
651 - th {
652 - position: relative;
653 - font-size: 12px;
654 - font-weight: 700;
655 - background-color: #fff !important;
656 - border: none;
657 - }
658 - }
659 - }
660 - }
661 - }
662 -
663 - .el-table__body-wrapper {
664 - width: 100%;
665 - height: auto;
666 - min-height: 100px;
667 -
668 - .el-table__body {
669 - tbody {
670 - tr {
671 - width: 100%;
672 - // height: 50px !important;
673 -
674 - &:first-child {
675 - td {
676 - border-top: 1px solid $fedexTableBorderColor;
677 - }
678 - }
679 -
680 - td {
681 - // height: 50px !important;
682 - font-size: 12px;
683 - font-weight: 400 !important;
684 - // background-color: $fedexTablebackgroundColor;
685 - border-right: none;
686 -
687 - .cell {
688 - width: 100% !important;
689 - }
690 -
691 - &:first-child {
692 - border-left: 1px solid $fedexTableBorderColor;
693 - }
694 -
695 - &:last-child {
696 - border-right: 1px solid $fedexTableBorderColor;
697 - }
698 - }
699 -
700 - .el-table__expand-column {
701 - div {
702 - display: none;
703 - }
704 - }
705 - }
706 -
707 - .el-table__row_isError {
708 - td {
709 - // border-color: $fedexError !important;
710 - // border-top: 1px solid $fedexError !important;
711 - // border-bottom: 1px solid $fedexError !important;
712 - background-color: rgba(224, 0, 45, 0.05) !important;
713 - }
714 - }
715 -
716 - .el-table__expanded-cell {
717 - padding: 8px !important;
718 - background-color: #fff !important;
719 - border-top: 1px solid $fedexBorder;
720 - }
721 - }
722 - }
723 - }
724 -}
725 -
726 -.fedexTableBlack {
727 - .el-table__body-wrapper {
728 - .el-table__body {
729 - tbody {
730 - tr {
731 - td {
732 - background-color: $fedexTablebackgroundColor !important;
733 - border-color: $fedexTableBorderColor;
734 - }
735 - }
736 - }
737 - }
738 - }
739 -}
740 -
741 -.fedexSreachTable {
742 - .el-table__body-wrapper {
743 - height: auto;
744 -
745 - .el-table__body {
746 - tbody {
747 - tr {
748 - height: 32px !important;
749 -
750 - td {
751 - height: 32px !important;
752 - font-size: 12px;
753 - font-weight: 400 !important;
754 - }
755 - }
756 - }
757 - }
758 - }
759 -}
760 -
761 -.fedexFormTable {
762 - .el-table__body-wrapper {
763 - .el-table__body {
764 - tbody {
765 - tr {
766 - td {
767 - input {
768 - height: auto;
769 - border: none !important;
770 - background-color: transparent;
771 - padding: 0px !important;
772 - font-size: 12px !important;
773 - line-height: normal;
774 - }
775 - }
776 - }
777 - }
778 - }
779 - }
780 -}
781 -
782 -.tableHeightAuto {
783 - overflow-y: auto;
784 -
785 - .el-table__body-wrapper {
786 - // height: auto !important;
787 - }
788 -}
789 -
790 -//dropdown
791 -.el-dropdown {
792 - .el-button {
793 - // width: 4rem;
794 - }
795 -}
796 -
797 -.el-dropdown-menu {
798 - padding: 0px;
799 -
800 - .el-dropdown-menu__item {
801 - font-size: 12px;
802 - font-weight: 400;
803 - color: #333;
804 - height: 50px;
805 - line-height: 50px;
806 - border-bottom: 1px solid $fedexBorder;
807 - }
808 -
809 - .el-dropdown-menu__item:not(.is-disabled):hover,
810 - .el-dropdown-menu__item:focus {
811 - color: #333;
812 - background-color: $formItemBackgroundColor;
813 - }
814 -}
815 -
816 -//alert
817 -.fedexAlert {
818 -
819 - // position: absolute;
820 - // top: 20px;
821 - // left: 21.8%;
822 - z-index: 10;
823 - width: 100%;
824 - font-size: 14px;
825 - font-weight: 400;
826 - min-height: 80px;
827 -
828 -
829 - // margin: 0 auto;
830 - background-color: #fafafa !important;
831 - color: #000 !important;
832 - box-shadow: #cfcfcf 0px 0px 5px;
833 -
834 - .fedexAlert-list {
835 - display: flex;
836 -
837 - svg {
838 - display: block;
839 - margin-right: 25px;
840 - }
841 - }
842 -
843 - .el-icon-close:before {
844 - color: #333;
845 - font-size: 16px;
846 - }
847 -
848 - .el-icon-user-solid {
849 - position: absolute;
850 - top: 50%;
851 - left: 5%;
852 - transform: translate(-50%, -50%);
853 - font-size: 30px;
854 - }
855 -
856 - .alertText {
857 - margin-left: 80px;
858 - }
859 -
860 -}
861 -
862 -//message
863 -.el-message-box {
864 - .el-message-box__header {
865 - .el-message-box__title {
866 - .el-icon-warning {
867 - color: $fedexBottonColor;
868 - }
869 - }
870 - }
871 -
872 - .el-message-box__btns {
873 - .el-button {}
874 - }
875 -}
876 -
877 -//other
878 -.TemplateSave {
879 - width: 240px;
880 - margin-top: 24px;
881 -
882 - .el-input {
883 - height: 50px !important;
884 -
885 - .el-input__inner {
886 - height: 50px !important;
887 - }
888 -
889 - .el-input-group__append {
890 - background-color: #fff !important;
891 - color: $fedexButton !important;
892 - }
893 - }
894 -}
895 -
896 -.entryInfoTop-item {
897 - width: 320px;
898 - height: 50px;
899 -
900 - .el-form {
901 - height: 60px !important;
902 -
903 - .el-form-item {
904 - background-color: transparent;
905 -
906 - .el-form-item__label {
907 - font-size: 14px;
908 - font-weight: 600;
909 - }
910 -
911 - .el-form-item__content {
912 - border: 1px solid $fedexColor !important;
913 -
914 - .el-input {
915 - input {
916 - border: none !important;
917 - font-size: 20px;
918 - }
919 -
920 - .el-input__suffix {
921 - top: 12px;
922 - font-size: 20px;
923 - color: $fedexButton;
924 - }
925 - }
926 - }
927 - }
928 - }
929 -}
930 -
931 -.el-message-box {
932 - .el-button {
933 - border-color: $fedexBottonColor;
934 - color: $fedexBottonColor;
935 - }
936 -
937 - .el-button--primary {
938 - background-color: $fedexBottonColor;
939 - color: #fff;
940 - }
941 -
942 - .el-button:hover,
943 - .el-button:focus {
944 - background-color: $fedexBottonColor;
945 - color: #fff;
946 - }
947 -
948 - .el-button--primary:hover,
949 - .el-button--primary:focus {
950 - background-color: rgba(255, 102, 0, 0.7);
951 - }
952 -}
953 -
954 -.el-select-dropdown__item.selected {
955 - color: $fedexColor;
956 -}
957 -
958 -.popoverlines {
959 - max-height: 250px;
960 - overflow-y: auto;
961 - overflow-x: hidden;
962 -}
963 -
964 -.el-message--warning .el-message__content {
965 - color: #e6a23c;
966 -}
967 -
968 -.fedex_input_count {
969 - .el-input .el-input__count .el-input__count-inner {
970 - margin-top: 80%;
971 - background-color: rgba($color: #fff, $alpha: 0);
972 - }
973 -}
974 -
975 -.el-input .el-input__count .el-input__count-inner {
976 - background-color: rgba($color: #fff, $alpha: 0);
977 -}
978 -
979 -.el-textarea .el-input__count {
980 - font-weight: 500;
981 -}
982 -
983 -.el-message {
984 - margin-top: -0.2%;
985 -}
986 -
987 -.checkbox-step2 {
988 - .el-checkbox__label {
989 - width: 100% !important;
990 - }
991 -}
992 -
993 -.el-dialog__body {
994 - padding: 30px 0px !important;
995 -}
996 -
997 -.textarea-box {
998 -
999 - .label {
1000 -
1001 - .el-form-item__label {
1002 - padding-left: 0.69rem;
1003 - }
1004 - }
1005 -}
1006 -
1007 -.queryTextarea-box {
1008 - .el-textarea {
1009 - textarea {
1010 - height: max-content;
1011 - margin-top: 1.3rem;
1012 -
1013 - }
1014 - }
1015 -
1016 - .el-form-item {
1017 - height: 55px;
1018 - }
1019 -
1020 - .el-button {
1021 - height: 55px !important;
1022 - }
1023 -}
1024 -
1025 -.unIconDatePicker {
1026 - .el-input__suffix {
1027 - .el-input__suffix-inner {
1028 - .el-icon-date {
1029 - display: none !important;
1030 - }
1031 - }
1032 - }
1033 -}
...\ No newline at end of file ...\ No newline at end of file