yos_web/src/components/print/index.vue

<template>
  <div>
    <el-button type="text" size="small" @click="queryModelList">打 印</el-button>
    <el-dialog append-to-body title="选择模板" :visible.sync="dialogTableVisible" width="400px">
      <el-table size="mini" :data="gridData">
        <el-table-column prop="modelname" label="模板名称"></el-table-column>
        <el-table-column width="100" label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="selectMode(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
// import {defaultElementTypeProvider, hiprint} from '@/index'
import {mapGetters} from 'vuex'
export default {
  props:['dataid'],
  data () {
    return {
      gridData:[],
      panel:{},
      printData:{},
      sys_printmodelid:null,
      dialogTableVisible:false
    }
  },
  computed:{
    ...mapGetters({
      activeApp:'activeApp'
    })
  },
  methods:{
    async queryModelList () {
      this.dialogTableVisible = true
      const res = await this.$api.requested({
        "id": 20221121174201,
        "content": { 
          "systemappid":this.activeApp.systemappid
        }
      })
      this.gridData = res.data
    },
    async queryPrintData() {
      const res = await this.$api.requested({
        "id": 20221121174301,
        "content": { 
          "sys_printmodelid": this.sys_printmodelid,
          "dataid":this.dataid
        }
      })
      this.panel = JSON.parse(res.data.modeljson)
      let obj = this.panel.panels[0].printElements
      obj.forEach(element => {
        if (element.printElementType.type === 'text') {
           element.options.sys_printdatasetid?this.printData[element.options.field] = res.data.data['dataset'+ element.options.sys_printdatasetid][0][element.options.field]:""
        } else {
          
          console.log(element.options.sys_printdatasetid)
          this.printData[element.options.field] = res.data.data['dataset'+ element.options.sys_printdatasetid]
        }
      })
      this.onlyPrint()
    },
    selectMode (row) {
      this.sys_printmodelid = row.sys_printmodelid
      this.dialogTableVisible = false
      this.queryPrintData()
    },
    onlyPrint() {
      let hiprintTemplate = this.$print(undefined, this.panel, this.printData, {}, {
        styleHandler: () => {
          let css = '<link href="http://hiprint.io/Content/hiprint/css/print-lock.css" media="print" rel="stylesheet">';
          return css
        }
      })
      console.log(hiprintTemplate);
    },
  }
}

</script>
<style>
</style>