try

package.json

@@ -48,7 +48,9 @@
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
+    "less": "^4.1.3",
     "mavon-editor": "^2.10.4",
+    "mockjs": "^1.1.0",
     "nprogress": "0.2.0",
     "quill": "1.3.7",
     "screenfull": "5.0.2",

src/api/message/message.js

@@ -0,0 +1,10 @@
+// 后端接口版本
+import request from '@/utils/request'
+
+// 获取消息列表
+export function getMessage() {
+  return request({
+    url: '/messageList/messageList',
+    method: 'get'
+  })
+}

src/api/message/mock/message.js

@@ -0,0 +1,10 @@
+// mock版本
+import request from '@/utils/requestFastMock'
+
+// 获取消息列表
+export function getMessage() {
+  return request({
+    url: '/messageList/messageList',
+    method: 'get'
+  })
+}

src/api/mockServe/mock.js

@@ -0,0 +1,7 @@
+import Mock from 'mockjs';
+
+import NoticeApi from './notice';
+
+Mock.mock(/api\/notice\/getData/, 'get', NoticeApi.getNoticList);
+Mock.mock(/api\/notice\/searchData/, 'get', NoticeApi.searchNoticList);
+Mock.mock(/api\/notice\/detailNotic/, 'get', NoticeApi.detailNotic);

src/api/mockServe/notice.js

@@ -0,0 +1,68 @@
+import Mock from "mockjs";
+
+let List = [];
+const count = 200;
+
+for (let i = 0; i < count; i++) {
+    List.push(
+        Mock.mock({
+            // "id|+1": 1,
+            id: Mock.Random.guid(),
+            "title": "@cword(5)",
+            "time": "@date('yy-MM-dd hh:mm:ss')",
+            content: "@cword(50)"
+        })
+    )
+}
+
+function paramObj(url) {
+    const search = url.split('?')[1];
+    if (!search) {
+        return {}
+    }
+    return JSON.parse(
+        '{"' +
+        decodeURIComponent(search)
+            .replace(/"/g, '\\"')
+            .replace(/&/g, '","')
+            .replace(/=/g, '":"') +
+        '"}'
+    )
+}
+
+export default {
+    getNoticList: config => {
+        const { name, page = 1, limit = 10 } = paramObj(config.url);
+        const mockList = List.filter(user => {
+            if (name && user.name.indexOf(name) === -1 && user.addr.indexOf(name) === -1) return false;
+            return true;
+        })
+        const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1));
+        return {
+            code: 200,
+            count: mockList.length,
+            list: pageList
+        }
+    },
+    searchNoticList: config => {
+        const { name } = paramObj(config.url);
+        const searchList = List.filter(user => {
+            return user.title === name;
+        })
+        return {
+            code: 200,
+            count: searchList.length,
+            list: searchList
+        }
+    },
+    detailNotic: config => {
+        const { id } = paramObj(config.url);
+        const detail = List.filter(user => {
+            return user.id === id;
+        })
+        return {
+            code: 200,
+            data: detail
+        }
+    }
+}

src/api/notice/notice.js

@@ -1,8 +1,29 @@
 import request from '@/utils/request'
 // 获取公告详细信息
-export function getNotice() {
+// export function getNotice2() {
+//     return request({
+//         url: 'https://www.fastmock.site/mock/094301fab3b0ae090e5afe11df9aba38/dev-api/notice',//只有dev-api才不会被影响
+//         method: 'get'
+//     })
+// }
+export function getNotice(params) {
     return request({
-        url: 'https://www.fastmock.site/mock/094301fab3b0ae090e5afe11df9aba38/dev-api/notice',//只有dev-api才不会被影响
-        method: 'get'
+        url: '/api/notice/getData',
+        // method: 'get',
+        params
     })
-}
+}
+export function searchNotice(params) {
+    return request({
+        url: '/api/notice/searchData',
+        // method: 'get',
+        params
+    })
+}
+export function detailNotice(params) {
+    return request({
+        url: '/api/notice/detailNotic',
+        // method: 'get',
+        params
+    })
+}

src/assets/styles/index.css

