出库单检验

package.json

@@ -53,6 +53,7 @@
     "jsencrypt": "3.0.0-rc.1",
     "jszip": "^3.10.1",
     "nprogress": "0.2.0",
+    "print-js": "^1.6.0",
     "qrcodejs2": "^0.0.2",
     "quill": "1.3.7",
     "screenfull": "5.0.2",
@@ -61,11 +62,11 @@
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
+    "vue-easy-print": "0.0.8",
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0",
-    "vue-easy-print": "0.0.8",
     "webstomp-client": "^1.2.6"
   },
   "devDependencies": {

src/api/lease/apply.js

@@ -135,3 +135,12 @@ export function uploadPurchaseFile(data) {
 }
 
 
+// 出库检验单-详情信息
+export function getCheckInfo(data) {
+  return request({
+    url: '/material/lease_apply_info/getInfo',
+    method: 'get',
+    params: data
+  })
+}
+

src/utils/chapter.js

@@ -1,5 +1,6 @@
 let chapter = (text, companyName) => {
     let canvas = document.getElementById("canvas");
+    if(canvas!=null){
     let context = canvas.getContext("2d");
   
     //let text = "XXX专用章";
@@ -68,6 +69,7 @@ let chapter = (text, companyName) => {
       context.fill();
       context.restore();
     }
+  }
   };
   
   export default chapter;

src/views/material/lease/outBound/index.vue

@@ -486,11 +486,12 @@
     <el-dialog
       :title="title"
       :visible.sync="openPrint"
-      width="1000px"
+      width="800px"
       append-to-body
     >
-      <div style="height: 500px; overflow-y: scroll">
+      <div style="height: 500px; overflow-y: scroll;padding: 0 20px">
-        <vue-easy-print tableShow ref="remarksPrintRefCheck" class="print">
+        <!-- <vue-easy-print tableShow ref="remarksPrintRefCheck" class="print" :printable="'checkId'"> -->
+          <div id="checkId">
           <div
             class="title"
             style="text-align: center; font-weight: 600; font-size: 16px"
@@ -511,6 +512,7 @@
               "
             >
               <span>领用工程：</span>
+              {{ checkDataInfo.leaseProject }}
             </div>
 
             <div
@@ -523,26 +525,27 @@
               "
             >
               <span>使用单位：</span>
+              {{ checkDataInfo.leaseUnit }}
             </div>
           </div>
           <el-table
             :data="printTableData"
             class="table"
-            style="margin-top: 20px; width: 900px; padding-bottom: 1px"
+            style="margin-top: 20px; padding-bottom: 1px"
             border
           >
-            <el-table-column label="机具名称" align="center" prop="machineTypeName"/>
+            <el-table-column label="机具名称" align="center" prop="typeName" width="60px"/>
-            <el-table-column label="规格型号" align="center" prop="specificationType"/>
+            <el-table-column label="规格型号" align="center" prop="typeModelName" width="60px"/>
-            <el-table-column label="单位" align="center" prop="unitName" width="40px"/>
+            <el-table-column label="单位" align="center" prop="unit" width="40px"/>
-            <el-table-column label="数量" align="center" prop="unitName" width="40px"/>
+            <el-table-column label="数量" align="center" prop="num" width="40px"/>
-            <el-table-column label="设备编码" align="center" prop="unitName"/>
+            <el-table-column label="设备编码" align="center" prop="maCode" width="60px"/>
-            <el-table-column label="额定载荷KN" align="center" prop="unitName"/>
+            <el-table-column label="额定载荷KN" align="center" prop="ratedLoad" width="60px"/>
-            <el-table-column label="试验载荷KN" align="center" prop="unitName"/>
+            <el-table-column label="试验载荷KN" align="center" prop="testLoad" width="60px"/>
-            <el-table-column label="持荷时间min" align="center" prop="unitName"/>
+            <el-table-column label="持荷时间min" align="center" prop="holdingTime" width="60px"/>
-            <el-table-column label="试验日期" align="center" prop="unitName"/>
+            <el-table-column label="试验日期" align="center" prop="testTime" width="50px"/>
-            <el-table-column label="下次试验日期" align="center" prop="unitName"/>
+            <el-table-column label="下次试验日期" align="center" prop="nextTestTime" width="60px"/>
-            <el-table-column label="检验结论" align="center" prop="unitName"/>
+            <el-table-column label="检验结论" align="center" prop="checkResult" width="50px"/>
-            <el-table-column label="备注" align="center" prop="unitName"/>
+            <el-table-column label="备注" align="center" prop="remark"/>
           </el-table>
 
           <div
@@ -554,20 +557,22 @@
               justify-content: right;
             "
           >
-            <div class="item"  style="width: 33%; display: flex; align-items: center;">
+            <div class="item"  style="width: 50%; display: flex; align-items: center;">
               <div>
-                <span>检验单位：xxxxxxxx</span>
+                <span>检验单位：</span>
               </div>
               <div >
-                <canvas id="canvas" width="180" height="180"></canvas>
+                <canvas id="canvas" width="180" height="180" style="display: block;"></canvas>
             </div>
             </div>
 
           </div>
-        </vue-easy-print>
+        </div>
+        <!-- </vue-easy-print> -->
       </div>
 
       <div slot="footer" class="dialog-footer" style="text-align: center">
+        <el-button type="primary" @click="handleExportCheck">导出</el-button>
         <el-button type="primary" @click="printCheck">打 印</el-button>
         <el-button @click="openPrint = false">关 闭</el-button>
       </div>
@@ -850,7 +855,7 @@
 </template>
 
 <script>
-import { getListLeaseApply, getApplyInfo } from "@/api/lease/apply";
+import { getListLeaseApply, getApplyInfo,getCheckInfo } from "@/api/lease/apply";
 import {
   outInfoList,
   getDetailsByTypeId,
@@ -858,7 +863,8 @@ import {
   submitNumOut,
 } from "@/api/lease/out";
 import vueEasyPrint from "vue-easy-print";
-import chapter from '../../../../utils/chapter';
+// import chapter from '../../../../utils/chapter';
+import printJS from 'print-js';
 export default {
   dicts: ["lease_task_status"],
   components: { vueEasyPrint },
@@ -929,6 +935,7 @@ export default {
       openPrint: false,
       printData: {},
       printTableData: [],
+      checkDataInfo: {},
       outNum: 0,
       outObj: {},
       parentIdTemp: undefined,
@@ -946,6 +953,7 @@ export default {
       titleView: "",
       showView:false,
       getListViewInfo:[],
+      idTemp:'',
     };
   },
   created() {
@@ -1061,6 +1069,8 @@ export default {
       });
     },
 
+
+
     //数量出库
     numOut(row) {
       console.log(row, "数量出库当前行数据--");
@@ -1166,16 +1176,40 @@ export default {
       });
     },
     //查看验收单
-    handlePrint(row) {
+   async handlePrint(row) {
-      // this.query.taskId = row.taskId
+      const res = await getCheckInfo({id:row.id});
-      // this.getPrintTable(row.taskId)
+      this.idTemp = row.id;
+      this.checkDataInfo = res.data.leaseApplyInfo;
+
+      this.printTableData = res.data.leaseOutVoList;
       setTimeout(() => {
-        chapter('机具检验专用章', '重庆送变电工程有限公司')
+        // 清除画布内容
-      }, 100);
+        this.clearCanvas();
+        this.chapter('机具检验专用章', this.checkDataInfo.leaseUnit)
+      }, 200);
       this.openPrint = true;
       this.title = "出库检验单";
     },
 
