labsop_website/src/views/News/RightContent.vue

<!--
 * @Author: wanglj wanglijie@dashoo.cn
 * @Date: 2025-01-09 10:52:48
 * @LastEditors: wanglj
 * @LastEditTime: 2025-01-09 19:55:04
 * @Description: file content
 * @FilePath: \labsop_website\src\components\RightContent.vue
-->
<template>
  <el-card class="right-content">
    <div slot="header"
         class="header">
      <h4>{{ selectTab.label }}</h4>
      <el-breadcrumb separator-class="el-icon-d-arrow-right">
        <el-breadcrumb-item v-for="(item, index) in breadList"
                            :key="index"
                            :to="item.path ? { path: item.path } : null">{{ item.name }} </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--  中心新闻  -->
    <div v-if="selectTab.type == 'newsInfo' && pageType === 'list'"
         class="link-list">
      <ul>
        <li v-for="(item, index) in list"
            :key="index">
          <div @click="getDetails(item)">
            <img src=""
                 alt="" />
            {{ item.newsTitle }}
          </div>
          <span>{{ parseTime(item.updatedTime, "{y}-{m}-{d}") }}</span>
        </li>
      </ul>
      <el-pagination background
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page.sync="pageOptions.pageNum"
                     :page-size.sync="pageOptions.pageSize"
                     :total="pageOptions.total"
                     layout="total, prev, pager, next">
      </el-pagination>
    </div>
    <div class="article" v-else-if="selectTab.type == 'newsInfo' && pageType === 'details'">
      <h4>{{ news.newsTitle }}</h4>
      <div class="snd-title">
        <p>
          <strong>发布人：</strong><span>{{ news.updatedName }}</span>
        </p>
        <p>
          <strong>发布时间：</strong><span>{{ parseTime(news.updatedTime, "{y}-{m}-{d}") }}</span>
        </p>
        <p>
          <strong>来源：</strong><span>{{ news.newsSource }}</span>
        </p>
        <p>
          <strong>点击量：</strong><span>{{ news.clickNum }}</span>
        </p>
      </div>
      <el-divider class="mt6"></el-divider>
      <div class="text"
           v-html="news.newsContent"></div>
    </div>
    <!--  通知公告  -->
    <div v-if="selectTab.type == 'notice' && pageType === 'list'"
         class="link-list">
      <ul>
        <li v-for="(item, index) in list"
            :key="index">
          <div @click="getDetails(item)">
            <img v-if="item.isTop === '10'" src="@/assets/img/isTop.png" alt />
            【{{ item.noticeType === '10' ? '公告' : '通知' }}】{{ item.noticeTitle }}
          </div>
          <span>{{ parseTime(item.noticeTime, "{y}-{m}-{d}") }}</span>
        </li>
      </ul>
      <el-pagination background
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page.sync="pageOptions.pageNum"
                     :page-size.sync="pageOptions.pageSize"
                     :total="pageOptions.total"
                     layout="total, prev, pager, next">
      </el-pagination>
    </div>
    <div class="article" v-else-if="selectTab.type == 'notice' && pageType === 'details'">
      <h4>{{ notice.noticeTitle }}</h4>
      <div class="snd-title">
        <p>
          <strong>发布人：</strong><span>{{ notice.createdName }}</span>
        </p>
        <p>
          <strong>发布时间：</strong><span>{{ parseTime(notice.noticeTime, "{y}-{m}-{d}") }}</span>
        </p>
      </div>
      <el-divider class="mt6"></el-divider>
      <div class="text"
           v-html="notice.noticeContent"></div>
      <div slot="footer" class="card-footer">
        附件【
        <el-link type="primary"
                 class="mr5"
                 target="_blank"
                 v-for="item in notice.sysNoticeFile"
                 :key="item.id"
                 :href="item.fileUrl">{{item.fileName}}
        </el-link>
        】
      </div>
    </div>
  </el-card>
</template>

