Fedex / iClear-Connect-Pre-Clearance

Go to a project
Toggle navigation Toggle navigation pinning
jinhui.wang
b5e0748f 1 parent 6e7abc48

基础配置修改，无用代码删除

Inline Side-by-side
Showing 15 changed files with 29 additions and 8542 deletions
...@@ -81,10 +81,10 @@ export default { ...@@ -81,10 +81,10 @@ export default {
81 // 全局入口页 81 // 全局入口页
82 layout: { 82 layout: {
83 register: "Login", 83 register: "Login",
84 - fedexLogin: "fedex.com user log in", 84 + fedexLogin: "Fedex.com user account login",
85 fedexRegister: "Employee log in", 85 fedexRegister: "Employee log in",
86 onlineDeclare: "線上申報平臺帳號登錄", 86 onlineDeclare: "線上申報平臺帳號登錄",
87 - registerNumber: "註冊線上申報平臺帳號", 87 + registerNumber: "Register a Fedex.com account",
88 userInfo: "用戶信息維護", 88 userInfo: "用戶信息維護",
89 logOut: "log out", 89 logOut: "log out",
90 logOutDia: "Are you sure to log out and exit the system?", 90 logOutDia: "Are you sure to log out and exit the system?",
...@@ -108,7 +108,7 @@ export default { ...@@ -108,7 +108,7 @@ export default {
108 selectTem: "選擇使用者", 108 selectTem: "選擇使用者",
109 insterTem: "新增使用者", 109 insterTem: "新增使用者",
110 updateTem: "修改使用者", 110 updateTem: "修改使用者",
111 - number: "提單號碼", 111 + number: "Waybill inquiry",
112 contacts: "聯絡人", 112 contacts: "聯絡人",
113 exporterNum: "貨物輸出統一編號", 113 exporterNum: "貨物輸出統一編號",
114 email: "聯絡人 e-mail", 114 email: "聯絡人 e-mail",
......
...@@ -72,6 +72,11 @@ ...@@ -72,6 +72,11 @@
72 {{ $t("layout.fedexRegister") }} 72 {{ $t("layout.fedexRegister") }}
73 </span> 73 </span>
74 </el-dropdown-item> 74 </el-dropdown-item>
75 + <el-dropdown-item>
76 + <span>
77 + {{ $t("layout.registerNumber") }}
78 + </span>
79 + </el-dropdown-item>
75 </el-dropdown-menu> 80 </el-dropdown-menu>
76 </el-dropdown> 81 </el-dropdown>
77 <!-- <el-select 82 <!-- <el-select
...@@ -156,7 +161,7 @@ export default { ...@@ -156,7 +161,7 @@ export default {
156 type: "warning", 161 type: "warning",
157 }).then(() => { 162 }).then(() => {
158 this.$store.dispatch("LogOut").then(() => { 163 this.$store.dispatch("LogOut").then(() => {
159 - location.href = "/IcTw"; 164 + location.href = "/ImpPer";
160 }); 165 });
161 }); 166 });
162 }, 167 },
......
1 <template> 1 <template>
2 <div class="view-option"> 2 <div class="view-option">
3 <div class="menu-info"> 3 <div class="menu-info">
4 - <span class="info" v-if="activeRoute.name == 'declarationInput'"> 4 + <span
5 - {{ $t("fillIn.number") }}:&nbsp;{{ deliveryNo || "" }} 5 + class="info"
6 + v-if="
7 + activeRoute.name == 'WaybillInquiry' ||
8 + activeRoute.name == 'UploadDetail'
9 + "
10 + >
11 + {{ $t("fillIn.number") }}
12 + <!-- :&nbsp;{{ deliveryNo || "" }} -->
6 </span> 13 </span>
7 <span class="info" v-else> 14 <span class="info" v-else>
8 {{ activeRoute.meta.title }} 15 {{ activeRoute.meta.title }}
...@@ -54,10 +61,10 @@ export default { ...@@ -54,10 +61,10 @@ export default {
54 font-size: 0.88rem; 61 font-size: 0.88rem;
55 border-bottom: 1px solid $fedexBorder; 62 border-bottom: 1px solid $fedexBorder;
56 background-color: #fff; 63 background-color: #fff;
57 - margin-left: 231px; 64 + margin-left: 230px;
58 65
59 .info { 66 .info {
60 - font-weight: 500; 67 + font-weight: 600;
61 } 68 }
62 } 69 }
63 </style> 70 </style>
......
...@@ -60,20 +60,20 @@ service.interceptors.response.use( ...@@ -60,20 +60,20 @@ service.interceptors.response.use(
60 const msg = errorCode[code] || res.data.msg || errorCode["default"]; 60 const msg = errorCode[code] || res.data.msg || errorCode["default"];
61 if (code === 301) { 61 if (code === 301) {
62 MessageBox.confirm( 62 MessageBox.confirm(
63 - "登錄狀態已過期，您可以繼續留在該頁面，或者重新登錄", 63 + "The login status has expired. You can continue to stay on this page or log in again.",
64 - "系統提示", 64 + "System prompt",
65 { 65 {
66 - confirmButtonText: "重新登錄", 66 + confirmButtonText: "Login again",
67 - cancelButtonText: "取消", 67 + cancelButtonText: "Close",
68 type: "warning", 68 type: "warning",
69 } 69 }
70 ).then(() => { 70 ).then(() => {
71 store.dispatch("FedLogOut").then(() => { 71 store.dispatch("FedLogOut").then(() => {
72 - location.href = "/IcTw"; 72 + location.href = "/ImpPer";
73 }); 73 });
74 }); 74 });
75 } else if (code === 500) { 75 } else if (code === 500) {
76 - MessageBox.alert(msg, "註意", { 76 + MessageBox.alert(msg, "Attention", {
77 dangerouslyUseHTMLString: true, 77 dangerouslyUseHTMLString: true,
78 }); 78 });
79 return Promise.reject(new Error(msg)); 79 return Promise.reject(new Error(msg));
...@@ -87,11 +87,11 @@ service.interceptors.response.use( ...@@ -87,11 +87,11 @@ service.interceptors.response.use(
87 console.log("err" + error); 87 console.log("err" + error);
88 let { message } = error; 88 let { message } = error;
89 if (message == "Network Error") { 89 if (message == "Network Error") {
90 - message = "系統異常，請聯繫清關部門"; 90 + message = "System exception, please contact the customs clearance department";
91 } else if (message.includes("timeout")) { 91 } else if (message.includes("timeout")) {
92 - message = "請求超時，請聯繫清關部門"; 92 + message = "Request timeout, please contact the customs clearance department";
93 } else if (message.includes("Request failed with status code")) { 93 } else if (message.includes("Request failed with status code")) {
94 - message = "系統接口" + message.substr(message.length - 3) + "異常，請聯繫清關部門"; 94 + message = "System interface abnormality" + message.substr(message.length - 3) + ",please contact the customs clearance department";
95 } 95 }
96 Message({ 96 Message({
97 message: message, 97 message: message,
......
1 -<template>
2 - <el-drawer
3 - :visible.sync="detailDrawer"
4 - :wrapperClosable="false"
5 - size="80%"
6 - @close="closeDrawer"
7 - class="detail-drawer-box"
8 - >
9 - <div class="info-box">
10 - <!-- <p class="title">聯絡方式與特殊交待事項</p> -->
11 - <div class="step1-box">
12 - <div class="title-box">
13 - <span>聯絡方式與特殊交待事項</span>
14 - <el-button v-if="showEdit" type="text" @click="clickEditStepBtn(1)"
15 - >編輯</el-button
16 - >
17 - </div>
18 - <el-form
19 - class="fedexFormStyle"
20 - ref="step1FormDataRef"
21 - :model="step1formData"
22 - label-position="top"
23 - :disabled="true"
24 - >
25 - <el-row :gutter="10">
26 - <el-col :span="12">
27 - <Formitem
28 - :label="$t('fillIn.number')"
29 - type="view"
30 - prop="deliveryNo"
31 - >
32 - <el-input
33 - type="text"
34 - :id="'inputInner-view-deliveryNo'"
35 - v-model="step1formData.deliveryNo"
36 - >
37 - <!-- onkeyup="this.value=this.value.replace(/\D/g,'')" -->
38 - </el-input>
39 - </Formitem>
40 - </el-col>
41 - <el-col :span="12">
42 - <Formitem
43 - :label="$t('fillIn.contacts')"
44 - type="view"
45 - prop="liaisons"
46 - >
47 - <el-input
48 - type="text"
49 - :id="'inputInner-view-liaisons'"
50 - v-model="step1formData.liaisons"
51 - >
52 - </el-input>
53 - </Formitem>
54 - </el-col>
55 - </el-row>
56 - <el-row :gutter="10">
57 - <el-col :span="12">
58 - <Formitem
59 - :label="$t('fillIn.exporterNum')"
60 - prop="consigneeNo"
61 - type="view"
62 - >
63 - <el-input
64 - type="text"
65 - :id="'inputInner-view-consigneeNo'"
66 - v-model="step1formData.consigneeNo"
67 - >
68 - </el-input>
69 - </Formitem>
70 - </el-col>
71 - <el-col :span="12">
72 - <Formitem :label="$t('fillIn.email')" type="view" prop="email">
73 - <el-input
74 - type="text"
75 - :id="'inputInner-view-email'"
76 - v-model="step1formData.email"
77 - >
78 - </el-input>
79 - </Formitem>
80 - </el-col>
81 - </el-row>
82 - <el-row :gutter="10">
83 - <el-col :span="8">
84 - <Formitem :label="$t('fillIn.phone1')" type="view" prop="tel">
85 - <el-input
86 - type="text"
87 - :id="'inputInner-view-tel'"
88 - v-model="step1formData.tel"
89 - >
90 - </el-input>
91 - </Formitem>
92 - </el-col>
93 - <el-col :span="8">
94 - <Formitem
95 - :label="$t('fillIn.phone2')"
96 - type="view"
97 - prop="extensionTel"
98 - >
99 - <el-input
100 - type="text"
101 - :id="'inputInner-view-extensionTel'"
102 - v-model="step1formData.extensionTel"
103 - >
104 - </el-input>
105 - </Formitem>
106 - </el-col>
107 - <el-col :span="8">
108 - <Formitem :label="$t('fillIn.phone3')" type="view" prop="phone">
109 - <el-input
110 - type="text"
111 - :id="'inputInner-view-phone'"
112 - v-model="step1formData.phone"
113 - >
114 - </el-input>
115 - </Formitem>
116 - </el-col>
117 - </el-row>
118 - <el-row>
119 - <el-col :span="24">
120 - <div class="textarea-box">
121 - <Formitem
122 - :label="$t('fillIn.indicate')"
123 - prop="customsClearanceInstruction"
124 - class="label"
125 - type="view"
126 - >
127 - <el-input
128 - type="textarea"
129 - :rows="5"
130 - :id="'inputInner-view-customsClearanceInstruction'"
131 - v-model="step1formData.customsClearanceInstruction"
132 - show-word-limit
133 - maxlength="2000"
134 - >
135 - </el-input>
136 - </Formitem>
137 - </div>
138 - </el-col>
139 - </el-row>
140 - <el-row>
141 - <el-col :span="24">
142 - <Formitem
143 - :label="$t('fillIn.checkList')"
144 - prop="fileSelect"
145 - type="view"
146 - >
147 - <el-input
148 - type="text"
149 - :id="'inputInner-view-fileSelect'"
150 - :value="
151 - step1formData.fileSelect == 1
152 - ? '立即製作出口報關檢核表，不需要列印，完成時會自動上傅'
153 - : '使用已製作完成的出口報關檢核表，並與其他報關文件一起上傳'
154 - "
155 - >
156 - </el-input>
157 - <!-- <el-select
158 - type="text"
159 - v-model="step1formData.fileSelect"
160 - ref="selectRef"
161 - popper-class="checkList-select"
162 - :popper-append-to-body="false"
163 - placeholder=""
164 - >
165 - <el-option
166 - label="立即製作出口報關檢核表，不需要列印，完成時會自動上傅"
167 - :value="1"
168 - ></el-option>
169 - <el-option
170 - label="使用已製作完成的出口報關檢核表，並與其他報關文件一起上傳"
171 - :value="2"
172 - ></el-option>
173 - </el-select> -->
174 - </Formitem>
175 - </el-col>
176 - </el-row>
177 - </el-form>
178 - </div>
179 - <div class="step2-box" v-if="step2Id">
180 - <div class="title-box">
181 - <span>出口報關檢核表</span>
182 - <el-button v-if="showEdit" type="text" @click="clickEditStepBtn(2)"
183 - >編輯</el-button
184 - >
185 - </div>
186 - <div class="check-type-box">
187 - <el-form
188 - :model="typeFormData1"
189 - ref="typeFormData1Ref"
190 - label-width="200px"
191 - class="type-form-box check-color"
192 - label-position="top"
193 - :disabled="true"
194 - >
195 - <el-form-item
196 - class="type-error"
197 - :label="$t('fillIn.smallTit1')"
198 - prop="customsDeclarationType"
199 - >
200 - <div class="check-auto no-boder-input">
201 - <el-checkbox-group
202 - v-model="typeFormData1.customsDeclarationType"
203 - @change="
204 - handleCheckType1(typeFormData1.customsDeclarationType)
205 - "
206 - >
207 - <el-checkbox
208 - v-for="(item, index) in customsDeclarationTypeList"
209 - :label="item.value"
210 - :key="index"
211 - >
212 - {{ item.label }}
213 - <el-input
214 - v-if="item.value == 'OTHER:'"
215 - v-model="typeFormData1.otherData"
216 - placeholder=""
217 - style="width: 100%"
218 - ></el-input>
219 - <span v-if="item.tip">&nbsp;&nbsp;{{ item.tip }}</span>
220 - </el-checkbox>
221 - </el-checkbox-group>
222 - </div>
223 - </el-form-item>
224 - <el-form-item
225 - class="tax-error"
226 - :label="$t('fillIn.isList')"
227 - prop="taxRefundFormFlag"
228 - >
229 - <el-checkbox-group
230 - v-model="typeFormData1.taxRefundFormFlag"
231 - @change="handleCheckType2(typeFormData1.taxRefundFormFlag)"
232 - >
233 - <el-checkbox
234 - v-for="(item, index) in taxRefundFormFlagList"
235 - :label="item.value"
236 - :key="index"
237 - >
238 - {{ item.label }}
239 - </el-checkbox>
240 - </el-checkbox-group>
241 - </el-form-item>
242 - </el-form>
243 - <el-form
244 - class="fedexFormStyle"
245 - ref="typeFormRef"
246 - :model="typeFormData"
247 - label-position="top"
248 - :disabled="true"
249 - >
250 - <el-row :gutter="8">
251 - <el-col :span="8">
252 - <Formitem
253 - :label="$t('fillIn.watchNum1')"
254 - type="view"
255 - prop="supervisoryNo"
256 - >
257 - <el-input
258 - type="text"
259 - :id="'inputInner-view-supervisoryNo'"
260 - v-model="typeFormData.supervisoryNo"
261 - >
262 - </el-input>
263 - </Formitem>
264 - </el-col>
265 - <el-col :span="8">
266 - <Formitem
267 - :label="$t('fillIn.watchNum2')"
268 - prop="originalImportEntryNo"
269 - type="view"
270 - >
271 - <el-input
272 - type="text"
273 - :id="'inputInner-view-originalImportEntryNo'"
274 - v-model="typeFormData.originalImportEntryNo"
275 - >
276 - </el-input>
277 - </Formitem>
278 - </el-col>
279 - <el-col :span="8">
280 - <Formitem
281 - :label="$t('fillIn.watchNum3')"
282 - prop="listOfMaterialsNo"
283 - type="view"
284 - >
285 - <el-input
286 - type="text"
287 - :id="'inputInner-view-listOfMaterialsNo'"
288 - v-model="typeFormData.listOfMaterialsNo"
289 - >
290 - </el-input>
291 - </Formitem>
292 - </el-col>
293 - </el-row>
294 - </el-form>
295 - <p class="small-title">{{ $t("fillIn.smallTit2") }}</p>
296 - <el-checkbox-group
297 - disabled
298 - v-model="exportStatisticsMethod"
299 - class="check-color check-box-aaa"
300 - style="width: 100%; display: flex; gap: 10px"
301 - >
302 - <div style="width: 50%; height: 100%">
303 - <div v-for="(item, index) in exportStatisticsMethodList">
304 - <el-checkbox
305 - class="checkbox-step2"
306 - style="display: block; width: 100%"
307 - :label="item.value"
308 - v-if="item.posation == 'left'"
309 - :key="index + 1"
310 - :class="
311 - item.tip && item.value !== '91' && item.value !== '9M'
312 - ? 'height48 checkbox-width50'
313 - : item.value == '9M'
314 - ? 'checkbox-9M'
315 - : item.value == 'OTHER:'
316 - ? 'line-height48 checkbox-width50'
317 - : 'checkbox-width50'
318 - "
319 - >
320 - <p style="width: 100%">
321 - <span v-if="item.value !== 'OTHER:'">{{ item.label }}</span>
322 - <span v-if="item.value == '91'" class="way-tip">{{
323 - item.tip
324 - }}</span>
325 - </p>
326 - <div style="width: 100%">
327 - <div style="width: 100%">
328 - <span v-if="item.value == 'OTHER:'">{{
329 - item.label
330 - }}</span>
331 - </div>
332 - <div style="width: 100%">
333 - <!-- <el-tooltip
334 - class="item "
335 - effect="dark"
336 - :content="methodOtherData"
337 - placement="top-start"
338 - :disabled="isShowTooltip"
339 - > -->
340 - <el-input
341 - v-if="item.value == 'OTHER:'"
342 - style="width: 90%"
343 - type="textarea"
344 - :rows="2"
345 - placeholder=""
346 - v-model="methodOtherData"
347 - maxlength="38"
348 - show-word-limit
349 - :disabled="true"
350 - >
351 - </el-input>
352 - <!-- </el-tooltip> -->
353 - </div>
354 - </div>
355 - <p
356 - style="width: 100%"
357 - class="way-tip"
358 - v-if="item.value !== '91' && item.value !== '9M'"
359 - >
360 - {{ item.tip }}
361 - </p>
362 - </el-checkbox>
363 - </div>
364 - </div>
365 - <div style="width: 50%; height: 100%">
366 - <div
367 - style="width: 100%"
368 - v-for="(item, index) in exportStatisticsMethodList"
369 - >
370 - <el-checkbox
371 - class="checkbox-step2"
372 - style="width: 100%"
373 - :label="item.value"
374 - v-if="item.posation == 'right'"
375 - :key="index + 2"
376 - :class="
377 - item.tip && item.value !== '91' && item.value !== '9M'
378 - ? 'height48 checkbox-width50'
379 - : item.value == '9M'
380 - ? 'checkbox-9M'
381 - : 'checkbox-width50'
382 - "
383 - >
384 - <p style="width: 100%">
385 - <span v-if="item.value !== 'OTHER:'">{{ item.label }}</span>
386 - <span v-if="item.value == '91'" class="way-tip">{{
387 - item.tip
388 - }}</span>
389 - </p>
390 - <p style="width: 100%" class="way-tip">
391 - <span v-if="item.value !== '91' && item.value !== '9M'"
392 - >{{ item.tip }}
393 - </span>
394 - <span v-if="item.value == '9M'" style="color: #fc5d5d"
395 - >{{ item.tip }}
396 - </span>
397 - </p>
398 - <div>
399 - <el-input
400 - v-if="item.value == '9M'"
401 - style="margin-top: 4px; width: 90%"
402 - type="textarea"
403 - :rows="2"
404 - placeholder=""
405 - v-model="methodAdditional"
406 - maxlength="105"
407 - :disabled="true"
408 - show-word-limit
409 - >
410 - </el-input>
411 - </div>
412 - </el-checkbox>
413 - </div>
414 - </div>
415 - </el-checkbox-group>
416 - <div class="way-tip-bule">
417 - ※以上復出口的案件,附加原進口報單(或國內採購發票),且隨貨附上具結
418 - 書正本。(詳如備註)
419 - </div>
420 - </div>
421 - <el-form
422 - class="fedexFormStyle bg-textarea"
423 - ref="formData1Ref"
424 - :model="formData1"
425 - label-position="top"
426 - :disabled="true"
427 - >
428 - <el-row :gutter="8">
429 - <el-col :span="12">
430 - <Formitem label="3. 指定報關日" type="view" prop="dayOfEntry">
431 - <el-date-picker
432 - v-model="formData1.dayOfEntry"
433 - format="yyyy-MM-dd"
434 - value-format="yyyy-MM-dd"
435 - type="date"
436 - id="inputInner-view-dayOfEntry"
437 - placeholder=""
438 - prefix-icon="none"
439 - >
440 - </el-date-picker>
441 - </Formitem>
442 - </el-col>
443 - <el-col :span="12">
444 - <Formitem type="view">
445 - <div style="line-height: 50px">
446 - <div style="display: inline; color: #333">
447 - &nbsp;&nbsp;&nbsp;7. 商標&nbsp;&nbsp;
448 - </div>
449 - <el-checkbox
450 - style="display: inline"
451 - v-model="brandFlag"
452 - :disabled="true"
453 - >
454 - 無</el-checkbox
455 - >
456 - </div>
457 - </Formitem>
458 - <!-- <p class="small-title check-color">
459 - 7. 商標&nbsp;&nbsp;
460 - <el-checkbox v-model="brandFlag" :disabled="true" >
461 - 無</el-checkbox
462 - >
463 - </p> -->
464 - </el-col>
465 - </el-row>
466 - <div>
467 - <div
468 - style="width: 100%; display: flex; align-items: center; gap: 8px"
469 - >
470 - <div style="width: 50%; display: flex; flex-direction: column">
471 - <el-col :span="12" style="width: 100%; height: 160px">
472 - <div class="textarea-box">
473 - <Formitem
474 - label="4. 中文品名"
475 - :type="pageIndex"
476 - prop="chineseName"
477 - class="label"
478 - >
479 - <el-input
480 - type="textarea"
481 - :id="'inputInner-' + pageIndex + '-chineseName'"
482 - :rows="4"
483 - v-model="formData1.chineseName"
484 - maxlength="500"
485 - show-word-limit
486 - class="cnInput"
487 - >
488 - </el-input>
489 - </Formitem>
490 - </div>
491 - </el-col>
492 - <el-col :span="12" style="width: 100%">
493 - <Formitem label="5. 稅則" :type="pageIndex" prop="taxRules">
494 - <el-input
495 - type="text"
496 - :id="'inputInner-' + pageIndex + '-taxRules'"
497 - v-model="formData1.taxRules"
498 - maxlength="50"
499 - >
500 - </el-input>
501 - </Formitem>
502 - </el-col>
503 - <div style="display: flex; gap: 8px">
504 - <el-col :span="6" style="width: 50%">
505 - <Formitem
506 - label="6. 報關金額"
507 - :type="pageIndex"
508 - prop="customsDeclarationAmount"
509 - >
510 - <el-input
511 - type="text"
512 - :id="
513 - 'inputInner-' +
514 - pageIndex +
515 - '-customsDeclarationAmount'
516 - "
517 - oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+4)}"
518 - v-model="formData1.customsDeclarationAmount"
519 - >
520 - </el-input>
521 - </Formitem>
522 - </el-col>
523 - <el-col :span="6" style="width: 50%">
524 - <Formitem label="" prop="currencyCd">
525 - <el-select
526 - :id="'inputInner-' + pageIndex + '-currencyCd'"
527 - v-model="formData1.currencyCd"
528 - filterable
529 - clearable
530 - placeholder="幣別"
531 - value-key="id"
532 - >
533 - <el-option
534 - v-for="(item, index) in currencyCdList"
535 - :key="index"
536 - :label="item.code"
537 - :value="item.code"
538 - >
539 - </el-option>
540 - </el-select>
541 - </Formitem>
542 - </el-col>
543 - </div>
544 - </div>
545 - <div style="width: 50%; display: flex; flex-direction: column">
546 - <el-col :span="12" style="width: 100%">
547 - <Formitem label="文字商標" :type="pageIndex" prop="brandTxt">
548 - <el-input
549 - type="text"
550 - :id="'inputInner-' + pageIndex + '-brandTxt'"
551 - maxlength="100"
552 - :disabled="true"
553 - v-model="formData2.brandTxt"
554 - >
555 - </el-input>
556 - </Formitem>
557 - </el-col>
558 - <el-col :span="12" style="width: 100%; margin-bottom: 5px">
559 - <FileUploadPaste
560 - ref="uploadRef"
561 - style="height: 210px; width: 100%"
562 - :imageBase="image"
563 - type="view"
564 - >
565 - <div style="color: #333">圖案商標</div>
566 - </FileUploadPaste>
567 - </el-col>
568 - </div>
569 - </div>
570 - </div>
571 - </el-form>
572 - <div class="bottom-box">
573 - <p class="small-title">
574 - 8. 產證
575 - <span class="checkbox-width80-tip">※每份規費$250</span>
576 - </p>
577 - <el-checkbox-group
578 - v-model="propertyCertificate"
579 - class="checkbox-width80 check-color"
580 - :disabled="true"
581 - >
582 - <el-checkbox
583 - v-for="(item, index) in checkType3List"
584 - :label="item.value"
585 - :key="index"
586 - >
587 - {{ item.label }}
588 - </el-checkbox>
589 - </el-checkbox-group>
590 - <p class="small-title" style="line-height: 14px; margin-top: 8px">
591 - 9. ECFA產證
592 - </p>
593 - <el-row :gutter="8">
594 - <el-col :span="12">
595 - <el-checkbox-group
596 - v-model="ecfaPropertyCertificate"
597 - class="checkbox-width80 checkbox-lineheight80 check-color"
598 - :disabled="true"
599 - >
600 - <el-checkbox
601 - v-for="(item, index) in checkType4List"
602 - :label="item.value"
603 - :key="index"
604 - >
605 - {{ item.label }}
606 - </el-checkbox>
607 - </el-checkbox-group>
608 - </el-col>
609 - <el-col :span="12">
610 - <el-form
611 - class="fedexFormStyle"
612 - ref="formDataRef"
613 - :model="formData6"
614 - label-position="top"
615 - :disabled="true"
616 - >
617 - <Formitem
618 - label="產證編號"
619 - type="view"
620 - prop="ecfaPropertyCertificateNo"
621 - >
622 - <el-input
623 - type="text"
624 - :id="'inputInner-view-ecfaPropertyCertificateNo'"
625 - v-model="formData6.ecfaPropertyCertificateNo"
626 - >
627 - </el-input>
628 - </Formitem>
629 - </el-form>
630 - </el-col>
631 - </el-row>
632 - <p class="small-title" style="line-height: 14px; margin-bottom: 8px">
633 - 10. 申請
634 - <span class="checkbox-width80-tip">※每份規費$100</span>
635 - </p>
636 - <el-checkbox-group
637 - v-model="applyFor"
638 - class="checkbox-width80 check-color"
639 - :disabled="true"
640 - >
641 - <el-checkbox
642 - v-for="(item, index) in checkType5List"
643 - :label="item.value"
644 - :key="index"
645 - >
646 - {{ item.label }}
647 - </el-checkbox>
648 - </el-checkbox-group>
649 - </div>
650 - </div>
651 - <div class="step3-box" v-if="step3Id">
652 - <div class="title-box">
653 - <span>報關文件</span>
654 - <el-button v-if="showEdit" type="text" @click="clickEditStep3Btn"
655 - >編輯</el-button
656 - >
657 - </div>
658 - <div
659 - class="fileList-box auto-file"
660 - v-for="(item, index) in autoFileList"
661 - :key="index + 's'"
662 - >
663 - <div>
664 - <i class="el-icon-document"></i
665 - ><span style="margin-left: 20px"
666 - >自動生成-{{ item.name }}{{ item.type }}</span
667 - >
668 - </div>
669 - <el-button
670 - type="text"
671 - @click="openViewPdf(item)"
672 - :loading="item.findLoading"
673 - >查看</el-button
674 - >
675 - </div>
676 - <div class="upload-btn">
677 - <el-button type="text" disabled>選擇文件上傳</el-button>
678 - </div>
679 - <div
680 - class="userUploadFileList"
681 - :style="{
682 - 'overflow-y': uploadFilesList.length > 10 ? 'auto' : 'hidden',
683 - }"
684 - >
685 - <div v-for="(item, index) in uploadFilesList" :key="index">
686 - <div class="fileList-box">
687 - <div style="height: 100%; width: 80%; display: inline-block">
688 - <div>
689 - <Tooltip :content="item.fileName" refName="stepThreeTip"
690 - ><span slot="icon">
691 - <span style="display: inline-block; width: 35px">{{
692 - index + 1
693 - }}</span>
694 - <i class="el-icon-document"></i>
695 - <span style="margin-left: 10px">手動上傳-</span>
696 - </span>
697 - </Tooltip>
698 - </div>
699 - </div>
700 - <!-- <div>
701 - <i class="el-icon-document"></i><span style="margin-left: 20px">手動上傳-{{ item.name }}{{ item.type }}</span>
702 - </div> -->
703 - <!-- <el-button type="text" @click="handleRemove(item)">删除</el-button> -->
704 - </div>
705 - </div>
706 - </div>
707 - <el-form
708 - class="stepThreeForm"
709 - style="width: 100%; padding-left: 10px"
710 - label-position="top"
711 - ref="stepThreeForm"
712 - :hide-required-asterisk="true"
713 - >
714 - <el-form-item
715 - label="*所上傳的報關文件，是否適用在目的地國家進口清關報關作業?"
716 - prop="isClear"
717 - >
718 - <el-radio-group
719 - v-model="step1formData.isClear"
720 - style="margin-left: 15px"
721 - disabled
722 - >
723 - <el-radio :label="1"
724 - ><span style="font-size: 16px; color: red; font-weight: 600"
725 - >是</span
726 - ></el-radio
727 - >
728 - <el-radio :label="0"
729 - ><span style="font-size: 16px; color: red; font-weight: 600"
730 - >否</span
731 - ></el-radio
732 - >
733 - </el-radio-group>
734 - </el-form-item>
735 - <!-- <el-form-item label="*" prop="radio">
736 - <div
737 - style="
738 - font-size: 16px;
739 - font-weight: 800;
740 - color: red;
741 - background-color: #f2f2f2;
742 - "
743 - >
744 - <el-select
745 - class="stepThreeSelect"
746 - v-model="radio"
747 - placeholder="請選擇"
748 - >
749 - <el-option label="是" value="1"> </el-option>
750 - <el-option label="否" value="0"> </el-option>
751 - </el-select>
752 - <span style="display: inline-block; padding-left: 10px"
753 - >所上傳的報關文件，是否適用在目的地國家進口清關報關作業?</span
754 - >
755 - </div>
756 - </el-form-item> -->
757 - </el-form>
758 - </div>
759 - <div class="width-btn-box" style="margin-top: 60px" v-if="showEdit">
760 - <el-button class="entrySaveButton" @click="clickEditStep3Btn">
761 - {{ $t("common.saveBtn") }}
762 - </el-button>
763 - </div>
764 - <div class="width-btn-box" v-if="showEdit">
765 - <el-button
766 - class="entrySaveButton entrySaveButton-background"
767 - @click="infoSubmitBtn"
768 - >
769 - {{ $t("common.submitBtn") }}
770 - </el-button>
771 - </div>
772 - <div class="width-btn-box" style="margin-top: 60px" v-if="!showEdit">
773 - <el-button class="entrySaveButton" @click="clickEditStep3Btn">
774 - 返回
775 - </el-button>
776 - </div>
777 - </div>
778 - </el-drawer>
779 -</template>
780 -
781 -<script>
782 -import { findAllCurrencyCd, findDetailsById } from "@/api/fillForm.js";
783 -import FileUploadPaste from "@/components/FileUploadPaste";
784 -
785 -export default {
786 - props: {
787 - pageIndex: {
788 - type: String,
789 - default() {
790 - return "";
791 - },
792 - },
793 - },
794 - components: { FileUploadPaste },
795 - data() {
796 - return {
797 - detailDrawer: false,
798 - step1formData: {
799 - deliveryNo: "",
800 - liaisons: "",
801 - consigneeNo: "",
802 - email: "",
803 - tel: "",
804 - extensionTel: "",
805 - phone: "",
806 - customsClearanceInstruction: "",
807 - fileSelect: 2,
808 - isClear: null,
809 - },
810 - typeFormData1: {
811 - customsDeclarationType: [],
812 - taxRefundFormFlag: [],
813 - otherData: "",
814 - },
815 - typeFormData: {
816 - supervisoryNo: "",
817 - originalImportEntryNo: "",
818 - listOfMaterialsNo: "",
819 - },
820 - methodAdditional: "",
821 - exportStatisticsMethod: [],
822 - methodOtherData: "",
823 - formData1: {
824 - dayOfEntry: "",
825 - chineseName: "",
826 - taxRules: "",
827 - customsDeclarationAmount: "",
828 - currencyCd: "",
829 - },
830 - currencyCdList: [],
831 - brandFlag: false,
832 - formData2: {
833 - brandTxt: "",
834 - brandImage: "",
835 - image: "",
836 - },
837 - image: "",
838 - propertyCertificate: [],
839 - ecfaPropertyCertificate: [],
840 - formData6: {
841 - ecfaPropertyCertificateNo: "",
842 - },
843 - applyFor: [],
844 - step1Id: null,
845 - step2Id: null,
846 - step3Id: null,
847 - declareId: null,
848 - showEdit: true,
849 - radio: null,
850 - autoFileList: [],
851 - uploadFilesList: [],
852 - };
853 - },
854 - computed: {
855 - customsDeclarationTypeList() {
856 - return [
857 - { label: this.$t("fillIn.listType1"), value: "G5", tip: "" },
858 - { label: this.$t("fillIn.listType2"), value: "G3", tip: "" },
859 - { label: this.$t("fillIn.listType3"), value: "B9", tip: "" },
860 - { label: this.$t("fillIn.listType4"), value: "B8", tip: "" },
861 - { label: this.$t("fillIn.listType5"), value: "D5", tip: "" },
862 - { label: this.$t("fillIn.listType6"), value: "F5", tip: "" },
863 - {
864 - label: this.$t("fillIn.listType7_1"),
865 - value: "OTHER:",
866 - tip: this.$t("fillIn.listType7_2"),
867 - },
868 - ];
869 - },
870 - taxRefundFormFlagList() {
871 - return [
872 - { label: this.$t("fillIn.yes"), value: 1 },
873 - { label: this.$t("fillIn.no"), value: 0 },
874 - ];
875 - },
876 - exportStatisticsMethodList() {
877 - return [
878 - {
879 - label: this.$t("fillIn.wayList1"),
880 - value: "02",
881 - tip: "",
882 - posation: "left",
883 - },
884 - {
885 - label: this.$t("fillIn.wayList2"),
886 - value: "81",
887 - tip: "",
888 - posation: "right",
889 - },
890 - {
891 - label: "(04)無價之禮物、貨樣及廣告品, 不再進口",
892 - value: "04",
893 - tip: "",
894 - posation: "left",
895 - },
896 - {
897 - label: "(82)外貨復出口不再進口",
898 - value: "82",
899 - tip: "",
900 - posation: "right",
901 - },
902 - {
903 - label: this.$t("fillIn.wayList3"),
904 - value: "53",
905 - tip: this.$t("fillIn.wayList3_1"),
906 - posation: "left",
907 - },
908 - {
909 - label: this.$t("fillIn.wayList4"),
910 - value: "9L",
911 - tip: "",
912 - posation: "right",
913 - },
914 - {
915 - label: this.$t("fillIn.wayList5_1"),
916 - value: "91",
917 - tip: this.$t("fillIn.wayList5_2"),
918 - posation: "left",
919 - },
920 - {
921 - label: this.$t("fillIn.wayList6"),
922 - value: "9S",
923 - tip: "",
924 - posation: "right",
925 - },
926 - {
927 - label: this.$t("fillIn.wayList7_1"),
928 - value: "94",
929 - tip: this.$t("fillIn.wayList7_2"),
930 - posation: "left",
931 - },
932 -
933 - {
934 - label: this.$t("fillIn.wayList9_1"),
935 - value: "9M",
936 - tip: this.$t("fillIn.wayList9_2"),
937 - posation: "right",
938 - },
939 - {
940 - label: this.$t("fillIn.wayList10_1"),
941 - value: "96",
942 - tip: this.$t("fillIn.wayList10_2"),
943 - posation: "left",
944 - },
945 -
946 - {
947 - label: this.$t("fillIn.wayList8_1"),
948 - value: "92",
949 - tip: this.$t("fillIn.wayList8_2"),
950 - posation: "right",
951 - },
952 - {
953 - label: this.$t("fillIn.wayList11"),
954 - value: "OTHER:",
955 - tip: "",
956 - posation: "left",
957 - },
958 - ];
959 - },
960 - checkType3List() {
961 - return [
962 - { label: "不要", value: "pc_no" },
963 - { label: "要", value: "pc_yes" },
964 - { label: "隨機", value: "pc_random" },
965 - { label: "不隨機", value: "pc_niRandom" },
966 - ];
967 - },
968 - checkType4List() {
969 - return [
970 - { label: "不要", value: "ecfa_no" },
971 - { label: "要申請", value: "ecfa_yes" },
972 - { label: "自行申請", value: "ecfa_apply" },
973 - ];
974 - },
975 - checkType5List() {
976 - return [
977 - { label: "沖退原料稅", value: "ct" },
978 - { label: "退內地稅", value: "tn" },
979 - { label: "出口證明聯/副報單", value: "ck" },
980 - ];
981 - },
982 - },
983 - created() {
984 - Promise.all([findAllCurrencyCd()]).then((res) => {
985 - this.currencyCdList = res[0].data;
986 - });
987 - },
988 - methods: {
989 - openDrawer(row, type) {
990 - this.$nextTick(() => {
991 - this.detailDrawer = true;
992 - if (type == "table") {
993 - this.showEdit = false;
994 - } else {
995 - this.showEdit = true;
996 - }
997 - this.declareId = row.id;
998 - this.getFindDetailsById();
999 - });
1000 - },
1001 - getFindDetailsById() {
1002 - findDetailsById(this.declareId)
1003 - .then((res) => {
1004 - if (res.code == 200) {
1005 - let resData = res.data;
1006 - this.declareId = resData.declare.id;
1007 - this.step1Id = resData.declare.deliveryInfoId;
1008 - this.step2Id = resData.declare.exportInspectionInfoId;
1009 - this.step3Id = resData.declare.customsFileId;
1010 - if (this.step1Id) {
1011 - this.editFillBackStep1(res.data.declareInfo);
1012 - }
1013 - if (this.step2Id) {
1014 - this.editFillBackStep2(res.data.declareCheckInfo);
1015 - }
1016 - if (this.step3Id) {
1017 - this.editFillBackStep3(res.data);
1018 - }
1019 - } else {
1020 - this.msgWarning(res.msg);
1021 - }
1022 - })
1023 - .catch((err) => {
1024 - console.log(err);
1025 - });
1026 - },
1027 - editFillBackStep1(data) {
1028 - this.step1formData = {
1029 - deliveryNo: data.deliveryNo,
1030 - liaisons: data.liaisons,
1031 - consigneeNo: data.consigneeNo,
1032 - email: data.email,
1033 - tel: data.tel,
1034 - extensionTel: data.extensionTel,
1035 - phone: data.phone,
1036 - customsClearanceInstruction: data.customsClearanceInstruction,
1037 - fileSelect: data.fileSelect,
1038 - isClear: null,
1039 - };
1040 - },
1041 - editFillBackStep2(data) {
1042 - if (data) {
1043 - let cdl = data.customsDeclarationType;
1044 -
1045 - this.typeFormData1 = {
1046 - customsDeclarationType: cdl
1047 - ? cdl.includes("OTHER:")
1048 - ? ["OTHER:"]
1049 - : [cdl]
1050 - : [],
1051 - taxRefundFormFlag: [data.taxRefundFormFlag],
1052 - otherData: cdl
1053 - ? cdl.includes("OTHER:")
1054 - ? data.customsDeclarationType.slice(6)
1055 - : ""
1056 - : "",
1057 - };
1058 -
1059 - // this.typeFormData1 = {
1060 - // customsDeclarationType: data.customsDeclarationType.includes("OTHER:")
1061 - // ? ["OTHER:"]
1062 - // : [data.customsDeclarationType],
1063 - // taxRefundFormFlag: [data.taxRefundFormFlag],
1064 - // otherData: data.customsDeclarationType.includes("OTHER:")
1065 - // ? data.customsDeclarationType.slice(6)
1066 - // : "",
1067 - // };
1068 -
1069 - this.typeFormData = {
1070 - supervisoryNo: data.supervisoryNo,
1071 - originalImportEntryNo: data.originalImportEntryNo,
1072 - listOfMaterialsNo: data.listOfMaterialsNo,
1073 - };
1074 - let exportData = data.exportStatisticsMethod?.split(";");
1075 - if (exportData && exportData.length > 0) {
1076 - exportData.forEach((item, index, arr) => {
1077 - if (item.includes("OTHER:")) {
1078 - this.methodOtherData = item.slice(6);
1079 - arr[index] = "OTHER:";
1080 - }
1081 - });
1082 - }
1083 - this.exportStatisticsMethod = exportData || [];
1084 - this.methodAdditional = data.methodAdditional;
1085 - this.formData1 = {
1086 - dayOfEntry: data.dayOfEntry,
1087 - chineseName: data.chineseName,
1088 - taxRules: data.taxRules,
1089 - customsDeclarationAmount: data.customsDeclarationAmount,
1090 - currencyCd: data.currencyCd,
1091 - };
1092 - this.brandFlag = data.brandFlag == 1 ? true : false;
1093 - this.formData2 = {
1094 - brandTxt: data.brandTxt,
1095 - brandImage: data.brandImage,
1096 - image: data.image ? "data:image/jpeg;base64," + data.image : null,
1097 - };
1098 - this.image = data.image ? "data:image/jpeg;base64," + data.image : "";
1099 -
1100 - this.propertyCertificate = data.propertyCertificate
1101 - ? data.propertyCertificate.split(";")
1102 - : [];
1103 - this.ecfaPropertyCertificate = data.ecfaPropertyCertificate
1104 - ? [data.ecfaPropertyCertificate]
1105 - : [];
1106 - this.formData6.ecfaPropertyCertificateNo =
1107 - data.ecfaPropertyCertificateNo;
1108 - this.applyFor = data.applyFor ? data.applyFor.split(";") : [];
1109 - }
1110 - },
1111 - editFillBackStep3(data) {
1112 - this.step1formData.isClear = data.declare.isClear;
1113 - this.autoFileList = data.uploadFileVoList;
1114 - if (this.autoFileList != null) {
1115 - this.autoFileList = this.autoFileList.map((item) => {
1116 - return {
1117 - ...item,
1118 - findLoading: false,
1119 - };
1120 - });
1121 - }
1122 - this.uploadFilesList = data.manualFileVoList;
1123 - this.uploadFilesList = this.uploadFilesList.map((item) => {
1124 - return {
1125 - ...item,
1126 - fileName: item.name + item.type,
1127 - };
1128 - });
1129 - },
1130 - closeDrawer() {
1131 - this.detailDrawer = false;
1132 - },
1133 - clickEditStepBtn(val) {
1134 - this.detailDrawer = false;
1135 - this.$emit("editDetail", val);
1136 - },
1137 - clickEditStep3Btn() {
1138 - this.detailDrawer = false;
1139 - },
1140 - infoSubmitBtn() {
1141 - this.detailDrawer = false;
1142 - this.$emit("submitBtn");
1143 - },
1144 - openViewPdf(file) {
1145 - this.$emit("viewPdf", file);
1146 - },
1147 - },
1148 -};
1149 -</script>
1150 -
1151 -<style lang="scss" scoped>
1152 -.detail-drawer-box {
1153 - .info-box {
1154 - padding: 0 50px 100px 100px;
1155 -
1156 - .title {
1157 - font-size: 16px;
1158 - font-weight: 600;
1159 - margin-bottom: 12px;
1160 - color: #000;
1161 - }
1162 -
1163 - .title-box {
1164 - font-size: 14px;
1165 - font-weight: 600;
1166 - // line-height: 22px;
1167 - color: #333;
1168 - display: flex;
1169 - justify-content: space-between;
1170 - margin-bottom: 4px;
1171 -
1172 - .el-button {
1173 - padding: 0;
1174 - font-size: 16px;
1175 - }
1176 - }
1177 -
1178 - .step1-box {
1179 - margin-bottom: 20px;
1180 -
1181 - .select-box {
1182 - ::v-deep .el-input__inner {
1183 - // padding-bottom: 12px;
1184 - // text-align: right;
1185 - }
1186 -
1187 - ::v-deep .el-popper[x-placement^="bottom"] .popper__arrow::after {
1188 - border-bottom-color: transparent;
1189 - }
1190 -
1191 - ::v-deep .el-popper .popper__arrow,
1192 - .el-popper .popper__arrow::after {
1193 - border-style: none !important;
1194 - }
1195 - }
1196 -
1197 - ::v-deep .el-textarea .el-input__count {
1198 - background: #f2f2f2;
1199 - }
1200 -
1201 - ::v-deep .el-textarea textarea {
1202 - font-size: 14px !important;
1203 - }
1204 - }
1205 -
1206 - .fedexFormStyle {
1207 - ::v-deep .el-form-item .el-form-item__label {
1208 - color: #333 !important;
1209 - }
1210 - }
1211 -
1212 - ::v-deep .el-textarea__inner {
1213 - resize: none;
1214 - }
1215 -
1216 - .step2-box {
1217 - .check-type-box {
1218 - background: #f2f2f2;
1219 - padding: 12px;
1220 - margin-bottom: 14px;
1221 -
1222 - .fedexFormStyle .el-form-item {
1223 - background: #fff;
1224 - margin-top: 4px;
1225 - }
1226 -
1227 - .type-form-box {
1228 - ::v-deep .el-form-item__label {
1229 - height: 24px;
1230 - line-height: 24px;
1231 - font-size: 14px;
1232 - font-weight: 500;
1233 - color: #000000;
1234 - }
1235 -
1236 - ::v-deep .el-form-item__content {
1237 - line-height: 32px;
1238 - }
1239 -
1240 - ::v-deep .el-form-item {
1241 - margin: 0;
1242 - }
1243 - }
1244 -
1245 - .check-auto {
1246 - .el-checkbox {
1247 - width: calc(100% / 4 - 30px);
1248 - }
1249 - }
1250 -
1251 - .no-boder-input {
1252 - .el-input {
1253 - width: 150px;
1254 - }
1255 -
1256 - ::v-deep .el-input__inner {
1257 - background-color: inherit;
1258 - border: none;
1259 - border-bottom: 1px solid #000;
1260 - height: 30px;
1261 - line-height: 30px;
1262 - }
1263 - }
1264 -
1265 - .type-error {
1266 - ::v-deep .el-form-item__error {
1267 - top: -22px;
1268 - left: 147px;
1269 - }
1270 - }
1271 -
1272 - .tax-error {
1273 - ::v-deep .el-form-item__error {
1274 - top: -22px;
1275 - left: 166px;
1276 - }
1277 - }
1278 -
1279 - .checkbox-width50 {
1280 - line-height: 36px;
1281 - width: calc(100% / 2 - 30px);
1282 - }
1283 -
1284 - .checkbox-9M {
1285 - margin-top: 14px;
1286 - line-height: 36px;
1287 - // width: calc(100% / 2 - 30px);
1288 -
1289 - // ::v-deep .el-checkbox__label {
1290 - // width: calc(100% - 24px);
1291 - // }
1292 - ::v-deep .el-checkbox__input {
1293 - vertical-align: 70px;
1294 - }
1295 - }
1296 -
1297 - .checkbox-width100 {
1298 - line-height: 36px;
1299 - width: 100%;
1300 -
1301 - ::v-deep .el-checkbox__label {
1302 - width: calc(100% - 24px);
1303 - }
1304 -
1305 - ::v-deep .el-checkbox__input {
1306 - vertical-align: 50px;
1307 - }
1308 - }
1309 -
1310 - .way-tip {
1311 - color: #999;
1312 - }
1313 -
1314 - .height48 {
1315 - height: 48px;
1316 -
1317 - ::v-deep .el-checkbox__label {
1318 - line-height: 24px;
1319 - }
1320 -
1321 - ::v-deep .el-checkbox__input {
1322 - vertical-align: 16px;
1323 - }
1324 - }
1325 -
1326 - .line-height48 {
1327 - ::v-deep .el-checkbox__label {
1328 - vertical-align: 22px;
1329 - }
1330 -
1331 - ::v-deep .el-checkbox__input {
1332 - vertical-align: 69px;
1333 - }
1334 - }
1335 -
1336 - .way-tip-bule {
1337 - width: 100%;
1338 - height: 29px;
1339 - line-height: 29px;
1340 - background: #007ab71a;
1341 - color: #3478b2;
1342 - padding: 0 12px;
1343 - margin-bottom: 4px;
1344 - font-size: 12px;
1345 - }
1346 - }
1347 -
1348 - .check-color {
1349 - ::v-deep .el-checkbox {
1350 - color: #000000;
1351 - font-size: 12px;
1352 - }
1353 -
1354 - ::v-deep .el-checkbox__label {
1355 - font-size: 12px;
1356 - padding-left: 4px;
1357 - }
1358 - }
1359 -
1360 - .bottom-box {
1361 - padding: 12px;
1362 - background: #f2f2f2;
1363 -
1364 - .fedexFormStyle .el-form-item {
1365 - background: #fff;
1366 - margin-top: 8px;
1367 - }
1368 -
1369 - .checkbox-width80 {
1370 - .el-checkbox {
1371 - line-height: 36px;
1372 - width: 80px;
1373 - }
1374 - }
1375 -
1376 - .checkbox-width80-tip {
1377 - margin-left: 5px;
1378 - background: #f479201a;
1379 - padding: 7px 8px;
1380 - color: #f47920;
1381 - font-size: 12px;
1382 - }
1383 -
1384 - .checkbox-lineheight80 {
1385 - .el-checkbox {
1386 - line-height: 60px;
1387 - height: 60px;
1388 - width: 80px;
1389 - }
1390 - }
1391 -
1392 - .check-inline-block {
1393 - ::v-deep .el-checkbox-group {
1394 - display: inline-block;
1395 - }
1396 - }
1397 - }
1398 -
1399 - .bg-textarea {
1400 - ::v-deep .el-textarea .el-input__count {
1401 - background: #f2f2f2;
1402 - }
1403 - }
1404 -
1405 - ::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner {
1406 - border: 2px solid #007ab7;
1407 - }
1408 -
1409 - ::v-deep .el-checkbox__input.is-disabled + span.el-checkbox__label {
1410 - color: #333;
1411 - }
1412 - }
1413 -
1414 - .step3-box {
1415 - margin-top: 20px;
1416 -
1417 - .upload-btn {
1418 - width: 100%;
1419 - height: 38px;
1420 - line-height: 38px;
1421 - padding-left: 10px;
1422 - background: #f2f2f2;
1423 - text-align: left;
1424 -
1425 - .el-button--text {
1426 - color: #8e8e8e !important;
1427 - }
1428 - }
1429 -
1430 - .fileList-box {
1431 - width: 100%;
1432 - background: #f2f2f2;
1433 - font-size: 14px;
1434 - height: 36px;
1435 - line-height: 36px;
1436 - border-top: 1px solid #e0e0e0;
1437 - display: flex;
1438 - justify-content: space-between;
1439 - padding: 0 20px;
1440 - }
1441 -
1442 - .auto-file {
1443 - border: none;
1444 - margin-bottom: 6px;
1445 - }
1446 - }
1447 - }
1448 -
1449 - .width-btn-box {
1450 - width: 100%;
1451 - text-align: center;
1452 - margin-top: 16px;
1453 -
1454 - .el-button {
1455 - width: 300px;
1456 - }
1457 - }
1458 -
1459 - ::v-deep .el-textarea.is-disabled .el-textarea__inner {
1460 - color: #8e8e8e !important;
1461 - }
1462 -
1463 - ::v-deep .el-input.is-disabled .el-input__inner {
1464 - color: #8e8e8e !important;
1465 - }
1466 -
1467 - ::v-deep
1468 - .el-checkbox__input.is-disabled.is-checked
1469 - .el-checkbox__inner::after {
1470 - border-color: #007ab7 !important;
1471 - }
1472 -}
1473 -
1474 -.textarea-box {
1475 - // margin-bottom: 5px;
1476 - ::v-deep .el-form-item .el-form-item__content {
1477 - position: static !important;
1478 - .el-textarea {
1479 - .el-textarea__inner {
1480 - padding-bottom: 1.7rem;
1481 - }
1482 - }
1483 - }
1484 -
1485 - .label {
1486 - font-size: 0.75rem;
1487 - font-weight: 700;
1488 - background-color: #f2f2f2;
1489 - color: #444;
1490 - height: max-content;
1491 - // padding-bottom: 0.6rem 0 0 0.6rem;
1492 - line-height: 25px;
1493 - }
1494 -}
1495 -
1496 -.userUploadFileList {
1497 - max-height: 360px;
1498 - // overflow-y: auto;
1499 -}
1500 -</style>
1 -<template>
2 - <el-dialog
3 - title="管理模版"
4 - :visible.sync="dialogVisible"
5 - width="50%"
6 - :show-close="false"
7 - :close-on-click-modal="false"
8 - >
9 - <el-form
10 - class="fedexFormStyle"
11 - ref="formDialogDataRef"
12 - :model="formData"
13 - :rules="rules"
14 - label-position="top"
15 - >
16 - <el-row :gutter="10">
17 - <el-col :span="12">
18 - <Formitem :label="$t('fillIn.placeholder')" type="edit" prop="templateName">
19 - <el-input
20 - type="text"
21 - :id="'inputInner-edit-templateName'"
22 - v-model="formData.templateName"
23 - :disabled="saveBtnText=='更新'"
24 - >
25 - </el-input>
26 - </Formitem>
27 - </el-col>
28 - <el-col :span="12">
29 - <Formitem :label="$t('fillIn.contacts')" type="edit" prop="liaisons">
30 - <el-input
31 - type="text"
32 - :id="'inputInner-edit-liaisons'"
33 - maxlength="30"
34 - v-model="formData.liaisons"
35 - >
36 - </el-input>
37 - </Formitem>
38 - </el-col>
39 - </el-row>
40 - <el-row :gutter="10">
41 - <el-col :span="12">
42 - <Formitem
43 - :label="$t('fillIn.exporterNum')"
44 - type="edit"
45 - prop="consigneeNo"
46 - >
47 - <el-input
48 - type="text"
49 - :id="'inputInner-edit-consigneeNo'"
50 - maxlength="12"
51 - oninput="this.value = this.value.replace(/\s+/g, '')"
52 - v-model="formData.consigneeNo"
53 - >
54 - </el-input>
55 - </Formitem>
56 - </el-col>
57 - <el-col :span="12">
58 - <Formitem :label="$t('fillIn.email')" type="edit" prop="email">
59 - <el-input
60 - type="text"
61 - :id="'inputInner-edit-email'"
62 - v-model="formData.email"
63 - >
64 - </el-input>
65 - </Formitem>
66 - </el-col>
67 - </el-row>
68 - <el-row :gutter="10">
69 - <el-col :span="8">
70 - <Formitem :label="$t('fillIn.phone1')" type="edit" prop="tel">
71 - <el-input
72 - type="text"
73 - :id="'inputInner-edit-tel'"
74 - maxlength="40"
75 - v-model="formData.tel"
76 - >
77 - </el-input>
78 - </Formitem>
79 - </el-col>
80 - <el-col :span="8">
81 - <Formitem
82 - :label="$t('fillIn.phone2')"
83 - type="edit"
84 - prop="extensionTel"
85 - >
86 - <el-input
87 - type="text"
88 - :id="'inputInner-edit-extensionTel'"
89 - maxlength="10"
90 - v-model="formData.extensionTel"
91 - >
92 - </el-input>
93 - </Formitem>
94 - </el-col>
95 - <el-col :span="8">
96 - <Formitem :label="$t('fillIn.phone3')" type="edit" prop="phone">
97 - <el-input
98 - type="text"
99 - :id="'inputInner-edit-phone'"
100 - maxlength="40"
101 - v-model="formData.phone"
102 - >
103 - </el-input>
104 - </Formitem>
105 - </el-col>
106 - </el-row>
107 - <el-row>
108 - <el-col :span="24">
109 - <div class="textarea-box">
110 - <el-form-item
111 - :label="$t('fillIn.indicate')"
112 - prop="customsClearanceInstruction"
113 - class="label"
114 - >
115 - <el-input
116 - type="textarea"
117 - :rows="6"
118 - v-model="formData.customsClearanceInstruction"
119 - show-word-limit
120 - maxlength="2000"
121 - >
122 - </el-input>
123 - </el-form-item>
124 - </div>
125 - </el-col>
126 - </el-row>
127 - </el-form>
128 - <div align="center">
129 - <div class="dialogOption entrySave">
130 - <el-button
131 - class="entrySaveButton entrySaveButton-background"
132 - @click="checkTempName"
133 - :loading="updateLoading"
134 - >
135 - {{ saveBtnText }}
136 - </el-button>
137 - <el-button class="entrySaveButton" @click="closeDialog">
138 - {{ $t("common.cancleBtn") }}
139 - </el-button>
140 - </div>
141 - </div>
142 - </el-dialog>
143 -</template>
144 -
145 -<script>
146 -import { updateTemplate, getTemByTemName , addSaveTemplate } from "@/api/fillForm.js";
147 -export default {
148 - components: {},
149 - props: {},
150 - data() {
151 - return {
152 - dialogVisible: false,
153 - updateLoading: false,
154 - tempId: null,
155 - saveBtnText:"保存",
156 - formData: {
157 - templateName:"",
158 - liaisons: "",
159 - consigneeNo: "",
160 - email: "",
161 - tel: "",
162 - extensionTel: "",
163 - phone: "",
164 - customsClearanceInstruction: "",
165 - },
166 - };
167 - },
168 - computed: {
169 - rules() {
170 - let rules = {
171 - liaisons: [
172 - { required: true, message: "請您輸入聯系人", trigger: "blur" },
173 - {
174 - validator: (rule, value, callback) => {
175 - if (!this.regExp.nameExp.test(value)) {
176 - callback(
177 - "請您使用中文，英文和空格的組合，不支持以下字符：、, ；, ‘,"
178 - );
179 - } else if (value.length > 30) {
180 - callback(
181 - "聯系人姓名最多可包含30個字元，而您輸入了" +
182 - value.length +
183 - "個字元。"
184 - );
185 - } else {
186 - callback();
187 - }
188 - },
189 - trigger: "blur",
190 - },
191 - ], templateName: [
192 - { required: true, message: "請輸入使用者名稱", trigger: "blur" },
193 - {
194 -
195 - trigger: "blur",
196 - },
197 - ],
198 - consigneeNo: [
199 - {
200 - required: true,
201 - message: "請您輸入貨物輸出統一編號",
202 - trigger: "blur",
203 - },
204 - {
205 - validator: (rule, value, callback) => {
206 - if (!this.regExp.expNumENExp.test(value)) {
207 - callback("請您輸入統一編號，中間不要有空格。");
208 - } else {
209 - callback();
210 - }
211 - },
212 - trigger: "blur",
213 - },
214 - ],
215 - email: [
216 - { required: true, message: "請您輸入郵箱", trigger: "blur" },
217 - {
218 - validator: (rule, value, callback) => {
219 - if (!this.regExp.email.test(value)) {
220 - callback("您輸入的郵件格式有錯誤，請您更改！");
221 - } else if (this.regExp.emailPattern.test(value)) {
222 - callback("郵箱地址不允許存在特殊字符以及空格！");
223 - } else {
224 - callback();
225 - }
226 - },
227 - trigger: "blur",
228 - },
229 - ],
230 - tel: [
231 - { required: true, message: "請您輸入聯絡電話", trigger: "blur" },
232 - {
233 - validator: (rule, value, callback) => {
234 - if (!this.regExp.phoneExp.test(value)) {
235 - callback("不支持以下字符：、, ；, ‘, ’");
236 - } else if (value.length > 40) {
237 - callback(
238 - "聯絡電話最多可包含40個字元，而您輸入了" +
239 - value.length +
240 - "個字元。"
241 - );
242 - } else {
243 - callback();
244 - }
245 - },
246 - trigger: "blur",
247 - },
248 - ],
249 - extensionTel: [
250 - {
251 - required: false,
252 - validator: (rule, value, callback) => {
253 - if (value) {
254 - if (!this.regExp.phoneExp.test(value)) {
255 - callback("不支持以下字符：、, ；, ‘, ’");
256 - } else if (value.length > 10) {
257 - callback(
258 - "分機最多可包含10個字元，而您輸入了" +
259 - value.length +
260 - "個字元。"
261 - );
262 - } else {
263 - callback();
264 - }
265 - } else {
266 - callback();
267 - }
268 - },
269 - trigger: "blur",
270 - },
271 - ],
272 - phone: [
273 - {
274 - validator: (rule, value, callback) => {
275 - if (value) {
276 - if (!this.regExp.phoneExp.test(value)) {
277 - callback("不支持以下字符：、, ；, ‘, ’");
278 - } else if (value.length > 40) {
279 - callback(
280 - "行動電話最多可包含40個字元，而您輸入了" +
281 - value.length +
282 - "個字元。"
283 - );
284 - } else {
285 - callback();
286 - }
287 - } else {
288 - callback();
289 - }
290 - },
291 - trigger: "blur",
292 - },
293 - ],
294 - };
295 - this.$forceUpdate(() => {
296 - this.$refs["formDialogDataRef"].clearValidate();
297 - });
298 - return rules;
299 - },
300 - },
301 - methods: {
302 - openDialog(row) {
303 - this.dialogVisible = true;
304 - this.editFillBackInfo(row);
305 - this.tempId = row?.id;
306 - },
307 - closeDialog() {
308 - this.dialogVisible = false;
309 - },
310 - updateTemp() {
311 - let paramsData = {
312 - ...this.formData,
313 - id: this.tempId,
314 - };
315 - this.$refs.formDialogDataRef.validate((valid) => {
316 - if (valid) {
317 - this.updateLoading = true;
318 - updateTemplate(paramsData)
319 - .then((res) => {
320 - if (res.code == 200) {
321 - this.$message.success("保存成功");
322 - this.dialogVisible = false;
323 - this.$emit("updateSearch");
324 - } else {
325 - this.msgWarning(res.msg);
326 - }
327 - this.updateLoading = false;
328 - })
329 - .catch(() => {
330 - this.updateLoading = false;
331 - });
332 - }
333 - });
334 - },
335 - editFillBackInfo(data) {
336 - if(data){
337 - this.saveBtnText="更新";
338 - this.formData = {
339 - liaisons: data.liaisons,
340 - consigneeNo: data.consigneeNo,
341 - email: data.email,
342 - tel: data.tel,
343 - extensionTel: data.extensionTel,
344 - phone: data.phone,
345 - customsClearanceInstruction: data.customsClearanceInstruction,
346 - templateName: data.templateName,
347 - };
348 - }else{
349 - this.formData={};
350 - this.saveBtnText = "保存";
351 - }
352 -
353 - },// 检查模板是否重复
354 - checkTempName() {
355 - // this.formData.templateName
356 - this.$refs.formDialogDataRef.validate((valid) => {
357 - if (valid) {
358 - // this.dialogVisible = true;
359 - getTemByTemName(this.formData.templateName)
360 - .then((res) => {
361 - if (res.code == 200) {
362 - this.addTemplate();
363 - } else {
364 - if(this.saveBtnText=='保存'){
365 - this.$confirm(this.$t("fillIn.template.confirmCoverTemplate"), "提示", {
366 - confirmButtonText: this.$t("common.sureBtn"),
367 - cancelButtonText: this.$t("common.cancleBtn"),
368 - type: "warning",
369 - }).then(() => {
370 - this.tempId = res.data.id;
371 - this.updateTemp(this.formData);
372 - this.dialogVisible = false;
373 - });
374 - }else{
375 - this.tempId = res.data.id;
376 - this.updateTemp(this.formData);
377 - this.dialogVisible = false;
378 - }
379 -
380 - }
381 - this.$parent.findCurTemList();
382 - })
383 - .catch((res) => {
384 - this.$message.error(res);
385 - this.dialogVisible = false;
386 - });
387 - }
388 - });
389 -
390 - },// 新增模板
391 - addTemplate() {
392 - let paramsData = {
393 - ...this.formData,
394 - };
395 - addSaveTemplate(paramsData)
396 - .then((res) => {
397 - if (res.code == 200) {
398 - this.$message.success("保存成功");
399 - } else {
400 - this.msgWarning(res.msg);
401 - }
402 - this.dialogVisible = false;
403 - })
404 - .catch(() => {
405 - this.dialogVisible = false;
406 - });
407 - },
408 - },
409 -};
410 -</script>
411 -
412 -<style lang="scss" scoped>
413 -::v-deep .el-dialog {
414 - padding: 20px 100px;
415 -}
416 -::v-deep .el-dialog__header {
417 - text-align: center;
418 -}
419 -.textarea-box {
420 - margin-bottom: 5px;
421 - ::v-deep .el-form-item .el-form-item__content {
422 - position: static !important;
423 - }
424 - .label {
425 - height: 24px;
426 - font-size: 0.75rem;
427 - font-weight: 700;
428 - background-color: #f2f2f2;
429 - color: #444;
430 - height: max-content;
431 - padding: 0.6rem 0 0 0.6rem;
432 - line-height: 14px;
433 - }
434 -}
435 -</style>
1 -<template>
2 - <div class="fill-step">
3 - <!-- <div
4 - v-for="(item, index) in steps"
5 - :key="index"
6 - :class="
7 - item.state1 == curStep
8 - ? 'edit-color'
9 - : stepStates.includes(item.state2)
10 - ? setSelectIndex==2 && item.state1==2 ? 'cur-color':'finish-color'
11 - : 'cur-color'
12 - "
13 - >
14 -
15 - <div>
16 - <i
17 - class="el-icon-success"
18 - v-if="stepStates.includes(item.state2) && item.state1 != curStep "
19 - ></i>
20 - <i class="el-icon-success" v-else></i>
21 - <span> {{ item.label }}</span>
22 - </div>
23 - <div v-if="setSelectIndex==2 && item.state1==2"></div>
24 - <el-button
25 - type="text"
26 - v-else-if="stepStates.includes(item.state2) && item.state1 != curStep"
27 - @click="editStepBtn(item)"
28 - :loading="editLoading && curClickStep == item.state1"
29 - >編輯</el-button
30 - >
31 - </div> -->
32 - <div
33 - v-for="(item, index) in steps"
34 - :key="index"
35 - :class="item.state1 == curStep
36 - ? 'edit-color'
37 - : stepStates.includes(item.state2)
38 - ? setSelectIndex == 2 && item.state1 == 2 ? 'cur-color' : 'finish-color'
39 - : 'cur-color'
40 - "
41 - >
42 -
43 - <div>
44 - <i
45 - class="el-icon-success"
46 - v-if="stepStates.includes(item.state2) && item.state1 != curStep"
47 - ></i>
48 - <i class="el-icon-success" v-else></i>
49 - <span> {{ item.label }}</span>
50 - </div>
51 - <div v-if="setSelectIndex == 2 && item.state1 == 2"></div>
52 - <el-button
53 - type="text"
54 - v-else-if="stepEdit.includes(item.state2) && item.state1 != curStep"
55 - @click="editStepBtn(item)"
56 - :loading="editLoading && curClickStep == item.state1"
57 - :disabled="editDisabled"
58 - >編輯</el-button
59 - >
60 - </div>
61 - </div>
62 -</template>
63 -<script>
64 -import { mapGetters } from "vuex";
65 -export default {
66 - props: {
67 - curStep: {
68 - type: Number,
69 - default() {
70 - return 1;
71 - },
72 - },
73 - //控制颜色
74 - stepStates: {
75 - type: Array,
76 - default() {
77 - return [];
78 - },
79 - },
80 - //控制编辑按钮显示
81 - stepEdit: {
82 - type: Array,
83 - default() {
84 - return [];
85 - },
86 - },
87 - editLoading: {
88 - type: Boolean,
89 - default() {
90 - return false;
91 - },
92 - },
93 - editDisabled: {
94 - type: Boolean,
95 - default() {
96 - return false;
97 - },
98 - },
99 - setSelectIndex: {
100 - type: Number,
101 -
102 - },
103 - },
104 - data() {
105 - return {
106 - curClickStep: null,
107 - };
108 - },
109 - created() {},
110 - computed: {
111 - steps() {
112 - return [
113 - {
114 - label: this.$t("fillIn.step1"),
115 - state1: 1,
116 - state2: "finish1",
117 - },
118 - {
119 - label: this.$t("fillIn.step2"),
120 - state1: 2,
121 - state2: "finish2",
122 - },
123 - {
124 - label: this.$t("fillIn.step3"),
125 - state1: 3,
126 - state2: "finish3",
127 - },
128 - ];
129 - },
130 - },
131 - methods: {
132 - editStepBtn(val) {
133 - this.curClickStep = val.state1;
134 - let filtStep = this.stepStates.filter((item) => item != val.state2);
135 - this.$emit("setStepStates", [...new Set(filtStep)]);
136 - this.$emit("editNextStep", {
137 - curStep: val.state1,
138 - leaveStep: this.curStep,
139 - });
140 - },
141 - },
142 -};
143 -</script>
144 -
145 -<style lang="scss" scoped>
146 -.fill-step {
147 - padding: 16px 16px;
148 - line-height: 40px;
149 - // display: flex;
150 - // flex-direction: column
151 - .cur-color {
152 - display: flex;
153 - justify-content: space-between;
154 - color: #919191;
155 - }
156 - .edit-color {
157 - display: flex;
158 - justify-content: space-between;
159 - color: #4d148c;
160 - }
161 - .finish-color {
162 - display: flex;
163 - justify-content: space-between;
164 - font-weight: 500;
165 - font-size: 14px;
166 - color: #008a00;
167 - }
168 -}
169 -</style>
1 -<template>
2 - <div class="wrap">
3 - <div v-if="showFillForm" class="content-box">
4 - <div class="header">
5 - <el-button
6 - type="text"
7 - @click="saveForm"
8 - :loading="editLoading"
9 - :disabled="editDisabled"
10 - >{{ $t("fillIn.saveForm") }}</el-button
11 - >
12 - <el-button type="text" v-if="curStep != 3" @click="allClear">{{
13 - $t("fillIn.allClear")
14 - }}</el-button>
15 - </div>
16 - <div class="view-box">
17 - <div class="main-box">
18 - <div class="left-box">
19 - <!-- <div><div style="width: 500px; height: 100px; background-color: red; position: absolute; left: 30%;"></div></div> -->
20 - <step-one
21 - ref="stepOneRef"
22 - v-show="curStep == 1"
23 - :stepStates="stepStates"
24 - :declareId="declareId"
25 - :step1Id="step1Id"
26 - :generateAutoPdf="generatePdf"
27 - @addNextStep="addNextStep"
28 - @setStepStates="setStepStates"
29 - @clickLoading="clickLoading"
30 - @selectIndex="selectIndex"
31 - @clearStep2Data="clearStep2Data"
32 - ></step-one>
33 - <step-two
34 - ref="stepTwoRef"
35 - v-show="curStep == 2"
36 - :stepStates="stepStates"
37 - :step2Id="step2Id"
38 - :declareId="declareId"
39 - :generateAutoPdf="generatePdf"
40 - @addNextStep="addNextStep"
41 - @setStepStates="setStepStates"
42 - @clickLoading="clickLoading"
43 - ></step-two>
44 - <step-three
45 - ref="stepThreeRef"
46 - v-show="curStep == 3"
47 - :step3Id="step3Id"
48 - :declareId="declareId"
49 - :stepStates="stepStates"
50 - @addNextStep="addNextStep"
51 - @setStepStates="setStepStates"
52 - @sucSubmit="sucSubmit"
53 - @clickLoading="clickLoading"
54 - @clickDisabled="clickDisabled"
55 - ></step-three>
56 - </div>
57 - <div class="right-box">
58 - <fill-step
59 - :curStep="curStep"
60 - :stepStates="stepStates"
61 - :stepEdit="stepEdit"
62 - :editLoading="editLoading"
63 - :editDisabled="editDisabled"
64 - :setSelectIndex="setSelectIndex"
65 - @editNextStep="editNextStep"
66 - @setStepStates="setStepStates"
67 - ></fill-step>
68 - </div>
69 - </div>
70 - </div>
71 - </div>
72 - <div v-else class="nav-page-box">
73 - <div class="flex-box">
74 - <div align="center" class="suc-title">
75 - <i class="el-icon-circle-check"></i>
76 - <span>感謝您使用聯邦快遞線上申報平臺</span>
77 - </div>
78 - <div class="nav-btn-box">
79 - <p class="declare-tip">接下來您還可以進行如下流程</p>
80 - <div class="declare-box">
81 - <div class="declare" style="margin-right: 50px">
82 - <svg-icon class="el-icon-user-solid" icon-class="newDeclare" />
83 - <el-button
84 - class="entrySaveButton entrySaveButton-background"
85 - type="primary"
86 - @click="addNewDeclara"
87 - >
88 - 申報新提單
89 - </el-button>
90 - </div>
91 - <div class="declare">
92 - <svg-icon class="el-icon-user-solid" icon-class="declareSearch" />
93 - <el-button
94 - class="entrySaveButton entrySaveButton-background"
95 - type="primary"
96 - @click="goDeclaraSearch"
97 - >
98 - 提單査詢
99 - </el-button>
100 - </div>
101 - </div>
102 - </div>
103 - </div>
104 - </div>
105 - </div>
106 -</template>
107 -<script>
108 -import fillStep from "./fillStep.vue";
109 -import stepOne from "./stepOne.vue";
110 -import stepTwo from "./stepTwo.vue";
111 -import stepThree from "./stepThree.vue";
112 -import { findDetailsById } from "@/api/fillForm.js";
113 -export default {
114 - name: "declarationInput",
115 - components: {
116 - stepOne,
117 - stepTwo,
118 - fillStep,
119 - stepThree,
120 - },
121 - props: {},
122 - data() {
123 - return {
124 - topSaveLoading: false,
125 - formTemName: "",
126 - curStep: 1,
127 - step1Id: null,
128 - step2Id: null,
129 - step3Id: null,
130 - showFillForm: true,
131 - stepStates: [],
132 - stepEdit: [],
133 - declareId: null,
134 - editLoading: false,
135 - editDisabled: false,
136 - setSelectIndex: null,
137 - generatePdf: false,
138 - };
139 - },
140 - computed: {},
141 - created() {
142 - if (this.$route.params.id) {
143 - this.curStep = JSON.parse(this.$route.params.step);
144 - this.declareId = JSON.parse(this.$route.params.id);
145 - this.getFindDetailsById("auto");
146 - }
147 - },
148 - methods: {
149 - // 保存按钮
150 - saveForm() {
151 - this.editLoading = true;
152 - if (this.curStep == 1) {
153 - this.$refs.stepOneRef.nextStepOne("topSave");
154 - } else if (this.curStep == 2) {
155 - this.$refs.stepTwoRef.nextStepTwo("topSave");
156 - } else if (this.curStep == 3) {
157 - this.$refs.stepThreeRef.nextStepThree("topSave");
158 - }
159 - },
160 - // 全部清除按钮
161 - allClear() {
162 - if (this.curStep == 1) {
163 - this.$refs.stepOneRef.clearFormStep1();
164 - } else if (this.curStep == 2) {
165 - this.$refs.stepTwoRef.clearFormStep2();
166 - }
167 - },
168 - // 改变右侧菜单栏的状态
169 - //list: 校验通过 显示绿色 del: 删除 stepEdit:编辑按钮控制
170 - setStepStates(list, stepEdit, delList, delEdit) {
171 - this.stepStates = [
172 - ...new Set(
173 - this.stepStates.concat(list).filter((item) => item !== delList)
174 - ),
175 - ];
176 - this.stepEdit = [
177 - ...new Set(
178 - this.stepEdit.concat(stepEdit).filter((item) => item !== delEdit)
179 - ),
180 - ];
181 - },
182 - // 跳转对应的步骤并回填信息
183 - addNextStep(obj) {
184 - this.curStep = obj.curStep;
185 - this.declareId = obj.declareId || null;
186 - this.getFindDetailsById("back");
187 - },
188 - // 编辑时跳转到相应的步骤
189 - editNextStep(obj) {
190 - if (obj.leaveStep == 1) {
191 - if (this.$refs.stepOneRef.formData.fileSelect.length <= 0) {
192 - this.$alert("請您選擇出口報關檢核表製作選項", "提示", {
193 - confirmButtonText: "確定",
194 - type: "warning",
195 - });
196 - return;
197 - }
198 - }
199 - let msg = this.checkStepForm(obj);
200 -
201 - if (!msg) {
202 - if (obj.leaveStep == 1) {
203 - this.$refs.stepOneRef.nextStepOne(obj.curStep);
204 - } else if (obj.leaveStep == 2) {
205 - this.$refs.stepTwoRef.nextStepTwo(obj.curStep);
206 - } else if (obj.leaveStep == 3) {
207 - this.$refs.stepThreeRef.nextStepThree(obj.curStep);
208 - }
209 - }
210 - },
211 - checkStepForm(obj) {
212 - var msg = "";
213 - var msg1 = "";
214 - this.generatePdf = false;
215 - if (obj.curStep == 3) {
216 - this.generatePdf = true;
217 - //强制校验
218 - let stepTwoCheckResult = "";
219 - let stepOneCheckResult = this.$refs.stepOneRef.checkForm();
220 - if (this.$refs.stepOneRef.formData.fileSelect != 2) {
221 - stepTwoCheckResult = this.$refs.stepTwoRef.checkForm();
222 - }
223 -
224 - if (stepOneCheckResult.length > 0) {
225 - msg = "聯絡方式與特殊交待事項\n";
226 - }
227 - if (stepTwoCheckResult.length > 0) {
228 - msg1 += "出口報關檢核表";
229 - }
230 -
231 - if (msg || msg1) {
232 - const h = this.$createElement;
233 - this.$msgbox({
234 - message: h("p", { style: { margin: "30px 50px 10px 50px" } }, [
235 - h(
236 - "i",
237 - {
238 - style: {
239 - fontSize: "40px",
240 - display: "block",
241 - color: "#FF6600",
242 - },
243 - attrs: {
244 - class: "el-icon-warning",
245 - id: "commentContent",
246 - },
247 - },
248 - null
249 - ),
250 - h(
251 - "div",
252 - {
253 - style: {
254 - fontSize: "18px",
255 - fontWeight: "700",
256 - margin: "15px 0px",
257 - },
258 - attrs: { class: "font-style" },
259 - },
260 - "以下頁面校驗未通過!"
261 - ),
262 - h(
263 - "div",
264 - {
265 - style: { fontSize: "15px", fontWeight: "700" },
266 - attrs: { class: "font-style" },
267 - },
268 - msg
269 - ),
270 - h(
271 - "div",
272 - {
273 - style: { fontSize: "15px", fontWeight: "700" },
274 - attrs: { class: "font-style" },
275 - },
276 - msg1
277 - ),
278 - // h('div', { attrs: { class: 'font-style' } }, aaa)
279 - ]),
280 - confirmButtonClass: "confirm-button",
281 - confirmButtonText: "確定",
282 - iconClass: "el-icon-warning",
283 - center: true,
284 - });
285 - }
286 -
287 - // console.log(stepOneCheckResult);
288 - }
289 - return msg || msg1;
290 - },
291 - // 完成提交时打开导航页
292 - sucSubmit() {
293 - this.showFillForm = false;
294 - },
295 - // 增加新的提单
296 - addNewDeclara() {
297 - this.formTemName = "";
298 - this.curStep = 1;
299 - this.step1Id = null;
300 - this.step2Id = null;
301 - this.step3Id = null;
302 - this.stepStates = [];
303 - (this.stepEdit = []), (this.declareId = null);
304 - this.showFillForm = true;
305 - this.setSelectIndex = null;
306 - this.generatePdf = false;
307 - this.$store.dispatch("fillForm/addDeliveryNo", "");
308 - },
309 - // 跳转到提单查询页面
310 - goDeclaraSearch() {
311 - this.$router
312 - .push({
313 - name: "declareQuery",
314 - })
315 - .catch(() => {});
316 - },
317 - // 获取提单的全部信息并回填，初始化右侧菜单栏的状态
318 - getFindDetailsById(type) {
319 - findDetailsById(this.declareId)
320 - .then((res) => {
321 - if (res.code == 200) {
322 - let resData = res.data;
323 - this.declareId = resData.declare.id;
324 - this.step1Id = resData.declare.deliveryInfoId;
325 - this.step2Id = resData.declare.exportInspectionInfoId;
326 - this.step3Id = resData.declare.customsFileId;
327 - this.$store.dispatch(
328 - "fillForm/addDeliveryNo",
329 - resData.declare.deliveryNo
330 - );
331 - //加载右侧编辑状态
332 - // if (type == "auto") {
333 - let deliveryInfoOperStatus = resData.declare.deliveryInfoOperStatus;
334 - let exportInspectionOperStatus =
335 - resData.declare.exportInspectionOperStatus;
336 - let customsFileOperStatus = resData.declare.customsFileOperStatus;
337 - if (deliveryInfoOperStatus) {
338 - if (deliveryInfoOperStatus == 1) {
339 - this.setStepStates(["finish1"], ["finish1"], "", "");
340 - } else {
341 - this.setStepStates([], ["finish1"], "finish1", "");
342 - }
343 - // this.stepEdit.push("finish1");
344 - }
345 - if (exportInspectionOperStatus) {
346 - if (exportInspectionOperStatus == 1) {
347 - this.setStepStates(["finish2"], ["finish2"], "", "");
348 - } else {
349 - this.setStepStates([], ["finish2"], "finish2", "");
350 - }
351 - // this.stepEdit.push("finish2");
352 - }
353 - if (customsFileOperStatus) {
354 - if (customsFileOperStatus == 1) {
355 - this.setStepStates(["finish3"], ["finish3"], "", "");
356 - } else {
357 - if (exportInspectionOperStatus) {
358 - this.setStepStates([], ["finish3"], "finish3", "");
359 - }
360 - }
361 - // this.stepEdit.push("finish3");
362 - }
363 - this.stepStates = [...new Set(this.stepStates)];
364 - this.stepEdit = [...new Set(this.stepEdit)];
365 - // }
366 - //回填页面数据
367 - this.$refs.stepOneRef.editFillBackStep1(
368 - res.data.declareInfo,
369 - "auto"
370 - );
371 - this.$refs.stepTwoRef.editFillBackStep2(res.data.declareCheckInfo);
372 - this.$refs.stepThreeRef.editFillBackStep3(res.data.declare);
373 -
374 - // if (this.curStep == 1 && this.step1Id) {
375 - // this.$refs.stepOneRef.editFillBackStep1(
376 - // res.data.declareInfo,
377 - // "auto"
378 - // );
379 - // } else if (this.curStep == 2 && this.step2Id) {
380 - // this.$refs.stepTwoRef.editFillBackStep2(
381 - // res.data.declareCheckInfo
382 - // );
383 - // } else if (this.curStep == 3) {
384 - // this.$refs.stepThreeRef.editFillBackStep3();
385 - // }
386 - } else {
387 - this.msgWarning(res.msg);
388 - }
389 - })
390 - .catch((err) => {
391 - console.log(err);
392 - });
393 - },
394 - // 点击编辑时改变loading的状态
395 - clickLoading(val) {
396 - this.editLoading = val;
397 - },
398 - // 上传文件时不允许操作编辑和保存
399 - clickDisabled(val) {
400 - this.editDisabled = val;
401 - },
402 - selectIndex(val) {
403 - this.setSelectIndex = val;
404 - if (val == 1) {
405 - if (
406 - this.stepStates &&
407 - this.stepStates.includes("finish3") &&
408 - !this.step2Id
409 - ) {
410 - this.setStepStates([], [], "", "finish3");
411 - }
412 - } else {
413 - if (this.stepStates && this.step3Id) {
414 - this.setStepStates([], ["finish3"], "", "");
415 - }
416 - }
417 - },
418 - clearStep2Data() {
419 - this.$refs.stepTwoRef.clearFormStep2();
420 - this.$refs.stepTwoRef.clearSlipId();
421 - },
422 - },
423 - // 路由离开时触发的逻辑
424 - beforeDestroy() {
425 - this.$store.dispatch("fillForm/addDeliveryNo", "");
426 -
427 - if (this.curStep == 1) {
428 - this.$refs.stepOneRef.nextStepOne("topSave", false);
429 - } else if (this.curStep == 2) {
430 - this.$refs.stepTwoRef.nextStepTwo("topSave", false);
431 - } else if (this.curStep == 3) {
432 - this.$refs.stepThreeRef.nextStepThree("topSave", false);
433 - }
434 - },
435 -};
436 -</script>
437 -
438 -<style lang="scss" scoped>
439 -@import "@/assets/styles/variables.scss";
440 -.confirm-button {
441 - width: 200px !important;
442 - height: 200px !important;
443 -}
444 -.font-style {
445 - line-height: 30px;
446 - color: #000;
447 - font-family: FedExSansArabic, FedExSans, Arial, sans-serif !important;
448 -}
449 -.wrap {
450 - height: 100%;
451 - width: 100%;
452 - font-size: 14px;
453 - position: relative;
454 - .content-box {
455 - height: 100%;
456 - }
457 - // padding-bottom: 100px;
458 - .header {
459 - width: 100%;
460 - height: 48px;
461 - line-height: 48px;
462 - background: #fff;
463 - text-align: right;
464 - padding-right: 22px;
465 - }
466 - .view-box {
467 - height: 100%;
468 - overflow: auto;
469 - // margin: 0 auto !important;
470 - padding-bottom: 60px;
471 - .main-box {
472 - height: auto;
473 - display: flex;
474 - padding: 12px;
475 - position: relative;
476 - .left-box {
477 - width: calc(100% - 291px);
478 - background: #fff;
479 - margin-right: 12px;
480 - padding: 20px 20px 50px 20px;
481 - }
482 - .right-box {
483 - width: 291px;
484 - height: 232px;
485 - background: #fff;
486 - }
487 - }
488 - }
489 - .nav-page-box {
490 - height: 100%;
491 - display: flex;
492 - align-items: center;
493 - justify-content: center;
494 - .flex-box {
495 - width: 75%;
496 - height: 80%;
497 - .suc-title {
498 - font-size: 24px;
499 - font-weight: 200;
500 - line-height: 36px;
501 - color: #333333;
502 - .el-icon-circle-check {
503 - color: #008a16;
504 - margin: 0 6px 16px 0;
505 - }
506 - }
507 - .nav-btn-box {
508 - width: 100%;
509 - height: calc(100% - 46px);
510 - background: #fff;
511 - text-align: center;
512 - vertical-align: middle;
513 - padding: 30px;
514 - .declare-tip {
515 - font-size: 20px;
516 - font-weight: 400;
517 - line-height: 30px;
518 - }
519 - .declare-box {
520 - display: flex;
521 - align-items: center;
522 - justify-content: center;
523 - width: 100%;
524 - height: 100%;
525 -
526 - .declare {
527 - display: flex;
528 - flex-direction: column;
529 - border: 1px solid #e3e3e3;
530 - width: 30%;
531 - height: 75%;
532 - min-width: 240px;
533 - align-items: center;
534 - justify-content: center;
535 - .svg-icon {
536 - // vertical-align: top !important;
537 - width: 50%;
538 - height: 50%;
539 - margin-bottom: 22px;
540 - }
541 - .el-button {
542 - width: 200px;
543 - }
544 - }
545 - }
546 - }
547 - }
548 - }
549 -}
550 -</style>
1 -<template>
2 - <div>
3 - <div class="step-name">
4 - <i class="el-icon-circle-check"></i>
5 - <span>{{ $t("fillIn.step1") }}</span>
6 - </div>
7 - <div class="content">
8 - <div class="prompt">
9 - <p>{{ $t("fillIn.prompt1") }}</p>
10 - <p>{{ $t("fillIn.prompt2") }}</p>
11 - </div>
12 - <FedexAlert
13 - v-if="errorTip.length > 0"
14 - class="mb20"
15 - :tipList="errorTip"
16 - @close="errorTipClose"
17 - />
18 - <div class="warning-box">
19 - <div class="warning">
20 - &nbsp;
21 - <i class="el-icon-warning-outline"></i>
22 - <span>&nbsp;{{ $t("fillIn.warning1") }}</span>
23 - <a @click="downloadPdfs('ckbghjb', '出口報關檢核表')">{{
24 - $t("fillIn.link1")
25 - }}</a>
26 - </div>
27 - <div class="warning warning-bottom">
28 - &nbsp;
29 - <i class="el-icon-warning-outline"></i>
30 - <span>&nbsp;{{ $t("fillIn.warning2_1") }}</span>
31 - <a @click="downloadPdfs('gawts', '個案委任書')">{{
32 - $t("fillIn.link2")
33 - }}</a>
34 - <span>{{ $t("fillIn.warning2_2") }}</span>
35 - </div>
36 - </div>
37 - <!-- <div align="right">
38 - <el-button type="text" @click="selectTem"
39 - ><svg-icon class="el-icon-user-solid" icon-class="fedexSelectList" />
40 - {{ $t("fillIn.selectTem") }}</el-button
41 - >
42 - </div> -->
43 -
44 - <el-form
45 - class="fedexFormStyle"
46 - ref="formDataRef"
47 - :model="formData"
48 - :rules="rules"
49 - label-position="top"
50 - style="margin-top: 20px"
51 - @submit.native.prevent
52 - >
53 - <el-row :gutter="10">
54 - <el-col :span="24">
55 - <Formitem
56 - :label="$t('fillIn.number')"
57 - prop="deliveryNo"
58 - class="fedex_input_count"
59 - >
60 - <el-input
61 - type="text"
62 - :id="'inputInner--deliveryNo'"
63 - maxlength="12"
64 - v-model.trim="formData.deliveryNo"
65 - >
66 - </el-input>
67 - </Formitem>
68 - </el-col>
69 - </el-row>
70 - <el-row>
71 - <div align="left" class="templateStyle">
72 - <el-popover
73 - placement="bottom"
74 - width="675"
75 - :offset="280"
76 - class="popover-data"
77 - ref="popoverRef"
78 - trigger="click"
79 - >
80 - <button slot="reference" style="font-size: 14px">
81 - {{ $t("fillIn.selectTem") }} <i class="el-icon-arrow-down"></i>
82 - </button>
83 - <el-input
84 - type="text"
85 - class="fedexRadiusTowInput"
86 - @clear="dropDownSearch()"
87 - clearable
88 - placeholder="支持使用者名稱，聯絡人，電話，貨物輸出統一編號"
89 - ref="noEmptyInput"
90 - v-model="dropDownValue"
91 - @keyup.native="dropDownSearch"
92 - >
93 - </el-input>
94 - <!-- <el-scrollbar class="scrollbar-wrapper"> -->
95 - <div
96 - style="margin-top: 10px; max-height: 280px"
97 - class="popoverlines"
98 - v-loading="tempLoading"
99 - >
100 - <div v-for="(item, index) in templateList">
101 - <div
102 - class="popover-line"
103 - @click="editFillBackStep1(item, 'dialog')"
104 - >
105 - <div>{{ item.templateName }}</div>
106 - <div>
107 - {{ item.liaisons }}，{{ item.tel }}，{{
108 - item.consigneeNo
109 - }}
110 - </div>
111 - </div>
112 - </div>
113 - <div v-if="templateList.length <= 0" style="text-align: center">
114 - 暫無資料
115 - </div>
116 - </div>
117 - <!-- </el-scrollbar> -->
118 - </el-popover>
119 - <!-- <el-select v-model="valueMeta" class="templateSelect" collapse-tags :placeholder="$t('fillIn.selectTem')" >
120 - <div class="el-input" style="width:90%;margin-left:5%; margin-top: 10px; " >
121 - <el-input type="text" class="fedexRadiusTowInput" placeholder="支持使用者名称，联系人，電話" ref="noEmptyInput" v-model="dropDownValue" @keyup.native="dropDownSearch">
122 - </el-input>
123 - </div>
124 - <div slot="empty" class="el-input" style="width:90%;margin-left:5%; margin-top: 16px; text-align: center; " >
125 - <el-input type="text" class="fedexRadiusTowInput " placeholder="支持使用者名称，联系人，电话" ref="emptyInput" v-model="dropDownValue" @keyup.native="dropDownSearch">
126 - </el-input>
127 - <div style="margin-top: 20px; margin-bottom: 20px; color: rgb(134, 134, 134);">暂无数据</div>
128 - </div>
129 - <div style="margin-top: 15px; width: 100%;">
130 - <el-option v-for="(item, index) in templateList" :value="item.templateName" :key="index" style="height: 50px; border-top: 1px solid #ECEDEC;">
131 - <div @click="editFillBackStep1(item, 'dialog')" >
132 - <div :class="item.templateName == selectVal ? 'textColor' : ''" >{{ item.templateName }}</div>
133 - <div :class="item.templateName == selectVal ? 'textColor' : ''" style=" margin-top: -17px;">{{ item.liaisons }}，{{ item.tel }}，{{ item.consigneeNo }}</div>
134 - </div>
135 - </el-option>
136 - </div>
137 - </el-select> -->
138 - <el-button type="text" @click="selectTem" style="margin-left: 15px"
139 - ><svg-icon
140 - class="el-icon-user-solid"
141 - icon-class="fedexSelectList"
142 - />
143 - {{ $t("fillIn.manageTem") }}</el-button
144 - >
145 - </div>
146 - </el-row>
147 - <el-row :gutter="10">
148 - <el-col :span="12">
149 - <Formitem
150 - :label="$t('fillIn.placeholder')"
151 - prop="templateName"
152 - class="fedex_input_count"
153 - >
154 - <el-input
155 - type="text"
156 - :id="'inputInner--templateName'"
157 - v-model="formData.templateName"
158 - maxlength="20"
159 - >
160 - </el-input>
161 - </Formitem>
162 - </el-col>
163 - <el-col :span="12">
164 - <Formitem
165 - :label="$t('fillIn.contacts')"
166 - prop="liaisons"
167 - class="fedex_input_count"
168 - >
169 - <el-input
170 - type="text"
171 - :id="'inputInner--liaisons'"
172 - maxlength="18"
173 - v-model="formData.liaisons"
174 - >
175 - </el-input>
176 - </Formitem>
177 - </el-col>
178 - </el-row>
179 - <el-row :gutter="10">
180 - <el-col :span="12">
181 - <Formitem
182 - :label="$t('fillIn.exporterNum')"
183 - prop="consigneeNo"
184 - class="fedex_input_count"
185 - >
186 - <el-input
187 - type="text"
188 - :id="'inputInner--consigneeNo'"
189 - maxlength="12"
190 - oninput="value = value.replace(/\s+/g, '')"
191 - v-model="formData.consigneeNo"
192 - >
193 - </el-input>
194 - </Formitem>
195 - </el-col>
196 - <el-col :span="12">
197 - <Formitem
198 - :label="$t('fillIn.email')"
199 - prop="email"
200 - class="fedex_input_count"
201 - >
202 - <el-input
203 - type="text"
204 - :id="'inputInner--email'"
205 - v-model="formData.email"
206 - maxlength="50"
207 - >
208 - </el-input>
209 - </Formitem>
210 - </el-col>
211 - </el-row>
212 - <el-row :gutter="10">
213 - <el-col :span="8">
214 - <Formitem
215 - :label="$t('fillIn.phone1')"
216 - prop="tel"
217 - class="fedex_input_count"
218 - >
219 - <el-input
220 - type="text"
221 - :id="'inputInner--tel'"
222 - maxlength="19"
223 - v-model="formData.tel"
224 - >
225 - </el-input>
226 - </Formitem>
227 - </el-col>
228 - <el-col :span="8">
229 - <Formitem
230 - :label="$t('fillIn.phone2')"
231 - prop="extensionTel"
232 - class="fedex_input_count"
233 - >
234 - <el-input
235 - type="text"
236 - :id="'inputInner--extensionTel'"
237 - maxlength="10"
238 - v-model="formData.extensionTel"
239 - >
240 - </el-input>
241 - </Formitem>
242 - </el-col>
243 - <el-col :span="8">
244 - <Formitem
245 - :label="$t('fillIn.phone3')"
246 - prop="phone"
247 - class="fedex_input_count"
248 - >
249 - <el-input
250 - type="text"
251 - :id="'inputInner--phone'"
252 - maxlength="34"
253 - v-model="formData.phone"
254 - >
255 - </el-input>
256 - </Formitem>
257 - </el-col>
258 - </el-row>
259 - <el-row>
260 - <el-col :span="24">
261 - <div class="textarea-box">
262 - <el-form-item
263 - :label="$t('fillIn.indicate')"
264 - prop="customsClearanceInstruction"
265 - class="label"
266 - >
267 - <el-input
268 - type="textarea"
269 - :rows="6"
270 - v-model="formData.customsClearanceInstruction"
271 - maxlength="1200"
272 - style="white-space: pre-wrap; word-break: break-all"
273 - show-word-limit
274 - >
275 - </el-input>
276 - </el-form-item>
277 - </div>
278 - </el-col>
279 - </el-row>
280 - <el-row>
281 - <el-col :span="24" style="margin-top: 10px">
282 - <el-checkbox
283 - v-model="saveTemplate"
284 - :label="$t('fillIn.saveTem')"
285 - ></el-checkbox>
286 - </el-col>
287 - </el-row>
288 - <el-row>
289 - <el-col :span="24" class="select-box" style="margin-top: 20px">
290 - <Formitem
291 - :label="$t('fillIn.checkList')"
292 - prop="fileSelect"
293 - style="height: 120px"
294 - >
295 - <div style="margin-top: 40px; margin-left: 13px">
296 - <el-checkbox-group
297 - v-model="formData.fileSelect"
298 - @change="handleCheckType"
299 - class="checkBoxError"
300 - style="line-height: 25px; margin-top: 50px"
301 - >
302 - <el-checkbox
303 - v-for="(item, index) in checkTypeList"
304 - :label="item.value"
305 - :key="index"
306 - >
307 - {{ item.label }}
308 - </el-checkbox>
309 - </el-checkbox-group>
310 - </div>
311 - <div style="margin-top: -6px">&nbsp;</div>
312 - </Formitem>
313 - </el-col>
314 - </el-row>
315 - </el-form>
316 - <!-- <fill-form ref="fillFormRef"></fill-form> -->
317 - <div align="center" class="entrySave">
318 - <el-button
319 - class="entrySaveButton entrySaveButton-background"
320 - @click="nextStepOne('save')"
321 - :loading="step1Loading"
322 - >
323 - {{ $t("fillIn.nextStep") }}
324 - </el-button>
325 - </div>
326 - </div>
327 - <tem-dialog
328 - ref="temDialogRef"
329 - @editTemBtn="editTemBtn"
330 - @useTemp="editFillBackStep1"
331 - ></tem-dialog>
332 - <!-- <edit-tem-dialog
333 - ref="editTemDialogRef"
334 - @updateSearch="updateSearch"
335 - ></edit-tem-dialog> -->
336 - </div>
337 -</template>
338 -<script>
339 -import temDialog from "./temDialog.vue";
340 -import editTemDialog from "./editTemDialog.vue";
341 -import {
342 - saveStepOne,
343 - updateStepOne,
344 - getTemById,
345 - getTemByTemName,
346 - deleteTemById,
347 - findCurUserTem,
348 - updateTemplate,
349 - addSaveTemplate,
350 - findTempListByName,
351 - findTempListByAll,
352 - generatePdf,
353 - generateStepOnePdf,
354 -} from "@/api/fillForm.js";
355 -import { downLoadPdf } from "@/utils/zipdownload";
356 -import { debounce } from "@/utils";
357 -export default {
358 - components: {
359 - temDialog,
360 - editTemDialog,
361 - },
362 - props: {
363 - stepStates: {
364 - type: Array,
365 - default() {
366 - return [];
367 - },
368 - },
369 - step1Id: {
370 - type: Number,
371 - default() {
372 - return null;
373 - },
374 - },
375 - declareId: {
376 - type: Number,
377 - default() {
378 - return null;
379 - },
380 - },
381 - generateAutoPdf: {
382 - type: Boolean,
383 - default() {
384 - return false;
385 - },
386 - },
387 - },
388 - data() {
389 - return {
390 - dropDownValue: "",
391 - optionsMetaAll: [],
392 - optionsMetaShow: [],
393 - valueMeta: "",
394 - selectVal: "",
395 - errorTip: [],
396 - fillFormData: {},
397 - declareInfoId: null,
398 - templateList: [],
399 - saveTemplate: false,
400 - formData: {
401 - deliveryNo: "",
402 - liaisons: "",
403 - consigneeNo: "",
404 - email: "",
405 - tel: "",
406 - extensionTel: "",
407 - phone: "",
408 - customsClearanceInstruction: "",
409 - fileSelect: [],
410 - createTime: null,
411 - createName: null,
412 - status: null,
413 - templateName: "",
414 - },
415 - showSaveTem: false,
416 - step1Loading: false,
417 - temLoading: false,
418 - slipId: null,
419 - tempLoading: false,
420 - checkPass: false,
421 - };
422 - },
423 - mounted() {
424 - // console.log(this.$refs.popover-lines);
425 - },
426 - computed: {
427 - checkTypeList() {
428 - return [
429 - {
430 - label: "立即製作出口報關檢核表，不需要列印，完成時會自動上傅",
431 - value: 1,
432 - },
433 - {
434 - label: "使用已製作完成的出口報關檢核表，並與其他報關文件一起上傳",
435 - value: 2,
436 - },
437 - ];
438 - },
439 - rules() {
440 - let rules = {
441 - deliveryNo: [
442 - {
443 - required: true,
444 - message: this.$t("fillIn.check.number1"),
445 - trigger: "blur",
446 - },
447 - {
448 - validator: (rule, value, callback) => {
449 - if (!this.regExp.billExp.test(value)) {
450 - callback(this.$t("fillIn.check.number2"));
451 - } else {
452 - callback();
453 - }
454 - },
455 - trigger: "blur",
456 - },
457 - ],
458 - liaisons: [
459 - { required: true, message: "請您輸入聯絡人", trigger: "blur" },
460 - {
461 - validator: (rule, value, callback) => {
462 - // var a= this.regExp.checkText(this.regExp.nameExp,value);
463 - if (!this.regExp.nameExp.test(value)) {
464 - callback("請您使用中文、英文或空格的組合，不能包含特殊字元。");
465 - } else if (value.length > 30) {
466 - callback(
467 - "聯絡人姓名最多可包含30個字元，而您輸入了" +
468 - value.length +
469 - "個字元。"
470 - );
471 - } else {
472 - callback();
473 - }
474 - },
475 - trigger: "blur",
476 - },
477 - ],
478 - consigneeNo: [
479 - {
480 - required: true,
481 - message: "請您輸入貨物輸出統一編號",
482 - trigger: "blur",
483 - },
484 - {
485 - validator: (rule, value, callback) => {
486 - if (!this.regExp.expNumENExp.test(value)) {
487 - callback("請您輸入統一編號，中間不要有空格。");
488 - } else {
489 - callback();
490 - }
491 - },
492 - trigger: "blur",
493 - },
494 - ],
495 - email: [
496 - { required: true, message: "請您輸入郵箱", trigger: "blur" },
497 - {
498 - validator: (rule, value, callback) => {
499 - if (!this.regExp.email.test(value.trim())) {
500 - callback("您輸入的郵件格式有錯誤。");
501 - } else if (this.regExp.emailPattern.test(value.trim())) {
502 - callback("您輸入的郵件格式有錯誤。");
503 - } else {
504 - this.formData.email=this.formData.email.trim();
505 - callback();
506 - }
507 - },
508 - trigger: "blur",
509 - },
510 - ],
511 - tel: [
512 - { required: true, message: "請您輸入聯絡電話", trigger: "blur" },
513 - {
514 - validator: (rule, value, callback) => {
515 - if (!this.regExp.phoneNumExp.test(value)) {
516 - callback("請您輸入有效的聯絡電話，不能包含字母和漢字。");
517 - // } else if (value.length > 40) {
518 - // callback(
519 - // "聯絡電話最多可包含40個字元，而您輸入了" +
520 - // value.length +
521 - // "個字元。"
522 - // );
523 - } else {
524 - callback();
525 - }
526 - },
527 - trigger: "blur",
528 - },
529 - ],
530 - extensionTel: [
531 - {
532 - required: false,
533 - validator: (rule, value, callback) => {
534 - if (value) {
535 - if (!this.regExp.phoneNumExp.test(value)) {
536 - callback("請您輸入有效的分機號碼，不能包含字母和漢字。");
537 - }
538 - // else if (value.length > 10) {
539 - // callback(
540 - // "分機最多可包含10個字元，而您輸入了" +
541 - // value.length +
542 - // "個字元。"
543 - // );
544 - // }
545 - else {
546 - callback();
547 - }
548 - } else {
549 - callback();
550 - }
551 - },
552 - trigger: "blur",
553 - },
554 - ],
555 - phone: [
556 - {
557 - validator: (rule, value, callback) => {
558 - if (value) {
559 - if (!this.regExp.phoneNumExp.test(value)) {
560 - callback("請您輸入有效的行動電話，不能包含字母和漢字。");
561 - }
562 - // else if (value.length > 40) {
563 - // callback(
564 - // "xxx" +
565 - // value.length +
566 - // "個字元。"
567 - // );
568 - // }
569 - else {
570 - callback();
571 - }
572 - } else {
573 - callback();
574 - }
575 - },
576 - trigger: "blur",
577 - },
578 - ],
579 - fileSelect: [
580 - {
581 - required: true,
582 - message: "請您選擇出口報關檢核表製作選項",
583 - trigger: "change",
584 - },
585 - ],
586 - templateName: [
587 - {
588 - required: this.saveTemplate,
589 - message: "請您輸入使用者名稱",
590 - trigger: "blur",
591 - },
592 - {
593 - validator: (rule, value, callback) => {
594 - if (value && !this.regExp.templateName.test(value)) {
595 - callback("請您使用中文、數字、英文、下劃線或中橫線的組合。");
596 - } else {
597 - callback();
598 - }
599 - },
600 - trigger: "blur",
601 - },
602 - ],
603 - };
604 - this.$nextTick(() => {
605 - this.$refs["formDataRef"].clearValidate();
606 - });
607 - return rules;
608 - },
609 - },
610 - watch: {
611 - errorTip(newVal, oldVal) {
612 - if (newVal.length > 0) {
613 - this.toHead("view-box");
614 - }
615 - },
616 - valueMeta() {
617 - this.selectVal = this.valueMeta;
618 - this.valueMeta = null;
619 - },
620 - },
621 - created() {
622 - let data = { page: 1, size: 30, templateName: null };
623 - Promise.all([findTempListByAll(data)]).then((res) => {
624 - this.templateList = res[0].data;
625 - this.optionsMetaAll = res[0].data;
626 - });
627 - },
628 - methods: {
629 - // 选择管理模板
630 - selectTem() {
631 - this.$refs.temDialogRef.openDialog();
632 - },
633 - checkForm() {
634 - this.errorTip = [];
635 - var checkForm = ["formDataRef"];
636 - checkForm.forEach((formRef) => {
637 - this.submitForm(formRef);
638 - return this.errorTip;
639 - });
640 - return this.errorTip;
641 - },
642 - submitForm(formRef) {
643 - return new Promise((resolve, reject) => {
644 - this.$refs[formRef].validate((valid, object) => {
645 - if (valid) {
646 - resolve();
647 - } else {
648 - for (var key in object) {
649 - if (object.hasOwnProperty(key)) {
650 - this.errorTip.push(object[key][0].message);
651 - this.errorTip = [...new Set(this.errorTip)];
652 - }
653 - }
654 - reject();
655 - }
656 - });
657 - });
658 - },
659 - checkFromNotShowError(formRef) {
660 - let checkRes = false;
661 - this.$refs[formRef].validate((valid, object) => {
662 - if (valid) {
663 - checkRes = true;
664 - // resolve();
665 - } else {
666 - checkRes = false;
667 - }
668 - });
669 - return checkRes;
670 - },
671 - dropDownSearch() {
672 - // var _this = this;
673 - // _this.valueMeta = [];
674 -
675 - // _this.templateList = [];
676 - // for (var item of _this.optionsMetaAll) {
677 - // if (item.templateName.toLowerCase().includes(this.dropDownValue.trim().toLowerCase())
678 - // || item.liaisons.toLowerCase().includes(this.dropDownValue.trim().toLowerCase())
679 - // || item.tel.toLowerCase().includes(this.dropDownValue.trim().toLowerCase())
680 - // || item.consigneeNo.toLowerCase().includes(this.dropDownValue.trim().toLowerCase())) {
681 - // _this.templateList.push(item);
682 - // }
683 - // }
684 - // debounce(this.getTempListByName(1,10, this.dropDownValue),5000,false);
685 - let page = 10;
686 - if (!this.dropDownValue) {
687 - page = 30;
688 - }
689 - this.getTempListByName(1, page, this.dropDownValue.trim());
690 - },
691 - // 下一步：save/保存：topSave/编辑：1，2，3
692 - nextStepOne(type, saveDeliveryNo = true) {
693 - if (saveDeliveryNo) {
694 - this.$store.dispatch(
695 - "fillForm/addDeliveryNo",
696 - this.formData.deliveryNo
697 - );
698 - }
699 - this.errorTip = [];
700 - let paramsData = {
701 - check: "0",
702 - ...this.formData,
703 - fileSelect: this.formData.fileSelect[0],
704 - };
705 - if (this.declareId) {
706 - this.declareInfoId = this.declareId;
707 - }
708 - if (this.step1Id) {
709 - this.slipId = this.step1Id;
710 - }
711 - //判断校验是否通过
712 - if (!this.checkFromNotShowError("formDataRef")) {
713 - this.checkPass = false;
714 - // this.$emit("setStepStates", [],["finish1"],"finish1","" );
715 - delete paramsData.check;
716 - } else {
717 - this.checkPass = true;
718 - // this.$emit("setStepStates", ["finish1"], ["finish1"], "", "");
719 - }
720 - if (type == "save") {
721 - //下一步
722 - this.submitForm("formDataRef");
723 - this.$refs.formDataRef.validate((valid) => {
724 - if (valid) {
725 - if (this.slipId) {
726 - paramsData.id = this.slipId;
727 - paramsData.declareId = this.declareInfoId;
728 - this.editSaveStepOne(paramsData, "next");
729 - } else {
730 - this.addSaveStepOne(paramsData, "next");
731 - }
732 - }
733 - });
734 - } else {
735 - if (this.formData.deliveryNo) {
736 - //校验运单号规则
737 - if (
738 - this.formData.deliveryNo.length < 12 ||
739 - this.regExp.billExp.test(this.formData.deliveryNo) == false
740 - ) {
741 - this.errorTip = ["請您輸入12位數字提單號碼，中間不要有空格。"];
742 - this.$emit("clickLoading", false);
743 - } else {
744 - if (this.slipId) {
745 - paramsData.id = this.slipId;
746 - paramsData.declareId = this.declareInfoId;
747 - this.editSaveStepOne(paramsData, type);
748 - } else {
749 - this.addSaveStepOne(paramsData, type);
750 - }
751 - }
752 -
753 - // this.$emit("setStepStates", [], "finish1");
754 - } else {
755 - this.errorTip = ["請至少填寫提單號碼！"];
756 - this.$emit("clickLoading", false);
757 - }
758 - }
759 -
760 - if (this.formData.fileSelect[0] == 2) {
761 - // this.stepStates.splice(this.stepStates.indexOf('finish2'), 1);
762 - this.$emit("setStepStates", [], [], "finish2", "finish2");
763 - this.$emit("clearStep2Data");
764 - }
765 - },
766 - // 修改保存申报信息填写 | type: 下一步：next/编辑：1,2,3
767 - editSaveStepOne(data, type) {
768 - if (type == "next") {
769 - this.step1Loading = true;
770 - } else if (typeof type == "number") {
771 - this.$emit("clickLoading", true);
772 - }
773 - updateStepOne(data)
774 - .then((res) => {
775 - if (res.code == 200) {
776 - if (this.saveTemplate) {
777 - this.saveTem();
778 - }
779 - if (type == "next") {
780 - this.goNextStep();
781 - } else if (typeof type == "number") {
782 - this.goEditStep(type);
783 - } else {
784 - this.$message.success("保存成功");
785 - this.$emit("clickLoading", false);
786 - }
787 - } else {
788 - this.msgWarning(res.msg);
789 - }
790 - // this.step1Loading = false;
791 - // this.$emit("clickLoading", false);
792 - })
793 - .catch((err) => {
794 - this.$message.error(err);
795 - })
796 - .finally(() => {
797 - this.step1Loading = false;
798 - this.$emit("clickLoading", false);
799 - });
800 - },
801 - // 新增保存申报信息填写 | type: 下一步：next/编辑：1,2,3
802 - addSaveStepOne(data, type) {
803 - if (type == "next") {
804 - this.step1Loading = true;
805 - } else if (typeof type == "number") {
806 - this.$emit("clickLoading", true);
807 - }
808 - saveStepOne(data)
809 - .then((res) => {
810 - if (res.code == 200) {
811 - if (this.saveTemplate) {
812 - this.saveTem();
813 - }
814 - this.fillFormData = res.data;
815 - this.declareInfoId = res.data.declareId;
816 - this.slipId = res.data.id;
817 - // this.$store.dispatch("fillForm/addDeliveryNo", res.data.deliveryNo);
818 - if (type == "next") {
819 - this.goNextStep();
820 - } else if (typeof type == "number") {
821 - this.goEditStep(type);
822 - } else {
823 - this.$message.success("保存成功");
824 - this.$emit("clickLoading", false);
825 - }
826 - } else {
827 - this.step1Loading = false;
828 - this.$emit("clickLoading", false);
829 - this.msgWarning(res.msg);
830 - }
831 - })
832 - .catch((err) => {
833 - this.step1Loading = false;
834 - this.$emit("clickLoading", false);
835 - this.$message.error(err);
836 - });
837 - },
838 - // 编辑时要跳转到的页面
839 - goEditStep(type) {
840 - if (this.checkPass == true) {
841 - generateStepOnePdf(this.declareInfoId)
842 - .then((res) => {
843 - if (res.code == 200) {
844 - if (type == 3 && this.formData.fileSelect[0] == 1) {
845 - generatePdf(this.declareInfoId).then((res2) => {
846 - if (res2.code == 200) {
847 - this.step1Loading = false;
848 - this.$emit("clickLoading", false);
849 - this.$message.success("保存成功");
850 - this.$emit("addNextStep", {
851 - curStep: type,
852 - declareId: this.declareId,
853 - });
854 - } else {
855 - this.$emit("clickLoading", false);
856 - this.step1Loading = false;
857 - this.$message.error("DPF生成失敗");
858 - }
859 - });
860 - } else {
861 - this.step1Loading = false;
862 - this.$emit("clickLoading", false);
863 - this.$message.success("保存成功");
864 - this.$emit("addNextStep", {
865 - curStep: type,
866 - declareId: this.declareId,
867 - });
868 - }
869 - } else {
870 - this.$emit("clickLoading", false);
871 - this.step1Loading = false;
872 - this.$message.error("DPF生成失敗");
873 - }
874 - })
875 - .catch(() => {
876 - this.$emit("clickLoading", false);
877 - this.step1Loading = false;
878 - this.$message.error("DPF生成失敗");
879 - });
880 - } else {
881 - this.step1Loading = false;
882 - this.$emit("clickLoading", false);
883 - this.$message.success("保存成功");
884 - this.$emit("addNextStep", {
885 - curStep: type,
886 - declareId: this.declareId,
887 - });
888 - }
889 - },
890 - // 点击下一步时要跳转的页面
891 - goNextStep() {
892 - if (this.checkPass == true) {
893 - generateStepOnePdf(this.declareInfoId)
894 - .then((res) => {
895 - if (res.code == 200) {
896 - this.step1Loading = false;
897 - this.$message.success("保存成功");
898 - if (this.formData.fileSelect[0] == 2) {
899 - this.$emit("addNextStep", {
900 - curStep: 3,
901 - declareId: this.declareInfoId,
902 - });
903 - } else {
904 - this.step1Loading = false;
905 - this.$emit("addNextStep", {
906 - curStep: 2,
907 - declareId: this.declareInfoId,
908 - });
909 - }
910 - } else {
911 - this.step1Loading = false;
912 - this.$message.error("DPF生成失敗");
913 - }
914 - })
915 - .catch(() => {
916 - this.step1Loading = false;
917 - this.$message.error("DPF生成失敗");
918 - });
919 - } else {
920 - this.step1Loading = false;
921 - this.$emit("addNextStep", {
922 - curStep: 2,
923 - declareId: this.declareInfoId,
924 - });
925 - }
926 - },
927 - // 编辑回填数据
928 - editFillBackStep1(data, from) {
929 - this.formData.liaisons = data.liaisons;
930 - this.formData.consigneeNo = data.consigneeNo;
931 - this.formData.email = data.email;
932 - this.formData.tel = data.tel;
933 - this.formData.extensionTel = data.extensionTel;
934 - this.formData.phone = data.phone;
935 - this.formData.customsClearanceInstruction =
936 - data.customsClearanceInstruction;
937 - this.formData.createName = data.createName;
938 - this.formData.createTime = data.createTime;
939 - if (from == "dialog") {
940 - this.formData.templateName = data.templateName;
941 - } else {
942 - this.formData.deliveryNo = data.deliveryNo;
943 - this.formData.fileSelect = data.fileSelect ? [data.fileSelect] : [];
944 - }
945 - // this.$nextTick(() => {
946 - // this.$refs.formDataRef.clearValidate();
947 - // });
948 - this.$refs.popoverRef.doClose();
949 - },
950 - // 全部清除
951 - clearFormStep1() {
952 - // this.formData.deliveryNo= "";
953 - this.formData.liaisons = "";
954 - this.formData.consigneeNo = "";
955 - this.formData.email = "";
956 - this.formData.tel = "";
957 - this.formData.extensionTel = "";
958 - this.formData.phone = "";
959 - this.formData.customsClearanceInstruction = "";
960 - this.formData.fileSelect = [];
961 -
962 - this.formData.templateName = "";
963 - this.saveTemplate = false;
964 - this.$nextTick(() => {
965 - this.$refs["formDataRef"].clearValidate();
966 - });
967 - this.errorTipClose();
968 - // this.$refs.formDataRef.resetFields();
969 - },
970 - // 下载《出口報關檢核表》和《個案委任書》
971 - downloadPdfs(type, name) {
972 - downLoadPdf(
973 - "/icleartw/declare/downloadPdfTemplate",
974 - {
975 - pdfName: type,
976 - },
977 - name
978 - )
979 - .then(() => {})
980 - .catch(() => {});
981 - },
982 - // 编辑模板
983 - editTemBtn(row) {
984 - this.$refs.editTemDialogRef.openDialog(row);
985 - },
986 - // 更新列表
987 - updateSearch() {
988 - this.$refs.temDialogRef.searchTemList();
989 - },
990 - // 关闭错误提示
991 - errorTipClose() {
992 - this.errorTip = [];
993 - },
994 - // 下拉框出现时改变样式
995 - handleCheckList(e) {
996 - if (e) {
997 - this.$nextTick(() => {
998 - this.showSaveTem = true;
999 - });
1000 - } else {
1001 - this.$nextTick(() => {
1002 - this.showSaveTem = false;
1003 - });
1004 - }
1005 - },
1006 - // 检查模板是否重复
1007 - checkTempName(name) {
1008 - this.temLoading = true;
1009 - getTemByTemName(name)
1010 - .then((res) => {
1011 - if (res.code == 200) {
1012 - this.addTemplate();
1013 - } else {
1014 - // this.$confirm(this.$t("fillIn.template.confirmCoverTemplate"), "提示", {
1015 - // confirmButtonText: this.$t("common.sureBtn"),
1016 - // cancelButtonText: this.$t("common.cancleBtn"),
1017 - // type: "warning",
1018 - // }).then(() => {
1019 - this.updateTemplate(res.data);
1020 - // });
1021 - }
1022 - this.temLoading = false;
1023 - })
1024 - .catch(() => {
1025 - this.temLoading = false;
1026 - })
1027 - .finally(() => {
1028 - this.temLoading = false;
1029 - });
1030 - },
1031 - // 保存模板按钮
1032 - saveTem() {
1033 - if (this.formData.templateName) {
1034 - // 保存模板只需要部分校验
1035 - let fieldList = [
1036 - "liaisons",
1037 - "consigneeNo",
1038 - "email",
1039 - "tel",
1040 - "extensionTel",
1041 - "phone",
1042 - ];
1043 - let that = this;
1044 - Promise.all(
1045 - fieldList.map((item) => {
1046 - let p = new Promise(function (resolve, reject) {
1047 - that.$refs.formDataRef.validateField(item, (error) => {
1048 - resolve(error);
1049 - });
1050 - });
1051 - return p;
1052 - })
1053 - ).then((data) => {
1054 - data = data.filter((item) => item);
1055 - if (!data.length) {
1056 - return that.checkTempName(this.formData.templateName, "add");
1057 - } else {
1058 - return false;
1059 - }
1060 - });
1061 - } else {
1062 - this.msgWarning("請輸入使用者名稱");
1063 - return false;
1064 - }
1065 - },
1066 - getTempListByName(page, size, templateName) {
1067 - this.tempLoading = true;
1068 - let data = { page: page, size: size, templateName: templateName };
1069 - findTempListByAll(data)
1070 - .then((res) => {
1071 - this.templateList = res.data;
1072 - this.optionsMetaAll = res.data;
1073 - })
1074 - .finally(() => {
1075 - this.tempLoading = false;
1076 - });
1077 - },
1078 - // 复选框处理变成单选
1079 - handleCheckType(val) {
1080 - if (val.length > 0) {
1081 - this.formData.fileSelect = [val[val.length - 1]];
1082 - }
1083 - this.$emit("selectIndex", this.formData.fileSelect[0]);
1084 - },
1085 - // 新增模板
1086 - addTemplate() {
1087 - let paramsData = {
1088 - ...this.formData,
1089 - };
1090 - // paramsData.templateName = this.formData.templateName;
1091 - delete paramsData.fileSelect;
1092 - delete paramsData.deliveryNo;
1093 - addSaveTemplate(paramsData)
1094 - .then((res) => {
1095 - if (res.code == 200) {
1096 - this.getTempListByName(1, 30, null);
1097 - this.$message.success("使用者保存成功");
1098 - } else {
1099 - this.msgWarning(res.msg);
1100 - }
1101 - this.temLoading = false;
1102 - })
1103 - .catch(() => {
1104 - this.temLoading = false;
1105 - });
1106 - },
1107 - updateTemplate(templateData) {
1108 - let paramsData = {
1109 - ...this.formData,
1110 - id: templateData.id,
1111 - // templateName: this.templateName,
1112 - };
1113 - this.updateLoading = true;
1114 - updateTemplate(paramsData)
1115 - .then((res) => {
1116 - if (res.code == 200) {
1117 - this.getTempListByName(1, 30, null);
1118 - this.$message.success("使用者修改成功");
1119 - this.dialogVisible = false;
1120 - // this.$emit("updateSearch");
1121 - } else {
1122 - this.msgWarning(res.msg);
1123 - }
1124 - this.updateLoading = false;
1125 - })
1126 - .catch(() => {
1127 - this.updateLoading = false;
1128 - });
1129 - },
1130 - currStationChange(val) {
1131 - this.$emit("selectIndex", val);
1132 - },
1133 - },
1134 -};
1135 -</script>
1136 -<style lang="scss">
1137 -.checkList-select {
1138 - background: #f2f2f2;
1139 - left: 0 !important;
1140 - top: 42px !important;
1141 - border: none;
1142 - border-radius: 0;
1143 - box-shadow: none;
1144 -
1145 - .el-select-dropdown__item.hover,
1146 - .el-select-dropdown__item:hover {
1147 - color: #fff;
1148 - background: #6797eb;
1149 - }
1150 -
1151 - .el-select-dropdown__list {
1152 - padding: 0;
1153 - }
1154 -
1155 - .el-select-dropdown__item {
1156 - height: 48px;
1157 - line-height: 48px;
1158 - }
1159 -}
1160 -</style>
1161 -<style lang="scss" scoped>
1162 -.step-name {
1163 - font-size: 20px;
1164 - font-weight: 600px;
1165 - margin-bottom: 20px;
1166 -
1167 - i {
1168 - font-size: 32px;
1169 - vertical-align: -5px;
1170 - color: #4d148c;
1171 - margin-right: 12px;
1172 - }
1173 -}
1174 -
1175 -.content {
1176 - width: 80%;
1177 - min-width: 676px;
1178 - margin: 0 auto;
1179 - z-index: 9;
1180 -
1181 - .prompt {
1182 - font-family: PingFang SC;
1183 - font-size: 22px;
1184 - font-weight: 500;
1185 - line-height: 36px;
1186 - letter-spacing: 0px;
1187 - text-align: center;
1188 - }
1189 -
1190 - .warning-box {
1191 - width: 100%;
1192 - color: #e48024;
1193 - margin-top: 16px;
1194 -
1195 - .warning {
1196 - width: 100%;
1197 - height: 32px;
1198 - line-height: 32px;
1199 - border: 1px solid #e48024;
1200 - background: rgb(228, 128, 36, 0.1);
1201 -
1202 - a {
1203 - color: #007ab7;
1204 - }
1205 - }
1206 -
1207 - .warning-bottom {
1208 - margin: 8px 0 2px 0;
1209 - }
1210 - }
1211 -}
1212 -
1213 -.select-box {
1214 - ::v-deep .el-input__inner {
1215 - padding-bottom: 12px;
1216 - text-align: right;
1217 - }
1218 -
1219 - ::v-deep .el-popper[x-placement^="bottom"] .popper__arrow::after {
1220 - border-bottom-color: transparent;
1221 - }
1222 -
1223 - ::v-deep .el-popper .popper__arrow,
1224 - .el-popper .popper__arrow::after {
1225 - border-style: none !important;
1226 - }
1227 -}
1228 -
1229 -.save-tem-top {
1230 - margin-top: 106px;
1231 -}
1232 -
1233 -.save-tem {
1234 - margin-top: 8px;
1235 -}
1236 -
1237 -.TemplateSave {
1238 - margin-top: 0;
1239 -
1240 - .el-button {
1241 - height: 100%;
1242 - border: none;
1243 - }
1244 -}
1245 -
1246 -.textarea-box {
1247 - margin-bottom: 5px;
1248 -
1249 - ::v-deep .el-form-item .el-form-item__content {
1250 - position: static !important;
1251 - }
1252 -
1253 - .label {
1254 - height: 24px;
1255 - font-size: 0.75rem;
1256 - font-weight: 700;
1257 - background-color: #f2f2f2;
1258 - color: #444;
1259 - height: max-content;
1260 - // padding: 0.6rem 0 0 0.6rem;
1261 - line-height: 14px;
1262 - padding-left: 0.18rem;
1263 - }
1264 -
1265 - ::v-deep .el-textarea .el-textarea__inner {
1266 - padding-top: 10px;
1267 - margin: 15px 0;
1268 - }
1269 -}
1270 -
1271 -::v-deep .el-textarea .el-input__count {
1272 - background: #f2f2f2;
1273 -}
1274 -
1275 -::v-deep .el-textarea__inner {
1276 - border: none;
1277 - background-color: #f2f2f2;
1278 -}
1279 -
1280 -::v-deep .el-textarea__inner {
1281 - resize: none;
1282 -}
1283 -
1284 -.entrySave {
1285 - margin: 50px 0 20px 0;
1286 -}
1287 -
1288 -.popover-line {
1289 - padding: 5px;
1290 - width: 650px;
1291 - border-top: 1px solid #e3e4e6;
1292 - // background-color: red;
1293 - cursor: pointer;
1294 -
1295 - &:hover {
1296 - background-color: #f5f7fa;
1297 - }
1298 -}
1299 -
1300 -.templateStyle {
1301 - button {
1302 - border: none;
1303 - background-color: #fff;
1304 - color: #007ab7;
1305 - font-weight: 600;
1306 - cursor: pointer;
1307 - }
1308 -}
1309 -</style>
1 -<template>
2 - <div>
3 - <div class="step-name">
4 - <i class="el-icon-circle-check"></i>
5 - <span>報關文件上傳</span>
6 - </div>
7 - <div class="content">
8 - <p class="title">出口正式報關文件上傳</p>
9 - <div class="warning">
10 - <p class="title4">{{ $t("fillIn.title4") }}</p>
11 - </div>
12 - <FedexAlert
13 - v-if="errorTip.length > 0"
14 - class="mb20"
15 - :tipList="errorTip"
16 - @close="errorTipClose"
17 - />
18 - <div class="upload-lable">報關文件</div>
19 - <div
20 - class="fileList-box auto-file"
21 - v-for="(item, index) in autoFileList"
22 - :key="index + 's'"
23 - >
24 - <div>
25 - <i class="el-icon-document"></i>
26 - <span style="margin-left: 20px"
27 - >自動生成-{{ item.name }}{{ item.type }}</span
28 - >
29 - </div>
30 - <div>
31 - <span style="color: rgb(169, 169, 169)"
32 - >{{ item.fileSizeDesc }} KB</span
33 - >
34 - <el-button
35 - type="text"
36 - style="margin-left: 20px"
37 - @click="openViewPdf(item)"
38 - :loading="item.findLoading"
39 - :disabled="uploadLoading"
40 - >查看</el-button
41 - >
42 - </div>
43 - </div>
44 - <div style="background-color: #f2f2f2">
45 - <el-upload
46 - class="upload-demo"
47 - ref="uploadBlock"
48 - :multiple="true"
49 - action=""
50 - :file-list="fileList"
51 - :before-upload="changUpload"
52 - :show-file-list="false"
53 - :on-error="handleUploadError"
54 - :on-success="handleUploadSuccess"
55 - :http-request="uploadFile"
56 - :auto-upload="true"
57 - :on-change="handleChange"
58 - v-show="false"
59 - >
60 - </el-upload>
61 - <el-button
62 - type="text"
63 - slot="trigger"
64 - :disabled="uploadLoading"
65 - style="padding-left: 10px"
66 - @click="clickUploadFiles"
67 - ><i class="el-icon-loading" v-if="uploadLoading && findDisabled"> </i
68 - >&nbsp;<span style="color: red; font-size: 16px">*選擇文件上傳</span>
69 - </el-button>
70 - </div>
71 - <div
72 - class="userUploadFileList"
73 - :style="{
74 - 'overflow-y': uploadFilesList.length > 10 ? 'auto' : 'hidden',
75 - }"
76 - >
77 - <div>
78 - <div
79 - class="fileList-box"
80 - v-for="(item, index) in uploadFilesList"
81 - :key="index + 'f'"
82 - >
83 - <div>
84 - <div>
85 - <Tooltip :content="item.fileName" refName="stepThreeTip"
86 - ><span slot="icon">
87 - <span style="display: inline-block; width: 35px">{{
88 - index + 1
89 - }}</span>
90 - <i class="el-icon-document"></i>
91 - <span style="margin-left: 10px">手動上傳-</span>
92 - </span>
93 - </Tooltip>
94 - </div>
95 - </div>
96 -
97 - <!-- <div class="ellipsis" @mouseover="onMouseOver(refName)">
98 - <i class="el-icon-document"></i><span style="margin-left: 20px">手動上傳-{{ item.name }}{{ item.type }}</span>
99 - </div> -->
100 -
101 - <div>
102 - <span class="file-size" style="color: rgb(169, 169, 169)"
103 - >{{ item.fileSizeDesc }} KB</span
104 - >
105 - <el-popover
106 - placement="bottom"
107 - width="160"
108 - v-model="item.deleteVisible"
109 - :disabled="item.findLoading"
110 - >
111 - <p>是否確認刪除？</p>
112 - <div style="text-align: right; margin: 0">
113 - <el-button
114 - size="mini"
115 - type="text"
116 - @click.stop="item.deleteVisible = false"
117 - >取消</el-button
118 - >
119 - <el-button
120 - type="text"
121 - size="mini"
122 - @click.stop="handleRemove(item)"
123 - >確定</el-button
124 - >
125 - </div>
126 - <el-button
127 - type="text"
128 - slot="reference"
129 - style="margin-left: 20px"
130 - :disabled="uploadLoading"
131 - :loading="item.findLoading"
132 - >刪除</el-button
133 - >
134 - </el-popover>
135 - </div>
136 - </div>
137 - </div>
138 - <!-- <div class="error-file fileList-box" v-if="showErrorFile">
139 - <div>
140 - <i class="el-icon-warning-outline"></i
141 - ><span style="margin-left: 20px"
142 - >{{ errorFileName }}(由於文件內容不受支持，無法上傳文件。)</span
143 - >
144 - </div>
145 - <el-button type="text" @click="handleRemoveErrorFile()"
146 - >删除</el-button
147 - >
148 - </div> -->
149 - </div>
150 - <el-form
151 - class="stepThreeForm"
152 - style="width: 100%; padding-left: 10px"
153 - label-position="top"
154 - ref="stepThreeForm"
155 - :hide-required-asterisk="true"
156 - :model="typeFormData"
157 - :rules="rules"
158 - >
159 - <el-form-item
160 - label="*所上傳的報關文件，是否適用在目的地國家進口清關報關作業?"
161 - prop="isClear"
162 - >
163 - <el-radio-group
164 - v-model="typeFormData.isClear"
165 - style="margin-left: 15px"
166 - >
167 - <el-radio :label="1"
168 - ><span style="font-size: 16px; color: red; font-weight: 600"
169 - >是</span
170 - ></el-radio
171 - >
172 - <el-radio :label="0"
173 - ><span style="font-size: 16px; color: red; font-weight: 600"
174 - >否</span
175 - ></el-radio
176 - >
177 - </el-radio-group>
178 - </el-form-item>
179 - <!-- <el-form-item label="*" prop="radio">
180 - <div
181 - style="
182 - font-size: 16px;
183 - font-weight: 800;
184 - color: red;
185 - background-color: #f2f2f2;
186 - "
187 - >
188 - <el-select
189 - class="stepThreeSelect"
190 - v-model="radio"
191 - placeholder="請選擇"
192 - >
193 - <el-option label="是" value="1"> </el-option>
194 - <el-option label="否" value="0"> </el-option>
195 - </el-select>
196 - <span style="display: inline-block; padding-left: 10px"
197 - >所上傳的報關文件，是否適用在目的地國家進口清關報關作業?</span
198 - >
199 - </div>
200 - </el-form-item> -->
201 - </el-form>
202 -
203 - <div class="bottom-tip">
204 - <div class="bottom-tip-item">備註:</div>
205 - <div
206 - class="bottom-tip-item"
207 - v-for="(item, index) in tipList"
208 - :key="index"
209 - >
210 - <div class="bottom-tip-item_idx">{{ item.idx }}</div>
211 - <div class="bottom-tip-item_content">
212 - {{ item.content }}
213 - </div>
214 - </div>
215 - </div>
216 -
217 - <div align="center" class="saveBtn-box" style="margin-top: 52px">
218 - <el-button
219 - class="whiteBtn-background entrySaveButton"
220 - @click="viewDetailBtn()"
221 - :disabled="uploadLoading || submitDisabled"
222 - >
223 - 確認已填寫內容
224 - </el-button>
225 - </div>
226 - <div align="center" class="saveBtn-box" style="margin: 18px 0 52px 0">
227 - <el-button
228 - :disabled="uploadLoading || submitDisabled"
229 - class="entrySaveButton entrySaveButton-background"
230 - @click="handleSaveSubmitBtn()"
231 - >
232 - {{ $t("common.submitBtn") }}
233 - </el-button>
234 - </div>
235 - </div>
236 - <detail-drawer
237 - ref="detailDrawerRef"
238 - @editDetail="goEditStep"
239 - @submitBtn="handleSaveSubmitBtn"
240 - @viewPdf="openViewPdf"
241 - :pageIndex="pageIndex"
242 - ></detail-drawer>
243 - <!-- <el-dialog :title="pdfTitle" :visible.sync="entryPdfVisible" width="80%" >
244 - <iframe :src="pdfData" frameborder="0" width="100%" height="500px"></iframe>
245 - </el-dialog> -->
246 - </div>
247 -</template>
248 -<script>
249 -import {
250 - uploadCustomsFiles,
251 - deleteUploadFile,
252 - getCusFileBySys,
253 - saveCommitAll,
254 - saveStep3Files,
255 - getFindSysByDeclareId,
256 - saveByDetails,
257 - findDetailsById,
258 -} from "@/api/fillForm.js";
259 -import detailDrawer from "../declarationInput/detailDrawer.vue";
260 -import { downLoadViewPdf, uploadCustomsFileAsync } from "@/utils/zipdownload";
261 -import { filterSize } from "@/utils/filterSize";
262 -export default {
263 - components: { detailDrawer },
264 - props: {
265 - stepStates: {
266 - type: Array,
267 - default() {
268 - return [];
269 - },
270 - },
271 - step3Id: {
272 - type: Number,
273 - default() {
274 - return null;
275 - },
276 - },
277 - declareId: {
278 - type: Number,
279 - default() {
280 - return null;
281 - },
282 - },
283 - },
284 - data() {
285 - return {
286 - uploadLoading: false,
287 - pageIndex: "step3",
288 - fileList: [],
289 - uploadFilesList: [],
290 - selectFileList: [],
291 - typeFormData: {
292 - isClear: null,
293 - },
294 - errorFileName: "",
295 - fileTotal: "",
296 - showErrorFile: false,
297 - errorTip: [],
298 - autoFileList: [],
299 - cusFileId: null,
300 - formatByte: filterSize,
301 - submitDisabled: false,
302 - pdfData: null,
303 - pdfTitle: null,
304 - entryPdfVisible: false,
305 - findDisabled: true,
306 - fileIndex: 0,
307 - errorFiles: [],
308 - rules: {
309 - isClear: [
310 - {
311 - required: true,
312 - message:
313 - "請您勾選所上傳的報關文件，是否適用在目的地國家進口清關報關作業。",
314 - trigger: "change",
315 - },
316 - ],
317 - },
318 - tipList: [
319 - {
320 - idx: "1.",
321 - content:
322 - "報關應備之文件:(1)委任書(2)商業發票(3)裝箱單(箱數多於一件時).",
323 - },
324 - {
325 - idx: "2.",
326 - content: "國洋貨復運出口之案件,應再加附(4)具結書,並請據實填寫內容.",
327 - },
328 - {
329 - idx: "3.",
330 - content: "私人之出口件依海關規定需再提供(5)身分證或護照影本.",
331 - },
332 - {
333 - idx: "4.",
334 - content:
335 - "以上所述之(1)~(4)四種文件均請蓋妥公司大、小章、發票章,或私章(僅適用私人出口件).",
336 - },
337 - {
338 - idx: "5.",
339 - content:
340 - "產證需隨貨的案件,約需兩個工作天後才能出口(以報關文件收到之日起算).",
341 - },
342 - {
343 - idx: "6.",
344 - content:
345 - "復運出口貨品(包括外貨、國貨)，應逐項填報欲核銷之原進口報單號碼及項次，核銷作業採「1 項對 1項」方式核銷原進口報單資料，該項之原進口數量應大於或等於復運出口數量，數量不符者，應予拆項或增項。(但保稅貨品應依保稅物品及自由貿易港區貨物通關特殊規定辦理。)",
346 - },
347 - ],
348 - };
349 - },
350 - computed: {},
351 - created() {
352 - this.editFillBackStep3();
353 - },
354 - methods: {
355 - // 文件勾选触发
356 - changUpload(file) {
357 - // const { uid, name, size } = file;
358 - // // 文件类型限制
359 - // const fileTypeFlag =
360 - // /^.doc|.docm|.docx|.dot|.dotm|.dotx|.odt|.rtf|.csv|.ods|.xlam|.xls|.xlsb|.xlsm|.xlsx|.xltm|.xltx|.ppt|.pptx|.txt|.log|.hdr|.inv|.pak|.out|.pdf|.tif|.tiff|.jpeg|.jpg|.png|.bmp|.gif|.wmf|.heic|.html|.htm|.mhtml|.mht|.xps|.7z|.xz|.bz2|.bzip2|.gzip|.tar|.zip|.wim|.ar|.arj|.cab|.chm|.cpio|.cramfs|.dmg|.ext|.fat|.gpt|.hfs|.ihex|.iso|.lzh|.lzma|.mbr|.msi|.nsis|.ntfs|.qcow2|.rar|.rpm|.squashfs|.udf|.uefi|.vdi|.vhd|.vhdx|.vmdk|.xar|.z|.vcf|.bin|.dat|.wmz|.ai|.db|.xml|.emz|.ds_store|.p7s|.numbers|.*fedex|.mp4|.psd|.mso$/.test(
361 - // name.substring(name.lastIndexOf(".")).toLowerCase()
362 - // );
363 - // if (!fileTypeFlag) {
364 - // this.$message.warning("文件格式不匹配");
365 - // return false;
366 - // }
367 - // // 文件大小进行校验
368 - // if (size > 1024 * 1024 * 20) {
369 - // this.$message.warning("您上傳的文件大小過大(20M), 建議壓縮文件上傳");
370 - // return false;
371 - // }
372 - // // 文件总大小限制
373 - // const totalSize = this.uploadFilesList.reduce(
374 - // (total, item) => total + item.fileSizeByte,
375 - // 0
376 - // );
377 - // if (totalSize + size > 1024 * 1024 * 30) {
378 - // this.$message.warning(
379 - // "您上傳的文件大小總和過大(30M), 建議壓縮文件上傳"
380 - // );
381 - // return false;
382 - // }
383 - // if (this.uploadFilesList.length > 19) {
384 - // this.$message.warning("最多選擇20個文件");
385 - // return false;
386 - // }
387 - },
388 - // 移除不需要的文件
389 - handleRemove(file) {
390 - this.$emit("clickDisabled", true);
391 - this.submitDisabled = true;
392 - // this.uploadLoading = true;
393 - file.findLoading = true;
394 - deleteUploadFile(file.id, this.cusFileId)
395 - .then((res) => {
396 - if (res.code == 200) {
397 - file.deleteVisible = false;
398 - this.$message.success("刪除成功");
399 - this.getAutoFileList();
400 - } else {
401 - this.msgWarning(res.msg);
402 - }
403 - })
404 - .finally(() => {
405 - this.submitDisabled = false;
406 - file.findLoading = false;
407 - this.$emit("clickDisabled", false);
408 - });
409 - },
410 - handleUploadError() {},
411 - handleUploadSuccess(file) {},
412 - handleChange(file, fileList) {
413 - this.fileList = fileList;
414 - let fileNameList = [];
415 - if (this.uploadFilesList.length > 0)
416 - [
417 - this.uploadFilesList.forEach((item) => {
418 - fileNameList.push(item.name + "." + item.serverName.split(".")[1]);
419 - }),
420 - ];
421 - if (this.errorFiles.length == 0) {
422 - //文件名长度限制
423 - if (file.name.length > 80) {
424 - this.errorFiles.push("上傳文件名稱長度超出限制，請修改後上傳");
425 - return;
426 - }
427 - // 文件名重复
428 - if (fileNameList.includes(file.name)) {
429 - this.errorFiles.push("上傳文件名稱重複，請修改後上傳");
430 - return;
431 - }
432 - const { uid, name, size } = file;
433 - // 文件类型限制
434 - const fileTypeFlag =
435 - /^.doc|.docm|.docx|.dot|.dotm|.dotx|.odt|.rtf|.csv|.ods|.xlam|.xls|.xlsb|.xlsm|.xlsx|.xltm|.xltx|.ppt|.pptx|.txt|.log|.hdr|.inv|.pak|.out|.pdf|.tif|.tiff|.jpeg|.jpg|.png|.bmp|.gif|.wmf|.heic|.html|.htm|.mhtml|.mht|.xps|.7z|.xz|.bz2|.bzip2|.gzip|.tar|.zip|.wim|.ar|.arj|.cab|.chm|.cpio|.cramfs|.dmg|.ext|.fat|.gpt|.hfs|.ihex|.iso|.lzh|.lzma|.mbr|.msi|.nsis|.ntfs|.qcow2|.rar|.rpm|.squashfs|.udf|.uefi|.vdi|.vhd|.vhdx|.vmdk|.xar|.z|.vcf|.bin|.dat|.wmz|.ai|.db|.xml|.emz|.ds_store|.p7s|.numbers|.*fedex|.mp4|.psd|.mso$/.test(
436 - name.substring(name.lastIndexOf(".")).toLowerCase()
437 - );
438 - if (!fileTypeFlag) {
439 - this.errorFiles.push("文件格式不匹配");
440 - return;
441 - }
442 - // 文件大小进行校验
443 - if (size > 1024 * 1024 * 20) {
444 - this.errorFiles.push("您上傳的文件大小過大(20M), 建議壓縮文件上傳");
445 - return;
446 - }
447 - // 文件总大小限制
448 - // const totalSize = this.uploadFilesList.reduce(
449 - // (total, item) => total + item.fileSizeByte,
450 - // 0
451 - // );
452 - // if (totalSize + size > 1024 * 1024 * 95) {
453 - // this.errorFiles.push(
454 - // "您上傳的文件大小總和過大(95M), 建議壓縮文件上傳"
455 - // );
456 - // return false;
457 - // }
458 - }
459 - },
460 - clickUploadFiles() {
461 - this.fileIndex = 0;
462 - this.fileList = [];
463 - this.errorFiles = [];
464 - this.$refs.uploadBlock.$refs["upload-inner"].handleClick();
465 - },
466 - uploadFiles(file) {
467 - // setTimeout(() => {
468 - // let uploadRes=new Map();
469 - //
470 - // this.uploadLoading = true;
471 - // this.$emit("clickDisabled", true);
472 - // if(this.fileIndex==0) {
473 - // this.fileIndex++;
474 - // this.fileList.forEach(file=>{
475 - // let formData = new FormData(); //formdata格式
476 - // formData.append("file", file.raw, file.name);
477 - //
478 - // uploadCustomsFiles(formData, this.declareId)
479 - // .then((res) => {
480 - // if (res.code == 200) {
481 - // this.cusFileId = res.data.id;
482 - // // uploadRes.set(file.name, res.data.uploadFileVoList);
483 - // this.getAutoFileList();
484 - // if (res.data.uploadFileVoList.length == this.fileList.length) {
485 - // this.errorTip = [];
486 - // // this.$message.success("上傳成功");
487 - // }
488 - // } else {
489 - // this.$message.warning(res.msg);
490 - // }
491 - // })
492 - // .catch((err) => {
493 - // console.log(err);
494 - // }).finally(() => {
495 - // this.uploadLoading = false;
496 - // this.$emit("clickDisabled", false);
497 - // });
498 - // });
499 - // }
500 - // },1000)
501 - },
502 -
503 - // 上传多个报关文件
504 - uploadFile(files) {
505 - this.uploadLoading = true;
506 - this.$emit("clickDisabled", true);
507 - setTimeout(() => {
508 - if (this.fileIndex == 0) {
509 - // 文件总大小限制
510 - const totalSize =
511 - this.uploadFilesList.reduce(
512 - (total, item) => total + item.fileSizeByte,
513 - 0
514 - ) + this.fileList.reduce((total, item) => total + item.size, 0);
515 - if (totalSize > 1024 * 1024 * 95) {
516 - this.errorFiles.push(
517 - "您上傳的文件大小總和過大(95M), 建議壓縮文件上傳"
518 - );
519 - }
520 - // 文件总数限制
521 - if (this.uploadFilesList.length + this.fileList.length > 100) {
522 - this.errorFiles.push("最多選擇100個文件");
523 - }
524 - this.fileIndex++;
525 - if (this.errorFiles.length > 0) {
526 - // this.$message(this.errorFiles.join(","));
527 - this.$message.warning(this.errorFiles.join(","));
528 - this.uploadLoading = false;
529 - this.$emit("clickDisabled", false);
530 - this.errorFiles = [];
531 - // this.$alert(this.errorFiles.join(","), '提示', {
532 - // confirmButtonText: '確定',
533 - // type: 'warning'
534 - // }).finally(() => {
535 - // this.uploadLoading = false;
536 - // this.$emit("clickDisabled", false);
537 - // this.errorFiles = [];
538 - // })
539 - } else {
540 - let formData = new FormData(); //formdata格式
541 - formData.append("declareId", this.declareId);
542 - this.fileList.forEach((item) => {
543 - formData.append("file", item.raw);
544 - });
545 - uploadCustomsFiles(formData, this.declareId)
546 - .then((res) => {
547 - if (res.code == 200) {
548 - // this.cusFileId = res.data.id;
549 - this.getAutoFileList();
550 -
551 - if (
552 - res.data.succ != null &&
553 - res.data.succ.length == this.fileList.length
554 - ) {
555 - this.errorTip = [];
556 - this.$message.success("上傳成功");
557 - }
558 - if (res.data.fial && res.data.fial.length > 0) {
559 - this.$message.warning("上傳失敗");
560 - }
561 - } else {
562 - this.$message.warning("上傳失敗" + res.msg);
563 - }
564 - })
565 - .catch((err) => {
566 - // this.$message.warning("上傳失敗"+err);
567 - console.log(err);
568 - })
569 - .finally(() => {
570 - this.fileIndex = 0;
571 - this.fileList = [];
572 - this.errorFiles = [];
573 - this.uploadLoading = false;
574 - this.$emit("clickDisabled", false);
575 - });
576 - }
577 - }
578 - }, 1000);
579 - },
580 - // 编辑回填
581 - editFillBackStep3(data) {
582 - this.fileList = [];
583 - this.autoFileList = [];
584 - this.uploadFilesList = [];
585 - if (data) {
586 - this.typeFormData = data;
587 - }
588 - this.$nextTick(() => {
589 - this.cusFileId = this.step3Id;
590 - this.getAutoFileList();
591 - this.$refs.stepThreeForm.clearValidate();
592 - });
593 - },
594 - // 获取报关文件列表
595 - getUploadFileList(id) {
596 - getCusFileBySys(id).then((res) => {
597 - if (res.code == 200) {
598 - this.uploadFilesList = res.data;
599 - if (this.uploadFilesList != null) {
600 - this.uploadFilesList = this.uploadFilesList.map((item) => {
601 - return {
602 - ...item,
603 - deleteVisible: false,
604 - fileName: item.name + item.type,
605 - };
606 - });
607 - }
608 - }
609 - });
610 - },
611 - // 点击提交
612 - handleSaveSubmitBtn() {
613 - this.$refs.stepThreeForm.validate((valid) => {
614 - if (valid) {
615 - this.topSaveStepThree("save", "nomsg").then(() => {
616 - let arr = [];
617 - this.autoFileList.forEach((item) => {
618 - arr.push(item.name);
619 - });
620 - if (this.uploadFilesList.length > 0) {
621 - let checkRes = this.$parent.checkStepForm({ curStep: 3 });
622 - if (!checkRes) {
623 - this.createMessageBox(
624 - `請確認以下文件是否上傳“${
625 - arr.includes("出口報關檢核表") ? "" : "檢核表、"
626 - }用印過的invoice、packing、委任書”`,
627 - saveCommitAll,
628 - true,
629 - true,
630 - "取消不提交",
631 - "確認並提交",
632 - " "
633 - );
634 - }
635 - } else {
636 - this.createMessageBox(
637 - `請您上傳“${
638 - arr.includes("出口報關檢核表") ? "" : "檢核表、"
639 - }用印過的invoice、packing、委任書”`,
640 - undefined,
641 - true,
642 - false,
643 - "",
644 - "關閉",
645 - ""
646 - );
647 - }
648 - });
649 - }
650 - });
651 - },
652 - //cancel 和 confirm 按钮调换了方法
653 - createMessageBox(
654 - message,
655 - saveFn,
656 - showCancel,
657 - showConfirm,
658 - cancelBtnText,
659 - confirmBtnText,
660 - title
661 - ) {
662 - const h = this.$createElement;
663 - return this.$msgbox({
664 - title: title,
665 - iconClass: "",
666 - message: h("p", { class: "my-message-box" }, [
667 - h(
668 - "i",
669 - {
670 - class: "warning-icon el-icon-warning",
671 - id: "commentContent",
672 - },
673 - null
674 - ),
675 - h("div", { class: "font-style" }, message),
676 - ]),
677 - confirmButtonClass: "my-custom-confirm-btn",
678 - customClass: "my-custom-msgbox",
679 - cancelButtonClass: "el-button--primary",
680 - confirmButtonText: cancelBtnText,
681 - cancelButtonText: confirmBtnText,
682 - showCancelButton: showCancel,
683 - showClose: title != " ",
684 - center: true,
685 - showConfirmButton: showConfirm,
686 - closeOnClickModal: false,
687 - closeOnPressEscape: false,
688 - closeOnHashChange: false,
689 - beforeClose: async (action, instance, done) => {
690 - if (action === "cancel") {
691 - if (saveFn !== undefined) {
692 - instance.cancelButtonLoading = true;
693 - instance.cancelButtonText = "正在提交...";
694 - try {
695 - const res = await saveFn(this.declareId);
696 - if (res.code === 200) {
697 - instance.cancelButtonLoading = false;
698 - this.$message.success("提交成功");
699 - this.$emit("sucSubmit");
700 - } else {
701 - this.$alert(res.msg, "提示", {
702 - confirmButtonText: "確定",
703 - type: "warning",
704 - });
705 - done(false); // 阻止对话框关闭
706 - }
707 - } catch (error) {
708 - console.error("提交错误:", error);
709 - this.$alert("提交失败，请稍后尝试", "提示", {
710 - confirmButtonText: "確定",
711 - type: "error",
712 - });
713 - done(false);
714 - }
715 - }
716 - done();
717 - } else {
718 - done();
719 - }
720 - },
721 - });
722 - },
723 - // 点击保存
724 - nextStepThree(type) {
725 - if (type == "save") {
726 - if (this.uploadFilesList.length > 0 || this.autoFileList.length > 0) {
727 - // if (this.cusFileId) {
728 - this.saveByDetailMethod(type);
729 - // }
730 - } else {
731 - this.errorTip = ["上傳文件是必填的"];
732 - this.$emit("clickLoading", false);
733 - }
734 - } else {
735 - this.$emit("clickLoading", true);
736 - this.topSaveStepThree(type);
737 - }
738 - },
739 - // 编辑时要跳转到的页面
740 - goEditStep(type) {
741 - this.topSaveStepThree("save", "nomsg").finally(() => {
742 - // this.$emit("setStepStates", ["finish3"], ["finish3"], "", "");
743 - this.$emit("addNextStep", {
744 - curStep: type,
745 - declareId: this.declareId,
746 - });
747 - });
748 - },
749 - // 保存
750 - topSaveStepThree(type, msgStatus = "") {
751 - return new Promise((resolve, reject) => {
752 - let obj = {
753 - id: this.declareId,
754 - };
755 - if (
756 - this.typeFormData.isClear !== null &&
757 - this.typeFormData.isClear !== ""
758 - ) {
759 - obj.isClear = this.typeFormData.isClear;
760 - }
761 - saveStep3Files(obj)
762 - .then((res) => {
763 - if (res.code == 200) {
764 - msgStatus == "" ? this.$message.success("保存成功") : "";
765 - if (typeof type == "number") {
766 - this.goEditStep(type);
767 - }
768 - resolve();
769 - } else {
770 - this.msgWarning(res.msg);
771 - reject();
772 - }
773 - })
774 - .catch(() => {
775 - reject();
776 - })
777 - .finally(() => {
778 - this.$emit("clickLoading", false);
779 - });
780 - });
781 - },
782 - // 查看详情时告诉后端状态的保存
783 - saveByDetailMethod(type) {
784 - saveByDetails(this.declareId)
785 - .then((res) => {
786 - if (res.code == 200) {
787 - if (typeof type == "number") {
788 - this.$message.success("保存成功");
789 - this.goEditStep(type);
790 - }
791 - } else {
792 - this.msgWarning(res.msg);
793 - }
794 - })
795 - .finally(() => {
796 - this.$emit("clickLoading", false);
797 - });
798 - },
799 - // 查看详情
800 - viewDetailBtn() {
801 - if (this.uploadFilesList.length > 0 || this.autoFileList.length > 0) {
802 - let checkRes = this.$parent.checkStepForm({ curStep: 3 });
803 - if (!checkRes) {
804 - this.nextStepThree("save");
805 - this.topSaveStepThree("save", "nomsg").finally(() => {
806 - this.$refs.detailDrawerRef.openDrawer(
807 - { id: this.declareId },
808 - "step3"
809 - );
810 - });
811 - }
812 - } else {
813 - this.errorTip = ["請上傳報關文件！"];
814 - }
815 - },
816 - // 查看pdf
817 - openViewPdf(file) {
818 - this.uploadLoading = true;
819 - file.findLoading = true;
820 - this.findDisabled = false;
821 - this.$emit("clickDisabled", true);
822 - downLoadViewPdf(
823 - "/icleartw/cusFile/previewFile",
824 - { fileId: file.id },
825 - file.name + file.type
826 - )
827 - .then((res) => {
828 - this.pdfData = res;
829 - this.pdfTitle = file.name + file.type;
830 - this.entryPdfVisible = true;
831 - })
832 - .finally(() => {
833 - this.uploadLoading = false;
834 - file.findLoading = false;
835 - this.findDisabled = true;
836 - this.$emit("clickDisabled", false);
837 - });
838 - },
839 - // 根据申报id获取文件信息
840 - getAutoFileList() {
841 - if (this.declareId) {
842 - getFindSysByDeclareId(this.declareId).then((res) => {
843 - if (res.code == 200) {
844 - this.autoFileList = res.data
845 - ? res.data.filter((item) => item.source == 2)
846 - : [];
847 - if (this.autoFileList != null) {
848 - this.cusFileId = this.autoFileList[0].customsFileId;
849 - this.autoFileList = this.autoFileList.map((item) => {
850 - return {
851 - ...item,
852 - findLoading: false,
853 - };
854 - });
855 - }
856 - this.uploadFilesList = res.data
857 - ? res.data.filter((item) => item.source == 1)
858 - : [];
859 - if (this.uploadFilesList != null) {
860 - this.uploadFilesList = this.uploadFilesList.map((item) => {
861 - return {
862 - ...item,
863 - fileName: item.name + item.type,
864 - };
865 - });
866 - }
867 - } else {
868 - // this.msgWarning(res.msg);
869 - }
870 - });
871 - }
872 - },
873 - // 关闭错误提示
874 - errorTipClose() {
875 - this.errorTip = [];
876 - },
877 - },
878 -};
879 -</script>
880 -
881 -<style lang="scss" scoped>
882 -.step-name {
883 - font-size: 20px;
884 - font-weight: 600;
885 - margin-bottom: 20px;
886 -
887 - i {
888 - font-size: 32px;
889 - vertical-align: -5px;
890 - color: #4d148c;
891 - margin-right: 12px;
892 - }
893 -}
894 -
895 -.content {
896 - width: 80%;
897 - min-width: 618px;
898 - margin: 0 auto;
899 -
900 - .title {
901 - text-align: center;
902 - margin-bottom: 16px;
903 - font-size: 22px;
904 - font-weight: 500;
905 - line-height: 36px;
906 - }
907 -
908 - .warning {
909 - font-size: 12px;
910 - line-height: 24px;
911 - font-weight: 400;
912 - text-align: center;
913 - margin-bottom: 16px;
914 -
915 - .title4 {
916 - color: #ff4a2a;
917 - }
918 - }
919 -
920 - .warning-bottom {
921 - margin: 8px 0 2px 0;
922 - }
923 -
924 - .upload-lable {
925 - font-size: 16px;
926 - font-weight: 800;
927 - line-height: 36px;
928 - height: 36px;
929 - padding-left: 10px;
930 - }
931 -
932 - .upload-demo {
933 - // width: 10%;
934 - margin-top: 6px;
935 -
936 - // ::v-deep .el-upload {
937 - // width: 100%;
938 - // }
939 - .upload-btn {
940 - width: 100%;
941 - height: 38px;
942 - line-height: 38px;
943 - padding-left: 20px;
944 - background: #f2f2f2;
945 - text-align: left;
946 - }
947 - }
948 -
949 - .saveBtn-box {
950 - .el-button {
951 - width: 160px;
952 - height: 56px;
953 - font-size: 1.1875rem;
954 - font-weight: 700;
955 - padding: 0 10px;
956 - }
957 - }
958 -
959 - .bottom-tip {
960 - width: 75%;
961 - max-width: 800px;
962 - min-width: 450px;
963 - margin: 20px auto 0 auto;
964 - font-size: 12px;
965 - font-weight: 500;
966 - line-height: 21px;
967 - color: #999999;
968 - .bottom-tip-item {
969 - display: flex;
970 - .bottom-tip-item_idx {
971 - margin-right: 5px;
972 - }
973 - }
974 - }
975 -
976 - .fileList-box {
977 - width: 100%;
978 - background: #f2f2f2;
979 - height: 36px;
980 - line-height: 36px;
981 - border-top: 1px solid #e0e0e0;
982 - display: flex;
983 - justify-content: space-between;
984 - padding: 0 20px 0 15px;
985 - }
986 -
987 - .auto-file {
988 - border: none;
989 - margin-bottom: 6px;
990 - }
991 -
992 - .error-file {
993 - color: red;
994 - margin-top: 6px;
995 - border: none;
996 - background: #f21f1f0d;
997 - }
998 -}
999 -
1000 -.ellipsis {
1001 - overflow: hidden;
1002 - text-overflow: ellipsis;
1003 - white-space: nowrap;
1004 - width: 85%;
1005 - /* 超过该宽度将显示省略号 */
1006 -}
1007 -.font-style {
1008 - line-height: 30px;
1009 - color: #000;
1010 - margin: 15px 0px;
1011 - fontsize: 18px;
1012 - fontweight: 700;
1013 - font-family: FedExSansArabic, FedExSans, Arial, sans-serif !important;
1014 -}
1015 -.my-message-box {
1016 - margin: 0px 50px 10px 50px;
1017 - font-size: 18px;
1018 - font-weight: 700;
1019 -}
1020 -
1021 -.warning-icon {
1022 - font-size: 40px;
1023 - display: block;
1024 - color: #ff6600;
1025 -}
1026 -
1027 -.userUploadFileList {
1028 - max-height: 360px;
1029 - // overflow-y: auto;
1030 -}
1031 -
1032 -.stepThreeForm {
1033 - margin-top: 5px;
1034 - // padding-left: 10px;
1035 - .formItemText {
1036 - display: inline-block;
1037 - font-size: 16px;
1038 - font-weight: 800;
1039 - color: red;
1040 - margin-left: 10px;
1041 - }
1042 -}
1043 -</style>
1 -<template>
2 - <div class="step-two-warp" id="pasteListener" ref="aaaaaaaa">
3 - <div class="step-name">
4 - <i class="el-icon-circle-check"></i>
5 - <span>{{ $t("fillIn.step2") }}</span>
6 - </div>
7 - <div class="content">
8 - <div class="titles">
9 - <p class="title1">{{ $t("fillIn.title1") }}</p>
10 - <!-- <p class="title2">{{ $t("fillIn.title2") }}</p> -->
11 - <p class="title3">{{ $t("fillIn.title3") }}</p>
12 - <p class="title4">{{ $t("fillIn.title4") }}</p>
13 - </div>
14 - <FedexAlert
15 - v-if="errorTip.length > 0"
16 - class="mb20"
17 - :tipList="errorTip"
18 - @close="errorTipClose"
19 - />
20 - <div class="check-type-box">
21 - <el-form
22 - :model="typeFormData1"
23 - :rules="typeFormData1Rules"
24 - ref="typeFormData1Ref"
25 - label-width="200px"
26 - class="type-form-box check-color"
27 - label-position="top"
28 - >
29 - <el-form-item
30 - class="type-error"
31 - :label="$t('fillIn.smallTit1')"
32 - prop="customsDeclarationType"
33 - >
34 - <div class="check-auto no-boder-input">
35 - <el-checkbox-group
36 - v-model="typeFormData1.customsDeclarationType"
37 - @change="handleCheckType1(typeFormData1.customsDeclarationType)"
38 - >
39 - <el-checkbox
40 - v-for="(item, index) in customsDeclarationTypeList"
41 - :label="item.value"
42 - :key="index"
43 - >
44 - {{ item.label }}
45 - <el-tooltip
46 - class="item"
47 - effect="dark"
48 - :content="typeFormData1.otherData"
49 - placement="top-start"
50 - :disabled="isShowTooltip"
51 - >
52 -
53 - <el-input
54 - v-if="item.value == 'OTHER:'"
55 - v-model="typeFormData1.otherData"
56 - style="width:100%"
57 - @mouseover.native="inputOnMouseOver($event)"
58 - placeholder=""
59 - maxlength="11"
60 - ></el-input>
61 - </el-tooltip>
62 - <span v-if="item.tip">&nbsp;&nbsp;{{ item.tip }}</span>
63 - </el-checkbox>
64 - </el-checkbox-group>
65 - </div>
66 - </el-form-item>
67 - <el-form-item
68 - class="tax-error"
69 - :label="$t('fillIn.isList')"
70 - prop="taxRefundFormFlag"
71 - >
72 - <el-checkbox-group
73 - v-model="typeFormData1.taxRefundFormFlag"
74 - @change="handleCheckType2(typeFormData1.taxRefundFormFlag)"
75 - >
76 - <el-checkbox
77 - v-for="(item, index) in taxRefundFormFlagList"
78 - :label="item.value"
79 - :key="index"
80 - >
81 - {{ item.label }}
82 - </el-checkbox>
83 - </el-checkbox-group>
84 - </el-form-item>
85 - </el-form>
86 - <el-form
87 - class="fedexFormStyle"
88 - ref="methodFormDataRef"
89 - :rules="methodFormDataRules"
90 - :model="methodFormData"
91 - label-position="top"
92 - >
93 - <el-row :gutter="8">
94 - <el-col :span="8">
95 - <Formitem :label="$t('fillIn.watchNum1')" prop="supervisoryNo">
96 - <el-input
97 - type="text"
98 - :id="'inputInner--supervisoryNo'"
99 - maxlength="5"
100 - @input="validateSupervisoryNo"
101 - v-model="methodFormData.supervisoryNo"
102 - >
103 - <!-- oninput="value = value.toUpperCase().replace(/\s+/g,'')" -->
104 - </el-input>
105 - </Formitem>
106 - </el-col>
107 - <el-col :span="8">
108 - <Formitem
109 - :label="$t('fillIn.watchNum2')"
110 - prop="originalImportEntryNo"
111 - >
112 - <el-input
113 - type="text"
114 - :id="'inputInner--originalImportEntryNo'"
115 - maxlength="14"
116 - v-model="methodFormData.originalImportEntryNo"
117 - >
118 - </el-input>
119 - </Formitem>
120 - </el-col>
121 - <el-col :span="8">
122 - <Formitem
123 - :label="$t('fillIn.watchNum3')"
124 - prop="listOfMaterialsNo"
125 - >
126 - <el-input
127 - type="text"
128 - :id="'inputInner--listOfMaterialsNo'"
129 - maxlength="20"
130 - v-model="methodFormData.listOfMaterialsNo"
131 - >
132 - </el-input>
133 - </Formitem>
134 - </el-col>
135 - </el-row>
136 - </el-form>
137 - <p class="small-title">{{ $t("fillIn.smallTit2") }}</p>
138 - <el-checkbox-group v-model="exportStatisticsMethod" class="check-color check-box-aaa" style="width: 100%;display: flex; gap: 10px">
139 - <div style=" width: 50%; height: 100%;" >
140 - <div v-for="(item, index) in exportStatisticsMethodList">
141 - <el-checkbox class="checkbox-step2" style="display: block; width:100%;" :label="item.value" v-if="item.posation == 'left'" :key="index+1"
142 - :class="item.tip && item.value !== '91' && item.value !== '9M'
143 - ? 'height48 checkbox-width50'
144 - : item.value == '9M'
145 - ? 'checkbox-9M'
146 - : item.value == 'OTHER:'
147 - ? 'line-height48 checkbox-width50'
148 - : 'checkbox-width50'
149 - ">
150 - <p style="width: 100%;">
151 - <span v-if="item.value !== 'OTHER:'">{{ item.label }}</span>
152 - <span v-if="item.value == '91'" class="way-tip">{{
153 - item.tip
154 - }}</span>
155 - </p>
156 - <div style="width: 100%;">
157 - <div style="width: 100%;"><span v-if="item.value == 'OTHER:'" >{{ item.label }}</span></div>
158 - <div style="width: 100%;">
159 - <!-- <el-tooltip
160 - class="item "
161 - effect="dark"
162 - :content="methodOtherData"
163 - placement="top-start"
164 - :disabled="isShowTooltip"
165 - > -->
166 - <el-input
167 - v-if="item.value == 'OTHER:'"
168 - style=" width:90%;"
169 - type="textarea"
170 - :rows="2"
171 - placeholder="請輸入"
172 - v-model="methodOtherData"
173 - maxlength="35"
174 - show-word-limit
175 - >
176 - </el-input>
177 - <!-- </el-tooltip> -->
178 - </div>
179 - </div>
180 - <p
181 - style="width: 100%;"
182 - class="way-tip"
183 - v-if="item.value !== '91' && item.value !== '9M'"
184 - >
185 - {{ item.tip }}
186 - </p>
187 -
188 - </el-checkbox>
189 - </div>
190 - </div>
191 -
192 - <div style="width: 50%; height: 100%;" >
193 - <div style="width: 100%;" v-for="(item, index) in exportStatisticsMethodList">
194 - <el-checkbox class="checkbox-step2" style="width: 100%;" :label="item.value" v-if="item.posation == 'right'" :key="index+2"
195 - :class="item.tip && item.value !== '91' && item.value !== '9M'
196 - ? 'height48 checkbox-width50'
197 - : item.value == '9M'
198 - ? 'checkbox-9M'
199 - : 'checkbox-width50'
200 - "
201 - >
202 - <p style="width: 100%;">
203 - <span v-if="item.value !== 'OTHER:'">{{ item.label }}</span>
204 - <span v-if="item.value == '91'" class="way-tip">{{
205 - item.tip
206 - }}</span>
207 - </p>
208 - <p
209 - style="width: 100%;"
210 - class="way-tip"
211 - >
212 - <span v-if="item.value !== '91' && item.value !== '9M'">{{ item.tip }} </span>
213 - <span v-if="item.value == '9M'" style="color: #fc5d5d">{{ item.tip }} </span>
214 - </p>
215 - <div >
216 - <el-input
217 - v-if="item.value == '9M'"
218 - style="margin-top: 4px ; width:90%;"
219 - type="textarea"
220 - :rows="2"
221 - placeholder="請輸入"
222 - v-model="methodAdditional"
223 - maxlength="100"
224 - show-word-limit
225 - >
226 - </el-input>
227 - </div>
228 - </el-checkbox>
229 - </div>
230 - </div>
231 - </el-checkbox-group>
232 - <!-- <div style="width: 100%;display: flex;align-items: center; gap: 10px">
233 -
234 - <el-checkbox-group v-model="exportStatisticsMethod" class="check-color">
235 - <el-checkbox
236 - v-for="(item, index) in exportStatisticsMethodList"
237 - :label="item.value"
238 - :key="index"
239 - :class="
240 - item.tip && item.value !== '91' && item.value !== '9M'
241 - ? 'height48 checkbox-width50'
242 - : item.value == '9M'
243 - ? 'checkbox-9M'
244 - : item.value == 'OTHER:'
245 - ? 'line-height48 checkbox-width50'
246 - : 'checkbox-width50'
247 - "
248 - >
249 - <p>
250 - <span v-if="item.value !== 'OTHER:'">{{ item.label }}</span>
251 - <span v-if="item.value == '91'" class="way-tip">{{
252 - item.tip
253 - }}</span>
254 - <span v-if="item.value == '9M'" style="color: #fc5d5d">
255 - {{ item.tip }}
256 - </span>
257 - </p>
258 - <span v-if="item.value == 'OTHER:'">{{ item.label }}</span>
259 - <el-tooltip
260 - class="item"
261 - effect="dark"
262 - :content="methodOtherData"
263 - placement="top-start"
264 - :disabled="isShowTooltip"
265 - >
266 - <el-input
267 - v-if="item.value == 'OTHER:'"
268 - class="no-boder-input"
269 - style="width: 500px"
270 - v-model="methodOtherData"
271 - placeholder=""
272 - @mouseover.native="inputOnMouseOver($event)"
273 - ></el-input>
274 - </el-tooltip>
275 - <p
276 - class="way-tip"
277 - v-if="item.value !== '91' && item.value !== '9M'"
278 - >
279 - {{ item.tip }}
280 - </p>
281 - <el-input
282 - v-if="item.value == '9M'"
283 - style="margin-top: 4px ;"
284 - type="textarea"
285 - :rows="2"
286 - placeholder="请输入"
287 - v-model="methodAdditional"
288 - maxlength="2000"
289 - show-word-limit
290 - >
291 - </el-input>
292 - </el-checkbox>
293 - </el-checkbox-group> -->
294 - <div class="way-tip-bule">
295 - ※以上復出口的案件,附加原進口報單(或國內採購發票),且隨貨附上具結
296 - 書正本。(詳如備註)
297 - </div>
298 - </div>
299 - <el-form
300 - class="fedexFormStyle bg-textarea"
301 - ref="dateFormDataRef"
302 - :model="dateFormData"
303 - :rules="dateFormDataRules"
304 - label-position="top"
305 - >
306 - <el-row :gutter="8">
307 - <el-col :span="12">
308 - <Formitem label="3. 指定報關日" prop="dayOfEntry">
309 - <el-date-picker
310 - v-model="dateFormData.dayOfEntry"
311 - format="yyyy-MM-dd"
312 - value-format="yyyy-MM-dd"
313 - type="date"
314 - id="inputInner--dayOfEntry"
315 - placeholder=""
316 - prefix-icon="none"
317 - :picker-options="pickerOptions"
318 - >
319 - </el-date-picker>
320 - </Formitem>
321 - </el-col>
322 - <el-col :span="12" >
323 - <Formitem
324 - >
325 - <div style="line-height: 50px;" class="trademark_color">
326 - <div style="display: inline; color: #333; font-weight: Bold;"> &nbsp;&nbsp;&nbsp;7. 商標&nbsp;&nbsp;</div>
327 - <el-checkbox style="display: inline; font-weight: Bold" v-model="brandFlag" :disabled="logoCheckDisabled" @change="handleCheckNo" >
328 - 無</el-checkbox>
329 - </div>
330 -
331 - </Formitem>
332 - </el-col>
333 - </el-row>
334 - <div >
335 -
336 - <div style="width: 100%;display: flex; gap: 8px;">
337 - <div style="width: 50%;display: flex;flex-direction: column;">
338 - <el-col :span="12" style="width: 100%; height: 160px;">
339 - <div class="textarea-box">
340 - <Formitem label="4. 中文品名" prop="chineseName" class="label" >
341 - <el-input
342 - type="textarea"
343 - :id="'inputInner--chineseName'"
344 - :rows="4"
345 - v-model="dateFormData.chineseName"
346 - maxlength="100"
347 - show-word-limit
348 - class="cnInput"
349 - >
350 - </el-input>
351 - </Formitem>
352 - </div>
353 - </el-col>
354 - <el-col :span="12" style="width: 100%;">
355 - <Formitem label="5. 稅則" prop="taxRules" >
356 - <el-input
357 - type="text"
358 - :id="'inputInner--taxRules'"
359 - v-model="dateFormData.taxRules"
360 - maxlength="18"
361 - >
362 - </el-input>
363 - </Formitem>
364 - </el-col>
365 - <div style="display: flex; gap: 8px;">
366 - <el-col :span="6" style=" width: 50%; ">
367 - <Formitem label="6. 報關金額" prop="customsDeclarationAmount" >
368 - <el-input
369 - type="text"
370 - :id="'inputInner--customsDeclarationAmount'"
371 - oninput="if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+5)}"
372 - v-model="dateFormData.customsDeclarationAmount"
373 - @blur="blurCheckCycd"
374 - maxlength="15"
375 - >
376 - </el-input>
377 - </Formitem>
378 - </el-col>
379 - <el-col :span="6" style="width: 50%; ">
380 - <Formitem label="" prop="currencyCd" >
381 - <el-select
382 - :id="'inputInner--currencyCd'"
383 - v-model="dateFormData.currencyCd"
384 - filterable
385 - clearable
386 - placeholder="幣別"
387 - value-key="id"
388 - :disabled="dateFormData.customsDeclarationAmount <= 0"
389 - >
390 - <el-option
391 - v-for="(item, index) in currencyCdList"
392 - :key="index"
393 - :label="item.code"
394 - :value="item.code"
395 - >
396 -
397 - </el-option>
398 -
399 - </el-select>
400 - <div style="height: 7px;">&nbsp;</div>
401 - </Formitem>
402 - </el-col>
403 - </div>
404 - </div>
405 - <div style="width: 50%;display: flex;flex-direction: column; ">
406 - <el-col :span="12" style="width: 100%; ">
407 - <Formitem label="文字商標" prop="brandTxt">
408 - <el-input
409 - type="text"
410 - :id="'inputInner--brandTxt'"
411 - maxlength="19"
412 - :disabled="logoTextDisabled || brandFlag == 1"
413 - v-model="brandFormData.brandTxt"
414 - @change="logoTextChange"
415 - >
416 - </el-input>
417 - </Formitem>
418 - </el-col>
419 - <el-col :span="12" style="width: 100%; ">
420 - <FileUploadPaste ref="uploadRef" style="height: 210px; width: 100%;"
421 - :imageBase="image" :disabled="logoDisabled || brandFlag == 1" @uploadFileInfo="uploadFileInfo" @uploadMsg="uploadMsg" >
422 - <div>圖案商標</div>
423 - </FileUploadPaste>
424 - </el-col>
425 -
426 - </div>
427 - </div>
428 -
429 - </div>
430 -
431 - </el-form>
432 - <div class="bottom-box" style="margin-top: 10px;">
433 -
434 - <el-form
435 - class="fedexFormStyle"
436 - ref="brandFormDataRef"
437 - :model="brandFormData"
438 - label-position="top"
439 - :disabled="logoDisabled"
440 - >
441 - </el-form>
442 - <p class="small-title">
443 - 8. 產證
444 - <span class="checkbox-width80-tip">※每份規費$250</span>
445 - </p>
446 - <el-checkbox-group
447 - v-model="propertyCertificate"
448 - class="checkbox-width80 check-color"
449 - @change="handleCheckType3"
450 - >
451 - <el-checkbox
452 - v-for="(item, index) in checkType3List"
453 - :label="item.value"
454 - :key="index"
455 - >
456 - {{ item.label }}
457 - </el-checkbox>
458 - </el-checkbox-group>
459 - <p class="small-title" style="line-height: 14px; margin-top: 8px">
460 - 9. ECFA產證
461 - </p>
462 - <el-row :gutter="8">
463 - <el-col :span="12">
464 - <el-checkbox-group
465 - v-model="ecfaPropertyCertificate"
466 - class="checkbox-width80 checkbox-lineheight80 check-color"
467 - @change="handleCheckType5"
468 - >
469 - <el-checkbox
470 - v-for="(item, index) in checkType4List"
471 - :label="item.value"
472 - :key="index"
473 - >
474 - {{ item.label }}
475 - </el-checkbox>
476 - </el-checkbox-group>
477 - </el-col>
478 - <el-col :span="12">
479 - <el-form
480 - class="fedexFormStyle"
481 - ref="ecfaFormDataRef"
482 - :model="ecfaFormData"
483 - :rules="ecfaFormDataRules"
484 - label-position="top"
485 - >
486 - <Formitem label="產證編號" prop="ecfaPropertyCertificateNo">
487 - <el-input
488 - type="text"
489 - :id="'inputInner--ecfaPropertyCertificateNo'"
490 - maxlength="16"
491 - v-model="ecfaFormData.ecfaPropertyCertificateNo"
492 - :disabled="certificateNoDisabled"
493 - >
494 - </el-input>
495 - </Formitem>
496 - </el-form>
497 - </el-col>
498 - </el-row>
499 - <p class="small-title" style="line-height: 14px; margin-bottom: 8px">
500 - 10. 申請
501 - <span class="checkbox-width80-tip">※每份規費$100</span>
502 - </p>
503 - <el-checkbox-group
504 - v-model="applyFor"
505 - class="checkbox-width80 check-color"
506 - >
507 - <el-checkbox
508 - v-for="(item, index) in checkType5List"
509 - :label="item.value"
510 - :key="index"
511 - >
512 - {{ item.label }}
513 - </el-checkbox>
514 - </el-checkbox-group>
515 - </div>
516 - </div>
517 - <div align="center" class="entrySave" style="margin-top: 30px;">
518 - <el-button
519 - class="entrySaveButton entrySaveButton-background"
520 - @click="nextStepTwo('save')"
521 - :loading="step2Loading"
522 - >
523 - {{ $t("fillIn.nextStep") }}
524 - </el-button>
525 - </div>
526 - </div>
527 -</template>
528 -<script>
529 -import {
530 - findAllCurrencyCd,
531 - declareCheckInfoUpdate,
532 - declareCheckInfoSave,
533 - generatePdf,
534 -} from "@/api/fillForm.js";
535 -import { mapGetters } from "vuex";
536 -import FileUploadPaste from "@/components/FileUploadPaste";
537 -export default {
538 - components: {
539 - FileUploadPaste,
540 - },
541 - props: {
542 - stepStates: {
543 - type: Array,
544 - default() {
545 - return [];
546 - },
547 - },
548 - step2Id: {
549 - type: Number,
550 - default() {
551 - return null;
552 - },
553 - },
554 - declareId: {
555 - type: Number,
556 - default() {
557 - return null;
558 - },
559 - },
560 - generateAutoPdf:{
561 - type: Boolean,
562 - default() {
563 - return false;
564 - },
565 - }
566 - },
567 - watch:{
568 - errorTip(newVal,oldVal){
569 - if(newVal.length>0){
570 - this.toHead('view-box')
571 - }
572 -
573 - },
574 - 'dateFormData.customsDeclarationAmount':{
575 - handler(val){
576 - if (!val) {
577 - this.dateFormData.currencyCd = null;
578 - }
579 - }
580 - },
581 - // 'typeFormData1.otherData':{
582 - // handler(val){
583 - // if (val) {
584 - // this.typeFormData1.customsDeclarationType=[];
585 - // this.typeFormData1.customsDeclarationType.push("OTHER:");
586 - // }
587 - // }
588 - // },
589 - methodAdditional(val){
590 - if(val && val.length>0 && !this.exportStatisticsMethod.includes("9M")){
591 - this.exportStatisticsMethod.push("9M");
592 - }
593 - },
594 - methodOtherData(val){
595 - if(val && val.length>0 && !this.exportStatisticsMethod.includes("OTHER:")){
596 - this.exportStatisticsMethod.push("OTHER:");
597 - }
598 - },
599 - }, mounted() {
600 - // this.$nextTick(() => {
601 - // const myDiv = this.$refs.aaaaaaaa;
602 - // myDiv.addEventListener('click', () => {
603 - // console.log("11111111111111111111");
604 - // });
605 - // // 模拟点击操作
606 - // myDiv.click();
607 - // });
608 - // var pDiv = document.getElementById('pasteListener');
609 - // console.log(pDiv);
610 - // this.$nextTick(() => {
611 - // pDiv.addEventListener('paste', event => {
612 - // console.log("66666");
613 - // this.$refs.uploadRef.pasteImg(event);
614 - // });
615 - // });
616 -
617 - },
618 - data() {
619 -
620 - return {
621 - createInfo:{
622 - createTime: null,
623 - createName: null,
624 - },
625 - uploadMsg:"",
626 - isShowTooltip: true,
627 - slipId:null,
628 - typeFormData1: {
629 - customsDeclarationType: [],
630 - taxRefundFormFlag: [],
631 - otherData: "",
632 - }, pickerOptions: {
633 - disabledDate: (time) => {
634 - return time.getTime() < new Date()-(1000 * 60 * 60 * 24 );
635 - },
636 - },
637 - setImgBlob:null,
638 - typeFormData1Rules: {
639 - customsDeclarationType: [
640 - { required: false, message: "請您勾選報單類別", trigger: "change" },
641 - ],
642 - taxRefundFormFlag: [
643 - {
644 - required: false,
645 - message: "請您勾選是否為電子沖退稅報單",
646 - trigger: "change",
647 - },
648 - ],
649 - },
650 - methodFormData: {
651 - supervisoryNo: "",
652 - originalImportEntryNo: "",
653 - listOfMaterialsNo: "",
654 - },
655 - methodAdditional: "",
656 - methodFormDataRules: {
657 - supervisoryNo: [
658 - {
659 - required: false,
660 - validator: (rule, value, callback) => {
661 - if (value) {
662 - if (!this.regExp.supervisoryNoExp.test(value)) {
663 - callback("請您輸入英文(大寫)和數字組合");
664 - } else if (value.length != 5) {
665 - callback("監管編號只能爲5個字元");
666 - } else {
667 - callback();
668 - }
669 - } else {
670 - callback();
671 - }
672 - },
673 - trigger: "blur",
674 - },
675 - ],
676 - originalImportEntryNo: [
677 - {
678 - required: false,
679 - validator: (rule, value, callback) => {
680 - if (value) {
681 - if (!this.regExp.originalImportEntryNoExp1.test(value)) {
682 - callback(
683 - "請您使用英文，數字和空格的組合，不支持以下字符：、, ；, ‘, ’"
684 - );
685 - } else if (value.length > 14) {
686 - callback(
687 - "原進口提單號碼最多可包含14個字元，而您輸入了" +
688 - value.length +
689 - "個字元。"
690 - );
691 - } else {
692 - callback();
693 - }
694 - } else {
695 - callback();
696 - }
697 - },
698 - trigger: "blur",
699 - },
700 - ],
701 - listOfMaterialsNo: [
702 - {
703 - required: false,
704 - validator: (rule, value, callback) => {
705 - if (value) {
706 - if (!this.regExp.listOfMaterialsNoExp1.test(value)) {
707 - callback(
708 - "請您使用中文，英文，數字和空格的組合，不支持以下字符：、, ；, ‘, ’"
709 - );
710 - } else if (value.length > 50) {
711 - callback(
712 - "用料清表文號最多可包含50個字元，而您輸入了" +
713 - value.length +
714 - "個字元。"
715 - );
716 - } else {
717 - callback();
718 - }
719 - } else {
720 - callback();
721 - }
722 - },
723 - trigger: "blur",
724 - },
725 - ],
726 - },
727 - exportStatisticsMethod: [],
728 - methodOtherData: "",
729 - dateFormData: {
730 - dayOfEntry: "",
731 - chineseName: "",
732 - taxRules: "",
733 - customsDeclarationAmount: "",
734 - currencyCd: "",
735 - },
736 - dateFormDataRules: {
737 - dayOfEntry: [
738 - { required: false, message: "請你選擇日期", trigger: "change" },
739 - ],
740 - taxRules: [
741 - {
742 - required: false,
743 - validator: (rule, value, callback) => {
744 - if (value) {
745 - if (value.length > 50) {
746 - callback(
747 - "稅則最多可包含50個字元，而您輸入了" +
748 - value.length +
749 - "個字元。"
750 - );
751 - } else {
752 - callback();
753 - }
754 - } else {
755 - callback();
756 - }
757 - },
758 - trigger: "blur",
759 - },
760 - ],
761 - customsDeclarationAmount: [
762 - {
763 - required: false,
764 - // validator:validateMoney,
765 - validator: (rule, value, callback) => {
766 - if(isNaN(value)){
767 - callback(new Error('報關金額格式不正確'))
768 - // callback();
769 - }else{
770 - if (value && value.toString().includes('.')) {
771 - if (value.toString().split('.').length > 3) {
772 - callback(new Error('報關金額格式不正確')) //防止输入多个小数点
773 - } else {
774 - //只能输入数字和小数点
775 - // value=value.replace(/[^\d^.]+/g,'')
776 -
777 - value = Math.round(value * Math.pow(10, 3)) / Math.pow(10, 3) //四舍五入
778 - // value = Number(value).toFixed(3); //不足补位
779 - this.dateFormData.customsDeclarationAmount = value;
780 - callback();
781 - }
782 - callback();
783 - } else {
784 - callback();
785 - }
786 - }
787 -
788 - },
789 - trigger: "blur",
790 - },
791 - ],
792 - currencyCd: [
793 - {
794 - required: false,
795 - validator: (rule, value, callback) => {
796 - if (!value && this.dateFormData.customsDeclarationAmount > 0) {
797 - callback("請您選擇幣別");
798 - } else {
799 - callback();
800 - }
801 - },
802 - trigger: "change",
803 - },
804 - ],
805 - },
806 - currencyCdList: [],
807 - brandFlag: false,
808 - brandFormData: {
809 - brandTxt: "",
810 - },
811 - image: "",
812 - propertyCertificate: [],
813 - ecfaPropertyCertificate: [],
814 - ecfaFormData: {
815 - ecfaPropertyCertificateNo: "",
816 - },
817 - ecfaFormDataRules: {
818 - ecfaPropertyCertificateNo: [
819 - {
820 - required: false,
821 - validator: (rule, value, callback) => {
822 - if (value) {
823 - if (!this.regExp.listOfMaterialsNoExp.test(value)) {
824 - callback(
825 - "産證編號最多可包含100個字元，且不支持輸入符號"
826 - );
827 - } else if (value.length > 50) {
828 - callback(
829 - "用料清表文號最多可包含50個字元，而您輸入了" +
830 - value.length +
831 - "個字元。"
832 - );
833 - } else {
834 - callback();
835 - }
836 - } else {
837 - callback();
838 - }
839 - },
840 - trigger: "blur",
841 - },
842 - ],
843 - },
844 - certificateNoDisabled: false,
845 - applyFor: [],
846 - logoDisabled: false,
847 - logoTextDisabled: false,
848 - logoCheckDisabled: false,
849 - errorTip: [],
850 - step2Loading: false,
851 - };
852 - },
853 - computed: {
854 - ...mapGetters(["deliveryNo"]),
855 - customsDeclarationTypeList() {
856 - return [
857 - { label: this.$t("fillIn.listType1"), value: "G5", tip: "" },
858 - { label: this.$t("fillIn.listType2"), value: "G3", tip: "" },
859 - { label: this.$t("fillIn.listType3"), value: "B9", tip: "" },
860 - { label: this.$t("fillIn.listType4"), value: "B8", tip: "" },
861 - { label: this.$t("fillIn.listType5"), value: "D5", tip: "" },
862 - { label: this.$t("fillIn.listType6"), value: "F5", tip: "" },
863 - {
864 - label: this.$t("fillIn.listType7_1"),
865 - value: "OTHER:",
866 - tip: this.$t("fillIn.listType7_2"),
867 - },
868 - ];
869 - },
870 - taxRefundFormFlagList() {
871 - return [
872 - { label: this.$t("fillIn.yes"), value: 1 },
873 - { label: this.$t("fillIn.no"), value: 0 },
874 - ];
875 - },
876 - exportStatisticsMethodList() {
877 - return [
878 - { label: this.$t("fillIn.wayList1"), value: "02", tip: "" , posation:"left"},
879 - { label: this.$t("fillIn.wayList2"), value: "81", tip: "" , posation: "right" },
880 - { label: "(04)無價之禮物、貨樣及廣告品, 不再進口", value: "04", tip: "", posation: "left" },
881 - { label: "(82)外貨復出口不再進口", value: "82", tip: "" , posation: "right" },
882 - { label: this.$t("fillIn.wayList3"), value: "53", tip: this.$t("fillIn.wayList3_1"), posation: "left" },
883 - { label: this.$t("fillIn.wayList4"), value: "9L", tip: "", posation: "right" },
884 - {
885 - label: this.$t("fillIn.wayList5_1"),
886 - value: "91",
887 - tip: this.$t("fillIn.wayList5_2"),
888 - posation: "left"
889 - },
890 - { label: this.$t("fillIn.wayList6"), value: "9S", tip: "" , posation: "right" },
891 - {
892 - label: this.$t("fillIn.wayList7_1"),
893 - value: "94",
894 - tip: this.$t("fillIn.wayList7_2"),
895 - posation: "left"
896 - },
897 -
898 - {
899 - label: this.$t("fillIn.wayList9_1"),
900 - value: "9M",
901 - tip: this.$t("fillIn.wayList9_2"),
902 - posation: "right"
903 - }, {
904 - label: this.$t("fillIn.wayList10_1"),
905 - value: "96",
906 - tip: this.$t("fillIn.wayList10_2"),
907 - posation: "left"
908 - },
909 -
910 - {
911 - label: this.$t("fillIn.wayList8_1"),
912 - value: "92",
913 - tip: this.$t("fillIn.wayList8_2"),
914 - posation: "right"
915 - },
916 - { label: this.$t("fillIn.wayList11"), value: "OTHER:", tip: "" , posation: "left" },
917 -
918 -
919 - ];
920 - },
921 - checkType3List() {
922 - return [
923 - { label: "不要", value: "pc_no" },
924 - { label: "要", value: "pc_yes" },
925 - { label: "隨機", value: "pc_random" },
926 - { label: "不隨機", value: "pc_niRandom" },
927 - ];
928 - },
929 - checkType4List() {
930 - return [
931 - { label: "不要", value: "ecfa_no" },
932 - { label: "要申請", value: "ecfa_yes" },
933 - { label: "自行申請", value: "ecfa_apply" },
934 - ];
935 - },
936 - checkType5List() {
937 - return [
938 - { label: "沖退原料稅", value: "ct" },
939 - { label: "退內地稅", value: "tn" },
940 - { label: "出口證明聯/副報單", value: "ck" },
941 - ];
942 - },
943 - },
944 - created() {
945 - Promise.all([findAllCurrencyCd()]).then((res) => {
946 - this.currencyCdList = res[0].data;
947 - });
948 - },
949 - methods: {
950 - inputOnMouseOver(e){
951 - const target = event.target;
952 - // 判断是否开启tooltip功能
953 - if (target.offsetWidth < target.scrollWidth) {
954 - this.isShowTooltip = false;
955 - } else {
956 - this.isShowTooltip = true;
957 - }
958 - },
959 - // 校验
960 - submitForm(formRef) {
961 - return new Promise((resolve, reject) => {
962 - this.$refs[formRef].validate((valid, object) => {
963 - if (valid) {
964 - resolve();
965 - } else {
966 - for (var key in object) {
967 - if (object.hasOwnProperty(key)) {
968 - this.errorTip.push(object[key][0].message);
969 - this.errorTip = [...new Set(this.errorTip)];
970 - }
971 - }
972 - reject();
973 - }
974 - });
975 - });
976 - },
977 - uploadFileInfo(obj){
978 - this.setImgBlob=obj;
979 - },
980 - checkForm(){
981 - this.errorTip = [];
982 - var checkForm=["typeFormData1Ref","methodFormDataRef","dateFormDataRef","brandFormDataRef","ecfaFormDataRef"];
983 - checkForm.forEach(formRef => {
984 - this.submitForm(formRef);
985 -
986 - });
987 - return this.errorTip;
988 -
989 - },
990 - // 下一步按钮
991 - nextStepTwo(type) {
992 -
993 - if(this.methodAdditional && this.methodAdditional.length>0){
994 - if(!this.exportStatisticsMethod.includes("9M"))
995 - this.exportStatisticsMethod.push("9M")
996 - }else{
997 - if (!this.methodAdditional && this.exportStatisticsMethod.includes("9M")){
998 - this.exportStatisticsMethod = this.exportStatisticsMethod.filter(function (item) {
999 - return item !== "9M";
1000 - });
1001 - }
1002 - }
1003 -
1004 - if(this.methodOtherData.length > 0){
1005 - if (!this.exportStatisticsMethod.includes("OTHER:"))
1006 - this.exportStatisticsMethod.push("OTHER:")
1007 - }
1008 -
1009 - this.errorTip=[];
1010 - let exportMethodList = this.exportStatisticsMethod.map((item) => {
1011 - if (item === "OTHER:") {
1012 - item = "OTHER:" + this.methodOtherData;
1013 - }
1014 - return item;
1015 - });
1016 - let paramsData = {
1017 - check: "0",
1018 - applyFor: this.applyFor.join(";"),
1019 - brandFlag: this.brandFlag ? 1 : null,
1020 - customsDeclarationType:
1021 - this.typeFormData1.customsDeclarationType[0] == "OTHER:"
1022 - ? "OTHER:" + this.typeFormData1.otherData
1023 - : this.typeFormData1.customsDeclarationType[0],
1024 - taxRefundFormFlag: this.typeFormData1.taxRefundFormFlag[0],
1025 - ecfaPropertyCertificate: this.ecfaPropertyCertificate[0],
1026 - exportStatisticsMethod: exportMethodList.join(";"),
1027 - methodAdditional: this.methodAdditional,
1028 - propertyCertificate: this.propertyCertificate.join(";"),
1029 - deliveryNo: this.deliveryNo,
1030 - declareId: this.declareId,
1031 - ...this.methodFormData,
1032 - ...this.dateFormData,
1033 - ...this.brandFormData,
1034 - ...this.ecfaFormData,
1035 - ...this.createInfo,
1036 - width:200,
1037 - height:200,
1038 - imageSelect:this.setImgBlob ? this.setImgBlob.imageSelect : null,
1039 - };
1040 -
1041 - if (this.step2Id) {
1042 - this.slipId = this.step2Id;
1043 - }
1044 -
1045 - var checkForm = ["typeFormData1Ref", "methodFormDataRef", "dateFormDataRef", "brandFormDataRef", "ecfaFormDataRef"];
1046 -
1047 - //判断校验是否通过
1048 - if (!this.checkFromNotShowError(checkForm)) {
1049 -
1050 - // this.$emit("setStepStates", [], ["finish2"], "finish2", "");
1051 - delete paramsData.check;
1052 - this.saveUpdate(type,paramsData);
1053 - } else{
1054 - this.saveUpdate(type, paramsData);
1055 - }
1056 -
1057 - // if (type == "topSave") {
1058 - // delete paramsData.check;
1059 - // if (this.slipId) {
1060 - // paramsData.id = this.slipId;
1061 - // this.editCheckInfoSaveStep2(paramsData, this.setImgBlob,"no");
1062 - // } else {
1063 - // this.addCheckInfoSaveStep2(paramsData, this.setImgBlob,"no");
1064 - // }
1065 - // // this.$emit("setStepStates", [], "finish2");
1066 - // } else if (type == "save") { //点击下一步时
1067 - // let checkRes;
1068 - // await Promise.all([
1069 - // this.submitForm("typeFormData1Ref"),
1070 - // this.submitForm("ecfaFormDataRef"),
1071 - // this.submitForm("dateFormDataRef"),
1072 - // ])
1073 - // .then(() => {
1074 - // checkRes = true;
1075 - // })
1076 - // .catch((res) => {
1077 - // if(res) this.msgWarning(res);
1078 - // checkRes = false;
1079 - // });
1080 - // if (checkRes) {
1081 - // if (this.slipId) {
1082 - // paramsData.id = this.slipId;
1083 - // this.editCheckInfoSaveStep2(paramsData, this.setImgBlob,"next");
1084 - // } else {
1085 - // this.addCheckInfoSaveStep2(paramsData, this.setImgBlob, "next");
1086 - // }
1087 - // }
1088 - // } else {
1089 - // if (this.stepStates.includes("finish2")) {
1090 - // let checkRes;
1091 - // await Promise.all([
1092 - // this.submitForm("typeFormData1Ref"),
1093 - // this.submitForm("dateFormDataRef"),
1094 - // ])
1095 - // .then(() => {
1096 - // checkRes = true;
1097 - // })
1098 - // .catch((res) => {
1099 - // this.$message.error(res)
1100 - // console.log(res);
1101 - // checkRes = false;
1102 - // });
1103 - // if (checkRes) {
1104 - // if (this.slipId) {
1105 - // paramsData.id = this.slipId;
1106 - // this.editCheckInfoSaveStep2(paramsData, this.setImgBlob, type);
1107 - // }
1108 - // }
1109 - // } else {
1110 - // delete paramsData.check;
1111 - // if (this.slipId) {
1112 - // paramsData.id = this.slipId;
1113 - // this.editCheckInfoSaveStep2(paramsData, this.setImgBlob,type);
1114 - // } else {
1115 - // this.addCheckInfoSaveStep2(paramsData, this.setImgBlob, type);
1116 - // }
1117 - // }
1118 - // }
1119 - },
1120 - async saveUpdate(type, paramsData){
1121 - if (type == "save") {
1122 - let checkRes;
1123 - await Promise.all([
1124 - this.submitForm("typeFormData1Ref"),
1125 - this.submitForm("ecfaFormDataRef"),
1126 - this.submitForm("dateFormDataRef"),
1127 - this.submitForm("methodFormDataRef"),
1128 - this.submitForm("brandFormDataRef"),
1129 - ])
1130 - .then(() => {
1131 - checkRes = true;
1132 - })
1133 - .catch((res) => {
1134 - if (res) this.msgWarning(res);
1135 - checkRes = false;
1136 - });
1137 - if (checkRes) {
1138 -
1139 - let checkStepRes = this.$parent.checkStepForm({ curStep: 3 })
1140 - if (!checkStepRes) {
1141 - if (this.slipId) {
1142 - paramsData.id = this.slipId;
1143 - this.editCheckInfoSaveStep2(paramsData, this.setImgBlob, "next");
1144 - } else {
1145 - this.addCheckInfoSaveStep2(paramsData, this.setImgBlob, "next");
1146 - }
1147 - }
1148 - }
1149 - } else {
1150 - // delete paramsData.check;
1151 - if (this.slipId) {
1152 - paramsData.id = this.slipId;
1153 - this.editCheckInfoSaveStep2(paramsData, this.setImgBlob, type);
1154 - } else {
1155 - this.addCheckInfoSaveStep2(paramsData, this.setImgBlob, type);
1156 - }
1157 - }
1158 - },
1159 -
1160 - checkFromNotShowError(formRefs) {
1161 - let checkRes = false;
1162 - for(let i=0;i<formRefs.length;i++){
1163 - this.$refs[formRefs[i]].validate((valid, object) => {
1164 - if (valid) {
1165 - checkRes = true;
1166 - // resolve();
1167 - } else {
1168 - checkRes = false;
1169 -
1170 - }
1171 - });
1172 - if(!checkRes){
1173 - break;
1174 - }
1175 - }
1176 - return checkRes;
1177 - },
1178 - // 新增保存检核表信息
1179 - addCheckInfoSaveStep2(data, uploadFormData, type) {
1180 -
1181 - if (type == "next") {
1182 - this.step2Loading = true;
1183 - } else if (typeof type == "number") {
1184 - this.$emit("clickLoading", true);
1185 - }
1186 - let formData = new FormData(); //formdata格式
1187 -
1188 - formData.append("file", uploadFormData ? uploadFormData.file : null);
1189 - const blob = new Blob([JSON.stringify(data)], { type: 'application/json;charset=utf-8' });
1190 - formData.append("dto", blob)
1191 -
1192 - declareCheckInfoSave(formData)
1193 - .then((res) => {
1194 - if (res.code == 200) {
1195 - this.slipId=res.data.id;
1196 - this.createInfo={
1197 - createTime: res.data.createTime,
1198 - createName: res.data.createName,
1199 - }
1200 - // this.$message.success("保存成功");
1201 - if (type == "next") {
1202 - generatePdf(this.declareId).then((res) => {
1203 - if (res.code = 200) {
1204 - this.step2Loading = false;
1205 - this.$emit("clickLoading", false);
1206 - this.$message.success("保存成功");
1207 - this.goNextStepMethod();
1208 - } else {
1209 -
1210 - this.step2Loading = false;
1211 - this.$message.error("DPF生成失敗");
1212 - }
1213 - })
1214 - // this.goNextStepMethod();
1215 - } else if (typeof type == "number") {
1216 - if(this.generateAutoPdf){
1217 - generatePdf(this.declareId).then((res) => {
1218 - if (res.code = 200) {
1219 - this.step2Loading = false;
1220 - this.$emit("clickLoading", false);
1221 - this.$message.success("保存成功");
1222 - this.goEditStep(type);
1223 - } else {
1224 -
1225 - this.step2Loading = false;
1226 - this.$message.error("DPF生成失敗");
1227 - }
1228 - })
1229 - }else{
1230 - this.step2Loading = false;
1231 - this.$emit("clickLoading", false);
1232 - this.goEditStep(type);
1233 - }
1234 -
1235 - }else{
1236 - this.$message.success("保存成功");
1237 - }
1238 - } else {
1239 - this.step2Loading = false;
1240 - this.msgWarning(res.msg);
1241 - }
1242 - this.$emit("clickLoading", false);
1243 - })
1244 - .catch(() => {
1245 - this.step2Loading = false;
1246 - this.$emit("clickLoading", false);
1247 - }).finally(() => {
1248 - this.step2Loading = false;
1249 - this.$emit("clickLoading", false);
1250 - })
1251 - },
1252 - // 编辑保存检核表信息
1253 - editCheckInfoSaveStep2(data, uploadFormData,type) {
1254 - if (type == "next") {
1255 - this.step2Loading = true;
1256 - } else if (typeof type == "number") {
1257 - this.$emit("clickLoading", true);
1258 - }
1259 - let formData = new FormData(); //formdata格式
1260 - formData.append("file", uploadFormData ? uploadFormData.file : null);
1261 - const blob=new Blob([JSON.stringify(data)],{ type:'application/json;charset=utf-8'});
1262 - formData.append("dto",blob)
1263 -
1264 - declareCheckInfoUpdate(formData)
1265 - .then((res) => {
1266 - if (res.code == 200) {
1267 - if (type == "next" ) {
1268 - generatePdf(this.declareId).then((res)=>{
1269 - if(res.code=200){
1270 - this.step2Loading = false;
1271 - this.$emit("clickLoading", false);
1272 - this.$message.success("保存成功");
1273 - this.goNextStepMethod();
1274 - }else{
1275 -
1276 - this.step2Loading = false;
1277 - this.$message.error("DPF生成失敗");
1278 - }
1279 - })
1280 - // this.$parent.generateAutoPdf();
1281 -
1282 - } else if (typeof type == "number") {
1283 - if(this.generateAutoPdf){
1284 - generatePdf(this.declareId).then((res) => {
1285 - if (res.code = 200) {
1286 - this.step2Loading = false;
1287 - this.$emit("clickLoading", false);
1288 - // this.$message.success("保存成功");
1289 - this.goEditStep(type);
1290 - } else {
1291 -
1292 - this.step2Loading = false;
1293 - this.$message.error("DPF生成失敗");
1294 - }
1295 - })
1296 - }else{
1297 - this.$emit("clickLoading", false);
1298 - this.goEditStep(type);
1299 - }
1300 - this.$message.success("保存成功");
1301 - // this.goEditStep(type);
1302 - }else{
1303 - this.$message.success("保存成功");
1304 - }
1305 - } else {
1306 - this.step2Loading = false;
1307 - this.msgWarning(res.msg);
1308 - }
1309 - })
1310 - .catch(() => {
1311 - this.step2Loading = false;
1312 - this.$emit("clickLoading", false);
1313 - }).finally(()=>{
1314 - this.step2Loading = false;
1315 - this.$emit("clickLoading", false);
1316 - })
1317 - },
1318 - // 编辑时要跳转到的页面
1319 - goEditStep(type) {
1320 - // this.$emit("setStepStates", ["finish2"], "");
1321 - this.$emit("setStepStates", ["finish2"], ["finish2"], "", "");
1322 - this.$emit("addNextStep", {
1323 - curStep: type,
1324 - declareId: this.declareId,
1325 - });
1326 - },
1327 - // 点击下一步时要跳转的页面
1328 - goNextStepMethod() {
1329 - this.$emit("setStepStates", ["finish2"], ["finish2"], "", "");
1330 - this.$emit("addNextStep", {
1331 - curStep: 3,
1332 - declareId: this.declareId,
1333 - });
1334 - },
1335 - // 编辑回填数据
1336 - editFillBackStep2(data) {
1337 - this.toHead('view-box');
1338 - if(data){
1339 - let cdl = data.customsDeclarationType;
1340 -
1341 - this.typeFormData1 = {
1342 - customsDeclarationType: cdl ? cdl.includes("OTHER:") ? ["OTHER:"] : [cdl] : [],
1343 - taxRefundFormFlag: [data.taxRefundFormFlag],
1344 - otherData: cdl ? cdl.includes("OTHER:")
1345 - ? data.customsDeclarationType.slice(6)
1346 - : "" : "",
1347 - };
1348 - // if(data.customsDeclarationType!=null){
1349 - // this.typeFormData1 = {
1350 - // customsDeclarationType: data.customsDeclarationType.includes("OTHER:")
1351 - // ? ["OTHER:"]
1352 - // : [data.customsDeclarationType],
1353 - // taxRefundFormFlag: data.taxRefundFormFlag==null ? [] : [data.taxRefundFormFlag],
1354 - // otherData: data.customsDeclarationType.includes("OTHER:")
1355 - // ? data.customsDeclarationType.slice(6)
1356 - // : "",
1357 - // };
1358 - // }
1359 - this.methodFormData = {
1360 - supervisoryNo: data.supervisoryNo,
1361 - originalImportEntryNo: data.originalImportEntryNo,
1362 - listOfMaterialsNo: data.listOfMaterialsNo,
1363 - };
1364 - let exportData = data.exportStatisticsMethod?.split(";");
1365 - if (exportData && exportData.length > 0) {
1366 - exportData.forEach((item, index, arr) => {
1367 - if (item.includes("OTHER:")) {
1368 - this.methodOtherData = item.slice(6);
1369 - arr[index] = "OTHER:";
1370 - }
1371 - });
1372 - }
1373 - this.exportStatisticsMethod = exportData || [];
1374 - this.methodAdditional = data.methodAdditional;
1375 - this.dateFormData = {
1376 - dayOfEntry: data.dayOfEntry,
1377 - chineseName: data.chineseName,
1378 - taxRules: data.taxRules,
1379 - customsDeclarationAmount: data.customsDeclarationAmount,
1380 - currencyCd: data.currencyCd,
1381 - createTime: data.createTime,
1382 - createName: data.createName,
1383 -
1384 - };
1385 - this.brandFlag = data.brandFlag == 1 ? true : false;
1386 -
1387 - this.brandFormData = {
1388 - brandTxt: data.brandTxt,
1389 -
1390 - };
1391 - this.image = data.image;
1392 - this.propertyCertificate = data.propertyCertificate
1393 - ? data.propertyCertificate.split(";")
1394 - : [];
1395 - this.ecfaPropertyCertificate = data.ecfaPropertyCertificate
1396 - ? [data.ecfaPropertyCertificate]
1397 - : [];
1398 - this.ecfaFormData.ecfaPropertyCertificateNo =
1399 - data.ecfaPropertyCertificateNo;
1400 - this.applyFor = data.applyFor ? data.applyFor.split(";") : [];
1401 - this.createInfo = {
1402 - createTime: data.createTime,
1403 - createName: data.createName,
1404 - }
1405 - }
1406 -
1407 - },
1408 - // 全部清除
1409 - clearFormStep2() {
1410 - this.typeFormData1.otherData="";
1411 - this.$refs.typeFormData1Ref.resetFields();
1412 - this.$refs.methodFormDataRef.resetFields();
1413 - this.$refs.dateFormDataRef.resetFields();
1414 - // this.$refs.brandFormDataRef.resetFields();
1415 - this.$refs.ecfaFormDataRef.resetFields();
1416 - //删除图片显示
1417 - this.$refs.uploadRef.removeImg();
1418 -
1419 - this.brandFormData={}
1420 - this.imgBlob="";
1421 - this.exportStatisticsMethod = [];
1422 - this.methodOtherData = "";
1423 - this.methodAdditional = "";
1424 - this.brandFlag = false;
1425 - this.propertyCertificate = [];
1426 - this.ecfaPropertyCertificate = [];
1427 - this.applyFor = [];
1428 - this.handleCheckNo(false);
1429 -
1430 - },
1431 - // 金额大于0时提示校验
1432 - blurCheckCycd() {
1433 - if (this.dateFormData.customsDeclarationAmount > 0) {
1434 - this.$refs.dateFormDataRef.validateField("currencyCd");
1435 - } else {
1436 - this.$refs.dateFormDataRef.clearValidate("currencyCd");
1437 - }
1438 - },
1439 - // 监管编号校验
1440 - validateSupervisoryNo(value) {
1441 - this.methodFormData.supervisoryNo = value
1442 - .toUpperCase()
1443 - .replace(/\s+/g, "");
1444 - if (this.methodFormData.supervisoryNo) {
1445 - this.$refs.methodFormDataRef.validateField("supervisoryNo");
1446 - }
1447 - },
1448 - // 商标勾选无时清空并禁用
1449 - handleCheckNo(val) {
1450 - if (val) {
1451 - this.logoDisabled = true;
1452 - this.logoTextDisabled = true;
1453 -
1454 - this.brandFormData = {
1455 - brandTxt: "",
1456 - };
1457 - } else {
1458 - this.logoDisabled = false;
1459 - this.logoTextDisabled = false;
1460 - }
1461 - this.setImgBlob={file:null, imageSelect:1};
1462 - }, logoTextChange(val){
1463 - // if (val) {
1464 - // this.logoDisabled = true;
1465 - // this.logoCheckDisabled = true;
1466 - // this.brandFlag=false;
1467 -
1468 - // } else {
1469 - // this.logoDisabled = false;
1470 - // this.logoCheckDisabled = false;
1471 - // }
1472 - },
1473 - // 复选框处理变成单选
1474 - handleCheckType1(val) {
1475 - if (val.length > 0) {
1476 - this.typeFormData1.customsDeclarationType = [val[val.length - 1]];
1477 - }
1478 - },
1479 - // 复选框处理变成单选
1480 - handleCheckType2(val) {
1481 - if (val.length > 0) {
1482 - this.typeFormData1.taxRefundFormFlag = [val[val.length - 1]];
1483 - }
1484 - },
1485 - // 复选框处理变成双选或单选
1486 - handleCheckType3(val) {
1487 - if (val.length > 0) {
1488 - if (val[val.length - 1] == "pc_no") {
1489 - if (val.includes("pc_yes")) {
1490 - this.propertyCertificate = val.filter((item) => item != "pc_yes");
1491 - }
1492 - } else if (val[val.length - 1] == "pc_yes") {
1493 - if (val.includes("pc_no")) {
1494 - this.propertyCertificate = val.filter((item) => item != "pc_no");
1495 - }
1496 - } else if (val[val.length - 1] == "pc_random") {
1497 - if (val.includes("pc_niRandom")) {
1498 - this.propertyCertificate = val.filter(
1499 - (item) => item != "pc_niRandom"
1500 - );
1501 - }
1502 - } else if (val[val.length - 1] == "pc_niRandom") {
1503 - if (val.includes("pc_random")) {
1504 - this.propertyCertificate = val.filter(
1505 - (item) => item != "pc_random"
1506 - );
1507 - }
1508 - }
1509 - }
1510 - },
1511 - // 复选框处理变成单选
1512 - handleCheckType5(val) {
1513 - if (val.length > 0) {
1514 - this.ecfaPropertyCertificate = [val[val.length - 1]];
1515 - }
1516 - if (this.ecfaPropertyCertificate[0] == "ecfa_no") {
1517 - this.ecfaFormData.ecfaPropertyCertificateNo = "";
1518 - this.certificateNoDisabled = true;
1519 - } else {
1520 - this.certificateNoDisabled = false;
1521 - }
1522 - },
1523 - // 关闭错误提示
1524 - errorTipClose() {
1525 - this.errorTip = [];
1526 - },
1527 - clearSlipId(){
1528 - this.slipId=null;
1529 - this.createInfo= {};
1530 - }
1531 - },
1532 -};
1533 -</script>
1534 -
1535 -<style lang="scss" scoped>
1536 -.step-two-warp {
1537 - .step-name {
1538 - font-size: 20px;
1539 - font-weight: 600px;
1540 - margin-bottom: 20px;
1541 - i {
1542 - font-size: 32px;
1543 - vertical-align: -5px;
1544 - color: #4d148c;
1545 - margin-right: 12px;
1546 - }
1547 - }
1548 - .content {
1549 - width: 80%;
1550 - min-width: 676px;
1551 - margin: 0 auto;
1552 - .titles {
1553 - font-size: 12px;
1554 - line-height: 24px;
1555 - font-weight: 400;
1556 - text-align: center;
1557 - margin-bottom: 16px;
1558 - .title1 {
1559 - font-size: 22px;
1560 - font-weight: 500;
1561 - line-height: 36px;
1562 - }
1563 - .title3 {
1564 - color: #011993;
1565 - }
1566 - .title4 {
1567 - color: #ff4a2a;
1568 - }
1569 - }
1570 - .small-title {
1571 - line-height: 36px;
1572 - font-weight: 500;
1573 - }
1574 - .fedexFormStyle {
1575 - .nolabel-select {
1576 - ::v-deep .el-input input {
1577 - padding-top: 0 !important;
1578 - }
1579 -
1580 - ::v-deep .el-input__inner{
1581 -
1582 - &::placeholder{
1583 - color:rgb(0, 0, 0);
1584 - // line-height: 24px;
1585 - // font-weight: 400;
1586 - // font-size: 10px;
1587 - }
1588 - }
1589 - ::v-deep input::-webkit-input-placeholder {
1590 - color: #fff;
1591 - }
1592 - }
1593 -
1594 -
1595 - }
1596 -
1597 - .check-type-box {
1598 - background: rgba(228, 128, 36, 0.1);
1599 - border: 1px solid #e48024;
1600 - padding: 12px;
1601 - margin-bottom: 14px;
1602 - .fedexFormStyle .el-form-item {
1603 - background: #fff;
1604 - margin-top: 4px;
1605 - }
1606 -
1607 - .type-form-box {
1608 - ::v-deep .el-form-item__label {
1609 - height: 24px;
1610 - line-height: 24px;
1611 - font-size: 14px;
1612 - font-weight: 500;
1613 - color: #000000;
1614 - }
1615 - ::v-deep .el-form-item__content {
1616 - line-height: 32px;
1617 - }
1618 - ::v-deep .el-form-item {
1619 - margin: 0;
1620 - }
1621 - }
1622 -
1623 - .check-auto {
1624 - .el-checkbox {
1625 - width: calc(100% / 4 - 30px);
1626 - }
1627 - }
1628 - .no-boder-input {
1629 - ::v-deep .el-input {
1630 - width: 150px;
1631 - }
1632 - ::v-deep .el-input__inner {
1633 - background-color: inherit;
1634 - border: none;
1635 - border-bottom: 1px solid #000;
1636 - height: 30px;
1637 - line-height: 30px;
1638 - }
1639 - }
1640 - .type-error {
1641 - ::v-deep .el-form-item__error {
1642 - top: -22px;
1643 - left: 147px;
1644 - }
1645 - }
1646 - .tax-error {
1647 - ::v-deep .el-form-item__error {
1648 - top: -22px;
1649 - left: 166px;
1650 - }
1651 - }
1652 - .checkbox-width50 {
1653 - line-height: 36px;
1654 - width: calc(100% / 2 - 30px);
1655 - }
1656 - .checkbox-9M {
1657 - margin-top:14px;
1658 - line-height: 36px;
1659 - // width: calc(100% / 2 - 30px);
1660 -
1661 - // ::v-deep .el-checkbox__label {
1662 - // width: calc(100% - 24px);
1663 - // }
1664 - ::v-deep .el-checkbox__input {
1665 - vertical-align: 70px;
1666 - }
1667 - }
1668 - .way-tip {
1669 - color: #999;
1670 - }
1671 - .height48 {
1672 - height: 48px;
1673 - ::v-deep .el-checkbox__label {
1674 - line-height: 24px;
1675 - }
1676 - ::v-deep .el-checkbox__input {
1677 - vertical-align: 16px;
1678 - }
1679 - }
1680 - .line-height48 {
1681 - margin-top: 13px;
1682 - ::v-deep .el-checkbox__label {
1683 - vertical-align: 22px;
1684 - }
1685 - ::v-deep .el-checkbox__input {
1686 - vertical-align: 69px;
1687 - }
1688 - }
1689 - .way-tip-bule {
1690 - // margin-top: 5px;
1691 - width: 100%;
1692 - height: 29px;
1693 - line-height: 29px;
1694 - background: #007ab71a;
1695 - color: #3478b2;
1696 - padding: 0 12px;
1697 - margin-bottom: 4px;
1698 - font-size: 12px;
1699 - }
1700 - }
1701 - .check-color {
1702 - ::v-deep .el-checkbox {
1703 - color: #000000;
1704 - font-size: 12px;
1705 - }
1706 - ::v-deep .el-checkbox__label {
1707 - font-size: 12px;
1708 - padding-left: 4px;
1709 - }
1710 - }
1711 - .trademark_color{
1712 - ::v-deep .el-checkbox {
1713 - color: #000000;
1714 - }
1715 - }
1716 - .bottom-box {
1717 - padding: 12px;
1718 - background: #e480241a;
1719 - .fedexFormStyle .el-form-item {
1720 - background: #fff;
1721 - margin-top: 8px;
1722 - }
1723 - .checkbox-width80 {
1724 - .el-checkbox {
1725 - line-height: 36px;
1726 - width: 80px;
1727 - }
1728 - }
1729 - .checkbox-width80-tip {
1730 - margin-left: 5px;
1731 - background: #f479201a;
1732 - padding: 7px 8px;
1733 - color: #f47920;
1734 - font-size: 12px;
1735 - }
1736 - .checkbox-lineheight80 {
1737 - .el-checkbox {
1738 - line-height: 60px;
1739 - height: 60px;
1740 - width: 80px;
1741 - }
1742 - }
1743 - .check-inline-block {
1744 - ::v-deep .el-checkbox-group {
1745 - display: inline-block;
1746 - }
1747 - }
1748 - }
1749 - }
1750 - .bg-textarea {
1751 - ::v-deep .el-textarea .el-input__count {
1752 - background: #f2f2f2;
1753 - }
1754 - }
1755 - ::v-deep .el-textarea__inner {
1756 - resize: none;
1757 - }
1758 - .el-tooltip__popper.is-dark {
1759 - top: -500px;
1760 - }
1761 -.textarea-box {
1762 - // margin-bottom: 5px;
1763 - ::v-deep .el-form-item .el-form-item__content {
1764 - position: static !important;
1765 - .el-textarea {
1766 - .el-textarea__inner {
1767 - padding-bottom: 1.7rem;
1768 - }
1769 - }
1770 - }
1771 - .label {
1772 - font-size: 0.75rem;
1773 - font-weight: 700;
1774 - background-color: #f2f2f2;
1775 - color: #444;
1776 - height: max-content;
1777 - // padding: 0.6rem 0 0 0.6rem;
1778 - line-height: 25px;
1779 - }
1780 -
1781 -
1782 -}
1783 - .tipText{
1784 - margin-top: 3px;
1785 - padding: 0 0.9375rem;
1786 - font-size: 0.75rem;
1787 - color: #de002e;
1788 -}
1789 -
1790 -}
1791 -</style>
1 -<template>
2 - <el-dialog
3 - :title="titleText"
4 - :visible.sync="dialogVisible"
5 - width="50%"
6 - :show-close="false"
7 - class="tem-dialog"
8 - :close-on-click-modal="false"
9 - >
10 - <div v-if="!dialogEditVisible">
11 - <div>
12 - <div class="entryInsertButton">
13 - <el-button
14 -
15 - @click.native.stop="insertTem()"
16 - >
17 - {{ $t("fillIn.insterTem") }}
18 - </el-button>
19 - </div>
20 - <div class="sreachBox">
21 - <el-input
22 - class="fedexRadiusInput search-width"
23 - v-model="templateName"
24 - placeholder="請輸入使用者名稱"
25 - @blur="templateName = $event.target.value.trim()"
26 -
27 - >
28 - <el-button
29 - slot="append"
30 - icon="el-icon-search"
31 - @click="searchTemList"
32 - ></el-button>
33 - </el-input>
34 - </div>
35 - <Table
36 - class="fedexDetialTable mt20"
37 - :data="tableData"
38 - :headerData="headerData"
39 - :selection="false"
40 - height="350px"
41 - :order="false"
42 - :border="false"
43 - :selectFixed="false"
44 - :pagination="false"
45 - :pageSizes="[20, 30, 50, 100]"
46 - :loading="tableLoading"
47 - :scroll="scroll"
48 - :infiniteScroll="true"
49 - >
50 -
51 - <!-- <template v-slot:edit="scope">
52 -
53 - </template> -->
54 - <template v-slot:del="scope">
55 - <el-button
56 - class="plain"
57 - size="mini"
58 - @click.native.stop="editTem(scope.row)"
59 - >編輯</el-button
60 - >
61 - <el-popover
62 - placement="bottom"
63 - width="160"
64 - v-model="scope.row.deleteVisible">
65 - <p>是否確認刪除？</p>
66 - <div style="text-align: right; margin: 0">
67 - <el-button size="mini" type="text" @click="scope.row.deleteVisible = false">取消</el-button>
68 - <el-button type="text" size="mini" @click="deleteTem(scope.row)">確定</el-button>
69 - </div>
70 - <el-button size="mini" slot="reference">刪除</el-button>
71 - </el-popover>
72 - <!-- <el-button size="mini" @click.native.stop="deleteTem(scope.row)"
73 - >刪除</el-button> -->
74 -
75 - </template>
76 - </Table>
77 - </div>
78 - <div class="dialogOption entrySave">
79 - <!-- <el-button
80 - class="entrySaveButton entrySaveButton-background"
81 - :disabled="useDisabled"
82 - @click="useTemplate"
83 - >
84 - {{ $t("common.useBtn") }}
85 - </el-button> -->
86 - <el-button class="entrySaveButton" style="margin-top: 20px;" @click="closeDialog">
87 - {{ $t("common.closeBtn") }}
88 - </el-button>
89 - </div>
90 - </div>
91 -
92 -
93 -<!-- 新增 、修改 -->
94 - <div v-if="dialogEditVisible">
95 - <el-form
96 - class="fedexFormStyle"
97 - ref="formDialogDataRef"
98 - :model="formData"
99 - :rules="rules"
100 - label-position="top"
101 - >
102 - <el-row :gutter="10">
103 - <el-col :span="12">
104 - <Formitem :label="$t('fillIn.placeholder')" type="edit" prop="templateName">
105 - <el-input
106 - type="text"
107 - :id="'inputInner-edit-templateName'"
108 - v-model="formData.templateName"
109 - :disabled="saveBtnText == '更新'"
110 - maxlength="20"
111 - >
112 - </el-input>
113 - </Formitem>
114 - </el-col>
115 - <el-col :span="12">
116 - <Formitem :label="$t('fillIn.contacts')" type="edit" prop="liaisons">
117 - <el-input
118 - type="text"
119 - :id="'inputInner-edit-liaisons'"
120 - maxlength="18"
121 - v-model="formData.liaisons"
122 - >
123 - </el-input>
124 - </Formitem>
125 - </el-col>
126 - </el-row>
127 - <el-row :gutter="10">
128 - <el-col :span="12">
129 - <Formitem
130 - :label="$t('fillIn.exporterNum')"
131 - type="edit"
132 - prop="consigneeNo"
133 - >
134 - <el-input
135 - type="text"
136 - :id="'inputInner-edit-consigneeNo'"
137 - maxlength="12"
138 - oninput="this.value = this.value.replace(/\s+/g, '')"
139 - v-model="formData.consigneeNo"
140 - >
141 - </el-input>
142 - </Formitem>
143 - </el-col>
144 - <el-col :span="12">
145 - <Formitem :label="$t('fillIn.email')" type="edit" prop="email">
146 - <el-input
147 - type="text"
148 - :id="'inputInner-edit-email'"
149 - v-model="formData.email"
150 - maxlength="50"
151 - >
152 - </el-input>
153 - </Formitem>
154 - </el-col>
155 - </el-row>
156 - <el-row :gutter="10">
157 - <el-col :span="8">
158 - <Formitem :label="$t('fillIn.phone1')" type="edit" prop="tel">
159 - <el-input
160 - type="text"
161 - :id="'inputInner-edit-tel'"
162 - maxlength="19"
163 - v-model="formData.tel"
164 - >
165 - </el-input>
166 - </Formitem>
167 - </el-col>
168 - <el-col :span="8">
169 - <Formitem
170 - :label="$t('fillIn.phone2')"
171 - type="edit"
172 - prop="extensionTel"
173 - >
174 - <el-input
175 - type="text"
176 - :id="'inputInner-edit-extensionTel'"
177 - maxlength="10"
178 - v-model="formData.extensionTel"
179 - >
180 - </el-input>
181 - </Formitem>
182 - </el-col>
183 - <el-col :span="8">
184 - <Formitem :label="$t('fillIn.phone3')" type="edit" prop="phone">
185 - <el-input
186 - type="text"
187 - :id="'inputInner-edit-phone'"
188 - maxlength="34"
189 - v-model="formData.phone"
190 - >
191 - </el-input>
192 - </Formitem>
193 - </el-col>
194 - </el-row>
195 - <el-row>
196 - <el-col :span="24">
197 - <div class="textarea-box">
198 - <el-form-item
199 - :label="$t('fillIn.indicate')"
200 - prop="customsClearanceInstruction"
201 - class="label"
202 - >
203 - <el-input
204 - type="textarea"
205 - :rows="6"
206 - v-model="formData.customsClearanceInstruction"
207 - show-word-limit
208 - maxlength="1200"
209 - >
210 - </el-input>
211 - </el-form-item>
212 - </div>
213 - </el-col>
214 - </el-row>
215 - </el-form>
216 - <div align="center" style="margin-top: 40px;">
217 - <div class="dialogOption entrySave">
218 - <el-button
219 - class="entrySaveButton entrySaveButton-background"
220 - @click="checkTempName"
221 - :loading="updateLoading"
222 - >
223 - {{ saveBtnText }}
224 - </el-button>
225 - <el-button class="entrySaveButton" @click="closeEditDialog">
226 - {{ $t("common.cancleBtn") }}
227 - </el-button>
228 - </div>
229 - </div>
230 -
231 - </div>
232 -
233 - </el-dialog>
234 -</template>
235 -
236 -<script>
237 -import { deleteTemById, findTempListByName, getTemById , updateTemplate, getTemByTemName, addSaveTemplate } from "@/api/fillForm.js";
238 -export default {
239 - components: {},
240 - props: {},
241 - data() {
242 - return {
243 - dialogVisible: false,
244 - dialogEditVisible:false,
245 - tableLoading:false,
246 - titleText:"管理使用者",
247 - tableData: [],
248 - headerData: [
249 - // {
250 - // name: "",
251 - // value: "checked",
252 - // width: "60",
253 - // align: "center",
254 - // slot: true,
255 - // },
256 - {
257 - name: "使用者名稱",
258 - value: "templateName",
259 - width: "",
260 - align: "left",
261 - },
262 -
263 - {
264 - name: "操作",
265 - value: "del",
266 - width: "200",
267 - align: "center",
268 - slot: true,
269 - },
270 - ],
271 - currentRow: {},
272 - templateName: "",
273 - useDisabled: true,
274 -
275 - updateLoading: false,
276 - tempId: null,
277 - saveBtnText: "保存",
278 - formData: {
279 - templateName: "",
280 - liaisons: "",
281 - consigneeNo: "",
282 - email: "",
283 - tel: "",
284 - extensionTel: "",
285 - phone: "",
286 - customsClearanceInstruction: "",
287 - },
288 - currentPage:1,
289 - };
290 - }, computed: {
291 - rules() {
292 - let rules = {
293 - liaisons: [
294 - { required: true, message: "請您輸入聯絡人", trigger: "blur" },
295 - {
296 - validator: (rule, value, callback) => {
297 - // var a= this.regExp.checkText(this.regExp.nameExp,value);
298 - if (!this.regExp.nameExp.test(value)) {
299 - callback(
300 - "請您使用中文、英文或空格的組合，不能包含特殊字元。"
301 - );
302 - } else if (value.length > 30) {
303 - callback(
304 - "聯絡人姓名最多可包含30個字元，而您輸入了" +
305 - value.length +
306 - "個字元。"
307 - );
308 - } else {
309 - callback();
310 - }
311 - },
312 - trigger: "blur",
313 - },
314 - ], templateName: [
315 -
316 - { required: true, message: "請您輸入使用者名稱", trigger: "blur", },
317 - {
318 - validator: (rule, value, callback) => {
319 - if (value && !this.regExp.templateName.test(value)) {
320 - callback("請您使用中文、數字、英文、下劃線或中橫線的組合。");
321 - } else {
322 - callback();
323 - }
324 - },
325 - trigger: "blur",
326 - },
327 - ],
328 - consigneeNo: [
329 - {
330 - required: true,
331 - message: "請您輸入貨物輸出統一編號",
332 - trigger: "blur",
333 - },
334 - {
335 - validator: (rule, value, callback) => {
336 - if (!this.regExp.expNumENExp.test(value)) {
337 - callback("請您輸入統一編號，中間不要有空格。");
338 - } else {
339 - callback();
340 - }
341 - },
342 - trigger: "blur",
343 - },
344 - ],
345 - email: [
346 - { required: true, message: "請您輸入郵箱", trigger: "blur" },
347 - {
348 - validator: (rule, value, callback) => {
349 - if (!this.regExp.email.test(value.trim())) {
350 - callback("您輸入的郵件格式有錯誤。");
351 - } else if (this.regExp.emailPattern.test(value.trim())) {
352 - callback("郵箱地址不允許存在特殊字符以及空格！");
353 - } else {
354 - this.formData.email=this.formData.email.trim();
355 - callback();
356 - }
357 - },
358 - trigger: "blur",
359 - },
360 - ],
361 - tel: [
362 - { required: true, message: "請您輸入聯絡電話", trigger: "blur" },
363 - {
364 - validator: (rule, value, callback) => {
365 - if (!this.regExp.phoneNumExp.test(value)) {
366 - callback("請您輸入有效的聯絡電話，不能包含字母和漢字。");
367 - // } else if (value.length > 40) {
368 - // callback(
369 - // "聯絡電話最多可包含40個字元，而您輸入了" +
370 - // value.length +
371 - // "個字元。"
372 - // );
373 - }
374 - else {
375 - callback();
376 - }
377 - },
378 - trigger: "blur",
379 - },
380 - ],
381 - extensionTel: [
382 - {
383 - required: false,
384 - validator: (rule, value, callback) => {
385 - if (value) {
386 - if (!this.regExp.phoneNumExp.test(value)) {
387 - callback("請您輸入有效的分機號碼，不能包含字母和漢字。");
388 - }
389 - // else if (value.length > 10) {
390 - // callback(
391 - // "分機最多可包含10個字元，而您輸入了" +
392 - // value.length +
393 - // "個字元。"
394 - // );
395 - // }
396 - else {
397 - callback();
398 - }
399 - } else {
400 - callback();
401 - }
402 - },
403 - trigger: "blur",
404 - },
405 - ],
406 - phone: [
407 - {
408 - validator: (rule, value, callback) => {
409 - if (value) {
410 - if (!this.regExp.phoneNumExp.test(value)) {
411 - callback("請您輸入有效的行動電話，不能包含字母和漢字。");
412 - }
413 - // else if (value.length > 40) {
414 - // callback(
415 - // "xxx" +
416 - // value.length +
417 - // "個字元。"
418 - // );
419 - // }
420 - else {
421 - callback();
422 - }
423 - } else {
424 - callback();
425 - }
426 - },
427 - trigger: "blur",
428 - },
429 - ],
430 - };
431 - this.$forceUpdate(() => {
432 - this.$refs["formDialogDataRef"].clearValidate();
433 - });
434 - return rules;
435 - },
436 - },
437 - watch:{
438 - dialogEditVisible(val){
439 - if(val){
440 - if(this.tempId){
441 - this.titleText=this.$t("fillIn.updateTem");
442 - }else{
443 - this.titleText = this.$t("fillIn.insterTem");
444 - }
445 - }else{
446 - this.titleText = this.$t("fillIn.manageTem");
447 - }
448 - }
449 - },
450 - methods: {
451 - openDialog() {
452 - this.initData()
453 - this.dialogVisible = true;
454 - this.findCurTemList();
455 - },
456 - closeDialog() {
457 - this.$parent.getTempListByName();
458 - this.dialogVisible = false;
459 - this.templateName=null;
460 - this.dialogEditVisible=false;
461 - },
462 - closeEditDialog(){
463 - this.tempId=null;
464 - this.dialogEditVisible=false;
465 - },
466 - editTem(row) {
467 - this.getTempInfo(row, "editTem");
468 - }, insertTem() {
469 - this.getTempInfo(null, "insertTem");
470 - },
471 - scroll(e) {
472 - const {target} = e
473 - const {scrollHeight, scrollTop, scrollLeft, clientHeight} = target
474 - const tobody = document.querySelector('.el-table .el-table__body-wrapper .el-table__body')
475 - if (scrollTop > 0 && scrollTop + clientHeight + 1 >= tobody.clientHeight) {
476 - this.currentPage = this.currentPage + 1
477 - this.findCurTemList()
478 - }
479 - },
480 - findCurTemList() {
481 - this.tableLoading=true;
482 - let data = { page: this.currentPage, size: 10, templateName: this.templateName }
483 - findTempListByName(data)
484 - .then((res) => {
485 - if (res.code == 200) {
486 - for (let index in res.data) {
487 - res.data[index].checked = false;
488 - }
489 - if (res.data.length != 0) {
490 - this.tableData = this.tableData.concat(res.data);
491 - }
492 - if(this.tableData!=null){
493 - this.tableData = this.tableData.map(item => {
494 - return {
495 - ...item,
496 - deleteVisible: false
497 - };
498 - });
499 - }
500 - this.tableLoading = false;
501 - } else {
502 - this.msgWarning(res.msg);
503 - }
504 - })
505 - .catch(() => {});
506 - },
507 - deleteTem(row) {
508 - row.deleteVisible = false;
509 - deleteTemById(row.id)
510 - .then((res) => {
511 - if (res.code == 200) {
512 - this.$message.success("刪除成功");
513 - this.initData()
514 - this.findCurTemList();
515 - } else {
516 - this.msgWarning(res.msg);
517 - }
518 - })
519 - .catch(() => {});
520 - },
521 - getTempInfo(row, type) {
522 - if(type=="editTem" || type == "useTem"){
523 - getTemById(row.id)
524 - .then((res) => {
525 - if (res.code == 200) {
526 - // if (type == "useTem") {
527 - // this.$emit("useTemp", res.data, "dialog");
528 - // this.dialogVisible = false;
529 - // } else {
530 - this.dialogEditVisible=true;
531 - this.editFillBackInfo(res.data);
532 - this.tempId=res.data.id;
533 - // this.$emit("editTemBtn", res.data);
534 - // }
535 - } else {
536 - this.msgWarning(res.msg);
537 - }
538 - })
539 - .catch(() => { });
540 - }else{
541 - this.tempId = null;
542 - this.formData = {};
543 - this.saveBtnText = "保存";
544 - this.dialogEditVisible = true;
545 - // this.$emit("editTemBtn", null);
546 - }
547 -
548 - },
549 - // 改选行
550 - changeCurrentRow(val, rowIndex, row) {
551 - const data = this.tableData;
552 - //遍历表格的数据，将非本行的所有数据的checked属性置为false，即取消选择
553 - for (let index in data) {
554 - if (index == rowIndex) {
555 - data[index].checked = val;
556 - } else {
557 - data[index].checked = false;
558 - }
559 - }
560 - this.tableData = data;
561 - this.currentRow = row;
562 - if (row.checked) {
563 - this.useDisabled = false;
564 - } else {
565 - this.useDisabled = true;
566 - }
567 - },
568 - searchTemList() {
569 - this.initData();
570 - this.findCurTemList();
571 - },
572 - useTemplate() {
573 - this.getTempInfo(this.currentRow, "useTem");
574 - },
575 -
576 - //修改新增
577 -
578 - editFillBackInfo(data) {
579 - if (data) {
580 - this.saveBtnText = "更新";
581 - this.formData = {
582 - liaisons: data.liaisons,
583 - consigneeNo: data.consigneeNo,
584 - email: data.email,
585 - tel: data.tel,
586 - extensionTel: data.extensionTel,
587 - phone: data.phone,
588 - customsClearanceInstruction: data.customsClearanceInstruction,
589 - templateName: data.templateName,
590 - };
591 - } else {
592 - this.tempId=null;
593 - this.formData = {};
594 - this.saveBtnText = "保存";
595 - }
596 -
597 - },// 检查模板是否重复
598 - checkTempName() {
599 - this.$refs.formDialogDataRef.validate((valid) => {
600 - if (valid) {
601 - getTemByTemName(this.formData.templateName)
602 - .then((res) => {
603 - if (res.code == 200) {
604 - this.addTemplate();
605 - this.tempId = null;
606 - this.formData = {};
607 - } else {
608 - if (this.saveBtnText == '保存') {
609 - this.$confirm(this.$t("fillIn.template.confirmCoverTemplate"), "提示", {
610 - confirmButtonText: this.$t("common.sureBtn"),
611 - cancelButtonText: this.$t("common.cancleBtn"),
612 - type: "warning",
613 - }).then(() => {
614 - this.tempId = res.data.id;
615 - this.updateTemp(this.formData);
616 - this.tempId = null;
617 - this.formData = {};
618 - this.dialogEditVisible = false;
619 - });
620 - } else {
621 - this.tempId = res.data.id;
622 - this.updateTemp(this.formData);
623 - this.dialogEditVisible = false;
624 - }
625 -
626 - }
627 -
628 - })
629 - .catch((res) => {
630 - this.$message.error(res);
631 - });
632 - }
633 - });
634 -
635 - },
636 - updateTemp() {
637 - let paramsData = {
638 - ...this.formData,
639 - id: this.tempId,
640 - };
641 - this.$refs.formDialogDataRef.validate((valid) => {
642 - if (valid) {
643 - this.updateLoading = true;
644 - updateTemplate(paramsData)
645 - .then((res) => {
646 - if (res.code == 200) {
647 - this.initData()
648 - this.findCurTemList();
649 - this.$message.success("保存成功");
650 - // this.$emit("updateSearch");
651 - } else {
652 - this.msgWarning(res.msg);
653 - }
654 - this.updateLoading = false;
655 - })
656 - .catch(() => {
657 - this.updateLoading = false;
658 - });
659 - }
660 - });
661 - },// 新增模板
662 - addTemplate() {
663 - let paramsData = {
664 - ...this.formData,
665 - };
666 - addSaveTemplate(paramsData)
667 - .then((res) => {
668 - if (res.code == 200) {
669 - this.initData()
670 - this.findCurTemList();
671 - this.$message.success("保存成功");
672 - } else {
673 - this.msgWarning(res.msg);
674 - }
675 - this.dialogEditVisible = false;
676 - })
677 - .catch(() => {
678 - this.dialogEditVisible = false;
679 - });
680 - },
681 - initData() {
682 - this.currentPage = 1
683 - this.tableData = []
684 - }
685 - },
686 -};
687 -</script>
688 -
689 -<style lang="scss" scoped>
690 -.plain {
691 - border-radius: 0;
692 - border-color: #dfe6ec;
693 - color: #515a6e;
694 - margin-right: 15px;
695 -}
696 -.plain:hover {
697 - background: #007ab7;
698 - color: #fff;
699 -}
700 -::v-deep .el-dialog {
701 - padding: 20px 50px;
702 -}
703 -::v-deep .el-dialog__header {
704 - text-align: center;
705 -}
706 -.sreachBox {
707 - text-align: center;
708 - .search-width {
709 - width: 60%;
710 - }
711 -}
712 -::v-deep .el-table__body-wrapper .el-table__body tbody tr {
713 - height: 50px;
714 -}
715 -::v-deep .el-table th > .cell .el-checkbox {
716 - display: none;
717 - background: none;
718 -}
719 -::v-deep .el-table .el-table__fixed-header-wrapper th {
720 - background: none;
721 -}
722 -.entrySaveButton-background {
723 - margin-right: 44px;
724 -}
725 -.entryInsertButton {
726 - margin: -25px 0 20px 0;
727 - text-align: center;
728 -}
729 -.textarea-box {
730 - // margin-bottom: 5px;
731 - ::v-deep .el-form-item .el-form-item__content {
732 - position: static !important;
733 - }
734 - .label {
735 - font-size: 0.75rem;
736 - font-weight: 700;
737 - background-color: #f2f2f2;
738 - color: #444;
739 - height: max-content;
740 - // height: 9.7rem;
741 - // padding: 0.6rem 0 0 0.6rem;
742 - // padding: 10px;
743 - line-height: 25px;
744 -
745 - }
746 - ::v-deep .el-textarea .el-textarea__inner{
747 - padding: 20px;
748 - margin: 10px 0;
749 - }
750 - }
751 -</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
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="text"
17 - id="inputInner--deliveryNo"
18 - v-model="sreachFormData.deliveryNo"
19 - clearable
20 - >
21 - </el-input> -->
22 - <el-input
23 - type="textarea"
24 - class="inputShadow"
25 - id="inputInner--deliveryNo"
26 - resize="none"
27 - :rows="consignmentCodeRows"
28 - v-model="sreachFormData.deliveryNo"
29 - clearable
30 - placeholder=""
31 - @focus="consignmentCodeFocus"
32 - @blur="consignmentCodeBlur"
33 - ></el-input>
34 - <el-badge
35 - v-if="
36 - consignmentCodeRows == 1 &&
37 - sreachFormData.consignmentCode.length > 1
38 - "
39 - type="info"
40 - :value="`+${sreachFormData.consignmentCode.length}`"
41 - class="item texttareaTip"
42 - ></el-badge>
43 - </Formitem>
44 - </el-col>
45 - <el-col :span="4">
46 - <Formitem label="提交時間(從)" prop="commitTimeFrom">
47 - <el-date-picker
48 - v-model="sreachFormData.commitTimeFrom"
49 - format="yyyy-MM-dd"
50 - value-format="yyyy-MM-dd"
51 - type="date"
52 - id="inputInner--commitTimeFrom"
53 - placeholder=""
54 - prefix-icon="none"
55 - @change="checkDate1"
56 - ></el-date-picker>
57 - <!-- :picker-options="startPickerOptions"> -->
58 - <!-- </el-date-picker> -->
59 - </Formitem>
60 - </el-col>
61 - <el-col :span="4">
62 - <Formitem label="提交時間(至)" prop="commitTimeTo">
63 - <el-date-picker
64 - v-model="sreachFormData.commitTimeTo"
65 - format="yyyy-MM-dd"
66 - value-format="yyyy-MM-dd"
67 - type="date"
68 - id="inputInner--commitTimeTo"
69 - placeholder=""
70 - prefix-icon="none"
71 - @change="checkDate2"
72 - ></el-date-picker>
73 - <!-- :picker-options="endPickerOptions">
74 - </el-date-picker> -->
75 - </Formitem>
76 - </el-col>
77 - <el-col :span="2" class="search-btn">
78 - <el-button @click="searchTable">
79 - <img src="../../assets/images/select.svg" alt="" />
80 - </el-button>
81 - </el-col>
82 - </el-row>
83 - </el-form>
84 - <span class="textCenter export-btn">
85 - <el-button
86 - class="entrySaveButton"
87 - :loading="exportLoading"
88 - @click="exportBtn()"
89 - >
90 - 導出
91 - </el-button>
92 - </span>
93 - </div>
94 - <el-table
95 - :data="tableData"
96 - style="width: 100%"
97 - :height="tableMaxheight"
98 - :row-class-name="tableRowClassName"
99 - v-loading="tableLoading"
100 - class="queryTable"
101 - @sort-change="handleSortChange"
102 - >
103 - <el-table-column
104 - v-for="(item, index) in tableHeaderList"
105 - :key="index"
106 - :prop="item.prop"
107 - :label="item.label"
108 - :min-width="item.width"
109 - :fixed="item.fixed ? item.fixed : false"
110 - :align="item.align"
111 - :sortable="item.sort"
112 - >
113 - <template slot-scope="scope">
114 - <template v-if="item.tem == 'operStatusAndTime1'">
115 - <div>
116 - {{ scope.row.operStatus }}
117 - </div>
118 - <div>
119 - {{ scope.row.commitTime }}
120 - </div>
121 - </template>
122 - <!-- 传送时间 -->
123 - <template v-else-if="item.tem == 'delStatus'">
124 - <div class="query_page_popover">
125 - <el-popover
126 - v-if="scope.row.failedMsg"
127 - trigger="hover"
128 - placement="bottom"
129 - :open-delay="1000"
130 - >
131 - <p>{{ scope.row.failedMsg }}</p>
132 - <div slot="reference" class="name-wrapper">
133 - {{ scope.row.delStatusAndTime }}
134 - </div>
135 - </el-popover>
136 - <span v-else>{{ scope.row.delStatusAndTime }}</span>
137 - </div>
138 - </template>
139 - <!-- 是否適用在目的地進口清關 -->
140 - <template v-else-if="item.tem == 'isClear'">
141 - <span v-if="scope.row.isClear == 0"> N </span>
142 - <span v-else-if="scope.row.isClear == 1">Y</span>
143 - </template>
144 - <!-- 操作 -->
145 - <template v-else-if="item.tem == 'opt'">
146 - <el-dropdown trigger="click">
147 - <span style="cursor: pointer">
148 - <img src="../../assets/images/declareOpt.png" alt="" />
149 - </span>
150 - <el-dropdown-menu slot="dropdown">
151 - <el-dropdown-item @click.native="viewDeclare(scope.row)">
152 - 查看
153 - </el-dropdown-item>
154 - <el-dropdown-item
155 - v-if="scope.row.operStatus == '已提交'"
156 - @click.native="reEditDeclare(scope.row)"
157 - >
158 - 重新编辑
159 - </el-dropdown-item>
160 -
161 - <el-dropdown-item v-else @click.native="editDeclare(scope.row)">
162 - 編輯
163 - </el-dropdown-item>
164 -
165 - <el-dropdown-item
166 - :disabled="scope.row.operStatus == '已提交'"
167 - @click.native="deleteDeclare(scope.row)"
168 - >
169 - 刪除
170 - </el-dropdown-item>
171 - <el-dropdown-item @click.native="downloadFiles(scope.row)"
172 - >下載附件</el-dropdown-item
173 - >
174 - </el-dropdown-menu>
175 - </el-dropdown>
176 - </template>
177 - <span v-else>{{ scope.row[item.prop] }}</span>
178 - </template>
179 - </el-table-column>
180 - </el-table>
181 - <el-pagination
182 - @size-change="handleSizeChange"
183 - @current-change="handleCurrentChange"
184 - :current-page="page.curPage"
185 - :page-sizes="[20, 30, 50, 100]"
186 - :page-size="page.pageSize"
187 - layout="total, sizes, prev, pager, next, jumper"
188 - :total="page.total"
189 - >
190 - </el-pagination>
191 - <detail-dialog ref="detailDialogRef"></detail-dialog>
192 - <detail-drawer
193 - ref="detailDrawerRef"
194 - :pageIndex="pageIndex"
195 - @viewPdf="openViewPdf"
196 - ></detail-drawer>
197 - </div>
198 -</template>
199 -
200 -<script>
201 -import {
202 - getTableFindAll,
203 - declareDeleteById,
204 - reedit,
205 -} from "@/api/declareTable.js";
206 -import detailDrawer from "../declarationInput/detailDrawer.vue";
207 -import detailDialog from "./detailDialog.vue";
208 -import { tableHeaderKeys } from "./tableHeaderKey.js";
209 -import { downLoadXlsx, downLoadViewPdf } from "@/utils/zipdownload";
210 -export default {
211 - name: "declareQuery",
212 - components: {
213 - detailDialog,
214 - detailDrawer,
215 - },
216 -
217 - data() {
218 - return {
219 - pageIndex: "query",
220 - tableData: [], //运单数据
221 - tableHeaderList: tableHeaderKeys,
222 -
223 - sreachFormData: {
224 - deliveryNo: "",
225 - commitTimeFrom: "",
226 - commitTimeTo: "",
227 - consignmentCode: [],
228 - },
229 - oldSreachFormData: {
230 - deliveryNo: "",
231 - commitTimeFrom: "",
232 - commitTimeTo: "",
233 - consignmentCode: [],
234 - },
235 - startDate: new Date() - 3,
236 - endDate: new Date(),
237 - page: {
238 - curPage: 1,
239 - pageSize: 20,
240 - total: 0, //数据总和
241 - },
242 - tableSelect: true,
243 - tableLoading: false, //表格loading
244 - exportLoading: false,
245 - defQuery: 0,
246 - consignmentCodeRows: 1,
247 - startPickerOptions: {
248 - disabledDate: (time) => {
249 - if (
250 - this.sreachFormData.commitTimeTo != "" &&
251 - this.sreachFormData.commitTimeTo != null
252 - ) {
253 - let commitTimeTo = new Date(
254 - this.sreachFormData.commitTimeTo
255 - ).getTime();
256 - return time.getTime() > commitTimeTo;
257 - } else {
258 - return !time.getTime();
259 - }
260 - },
261 - },
262 - endPickerOptions: {
263 - disabledDate: (time) => {
264 - if (
265 - this.sreachFormData.commitTimeFrom != "" &&
266 - this.sreachFormData.commitTimeFrom != null
267 - ) {
268 - let commitTimeFrom = new Date(
269 - this.sreachFormData.commitTimeFrom
270 - ).getTime();
271 - return time.getTime() < commitTimeFrom - 24 * 60 * 60 * 1000;
272 - } else {
273 - return !time.getTime();
274 - }
275 - },
276 - },
277 - sortOrder: 0, //查询排序 默认根据操作状态呢降序排序
278 - };
279 - },
280 - computed: {
281 - tableMaxheight() {
282 - return window.innerHeight - 300;
283 - },
284 - getOldDate() {
285 - let oldDate = new Date(new Date().getTime() - 3600 * 1000 * 24 * 2);
286 - return (
287 - oldDate.getFullYear() +
288 - "-" +
289 - (oldDate.getMonth() + 1).toString().padStart(2, 0) +
290 - "-" +
291 - oldDate.getDate().toString().padStart(2, 0)
292 - );
293 - },
294 - getNewDate() {
295 - let nowDate = new Date();
296 - return (
297 - nowDate.getFullYear() +
298 - "-" +
299 - (nowDate.getMonth() + 1).toString().padStart(2, 0) +
300 - "-" +
301 - nowDate.getDate().toString().padStart(2, 0)
302 - );
303 - },
304 - rules() {
305 - let rules = {
306 - commitTimeFrom: [
307 - {
308 - validator: (rule, value, callback) => {
309 - if (!value) {
310 - this.$refs.sreachForm.clearValidate(["commitTimeTo"]);
311 - this.tableSelect = true;
312 - }
313 - // new Date(year, month, day, hour, minute, second, millisecond);
314 - if (value && this.sreachFormData.commitTimeTo) {
315 - if (
316 - new Date(value + " 00:00:00").getTime() >
317 - new Date(
318 - this.sreachFormData.commitTimeTo + " 00:00:00"
319 - ).getTime()
320 - ) {
321 - callback("開始時間不能晚於截止時間");
322 - this.tableSelect = false;
323 - } else {
324 - callback();
325 - this.tableSelect = true;
326 - }
327 - }
328 - },
329 - trigger: "change",
330 - },
331 - ],
332 - commitTimeTo: [
333 - {
334 - validator: (rule, value, callback) => {
335 - if (!value) {
336 - this.$refs.sreachForm.clearValidate(["commitTimeFrom"]);
337 - this.tableSelect = true;
338 - }
339 -
340 - if (value && this.sreachFormData.commitTimeFrom) {
341 - if (
342 - new Date(value + " 00:00:00").getTime() <
343 - new Date(
344 - this.sreachFormData.commitTimeFrom + " 00:00:00"
345 - ).getTime()
346 - ) {
347 - callback("截止時間不能早於開始時間");
348 - this.tableSelect = false;
349 - } else {
350 - callback();
351 - this.tableSelect = true;
352 - }
353 - }
354 - },
355 - trigger: "change",
356 - },
357 - ],
358 - };
359 - return rules;
360 - },
361 - },
362 - created() {},
363 - mounted() {
364 - // let oldDate = new Date(new Date().getTime() - 3600 * 1000 * 24 * 2);
365 - // let nowDate = new Date();
366 - this.sreachFormData.commitTimeFrom = this.getOldDate;
367 - this.sreachFormData.commitTimeTo = this.getNewDate;
368 - // this.$set(this.sreachFormData,'commitTimeFrom', );
369 - // this.$set(this.sreachFormData,'commitTimeTo', nowDate.getFullYear() + '-' + (nowDate.getMonth()+1) + '-' + (nowDate.getDate()));
370 - this.sreachData(null);
371 - },
372 - methods: {
373 - // 查询
374 - sreachData(paramsData) {
375 - // this.$refs["sreachForm"].validate((valid, object) => {
376 - if (this.tableSelect) {
377 - if (!paramsData) {
378 - paramsData = {
379 - ...this.sreachFormData,
380 - deliveryNo: this.sreachFormData.consignmentCode.join(";"),
381 - page: this.page.curPage,
382 - query: this.defQuery,
383 - size: this.page.pageSize,
384 - sort: this.sortOrder,
385 - };
386 - this.oldSreachFormData = {
387 - ...this.sreachFormData,
388 - };
389 - }
390 -
391 - if (paramsData.deliveryNo.split(";").length > 1000) {
392 - this.$alert("單次最多可查詢1000個提單號碼", "提示", {
393 - confirmButtonText: "確定",
394 - type: "warning",
395 - });
396 - return;
397 - } else {
398 - this.tableLoading = true;
399 - delete paramsData.consignmentCode;
400 - getTableFindAll(paramsData)
401 - .then((res) => {
402 - if (res.code == 200) {
403 - this.tableData = res.data.list;
404 - this.page.total = res.data.total;
405 - } else {
406 - this.msgWarning(res.msg);
407 - }
408 - })
409 - .finally(() => {
410 - this.tableLoading = false;
411 - });
412 - }
413 - }
414 - // });
415 - },
416 - checkDate1() {
417 - this.$refs.sreachForm.validateField("commitTimeFrom", (valid) => {
418 - if (!valid) {
419 - this.$refs.sreachForm.validateField("commitTimeTo");
420 - }
421 - });
422 - },
423 - checkDate2() {
424 - this.$refs.sreachForm.validateField("commitTimeTo", (valid) => {
425 - if (!valid) {
426 - this.$refs.sreachForm.validateField("commitTimeFrom");
427 - }
428 - });
429 - },
430 - // column 当前列数据 prop 当前排序的字段 order 排序规则
431 - handleSortChange({ column, prop, order }) {
432 - if (prop == "operStatusAndTime1") {
433 - this.sortOrder = order ? (order == "descending" ? 2 : 1) : 0;
434 - } else if (prop == "delStatus") {
435 - this.sortOrder = order ? (order == "descending" ? 4 : 3) : 0;
436 - }
437 - this.page.curPage = 1;
438 - let paramsData = {
439 - ...this.oldSreachFormData,
440 - page: this.page.curPage,
441 - query: this.defQuery,
442 - size: this.page.pageSize,
443 - sort: this.sortOrder,
444 - };
445 -
446 - this.sreachData(paramsData);
447 - },
448 - // 查询按钮
449 - searchTable() {
450 - this.page.curPage = 1;
451 - this.defQuery = "";
452 - this.sreachData(null);
453 - },
454 - // 改变偶数行背景色
455 - tableRowClassName({ row, rowIndex }) {
456 - if ((rowIndex + 1) % 2 === 0) {
457 - return "bgc-row";
458 - }
459 - return "";
460 - },
461 - //操作
462 - deleteDeclare(row) {
463 - this.$confirm("是否確認刪除", "提示", {
464 - confirmButtonText: "確定",
465 - cancelButtonText: "取消",
466 - type: "warning",
467 - })
468 - .then(() => {
469 - declareDeleteById(row.id).then((res) => {
470 - if (res.code == 200) {
471 - this.$message({
472 - type: "success",
473 - message: "刪除成功!",
474 - });
475 - this.sreachData(null);
476 - } else {
477 - this.msgWarning(res.msg);
478 - }
479 - });
480 - })
481 - .catch(() => {
482 - // this.$message({
483 - // type: 'info',
484 - // message: '刪除失敗'
485 - // });
486 - });
487 - },
488 - // 改变页面条数
489 - handleSizeChange(val) {
490 - this.page.pageSize = val;
491 - this.sreachData(null);
492 - },
493 - // 切换页码
494 - handleCurrentChange(val) {
495 - this.page.curPage = val;
496 - this.sreachData(null);
497 - },
498 - // 导出
499 - exportBtn() {
500 - let paramsData = {
501 - ...this.oldSreachFormData,
502 - query: this.defQuery,
503 - sort: this.sortOrder,
504 - };
505 - this.exportLoading = true;
506 - downLoadXlsx("/icleartw/declare/export", paramsData, "提單表")
507 - .then(() => {
508 - this.$message.success("導出成功");
509 - this.exportLoading = false;
510 - })
511 - .catch(() => {
512 - this.exportLoading = false;
513 - });
514 - },
515 - // 查看
516 - viewDeclare(row) {
517 - this.$refs.detailDrawerRef.openDrawer(row, "table");
518 - },
519 - // 下载附件
520 - downloadFiles(row) {
521 - this.$refs.detailDialogRef.openDialog(row);
522 - },
523 - // 编辑
524 - editDeclare(row) {
525 - this.$router
526 - .push({
527 - name: "declarationInput",
528 - params: {
529 - step: JSON.stringify(row.saveStep),
530 - id: JSON.stringify(row.id),
531 - },
532 - })
533 - .catch(() => {});
534 - },
535 - //重新编辑
536 - reEditDeclare(row) {
537 - this.$store.dispatch("AppLoading", true);
538 - reedit(row.id)
539 - .then((res) => {
540 - if ((res.code = 200)) {
541 - this.$router
542 - .push({
543 - name: "declarationInput",
544 - params: {
545 - step: 1,
546 - id: JSON.stringify(res.data.id),
547 - },
548 - })
549 - .catch(() => {});
550 - } else {
551 - $message.error(res.msg);
552 - }
553 - })
554 - .catch(() => {})
555 - .finally(() => {
556 - this.$store.dispatch("AppLoading", false);
557 - });
558 - },
559 - //文本域切换
560 - consignmentCodeFocus() {
561 - this.consignmentCodeRows = 5;
562 - this.$nextTick(() => {
563 - let inputInner = document.querySelector(
564 - "#inputInner--deliveryNo"
565 - ).parentNode;
566 - let inputOuter = document.querySelector("#inputOuter--deliveryNo");
567 - inputInner.classList.add("consignmentCode-textarea");
568 - document.querySelector("#inputInner--deliveryNo").focus();
569 - setTimeout(() => {
570 - inputOuter.classList.add("active");
571 - inputOuter.classList.add("activeBorder");
572 - }, 100);
573 - });
574 - },
575 - consignmentCodeBlur(val) {
576 - this.consignmentCodeRows = 1;
577 - this.$nextTick(() => {
578 - let inputInner = document.querySelector(
579 - "#inputInner--deliveryNo"
580 - ).parentNode;
581 - inputInner.classList.remove("consignmentCode-textarea");
582 - });
583 - this.sreachFormData.consignmentCode = val.target.value.split("\n");
584 - let arr = [];
585 - this.sreachFormData.consignmentCode.forEach((item) => {
586 - if (item != "" && item != null) {
587 - arr.push(item);
588 - }
589 - });
590 - this.sreachFormData.consignmentCode = arr;
591 - }, // 查看pdf
592 - openViewPdf(file) {
593 - file.findLoading = true;
594 - downLoadViewPdf(
595 - "/icleartw/cusFile/previewFile",
596 - { fileId: file.id },
597 - file.name + file.type
598 - )
599 - .then(() => {})
600 - .finally(() => {
601 - file.findLoading = false;
602 - });
603 - },
604 - },
605 -};
606 -</script>
607 -<style>
608 -.el-dropdown-menu__item.is-disabled {
609 - color: #bbb;
610 -}
611 -</style>
612 -<style lang="scss" scoped>
613 -@import "@/assets/styles/variables.scss";
614 -
615 -.search-wrap {
616 - height: calc(100% - 28px);
617 - margin: 12px 12px 16px 16px;
618 - background-color: #fff;
619 - padding: 20px;
620 -
621 - .search-box {
622 - margin-bottom: 12px;
623 - position: relative;
624 -
625 - .export-btn {
626 - position: absolute;
627 - right: 12px;
628 - top: 0;
629 - }
630 - }
631 -
632 - ::v-deep .el-table .bgc-row {
633 - background: #f2f2f2;
634 - }
635 -
636 - .el-pagination {
637 - text-align: right;
638 - margin-top: 10px;
639 -
640 - ::v-deep .el-input.is-focus .el-input__inner {
641 - border: 1px solid $fedexColor;
642 - }
643 -
644 - ::v-deep .el-input .el-input__inner:hover {
645 - border: 1px solid $fedexColor;
646 - }
647 -
648 - ::v-deep .el-input__inner:focus {
649 - border: 1px solid $fedexColor;
650 - }
651 -
652 - ::v-deep .el-pager li.active {
653 - color: $fedexColor;
654 - }
655 -
656 - ::v-deep .el-pager li:hover {
657 - color: $fedexColor;
658 - }
659 - }
660 -
661 - // .el-table__body-wrapper {
662 - // overflow: auto;
663 - // }
664 -}
665 -
666 -.search-btn {
667 - ::v-deep .el-button {
668 - border: 1px solid #cccccc;
669 - height: 50px;
670 - width: 90px;
671 -
672 - .el-icon-search {
673 - color: #cccccc;
674 - font-size: 20px;
675 - }
676 - }
677 -
678 - .el-button:hover,
679 - .el-button:focus {
680 - background: #f3f1f1;
681 - }
682 -}
683 -
684 -.texttareaTip {
685 - position: absolute;
686 - top: 50%;
687 - right: 20px;
688 - transform: translate(0, -50%);
689 - z-index: 10;
690 -}
691 -
692 -.consignmentCode-textarea {
693 - position: absolute;
694 - top: 25px;
695 - left: 1px;
696 - z-index: 10;
697 - min-height: 170px !important;
698 - border: 2px solid $fedexBorder;
699 - background-color: $fedexTablebackgroundColor;
700 - transition: all 0.2s ease;
701 -}
702 -
703 -.queryTable {
704 - ::v-deep .cell {
705 - text-align: center;
706 - white-space: pre-line;
707 - }
708 -}
709 -</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: "isClear",
36 - width: 150,
37 - align: "left",
38 - tem: "isClear",
39 - sort: false,
40 - },
41 - {
42 - label: "操作",
43 - prop: "opt",
44 - width: 150,
45 - align: "center",
46 - tem: "opt",
47 - sort: false,
48 - },
49 -];