zcdsj
/
factory_mp
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 修改booking页面

This commit is contained in:
caoqianming 2025-10-17 11:07:22 +08:00
parent 56ad08d378
commit 3753e7fb65
5 changed files with 392 additions and 477 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
pages.json
View File

@ -27,7 +27,7 @@
}
},
{
"path" : "pages/ofm/booking",
"path" : "pages/ofm/booking_form",
"style" :
{
"navigationBarTitleText" : "会议室预约"
@ -39,10 +39,11 @@
"navigationBarTitleText" : "会议室"
}
},{
"path" : "pages/ofm/bookingRecord",
"path" : "pages/ofm/booking",
"style" :
{
"navigationBarTitleText" : "预约记录"
"navigationBarTitleText" : "预约记录",
"enablePullDownRefresh": false
}
}
],

4
pages/index/index.vue
View File

@ -62,13 +62,13 @@
imageSrc:"",
currentDate: tool.getTodayDate(),
moduleList: [{
navigate:'/pages/ofm/booking',
navigate:'/pages/ofm/booking_form?mode=add',
url: '/static/yuding.png',
text: '会议预定',
type: "primary",
},
{
navigate:'/pages/ofm/bookingRecord',
navigate:'/pages/ofm/booking',
url: '/static/meetingRecord.png',
text: '预定记录',
type: "success"

442
pages/ofm/booking.vue
View File

@ -1,74 +1,14 @@
<template>
<view class="container">
<view class="topView">
<!-- 日期和会议室 -->
<view class="titleView">
<view class="viewLabel">会议名称：</view>
<view v-if="type=='show'">{{form.title}}</view>
<input v-else v-model="form.title" class="inputStyle"/>
</view>
<view class="roomView">
<view class="viewLabel">会议室：</view>
<view v-if="type=='show'">{{form.mroom_name}}</view>
<picker v-else @change="bindPickerChange" :range-key="'name'" :value="index" :range="mroomList" class="pickerDom">
<view class="uni-input">{{mroomList[index].name}}</view>
</picker>
</view>
<view class="titleView">
<view class="viewLabel">参加人数：</view>
<view v-if="type=='show'">{{form.participant_count}}</view>
<input v-else v-model="form.participant_count" class="inputStyle"/>
</view>
<view class="titleView">
<view class="viewLabel">参会领导：</view>
<view v-if="type=='show'">{{form.key_participants}}</view>
<input v-else v-model="form.key_participants" class="inputStyle"/>
</view>
<view class="dateView">
<view class="viewLabel">预约时间：</view>
<view v-if="type=='show'">{{form.mdate}}</view>
<uni-datetime-picker v-else style="width: 540upx;" type="date" :clear-icon="false" v-model="form.mdate" @change="mdateChange"/>
</view>
<view class="titleView">
<view class="viewLabel">备注：</view>
<view v-if="type=='show'">{{form.note}}</view>
<input v-else v-model="form.note" class="inputStyle"/>
</view>
</view>
<view class="timeView">
<view style="height: 70upx;line-height: 70upx;">
<text>凌晨：</text>
<view class="iconsWrap" @click="showAmChange">
<uni-icons v-if="showAm" type="up" size="20" color="#ffffff"></uni-icons>
<uni-icons v-else type="down" size="20" color="#ffffff"></uni-icons>
</view>
</view>
<view :class="{'amBlockHide':!showAm,'amBlock': showAm}">
<view v-for="(item,index) in timesListAm" :key="item.value" class="timeBlock ">
<view :class="{'isSelected':item.isSelect,'isSloted':item.sloted,'timeItem': true}" @click="timeItemClickAm(index)">{{item.label}}</view>
</view>
</view>
<view v-for="(item,index) in timesListPm" :key="item.value" class="timeBlock">
<view :class="{'isSelected':item.isSelect,'isSloted':item.sloted,'timeItem': true}" @click="timeItemClickPm(index)">{{item.label}}</view>
</view>
</view>
<view class="footerView">
<text>已选时间段：</text>
<view class="">
<text v-for="item in selectList" :key="item.value">{{item.label}}、</text>
</view>
<view>共{{totalCount}}小时</view>
<view style="position: relative;text-align: right;">
<button
class="mini-btn buttonSure" type="primary" size="mini"
v-for="item in transitions"
:key="item.id"
:type="item.attribute_type === 2 ? 'danger' : 'primary'"
@click="submit(item.id)"
>{{ item.name }}</button>
<button @click="uni.navigateBack(-1)" size="mini" class="mini-btn">取消</button>
</view>
</view>
<uni-list v-for="item in dataList" class="uniListItem" @click="itemClick(item)">
<!-- #169316 -->
<uni-icons v-if="item.state==2" custom-prefix="iconfont" color="#ea7878" type="icon-yijieshu4" size="35" class="stateIcon yiwancheng"></uni-icons>
<uni-icons v-if="item.state==1" custom-prefix="iconfont" color="#659fed" type="icon-jinhangzhong" size="35" class="stateIcon"></uni-icons>
<uni-icons v-if="item.state==0" custom-prefix="iconfont" color="#7ed47e" type="icon-weikaishi2" size="35" class="stateIcon"></uni-icons>
<uni-list-item :title="item.title" :note="'预约时间：'+item.mdate" :rightText="item.mroom_name" >
<text>预约时间段;</text>
</uni-list-item>
</uni-list>
</view>
</template>
@ -76,249 +16,29 @@
export default {
data(){
return{
index:0,
totalCount:0,
pickDate:'',
mroomId:'',
type:'',
ticketId:null,
showAm:false,
bookingTitle:'',
form:{
id:'',
note:'',
title:'',
mroom:'',
mdate:'',
slots:[],
create_by_phone:'',
key_participants:'',
participant_count:'',
belong_dept:uni.getStorageSync('userInfo').belong_dept
},
selectList:[],
mroomList: [],
transitions:[],
//凌晨0-6点
timesListAm:[
{value:0,label:'00:00-00:30',isSelect:false,sloted:false},
{value:1,label:'00:30-01:00',isSelect:false,sloted:false},
{value:2,label:'01:00-01:30',isSelect:false,sloted:false},
{value:3,label:'01:30-02:00',isSelect:false,sloted:false},
{value:4,label:'02:00-02:30',isSelect:false,sloted:false},
{value:5,label:'02:30-03:00',isSelect:false,sloted:false},
{value:6,label:'03:00-03:30',isSelect:false,sloted:false},
{value:7,label:'03:30-04:00',isSelect:false,sloted:false},
{value:8,label:'04:00-04:30',isSelect:false,sloted:false},
{value:9,label:'04:30-05:00',isSelect:false,sloted:false},
{value:10,label:'05:00-05:30',isSelect:false,sloted:false},
{value:11,label:'05:30-06:00',isSelect:false,sloted:false}
],
timesListPm:[
{value:12,label:'06:00-06:30',isSelect:false,sloted:false},
{value:13,label:'06:30-07:00',isSelect:false,sloted:false},
{value:14,label:'07:00-07:30',isSelect:false,sloted:false},
{value:15,label:'07:30-08:00',isSelect:false,sloted:false},
{value:16,label:'08:00-08:30',isSelect:false,sloted:false},
{value:17,label:'08:30-09:00',isSelect:false,sloted:false},
{value:18,label:'09:00-09:30',isSelect:false,sloted:false},
{value:19,label:'09:30-10:00',isSelect:false,sloted:false},
{value:20,label:'10:00-10:30',isSelect:false,sloted:false},
{value:21,label:'10:30-11:00',isSelect:false,sloted:false},
{value:22,label:'11:00-11:30',isSelect:false,sloted:false},
{value:23,label:'11:30-12:00',isSelect:false,sloted:false},
{value:24,label:'12:00-12:30',isSelect:false,sloted:false},
{value:25,label:'12:30-13:00',isSelect:false,sloted:false},
{value:26,label:'13:00-13:30',isSelect:false,sloted:false},
{value:27,label:'13:30-14:00',isSelect:false,sloted:false},
{value:28,label:'14:00-14:30',isSelect:false,sloted:false},
{value:29,label:'14:30-15:00',isSelect:false,sloted:false},
{value:30,label:'15:00-15:30',isSelect:false,sloted:false},
{value:31,label:'15:30-16:00',isSelect:false,sloted:false},
{value:32,label:'16:00-16:30',isSelect:false,sloted:false},
{value:33,label:'16:30-17:00',isSelect:false,sloted:false},
{value:34,label:'17:00-17:30',isSelect:false,sloted:false},
{value:35,label:'17:30-18:00',isSelect:false,sloted:false},
{value:36,label:'18:00-18:30',isSelect:false,sloted:false},
{value:37,label:'18:30-19:00',isSelect:false,sloted:false},
{value:38,label:'19:00-19:30',isSelect:false,sloted:false},
{value:39,label:'19:30-20:00',isSelect:false,sloted:false},
{value:40,label:'20:00-20:30',isSelect:false,sloted:false},
{value:41,label:'20:30-21:00',isSelect:false,sloted:false},
{value:42,label:'21:00-21:30',isSelect:false,sloted:false},
{value:43,label:'21:30-22:00',isSelect:false,sloted:false},
{value:44,label:'22:00-22:30',isSelect:false,sloted:false},
{value:45,label:'22:30-23:00',isSelect:false,sloted:false},
{value:46,label:'23:00-23:30',isSelect:false,sloted:false},
{value:47,label:'23:30-24:00',isSelect:false,sloted:false}
]
page:1,
page_size:10,
dataList:[],
}
},
onLoad(options) {
let that = this;
that.form.id='';
that.selectList = [];
that.mroomId = options.mroomId;
that.getmRooms();
if(options.item){
let bookingItem = JSON.parse(options.item);
that.form = Object.assign({},bookingItem);
that.ticketId = that.form.ticket;
that.getTransitions();
}else{
that.getTransitions();
}
if(options.slots){
that.form.slots = [];
let slots = options.slots.split(',');
if(slots.length>0){
slots.forEach(item=>{
let slot = Number(item);
that.form.slots.push(slot);
if(slot<12){
that.timesListAm[slot].isSelect = true;
that.selectList.push(that.timesListAm[slot])
}else{
that.timesListPm[slot].isSelect = true;
that.selectList.push(that.timesListPm[slot])
}
})
that.totalCount = slots.length*0.5;
}
}
mounted() {
this.getlistData();
},
onPullDownRefresh() {
this.page = 1;
this.getlistData()
},
methods:{
getTransitions(){
let that = this;
if(that.ticketId!==null){
that.$api.getTransition(that.ticketId).then(res=>{
that.transitions = res;
})
}else{
that.$api.workflowInitkey('booking').then(res=>{
that.transitions = res.transitions;
that.workflow = res.workflow;
})
}
},
getmRooms(){
let that = this;
that.$api.getMroom({ page: 0}).then(res=>{
that.mroomList = res;
if(that.mroomId!==''&&res.length>0){
that.form.mroom = res[0].id;
res.forEach((item,index)=>{
if(item.id==that.mroomId){
that.index = index ;
}
})
}else{
that.index = null;
}
}).catch(e=>{})
},
showAmChange(){
this.showAm = !this.showAm;
},
timeItemClickAm(index){
if(this.timesListPm[index].sloted){
}else{
this.timesListAm[index].isSelect = !this.timesListAm[index].isSelect;
this.clickItems();
}
},
timeItemClickPm(index){
if(this.timesListPm[index].sloted){
}else{
this.timesListPm[index].isSelect = !this.timesListPm[index].isSelect;
this.clickItems();
}
},
clickItems(){
let that = this;
that.selectList = [];
let lists = [],slots=[];
that.timesListAm.forEach(item=>{
if(item.isSelect){
lists.push(item)
slots.push(item.value);
}
})
that.timesListPm.forEach(item2=>{
if(item2.isSelect){
lists.push(item2)
slots.push(item2.value);
}
})
setTimeout(()=>{
that.totalCount = slots.length*0.5;
that.selectList = lists;
that.form.slots = slots;
},500)
},
//选择会议室和日期后查询有无预定
bindPickerChange(e) {
this.form.mroom = e.detail.value;
this.index = e.detail.value;
if(this.form.mdate!==''&&this.form.mdate!==null){
this.getmRoomSlot();
}
},
mdateChange(){
if(this.form.mroom!==''&&this.form.mroom!==null){
this.getmRoomSlot();
}
},
getmRoomSlot(){
let that = this;
let form = {};
form.page = 0;
form.mroom = that.form.mroom;
form.mdate = that.form.mdate;
that.timesListAm.forEach(slot=>{
slot.sloted = false;
})
that.timesListPm.forEach(slot=>{
slot.sloted = false;
})
that.$api.bookingSlot(form).then(res=>{
res.forEach(item=>{
if(item.slot<12){
that.timesListAm[item.slot].sloted = true;
}else{
that.timesListPm[item.slot].sloted = true;
}
})
itemClick(item){
uni.setStorageSync("currentBooking", item)
uni.navigateTo({
url:'/pages/ofm/booking_form?mode=show',
})
},
//选择会议室和日期后查询有无预定
submit(id){
getlistData(){
let that = this;
if(that.form.id == "") {
that.$api.bookingCreate(that.form).then(res=>{
that.form.id = res.id;
that.ticketSubmit(id,that.form.id)
})
}else{
that.$api.bookingUpdate(that.form.id, that.form).then(res=>{
that.ticketSubmit(id,that.form.id)
})
}
},
ticketSubmit(id,t_id){
let that = this;
let params = {};
params.title = that.mroomList[that.index].name+'预约';
params.workflow = that.workflow ;
params.transition = id;
params.ticket_data = {t_id:t_id};
that.$api.ticketCreate(params).then(res=>{
uni.navigateBack({
delta: 1
});
that.$api.bookingList({page:that.page,page_size:that.page_size}).then(res=>{
that.dataList = res.results;
})
},
},
@ -331,100 +51,30 @@
padding: 0!important;
background-color: #ffffff;
}
.topView{
width: 100%;
}
.roomView,.dateView,.titleView{
height: 35px;
.chat-custom-right {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
padding: 10upx;
line-height: 35px;
margin-bottom: 10upx;
box-sizing: border-box;
background-color: #ffffff;
/* #endif */
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
}
.inputStyle{
height: 35px;
width: 560upx;
padding: 0 10px;
line-height: 35px;
border-radius: 10upx;
display: inline-block;
box-sizing: border-box;
border: 1px solid #e5e5e5;
}
.viewLabel{
width: 160upx;
font-size: 30upx;
text-align: right;
display: inline-block;
}
.iconsWrap{
width: 40upx;
height: 40upx;
display: inline-block;
line-height: 40upx;
border-radius: 25upx;
text-align: center;
background-color: #74ddfc;
border: 1px solid #74ddfc;
}
.pickerDom{
height: 35px;
width: 560upx;
line-height: 35px;
padding-left: 20upx;
border-radius: 8upx;
box-sizing: border-box;
border: 1px solid #e5e5e5;
}
.timeView{
width: 100%;
padding: 10upx;
box-sizing: border-box;
}
.amBlock{
display: block;
}
.amBlockHide{
display: none;
}
.timeBlock{
width: 25%;
padding: 6upx;
height: 70upx;
margin: 10upx 0;
font-size: 28upx;
line-height: 70upx;
display: inline-block;
box-sizing: border-box;
}
.timeItem{
color: #666666;
text-align: center;
border-radius: 10upx;
background-color: #b9f0cb;
border: 1upx solid #eeeeee;
}
.timeItem.isSelected{
background-color: #00a870;
color: #fff;
}
.timeItem.isSloted{
background-color: #fac275!important;
color: #fff;
}
.footerView{
box-sizing: border-box;
width: 100%;
padding:10px;
background-color: #ffffff;
.chat-custom-text {
font-size: 12px;
color: #666666;
color: #999;
}
.buttonSure{
margin-top: 10upx;
margin-right: 10upx;
.uniListItem{
position: relative;
}
.stateIcon{
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
.yiwancheng{
color: #ff0000;
}
</style>

76
pages/ofm/bookingRecord.vue
View File

@ -1,76 +0,0 @@
<template>
<view class="container">
<uni-list v-for="item in dataList" class="uniListItem" @click="itemClick(item)">
<!-- #169316 -->
<uni-icons v-if="item.state==2" custom-prefix="iconfont" color="#ea7878" type="icon-yijieshu4" size="35" class="stateIcon yiwancheng"></uni-icons>
<uni-icons v-if="item.state==1" custom-prefix="iconfont" color="#659fed" type="icon-jinhangzhong" size="35" class="stateIcon"></uni-icons>
<uni-icons v-if="item.state==0" custom-prefix="iconfont" color="#7ed47e" type="icon-weikaishi2" size="35" class="stateIcon"></uni-icons>
<uni-list-item :title="item.title" :note="'预约时间：'+item.mdate" :rightText="item.mroom_name" >
<text>预约时间段;</text>
</uni-list-item>
</uni-list>
</view>
</template>
<script>
export default {
data(){
return{
page:1,
page_size:10,
dataList:[],
}
},
mounted() {
this.getlistData();
},
methods:{
itemClick(item){
let itemJson = JSON.stringify(item);
uni.navigateTo({
url:'/pages/ofm/booking?item='+itemJson+'&slots='+item.slots,
})
},
getlistData(){
let that = this;
that.$api.bookingList({page:that.page,page_size:that.page_size}).then(res=>{
that.dataList = res.results;
})
},
},
}
</script>
<style scoped>
.container{
height: 100%;
padding: 0!important;
background-color: #ffffff;
}
.chat-custom-right {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
}
.chat-custom-text {
font-size: 12px;
color: #999;
}
.uniListItem{
position: relative;
}
.stateIcon{
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
.yiwancheng{
color: #ff0000;
}
</style>

340
pages/ofm/booking_form.vue Normal file
View File

@ -0,0 +1,340 @@
<template>
<view class="container">
<scroll-view scroll-y style="padding-bottom: 180rpx;background-color: #fff;">
<uni-forms v-model="form" label-width="160rpx">
<ticketd :ticket_="form.ticket_"></ticketd>
<uni-forms-item label="会议名称" required>
<uni-easyinput v-model="form.title" placeholder="请输入会议名称" :disabled="mode=='show'"/>
</uni-forms-item>
<uni-forms-item label="会议室" required>
<uni-data-select
v-model="form.mroom"
:localdata="mroomList"
:disabled="mode=='show'"
></uni-data-select>
</uni-forms-item>
<uni-forms-item label="参加人数" required>
<uni-number-box v-model="form.participant_count" :disabled="mode=='show'"></uni-number-box>
</uni-forms-item>
<uni-forms-item label="参会领导">
<uni-easyinput v-model="form.key_participants" :disabled="mode=='show'"/>
</uni-forms-item>
<uni-forms-item label="预约日期" required>
<uni-datetime-picker type="date" :clear-icon="false" v-model="form.mdate" @change="mdateChange" v-if="mode!='show'"/>
<span v-else>{{form.mdate}}</span>
</uni-forms-item>
<uni-forms-item label="备注">
<uni-easyinput v-model="form.note" :disabled="mode=='show'"/>
</uni-forms-item>
<uni-forms-item label="时间段">
<span v-for="item in form.time_ranges" :key="item">{{item}}</span>
</uni-forms-item>
</uni-forms>
<view class="timeView" v-if="mode != 'show'">
<view style="height: 70upx;line-height: 70upx;">
<text>凌晨：</text>
<view class="iconsWrap" @click="showAmChange">
<uni-icons v-if="showAm" type="up" size="20" color="#ffffff"></uni-icons>
<uni-icons v-else type="down" size="20" color="#ffffff"></uni-icons>
</view>
</view>
<view :class="{'amBlockHide':!showAm,'amBlock': showAm}">
<view v-for="(item,index) in timesListAm" :key="item.value" class="timeBlock ">
<view :class="{'isSelected':item.isSelect,'isSloted':item.sloted,'timeItem': true}" @click="timeItemClickAm(index)">{{item.label}}</view>
</view>
</view>
<view v-for="(item,index) in timesListPm" :key="item.value" class="timeBlock">
<view :class="{'isSelected':item.isSelect,'isSloted':item.sloted,'timeItem': true}" @click="timeItemClickPm(index)">{{item.label}}</view>
</view>
<!-- <text>已选时间段：</text>
<view class="">
<text v-for="item in selectList" :key="item.value">{{item.label}};</text>
</view>
<view>共{{totalCount}}小时</view> -->
</view>
</scroll-view>
<view class="footer_fixed">
<ticketd_b :workflow_key="'booking'" :title="form.title + '-会议室预定'" :t_id="form.id" :ticket_="form.ticket_"
@success="()=>{uni.navigateBack()} " :submit_b_func="submit_b_func" ref="ticketd_b_start"></ticketd_b>
</view>
</view>
</template>
<script>
import ticketd_b from "../wf/ticketd_b.vue"
import ticketd from "../wf/ticketd.vue"
import {actStateEnum} from "@/utils/enum.js"
export default {
components: { ticketd_b, ticketd },
data(){
return{
t_id: null,
actStateEnum,
index:0,
totalCount:0,
pickDate:'',
mroomId:'',
mode:'show',
showAm:false,
bookingTitle:'',
form:{
id:'',
note:'',
title:'',
mroom:'',
mdate:'',
slots:[],
create_by_phone:'',
key_participants:'',
participant_count:'',
ticket_:null,
belong_dept:uni.getStorageSync('userInfo').belong_dept
},
selectList:[],
mroomList: [],
transitions:[],
//凌晨0-6点
timesListAm:[
{value:0,label:'00:00-00:30',isSelect:false,sloted:false},
{value:1,label:'00:30-01:00',isSelect:false,sloted:false},
{value:2,label:'01:00-01:30',isSelect:false,sloted:false},
{value:3,label:'01:30-02:00',isSelect:false,sloted:false},
{value:4,label:'02:00-02:30',isSelect:false,sloted:false},
{value:5,label:'02:30-03:00',isSelect:false,sloted:false},
{value:6,label:'03:00-03:30',isSelect:false,sloted:false},
{value:7,label:'03:30-04:00',isSelect:false,sloted:false},
{value:8,label:'04:00-04:30',isSelect:false,sloted:false},
{value:9,label:'04:30-05:00',isSelect:false,sloted:false},
{value:10,label:'05:00-05:30',isSelect:false,sloted:false},
{value:11,label:'05:30-06:00',isSelect:false,sloted:false}
],
timesListPm:[
{value:12,label:'06:00-06:30',isSelect:false,sloted:false},
{value:13,label:'06:30-07:00',isSelect:false,sloted:false},
{value:14,label:'07:00-07:30',isSelect:false,sloted:false},
{value:15,label:'07:30-08:00',isSelect:false,sloted:false},
{value:16,label:'08:00-08:30',isSelect:false,sloted:false},
{value:17,label:'08:30-09:00',isSelect:false,sloted:false},
{value:18,label:'09:00-09:30',isSelect:false,sloted:false},
{value:19,label:'09:30-10:00',isSelect:false,sloted:false},
{value:20,label:'10:00-10:30',isSelect:false,sloted:false},
{value:21,label:'10:30-11:00',isSelect:false,sloted:false},
{value:22,label:'11:00-11:30',isSelect:false,sloted:false},
{value:23,label:'11:30-12:00',isSelect:false,sloted:false},
{value:24,label:'12:00-12:30',isSelect:false,sloted:false},
{value:25,label:'12:30-13:00',isSelect:false,sloted:false},
{value:26,label:'13:00-13:30',isSelect:false,sloted:false},
{value:27,label:'13:30-14:00',isSelect:false,sloted:false},
{value:28,label:'14:00-14:30',isSelect:false,sloted:false},
{value:29,label:'14:30-15:00',isSelect:false,sloted:false},
{value:30,label:'15:00-15:30',isSelect:false,sloted:false},
{value:31,label:'15:30-16:00',isSelect:false,sloted:false},
{value:32,label:'16:00-16:30',isSelect:false,sloted:false},
{value:33,label:'16:30-17:00',isSelect:false,sloted:false},
{value:34,label:'17:00-17:30',isSelect:false,sloted:false},
{value:35,label:'17:30-18:00',isSelect:false,sloted:false},
{value:36,label:'18:00-18:30',isSelect:false,sloted:false},
{value:37,label:'18:30-19:00',isSelect:false,sloted:false},
{value:38,label:'19:00-19:30',isSelect:false,sloted:false},
{value:39,label:'19:30-20:00',isSelect:false,sloted:false},
{value:40,label:'20:00-20:30',isSelect:false,sloted:false},
{value:41,label:'20:30-21:00',isSelect:false,sloted:false},
{value:42,label:'21:00-21:30',isSelect:false,sloted:false},
{value:43,label:'21:30-22:00',isSelect:false,sloted:false},
{value:44,label:'22:00-22:30',isSelect:false,sloted:false},
{value:45,label:'22:30-23:00',isSelect:false,sloted:false},
{value:46,label:'23:00-23:30',isSelect:false,sloted:false},
{value:47,label:'23:30-24:00',isSelect:false,sloted:false}
]
}
},
async onLoad(options) {
let that = this;
that.form.id='';
that.selectList = [];
that.mroomId = options.mroomId;
that.mode = options.mode?options.mode:'show';
that.t_id = options.t_id?options.t_id:null;
if(that.mode != "add"){
if(that.t_id) {
that.form = await that.$api.bookingItem(that.t_id);
if(that.form.ticket_.state_.type == 1 && that.form.create_by == uni.getStorageSync("userInfo").id ) {
that.mode = "edit";
}else{
that.mode = "show";
}
}else{
that.form = uni.getStorageSync("currentBooking");
}
}
await that.getmRooms();
if(options.slots){
that.form.slots = [];
let slots = options.slots.split(',');
if(slots.length>0){
slots.forEach(item=>{
let slot = Number(item);
that.form.slots.push(slot);
if(slot<12){
that.timesListAm[slot].isSelect = true;
that.selectList.push(that.timesListAm[slot])
}else{
that.timesListPm[slot].isSelect = true;
that.selectList.push(that.timesListPm[slot])
}
})
that.totalCount = slots.length*0.5;
}
}
},
methods:{
async getmRooms(){
let that = this;
let res = await that.$api.getMroom({ page: 0});
res.forEach(item=>{
item.value = item.id;
item.text = item.name
})
that.mroomList = res;
},
showAmChange(){
this.showAm = !this.showAm;
},
timeItemClickAm(index){
if(this.timesListPm[index].sloted){
}else{
this.timesListAm[index].isSelect = !this.timesListAm[index].isSelect;
this.clickItems();
}
},
timeItemClickPm(index){
if(this.timesListPm[index].sloted){
}else{
this.timesListPm[index].isSelect = !this.timesListPm[index].isSelect;
this.clickItems();
}
},
clickItems(){
let that = this;
that.selectList = [];
let lists = [],slots=[];
that.timesListAm.forEach(item=>{
if(item.isSelect){
lists.push(item)
slots.push(item.value);
}
})
that.timesListPm.forEach(item2=>{
if(item2.isSelect){
lists.push(item2)
slots.push(item2.value);
}
})
setTimeout(()=>{
that.totalCount = slots.length*0.5;
that.selectList = lists;
that.form.slots = slots;
},500)
},
//选择会议室和日期后查询有无预定
bindPickerChange(e) {
this.form.mroom = e.detail.value;
this.index = e.detail.value;
if(this.form.mdate!==''&&this.form.mdate!==null){
this.getmRoomSlot();
}
},
mdateChange(){
if(this.form.mroom!==''&&this.form.mroom!==null){
this.getmRoomSlot();
}
},
getmRoomSlot(){
let that = this;
let form = {};
form.page = 0;
form.mroom = that.form.mroom;
form.mdate = that.form.mdate;
that.timesListAm.forEach(slot=>{
slot.sloted = false;
})
that.timesListPm.forEach(slot=>{
slot.sloted = false;
})
that.$api.bookingSlot(form).then(res=>{
res.forEach(item=>{
if(item.slot<12){
that.timesListAm[item.slot].sloted = true;
}else{
that.timesListPm[item.slot].sloted = true;
}
})
})
},
//选择会议室和日期后查询有无预定
async submit_b_func(id){
let that = this;
if (that.mode != 'show') {
if(that.form.id) {
await that.$api.bookingUpdate(that.form.id, that.form);
}else{
let res = await that.$api.bookingCreate(that.form);
that.form.id = res.id;
}
}
}
}
}
</script>
<style scoped>
.iconsWrap{
width: 40upx;
height: 40upx;
display: inline-block;
line-height: 40upx;
border-radius: 25upx;
text-align: center;
background-color: #74ddfc;
border: 1px solid #74ddfc;
}
.timeView{
width: 100%;
padding: 10upx;
box-sizing: border-box;
}
.amBlock{
display: block;
}
.amBlockHide{
display: none;
}
.timeBlock{
width: 25%;
padding: 6upx;
height: 70upx;
margin: 10upx 0;
font-size: 28upx;
line-height: 70upx;
display: inline-block;
box-sizing: border-box;
}
.timeItem{
color: #666666;
text-align: center;
border-radius: 10upx;
background-color: #b9f0cb;
border: 1upx solid #eeeeee;
}
.timeItem.isSelected{
background-color: #00a870;
color: #fff;
}
.timeItem.isSloted{
background-color: #fac275!important;
color: #fff;
}
</style>