caoqi
9 months ago
14 changed files with 3564 additions and 929 deletions
@ -0,0 +1,63 @@ |
|||
<template> |
|||
<div class="slider-right create-route-page"> |
|||
<TopBackTitle></TopBackTitle> |
|||
<div class="slider-right-body"> |
|||
<PlanDetail ref="formRef" :id="id" :canEdit="true"></PlanDetail> |
|||
<div class="bottom-btns"> |
|||
<el-button type="primary" size="small" @click="handleSave(false)" |
|||
>保存</el-button |
|||
> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
v-if="!id" |
|||
@click="handleSave(true)" |
|||
>保存并继续新增</el-button |
|||
> |
|||
<el-button size="small" @click="handleCancel">取消</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import TopBackTitle from "@/components/TopBackTitle/index.vue"; |
|||
import PlanDetail from "./components/PlanDetail.vue"; |
|||
|
|||
export default { |
|||
components: { |
|||
TopBackTitle, |
|||
PlanDetail, |
|||
}, |
|||
data() { |
|||
return { |
|||
id: this.$route.query.id, |
|||
}; |
|||
}, |
|||
created() {}, |
|||
methods: { |
|||
handleSave(reset) { |
|||
this.$refs.formRef.submit(reset).then((res) => { |
|||
if (!reset) { |
|||
this.$router.go(-1); |
|||
} |
|||
}); |
|||
}, |
|||
handleCancel() { |
|||
// 二次确认 |
|||
this.$confirm("是否取消编辑？", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
this.$router.go(-1); |
|||
}) |
|||
.catch(() => {}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.create-route-page { |
|||
} |
|||
</style> |
|||
@ -0,0 +1,566 @@ |
|||
<template> |
|||
<div class="detail-page"> |
|||
<el-form |
|||
ref="formRef" |
|||
label-position="top" |
|||
:model="formData" |
|||
:rules="rules" |
|||
label-width="120px" |
|||
> |
|||
<div class="form-row-title">堤防选择</div> |
|||
<div class="flex items-start"> |
|||
<el-form-item label="选择堤防" prop="dikeName"> |
|||
<el-select |
|||
:disabled="!canEdit" |
|||
class="w-240" |
|||
size="small" |
|||
remote |
|||
filterable |
|||
reserve-keyword |
|||
:maxlength="50" |
|||
:remote-method="handleGetRemoteDikeMethod" |
|||
@focus="handleGetRemoteDikeMethod('')" |
|||
@change="handleChangeDike" |
|||
v-model="formData.dikeName" |
|||
placeholder="请选择堤防" |
|||
> |
|||
<el-option |
|||
v-for="item in dikeList" |
|||
:key="item.id" |
|||
:label="item.dikeName" |
|||
:value="item.dikeName" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="堤防类型" prop="dikeType" class="ml-24"> |
|||
<el-select |
|||
v-model="formData.dikeType" |
|||
:disabled="true" |
|||
class="w-240" |
|||
size="small" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in projectTypeOptions" |
|||
:key="item.dictValue" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</div> |
|||
<div class="form-row-title">维养计划</div> |
|||
<div class="flex items-start"> |
|||
<el-form-item label="计划名称" prop="name"> |
|||
<el-input |
|||
:disabled="!canEdit" |
|||
class="w-240" |
|||
size="small" |
|||
v-model="formData.name" |
|||
placeholder="请输入名称" |
|||
maxlength="50" |
|||
></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="计划类型" prop="type" class="ml-24"> |
|||
<el-select |
|||
:disabled="!canEdit" |
|||
size="small" |
|||
class="w-240" |
|||
v-model="formData.type" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="(item, index) in yhPlanTypeOptions" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
:key="index" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</div> |
|||
<div class="flex items-start"> |
|||
<el-form-item label="计划开始/结束时间" prop="planTimeArr"> |
|||
<el-date-picker |
|||
class="" |
|||
:disabled="!canEdit" |
|||
type="daterange" |
|||
size="small" |
|||
v-model="formData.planTimeArr" |
|||
placeholder="选择时间" |
|||
> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
</div> |
|||
<el-form |
|||
v-for="(subItem, subIndex) in formData.supplementList" |
|||
ref="supplementFormRef" |
|||
label-position="top" |
|||
:model="subItem" |
|||
:rules="supplementRules" |
|||
label-width="120px" |
|||
:key="subIndex" |
|||
> |
|||
<div class="flex items-center"> |
|||
<el-form-item label="资金来源" prop="supplement"> |
|||
<el-select |
|||
:disabled="!canEdit" |
|||
size="small" |
|||
class="w-240" |
|||
v-model="subItem.supplement" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="(item, index) in supplementOptions" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
:key="index" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="资金金额" prop="money" class="ml-24"> |
|||
<el-input |
|||
:disabled="!canEdit" |
|||
class="w-240" |
|||
size="small" |
|||
type="number" |
|||
:min="0" |
|||
:max="9999999999" |
|||
v-model="subItem.money" |
|||
placeholder="请输入" |
|||
></el-input> |
|||
<span class="ml-8">万元</span> |
|||
</el-form-item> |
|||
<i |
|||
class="el-icon-circle-plus cursor-pointer mt-24 ml-12" |
|||
@click="handleAddSupplement(subIndex)" |
|||
style="font-size: 20px; color: #36b29e" |
|||
></i> |
|||
<i |
|||
class="el-icon-remove cursor-pointer mt-24 ml-12" |
|||
@click="handleDelSupplement(subIndex)" |
|||
v-if="formData.supplementList.length > 1" |
|||
style="font-size: 20px; color: #f26161" |
|||
></i> |
|||
</div> |
|||
</el-form> |
|||
<div class="flex items-start"> |
|||
<el-form-item label="维养计划方案" prop="files"> |
|||
<el-upload |
|||
:disabled="!canEdit" |
|||
class="" |
|||
action="#" |
|||
:http-request="handleUpload" |
|||
:before-upload="beforeUpload" |
|||
:before-remove="beforeRemove" |
|||
accept=".docx,.doc,.pdf" |
|||
:file-list="filesList" |
|||
> |
|||
<el-button size="small" type="primary">点击上传</el-button> |
|||
<div slot="tip" class="el-upload__tip"> |
|||
文件支持docx、doc、pdf，文件大小100M以内，文件数量不能超过5份 |
|||
</div> |
|||
</el-upload> |
|||
</el-form-item> |
|||
</div> |
|||
<div class="flex items-center"> |
|||
<el-form-item label="维养工程单位" prop="unitName"> |
|||
<el-input |
|||
:disabled="!canEdit" |
|||
class="w-240" |
|||
size="small" |
|||
v-model="formData.unitName" |
|||
placeholder="请输入" |
|||
></el-input> |
|||
</el-form-item> |
|||
</div> |
|||
<div class="flex items-center"> |
|||
<el-form-item label="维养负责人" prop="operator" class=""> |
|||
<el-input |
|||
:disabled="!canEdit" |
|||
class="w-240" |
|||
size="small" |
|||
v-model="formData.frequency" |
|||
placeholder="请输入" |
|||
></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="维养提醒" prop="reminderTime" class="ml-24"> |
|||
<el-date-picker |
|||
class="custom-time-piker" |
|||
:disabled="!canEdit" |
|||
size="small" |
|||
type="datetime" |
|||
v-model="formData.reminderTime" |
|||
placeholder="选择时间" |
|||
> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { listUser } from "@/api/management"; |
|||
import { |
|||
getProjectCheckingLineRoute, |
|||
getRunProjectList, |
|||
postProjectCheckingPlan, |
|||
putProjectCheckingPlan, |
|||
getProjectCheckingPlanDetails, |
|||
} from "@/api/dike"; |
|||
|
|||
import { uploadFileData } from "@/api/system/upload"; |
|||
|
|||
export default { |
|||
props: { |
|||
id: String, |
|||
canEdit: Boolean, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
formData: { |
|||
dikeName: "", |
|||
dikeCode: "", |
|||
dikeType: "", |
|||
type: "", |
|||
operator: "", |
|||
planTimeArr: "", |
|||
reminderTime: "", |
|||
supplementList: [ |
|||
{ |
|||
supplement: "", |
|||
money: 0, |
|||
}, |
|||
], |
|||
files: [], |
|||
otherConfig: { |
|||
options: {}, |
|||
}, |
|||
}, |
|||
rules: { |
|||
dikeName: [ |
|||
{ required: true, message: "请选择堤防", trigger: "change" }, |
|||
], |
|||
name: [{ required: true, message: "请输入计划名称", trigger: "blur" }], |
|||
type: [ |
|||
{ required: true, message: "请选择计划类型", trigger: "change" }, |
|||
], |
|||
supplement: [ |
|||
{ required: true, message: "请选择资金类型", trigger: "change" }, |
|||
], |
|||
type: [{ required: true, message: "请选择类型", trigger: "change" }], |
|||
reminderTime: [ |
|||
{ required: true, message: "请选择", trigger: "change" }, |
|||
], |
|||
frequency: [{ required: true, message: "请输入", trigger: "blur" }], |
|||
}, |
|||
supplementRules: { |
|||
supplement: [ |
|||
{ required: true, message: "请选择资金类型", trigger: "change" }, |
|||
], |
|||
money: [{ required: true, message: "请输入金额", trigger: "blur" }], |
|||
}, |
|||
filesList: [], |
|||
dikeList: [], |
|||
projectTypeOptions: [], |
|||
yhPlanTypeOptions: [], // 计划类型 |
|||
personnelList: [], // 人员列表 |
|||
supplementOptions: [], // 资金类型列表 |
|||
lineList: [], // 线路列表 |
|||
}; |
|||
}, |
|||
watch: { |
|||
id: { |
|||
handler(val) { |
|||
if (val) { |
|||
this.getDetail(); |
|||
} |
|||
}, |
|||
immediate: true, |
|||
}, |
|||
}, |
|||
created() { |
|||
this.searchUser(); |
|||
this.getDicts("embankment_type").then((response) => { |
|||
this.projectTypeOptions = response.data; |
|||
}); |
|||
this.getDicts("xs_yh_supplement").then((response) => { |
|||
this.supplementOptions = response.data; |
|||
}); |
|||
this.getDicts("xs_yh_type").then((response) => { |
|||
this.yhPlanTypeOptions = response.data; |
|||
}); |
|||
}, |
|||
methods: { |
|||
getDetail() { |
|||
getProjectCheckingPlanDetails(this.id).then((res) => { |
|||
this.formData = res.data; |
|||
this.filesList = res.data.files.map((item) => { |
|||
return { |
|||
name: item, |
|||
url: item, |
|||
}; |
|||
}); |
|||
this.handleRemoteLineData(res.data.name); |
|||
}); |
|||
}, |
|||
handleChangeDike() { |
|||
let res = this.dikeList.find( |
|||
(v) => v.dikeName === this.formData.dikeName |
|||
); |
|||
this.formData.dikeCode = res.dikeCode; |
|||
this.formData.dikeType = res.dikeType; |
|||
this.formData.dikeName = res.dikeName; |
|||
this.formData.dutyHolder = res.dutyHolders.find( |
|||
(v) => v.dutyHolderType === "0" |
|||
)?.name; |
|||
}, |
|||
handleGetRemoteDikeMethod(query) { |
|||
getRunProjectList({ |
|||
pageSize: 10, |
|||
pageNum: 1, |
|||
data: { |
|||
dikeName: query, |
|||
}, |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.dikeList = res.records; |
|||
} |
|||
}); |
|||
}, |
|||
handleChangeLine(item, e) { |
|||
let res = this.lineList.find((v) => v.name === e); |
|||
item.lineId = res.id; |
|||
item.lineName = res.name; |
|||
}, |
|||
// 上传前 |
|||
beforeUpload(e) { |
|||
console.log("beforeUpload >>>>> ", e); |
|||
const { name, size } = e; |
|||
if (size > 100 * 1024 * 1024) { |
|||
this.$message.warning("文件大小不能超过100M"); |
|||
return false; |
|||
} |
|||
if (!/\.(docx|doc|pdf)$/.test(name)) { |
|||
this.$message.warning("文件格式不正确"); |
|||
return false; |
|||
} |
|||
if (this.formData.files?.length >= 5) { |
|||
// this.$message.warning("最多上传5份"); |
|||
this.$message({ |
|||
message: "最多上传5份", |
|||
type: "warning", |
|||
}); |
|||
return false; |
|||
} |
|||
return true; |
|||
}, |
|||
handleUpload(e) { |
|||
const { file } = e; |
|||
let fData = new FormData(); |
|||
fData.append("file", file); |
|||
uploadFileData(fData) |
|||
.then((res) => { |
|||
this.formData.files?.push(res.url); |
|||
}) |
|||
.catch((err) => { |
|||
console.log("err >>>>> ", err); |
|||
}); |
|||
}, |
|||
beforeRemove(file, fileList) { |
|||
if (this.file) { |
|||
return this.$confirm(`确定移除 ${file.name}？`); |
|||
} |
|||
}, |
|||
// 添加资金来源 |
|||
handleAddSupplement(index) { |
|||
if ( |
|||
this.formData.supplementList.length >= this.supplementOptions.length |
|||
) { |
|||
this.$message.warning("不能多于资金来源可选项最大数量"); |
|||
return; |
|||
} |
|||
this.formData.supplementList.splice(index + 1, 0, { |
|||
supplement: "", |
|||
money: 0, |
|||
}); |
|||
}, |
|||
// 删除资金来源 |
|||
handleDelSupplement(index) { |
|||
this.formData.supplementList.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.map((item) => { |
|||
return { |
|||
name: item.nickName, |
|||
uid: item.id, |
|||
}; |
|||
}); |
|||
}); |
|||
}, |
|||
handleRemoteLineData(e) { |
|||
getProjectCheckingLineRoute({ |
|||
data: { |
|||
lineName: e, |
|||
}, |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
}).then((res) => { |
|||
this.lineList = res.records; |
|||
}); |
|||
}, |
|||
submit(reset) { |
|||
console.log("提交表单 >>>> ", this.formData); |
|||
return new Promise((r, j) => { |
|||
Promise.all([ |
|||
this.$refs.formRef.validate(), |
|||
...this.$refs.supplementFormRef.map((item) => item.validate()), |
|||
]) |
|||
.then((res) => { |
|||
// 二次确认 |
|||
this.$confirm("确认提交吗？", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
(this.id ? putProjectCheckingPlan : postProjectCheckingPlan)({ |
|||
id: this.id || null, |
|||
...this.formData, |
|||
}) |
|||
.then((res) => { |
|||
this.$message.success("提交成功"); |
|||
if (reset) { |
|||
this.reset(); |
|||
} |
|||
r(); |
|||
}) |
|||
.catch(() => { |
|||
j(); |
|||
}); |
|||
}) |
|||
.catch(() => {}); |
|||
}) |
|||
.catch(() => { |
|||
j(); |
|||
}); |
|||
}); |
|||
}, |
|||
reset() { |
|||
this.formData = { |
|||
dikeName: "", |
|||
dikeCode: "", |
|||
dikeType: "", |
|||
operator: "", |
|||
reminderTime: "", |
|||
files: [], |
|||
otherConfig: { |
|||
options: {}, |
|||
}, |
|||
}; |
|||
|
|||
this.$refs.formRef.resetFields(); |
|||
if (this.$refs.subFormRef) { |
|||
this.$refs.subFormRef.forEach((item) => { |
|||
item.resetFields(); |
|||
}); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.detail-page { |
|||
width: 100%; |
|||
max-width: 1300px; |
|||
padding: 16px; |
|||
padding-bottom: 78px; |
|||
border-radius: 6px; |
|||
background-color: #fff; |
|||
.form-row-title { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
margin-bottom: 10px; |
|||
border-left: 4px solid #36b29e; |
|||
padding-left: 8px; |
|||
} |
|||
.w-100 { |
|||
width: 100px !important; |
|||
} |
|||
.w-240 { |
|||
width: 240px !important; |
|||
} |
|||
|
|||
.plan-list-item { |
|||
position: relative; |
|||
border: 1px solid #ebeef5; |
|||
border-radius: 4px; |
|||
padding: 16px; |
|||
margin-top: 16px; |
|||
} |
|||
|
|||
.del-btn { |
|||
cursor: pointer; |
|||
z-index: 1; |
|||
width: 18px; |
|||
font-size: 18px; |
|||
} |
|||
} |
|||
</style> |
|||
<style lang="scss"> |
|||
.detail-page { |
|||
.custom-select-cycleType { |
|||
.el-input__inner { |
|||
border-radius: 4px 0 0 4px; |
|||
} |
|||
} |
|||
.custom-select-date { |
|||
.el-input__inner { |
|||
border-radius: 0; |
|||
} |
|||
} |
|||
.custom-time-piker { |
|||
.el-input__inner { |
|||
border-radius: 0 4px 4px 0; |
|||
} |
|||
} |
|||
} |
|||
.custom-select-date-popper { |
|||
width: 202px !important; |
|||
padding-left: 10px; |
|||
.el-select-dropdown__list { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
.el-select-dropdown__item { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 0; |
|||
width: 42px; |
|||
height: 32px; |
|||
&.selected { |
|||
&::after { |
|||
display: none; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,612 @@ |
|||
<!-- 维修计划管理-堤防 --> |
|||
<script> |
|||
import { |
|||
putDFMaintenancePlan, |
|||
deleteDFMaintenancePlan, |
|||
postDFMaintenancePlan, |
|||
postDFMaintenancePlanList, |
|||
getDFMaintenancePlan, |
|||
} from "@/api/management"; |
|||
import { listJbxx } from "@/api/yg/dike/jbxx"; |
|||
import { getDikeYhPlanList } from "@/api/dike"; |
|||
import DikeBaseInfoDialog from "@/views/dike/runManage/components/DikeBaseInfoDialog/index.vue"; |
|||
|
|||
export default { |
|||
name: "InspectionItems", |
|||
components: { DikeBaseInfoDialog }, |
|||
data() { |
|||
return { |
|||
// 堤防详情弹窗 |
|||
baseInfoDialog: { |
|||
show: false, |
|||
id: "", |
|||
code: "", |
|||
}, |
|||
searchInput: "", |
|||
dialogVisible: false, |
|||
prohibitEditing: false, |
|||
dikeLevel: [ |
|||
{ |
|||
id: 1, |
|||
label: "全部", |
|||
value: 1, |
|||
}, |
|||
{ |
|||
id: 2, |
|||
label: "一级", |
|||
value: 2, |
|||
}, |
|||
{ |
|||
id: 3, |
|||
label: "二级", |
|||
value: 3, |
|||
}, |
|||
{ |
|||
id: 4, |
|||
label: "三级", |
|||
value: 4, |
|||
}, |
|||
{ |
|||
id: 5, |
|||
label: "四级", |
|||
value: 5, |
|||
}, |
|||
{ |
|||
id: 6, |
|||
label: "五级及以下", |
|||
value: 6, |
|||
}, |
|||
], // 堤防列表 |
|||
embankmentList: [], // 堤防名称列表 |
|||
searchLevel: 1, // 筛选堤防级别 |
|||
tableData: [], // 检查列表 |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0, // 总数量 |
|||
}, |
|||
ruleForm: { |
|||
dikeCode: "", |
|||
name: "", |
|||
planTime: "", |
|||
nationalSupplement: 0, |
|||
selfSupplement: 0, |
|||
budget: 0, |
|||
location: "", |
|||
content: "", |
|||
}, |
|||
rules: { |
|||
dikeCode: [ |
|||
{ required: true, message: "请选择堤防名称", trigger: "blur" }, |
|||
], |
|||
name: [ |
|||
{ required: true, message: "请输入维养计划名称", trigger: "blur" }, |
|||
{ max: 100, message: "名称最长为100个字符", trigger: "blur" }, |
|||
], |
|||
planTime: [ |
|||
{ required: true, message: "请选计划时间", trigger: "change" }, |
|||
], |
|||
nationalSupplement: [ |
|||
{ required: true, message: "请输入资金", trigger: "change" }, |
|||
], |
|||
selfSupplement: [ |
|||
{ required: true, message: "请输入资金", trigger: "change" }, |
|||
], |
|||
location: [ |
|||
{ required: true, message: "请输入具体地点", trigger: "change" }, |
|||
], |
|||
content: [ |
|||
{ required: true, message: "请输入维修养护内容", trigger: "change" }, |
|||
], |
|||
}, |
|||
tableHeight: null, |
|||
}; |
|||
}, |
|||
watch: { |
|||
dialogVisible(newVal, oldVal) { |
|||
if (oldVal) { |
|||
this.prohibitEditing = false; |
|||
} |
|||
}, |
|||
}, |
|||
methods: { |
|||
handleCurrentPageChange(page) { |
|||
this.pageData.pageNum = page; |
|||
this.getTableData(); |
|||
}, |
|||
handlePageSizeChange(pageSize) { |
|||
this.pageData.pageSize = pageSize; |
|||
this.getTableData(); |
|||
}, |
|||
// 删除对应维修计划 |
|||
deleteTableItem(row) { |
|||
deleteDFMaintenancePlan(row.id).then((res) => { |
|||
console.log("🚀res🚀", res); |
|||
this.getTableData(); |
|||
this.$message.success("删除成功"); |
|||
}); |
|||
}, |
|||
addPlan() { |
|||
this.ruleForm.dikeCode = this.$route.query.dikeCode; |
|||
this.dialogVisible = true; |
|||
}, |
|||
// 查看或编辑计划详情 |
|||
viewOrEditPlanDetails(row, edit = false) { |
|||
if (!edit) { |
|||
this.prohibitEditing = true; |
|||
} |
|||
getDFMaintenancePlan(row.id).then((res) => { |
|||
console.log("🚀res🚀", res); |
|||
this.ruleForm = res.data; |
|||
this.ruleForm.budget = |
|||
res.data.nationalSupplement + res.data.selfSupplement; |
|||
this.dialogVisible = true; |
|||
}); |
|||
}, |
|||
// 跳转记录页面 |
|||
goMaintenanceRecords(row) { |
|||
this.$router.push({ |
|||
path: "maintenanceRecords", |
|||
query: { |
|||
name: row.name, |
|||
dikeCode: row.dikeCode, |
|||
dikeName: row.dikeName, |
|||
}, |
|||
}); |
|||
}, |
|||
// 保存维修计划 |
|||
submitForm(formName) { |
|||
this.$refs[formName].validate((valid) => { |
|||
if (valid) { |
|||
if (this.ruleForm.id) { |
|||
putDFMaintenancePlan(this.ruleForm).then(() => { |
|||
this.getTableData(); |
|||
this.dialogVisible = false; |
|||
this.$message({ |
|||
message: "保存成功", |
|||
type: "success", |
|||
}); |
|||
}); |
|||
} else { |
|||
postDFMaintenancePlan(this.ruleForm).then(() => { |
|||
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 |
|||
closeDialog(ruleForm = "ruleForm") { |
|||
this.$refs[ruleForm].resetFields(); |
|||
this.ruleForm = { |
|||
dikeCode: "", |
|||
name: "", |
|||
planTime: "", |
|||
nationalSupplement: 0, |
|||
selfSupplement: 0, |
|||
location: "", |
|||
budget: 0, |
|||
content: "", |
|||
}; |
|||
}, |
|||
// 计算预算 |
|||
calculateBudget() { |
|||
this.ruleForm.budget = |
|||
Number(this.ruleForm.selfSupplement) + |
|||
Number(this.ruleForm.nationalSupplement); |
|||
}, |
|||
// 获取数据 |
|||
getTableData(value = "") { |
|||
getDikeYhPlanList({ |
|||
data: { |
|||
dikeCode: this.$route.query.dikeCode, |
|||
name: this.searchInput, |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like", |
|||
value, |
|||
}, |
|||
pageSize: this.pageData.pageSize, |
|||
pageNum: this.pageData.pageNum, |
|||
params: { |
|||
orderBy: "update_time", |
|||
sort: "desc", |
|||
}, |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.tableData = res.records; |
|||
this.pageData.total = res.total; |
|||
} |
|||
}); |
|||
}, |
|||
// 重置搜索 |
|||
resetSearch() { |
|||
this.searchInput = ""; |
|||
this.searchLevel = 1; |
|||
this.getTableData(); |
|||
}, |
|||
getEmbData(dikeName = "") { |
|||
listJbxx({ |
|||
pageNum: 1, |
|||
pageSize: 20, |
|||
ids: null, |
|||
data: { |
|||
embankmentName: dikeName, |
|||
endStationNumber: null, |
|||
embankmentType: null, |
|||
}, |
|||
// 排序方式 |
|||
params: { |
|||
// 按哪个字段排序 |
|||
orderBy: "create_time", |
|||
// desc降序，升序asc |
|||
sort: "desc", |
|||
}, |
|||
}).then((res) => { |
|||
this.embankmentList = res?.records || []; |
|||
}); |
|||
}, |
|||
handleChangeDike(value) { |
|||
let res = this.embankmentList.find((v) => v.dikeCode === value); |
|||
console.log("res >>>>> ", res); |
|||
this.baseInfoDialog.id = res?.id || ""; |
|||
this.baseInfoDialog.code = this.ruleForm.dikeCode; |
|||
}, |
|||
// 打开堤防详情 |
|||
handleOpenDetails() { |
|||
console.log("this.baseInfoDialog >>>>> ", this.baseInfoDialog); |
|||
if (this.baseInfoDialog.id) { |
|||
this.baseInfoDialog.show = true; |
|||
} else { |
|||
this.$message.warning("缺少id"); |
|||
} |
|||
}, |
|||
// 打开堤防地图 |
|||
handleOpenMap(dikeCode) { |
|||
if (dikeCode) { |
|||
} |
|||
}, |
|||
}, |
|||
mounted() { |
|||
// 获取列表数据 |
|||
this.getTableData(); |
|||
this.getEmbData(this.$route.query.dikeName); |
|||
this.tableHeight = document.documentElement.clientHeight - 256; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="slider-right"> |
|||
<div class="top-title"> |
|||
{{ $router.currentRoute.meta.title }} - {{ $route.query.dikeName }} |
|||
</div> |
|||
<div class="table-box" ref="containRef"> |
|||
<div class="top-search"> |
|||
<span>计划名称：</span> |
|||
<el-input |
|||
class="search-input" |
|||
v-model="searchInput" |
|||
placeholder="请输入维养计划名称" |
|||
/> |
|||
<el-button class="search-btn" type="success" @click="getTableData()" |
|||
>搜索</el-button |
|||
> |
|||
<el-button @click="resetSearch()">重置</el-button> |
|||
<el-button |
|||
class="search-btn" |
|||
style="margin-right: 16px; margin-bottom: 8px; float: right" |
|||
type="success" |
|||
@click="addPlan" |
|||
v-hasPermi="['df:run:main:plan:add']" |
|||
>添加</el-button |
|||
> |
|||
</div> |
|||
|
|||
<el-table class="table" :data="tableData" border> |
|||
<el-table-column type="index" align="center" label="序号" width="80" /> |
|||
<el-table-column prop="name" align="center" label="维养计划名称" /> |
|||
<el-table-column prop="dikeName" align="center" label="堤防名称" /> |
|||
<el-table-column prop="location" align="center" label="具体地点" /> |
|||
<el-table-column prop="content" align="center" label="维修养护内容" /> |
|||
<el-table-column prop="nationalSupplement" align="center" label="国补"> |
|||
<template #default="{ row }" |
|||
>{{ row.nationalSupplement }}万元</template |
|||
> |
|||
</el-table-column> |
|||
<el-table-column prop="selfSupplement" align="center" label="自筹"> |
|||
<template #default="{ row }">{{ row.selfSupplement }}万元</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="createTime" |
|||
align="center" |
|||
sortable |
|||
label="创建时间" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="updateTime" |
|||
align="center" |
|||
sortable |
|||
label="更新时间" |
|||
> |
|||
</el-table-column> |
|||
<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" |
|||
v-hasPermi="['df:run:main:plan:edit']" |
|||
>编辑</el-button |
|||
> |
|||
<el-button |
|||
style="margin-right: 9px" |
|||
type="text" |
|||
size="small" |
|||
v-hasPermi="['df:run:main:record:view']" |
|||
@click="goMaintenanceRecords(scope.row)" |
|||
>记录</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" |
|||
v-hasPermi="['df:run:main:plan:delete']" |
|||
>删除</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" |
|||
@current-change="(e) => handleCurrentPageChange(e)" |
|||
@size-change="(e) => handlePageSizeChange(e)" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
|
|||
<el-dialog |
|||
title="新增/编辑维养计划" |
|||
@close="closeDialog" |
|||
:visible.sync="dialogVisible" |
|||
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-select |
|||
v-model="ruleForm.dikeCode" |
|||
:disabled="true" |
|||
placeholder="请选择" |
|||
@change="handleChangeDike" |
|||
> |
|||
<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="ml-6" |
|||
type="success" |
|||
size="small" |
|||
@click="handleOpenDetails" |
|||
>详情</el-button |
|||
> |
|||
<el-button :disabled="true" class="ml-6" type="info" size="small" |
|||
>打开地图</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="planTime"> |
|||
<el-date-picker |
|||
v-model="ruleForm.planTime" |
|||
type="month" |
|||
placeholder="选择月" |
|||
:disabled="prohibitEditing" |
|||
value-format="yyyy-MM-dd" |
|||
> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
</div> |
|||
<div style="display: flex"> |
|||
<el-form-item |
|||
label-width="120px" |
|||
label="国补资金" |
|||
prop="nationalSupplement" |
|||
> |
|||
<el-input-number |
|||
style="width: 90px" |
|||
v-model="ruleForm.nationalSupplement" |
|||
:min="0" |
|||
:precision="4" |
|||
:controls="false" |
|||
@input="calculateBudget()" |
|||
placeholder="请输入" |
|||
:disabled="prohibitEditing" |
|||
/> |
|||
万元 |
|||
</el-form-item> |
|||
<el-form-item |
|||
label-width="98px" |
|||
label="自筹资金" |
|||
prop="selfSupplement" |
|||
> |
|||
<el-input-number |
|||
style="width: 90px" |
|||
v-model="ruleForm.selfSupplement" |
|||
type="number" |
|||
:min="0" |
|||
:precision="4" |
|||
:controls="false" |
|||
@input="calculateBudget()" |
|||
placeholder="请输入" |
|||
:disabled="prohibitEditing" |
|||
/> |
|||
万元 |
|||
</el-form-item> |
|||
<el-form-item label-width="98px" label="项目预算"> |
|||
<el-input style="width: 90px" v-model="ruleForm.budget" disabled /> |
|||
</el-form-item> |
|||
</div> |
|||
<el-form-item label-width="120px" label="具体地点" prop="location"> |
|||
<el-input |
|||
style="width: 542px" |
|||
:autosize="{ minRows: 5 }" |
|||
type="textarea" |
|||
maxlength="500" |
|||
show-word-limit |
|||
v-model="ruleForm.location" |
|||
placeholder="请输入" |
|||
:disabled="prohibitEditing" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label-width="120px" label="维修养护内容" prop="content"> |
|||
<el-input |
|||
style="width: 542px" |
|||
:autosize="{ minRows: 5 }" |
|||
type="textarea" |
|||
maxlength="500" |
|||
show-word-limit |
|||
v-model="ruleForm.content" |
|||
placeholder="请输入" |
|||
:disabled="prohibitEditing" |
|||
/> |
|||
</el-form-item> |
|||
</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> |
|||
|
|||
<DikeBaseInfoDialog |
|||
v-model="baseInfoDialog.show" |
|||
:id="baseInfoDialog.id" |
|||
:code="baseInfoDialog.code" |
|||
></DikeBaseInfoDialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"> |
|||
.top-title { |
|||
height: 50px; |
|||
background-color: white; |
|||
display: flex; |
|||
padding-left: 16px; |
|||
align-items: center; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.table-box { |
|||
// height: calc(100% - 16px); |
|||
margin-top: 24px; |
|||
padding: 16px; |
|||
padding-bottom: 60px; |
|||
background-color: white; |
|||
|
|||
.top-search { |
|||
margin-bottom: 8px; |
|||
|
|||
.search-input { |
|||
width: 300px; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.search-btn { |
|||
margin-left: 10px; |
|||
// background-color: #37b29e; |
|||
border: none; |
|||
|
|||
// &:hover { |
|||
// background-color: #5ac6b9; |
|||
// } |
|||
|
|||
// &:active { |
|||
// background-color: #2b8070; |
|||
// } |
|||
} |
|||
|
|||
.ml-6 { |
|||
margin-left: 6px; |
|||
} |
|||
|
|||
/deep/.el-input__count { |
|||
height: 15px; |
|||
line-height: 15px; |
|||
margin-right: 10px; |
|||
margin-bottom: -4px; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,658 @@ |
|||
<!-- 巡查计划管理-堤防 --> |
|||
<script> |
|||
import { |
|||
postDFInspectionPlan, |
|||
putDFInspectionPlan, |
|||
postDFInspectionProjectList, |
|||
getDFInspectionPlan, |
|||
deleteDFInspectionPlan, |
|||
listUser, |
|||
} from "@/api/management"; |
|||
|
|||
import { deleteProjectCheckingPlan, getDikeYhPlanList } from "@/api/dike"; |
|||
|
|||
import TopBackTitle from "@/components/TopBackTitle/index.vue"; |
|||
import { getAreasData } from "@/api/areas/index"; |
|||
|
|||
import { uploadFileData } from "@/api/system/upload"; |
|||
import { reqCountMixins } from "@/mixins/reqCount"; |
|||
|
|||
export default { |
|||
name: "InspectionItems", |
|||
components: { |
|||
TopBackTitle, |
|||
}, |
|||
mixins: [reqCountMixins], |
|||
data() { |
|||
return { |
|||
paramsData: { |
|||
status: "", |
|||
adcd: "", |
|||
dikeName: "", |
|||
dikeType: "", |
|||
name: "", |
|||
planDateArr: [], |
|||
}, |
|||
currentRow: {}, |
|||
dialogVisible: false, |
|||
patrolType: [], // 巡查周期类型 |
|||
personnelList: [], // 人员列表 |
|||
areasOptions: [], |
|||
embankmentTypeOptions: [], |
|||
examType: [], // 检查类型 |
|||
tableData: [], // 检查列表 |
|||
patrolTableData: [], // 巡查项目列表 |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0, // 总数量 |
|||
}, |
|||
tableCheckData: [], // 选中的数据 |
|||
ruleForm: { |
|||
dikeCode: this.$route.query.dikeCode || "", |
|||
name: "", |
|||
type: "", |
|||
xcId: "", |
|||
frequency: "", |
|||
cycleType: "0", |
|||
isReminder: true, |
|||
reminderTime: "", |
|||
operators: [], |
|||
files: [], //依据 |
|||
otherConfig: { |
|||
week: "", |
|||
time: "", |
|||
selectUser: [], |
|||
}, |
|||
}, |
|||
rules: { |
|||
name: [ |
|||
{ required: true, message: "请输入计划名称", trigger: "change" }, |
|||
{ max: 50, message: "名称最长为50个字符", trigger: "change" }, |
|||
], |
|||
type: [ |
|||
{ required: true, message: "请选择巡查类型", trigger: "change" }, |
|||
], |
|||
xcId: [ |
|||
{ required: true, message: "请选择巡查项目名称", trigger: "change" }, |
|||
], |
|||
cycleType: [ |
|||
{ required: true, message: "请选择巡查周期", trigger: "change" }, |
|||
], |
|||
frequency: [ |
|||
{ required: true, message: "请输入巡查次数", trigger: "blur" }, |
|||
], |
|||
isReminder: [ |
|||
{ required: true, message: "请选择消息提醒", trigger: "change" }, |
|||
], |
|||
"otherConfig.time": [ |
|||
{ required: true, message: "请选择检查时间", trigger: "change" }, |
|||
], |
|||
reminderTime: [ |
|||
{ required: true, message: "请选择提醒时间", trigger: "change" }, |
|||
], |
|||
"otherConfig.selectUser": [ |
|||
{ required: true, message: "请选择责任人", trigger: "change" }, |
|||
], |
|||
}, |
|||
}; |
|||
}, |
|||
computed: { |
|||
disabledUpload() { |
|||
return this.ruleForm?.files?.length >= 9; |
|||
}, |
|||
}, |
|||
methods: { |
|||
handleCurrentPageChange(page) { |
|||
this.pageData.pageNum = page; |
|||
this.getTableData(); |
|||
}, |
|||
handlePageSizeChange(pageSize) { |
|||
this.pageData.pageSize = pageSize; |
|||
this.getTableData(); |
|||
}, |
|||
handleAdd() { |
|||
this.$router.push({ |
|||
path: "createMaintenancePlan", |
|||
}); |
|||
}, |
|||
// 获取行政区数据 |
|||
getTreeData() { |
|||
getAreasData().then((items) => { |
|||
// console.log("getAreasData", items.data); |
|||
let res = []; |
|||
let getChildren = (res, pid) => { |
|||
for (const i of items.data) { |
|||
if (i.parentid === pid) { |
|||
const newItem = { |
|||
label: i.name, |
|||
value: i.id, |
|||
}; |
|||
if (i.layer != 3) newItem.children = []; |
|||
res.push(newItem); |
|||
getChildren(newItem.children, newItem.value); |
|||
} |
|||
} |
|||
}; |
|||
getChildren(res, items.data[0].parentid); |
|||
this.areasOptions = res; |
|||
}); |
|||
}, |
|||
// 查看巡查项目 |
|||
handleCheck(row) { |
|||
this.currentRow = row; |
|||
this.dialogVisible = true; |
|||
}, |
|||
// 编辑巡查项目 |
|||
handleEdit(row) { |
|||
this.$router.push({ |
|||
path: "createInspectionPlan", |
|||
query: { |
|||
id: row.id, |
|||
}, |
|||
}); |
|||
}, |
|||
// 删除对应巡查项目 |
|||
deleteTableItem(row) { |
|||
deleteDFInspectionPlan(row.id).then((res) => { |
|||
this.getTableData(); |
|||
this.$message.success("删除成功"); |
|||
}); |
|||
}, |
|||
// 查看详情 |
|||
submitForm(formName) { |
|||
console.log("保存 >>> ", this.ruleForm); |
|||
this.$refs[formName].validate((valid) => { |
|||
if (valid) { |
|||
let user = []; |
|||
this.ruleForm.otherConfig.selectUser?.forEach((element) => { |
|||
let a = { |
|||
name: element.nickName, |
|||
uid: element.id, |
|||
}; |
|||
user.push(a); |
|||
}); |
|||
this.ruleForm.operators = user; |
|||
if (this.ruleForm.id) { |
|||
putDFInspectionPlan(this.ruleForm).then((res) => { |
|||
this.getTableData(); |
|||
this.dialogVisible = false; |
|||
this.$message.success("更新成功"); |
|||
}); |
|||
} else { |
|||
postDFInspectionPlan(this.ruleForm).then((res) => { |
|||
this.getTableData(); |
|||
this.dialogVisible = false; |
|||
this.$message.success("添加成功"); |
|||
}); |
|||
} |
|||
} else { |
|||
console.log("校验不通过"); |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
// 更改巡查类型 |
|||
changePatrolType(ruleForm, reset) { |
|||
if (reset) { |
|||
this.$set(ruleForm, "xcId", ""); |
|||
} |
|||
setTimeout(() => { |
|||
this.$refs.ruleForm.validateField("frequency"); |
|||
this.$refs.ruleForm.validateField("otherConfig.time"); |
|||
}, 30); |
|||
postDFInspectionProjectList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time", |
|||
}, |
|||
type: ruleForm.type, |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like", |
|||
}, |
|||
pageSize: 999, |
|||
pageNum: 1, |
|||
}).then((res) => { |
|||
this.patrolTableData = res.records; |
|||
}); |
|||
}, |
|||
// 获取数据 |
|||
getTableData() { |
|||
getDikeYhPlanList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time", |
|||
}, |
|||
adcd: this.paramsData.adcd, |
|||
name: this.paramsData.name, |
|||
startTime: this.paramsData.planDateArr[0] |
|||
? this.paramsData.planDateArr[0] + " 00:00:00" |
|||
: "", |
|||
endTime: this.paramsData.planDateArr[1] |
|||
? this.paramsData.planDateArr[1] + " 23:59:59" |
|||
: "", |
|||
dikeName: this.paramsData.dikeName, |
|||
dikeType: this.paramsData.dikeType, |
|||
}, |
|||
pageSize: this.pageData.pageSize, |
|||
pageNum: this.pageData.pageNum, |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.tableData = res.records; |
|||
this.pageData.total = res.total; |
|||
} |
|||
}); |
|||
}, |
|||
// 批量删除 |
|||
handleDelAll() { |
|||
if (this.tableCheckData.length === 0) { |
|||
this.$message.warning("请选择要删除的数据"); |
|||
return; |
|||
} |
|||
this.$confirm("是否删除选中的记录?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
console.log("删除"); |
|||
const ids = this.tableCheckData.map((item) => item.id); |
|||
deleteProjectCheckingPlan(ids.join(",")).then((res) => { |
|||
if (res) { |
|||
this.$message.success("删除成功"); |
|||
this.getTableData(); |
|||
} |
|||
}); |
|||
}) |
|||
.catch(() => { |
|||
console.log("取消删除"); |
|||
}); |
|||
}, |
|||
// 上传前 |
|||
beforeUpload(e) { |
|||
console.log("beforeUpload >>>>> ", e); |
|||
if (this.ruleForm.files?.length >= 9) { |
|||
return false; |
|||
} |
|||
return true; |
|||
}, |
|||
handleUpload(e) { |
|||
const { file } = e; |
|||
let formData = new FormData(); |
|||
formData.append("file", file); |
|||
uploadFileData(formData) |
|||
.then((res) => { |
|||
console.log("上传结果 >>>>> ", res); |
|||
this.ruleForm.files.push(res.url); |
|||
}) |
|||
.catch((err) => { |
|||
console.log("err >>>>> ", err); |
|||
}); |
|||
}, |
|||
handleDelFile(_url, index) { |
|||
this.ruleForm.files.splice(index, 1); |
|||
}, |
|||
handleSelectionChange(e) { |
|||
this.tableCheckData = e || []; |
|||
}, |
|||
handleChangeQuery() { |
|||
this.reqCountCalc(); |
|||
this.pageData.pageNum = 1; |
|||
this.tableData = []; |
|||
this.getTableData(); |
|||
}, |
|||
handleResetQuery() { |
|||
this.paramsData.adcd = ""; |
|||
this.paramsData.name = ""; |
|||
this.paramsData.planDateArr = []; |
|||
this.paramsData.dikeName = ""; |
|||
this.paramsData.dikeType = ""; |
|||
|
|||
this.reqCountCalc(); |
|||
this.pageData.pageNum = 1; |
|||
this.getTableData(); |
|||
}, |
|||
getDikeTypeName(type) { |
|||
let name = ""; |
|||
this.embankmentTypeOptions?.forEach((element) => { |
|||
if (element.dictValue === type) { |
|||
name = element.dictLabel; |
|||
} |
|||
}); |
|||
return name || type; |
|||
}, |
|||
}, |
|||
created() { |
|||
this.getTreeData(); |
|||
this.getDicts("embankment_type").then((response) => { |
|||
this.embankmentTypeOptions = response.data; |
|||
}); |
|||
this.getDicts("xs_classfy").then((res) => { |
|||
if (res.data && Array.isArray(res.data)) { |
|||
res.data?.forEach((element) => { |
|||
element.dictValue = element.dictValue; |
|||
}); |
|||
this.examType = res.data; |
|||
} |
|||
}); |
|||
this.getDicts("xs_cycle_type").then((res) => { |
|||
this.patrolType = res.data; |
|||
}); |
|||
}, |
|||
mounted() { |
|||
// 获取列表数据 |
|||
this.getTableData(); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="slider-right"> |
|||
<TopBackTitle :showBackBtn="false"></TopBackTitle> |
|||
<div class="table-box slider-right-body"> |
|||
<div class="search-form flex flex-wrap"> |
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">行政区划</span> |
|||
<el-cascader |
|||
:options="areasOptions" |
|||
v-model="paramsData.adcd" |
|||
:props="{ |
|||
emitPath: false, |
|||
checkStrictly: true, |
|||
}" |
|||
placeholder="请选择行政区划" |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
> |
|||
</el-cascader> |
|||
</div> |
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">堤防名称</span> |
|||
<el-input |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
:maxlength="50" |
|||
v-model="paramsData.dikeName" |
|||
placeholder="请输入名称" |
|||
/> |
|||
</div> |
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">堤防类型</span> |
|||
<el-select |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
v-model="paramsData.dikeType" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""> </el-option> |
|||
<el-option |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
v-for="(item, index) in embankmentTypeOptions" |
|||
:key="index" |
|||
></el-option> |
|||
</el-select> |
|||
</div> |
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">维养计划名称</span> |
|||
<el-input |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
:maxlength="50" |
|||
v-model="paramsData.name" |
|||
placeholder="请输入名称" |
|||
/> |
|||
</div> |
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">维养计划日期</span> |
|||
<el-date-picker |
|||
clearable |
|||
size="small" |
|||
class="ml-10" |
|||
v-model="paramsData.planDateArr" |
|||
type="daterange" |
|||
placeholder="开始日期" |
|||
value-format="yyyy-MM-dd" |
|||
></el-date-picker> |
|||
</div> |
|||
<div class="flex-1 flex justify-end search-item"> |
|||
<el-button |
|||
size="small" |
|||
class="flex-shrink-0 myml-12" |
|||
type="success" |
|||
@click="handleChangeQuery" |
|||
>查询</el-button |
|||
> |
|||
<el-button |
|||
class="flex-shrink-0" |
|||
size="small" |
|||
@click="handleResetQuery" |
|||
>重置</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
<div class="line"></div> |
|||
<div class="flex justify-between mb-16"> |
|||
<el-radio-group |
|||
v-model="paramsData.status" |
|||
@tab-click="handleChangeQuery" |
|||
> |
|||
<el-radio-button label="">全部</el-radio-button> |
|||
<el-radio-button label="1">待验收</el-radio-button> |
|||
<el-radio-button label="2">已驳回重整</el-radio-button> |
|||
<el-radio-button label="3">已通过验收</el-radio-button> |
|||
</el-radio-group> |
|||
<div> |
|||
<el-button type="primary" size="small" @click="handleAdd" |
|||
>新增</el-button |
|||
> |
|||
<el-button |
|||
type="danger" |
|||
size="small" |
|||
@click="handleDelAll" |
|||
v-hasPermi="['df:run:inspection:plan:delAll']" |
|||
>删除</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
|
|||
<el-table |
|||
:data="tableData" |
|||
border |
|||
@selection-change="handleSelectionChange" |
|||
> |
|||
<el-table-column type="selection" width="55"></el-table-column> |
|||
<el-table-column prop="dikeName" align="center" label="堤防名称" /> |
|||
<el-table-column prop="dikeType" align="center" label="堤防类型"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ getDikeTypeName(scope.row.dikeType) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="name" align="center" label="维养计划名称" /> |
|||
<el-table-column prop="name" align="center" label="维养类型" /> |
|||
<el-table-column prop="name" align="center" label="完成维养时间" /> |
|||
<el-table-column prop="unit" align="center" label="维养单位"> |
|||
</el-table-column> |
|||
<el-table-column prop="unit" align="center" label="维养负责人"> |
|||
</el-table-column> |
|||
<el-table-column prop="unit" align="center" label="资金使用"> |
|||
</el-table-column> |
|||
<el-table-column prop="createTime" align="center" label="提交时间"> |
|||
</el-table-column> |
|||
<el-table-column prop="doneTime" align="center" label="验收时间"> |
|||
</el-table-column> |
|||
<el-table-column prop="auditContent" align="center" label="审批意见"> |
|||
</el-table-column> |
|||
<el-table-column prop="auditContent" align="center" label="审批材料"> |
|||
</el-table-column> |
|||
<el-table-column prop="status" align="center" label="状态"> |
|||
<template slot-scope="scope"> |
|||
<span |
|||
v-if="scope.row.status == 0" |
|||
style="color: #f56c6c; font-weight: 600" |
|||
>待提交</span |
|||
> |
|||
<span |
|||
v-else-if="scope.row.status == 1" |
|||
style="color: #67c23a; font-weight: 600" |
|||
>审批中</span |
|||
> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="operate" |
|||
align="center" |
|||
label="操作" |
|||
fixed="right" |
|||
width="180" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
style="margin-right: 16px" |
|||
type="text" |
|||
size="small" |
|||
@click="handleCheck(scope.row)" |
|||
>查看</el-button |
|||
> |
|||
<el-button |
|||
style="margin-right: 16px" |
|||
@click="handleEdit(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
>通过</el-button |
|||
> |
|||
|
|||
<el-button |
|||
style="margin-right: 16px; color: red" |
|||
@click="handleEdit(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="(e) => handlePageSizeChange(e)" |
|||
@current-change="(e) => handleCurrentPageChange(e)" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
<el-drawer |
|||
title="计划详情" |
|||
:visible.sync="dialogVisible" |
|||
direction="rtl" |
|||
size="80%" |
|||
:destroy-on-close="true" |
|||
> |
|||
<div class="drawer-body"> |
|||
<!-- <PlanDetail |
|||
ref="formRef" |
|||
:id="currentRow.id" |
|||
:canEdit="false" |
|||
></PlanDetail> --> |
|||
</div> |
|||
<div class="drawer-footer p-16"> |
|||
<el-button size="mini" type="primary" @click="handleEdit(currentRow)" |
|||
>编辑</el-button |
|||
> |
|||
<el-button size="mini" @click="dialogVisible = false">取消</el-button> |
|||
</div> |
|||
</el-drawer> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"> |
|||
.search-form { |
|||
.search-item { |
|||
margin-bottom: 16px; |
|||
.search-label { |
|||
width: 100px; |
|||
text-align: right; |
|||
flex-shrink: 0; |
|||
} |
|||
} |
|||
} |
|||
.line { |
|||
background: #e5e5e5; |
|||
width: 100%; |
|||
height: 1px; |
|||
margin-top: 8px; |
|||
margin-bottom: 24px; |
|||
} |
|||
|
|||
.top-title { |
|||
height: 50px; |
|||
background-color: white; |
|||
display: flex; |
|||
padding-left: 16px; |
|||
align-items: center; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.table-box { |
|||
// height: calc(100% - 50px - 24px); |
|||
margin-top: 24px; |
|||
padding: 16px; |
|||
padding-bottom: 60px; |
|||
background-color: white; |
|||
|
|||
.top-search { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 8px; |
|||
|
|||
.search-input { |
|||
width: 300px; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
|
|||
.search-btn { |
|||
margin-left: 10px; |
|||
background-color: #37b29e; |
|||
border: none; |
|||
|
|||
&:hover { |
|||
background-color: #5ac6b9; |
|||
} |
|||
|
|||
&:active { |
|||
background-color: #2b8070; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.drawer-footer { |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
z-index: 2; |
|||
border-top: 1px solid #ebeef5; |
|||
background: #fff; |
|||
} |
|||
|
|||
.drawer-body { |
|||
height: 100%; |
|||
padding: 0 16px; |
|||
padding-bottom: 72px; |
|||
overflow: auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,668 @@ |
|||
<!-- 巡查计划管理-堤防 --> |
|||
<script> |
|||
import { |
|||
postDFInspectionPlan, |
|||
putDFInspectionPlan, |
|||
postDFInspectionProjectList, |
|||
getDFInspectionPlan, |
|||
deleteDFInspectionPlan, |
|||
listUser, |
|||
} from "@/api/management"; |
|||
|
|||
import { deleteProjectCheckingPlan, getDikeYhPlanList } from "@/api/dike"; |
|||
|
|||
import TopBackTitle from "@/components/TopBackTitle/index.vue"; |
|||
import { getAreasData } from "@/api/areas/index"; |
|||
|
|||
import { uploadFileData } from "@/api/system/upload"; |
|||
import { reqCountMixins } from "@/mixins/reqCount"; |
|||
|
|||
export default { |
|||
name: "InspectionItems", |
|||
components: { |
|||
TopBackTitle, |
|||
}, |
|||
mixins: [reqCountMixins], |
|||
data() { |
|||
return { |
|||
paramsData: { |
|||
status: "", |
|||
adcd: "", |
|||
dikeName: "", |
|||
dikeType: "", |
|||
name: "", |
|||
planDateArr: [], |
|||
}, |
|||
currentRow: {}, |
|||
dialogVisible: false, |
|||
patrolType: [], // 巡查周期类型 |
|||
personnelList: [], // 人员列表 |
|||
areasOptions: [], |
|||
embankmentTypeOptions: [], |
|||
examType: [], // 检查类型 |
|||
tableData: [], // 检查列表 |
|||
patrolTableData: [], // 巡查项目列表 |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0, // 总数量 |
|||
}, |
|||
tableCheckData: [], // 选中的数据 |
|||
ruleForm: { |
|||
dikeCode: this.$route.query.dikeCode || "", |
|||
name: "", |
|||
type: "", |
|||
xcId: "", |
|||
frequency: "", |
|||
cycleType: "0", |
|||
isReminder: true, |
|||
reminderTime: "", |
|||
operators: [], |
|||
files: [], //依据 |
|||
otherConfig: { |
|||
week: "", |
|||
time: "", |
|||
selectUser: [], |
|||
}, |
|||
}, |
|||
rules: { |
|||
name: [ |
|||
{ required: true, message: "请输入计划名称", trigger: "change" }, |
|||
{ max: 50, message: "名称最长为50个字符", trigger: "change" }, |
|||
], |
|||
type: [ |
|||
{ required: true, message: "请选择巡查类型", trigger: "change" }, |
|||
], |
|||
xcId: [ |
|||
{ required: true, message: "请选择巡查项目名称", trigger: "change" }, |
|||
], |
|||
cycleType: [ |
|||
{ required: true, message: "请选择巡查周期", trigger: "change" }, |
|||
], |
|||
frequency: [ |
|||
{ required: true, message: "请输入巡查次数", trigger: "blur" }, |
|||
], |
|||
isReminder: [ |
|||
{ required: true, message: "请选择消息提醒", trigger: "change" }, |
|||
], |
|||
"otherConfig.time": [ |
|||
{ required: true, message: "请选择检查时间", trigger: "change" }, |
|||
], |
|||
reminderTime: [ |
|||
{ required: true, message: "请选择提醒时间", trigger: "change" }, |
|||
], |
|||
"otherConfig.selectUser": [ |
|||
{ required: true, message: "请选择责任人", trigger: "change" }, |
|||
], |
|||
}, |
|||
}; |
|||
}, |
|||
computed: { |
|||
disabledUpload() { |
|||
return this.ruleForm?.files?.length >= 9; |
|||
}, |
|||
}, |
|||
methods: { |
|||
handleCurrentPageChange(page) { |
|||
this.pageData.pageNum = page; |
|||
this.getTableData(); |
|||
}, |
|||
handlePageSizeChange(pageSize) { |
|||
this.pageData.pageSize = pageSize; |
|||
this.getTableData(); |
|||
}, |
|||
handleAdd() { |
|||
this.$router.push({ |
|||
path: "createMaintenancePlan", |
|||
}); |
|||
}, |
|||
// 获取行政区数据 |
|||
getTreeData() { |
|||
getAreasData().then((items) => { |
|||
// console.log("getAreasData", items.data); |
|||
let res = []; |
|||
let getChildren = (res, pid) => { |
|||
for (const i of items.data) { |
|||
if (i.parentid === pid) { |
|||
const newItem = { |
|||
label: i.name, |
|||
value: i.id, |
|||
}; |
|||
if (i.layer != 3) newItem.children = []; |
|||
res.push(newItem); |
|||
getChildren(newItem.children, newItem.value); |
|||
} |
|||
} |
|||
}; |
|||
getChildren(res, items.data[0].parentid); |
|||
this.areasOptions = res; |
|||
}); |
|||
}, |
|||
// 查看巡查项目 |
|||
handleCheck(row) { |
|||
this.currentRow = row; |
|||
this.dialogVisible = true; |
|||
}, |
|||
// 编辑巡查项目 |
|||
handleEdit(row) { |
|||
this.$router.push({ |
|||
path: "createInspectionPlan", |
|||
query: { |
|||
id: row.id, |
|||
}, |
|||
}); |
|||
}, |
|||
// 删除对应巡查项目 |
|||
deleteTableItem(row) { |
|||
deleteDFInspectionPlan(row.id).then((res) => { |
|||
this.getTableData(); |
|||
this.$message.success("删除成功"); |
|||
}); |
|||
}, |
|||
// 查看详情 |
|||
submitForm(formName) { |
|||
console.log("保存 >>> ", this.ruleForm); |
|||
this.$refs[formName].validate((valid) => { |
|||
if (valid) { |
|||
let user = []; |
|||
this.ruleForm.otherConfig.selectUser?.forEach((element) => { |
|||
let a = { |
|||
name: element.nickName, |
|||
uid: element.id, |
|||
}; |
|||
user.push(a); |
|||
}); |
|||
this.ruleForm.operators = user; |
|||
if (this.ruleForm.id) { |
|||
putDFInspectionPlan(this.ruleForm).then((res) => { |
|||
this.getTableData(); |
|||
this.dialogVisible = false; |
|||
this.$message.success("更新成功"); |
|||
}); |
|||
} else { |
|||
postDFInspectionPlan(this.ruleForm).then((res) => { |
|||
this.getTableData(); |
|||
this.dialogVisible = false; |
|||
this.$message.success("添加成功"); |
|||
}); |
|||
} |
|||
} else { |
|||
console.log("校验不通过"); |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
// 更改巡查类型 |
|||
changePatrolType(ruleForm, reset) { |
|||
if (reset) { |
|||
this.$set(ruleForm, "xcId", ""); |
|||
} |
|||
setTimeout(() => { |
|||
this.$refs.ruleForm.validateField("frequency"); |
|||
this.$refs.ruleForm.validateField("otherConfig.time"); |
|||
}, 30); |
|||
postDFInspectionProjectList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time", |
|||
}, |
|||
type: ruleForm.type, |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like", |
|||
}, |
|||
pageSize: 999, |
|||
pageNum: 1, |
|||
}).then((res) => { |
|||
this.patrolTableData = res.records; |
|||
}); |
|||
}, |
|||
// 获取数据 |
|||
getTableData() { |
|||
getDikeYhPlanList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time", |
|||
}, |
|||
adcd: this.paramsData.adcd, |
|||
name: this.paramsData.name, |
|||
startTime: this.paramsData.planDateArr[0] |
|||
? this.paramsData.planDateArr[0] + " 00:00:00" |
|||
: "", |
|||
endTime: this.paramsData.planDateArr[1] |
|||
? this.paramsData.planDateArr[1] + " 23:59:59" |
|||
: "", |
|||
dikeName: this.paramsData.dikeName, |
|||
dikeType: this.paramsData.dikeType, |
|||
}, |
|||
pageSize: this.pageData.pageSize, |
|||
pageNum: this.pageData.pageNum, |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.tableData = res.records; |
|||
this.pageData.total = res.total; |
|||
} |
|||
}); |
|||
}, |
|||
// 批量删除 |
|||
handleDelAll() { |
|||
if (this.tableCheckData.length === 0) { |
|||
this.$message.warning("请选择要删除的数据"); |
|||
return; |
|||
} |
|||
this.$confirm("是否删除选中的记录?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
console.log("删除"); |
|||
const ids = this.tableCheckData.map((item) => item.id); |
|||
deleteProjectCheckingPlan(ids.join(",")).then((res) => { |
|||
if (res) { |
|||
this.$message.success("删除成功"); |
|||
this.getTableData(); |
|||
} |
|||
}); |
|||
}) |
|||
.catch(() => { |
|||
console.log("取消删除"); |
|||
}); |
|||
}, |
|||
// 上传前 |
|||
beforeUpload(e) { |
|||
console.log("beforeUpload >>>>> ", e); |
|||
if (this.ruleForm.files?.length >= 9) { |
|||
return false; |
|||
} |
|||
return true; |
|||
}, |
|||
handleUpload(e) { |
|||
const { file } = e; |
|||
let formData = new FormData(); |
|||
formData.append("file", file); |
|||
uploadFileData(formData) |
|||
.then((res) => { |
|||
console.log("上传结果 >>>>> ", res); |
|||
this.ruleForm.files.push(res.url); |
|||
}) |
|||
.catch((err) => { |
|||
console.log("err >>>>> ", err); |
|||
}); |
|||
}, |
|||
handleDelFile(_url, index) { |
|||
this.ruleForm.files.splice(index, 1); |
|||
}, |
|||
handleSelectionChange(e) { |
|||
this.tableCheckData = e || []; |
|||
}, |
|||
handleChangeQuery() { |
|||
this.reqCountCalc(); |
|||
this.pageData.pageNum = 1; |
|||
this.tableData = []; |
|||
this.getTableData(); |
|||
}, |
|||
handleResetQuery() { |
|||
this.paramsData.adcd = ""; |
|||
this.paramsData.name = ""; |
|||
this.paramsData.planDateArr = []; |
|||
this.paramsData.dikeName = ""; |
|||
this.paramsData.dikeType = ""; |
|||
|
|||
this.reqCountCalc(); |
|||
this.pageData.pageNum = 1; |
|||
this.getTableData(); |
|||
}, |
|||
getDikeTypeName(type) { |
|||
let name = ""; |
|||
this.embankmentTypeOptions?.forEach((element) => { |
|||
if (element.dictValue === type) { |
|||
name = element.dictLabel; |
|||
} |
|||
}); |
|||
return name || type; |
|||
}, |
|||
}, |
|||
created() { |
|||
this.getTreeData(); |
|||
this.getDicts("embankment_type").then((response) => { |
|||
this.embankmentTypeOptions = response.data; |
|||
}); |
|||
this.getDicts("xs_classfy").then((res) => { |
|||
if (res.data && Array.isArray(res.data)) { |
|||
res.data?.forEach((element) => { |
|||
element.dictValue = element.dictValue; |
|||
}); |
|||
this.examType = res.data; |
|||
} |
|||
}); |
|||
this.getDicts("xs_cycle_type").then((res) => { |
|||
this.patrolType = res.data; |
|||
}); |
|||
}, |
|||
mounted() { |
|||
// 获取列表数据 |
|||
this.getTableData(); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="slider-right"> |
|||
<TopBackTitle :showBackBtn="false"></TopBackTitle> |
|||
<div class="table-box slider-right-body"> |
|||
<div class="search-form flex flex-wrap"> |
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">行政区划</span> |
|||
<el-cascader |
|||
:options="areasOptions" |
|||
v-model="paramsData.adcd" |
|||
:props="{ |
|||
emitPath: false, |
|||
checkStrictly: true, |
|||
}" |
|||
placeholder="请选择行政区划" |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
> |
|||
</el-cascader> |
|||
</div> |
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">堤防名称</span> |
|||
<el-input |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
:maxlength="50" |
|||
v-model="paramsData.dikeName" |
|||
placeholder="请输入名称" |
|||
/> |
|||
</div> |
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">堤防类型</span> |
|||
<el-select |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
v-model="paramsData.dikeType" |
|||
:popper-append-to-body="false" |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option label="全部" value=""> </el-option> |
|||
<el-option |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
v-for="(item, index) in embankmentTypeOptions" |
|||
:key="index" |
|||
></el-option> |
|||
</el-select> |
|||
</div> |
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">维养计划名称</span> |
|||
<el-input |
|||
clearable |
|||
size="small" |
|||
class="w-202 ml-10" |
|||
:maxlength="50" |
|||
v-model="paramsData.name" |
|||
placeholder="请输入名称" |
|||
/> |
|||
</div> |
|||
<div class="search-item flex items-center"> |
|||
<span class="search-label">维养计划日期</span> |
|||
<el-date-picker |
|||
clearable |
|||
size="small" |
|||
class="ml-10" |
|||
v-model="paramsData.planDateArr" |
|||
type="daterange" |
|||
placeholder="开始日期" |
|||
value-format="yyyy-MM-dd" |
|||
></el-date-picker> |
|||
</div> |
|||
<div class="flex-1 flex justify-end search-item"> |
|||
<el-button |
|||
size="small" |
|||
class="flex-shrink-0 myml-12" |
|||
type="success" |
|||
@click="handleChangeQuery" |
|||
>查询</el-button |
|||
> |
|||
<el-button |
|||
class="flex-shrink-0" |
|||
size="small" |
|||
@click="handleResetQuery" |
|||
>重置</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
<div class="line"></div> |
|||
<div class="flex justify-between mb-16"> |
|||
<el-radio-group |
|||
v-model="paramsData.status" |
|||
@tab-click="handleChangeQuery" |
|||
> |
|||
<el-radio-button label="">全部</el-radio-button> |
|||
<el-radio-button label="1">待审批</el-radio-button> |
|||
<el-radio-button label="2">已驳回</el-radio-button> |
|||
<el-radio-button label="3">已通过</el-radio-button> |
|||
</el-radio-group> |
|||
<div> |
|||
<el-button type="primary" size="small" @click="handleAdd" |
|||
>新增</el-button |
|||
> |
|||
<el-button |
|||
type="danger" |
|||
size="small" |
|||
@click="handleDelAll" |
|||
v-hasPermi="['df:run:inspection:plan:delAll']" |
|||
>删除</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
|
|||
<el-table |
|||
:data="tableData" |
|||
border |
|||
@selection-change="handleSelectionChange" |
|||
> |
|||
<el-table-column type="selection" width="55"></el-table-column> |
|||
<el-table-column prop="dikeName" align="center" label="堤防名称" /> |
|||
<el-table-column prop="dikeType" align="center" label="堤防类型"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ getDikeTypeName(scope.row.dikeType) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="name" align="center" label="维养计划名称" /> |
|||
<el-table-column prop="name" align="center" label="维养类型" /> |
|||
<el-table-column |
|||
prop="startDate" |
|||
align="center" |
|||
label="计划开始/结束时间" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.startDate }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="unit" align="center" label="维养单位"> |
|||
</el-table-column> |
|||
<el-table-column prop="unit" align="center" label="维养负责人"> |
|||
</el-table-column> |
|||
<el-table-column prop="unit" align="center" label="资金计划"> |
|||
</el-table-column> |
|||
<el-table-column prop="unit" align="center" label="维修计划方案"> |
|||
</el-table-column> |
|||
<el-table-column prop="createTime" align="center" label="提交时间"> |
|||
</el-table-column> |
|||
<el-table-column prop="doneTime" align="center" label="审批时间"> |
|||
</el-table-column> |
|||
<el-table-column prop="auditContent" align="center" label="审批意见"> |
|||
</el-table-column> |
|||
<el-table-column prop="auditContent" align="center" label="审批材料"> |
|||
</el-table-column> |
|||
<el-table-column prop="status" align="center" label="状态"> |
|||
<template slot-scope="scope"> |
|||
<span |
|||
v-if="scope.row.status == 0" |
|||
style="color: #f56c6c; font-weight: 600" |
|||
>待提交</span |
|||
> |
|||
<span |
|||
v-else-if="scope.row.status == 1" |
|||
style="color: #67c23a; font-weight: 600" |
|||
>审批中</span |
|||
> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="operate" |
|||
align="center" |
|||
label="操作" |
|||
fixed="right" |
|||
width="180" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
style="margin-right: 16px" |
|||
type="text" |
|||
size="small" |
|||
@click="handleCheck(scope.row)" |
|||
>查看</el-button |
|||
> |
|||
<el-button |
|||
style="margin-right: 16px" |
|||
@click="handleEdit(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
>通过</el-button |
|||
> |
|||
|
|||
<el-button |
|||
style="margin-right: 16px; color: red" |
|||
@click="handleEdit(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="(e) => handlePageSizeChange(e)" |
|||
@current-change="(e) => handleCurrentPageChange(e)" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
<el-drawer |
|||
title="计划详情" |
|||
:visible.sync="dialogVisible" |
|||
direction="rtl" |
|||
size="80%" |
|||
:destroy-on-close="true" |
|||
> |
|||
<div class="drawer-body"> |
|||
<!-- <PlanDetail |
|||
ref="formRef" |
|||
:id="currentRow.id" |
|||
:canEdit="false" |
|||
></PlanDetail> --> |
|||
</div> |
|||
<div class="drawer-footer p-16"> |
|||
<el-button size="mini" type="primary" @click="handleEdit(currentRow)" |
|||
>编辑</el-button |
|||
> |
|||
<el-button size="mini" @click="dialogVisible = false">取消</el-button> |
|||
</div> |
|||
</el-drawer> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"> |
|||
.search-form { |
|||
.search-item { |
|||
margin-bottom: 16px; |
|||
.search-label { |
|||
width: 100px; |
|||
text-align: right; |
|||
flex-shrink: 0; |
|||
} |
|||
} |
|||
} |
|||
.line { |
|||
background: #e5e5e5; |
|||
width: 100%; |
|||
height: 1px; |
|||
margin-top: 8px; |
|||
margin-bottom: 24px; |
|||
} |
|||
|
|||
.top-title { |
|||
height: 50px; |
|||
background-color: white; |
|||
display: flex; |
|||
padding-left: 16px; |
|||
align-items: center; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.table-box { |
|||
// height: calc(100% - 50px - 24px); |
|||
margin-top: 24px; |
|||
padding: 16px; |
|||
padding-bottom: 60px; |
|||
background-color: white; |
|||
|
|||
.top-search { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 8px; |
|||
|
|||
.search-input { |
|||
width: 300px; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
|
|||
.search-btn { |
|||
margin-left: 10px; |
|||
background-color: #37b29e; |
|||
border: none; |
|||
|
|||
&:hover { |
|||
background-color: #5ac6b9; |
|||
} |
|||
|
|||
&:active { |
|||
background-color: #2b8070; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.drawer-footer { |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
z-index: 2; |
|||
border-top: 1px solid #ebeef5; |
|||
background: #fff; |
|||
} |
|||
|
|||
.drawer-body { |
|||
height: 100%; |
|||
padding: 0 16px; |
|||
padding-bottom: 72px; |
|||
overflow: auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,63 @@ |
|||
<template> |
|||
<div class="slider-right create-route-page"> |
|||
<TopBackTitle></TopBackTitle> |
|||
<div class="slider-right-body"> |
|||
<RecordDetail></RecordDetail> |
|||
<div class="bottom-btns"> |
|||
<el-button type="primary" size="small" @click="handleSave(false)" |
|||
>保存</el-button |
|||
> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
v-if="!id" |
|||
@click="handleSave(true)" |
|||
>保存并继续新增</el-button |
|||
> |
|||
<el-button size="small" @click="handleCancel">取消</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import TopBackTitle from "@/components/TopBackTitle/index.vue"; |
|||
import RecordDetail from "./components/RecordDetail.vue"; |
|||
|
|||
export default { |
|||
components: { |
|||
TopBackTitle, |
|||
RecordDetail, |
|||
}, |
|||
data() { |
|||
return { |
|||
id: this.$route.query.id, |
|||
}; |
|||
}, |
|||
created() {}, |
|||
methods: { |
|||
handleSave(reset) { |
|||
this.$refs.formRef.submit(reset).then((res) => { |
|||
if (!reset) { |
|||
this.$router.go(-1); |
|||
} |
|||
}); |
|||
}, |
|||
handleCancel() { |
|||
// 二次确认 |
|||
this.$confirm("是否取消编辑？", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
this.$router.go(-1); |
|||
}) |
|||
.catch(() => {}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.create-route-page { |
|||
} |
|||
</style> |
|||
@ -0,0 +1,282 @@ |
|||
<template> |
|||
<div class="record-detail"> |
|||
<el-form :model="ruleForm" :rules="rules" ref="ruleForm"> |
|||
<el-form-item label-width="130px" label="维养计划名称" prop="planId"> |
|||
<el-select |
|||
v-model="ruleForm.planId" |
|||
filterable |
|||
remote |
|||
:remote-method="searchPlan" |
|||
placeholder="请输入" |
|||
@change="changeSelectPlan" |
|||
> |
|||
<el-option |
|||
v-for="item in planList" |
|||
:key="item.id" |
|||
:label="item.name" |
|||
:value="item.id" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<div style="display: flex"> |
|||
<el-form-item label-width="130px" label="堤防名称"> |
|||
<el-input v-model="planData.dikeName" disabled /> |
|||
</el-form-item> |
|||
<el-form-item label-width="130px" label="计划时间"> |
|||
<el-date-picker v-model="planData.planTime" type="month" disabled> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
</div> |
|||
<div style="display: flex"> |
|||
<el-form-item label-width="130px" label="国补资金"> |
|||
<div style="display: flex"> |
|||
<el-input |
|||
v-model="planData.nationalSupplement" |
|||
type="number" |
|||
disabled |
|||
style="margin-right: 5px" |
|||
/> |
|||
<div style="width: 50px">万元</div> |
|||
</div> |
|||
</el-form-item> |
|||
<el-form-item label-width="90px" label="自筹资金"> |
|||
<div style="display: flex"> |
|||
<el-input |
|||
v-model="planData.selfSupplement" |
|||
type="number" |
|||
disabled |
|||
style="margin-right: 5px" |
|||
/> |
|||
<div style="width: 50px">万元</div> |
|||
</div> |
|||
</el-form-item> |
|||
<el-form-item label-width="90px" label="项目预算"> |
|||
<el-input v-model="planData.budget" disabled /> |
|||
</el-form-item> |
|||
</div> |
|||
<el-form-item label-width="130px" label="具体地点"> |
|||
<el-input |
|||
:autosize="{ minRows: 5 }" |
|||
type="textarea" |
|||
maxlength="500" |
|||
show-word-limit |
|||
v-model="planData.location" |
|||
disabled |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label-width="130px" label="维修养护内容"> |
|||
<el-input |
|||
:autosize="{ minRows: 5 }" |
|||
type="textarea" |
|||
maxlength="500" |
|||
show-word-limit |
|||
v-model="planData.content" |
|||
disabled |
|||
/> |
|||
</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="130px" label="维修养护前" prop="before"> |
|||
<el-input |
|||
v-model="ruleForm.before" |
|||
placeholder="请输入" |
|||
maxlength="100" |
|||
style="width: 202px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label-width="130px" label="维修养护过程" prop="middle"> |
|||
<el-input |
|||
v-model="ruleForm.middle" |
|||
placeholder="请输入" |
|||
maxlength="100" |
|||
style="width: 202px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label-width="130px" label="维修养护结束后" prop="after"> |
|||
<el-input |
|||
v-model="ruleForm.after" |
|||
placeholder="请输入" |
|||
maxlength="100" |
|||
style="width: 202px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item |
|||
label-width="130px" |
|||
label="维修养护费用" |
|||
prop="maintenanceFunds" |
|||
> |
|||
<el-input-number |
|||
v-model="ruleForm.maintenanceFunds" |
|||
placeholder="请输入" |
|||
style="width: 165px" |
|||
:min="0" |
|||
:precision="4" |
|||
:controls="false" |
|||
/> |
|||
万元 |
|||
</el-form-item> |
|||
<el-form-item label-width="130px" label="养护人员" prop="operators"> |
|||
<!-- <el-input v-model="ruleForm.operators" placeholder="请输入" style="width: 202px;" /> --> |
|||
<el-select |
|||
v-model="ruleForm.selectUser" |
|||
multiple |
|||
filterable |
|||
remote |
|||
:remote-method="searchUser" |
|||
value-key="id" |
|||
placeholder="请输入关键词搜索用户" |
|||
prop="selectUser" |
|||
> |
|||
<el-option |
|||
v-for="item in personnelList" |
|||
:key="item.id" |
|||
:label="item.nickName" |
|||
:value="item" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label-width="130px" label="落实情况" prop="implement"> |
|||
<el-input |
|||
:autosize="{ minRows: 5 }" |
|||
type="textarea" |
|||
maxlength="500" |
|||
show-word-limit |
|||
v-model="ruleForm.implement" |
|||
placeholder="请输入" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label-width="130px" label="备注" prop="remark"> |
|||
<el-input |
|||
:autosize="{ minRows: 5 }" |
|||
type="textarea" |
|||
maxlength="500" |
|||
show-word-limit |
|||
v-model="ruleForm.remark" |
|||
placeholder="请输入" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { |
|||
putDFMaintenanceRecords, |
|||
deleteDFMaintenanceRecords, |
|||
postDFMaintenanceRecords, |
|||
getDFMaintenanceRecords, |
|||
getDicts, |
|||
postDFMaintenancePlanList, |
|||
getDFMaintenancePlan, |
|||
listUser, |
|||
} from "@/api/management"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
ruleForm: { |
|||
name: "", |
|||
planId: "", |
|||
before: "", |
|||
middle: "", |
|||
after: "", |
|||
maintenanceFunds: 0, |
|||
operators: [], |
|||
selectUser: [], |
|||
implement: "", |
|||
remark: "", |
|||
status: "0", |
|||
}, |
|||
rules: { |
|||
planId: [ |
|||
{ required: false, message: "请输入维养计划名称", trigger: "blur" }, |
|||
], |
|||
before: [ |
|||
{ required: true, message: "请输入维修养护前", trigger: "blur" }, |
|||
], |
|||
middle: [ |
|||
{ required: true, message: "请输入维修养护过程", trigger: "blur" }, |
|||
], |
|||
after: [ |
|||
{ required: true, message: "请输入维修养护结束后", trigger: "blur" }, |
|||
], |
|||
}, |
|||
planList: [], |
|||
planData: {}, |
|||
personnelList: [], |
|||
}; |
|||
}, |
|||
created() {}, |
|||
methods: { |
|||
// 搜索计划 |
|||
searchPlan(value) { |
|||
postDFMaintenancePlanList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time", |
|||
}, |
|||
dikeCode: this.$route.query.dikeCode, |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like", |
|||
value, |
|||
}, |
|||
pageSize: 100, |
|||
pageNum: 1, |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.planList = res.records; |
|||
} |
|||
}); |
|||
}, |
|||
// 改变选中计划 |
|||
changeSelectPlan() { |
|||
// let p = this.planList.find((item) => item.id === this.ruleForm.planId); |
|||
// this.baseInfoDialog.id = p?.dikeId; |
|||
// this.baseInfoDialog.code = p?.dikeCode; |
|||
// getDFMaintenancePlan(this.ruleForm.planId).then((res) => { |
|||
// if (res.data) { |
|||
// this.ruleForm.name = res.data.name; |
|||
// this.planData = res.data; |
|||
// this.planData.budget = |
|||
// res.data.nationalSupplement + res.data.selfSupplement; |
|||
// } |
|||
// }); |
|||
}, |
|||
// 搜索用户 |
|||
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; |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.record-detail { |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue