消息中心

src/api/system/logs.js

@@ -1,4 +1,5 @@
 import request from '@/utils/request'
+import qs from 'qs'
 
 // 报警日志 手动处理
 export function warnRemark(data) {
@@ -55,11 +56,24 @@ export function noticeDel(data) {
   })
 }
 
+// -------消息中心------
+// 获取列表
+export function getUserNotice(params) {
+  return request({
+    url: 'api/users/notice' + '?' + qs.stringify(params, { indices: false }),
+    method: 'get',
+    params
+  })
+}
+
+// 标记已读
+
 export default {
   warnRemark,
   noticeCreate,
   getNoticeList,
   getAllUser,
   getAllDev,
-  noticeDel
+  noticeDel,
+  getUserNotice
 }

src/layout/components/Navbar.vue

@@ -151,7 +151,8 @@ export default {
       this.$store.dispatch('app/toggleSideBar')
     },
     toAllMessage() {
-      this.$router.push('/system/messageCenter')
+      // this.$router.push('/system/messageCenter')
+      this.$router.push({ path: '/user/center', query: { activeIndex: 2 }})
       this.$refs.messageDrop.hide()
     },
     // open() {

src/views/system/user/center.vue

@@ -39,6 +39,7 @@
           <ul class="tab-nav">
             <li :class="{'active-tab-nav': activeIndex == 0}" @click="handleClick(0)">用户资料<i /></li>
             <li :class="{'active-tab-nav': activeIndex == 1}" @click="handleClick(1)">操作日志<i /></li>
+            <li :class="{'active-tab-nav': activeIndex == 2}" @click="handleClick(2)">我的消息<i /></li>
             <!-- 最右侧装饰img -->
             <span class="tab-right-img" />
           </ul>
@@ -96,8 +97,11 @@
               @current-change="pageChange"
             />
           </div>
-        </div>
-      </el-col>
+          <!-- 我的消息 -->
+          <div v-if="activeIndex == 2" class="tab-item">
+            <messageCenter />
+          </div>
+        </div></el-col>
     </el-row>
     <updateEmail ref="email" :email="user.email" />
     <updatePass ref="pass" />
@@ -115,9 +119,10 @@ import { isvalidPhone } from '@/utils/validate'
 import crud from '@/mixins/crud'
 import { editUser } from '@/api/system/user'
 import Avatar from '@/assets/images/avatar.png'
