产品销售单发货单打印

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

@@ -0,0 +1,94 @@
+function receiptDocuments(data, domId) {
+  let yy = new Date().getFullYear();
+  let mm = new Date().getMonth() + 1;
+  if (mm < 10) {
+    mm = "0" + mm;
+  }
+  let dd = new Date().getDate();
+  if (dd < 10) {
+    dd = "0" + dd;
+  }
+  let { customerName, saleProductInfoList, noticeNumber, printUser, drawer } = data;
+
+  let printContent = `<div class="table">
+    <div class="tableName" style="text-align: center;font-size: 30px;font-weight: bold;">诸暨市新丝维纤维有限公司发货单</div>
+    <div class="title"
+      style="width: 980px;margin: 0 auto;position: relative;top: 20px;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;">
+      <span class="name" style="font-weight: bold;">客户名称： <span class="content"
+          style="display: inline-block;width: 200px;border-bottom: 2px solid black;font-weight: lighter;">${customerName}</span></span>
+      <span class="name">开票日期： <span class="content"
+          style="display: inline-block;border-bottom: 2px solid black;">${yy + '-' + mm + '-' + dd}</span></span>
+      <span class="name">通知单号： <span class="content"
+          style="display: inline-block;border-bottom: 2px solid black;">${noticeNumber}</span></span>
+    </div>
+    <div class="tableContext" style="position: relative;top: 30px;">
+      <table style="width:1000px; border-collapse:collapse;" border="1" cellpadding="10" align="center">
+        <tbody>
+          <tr align="center">
+            <td width="50px">编码</td>
+            <td width="200px">产品名称</td>
+            <td width="200px">产品规格</td>
+            <td width="100px">色泽</td>
+            <td width="150px">批号</td>
+            <td width="90px">等级</td>
+            <td width="90px">箱数</td>
+            <td width="120px">净重</td>
+          </tr>`;
+  let totalBoxNum = 0, totalWeight = 0;
+  for (let i = 0; i < saleProductInfoList.length; i++) {
+    let item = saleProductInfoList[i];
+    if (item.boxNum) {
+      totalBoxNum += Number(item.boxNum);
+    }
+    if (item.weight) {
+      totalWeight += Number(item.weight);
+    }
+    printContent += `<tr align="center">
+      <td>${item.productCode}</td>
+      <td>${item.productName}</td>
+      <td>${item.productSpecifications}</td>
+      <td>${item.productColor}</td>
+      <td>${item.lotNum}</td>
+      <td>${item.levels}</td>
+      <td>${item.boxNum}</td>
+      <td>${item.weight}</td>
+      </tr>`
+  }
+  printContent += `<tr align="center">
+            <td colspan="6" align="left">合计</td>
+            <td>${totalBoxNum}</td>
+            <td>${totalWeight}</td>
+          </tr>`
+
+
+  printContent += `</tbody>
+      </table>
+    </div>
+    <div class="tableBottom"
+      style="width: 1000px;margin: 0 auto;position: relative;top: 35px;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;">
+      <div class="name" style="font-weight: bold;width: 20%;display: flex;">
+        <span>开票员：</span>
+        <span class="content"
+          style="font-weight: lighter;flex: 1;display: block;border-bottom: 2px solid black;">${drawer}</span>
+      </div>
+      <div class="name" style="width: 20%;display: flex;"><span>制单人：</span> <span class="content"
+          style="flex: 1;border-bottom: 2px solid black;">${printUser}</span></div>
+      <div class="name" style="width: 25%;display: flex;">提货人： <span class="content"
+          style="flex: 1;border-bottom: 2px solid black;"></span></div>
+      <div class="name" style="width: 25%;display: flex;"><span>发货人：</span><span class="content"
+          style="flex: 1;border-bottom: 2px solid black;"></span></div>
+      <div class="name" style="width: 48%;display: flex;">审核人： <span class="content"
+          style="flex: 1;border-bottom: 2px solid black;"></span></div>
+      <div class="name" style="width: 50%;display: flex;">总经理签字： <span class="content"
+          style="flex: 1;border-bottom: 2px solid black;"></span></div>
+      <div class="name" style="width: 50%;display: flex;">备&nbsp;&nbsp;&nbsp;&nbsp;注：<span class="content"
+          style="flex: 1;border-bottom: 2px solid black;"></span></div>
+    </div>
+  </div>`
+  document.body.innerHTML = document.getElementById(domId).innerHTML = printContent;
+  window.print(); //打印
+  window.location.reload();
+  return false;
+
+}
+export default receiptDocuments

zkqy-ui/src/views/orderMange/ProductInvoice/deliver.html

