效果图如下
这里在主表显示的状态是填写中,两张树子表显示的是未填写/已填写。
这里两张子表会使用到【填写】按钮来触发点击事件,然后改变[填写状态]
tableType是一个状态值,如果为1,进入是农户表 的填写状态,是起这个作用
<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.id, scope.row.tableType, scope.row.pid)
"
>
填写
</el-button>
</template>
</el-table-column>
writeHandle方法
因为这儿有两张表需要填,所以到底填哪张不知道
在writeHanle中传入三个参数,因为这两张表是我引入的,farmerWriteUpdate、useinfoWriteUpdate这些是我引入的表格的组件名,farmerwriteupdateVisible、useinfowriteupdate 是组件是否显示的状态名
当tableType为1时,打开的是农户表的填写弹窗,否则就是打开农药表的弹窗。
this.$nextTick这个方法作用是当数据被修改后使用这个方法会回调获取更新后的dom再渲染出来。
用大白话来说就是,一个回调方法,如果点击事件进行填写,保存之后的数据通过这个方法渲染回页面来。
//填写弹窗
writeHandle (id, 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)
console.log(id, '24');
console.log(pid, '2455');
})
}
},
<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
>
<el-tag v-if="scope.row.taskState == 0" size="small" type="danger"
>填写中</el-tag
>
<el-tag v-if="scope.row.taskState == 1" size="small" type="success"
>已完成</el-tag
>
</template>
</el-table-column>
然后在弹窗页面的init方法中:
这里的data.info 后台返回回来的数据 info下面有很多数组
// 获取数据列表
getDataList () {
this.$http({
// url: '/sys/org/queryAll',
url: '/sys/org/queryOrgAndTask',
method: 'get',
params: {
'orgNo': '0104',
'batch': this.dataForm.id
}
}).then(({ data }) => {
if (data && data.code === 0) {
var dataList = data.list;
for (var i = 0; i < dataList.length; i++) {
dataList[i].tempTaskCount = dataList[i].taskCount ? dataList[i].taskCount : 0;
}
this.orgDataList = this.treeDataTranslate(dataList, 'orgNo', 'parentNo', 'childrens')
} else {
this.orgDataList = []
}
})
},
init (id) {
this.dataForm.id = id || ''
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
this.$http({
url: `/task/info/info/${this.dataForm.id}`,
method: 'get'
}).then(({ data }) => {
if (data && data.code === 0) {
data.info.year = data.info.year.toString()
this.dataForm = data.info
this.dataForm.reportOrg = data.info.reportOrg
// this.dataForm.orgName = this.transOrg(data.user.orgNo)
}
})
}
this.getDataList();
})
},
最后是提交按钮的方法
// 表单提交
dataFormSubmit () {
this.$refs['dataForm'].validate((valid) => {
const params = { ...this.dataForm };
//遍历机构及数量集合
let orgIdAndCount = [];
var orgList = this.treeToList();
for (let i = 0; i < orgList.length; i++) {
let orgData = orgList[i];
if (orgData.taskCount != 0) {
orgIdAndCount.push({
orgNo: orgData.orgNo,
orgCount: orgData.taskCount,
initCount: orgData.initCount
});
}
}
// this.orgDataList
params.orgIdAndCount = orgIdAndCount;
params.taskParentId = 1;
delete params.taskId;
if (valid) {
this.$http({
// url: `/task/info/${!this.dataForm.id ? 'save' : 'update'}`,
url: `/task/info/save`,
method: 'post',
// data: this.dataForm
data: params
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500
})
this.visible = false
this.$emit('refreshDataList')
}
})
}
})
}