<script>
import to from "await-to-js";
import {
  getNewsInformationList,
  getNewsInformation,
  viewNewsInformation,
  getNoticeList,
  getNoticeEntity,
} from "@/api/news";
import { parseTime } from "@/utils/ruoyi";
export default {
  name: "NewsRightContent",
  props: {
    selectTab: {
      type: Object,
      default: () => {},
    },
    breadList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      pageOptions: {
        pageSize: 10,
        pageNum: 1,
        total: 100,
      },
      list: [],
      pageType: 'list', // list details
      news: {
        id: 0,
        newsTitle: "平台简介",
        newsContent: 'www.baidu.com',
        newsSource: '.docx',
        clickNum: 100,
        remark: "<strong>文章内容</strong>",
      },
      notice: {
        id: 100011,
        isTop: "10",
        noticeType: "10",
        fileType: "",
        imageUrl: "http://192.168.0.218:9390/4,0d84095983bbd6",
        noticeContent: "<p>1</p>",
        noticeLevel: "10",
        noticeStatus: "10",
        noticeTime: "2024-11-28 11:46:48",
        noticeTitle: "2",
        platId: 100001,
        platName: "仪器共享",
        readTime: "2024-11-28 11:21:09",
        redirectUrl: "",
        createdName: '',
      },
    };
  },
  watch: {
    selectTab() {
      this.init();
    },
  },
  methods: {
    parseTime,
    async init() {
      if (this.selectTab.type == "newsInfo") this.getNewsInfoList()
      else if (this.selectTab.type == "notice") this.getNoticeList()
    },
    handleSizeChange () {
      this.init()
    },
    handleCurrentChange () {
      this.init()
    },
    // 获取详情
    async getDetails(item) {
      this.pageType = "details"
      if (this.selectTab.type == "newsInfo") {
        const [err, res] = await to(getNewsInformation({ id: item.id }))
        if (err) return;
        // 修改点击量
        const [e] = await to(viewNewsInformation({ id: item.id }))
        if (e) return
        this.news = res.data
      } else if (this.selectTab.type == "notice") {
        const [err, res] = await to(getNoticeEntity({ id: item.id }))
        if (err) return;
        this.notice = res.data
      }
    },
    // 获取中心新闻
    async getNewsInfoList() {
      this.pageType = 'list'
      let params = {
        pageNum: this.pageOptions.pageNum,
        pageSize: this.pageOptions.pageSize,
      }
      const [err, res] = await to(getNewsInformationList(params));
      if (err) return;
      this.list = res.data.list
      this.pageOptions.total = res.data.total
    },
    // 获取通知公告
    async getNoticeList() {
      this.pageType = 'list'
      let params = {
        pageNum: this.pageOptions.pageNum,
        pageSize: this.pageOptions.pageSize,
      }
      const [err, res] = await to(getNoticeList(params));
      if (err) return;
      this.list = res.data.list
      this.pageOptions.total = res.data.total
    },
  },
};
</script>

<style lang="scss" scoped>
.right-content {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  min-height: 550px;
  box-shadow: 0px 3px 6px 1px rgba(1, 64, 100, 0.16);
  ::v-deep .el-card__body {
    height: calc(100% - 100px);
  }
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    h4 {
      font-weight: bold;
      font-size: 18px;
      color: #2c405e;
    }
  }
  .article {
    h4 {
      text-align: center;
      font-weight: bold;
      font-size: 24px;
      color: #386afe;
    }
    .snd-title {
      font-weight: 400;
      font-size: 14px;
      color: #565656;
      display: flex;
      justify-content: center;
      p {
        margin: 8px;
      }
    }
    .text {
      height: 250px + 50px;
    }
    .card-footer {
      text-align: left; /* 根据需要调整对齐方式 */
      padding: 10px; /* 根据需要调整内边距 */
    }
  }
  .link-list {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    ul {
      flex: 1;
      li {
        display: flex;
        justify-content: space-between;
        padding: 12px;
        border-bottom: 1px dashed #ebf1f6;
        cursor: pointer;
        transition: all 0.3s;
        &:hover {
          background-color: #e7f1ff;
        }
        div {
          font-weight: 400;
          font-size: 16px;
          color: #585858;
        }
        span {
          font-weight: 400;
          font-size: 16px;
          color: #b5c1d8;
        }
      }
    }
  }
}
</style>