print.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  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" :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. class="button-warning"
  21. id="print-export-btn"
  22. v-if="showExport"
  23. :disabled="disabled"
  24. @click="handlePrint('export')">导出Excel</a-button>
  25. <!-- 打印 -->
  26. <div id="print"></div>
  27. </div>
  28. </template>
  29. <script>
  30. export default {
  31. name: 'Print',
  32. props: {
  33. disabled: {
  34. type: Boolean,
  35. default: false
  36. },
  37. showExport: {
  38. type: Boolean,
  39. default: true
  40. }
  41. },
  42. data () {
  43. return {
  44. printerType: 'NEEDLE' // 打印机类型
  45. }
  46. },
  47. methods: {
  48. handlePrint (type) {
  49. this.$store.dispatch('TogglePrintSettingType', this.printerType)
  50. this.$emit('handlePrint', type, this.printerType)
  51. }
  52. }
  53. }
  54. </script>
  55. <style lang="less">
  56. .print-page-header{
  57. display: inline-block;
  58. > *{
  59. margin-left: 5px;
  60. }
  61. }
  62. </style>