mkw-visit-wx/pages/bd/bddetail.vue

<template>
	<page-meta :page-style="'overflow:'+(showCodes?'hidden':'visible')"></page-meta>
	<view class="containers">
		<view class="db">
			<view class="dblist">
				<view>
					<view class="dbitem">
						<text class="dbtype">{{info.type_text}}</text>
						<view class="dbstatus bm">
							<view>{{info.audit_status_text}}</view>
							<view>
								<view class="label-with-en-inline">
									<view>访问日期：{{info.date}}{{ info.end_date?'至'+info.end_date:'' }}</view>
									<view class="en-text">Visit Date: {{info.date}}{{ info.end_date?' to '+info.end_date:'' }}</view>
								</view>
								<view class="label-with-en-inline">
									<view>访问时间：{{info.time?info.time:''}}</view>
									<view class="en-text">Visit Time: {{info.time?info.time:''}}</view>
								</view>
								<!-- <view class="label-with-en-inline">
									<view>访问时间：{{info.visit_time.start_time}}至{{info.visit_time.end_time}}</view>
									<view class="en-text">Visit Time: {{info.visit_time.start_time}} to {{info.visit_time.end_time}}</view>
								</view> -->
							</view>
							<view v-if="info.type=='2'" class="label-with-en-inline">
								<view>施工时段：{{info.work_start_time}}至{{info.work_end_time}}</view>
								<view class="en-text">Work Time: {{info.work_start_time}} to {{info.work_end_time}}</view>
							</view>
						</view>
						<view class="dbinfo justify-left">
							<view>
								<view class="label-with-en-inline">
									<view>被访人：<text>{{info.accept_admin.name}}</text></view>
									<view class="en-text">Host: <text>{{info.accept_admin.name}}</text></view>
								</view>
								<view class="label-with-en-inline">
									<view>部门：<text>{{info.accept_admin.department.name}}</text></view>
									<view class="en-text">Department: <text>{{info.accept_admin.department.name}}</text></view>
								</view>
								<view class="label-with-en-inline">
									<view>访问区域：<text>{{info.visit_area.name}}</text></view>
									<view class="en-text">Visit Area: <text>{{info.visit_area.name}}</text></view>
								</view>
							</view>
							<view>
								<view class="label-with-en-inline">
									<view>拜访人：<text>{{info.name}}</text></view>
									<view class="en-text">Visitor: <text>{{info.name}}</text></view>
								</view>
								<view class="label-with-en-inline">
									<view>电话：{{info.mobile}}</view>
									<view class="en-text">Phone: {{info.mobile}}</view>
								</view>
								<view v-if="info.type=='1'" class="label-with-en-inline">
									<view>事由：<text>{{info.reason?info.reason:''}}</text></view>
									<view class="en-text">Reason: <text>{{info.reason?info.reason:''}}</text></view>
								</view>
								<view v-else-if="info.type=='3'" class="label-with-en-inline">
									<view>车辆：<text>{{info.plate}}</text></view>
									<view class="en-text">Vehicle: <text>{{info.plate}}</text></view>
								</view>
							</view>
						</view>
						<view  class="company">
							<view class="label-with-en-inline">
								<view>拜访公司：<text>{{info.company_name?info.company_name:''}}</text></view>
								<view class="en-text">Company: <text>{{info.company_name?info.company_name:''}}</text></view>
							</view>
							
						</view>
						<!-- <view class="dblong">
							<view>长期访客申请：<text>{{info.long_time==0?'否':'是'}}</text></view>
							<view v-if="info.long_time==1">长期访问时间：{{info.start_date?info.start_date:''}} 至 {{info.end_date?info.end_date:''}}</view>
						</view> -->

					</view>
				</view>
				<template v-if="info.type!='3'">
					<view class="dbtext label-with-en-inline">
						<view>随访人员</view>
						<view class="en-text">Accompanying Personnel</view>
					</view>
					<view class="dbitem sfyritem">
						<template v-if="info.follw_people && info.follw_people.length>0">
							<view class="dbinfo justify-left" v-for="(people, idx) in info.follw_people" :key="idx">
								<view>
									<view class="label-with-en-inline">
										<view>随访人：<text>{{people.name}}</text></view>
										<view class="en-text">Accompanying Person: <text>{{people.name}}</text></view>
									</view>
									<view class="label-with-en-inline">
										<view>证件类型：<text>{{people.credent==1?'身份证':'护照'}}</text></view>
										<view class="en-text">ID Type: <text>{{people.credent==1?'ID Card':'Passport'}}</text></view>
									</view>
									<view class="label-with-en-inline">
										<view>证件号：<text>{{people.idcard}}</text></view>
										<view class="en-text">ID Number: <text>{{people.idcard}}</text></view>
									</view>
								</view>
								<view class="label-with-en-inline">
									<view>电话：<text>{{people.mobile}}</text></view>
									<view class="en-text">Phone: <text>{{people.mobile}}</text></view>
								</view>
							</view>
						</template>
						<template v-else>
							<view class="dbinfo justify-left label-with-en-inline">
								<view>无</view>
								<view class="en-text">None</view>
							</view>
						</template>
					</view>
				</template>

				<template>
					<view class="dbtext label-with-en-inline">
						<view>到访车辆</view>
						<view class="en-text">Visit Vehicles</view>
					</view>
					<view class="dbitem sfyritem">
						<view class="dbinfo dbcars" v-if="info.cars && info.cars.length>0">
							<view class="onechild label-with-en-inline" v-for="(item, idx) in info.cars" :key="idx">
								<view>车牌：<text>{{item?item:'无'}}</text></view>
								<view class="en-text">License Plate: <text>{{item?item:'None'}}</text></view>
							</view>
						</view>
						<view class="dbinfo dbcars" v-else>
							<view class="onechild label-with-en-inline">
								<view>无</view>
								<view class="en-text">None</view>
							</view>
						</view>
					</view>
				</template>

				<template v-if="info.type=='3'">
					<view class="dbtext label-with-en-inline">
						<view>收货人</view>
						<view class="en-text">Consignee</view>
					</view>
					<view class="dbitem sfyritem">
						<view class="dbinfo justify-left">
							<view class="label-with-en-inline">
								<view>部门：<text>{{info.accept_goods_admin.department.name}}</text></view>
								<view class="en-text">Department: <text>{{info.accept_goods_admin.department.name}}</text></view>
							</view>
							<view class="label-with-en-inline">
								<view>人员：<text>{{info.accept_goods_admin.name}}</text></view>
								<view class="en-text">Personnel: <text>{{info.accept_goods_admin.name}}</text></view>
							</view>
						</view>
					</view>
				</template>
				<view class="dbtext label-with-en-inline">
					<view>被访人员</view>
					<view class="en-text">Visited Personnel</view>
				</view>
				<view class="dbitem sfyritem">
					<view class="dbinfo justify-left">
						<view class="label-with-en-inline">
							<view>部门：<text>{{info.accept_admin.department.name}}</text></view>
							<view class="en-text">Department: <text>{{info.accept_admin.department.name}}</text></view>
						</view>
						<view class="label-with-en-inline">
							<view>人员：<text>{{info.accept_admin.name}}</text></view>
							<view class="en-text">Personnel: <text>{{info.accept_admin.name}}</text></view>
						</view>
					</view>
				</view>
				<!-- <block v-if="info.visit_area.name=='生产区'">
					<view class="dbtext label-with-en-inline">
						<view>陪同人员</view>
						<view class="en-text">Escort Personnel</view>
					</view>
					<view class="dbitem sfyritem">
						<view class="dbinfo justify-left">
							<view class="label-with-en-inline">
								<view>部门：<text>{{info.accompany.department.name}}</text></view>
								<view class="en-text">Department: <text>{{info.accompany.department.name}}</text></view>
							</view>
							<view class="label-with-en-inline">
								<view>人员：<text>{{info.accompany.name}}</text></view>
								<view class="en-text">Personnel: <text>{{info.accompany.name}}</text></view>
							</view>
						</view>
					</view>
				</block> -->
				
				<!-- <template v-if="info.accept_admin_sign">
					<view class="dbtext">签字</view>
					<view class="dbitem sfyritem">
						<view class="dbinfo justify-left">
							<image style="width:100%" :src="info.accept_admin_sign_file.url" mode=""></image>
						</view>
					</view>
					
				</template> -->
				

				<!-- 审核 -->
				<view class="dbtext label-with-en-inline" v-if="info.audit_status==0">
					<view>审核</view>
					<view class="en-text">Review</view>
				</view>
				<view class="checkforms dbitem" style="padding-top:30rpx" v-if="info.audit_status==0&&isCheck">
						<uni-forms ref="formdata" :model="checkForm" :rules="rules" labelWidth="140px" >
							<uni-forms-item required name="status">
								<template slot="label">
									<view class="label-with-en-inline">
										<view>状态</view>
										<view class="en-text">Status</view>
									</view>
								</template>
								<uni-data-checkbox v-model="checkForm.status" :localdata="statusList"/>
							</uni-forms-item>
							<uni-forms-item>
								<template slot="label">
									<view class="label-with-en-inline">
										<view>备注</view>
										<view class="en-text">Remarks</view>
									</view>
								</template>
								<uni-easyinput type="textarea" v-model="checkForm.reason" placeholder="请输入备注 / Please enter remarks" />
							</uni-forms-item>
						
						</uni-forms>
						<button type="primary" style="background-color: #4f607e;" @click="checkSubmit" class="button-with-en">
							<view>审核/Review</view>
						</button>
				</view>
				<view class="checkforms dbitem label-with-en-inline" style="padding-top:30rpx"  v-if="info.audit_status==0&&!isCheck">
					<view>{{checkText}}</view>
					<view class="en-text">{{checkTextEn}}</view>
				</view>

				<!-- 出示二维码按钮 -->
				<view class="justify-between cancelcode" v-if="info.audit_status==1||info.audit_status==3">
					<button :class="info.audit_status==3?'wd100 codebtn':'codebtn'" @click="createdCode"
						type="primary" class="button-with-en">
						<view>出示二维码/Show QR Code</view>
					</button>
				</view>

			</view>

		</view>

		<!-- 二维码弹窗 -->
		<u-popup class="codepop" :show="showCodes" mode="center" closeable="true" @close="closeshowCodes">
			<view class="userBox" style="padding:0 120rpx 0rpx 120rpx;">
				<view class="userInfoContent" style="padding: 40rpx;font-size: 28rpx;">
					<view class="label-with-en-inline">
						<text>核销码：{{info.code}}</text>
						<text class="en-text">Verification Code: {{info.code}}</text>
					</view>
				</view>
				<view class="qrcode">
					<canvas canvas-id='qrcode' style="width: 170px;height:170px;margin: 0 auto;">

					</canvas>
				</view>

			</view>
		</u-popup>

	</view>
