1

src/views/production/shipment/print-order/index.vue

@@ -68,6 +68,10 @@
       </template>
     </byTable>
 
+    <el-dialog title="包裹规格数据" v-if="openTotal" v-model="openTotal" width="90%">
+      <PackTotal :rowData="rowData" @clickCancel="clickCancel"></PackTotal>
+    </el-dialog>
+
     <el-dialog title="包裹图片" v-if="openPackagePicture" v-model="openPackagePicture" width="70%">
       <div v-loading="loadingPackagePicture">
         <el-upload
@@ -164,6 +168,7 @@
 <script setup>
 import byTable from "/src/components/byTable/index";
 import { ElMessage } from "element-plus";
+import PackTotal from "/src/views/production/shipment/print-order/packTotal.vue";
 
 const { proxy } = getCurrentInstance();
 const departmentList = ref([{ dictKey: "0", dictValue: "胜德体育" }]);
@@ -440,11 +445,16 @@ const clickCode = (row) => {
     },
   });
 };
-const clickTotal = (row) => {
-  console.log(row);
+const openTotal = ref(false);
+const rowData = ref({});
+const clickTotal = (item) => {
+  rowData.value = item;
+  openTotal.value = true;
+};
+const clickCancel = () => {
+  openTotal.value = false;
 };
 const openPackagePicture = ref(false);
-const rowData = ref({});
 const loadingPackagePicture = ref(false);
 const fileList = ref([]);
 const clickPackagePicture = (item) => {
@@ -714,4 +724,8 @@ const submitExpressCode = () => {
     margin-block-end: 0 !important;
   }
 }
+:deep(.el-dialog) {
+  margin-top: 10px !important;
+  margin-bottom: 10px !important;
+}
 </style>

src/views/production/shipment/print-order/packTotal.vue

@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <div
+      style="max-height: calc(100vh - 174px); overflow-x: hidden; overflow-y: auto"
+      v-if="formData.data.orderEncasementList && formData.data.orderEncasementList.length > 0">
+      <div style="box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); margin-bottom: 20px" v-for="(item, index) in formData.data.orderEncasementList" :key="index">
+        <div style="background-color: #edf0f5; padding: 4px">
+          <el-row :gutter="4" class="row-top">
+            <el-col :span="5">单包裹规格格（cm）</el-col>
+            <el-col :span="4">单包裹净重（kg）</el-col>
+            <el-col :span="4">单包裹体积（m³）</el-col>
+            <el-col :span="3">总包裹数</el-col>
+            <el-col :span="4">总净重（kg）</el-col>
+            <el-col :span="4">总体积（m³）</el-col>
+          </el-row>
+          <el-row :gutter="4" class="row-bottom">
+            <el-col :span="5">{{ `${item.length}*${item.width}*${item.height}` }}</el-col>
+            <el-col :span="4">{{ item.netWeight / 1000 }}</el-col>
+            <el-col :span="4">{{ (item.length * item.width * item.height) / 1000000 }}</el-col>
+            <el-col :span="3">{{ item.total }}</el-col>
+            <el-col :span="4">{{ (item.netWeight / 1000) * item.total }}</el-col>
+            <el-col :span="4">{{ ((item.length * item.width * item.height) / 1000000) * item.total }}</el-col>
+          </el-row>
+        </div>
+        <div style="background-color: white; border: 1px solid #ebeef5">
+          <el-table
+            border
+            :data="item.orderEncasementDetailList"
+            :row-style="{ height: '35px' }"
+            :cell-style="{ padding: '0' }"
+            header-row-class-name="tableHeaderTwo"
+            :span-method="arraySpanMethod">
+            <el-table-column label="产品品号" prop="skuSpecCode" width="150" />
+            <el-table-column label="产品品名" prop="skuSpecName" />
+            <el-table-column label="打包数量" align="center" width="120">
+              <template #default="{ row }">
+                <div>
+                  {{ row.quantity ? row.quantity : 0 }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="总包裹数" align="center" width="120">
+              <template #default="{ row }">
+                <div>x {{ item.total }}</div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+    <div style="text-align: center; margin: 10px">
+      <el-button @click="clickCancel()" size="large">关 闭</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  rowData: Object,
+});
+const loading = ref(false);
+const formData = reactive({
+  data: {
+    skuInfoList: [],
+    orderEncasementList: [],
+  },
+});
+onMounted(() => {
+  if (props.rowData && props.rowData.id) {
+    getDetails();
+  }
+});
+const getDetails = () => {
+  loading.value = true;
+  proxy.post("/issueBill/assemblyDetail", { id: props.rowData.id }).then(
+    (res) => {
+      if (res.orderEncasementList && res.orderEncasementList.length > 0) {
+        res.orderEncasementList = res.orderEncasementList.map((item) => {
+          if (item.orderEncasementDetailList && item.orderEncasementDetailList.length > 0) {
+            item.orderEncasementDetailList = item.orderEncasementDetailList.map((itemTwo, index) => {
+              return {
+                ...itemTwo,
+                rowspan: item.orderEncasementDetailList.length,
+                rowIndex: index,
+              };
+            });
+          }
+          return {
+            ...item,
+          };
+        });
+      }
+      formData.data = res;
+      loading.value = false;
+    },
+    (err) => {
+      console.log(err);
+      loading.value = false;
+    }
+  );
+};
+const arraySpanMethod = ({ row, columnIndex }) => {
+  if (columnIndex === 3) {
+    if (row.rowIndex === 0) {
+      return {
+        rowspan: row.rowspan,
+        colspan: 1,
+      };
+    } else {
+      return {
+        rowspan: 0,
+        colspan: 0,
+      };
+    }
+  }
+};
+const emit = defineEmits(["clickCancel"]);
+const clickCancel = () => {
+  emit("clickCancel", false);
+};
+</script>
+
+<style lang="scss" scoped>
+.row-top .el-col {
+  text-align: center;
+  height: 32px;
+  line-height: 32px;
+}
+.row-bottom .el-col {
+  text-align: center;
+  color: red;
+  font-weight: 700;
+  height: 32px;
+  line-height: 32px;
+}
+::v-deep(.tableHeaderTwo) {
+  th {
+    background-color: white !important;
+    height: 35px;
+    padding: 0;
+  }
+}
+</style>