tuanfeng-pc-admin/src/views/marketingManagement/voucherConfiguration/components/EditModal.vue

<template>
  <el-dialog
    :visible.sync="visible"
    v-bind="modalOptions"
  >
    <el-form
      ref="formData"
      :model="formData"
      :rules="formRules"
      size="mini"
      label-suffix=":"
      label-width="150px"
    >
      <el-form-item label="代金券名称" prop="voucherName">
        <el-input v-model="formData.voucherName" placeholder="请输入代金券名称" maxlength="30" show-word-limit />
      </el-form-item>
      <el-form-item label="代金券描述" prop="desc">
        <el-input v-model="formData.desc" type="textarea" placeholder="请输入代金券描述" maxlength="520" :rows="3" show-word-limit />
      </el-form-item>
      <el-form-item label="代金券购买比例(与现金比例)" prop="purchaseRatio">
        <el-input v-model="formData.purchaseRatio" placeholder="请输入代金券购买比例" style="width: 250px;">
          <template #append>
            <div>：1</div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="代金券抵扣比例(与现金比例)" prop="paymentRatio">
        <el-input v-model="formData.purchaseRatio" placeholder="请输入代金券抵扣比例" style="width: 250px;">
          <template #append>
            <div>：1</div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="状态" prop="enabled">
        <el-select v-model="formData.enabled" size="mini" placeholder="请选择任务状态">
          <el-option label="启用" :value="0" />
          <el-option label="停用" :value="1" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="mini" @click="handleClose">取 消</el-button>
        <el-button type="primary" size="mini" @click="handleSubmit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { savePlatformVoucher, updatePlatformVoucher } from '@/api/timedTasksManagement/timedTasksList'

export default {
  name: 'EditModal',
  components: {
  },
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '820px',
        title: ''
      },
      visible: false,
      formData: {
        platformVoucherId: '',
        voucherCode: '', // 代金券代码（唯一）
        voucherName: '', // 代金券名称
        desc: '', // 代金券描述
        purchaseRatio: '', // 代金券购买比例(与现金比例)
        paymentRatio: '', // 代金券抵扣比例(与现金比例)
        enabled: '', // 启停：0-为启用  1-为停用
        operatorId: '', // 平台操作者ID
        createTime: '',
        updateTime: ''
      },
      formRules: {
        voucherName: [
          { required: true, message: '请输入代金券名称' }
        ],
        purchaseRatio: [
          { required: false, message: '请输入参与值' },
          { pattern: /^0\.\d{0,2}$|^[1-9]\d*\.\d{0,2}$|^[1-9]\d*$/, message: '数值有误' }
        ],
        paymentRatio: [
          { required: false, message: '请输入参与值' },
          { pattern: /^0\.\d{0,2}$|^[1-9]\d*\.\d{0,2}$|^[1-9]\d*$/, message: '数值有误' }
        ],
        enabled: [
          { required: true, message: '请选择状态' }
        ]
      }
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    initList() {
    },
    handleOpen(params = {}) {
      this.modalOptions.title = params.platformVoucherId ? '编辑代金券' : '添加代金券'
      this.formData = Object.assign(this.$options.data().formData, params)
      this.visible = true
      this.initList()
      if (params.platformVoucherId) {
        // this.getInfo(params.platformVoucherId)
      } else {
        this.$refs.formData && this.$refs.formData.resetFields()
      }
    },
    async getInfo(id) {
      const loading = this.$loading({ text: '加载中' })
      try {
        const res = await xxx({ id })
        this.formData = Object.assign(this.$options.data().formData, res.data, {
          platformVoucherId: res.data.platformVoucherId || ''
        })
        this.$nextTick(() => {
          this.$refs.formData && this.$refs.formData.validate()
        })
      } finally {
        loading.close()
      }
    },
    handleSubmit() {
      this.$refs.formData.validate(async (valid) => {
        if (valid) {
          const loading = this.$loading({ text: '加载中' })
          try {
            const { ...otps } = this.formData
            const params = {
              ...otps
            }
            this.formData.platformVoucherId ? await updatePlatformVoucher(params) : await savePlatformVoucher(params)
            loading.close()
            this.$message({ message: `${this.formData.platformVoucherId ? '编辑' : '添加'}成功!`, type: 'success' })
            this.$emit('success')
            this.visible = false
          } catch (e) {
            loading.close()
          } finally {
            loading.close()
          }
        } else {
          this.$message({ message: '请输入相关信息', type: 'warning' })
          return false
        }
      })
    }
  }
}
</script>