<template>
|
<GlobalWindow
|
title="新增访客预约"
|
width="600px"
|
:visible.sync="isShowModal"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
@close="close"
|
>
|
<el-form :model="param" ref="paramRef" :rules="rules">
|
<div class="title_tip">访客信息</div>
|
<el-form-item label="访客姓名" prop="name">
|
<el-input
|
v-model="param.name"
|
placeholder="请输入访客的姓名"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="访客手机号" prop="phone">
|
<el-input
|
v-model="param.phone"
|
maxlength="11"
|
placeholder="请输入访客的手机号"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="证件类型" prop="idcardType">
|
<el-select v-model="param.idcardType" placeholder="请选择">
|
<el-option label="身份证" :value="0" />
|
<el-option label="港澳证件" :value="1" />
|
<el-option label="护照" :value="2" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="证件号码" prop="idcardNo">
|
<el-input
|
maxlength="18"
|
v-model="param.idcardNo"
|
placeholder="请输入访客的证件号码"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="来访单位" prop="companyName">
|
<el-input
|
v-model="param.companyName"
|
placeholder="请输入来访的单位全称"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="人脸照片" prop="faceImgUrl">
|
<div class="upload_wrap">
|
<UploadFaceImg
|
:file="{ imgurlfull: param.faceImgUrl, imgurl: param.faceImg }"
|
:uploadData="uploadData"
|
@uploadSuccess="uploadAvatarSuccess"
|
@uploadEnd="isUploading = false"
|
@uploadBegin="isUploading = true"
|
/>
|
<div class="content">
|
<div>1、请选择浅色或中性背景，使用均匀光线拍照。</div>
|
<div>2、请保持面部正对镜头，勿遮挡面部，保持中立表情。</div>
|
<div>3、请避免后期修图，确保人脸轮廓清晰、完整，尽可能减少非脸部内容占比。</div>
|
</div>
|
</div>
|
</el-form-item>
|
|
<div class="title_tip" style="margintop: 60px">访客预约</div>
|
<el-form-item label="被访人" prop="receptMemberId">
|
<el-select v-model="param.receptMemberId" disabled placeholder="请选择">
|
<el-option
|
v-for="item in memberList"
|
:key="item.id"
|
:label="item.name + ' ' + item.companyName"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="入园时间" prop="starttime">
|
<el-date-picker
|
v-model="param.starttime"
|
format="yyyy-MM-dd HH:mm"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
type="datetime"
|
default-time="08:00:00"
|
:picker-options="startPickerOptions"
|
@change="changeStarttime"
|
/>
|
</el-form-item>
|
<el-form-item label="离园时间" prop="endtime">
|
<el-date-picker
|
v-model="param.endtime"
|
format="yyyy-MM-dd HH:mm"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
type="datetime"
|
:picker-options="endPickerOptions"
|
default-time="08:00:00"
|
/>
|
</el-form-item>
|
<el-form-item label="来访事由" prop="reason">
|
<el-select v-model="param.reason" placeholder="请选择" @change="changeReason" value-key="id">
|
<el-option
|
v-for="item in VisitReason"
|
:key="item.id"
|
:label="item.title"
|
:value="item.title"
|
/>
|
</el-select>
|
</el-form-item>
|
<!-- <el-form-item label="是否施工作业">
|
<el-switch
|
style="width: 200px"
|
v-model="param.type"
|
:active-value="1"
|
:inactive-value="0"
|
>
|
</el-switch>
|
</el-form-item>-->
|
<el-form-item v-if="param.type == 2" label="施工内容">
|
<el-input
|
v-model="param.constructionReason"
|
placeholder="请输入施工内容"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="随行车辆">
|
<el-input v-model.trim="param.carNos" onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')" placeholder="请输入车牌号"></el-input>
|
</el-form-item>
|
</el-form>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import UploadFaceImg from '@/components/common/UploadFaceImg'
|
import dayjs from 'dayjs'
|
import { createFk, getVisitedVisitReason, getVisitedMember } from '@/api/business/visits'
|
export default {
|
extends: BaseOpera,
|
components: {
|
GlobalWindow,
|
UploadFaceImg
|
},
|
|
data () {
|
return {
|
isShowModal: false,
|
param: {
|
type: 0,
|
idcardType: 0,
|
starttime: '',
|
endtime: ''
|
},
|
VisitReason: [],
|
memberList: [],
|
uploadData: {
|
folder: 'member',
|
isFace: 0
|
},
|
startPickerOptions: {
|
disabledDate (time) {
|
return time.getTime() < Date.now() - 8.64e7 // 禁用超过当前时间的日期
|
},
|
selectableRange: '00:00:00 - 23:59:59' // 这个加上之后，时分秒上面才有禁止选择变灰，如果不加，也可以禁止选择，但是不会变灰
|
},
|
endPickerOptions: {
|
disabledDate: (time) => {
|
if (this.param.starttime) {
|
return new Date(this.param.starttime).getTime() > time.getTime() + 8.64e7 // 禁用超过当前时间的日期
|
}
|
},
|
selectableRange: '00:00:00 - 23:59:59'
|
},
|
rules: {
|
starttime: [{ required: true, message: '请选择日期', trigger: 'change' }],
|
endtime: [{ required: true, message: '请选择日期', trigger: 'change' }],
|
reason: [{ required: true, message: '请选择', trigger: 'change' }],
|
// type: [{ required: true, message: '请选择', trigger: 'change' }],
|
receptMemberId: [{ required: true, message: '请选择', trigger: 'change' }],
|
idcardType: [{ required: true, message: '请选择', trigger: 'change' }],
|
faceImgUrl: [{ required: true, message: '请上传', trigger: 'change' }],
|
|
name: [{ required: true, message: '请输入', trigger: 'blur' }],
|
// idcardNo: [{ required: true, message: '请输入', trigger: 'blur' }],
|
companyName: [{ required: true, message: '请输入', trigger: 'blur' }],
|
phone: [{ required: true, message: '请输入', trigger: 'blur' }],
|
carNos: [{ required: true, message: '请输入', trigger: 'blur' }],
|
constructionReason: [{ required: true, message: '请输入', trigger: 'blur' }]
|
}
|
}
|
},
|
created () {
|
this.$set(this.param, 'receptMemberId', this.$store.state.userInfo.memberId)
|
this.$set(this.param, 'starttime', dayjs().format('YYYY-MM-DD HH:mm:ss'))
|
this.initData()
|
},
|
watch: {
|
'param.starttime': {
|
handler (newValue, oldValue) {
|
if (newValue) {
|
const date = new Date()
|
// const min = date.getMinutes()
|
// date.setMinutes(min) // 这里加1分钟，是为了解决值改变后，系统秒数就过期限制了，无法点击“此刻”按钮， 如果监听 “系统时间”的改变，则会影响性能。
|
const nowDate = dayjs(date).format('HH:mm:ss')
|
let st = ''
|
if (dayjs(date).format('yyyy-MM-DD') === dayjs(newValue).format('yyyy-MM-DD')) {
|
const hh1 = dayjs(newValue).format('HH:mm:ss')
|
// if (hh1 < nowDate) {
|
// this.param.starttime = new Date()
|
// }
|
st = nowDate
|
} else {
|
st = '00:00:00'
|
}
|
this.$set(this.startPickerOptions, 'selectableRange', st + ' - 23:59:59')
|
// this.startPickerOptions = this.startPickerOptions
|
}
|
},
|
deep: true,
|
immediate: true
|
},
|
'param.endtime': {
|
handler (newValue, oldValue) {
|
if (newValue) {
|
const nowDate = dayjs(this.param.starttime).format('HH:mm:ss')
|
let st = ''
|
if (dayjs(this.param.starttime).format('yyyy-MM-DD') === dayjs(newValue).format('yyyy-MM-DD')) {
|
st = nowDate
|
} else {
|
st = '00:00:00'
|
}
|
this.$set(this.endPickerOptions, 'selectableRange', st + ' - 23:59:59')
|
// this.startPickerOptions = this.startPickerOptions
|
}
|
},
|
deep: true,
|
immediate: true
|
}
|
},
|
methods: {
|
changeReason (val) {
|
console.log(val)
|
var obj = this.VisitReason.find(function (i) {
|
return i.title === val
|
})
|
// 在change中获取到整条对象数据
|
if(obj){
|
this.param.type = obj.constructionType
|
}
|
console.log(obj)
|
},
|
close () {
|
this.isShowModal = false
|
this.$emit('close')
|
},
|
initData () {
|
getVisitedVisitReason({}).then(res => {
|
this.VisitReason = res || []
|
})
|
getVisitedMember({}).then(res => {
|
this.memberList = res || []
|
console.log('memberList', this.memberList)
|
})
|
},
|
uploadAvatarSuccess (file) {
|
this.$set(this.param, 'faceImg', file.imgurl)
|
this.$set(this.param, 'faceImgUrl', file.imgurlfull)
|
},
|
changeStarttime (e) {
|
// this.$set(this.param, 'endtime', this.param.starttime)
|
},
|
// 同步信息
|
confirm () {
|
this.$refs.paramRef.validate((valid) => {
|
if (!valid) {
|
return
|
}
|
const { param } = this
|
if (param.carNos) {
|
param.carNos = param.carNos.replace(/\s*/g, '')
|
param.carNos = param.carNos.replace(/[\r\n]/g, '')
|
}
|
if (param.starttime.slice(0, 10) !== param.endtime.slice(0, 10)) return this.$tip.error('入园时间和离园时间不可跨天')
|
// 调用新建接口
|
this.isWorking = true
|
createFk({
|
...this.param
|
})
|
.then(() => {
|
this.visible = false
|
this.$tip.apiSuccess('提交成功')
|
this.$emit('success')
|
this.$emit('close')
|
})
|
.catch(e => {
|
})
|
.finally(() => {
|
this.isWorking = false
|
})
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.title_tip {
|
font-size: 18px;
|
font-weight: 600;
|
margin-bottom: 10px;
|
}
|
.upload_wrap{
|
display: flex;
|
align-items: center;
|
.avatar-uploader{
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
::v-deep .avatar{
|
max-width: 90px;
|
max-height: 90px;
|
}
|
.content{
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
font-size: 12px;
|
color: #999999;
|
margin-left: 12px;
|
line-height: 24px;
|
}
|
}
|
</style>
|
