yos_web/src/HDrpManagement/serveWorkBill/components/printTable.vue

<template>
  <div style="display:flex">
    <!-- <canvas id="mycanvas" width="400" hight="400"></canvas> -->
    <img style="width:100%;object-fit:fill" :src="previewImage" alt="" v-if="previewImage">
    <div style="display:inline-block;margin:0 auto;" v-else>
      <!--安装培训确认单-->
      <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" width="200"  label="编号">
                <template slot-scope="scope">
                    {{ scope.row.itemno ? scope.row.itemno : '--' }}
                </template>
              </el-table-column>
              <el-table-column width="60" 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" width="200" 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 colspan="2" style="background:#FAFAFA">客诉情况</td>
            <td colspan="1">{{ detail.workorder.reason }}</td>
            <td colspan="2" style="background:#FAFAFA">是否为我公司生产、出货产品？</td>
            <td colspan="1">{{ detail.workorder.isouritem === 1?'是':'否' }}</td>
          </tr>
          <tr>
            <td colspan="2" style="background:#FAFAFA">是否可以在线维修、调试</td>
            <td colspan="1">{{ text.descriptions1 }}</td>
            <td colspan="2" style="background:#FAFAFA">是否需要拆卸配件或整拆？</td>
            <td colspan="1">{{ text.descriptions2 }}</td>
          </tr>
          <tr>
            <td colspan="2" style="background:#FAFAFA">与现场协商确认维修方案（包含周期）？</td>
            <td colspan="1">{{ text.descriptions3 }}</td>
            <td colspan="2" style="background:#FAFAFA">是否有偿服务</td>
            <td colspan="5">{{ text.descriptions4 > 0?'是':'否' }}</td>
          </tr>
          <tr>
            <td colspan="2" style="background:#FAFAFA">服务金额</td>
            <td colspan="1">{{ text.descriptions4 }}</td>
            <td colspan="2" style="background:#FAFAFA">实施内容</td>
            <td colspan="1">{{ text.descriptions5 }}</td>
          </tr>
          <tr>
            <td colspan="2" style="background:#FAFAFA">服务测试内容描述</td>
            <td colspan="1">{{ text.descriptions6 }}</td>
            <td colspan="2" style="background:#FAFAFA">现场交代事项</td>
            <td colspan="1">{{ 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">{{ detail.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>
      <!--非工序确认单-->
      <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;">服务确认单 </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>{{ detail.workorder.projectleader || '--' }}</td>
          </tr>
          <tr>
            <td class="td__title">服务单号</td>
            <td>{{ detail.workorder.servicebillno || '--' }}</td>
            <td class="td__title">服务类型</td>
            <td>{{ detail.workorder.servicetype || '--' }}</td>
            <td class="td__title">订单号</td>
            <td>{{ detail.workorder.sonum || '--' }}</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.class1 || '--' }}</td>
          </tr>
          <tr>
            <td class="td__title">是否保内</td>
            <td>{{ detail.workorder.inqualityguaranteeperiod ? '是' : '否' }}</td>
            <td class="td__title">售后人员</td>
            <td>{{ detail.workorder.saler_name || '--' }}</td>
            <td class="td__title">经销商名称</td>
            <td>{{ detail.workorder.enterprisename || '--' }}</td>
          </tr>
          <tr>
            <td class="td__title">申请原因</td>
            <td colspan="6">{{ detail.workorder.reason || '--' }}</td>
          </tr>
          <tr>
            <td class="td__title">地址</td>
            <td colspan="6">{{ 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" width="200"  label="编号">
                  <template slot-scope="scope">
                      {{ scope.row.itemno ? scope.row.itemno : '--' }}
                  </template>
                </el-table-column>
                <el-table-column width="100" 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-column width="200" prop="resaon"  label="异常现象">
                  <template slot-scope="scope">
                      {{ scope.row.resaon ? scope.row.resaon : '--' }}
                  </template>
                </el-table-column>
              </el-table>
            </td>
          </tr>
          <tr>
            <td class="td__title" colspan="6" style="text-align:center">处理过程</td>
          </tr>
          <tr v-for="(item,index) in detail.trainertitems" :key="item.sa_workorder_node_itemsid">
            <td>
              <p>{{ item.itemname }}</p>
              <p>{{ item.itemno }}</p>
            </td>
            <td colspan="6">{{ item.processing }}</td>
          </tr>
          <tr>
            <tr>
            <td class="td__title" colspan="6" style="text-align:center">处理结果</td>
          </tr>
          <tr v-for="(item,index) in detail.trainertitems" :key="item.sa_workorder_node_itemsid">
            <td>
              <p>{{ item.itemname }}</p>
              <p>{{ item.itemno }}</p>
            </td>
            <td colspan="6">{{ item.result }}</td>
          </tr>
          <tr>
            <tr>
            <td class="td__title" colspan="6" style="text-align:center">原因分析</td>
          </tr>
          <tr v-for="(item,index) in detail.trainertitems" :key="item.sa_workorder_node_itemsid">
            <td>
              <p>{{ item.itemname }}</p>
              <p>{{ item.itemno }}</p>
            </td>
            <td colspan="6">{{ item.reason }}</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="1">{{ detail.responsescore }}</td>
            <td style="background:#FAFAFA">配合态度</td>
            <td colspan="1">{{ detail.attitudescore }}</td>
            <td style="background:#FAFAFA">满意度</td>
            <td colspan="1">{{ detail.satisfaction }}</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 {
      previewImage:'',
      detail: {
        servicetype:{},
        workorder:{},
        servicetitems:[],
        confirmationcontent:[]
      },
      signatureName:[],
      needSignName:true,
      show:true,
      text:{
        descriptions1:'',
        descriptions2:'',
        descriptions3:'',
        descriptions4:0,
        descriptions5:'',
        descriptions6:'',
        descriptions7:''
      },
      folderid:this.$route.query.parentid,
      params: {
        "accesstoken":this.$route.query.token,
        "classname": "system.attachment.huawei.OBS",
        "method": "getFileName",
        "content": {
          "filename": '',
          "filetype": '',
          "parentid": ""//归属文件夹ID
        }
      }
    }
  },
  methods: {
    async listData () {
      let that = this
      let param = {
        "id": "20230211105803",
        "content": {
          "sa_workorder_confirmationid": this.$route.query.ownerid
        }
      }
      let res = await this.$api.requested(param)
      if (res.data.workorder.type == '安装测试') {
        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
            }
            if (key.includes('维修方案')) {
              this.text.descriptions3 = e[key].confirm_value?e[key].confirm_value:e[key].textcontent
            }
            if (key.includes('实施内容记录')) {
              this.text.descriptions5 = e[key].confirm_value?e[key].confirm_value:e[key].textcontent
            }
            if (key.includes('与现场协商试运行测试并验收')) {
              this.text.descriptions6 = e[key].confirm_value?e[key].confirm_value:e[key].textcontent
            }
            if (key.includes('现场交代注意事项')) {
              this.text.descriptions7 = e[key].confirm_value?e[key].confirm_value:e[key].textcontent
            }
          })
        })
      } else {
        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) {
        this.$nextTick(() => {
          let node = this.$refs.nameImage
          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()
          img.crossOrigin = "anonymous"
          img.onload=function() {
            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();
        })
      }

      
    },
    submit () {
      let that = this
      domtoimage.toBlob(this.$refs.container)
	    .then(function (blob) {
        let file = new File([blob], that.detail.workorder.type, { type: blob.type })
        that.params.content.filename = that.detail.workorder.type + '.jpg'
        that.params.content.filetype = 'jpg'
        that.getUploadUrl(file,'jpg')

        that.previewImage = URL.createObjectURL(blob)
        console.log(that.previewImage);
      })
    },
    // 获取华为云上传地址
    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, config)
      this.createFileRecord(obsfilename)
    },

    // 上传成功以后生成附件记录
    async createFileRecord (obsfilename,attinfos) {
      let obj = {
         "serialfilename": obsfilename
      }
      obj = Object.assign({},obj,this.bindData)
      let param = {
        "accesstoken":this.$route.query.token,
        "classname": "system.attachment.huawei.OBS",
        "method": "uploadSuccess",
        "content":obj
      }
      const res = await this.$api.requested(param)
      if (res.code ===  1) {
        let res2 = await this.$api.requested({
          "accesstoken":this.$route.query.token,
          "classname": "system.attachment.Attachment",
          "method": "createFileLink",
          "content": {
              "ownertable": "sa_workorder_confirmation",
              "ownerid": this.$route.query.ownerid,
              "usetype": "default",
              "attachmentids": [
                  res.data.attachmentids[0]
              ]
          }
        })
        this.$emit('onSuccess',res)
      }
    },
  },
  created () {
    if (sessionStorage.getItem('active_account')) {
      let result = JSON.parse(sessionStorage.getItem('active_account'))
      result.token = this.$route.query.token
      sessionStorage.setItem('active_account',JSON.stringify(result))
    } else {
      sessionStorage.setItem('active_account',JSON.stringify({token:this.$route.query.token}))
    }
  },
  mounted () {
    this.listData()
  }
}

</script>
<style scoped>
#header__table tr td {
  width: 120px;
  padding:10px;
}
.td__title {
  background: #FAFAFA;
  color: #000000;
}
.flex{
      display: flex;
      justify-content: space-between;
  }
.noborder td {
  border-left: none;
  border-top: none;
  border-bottom: none;
}
</style>