You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

771 lines
22 KiB

<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="wagaName">
<el-select
:disabled="!canEdit || type === 'audit'"
class="w-240"
size="small"
remote
filterable
reserve-keyword
:maxlength="50"
:remote-method="handleGetRemoteDikeMethod"
@focus="handleGetRemoteDikeMethod('')"
@change="handleChangeDike"
v-model="formData.wagaName"
placeholder="请选择水闸"
>
<el-option
v-for="item in dikeList"
:key="item.id"
:label="item.wagaName"
:value="item.wagaName"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="水闸类型" prop="wagaType" class="ml-24">
<el-select
v-model="formData.wagaType"
: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 || type === 'audit'"
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 || type === 'audit'"
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 === 'audit'"
type="daterange"
size="small"
v-model="formData.planTimeArr"
placeholder="选择时间"
>
</el-date-picker>
</el-form-item>
</div>
<el-form
v-for="(subItem, subIndex) in formData.supplements"
ref="supplementFormRef"
label-position="top"
:model="subItem"
:rules="supplementRules"
label-width="120px"
:key="subIndex"
>
<div class="flex items-center">
<el-form-item label="资金来源" prop="type">
<el-select
:disabled="!canEdit || type === 'audit'"
size="small"
class="w-240"
v-model="subItem.type"
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="amount" class="ml-24">
<el-input-number
:disabled="!canEdit || type === 'audit'"
class="w-240"
size="small"
:min="0"
:max="9999999999"
v-model="subItem.amount"
placeholder="请输入"
></el-input-number>
<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.supplements.length > 1"
style="font-size: 20px; color: #f26161"
></i>
</div>
</el-form>
<div class="flex items-start">
<el-form-item label="维养计划方案" prop="projectFiles">
<el-upload
:disabled="!canEdit || type === 'audit'"
class=""
action="#"
:http-request="handleUploadProject"
:before-upload="beforeUploadProject"
:on-remove="handleRemoveProject"
:on-preview="handlePreview"
accept=".docx,.doc,.pdf"
show-file-list
:file-list="projectList"
>
<el-button size="small" :disabled="!canEdit || type === 'audit'" 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="engineeringUnit">
<el-input
:disabled="!canEdit || type === 'audit'"
class="w-240"
size="small"
maxlength="50"
v-model="formData.engineeringUnit"
placeholder="请输入"
></el-input>
</el-form-item>
</div>
<div class="flex items-center">
<el-form-item label="维养负责人" prop="responsiblePerson" class="">
<el-select
:disabled="!canEdit || type === 'audit'"
class="w-240"
v-model="formData.responsiblePerson"
filterable
remote
:remote-method="searchUser"
value-key="uid"
placeholder="请输入关键词搜索用户"
>
<el-option
v-for="item in personnelList"
:key="item.uid"
:label="item.name"
:value="item"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="维养提醒" prop="reminderTime" class="ml-24">
<el-date-picker
class="custom-time-piker"
:disabled="!canEdit || type === 'audit'"
size="small"
type="datetime"
v-model="formData.reminderTime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择时间"
>
</el-date-picker>
</el-form-item>
</div>
<el-row :gutter="20" v-if="type === 'audit' && canEdit">
<el-col :span="12">
<el-form-item label="审批意见" prop="comment">
<el-input
:disabled="!canEdit"
size="small"
:rows="5"
type="textarea"
maxlength="500"
v-model="formData.comment"
placeholder="请输入,文字限制500字内"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="审批文件" prop="files">
<el-upload
:disabled="!canEdit"
class=""
action="#"
:http-request="handleUpload"
:before-upload="beforeUpload"
:on-remove="handleRemove"
:on-preview="handlePreview"
accept=".docx,.doc,.pdf"
show-file-list
:file-list="filesList"
>
<el-button size="small" :disabled="!canEdit" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
文件支持docx、doc、pdf,文件大小100M以内,文件数量不能超过5份
</div>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<div v-if="!canEdit">
<div class="form-row-title">验收意见</div>
<el-timeline :reverse="true">
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:timestamp="activity.approvalTime">
<div>审批意见: {{activity.comment}}</div>
<div>审批附件: {{
activity.docs &&
activity.docs.docs &&
activity.docs.docs
.map((v) => v.split("/")[v.split("/").length - 1])
.join("、")
}}</div>
</el-timeline-item>
</el-timeline>
</div>
</el-form>
<el-dialog
:title="dialog.title"
@close="closeDialog"
:visible.sync="dialog.visible"
width="80%"
append-to-body
>
<preview v-if="dialog.visible" :url="preViewFile"></preview>
</el-dialog>
</div>
</template>
<script>
import dayjs from "dayjs";
import { listUser } from "@/api/management";
import {
getRunProjectList,
putRunSzYhPlan,
postRunSzYhPlanApprovalPassed,
postRunSzYhPlanApprovalRejected,
getRunSzYhPlanApprovalComment,
getRunSzYhPlan,
postRunSzYhPlan,
} from "@/api/sluice";
import { uploadFileData } from "@/api/system/upload";
import preview from "@/views/dike/runManage/dispatch/plan/components/preview.vue";
export default {
components: {preview},
props: {
id: String,
auditId: String,
type: String,
canEdit: Boolean,
},
data() {
return {
formData: {
wagaName: "",
wagaCode: "",
wagaType: "",
type: "0",
engineeringUnit: "",
planTimeArr: [],
startDate: "",
endDate: "",
reminderTime: "",
responsiblePerson: null,
supplements: [
{
supplement: "",
amount: 0,
},
],
doc: {
docs: [], // 文档
images: [], // 图片
audios: [],
},
},
dialog: {
title: '预览',
dom: '',
visible: false
},
preViewFile: '',
activities: [],
rules: {
wagaName: [
{ required: true, message: "请选择水闸", trigger: "change" },
],
name: [{ required: true, message: "请输入计划名称", trigger: "blur" }],
comment: [{ required: true, message: "请输入审批意见", trigger: "blur" }],
type: [
{ required: true, message: "请选择计划类型", trigger: "change" },
],
projectFiles: [
{ required: true, validator: this.validatorProjectList },
]
},
supplementRules: {
type: [
{ required: true, message: "请选择资金类型", trigger: "change" },
],
amount: [{ required: true, message: "请输入金额", trigger: "blur" }],
},
projectList: [], // 计划方案
filesList: [], // 审批文件
dikeList: [], // 水闸列表
projectTypeOptions: [], // 水闸类型
yhPlanTypeOptions: [], // 计划类型
personnelList: [], // 人员列表
supplementOptions: [], // 资金类型列表
};
},
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: {
// 关闭dialog
closeDialog() {
this.dialog.visible = false
},
handlePreview(file) {
this.preViewFile = file.url
this.dialog.visible = true
},
handleRemove(file, fileList) {
this.filesList = fileList
},
handleRemoveProject(file, fileList) {
this.projectList = fileList
},
// 获取详情
getDetail() {
getRunSzYhPlan({id: this.id}).then((res) => {
this.formData = res.data;
this.formData.planTimeArr = this.formData.startDate
? [this.formData.startDate, this.formData.endDate]
: [];
this.projectList =
res.data?.doc?.docs?.map((item) => {
let arr = item.split("/");
let name = arr[arr.length - 1];
return {
name: name,
url: item,
};
}) || [];
});
if (!this.canEdit) {
getRunSzYhPlanApprovalComment({formId: this.id}).then((res) => {
console.log(res)
this.activities = res.data
});
}
},
// 验证计划方案
validatorProjectList(rule, value, callback) {
if (this.projectList.length === 0) {
callback(new Error("请上传计划方案"));
} else {
callback();
}
},
// 选择水闸
handleChangeDike() {
let res = this.dikeList.find(
(v) => v.wagaName === this.formData.wagaName
);
this.formData.wagaCode = res.wagaCode;
this.formData.wagaType = res.wagaType;
this.formData.wagaName = res.wagaName;
this.formData.dutyHolder = res.dutyHolders.find(
(v) => v.dutyHolderType === "0"
)?.name;
},
// 获取水闸列表
handleGetRemoteDikeMethod(query) {
getRunProjectList({
pageSize: 10,
pageNum: 1,
data: {
wagaName: query,
},
}).then((res) => {
if (res) {
this.dikeList = res.records;
}
});
},
// 计划方案上传前
beforeUploadProject(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.projectList?.length >= 5) {
this.$message({
message: "最多上传5份",
type: "warning",
});
return false;
}
return true;
},
// 计划方案上传后
handleUploadProject(e) {
const { file } = e;
let fData = new FormData();
fData.append("file", file);
uploadFileData(fData)
.then((res) => {
this.projectList.push({
name: file.name,
url: res.url,
});
})
.catch((err) => {
console.log("err >>>>> ", err);
});
},
// 审批文件上传前
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.filesList?.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.filesList.push({
name: file.name,
url: res.url,
});
})
.catch((err) => {
console.log("err >>>>> ", err);
});
},
// 添加资金来源
handleAddSupplement(index) {
if (!this.canEdit || this.type === 'audit') return;
if (this.formData.supplements.length >= this.supplementOptions.length) {
this.$message.warning("不能多于资金来源可选项最大数量");
return;
}
this.formData.supplements.splice(index + 1, 0, {
supplement: "",
amount: 0,
});
},
// 删除资金来源
handleDelSupplement(index) {
if (!this.canEdit || this.type === 'audit') return;
this.formData.supplements.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,
};
});
});
},
// 提交表单
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.formData.startDate = this.formData.planTimeArr[0]
? dayjs(this.formData.planTimeArr[0]).format(
"YYYY-MM-DD 00:00:00"
)
: "";
this.formData.endDate = this.formData.planTimeArr[1]
? dayjs(this.formData.planTimeArr[1]).format(
"YYYY-MM-DD 23:59:59"
)
: "";
this.formData.doc.docs = this.projectList.map((v) => v.url) || [];
(this.id ? putRunSzYhPlan : postRunSzYhPlan)({
id: this.id || null,
...this.formData,
})
.then((res) => {
this.$message.success("提交成功");
if (reset) {
this.reset();
}
r();
})
.catch(() => {
j();
});
})
.catch(() => {});
})
.catch(() => {
j();
});
});
},
// 审核
passed(type) {
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.formData.startDate = this.formData.planTimeArr[0]
? dayjs(this.formData.planTimeArr[0]).format(
"YYYY-MM-DD 00:00:00"
)
: "";
this.formData.endDate = this.formData.planTimeArr[1]
? dayjs(this.formData.planTimeArr[1]).format(
"YYYY-MM-DD 23:59:59"
)
: "";
(type === 'passed' ? postRunSzYhPlanApprovalPassed : postRunSzYhPlanApprovalRejected)({
id: this.auditId || null,
comment: this.formData.comment,
doc: {
docs: this.filesList.map((v) => v.url) || []
},
})
.then((res) => {
if (type === 'passed') {
this.$message.success("通过成功");
} else {
this.$message.success("驳回成功");
}
if (reset) {
this.reset();
}
r();
})
.catch(() => {
j();
});
})
.catch(() => {});
})
.catch(() => {
j();
});
});
},
// 重置
reset() {
this.$refs.formRef.resetFields();
this.projectList = [];
this.formData.supplements = [
{
supplement: "",
amount: 0,
},
];
},
},
};
</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>