codeMan 2 gadi atpakaļ
vecāks
revīzija
ee2ff18d07

+ 511 - 0
src/HDrpManagement/serveWorkBill/components/printTable.vue

@@ -0,0 +1,511 @@
+
+<template>
+  <div style="display:flex">
+    <canvas id="mycanvas" width="400" hight="400"></canvas>
+    <div style="display:inline-block;margin:0 auto;text-align: center;">
+      <!--安装培训确认单-->
+      <div ref="container" style="background:#ffffff" v-if="detail.workorder.type == '安装培训'">
+        <div slot="title">
+            <h2 style="margin:0;text-align: center;">浙江班尼戈智慧管网股份有限公司</h2>
+            <h3 style="text-align: center;">BZ/Q(EO)P38-02系统《E服务确认单》 </h3>
+            <div class="flex">
+                <p>日期:{{detail.createdate}}</p>
+                  <p> 编号:{{detail.confirmationno}}</p>
+            </div>
+        </div>
+        <table id="header__table" border="1" style="border-collapse: collapse;border:1px solid #EBEBED;">
+          <tr>
+            <td class="td__title">服务分类</td>
+            <td>{{ detail.workorder.type || '--' }}</td>
+            <td class="td__title">应用系统</td>
+            <td>{{ detail.workorder.class1 || '--' }}</td>
+            <td class="td__title">工单负责人</td>
+            <td>{{ detail.workorder.projectleader || '--' }}</td>
+          </tr>
+          <tr>
+            <td class="td__title">项目名称</td>
+            <td>{{ detail.workorder.projectname || '--' }}</td>
+            <td class="td__title">业务员负责人</td>
+            <td>{{ detail.workorder.saler_name || '--' }}</td>
+            <td class="td__title">服务经销商</td>
+            <td>{{ detail.workorder.abbreviation || '--' }}</td>
+          </tr>
+          <tr>
+            <td class="td__title">联系人</td>
+            <td>{{ detail.workorder.scenecontact || '--' }}</td>
+            <td class="td__title">联系方式</td>
+            <td>{{ detail.workorder.scenecontactphonenumber || '--' }}</td>
+            <td class="td__title">地址</td>
+            <td>{{ detail.workorder.province + detail.workorder.city + detail.workorder.county + detail.workorder.address }}</td>
+          </tr>
+          <tr>
+            <td colspan="6" style="padding:0">
+              <el-table :data="detail.trainers" :header-cell-style="{background:'#F2F3F5',color:'#000000'}" size="mini">
+              <el-table-column width="260" prop="name" label="培训人员姓名">
+                <template slot-scope="scope">
+                    {{ scope.row.name ? scope.row.name : '--' }}
+                </template>
+              </el-table-column>
+              <el-table-column prop="position"  label="职务">
+                <template slot-scope="scope">
+                    {{ scope.row.position ? scope.row.position : '--' }}
+                </template>
+              </el-table-column>
+              <el-table-column width="200" prop="phonenumber"  label="电话">
+                <template slot-scope="scope">
+                    {{ scope.row.phonenumber ? scope.row.phonenumber : '--' }}
+                </template>
+              </el-table-column>
+              <el-table-column width="200" prop="enterprisename"  label="所属经销商">
+                <template slot-scope="scope">
+                    {{ scope.row.enterprisename ? scope.row.enterprisename : '--' }}
+                </template>
+              </el-table-column>
+            </el-table>
+            </td>
+          </tr>
+          <tr>
+            <td colspan="6" style="padding:0">
+              <el-table :data="detail.trainertitems" :header-cell-style="{background:'#F2F3F5',color:'#000000'}" size="mini">
+              <el-table-column width="260" prop="itemname" label="培训产品名">
+                <template slot-scope="scope">
+                    {{ scope.row.itemname ? scope.row.itemname : '--' }}
+                </template>
+              </el-table-column>
+              <el-table-column prop="itemno"  label="编号">
+                <template slot-scope="scope">
+                    {{ scope.row.itemno ? scope.row.itemno : '--' }}
+                </template>
+              </el-table-column>
+              <el-table-column width="200" prop="qty"  label="数量">
+                <template slot-scope="scope">
+                    {{ scope.row.qty ? scope.row.qty : '--' }}
+                </template>
+              </el-table-column>
+              <el-table-column width="200" prop="model"  label="型号">
+                <template slot-scope="scope">
+                    {{ scope.row.model ? scope.row.model : '--' }}
+                </template>
+              </el-table-column>
+              <el-table-column width="200" prop="spec"  label="规格">
+                <template slot-scope="scope">
+                    {{ scope.row.spec ? scope.row.spec : '--' }}
+                </template>
+              </el-table-column>
+            </el-table>
+            </td>
+          </tr>
+          <tr>
+            <td style="background:#FAFAFA">现场培训内容</td>
+            <td colspan="5">{{ text.descriptions1 }}</td>
+          </tr>
+          <tr>
+            <td style="background:#FAFAFA">现场互动及测试培训效果</td>
+            <td colspan="5">{{ text.descriptions2 }}</td>
+          </tr>
+          <tr>
+            <td style="background:#FAFAFA">客户意见及签字确认:</td>
+            <td colspan="5"><img ref="nameImage" style="width:200px" v-if="signatureName.length" :src="signatureName[0].url" alt=""></td>
+          </tr>
+          <tr>
+            <td style="background:#FAFAFA">反应速度</td>
+            <td colspan="2">{{ detail.responsescore }}</td>
+            <td style="background:#FAFAFA">配合态度</td>
+            <td colspan="2">{{ detail.attitudescore }}</td>
+          </tr>
+          <tr>
+            <td style="background:#FAFAFA"></td>
+            <td colspan="5">尊敬的用户,感谢您一直以来对我们公司的信任和支持,为更好的为您提供优质服务和产品,请允许我们的客户人员带回您最宝贵的意见</td>
+          </tr>
+        </table>
+      </div>
+      <!--服务确认单-->
+      <div ref="container" style="background:#ffffff" v-else-if="detail.workorder.type == '服务'">
+        <div slot="title" style="text-align: center;width: 100%;">
+            <h2 style="margin:0">浙江班尼戈智慧管网股份有限公司</h2>
+            <h3 style="padding:10px;text-align:center">售后服务确认单 </h3>
+            <div class="flex">
+                <p>日期:{{detail.createdate}}</p>
+                  <p> 编号:{{detail.confirmationno}}</p>
+            </div>
+        </div>
+        <table id="header__table" border="1" style="border-collapse: collapse;border:1px solid #EBEBED;">
+          <tr>
+            <td class="td__title">项目名称</td>
+            <td>{{ detail.workorder.projectname || '--' }}</td>
+            <td class="td__title">保质期</td>
+            <td>{{ detail.workorder.isouritem === 1?'内':'外' }}</td>
+            <td class="td__title">是否有偿服务</td>
+            <td>{{ text.descriptions4 > 0?'是':'否' }}</td>
+          </tr>
+          <tr>
+            <td class="td__title">服务金额</td>
+            <td>{{ text.descriptions4 }}</td>
+            <td class="td__title">联系人</td>
+            <td>{{ detail.workorder.scenecontact || '--' }}</td>
+            <td class="td__title">联系方式</td>
+            <td>{{ detail.workorder.scenecontactphonenumber || '--' }}</td>
+          </tr>
+          <tr>
+            <td class="td__title">应用系统</td>
+            <td>{{ detail.workorder.class1 || '--' }}</td>
+            <td class="td__title">客诉大类</td>
+            <td>{{ detail.workorder.class2 || '--' }}</td>
+            <td class="td__title">地址</td>
+            <td>{{ detail.workorder.province + detail.workorder.city + detail.workorder.county + detail.workorder.address }}</td>
+          </tr>
+          <tr>
+            <td colspan="6" style="padding:0">
+              <el-table :data="detail.trainertitems" :header-cell-style="{background:'#F2F3F5',color:'#000000'}" size="mini">
+                <el-table-column width="260" prop="itemname" label="培训产品名">
+                  <template slot-scope="scope">
+                      {{ scope.row.itemname ? scope.row.itemname : '--' }}
+                  </template>
+                </el-table-column>
+                <el-table-column prop="itemno"  label="编号">
+                  <template slot-scope="scope">
+                      {{ scope.row.itemno ? scope.row.itemno : '--' }}
+                  </template>
+                </el-table-column>
+                <el-table-column width="200" prop="qty"  label="数量">
+                  <template slot-scope="scope">
+                      {{ scope.row.qty ? scope.row.qty : '--' }}
+                  </template>
+                </el-table-column>
+                <el-table-column width="200" prop="model"  label="型号">
+                  <template slot-scope="scope">
+                      {{ scope.row.model ? scope.row.model : '--' }}
+                  </template>
+                </el-table-column>
+                <el-table-column width="200" prop="spec"  label="规格">
+                  <template slot-scope="scope">
+                      {{ scope.row.spec ? scope.row.spec : '--' }}
+                  </template>
+                </el-table-column>
+              </el-table>
+            </td>
+          </tr>
+          <tr>
+            <td style="background:#FAFAFA">问题简述</td>
+            <td colspan="5">{{ detail.workorder.reason || '--' }}</td>
+          </tr>
+          <tr>
+            <td style="background:#FAFAFA">原因及处理措施</td>
+            <td colspan="5">{{ detail.confirmationcontent[8]?detail.confirmationcontent[8].treatment.confirm_value :''}}</td>
+          </tr>
+          <tr>
+            <td style="background:#FAFAFA">下次处理日期</td>
+            <td colspan="5">{{ detail.confirmationcontent[7]?detail.confirmationcontent[7].nextTreatmentTime.confirm_value:''}}</td>
+          </tr>
+          <tr>
+            <td style="background:#FAFAFA">事项说明</td>
+            <td colspan="5">{{ detail.confirmationcontent[9]?detail.confirmationcontent[9].explain.confirm_value:"" }}</td>
+          </tr>
+          <tr>
+            <td style="background:#FAFAFA">客户意见及签字确认:</td>
+            <td colspan="5"><img ref="nameImage" style="width:200px" v-if="signatureName.length" :src="signatureName[0].url" alt=""></td>
+          </tr>
+          <tr>
+            <td style="background:#FAFAFA">反应速度</td>
+            <td colspan="2">{{ detail.responsescore }}</td>
+            <td style="background:#FAFAFA">配合态度</td>
+            <td colspan="2">{{ detail.attitudescore }}</td>
+          </tr>
+          <tr>
+            <td style="background:#FAFAFA"></td>
+            <td colspan="5">尊敬的用户,感谢您一直以来对我们公司的信任和支持,为更好的为您提供优质服务和产品,请允许我们的客户人员带回您最宝贵的意见</td>
+          </tr>
+        </table>
+      </div>
+      <!--安装调试确认单-->
+      <div ref="container" style="background:#ffffff" v-else-if="detail.workorder.type == '安装调试'">
+        <div slot="title">
+            <h2 style="margin:0;text-align: center;">浙江班尼戈智慧管网股份有限公司</h2>
+            <h3 style="text-align: center;">BZ/Q(EO)P38-02系统《E服务确认单》 </h3>
+            <div class="flex">
+                <p>日期:{{detail.createdate}}</p>
+                  <p> 编号:{{detail.confirmationno}}</p>
+            </div>
+        </div>
+        <table id="header__table" border="1" style="border-collapse: collapse;border:1px solid #EBEBED;">
+          <tr>
+            <td class="td__title">服务分类</td>
+            <td>{{ detail.workorder.type || '--' }}</td>
+            <td class="td__title">应用系统</td>
+            <td>{{ detail.workorder.class1 || '--' }}</td>
+            <td class="td__title">工单负责人</td>
+            <td>{{ detail.workorder.projectleader || '--' }}</td>
+          </tr>
+          <tr>
+            <td class="td__title">项目名称</td>
+            <td>{{ detail.workorder.projectname || '--' }}</td>
+            <td class="td__title">业务员负责人</td>
+            <td>{{ detail.workorder.saler_name || '--' }}</td>
+            <td class="td__title">服务经销商</td>
+            <td>{{ detail.workorder.abbreviation || '--' }}</td>
+          </tr>
+          <tr>
+            <td class="td__title">联系人</td>
+            <td>{{ detail.workorder.scenecontact || '--' }}</td>
+            <td class="td__title">联系方式</td>
+            <td>{{ detail.workorder.scenecontactphonenumber || '--' }}</td>
+            <td class="td__title">地址</td>
+            <td>{{ detail.workorder.province + detail.workorder.city + detail.workorder.county + detail.workorder.address }}</td>
+          </tr>
+          <tr>
+            <td colspan="6" style="padding:0">
+              <el-table :data="detail.trainertitems" :header-cell-style="{background:'#F2F3F5',color:'#000000'}" size="mini">
+                <el-table-column width="260" prop="itemname" label="培训产品名">
+                  <template slot-scope="scope">
+                      {{ scope.row.itemname ? scope.row.itemname : '--' }}
+                  </template>
+                </el-table-column>
+                <el-table-column prop="itemno"  label="编号">
+                  <template slot-scope="scope">
+                      {{ scope.row.itemno ? scope.row.itemno : '--' }}
+                  </template>
+                </el-table-column>
+                <el-table-column width="200" prop="qty"  label="数量">
+                  <template slot-scope="scope">
+                      {{ scope.row.qty ? scope.row.qty : '--' }}
+                  </template>
+                </el-table-column>
+                <el-table-column width="200" prop="model"  label="型号">
+                  <template slot-scope="scope">
+                      {{ scope.row.model ? scope.row.model : '--' }}
+                  </template>
+                </el-table-column>
+                <el-table-column width="200" prop="spec"  label="规格">
+                  <template slot-scope="scope">
+                      {{ scope.row.spec ? scope.row.spec : '--' }}
+                  </template>
+                </el-table-column>
+              </el-table>
+            </td>
+          </tr>
+          <tr>
+            <td style="background:#FAFAFA">客诉情况</td>
+            <td colspan="5">{{ detail.workorder.reason }}</td>
+          </tr>
+          <tr>
+            <td style="background:#FAFAFA">是否为我公司生产、出货产品?</td>
+            <td colspan="5">{{ detail.workorder.isouritem === 1?'是':'否' }}</td>
+          </tr>
+          <tr>
+            <td style="background:#FAFAFA">是否可以在线维修、调试</td>
+            <td colspan="5">{{ text.descriptions1 }}</td>
+          </tr>
+          <tr>
+            <td style="background:#FAFAFA">是否需要拆卸配件或整拆?</td>
+            <td colspan="5">{{ text.descriptions2 }}</td>
+          </tr>
+          <tr>
+            <td style="background:#FAFAFA">与现场协商确认维修方案(包含周期)?</td>
+            <td colspan="5">{{ text.descriptions3 }}</td>
+          </tr>
+          <tr>
+            <td style="background:#FAFAFA">是否有偿服务</td>
+            <td colspan="5">{{ text.descriptions4 > 0?'是':'否' }}</td>
+          </tr>
+          <tr>
+            <td style="background:#FAFAFA">服务金额</td>
+            <td colspan="5">{{ text.descriptions4 }}</td>
+          </tr>
+          <tr>
+            <td style="background:#FAFAFA">实施内容</td>
+            <td colspan="5">{{ text.descriptions5 }}</td>
+          </tr>
+          <tr>
+            <td style="background:#FAFAFA">服务测试内容描述</td>
+            <td colspan="5">{{ text.descriptions6 }}</td>
+          </tr>
+          <tr>
+            <td style="background:#FAFAFA">现场交代事项</td>
+            <td colspan="5">{{ text.descriptions7 }}</td>
+          </tr>
+          <tr>
+            <td style="background:#FAFAFA">保质期</td>
+            <td colspan="5">{{ detail.workorder.isouritem === 1?'内':'外' }}</td>
+          </tr>
+          <tr>
+            <td style="background:#FAFAFA">备注说明</td>
+            <td colspan="5">{{ workorder.remarks || '--' }}</td>
+          </tr>
+          <tr>
+            <td style="background:#FAFAFA">客户意见及签字确认:</td>
+            <td colspan="5"><img ref="nameImage" style="width:200px" v-if="signatureName.length" :src="signatureName[0].url" alt=""></td>
+          </tr>
+          <tr>
+            <td style="background:#FAFAFA">反应速度</td>
+            <td colspan="2">{{ detail.responsescore }}</td>
+            <td style="background:#FAFAFA">配合态度</td>
+            <td colspan="2">{{ detail.attitudescore }}</td>
+          </tr>
+          <tr>
+            <td style="background:#FAFAFA"></td>
+            <td colspan="5">尊敬的用户,感谢您一直以来对我们公司的信任和支持,为更好的为您提供优质服务和产品,请允许我们的客户人员带回您最宝贵的意见</td>
+          </tr>
+        </table>
+      </div>
+      <el-button style="margin:20px 0" type="primary" size="small" @click="submit">生 成 图 片</el-button>
+    </div>
+  </div>
+  
+</template>
+
+<script>
+import domtoimage from 'dom-to-image'
+export default {
+  props: ['data'],
+  data () {
+    return {
+      detail: {
+        servicetype:{},
+        workorder:{},
+        servicetitems:[],
+        confirmationcontent:[]
+      },
+      signatureName:[],
+      needSignName:true,
+      show:true,
+      text:{
+        descriptions1:'',
+        descriptions2:'',
+        descriptions3:'',
+        descriptions4:0,
+        descriptions5:'',
+        descriptions6:'',
+        descriptions7:''
+      }
+    }
+  },
+  methods: {
+    async listData () {
+      let res = await this.$api.requested({
+        "id": "20230211105803",
+        "version": 1,
+        "content": {
+          "sa_workorder_confirmationid": this.$route.query.id
+        }
+      })
+      res.data.confirmationcontent.forEach(e => {
+        Object.keys(e).map((key,index)=>{
+          this.text.descriptions4 += e[key].amount
+          if (key.includes('现场培训内容')) {
+            this.text.descriptions1 = e[key].confirm_value
+          }
+          if (key.includes('测试培训效果')) {
+            this.text.descriptions2 = e[key].confirm_value
+          }
+        })
+      })
+      this.detail = res.data
+      this.signatureName = this.detail.attinfos.filter(e=>{
+        if (e.usetype === 'signature') {
+          return e
+        }
+      })
+      if (this.signatureName.length) {
+        let canvas = document.getElementById('mycanvas')
+        // let node = this.$refs.nameImage
+        // var CANVAS = document.createElement('canvas')
+        // CANVAS.width = 100;
+        // CANVAS.height = 100;
+        var context = canvas.getContext('2d');
+        var img = new Image();
+        img.crossOrigin = "anonymous"
+        img.src = this.signatureName[0].url;
+
+        img.onload=function() {
+          console.log(img);
+          context.drawImage(img,0,0,100,100 );
+          let dataURL = canvas.toDataURL("image/jpg");
+          this.$refs.nameImage.src = dataURL
+        }
+      }
+      console.log(this.detail)
+    },
+    submit () {
+      let that = this
+      domtoimage.toBlob(this.$refs.container)
+	    .then(function (blob) {
+        let file = new File([blob], this.detail.workorder.type, { type: blob.type })
+        console.log("File对象", file);
+
+        
+        
+        // console.log('触发');
+        // let blobUrl = window.URL.createObjectURL(blob)
+        // let link = document.createElement('a')
+        // link.download = that.detail.workorder.type
+        // link.style.display = 'none'
+        // link.href = blobUrl
+        // // 触发点击
+        // document.body.appendChild(link)
+        // link.click()
+        // // 移除
+        // document.body.removeChild(link)
+      })
+    },
+    // 获取华为云上传地址
+    async getUploadUrl (file, ext) {
+      this.params.content.parentid = this.folderid
+      const res = await this.$api.requested(this.params)
+      let url = res.data.uploadurl
+      let obsfilename = res.data.serialfilename
+
+      this.upoladFileToServer(url, file, ext, obsfilename)
+    },
+
+    // 上传到华为云
+    async upoladFileToServer (url, file, ext, obsfilename) {   
+      console.log(file)   
+      let THIS = this
+      let config = {
+        headers: ext === 'pdf' ? { 'Content-Type': 'application/pdf' } : ext === 'svg'?{ 'Content-Type': 'image/svg+xml' } : { 'Content-Type': 'application/octet-stream' },
+      }
+      const res = await this.$upload.hw_upload(url, file.raw, config)
+      this.createFileRecord(obsfilename)
+    },
+
+    // 上传成功以后生成附件记录
+    async createFileRecord (obsfilename,attinfos) {
+      let obj = {
+         "serialfilename": obsfilename
+      }
+      obj = Object.assign({},obj,this.bindData)
+      let param = {
+        "classname": "system.attachment.huawei.OBS",
+        "method": "uploadSuccess",
+        "content":obj
+      }
+      const res = await this.$api.requested(param)
+      if (res.code ===  1) {
+        this.$emit('onSuccess',res)
+      }
+    },
+  },
+  created () {
+  },
+  mounted () {
+    this.listData()
+  }
+}
+
+</script>
+<style scoped>
+#header__table tr td {
+  width: 120px;
+  padding:10px;
+}
+.td__title {
+  background: #FAFAFA;
+  color: #000000;
+  font-weight: bold;
+}
+.flex{
+      display: flex;
+      justify-content: space-between;
+  }
+
+</style>

+ 9 - 1
src/router/index.js

@@ -96,7 +96,15 @@ let routes = [
           ast_nav:true
         },
         component: () => import(/* webpackChunkName: "about" */ '@/views/printmodel/design/index.vue')
-      }]
+      },{
+        path: '/printTable',
+        name: 'printTable',
+        meta: {
+          title: '确认单生成',
+          ast_nav:true
+        },
+        component: () => import(/* webpackChunkName: "about" */ '@/HDrpManagement/serveWorkBill/components/printTable')
+      },]
   }
 ];
 

+ 2 - 2
vue.config.js

@@ -10,8 +10,8 @@ module.exports = {
       },
       open: true,
       // host: '192.168.4.170',
-      host: 'localhost',
-      port: 8000,
+      host: 'oms.idcgroup.com.cn',
+      port: 8087,
       proxy: {
         '/apis': {
           // target: 'http://61.164.207.46:8000',  // target host*/