</template>

<script>
	import '@/static/css/bd.css'
	import uQRCode from "@/utils/qrcode.js"
	export default {
			data() {
			return {
				id: "",
				info: {},
				showCodes: false,
				checkText:'',
				checkTextEn:'',
				checkLevel:[{
					id:1,
					value:'请等待一级审核完成'
				},{
					id:2,
					value:'请等待二级审核完成'
				},{
					id:3,
					value:'请等待三级审核完成'
				}],
				checkForm: {
					level: "",
					status: "",
					audit_admin_id: "",
					visit_id:"",
					reason:""
				},
				rules: {
					status: {
						rules: [{
							required: true,
							errorMessage: '请选择状态 / Please select status'
						}]
					}
				},
				statusList: [
					{
						value: 1,
						text: "通过/Approve",
						textEn: "Approve"
					},
					{
						value: 2,
						text: "驳回/Reject",
						textEn: "Reject"
					},
				],
				check_admin_name: "",
				userId:'',
				isCheck:false,
			}
		},
		onReady() {
			
		},
		onLoad(options) {
			this.id = options.id
			this.userId = uni.getStorageSync('userInfo_Bd').id
			this.checkForm.visit_id = parseInt(options.id)
			this.loadDetail()
		},
		methods: {
			closeshowCodes() {
				this.showCodes = false
			},
			createdCode(code) {
				var id = "qrcode";
				this.showCodes = true
				uQRCode.make({
					canvasId: id,
					componentInstance: this,
					text: this.info.code,
					size: 170,
					// margin: 10,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {

					}
				})

			},
			checkSubmit() {
				let that = this
				console.log(that.checkForm)
				this.$refs['formdata'].validate().then(res => {
					this.util.request({
						api: '/api/admin/visit_audit/save',
						method: "POST",
						requestType:'bd',
						data: that.checkForm,
						utilSuccess: function(res) {
							uni.showToast({
								title: res.msg,
								duration: 2000,
								icon: 'none'
							})
							// uni.removeStorageSync('formData')
							uni.redirectTo({
								url:'/pages/bd/record?type=mycheck'
							})
						},
						utilFail: function(res) {
							uni.showToast({
								title: res,
								duration: 2000,
								icon: 'none'
							})
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
				
			},
			loadDetail() {
				let that = this
				this.util.request({
					api: '/api/admin/visit/show',
					method: "get",
					requestType: 'bd',
					data: {
						id: that.id
					},
					utilSuccess: function(res) {
						that.info = res
						for (let item of res.audit) {
							if(item.status==0){
								if(that.userId==item.audit_admin_id){
									that.checkForm.level = item.level
									that.checkForm.id = item.id
									that.checkForm.audit_admin_id = item.audit_admin_id
									that.isCheck = true
									return
								}else{
									that.checkText = "请等待"+item.audit_admin.name+"审核"
									that.checkTextEn = "Please wait for "+item.audit_admin.name+" review"
									// that.checkLevel.map(item1=>{
									// 	if(item.level==item1.id){
									// 		that.checkText = item1.value
									// 	}
									// })
									that.isCheck = false
									return
								}
							}else{
								
								that.isCheck = false
							}
							
						}
					},
					utilFail: function(res) {
						uni.showToast({
							title: res,
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},
			isnull(p) {
				if (p == '' || p == undefined || p == null || p == 'undefined' || p == 'null') {
					return ""
				} else {
					return p
				}
			}
		}


	}
</script>

<style scoped>
	.containers {
		background-color: #eceefe;
		min-height: 100vh;
		padding-top: 20rpx;
	}

	.dbtext {
		padding-top: 10rpx;
		margin-bottom: 30rpx;
		color: #303639;
		font-size: 40rpx;
		padding-left: 30rpx
	}
	.dbcars>view{
		width:100%;
		padding-left:0
	}
	.sfyritem {
		padding-bottom: 10rpx
	}

	.dbinfo>view text {
		color: #8f9596;
	}
	.company{
		padding-bottom:30rpx;
		margin-top:-10rpx;
	}
	.company text{
		color: #8f9596;
	}

	.label-with-en-inline {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		    margin-right: 15rpx;
	}

	.en-text {
		font-size: 20rpx;
		color: #8f9596;
		margin-top: 4rpx;
		opacity: 0.8;
	}

	.dbtext.label-with-en-inline {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding-left: 30rpx;
	}

	.button-with-en {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.button-with-en .en-text {
		font-size: 18rpx;
		margin-top: 4rpx;
	}

	/deep/ .uni-forms-item__label {
		width: 140px;
		min-width: 140px;
	}

	/deep/ .u-popup__content {
		background: #fff;
	}

	.cancelcode {
		margin: 60rpx 0;
		background-color: #eceefe;
	}

	.cancelcode button {
		width: 100%
	}

	.cancelcode button.codebtn {
		background: #4f607e;
		border: none;
		color: #fff
	}

	.cancelcode button.wd100 {
		width: 100%;
	}

	.userInfoContent .label-with-en-inline {
		text-align: center;
	}

	.userInfoContent .label-with-en-inline .en-text {
		font-size: 22rpx;
		margin-top: 8rpx;
	}
</style>