出货审核详情界面开发

src/api/ecw/box.js

@@ -58,6 +58,24 @@ export function createCost(data) {
   return request({
     url: '/ecw/box-cost/create',
     method: 'post',
-    data: data
+    data
+  })
+}
+
+// 审核详情
+export function approvalDetail(data) {
+  return request({
+    url: '/ecw/box-approval/approvalDetail',
+    method: 'post',
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    data: jsonToFormData(data),
   })
 }
+
+function jsonToFormData(params) {
+  const formData = new FormData();
+  for (const [key, value] of Object.entries(params)) {
+    formData.append(key, value);
+  }
+  return formData;
+}

src/views/bpm/processInstance/detail.vue

@@ -145,6 +145,7 @@ import {listSimpleUsers} from "@/api/system/user";
 import {getActivityList} from "@/api/bpm/activity";
 import specialDiscount from "@/views/ecw/offer/specialDiscount"
 import warehouseDetails from "@/views/ecw/order/components/warehouseDetails";
+import shippingDetail from '@/views/ecw/box/shippingDetail'
 
 // 流程实例的详情页，可用于审批
 export default {
@@ -152,7 +153,8 @@ export default {
   components: {
     Parser,
     specialDiscount,
-    warehouseDetails
+    warehouseDetails,
+    shippingDetail
   },
   computed:{
     matterNum(){

src/views/ecw/box/shippingDetail.vue

+<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="" 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">
+                  {{item.volume}}m³ {{item.weight}}kg
+                </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 } 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: {
+    /* 获取详情 */
+    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 `${total?.num ?? 0}箱 ${total?.volume ?? 0}m³ ${
+          total?.weight ?? 0
+        }kg`;
+      };
+    },
+    /* 是否显示卸柜箱数 */
+    isShowColumn() {
+      return (shippingVO) => {
+        return getSeaStatus(shippingVO) >= 142 ? true : false;
+      };
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/ecw/box/shippingSea/shippingSea.vue

@@ -43,7 +43,7 @@ import { getWarehouseList } from "@/api/ecw/warehouse";
 import { getSupplierPage } from "@/api/ecw/supplier";
 import { getDockPage } from "@/api/ecw/dock";
 import { listUser } from "@/api/system/user";
-import { getStatusName, seaBaseData } from "./utils";
+import { getSeaStatus, getStatusName, seaBaseData } from "./utils";
 
 /**
  * 海运操作主页面
@@ -117,34 +117,7 @@ export default {
   watch: {
     /* 监听发货对象 */
     shipmentObj(val) {
-      let currNodeStatus = 11,
-        isBreak = false;
-      // 迭代每个节点
-      for (let i = 0; i < this.seaBaseData.length; i++) {
-        const nodes = this.seaBaseData[i];
-        for (let j = 0; j < nodes.length; j++) {
-          const node = nodes[j];
-          const { keyName, voName, status } = node;
-          if (!keyName) continue;
-          const { start, wait, end } = status;
-
-          if (start.includes(val[keyName]) && val[voName]) {
-            currNodeStatus = val[keyName];
-          }
-
-          if (wait.includes(val[keyName])) {
-            currNodeStatus = val[keyName];
-            isBreak = true;
-            break;
-          }
-
-          if (end.includes(val[keyName])) {
-            currNodeStatus = val[keyName];
-          }
-        }
-        if (isBreak) break;
-      }
-      this.statusLabel = getStatusName().get(currNodeStatus);
+      this.statusLabel = getStatusName(getSeaStatus(val));
     },
   },
 };

src/views/ecw/box/shippingSea/utils.js

@@ -5,7 +5,7 @@ import dayjs from "dayjs";
  *
  * @return {*}
  */
-function getStatusName() {
+function getStatusName(statu) {
   const statusName = new Map();
 
   statusName.set(11, "未订舱");
@@ -65,7 +65,7 @@ function getStatusName() {
   statusName.set(152, "结算中");
   statusName.set(153, "已结算");
 
-  return statusName;
+  return statusName.get(statu);
 }
 
 /**
@@ -859,6 +859,38 @@ function formatDateStr(obj, keys, format = "YYYY-MM-DD") {
   return obj;
 }
 
+function getSeaStatus(val) {
+  let currNodeStatus = 11,
+    isBreak = false,
+    datas = seaBaseData();
+  // 迭代每个节点
+  for (let i = 0; i < datas.length; i++) {
+    const nodes = datas[i];
+    for (let j = 0; j < nodes.length; j++) {
+      const node = nodes[j];
+      const { keyName, voName, status } = node;
+      if (!keyName) continue;
+      const { start, wait, end } = status;
+
+      if (start.includes(val[keyName]) && val[voName]) {
+        currNodeStatus = val[keyName];
+      }
+
+      if (wait.includes(val[keyName])) {
+        currNodeStatus = val[keyName];
+        isBreak = true;
+        break;
+      }
+
+      if (end.includes(val[keyName])) {
+        currNodeStatus = val[keyName];
+      }
+    }
+    if (isBreak) break;
+  }
+  return currNodeStatus;
+}
+
 export const fileTypes = [
   "doc",
   "xls",
@@ -873,6 +905,7 @@ export const fileTypes = [
 export {
   getStatusName,
   getColmnMapping,
+  getSeaStatus,
   seaBaseData,
   constantDict,
   formatStringNumber,