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>
|