editRemarkModal.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. <template>
  2. <a-modal
  3. centered
  4. class="edit-remark-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="编辑备注"
  8. v-model="isShow"
  9. @cancel="isShow = false"
  10. :width="450">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <a-form-model
  13. id="edit-remark-form"
  14. ref="ruleForm"
  15. :model="form"
  16. :rules="rules"
  17. :label-col="formItemLayout.labelCol"
  18. :wrapper-col="formItemLayout.wrapperCol"
  19. >
  20. <a-form-model-item label="备注" prop="remarks">
  21. <a-textarea
  22. :autosize="{minRows: 5, maxRows: 5}"
  23. id="edit-remark-remarks"
  24. :maxLength="100"
  25. v-model="form.remarks"
  26. placeholder="请输入备注(最多100个字符)"
  27. allowClear />
  28. </a-form-model-item>
  29. </a-form-model>
  30. <div class="btn-cont">
  31. <a-button id="edit-remark-modal-back" @click="isShow = false" style="margin-right: 15px;">取消</a-button>
  32. <a-button type="primary" id="edit-remark-modal-save" @click="handleSave">保存</a-button>
  33. </div>
  34. </a-spin>
  35. </a-modal>
  36. </template>
  37. <script>
  38. import { commonMixin } from '@/utils/mixin'
  39. // 接口
  40. import { onlinePayUpdateRemark } from '@/api/sales'
  41. export default {
  42. name: 'EditRemarkModal',
  43. mixins: [commonMixin],
  44. props: {
  45. openModal: {
  46. // 弹框显示状态
  47. type: Boolean,
  48. default: false
  49. },
  50. itemSn: {
  51. type: String,
  52. default: ''
  53. },
  54. mainContent: {
  55. type: String,
  56. default: ''
  57. }
  58. },
  59. data () {
  60. return {
  61. spinning: false,
  62. isShow: this.openModal, // 是否打开弹框
  63. formItemLayout: {
  64. labelCol: { span: 3 },
  65. wrapperCol: { span: 20 }
  66. },
  67. form: {
  68. remarks: ''// 备注
  69. },
  70. rules: {
  71. remarks: [{ required: true, message: '请输入备注', trigger: 'blur' }]
  72. }
  73. }
  74. },
  75. methods: {
  76. // 保存
  77. handleSave () {
  78. const _this = this
  79. this.$refs.ruleForm.validate(valid => {
  80. if (valid) {
  81. const form = JSON.parse(JSON.stringify(_this.form))
  82. form.salesBillSn = _this.itemSn
  83. _this.spinning = true
  84. onlinePayUpdateRemark(form).then(res => {
  85. if (res.status == 200) {
  86. _this.$message.success(res.message)
  87. setTimeout(() => {
  88. _this.$emit('ok', res.data)
  89. }, 1000)
  90. _this.isShow = false
  91. }
  92. _this.spinning = false
  93. })
  94. } else {
  95. return false
  96. }
  97. })
  98. }
  99. },
  100. watch: {
  101. // 父页面传过来的弹框状态
  102. openModal (newValue, oldValue) {
  103. this.isShow = newValue
  104. },
  105. // 重定义的弹框状态
  106. isShow (newValue, oldValue) {
  107. if (!newValue) {
  108. this.$emit('close')
  109. this.$refs.ruleForm.resetFields()
  110. } else {
  111. if (this.mainContent && this.mainContent.length) {
  112. this.form.remarks = this.mainContent
  113. }
  114. }
  115. }
  116. }
  117. }
  118. </script>
  119. <style lang="less">
  120. .edit-remark-modal {
  121. .ant-modal-body {
  122. padding: 40px 40px 24px;
  123. }
  124. .btn-cont {
  125. text-align: center;
  126. margin: 35px 0 10px;
  127. }
  128. }
  129. </style>