Skip to content

D
dd_school
Commit 8507e761 by peijy
Options

pyj 7.17 个人工作-录播室预约-空闲情况

parent c67f398d
Showing with 215 additions and 121 deletions
ruoyi-ui/src/views/smartSchool/personWork/recordingroomAppointment /IdleSituation/index.vue
......@@ -3,8 +3,10 @@
<!-- 搜索条件表单 -->
<el-form :model="queryParams" ref="queryParams" size="small" :inline="true" v-show="showSearch">
<el-form-item label="日期" prop="startTime">
<el-date-picker size="small" v-model="queryParams.startTime" type="date" placeholder="开始日期" value-format="yyyy-MM-dd"
format="yyyy-MM-dd" @change="changeDate" :picker-options="pickerOptions">
<el-date-picker size="small" v-model="queryParams.startTime" type="date" placeholder="开始日期"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd" @change="changeDate" :picker-options="pickerOptions"
style="margin-right:10px">
</el-date-picker>
<el-date-picker size="small" type="date" v-model="endTime" disabled>
......@@ -13,46 +15,58 @@
</el-form-item>
<el-form-item prop="studioName">
<el-select v-model="queryParams.studioName" placeholder="录播室">
<el-option v-for="item in options" :key="item.studioName" :label="item.studioId" :value="item.studioName">
</el-option>
</el-select>
<el-form-item prop="studioName" :rules="[{ required: true, message: '请选择录播室', trigger: 'change,blur' }]">
<el-select v-model="queryParams.studioId" placeholder="录播室" >
<el-option v-for="item in options" :key="item.id" :label="item.studioName" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-button type="primary" icon="el-icon-search" @click="fetchData">搜索</el-button>
<el-button size="mini" type="primary" icon="el-icon-search" @click="fetchData">搜索</el-button>
<!-- <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button> -->
<!-- :disabled="isReservationDisabled" -->
<el-button @click="reserve">预约</el-button>
<el-button size="mini" @click="reserve">预约</el-button>
</el-form>
<p style="margin: 0 0 0 30px;font-size: 14px">
说明：（1）录播室每天开放上午四节、下午四节、晚上三节。共计每天11节。（2）请提前一天进行预约。（3）预约不可跨天，跨天请进行多次预约</p>
<!-- 录播室占用情况表格 -->
<table>
<table style="margin-left: 30px">
<thead>
<tr>
<th></th>
<!-- 表格日期-->
<th v-for="day in days" :key="day">{{ day }}</th>
</tr>
<tr>
<th></th>
<!-- 表格日期-->
<th v-for="day in days" :key="day">{{ day }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(timeSlot, index) in timeSlots" :key="index">
<td>{{ timeSlot }}</td>
<td v-for="(day, dayIndex) in days" :key="dayIndex" :class="{
<tr v-for="(timeSlot, index) in timeSlots" :key="index">
<td>{{ timeSlot }}</td>
<!-- <td v-for="(day, dayIndex) in days" :key="dayIndex" :class="{-->
<!-- occupied: isOccupied(day, index),-->
<!-- selected: isSelected(day, index),-->
<!-- }" @mousedown="handleMouseDown(day, index)" @mouseup="handleMouseUp(day, index)"-->
<!-- @mouseenter="handleMouseEnter(day, index)" @click="handleCellClick(day, index)">-->
<!-- {{ isOccupied(day, index) ? "占用" : "" }}-->
<!-- </td>-->
<td v-for="(day, dayIndex) in days" :key="dayIndex" :class="{
occupied: isOccupied(day, index),
selected: isSelected(day, index),
}" @mousedown="handleMouseDown(day, index)" @mouseup="handleMouseUp(day, index)"
@mouseenter="handleMouseEnter(day, index)" @click="handleCellClick(day, index)">
{{ isOccupied(day, index) ? "占用" : "" }}
</td>
</tr>
}" @click="handleCellClick(day, index)">
{{ isOccupied(day, index) ? "占用" : "" }}
</td>
</tr>
</tbody>
</table>
<!-- 预约录播室成功的弹窗 -->
<el-dialog :visible.sync="successDialogVisible" title="预约节次">
<p>是否确定预约此节次?</p>
<el-dialog :visible.sync="successDialogVisible" title="预约">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="录播内容">
<el-input type="textarea" v-model="form.studioContent"></el-input>
</el-form-item>
</el-form>
<!-- <p>是否确定预约此节次?</p>-->
<div slot="footer">
<el-button @click="successDialogVisible = false">取消</el-button>
<el-button :plain="true" type="primary" @click="confirmBooking">确定</el-button>
......@@ -78,20 +92,24 @@ export default {
//包含今天
// return time.getTime() < Date.now() - 8.64e7;
//不含今天
return time.getTime() < Date.now() ;
return time.getTime() < Date.now();
}
},
time:'',
time: '',
studioUseData: [], // 存储录播室占用情况数据
showSearch: true, // 是否显示搜索条件
successDialogVisible: false, // 预约录播室成功的弹窗是否可见
//弹框表单
form: {
studioContent: ''
},
days: [], // 存储日期的数组
timeSlots: [], // 存储时间段的数组
selectedTimeSlots: [], // 存储已选时间段的数组
isMouseDown: false, // 鼠标按下标志位
startSelection: null, // 选中的开始时间段
endSelection: null, // 选中的结束时间段
options:"",
options: "",
bookingForm: {
startTime: "", // 录播开始时间
timeSlots: "", // 预约的时间段
......@@ -100,52 +118,92 @@ export default {
studioId: "", // 录播室名称
startTime: "", // 查询的开始时间
},
//表格占用数据
occupiedData: [],
//弹框标记符
remark: false,
rooms: [], //录播室下拉列表存储
endTime:''
endTime: ''
};
},
created() {
this.queryParams.startTime = moment(new Date()).add(1,'days').format("YYYY-MM-DD");
this.endTime = moment(this.queryParams.startTime).add(9,'days')
this.queryParams.startTime = moment(new Date()).add(1, 'days').format("YYYY-MM-DD");
this.endTime = moment(this.queryParams.startTime).add(9, 'days')
// 初始化日期和时间段
this.initDays();
this.initTimeSlots();
// 获取录播室下拉框列表
this.getRoomList();
// this.fetchStudioUseData();
this.fetchStudioUseData();
// this.fetchData();
},
methods: {
changeDate(){
this.endTime = moment(this.queryParams.startTime).add(9,'days')
changeDate() {
this.endTime = moment(this.queryParams.startTime).add(9, 'days')
},
fetchStudioUseData() {
// 调用接口获取录播室占用情况数据
const params = {
startTime: this.queryParams.startTime,
studioId: this.queryParams.studioId,
};
console.log(123654, params);
getstudioUse({params}).then((res) => {
// console.log(123654, params);
getstudioUse(this.queryParams).then((res) => {
this.studioUseData = res.rows;
console.log(123, this.studioUseData);
});
},
//表格占用显示
isOccupied(day, index) {
// 判断指定的时间段是否被占用
const occupiedData = this.studioUseData.find((item) => {
return item.day === day && item.index === index;
// console.log('Array.from(item.useJc)',item.useJc.split(','))
// console.log('Array.from(item.useJc)',index + 1)
return item.useDate === day && item.useJc.split(',').includes((index+1).toString());
});
return occupiedData ? occupiedData.useUserId : false;
},
//表格点击选中
isSelected(day, index) {
if (this.isOccupied(day, index)) {
return false
} else {
// 检查时间段是否已选中
return this.selectedTimeSlots.some((selectedSlot) => {
// console.log('selectedSlot',selectedSlot)
return selectedSlot.day === day && selectedSlot.index === index;
});
}
},
//表格点击事件
handleCellClick(day, index) {
// 处理单元格点击事件
if (!this.isOccupied(day, index)) {
// 单元格为空闲状态，进行预约操作
// this.reserve();//加上此代码，点击表格立马弹出预约窗口
console.log('day',day)
console.log('index',index+1)
//占用点击不生效
if (this.isOccupied(day, index) && this.selectedTimeSlots.length == 0) {
this.remark = false
return
} else if (this.selectedTimeSlots.length == 0) {
// 处理单元格点击事件，点击第一个
this.selectedTimeSlots.push({day, index})
this.remark = true
//没有选同一天
} else if (this.selectedTimeSlots[0].day != day) {
this.remark = true
this.$modal.alertWarning("预约不可跨天");
return;
} else {
this.remark = true
//筛选出符合条件的对象
const selectObj = this.selectedTimeSlots.find((item) => {
console.log('find', item.day == day && item.index == index)
return item.day == day && item.index == index
})
console.log('selectObj', selectObj)
if (selectObj != undefined) {
this.remark = true
this.selectedTimeSlots = this.selectedTimeSlots.filter(item => item.index != index)
this.selectedTimeSlots.length == 0 ? this.remark = false : this.selectedTimeSlots
} else {
this.selectedTimeSlots.push({day, index})
}
}
},
// -----------------------------------------------------
......@@ -153,6 +211,7 @@ export default {
getRoomList() {
getAppointmentList({}).then((res) => {
this.options = res.rows;
console.log('res',res)
});
},
......@@ -179,23 +238,22 @@ export default {
// startDate.setDate(startDate.getDate() + 1);
// console.log('startDate',startDate)
for (let i = 0; i < 10; i++) {
const formattedDate = moment(this.queryParams.startTime).add(i,'days').format("YYYY-MM-DD");
console.log('formattedDate',formattedDate)
const formattedDate = moment(this.queryParams.startTime).add(i, 'days').format("YYYY-MM-DD");
console.log('formattedDate', formattedDate)
// const currentDate = new Date(startDate);
// currentDate.setDate(currentDate.getDate() + i);
// const formattedDate = this.formatDate(currentDate);
// currentDate.setDate(currentDate.getDate() + i);
// const formattedDate = this.formatDate(currentDate);
this.days.push(formattedDate);
}
},
formatDate(date) {
// 格式化日期为'YYYY-MM-DD'的形式
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
return `${year}-${month}-${day}`;
},
// formatDate(date) {
// // 格式化日期为'YYYY-MM-DD'的形式
// const year = date.getFullYear();
// const month = String(date.getMonth() + 1).padStart(2, "0");
// const day = String(date.getDate()).padStart(2, "0");
// return `${year}-${month}-${day}`;
// },
// isOccupied(day, index) {
// // 判断指定的时间段是否被占用
// // 这里假设你有一个函数可以根据日期和时间段查询录播室的占用情况
......@@ -205,13 +263,13 @@ export default {
handleMouseDown(day, index) {
// 处理鼠标按下事件
this.isMouseDown = true;
this.startSelection = { day, index };
this.endSelection = { day, index };
this.startSelection = {day, index};
this.endSelection = {day, index};
},
handleMouseUp(day, index) {
// 处理鼠标松开事件
this.isMouseDown = false;
this.endSelection = { day, index };
this.endSelection = {day, index};
// 根据按下的键盘按键进行选择操作
if (event.ctrlKey) {
......@@ -229,10 +287,11 @@ export default {
handleMouseEnter(day, index) {
// 处理鼠标进入单元格事件（用于 Shift 键多选）
if (this.isMouseDown && event.shiftKey) {
this.endSelection = { day, index };
this.endSelection = {day, index};
this.selectMultipleSlots();
}
},
//多选事件
selectMultipleSlots() {
// 选择多个时间段（同一天内）
const startDay = this.startSelection.day;
......@@ -240,7 +299,6 @@ export default {
const startIndex = this.startSelection.index;
const endIndex = this.endSelection.index;
const selectedTimeSlots = [];
// 遍历日期范围内的时间段，选择符合条件的时间段
for (
let dayIndex = this.days.indexOf(startDay);
......@@ -248,98 +306,134 @@ export default {
dayIndex++
) {
const day = this.days[dayIndex];
// 对于同一天内的时间段，根据索引范围进行选择
if (
dayIndex === this.days.indexOf(startDay) &&
dayIndex === this.days.indexOf(endDay)
) {
for (let index = startIndex; index <= endIndex; index++) {
selectedTimeSlots.push({ day, index });
selectedTimeSlots.push({day, index});
}
} else if (dayIndex === this.days.indexOf(startDay)) {
// 对于起始日期，选择从起始索引到最后一个时间段
for (let index = startIndex; index < this.timeSlots.length; index++) {
selectedTimeSlots.push({ day, index });
selectedTimeSlots.push({day, index});
}
} else if (dayIndex === this.days.indexOf(endDay)) {
// 对于结束日期，选择从第一个时间段到结束索引
for (let index = 0; index <= endIndex; index++) {
selectedTimeSlots.push({ day, index });
selectedTimeSlots.push({day, index});
}
} else {
// 其他日期完全选择
for (let index = 0; index < this.timeSlots.length; index++) {
selectedTimeSlots.push({ day, index });
selectedTimeSlots.push({day, index});
}
}
}
this.selectedTimeSlots = selectedTimeSlots;
},
isSelected(day, index) {
// 检查时间段是否已选中
return this.selectedTimeSlots.some((selectedSlot) => {
return selectedSlot.day === day && selectedSlot.index === index;
});
},
fetchData() {
this.days = [];
// 查询按钮的点击事件处理程序
this.initDays()
getstudioUse({
startTime: this.queryParams.startTime,
studioId: this.queryParams.studioId,
})
.then((res) => {
this.studioUseData = res;
})
.then((response) => {
// console.log(response);
if (response.code == 200) {
this.studioUseData = response.rows;
console.log(222, response.rows);
}
});
// 在这里，你可以发送请求获取录播室占用情况等数据
console.log("查询成功");
this.this.studioUseData = []
this.fetchStudioUseData()
// this.days = [];
// // 查询按钮的点击事件处理程序
// this.initDays()
// getstudioUse({
// startTime: this.queryParams.startTime,
// studioId: this.queryParams.studioId,
// })
// .then((res) => {
// this.studioUseData = res;
// })
// .then((response) => {
// // console.log(response);
// if (response.code == 200) {
// this.studioUseData = response.rows;
// console.log(222, response.rows);
// }
// });
// // 在这里，你可以发送请求获取录播室占用情况等数据
// console.log("查询成功");
},
reserve() {
//弹窗
reserve(day, index) {
if (this.remark) {
if(this.queryParams.studioId == ''){
this.successDialogVisible = false;
this.$modal.alertWarning("请选择录播室");
}else{
this.successDialogVisible = true;
}
} else{
console.log(this.remark)
this.successDialogVisible = false;
}
// }
// 预约按钮的点击事件处理程序
// 在这里，你可以处理预约操作，例如弹出对话框来录入录播内容并进行预约操作
if (this.selectedTimeSlots.length > 0) {
this.successDialogVisible = true;
}
// if (this.selectedTimeSlots.length > 0) {
// this.successDialogVisible = true;
// }
},
confirmBooking() {
// 弹窗确定按钮的点击事件处理程序
// 在这里，你可以处理预约操作，例如发送请求进行录播室预约操作
// 预约成功后，你可以根据已选时间段的数据来更新录播室的占用情况
this.successDialogVisible = false;
// 更新录播室占用情况
for (const selectedSlot of this.selectedTimeSlots) {
const day = selectedSlot.day;
const index = selectedSlot.index;
// 在这里，你可以根据录播室ID、日期和时间段进行更新录播室占用情况的操作
// 调用接口或更新数据来标记录播室在指定的日期和时间段被占用
console.log(`录播室在 ${day} 的 ${this.timeSlots[index]} 被预约成功`);
console.log('queryParams.studioName',this.queryParams)
console.log('this.selectedTimeSlots',this.selectedTimeSlots)
console.log('form.studioContent',this.form.studioContent)
const jc = this.selectedTimeSlots.map(item => {
return item.index+1
})
const stringJC = jc.toString()
console.log('stringJC',stringJC)
const params = {
//录播室id
studioId:this.queryParams.studioId,
//预约时间
appointmentTime:this.selectedTimeSlots[0].day,
//预约节次
appointmentJc:stringJC,
//录播内容
studioContent:this.form.studioContent
}
// 清除已选时间段
this.selectedTimeSlots = [];
this.$message({
message: "预约成功",
type: "success",
});
console.log("确定");
},
addIdle(params).then(res => {
console.log('res',res)
if(res.code == 200){
this.$message({
message: "预约成功",
type: "success",
});
this.fetchStudioUseData()
}
})
// 更新录播室占用情况
// for (const selectedSlot of this.selectedTimeSlots) {
// const day = selectedSlot.day;
// const index = selectedSlot.index;
// // 在这里，你可以根据录播室ID、日期和时间段进行更新录播室占用情况的操作
// // 调用接口或更新数据来标记录播室在指定的日期和时间段被占用
// console.log(`录播室在 ${day} 的 ${this.timeSlots[index]} 被预约成功`);
// }
//
// // 清除已选时间段
// this.selectedTimeSlots = [];
//
// this.$message({
// message: "预约成功",
// type: "success",
// });
//
// console.log("确定");
// },
// isReservationDisabled() {
// // 预约按钮是否禁用
// return this.selectedTimeSlots.length === 0;
// },
},
},
};
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment