print.vue 1.5 KB

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