hz-zhhq-app/pages/access-card/card-record-detail.vue

738 lines
26 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="hzIndex">
<hzHeader title="门禁卡审批详情"></hzHeader>
<view class="hzContent" style="padding-top: 200upx;">
<view class="details">
<view class="detail_msg">
<view class="info-item">
<text class="label">办卡类型 </text>
<text class="infoSpan">{{itemd.typeName}}</text>
</view>
<view class="info-item">
<text class="label">门卡类型 </text>
<text class="infoSpan">{{itemd.cardType}}</text>
</view>
<view class="info-item" v-if="itemd.cardType=='职工卡'">
<view class="info-item">
<text class="label">出入区域: </text>
<uni-table ref="table" border emptyText="暂无更多数据" style="margin-top: 30upx;">
<uni-tr></uni-tr>
<uni-tr v-for="(item, index) in accessArea" :key="index">
<uni-td align="center" width="80">{{ item.address }}</uni-td>
<uni-td align="center">{{ item.area }}</uni-td>
</uni-tr>
</uni-table>
</view>
<view>
<view v-for="(people,peopleIndex) in peopleList0" :key="peopleIndex" >
<view style="margin: 20rpx 10rpx;font-size: 30rpx;font-weight: bold;border-left:4px solid #0DB0A7;">人员信息{{peopleIndex+1}}</view>
<view class="form-item">
<text class="label">人员姓名:</text>
<text class="infoSpan">{{people.personnel}}</text>
</view>
<view class="form-item">
<text class="label">人员部门:</text>
<text class="infoSpan">{{people.unit}}</text>
</view>
<view class="form-item">
<text class="label">联系电话:</text>
<text class="infoSpan">{{people.personnelPhone}}</text>
</view>
<view class="info-item" v-if="people.idPhoto">
<text class="label">登记照片: </text>
<br/>
<image class="info-item" v-for="(item, index) in people.idPhoto.split(',')" :key="index" :src="item" :width="100" style="margin-right: 5px;"></image>
</view>
<view class="info-item" v-if="people.photo">
<text class="label">身份证图片: </text>
<br/>
<image v-if="item!=''" class="info-item" v-for="(item, index) in people.photo.split(',')" :key="index" :src="item" :width="100" style="margin-right: 5px;"></image>
</view>
</view>
</view>
</view>
<view class="info-item" v-if="itemd.cardType=='第三方人员'">
<view>
<view class="form-item">
<text class="label">项目归口管理部门:</text>
<text class="infoSpan">{{item.xmgkOrgName}}</text>
</view>
<view class="form-item">
<text class="label">经办人员:</text>
<text class="infoSpan">{{item.jbUserName}}</text>
</view>
<view class="form-item">
<text class="label">联系电话:</text>
<text class="infoSpan">{{item.jbUserPhone}}</text>
</view>
<view class="form-item">
<text class="label">申请人姓名:</text>
<text class="infoSpan">{{item.userInfoVos[0].personnel}}</text>
</view>
<view class="form-item">
<text class="label">所属单位:</text>
<text class="infoSpan">{{item.userInfoVos[0].unit}}</text>
</view>
<view class="form-item">
<text class="label">联系方式:</text>
<text class="infoSpan">{{item.userInfoVos[0].personnelPhone}}</text>
</view>
<view class="form-item">
<text class="label">申请类别:</text>
<text class="infoSpan">{{item.applyType}}</text>
</view>
<view class="form-item">
<text class="label">申请期限:</text>
<text class="infoSpan">{{item.applyTerm}}</text>
</view>
<view class="info-item">
<text class="label">出入区域: </text>
<uni-table ref="table" border emptyText="暂无更多数据" style="margin-top: 30upx;">
<uni-tr></uni-tr>
<uni-tr v-for="(item, index) in accessArea" :key="index">
<uni-td align="center" width="80">{{ item.address }}</uni-td>
<uni-td align="center">{{ item.area }}</uni-td>
</uni-tr>
</uni-table>
</view>
<view class="info-item" v-if="item.userInfoVos[0].idPhoto">
<text class="label">人脸照片: </text>
<br/>
<image class="info-item" v-for="(item, index) in item.userInfoVos[0].idPhoto.split(',')" :key="index" :src="item" :width="100" style="margin-right: 5px;"></image>
</view>
<view class="info-item" v-if="item.userInfoVos[0].photo">
<text class="label">身份证图片: </text>
<br/>
<image v-if="item!=''" class="info-item" v-for="(item, index) in item.userInfoVos[0].photo.split(',')" :key="index" :src="item" :width="100" style="margin-right: 5px;"></image>
</view>
<view class="info-item" v-if="item.userInfoVos[0].documentation">
<text class="label">身份证图片: </text>
<br/>
<image v-if="item!=''" class="info-item" v-for="(item, index) in item.userInfoVos[0].documentation.split(',')" :key="index" :src="item" :width="100" style="margin-right: 5px;"></image>
</view>
</view>
</view>
<view class="info-item" v-if="itemd.cardType=='VIP贵宾'">
<view>
<view class="form-item">
<text class="label">经办部门:</text>
<text class="infoSpan">{{item.xmgkOrgName}}</text>
</view>
<view class="form-item">
<text class="label">经办人员:</text>
<text class="infoSpan">{{item.jbUserName}}</text>
</view>
<view class="form-item">
<text class="label">联系电话:</text>
<text class="infoSpan">{{item.jbUserPhone}}</text>
</view>
<view class="form-item">
<text class="label">借出时间:</text>
<text class="infoSpan">{{item.lendTime}}</text>
</view>
<view class="form-item">
<text class="label">归还时间:</text>
<text class="infoSpan">{{item.backTime}}</text>
</view>
<view class="info-item" v-if="item.documentation">
<text class="label">附件: </text>
<br/>
<image class="info-item" v-for="(item, index) in item.documentation.split(',')" :key="index" :src="item" :width="100" style="margin-right: 5px;"></image>
</view>
<view class="form-item" v-if="item.operType==2 && item.actualBackTime!=null">
<text class="label">证件有效期:</text>
<text class="infoSpan">{{item.actualBackTime}}</text>
</view>
<view class="form-item" v-if="item.operType==2 && item.actualBackTime==null">
<text class="label" style="width:100px">实际归还时间<text style="color: red;">*</text>:</text>
<view class="ipt-box"><uni-datetime-picker :clear-icon="false" v-model="realBackDate"
type="date" :border="false"/></view>
</view>
<view class="form-item" v-if="item.operType==2 && item.remark!=null">
<text class="label">备注:</text>
<text class="infoSpan">{{item.remark}}</text>
</view>
<view class="form-item" v-if="item.operType==2 && item.remark==null">
<text class="label">备注<text style="color: red;">*</text>:</text>
<view class="ipt-box"><input class="top-t" v-model="remarks" placeholder="请输入" type="text"
maxlength="50" /></view>
</view>
</view>
</view>
<view class="info-item" v-if="itemd.cardType=='临时出入证'">
<view>
<view class="form-item">
<text class="label">项目名称:</text>
<text class="infoSpan">{{item.proName}}</text>
</view>
<view class="form-item">
<text class="label">项目单位:</text>
<text class="infoSpan">{{item.proUnit}}</text>
</view>
<view class="form-item">
<text class="label">项目负责人:</text>
<text class="infoSpan">{{item.proManager}}</text>
</view>
<view class="form-item">
<text class="label">联系电话:</text>
<text class="infoSpan">{{item.proManagerPhone}}</text>
</view>
<view class="form-item">
<text class="label">项目归口管理部门:</text>
<text class="infoSpan">{{item.proManagerPhone}}</text>
</view>
<view class="form-item">
<text class="label">经办人员:</text>
<text class="infoSpan">{{item.proManagerPhone}}</text>
</view>
<view class="form-item">
<text class="label">合同有效期:</text>
<text class="infoSpan">{{item.contractStartTime}}</text>~<text class="infoSpan">{{item.contractEndTime}}</text>
</view>
<view class="form-item" v-if="item.operType==2 && item.cardEndTime!=null">
<text class="label">证件有效期:</text>
<text class="infoSpan">{{item.cardStartTime}}</text>~<text class="infoSpan">{{item.cardEndTime}}</text>
</view>
<view class="form-item" v-if="item.operType==2 && item.cardEndTime==null" >
<text class="label" style="width: 170rpx;">证件有效期<text style="color: red;">*</text>:</text>
<view class="ipt-box"><uni-datetime-picker :clear-icon="false" v-model="dateRange"
type="daterange" :border="false"/></view>
</view>
<view class="info-item">
<text class="label">出入区域: </text>
<uni-table ref="table" border emptyText="暂无更多数据" style="margin-top: 30upx;">
<uni-tr></uni-tr>
<uni-tr v-for="(item, index) in accessArea" :key="index">
<uni-td align="center" width="80">{{ item }}</uni-td>
</uni-tr>
</uni-table>
</view>
<view class="form-item">
<text class="label">办证人数:</text>
<text class="infoSpan">{{item.userInfoVos.length}}</text>
</view>
<view>
<view v-for="(people,peopleIndex) in peopleList0" :key="peopleIndex" >
<view style="margin: 20rpx 10rpx;font-size: 30rpx;font-weight: bold;border-left:4px solid #0DB0A7;">人员信息{{peopleIndex+1}}</view>
<view class="form-item">
<text class="label">人员姓名:</text>
<text class="infoSpan">{{people.personnel}}</text>
</view>
<view class="info-item" v-if="people.idPhoto">
<text class="label">登记照片: </text>
<br/>
<image class="info-item" v-for="(item, index) in people.idPhoto.split(',')" :key="index" :src="item" :width="100" style="margin-right: 5px;"></image>
</view>
</view>
</view>
</view>
</view>
<view class="info-item" v-if="itemd.cardType=='施工出入证'">
<view>
<view class="form-item">
<text class="label">项目归口管理部门:</text>
<text class="infoSpan">{{item.xmgkOrgName}}</text>
</view>
<view class="form-item">
<text class="label">经办人员:</text>
<text class="infoSpan">{{item.jbUserName}}</text>
</view>
<view class="form-item">
<text class="label">联系电话:</text>
<text class="infoSpan">{{item.jbUserPhone}}</text>
</view>
<view class="form-item">
<text class="label">工作内容:</text>
<text class="infoSpan">{{item.workContent}}</text>
</view>
<view class="form-item">
<text class="label">工作票编号:</text>
<text class="infoSpan">{{item.ticketNo}}</text>
</view>
<view class="info-item">
<text class="label">作业地点: </text>
<uni-table ref="table" border emptyText="暂无更多数据" style="margin-top: 30upx;">
<uni-tr></uni-tr>
<uni-tr v-for="(item, index) in accessArea" :key="index">
<uni-td align="center" width="80">{{ item }}</uni-td>
</uni-tr>
</uni-table>
</view>
<view class="form-item">
<text class="label">作业单位:</text>
<text class="infoSpan">{{item.proUnit}}</text>
</view>
<view class="form-item">
<text class="label">工作负责人:</text>
<text class="infoSpan">{{item.proManager}}</text>
</view>
<view class="form-item">
<text class="label">联系方式:</text>
<text class="infoSpan">{{item.proManagerPhone}}</text>
</view>
<view class="form-item">
<text class="label">合同有效期:</text>
<text class="infoSpan">{{item.contractStartTime}}</text>~<text class="infoSpan">{{item.contractEndTime}}</text>
</view>
<view class="form-item" v-if="item.operType==2 && item.cardEndTime!=null">
<text class="label">证件有效期:</text>
<text class="infoSpan">{{item.cardStartTime}}</text>~<text class="infoSpan">{{item.cardEndTime}}</text>
</view>
<view class="form-item" v-if="item.operType==2 && item.cardEndTime==null" >
<text class="label" style="width: 170rpx;">证件有效期<text style="color: red;">*</text>:</text>
<view class="ipt-box"><uni-datetime-picker :clear-icon="false" v-model="dateRange"
type="daterange" :border="false"/></view>
</view>
<view class="form-item" v-if="item.carNum">
<text class="label">车牌号:</text>
<text class="infoSpan">{{item.carNum}}</text>
</view>
<view>
<view v-for="(people,peopleIndex) in peopleList0" :key="peopleIndex" >
<view style="margin: 20rpx 10rpx;font-size: 30rpx;font-weight: bold;border-left:4px solid #0DB0A7;">人员信息{{peopleIndex+1}}</view>
<view class="form-item">
<text class="label">人员姓名:</text>
<text class="infoSpan">{{people.personnel}}</text>
</view>
<view class="form-item">
<text class="label">身份证号:</text>
<text class="infoSpan">{{people.idNumber}}</text>
</view>
<view class="info-item" v-if="people.idPhoto">
<text class="label">登记照片: </text>
<br/>
<image class="info-item" v-for="(item, index) in people.idPhoto.split(',')" :key="index" :src="item" :width="100" style="margin-right: 5px;"></image>
</view>
</view>
</view>
</view>
</view>
<view class="info-item">
<text class="label">申请人: </text>
<text class="infoSpan">{{userInfo.userName}}</text>
</view>
<view class="info-item">
<text class="label">申请时间: </text>
<text class="infoSpan">{{item.applyTime}}</text>
</view>
<!-- <view class="info-item" v-if="item.TYPE==2">
<text class="label">申请事由: </text>
<text class="infoSpan">{{item.MATTER}}</text>
</view> -->
<!-- <view class="info-item">
<view style="color: #333;font-size: 30upx;font-weight: bold;padding: 10upx 0px;">
<text>部门审批意见:</text>
</view>
<view style="width: 100%;border: 1px solid #E5E5E5;margin-top: 20upx;padding: 20upx;height: 250upx;color: #666;border-radius: 10upx;">
<textarea class="textarea" v-model="item.FEEDBACK" placeholder="请输入审批意见" disabled="true" maxlength="150"/>
</view>
</view> -->
<!-- <view class="info-item">
<view style="color: #333;font-size: 30upx;font-weight: bold;padding: 10upx 0px;">
<text>物业审批意见:</text>
</view>
<view style="width: 100%;border: 1px solid #E5E5E5;margin-top: 20upx;padding: 20upx;height: 250upx;color: #666;border-radius: 10upx;">
<textarea class="textarea" v-model="item.FEEDBACK" placeholder="请输入审批意见" disabled="true" maxlength="150"/>
</view>
</view> -->
<view class="img-box" >
<image v-for="(itemImg,imgIndex) in item.pictures" :key="imgIndex" :src="formatImgUrl(itemImg)" mode="" @click="vbPicture(new Array(formatImgUrl(itemImg)))"></image>
</view>
</view>
</view>
<view >
<view class="details">
<YSteps :lineNum='lineNum' color='#fff' backgroundColor='#4db4ea' :infoList='process'></YSteps>
</view>
</view>
<view class="occupied" style="height: 180upx;"></view>
<view v-if="queryType==1 && examineButton && item.examineState==0" style="position: fixed;bottom:0upx;height: 50upx;width: 100%;">
<view>
<view class="footer-btn footer-btn-two batchBtn" >
<view class="btn btn-col btn1" @click="circulation()">拒绝</view>
<view class="btn btn-col1 btn2" @click="submit(1)">通过</view>
</view>
</view>
</view>
<view class="footer-btn" v-if="queryType==1 && item.examineState==1&& item.cardStatus==1" @click="submit2(2)">
<view class="btn">制卡完成</view>
</view>
<view class="footer-btn" v-if="queryType==1 && item.examineState==1&& item.cardStatus==2" @click="submit2(3)">
<view class="btn">已领取</view>
</view>
<uni-popup ref="popup" @change="show(arguments)" type="center" style="">
<view style="background: white;width: 80%;height: 540upx;width: 600upx;position: relative;border-radius: 10upx;padding: 14upx;">
<view style="color: #333;font-size: 30upx;font-weight: bold;padding: 10upx 0px;">
<text>拒绝原因:</text>
</view>
<view style="width: 100%;border: 1px solid #E5E5E5;margin-top: 20upx;padding: 20upx;height: 300upx;color: #666;border-radius: 10upx;">
<textarea style="width: 100%;height: 100%;" v-model="replyContent" placeholder="请输入拒绝原因"/>
</view>
<view class="footer-btn footer-btn-two" style="position: absolute;margin-bottom: 20upx;">
<view class="btn btn-col" style="width:40%;margin-left:7%;margin-right: 6%;border-radius: 10upx;" @click="closeCirculation()">取消</view>
<view class="btn btn-col1" style="width:40%;border-radius: 10upx" @click="submit(2)">确定</view>
</view>
</view>
</uni-popup>
</view>
</view>
</template>
<script>
import {
getCard,updateCard,getDetailInfo,getHistoryPros,auditData,updateCardStatus
} from '@/common/api.js';
import YSteps from '@/components/Y-Steps/Y-Steps.vue';
import UniPopup from "@/components/uni-popup/uni-popup.vue";
import {
callbackRequest,
getStorage,
alertTip,
formatDate,
sureAlterTip,
vbPicture,
formatImgUrl
} from '@/common/util.js';
export default {
components: {
UniPopup,
YSteps
},
data() {
return {
vbPicture:vbPicture,
formatImgUrl:formatImgUrl,
userInfo:getStorage('userInfo'),
userId:getStorage('userInfo').userId,
formatDate:formatDate,
item: {DEMAND:'',FEEDBACK:'',userInfoVos:[{personnel:'',photo:'',idPhoto:'',documentation:''}]},
itemd:{},
id:0,
realBackDate:'',
dateRange: ['',''],
feedback:'',
submitFlag:true,
queryType:0,
replyContent:'',
remarks:'',
examineButton:true,
process: [],
lineNum:0,
photo: '',
photos: [],
idPhoto: '',
idPhotos: [],
documentPhoto: '',
documentPhotos: [],
accessArea:[],
peopleList0:[]
}
},
onLoad(option) {
this.itemd = JSON.parse(option.item);
this.id = this.item.ID;
this.queryType = option.queryType||0;
this.getCard();
},
methods: {
getCard(){
console.log("itemd",this.itemd)
let params = {
method: getDetailInfo,
data: {
userId: this.userInfo.id,
phone: this.userInfo.telnumber,
dataId:this.itemd.dataId,
cardType:this.itemd.cardType
}
};
callbackRequest(params).then(res => {
res = res.data;
if (res.returnCode == 1) {
let _this = this;
_this.item = res.returnData;
this.examineBatch = _this.item.examineBatch;
this.peopleList0=_this.item.userInfoVos;
if(_this.item.photo){
_this.photos = _this.item.photo.split(',');
}
if(_this.item.idPhoto&&_this.item.idPhoto!='null'){
_this.idPhotos = _this.item.idPhoto.split(',');
}
if(_this.item.documentation){
_this.documentPhotos = _this.item.documentation.split(',');
}
console.log("this.item.cardType",this.itemd)
if(this.itemd.cardType=='职工卡'||this.itemd.cardType=='第三方人员'){
if(_this.item.accessArea){
_this.accessArea = JSON.parse(_this.item.accessArea)
}else{
_this.accessArea = []
}
}else{
if(_this.item.accessArea){
_this.accessArea = _this.item.accessArea.split(',')
}else{
_this.accessArea = []
}
}
let details = res.returnData.auditVos||[]
for(let i=0;i<details.length;i++){
let obj = details[i];
if(_this.examineBatch == obj.examineBatch){
setTimeout(()=>{_this.examineButton = false;},400)
// _this.examineButton = false;
}
}
_this.process=[];
if(_this.process.length==0){
let pObj0 = {
date: '经办人',
info: _this.userInfo.userName+' 发起申请',
time: formatDate( _this.itemd.applyTime,'dateTime')
}
_this.process.push(pObj0);
}
if(details.length>0){
for(let i=0;i<details.length;i++){
let pObj = {
date: details[i].batchDescription,
info: details[i].userName+" "+(details[i].examineState==1?"同意":"拒绝 "+(details[i].examineState||'')),
time: formatDate(details[i].examineTime,'dateTime')
}
if(details[i].EXAMINE_BATCH=='3'){
pObj = {
date: details[i].batchDescription,
info: details[i].userName+" "+(details[i].examineState==1?"制作完成":"拒绝 "+(details[i].examineState||'')),
time: formatDate(details[i].examineTime,'dateTime')
}
}
_this.process.push(pObj);
}
}
} else {
alertTip(res.returnMsg);
}
});
},
circulation(){
this.$refs.popup.open();
},
show(val){
this.examineButton = !val[0].show;
// console.log(this.examineButton)
},
closeCirculation(){
this.$refs.popup.close()
// this.examineButton = true;
},
submit(examineState){
//examineState 1通过2不通过
let params = {
"method": auditData,
"data":{
dataId: this.item.dataId,
userId:getStorage('userInfo').id,
userName:getStorage('userInfo').userName,
checkUserId:this.item.checkUserId,
cardType:this.itemd.cardType,
typeName:this.item.typeName,
examineBatch:this.item.examineBatch,
examineState:examineState,
examineOpinion:this.replyContent,
cardStartTime: this.dateRange[0],
cardEndTime: this.dateRange[1],
actualBackTime:this.realBackDate,
remark:this.remarks,
checkId:this.item.checkId,
checkRole:this.item.checkRole,
operCardId:this.item.operCardId,
operType:this.item.operType
}
};
console.log("审核params",params)
callbackRequest(params).then(res => {
res = res.data;
if (res.returnCode == 1) {
alertTip(res.returnMsg);
this.closeCirculation();
// this.getCard();
uni.navigateBack({
delta: 1
});
} else {
alertTip(res.returnMsg);
}
})
},
submit2(examineState){
//examineState 2纸卡完成3已领取
let params = {
"method": updateCardStatus,
"data":{
dataId: this.item.dataId,
userId:getStorage('userInfo').id,
phone:getStorage('userInfo').telnumber,
cardStatus:examineState
}
};
console.log("2纸卡完成3已领取params",params)
callbackRequest(params).then(res => {
res = res.data;
if (res.returnCode == 1) {
alertTip(res.returnMsg);
this.closeCirculation();
// this.getCard();
setTimeout(() => {
this.$router.go(0)
}, 500)
} else {
alertTip(res.returnMsg);
}
})
},
}
}
</script>
<style lang="scss">
@import '@/static/css/common.scss';
.batchBtn{
position: absolute;
display: flex;
justify-content: space-between;
padding: 10upx 40upx;
.btn1{
background: #C1EFEA;
color: #09AFA5;
width: 40%;
border-radius: 50upx;
}
.btn2{
background: linear-gradient( 90deg, #50CBA1 0%, #06AEA6 100%), #C1EFEA;
color: #fff;
width: 40%;
border-radius: 50upx;
}
}
.details{
// height: 550upx;
background: white;
margin: 20upx;
border-radius: 15upx;
padding-bottom:15rpx;
position: relative;
font-size: 26upx;
.detail_header {
border-bottom: #f8f8f8 5upx solid;
height: 90upx;
line-height: 90upx;
margin: 15upx;
border-radius: 10upx;
.blueSign {
height: 28upx;
width: 5upx;
background: #00c277;
display: inline-block;
margin-left: 20upx;
}
.font-tilte {
font-weight:bold;
margin-left: 20upx;
}
}
.form-box {
background: #fff;
.form-item {
overflow: hidden;
border-bottom: 1px solid #eee;
padding: 30upx 20upx;
.label {
float: left;
width: 180upx;
font-size: 28upx;
color: #333;
font-weight: bold;
line-height: 50upx;
}
.ipt-box {
margin-left: 160upx;
input {
width: 90%;
height: 50upx;
line-height: 50upx;
font-size: 26upx;
color: #666;
}
}
.select {
.arrow {
float: right;
width: 16upx;
height: 29upx;
margin-top: 10upx;
}
.picker {
height: 50upx;
line-height: 50upx;
font-size: 26upx;
color: #666;
margin-left: 10upx;
}
}
}
}
.detail_msg {
margin-left: 20upx;
border-radius: 10upx;
.info-item{
border-bottom:1px solid #f8f8f8;
padding:20upx 10upx;
line-height: 50upx;
.label{
float: left;
width: 180upx;
font-size: 28upx;
color: #333;
font-weight: bold;
line-height: 50upx;
}
}
.status {
.infoSpan{
color: #00c277;
}
.infoSpan2{
color: red;
}
}
.img-box {
// background: #fff;
image{
width: 200upx;
height: 200upx;
margin:20upx 20upx 0 0;
}
}
}
}
</style>