模拟打印功能,添加打印逻辑

zkqy-ui/src/views/tablelist/commonTable/BtnMenuList.vue

@@ -9,6 +9,7 @@
       v-hasPermi="[btn.btnHasPermi]"
       @click="handleClick(btn)"
       :icon="btn.icon"
+      plain
       ><span>
         <!-- <svg-icon
           class="pre-icon"

zkqy-ui/src/views/tablelist/commonTable/listInfo.vue

@@ -322,6 +322,16 @@
         <el-button type="primary" @click="btnComfirm">确 定</el-button>
       </span>
     </el-dialog>
+
+    <!-- 打印弹窗 -->
+    <el-dialog title="打印" :visible.sync="printShow" width="30%">
+      <div ref="detailTable" id="detail"></div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="printShow = false">取 消</el-button>
+        <el-button type="primary" @click="confirmPrint">打 印</el-button>
+      </span>
+    </el-dialog>
+    <div id="printDom"></div>
   </div>
 </template>
 <script>
@@ -347,6 +357,7 @@ import { checkRole } from "@/utils/permission";
 import DialogTemplate from "@/views/dialogTemplate/components/index.vue";
 import FormList from "@/components/FormGroup/formList.vue";
 import { v4 as uuidv4 } from "uuid";
+import printHtml from "./print";
 
 export default {
   name: "listInfo",
@@ -356,6 +367,8 @@ export default {
       // 顶部按钮数据
       topBtnArr: [], //顶部按钮数据
       selection: [], //选中数组
+      printShow: false, //打印页面
+      printHtml: "", //打印的html
       // 自动生成字段
       theAutoField: [
         "id",
@@ -1953,6 +1966,10 @@ export default {
           break;
         case "INSERT":
           this.handleUpdate(row, btnData);
+          break;
+        case "PRINT":
+          this.printHandler(btnData, row);
+          break;
         default:
           break;
       }
@@ -1971,7 +1988,8 @@ export default {
         btnType != "EXPORT" &&
         btnType != "DELETE" &&
         btnType != "UPDATE" &&
-        btnType != "INSERT"
+        btnType != "INSERT" &&
+        btnType != "PRINT"
       ) {
         this.noNeedHandler(btnData, row);
         return;
@@ -2005,10 +2023,30 @@ export default {
         case "EXPORT":
           this.handleExport();
           break;
+        case "PRINT":
+          this.printHandler(btnData, row);
+          break;
         default:
           break;
       }
     },
+    // 打印回调
+    printHandler(btnData, row) {
+      // 发送请求获取打印数据
+      this.printShow = true;
+      this.printHtml = printHtml;
+      this.$nextTick(() => {
+        this.$refs.detailTable.innerHTML = this.printHtml;
+      });
+    },
+    // 确认打印回调
+    confirmPrint() {
+      document.body.innerHTML = document.getElementById("printDom").innerHTML =
+        this.printHtml;
+      window.print(); //打印
+      window.location.reload();
+      return false;
+    },
     noNeedHandler(btnData, row) {
       this.$modal
         .confirm("是否确认执行该操作？")

zkqy-ui/src/views/tablelist/commonTable/print.js

@@ -0,0 +1,116 @@
+let printHtml = `<div class="table" style="display: flex;">
+    <table style="width:900px; border-collapse:collapse;" border="1" cellpadding="10" align="center">
+      <tbody>
+        <tr>
+          <td width="900px" colspan="6" style="font-size: 20px;font-weight: 700;text-align: center;">检验单</td>
+
+        </tr>
+        <tr align="center">
+          <td width="300px" colspan="2">产品名称</td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+        </tr>
+        <!-- 物理指标 -->
+        <tr align="center">
+          <td width="150px" rowspan="5">物理指标</td>
+          <td width="150px">强度</td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+        </tr>
+        <tr align="center">
+          <td width="150px">伸长率</td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+        </tr>
+        <tr align="center">
+          <td width="150px">纤度</td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+        </tr>
+        <tr align="center">
+          <td width="150px">含油率</td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+        </tr>
+        <tr align="center">
+          <td width="150px">沸水收缩率</td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+        </tr>
+        <!-- 外观指标 -->
+        <tr align="center">
+          <td width="150px" rowspan="7">外观指标</td>
+          <td width="150px">毛丝</td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+        </tr>
+        <tr align="center">
+          <td width="150px">圈丝</td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+        </tr>
+        <tr align="center">
+          <td width="150px">蛛网丝</td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+        </tr>
+        <tr align="center">
+          <td width="150px">成形不良</td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+        </tr>
+        <tr align="center">
+          <td width="150px">无油</td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+        </tr>
+        <tr align="center">
+          <td width="150px">色差丝</td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+        </tr>
+        <tr align="center">
+          <td width="150px">污丝</td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+          <td width="150px"></td>
+        </tr>
+        <tr align="center">
+          <td width="150px">检验时间</td>
+          <td width="150px"></td>
+          <td width="150px">检验人员</td>
+          <td width="150px"></td>
+          <td width="150px">备注</td>
+          <td width="150px"></td>
+        </tr>
+
+      </tbody>
+    </table>
+  </div>`
+
+export default printHtml