优化配载清单

src/components/ArteryPrintTemplateV2/ArteryPrintTemplateV2.vue

@@ -0,0 +1,355 @@
+<template>
+  <div class="VehicleStowageTable">
+    <table
+      style="
+        width: 100%;
+        text-align: center;
+        border-collapse: collapse;
+        border-spacing: 0;
+        border-top: 1px solid #000;
+        border-right: 1px solid #000;
+      "
+    >
+      <tr>
+        <th style="border-bottom: 1px solid #000; border-left: 1px solid #000" colspan="4">
+          <img style="height: 40px" src="../../../public/img/htlogo.png" alt="暂无图片" />
+        </th>
+        <th
+          colspan="6"
+          style="font-size: 20px; border-bottom: 1px solid #000; border-left: 1px solid #000"
+        >
+          干 线 装 载 清 单
+        </th>
+        <th style="border-bottom: 1px solid #000; border-left: 1px solid #000" :colspan="7">
+          <img id="imgcode" :src="renderInfo.carsNoBase64" />
+          <div>{{ renderInfo.carsNo }}</div>
+        </th>
+      </tr>
+      <tr>
+        <th style="border-bottom: 1px solid #000; border-left: 1px solid #000" colspan="4">
+          始发站：{{ renderInfo.startWarehouseName }}
+        </th>
+        <th style="border-bottom: 1px solid #000; border-left: 1px solid #000" colspan="6">
+          经停站：{{
+            renderInfo.endWarehouseNames.slice(0, renderInfo.endWarehouseNames.length - 1)[0] || ''
+          }}
+        </th>
+        <th style="border-bottom: 1px solid #000; border-left: 1px solid #000" :colspan="7">
+          目的站：{{ renderInfo.endWarehouseNames.slice(-1)[0] }}
+        </th>
+      </tr>
+      <tr>
+        <th style="border-bottom: 1px solid #000; border-left: 1px solid #000" colspan="4">
+          司机：{{ renderInfo.assistantName || '' }}
+        </th>
+        <th style="border-bottom: 1px solid #000; border-left: 1px solid #000" colspan="2">
+          司机电话：{{ renderInfo.assistantMobile || '' }}
+        </th>
+        <th style="border-bottom: 1px solid #000; border-left: 1px solid #000" colspan="3">
+          车牌号：{{ renderInfo.carNumber || '' }}
+        </th>
+        <th style="border-bottom: 1px solid #000; border-left: 1px solid #000">
+          卸车完成时间： {{ renderInfo.unloadDate || '年  月  日' }}
+        </th>
+        <th
+          style="
+            border-bottom: 1px solid #000;
+            border-left: 1px solid #000;
+            text-align: left;
+            padding-left: 10px;
+          "
+          :colspan="7"
+        >
+          卸车人员签字：
+        </th>
+      </tr>
+      <tr>
+        <th style="border-bottom: 1px solid #000; border-left: 1px solid #000">序号</th>
+        <th style="border-bottom: 1px solid #000; border-left: 1px solid #000">发货单位</th>
+        <th style="border-bottom: 1px solid #000; border-left: 1px solid #000">开单时间</th>
+        <th style="border-bottom: 1px solid #000; border-left: 1px solid #000">始发仓</th>
+        <th style="border-bottom: 1px solid #000; border-left: 1px solid #000">目的仓</th>
+        <th style="border-bottom: 1px solid #000; border-left: 1px solid #000">收货单位</th>
+        <th style="border-bottom: 1px solid #000; border-left: 1px solid #000">收货人</th>
+        <th style="border-bottom: 1px solid #000; border-left: 1px solid #000">收货电话</th>
+        <th style="border-bottom: 1px solid #000; border-left: 1px solid #000">物流单号</th>
+        <th style="border-bottom: 1px solid #000; border-left: 1px solid #000">合同号</th>
+        <th colspan="2" style="border-bottom: 1px solid #000; border-left: 1px solid #000">
+          装车产品明细
+        </th>
+        <th style="border-bottom: 1px solid #000; border-left: 1px solid #000">计划件数</th>
+        <!-- 本仓装车件数 -->
+        <th style="border-bottom: 1px solid #000; border-left: 1px solid #000">本仓装车件数</th>
+        <th style="border-bottom: 1px solid #000; border-left: 1px solid #000">总装车件数</th>
+        <th style="border-bottom: 1px solid #000; border-left: 1px solid #000">卸车件数</th>
+        <th style="border-bottom: 1px solid #000; border-left: 1px solid #000">异常备注</th>
+      </tr>
+      <tr>
+        <th
+          style="border-bottom: 1px solid #000; border-left: 1px solid #000"
+          v-for="item in goodsTitleList"
+          :key="item"
+        >
+          {{ item }}
+        </th>
+      </tr>
+      <!-- 值 -->
+      <template v-if="orderList.length > 0">
+        <tr v-for="(value, index) in orderList" style="word-break: break-all">
+          <td style="border-bottom: 1px solid #000; border-left: 1px solid #000">
+            {{ index + 1 }}
+          </td>
+          <!-- 发货单位 -->
+          <td
+            v-if="value.mergeColumnIndex"
+            style="border-bottom: 1px solid #000; border-left: 1px solid #000"
+            :rowspan="value.mergeColumnIndex"
+            contenteditable
+          >
+            {{ value.shipper || '' }}
+          </td>
+          <!-- 开单时间 -->
+          <td
+            v-if="value.mergeColumnIndex"
+            style="border-bottom: 1px solid #000; border-left: 1px solid #000"
+            :rowspan="value.mergeColumnIndex"
+            contenteditable
+          >
+            {{ value.createTime || '' }}
+          </td>
+          <!-- 始发仓 -->
+          <td style="border-bottom: 1px solid #000; border-left: 1px solid #000" contenteditable>
+            {{ value.departureWarehouseName || '' }}
+          </td>
+          <!-- 目的仓 -->
+          <td style="border-bottom: 1px solid #000; border-left: 1px solid #000" contenteditable>
+            {{ value.destinationWarehouseName || '' }}
+          </td>
+          <!-- 收货单位 -->
+          <td
+            v-if="value.mergeColumnIndex"
+            style="border-bottom: 1px solid #000; border-left: 1px solid #000"
+            :rowspan="value.mergeColumnIndex"
+            contenteditable
+          >
+            {{ value.consignee }}
+          </td>
+          <!-- 收货人 -->
+          <td
+            v-if="value.mergeColumnIndex"
+            style="border-bottom: 1px solid #000; border-left: 1px solid #000"
+            :rowspan="value.mergeColumnIndex"
+            contenteditable
+          >
+            {{ value.consigneeName }}
+          </td>
+          <!-- 收货电话 -->
+          <td
+            v-if="value.mergeColumnIndex"
+            style="border-bottom: 1px solid #000; border-left: 1px solid #000"
+            :rowspan="value.mergeColumnIndex"
+            contenteditable
+          >
+            {{ value.consigneeMobile }}
+          </td>
+          <!-- 物流单号 -->
+          <td
+            v-if="value.mergeColumnIndex"
+            style="border-bottom: 1px solid #000; border-left: 1px solid #000"
+            :rowspan="value.mergeColumnIndex"
+          >
+            {{ value.waybillNo }}
+          </td>
+          <!-- 合同号 -->
+          <td style="border-bottom: 1px solid #000; border-left: 1px solid #000">
+            {{ value.orderCode }}
+          </td>
+          <!-- 品类明细 -->
+          <td
+            colspan="2"
+            style="border-bottom: 1px solid #000; border-left: 1px solid #000"
+            contenteditable
+          >
+            {{ value.goodsListStr }}
+          </td>
+          <!-- 计划件数 -->
+          <td style="border-bottom: 1px solid #000; border-left: 1px solid #000" contenteditable>
+            {{ value.planNum || 0 }}
+          </td>
+          <!-- 本仓装车件数 -->
+          <td style="border-bottom: 1px solid #000; border-left: 1px solid #000" contenteditable>
+            {{ value.loadingNum || 0 }}
+          </td>
+          <!-- 总装车件数 -->
+          <td style="border-bottom: 1px solid #000; border-left: 1px solid #000" contenteditable>
+            {{ value.stockNum || 0 }}
+          </td>
+          <!-- 卸车件数 -->
+          <td style="border-bottom: 1px solid #000; border-left: 1px solid #000" contenteditable>
+            {{ value.unloadNum || 0 }}
+          </td>
+
+          <!-- 异常备注 -->
+          <td
+            style="border-bottom: 1px solid #000; border-left: 1px solid #000"
+            contenteditable
+          ></td>
+        </tr>
+      </template>
+
+      <!-- 合计行 -->
+      <tr>
+        <td style="border-bottom: 1px solid #000; border-left: 1px solid #000" colspan="10">
+          合计
+        </td>
+        <td colspan="2" style="border-bottom: 1px solid #000; border-left: 1px solid #000"></td>
+        <!-- 合计 -- 计划件数 -->
+        <td style="border-bottom: 1px solid #000; border-left: 1px solid #000" contenteditable>
+          {{ totalPlanNum }}
+        </td>
+        <!-- 本仓装车数 -->
+        <td style="border-bottom: 1px solid #000; border-left: 1px solid #000" contenteditable>
+          {{ totalloadingNum }}
+        </td>
+        <!-- 总装车数 -->
+        <td style="border-bottom: 1px solid #000; border-left: 1px solid #000" contenteditable>
+          {{ totalStockloadingNum }}
+        </td>
+        <!-- 卸车数 -->
+        <td style="border-bottom: 1px solid #000; border-left: 1px solid #000" contenteditable>
+          {{ totalUnLoadNum }}
+        </td>
+        <td style="border-bottom: 1px solid #000; border-left: 1px solid #000"></td>
+      </tr>
+      <tr style="border-bottom: 1px solid #000; border-left: 1px solid #000">
+        <td :colspan="6" contenteditable>投诉电话：4000184668</td>
+
+        <td :colspan="6" contenteditable>营业部电话：</td>
+
+        <td :colspan="5" contenteditable>系统单调度：</td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, ref, onMounted, reactive } from 'vue';
+
+const props = defineProps(['waybillInfo']);
+
+/** 运单信息 */
+const { waybillInfo } = props;
+
+/** 渲染数据 */
+const renderInfo = ref<any>({});
+/** 货物名称list */
+const goodsTitleList = reactive([]);
+/** 总件数 */
+const totalNum = ref(0);
+/** 卸车总数 */
+const totalUnLoadNum = ref(0);
+/** 计划总数 */
+const totalPlanNum = ref(0);
+/** 本仓装车总数 */
+const totalloadingNum = ref(0);
+/** 总装车总数 */
+const totalStockloadingNum = ref(0);
+
+const orderList = ref([]);
+
+const InitData = () => {
+  try {
+    renderInfo.value = waybillInfo;
+
+    renderInfo.value.endWarehouseNames = renderInfo.value.endWarehouseNames.split(',');
+
+    const _orderList = [];
+
+    for (let i = 0; i < renderInfo.value.mainList.length; i++) {
+      const val = renderInfo.value.mainList[i];
+      // 是否存在相同的运单号
+      let _flag = false;
+
+      for (let j = _orderList.length - 1; j >= 0; j--) {
+        const item = _orderList[j];
+        console.log('j :>> ', j);
+
+        if (item.waybillNo !== val.waybillNo) continue;
+        _orderList.splice(j, 0, val);
+        _flag = true;
+        break;
+      }
+
+      !_flag && _orderList.push(val);
+    }
+
+    console.log('_orderList :>> ', _orderList);
+
+    // 合并起始索引
+    let mergeStartIndex = 0;
+    // 比对值
+    let comparisonValue = '';
+    const handleMerge = (startIndex: number, endIndex: number, data: {}) => {
+      for (let index = startIndex; index < endIndex; index++) {
+        const value = data[index];
+
+        if (index === startIndex) value.mergeColumnIndex = endIndex - startIndex;
+        else {
+          value.mergeColumnIndex = 0;
+        }
+      }
+    };
+
+    for (let index = 0; index < _orderList.length; index++) {
+      const element = _orderList[index];
+
+      if (index === 0) {
+        comparisonValue = element.waybillNo;
+        element.mergeColumnIndex = 1;
+      }
+      totalNum.value += element.smallTotal || 0;
+      totalUnLoadNum.value += element.unloadNum || 0;
+      totalPlanNum.value += element.planNum || 0;
+      totalloadingNum.value += element.loadingNum || 0;
+      totalStockloadingNum.value += element.stockNum || 0;
+
+      if (element.waybillNo !== comparisonValue) {
+        // if (index === 1) mergeStartIndex = 1;
+        comparisonValue = element.waybillNo;
+        handleMerge(mergeStartIndex, index, _orderList);
+        mergeStartIndex = index;
+
+        if (index === _orderList.length - 1) {
+          handleMerge(mergeStartIndex, index + 1, _orderList);
+        }
+        // 最后一位特殊处理
+      } else if (index === _orderList.length - 1) {
+        handleMerge(mergeStartIndex, index + 1, _orderList);
+      }
+
+      if (element.goodsList && element.goodsList.length > 0) {
+        for (let i = 0; i < element.goodsList.length; i++) {
+          const item = element.goodsList[i];
+
+          if (!goodsTitleList.includes(item.goodsName)) goodsTitleList.push(item.goodsName);
+        }
+      }
+    }
+
+    orderList.value = _orderList;
+  } catch (error) {
+    console.log('error :>> ', error);
+  } finally {
+  }
+};
+
+InitData();
+
+console.log('waybillInfo :>> ', waybillInfo);
+</script>
+
+<style lang="scss" scoped>
+.waybillPrintTemplate_container {
+  width: 100%;
+}
+</style>

