<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="startTime">
|
{{ userInfo.realname }} <template v-if="userInfo.company && userInfo.company.companyNamePath">{{ userInfo.company.companyNamePath }}</template>
|
</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"
|
default-time="08:00:00"
|
:picker-options="endPickerOptions"
|
/>
|
</el-form-item>
|
|
<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="companyName">
|
<el-input
|
v-model="param.companyName"
|
placeholder="请输入来访的单位全称"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="入园车辆" prop="carNos">
|
<el-input v-model="param.carNos" placeholder="请输入车牌号"></el-input>
|
</el-form-item>
|
<el-form-item label="随车人数" prop="memberNum">
|
<el-input
|
v-model="param.memberNum"
|
oninput="value=value.replace(/^(0+)|[^\d]+/g, '').slice(0, 6)"
|
placeholder="请输入随车人员总数"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="来访事由" prop="reason">
|
<el-select v-model="param.reason" placeholder="请选择">
|
<el-option
|
v-for="item in VisitReason"
|
:key="item.id"
|
:label="item.title"
|
:value="item.title"
|
/>
|
</el-select>
|
</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 { createVisit, getVisitedVisitReason } from '@/api/business/visits'
|
export default {
|
extends: BaseOpera,
|
components: {
|
GlobalWindow,
|
UploadFaceImg
|
},
|
data () {
|
return {
|
isShowModal: false,
|
param: {
|
type: 2,
|
starttime: '',
|
endtime: ''
|
},
|
userInfo: this.$store.state.userInfo,
|
|
VisitReason: [],
|
uploadData: {
|
folder: 'member'
|
},
|
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' }],
|
idcardType: [{ required: true, message: '请选择', trigger: 'change' }],
|
|
memberNum: [{ required: true, message: '请输入', trigger: 'blur' }],
|
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.initData()
|
this.$set(this.param, 'starttime', dayjs().format('YYYY-MM-DD HH:mm:ss'))
|
},
|
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: {
|
initData () {
|
getVisitedVisitReason({}).then(res => {
|
this.VisitReason = res || []
|
})
|
},
|
changeStarttime (e) {
|
this.$set(this.param, 'endtime', this.param.starttime)
|
},
|
uploadAvatarSuccess (file) {
|
this.$set(this.param, 'faceImg', file.imgurl)
|
this.$set(this.param, 'faceImgUrl', file.imgurlfull)
|
},
|
close () {
|
this.isShowModal = false
|
this.$emit('close')
|
},
|
// 同步信息
|
confirm () {
|
this.$refs.paramRef.validate((valid) => {
|
if (!valid) {
|
return
|
}
|
// 调用新建接口
|
this.isWorking = true
|
createVisit({
|
...this.param,
|
receptMemberId: this.userInfo.memberId,
|
receptMemberName: this.userInfo.realname
|
})
|
.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;
|
}
|
</style>
|
