主要代码：this.$refs[‘ruleForm’].resetFields()

  

    
      

        
          
            
商品优惠券
          
          
            
          
          
            
          
          
            
              折扣券
            
          
          
            
              折
            
          
          
            
              现场投票
              H5聚合页
              投票评选
              大屏抽奖
            
          
          
            
              自动发放
            
          
          
            
              领劵后
              天
            
          
          
            
              
            
          
          
            
              是
              否
            
          
        
        

          取 消
          
          {{ isAdd ? '创 建' : '保 存' }}
        
      
    
  



export default {
  components: {},
  props: {
    value: {
      type: Boolean,
    },
    isAdd: {
      type: Number,
      default: 0,
    },

    productCouponItem: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    productCouponItem: {
      handler(value, oldValue) {
        if (value) {
          this.ruleForm = value
          if (value.distributionConditions == 1) {
            this.ruleForm.distributionConditions = '完成首单后发放'
          }
        }
      },
    },
    isAdd: {
      handler(value, oldValue) {
        if (value == 1) {
          // 1为新增，新增时重置表单数据，ruleForm为form的ref的名称
                    // 1为新增，新增时重置表单数据，ruleForm为form的ref的名称
          this.ruleForm = {
            toolCouponId: '',
            couponName: '', //优惠券名称
            briefIntroduction: '', //优惠券简介
            couponType: 1, //优惠方式：1 折扣券
            deductionPrice: '', //折扣力度
            payment: 1, //领取方式:1 自动发放
            toolApplicationIdList: [], //使用范围
            availabilityDate: '', //可用日期
            distributionConditions: '', //发放条件
            status: '', //优惠码状态： 1上线 0下架
          }
          if (typeof this.$refs.ruleForm !== 'undefined') {
            this.$refs['ruleForm'].resetFields()
          }
        }
      },
    },
    'ruleForm.deductionPrice': {
      handler(value, oldValue) {
        if (value) {
          this.ruleForm.deductionPrice = value.toString().replace(/^D*(d*(?:.d{0,1})?).*$/g, '$1') //保留一位小数
        }
      },
    },
    'ruleForm.availabilityDate': {服务器托管网
      handler(value, oldValue) {
        if (value) {
          this.ruleForm.deductionPrice = value.toString().replace(/^D*(d*(?:.d{0,1})?).*$/g, '$1') //保留一位小数
        }
      },
    },
  },
  data() {
    return {
      ruleForm: {
        toolCouponId: '',
        couponName: '', //优惠券名称
        briefIntroduction: '', //优惠券简介
        couponType: 1, //优惠方式：1 折扣券
        deductionPrice: '', //折扣力度
        payment: 1, //领取方式:1 自动发放
        toolApplicationIdList: [], //使用范围
        availabilityDate: '', //可用日期
        distributionConditions: '', //发放条件
        status: '', //优惠码状态： 1上线 0下架
      },
      rules: {
        couponName: [
          { required: true, message: '请输入优惠券名称', trigger: 'blur' },
          { min: 1, max: 14, message: '长度在 1 到 14个字符', trigger: 'blur' },
        ],
        briefIntroduction: [
          { required: true, message: '请输入优惠券名称', trigger: 'blur' },
          { min: 1, max: 40, message: '长度在 1 到 40个字符', trigger: 'blur' },
        ],
        couponType: [{ required: true, message: '请选择优惠方式', trigger: 'change' }],
        deductionPrice: [{ required: true, message: '请输入折扣力度', trigger: 'blur' }],
        toolApplicationIdList: [{ type: 'array', required: true, message: '请至少选择一个工具', trigger: 'change' }],
        payment: [{ required: true, message: '请选择领取方式', trigger: 'change' }],
        availabilityDate: [{ required: true, message: '请填写可用日期', trigger: 'blur' }],
        distributionConditions: [{ required: true, message: '请选择发放条件', trigger: 'change' }],
        status: [{ required: true, message: '请选择是否上线', trigger: 'change' }],
      },
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      },
    },
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('submitCoupon', this.ruleForm)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleClose() {
      this.dialogVisible = false
      this.$refs['ruleForm'].resetFields()
    },
  },
  created() {
    console.log(Object.keys(this.productCouponItem).length != 0, 'productCouponItem')
  },
服务器托管网  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
}


.add-edit-coupon {
  .add-edit-coupon-item {
    margin-bottom: 16px;
  }
}

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 使用 GitHub Action 自动更新 Sealos 集群的应用镜像

在 IT 领域，自动化无疑已成为提高工作效率和减少人为错误的关键。Sealos 作为一个强大的云操作系统，已经为许多企业和开发者提供了稳定可靠的服务。与此同时，随着技术不断发展，集成更多的功能和服务变得尤为重要。考虑到这一点，本文将介绍如何利用 GitHub …