Fedex / iClear-Connect-Pre-Clearance

Go to a project
Toggle navigation Toggle navigation pinning
jinhui.wang
7f477b6f 1 parent 03696cc9

单据查询，附件上传页面增加

Inline Side-by-side
Showing 11 changed files with 3055 additions and 14 deletions
...@@ -17,7 +17,7 @@ export function getwaybillData(data) { ...@@ -17,7 +17,7 @@ export function getwaybillData(data) {
17 }); 17 });
18 } 18 }
19 19
20 -// 运单详情查询 20 +// 运单数据详情查询
21 /** 21 /**
22 * @param consignmentId * 运单id 22 * @param consignmentId * 运单id
23 */ 23 */
...@@ -29,13 +29,39 @@ export function getWaybillDetail(data) { ...@@ -29,13 +29,39 @@ export function getWaybillDetail(data) {
29 }); 29 });
30 } 30 }
31 31
32 +// 运单附件详情查询
33 +/**
34 + * @param consignmentId * 运单id
35 + */
36 +export function getWaybillFileList(data) {
37 + return request({
38 + url: "biz-customer/attachment/query/queryInfo/" + data.consignmentId,
39 + method: "post",
40 + data: data
41 + });
42 +}
43 +
32 // 运单提交历史查询 44 // 运单提交历史查询
33 /** 45 /**
34 * @param consignmentId * 运单id 46 * @param consignmentId * 运单id
47 + * @param page *
48 + * @param size *
35 */ 49 */
36 export function getWaybillSubmitHistory(data) { 50 export function getWaybillSubmitHistory(data) {
37 return request({ 51 return request({
38 - url: "/biz-customer/attachment/query/queryInfo/" + data.consignmentId, 52 + url: "biz-customer/uploadRecord/queryHistoryList",
53 + method: "post",
54 + data: data
55 + });
56 +}
57 +
58 +// 历史详情查询
59 +/**
60 + * @param recordId id *
61 + */
62 +export function getWaybillSubmitHistoryDetail(data) {
63 + return request({
64 + url: "biz-customer/attachment/query/queryByRecord/" + data.recordId,
39 method: "post", 65 method: "post",
40 data: data 66 data: data
41 }); 67 });
......
...@@ -358,7 +358,7 @@ input:disabled { ...@@ -358,7 +358,7 @@ input:disabled {
358 line-height: normal; 358 line-height: normal;
359 359
360 .el-input, 360 .el-input,
361 - // .el-select, 361 + .el-select,
362 .el-date-editor, 362 .el-date-editor,
363 .el-range-editor, 363 .el-range-editor,
364 .el-checkbox, 364 .el-checkbox,
...@@ -398,7 +398,7 @@ input:disabled { ...@@ -398,7 +398,7 @@ input:disabled {
398 height: 100% !important; 398 height: 100% !important;
399 border: none !important; 399 border: none !important;
400 background-color: transparent; 400 background-color: transparent;
401 - margin-bottom: 4%; 401 + // margin-bottom: 4%;
402 padding-top: 1.15rem; 402 padding-top: 1.15rem;
403 // padding-right: 1.15rem; 403 // padding-right: 1.15rem;
404 padding-left: calc(0.6rem + 0.1875rem); 404 padding-left: calc(0.6rem + 0.1875rem);
...@@ -1167,3 +1167,13 @@ input:disabled { ...@@ -1167,3 +1167,13 @@ input:disabled {
1167 font-weight: 600; 1167 font-weight: 600;
1168 text-decoration-line: underline 1168 text-decoration-line: underline
1169 } 1169 }
1170 +
1171 +.el-popover {
1172 + .el-popconfirm {
1173 + .el-popconfirm__action {
1174 + .el-button--primary {
1175 + color: $fedexBottonColor;
1176 + }
1177 + }
1178 + }
1179 +}
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -43,6 +43,7 @@ import tableHeaders from "@/assets/languages/tableHeaders"; ...@@ -43,6 +43,7 @@ import tableHeaders from "@/assets/languages/tableHeaders";
43 import dictLabels from "@/assets/languages/dictLabels.js"; 43 import dictLabels from "@/assets/languages/dictLabels.js";
44 import settings from "./settings.js"; 44 import settings from "./settings.js";
45 import * as filters from "./utils/filters.js"; 45 import * as filters from "./utils/filters.js";
46 +import * as zipdownload from './utils/zipdownload.js'
46 import { toHead, numberRound, base64ConvertFile, b64ToBlob, titleCase, formatDate, alertWarningMsg, alertSuccessMsg, alertErrorMsg, alertInfoMsg } from "@/utils/index"; 47 import { toHead, numberRound, base64ConvertFile, b64ToBlob, titleCase, formatDate, alertWarningMsg, alertSuccessMsg, alertErrorMsg, alertInfoMsg } from "@/utils/index";
47 48
48 // 全局方法挂载 49 // 全局方法挂载
...@@ -71,6 +72,7 @@ Vue.prototype.alertWarningMsg = alertWarningMsg ...@@ -71,6 +72,7 @@ Vue.prototype.alertWarningMsg = alertWarningMsg
71 Vue.prototype.alertSuccessMsg = alertSuccessMsg 72 Vue.prototype.alertSuccessMsg = alertSuccessMsg
72 Vue.prototype.alertErrorMsg = alertErrorMsg 73 Vue.prototype.alertErrorMsg = alertErrorMsg
73 Vue.prototype.alertInfoMsg = alertInfoMsg 74 Vue.prototype.alertInfoMsg = alertInfoMsg
75 +Vue.prototype.zipdownload = zipdownload
74 Vue.prototype.msgSuccess = function (msg) { 76 Vue.prototype.msgSuccess = function (msg) {
75 this.$message({ showClose: true, message: msg, type: "success" }); 77 this.$message({ showClose: true, message: msg, type: "success" });
76 }; 78 };
......
...@@ -608,6 +608,7 @@ export function base64ConvertFile(urlData, filename) { ...@@ -608,6 +608,7 @@ export function base64ConvertFile(urlData, filename) {
608 608
609 // 将Base64字符串转换为Blob对象 609 // 将Base64字符串转换为Blob对象
610 export function b64ToBlob(b64data) { 610 export function b64ToBlob(b64data) {
611 + if (b64data.split(';base64,').length > 1) {
611 let parts = b64data.split(';base64,'); 612 let parts = b64data.split(';base64,');
612 let contentType = parts[0].split(':')[1]; 613 let contentType = parts[0].split(':')[1];
613 let raw = window.atob(parts[1]); 614 let raw = window.atob(parts[1]);
...@@ -617,6 +618,9 @@ export function b64ToBlob(b64data) { ...@@ -617,6 +618,9 @@ export function b64ToBlob(b64data) {
617 uInt8Array[i] = raw.charCodeAt(i); 618 uInt8Array[i] = raw.charCodeAt(i);
618 } 619 }
619 return new Blob([uInt8Array], { type: contentType }); 620 return new Blob([uInt8Array], { type: contentType });
621 + } else {
622 + return false
623 + }
620 } 624 }
621 625
622 //提示语公共方法 626 //提示语公共方法
......
...@@ -23,20 +23,39 @@ const mimeMap = { ...@@ -23,20 +23,39 @@ const mimeMap = {
23 } 23 }
24 const baseUrl = process.env.VUE_APP_BASE_API; //接口地址 24 const baseUrl = process.env.VUE_APP_BASE_API; //接口地址
25 25
26 -export function downLoadZip(str, data, filename) { 26 +export function downLoadZip(str, data, filename, type) {
27 var url = baseUrl + str; 27 var url = baseUrl + str;
28 return new Promise((resolve, reject) => { 28 return new Promise((resolve, reject) => {
29 axios({ 29 axios({
30 method: "get", 30 method: "get",
31 url: url, 31 url: url,
32 - params: { 32 + params: data,
33 - cusFileId: data,
34 - },
35 responseType: "blob", 33 responseType: "blob",
36 headers: { Authorization: getToken() }, 34 headers: { Authorization: getToken() },
37 }) 35 })
38 .then((res) => { 36 .then((res) => {
39 - resolveBlob(res, mimeMap.zip, filename); 37 + let fileType = ''
38 + let fileName = ''
39 + if (filename != '') {
40 + fileName = filename
41 + } else {
42 + if (res.headers['content-disposition']) {
43 + var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
44 + var contentDisposition = decodeURI(res.headers['content-disposition'])
45 + var result = patt.exec(contentDisposition)
46 + fileName = result[0].split('=')[1]
47 + } else {
48 + fileName = 'errorFile'
49 + }
50 + }
51 + if (type != '') {
52 + fileType = mimeMap[type]
53 + } else {
54 + if (res.headers['content-type']) {
55 + fileType = res.headers['content-type']
56 + }
57 + }
58 + resolveBlob(res, fileType, fileName);
40 resolve(res); 59 resolve(res);
41 }) 60 })
42 .catch((err) => { 61 .catch((err) => {
...@@ -61,16 +80,16 @@ export function downLoadViewPdf(str, id, title) { ...@@ -61,16 +80,16 @@ export function downLoadViewPdf(str, id, title) {
61 type: "application/pdf", 80 type: "application/pdf",
62 }); 81 });
63 let url = window.URL.createObjectURL(blob); 82 let url = window.URL.createObjectURL(blob);
64 - var win= window.open(url, "_blank"); // 打开新的标签页 83 + var win = window.open(url, "_blank"); // 打开新的标签页
65 84
66 - var setTitle= setInterval(() => { 85 + var setTitle = setInterval(() => {
67 - if (win.document.title!=""){ 86 + if (win.document.title != "") {
68 clearInterval("setTitle"); 87 clearInterval("setTitle");
69 - }else{ 88 + } else {
70 win.document.title = title; 89 win.document.title = title;
71 } 90 }
72 91
73 - },500); 92 + }, 500);
74 // var fileURL = URL.createObjectURL(blob); 93 // var fileURL = URL.createObjectURL(blob);
75 // var win = window.open(); 94 // var win = window.open();
76 // win.document.write('<iframe name="' + title + '" src="' + fileURL + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>'); 95 // win.document.write('<iframe name="' + title + '" src="' + fileURL + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>');
......
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 + <!-- 运单号 -->
14 + <el-col :span="5">
15 + <Formitem label="TRACKING NUMBER" prop="consignmentCode">
16 + <el-input
17 + type="textarea"
18 + class="inputShadow"
19 + id="inputInner--consignmentCode"
20 + resize="none"
21 + :rows="consignmentCodeRows"
22 + v-model="sreachFormData.consignmentCode"
23 + clearable
24 + placeholder=""
25 + @focus="consignmentCodeFocus"
26 + @blur="consignmentCodeBlur"
27 + ></el-input>
28 + <el-badge
29 + v-if="consignmentCodeNum() > 1"
30 + type="info"
31 + :value="`+${consignmentCodeNum()}`"
32 + class="item texttareaTip"
33 + ></el-badge>
34 + </Formitem>
35 + </el-col>
36 + <!-- 创建时间 -->
37 + <el-col :span="5">
38 + <Formitem
39 + label="CREATION TIME(from)-CREATION TIME(to)"
40 + prop="createTime"
41 + :activeType="true"
42 + >
43 + <el-date-picker
44 + class="inputInner--createTime"
45 + id="inputInner--createTime"
46 + v-model="sreachFormData.createTime"
47 + type="daterange"
48 + align="left"
49 + format="yyyy-MM-dd"
50 + prefix-icon="none"
51 + value-format="yyyy-MM-dd"
52 + range-separator="-"
53 + start-placeholder=""
54 + end-placeholder=""
55 + :picker-options="pickerOptions"
56 + @blur="datePickerBlur"
57 + @change="dateChange"
58 + >
59 + </el-date-picker>
60 + </Formitem>
61 + </el-col>
62 + <!-- 上传状态 -->
63 + <el-col :span="5">
64 + <Formitem label="UPLOAD STATUS" prop="statusCode">
65 + <el-select
66 + type="text"
67 + id="inputInner--statusCode"
68 + v-model="sreachFormData.statusCode"
69 + clearable
70 + filterable
71 + placeholder=""
72 + >
73 + <el-option
74 + v-for="(item, idx) in dictData.uploadStatus"
75 + :key="idx"
76 + :label="item.description"
77 + :value="item.code"
78 + ></el-option>
79 + <el-option label=" " value="null"></el-option>
80 + </el-select>
81 + </Formitem>
82 + </el-col>
83 + <el-col :span="2" class="search-btn">
84 + <el-button :disabled="loadings.tableLoading" @click="search(0)">
85 + <img src="../../assets/images/select.svg" alt="" />
86 + </el-button>
87 + </el-col>
88 + </el-row>
89 + </el-form>
90 + <div class="textCenter export-btn">
91 + <span>
92 + <el-button
93 + class="addButton"
94 + type="text"
95 + @click="editData('add', { consignmentCode: '', id: null })"
96 + >
97 + ADD
98 + </el-button>
99 + <el-popover placement="top" width="430" trigger="hover">
100 + <div>
101 + If the waybill you want too upload thecustoms clearance files
102 + <br />
103 + is not listed,please click here to add the tracking number.
104 + </div>
105 + <svg-icon
106 + slot="reference"
107 + class="el-icon-user-solid"
108 + icon-class="fedexQuestion"
109 + ></svg-icon>
110 + </el-popover>
111 + </span>
112 + <!-- <el-button class="entrySaveButton" style="margin-left: 10px"
113 + >Export</el-button
114 + > -->
115 + </div>
116 + </div>
117 + <el-table
118 + :data="tableData"
119 + style="width: 100%"
120 + :height="tableMaxheight"
121 + :row-class-name="tableRowClassName"
122 + v-loading="loadings.tableLoading"
123 + class="queryTable"
124 + @sort-change="handleSortChange"
125 + >
126 + <el-table-column
127 + v-for="(item, index) in tableHeader"
128 + :key="index"
129 + :prop="item.prop"
130 + :label="item.label"
131 + :min-width="item.width"
132 + :fixed="item.fixed ? item.fixed : false"
133 + :align="item.align"
134 + :sortable="item.sort"
135 + :show-overflow-tooltip="true"
136 + >
137 + <template slot="header" slot-scope="scope">
138 + <div style="line-height: 15px" v-html="item.label"></div>
139 + </template>
140 + <template slot-scope="scope">
141 + <div v-if="item.prop == 'consignmentCode'">
142 + <span
143 + class="consignmentCodeStyle"
144 + @click="editData('edit', scope.row)"
145 + >{{ scope.row.consignmentCode }}</span
146 + >
147 + </div>
148 + <div v-else-if="item.prop == 'recipientContactName'">
149 + <span
150 + v-if="
151 + scope.row.userUuid == $store.getters.userData.userUuid &&
152 + scope.row.shipperAccount == $store.getters.userData.accountNo
153 + "
154 + >{{ scope.row.recipientContactName }}</span
155 + >
156 + </div>
157 + <div v-else-if="item.prop == 'recipientCompany'">
158 + <span
159 + v-if="
160 + scope.row.userUuid == $store.getters.userData.userUuid &&
161 + scope.row.shipperAccount == $store.getters.userData.accountNo
162 + "
163 + >{{ scope.row.recipientCompany }}</span
164 + >
165 + </div>
166 + <div v-else-if="item.prop == 'shipperCountry'">
167 + <span
168 + v-if="
169 + scope.row.uuid == $store.getters.userData.userUuid &&
170 + scope.row.shipperAccount == $store.getters.userData.accountNo
171 + "
172 + >{{ scope.row.shipperCountry }}</span
173 + >
174 + </div>
175 + <div v-else-if="item.prop == 'createUserName'">
176 + <div
177 + :class="{
178 + afterCreateUserName:
179 + scope.row.createUserName !=
180 + $store.getters.userData.userName &&
181 + scope.row.createUserName != null &&
182 + scope.row.createUserName != ''
183 + ? true
184 + : false,
185 + }"
186 + >
187 + {{ scope.row.createUserName }}
188 + </div>
189 + </div>
190 + <span v-else>{{ scope.row[item.prop] }}</span>
191 + </template>
192 + </el-table-column>
193 + <!-- <el-table-column
194 + prop="option"
195 + label="OPERATE"
196 + :min-width="100"
197 + :fixed="false"
198 + align="left"
199 + >
200 + <template slot-scope="scope">
201 + <el-button type="text" @click="editData('edit', scope.row)"
202 + >view</el-button
203 + >
204 + </template>
205 + </el-table-column> -->
206 + </el-table>
207 + <el-pagination
208 + @size-change="handleSizeChange"
209 + @current-change="handleCurrentChange"
210 + :current-page="page.curPage"
211 + :page-sizes="[20, 30, 50, 100]"
212 + :page-size="page.pageSize"
213 + layout="total, sizes, prev, pager, next, jumper"
214 + :total="page.total"
215 + >
216 + </el-pagination>
217 + </div>
218 +</template>
219 +
220 +<script>
221 +import { getwaybillData } from "@/api/waybillInquiry.js";
222 +import { getUploadStatus } from "@/api/system/dictionary.js";
223 +let min = "";
224 +let start = "";
225 +let end = "";
226 +let three = 180 * 24 * 3600 * 1000;
227 +function disabledDate(time) {
228 + let nowTime = new Date().getTime();
229 + let threeMonths = nowTime - three;
230 + if (min != "") {
231 + start = min - 7 * 24 * 3600 * 1000;
232 + end = min + 7 * 24 * 3600 * 1000;
233 + return (
234 + time.getTime() <= threeMonths ||
235 + time.getTime() <= start ||
236 + time.getTime() >= end ||
237 + time.getTime() > nowTime
238 + );
239 + } else {
240 + return time.getTime() <= threeMonths || time.getTime() > nowTime;
241 + }
242 +}
243 +function onPick({ maxDate, minDate }) {
244 + min = new Date(minDate).getTime();
245 + document
246 + .getElementsByClassName("el-date-editor")[0]
247 + .__vue__.pickerOptions.disabledDate(new Date());
248 + if (maxDate != null) {
249 + minDate = "";
250 + }
251 +}
252 +export default {
253 + name: "WaybillInquiry",
254 + data() {
255 + return {
256 + sreachFormData: {
257 + consignmentCode: "",
258 + createTime: [],
259 + statusCode: null,
260 + sort: "",
261 + },
262 + tableData: [],
263 + tableHeader: [
264 + {
265 + label: "TRACKING<br/>NUMBER",
266 + prop: "consignmentCode",
267 + width: 150,
268 + align: "left",
269 + },
270 + {
271 + label: "RECIPIENT<br/>NAME",
272 + prop: "recipientContactName",
273 + width: 150,
274 + align: "left",
275 + },
276 + {
277 + label: "RECIPIENT<br/>COMPANY NAME",
278 + prop: "recipientCompany",
279 + width: 150,
280 + align: "left",
281 + },
282 + {
283 + label: "SHIPPER COUNTRY/<br/>TERRITORY",
284 + prop: "originCountry",
285 + width: 150,
286 + align: "left",
287 + },
288 + {
289 + label: "DOC/ITEM",
290 + prop: "docNondocFlag",
291 + width: 150,
292 + align: "left",
293 + },
294 + {
295 + label: "CREATOR",
296 + prop: "createUserName",
297 + width: 150,
298 + align: "left",
299 + },
300 + {
301 + label: "CREATION TIME",
302 + prop: "createTime",
303 + width: 150,
304 + align: "left",
305 + },
306 + {
307 + label: "UPLOAD TIME",
308 + prop: "modifyTime",
309 + width: 150,
310 + align: "left",
311 + },
312 + {
313 + label: "UPLOAD STATUS",
314 + prop: "statusName",
315 + width: 150,
316 + align: "left",
317 + },
318 + ],
319 + page: {
320 + curPage: 1,
321 + pageSize: 20,
322 + total: 0, //数据总和
323 + },
324 + rules: {},
325 + dictData: {
326 + uploadStatus: [],
327 + },
328 + pickerOptions: {
329 + disabledDate: disabledDate,
330 + onPick: onPick,
331 + },
332 + consignmentCodeRows: 1,
333 + loadings: {
334 + tableLoading: false,
335 + },
336 + status: 0,
337 + };
338 + },
339 + computed: {
340 + tableMaxheight() {
341 + return window.innerHeight - 300;
342 + },
343 + },
344 + created() {
345 + this.getDict();
346 + let arr = [];
347 + arr.push(
348 + this.formatDate(new Date().getTime() - 2 * 24 * 3600 * 1000).split(" ")[0]
349 + );
350 + arr.push(this.formatDate(new Date().getTime()).split(" ")[0]);
351 + this.sreachFormData.createTime = arr;
352 + this.search(0);
353 + },
354 + activated() {
355 + if (this.status == 0) {
356 + this.status = 1;
357 + } else {
358 + this.search(1);
359 + }
360 + },
361 + methods: {
362 + search(val) {
363 + this.tableData = [];
364 + this.loadings.tableLoading = true;
365 + let obj = this.datainfo();
366 + if (val == 0) {
367 + obj.curPage = 1;
368 + }
369 + getwaybillData(obj)
370 + .then((res) => {
371 + if (res.code === 200) {
372 + if (res.data.list != null) {
373 + this.tableData = res.data.list;
374 + } else {
375 + this.tableData = [];
376 + }
377 + this.page.total = res.data.total;
378 + } else {
379 + this.msgWarning(res.message);
380 + }
381 + this.loadings.tableLoading = false;
382 + })
383 + .catch((err) => {
384 + console.log(err);
385 + this.loadings.tableLoading = false;
386 + });
387 + },
388 + editData(type, data) {
389 + this.$router.push({
390 + name: "UploadDetail",
391 + params: {
392 + id: data.id,
393 + consignmentCode: data.consignmentCode,
394 + type: type,
395 + },
396 + });
397 + },
398 + datainfo() {
399 + let obj = {
400 + consignmentCode: this.sreachFormData.consignmentCode.replace(
401 + /[\n]/g,
402 + ";"
403 + ),
404 + createTimeFrom: "",
405 + createTimeTo: "",
406 + statusCode: this.sreachFormData.statusCode,
407 + sort: this.sreachFormData.sort,
408 + curPage: this.page.curPage,
409 + pageSize: this.page.pageSize,
410 + total: this.page.total,
411 + };
412 + if (this.sreachFormData.createTime.length > 0) {
413 + obj.createTimeFrom = this.sreachFormData.createTime[0];
414 + obj.createTimeTo = this.sreachFormData.createTime[1];
415 + }
416 + return obj;
417 + },
418 + handleSortChange({ column, prop, order }) {},
419 + // 改变页面条数
420 + handleSizeChange(val) {
421 + this.page.pageSize = val;
422 + this.search(1);
423 + },
424 + // 切换页码
425 + handleCurrentChange(val) {
426 + this.page.curPage = val;
427 + this.search(1);
428 + },
429 + //文本域切换
430 + consignmentCodeFocus() {
431 + this.consignmentCodeRows = 5;
432 + this.$nextTick(() => {
433 + let inputInner = document.querySelector(
434 + "#inputInner--consignmentCode"
435 + ).parentNode;
436 + let inputOuter = document.querySelector("#inputOuter--consignmentCode");
437 + inputInner.classList.add("consignmentCode-textarea");
438 + document.querySelector("#inputInner--consignmentCode").focus();
439 + setTimeout(() => {
440 + inputOuter.classList.add("active");
441 + inputOuter.classList.add("activeBorder");
442 + }, 100);
443 + });
444 + },
445 + consignmentCodeBlur(val) {
446 + this.consignmentCodeRows = 1;
447 + this.$nextTick(() => {
448 + let inputInner = document.querySelector(
449 + "#inputInner--consignmentCode"
450 + ).parentNode;
451 + inputInner.classList.remove("consignmentCode-textarea");
452 + });
453 +
454 + let arr = [];
455 + val.target.value
456 + .replace(/[\n\，\；\;]/g, ";")
457 + .replace(/[\t]/g, "")
458 + .split(";")
459 + .forEach((item) => {
460 + if (item != "" && item != null) {
461 + arr.push(item.trim());
462 + }
463 + });
464 + this.sreachFormData.consignmentCode = arr.join("\n");
465 + },
466 + consignmentCodeNum() {
467 + if (
468 + this.sreachFormData.consignmentCode != null &&
469 + this.sreachFormData.consignmentCode != ""
470 + ) {
471 + return this.sreachFormData.consignmentCode.split("\n").length;
472 + } else {
473 + return 0;
474 + }
475 + },
476 + datePickerBlur() {
477 + min = "";
478 + },
479 + dateChange(val) {
480 + if (val == null) {
481 + this.$nextTick(() => {
482 + this.sreachFormData.createTime = [];
483 + });
484 + }
485 + },
486 + getDict() {
487 + if (this.dictData.uploadStatus.length == 0) {
488 + getUploadStatus()
489 + .then((res) => {
490 + if (res.code === 200) {
491 + this.dictData.uploadStatus = res.data;
492 + }
493 + })
494 + .catch((err) => {
495 + console.log(err);
496 + });
497 + }
498 + },
499 + // 改变偶数行背景色
500 + tableRowClassName({ row, rowIndex }) {
501 + if ((rowIndex + 1) % 2 === 0) {
502 + return "bgc-row";
503 + }
504 + return "";
505 + },
506 + },
507 +};
508 +</script>
509 +
510 +<style lang="scss" scoped>
511 +@import "@/assets/styles/variables.scss";
512 +
513 +.search-wrap {
514 + height: calc(100% - 28px);
515 + margin: 12px 12px 16px 16px;
516 + background-color: #fff;
517 + padding: 20px;
518 +
519 + .search-box {
520 + margin-bottom: 12px;
521 + position: relative;
522 +
523 + .export-btn {
524 + position: absolute;
525 + right: 12px;
526 + top: 0;
527 + }
528 + }
529 +
530 + ::v-deep .el-table .bgc-row {
531 + background: #f2f2f2;
532 + }
533 +
534 + .el-pagination {
535 + text-align: right;
536 + margin-top: 10px;
537 +
538 + ::v-deep .el-input.is-focus .el-input__inner {
539 + border: 1px solid $fedexColor;
540 + }
541 +
542 + ::v-deep .el-input .el-input__inner:hover {
543 + border: 1px solid $fedexColor;
544 + }
545 +
546 + ::v-deep .el-input__inner:focus {
547 + border: 1px solid $fedexColor;
548 + }
549 +
550 + ::v-deep .el-pager li.active {
551 + color: $fedexColor;
552 + }
553 +
554 + ::v-deep .el-pager li:hover {
555 + color: $fedexColor;
556 + }
557 + }
558 +
559 + // .el-table__body-wrapper {
560 + // overflow: auto;
561 + // }
562 +}
563 +
564 +.search-btn {
565 + ::v-deep .el-button {
566 + border: 1px solid #cccccc;
567 + height: 50px;
568 + width: 90px;
569 +
570 + .el-icon-search {
571 + color: #cccccc;
572 + font-size: 20px;
573 + }
574 + }
575 +
576 + .el-button:hover,
577 + .el-button:focus {
578 + background: #f3f1f1;
579 + }
580 +}
581 +
582 +.texttareaTip {
583 + position: absolute;
584 + top: 50%;
585 + right: 20px;
586 + transform: translate(0, -50%);
587 + z-index: 10;
588 +}
589 +
590 +.consignmentCode-textarea {
591 + position: absolute;
592 + top: 25px;
593 + left: 1px;
594 + z-index: 10;
595 + min-height: 170px !important;
596 + border: 2px solid $fedexBorder;
597 + background-color: $fedexTablebackgroundColor;
598 + transition: all 0.2s ease;
599 +}
600 +
601 +.queryTable {
602 + ::v-deep .cell {
603 + // text-align: center;
604 + // white-space: pre-line;
605 + }
606 +}
607 +
608 +.addButton {
609 + display: inline-block;
610 + font-size: 18px !important;
611 + margin-right: 2px;
612 +}
613 +.afterCreateUserName:before {
614 + content: "*";
615 + color: $fedexColor;
616 + font-weight: 700;
617 +}
618 +
619 +.consignmentCodeStyle {
620 + font-weight: 700;
621 + color: $fedexButton;
622 + cursor: pointer;
623 +}
624 +</style>
1 +<template>
2 + <el-dialog
3 + class="uploadHistoryDialog"
4 + title="View upload history"
5 + :visible.sync="dialogVisible"
6 + width="65%"
7 + :show-close="true"
8 + :close-on-click-modal="false"
9 + center
10 + v-loading="loadings.dialogLoading"
11 + >
12 + <div class="dialogContent">
13 + <div class="dialogTitle">
14 + Import pre-clearance document upload
15 + <!-- <el-popover
16 + placement="top"
17 + width="300"
18 + trigger="hover"
19 + content="/\/\/\/\/\"
20 + >
21 + <i slot="reference" class="el-icon-question questionIcon" />
22 + </el-popover> -->
23 + </div>
24 + <el-table
25 + class="queryTable uploadHistoryTable"
26 + :data="tableData"
27 + style="width: 100%"
28 + :max-height="tableMaxheight"
29 + v-loading="loadings.tableLoading"
30 + row-key="index"
31 + :expand-row-keys="expandRowKeys"
32 + >
33 + <el-table-column type="expand" width="1">
34 + <template slot-scope="scope">
35 + <!-- <div
36 + class="empty"
37 + v-if="scope.row.file.length == 0"
38 + v-loading="scope.row.loading"
39 + >
40 + Empty
41 + </div> -->
42 + <div v-loading="scope.row.loading" style="margin-top: 5px">
43 + <div
44 + class="fileItem"
45 + v-for="(item, index) in scope.row.files"
46 + :key="index"
47 + >
48 + <div class="fileItemTitle">{{ item.title }}</div>
49 + <div
50 + class="filtItemData"
51 + v-for="(file, idx) in item.list"
52 + :key="idx"
53 + >
54 + <div class="filtItemData-name">
55 + <i class="el-icon-document" />{{ file.fileName }}
56 + </div>
57 + <div class="filtItemData-option">
58 + <span>{{ file.fileSize }}</span>
59 + <!-- <el-button type="text" @click="viewFile(file)"
60 + >view</el-button
61 + > -->
62 + <el-button
63 + v-if="
64 + scope.row.modifyUserId == $store.getters.userData.id
65 + "
66 + type="text"
67 + @click="downloadFile(file)"
68 + >
69 + DOWNLOAD
70 + </el-button>
71 + </div>
72 + </div>
73 + </div>
74 + </div>
75 + </template>
76 + </el-table-column>
77 + <el-table-column type="index" width="100" label="NUMBER" align="center">
78 + </el-table-column>
79 + <el-table-column
80 + v-for="(item, index) in tableHeader"
81 + :key="index"
82 + :prop="item.prop"
83 + :label="item.label"
84 + :width="item.width"
85 + :fixed="item.fixed ? item.fixed : false"
86 + :align="item.align"
87 + :sortable="item.sort"
88 + >
89 + <template slot-scope="scope">
90 + <div v-if="item.prop == 'action'">
91 + <el-button
92 + v-if="scope.row.modifyUserId == $store.getters.userData.id"
93 + type="text"
94 + @click="copyData(scope.row)"
95 + >UPDATE</el-button
96 + >
97 + </div>
98 + <span v-else>{{ scope.row[item.prop] }}</span>
99 + </template>
100 + </el-table-column>
101 + <el-table-column
102 + prop="option"
103 + label=""
104 + :fixed="false"
105 + align="right"
106 + width="120"
107 + >
108 + <template slot-scope="scope">
109 + <div class="historyOption">
110 + <el-button
111 + type="text"
112 + @click="
113 + expandRowKeys.includes(scope.row.index)
114 + ? closeExpand()
115 + : expandChange(scope.row)
116 + "
117 + >
118 + <span>
119 + <span v-if="expandRowKeys.includes(scope.row.index)"
120 + ><svg-icon icon-class="upIcon" />CLOSE</span
121 + >
122 + <span v-else><svg-icon icon-class="downIcon" />EXPAND</span>
123 + </span>
124 + </el-button>
125 + </div>
126 + </template>
127 + </el-table-column>
128 + </el-table>
129 + </div>
130 + <div align="center" style="margin-bottom: 20px">
131 + <el-button class="entrySaveButton" size="medium" @click="closeDialog">
132 + {{ $t("common.cancleBtn") }}
133 + </el-button>
134 + </div>
135 + </el-dialog>
136 +</template>
137 +
138 +<script>
139 +import {
140 + getWaybillSubmitHistory,
141 + getWaybillSubmitHistoryDetail,
142 +} from "@/api/waybillInquiry.js";
143 +export default {
144 + props: {
145 + dialogVisible: {
146 + type: Boolean,
147 + default: false,
148 + },
149 + headData: {
150 + type: Object,
151 + default: null,
152 + },
153 + },
154 + data() {
155 + return {
156 + tableData: [],
157 + expandRowKeys: [],
158 + tableHeader: [
159 + {
160 + label: "UPLOAD TEIM",
161 + prop: "modifyTime",
162 + width: 0,
163 + align: "left",
164 + },
165 + {
166 + label: "UPLOAD STATUS",
167 + prop: "statusName",
168 + width: 0,
169 + align: "left",
170 + },
171 + {
172 + label: "UPLOADER",
173 + prop: "modifyUserName",
174 + width: 0,
175 + align: "left",
176 + },
177 + {
178 + label: "ACTION",
179 + prop: "action",
180 + width: 180,
181 + align: "left",
182 + },
183 + ],
184 + loadings: {
185 + dialogLoading: false,
186 + tableLoading: false,
187 + },
188 + tableMaxheight: 300,
189 + };
190 + },
191 + watch: {
192 + dialogVisible(val) {
193 + if (val) {
194 + this.search();
195 + }
196 + },
197 + },
198 + methods: {
199 + //查询
200 + search() {
201 + this.tableData = [];
202 + this.tableLoading = true;
203 + getWaybillSubmitHistory({
204 + consignmentId: this.headData.id,
205 + page: 1,
206 + size: 9999999,
207 + })
208 + .then((res) => {
209 + if (res.code === 200) {
210 + if (res.data.list.length > 0) {
211 + res.data.list.forEach((item, idx) => {
212 + let obj = item.uploadRecord;
213 + obj.files = [
214 + { title: "WAYBILL", list: [] },
215 + { title: "INVOICE", list: [] },
216 + { title: "OTHER FILES ", list: [] },
217 + ];
218 + obj.index = idx;
219 + obj.loading = false;
220 + this.tableData.push(obj);
221 + });
222 + } else {
223 + this.tableData = [];
224 + }
225 + }
226 + this.tableLoading = false;
227 + })
228 + .catch((err) => {
229 + console.log(err);
230 + this.tableLoading = false;
231 + });
232 + },
233 + detailSearch(id) {
234 + return new Promise((resolve, reject) => {
235 + getWaybillSubmitHistoryDetail({ recordId: id })
236 + .then((res) => {
237 + if (res.code === 200) {
238 + let wab = [];
239 + let inv = [];
240 + let pink = [];
241 + let oth = [];
242 + res.data.forEach((item) => {
243 + item.file = item.filePath;
244 + if (item.bizTypeCode == "attachmentBizType_01") {
245 + item.index = wab.length == 0 ? 0 : wab.length - 1;
246 + wab.push(item);
247 + } else if (item.bizTypeCode == "attachmentBizType_02") {
248 + item.index = inv.length == 0 ? 0 : inv.length - 1;
249 + inv.push(item);
250 + } else if (item.bizTypeCode == "attachmentBizType_03") {
251 + item.index = pink.length == 0 ? 0 : pink.length - 1;
252 + pink.push(item);
253 + } else if (item.bizTypeCode == "attachmentBizType_04") {
254 + item.index = oth.length == 0 ? 0 : oth.length - 1;
255 + oth.push(item);
256 + }
257 + });
258 + let arr = [
259 + { title: "WAYBILL", list: wab },
260 + { title: "INVOICE", list: inv },
261 + { title: "OTHER FILES ", list: oth },
262 + ];
263 + this.tableData.forEach((item) => {
264 + if (item.id == id) {
265 + item.files = arr;
266 + }
267 + });
268 + resolve(arr);
269 + } else {
270 + reject();
271 + }
272 + })
273 + .catch((err) => {
274 + console.log(err);
275 + reject();
276 + });
277 + });
278 + },
279 + copyData(data) {
280 + this.closeDialog(data, "copy");
281 + },
282 + viewFile(val) {},
283 + downloadFile(val) {},
284 + expandChange(val) {
285 + let total = 0;
286 + val.files.forEach((item) => {
287 + total = total + item.list.length;
288 + });
289 + if (total == 0) {
290 + val.loading = true;
291 + this.detailSearch(val.id).then(() => {
292 + this.expandRowKeys = [];
293 + this.$nextTick(() => {
294 + this.expandRowKeys = [val.index];
295 + });
296 + val.loading = false;
297 + });
298 + } else {
299 + this.expandRowKeys = [];
300 + this.$nextTick(() => {
301 + this.expandRowKeys = [val.index];
302 + });
303 + }
304 + },
305 + closeExpand() {
306 + this.expandRowKeys = [];
307 + },
308 + closeDialog(val = null, type = "close") {
309 + this.expandRowKeys = [];
310 + this.$emit("close", { type: type, data: val });
311 + },
312 + },
313 +};
314 +</script>
315 +
316 +<style lang="scss" scoped>
317 +@import "@/assets/styles/variables.scss";
318 +
319 +.dialogContent {
320 + margin-bottom: 30px;
321 + .dialogTitle {
322 + font-size: 14px;
323 + font-weight: 600;
324 + color: #333;
325 + margin-bottom: 10px;
326 + }
327 +}
328 +
329 +.historyOption {
330 + .el-button {
331 + display: inline-block;
332 + margin-left: 20px;
333 + }
334 +}
335 +
336 +.fileItem {
337 + background-color: $formItemBackgroundColor;
338 + margin-bottom: 5px;
339 + .fileItemTitle {
340 + padding: 10px 15px;
341 + font-size: 14px;
342 + font-weight: 600;
343 + color: #333;
344 + border-bottom: 1px solid #e0e0e0;
345 + }
346 + .filtItemData {
347 + display: flex;
348 + justify-content: space-between;
349 + height: 40px;
350 + line-height: 40px;
351 + padding: 0 15px;
352 + .filtItemData-name {
353 + font-size: 14px;
354 + font-weight: 400;
355 + color: #333;
356 + i {
357 + display: inline-block;
358 + margin-right: 10px;
359 + }
360 + }
361 + .filtItemData-option {
362 + span {
363 + display: inline-block;
364 + margin-right: 22px;
365 + font-size: 12px;
366 + font-weight: 400;
367 + color: #999;
368 + }
369 + }
370 + }
371 +}
372 +
373 +.empty {
374 + padding: 20px;
375 + text-align: center;
376 + font-weight: 700;
377 + font-size: 16px;
378 +}
379 +</style>
1 +<template>
2 + <div>
3 + <el-form
4 + class="fedexFormStyle queryTextarea-box"
5 + ref="sreachForm"
6 + :model="headData"
7 + label-position="top"
8 + size="small"
9 + :rules="disabled ? {} : rules"
10 + >
11 + <div
12 + class="headDataBox"
13 + v-if="
14 + headData.id == null ||
15 + headData.id == '0' ||
16 + (headData.userUuid != $store.getters.userData.userUuid &&
17 + headData.shipperAccount != $store.getters.userData.accountNo)
18 + "
19 + >
20 + <div class="formRowTitle">
21 + <div class="formRowTitle-name">Waybill Information</div>
22 + </div>
23 + <el-row :gutter="5">
24 + <!-- 运单号 -->
25 + <el-col :span="6">
26 + <Formitem
27 + label="TRACKING NUMBER"
28 + prop="consignmentCode"
29 + type="edit"
30 + >
31 + <el-input
32 + v-model.trim="headData.consignmentCode"
33 + type="text"
34 + id="inputInner-edit-consignmentCode"
35 + clearable
36 + placeholder=""
37 + :disabled="formDisable.consignmentCodeDisabled || disabled"
38 + maxlength="12"
39 + @clear="consignmentCodeClear"
40 + @blur="consignmentCodeBlur"
41 + />
42 + </Formitem>
43 + </el-col>
44 + <!-- 取件日期 -->
45 + <!-- <el-col :span="6" v-show="false">
46 + <Formitem label="SHIP DATE" prop="shipDate" type="edit">
47 + <el-date-picker
48 + v-model="headData.shipDate"
49 + id="inputInner-edit-shipDate"
50 + format="yyyy-MM-dd"
51 + value-format="yyyy-MM-dd"
52 + type="date"
53 + placeholder=""
54 + prefix-icon="none"
55 + :disabled="true"
56 + ></el-date-picker>
57 + </Formitem>
58 + </el-col> -->
59 + <!-- 发货人计费账号 -->
60 + <el-col :span="6">
61 + <Formitem
62 + label="SHIPPER ACCPUNT"
63 + prop="userInputShipperAccount"
64 + type="edit"
65 + >
66 + <el-input
67 + v-model.trim="headData.userInputShipperAccount"
68 + type="text"
69 + id="inputInner-edit-userInputShipperAccount"
70 + clearable
71 + placeholder=""
72 + :disabled="
73 + formDisable.userInputShipperAccountDisabled || disabled
74 + "
75 + maxlength="9"
76 + @clear="userInputShipperAccountBlurClear"
77 + @blur="userInputShipperAccountBlur"
78 + />
79 + </Formitem>
80 + </el-col>
81 + <!-- 原产国 -->
82 + <el-col :span="6">
83 + <Formitem
84 + label="ORGIN COUNTRY/TERRITORY"
85 + prop="userInputOriginCountryCode"
86 + type="edit"
87 + >
88 + <el-select
89 + v-model="headData.userInputOriginCountryCode"
90 + type="text"
91 + id="inputInner-edit-userInputOriginCountryCode"
92 + clearable
93 + filterable
94 + value-key="id"
95 + placeholder=""
96 + :disabled="
97 + formDisable.userInputOriginCountryCodeDisabled || disabled
98 + "
99 + @change="userOriginCountryChange"
100 + >
101 + <el-option
102 + v-for="(item, idx) in countryDict"
103 + :key="idx"
104 + :label="item.englishName"
105 + :value="item.code"
106 + />
107 + </el-select>
108 + </Formitem>
109 + </el-col>
110 + <!-- 目的国 -->
111 + <el-col :span="6">
112 + <Formitem
113 + label="DESTINATION COUNTRY/TERRITORY"
114 + prop="destinationCountryCode"
115 + type="edit"
116 + >
117 + <el-select
118 + v-model="headData.destinationCountryCode"
119 + type="text"
120 + id="inputInner-edit-destinationCountryCode"
121 + clearable
122 + filterable
123 + value-key="id"
124 + placeholder=""
125 + :disabled="
126 + formDisable.destinationCountryCodeDisabled || disabled
127 + "
128 + >
129 + <el-option
130 + v-for="(item, idx) in countryDict"
131 + :key="idx"
132 + :label="item.englishName"
133 + :value="item.code"
134 + />
135 + </el-select>
136 + </Formitem>
137 + </el-col>
138 + </el-row>
139 + </div>
140 + <div
141 + v-else
142 + :class="{ headDataBox: true, 'headDataBox-Hidden': !dataBoxTtype }"
143 + >
144 + <div>
145 + <div class="formRowTitle">
146 + <div class="formRowTitle-name">Waybill information</div>
147 + <div class="formRowTitle-option">
148 + <el-button type="text" @click="dataHidden">
149 + <span v-if="!dataBoxTtype">
150 + <svg-icon icon-class="downIcon"></svg-icon>EXPAND
151 + </span>
152 + <span v-else
153 + ><svg-icon icon-class="upIcon"></svg-icon>CLOSE</span
154 + >
155 + </el-button>
156 + </div>
157 + </div>
158 + <el-row :gutter="5">
159 + <!-- 取件时间 -->
160 + <el-col :span="6">
161 + <Formitem label="SHIP DATE" prop="shipDate" type="edit">
162 + <el-date-picker
163 + v-model="headData.shipDate"
164 + id="inputInner-edit-shipDate"
165 + format="yyyy-MM-dd"
166 + value-format="yyyy-MM-dd"
167 + type="date"
168 + placeholder=""
169 + prefix-icon="none"
170 + :disabled="disabled"
171 + />
172 + </Formitem>
173 + </el-col>
174 + <!-- 发货人计费账号 -->
175 + <el-col :span="6">
176 + <Formitem
177 + label="SHIPPER ACCOUNT"
178 + prop="shipperAccount"
179 + type="edit"
180 + >
181 + <el-input
182 + v-model="headData.shipperAccount"
183 + type="text"
184 + id="inputInner-edit-shipperAccount"
185 + clearable
186 + placeholder=""
187 + :disabled="disabled"
188 + />
189 + </Formitem>
190 + </el-col>
191 + <!-- 件数 -->
192 + <el-col :span="6">
193 + <Formitem label="PIECES" prop="pieces" type="edit">
194 + <el-input
195 + v-model="headData.pieces"
196 + type="text"
197 + id="inputInner-edit-pieces"
198 + clearable
199 + placeholder=""
200 + :disabled="disabled"
201 + />
202 + </Formitem>
203 + </el-col>
204 + <!-- 重量/重量单位 -->
205 + <el-col :span="6" class="fomrItem-flex">
206 + <Formitem
207 + class="fomrItem-flex-left"
208 + label="WEIGHT"
209 + prop="weight"
210 + type="edit"
211 + >
212 + <el-input
213 + v-model="headData.weight"
214 + type="text"
215 + id="inputInner-edit-weight"
216 + clearable
217 + placeholder=""
218 + :disabled="disabled"
219 + />
220 + </Formitem>
221 + <div
222 + :class="{
223 + 'fomrItem-flex-right': true,
224 + 'fomrItem-flex-right-disabled': disabled,
225 + }"
226 + >
227 + <div>{{ headData.weightunit }}</div>
228 + </div>
229 + </el-col>
230 + </el-row>
231 + <el-row :gutter="5">
232 + <!-- 申报价格/申报币制 -->
233 + <el-col :span="6" class="fomrItem-flex">
234 + <Formitem
235 + class="fomrItem-flex-left"
236 + label="CUSTOMS VALUE"
237 + prop="customsValue"
238 + type="edit"
239 + >
240 + <el-input
241 + v-model="headData.customsValue"
242 + type="text"
243 + id="inputInner-edit-customsValue"
244 + clearable
245 + placeholder=""
246 + :disabled="disabled"
247 + />
248 + </Formitem>
249 + <div
250 + :class="{
251 + 'fomrItem-flex-right': true,
252 + 'fomrItem-flex-right-disabled': disabled,
253 + }"
254 + >
255 + <div>{{ headData.customsCurrency }}</div>
256 + </div>
257 + </el-col>
258 + <!-- 发货联系人姓名 -->
259 + <el-col :span="6">
260 + <Formitem
261 + label="SHIPPER REFERENCE"
262 + prop="shipperReference"
263 + type="edit"
264 + >
265 + <el-input
266 + v-model="headData.shipperReference"
267 + type="text"
268 + id="inputInner-edit-shipperReference"
269 + clearable
270 + placeholder=""
271 + :disabled="disabled"
272 + />
273 + </Formitem>
274 + </el-col>
275 + </el-row>
276 + </div>
277 + <div>
278 + <div class="formRowTitle">
279 + <div class="formRowTitle-name">Shipper information</div>
280 + </div>
281 + <el-row :gutter="5">
282 + <!-- 发货联系人姓名 -->
283 + <el-col :span="6">
284 + <Formitem
285 + label="CONTACT NAME"
286 + prop="shipperContactName"
287 + type="edit"
288 + >
289 + <el-tooltip
290 + class="item"
291 + effect="dark"
292 + :content="headData.shipperContactName"
293 + placement="top"
294 + >
295 + <el-input
296 + v-model="headData.shipperContactName"
297 + type="text"
298 + id="inputInner-edit-shipperContactName"
299 + clearable
300 + placeholder=""
301 + :disabled="disabled"
302 + />
303 + </el-tooltip>
304 + </Formitem>
305 + </el-col>
306 + <!-- 发货人公司 -->
307 + <el-col :span="6">
308 + <Formitem label="COMPANY" prop="shipperCompany" type="edit">
309 + <el-tooltip
310 + class="item"
311 + effect="dark"
312 + :content="headData.shipperCompany"
313 + placement="top"
314 + >
315 + <el-input
316 + v-model="headData.shipperCompany"
317 + type="text"
318 + id="inputInner-edit-shipperCompany"
319 + clearable
320 + placeholder=""
321 + :disabled="disabled"
322 + />
323 + </el-tooltip>
324 + </Formitem>
325 + </el-col>
326 + <!-- 发货人地址 -->
327 + <el-col :span="6">
328 + <Formitem label="ADDRESS" prop="shipperAddrLine" type="edit">
329 + <el-tooltip
330 + class="item"
331 + effect="dark"
332 + :content="headData.shipperAddrLine"
333 + placement="top"
334 + >
335 + <el-input
336 + v-model="headData.shipperAddrLine"
337 + type="text"
338 + id="inputInner-edit-shipperAddrLine"
339 + clearable
340 + placeholder=""
341 + :disabled="disabled"
342 + />
343 + </el-tooltip>
344 + </Formitem>
345 + </el-col>
346 + <!-- 发货人邮政编码 -->
347 + <el-col :span="6">
348 + <Formitem
349 + label="POSTAL CODE"
350 + prop="shipperPostalCode"
351 + type="edit"
352 + >
353 + <el-input
354 + v-model="headData.shipperPostalCode"
355 + type="text"
356 + id="inputInner-edit-shipperPostalCode"
357 + clearable
358 + placeholder=""
359 + :disabled="disabled"
360 + ></el-input>
361 + </Formitem>
362 + </el-col>
363 + </el-row>
364 + <el-row :gutter="5">
365 + <!-- 发货人城市 -->
366 + <el-col :span="6">
367 + <Formitem label="CITY" prop="shipperCity" type="edit">
368 + <el-tooltip
369 + class="item"
370 + effect="dark"
371 + :content="headData.shipperCity"
372 + placement="top"
373 + >
374 + <el-input
375 + v-model="headData.shipperCity"
376 + type="text"
377 + id="inputInner-edit-shipperCity"
378 + clearable
379 + placeholder=""
380 + :disabled="disabled"
381 + />
382 + </el-tooltip>
383 + </Formitem>
384 + </el-col>
385 + <!-- 发货人国家/原产国 -->
386 + <el-col :span="6">
387 + <Formitem
388 + label="COUNTRY/TERRITORY"
389 + prop="originCountry"
390 + type="edit"
391 + >
392 + <el-input
393 + v-model="headData.originCountry"
394 + type="text"
395 + id="inputInner-edit-originCountry"
396 + clearable
397 + placeholder=""
398 + :disabled="disabled"
399 + />
400 + <!-- <el-select
401 + v-model="headData.originCountry"
402 + type="text"
403 + id="inputInner-edit-originCountry"
404 + clearable
405 + placeholder=""
406 + :disabled="disabled"
407 + >
408 + <el-option label="1" value="1"></el-option>
409 + </el-select> -->
410 + </Formitem>
411 + </el-col>
412 + </el-row>
413 + </div>
414 + <div>
415 + <div class="formRowTitle">
416 + <div class="formRowTitle-name">Recipient information</div>
417 + </div>
418 + <el-row :gutter="5">
419 + <!-- 收件联系人姓名 -->
420 + <el-col :span="6">
421 + <Formitem
422 + label="CONTACT NAME"
423 + prop="recipientContactName"
424 + type="edit"
425 + >
426 + <el-tooltip
427 + class="item"
428 + effect="dark"
429 + :content="headData.recipientContactName"
430 + placement="top"
431 + >
432 + <el-input
433 + v-model="headData.recipientContactName"
434 + type="text"
435 + id="inputInner-edit-recipientContactName"
436 + clearable
437 + placeholder=""
438 + :disabled="disabled"
439 + />
440 + </el-tooltip>
441 + </Formitem>
442 + </el-col>
443 + <!-- 收件人公司 -->
444 + <el-col :span="6">
445 + <Formitem label="COMPANY" prop="recipientCompany" type="edit">
446 + <el-tooltip
447 + class="item"
448 + effect="dark"
449 + :content="headData.recipientCompany"
450 + placement="top"
451 + >
452 + <el-input
453 + v-model="headData.recipientCompany"
454 + type="text"
455 + id="inputInner-edit-recipientCompany"
456 + clearable
457 + placeholder=""
458 + :disabled="disabled"
459 + />
460 + </el-tooltip>
461 + </Formitem>
462 + </el-col>
463 + <!-- 收件人手机号 -->
464 + <!-- <el-col :span="6">
465 + <Formitem label="PHONE NUMBER" prop="recipientPhone" type="edit">
466 + <el-input
467 + v-model="headData.recipientPhone"
468 + type="text"
469 + id="inputInner-edit-recipientPhone"
470 + clearable
471 + placeholder=""
472 + :disabled="disabled"
473 + ></el-input>
474 + </Formitem>
475 + </el-col> -->
476 + <!-- 收件人地址 -->
477 + <el-col :span="6">
478 + <Formitem label="ADDRESS" prop="recipientAddrLine" type="edit">
479 + <el-tooltip
480 + class="item"
481 + effect="dark"
482 + :content="headData.recipientAddrLine"
483 + placement="top"
484 + >
485 + <el-input
486 + v-model="headData.recipientAddrLine"
487 + type="text"
488 + id="inputInner-edit-recipientAddrLine"
489 + clearable
490 + placeholder=""
491 + :disabled="disabled"
492 + />
493 + </el-tooltip>
494 + </Formitem>
495 + </el-col>
496 + <!-- 收件人邮政编码 -->
497 + <el-col :span="6">
498 + <Formitem
499 + label="POSTAL CODE"
500 + prop="recipientPostalCode"
501 + type="edit"
502 + >
503 + <el-input
504 + v-model="headData.recipientPostalCode"
505 + type="text"
506 + id="inputInner-edit-recipientPostalCode"
507 + clearable
508 + placeholder=""
509 + :disabled="disabled"
510 + ></el-input>
511 + </Formitem>
512 + </el-col>
513 + </el-row>
514 + <el-row :gutter="5">
515 + <!-- 收件人城市 -->
516 + <el-col :span="6">
517 + <Formitem label="CITY" prop="recipientCity" type="edit">
518 + <el-tooltip
519 + class="item"
520 + effect="dark"
521 + :content="headData.recipientCity"
522 + placement="top"
523 + >
524 + <el-input
525 + v-model="headData.recipientCity"
526 + type="text"
527 + id="inputInner-edit-recipientCity"
528 + clearable
529 + placeholder=""
530 + :disabled="disabled"
531 + />
532 + </el-tooltip>
533 + </Formitem>
534 + </el-col>
535 + <!-- 收件人国家/目的国 -->
536 + <el-col :span="6">
537 + <Formitem
538 + label="COUNTRY/TERRITORY"
539 + prop="destinationCountry"
540 + type="edit"
541 + >
542 + <el-input
543 + v-model="headData.destinationCountry"
544 + type="text"
545 + id="inputInner-edit-destinationCountry"
546 + clearable
547 + placeholder=""
548 + :disabled="disabled"
549 + />
550 + <!-- <el-select
551 + v-model="headData.destinationCountry"
552 + type="text"
553 + id="inputInner-edit-destinationCountry"
554 + clearable
555 + placeholder=""
556 + :disabled="disabled"
557 + >
558 + <el-option label="1" value="1"></el-option>
559 + </el-select> -->
560 + </Formitem>
561 + </el-col>
562 + </el-row>
563 + </div>
564 + </div>
565 + </el-form>
566 + <TipDialog
567 + ref="tipDialog"
568 + :dialogVisible="tipVisible"
569 + :tipcontent="tipcontent"
570 + :typeStatus="tipStatus"
571 + />
572 + </div>
573 +</template>
574 +
575 +<script>
576 +import { addWaybill } from "@/api/waybillInquiry.js";
577 +import TipDialog from "./tipDialog.vue";
578 +
579 +export default {
580 + components: {
581 + TipDialog,
582 + },
583 + props: {
584 + routeType: {
585 + type: String,
586 + default: "",
587 + },
588 + headData: {
589 + type: Object,
590 + default: null,
591 + },
592 + disabled: {
593 + type: Boolean,
594 + default: false,
595 + },
596 + },
597 + data() {
598 + return {
599 + rules: {
600 + consignmentCode: [
601 + {
602 + required: true,
603 + trigger: "blur",
604 + message: "The tracking number cannot be empty!",
605 + },
606 + {
607 + validator: (rule, value, callback) => {
608 + if (value != null && value != "") {
609 + let reg = /[^\d]/;
610 + if (value.length != 9 && value.length != 12) {
611 + callback("TRACKING NUMBER需为12位！");
612 + }
613 + // else if (reg.test(value)) {
614 + // callback("TRACKING NUMBER需为数字！");
615 + // }
616 + else {
617 + callback();
618 + }
619 + } else {
620 + callback();
621 + }
622 + },
623 + trigger: "blur",
624 + },
625 + ],
626 + userInputShipperAccount: [
627 + {
628 + required: false,
629 + trigger: "blur",
630 + message: "The shipper account cannot be empty!",
631 + },
632 + {
633 + validator: (rule, value, callback) => {
634 + if (value != null && value != "") {
635 + let reg = /[^\d]/;
636 + if (value.length < 9) {
637 + callback("shipper accpunt需为9位！");
638 + } else if (reg.test(value)) {
639 + callback("shipper accpunt需为数字！");
640 + } else {
641 + callback();
642 + }
643 + } else {
644 + callback();
645 + }
646 + },
647 + trigger: "blur",
648 + },
649 + ],
650 + userInputOriginCountryCode: [
651 + {
652 + required: false,
653 + trigger: "change",
654 + message: "The orgin country/territory cannot be empty!",
655 + },
656 + ],
657 + destinationCountryCode: [
658 + {
659 + required: false,
660 + trigger: "change",
661 + message: "The destination country/territory cannot be empty!",
662 + },
663 + ],
664 + },
665 + formDisable: {
666 + consignmentCodeDisabled: false,
667 + userInputShipperAccountDisabled: true,
668 + userInputOriginCountryCodeDisabled: true,
669 + destinationCountryCodeDisabled: true,
670 + },
671 + oldData: {
672 + id: "",
673 + consignmentCode: "",
674 + userInputShipperAccount: "",
675 + },
676 + countryDict: [],
677 + actvieEntryData: null,
678 + tipVisible: false,
679 + tipcontent: "",
680 + tipStatus: 1,
681 + dataBoxTtype: false,
682 + };
683 + },
684 + created() {
685 + this.countryDict = this.$store.getters.dictData.country;
686 + },
687 + methods: {
688 + //运单号查询
689 + consignmentCodeBlur(val) {
690 + if (val.target.value != null && val.target.value != "") {
691 + let obj = {
692 + consignmentCode: val.target.value,
693 + shipperAccount: "",
694 + };
695 + this.$nextTick(() => {
696 + this.$refs.sreachForm.clearValidate();
697 + });
698 + if (this.headData.consignmentCode != this.oldData.consignmentCode) {
699 + this.addApi(obj).then((res) => {
700 + this.dataInfo(res.data, "code");
701 + });
702 + }
703 + } else {
704 + this.formItemDisableType([false, false, false], null, "code");
705 + }
706 + },
707 + consignmentCodeClear() {
708 + this.consignmentCodeBlur({ target: { value: "" } });
709 + },
710 + //运单号+计费账号查询
711 + userInputShipperAccountBlur(val) {
712 + if (val.target.value != null && val.target.value != "") {
713 + let obj = {
714 + consignmentCode: this.headData.consignmentCode,
715 + shipperAccount: val.target.value,
716 + };
717 + if (
718 + this.headData.userInputShipperAccount !=
719 + this.oldData.userInputShipperAccount
720 + ) {
721 + this.addApi(obj).then((res) => {
722 + this.dataInfo(res.data, "account");
723 + });
724 + }
725 + } else {
726 + this.formItemDisableType([true, false, false], null, "account");
727 + }
728 + },
729 + userInputShipperAccountBlurClear() {
730 + this.userInputShipperAccountBlur({ target: { value: "" } });
731 + },
732 + userOriginCountryChange(val) {
733 + this.countryDict.forEach((item) => {
734 + if (item.code == val) {
735 + this.headData.userInputOriginCountry = item.englishName;
736 + }
737 + });
738 + },
739 + //查询结果处理
740 + dataInfo(val, blurType) {
741 + return new Promise((resolve, reject) => {
742 + let headData = this.headData;
743 + if (val.isCreatorFlag == 0) {
744 + //运单号不存在,帐号、国家都可编辑
745 + if (blurType == "code") {
746 + this.formItemDisableType(
747 + [true, false, false],
748 + val.consignmentId,
749 + blurType
750 + );
751 + this.oldData.consignmentCode = this.headData.consignmentCode;
752 + this.oldData.userInputShipperAccount =
753 + this.headData.userInputShipperAccount;
754 + } else if (blurType == "account") {
755 + if (
756 + this.headData.userInputShipperAccount ==
757 + this.$store.getters.userData.accountNo
758 + ) {
759 + this.formItemDisableType(
760 + [true, true, true],
761 + val.consignmentId,
762 + blurType
763 + );
764 + } else {
765 + this.alertWarningMsg(
766 + "Your login account's shipperAccount does not<br/> match the entered shipperAccount. Please confirm<br/> if you want to continue uploading?",
767 + "Tip",
768 + true
769 + ).then(() => {
770 + this.formItemDisableType(
771 + [true, true, true],
772 + val.consignmentId,
773 + blurType
774 + );
775 + });
776 + }
777 + }
778 + } else if (val.isCreatorFlag == 1) {
779 + //uuid相同，进入编辑。
780 + //uuid不同，帐号计费账号与运单计费账号相同，提示确认后进入编辑。
781 + //uuid不同，输入计费账号与运单计费账号相同，进入编辑。
782 + if (blurType == "code") {
783 + if (val.message != null && val.message != "") {
784 + this.tipStatus = 1;
785 + this.tipcontent = val.message;
786 + this.tipOpen(val.consignmentId, blurType, 1);
787 + } else {
788 + headData.id = val.consignmentId;
789 + this.$emit("searchWaybillData", headData);
790 + }
791 + } else if (blurType == "account") {
792 + headData.id = val.consignmentId;
793 + this.$emit("searchWaybillData", headData);
794 + }
795 + } else if (val.isCreatorFlag == 2) {
796 + //uuid不同，帐号计费账号与运单计费账号不同，提示确认后开放计费账号输入。
797 + //uuid不同，输入计费账号与运单计费账号不同，开放国家输入。
798 + if (blurType == "code") {
799 + this.tipStatus = 2;
800 + this.tipcontent = val.message;
801 + this.tipOpen(val.consignmentId, blurType, 2);
802 + } else if (blurType == "account") {
803 + this.formItemDisableType(
804 + [true, true, true],
805 + val.consignmentId,
806 + blurType
807 + );
808 + }
809 + } else if (val.isCreatorFlag == 3) {
810 + //运单无法使用
811 + this.alertWarningMsg(val.message);
812 + }
813 + });
814 + },
815 + addApi(data) {
816 + return new Promise((resolve, reject) => {
817 + this.$refs.sreachForm.validate((valid) => {
818 + // if (valid) {
819 + this.$parent.loadings.headFormLoading = true;
820 + addWaybill(data)
821 + .then((res) => {
822 + setTimeout(() => {
823 + if (res.code === 200) {
824 + res.data.message = res.msg;
825 + this.oldData.id = res.data.consignmentId;
826 + resolve(res);
827 + } else {
828 + this.msgWarning(res.msg);
829 + }
830 + this.$parent.loadings.headFormLoading = false;
831 + }, 1000);
832 + })
833 + .catch((err) => {
834 + console.log(err);
835 + this.$parent.loadings.headFormLoading = true;
836 + });
837 + // }
838 + });
839 + });
840 + },
841 + formItemDisableType(typeList, id, blurType) {
842 + let key = ["userInputShipperAccount", "userInputOriginCountryCode"];
843 + key.forEach((item, idx) => {
844 + this.rules[item][0].required = typeList[idx];
845 + this.formDisable[`${item}Disabled`] = !typeList[idx];
846 + if (this.headData.consignmentCode != this.oldData.consignmentCode) {
847 + if (blurType == "code") {
848 + this.headData[item] != null && this.headData[item] != ""
849 + ? (this.headData[item] = null)
850 + : "";
851 + if (
852 + item == "userInputOriginCountryCode" &&
853 + this.headData[item] == null
854 + ) {
855 + this.headData.userInputOriginCountry = null;
856 + }
857 + } else if (blurType == "account") {
858 + if (idx > 0) {
859 + this.headData[item] != null && this.headData[item] != ""
860 + ? (this.headData[item] = null)
861 + : "";
862 + if (
863 + item == "userInputOriginCountryCode" &&
864 + this.headData[item] == null
865 + ) {
866 + this.headData.userInputOriginCountry = null;
867 + }
868 + }
869 + }
870 + }
871 + });
872 + this.oldData.consignmentCode = this.headData.consignmentCode;
873 + this.oldData.userInputShipperAccount =
874 + this.headData.userInputShipperAccount;
875 + },
876 + //dm501数据缩放
877 + dataHidden() {
878 + this.dataBoxTtype = !this.dataBoxTtype;
879 + },
880 + //通过用户标志判断是否出现提示
881 + tipOpen(id, blurType, status) {
882 + let flag = 1;
883 + if (status == 1) {
884 + console.log(this.$store.getters.userData);
885 + flag = this.$store.getters.userData.addflag1;
886 + } else if (status == 2) {
887 + flag = this.$store.getters.userData.addflag2;
888 + }
889 +
890 + if (flag == 1) {
891 + this.tipVisible = true;
892 + this.$refs.tipDialog.$on("cancel", (res) => {
893 + this.tipVisible = false;
894 + if (res) {
895 + this.tipCancel(id, blurType);
896 + } else {
897 + this.oldData.consignmentCode = this.headData.consignmentCode;
898 + this.oldData.userInputShipperAccount =
899 + this.headData.userInputShipperAccount;
900 + }
901 + });
902 + } else if (flag == 2) {
903 + this.tipCancel(id, blurType);
904 + }
905 + },
906 + //提示语操作状态
907 + tipCancel(id, blurType) {
908 + if (id != null && id != "") {
909 + this.$emit("sreachEntry", id);
910 + } else {
911 + this.formItemDisableType([true, false, false], id, blurType);
912 + }
913 + },
914 + },
915 +};
916 +</script>
917 +
918 +<style lang="scss" scoped>
919 +@import "@/assets/styles/variables.scss";
920 +.headDataBox {
921 + overflow: hidden;
922 +}
923 +.headDataBox-Hidden {
924 + max-height: 115px;
925 +}
926 +.formRowTitle {
927 + display: flex;
928 + height: 55px;
929 + line-height: 55px;
930 + justify-content: space-between;
931 + .formRowTitle-name {
932 + font-size: 14px;
933 + font-weight: 600;
934 + color: #333;
935 + }
936 +}
937 +
938 +.fomrItem-flex {
939 + display: flex;
940 + .fomrItem-flex-left {
941 + width: 80%;
942 + }
943 +
944 + .fomrItem-flex-right {
945 + width: 20%;
946 + height: 55px;
947 + // line-height: 55px;
948 + text-align: center;
949 + background-color: $formItemBackgroundColor;
950 + font-size: 12px;
951 + font-weight: 600;
952 + color: #555;
953 + div {
954 + height: 25px;
955 + line-height: 25px;
956 + margin-top: 15px;
957 + border-left: 1px solid #ccc;
958 + }
959 + }
960 + .fomrItem-flex-right-disabled {
961 + color: $formDisabledColor !important;
962 + }
963 +}
964 +</style>
1 +<template>
2 + <div class="wrap" v-loading="loadings.headFormLoading">
3 + <div class="content-box">
4 + <div class="view-box">
5 + <div class="main-box">
6 + <div class="step-name">
7 + <i class="el-icon-circle-check"></i>
8 + <span>Waybill details</span
9 + ><span
10 + v-if="
11 + id != '' &&
12 + id != null &&
13 + id != '0' &&
14 + (headData.userUuid == $store.getters.userData.userUuid ||
15 + headData.shipperAccount == $store.getters.userData.accountNo)
16 + "
17 + >:{{ headData.consignmentCode }}</span
18 + >
19 + </div>
20 + <HeadData
21 + ref="headDataBox"
22 + class="headDataBox"
23 + :routeType="routeType"
24 + :headData="headData"
25 + :disabled="headDisabled"
26 + @searchWaybillData="searchWaybillData"
27 + />
28 + <UploadFile
29 + v-if="id != '' && id != null"
30 + ref="uploadBox"
31 + class="headDataBox"
32 + :headData="headData"
33 + :fileData="fileData"
34 + :routeType="routeType"
35 + @fileDataChange="fileDataChange"
36 + />
37 + <div class="option">
38 + <el-button
39 + v-if="id != '' && id != null"
40 + class="entrySaveButton entrySaveButton-background"
41 + @click="submit"
42 + >
43 + SUBMIT
44 + </el-button>
45 + <el-button
46 + v-if="
47 + (id == '' || id == null) &&
48 + headData.consignmentCode != null &&
49 + headData.consignmentCode != '' &&
50 + headData.userInputShipperAccount != null &&
51 + headData.userInputShipperAccount != '' &&
52 + !$refs.headDataBox.formDisable
53 + .userInputOriginCountryCodeDisabled
54 + "
55 + class="entrySaveButton entrySaveButton-background"
56 + @click="confirm"
57 + >
58 + CONFIRM
59 + </el-button>
60 + <el-button class="entrySaveButton" @click="back"> CANCEL</el-button>
61 + </div>
62 + </div>
63 + </div>
64 + </div>
65 + </div>
66 +</template>
67 +
68 +<script>
69 +import HeadData from "./headData.vue";
70 +import UploadFile from "./uploadFile.vue";
71 +import {
72 + getWaybillDetail,
73 + submitWaybill,
74 + getWaybillFileList,
75 +} from "@/api/waybillInquiry.js";
76 +export default {
77 + name: "",
78 + components: {
79 + HeadData,
80 + UploadFile,
81 + },
82 + data() {
83 + return {
84 + id: null,
85 + headData: {
86 + id: null,
87 + userUuid: null,
88 + consignmentCode: "",
89 + userInputShipperAccount: "",
90 + userInputOriginCountry: "",
91 + userInputOriginCountryCode: "",
92 + destinationCountry: "China",
93 + destinationCountryCode: "Country_CN",
94 + },
95 + fileData: [
96 + {
97 + titleName: "WAYBILL UPLOAD",
98 + uploadType: "attachmentBizType_01",
99 + required: false,
100 + files: [],
101 + },
102 + {
103 + titleName: "INVOICE UPLOAD",
104 + uploadType: "attachmentBizType_02",
105 + required: false,
106 + files: [],
107 + },
108 + {
109 + titleName: "PACKING LIST UPLOAD",
110 + uploadType: "attachmentBizType_03",
111 + required: false,
112 + files: [],
113 + },
114 + {
115 + titleName: "OTHER FILES UPLOAD",
116 + uploadType: "attachmentBizType_04",
117 + required: false,
118 + files: [],
119 + },
120 + ],
121 + loadings: {
122 + headFormLoading: false,
123 + confirmLoading: false,
124 + submitLoading: false,
125 + },
126 + routeType: "add",
127 + headDisabled: false,
128 + };
129 + },
130 + created() {
131 + this.id = this.$route.params.id;
132 + this.headData.id = this.id;
133 + this.routeType = this.$route.params.type;
134 + if (this.id || this.routeType) {
135 + if (this.routeType == "edit") {
136 + this.searchhData();
137 + this.searchFileData();
138 + } else {
139 + this.headDisabled = false;
140 + }
141 + this.$store.dispatch(
142 + "fillForm/addDeliveryNo",
143 + this.$route.params.consignmentCode
144 + );
145 + } else {
146 + this.$router.push({ name: "WaybillInquiry" });
147 + }
148 + },
149 + methods: {
150 + //单据数据查询
151 + searchhData() {
152 + return new Promise((resolve, reject) => {
153 + this.loadings.headFormLoading = true;
154 + getWaybillDetail({ consignmentId: this.id })
155 + .then((res) => {
156 + if (res.code === 200) {
157 + this.headData = res.data;
158 + this.headChange(this.headData);
159 + this.headDisabled = true;
160 + resolve(res);
161 + } else {
162 + this.alertWarningMsg(res.msg);
163 + }
164 + this.loadings.headFormLoading = false;
165 + })
166 + .catch((err) => {
167 + console.log(err);
168 + this.loadings.headFormLoading = false;
169 + });
170 + });
171 + },
172 + //附加信息查询
173 + searchFileData() {
174 + getWaybillFileList({ consignmentId: this.id })
175 + .then((res) => {
176 + if (res.code === 200) {
177 + if (res.data.length > 0) {
178 + let awb = [];
179 + let inv = [];
180 + let pkl = [];
181 + let oth = [];
182 + res.data.forEach((item) => {
183 + item.file = item.filePath;
184 + if (item.bizTypeCode == "attachmentBizType_01") {
185 + item.index = awb.length == 0 ? 0 : awb.length - 1;
186 + awb.push(item);
187 + } else if (item.bizTypeCode == "attachmentBizType_02") {
188 + item.index = inv.length == 0 ? 0 : inv.length - 1;
189 + inv.push(item);
190 + } else if (item.bizTypeCode == "attachmentBizType_03") {
191 + item.index = pkl.length == 0 ? 0 : pkl.length - 1;
192 + pkl.push(item);
193 + } else if (item.bizTypeCode == "attachmentBizType_04") {
194 + item.index = oth.length == 0 ? 0 : oth.length - 1;
195 + oth.push(item);
196 + }
197 + });
198 + this.fileData.forEach((item) => {
199 + if (item.uploadType == "attachmentBizType_01") {
200 + item.files = awb;
201 + } else if (item.uploadType == "attachmentBizType_02") {
202 + item.files = inv;
203 + } else if (item.uploadType == "attachmentBizType_03") {
204 + item.files = pkl;
205 + } else if (item.uploadType == "attachmentBizType_04") {
206 + item.files = oth;
207 + }
208 + });
209 + }
210 + } else {
211 + this.alertWarningMsg(res.msg);
212 + }
213 + })
214 + .catch((err) => {
215 + console.log(err);
216 + });
217 + },
218 + //提交
219 + submit() {
220 + this.loadings.headFormLoading = true;
221 + let fileTotle = 0;
222 + this.fileData.forEach((item) => {
223 + fileTotle = Number(fileTotle) + Number(item.files.length);
224 + });
225 + if (fileTotle > 0) {
226 + let obj = {
227 + consignmentJson: this.submitDataInfo().json,
228 + fileUpload: this.submitDataInfo().fileList,
229 + };
230 + submitWaybill(obj)
231 + .then((res) => {
232 + if (res.code === 200) {
233 + this.msgSuccess("Upload success!");
234 + setTimeout(() => {
235 + this.back();
236 + this.loadings.headFormLoading = false;
237 + }, 1000);
238 + } else {
239 + this.alertWarningMsg(res.msg);
240 + this.loadings.headFormLoading = false;
241 + }
242 + })
243 + .catch((err) => {
244 + console.log(err);
245 + this.loadings.headFormLoading = false;
246 + });
247 + } else {
248 + this.msgWarning("Please upload the file!");
249 + this.loadings.headFormLoading = false;
250 + }
251 + },
252 + //提交数据初始化
253 + submitDataInfo() {
254 + let obj = {
255 + consignmentId: this.headData.id,
256 + consignmentCode: this.headData.consignmentCode,
257 + shipperAccount: this.headData.userInputShipperAccount,
258 + originCountryCode: this.headData.userInputOriginCountryCode,
259 + originCountry: this.headData.userInputOriginCountry,
260 + destinationCountryCode: this.headData.destinationCountryCode,
261 + destinationCountry: this.headData.destinationCountry,
262 + attachmentBizTypeList: [],
263 + };
264 + let arr = [];
265 + this.fileData.forEach((item) => {
266 + item.files.forEach((file) => {
267 + if (file.id) {
268 + obj.attachmentBizTypeList.push(file);
269 + } else {
270 + obj.attachmentBizTypeList.push({
271 + id: null,
272 + bizId: null,
273 + bizTypeCode: file.bizTypeCode,
274 + bizTypeName: null,
275 + sourceFileName: null,
276 + fileName: file.fileName,
277 + filePath: null,
278 + fileTypeCode: null,
279 + fileTypeName: null,
280 + status: null,
281 + createTime: null,
282 + createUserId: null,
283 + createUserName: null,
284 + modifyTime: null,
285 + modifyUserId: null,
286 + modifyUserName: null,
287 + uploadRecordId: null,
288 + fileSize: file.fileSize,
289 + consignmentCode: null,
290 + });
291 + }
292 + if (file.file.split(";base64,").length > 1) {
293 + arr.push(this.base64ConvertFile(file.file, file.fileName));
294 + }
295 + });
296 + });
297 + return { json: JSON.stringify(obj), fileList: arr };
298 + },
299 + //确认新建运单
300 + confirm() {
301 + this.$refs.headDataBox.$refs.sreachForm.validate((valid) => {
302 + if (valid) {
303 + if (this.$refs.headDataBox.$refs.actvieEntryData != null) {
304 + } else {
305 + }
306 + this.id = "0";
307 + this.headData.id = "0";
308 + this.headData.userUuid = "";
309 + this.headDisabled = true;
310 + if (
311 + this.headData.userInputOriginCountryCode == null ||
312 + this.headData.userInputOriginCountryCode == ""
313 + ) {
314 + this.headData.userInputOriginCountry = null;
315 + }
316 + }
317 + });
318 + },
319 + //ADD输入数据变化
320 + headChange(val) {
321 + this.id = val.id;
322 + if (val.id != null && val.id != "") {
323 + this.headDisabled = true;
324 + }
325 + this.headData = val;
326 + let recipientAdd = "";
327 + this.headData.recipientAddrLine1 != null &&
328 + this.headData.recipientAddrLine1 != ""
329 + ? (recipientAdd = recipientAdd + this.headData.recipientAddrLine1)
330 + : "";
331 + this.headData.recipientAddrLine2 != null &&
332 + this.headData.recipientAddrLine2 != ""
333 + ? (recipientAdd =
334 + recipientAdd + " ; " + this.headData.recipientAddrLine2)
335 + : "";
336 + this.headData.recipientAddrLine3 != null &&
337 + this.headData.recipientAddrLine3 != ""
338 + ? (recipientAdd =
339 + recipientAdd + " ; " + this.headData.recipientAddrLine3)
340 + : "";
341 + this.headData.recipientAddrLine = recipientAdd;
342 + let shipperAdd = "";
343 + this.headData.shipperAddrLine1 != null &&
344 + this.headData.shipperAddrLine1 != ""
345 + ? (shipperAdd = shipperAdd + this.headData.shipperAddrLine1)
346 + : "";
347 + this.headData.shipperAddrLine2 != null &&
348 + this.headData.shipperAddrLine2 != ""
349 + ? (shipperAdd = shipperAdd + " ; " + this.headData.shipperAddrLine2)
350 + : "";
351 + this.headData.shipperAddrLine = shipperAdd;
352 + },
353 + searchWaybillData(val) {
354 + if (val.id != null && val.id != "") {
355 + this.id = val.id;
356 + this.searchhData();
357 + }
358 + },
359 + fileDataChange(val) {
360 + this.fileData = val;
361 + },
362 + back() {
363 + this.$router.go(-1);
364 + this.$store.dispatch("fillForm/addDeliveryNo", "");
365 + },
366 + },
367 +};
368 +</script>
369 +
370 +<style lang="scss" scoped>
371 +@import "@/assets/styles/variables.scss";
372 +.wrap {
373 + height: 100%;
374 + width: 100%;
375 + font-size: 14px;
376 + position: relative;
377 + .content-box {
378 + height: 100%;
379 + }
380 + // padding-bottom: 100px;
381 + .header {
382 + width: 100%;
383 + height: 48px;
384 + line-height: 48px;
385 + background: #fff;
386 + text-align: right;
387 + padding-right: 22px;
388 + }
389 + .view-box {
390 + height: 100%;
391 + overflow: auto;
392 + // margin: 0 auto !important;
393 + padding: 20px;
394 + .main-box {
395 + height: auto;
396 + padding: 20px;
397 + position: relative;
398 + background: #fff;
399 + .option {
400 + margin-top: 50px;
401 + margin-bottom: 50px;
402 + text-align: center;
403 + }
404 + }
405 + }
406 + .nav-page-box {
407 + height: 100%;
408 + display: flex;
409 + align-items: center;
410 + justify-content: center;
411 + .flex-box {
412 + width: 75%;
413 + height: 80%;
414 + .suc-title {
415 + font-size: 24px;
416 + font-weight: 200;
417 + line-height: 36px;
418 + color: #333333;
419 + .el-icon-circle-check {
420 + color: #008a16;
421 + margin: 0 6px 16px 0;
422 + }
423 + }
424 + .nav-btn-box {
425 + width: 100%;
426 + height: calc(100% - 46px);
427 + background: #fff;
428 + text-align: center;
429 + vertical-align: middle;
430 + padding: 30px;
431 + .declare-tip {
432 + font-size: 20px;
433 + font-weight: 400;
434 + line-height: 30px;
435 + }
436 + .declare-box {
437 + display: flex;
438 + align-items: center;
439 + justify-content: center;
440 + width: 100%;
441 + height: 100%;
442 +
443 + .declare {
444 + display: flex;
445 + flex-direction: column;
446 + border: 1px solid #e3e3e3;
447 + width: 30%;
448 + height: 75%;
449 + min-width: 240px;
450 + align-items: center;
451 + justify-content: center;
452 + .svg-icon {
453 + // vertical-align: top !important;
454 + width: 50%;
455 + height: 50%;
456 + margin-bottom: 22px;
457 + }
458 + .el-button {
459 + width: 200px;
460 + }
461 + }
462 + }
463 + }
464 + }
465 + }
466 +
467 + .step-name {
468 + margin-bottom: 20px;
469 +
470 + i {
471 + font-size: 32px;
472 + vertical-align: -5px;
473 + color: #4d148c;
474 + margin-right: 12px;
475 + }
476 + span {
477 + font-size: 20px;
478 + font-weight: 600;
479 + }
480 + }
481 +}
482 +
483 +.headDataBox {
484 + width: 85%;
485 + margin: 0 auto;
486 +}
487 +</style>
1 +<template>
2 + <el-dialog
3 + class="uploadHistoryDialog"
4 + :visible.sync="dialogVisible"
5 + width="35%"
6 + :show-close="true"
7 + :close-on-click-modal="false"
8 + center
9 + >
10 + <template slot="title">
11 + <div class="dialogTitle el-icon-warning"></div>
12 + </template>
13 + <div class="content">
14 + <div class="content-Item" v-html="tipcontent"></div>
15 + <div class="content-option">
16 + <el-checkbox v-model="checked" @change="checkChange">
17 + No more prompts in the future for the same situation
18 + </el-checkbox>
19 + </div>
20 + </div>
21 + <div align="center" style="margin-bottom: 20px">
22 + <el-button
23 + class="entrySaveButton entrySaveButton-background"
24 + @click="confirm"
25 + >
26 + CONFIRM
27 + </el-button>
28 + <el-button class="entrySaveButton" @click="cancel">CANCEL</el-button>
29 + </div>
30 + </el-dialog>
31 +</template>
32 +
33 +<script>
34 +import { uploadUserTipFlag } from "@/api/system/user.js";
35 +export default {
36 + props: {
37 + dialogVisible: {
38 + type: Boolean,
39 + default: false,
40 + },
41 + tipcontent: {
42 + type: String,
43 + default: "",
44 + },
45 + typeStatus: {
46 + type: Number,
47 + default: 1,
48 + },
49 + },
50 + data() {
51 + return {
52 + checked: false,
53 + };
54 + },
55 + watch: {
56 + dialogVisible(val) {
57 + if (val) {
58 + if (typeStatus == 1) {
59 + this.checked =
60 + this.$store.getters.userData.addflag1 == 1 ? false : true;
61 + } else if (typeStatus == 2) {
62 + this.checked =
63 + this.$store.getters.userData.addflag2 == 1 ? false : true;
64 + }
65 + }
66 + },
67 + },
68 + methods: {
69 + checkChange(val) {
70 + let obj = {
71 + addFlag1: this.$store.getters.userData.addflag1,
72 + addFlag2: this.$store.getters.userData.addflag1,
73 + };
74 + if (typeStatus == 1) {
75 + obj.addFlag1 = val ? 2 : 1;
76 + } else if (typeStatus == 2) {
77 + obj.addFlag2 = val ? 2 : 1;
78 + }
79 + uploadUserTipFlag(obj)
80 + .then((res) => {
81 + if (res.code === 200) {
82 + } else {
83 + // this.alertWarningMsg(res.msg)
84 + }
85 + })
86 + .catch((err) => {
87 + console.log(err);
88 + });
89 + },
90 + confirm() {
91 + this.$emit("cancel", true);
92 + },
93 + cancel() {
94 + this.$emit("cancel", false);
95 + },
96 + },
97 +};
98 +</script>
99 +
100 +<style lang="scss" scoped>
101 +@import "@/assets/styles/variables.scss";
102 +.dialogTitle {
103 + font-size: 36px;
104 + color: $fedexBottonColor;
105 +}
106 +.content {
107 + text-align: center;
108 + .content-Item {
109 + font-size: 16px;
110 + font-weight: 500;
111 + color: #333;
112 + line-height: 20px;
113 + margin-bottom: 20px;
114 + }
115 +
116 + .content-option {
117 + margin-bottom: 24px;
118 + .el-checkbox {
119 + .el-checkbox__label {
120 + color: $fedexButton !important;
121 + }
122 + }
123 + }
124 +}
125 +</style>
1 +<template>
2 + <div>
3 + <div class="uploadFile-title">
4 + <div class="content">
5 + Import pre-clearance document upload <span>*</span>
6 + <el-popover placement="top" width="510" trigger="hover">
7 + <div>
8 + Click the links below to upload customs clearance documents to
9 + support <br />pre-clearance in destination.
10 + </div>
11 + <i slot="reference" class="el-icon-question questionIcon" />
12 + </el-popover>
13 + </div>
14 + <el-button type="text" @click="viewHistory"
15 + >VIEW UPLOAD HISTORY</el-button
16 + >
17 + </div>
18 + <div class="uploadFile-box">
19 + <div
20 + v-for="(item, index) in fileData"
21 + :key="index"
22 + :class="{ uploadFileBoxItem: true }"
23 + >
24 + <div class="uploadButton" style="display: flex">
25 + <div style="height: 45px" v-if="uploadType">
26 + <div>
27 + <el-button type="text" @click="upload(item.uploadType)"
28 + >{{ item.titleName }}
29 + </el-button>
30 + <span v-if="item.required" class="requiredIcon">*</span>
31 + </div>
32 + <!-- <el-popover
33 + style="margin-left: 5px"
34 + v-if="item.uploadType == 'OTH'"
35 + placement="top"
36 + width="720"
37 + trigger="hover"
38 + >
39 + <div>
40 + Please provide
41 + <span class="tipWeight">certificate of origin, contract</span>,
42 + etc. if have any.<br />
43 + And please provide
44 + <span class="tipWeight">purchase receipts</span> or other
45 + support clearance documents if declaring personal items.
46 + </div>
47 + <i slot="reference" class="el-icon-question questionIcon" />
48 + </el-popover> -->
49 + </div>
50 + <div class="tipDom" v-if="item.uploadType == 'OTH'">
51 + Please provide
52 + <span class="tipWeight">certificate of origin,contract</span>,etc.
53 + if have any.<br />
54 + And please provide
55 + <span class="tipWeight">purchase receipts</span> or other support
56 + clearance documents if declaring personal items.
57 + </div>
58 + <!-- <div v-else>Waybill upload</div> -->
59 + </div>
60 + <div
61 + class="uploadFileList"
62 + v-for="(file, idx) in item.files"
63 + :key="idx"
64 + >
65 + <div class="fileName">
66 + <i class="el-icon-document" />{{ file.fileName }}
67 + </div>
68 + <div class="fileOption">
69 + <!-- 文件大小 -->
70 + <span class="fileSize"
71 + >{{ numberRound(Number(file.fileSize / 1024), 2) }}KB</span
72 + >
73 + <!-- 预览 -->
74 + <!-- <el-button
75 + type="text"
76 + :loading="file.viewLoading"
77 + @click="fileView(file)"
78 + >view</el-button
79 + > -->
80 + <!-- 下载 -->
81 + <el-button
82 + type="text"
83 + :loading="file.downLoading"
84 + @click="downloadFile(file)"
85 + >DOWNLOAD</el-button
86 + >
87 + <!-- 删除 -->
88 + <el-popconfirm
89 + title="Do you want to delete this file?"
90 + @confirm="delFile(file)"
91 + >
92 + <el-button slot="reference" type="text" :loading="file.delLoading"
93 + >DELETE</el-button
94 + >
95 + </el-popconfirm>
96 + </div>
97 + </div>
98 + </div>
99 + <!-- <el-button
100 + v-if="!uploadType"
101 + type="text"
102 + icon="el-icon-circle-plus-outline"
103 + @click="addUpload"
104 + >Add</el-button
105 + > -->
106 + <el-upload
107 + class="upload-demo"
108 + ref="uploadBlock"
109 + :multiple="true"
110 + action=""
111 + :file-list="fileList"
112 + :before-upload="beforeUpload"
113 + :show-file-list="false"
114 + :on-error="handleUploadError"
115 + :on-success="handleUploadSuccess"
116 + :on-remove="handleRemove"
117 + :http-request="uploadFile"
118 + :auto-upload="true"
119 + :on-change="handleChange"
120 + v-show="false"
121 + >
122 + </el-upload>
123 + </div>
124 + <HistoryDialog
125 + ref="historyDialog"
126 + :dialogVisible="viewHistoryType"
127 + :headData="headData"
128 + @close="historyClose"
129 + />
130 + </div>
131 +</template>
132 +
133 +<script>
134 +import HistoryDialog from "./dialog.vue";
135 +export default {
136 + components: {
137 + HistoryDialog,
138 + },
139 + props: {
140 + headData: {
141 + type: Object,
142 + default: null,
143 + },
144 + fileData: {
145 + type: Array,
146 + default: () => {
147 + return [];
148 + },
149 + },
150 + },
151 + data() {
152 + return {
153 + fileFormData: {
154 + uploadType: "",
155 + },
156 + fileList: [],
157 + uploadType: true,
158 + viewHistoryType: false,
159 + };
160 + },
161 + methods: {
162 + //上传
163 + upload(type) {
164 + this.fileList = [];
165 + this.fileFormData.uploadType = type;
166 + this.$refs.uploadBlock.$refs["upload-inner"].handleClick();
167 + },
168 + beforeUpload(val) {
169 + let fileSum = 0;
170 + let fileSize = 0;
171 + let fileNameArray = [];
172 + this.fileData.forEach((item) => {
173 + fileSum = Number(fileSum) + Number(item.files.length);
174 + item.files.forEach((file) => {
175 + fileSize = Number(fileSize) + Number(file.fileSize);
176 + fileNameArray.push(file.fileName);
177 + });
178 + });
179 + if (fileSum + 1 > 100) {
180 + this.$message.warning("上传文件总数最大100个！");
181 + return false;
182 + } else if (Number(fileSize) + Number(val.fileSize) / 1024 / 1024 > 100) {
183 + this.$message.warning("上传文件总大小最大100M！");
184 + return false;
185 + } else if (fileNameArray.includes(val.fileName)) {
186 + this.$message.warning("上传文件名重复！");
187 + return false;
188 + } else {
189 + return true;
190 + }
191 + },
192 + uploadFile(val) {
193 + let obj = {
194 + id: null,
195 + bizId: null,
196 + bizTypeName: null,
197 + sourceFileName: null,
198 + filePath: null,
199 + fileTypeCode: null,
200 + fileTypeName: this.fileFormData.uploadType,
201 + status: null,
202 + createTime: null,
203 + createUserId: null,
204 + createUserName: null,
205 + modifyTime: null,
206 + modifyUserId: null,
207 + modifyUserName: null,
208 + uploadRecordId: null,
209 + consignmentCode: null,
210 + file: "",
211 + bizTypeCode: this.fileFormData.uploadType,
212 + fileType: val.file.type,
213 + fileName: val.file.name,
214 + fileSize: val.file.size,
215 + index: 0,
216 + viewLoading: false,
217 + downLoading: false,
218 + delLoading: false,
219 + };
220 + let arr = this.fileData;
221 + const reader = new FileReader();
222 + reader.readAsDataURL(val.file);
223 + reader.onload = (e) => {
224 + obj.file = e.target.result;
225 + arr.forEach((item, index) => {
226 + if (item.uploadType == this.fileFormData.uploadType) {
227 + obj.index = index;
228 + item.files.push(obj);
229 + }
230 + });
231 + this.$emit("fileDataChange", arr);
232 + };
233 + },
234 + //下载
235 + downloadFile(val) {
236 + if (val.file.split(";base64,").length > 1) {
237 + const aLink = document.createElement("a");
238 + aLink.href = val.file;
239 + aLink.setAttribute("download", val.fileName); // 设置下载文件名称
240 + document.body.appendChild(aLink);
241 + aLink.click();
242 + document.body.removeChild(aLink);
243 + } else {
244 + this.zipdownload
245 + .downLoadZip(
246 + "biz-customer/attachment/downLoadFile",
247 + {
248 + name: val.fileName,
249 + path: val.filePath,
250 + },
251 + val.fileName
252 + )
253 + .then((res) => {
254 + console.log(res);
255 + });
256 + }
257 + },
258 + //删除
259 + delFile(val) {
260 + this.fileData.forEach((item) => {
261 + if (item.uploadType == val.bizTypeCode) {
262 + let arr = [];
263 + item.files.forEach((file) => {
264 + if (file.index != val.index) {
265 + arr.push(file);
266 + }
267 + });
268 + item.files = arr;
269 + }
270 + });
271 + this.$emit("fileDataChange", this.fileData);
272 + },
273 + //预览
274 + fileView(val) {
275 + // var reader = new FileReader();
276 + // reader.encoding = "UTF-8";
277 + // reader.readAsText(this.b64ToBlob(val.file));
278 + // reader.onload = function (e) {
279 + // var content = e.target.result;
280 + // let blob = new Blob([content], { type: val.fileType });
281 + // let blobURL = window.URL.createObjectURL(blob);
282 + // window.open(blobURL, "_black");
283 + // };
284 + let blob = new Blob([this.base64ConvertFile(val.file, val.fileName)], {
285 + type: val.fileType,
286 + });
287 + let blobURL = window.URL.createObjectURL(blob);
288 + window.open(blobURL, "_black");
289 + },
290 + handleUploadError(val) {},
291 + handleUploadSuccess(val) {},
292 + handleRemove() {
293 + this.fileList = [];
294 + },
295 + handleChange() {},
296 + addUpload() {
297 + this.uploadType = true;
298 + },
299 + viewHistory() {
300 + this.viewHistoryType = true;
301 + },
302 + historyClose(val) {
303 + this.viewHistoryType = false;
304 + if (val.type == "copy") {
305 + this.$refs.historyDialog.detailSearch(val.data.id).then((res) => {
306 + this.fileData.forEach((item) => {
307 + if (item.uploadType == "attachmentBizType_01") {
308 + item.files = res[0].list;
309 + } else if (item.uploadType == "attachmentBizType_02") {
310 + item.files = res[1].list;
311 + } else if (item.uploadType == "attachmentBizType_03") {
312 + item.files = [];
313 + } else if (item.uploadType == "attachmentBizType_04") {
314 + item.files = res[2].list;
315 + }
316 + });
317 + this.$emit("fileDataChange", this.fileData);
318 + });
319 + }
320 + },
321 + },
322 +};
323 +</script>
324 +
325 +<style lang="scss" scoped>
326 +@import "@/assets/styles/variables.scss";
327 +.uploadFile-title {
328 + text-align: center;
329 + height: 38px;
330 + line-height: 38px;
331 + position: relative;
332 + margin-top: 20px;
333 + .content {
334 + font-size: 16px;
335 + font-weight: 600;
336 + span {
337 + color: $fedexError;
338 + }
339 + }
340 + .el-button {
341 + position: absolute;
342 + top: 0;
343 + right: 10px;
344 + }
345 +}
346 +
347 +.uploadFile-box {
348 + margin-top: 8px;
349 + .uploadFileBoxItem {
350 + border: 1.5px solid rgba(153, 153, 153, 0.3);
351 + box-shadow: 0px 4px 0.3rem 0.5px rgba(229, 242, 248, 0.8);
352 + margin-top: 10px;
353 + background-color: #fefefe;
354 + .uploadButton {
355 + height: 45px;
356 + line-height: 45px;
357 + padding: 0 20px;
358 + border-bottom: 2px solid #e0e0e0;
359 + .requiredIcon {
360 + color: $fedexError;
361 + }
362 + }
363 + .uploadFileList {
364 + height: 45px;
365 + display: flex;
366 + justify-content: space-between;
367 + padding: 5px 0px 5px 20px;
368 + line-height: 35px;
369 + .fileName {
370 + i {
371 + display: inline-block;
372 + margin-right: 5px;
373 + }
374 + }
375 + .fileOption {
376 + .fileSize {
377 + font-size: 12px;
378 + font-weight: 400;
379 + color: #999;
380 + margin-right: 20px;
381 + }
382 + .el-button {
383 + margin-right: 16px;
384 + }
385 + }
386 + }
387 + }
388 + .fileBoxItemDisable {
389 + box-shadow: none;
390 + background-color: $formItemBackgroundColor !important;
391 + }
392 +}
393 +
394 +.tipDom {
395 + display: inline-block;
396 + font-size: 12px;
397 + line-height: 16px;
398 + padding: 7px 10px;
399 + color: #777;
400 +}
401 +</style>