sync

mock/index.js

@@ -2,8 +2,10 @@ const Mock = require('mockjs')
 const { param2Obj } = require('./utils')
 
 const user = require('./user')
+const message = require('./message')
 
 const mocks = [
+  ...message,
   ...user
 ]
 

src/api/biz.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function fetchTableList(data) {
+  return request({
+    url: 'business/list',
+    method: 'post',
+    data: data
+  })
+}

src/api/dict.js

@@ -0,0 +1,7 @@
+import request from '@/utils/request'
+
+export function fetchDictData(type) {
+  return request({
+    url: `sysDict/type/${type}`
+  })
+}

src/api/info.js

@@ -0,0 +1,7 @@
+import request from '@/utils/request'
+
+export function fetchTableList(data) {
+  return request({
+    url: `messageInfo/page?${data}`
+  })
+}

src/api/message.js

@@ -1,8 +1,13 @@
 import request from '@/utils/request'
 
-export function fetchTableList(current, size, title, system, status) {
+export function fetchTableList(data) {
   return request({
-    url: `/message/page?current=${current}&size=${size}`,
-    method: 'get'
+    url: `/noticeInfo/page?${data}`
+  })
+}
+
+export function pushMarkRead(id) {
+  return request({
+    url: `/noticeInfo/read?id=${id}`
   })
 }

src/layout/components/TagsView/ScrollPane.vue

@@ -88,6 +88,8 @@ export default {
     }
     .el-scrollbar__wrap {
       height: 49px;
+      margin-bottom: -17px !important;
+      margin-right: -17px !important;
     }
   }
 }

src/styles/index.scss

@@ -190,4 +190,13 @@ aside {
 
 .multiselect--active {
   z-index: 1000 !important;
+}
+
+.home-more-dialog {
+  width: 70%;
+  min-width: 1200px;
+
+  .el-table td {
+    padding: 6px 0;
+  }
 }

src/utils/convert.js

@@ -87,3 +87,33 @@ export function distinct(arr) {
   }
   return newArr
 }
+export function toQuery(data) {
+  if (data === null || data === undefined) {
+    return ''
+  }
+  const query = []
+  let value
+  for (const key in data) {
+    value = data[key]
+    if (value !== null && value !== undefined) {
+      if (typeof value === 'string') {
+        if (value.trim() !== '') {
+          query.push(key + '=' + value.trim())
+        }
+      } else {
+        query.push(key + '=' + value)
+      }
+    }
+  }
+  return query.join('&')
+}
+export function formatDictData(data, code) {
+  if (code !== null && code !== undefined && data !== null && data !== undefined) {
+    for (let i = 0; i < data.length; i++) {
+      if (data[i].code === code) {
+        return data[i].name
+      }
+    }
+  }
+  return ''
+}

src/utils/request.js

