<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" v-hasPermi="['shipment:box:action:sea']" @click="handleCommand('router')" >{{ $t("操作") }}</el-button > <el-button type="primary" v-hasPermi="['shipment:box:action:error']" size="small" @click="handleCommand('error')" >{{ $t("异常登记") }}</el-button > <el-button type="primary" v-hasPermi="['shipment:box:action:cost']" 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('状态')"> {{ 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-item :label="$t('目的港清关')"> {{ getClearance(shipmentObj.destinationClearance) }} </el-descriptions-item> <el-descriptions-item :label="$t('发货方式')"> {{ getdeliveryType(shipmentObj.deliveryType) }} </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 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> <div style="margin: 20px 0 20px 0"> <el-button type="primary" v-hasPermi="['shipment:box:order:select']" size="small" @click="() => updateStatus('selected')" >{{ $t("更新所选订单状态") }}</el-button > <el-button type="primary" v-hasPermi="['shipment:box:order:all']" size="small" @click="() => updateStatus('all')" >{{ $t("更新全部订单状态") }}</el-button > <el-button type="primary" v-if=" shipmentObj.sapStatus == 152 && shipmentObj.airArrivalInfo && shipmentObj.airArrivalInfo.arriveType == 1 " v-hasPermi="['shipment:box:order:select']" size="small" @click="() => updateArrivalStatus('selected')" >{{ $t("更新所选订单到港状态") }}</el-button > <el-button type="primary" v-if=" shipmentObj.sapStatus == 152 && shipmentObj.airArrivalInfo && shipmentObj.airArrivalInfo.arriveType == 1 " v-hasPermi="['shipment:box:order:all']" size="small" @click="() => updateArrivalStatus('all')" >{{ $t("更新全部订单到港状态") }}</el-button > <el-button type="primary" v-if=" shipmentObj.clStatus == 132 && shipmentObj.clearanceInfo && shipmentObj.clearanceInfo.clearanceType == 1 " v-hasPermi="['shipment:box:order:select']" size="small" @click="() => updateClearStatus('selected')" >{{ $t("更新所选订单清关状态") }}</el-button > <el-button type="primary" v-if=" shipmentObj.clStatus == 132 && shipmentObj.clearanceInfo && shipmentObj.clearanceInfo.clearanceType == 1 " v-hasPermi="['shipment:box:order:all']" size="small" @click="() => updateClearStatus('all')" >{{ $t("更新全部订单清关状态") }}</el-button > </div> <el-table :data="sectionObj.sectionOrderList" style="width: 100%" border @selection-change="handleSelectionChange" > <el-table-column type="selection" width="50"></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" @click="() => updateStatus_2('single', scope.row)" style="margin-top: 5px" >{{ $t("异常登记") }}</el-button > </template> </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)" style="margin-top: 5px" >{{ $t("更新状态") }}</el-button > <el-button type="primary" size="small" style="margin-top: 5px" :disabled=" shipmentObj.clStatus == 132 || shipmentObj.clearanceInfo == null || (shipmentObj.clearanceInfo && shipmentObj.clearanceInfo.clearanceOrderList.findIndex( (ff) => ff.orderId == scope.row.orderId ) == -1) " @click="() => cancleClear(scope.row)" >{{ $t("撤销清关申请") }}</el-button > <!-- <el-button type="danger" style="margin-top: 5px;" size="small" @click="openError(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") }} <el-button v-if="item.approvalId > 0" type="text" @click="handleApproval(item.bpmProcessId)" >{{ $t("查看审批") }}</el-button > </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> <!--lanbm 2024-05-16 修改--> <el-table-column prop="priceUnitName" :label="$t('币种')" align="center" ></el-table-column> <el-table-column prop="payPrice" :label="$t('实付金额')" align="center" ></el-table-column> <el-table-column prop="payPriceBz" :label="$t('实付币种')" align="center" ></el-table-column> <el-table-column prop="payTime" :label="$t('实付日期')" align="center" > <template slot-scope="scope"> <span v-if="scope.row.payTime">{{ formatDate(scope.row.payTime) }}</span> </template> </el-table-column> <el-table-column prop="payableNo" :label="$t('付款单号')" align="center" > <template slot-scope="scope"> <span style="color: #1890ff" @click="paymentDetail(scope.row)" >{{ scope.row.payableNo }}</span > </template> </el-table-column> <el-table-column prop="creator" :label="$t('创建人')" align="center" ></el-table-column> <el-table-column prop="createTime" :label="$t('创建日期')" align="center" ></el-table-column> <el-table-column prop="updater" :label="$t('修改人')" align="center" ></el-table-column> <el-table-column prop="updateTime" :label="$t('修改日期')" align="center" ></el-table-column> <!--添加备注信息列 lanbm 2024-05-16 add--> <el-table-column prop="remarks" :label="$t('备注')" align="center" ></el-table-column> <el-table-column :label="$t('操作')" align="center"> <template slot-scope="scope"> <el-button type="primary" :disabled="scope.row.paymentId!='-1'" size="small" @click="editCostClick(scope.row)" style="marginright: 10px" v-hasPermi="['ecw:box-cost:update']" >{{ $t("编辑") }}</el-button > <el-popconfirm :title="$t('确定是否删除')" @confirm="deleteCostClick(scope.row)" > <el-button type="danger" :disabled="scope.row.paymentId!='-1'" size="small" slot="reference" v-hasPermi="['ecw:box-cost:delete']" >{{ $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_AIR_SHIPMENT_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[getregprocess(scope.row.opStep)]" :value="scope.row.billAbnId" /> </template> </el-table-column> <el-table-column prop="abnDetail" :label="$t('异常描述')" align="center" width="300" ></el-table-column> <el-table-column prop="delayDays" :label="$t('异常延迟天数')" align="center" ></el-table-column> <el-table-column prop="" :label="$t('异常时间')" align="center" width="200" > <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)" v-hasPermi="[`${scope.row.hasPermi}`]" >{{ $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" flag="air" /> </template> <template v-if="dialogConfig.type === 'error'"> <regError v-if="dialogConfig.visible" @closeDialog="closeDialog" :shipmentObj="shipmentObj" :allUsers="allUsers" flag="air" /> </template> <template v-if="dialogConfig.type === 'updateError'"> <updateError v-if="dialogConfig.visible" @closeDialog="closeDialog" :shipmentObj="shipmentObj" :errorInfo="errorInfo" /> </template> <template v-if="dialogConfig.type === 'updateArrival'"> <updateArrival v-if="dialogConfig.visible" @closeDialog="closeDialog" :shipmentObj="shipmentObj" :arrivalInfo="arrivalInfo" /> </template> <template v-if="dialogConfig.type === 'updateClear'"> <updateClear v-if="dialogConfig.visible" @closeDialog="closeDialog" :shipmentObj="shipmentObj" :clearInfo="clearInfo" /> </template> <template v-if="dialogConfig.type === 'cancelClear'"> <cancelClear v-if="dialogConfig.visible" @closeDialog="closeDialog" :shipmentObj="shipmentObj" :cancelClearInfo="cancelClearInfo" /> </template> <template v-if="dialogConfig.type === 'unloadingError'"> <unloadingError v-if="dialogConfig.visible" @closeDialog="closeDialog" :shipmentObj="shipmentObj" :unloadingError="unloadingError" /> </template> </el-dialog> <!-- 对话框 --> <el-dialog custom-class="shipping-dialog" :title="$t('异常')" :visible.sync="dialogVisible" width="600px" :modal-append-to-body="false" append-to-body > <unloadingError v-if="dialogVisible" @closeDialog="closeDialog1" v-bind="$attrs" :currRow="currRow" /> </el-dialog> </div> </template> <script> import { getbox, getLogList, getCostList, getAbnormalList, deleteCost, deletebox, getPaymentId, } 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 updateArrival from "./updateArrival.vue"; import updateClear from "./updateClear.vue"; import cancelClear from "./cancelClear.vue"; import { listUser } from "@/api/system/user"; import unloadingError from "./shippingAir/nodePage/unloading/openError.vue"; export default { name: "EcwBoxQueryair", props: { shipmentId: String, }, components: { costForm, regError, editForm, updateError, updateArrival, updateClear, cancelClear, unloadingError, }, 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: "", dialogVisible: false, fullscreen: false, }, // // 弹窗配置 // dialogConfig: { // title: "", // dialogVisible: false, // width: "30%", // type: "", // fullscreen: false, // }, dialogVisible: false, // 运输方式 transportTypes: [], // 费用详情 costDetail: {}, // 下载 downloadList: [ { title: this.$t("预装单"), serviceName: "downloadPreloadGoodsList", hasPermi: "shipment:air:download:downloadPreloadGoodsList", }, // { title: this.$t("已装单"), serviceName: "downloadLoadGoodsList", hasPermi: "shipment:box:download:downloadLoadGoodsList" }, { title: this.$t("应收汇总表"), serviceName: "downloadReceivableList", hasPermi: "shipment:air:download:downloadReceivableList", }, { title: this.$t("提货单"), serviceName: "zipDownload", fileFormat: "zip", hasPermi: "shipment:air:download:zipDownload", }, { title: "agent list", serviceName: "downloadAgentListFiles", type: "url", hasPermi: "shipment:air:download:downloadAgentListFiles", }, { title: "soncap", serviceName: "downloadSoncapFiles", type: "url", hasPermi: "shipment:air:download:downloadSoncapFiles", }, { title: this.$t("AWB文件"), serviceName: "cdAwbFile", type: "url", hasPermi: "shipment:air:download:cdAwbFile", }, { title: this.$t("提单Copy"), serviceName: "downloadLadingCopy", type: "url", hasPermi: "shipment:air:download:downloadLadingCopy", }, { title: this.$t("已装单"), serviceName: "downloadLoadGoods", type: "url", hasPermi: "shipment:air:download:downloadLoadGoods", }, ], // 选中行 selectedRows: [], // 修改异常 errorInfo: { orderList: [], errorType: "", operate: "", }, arrivalInfo: { orderList: [], }, clearInfo: { orderList: [], }, cancelClearInfo: {}, }; }, methods: { paymentDetail(row) { //lanbm 2024-05-16跳转到付款单详情页面 const id = row.payableId; getPaymentId(id).then((r) => { let sId = r.data; this.$router.push("/financial/paymentDetail?id=" + sId); }); }, getregprocess(val) { var data = ""; switch (val) { case 10: data = "FLYING_TICKET_EXCEPTION"; break; case 12: data = "ARRIVAL_TICKET_EXCEPTION"; break; case 13: data = "CLEARANCE_TICKET_EXCEPTION"; break; default: data = "BOX_SHIPPING_TICKET_EXCEPTION"; break; } return data; }, selectable(row, index) { if (row.abnormalDealStatus === 1) return false; return true; }, /* 关闭弹窗 */ closeDialog1(type) { this.dialogVisible = false; // if (type === "query") this.getLoadGoodsList(); }, /* 打开异常 */ openError(row) { console.log(row); this.currRow = row; this.dialogVisible = true; }, /* 全选 */ handleSelectionChange(selected) { this.selectedRows = selected; }, updateStatus_2(type, row) { //异常登记 lanbm 2024-05-23 add this.$set(this.dialogConfig, "visible", true); this.$set(this.dialogConfig, "title", this.$t("异常登记")); this.$set(this.dialogConfig, "type", "error"); }, /* 更新状态 */ 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]; } console.log("getErrorType", type); this.getErrorType(); this.$set(this.errorInfo, "orderList", orders); this.$set(this.errorInfo, "operate", type); // 判断异常类型 this.handleCommand("updateError"); }, /* 更新到港状态 */ updateArrivalStatus(type) { let orders = []; if (type === "selected") { if (!this.selectedRows.length) { this.$message.error("请选择需要更新的订单"); return; } orders = this.selectedRows.map((item) => { return item.orderId; }); } this.$set(this.arrivalInfo, "orderList", orders); this.$set(this.arrivalInfo, "type", type); this.handleCommand("updateArrival"); }, /* 更新清关状态 */ updateClearStatus(type) { let orders = []; if (type === "selected") { if (!this.selectedRows.length) { this.$message.error("请选择需要更新的订单"); return; } orders = this.selectedRows.map((item) => { return item.orderId; }); } this.$set(this.clearInfo, "orderList", orders); this.$set(this.clearInfo, "type", type); this.handleCommand("updateClear"); }, /* 更新清关状态 */ cancleClear(val) { this.cancelClearInfo = val; this.handleCommand("cancelClear"); }, 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("更新到港异常状态")); } // 起飞异常 if (key === "flyingHasAbnormal" && value) { this.$set(this.errorInfo, "errorType", "flight"); this.$set(this.dialogConfig, "title", this.$t("更新起飞异常状态")); } console.log(key, value); } }, // 初始化字典数据 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() { //空运费用 lanbm 2024-05-16 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("/boxAir/shippingAir/" + 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; case "updateArrival": this.$set(this.dialogConfig, "visible", true); this.$set(this.dialogConfig, "type", "updateArrival"); break; case "updateClear": this.$set(this.dialogConfig, "visible", true); this.$set(this.dialogConfig, "type", "updateClear"); break; case "cancelClear": this.$set(this.dialogConfig, "visible", true); this.$set(this.dialogConfig, "type", "cancelClear"); 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) { if (row.serviceName == "downloadLoadGoods") { if (this.shipmentObj.tyStatus < 2112) { this.$message.error("请先完成理货后,再下载已装单"); return; } } 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" ); } this.$message.success(this.$t("已加入导出队列,请稍后在下载日志中下载")); }, handleApproval(id) { this.$router.push({ path: "/bpm/process-instance/detail", query: { id: id }, }); }, }, 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); } }, getClearance() { return (id) => { let data = ["", "我司清关", "合作方清关", "客户"]; return data[id]; }; }, getdeliveryType() { return (id) => { let data = ["", "多票", "单票"]; return data[id]; }; }, }, }; </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>