#修改了SampletreesAdd.vue

This commit is contained in:
slaughter 2020-04-22 14:47:36 +08:00
parent b791eb5cc8
commit 2e1dc93e41
1 changed files with 412 additions and 98 deletions

View File

@ -13,57 +13,254 @@
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<div class="from"> <div class="from">
<!-- 修改model--> <div class="title">
<el-form ref="form" :model="v" label-width="80px"> <p class="page page1">页面一</p>
<!-- 添加div v-for 添加click事件 copy--> <p class="page page2">页面二</p>
<div v-for="(v,i) in arr1" :key="i"> <p class="page page3">页面三</p>
<div class="copy" @click="copy">+</div> <p class="page page4">页面四</p>
<el-form-item label="小样方号"> <p class="page page5">页面五</p>
<!-- 修改v-model form为v--> </div>
<el-input v-model="v.smallkindside" clearable></el-input>
<el-form ref="form" :model="form" label-width="80px">
<div class="form1" v-show="statuss==1">
<el-form-item label="小样方号1">
<el-input v-model="form.smallkindside" clearable></el-input>
</el-form-item>
<el-form-item label="样方面积" class="itemplace">
<el-select v-model="value1" placeholder="请选择" class="areas">
<el-option v-for="item in areas" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="植物名称-中文">
<el-input v-model="form.chinesename" clearable></el-input>
</el-form-item>
<el-form-item label="植物名称-拉丁文">
<el-input v-model="form.latinname" clearable></el-input>
</el-form-item>
<el-form-item label="株数">
<el-input v-model="form.number" clearable></el-input>
</el-form-item>
<el-form-item label="高度">
<el-input v-model="form.hight" clearable></el-input>
</el-form-item>
<el-form-item label="盖度">
<el-input v-model="form.coverdegree" clearable></el-input>
</el-form-item>
<el-form-item label="冠幅">
<el-input v-model="form.canopy" clearable></el-input>
</el-form-item>
<el-form-item label="密度">
<el-input v-model="form.density" clearable></el-input>
</el-form-item>
<el-form-item label="总鲜重">
<el-input v-model="form.totalfreshweight" clearable></el-input>
</el-form-item>
<el-form-item label="样品鲜重">
<el-input v-model="form.freshweightofsample" clearable></el-input>
</el-form-item>
<el-form-item label="总干重">
<el-input v-model="form.totaldryweight" clearable></el-input>
</el-form-item>
<el-form-item label="样品干重">
<el-input v-model="form.dryweightofsample" clearable></el-input>
</el-form-item>
<el-form-item label="多度">
<el-input v-model="form.abundance" clearable></el-input>
</el-form-item> </el-form-item>
<el-form-item label="样方面积"> <el-form-item label="生物量">
<el-input v-model="v.area" clearable></el-input> <el-input v-model="form.biomass" clearable></el-input>
</el-form-item> </el-form-item>
<el-form-item label="植物名称-中文"> <el-form-item label="是否濒危" class="itemplace">
<el-input v-model="v.chinesename" clearable></el-input> <el-select v-model="value" placeholder="请选择" class="enf">
</el-form-item> <el-option v-for="item in enfor" :key="item.value" :label="item.label" :value="item.value"></el-option>
<el-form-item label="植物名称-拉丁文"> </el-select>
<el-input v-model="v.latinname" clearable></el-input> </el-form-item>
</el-form-item> <div class="next" @click="next1">下一页</div>
<el-form-item label="株数"> </div>
<el-input v-model="v.number" clearable></el-input> </el-form>
</el-form-item> <el-form ref="form" :model="form2" label-width="80px">
<el-form-item label="高度"> <div class="form2" v-show="statuss==2">
<el-input v-model="v.hight" clearable></el-input> <el-form-item label="小样方号2">
</el-form-item> <el-input v-model="form2.smallkindside" clearable></el-input>
<el-form-item label="盖度"> </el-form-item>
<el-input v-model="v.coverdegree" clearable></el-input> <el-form-item label="样方面积">
</el-form-item> <el-input v-model="form2.area" clearable></el-input>
<el-form-item label="冠幅"> </el-form-item>
<el-input v-model="v.canopy" clearable></el-input> <el-form-item label="植物名称-中文">
</el-form-item> <el-input v-model="form2.chinesename" clearable></el-input>
<el-form-item label="密度"> </el-form-item>
<el-input v-model="v.density" clearable></el-input> <el-form-item label="植物名称-拉丁文">
</el-form-item> <el-input v-model="form2.latinname" clearable></el-input>
<el-form-item label="总鲜重"> </el-form-item>
<el-input v-model="v.totalfreshweight" clearable></el-input> <el-form-item label="株数">
</el-form-item> <el-input v-model="form2.number" clearable></el-input>
<el-form-item label="样品鲜重"> </el-form-item>
<el-input v-model="v.freshweightofsample" clearable></el-input> <el-form-item label="高度">
</el-form-item> <el-input v-model="form2.hight" clearable></el-input>
<el-form-item label="总干重"> </el-form-item>
<el-input v-model="v.totaldryweight" clearable></el-input> <el-form-item label="盖度">
</el-form-item> <el-input v-model="form2.coverdegree" clearable></el-input>
<el-form-item label="样品干重"> </el-form-item>
<el-input v-model="v.dryweightofsample" clearable></el-input> <el-form-item label="冠幅">
</el-form-item> <el-input v-model="form2.canopy" clearable></el-input>
</div> </el-form-item>
<el-form-item label="密度">
<el-input v-model="form2.density" clearable></el-input>
</el-form-item>
<el-form-item label="总鲜重">
<el-input v-model="form2.totalfreshweight" clearable></el-input>
</el-form-item>
<el-form-item label="样品鲜重">
<el-input v-model="form2.freshweightofsample" clearable></el-input>
</el-form-item>
<el-form-item label="总干重">
<el-input v-model="form2.totaldryweight" clearable></el-input>
</el-form-item>
<el-form-item label="样品干重">
<el-input v-model="form2.dryweightofsample" clearable></el-input>
</el-form-item>
<div class="pre" @click="pre2">上一页</div>
<div class="next" @click="next2">下一页</div>
</div>
</el-form>
<el-form ref="form" :model="form3" label-width="80px">
<div class="form3" v-show="statuss==3">
<el-form-item label="小样方号3">
<el-input v-model="form3.smallkindside" clearable></el-input>
</el-form-item>
<el-form-item label="样方面积">
<el-input v-model="form3.area" clearable></el-input>
</el-form-item>
<el-form-item label="植物名称-中文">
<el-input v-model="form3.chinesename" clearable></el-input>
</el-form-item>
<el-form-item label="植物名称-拉丁文">
<el-input v-model="form3.latinname" clearable></el-input>
</el-form-item>
<el-form-item label="株数">
<el-input v-model="form3.number" clearable></el-input>
</el-form-item>
<el-form-item label="高度">
<el-input v-model="form3.hight" clearable></el-input>
</el-form-item>
<el-form-item label="盖度">
<el-input v-model="form3.coverdegree" clearable></el-input>
</el-form-item>
<el-form-item label="冠幅">
<el-input v-model="form3.canopy" clearable></el-input>
</el-form-item>
<el-form-item label="密度">
<el-input v-model="form3.density" clearable></el-input>
</el-form-item>
<el-form-item label="总鲜重">
<el-input v-model="form3.totalfreshweight" clearable></el-input>
</el-form-item>
<el-form-item label="样品鲜重">
<el-input v-model="form3.freshweightofsample" clearable></el-input>
</el-form-item>
<el-form-item label="总干重">
<el-input v-model="form3.totaldryweight" clearable></el-input>
</el-form-item>
<el-form-item label="样品干重">
<el-input v-model="form3.dryweightofsample" clearable></el-input>
</el-form-item>
<div class="pre" @click="pre3">上一页</div>
<div class="next" @click="next3">下一页</div>
</div>
</el-form>
<el-form ref="form" :model="form4" label-width="80px">
<div class="form4" v-show="statuss==4">
<el-form-item label="小样方号4">
<el-input v-model="form4.smallkindside" clearable></el-input>
</el-form-item>
<el-form-item label="样方面积">
<el-input v-model="form4.area" clearable></el-input>
</el-form-item>
<el-form-item label="植物名称-中文">
<el-input v-model="form4.chinesename" clearable></el-input>
</el-form-item>
<el-form-item label="植物名称-拉丁文">
<el-input v-model="form4.latinname" clearable></el-input>
</el-form-item>
<el-form-item label="株数">
<el-input v-model="form4.number" clearable></el-input>
</el-form-item>
<el-form-item label="高度">
<el-input v-model="form4.hight" clearable></el-input>
</el-form-item>
<el-form-item label="盖度">
<el-input v-model="form4.coverdegree" clearable></el-input>
</el-form-item>
<el-form-item label="冠幅">
<el-input v-model="form4.canopy" clearable></el-input>
</el-form-item>
<el-form-item label="密度">
<el-input v-model="form4.density" clearable></el-input>
</el-form-item>
<el-form-item label="总鲜重">
<el-input v-model="form4.totalfreshweight" clearable></el-input>
</el-form-item>
<el-form-item label="样品鲜重">
<el-input v-model="form4.freshweightofsample" clearable></el-input>
</el-form-item>
<el-form-item label="总干重">
<el-input v-model="form4.totaldryweight" clearable></el-input>
</el-form-item>
<el-form-item label="样品干重">
<el-input v-model="form4.dryweightofsample" clearable></el-input>
</el-form-item>
<div class="pre" @click="pre4">上一页</div>
<div class="next" @click="next4">下一页</div>
</div>
</el-form>
<el-form ref="form" :model="form5" label-width="80px">
<div class="form5" v-show="statuss==5">
<el-form-item label="小样方号5">
<el-input v-model="form5.smallkindside" clearable></el-input>
</el-form-item>
<el-form-item label="样方面积">
<el-input v-model="form5.area" clearable></el-input>
</el-form-item>
<el-form-item label="植物名称-中文">
<el-input v-model="form5.chinesename" clearable></el-input>
</el-form-item>
<el-form-item label="植物名称-拉丁文">
<el-input v-model="form5.latinname" clearable></el-input>
</el-form-item>
<el-form-item label="株数">
<el-input v-model="form5.number" clearable></el-input>
</el-form-item>
<el-form-item label="高度">
<el-input v-model="form5.hight" clearable></el-input>
</el-form-item>
<el-form-item label="盖度">
<el-input v-model="form5.coverdegree" clearable></el-input>
</el-form-item>
<el-form-item label="冠幅">
<el-input v-model="form5.canopy" clearable></el-input>
</el-form-item>
<el-form-item label="密度">
<el-input v-model="form5.density" clearable></el-input>
</el-form-item>
<el-form-item label="总鲜重">
<el-input v-model="form5.totalfreshweight" clearable></el-input>
</el-form-item>
<el-form-item label="样品鲜重">
<el-input v-model="form5.freshweightofsample" clearable></el-input>
</el-form-item>
<el-form-item label="总干重">
<el-input v-model="form5.totaldryweight" clearable></el-input>
</el-form-item>
<el-form-item label="样品干重">
<el-input v-model="form5.dryweightofsample" clearable></el-input>
</el-form-item>
<div class="pre" @click="pre5">上一页</div>
<el-form-item> <el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button> <el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button> <el-button>取消</el-button>
</el-form-item> </el-form-item>
</el-form> </div>
</el-form>
</div> </div>
</div> </div>
</div> </div>
@ -100,32 +297,106 @@ export default {
samplebushrichness: '', samplebushrichness: '',
samplebushdensity: '' samplebushdensity: ''
}, },
areas: [{
value: '选项1',
label: '111平方公里'
},
{
value: '选项2',
label: '222平方公里'
}],
value1: '',
enfor: [{
value: '选项1',
label: '是'
},
{
value: '选项2',
label: '否'
}],
value2: '',
form2: {
smallkindside: '',
chinesename: '',
latinname: '',
number: '',
hight: '',
coverdegree: '',
canopy: '',
density: '',
totalfreshweight: '',
freshweightofsample: '',
totaldryweight: '',
dryweightofsample: '',
area: '',
abundance: '',
biomass: '',
enforcement: '',
samplebushrichness: '',
samplebushdensity: ''
},
form3: {
smallkindside: '',
chinesename: '',
latinname: '',
number: '',
hight: '',
coverdegree: '',
canopy: '',
density: '',
totalfreshweight: '',
freshweightofsample: '',
totaldryweight: '',
dryweightofsample: '',
area: '',
abundance: '',
biomass: '',
enforcement: '',
samplebushrichness: '',
samplebushdensity: ''
},
form4: {
smallkindside: '',
chinesename: '',
latinname: '',
number: '',
hight: '',
coverdegree: '',
canopy: '',
density: '',
totalfreshweight: '',
freshweightofsample: '',
totaldryweight: '',
dryweightofsample: '',
area: '',
abundance: '',
biomass: '',
enforcement: '',
samplebushrichness: '',
samplebushdensity: ''
},
form5: {
smallkindside: '',
chinesename: '',
latinname: '',
number: '',
hight: '',
coverdegree: '',
canopy: '',
density: '',
totalfreshweight: '',
freshweightofsample: '',
totaldryweight: '',
dryweightofsample: '',
area: '',
abundance: '',
biomass: '',
enforcement: '',
samplebushrichness: '',
samplebushdensity: ''
},
quadratList: '', quadratList: '',
// arr1 statuss: 1
arr1: [
{
smallkindside: '',
chinesename: '',
latinname: '',
number: '',
hight1: '',
hight2: '',
hight3: '',
coverdegree: '',
canopy1: '',
canopy2: '',
canopy3: '',
density: '',
totalfreshweight: '',
freshweightofsample1: '',
freshweightofsample2: '',
freshweightofsample3: '',
totaldryweight: '',
dryweightofsample1: '',
dryweightofsample2: '',
dryweightofsample3: ''
}
]
} }
}, },
created () { created () {
@ -169,34 +440,38 @@ export default {
}).catch( }).catch(
) )
}, },
// copy() next1 () {
copy () { this.statuss = 2
console.log(this.arr1) },
this.arr1.push({ next2 () {
smallkindside: '', this.statuss = 3
chinesename: '', },
latinname: '', next3 () {
number: '', this.statuss = 4
hight1: '', },
hight2: '', next4 () {
hight3: '', this.statuss = 5
coverdegree: '', },
canopy1: '', pre2 () {
canopy2: '', this.statuss = 1
canopy3: '', },
density: '', pre3 () {
totalfreshweight: '', this.statuss = 2
freshweightofsample1: '', },
freshweightofsample2: '', pre4 () {
freshweightofsample3: '', this.statuss = 3
totaldryweight: '', },
dryweightofsample1: '', pre5 () {
dryweightofsample2: '', this.statuss = 4
dryweightofsample3: ''
})
} }
} }
} }
// var oDiv1 = document.getElementById('form1')
// var oDiv2 = document.getElementById('form2')
// function next () {
// oDiv1.style.display = 'none'
// oDiv2.style.display = 'block'
// }
</script> </script>
<style scoped> <style scoped>
@ -247,4 +522,43 @@ export default {
height: 16px; height: 16px;
font-size: 16px; font-size: 16px;
} }
.page {
width: 20%;
display: inline-block;
margin-bottom: 15px;
cursor: pointer;
}
.title {
border-bottom: 1px solid #99a9bf;
}
.next {
cursor: pointer;
display: inline-block;
padding: 10px;
background-color: rgb(64,158,255);
margin-top: 20px;
margin-bottom: 10px;
color: white;
font-size: 14px;
font-weight: bold;
}
.pre {
cursor: pointer;
display: inline-block;
padding: 10px;
background-color: rgb(64,158,255);
margin-right: 20px;
margin-top: 20px;
margin-bottom: 10px;
color: white;
font-size: 14px;
font-weight: bold;
border-radius: 3px;
}
.enf {
width: 100%;
}
.areas {
width: 100%;
}
</style> </style>