print.vue 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <template>
  2. <div class="print-page-header">
  3. <a-radio-group key="4" id="print-printerType" v-model="printerType">
  4. <a-radio value="NEEDLE" id="print-printerType1">针式</a-radio>
  5. <a-radio value="INK" id="print-printerType0">喷墨</a-radio>
  6. </a-radio-group>
  7. <slot name="extendCons"></slot>
  8. <a-button key="3" id="print-preview-btn" :loading="$store.state.app.printLoading" :disabled="disabled" @click="handlePrint('preview')">打印预览</a-button>
  9. <a-button
  10. key="2"
  11. type="primary"
  12. id="print-print-btn"
  13. :disabled="disabled"
  14. :loading="$store.state.app.printLoading"
  15. @click="handlePrint('print')">
  16. {{ $store.state.app.printLoading?'打印中...':'快捷打印' }}
  17. </a-button>
  18. <a-button
  19. key="1"
  20. type="primary"
  21. :loading="$store.state.app.printLoading"
  22. class="button-warning"
  23. id="print-export-btn"
  24. v-if="showExport"
  25. :disabled="disabled"
  26. @click="handlePrint('export')">导出Excel</a-button>
  27. <!-- 打印 -->
  28. <div id="print"></div>
  29. </div>
  30. </template>
  31. <script>
  32. export default {
  33. name: 'Print',
  34. props: {
  35. disabled: {
  36. type: Boolean,
  37. default: false
  38. },
  39. showExport: {
  40. type: Boolean,
  41. default: true
  42. }
  43. },
  44. data () {
  45. return {
  46. printerType: 'NEEDLE' // 打印机类型
  47. }
  48. },
  49. methods: {
  50. handlePrint (type) {
  51. this.$store.dispatch('TogglePrintSettingType', this.printerType)
  52. this.$emit('handlePrint', type, this.printerType)
  53. }
  54. }
  55. }
  56. </script>
  57. <style lang="less">
  58. .print-page-header{
  59. display: inline-block;
  60. > *{
  61. margin-left: 5px;
  62. }
  63. }
  64. </style>