生产备料: 打印备料单功能

src/views/production/operation/batching/index.vue

@@ -17,8 +17,12 @@
             }"
             :action-list="[
               {
-                text: '完成备料',
-                action: () => clickAccomplish(),
+                text: '打印备料单',
+                action: () => outExcel(),
+              },
+              {
+                text: '快捷出库',
+                action: () => clickQuickDelivery(),
               },
             ]"
             @get-list="getList"
@@ -63,12 +67,48 @@
         </el-tab-pane>
       </el-tabs>
     </el-card>
+
+    <el-dialog title="打印" v-if="openPrint" v-model="openPrint" width="1000px">
+      <div class="printBomList" id="printMe">
+        <div class="t">生产备料单</div>
+        <div class="time" style="text-align: right">
+          {{ printTime }}
+        </div>
+        <table border="1" cellspacing="0" class="table">
+          <thead>
+            <tr>
+              <td style="width: 6%; text-align: center">编号</td>
+              <td style="width: 18%">物料品号</td>
+              <td style="width: 38%">物料品名</td>
+              <td style="width: 18%">SKU品号</td>
+              <td style="width: 10%; text-align: center">数量小计</td>
+              <td style="width: 10%; text-align: center">数量总计</td>
+            </tr>
+          </thead>
+          <tbody v-for="(item, index) in printBomList" :key="index">
+            <tr v-for="(itemSKU, indexSKU) in item.SKUList" :key="indexSKU">
+              <td :rowspan="item.SKUList.length" v-if="indexSKU === 0" style="text-align: center">{{ index + 1 }}</td>
+              <td :rowspan="item.SKUList.length" v-if="indexSKU === 0">{{ item.bomSpecCode }}</td>
+              <td :rowspan="item.SKUList.length" v-if="indexSKU === 0">{{ item.bomSpecName }}</td>
+              <td>{{ itemSKU.skuSpecCode }}</td>
+              <td style="text-align: center">{{ itemSKU.quantity }}</td>
+              <td :rowspan="item.SKUList.length" v-if="indexSKU === 0" style="text-align: center">{{ item.quantity }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <template #footer>
+        <el-button @click="openPrint = false" size="large">取消</el-button>
+        <el-button type="primary" v-print="printObj" size="large">打印</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
 import byTable from "@/components/byTable/index";
 import { ElMessage } from "element-plus";
+import moment from "moment";
 
 const { proxy } = getCurrentInstance();
 const activeName = ref("first");
@@ -396,20 +436,71 @@ const selectRow = (data) => {
 const openFile = (path) => {
   window.open(path);
 };
-const clickAccomplish = () => {
+const printBomList = ref([]);
+const openPrint = ref(false);
+const printTime = ref("");
+const outExcel = () => {
   if (selectData.value && selectData.value.length > 0) {
-    proxy
-      .post(
-        "/stockPreparation/submit",
-        selectData.value.map((item) => item.orderSkuId)
-      )
-      .then(() => {
-        ElMessage({ message: "提交完成", type: "success" });
-        getList();
+    let printBomList = [];
+    let bomColorList = Array.from(new Set(selectData.value.map((item) => item.bomColorId)));
+    for (let i = 0; i < bomColorList.length; i++) {
+      let list = selectData.value.filter((item) => item.bomColorId === bomColorList[i]);
+      let skuSpecList = Array.from(new Set(list.map((item) => item.skuSpecId)));
+      let sum = 0;
+      let SKUList = [];
+      for (let j = 0; j < skuSpecList.length; j++) {
+        let sumSKU = 0;
+        let listTwo = list.filter((item) => item.skuSpecId === skuSpecList[j]);
+        for (let y = 0; y < listTwo.length; y++) {
+          if (listTwo[y].quantity) {
+            sumSKU = Number(parseFloat(Number(sumSKU) + Number(listTwo[y].quantity)).toFixed(0));
+          }
+        }
+        SKUList.push({
+          skuSpecCode: listTwo[0].skuSpecCode,
+          quantity: sumSKU,
+        });
+        sum = Number(parseFloat(Number(sum) + Number(sumSKU)).toFixed(0));
+      }
+      printBomList.push({
+        bomSpecCode: list[0].bomSpecCode,
+        bomSpecName: list[0].bomSpecName,
+        quantity: sum,
+        SKUList: SKUList,
       });
+    }
+    printBomList.value = printBomList;
+    printTime.value = moment().format("yyyy-MM-DD HH:mm:ss");
+    openPrint.value = true;
+  } else {
+    return ElMessage("请勾选需要打印备料单的数据");
+  }
+};
+const printObj = ref({
+  id: "printMe",
+  popTitle: "",
+  extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
+  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
+});
+const clickQuickDelivery = () => {
+  if (selectData.value && selectData.value.length > 0) {
+    console.log(selectData.value, "快捷出库");
   } else {
-    return ElMessage("请选择操作的数据");
+    return ElMessage("请勾选需要快捷出库的数据");
   }
+  // if (selectData.value && selectData.value.length > 0) {
+  //   proxy
+  //     .post(
+  //       "/stockPreparation/submit",
+  //       selectData.value.map((item) => item.orderSkuId)
+  //     )
+  //     .then(() => {
+  //       ElMessage({ message: "提交完成", type: "success" });
+  //       getList();
+  //     });
+  // } else {
+  //   return ElMessage("请选择操作的数据");
+  // }
 };
 </script>
 
@@ -417,4 +508,22 @@ const clickAccomplish = () => {
 ::v-deep(.el-input-number .el-input__inner) {
   text-align: left;
 }
+.printBomList {
+  width: 100%;
+  .t {
+    text-align: center;
+    font-size: 26px;
+    font-weight: 700;
+    margin: 10px 0px;
+  }
+  .time {
+    margin-bottom: 10px;
+  }
+  .table {
+    width: 100%;
+    td {
+      padding: 10px;
+    }
+  }
+}
 </style>