<template>
|
<GlobalWindow
|
title="新增访客预约"
|
width="600px"
|
:visible.sync="isShowModal"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<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" 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">
|
<UploadFaceImg
|
:file="{ 'imgurlfull': param.faceImgUrl, 'imgurl': param.faceImg }"
|
:uploadData="uploadData"
|
@uploadSuccess="uploadAvatarSuccess"
|
@uploadEnd="isUploading = false"
|
@uploadBegin="isUploading = true"
|
/>
|
</el-form-item>
|
|
<div class="title_tip" style="marginTop: 60px;">访客预约</div>
|
<el-form-item label="被访人" prop="receptMemberId">
|
<el-select v-model="param.receptMemberId" 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="请选择">
|
<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="是否施工作业" prop="type">
|
<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 == 1" label="施工内容" prop="constructionReason">
|
<el-input v-model="param.constructionReason" 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>
|
</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 {
|
name: 'OperaVisitsHkWindow',
|
extends: BaseOpera,
|
components: {
|
GlobalWindow,
|
UploadFaceImg
|
},
|
data () {
|
return {
|
isShowModal: false,
|
param: {
|
type: 0,
|
idcardType: 0,
|
starttime: '',
|
endtime: ''
|
},
|
|
VisitReason: [],
|
memberList: [],
|
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' }],
|
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.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: {
|
initData () {
|
getVisitedVisitReason({}).then(res => {
|
this.VisitReason = res || []
|
})
|
getVisitedMember({}).then(res => {
|
this.memberList = res || []
|
})
|
},
|
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
|
}
|
// 调用新建接口
|
this.isWorking = true
|
createFk({
|
...this.param
|
})
|
.then(() => {
|
this.visible = false
|
this.$tip.apiSuccess('提交成功')
|
this.$emit('success')
|
this.$emit('close')
|
})
|
.catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
.finally(() => {
|
this.isWorking = false
|
})
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.title_tip{
|
font-size: 18px;
|
font-weight: 600;
|
margin-bottom: 10px;
|
}
|
</style>
|
