zfire-newmall-admin/src/views/secondHandMall/components/preview.vue

<template>
  <el-dialog
    :visible.sync="visible"
    :show-close="false"
    :maskClosable="false"
    :close-on-click-modal="false"
    @cancel="hideModal"
    :width="350 + 'mm'"
  >
    <div v-loading="spinning" style="min-height: 100px">
      <div id="preview_content" ref="printDom"></div>
    </div>
    <template slot="title">
      <div>
        <el-button :loading="waitShowPrinter" type="primary" icon="printer" @click.stop="print">打印</el-button>
      </div>
    </template>
    <template slot="footer">
      <el-button key="close" type="info" @click="hideModal"> 关闭 </el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'PrintPreview',
  props: {
    addPrint: {
      type: Function,
      default: null
    },
  },
 
  data() {
    return {
      visible: false,
      spinning: true,
      waitShowPrinter: false,
      // 纸张宽 mm
      width: 0,
      // 模板
      hiprintTemplate: {},
      // 数据
      printData: {}
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    hideModal() {
      this.visible = false
      this.waitShowPrinter = false
    },
    show(hiprintTemplate, printData, width = '210') {
      this.visible = true
      this.width = width
      this.hiprintTemplate = hiprintTemplate
      setTimeout(() => {
        $('#preview_content').html(hiprintTemplate.getHtml(printData))
        this.spinning = false
      }, 500)
    },
    print() {
      this.hiprintTemplate.print()
      setTimeout(() => {
        this.hideModal()
        this.$emit('refreshList')
      }, 2000)

    }
  }
}
</script>

<style scoped>
::v-deep .el-dialog__body {
  padding: 0;
}

::v-deep tr {
  height: 40px !important;
}

::v-deep .hiprint-printPaper {
  margin: 0 auto;
}

::v-deep .hiprint-paperNumber {
  display: none;
}

.ant-modal-body {
  padding: 0px;
}

.ant-modal-content {
  margin-bottom: 24px;
}
</style>