新增表单校验

This commit is contained in:
weipengfei 2023-07-29 14:07:45 +08:00
parent c99d4cdbde
commit b6ea349217
4 changed files with 286 additions and 126 deletions

View File

@ -1,6 +1,6 @@
<template> <template>
<view> <view>
<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm"> <u--form labelPosition="left" :model="formData" :rules="rules" ref="districtForm">
<u-form-item label="省" required prop="province" @click="changeCity('province')" borderBottom> <u-form-item label="省" required prop="province" @click="changeCity('province')" borderBottom>
<u--input :value="formDataText.province" disabled disabledColor="#fff" placeholder="请选择省"></u--input> <u--input :value="formDataText.province" disabled disabledColor="#fff" placeholder="请选择省"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon> <u-icon slot="right" name="arrow-right"></u-icon>
@ -82,9 +82,9 @@
trigger: ['change', 'blur'] trigger: ['change', 'blur']
}, },
brigade: { brigade: {
type: 'any', validator: (rule, value, callback )=>{
required: true, value?callback():callback('不能为空')
message: '不能为空', },
trigger: ['change', 'blur'] trigger: ['change', 'blur']
}, },
}, },
@ -103,7 +103,7 @@
methods:{ methods:{
validate(){ validate(){
return new Promise((resolve, reject)=>{ return new Promise((resolve, reject)=>{
this.$refs.uForm.validate().then(res=>{ this.$refs.districtForm.validate().then(res=>{
if(res)resolve(true); if(res)resolve(true);
else reject(false); else reject(false);
}) })

View File

@ -1,122 +1,131 @@
<template> <template>
<view class=""> <view class="">
<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm">
<block v-for="(item, index) in formData.breedingList"> <block v-for="(item, index) in formData">
<u-form-item labelWidth="auto" label="耕地总面积" required prop="" borderBottom> <u--form labelPosition="left" :model="item" :rules="rules" ref="breedingForm">
<u--input placeholder="请输入耕地总面积"></u--input> <u-form-item labelWidth="auto" label="耕地总面积" required prop="cultivated_area" borderBottom>
<u--input v-model="item.cultivated_area" placeholder="请输入耕地总面积"></u--input>
</u-form-item> </u-form-item>
<picker :range="landPlanList" mode="selector" @change="changeLanPlan" :data-index="index"> <picker :range="landPlanList" mode="selector" @change="changeLanPlan" :data-index="index">
<u-form-item labelWidth="auto" label="土地规划" required prop="" borderBottom> <u-form-item labelWidth="auto" label="土地规划" required prop="planning" borderBottom>
<u--input v-model="item.landPlan" placeholder="请选择规划" disabled disabledColor="#fff"></u--input> <u--input :value="landPlanList[item.planning]" placeholder="请选择规划" disabled disabledColor="#fff"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon> <u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item> </u-form-item>
</picker> </picker>
<u-form-item labelWidth="auto" label="有无种养殖培训" required prop="sex" borderBottom> <u-form-item labelWidth="auto" label="有无种养殖培训" required prop="breeding_training" borderBottom>
<u-radio-group v-model="formData.sex" style="margin: 16rpx;"> <u-radio-group v-model="item.breeding_training" style="margin: 16rpx;">
<u-radio :customStyle="{marginRight: '16px'}" <u-radio :customStyle="{marginRight: '16px'}"
v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label" v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
:name="item.value"> :name="item.value">
</u-radio> </u-radio>
</u-radio-group> </u-radio-group>
</u-form-item> </u-form-item>
<u-form-item labelWidth="auto" label="有无注册成立种植公司" required prop="sex" borderBottom> <u-form-item labelWidth="auto" label="有无注册成立种植公司" required prop="planting_company" borderBottom>
<u-radio-group v-model="formData.sex" style="margin: 16rpx;"> <u-radio-group v-model="item.planting_company" style="margin: 16rpx;">
<u-radio :customStyle="{marginRight: '16px'}" <u-radio :customStyle="{marginRight: '16px'}"
v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label" v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
:name="item.value"> :name="item.value">
</u-radio> </u-radio>
</u-radio-group> </u-radio-group>
</u-form-item> </u-form-item>
<u-form-item labelWidth="auto" labelPosition="top" label="备注" required prop="" borderBottom> <u-form-item labelWidth="auto" labelPosition="top" label="备注" required prop="notes" borderBottom>
<u--textarea v-model="item.course" autoHeight placeholder="请输入备注" border="surround" count></u--textarea> <u--textarea v-model="item.notes" autoHeight placeholder="请输入备注" border="surround" count></u--textarea>
</u-form-item> </u-form-item>
<u-form-item labelWidth="auto" label="种养殖类型" required prop="" borderBottom> <u-form-item labelWidth="auto" label="种养殖类型" required prop="breeding_type" borderBottom>
<u--input placeholder="请输入种养殖类型"></u--input> <u--input v-model="item.breeding_type" placeholder="请输入种养殖类型"></u--input>
</u-form-item> </u-form-item>
<u-form-item labelWidth="auto" label="面积" required prop="" borderBottom> <u-form-item labelWidth="auto" label="面积" required prop="area" borderBottom>
<u--input placeholder="请输入面积"></u--input> <u--input v-model="item.area" placeholder="请输入面积"></u--input>
</u-form-item> </u-form-item>
<u-form-item labelWidth="auto" label="种养殖开始时间" required prop="" borderBottom> <picker mode="date" @change="changeDate" :data-index="index" :data-value="'breeding_time'">
<u--input placeholder="请输入种养殖开始时间"></u--input> <u-form-item labelWidth="auto" label="种养殖开始时间" required prop="breeding_time" borderBottom>
<u--input :value="item.breeding_time" placeholder="请选择种养殖开始时间" disabled disabledColor="#fff"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
</picker>
<picker mode="date" @change="changeDate" :data-index="index" :data-value="'mature_time'">
<u-form-item labelWidth="auto" label="上市时间" required prop="mature_time" borderBottom>
<u--input :value="item.mature_time" placeholder="请选择上市时间" disabled disabledColor="#fff"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
</picker>
<u-form-item labelWidth="auto" label="产量" required prop="yield" borderBottom>
<u--input v-model="item.yield" placeholder="请输入产量"></u--input>
</u-form-item> </u-form-item>
<u-form-item labelWidth="auto" label="上市时间" required prop="" borderBottom> <u-form-item labelWidth="auto" label="预计收益" required prop="estimated_income" borderBottom>
<u--input placeholder="请输入上市时间"></u--input> <u--input v-model="item.estimated_income" placeholder="请输入预计收益"></u--input>
</u-form-item> </u-form-item>
<u-form-item labelWidth="auto" label="产量" required prop="" borderBottom> <u-form-item labelWidth="auto" labelPosition="top" label="农资农具收益情况" required prop="farm_tools" borderBottom>
<u--input placeholder="请输入产量"></u--input> <u--textarea v-model="item.farm_tools" autoHeight placeholder="请输入农资农具收益情况" border="surround"
count></u--textarea>
</u-form-item> </u-form-item>
<u-form-item labelWidth="auto" label="预计收益" required prop="" borderBottom> <u-form-item labelWidth="auto" label="是否生态种养殖" required prop="ecological_farming" borderBottom>
<u--input placeholder="请输入预计收益"></u--input> <u-radio-group v-model="item.ecological_farming" style="margin: 16rpx;">
</u-form-item>
<u-form-item labelWidth="auto" label="农资农具收益情况" required prop="" borderBottom>
<u--input placeholder="请输入农资农具收益情况"></u--input>
</u-form-item>
<u-form-item labelWidth="auto" label="是否生态种养殖" required prop="sex" borderBottom>
<u-radio-group v-model="formData.sex" style="margin: 16rpx;">
<u-radio :customStyle="{marginRight: '16px'}" <u-radio :customStyle="{marginRight: '16px'}"
v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label" v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
:name="item.value"> :name="item.value">
</u-radio> </u-radio>
</u-radio-group> </u-radio-group>
</u-form-item> </u-form-item>
<u-form-item labelWidth="auto" label="现代化程度" required prop="" borderBottom> <u-form-item labelWidth="auto" label="现代化程度" required prop="modernization" borderBottom>
<u--input placeholder="请输入现代化程度"></u--input> <u--input v-model="item.modernization" placeholder="请输入现代化程度"></u--input>
</u-form-item> </u-form-item>
<u-form-item labelWidth="auto" label="预售卖价格" required prop="" borderBottom> <u-form-item labelWidth="auto" label="预售卖价格" required prop="pre_price" borderBottom>
<u--input placeholder="请输入预售卖价格"></u--input> <u--input v-model="item.pre_price" placeholder="请输入预售卖价格"></u--input>
</u-form-item> </u-form-item>
<u-form-item labelWidth="auto" label="销售方式" required prop="sex" borderBottom> <u-form-item labelWidth="auto" label="销售方式" required prop="method_sales" borderBottom>
<u-radio-group v-model="formData.sex" style="margin: 16rpx;"> <u-radio-group v-model="item.method_sales" style="margin: 16rpx;">
<u-radio :customStyle="{marginRight: '16px'}" <u-radio :customStyle="{marginRight: '16px'}"
v-for="(item, index) in [{value:1,label:'自销'},{value:0,label:'定点销售'}]" :key="index" :label="item.label" v-for="(item, index) in [{value:1,label:'自销'},{value:0,label:'定点销售'}]" :key="index" :label="item.label"
:name="item.value"> :name="item.value">
</u-radio> </u-radio>
</u-radio-group> </u-radio-group>
</u-form-item> </u-form-item>
<u-form-item labelWidth="auto" label="有无加工仓储" required prop="sex" borderBottom> <u-form-item labelWidth="auto" label="有无加工仓储" required prop="processing_storage" borderBottom>
<u-radio-group v-model="formData.sex" style="margin: 16rpx;"> <u-radio-group v-model="item.processing_storage" style="margin: 16rpx;">
<u-radio :customStyle="{marginRight: '16px'}" <u-radio :customStyle="{marginRight: '16px'}"
v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label" v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
:name="item.value"> :name="item.value">
</u-radio> </u-radio>
</u-radio-group> </u-radio-group>
</u-form-item> </u-form-item>
<u-form-item labelWidth="auto" label="有无宣传推广" required prop="sex" borderBottom> <u-form-item labelWidth="auto" label="有无宣传推广" required prop="promote" borderBottom>
<u-radio-group v-model="formData.sex" style="margin: 16rpx;"> <u-radio-group v-model="item.promote" style="margin: 16rpx;">
<u-radio :customStyle="{marginRight: '16px'}" <u-radio :customStyle="{marginRight: '16px'}"
v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label" v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
:name="item.value"> :name="item.value">
</u-radio> </u-radio>
</u-radio-group> </u-radio-group>
</u-form-item> </u-form-item>
<u-form-item labelWidth="auto" label="有无运输" required prop="sex" borderBottom> <u-form-item labelWidth="auto" label="有无运输" required prop="transportation" borderBottom>
<u-radio-group v-model="formData.sex" style="margin: 16rpx;"> <u-radio-group v-model="item.transportation" style="margin: 16rpx;">
<u-radio :customStyle="{marginRight: '16px'}" <u-radio :customStyle="{marginRight: '16px'}"
v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label" v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
:name="item.value"> :name="item.value">
</u-radio> </u-radio>
</u-radio-group> </u-radio-group>
</u-form-item> </u-form-item>
<button type="primary" v-if="formData.breedingList.length>1" class="delete" <u-form-item labelWidth="auto" label="是否有扩大经营需求" required prop="expand_business_needs" borderBottom>
<u-radio-group v-model="item.expand_business_needs" style="margin: 16rpx;">
<u-radio :customStyle="{marginRight: '16px'}"
v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
:name="item.value">
</u-radio>
</u-radio-group>
</u-form-item>
<u-form-item labelWidth="auto" labelPosition="top" label="种养殖需求描述" required prop="demand" borderBottom>
<u--textarea v-model="item.demand" autoHeight placeholder="请输入种养殖需求描述" border="surround" count></u--textarea>
</u-form-item>
<u-form-item labelWidth="auto" labelPosition="top" label="政策补助" required prop="policy_subsidies" borderBottom>
<u--textarea v-model="item.policy_subsidies" autoHeight placeholder="请输入政策补助" border="surround"
count></u--textarea>
</u-form-item>
<button type="primary" v-if="formData.length>1" class="delete"
@click="removeBreedingList(index)">删除以上种养殖信息</button> @click="removeBreedingList(index)">删除以上种养殖信息</button>
</block> </u--form>
<button type="primary" class="plus" @click="pushBreedingList">+</button> </block>
<button type="primary" class="plus" @click="pushBreedingList">+</button>
<u-form-item labelWidth="auto" label="是否有扩大经营需求" required prop="sex" borderBottom>
<u-radio-group v-model="formData.sex" style="margin: 16rpx;">
<u-radio :customStyle="{marginRight: '16px'}"
v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
:name="item.value">
</u-radio>
</u-radio-group>
</u-form-item>
<u-form-item labelWidth="auto" labelPosition="top" label="种养殖需求描述" required prop="" borderBottom>
<u--textarea autoHeight placeholder="请输入种养殖需求描述" border="surround" count></u--textarea>
</u-form-item>
<u-form-item labelWidth="auto" labelPosition="top" label="政策补助" required prop="" borderBottom>
<u--textarea autoHeight placeholder="请输入政策补助" border="surround" count></u--textarea>
</u-form-item>
</u--form>
</view> </view>
</template> </template>
@ -125,27 +134,106 @@
data() { data() {
return { return {
landPlanList: ['自己种养', '出租', '代种养', '租更多地扩大种植'], landPlanList: ['自己种养', '出租', '代种养', '租更多地扩大种植'],
formData: { formData: [{
breedingList: [{ "category_id": "1",
landPlan: '', // "category_child": "0",
}, ] "cultivated_area": "20", //
}, "planning": 66, //
"breeding_training": 1, //
"planting_company": 0, //
"notes": "试试备注", //
"breeding_type": 22, //
"area": 20, //
"breeding_time": "2022-07-22", //
"mature_time": "2022-07-22", //
"yield": 600, //
"estimated_income": 1500, //
"farm_tools": "收割机一台,打米机一台", //使
"ecological_farming": 1, //
"modernization": 30, //
"pre_price": "30.00", //
"method_sales": 1, //
"processing_storage": 0, //
"promote": 0, //广
"transportation": 0, //
"expand_business_needs": 0, //
"demand": "没有述求", //
"policy_subsidies": "无补助" //
}],
rules: { rules: {
} }
} }
}, },
created() {
this.initRules()
},
methods: { methods: {
//
initRules(){
let arr = Object.keys(this.formData[0]);
arr.forEach(key=>{
this.rules[key] = {
validator: (rule, value, callback )=>{
if(Array.isArray(this.$refs.breedingForm)) for(let i = 0;i<this.$refs.breedingForm.length;i++){
this.$refs.breedingForm[i].clearValidate(rule.field);
}
value.trim()!==''?callback():callback('不能为空');
},
trigger: ['change', 'blur']
}
})
},
//
async validate(){
let flag = true;
if(Array.isArray(this.$refs.breedingForm)) for(let i = 0;i<this.$refs.breedingForm.length;i++){
let res = await this.$refs.breedingForm[i].validate();
if(!res) {
flag = false;
break;
}
}
return flag;
},
// //
changeLanPlan(e) { changeLanPlan(e) {
let index = e.currentTarget.dataset.index; let index = e.currentTarget.dataset.index;
this.formData.breedingList[index].landPlan = this.landPlanList[e.detail.value]; this.formData[index].planning = e.detail.value;
},
//
changeDate(e){
let data = e.currentTarget.dataset;
this.formData[data.index][data.value] = e.detail.value;
}, },
// //
pushBreedingList() { pushBreedingList() {
this.formData.breedingList.push({ this.formData.push({
landPlan: '', // "category_id": "",
}) "category_child": "",
"cultivated_area": "", //
"planning": "", //
"breeding_training": "", //
"planting_company": "", //
"notes": "", //
"breeding_type": "", //
"area": "", //
"breeding_time": "", //
"mature_time": "", //
"yield": "", //
"estimated_income": "", //
"farm_tools": "", //使
"ecological_farming": "", //
"modernization": "", //
"pre_price": "", //
"method_sales": "", //
"processing_storage": "", //
"promote": "", //广
"transportation": "", //
"expand_business_needs": "", //
"demand": "", //
"policy_subsidies": "" //
})
}, },
// //
removeBreedingList(index) { removeBreedingList(index) {
@ -154,7 +242,7 @@
content: '确定删除吗?', content: '确定删除吗?',
success: (res) => { success: (res) => {
if (res.confirm) { if (res.confirm) {
this.formData.breedingList.splice(index, 1); this.formData.splice(index, 1);
} }
} }
}) })

View File

@ -1,25 +1,25 @@
<!-- 常住人口 --> <!-- 常住人口 -->
<template> <template>
<view class=""> <view class="">
<u--form labelPosition="left" :model="residents" :rules="rules" ref="uForm"> <u--form labelPosition="left" :model="residents" :rules="rules" ref="residentsForm">
<block value="人口"> <block value="人口">
<block value="人员信息" v-for="(item, index) in residents.family" :key="'user'+index"> <block value="人员信息" v-for="(item, index) in residents.family" :key="'user'+index">
<u-form-item label="姓名" required prop="residents.name" borderBottom> <u-form-item label="姓名" required prop="family.name" borderBottom>
<u--input v-model="item.name" placeholder="请输入姓名"></u--input> <u--input v-model="item.name" placeholder="请输入姓名"></u--input>
</u-form-item> </u-form-item>
<picker mode="date" value="1990-01-01" @change="changebirth_time" :data-index="index"> <picker mode="date" value="1990-01-01" @change="changebirth_time" :data-index="index">
<u-form-item labelWidth="auto" label="出生日期" required prop="residents.name" borderBottom> <u-form-item labelWidth="auto" label="出生日期" required prop="family.birth_time" borderBottom>
<u--input :value="item.birth_time" placeholder="请选择出生日期" disabled disabledColor="#fff"></u--input> <u--input :value="item.birth_time" placeholder="请选择出生日期" disabled disabledColor="#fff"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon> <u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item> </u-form-item>
</picker> </picker>
<picker mode="selector" :range="situationList" @change="changesituation" :data-index="index"> <picker mode="selector" :range="situationList" @change="changesituation" :data-index="index">
<u-form-item labelWidth="auto" label="就业情况" required prop="residents.name" borderBottom> <u-form-item labelWidth="auto" label="就业情况" required prop="family.situation" borderBottom>
<u--input :value="item.situation" placeholder="请选择就业情况" disabled disabledColor="#fff"></u--input> <u--input :value="item.situation" placeholder="请选择就业情况" disabled disabledColor="#fff"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon> <u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item> </u-form-item>
</picker> </picker>
<u-form-item labelWidth="auto" label="技能特长" required prop="residents.name" borderBottom> <u-form-item labelWidth="auto" label="技能特长" required prop="family" borderBottom>
<u--input v-model="item.skills" placeholder="请输入技能特长"></u--input> <u--input v-model="item.skills" placeholder="请输入技能特长"></u--input>
</u-form-item> </u-form-item>
<button type="primary" v-if="residents.family.length>1" class="delete" <button type="primary" v-if="residents.family.length>1" class="delete"
@ -28,7 +28,7 @@
<button type="primary" class="plus" @click="pushFamily">+</button> <button type="primary" class="plus" @click="pushFamily">+</button>
</block> </block>
<block value="婴幼儿信息"> <block value="婴幼儿信息">
<u-form-item labelWidth="auto" label="是否存在学生、婴幼儿" required prop="residents.child" borderBottom> <u-form-item labelWidth="auto" label="是否存在学生、婴幼儿" required prop="child" borderBottom>
<u-radio-group v-model="residents.child" style="margin: 16rpx;"> <u-radio-group v-model="residents.child" style="margin: 16rpx;">
<u-radio :customStyle="{marginRight: '16px'}" <u-radio :customStyle="{marginRight: '16px'}"
v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label" v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
@ -37,11 +37,11 @@
</u-radio-group> </u-radio-group>
</u-form-item> </u-form-item>
<block value="是" v-if="residents.child>0" v-for="(item,index) in residents.child_arr" :key="'child'+index"> <block value="是" v-if="residents.child>0" v-for="(item,index) in residents.child_arr" :key="'child'+index">
<u-form-item label="年龄" required prop="residents.child_arr.age" borderBottom> <u-form-item label="年龄" required prop="child_arr.age" borderBottom>
<u--input v-model="item.age" placeholder="请输入年龄" type="number"></u--input> <u--input v-model="item.age" placeholder="请输入年龄" type="number"></u--input>
</u-form-item> </u-form-item>
<block v-if="item.age<4"> <block v-if="item.age<4">
<u-form-item labelWidth="auto" label="喂养方式" required prop="residents.child" borderBottom> <u-form-item labelWidth="auto" label="喂养方式" borderBottom>
<u-radio-group v-model="item.wyfs" style="margin: 16rpx;"> <u-radio-group v-model="item.wyfs" style="margin: 16rpx;">
<u-radio :customStyle="{marginRight: '16px'}" <u-radio :customStyle="{marginRight: '16px'}"
v-for="(item, index) in [{value:1,label:'母乳'},{value:0,label:'奶粉'}]" :key="index" :label="item.label" v-for="(item, index) in [{value:1,label:'母乳'},{value:0,label:'奶粉'}]" :key="index" :label="item.label"
@ -51,10 +51,10 @@
</u-form-item> </u-form-item>
</block> </block>
<block v-else> <block v-else>
<u-form-item label="年级" required prop="residents.child_arr.age" borderBottom> <u-form-item label="年级" borderBottom>
<u--input v-model="item.grade" placeholder="请输入年级"></u--input> <u--input v-model="item.grade" placeholder="请输入年级"></u--input>
</u-form-item> </u-form-item>
<u-form-item labelWidth="auto" label="是否补课" required prop="residents.child" borderBottom> <u-form-item labelWidth="auto" label="是否补课" borderBottom>
<u-radio-group v-model="item.is_lesson" style="margin: 16rpx;"> <u-radio-group v-model="item.is_lesson" style="margin: 16rpx;">
<u-radio :customStyle="{marginRight: '16px'}" <u-radio :customStyle="{marginRight: '16px'}"
v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label" v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
@ -62,15 +62,14 @@
</u-radio> </u-radio>
</u-radio-group> </u-radio-group>
</u-form-item> </u-form-item>
<u-form-item v-if="item.is_lesson>0" label-width="auto" labelPosition="top" label="补课内容" prop="residents.child_arr.age" <u-form-item v-if="item.is_lesson>0" label-width="auto" labelPosition="top" label="补课内容" borderBottom>
borderBottom>
<u--textarea v-model="item.lessons" autoHeight placeholder="请输入需要的课程" border="surround" <u--textarea v-model="item.lessons" autoHeight placeholder="请输入需要的课程" border="surround"
count></u--textarea> count></u--textarea>
</u-form-item> </u-form-item>
<u-form-item label-width="auto" labelPosition="top" label="备注" prop="residents.child_arr.age" borderBottom>
<u--textarea v-model="item.notes" autoHeight placeholder="请输入备注" border="surround" count></u--textarea>
</u-form-item>
</block> </block>
<u-form-item label-width="auto" labelPosition="top" label="备注" borderBottom>
<u--textarea v-model="item.notes" autoHeight placeholder="请输入备注" border="surround" count></u--textarea>
</u-form-item>
<button type="primary" v-if="residents.child_arr.length>1" class="delete" <button type="primary" v-if="residents.child_arr.length>1" class="delete"
@click="removeChildArr(index)">删除以上信息</button> @click="removeChildArr(index)">删除以上信息</button>
</block> </block>
@ -85,7 +84,7 @@
export default { export default {
data() { data() {
return { return {
situationList: ['公务员','国企事业单位','民营企业','自由职业','其他'], situationList: ['公务员', '国企事业单位', '民营企业', '自由职业', '其他'],
// //
residents: { residents: {
family: [{ family: [{
@ -107,29 +106,64 @@
], ],
}, },
rules: { rules: {
family: {
validator: (rule, value, callback ) => {
if (Array.isArray(value) && value.length > 0) {
for (let i = 0; i < value.length; i++) {
const item = value[i];
for (const key in item) {
//
if (!item[key]) {
callback(new Error('以上四项基本信息必填'));
return;
}
}
}
//
callback();
} else {
//
callback(new Error('数组不能为空'));
}
},
trigger: ['change', 'blur']
},
child: {
validator: (rule, value, callback )=>{
typeof value==='number'?callback():callback('不能为空')
},
trigger: ['change', 'blur']
},
} }
} }
}, },
methods: { methods: {
validate() {
return new Promise((resolve, reject) => {
this.$refs.residentsForm.validate().then(res => {
if (res) resolve(true);
else reject(false);
})
})
},
// //
changebirth_time(e){ changebirth_time(e) {
let index = e.currentTarget.dataset.index; let index = e.currentTarget.dataset.index;
this.residents.family[index].birth_time = e.detail.value; this.residents.family[index].birth_time = e.detail.value;
}, },
// //
changesituation(e){ changesituation(e) {
let index = e.currentTarget.dataset.index; let index = e.currentTarget.dataset.index;
this.residents.family[index].situation = this.situationList[e.detail.value]; this.residents.family[index].situation = this.situationList[e.detail.value];
}, },
// //
pushFamily() { pushFamily() {
this.residents.family.push({ this.residents.family.push({
name: '', name: '',
birth_time: '', birth_time: '',
situation: '', // situation: '', //
skills: '', // skills: '', //
}) })
}, },
// //
removeFamily(index) { removeFamily(index) {
@ -146,13 +180,13 @@
// //
pushChildArr() { pushChildArr() {
this.residents.child_arr.push({ this.residents.child_arr.push({
age: '', age: '',
feeding: '', // feeding: '', //
grade: '', // grade: '', //
is_lesson: '', // is_lesson: '', //
lessons: '', // lessons: '', //
notes: '' // notes: '' //
}) })
}, },
// //
removeChildArr(index) { removeChildArr(index) {
@ -166,6 +200,7 @@
} }
}) })
}, },
}, },
} }
</script> </script>

View File

@ -1,7 +1,7 @@
<template> <template>
<view class=""> <view class="">
<view class="card"> <view class="card">
<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm"> <u--form labelPosition="left" :model="formData" :rules="rules" ref="archives">
<view class="item"> <view class="item">
<view class="title">基本信息</view> <view class="title">基本信息</view>
<u-form-item labelWidth="auto" label="户主姓名" required prop="name" borderBottom> <u-form-item labelWidth="auto" label="户主姓名" required prop="name" borderBottom>
@ -31,7 +31,7 @@
<u-form-item labelWidth="auto" label="详细地址" required prop="address" borderBottom> <u-form-item labelWidth="auto" label="详细地址" required prop="address" borderBottom>
<u--input v-model="formData.address" placeholder="请输入详细地址"></u--input> <u--input v-model="formData.address" placeholder="请输入详细地址"></u--input>
</u-form-item> </u-form-item>
<u-form-item labelWidth="auto" label="汽车是否能到家" required prop="residents.infant" borderBottom> <u-form-item labelWidth="auto" label="汽车是否能到家" required prop="highway" borderBottom>
<u-radio-group v-model="formData.highway" style="margin: 16rpx;"> <u-radio-group v-model="formData.highway" style="margin: 16rpx;">
<u-radio :customStyle="{marginRight: '16px'}" <u-radio :customStyle="{marginRight: '16px'}"
v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label" v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
@ -40,7 +40,7 @@
</u-radio-group> </u-radio-group>
</u-form-item> </u-form-item>
<block value="智能手机"> <block value="智能手机">
<u-form-item labelWidth="auto" label="是否使用智能手机" required prop="formData.infant" borderBottom> <u-form-item labelWidth="auto" label="是否使用智能手机" required prop="smart_phone" borderBottom>
<u-radio-group v-model="formData.smart_phone" style="margin: 16rpx;"> <u-radio-group v-model="formData.smart_phone" style="margin: 16rpx;">
<u-radio :customStyle="{marginRight: '16px'}" <u-radio :customStyle="{marginRight: '16px'}"
v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label" v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
@ -49,7 +49,7 @@
</u-radio-group> </u-radio-group>
</u-form-item> </u-form-item>
<block v-if="formData.smart_phone>0"> <block v-if="formData.smart_phone>0">
<u-form-item labelWidth="auto" label="微信号" required prop="formData.infantList.age" borderBottom> <u-form-item labelWidth="auto" label="微信号" required borderBottom>
<u--input v-model="formData.wechat" placeholder="请输入微信号"></u--input> <u--input v-model="formData.wechat" placeholder="请输入微信号"></u--input>
</u-form-item> </u-form-item>
</block> </block>
@ -110,12 +110,36 @@
message: '请选择男或女', message: '请选择男或女',
trigger: ['blur', 'change'] trigger: ['blur', 'change']
}, },
age: {
type: 'number',
required: true,
message: '请输入年龄',
trigger: ['blur', 'change']
},
name: { name: {
type: 'string', type: 'string',
required: true, required: true,
message: '姓名不能为空', message: '姓名不能为空',
trigger: ['change', 'blur'] trigger: ['change', 'blur']
}, },
address: {
type: 'string',
required: true,
message: '地址不能为空',
trigger: ['change', 'blur']
},
highway: {
validator: (rule, value, callback )=>{
typeof value==='number'?callback():callback('不能为空')
},
trigger: ['change', 'blur']
},
smart_phone: {
validator: (rule, value, callback )=>{
typeof value==='number'?callback():callback('不能为空')
},
trigger: ['change', 'blur']
},
}, },
} }
}, },
@ -124,21 +148,34 @@
methods: { methods: {
// //
async addArchives() { async addArchives() {
console.log(await this.$refs.districtSelectorRef.validate()); Toast('开发中')
this.$refs.uForm.validate().then(async (e) => { let flag = true;
// flag = await this.$refs.districtSelectorRef.validate();
// if(flag) flag = await this.$refs.residentsRef.validate();
if(flag) flag = await this.$refs.breedingRef.validate();
if(flag) this.$refs.archives.validate().then(async (e) => {
if (e) { if (e) {
// uni.showLoading() uni.showLoading()
// let res = await informationAdd(this.formData); let districtForm = {
// uni.hideLoading() area_id:this.$refs.districtSelectorRef.formData.area,
// uni.showToast({ street_id:this.$refs.districtSelectorRef.formData.street,
// icon: "none", village_id:this.$refs.districtSelectorRef.formData.village,
// title: "", brigade_id:this.$refs.districtSelectorRef.formData.brigade,
// success: () => { }
// setTimeout(() => { let res = await informationAdd({
// uni.navigateBack() ...this.formData,
// }, 1000) ...districtForm
// } });
// }) uni.hideLoading()
uni.showToast({
icon: "none",
title: "添加成功",
success: () => {
setTimeout(() => {
uni.navigateBack()
}, 1000)
}
})
} }
}) })