Home-Message Final

src/api/message.js

@@ -12,3 +12,9 @@ export function pushMarkRead(id) {
     url: `/noticeInfo/read?id=${id}`
   })
 }
+
+export function fetchRealCount() {
+  return request({
+    url: '/api/message/getCount'
+  })
+}

src/layout/components/AppMain.vue

@@ -31,7 +31,7 @@ export default {
   min-height: calc(100vh - #{$headerHeight});
   width: 100%;
   position: relative;
-  overflow: hidden;
+  // overflow: hidden;
   padding-bottom: $footerHeight;
 
   &>div:not(.home-container) {

src/store/getters.js

@@ -8,6 +8,8 @@ const getters = {
   name: state => state.user.name,
   introduction: state => state.user.introduction,
   roles: state => state.user.roles,
-  permission_routes: state => state.permission.routes
+  permission_routes: state => state.permission.routes,
+  messageCount: state => state.message.message,
+  systemCount: state => state.message.system
 }
 export default getters

src/store/modules/message.js

@@ -0,0 +1,56 @@
+import { isNumber } from '@/utils/convert'
+
+const state = {
+  message: {
+    todo: 0,
+    done: 0
+  },
+  system: {
+    'systemCode': 0
+  }
+}
+
+const mutations = {
+  UPDATE_MESSAGE: (state, data) => {
+    state.message.todo = data.noticeNCount
+    state.message.done = data.noticeYCount
+  },
+  UPDATE_SYSTEM: (state, data) => {
+    for (const key in data) {
+      state.system[key] = data[key]
+    }
+  },
+  UPDATE_TODO: (state, delta, systemCode) => {
+    state.message.todo += delta
+    if (!isNumber(state.system[systemCode])) {
+      state.system[systemCode] = 0
+    }
+    state.system[systemCode] += delta
+  },
+  UPDATE_DONE: (state, delta) => {
+    state.message.done += delta
+  }
+}
+
+const actions = {
+  setMessgeCount({ commit }, data) {
+    commit('UPDATE_MESSAGE', data)
+  },
+  setSystemCount({ commit }, data) {
+    commit('UPDATE_SYSTEM', data)
+  },
+  addNewMessage({ commit }, systemCode) {
+    commit('UPDATE_TODO', 1, systemCode)
+  },
+  readMessage({ commit }, systemCode) {
+    commit('UPDATE_TODO', -1, systemCode)
+    commit('UPDATE_DONE', 1)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/styles/headertop.scss

@@ -23,30 +23,30 @@ $headerTextColor: #ffffff;
       img.logo {
         height: 78px;
       }
+    }
 
-      .tip-box {
-        margin-left: 10px;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
+    .tip-box {
+      margin-left: 10px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
 
-        .tip-system {
-          font-size: 2em;
-          font-weight: 400;
-          letter-spacing: 2px;
-        }
+      .tip-system {
+        font-size: 2em;
+        font-weight: 400;
+        letter-spacing: 2px;
+      }
 
-        .tip-theme {
-          display: flex;
-          justify-content: space-between;
-          font-size: 1.3em;
-          font-weight: 200;
-          letter-spacing: 20px;
-          margin: 10px 0 0 2px;
-
-          .tip-theme-right {
-            margin-right: -14px;
-          }
+      .tip-theme {
+        display: flex;
+        justify-content: space-between;
+        font-size: 1.3em;
+        font-weight: 200;
+        letter-spacing: 20px;
+        margin: 10px 0 0 2px;
+
+        .tip-theme-right {
+          margin-right: -14px;
         }
       }
     }
@@ -56,37 +56,42 @@ $headerTextColor: #ffffff;
       height: $headerHeight;
       margin-right: 10px;
 
-      .right-top {
-        height: $headerHeight / 2;
-        display: flex;
-        align-items: center;
-        font-size: 1.2em;
+    }
+
+    .right-top {
+      height: $headerHeight / 2;
+      display: flex;
+      align-items: center;
+      font-size: 1.2em;
+    }
 
-        .right-top-item {
-          margin-left: 20px;
+    .right-top-item {
+      margin-left: 20px;
 
-          cursor: pointer;
-          transition: background .3s;
+      cursor: pointer;
+      transition: background .3s;
 
-          &:hover {
-            background: rgba(0, 0, 0, .025)
-          }
+      &:hover {
+        background: rgba(0, 0, 0, .025)
+      }
 
-          .svg-icon {
-            margin-right: 5px;
-          }
+      .item-message-badge .el-badge__content {
+        display: none;
+      }
 
-          .el-avatar,
-          .user-name {
-            vertical-align: middle;
-            font-size: 1.2em;
-            color: $headerTextColor;
-          }
+      .item-title {
+        margin-left: 10px;
+      }
 
-          .user-name {
-            margin-left: 5px;
-          }
-        }
+      .el-avatar,
+      .user-name {
+        vertical-align: middle;
+        font-size: 1.2em;
+        color: $headerTextColor;
+      }
+
+      .user-name {
+        margin-left: 5px;
       }
     }
   }

src/styles/index.scss

@@ -192,10 +192,33 @@ aside {
   z-index: 1000 !important;
 }
 
+.el-pagination {
+  text-align: right;
+}
+
+.home-more-dialog,
+.home-edit-dialog {
+  margin-top: 5vh !important;
+
+  .el-dialog__header {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+  }
+
+  .el-dialog__title {
+    color: rgba(0, 0, 0, 0.85);
+    font-weight: bold;
+  }
+
+  .el-dialog__footer {
+    border-top: 1px solid rgba(0, 0, 0, 0.15);
+  }
+
+}
+
 .home-more-dialog {
   width: 70%;
   min-width: 1200px;
-  margin-top: 5vh !important;
+
 
   .el-table td {
     padding: 6px 0;
@@ -204,14 +227,7 @@ aside {
 
 .home-edit-dialog {
   width: 1400px;
-  margin-top: 5vh !important;
 
-  .el-dialog__header {
-    border-bottom: 1px solid #d8dbdb;
-  }
-  .el-dialog__footer {
-    border-top: 1px solid #d8dbdb;
-  }
   .el-dialog__body {
     padding: 0;
   }

src/utils/convert.js

@@ -23,6 +23,10 @@ export function isNull(str) {
   return false
 }
 
+export function isNumber(obj) {
+  return typeof obj === 'number' && isFinite(obj)
+}
+
 // typeof {a: 'a', b: 'b'} // object
 // typeof Promise.resolve() // object
 // typeof new Date() // object

src/views/home/Business.vue

@@ -3,13 +3,14 @@
     <el-card>
       <div slot="header" class="clearfix">
         <span>我的业务</span>
-        <el-button style="float: right; padding: 3px 0" type="text" @click="showEdit">编辑</el-button>
+        <el-button style="float: right; padding: 3px 0" type="text" size="medium" @click="showEdit">编辑</el-button>
       </div>
 
       <el-scrollbar class="business-content">
         <el-tabs v-loading="loading" value="all">
           <el-tab-pane label="所有" name="all">
-            <div v-for="bizType in allBizTypeData" v-if="!isNull(bizData[bizType.value])" :key="bizType.id" class="type-box">
+            <!-- <div v-for="bizType in allBizTypeData" v-if="!isNull(bizData[bizType.value])" :key="bizType.id" class="type-box"> -->
+            <div v-for="bizType in allBizTypeData" :key="bizType.id" class="type-box">
               <div class="type-title">{{ bizType.label }}</div>
               <el-button v-for="item in bizData[bizType.value]" :key="item.id" type="test">{{ item.businessName }}</el-button>
             </div>
@@ -30,7 +31,7 @@
 import BusinessEdit from './components/BusinessEdit'
 
 import { fetchDictData } from '@/api/dict'
-import { isNull } from '@/utils/convert'
+import { hasValidRecords, isNull } from '@/utils/convert'
 import { fetchMyBizList } from '@/api/biz'
 
 export default {
@@ -38,16 +39,6 @@ export default {
   components: {
     BusinessEdit
   },
-  props: {
-    pageSize: {
-      type: Number,
-      default: 5
-    },
-    module: {
-      type: String,
-      default: ''
-    }
-  },
   data() {
     return {
       dictType: 'bisiness_type',
@@ -103,8 +94,7 @@ export default {
         promises.push(
           new Promise((resolve, reject) => {
             fetchMyBizList(params).then(response => {
-              debugger
-              if (!isNull(response.data) && !isNull(response.data.records)) {
+              if (hasValidRecords(response)) {
                 this.bizData[type.value] = response.data.records
                 this.bizTypeData.push(type)
               } else {
@@ -126,10 +116,8 @@ export default {
         )
       }
       Promise.all(promises).then(res => {
-        debugger
         this.loading = false
       }).catch(error => {
-        debugger
         console.log(error)
         this.loading = false
       })

src/views/home/Link.vue

@@ -2,8 +2,8 @@
   <div>
     <el-card>
       <div slot="header" class="clearfix">
-        <span>Test</span>
-        <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
+        <span>外部应用导航</span>
+        <el-button style="float: right; padding: 3px 0" type="text">更多<i class="el-icon-arrow-right" /></el-button>
       </div>
       <el-scrollbar class="link-content">
         <ellipsis-tooltip v-for="item in linkData" :key="item.id" :content="item.name" placement="top" class="link-item" width="200px">

src/views/home/Message.vue

@@ -3,77 +3,74 @@
     <el-card>
       <div slot="header" class="clearfix">
         <span>消息提醒</span>
-        <el-button style="float: right; padding: 3px 0" type="text" @click="showList">更多<i class="el-icon-arrow-right" /></el-button>
+        <el-button style="float: right; padding: 3px 0" type="text" size="medium" @click="showList">更多<i class="el-icon-arrow-right" /></el-button>
       </div>
       <el-tabs v-model="curTab" class="message-content" @tab-click="getTablelist">
-        <el-tab-pane :label="'待办（'+ todoCount + '）'" name="Todo">
+        <el-tab-pane :label="'待办（'+ messageCount.todo + '）'" name="Todo">
           <div class="message-filter_box">
             <span>筛选条件：</span>
             <el-radio-group v-model="todoType" size="mini" @input="getTablelist">
               <el-radio-button label="">全部</el-radio-button>
-              <el-radio-button label="4">任务类</el-radio-button>
-              <el-radio-button label="5">通知类</el-radio-button>
-              <el-radio-button label="6">超期提醒类</el-radio-button>
+              <el-radio-button v-for="item in typeData" :key="item.id" :label="item.value">{{ item.label }}</el-radio-button>
             </el-radio-group>
           </div>
-          <el-table v-loading="loading" :data="todoData" :show-header="false" size="mini" height="calc(100% - 30px)">
-            <el-table-column width="40">
-              <template>
-                <el-avatar shape="square"><svg-icon icon-class="yujing" /></el-avatar>
+          <el-table v-loading="loading" :data="todoData" :show-header="false" size="medium" :cell-style="cellStyle" height="calc(100% - 30px)">
+            <el-table-column width="50">
+              <template slot-scope="scope">
+                <el-avatar :size="40" shape="square" class="msg-icon"><svg-icon :icon-class="formatTypeIcon(scope.row.messageType)" /></el-avatar>
               </template>
             </el-table-column>
             <el-table-column show-overflow-tooltip>
               <template slot-scope="scope">
-                <div>{{ scope.row.title }} <span :class="'priority-box priority-level'+ scope.row.priority">{{ scope.row.priorityName }}</span> </div>
-                <div>{{ scope.row.appName }}</div>
+                <div>{{ scope.row.title }} <span v-if="scope.row.messageLevel + '' === '1'" class="priority-box priority-level1">{{ formatDictData('', scope.row.messageLevel) }}</span> </div>
+                <div>{{ scope.row.systemName }}</div>
               </template>
             </el-table-column>
-            <el-table-column prop="createDate" width="140" />
-            <el-table-column prop="createUser" width="70" show-overflow-tooltip />
+            <el-table-column prop="createTime" width="150" />
+            <el-table-column prop="createUser" width="100" show-overflow-tooltip />
             <el-table-column width="105">
-              <template>
-                <el-button size="mini">不再提醒</el-button>
+              <template slot-scope="scope">
+                <el-button size="mini" @click="markRead(scope.$index, scope.row)">不再提醒</el-button>
               </template>
             </el-table-column>
           </el-table>
         </el-tab-pane>
-        <el-tab-pane :label="'已办（'+ doneCount + '）'" name="Done">
+        <el-tab-pane :label="'已办（'+ messageCount.done + '）'" name="Done">
           <div class="message-filter_box">
             <span>筛选条件：</span>
             <el-radio-group v-model="doneType" size="mini" @input="getTablelist">
               <el-radio-button label="">全部</el-radio-button>
-              <el-radio-button label="4">任务类</el-radio-button>
-              <el-radio-button label="5">通知类</el-radio-button>
-              <el-radio-button label="6">超期提醒类</el-radio-button>
+              <el-radio-button v-for="item in typeData" :key="item.id" :label="item.value">{{ item.label }}</el-radio-button>
             </el-radio-group>
           </div>
-          <el-table v-loading="loading" :data="doneData" :show-header="false" size="mini" height="calc(100% - 30px)">
-            <el-table-column width="40">
-              <template>
-                <el-avatar shape="square"><svg-icon icon-class="yujing" /></el-avatar>
+          <el-table v-loading="loading" :data="doneData" :show-header="false" size="medium" height="calc(100% - 30px)">
+            <el-table-column width="50">
+              <template slot-scope="scope">
+                <el-avatar :size="40" shape="square" class="msg-icon"><svg-icon :icon-class="formatTypeIcon(scope.row.messageType)" /></el-avatar>
               </template>
             </el-table-column>
             <el-table-column show-overflow-tooltip>
               <template slot-scope="scope">
-                <div>{{ scope.row.title }} <span :class="'priority-box priority-level'+ scope.row.priority">{{ scope.row.priorityName }}</span> </div>
-                <div>{{ scope.row.appName }}</div>
+                <div>{{ scope.row.title }} <span v-if="scope.row.messageLevel + '' === '1'" class="priority-box priority-level1">{{ formatDictData('', scope.row.messageLevel) }}</span> </div>
+                <div>{{ scope.row.systemName }}</div>
               </template>
             </el-table-column>
-            <el-table-column prop="createDate" width="140" />
-            <el-table-column prop="createUser" width="70" show-overflow-tooltip />
+            <el-table-column prop="createTime" width="150" />
+            <el-table-column prop="createUser" width="100" show-overflow-tooltip />
           </el-table>
         </el-tab-pane>
       </el-tabs>
     </el-card>
-    <message-list ref="messageList" />
+    <message-list ref="messageList" :type-data="typeData" @updateMessage="updateMessage" />
   </div>
 </template>
 
 <script>
 import MessageList from './components/MessageList'
 
-import { fetchTableList } from '@/api/message'
-import { isNull } from '@/utils/convert'
+import { fetchDictData } from '@/api/dict'
+import { fetchTableList, pushMarkRead, fetchRealCount } from '@/api/message'
+import { hasValidRecords, isNull, formatDictData } from '@/utils/convert'
 
 export default {
   name: 'Message',
@@ -82,31 +79,60 @@ export default {
   },
   data() {
     return {
+      cellStyle: {
+        color: 'rgba(0,0,0, 0.85)'
+      },
+      msgDictType: 'notice_type',
+      typeData: [],
+      messageLevelData: [{ 'value': '0', 'label': '正常' }, { 'value': '1', 'label': '紧急' }],
       curTab: 'Todo',
       todoType: '',
       doneType: '',
-      todoCount: '',
-      doneCount: '',
       todoData: [],
       doneData: [],
       loading: false
     }
   },
+  computed: {
+    messageCount() {
+      return this.$store.getters.messageCount
+    }
+  },
   created() {
     this.getMessageCount()
     this.getTablelist()
+    this.getTypeData()
   },
   methods: {
     showList() {
       this.$refs.messageList.open()
     },
+    updateMessage() {
+      this.getTablelist()
+    },
     getMessageCount() {
-      this.todoCount = 10
-      this.doneCount = 11
+      fetchRealCount().then(res => {
+        if (!isNull(res.data)) {
+          this.$store.dispatch('message/setMessgeCount', res.data)
+        }
+      }).catch(error => {
+        console.log(error)
+        this.$message.error({
+          type: 'error',
+          duration: 0,
+          showClose: true,
+          message: '获取消息数量出错: ' + error.message
+        })
+      })
     },
     addNewMessage(message) {
-      this.todoCount++
-      this.todoData.unshift(message)
+      this.$store.dispatch('message/addNewMessage', message.deptCode)
+      if (this.curTab === 'Todo') {
+        // this.getTablelist()
+        if (message.messageType + '' === this.todoType) {
+          this.todoData.unshift(message)
+        }
+      }
     },
     // 获取table数据
     getTablelist() {
@@ -119,7 +145,7 @@ export default {
       }
       fetchTableList(params).then(response => {
         this.loading = false
-        if (!isNull(response.data)) {
+        if (hasValidRecords(response)) {
           if (this.curTab === 'Done') {
             this.doneData = response.data.records
           } else {
@@ -142,6 +168,51 @@ export default {
           message: '获取消息列表出错: ' + error.message
         })
       })
+    },
+    markRead(index, data) {
+      pushMarkRead(data.targetId).then(res => {
+        this.$store.dispatch('message/readMessage', data.deptCode)
+        this.todoData.splice(index, 1)
+      }).catch(error => {
+        console.log(error)
+        this.$message.error({
+          type: 'error',
+          duration: 0,
+          showClose: true,
+          message: '不再提醒操作出错: ' + error.message
+        })
+      })
+    },
+    formatTypeIcon(type) {
+      const typeStr = type + ''
+      if (typeStr === '4') {
+        return 'zhiliang'
+      } else if (typeStr === '5') {
+        return 'anjian'
+      } else {
+        return 'yujing'
+      }
+    },
+    getTypeData() {
+      fetchDictData(this.msgDictType).then(response => {
+        if (!isNull(response.data)) {
+          this.typeData = response.data
+        } else {
+          this.typeData = []
+        }
+      }).catch(error => {
+        console.log(error)
+        this.$message.error({
+          type: 'error',
+          duration: 0,
+          showClose: true,
+          message: '获取消息类型错误: ' + error.message
+        })
+      })
+    },
+    formatDictData(type, value) {
+      const data = this.messageLevelData
+      return formatDictData(data, value)
     }
   }
 }
@@ -157,6 +228,11 @@ export default {
     }
   }
 
+  .msg-icon {
+    color: #0056dd;
+    background: rgba(0,86,221,0.1);
+  }
+
   ::v-deep {
     .el-tabs__header {
       height: 40px;
@@ -182,16 +258,10 @@ export default {
   padding: 0 5px;
   color: #ffffff;
 }
+.priority-level0{
+  background: none;
+}
 .priority-level1{
   background: #F85252;
 }
-.priority-level2{
-  background: orange;
-}
-.priority-level3{
-  background: yellow;
-}
-.priority-level4{
-  background: blue;
-}
 </style>

src/views/home/Search.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <el-row type="flex" justify="center" class="searh-row">
-      <el-col :span="10"><el-input v-model="searchText" placeholder="请输入搜索内容" /></el-col>
-      <el-col :span="2"><el-button type="primary" icon="el-icon-search" @click="eagleSearch">智搜</el-button></el-col>
+      <el-col :span="10"><el-input v-model="searchText" placeholder="请输入搜索内容" size="medium" /></el-col>
+      <el-col :span="2"><el-button type="primary" icon="el-icon-search" size="medium" @click="eagleSearch">智搜</el-button></el-col>
     </el-row>
   </div>
 </template>

src/views/home/Specification.vue

@@ -2,11 +2,11 @@
   <div>
     <el-card>
       <div slot="header" class="clearfix">
-        <span>Test</span>
-        <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
+        <span>标准规范</span>
+        <el-button style="float: right; padding: 3px 0" type="text">更多<i class="el-icon-arrow-right" /></el-button>
       </div>
       <el-scrollbar class="spec-content">
-        <el-table :data="specData" :show-header="false" size="mini">
+        <el-table :data="specData" :show-header="false">
           <el-table-column show-overflow-tooltip>
             <template slot-scope="scope">
               <el-link :underline="false">{{ scope.row.name }}</el-link>

src/views/home/System.vue

@@ -2,8 +2,8 @@
   <div>
     <el-card>
       <div slot="header" class="clearfix">
-        <span>Test</span>
-        <el-button style="float: right; padding: 3px 0" type="text" @click="showEdit">More<i class="el-icon-arrow-right" /></el-button>
+        <span>{{ title }}</span>
+        <el-button style="float: right; padding: 3px 0" type="text" size="medium" @click="showEdit">编辑</el-button>
       </div>
       <el-carousel class="system-content" :autoplay="false" arrow="never" trigger="click">
         <el-carousel-item v-for="(page,index) in carouselData" :key="index">
@@ -25,6 +25,10 @@ import SystemEdit from './components/SystemEdit'
 export default {
   components: { SystemEdit },
   props: {
+    title: {
+      type: String,
+      default: '我的应用'
+    },
     pageSize: {
       type: Number,
       default: 5

src/views/home/components/MessageList.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
     <el-dialog
-      v-loading="loading"
       :visible.sync="visible"
       :close-on-press-escape="true"
       :close-on-click-modal="false"
@@ -17,7 +16,7 @@
             <el-input v-model="formData.title" class="filter-item" clearable />
           </el-form-item>
           <el-form-item label="所属应用系统">
-            <el-select v-model="formData.systemCode" clearable filterable placeholder="请输入">
+            <el-select v-model="formData.deptCode" clearable filterable placeholder="请输入">
               <el-option v-for="(item) in systemData" :key="item.systemNumber" :label="item.systemName" :value="item.systemNumber" />
             </el-select>
           </el-form-item>
@@ -28,12 +27,12 @@
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="searchTable">查询</el-button>
-            <el-button type="danger" @click="resetTable('filterForm')">重置</el-button>
+            <!-- <el-button type="danger" @click="resetTable('filterForm')">重置</el-button> -->
           </el-form-item>
         </el-form>
       </div>
       <div class="list-table">
-        <el-table :data="tableData" fit border stripe height="300" style="width: 100%;">
+        <el-table v-loading="loading" :data="tableData" fit border stripe height="500" style="width: 100%;">
           <el-table-column type="index" label="序号" width="50" />
           <el-table-column prop="messageType" label="消息类型" :formatter="formatDictData" width="100" show-overflow-tooltip />
           <el-table-column prop="title" label="消息标题" show-overflow-tooltip />
@@ -76,11 +75,18 @@
   </div>
 </template>
 <script>
-import { isNull, formatDictData } from '@/utils/convert'
+import { hasValidRecords, isNull, formatDictData } from '@/utils/convert'
 import { fetchTableList, pushMarkRead } from '@/api/message'
+import { fetchAllSystemList } from '@/api/system'
 
 export default {
-  props: {},
+  name: 'MessageList',
+  props: {
+    typeData: {
+      type: Array,
+      default: () => []
+    }
+  },
   data() {
     return {
       // dialog
@@ -94,20 +100,22 @@ export default {
       // filter
       formData: {
         title: '',
-        systemCode: '',
+        deptCode: '',
         status: null
       },
       // dict
-      typeData: [{ 'value': '4', 'label': '任务类' }, { 'value': '5', 'label': '通知类' }, { 'value': '6', 'label': '超期提醒类' }],
-      statusData: [{ 'value': '0', 'label': '待办' }, { 'value': '1', 'label': '已办' }],
       // select data
-      systemData: [{ 'systemNumber': '1', 'systemName': 'System1' }, { 'systemNumber': '2', 'systemName': 'System2' }],
+      statusData: [{ 'value': '0', 'label': '待办' }, { 'value': '1', 'label': '已办' }],
+      systemData: [],
       // others
       loading: false,
       detailVisible: false,
       content: ''
     }
   },
+  created() {
+    this.getSystemData()
+  },
   methods: {
     // 改变每页显示条数
     handleSizeChange(val) {
@@ -137,7 +145,7 @@ export default {
         current: this.current,
         size: this.size,
         title: this.formData.title,
-        systemCode: this.formData.systemCode,
+        deptCode: this.formData.deptCode,
         readStatus: this.formData.status
       }
       fetchTableList(params).then(response => {
@@ -170,6 +178,7 @@ export default {
     },
     close() {
       this.visible = false
+      this.$emit('updateMessage')
     },
     viewDetail(content) {
       this.content = content
@@ -181,8 +190,9 @@ export default {
     },
     markRead(row) {
       this.loading = true
-      pushMarkRead(row.id).then(res => {
+      pushMarkRead(row.targetId).then(res => {
         row.readStatus = 1
+        this.$store.dispatch('message/readMessage', row.deptCode)
         this.loading = false
       }).catch(error => {
         console.log(error)
@@ -195,6 +205,30 @@ export default {
         })
       })
     },
+    getSystemData() {
+      const params = {
+        page: 1,
+        size: 100,
+        params: {
+          delFlag: 0
+        }
+      }
+      fetchAllSystemList(params).then(response => {
+        if (hasValidRecords(response)) {
+          this.systemData = response.data.records
+        } else {
+          this.systemData = []
+        }
+      }).catch(error => {
+        console.log(error)
+        this.$message.error({
+          type: 'error',
+          duration: 0,
+          showClose: true,
+          message: '获取所属应用系统出错：' + error.message
+        })
+      })
+    },
     formatDictData(row, column, cellValue) {
       let data
       if (column.property === 'messageType') {

src/views/home/components/SystemEdit.vue

@@ -290,7 +290,10 @@ export default {
       bottom: 0;
       left: 0;
       width: 100%;
-      text-align: center;
+
+      .el-pagination {
+        text-align: center;
+      }
 
       ::v-deep {
         .btn-prev, .btn-next, .el-pager li{

src/views/home/index.vue

@@ -5,7 +5,7 @@
       :col-num="14"
       :row-height="30"
       :is-draggable="false"
-      :is-resizable="true"
+      :is-resizable="false"
       :is-mirrored="false"
       :vertical-compact="true"
       :margin="[10, 10]"
@@ -54,10 +54,10 @@ export default {
       layout: [
         { 'x': 0, 'y': 0, 'w': 14, 'h': 2, 'i': '0' },
         { 'x': 0, 'y': 2, 'w': 6, 'h': 12, 'i': '1' },
-        { 'x': 0, 'y': 14, 'w': 6, 'h': 8, 'i': '2' },
-        { 'x': 6, 'y': 2, 'w': 8, 'h': 8, 'i': '3' },
-        { 'x': 6, 'y': 10, 'w': 8, 'h': 5, 'i': '4' },
-        { 'x': 6, 'y': 15, 'w': 8, 'h': 7, 'i': '5' },
+        { 'x': 0, 'y': 14, 'w': 6, 'h': 10, 'i': '2' },
+        { 'x': 6, 'y': 2, 'w': 8, 'h': 10, 'i': '3' },
+        { 'x': 6, 'y': 10, 'w': 8, 'h': 6, 'i': '4' },
+        { 'x': 6, 'y': 15, 'w': 8, 'h': 6, 'i': '5' },
         { 'x': 0, 'y': 21, 'w': 14, 'h': 4, 'i': '6' }
       ],
       components: ['Search', 'Message', 'Business', 'System', 'System', 'Specification', 'Link']
@@ -82,10 +82,10 @@ export default {
   methods: {
     componentProps(index) {
       if (index === '3') {
-        return { pageSize: 10 }
+        return { title: '我的应用', pageSize: 10 }
       }
       if (index === '4') {
-        return { pageSize: 5 }
+        return { title: '专项工具', pageSize: 5 }
       }
       return {}
     },
@@ -133,6 +133,9 @@ export default {
 $msgCardHeaderHeight: 43px;
 
 .home-container {
+  // 1830=1920- sidebar - 5 padding - 21 browser scrollbar
+  width: 1830px;
+
   .card-box {
     height: 100%;
 

src/views/system/components/SystemDetail.vue

@@ -81,7 +81,7 @@
 </template>
 <script>
 import { fetchDictData } from '@/api/dict'
-import { isObject, hasValidRecords } from '@/utils/convert'
+import { isObject, isNull } from '@/utils/convert'
 
 import { pushSaveFavorite } from '@/api/system'
 
@@ -148,8 +148,8 @@ export default {
     },
     getTypeData() {
       fetchDictData(this.dictSysType).then(response => {
-        if (hasValidRecords(response)) {
-          this.typeData = response.data.records
+        if (!isNull(response.data)) {
+          this.typeData = response.data
         } else {
           this.typeData = []
         }
@@ -159,7 +159,7 @@ export default {
           type: 'error',
           duration: 0,
           showClose: true,
-          message: ': ' + error.message
+          message: '获取应用类型出错: ' + error.message
         })
       })
     }

src/views/system/index.vue

@@ -83,7 +83,7 @@ import SystemDetail from './components/SystemDetail'
 import { fetchDictData } from '@/api/dict'
 import { fetchAllSystemList } from '@/api/system'
 
-import { hasValidRecords, formatDictData } from '@/utils/convert'
+import { hasValidRecords, formatDictData, isNull } from '@/utils/convert'
 
 export default {
   components: { SystemDetail },
@@ -169,8 +169,8 @@ export default {
     },
     getTypeData() {
       fetchDictData(this.dictType).then(response => {
-        if (hasValidRecords(response)) {
-          this.typeData = response.data.records
+        if (!isNull(response.data)) {
+          this.typeData = response.data
         } else {
           this.typeData = []
         }
@@ -180,7 +180,7 @@ export default {
           type: 'error',
           duration: 0,
           showClose: true,
-          message: ': ' + error.message
+          message: '获取应用类型出错: ' + error.message
         })
       })
     },