2023-4-22

public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
-    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+    <!-- <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>

src/HDrpManagement/serveWorkBill/components/printTable.vue

@@ -2,7 +2,8 @@
 <template>
   <div style="display:flex">
     <!-- <canvas id="mycanvas" width="400" hight="400"></canvas> -->
-    <div style="display:inline-block;margin:0 auto;">
+    <img :src="previewImage" alt="" v-if="previewImage" style="margin:0 auto;">
+    <div style="display:inline-block;margin:0 auto;" v-else>
       <!--安装培训确认单-->
       <div ref="container" style="background:#ffffff" v-if="detail.workorder.type == '安装培训'">
         <div slot="title">
@@ -465,7 +466,7 @@
           </tr>
         </table>
       </div>
-      <el-button style="margin:20px 0" type="primary" size="small" @click="submit">生 成 图 片</el-button>
+      <!-- <el-button style="margin:20px 0" type="primary" size="small" @click="submit">生 成 图 片</el-button> -->
     </div>
   </div>
   
@@ -477,6 +478,7 @@ export default {
   props: ['data'],
   data () {
     return {
+      previewImage:'',
       detail: {
         servicetype:{},
         workorder:{},
@@ -510,6 +512,7 @@ export default {
   },
   methods: {
     async listData () {
+      let that = this
       let param = {
         "id": "20230211105803",
         "content": {
@@ -554,7 +557,6 @@ export default {
           })
         })
       }
-      res.data.workorder.type ='服务'
       this.detail = res.data
       this.signatureName = this.detail.attinfos.filter(e=>{
         if (e.usetype === 'signature') {
@@ -563,27 +565,37 @@ export default {
       })
       if (this.signatureName.length) {
         this.$nextTick(() => {
-          let that = this
           let node = this.$refs.nameImage
-          console.log(node.height);
+          console.log(node.height)
           let CANVAS = document.createElement('canvas')
-          CANVAS.width = node.width;
-          CANVAS.height =  node.width;
-          let context = CANVAS.getContext('2d');
-
-          let img = new Image();
+          CANVAS.width = node.width
+          CANVAS.height =  node.width
+          let context = CANVAS.getContext('2d')
+          let img = new Image()
           img.crossOrigin = "anonymous"
-
           img.onload=function() {
-            console.log(img);
-            context.drawImage(img,0,0,node.width, node.height);
-            let dataURL = CANVAS.toDataURL("image/jpg");
+            console.log(img)
+            context.drawImage(img,0,0,node.width, node.height)
+            let dataURL = CANVAS.toDataURL("image/jpg")
             node.src = dataURL
+
+            if (that.detail.status == '新建') {
+              that.submit()
+            } else {
+              domtoimage.toJpeg(that.$refs.container,{
+                width:that.$refs.container.width,
+                height:that.$refs.container.height,
+                cacheBust:true
+              }).then((res) => {
+                that.previewImage = res
+              })
+            }
           }
           img.src = this.signatureName[0].url + '?time=' + Date.now();
         })
       }
-      console.log(this.detail)
+
+      
     },
     submit () {
       let that = this
@@ -593,6 +605,10 @@ export default {
         that.params.content.filename = that.detail.workorder.type + '.jpg'
         that.params.content.filetype = 'jpg'
         that.getUploadUrl(file,'jpg')
+
+        let ReadFile = new FileReader()
+        that.previewImage = URL.createObjectURL(blob)
+        console.log(that.previewImage);
       })
     },
     // 获取华为云上传地址