531 lines
16 KiB
Vue
531 lines
16 KiB
Vue
<!-- 整改巡检 -->
|
|
<template>
|
|
<div calss="checkDetails">
|
|
<div class="goBack whiteBlock">
|
|
<el-button type="primary" size="medium" @click="goBackBtn"
|
|
>
|
|
<!-- 返回 -->
|
|
{{$t('message.projectManage.back')}}
|
|
</el-button
|
|
>
|
|
</div>
|
|
<div class="content whiteBlock">
|
|
<div class="pageTitle">
|
|
<!-- 内容详细 -->
|
|
{{$t('message.projectManage.contentDetail')}}
|
|
</div>
|
|
<div style="width: 80%">
|
|
<el-form size="medium" label-width="240px" class="demo-ruleForm">
|
|
<!-- 检查内容 -->
|
|
<el-form-item :label="$t('message.projectManage.checkedContent')">
|
|
<div class="form_item">{{ detailsData.inspectContent }}</div>
|
|
</el-form-item>
|
|
<!-- 检查位置 -->
|
|
<el-form-item :label="$t('message.projectManage.checkedLocation')">
|
|
<div class="form_item">{{ detailsData.inspectPlace }}</div>
|
|
</el-form-item>
|
|
<!-- 附件 -->
|
|
<el-form-item :label="$t('message.projectManage.accessory')">
|
|
<div
|
|
class="form_item"
|
|
style="background: none"
|
|
v-if="detailsData.imgUrl"
|
|
>
|
|
<img
|
|
:src="fileUrl + item.url"
|
|
class="img"
|
|
v-for="(item, index) in detailsData.fileList"
|
|
:key="index"
|
|
@click="handlePictureCardPreview({ url: fileUrl + item.url })"
|
|
/>
|
|
</div>
|
|
</el-form-item>
|
|
<!-- 整改人 -->
|
|
<el-form-item :label="$t('message.projectManage.changePeople')">
|
|
<div class="form_item">{{ detailsData.rectifyPeopleName }}</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
<div class="content bottom_content whiteBlock">
|
|
<div class="pageTitle">
|
|
<!-- 整改情况 -->
|
|
{{$t('message.projectManage.changeDetail')}}
|
|
</div>
|
|
<el-form
|
|
size="medium"
|
|
label-width="240px"
|
|
style="width: 80%; margin-bottom:120px"
|
|
class="demo-ruleForm"
|
|
v-if="checkRecord.length > 0"
|
|
v-for="(item, index) in checkRecord"
|
|
:key="index"
|
|
>
|
|
<el-form-item :label="$t('message.projectManage.changePeople')+':'">
|
|
<div class="form_item">{{item.rectifyPeopleName}}</div>
|
|
<div class="pass_wrap" v-if="item.status!=1">
|
|
<img src="@/assets/images/icon_pass.png" v-if="item.status==2" />
|
|
<img src="@/assets/images/icon_unpass.png" v-if="item.status==3" />
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('message.projectManage.checkedContent')+':'">
|
|
<div class="form_item">{{item.replyContent}}</div>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('message.projectManage.accessory')+':'">
|
|
<div class="form_item" style="background: none" v-if="item.fileList.length>0">
|
|
<img :src="fileUrl+imgItem.url" class="img"
|
|
@click="handlePictureCardPreview({ url: fileUrl+imgItem.url })"
|
|
v-for="(imgItem,imgIndex) in item.fileList" :key="imgIndex"/>
|
|
</div>
|
|
</el-form-item>
|
|
<!-- 复核人 -->
|
|
<el-form-item :label="$t('message.projectManage.reviewer')+':'">
|
|
<div class="form_item">{{item.inspectorName}}</div>
|
|
</el-form-item>
|
|
<!-- 复核内容: -->
|
|
<el-form-item :label="$t('message.projectManage.reviewerContent')+':'" v-if="item.status!=1">
|
|
<div class="form_item">{{item.auditReplyContent}}</div>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('message.projectManage.accessory')+':'" v-if="item.status!=1">
|
|
<div class="form_item" style="background: none" v-if="item.auditFileList.length>0">
|
|
<img :src="fileUrl+imgItem.url" class="img"
|
|
@click="handlePictureCardPreview({ url: fileUrl+imgItem.url })"
|
|
v-for="(imgItem,imgIndex) in item.auditFileList" :key="imgIndex"/>
|
|
</div>
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
<div
|
|
class="correctiveContent"
|
|
v-if="
|
|
userInfo.userId == detailsData.rectifyPeople &&
|
|
checkRecord.length>0 && checkRecord[checkRecord.length-1].status==3 ||
|
|
userInfo.userId == detailsData.rectifyPeople && checkRecord.length<=0
|
|
"
|
|
>
|
|
<el-button
|
|
type="primary"
|
|
style="width: 200px; margin-top: 10%"
|
|
size="medium"
|
|
@click="correctiveReplyBtn"
|
|
>
|
|
<!-- 整改回复 -->
|
|
{{$t('message.projectManage.changeReply')}}
|
|
</el-button
|
|
>
|
|
</div>
|
|
|
|
<div
|
|
class="correctiveContent"
|
|
v-if="
|
|
userInfo.userId == detailsData.inspector && checkRecord.length>0 && checkRecord[checkRecord.length-1].status==1
|
|
"
|
|
>
|
|
<el-button
|
|
type="primary"
|
|
style="width: 200px; margin-top: 20px"
|
|
size="medium"
|
|
@click="auditBtn"
|
|
>
|
|
<!-- 审核回复 -->
|
|
{{$t('message.projectManage.auditReply')}}
|
|
</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
<!-- 整改回复弹窗 -->
|
|
<el-dialog :modal-append-to-body="false" :title="$t('message.projectManage.changeReply')" :visible.sync="dialogVisible" width="667px">
|
|
<div class="dialog_content">
|
|
<el-form
|
|
:model="correctiveForm"
|
|
ref="correctiveForm"
|
|
label-width="80px"
|
|
class="demo-ruleForm"
|
|
:rules="rules"
|
|
>
|
|
<!-- 回复内容 -->
|
|
<el-form-item :label="$t('message.projectManage.replyContent')" prop="replyContent">
|
|
<el-input
|
|
type="textarea"
|
|
:rows="3"
|
|
:placeholder="$t('message.projectManage.placeholder')+$t('message.projectManage.content')"
|
|
v-model="correctiveForm.replyContent"
|
|
>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('message.projectManage.accessory')" prop="replyImg">
|
|
<el-upload
|
|
:action="uploadUrl"
|
|
list-type="picture-card"
|
|
:on-preview="handlePictureCardPreview"
|
|
:on-remove="(file) => handleRemove(file, 1)"
|
|
:on-success="(file) => handleSuccess(file, 1)"
|
|
name="files"
|
|
>
|
|
<i class="el-icon-plus"></i>
|
|
</el-upload>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisible = false" size="medium"
|
|
><!-- 取 消 -->{{$t('message.projectManage.cancel')}}</el-button
|
|
>
|
|
<el-button type="primary" @click="saveBtn(1)" size="medium"
|
|
><!-- 确 定 -->{{$t('message.projectManage.confirm')}}</el-button
|
|
>
|
|
</span>
|
|
</div>
|
|
</el-dialog>
|
|
<!-- 审核回复弹窗 -->
|
|
<el-dialog :modal-append-to-body="false" :title="$t('message.projectManage.auditReply')" :visible.sync="auditDialog" width="667px">
|
|
<div class="dialog_content">
|
|
<el-form
|
|
:model="auditForm"
|
|
ref="auditForm"
|
|
label-width="80px"
|
|
class="demo-ruleForm"
|
|
:rules="rules"
|
|
size="medium"
|
|
>
|
|
<!-- 回复内容 -->
|
|
<el-form-item :label="$t('message.projectManage.replyContent')" prop="auditReplyContent">
|
|
<el-input
|
|
type="textarea"
|
|
:rows="3"
|
|
:placeholder="$t('message.projectManage.placeholder')+$t('message.projectManage.content')"
|
|
v-model="auditForm.auditReplyContent"
|
|
>
|
|
</el-input>
|
|
</el-form-item>
|
|
<!-- 审核结果 -->
|
|
<el-form-item :label="$t('message.projectManage.auditResult')" prop="status">
|
|
<div class="flex">
|
|
<div>
|
|
<el-switch
|
|
v-model="auditForm.status"
|
|
active-color="#13ce66"
|
|
inactive-color="#DCDFE6"
|
|
>
|
|
</el-switch>
|
|
</div>
|
|
<p style="margin: 1px 0 0 10px">
|
|
{{ auditResult ? $t('message.projectManage.pass') : $t('message.projectManage.unpass') }}
|
|
</p>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('message.projectManage.accessory')" prop="auditReplyImg">
|
|
<el-upload
|
|
:action="uploadUrl"
|
|
list-type="picture-card"
|
|
:on-preview="handlePictureCardPreview"
|
|
:on-remove="(file) => handleRemove(file, 2)"
|
|
:on-success="(file) => handleSuccess(file, 2)"
|
|
name="files"
|
|
>
|
|
<i class="el-icon-plus"></i>
|
|
</el-upload>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="auditDialog = false" size="medium"
|
|
><!-- 取 消 -->{{$t('message.projectManage.cancel')}}</el-button
|
|
>
|
|
<el-button type="primary" @click="saveBtn(2)" size="medium"
|
|
><!-- 确 定 -->{{$t('message.projectManage.confirm')}}</el-button
|
|
>
|
|
</span>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<!-- 大图 -->
|
|
<el-dialog :modal-append-to-body="false" :visible.sync="imageUrlDialog">
|
|
<img width="100%" :src="dialogImageUrl" alt="" />
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {
|
|
getCheckDetailsApi,
|
|
getCheckRecordListApi,
|
|
addCheckReplyApi,
|
|
addCheckAuditApi,
|
|
} from "@/assets/js/api/dailyCheck";
|
|
export default {
|
|
props: ["dataId"],
|
|
data() {
|
|
return {
|
|
userInfo: "",
|
|
fileUrl: "",
|
|
uploadUrl: "",
|
|
id: "",
|
|
detailsData: {}, //基本信息
|
|
rules: {
|
|
replyImg: [
|
|
{
|
|
required: true,
|
|
message: this.$t("message.companyDiagram.required"),
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
replyContent: [
|
|
{
|
|
required: true,
|
|
message: this.$t("message.companyDiagram.required"),
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
auditReplyContent: [
|
|
{
|
|
required: true,
|
|
message: this.$t("message.companyDiagram.required"),
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
auditReplyImg: [
|
|
{
|
|
required: true,
|
|
message: this.$t("message.companyDiagram.required"),
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
},
|
|
correctiveForm: { //整改回复
|
|
replyContent: "",
|
|
replyImg: "",
|
|
inspectId: "",
|
|
},
|
|
auditForm: { //审批回复
|
|
auditReplyContent: "",
|
|
auditReplyImg: "",
|
|
id: "",
|
|
status: true,
|
|
},
|
|
dialogVisible: false,
|
|
auditDialog: false,
|
|
auditResult: true,
|
|
imageUrlDialog: false,
|
|
dialogImageUrl: "",
|
|
checkRecord: [], //整改记录
|
|
fileList: [],
|
|
type: 1, //1整改回复 2审批回复
|
|
};
|
|
},
|
|
|
|
created() {
|
|
this.userInfo = this.$store.state.userInfo;
|
|
this.id = this.$props.dataId;
|
|
this.uploadUrl = this.$store.state.UPLOADURL;
|
|
this.fileUrl = this.$store.state.FILEURL;
|
|
this.getCheckDetailsData();
|
|
this.getCheckRecordList();
|
|
},
|
|
methods: {
|
|
//返回按钮
|
|
goBackBtn() {
|
|
this.$emit("detailType", false);
|
|
},
|
|
|
|
//获取详情 基本数据
|
|
getCheckDetailsData() {
|
|
let data = {
|
|
id: this.id,
|
|
};
|
|
getCheckDetailsApi(data).then((res) => {
|
|
if (res.code == 200) {
|
|
this.detailsData = res.result;
|
|
if (res.result.imgUrl) {
|
|
this.detailsData.fileList = JSON.parse(res.result.imgUrl);
|
|
} else {
|
|
this.detailsData.fileList = [];
|
|
}
|
|
} else {
|
|
this.$message.error(res.message);
|
|
}
|
|
});
|
|
},
|
|
|
|
//获取详情 整改记录
|
|
getCheckRecordList() {
|
|
let data = {
|
|
inspectId: this.id,
|
|
};
|
|
getCheckRecordListApi(data).then((res) => {
|
|
if (res.code == 200) {
|
|
//整改回复图片
|
|
if(res.result.dataList.length>0){
|
|
for(let i= 0; i<res.result.dataList.length; i++){
|
|
if(res.result.dataList[i].replyImg){
|
|
res.result.dataList[i].fileList = JSON.parse(res.result.dataList[i].replyImg)
|
|
}else{
|
|
res.result.dataList[i].fileList = [];
|
|
}
|
|
};
|
|
//审核回复图片
|
|
for(let i= 0; i<res.result.dataList.length; i++){
|
|
if(res.result.dataList[i].auditReplyImg){
|
|
res.result.dataList[i].auditFileList = JSON.parse(res.result.dataList[i].auditReplyImg)
|
|
}else{
|
|
res.result.dataList[i].auditFileList = [];
|
|
}
|
|
};
|
|
}
|
|
this.checkRecord = res.result.dataList;
|
|
} else {
|
|
this.$message.error(res.message);
|
|
}
|
|
});
|
|
},
|
|
|
|
//整改回复按钮
|
|
correctiveReplyBtn() {
|
|
this.dialogVisible = true;
|
|
this.type = 1;
|
|
},
|
|
//审核回复按钮
|
|
auditBtn() {
|
|
this.type = 2;
|
|
this.auditDialog = true;
|
|
},
|
|
//删除成功
|
|
handleRemove(file, type) {
|
|
let url = file.response.data[0].imageUrl;
|
|
for(let i=0; i<this.fileList.length;i++){
|
|
if(this.fileList[i].url == url){
|
|
this.fileList.splice(i,1)
|
|
}
|
|
}
|
|
},
|
|
|
|
//上传成功
|
|
handleSuccess(file, type) {
|
|
let data = { name: file.data[0].filename, url: file.data[0].imageUrl };
|
|
this.fileList.push(data);
|
|
},
|
|
|
|
//查看附件
|
|
handlePictureCardPreview(file) {
|
|
this.dialogImageUrl = file.url;
|
|
this.imageUrlDialog = true;
|
|
},
|
|
|
|
//回复保存
|
|
saveBtn(type) {
|
|
//整改回复
|
|
if(type==1){
|
|
this.correctiveForm.replyImg = this.fileList.length>0?JSON.stringify(this.fileList):'';
|
|
this.$refs.correctiveForm.validate((valid)=>{
|
|
if(valid){
|
|
let data = JSON.parse(JSON.stringify(this.correctiveForm));
|
|
data.inspectId = this.id;
|
|
addCheckReplyApi(data).then(res=>{
|
|
if(res.code==200){
|
|
this.getCheckDetailsData();
|
|
this.getCheckRecordList();
|
|
this.dialogVisible = false;
|
|
this.correctiveForm= { //整改回复
|
|
replyContent: "",
|
|
replyImg: "",
|
|
inspectId: "",
|
|
};
|
|
this.fileList=[];
|
|
}
|
|
})
|
|
}else{
|
|
return false
|
|
}
|
|
})
|
|
|
|
//审批回复
|
|
}else{
|
|
this.auditForm.auditReplyImg= this.fileList.length>0?JSON.stringify(this.fileList):'';
|
|
this.$refs.auditForm.validate((valid)=>{
|
|
if(valid){
|
|
let data = JSON.parse(JSON.stringify(this.auditForm));
|
|
data.id = this.checkRecord[this.checkRecord.length-1].id;
|
|
data.status = data.status?2:3;
|
|
data.inspectId = this.id;
|
|
data.examiner = this.userInfo.userId
|
|
addCheckAuditApi(data).then(res=>{
|
|
console.log('----',res)
|
|
this.auditForm= { //审批回复
|
|
auditReplyContent: "",
|
|
auditReplyImg: "",
|
|
id: "",
|
|
status: true,
|
|
};
|
|
this.fileList = [];
|
|
this.auditDialog = false;
|
|
this.getCheckDetailsData();
|
|
this.getCheckRecordList();
|
|
|
|
})
|
|
|
|
|
|
}else{
|
|
return false
|
|
}
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.flex {
|
|
display: flex;
|
|
align-content: center;
|
|
}
|
|
.checkDetails {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.goBack {
|
|
padding: 15px 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
.content {
|
|
margin: 20px 0;
|
|
padding: 15px 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
.form_item {
|
|
background: #f3f5fd;
|
|
margin: 0px 15px;
|
|
padding: 0 10px;
|
|
word-wrap: break-word;
|
|
}
|
|
.bottom_content {
|
|
width: 100%;
|
|
min-height: 46%;
|
|
margin-bottom: 0;
|
|
padding-bottom: 100px;
|
|
}
|
|
.correctiveContent {
|
|
text-align: center;
|
|
}
|
|
.dialog-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.demo-ruleForm {
|
|
position: relative;
|
|
}
|
|
.pass_wrap {
|
|
position: absolute;
|
|
top: 25px;
|
|
right: 40%;
|
|
z-index: 10;
|
|
}
|
|
.img {
|
|
width: 40px;
|
|
height: 50px;
|
|
margin-right: 5px;
|
|
cursor: pointer;
|
|
}
|
|
</style> |