printStatusModal.vue 3.5 KB

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