editModal.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <template>
  2. <a-modal
  3. centered
  4. class="subsidyEdit-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="编辑"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="500">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <div class="subsidyEdit-form">
  13. <span class="subsidyRequired">*</span>抵扣金额<a-input-number
  14. id="subsidyEdit-subsidyAmount"
  15. v-model.trim="subsidyAmount"
  16. style="width: 40%;margin:0 10px;"
  17. :min="0.01"
  18. :max="99999999"
  19. :precision="2"
  20. placeholder="请输入"/>元
  21. </div>
  22. <div class="btn-cont">
  23. <a-button id="subsidyEdit-modal-cancel" @click="isShow = false" style="margin-right: 15px;">取消</a-button>
  24. <a-button type="primary" id="subsidyEdit-modal-save" @click="handleSave">保存</a-button>
  25. </div>
  26. </a-spin>
  27. </a-modal>
  28. </template>
  29. <script>
  30. // 接口
  31. import { subsidizedProductEdit } from '@/api/shopProductSubsidy'
  32. export default {
  33. name: 'SubsidyEditModal',
  34. props: {
  35. openModal: { // 弹框显示状态
  36. type: Boolean,
  37. default: false
  38. },
  39. itemSn: {// 抵扣产品sn
  40. type: Array,
  41. default: () => {
  42. return []
  43. }
  44. },
  45. itemAmount: {// 抵扣金额
  46. type: [Number, String],
  47. default: ''
  48. }
  49. },
  50. data () {
  51. return {
  52. spinning: false,
  53. isShow: this.openModal, // 是否打开弹框
  54. subsidyAmount: undefined// 抵扣金额
  55. }
  56. },
  57. methods: {
  58. // 保存
  59. handleSave () {
  60. const _this = this
  61. if (!_this.subsidyAmount) {
  62. _this.$message.warning('请输入抵扣金额!')
  63. return
  64. }
  65. _this.spinning = true
  66. subsidizedProductEdit({ subsidyAmount: _this.subsidyAmount, productSns: _this.itemSn }).then(res => {
  67. if (res.status == 200) {
  68. if (res.data) {
  69. _this.getErrorInfo(res.data)
  70. } else {
  71. _this.$message.success(res.message)
  72. _this.$emit('ok')
  73. setTimeout(function () {
  74. _this.isShow = false
  75. }, 300)
  76. }
  77. }
  78. _this.spinning = false
  79. })
  80. },
  81. // 报错弹窗
  82. getErrorInfo (infoTip) {
  83. const _this = this
  84. this.$info({
  85. title: '提示',
  86. content: infoTip,
  87. onOk () {
  88. _this.$emit('ok')
  89. console.log('我知道了')
  90. }
  91. })
  92. }
  93. },
  94. watch: {
  95. // 父页面传过来的弹框状态
  96. openModal (newValue, oldValue) {
  97. this.isShow = newValue
  98. },
  99. // 重定义的弹框状态
  100. isShow (newValue, oldValue) {
  101. if (!newValue) {
  102. this.$emit('close')
  103. } else {
  104. // 单行编辑时,抵扣金额数据回显
  105. this.subsidyAmount = this.itemAmount || undefined
  106. }
  107. }
  108. }
  109. }
  110. </script>
  111. <style lang="less" scoped>
  112. .subsidyEdit-modal{
  113. /deep/.ant-modal-body {
  114. padding: 40px 40px 24px;
  115. }
  116. .subsidyEdit-form{
  117. text-align: center;
  118. }
  119. .subsidyRequired{
  120. margin-right: 5px;
  121. color:#ED1c24;
  122. }
  123. .btn-cont {
  124. text-align: center;
  125. margin: 50px 0 10px;
  126. }
  127. }
  128. </style>