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

<template>
  <div>
    <a-card :bordered="false">
      <template slot="extra">
        <a-button size="small" @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>
    </a-card>

    <a-card v-if="hasPerm('notice:edit')" style="margin-top: 30px;">
      <a-tabs default-active-key="1" @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.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-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: {},
      queryParam: { noticeId: this.$route.query.id, isRead: 1 },
      readCount: 0,
      unreadCount: 0,
      // 表头
      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) => {
          console.log(res)
          this.readCount = res.total
          return res
        })
      },
      loadData2: parameter => {
        return noticePagePerson(Object.assign(parameter, { noticeId: this.$route.query.id, isRead: 0 })).then((res) => {
          console.log(res)
          this.unreadCount = res.total
          return res
        })
      }
    }
  },
  created () {
    const noticeId = this.$route.query.id
    this.getDetail(noticeId)
    const type = this.$route.query.type
    console.log(type)
    // 查看类型是“我接收的”
    if (type == 2) {
      this.readNotice(noticeId)
    }
  },
  methods: {
    // 返回 按钮
    close () {
      this.$router.push({ path: '/notice/list', query: {} })
    },
    getDetail (id) {
      noticeGet({ id: id }).then(res => {
        this.model = res.data
      })
    },
    readNotice (id) {
      console.log('-------------read')
      console.log(id)
      noticeRead({ id: id }).then(res => {
        //
        console.log(res)
      })
    },
    tabsCallback (key) {
      if (key === '1') {
        this.queryParam.isRead = 1
        this.$refs.table1.refresh(true)
      }
      if (key === '2') {
        this.queryParam.isRead = 0
        this.$refs.table2.refresh(true)
      }
    }
  }
}
</script>
<style>
.article-attr {
  color: black;
  text-align: center;
}

.article-title {
  text-align: center;
}
</style>