fix：疗休养模块缺少必填标识补充；疗休养报名-教职工信息手机号校验
This commit is contained in:
@@ -131,7 +131,7 @@ layout("/layouts/platform.html"){
|
||||
<el-option v-for="item in organizationTypeOptions" :key="item.code" :label="item.name" :value="item.code"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属工会" prop="unionId">
|
||||
<el-form-item label="所属工会" prop="unionId" :required="formData.organizationType !== 'schoolUnion'">
|
||||
<el-select v-model="formData.unionId" clearable filterable placeholder="请选择所属工会" style="width: 100%" :disabled="isUnionDisabled()">
|
||||
<el-option v-for="item in unionOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
@@ -255,7 +255,9 @@ layout("/layouts/platform.html"){
|
||||
}
|
||||
}
|
||||
const validatePeople = (rule, value, callback) => {
|
||||
if (!value || value <= 0) {
|
||||
if (value === null || value === undefined || value === "") {
|
||||
callback(new Error("必填"))
|
||||
} else if (!value || value <= 0) {
|
||||
callback(new Error("人数必须大于0"))
|
||||
} else if (this.batchForm.minGroupPeople && this.batchForm.maxGroupPeople
|
||||
&& this.batchForm.minGroupPeople > this.batchForm.maxGroupPeople) {
|
||||
@@ -317,15 +319,15 @@ layout("/layouts/platform.html"){
|
||||
},
|
||||
batchRules: {
|
||||
lineId: [{ required: true, message: "必填", trigger: ["blur", "change"] }],
|
||||
signupStartTime: [{ validator: validateBatchTime, trigger: ["blur", "change"] }],
|
||||
signupEndTime: [{ validator: validateBatchTime, trigger: ["blur", "change"] }],
|
||||
travelStartTime: [{ validator: validateBatchTime, trigger: ["blur", "change"] }],
|
||||
travelEndTime: [{ validator: validateBatchTime, trigger: ["blur", "change"] }],
|
||||
signupStartTime: [{ required: true, validator: validateBatchTime, trigger: ["blur", "change"] }],
|
||||
signupEndTime: [{ required: true, validator: validateBatchTime, trigger: ["blur", "change"] }],
|
||||
travelStartTime: [{ required: true, validator: validateBatchTime, trigger: ["blur", "change"] }],
|
||||
travelEndTime: [{ required: true, validator: validateBatchTime, trigger: ["blur", "change"] }],
|
||||
contactName: [{ required: true, message: "必填", trigger: ["blur", "change"] }],
|
||||
contactPhone: [{ validator: validateMobile, trigger: ["blur", "change"] }],
|
||||
minGroupPeople: [{ validator: validatePeople, trigger: ["blur", "change"] }],
|
||||
maxGroupPeople: [{ validator: validatePeople, trigger: ["blur", "change"] }],
|
||||
estimatedCost: [{ validator: validateMoney, trigger: ["blur", "change"] }]
|
||||
contactPhone: [{ required: true, validator: validateMobile, trigger: ["blur", "change"] }],
|
||||
minGroupPeople: [{ required: true, validator: validatePeople, trigger: ["blur", "change"] }],
|
||||
maxGroupPeople: [{ required: true, validator: validatePeople, trigger: ["blur", "change"] }],
|
||||
estimatedCost: [{ required: true, validator: validateMoney, trigger: ["blur", "change"] }]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -216,7 +216,7 @@ layout("/layouts/platform.html"){
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="身份证号">
|
||||
<el-form-item label="身份证号" prop="idCard" :rules="requiredRules" required>
|
||||
<el-input v-model="signupForm.idCard" readonly></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@@ -233,8 +233,8 @@ layout("/layouts/platform.html"){
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="手机号" required>
|
||||
<el-input v-model="signupForm.mobile" maxlength="30" placeholder="请输入手机号"></el-input>
|
||||
<el-form-item label="手机号" prop="mobile" :rules="mobileRules" required>
|
||||
<el-input v-model="signupForm.mobile" maxlength="11" placeholder="请输入手机号"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -325,17 +325,17 @@ layout("/layouts/platform.html"){
|
||||
<el-form :model="directRelativeForm" label-width="110px" ref="directRelativeForm">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="亲属姓名">
|
||||
<el-form-item label="亲属姓名" prop="relativeName" :rules="requiredRules" required>
|
||||
<el-input v-model="directRelativeForm.relativeName" maxlength="100" placeholder="请输入亲属姓名"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="所在单位">
|
||||
<el-form-item label="所在单位" prop="unitName" :rules="requiredRules" required>
|
||||
<el-input v-model="directRelativeForm.unitName" maxlength="100" placeholder="请输入所在单位"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="亲属关系">
|
||||
<el-form-item label="亲属关系" prop="relationshipCode" :rules="requiredRules" required>
|
||||
<el-select v-model="directRelativeForm.relationshipCode" clearable placeholder="请选择亲属关系" style="width: 100%" @change="directRelativeChange">
|
||||
<el-option v-for="item in directRelativeOptions" :key="item.code" :label="item.name" :value="item.code"></el-option>
|
||||
</el-select>
|
||||
@@ -344,12 +344,12 @@ layout("/layouts/platform.html"){
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="线路名称">
|
||||
<el-form-item label="线路名称" prop="lineName" :rules="requiredRules" required>
|
||||
<el-input v-model="directRelativeForm.lineName" maxlength="100" placeholder="请输入线路名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="出行开始日期">
|
||||
<el-form-item label="出行开始日期" prop="travelStartTime" :rules="requiredRules" required>
|
||||
<el-date-picker
|
||||
v-model="directRelativeForm.travelStartTime"
|
||||
type="date"
|
||||
@@ -360,7 +360,7 @@ layout("/layouts/platform.html"){
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="出行结束日期">
|
||||
<el-form-item label="出行结束日期" prop="travelEndTime" :rules="requiredRules" required>
|
||||
<el-date-picker
|
||||
v-model="directRelativeForm.travelEndTime"
|
||||
type="date"
|
||||
@@ -379,34 +379,48 @@ layout("/layouts/platform.html"){
|
||||
<div class="tour-actions">
|
||||
<el-button size="medium" type="primary" icon="el-icon-plus" :disabled="!signupForm.hasFamily" @click="addFamily">增加一条</el-button>
|
||||
</div>
|
||||
<el-table :data="familyData" border :size="tableSize" empty-text="暂无亲属信息">
|
||||
<el-form :model="{ rows: familyData }" ref="familyForm" label-width="0">
|
||||
<el-table class="tour-family-table" :data="familyData" border :size="tableSize" empty-text="暂无亲属信息">
|
||||
<el-table-column label="序号" type="index" width="70" align="center" header-align="center"></el-table-column>
|
||||
<el-table-column label="家属姓名" min-width="130" align="center" header-align="center">
|
||||
<template slot-scope="{row}">
|
||||
<template slot="header"><span style="color: #f56c6c">*</span> 家属姓名</template>
|
||||
<template slot-scope="{row, $index}">
|
||||
<el-form-item :prop="'rows.' + $index + '.familyName'" :rules="requiredRules">
|
||||
<el-input v-model="row.familyName" maxlength="100" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="性别" width="110" align="center" header-align="center">
|
||||
<template slot-scope="{row}">
|
||||
<template slot="header"><span style="color: #f56c6c">*</span> 性别</template>
|
||||
<template slot-scope="{row, $index}">
|
||||
<el-form-item :prop="'rows.' + $index + '.gender'" :rules="requiredRules">
|
||||
<el-select v-model="row.gender" clearable placeholder="请选择">
|
||||
<el-option label="男" value="男"></el-option>
|
||||
<el-option label="女" value="女"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="身份证号码" min-width="180" align="center" header-align="center">
|
||||
<template slot-scope="{row}">
|
||||
<template slot-scope="{row, $index}">
|
||||
<el-form-item :prop="'rows.' + $index + '.idCard'" :rules="[{ required: familyContactRequired(row), validator: validateFamilyIdCard, trigger: ['blur', 'change'] }]">
|
||||
<el-input v-model="row.idCard" maxlength="18" :placeholder="familyContactRequired(row) ? '16岁及以上必填' : '选填'" @blur="normalizeFamilyIdCard(row)"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="手机号" min-width="150" align="center" header-align="center">
|
||||
<template slot-scope="{row}">
|
||||
<template slot-scope="{row, $index}">
|
||||
<el-form-item :prop="'rows.' + $index + '.mobile'" :rules="[{ required: familyContactRequired(row), message: '必填', trigger: ['blur', 'change'] }]">
|
||||
<el-input v-model="row.mobile" maxlength="30" :placeholder="familyContactRequired(row) ? '16岁及以上必填' : '选填'"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="年龄" width="110" align="center" header-align="center">
|
||||
<template slot-scope="{row}">
|
||||
<template slot="header"><span style="color: #f56c6c">*</span> 年龄</template>
|
||||
<template slot-scope="{row, $index}">
|
||||
<el-form-item :prop="'rows.' + $index + '.age'" :rules="requiredRules">
|
||||
<el-input-number v-model="row.age" :min="0" :max="120" :precision="0" controls-position="right" style="width: 100%"></el-input-number>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="fillBedInfo" label="床型" min-width="120" align="center" header-align="center">
|
||||
@@ -427,10 +441,13 @@ layout("/layouts/platform.html"){
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="关系" width="120" align="center" header-align="center">
|
||||
<template slot-scope="{row}">
|
||||
<template slot="header"><span style="color: #f56c6c">*</span> 关系</template>
|
||||
<template slot-scope="{row, $index}">
|
||||
<el-form-item :prop="'rows.' + $index + '.relationship'" :rules="requiredRules">
|
||||
<el-select v-model="row.relationship" clearable placeholder="请选择">
|
||||
<el-option v-for="item in familyRelationshipOptions" :key="item.code" :label="item.name" :value="item.name"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="90" align="center" header-align="center" fixed="right">
|
||||
@@ -439,6 +456,8 @@ layout("/layouts/platform.html"){
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div v-if="familyValidationAttempted && familyData.length === 0" class="el-form-item__error" style="position: static">必填</div>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
@@ -520,6 +539,10 @@ layout("/layouts/platform.html"){
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 覆盖全局表格 div 文字颜色，保留输入组件下方校验提示的红色。 */
|
||||
.tour-family-table.el-table td.el-table__cell .el-form-item__error {
|
||||
color: #f56c6c;
|
||||
}
|
||||
.tour-section {
|
||||
margin-top: 10px;
|
||||
padding: 0 2px;
|
||||
@@ -763,6 +786,12 @@ layout("/layouts/platform.html"){
|
||||
fillBedInfo: true,
|
||||
signupForm: {},
|
||||
familyData: [],
|
||||
familyValidationAttempted: false,
|
||||
requiredRules: [{ required: true, message: "必填", trigger: ["blur", "change"] }],
|
||||
mobileRules: [
|
||||
{ required: true, message: "必填", trigger: ["blur", "change"] },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: "请输入正确的11位手机号", trigger: ["blur", "change"] }
|
||||
],
|
||||
bedTypeOptions: [],
|
||||
familyRelationshipOptions: [],
|
||||
directRelativeOptions: [],
|
||||
@@ -1161,6 +1190,11 @@ layout("/layouts/platform.html"){
|
||||
this.signupForm.hasFamily = true
|
||||
}
|
||||
this.signupVisible = true
|
||||
this.$nextTick(() => {
|
||||
;[this.$refs.signupForm, this.$refs.directRelativeForm, this.$refs.familyForm].forEach(form => {
|
||||
if (form) form.clearValidate()
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.$message.warning(res.msg || "查询失败")
|
||||
}
|
||||
@@ -1231,29 +1265,22 @@ layout("/layouts/platform.html"){
|
||||
this.signupForm.hasFamily = false
|
||||
}
|
||||
},
|
||||
// 家属表格按行校验，缺失项显示在对应输入组件下方。
|
||||
validateFamilies() {
|
||||
if (!this.allowFamily || !this.signupForm.hasFamily) return true
|
||||
if (this.familyData.length === 0) {
|
||||
this.$message.warning("请添加亲属信息")
|
||||
return false
|
||||
this.familyValidationAttempted = true
|
||||
if (this.familyData.length === 0) return false
|
||||
return new Promise(resolve => this.$refs.familyForm.validate(valid => resolve(valid)))
|
||||
},
|
||||
// 未满16岁的家属允许不填身份证，已填写时仍检查格式。
|
||||
validateFamilyIdCard(rule, value, callback) {
|
||||
if (!value) {
|
||||
callback(rule.required ? new Error("必填") : undefined)
|
||||
} else if (!this.isValidIdCard(value)) {
|
||||
callback(new Error("请输入正确的身份证号码"))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
const invalidBase = this.familyData.some(item => !item.familyName || item.age === null || item.age === undefined
|
||||
|| !item.gender || !item.relationship)
|
||||
if (invalidBase) {
|
||||
this.$message.warning("请完善亲属姓名、年龄、性别和与本人关系")
|
||||
return false
|
||||
}
|
||||
const invalidContact = this.familyData.some(item => this.familyContactRequired(item) && (!item.idCard || !item.mobile))
|
||||
if (invalidContact) {
|
||||
this.$message.warning("年满16周岁的亲属必须填写身份证号码和手机号")
|
||||
return false
|
||||
}
|
||||
const invalidIdCard = this.familyData.some(item => item.idCard && !this.isValidIdCard(item.idCard))
|
||||
if (invalidIdCard) {
|
||||
this.$message.warning("请输入正确的身份证号码")
|
||||
return false
|
||||
}
|
||||
return true
|
||||
},
|
||||
familyContactRequired(family) {
|
||||
return family && family.age !== null && family.age !== undefined && Number(family.age) >= 16
|
||||
@@ -1269,39 +1296,17 @@ layout("/layouts/platform.html"){
|
||||
},
|
||||
validateDirectRelative() {
|
||||
if (!this.isDirectFamilyLine(this.signupForm)) return true
|
||||
if (!this.directRelativeForm.relativeName) {
|
||||
this.$message.warning("请输入亲属姓名")
|
||||
return false
|
||||
}
|
||||
if (!this.directRelativeForm.unitName) {
|
||||
this.$message.warning("请输入亲属所在单位")
|
||||
return false
|
||||
}
|
||||
if (!this.directRelativeForm.relationshipCode) {
|
||||
this.$message.warning("请选择亲属关系")
|
||||
return false
|
||||
}
|
||||
if (!this.directRelativeForm.lineName) {
|
||||
this.$message.warning("请输入直系亲属线路名称")
|
||||
return false
|
||||
}
|
||||
if (!this.directRelativeForm.travelStartTime) {
|
||||
this.$message.warning("请选择出行开始日期")
|
||||
return false
|
||||
}
|
||||
if (!this.directRelativeForm.travelEndTime) {
|
||||
this.$message.warning("请选择出行结束日期")
|
||||
return false
|
||||
}
|
||||
return true
|
||||
return new Promise(resolve => this.$refs.directRelativeForm.validate(valid => resolve(valid)))
|
||||
},
|
||||
submitSignup() {
|
||||
if (!this.signupForm.idCard || !this.signupForm.mobile) {
|
||||
this.$message.warning("请完善报名人身份证号码和手机号")
|
||||
return
|
||||
}
|
||||
if (!this.validateFamilies()) return
|
||||
if (!this.validateDirectRelative()) return
|
||||
async submitSignup() {
|
||||
if (this.signupLoading) return
|
||||
// 同时校验各区域，一次展示所有字段错误，通过后才提交报名。
|
||||
const results = await Promise.all([
|
||||
new Promise(resolve => this.$refs.signupForm.validate(valid => resolve(valid))),
|
||||
this.validateFamilies(),
|
||||
this.validateDirectRelative()
|
||||
])
|
||||
if (results.some(valid => !valid)) return
|
||||
const families = this.allowFamily && this.signupForm.hasFamily ? this.familyData : []
|
||||
const form = Object.assign({}, this.signupForm, {
|
||||
families: JSON.stringify(families),
|
||||
@@ -1352,6 +1357,7 @@ layout("/layouts/platform.html"){
|
||||
}).catch(() => {})
|
||||
},
|
||||
destroySignup() {
|
||||
this.familyValidationAttempted = false
|
||||
this.signupForm = {}
|
||||
this.familyData = []
|
||||
this.directRelativeForm = {}
|
||||
|
||||
@@ -182,7 +182,7 @@ layout("/layouts/platform.html"){
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col v-if="formData.outProvinceRatioType === '固定人数'" :span="12">
|
||||
<el-form-item label="固定人数" prop="outProvinceFixedPeople">
|
||||
<el-form-item label="固定人数" prop="outProvinceFixedPeople" :required="formData.outProvinceRatioType === '固定人数'">
|
||||
<el-input-number v-model="formData.outProvinceFixedPeople" :controls="false" :min="0" :precision="0" placeholder="请输入固定人数" style="width: 100%"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@@ -366,7 +366,9 @@ layout("/layouts/platform.html"){
|
||||
}
|
||||
const checkOutProvinceFixedPeople = (rule, value, callback) => {
|
||||
if (this.formData.outProvinceRatioType === "固定人数"
|
||||
&& (value === null || value === undefined || value === "" || value < 0)) {
|
||||
&& (value === null || value === undefined || value === "")) {
|
||||
callback(new Error("必填"))
|
||||
} else if (this.formData.outProvinceRatioType === "固定人数" && value < 0) {
|
||||
callback(new Error("固定人数必须大于等于0"))
|
||||
} else {
|
||||
callback()
|
||||
|
||||
@@ -113,7 +113,7 @@ layout("/layouts/platform.html"){
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="身份证号">
|
||||
<el-form-item label="身份证号" prop="idCard" :rules="requiredRules" required>
|
||||
<el-input v-model="signupForm.idCard" readonly></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@@ -130,8 +130,8 @@ layout("/layouts/platform.html"){
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="手机号" required>
|
||||
<el-input v-model="signupForm.mobile" maxlength="30" placeholder="请输入手机号"></el-input>
|
||||
<el-form-item label="手机号" prop="mobile" :rules="mobileRules" required>
|
||||
<el-input v-model="signupForm.mobile" maxlength="11" placeholder="请输入手机号"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -222,17 +222,17 @@ layout("/layouts/platform.html"){
|
||||
<el-form :model="directRelativeForm" label-width="110px" ref="directRelativeForm">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="亲属姓名">
|
||||
<el-form-item label="亲属姓名" prop="relativeName" :rules="requiredRules" required>
|
||||
<el-input v-model="directRelativeForm.relativeName" maxlength="100" placeholder="请输入亲属姓名"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="所在单位">
|
||||
<el-form-item label="所在单位" prop="unitName" :rules="requiredRules" required>
|
||||
<el-input v-model="directRelativeForm.unitName" maxlength="100" placeholder="请输入所在单位"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="亲属关系">
|
||||
<el-form-item label="亲属关系" prop="relationshipCode" :rules="requiredRules" required>
|
||||
<el-select v-model="directRelativeForm.relationshipCode" clearable placeholder="请选择亲属关系" style="width: 100%" @change="directRelativeChange">
|
||||
<el-option v-for="item in directRelativeOptions" :key="item.code" :label="item.name" :value="item.code"></el-option>
|
||||
</el-select>
|
||||
@@ -241,12 +241,12 @@ layout("/layouts/platform.html"){
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="线路名称">
|
||||
<el-form-item label="线路名称" prop="lineName" :rules="requiredRules" required>
|
||||
<el-input v-model="directRelativeForm.lineName" maxlength="100" placeholder="请输入线路名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="出行开始日期">
|
||||
<el-form-item label="出行开始日期" prop="travelStartTime" :rules="requiredRules" required>
|
||||
<el-date-picker
|
||||
v-model="directRelativeForm.travelStartTime"
|
||||
type="date"
|
||||
@@ -257,7 +257,7 @@ layout("/layouts/platform.html"){
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="出行结束日期">
|
||||
<el-form-item label="出行结束日期" prop="travelEndTime" :rules="requiredRules" required>
|
||||
<el-date-picker
|
||||
v-model="directRelativeForm.travelEndTime"
|
||||
type="date"
|
||||
@@ -276,34 +276,48 @@ layout("/layouts/platform.html"){
|
||||
<div class="tour-signup-actions">
|
||||
<el-button size="medium" type="primary" icon="el-icon-plus" :disabled="!signupForm.hasFamily" @click="addFamily">增加一条</el-button>
|
||||
</div>
|
||||
<el-table :data="familyData" border :size="tableSize" empty-text="暂无亲属信息">
|
||||
<el-form :model="{ rows: familyData }" ref="familyForm" label-width="0">
|
||||
<el-table class="tour-family-table" :data="familyData" border :size="tableSize" empty-text="暂无亲属信息">
|
||||
<el-table-column label="序号" type="index" width="70" align="center" header-align="center"></el-table-column>
|
||||
<el-table-column label="家属姓名" min-width="130" align="center" header-align="center">
|
||||
<template slot-scope="{row}">
|
||||
<template slot="header"><span style="color: #f56c6c">*</span> 家属姓名</template>
|
||||
<template slot-scope="{row, $index}">
|
||||
<el-form-item :prop="'rows.' + $index + '.familyName'" :rules="requiredRules">
|
||||
<el-input v-model="row.familyName" maxlength="100" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="性别" width="110" align="center" header-align="center">
|
||||
<template slot-scope="{row}">
|
||||
<template slot="header"><span style="color: #f56c6c">*</span> 性别</template>
|
||||
<template slot-scope="{row, $index}">
|
||||
<el-form-item :prop="'rows.' + $index + '.gender'" :rules="requiredRules">
|
||||
<el-select v-model="row.gender" clearable placeholder="请选择">
|
||||
<el-option label="男" value="男"></el-option>
|
||||
<el-option label="女" value="女"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="身份证号码" min-width="180" align="center" header-align="center">
|
||||
<template slot-scope="{row}">
|
||||
<template slot-scope="{row, $index}">
|
||||
<el-form-item :prop="'rows.' + $index + '.idCard'" :rules="[{ required: familyContactRequired(row), validator: validateFamilyIdCard, trigger: ['blur', 'change'] }]">
|
||||
<el-input v-model="row.idCard" maxlength="18" :placeholder="familyContactRequired(row) ? '16岁及以上必填' : '选填'" @blur="normalizeFamilyIdCard(row)"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="手机号" min-width="150" align="center" header-align="center">
|
||||
<template slot-scope="{row}">
|
||||
<template slot-scope="{row, $index}">
|
||||
<el-form-item :prop="'rows.' + $index + '.mobile'" :rules="[{ required: familyContactRequired(row), message: '必填', trigger: ['blur', 'change'] }]">
|
||||
<el-input v-model="row.mobile" maxlength="30" :placeholder="familyContactRequired(row) ? '16岁及以上必填' : '选填'"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="年龄" width="110" align="center" header-align="center">
|
||||
<template slot-scope="{row}">
|
||||
<template slot="header"><span style="color: #f56c6c">*</span> 年龄</template>
|
||||
<template slot-scope="{row, $index}">
|
||||
<el-form-item :prop="'rows.' + $index + '.age'" :rules="requiredRules">
|
||||
<el-input-number v-model="row.age" :min="0" :max="120" :precision="0" controls-position="right" style="width: 100%"></el-input-number>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="fillBedInfo" label="床型" min-width="120" align="center" header-align="center">
|
||||
@@ -336,10 +350,13 @@ layout("/layouts/platform.html"){
|
||||
</el-table-column>
|
||||
-->
|
||||
<el-table-column label="关系" width="120" align="center" header-align="center">
|
||||
<template slot-scope="{row}">
|
||||
<template slot="header"><span style="color: #f56c6c">*</span> 关系</template>
|
||||
<template slot-scope="{row, $index}">
|
||||
<el-form-item :prop="'rows.' + $index + '.relationship'" :rules="requiredRules">
|
||||
<el-select v-model="row.relationship" clearable placeholder="请选择">
|
||||
<el-option v-for="item in familyRelationshipOptions" :key="item.code" :label="item.name" :value="item.name"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="90" align="center" header-align="center" fixed="right">
|
||||
@@ -348,6 +365,8 @@ layout("/layouts/platform.html"){
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div v-if="familyValidationAttempted && familyData.length === 0" class="el-form-item__error" style="position: static">必填</div>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
@@ -389,6 +408,10 @@ layout("/layouts/platform.html"){
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 覆盖全局表格 div 文字颜色，保留输入组件下方校验提示的红色。 */
|
||||
.tour-family-table.el-table td.el-table__cell .el-form-item__error {
|
||||
color: #f56c6c;
|
||||
}
|
||||
.tour-signup-title {
|
||||
border-left: 4px solid #0079c2;
|
||||
color: #0079c2;
|
||||
@@ -489,6 +512,12 @@ layout("/layouts/platform.html"){
|
||||
fillBedInfo: true,
|
||||
signupForm: {},
|
||||
familyData: [],
|
||||
familyValidationAttempted: false,
|
||||
requiredRules: [{ required: true, message: "必填", trigger: ["blur", "change"] }],
|
||||
mobileRules: [
|
||||
{ required: true, message: "必填", trigger: ["blur", "change"] },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: "请输入正确的11位手机号", trigger: ["blur", "change"] }
|
||||
],
|
||||
bedTypeOptions: [],
|
||||
familyRelationshipOptions: [],
|
||||
directRelativeOptions: [],
|
||||
@@ -791,6 +820,11 @@ layout("/layouts/platform.html"){
|
||||
this.signupForm.hasFamily = true
|
||||
}
|
||||
this.signupVisible = true
|
||||
this.$nextTick(() => {
|
||||
;[this.$refs.signupForm, this.$refs.directRelativeForm, this.$refs.familyForm].forEach(form => {
|
||||
if (form) form.clearValidate()
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.$message.warning(res.msg || "查询失败")
|
||||
}
|
||||
@@ -847,29 +881,22 @@ layout("/layouts/platform.html"){
|
||||
this.signupForm.hasFamily = false
|
||||
}
|
||||
},
|
||||
// 家属表格按行校验，缺失项显示在对应输入组件下方。
|
||||
validateFamilies() {
|
||||
if (!this.allowFamily || !this.signupForm.hasFamily) return true
|
||||
if (this.familyData.length === 0) {
|
||||
this.$message.warning("请添加亲属信息")
|
||||
return false
|
||||
this.familyValidationAttempted = true
|
||||
if (this.familyData.length === 0) return false
|
||||
return new Promise(resolve => this.$refs.familyForm.validate(valid => resolve(valid)))
|
||||
},
|
||||
// 未满16岁的家属允许不填身份证，已填写时仍检查格式。
|
||||
validateFamilyIdCard(rule, value, callback) {
|
||||
if (!value) {
|
||||
callback(rule.required ? new Error("必填") : undefined)
|
||||
} else if (!this.isValidIdCard(value)) {
|
||||
callback(new Error("请输入正确的身份证号码"))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
const invalidBase = this.familyData.some(item => !item.familyName || item.age === null || item.age === undefined
|
||||
|| !item.gender || !item.relationship)
|
||||
if (invalidBase) {
|
||||
this.$message.warning("请完善亲属姓名、年龄、性别和与本人关系")
|
||||
return false
|
||||
}
|
||||
const invalidContact = this.familyData.some(item => this.familyContactRequired(item) && (!item.idCard || !item.mobile))
|
||||
if (invalidContact) {
|
||||
this.$message.warning("年满16周岁的亲属必须填写身份证号码和手机号")
|
||||
return false
|
||||
}
|
||||
const invalidIdCard = this.familyData.some(item => item.idCard && !this.isValidIdCard(item.idCard))
|
||||
if (invalidIdCard) {
|
||||
this.$message.warning("请输入正确的身份证号码")
|
||||
return false
|
||||
}
|
||||
return true
|
||||
},
|
||||
familyContactRequired(family) {
|
||||
return family && family.age !== null && family.age !== undefined && Number(family.age) >= 16
|
||||
@@ -885,39 +912,17 @@ layout("/layouts/platform.html"){
|
||||
},
|
||||
validateDirectRelative() {
|
||||
if (!this.isDirectFamilyLine(this.signupForm)) return true
|
||||
if (!this.directRelativeForm.relativeName) {
|
||||
this.$message.warning("请输入亲属姓名")
|
||||
return false
|
||||
}
|
||||
if (!this.directRelativeForm.unitName) {
|
||||
this.$message.warning("请输入亲属所在单位")
|
||||
return false
|
||||
}
|
||||
if (!this.directRelativeForm.relationshipCode) {
|
||||
this.$message.warning("请选择亲属关系")
|
||||
return false
|
||||
}
|
||||
if (!this.directRelativeForm.lineName) {
|
||||
this.$message.warning("请输入直系亲属线路名称")
|
||||
return false
|
||||
}
|
||||
if (!this.directRelativeForm.travelStartTime) {
|
||||
this.$message.warning("请选择出行开始日期")
|
||||
return false
|
||||
}
|
||||
if (!this.directRelativeForm.travelEndTime) {
|
||||
this.$message.warning("请选择出行结束日期")
|
||||
return false
|
||||
}
|
||||
return true
|
||||
return new Promise(resolve => this.$refs.directRelativeForm.validate(valid => resolve(valid)))
|
||||
},
|
||||
submitSignup() {
|
||||
if (!this.signupForm.idCard || !this.signupForm.mobile) {
|
||||
this.$message.warning("请完善报名人身份证号码和手机号")
|
||||
return
|
||||
}
|
||||
if (!this.validateFamilies()) return
|
||||
if (!this.validateDirectRelative()) return
|
||||
async submitSignup() {
|
||||
if (this.signupLoading) return
|
||||
// 同时校验各区域，一次展示所有字段错误，通过后才提交报名。
|
||||
const results = await Promise.all([
|
||||
new Promise(resolve => this.$refs.signupForm.validate(valid => resolve(valid))),
|
||||
this.validateFamilies(),
|
||||
this.validateDirectRelative()
|
||||
])
|
||||
if (results.some(valid => !valid)) return
|
||||
const families = this.allowFamily && this.signupForm.hasFamily ? this.familyData : []
|
||||
const form = Object.assign({}, this.signupForm, {
|
||||
families: JSON.stringify(families),
|
||||
@@ -966,6 +971,7 @@ layout("/layouts/platform.html"){
|
||||
}).catch(() => {})
|
||||
},
|
||||
destroySignup() {
|
||||
this.familyValidationAttempted = false
|
||||
this.signupForm = {}
|
||||
this.familyData = []
|
||||
this.directRelativeForm = {}
|
||||
|
||||
@@ -138,14 +138,14 @@ layout("/layouts/platform.html"){
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系人手机" prop="contactPhone">
|
||||
<el-form-item label="联系人手机" prop="contactPhone" required>
|
||||
<el-input v-model="formData.contactPhone" maxlength="30" placeholder="请输入联系人手机"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-form-item label="邮箱" prop="email" required>
|
||||
<el-input v-model="formData.email" maxlength="100" placeholder="请输入邮箱"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@@ -221,8 +221,8 @@ layout("/layouts/platform.html"){
|
||||
agencyName: [{ required: true, message: "必填", trigger: ["blur", "change"] }],
|
||||
agencyCode: [{ required: true, message: "必填", trigger: ["blur", "change"] }],
|
||||
contactName: [{ required: true, message: "必填", trigger: ["blur", "change"] }],
|
||||
contactPhone: [{ validator: validateMobile, trigger: ["blur", "change"] }],
|
||||
email: [{ validator: validateEmail, trigger: ["blur", "change"] }]
|
||||
contactPhone: [{ required: true, validator: validateMobile, trigger: ["blur", "change"] }],
|
||||
email: [{ required: true, validator: validateEmail, trigger: ["blur", "change"] }]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user