Fedex / EcomWeb

Go to a project
Toggle navigation Toggle navigation pinning
zhengquan.bai
9325b199 1 parent df7cdd6f

出口运单详情接口对接

Inline Side-by-side
Showing 4 changed files with 371 additions and 469 deletions
......@@ -20,4 +20,14 @@ export function getOrderLogata(data) {
method: 'get',
data: data
})
}
\ No newline at end of file
}
/**
* 出口运单详情
*/
export function getTransportDetail(id) {
return request({
url: '/bus-customer/exportWaybill/info/' + id,
method: 'get'
})
}
......
......@@ -113,6 +113,7 @@ export const constantRoutes = [
path: '/exportTransportDetail',
component: (resolve) => require(['@/views/exportTransportDetail/index'], resolve),
hidden: true,
name: 'ExportTransportDetail',
meta: { title: '出口运单详情', icon: '' },
},
{
......
......@@ -174,7 +174,7 @@
<span>{{ scope.row.returnStatus }}</span>
</template>
<template v-slot:logisticsNo="scope">
<el-button type="text">{{ scope.row.logisticsNo }}</el-button>
<el-button type="text" @click="view(scope.row)">{{ scope.row.logisticsNo }}</el-button>
</template>
</Table>
</div>
......@@ -272,6 +272,13 @@ export default {
this.tableMaxheight = window.innerHeight - 300;
},
methods: {
//查询详情
view(val) {
this.$router.push({
name: "ExportTransportDetail",
params: { data: val },
});
},
//查询
search(val) {
this.loadings.searchLoading = true;
......
<template>
<div class="export-bill-detail">
<h5 class="first-header">
出口运单详情
<div class="returnButton" @click="$router.back()">返回</div>
</h5>
<div class="entry" v-loading="loadings.entryLoading">
<div class="entryTitle">
<div>出口运单详情</div>
<div>
<el-button class="entrySaveButton" @click="back">返 回</el-button>
</div>
</div>
<el-form
class="fedexFormStyle fedexformSreach fedexformSreachBottomBorder"
class="fedexFormStyle"
ref="sreachForm"
:model="searchForm"
:model="formData"
label-position="top"
disabled
size="small"
>
<el-row class="row-border">
<el-col :span="5">
<Formitem label="订单编号" prop="consignmentCode">
<el-popover
placement="bottom"
width="320"
trigger="manual"
popper-class="popoverconsignmentCode"
v-model="textareaVisible.formItemconsignmentCode"
>
<el-input
name="consignmentCode-textarea"
type="textarea"
:rows="5"
id="popoverInputconsignmentCode"
class="inputShadow textareaPopover"
v-model="searchForm.consignmentCode"
resize="none"
maxlength="13000"
placeholder=""
@blur="textareaBlur"
></el-input>
<el-input
slot="reference"
name="consignmentCode"
type="textarea"
:rows="1"
class="inputShadow"
id="inputInner--consignmentCode"
v-model="searchForm.consignmentCode"
resize="none"
placeholder=""
@focus="textareaFocus"
></el-input>
</el-popover>
<el-row :gutter="5">
<el-col :span="3">
<Formitem label="运单编号" prop="logisticsNo">
<el-input
type="text"
class="inputShadow"
id="inputInner--orderNo"
resize="none"
v-model="formData.logisticsNo"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<el-col :span="4">
<Formitem label="订单类型" prop="factoryCode">
<el-select
<el-col :span="3">
<Formitem label="物流企业名称" prop="logisticsName">
<el-input
type="text"
id="inputInner--declaredPort"
v-model="searchForm.declaredPort"
class="inputShadow"
id="inputInner--orderType"
resize="none"
v-model="formData.logisticsName"
clearable
placeholder=""
>
<el-option
v-for="(item, index) in dictData.userport"
:key="index"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
></el-input>
</Formitem>
</el-col>
<el-col :span="5">
<Formitem label="电商平台代码" prop="consignmentCode">
<el-popover
placement="bottom"
width="320"
trigger="manual"
popper-class="popoverconsignmentCode"
v-model="textareaVisible.formItemconsignmentCode"
>
<el-input
name="consignmentCode-textarea"
type="textarea"
:rows="5"
id="popoverInputconsignmentCode"
class="inputShadow textareaPopover"
v-model="searchForm.consignmentCode"
resize="none"
maxlength="13000"
placeholder=""
@blur="textareaBlur"
></el-input>
<el-input
slot="reference"
name="consignmentCode"
type="textarea"
:rows="1"
class="inputShadow"
id="inputInner--consignmentCode"
v-model="searchForm.consignmentCode"
resize="none"
placeholder=""
@focus="textareaFocus"
></el-input>
</el-popover>
<el-col :span="3">
<Formitem label="电商企业名称" prop="ebcname">
<el-input
type="text"
class="inputShadow"
id="inputInner--ebpcode"
resize="none"
v-model="formData.ebcname"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<el-col :span="5">
<Formitem label="电商平台名称" prop="consignmentCode">
<el-popover
placement="bottom"
width="320"
trigger="manual"
popper-class="popoverconsignmentCode"
v-model="textareaVisible.formItemconsignmentCode"
>
<el-input
name="consignmentCode-textarea"
type="textarea"
:rows="5"
id="popoverInputconsignmentCode"
class="inputShadow textareaPopover"
v-model="searchForm.consignmentCode"
resize="none"
maxlength="13000"
placeholder=""
@blur="textareaBlur"
></el-input>
<el-input
slot="reference"
name="consignmentCode"
type="textarea"
:rows="1"
class="inputShadow"
id="inputInner--consignmentCode"
v-model="searchForm.consignmentCode"
resize="none"
placeholder=""
@focus="textareaFocus"
></el-input>
</el-popover>
<el-col :span="6">
<Formitem label="电商企业代码" prop="ebccode">
<el-input
type="text"
class="inputShadow"
id="inputInner--ebpname"
resize="none"
v-model="formData.ebccode"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<el-col :span="5">
<Formitem label="电商企业代码" prop="consignmentCode">
<el-popover
placement="bottom"
width="320"
trigger="manual"
popper-class="popoverconsignmentCode"
v-model="textareaVisible.formItemconsignmentCode"
>
<el-input
name="consignmentCode-textarea"
type="textarea"
:rows="5"
id="popoverInputconsignmentCode"
class="inputShadow textareaPopover"
v-model="searchForm.consignmentCode"
resize="none"
maxlength="13000"
placeholder=""
@blur="textareaBlur"
></el-input>
<el-input
slot="reference"
name="consignmentCode"
type="textarea"
:rows="1"
class="inputShadow"
id="inputInner--consignmentCode"
v-model="searchForm.consignmentCode"
resize="none"
placeholder=""
@focus="textareaFocus"
></el-input>
</el-popover>
<el-col :span="3">
<Formitem label="电商企业代码" prop="ebccode">
<el-input
type="text"
class="inputShadow"
id="inputInner--ebccode"
resize="none"
v-model="formData.ebccode"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<el-col :span="3">
<Formitem label="电商企业电话" prop="ebcTelephone">
<el-input
type="text"
class="inputShadow"
id="inputInner--ebcname"
resize="none"
v-model="formData.ebcTelephone"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<el-col :span="3">
<Formitem label="运费" prop="freight">
<el-input
type="text"
class="inputShadow"
id="inputInner--goodsValue"
resize="none"
v-model="formData.freight"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
</el-row>
<el-row>
<el-col :span="5">
<Formitem label="电商企业" prop="consignmentCode">
<el-popover
placement="bottom"
width="320"
trigger="manual"
popper-class="popoverconsignmentCode"
v-model="textareaVisible.formItemconsignmentCode"
>
<el-input
name="consignmentCode-textarea"
type="textarea"
:rows="5"
id="popoverInputconsignmentCode"
class="inputShadow textareaPopover"
v-model="searchForm.consignmentCode"
resize="none"
maxlength="13000"
placeholder=""
@blur="textareaBlur"
></el-input>
<el-input
slot="reference"
name="consignmentCode"
type="textarea"
:rows="1"
class="inputShadow"
id="inputInner--consignmentCode"
v-model="searchForm.consignmentCode"
resize="none"
placeholder=""
@focus="textareaFocus"
></el-input>
</el-popover>
<el-row :gutter="5">
<el-col :span="3">
<Formitem label="保价费" prop="insuredfee">
<el-input
type="text"
class="inputShadow"
id="inputInner--freight"
resize="none"
v-model="formData.insuredfee"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<el-col :span="5">
<Formitem label="贷款金额" prop="consignmentCode">
<el-popover
placement="bottom"
width="320"
trigger="manual"
popper-class="popoverconsignmentCode"
v-model="textareaVisible.formItemconsignmentCode"
>
<el-input
name="consignmentCode-textarea"
type="textarea"
:rows="5"
id="popoverInputconsignmentCode"
class="inputShadow textareaPopover"
v-model="searchForm.consignmentCode"
resize="none"
maxlength="13000"
placeholder=""
@blur="textareaBlur"
></el-input>
<el-input
slot="reference"
name="consignmentCode"
type="textarea"
:rows="1"
class="inputShadow"
id="inputInner--consignmentCode"
v-model="searchForm.consignmentCode"
resize="none"
placeholder=""
@focus="textareaFocus"
></el-input>
</el-popover>
<el-col :span="3">
<Formitem label="币制" prop="currency">
<el-input
type="text"
class="inputShadow"
id="inputInner--currency"
resize="none"
v-model="formData.currency"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<el-col :span="5">
<Formitem label="运杂费" prop="consignmentCode">
<el-popover
placement="bottom"
width="320"
trigger="manual"
popper-class="popoverconsignmentCode"
v-model="textareaVisible.formItemconsignmentCode"
>
<el-input
name="consignmentCode-textarea"
type="textarea"
:rows="5"
id="popoverInputconsignmentCode"
class="inputShadow textareaPopover"
v-model="searchForm.consignmentCode"
resize="none"
maxlength="13000"
placeholder=""
@blur="textareaBlur"
></el-input>
<el-input
slot="reference"
name="consignmentCode"
type="textarea"
:rows="1"
class="inputShadow"
id="inputInner--consignmentCode"
v-model="searchForm.consignmentCode"
resize="none"
placeholder=""
@focus="textareaFocus"
></el-input>
</el-popover>
<el-col :span="3">
<Formitem label="毛重" prop="grossWeight">
<el-input
type="text"
class="inputShadow"
id="inputInner--currency"
resize="none"
v-model="formData.grossWeight"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<el-col :span="4">
<Formitem label="币别" prop="factoryCode">
<el-select
<el-col :span="3">
<Formitem label="件数" prop="packNo">
<el-input
type="text"
id="inputInner--declaredPort"
v-model="searchForm.declaredPort"
class="inputShadow"
id="inputInner--currency"
resize="none"
v-model="formData.packNo"
clearable
placeholder=""
>
<el-option
v-for="(item, index) in dictData.userport"
:key="index"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
></el-input>
</Formitem>
</el-col>
<el-col :span="5">
<Formitem label="业务状态" prop="consignmentCode">
<el-popover
placement="bottom"
width="320"
trigger="manual"
popper-class="popoverconsignmentCode"
v-model="textareaVisible.formItemconsignmentCode"
>
<el-input
name="consignmentCode-textarea"
type="textarea"
:rows="5"
id="popoverInputconsignmentCode"
class="inputShadow textareaPopover"
v-model="searchForm.consignmentCode"
resize="none"
maxlength="13000"
placeholder=""
@blur="textareaBlur"
></el-input>
<el-input
slot="reference"
name="consignmentCode"
type="textarea"
:rows="1"
class="inputShadow"
id="inputInner--consignmentCode"
v-model="searchForm.consignmentCode"
resize="none"
placeholder=""
@focus="textareaFocus"
></el-input>
</el-popover>
<!-- <el-col :span="3">
<Formitem label="业务状态" prop="returnStatus">
<el-input
type="text"
class="inputShadow"
id="inputInner--returnStatus"
resize="none"
v-model="formData.returnStatus"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col> -->
<el-col :span="3">
<Formitem label="主要货物信息" prop="goodsInfo">
<el-input
type="text"
class="inputShadow"
id="inputInner--appType"
resize="none"
v-model="formData.goodsInfo"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
</el-row>
<el-row>
<el-col :span="4">
<Formitem label="申报类型" prop="factoryCode">
<el-select
<el-col :span="3">
<Formitem label="业务时间" prop="appTime">
<el-input
type="text"
id="inputInner--declaredPort"
v-model="searchForm.declaredPort"
class="inputShadow"
id="inputInner--appTime"
resize="none"
v-model="formData.appTime"
clearable
placeholder=""
>
<el-option
v-for="(item, index) in dictData.userport"
:key="index"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
></el-input>
</Formitem>
</el-col>
<el-col :span="4">
<Formitem label="申报日期" prop="declareDate">
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期">
</el-date-picker>
<el-col :span="3">
<Formitem label="业务状态" prop="appStatus">
<el-input
type="text"
class="inputShadow"
id="inputInner--appTime"
resize="none"
v-model="formData.appTime"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<el-col :span="5">
<Formitem label="备注" prop="consignmentCode">
<el-popover
placement="bottom"
width="320"
trigger="manual"
popper-class="popoverconsignmentCode"
v-model="textareaVisible.formItemconsignmentCode"
>
<el-input
name="consignmentCode-textarea"
type="textarea"
:rows="5"
id="popoverInputconsignmentCode"
class="inputShadow textareaPopover"
v-model="searchForm.consignmentCode"
resize="none"
maxlength="13000"
placeholder=""
@blur="textareaBlur"
></el-input>
<el-input
slot="reference"
name="consignmentCode"
type="textarea"
:rows="1"
class="inputShadow"
id="inputInner--consignmentCode"
v-model="searchForm.consignmentCode"
resize="none"
placeholder=""
@focus="textareaFocus"
></el-input>
</el-popover>
<el-col :span="12">
<Formitem label="备注" prop="note">
<el-input
type="text"
class="inputShadow"
id="inputInner--note"
resize="none"
v-model="formData.note"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
</el-row>
</el-form>
<h5>回执信息</h5>
<ReceiptInfoTable />
<div
:class="{ entryTitle: true, titleBorder: logtableType ? false : true }"
style="margin-top: 10px"
>
<div>
回执信息
<el-button type="text" @click="hiddenLogTable">
<svg-icon v-if="logtableType" icon-class="downIcon"></svg-icon>
<svg-icon v-else icon-class="upIcon"></svg-icon>
</el-button>
</div>
</div>
<ReceiptInfoTable
v-if="logtableType"
:tableData="logData"
:headerData="logHeaderData"
/>
<!-- <div class="entryTitle" style="margin-top: 10px">商品明细</div>-->
<!-- <ProductDetailTable-->
<!-- :tableData="detailData"-->
<!-- :bodyHeader="detialHeaderData"-->
<!-- />-->
</div>
</template>
<script>
import ReceiptInfoTable from "../components/ReceiptInfoTable/index.vue";
import ProductDetailTable from "../components/ProductDetailTable/index.vue";
import {getOrderDetailData, getTransportDetail} from "@/api/exportDetail-api.js";
export default {
name: "exportTransportDetail.vue",
name: "index.vue",
components: {ProductDetailTable, ReceiptInfoTable},
data() {
return {
searchForm: {
declaredPort: "",
consStatus: "",
consignmentCode: "",
accsDataImportTime: [],
ownerName: "",
consignmentHeadCode: "",
isPushCustomsSys: "",
waitOperStatus: "",
declTime: [],
},
textareaVisible: {
formItemconsignmentCode: false,
formItemconsignmentHeadCode: false,
},
dictData: {
userport: [
{name: "Shanghai Port", code: "SH"},
{name: "Beijing Port", code: "BJ"},
{name: "Guangzhou Port", code: "GZ"},
{name: "Shenzhen Port", code: "SZ"},
{name: "Tianjin Port", code: "TJ"},
],
id: null,
formData: {},
logData: [],
logHeaderData: [
{
name: "回执状态",
value: "returnStatus",
width: "200",
align: "left",
},
{
name: "状态时间",
value: "returnTime",
width: "400",
align: "left",
},
{
name: "回执描述",
value: "returnInfo",
width: "",
align: "left",
},
],
detailData: [],
detialHeaderData: [
{
name: "企业商品货号",
value: "",
width: "",
align: "left",
},
{
name: "商品企业商品名称",
value: "",
width: "",
align: "left",
},
{
name: "企业商品描述",
value: "",
width: "",
align: "left",
},
{
name: "条码",
value: "",
width: "",
align: "left",
},
{
name: "计量单位",
value: "",
width: "",
align: "left",
},
{
name: "币制",
value: "",
width: "",
align: "left",
},
{
name: "数量",
value: "",
width: "",
align: "left",
},
{
name: "单价",
value: "",
width: "",
align: "left",
},
{
name: "总价",
value: "",
width: "",
align: "left",
},
{
name: "备注",
value: "",
width: "",
align: "left",
},
],
loadings: {
entryLoading: false,
},
logtableType: true,
};
},
created() {
if (this.$route.params.data) {
this.id = this.$route.params.data.id;
this.searchData();
} else {
this.back();
}
},
methods: {
textareaBlur(val) {
let inputInner = document.querySelector(
"#inputInner--" + val.target.name.split("-")[0]
);
this.textareaVisible["formItem" + val.target.name.split("-")[0]] = false;
inputInner.style.display = "block";
this.$nextTick(() => {
inputInner.blur();
if (
inputInner.value != undefined &&
inputInner.value != "" &&
inputInner.value != null
) {
inputInner.classList.add("inputFocus");
} else {
inputInner.classList.remove("inputFocus");
}
});
let arr = [];
this.searchForm[val.target.name.split("-")[0]]
.replace(/[\n\，\；\;]/g, ",")
.replace(/[\t]/g, "")
.split(",")
.forEach((str, index) => {
if (str != null && str != "" && index <= 1000) {
arr.push(str.trim());
searchData() {
this.loadings.entryLoading = true;
getTransportDetail(this.id)
.then((res) => {
if (res.code === "200") {
this.formData = res.data.exportWaybill;
this.detailData = res.data.exportOrderProductList;
this.logData = res.data.exportWaybillReceiptList;
this.detailData.forEach((item, idx) => {
item.index = idx;
});
} else {
this.alertWarningMsg(res.message);
}
this.loadings.entryLoading = false;
})
.catch((err) => {
console.log(err);
this.loadings.entryLoading = false;
});
this.searchForm[val.target.name.split("-")[0]] = arr.join("\n");
this.$forceUpdate();
},
//文本域展示状态切换
textareaFocus(val) {
this.textareaVisible["formItem" + val.target.name.split("-")[0]] = true;
this.$nextTick(() => {
document
.querySelector("#popoverInput" + val.target.name.split("-")[0])
.focus();
document.querySelector(
"#inputInner--" + val.target.name.split("-")[0]
).style.display = "none";
});
searchLogData() {
},
}
}
hiddenLogTable() {
this.logtableType = !this.logtableType;
},
back() {
this.$router.go(-1);
},
},
};
</script>
<style scoped lang="scss">
.export-bill-detail {
background-color: white;
padding-left: 20px;
//border: 1px solid black;
.entry {
width: 100%;
height: 100%;
.fedexFormItem {
background-color: #f5f5f5;
margin-right: 5px;
margin-bottom: 5px;
}
.fedexformSreach {
border-bottom: none;
padding: 10px;
background-color: #fff;
overflow: auto;
.entryInformation {
width: 100%;
height: 100%;
}
.first-header {
margin-top: 0;
padding-top: 20px;
.entryTitle {
display: flex;
justify-content: space-between;
position: relative;
.returnButton {
font-size: 14px;
color: red;
position: absolute;
right: 0;
top: 0px;
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: white;
border-radius: 5px;
margin-right: 20px;
margin-top: 20px;
cursor: pointer;
border: 1px solid red;
}
font-weight: 600;
font-weight: 16px;
color: #000;
margin-bottom: 10px;
}
.titleBorder {
border-bottom: 1px solid #333;
}
}
</style>
......