|  |  | 
 |  |  | <template> | 
 |  |  |   <GlobalWindow | 
 |  |  |       title="新增访客报备" | 
 |  |  |       width="600px" | 
 |  |  |       :visible.sync="isShowModal" | 
 |  |  |       :confirm-working="isWorking" | 
 |  |  |       @confirm="confirm" | 
 |  |  |     title="新增访客报备" | 
 |  |  |     width="600px" | 
 |  |  |     :visible.sync="isShowModal" | 
 |  |  |     :confirm-working="isWorking" | 
 |  |  |     @confirm="confirm" | 
 |  |  |     @close="close" | 
 |  |  |   > | 
 |  |  |     <el-form :model="param" ref="paramRef" :rules="rules" > | 
 |  |  |     <el-form :model="param" ref="paramRef" :rules="rules"> | 
 |  |  |       <div class="title_tip">访客预约</div> | 
 |  |  |       <el-form-item label="被访人" prop="startTime"> | 
 |  |  |         {{ userInfo.realname }} {{ userInfo.company.companyNamePath }} | 
 |  |  | 
 |  |  |           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"> | 
 |  |  | 
 |  |  |           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-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-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-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" placeholder="请输入随车人员总数"></el-input> | 
 |  |  |         <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-option | 
 |  |  |             v-for="item in VisitReason" | 
 |  |  |             :key="item.id" | 
 |  |  |             :label="item.title" | 
 |  |  |             :value="item.title" | 
 |  |  |           /> | 
 |  |  |         </el-select> | 
 |  |  |       </el-form-item> | 
 |  |  |     </el-form> | 
 |  |  | 
 |  |  | 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 { | 
 |  |  |   name: 'OperaVisitsHkWindow', | 
 |  |  | 
 |  |  |     return { | 
 |  |  |       isShowModal: false, | 
 |  |  |       param: { | 
 |  |  |         type: 2 | 
 |  |  |         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' }], | 
 |  |  | 
 |  |  |         companyName: [{ required: true, message: '请输入', trigger: 'blur' }], | 
 |  |  |         phone: [{ required: true, message: '请输入', trigger: 'blur' }], | 
 |  |  |         carNos: [{ required: true, message: '请输入', trigger: 'blur' }], | 
 |  |  |         constructionReason: [{ 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 () { | 
 |  |  | 
 |  |  |         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 () { | 
 |  |  | 
 |  |  | } | 
 |  |  | </script> | 
 |  |  | <style lang="scss" scoped> | 
 |  |  | .title_tip{ | 
 |  |  | .title_tip { | 
 |  |  |   font-size: 18px; | 
 |  |  |   font-weight: 600; | 
 |  |  |   margin-bottom: 10px; |