<template>
|
<GlobalWindow :title="title" :visible.sync="isShowModal" @confirm="confirm">
|
<div class="modal_wrap">
|
<div class="modal_content">
|
<div class="header">
|
<div class="left">
|
<div class="h1">{{ cateList[type] }}</div>
|
<div class="time">提交时间：{{ info.createDate }}</div>
|
</div>
|
<div class="right">{{ statusMap[info.status] }}</div>
|
</div>
|
<div class="info">
|
<div class="title">隐患随手拍信息</div>
|
<div class="list">
|
<div class="item">
|
<div class="label">提报人</div>
|
<div class="value">
|
{{ info.memberName }} {{ info.memberPhone }}
|
</div>
|
</div>
|
<div class="item">
|
<div class="label">隐患区域</div>
|
<div class="value">{{ info.areaName }}</div>
|
</div>
|
<div class="item">
|
<div class="label">隐患类型</div>
|
<div class="value">{{ info.categoryName }}</div>
|
</div>
|
<div class="item">
|
<div class="label">隐患描述</div>
|
<div class="value">{{ info.content }}</div>
|
</div>
|
<div class="item file">
|
<div class="label">现场情况</div>
|
<div class="value">
|
<div class="file_list">
|
<div class="file" v-for="item in info.submitFileList">
|
<img
|
v-if="item.type == 0"
|
:key="item.id"
|
:src="item.fileurlFull"
|
mode="widthFix"
|
class="img"
|
/>
|
<video
|
v-if="item.type == 1"
|
:key="item.id"
|
:src="item.fileurlFull"
|
class="img"
|
controls
|
/>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="side">
|
<div class="side_title">审批流程</div>
|
<div
|
class="list"
|
v-if="
|
info.approveDateVO != null && info.approveDateVO.approveList != null
|
"
|
>
|
<div
|
class="item"
|
v-for="(item, index) in info.approveDateVO.approveList"
|
:key="item.id"
|
>
|
<div
|
class="separate"
|
v-if="index < info.approveDateVO.approveList.length - 1"
|
></div>
|
<div class="info">
|
<img
|
src="@/assets/icons/ic_tongguo.png"
|
class="iconnew"
|
v-if="item.status == 2"
|
/>
|
<img
|
src="@/assets/icons/ic_dangqian.png"
|
class="iconnew"
|
v-if="item.status == 1"
|
/>
|
<img
|
src="@/assets/icons/ic_jujue.png"
|
class="iconnew"
|
v-if="item.status == 3"
|
/>
|
<img
|
src="@/assets/icons/ic_grey.png"
|
class="iconnew"
|
v-if="item.status == null || item.status == 0"
|
/>
|
<div style="display: inline" v-if="item.approveType != 1">
|
<img
|
v-if="item.faceImg != null && item.faceImg != ''"
|
:src="item.faceImg"
|
class="avatar"
|
alt=""
|
/>
|
<img
|
v-if="item.faceImg == null || item.faceImg == ''"
|
src="@/assets/avatar/man.png"
|
class="avatar"
|
alt=""
|
/>
|
</div>
|
<div style="display: inline" v-if="item.approveType == 1">
|
<img
|
v-if="item.type != 1"
|
src="@/assets/icons/ic_duoren.png"
|
class="avatar"
|
alt=""
|
/>
|
<img
|
v-if="item.type == 1"
|
src="@/assets/icons/ic_chaosong.png"
|
class="avatar"
|
alt=""
|
/>
|
</div>
|
<div class="content">
|
<div class="line">
|
<div class="name">{{ item.title }}</div>
|
<div class="time">{{ item.checkDate }}</div>
|
</div>
|
<div class="line">
|
<div class="company">
|
{{ item.memberName }}
|
<div
|
style="display: inline"
|
v-if="item.statusInfo != null && item.statusInfo != ''"
|
>
|
（<span class="status-green">{{
|
item.statusInfo || ""
|
}}</span
|
>）
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div
|
v-if="
|
item.approveType != 1 &&
|
item.checkInfo != null &&
|
item.checkInfo != ''
|
"
|
class="remark"
|
>
|
{{ item.checkInfo || "" }}
|
</div>
|
<div v-if="item.approveType == 1" class="childList">
|
<div
|
class="m_content company"
|
v-for="item1 in item.approveList"
|
:key="item1.id"
|
>
|
<img
|
v-if="item1.faceImg != null && item1.faceImg != ''"
|
:src="item1.faceImg"
|
class="avatar"
|
alt=""
|
/>
|
<img
|
v-if="item1.faceImg == null || item1.faceImg == ''"
|
src="@/assets/avatar/man.png"
|
class="avatar"
|
alt=""
|
/>
|
<span> {{ item1.memberName }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- -->
|
<template v-slot:footer>
|
<el-button @click="handleAppr" type="primary" class="status-red"
|
>处理</el-button
|
>
|
<el-button @click="isShowTransfer = true" type="primary" plain
|
>转交</el-button
|
>
|
<el-button @click="isShowBack = true" type="danger" plain>退回</el-button>
|
<el-button @click="isShowModal = false">返回</el-button>
|
</template>
|
<!-- 同意/拒绝 -->
|
<el-dialog
|
append-to-body
|
title="隐患转交"
|
:visible.sync="isShowTransfer"
|
width="600px"
|
>
|
<el-form
|
:model="transferForm"
|
:rules="handleRules"
|
ref="transferForm"
|
label-width="100px"
|
class="demo-ruleForm"
|
>
|
<el-form-item label="隐患转交人" prop="checkUserId">
|
<el-select
|
v-model="transferForm.checkUserId"
|
filterable
|
placeholder="请选择 单选"
|
>
|
<el-option
|
v-for="item in memberList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="isShowTransfer = false">取消</el-button>
|
<el-button :loading="subLoading" type="primary" @click="onTransfer"
|
>确定</el-button
|
>
|
</span>
|
</el-dialog>
|
<!-- 隐患 -->
|
<el-dialog
|
append-to-body
|
title="隐患整改"
|
:visible.sync="isShowProblem"
|
width="600px"
|
>
|
<el-form
|
:model="handleParam"
|
:rules="handleRules"
|
ref="handleForm"
|
label-width="100px"
|
>
|
<el-form-item label="整改时间" prop="dealTime">
|
<el-date-picker
|
class="w300"
|
value-format="yyyy-MM-dd hh:mm:ss"
|
type="datetime"
|
placeholder="选择日期"
|
v-model="handleParam.dealTime"
|
/>
|
</el-form-item>
|
<el-form-item label="整改前" prop="dealBeforeFileList">
|
<div class="upload_wrap">
|
<el-upload
|
class="avatar-uploader"
|
:action="uploadUrl"
|
:show-file-list="false"
|
:on-success="handleAvatarSuccess"
|
:before-upload="beforeAvatarUpload"
|
>
|
<img v-if="param.url" :src="param.url" class="avatar" />
|
<div v-else class="upload_box">
|
<el-icon class="el-icon-plus icon" />
|
<div class="text">图片/视频</div>
|
</div>
|
</el-upload>
|
<template v-if="handleParam.dealBeforeFileList">
|
<div
|
class="img_wrap"
|
v-for="(img, i) in handleParam.dealBeforeFileList"
|
:key="i"
|
>
|
<img v-if="img.type == 0" :src="img.fileurlFull" alt="" />
|
<video
|
v-if="img.type == 1"
|
:src="img.fileurlFull"
|
controls
|
alt=""
|
/>
|
</div>
|
</template>
|
</div>
|
</el-form-item>
|
<el-form-item label="整改后" prop="dealAfterFileList">
|
<div class="upload_wrap">
|
<el-upload
|
class="avatar-uploader"
|
:action="uploadUrl"
|
:show-file-list="false"
|
:on-success="handleAfterSuccess"
|
:before-upload="beforeAvatarUpload"
|
>
|
<img v-if="param.url" :src="param.url" class="avatar" />
|
<div v-else class="upload_box">
|
<el-icon class="el-icon-plus icon" />
|
<div class="text">图片/视频</div>
|
</div>
|
</el-upload>
|
<template v-if="handleParam.dealAfterFileList">
|
<div
|
class="img_wrap"
|
v-for="(img, i) in handleParam.dealAfterFileList"
|
:key="i"
|
>
|
<img v-if="img.type == 0" :src="img.fileurlFull" alt="" />
|
<video
|
v-if="img.type == 1"
|
:src="img.fileurlFull"
|
controls
|
alt=""
|
/>
|
</div>
|
</template>
|
</div>
|
</el-form-item>
|
<el-form-item label="整改说明">
|
<el-input
|
type="textarea"
|
placeholder="请填写说明"
|
:rows="4"
|
v-model="handleParam.checkInfo"
|
/>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="isShowProblem = false">取消</el-button>
|
<el-button type="primary" :loading="subLoading" @click="onSubAppr"
|
>确定</el-button
|
>
|
</span>
|
</el-dialog>
|
<el-dialog
|
append-to-body
|
title="隐患退回"
|
:visible.sync="isShowBack"
|
width="600px"
|
>
|
<el-form
|
:model="backForm"
|
:rules="handleRules"
|
ref="backForm"
|
label-width="100px"
|
>
|
<el-form-item label="整改时间" prop="dealTime">
|
<el-date-picker
|
class="w300"
|
value-format="yyyy-MM-dd hh:mm:ss"
|
type="datetime"
|
placeholder="选择日期"
|
v-model="backForm.dealTime"
|
/>
|
</el-form-item>
|
<el-form-item label="整改前">
|
<div class="upload_wrap">
|
<el-upload
|
class="avatar-uploader"
|
:action="uploadUrl"
|
:show-file-list="false"
|
:on-success="handleBackSuccess"
|
:before-upload="beforeAvatarUpload"
|
>
|
<div class="upload_box">
|
<el-icon class="el-icon-plus icon" />
|
<div class="text">图片/视频</div>
|
</div>
|
</el-upload>
|
<template v-if="backForm.dealBeforeFileList">
|
<div
|
class="img_wrap"
|
v-for="(img, i) in backForm.dealBeforeFileList"
|
:key="i"
|
>
|
<img v-if="img.type == 0" :src="img.fileurlFull" alt="" />
|
<video
|
v-if="img.type == 1"
|
:src="img.fileurlFull"
|
controls
|
alt=""
|
/>
|
</div>
|
</template>
|
</div>
|
</el-form-item>
|
<el-form-item label="整改说明">
|
<el-input
|
type="textarea"
|
placeholder="请填写说明"
|
:rows="4"
|
v-model="backForm.checkInfo"
|
/>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="isShowBack = false">取消</el-button>
|
<el-button type="primary" :loading="subLoading" @click="onSubBack"
|
>确定</el-button
|
>
|
</span>
|
</el-dialog>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { memberList } from '@/api/business/hiddenDangerParam'
|
import {
|
uploadFile,
|
hiddenDangerDetail,
|
dealHiddenDanger,
|
transferHiddenDanger
|
} from '@/api/index'
|
|
export default {
|
components: { GlobalWindow },
|
data () {
|
return {
|
id: '',
|
type: '',
|
uploadUrl: uploadFile,
|
|
title: '访客预约详情',
|
isShowModal: false,
|
info: {},
|
isShowAppr: false,
|
apprTitle: '同意',
|
subLoading: false,
|
param: {},
|
handleParam: {},
|
backForm: {},
|
isShowBack: false,
|
isShowTransfer: false,
|
transferForm: {},
|
memberList: [],
|
isShowProblem: false,
|
rules: {
|
checkInfo: [{ required: true, message: '请输入', trigger: 'blur' }]
|
},
|
handleRules: {
|
dealTime: [{ required: true, message: '请选择', trigger: 'change' }],
|
dealBeforeFileList: [{ type: 'array', required: true, message: '请选择', trigger: 'change' }],
|
checkUserId: [{ required: true, message: '请选择', trigger: 'change' }],
|
dealAfterFileList: [{ type: 'array', required: true, message: '请选择', trigger: 'change' }]
|
},
|
statusMap: {
|
0: '待审批',
|
1: '审批中',
|
2: '审批通过',
|
3: '审批未通过',
|
4: '已取消',
|
5: '他人或签',
|
6: '他人拒绝'
|
},
|
cateList: {
|
0: '访客申请',
|
1: '访客报备',
|
2: '用车申请',
|
3: '隐患随手拍',
|
4: '物流车申请'
|
}
|
}
|
},
|
created () {
|
this.getMemberList()
|
},
|
methods: {
|
onSubAppr () {
|
this.$refs.handleForm.validate((valid) => {
|
if (!valid) {
|
return
|
}
|
this.subLoading = true
|
dealHiddenDanger({
|
...this.handleParam,
|
status: 1,
|
id: this.id
|
})
|
.then(res => {
|
this.subLoading = false
|
this.$tip.apiSuccess('处理成功')
|
this.getDetail()
|
this.isShowProblem = false
|
})
|
.finally(() => {
|
this.subLoading = false
|
})
|
})
|
},
|
onSubBack () {
|
this.$refs.backForm.validate((valid) => {
|
if (!valid) {
|
return
|
}
|
this.subLoading = true
|
dealHiddenDanger({
|
...this.backForm,
|
status: 2,
|
id: this.id
|
})
|
.then(res => {
|
this.subLoading = false
|
this.$tip.apiSuccess('退回成功')
|
this.getDetail()
|
this.isShowProblem = false
|
})
|
.finally(() => {
|
this.subLoading = false
|
})
|
})
|
},
|
onTransfer () {
|
this.$refs.transferForm.validate((valid) => {
|
if (!valid) {
|
return
|
}
|
this.subLoading = true
|
transferHiddenDanger({
|
...this.transferForm,
|
id: this.id
|
})
|
.then(res => {
|
this.subLoading = false
|
if (res.code !== 200) return
|
this.$tip.apiSuccess('转交成功')
|
this.getDetail()
|
this.isShowTransfer = false
|
})
|
.finally(() => {
|
this.subLoading = false
|
})
|
})
|
},
|
getMemberList () {
|
memberList({}).then(res => {
|
this.memberList = res || []
|
})
|
},
|
getDetail () {
|
const { id } = this
|
hiddenDangerDetail(id).then(res => {
|
this.info = res
|
})
|
},
|
handleAppr (val) {
|
this.isShowProblem = true
|
},
|
confirm () {
|
console.log('--')
|
},
|
handleTransfer () {
|
this.isShowProblem = true
|
},
|
reject () { },
|
handleAvatarSuccess (res) {
|
if (res.code === 200) {
|
const str = res.data.url.indexOf('png') > 0 || res.data.url.indexOf('jpg') > 0
|
const arr = this.handleParam.dealBeforeFileList || []
|
arr.push({
|
type: str ? 0 : 1,
|
fileurl: res.data.imgaddr,
|
fileurlFull: res.data.url
|
})
|
this.$set(this.handleParam, 'dealBeforeFileList', arr)
|
}
|
},
|
handleAfterSuccess (res) {
|
if (res.code === 200) {
|
const str = res.data.url.indexOf('png') > 0 || res.data.url.indexOf('jpg') > 0
|
const arr = this.handleParam.dealAfterFileList || []
|
arr.push({
|
type: str ? 0 : 1,
|
fileurl: res.data.imgaddr,
|
fileurlFull: res.data.url
|
})
|
this.$set(this.handleParam, 'dealAfterFileList', arr)
|
}
|
},
|
handleBackSuccess (res) {
|
if (res.code === 200) {
|
const str = res.data.url.indexOf('png') > 0 || res.data.url.indexOf('jpg') > 0
|
const arr = this.backForm.dealBeforeFileList || []
|
arr.push({
|
type: str ? 0 : 1,
|
fileurl: res.data.imgaddr,
|
fileurlFull: res.data.url
|
})
|
this.$set(this.backForm, 'dealBeforeFileList', arr)
|
}
|
},
|
beforeAvatarUpload () { }
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.upload_wrap {
|
display: flex;
|
flex-wrap: wrap;
|
.img_wrap {
|
width: 85px;
|
margin-right: 10px;
|
margin-bottom: 10px;
|
img,
|
video {
|
width: 100%;
|
}
|
}
|
}
|
.upload_box {
|
width: 84px;
|
height: 84px;
|
border-radius: 4px;
|
background-color: #f7f7f7;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
color: #999999;
|
border: 1px solid #e4e4e4;
|
.icon {
|
font-size: 24px;
|
}
|
.text {
|
font-size: 12px;
|
}
|
}
|
.side_title {
|
font-weight: 600;
|
font-size: 18px;
|
color: #111111;
|
margin-bottom: 20px;
|
margin-left: 20px;
|
margin-top: 20px;
|
}
|
.modal_wrap {
|
display: flex;
|
height: 100%;
|
.modal_content {
|
flex: 1;
|
padding: 0px 30px;
|
border-radius: 8px;
|
overflow: hidden;
|
height: 100%;
|
|
.title {
|
font-weight: 600;
|
font-size: 18px;
|
color: #333333;
|
margin-bottom: 20px;
|
margin-top: 30px;
|
}
|
.info {
|
.list {
|
display: flex;
|
flex-wrap: wrap;
|
|
.item {
|
display: flex;
|
width: 40%;
|
margin-bottom: 20px;
|
&:nth-of-type(2n) {
|
width: 60%;
|
}
|
|
.label {
|
color: #888888;
|
width: 100px;
|
}
|
.file_list {
|
display: flex;
|
.file {
|
width: 92px;
|
margin-right: 12px;
|
margin-bottom: 12px;
|
.img{
|
max-height: 92px;
|
max-width: 92px;
|
}
|
}
|
}
|
.value {
|
color: #111111;
|
}
|
}
|
.file {
|
width: 100%;
|
}
|
}
|
}
|
|
.header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 20px 30px;
|
margin: 0 -30px;
|
border-radius: 8px 8px 0 0;
|
background: linear-gradient(to right, #f2f6fe, #cadffa);
|
|
.h1 {
|
font-weight: 600;
|
font-size: 22px;
|
color: #111111;
|
margin-bottom: 8px;
|
}
|
|
.time {
|
font-size: 14px;
|
color: #999999;
|
}
|
|
.right {
|
height: 40px;
|
font-size: 16px;
|
color: #ffffff;
|
line-height: 40px;
|
padding: 0 20px;
|
background: #207ff7;
|
box-shadow: 4px 4px 0px 0px rgba(32, 127, 247, 0.16);
|
border-radius: 16px 0px 16px 0px;
|
}
|
}
|
.table_info {
|
.name_wrap {
|
display: flex;
|
align-items: center;
|
.avatar {
|
width: 40px;
|
height: 40px;
|
border-radius: 50%;
|
margin-right: 12px;
|
}
|
.content {
|
.line {
|
display: flex;
|
}
|
.tag {
|
color: #b2cbf9;
|
border: 1px solid #b2cbf9;
|
padding: 0px 4px;
|
border-radius: 4px;
|
margin-left: 6px;
|
}
|
}
|
}
|
}
|
}
|
|
.side {
|
height: 100%;
|
width: 420px;
|
background: #ffffff;
|
border-left: 20px solid #f7f7f7;
|
.list {
|
.item {
|
padding: 8px 0;
|
position: relative;
|
.separate {
|
position: absolute;
|
border-left: 2px dashed #cccccc;
|
left: 31px;
|
height: calc(100% - 36px);
|
top: 49px;
|
}
|
.avatar {
|
width: 40px;
|
height: 40px;
|
border-radius: 50%;
|
margin: 0 12px 0 16px;
|
//border: 1px solid;
|
}
|
.childList {
|
display: flex;
|
flex-wrap: wrap;
|
margin-left: 100px;
|
}
|
.company {
|
font-size: 13px;
|
color: #888888;
|
.status {
|
color: #00ba67;
|
}
|
}
|
.m_content {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
margin-bottom: 4px;
|
}
|
.info {
|
display: flex;
|
align-items: center;
|
margin-left: 20px;
|
.icon {
|
position: relative;
|
z-index: 11;
|
color: #53b76f;
|
font-size: 24px;
|
}
|
.icon1 {
|
position: relative;
|
z-index: 11;
|
color: deepskyblue;
|
font-size: 24px;
|
}
|
.icon2 {
|
position: relative;
|
z-index: 11;
|
color: #dc362e;
|
font-size: 24px;
|
}
|
.iconnew {
|
width: 24px;
|
height: 24px;
|
}
|
.icon3 {
|
position: relative;
|
z-index: 11;
|
color: gray;
|
font-size: 24px;
|
}
|
.content {
|
flex: 1;
|
.line {
|
display: flex;
|
justify-content: space-between;
|
align-content: center;
|
margin-bottom: 6px;
|
.name {
|
font-weight: 600;
|
font-size: 16px;
|
color: #111111;
|
}
|
.time {
|
color: #888888;
|
}
|
}
|
}
|
}
|
.remark {
|
background: #f7f7f7;
|
border-radius: 4px;
|
padding: 13px 15px;
|
color: #666666;
|
margin-left: 100px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
