401 lines
10 KiB
Vue
401 lines
10 KiB
Vue
<template>
|
||
<view class="bodyContainer">
|
||
<uni-nav-bar @clickLeft="goBack()" class="nav-bar" height="110rpx" leftWidth="200rpx" leftText="来访项目"
|
||
leftIcon="left" border backgroundColor="#2cade8" color="#fff" fixed statusBar shadow></uni-nav-bar>
|
||
<view class="wrap-view wrap-top">
|
||
<view class="item title"> <text class="blueLine"></text>项目信息：</view>
|
||
<view class="item">
|
||
<view class="title">来访事由</view>
|
||
<view class="content">
|
||
<text>{{purposeOptions[formData.purpose]}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="title">来访状态</view>
|
||
<view class="content">
|
||
<text>{{stateOptions[formData.state]}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="title">来访概述</view>
|
||
<view class="content">
|
||
<text>{{formData.name}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="title">来访详述</view>
|
||
<view class="content">
|
||
<text>{{formData.description}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="title">来访时间</view>
|
||
<view class="content">
|
||
<text>{{formData.visit_time}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="title">离开时间</view>
|
||
<view class="content">
|
||
<text>{{formData.leave_time}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="title">接待人</view>
|
||
<view class="content">
|
||
<text v-if="formData.receptionist">{{formData.receptionist_.name}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="title">来访单位</view>
|
||
<view class="content">
|
||
<text>{{formData.company}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="title">来访级别</view>
|
||
<view class="content">
|
||
<text>{{levelOptions[formData.level]}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="title">来访人数</view>
|
||
<view class="content">
|
||
<text>{{formData.count_people}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="wrap-view wrap-top">
|
||
<view class="item title"> <text class="blueLine"></text>人员列表：</view>
|
||
<view class="visitorsWrap">
|
||
<view class="visitorsItem itemTitle">
|
||
<text class="visitorCell">姓名</text>
|
||
<text class="visitorCell">主访</text>
|
||
<text class="visitorCell">操作</text>
|
||
</view>
|
||
<view class="visitorsItem" v-for="item in visitorsList" :key="item.id">
|
||
<text class="visitorCell" style="color:blue" @click="viewPeople(item)">{{item.visitor_.name}}</text>
|
||
<text class="visitorCell">
|
||
<span v-if="item.is_main">是</span>
|
||
</text>
|
||
<view class="visitorCell">
|
||
<view v-if="formData.state == 40">
|
||
<text class="bindBtn" @click="bindBtl(item,10)" v-if="item.visitor_.blt_===null">绑卡</text>
|
||
<text class="bindBtn" @click="bindBtl(item,20)" v-else>解绑</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view id="visitorWrap" v-if="visitorDetailLimited">
|
||
<view class="visitorContainer">
|
||
<view class="visitorInfo">
|
||
<view class="infoTitle">姓名：</view><view>{{visitorItem.visitor_.name}}</view>
|
||
</view>
|
||
<view class="visitorInfo">
|
||
<view class="infoTitle">手机：</view><view>{{visitorItem.visitor_.phone}}</view>
|
||
</view>
|
||
<view class="visitorInfo">
|
||
<view class="infoTitle">头像：</view>
|
||
<image :src="visitorItem.photo" @click="preView(visitorItem.photo)"></image>
|
||
</view>
|
||
<view class="visitorInfo">
|
||
<view class="infoTitle">返乡时间：</view><view>{{visitorItem.return_date}}</view>
|
||
</view>
|
||
<view class="visitorInfo">
|
||
<view class="infoTitle">来源地：</view><view>{{visitorItem.come_place}}</view>
|
||
</view>
|
||
<view class="visitorInfo">
|
||
<view class="infoTitle">行程轨迹：</view><view>{{visitorItem.trip_desc}}</view>
|
||
</view>
|
||
<view class="visitorInfo">
|
||
<view class="infoTitle">管控措施：</view><view>{{visitorItem.measure}}</view>
|
||
</view>
|
||
<view class="visitorInfo">
|
||
<view class="infoTitle">检测日期：</view><view>{{visitorItem.test_date}}</view>
|
||
</view>
|
||
<view class="visitorInfo">
|
||
<view class="infoTitle">是否已报备：</view><view>{{visitorItem.is_reported?'已报备':'未报备'}}</view>
|
||
</view>
|
||
<view class="visitorInfo">
|
||
<view class="infoTitle">是否主访客：</view><view>{{visitorItem.is_main?'是':'否'}}</view>
|
||
</view>
|
||
<view class="visitorInfo">
|
||
<view class="infoTitle">健康码：</view>
|
||
<view v-if="visitorItem.health_code==''">未上传</view>
|
||
<image v-else :src="visitorItem.health_code" @click="preView(visitorItem.health_code)"></image>
|
||
</view>
|
||
<view class="visitorInfo">
|
||
<view class="infoTitle">行程码：</view>
|
||
<view v-if="visitorItem.travel_code==''">未上传</view>
|
||
<image v-else :src="visitorItem.travel_code" @click="preView(visitorItem.travel_code)"></image>
|
||
</view>
|
||
<view class="visitorInfo">
|
||
<view class="infoTitle">核酸报告：</view>
|
||
<view v-if="visitorItem.test_report==''">未上传</view>
|
||
<image v-else :src="visitorItem.test_report" @click="preView(visitorItem.test_report)"></image>
|
||
</view>
|
||
</view>
|
||
<icon class="closeDetailIcon" type="cancel" size="36" color="#fefefe" @click="closeVisitorDetail"/>
|
||
</view>
|
||
<img-view ref="imgPreView" :imgSrc="preImgSrc" @cancelPreView="cancelPreView"></img-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import imgView from "@/components/image-view/image-view.vue";
|
||
export default {
|
||
name: "visit",
|
||
components: {
|
||
imgView
|
||
},
|
||
data() {
|
||
return {
|
||
formData:{},
|
||
visitorsList:[],
|
||
purposeOptions: {
|
||
10: "参观",
|
||
20: "拜访",
|
||
30: "面试",
|
||
40: "开会",
|
||
50: "拉送货"
|
||
},
|
||
stateOptions: {
|
||
10: "创建中",
|
||
20: "审批中",
|
||
30: "待入厂",
|
||
40: "进行中",
|
||
50: "已完成",
|
||
60: "已关闭",
|
||
},
|
||
levelOptions: {
|
||
10: "一般",
|
||
20: "重要",
|
||
},
|
||
preImgSrc:null,
|
||
visitorItem:null,
|
||
visitorDetailLimited:false,
|
||
}
|
||
},
|
||
onLoad(params) {
|
||
if (params.visit) {
|
||
this.visitId = params.visit;
|
||
}
|
||
},
|
||
onShow() {
|
||
this.getVisitItem();
|
||
this.getVpeopleList();
|
||
},
|
||
methods: {
|
||
//获取已有游客
|
||
getVpeopleList() {
|
||
let that = this;
|
||
that.$u.api.vmVpeople({
|
||
page: 0,
|
||
visit: that.visitId
|
||
}).then(res => {
|
||
that.visitorsList =res;
|
||
})
|
||
},
|
||
getVisitItem() {
|
||
this.$u.api.visitItem(this.visitId).then(res => {
|
||
this.formData = res;
|
||
})
|
||
},
|
||
bindBtl(row,type){
|
||
let that = this;
|
||
uni.scanCode({
|
||
success: function (res) {
|
||
console.log('条码类型：' + res.scanType);
|
||
console.log('条码内容：' + res.result);
|
||
let form = {};
|
||
form.type = type;
|
||
form.code = res.result;
|
||
form.employee = row.visitor_.employee;
|
||
that.$u.api.thirdBltBind(form).then(res=>{
|
||
debugger;
|
||
uni.showToast({
|
||
title: res,
|
||
icon: "none"
|
||
})
|
||
})
|
||
}
|
||
});
|
||
},
|
||
goBack() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
},
|
||
viewPeople(item) {
|
||
this.visitorItem = item;
|
||
this.visitorItem.photo = item.visitor_.photo!==''?this.vuex_host + item.visitor_.photo:'';
|
||
this.visitorItem.health_code = item.health_code!==''?(this.vuex_host + item.health_code):'';
|
||
this.visitorItem.travel_code = item.travel_code!==''?this.vuex_host + item.travel_code:'';
|
||
this.visitorItem.test_report = item.test_report!==''?this.vuex_host + item.test_report:'';
|
||
this.visitorDetailLimited = true;
|
||
},
|
||
closeVisitorDetail(){
|
||
this.visitorDetailLimited = false;
|
||
this.visitorItem = null;
|
||
},
|
||
preView(srcImg){
|
||
let imgs = [];
|
||
imgs.push(srcImg)
|
||
uni.previewImage({
|
||
urls: imgs,
|
||
current: 0,
|
||
});
|
||
},
|
||
cancelPreView(){
|
||
this.preImgSrc = '';
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
uni-page-body {
|
||
color: #303133;
|
||
font-size: 15px;
|
||
height: 100%;
|
||
background: #f3fbff;
|
||
}
|
||
.bodyContainer {
|
||
background-color: #f3fbff;
|
||
}
|
||
>>>.uni-navbar__header,
|
||
>>>.uni-status-bar {
|
||
background-image: linear-gradient(254deg,
|
||
#0ca7ee 0%,
|
||
#005aff 100%,
|
||
#2a8cff 100%,
|
||
#54bdff 100%),
|
||
linear-gradient(#e60012,
|
||
#e60012);
|
||
}
|
||
>>>uni-image{
|
||
height: 200upx;
|
||
width: 200upx;
|
||
}
|
||
.my-data {
|
||
background-color: #f3fbff;
|
||
padding-bottom: 227rpx;
|
||
}
|
||
|
||
.nav-bar>>>.uni-navbar-btn-text text {
|
||
font-size: 32rpx !important;
|
||
}
|
||
|
||
.wrap-view {
|
||
width: 720rpx;
|
||
margin: 0 auto;
|
||
background-color: #ffffff;
|
||
border-radius: 10rpx;
|
||
line-height: 94rpx;
|
||
font-family: PingFang-SC-Medium;
|
||
font-size: 30rpx;
|
||
padding-bottom: 30upx;
|
||
}
|
||
.wrap-top{
|
||
line-height: 60upx;
|
||
margin-top: 20upx;
|
||
}
|
||
.item {
|
||
margin: 0rpx 32rpx;
|
||
display: flex;
|
||
margin-top: 10rpx;
|
||
}
|
||
.item.title{
|
||
height: 100upx;
|
||
line-height: 100upx;
|
||
border-bottom: 1upx solid #dddddd;
|
||
}
|
||
.item_bottom_border{
|
||
border-bottom: 1rpx solid #eeeeee;
|
||
}
|
||
|
||
.title {
|
||
color: #212121;
|
||
flex: 1;
|
||
}
|
||
|
||
.content {
|
||
flex: 3;
|
||
color: #666666;
|
||
|
||
}
|
||
.visitorsWrap{
|
||
|
||
}
|
||
|
||
.visitorsItem{
|
||
display: flex;
|
||
font-size: 28upx;
|
||
}
|
||
|
||
.itemTitle{
|
||
height: 80upx;
|
||
font-size: 32upx;
|
||
line-height: 80upx;
|
||
}
|
||
.itemTitle>.visitorCell{
|
||
color: #212121;
|
||
}
|
||
.visitorCell{
|
||
flex: 1;
|
||
color: #666666;
|
||
text-align: center;
|
||
}
|
||
.blueLine{
|
||
height: 24upx;
|
||
width: 10upx;
|
||
background: #2a8cff;
|
||
margin-top: 39upx;
|
||
margin-right: 12upx;
|
||
}
|
||
.bindBtn{
|
||
width: 80upx;
|
||
height: 50upx;
|
||
line-height: 50upx;
|
||
background: #2a8cff;
|
||
display: inline-block;
|
||
border-radius: 16upx;
|
||
color: #ffffff;
|
||
font-size: 25upx;
|
||
}
|
||
#visitorWrap{
|
||
height: 100%;
|
||
width: 100%;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
background: rgba(0,0,0,.6);
|
||
}
|
||
.visitorContainer{
|
||
position: relative;
|
||
width: 90%;
|
||
left: 5%;
|
||
background: #ffffff;
|
||
padding: 40upx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
max-height: 80%;
|
||
overflow-y: scroll;
|
||
border-radius: 20upx;
|
||
}
|
||
.visitorInfo{
|
||
display: flex;
|
||
margin: 20upx 0;
|
||
}
|
||
.infoTitle{
|
||
width: 170upx;
|
||
}
|
||
.closeDetailIcon{
|
||
position: absolute;
|
||
bottom: 5%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
</style>
|