@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>单据3</title>
+  <style>
+    /* .table {
+      .tableName {
+        text-align: center;
+        font-size: 30px;
+        font-weight: bold;
+      }
+
+      .title {
+        width: 980px;
+        margin: 0 auto;
+        position: relative;
+        top: 20px;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-between;
+
+        .name {
+          font-weight: bold;
+        }
+
+        .content {
+          display: inline-block;
+          width: 200px;
+          border-bottom: 2px solid black;
+          padding-bottom: 5px;
+          font-weight: lighter;
+        }
+      }
+
+      .tableContext {
+        position: relative;
+        top: 30px;
+      }
+
+      .tableBottom {
+        width: 980px;
+        margin: 0 auto;
+        position: relative;
+        top: 35px;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-between;
+
+        .name {
+          font-weight: bold;
+        }
+
+        .content {
+          display: inline-block;
+          width: 165px;
+          border-bottom: 2px solid black;
+          padding-bottom: 5px;
+          font-weight: lighter;
+        }
+
+        span {
+          margin: 3px 0;
+          width: 245px;
+        }
+      }
+    } */
+  </style>
+</head>
+
+<body>
+  <div class="table">
+    <div class="tableName" style="text-align: center;font-size: 30px;font-weight: bold;">诸暨市新丝维纤维有限公司发货单</div>
+    <div class="title"
+      style="width: 980px;margin: 0 auto;position: relative;top: 20px;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;">
+      <span class="name" style="font-weight: bold;">客户名称： <span class="content"
+          style="display: inline-block;width: 200px;border-bottom: 2px solid black;padding-bottom: 5px;font-weight: lighter;">杭州华驰化纤</span></span>
+      <span class="name">开票日期： <span class="content"
+          style="display: inline-block;border-bottom: 2px solid black;">2024-03-12</span></span>
+      <span class="name">通知单号： <span class="content"
+          style="display: inline-block;border-bottom: 2px solid black;">20240312020005</span></span>
+    </div>
+    <div class="tableContext" style="position: relative;top: 30px;">
+      <table style="width:1000px; border-collapse:collapse;" border="1" cellpadding="10" align="center">
+        <tbody>
+          <tr align="center">
+            <td width="50px">编码</td>
+            <td width="200px">产品名称</td>
+            <td width="200px">产品规格</td>
+            <td width="100px">色泽</td>
+            <td width="150px">批号</td>
+            <td width="90px">等级</td>
+            <td width="90px">箱数</td>
+            <td width="120px">净重</td>
+          </tr>
+          <tr align="center">
+            <td>1722</td>
+            <td>DTY低弹无网</td>
+            <td>75D/36f-s</td>
+            <td>0100中咖</td>
+            <td>23-12</td>
+            <td>AA</td>
+            <td>11</td>
+            <td>343.58</td>
+          </tr>
+          <tr align="center">
+            <td colspan="6" align="left">合计</td>
+            <td>11</td>
+            <td>343.58</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="tableBottom"
+      style="width: 1000px;margin: 0 auto;position: relative;top: 35px;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;">
+      <div class="name" style="font-weight: bold;width: 20%;display: flex;">
+        <span>开票员：</span>
+        <span class="content"
+          style="font-weight: lighter;flex: 1;display: block;border-bottom: 2px solid black;">张丽</span>
+      </div>
+      <div class="name" style="width: 20%;display: flex;"><span>制单人：</span> <span class="content"
+          style="flex: 1;border-bottom: 2px solid black;">何梅丽</span></div>
+      <div class="name" style="width: 25%;display: flex;">提货人： <span class="content"
+          style="flex: 1;border-bottom: 2px solid black;"></span></div>
+      <div class="name" style="width: 25%;display: flex;"><span>发货人：</span><span class="content"
+          style="flex: 1;border-bottom: 2px solid black;"></span></div>
+      <div class="name" style="width: 48%;display: flex;">审核人： <span class="content"
+          style="flex: 1;border-bottom: 2px solid black;"></span></div>
+      <div class="name" style="width: 50%;display: flex;">总经理签字： <span class="content"
+          style="flex: 1;border-bottom: 2px solid black;"></span></div>
+      <div class="name" style="width: 50%;display: flex;">备&nbsp;&nbsp;&nbsp;&nbsp;注：<span class="content"
+          style="flex: 1;border-bottom: 2px solid black;"></span></div>
+    </div>
+  </div>
+</body>
+
+</html>

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

@@ -16,7 +16,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="通知日期" prop="noticeDate">
+      <el-form-item label="日期" prop="noticeDate">
         <el-date-picker
           clearable
           v-model="queryParams.noticeDate"
