panyuyi
10 months ago
1 changed files with 619 additions and 0 deletions
@ -0,0 +1,619 @@ |
|||
<template> |
|||
<div class="route-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 |
|||
: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> |
|||
<el-form-item label="堤防巡查责任人" prop="dutyHolder" class="ml-24"> |
|||
<el-input |
|||
class="w-240" |
|||
size="small" |
|||
v-model="formData.dutyHolder" |
|||
:disabled="true" |
|||
placeholder="" |
|||
></el-input> |
|||
</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"> |
|||
<div class="w-240"> |
|||
<el-radio-group :disabled="!canEdit" v-model="formData.type"> |
|||
<el-radio label="0">年度计划</el-radio> |
|||
<el-radio label="1">月度计划</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
</el-form-item> |
|||
<el-form-item label="巡查提醒" prop="cycleType" class="ml-24"> |
|||
<el-select |
|||
:disabled="!canEdit" |
|||
size="small" |
|||
class="w-100" |
|||
v-model="formData.cycleType" |
|||
placeholder="请选择" |
|||
@change="handleChangeRemindType" |
|||
> |
|||
<el-option label="每月提醒" value="1"> </el-option> |
|||
<el-option label="每周提醒" value="2"> </el-option> |
|||
<el-option label="每日提醒" value="3"> </el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item |
|||
label="" |
|||
style="padding-top: 46px" |
|||
prop="otherConfig.reminderDays" |
|||
v-if="formData.cycleType == '1'" |
|||
> |
|||
<el-select |
|||
:disabled="!canEdit" |
|||
size="small" |
|||
multiple |
|||
v-model="formData.otherConfig.reminderDays" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in 31" |
|||
:key="item" |
|||
:label="`${item}日`" |
|||
:value="item" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item |
|||
label="" |
|||
style="padding-top: 46px" |
|||
v-else-if="formData.cycleType == '2'" |
|||
prop="otherConfig.reminderWeeks" |
|||
> |
|||
<el-checkbox-group |
|||
:disabled="!canEdit" |
|||
size="small" |
|||
v-model="formData.otherConfig.reminderWeeks" |
|||
> |
|||
<el-checkbox-button :label="1">周一</el-checkbox-button> |
|||
<el-checkbox-button :label="2">周二</el-checkbox-button> |
|||
<el-checkbox-button :label="3">周三</el-checkbox-button> |
|||
<el-checkbox-button :label="4">周四</el-checkbox-button> |
|||
<el-checkbox-button :label="5">周五</el-checkbox-button> |
|||
<el-checkbox-button :label="6">周六</el-checkbox-button> |
|||
<el-checkbox-button :label="7">周日</el-checkbox-button> |
|||
</el-checkbox-group> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="" style="padding-top: 46px" prop="reminderTime"> |
|||
<el-time-picker |
|||
:disabled="!canEdit" |
|||
size="small" |
|||
v-model="formData.reminderTime" |
|||
value-format="2024-06-05 HH:mm:ss" |
|||
placeholder="选择时间" |
|||
> |
|||
</el-time-picker> |
|||
</el-form-item> |
|||
</div> |
|||
<div> |
|||
<el-form-item label="巡查频率" prop="frequency"> |
|||
<el-input |
|||
:disabled="!canEdit" |
|||
class="w-240" |
|||
type="number" |
|||
size="small" |
|||
v-model="formData.frequency" |
|||
placeholder="请输入" |
|||
:max="999" |
|||
:min="0" |
|||
></el-input> |
|||
<span class="ml-4">次/月</span> |
|||
</el-form-item> |
|||
</div> |
|||
<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" |
|||
:limit="5" |
|||
: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="plan-list-item" |
|||
v-for="(item, index) in formData.contents" |
|||
:key="index" |
|||
> |
|||
<div class="flex justify-between"> |
|||
<div style="color: #262626; font-size: 16px; font-weight: 700"> |
|||
子项{{ index + 1 }} |
|||
</div> |
|||
<el-popconfirm |
|||
v-if="formData.contents.length > 1" |
|||
:disabled="!canEdit" |
|||
title="确定删除？" |
|||
@confirm="handleDelPlanItem(index)" |
|||
> |
|||
<el-button slot="reference" type="danger" plain size="small" |
|||
>删除</el-button |
|||
> |
|||
</el-popconfirm> |
|||
</div> |
|||
<div class="flex items-start flex-wrap"> |
|||
<el-form-item label="子项名称" prop="subItemName"> |
|||
<el-input |
|||
:disabled="!canEdit" |
|||
class="w-240" |
|||
size="small" |
|||
v-model="item.name" |
|||
placeholder="请输入名称" |
|||
maxlength="50" |
|||
></el-input> |
|||
</el-form-item> |
|||
<el-form-item |
|||
label="计划周期(起止)" |
|||
prop="planDateTimeArr" |
|||
class="ml-24" |
|||
> |
|||
<el-date-picker |
|||
:disabled="!canEdit" |
|||
size="small" |
|||
v-model="item.planDateTimeArr" |
|||
type="daterange" |
|||
range-separator="至" |
|||
value-format="yyyy-MM-dd" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item label="巡查人员" prop="operator" class="ml-24"> |
|||
<el-select |
|||
:disabled="!canEdit" |
|||
class="w-240" |
|||
v-model="item.operator" |
|||
multiple |
|||
filterable |
|||
remote |
|||
:remote-method="searchUser" |
|||
value-key="id" |
|||
placeholder="请输入关键词搜索用户" |
|||
> |
|||
<el-option |
|||
v-for="item in personnelList" |
|||
:key="item.id" |
|||
:label="item.name" |
|||
:value="item" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</div> |
|||
<el-form-item label="巡查范围" prop="scope"> |
|||
<!-- <el-radio></el-radio> --> |
|||
<div>暂无数据</div> |
|||
</el-form-item> |
|||
<el-form-item label="巡查路线(推荐)" prop="lineId"> |
|||
<el-select |
|||
:disabled="!canEdit" |
|||
class="w-240" |
|||
v-model="item.lineId" |
|||
filterable |
|||
remote |
|||
:remote-method="handleRemoteLineData" |
|||
value-key="id" |
|||
placeholder="请输入关键词搜索路线" |
|||
> |
|||
<el-option |
|||
v-for="item in lineList" |
|||
:key="item.id" |
|||
:label="item.name" |
|||
:value="item.id" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="巡查重点检查部位和内容" prop="remark"> |
|||
<el-input |
|||
:disabled="!canEdit" |
|||
size="small" |
|||
type="textarea" |
|||
:rows="3" |
|||
v-model="item.remark" |
|||
:maxlength="500" |
|||
></el-input> |
|||
</el-form-item> |
|||
</div> |
|||
<div |
|||
class="flex justify-start !mt-16" |
|||
v-if="canEdit && formData.contents.length <= 50" |
|||
> |
|||
<el-button |
|||
class="w-120" |
|||
type="primary" |
|||
@click="handleAddNewPlan" |
|||
icon="el-icon-plus" |
|||
>新增子项</el-button |
|||
> |
|||
</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: "", |
|||
operator: "", |
|||
cycleType: "1", |
|||
reminderTime: "", |
|||
files: [], |
|||
otherConfig: { |
|||
options: {}, |
|||
reminderDays: [], |
|||
reminderWeeks: [], |
|||
}, |
|||
contents: [ |
|||
{ |
|||
planDateTimeArr: [], |
|||
startDate: "", |
|||
endDate: "", |
|||
operator: [], |
|||
scope: "", |
|||
lineId: "", |
|||
remark: "", |
|||
status: "0", |
|||
}, |
|||
], |
|||
}, |
|||
rules: { |
|||
dikeName: [ |
|||
{ required: true, message: "请选择堤防", trigger: "change" }, |
|||
], |
|||
name: [{ required: true, message: "请输入计划名称", trigger: "blur" }], |
|||
type: [ |
|||
{ required: true, message: "请选择计划类型", trigger: "change" }, |
|||
], |
|||
cycleType: [ |
|||
{ required: true, message: "请选择类型", trigger: "change" }, |
|||
], |
|||
"otherConfig.reminderDays": [ |
|||
{ required: true, message: "请选择", trigger: "change" }, |
|||
], |
|||
"otherConfig.reminderWeeks": [ |
|||
{ required: true, message: "请选择", trigger: "change" }, |
|||
], |
|||
reminderTime: [ |
|||
{ required: true, message: "请选择", trigger: "change" }, |
|||
], |
|||
frequency: [{ required: true, message: "请输入", trigger: "blur" }], |
|||
}, |
|||
filesList: [], |
|||
dikeList: [], |
|||
projectTypeOptions: [], |
|||
personnelList: [], // 人员列表 |
|||
lineList: [], // 线路列表 |
|||
}; |
|||
}, |
|||
watch: { |
|||
id: { |
|||
handler(val) { |
|||
if (val) { |
|||
this.getDetail(); |
|||
} |
|||
}, |
|||
immediate: true, |
|||
}, |
|||
}, |
|||
created() { |
|||
this.searchUser(); |
|||
this.getDicts("embankment_type").then((response) => { |
|||
this.projectTypeOptions = response.data; |
|||
}); |
|||
}, |
|||
methods: { |
|||
getDetail() { |
|||
getProjectCheckingPlanDetails(this.id).then((res) => { |
|||
console.log("res >>>>> ", res); |
|||
this.formData = res.data; |
|||
this.formData.contents?.forEach((v) => { |
|||
if (v.startDate && v.endDate) { |
|||
v.planDateTimeArr = [v.startDate, v.endDate]; |
|||
} |
|||
}); |
|||
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.dutyHolders = res.dutyHolders; |
|||
}, |
|||
handleGetRemoteDikeMethod(query) { |
|||
console.log("query >>>>> ", query); |
|||
getRunProjectList({ |
|||
pageSize: 10, |
|||
pageNum: 1, |
|||
cv: { |
|||
name: "dikeName", |
|||
type: "like", |
|||
value: query, |
|||
}, |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.dikeList = res.records; |
|||
} |
|||
}); |
|||
}, |
|||
// 上传前 |
|||
beforeUpload(e) { |
|||
if (this.formData.files?.length >= 5) { |
|||
this.$message.warning("最多上传5份"); |
|||
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}？`); |
|||
} |
|||
}, |
|||
handleChangeRemindType() { |
|||
this.formData.remindTime = ""; |
|||
this.formData.remindDay = []; |
|||
}, |
|||
handleAddNewPlan() { |
|||
this.formData.contents.push({ |
|||
planDateTimeArr: [], |
|||
startDate: "", |
|||
endDate: "", |
|||
operator: [], |
|||
scope: "", |
|||
lineId: "", |
|||
remark: "", |
|||
status: "0", |
|||
}); |
|||
}, |
|||
handleDelPlanItem(index) { |
|||
this.formData.contents.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 { |
|||
id: item.id, |
|||
name: item.nickName, |
|||
uid: item.uuid, |
|||
}; |
|||
}); |
|||
}); |
|||
}, |
|||
handleRemoteLineData(e) { |
|||
getProjectCheckingLineRoute({ |
|||
data: { |
|||
name: e, |
|||
}, |
|||
pageNum: 1, |
|||
pageSize: 50, |
|||
}).then((res) => { |
|||
this.lineList = res.records; |
|||
}); |
|||
}, |
|||
submit(reset) { |
|||
console.log("提交表单 >>>> ", this.formData); |
|||
return new Promise((r, j) => { |
|||
this.$refs.formRef.validate((valid) => { |
|||
if (valid) { |
|||
this.formData.contents.forEach((item) => { |
|||
item.startDate = item.planDateTimeArr[0] |
|||
? item.planDateTimeArr[0] + " 00:00:00" |
|||
: ""; |
|||
item.endDate = item.planDateTimeArr[1] |
|||
? item.planDateTimeArr[1] + " 23:59:59" |
|||
: ""; |
|||
}); |
|||
(this.id ? putProjectCheckingPlan : postProjectCheckingPlan)({ |
|||
id: this.id || null, |
|||
...this.formData, |
|||
}) |
|||
.then((res) => { |
|||
this.$message.success("提交成功"); |
|||
if (reset) { |
|||
this.reset(); |
|||
} |
|||
r(); |
|||
}) |
|||
.catch(() => { |
|||
j(); |
|||
}); |
|||
} else { |
|||
j(); |
|||
} |
|||
}); |
|||
}); |
|||
}, |
|||
reset() { |
|||
this.formData = { |
|||
dikeName: "", |
|||
dikeCode: "", |
|||
dikeType: "", |
|||
operator: "", |
|||
cycleType: "1", |
|||
reminderTime: "", |
|||
files: [], |
|||
otherConfig: { |
|||
options: {}, |
|||
reminderDays: [], |
|||
reminderWeeks: [], |
|||
}, |
|||
contents: [ |
|||
{ |
|||
planDateTimeArr: [], |
|||
startDate: "", |
|||
endDate: "", |
|||
operator: [], |
|||
scope: "", |
|||
lineId: "", |
|||
remark: "", |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
this.$refs.formRef.resetFields(); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.route-detail-page { |
|||
width: 100%; |
|||
max-width: 1232px; |
|||
padding: 16px; |
|||
padding-bottom: 78px; |
|||
border-radius: 6px; |
|||
.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> |
|||
Loading…
Reference in new issue