panyuyi
1 year ago
4 changed files with 1153 additions and 1 deletions
@ -0,0 +1,347 @@ |
|||||
|
<!-- 维修养护管理页 --> |
||||
|
<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-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="dikeName" align="center" label="堤防名称" /> |
||||
|
<el-table-column prop="dikeCode" align="center" label="具体地点" /> |
||||
|
<el-table-column prop="dikeCode" align="center" label="维修养护内容" /> |
||||
|
<el-table-column prop="dikeCode" align="center" label="国补" /> |
||||
|
<el-table-column prop="dikeCode" align="center" label="自筹" /> |
||||
|
<el-table-column prop="lastTime" 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="handleSet(scope.row)" |
||||
|
type="text" |
||||
|
size="small" |
||||
|
>查看</el-button |
||||
|
> |
||||
|
<el-button @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(); |
||||
|
}, |
||||
|
handleGoPlan(row) { |
||||
|
this.$router.push({ |
||||
|
path: "inspectionPlan", |
||||
|
query: { |
||||
|
dikeCode: row.dikeCode, |
||||
|
dikeName: row.dikeName, |
||||
|
}, |
||||
|
}); |
||||
|
}, |
||||
|
handleGoRecord(row) { |
||||
|
this.$router.push({ |
||||
|
path: "inspectionRecords", |
||||
|
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); |
||||
|
}, |
||||
|
// 配置项目 |
||||
|
handleSet(row) { |
||||
|
// this.initProjectList(); |
||||
|
this.dialogVisible = true; |
||||
|
this.ruleForm.dikeCode = row.dikeCode; |
||||
|
}, |
||||
|
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> |
||||
@ -0,0 +1,3 @@ |
|||||
|
<template> |
||||
|
<router-view /> |
||||
|
</template> |
||||
@ -0,0 +1,801 @@ |
|||||
|
<!-- 监督检查办法管理-堤防 --> |
||||
|
<script> |
||||
|
import { |
||||
|
putDFPreventionControlPlan, |
||||
|
deleteDFMaintenancePlan, |
||||
|
postDFNewPreventionControlPlan, |
||||
|
postDFPreventionControlPlanList, |
||||
|
getDFPreventionControlPlan, |
||||
|
listUser, |
||||
|
} from "@/api/management"; |
||||
|
import { listDikeInfo } from "@/api/yg/dikeInfo"; |
||||
|
|
||||
|
export default { |
||||
|
name: "InspectionItems", |
||||
|
data() { |
||||
|
return { |
||||
|
paramsData: { |
||||
|
name: "", |
||||
|
type: null, |
||||
|
dikeName: "", |
||||
|
selectLevel: "", |
||||
|
selectType: "", |
||||
|
}, |
||||
|
dialogVisible: false, |
||||
|
prohibitEditing: false, |
||||
|
dikeTypeList: [], |
||||
|
personnelList: [], // 人员列表 |
||||
|
patrolType: [], // 提醒周期类型 |
||||
|
workMonth: [], // 工作月份 |
||||
|
embankmentList: [], //堤防列表 |
||||
|
dikeLevel: [], // 堤防级别列表 |
||||
|
controlType: [], // 防治类型 |
||||
|
tableData: [], // 检查列表 |
||||
|
pageData: { |
||||
|
pageNum: 1, // 当前页 |
||||
|
pageSize: 10, // 请求数量 |
||||
|
pageSizes: [10, 20, 50, 100], |
||||
|
total: 0, // 总数量 |
||||
|
}, |
||||
|
ruleForm: { |
||||
|
dikeCode: "", |
||||
|
dikeName: "", |
||||
|
name: "", |
||||
|
type: "", |
||||
|
instruction: "", |
||||
|
month: "", |
||||
|
details: [], |
||||
|
cycleType: "", |
||||
|
frequency: "", |
||||
|
operators: [], |
||||
|
isReminder: 1, |
||||
|
otherConfig: { |
||||
|
selectUser: [], |
||||
|
week: "", |
||||
|
day: "", |
||||
|
}, |
||||
|
reminderTime: "", |
||||
|
}, |
||||
|
rules: { |
||||
|
dikeCode: [ |
||||
|
{ required: true, message: "请选择堤防名称", trigger: "blur" }, |
||||
|
], |
||||
|
name: [ |
||||
|
{ required: true, message: "请输入防治计划名称", trigger: "blur" }, |
||||
|
{ max: 100, message: "名称最长为100个字符", trigger: "blur" }, |
||||
|
], |
||||
|
type: [ |
||||
|
{ required: true, message: "请选择防治类型", trigger: "change" }, |
||||
|
], |
||||
|
instruction: [ |
||||
|
{ required: true, message: "请输入防治说明", trigger: "change" }, |
||||
|
], |
||||
|
month: [ |
||||
|
{ required: true, message: "请选择工作月份", trigger: "change" }, |
||||
|
], |
||||
|
cycleType: [ |
||||
|
{ required: true, message: "请选择提醒日期", trigger: "change" }, |
||||
|
], |
||||
|
frequency: [ |
||||
|
{ required: true, message: "请输入次数", trigger: "change" }, |
||||
|
], |
||||
|
"otherConfig.selectUser": [ |
||||
|
{ required: true, message: "请选择责任人", trigger: "change" }, |
||||
|
], |
||||
|
"otherConfig.week": [ |
||||
|
{ required: true, message: "请选择星期", trigger: "change" }, |
||||
|
], |
||||
|
"otherConfig.day": [ |
||||
|
{ required: true, message: "请输入", trigger: "change" }, |
||||
|
], |
||||
|
reminderTime: [ |
||||
|
{ required: true, message: "请选择提醒时间", trigger: "change" }, |
||||
|
], |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
watch: { |
||||
|
dialogVisible(newVal, oldVal) { |
||||
|
if (oldVal) { |
||||
|
this.prohibitEditing = false; |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取堤防等级 |
||||
|
resolveDikeGrad(dikeGrad) { |
||||
|
return ( |
||||
|
this.dikeLevel.find((v) => v.dictValue === dikeGrad)?.dictLabel || |
||||
|
dikeGrad |
||||
|
); |
||||
|
}, |
||||
|
// 获取堤防类型 |
||||
|
resolveDikeType(dikeType) { |
||||
|
return ( |
||||
|
this.dikeTypeList.find((v) => v.dictValue == dikeType)?.dictLabel || |
||||
|
dikeType |
||||
|
); |
||||
|
}, |
||||
|
// 获取防治类型 |
||||
|
resolveType(type) { |
||||
|
return ( |
||||
|
this.controlType.find((v) => v.dictValue == type)?.dictLabel || type |
||||
|
); |
||||
|
}, |
||||
|
// 打开新增弹窗 |
||||
|
openAddDialog() { |
||||
|
// 获取字典数据 |
||||
|
this.getDicts("xc_w_month").then((res) => { |
||||
|
this.workMonth = res.data; |
||||
|
}); |
||||
|
this.getDicts("xs_cycle_type").then((res) => { |
||||
|
this.patrolType = res.data; |
||||
|
}); |
||||
|
if (this.ruleForm.details.length <= 0) { |
||||
|
this.ruleForm.details.push({ |
||||
|
constructionDate: "", |
||||
|
jobContent: "", |
||||
|
planDays: 0, |
||||
|
}); |
||||
|
} |
||||
|
this.dialogVisible = true; |
||||
|
setTimeout(() => { |
||||
|
this.$refs.ruleForm.resetFields(); |
||||
|
}, 0); |
||||
|
}, |
||||
|
// 删除对应防治计划 |
||||
|
deleteTableItem(row) { |
||||
|
deleteDFMaintenancePlan(row.id).then((res) => { |
||||
|
this.getTableData(); |
||||
|
this.$message.success("删除成功"); |
||||
|
}); |
||||
|
}, |
||||
|
// 删除对应工作内容 |
||||
|
deleteWorkTableItem(id) { |
||||
|
const index = this.workTable.findIndex((item) => item.id === id); |
||||
|
if (index !== -1) { |
||||
|
this.workTable.splice(index, 1); |
||||
|
} |
||||
|
}, |
||||
|
// 搜索用户 |
||||
|
searchUser(e) { |
||||
|
listUser({ |
||||
|
data: { |
||||
|
timeView: { |
||||
|
timeField: "create_time", |
||||
|
}, |
||||
|
}, |
||||
|
cv: { |
||||
|
name: "nickName", |
||||
|
type: "like", |
||||
|
value: e, |
||||
|
}, |
||||
|
pageSize: 100, |
||||
|
pageNum: 1, |
||||
|
}).then((res) => { |
||||
|
this.personnelList = res.records; |
||||
|
}); |
||||
|
}, |
||||
|
// 查看或编辑计划详情 |
||||
|
viewOrEditPlanDetails(row, edit = false) { |
||||
|
if (!edit) { |
||||
|
this.prohibitEditing = true; |
||||
|
} |
||||
|
getDFPreventionControlPlan(row.id).then((res) => { |
||||
|
this.dialogVisible = true; |
||||
|
setTimeout(() => { |
||||
|
this.ruleForm = res.data; |
||||
|
this.ruleForm.reminderCycle = res.data.instruction + res.data.month; |
||||
|
}, 30); |
||||
|
}); |
||||
|
}, |
||||
|
changeOtherConfigSelectUser(idsArr) { |
||||
|
if (idsArr?.length) { |
||||
|
this.ruleForm.operators = |
||||
|
this.personnelList |
||||
|
.filter((v) => idsArr.includes(v.nickName)) |
||||
|
?.map((v) => ({ |
||||
|
name: v.nickName, |
||||
|
uid: v.id, |
||||
|
})) || []; |
||||
|
} else { |
||||
|
this.ruleForm.operators = []; |
||||
|
} |
||||
|
}, |
||||
|
// 保存维修计划 |
||||
|
submitForm(formName) { |
||||
|
this.$refs[formName].validate((valid) => { |
||||
|
if (valid) { |
||||
|
this.ruleForm.cycleType = parseFloat(this.ruleForm.cycleType); |
||||
|
this.ruleForm.frequency = parseFloat(this.ruleForm.frequency); |
||||
|
this.ruleForm.month = parseFloat(this.ruleForm.month); |
||||
|
if (this.ruleForm.id) { |
||||
|
putDFPreventionControlPlan(this.ruleForm).then(() => { |
||||
|
this.getTableData(); |
||||
|
this.dialogVisible = false; |
||||
|
this.$message({ |
||||
|
message: "保存成功", |
||||
|
type: "success", |
||||
|
}); |
||||
|
}); |
||||
|
} else { |
||||
|
postDFNewPreventionControlPlan(this.ruleForm).then(() => { |
||||
|
console.log("保存成功"); |
||||
|
this.getTableData(); |
||||
|
this.dialogVisible = false; |
||||
|
this.$message({ |
||||
|
message: "保存成功", |
||||
|
type: "success", |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
} else { |
||||
|
console.log("校验不通过"); |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 重置校验 |
||||
|
resetForm(formName) { |
||||
|
this.$refs[formName].resetFields(); |
||||
|
this.dialogVisible = false; |
||||
|
}, |
||||
|
// 关闭dialog |
||||
|
handleClose(ruleForm = "ruleForm") { |
||||
|
console.log("关闭"); |
||||
|
this.$refs[ruleForm].resetFields(); |
||||
|
this.ruleForm = { |
||||
|
dikeCode: "", |
||||
|
dikeName: "", |
||||
|
name: "", |
||||
|
type: "", |
||||
|
instruction: "", |
||||
|
month: "", |
||||
|
details: [], |
||||
|
cycleType: "", |
||||
|
isReminder: true, |
||||
|
selectUser: [], |
||||
|
otherConfig: { |
||||
|
selectUser: [], |
||||
|
week: "", |
||||
|
day: "", |
||||
|
}, |
||||
|
week: 1, |
||||
|
date: 1, |
||||
|
reminderTime: "", |
||||
|
}; |
||||
|
}, |
||||
|
// 添加工作项 |
||||
|
addWorkItem() { |
||||
|
this.ruleForm.details.push({ |
||||
|
jobContent: "", |
||||
|
constructionDate: "", |
||||
|
planDays: "", |
||||
|
}); |
||||
|
}, |
||||
|
// 获取列表数据 |
||||
|
getTableData() { |
||||
|
postDFPreventionControlPlanList({ |
||||
|
data: { |
||||
|
timeView: { |
||||
|
timeField: "create_time", |
||||
|
}, |
||||
|
name: this.paramsData.name, |
||||
|
type: this.paramsData.type, |
||||
|
dikeName: this.paramsData.dikeName, |
||||
|
dikeGrad: this.paramsData.dikeGrad, |
||||
|
dikeType: this.paramsData.dikeType, |
||||
|
}, |
||||
|
cv: { |
||||
|
name: "name", |
||||
|
type: "like", |
||||
|
value: this.name, |
||||
|
}, |
||||
|
params: { |
||||
|
orderBy: "create_time", |
||||
|
sort: "desc", |
||||
|
}, |
||||
|
pageSize: this.pageData.pageSize, |
||||
|
pageNum: this.pageData.pageNum, |
||||
|
}).then((res) => { |
||||
|
if (res) { |
||||
|
this.tableData = res.records; |
||||
|
this.pageData.total = res.total; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 重置搜索 |
||||
|
resetSearch() { |
||||
|
this.name = ""; |
||||
|
this.selectStatus = "2"; |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
// 打开地图 |
||||
|
handleOpenMap() {}, |
||||
|
// 打开详情 |
||||
|
handleOpenDetail() {}, |
||||
|
// 获取堤防列表信息 |
||||
|
getEmbData() { |
||||
|
listDikeInfo({ |
||||
|
pageNum: 1, |
||||
|
pageSize: 20, |
||||
|
ids: null, |
||||
|
data: { |
||||
|
embankmentName: null, |
||||
|
endStationNumber: null, |
||||
|
embankmentType: null, |
||||
|
}, |
||||
|
// 排序方式 |
||||
|
params: { |
||||
|
// 按哪个字段排序 |
||||
|
orderBy: "create_time", |
||||
|
// desc降序，升序asc |
||||
|
sort: "desc", |
||||
|
}, |
||||
|
}).then((res) => { |
||||
|
this.embankmentList = res?.records || []; |
||||
|
}); |
||||
|
}, |
||||
|
handleChangeDike(value) { |
||||
|
console.log("value >>>>> ", value); |
||||
|
this.ruleForm.name = this.ruleForm.dikeCode; |
||||
|
let res = this.embankmentList.find((v) => v.dikeCode === value); |
||||
|
console.log("res >>>>> ", res); |
||||
|
this.ruleForm.dikeName = res?.dikeName; |
||||
|
// this.dikeDetailsDialog.id = res?.id || '' |
||||
|
}, |
||||
|
}, |
||||
|
created() { |
||||
|
this.getDicts("embankment_type").then((response) => { |
||||
|
this.dikeTypeList = response.data; |
||||
|
}); |
||||
|
}, |
||||
|
mounted() { |
||||
|
// 获取列表数据 |
||||
|
this.getTableData(); |
||||
|
this.getEmbData(); |
||||
|
this.getDicts("embankment_level").then((res) => { |
||||
|
this.dikeLevel = res.data; |
||||
|
}); |
||||
|
this.getDicts("dh_jh_type").then((res) => { |
||||
|
this.controlType = res.data; |
||||
|
}); |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div class="body slider-right"> |
||||
|
<div class="top-title">基础信息管理</div> |
||||
|
<div class="table-box"> |
||||
|
<el-button |
||||
|
class="search-btn" |
||||
|
style="margin-right: 16px; margin-bottom: 8px; float: right" |
||||
|
type="success" |
||||
|
@click="openAddDialog()" |
||||
|
>新增</el-button |
||||
|
> |
||||
|
<el-table class="table" height="640" :data="tableData" border> |
||||
|
<el-table-column type="index" align="center" label="序号" width="100" /> |
||||
|
<el-table-column prop="name" align="center" label="防治计划名称" /> |
||||
|
<el-table-column prop="type" align="center" label="防治类型"> |
||||
|
<template #default="{ row }">{{ resolveType(row.type) }}</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="effDate" align="center" label="计划时间" /> |
||||
|
<el-table-column |
||||
|
prop="createTime" |
||||
|
align="center" |
||||
|
sortable |
||||
|
label="创建时间" |
||||
|
/> |
||||
|
<el-table-column prop="address" align="center" label="操作"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
@click="viewOrEditPlanDetails(scope.row)" |
||||
|
type="text" |
||||
|
size="small" |
||||
|
>查看</el-button |
||||
|
> |
||||
|
<el-button |
||||
|
@click="viewOrEditPlanDetails(scope.row, true)" |
||||
|
type="text" |
||||
|
size="small" |
||||
|
>编辑</el-button |
||||
|
> |
||||
|
<!-- <el-popconfirm |
||||
|
confirm-button-text="确定" |
||||
|
cancel-button-text="取消" |
||||
|
icon="el-icon-info" |
||||
|
icon-color="red" |
||||
|
title="确定删除吗？" |
||||
|
@confirm="deleteTableItem(scope.row)" |
||||
|
> |
||||
|
<el-button |
||||
|
style="color: red" |
||||
|
type="text" |
||||
|
size="small" |
||||
|
slot="reference" |
||||
|
>删除</el-button |
||||
|
> |
||||
|
</el-popconfirm> --> |
||||
|
</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="handleClose" |
||||
|
:visible.sync="dialogVisible" |
||||
|
:close-on-click-modal="false" |
||||
|
width="720px" |
||||
|
> |
||||
|
<div style="display: flex; margin-bottom: 16px"> |
||||
|
<div |
||||
|
style=" |
||||
|
width: 5px; |
||||
|
height: 16px; |
||||
|
background-color: #31a08e; |
||||
|
margin-right: 8px; |
||||
|
" |
||||
|
></div> |
||||
|
<span style="font-weight: 600">基础信息</span> |
||||
|
</div> |
||||
|
<el-form |
||||
|
:model="ruleForm" |
||||
|
:rules="rules" |
||||
|
ref="ruleForm" |
||||
|
label-width="100px" |
||||
|
> |
||||
|
<el-form-item label-width="120px" label="堤防名称" prop="dikeCode"> |
||||
|
<!-- <el-input style="width: 202px;" v-model="ruleForm.dikeCode" placeholder="请输入" :disabled="prohibitEditing" /> --> |
||||
|
<el-select |
||||
|
v-model="ruleForm.dikeCode" |
||||
|
placeholder="请选择" |
||||
|
@change="handleChangeDike" |
||||
|
:disabled="prohibitEditing" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in embankmentList" |
||||
|
:label="item.dikeName" |
||||
|
:value="item.dikeCode" |
||||
|
:key="item.id" |
||||
|
></el-option> |
||||
|
</el-select> |
||||
|
<el-button |
||||
|
:disabled="!ruleForm.dikeCode" |
||||
|
class="!m-6" |
||||
|
type="success" |
||||
|
size="small" |
||||
|
@click="handleOpenDetail" |
||||
|
>详情</el-button |
||||
|
> |
||||
|
<el-button |
||||
|
:disabled="!ruleForm.dikeCode" |
||||
|
class="!ml-6" |
||||
|
type="success" |
||||
|
size="small" |
||||
|
@click="handleOpenMap" |
||||
|
>打开地图</el-button |
||||
|
> |
||||
|
</el-form-item> |
||||
|
<div style="display: flex"> |
||||
|
<el-form-item label-width="120px" label="防治计划名称" prop="name"> |
||||
|
<el-input |
||||
|
style="width: 202px" |
||||
|
v-model="ruleForm.name" |
||||
|
placeholder="请输入" |
||||
|
:disabled="prohibitEditing" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label-width="120px" label="防治类型" prop="type"> |
||||
|
<el-select |
||||
|
v-model="ruleForm.type" |
||||
|
placeholder="请选择" |
||||
|
:disabled="prohibitEditing" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in controlType" |
||||
|
:key="item.id" |
||||
|
:label="item.dictLabel" |
||||
|
:value="item.dictValue" |
||||
|
> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
<el-form-item label-width="120px" label="防治说明" prop="instruction"> |
||||
|
<el-input |
||||
|
v-model="ruleForm.instruction" |
||||
|
type="textarea" |
||||
|
placeholder=" 请输入" |
||||
|
:disabled="prohibitEditing" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<div style="display: flex; margin-bottom: 16px"> |
||||
|
<div |
||||
|
style=" |
||||
|
width: 5px; |
||||
|
height: 16px; |
||||
|
background-color: #31a08e; |
||||
|
margin-right: 8px; |
||||
|
" |
||||
|
></div> |
||||
|
<span style="font-weight: 600">工作内容</span> |
||||
|
</div> |
||||
|
<el-form-item label-width="120px" label="工作月份" prop="month"> |
||||
|
<el-select |
||||
|
v-model="ruleForm.month" |
||||
|
placeholder="请选择" |
||||
|
:disabled="prohibitEditing" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in workMonth" |
||||
|
:label="item.dictLabel" |
||||
|
:value="item.dictValue" |
||||
|
:key="item.id" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-table |
||||
|
style="margin-bottom: 22px" |
||||
|
max-height="330" |
||||
|
:data="ruleForm.details" |
||||
|
border |
||||
|
> |
||||
|
<el-table-column |
||||
|
type="index" |
||||
|
align="center" |
||||
|
label="序号" |
||||
|
width="50" |
||||
|
/> |
||||
|
<el-table-column prop="jobContent" align="center" label="工作内容"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input |
||||
|
v-model="scope.row.jobContent" |
||||
|
placeholder="请输入工作内容" |
||||
|
/> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="constructionDate" |
||||
|
align="center" |
||||
|
label="施工日期" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input |
||||
|
v-model="scope.row.constructionDate" |
||||
|
placeholder="请输入施工日期" |
||||
|
/> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="planDays" |
||||
|
align="center" |
||||
|
label="计划工日" |
||||
|
width="80" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input |
||||
|
v-model="scope.row.planDays" |
||||
|
placeholder="请输入计划工日" |
||||
|
/> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column align="center" label="操作" width="100"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
style="margin-right: 9px" |
||||
|
type="text" |
||||
|
size="small" |
||||
|
@click="addWorkItem" |
||||
|
>添加</el-button |
||||
|
> |
||||
|
<el-popconfirm |
||||
|
confirm-button-text="确定" |
||||
|
cancel-button-text="取消" |
||||
|
icon="el-icon-info" |
||||
|
icon-color="red" |
||||
|
title="确定删除吗？" |
||||
|
@confirm="deleteWorkTableItem(scope.row.id)" |
||||
|
> |
||||
|
<el-button |
||||
|
v-if="ruleForm.details.length > 1" |
||||
|
style="color: red" |
||||
|
type="text" |
||||
|
size="small" |
||||
|
slot="reference" |
||||
|
>删除</el-button |
||||
|
> |
||||
|
</el-popconfirm> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div style="display: flex"> |
||||
|
<el-form-item label-width="120px" label="提醒周期" prop="frequency"> |
||||
|
<el-input |
||||
|
style="width: 90px" |
||||
|
v-model="ruleForm.frequency" |
||||
|
placeholder="请输入" |
||||
|
/> |
||||
|
/次 |
||||
|
</el-form-item> |
||||
|
<el-form-item label-width="10px" prop="cycleType"> |
||||
|
<el-select |
||||
|
style="width: 90px" |
||||
|
v-model="ruleForm.cycleType" |
||||
|
placeholder="请选择" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in patrolType" |
||||
|
:label="item.dictLabel" |
||||
|
:value="item.dictValue" |
||||
|
:key="item.id" |
||||
|
></el-option> |
||||
|
</el-select> |
||||
|
/日期 |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
label-width="100px" |
||||
|
label="责任人" |
||||
|
prop="otherConfig.selectUser" |
||||
|
> |
||||
|
<el-select |
||||
|
v-model="ruleForm.otherConfig.selectUser" |
||||
|
multiple |
||||
|
filterable |
||||
|
remote |
||||
|
:remote-method="searchUser" |
||||
|
value-key="id" |
||||
|
placeholder="请输入关键词搜索用户" |
||||
|
prop="selectUser" |
||||
|
@change="changeOtherConfigSelectUser" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in personnelList" |
||||
|
:key="item.id" |
||||
|
:label="item.nickName" |
||||
|
:value="item.nickName" |
||||
|
> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
<div style="display: flex"> |
||||
|
<el-form-item label-width="120px" label="消息提醒" prop="isReminder"> |
||||
|
<el-switch |
||||
|
v-model="ruleForm.isReminder" |
||||
|
:active-value="1" |
||||
|
:inactive-value="0" |
||||
|
active-color="#31a08e" |
||||
|
inactive-color="#dcdfe6" |
||||
|
> |
||||
|
</el-switch> |
||||
|
</el-form-item> |
||||
|
<div style="display: flex; flex-direction: column"> |
||||
|
<el-form-item |
||||
|
v-if="ruleForm.isReminder && ruleForm.cycleType === '1'" |
||||
|
label-width="120px" |
||||
|
label="提醒时间" |
||||
|
prop="otherConfig.week" |
||||
|
> |
||||
|
<el-radio-group v-model="ruleForm.otherConfig.week"> |
||||
|
<el-radio :label="1">星期一</el-radio> |
||||
|
<el-radio :label="2">星期二</el-radio> |
||||
|
<el-radio :label="3">星期三</el-radio> |
||||
|
<el-radio :label="4">星期四</el-radio> |
||||
|
<el-radio :label="5">星期五</el-radio> |
||||
|
<el-radio :label="6">星期六</el-radio> |
||||
|
<el-radio :label="7">星期日</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
v-if="ruleForm.isReminder && ruleForm.cycleType === '0'" |
||||
|
label-width="120px" |
||||
|
label="提醒时间" |
||||
|
prop="otherConfig.day" |
||||
|
> |
||||
|
<div> |
||||
|
每月<el-input |
||||
|
style="width: 202px" |
||||
|
v-model="ruleForm.otherConfig.day" |
||||
|
/>号 |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
label-width="120px" |
||||
|
:label="ruleForm.cycleType === '2' ? '提醒时间' : ''" |
||||
|
prop="reminderTime" |
||||
|
> |
||||
|
<el-time-picker |
||||
|
v-model="ruleForm.reminderTime" |
||||
|
value-format="yyyy-MM-dd hh:mm:ss" |
||||
|
placeholder="选择时间" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button size="mini" @click="resetForm('ruleForm')">取 消</el-button> |
||||
|
<el-button |
||||
|
v-if="!prohibitEditing" |
||||
|
size="mini" |
||||
|
type="primary" |
||||
|
@click="submitForm('ruleForm')" |
||||
|
>保存</el-button |
||||
|
> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped lang="less"> |
||||
|
.body { |
||||
|
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); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.search-btn { |
||||
|
margin-left: 10px; |
||||
|
background-color: #37b29e; |
||||
|
border: none; |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: #5ac6b9; |
||||
|
} |
||||
|
|
||||
|
&:active { |
||||
|
background-color: #2b8070; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/deep/.el-input__count { |
||||
|
height: 15px; |
||||
|
line-height: 15px; |
||||
|
margin-right: 10px; |
||||
|
margin-bottom: -4px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue