<template>
|
<GlobalWindow :title="title" :visible.sync="isShowModal" @close="close" @confirm="confirm">
|
<div class="modal_wrap">
|
<div class="modal_content">
|
<div class="header">
|
<img v-if="info.businessStatus == '3'" class="head_bg"
|
src="@/assets/task/bg_shenhe_fail@2x.png" alt="">
|
<img v-else-if="info.businessStatus == '2'" class="head_bg"
|
src="@/assets/task/bg_shenhe_pass@2x.png" alt="">
|
<img v-else-if="info.businessStatus == '4'" class="head_bg" src="@/assets/task/bg_shenhe_chexiao@2x.png" alt="">
|
<img v-else class="head_bg" src="@/assets/task/bg_shenhe@2x.png" alt="">
|
<div class="left">
|
<div class="h1">{{ cateList[type] }}</div>
|
<div class="time">提交时间：{{ info.createTime }}</div>
|
</div>
|
<div class="right"
|
:class="{ scs: info.businessStatus == '2', msg: info.businessStatus == '3' }">{{
|
statusMap[info.businessStatus] }}</div>
|
</div>
|
<div class="info">
|
<div class="title">访客预约信息</div>
|
<div class="list">
|
<div class="item">
|
<div class="label">被访人</div>
|
<div class="value">{{ info.visitUserName }}</div>
|
</div>
|
<div class="item">
|
<div class="label">来访时间</div>
|
<div class="value">{{ info.visitTime }}</div>
|
</div>
|
<div class="item">
|
<div class="label">来访事由</div>
|
<div class="value">{{ info.visitReason }}</div>
|
</div>
|
<div class="item">
|
<div class="label">随行车辆</div>
|
<div class="value">{{ info.carNos }}</div>
|
</div>
|
<div class="item">
|
<div class="label">施工人员</div>
|
<div class="value">{{ info.type == "0" ? "否" : "是" }}</div>
|
</div>
|
<div class="item">
|
<div class="label">施工内容</div>
|
<div class="value">{{ info.constructionReason }}</div>
|
</div>
|
</div>
|
</div>
|
<div class="table_info">
|
<div class="title">访客信息</div>
|
<el-table :data="[info]" border fit>
|
<el-table-column label="姓名" prop="" min-width="150">
|
<template slot-scope="{ row }">
|
<div class="name_wrap">
|
<image :src="row.prefix
|
? row.prefix
|
: require('@/assets/avatar/man.png')
|
" class="avatar" mode="" />
|
<div class="content">
|
<div class="line">
|
<div class="name">{{ row.name }}</div>
|
<div class="tag">申请人</div>
|
</div>
|
<div class="line placeholder9">{{ row.phone }}</div>
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
<!-- <el-table-column label="性别" prop="" min-width="40" /> -->
|
<el-table-column label="证件类型" prop="idcardTypeName" min-width="80">
|
<template slot-scope="{ row }">
|
<span v-if="row.idcardType == 0">身份证</span>
|
<span v-if="row.idcardType == 1">港澳证件</span>
|
<span v-if="row.idcardType == 2">护照</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="证件号码" prop="idCardDecode" min-width="120" />
|
<el-table-column label="公司名称" prop="companyName" min-width="120" />
|
<el-table-column label="人脸照片" prop="" min-width="80">
|
<template slot-scope="{ row }">
|
<el-image v-if="row.prefix && row.faceImg" :src="row.prefix + row.faceImg" :preview-src-list="[row.prefix + row.faceImg]">
|
</el-image>
|
</template>
|
</el-table-column>
|
</el-table>
|
</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="{ padding: item.statusInfo == '处理中' || item.status == '1' }">{{
|
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(2)" type="primary" class="status-red" v-if="
|
info.approveDateVO != null &&
|
info.approveDateVO.canBeApproved != null &&
|
info.approveDateVO.canBeApproved == 1
|
">同意</el-button>
|
<el-button @click="handleAppr(3)" type="danger" v-if="
|
info.approveDateVO != null &&
|
info.approveDateVO.canBeApproved != null &&
|
info.approveDateVO.canBeApproved == 1
|
">拒绝</el-button>
|
<el-button @click="close">返回</el-button>
|
</template>
|
<!-- 同意/拒绝 -->
|
<el-dialog append-to-body :title="param.status == 2 ? '同意' : '拒绝'" :visible.sync="isShowAppr" width="480px">
|
<el-form :model="param" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
<el-form-item :prop="param.status == 3 ? 'checkInfo' : ''" :label="param.status == 2 ? '同意说明' : '拒绝说明'">
|
<el-input type="textarea" :placeholder="param.status == 2 ? '同意说明，非必填' : '拒绝说明必填'
|
" :rows="4" v-model="param.checkInfo" />
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="isShowAppr = false">取消</el-button>
|
<el-button :loading="subLoading" type="primary" @click="onSubAppr">确定</el-button>
|
</span>
|
</el-dialog>
|
<!-- 隐患 -->
|
<el-dialog append-to-body title="隐患" :visible.sync="isShowProblem" width="480px">
|
<el-form :model="param" :rules="rules" ref="ruleForm" label-width="100px">
|
<el-form-item label="退回时间">
|
<el-date-picker class="w300" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="param.date" />
|
</el-form-item>
|
<el-form-item label="整改前">
|
<div class="df_ac">
|
<img src="@/assets/avatar/man.png" />
|
<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
|
: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>
|
</div>
|
</el-form-item>
|
<el-form-item label="退回说明">
|
<el-input type="textarea" placeholder="请填写说明" :rows="4" v-model="param.explain" />
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="isShowProblem = false">取消</el-button>
|
<el-button type="primary" @click="isShowProblem = false">确定</el-button>
|
</span>
|
</el-dialog>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import {
|
getVisitedDetail,
|
approveDo
|
} from '@/api'
|
export default {
|
components: { GlobalWindow },
|
data() {
|
return {
|
id: '',
|
type: '',
|
|
title: '访客预约详情',
|
isShowModal: false,
|
info: {},
|
isShowAppr: false,
|
apprTitle: '同意',
|
subLoading: false,
|
param: {},
|
|
isShowProblem: false,
|
rules: {
|
checkInfo: [{ required: true, message: '请输入', trigger: 'blur' }]
|
},
|
statusMap: {
|
0: '待审核',
|
1: '处理中',
|
2: '已同意',
|
3: '已拒绝',
|
4: '已取消',
|
},
|
cateList: {
|
0: '访客申请',
|
1: '访客报备',
|
2: '用车申请',
|
3: '隐患随手拍',
|
4: '物流车申请'
|
}
|
}
|
},
|
methods: {
|
onSubAppr() {
|
this.$refs.ruleForm.validate((valid) => {
|
if (!valid) {
|
return
|
}
|
this.$dialog.actionConfirm('操作确认', this.param.status === 2 ? '您确认同意该申请吗？' : '您确认拒绝该申请吗？')
|
.then(() => {
|
this.subLoading = true
|
approveDo({
|
objId: this.id,
|
objType: this.info.type,
|
status: this.param.status,
|
checkInfo: this.param.checkInfo
|
})
|
.then(res => {
|
this.subLoading = false
|
this.$tip.apiSuccess('处理成功')
|
this.getDetail()
|
this.$emit('success')
|
this.$emit('close')
|
this.isShowAppr = false
|
})
|
.finally(() => {
|
this.subLoading = false
|
})
|
})
|
})
|
},
|
close(){
|
this.isShowModal = false
|
this.$emit('close')
|
},
|
getDetail() {
|
const { id, type } = this
|
console.log(id, type)
|
switch (type) {
|
case 0:
|
getVisitedDetail({ id }).then(res => {
|
this.info = res
|
if (this.info.approveDateVO && this.info.approveDateVO.approveList.length > 0) {
|
this.info.approveDateVO.approveList.forEach(item => {
|
if (item.approveList && item.approveList.length == 1 && item.type !== 1) {
|
item.title = item.approveList[0].title
|
item.faceImg = item.approveList[0].faceImg
|
item.memberName = item.approveList[0].memberName
|
item.statusInfo = item.approveList[0].statusInfo
|
item.approveList = []
|
}
|
})
|
}
|
})
|
break
|
|
default:
|
break
|
}
|
},
|
handleAppr(val) {
|
this.$set(this.param, 'status', val)
|
this.isShowAppr = true
|
this.$nextTick(() => {
|
this.$refs.ruleForm.clearValidate()
|
})
|
},
|
confirm() {
|
console.log('--')
|
},
|
handleTransfer() {
|
this.isShowProblem = true
|
},
|
reject() { },
|
handleAvatarSuccess() { },
|
beforeAvatarUpload() { }
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "@/assets/style/variables.scss";
|
|
.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;
|
}
|
|
.value {
|
color: #111111;
|
}
|
}
|
}
|
}
|
|
.header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 20px 30px;
|
margin: 0 -30px;
|
border-radius: 8px 8px 0 0;
|
position: relative;
|
|
.head_bg {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
left: 0;
|
top: 0;
|
z-index: 9;
|
}
|
|
.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;
|
position: relative;
|
z-index: 99;
|
}
|
|
.scs {
|
background-color: #00BA67;
|
}
|
|
.msg {
|
background-color: #ED4545;
|
}
|
}
|
|
.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% - 30px);
|
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: $primaryColor;
|
}
|
}
|
|
.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;
|
|
.status {
|
color: #888888;
|
}
|
|
.padding {
|
color: $primaryColor;
|
}
|
|
.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>
|
