Fedex / EcomWeb

Go to a project
Toggle navigation Toggle navigation pinning
zhanbo.xu
0385450f 1 parent 2e2dddec

feat: 新增功能

Inline Side-by-side
Showing 8 changed files with 2125 additions and 6 deletions
import request from "@/utils/request";
// POST
// /exportOrder/pvg/queryList
// 获取PVG订单列表
export function getPvgList(data) {
return request({
url: "/bus-customer/exportOrder/pvg/queryList",
method: "post",
data: data,
});
}
// GET
// /exportOrder/pvg/info/{id}
// 获取PVG订单详情
export function getPvgInfo({ id }) {
return request({
url: `/bus-customer/exportOrder/pvg/info/${id}`,
method: "get",
});
}
// GET
// /exportOrder/pvg/receipt/{id}
// 获取PVG订单回执信息
export function getPvgReceiptInfo({ id }) {
return request({
url: `/bus-customer/exportOrder/pvg/receipt/${id}`,
method: "get",
});
}
// GET
// /exportWaybill/pvg/info/{id}
// 获取PVG运单详情
export function getPvgWaybillInfo({ id }) {
return request({
url: `/bus-customer/exportWaybill/pvg/info/${id}`,
method: "get",
});
}
// POST
// /exportWaybill/pvg/queryList
// 获取PVG运单列表
export function getPvgWaybillList(data) {
return request({
url: "/bus-customer/exportWaybill/pvg/queryList",
method: "post",
data: data,
});
}
// GET
// /exportWaybill/pvg/receipt​/{id}
// 获取PVG订单回执信息
export function getPvgWaybillReceiptInfo(id) {
return request({
url: `/bus-customer/exportWaybill/pvg/receipt/${id}`,
method: "get",
});
}
......@@ -205,6 +205,15 @@ export const constantRoutes = [
hidden: true,
meta: { title: "PDD数据详情", icon: "" },
},
// PVG
{
path: "/pvg-order-detail",
component: (resolve) =>
require(["@/views/pvgOrder/detail.vue"], resolve),
hidden: true,
name: "PvgOrderDetail",
meta: { title: "PVG订单详情", icon: "" },
},
],
},
{
......
......@@ -18,14 +18,24 @@
:expandRowKeys="expandRowKeys"
>
<template v-slot:unit="scope">
<span>{{
selectDictLabel(scope.row.unit, "MEASUREMENT_UNIT", "itemCode")
}}</span>
<span>
{{ selectDictLabel(scope.row.unit, "MEASUREMENT_UNIT", "itemCode") }}
</span>
</template>
<template v-slot:unit1="scope">
<span>
{{ selectDictLabel(scope.row.unit1, "MEASUREMENT_UNIT", "itemCode") }}
</span>
</template>
<template v-slot:unit2="scope">
<span>
{{ selectDictLabel(scope.row.unit2, "MEASUREMENT_UNIT", "itemCode") }}
</span>
</template>
<template v-slot:currency="scope">
<span>{{
selectDictLabel(scope.row.currency, "CURRENCY", "itemValue")
}}</span>
<span>
{{ selectDictLabel(scope.row.currency, "CURRENCY", "itemValue") }}
</span>
</template>
<!-- <template slot="optionColumn">
<el-table-column
......
<template>
<div class="entry" v-loading="loadings.entryLoading">
<div class="entryTitle">
<div>PVG订单详情</div>
<div>
<el-button class="entrySaveButton" @click="back">返 回</el-button>
</div>
</div>
<el-form
class="fedexFormStyle"
ref="sreachForm"
:model="formData"
label-position="top"
disabled
size="small"
>
<el-row :gutter="5">
<!-- 订单编号 -->
<el-col :span="3">
<Formitem label="电商订单/海外仓订仓编号" prop="orderNo">
<el-input
type="text"
class="inputShadow"
id="inputInner--orderNo"
resize="none"
v-model="formData.orderNo"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 物流申报企业平台代码 -->
<el-col :span="3">
<Formitem label="物流申报企业平台代码" prop="logisticsSenderCode">
<el-input
type="text"
class="inputShadow"
id="inputInner--logisticsSenderCode"
resize="none"
v-model="formData.logisticsSenderCode"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 申报类型 -->
<el-col :span="3">
<Formitem label="申报类型" prop="appType">
<el-input
type="text"
class="inputShadow"
id="inputInner--appType"
resize="none"
v-model="formData.appType"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 电商平台代码 -->
<el-col :span="3">
<Formitem label="电商平台代码" prop="ebpCode">
<el-input
type="text"
class="inputShadow"
id="inputInner--ebpCode"
resize="none"
v-model="formData.ebpCode"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 电商平台/海外仓名称 -->
<el-col :span="6">
<Formitem label="电商平台/海外仓名称" prop="ebpName">
<el-input
type="text"
class="inputShadow"
id="inputInner--ebpName"
resize="none"
v-model="formData.ebpName"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 电商企业代码 -->
<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="6">
<Formitem label="电商企业名称" prop="ebcName">
<el-input
type="text"
class="inputShadow"
id="inputInner--ebcName"
resize="none"
v-model="formData.ebcName"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
</el-row>
<el-row :gutter="5">
<!-- 商品金额 -->
<el-col :span="3">
<Formitem label="商品金额" prop="totalPrice">
<el-input
type="text"
class="inputShadow"
id="inputInner--totalPrice"
resize="none"
v-model="formData.totalPrice"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 运杂费 -->
<el-col :span="3">
<Formitem label="运杂费" prop="freight">
<el-input
type="text"
class="inputShadow"
id="inputInner--freight"
resize="none"
v-model="formData.freight"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 币制 -->
<el-col :span="3">
<Formitem label="币制" prop="currency">
<el-select
type="text"
id="inputInner--currency"
v-model="formData.currency"
clearable
placeholder=""
>
<el-option
v-for="(item, index) in $store.getters.dict.CURRENCY"
:key="index"
:label="item.itemChineseName"
:value="item.itemValue"
></el-option>
</el-select>
</Formitem>
</el-col>
<!-- 收货人名称 -->
<el-col :span="3">
<Formitem label="收货人名称" prop="consignee">
<el-input
type="text"
class="inputShadow"
id="inputInner--consignee"
resize="none"
v-model="formData.consignee"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 收货人电话 -->
<el-col :span="3">
<Formitem label="收货人电话" prop="consigneeTelephone">
<el-input
type="text"
class="inputShadow"
id="inputInner--consigneeTelephone"
resize="none"
v-model="formData.consigneeTelephone"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 收货人地址 -->
<el-col :span="3">
<Formitem label="收货人地址" prop="consigneeAddress">
<el-input
type="text"
class="inputShadow"
id="inputInner--consigneeAddress"
resize="none"
v-model="formData.consigneeAddress"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 收货人所在国 -->
<el-col :span="3">
<Formitem label="收货人所在国" prop="consigneeCountry">
<el-input
type="text"
class="inputShadow"
id="inputInner--consigneeCountry"
resize="none"
v-model="formData.consigneeCountry"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 发货人名称 -->
<el-col :span="3">
<Formitem label="发货人名称" prop="shipper">
<el-input
type="text"
class="inputShadow"
id="inputInner--shipper"
resize="none"
v-model="formData.shipper"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 发货人电话 -->
<el-col :span="3">
<Formitem label="发货人电话" prop="shipperTelephone">
<el-input
type="text"
class="inputShadow"
id="inputInner--shipperTelephone"
resize="none"
v-model="formData.shipperTelephone"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 发货人地址 -->
<el-col :span="3">
<Formitem label="发货人地址" prop="shipperAddress">
<el-input
type="text"
class="inputShadow"
id="inputInner--shipperAddress"
resize="none"
v-model="formData.shipperAddress"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 发货人所在国 -->
<el-col :span="3">
<Formitem label="发货人所在国" prop="shipperCountry">
<el-input
type="text"
class="inputShadow"
id="inputInner--shipperCountry"
resize="none"
v-model="formData.shipperCountry"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<el-col :span="3">
<Formitem label="平台编码" prop="crossOrderId">
<el-input
type="text"
class="inputShadow"
id="inputInner--crossOrderId"
resize="none"
v-model="formData.crossOrderId"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<el-col :span="9">
<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>
<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 style="margin-bottom: 20px; text-align: center"></div>
</div>
</template>
<script>
import ReceiptInfoTable from "../components/ReceiptInfoTable/index.vue";
import ProductDetailTable from "../components/ProductDetailTable/index.vue";
import { getPvgInfo } from "@/api/pvg.js";
export default {
name: "",
components: { ProductDetailTable, ReceiptInfoTable },
data() {
return {
id: null,
formData: {},
logData: [],
logHeaderData: [
{
name: "回执状态",
value: "rspCode",
width: "200",
align: "left",
},
{
name: "状态时间",
value: "rspTime",
width: "400",
align: "left",
},
{
name: "回执描述",
value: "rspMsg",
width: "",
align: "left",
},
],
detailData: [],
detialHeaderData: [
{
name: "序号",
value: "gnum",
width: "",
align: "left",
},
{
name: "商品名称",
value: "itemName",
width: "",
align: "left",
},
{
name: "企业商品货号",
value: "itemNo",
width: "",
align: "left",
},
{
name: "商品编码",
value: "gcode",
width: "",
align: "left",
},
{
name: "规格型号",
value: "itemDescribe",
width: "",
align: "left",
},
{
name: "申报数量",
value: "barCode",
width: "",
align: "left",
},
{
name: "法定数量",
value: "qty1",
width: "",
align: "left",
},
{
name: "法定计量单位",
value: "unit1",
width: "",
align: "left",
slot: true,
},
{
name: "第二数量",
value: "qty2",
width: "",
align: "left",
},
{
name: "第二计量单位",
value: "unit2",
width: "",
align: "left",
slot: true,
},
{
name: "申报计量单位",
value: "unit",
width: "",
align: "left",
slot: true,
},
{
name: "商品品牌",
value: "brand",
width: "",
align: "left",
},
{
name: "企业商品描述",
value: "itemDescribe",
width: "",
align: "left",
},
{
name: "单价",
value: "price",
width: "",
align: "left",
},
{
name: "总价",
value: "totalPrice",
width: "",
align: "left",
},
{
name: "币制",
value: "currency",
width: "",
align: "left",
slot: true,
},
{
name: "条形码",
value: "gmodel",
width: "",
align: "left",
},
{
name: "备注",
value: "note",
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: {
searchData() {
this.loadings.entryLoading = true;
getPvgInfo({ id: this.id })
.then((res) => {
if (res.code === "200") {
this.formData = res.data.pvgExportOrderVo;
this.detailData = res.data.pvgExportOrderProductVo;
this.logData = res.data.pvgExportOrderReceiptVo;
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;
});
},
searchLogData() {},
hiddenLogTable() {
this.logtableType = !this.logtableType;
},
back() {
this.$router.go(-1);
},
},
};
</script>
<style scoped lang="scss">
.entry {
width: 100%;
height: 100%;
padding: 10px;
background-color: #fff;
overflow: auto;
.entryInformation {
width: 100%;
height: 100%;
}
.entryTitle {
display: flex;
justify-content: space-between;
font-weight: 600;
font-weight: 16px;
color: #000;
margin-bottom: 10px;
}
.titleBorder {
border-bottom: 1px solid #333;
}
}
</style>
<template>
<div class="entrySreach">
<el-form
class="fedexFormStyle fedexformSreach fedexformSreachBottomBorder"
ref="sreachForm"
:model="sreachFormData"
label-position="top"
size="small"
>
<el-row class="row-border">
<!-- 回执状态 -->
<el-col :span="5">
<Formitem label="回执状态" prop="rspCode">
<el-select
type="text"
id="inputInner--rspCode"
v-model="sreachFormData.rspCode"
clearable
placeholder=""
>
<el-option
v-for="(
item, index
) in $store.getters.dict.RECEIPT_STATUS.filter(
(fItem) => fItem.itemChineseName !== '已提交'
)"
:key="index"
:label="item.itemChineseName"
:value="item.itemValue"
></el-option>
</el-select>
</Formitem>
</el-col>
<!-- 运单编号 -->
<el-col :span="5">
<Formitem label="物流运单编号" prop="logisticsNo">
<FormTextareaInput
:formData="sreachFormData"
dataKey="logisticsNo"
@formChange="formChange"
/>
</Formitem>
</el-col>
<!-- 订单编号 -->
<el-col :span="5">
<Formitem label="订单编号" prop="orderNo">
<el-input
type="text"
class="inputShadow"
id="inputInner--orderNo"
resize="none"
v-model="sreachFormData.orderNo"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 电商企业代码 -->
<el-col :span="5">
<Formitem label="电商企业代码" prop="ebccode">
<el-input
type="text"
class="inputShadow"
id="inputInner--ebccode"
resize="none"
v-model="sreachFormData.ebccode"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<el-col :span="2">
<el-form-item class="textCenter">
<el-button
class="entrySreachButton"
type="text"
icon="el-icon-search"
:loading="loadings.searchLoading"
@click="search(0)"
></el-button>
</el-form-item>
</el-col>
<el-col :span="2">
<el-form-item class="textCenter">
<el-button
type="text"
size="small"
icon="el-icon-refresh"
@click="clear"
>
重置
</el-button>
</el-form-item>
</el-col>
<!-- 创建时间 -->
<el-col :span="5">
<Formitem label="创建时间" prop="createTime" :activeType="true">
<el-date-picker
class="inputInner--createTime"
id="inputInner--createTime"
v-model="sreachFormData.createTime"
type="daterange"
format="yyyy-MM-dd"
prefix-icon="none"
value-format="yyyy-MM-dd"
range-separator="至"
@change="dateChange"
/>
</Formitem>
</el-col>
</el-row>
</el-form>
<div class="optionButton">
<!-- <el-button
class="entrySaveButton"
size="small"
icon="el-icon-download"
@click="downloadData"
>
导出
</el-button> -->
</div>
<Table
class="fedexDetialTable fedexSreachTable"
ref="entryTable"
:data="tableData"
:headerData="headerData"
:maxHeight="tableMaxheight"
:border="true"
:pagination="true"
:order="false"
:loading="loadings.searchLoading"
:page="page.pageIndex"
:totalCount="page.total"
@sizeChange="sizeChange"
@currentChange="currentChange"
@cellClick="cellClick"
:selection="false"
:selectFixed="false"
:rowSelectDataType="false"
>
<template v-slot:rspCode="scope">
<TablePopover
ref="returnStatusPopover"
dataKey="rspCode"
:parentDom="$refs.entryTable"
:receiptDataHead="receiptDataHead"
:rowData="scope.row"
:tableData="tableData"
@popoverChange="popoverChange"
@popoverClose="popoverClose"
>
<div slot="title">
<span style="font-weight: 700; color: #515a6e">订单编号：</span
>{{ scope.row.orderNo }}
</div>
<div slot="buttonLabel">
{{ scope.row.rspCode }}
</div>
</TablePopover>
</template>
<template v-slot:logisticsNo="scope">
<el-button type="text" @click="view(scope.row)">{{
scope.row.logisticsNo
}}</el-button>
</template>
</Table>
</div>
</template>
<script>
import { getPvgList, getPvgReceiptInfo } from "@/api/pvg.js";
export default {
name: "ExportBillQuery",
data() {
return {
sreachFormData: {
orderNo: "",
ebccode: "",
rspCode: "",
createTime: [],
logisticsNo: "",
},
originalLogisticsNo: "", // 用于保存原始的 logisticsNo 字符串
page: {
pageIndex: 1,
pageSize: 20,
total: 0,
},
tableData: [],
headerData: [
{
name: "回执状态",
value: "rspCode",
width: "",
align: "left",
slot: true,
},
{
name: "物流运单编号",
value: "logisticsNo",
width: "",
align: "left",
slot: true,
},
{
name: "订单编号",
value: "orderNo",
width: "",
align: "left",
},
{
name: "订单类型",
value: "ext03",
width: "",
align: "left",
},
{
name: "电商企业代码",
value: "ebccode",
width: "",
align: "left",
},
{
name: "电商企业名称",
value: "ebcname",
width: "",
align: "left",
},
{
name: "物流申报企业平台代码",
value: "agentName",
width: "",
align: "left",
},
{
name: "创建时间",
value: "createTime",
width: "",
align: "left",
},
],
receiptDataHead: [
{
name: "回执状态",
value: "rspCode",
width: "120",
align: "left",
},
{
name: "状态时间",
value: "returnTime",
width: "",
align: "left",
},
{
name: "回执描述",
value: "returnInfo",
width: "",
align: "left",
},
],
loadings: {
searchLoading: false,
},
textareaVisible: {
formItemconsignmentCode: false,
formItemconsignmentHeadCode: false,
},
tableMaxheight: null,
};
},
created() {
this.search(0);
},
mounted() {
this.tableMaxheight = window.innerHeight - 300;
},
watch: {
$route() {
this.popoverClose();
},
},
methods: {
//查询
search(val) {
this.loadings.searchLoading = true;
if (val == 0) {
this.page.pageIndex = 1;
}
let obj = { ...this.sreachFormData }; // 使用对象展开运算符复制 sreachFormData
//let obj = this.sreachFormData;
obj.pageIndex = this.page.pageIndex;
obj.pageSize = this.page.pageSize;
obj.createTimeStart = "";
obj.createTimeEnd = "";
if (obj.createTime.length > 0) {
obj.startCreateTime = obj.createTime[0];
obj.endCreateTime = obj.createTime[1];
}
// 使用保存的原始 logisticsNo 字符串
obj.logisticsNo = this.originalLogisticsNo;
if (obj.logisticsNo != null && obj.logisticsNo != "") {
obj.logisticsNo = obj.logisticsNo.split("\n");
} else {
obj.logisticsNo = [];
}
getPvgList(obj)
.then((res) => {
if (res.code === "200") {
this.tableData = res.data.value;
this.page.total = res.data.totalItems;
this.tableData.forEach((item, idx) => {
item.index = idx;
item.returnStatusPopoverType = false;
item.popoverData = [];
});
} else {
this.alertWarningMsg(res.message);
}
this.loadings.searchLoading = false;
})
.catch((err) => {
console.log(err);
this.loadings.searchLoading = false;
});
},
//重置
clear() {
this.sreachFormData = {
orderNo: "",
ebccode: "",
rspCode: "",
createTime: [],
};
this.originalLogisticsNo = "";
},
//导出
downloadData() {},
//查询详情
view(val) {
this.$router.push({
name: "PvgOrderDetail",
params: { data: val },
});
},
popoverChange(val) {
console.log(val);
this.tableData = val.tableData;
this.receiptApi(val.data.id, val.status)
.then((res) => {
val.tableData.forEach((item) => {
if (item.declareId == val.data.declareId) {
item.popoverData = res;
}
});
this.tableData = val.tableData;
})
.finally(() => {
this.$nextTick(() => {
this.$store.dispatch("setLoadingState", false);
this.$refs.returnStatusPopover.tableLoading = false;
});
});
},
//查询回执
receiptApi(id) {
return new Promise((resolve, reject) => {
let obj = { id: id };
getPvgReceiptInfo(obj)
.then((res) => {
if (res.code === "200") {
resolve(res.data);
} else {
reject();
}
})
.catch((err) => {
console.log(err);
reject();
});
});
},
popoverClose(val) {
this.tableData.forEach((item) => {
item.returnStatusPopoverType = false;
item.popoverData = [];
});
this.$refs.entryTable.$refs.tables.$refs.bodyWrapper.style.overflowY =
"auto";
},
formChange(val) {
this.sreachFormData = val;
this.originalLogisticsNo = val.logisticsNo; // 保存原始的 logisticsNo 字符串
},
//分页
currentChange(val) {
this.page.pageIndex = val.page;
this.search(1);
},
sizeChange(val) {
this.page.pageSize = val;
this.search(1);
},
cellClick() {
this.popoverClose();
},
dateChange(val) {
if (val == "" || val == null) {
this.$nextTick(() => {
this.sreachFormData.createTime = [];
});
}
},
input() {
this.$forceUpdate();
},
},
};
</script>
<style scoped lang="scss">
@import "@/assets/styles/variables.scss";
.entrySreach {
height: 100%;
background-color: $menuLightBg;
.entrySreachButton {
display: inline-block;
font-size: 20px;
color: $fedexButton !important;
}
.optionButton {
padding: 10px;
text-align: right;
.el-button {
color: $fedexButton;
border-color: $fedexButton !important;
svg {
display: inline-block;
margin-right: 5px;
fill: $fedexButton;
}
}
.entrySaveButton:hover,
.entrySaveButton:focus {
color: $menuLightBg !important;
background-color: $fedexButton !important;
}
}
}
.texttareaTip {
position: absolute;
top: 52%;
right: 20px;
transform: translate(0, -50%);
z-index: 10;
}
</style>
<template>
<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"
ref="sreachForm"
:model="formData"
label-position="top"
disabled
size="small"
>
<el-row :gutter="5">
<!-- 订单编号 -->
<el-col :span="3">
<Formitem label="电商订单/海外仓订仓编号" prop="orderNo">
<el-input
type="text"
class="inputShadow"
id="inputInner--orderNo"
resize="none"
v-model="formData.orderNo"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 物流申报企业平台代码 -->
<el-col :span="3">
<Formitem label="物流申报企业平台代码" prop="logisticsSenderCode">
<el-input
type="text"
class="inputShadow"
id="inputInner--logisticsSenderCode"
resize="none"
v-model="formData.logisticsSenderCode"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 申报类型 -->
<el-col :span="3">
<Formitem label="申报类型" prop="appType">
<el-input
type="text"
class="inputShadow"
id="inputInner--appType"
resize="none"
v-model="formData.appType"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 电商平台代码 -->
<el-col :span="3">
<Formitem label="电商平台代码" prop="ebpCode">
<el-input
type="text"
class="inputShadow"
id="inputInner--ebpCode"
resize="none"
v-model="formData.ebpCode"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 电商平台/海外仓名称 -->
<el-col :span="6">
<Formitem label="电商平台/海外仓名称" prop="ebpName">
<el-input
type="text"
class="inputShadow"
id="inputInner--ebpName"
resize="none"
v-model="formData.ebpName"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 电商企业代码 -->
<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="6">
<Formitem label="电商企业名称" prop="ebcName">
<el-input
type="text"
class="inputShadow"
id="inputInner--ebcName"
resize="none"
v-model="formData.ebcName"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
</el-row>
<el-row :gutter="5">
<!-- 商品金额 -->
<el-col :span="3">
<Formitem label="商品金额" prop="totalPrice">
<el-input
type="text"
class="inputShadow"
id="inputInner--totalPrice"
resize="none"
v-model="formData.totalPrice"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 运杂费 -->
<el-col :span="3">
<Formitem label="运杂费" prop="freight">
<el-input
type="text"
class="inputShadow"
id="inputInner--freight"
resize="none"
v-model="formData.freight"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 币制 -->
<el-col :span="3">
<Formitem label="币制" prop="currency">
<el-select
type="text"
id="inputInner--currency"
v-model="formData.currency"
clearable
placeholder=""
>
<el-option
v-for="(item, index) in $store.getters.dict.CURRENCY"
:key="index"
:label="item.itemChineseName"
:value="item.itemValue"
></el-option>
</el-select>
</Formitem>
</el-col>
<!-- 收货人名称 -->
<el-col :span="3">
<Formitem label="收货人名称" prop="consignee">
<el-input
type="text"
class="inputShadow"
id="inputInner--consignee"
resize="none"
v-model="formData.consignee"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 收货人电话 -->
<el-col :span="3">
<Formitem label="收货人电话" prop="consigneeTelephone">
<el-input
type="text"
class="inputShadow"
id="inputInner--consigneeTelephone"
resize="none"
v-model="formData.consigneeTelephone"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 收货人地址 -->
<el-col :span="3">
<Formitem label="收货人地址" prop="consigneeAddress">
<el-input
type="text"
class="inputShadow"
id="inputInner--consigneeAddress"
resize="none"
v-model="formData.consigneeAddress"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 收货人所在国 -->
<el-col :span="3">
<Formitem label="收货人所在国" prop="consigneeCountry">
<el-input
type="text"
class="inputShadow"
id="inputInner--consigneeCountry"
resize="none"
v-model="formData.consigneeCountry"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 发货人名称 -->
<el-col :span="3">
<Formitem label="发货人名称" prop="shipper">
<el-input
type="text"
class="inputShadow"
id="inputInner--shipper"
resize="none"
v-model="formData.shipper"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 发货人电话 -->
<el-col :span="3">
<Formitem label="发货人电话" prop="shipperTelephone">
<el-input
type="text"
class="inputShadow"
id="inputInner--shipperTelephone"
resize="none"
v-model="formData.shipperTelephone"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 发货人地址 -->
<el-col :span="3">
<Formitem label="发货人地址" prop="shipperAddress">
<el-input
type="text"
class="inputShadow"
id="inputInner--shipperAddress"
resize="none"
v-model="formData.shipperAddress"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 发货人所在国 -->
<el-col :span="3">
<Formitem label="发货人所在国" prop="shipperCountry">
<el-input
type="text"
class="inputShadow"
id="inputInner--shipperCountry"
resize="none"
v-model="formData.shipperCountry"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<el-col :span="3">
<Formitem label="平台编码" prop="crossOrderId">
<el-input
type="text"
class="inputShadow"
id="inputInner--crossOrderId"
resize="none"
v-model="formData.crossOrderId"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<el-col :span="9">
<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>
<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 style="margin-bottom: 20px; text-align: center"></div>
</div>
</template>
<script>
import ReceiptInfoTable from "../components/ReceiptInfoTable/index.vue";
import ProductDetailTable from "../components/ProductDetailTable/index.vue";
import { getPvgWaybillInfo } from "@/api/pvg.js";
export default {
name: "",
components: { ProductDetailTable, ReceiptInfoTable },
data() {
return {
id: null,
formData: {},
logData: [],
logHeaderData: [
{
name: "回执状态",
value: "rspCode",
width: "200",
align: "left",
},
{
name: "状态时间",
value: "rspTime",
width: "400",
align: "left",
},
{
name: "回执描述",
value: "rspMsg",
width: "",
align: "left",
},
],
detailData: [],
detialHeaderData: [
{
name: "序号",
value: "gnum",
width: "",
align: "left",
},
{
name: "商品名称",
value: "itemName",
width: "",
align: "left",
},
{
name: "企业商品货号",
value: "itemNo",
width: "",
align: "left",
},
{
name: "商品编码",
value: "gcode",
width: "",
align: "left",
},
{
name: "规格型号",
value: "itemDescribe",
width: "",
align: "left",
},
{
name: "申报数量",
value: "barCode",
width: "",
align: "left",
},
{
name: "法定数量",
value: "qty1",
width: "",
align: "left",
},
{
name: "法定计量单位",
value: "unit1",
width: "",
align: "left",
slot: true,
},
{
name: "第二数量",
value: "qty2",
width: "",
align: "left",
},
{
name: "第二计量单位",
value: "unit2",
width: "",
align: "left",
slot: true,
},
{
name: "申报计量单位",
value: "unit",
width: "",
align: "left",
},
{
name: "商品品牌",
value: "brand",
width: "",
align: "left",
},
{
name: "企业商品描述",
value: "itemDescribe",
width: "",
align: "left",
},
{
name: "单价",
value: "price",
width: "",
align: "left",
},
{
name: "总价",
value: "totalPrice",
width: "",
align: "left",
},
{
name: "币制",
value: "currency",
width: "",
align: "left",
slot: true,
},
{
name: "条形码",
value: "gmodel",
width: "",
align: "left",
},
{
name: "备注",
value: "note",
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: {
searchData() {
this.loadings.entryLoading = true;
getPvgWaybillInfo({ id: this.id })
.then((res) => {
if (res.code === "200") {
this.formData = res.data.pvgExportOrderVo;
this.detailData = res.data.pvgExportOrderProductVo;
this.logData = res.data.pvgExportOrderReceiptVo;
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;
});
},
searchLogData() {},
hiddenLogTable() {
this.logtableType = !this.logtableType;
},
back() {
this.$router.go(-1);
},
},
};
</script>
<style scoped lang="scss">
.entry {
width: 100%;
height: 100%;
padding: 10px;
background-color: #fff;
overflow: auto;
.entryInformation {
width: 100%;
height: 100%;
}
.entryTitle {
display: flex;
justify-content: space-between;
font-weight: 600;
font-weight: 16px;
color: #000;
margin-bottom: 10px;
}
.titleBorder {
border-bottom: 1px solid #333;
}
}
</style>
<template>
<div class="entrySreach">
<el-form
class="fedexFormStyle fedexformSreach fedexformSreachBottomBorder"
ref="sreachForm"
:model="sreachFormData"
label-position="top"
size="small"
>
<el-row class="row-border">
<!-- 回执状态 -->
<el-col :span="5">
<Formitem label="回执状态" prop="rspCode">
<el-select
type="text"
id="inputInner--rspCode"
v-model="sreachFormData.rspCode"
clearable
placeholder=""
>
<el-option
v-for="(
item, index
) in $store.getters.dict.RECEIPT_STATUS.filter(
(fItem) => fItem.itemChineseName !== '已提交'
)"
:key="index"
:label="item.itemChineseName"
:value="item.itemValue"
></el-option>
</el-select>
</Formitem>
</el-col>
<!-- 运单编号 -->
<el-col :span="5">
<Formitem label="物流运单编号" prop="logisticsNo">
<FormTextareaInput
:formData="sreachFormData"
dataKey="logisticsNo"
@formChange="formChange"
/>
</Formitem>
</el-col>
<!-- 订单编号 -->
<el-col :span="5">
<Formitem label="提运单号" prop="billNo">
<el-input
type="text"
class="inputShadow"
id="inputInner--billNo"
resize="none"
v-model="sreachFormData.billNo"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- 电商企业代码 -->
<el-col :span="5">
<Formitem label="订单编号" prop="orderNo">
<el-input
type="text"
class="inputShadow"
id="inputInner--orderNo"
resize="none"
v-model="sreachFormData.orderNo"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<el-col :span="2">
<el-form-item class="textCenter">
<el-button
class="entrySreachButton"
type="text"
icon="el-icon-search"
:loading="loadings.searchLoading"
@click="search(0)"
></el-button>
</el-form-item>
</el-col>
<el-col :span="2">
<el-form-item class="textCenter">
<el-button
type="text"
size="small"
icon="el-icon-refresh"
@click="clear"
>
重置
</el-button>
</el-form-item>
</el-col>
<!-- 创建时间 -->
<el-col :span="5">
<Formitem label="创建时间" prop="createTime" :activeType="true">
<el-date-picker
class="inputInner--createTime"
id="inputInner--createTime"
v-model="sreachFormData.createTime"
type="daterange"
format="yyyy-MM-dd"
prefix-icon="none"
value-format="yyyy-MM-dd"
range-separator="至"
@change="dateChange"
/>
</Formitem>
</el-col>
</el-row>
</el-form>
<div class="optionButton">
<!-- <el-button
class="entrySaveButton"
size="small"
icon="el-icon-download"
@click="downloadData"
>
导出
</el-button> -->
</div>
<Table
class="fedexDetialTable fedexSreachTable"
ref="entryTable"
:data="tableData"
:headerData="headerData"
:maxHeight="tableMaxheight"
:border="true"
:pagination="true"
:order="false"
:loading="loadings.searchLoading"
:page="page.pageIndex"
:totalCount="page.total"
@sizeChange="sizeChange"
@currentChange="currentChange"
@cellClick="cellClick"
:selection="false"
:selectFixed="false"
:rowSelectDataType="false"
>
<template v-slot:rspCode="scope">
<TablePopover
ref="returnStatusPopover"
dataKey="rspCode"
:parentDom="$refs.entryTable"
:receiptDataHead="receiptDataHead"
:rowData="scope.row"
:tableData="tableData"
@popoverChange="popoverChange"
@popoverClose="popoverClose"
>
<div slot="title">
<span style="font-weight: 700; color: #515a6e">订单编号：</span
>{{ scope.row.orderNo }}
</div>
<div slot="buttonLabel">
{{ scope.row.rspCode }}
</div>
</TablePopover>
</template>
<template v-slot:logisticsNo="scope">
<el-button type="text" @click="view(scope.row)">{{
scope.row.logisticsNo
}}</el-button>
</template>
</Table>
</div>
</template>
<script>
import { getPvgWaybillList, getPvgWaybillReceiptInfo } from "@/api/pvg.js";
export default {
name: "ExportBillQuery",
data() {
return {
sreachFormData: {
billNo: "",
orderNo: "",
rspCode: "",
createTime: [],
logisticsNo: "",
},
originalLogisticsNo: "", // 用于保存原始的 logisticsNo 字符串
page: {
pageIndex: 1,
pageSize: 20,
total: 0,
},
tableData: [],
headerData: [
{
name: "回执状态",
value: "rspCode",
width: "",
align: "left",
slot: true,
},
{
name: "物流运单编号",
value: "logisticsNo",
width: "",
align: "left",
slot: true,
},
{
name: "提运单号",
value: "billNo",
width: "",
align: "left",
},
{
name: "订单编号",
value: "orderNo",
width: "",
align: "left",
},
{
name: "大包裹号",
value: "totalPackageNo",
width: "",
align: "left",
},
{
name: "主要货物信息",
value: "mainGName",
width: "",
align: "left",
},
{
name: "报送类型",
value: "appType",
width: "",
align: "left",
},
{
name: "创建时间",
value: "createTime",
width: "",
align: "left",
},
],
receiptDataHead: [
{
name: "回执状态",
value: "rspCode",
width: "120",
align: "left",
},
{
name: "状态时间",
value: "returnTime",
width: "",
align: "left",
},
{
name: "回执描述",
value: "returnInfo",
width: "",
align: "left",
},
],
loadings: {
searchLoading: false,
},
textareaVisible: {
formItemconsignmentCode: false,
formItemconsignmentHeadCode: false,
},
tableMaxheight: null,
};
},
created() {
this.search(0);
},
mounted() {
this.tableMaxheight = window.innerHeight - 300;
},
watch: {
$route() {
this.popoverClose();
},
},
methods: {
//查询
search(val) {
this.loadings.searchLoading = true;
if (val == 0) {
this.page.pageIndex = 1;
}
let obj = { ...this.sreachFormData }; // 使用对象展开运算符复制 sreachFormData
//let obj = this.sreachFormData;
obj.pageIndex = this.page.pageIndex;
obj.pageSize = this.page.pageSize;
obj.createTimeStart = "";
obj.createTimeEnd = "";
if (obj.createTime.length > 0) {
obj.startCreateTime = obj.createTime[0];
obj.endCreateTime = obj.createTime[1];
}
// 使用保存的原始 logisticsNo 字符串
obj.logisticsNo = this.originalLogisticsNo;
if (obj.logisticsNo != null && obj.logisticsNo != "") {
obj.logisticsNo = obj.logisticsNo.split("\n");
} else {
obj.logisticsNo = [];
}
getPvgWaybillList(obj)
.then((res) => {
if (res.code === "200") {
this.tableData = res.data.value;
this.page.total = res.data.totalItems;
this.tableData.forEach((item, idx) => {
item.index = idx;
item.returnStatusPopoverType = false;
item.popoverData = [];
});
} else {
this.alertWarningMsg(res.message);
}
this.loadings.searchLoading = false;
})
.catch((err) => {
console.log(err);
this.loadings.searchLoading = false;
});
},
//重置
clear() {
this.sreachFormData = {
billNo: "",
orderNo: "",
rspCode: "",
createTime: [],
};
this.originalLogisticsNo = "";
},
//导出
downloadData() {},
//查询详情
view(val) {
this.$router.push({
name: "PvgOrderDetail",
params: { data: val },
});
},
popoverChange(val) {
console.log(val);
this.tableData = val.tableData;
this.receiptApi(val.data.id, val.status)
.then((res) => {
val.tableData.forEach((item) => {
if (item.declareId == val.data.declareId) {
item.popoverData = res;
}
});
this.tableData = val.tableData;
})
.finally(() => {
this.$nextTick(() => {
this.$store.dispatch("setLoadingState", false);
this.$refs.returnStatusPopover.tableLoading = false;
});
});
},
//查询回执
receiptApi(id) {
return new Promise((resolve, reject) => {
let obj = { id: id };
getPvgWaybillReceiptInfo(obj)
.then((res) => {
if (res.code === "200") {
resolve(res.data);
} else {
reject();
}
})
.catch((err) => {
console.log(err);
reject();
});
});
},
popoverClose(val) {
this.tableData.forEach((item) => {
item.returnStatusPopoverType = false;
item.popoverData = [];
});
this.$refs.entryTable.$refs.tables.$refs.bodyWrapper.style.overflowY =
"auto";
},
formChange(val) {
this.sreachFormData = val;
this.originalLogisticsNo = val.logisticsNo; // 保存原始的 logisticsNo 字符串
},
//分页
currentChange(val) {
this.page.pageIndex = val.page;
this.search(1);
},
sizeChange(val) {
this.page.pageSize = val;
this.search(1);
},
cellClick() {
this.popoverClose();
},
dateChange(val) {
if (val == "" || val == null) {
this.$nextTick(() => {
this.sreachFormData.createTime = [];
});
}
},
input() {
this.$forceUpdate();
},
},
};
</script>
<style scoped lang="scss">
@import "@/assets/styles/variables.scss";
.entrySreach {
height: 100%;
background-color: $menuLightBg;
.entrySreachButton {
display: inline-block;
font-size: 20px;
color: $fedexButton !important;
}
.optionButton {
padding: 10px;
text-align: right;
.el-button {
color: $fedexButton;
border-color: $fedexButton !important;
svg {
display: inline-block;
margin-right: 5px;
fill: $fedexButton;
}
}
.entrySaveButton:hover,
.entrySaveButton:focus {
color: $menuLightBg !important;
background-color: $fedexButton !important;
}
}
}
.texttareaTip {
position: absolute;
top: 52%;
right: 20px;
transform: translate(0, -50%);
z-index: 10;
}
</style>