@@ -0,0 +1,699 @@
+/**
+$base-menu-color:hsla(0,0%,100%,.65);
+$base-menu-color-active:#fff;
+$base-menu-background:#001529;
+$base-logo-title-color: #ffffff;
+
+$base-menu-light-color:rgba(0,0,0,.70);
+$base-menu-light-background:#ffffff;
+$base-logo-light-title-color: #001529;
+
+$base-sub-menu-background:#000c17;
+$base-sub-menu-hover:#001528;
+*/
+:export {
+  menuColor: #bfcbd9;
+  menuLightColor: rgba(0, 0, 0, 0.7);
+  menuColorActive: #f4f4f5;
+  menuBackground: #304156;
+  menuLightBackground: #ffffff;
+  subMenuBackground: #1f2d3d;
+  subMenuHover: #001528;
+  sideBarWidth: 200px;
+  logoTitleColor: #ffffff;
+  logoLightTitleColor: #001529;
+}
+
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/* fade-transform */
+.fade-transform--move,
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all .5s;
+}
+
+.fade-transform-leave-active {
+  position: absolute;
+}
+
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* breadcrumb transition */
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all .5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all .5s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}
+
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+
+.el-upload input[type="file"] {
+  display: none !important;
+}
+
+.el-upload__input {
+  display: none;
+}
+
+.cell .el-tag {
+  margin-right: 0px;
+}
+
+.small-padding .cell {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.fixed-width .el-button--mini {
+  padding: 7px 10px;
+  width: 60px;
+}
+
+.status-col .cell {
+  padding: 0 10px;
+  text-align: center;
+}
+
+.status-col .cell .el-tag {
+  margin-right: 0px;
+}
+
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+}
+
+.upload-container .el-upload {
+  width: 100%;
+}
+
+.upload-container .el-upload .el-upload-dragger {
+  width: 100%;
+  height: 200px;
+}
+
+.el-dropdown-menu a {
+  display: block;
+}
+
+.el-range-editor.el-input__inner {
+  display: inline-flex !important;
+}
+
+.el-range-separator {
+  box-sizing: content-box;
+}
+
+.el-menu--collapse
+> div
+> .el-submenu
+> .el-submenu__title
+.el-submenu__icon-arrow {
+  display: none;
+}
+
+#app .main-container {
+  min-height: 100%;
+  transition: margin-left .28s;
+  margin-left: 200px;
+  position: relative;
+}
+
+#app .sidebarHide {
+  margin-left: 0 !important;
+}
+
+#app .sidebar-container {
+  -webkit-transition: width .28s;
+  transition: width 0.28s;
+  width: 200px !important;
+  background-color: #304156;
+  height: 100%;
+  position: fixed;
+  font-size: 0px;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1001;
+  overflow: hidden;
+  -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+}
+
+#app .sidebar-container .horizontal-collapse-transition {
+  transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+}
+
+#app .sidebar-container .scrollbar-wrapper {
+  overflow-x: hidden !important;
+}
+
+#app .sidebar-container .el-scrollbar__bar.is-vertical {
+  right: 0px;
+}
+
+#app .sidebar-container .el-scrollbar {
+  height: 100%;
+}
+
+#app .sidebar-container.has-logo .el-scrollbar {
+  height: calc(100% - 50px);
+}
+
+#app .sidebar-container .is-horizontal {
+  display: none;
+}
+
+#app .sidebar-container a {
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+}
+
+#app .sidebar-container .svg-icon {
+  margin-right: 16px;
+}
+
+#app .sidebar-container .el-menu {
+  border: none;
+  height: 100%;
+  width: 100% !important;
+}
+
+#app .sidebar-container .el-menu-item, #app .sidebar-container .el-submenu__title {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+
+#app .sidebar-container .submenu-title-noDropdown:hover,
+#app .sidebar-container .el-submenu__title:hover {
+  background-color: rgba(0, 0, 0, 0.06) !important;
+}
+
+#app .sidebar-container .theme-dark .is-active > .el-submenu__title {
+  color: #f4f4f5 !important;
+}
+
+#app .sidebar-container .nest-menu .el-submenu > .el-submenu__title,
+#app .sidebar-container .el-submenu .el-menu-item {
+  min-width: 200px !important;
+}
+
+#app .sidebar-container .nest-menu .el-submenu > .el-submenu__title:hover,
+#app .sidebar-container .el-submenu .el-menu-item:hover {
+  background-color: rgba(0, 0, 0, 0.06) !important;
+}
+
+#app .sidebar-container .theme-dark .nest-menu .el-submenu > .el-submenu__title,
+#app .sidebar-container .theme-dark .el-submenu .el-menu-item {
+  background-color: #1f2d3d !important;
+}
+
+#app .sidebar-container .theme-dark .nest-menu .el-submenu > .el-submenu__title:hover,
+#app .sidebar-container .theme-dark .el-submenu .el-menu-item:hover {
+  background-color: #001528 !important;
+}
+
+#app .hideSidebar .sidebar-container {
+  width: 54px !important;
+}
+
+#app .hideSidebar .main-container {
+  margin-left: 54px;
+}
+
+#app .hideSidebar .submenu-title-noDropdown {
+  padding: 0 !important;
+  position: relative;
+}
+
+#app .hideSidebar .submenu-title-noDropdown .el-tooltip {
+  padding: 0 !important;
+}
+
+#app .hideSidebar .submenu-title-noDropdown .el-tooltip .svg-icon {
+  margin-left: 20px;
+}
+
+#app .hideSidebar .el-submenu {
+  overflow: hidden;
+}
+
+#app .hideSidebar .el-submenu > .el-submenu__title {
+  padding: 0 !important;
+}
+
+#app .hideSidebar .el-submenu > .el-submenu__title .svg-icon {
+  margin-left: 20px;
+}
+
+#app .hideSidebar .el-menu--collapse .el-submenu > .el-submenu__title > span {
+  height: 0;
+  width: 0;
+  overflow: hidden;
+  visibility: hidden;
+  display: inline-block;
+}
+
+#app .el-menu--collapse .el-menu .el-submenu {
+  min-width: 200px !important;
+}
+
+#app .mobile .main-container {
+  margin-left: 0px;
+}
+
+#app .mobile .sidebar-container {
+  transition: transform .28s;
+  width: 200px !important;
+}
+
+#app .mobile.hideSidebar .sidebar-container {
+  pointer-events: none;
+  transition-duration: 0.3s;
+  transform: translate3d(-200px, 0, 0);
+}
+
+#app .withoutAnimation .main-container,
+#app .withoutAnimation .sidebar-container {
+  transition: none;
+}
+
+.el-menu--vertical > .el-menu .svg-icon {
+  margin-right: 16px;
+}
+
+.el-menu--vertical .nest-menu .el-submenu > .el-submenu__title:hover,
+.el-menu--vertical .el-menu-item:hover {
+  background-color: rgba(0, 0, 0, 0.06) !important;
+}
+
+.el-menu--vertical > .el-menu--popup {
+  max-height: 100vh;
+  overflow-y: auto;
+}
+
+.el-menu--vertical > .el-menu--popup::-webkit-scrollbar-track-piece {
+  background: #d3dce6;
+}
+
+.el-menu--vertical > .el-menu--popup::-webkit-scrollbar {
+  width: 6px;
+}
+
+.el-menu--vertical > .el-menu--popup::-webkit-scrollbar-thumb {
+  background: #99a9bf;
+  border-radius: 20px;
+}
+
+/**
+$base-menu-color:hsla(0,0%,100%,.65);
+$base-menu-color-active:#fff;
+$base-menu-background:#001529;
+$base-logo-title-color: #ffffff;
+
+$base-menu-light-color:rgba(0,0,0,.70);
+$base-menu-light-background:#ffffff;
+$base-logo-light-title-color: #001529;
+
+$base-sub-menu-background:#000c17;
+$base-sub-menu-hover:#001528;
+*/
+:export {
+  menuColor: #bfcbd9;
+  menuLightColor: rgba(0, 0, 0, 0.7);
+  menuColorActive: #f4f4f5;
+  menuBackground: #304156;
+  menuLightBackground: #ffffff;
+  subMenuBackground: #1f2d3d;
+  subMenuHover: #001528;
+  sideBarWidth: 200px;
+  logoTitleColor: #ffffff;
+  logoLightTitleColor: #001529;
+}
+
+.blue-btn {
+  background: #324157;
+}
+
+.blue-btn:hover {
+  color: #324157;
+}
+
+.blue-btn:hover:before, .blue-btn:hover:after {
+  background: #324157;
+}
+
+.light-blue-btn {
+  background: #3A71A8;
+}
+
+.light-blue-btn:hover {
+  color: #3A71A8;
+}
+
+.light-blue-btn:hover:before, .light-blue-btn:hover:after {
+  background: #3A71A8;
+}
+
+.red-btn {
+  background: #C03639;
+}
+
+.red-btn:hover {
+  color: #C03639;
+}
+
+.red-btn:hover:before, .red-btn:hover:after {
+  background: #C03639;
+}
+
+.pink-btn {
+  background: #E65D6E;
+}
+
+.pink-btn:hover {
+  color: #E65D6E;
+}
+
+.pink-btn:hover:before, .pink-btn:hover:after {
+  background: #E65D6E;
+}
+
+.green-btn {
+  background: #30B08F;
+}
+
+.green-btn:hover {
+  color: #30B08F;
+}
+
+.green-btn:hover:before, .green-btn:hover:after {
+  background: #30B08F;
+}
+
+.tiffany-btn {
+  background: #4AB7BD;
+}
+
+.tiffany-btn:hover {
+  color: #4AB7BD;
+}
+
+.tiffany-btn:hover:before, .tiffany-btn:hover:after {
+  background: #4AB7BD;
+}
+
+.yellow-btn {
+  background: #FEC171;
+}
+
+.yellow-btn:hover {
+  color: #FEC171;
+}
+
+.yellow-btn:hover:before, .yellow-btn:hover:after {
+  background: #FEC171;
+}
+
+.pan-btn {
+  font-size: 14px;
+  color: #fff;
+  padding: 14px 36px;
+  border-radius: 8px;
+  border: none;
+  outline: none;
+  transition: 600ms ease all;
+  position: relative;
+  display: inline-block;
+}
+
+.pan-btn:hover {
+  background: #fff;
+}
+
+.pan-btn:hover:before, .pan-btn:hover:after {
+  width: 100%;
+  transition: 600ms ease all;
+}
+
+.pan-btn:before, .pan-btn:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 2px;
+  width: 0;
+  transition: 400ms ease all;
+}
+
+.pan-btn::after {
+  right: inherit;
+  top: inherit;
+  left: 0;
+  bottom: 0;
+}
+
+.custom-button {
+  display: inline-block;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  background: #fff;
+  color: #fff;
+  -webkit-appearance: none;
+  text-align: center;
+  box-sizing: border-box;
+  outline: 0;
+  margin: 0;
+  padding: 10px 15px;
+  font-size: 14px;
+  border-radius: 4px;
+}
+
+body {
+  height: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+  font-weight: 700;
+}
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+#app {
+  height: 100%;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+.no-padding {
+  padding: 0px !important;
+}
+
+.padding-content {
+  padding: 4px 0;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+div:focus {
+  outline: none;
+}
+
+.fr {
+  float: right;
+}
+
+.fl {
+  float: left;
+}
+
+.pr-5 {
+  padding-right: 5px;
+}
+
+.pl-5 {
+  padding-left: 5px;
+}
+
+.block {
+  display: block;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.inlineBlock {
+  display: block;
+}
+
+.clearfix:after {
+  visibility: hidden;
+  display: block;
+  font-size: 0;
+  content: " ";
+  clear: both;
+  height: 0;
+}
+
+aside {
+  background: #eef1f6;
+  padding: 8px 24px;
+  margin-bottom: 20px;
+  border-radius: 2px;
+  display: block;
+  line-height: 32px;
+  font-size: 16px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  color: #2c3e50;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+aside a {
+  color: #337ab7;
+  cursor: pointer;
+}
+
+aside a:hover {
+  color: #20a0ff;
+}
+
+.app-container {
+  padding: 20px;
+}
+
+.components-container {
+  margin: 30px 50px;
+  position: relative;
+}
+
+.pagination-container {
+  margin-top: 30px;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.sub-navbar {
+  height: 50px;
+  line-height: 50px;
+  position: relative;
+  width: 100%;
+  text-align: right;
+  padding-right: 20px;
+  transition: 600ms ease position;
+  background: linear-gradient(90deg, #20b6f9 0%, #20b6f9 0%, #2178f1 100%, #2178f1 100%);
+}
+
+.sub-navbar .subtitle {
+  font-size: 20px;
+  color: #fff;
+}
+
+.sub-navbar.draft {
+  background: #d0d0d0;
+}
+
+.sub-navbar.deleted {
+  background: #d0d0d0;
+}
+
+.link-type,
+.link-type:focus {
+  color: #337ab7;
+  cursor: pointer;
+}
+
+.link-type:hover,
+.link-type:focus:hover {
+  color: #20a0ff;
+}
+
+.filter-container {
+  padding-bottom: 10px;
+}
+
+.filter-container .filter-item {
+  display: inline-block;
+  vertical-align: middle;
+  margin-bottom: 10px;
+}
+
+.multiselect {
+  line-height: 16px;
+}
+
+.multiselect--active {
+  z-index: 1000 !important;
+}
+
+.build {
+  border-radius: 4px;
+}
+
+.list {
+  border-radius: 4px;
+}

src/assets/styles/index.scss

@@ -189,3 +189,10 @@ aside {
 .multiselect--active {
   z-index: 1000 !important;
 }
+
+.build{
+  border-radius: 4px;
+}
+.list{
+  border-radius: 4px;
+}

src/main.js

@@ -15,6 +15,7 @@ import plugins from './plugins' // plugins
 import { download } from '@/utils/request'
 import mavonEditor from 'mavon-editor'
 import 'mavon-editor/dist/css/index.css'
+import './api/mockServe/mock'
 
 import './assets/icons' // icon
 import './permission' // permission control

src/router/index.js

@@ -30,7 +30,7 @@ import Layout from '@/layout'
 
 // 公共路由
 export const constantRoutes = [
- 
+
   {
     path: '/redirect',
     component: Layout,
@@ -90,10 +90,10 @@ export const constantRoutes = [
     ]
   },
   {
-    path:"/noticeList",
-    component:Layout,
-    meta:{ title:'公告管理' ,icon:'dashboard'},
-    children:[
+    path: "/noticeList",
+    component: Layout,
+    meta: { title: '公告管理', icon: 'dashboard' },
+    children: [
       {
         path: 'noticeList',
         component: () => import('@/views/notice/noticeList'),
@@ -105,10 +105,44 @@ export const constantRoutes = [
         component: () => import('@/views/notice/addNotice'),
         name: 'addNotice',
         meta: { title: '添加公告', icon: 'user' }
+      },
+      {
+        path: 'details/:id?',
+        hidden: true,
+        component: () => import('@/views/notice/details'),
+        name: 'details',
+        meta: { title: '公告详情', icon: 'user' }
       }
     ]
   },
-     
+  {
+    path: '/messageList',
+    component: Layout,
+    // redirect: '消息管理',
+    meta: { title: '消息管理', icon : "message" },
+    children: [
+      {
+        path: 'messageList',
+        component: () => import('@/views/message/messageList'),
+        name: 'messageList',
+        meta: { title: '消息列表', icon: 'list' }
+      },
+      {
+        path: 'addMessage',
+        component: () => import('@/views/message/addMessage'),
+        name: 'addMessage',
+        meta: { title: '创建消息', icon: 'build' }
+      },
+      {
+        path:'messageDetails',
+        component:() => import('@/views/message/messageDetails'),
+        name: 'messageDetails',
+        meta: { title:'公告详情', icon:'user'},
+        hidden: true
+      }
+      // messageDetails
+    ]
+  } 
  
 ]
 
@@ -185,7 +219,7 @@ export const dynamicRoutes = [
       }
     ]
   },
-  
+
 ]
 
 // 防止连续点击多次路由报错

src/utils/env.ts

@@ -0,0 +1,3 @@
+const debug = process.env.NODE_ENV !== 'production';
+
+export default debug;

src/utils/requestFastMock.js

@@ -0,0 +1,146 @@
+import axios from 'axios'
+import { Notification, MessageBox, Message, Loading } from 'element-ui'
+import store from '@/store'
+import { getToken } from '@/utils/auth'
+import errorCode from '@/utils/errorCode'
+import { tansParams, blobValidate } from "@/utils/ruoyi";
+import cache from '@/plugins/cache'
+import { saveAs } from 'file-saver'
+
+let downloadLoadingInstance;
+// 是否显示重新登录
+export let isRelogin = { show: false };
+
+axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
+// 创建axios实例
+const service = axios.create({
+  // axios中请求配置有baseURL选项，表示请求URL公共部分
+  baseURL: process.env.VUE_APP_BASE_API_FAST_MOCK,
+  // 超时
+  timeout: 10000
+})
+
+// request拦截器
+service.interceptors.request.use(config => {
+  // 是否需要设置 token
+  const isToken = (config.headers || {}).isToken === false
+  // 是否需要防止数据重复提交
+  const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
+  if (getToken() && !isToken) {
+    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+  }
+  // get请求映射params参数
+  if (config.method === 'get' && config.params) {
+    let url = config.url + '?' + tansParams(config.params);
+    url = url.slice(0, -1);
+    config.params = {};
+    config.url = url;
+  }
+  if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
+    const requestObj = {
+      url: config.url,
+      data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
+      time: new Date().getTime()
+    }
+    const sessionObj = cache.session.getJSON('sessionObj')
+    if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
+      cache.session.setJSON('sessionObj', requestObj)
+    } else {
+      const s_url = sessionObj.url;                  // 请求地址
+      const s_data = sessionObj.data;                // 请求数据
+      const s_time = sessionObj.time;                // 请求时间
+      const interval = 1000;                         // 间隔时间(ms)，小于此时间视为重复提交
+      if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
+        const message = '数据正在处理，请勿重复提交';
+        console.warn(`[${s_url}]: ` + message)
+        return Promise.reject(new Error(message))
+      } else {
+        cache.session.setJSON('sessionObj', requestObj)
+      }
+    }
+  }
+  return config
+}, error => {
+    console.log(error)
+    Promise.reject(error)
+})
+
+// 响应拦截器
+service.interceptors.response.use(res => {
+    // 未设置状态码则默认成功状态
+    const code = res.data.code || 200;
+    // 获取错误信息
+    const msg = errorCode[code] || res.data.msg || errorCode['default']
+    // 二进制数据则直接返回
+    if(res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer'){
+      return res.data
+    }
+    if (code === 401) {
+      if (!isRelogin.show) {
+        isRelogin.show = true;
+        MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
+          isRelogin.show = false;
+          store.dispatch('LogOut').then(() => {
+            location.href = '/index';
+          })
+      }).catch(() => {
+        isRelogin.show = false;
+      });
+    }
+      return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
+    } else if (code === 500) {
+      Message({ message: msg, type: 'error' })
+      return Promise.reject(new Error(msg))
+    } else if (code === 601) {
+      Message({ message: msg, type: 'warning' })
+      return Promise.reject('error')
+    } else if (code !== 200) {
+      Notification.error({ title: msg })
+      return Promise.reject('error')
+    } else {
+      return res.data
+    }
+  },
+  error => {
+    console.log('err' + error)
+    let { message } = error;
+    if (message == "Network Error") {
+      message = "后端接口连接异常";
+    } else if (message.includes("timeout")) {
+      message = "系统接口请求超时";
+    } else if (message.includes("Request failed with status code")) {
+      message = "系统接口" + message.substr(message.length - 3) + "异常";
+    }
+    Message({ message: message, type: 'error', duration: 5 * 1000 })
+    return Promise.reject(error)
+  }
+)
+
+// 通用下载方法
+export function download(url, params, filename, config) {
+  downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
+  return service.post(url, params, {
+    transformRequest: [(params) => { return tansParams(params) }],
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    responseType: 'blob',
+    ...config
+  }).then(async (data) => {
+    const isLogin = await blobValidate(data);
+    if (isLogin) {
+      const blob = new Blob([data])
+      saveAs(blob, filename)
+    } else {
+      const resText = await data.text();
+      const rspObj = JSON.parse(resText);
+      const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
+      Message.error(errMsg);
+    }
+    downloadLoadingInstance.close();
+  }).catch((r) => {
+    console.error(r)
+    Message.error('下载文件出现错误，请联系管理员！')
+    downloadLoadingInstance.close();
+  })
+}
+
+export default service

