在表格中获取数据
2021/9/24 23:15:47
本文主要是介绍在表格中获取数据，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
farmer.add.vue
<template>
<!-- <el-dialog
:title="!dataForm.id ? '新增' : !disabled ? '修改' : '查看'"
:close-on-click-modal="false"
:visible.sync="visible"
> -->
<div class="fullS">
<!-- @keyup.enter.native="dataFormSubmit()" -->
<el-form
:model="dataForm"
:rules="dataRule"
ref="dataForm"
label-width="150px"
style="margin-top: 20px"
>
<div>
<el-button
type="white"
@click="
$router.push({
name: 'pesticide-farmers',
})
"
>返回</el-button
>
<!-- <el-button
type="white"
@click="$router.push('/modules/pesticide/farmers')"
>返回</el-button
> -->
<!-- <el-button
v-if="!disabled"
type="primary"
@click="
dataFormSubmit()
$router.back(-1)
"
>保存并返回</el-button
> -->
<el-button v-if="!disabled" type="primary" @click="dataFormSubmit()"
>保存</el-button
>
</div>
<div>
<h2 style="margin-left: 45%">农户家庭基本情况</h2>
<el-row>
<el-col :span="7">
<el-form-item label="户主编号" prop="farmerNo">
<el-input
v-model="dataForm.farmerNo"
onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
:disabled="disabled"
:maxlength="15"
placeholder="户主编号"
></el-input> </el-form-item
></el-col>
<el-col :span="5"
><el-form-item
label="农户类型"
prop="farmerType"
:rules="[
{ required: true, message: '请选择农户类型', trigger: 'blur' },
]"
>
<el-dict
code="FARMER_TYPE"
v-model="dataForm.farmerType"
:disabled="disabled"
></el-dict>
<!-- <el-input v-model="dataForm.farmerType" :disabled="disabled" placeholder="农户类型"></el-input> -->
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item
label="户主名称"
prop="farmerName"
:rules="[
{ required: true, message: '请输入户主名称', trigger: 'blur' },
]"
>
<el-input
v-model="dataForm.farmerName"
:disabled="disabled"
:maxlength="10"
@keyup.native="
dataForm.farmerName = dataForm.farmerName.replace(
/[^\u4E00-\u9FA5]/g,
''
)
"
placeholder="户主名称"
></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item
label="性别"
prop="farmerSex"
:rules="[
{ required: true, message: '请选择性别', trigger: 'blur' },
]"
>
<!-- <el-input
v-model="dataForm.farmerSex"
:disabled="disabled"
placeholder="户主性别"
></el-input> -->
<el-dict
code="SEX"
v-model="dataForm.farmerSex"
:disabled="disabled"
></el-dict>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="7">
<el-form-item
label="年份"
prop="year"
:rules="[
{ required: true, message: '请选择年份', trigger: 'blur' },
]"
>
<el-date-picker
type="year"
placeholder="选择年份"
v-model="dataForm.year"
style="width: 100%"
format="yyyy"
value-format="yyyy"
:disabled="disabled"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item
label="家庭人口"
prop="farmerMember"
:rules="[
{ required: true, message: '请输入联系地址', trigger: 'blur' },
]"
>
<!-- <el-input
v-model="dataForm.farmerMember"
:disabled="disabled"
:maxlength="5"
placeholder="家庭人口"
></el-input> -->
<el-input-number
:disabled="disabled"
v-model="dataForm.farmerMember"
:min="0"
:max="50"
label="家庭人口"
></el-input-number>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item
label="劳动力"
prop="farmerLabour"
:rules="[
{ required: true, message: '请输入联系地址', trigger: 'blur' },
]"
>
<!-- <el-input
v-model="dataForm.farmerLabour"
:disabled="disabled"
:maxlength="5"
placeholder="劳动力"
></el-input> -->
<el-input-number
:disabled="disabled"
v-model="dataForm.farmerLabour"
:min="0"
:max="1000"
label="劳动力"
></el-input-number>
</el-form-item>
</el-col>
<el-col :span="1"
><el-form-item
label="年龄"
prop="farmerAge"
:rules="[
{ required: true, message: '请输入联系地址', trigger: 'blur' },
]"
>
<!-- <el-input
v-model="dataForm.farmerAge"
:disabled="disabled"
maxlength="3"
></el-input> -->
<el-input-number
:disabled="disabled"
v-model="dataForm.farmerAge"
:min="1"
:max="120"
label="年龄"
></el-input-number>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="7">
<el-form-item
label="总耕地面积（亩）"
prop="cultivatedArea"
:rules="[
{ required: true, message: '请输入用户名', trigger: 'blur' },
]"
>
<!-- <el-input
v-model="dataForm.cultivatedArea"
:disabled="disabled"
:maxlength="10"
placeholder="总耕地面积（亩）"
></el-input> -->
<el-input-number
:disabled="disabled"
v-model="dataForm.cultivatedArea"
:min="0"
:max="10000000"
label="总耕地面积"
></el-input-number>
</el-form-item>
</el-col>
<!-- :rules="[ -->
<!-- { required: true, message: '请输入用户名', trigger: 'blur' }, -->
<!-- ]" -->
<el-col :span="5">
<el-form-item
label="总种植面积（亩次）"
prop="plantingArea"
:rules="[
{ required: true, message: '请输入用户名', trigger: 'blur' },
]"
>
<!-- <el-input
v-model="dataForm.plantingArea"
:disabled="disabled"
:maxlength="10"
placeholder="总种植面积（亩次）"
></el-input> -->
<el-input-number
:disabled="disabled"
v-model="dataForm.plantingArea"
:min="0"
:max="10000000"
label="总种植面积"
></el-input-number>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item
label="文化程度"
prop="farmerEducation"
:rules="[
{ required: true, message: '请选择文化程度', trigger: 'blur' },
]"
>
<el-dict
code="EDUCATION_TYPE"
v-model="dataForm.farmerEducation"
:disabled="disabled"
></el-dict>
<!-- <el-select
v-model="dataForm.farmerEducation"
placeholder="请选择文化程度"
>
<el-option label="小学" value="a"></el-option>
<el-option label="初中" vaule="b"></el-option>
<el-option label="高中" value="c"></el-option>
<el-option label="大专" value="d"></el-option>
<el-option label="本科" value="e"></el-option>
<el-option label="硕士" value="f"></el-option>
<el-option label="博士" value="g"></el-option>
</el-select> -->
<!-- <el-input v-model="dataForm.farmerEducation" :disabled="disabled" placeholder="文化程度"></el-input> -->
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item
label="家庭经济状态"
prop="economicsState"
:rules="[
{
required: true,
message: '请选择家庭经济状态',
trigger: 'blur',
},
]"
>
<el-dict
code="ECONOMY_TYPE"
v-model="dataForm.economicsState"
:disabled="disabled"
></el-dict>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="7">
<el-form-item
label="联系地址"
prop="farmerArr"
:rules="[
{ required: true, message: '请输入联系地址', trigger: 'blur' },
]"
>
<!-- <el-input
v-model="dataForm.farmerArr"
:disabled="disabled"
placeholder="联系地址"
:maxlength="50"
></el-input> -->
<el-input
type="textarea"
:rows="5"
placeholder="请输入地址"
v-model="dataForm.farmerArr"
maxlength="150"
style="width: 110%"
:disabled="disabled"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="4.5">
<el-form-item label="电话" prop="farmerPhone">
<el-input
v-model.trim="dataForm.farmerPhone"
maxlength="11"
:disabled="disabled"
placeholder="电话"
></el-input>
<!-- <el-input
v-model="dataForm.farmerPhone"
:disabled="disabled"
placeholder="电话"
></el-input> -->
</el-form-item>
</el-col>
</el-row>
</div>
<!-- <table
border="1"
style="
position: absolute;
right: 50px;
top: 20px;
font-size: 25px;
"
>
<tr>
<th>作物种类</th>
<th>种植面积（亩）</th>
<th>栽培类型（直播/移栽）</th>
<th>播种日期（年月日）</th>
<th>施药机械</th>
<th>防治次数（次）</th>
</tr>
<tr v-for="item in cropList" :key="item.value">
<td style="text-align: center;font-size=5px;">{{ item.name }}</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table> -->
<div>
<h2 style="margin-left: 45%">作物种植情况表</h2>
<el-table
:data="dataForm.plants"
style="width: 95%; margin: 0 auto"
border
:default-sort="{ prop: 'date', order: 'descending' }"
>
<!-- id: "",
cropSpecies: "",
plantingArea: "",
cultivationType: "",
sowingDate: "",
applicatorMachinery: "",
controlTimes: "",
farmerId: " -->
<el-table-column align="center" type="index" width="50">
</el-table-column>
<el-table-column
align="center"
prop="cropName"
label="作物种类"
width="200"
>
<template slot-scope="scope">
<!-- CROP_TYPE -->
<el-tag type="success">{{
transCrop(scope.row.cropSpecies)
}}</el-tag>
</template>
<!-- <el-input
v-model="dataForm.cropName"
:disabled="idsabled"
placeholder="作物名"
></el-input> -->
</el-table-column>
<el-table-column
align="center"
prop="plantingArea"
label="种植面积（亩）"
width="330"
>
<template slot-scope="scope">
<!-- <el-input
v-model="scope.row.plantingArea"
:disabled="disabled"
placeholder=""
></el-input> -->
<el-input-number
:disabled="disabled"
v-model.trim="scope.row.plantingArea"
:min="0"
:max="10000000"
label="种植面积（亩）"
></el-input-number>
</template>
</el-table-column>
<el-table-column
prop="sowingDate"
align="center"
label="播种日期"
width="250"
>
<template slot-scope="scope">
<!-- <el-input
v-model="scope.row.sowingDate"
:disabled="disabled"
placeholder=""
></el-input> -->
<el-date-picker
type="datetime"
placeholder="播种日期"
v-model.trim="scope.row.sowingDate"
style="width: 100%"
:disabled="disabled"
format="MM-dd"
value-format="yyyy-MM-dd HH:mm:ss"
></el-date-picker>
</template>
</el-table-column>
<el-table-column
align="center"
prop="cultivationType"
label="种植类型(直播/移栽)"
width="280"
>
<template slot-scope="scope">
<!-- <el-select
v-model.trim="scope.row.cultivationType"
placeholder="请选择"
>
<el-option
v-for="item in cultivationTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select> -->
<el-select
v-model="scope.row.cultivationType"
placeholder="请选择"
clearable
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column
prop="applicatorMachinery"
label="施药药械"
align="center"
width="220"
>
<template slot-scope="scope">
<el-input
v-model.trim="scope.row.applicatorMachinery"
:disabled="disabled"
:maxlength="20"
placeholder=""
></el-input>
</template>
</el-table-column>
<el-table-column
prop="controlTimes"
align="center"
label="施药次数"
width="250"
>
<!-- <template slot-scope="scope">
<el-input
v-model="scope.row.controlTimes"
:disabled="disabled"
placeholder=""
:maxlength="2"
></el-input>
</template> -->
<template slot-scope="scope">
<!-- <el-input
v-model="scope.row.plantingArea"
:disabled="disabled"
placeholder=""
></el-input> -->
<el-input-number
:disabled="disabled"
v-model.trim="scope.row.controlTimes"
:min="0"
:max="99"
label="施药次数"
></el-input-number>
</template>
</el-table-column>
</el-table>
</div>
</el-form>
</div>
<!-- <span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button v-if="!disabled" type="primary" @click="dataFormSubmit()"
>确定</el-button
>
</span> -->
<!-- </el-dialog> -->
</template>
<script>
var checkPhone = (rule, value, callback) => {
if (value == '') {
callback()
}
if (!(/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/).test(value)) {
callback(new Error("格式不正确"))
} else {
callback()
}
}
// var checkAge = (rule, value, callback) => {
// if (value == '') {
// callback()
// }
// if (!(/^[1-9]\d?$|^1[01]\d$|^120$/).test(value)) {
// callback(new Error("年龄范围在1~120"))
// } else {
// callback()
// }
// }
export default {
data () {
return {
cropList: [],
disabled: false,
visible: true,
dataForm: {
id: 0,
farmerNo: '',
farmerType: '',
year: '',
farmerName: '',
farmerSex: '',
farmerAge: '30',
farmerEducation: '',
farmerMember: '',
farmerLabour: '',
cultivatedArea: '',
plantingArea: '',
economicsState: '',
farmerArr: '',
farmerPhone: '',
// plants: [],
// dataRule: {
// personName: [
// {required: true, message: '名称不能为空', trigger: ['blur', 'change']}
// ],
// buildingId: [
// {required: true, message: '危房名不能为空', trigger: ['blur', 'change']}
// ],
// age: [
// {required: true, message: '年龄名不能为空', trigger: ['blur', 'change']}
// ],
// typeId: [
// {required: true, message: '类型名不能为空', trigger: ['blur', 'change']}
// ],
// farmerPhone:[
// {required: false,validator:checkPhone, trigger: ['blur', 'change']}
// ]
// }
},
plant:
{
id: "",
cropSpecies: "",
plantingArea: "",
cultivationType: "",
sowingDate: "",
applicatorMachinery: "",
controlTimes: "",
farmerId: ""
},
dataRule: {
farmerName: [
{ maxLength: "5", message: '名称不能为空', trigger: 'blur' },
],
// farmerAge: [
// { required: true, message: '年龄不能为空' },
// // { type: 'number', message: '年龄必须为数字值' }, // 且不包括小数
// // { pattern: /^[1-9]\d?$|^1[01]\d$|^120$/, message: '范围在0-120', trigger: 'blur' }
// // { pattern: /^[1-9]*$/, message: '请输入正整数', trigger: 'blur' }, // 可以输入多位正整数
// { required: true, validator: checkAge, trigger: ['blur', 'change'] }
// ],
farmerPhone: [
{ validator: checkPhone, trigger: ['blur', 'change'] },
{ required: true, message: '电话不能为空' }
]
},
id: '',
disable: "",
options: [{
value: 1,
label: '直播'
}, {
value: 2,
label: '移栽'
}],
}
},
mounted () {
this.id = this.$route.params.id
this.disable = this.$route.params.disable
// this.getAllCrop()
// this.getPlant()
this.getDataList()
},
methods: {
transCrop (data) {
for (let i = 0; i < this.cropList.length; i++) {
if (data == this.cropList[i].id) {
return this.cropList[i].cropName
}
}
},
getDataList () {
let _this = this
this.$http({
url: '/pesticide/crop/queryAll',
method: 'get',
}).then(({ data }) => {
if (data && data.code === 0) {
_this.getAllCrop(data.list)
}
})
},
getAllCrop (dictList) {
// this.dataForm = {}
this.cropList = []
// console.log(dictList);
this.dataForm.plants = []
let plants = []
for (let i = 0; i < dictList.length; i++) {
//每一次循环都有一行数据
// const element = array[i];
// if (dictList[i].code == "CROP_TYPE") {
this.cropList.push(dictList[i])
this.plant.cropSpecies = dictList[i].id
plants.push(JSON.parse(JSON.stringify(this.plant)))
// }
// console.log(this.dataForm);
// this.dataForm.plants.push(this.plant)
}
let dataFormMy = JSON.parse(JSON.stringify(this.dataForm))
dataFormMy.plants = plants
this.dataForm = dataFormMy
// console.log(this.cropList);
// console.log(this.dataForm);
this.init(this.id, this.disable)
},
init (id, disabled) {
this.disabled = disabled
this.dataForm.id = id || ''
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
this.$http({
url: `/pesticide/farmers/info/${this.dataForm.id}`,
method: 'get'
}).then(({ data }) => {
if (data && data.code === 0) {
data.farmers.year = data.farmers.year.toString()
this.dataForm = data.farmers
}
})
}
})
},
// 表单提交
dataFormSubmit () {
this.$refs['dataForm']
.validate((valid) => {
if (valid) {
// console.log(valid);
let plants = this.dataForm.plants
// console.log(plants, 111);
// debugger
for (let i = 0; i < plants.length; i++) {
//对表格内要填的值做一个是否为空的判断
//如果表格中的每一行的参数有任意一个不为null或者“”
if (plants[i].applicatorMachinery != "" || !(plants[i].cultivationType == null || plants[i].cultivationType == "") || !(plants[i].sowingDate == null || plants[i].sowingDate == "") || plants[i].controlTimes != 0 || plants[i].plantingArea != 0) {
//就判断这一行是否都有数据 如果都有数据 则放行
if (plants[i].applicatorMachinery != "" && !(plants[i].cultivationType == null || plants[i].cultivationType == "") && !(plants[i].sowingDate == null || plants[i].sowingDate == "") && plants[i].controlTimes != 0 && plants[i].plantingArea != 0) {
} else {
//如果不是 {都有} 数据，就提示用户哪一行没有数据，并终止方法的执行，目的是校验不通过 就不提交表单
if (plants[i].applicatorMachinery == "" || plants[i].applicatorMachinery == null) {
this.$notify({
// title: `第${i + 1}行作物种类`,
title: `第${i + 1}行的施药药械未填`,
message: `<strong style='color:red'>${this.transDict('CROP_TYPE', plants[i].cropSpecies)}的施药药械未填</strong>`,
type: 'warning',
duration: 4500,
offset: 200,
dangerouslyUseHTMLString: true,
})
return
}
if (plants[i].plantingArea == 0 || plants[i].plantingArea == "" || plants[i].plantingArea == null) {
this.$notify({
// title: `第${i + 1}行作物种类`,
title: `第${i + 1}行的种植面积未填`,
message: `<strong style='color:red'>${this.transDict('CROP_TYPE', plants[i].cropSpecies)}的种植面积未填</strong>`,
type: 'warning',
duration: 4500,
offset: 200,
dangerouslyUseHTMLString: true,
})
return
}
if (plants[i].cultivationType == "" || plants[i].cultivationType == null) {
this.$notify({
title: `第${i + 1}行的播种类型未填`,
message: `<strong style='color:red'>${this.transDict('CROP_TYPE', plants[i].cropSpecies)}的播种类型未填</strong>`,
type: 'warning',
duration: 4500,
offset: 200,
dangerouslyUseHTMLString: true,
})
return
}
if (plants[i].sowingDate == "" || plants[i].sowingDate == null) {
this.$notify({
title: `第${i + 1}行的播种日期未填`,
message: `<strong style='color:red'>${this.transDict('CROP_TYPE', plants[i].cropSpecies)}的播种日期未填</strong>`,
type: 'warning',
duration: 4500,
offset: 200,
dangerouslyUseHTMLString: true,
})
return
}
if (plants[i].controlTimes == 0 || plants[i].controlTimes == "" || plants[i].controlTimes == null) {
this.$notify({
// title: `第${i + 1}行作物种类`,
title: `${i + 1}的施药次数未填`,
message: `<strong style='color:red'>${this.transDict('CROP_TYPE', plants[i].cropSpecies)}的施药次数未填</strong>`,
type: 'warning',
duration: 4500,
offset: 200,
dangerouslyUseHTMLString: true,
})
return
}
}
}
// if (plants[i].controlTimes != 0 || plants[i].plantingArea != 0) {
// if ((plants[i].controlTimes != 0 && plants[i].plantingArea == 0) || (plants[i].controlTimes == 0 && plants[i].plantingArea != 0)) {
// this.$notify({
// title: `第${i + 1}行`,
// message: '施药次数和种植面积不能为0 !',
// type: 'warning'
// })
// return
// }
// if (plants[i].applicatorMachinery == "" || plants[i].cultivationType == null || plants[i].sowingDate == null) {
// this.$notify({
// title: `第${i + 1}行`,
// message: '请填写数据',
// type: 'warning'
// })
// return
// }
// }
}
//对耕地面积里的值做判断
if (this.dataForm.cultivatedArea <= 0) {
//不行
this.$notify.info({
title: '提示',
message: '总耕地面积(亩)不能为0',
type: 'success'
});
return
}
//对种植面积里的值做判断
if (this.dataForm.plantingArea <= 0) {
this.$notify.info({
title: '提示',
message: '总种植面积(亩次)不能为0',
type: 'success'
});
return
}
this.$http({
url: `/pesticide/farmers/${!this.dataForm.id ? 'save' : 'update'}`,
method: 'post',
data: this.dataForm
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500
})
// this.visible = false
// this.$emit('refreshDataList')
// this.$router.back(-1)
this.$router.push({
name: 'pesticide-farmers'
})
}
})
}
})
}
}
}
</script>
<style scoped>
.fullS {
/* background-color: azure; */
/* background: black; */
/* width: 100%; */
/* height: auto; */
}
</style>
这篇关于在表格中获取数据的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-05-20测试人员都是画画大神，让我看看谁还不会用代码图？
- 2024-05-20年薪百万的程序员都在用的摸鱼方式……
- 2024-05-19永别了，微服务架构！
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES：转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发（ArkTS版）”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源，看这篇就够了
