v3-lab-xcx/pages_manage/accessQualification/accessQualificationInfo.vue

<!-- 准入资格申请详情 -->
<template>
    <view id="accessQualificationInfo" v-if="pageType">
		<view class="user-info-box">
			<view class="user-info-box-min">
				<view>实验室：</view>
				<view>{{subjectData.labSecurityApply.subjectName}}</view>
			</view>
			<view class="user-info-box-min">
				<view>申请人：</view>
				<view>{{subjectData.labSecurityApply.userName}}</view>
			</view>
			<view class="user-info-box-min">
				<view>申请时限：</view>
				<view>{{subjectData.labSecurityApply.validBeginTime}}至{{subjectData.labSecurityApply.validEndTime}}</view>
			</view>
			<view class="user-info-box-min">
				<view>申请备注：</view>
				<view>{{subjectData.labSecurityApply.applyCause==null?'':subjectData.labSecurityApply.applyCause}}</view>
			</view>
		</view>
		<view class="user-info-box">
			<view class="user-info-box_title"><view style="color: red;">*</view>身份信息：(关联学生信息材料)</view>
			<view class="user-info-box-min">
				<view>申请人：</view>
				<view>{{subjectData.sysUser.nickName}}</view>
			</view>
			<view class="user-info-box-min">
				<view>联系电话：</view>
				<view>{{subjectData.sysUser.phonenumber}}</view>
			</view>
			<view class="user-info-box-min" >
				<view>学号：</view>
				<view>{{subjectData.sysUser.userName}}</view>
			</view>
			<view class="user-info-box-min">
				<view>物理卡号：</view>
				<view>{{subjectData.sysUser.cardNum}}</view>
			</view>
			<view class="user-info-box-min" >
				<view>班级：</view>
				<view>{{subjectData.sysUser.grade}}</view>
			</view>
			<view class="user-info-box-min" >
				<view>导师：</view>
				<view>{{subjectData.sysUser.tutorUserName}}</view>
			</view>
		</view>
		<view v-for="(item,index) in subjectData.listTemp" :key="index" style="overflow: hidden;">
			<view class="img-box" v-if="item.materialType==2&&item.relationType==2">
				<view class="img-title">安全考试证书</view>
				<img v-if="subjectData.listcert[0]" class="item-img-box" :src="subjectData.listcert[0].cert_url">
				<view v-if="!subjectData.listcert[0]" style="margin-left:40px;color:#999;font-size:14px;">暂无证书</view>
			</view>
			<view class="word-box" v-if="item.materialType==1">
				<view class="word-box-title">{{item.materialName}}</view>
				<view class="word-box-min" v-for="(minItem,minIndex) in item.upList" :key="minIndex" @click="lookItem(minItem)">
					<img src="@/images/basicsModules/icon_pdf.png" v-if="minItem.type == 'pdf'">
					<img src="@/images/basicsModules/icon_word.png" v-if="minItem.type == 'doc' || minItem.type == 'docx'">
					<img :src="baseUrl+minItem.url" v-if="minItem.type == 'png' || minItem.type == 'jpg' || minItem.type == 'jpeg' || minItem.type == 'gif'">
					<view>{{minItem.name}}</view>
				</view>
			</view>
		</view>
		<view class="bottom-button-box" v-if="subjectData.labSecurityApply.auditStatus == 0">
			<view @click="goReviewFailed">审核未通过</view>
			<view @click="accessButtonClick">审核通过</view>
		</view>
    </view>
</template>

