endDescModal.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. <template>
  2. <a-modal
  3. centered
  4. class="endDescription-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. v-model="isShow"
  8. title="提示"
  9. @cancel="isShow=false"
  10. :width="500">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <div style="margin-bottom: 20px;font-weight: bold;margin-left:20px;">确定要终止该促销吗?</div>
  13. <a-form-model
  14. id="endDescription-form"
  15. ref="ruleForm"
  16. :model="form"
  17. :label-col="formItemLayout.labelCol"
  18. :wrapper-col="formItemLayout.wrapperCol" >
  19. <a-form-model-item label="促销简称" prop="name">
  20. <span>{{ form.name }}</span>
  21. </a-form-model-item>
  22. <a-form-model-item label="终止说明" prop="newTimeEnd">
  23. <a-input id="endDescription-desc" v-model="form.desc" type="textarea" placeholder="请输入终止说明(最多50字符)" :maxLength="50"/>
  24. </a-form-model-item>
  25. </a-form-model>
  26. <div class="btn-cont">
  27. <a-button id="endDescription-modal-back" @click="isShow = false">取消</a-button>
  28. <a-button style="margin-left: 15px;" type="primary" id="endDescription-modal-save" @click="handleSave">确定</a-button>
  29. </div>
  30. </a-spin>
  31. </a-modal>
  32. </template>
  33. <script>
  34. import { commonMixin } from '@/utils/mixin'
  35. // 接口
  36. import { promotionIsOver } from '@/api/promotion'
  37. export default {
  38. name: 'EndDescModal',
  39. mixins: [commonMixin],
  40. props: {
  41. openModal: { // 弹框显示状态
  42. type: Boolean,
  43. default: false
  44. },
  45. itemObj: {
  46. type: Object,
  47. default: () => {
  48. return {}
  49. }
  50. }
  51. },
  52. data () {
  53. return {
  54. spinning: false,
  55. isShow: this.openModal, // 是否打开弹框
  56. // form 表单label布局
  57. formItemLayout: {
  58. labelCol: { span: 4 },
  59. wrapperCol: { span: 18 }
  60. },
  61. // 提交参数
  62. form: {
  63. sn: undefined,
  64. name: '',
  65. desc: undefined
  66. }
  67. }
  68. },
  69. methods: {
  70. // 确定终止
  71. handleSave () {
  72. const _this = this
  73. _this.spinning = true
  74. promotionIsOver({ promotionSn: this.form.sn, overInfo: this.form.desc }).then(res => {
  75. if (res.status == 200) {
  76. _this.$message.success(res.message)
  77. _this.$emit('ok')
  78. _this.isShow = false
  79. }
  80. _this.spinning = false
  81. })
  82. }
  83. },
  84. watch: {
  85. // 父页面传过来的弹框状态
  86. openModal (newValue, oldValue) {
  87. this.isShow = newValue
  88. },
  89. // 重定义的弹框状态
  90. isShow (newValue, oldValue) {
  91. if (!newValue) {
  92. this.$emit('close')
  93. this.form = {
  94. sn: undefined,
  95. name: '',
  96. desc: undefined
  97. }
  98. } else {
  99. if (this.itemObj) {
  100. this.form = { ...this.form, ...this.itemObj }
  101. }
  102. }
  103. }
  104. }
  105. }
  106. </script>
  107. <style lang="less" scoped>
  108. .endDescription-modal{
  109. .ant-modal-body {
  110. padding: 40px 40px 24px;
  111. }
  112. .btn-cont {
  113. text-align: center;
  114. margin: 35px 0 10px;
  115. }
  116. }
  117. </style>