+import messageCenter from './messageCenter/index.vue'
 export default {
   name: 'Center',
-  components: { updatePass, updateEmail, myUpload },
+  components: { updatePass, updateEmail, myUpload, messageCenter },
   mixins: [crud],
   data() {
     // 自定义验证
@@ -161,6 +166,9 @@ export default {
   created() {
     this.form = { id: this.user.id, nickName: this.user.nickName, gender: this.user.gender, phone: this.user.phone }
     store.dispatch('GetInfo').then(() => {})
+    if (this.$route.query) {
+      this.activeIndex = this.$route.query.activeIndex
+    }
   },
   methods: {
     toggleShow() {
@@ -291,4 +299,7 @@ export default {
   input {
     background-color: transparent;
   }
+  .app-container{
+    margin-bottom: 0;
+  }
 </style>

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

@@ -0,0 +1,173 @@
+<template>
+  <div>
+    <div class="head-container">
+      <el-button icon="el-icon-delete" :disabled="!(selections.length)" size="mini">删除</el-button>
+      <el-button class="iconfont icon-biaojiyidu-fanbai" :disabled="!(selections.length)" size="mini">标记已读</el-button>
+      <el-button class="iconfont icon-biaojiyidu-fanbai" size="mini">全部标记已读</el-button>
+      <date-range-picker v-model="query.createTime" class="date-item" />
+      <!-- <date-range-picker v-model="createTime" class="date-item" /> -->
+      <!-- <rrOperation /> -->
+      <button @click="getTableData">搜索</button>
+    </div>
+    <!-- <div class="app-container container-wrap">
+      <span class="right-top-line" />
+      <span class="left-bottom-line" /> -->
+    <!--表格渲染-->
+    <!-- :cell-class-name="cell"
+        @selection-change="selectionChangeHandler"
+         -->
+    <el-table
+      ref="table"
+      :data="tableData"
+      style="width: 100%;"
+      :row-class-name="cell"
+      height="calc(100vh - 362px)"
+      @row-click="clickRowHandler"
+      @selection-change="selectionChangeHandler"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column type="index" label="序号" width="100" align="center" />
+      <el-table-column prop="noticeContent" :show-overflow-tooltip="true" label="通知内容" min-width="300" align="center" />
+      <el-table-column prop="noticeType" label="消息类型" align="center" min-width="150">
+        <template slot-scope="scope">
+          <span v-if="scope.row.noticeType===1">系统消息</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="pushUserName" label="推送人" align="center" min-width="150" />
+      <el-table-column prop="create_time" label="推送时间" align="center" min-width="180">
+        <template slot-scope="scope">
+          <div>{{ scope.row.create_time | parseTime }}</div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- <pagination /> -->
+    <el-pagination
+      :page-size.sync="page.size"
+      :total="page.total"
+      :current-page.sync="page.page"
+      style="margin-top: 8px;"
+      layout="total, prev, pager, next, sizes"
+      @size-change="sizeChangeHandler($event)"
+      @current-change="pageChangeHandler"
+    />
+    <!-- </div> -->
+  </div>
+</template>
+
+<script>
+import DateRangePicker from '@/components/DateRangePicker'
+// import data1 from './data1.json'
+import { getUserNotice } from '@/api/system/logs'
+import CRUD, { presenter, header, crud } from '@crud/crud'
+// import pagination from '@crud/Pagination'
+// import rrOperation from '@crud/RR.operation'
+
+export default {
+  name: 'MessageCenter',
+  components: { DateRangePicker
+  //  pagination, rrOperation
+  },
+  mixins: [presenter(), crud(), header()],
+  cruds() {
+    return CRUD({
+      url: 'api/users/notice',
+      sort: ['createTime,desc'],
+      optShow: {
+        // add: false,
+        // edit: false,
+        // del: false,
+        // download: false
+      }
+    })
+  },
+  data() {
+    return {
+      tableData: [],
+      selections: [],
+      query: {
+        createTime: []
+      },
+      page: {
+        total: 0,
+        size: 10,
+        page: 1
+      }
+    }
+  },
+  created() {
+    this.getTableData()
+  },
+  methods: {
+    getTableData() {
+      // this.tableData = data1.rows
+      getUserNotice(this.getParams()).then(res => {
+        console.log(res, 'list')
+        this.page.total = res.totalElements
+        const table = res.content
+        table.forEach(item => {
+          item.pushUserName = item.noticeUsers[0].pushUserName
+          item.isRead = item.noticeUsers[0].isRead
+        })
+        this.tableData = table
+      })
+      // console.log(this.crud, 'crud')
+    },
+    getParams() {
+      const params = {
+        page: this.page.page - 1,
+        size: this.page.size,
+        createTime: this.query.createTime,
+        sort: 'createTime,desc'
+      }
+      console.log(params, '--params')
+      return params
+    },
+    clickRowHandler(row) {
+      // this.$refs.table.clearSelection()
+      this.$refs.table.toggleRowSelection(row) // 单选选中
+    },
+    selectionChangeHandler(val) {
+      this.selections = val
+    },
+    cell({ row }) {
+      if (row.isRead) { // 已读
+        return 'read-color'
+      }
+    },
+    // 每页条数改变
+    sizeChangeHandler(e) {
+      this.loading = true
+      this.page.size = e
+      this.page.page = 1
+      this.getTableData()
+      this.loading = false
+    },
+    // 当前页改变
+    pageChangeHandler(e) {
+      this.loading = true
+      this.page.page = e
+      this.getTableData()
+      this.loading = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/styles/lend-manage.scss';
+.head-container {
+  padding-top: 0;
+  .date-item{
+  margin: -1px 20px 0 12px;
+  }
+}
+
+.container-wrap{
+  margin-top: 0;
+  min-height: 0;
+  height: calc(100vh - 240px);
+}
+::v-deep .read-color td{
+  color: #999 !important;
+}
+</style>