noteModal.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  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="550px">
  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 }}</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="remarks">
  22. <a-textarea
  23. v-model="form.remarks"
  24. placeholder="请输入备注(最多100字符)"
  25. :auto-size="{ minRows: 3, maxRows: 5 }"
  26. :maxLength="100"
  27. />
  28. </a-form-model-item>
  29. <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;margin-top: 50px;">
  30. <a-button @click="cancel" style="margin-right: 15px" id="chooseCustom-btn-back">取消</a-button>
  31. <a-button type="primary" :loading="confirmLoading" @click="handleSubmit" id="chooseCustom-btn-submit">确定
  32. </a-button>
  33. </a-form-model-item>
  34. </a-form-model>
  35. </a-spin>
  36. </a-modal>
  37. </template>
  38. <script>
  39. import {
  40. updateDetailInvoiceDate
  41. } from '@/api/financeBook.js'
  42. export default {
  43. name: 'NoteModal',
  44. props: {
  45. show: [Boolean]
  46. },
  47. data () {
  48. return {
  49. opened: this.show,
  50. spinning: false,
  51. title: '备注',
  52. confirmLoading: false,
  53. formItemLayout: {
  54. labelCol: {
  55. span: 4
  56. },
  57. wrapperCol: {
  58. span: 17
  59. }
  60. },
  61. form: {
  62. no: undefined,
  63. payerName: undefined,
  64. remarks: '',
  65. bookDetailSn: '',
  66. invoiceDate: ''
  67. }
  68. }
  69. },
  70. methods: {
  71. // 保存
  72. handleSubmit () {
  73. const _this = this
  74. const ajax_form = {
  75. bookDetailSn: this.form.bookDetailSn,
  76. remarks: this.form.remarks,
  77. invoiceDate: this.form.invoiceDate
  78. }
  79. _this.spinning = true
  80. _this.confirmLoading = true
  81. updateDetailInvoiceDate(ajax_form).then(res => {
  82. if (res.status == 200) {
  83. _this.$message.success(res.message)
  84. _this.cancel(1)
  85. _this.spinning = false
  86. } else {
  87. _this.spinning = false
  88. }
  89. _this.confirmLoading = false
  90. })
  91. },
  92. cancel (flag) {
  93. this.opened = false
  94. this.$emit('cancel', flag)
  95. this.$refs.ruleForm.resetFields()
  96. },
  97. setData (data) {
  98. this.form = JSON.parse(data)
  99. }
  100. },
  101. watch: {
  102. show (newValue, oldValue) {
  103. this.opened = newValue
  104. if (!newValue) {
  105. this.$refs.ruleForm.resetFields()
  106. }
  107. }
  108. }
  109. }
  110. </script>
  111. <style lang="less" scoped>
  112. .ant-form-item{
  113. margin-bottom:0 !important;
  114. }
  115. </style>