hz-zhhq-app/pages/invite/invite.vue

779 lines
23 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

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="container">
<view class="banner-box">
<image v-if="currentTabIndex == 0" src="/static/imgs/visitor.png" mode=""></image>
<image v-if="currentTabIndex == 1" src="/static/imgs/visitor.png" mode=""></image>
<image v-if="currentTabIndex == 2" src="/static/imgs/visitor.png" mode=""></image>
</view>
<view class="main">
<view class="tab-box">
<view class="tab-item" :class="currentTabIndex == 0 ? 'active' : ''" @click="currentTabIndex = 0">邀请来访</view>
<view class="tab-item" :class="currentTabIndex == 1 ? 'active' : ''" @click="currentTabIndex = 1">审批授权</view>
<view class="tab-item" :class="currentTabIndex == 2 ? 'active' : ''" @click="currentTabIndex = 2">邀约记录</view>
</view>
<!-- 访客预约表单 -->
<view v-if="currentTabIndex == 0">
<view class="form-box" >
<view class="form-item">
<text class="label">到访地点</text>
<view class="ipt-box">
<input type="text" placeholder="请填写到访地点" v-model="deptList[visitPlace]" disabled>
</view>
<!-- <text class="label">到访地点</text>
<view class="ipt-box select" @click="open">
<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
<picker class="picker" :range="deptList" @change="changeDepartment">
<view>{{deptList[departmentIndex]}}</view>
</picker>
</view> -->
</view>
<view class="form-item">
<text class="label">被访人姓名</text>
<view class="ipt-box">
<input type="text" placeholder="请填写被访人姓名" v-model="visitedPersonName">
</view>
</view>
<view class="form-item">
<text class="label">手机号码</text>
<view class="ipt-box">
<input type="text" placeholder="请填写手机号码" v-model="visitedPersonTel">
</view>
</view>
<view class="form-item">
<text class="label">来访时间</text>
<!-- <view class="ipt-box select" @click="open(1)"> -->
<view class="ipt-box select" >
<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
<!-- <input type="text" :value="visitStartTime" placeholder="请选择来访时间"> -->
<datetime-Picker class="picker" :placeholder="'请选择来访时间'"
:maxDate="defaultMaxDate"
:minDate="defaultMinDate"
:minTime="minTime"
:maxTime="maxTime"
:pickerIndex="1"
@getData="chooseDate" :type="'anyTime'">
</datetime-Picker>
</view>
</view>
<view class="form-item">
<text class="label">结束时间</text>
<!-- <view class="ipt-box select" @click="open(2)"> -->
<view class="ipt-box select">
<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
<!-- <input type="text" :value="visitEndTime" placeholder="请选择结束时间"> -->
<datetime-Picker class="picker" :placeholder="'请选择结束时间'"
:maxDate="defaultMaxDate"
:minDate="defaultMinDate"
:minTime="minTime"
:maxTime="maxTime"
:pickerIndex="2"
@getData="chooseDate" :type="'anyTime'">
</datetime-Picker>
</view>
</view>
<view class="form-item">
<text class="label">来访事由</text>
<view class="ipt-box">
<input type="text" placeholder="请填写来访事由" v-model="visitReason">
</view>
</view>
<!-- <view class="sure-btn">确认申请</view> -->
</view>
<view class="form-box">
<!-- 主访客 -->
<view id="visitor">
<view class="visitor">
<view class="form-item">
<text class="label">访客姓名</text>
<view class="ipt-box">
<input class="name" type="text" v-model="zhu_visitorName" placeholder="请填写姓名">
</view>
</view>
<view class="form-item">
<text class="label">手机号</text>
<view class="ipt-box">
<input class="name" type="tel" v-model="zhu_visitorTel" placeholder="请填写访客手机号" />
</view>
</view>
<view class="form-item">
<text class="label">身份证号</text>
<view class="ipt-box">
<input class="name" type="text" v-model="zhu_idcard" placeholder="请填写访客身份证号" />
</view>
</view>
</view>
</view>
</view>
<view class="form-box" v-if="number > 0">
<!-- 随行人员 -->
<view id="visitor" v-for="(item,index) in num" :key="index">
<view class="visitor" v-if='item.flag == 1'>
<view class="form-item">
<text class="label">访客姓名</text>
<view class="ipt-box">
<input class="name" type="text" v-model="item.visitorName" placeholder="请填写姓名">
</view>
</view>
<view class="form-item">
<text class="label">手机号</text>
<view class="ipt-box">
<input class="name" type="tel" v-model="item.visitorTel" placeholder="请填写访客手机号" />
</view>
</view>
<view class="form-item">
<text class="label">身份证号</text>
<view class="ipt-box">
<input class="name" type="text" v-model="item.idcard" placeholder="请填写访客身份证号" />
</view>
</view>
<view class="form-item" v-if="number>0">
<image class="jian" src="../../static/imgs/jian.png" @click="jianBtn(index)" alt=""></image>
</view>
</view>
</view>
</view>
<!-- 添加 -->
<view id="addbtn" class="add clear">
<view class="addbtn">
<view>
<text @click="addBtn()">+ 新增人员</text>
<!-- <text>历史记录</text> -->
</view>
</view>
</view>
<view class="tips" >温馨提醒:<br> 访客来访时间为8:00-18:00特殊情况请联系接待室办理</view>
<view class="occupied"></view>
<view class="footer-btn footer-btn-color" @click="submit()">
<view class="btn">确认邀请</view>
</view>
</view>
<!-- 预约记录列表 -->
<view class="list-box" v-if="currentTabIndex == 1">
<view class="list-item" v-for="(item,index) in list" :key="index"
@click='toDetail("/pages/visitorAppointment/visitorAppointment?id="+item.detail_id+"&role=2&userId="+userId)'>
<view class="title">
<text class="line"></text>
<text class="text">访客预约</text>
<text class="status2" v-if="item.first_status==0">待审核</text>
<text class="status" v-if="item.first_status==1">已同意</text>
<text class="status1" v-if="item.first_status==2">已拒绝</text>
<text class="status1" v-if="item.first_status==3">待本人确认</text>
<text class="status1" v-if="item.first_status==4">已取消</text>
</view>
<view class="content">
<view class="info-item">
<view class="fl-text">被访人:</view>
<view class="fr-text">{{item.visited_person_name}}</view>
</view>
<view class="info-item">
<view class="fl-text">被访时间:</view>
<view class="fr-text">{{item.visit_start_time}}</view>
</view>
<view class="info-item">
<view class="fl-text">申请人:</view>
<view class="fr-text">{{item.visitor_name}}</view>
</view>
<view class="info-item">
<view class="fl-text">申请时间:</view>
<view class="fr-text">{{item.apply_time}}</view>
</view>
<!-- <view class="comment-btn" @click.stop="del(item.detail_id,1,index)">删除</view> -->
</view>
</view>
</view>
<!-- 预约记录列表 -->
<view class="list-box" v-if="currentTabIndex == 2">
<view class="list-item" v-for="(item,index) in list" :key="index"
@click='toDetail("/pages/visitorAppointment/visitorAppointment?id="+item.detail_id+"&userId="+userId)'>
<view class="title">
<text class="line"></text>
<text class="text">邀约记录</text>
<text class="status2" v-if="item.first_status==0">待审核</text>
<text class="status" v-if="item.first_status==1">已同意</text>
<text class="status1" v-if="item.first_status==2">已拒绝</text>
<text class="status1" v-if="item.first_status==3">待本人确认</text>
<text class="status1" v-if="item.first_status==4">已取消</text>
</view>
<view class="content">
<view class="info-item">
<view class="fl-text">被访人:</view>
<view class="fr-text">{{item.visited_person_name}}</view>
</view>
<view class="info-item">
<view class="fl-text">被访时间:</view>
<view class="fr-text">{{item.visit_start_time}}</view>
</view>
<view class="info-item">
<view class="fl-text">主访人:</view>
<view class="fr-text">{{item.visitor_name}}</view>
</view>
<view class="info-item">
<view class="fl-text">申请时间:</view>
<view class="fr-text">{{item.apply_time}}</view>
</view>
<!-- <view class="comment-btn" @click.stop="del(item.detail_id,2,index)">删除</view> -->
</view>
</view>
</view>
<content-none v-if="currentTabIndex != 0 && list.length == 0 " :padTop="20"></content-none>
</view>
<uni-calendar
ref="calendar"
:insert="false"
@confirm="confirm"
>
</uni-calendar>
<uni-calendar
ref="calendar2"
:insert="false"
@confirm="confirm2"
>
</uni-calendar>
<load-more v-show="currentTabIndex == 1 || currentTabIndex == 2"
:loadingType="loadingType" :contentText="contentText"></load-more>
</view>
</template>
<script>
import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
import {invite,getMyVisitorList,greenVisitorInfo} from '@/common/api.js';
import {callbackRequest,alertTip,getStorage} from '@/common/util.js';
import loadMore from '@/components/loadMore.vue';
import datetimePicker from '@/components/dateTime.vue';
import contentNone from '@/components/contentNone.vue';
let currentTime = new Date().getTime();
let millisecond = 24 * 7 * 60 * 60 * 1000;
export default {
data() {
return {
userId:getStorage('userInfo').userId,
currentTabIndex:0,
page:1,
page2:1,
pageSize:5,
deptList: ['本部大楼', '银座'],
departmentIndex: 0, //选择的地点下标
num:[{}],
button_text:"提交预约",
number:0,
role:2,//管理员
list:[],
list2:[],
visitPlace:"0",
visitedPersonName:getStorage('userInfo').username,
visitedPersonTel:getStorage('userInfo').telnumber,
visitStartTime:"",
visitEndTime:"",
visitReason:"",
zhu_visitorName:"",
zhu_visitorTel:"",
zhu_idcard:"",
loadingType:0,//0-loading前1-loading中2-没有更多了
contentText: {
contentdown: "上拉加载更多",
contentrefresh: "正在加载...",
contentnomore: "没有更多数据了"
},
defaultMinDate: currentTime,// 最小时间
minTime: '08:00',
defaultMaxDate: new Date(currentTime+millisecond).getTime(),// 最大时间
maxTime: '18:00',
}
},
components: {
uniCalendar,
loadMore,
datetimePicker,
contentNone
},
watch:{
currentTabIndex:function(newVal,oldVal){
this.currentTabIndex = newVal;
if(this.currentTabIndex){
this.page = 1;
this.loadingType = 0;
this.getMyList();
}
}
},
onLoad(options) {
// 审批授权 与 邀约记录 共用一个页面
// 根据 页面传值 type 区分,显示默认页面
if (options.type == 1) {
this.currentTabIndex = 1
} else if (options.type == 2) {
this.currentTabIndex = 0;
}
},
methods: {
getMyList(newVal){
let params = {
"method": getMyVisitorList,
"data": {userId:this.userId,type:'03',flag:this.currentTabIndex,pageSize:this.pageSize,page:this.page}
};
callbackRequest(params)
.then(res =>{
if(res.data.returnCode == 1){
let result = res.data.returnData;
if(this.page == 1){
this.list = result;
}else {
if(result.length > 0){
this.list = [...this.list,...result];
this.loadingType = 0;
}else {
this.loadingType = 2;
}
}
}
})
},
chooseDate(e){
if(e.pickerIndex == 1){
this.visitStartTime = e.time;
}else {
this.visitEndTime = e.time;
}
},
changeDepartment(e) {
// console.log(e)
this.departmentIndex = e.detail.value;
},
toDetail(url){
uni.navigateTo({
url
})
},
confirm(e) {
this.visitStartTime = e.fulldate;
},
confirm2(e) {
this.visitEndTime = e.fulldate;
},
open(type){
if(type == 1){
this.$refs.calendar.open();
}else{
this.$refs.calendar2.open();
}
},
addBtn(){
var o = {
zvisitorName:"",
visitorTel:"",
idcard:"",
flag:1
}
this.num.push(o);
this.number++;
},
jianBtn(index){
this.num[index].flag = 0;
this.number--;
},
submit(){
var data = {userId:this.userId};
data.id = ""; data.visitedPersonId = "";
//被访人信息
data.stayArea = this.visitPlace;
data.visitedPersonName = this.visitedPersonName; data.visitedPersonTel = this.visitedPersonTel;
data.visitStartTime = this.visitStartTime; data.visitEndTime = this.visitEndTime;
data.visitReason = this.visitReason;
//主访客信息
data.visitorName = this.zhu_visitorName;
data.visitorTel = this.zhu_visitorTel;
data.idcard = this.zhu_idcard;
data._status = "3";/*0待审批 1已同意 2已拒绝 3待本人确认*/
data.creator = this.userId; data.modifier = this.userId;/*修改人*/
// data.gmtCreated = "";/*创建时间*/
// data.gmtModified = "";/*修改时间*/
data.isDeleted = "N"; data.mxVirtualId = "";
//验证数据
if ((data.stayArea) == undefined || (data.stayArea+"").replace(/\s*/g,"") == ""
|| (data.visitedPersonName) == undefined || (data.visitedPersonName+"").replace(/\s*/g,"") == ""
|| (data.visitedPersonTel) == undefined || (data.visitedPersonTel+"").replace(/\s*/g,"") == "") {
alertTip("访问人员地址、姓名、电话不能为空");
return;
};
if ((data.visitStartTime) == undefined || (data.visitStartTime+"").replace(/\s*/g,"") == ""
|| (data.visitEndTime) == undefined || (data.visitEndTime+"").replace(/\s*/g,"") == ""
|| (data.visitReason) == undefined || (data.visitReason+"").replace(/\s*/g,"") == "") {
alertTip("访问人员时间、理由不能为空!");
return;
};
var curDate = new Date();
var start = new Date(Date.parse(data.visitStartTime.replace(/-/g,"/")));
var end = new Date(Date.parse(data.visitEndTime.replace(/-/g,"/")));
if(start < curDate){
alertTip("开始时间需大于现在时间");
return;
}
if(end < start){
alertTip("结束时间需大于开始时间");
return;
}
if( start<start.setHours(8, 0, 0, 0) || end>end.setHours(18, 0, 0, 0)){
alertTip("开始时间需在8点后结束时间需在18点前");
return;
}
if((start.setHours(0, 0, 0, 0) != end.setHours(0, 0, 0, 0))){
alertTip("结束时间和开始时间必须为同一天");
return;
}
if ((data.visitorName) == undefined || (data.visitorName+"").replace(/\s*/g,"") == ""
|| (data.visitorTel) == undefined || (data.visitorTel+"").replace(/\s*/g,"") == "") {
alertTip("访问人员姓名、手机号不能为空!");
return;
};
//验证数据格式
var reg = new RegExp("^[0-9]*$");
var regex = /^1[3456789]\d{9}$/;
// var regex = new RegExp("^((13[0-9])|(14[5,7,9])|(15[^4])|(18[0-9])|(17[0,1,3,5,6,7,8]))[0-9]{8}$");
if (reg.test(data.visitorTel) === false
|| regex.test(data.visitorTel) === false) {
alertTip("访客手机号格式不正确");
return;
}
if (reg.test(data.visitedPersonTel) === false
|| regex.test(data.visitedPersonTel) === false) {
alertTip("被访人手机号格式不正确");
return;
}
if(data.visitedPersonName == data.visitorName && data.visitedPersonTel == data.visitedPersonTel){
alertTip("被访人和访问人不可以为同一人!");
return;
}
var id=/^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|31)|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/;
if (data.idcard && id.test(data.idcard) === false) {
alertTip("访客身份证格式不正确");
return;
}
data.greenRetinueInfoList = new Array();
if(this.num.length > 1){
var j = 0;
for(var i = 1; i < this.num.length;i++){
if(this.num[i].flag == 1){
var visitors = {};
visitors.retinueName = this.num[i].visitorName;
visitors.visitorTel = this.num[i].visitorTel;
visitors.idcard = this.num[i].idcard;
if ((visitors.retinueName) == undefined || (visitors.retinueName).replace(/\s*/g,"") == ""
|| (visitors.visitorTel) == undefined || (visitors.visitorTel).replace(/\s*/g,"") == "") {
alertTip("随从人员姓名、电话、身份证不能为空");
return;
};
//验证数据格式
if (reg.test(visitors.visitorTel) === false
|| regex.test(visitors.visitorTel) === false) {
alertTip("随从人手机号格式不正确");
return;
};
if (visitors.idcard && id.test(visitors.idcard) === false) {
alertTip("随从人员身份证格式不正确");
return;
}
data.greenRetinueInfoList[j++] = visitors;
}
}
}
let params = {
"method": invite,
"data": data
};
console.log(data);
callbackRequest(params)
.then(res =>{
// console.log(res);
// console.log(res.data.returnMsg);
alertTip(res.data.returnMsg);
if("预约成功" == res.data.returnMsg){
//刷新列表
this.page = 1;
this.list = [];
this.visitStartTime = '';this.visitEndTime = '';
this.visitReason = '';
//主访客信息
this.zhu_visitorName = '';
this.zhu_visitorTel = '';
this.zhu_idcard = '';
this.num = [{}];
setTimeout(_ => {
this.currentTabIndex = 2;
}, 2000)
}
})
},
del(id,val,index){
console.log(id,val);
let params = {
"method": greenVisitorInfo,// 申请的删除
"data": {userId:this.userId,applyId:id,applyType:"3"}//分三种情况
};
callbackRequest(params)
.then(res =>{
// console.log(res);
//刷新页面
console.log(this.list2);
if(res.data.returnMsg == "删除成功!"){
if(val == 1){
this.list.splice(index,1);
console.log(this.list);
}else{
this.list2.splice(index,1);
console.log(this.list2);
}
alertTip(res.data.returnMsg);
}else{
alertTip(res.data.returnMsg);
}
})
}
},
onReachBottom() {
if (this.loadingType !== 0 || this.currentTabIndex == 0) {
return;
}
this.loadingType = 1;
this.page = this.page + 1;
this.getMyList();
},
}
</script>
<style lang="scss">
@import '@/static/css/common.scss';
page{
// background: #f8f8f8;
}
.container{
position:relative;
overflow:hidden;
background: #f8f8f8;
min-height:100vh;
.banner-box{
width:100%;
height:240upx;
position:absolute;
top:0;
left:0;
image{
width:100%;
height:100%;
}
}
.main{
margin:172upx 40upx 0;
position:relative;
z-index:10;
.tab-box{
overflow:hidden;
border-radius:10upx 10upx 0 0;
background: rgba(132,149,167,0.8);
height:70upx;
.tab-item{
float:left;
height:70upx;
width:33.33%;
font-size:30upx;
color:#e5f6ff;
text-align:center;
line-height:70upx;
}
.active{
background: #fff;
color:#333;
border-radius:10upx 10upx 0 0;
font-weight:bold;
}
}
.form-box{
padding:20upx 30upx 0upx;
margin-bottom: 20upx;
background: #fff;
.form-item{
overflow:hidden;
border-bottom:1px solid #eee;
padding:30upx 0;
.label{
float:left;
width:150upx;
font-size:28upx;
color:#333;
font-weight:bold;
line-height:50upx;
}
.ipt-box{
margin-left:160upx;
input{
width:100%;
height:50upx;
line-height:50upx;
font-size:26upx;
color:#666;
}
.pic{
width:60upx;
height:60upx;
line-height: 80upx;
}
}
.select{
.arrow{
float:right;
width:16upx;
height:29upx;
margin-top:10upx;
}
input{
width:70%;
}
}
.jian{
width: 50upx;
height:50upx;
margin-left: 280upx;
}
.select {
.arrow {
float: right;
width: 16upx;
height: 29upx;
margin-top: 10upx;
}
.picker {
height: 50upx;
line-height: 50upx;
font-size: 26upx;
color: #666;
}
}
}
.sure-btn{
width:100%;
height:80upx;
font-size:28upx;
color:#fff;
text-align:center;
line-height:80upx;
border-radius:8upx;
background: #0066CC;
background:linear-gradient(to right, #ffc200,#ff9000);/*设置按钮为渐变颜色*/
margin-top:50upx;
}
}
.list-box{
.list-item{
background: #fff;
margin-bottom:10upx;
.title{
border-bottom:1px solid #eee;
padding:20upx 10upx;
overflow:hidden;
line-height:40upx;
.line{
display:inline-block;
width:10upx;
height:32upx;
background: $assistColor;
margin-top:4upx;
}
.text{
display:inline-block;
font-size:28upx;
color:#444;
font-weight:bold;
margin-left:10upx;
vertical-align:top;
}
.status{
font-size:26upx;
color:$assistColor;
float:right;
}
.status1{
font-size:26upx;
color:#5063c3;
float:right;
}
.status2{
font-size:26upx;
color:red;
float:right;
}
}
.content{
padding:10upx 20upx;
// padding:10upx 10upx 60upx 10upx;
.info-item{
overflow: hidden;
padding-bottom:10upx;
.fl-text{
float:left;
font-size:26upx;
color:#444;
font-weight:bold;
line-height:40upx;
}
.fr-text{
float:right;
font-size:26upx;
color:#666;
line-height:40upx;
}
}
}
}
.comment-btn {
float: right;
font-size: 24upx;
border-radius: 10upx;
color: #fff;
line-height: 50upx;
text-align: center;
min-width: 140upx;
background-color: #00c277;
}
}
}
}
#addbtn{
height: 120upx;
background-color: #FFFFFF;
padding: 30upx;
border-radius: 30upx;
color: #333333;
border-bottom: .033333rem solid #eee;
align-items: center;
position: relative;
margin-top: 20upx;
}
.addbtn view text:nth-child(1){
font-size: 32upx;
margin-left: 220upx;
color: #00c277;
}
.addbtn view text:nth-child(2){
font-size: 32upx;
margin-left: 180upx;
color: #00c277;
}
.tips{
font-size: 22upx;
// margin-left: 80upx;
margin-top: 20upx;
}
</style>