noteModal.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  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. }
  67. }
  68. },
  69. methods: {
  70. // 保存
  71. handleSubmit () {
  72. const _this = this
  73. const ajax_form = {
  74. bookDetailSn: this.form.bookDetailSn,
  75. remarks: this.form.remarks
  76. }
  77. _this.spinning = true
  78. _this.confirmLoading = true
  79. updateDetailInvoiceDate(ajax_form).then(res => {
  80. if (res.status == 200) {
  81. _this.$message.success(res.message)
  82. _this.cancel(1)
  83. _this.spinning = false
  84. } else {
  85. _this.spinning = false
  86. }
  87. _this.confirmLoading = false
  88. })
  89. },
  90. cancel (flag) {
  91. this.opened = false
  92. this.$emit('cancel', flag)
  93. this.$refs.ruleForm.resetFields()
  94. },
  95. setData (data) {
  96. this.form = JSON.parse(data)
  97. }
  98. },
  99. watch: {
  100. show (newValue, oldValue) {
  101. this.opened = newValue
  102. if (!newValue) {
  103. this.$refs.ruleForm.resetFields()
  104. }
  105. }
  106. }
  107. }
  108. </script>
  109. <style lang="less" scoped>
  110. .ant-form-item{
  111. margin-bottom:0 !important;
  112. }
  113. </style>