admin-vben5/apps/web-antd/src/views/property/roomBooking/conferenceView/index.vue

<script setup lang="ts">
import { ref, computed, onMounted, h } from 'vue';
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 { 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
  bookingName: string; // 预约人
  deptName: string; // 部门名称
  subject: string; // 会议主题
  startTime: string; // 开始时间
  endTime: string; // 结束时间
  bookingDate: string; // 预约日期
  status: number; // 状态
}

// 视图模式
const viewMode = ref<'date' | 'room'>('date');

// 会议室列表
const roomList = ref<ConferenceRoom[]>([]);

// 选中的会议室
const selectedRoom = ref<string>('');

// 选中的日期
const selectedDate = ref<string>('');

// 一周的日期
const weekDates = ref<string[]>([]);

// 预约数据
const bookings = ref<any[]>([]);
// 新增：表格渲染用的结构
const bookingTable = ref<Record<string, Record<string, any>>>({});
// 新增：加载状态
const loading = ref(false);

// 时间段只显示"上午" "下午"
const timeSlots = ['上午', '下午'];

// 生成一周日期
function generateWeekDates(): void {
  const today = dayjs();
  // 获取本周的周一
  const startOfWeek = today.startOf('week');
  const dates = Array.from({ length: 7 }, (_, i) => {
    return startOfWeek.add(i, 'day').format('YYYY-MM-DD');
  });
  weekDates.value = dates;
  // 默认选中今天
  selectedDate.value = today.format('YYYY-MM-DD');
}

// 获取预约数据
async function fetchBookings(): Promise<void> {
  loading.value = true;
  try {
    if (viewMode.value === 'date') {
      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 = (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;
    }
  } catch (error) {
    console.error('获取预约数据失败:', error);
  } finally {
    loading.value = false;
  }
}

// 切换视图模式
function handleViewModeChange(e: RadioChangeEvent): void {
  viewMode.value = e.target.value;
  if (viewMode.value === 'date') {
    // 默认选中今天
    selectedDate.value = dayjs().format('YYYY-MM-DD');
  } else {
    selectedRoom.value = roomList.value[0]?.id ?? '';
  }
  fetchBookings();
}

// 切换日期
function handleDateChange(date: string): void {
  selectedDate.value = date;
  fetchBookings();
}

// 切换会议室
function handleRoomChange(value: SelectValue): void {
  selectedRoom.value = value as string;
  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 &&
        ((time === '上午' && isMorning(b.startTime)) ||
          (time === '下午' && !isMorning(b.startTime))),
    );
  } else {
    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',
    },
    [
      h('span', { class: 'booking-user' }, `预约人：${booking.bookingName}`),
      h('span', { class: 'booking-dept' }, `单位：${booking.deptName}`),
      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;
  key: string;
  [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: 'slot',
      key: 'slot',
      width: 100,
      fixed: 'left' as const,
    },
  ];
  const dynamicColumns: TableColumnType<TableRecord>[] =
    viewMode.value === 'date'
      ? getFullRoomList().map((room) => ({
          title: room.name || ' ',
          dataIndex: room.name,
          key: room.name,
          width: 200,
        }))
      : weekDates.value.map((date) => ({
          title: dayjs(date).format('YYYY-MM-DD'),
          dataIndex: date,
          key: date,
          width: 200,
        }));
  return [...baseColumns, ...dynamicColumns];
});

const tableData = computed<TableRecord[]>(() => {
  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(() => {
  generateWeekDates();
  fetchBookings();
});
</script>

<template>
  <Page>
    <div class="conference-view">
      <!-- 顶部控制区 -->
      <div class="control-panel">
        <Radio.Group v-model:value="viewMode" @change="handleViewModeChange">
          <Radio.Button value="date">按日期</Radio.Button>
          <Radio.Button value="room">按会议室</Radio.Button>
        </Radio.Group>
        <Select
          v-if="viewMode === 'room'"
          v-model:value="selectedRoom"
          class="room-select"
          placeholder="请选择会议室"
          @change="handleRoomChange"
        >
          <Select.Option
            v-for="room in roomList"
            :key="room.id"
            :value="room.id"
          >
            {{ room.name }}
          </Select.Option>
        </Select>
      </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 {
  .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;
    border-radius: 4px;
    min-height: 60px;
    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>