485 lines
15 KiB
Vue
485 lines
15 KiB
Vue
<template>
|
||
<div class="ssp-container-index-drawer">
|
||
<el-drawer
|
||
v-if="vOpen"
|
||
:visible.sync="vOpen"
|
||
ref="drawer"
|
||
v-loading="loading"
|
||
direction="rtl"
|
||
@close="closeCallBack"
|
||
size="60%"
|
||
>
|
||
<template slot="title">
|
||
<div>{{ typeName }}隐患详情查看</div>
|
||
</template>
|
||
<div class="block">
|
||
<div class="drawer">
|
||
<div class="drawerLeft">
|
||
<el-steps :active="active" finish-status="success" simple>
|
||
<el-step title="提交隐患"></el-step>
|
||
<el-step title="处理隐患"></el-step>
|
||
<el-step title="整改复检"></el-step>
|
||
<el-step title="处理完成"></el-step>
|
||
</el-steps>
|
||
<el-timeline>
|
||
<el-timeline-item
|
||
v-for="(item, index) in flowRecordList"
|
||
:key="index"
|
||
:icon="setIcon(item.processState)"
|
||
:color="setColor(item.processState)"
|
||
>
|
||
<p style="font-weight: 700">
|
||
{{ getProcess(index, item.process) }}
|
||
</p>
|
||
<el-card :body-style="{ padding: '10px' }">
|
||
<el-descriptions class="margin-top" :column="1" size="small" border>
|
||
<el-descriptions-item
|
||
v-if="item.createUserName"
|
||
label-class-name="my-label"
|
||
:labelStyle="labelStyle"
|
||
>
|
||
<template slot="label"
|
||
><i class="el-icon-user"></i>办理用户</template
|
||
>
|
||
{{ item.createUserName }}
|
||
<el-tag type="info" size="mini">{{ item.createUser }}</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item
|
||
v-if="item.createTime"
|
||
label-class-name="my-label"
|
||
:labelStyle="labelStyle"
|
||
>
|
||
<template slot="label"
|
||
><i class="el-icon-date"></i>办理时间</template
|
||
>
|
||
{{ item.createTime }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item
|
||
v-if="item.fileUrls"
|
||
label-class-name="my-label"
|
||
:labelStyle="labelStyle"
|
||
>
|
||
<template slot="label" v-if="item.processState == 1"
|
||
><i class="el-icon-picture-outline"></i>隐患图片</template
|
||
>
|
||
<template slot="label" v-if="item.processState != 1"
|
||
><i class="el-icon-picture-outline"></i>整改图片</template
|
||
>
|
||
<el-image
|
||
ref="preview"
|
||
v-for="img in item.fileUrls.split(',')"
|
||
:src="img + '.min.jpg'"
|
||
style="width: 50px; height: 50px; margin-right: 10px"
|
||
@click="onPreview(img)"
|
||
></el-image>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item
|
||
v-if="item.opinion"
|
||
label-class-name="my-label"
|
||
:labelStyle="labelStyle"
|
||
>
|
||
<template slot="label"
|
||
><i class="el-icon-tickets"></i>处理意见</template
|
||
>
|
||
{{ item.opinion }}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-card>
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
</div>
|
||
<div class="drawerRight">
|
||
<el-form
|
||
ref="form"
|
||
label-width="80px"
|
||
size="mini"
|
||
:model="form"
|
||
:rules="rules"
|
||
style="padding-right: 20px; padding-left: 20px"
|
||
>
|
||
<el-form-item label="项目名称">
|
||
{{ dataInfo.problemArea }}
|
||
</el-form-item>
|
||
<el-form-item label="隐患图片">
|
||
<el-image
|
||
ref="preview"
|
||
v-for="img in dataInfo.smarkUrl.split(',')"
|
||
:src="getImageUrl(img)"
|
||
style="width: 60px; height: 60px; margin-right: 8px"
|
||
@click="onPreview(img)"
|
||
></el-image>
|
||
</el-form-item>
|
||
<el-form-item label="问题类型">
|
||
<span v-if="dataInfo.problemType == '1'" class="timeline_for_state_1"
|
||
>常规检查</span
|
||
>
|
||
<span v-else class="timeline_for_state_2">专项检查</span>
|
||
</el-form-item>
|
||
<el-form-item label="隐患类型">
|
||
<dict-tag
|
||
v-if="dataInfo.infoType == 1"
|
||
:options="dict.type.ssp_zlyhlx"
|
||
:value="dataInfo.dangerType"
|
||
/>
|
||
<dict-tag
|
||
v-if="dataInfo.infoType == 0"
|
||
:options="dict.type.ssp_aqyhlx"
|
||
:value="dataInfo.dangerType"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="隐患描述">
|
||
{{ dataInfo.workParts }}
|
||
</el-form-item>
|
||
<el-form-item label="整改要求">
|
||
{{ dataInfo.changeInfo }}
|
||
</el-form-item>
|
||
<el-form-item label="检查单位">
|
||
{{ dataInfo.deptName }}
|
||
</el-form-item>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="检查分类">
|
||
<el-tag v-if="dataInfo.roleType == 3">产发集团</el-tag>
|
||
<el-tag v-if="dataInfo.roleType == 4">责任主体（子公司）</el-tag>
|
||
<el-tag v-if="dataInfo.roleType == 5">甲方代表</el-tag>
|
||
<el-tag v-if="dataInfo.roleType == 6">总包单位</el-tag>
|
||
<el-tag v-if="dataInfo.roleType == 7">监理单位</el-tag>
|
||
<el-tag v-if="dataInfo.roleType == 8">分包单位</el-tag>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="检查人">
|
||
{{ dataInfo.createUserName }}
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="检查时间">
|
||
{{ dataInfo.createTime }}
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="整改人">
|
||
{{ dataInfo.lordSent }}
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="抄送人">
|
||
{{ dataInfo.copySend }}
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="复检人">
|
||
{{ dataInfo.recheckSend }}
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-form-item label="截至时间">
|
||
{{ dataInfo.nickedTime }}
|
||
</el-form-item>
|
||
<el-form-item
|
||
v-if="dataInfo.checkState == 0 || dataInfo.checkState == 3"
|
||
label="整改说明"
|
||
prop="flowComment"
|
||
>
|
||
<el-input
|
||
type="textarea"
|
||
:rows="3"
|
||
placeholder="请输入整改说明（255字内）"
|
||
v-model="form.flowComment"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
v-if="dataInfo.checkState == 1"
|
||
label="复检意见"
|
||
prop="flowComment"
|
||
>
|
||
<el-input
|
||
type="textarea"
|
||
:rows="3"
|
||
placeholder="请输入复检意见（255字内）"
|
||
v-model="form.flowComment"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
v-if="dataInfo.checkState == 0 || dataInfo.checkState == 3"
|
||
label="整改图片"
|
||
prop="files"
|
||
>
|
||
<image-upload v-model="form.files" :limit="5" />
|
||
</el-form-item>
|
||
<div style="text-align: center; padding-bottom: 20px">
|
||
<el-button @click="cancel">取 消</el-button>
|
||
<el-button
|
||
type="success"
|
||
v-if="dataInfo.checkState == 0 || dataInfo.checkState == 3"
|
||
icon="el-icon-check"
|
||
@click="submitForm(0)"
|
||
>提 交 整 改</el-button
|
||
>
|
||
<el-button
|
||
type="danger"
|
||
v-if="dataInfo.checkState == 1"
|
||
icon="el-icon-error"
|
||
@click="submitForm(2)"
|
||
>复 检 驳 回</el-button
|
||
>
|
||
<el-button
|
||
type="success"
|
||
v-if="dataInfo.checkState == 1"
|
||
icon="el-icon-success"
|
||
@click="submitForm(4)"
|
||
>复 检 通 过</el-button
|
||
>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-drawer>
|
||
<el-image-viewer
|
||
v-if="showViewer"
|
||
:on-close="closeViewer"
|
||
:url-list="previewList"
|
||
style="z-index: 9999"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { auditinfoList, modifyProblem } from "@/api/trouble/sspProblemmodify";
|
||
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
|
||
import { getSspProblemmodify } from "@/api/trouble/sspProblemmodify";
|
||
|
||
export default {
|
||
name: "modifyProblemDrawer",
|
||
components: { ElImageViewer },
|
||
props: {
|
||
closeCallBack: {
|
||
type: Function,
|
||
},
|
||
},
|
||
dicts: ["ssp_zlyhlx", "ssp_aqyhlx", "smz_ssp_checkstate"],
|
||
data() {
|
||
return {
|
||
vOpen: false,
|
||
option: {},
|
||
// 查询参数
|
||
queryParams: {
|
||
mainId: null,
|
||
},
|
||
form: {
|
||
flowComment: "",
|
||
files: "",
|
||
},
|
||
rules: {
|
||
flowComment: [
|
||
{ required: true, message: "请输入处理意见", trigger: "blur" },
|
||
{ max: 255, message: "处理意见最多255字符", trigger: "blur" },
|
||
],
|
||
files: [{ required: true, message: "请上传整改图片", trigger: "blur" }],
|
||
},
|
||
// 遮罩层
|
||
loading: true,
|
||
// 流程流转数据
|
||
flowRecordList: [],
|
||
//label样式
|
||
labelStyle: { width: "200px" },
|
||
showViewer: false,
|
||
previewList: [],
|
||
dataInfo: {
|
||
smarkUrl: "",
|
||
},
|
||
active: 100,
|
||
typeName: "",
|
||
};
|
||
},
|
||
computed: {},
|
||
watch: {},
|
||
created() {},
|
||
mounted() {},
|
||
beforeDestroy() {},
|
||
methods: {
|
||
getImageUrl(url) {
|
||
return process.env.VUE_APP_BASE_API + url + ".min.jpg";
|
||
},
|
||
onPreview(urls) {
|
||
this.previewList = [];
|
||
urls.split(",").forEach((item) => {
|
||
this.previewList.push(process.env.VUE_APP_BASE_API + item);
|
||
});
|
||
this.showViewer = true;
|
||
},
|
||
getProcess(i, v) {
|
||
let num = this.flowRecordList.length - i;
|
||
if (num < 10) {
|
||
num = "0" + num;
|
||
}
|
||
return num + ". " + v;
|
||
},
|
||
closeViewer() {
|
||
this.showViewer = false;
|
||
},
|
||
setIcon(val) {
|
||
if (val == 2) {
|
||
return "el-icon-close";
|
||
} else {
|
||
return "el-icon-check";
|
||
}
|
||
},
|
||
setColor(val) {
|
||
if (val == 2) {
|
||
return "#f56c6c";
|
||
} else {
|
||
return "#2bc418";
|
||
}
|
||
},
|
||
show(options) {
|
||
if (this.option.id != options.id) {
|
||
this.form.flowComment = "";
|
||
this.form.files = "";
|
||
}
|
||
if (options.infoType == 1) {
|
||
this.typeName = "质量";
|
||
} else {
|
||
this.typeName = "安全";
|
||
}
|
||
this.option = options;
|
||
this.initDataInfo();
|
||
this.getAuditinfoList();
|
||
this.vOpen = true;
|
||
},
|
||
initDataInfo() {
|
||
this.loading = true;
|
||
getSspProblemmodify(this.option.id).then((res) => {
|
||
if (res.data.checkState == 0) {
|
||
this.active = 1;
|
||
} else if (res.data.checkState == 1) {
|
||
this.active = 2;
|
||
} else if (res.data.checkState == 3) {
|
||
this.active = 1;
|
||
}
|
||
this.dataInfo = res.data;
|
||
this.loading = false;
|
||
});
|
||
},
|
||
/** 查询项目人员列表 */
|
||
getAuditinfoList() {
|
||
this.queryParams.mainId = this.option.id;
|
||
auditinfoList(this.queryParams).then((response) => {
|
||
this.flowRecordList = response.rows;
|
||
});
|
||
},
|
||
// 取消按钮
|
||
cancel() {
|
||
this.vOpen = false;
|
||
},
|
||
/** 提交按钮 */
|
||
submitForm(v) {
|
||
let that = this;
|
||
this.$refs["form"].validate((valid) => {
|
||
if (valid) {
|
||
let msg = "提交复检";
|
||
if (v == 2) {
|
||
msg = "复检驳回";
|
||
}
|
||
if (v == 4) {
|
||
msg = "复检通过";
|
||
}
|
||
this.$confirm("是否确认" + msg + "?", "提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
})
|
||
.then(() => {
|
||
that.loading = true;
|
||
let params = {
|
||
mainId: that.option.id,
|
||
processState: v,
|
||
opinion: that.form.flowComment,
|
||
fileUrls: that.form.files,
|
||
};
|
||
modifyProblem(params).then((res) => {
|
||
that.$modal.msgSuccess("操作成功");
|
||
that.loading = false;
|
||
//关闭并刷新列表
|
||
that.$refs.drawer.closeDrawer();
|
||
});
|
||
})
|
||
.catch(() => {
|
||
console.log("取消操作");
|
||
});
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style scope>
|
||
.el-alert {
|
||
display: flex !important;
|
||
}
|
||
.el-alert--info.is-light {
|
||
background: cornflowerblue !important;
|
||
color: #ffffff !important;
|
||
}
|
||
.el-alert--info .el-alert__description {
|
||
color: #ffffff !important;
|
||
}
|
||
.el-steps--simple {
|
||
padding: 5px 5px !important;
|
||
}
|
||
.el-timeline-item {
|
||
padding-bottom: 0px !important;
|
||
}
|
||
.el-timeline {
|
||
padding-left: 5px !important;
|
||
padding-top: 20px !important;
|
||
}
|
||
.el-timeline-item__wrapper {
|
||
padding-left: 15px !important;
|
||
}
|
||
.el-timeline-item__content {
|
||
font-weight: 900;
|
||
}
|
||
.el-form-item {
|
||
margin-bottom: 15px !important;
|
||
}
|
||
.el-step.is-simple .el-step__title {
|
||
font-size: 13px !important;
|
||
}
|
||
.el-card {
|
||
margin-left: -15px !important;
|
||
}
|
||
</style>
|
||
<style lang="scss">
|
||
.ssp-container-index-drawer {
|
||
.drawer {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding-left: 20px;
|
||
padding-right: 20px;
|
||
padding-bottom: 20px;
|
||
.drawerLeft {
|
||
width: 50%;
|
||
min-width: 280px;
|
||
height: 100%;
|
||
float: left;
|
||
border-right: 1px solid #dcdfe6;
|
||
overflow-y: scroll;
|
||
padding-right: 20px;
|
||
}
|
||
.drawerRight {
|
||
width: 50%;
|
||
min-width: 400px;
|
||
height: 100%;
|
||
float: left;
|
||
padding-left: 20px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|