printPanel.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <template>
  2. <div class="print-page-header">
  3. <a-popover :placement="position">
  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="3"
  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="1"
  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. printerType: 'NEEDLE' // 打印机类型
  75. }
  76. },
  77. methods: {
  78. handlePrint (type) {
  79. this.$store.dispatch('TogglePrintSettingType', this.printerType)
  80. this.$emit('handlePrint', type, this.printerType)
  81. }
  82. }
  83. }
  84. </script>
  85. <style lang="less">
  86. .print-page-header{
  87. display: inline-block;
  88. }
  89. </style>