新增表单校验
This commit is contained in:
parent
c99d4cdbde
commit
b6ea349217
@ -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);
|
||||||
})
|
})
|
||||||
|
@ -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>
|
</u-form-item>
|
||||||
<u-form-item labelWidth="auto" label="上市时间" required prop="" borderBottom>
|
</picker>
|
||||||
<u--input placeholder="请输入上市时间"></u--input>
|
<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>
|
</u-form-item>
|
||||||
<u-form-item labelWidth="auto" label="产量" required prop="" borderBottom>
|
</picker>
|
||||||
<u--input placeholder="请输入产量"></u--input>
|
<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="sex" borderBottom>
|
<u-form-item labelWidth="auto" label="是否生态种养殖" required prop="ecological_farming" borderBottom>
|
||||||
<u-radio-group v-model="formData.sex" style="margin: 16rpx;">
|
<u-radio-group v-model="item.ecological_farming" 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>
|
||||||
@click="removeBreedingList(index)">删除以上种养殖信息</button>
|
<u-radio-group v-model="item.expand_business_needs" style="margin: 16rpx;">
|
||||||
</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'}"
|
<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="demand" borderBottom>
|
||||||
<u--textarea autoHeight placeholder="请输入种养殖需求描述" border="surround" count></u--textarea>
|
<u--textarea v-model="item.demand" autoHeight placeholder="请输入种养殖需求描述" border="surround" count></u--textarea>
|
||||||
</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="policy_subsidies" borderBottom>
|
||||||
<u--textarea autoHeight placeholder="请输入政策补助" border="surround" count></u--textarea>
|
<u--textarea v-model="item.policy_subsidies" autoHeight placeholder="请输入政策补助" border="surround"
|
||||||
|
count></u--textarea>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
<button type="primary" v-if="formData.length>1" class="delete"
|
||||||
|
@click="removeBreedingList(index)">删除以上种养殖信息</button>
|
||||||
</u--form>
|
</u--form>
|
||||||
|
</block>
|
||||||
|
<button type="primary" class="plus" @click="pushBreedingList">+</button>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -125,26 +134,105 @@
|
|||||||
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": "" //政策补助
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 删除种养殖
|
// 删除种养殖
|
||||||
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -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>
|
</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--textarea v-model="item.notes" autoHeight placeholder="请输入备注" border="surround" count></u--textarea>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
</block>
|
|
||||||
<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,18 +106,53 @@
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
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];
|
||||||
},
|
},
|
||||||
@ -166,6 +200,7 @@
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -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)
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user