printModal.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <template>
  2. <a-modal
  3. v-model="opened"
  4. :title="title"
  5. centered
  6. :maskClosable="false"
  7. :footer="null"
  8. @cancel="cancel"
  9. width="500px">
  10. <a-spin :spinning="spinning" tip="Loading...">
  11. <a-form-model
  12. id="chooseCustom-form"
  13. ref="ruleForm"
  14. :model="form"
  15. :label-col="formItemLayout.labelCol"
  16. :wrapper-col="formItemLayout.wrapperCol">
  17. <a-form-model-item label="收款单号:" prop="no"> <span>{{ form.no }}{{ form.printStatus=='UNABLE_PRINT'?'(暂不打印)':form.printStatus=='CANCEL_PRINT'?'(取消打印)':'' }}</span>
  18. </a-form-model-item>
  19. <a-form-model-item label="付款方:" prop="payerName"> <span>{{ form.payerName }}</span>
  20. </a-form-model-item>
  21. <a-form-model-item label="收款打印:" prop="printStatus">
  22. <a-radio-group v-model="printStatus">
  23. <a-radio value="NO_PRINT">
  24. 允许打印
  25. </a-radio>
  26. <a-radio value="CANCEL_PRINT" v-if="form.printStatus=='UNABLE_PRINT'">
  27. 取消打印
  28. </a-radio>
  29. </a-radio-group>
  30. </a-form-model-item>
  31. <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;margin-top: 50px;">
  32. <a-button @click="cancel" style="margin-right: 15px" id="chooseCustom-btn-back">取消</a-button>
  33. <a-button type="primary" :loading="confirmLoading" @click="handleSubmit" id="chooseCustom-btn-submit">确定
  34. </a-button>
  35. </a-form-model-item>
  36. </a-form-model>
  37. </a-spin>
  38. </a-modal>
  39. </template>
  40. <script>
  41. import {
  42. updateFinanceBookDetail
  43. } from '@/api/financeBook.js'
  44. export default {
  45. name: 'PrintModal',
  46. props: {
  47. show: [Boolean],
  48. info: {
  49. type: Object,
  50. default: () => {
  51. return null
  52. }
  53. }
  54. },
  55. data () {
  56. return {
  57. opened: this.show,
  58. spinning: false,
  59. title: '收款打印状态',
  60. confirmLoading: false,
  61. formItemLayout: {
  62. labelCol: {
  63. span: 6
  64. },
  65. wrapperCol: {
  66. span: 18
  67. }
  68. },
  69. form: {
  70. no: undefined,
  71. payerName: undefined,
  72. printStatus: '',
  73. id: '',
  74. type: undefined
  75. },
  76. printStatus: '',
  77. }
  78. },
  79. methods: {
  80. // 保存
  81. handleSubmit () {
  82. const _this = this
  83. const ajax_form = {
  84. id: this.form.id,
  85. printStatus: this.printStatus
  86. }
  87. if(!this.printStatus){
  88. this.$message.info("请选择收款打印状态")
  89. return
  90. }
  91. _this.spinning = true
  92. _this.confirmLoading = true
  93. updateFinanceBookDetail(ajax_form).then(res => {
  94. if (res.status == 200) {
  95. _this.$message.success(res.message)
  96. _this.cancel()
  97. _this.spinning = false
  98. } else {
  99. _this.spinning = false
  100. }
  101. _this.confirmLoading = false
  102. })
  103. },
  104. cancel () {
  105. this.opened = false
  106. this.$emit('cancel')
  107. this.printStatus = ''
  108. this.$refs.ruleForm.resetFields()
  109. }
  110. },
  111. watch: {
  112. show (newValue, oldValue) {
  113. this.opened = newValue
  114. if (!newValue) {
  115. this.cancel()
  116. } else {
  117. this.form = this.info
  118. }
  119. }
  120. }
  121. }
  122. </script>
  123. <style lang="less" scoped>
  124. .ant-form-item{
  125. margin-bottom:0 !important;
  126. }
  127. </style>