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>
|