src/views/distribution/artery/TripartiteTransferDetails.vue

@@ -334,7 +334,10 @@ import {
   postFindUseOrderList,
 } from '@/api/distribution/AddVehicleStowage';
 import { postFindDriverListByNameAndWarehouseId } from '@/api/distribution/addTripartiteTransfer';
-import { postCarsLoadDetailInfo } from '@/api/distribution/VehicleStowageDetails.js';
+import {
+  postCarsLoadDetailInfo,
+  postCarsLoadDetailInfoNew,
+} from '@/api/distribution/VehicleStowageDetails.js';
 import { postFindCarsLoadLogs } from '@/api/distribution/VehicleStowageDetails.js';
 import { useRouter, useRoute } from 'vue-router';
 import { useStore } from 'vuex';
@@ -569,8 +572,8 @@ const onLoad = debounce(async () => {
       // 获取下拉列表
       postloadFindLoadInitData(),
       // 获取表单数据
-      // postSelectEditDetailByLoadId({ loadId: $route.query.loadId }),
-      postCarsLoadDetailInfo({ loadId: $route.query.loadId }),
+      // postCarsLoadDetailInfo({ loadId: $route.query.loadId }),
+      postCarsLoadDetailInfoNew({ loadId: $route.query.loadId }),
     ]);
 
     console.log('promiseAll :>> ', promiseAll);

