项目模块

anrui-system-ui/src/views/Home/Home.vue

@@ -50,7 +50,10 @@
         <el-col :span="10">
           <div class="grid-content bg-rtop">
             <img class="anrui" src="@/assets/home/anrui.png"/>
-            <p class="rt_title">通知公告</p>
+            <div>
+              <p class="rt_title_left">通知公告</p>
+              <p class="rt_title_right" @click="lookInform">更多</p>
+            </div>
             <ul>
               <li v-for="(item, index) in noticeandannouncement" :key="index" @click="lookInfo(item)">
                 <img class="rtImg" src="../../assets/home/notice.png"/>
@@ -127,6 +130,45 @@
         </el-row>
       </el-form>
     </el-dialog>
+    <el-dialog title="通知公告列表" :visible.sync="informVisible" width="80%">
+      <div>
+        <el-form ref="multipleTable" :inline="true" :model="informList" class="vinNoForm" label-width="100px">
+          <el-form-item label="标题">
+            <el-input v-model="informList.params.title" placeholder="" clearable/>
+          </el-form-item>
+          <el-form-item label="发布日期">
+            <el-date-picker v-model="informList.params.createDateStart" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
+            <span style="padding: 0 8px">至</span>
+            <el-date-picker v-model="informList.params.createDateEnd" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-select v-model="informList.params.state" clearable filterable>
+              <el-option v-for="item in state_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" size="small" @click="selectInform">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-table :key="informKey" v-loading="informLoading" :data="listByinform" border fit highlight-current-row style="width: 100%;">
+        <el-table-column :index="informindexMethod" align="center" label="序号" type="index" width="80"/>
+        <el-table-column label="标题" align="center">
+          <template slot-scope="scope">
+            <span class="bluezi" @click="lookInformation(scope.row)">{{ scope.row.title }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createDate" label="发布时间" align="center" width="120" />
+        <el-table-column prop="validityDate" label="有效期至" align="center" width="120" />
+        <el-table-column prop="stateValue" label="状态" align="center" width="80" />
+        <el-table-column prop="topping" label="是否置顶" align="center" width="120" />
+      </el-table>
+      <div class="pages">
+        <div class="tit"/>
+        <!-- 翻页 -->
+        <pagination v-show="listByinform.length > 0" :limit.sync="informList.size" :page.sync="informList.current" :total="informList.total" class="pagination" @pagination="getInformList"/>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -135,7 +177,7 @@ import { getStorage, removeStorage } from '@/utils/auth'
 import User from '@/api/User/login.js'
 import { getLists, getTodoNum } from '@/api/system/home/home'
 import { getToBeReadNum } from '@/api/flow/read'
-import { details } from '@/api/notificationannouncement/notificationannouncement'
+import { details, listPage } from '@/api/notificationannouncement/notificationannouncement'
 
 export default {
   data() {
@@ -210,7 +252,33 @@ export default {
         typeKey: '',
         validityDate: '',
         userSid: ''
-      }
+      },
+      informVisible: false,
+      informKey: 0,
+      informLoading: false,
+      listByinform: [],
+      informList: {
+        current: 1,
+        size: 10,
+        total: 0,
+        params: {
+          createDateEnd: '',
+          createDateStart: '',
+          state: '',
+          title: '',
+          topping: ''
+        }
+      },
+      state_list: [
+        {
+          dictKey: '1',
+          dictValue: '开启'
+        },
+        {
+          dictKey: '2',
+          dictValue: '关闭'
+        }
+      ]
     }
   },
   beforeCreate() {
@@ -335,6 +403,34 @@ export default {
         }
       })
     },
+    lookInform() {
+      this.informVisible = true
+      this.selectInform()
+    },
+    selectInform() {
+      this.informList.current = 1
+      this.getInformList()
+    },
+    informindexMethod(index) {
+      var pagestart = (this.informList.current - 1) * this.informList.size
+      var pageindex = index + 1 + pagestart
+      return pageindex
+    },
+    getInformList() {
+      listPage(this.informList).then((response) => {
+        this.informLoading = false
+        if (response.success) {
+          this.listByinform = response.data.records
+          this.informList.total = response.data.total
+        } else {
+          this.listByinform = []
+          this.informList.total = 0
+        }
+      })
+    },
+    lookInformation(row) {
+      this.lookInfo({ sid: row.sid, pcUrl: row.pcUrl })
+    },
     todowork() {
       window.open('/#/todo' + '?token=' + getStorage(), '_blank')
       // this.$router.push({ path: '/todo' + '?token=' + getStorage() })
@@ -530,7 +626,7 @@ p {
       height: 40px;
     }
 
-    .rt_title {
+    .rt_title_left {
       position: absolute;
       top: 10px;
       left: 15px;
@@ -539,6 +635,15 @@ p {
       font-weight: 600;
       color: #191919;
     }
+    .rt_title_right {
+      position: absolute;
+      top: 10px;
+      right: 15px;
+      font-size: 18px;
+      font-family: SourceHanSerifCN;
+      font-weight: 600;
+      color: #191919;
+    }
 
     ul {
       margin: 0px auto;