需求
1、需要对第一个红色框框板块内所有带星号的地方进行校验，并将提示语显示到对应的输入框下面，如图：
2、第二个红色框框板块中，点击 “添加相关人员” 能实现对多人的添加功能，并且能绑定相对应的校验规则
3、在第二个红色框框板块中，对所有红色星号进行指定规则校验，如下图：
代码
<!-- 添加或修改出勤信息 -->
<el-dialog :title="title" :visible.sync="open" width="1300px" append-to-body >
<el-form ref="form" :model="form" :rules="rules" size="medium" label-width="100px">
<el-col :span="6">
<el-form-item label="出行类型" prop="carPlanType" >
<el-select v-model="form.carPlanType" placeholder="请选择出行类型" :style="{width: '100%'}" @change="changeDataFromPlanType" :disabled="form.id != null">
<el-option v-for="(item,index) in carPlanTypeData.carPlanTypeOptions" :key="index" :label="item.label"
:value="item.label" :disabled="item.disabled"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="18" v-if="form.carPlanType=='非生产出行'">
<el-form-item label="项目名称" prop="projectName" >
<el-input v-model="form.projectName" placeholder="请输入项目名称" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12" v-if="form.carPlanType !='非生产出行'">
<el-form-item label="项目名称" prop="projectName" >
<el-select v-model="form.projectName" placeholder="请选择项目名称" clearable filterable remote :remote-method="getProjectOptions" :loading="projectLoading" @change="changeProjectCode"
:style="{width: '100%'}">
<el-option v-for="item in projectOptions" :key="item.projectId" :label="item.projectCode +'-'+ item.projectName +'-'+ item.projectLeader"
:value="item" :disabled="item.disabled"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6" v-if="form.carPlanType !='非生产出行'">
<el-form-item label="项目编号" prop="projectCode" >
<span style="color: red;">{{ form.projectCode }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="起码里程" prop="startMileage">
<el-input-number v-model="form.startMileage" placeholder="起码里程" @change="handleMileageChange" controls-position=right>
</el-input-number>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="出发日期" prop="setOutDay">
<el-date-picker v-model="form.setOutDay" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
:style="{width: '100%'}" placeholder="请选择出发日期" clearable></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="司机" prop="driverName">
<el-select v-model="form.driverName" placeholder="请选择司机" clearable filterable remote :remote-method="getUserOptions" :loading="userLoading" @change="changeDriverNameOptions" :style="{ width: '100%' }">
<el-option v-for="userOption in userOptions" :key="userOption.userId" :label="userOption.nickName +' - '+ userOption.userName"
:value="userOption" :disabled="userOption.disabled"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="止码里程" prop="endMileage">
<el-input-number v-model="form.endMileage" placeholder="止码里程" @change="handleMileageChange" controls-position=right>
</el-input-number>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="出发时间" prop="setOutTime">
<el-time-picker v-model="form.setOutTime" format="HH:mm" value-format="HH:mm"
:picker-options='{"selectableRange":"00:00:00-23:59:59"}' :style="{width: '100%'}"
placeholder="请选择出发时间" clearable></el-time-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="车牌号" prop="licensePlateCode">
<el-select v-model="form.licensePlateCode" placeholder="请选择车牌号" filterable clearable :style="{ width: '100%' }">
<el-option v-for="dictData in licensePlateCode.licensePlate" :key="dictData.id" :label="dictData.licensePlateCode"
:value="dictData.licensePlateCode" ></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="里程数" prop="diffMileage">
<span style="color: red;">{{ form.diffMileage }}</span>
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="备注" prop="remarks">
<el-input v-model="form.remarks" placeholder="请输入备注" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
</el-col>
<el-card >
<div slot="header" class="clearfix">
<span style="font-size: 15px; color: red; font-weight: bold;">相关人员管理</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="addRelatedPeople">添加相关人员</el-button>
</div>
<div v-for="(relatedPeople,relatedIndex) in form.relatedPeoples" :key="relatedIndex">
<el-row :gutter="6">
<el-form :ref="'relatedPeople'+relatedIndex" :model="relatedPeople" size="mini" label-position="top" height="200px">
<el-col :span="3">
<el-form-item label="成员" prop="userId" :rules="attend.attendRules.userName">
<el-select v-model="relatedPeople.nickName" placeholder="请选择成员" clearable
filterable remote :remote-method="getUserOptions" :loading="userLoading" @change="changeUserOptions($event,relatedIndex)" >
<el-option v-for="userOption in userOptions" :key="userOption.userId" :label="userOption.nickName +' - '+ userOption.userName"
:value="userOption" :disabled="userOption.disabled"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label="计酬模式" prop="allowanceType" :rules="attend.attendRules.allowanceType">
<el-select v-model="relatedPeople.allowanceType" placeholder="请选择计酬模式" >
<el-option
v-for="dict in dict.type.allowance_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label="出勤类型" prop="attendStatus" :rules="attend.attendRules.attendStatus">
<el-select v-model="relatedPeople.attendStatus" placeholder="请选择出勤类型" >
<el-option v-for="(item,index) in attendStatusOptions" :key="index" :label="item.label"
:value="item.value" ></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label="出勤时长" prop="isHalfDay" :rules="attend.attendRules.isHalfDay">
<el-select v-model="relatedPeople.isHalfDay" placeholder="请选择出勤时长">
<el-option v-for="(item,index) in isHalfDayOptions" :key="index" :label="item.label"
:value="item.value" :disabled="item.disabled"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label="担任角色" prop="userType" :rules="attend.attendRules.userType">
<el-select v-model="relatedPeople.userType" placeholder="请选择担任角色">
<el-option v-for="(item,index) in userTypeOptions" :key="index" :label="item.label"
:value="item.value" :disabled="item.disabled"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label="车费承担方" prop="carFarePayer" :rules="attend.attendRules.carFarePayer">
<el-select v-model="relatedPeople.carFarePayer" placeholder="请选择车费承担方">
<el-option
v-for="dict in dict.type.car_fare_payer"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label="备注" prop="remarks" :rules="[{required: relatedPeople.allowanceType==2, message: '当计酬模式为出勤津贴时，备注必填', trigger: 'change' }]" v-if="relatedPeople.allowanceType==2">
<el-input v-model="relatedPeople.remarks" clearable placeholder="请输入备注"/>
</el-form-item>
</el-col>
<el-col :span="3">
<el-button type="danger" size="mini" style="margin-top: 38px; margin-left: 10px;" v-if="form.relatedPeoples.length > 1" @click="deleteRelatedPeople(relatedIndex)">删除</el-button>
</el-col>
</el-form>
</el-row>
</div>
</el-card>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
第一部分表单校验rules
// 表单校验
rules: {
carPlanType: [{
required: true,
message: '请选择出行类型',
trigger: 'change'
}],
projectName: [{
required: true,
message: '请选择项目名称',
trigger: 'change'
}],
startMileage: [{
required: true,
message: '起码里程',
trigger: 'blur'
}],
setOutDay: [{
required: true,
message: '请选择出发日期',
trigger: 'change'
}],
endMileage: [{
required: true,
message: '止码里程',
trigger: 'blur'
}],
setOutTime: [{
required: true,
message: '请选择出发时间',
trigger: 'change'
}],
diffMileage: [{
required: true,
message: '里程数',
trigger: 'blur'
}],
},
第二部分空闲人员表单校验rules
attend: {
open: false,
title: "考勤管理",
//空闲人员填写规则
attendRules:{
userName: [{
required: true,
message: '请选择成员',
trigger: 'change'
}],
allowanceType: [{
required: true,
message: '请选择计酬模式',
trigger: 'change'
}],
attendStatus: [{
required: true,
message: '请选择出勤类型',
trigger: 'change'
}],
isHalfDay: [{
required: true,
message: '请选择出勤时长',
trigger: 'change'
}],
userType: [{
required: true,
message: '请选择担任角色',
trigger: 'change'
}],
carFarePayer: [{
required: true,
message: '请选择车费承担方',
trigger: 'change'
}],
remarks: [{
required: false,
message: '当计酬模式为出勤津贴时，备注必填',
trigger: 'change'
}],
},
},
};
},
添加相关人员按钮函数
// 添加相关人员
addRelatedPeople(){
const relatedPeople = {
"userId":"",
"userName":"",
"nickName":"",
"userType":"",
"isHalfDay":3,
"attendStatus":"1",
"allowanceType":"1",
"carFarePayer":"",
"remarks":"",
};
this.getUserOptions();
this.form.relatedPeoples.push(relatedPeople)
},
提交按钮
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
// 对相关人员数据格式进行校验
let isSave = true;
let relatedPeoples =this.form.relatedPeoples;
for(let i =0; i< relatedPeoples.length; i++){
this.$refs["relatedPeople"+i][0].validate(valid => {
// 当所有valid==true时，执行保存操作
if (!valid) {
isSave = false;
}
})
}
if (isSave) {
if (this.form.id != null) {
updateSysCarPlanManage(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addSysCarPlanManage(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
}
});
},
说明：
以上代码直接复制肯定是无法正常使用的，因此对以上代码的重点进行二次提取说明。
1、第一部分正常校验就行，设置:ref 和 :rule ，注意冒号
对应的提交部分校验代码如下图：
2、添加相关人员，并且绑定对应的校验规则，红色框框内都是重点
![[misc]-流量包-find the pass](https://i-blog.csdnimg.cn/direct/16853d1ec4be45099079a5950058f03f.png)
