labsop_website/src/components/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 == 'institution' && pageType === 'list'"
         class="link-list">
      <ul>
        <li v-for="(item, index) in list"
            :key="index">
          <div @click="getDetails(item)">
            <img src=""
                 alt="" />
            {{ item.docName }}
          </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 == 'institution' && pageType === 'details'">
      <h4>{{ document.docName }}</h4>
      <div class="snd-title">
        <p>
          <strong>发布人：</strong><span>{{ document.updatedName }}</span>
        </p>
        <p>
          <strong>发布时间：</strong><span>{{ parseTime(document.updatedTime, "{y}-{m}-{d}") }}</span>
        </p>
        <p>
          <strong>点击量：</strong><span>{{ document.clickCount }}</span>
        </p>
      </div>
      <el-divider class="mt6"></el-divider>
      <div class="text"
           v-html="document.remark"></div>
      <div slot="footer" class="card-footer">
        附件【
        <el-link type="primary" @click="toDownload(document)">{{ document.docUrlName }}</el-link>
        】已下载{{document.downloadCount}}次
      </div>
    </div>
    <div class="article"
         v-else-if="selectTab.type == 'intro'">
      <h4>{{ article.centerName }}</h4>
      <div class="snd-title">
        <p>
          <strong>发布人：</strong><span>{{ article.updatedName }}</span>
        </p>
        <p>
          <strong>发布时间：</strong><span>{{ article.updatedTime }}</span>
        </p>
        <p>
          <strong>点击量：</strong><span>{{ article.clickNum }}</span>
        </p>
      </div>
      <el-divider class="mt6"></el-divider>
      <div class="text"
           v-html="article.centerDesc"></div>
    </div>
    <div class="article"
         v-else-if="selectTab.type == 'staff'">
      <h4>{{ article.staffName }}</h4>
      <div class="text"
           v-html="article.staffDesc"></div>
    </div>
  </el-card>
</template>

<script>
import to from "await-to-js";
import {
  getCenterIntroduction,
  viewCenterIntroduction,
  getCenterStaff,
  viewCenterStaff,
  getCenterPlatformList
} from "@/api/introduce";
import {
  getEntityByClassName,
  updateClickCountById,
  updateDownloadCountById,
} from "@/api/document";
import {parseTime} from "@/utils/ruoyi";
export default {
  name: "RightContent",
  props: {
    selectTab: {
      type: Object,
      default: () => {},
    },
    breadList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      article: {
        title: "平台简介",
        createUser: "张佳乐",
        createTime: "2024-04-28 14:13:53",
        clickCount: 222,
        content: "<strong>文章内容</strong>",
      },
      pageOptions: {
        pageSize: 10,
        pageNum: 1,
        total: 100,
      },
      list: [],
      pageType: 'list', // list details
      document: {
        id: 0,
        docName: "平台简介",
        docUrl: 'www.baidu.com',
        docUrlName: '.docx',
        docClassName: "A类",
        updatedName: "张佳乐",
        updatedTime: "2024-04-28 14:13:53",
        clickCount: 100,
        downloadCount: 100,
        remark: "<strong>文章内容</strong>",
      },
    };
  },
  watch: {
    selectTab() {
      this.init();
    },
  },
  methods: {
    parseTime,
    async init() {
      if (this.selectTab.type == "intro") this.getIntro();
      else if (this.selectTab.type == "staff") this.getStaff();
      else if (this.selectTab.type == "institution") this.getInstitution();
    },
    handleSizeChange () {
      this.init()
    },
    handleCurrentChange () {
      this.init()
    },
    // 获取平台简介
    async getIntro() {
      const [err, res] = await to(getCenterIntroduction());
      if (err) return;
      this.article = res.data;
      viewCenterIntroduction();
    },
    // 获取人员
    async getStaff() {
      const [err, res] = await to(getCenterStaff());
      if (err) return;
      this.article = res.data;
      viewCenterStaff();
    },
    // 获取规章制度
    async getInstitution() {
      this.pageType = 'list'
      let params = {
        docClassName: '规章制度',
        pageNum: this.pageOptions.pageNum,
        pageSize: this.pageOptions.pageSize,
      }
      const [err, res] = await to(getEntityByClassName(params));
      if (err) return;
      this.list = res.data.list
      this.pageOptions.total = res.data.total
    },
    // 获取详情
    async getDetails(item) {
      this.pageType = "details"
      // 更新点击量
      const [err, res] = await to(updateClickCountById({ id: item.id }))
      if (err) return;
      this.document = res.data
    },
    // 下载
    async toDownload(item) {
      const [err, res] = await to(updateDownloadCountById({ id: item.id }))
      if (err) return;
      this.document = res.data
      window.open(res.data.docUrl, '_blank')
    },
  },
};
</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;
      }
    }
  }
  .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>