yifengyide/src/views/home/index.vue

<template>
  <lay-container :fluid="true" style="padding: 10px">
    <lay-row :space="10">
      <lay-col :md="24" :sm="24" :xs="24">
        <lay-card>
          <template #title>
            <div style="font-size: 16px; font-weight: bold;">通知公告</div>
          </template>
          <lay-table :page="page" size="lg" height="600px" :columns="columns" :data-source="dataSource" @row-click="handleRowClick">
            <template #operation="{ data }">
              <span style="color: #00A394;cursor: pointer"  @click.stop="handleViewDetail(data)">查看详情</span>
            </template>
          </lay-table>
        </lay-card>
      </lay-col>
    </lay-row>

    <!-- 详情弹窗 -->
    <lay-layer v-model="showDetail" :type="4" :title="null" :area="['700px', '100%']">
      <div class="notice-detail">
        <h2>{{ currentNotice?.title }}</h2>
        <div class="notice-info">
          <span>发布时间：{{ currentNotice?.publishTime }}</span>
          <span>发布部门：{{ currentNotice?.department }}</span>
        </div>
        <div class="notice-content">
          {{ currentNotice?.content }}
        </div>
      </div>
    </lay-layer>
  </lay-container>
</template>

<script setup lang="ts">
import { defineComponent, reactive, ref } from "vue";

interface Notice {
  id: number;
  title: string;
  department: string;
  publishTime: string;
  content: string;
}
// 修改分页参数的定义方式
const page = reactive({
    current: 1,
    limit: 10,
    total: 1
})
    // 表格列定义
    const columns = [
      {
        title: "标题",
        key: "title",
        width: "40%"
      },
      {
        title: "发布部门",
        key: "department",
      },
      {
        title: "发布时间",
        key: "publishTime"
      },
      {
        title: "操作",
        key: "operation",
        width: "120px",
        customSlot: "operation"
      }
    ];

    // 模拟数据
    const dataSource = ref<Notice[]>([
      {
        id: 1,
        title: "关于开展2024年第二季度医德医风考核的通知",
        department: "医务科",
        publishTime: "2024-03-15",
        content: "根据医院年度工作计划，定于2024年第二季度开展医德医风考核工作。请各科室做好相关准备工作，具体考核细则详见附件。考核时间：2024年4月1日至4月15日..."
      },
      {
        id: 2,
        title: "医院感染防控培训通知",
        department: "感染管理科",
        publishTime: "2024-03-14",
        content: "为进一步加强医院感染防控工作，提高全院医务人员防控意识和操作规范性，定于2024年3月20日下午14:00在第一会议室开展感染防控培训..."
      },
      {
        id: 3,
        title: "关于调整门诊工作时间的通知",
        department: "院办公室",
        publishTime: "2024-03-13",
        content: "为更好地服务患者，经医院研究决定，自2024年4月1日起调整门诊工作时间。调整后的工作时间为：周一至周五 8:00-17:30，周六、周日 8:30-12:00..."
      }
    ]);

    // 控制详情弹窗显示
    const showDetail = ref(false);
    // 当前查看的通知
    const currentNotice = ref<Notice | null>(null);
    // 弹窗标题
    const detailTitle = ref('');

    // 点击行查看详情
    const handleViewDetail = (row: Notice) => {
      currentNotice.value = row;
      detailTitle.value = row.title;
      showDetail.value = true;
    };

    // 修改行点击事件
    const handleRowClick = (row: Notice) => {
      handleViewDetail(row);
    };
</script>

<style lang="less" scoped>
#main {
  width: 100%;
  height: 410px;
}

.leaving-messages {
  li {
    position: relative;
    padding: 10px 0;
    border-bottom: 1px solid #eee;

    h3 {
      padding-bottom: 5px;
      font-weight: 700;
    }

    p {
      font-size: 14px;
      padding-bottom: 10px;
    }

    >span {
      color: #999;
    }
  }
}

.target {
  width: 100%;
  height: 440px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.target-title {
  margin: 20px;
}

.statistics {
  font-size: 24px !important;
}

.statistics-body {
  padding: 14px 0;
}

.notice-detail {
  padding: 20px;

  h2 {
    text-align: center;
    margin-bottom: 20px;
  }

  .notice-info {
    display: flex;
    justify-content: space-between;
    color: #666;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }

  .notice-content {
    line-height: 1.8;
    text-align: justify;
  }
}
</style>