feat: 会议室查看

2025-07-09 18:18:48 +08:00
parent 38012ccdb1
commit d8174111c2
26 changed files with 659 additions and 162 deletions
--- a/apps/web-antd/src/views/property/clean/cleanOrders/clean-modal.vue
+++ b/apps/web-antd/src/views/property/clean/cleanOrders/clean-modal.vue
@@ -39,6 +39,8 @@ const totalSumPeices = computed(() => {

 const isUpdate = ref(false);
 const isReadonly = ref(false);
+const isAudit = ref(false);
+const isRefund = ref(false);
 const title = computed(() => {
  return isUpdate.value ? $t('pages.common.edit') : isReadonly.value ? '详情' : $t('pages.common.add');
 });
@@ -121,12 +123,16 @@ const [BasicModal, modalApi] = useVbenModal({
    // 查询服务地址树形结构
    setupCommunitySelect()
    modalApi.modalLoading(true);
-    const { id, readonly } = modalApi.getData() as {
+    const { id, readonly,audit,refund } = modalApi.getData() as {
      id?: string;
      readonly?: boolean;
+      audit?: boolean;
+      refund?: boolean;
    };
    editCleanOrderId.value = id || '';
    isReadonly.value = !!readonly;
+    isAudit.value = !!audit;
+    isRefund.value = !!refund;
    //判断是否是编辑状态需要先判断是否是只读状态
    if(isReadonly.value){
      isUpdate.value = false;
@@ -139,6 +145,14 @@ const [BasicModal, modalApi] = useVbenModal({
      if (record.endTime) record.endTime = dayjs(record.endTime);
      editUnitId.value = record.unitId || '';
      detailTable.value = record.cleanList || [];
+      for(const item of record.relationList){
+        for(let i = 0; i < detailTable.value.length; i++){
+          if(item.cleanId === detailTable.value[i].id){
+            detailTable.value[i].area = item.areas;
+            detailTable.value[i].sumPeices = item.sumPrice;
+          }
+        }
+      }
      await formApi.setValues(record);
    }
    await markInitialized();
@@ -275,14 +289,10 @@ function handleAddDetail() {
 }
 // 添加订单服务详情
 function handleDetailReload(data: any) {
-  console.log(data,'afawed');
-  
  detailTable.value.push(data);
 }
 // 编辑订单服务详情
 function handleEditDetailReload(data: any) {
-  console.log(data,'1203342423');
-  
  detailTable.value[data.index] = data;

 }
@@ -326,7 +336,8 @@ async function handleConfirm() {
    data.unit = unitObj ? unitObj.name : data.unit || '';
    data.name = cleanObj ? cleanObj.name : data.name || '';
    data.unitId = unitObj ? unitObj.id : isUpdate.value ? editUnitId.value : '';
-    data.sumPeices = parseInt(totalSumPeices.value, 10);
+    data.sumPeices = Number(totalSumPeices.value)
+    // data.sumPeices = parseInt(totalSumPeices.value, 10);
    // 组装 cleanIds
    // data.cleanIds = detailTable.value.map((item: any) => item.id);
    data.cleanList = detailTable.value;
@@ -382,6 +393,46 @@ async function setupCommunitySelect() {
    },
  ]);
 }
+async function handleAudit(params: any) {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    // 单位数据缓存
+    if (unitListData.length === 0) {
+      const res = await resident_unitList();
+      unitListData = res.rows || [];
+    }
+    // 劳务数据缓存 cleanListData 已有
+    // 查找label
+    const unitObj = unitListData.find((item) => item.id === data.unitId);
+    const cleanObj = cleanListData.find((item) => item.id === data.name);
+    data.unit = unitObj ? unitObj.name : data.unit || '';
+    data.name = cleanObj ? cleanObj.name : data.name || '';
+    data.unitId = unitObj ? unitObj.id : isUpdate.value ? editUnitId.value : '';
+    data.sumPeices = Number(totalSumPeices.value)
+    data.starTime = dayjs(data.starTime).format('YYYY-MM-DD HH:mm:ss');
+    data.endTime = dayjs(data.endTime).format('YYYY-MM-DD HH:mm:ss');
+    // data.sumPeices = parseInt(totalSumPeices.value, 10);
+    // 组装 cleanIds
+    // data.cleanIds = detailTable.value.map((item: any) => item.id);
+    data.cleanList = detailTable.value;
+    if(params.isRefund){
+      data.isUnbooking = 1;
+    } else if(params.isAudit){
+      data.state = 1;
+    }else{
+      data.state = 2;
+    }
+    console.log(data,'data');
+    // 0：未审核 1：审核通过 2：审核不通过
+    await clean_orderUpdate({...data,id:editCleanOrderId.value})
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+}
 </script>

 <template>
@@ -422,7 +473,16 @@ async function setupCommunitySelect() {
      <div>费用合计：{{ totalSumPeices }}元</div>
    </div>
    <CleanDetailModal @reload="handleDetailReload" @editReload="handleEditDetailReload"/>
-  </BasicModal>
+    <template #footer v-if="isAudit">
+      <a-button @click="modalApi.close()">取消</a-button>
+      <a-button type="primary" @click="handleAudit({isAudit:true})">审核通过</a-button>
+      <a-button danger @click="handleAudit({isAudit:false})">审核不通过</a-button>
+    </template>
+    <template #footer v-if="isRefund">
+      <a-button @click="modalApi.close()">取消</a-button>
+      <a-button type="primary" @click="handleAudit({isRefund:true})">退定</a-button>
+    </template>
+ </BasicModal>
 </template>

 <style scoped>
--- a/apps/web-antd/src/views/property/clean/cleanOrders/index.vue
+++ b/apps/web-antd/src/views/property/clean/cleanOrders/index.vue
@@ -127,10 +127,26 @@ function handleDownloadExcel() {
  );
 }

-async function handleView(row: Required<CleanForm>) {
+ function handleView(row: Required<CleanForm>) {
  modalApi.setData({ id: row.id, readonly: true });
  modalApi.open();
 }
+
+function handleAudit(row:any) {
+  // 审核逻辑
+  // TODO: 实现审核功能
+  console.log('审核', row);
+  modalApi.setData({ id: row.id, readonly: true,audit:true });
+  modalApi.open();
+}
+
+function handleRefund(row:any) {
+  // 退定逻辑
+  // TODO: 实现退定功能
+  console.log('退定', row);
+  modalApi.setData({ id: row.id, readonly: true,refund:true });
+  modalApi.open();
+}
 </script>

 <template>
@@ -170,26 +186,13 @@ async function handleView(row: Required<CleanForm>) {
      <template #action="{ row }">
        <Space>
          <ghost-button @click.stop="handleView(row)"> 查看 </ghost-button>
-          <ghost-button
-            v-access:code="['property:clean:edit']"
-            @click.stop="handleEdit(row)"
-          >
-            {{ $t('pages.common.edit') }}
-          </ghost-button>
-          <Popconfirm
-            :get-popup-container="getVxePopupContainer"
-            placement="left"
-            title="确认删除？"
-            @confirm="handleDelete(row)"
-          >
-            <ghost-button
-              danger
-              v-access:code="['property:clean:remove']"
-              @click.stop=""
-            >
-              {{ $t('pages.common.delete') }}
-            </ghost-button>
-          </Popconfirm>
+          <template v-if="row.state === 0">
+            <ghost-button type="primary" @click.stop="handleAudit(row)">审核</ghost-button>
+          </template>
+          <template v-else>
+            <ghost-button danger @click.stop="handleRefund(row)" v-if="row.isUnbooking === 0">退定</ghost-button>
+            <ghost-button disabled v-else>已退定</ghost-button>
+          </template>
        </Space>
      </template>
    </BasicTable>
--- a/apps/web-antd/src/views/property/clean_order/clean_order-modal.vue
+++ b/apps/web-antd/src/views/property/clean_order/clean_order-modal.vue
@@ -53,7 +53,6 @@ const [BasicModal, modalApi] = useVbenModal({
      return null;
    }
    modalApi.modalLoading(true);
-
    const { id } = modalApi.getData() as { id?: number | string };
    isUpdate.value = !!id;

--- a/apps/web-antd/src/views/property/greenPlantRentalManagement/reportStatistics/index.vue
+++ b/apps/web-antd/src/views/property/greenPlantRentalManagement/reportStatistics/index.vue
@@ -5,7 +5,8 @@ import { onMounted, ref } from 'vue';

 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

-import { Button } from 'ant-design-vue';
+import { Button,Radio } from 'ant-design-vue';
+import type { RadioChangeEvent } from 'ant-design-vue';

 import { statisticsByTime,
  countByRentalType,
@@ -13,6 +14,7 @@ import { statisticsByTime,
  countRenewRate,
  countByCusScore,
  countOrderAndAmount,
+  countCustomers,
  countAchievedRate,
  countAchieved
 } from '#/api/property/reportStatistics';
@@ -42,17 +44,23 @@ const timeUnit = ref<number>(1)
 const countOrderAndAmountDataAmount = ref<number>(0);
 const countOrderAndAmountDataOrder = ref<number>(0);
 const countAchievedRateData = ref<any>(null);
+const countCustomersData = ref<any>(null);
+const xAxisData = ref<any[]>([]);
+const seriesData = ref<any[]>([]);
 onMounted(async () => {
    // 任务数
  const countOrderAndAmountData= await countOrderAndAmount();
  countOrderAndAmountDataAmount.value = countOrderAndAmountData.amount;
  countOrderAndAmountDataOrder.value = countOrderAndAmountData.num;
+  //活跃用户
+  const countCustomersDataRes: any = await countCustomers();
+  countCustomersData.value = countCustomersDataRes.count;
  const countAchievedRateDataRes: any = await countAchievedRate();
  countAchievedRateData.value = countAchievedRateDataRes.rate;
  // 查询订单数量趋势
  const res = await statisticsByTime({ timeUnit: timeUnit.value });
-  const xAxisData = res?.time ?? [];
-  const seriesData = res?.counts ?? [];
+  xAxisData.value = res?.time ?? [];
+  seriesData.value = res?.counts ?? [];
  // 租赁金额分布
  const data = await countByRentalType();//返回的内容是amount: 1, type: "单点"
  // 转换字段名为value和name
@@ -76,7 +84,7 @@ onMounted(async () => {
    tooltip: { trigger: 'axis' },
    xAxis: {
      type: 'category',
-      data: xAxisData,
+      data: xAxisData.value,
      boundaryGap: false,
    },
    yAxis: { type: 'value' },
@@ -84,7 +92,7 @@ onMounted(async () => {
      {
        name: '订单数',
        type: 'line',
-        data: seriesData ||[],
+        data: seriesData.value ||[],
        smooth: true,
      },
    ],
@@ -229,13 +237,29 @@ onMounted(async () => {
    ],
  });
 });
-const nodeOptions = [
-  { label: '日', value: 1 },
-  { label: '周', value: 2 },
-  { label: '月', value: 3 },
-];
-function handleAssociationChange(e: any) {
+// 切换视图模式
+async function handleViewModeChange(e: RadioChangeEvent): Promise<void> {
  timeUnit.value = e.target.value;
+  const res = await statisticsByTime({ timeUnit: timeUnit.value });
+  xAxisData.value = res?.time ?? [];
+  seriesData.value = res?.counts ?? [];
+  renderEcharts({
+    tooltip: { trigger: 'axis' },
+    xAxis: {
+      type: 'category',
+      data: xAxisData.value,
+      boundaryGap: false,
+    },
+    yAxis: { type: 'value' },
+    series: [
+      {
+        name: '订单数',
+        type: 'line',
+        data: seriesData.value ||[],
+        smooth: true,
+      },
+    ],
+  });
 }
 function formatNumber(num: number | string) {
  if (!num && num !== 0) {
@@ -277,6 +301,10 @@ function formatNumber(num: number | string) {
             <div class="title">累计租赁金额</div>
            <div class="number">{{ formatNumber(countOrderAndAmountDataOrder) }}</div>
          </div>
+          <div class="box">
+             <div class="title">当前活跃客户数</div>
+            <div class="number">{{ formatNumber(countCustomersData) }}</div>
+          </div>
          <div class="box">
             <div class="title">绿植养护完成率</div>
            <div class="number">{{ countAchievedRateData }}</div>
@@ -287,13 +315,11 @@ function formatNumber(num: number | string) {
            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">
              <span style="font-size: 18px; font-weight: bold;">订单数量趋势</span>
              <div>
-                <RadioGroup
-                  v-model:value="timeUnit"
-                  :options="nodeOptions"
-                  button-style="solid"
-                  option-type="button"
-                  @change="handleAssociationChange"
-                />
+                <Radio.Group v-model:value="timeUnit" @change="handleViewModeChange">
+                  <Radio.Button value=1>日</Radio.Button>
+                  <Radio.Button value=2>周</Radio.Button>
+                  <Radio.Button value=3>月</Radio.Button>
+                </Radio.Group>
              </div>
            </div>
            <EchartsUI
@@ -357,7 +383,6 @@ function formatNumber(num: number | string) {
  .box {
    height: 100%;
    margin: 40px;
-
    .title {
      display: flex;
      justify-content: space-between;
@@ -384,7 +409,8 @@ function formatNumber(num: number | string) {
        display: flex;
        justify-content: space-between;
        .box{
-          width: 300px;
+          width: 250px;
+          max-width: 300px;
          height: 120px;
          background-color: #fff;
          border-radius: 8px;
--- a/apps/web-antd/src/views/property/roomBooking/conferenceView/index.vue
+++ b/apps/web-antd/src/views/property/roomBooking/conferenceView/index.vue
@@ -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>