welfare-admin/src/views/notice/NoticeDetail.vue

<template>
  <div>
    <a-card :bordered="false">
      <template slot="extra">
        <a-button type="primary" @click="close">返回</a-button>
      </template>
      <div>
        <div>
          <h1 class="article-title">{{ model.title }}</h1>
          <div class="article-attr">
            <div class="article-attr__item">
              <span>{{ model.createOrgName }}</span>
            </div>
            <div class="article-attr__item">
              <span>({{ model.createTime | moment }})</span>
            </div>
          </div>
          <div class="article-body">
            <div v-html="model.content"></div>
          </div>
        </div>

        <div class="down-class" v-show="fileList.length > 0">
          <a-divider orientation="left">附件下载</a-divider>
          <a-upload
            :file-list="fileList"
            :showUploadList="{showDownloadIcon: true, showRemoveIcon: false}">
          </a-upload>
        </div>
      </div>
    </a-card>

    <a-card v-if="hasPerm('notice:edit')" style="margin-top: 30px;">
      <a-tabs @change="tabsCallback">
        <a-tab-pane key="1" tab="已读人员">
          <s-table
            ref="table1"
            :columns="columns1"
            :data="loadData1"
            :rowKey="(record) => record.id"
            :pagination="{ pageSize: 5 }"
            :showSizeChanger="false"
          >
            <template slot="readTime" slot-scope="text, record">
              {{ record.readTime | moment('YYYY-MM-DD HH:mm:ss') }}
            </template>

          </s-table>
        </a-tab-pane>
        <a-tab-pane key="2" tab="未读人员" >
          <s-table
            ref="table2"
            :columns="columns2"
            :data="loadData2"
            :rowKey="(record) => record.personId"
            :pagination="{ pageSize: 5 }"
            :showSizeChanger="false"
          >
            <template slot="readTime" slot-scope="text, record">
              {{ record.readTime | moment('YYYY-MM-DD HH:mm:ss') }}
            </template>
          </s-table>
        </a-tab-pane>
      </a-tabs>

    </a-card>
  </div>
</template>

<script>
import { STable } from '@/components'
import { noticeGet, noticePagePerson, noticeRead } from '@/api/notice/notice'

export default {
  components: {
    STable
  },
  data () {
    return {
      model: {},
      path: '',
      queryParam: { noticeId: this.$route.query.id, isRead: 1 },
      readCount: 0,
      unreadCount: 0,
      noticeRange: 1,
      fileList: [],
      // 表头
      columns1: [
        {
          title: '人员名称',
          dataIndex: 'personName'
        },
        {
          title: '组织名称',
          dataIndex: 'orgName'
        },
        {
          title: '阅览时间',
          width: 200,
          dataIndex: 'readTime',
          key: 'readTime',
          scopedSlots: { customRender: 'readTime' }
        }
      ],
      columns2: [
        {
          title: '人员名称',
          dataIndex: 'personName'
        },
        {
          title: '组织名称',
          dataIndex: 'orgName'
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData1: parameter => {
        return noticePagePerson(Object.assign(parameter, { noticeId: this.$route.query.id, isRead: 1 })).then((res) => {
          this.readCount = res.total
          return res
        })
      },
      loadData2: parameter => {
        return noticePagePerson(Object.assign(parameter, { noticeId: this.$route.query.id, isRead: 0 })).then((res) => {
          this.unreadCount = res.total
          return res
        })
      }
    }
  },
  created () {
    const noticeId = this.$route.query.id
    this.getDetail(noticeId)
    const type = this.$route.query.type
    // 查看类型是“我接收的”
    if (type == 2) {
      this.readNotice(noticeId)
    }
    this.noticeRange = type
  },
  methods: {
    // 返回 按钮
    close () {
      this.$router.push({ path: '/notice/list', query: { noticeRange: this.noticeRange } })
    },
    async getDetail (id) {
      await noticeGet({ id: id }).then(res => {
        this.model = res.data
        const fileArr = JSON.parse(res.data.file)
        if (fileArr.length > 0) {
          this.fileList = fileArr
        }
      })
    },
    readNotice (id) {
      noticeRead({ id: id }).then(res => {
        //
      })
    },
    tabsCallback (key) {
      if (key === '1') {
        this.queryParam.isRead = 1
        this.$refs.table1.refresh(true)
      }
      if (key === '2') {
        this.queryParam.isRead = 0
        this.$nextTick(() => {
          this.$refs.table2.refresh(true)
        })
      }
    },
    download () {
      window.location.href = this.path // 文件下载
    }
  }
}
</script>
<style>
.article-attr {
  color: black;
  text-align: center;
}

.article-title {
  text-align: center;
}
.article-body {
  margin-top: 15px;
}
.down-class {
  width: 50%;
  margin-top: 20px;
}
</style>