<!-- 会议室预定 -->
<template>
<div class="boardroomReserve">
<!-- 搜索框 start-->
<div class="search_box">
<group class="items">
<popup-picker style="width: 14.9rem" value-text-align="left" placeholder="点击选择会议室" :data="DepartList" :columns="2"
v-model="value3" ref="picker3" show-name @on-change='changePicker'></popup-picker>
<div class="search_circle" @click="goSearchPage" >
<img src="../../../assets/img/search_icon_blue.png" alt=""/>
<div class="search_txt">高级</div>
</div>
</group>
</div>
<!-- 搜索框 end-->
<scroller class="date-content">
<!-- 日历 start-->
<div class="mycalendar">
<inline-calendar
ref="calendar"
@on-change="onChange"
@on-view-change="onViewChange"
class="inline-calendar-demo"
:end-date="this.endDate"
:show.sync="show"
v-model="value"
:range="range"
:show-last-month="showLastMonth"
:show-next-month="showNextMonth"
:highlight-weekend="highlightWeekend"
:return-six-rows="return6Rows"
:hide-header="hideHeader"
:hide-week-list="hideWeekList"
:replace-text-list="replaceTextList"
:weeks-list="weeksList"
:render-function="buildSlotFn"
:disable-past="disablePast"
:disable-future="disableFuture"
:disable-weekend="disableWeekend">
</inline-calendar>
</div>
<!-- 日历 end-->
<!-- 显示可选时间 start 暂时先不要-->
<!-- <div class="show-time-space">
<group class="items">
<cell
is-link
:border-intent="false"
:arrow-direction="showTimeSpace ? 'up' : 'down'"
@click.native="showTimeSpace = !showTimeSpace" class="selectTime-wrap">
<img src="../../../assets/img/clock-green.png" alt=""/>
<span>可选时间</span>
</cell>
<flexbox :gutter="0" wrap="wrap" class="slide time-space" :class="showTimeSpace?'animate':''">
<flexbox-item :span="1/2" v-for="tSpace of timeSpaceList" :key="tSpace.index">
<div class="flex-demo txt_time">{{tSpace.startTime}}-{{tSpace.endTime}}</div>
</flexbox-item>
</flexbox>
</group>
</div> -->
<!-- 显示可选时间 end-->
<!-- 已预定列表 start-->
<div class="chosenTime">
<group class="items">
<cell class="booklist-wrap">
<img src="../../../assets/img/time.png" alt=""/>
<span>已预订列表</span>
</cell>
</group>
<div class="choosetimeList">
<group class="items choosetime">
<cell v-for="(event, index) in demoEvents" :key = "index"
primary="content" :title="event.startTime+'-'+event.endTime"
align-items="flex-start" >
<img class="blue-dot" src="../../../assets/img/blue-dot.png" alt=""/>
<div class="phone-wrap">
<span class="name">{{event.userId}}</span>
<span class="phone">
<img class="icon-phone" src="../../../assets/img/phone-blue.png" alt=""/><span>{{event.userPhone}}</span>
</span>
</div>
<div class="meeting-title">{{event.title}}</div>
</cell>
</group>
</div>
</div>
</scroller>
<!-- 已预定列表 end-->
<div class="bottom">
<x-button plain @click.native="goRoom" type="default" style="border-radius:99px;">预订</x-button>
</div>
<div class="foot">
<alert v-model="show" @on-show="onShow" @on-hide="onHide">
<div class="img_box">{{bookTip}}</div>
<!-- 每次预定不超过连续72小时 -->
<p class="text_message">
<a href="javascript:;" class="confirmCenter" @click="onHide">确认</a>
</p>
</alert>
</div>
</div>
</template>
<script>
// import Calendar from './base/CCalendar.vue'
import axios from 'axios'
// import $ from "jquery"
import moment from 'moment' // 格式化时间
import { Flexbox, FlexboxItem,Cell,CellBox,Group,Datetime, PopupPicker,Picker,XInput,XButton, InlineCalendar,Radio,Alert } from 'vux'
let selectTime = '' // 选中的时间变量
let selectRoom = '' // 选中的会议室
let selectArea = '' // 选中的地区
export default {
// components: {
// calendar: Calendar
// },
data () {
return {
show: true,
value: '',
listValue: '',
range: false,
showLastMonth: true,
showNextMonth: true,
highlightWeekend: false,
return6Rows: true,
hideHeader: false,
hideWeekList: false,
replaceTextList: {},
replace: false,
changeWeeksList: false,
weeksList: [],
useCustomFn: false,
buildSlotFn: () => '',
disablePast: true,
disableFuture: false,
disableWeekend: false,
showTimeSpace:false,
value3: [],
endDate:'',
startTime: '',
endTime: '',
demoEvents: [],// 预定列表
selectArea: '',// 选中的地区
selectRoom: '',// 选中的会议室
DepartList: [],// 地区列表
MeetingRoomList: [],// 会议室列表
show:false,
bookTip:''//预定失败提示信息
}
},
components: {
Flexbox,
FlexboxItem,
Cell,
CellBox,
Group,
Datetime,
PopupPicker,
Picker,
XInput,
XButton,
InlineCalendar,
Radio,
Alert
},
beforeMount (to,from, next){
window.com.setTitle('预订会议室')
},
computed: {
sporsorTitle: {
get () {
return this.$store.state.form.sporsorTitle
},
set (val) {
this.$store.dispatch('FORM_SporsorTitle',val)
}
},
sporsorType: {
get () {
return this.$store.state.form.sporsorType
},
set (val) {
this.$store.dispatch('FORM_SporsorType',val)
}
},
conferRoomId: {
get () {
return this.$store.state.form.conferRoomId
},
set (val) {
this.$store.dispatch('FORM_ConferRoomId',val)
}
},
flagUpSporsor: {
get () {
return this.$store.state.form.flagUpSporsor
},
set (val) {
this.$store.dispatch('FORM_FlagUpSporsor',val)
}
},
sporsorId: {
get () {
return this.$store.state.form.sporsorId
},
set (val) {
this.$store.dispatch('FORM_SporsorId',val)
}
}
},
watch: {
replace (val) {
this.replaceTextList = val ? {
'TODAY': '今'
} : {}
},
useCustomFn (val) {
this.buildSlotFn = val ? (line, index, data) => {
return /8/.test(data.date) ? '<div style="font-size:12px;text-align:center;"><span style="display:inline-block;width:5px;height:5px;background-color:red;border-radius:50%;"></span></div>' : '<div style="height:19px;"></div>'
} : () => ''
},
changeWeeksList (val) {
this.weeksList = val ? ['日', '一', '二', '三', '四', '五', '六 '] : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
}
},
methods: {
onHide () {
this.show=false;
},
onShow () {
this.show=true;
},
//会议地点改变
changePicker() {
var urlPath = ''
if(this.value != '') {
urlPath = config.serverUrl + '/microinformation/zy/mi/obtainConferenceroomOrderList?conferenceroomId='+this.value3[1]+'&orderDate='+this.value
} else {
let date = new Date
let nowDate = moment(date).format('YYYY-MM-DD')
urlPath = config.serverUrl + '/microinformation/zy/mi/obtainConferenceroomOrderList?conferenceroomId='+this.value3[1]+'&orderDate='+nowDate
}
// console.log('urlPath:'+urlPath)
axios.get(urlPath).then((data) => {
var temp = data.data
if(temp.code === '0') {
var opArry = []
for(var i in temp.data) {
temp.data[i].userPhone=temp.data[i].userPhone==''?'无':temp.data[i].userPhone
temp.data[i].title=temp.data[i].title==null?'无':temp.data[i].title
opArry.push({
userId:temp.data[i].userId,
title:temp.data[i].title,
startTime:moment(temp.data[i].startTime).format('HH:mm'),
endTime:moment(temp.data[i].endTime).format('HH:mm'),
userPhone:temp.data[i].userPhone
});
}
this.demoEvents = opArry
} else {
this.bookTip = '获取列表失败'
this.show = true;
// app.toast("获取列表失败!")
}
});
},
onViewChange (val, count) {
// alert('on view change:'+val + ',' + count)
},
onChange (val) {
selectTime = val
if(this.value3[1] != undefined) {
// console.log('url:' + config.serverUrl + '/microinformation/zy/mi/obtainConferenceroomOrderList?conferenceroomId='+this.value3[1]+'&orderDate='+selectTime)
axios.get(config.serverUrl + '/microinformation/zy/mi/obtainConferenceroomOrderList?conferenceroomId='+this.value3[1]+'&orderDate='+selectTime).then((data) => {
var temp = data.data
if(temp.code === '0') {
var opArry = []
for(var i in temp.data) {
temp.data[i].userPhone=temp.data[i].userPhone==''?'无':temp.data[i].userPhone
temp.data[i].title=temp.data[i].title==null?'无':temp.data[i].title
opArry.push({
userId:temp.data[i].userId,
title:temp.data[i].title,
startTime:moment(temp.data[i].startTime).format('HH:mm'),
endTime:moment(temp.data[i].endTime).format('HH:mm'),
userPhone:temp.data[i].userPhone
});
}
this.demoEvents = opArry
} else {
this.bookTip = '获取列表失败'
this.show = true;
// app.toast("获取列表失败!")
}
});
}
},
chooseDepartment (paramkey) { // 根据地区编号获取会议室列表
selectArea = paramkey
axios.get(config.serverUrl + '/microinformation/zy/mi/obtainConferenceroomListByAreaId?areaId='+paramkey).then((data) => {
var temp = data.data
if(temp.code === '0') {
this.MeetingRoomList = temp.data
} else {
this.bookTip = '获取会议室列表失败'
this.show = true;
// app.toast('获取会议室列表!')
}
});
},
chooseBookingRoom (eventroomId) { //根据会议室编号和选定日期获取预定列表
selectRoom = eventroomId
if(selectTime === '') {// 选定了会议室,没选定日期
let date = new Date
let nowDate = moment(date).format('YYYY-MM-DD')
axios.get(config.serverUrl + '/microinformation/zy/mi/obtainConferenceroomOrderList?conferenceroomId='+eventroomId+'&orderDate='+nowDate).then((data) => {
var temp = data.data
if(temp.code === '0') {
var opArry = []
for(var i in temp.data) {
// var ss = ''
// if(temp.data[i].stateShow == '1') {
// ss = '进行中'
// } else if(temp.data[i].stateShow == '2') {
// ss = '正常'
// }
temp.data[i].userPhone=temp.data[i].userPhone==''?'无':temp.data[i].userPhone
temp.data[i].title=temp.data[i].title==null?'无':temp.data[i].title
opArry.push({userName:temp.data[i].userName,
userPhone:temp.data[i].userPhone,
// stateShow:ss,// 状态
title:temp.data[i].title,
startTime:moment(temp.data[i].startTime).format('HH:mm'),
endTime:moment(temp.data[i].endTime).format('HH:mm')
});
}
this.demoEvents = opArry
} else {
this.bookTip = '获取会议室列表失败'
this.show = true;
// app.toast('获取会议室失败!')
}
});
} else {// 选定了会议室,选定日期
// alert("value: " + obj.value + ',selectTime:' + selectTime)
}
},
//跳转到会议室预定
goRoom () {
var choice_time = ''
if(this.value != '') {
var dateObj = new Date()
choice_time = this.value + ' ' + dateObj.getHours()
} else {
let date = new Date
let nowDate = moment(date).format('YYYY-MM-DD HH')
choice_time = nowDate
}
var timeString = moment(window.com.convertDateFromStrings(choice_time + ':00:00')).format('YYYY-MM-DD HH:mm')
if(this.value3.length != 0) {
this.$router.push({path:'bookingRoom',query:{roomId:this.value3[1],conferenceRoomId:this.$route.query.conferenceRoomId,timeStart:timeString,timeEnd:timeString}})
} else {
this.bookTip = '请点击选择会议室'
this.show = true;
// app.toast('请选择会议室!')
}
},
//跳到高级搜索
goSearchPage: function() {
this.$router.push({path:'conferenceRoomSearch'})
}
},
mounted () {
let dq=new Date();
let dqtime=dq.getFullYear()+'-'+(dq.getMonth()+2)+'-'+dq.getDate();
this.endDate=dqtime;
if(window.localStorage.getItem('userId') != null && window.localStorage.getItem('userId') != undefined) {
// 获取地区和会议室名称数据
// console.log('url:'+config.serverUrl + '/microinformation/zy/mi/obtainAreaAndConferenceroomList')
axios.get(config.serverUrl + '/microinformation/zy/mi/obtainAreaAndConferenceroomList').then((data) => {
var temp = data.data
if(temp.code === '0') {
this.DepartList = temp.data
} else {
this.bookTip = '获取地区列表失败'
this.show = true;
// app.toast('获取地区列表失败!')
}
});
} else {
window.location.href = "http://dwz.cn/1IooUbPb"
}
}
}
</script>
<style lang="less" src="./booking.less"></style> 这块代码我需要优化一个功能点,即如9:00-18:00之间会议室有空闲时间的就在日期底部显示一个小绿点
最新发布