通知公告开发

src/api/notice/notice.js

@@ -5,7 +5,8 @@ const noticeApi = {
   del: 'notice/del',
   get: 'notice/get',
   page: 'notice/pageList',
-  read: 'notice/read'
+  read: 'notice/read',
+  pagePerson: 'notice/pagePersonList'
 }
 
 export function noticeAdd (params) {
@@ -44,3 +45,10 @@ export function noticeRead (params) {
     params: params
   })
 }
+export function noticePagePerson (params) {
+  return request({
+    url: noticeApi.pagePerson,
+    method: 'post',
+    params: params
+  })
+}

src/views/notice/NoticeDetail.vue

@@ -1,17 +1,18 @@
 <template>
-  <a-card :bordered="false">
-    <template slot="extra">
-      <a-button size="small" @click="close">返回</a-button>
-    </template>
-    <div class="page-panel__body">
-        <div class="article">
-          <h1 class="article-title">{{model.title}}</h1>
+  <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>
+              <span>{{ model.createOrgName }}</span>
             </div>
             <div class="article-attr__item">
-              <span>({{model.createTime | moment}})</span>
+              <span>({{ model.createTime | moment }})</span>
             </div>
           </div>
           <div class="article-body">
@@ -19,16 +20,82 @@
           </div>
         </div>
       </div>
-  </a-card>
+    </a-card>
+
+    <a-card v-if="hasPerm('notice:edit')" >
+      <a-tabs default-active-key="1" @change="tabsCallback">
+        <a-tab-pane key="1" tab="已读人员">
+          <s-table
+            ref="table"
+            :columns="columns"
+            :data="loadData"
+            :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="1" tab="未读人员" >
+          <s-table
+            ref="table"
+            :columns="columns"
+            :data="loadData"
+            :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 { noticeGet } from '@/api/notice/notice'
+import { noticeGet, noticePagePerson } from '@/api/notice/notice'
 
 export default {
   data () {
     return {
-      model: {}
+      model: {},
+      queryParam: { noticeId: this.$route.query.id, isRead: 1 },
+      // 表头
+      columns: [
+        {
+          title: '公告标题',
+          dataIndex: 'title'
+        },
+        {
+          title: '发布单位/人',
+          dataIndex: 'createOrgName'
+        },
+        {
+          title: '发布时间',
+          width: 200,
+          dataIndex: 'readTime',
+          key: 'readTime',
+          scopedSlots: { customRender: 'readTime' }
+        },
+        {
+          title: '菜单类型',
+          dataIndex: 'type',
+          scopedSlots: { customRender: 'type' }
+        }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        return noticePagePerson(Object.assign(parameter, this.queryParam)).then((res) => {
+          console.log(res)
+          return res
+        })
+      }
     }
   },
   created () {
@@ -37,24 +104,35 @@ export default {
     this.getDetail(noticeId)
   },
   methods: {
+    // 返回 按钮
+    close () {
+      this.$router.push({ path: '/notice/list', query: {} })
+    },
     getDetail (id) {
       noticeGet({ id: id }).then(res => {
         this.model = res.data
       })
+    },
+    tabsCallback (key) {
+      if (key === '1') {
+        this.queryParam.isRead = 1
+        this.$refs.table.refresh(true)
+      }
+      if (key === '2') {
+        this.queryParam.isRead = 0
+        this.$refs.table.refresh(true)
+      }
     }
   }
 }
 </script>
-<style lang="scss" scoped>
-.article {
-  .article-attr {
-    color: black;
-    text-align: center;
-  }
-
-  .article-title {
-    text-align: center;
-  }
+<style>
+.article-attr {
+  color: black;
+  text-align: center;
 }
 
+.article-title {
+  text-align: center;
+}
 </style>