公司的文件设置介绍是这样
而今天我的需求是继昨天的点击按钮后，弹出一个窗口填写信息更改成点击按钮后跳转到一个填写信息的页面中去.
那这一个需求，我首先就没有思路了，因为之前的新增/删除/查看/修改等功能都是在左侧菜单栏中进行添加的
🆗解决思路如下：
第一步找到路由的文件，添加跳转的路由页面
首先先百度一下vue 路由的基础概念
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转；
首先我们来学习三个单词（route，routes，router）：
route：首先它是个单数，译为路由，即我们可以理解为单个路由或者某一个路由；
routes：它是个复数，表示多个的集合才能为复数；即我们可以理解为多个路由的集合，JS中表示多种不同状态的集合的形式只有数组和对象两种，事实上官方定义routes是一个数组；所以我们记住了，routes表示多个数组的集合；
router：译为路由器，上面都是路由，这个是路由器，我们可以理解为一个容器包含上述两个或者说它是一个管理者，负责管理上述两个；举个常见的场景的例子：当用户在页面上点击按钮的时候，这个时候router就会去routes中去查找route，就是说路由器会去路由集合中找对应的路由；
搜索关键词可以有这么多功能，但是我只需要跳转这一个功能
跳转详解：https://www.jb51.net/article/160401.htm
在我的代码里，路由就写在这里面
//path是要写你要跳转的文件名
//component是跳转的文件名的路径
//关键名
{
path: '/farmers-add-or-update',
component: _import('modules/pesticide/farmers-add-or-update'),
name: 'saveFamers',
meta: { title: '新增农户' }
},然后您点击页面的增改查这三个功能都需要跳转到这个页面，所以您需要在所有的涉及这四个功能的页面都添加这个路由。
farmers.vue添加这个路由的代码如下
<script>
export default {
methods: {
// 查看详情
showDetails (id) {
// this.addOrUpdateVisible = true
//下一次加载dom时调用 因为这个页面没有弹出窗口 不存在
// this.$nextTick(() => {
// this.$refs.addOrUpdate.init(id, true)
// })
this.$router.push({
name: 'saveFamers',
params: {
id: id,
disable: true
}
})
},
// 新增 / 修改
addOrUpdateHandle (id) {
// this.$router.push({
// name: 'saveFamers'
// })
// this.addOrUpdateVisible = true
// this.$nextTick(() => {
// this.$refs.addOrUpdate.init(id)
// })
this.$router.push({
name: 'saveFamers',
params: {
id: id,
disable: false
}
})
// this.addOrUpdateVisible = true
// this.$nextTick(() => {
// this.$refs.addOrUpdate.init(id)
// })
},
}
}
</script>
然后写好之后发现可以跳转，但是跳转的是一片空白。为什么呢？
因为跳转页面最外侧标签是用<el-dialog>包裹起来的,这个标签就是弹出框的意思,所以这时候我就需要把这个标签给注释掉
而且,我得出发这个路由,所以在farmers-add-or-update.vue中得添加一个生命周期钩子函数.
首先在这个文件夹里的HTML部分，可见我们把<el-dialog>标签给注释掉了
<template>
<!-- <el-dialog
:title="!dataForm.id ? '新增' : !disabled ? '修改' : '查看'"
:close-on-click-modal="false"
:visible.sync="visible"
> -->
<el-form
:model="dataForm"
:rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmit()"
label-width="150px"
style="margin-top: 20px"
>
<el-row>
<el-col :span="5">
<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-row>
<el-row>
<el-col :span="3"
><el-form-item label="农户类型" prop="farmerType">
<el-dict code="FARMER_TYPE" v-model="dataForm.farmerType"></el-dict>
<!-- <el-input v-model="dataForm.farmerType" :disabled="disabled" placeholder="农户类型"></el-input> -->
</el-form-item>
</el-col>
<el-col :span="3">
<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-row>
<el-row>
<el-col :span="3">
<el-form-item label="性别" prop="farmerSex">
<!-- <el-input
v-model="dataForm.farmerSex"
:disabled="disabled"
placeholder="户主性别"
></el-input> -->
<el-dict code="SEX" v-model="dataForm.farmerSex"></el-dict>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label="年份">
<el-date-picker
type="year"
placeholder="选择日期"
v-model="dataForm.year"
style="width: 100%"
value-format="yyyy"
></el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="3">
<el-form-item label="家庭人口" prop="farmerMember">
<!-- <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="20"
label="家庭人口"
></el-input-number>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label="劳动力" prop="farmerLabour">
<!-- <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="20"
label="劳动力"
></el-input-number>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="3">
<el-form-item label="总耕地面积（亩）" prop="cultivatedArea">
<!-- <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="总耕地面积"
:precision="2"
></el-input-number>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label="总种植面积（亩次）" prop="plantingArea">
<!-- <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="总种植面积"
:precision="2"
></el-input-number>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="3">
<el-form-item label="家庭经济状态" prop="economicsState">
<el-dict
code="ECONOMY_TYPE"
v-model="dataForm.economicsState"
></el-dict>
</el-form-item>
</el-col>
<el-col :span="4">
<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>
<el-row>
<el-col :span="3">
<el-form-item label="文化程度" prop="farmerEducation">
<el-dict
code="EDUCATION_TYPE"
v-model="dataForm.farmerEducation"
></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="3"
><el-form-item label="年龄" prop="farmerAge">
<!-- <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-form-item label="联系地址" prop="farmerArr">
<!-- <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: 35%"
>
</el-input>
</el-form-item>
<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>
<el-button style="margin-left: 150px" @click="$router.back(-1)"
>取消</el-button
>
<el-button v-if="!disabled" type="primary" @click="dataFormSubmit()"
>确定</el-button
>
</el-form>
<!-- <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>
在js的部分添加上
mounted () {
let id = this.$route.params.id
let disable = this.$route.params.disable
this.init(id, disable)
this.getAllCrop()
},在element的表格组件中
<el-table-column prop="date" label="作物种类" sortable width="180">
</el-table-column>如果添加了sortable这个属性，则会出现这种小箭头,把这个属性去掉就好。
这是设计图
作物种植表的第一栏是在字典管理里添加的作物，使用循环进行添加。
html部分
<el-table-column prop="cropSpecies" label="作物种类" width="180">
</el-table-column>因为这个表也有后端参数，所以，把它加到了dataForm表单下面
data () {
return {
cropList: [],
disabled: false,
visible: true,
dataForm: {
id: 0,
farmerNo: '',
farmerType: '',
year: '',
farmerName: '',
farmerSex: '',
farmerAge: '',
farmerEducation: '',
farmerMember: '',
farmerLabour: '',
cultivatedArea: '',
plantingArea: '',
economicsState: '',
farmerArr: '',
farmerPhone: '',
},
plant:
{
id: "",
cropSpecies: "",
plantingArea: "",
cultivationType: "",
sowingDate: "",
applicatorMachinery: "",
controlTimes: "",
farmerId: ""
},
...
}在methods方法里
getAllCrop () {
this.dataForm = {}
this.cropList = []
let dictList = sessionStorage.getItem("dictList")
dictList = JSON.parse(dictList)
// console.log(dictList);
this.dataForm.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].name
this.dataForm.plants.push(JSON.parse(JSON.stringify(this.plant)))
}
// console.log(this.dataForm);
// this.dataForm.plants.push(this.plant)
}
// console.log(this.cropList);
console.log(this.dataForm);
this.init(this.id, this.disable)
},这里为什么要加JSON
farmers.vue代码
<template>
<div class="mod-farmers">
<el-form
:inline="true"
:model="searchForm"
@keyup.enter.native="getDataList()"
>
<el-form-item>
<el-input
v-model="searchForm.name"
placeholder="参数名"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">查询</el-button>
<!-- v-if="isAuth('pesticide:farmers:save')" -->
<el-button
v-if="isAuth('pesticide:farmers:save')"
type="primary"
@click="addOrUpdateHandle()"
>新增</el-button
>
<el-button
v-if="isAuth('pesticide:farmers:delete')"
type="danger"
@click="deleteHandle()"
:disabled="dataListSelections.length <= 0"
>批量删除</el-button
>
</el-form-item>
</el-form>
<el-table
:data="dataList"
border
@selection-change="selectionChangeHandle"
style="width: 100%"
>
<el-table-column
type="selection"
header-align="center"
align="center"
width="50"
>
</el-table-column>
<el-table-column
prop="farmerNo"
header-align="center"
align="center"
label="户主编号"
>
</el-table-column>
<el-table-column
prop="farmerType"
header-align="center"
align="center"
label="农户类型"
>
<template slot-scope="scope">
<span>{{ transDict('FARMER_TYPE', scope.row.farmerType) }}</span>
</template>
</el-table-column>
<el-table-column
prop="year"
header-align="center"
align="center"
label="年份"
>
</el-table-column>
<el-table-column
prop="farmerName"
header-align="center"
align="center"
label="户主名称"
>
</el-table-column>
<el-table-column
prop="farmerSex"
header-align="center"
align="center"
label="户主性别"
>
</el-table-column>
<el-table-column
prop="farmerAge"
header-align="center"
align="center"
label="年龄"
>
</el-table-column>
<el-table-column
prop="farmerEducation"
header-align="center"
align="center"
label="文化程度"
>
<template slot-scope="scope">
<span>{{
transDict('EDUCATION_TYPE', scope.row.farmerEducation)
}}</span>
</template>
</el-table-column>
<el-table-column
prop="farmerMember"
header-align="center"
align="center"
label="家庭人口"
>
</el-table-column>
<el-table-column
prop="farmerLabour"
header-align="center"
align="center"
label="劳动力"
>
</el-table-column>
<el-table-column
prop="cultivatedArea"
header-align="center"
align="center"
label="总耕地面积（亩）"
>
</el-table-column>
<el-table-column
prop="plantingArea"
header-align="center"
align="center"
label="总种植面积（亩次）"
>
</el-table-column>
<el-table-column
prop="economicsState"
header-align="center"
align="center"
label="家庭经济状态"
>
<template slot-scope="scope">
<span>{{ transDict('ECONOMY_TYPE', scope.row.economicsState) }}</span>
</template>
</el-table-column>
<el-table-column
prop="farmerArr"
header-align="center"
align="center"
label="联系地址"
>
</el-table-column>
<el-table-column
prop="farmerPhone"
header-align="center"
align="center"
label="电话"
>
</el-table-column>
<el-table-column
fixed="right"
header-align="center"
align="center"
width="150"
label="操作"
>
<template slot-scope="scope">
<el-button
v-if="isAuth('pesticide:farmers:info')"
type="text"
size="small"
@click="showDetails(scope.row.id)"
>查看</el-button
>
<el-button
v-if="isAuth('pesticide:farmers:update')"
type="text"
size="small"
@click="addOrUpdateHandle(scope.row.id)"
>修改
</el-button>
<el-button
v-if="isAuth('pesticide:farmers:delete')"
type="text"
size="small"
@click="deleteHandle(scope.row.id)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper"
>
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update
v-if="addOrUpdateVisible"
ref="addOrUpdate"
@refreshDataList="getDataList"
></add-or-update>
</div>
</template>
<script>
import AddOrUpdate from './farmers-add-or-update'
export default {
data () {
return {
searchForm: {
name: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListSelections: [],
addOrUpdateVisible: false
}
},
components: {
AddOrUpdate
},
activated () {
this.getDataList()
},
methods: {
// 获取数据列表
getDataList () {
this.$http({
url: '/pesticide/farmers/list',
method: 'get',
params: {
'page': this.pageIndex,
'limit': this.pageSize,
'name': this.searchForm.name
}
}).then(({ data }) => {
if (data && data.code === 0) {
this.dataList = data.page.records
this.totalPage = data.page.total
} else {
this.dataList = []
this.totalPage = 0
}
})
},
// 每页数
sizeChangeHandle (val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// 当前页
currentChangeHandle (val) {
this.pageIndex = val
this.getDataList()
},
// 多选
selectionChangeHandle (val) {
this.dataListSelections = val
},
// 查看详情
showDetails (id) {
// this.addOrUpdateVisible = true
//下一次加载dom时调用 因为这个页面没有弹出窗口 不存在
// this.$nextTick(() => {
// this.$refs.addOrUpdate.init(id, true)
// })
this.$router.push({
name: 'saveFamers',
params: {
id: id,
disable: true
}
})
},
// 新增 / 修改
addOrUpdateHandle (id) {
// this.$router.push({
// name: 'saveFamers'
// })
// this.addOrUpdateVisible = true
// this.$nextTick(() => {
// this.$refs.addOrUpdate.init(id)
// })
this.$router.push({
name: 'saveFamers',
params: {
id: id,
disable: false
}
})
// this.addOrUpdateVisible = true
// this.$nextTick(() => {
// this.$refs.addOrUpdate.init(id)
// })
},
// 删除
deleteHandle (id) {
let ids = id ? [id] : this.dataListSelections.map(item => {
return item.id
})
this.$confirm('确定对所选项进行[删除]操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http({
url: '/pesticide/farmers/delete',
method: 'post',
data: ids
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500
})
this.getDataList()
}
})
}).catch(() => {
})
}
}
}
</script>
farmer-add-or-update.vue
<template>
<!-- <el-dialog
:title="!dataForm.id ? '新增' : !disabled ? '修改' : '查看'"
:close-on-click-modal="false"
:visible.sync="visible"
> -->
<div class="fullS">
<el-form
:model="dataForm"
:rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmit()"
label-width="150px"
style="margin-top: 20px"
>
<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">
<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="1">
<el-form-item label="性别" prop="farmerSex">
<!-- <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="年份">
<el-date-picker
type="year"
placeholder="选择日期"
v-model="dataForm.year"
style="width: 100%"
value-format="yyyy"
:disabled="disabled"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="家庭人口" prop="farmerMember">
<!-- <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="20"
label="家庭人口"
></el-input-number>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="劳动力" prop="farmerLabour">
<!-- <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="20"
label="劳动力"
></el-input-number>
</el-form-item>
</el-col>
<el-col :span="1"
><el-form-item label="年龄" prop="farmerAge">
<!-- <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">
<!-- <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="总耕地面积"
:precision="2"
></el-input-number>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="总种植面积（亩次）" prop="plantingArea">
<!-- <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="总种植面积"
:precision="2"
></el-input-number>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="文化程度" prop="farmerEducation">
<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="3">
<el-form-item label="家庭经济状态" prop="economicsState">
<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="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>
<el-row> </el-row>
<el-form-item label="联系地址" prop="farmerArr">
<!-- <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: 35%"
:disabled="disabled"
>
</el-input>
</el-form-item>
</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: 70%; margin-left: 20%"
border
:default-sort="{ prop: 'date', order: 'descending' }"
>
<!-- id: "",
cropSpecies: "",
plantingArea: "",
cultivationType: "",
sowingDate: "",
applicatorMachinery: "",
controlTimes: "",
farmerId: " -->
<el-table-column
align="center"
prop="cropSpecies"
label="作物种类"
width="180"
>
<template slot-scope="scope">
<!-- CROP_TYPE -->
<el-tag type="danger">{{
transDict('CROP_TYPE', scope.row.cropSpecies)
}}</el-tag>
</template>
</el-table-column>
<el-table-column
prop="plantingArea"
label="种植面积（亩）"
width="220"
>
<template slot-scope="scope">
<!-- <el-input
v-model="scope.row.plantingArea"
:disabled="disabled"
placeholder=""
></el-input> -->
<el-input-number
:disabled="disabled"
v-model="scope.row.plantingArea"
:min="0"
:max="10000000"
label="总耕地面积"
:precision="2"
></el-input-number>
</template>
</el-table-column>
<el-table-column prop="sowingDate" label="播种日期" width="180">
<template slot-scope="scope">
<!-- <el-input
v-model="scope.row.sowingDate"
:disabled="disabled"
placeholder=""
></el-input> -->
<el-date-picker
type="date"
placeholder="选择日期"
v-model="scope.row.sowingDate"
style="width: 100%"
value-format="yyyy"
:disabled="disabled"
></el-date-picker>
</template>
</el-table-column>
<el-table-column
prop="cultivationType"
label="种植类型(直播/移栽)"
width="180"
>
<template slot-scope="scope">
<el-input
v-model="scope.row.cultivationType"
:disabled="disabled"
placeholder=""
:maxlength="2"
></el-input>
</template>
</el-table-column>
<el-table-column
prop="applicatorMachinery"
label="施药药械"
width="180"
>
<template slot-scope="scope">
<el-input
v-model="scope.row.applicatorMachinery"
:disabled="disabled"
:maxlength="20"
placeholder=""
></el-input>
</template>
</el-table-column>
<el-table-column prop="controlTimes" label="施药次数" width="100">
<template slot-scope="scope">
<el-input
v-model="scope.row.controlTimes"
:disabled="disabled"
placeholder=""
:maxlength="10000000"
></el-input>
</template>
</el-table-column>
</el-table>
</div>
<div style="position: fixed; top: 500px; white-space: norap">
<el-button type="danger" @click="$router.back(-1)"
>不保存并返回</el-button
>
<el-button
v-if="!disabled"
type="success"
@click="
dataFormSubmit()
$router.back(-1)
"
>保存并返回</el-button
>
<el-button v-if="!disabled" type="primary" @click="dataFormSubmit()"
>保存</el-button
>
</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: '',
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: [
{ required: false, validator: checkPhone, trigger: ['blur', 'change'] }
]
},
id: '',
disable: ""
}
},
mounted () {
this.id = this.$route.params.id
this.disable = this.$route.params.disable
this.getAllCrop()
},
methods: {
getAllCrop () {
// this.dataForm = {}
this.cropList = []
let dictList = sessionStorage.getItem("dictList")
dictList = JSON.parse(dictList)
// console.log(dictList);
this.dataForm.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].value
this.dataForm.plants.push(JSON.parse(JSON.stringify(this.plant)))
}
// console.log(this.dataForm);
// this.dataForm.plants.push(this.plant)
}
// 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) {
this.dataForm = data.farmers
}
})
}
})
},
// 表单提交
dataFormSubmit () {
this.$refs['dataForm']
.validate((valid) => {
if (valid) {
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')
}
})
}
})
}
}
}
</script>
<style scoped>
.fullS {
/* background-color: azure; */
background: snow;
/* width: 100%; */
/* height: auto; */
}
</style>效果图
1107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