+    /** 导出按钮操作 */
+    handleExportCheck() {
+      this.download(
+        "/material/lease_apply_info/exportInfo",
+        { id:this.idTemp },
+        `出库检验单_${new Date().getTime()}.xlsx`
+      );
+    },
+
+    // 清除画布内容的方法
+    clearCanvas() {
+      const canvas = document.getElementById("canvas");
+      if (canvas) {
+        const context = canvas.getContext("2d");
+        context.clearRect(0, 0, canvas.width, canvas.height);
+      }
+    },
+
+
     //打开领料单
     async handleLld(row) {
       this.open = true;
@@ -1189,17 +1223,12 @@ export default {
 
     //出库检验单打印
     printCheck() {
-      // 获取打印内容的容器
+      printJS({
-      const printContent = this.$refs.remarksPrintRefCheck.$el;
+        printable: 'checkId',
-      // 添加一个类来隐藏页面其他部分
+        type: 'html',
-      document.body.classList.add('printing');
+        targetStyles: ['*'],
-      // 调用打印方法
+        // 其他配置选项
-      window.print();
+      });
-      // 打印完成后移除类并移除图像
-      window.onafterprint = () => {
-        document.body.classList.remove('printing');
-        printContent.removeChild(img);
-      };
     },
     
     //领料单打印
@@ -1213,14 +1242,14 @@ export default {
       this.getListViewInfo = row.maCodeVoList;
     },
 
-    /** 导出按钮操作 */
+    // /** 导出按钮操作 */
-    handleExport() {
+    // handleExport(row) {
-      this.download(
+    //   this.download(
-        "/material/purchase_check_info/export",
+    //     "/material/lease_apply_info/exportInfo",
-        { ...this.queryParams },
+    //     { ...this.queryParams },
-        `领料出库_${new Date().getTime()}.xlsx`
+    //     `领料出库_${new Date().getTime()}.xlsx`
-      );
+    //   );
-    },
+    // },
 
     //数量出库保存
     saveNumOut() {
@@ -1257,7 +1286,83 @@ export default {
     printView() {
       // this.$refs.remarksPrintRef.print();
     },
+    chapter(text, companyName) {
+
+    let canvas = document.getElementById("canvas");
+    if(canvas){
+    let context = canvas.getContext("2d");
+  
+    //let text = "XXX专用章";
+    //let companyName = "XXX科技股份有限公司";
+  
+    // 绘制印章边框
+    let width = canvas.width / 2;
+    let height = canvas.height / 2;
+    context.lineWidth = 3;
+    context.strokeStyle = "#f00";
+    context.beginPath();
+    context.arc(width, height, 80, 0, Math.PI * 2); //宽、高、半径
+    context.stroke();
+  
+    //画五角星
+    create5star(context, width, height, 20, "#f00", 0);
+  
+    // 绘制印章名称
+    context.font = "14px 宋体";
+    context.textBaseline = "middle"; //设置文本的垂直对齐方式
+    context.textAlign = "center"; //设置文本的水平对对齐方式
+    context.lineWidth = 1;
+    context.strokeStyle = "#f00";
+    context.strokeText(text, width, height + 50);
+  
+    // 绘制印章单位
+    context.translate(width, height); // 平移到此位置,
+    context.font = "14px 宋体";
+    let count = companyName.length; // 字数
+    let angle = (4 * Math.PI) / (3 * (count - 1)); // 字间角度
+    let chars = companyName.split("");
+    let c;
+    for (let i = 0; i < count; i++) {
+      c = chars[i]; // 需要绘制的字符
+      if (i == 0) {
+        context.rotate((5 * Math.PI) / 6);
+      } else {
+        context.rotate(angle);
+      }
+  
+      context.save();
+      context.translate(65, 0); // 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
+      context.rotate(Math.PI / 2); // 旋转90度,让字平行于x轴
+      context.strokeText(c, 0, 0); // 此点为字的中心点
+      context.restore();
+    }
+  
+    //绘制五角星
+    function create5star(context, sx, sy, radius, color, rotato) {
+      context.save();
+      context.fillStyle = color;
+      context.translate(sx, sy); //移动坐标原点
+      context.rotate(Math.PI + rotato); //旋转
+      context.beginPath(); //创建路径
+      // let x = Math.sin(0);
+      // let y = Math.cos(0);
+      let dig = (Math.PI / 5) * 4;
+      for (let i = 0; i < 5; i++) {
+        //画五角星的五条边
+        let x = Math.sin(i * dig);
+        let y = Math.cos(i * dig);
+        context.lineTo(x * radius, y * radius);
+      }
+      context.closePath();
+      context.stroke();
+      context.fill();
+      context.restore();
+    }
+  }
   },
+  },
+
+
 
   watch: {
     $route: {
@@ -1277,15 +1382,5 @@ export default {
   width: 70px !important;
   margin-bottom: 10px;
 }
-@media print {
+
-  body.printing {
-    visibility: hidden;
-  }
-  body.printing .el-dialog {
-    visibility: visible;
-    position: absolute;
-    left: 0;
-    top: 0;
-  }
-}
 </style>