初始化

src/api/notice.js

@@ -0,0 +1,37 @@
+import request from '@/utils/request'
+
+// 获取消息列表
+export function getNoticeList(params) {
+  return request({
+    url: '/notice/list',
+    method: 'get',
+    params
+  })
+}
+
+// 更改全部消息状态
+export function changeAllReadFlag(params) {
+  return request({
+    url: '/notice/mark/read/all',
+    method: 'post',
+    params
+  })
+}
+
+// 更改消息状态
+export function changeReadFlag(params) {
+  return request({
+    url: '/notice/mark/read',
+    method: 'post',
+    data: params
+  })
+}
+
+// 获取消息列表
+export function getNoticeListCount(params) {
+  return request({
+    url: '/notice/list/count',
+    method: 'get',
+    params
+  })
+}

src/layout/components/Navbar.vue

@@ -9,14 +9,14 @@
     <div class="right-menu">
 
       <div class="right-menu-item hover-effect">
-        <el-tooltip effect="dark" content="线上客服" placement="bottom">
-          <a class="el-icon-service" style="font-size: 24px; line-height: 50px;" href="https://mpkf.weixin.qq.com/" target="_blank"></a>
+        <el-tooltip effect="dark" content="工程机登录" placement="bottom">
+            <a class="el-icon-s-platform" style="font-size: 24px; line-height: 50px;" href="https://mpkf.weixin.qq.com/" target="_blank"></a>
         </el-tooltip>
       </div>
 
       <el-badge :value="noticeCount" :max="10" :hidden="!noticeVisible" class="right-menu-item hover-effect">
         <el-tooltip effect="dark" content="系统消息" placement="bottom">
-<!--          <i class="el-icon-message-solid" @click="goNotice" style="font-size: 24px; line-height: 50px;"></i>-->
+          <i class="el-icon-message-solid" @click="goNotice" style="font-size: 24px; line-height: 50px;"></i>
         </el-tooltip>
         <!-- <el-button icon="el-icon-message-solid" type="text" class="notice-icon" @click="goNotice"></el-button> -->
       </el-badge>
@@ -48,7 +48,7 @@ import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
 import Screenfull from '@/components/Screenfull'
 import NavMenu from '@/components/NavMenu'
-// import {getNoticeListCount} from "@/api/notice";
+import {getNoticeListCount} from "@/api/notice";
 
 export default {
   data() {
@@ -58,16 +58,16 @@ export default {
     }
   },
   mounted() {
-    // const that = this
+    const that = this
     // 开定时器轮询未读消息接口(写在全局vuex里比较好)
-    // that.initNotice()
-    // this.timer = setInterval(function () {
-    //   that.initNotice()
-    // }, 3000)
+    that.initNotice()
+    this.timer = setInterval(function () {
+      that.initNotice()
+    }, 3000)
   },
   beforeDestroy() {
-    // window.clearInterval(this.timer)
-    // console.log('退出清理定时器' + this.timer)
+    window.clearInterval(this.timer)
+    console.log('退出清理定时器' + this.timer)
   },
   components: {
     Breadcrumb,
@@ -98,18 +98,18 @@ export default {
       // this.$router.push(`/login?redirect=${this.$route.fullPath}`)
       this.$router.push(`/login`)
     },
-    // initNotice() {
-    //   getNoticeListCount().then(res => {
-    //     if (res.data > 0 && this.noticeCount !== res.data) {
-    //       this.noticeCount = res.data
-    //     } else if (res.data === 0 && this.noticeCount !== res.data) {
-    //       this.noticeCount = 0
-    //     }
-    //   })
-    // },
-    // goNotice() {
-    //   this.$router.push('/notice/index')
-    // }
+    initNotice() {
+      getNoticeListCount().then(res => {
+        if (res.data > 0 && this.noticeCount !== res.data) {
+          this.noticeCount = res.data
+        } else if (res.data === 0 && this.noticeCount !== res.data) {
+          this.noticeCount = 0
+        }
+      })
+    },
+    goNotice() {
+      this.$router.push('/notice/index')
+    }
   }
 }
 </script>

