下面一块是根据数组循环来的, 当表单里有数组时
表单校验规则通过动态prop需要加个index作为标识,
<el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dialogForm">
<el-form-item label="活动名称" prop="promotionName">
<el-input v-model="form.promotionName" placeholder="请输入活动名称" />
</el-form-item>
<el-form-item label="活动时间" prop="promotionDate">
<el-date-picker v-model="form.promotionDate" type="daterange" range-separator="~" start-placeholder="开始日期"
end-placeholder="结束日期" value-format="yyyy-MM-dd hh:mm:ss" @change="changeTime" />
</el-form-item>
<el-form-item label="活动标签" prop="label">
<el-input v-model="form.label" placeholder="请输入活动标签" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入" />
</el-form-item>
<div class="head">
<div class="icon" />
<span class="word">折扣设置</span>
</div>
<el-form-item label="客户范围" prop="promotionCustomer">
<el-input v-model="form.promotionCustomer" placeholder="请输入" />
</el-form-item>
<div class="head">
<div class="icon" />
<span class="word">选择活动油品型号</span>
</div>
<div v-for="(items, index) in form.promotionOils" :key="index" :model="items" :rules="rules" ref="promotionOils">
<el-row>
<el-col :span="10">
<el-form-item label="油品型号" :prop="'promotionOils.'+index+'.oilType'" :rules="{ required: true, message: '油品型号不能为空', trigger: 'change' }">
<el-select v-model="items.oilType" placeholder="请选择" clearable>
<el-option v-for="dicts in dict.type.oil_type" :key="dicts.value" :label="dicts.label"
:value="dicts.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="油品活动售价" :prop="'promotionOils.'+index+'.oilPrice'" :rules="{ required: true, message: '油品售价不能为空', trigger: 'blur' }">
<el-input v-model="items.oilPrice" placeholder="请输入" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="促销线路" :prop="'promotionOils.'+index+'.lineIds'" :rules="{ required: true, message: '促销线路不能为空', trigger: 'change' }">
<el-select v-model="items.lineIds" placeholder="请选择" filterable multiple @change="adminSelect1">
<el-option v-for="item in promotionLine" :key="item.lineCode" :label="item.lineName"
:value="item.lineCode" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="促销加油站" :prop="'promotionOils.'+index+'.oilIds'" :rules="{ required: true, message: '促销加油站不能为空', trigger: 'change' }">
<el-select v-model="items.oilIds" placeholder="请选择" filterable multiple @change="adminSelect2">
<el-option v-for="item in promotionStations" :key="item.stationaryPositionNumber"
:label="item.stationaryPositionName" :value="item.stationaryPositionNumber" />
</el-select>
</el-form-item>
<el-col />
</el-col>
<el-col :span="2">
<i v-if="index > 0" class="el-icon-delete" @click="deleteItem(items, index)" />
</el-col>
</el-row>
</div>
</el-form>
data() {
let checkName = (rule, value, callback) => {
// 后台方法
this.queryParams.promotionName = value;
listPromotion(this.queryParams).then((res) => {
if (res.rows.length > 0) {
if (this.gisinfoId == res.rows[0].id) {
//新增的时候没有id,修改的时候有,判断是不是本身
this.queryParams.promotionName = null;
callback();
} else {
this.queryParams.promotionName = null;
callback("该项值列表中已存在,请重新输入!");
}
} else {
this.queryParams.promotionName = null;
callback();
}
});
};
return {}
}
{ validator: checkName, trigger: "blur" },