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 3063 additions and 22 deletions
......@@ -17,7 +17,7 @@ export function getwaybillData(data) {
});
}
// 运单详情查询
// 运单数据详情查询
/**
* @param consignmentId * 运单id
*/
......@@ -29,13 +29,39 @@ export function getWaybillDetail(data) {
});
}
// 运单附件详情查询
/**
* @param consignmentId * 运单id
*/
export function getWaybillFileList(data) {
return request({
url: "biz-customer/attachment/query/queryInfo/" + data.consignmentId,
method: "post",
data: data
});
}
// 运单提交历史查询
/**
* @param consignmentId * 运单id
* @param page *
* @param size *
*/
export function getWaybillSubmitHistory(data) {
return request({
url: "/biz-customer/attachment/query/queryInfo/" + data.consignmentId,
url: "biz-customer/uploadRecord/queryHistoryList",
method: "post",
data: data
});
}
// 历史详情查询
/**
* @param recordId id *
*/
export function getWaybillSubmitHistoryDetail(data) {
return request({
url: "biz-customer/attachment/query/queryByRecord/" + data.recordId,
method: "post",
data: data
});
......
......@@ -358,7 +358,7 @@ input:disabled {
line-height: normal;
.el-input,
// .el-select,
.el-select,
.el-date-editor,
.el-range-editor,
.el-checkbox,
......@@ -398,7 +398,7 @@ input:disabled {
height: 100% !important;
border: none !important;
background-color: transparent;
margin-bottom: 4%;
// margin-bottom: 4%;
padding-top: 1.15rem;
// padding-right: 1.15rem;
padding-left: calc(0.6rem + 0.1875rem);
......@@ -1166,4 +1166,14 @@ input:disabled {
.tipWeight {
font-weight: 600;
text-decoration-line: underline
}
.el-popover {
.el-popconfirm {
.el-popconfirm__action {
.el-button--primary {
color: $fedexBottonColor;
}
}
}
}
\ No newline at end of file
......
......@@ -43,6 +43,7 @@ import tableHeaders from "@/assets/languages/tableHeaders";
import dictLabels from "@/assets/languages/dictLabels.js";
import settings from "./settings.js";
import * as filters from "./utils/filters.js";
import * as zipdownload from './utils/zipdownload.js'
import { toHead, numberRound, base64ConvertFile, b64ToBlob, titleCase, formatDate, alertWarningMsg, alertSuccessMsg, alertErrorMsg, alertInfoMsg } from "@/utils/index";
// 全局方法挂载
......@@ -71,6 +72,7 @@ Vue.prototype.alertWarningMsg = alertWarningMsg
Vue.prototype.alertSuccessMsg = alertSuccessMsg
Vue.prototype.alertErrorMsg = alertErrorMsg
Vue.prototype.alertInfoMsg = alertInfoMsg
Vue.prototype.zipdownload = zipdownload
Vue.prototype.msgSuccess = function (msg) {
this.$message({ showClose: true, message: msg, type: "success" });
};
......
......@@ -608,15 +608,19 @@ export function base64ConvertFile(urlData, filename) {
// 将Base64字符串转换为Blob对象
export function b64ToBlob(b64data) {
let parts = b64data.split(';base64,');
let contentType = parts[0].split(':')[1];
let raw = window.atob(parts[1]);
let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
if (b64data.split(';base64,').length > 1) {
let parts = b64data.split(';base64,');
let contentType = parts[0].split(':')[1];
let raw = window.atob(parts[1]);
let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
} else {
return false
}
return new Blob([uInt8Array], { type: contentType });
}
//提示语公共方法
......
......@@ -23,20 +23,39 @@ const mimeMap = {
}
const baseUrl = process.env.VUE_APP_BASE_API; //接口地址
export function downLoadZip(str, data, filename) {
export function downLoadZip(str, data, filename, type) {
var url = baseUrl + str;
return new Promise((resolve, reject) => {
axios({
method: "get",
url: url,
params: {
cusFileId: data,
},
params: data,
responseType: "blob",
headers: { Authorization: getToken() },
})
.then((res) => {
resolveBlob(res, mimeMap.zip, filename);
let fileType = ''
let fileName = ''
if (filename != '') {
fileName = filename
} else {
if (res.headers['content-disposition']) {
var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
var contentDisposition = decodeURI(res.headers['content-disposition'])
var result = patt.exec(contentDisposition)
fileName = result[0].split('=')[1]
} else {
fileName = 'errorFile'
}
}
if (type != '') {
fileType = mimeMap[type]
} else {
if (res.headers['content-type']) {
fileType = res.headers['content-type']
}
}
resolveBlob(res, fileType, fileName);
resolve(res);
})
.catch((err) => {
......@@ -61,16 +80,16 @@ export function downLoadViewPdf(str, id, title) {
type: "application/pdf",
});
let url = window.URL.createObjectURL(blob);
var win= window.open(url, "_blank"); // 打开新的标签页
var win = window.open(url, "_blank"); // 打开新的标签页
var setTitle= setInterval(() => {
if (win.document.title!=""){
var setTitle = setInterval(() => {
if (win.document.title != "") {
clearInterval("setTitle");
}else{
} else {
win.document.title = title;
}
},500);
}, 500);
// var fileURL = URL.createObjectURL(blob);
// var win = window.open();
// 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>');
......
<template>
<div class="search-wrap">
<div class="search-box">
<el-form
class="fedexFormStyle queryTextarea-box"
ref="sreachForm"
:model="sreachFormData"
label-position="top"
size="small"
:rules="rules"
>
<el-row :gutter="6">
<!-- 运单号 -->
<el-col :span="5">
<Formitem label="TRACKING NUMBER" prop="consignmentCode">
<el-input
type="textarea"
class="inputShadow"
id="inputInner--consignmentCode"
resize="none"
:rows="consignmentCodeRows"
v-model="sreachFormData.consignmentCode"
clearable
placeholder=""
@focus="consignmentCodeFocus"
@blur="consignmentCodeBlur"
></el-input>
<el-badge
v-if="consignmentCodeNum() > 1"
type="info"
:value="`+${consignmentCodeNum()}`"
class="item texttareaTip"
></el-badge>
</Formitem>
</el-col>
<!-- 创建时间 -->
<el-col :span="5">
<Formitem
label="CREATION TIME(from)-CREATION TIME(to)"
prop="createTime"
:activeType="true"
>
<el-date-picker
class="inputInner--createTime"
id="inputInner--createTime"
v-model="sreachFormData.createTime"
type="daterange"
align="left"
format="yyyy-MM-dd"
prefix-icon="none"
value-format="yyyy-MM-dd"
range-separator="-"
start-placeholder=""
end-placeholder=""
:picker-options="pickerOptions"
@blur="datePickerBlur"
@change="dateChange"
>
</el-date-picker>
</Formitem>
</el-col>
<!-- 上传状态 -->
<el-col :span="5">
<Formitem label="UPLOAD STATUS" prop="statusCode">
<el-select
type="text"
id="inputInner--statusCode"
v-model="sreachFormData.statusCode"
clearable
filterable
placeholder=""
>
<el-option
v-for="(item, idx) in dictData.uploadStatus"
:key="idx"
:label="item.description"
:value="item.code"
></el-option>
<el-option label=" " value="null"></el-option>
</el-select>
</Formitem>
</el-col>
<el-col :span="2" class="search-btn">
<el-button :disabled="loadings.tableLoading" @click="search(0)">
<img src="../../assets/images/select.svg" alt="" />
</el-button>
</el-col>
</el-row>
</el-form>
<div class="textCenter export-btn">
<span>
<el-button
class="addButton"
type="text"
@click="editData('add', { consignmentCode: '', id: null })"
>
ADD
</el-button>
<el-popover placement="top" width="430" trigger="hover">
<div>
If the waybill you want too upload thecustoms clearance files
<br />
is not listed,please click here to add the tracking number.
</div>
<svg-icon
slot="reference"
class="el-icon-user-solid"
icon-class="fedexQuestion"
></svg-icon>
</el-popover>
</span>
<!-- <el-button class="entrySaveButton" style="margin-left: 10px"
>Export</el-button
> -->
</div>
</div>
<el-table
:data="tableData"
style="width: 100%"
:height="tableMaxheight"
:row-class-name="tableRowClassName"
v-loading="loadings.tableLoading"
class="queryTable"
@sort-change="handleSortChange"
>
<el-table-column
v-for="(item, index) in tableHeader"
:key="index"
:prop="item.prop"
:label="item.label"
:min-width="item.width"
:fixed="item.fixed ? item.fixed : false"
:align="item.align"
:sortable="item.sort"
:show-overflow-tooltip="true"
>
<template slot="header" slot-scope="scope">
<div style="line-height: 15px" v-html="item.label"></div>
</template>
<template slot-scope="scope">
<div v-if="item.prop == 'consignmentCode'">
<span
class="consignmentCodeStyle"
@click="editData('edit', scope.row)"
>{{ scope.row.consignmentCode }}</span
>
</div>
<div v-else-if="item.prop == 'recipientContactName'">
<span
v-if="
scope.row.userUuid == $store.getters.userData.userUuid &&
scope.row.shipperAccount == $store.getters.userData.accountNo
"
>{{ scope.row.recipientContactName }}</span
>
</div>
<div v-else-if="item.prop == 'recipientCompany'">
<span
v-if="
scope.row.userUuid == $store.getters.userData.userUuid &&
scope.row.shipperAccount == $store.getters.userData.accountNo
"
>{{ scope.row.recipientCompany }}</span
>
</div>
<div v-else-if="item.prop == 'shipperCountry'">
<span
v-if="
scope.row.uuid == $store.getters.userData.userUuid &&
scope.row.shipperAccount == $store.getters.userData.accountNo
"
>{{ scope.row.shipperCountry }}</span
>
</div>
<div v-else-if="item.prop == 'createUserName'">
<div
:class="{
afterCreateUserName:
scope.row.createUserName !=
$store.getters.userData.userName &&
scope.row.createUserName != null &&
scope.row.createUserName != ''
? true
: false,
}"
>
{{ scope.row.createUserName }}
</div>
</div>
<span v-else>{{ scope.row[item.prop] }}</span>
</template>
</el-table-column>
<!-- <el-table-column
prop="option"
label="OPERATE"
:min-width="100"
:fixed="false"
align="left"
>
<template slot-scope="scope">
<el-button type="text" @click="editData('edit', scope.row)"
>view</el-button
>
</template>
</el-table-column> -->
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page.curPage"
:page-sizes="[20, 30, 50, 100]"
:page-size="page.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="page.total"
>
</el-pagination>
</div>
</template>
<script>
import { getwaybillData } from "@/api/waybillInquiry.js";
import { getUploadStatus } from "@/api/system/dictionary.js";
let min = "";
let start = "";
let end = "";
let three = 180 * 24 * 3600 * 1000;
function disabledDate(time) {
let nowTime = new Date().getTime();
let threeMonths = nowTime - three;
if (min != "") {
start = min - 7 * 24 * 3600 * 1000;
end = min + 7 * 24 * 3600 * 1000;
return (
time.getTime() <= threeMonths ||
time.getTime() <= start ||
time.getTime() >= end ||
time.getTime() > nowTime
);
} else {
return time.getTime() <= threeMonths || time.getTime() > nowTime;
}
}
function onPick({ maxDate, minDate }) {
min = new Date(minDate).getTime();
document
.getElementsByClassName("el-date-editor")[0]
.__vue__.pickerOptions.disabledDate(new Date());
if (maxDate != null) {
minDate = "";
}
}
export default {
name: "WaybillInquiry",
data() {
return {
sreachFormData: {
consignmentCode: "",
createTime: [],
statusCode: null,
sort: "",
},
tableData: [],
tableHeader: [
{
label: "TRACKING<br/>NUMBER",
prop: "consignmentCode",
width: 150,
align: "left",
},
{
label: "RECIPIENT<br/>NAME",
prop: "recipientContactName",
width: 150,
align: "left",
},
{
label: "RECIPIENT<br/>COMPANY NAME",
prop: "recipientCompany",
width: 150,
align: "left",
},
{
label: "SHIPPER COUNTRY/<br/>TERRITORY",
prop: "originCountry",
width: 150,
align: "left",
},
{
label: "DOC/ITEM",
prop: "docNondocFlag",
width: 150,
align: "left",
},
{
label: "CREATOR",
prop: "createUserName",
width: 150,
align: "left",
},
{
label: "CREATION TIME",
prop: "createTime",
width: 150,
align: "left",
},
{
label: "UPLOAD TIME",
prop: "modifyTime",
width: 150,
align: "left",
},
{
label: "UPLOAD STATUS",
prop: "statusName",
width: 150,
align: "left",
},
],
page: {
curPage: 1,
pageSize: 20,
total: 0, //数据总和
},
rules: {},
dictData: {
uploadStatus: [],
},
pickerOptions: {
disabledDate: disabledDate,
onPick: onPick,
},
consignmentCodeRows: 1,
loadings: {
tableLoading: false,
},
status: 0,
};
},
computed: {
tableMaxheight() {
return window.innerHeight - 300;
},
},
created() {
this.getDict();
let arr = [];
arr.push(
this.formatDate(new Date().getTime() - 2 * 24 * 3600 * 1000).split(" ")[0]
);
arr.push(this.formatDate(new Date().getTime()).split(" ")[0]);
this.sreachFormData.createTime = arr;
this.search(0);
},
activated() {
if (this.status == 0) {
this.status = 1;
} else {
this.search(1);
}
},
methods: {
search(val) {
this.tableData = [];
this.loadings.tableLoading = true;
let obj = this.datainfo();
if (val == 0) {
obj.curPage = 1;
}
getwaybillData(obj)
.then((res) => {
if (res.code === 200) {
if (res.data.list != null) {
this.tableData = res.data.list;
} else {
this.tableData = [];
}
this.page.total = res.data.total;
} else {
this.msgWarning(res.message);
}
this.loadings.tableLoading = false;
})
.catch((err) => {
console.log(err);
this.loadings.tableLoading = false;
});
},
editData(type, data) {
this.$router.push({
name: "UploadDetail",
params: {
id: data.id,
consignmentCode: data.consignmentCode,
type: type,
},
});
},
datainfo() {
let obj = {
consignmentCode: this.sreachFormData.consignmentCode.replace(
/[\n]/g,
";"
),
createTimeFrom: "",
createTimeTo: "",
statusCode: this.sreachFormData.statusCode,
sort: this.sreachFormData.sort,
curPage: this.page.curPage,
pageSize: this.page.pageSize,
total: this.page.total,
};
if (this.sreachFormData.createTime.length > 0) {
obj.createTimeFrom = this.sreachFormData.createTime[0];
obj.createTimeTo = this.sreachFormData.createTime[1];
}
return obj;
},
handleSortChange({ column, prop, order }) {},
// 改变页面条数
handleSizeChange(val) {
this.page.pageSize = val;
this.search(1);
},
// 切换页码
handleCurrentChange(val) {
this.page.curPage = val;
this.search(1);
},
//文本域切换
consignmentCodeFocus() {
this.consignmentCodeRows = 5;
this.$nextTick(() => {
let inputInner = document.querySelector(
"#inputInner--consignmentCode"
).parentNode;
let inputOuter = document.querySelector("#inputOuter--consignmentCode");
inputInner.classList.add("consignmentCode-textarea");
document.querySelector("#inputInner--consignmentCode").focus();
setTimeout(() => {
inputOuter.classList.add("active");
inputOuter.classList.add("activeBorder");
}, 100);
});
},
consignmentCodeBlur(val) {
this.consignmentCodeRows = 1;
this.$nextTick(() => {
let inputInner = document.querySelector(
"#inputInner--consignmentCode"
).parentNode;
inputInner.classList.remove("consignmentCode-textarea");
});
let arr = [];
val.target.value
.replace(/[\n\，\；\;]/g, ";")
.replace(/[\t]/g, "")
.split(";")
.forEach((item) => {
if (item != "" && item != null) {
arr.push(item.trim());
}
});
this.sreachFormData.consignmentCode = arr.join("\n");
},
consignmentCodeNum() {
if (
this.sreachFormData.consignmentCode != null &&
this.sreachFormData.consignmentCode != ""
) {
return this.sreachFormData.consignmentCode.split("\n").length;
} else {
return 0;
}
},
datePickerBlur() {
min = "";
},
dateChange(val) {
if (val == null) {
this.$nextTick(() => {
this.sreachFormData.createTime = [];
});
}
},
getDict() {
if (this.dictData.uploadStatus.length == 0) {
getUploadStatus()
.then((res) => {
if (res.code === 200) {
this.dictData.uploadStatus = res.data;
}
})
.catch((err) => {
console.log(err);
});
}
},
// 改变偶数行背景色
tableRowClassName({ row, rowIndex }) {
if ((rowIndex + 1) % 2 === 0) {
return "bgc-row";
}
return "";
},
},
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";
.search-wrap {
height: calc(100% - 28px);
margin: 12px 12px 16px 16px;
background-color: #fff;
padding: 20px;
.search-box {
margin-bottom: 12px;
position: relative;
.export-btn {
position: absolute;
right: 12px;
top: 0;
}
}
::v-deep .el-table .bgc-row {
background: #f2f2f2;
}
.el-pagination {
text-align: right;
margin-top: 10px;
::v-deep .el-input.is-focus .el-input__inner {
border: 1px solid $fedexColor;
}
::v-deep .el-input .el-input__inner:hover {
border: 1px solid $fedexColor;
}
::v-deep .el-input__inner:focus {
border: 1px solid $fedexColor;
}
::v-deep .el-pager li.active {
color: $fedexColor;
}
::v-deep .el-pager li:hover {
color: $fedexColor;
}
}
// .el-table__body-wrapper {
// overflow: auto;
// }
}
.search-btn {
::v-deep .el-button {
border: 1px solid #cccccc;
height: 50px;
width: 90px;
.el-icon-search {
color: #cccccc;
font-size: 20px;
}
}
.el-button:hover,
.el-button:focus {
background: #f3f1f1;
}
}
.texttareaTip {
position: absolute;
top: 50%;
right: 20px;
transform: translate(0, -50%);
z-index: 10;
}
.consignmentCode-textarea {
position: absolute;
top: 25px;
left: 1px;
z-index: 10;
min-height: 170px !important;
border: 2px solid $fedexBorder;
background-color: $fedexTablebackgroundColor;
transition: all 0.2s ease;
}
.queryTable {
::v-deep .cell {
// text-align: center;
// white-space: pre-line;
}
}
.addButton {
display: inline-block;
font-size: 18px !important;
margin-right: 2px;
}
.afterCreateUserName:before {
content: "*";
color: $fedexColor;
font-weight: 700;
}
.consignmentCodeStyle {
font-weight: 700;
color: $fedexButton;
cursor: pointer;
}
</style>
<template>
<el-dialog
class="uploadHistoryDialog"
title="View upload history"
:visible.sync="dialogVisible"
width="65%"
:show-close="true"
:close-on-click-modal="false"
center
v-loading="loadings.dialogLoading"
>
<div class="dialogContent">
<div class="dialogTitle">
Import pre-clearance document upload
<!-- <el-popover
placement="top"
width="300"
trigger="hover"
content="/\/\/\/\/\"
>
<i slot="reference" class="el-icon-question questionIcon" />
</el-popover> -->
</div>
<el-table
class="queryTable uploadHistoryTable"
:data="tableData"
style="width: 100%"
:max-height="tableMaxheight"
v-loading="loadings.tableLoading"
row-key="index"
:expand-row-keys="expandRowKeys"
>
<el-table-column type="expand" width="1">
<template slot-scope="scope">
<!-- <div
class="empty"
v-if="scope.row.file.length == 0"
v-loading="scope.row.loading"
>
Empty
</div> -->
<div v-loading="scope.row.loading" style="margin-top: 5px">
<div
class="fileItem"
v-for="(item, index) in scope.row.files"
:key="index"
>
<div class="fileItemTitle">{{ item.title }}</div>
<div
class="filtItemData"
v-for="(file, idx) in item.list"
:key="idx"
>
<div class="filtItemData-name">
<i class="el-icon-document" />{{ file.fileName }}
</div>
<div class="filtItemData-option">
<span>{{ file.fileSize }}</span>
<!-- <el-button type="text" @click="viewFile(file)"
>view</el-button
> -->
<el-button
v-if="
scope.row.modifyUserId == $store.getters.userData.id
"
type="text"
@click="downloadFile(file)"
>
DOWNLOAD
</el-button>
</div>
</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column type="index" width="100" label="NUMBER" align="center">
</el-table-column>
<el-table-column
v-for="(item, index) in tableHeader"
:key="index"
:prop="item.prop"
:label="item.label"
:width="item.width"
:fixed="item.fixed ? item.fixed : false"
:align="item.align"
:sortable="item.sort"
>
<template slot-scope="scope">
<div v-if="item.prop == 'action'">
<el-button
v-if="scope.row.modifyUserId == $store.getters.userData.id"
type="text"
@click="copyData(scope.row)"
>UPDATE</el-button
>
</div>
<span v-else>{{ scope.row[item.prop] }}</span>
</template>
</el-table-column>
<el-table-column
prop="option"
label=""
:fixed="false"
align="right"
width="120"
>
<template slot-scope="scope">
<div class="historyOption">
<el-button
type="text"
@click="
expandRowKeys.includes(scope.row.index)
? closeExpand()
: expandChange(scope.row)
"
>
<span>
<span v-if="expandRowKeys.includes(scope.row.index)"
><svg-icon icon-class="upIcon" />CLOSE</span
>
<span v-else><svg-icon icon-class="downIcon" />EXPAND</span>
</span>
</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div align="center" style="margin-bottom: 20px">
<el-button class="entrySaveButton" size="medium" @click="closeDialog">
{{ $t("common.cancleBtn") }}
</el-button>
</div>
</el-dialog>
</template>
<script>
import {
getWaybillSubmitHistory,
getWaybillSubmitHistoryDetail,
} from "@/api/waybillInquiry.js";
export default {
props: {
dialogVisible: {
type: Boolean,
default: false,
},
headData: {
type: Object,
default: null,
},
},
data() {
return {
tableData: [],
expandRowKeys: [],
tableHeader: [
{
label: "UPLOAD TEIM",
prop: "modifyTime",
width: 0,
align: "left",
},
{
label: "UPLOAD STATUS",
prop: "statusName",
width: 0,
align: "left",
},
{
label: "UPLOADER",
prop: "modifyUserName",
width: 0,
align: "left",
},
{
label: "ACTION",
prop: "action",
width: 180,
align: "left",
},
],
loadings: {
dialogLoading: false,
tableLoading: false,
},
tableMaxheight: 300,
};
},
watch: {
dialogVisible(val) {
if (val) {
this.search();
}
},
},
methods: {
//查询
search() {
this.tableData = [];
this.tableLoading = true;
getWaybillSubmitHistory({
consignmentId: this.headData.id,
page: 1,
size: 9999999,
})
.then((res) => {
if (res.code === 200) {
if (res.data.list.length > 0) {
res.data.list.forEach((item, idx) => {
let obj = item.uploadRecord;
obj.files = [
{ title: "WAYBILL", list: [] },
{ title: "INVOICE", list: [] },
{ title: "OTHER FILES ", list: [] },
];
obj.index = idx;
obj.loading = false;
this.tableData.push(obj);
});
} else {
this.tableData = [];
}
}
this.tableLoading = false;
})
.catch((err) => {
console.log(err);
this.tableLoading = false;
});
},
detailSearch(id) {
return new Promise((resolve, reject) => {
getWaybillSubmitHistoryDetail({ recordId: id })
.then((res) => {
if (res.code === 200) {
let wab = [];
let inv = [];
let pink = [];
let oth = [];
res.data.forEach((item) => {
item.file = item.filePath;
if (item.bizTypeCode == "attachmentBizType_01") {
item.index = wab.length == 0 ? 0 : wab.length - 1;
wab.push(item);
} else if (item.bizTypeCode == "attachmentBizType_02") {
item.index = inv.length == 0 ? 0 : inv.length - 1;
inv.push(item);
} else if (item.bizTypeCode == "attachmentBizType_03") {
item.index = pink.length == 0 ? 0 : pink.length - 1;
pink.push(item);
} else if (item.bizTypeCode == "attachmentBizType_04") {
item.index = oth.length == 0 ? 0 : oth.length - 1;
oth.push(item);
}
});
let arr = [
{ title: "WAYBILL", list: wab },
{ title: "INVOICE", list: inv },
{ title: "OTHER FILES ", list: oth },
];
this.tableData.forEach((item) => {
if (item.id == id) {
item.files = arr;
}
});
resolve(arr);
} else {
reject();
}
})
.catch((err) => {
console.log(err);
reject();
});
});
},
copyData(data) {
this.closeDialog(data, "copy");
},
viewFile(val) {},
downloadFile(val) {},
expandChange(val) {
let total = 0;
val.files.forEach((item) => {
total = total + item.list.length;
});
if (total == 0) {
val.loading = true;
this.detailSearch(val.id).then(() => {
this.expandRowKeys = [];
this.$nextTick(() => {
this.expandRowKeys = [val.index];
});
val.loading = false;
});
} else {
this.expandRowKeys = [];
this.$nextTick(() => {
this.expandRowKeys = [val.index];
});
}
},
closeExpand() {
this.expandRowKeys = [];
},
closeDialog(val = null, type = "close") {
this.expandRowKeys = [];
this.$emit("close", { type: type, data: val });
},
},
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";
.dialogContent {
margin-bottom: 30px;
.dialogTitle {
font-size: 14px;
font-weight: 600;
color: #333;
margin-bottom: 10px;
}
}
.historyOption {
.el-button {
display: inline-block;
margin-left: 20px;
}
}
.fileItem {
background-color: $formItemBackgroundColor;
margin-bottom: 5px;
.fileItemTitle {
padding: 10px 15px;
font-size: 14px;
font-weight: 600;
color: #333;
border-bottom: 1px solid #e0e0e0;
}
.filtItemData {
display: flex;
justify-content: space-between;
height: 40px;
line-height: 40px;
padding: 0 15px;
.filtItemData-name {
font-size: 14px;
font-weight: 400;
color: #333;
i {
display: inline-block;
margin-right: 10px;
}
}
.filtItemData-option {
span {
display: inline-block;
margin-right: 22px;
font-size: 12px;
font-weight: 400;
color: #999;
}
}
}
}
.empty {
padding: 20px;
text-align: center;
font-weight: 700;
font-size: 16px;
}
</style>
<template>
<div>
<el-form
class="fedexFormStyle queryTextarea-box"
ref="sreachForm"
:model="headData"
label-position="top"
size="small"
:rules="disabled ? {} : rules"
>
<div
class="headDataBox"
v-if="
headData.id == null ||
headData.id == '0' ||
(headData.userUuid != $store.getters.userData.userUuid &&
headData.shipperAccount != $store.getters.userData.accountNo)
"
>
<div class="formRowTitle">
<div class="formRowTitle-name">Waybill Information</div>
</div>
<el-row :gutter="5">
<!-- 运单号 -->
<el-col :span="6">
<Formitem
label="TRACKING NUMBER"
prop="consignmentCode"
type="edit"
>
<el-input
v-model.trim="headData.consignmentCode"
type="text"
id="inputInner-edit-consignmentCode"
clearable
placeholder=""
:disabled="formDisable.consignmentCodeDisabled || disabled"
maxlength="12"
@clear="consignmentCodeClear"
@blur="consignmentCodeBlur"
/>
</Formitem>
</el-col>
<!-- 取件日期 -->
<!-- <el-col :span="6" v-show="false">
<Formitem label="SHIP DATE" prop="shipDate" type="edit">
<el-date-picker
v-model="headData.shipDate"
id="inputInner-edit-shipDate"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
type="date"
placeholder=""
prefix-icon="none"
:disabled="true"
></el-date-picker>
</Formitem>
</el-col> -->
<!-- 发货人计费账号 -->
<el-col :span="6">
<Formitem
label="SHIPPER ACCPUNT"
prop="userInputShipperAccount"
type="edit"
>
<el-input
v-model.trim="headData.userInputShipperAccount"
type="text"
id="inputInner-edit-userInputShipperAccount"
clearable
placeholder=""
:disabled="
formDisable.userInputShipperAccountDisabled || disabled
"
maxlength="9"
@clear="userInputShipperAccountBlurClear"
@blur="userInputShipperAccountBlur"
/>
</Formitem>
</el-col>
<!-- 原产国 -->
<el-col :span="6">
<Formitem
label="ORGIN COUNTRY/TERRITORY"
prop="userInputOriginCountryCode"
type="edit"
>
<el-select
v-model="headData.userInputOriginCountryCode"
type="text"
id="inputInner-edit-userInputOriginCountryCode"
clearable
filterable
value-key="id"
placeholder=""
:disabled="
formDisable.userInputOriginCountryCodeDisabled || disabled
"
@change="userOriginCountryChange"
>
<el-option
v-for="(item, idx) in countryDict"
:key="idx"
:label="item.englishName"
:value="item.code"
/>
</el-select>
</Formitem>
</el-col>
<!-- 目的国 -->
<el-col :span="6">
<Formitem
label="DESTINATION COUNTRY/TERRITORY"
prop="destinationCountryCode"
type="edit"
>
<el-select
v-model="headData.destinationCountryCode"
type="text"
id="inputInner-edit-destinationCountryCode"
clearable
filterable
value-key="id"
placeholder=""
:disabled="
formDisable.destinationCountryCodeDisabled || disabled
"
>
<el-option
v-for="(item, idx) in countryDict"
:key="idx"
:label="item.englishName"
:value="item.code"
/>
</el-select>
</Formitem>
</el-col>
</el-row>
</div>
<div
v-else
:class="{ headDataBox: true, 'headDataBox-Hidden': !dataBoxTtype }"
>
<div>
<div class="formRowTitle">
<div class="formRowTitle-name">Waybill information</div>
<div class="formRowTitle-option">
<el-button type="text" @click="dataHidden">
<span v-if="!dataBoxTtype">
<svg-icon icon-class="downIcon"></svg-icon>EXPAND
</span>
<span v-else
><svg-icon icon-class="upIcon"></svg-icon>CLOSE</span
>
</el-button>
</div>
</div>
<el-row :gutter="5">
<!-- 取件时间 -->
<el-col :span="6">
<Formitem label="SHIP DATE" prop="shipDate" type="edit">
<el-date-picker
v-model="headData.shipDate"
id="inputInner-edit-shipDate"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
type="date"
placeholder=""
prefix-icon="none"
:disabled="disabled"
/>
</Formitem>
</el-col>
<!-- 发货人计费账号 -->
<el-col :span="6">
<Formitem
label="SHIPPER ACCOUNT"
prop="shipperAccount"
type="edit"
>
<el-input
v-model="headData.shipperAccount"
type="text"
id="inputInner-edit-shipperAccount"
clearable
placeholder=""
:disabled="disabled"
/>
</Formitem>
</el-col>
<!-- 件数 -->
<el-col :span="6">
<Formitem label="PIECES" prop="pieces" type="edit">
<el-input
v-model="headData.pieces"
type="text"
id="inputInner-edit-pieces"
clearable
placeholder=""
:disabled="disabled"
/>
</Formitem>
</el-col>
<!-- 重量/重量单位 -->
<el-col :span="6" class="fomrItem-flex">
<Formitem
class="fomrItem-flex-left"
label="WEIGHT"
prop="weight"
type="edit"
>
<el-input
v-model="headData.weight"
type="text"
id="inputInner-edit-weight"
clearable
placeholder=""
:disabled="disabled"
/>
</Formitem>
<div
:class="{
'fomrItem-flex-right': true,
'fomrItem-flex-right-disabled': disabled,
}"
>
<div>{{ headData.weightunit }}</div>
</div>
</el-col>
</el-row>
<el-row :gutter="5">
<!-- 申报价格/申报币制 -->
<el-col :span="6" class="fomrItem-flex">
<Formitem
class="fomrItem-flex-left"
label="CUSTOMS VALUE"
prop="customsValue"
type="edit"
>
<el-input
v-model="headData.customsValue"
type="text"
id="inputInner-edit-customsValue"
clearable
placeholder=""
:disabled="disabled"
/>
</Formitem>
<div
:class="{
'fomrItem-flex-right': true,
'fomrItem-flex-right-disabled': disabled,
}"
>
<div>{{ headData.customsCurrency }}</div>
</div>
</el-col>
<!-- 发货联系人姓名 -->
<el-col :span="6">
<Formitem
label="SHIPPER REFERENCE"
prop="shipperReference"
type="edit"
>
<el-input
v-model="headData.shipperReference"
type="text"
id="inputInner-edit-shipperReference"
clearable
placeholder=""
:disabled="disabled"
/>
</Formitem>
</el-col>
</el-row>
</div>
<div>
<div class="formRowTitle">
<div class="formRowTitle-name">Shipper information</div>
</div>
<el-row :gutter="5">
<!-- 发货联系人姓名 -->
<el-col :span="6">
<Formitem
label="CONTACT NAME"
prop="shipperContactName"
type="edit"
>
<el-tooltip
class="item"
effect="dark"
:content="headData.shipperContactName"
placement="top"
>
<el-input
v-model="headData.shipperContactName"
type="text"
id="inputInner-edit-shipperContactName"
clearable
placeholder=""
:disabled="disabled"
/>
</el-tooltip>
</Formitem>
</el-col>
<!-- 发货人公司 -->
<el-col :span="6">
<Formitem label="COMPANY" prop="shipperCompany" type="edit">
<el-tooltip
class="item"
effect="dark"
:content="headData.shipperCompany"
placement="top"
>
<el-input
v-model="headData.shipperCompany"
type="text"
id="inputInner-edit-shipperCompany"
clearable
placeholder=""
:disabled="disabled"
/>
</el-tooltip>
</Formitem>
</el-col>
<!-- 发货人地址 -->
<el-col :span="6">
<Formitem label="ADDRESS" prop="shipperAddrLine" type="edit">
<el-tooltip
class="item"
effect="dark"
:content="headData.shipperAddrLine"
placement="top"
>
<el-input
v-model="headData.shipperAddrLine"
type="text"
id="inputInner-edit-shipperAddrLine"
clearable
placeholder=""
:disabled="disabled"
/>
</el-tooltip>
</Formitem>
</el-col>
<!-- 发货人邮政编码 -->
<el-col :span="6">
<Formitem
label="POSTAL CODE"
prop="shipperPostalCode"
type="edit"
>
<el-input
v-model="headData.shipperPostalCode"
type="text"
id="inputInner-edit-shipperPostalCode"
clearable
placeholder=""
:disabled="disabled"
></el-input>
</Formitem>
</el-col>
</el-row>
<el-row :gutter="5">
<!-- 发货人城市 -->
<el-col :span="6">
<Formitem label="CITY" prop="shipperCity" type="edit">
<el-tooltip
class="item"
effect="dark"
:content="headData.shipperCity"
placement="top"
>
<el-input
v-model="headData.shipperCity"
type="text"
id="inputInner-edit-shipperCity"
clearable
placeholder=""
:disabled="disabled"
/>
</el-tooltip>
</Formitem>
</el-col>
<!-- 发货人国家/原产国 -->
<el-col :span="6">
<Formitem
label="COUNTRY/TERRITORY"
prop="originCountry"
type="edit"
>
<el-input
v-model="headData.originCountry"
type="text"
id="inputInner-edit-originCountry"
clearable
placeholder=""
:disabled="disabled"
/>
<!-- <el-select
v-model="headData.originCountry"
type="text"
id="inputInner-edit-originCountry"
clearable
placeholder=""
:disabled="disabled"
>
<el-option label="1" value="1"></el-option>
</el-select> -->
</Formitem>
</el-col>
</el-row>
</div>
<div>
<div class="formRowTitle">
<div class="formRowTitle-name">Recipient information</div>
</div>
<el-row :gutter="5">
<!-- 收件联系人姓名 -->
<el-col :span="6">
<Formitem
label="CONTACT NAME"
prop="recipientContactName"
type="edit"
>
<el-tooltip
class="item"
effect="dark"
:content="headData.recipientContactName"
placement="top"
>
<el-input
v-model="headData.recipientContactName"
type="text"
id="inputInner-edit-recipientContactName"
clearable
placeholder=""
:disabled="disabled"
/>
</el-tooltip>
</Formitem>
</el-col>
<!-- 收件人公司 -->
<el-col :span="6">
<Formitem label="COMPANY" prop="recipientCompany" type="edit">
<el-tooltip
class="item"
effect="dark"
:content="headData.recipientCompany"
placement="top"
>
<el-input
v-model="headData.recipientCompany"
type="text"
id="inputInner-edit-recipientCompany"
clearable
placeholder=""
:disabled="disabled"
/>
</el-tooltip>
</Formitem>
</el-col>
<!-- 收件人手机号 -->
<!-- <el-col :span="6">
<Formitem label="PHONE NUMBER" prop="recipientPhone" type="edit">
<el-input
v-model="headData.recipientPhone"
type="text"
id="inputInner-edit-recipientPhone"
clearable
placeholder=""
:disabled="disabled"
></el-input>
</Formitem>
</el-col> -->
<!-- 收件人地址 -->
<el-col :span="6">
<Formitem label="ADDRESS" prop="recipientAddrLine" type="edit">
<el-tooltip
class="item"
effect="dark"
:content="headData.recipientAddrLine"
placement="top"
>
<el-input
v-model="headData.recipientAddrLine"
type="text"
id="inputInner-edit-recipientAddrLine"
clearable
placeholder=""
:disabled="disabled"
/>
</el-tooltip>
</Formitem>
</el-col>
<!-- 收件人邮政编码 -->
<el-col :span="6">
<Formitem
label="POSTAL CODE"
prop="recipientPostalCode"
type="edit"
>
<el-input
v-model="headData.recipientPostalCode"
type="text"
id="inputInner-edit-recipientPostalCode"
clearable
placeholder=""
:disabled="disabled"
></el-input>
</Formitem>
</el-col>
</el-row>
<el-row :gutter="5">
<!-- 收件人城市 -->
<el-col :span="6">
<Formitem label="CITY" prop="recipientCity" type="edit">
<el-tooltip
class="item"
effect="dark"
:content="headData.recipientCity"
placement="top"
>
<el-input
v-model="headData.recipientCity"
type="text"
id="inputInner-edit-recipientCity"
clearable
placeholder=""
:disabled="disabled"
/>
</el-tooltip>
</Formitem>
</el-col>
<!-- 收件人国家/目的国 -->
<el-col :span="6">
<Formitem
label="COUNTRY/TERRITORY"
prop="destinationCountry"
type="edit"
>
<el-input
v-model="headData.destinationCountry"
type="text"
id="inputInner-edit-destinationCountry"
clearable
placeholder=""
:disabled="disabled"
/>
<!-- <el-select
v-model="headData.destinationCountry"
type="text"
id="inputInner-edit-destinationCountry"
clearable
placeholder=""
:disabled="disabled"
>
<el-option label="1" value="1"></el-option>
</el-select> -->
</Formitem>
</el-col>
</el-row>
</div>
</div>
</el-form>
<TipDialog
ref="tipDialog"
:dialogVisible="tipVisible"
:tipcontent="tipcontent"
:typeStatus="tipStatus"
/>
</div>
</template>
<script>
import { addWaybill } from "@/api/waybillInquiry.js";
import TipDialog from "./tipDialog.vue";
export default {
components: {
TipDialog,
},
props: {
routeType: {
type: String,
default: "",
},
headData: {
type: Object,
default: null,
},
disabled: {
type: Boolean,
default: false,
},
},
data() {
return {
rules: {
consignmentCode: [
{
required: true,
trigger: "blur",
message: "The tracking number cannot be empty!",
},
{
validator: (rule, value, callback) => {
if (value != null && value != "") {
let reg = /[^\d]/;
if (value.length != 9 && value.length != 12) {
callback("TRACKING NUMBER需为12位！");
}
// else if (reg.test(value)) {
// callback("TRACKING NUMBER需为数字！");
// }
else {
callback();
}
} else {
callback();
}
},
trigger: "blur",
},
],
userInputShipperAccount: [
{
required: false,
trigger: "blur",
message: "The shipper account cannot be empty!",
},
{
validator: (rule, value, callback) => {
if (value != null && value != "") {
let reg = /[^\d]/;
if (value.length < 9) {
callback("shipper accpunt需为9位！");
} else if (reg.test(value)) {
callback("shipper accpunt需为数字！");
} else {
callback();
}
} else {
callback();
}
},
trigger: "blur",
},
],
userInputOriginCountryCode: [
{
required: false,
trigger: "change",
message: "The orgin country/territory cannot be empty!",
},
],
destinationCountryCode: [
{
required: false,
trigger: "change",
message: "The destination country/territory cannot be empty!",
},
],
},
formDisable: {
consignmentCodeDisabled: false,
userInputShipperAccountDisabled: true,
userInputOriginCountryCodeDisabled: true,
destinationCountryCodeDisabled: true,
},
oldData: {
id: "",
consignmentCode: "",
userInputShipperAccount: "",
},
countryDict: [],
actvieEntryData: null,
tipVisible: false,
tipcontent: "",
tipStatus: 1,
dataBoxTtype: false,
};
},
created() {
this.countryDict = this.$store.getters.dictData.country;
},
methods: {
//运单号查询
consignmentCodeBlur(val) {
if (val.target.value != null && val.target.value != "") {
let obj = {
consignmentCode: val.target.value,
shipperAccount: "",
};
this.$nextTick(() => {
this.$refs.sreachForm.clearValidate();
});
if (this.headData.consignmentCode != this.oldData.consignmentCode) {
this.addApi(obj).then((res) => {
this.dataInfo(res.data, "code");
});
}
} else {
this.formItemDisableType([false, false, false], null, "code");
}
},
consignmentCodeClear() {
this.consignmentCodeBlur({ target: { value: "" } });
},
//运单号+计费账号查询
userInputShipperAccountBlur(val) {
if (val.target.value != null && val.target.value != "") {
let obj = {
consignmentCode: this.headData.consignmentCode,
shipperAccount: val.target.value,
};
if (
this.headData.userInputShipperAccount !=
this.oldData.userInputShipperAccount
) {
this.addApi(obj).then((res) => {
this.dataInfo(res.data, "account");
});
}
} else {
this.formItemDisableType([true, false, false], null, "account");
}
},
userInputShipperAccountBlurClear() {
this.userInputShipperAccountBlur({ target: { value: "" } });
},
userOriginCountryChange(val) {
this.countryDict.forEach((item) => {
if (item.code == val) {
this.headData.userInputOriginCountry = item.englishName;
}
});
},
//查询结果处理
dataInfo(val, blurType) {
return new Promise((resolve, reject) => {
let headData = this.headData;
if (val.isCreatorFlag == 0) {
//运单号不存在,帐号、国家都可编辑
if (blurType == "code") {
this.formItemDisableType(
[true, false, false],
val.consignmentId,
blurType
);
this.oldData.consignmentCode = this.headData.consignmentCode;
this.oldData.userInputShipperAccount =
this.headData.userInputShipperAccount;
} else if (blurType == "account") {
if (
this.headData.userInputShipperAccount ==
this.$store.getters.userData.accountNo
) {
this.formItemDisableType(
[true, true, true],
val.consignmentId,
blurType
);
} else {
this.alertWarningMsg(
"Your login account's shipperAccount does not<br/> match the entered shipperAccount. Please confirm<br/> if you want to continue uploading?",
"Tip",
true
).then(() => {
this.formItemDisableType(
[true, true, true],
val.consignmentId,
blurType
);
});
}
}
} else if (val.isCreatorFlag == 1) {
//uuid相同，进入编辑。
//uuid不同，帐号计费账号与运单计费账号相同，提示确认后进入编辑。
//uuid不同，输入计费账号与运单计费账号相同，进入编辑。
if (blurType == "code") {
if (val.message != null && val.message != "") {
this.tipStatus = 1;
this.tipcontent = val.message;
this.tipOpen(val.consignmentId, blurType, 1);
} else {
headData.id = val.consignmentId;
this.$emit("searchWaybillData", headData);
}
} else if (blurType == "account") {
headData.id = val.consignmentId;
this.$emit("searchWaybillData", headData);
}
} else if (val.isCreatorFlag == 2) {
//uuid不同，帐号计费账号与运单计费账号不同，提示确认后开放计费账号输入。
//uuid不同，输入计费账号与运单计费账号不同，开放国家输入。
if (blurType == "code") {
this.tipStatus = 2;
this.tipcontent = val.message;
this.tipOpen(val.consignmentId, blurType, 2);
} else if (blurType == "account") {
this.formItemDisableType(
[true, true, true],
val.consignmentId,
blurType
);
}
} else if (val.isCreatorFlag == 3) {
//运单无法使用
this.alertWarningMsg(val.message);
}
});
},
addApi(data) {
return new Promise((resolve, reject) => {
this.$refs.sreachForm.validate((valid) => {
// if (valid) {
this.$parent.loadings.headFormLoading = true;
addWaybill(data)
.then((res) => {
setTimeout(() => {
if (res.code === 200) {
res.data.message = res.msg;
this.oldData.id = res.data.consignmentId;
resolve(res);
} else {
this.msgWarning(res.msg);
}
this.$parent.loadings.headFormLoading = false;
}, 1000);
})
.catch((err) => {
console.log(err);
this.$parent.loadings.headFormLoading = true;
});
// }
});
});
},
formItemDisableType(typeList, id, blurType) {
let key = ["userInputShipperAccount", "userInputOriginCountryCode"];
key.forEach((item, idx) => {
this.rules[item][0].required = typeList[idx];
this.formDisable[`${item}Disabled`] = !typeList[idx];
if (this.headData.consignmentCode != this.oldData.consignmentCode) {
if (blurType == "code") {
this.headData[item] != null && this.headData[item] != ""
? (this.headData[item] = null)
: "";
if (
item == "userInputOriginCountryCode" &&
this.headData[item] == null
) {
this.headData.userInputOriginCountry = null;
}
} else if (blurType == "account") {
if (idx > 0) {
this.headData[item] != null && this.headData[item] != ""
? (this.headData[item] = null)
: "";
if (
item == "userInputOriginCountryCode" &&
this.headData[item] == null
) {
this.headData.userInputOriginCountry = null;
}
}
}
}
});
this.oldData.consignmentCode = this.headData.consignmentCode;
this.oldData.userInputShipperAccount =
this.headData.userInputShipperAccount;
},
//dm501数据缩放
dataHidden() {
this.dataBoxTtype = !this.dataBoxTtype;
},
//通过用户标志判断是否出现提示
tipOpen(id, blurType, status) {
let flag = 1;
if (status == 1) {
console.log(this.$store.getters.userData);
flag = this.$store.getters.userData.addflag1;
} else if (status == 2) {
flag = this.$store.getters.userData.addflag2;
}
if (flag == 1) {
this.tipVisible = true;
this.$refs.tipDialog.$on("cancel", (res) => {
this.tipVisible = false;
if (res) {
this.tipCancel(id, blurType);
} else {
this.oldData.consignmentCode = this.headData.consignmentCode;
this.oldData.userInputShipperAccount =
this.headData.userInputShipperAccount;
}
});
} else if (flag == 2) {
this.tipCancel(id, blurType);
}
},
//提示语操作状态
tipCancel(id, blurType) {
if (id != null && id != "") {
this.$emit("sreachEntry", id);
} else {
this.formItemDisableType([true, false, false], id, blurType);
}
},
},
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";
.headDataBox {
overflow: hidden;
}
.headDataBox-Hidden {
max-height: 115px;
}
.formRowTitle {
display: flex;
height: 55px;
line-height: 55px;
justify-content: space-between;
.formRowTitle-name {
font-size: 14px;
font-weight: 600;
color: #333;
}
}
.fomrItem-flex {
display: flex;
.fomrItem-flex-left {
width: 80%;
}
.fomrItem-flex-right {
width: 20%;
height: 55px;
// line-height: 55px;
text-align: center;
background-color: $formItemBackgroundColor;
font-size: 12px;
font-weight: 600;
color: #555;
div {
height: 25px;
line-height: 25px;
margin-top: 15px;
border-left: 1px solid #ccc;
}
}
.fomrItem-flex-right-disabled {
color: $formDisabledColor !important;
}
}
</style>
<template>
<div class="wrap" v-loading="loadings.headFormLoading">
<div class="content-box">
<div class="view-box">
<div class="main-box">
<div class="step-name">
<i class="el-icon-circle-check"></i>
<span>Waybill details</span
><span
v-if="
id != '' &&
id != null &&
id != '0' &&
(headData.userUuid == $store.getters.userData.userUuid ||
headData.shipperAccount == $store.getters.userData.accountNo)
"
>:{{ headData.consignmentCode }}</span
>
</div>
<HeadData
ref="headDataBox"
class="headDataBox"
:routeType="routeType"
:headData="headData"
:disabled="headDisabled"
@searchWaybillData="searchWaybillData"
/>
<UploadFile
v-if="id != '' && id != null"
ref="uploadBox"
class="headDataBox"
:headData="headData"
:fileData="fileData"
:routeType="routeType"
@fileDataChange="fileDataChange"
/>
<div class="option">
<el-button
v-if="id != '' && id != null"
class="entrySaveButton entrySaveButton-background"
@click="submit"
>
SUBMIT
</el-button>
<el-button
v-if="
(id == '' || id == null) &&
headData.consignmentCode != null &&
headData.consignmentCode != '' &&
headData.userInputShipperAccount != null &&
headData.userInputShipperAccount != '' &&
!$refs.headDataBox.formDisable
.userInputOriginCountryCodeDisabled
"
class="entrySaveButton entrySaveButton-background"
@click="confirm"
>
CONFIRM
</el-button>
<el-button class="entrySaveButton" @click="back"> CANCEL</el-button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import HeadData from "./headData.vue";
import UploadFile from "./uploadFile.vue";
import {
getWaybillDetail,
submitWaybill,
getWaybillFileList,
} from "@/api/waybillInquiry.js";
export default {
name: "",
components: {
HeadData,
UploadFile,
},
data() {
return {
id: null,
headData: {
id: null,
userUuid: null,
consignmentCode: "",
userInputShipperAccount: "",
userInputOriginCountry: "",
userInputOriginCountryCode: "",
destinationCountry: "China",
destinationCountryCode: "Country_CN",
},
fileData: [
{
titleName: "WAYBILL UPLOAD",
uploadType: "attachmentBizType_01",
required: false,
files: [],
},
{
titleName: "INVOICE UPLOAD",
uploadType: "attachmentBizType_02",
required: false,
files: [],
},
{
titleName: "PACKING LIST UPLOAD",
uploadType: "attachmentBizType_03",
required: false,
files: [],
},
{
titleName: "OTHER FILES UPLOAD",
uploadType: "attachmentBizType_04",
required: false,
files: [],
},
],
loadings: {
headFormLoading: false,
confirmLoading: false,
submitLoading: false,
},
routeType: "add",
headDisabled: false,
};
},
created() {
this.id = this.$route.params.id;
this.headData.id = this.id;
this.routeType = this.$route.params.type;
if (this.id || this.routeType) {
if (this.routeType == "edit") {
this.searchhData();
this.searchFileData();
} else {
this.headDisabled = false;
}
this.$store.dispatch(
"fillForm/addDeliveryNo",
this.$route.params.consignmentCode
);
} else {
this.$router.push({ name: "WaybillInquiry" });
}
},
methods: {
//单据数据查询
searchhData() {
return new Promise((resolve, reject) => {
this.loadings.headFormLoading = true;
getWaybillDetail({ consignmentId: this.id })
.then((res) => {
if (res.code === 200) {
this.headData = res.data;
this.headChange(this.headData);
this.headDisabled = true;
resolve(res);
} else {
this.alertWarningMsg(res.msg);
}
this.loadings.headFormLoading = false;
})
.catch((err) => {
console.log(err);
this.loadings.headFormLoading = false;
});
});
},
//附加信息查询
searchFileData() {
getWaybillFileList({ consignmentId: this.id })
.then((res) => {
if (res.code === 200) {
if (res.data.length > 0) {
let awb = [];
let inv = [];
let pkl = [];
let oth = [];
res.data.forEach((item) => {
item.file = item.filePath;
if (item.bizTypeCode == "attachmentBizType_01") {
item.index = awb.length == 0 ? 0 : awb.length - 1;
awb.push(item);
} else if (item.bizTypeCode == "attachmentBizType_02") {
item.index = inv.length == 0 ? 0 : inv.length - 1;
inv.push(item);
} else if (item.bizTypeCode == "attachmentBizType_03") {
item.index = pkl.length == 0 ? 0 : pkl.length - 1;
pkl.push(item);
} else if (item.bizTypeCode == "attachmentBizType_04") {
item.index = oth.length == 0 ? 0 : oth.length - 1;
oth.push(item);
}
});
this.fileData.forEach((item) => {
if (item.uploadType == "attachmentBizType_01") {
item.files = awb;
} else if (item.uploadType == "attachmentBizType_02") {
item.files = inv;
} else if (item.uploadType == "attachmentBizType_03") {
item.files = pkl;
} else if (item.uploadType == "attachmentBizType_04") {
item.files = oth;
}
});
}
} else {
this.alertWarningMsg(res.msg);
}
})
.catch((err) => {
console.log(err);
});
},
//提交
submit() {
this.loadings.headFormLoading = true;
let fileTotle = 0;
this.fileData.forEach((item) => {
fileTotle = Number(fileTotle) + Number(item.files.length);
});
if (fileTotle > 0) {
let obj = {
consignmentJson: this.submitDataInfo().json,
fileUpload: this.submitDataInfo().fileList,
};
submitWaybill(obj)
.then((res) => {
if (res.code === 200) {
this.msgSuccess("Upload success!");
setTimeout(() => {
this.back();
this.loadings.headFormLoading = false;
}, 1000);
} else {
this.alertWarningMsg(res.msg);
this.loadings.headFormLoading = false;
}
})
.catch((err) => {
console.log(err);
this.loadings.headFormLoading = false;
});
} else {
this.msgWarning("Please upload the file!");
this.loadings.headFormLoading = false;
}
},
//提交数据初始化
submitDataInfo() {
let obj = {
consignmentId: this.headData.id,
consignmentCode: this.headData.consignmentCode,
shipperAccount: this.headData.userInputShipperAccount,
originCountryCode: this.headData.userInputOriginCountryCode,
originCountry: this.headData.userInputOriginCountry,
destinationCountryCode: this.headData.destinationCountryCode,
destinationCountry: this.headData.destinationCountry,
attachmentBizTypeList: [],
};
let arr = [];
this.fileData.forEach((item) => {
item.files.forEach((file) => {
if (file.id) {
obj.attachmentBizTypeList.push(file);
} else {
obj.attachmentBizTypeList.push({
id: null,
bizId: null,
bizTypeCode: file.bizTypeCode,
bizTypeName: null,
sourceFileName: null,
fileName: file.fileName,
filePath: null,
fileTypeCode: null,
fileTypeName: null,
status: null,
createTime: null,
createUserId: null,
createUserName: null,
modifyTime: null,
modifyUserId: null,
modifyUserName: null,
uploadRecordId: null,
fileSize: file.fileSize,
consignmentCode: null,
});
}
if (file.file.split(";base64,").length > 1) {
arr.push(this.base64ConvertFile(file.file, file.fileName));
}
});
});
return { json: JSON.stringify(obj), fileList: arr };
},
//确认新建运单
confirm() {
this.$refs.headDataBox.$refs.sreachForm.validate((valid) => {
if (valid) {
if (this.$refs.headDataBox.$refs.actvieEntryData != null) {
} else {
}
this.id = "0";
this.headData.id = "0";
this.headData.userUuid = "";
this.headDisabled = true;
if (
this.headData.userInputOriginCountryCode == null ||
this.headData.userInputOriginCountryCode == ""
) {
this.headData.userInputOriginCountry = null;
}
}
});
},
//ADD输入数据变化
headChange(val) {
this.id = val.id;
if (val.id != null && val.id != "") {
this.headDisabled = true;
}
this.headData = val;
let recipientAdd = "";
this.headData.recipientAddrLine1 != null &&
this.headData.recipientAddrLine1 != ""
? (recipientAdd = recipientAdd + this.headData.recipientAddrLine1)
: "";
this.headData.recipientAddrLine2 != null &&
this.headData.recipientAddrLine2 != ""
? (recipientAdd =
recipientAdd + " ; " + this.headData.recipientAddrLine2)
: "";
this.headData.recipientAddrLine3 != null &&
this.headData.recipientAddrLine3 != ""
? (recipientAdd =
recipientAdd + " ; " + this.headData.recipientAddrLine3)
: "";
this.headData.recipientAddrLine = recipientAdd;
let shipperAdd = "";
this.headData.shipperAddrLine1 != null &&
this.headData.shipperAddrLine1 != ""
? (shipperAdd = shipperAdd + this.headData.shipperAddrLine1)
: "";
this.headData.shipperAddrLine2 != null &&
this.headData.shipperAddrLine2 != ""
? (shipperAdd = shipperAdd + " ; " + this.headData.shipperAddrLine2)
: "";
this.headData.shipperAddrLine = shipperAdd;
},
searchWaybillData(val) {
if (val.id != null && val.id != "") {
this.id = val.id;
this.searchhData();
}
},
fileDataChange(val) {
this.fileData = val;
},
back() {
this.$router.go(-1);
this.$store.dispatch("fillForm/addDeliveryNo", "");
},
},
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";
.wrap {
height: 100%;
width: 100%;
font-size: 14px;
position: relative;
.content-box {
height: 100%;
}
// padding-bottom: 100px;
.header {
width: 100%;
height: 48px;
line-height: 48px;
background: #fff;
text-align: right;
padding-right: 22px;
}
.view-box {
height: 100%;
overflow: auto;
// margin: 0 auto !important;
padding: 20px;
.main-box {
height: auto;
padding: 20px;
position: relative;
background: #fff;
.option {
margin-top: 50px;
margin-bottom: 50px;
text-align: center;
}
}
}
.nav-page-box {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.flex-box {
width: 75%;
height: 80%;
.suc-title {
font-size: 24px;
font-weight: 200;
line-height: 36px;
color: #333333;
.el-icon-circle-check {
color: #008a16;
margin: 0 6px 16px 0;
}
}
.nav-btn-box {
width: 100%;
height: calc(100% - 46px);
background: #fff;
text-align: center;
vertical-align: middle;
padding: 30px;
.declare-tip {
font-size: 20px;
font-weight: 400;
line-height: 30px;
}
.declare-box {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
.declare {
display: flex;
flex-direction: column;
border: 1px solid #e3e3e3;
width: 30%;
height: 75%;
min-width: 240px;
align-items: center;
justify-content: center;
.svg-icon {
// vertical-align: top !important;
width: 50%;
height: 50%;
margin-bottom: 22px;
}
.el-button {
width: 200px;
}
}
}
}
}
}
.step-name {
margin-bottom: 20px;
i {
font-size: 32px;
vertical-align: -5px;
color: #4d148c;
margin-right: 12px;
}
span {
font-size: 20px;
font-weight: 600;
}
}
}
.headDataBox {
width: 85%;
margin: 0 auto;
}
</style>
<template>
<el-dialog
class="uploadHistoryDialog"
:visible.sync="dialogVisible"
width="35%"
:show-close="true"
:close-on-click-modal="false"
center
>
<template slot="title">
<div class="dialogTitle el-icon-warning"></div>
</template>
<div class="content">
<div class="content-Item" v-html="tipcontent"></div>
<div class="content-option">
<el-checkbox v-model="checked" @change="checkChange">
No more prompts in the future for the same situation
</el-checkbox>
</div>
</div>
<div align="center" style="margin-bottom: 20px">
<el-button
class="entrySaveButton entrySaveButton-background"
@click="confirm"
>
CONFIRM
</el-button>
<el-button class="entrySaveButton" @click="cancel">CANCEL</el-button>
</div>
</el-dialog>
</template>
<script>
import { uploadUserTipFlag } from "@/api/system/user.js";
export default {
props: {
dialogVisible: {
type: Boolean,
default: false,
},
tipcontent: {
type: String,
default: "",
},
typeStatus: {
type: Number,
default: 1,
},
},
data() {
return {
checked: false,
};
},
watch: {
dialogVisible(val) {
if (val) {
if (typeStatus == 1) {
this.checked =
this.$store.getters.userData.addflag1 == 1 ? false : true;
} else if (typeStatus == 2) {
this.checked =
this.$store.getters.userData.addflag2 == 1 ? false : true;
}
}
},
},
methods: {
checkChange(val) {
let obj = {
addFlag1: this.$store.getters.userData.addflag1,
addFlag2: this.$store.getters.userData.addflag1,
};
if (typeStatus == 1) {
obj.addFlag1 = val ? 2 : 1;
} else if (typeStatus == 2) {
obj.addFlag2 = val ? 2 : 1;
}
uploadUserTipFlag(obj)
.then((res) => {
if (res.code === 200) {
} else {
// this.alertWarningMsg(res.msg)
}
})
.catch((err) => {
console.log(err);
});
},
confirm() {
this.$emit("cancel", true);
},
cancel() {
this.$emit("cancel", false);
},
},
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";
.dialogTitle {
font-size: 36px;
color: $fedexBottonColor;
}
.content {
text-align: center;
.content-Item {
font-size: 16px;
font-weight: 500;
color: #333;
line-height: 20px;
margin-bottom: 20px;
}
.content-option {
margin-bottom: 24px;
.el-checkbox {
.el-checkbox__label {
color: $fedexButton !important;
}
}
}
}
</style>
<template>
<div>
<div class="uploadFile-title">
<div class="content">
Import pre-clearance document upload <span>*</span>
<el-popover placement="top" width="510" trigger="hover">
<div>
Click the links below to upload customs clearance documents to
support <br />pre-clearance in destination.
</div>
<i slot="reference" class="el-icon-question questionIcon" />
</el-popover>
</div>
<el-button type="text" @click="viewHistory"
>VIEW UPLOAD HISTORY</el-button
>
</div>
<div class="uploadFile-box">
<div
v-for="(item, index) in fileData"
:key="index"
:class="{ uploadFileBoxItem: true }"
>
<div class="uploadButton" style="display: flex">
<div style="height: 45px" v-if="uploadType">
<div>
<el-button type="text" @click="upload(item.uploadType)"
>{{ item.titleName }}
</el-button>
<span v-if="item.required" class="requiredIcon">*</span>
</div>
<!-- <el-popover
style="margin-left: 5px"
v-if="item.uploadType == 'OTH'"
placement="top"
width="720"
trigger="hover"
>
<div>
Please provide
<span class="tipWeight">certificate of origin, contract</span>,
etc. if have any.<br />
And please provide
<span class="tipWeight">purchase receipts</span> or other
support clearance documents if declaring personal items.
</div>
<i slot="reference" class="el-icon-question questionIcon" />
</el-popover> -->
</div>
<div class="tipDom" v-if="item.uploadType == 'OTH'">
Please provide
<span class="tipWeight">certificate of origin,contract</span>,etc.
if have any.<br />
And please provide
<span class="tipWeight">purchase receipts</span> or other support
clearance documents if declaring personal items.
</div>
<!-- <div v-else>Waybill upload</div> -->
</div>
<div
class="uploadFileList"
v-for="(file, idx) in item.files"
:key="idx"
>
<div class="fileName">
<i class="el-icon-document" />{{ file.fileName }}
</div>
<div class="fileOption">
<!-- 文件大小 -->
<span class="fileSize"
>{{ numberRound(Number(file.fileSize / 1024), 2) }}KB</span
>
<!-- 预览 -->
<!-- <el-button
type="text"
:loading="file.viewLoading"
@click="fileView(file)"
>view</el-button
> -->
<!-- 下载 -->
<el-button
type="text"
:loading="file.downLoading"
@click="downloadFile(file)"
>DOWNLOAD</el-button
>
<!-- 删除 -->
<el-popconfirm
title="Do you want to delete this file?"
@confirm="delFile(file)"
>
<el-button slot="reference" type="text" :loading="file.delLoading"
>DELETE</el-button
>
</el-popconfirm>
</div>
</div>
</div>
<!-- <el-button
v-if="!uploadType"
type="text"
icon="el-icon-circle-plus-outline"
@click="addUpload"
>Add</el-button
> -->
<el-upload
class="upload-demo"
ref="uploadBlock"
:multiple="true"
action=""
:file-list="fileList"
:before-upload="beforeUpload"
:show-file-list="false"
:on-error="handleUploadError"
:on-success="handleUploadSuccess"
:on-remove="handleRemove"
:http-request="uploadFile"
:auto-upload="true"
:on-change="handleChange"
v-show="false"
>
</el-upload>
</div>
<HistoryDialog
ref="historyDialog"
:dialogVisible="viewHistoryType"
:headData="headData"
@close="historyClose"
/>
</div>
</template>
<script>
import HistoryDialog from "./dialog.vue";
export default {
components: {
HistoryDialog,
},
props: {
headData: {
type: Object,
default: null,
},
fileData: {
type: Array,
default: () => {
return [];
},
},
},
data() {
return {
fileFormData: {
uploadType: "",
},
fileList: [],
uploadType: true,
viewHistoryType: false,
};
},
methods: {
//上传
upload(type) {
this.fileList = [];
this.fileFormData.uploadType = type;
this.$refs.uploadBlock.$refs["upload-inner"].handleClick();
},
beforeUpload(val) {
let fileSum = 0;
let fileSize = 0;
let fileNameArray = [];
this.fileData.forEach((item) => {
fileSum = Number(fileSum) + Number(item.files.length);
item.files.forEach((file) => {
fileSize = Number(fileSize) + Number(file.fileSize);
fileNameArray.push(file.fileName);
});
});
if (fileSum + 1 > 100) {
this.$message.warning("上传文件总数最大100个！");
return false;
} else if (Number(fileSize) + Number(val.fileSize) / 1024 / 1024 > 100) {
this.$message.warning("上传文件总大小最大100M！");
return false;
} else if (fileNameArray.includes(val.fileName)) {
this.$message.warning("上传文件名重复！");
return false;
} else {
return true;
}
},
uploadFile(val) {
let obj = {
id: null,
bizId: null,
bizTypeName: null,
sourceFileName: null,
filePath: null,
fileTypeCode: null,
fileTypeName: this.fileFormData.uploadType,
status: null,
createTime: null,
createUserId: null,
createUserName: null,
modifyTime: null,
modifyUserId: null,
modifyUserName: null,
uploadRecordId: null,
consignmentCode: null,
file: "",
bizTypeCode: this.fileFormData.uploadType,
fileType: val.file.type,
fileName: val.file.name,
fileSize: val.file.size,
index: 0,
viewLoading: false,
downLoading: false,
delLoading: false,
};
let arr = this.fileData;
const reader = new FileReader();
reader.readAsDataURL(val.file);
reader.onload = (e) => {
obj.file = e.target.result;
arr.forEach((item, index) => {
if (item.uploadType == this.fileFormData.uploadType) {
obj.index = index;
item.files.push(obj);
}
});
this.$emit("fileDataChange", arr);
};
},
//下载
downloadFile(val) {
if (val.file.split(";base64,").length > 1) {
const aLink = document.createElement("a");
aLink.href = val.file;
aLink.setAttribute("download", val.fileName); // 设置下载文件名称
document.body.appendChild(aLink);
aLink.click();
document.body.removeChild(aLink);
} else {
this.zipdownload
.downLoadZip(
"biz-customer/attachment/downLoadFile",
{
name: val.fileName,
path: val.filePath,
},
val.fileName
)
.then((res) => {
console.log(res);
});
}
},
//删除
delFile(val) {
this.fileData.forEach((item) => {
if (item.uploadType == val.bizTypeCode) {
let arr = [];
item.files.forEach((file) => {
if (file.index != val.index) {
arr.push(file);
}
});
item.files = arr;
}
});
this.$emit("fileDataChange", this.fileData);
},
//预览
fileView(val) {
// var reader = new FileReader();
// reader.encoding = "UTF-8";
// reader.readAsText(this.b64ToBlob(val.file));
// reader.onload = function (e) {
// var content = e.target.result;
// let blob = new Blob([content], { type: val.fileType });
// let blobURL = window.URL.createObjectURL(blob);
// window.open(blobURL, "_black");
// };
let blob = new Blob([this.base64ConvertFile(val.file, val.fileName)], {
type: val.fileType,
});
let blobURL = window.URL.createObjectURL(blob);
window.open(blobURL, "_black");
},
handleUploadError(val) {},
handleUploadSuccess(val) {},
handleRemove() {
this.fileList = [];
},
handleChange() {},
addUpload() {
this.uploadType = true;
},
viewHistory() {
this.viewHistoryType = true;
},
historyClose(val) {
this.viewHistoryType = false;
if (val.type == "copy") {
this.$refs.historyDialog.detailSearch(val.data.id).then((res) => {
this.fileData.forEach((item) => {
if (item.uploadType == "attachmentBizType_01") {
item.files = res[0].list;
} else if (item.uploadType == "attachmentBizType_02") {
item.files = res[1].list;
} else if (item.uploadType == "attachmentBizType_03") {
item.files = [];
} else if (item.uploadType == "attachmentBizType_04") {
item.files = res[2].list;
}
});
this.$emit("fileDataChange", this.fileData);
});
}
},
},
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";
.uploadFile-title {
text-align: center;
height: 38px;
line-height: 38px;
position: relative;
margin-top: 20px;
.content {
font-size: 16px;
font-weight: 600;
span {
color: $fedexError;
}
}
.el-button {
position: absolute;
top: 0;
right: 10px;
}
}
.uploadFile-box {
margin-top: 8px;
.uploadFileBoxItem {
border: 1.5px solid rgba(153, 153, 153, 0.3);
box-shadow: 0px 4px 0.3rem 0.5px rgba(229, 242, 248, 0.8);
margin-top: 10px;
background-color: #fefefe;
.uploadButton {
height: 45px;
line-height: 45px;
padding: 0 20px;
border-bottom: 2px solid #e0e0e0;
.requiredIcon {
color: $fedexError;
}
}
.uploadFileList {
height: 45px;
display: flex;
justify-content: space-between;
padding: 5px 0px 5px 20px;
line-height: 35px;
.fileName {
i {
display: inline-block;
margin-right: 5px;
}
}
.fileOption {
.fileSize {
font-size: 12px;
font-weight: 400;
color: #999;
margin-right: 20px;
}
.el-button {
margin-right: 16px;
}
}
}
}
.fileBoxItemDisable {
box-shadow: none;
background-color: $formItemBackgroundColor !important;
}
}
.tipDom {
display: inline-block;
font-size: 12px;
line-height: 16px;
padding: 7px 10px;
color: #777;
}
</style>