<template> <div class="app-approvalShipping"> <h1>申请信息【出货信息】</h1> <el-descriptions :column="6" border> <el-descriptions-item label="自编号">{{boxBackVO.selfNo}}</el-descriptions-item> <el-descriptions-item label="运输方式"> <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="boxBackVO.transportType" /> </el-descriptions-item> <el-descriptions-item label="出货渠道"> {{getShipChannelName(boxBackVO.shippingChannelId)}} </el-descriptions-item> <el-descriptions-item label="柜型"> {{cabinetLabel}} </el-descriptions-item> <el-descriptions-item label="体积/重量"> {{getVolumeWeight(loadDetail.totalStatistics)}} </el-descriptions-item> <el-descriptions-item label="货柜状态"> {{getCabinetStatus(boxBackVO)}} </el-descriptions-item> </el-descriptions> <el-row style="marginTop:15px"> <el-button type="primary" @click="showOrder">订单列表</el-button> </el-row> <div> <p>申请原因</p> <div> {{boxBackVO.preInstallInfo ? boxBackVO.preInstallInfo.applyReason : ''}} </div> </div> <el-dialog :title="dialogConfig.title" :visible.sync="dialogConfig.visible" fullscreen :modal-append-to-body=false append-to-body> <el-descriptions :column="6" border> <el-descriptions-item label="自编号">{{boxBackVO.selfNo}}</el-descriptions-item> <el-descriptions-item label="运输方式"> <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="boxBackVO.transportType" /> </el-descriptions-item> <el-descriptions-item label="出货渠道"> {{getShipChannelName(boxBackVO.shippingChannelId)}} </el-descriptions-item> <el-descriptions-item label="柜型"> {{cabinetLabel}} </el-descriptions-item> <el-descriptions-item label="体积/重量"> {{getVolumeWeight(loadDetail.totalStatistics)}} </el-descriptions-item> <el-descriptions-item label="货柜状态"> {{getCabinetStatus(boxBackVO)}} </el-descriptions-item> </el-descriptions> <el-row style="marginTop:15px"> <el-table :data="loadDetail.sectionOrderList" border> <el-table-column prop="sectionName" label="部分" align="center"></el-table-column> <el-table-column prop="orderNo" label="订单号" align="center"> <template v-slot="{row}"> <el-button type="text" @click="jumpOrderDetail(row)">{{row.orderNo}}</el-button> </template> </el-table-column> <el-table-column label="货物信息" align="center" width="500px"> <template v-slot="{row}"> <section class="table-goodList"> <div v-for="(item, index) in row.goodsList" :key="index" class="goodList-div"> {{index+1}}:{{item.prodTitleZh}} </div> </section> </template> </el-table-column> <el-table-column label="入仓货物属性" align="center"> <template v-slot="{row}"> <section class="table-goodList"> <div>合计:{{calcSum(row.goodsList)}}箱</div> <div v-for="(item, index) in row.goodsList" :key="index" class="goodList-div"> {{getTotlContent(item,['volume','weight'])}} </div> </section> </template> </el-table-column> <el-table-column prop="installNum" label="实装箱数" align="center"></el-table-column> <el-table-column prop="volume" label="体积m³" align="center"></el-table-column> <el-table-column prop="weight" label="重量" align="center"></el-table-column> <el-table-column prop="unloadNum" label="卸柜箱数" align="center" v-if="isShowColumn(boxBackVO)"></el-table-column> </el-table> </el-row> </el-dialog> </div> </template> <script> import { approvalDetail } from "@/api/ecw/box"; import { getSeaStatus, getStatusName, getTotlContent, } from "./shippingSea/utils"; import { getCabinetPage } from "@/api/ecw/cabinet"; import { getChannelList } from "@/api/ecw/channel"; /** * 出货审核详情 */ export default { name: "shippingDetail", props: { processId: { type: [Number, String], }, }, data() { return { boxBackVO: {}, loadDetail: {}, // 柜型 cabinetLabel: "", //渠道 channelList: [], // 弹出配置 dialogConfig: { title: "", visible: false, }, }; }, created() { getChannelList().then((res) => (this.channelList = res.data)); }, methods: { getTotlContent, /* 获取详情 */ getApprovalDetail(processId) { approvalDetail({ approvalId: processId }).then((res) => { this.boxBackVO = res.data.boxBackVO; this.loadDetail = res.data.loadDetail; }); }, /* 获取柜型 */ getCabinetLabel(cabinetId) { getCabinetPage(null).then((response) => { const cabinetList = response.data.list; for (const cabinetItem of cabinetList) { if (cabinetItem.id == cabinetId) { this.cabinetLabel = cabinetItem.name; break; } } }); }, /* 打开订单列表 */ showOrder() { this.$set( this.dialogConfig, "title", `${this.boxBackVO.selfNo} 订单列表` ); this.$set(this.dialogConfig, "visible", true); }, /* 合计 */ calcSum(goodsList) { let sum = 0; goodsList.forEach((element) => { sum = sum + element.num; }); return sum; }, /* 跳转订单详情 */ jumpOrderDetail(row) { this.$router.push("/order/associated-order/" + row.orderId); }, }, watch: { processId(val) { this.getApprovalDetail(val); }, boxBackVO(val) { // 柜型 this.getCabinetLabel(val.cabinetId); }, }, computed: { /* 渠道 */ getShipChannelName() { return (shippingChannelId) => { for (const channelItem of this.channelList) { if (channelItem.channelId == shippingChannelId) { return channelItem.nameZh; } return "/"; } }; }, /* 货柜状态 */ getCabinetStatus() { return (shippingVO) => { return getStatusName(getSeaStatus(shippingVO)); }; }, /* 体积重量 */ getVolumeWeight() { return (total) => { return this.getTotlContent(total); }; }, /* 是否显示卸柜箱数 */ isShowColumn() { return (shippingVO) => { return getSeaStatus(shippingVO) >= 142 ? true : false; }; }, }, }; </script> <style lang="scss" scoped> </style>