selectPrint.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <template>
  2. <a-modal
  3. centered
  4. class="common-selectPrint-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :zIndex="1002"
  8. v-model="isShow"
  9. :title="title"
  10. :bodyStyle="{padding: title?'25px 32px 20px':'50px 32px 15px'}"
  11. @cancel="handleCommonCancel"
  12. :width="416">
  13. <a-spin :spinning="spinning" tip="Loading...">
  14. <div class="common-main" v-if="printList&&printList.length">
  15. <p style="color: #666;">选择打印机后,针式打印以后就会按这里设置的打印机去打印。<br>所以请正确选择打印机,如果选择错误,可以在顶部栏“设置”里面修改打印机。</p>
  16. <a-select v-model="printIndex" @change="changePrint" style="width: 100%" placeholder="选择打印机">
  17. <a-select-option v-for="item in printList" :key="'print-'+item.value" :value="item.name">
  18. {{ item.name }}
  19. </a-select-option>
  20. </a-select>
  21. </div>
  22. <div v-else class="common-main">
  23. <p>暂未发现打印机,请检查您的打印机是否连接正常</p>
  24. </div>
  25. <div class="btn-box">
  26. <a-button type="default" style="margin-right:20px;" @click="handleCommonCancel" v-if="isCancel">{{ cancelText }}</a-button>
  27. <a-button type="primary" v-if="printList&&printList.length" class="button-error" @click="handleCommonOk">{{ okText }}</a-button>
  28. </div>
  29. </a-spin>
  30. </a-modal>
  31. </template>
  32. <script>
  33. import { getPrintList, pdfPrint, hasExitTaskByName } from '@/libs/JGPrint'
  34. export default {
  35. name: 'CommonModal',
  36. props: {
  37. openModal: { // 弹框显示状态
  38. type: Boolean,
  39. default: false
  40. },
  41. modalHtml: {
  42. type: String,
  43. default: ''
  44. },
  45. okText: { // 确定 按钮文字
  46. type: String,
  47. default: '确定'
  48. },
  49. cancelText: { // 取消 按钮文字
  50. type: String,
  51. default: '取消'
  52. },
  53. isCancel: { // 是否显示 取消 按钮
  54. type: Boolean,
  55. default: true
  56. },
  57. spinning: { // 加载中
  58. type: Boolean,
  59. default: false
  60. }
  61. },
  62. data () {
  63. return {
  64. isShow: this.openModal, // 是否打开弹框
  65. printIndex: undefined,
  66. printList: [],
  67. isSetting: 0,
  68. printType: '',
  69. title: ''
  70. }
  71. },
  72. methods: {
  73. // 确定
  74. handleCommonOk () {
  75. if (this.printIndex) {
  76. // 保存默认设置
  77. if (this.printType == 'NEEDLE') {
  78. this.$store.commit('SET_printDefNeedle', this.printIndex)
  79. }
  80. // 继续打印
  81. if (!this.isSetting) {
  82. const pdfList = this.$store.state.app.pdfPrintList
  83. hasExitTaskByName(function () {
  84. pdfPrint(pdfList, 0)
  85. })
  86. }
  87. // 关闭弹框
  88. this.$store.commit('SET_showSelectPrint', false)
  89. this.$emit('cancel')
  90. } else {
  91. this.$message.info('请选择打印机')
  92. }
  93. },
  94. // 取消
  95. handleCommonCancel () {
  96. this.$emit('cancel')
  97. this.$store.commit('SET_pdfPrintList', [])
  98. this.$store.commit('SET_showSelectPrint', false)
  99. },
  100. getPrintList () {
  101. this.isSetting = this.$store.state.app.printUseing == 0
  102. this.printType = this.$store.state.app.printSettingType
  103. this.printList = getPrintList()
  104. this.printIndex = this.printIndex > 0 ? this.printIndex : undefined
  105. console.log(this.printType)
  106. this.title = this.printType == 'NEEDLE' ? '选择针式默认打印机' : '选择打印机'
  107. },
  108. changePrint (v) {
  109. this.$store.state.app.printTaskID = undefined
  110. this.printIndex = v
  111. }
  112. },
  113. watch: {
  114. // 父页面传过来的弹框状态
  115. openModal (newValue, oldValue) {
  116. this.isShow = newValue
  117. },
  118. // 重定义的弹框状态
  119. isShow (newValue, oldValue) {
  120. if (!newValue) {
  121. this.$emit('close')
  122. this.printIndex = undefined
  123. } else {
  124. // 获取打印机列表
  125. this.getPrintList()
  126. }
  127. }
  128. }
  129. }
  130. </script>
  131. <style lang="less">
  132. .common-selectPrint-modal{
  133. .common-main{
  134. display: flex;
  135. flex-direction: column;
  136. line-height: 24px;
  137. .common-cont{
  138. }
  139. }
  140. .btn-box{
  141. text-align: center;
  142. margin-top: 20px;
  143. }
  144. }
  145. </style>