fix: 修改bug

2025-07-23 20:54:54 +08:00
parent db8186d055
commit f6da015fb7
7 changed files with 160 additions and 136 deletions
--- a/apps/web-antd/src/views/property/roomBooking/conferenceView/index.vue
+++ b/apps/web-antd/src/views/property/roomBooking/conferenceView/index.vue
@@ -5,7 +5,10 @@ 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 {
+  getAppointmentListByDate,
+  getAppointmentListBymeetId,
+} from '#/api/property/roomBooking/conferenceView';
 import type { RadioChangeEvent } from 'ant-design-vue';
 import type { SelectValue } from 'ant-design-vue/es/select';

@@ -17,13 +20,13 @@ interface ConferenceRoom {
 interface ConferenceBooking {
  id: string | number;
  tbConferenceId: string | number; // 会议室ID
-  bookingName: string;    // 预约人
-  deptName: string;       // 部门名称
-  subject: string;        // 会议主题
-  startTime: string;      // 开始时间
-  endTime: string;        // 结束时间
-  bookingDate: string;    // 预约日期
-  status: number;         // 状态
+  bookingName: string; // 预约人
+  deptName: string; // 部门名称
+  subject: string; // 会议主题
+  startTime: string; // 开始时间
+  endTime: string; // 结束时间
+  bookingDate: string; // 预约日期
+  status: number; // 状态
 }

 // 视图模式
@@ -70,12 +73,12 @@ async function fetchBookings(): Promise<void> {
  try {
    if (viewMode.value === 'date') {
      const roomRes = await getMeetName();
-      roomList.value = ([roomRes]).map((item: any) => ({
+      roomList.value = roomRes.map((item: any) => ({
        id: item.value,
-        name: item.name
+        name: item.name,
      }));
      const appointmentRes = await getAppointmentListByDate({
-        appointmentDate: selectedDate.value
+        appointmentDate: selectedDate.value,
      });
      bookings.value = (appointmentRes || []).map((item: any) => ({
        id: item.id,
@@ -98,17 +101,19 @@ async function fetchBookings(): Promise<void> {
        // 兼容后续渲染
      }));
      // 处理为表格结构
-      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);
+      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
+        meetId: selectedRoom.value,
      });
      bookings.value = (res || []).map((item: any) => ({
        id: item.id,
@@ -129,16 +134,19 @@ async function fetchBookings(): Promise<void> {
        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);
+      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 {
@@ -150,8 +158,8 @@ async function fetchBookings(): Promise<void> {
 function handleViewModeChange(e: RadioChangeEvent): void {
  viewMode.value = e.target.value;
  if (viewMode.value === 'date') {
-  // 默认选中今天
-  selectedDate.value = dayjs().format('YYYY-MM-DD');
+    // 默认选中今天
+    selectedDate.value = dayjs().format('YYYY-MM-DD');
  } else {
    selectedRoom.value = roomList.value[0]?.id ?? '';
  }
@@ -171,46 +179,45 @@ function handleRoomChange(value: SelectValue): void {
 }

 // 获取单元格预约信息（上午/下午）
-function getCellBooking(col: string, time: string): ConferenceBooking | undefined {
+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)))
+    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)))
+    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',
+  return h(
+    'div',
    {
-      class: 'booking-cell'
+      class: 'booking-cell',
    },
    [
-      h('span',
-        { class: 'booking-user' },
-        `预约人：${booking.bookingName}`
-      ),
-      h('span',
-        { class: 'booking-dept' },
-        `单位：${booking.deptName}`
-      ),
-      h('span',
-        { class: 'booking-subject' },
-        `主题：${booking.subject}`
-      )
-    ]
+      h('span', { class: 'booking-user' }, `预约人：${booking.bookingName}`),
+      h('span', { class: 'booking-dept' }, `单位：${booking.deptName}`),
+      h('span', { class: 'booking-subject' }, `主题：${booking.subject}`),
+    ],
  );
 }

@@ -223,7 +230,7 @@ function getRandomBgColor() {
    background: `rgba(${r},${g},${b},0.5)`,
    borderRadius: '6px',
    padding: '60px 10px',
-    transition: 'background 0.3s'
+    transition: 'background 0.3s',
  };
 }

@@ -247,37 +254,41 @@ function getFullRoomList() {
 }

 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,
-      }));
+  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 => {
+  return slots.map((slot) => {
    const row: any = { slot };
-    const cols = viewMode.value === 'date'
-      ? getFullRoomList().map(room => room.name)
-      : weekDates.value;
-    cols.forEach(col => {
+    const cols =
+      viewMode.value === 'date'
+        ? getFullRoomList().map((room) => room.name)
+        : weekDates.value;
+    cols.forEach((col) => {
      row[col] = bookingTable.value[slot]?.[col] || null;
    });
    return row;
@@ -336,10 +347,7 @@ onMounted(() => {
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex !== 'slot'">
-            <div
-              v-if="record[column.dataIndex]"
-              :style="getRandomBgColor()"
-            >
+            <div v-if="record[column.dataIndex]" :style="getRandomBgColor()">
              <div>预约人：{{ record[column.dataIndex].personName }}</div>
              <div>单位：{{ record[column.dataIndex].unitName }}</div>
            </div>
@@ -409,8 +417,8 @@ onMounted(() => {
  }

  :deep(.ant-table-tbody > tr > td:first-child) {
-  padding: 10px;
-  height: 200px;
-}
+    padding: 10px;
+    height: 200px;
+  }
 }
 </style>