panyuyi
10 months ago
1 changed files with 0 additions and 619 deletions
@ -1,619 +0,0 @@ |
|||||
<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