453 lines
10 KiB
Vue
453 lines
10 KiB
Vue
<template>
|
||
<view class="reservation">
|
||
<view style="padding: 40rpx;">
|
||
<form>
|
||
<view class="form-item">
|
||
<label>功能房</label>
|
||
<input type="text" v-model="list.roomName" disabled placeholder="请输入"
|
||
placeholder-class="input-placeholder" />
|
||
</view>
|
||
<view class="form-item">
|
||
<label>主题</label>
|
||
<input type="text" v-model="formData.rtTheme" placeholder="请输入"
|
||
placeholder-class="input-placeholder" />
|
||
</view>
|
||
<view class="form-item">
|
||
<label>申请人</label>
|
||
<input type="text" v-model="formData.rtCreatRole" placeholder="请输入"
|
||
placeholder-class="input-placeholder" />
|
||
</view>
|
||
<view class="form-item">
|
||
<label>使用部门/学院</label>
|
||
<input type="text" v-model="formData.rtDepar" placeholder="请输入"
|
||
placeholder-class="input-placeholder" />
|
||
</view>
|
||
<view class="form-item">
|
||
<label>参与人数</label>
|
||
<input type="number" v-model="formData.rtPeople"
|
||
:placeholder="'当前功能房最大人数为'+list.staffOneStopRoom[0].roomCapacity+'人'"
|
||
placeholder-class="input-placeholder" />
|
||
</view>
|
||
<view class="form-item">
|
||
<label>预约用途</label>
|
||
<picker range-key="dictLabel" :value="rangeIndex" :range="Reserveduse" @change="classChange">
|
||
<view class="uni-input">
|
||
<text v-if="Reserveduse.length" class="val">{{Reserveduse[rangeIndex].dictLabel}}</text>
|
||
<uni-icons type="down" size="16" color="#202020"></uni-icons>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="form-item">
|
||
<label>人员类型</label>
|
||
<picker mode="multiSelector" :value="typeValues" :range="rolelist" @change="typeChange">
|
||
<view class="uni-input">
|
||
<!-- 显示所有选中的值 -->
|
||
<text v-if="typeValues.length" class="val">
|
||
{{ typeValues.map(value => rolelist.find(item => item.dictLabel === value).dictLabel).join(', ') }}
|
||
</text>
|
||
<uni-icons type="down" size="16" color="#202020"></uni-icons>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</form>
|
||
</view>
|
||
<view class="time-zone">
|
||
<view>
|
||
<view>
|
||
<text>开放时间</text>
|
||
</view>
|
||
<view>
|
||
<text style="color: red;">*</text>
|
||
<text>请点击下方时间段进行预约确认</text>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<view v-for="(item,index) in slotslist" :key="index">
|
||
<button @click="make(item,index)" :disabled="item.isOccupy==1"
|
||
:class="timeindex==index?'active':'dark'">{{item.openingHours}}</button>
|
||
</view>
|
||
</view>
|
||
|
||
<view>
|
||
<text>使用事项：</text>
|
||
<view>
|
||
<text>{{list.roomMatter}}</text>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<button v-if="slotslist.length!=0" type="primary" :disabled="isSubmitting" class="submit-btn"
|
||
@tap="onSubmit">提交</button>
|
||
<button v-else type="primary" :disabled="true" class="submit-btn">当前功能房时间未开放</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
selectRtFuReservationTime,
|
||
updateRoomReservation,
|
||
addRoomReservation
|
||
} from '@/api/OneStopCommunity/room.js'
|
||
import {
|
||
getDetailList,
|
||
Update
|
||
} from '@/api/OneStopCommunity/appointment.js'
|
||
import {
|
||
getDicts
|
||
} from '@/api/system/dict/data.js'
|
||
import {
|
||
toBackPage
|
||
} from "@/utils/toBack.js"
|
||
export default {
|
||
data() {
|
||
return {
|
||
isSubmitting: false, //表单提交标志位
|
||
timeindex: null,
|
||
formData: {
|
||
rtTheme: "",
|
||
rtRole: "",
|
||
rtPurpose: "",
|
||
rtPeople: "",
|
||
rtTimePeriod: "",
|
||
rtCreatRole: "",
|
||
rtDepar: "",
|
||
roomName: "",
|
||
|
||
},
|
||
rangeIndex: 0,
|
||
typeIndex: 0,
|
||
roomNo: "",
|
||
rtTime: "",
|
||
list: {},
|
||
slotslist: [],
|
||
Reserveduse: [],
|
||
rolelist: []
|
||
}
|
||
},
|
||
methods: {
|
||
classChange(e) {
|
||
this.rangeIndex = e.detail.value;
|
||
},
|
||
typeChange(e) {
|
||
this.typeIndex = e.detail.value;
|
||
},
|
||
onSubmit() {
|
||
this.isSubmitting = true; // 设置为正在提交
|
||
if (this.timeindex == null) {
|
||
uni.showToast({
|
||
title: "请填写完整内容！",
|
||
icon: 'none' // 根据需要设置图标
|
||
});
|
||
this.isSubmitting = false;
|
||
return;
|
||
}
|
||
this.formData.rtPurpose = this.Reserveduse[this.rangeIndex].dictLabel;
|
||
this.formData.rtRole = this.rolelist[this.typeIndex].dictLabel;
|
||
this.formData.roomNo = this.list.roomNo
|
||
var arr = this.list.rtTimePeriod.split(" ")
|
||
this.formData.rtTime = this.list.rtTime
|
||
this.formData.rtTimePeriod = this.slotslist[this.timeindex].openingHours
|
||
this.formData.roomName = this.list.roomName
|
||
this.formData.rtNo = this.slotslist[this.timeindex].rtNo
|
||
this.formData.staffOneStopRoomOpeningHoursList = this.list.staffOneStopRoomOpeningHoursList
|
||
console.log(this.formData)
|
||
if (parseInt(this.formData.rtPeople) <= 0) {
|
||
uni.showToast({
|
||
title: "功能房参与人数不能小于0！",
|
||
icon: 'none' // 根据需要设置图标
|
||
});
|
||
this.isSubmitting = false;
|
||
return;
|
||
}
|
||
if (parseInt(this.formData.rtPeople) > parseInt(this.list.staffOneStopRoom[0].roomCapacity)) {
|
||
uni.showToast({
|
||
title: "功能房最大人数为" + this.list.staffOneStopRoom[0].roomCapacity + "！",
|
||
icon: 'none' // 根据需要设置图标
|
||
});
|
||
this.isSubmitting = false;
|
||
return;
|
||
}
|
||
for (let var2 in this.formData) {
|
||
if (this.formData[var2] == null || this.formData[var2] == '') {
|
||
uni.showToast({
|
||
title: "请填写完整内容！",
|
||
icon: 'none' // 根据需要设置图标
|
||
});
|
||
this.isSubmitting = false;
|
||
return; // 停止执行后续操作
|
||
}
|
||
}
|
||
this.add()
|
||
},
|
||
make(item, index) {
|
||
// this.formData.rtYuyue = item
|
||
this.timeindex = index
|
||
},
|
||
async getlist() {
|
||
let obj = {
|
||
roomNo: this.list.roomNo,
|
||
rtTime: this.list.rtTime
|
||
}
|
||
// console.log(obj)
|
||
let res = await selectRtFuReservationTime(obj)
|
||
console.log(res)
|
||
this.slotslist = res.data
|
||
},
|
||
async getReserved() {
|
||
let res = await getDicts('routine_rtfureservations_rt_purpose')
|
||
this.Reserveduse = res.data
|
||
},
|
||
async getrole() {
|
||
let res = await getDicts('routine_rtfureservation_rt_role')
|
||
this.rolelist = res.data
|
||
},
|
||
async add() {
|
||
this.formData.rtId = this.list.rtId
|
||
this.formData.auditStatus = 0
|
||
this.formData.rtState = 0
|
||
let res = await Update(this.formData)
|
||
console.log(res)
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: "提交成功"
|
||
})
|
||
setTimeout(() => {
|
||
uni.redirectTo({
|
||
url: "../appointment/index"
|
||
})
|
||
}, 1000)
|
||
this.isSubmitting = false;
|
||
} else {
|
||
uni.showToast({
|
||
title: "已被预约",
|
||
icon: 'error'
|
||
})
|
||
this.isSubmitting = false;
|
||
}
|
||
},
|
||
async getDetail() {
|
||
let res = await getDetailList(this.list.rtId);
|
||
if (res.code == 200) {
|
||
this.detail = res.data;
|
||
}
|
||
},
|
||
},
|
||
onLoad(option) {
|
||
this.list = JSON.parse(option.item)
|
||
console.log(this.list)
|
||
this.formData.rtPurpose = this.list.rtDepar;
|
||
this.formData.rtRole = this.list.rtRole;
|
||
this.formData.roomName = this.list.roomName
|
||
this.formData.rtTheme = this.list.rtTheme
|
||
this.formData.rtCreatRole = this.list.rtCreatRole
|
||
this.formData.rtDepar = this.list.rtDepar
|
||
this.formData.rtPeople = this.list.rtPeople
|
||
this.getlist()
|
||
this.getReserved()
|
||
this.getrole()
|
||
this.getDetail()
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.reservation {
|
||
background-color: rgba(244, 244, 244, .6);
|
||
|
||
.form-item {
|
||
padding: 22rpx 40rpx;
|
||
background-color: white;
|
||
margin-bottom: 20rpx;
|
||
border-radius: 16rpx;
|
||
|
||
.uni-icons {
|
||
opacity: .5;
|
||
font-weight: bold
|
||
}
|
||
|
||
label {
|
||
margin-bottom: 20rpx;
|
||
display: inline-block;
|
||
}
|
||
|
||
input {
|
||
border: 1px solid #E1E1E1;
|
||
border-radius: 10rpx;
|
||
height: 70rpx;
|
||
padding-left: 30rpx;
|
||
|
||
.input-placeholder {
|
||
color: #b6b6b6;
|
||
}
|
||
}
|
||
|
||
picker {
|
||
border: 1px solid #E1E1E1;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
padding: 0 30rpx;
|
||
border-radius: 10rpx;
|
||
|
||
.uni-input {
|
||
display: flex;
|
||
color: #797979;
|
||
|
||
.val {
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.upload-img {
|
||
border: 1px solid #E1E1E1;
|
||
padding: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
|
||
.tip {
|
||
margin-top: 15rpx;
|
||
color: #7a7a7a;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.img-list {
|
||
border: 1px solid #D8D8D8;
|
||
border-radius: 20rpx;
|
||
|
||
.imgs {
|
||
padding: 22rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.img {
|
||
position: relative;
|
||
width: 160rpx;
|
||
height: 170rpx;
|
||
margin-bottom: 15rpx;
|
||
margin-right: 15rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.remove {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
color: white;
|
||
background-color: rgba(0, 0, 0, 0.4);
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 50%;
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.btn {
|
||
border-top: 1px solid #D8D8D8;
|
||
height: 100rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.time-zone {
|
||
width: 100%;
|
||
border-radius: 40rpx 40rpx 0rpx 0rpx;
|
||
background-color: #ffffff;
|
||
padding: 40rpx;
|
||
|
||
// margin-top: 10rpx;
|
||
&>view:nth-child(1) {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 65rpx;
|
||
text-align: center;
|
||
align-items: center;
|
||
|
||
&>view:nth-child(1) {
|
||
text {
|
||
font-size: 40rpx;
|
||
font-weight: 550;
|
||
}
|
||
}
|
||
|
||
&>view:nth-child(2) {
|
||
&>text:nth-child(2) {
|
||
font-size: 24rpx;
|
||
color: #202020;
|
||
opacity: .5;
|
||
}
|
||
}
|
||
}
|
||
|
||
&>view:nth-child(2) {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
align-content: flex-start;
|
||
|
||
view {
|
||
width: 30%;
|
||
margin: 10rpx;
|
||
|
||
button {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
button[disabled] {
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
color: #C1CCDF;
|
||
background-color: rgba(234, 241, 255, .8);
|
||
border-radius: 20rpx;
|
||
border: none;
|
||
}
|
||
|
||
.active {
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
border: 1px #1890FF solid;
|
||
background-color: #f9fbfc;
|
||
color: #ffffff;
|
||
background-color: #1890FF;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.dark {
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
border: 1px #1890FF solid;
|
||
background-color: #f9fbfc;
|
||
color: #1890FF;
|
||
border-radius: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
&>view:nth-child(3) {
|
||
margin-top: 40rpx;
|
||
font-size: 24rpx;
|
||
color: rgba(32, 32, 32, .5);
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.submit-btn {
|
||
margin-top: 60rpx;
|
||
}
|
||
}
|
||
</style> |