feat: 会议室查看
This commit is contained in:
@@ -4,17 +4,16 @@ import { Page } from '@vben/common-ui';
|
||||
import dayjs from 'dayjs';
|
||||
import type { TableColumnType } from 'ant-design-vue';
|
||||
import { Radio, Select, Button, Table } from 'ant-design-vue';
|
||||
import { conferenceList } from '#/api/property/conference';
|
||||
import { roomBookingList } from '#/api/property/roomBooking';
|
||||
import { getMeetName } from '#/api/property/roomBooking';
|
||||
import { getAppointmentListByDate,getAppointmentListBymeetId } from '#/api/property/roomBooking/conferenceView';
|
||||
import type { RadioChangeEvent } from 'ant-design-vue';
|
||||
import type { SelectValue } from 'ant-design-vue/es/select';
|
||||
|
||||
// 首先定义会议室和预约信息的接口类型
|
||||
// 会议室和预约信息的接口类型
|
||||
interface ConferenceRoom {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface ConferenceBooking {
|
||||
id: string | number;
|
||||
tbConferenceId: string | number; // 会议室ID
|
||||
@@ -43,21 +42,22 @@ const selectedDate = ref<string>('');
|
||||
const weekDates = ref<string[]>([]);
|
||||
|
||||
// 预约数据
|
||||
const bookings = ref<ConferenceBooking[]>([]);
|
||||
const bookings = ref<any[]>([]);
|
||||
// 新增：表格渲染用的结构
|
||||
const bookingTable = ref<Record<string, Record<string, any>>>({});
|
||||
// 新增：加载状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 时间段
|
||||
const timeSlots = [
|
||||
'8:00', '8:30', '9:00', '9:30', '10:00', '10:30',
|
||||
'11:00', '11:30', '12:00', '12:30', '13:00', '13:30',
|
||||
'14:00', '14:30', '15:00', '15:30', '16:00', '16:30',
|
||||
'17:00', '17:30'
|
||||
];
|
||||
// 时间段只显示"上午" "下午"
|
||||
const timeSlots = ['上午', '下午'];
|
||||
|
||||
// 生成一周日期
|
||||
function generateWeekDates(): void {
|
||||
const today = dayjs();
|
||||
// 获取本周的周一
|
||||
const startOfWeek = today.startOf('week');
|
||||
const dates = Array.from({ length: 7 }, (_, i) => {
|
||||
return today.add(i, 'day').format('YYYY-MM-DD');
|
||||
return startOfWeek.add(i, 'day').format('YYYY-MM-DD');
|
||||
});
|
||||
weekDates.value = dates;
|
||||
selectedDate.value = dates[0] ?? '';
|
||||
@@ -65,39 +65,84 @@ function generateWeekDates(): void {
|
||||
|
||||
// 获取预约数据
|
||||
async function fetchBookings(): Promise<void> {
|
||||
loading.value = true;
|
||||
try {
|
||||
if (viewMode.value === 'date') {
|
||||
// 先获取会议室列表
|
||||
const roomRes = await conferenceList();
|
||||
console.log(roomRes);
|
||||
|
||||
// roomList.value = roomRes.rows || [];
|
||||
|
||||
// // 然后获取每个会议室的预约信息
|
||||
// const bookingPromises = roomList.value.map(room =>
|
||||
// roomBookingList({
|
||||
// appointmentDate: selectedDate.value,
|
||||
// bookingStatus: 2,
|
||||
// reviewStatus: 1,
|
||||
// tbConferenceId: room.id
|
||||
// })
|
||||
// );
|
||||
|
||||
// const bookingResults = await Promise.all(bookingPromises);
|
||||
// // 合并所有预约数据
|
||||
// bookings.value = bookingResults.flatMap(res => res.rows || []);
|
||||
} else {
|
||||
// 按会议室视图时直接查询该会议室的预约
|
||||
const res = await roomBookingList({
|
||||
appointmentDate: selectedDate.value,
|
||||
bookingStatus: 2,
|
||||
reviewStatus: 1,
|
||||
tbConferenceId: selectedRoom.value
|
||||
const roomRes = await getMeetName();
|
||||
roomList.value = ([roomRes]).map((item: any) => ({
|
||||
id: item.value,
|
||||
name: item.name
|
||||
}));
|
||||
const appointmentRes = await getAppointmentListByDate({
|
||||
appointmentDate: selectedDate.value
|
||||
});
|
||||
bookings.value = res.rows || [];
|
||||
bookings.value = (appointmentRes || []).map((item: any) => ({
|
||||
id: item.id,
|
||||
meetId: item.meetId,
|
||||
name: item.name,
|
||||
person: item.person,
|
||||
scheduledEndtime: item.scheduledEndtime,
|
||||
scheduledStarttime: item.scheduledStarttime,
|
||||
unit: item.unit,
|
||||
personName: item.personName,
|
||||
slots: item.slots,
|
||||
unitName: item.unitName,
|
||||
subject: item.subject,
|
||||
deptName: item.unitName,
|
||||
bookingName: item.personName,
|
||||
startTime: item.scheduledStarttime,
|
||||
endTime: item.scheduledEndtime,
|
||||
bookingDate: item.scheduledStarttime,
|
||||
tbConferenceId: item.meetId,
|
||||
// 兼容后续渲染
|
||||
}));
|
||||
// 处理为表格结构
|
||||
const table: Record<string, Record<string, any>> = { '上午': {}, '下午': {} };
|
||||
roomList.value.forEach(room => {
|
||||
['上午', '下午'].forEach(slot => {
|
||||
const booking = bookings.value.find(b => b.name === room.name && b.slots === slot);
|
||||
table[slot][room.name] = booking || null;
|
||||
});
|
||||
});
|
||||
bookingTable.value = table;
|
||||
} else {
|
||||
const res = await getAppointmentListBymeetId({
|
||||
meetId: selectedRoom.value
|
||||
});
|
||||
bookings.value = (res || []).map((item: any) => ({
|
||||
id: item.id,
|
||||
meetId: item.meetId,
|
||||
name: item.name,
|
||||
person: item.person,
|
||||
scheduledEndtime: item.scheduledEndtime,
|
||||
scheduledStarttime: item.scheduledStarttime,
|
||||
unit: item.unit,
|
||||
personName: item.personName,
|
||||
slots: item.slots,
|
||||
unitName: item.unitName,
|
||||
subject: item.subject,
|
||||
deptName: item.unitName,
|
||||
bookingName: item.personName,
|
||||
startTime: item.scheduledStarttime,
|
||||
endTime: item.scheduledEndtime,
|
||||
bookingDate: item.scheduledStarttime,
|
||||
tbConferenceId: item.meetId,
|
||||
}));
|
||||
const table: Record<string, Record<string, any>> = { '上午': {}, '下午': {} };
|
||||
weekDates.value.forEach(date => {
|
||||
['上午', '下午'].forEach(slot => {
|
||||
const booking = bookings.value.find(b => dayjs(b.scheduledStarttime).format('YYYY-MM-DD') === date && b.slots === slot);
|
||||
table[slot][date] = booking || null;
|
||||
});
|
||||
});
|
||||
bookingTable.value = table;
|
||||
}
|
||||
console.log(bookingTable.value,'bookingTable.value');
|
||||
|
||||
} catch (error) {
|
||||
console.error('获取预约数据失败:', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -124,45 +169,63 @@ function handleRoomChange(value: SelectValue): void {
|
||||
fetchBookings();
|
||||
}
|
||||
|
||||
// 获取单元格预约信息
|
||||
// 获取单元格预约信息（上午/下午）
|
||||
function getCellBooking(col: string, time: string): ConferenceBooking | undefined {
|
||||
// 判断时间属于上午还是下午
|
||||
function isMorning(startTime: string) {
|
||||
const hour = dayjs(startTime).hour();
|
||||
return hour < 12;
|
||||
}
|
||||
if (viewMode.value === 'date') {
|
||||
const room = roomList.value.find(r => r.name === col);
|
||||
return bookings.value.find(b =>
|
||||
b.tbConferenceId === room?.id &&
|
||||
dayjs(b.startTime).format('HH:mm') === time
|
||||
return bookings.value.find(b =>
|
||||
b.tbConferenceId === room?.id &&
|
||||
((time === '上午' && isMorning(b.startTime)) || (time === '下午' && !isMorning(b.startTime)))
|
||||
);
|
||||
} else {
|
||||
return bookings.value.find(b =>
|
||||
dayjs(b.bookingDate).format('YYYY-MM-DD') === col &&
|
||||
dayjs(b.startTime).format('HH:mm') === time
|
||||
return bookings.value.find(b =>
|
||||
dayjs(b.bookingDate).format('YYYY-MM-DD') === col &&
|
||||
((time === '上午' && isMorning(b.startTime)) || (time === '下午' && !isMorning(b.startTime)))
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// 修改渲染预约单元格的函数
|
||||
function renderBookingCell(booking: ConferenceBooking) {
|
||||
return h('div',
|
||||
{
|
||||
class: 'booking-cell'
|
||||
},
|
||||
return h('div',
|
||||
{
|
||||
class: 'booking-cell'
|
||||
},
|
||||
[
|
||||
h('span',
|
||||
{ class: 'booking-user' },
|
||||
h('span',
|
||||
{ class: 'booking-user' },
|
||||
`预约人：${booking.bookingName}`
|
||||
),
|
||||
h('span',
|
||||
{ class: 'booking-dept' },
|
||||
h('span',
|
||||
{ class: 'booking-dept' },
|
||||
`单位：${booking.deptName}`
|
||||
),
|
||||
h('span',
|
||||
{ class: 'booking-subject' },
|
||||
h('span',
|
||||
{ class: 'booking-subject' },
|
||||
`主题：${booking.subject}`
|
||||
)
|
||||
]
|
||||
);
|
||||
}
|
||||
|
||||
// 随机浅色背景色生成函数
|
||||
function getRandomBgColor() {
|
||||
const r = Math.floor(200 + Math.random() * 55);
|
||||
const g = Math.floor(200 + Math.random() * 55);
|
||||
const b = Math.floor(200 + Math.random() * 55);
|
||||
return {
|
||||
background: `rgba(${r},${g},${b},0.5)`,
|
||||
borderRadius: '6px',
|
||||
padding: '60px 10px',
|
||||
transition: 'background 0.3s'
|
||||
};
|
||||
}
|
||||
|
||||
// 表格列配置
|
||||
interface TableRecord {
|
||||
time: string;
|
||||
@@ -170,43 +233,54 @@ interface TableRecord {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
// 会议室列补全到7个
|
||||
function getFullRoomList() {
|
||||
const rooms = roomList.value.slice();
|
||||
const count = rooms.length;
|
||||
if (viewMode.value === 'date' && count < 7) {
|
||||
for (let i = count; i < 7; i++) {
|
||||
rooms.push({ id: `empty_${i}`, name: '' });
|
||||
}
|
||||
}
|
||||
return rooms;
|
||||
}
|
||||
|
||||
const columns = computed<TableColumnType<TableRecord>[]>(() => {
|
||||
const baseColumns: TableColumnType<TableRecord>[] = [{
|
||||
title: '时间',
|
||||
dataIndex: 'time',
|
||||
dataIndex: 'slot',
|
||||
key: 'slot',
|
||||
width: 100,
|
||||
fixed: 'left' as const
|
||||
}];
|
||||
|
||||
const dynamicColumns: TableColumnType<TableRecord>[] = viewMode.value === 'date'
|
||||
? roomList.value.map(room => ({
|
||||
title: room.name,
|
||||
dataIndex: room.id,
|
||||
? getFullRoomList().map(room => ({
|
||||
title: room.name || ' ',
|
||||
dataIndex: room.name,
|
||||
key: room.name,
|
||||
width: 200,
|
||||
customRender: ({ record }) => {
|
||||
const booking = getCellBooking(room.name, record.time);
|
||||
return booking ? renderBookingCell(booking) : null;
|
||||
}
|
||||
}))
|
||||
: weekDates.value.map(date => ({
|
||||
title: dayjs(date).format('MM-DD'),
|
||||
title: dayjs(date).format('YYYY-MM-DD'),
|
||||
dataIndex: date,
|
||||
key: date,
|
||||
width: 200,
|
||||
customRender: ({ record }) => {
|
||||
const booking = getCellBooking(date, record.time);
|
||||
return booking ? renderBookingCell(booking) : null;
|
||||
}
|
||||
}));
|
||||
|
||||
return [...baseColumns, ...dynamicColumns];
|
||||
});
|
||||
|
||||
// 表格数据
|
||||
const tableData = computed<TableRecord[]>(() => {
|
||||
return timeSlots.map(time => ({
|
||||
time,
|
||||
key: time,
|
||||
}));
|
||||
const slots = ['上午', '下午'];
|
||||
return slots.map(slot => {
|
||||
const row: any = { slot };
|
||||
const cols = viewMode.value === 'date'
|
||||
? getFullRoomList().map(room => room.name)
|
||||
: weekDates.value;
|
||||
cols.forEach(col => {
|
||||
row[col] = bookingTable.value[slot]?.[col] || null;
|
||||
});
|
||||
return row;
|
||||
});
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
@@ -224,8 +298,6 @@ onMounted(() => {
|
||||
<Radio.Button value="date">按日期</Radio.Button>
|
||||
<Radio.Button value="room">按会议室</Radio.Button>
|
||||
</Radio.Group>
|
||||
|
||||
<!-- 按会议室视图的下拉选择 -->
|
||||
<Select
|
||||
v-if="viewMode === 'room'"
|
||||
v-model:value="selectedRoom"
|
||||
@@ -233,7 +305,7 @@ onMounted(() => {
|
||||
placeholder="请选择会议室"
|
||||
@change="handleRoomChange"
|
||||
>
|
||||
<Select.Option
|
||||
<Select.Option
|
||||
v-for="room in roomList"
|
||||
:key="room.id"
|
||||
:value="room.id"
|
||||
@@ -241,59 +313,68 @@ onMounted(() => {
|
||||
{{ room.name }}
|
||||
</Select.Option>
|
||||
</Select>
|
||||
|
||||
<!-- 按日期视图的日期选择 -->
|
||||
<div v-if="viewMode === 'date'" class="date-buttons">
|
||||
<Button
|
||||
v-for="date in weekDates"
|
||||
:key="date"
|
||||
:type="date === selectedDate ? 'primary' : 'default'"
|
||||
@click="handleDateChange(date)"
|
||||
>
|
||||
{{ dayjs(date).format('MM-DD') }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 日程表格 -->
|
||||
<div v-if="viewMode === 'date'" class="date-buttons">
|
||||
<Button
|
||||
v-for="date in weekDates"
|
||||
:key="date"
|
||||
:type="date === selectedDate ? 'primary' : 'default'"
|
||||
@click="handleDateChange(date)"
|
||||
>
|
||||
{{ dayjs(date).format('YYYY-MM-DD') }}
|
||||
</Button>
|
||||
</div>
|
||||
<Table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:pagination="false"
|
||||
bordered
|
||||
:scroll="{ x: 'max-content' }"
|
||||
/>
|
||||
:loading="loading"
|
||||
tableLayout="fixed"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex !== 'slot'">
|
||||
<div
|
||||
v-if="record[column.dataIndex]"
|
||||
:style="getRandomBgColor()"
|
||||
>
|
||||
<div>预约人：{{ record[column.dataIndex].personName }}</div>
|
||||
<div>单位：{{ record[column.dataIndex].unitName }}</div>
|
||||
</div>
|
||||
<div v-else></div>
|
||||
</template>
|
||||
</template>
|
||||
</Table>
|
||||
</div>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.conference-view {
|
||||
padding: 16px;
|
||||
|
||||
.control-panel {
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.room-select {
|
||||
width: 200px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.date-buttons {
|
||||
margin-top: 16px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
:deep(.ant-btn) {
|
||||
margin-right: 8px;
|
||||
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.booking-cell {
|
||||
background: #e6f7ff;
|
||||
padding: 8px;
|
||||
@@ -302,29 +383,33 @@ onMounted(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
|
||||
|
||||
&.booking-user {
|
||||
color: #1890ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
&.booking-dept {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
&.booking-subject {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
background: #bae7ff;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-table-tbody > tr > td:first-child) {
|
||||
padding: 10px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user