订单管理-打印销售出库单

zkqy-ui/src/utils/print/outBoundPrint.js

@@ -0,0 +1,78 @@
+function outBoundPrint(data, domId) {
+  console.log(data);
+  let { outStockDate, remark, unitName, printUser } = data.form
+  let { tableData } = data
+  let date = new Date(outStockDate)
+  console.log(date);
+  let yy = date.getFullYear();
+  let mm = date.getMonth() + 1;
+  if (mm < 10) {
+    mm = "0" + mm;
+  }
+  let dd = date.getDate();
+  if (dd < 10) {
+    dd = "0" + dd;
+  }
+
+  let printContent = `<div style="width: 700px;position: relative;">
+
+    <div
+      style="width: 100%;position: relative;text-align: center;display: flex;flex-direction: column;margin-bottom: 10px;">
+      <span style="font-size: 24px;font-weight: 500;">诸暨市新丝维化纤有限公司</span>
+      <span>销售出库单</span>
+    </div>
+    <div>
+      <div style="margin-bottom: 3px; padding: 0 10px;"><span>单位名称:${unitName}</span></div>
+      <div style="display: flex;justify-content: space-between;padding: 0 20px;">
+        <span>备注:${remark}</span><span>出库日期:&ensp;${yy}&ensp;年&ensp;${mm}&ensp;月&ensp;${dd}&ensp;日</span>
+      </div>
+    </div>
+    <table style="width: 100%;border-collapse:collapse;" cellpadding="10" border="1">
+      <tr style="text-align: center;">
+        <td style="width: 100px;">名称</td>
+        <td style="width: 100px;">规格</td>
+        <td style="width: 100px;">批号</td>
+        <td style="width: 100px;">单位</td>
+        <td style="width: 100px;">数量</td>
+        <td style="width: 100px;">单价</td>
+        <td style="width: 100px;">金额</td>
+      </tr>`;
+  let totalPrice = 0, totalWeight = 0;
+  for (let i = 0; i < tableData.length; i++) {
+    let item = tableData[i];
+    let { unitPrice, weight, price } = item
+    if (weight) {
+      totalWeight += Number(weight);
+    }
+    totalPrice += price;
+    printContent += `<tr style="text-align: center;">
+      <td>${item.productName}</td>
+      <td>${item.productSpecifications}</td>
+      <td>${item.lotNum}</td>
+      <td>${item.unit}</td>
+      <td>${weight}</td>
+      <td>${unitPrice}</td>
+      <td>${price}</td>
+      </tr>`
+  }
+  printContent += `<tr style="text-align: center;border: none;">
+        <td style="width: 100px;">合计</td>
+        <td style="width: 100px;"></td>
+        <td style="width: 100px;"></td>
+        <td style="width: 100px;"></td>
+        <td style="width: 100px;">${totalWeight}</td>
+        <td style="width: 100px;"></td>
+        <td style="width: 100px;">${totalPrice}</td>
+      </tr>`
+
+
+  printContent += `</table>
+    <div><span>制表人:${printUser}</span></div>
+  </div>`
+  document.body.innerHTML = document.getElementById(domId).innerHTML = printContent;
+  window.print(); //打印
+  window.location.reload();
+  return false;
+
+}
+export default outBoundPrint

zkqy-ui/src/views/orderMange/components/dialogForm/OutBound.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="container">
+    <div class="form-title">
+      <span class="main-title">诸暨市新丝维化纤有限公司</span>
+      <span class="sub-title">销售出库单</span>
+    </div>
+    <el-row :gutter="10">
+      <el-form
+        :model="form"
+        ref="form"
+        :rules="rules"
+        label-width="80px"
+        :inline="false"
+        size="normal"
+      >
+        <el-col :span="24">
+          <el-form-item label="单位名称" prop="unitName">
+            <el-input
+              v-model="form.unitName"
+              placeholder=""
+              size="normal"
+              clearable
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="备注:" prop="remark" size="normal">
+            <el-input
+              v-model="form.remark"
+              placeholder=""
+              size="normal"
+              clearable
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="出库日期:" prop="remark" size="normal">
+            <el-date-picker
+              v-model="form.outStockDate"
+              type="date"
+              size="normal"
+              placeholder="选择日期"
+            >
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+    <el-table :data="tableData" border stripe>
+      <el-table-column type="index" width="50" />
+      <el-table-column label="名称" prop="productName"></el-table-column>
+      <el-table-column
+        label="规格"
+        prop="productSpecifications"
+      ></el-table-column>
+      <el-table-column label="批号" prop="lotNum"></el-table-column>
+      <el-table-column label="单位" prop="unit">
+        <template slot-scope="scope">
+          <el-input
+            v-model="scope.row.unit"
+            placeholder=""
+            size="normal"
+            clearable
+          ></el-input>
+        </template>
+      </el-table-column>
+      <el-table-column label="数量" prop="weight"></el-table-column>
+      <el-table-column label="单价" prop="unitPrice"></el-table-column>
+      <el-table-column label="金额" prop="price"></el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { productInvoiceInfo } from "@/api/tablelist/commonTable";
+export default {
+  name: "OutBound",
+  props: [],
+  components: {},
+  data() {
+    return {
+      form: {
+        unitName: "",
+        remark: "",
+        outStockDate: new Date(),
+      },
+      rules: {
+        unitName: [
+          { required: true, message: "请输入单位名称", trigger: "blur" },
+        ],
+      },
+      tableData: [],
+      columns: [],
+    };
+  },
+  computed: {},
+  methods: {
+    // 重置表单
+    resetForm() {
+      Object.assign(this.form, {
+        unitName: "",
+        remark: "",
+        outStockDate: new Date(),
+      });
+    },
+    // 获取表格数据
+    async getTableData(row) {
+      this.resetForm();
+      this.row = row;
+      console.log(row);
+      try {
+        let payload = {
+          saleOrderNo: row.saleOrderSaleNo,
+        };
+        let res = await productInvoiceInfo(payload);
+        if (res.code == 200) {
+          res.data.saleProductInfoList.forEach((item) => {
+            if (Number(item.weight) && Number(item.unitPrice)) {
+              item.price = (
+                Number(item.weight) * Number(item.unitPrice)
+              ).toFixed(2);
+            } else {
+              item.price = 0;
+            }
+            item.unit = "";
+          });
+          this.tableData = res.data.saleProductInfoList;
+        }
+      } catch (error) {}
+    },
+    // 获取打印数据
+    async getPrintData() {
+      let res = {
+        flag: false,
+      };
+      this.$refs.form.validate(async (valid) => {
+        if (valid) {
+          res.flag = true;
+          res.data = {
+            form: this.form,
+            tableData: this.tableData,
+          };
+        }
+      });
+      return res;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.container {
+  .form-title {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .main-title {
+      font-size: 20px;
+      font-weight: bold;
+    }
+    .sub-title {
+      font-weight: bold;
+      margin-bottom: 10px;
+    }
+  }
+}
+</style>

zkqy-ui/src/views/orderMange/index.vue

@@ -706,6 +706,20 @@
         <el-button type="primary" @click="detailPrintHandler">打 印</el-button>
       </span>
     </el-dialog>
+    <!-- 销售出库弹窗 -->
+    <el-dialog
+      title="打印-销售出库单"
+      :visible.sync="outBoundShow"
+      width="1000px"
+    >
+      <OutBound ref="outBoundRef" :currentRow="currentRow"></OutBound>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="outBoundShow = false">取 消</el-button>
+        <el-button type="primary" @click="outBoundPrintHandler">
+          打印</el-button
+        >
+      </span>
+    </el-dialog>
     <div id="printDom"></div>
   </div>
 </template>
@@ -740,13 +754,17 @@ import { v4 as uuidv4 } from "uuid";
 import { mapState } from "vuex";
 import moment from "moment";
 import Deliver from "@/views/orderMange/components/dialogForm/Deliver.vue";
-
+import OutBound from "@/views/orderMange/components/dialogForm/OutBound.vue";
+import outBoundPrint from "@/utils/print/outBoundPrint";
 export default {
   name: "listInfo",
   dicts: ["payment_method", "direction_of_twist"],
-  components: { Queryfrom, Menu, DialogTemplate, Deliver },
+  components: { Queryfrom, Menu, DialogTemplate, Deliver, OutBound },
   data() {
     return {
+      // 出库单 start
+      outBoundShow: false,
+      // 出库单 end
       // 发货 start
       deliverShow: false,
       // 发货 end
@@ -1000,6 +1018,20 @@ export default {
     // 出库单回调
     async myPrintOutBoundHandler(row, data) {
       console.log("row", row);
+      this.currentRow = row;
+      this.outBoundShow = true;
+      this.$nextTick(() => {
+        this.$refs.outBoundRef.getTableData(row);
+      });
+    },
+    // 出库单打印回调
+    async outBoundPrintHandler() {
+      let res = await this.$refs.outBoundRef.getPrintData();
+      console.log(res);
+      if (res.flag) {
+        res.data.form.printUser = this.nickName;
+        outBoundPrint(res.data, "printDom");
+      }
     },
 
     // 产品名称改变