@@ -49,11 +49,11 @@ service.interceptors.response.use(
     if (res.code !== undefined) {
       if (res.code !== 200) {
         Message({
-          message: res.message || 'Error',
+          message: res.msg || '出错',
           type: 'error',
           duration: 5 * 1000
         })
-        return Promise.reject(new Error(res.message || 'Error'))
+        return Promise.reject(new Error(res.msg || '出错'))
       }
     }
     return res

src/views/home/components/Business.vue

@@ -1,30 +1,43 @@
 <template>
-  <el-card>
-    <div slot="header" class="clearfix">
-      <span>Business</span>
-      <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
-    </div>
+  <div>
+    <el-card>
+      <div slot="header" class="clearfix">
+        <span>我的业务</span>
+        <el-button style="float: right; padding: 3px 0" type="text">编辑</el-button>
+      </div>
 
-    <el-scrollbar class="business-content">
-      <el-tabs value="all">
-        <el-tab-pane label="All" name="all">
-          <div v-for="bizType in bizTypeData" :key="bizType" class="type-box">
-            <div class="type-title">{{ bizType }}</div>
-            <el-button v-for="item in bizData[bizType]" :key="item.id" type="test">{{ item.name }}</el-button>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane v-for="bizType in bizTypeData" :key="bizType" :label="bizType" :name="bizType">
-          <div class="type-box">
-            <el-button v-for="item in bizData[bizType]" :key="item.id" type="test">{{ item.name }}</el-button>
-          </div>
-        </el-tab-pane>
-      </el-tabs>
-    </el-scrollbar>
-  </el-card>
+      <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 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>
+          </el-tab-pane>
+          <el-tab-pane v-for="bizType in bizTypeData" :key="bizType.id" :label="bizType.label" :name="bizType.type + bizType.value">
+            <div class="type-box">
+              <el-button v-for="item in bizData[bizType.value]" :key="item.id" type="test">{{ item.businessName }}</el-button>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </el-scrollbar>
+    </el-card>
+    <business-edit />
+  </div>
 </template>
 
 <script>
+import BusinessEdit from './BusinessEdit'
+
+import { fetchDictData } from '@/api/dict'
+import { isNull } from '@/utils/convert'
+import { fetchTableList } from '@/api/biz'
+
 export default {
+  name: 'HomeBusiness',
+  components: {
+    BusinessEdit
+  },
   props: {
     pageSize: {
       type: Number,
@@ -37,63 +50,89 @@ export default {
   },
   data() {
     return {
-      rawData: [
-        { id: '0', code: '1', name: 'SystemSSSSSSSSSSSSSSSSSS1', type: 'type1', link: '', icon: 'icon-1' },
-        { id: '1', code: '2', name: 'SystemA2', type: 'type1', link: '', icon: 'icon-2' },
-        { id: '2', code: '3', name: 'SystemBC3', type: 'type1', link: '', icon: 'icon-3' },
-        { id: '3', code: '4', name: 'SystemDEF4', type: 'type1', link: '', icon: 'icon-4' },
-        { id: '4', code: '5', name: 'SystemGGGGGGGGG5', type: 'type2', link: '', icon: 'icon-5' },
-        { id: '5', code: '6', name: 'SystemHH6', type: 'type2', link: '', icon: 'icon-6' },
-        { id: '6', code: '7', name: 'System7', type: 'type2', link: '', icon: 'icon-7' },
-        { id: '7', code: '8', name: 'System8', type: 'type3', link: '', icon: 'icon-8' },
-        { id: '8', code: '9', name: 'System9', type: 'type3', link: '', icon: 'icon-9' },
-        { id: '9', code: '10', name: 'System10', type: 'type3', link: '', icon: 'icon-10' },
-        { id: '10', code: '11', name: 'System11', type: 'type3', link: '', icon: 'icon-11' },
-        { id: '11', code: '12', name: 'System12', type: 'type4', link: '', icon: 'icon-12' },
-        { id: '12', code: '13', name: 'System13', type: 'type3', link: '', icon: 'icon-13' },
-        { id: '13', code: '1', name: 'SystemSSSSSSSSSSSSSSSSSS1', type: 'type1', link: '', icon: 'icon-1' },
-        { id: '14', code: '2', name: 'SystemA2', type: 'type1', link: '', icon: 'icon-2' },
-        { id: '15', code: '3', name: 'SystemBC3', type: 'type1', link: '', icon: 'icon-3' },
-        { id: '16', code: '4', name: 'SystemDEF4', type: 'type1', link: '', icon: 'icon-4' },
-        { id: '17', code: '5', name: 'SystemGGGGGGGGG5', type: 'type2', link: '', icon: 'icon-5' },
-        { id: '18', code: '6', name: 'SystemHH6', type: 'type2', link: '', icon: 'icon-6' },
-        { id: '19', code: '7', name: 'System7', type: 'type2', link: '', icon: 'icon-7' },
-        { id: '20', code: '8', name: 'System8', type: 'type3', link: '', icon: 'icon-8' },
-        { id: '21', code: '9', name: 'System9', type: 'type3', link: '', icon: 'icon-9' },
-        { id: '22', code: '10', name: 'System10', type: 'type3', link: '', icon: 'icon-10' },
-        { id: '23', code: '11', name: 'System11', type: 'type3', link: '', icon: 'icon-11' },
-        { id: '24', code: '12', name: 'System12', type: 'type4', link: '', icon: 'icon-12' },
-        { id: '25', code: '13', name: 'System13', type: 'type3', link: '', icon: 'icon-13' }
-      ],
-      bizTypeData: ['type1', 'type2', 'type3', 'type4']
+      dictType: 'bisiness_type',
+      // table
+      current: 1,
+      size: 20,
+      allBizTypeData: [],
+      bizTypeData: [],
+      bizData: {},
+      // others
+      loading: false
     }
   },
   computed: {
-    bizData() {
-      const result = {}
-      if (this.rawData && this.rawData.length > 0) {
-        this.rawData.forEach(item => {
-          const group = item.type
-          result[group] = result[group] || []
-          result[group].push(item)
-        })
-      }
-      return result
-    }
   },
   created() {
+    this.getBizTypeData()
     // this.formatData()
   },
   methods: {
-    formatData() {
-      this.carouselData2 = []
-      if (this.rawData && this.rawData.length > 0) {
-        const len = this.rawData.length
-        const page = Math.ceil(len / this.pageSize)
-        for (var i = 0; i < page; i++) {
-          this.carouselData2.push(this.rawData.slice(i * this.pageSize, (i + 1) * this.pageSize))
+    getBizTypeData() {
+      this.loading = true
+      fetchDictData(this.dictType).then(response => {
+        if (!isNull(response.data)) {
+          this.allBizTypeData = response.data
+          this.getBizData()
+        } else {
+          this.allBizTypeData = []
+        }
+        this.loading = false
+      }).catch(error => {
+        console.log(error)
+        this.loading = false
+        this.$message.error({
+          type: 'error',
+          duration: 0,
+          showClose: true,
+          message: '获取应用类型出错: ' + error.message
+        })
+      })
+    },
+    getBizData() {
+      const promises = []
+      for (let i = 0; i < this.allBizTypeData.length; i++) {
+        const type = this.allBizTypeData[i]
+        const params = {
+          page: this.current,
+          size: this.size,
+          params: {
+            businessType: type.value
+          }
         }
+        promises.push(
+          new Promise((resolve, reject) => {
+            fetchTableList(params).then(response => {
+              debugger
+              if (!isNull(response.data) && !isNull(response.data.records)) {
+                this.bizData[type.value] = response.data.records
+                this.bizTypeData.push(type)
+              } else {
+                this.bizData[type.value] = []
+              }
+              resolve()
+            }).catch(error => {
+              console.log(error)
+              this.loading = false
+              this.$message.error({
+                type: 'error',
+                duration: 0,
+                showClose: true,
+                message: `获取${type.label}类型应用出错: ` + error.message
+              })
+              resolve()
+            })
+          })
+        )
       }
+      Promise.all(promises).then(res => {
+        debugger
+        this.loading = false
+      }).catch(error => {
+        debugger
+        console.log(error)
+        this.loading = false
+      })
     }
   }
 }

src/views/home/components/BusinessEdit.vue

@@ -0,0 +1,216 @@
+<template>
+  <div>
+    <el-dialog
+      v-loading="loading"
+      :visible.sync="visible"
+      :close-on-press-escape="true"
+      :close-on-click-modal="false"
+      lock-scroll
+      append-to-body
+      custom-class="home-sys-dialog"
+      title="我的业务"
+      @close="close"
+    >
+      <div class="list-filter">
+        <el-form ref="filterForm" :model="formData" inline label-width="100px">
+          <el-form-item label="消息标题">
+            <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-option v-for="(item) in systemData" :key="item.code" :label="item.name" :value="item.code" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-select v-model="formData.status" clearable placeholder="请选择">
+              <el-option v-for="(item) in statusData" :key="item.code" :label="item.name" :value="item.code" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="searchTable">查询</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-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 />
+          <el-table-column prop="system" label="所属应用系统" width="160" show-overflow-tooltip />
+          <el-table-column prop="readStatus" label="状态" :formatter="formatDictData" width="60" />
+          <el-table-column prop="createTime" label="消息接收时间" width="160" />
+          <el-table-column prop="createUser" label="消息发送人" width="100" show-overflow-tooltip />
+          <el-table-column label="操作" align="center" width="160" class-name="action-column">
+            <template slot-scope="scope">
+              <!-- <el-button type="text" @click="viewDetail(scope.row.id)">详情</el-button> -->
+              <el-button type="text" @click="viewDetail(scope.row.content)">详情</el-button>
+              <el-button v-if="scope.row.readStatus === 0" type="text" @click="markRead(scope.row)">不再提醒</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-if="total > 0" class="page">
+        <el-pagination
+          layout="total, sizes, prev, pager, next, jumper"
+          :current-page="current"
+          :total="total"
+          :page-sizes="pageSizeAll"
+          :page-size="size"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </el-dialog>
+    <el-dialog
+      :visible.sync="detailVisible"
+      :close-on-press-escape="true"
+      :close-on-click-modal="false"
+      lock-scroll
+      append-to-body
+      title="消息内容"
+      @close="closeDetail"
+    >
+      <pre>{{ content }}</pre>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { isNull, toQuery, formatDictData } from '@/utils/convert'
+import { fetchTableList, pushMarkRead } from '@/api/message'
+
+export default {
+  props: {},
+  data() {
+    return {
+      // dialog
+      visible: false,
+      // table
+      current: 1,
+      size: 20,
+      total: 0,
+      pageSizeAll: [10, 20, 50, 100, 200, 500],
+      tableData: [],
+      // filter
+      formData: {
+        title: '',
+        systemCode: '',
+        status: null
+      },
+      // select data
+      typeData: [{ 'code': 4, 'name': '任务类' }, { 'code': 5, 'name': '通知类' }, { 'code': 6, 'name': '超期提醒类' }],
+      systemData: [{ 'code': '1', 'name': 'System1' }, { 'code': '2', 'name': 'System2' }],
+      statusData: [{ 'code': 0, 'name': '待办' }, { 'code': 1, 'name': '已办' }],
+      // others
+      loading: false,
+      detailVisible: false,
+      content: ''
+    }
+  },
+  methods: {
+    // 改变每页显示条数
+    handleSizeChange(val) {
+      this.current = 1
+      this.size = val
+      this.getTablelist()
+    },
+    // 切换第几页
+    handleCurrentChange(val) {
+      this.current = val
+      this.getTablelist()
+    },
+    // 重置搜索项
+    resetTable(formName) {
+      this.$refs[formName].resetFields()
+      this.getTablelist()
+    },
+    // 点击搜索按钮
+    searchTable() {
+      this.current = 1
+      this.getTablelist()
+    },
+    // 获取table数据
+    getTablelist() {
+      this.loading = true
+      const params = {
+        current: this.current,
+        size: this.size,
+        // orders: '["column":"createTime","asc":false]',
+        title: this.formData.title,
+        systemCode: this.formData.systemCode,
+        readStatus: this.formData.status
+      }
+      fetchTableList(toQuery(params)).then(response => {
+        this.loading = false
+        if (!isNull(response.data)) {
+          this.tableData = response.data.records
+          this.total = response.data.total
+        } else {
+          this.tableData = []
+          this.total = 0
+        }
+      }).catch(error => {
+        console.log(error)
+        this.loading = false
+        this.$message.error({
+          type: 'error',
+          duration: 0,
+          showClose: true,
+          message: '获取消息列表出错: ' + error.message
+        })
+      })
+    },
+    /**
+     * 加载附件界面
+     */
+    open() {
+      this.tableData = []
+      this.visible = true
+      this.searchTable()
+    },
+    close() {
+      this.visible = false
+    },
+    viewDetail(content) {
+      this.content = content
+      this.detailVisible = true
+    },
+    closeDetail() {
+      this.content = ''
+      this.detailVisible = false
+    },
+    markRead(row) {
+      this.loading = true
+      pushMarkRead(row.id).then(res => {
+        row.readStatus = 1
+        this.loading = false
+      }).catch(error => {
+        console.log(error)
+        this.loading = false
+        this.$message.error({
+          type: 'error',
+          duration: 0,
+          showClose: true,
+          message: '不再提醒操作出错: ' + error.message
+        })
+      })
+    },
+    formatDictData(row, column, cellValue) {
+      let data
+      if (column.property === 'messageType') {
+        data = this.typeData
+      } else if (column.property === 'readStatus') {
+        data = this.statusData
+      }
+      return formatDictData(data, cellValue)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+</style>

src/views/home/components/Information.vue

@@ -0,0 +1,135 @@
+<template>
+  <div v-if="visible" class="home-info-container">
+    <el-card>
+      <div slot="header" class="clearfix">
+        <span class="info-title">消息通知</span>
+        <i class="el-icon-close info-close-btn" @click="close" />
+      </div>
+      <el-table
+        v-loading="loading"
+        :data="tableData"
+        :show-header="false"
+        stripe
+        size="mini"
+        height="300"
+        style="width: 100%;"
+        @cell-click="cellClick"
+      >
+        <el-table-column prop="title" label="标题" show-overflow-tooltip />
+      </el-table>
+      <div class="info-footer"><span class="info-more-btn">点击查看更多</span></div>
+    </el-card>
+  </div>
+</template>
+<script>
+import { isNull, toQuery } from '@/utils/convert'
+import { fetchTableList } from '@/api/info'
+
+export default {
+  props: {},
+  data() {
+    return {
+      // dialog
+      visible: false,
+      // table
+      current: 1,
+      size: 50,
+      tableData: [],
+      // others
+      loading: false
+    }
+  },
+  methods: {
+    open() {
+      this.tableData = []
+      this.visible = true
+      this.searchTable()
+    },
+    close() {
+      this.visible = false
+    },
+    // 点击搜索按钮
+    searchTable() {
+      this.current = 1
+      this.getTablelist()
+    },
+    // 获取table数据
+    getTablelist() {
+      this.loading = true
+      const params = {
+        current: this.current,
+        size: this.size
+        // orders: '["column":"createTime","asc":false]',
+      }
+      fetchTableList(toQuery(params)).then(response => {
+        this.loading = false
+        if (!isNull(response.data)) {
+          this.tableData = response.data.records
+          this.total = response.data.total
+        } else {
+          this.tableData = []
+          this.total = 0
+        }
+      }).catch(error => {
+        console.log(error)
+        this.loading = false
+        this.$message.error({
+          type: 'error',
+          duration: 0,
+          showClose: true,
+          message: '获取消息列表出错: ' + error.message
+        })
+      })
+    },
+    cellClick(row, column, cell) {
+      this.$alert(cell)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.home-info-container {
+  position: fixed;
+  left: 20px;
+  bottom: 10px;
+  width: 400px;
+  z-index: 1500;
+
+  ::v-deep {
+    .el-card__header {
+      padding: 10px 10px 10px 20px;
+      background-color: #0056dd;
+    }
+    .el-card__body {
+      padding: 0;
+    }
+    .el-table td {
+      padding-left: 10px;
+    }
+  }
+
+  .info-title {
+    color: #ffffff;
+  }
+
+  .info-close-btn {
+    float: right;
+    cursor: pointer;
+    color: #ffffff;
+  }
+
+  .info-footer {
+    height: 30px;
+    line-height: 30px;
+    font-size: 15px;
+    text-align: center;
+    padding-right: 20px;
+  }
+  .info-more-btn {
+    cursor: pointer;
+  }
+
+}
+
+</style>

src/views/home/components/Link.vue

@@ -1,15 +1,17 @@
 <template>
-  <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>
-    </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">
-        <a>{{ item.name }}</a>
-      </ellipsis-tooltip>
-    </el-scrollbar>
-  </el-card>
+  <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>
+      </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">
+          <a>{{ item.name }}</a>
+        </ellipsis-tooltip>
+      </el-scrollbar>
+    </el-card>
+  </div>
 </template>
 
 <script>

src/views/home/components/Message.vue

@@ -3,20 +3,20 @@
     <el-card>
       <div slot="header" class="clearfix">
         <span>消息提醒</span>
-        <el-button style="float: right; padding: 3px 0" type="text" @click="showList">More<i class="el-icon-arrow-right" /></el-button>
+        <el-button style="float: right; padding: 3px 0" type="text" @click="showList">更多<i class="el-icon-arrow-right" /></el-button>
       </div>
-      <el-tabs class="message-content" value="todo">
-        <el-tab-pane :label="'待办（'+ todo + '）'" name="todo">
+      <el-tabs v-model="curTab" class="message-content" @tab-click="getTablelist">
+        <el-tab-pane :label="'待办（'+ todoCount + '）'" name="Todo">
           <div class="message-filter_box">
             <span>筛选条件：</span>
-            <el-radio-group v-model="filter" size="mini">
-              <el-radio-button label="0">全部</el-radio-button>
-              <el-radio-button label="1">任务类</el-radio-button>
-              <el-radio-button label="2">通知类</el-radio-button>
-              <el-radio-button label="3">超期提醒类</el-radio-button>
+            <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-group>
           </div>
-          <el-table :data="todoData" :show-header="false" size="mini" height="calc(100% - 30px)">
+          <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" size="small"><svg-icon icon-class="yujing" /></el-avatar>
@@ -37,17 +37,17 @@
             </el-table-column>
           </el-table>
         </el-tab-pane>
-        <el-tab-pane :label="'已办（'+ done + '）'" name="done">
+        <el-tab-pane :label="'已办（'+ doneCount + '）'" name="Done">
           <div class="message-filter_box">
             <span>筛选条件：</span>
-            <el-radio-group v-model="filter" size="mini">
-              <el-radio-button label="0">全部</el-radio-button>
-              <el-radio-button label="1">任务类</el-radio-button>
-              <el-radio-button label="2">通知类</el-radio-button>
-              <el-radio-button label="3">超期提醒类</el-radio-button>
+            <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-group>
           </div>
-          <el-table :data="doneData" :show-header="false" size="mini" height="calc(100% - 30px)">
+          <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" size="small"><svg-icon icon-class="yujing" /></el-avatar>
@@ -61,11 +61,6 @@
             </el-table-column>
             <el-table-column prop="createDate" width="140" />
             <el-table-column prop="createUser" width="70" show-overflow-tooltip />
-            <el-table-column width="105">
-              <template>
-                <el-button size="mini">不再提醒</el-button>
-              </template>
-            </el-table-column>
           </el-table>
         </el-tab-pane>
       </el-tabs>
@@ -77,6 +72,9 @@
 <script>
 import MessageList from './MessageList'
 
+import { fetchTableList } from '@/api/message'
+import { isNull, toQuery } from '@/utils/convert'
+
 export default {
   name: 'Message',
   components: {
@@ -84,25 +82,66 @@ export default {
   },
   data() {
     return {
-      todo: 10,
-      done: 45,
-      filter: '0',
-      todoData: [
-        { 'id': 1, 'type': '1', 'app': 'zfbapt', 'appName': 'XXXX System', 'priority': '1', 'priorityName': 'Emergency', 'title': 'message test 1', 'createDate': '2023-07-09 16:01:02', 'createUser': 'zhang san', 'status': '0' },
-        { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX System System', 'priority': '2', 'priorityName': 'Normal', 'title': 'message test 2message test 2', 'createDate': '2023-07-09 16:01:02', 'createUser': 'zhang san', 'status': '0' },
-        { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX System', 'priority': '2', 'priorityName': 'Normal', 'title': 'I am a message 3', 'createDate': '2023-07-09 16:01:02', 'createUser': 'zhang san', 'status': '0' },
-        { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX System', 'priority': '2', 'priorityName': 'Normal', 'title': 'I am a message 3', 'createDate': '2023-07-09 16:01:02', 'createUser': 'zhang san', 'status': '0' },
-        { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX System', 'priority': '2', 'priorityName': 'Normal', 'title': 'I am a message 3', 'createDate': '2023-07-09 16:01:02', 'createUser': 'zhang san', 'status': '0' },
-        { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX System', 'priority': '2', 'priorityName': 'Normal', 'title': 'I am a message 3', 'createDate': '2023-07-09 16:01:02', 'createUser': 'zhang san', 'status': '0' },
-        { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX System', 'priority': '2', 'priorityName': 'Normal', 'title': 'I am a message 3', 'createDate': '2023-07-09 16:01:02', 'createUser': 'zhang san', 'status': '0' },
-        { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXXXXXXXXXX System', 'priority': '2', 'priorityName': 'Normal', 'title': 'I am a message too 4', 'createDate': '2023-07-09 16:01:02', 'createUser': 'zhang san', 'status': '0' }
-      ],
-      doneData: []
+      curTab: 'Todo',
+      todoType: '',
+      doneType: '',
+      todoCount: '',
+      doneCount: '',
+      todoData: [],
+      doneData: [],
+      loading: false
     }
   },
+  created() {
+    this.getMessageCount()
+    this.getTablelist()
+  },
   methods: {
     showList() {
       this.$refs.messageList.open()
+    },
+    getMessageCount() {
+      this.todoCount = 10
+      this.doneCount = 11
+    },
+    addNewMessage(message) {
+      this.todoCount++
+      this.todoData.unshift(message)
+    },
+    // 获取table数据
+    getTablelist() {
+      this.loading = true
+      const params = {
+        current: 1,
+        size: 50,
+        readStatus: this.curTab === 'Done' ? 1 : 0,
+        messageType: this.curTab === 'Done' ? this.doneType : this.todoType
+      }
+      fetchTableList(toQuery(params)).then(response => {
+        this.loading = false
+        if (!isNull(response.data)) {
+          if (this.curTab === 'Done') {
+            this.doneData = response.data.records
+          } else {
+            this.todoData = response.data.records
+          }
+        } else {
+          if (this.curTab === 'Done') {
+            this.doneData = []
+          } else {
+            this.todoData = []
+          }
+        }
+      }).catch(error => {
+        console.log(error)
+        this.loading = false
+        this.$message.error({
+          type: 'error',
+          duration: 0,
+          showClose: true,
+          message: '获取消息列表出错: ' + error.message
+        })
+      })
     }
   }
 }

src/views/home/components/MessageList.vue

@@ -1,47 +1,51 @@
 <template>
   <div>
     <el-dialog
+      v-loading="loading"
       :visible.sync="visible"
       :close-on-press-escape="true"
       :close-on-click-modal="false"
-      :lock-scroll="true"
-      title="Message List"
+      lock-scroll
+      append-to-body
+      custom-class="home-more-dialog"
+      title="消息列表"
       @close="close"
     >
       <div class="list-filter">
-        <el-form ref="filterForm" :model="formData" :inline="true" label-width="140px">
-          <el-row>
-            <el-form-item label="Title">
-              <el-input v-model="formData.title" class="filter-item" />
-            </el-form-item>
-            <el-form-item label="System">
-              <el-select v-model="formData.systemCode" clearable placeholder="Please select">
-                <el-option v-for="(item) in systemData" :key="item.code" :label="item.name" :value="item.code" />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="Status">
-              <el-select v-model="formData.status" multiple clearable placeholder="Please select">
-                <el-option v-for="(item) in statusData" :key="item.code" :label="item.name" :value="item.code" />
-              </el-select>
-            </el-form-item>
-          </el-row>
-          <el-row class="btn-group">
-            <el-form-item>
-              <el-button type="primary" @click="searchTable">Search</el-button>
-              <el-button type="danger" @click="resetTable('filterForm')">Reset</el-button>
-            </el-form-item>
-          </el-row>
+        <el-form ref="filterForm" :model="formData" inline label-width="100px">
+          <el-form-item label="消息标题">
+            <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-option v-for="(item) in systemData" :key="item.code" :label="item.name" :value="item.code" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-select v-model="formData.status" clearable placeholder="请选择">
+              <el-option v-for="(item) in statusData" :key="item.code" :label="item.name" :value="item.code" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="searchTable">查询</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-column type="index" width="50" />
-          <el-table-column prop="type" label="Type" />
-          <el-table-column prop="title" label="Title" />
-          <el-table-column label="Actions" align="center" width="200" class-name="small-padding fixed-width">
+          <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 />
+          <el-table-column prop="system" label="所属应用系统" width="160" show-overflow-tooltip />
+          <el-table-column prop="readStatus" label="状态" :formatter="formatDictData" width="60" />
+          <el-table-column prop="createTime" label="消息接收时间" width="160" />
+          <el-table-column prop="createUser" label="消息发送人" width="100" show-overflow-tooltip />
+          <el-table-column label="操作" align="center" width="160" class-name="action-column">
             <template slot-scope="scope">
-              <el-button type="text" @click="viewDetail(scope.row.id)">Detail</el-button>
-              <el-button type="text" icon="el-icon-download">Read</el-button>
+              <!-- <el-button type="text" @click="viewDetail(scope.row.id)">详情</el-button> -->
+              <el-button type="text" @click="viewDetail(scope.row.content)">详情</el-button>
+              <el-button v-if="scope.row.readStatus === 0" type="text" @click="markRead(scope.row)">不再提醒</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -58,11 +62,22 @@
         />
       </div>
     </el-dialog>
+    <el-dialog
+      :visible.sync="detailVisible"
+      :close-on-press-escape="true"
+      :close-on-click-modal="false"
+      lock-scroll
+      append-to-body
+      title="消息内容"
+      @close="closeDetail"
+    >
+      <pre>{{ content }}</pre>
+    </el-dialog>
   </div>
 </template>
 <script>
-import { isNull } from '@/utils/convert'
-import { fetchTableList } from '@/api/message'
+import { isNull, toQuery, formatDictData } from '@/utils/convert'
+import { fetchTableList, pushMarkRead } from '@/api/message'
 
 export default {
   props: {},
@@ -80,13 +95,16 @@ export default {
       formData: {
         title: '',
         systemCode: '',
-        status: ''
+        status: null
       },
       // select data
+      typeData: [{ 'code': 4, 'name': '任务类' }, { 'code': 5, 'name': '通知类' }, { 'code': 6, 'name': '超期提醒类' }],
       systemData: [{ 'code': '1', 'name': 'System1' }, { 'code': '2', 'name': 'System2' }],
-      statusData: [{ 'code': '1', 'name': 'Todo' }, { 'code': '2', 'name': 'Done' }],
+      statusData: [{ 'code': 0, 'name': '待办' }, { 'code': 1, 'name': '已办' }],
       // others
-      other: ''
+      loading: false,
+      detailVisible: false,
+      content: ''
     }
   },
   methods: {
@@ -113,21 +131,33 @@ export default {
     },
     // 获取table数据
     getTablelist() {
-      this.loadBody = true
-      fetchTableList(this.current, this.size, this.formData.title, this.formData.systemCode, this.formData.status).then(response => {
-        this.loadBody = false
+      this.loading = true
+      const params = {
+        current: this.current,
+        size: this.size,
+        // orders: '["column":"createTime","asc":false]',
+        title: this.formData.title,
+        systemCode: this.formData.systemCode,
+        readStatus: this.formData.status
+      }
+      fetchTableList(toQuery(params)).then(response => {
+        this.loading = false
         if (!isNull(response.data)) {
           this.tableData = response.data.records
-          // 总条数
           this.total = response.data.total
-          // 当前页
         } else {
           this.tableData = []
           this.total = 0
         }
       }).catch(error => {
-        this.loadBody = false
         console.log(error)
+        this.loading = false
+        this.$message.error({
+          type: 'error',
+          duration: 0,
+          showClose: true,
+          message: '获取消息列表出错: ' + error.message
+        })
       })
     },
     /**
@@ -141,9 +171,46 @@ export default {
     close() {
       this.visible = false
     },
-    viewDetail(id) {
-      console.log(id)
+    viewDetail(content) {
+      this.content = content
+      this.detailVisible = true
+    },
+    closeDetail() {
+      this.content = ''
+      this.detailVisible = false
+    },
+    markRead(row) {
+      this.loading = true
+      pushMarkRead(row.id).then(res => {
+        row.readStatus = 1
+        this.loading = false
+      }).catch(error => {
+        console.log(error)
+        this.loading = false
+        this.$message.error({
+          type: 'error',
+          duration: 0,
+          showClose: true,
+          message: '不再提醒操作出错: ' + error.message
+        })
+      })
+    },
+    formatDictData(row, column, cellValue) {
+      let data
+      if (column.property === 'messageType') {
+        data = this.typeData
+      } else if (column.property === 'readStatus') {
+        data = this.statusData
+      }
+      return formatDictData(data, cellValue)
     }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+</style>

src/views/home/components/Search.vue

@@ -1,14 +1,32 @@
 <template>
-  <el-row type="flex" justify="center" class="searh-row">
-    <el-col :span="10"><el-input placeholder="请输入搜索内容" /></el-col>
-    <el-col :span="2"><el-button type="primary" icon="el-icon-search">智搜</el-button></el-col>
-  </el-row>
+  <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-row>
+  </div>
 </template>
 
 <script>
+import { isNull } from '@/utils/convert'
 export default {
+  name: 'Search',
   data() {
-    return {}
+    return {
+      searchText: ''
+    }
+  },
+  methods: {
+    eagleSearch() {
+      if (!isNull(this.searchText)) {
+        this.$alert(this.searchText)
+      } else {
+        this.$message({
+          type: 'info',
+          message: '请输入查询内容'
+        })
+      }
+    }
   }
 }
 </script>

src/views/home/components/Specification.vue

@@ -1,20 +1,22 @@
 <template>
-  <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>
-    </div>
-    <el-scrollbar class="spec-content">
-      <el-table :data="specData" :show-header="false" size="mini">
-        <el-table-column show-overflow-tooltip>
-          <template slot-scope="scope">
-            <el-link :underline="false">{{ scope.row.name }}</el-link>
-          </template>
-        </el-table-column>
-        <el-table-column prop="createDate" width="140" />
-      </el-table>
-    </el-scrollbar>
-  </el-card>
+  <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>
+      </div>
+      <el-scrollbar class="spec-content">
+        <el-table :data="specData" :show-header="false" size="mini">
+          <el-table-column show-overflow-tooltip>
+            <template slot-scope="scope">
+              <el-link :underline="false">{{ scope.row.name }}</el-link>
+            </template>
+          </el-table-column>
+          <el-table-column prop="createDate" width="140" />
+        </el-table>
+      </el-scrollbar>
+    </el-card>
+  </div>
 </template>
 
 <script>

src/views/home/components/System.vue

@@ -1,20 +1,22 @@
 <template>
-  <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>
-    </div>
-    <el-carousel class="system-content" :autoplay="false" arrow="never" trigger="click">
-      <el-carousel-item v-for="(page,index) in carouselData" :key="index">
-        <div class="system-box">
-          <div v-for="item in page" :key="item.id" class="system-item-box">
-            <el-avatar :size="56" fit="fill" :src="item.link" />
-            <div class="system-title">{{ item.name }}</div>
+  <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>
+      </div>
+      <el-carousel class="system-content" :autoplay="false" arrow="never" trigger="click">
+        <el-carousel-item v-for="(page,index) in carouselData" :key="index">
+          <div class="system-box">
+            <div v-for="item in page" :key="item.id" class="system-item-box" @click="jumpTo(item.link)">
+              <el-avatar :size="56" fit="fill" />
+              <div class="system-title">{{ item.name }}</div>
+            </div>
           </div>
-        </div>
-      </el-carousel-item>
-    </el-carousel>
-  </el-card>
+        </el-carousel-item>
+      </el-carousel>
+    </el-card>
+  </div>
 </template>
 
 <script>
@@ -32,19 +34,19 @@ export default {
   data() {
     return {
       rawData: [
-        { id: '1', code: '1', name: 'System1', link: '', icon: 'icon-1' },
-        { id: '2', code: '2', name: 'System2', link: '', icon: 'icon-2' },
-        { id: '3', code: '3', name: 'System3', link: '', icon: 'icon-3' },
-        { id: '4', code: '4', name: 'System4', link: '', icon: 'icon-4' },
-        { id: '5', code: '5', name: 'System5', link: '', icon: 'icon-5' },
-        { id: '6', code: '6', name: 'System6', link: '', icon: 'icon-6' },
-        { id: '7', code: '7', name: 'System7', link: '', icon: 'icon-7' },
-        { id: '8', code: '8', name: 'System8', link: '', icon: 'icon-8' },
-        { id: '9', code: '9', name: 'System9', link: '', icon: 'icon-9' },
-        { id: '10', code: '10', name: 'System10', link: '', icon: 'icon-10' },
-        { id: '11', code: '11', name: 'System11', link: '', icon: 'icon-11' },
-        { id: '12', code: '12', name: 'System12', link: '', icon: 'icon-12' },
-        { id: '13', code: '13', name: 'System13', link: '', icon: 'icon-13' }
+        { id: '1', code: '1', name: 'System1', link: 'https://www.baidu.com', icon: 'icon-1' },
+        { id: '2', code: '2', name: 'System2', link: 'https://www.baidu.com', icon: 'icon-2' },
+        { id: '3', code: '3', name: 'System3', link: 'https://www.baidu.com', icon: 'icon-3' },
+        { id: '4', code: '4', name: 'System4', link: 'https://www.baidu.com', icon: 'icon-4' },
+        { id: '5', code: '5', name: 'System5', link: 'https://www.baidu.com', icon: 'icon-5' },
+        { id: '6', code: '6', name: 'System6', link: 'https://www.baidu.com', icon: 'icon-6' },
+        { id: '7', code: '7', name: 'System7', link: 'https://www.baidu.com', icon: 'icon-7' },
+        { id: '8', code: '8', name: 'System8', link: 'https://www.baidu.com', icon: 'icon-8' },
+        { id: '9', code: '9', name: 'System9', link: 'https://www.baidu.com', icon: 'icon-9' },
+        { id: '10', code: '10', name: 'System10', link: 'https://www.baidu.com', icon: 'icon-10' },
+        { id: '11', code: '11', name: 'System11', link: 'https://www.baidu.com', icon: 'icon-11' },
+        { id: '12', code: '12', name: 'System12', link: 'https://www.baidu.com', icon: 'icon-12' },
+        { id: '13', code: '13', name: 'System13', link: 'https://www.baidu.com', icon: 'icon-13' }
       ],
       carouselData2: []
     }
@@ -75,6 +77,9 @@ export default {
           this.carouselData2.push(this.rawData.slice(i * this.pageSize, (i + 1) * this.pageSize))
         }
       }
+    },
+    jumpTo(link) {
+      window.open(link, '_blank')
     }
   }
 }

src/views/home/components/SystemEdit.vue

@@ -0,0 +1,216 @@
+<template>
+  <div>
+    <el-dialog
+      v-loading="loading"
+      :visible.sync="visible"
+      :close-on-press-escape="true"
+      :close-on-click-modal="false"
+      lock-scroll
+      append-to-body
+      custom-class="home-sys-dialog"
+      :title="'我的' + title"
+      @close="close"
+    >
+      <div class="list-filter">
+        <el-form ref="filterForm" :model="formData" inline label-width="100px">
+          <el-form-item label="消息标题">
+            <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-option v-for="(item) in systemData" :key="item.code" :label="item.name" :value="item.code" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-select v-model="formData.status" clearable placeholder="请选择">
+              <el-option v-for="(item) in statusData" :key="item.code" :label="item.name" :value="item.code" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="searchTable">查询</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-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 />
+          <el-table-column prop="system" label="所属应用系统" width="160" show-overflow-tooltip />
+          <el-table-column prop="readStatus" label="状态" :formatter="formatDictData" width="60" />
+          <el-table-column prop="createTime" label="消息接收时间" width="160" />
+          <el-table-column prop="createUser" label="消息发送人" width="100" show-overflow-tooltip />
+          <el-table-column label="操作" align="center" width="160" class-name="action-column">
+            <template slot-scope="scope">
+              <!-- <el-button type="text" @click="viewDetail(scope.row.id)">详情</el-button> -->
+              <el-button type="text" @click="viewDetail(scope.row.content)">详情</el-button>
+              <el-button v-if="scope.row.readStatus === 0" type="text" @click="markRead(scope.row)">不再提醒</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-if="total > 0" class="page">
+        <el-pagination
+          layout="total, sizes, prev, pager, next, jumper"
+          :current-page="current"
+          :total="total"
+          :page-sizes="pageSizeAll"
+          :page-size="size"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </el-dialog>
+    <el-dialog
+      :visible.sync="detailVisible"
+      :close-on-press-escape="true"
+      :close-on-click-modal="false"
+      lock-scroll
+      append-to-body
+      title="消息内容"
+      @close="closeDetail"
+    >
+      <pre>{{ content }}</pre>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { isNull, toQuery, formatDictData } from '@/utils/convert'
+import { fetchTableList, pushMarkRead } from '@/api/message'
+
+export default {
+  props: {},
+  data() {
+    return {
+      // dialog
+      visible: false,
+      // table
+      current: 1,
+      size: 20,
+      total: 0,
+      pageSizeAll: [10, 20, 50, 100, 200, 500],
+      tableData: [],
+      // filter
+      formData: {
+        title: '',
+        systemCode: '',
+        status: null
+      },
+      // select data
+      typeData: [{ 'code': 4, 'name': '任务类' }, { 'code': 5, 'name': '通知类' }, { 'code': 6, 'name': '超期提醒类' }],
+      systemData: [{ 'code': '1', 'name': 'System1' }, { 'code': '2', 'name': 'System2' }],
+      statusData: [{ 'code': 0, 'name': '待办' }, { 'code': 1, 'name': '已办' }],
+      // others
+      loading: false,
+      detailVisible: false,
+      content: ''
+    }
+  },
+  methods: {
+    // 改变每页显示条数
+    handleSizeChange(val) {
+      this.current = 1
+      this.size = val
+      this.getTablelist()
+    },
+    // 切换第几页
+    handleCurrentChange(val) {
+      this.current = val
+      this.getTablelist()
+    },
+    // 重置搜索项
+    resetTable(formName) {
+      this.$refs[formName].resetFields()
+      this.getTablelist()
+    },
+    // 点击搜索按钮
+    searchTable() {
+      this.current = 1
+      this.getTablelist()
+    },
+    // 获取table数据
+    getTablelist() {
+      this.loading = true
+      const params = {
+        current: this.current,
+        size: this.size,
+        // orders: '["column":"createTime","asc":false]',
+        title: this.formData.title,
+        systemCode: this.formData.systemCode,
+        readStatus: this.formData.status
+      }
+      fetchTableList(toQuery(params)).then(response => {
+        this.loading = false
+        if (!isNull(response.data)) {
+          this.tableData = response.data.records
+          this.total = response.data.total
+        } else {
+          this.tableData = []
+          this.total = 0
+        }
+      }).catch(error => {
+        console.log(error)
+        this.loading = false
+        this.$message.error({
+          type: 'error',
+          duration: 0,
+          showClose: true,
+          message: '获取消息列表出错: ' + error.message
+        })
+      })
+    },
+    /**
+     * 加载附件界面
+     */
+    open() {
+      this.tableData = []
+      this.visible = true
+      this.searchTable()
+    },
+    close() {
+      this.visible = false
+    },
+    viewDetail(content) {
+      this.content = content
+      this.detailVisible = true
+    },
+    closeDetail() {
+      this.content = ''
+      this.detailVisible = false
+    },
+    markRead(row) {
+      this.loading = true
+      pushMarkRead(row.id).then(res => {
+        row.readStatus = 1
+        this.loading = false
+      }).catch(error => {
+        console.log(error)
+        this.loading = false
+        this.$message.error({
+          type: 'error',
+          duration: 0,
+          showClose: true,
+          message: '不再提醒操作出错: ' + error.message
+        })
+      })
+    },
+    formatDictData(row, column, cellValue) {
+      let data
+      if (column.property === 'messageType') {
+        data = this.typeData
+      } else if (column.property === 'readStatus') {
+        data = this.statusData
+      }
+      return formatDictData(data, cellValue)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+</style>

src/views/home/index.vue

@@ -11,10 +11,12 @@
       :margin="[10, 10]"
       :use-css-transforms="true"
     >
-      <grid-item v-for="item in layout" :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :style="'display: ' + (item.i === '1' ? 'block' : 'none' )">
-        <component :is="components[item.i]" class="card-box" :page-size="item.i === '4' ? 5 : 10" />
+      <!-- <grid-item v-for="item in layout" :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :style="'display: ' + (item.i === '1' ? 'block' : 'none' )"> -->
+      <grid-item v-for="item in layout" :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i">
+        <component :is="components[item.i]" :ref="components[item.i]" class="card-box" v-bind="componentProps(item.i)" />
       </grid-item>
     </grid-layout>
+    <information ref="Information" />
   </div>
 </template>
 
@@ -28,6 +30,7 @@ import System from './components/System'
 // import System from './components/System'
 import Specification from './components/Specification'
 import Link from './components/Link'
+import Information from './components/Information'
 import Test from './components/Test'
 
 let sseClient
@@ -43,6 +46,7 @@ export default {
     System,
     Specification,
     Link,
+    Information,
     Test
   },
   data() {
@@ -56,7 +60,7 @@ export default {
         { 'x': 6, 'y': 15, 'w': 8, 'h': 7, 'i': '5' },
         { 'x': 0, 'y': 21, 'w': 14, 'h': 4, 'i': '6' }
       ],
-      components: ['Search', 'Test', 'Business', 'System', 'System', 'Specification', 'Link']
+      components: ['Search', 'Message', 'Business', 'System', 'System', 'Specification', 'Link']
     }
   },
   computed: {
@@ -76,6 +80,15 @@ export default {
     }
   },
   methods: {
+    componentProps(index) {
+      if (index === '3') {
+        return { pageSize: 10 }
+      }
+      if (index === '4') {
+        return { pageSize: 5 }
+      }
+      return {}
+    },
     calcLayoutWidth() {
       document.getElementsByClassName('home-container')[0].style.width = document.getElementsByClassName('home-container')[0].offsetWidth + 'px'
     },
@@ -108,7 +121,10 @@ export default {
     },
     handleMessage(message) {
       console.log(message)
+      this.$refs.Message[0].addNewMessage(message)
+      this.$refs.Information.open()
     }
+
   }
 }
 </script>
@@ -116,34 +132,40 @@ export default {
 <style lang="scss" scoped>
 $msgCardHeaderHeight: 43px;
 
-.card-box {
-  height: 100%;
-
-  ::v-deep {
-    .el-card__header {
-      padding: 10px 10px !important;
-      height: $msgCardHeaderHeight;
-      span{
-        font-weight: bold;
-      }
-    }
+.home-container {
+  .card-box {
+    height: 100%;
 
-    .el-card__body {
-      height: calc(100% - #{$msgCardHeaderHeight});
-      padding: 0 10px 10px 10px;
-      &>* {
+    ::v-deep {
+      .el-card {
         height: 100%;
-      }
-    }
 
-    .el-scrollbar__wrap{
-      overflow-x: hidden;
-    }
-    .el-scrollbar__bar.is-horizontal {
-      display: none;
-    }
-    .el-table__row .cell {
-      padding-left: 0 !important;
+        .el-card__header {
+          padding: 10px 10px !important;
+          height: $msgCardHeaderHeight;
+          span{
+            font-weight: bold;
+          }
+        }
+
+        .el-card__body {
+          height: calc(100% - #{$msgCardHeaderHeight});
+          padding: 0 10px 10px 10px;
+          &>* {
+            height: 100%;
+          }
+        }
+
+        .el-scrollbar__wrap{
+          overflow-x: hidden;
+        }
+        .el-scrollbar__bar.is-horizontal {
+          display: none;
+        }
+        .el-table__row .cell {
+          padding-left: 0 !important;
+        }
+      }
     }
   }
 }

vue.config.js

@@ -36,18 +36,18 @@ module.exports = {
       warnings: false,
       errors: true
     },
-    // proxy: {
-    //   // detail: https://cli.vuejs.org/config/#devserver-proxy
-    //   '/api': {
-    //     target: 'http://127.0.0.1:8082/',
-    //     changeOrigin: true,
-    //     ws: true,
-    //     pathRewrite: {
-    //       '^/api': ''
-    //     }
-    //   }
-    // }
-    before: require('./mock/mock-server.js')
+    proxy: {
+      // detail: https://cli.vuejs.org/config/#devserver-proxy
+      '/api': {
+        target: 'http://127.0.0.1:8082/',
+        changeOrigin: true,
+        ws: true,
+        pathRewrite: {
+          '^/api': ''
+        }
+      }
+    }
+    // before: require('./mock/mock-server.js')
   },
   configureWebpack: {
     // provide the app's title in webpack's name field, so that