editModal.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. <template>
  2. <a-modal
  3. centered
  4. class="rechargeEdit-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="itemSn?'编辑':'新增'"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="750">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <a-form-model
  13. id="rechargeEdit-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="rechargeAmount">
  21. <div>
  22. 充值<a-input-number
  23. id="rechargeEdit-rechargeAmount"
  24. v-model.trim="form.rechargeAmount"
  25. style="width: 35%;margin:0 10px;"
  26. :min="0.01"
  27. :max="999999"
  28. :precision="2"
  29. :disabled="itemSn?true:false"
  30. placeholder="请输入"/>元,送<a-input-number
  31. id="rechargeEdit-giveAmount"
  32. v-model.trim="form.giveAmount"
  33. style="width: 35%;margin:0 10px;"
  34. :min="0.01"
  35. :max="999999"
  36. :precision="2"
  37. :disabled="itemSn?true:false"
  38. placeholder="请输入"/>元抵扣
  39. </div>
  40. </a-form-model-item>
  41. <a-form-model-item label="备注">
  42. <a-textarea
  43. :autosize="{minRows: 5, maxRows: 5}"
  44. id="rechargeEdit-remarks"
  45. :maxLength="50"
  46. v-model="form.remarks"
  47. placeholder="请输入易码通显示的充值备注(最多50个字符)"
  48. allowClear />
  49. </a-form-model-item>
  50. <div class="tipWord">注意:请设置【抵扣产品】</div>
  51. </a-form-model>
  52. <div class="btn-cont">
  53. <a-button type="primary" id="rechargeEdit-save" @click="handleSave">保存</a-button>
  54. <a-button id="rechargeEdit-cancel" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  55. </div>
  56. </a-spin>
  57. </a-modal>
  58. </template>
  59. <script>
  60. import { commonMixin } from '@/utils/mixin'
  61. import { rechargeRuleDetail, rechargeRuleCreate, rechargeRuleModify } from '@/api/rechargeRule'
  62. export default {
  63. name: 'RechargeEditModal',
  64. mixins: [commonMixin],
  65. props: {
  66. openModal: { // 弹框显示状态
  67. type: Boolean,
  68. default: false
  69. },
  70. itemSn: {
  71. type: [Number, String],
  72. default: ''
  73. }
  74. },
  75. data () {
  76. return {
  77. spinning: false,
  78. isShow: this.openModal, // 是否打开弹框
  79. formItemLayout: {// form表单中label设置
  80. labelCol: { span: 3 },
  81. wrapperCol: { span: 18 }
  82. },
  83. // 提交数据
  84. form: {
  85. rechargeAmount: undefined, // 充值金额
  86. giveAmount: undefined, // 赠送金额
  87. remarks: undefined// 备注
  88. },
  89. // 必填项判断
  90. rules: {
  91. rechargeAmount: [{ required: true, message: '请输入充值金额', trigger: 'blur' }]
  92. }
  93. }
  94. },
  95. methods: {
  96. // 保存
  97. handleSave () {
  98. const _this = this
  99. this.$refs.ruleForm.validate(valid => {
  100. if (valid) {
  101. if (!_this.form.giveAmount) {
  102. _this.$message.warning('请输入赠送金额')
  103. return
  104. }
  105. _this.spinning = true
  106. const ajaxName = _this.itemSn ? rechargeRuleModify : rechargeRuleCreate
  107. ajaxName(_this.form).then(res => {
  108. if (res.status == 200) {
  109. _this.$message.success(res.message)
  110. _this.$emit('ok')
  111. setTimeout(function () {
  112. _this.isShow = false
  113. }, 300)
  114. }
  115. _this.spinning = false
  116. })
  117. } else {
  118. return false
  119. }
  120. })
  121. },
  122. // 获取详情
  123. getDetail () {
  124. const _this = this
  125. _this.spinning = true
  126. rechargeRuleDetail({ sn: _this.itemSn }).then(res => {
  127. if (res.status == 200) {
  128. _this.form = res.data
  129. }
  130. _this.spinning = false
  131. })
  132. },
  133. // 重置
  134. resetForm (obj) {
  135. this.form.rechargeAmount = undefined
  136. this.form.giveAmount = undefined
  137. this.form.remarks = undefined
  138. this.$refs.ruleForm.resetFields()
  139. }
  140. },
  141. watch: {
  142. // 父页面传过来的弹框状态
  143. openModal (newValue, oldValue) {
  144. this.isShow = newValue
  145. },
  146. // 重定义的弹框状态
  147. isShow (newValue, oldValue) {
  148. if (!newValue) {
  149. this.$emit('close')
  150. this.resetForm()
  151. }
  152. },
  153. itemSn (newValue, oldValue) {
  154. if (newValue) {
  155. this.getDetail()
  156. }
  157. }
  158. }
  159. }
  160. </script>
  161. <style lang="less" scoped>
  162. .rechargeEdit-modal{
  163. /deep/.ant-modal-body {
  164. padding: 40px 40px 24px;
  165. }
  166. .rechargeEdit-form{
  167. text-align: center;
  168. }
  169. .tipWord{
  170. margin:-10px 0 0 48px;
  171. color:gray;
  172. }
  173. .btn-cont {
  174. text-align: center;
  175. margin: 50px 0 10px;
  176. }
  177. }
  178. </style>