sync

mock/message.js

@@ -0,0 +1,28 @@
+module.exports = [
+  // user login
+  {
+    url: '/message/page',
+    type: 'get',
+    response: config => {
+      return {
+        code: 200,
+        msg: 'success',
+        data: {
+          total: 43,
+          records: [
+            { 'id': '0', 'title': 'test1', 'appName': 'System1', 'type': 'type1', 'status': 'todo', 'createDate': '2023-07-15 01:02:03', 'createUser': 'zhangsan' },
+            { 'id': '1', 'title': 'test1', 'appName': 'System1', 'type': 'type1', 'status': 'todo', 'createDate': '2023-07-15 01:02:03', 'createUser': 'zhangsan' },
+            { 'id': '2', 'title': 'test1', 'appName': 'System1', 'type': 'type1', 'status': 'todo', 'createDate': '2023-07-15 01:02:03', 'createUser': 'zhangsan' },
+            { 'id': '3', 'title': 'test1', 'appName': 'System1', 'type': 'type1', 'status': 'todo', 'createDate': '2023-07-15 01:02:03', 'createUser': 'zhangsan' },
+            { 'id': '4', 'title': 'test1', 'appName': 'System1', 'type': 'type1', 'status': 'todo', 'createDate': '2023-07-15 01:02:03', 'createUser': 'zhangsan' },
+            { 'id': '5', 'title': 'test1', 'appName': 'System1', 'type': 'type1', 'status': 'todo', 'createDate': '2023-07-15 01:02:03', 'createUser': 'zhangsan' },
+            { 'id': '6', 'title': 'test1', 'appName': 'System1', 'type': 'type1', 'status': 'todo', 'createDate': '2023-07-15 01:02:03', 'createUser': 'zhangsan' },
+            { 'id': '7', 'title': 'test1', 'appName': 'System1', 'type': 'type1', 'status': 'todo', 'createDate': '2023-07-15 01:02:03', 'createUser': 'zhangsan' },
+            { 'id': '8', 'title': 'test1', 'appName': 'System1', 'type': 'type1', 'status': 'todo', 'createDate': '2023-07-15 01:02:03', 'createUser': 'zhangsan' },
+            { 'id': '9', 'title': 'test1', 'appName': 'System1', 'type': 'type1', 'status': 'todo', 'createDate': '2023-07-15 01:02:03', 'createUser': 'zhangsan' }
+          ]
+        }
+      }
+    }
+  }
+]

src/api/message.js

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

src/views/home/components/MessageList.vue

@@ -3,82 +3,146 @@
     <el-dialog
       :visible.sync="visible"
       :close-on-press-escape="true"
-      :close-on-click-modal="true"
+      :close-on-click-modal="false"
       :lock-scroll="true"
       title="Message List"
-      @close="Close"
+      @close="close"
     >
       <div class="list-filter">
-        <el-form ref="formData" :model="formData" :inline="true" label-width="140px">
+        <el-form ref="filterForm" :model="formData" :inline="true" label-width="140px">
           <el-row>
-            <el-form-item prop="title" label="消息标题">
-              <el-select v-model="formData.scenario" multiple clearable placeholder="Please select" @change="searchTable">
-                <el-option v-for="(item) in scenarioData" :key="item" :label="item" :value="item" />
-              </el-select>
+            <el-form-item label="Title">
+              <el-input v-model="formData.title" class="filter-item" />
             </el-form-item>
-            <el-form-item prop="appCode" label="所属应用系统">
-              <el-select v-model="formData.geo" multiple clearable placeholder="Please select" @change="searchTable">
-                <el-option v-for="(item) in geoData" :key="item" :label="item" :value="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 prop="approveStatus" label="状态">
-              <el-select v-model="formData.approveStatus" multiple clearable placeholder="Please select" @change="searchTable">
-                <el-option v-for="(item) in approveStatusData" :key="item" :label="item" :value="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('formData')">Reset</el-button>
+              <el-button type="danger" @click="resetTable('filterForm')">Reset</el-button>
             </el-form-item>
           </el-row>
         </el-form>
       </div>
       <div class="list-table">
         <el-table :data="tableData" fit border stripe height="300" style="width: 100%;">
-          <el-table-column label="File Name" prop="filename" min-width="220px" align="center" />
+          <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">
             <template slot-scope="scope">
-              <el-button type="text" icon="el-icon-download" @click="Download(scope.row)" />
+              <el-button type="text" @click="viewDetail(scope.row.id)">Detail</el-button>
+              <el-button type="text" icon="el-icon-download">Read</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>
   </div>
 </template>
 <script>
+import { isNull } from '@/utils/convert'
+import { fetchTableList } 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: [],
-      visible: false
+      // filter
+      formData: {
+        title: '',
+        systemCode: '',
+        status: ''
+      },
+      // select data
+      systemData: [{ 'code': '1', 'name': 'System1' }, { 'code': '2', 'name': 'System2' }],
+      statusData: [{ 'code': '1', 'name': 'Todo' }, { 'code': '2', 'name': 'Done' }],
+      // others
+      other: ''
     }
   },
   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.loadBody = true
+      fetchTableList(this.current, this.size, this.formData.title, this.formData.systemCode, this.formData.status).then(response => {
+        this.loadBody = 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)
+      })
+    },
     /**
      * 加载附件界面
      */
     open() {
       this.tableData = []
       this.visible = true
-      this.getListData()
+      this.searchTable()
     },
     close() {
       this.visible = false
     },
-    getListData(id) {
-      fetchListData(id).then(response => {
-        if (!isNull(response.data)) {
-          this.tableData = response.data
-        } else {
-          this.tableData = []
-        }
-      }).catch(error => {
-        console.log(error)
-      })
+    viewDetail(id) {
+      console.log(id)
     }
   }
 }

src/views/home/components/Test.vue

@@ -1,11 +1,32 @@
 <template>
-  <div>Test</div>
+  <div>
+    <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>
+      </div>
+      <div>
+        aaa
+      </div>
+    </el-card>
+    <message-list ref="messageList" />
+  </div>
 </template>
 
 <script>
+import MessageList from './MessageList'
+
 export default {
+  components: {
+    MessageList
+  },
   data() {
     return {}
+  },
+  methods: {
+    showList() {
+      this.$refs.messageList.open()
+    }
   }
 }
 </script>

src/views/home/index.vue

@@ -11,7 +11,7 @@
       :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">
+      <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>
     </grid-layout>
@@ -56,7 +56,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', 'Message', 'Business', 'System', 'System', 'Specification', 'Link']
+      components: ['Search', 'Test', 'Business', 'System', 'System', 'Specification', 'Link']
     }
   },
   computed: {