panyuyi
1 year ago
5 changed files with 418 additions and 75 deletions
@ -0,0 +1,355 @@ |
|||
<!-- 动物防治管理 --> |
|||
<template> |
|||
<div class="patrol-manage-page"> |
|||
<div class="top-title">防治管理</div> |
|||
<div class="table-box"> |
|||
<div class="top-search"> |
|||
<span>堤防名称：</span> |
|||
<el-input |
|||
class="search-input" |
|||
v-model="searchInput" |
|||
placeholder="请输入堤防名称" |
|||
/> |
|||
<span>堤防类型：</span> |
|||
<el-select v-model="dikeType" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in dikeTypeList" |
|||
:key="item.dictValue" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
<el-button |
|||
class="!ml-10" |
|||
type="success" |
|||
@click="getTableData(searchInput)" |
|||
>搜索</el-button |
|||
> |
|||
<el-button @click="resetSearch()">重置</el-button> |
|||
</div> |
|||
<el-table class="mt-16" height="625" :data="tableData" border> |
|||
<el-table-column type="index" align="center" label="序号" width="80" /> |
|||
<el-table-column prop="dikeName" align="center" label="堤防名称" /> |
|||
<el-table-column prop="dikeCode" align="center" label="堤防代码" /> |
|||
<el-table-column |
|||
prop="engineeringManagementUnit" |
|||
align="center" |
|||
label="管理单位" |
|||
/> |
|||
<el-table-column |
|||
prop="waterAdministrativeDepartment" |
|||
align="center" |
|||
label="行政主管部门" |
|||
/> |
|||
<el-table-column prop="lastTime" align="center" label="最近巡查时间" /> |
|||
<el-table-column prop="operate" align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
style="margin-right: 16px" |
|||
@click="handleGoPlan(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
>防治计划</el-button |
|||
> |
|||
<el-button |
|||
@click="handleGoRecord(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
>防治记录</el-button |
|||
> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination |
|||
background |
|||
class="pagination" |
|||
style="margin-top: 16px; margin-right: 16px; float: right" |
|||
:current-page="pageData.pageNum" |
|||
:page-sizes="pageData.pageSizes" |
|||
layout="total, prev, pager, next, sizes, jumper" |
|||
:total="pageData.total" |
|||
@size-change="getTableData()" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
|
|||
<!-- 弹窗 --> |
|||
<el-dialog |
|||
title="巡查项目配置" |
|||
@close="dialogVisible = false" |
|||
:visible.sync="dialogVisible" |
|||
width="520px" |
|||
> |
|||
<el-form |
|||
:model="ruleForm" |
|||
:rules="rules" |
|||
ref="ruleForm" |
|||
label-width="100px" |
|||
> |
|||
<el-form-item |
|||
label-width="120px" |
|||
label="日常巡查项目" |
|||
prop="checkings[0].xcId" |
|||
> |
|||
<el-select |
|||
filterable |
|||
remote |
|||
:remote-method="(query) => handleGetRemoteProjectListData(0, query)" |
|||
@focus="handleGetRemoteProjectListData(0, '')" |
|||
v-model="ruleForm.checkings[0].xcId" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in projectList0" |
|||
:label="item.name" |
|||
:value="item.id" |
|||
:key="item.id" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item |
|||
label-width="120px" |
|||
label="定期巡查项目" |
|||
prop="checkings[1].xcId" |
|||
> |
|||
<el-select |
|||
filterable |
|||
remote |
|||
:remote-method="(query) => handleGetRemoteProjectListData(1, query)" |
|||
@focus="handleGetRemoteProjectListData(1, '')" |
|||
v-model="ruleForm.checkings[1].xcId" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in projectList1" |
|||
:label="item.name" |
|||
:value="item.id" |
|||
:key="item.id" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item |
|||
label-width="120px" |
|||
label="特别巡查项目" |
|||
prop="checkings[2].xcId" |
|||
> |
|||
<el-select |
|||
filterable |
|||
remote |
|||
:remote-method="(query) => handleGetRemoteProjectListData(2, query)" |
|||
@focus="handleGetRemoteProjectListData(2, '')" |
|||
v-model="ruleForm.checkings[2].xcId" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in projectList2" |
|||
:label="item.name" |
|||
:value="item.id" |
|||
:key="item.id" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button size="mini" @click="resetForm">取 消</el-button> |
|||
<el-button size="mini" type="primary" @click="submitForm" |
|||
>保存</el-button |
|||
> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { getDikeProjectList, postProjectChecking } from "@/api/dike"; |
|||
import { postDFInspectionProjectList } from "@/api/management"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
dialogVisible: false, |
|||
pageData: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
total: 0, |
|||
}, |
|||
searchInput: "", |
|||
dikeTypeList: [ |
|||
{ |
|||
label: "全部", |
|||
value: "", |
|||
}, |
|||
], // 堤防类型列表 |
|||
dikeType: "", |
|||
tableData: [], |
|||
ruleForm: { |
|||
dikeCode: "", |
|||
checkings: [ |
|||
{ |
|||
type: 0, |
|||
label: "日常检查", |
|||
xcId: "", |
|||
}, |
|||
{ |
|||
type: 1, |
|||
label: "定期检查", |
|||
xcId: "", |
|||
}, |
|||
{ |
|||
type: 2, |
|||
label: "特别检查", |
|||
xcId: "", |
|||
}, |
|||
], |
|||
}, |
|||
projectList0: [], // 对应type===0的日常巡查项目 |
|||
projectList1: [], // 对应type===1的日常巡查项目 |
|||
projectList2: [], // 对应type===2的日常巡查项目 |
|||
rules: { |
|||
["checkings[0].xcId"]: [ |
|||
{ required: true, message: "请选择", trigger: "change" }, |
|||
], |
|||
["checkings[1].xcId"]: [ |
|||
{ required: true, message: "请选择", trigger: "change" }, |
|||
], |
|||
["checkings[2].xcId"]: [ |
|||
{ required: true, message: "请选择", trigger: "change" }, |
|||
], |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getDicts("embankment_type").then((response) => { |
|||
this.dikeTypeList = response.data; |
|||
}); |
|||
}, |
|||
mounted() { |
|||
this.getTableData(); |
|||
}, |
|||
methods: { |
|||
// 获取列表信息 |
|||
getTableData() { |
|||
getDikeProjectList({ |
|||
pageNum: this.pageData.pageNum, |
|||
pageSize: this.pageData.pageSize, |
|||
data: { |
|||
dikeType: this.dikeType || "", |
|||
dikeName: this.searchInput || "", |
|||
}, |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.tableData = res.records; |
|||
this.pageData.total = res.total; |
|||
} |
|||
}); |
|||
}, |
|||
// 重置搜索条件 |
|||
resetSearch() { |
|||
this.searchInput = ""; |
|||
this.dikeType = ""; |
|||
this.getTableData(); |
|||
}, |
|||
// 跳转防治记录列表页面 |
|||
handleGoRecord(row) { |
|||
this.$router.push({ |
|||
path: "governanceRecords", |
|||
query: { |
|||
dikeCode: row.dikeCode, |
|||
dikeName: row.dikeName, |
|||
}, |
|||
}); |
|||
}, |
|||
// 跳转防治计划 |
|||
handleGoPlan(row) { |
|||
this.$router.push({ |
|||
path: "planManagement", |
|||
query: { |
|||
dikeCode: row.dikeCode, |
|||
dikeName: row.dikeName, |
|||
}, |
|||
}); |
|||
}, |
|||
// 请求项目列表 |
|||
initProjectList(type, query) { |
|||
postDFInspectionProjectList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time", |
|||
}, |
|||
type, |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like", |
|||
value: query, |
|||
}, |
|||
pageSize: 20, |
|||
pageNum: 1, |
|||
}).then((res) => { |
|||
if (res) { |
|||
this[`projectList${type}`] = res.records; |
|||
} |
|||
}); |
|||
}, |
|||
// 请求项目列表数据 |
|||
handleGetRemoteProjectListData(type, query) { |
|||
this.initProjectList(type, query); |
|||
}, |
|||
|
|||
resetForm() { |
|||
this.$refs.ruleForm.resetFields(); |
|||
this.dialogVisible = false; |
|||
}, |
|||
submitForm() { |
|||
console.log("表单 >>> ", this.ruleForm); |
|||
this.$refs.ruleForm.validate((valid) => { |
|||
if (valid) { |
|||
postProjectChecking(this.ruleForm).then((res) => { |
|||
console.log("res >>>>> ", res); |
|||
if (res?.success) { |
|||
this.$message.success("配置成功"); |
|||
this.dialogVisible = false; |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.patrol-manage-page { |
|||
width: 100%; |
|||
min-height: calc(100vh - 56px); |
|||
padding-left: 24px; |
|||
.top-title { |
|||
height: 40px; |
|||
background-color: white; |
|||
display: flex; |
|||
padding-left: 16px; |
|||
align-items: center; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.table-box { |
|||
width: 100%; |
|||
min-height: calc(100vh - 56px - 64px); |
|||
margin-top: 24px; |
|||
padding: 16px; |
|||
background-color: white; |
|||
|
|||
.top-search { |
|||
margin-bottom: 8px; |
|||
|
|||
.search-input { |
|||
width: 202px; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
|
|||
.table { |
|||
height: calc(680px - 34px); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue