<template>
<div class="app-container shipping-detail">
<el-row type="flex" style="margin-top: 15px; margin-bottom: 15px" justify="center">
<el-col :xs="24" :sm="24" :md="24" :lg="20" :xl="22">
<div style="display: flex; justify-content: space-between;align-items: flex-end;">
<h2>{{$t('出货详情')}}</h2>
<div>
<el-button size="small" @click="handleCommand('edit')">{{$t('编辑')}}</el-button>
<el-button size="small" @click="handleCommand('router')">{{$t('操作')}}</el-button>
<el-button type="primary" size="small" @click="handleCommand('error')">{{$t('异常登记')}}</el-button>
<el-button type="primary" size="small" @click="handleCommand('cost')">{{$t('费用登记')}}</el-button>
<el-button type="danger" size="small" @click="handleCommand('delete')">{{$t('删除')}}</el-button>
</div>
</div>
<el-card style="margin-top: 15px">
<el-descriptions :column="4" border>
<el-descriptions-item :label="$t('自编号')">
{{shipmentObj.selfNo}}
</el-descriptions-item>
<el-descriptions-item :label="$t('运输方式')">
<dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="shipmentObj.transportType" />
</el-descriptions-item>
<!-- <el-descriptions-item :label="$t('出货渠道')">
{{getShipChannelName(shipmentObj.shippingChannelId)}}
</el-descriptions-item> -->
<el-descriptions-item :label="$t('柜型')">
{{getCabinetLabel(shipmentObj.cabinetId)}}
</el-descriptions-item>
<el-descriptions-item :label="$t('状态')">
{{shipmentObj.shipmentStatusText}}
</el-descriptions-item>
<el-descriptions-item :label="$t('总计')">
{{getBoxSum(shipmentObj.boxStatistics)}}
</el-descriptions-item>
<el-descriptions-item :label="$t('始发地')">
{{getCityName(shipmentObj.startWarehouseId)}}
</el-descriptions-item>
<el-descriptions-item :label="$t('目的地')">
{{getCityName(shipmentObj.destWarehouseId)}}
</el-descriptions-item>
<el-descriptions-item label="SO NO">
{{shipmentObj.bookSeaInfo ? shipmentObj.bookSeaInfo.sono : '' }}
</el-descriptions-item>
</el-descriptions>
</el-card>
<el-tabs style="margin-top: 15px" type="border-card" value="detail">
<el-tab-pane :label="$t('明细')" name="detail">
<div class="detail-pane">
<div>{{$t('当前部分')}}：</div>
<el-select :placeholder="$t('请选择')" v-model="sectionId" @change="sectionChange">
<el-option key="0" :label="$t('全部')" value="0"></el-option>
<el-option v-for="item in sectionList" :key="item.id" :label="item.title" :value="item.id"></el-option>
</el-select>
<p class="box-weight">
{{getSectionInfo}}
</p>
<div style="margin-left:30px;">
<el-button type="primary" size="small" @click="()=>updateStatus('selected')">{{$t('更新所选订单状态')}}</el-button>
<el-button type="primary" size="small" @click="()=>updateStatus('all')">{{$t('更新全部订单状态')}}</el-button>
</div>
<div class="document-status">
<p>{{$t('单证状态')}}：</p>
<template v-for="(item, index) in getDocStatus(sectionObj.sectionOrderList)">
<dict-tag :type="DICT_TYPE.ECW_CUSTOMS_TYPE" :value="item" :key="index" />
</template>
</div>
</div>
<el-table :data="sectionObj.sectionOrderList" style="width: 100%" border @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" :selectable="selectable"></el-table-column>>
<el-table-column align="center" :label="$t('序号')" width="50" prop="tidanNum" />
<el-table-column prop="orderNo" :label="$t('订单号')" align="center">
<template v-slot="scope">
<a href="javascript:void(0)" @click="jumpOrderDetail(scope.row)">{{ scope.row.orderNo }}</a>
</template>
</el-table-column>
<el-table-column prop="goodsList" :label="$t('货物信息')" width="230px" align="center">
<template v-slot="{row}">
<section>
<div v-for="(item, index) in row.goodsList" :key="index">
{{index+1}}：{{item.prodTitleZh}}
</div>
</section>
</template>
</el-table-column>
<el-table-column prop="num" :label="$t('计划箱数')" align="center"></el-table-column>
<el-table-column prop="installNum" :label="$t('实装箱数')" align="center"></el-table-column>
<el-table-column prop="unloadNum" :label="$t('卸柜箱数')" align="center"></el-table-column>
<el-table-column prop="destWarehouseName" :label="$t('提货点')" align="center"></el-table-column>
<el-table-column prop="volume" :label="$t('体积')" align="center"></el-table-column>
<el-table-column prop="weight" :label="$t('重量')" align="center"></el-table-column>
<el-table-column prop="totalWorth" :label="$t('货值')" align="center"></el-table-column>
<el-table-column prop="customsType" :label="$t('报关方式')" align="center">
<template slot-scope="scope">
<div :class="scope.row.customsType !== 1 ? 'customsType-red' : ''">
<dict-tag :type="DICT_TYPE.ECW_CUSTOMS_TYPE" :value="scope.row.customsType" />
</div>
</template>
</el-table-column>
<el-table-column prop="customsFee" :label="$t('报关费用')" align="center"></el-table-column>
<el-table-column prop="" :label="$t('操作')" align="center" width="120px">
<template slot-scope="scope">
<el-button type="primary" size="small" :disabled="scope.row.abnormalDealStatus === 1" @click="()=>updateStatus('single', scope.row)">{{$t('更新状态')}}</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane :label="$t('状态')" name="status">
<div v-for="(item, index) in logList" :key="item.id" :class="`shipping-status ${index === 0 ? 'curr-status' : '' }`">
<div class="status-line"></div>
<div class="status-number">{{logList.length - index}}</div>
<div class="status-info">
<div>{{$l(item, 'title')}}</div>
<div>
<p>{{formatDate(item.createTime)}}</p>
<p>{{item.operator}}</p>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane :label="$t('费用')" name="fee">
<el-table :data="costList" style="width: 100%" border>
<el-table-column type="index" align="center" :label="$t('序号')" width="50" />
<el-table-column prop="costType" :label="$t('费用类型')" align="center">
<template slot-scope="scope">
<dict-tag :type="DICT_TYPE.FEE_TYPE" :value="scope.row.costType" />
</template>
</el-table-column>
<el-table-column prop="supplierId" :label="$t('供应商')" align="center">
<template slot-scope="scope">
{{getSupplier(scope.row.supplierId)}}
</template>
</el-table-column>
<el-table-column prop="price" :label="$t('金额')" align="center"></el-table-column>
<el-table-column prop="" :label="$t('实付金额')" align="center"></el-table-column>
<el-table-column prop="" :label="$t('实付日期')" align="center"></el-table-column>
<el-table-column prop="" :label="$t('操作')" align="center">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="editCostClick(scope.row)" style="marginRight:10px;">{{$t('编辑')}}</el-button>
<el-popconfirm :title="$t('确定是否删除')" @confirm="deleteCostClick(scope.row)">
<el-button type="danger" size="small" slot="reference">{{$t('删除')}}</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane :label="$t('异常')" name="error">
<el-table :data="errorList" style="width: 100%" border>
<el-table-column type="index" align="center" :label="$t('序号')" width="50" />
<el-table-column prop="opStep" :label="$t('操作')" align="center">
<template slot-scope="scope">
<dict-tag :type="DICT_TYPE.BOX_SHIPPING_PROCESS" :value="scope.row.opStep" />
</template>
</el-table-column>
<el-table-column prop="billAbnId" :label="$t('异常')" align="center">
<template slot-scope="scope">
<dict-tag :type="DICT_TYPE.BOX_SHIPPING_TICKET_EXCEPTION" :value="scope.row.billAbnId" />
</template>
</el-table-column>
<el-table-column prop="abnDetail" :label="$t('异常描述')" align="center" width="700"></el-table-column>
<el-table-column prop="delayDays" :label="$t('异常延迟天数')" align="center"></el-table-column>
<el-table-column prop="" :label="$t('异常时间')" align="center" width="300">
<template slot-scope="scope">
<span v-if="scope.row.abnStartTime">{{formatDate(scope.row.abnStartTime)}} - </span>
<span v-if="scope.row.abnEndTime">{{formatDate(scope.row.abnEndTime)}}</span>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane :label="$t('表单')" name="download">
<el-table :data="downloadList" style="width: 50%">
<el-table-column prop="title" :label="$t('文件类型')"></el-table-column>
<el-table-column prop="" :label="$t('下载链接')">
<template slot-scope="scope">
<a v-if="scope.row.serviceName" href="javascript:void(0)" @click="downloadDetailFile(scope.row)">{{$t('下载')}}</a>
<div v-else>{{$t('未完成')}}</div>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
<!-- 对话框(添加 / 修改) -->
<el-dialog :title="dialogConfig.title" :visible.sync="dialogConfig.visible" :width="dialogConfig.width" append-to-body class="shippingSea-dialog">
<template v-if="dialogConfig.type === 'edit'">
<editForm v-if="dialogConfig.visible" @closeDialog="closeDialog" :shipmentObj="shipmentObj" :warehouseList="warehouseList" :transportTypes="transportTypes" :cabinetList="cabinetList" />
</template>
<template v-if="dialogConfig.type === 'cost'">
<costForm v-if="dialogConfig.visible" @closeDialog="closeDialog" :shipmentObj="shipmentObj" :costDetail="costDetail" />
</template>
<template v-if="dialogConfig.type === 'error'">
<regError v-if="dialogConfig.visible" @closeDialog="closeDialog" :shipmentObj="shipmentObj" :allUsers="allUsers" />
</template>
<template v-if="dialogConfig.type === 'updateError'">
<updateError v-if="dialogConfig.visible" @closeDialog="closeDialog" :shipmentObj="shipmentObj" :errorInfo="errorInfo" />
</template>
</el-dialog>
</div>
</template>
<script>
import {
getbox,
getLogList,
getCostList,
getAbnormalList,
deleteCost,
deletebox,
} from "@/api/ecw/box";
import { getChannelList } from "@/api/ecw/channel";
import { getCabinetPage } from "@/api/ecw/cabinet";
import { getWarehouseList } from "@/api/ecw/warehouse";
import {
getTotlContent,
formatDate,
serviceMsg,
downloadFile,
downloadFileByUrl,
} from "./shippingSea/utils";
import { getSectionList, boxGoodsDetail } from "@/api/ecw/boxSea";
import { getSupplierPage } from "@/api/ecw/supplier";
import costForm from "./costForm.vue";
import regError from "./regError.vue";
import editForm from "./editForm.vue";
import updateError from "./updateError.vue";
import { listUser } from "@/api/system/user";
export default {
name: "boxDetail",
props: {
shipmentId: String,
},
components: {
costForm,
regError,
editForm,
updateError,
},
created() {
this.transportTypes = this.getDictDatas(
this.DICT_TYPE.ECW_TRANSPORT_TYPE
).filter((item) => item.value == "1" || item.value == "2");
this.initData();
this.queryAllData();
// 用户
listUser({ pageNo: "1", pageSize: "10000" }).then((res) => {
const { data } = res;
this.allUsers = data.list ?? [];
});
},
data() {
return {
// 出货对象
shipmentObj: {},
// 渠道
channelList: [],
// 柜型
cabinetList: [],
// 仓库
warehouseList: [],
// 供应商
allSupplier: [],
allUsers: [],
// 部分list
sectionList: [],
// 单证数组
docStatus: [],
// 操作日志
logList: [],
// 费用
costList: [],
// 异常
errorList: [],
// 部分订单商品
sectionObj: {
secStatistics: {},
sectionOrderList: [],
totalStatistics: {},
},
// 部分ID
sectionId: "0",
// 弹窗配置
dialogConfig: {
visible: false,
title: "",
width: "600px",
type: "",
},
// 运输方式
transportTypes: [],
// 费用详情
costDetail: {},
// 下载
downloadList: [
{ title: this.$t("预装单"), serviceName: "downloadPreloadGoodsList" },
{ title: this.$t("已装单"), serviceName: "downloadLoadGoodsList" },
{ title: this.$t("应收汇总表"), serviceName: "downloadReceivableList" },
{
title: this.$t("提货单"),
serviceName: "zipDownload",
fileFormat: "zip",
},
{
title: "agent list",
serviceName: "downloadAgentListFiles",
type: "url",
},
{ title: "soncap", serviceName: "downloadSoncapFiles", type: "url" },
{
title: this.$t("提单Copy"),
serviceName: "downloadLadingCopy",
type: "url",
},
],
// 选中行
selectedRows: [],
// 修改异常
errorInfo: {
orderList: [],
errorType: "",
operate: "",
},
};
},
methods: {
selectable(row, index) {
if (row.abnormalDealStatus === 1) return false;
return true;
},
/* 全选 */
handleSelectionChange(selected) {
this.selectedRows = selected;
},
/* 更新状态 */
updateStatus(type, row) {
let orders = [];
if (type === "selected") {
if (!this.selectedRows.length) {
this.$message.error("请选择需要更新的订单");
return;
}
orders = this.selectedRows;
} else if (type === "all") {
// 筛选未处理的订单
orders = this.sectionObj.sectionOrderList.filter(
(item) => item.abnormalDealStatus === 0
);
if (!orders.length) {
this.$message.error("没有订单需要更新");
return;
}
} else if (type === "single") {
orders = [row];
}
this.getErrorType();
this.$set(this.errorInfo, "orderList", orders);
this.$set(this.errorInfo, "operate", type);
// 判断异常类型
this.handleCommand("updateError");
},
getErrorType() {
for (const [key, value] of Object.entries(this.shipmentObj)) {
// 报关异常 customsHasAbnormal
if (key === "customsHasAbnormal" && value) {
this.$set(this.errorInfo, "errorType", "customs");
this.$set(this.dialogConfig, "title", this.$t("更新报关异常状态"));
}
// 起运异常 shippingHasAbnormal
if (key === "shippingHasAbnormal" && value) {
this.$set(this.errorInfo, "errorType", "shipping");
this.$set(this.dialogConfig, "title", this.$t("更新起运异常状态"));
}
// 到港异常 arrivalHasAbnormal
if (key === "arrivalHasAbnormal" && value) {
this.$set(this.errorInfo, "errorType", "arrival");
this.$set(this.dialogConfig, "title", this.$t("更新到港异常状态"));
}
}
},
// 初始化字典数据
initData() {
// 查询渠道
getChannelList().then((res) => (this.channelList = res.data));
// 查询柜型
getCabinetPage(null).then(
(response) => (this.cabinetList = response.data.list)
);
// 仓库
getWarehouseList().then((r) => {
this.warehouseList = r.data;
});
// 供应商
getSupplierPage({ pageNo: "1", pageSize: "10000" }).then((res) => {
const { data } = res;
this.allSupplier = data.list;
});
},
// 查询详情页所有数据
queryAllData() {
let param = { shipmentId: this.shipmentId };
// 查询出货信息
this.getBoxDetail();
// 部分
getSectionList(param).then((res) => {
this.sectionList = res.data.map((item, index) => {
return {
...item,
title: this.$t("第{index}部分", { index: index + 1 }),
};
});
});
// 明细
this.getBoxGoodsDetail();
// 状态
getLogList(param).then((res) => {
this.logList = res.data;
});
// 费用
this.getCost();
// 异常
getAbnormalList(param).then((res) => {
this.errorList = res.data;
});
//表单
},
// 出货信息
getBoxDetail() {
getbox(this.shipmentId).then((res) => {
const { data } = res;
this.shipmentObj = data ?? {};
});
},
// 获取费用
getCost() {
getCostList({ shipmentId: this.shipmentId }).then((res) => {
this.costList = res.data;
});
},
// 部分切换
sectionChange() {
this.getBoxGoodsDetail();
},
// 获取部分详情以及物品
getBoxGoodsDetail() {
boxGoodsDetail({
shipmentId: this.shipmentId,
secId: this.sectionId,
}).then((res) => {
this.sectionObj = res.data;
});
},
// 供应商
getSupplier(id) {
let arr = this.allSupplier.find((item) => item.id == id) ?? {};
return this.$l(arr, "company");
},
editCostClick(row) {
this.costDetail = row;
this.handleCommand("cost");
},
deleteCostClick(row) {
deleteCost(row.id).then((res) => {
serviceMsg(res, this).then((res) => {
this.getCost();
});
});
},
/* 跳转订单详情 */
jumpOrderDetail(row) {
this.$router.push({
path: "/order/detail",
query: { orderId: row.orderId },
});
},
// 事件执行
handleCommand(type) {
switch (type) {
case "edit":
this.$set(this.dialogConfig, "visible", true);
this.$set(this.dialogConfig, "title", this.$t("修改出货"));
this.$set(this.dialogConfig, "type", "edit");
break;
case "router":
this.$router.push("/boxSea/shippingSea/" + this.shipmentId);
break;
case "cost":
this.$set(this.dialogConfig, "visible", true);
this.$set(this.dialogConfig, "title", this.$t("费用登记"));
this.$set(this.dialogConfig, "type", "cost");
break;
case "error":
this.$set(this.dialogConfig, "visible", true);
this.$set(this.dialogConfig, "title", this.$t("异常登记"));
this.$set(this.dialogConfig, "type", "error");
break;
case "delete":
this.$modal
.confirm(
this.$t("是否确认删除出货编号为 {no} 的数据项?", {
no: this.shipmentObj.selfNo,
})
)
.then(() => {
return deletebox(this.shipmentId);
})
.then((res) => {
serviceMsg(res, this).then((res) => {
// 获取当前path
const currPath = this.$router.currentRoute.path;
// 根据path获取view
const view = this.visitedViews.find(
(item) => item.path === currPath
);
if (view) {
this.$store.dispatch("tagsView/delView", view);
this.$router.push("/shipment/boxSea");
}
});
})
.catch(() => {});
break;
case "updateError":
this.$set(this.dialogConfig, "visible", true);
this.$set(this.dialogConfig, "type", "updateError");
break;
}
},
// 关闭弹框
closeDialog(type) {
this.$set(this.dialogConfig, "visible", false);
if (type === "edit") {
this.getBoxDetail();
}
if (type === "cost") {
this.getCost();
}
if (type === "error") {
getAbnormalList({ shipmentId: this.shipmentId }).then((res) => {
this.errorList = res.data;
});
}
if (type === "detail") {
this.getBoxGoodsDetail();
}
},
formatDate,
downloadDetailFile(row) {
const { fileFormat, type } = row;
if (type === "url") {
downloadFileByUrl(row.serviceName, { shipmentId: this.shipmentId });
} else {
let fileName = `${row.title}(${this.shipmentObj.selfNo}).${
fileFormat ?? "xlsx"
}`;
downloadFile(
row.serviceName,
{ shipmentId: this.shipmentId },
fileName,
fileFormat ?? "xlsx"
);
}
},
},
computed: {
visitedViews() {
return this.$store.state.tagsView.visitedViews;
},
// 单证状态
getDocStatus() {
return (list = []) => {
// 获取类型
let customsTypes = list.map((item) => item.customsType);
// 去重
return Array.from(new Set(customsTypes));
};
},
/* 渠道 */
getShipChannelName() {
return (shippingChannelId) => {
for (const channelItem of this.channelList) {
if (channelItem.channelId == shippingChannelId) {
return this.$l(channelItem, "name");
}
}
};
},
/* 获取柜型 */
getCabinetLabel() {
return (cabinetId) => {
for (const cabinetItem of this.cabinetList) {
if (cabinetItem.id == cabinetId) {
return cabinetItem.name;
}
}
};
},
/* 总计 */
getBoxSum() {
return (boxStatistics) => {
if (boxStatistics) {
return this.$t("{num}箱 {volume}m³ {weight}kg", {
num: boxStatistics.num ?? 0,
volume: boxStatistics.volume ?? 0,
weight: boxStatistics.weight ?? 0,
});
}
return;
};
},
/* 获取仓库 */
getCityName() {
return (id) => {
let arr = this.warehouseList.filter((item) => item.id == id);
return arr.length > 0 ? this.$l(arr[0], "title") : this.$t("无");
};
},
// 部分信息
getSectionInfo() {
const { totalStatistics, secStatistics } = this.sectionObj;
if (!this.sectionId) {
return getTotlContent(totalStatistics);
} else {
return getTotlContent(secStatistics);
}
},
},
};
</script>
<style lang="scss">
.shipping-detail {
.detail-pane {
display: flex;
align-items: center;
margin-bottom: 5px;
.box-weight {
margin-left: 10px;
}
.document-status {
flex: 1;
justify-content: flex-end;
display: flex;
align-items: center;
> span {
margin-right: 10px;
}
}
}
.el-table__body {
.customsType-red {
color: red;
}
}
.shipping-status {
position: relative;
display: flex;
.status-line {
width: 1px;
height: calc(100% - 35px);
background-color: #e8eaec;
position: absolute;
left: 13px;
top: 30px;
}
.status-number {
width: 26px;
height: 26px;
border: 1px solid #ccc;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.status-info {
color: #999;
margin-left: 20px;
> :first-child {
font-size: 14px;
font-weight: bolder;
line-height: 26px;
}
> :last-child {
line-height: 26px;
display: flex;
> p {
margin: 0;
margin-right: 10px;
}
}
}
&.curr-status {
.status-number {
color: #fff;
background-color: #2d8cf0;
border-color: #2d8cf0;
}
.status-info {
color: #666;
}
}
}
}
</style>