src/views/message/addMessage.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="message-add" :style="{height:height,width:width}"  >
+    
+    <!-- <el-page-header @back="goBack" content="创建消息"></el-page-header> -->
+    <div class="message-add-box">
+      <el-form :model="message" :rules="rules" ref="form" label-width="100px">
+        <el-form-item label="消息标题:" prop="messageTitle">
+          <el-input v-model="message.messageTitle" placeholder="请输入消息标题"></el-input>
+        </el-form-item> 
+      
+        <el-form-item label="发布时间:" required>
+          <el-col :span="11">
+            <el-form-item prop="dateTime">
+              <el-time-picker placeholder="选择时间" v-model="message.dateTime" style="width: 100%;"></el-time-picker>
+            </el-form-item>
+          </el-col>
+        </el-form-item>
+
+        <el-form-item label="接受用户:" prop="receivedUsers">
+          <el-input type="textarea" :rows="2" placeholder="请导入用户" autosize v-model="message.receivedUsers"></el-input>
+        </el-form-item>  
+
+        <el-form-item label="消息内容:" prop="messageContent">
+          <quill-editor 
+            class="ql-editor"
+            v-model="content" 
+            ref="myQuillEditor" 
+            :options="editorOption" 
+            >
+          </quill-editor>
+        </el-form-item>
+
+        <!-- <el-form-item>
+          <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
+        </el-form-item> -->
+      </el-form>
+    </div>     
+  </div>
+</template>
+
+<script>
+import Quill from 'quill' // 引入编辑器
+// 自定义字体大小
+const Size = Quill.import('attributors/style/size')
+Size.whitelist = ['10px', '12px', '16px', '18px', '20px', '30px', '32px']
+Quill.register(Size, true)
+
+// 自定义字体类型
+var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'sans-serif']
+var Font = Quill.import('formats/font')
+Font.whitelist = fonts
+Quill.register(Font, true)
+
+ export default {
+    data() {
+      return {
+        message: {
+          messageTitle: '',
+          dateTime: '',
+          receivedUsers: '',
+          messageContent: '',
+        },
+        rules: {
+          messageTitle: [
+            { required: true, message: '请输入消息标题', trigger: 'blur' }
+          ],
+          dateTime: [
+            { type: 'date', required: true, message: '选择时间', trigger: 'change' }
+          ],
+          receivedUsers: [
+            { required: true, message: '请导入用户', trigger: 'blur' }
+          ],
+          messageContent: [
+            { required: true, trigger: 'blur' }
+          ]
+        },
+        content: `<p>这是 vue-quill-editor 的内容！</p>`, //双向数据绑定数据
+        // 富文本编辑器配置
+        editorOption: {
+          modules: {
+              toolbar: [
+                ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
+                ['blockquote', 'code-block'], // 引用  代码块
+                  [{ header: 1 }, { header: 2 }], // 1、2 级标题
+                  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
+                  [{ script: 'sub' }, { script: 'super' }], // 上标/下标
+                  [{ indent: '-1' }, { indent: '+1' }], // 缩进
+                  [{ direction: 'rtl' }], // 文本方向
+                  [{ size: ['12px', false, '16px', '18px', '20px', '30px'] }], // 字体大小
+                  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
+                  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
+                  [{ font: [false, 'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字体种类
+                  [{ align: [] }], // 对齐方式
+                  ['clean'], // 清除文本格式
+                  ['link', 'image', 'video'] // 链接、图片、视频
+          ],
+            placeholder: '请输入正文'
+          }
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.message-add{
+  width: 700px;
+  height: 100%;
+  position: absolute;
+  top: 30px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  border: 1px solid #ccc;
+}
+.message-add-box{
+  padding: 40px;
+}
+/* .users-input-box{
+  color:aqua;
+} */
+
+.quill-editor /deep/ .ql-container {
+    min-height: 220px;
+  }
+
+  .ql-container {
+    min-height: 230px;
+  }
+
+.ql-toolbar.ql-snow {
+  border: 1px solid #ccc;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+  padding: 8px;
+  width: 450px;
+}
+.ql-toolbar.ql-snow + .ql-container.ql-snow {
+    border-top: 0px;
+    width: 450px;
+}
+</style>

src/views/message/messageDetails.vue

@@ -0,0 +1,84 @@
+<template>
+    <div class="app">
+      <el-button id="returnBtn" @click="returnBtn">返回</el-button>
+      <div class="noticeDetails">
+        <div class="title">消息详情</div>
+        <h3 id="noticeTitle">数字邮局正式上线，创世版首发!</h3>
+        <!-- <div class="noticeTitle">数字邮局正式上线，创世版首发!</div> -->
+        <h4 id="noticeTime">2023-01-13 11:46:38</h4>
+        <div class="noticeContent">
+          邮贝数字邮局，是由中国邮政集团有限公司北京市公司设立，同时使用人民日报全国党媒联盟链进行数字邮品和数字产品的登记、认证与确权，服务广大集邮用户和数字收藏爱好者的邮政官方数字邮品和数字产品发行平台。邮贝数字邮局由北京游贝数字科技有限公司负责运营。
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  
+  
+  <style scoped>
+  #returnBtn{
+      margin-top: 10px;
+      margin-left: 10px;
+  }
+  .noticeDetails {
+    width: 800px;
+    height: 300px;
+    /* background: red; */
+    margin: 50px auto;
+    border: 1px solid #ebeef5;
+  }
+  .title {
+    font-size: 30px;
+    font-family: PingFang SC;
+    color: #333333;
+    text-align: center;
+    font-weight: bolder;
+    margin-top: 10px;
+  }
+  #noticeTitle {
+    /* font-size: 18px; */
+    font-family: PingFang SC;
+    color: #333333;
+    margin-left: 30px;
+    margin-top: 20px;
+    font-weight: bolder;
+  }
+  #noticeTime {
+    font-family: PingFang SC;
+    margin-left: 30px;
+    color: #333333;
+  }
+  .noticeContent {
+    font-family: PingFang SC;
+    color: #333333;
+    width: 700px;
+    /* background: red; */
+    margin: 0 auto;
+    text-indent: 2em;
+  }
+  </style>
+  
+  
+  <script>
+  export default {
+    data() {
+      return {
+        noticeTitle: "",
+        noticeTime: "",
+      };
+    },
+    mounted() {
+      //获取到当前公告的标题和时间
+      this.noticeTitle = document.querySelector("#noticeTitle");
+      this.noticeTime = document.querySelector("#noticeTime");
+      noticeTitle.innerHTML = this.$route.query.title;
+      noticeTime.innerHTML = this.$route.query.publishTime;
+    },
+    methods:{
+      //返回上一页
+      returnBtn(){
+          this.$router.go(-1)
+      }
+    }
+  };
+  </script>

src/views/message/messageList.vue

@@ -0,0 +1,281 @@
+<template>
+    <div class="right" :style="{ height: height, width: width }">
+      <div class="up">
+        <div>
+          <div class="up-title"><i class="el-icon-search"></i>筛选搜索</div>
+          <div class="btn">
+            <el-button plain>重置</el-button>
+            <el-button type="primary" plain>查询列表</el-button>
+          </div>
+        </div>
+        <div class="left-up">
+          <div class="up-input-title">
+            消息标题:<el-input v-model="input" class="up-input" placeholder="请输入内容"></el-input>
+          </div>
+          <div class="up-input-title-right">
+            <span class="demonstration">发布时间:</span>
+            <el-date-picker v-model="value2" type="datetimerange" class="up-input-right" :picker-options="pickerOptions"
+              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
+            </el-date-picker>
+          </div>
+        </div>
+      </div>
+      <div class="down">
+        <div class="down-add">
+          <el-row :gutter="24">
+            <el-col :span="22" class="down-title"> <i class="el-icon-tickets">消息列表</i> </el-col>
+            <el-col :span="2"> <el-button id="addBtn" size="small" @click="addNoticce">添加</el-button> </el-col>
+          </el-row>
+        </div>
+        <div class="down-table">
+          <el-table :data="tableData" 
+          order style="width: 100%" class="messagetable">
+            <el-table-column prop="id" label="ID">
+            </el-table-column>
+            <el-table-column :formatter="stateFormat" prop="messageTitle" label="消息标题">
+            </el-table-column>
+            <el-table-column prop="phoneNumber" label="手机号">
+            </el-table-column>
+            <el-table-column prop="publishTime" label="发布时间">
+            </el-table-column>
+            <el-table-column prop="operate" label="操作">
+              <template slot-scope="scope">
+                <el-button size="mini" type="text" @click="viewDetails(scope.$index)">查看详情</el-button>
+                <el-popconfirm title="你确定删除本条消息吗？" @confirm="deleteMessage(scope.$index)">
+                  <el-button class="btn-delete" size="mini" type="text" icon="el-icon-delete"
+                     slot="reference">删除</el-button>
+                </el-popconfirm>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="bottom-page">
+          <el-pagination  layout="prev, pager, next" :total="mockMessageList.length"  @size-change="handleSizeChange"
+        @current-change="handleCurrentChange">
+          </el-pagination>
+        </div>
+        <span class="bottom-number">共{{ mockMessageList.length }}条 </span>
+      </div>
+    </div>
+  </template>
+  <script>
+  // mock 版本
+  import { getMessage } from '../../api/message/mock/message.js'
+  
+  
+  
+  //非mock版本
+  
+  
+  export default {
+    props: {
+  
+    },
+    data() {
+      return {
+        tableData: [],
+        input: "",
+        value2: "",
+        mock: "",
+        mockMessageList: [],
+        currentPage : 1,
+        pagesize : 10 
+      }
+    },
+    mounted() {
+      this.getMockMessageList();
+    
+    },
+    beforeDestroy() {
+    },
+    methods: {
+      getMockMessageList() {
+        getMessage().then((res) => {
+          this.mockMessageList = res.data.list
+          this.getPageData()
+        })
+      },
+      //分页功能
+      getPageData(){
+        console.log(this.mockMessageList);
+        let start = (this.currentPage - 1) * this.pagesize;
+        let end = start + this.pagesize;
+        this.tableData = this.mockMessageList.slice(start, end);
+      },
+      handleSizeChange(val) {
+        this.pagesize = val;
+        this.getPageData();
+      },
+      handleCurrentChange(val) {
+        this.currentPage = val;
+        this.getPageData();
+      },
+      stateFormat(row, column, cellValue) {
+        if (!cellValue) return ''
+        if (cellValue.length > 15) {       //最长固定显示10个字符
+          return cellValue.slice(0, 15) + '...'
+        }
+        return cellValue
+      },
+      //删除列表
+      deleteMessage(row) {
+        console.log(row);
+         //console.log(this.tableData[index]);
+          if (this.mockMessageList.length == 0) {
+          
+          } else {
+            this.tableData.splice(row, 1);
+          }
+      },
+      //查看详情
+      viewDetails(row) {
+        this.$router.push({
+          name: "messageDetails",
+          query: {
+            publishTime: '时间',
+            title: '标题'
+          }
+        });
+      },
+      //添加跳转
+      addNoticce() {
+        this.$router.push("/messageList/addMessage");
+      }
+    }
+  }
+  
+  
+  </script>
+  
+  <style scoped>
+  .up {
+    width: 96%;
+    height: 170px;
+    margin-top: 20px;
+    margin-left: 2%;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  
+  }
+  
+  .up-title {
+    font-size: 20px;
+    width: 20%;
+    margin-left: 20px;
+    margin-top: 20px;
+    float: left;
+  }
+  
+  .btn {
+    float: right;
+    padding-right: 3%;
+    margin-top: 2.5%;
+  }
+  
+  .up-input {
+    width: 250px;
+    margin-left: 15px;
+  }
+  
+  .up-input-title {
+  
+    margin-left: 40px;
+  
+    float: left;
+  }
+  
+  .up-input-right {
+    margin-left: 15px;
+    width: 500px;
+  }
+  
+  .up-input-title-right {
+    width: 800px;
+    margin-left: 450px;
+  
+  
+  }
+  
+  .left-up {
+    width: 80%;
+    float: left;
+    height: 37px;
+    margin-top: 50px;
+  }
+  
+  .right-up {
+    width: 16%;
+    margin-top: 2%;
+    float: right;
+  
+  }
+  
+  .anniu {
+    padding-right: 5%;
+  }
+  
+  .down {
+    margin-top: 40px;
+  }
+  
+  .down-add {
+    padding: 10px;
+    margin: 0 27px;
+    border: 1px solid #ccc;
+    border-radius: 2px
+  }
+  
+  .down-title {
+    padding-top: 10px;
+    color: #303133;
+  }
+  
+  .down-table {
+    margin-top: 15px;
+    text-align: center;
+    margin: 35px 27px;
+  }
+  
+  .el-table .el-table__header-wrapper th,
+  .el-table .el-table__fixed-header-wrapper th {
+    word-break: break-word;
+    /* background-color: #f8f8f9; */
+    color: #515a6e;
+    height: 40px;
+    font-size: 13px;
+    text-align: center;
+  }
+  
+  .bottom-number {
+    padding-top: 5px;
+    color: #303133;
+    float: right;
+  }
+  
+  .bottom-page {
+    float: right;
+  }
+  
+  .el-icon-search {
+    padding-right: 10px;
+  }
+  
+  .btn-delete {
+    margin-left: 20px;
+  }
+  
+  /**
+  自适应
+  */
+  /* .demonstration{
+    width: 50%;
+  } */
+  .right {
+    float: none;
+    width: 100%;
+    height: 100%;
+    /* background-color: #9dc3e6; */
+  }
+  </style>

src/views/notice/addNotice.vue

@@ -1,116 +1,116 @@
 <template>
-    <div>
-      <el-card>
-        <el-page-header @back="goback" content="创建公告"></el-page-header>
-      </el-card>
-      <div class="body">
-        <div class="s-body">
-  
-          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
-            <el-form-item label="公告名称:  " prop="name">
-              <el-input v-model="ruleForm.name"></el-input>
-            </el-form-item>
-  
-  
-            <el-form-item label="发布时间:  " required>
-              <el-col>
-                <el-form-item prop="date2">
-                  <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
-                </el-form-item>
-              </el-col>
-            </el-form-item>
-            <el-form-item label="公告内容:  " prop="name">
-              <mavon-editor ref="md" v-model="notice.noticeContent" style="height:calc(100vh - 260px)" />
-  
-              <el-button type="danger" @click="dialogVisible = true " style='float:right'>发布公告</el-button>
-  
-              <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
-                <span>确认发布公告吗？</span>
-                <span slot="footer" class="dialog-footer">
-                  <el-button @click="dialogVisible = false">取 消</el-button>
-                  <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
-                </span>
-              </el-dialog>
-            </el-form-item>
-          </el-form>
-        </div>
+  <div>
+    <el-card>
+      <el-page-header @back="goback" content="创建公告"></el-page-header>
+    </el-card>
+    <div class="body">
+      <div class="s-body">
+
+        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+          <el-form-item label="公告名称:  " prop="name">
+            <el-input v-model="ruleForm.name"></el-input>
+          </el-form-item>
+
+
+          <el-form-item label="发布时间:  " required>
+            <el-col>
+              <el-form-item prop="date2">
+                <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
+              </el-form-item>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="公告内容:  " prop="name">
+            <mavon-editor ref="md" v-model="notice.noticeContent" style="height:calc(100vh - 260px)" />
+
+            <el-button type="danger" @click="dialogVisible = true " style='float:right'>发布公告</el-button>
+
+            <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
+              <span>确认发布公告吗？</span>
+              <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+              </span>
+            </el-dialog>
+          </el-form-item>
+        </el-form>
       </div>
     </div>
-  </template>
-  
-  
-  <script>
-  export default {
-    name: 'Addnotice',
-  
-    data() {
-      return {
-        ruleForm: {
-          name: '',
-          date2: '',
-        },
-        notice: {
-          noticeContent: ""
-        },
-        rules: {
-          name: [
-            { required: true, message: '请输入公告名称', trigger: 'blur' },
-  
-          ],
-          date2: [
-            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
-          ],
-        },
-        dialogVisible:false
-      }
-    },
-  
-    methods: {
-      goback() {
-        window.history.go(-1)
+  </div>
+</template>
+
+
+<script>
+export default {
+  name: 'Addnotice',
+
+  data() {
+    return {
+      ruleForm: {
+        name: '',
+        date2: '',
       },
-      submitForm(formName) {
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            alert('submit!');
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
-        });
+      notice: {
+        noticeContent: ""
       },
-      resetForm(formName) {
-        this.$refs[formName].resetFields();
+      rules: {
+        name: [
+          { required: true, message: '请输入公告名称', trigger: 'blur' },
+
+        ],
+        date2: [
+          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
+        ],
       },
-      handleClose(done) {
-          this.$confirm('确认关闭？')
-            .then(_ => {
-              done();
-            })
-            .catch(_ => {});
-        }
-      
-  
-  
+      dialogVisible:false
     }
-  
-  
-  }
-  </script>
-  
-  <style scoped>
-  .body {
-    margin: auto;
-    width: 80%;
-    border: solid 2px rgb(239, 231, 231);
-    margin-top: 50px;
-    border-radius: 10px;
-  }
-  
-  .s-body {
-    margin: 0 auto;
-    width: 70%;
-    /* background-color: pink; */
-    padding-top: 80px;
+  },
+
+  methods: {
+    goback() {
+      window.history.go(-1)
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert('submit!');
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    handleClose(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      }
+    
+
+
   }
-  </style>
+
+
+}
+</script>
+
+<style scoped>
+.body {
+  margin: auto;
+  width: 80%;
+  border: solid 2px rgb(239, 231, 231);
+  margin-top: 50px;
+  border-radius: 10px;
+}
+
+.s-body {
+  margin: 0 auto;
+  width: 70%;
+  /* background-color: pink; */
+  padding-top: 80px;
+}
+</style>

src/views/notice/details.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="body">
+        <div class="container">
+            <h2 class="details">公告详情</h2>
+            <h3 class="title">{{notical.title}}</h3>
+            <div class="date">{{notical.time}}</div>
+            <p class="content">{{notical.content}}</p>
+        </div>
+    </div>
+</template>
+
+<script>
+import { detailNotice } from "@/api/notice/notice"
+export default {
+    data() {
+        return {
+            notical: {
+                id: '',
+                title: '',
+                time: '',
+                content: ''
+            }
+        }
+    },
+    created() {
+        console.log(this.$route.params.id);
+        let con = {
+            id: this.$route.params.id
+        }
+        detailNotice(con).then(({data}) => {
+            this.notical = data[0];
+        })
+    }
+}
+</script>
+
+
+<style scoped>
+.container {
+    width: 500px;
+    min-height: 360px;
+    border: 1px solid #ccc;
+    border-radius: 20px;
+    padding: 20px 40px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -80%);
+}
+
+.details {
+    text-align: center;
+}
+
+.date {
+    font-weight: 200;
+}
+
+.content {
+    text-indent: 2em;
+}
+</style>

src/views/notice/noticeList.vue

@@ -1,204 +1,226 @@
 <template>
-    <div>
-      <el-card>
-        <el-page-header @back="goback" content="公告列表"></el-page-header>
-      </el-card>
-      <el-container>
-        <el-header style="height: 150px;">
-          <div id="header-one">
-            <h2 class="el-icon-search" style="margin-left: 10px;">筛选搜索</h2>
-            <div id="header-one-btu">
-              <el-button @click="empty">重置</el-button>
-              <el-button type="primary" @click="check">搜索</el-button>
-            </div>
+  <div>
+    <el-card>
+      <el-page-header @back="goback" content="公告列表"></el-page-header>
+    </el-card>
+    <el-container>
+      <el-header style="height: 120px;">
+        <div id="header-one">
+          <h3 class="el-icon-search" style="margin-left: 10px;">筛选搜索</h3>
+          <div id="header-one-btu">
+            <el-button @click="empty">重置</el-button>
+            <el-button type="primary" @click="check">搜索</el-button>
           </div>
-          <div id="header-two">
-            <el-row>
-              <el-col :span="4" id="header-two-left">
-                <el-form ref="anFormRef" :model="anForm" label-width="80px">
-                  <el-form-item label="公告标题 :">
-                    <el-input v-model="anForm.anName" class="anInput" placeholder="筛选公告标题" center></el-input>
-                  </el-form-item>
-                </el-form>
-              </el-col>
-              <el-col :span="8">
-                <el-form label-width="80px">
-                  <el-form-item label="发布时间:">
-                    <el-col :span="11">
-                      <el-time-picker placeholder="开始日期"></el-time-picker>
-                    </el-col>
-                    <el-col class="line" :span="1">——</el-col>
-                    <el-col :span="11">
-                      <el-time-picker placeholder="结束日期"></el-time-picker>
-                    </el-col>
-                  </el-form-item>
-                </el-form>
-              </el-col>
-            </el-row>
-          </div>
-        </el-header>
-        <el-main>
-          <h2 class="el-icon-tickets">公告列表</h2>
-          <el-button id="main-btu" @click="addNotice()">添加</el-button>
-        </el-main>
-        <div>
-          <el-table :data="tableData" border style="width: 99%" id="footer-t">
-            <el-table-column type="index" label="ID" width="400" align="center">
-            </el-table-column>
-            <el-table-column prop="title" label="公告标题" align="center">
-            </el-table-column>
-            <el-table-column prop="time" label="发布时间" align="center">
-            </el-table-column>
-            <el-table-column prop="address" label="操作" align="center">
-              <template slot-scope="scope">
-                <el-button type="primary" @click="details">查看详情 </el-button>
-                <el-button type="danger" @click="deleteNoticeById"> 删除</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-          <!-- <el-pagination background layout="total, prev, pager, next" :total="0" id="page">
-          </el-pagination> -->
-          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
-            :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize"
-            layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
         </div>
-      </el-container>
-    </div>
-  </template>
-  <script>
-  import { getNotice } from "@/api/notice/notice"
-  export default {
-    data() {
-      return {
-        anForm: {
-          anName: '',
-        },
-        queryInfo: {
-          query: "",
-          pagenum: 1,
-          pagesize: 2,
-        },
-        tableData: [],
-      }
-    },
-  
-    created() {
-      this.getnotice()
-    },
-    methods: {
-      goback() {
-        window.history.go(-1)
+        <div id="header-two">
+          <el-row>
+            <el-col :span="4" id="header-two-left">
+              <el-form ref="anFormRef" :model="anForm" label-width="80px">
+                <el-form-item label="公告标题 :">
+                  <el-input v-model="anForm.anName" class="anInput" placeholder="筛选公告标题" center></el-input>
+                </el-form-item>
+              </el-form>
+            </el-col>
+            <el-col :span="8">
+              <el-form label-width="80px">
+                <el-form-item label="发布时间:">
+                  <el-col :span="11">
+                    <el-time-picker placeholder="开始日期"></el-time-picker>
+                  </el-col>
+                  <el-col class="line" :span="1">——</el-col>
+                  <el-col :span="11">
+                    <el-time-picker placeholder="结束日期"></el-time-picker>
+                  </el-col>
+                </el-form-item>
+              </el-form>
+            </el-col>
+          </el-row>
+        </div>
+      </el-header>
+      <el-main style="height: 110px;">
+        <h3 class="el-icon-tickets">公告列表</h3>
+        <el-button id="main-btu" @click="addNotice()">添加</el-button>
+      </el-main>
+      <div>
+        <el-table height="280" :data="tableData" border style="width: 99%" id="footer-t">
+          <el-table-column type="index" label="ID" width="400" align="center">
+          </el-table-column>
+          <el-table-column prop="title" label="公告标题" align="center">
+          </el-table-column>
+          <el-table-column prop="time" label="发布时间" align="center">
+          </el-table-column>
+          <el-table-column prop="address" label="操作" align="center">
+            <template slot-scope="scope">
+              <el-button type="primary" @click="details(scope.row)">查看详情 </el-button>
+              <el-button type="danger" @click="deleteNoticeById"> 删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination @current-change="handleCurrentChange" background layout="total, prev, pager, next" :total="total"
+          id="page">
+        </el-pagination>
+        <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+          :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize"
+          layout="total, sizes, prev, pager, next, jumper" :total="10"></el-pagination> -->
+        </div>
+    </el-container>
+  </div>
+</template>
+<script>
+import { getNotice, searchNotice } from "@/api/notice/notice"
+export default {
+  data() {
+    return {
+      anForm: {
+        anName: '',
       },
-      addNotice() {
-        this.$router.push('./addnotice')
+      // queryInfo: {
+      //   query: "",
+      //   pagenum: 1,
+      //   pagesize: 2,
+      // },
+      tableData: [],
+      pageData: {
+        page: 1,
+        limit: 10
       },
-      //获取公告
-      async getnotice() {
-        //解构赋值data
-        const { data: res } = await getNotice((resolve, reject) => {
-          console.log(resolve);
-        }).catch((e) => {
-          console.log(e);
+      total: 1
+    }
+  },
+
+  created() {
+    this.getnotice()
+  },
+  methods: {
+    goback() {
+      window.history.go(-1)
+    },
+    addNotice() {
+      this.$router.push('./addnotice')
+    },
+    //获取公告
+    async getnotice() {
+      getNotice(this.pageData).then((data) => {
+        this.tableData = data.list;
+        this.total = data.count;
+      })
+      //解构赋值data
+      // const { data: res } = await getNotice((resolve, reject) => {
+      //   console.log(resolve);
+      // }).catch((e) => {
+      //   console.log(e);
+      // })
+      // console.log(await getNotice())
+      // this.tableData = res.list
+    },
+    // handleSizeChange(newSize) {
+    //   this.queryInfo.pagesize = newSize;
+    //   this.getnotice();
+    // },
+
+    handleCurrentChange(newPage) {
+      // this.queryInfo.pagenum = newPage;
+      // this.getnotice();
+      this.pageData.page = newPage;
+      this.getnotice();
+    },
+
+    /**重置按钮 */
+    empty() {
+      this.anForm.anName = "";
+      this.getnotice();
+    },
+    /**搜索按钮 */
+    check() {
+      if (this.anForm.anName) {
+        let con = {
+          name: this.anForm.anName
+        }
+        searchNotice(con).then((data) => {
+          this.tableData = data.list;
+          this.total = data.count;
         })
-        console.log(res)
-        this.tableData = res.list
-      },
-      handleSizeChange(newSize) {
-        this.queryInfo.pagesize = newSize;
-        this.getnotice();
-      },
-  
-      handleCurrentChange(newPage) {
-        this.queryInfo.pagenum = newPage;
+      } else {
         this.getnotice();
-      },
-  
-      /**重置按钮 */
-      empty() {
-        this.anForm.anName = "";
-      },
-      /**搜索按钮 */
-      check() {
-  
-      },
-  
-  
-      /**查看详情 */
-      details() {
-  
-      },
-  
-      /**删除公告 */
-      deleteNoticeById(id) {
-        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          this.$message({
-            type: 'success',
-            message: '删除成功!'
-          });
-        }).catch(() => {
-          this.$message({
-            type: 'info',
-            message: '已取消删除'
-          });
-        });
       }
+    },
+
+    /**查看详情 */
+    details(val) {
+      this.$router.push('./details/' + val.id)
+    },
+
+    /**删除公告 */
+    deleteNoticeById(id) {
+      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        });
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        });
+      });
     }
-  };
-  
-  </script>
-  <style scoped>
-  .el-main {
-    color: #333;
-    border: 1px solid #d3d7d4;
-    border-radius: 5px;
-    margin-left: 30px;
-    margin-right: 30px;
-  }
-  
-  .el-header {
-    color: #333;
-    border: 1px solid #d3d7d4;
-    border-radius: 5px;
-    margin: 30px;
-  }
-  
-  .el-footer {}
-  
-  #footer-t {
-    color: #333;
-    border: 1px solid #d3d7d4;
-    border-radius: 5px;
-    margin-left: 10px;
-    margin-top: 30px;
-  }
-  
-  #header-one {}
-  
-  #header-two {
-    /* background-color: aqua; */
-    margin-left: 55px;
-  }
-  
-  #header-one-btu {
-    margin: 20px 20px 0px 0px;
-    float: right;
-  }
-  
-  #header-two-left {
-    margin-right: 100px;
-  }
-  
-  #main-btu {
-    float: right;
-    margin-top: 10px;
-  }
-  
-  #page {
-    float: right;
-    margin-top: 15px;
   }
-  </style>
+};
+
+</script>
+<style scoped>
+.el-main {
+  color: #333;
+  border: 1px solid #d3d7d4;
+  border-radius: 5px;
+  margin-left: 30px;
+  margin-right: 30px;
+}
+
+.el-header {
+  color: #333;
+  border: 1px solid #d3d7d4;
+  border-radius: 5px;
+  margin: 30px;
+}
+
+/* .el-footer {} */
+
+#footer-t {
+  color: #333;
+  border: 1px solid #d3d7d4;
+  border-radius: 5px;
+  margin-left: 10px;
+  margin-top: 30px;
+}
+
+/* #header-one {} */
+
+#header-two {
+  /* background-color: aqua; */
+  margin-left: 55px;
+}
+
+#header-one-btu {
+  margin: 20px 20px 0px 0px;
+  float: right;
+}
+
+#header-two-left {
+  margin-right: 100px;
+}
+
+#main-btu {
+  float: right;
+  margin-top: 10px;
+}
+
+#page {
+  float: right;
+  margin-top: 15px;
+}
+</style>