src/views/distribution/artery/VehicleArrivalManagement.vue

@@ -589,7 +589,7 @@
     :exportName="details.selectionList[0] ? details.selectionList[0].carsNo : ''"
     isFullscreen
   >
-    <ArteryPrintTemplate
+    <ArteryPrintTemplateV2
       :waybillInfo="details.listOfLoadedWagonsData"
       ref="truckLoadingDetailNodeRef"
     />
@@ -647,7 +647,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, reactive, toRefs, computed, onMounted, nextTick } from 'vue';
+import { ref, reactive, toRefs, computed, onMounted, nextTick, defineAsyncComponent } from 'vue';
 import dayjs from 'dayjs';
 import { mapGetters, useStore } from 'vuex';
 /** 获取字典 */
@@ -693,6 +693,10 @@ import print from '@/utils/print';
 import { exportExcelByDom } from '@/utils/export';
 import { dateNow } from '@/utils/date';
 
+const ArteryPrintTemplateV2 = defineAsyncComponent(
+  () => import('@/components/ArteryPrintTemplateV2/ArteryPrintTemplateV2.vue')
+);
+
 // 获取路由实例
 const $router = useRouter();
 const $route = useRoute();

src/views/distribution/artery/VehicleStowage.vue

@@ -379,24 +379,22 @@
       </tablecmt>
 
       <!-- 分页模块 -->