src/views/notice/index.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选条件 -->
+    <div class="screen-container">
+      <div class="top clearfix">
+        <div class="title fl">条件筛选</div>
+      </div>
+      <el-form ref="screenForm" :model="screenForm" label-width="50px" size="small" label-position="left">
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12" :lg="6">
+            <el-form-item label="标志" prop="readFlag">
+              <el-select v-model="screenForm.readFlag" placeholder="全部标志" size="small">
+                <el-option label="全部" value=""></el-option>
+                <el-option label="未读" value="false"></el-option>
+                <el-option label="已读" value="true"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :lg="18" class="tr">
+            <el-form-item label="">
+              <el-button size="small" @click="resetScreenForm">清空</el-button>
+              <el-button size="small" type="primary" @click="submitScreenForm">搜索</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+
+    <div class="mymain-container">
+      <div class="btn-group clearfix">
+        <div class="fl">
+          <el-button size="small" @click="changeReadFlag('ALL')">全部标为已读</el-button>
+          <el-button size="small" @click="changeReadFlag('SEL')">标为已读消息</el-button>
+        </div>
+      </div>
+
+      <div class="table">
+        <el-table ref="noticeTable" v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
+          <el-table-column align="center" type="selection" width="40" :selectable="checkSelRow"></el-table-column>
+          <el-table-column align="center" label="消息编号" prop="noticeId" min-width="180"></el-table-column>
+          <el-table-column align="center" label="订单编号" prop="objId" min-width="180"></el-table-column>
+          <el-table-column align="center" label="标题" prop="title" min-width="80"></el-table-column>
+          <el-table-column align="center" label="消息类型" prop="type">
+            <template slot-scope="scope">
+              {{ scope.row.type | NOTICE_CURRENT_TYPE_FILTER }}
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="消息内容" prop="content" min-width="200"></el-table-column>
+          <el-table-column align="center" label="状态" class-name="status-col">
+            <template slot-scope="scope">
+              <el-tag :type="scope.row.readFlag ? 'success' : 'danger'">{{ scope.row.readFlag ? '已读' : '未读'}}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="创建时间" prop="createTime" min-width="160"></el-table-column>
+          <el-table-column align="center" label="操作" fixed="right" width="100">
+            <template slot-scope="scope">
+              <template v-if="checkBtnRole('status')">
+                <el-button type="text" v-if="scope.row.type === 1" @click="goOrderDetail(scope.row)">查看记录</el-button>
+              </template>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <div class="pagination clearfix">
+        <div class="fr">
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-sizes="[10, 20, 30, 50]"
+            :page-size="10"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="listTotal">
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoticeList, changeAllReadFlag, changeReadFlag } from "@/api/notice";
+
+export default {
+  name: "index",
+  data() {
+    return {
+      dataList: null, // 列表数据
+      listLoading: true, // 列表加载loading
+      screenForm: { // 筛选表单数据
+        readFlag: '' //
+      },
+      currentPage: 1, // 当前页码
+      pageSize: 10, // 每页数量
+      listTotal: 0 // 列表总数
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    // 查询按钮权限
+    checkBtnRole(value) {
+      // let btnRole = this.$route.meta.roles;
+      // if(!btnRole) {return true}
+      // let index = btnRole.indexOf(value);
+      // return index >= 0 ? true : false;
+      return true
+    },
+    getList() {
+      let params = {
+        readFlag: this.screenForm.readFlag,
+        pageNum: this.currentPage,
+        pageSize: this.pageSize
+      }
+
+      getNoticeList(params).then(res => {
+        this.dataList = res.data.records
+        this.listTotal = res.data.total
+        this.listLoading = false
+      })
+    },
+    // 检查行能否选中
+    checkSelRow(row) {
+      return !row.readFlag
+    },
+    // 提交筛选表单
+    submitScreenForm() {
+      this.currentPage = 1
+      this.getList()
+    },
+    // 重置筛选表单
+    resetScreenForm() {
+      this.$refs.screenForm.resetFields()
+      this.currentPage = 1
+      this.getList()
+    },
+    // 更改每页数量
+    handleSizeChange(val) {
+      this.pageSize = val
+      this.currentPage = 1
+      this.getList()
+    },
+    // 更改当前页
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this.getList()
+    },
+    changeReadFlag(type) {
+      if (type === 'ALL') {
+        changeAllReadFlag().then(() => {
+          this.getList()
+          this.$successMsg('全部标为已读成功')
+        })
+      } else {
+        if (this.$refs['noticeTable'].selection.length > 0) {
+          let noticeIds = []
+          this.$refs['noticeTable'].selection.forEach(row => {
+            noticeIds.push(row.noticeId)
+          })
+          changeReadFlag(noticeIds).then(() => {
+            this.getList()
+            this.$successMsg('标为已读成功')
+          })
+        } else {
+          this.$errorMsg("请先选择消息！")
+        }
+      }
+    },
+    goOrderDetail(row) {
+      let noticeIds = []
+      noticeIds.push(row.noticeId)
+      changeReadFlag(noticeIds)
+      let {href} = this.$router.resolve({path: `/order/detail?orderId=${row.objId}`});
+      window.open(href, '_blank');
+      // this.$router.push({
+      //   path: '/order/detail',
+      //   query: {
+      //     orderId: row.objId,
+      //     type: 'notice'
+      //   }
+      // })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/setting/noticebar.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="app-container">
+    <div class="setting_title">通告管理</div>
+    <el-divider></el-divider>
+    <div style="margin-top: 20px;">
+      <el-form label-position="left" label-width="80px">
+        <el-form-item label="通告内容">
+          <el-input
+            type="textarea"
+            :rows="6"
+            placeholder="请输入通告内容"
+            v-model="mainData.noticeContent">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="通告状态">
+          <el-switch
+            v-model="mainData.status"
+            active-text="启用"
+            inactive-text="禁用">
+          </el-switch>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="page-footer">
+      <div class="footer" :class="classObj">
+        <el-button type="primary" @click="submitMainForm">保存</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { getNotice, addNotice, editNotice } from '@/api/setting'
+
+export default {
+  data() {
+    return {
+      mainData: {
+        noticeContent: '',
+        status: false,
+      },
+      canClickSave: true,
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'userid'
+    ]),
+    sidebar() {
+      return this.$store.state.app.sidebar
+    },
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened
+      }
+    },
+  },
+  created() {
+    this.getNotice();
+  },
+  methods: {
+    // 查询按钮权限
+    checkBtnRole(value) {
+      // let btnRole = this.$route.meta.roles;
+      // if(!btnRole) {return true}
+      // let index = btnRole.indexOf(value);
+      // return index >= 0 ? true : false;
+      return true;
+    },
+
+    // 获取详情
+    getNotice() {
+      getNotice().then(res => {
+        this.mainData = res.data && res.data.length > 0 ? res.data[0] : {
+          noticeContent: '',
+          status: false,
+        };
+      })
+    },
+
+    // 提交表单
+    submitMainForm() {
+      if(this.mainData.status && !this.mainData.noticeContent) {
+        return this.$errorMsg('启用状态时，内容不能为空');
+      }
+
+      // 编辑
+      if(this.mainData.noticeId) {
+        editNotice({
+          noticeId: this.mainData.noticeId,
+          noticeContent: this.mainData.noticeContent,
+          status: this.mainData.status,
+        }).then(res => {
+          this.getNotice();
+          this.$successMsg();
+        })
+      }
+      // 新增
+      else {
+        addNotice({
+          noticeContent: this.mainData.noticeContent,
+          status: this.mainData.status,
+        }).then(res => {
+          this.getNotice();
+          this.$successMsg();
+        })
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .page-footer {
+    height: 70px;
+  }
+  .footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    background: #fff;
+    padding: 15px 40px;
+    box-sizing: border-box;
+    transition: all 0.28s;
+    text-align: right;
+    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 50%), 0 2px 5px 0 rgb(0 0 0 / 10%);
+    &.hideSidebar {
+      margin-left: 54px;
+      width: calc(100vw - 54px);
+    }
+    &.openSidebar {
+      margin-left: 210px;
+      width: calc(100vw - 210px);
+    }
+    .tips {
+      font-size: 12px;
+      color: red;
+      margin-top: 10px;
+    }
+  }
+</style>