biaodan.gif

<template>
  <div>
    <el-form :model="formData" ref="formData" hide-required-asterisk style="width: 900px;" size="small">
      <el-row class="el-row">
        <el-radio-group v-model="formData.radio1">
          <el-radio-button label="1">选项1</el-radio-button>
          <el-radio-button label="2">选项2</el-radio-button>
        </el-radio-group>
      </el-row>
      <el-row v-for="(section, index) in formData.sections" :key="index">
        <el-col :span="6">
          <el-form-item label="满" label-width="20px" :prop="'sections.' + index + '.oneId'" :rules="rules.required">
            <el-input v-model="section.oneId" placeholder="请输入内容" style="width: 200px;margin-right: 10px;">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="formData.radio1 === '1' ? '立减' : '打'" label-width="40px"
            :prop="'sections.' + index + '.twoId'" :rules="rules.required">
            <el-input v-model="section.twoId" placeholder="请输入内容" style="width: 180px;margin-right: 10px;">
              <template slot="append">{{ formData.radio1 === "1" ? "元" : "折" }}</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="formData.radio1 === '2'">
          <el-form-item label="最高折扣价格" label-width="100px" :prop="'sections.' + index + '.threeId'"
            :rules="rules.required">
            <el-input v-model="section.threeId" placeholder="请输入内容" style="width: 130px;margin-right: 10px;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="index === 0">
          <el-form-item label="">
            <el-button @click="newSection()" type="primary" style="margin-left: 10px;">新增标段</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="index !== 0">
          <el-form-item label="">
            <el-button @click="delSection(index)" style="margin-left: 10px;">删除</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item>
            <el-button @click="handleSubmin">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        radio1: "1",
        sections: [{ oneId: '', twoId: '', threeId: '' }]
      },
      rules: {
        required: [
          { required: true, message: '此项不能为空' },
          {
            required: true, validator: (rule, value, callback) => {
              if (value === null || value === undefined || value === '' || isNaN(value) || value <= 0) {
                callback(new Error("请输入合法值"));
              }
              callback();
            }
          },
        ]
      },
    }
  },
  methods: {
    /**
    新增标段
    */
    newSection() {
      const { sections } = this.formData;
      let flag, validateFieldArrs = [];
      sections.forEach((sec, index) => {
        //部分验证validateField接收的参数格式：['list.0.id', 'list.1.id']
        validateFieldArrs.push(`sections.${index}.oneId`, `sections.${index}.twoId`, `sections.${index}.threeId`);
        if (this.formData.radio1 === "1") {
          if (sec.oneId && sec.twoId) {
            flag = true;
          } else {
            flag = false;
          }
        } else {
          if (sec.oneId && sec.twoId && sec.threeId) {
            flag = true;
          } else {
            flag = false;
          }
        }
      })

      if (flag) {
        //全部验证通过执行新增
        this.formData.sections.push({ oneId: '', twoId: '', threeId: '' });
      } else {
        //验证指定表单
        this.$refs['formData'].validateField(validateFieldArrs);
      }
    },
    /**
     删除标段
    @params {Number} index 删除数据索引
    */
    delSection(index) {
      this.formData.sections.splice(index, 1)
    },
    /**
     * 提交
     */
    handleSubmin() {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          alert('submit!');
        }
      });
    },
    /**
     * 重置
     */
    resetForm() {
      this.$refs['formData'].resetFields();
    },

  },
}
</script>
<style lang='scss' scoped>
::v-deep .el-row {
  margin-bottom: 10px;
}
</style>