@@ -68,7 +68,7 @@
     </el-form>
 
     <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
+      <!-- <el-col :span="1.5">
         <el-button
           type="primary"
           plain
@@ -113,7 +113,7 @@
           v-hasPermi="['system:ProductInvoice:export']"
           >导出</el-button
         >
-      </el-col>
+      </el-col> -->
       <right-toolbar
         :showSearch.sync="showSearch"
         @queryTable="getList"
@@ -125,11 +125,10 @@
       :data="ProductInvoiceList"
       @selection-change="handleSelectionChange"
     >
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="编号" align="center" prop="id" />
-      <el-table-column label="通知单号" align="center" prop="noticeNumber" />
+      <!-- <el-table-column label="编号" align="center" prop="id" />
+       -->
       <el-table-column
-        label="通知日期"
+        label="日期"
         align="center"
         prop="noticeDate"
         width="180"
@@ -138,15 +137,17 @@
           <span>{{ parseTime(scope.row.noticeDate, "{y}-{m}-{d}") }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="销售员" align="center" prop="salesman" />
+      <el-table-column label="通知单号" align="center" prop="noticeNumber" />
+
+      <!-- <el-table-column label="销售员" align="center" prop="salesman" />
       <el-table-column label="客户编号" align="center" prop="customerId" />
       <el-table-column label="开票员" align="center" prop="drawer" />
       <el-table-column
         label="发货单备注"
         align="center"
         prop="dispatchNoteRemark"
-      />
-      <el-table-column label="开票类型" align="center" prop="billingType" />
+      /> -->
+      <!-- <el-table-column label="开票类型" align="center" prop="billingType" />
       <el-table-column
         label="货车登记"
         align="center"
@@ -155,36 +156,41 @@
       <el-table-column label="单据类型" align="center" prop="documentType" />
       <el-table-column label="售货单位" align="center" prop="sellingUnit" />
       <el-table-column label="计算类型" align="center" prop="calculationType" />
-      <el-table-column label="审核意见" align="center" prop="auditOpinion" />
+      <el-table-column label="审核意见" align="center" prop="auditOpinion" /> -->
+      <el-table-column label="客户名称" align="center" prop="customerName" />
       <el-table-column label="状态" align="center" prop="status" />
-      <el-table-column label="销售单合同号" align="center" prop="saleOrderNo" />
-      <el-table-column label="备用列" align="center" prop="spare1" />
-      <el-table-column label="备用列" align="center" prop="spare2" />
-      <el-table-column label="备用列" align="center" prop="spare3" />
-      <el-table-column label="备用列" align="center" prop="spare4" />
-      <el-table-column label="备注" align="center" prop="remark" />
+
+      <!-- <el-table-column label="销售单合同号" align="center" prop="saleOrderNo" />
+      <el-table-column label="备注" align="center" prop="remark" /> -->
       <el-table-column
         label="操作"
         align="center"
         class-name="small-padding fixed-width"
       >
         <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:ProductInvoice:edit']"
-            >修改</el-button
-          >
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['system:ProductInvoice:remove']"
-            >删除</el-button
-          >
+          <el-dropdown>
+            <el-button type="warning" plain size="small">
+              处理<i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>
+                <el-button
+                  type="text"
+                  size="mini"
+                  @click="handleDeliverOrder(scope.$index, scope.row)"
+                  >打印发货单</el-button
+                >
+              </el-dropdown-item>
+              <el-dropdown-item>
+                <el-button
+                  type="text"
+                  size="mini"
+                  @click="handleSendOrder(scope.$index, scope.row)"
+                  >打印送货单</el-button
+                >
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
         </template>
       </el-table-column>
     </el-table>
@@ -196,87 +202,7 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
-
-    <!-- 添加或修改产品发货单对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="通知单号" prop="noticeNumber">
-          <el-input v-model="form.noticeNumber" placeholder="请输入通知单号" />
-        </el-form-item>
-        <el-form-item label="通知日期" prop="noticeDate">
-          <el-date-picker
-            clearable
-            v-model="form.noticeDate"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="请选择通知日期"
-          >
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="销售员" prop="salesman">
-          <el-input v-model="form.salesman" placeholder="请输入销售员" />
-        </el-form-item>
-        <el-form-item label="客户编号" prop="customerId">
-          <el-input v-model="form.customerId" placeholder="请输入客户编号" />
-        </el-form-item>
-        <el-form-item label="开票员" prop="drawer">
-          <el-input v-model="form.drawer" placeholder="请输入开票员" />
-        </el-form-item>
-        <el-form-item label="发货单备注" prop="dispatchNoteRemark">
-          <el-input
-            v-model="form.dispatchNoteRemark"
-            type="textarea"
-            placeholder="请输入内容"
-          />
-        </el-form-item>
-        <el-form-item label="货车登记" prop="truckRegistration">
-          <el-input
-            v-model="form.truckRegistration"
-            placeholder="请输入货车登记"
-          />
-        </el-form-item>
-        <el-form-item label="售货单位" prop="sellingUnit">
-          <el-input v-model="form.sellingUnit" placeholder="请输入售货单位" />
-        </el-form-item>
-        <el-form-item label="审核意见" prop="auditOpinion">
-          <el-input v-model="form.auditOpinion" placeholder="请输入审核意见" />
-        </el-form-item>
-        <el-form-item label="销售单合同号" prop="saleOrderNo">
-          <el-input
-            v-model="form.saleOrderNo"
-            placeholder="请输入销售单合同号"
-          />
-        </el-form-item>
-        <el-form-item label="备用列" prop="spare1">
-          <el-input v-model="form.spare1" placeholder="请输入备用列" />
-        </el-form-item>
-        <el-form-item label="备用列" prop="spare2">
-          <el-input v-model="form.spare2" placeholder="请输入备用列" />
-        </el-form-item>
-        <el-form-item label="备用列" prop="spare3">
-          <el-input v-model="form.spare3" placeholder="请输入备用列" />
-        </el-form-item>
-        <el-form-item label="备用列" prop="spare4">
-          <el-input v-model="form.spare4" placeholder="请输入备用列" />
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" placeholder="请输入备注" />
-        </el-form-item>
-        <el-form-item label="删除标志" prop="delFlag">
-          <el-input v-model="form.delFlag" placeholder="请输入删除标志" />
-        </el-form-item>
-        <el-form-item label="创建者ID" prop="createById">
-          <el-input v-model="form.createById" placeholder="请输入创建者ID" />
-        </el-form-item>
-        <el-form-item label="修改者ID" prop="updateById">
-          <el-input v-model="form.updateById" placeholder="请输入修改者ID" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
+    <div id="printDom"></div>
   </div>
 </template>
 
@@ -288,6 +214,12 @@ import {
   addProductInvoice,
   updateProductInvoice,
 } from "@/api/system/ProductInvoice";
+import deliverOrderPrint from "@/utils/print/deliverOrderPrint";
+import {
+  productInvoiceInfo,
+  queryDropDownBoxData,
+} from "@/api/tablelist/commonTable";
+import { mapState } from "vuex";
 
 export default {
   name: "ProductInvoice",
@@ -328,11 +260,6 @@ export default {
         calculationType: null,
         auditOpinion: null,
         status: null,
-        saleOrderNo: null,
-        spare1: null,
-        spare2: null,
-        spare3: null,
-        spare4: null,
       },
       // 表单参数
       form: {},
@@ -343,7 +270,65 @@ export default {
   created() {
     this.getList();
   },
+  computed: {
+    ...mapState({
+      username: (state) => state.user.name,
+    }),
+  },
   methods: {
+    // 打印发货单回调
+    async handleDeliverOrder(index, row) {
+      let { saleOrderNo } = row;
+      if (!saleOrderNo) {
+        this.$message.error("数据异常,暂无saleOrderNo");
+      }
+      let payload = {
+        saleOrderNo: saleOrderNo,
+      };
+      let res = await productInvoiceInfo(payload);
+      if (res.code == 200) {
+        let printData = res.data;
+        console.log("printData", {
+          ...printData,
+          ...row,
+          printUser: this.username,
+        });
+        deliverOrderPrint(
+          { ...printData, ...row, printUser: this.username },
+          "printDom"
+        );
+      } else {
+        console.log(res);
+        this.$message.error(res.msg);
+      }
+      // deliverOrderPrint(row, "printDom");
+    },
+    // 打印送货单回调
+    async handleSendOrder(index, row) {
+      let { saleOrderNo } = row;
+      if (!saleOrderNo) {
+        this.$message.error("数据异常,暂无saleOrderNo");
+      }
+      let payload = {
+        saleOrderNo: saleOrderNo,
+      };
+      let res = await productInvoiceInfo(payload);
+      if (res.code == 200) {
+        let printData = res.data;
+        console.log("printData", {
+          ...printData,
+          ...row,
+          printUser: this.username,
+        });
+        sendOrderPrint(
+          { ...printData, ...row, printUser: this.username },
+          "printDom"
+        );
+      } else {
+        console.log(res);
+        this.$message.error(res.msg);
+      }
+    },
     /** 查询产品发货单列表 */
     getList() {
       this.loading = true;