我得消息

src/api/system/new.js

@@ -10,12 +10,21 @@ export function FetchMySystemNotice(params) {
 }
 
 // 通知详情
-export function FetchInitNoticeDetails(params) {
+export function FetchInitNoticeDetails(data) {
   return request({
     url: 'api/news/initNoticeDetails',
-    method: 'get',
-    params
+    method: 'post',
+    data
+  })
+}
+
+// 全部已读
+export function FetchReadedAll(data) {
+  return request({
+    url: 'api/news/readedAll',
+    method: 'post',
+    data
   })
 }
 
-export default { FetchMySystemNotice, FetchInitNoticeDetails }
+export default { FetchMySystemNotice, FetchInitNoticeDetails, FetchReadedAll }

src/views/system/user/messageCenter/index.vue

@@ -8,20 +8,27 @@
     </ul>
     <div class="process-right">
       <div class="head-container">
-        <el-input v-model="search" clearable size="small" placeholder="输入标题关键字搜索" prefix-icon="el-icon-search" class="filter-item" style="width: 225px;" />
+        <el-input v-model="search" clearable size="small" placeholder="输入标题关键字搜索" prefix-icon="el-icon-search" class="filter-item" style="width: 225px;" @clear="handleSearch" @keyup.enter.native="handleSearch" />
         <date-range-picker v-model="blurryTime" class="date-item" />
-        <el-button icon="el-icon-search" size="mini" class="user-search-btn">搜索</el-button>
+        <el-button icon="el-icon-search" size="mini" class="user-search-btn" @click="handleSearch">搜索</el-button>
         <el-button class="iconfont icon-quanbuyidu" size="mini" @click="handleAllRead">全部已读</el-button>
+        <el-select v-model="unread" placeholder="请选择" style="width: 90px; margin-left: 10px;" @change="handleSearch">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
       </div>
-      <!-- <MessageList :list-index="listIndex" :items="items" /> -->
       <div v-loading="loading" class="message-center-list">
-        <div v-if="hasMore" class="more-btn" @click="loadMore"><i class="iconfont icon-jiazaigengduo" />点击加载更多</div>
+        <div v-if="hasMore && loading===false" class="more-btn" @click="loadMore"><i class="iconfont icon-jiazaigengduo" />点击加载更多</div>
         <div v-for="(item,index) in items" :key="index" class="message-item" @click="handleDetail(item)">
           <div class="message-date">{{ item.createTime | parseTime }}</div>
           <div class="message-cont">
             <div class="message-cont-info">
               <span :class="['message-type-title',{'type-title1': listIndex === 0 },{'type-title2': listIndex === 1 },{'type-title3': listIndex === 2 },{'type-title4': listIndex === 3 }]">{{ titleType }}</span>
-              <span class="is-read-tip">{{ item.isRead === 0 ? '未读' : '已读' }}</span>
+              <span :class="[ item.isRead === 0 ? 'unread-tip' : 'unread-tip read-tip']">{{ item.isRead === 0 ? '未读' : '已读' }}</span>
               <div class="message-title">{{ item.noticeTitle }}</div>
               <ul class="message-list-info">
                 <li>创建人：{{ item.createBy }}</li>
@@ -31,8 +38,9 @@
             <div class="message-more">查看详情<i class="iconfont icon-chakan" /></div>
           </div>
         </div>
+        <el-empty v-if="items.length === 0 && loading===false" :image-size="200" />
 
-        <el-dialog :visible.sync="messageVisible" :modal-append-to-body="false" :close-on-click-modal="false" append-to-body title="消息详情">
+        <el-dialog :visible.sync="messageVisible" :modal-append-to-body="false" :close-on-click-modal="false" append-to-body title="消息详情" @closed="closeDialog">
           <div class="setting-dialog">
             <div class="message-detail">
               <span :class="['message-type-title',{'type-title1': listIndex === 0 },{'type-title2': listIndex === 1 },{'type-title3': listIndex === 2 },{'type-title4': listIndex === 3 }]">{{ titleType }}</span>
@@ -42,7 +50,7 @@
             </div>
             <div slot="footer" class="dialog-footer">
               <el-button v-if="detailInfo.noticeType === 1" @click="dealWithCont">流程处理</el-button>
-              <el-button type="primary" @click="messageVisible=false">确定</el-button>
+              <el-button type="primary" @click="closeDialog">确定</el-button>
             </div>
           </div>
         </el-dialog>
@@ -56,42 +64,39 @@
 
 <script>
 import DateRangePicker from '@/components/DateRangePicker'
-import { FetchMySystemNotice, FetchInitNoticeDetails } from '@/api/system/new'
-import { getUserNotice, isread } from '@/api/system/logs'
-// import CRUD, { presenter, header, crud } from '@crud/crud'
-// import MessageList from './module/list.vue'
+import { FetchMySystemNotice, FetchInitNoticeDetails, FetchReadedAll } from '@/api/system/new'
 import detail from '../processCenter/module/form'
 
 export default {
   name: 'MessageCenter',
   inject: ['reload'],
   components: { DateRangePicker, detail },
-  // mixins: [presenter(), crud(), header()],
-  // cruds() {
-  //   return CRUD({
-  //     url: 'api/news/mySystemNotice',
-  //     sort: ['createTime,desc'],
-  //     optShow: {}
-  //   })
-  // },
   data() {
     return {
       selections: [],
       blurryTime: [],
       search: null,
+      unread: null,
+      options: [{
+        value: 0,
+        label: '未读'
+      }, {
+        value: null,
+        label: '全部'
+      }],
       listIndex: 0,
       titleType: '系统通知',
       items: [],
       page: {
         total: 0,
-        size: 2,
-        page: 10,
+        size: 10,
+        page: 0,
         totalPages: 0
       },
       loading: false,
       messageVisible: false,
       detailInfo: {},
-      opinionTxt: '',
+      currentMessage: null,
       hasMore: true // 是否还有更多数据
     }
   },
@@ -103,25 +108,23 @@ export default {
       this.listIndex = index
       this.getIndex()
     },
-    getParams() {
-      const params = {
-        search: this.search,
-        page: this.page.page - 1,
-        size: this.page.size,
-        startTime: this.blurryTime[0],
-        endTime: this.blurryTime[1],
-        sort: 'createTime,desc'
-      }
-      return params
+    handleSearch() {
+      this.page.page = 0
+      this.page.totalPages = 0
+      this.items = []
+      this.loadData()
     },
     getListMessage() {
-      this.loading = true
-      FetchMySystemNotice(this.getParams()).then(res => {
+      const params = {
+        'search': this.search,
+        'page': this.page.page,
+        'size': this.page.size,
+        'unread': this.unread,
+        'startTime': this.blurryTime[0],
+        'endTime': this.blurryTime[1]
+      }
+      FetchMySystemNotice(params).then(res => {
         const listData = res.content
-        // table.forEach(item => {
-        //   item.pushUserName = item.noticeUsers[0].pushUserName
-        //   item.isRead = item.noticeUsers[0].isRead
-        // })
         if (listData.length === 0) {
           this.loading = false
         } else {
@@ -129,8 +132,12 @@ export default {
         }
         this.page.total = res.totalElements
         this.page.totalPages = res.totalPages
-        // this.items = this.items.concat(table)
         this.items = [...listData, ...this.items]
+        if (this.page.page >= this.page.totalPages) {
+          this.hasMore = false
+        } else {
+          this.hasMore = true
+        }
         this.loading = false
       })
     },
@@ -139,10 +146,6 @@ export default {
       setTimeout(() => {
         this.getListMessage()
         this.page.page++
-        this.loading = false
-        if (this.page.page > this.page.totalPages) {
-          this.hasMore = false
-        }
       }, 1000)
     },
     loadMore() {
@@ -152,28 +155,22 @@ export default {
       this.loadData()
     },
     handleDetail(item) {
-      switch (item.noticaType) {
-        case 0:
-          this.opinionTxt = '这是一条系统通知'
-          break
-        case 1:
-          this.opinionTxt = '这是一条有流程达到提醒'
-          break
-        case 2:
-          this.opinionTxt = '这是一条流程完成提醒'
-          break
-        case 3:
-          this.opinionTxt = '这是一条赋权到期提醒'
-          break
+      this.currentMessage = this.items.find(i => i.noticeId === item.noticeId)
+      const params = {
+        'newsType': item.noticeType,
+        'noticeId': item.noticeId
       }
-      FetchInitNoticeDetails({ 'noticeId': item.noticeId }).then((res) => {
-        console.log(res)
+      FetchInitNoticeDetails(params).then((res) => {
         this.detailInfo = res
         this.messageVisible = true
       }).catch(err => {
         console.log(err)
       })
     },
+    closeDialog() {
+      this.messageVisible = false
+      this.currentMessage.isRead = 1
+    },
     getIndex() {
       switch (this.listIndex) {
         case 0:
@@ -194,35 +191,28 @@ export default {
           break
       }
     },
-
-    // 标记已读
-    handleRead() {
-      isread(this.getUserMsgId(this.selections)).then(res => {
-        if (res) {
-          // this.getListMessage()
-          this.reload()
-        }
-      })
-    },
     // 全部标记已读
     async handleAllRead() {
-      const params = {
-        page: 0,
-        size: 10,
-        sort: 'createTime,desc'
-      }
-      const list = []
-      const allList = await this.getAllNoRead(params, list)
-      isread(this.getUserMsgId(allList)).then(res => {
+      // const params = {
+      //   page: 0,
+      //   size: 10,
+      //   sort: 'createTime,desc'
+      // }
+      // const list = []
+      // const allList = await this.getAllNoRead(params, list)
+      FetchReadedAll({ 'newsType': 0 }).then(res => {
+        console.log(res)
         if (res) {
-          this.reload()
+          this.items.forEach(item => {
+            item.isRead = 1
+          })
           // this.getListMessage()
         }
       })
     },
     // 递归获取所有列表
     async getAllNoRead(params, list) {
-      const allList = await getUserNotice(params).then(res => {
+      const allList = await FetchMySystemNotice(params).then(res => {
         list = list.concat(res.content)
         if ((list.length) < res.totalElements) {
           params.page++
@@ -248,7 +238,7 @@ export default {
       background-color: #02255f;
       .message-cont-info{
         color: #fff;
-        .is-read-tip{
+        .unread-tip{
           color: #1890ff;
           border: 1px solid #339cff;
           background-color: #02255f;
@@ -301,7 +291,7 @@ export default {
         padding: 16px 20px;
         color: #545B65;
 
-        .is-read-tip{
+        .unread-tip{
           position: absolute;
           right: 20px;
           top: 16px;
@@ -312,6 +302,11 @@ export default {
           color: #ED4A41;
           background-color: #FDEFEE;
           border-radius: 3px;
+          &.read-tip{
+            color: #a6adb6;
+            border: 1px solid #e6e8ed;
+            background-color: #f3f5f9;
+          }
         }
 
         .message-list-info{

src/views/system/user/processCenter/index.vue

@@ -17,7 +17,6 @@
           <date-range-picker v-model="blurryTime" class="date-item" />
           <el-button icon="el-icon-search" size="mini" class="user-search-btn" @click="crud.toQuery">搜索</el-button>
         </div>
-
         <div>
           <el-select v-model="type" placeholder="请选择" style="width: 97px;" @change="crud.toQuery">
             <el-option