printPanel.vue 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <template>
  2. <div class="print-page-header">
  3. <a-popover :placement="position" v-model="hovered" trigger="hover">
  4. <template slot="content">
  5. <div style="padding:10px;">
  6. <span>打印方式:</span>
  7. <a-radio-group key="4" id="print-printerType" v-model="printerType">
  8. <a-radio value="NEEDLE">针式</a-radio>
  9. <a-radio value="INK">喷墨</a-radio>
  10. </a-radio-group>
  11. </div>
  12. <slot name="extendCons"></slot>
  13. <div style="padding:10px;">
  14. <a-button
  15. key="1"
  16. id="print-preview-btn"
  17. type="primary"
  18. ghost
  19. :loading="$store.state.app.printLoading"
  20. :disabled="disabled"
  21. @click="handlePrint('preview')">
  22. 打印预览
  23. </a-button>
  24. <a-button
  25. key="2"
  26. type="primary"
  27. style="margin-left: 10px;margin-right: 10px;"
  28. id="print-print-btn"
  29. :disabled="disabled"
  30. :loading="$store.state.app.printLoading"
  31. @click="handlePrint('print')">
  32. {{ $store.state.app.printLoading?'打印中...':'快捷打印' }}
  33. </a-button>
  34. </div>
  35. <a-divider style="margin:5px 0;" v-if="showExport"/>
  36. <div style="padding:10px;" v-if="showExport">
  37. <a-button
  38. key="3"
  39. type="primary"
  40. class="button-warning"
  41. :loading="$store.state.app.printLoading"
  42. id="print-export-btn"
  43. style="margin-left:0;"
  44. :disabled="disabled"
  45. @click="handlePrint('export')">导出Excel</a-button>
  46. <slot name="extendButtons"></slot>
  47. </div>
  48. </template>
  49. <a-button type="link" class="button-default"><a-icon type="printer" /> 打印导出 </a-button>
  50. </a-popover>
  51. <!-- 打印 -->
  52. <div id="print"></div>
  53. </div>
  54. </template>
  55. <script>
  56. export default {
  57. name: 'PrintPanel',
  58. props: {
  59. disabled: {
  60. type: Boolean,
  61. default: false
  62. },
  63. showExport: {
  64. type: Boolean,
  65. default: true
  66. },
  67. position: {
  68. type: String,
  69. default: 'bottom'
  70. }
  71. },
  72. data () {
  73. return {
  74. hovered: false,
  75. printerType: 'NEEDLE' // 打印机类型
  76. }
  77. },
  78. methods: {
  79. handlePrint (type) {
  80. this.$store.dispatch('TogglePrintSettingType', this.printerType)
  81. this.$emit('handlePrint', type, this.printerType)
  82. // this.hovered = false
  83. }
  84. }
  85. }
  86. </script>
  87. <style lang="less">
  88. .print-page-header{
  89. display: inline-block;
  90. }
  91. </style>