selectPrint.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <template>
  2. <a-modal
  3. centered
  4. class="common-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :z-index="1001"
  8. v-model="isShow"
  9. :title="modalTit"
  10. :bodyStyle="{padding: modalTit?'25px 32px 20px':'50px 32px 15px'}"
  11. @cancel="handleCommonCancel"
  12. :width="416">
  13. <a-spin :spinning="spinning" tip="Loading...">
  14. <div class="common-main">
  15. <a-select v-model="printIndex" @change="changePrint" style="width: 100%" placeholder="选择打印机">
  16. <a-select-option v-for="item in printList" :key="'print-'+item.value" :value="item.value">
  17. {{ item.name }}
  18. </a-select-option>
  19. </a-select>
  20. </div>
  21. <div class="btn-box">
  22. <a-button type="default" style="margin-right:20px;" @click="handleCommonCancel" v-if="isCancel">{{ cancelText }}</a-button>
  23. <a-button type="primary" class="button-error" @click="handleCommonOk">{{ okText }}</a-button>
  24. </div>
  25. </a-spin>
  26. </a-modal>
  27. </template>
  28. <script>
  29. import { getPrintList, pdfPrint } from '@/libs/JGPrint'
  30. export default {
  31. name: 'CommonModal',
  32. props: {
  33. openModal: { // 弹框显示状态
  34. type: Boolean,
  35. default: false
  36. },
  37. modalTit: { // 弹框标题
  38. type: String,
  39. default: '请选择打印机'
  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. }
  68. },
  69. methods: {
  70. // 确定
  71. handleCommonOk () {
  72. if (this.printIndex >= 0) {
  73. // 关闭弹框
  74. this.$store.commit('SET_showSelectPrint', false)
  75. this.$emit('cancel')
  76. // 继续打印
  77. pdfPrint(this.$store.state.app.pdfPrintList)
  78. } else {
  79. this.$message.info('请选择打印机')
  80. }
  81. },
  82. // 取消
  83. handleCommonCancel () {
  84. this.$emit('cancel')
  85. this.$store.commit('SET_pdfPrintList', [])
  86. this.$store.commit('SET_showSelectPrint', false)
  87. },
  88. getPrintList () {
  89. this.printList = getPrintList()
  90. this.printIndex = this.$store.state.app.defaultPrint
  91. },
  92. changePrint (v) {
  93. this.$store.state.app.defaultPrint = v
  94. this.printIndex = v
  95. }
  96. },
  97. watch: {
  98. // 父页面传过来的弹框状态
  99. openModal (newValue, oldValue) {
  100. this.isShow = newValue
  101. },
  102. // 重定义的弹框状态
  103. isShow (newValue, oldValue) {
  104. if (!newValue) {
  105. this.$emit('close')
  106. } else {
  107. // 获取打印机列表
  108. this.getPrintList()
  109. }
  110. }
  111. }
  112. }
  113. </script>
  114. <style lang="less">
  115. .common-modal{
  116. .common-main{
  117. display: flex;
  118. line-height: 24px;
  119. .common-cont{
  120. .common-tit{
  121. color: rgba(0, 0, 0);
  122. font-weight: 500;
  123. font-size: 16px;
  124. line-height: 1.4;
  125. margin: 0;
  126. }
  127. .common-txt{
  128. margin: 8px 0 0;
  129. color: rgba(0, 0, 0);
  130. font-size: 14px;
  131. line-height: 1.5;
  132. }
  133. }
  134. }
  135. .btn-box{
  136. text-align: center;
  137. margin-top: 20px;
  138. }
  139. }
  140. </style>