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" 
            @change="changePage"
          >
          <template v-slot:content="{ data }">
         <div v-html="data.content"></div>
        </template>
            <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?.createtime }}</span>
          <span>发布人：{{ currentNotice?.author }}</span>
        </div>
        <div class="notice-content" v-html="currentNotice?.content">
        </div>
      </div>
    </lay-layer>
  </lay-container>
</template>

<script setup lang="ts">
import { defineComponent, reactive, ref, onMounted } from "vue";
import { noticeList } from '../../api/module/home';
import { layer } from '@layui/layer-vue';

interface Notice {
  id: number;
  title: string;
  author: string;
  content: string;
  createtime: string;
  status: number;
}

const page = reactive({
  current: 1,
  limit: 10,
  total: 1
});

const columns = [
{
    title: "公告标题",
    width: "180px",
    key: "title"
  },
  {
    title: "作者",
    width: "120px", 
    key: "author"
  },
  {
    title: "公告内容",
    width: "280px",
    key: "content",
    ellipsisTooltip: true
  },
  {
    title: "发布时间",
    width: "180px",
    key: "createtime"
  },
  {
    title: '操作',
    width: '120px',
    customSlot: 'operation',
    key: 'operation',
    align: 'center',
    fixed: 'right'
  }
];

const dataSource = ref<Notice[]>([]);

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

// 获取通知列表
const getNoticeList = () => {
  noticeList({ page: page.current, size: page.limit }).then((res) => {
    if (res.code == 1) {
      dataSource.value = res.data.data.filter((item: Notice) => item.status === 1);
      page.total = res.data.count;
    } else {
      layer.msg(res.msg, { icon: 2 })
    }
  })
}

// 分页变化
const changePage = (ppc) => {
  page.current = ppc.current;
  page.limit = ppc.limit;
  getNoticeList();
}

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

onMounted(() => {
  getNoticeList();
});
</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>