<script>

     import { config } from '@/api/request/config.js'
    import { getDetails,laboratoryApply } from '@/api/apiDemo/index.js'
    export default {
        data() {
            return {
				baseUrl:config.base_url,
				pageType:false,
				//获取数据
				subjectData:{},
				newData:{
					text1:"甲烷监测实验室",
					text2:"曹秀康",
					text3:"学生",
					text4:"2022-01-11  14:56",
					text5:"曹秀康",
					text6:"24141534553",
					text7:"安全工程学院",
					text8:"安全科学与工程专业",
					textlist1:[
						'https://img1.baidu.com/it/u=1349023829,1710986137&fm=253&fmt=auto&app=138&f=JPEG?w=786&h=500',
						'https://img1.baidu.com/it/u=1349023829,1710986137&fm=253&fmt=auto&app=138&f=JPEG?w=786&h=500',
						'https://img1.baidu.com/it/u=1349023829,1710986137&fm=253&fmt=auto&app=138&f=JPEG?w=786&h=500',
					],
					textlist2:[
						{
							type:1,
							name:"信息照片副本.pdf",
						},
						{
							type:2,
							name:"信息照片副本.word",
						},
					],
				},
                itemData:{},
                type:0,
            }
        },
        onLoad(option) {
            this.infoData = JSON.parse(decodeURIComponent(option.item));
            //修改页面title
            uni.setNavigationBarTitle({
                title:this.infoData.auditStatus==0?'待审核':(this.infoData.auditStatus==1?'未通过':(this.infoData.auditStatus==2?'已通过':''))
            });
        },
		onShow(){
			this.getDetails()
		},
        methods: {
			//审核按钮
			accessButtonClick(){
				let self = this;
				uni.showModal({
				    content: '确认审核吗?',
				    cancelColor:"#999",
				    confirmColor:"#0183FA",
				    success: function (res) {
				        if (res.confirm) {
				            self.laboratoryApply();
				        } else if (res.cancel) {
				        }
				    }
				});
			},
			//审核接口
			async laboratoryApply(){
				let obj = {
				  id:this.subjectData.labSecurityApply.id,
				  auditStatus:2,
				};
				const {data} = await laboratoryApply(obj)
				if(data.code == 200){
					uni.showToast({
						title: '审核成功',
						icon:"none",
						mask:true,
						duration: 2000
					});
					setTimeout(function(){
						uni.navigateBack();
					},2000);
				}

			},
			lookItem(minItem){
				let self = this;
				if(minItem.type == 'png' || minItem.type == 'jpg' || minItem.type == 'jpeg' || minItem.type == 'gif'){
					//查看图片
					wx.previewImage({
						urls: [self.baseUrl+minItem.url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
						current: '', // 当前显示图片的http链接，默认是第一个
						success: function(res) {},
						fail: function(res) {},
						complete: function(res) {},
					})
				}else if(minItem.type == 'pdf' || minItem.type == 'doc' || minItem.type == 'docx'){
					uni.showLoading({
					    title: '下载中'
					});
					//下载文档
					wx.downloadFile({
						url: minItem.url,
						header: {
							Authorization: uni.getStorageSync('token')
						},
						success: function (res) {
							const fileManager = wx.getFileSystemManager()
							const filePath = wx.env.USER_DATA_PATH + '/' + minItem.name + '.docx'
							fileManager.saveFile({
								tempFilePath: res.tempFilePath,
								filePath,
								success: () => {
									uni.hideLoading();
									wx.openDocument({
									filePath: filePath,
									showMenu: true,
									fileType: minItem.type
									})
								},
								fail: function (res){
									uni.hideLoading();
									uni.showToast({
										title: '下载失败',
										icon:"none",
										mask:true,
										duration: 2000
									});
								}
							})
						},
						fail: function (res){
							uni.hideLoading();
							uni.showToast({
								title: '下载失败',
								icon:"none",
								mask:true,
								duration: 2000
							});
						}
					})
				}
			},
            //获取安全准入审批记录详细信息(用户端)
            async getDetails() {
                let self = this;
                const {data} = await getDetails({id:this.infoData.id})
                if(data.code==200){
				  for(let i=0;i<data.data.listTemp.length;i++){
					if(data.data.listTemp[i].materialType == 1){
					  let maxList = [];
					  for(let o=0;o<data.data.listTemp[i].listMr.length;o++){
						let bigList = data.data.listTemp[i].listMr[o].dataUrl.split(',');
						for(let x=0;x<bigList.length;x++){
						  if(bigList[x]){
							let minList = bigList[x].split(';');
							let minListTwo = minList[0].split('.')
							let obj = {
							  name:minList[0],
							  url:minList[1],
							  type:minListTwo[1]
							};
							maxList.push(obj);
						  }
						}
					  }
					  data.data.listTemp[i].upList = maxList;
					}
				  }
				  this.$set(this,"subjectData",data.data);
				  this.pageType = true;
                }
            },
			goReviewFailed(){
				let obj = {
				  id:this.subjectData.labSecurityApply.id,
				  rejectCause:this.subjectData.listTemp,
				}
				uni.navigateTo({
				    url:'/page_basics/accessQualification/approve?item='+encodeURIComponent(JSON.stringify(obj))
				})
			},
			//查看图片
			lockImg(list){
				if(!list[0]){
					return
				}
				wx.previewImage({
					urls: list, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
            approveClick(){
                let self = this;
                uni.showModal({
                    // title: '确认要退出吗?',
                    content: '确认审核通过吗?',
                    cancelColor:"#999",
                    confirmColor:"#0183FA",
                    success: function (res) {
                        if (res.confirm) {
                            self.appOperation();
                        } else if (res.cancel) {
                        }
                    }
                });
            },
            async appOperation(){
                let self = this;
                let obj = {
                    id:this.itemData.id,
                    recordContent:1,
                };
                const {data} = await appOperation(obj);
                if(data.code == 200){
                    uni.showToast({
                        title: '提交成功',
                        icon:"none",
                        mask:true,
                        duration: 2000
                    });
                    setTimeout(function(){
                        uni.navigateBack();
                    },2000);
                }
            },
            async approvalDetailManage(){
                let obj = {
                    ids:this.itemData.id
                }
                const {data} = await approvalDetailManage(obj)
                if(data.code == 200){
                    this.newData = data.data;
                }
            },
            //去不通过原因页面
            goPageInfo(item){
                uni.navigateTo({
                    url:'/pages_manage/workbench/accessQualification/approve?item='+encodeURIComponent(JSON.stringify(this.itemData))
                })
            },
        }
    }
</script>

<style lang="stylus" scoped>
    #accessQualificationInfo{
        height:100%;
		overflow-y scroll;
		.user-info-box{
			background #fff;
			border-radius:20rpx;
			margin:20rpx 20rpx 0;
			padding:20rpx 0;
			.user-info-box_title{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 30rpx;
				margin-left: 24rpx
				margin-bottom :10px;
				>view{
					display inline-block;
				}
			}
			.user-info-box-min{
				margin:0 26rpx;
				display flex;
				view{
					line-height:66rpx;
					font-size:28rpx;
				}
				view:nth-child(1){
					width:140rpx;
					color:#999;
				}
				view:nth-child(2){
					flex:1;
					text-align right;
					color:#333;
				}
			}
		}
		.user-card-box{
			background #fff;
			border-radius:20rpx;
			margin:0 20rpx 20rpx;
			padding:20rpx 0;
			.user-card-title{
				padding-left:24rpx;
				font-size:30rpx;
				font-weight:700;
				margin-bottom:20rpx;
			}
			.user-card-text{
				line-height:66rpx;
				font-size:28rpx;
				color:#999;
				padding:0 24rpx;
			}
		}
		.img-box{
			background #fff;
			border-radius:20rpx;
			margin:0 20rpx 20rpx;
			padding:20rpx 0;
			.img-title{
				padding-left:24rpx;
				font-size:30rpx;
				font-weight:700;
				margin-bottom:20rpx;
			}
			img{
				display block;
				width:640rpx;
				margin:0 auto 10rpx;
			}
		}
		.word-box{
			background #fff;
			border-radius:20rpx;
			margin:0 20rpx 20rpx;
			padding:20rpx 0;
			.word-box-title{
				padding-left:24rpx;
				font-size:30rpx;
				font-weight:700;
				margin-bottom:20rpx;
			}
			.word-box-min{
				display flex;
				margin:0 20rpx 20rpx;
				img{
					height:60rpx;
					width:60rpx;
				}
				view{
					margin-left:20rpx;
					line-height:60rpx;
				}
			}
		}
		.bottom-button-box{
			display flex;
			width:650rpx;
			margin:40rpx auto;
			view{
				height:100rpx;
				text-align center;
				line-height:100rpx;
				color:#fff;
				width:325rpx;
			}
			view:nth-child(1){
				background: linear-gradient(-45deg, #FA9901, #F28E26);
				border-radius: 50rpx 0 0 50rpx;
			}
			view:nth-child(2){
				background: linear-gradient(-35deg, #309CFF, #0183FA);
				border-radius: 0 50rpx 50rpx 0;
			}
		}
    }
</style>