效果图
1.先把基础的表格先写出来
farmers-write
<template >
<el-dialog
:title="!dataForm.id ? '新增' : !disabled ? '修改' : '查看'"
:close-on-click-modal="false"
:visible.sync="visible"
width="70%"
>
<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="visible = false">返回</el-button> -->
<el-button @click="visible = false">返回</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: '',
taskId: '',//任务id
// 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()
window.onresize = () => {
return (() => {
this.setDialogWidth()
})()
}
},
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, taskId) {
this.disabled = disabled
this.dataForm.id = id || ''
this.dataForm.taskId = taskId
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}行${this.transCrop(plants[i].cropSpecies)}的施药药械未填`,
message: `<strong style='color:red'>请填写该行数据</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}行${this.transDict('CROP_TYPE', plants[i].cropSpecies)}的种植面积未填`,
message: `<strong style='color:red'>请填写该行数据</strong>`,
type: 'warning',
duration: 4500,
offset: 200,
dangerouslyUseHTMLString: true,
})
return
}
if (plants[i].cultivationType == "" || plants[i].cultivationType == null) {
this.$notify({
title: `第${i + 1}行${this.transDict('CROP_TYPE', plants[i].cropSpecies)}的播种类型未填`,
message: `<strong style='color:red'>请填写该行数据</strong>`,
type: 'warning',
duration: 4500,
offset: 200,
dangerouslyUseHTMLString: true,
})
return
}
if (plants[i].sowingDate == "" || plants[i].sowingDate == null) {
this.$notify({
title: `第${i + 1}行${this.transDict('CROP_TYPE', plants[i].cropSpecies)}的播种日期未填`,
message: `<strong style='color:red'>请填写该行数据</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}行${this.transDict('CROP_TYPE', plants[i].cropSpecies)}的播种日期未填`,
message: `<strong style='color:red'>请填写该行数据</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'
// })
this.visible = false
this.$emit('refreshDataList')
}
})
}
})
}
},
}
</script>
<style scoped>
.fullS {
/* background-color: azure; */
/* background: black; */
/* width: 100%; */
/* height: auto; */
width: 100%;
}
</style>list.vue
<template>
<div class="mod-work">
<el-form :inline="true" :model="searchForm">
<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>
<el-button
v-if="isAuth('task:info:save')"
type="primary"
@click="addOrUpdateHandle()"
>
新增
</el-button>
<el-button
v-if="isAuth('task:info:delete')"
type="danger"
@click="deleteHandle()"
:disabled="dataListSelections.length <= 0"
>
批量删除
</el-button>
</el-form-item>
</el-form>
<el-table
:data="dataList"
@selection-change="selectionChangeHandle"
border
style="width: 100%"
>
<el-table-column
type="selection"
header-align="center"
align="center"
width="50"
>
</el-table-column>
<!--<el-table-column
prop="id"
header-align="center"
align="left"
width="80"
label="ID"
>
</el-table-column>-->
<table-tree-column
prop="name"
header-align="center"
treeKey="id"
parentKey="pid"
width="200"
label="名称"
>
</table-tree-column>
<el-table-column
prop="year"
header-align="center"
align="center"
width="150"
label="年份"
>
</el-table-column>
<el-table-column
prop="startDate"
header-align="center"
align="center"
label="开始时间"
>
</el-table-column>
<el-table-column
prop="endDate"
header-align="center"
align="center"
label="截止时间"
>
</el-table-column>
<el-table-column
prop="reportOrg"
header-align="center"
align="center"
label="填写单位"
>
</el-table-column>
<el-table-column
prop=""
header-align="center"
align="center"
width="180"
label="填写状态"
>
<template slot-scope="scope">
<el-tag
v-if="scope.row.tableType && scope.row.value == null"
size="small"
>未填写</el-tag
>
<el-tag v-if="scope.row.tableType && scope.row.value" size="small"
>已填写</el-tag
>
</template>
</el-table-column>
<el-table-column
fixed="right"
header-align="center"
align="center"
width="150"
label="操作"
>
<template slot-scope="scope">
<el-button
v-if="scope.row.tableType && scope.row.value == null"
type="text"
size="small"
@click="writeHandle(scope.row.tableType, scope.row.pid)"
>
填写
</el-button>
<!-- <el-button
v-if="scope.row.tableType && scope.row.value"
type="text"
size="small"
@click="deleteHandle(scope.row.id)"
>
查看
</el-button> -->
<el-button
v-if="scope.row.tableType && scope.row.value != null"
type="text"
size="small"
@click="
showDetails(scope.row.id, scope.row.tableType, scope.row.pid)
"
>查看</el-button
>
<el-button
v-if="isAuth('task:info:update') && scope.row.tableType == null"
type="text"
size="small"
@click="addOrUpdateHandle(scope.row.id)"
>修改
</el-button>
<el-button
v-if="isAuth('task:info:delete') && scope.row.tableType == null"
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>
<!--农户二级菜单的填写弹窗-->
<farmer-write-update
v-if="farmerwriteupdateVisible"
ref="farmerWriteUpdate"
@refreshDataList="getDataList"
></farmer-write-update>
<!--农药二级菜单的填写弹窗-->
<useinfo-write-update
v-if="useinfowriteupdate"
ref="useinfoWriteUpdate"
@refreshDataList="getDataList"
></useinfo-write-update>
</div>
</template>
<script>
import FarmerWriteUpdate from './farmers-write'
import UseinfoWriteUpdate from './useinfo-write'
import TableTreeColumn from '@/components/table-tree-column'
import AddOrUpdate from './list-add-or-update'
export default {
data () {
return {
searchForm: {
name: ''
},
dataList: [],
addOrUpdateVisible: false,
farmerwriteupdateVisible: false,
useinfowriteupdate: false,
dataListSelections: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
}
},
components: {
TableTreeColumn,
AddOrUpdate,
FarmerWriteUpdate,
UseinfoWriteUpdate
},
activated () {
this.getDataList()
},
methods: {
// 获取数据列表
getDataList () {
let that = this;
// 先注释掉请求，用假数据调试先
// this.dataList = this.treeDataTranslate(data.menuList, '', 'parentId', 'childrens')
// console.log('this.dataList', this.dataList)
this.$http({
url: '/task/info/list',
method: 'get',
params: {
'page': this.pageIndex,
'limit': this.pageSize,
'name': this.searchForm.name
}
}).then(({ data }) => {
that.dataList = that.treeDataTranslate(data.page.records, 'id', 'pid', 'childrens')
// debugger
})
},
// 每页数
sizeChangeHandle (val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// 当前页
currentChangeHandle (val) {
this.pageIndex = val
this.getDataList()
},
// 多选
selectionChangeHandle (val) {
this.dataListSelections = val
},
// 新增 / 修改
addOrUpdateHandle (id) {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id)
})
},
// 查看详情
showDetails (id, tableType, pid) {
if (tableType == 1) {
this.farmerwriteupdateVisible = true
this.$nextTick(() => {
this.$refs.farmerWriteUpdate.init(id, true, pid)
})
} else {
this.useinfowriteupdate = true
this.$nextTick(() => {
this.$refs.useinfoWriteUpdate.init(id, true, pid)
})
}
// this.$router.push({
// name: 'saveFamers',
// params: {
// id: id,
// disable: true
// }
// })
},
//填写弹窗
writeHandle (tableType, pid) {
// this.writeVisible = true
if (tableType == 1) {
this.farmerwriteupdateVisible = true
this.$nextTick(() => {
this.$refs.farmerWriteUpdate.init(id, false, pid)
})
} else {
this.useinfowriteupdate = true
this.$nextTick(() => {
this.$refs.useinfoWriteUpdate.init(id, false, pid)
})
}
},
// 删除
deleteHandle (id) {
let ids = id ? [id] : this.dataListSelections.map(item => {
return item.id
})
this.$confirm('确定对所选项进行[删除]操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http({
url: '/task/info/delete',
method: 'post',
data: ids
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500
})
this.getDataList()
}
})
}).catch(() => {
})
}
}
}
</script>
1342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