-      <el-row class="el-fy">
-        <div class="avue-crud__pagination flex-c-sb" style="width: 100%">
-          <div style="font-size: 14px">勾选数量: {{ selectionList.length }}</div>
-          <!-- 分页模块 -->
-          <el-pagination
-            align="right"
-            background
-            @size-change="sizeChange"
-            @current-change="currentChange"
-            :current-page="page.pageNum"
-            :page-sizes="[30, 50, 80, 120]"
-            :page-size="page.pageSize"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="page.total"
-          >
-          </el-pagination>
-        </div>
-      </el-row>
+      <div class="avue-crud__pagination flex-c-sb" style="width: 100%">
+        <div style="font-size: 14px">勾选数量: {{ selectionList.length }}</div>
+        <!-- 分页模块 -->
+        <el-pagination
+          align="right"
+          background
+          @size-change="sizeChange"
+          @current-change="currentChange"
+          :current-page="page.pageNum"
+          :page-sizes="[30, 50, 80, 120]"
+          :page-size="page.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="page.total"
+        >
+        </el-pagination>
+      </div>
 
       <!-- 查询订单配载锁定详情 -->
       <el-dialog
@@ -563,7 +561,7 @@
     :exportName="details.selectionList[0] ? details.selectionList[0].carsNo : ''"
     isFullscreen
   >
-    <ArteryPrintTemplate
+    <ArteryPrintTemplateV2
       :waybillInfo="details.listOfLoadedWagonsData"
       ref="truckLoadingDetailNodeRef"
     />
@@ -585,7 +583,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, reactive, toRefs, computed, onMounted, nextTick } from 'vue';
+import { ref, reactive, toRefs, computed, onMounted, nextTick, defineAsyncComponent } from 'vue';
 import functions from '@/utils/functions';
 import dayjs from 'dayjs';
 import { mapGetters } from 'vuex';
@@ -628,6 +626,10 @@ import { ElMessage, ElMessageBox } from 'element-plus';
 import print from '@/utils/print';
 import { dateNow } from '@/utils/date';
 
+const ArteryPrintTemplateV2 = defineAsyncComponent(
+  () => import('@/components/ArteryPrintTemplateV2/ArteryPrintTemplateV2.vue')
+);
+
 // 获取路由实例
 const $router = useRouter();
 const $route = useRoute();