通知消息浏览

src/modules/portal/routes/routes.js

@@ -3,7 +3,8 @@ import Access from "../views/Access.vue";
 import Home from "../views/home/Home.vue";
 import HomeMain from "../views/home/main/HomeMain.vue";
 import Component404 from "../views/Component404.vue";
-
+import SiteMessageHome from "../views/home/SiteMessageHome.vue";
+import SiteMessageDetail from "../views/home/SiteMessageDetail.vue";
 export default [
   {
     path: "/",
@@ -29,6 +30,16 @@ export default [
       {
         path: "overview",
         component: HomeMain
+      },
+      {
+        path: "site-message",
+        name: "SiteMessageHome",
+        component: SiteMessageHome
+      },
+      {
+        path: "site-message/:id",
+        name: "SiteMessageDetail",
+        component: SiteMessageDetail
       }
     ]
   },

src/modules/portal/views/home/Home.vue

@@ -31,7 +31,16 @@
           </span>
         </el-menu-item>
         <el-menu-item
+          @click="openMessageHome"
           index="2"
+          style="float: right;"
+          title="未读通知"
+        >
+          <span class="el-icon-message" />
+          <span style="cursor: pointer">{{ unreadMessageCount }}</span>
+        </el-menu-item>
+        <el-menu-item
+          index="1"
           class="navbar-group-item"
           style="float: right;"
           title="机构名称"
@@ -49,7 +58,9 @@
         <el-footer class="footer">&copy; 启明泰和 2019</el-footer>
       </el-container>
     </el-container>
-
+    <SiteMessagePopup
+      @changeUnreadMessageCount="changeUnreadMessageCount"
+    ></SiteMessagePopup>
     <!-- 添加用户信息弹出框 -->
     <el-dialog
       title="个人信息"
@@ -123,7 +134,7 @@ import { USER_SIGNOUT } from "../../store/user";
 import { CORE_API } from "@/constants/constants";
 import HomeSide from "./HomeSide.vue";
 import LinkTitles from "./LinkTitles.vue";
-
+import SiteMessagePopup from "./SiteMessagePopup.vue";
 export default {
   name: "Home",
   data() {
@@ -147,6 +158,7 @@ export default {
       }
     };
     return {
+      unreadMessageCount: 0,
       userDialog: false,
       passForm: { pass: "", checkPass: "" },
       passRules: {
@@ -155,7 +167,7 @@ export default {
       }
     };
   },
-  components: { HomeSide, LinkTitles },
+  components: { HomeSide, LinkTitles, SiteMessagePopup },
   computed: {
     ...mapState({ user: state => state.user }),
     ifShowHomeSide() {
@@ -168,6 +180,12 @@ export default {
   },
   methods: {
     ...mapActions([USER_SIGNOUT]),
+    openMessageHome() {
+      this.$router.push({ path: "/home/site-message" });
+    },
+    changeUnreadMessageCount(count) {
+      this.unreadMessageCount = count;
+    },
     openUserDialog() {
       this.passForm = { pass: "", checkPass: "" };
       this.userDialog = true;

src/modules/portal/views/home/SiteMessageDetail.vue

@@ -0,0 +1,90 @@
+<template>
+  <el-form>
+    <el-form-item>
+      <el-button
+        size="small"
+        type="primary"
+        icon="el-icon-arrow-left"
+        @click="back"
+      >
+        返回
+      </el-button>
+    </el-form-item>
+    <el-form-item>
+      <div class="site-message-container">
+        <h3
+          style="font-size:24px;font-weight:500;color:rgba(34,34,34,1);line-height:33px;"
+        >
+          {{ message.title }}
+        </h3>
+        <h5
+          style="font-size:13px;font-weight:400;color:rgba(153,153,153,1);line-height:18px;margin-top: 16px;margin-bottom: 40px;"
+        >
+          发布时间: {{ message.publishTime }}
+        </h5>
+        <div class="site-message-content" v-html="message.content"></div>
+      </div>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { EXAM_WORK_API } from "@/constants/constants.js";
+export default {
+  name: "SiteMessageDetail",
+  data() {
+    return {
+      message: {}
+    };
+  },
+  async mounted() {
+    await this.prepareData();
+  },
+  async beforeUpdate() {
+    await this.prepareData();
+  },
+  methods: {
+    back() {
+      this.$router.push({ path: "/home/site-message" });
+    },
+    async prepareData() {
+      if (!this.message.hasRead) {
+        var url =
+          EXAM_WORK_API +
+          "/notice/updateNoticeReadStatus?noticeId=" +
+          this.$route.params.id;
+        this.$httpWithMsg.post(url).then(() => {});
+      }
+    }
+  },
+  created() {
+    var url = EXAM_WORK_API + "/notice/" + this.$route.params.id;
+    this.$httpWithMsg.get(url).then(response => {
+      this.message = response.data;
+    });
+  }
+};
+</script>
+
+<style scoped>
+.btn {
+  float: right;
+}
+.back-block {
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+}
+
+.site-message-container {
+  display: flex;
+  flex-direction: column;
+  margin-top: 20px;
+  padding: 20px;
+  border: 1px solid #eeeeee;
+  border-radius: 6px;
+  background-color: #ffffff;
+  text-align: center;
+  min-height: 400px;
+}
+</style>

src/modules/portal/views/home/SiteMessageHome.vue

@@ -0,0 +1,199 @@
+<template>
+  <section class="content">
+    <div class="box box-info">
+      <div
+        class="box-body"
+        v-loading.body="loading"
+        v-loading.fullscreen="loading"
+        element-loading-text="请稍后..."
+      >
+        <!-- 表单 -->
+        <el-form inline>
+          <el-form-item>
+            <el-button
+              size="small"
+              type="primary"
+              icon="el-icon-arrow-left"
+              @click="back"
+            >
+              返回
+            </el-button>
+            <el-button
+              size="small"
+              type="primary"
+              :disabled="noBatchSelected"
+              @click="setRead()"
+            >
+              标记为已读
+            </el-button>
+          </el-form-item>
+        </el-form>
+
+        <div class="block-seperator"></div>
+        <!-- 页面列表 -->
+        <el-table
+          :data="tableData"
+          border
+          resizable
+          stripe
+          @selection-change="selectChange"
+          style="width: 100%;"
+        >
+          <el-table-column type="selection" width="50"></el-table-column>
+          <el-table-column width="50" label="ID">
+            <span slot-scope="scope">{{ scope.row.id }}</span>
+          </el-table-column>
+          <el-table-column label="标题"
+            ><span slot-scope="scope"
+              ><router-link
+                :to="'/home/site-message/' + scope.row.id"
+                style="display: flex"
+              >
+                <img
+                  :class="
+                    scope.row.hasRead
+                      ? 'mhome-message-read'
+                      : 'mhome-message-unread'
+                  "
+                />
+                <span class="mhome-message-title">{{ scope.row.title }}</span>
+              </router-link></span
+            ></el-table-column
+          >
+          <el-table-column width="180" prop="publishTime" label="发送时间">
+          </el-table-column>
+        </el-table>
+        <div class="page pull-right">
+          <el-pagination v-if="paginationShow" layout="total" :total="total" />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<script>
+import { EXAM_WORK_API } from "@/constants/constants.js";
+import { mapState } from "vuex";
+
+export default {
+  name: "Project",
+  data() {
+    return {
+      loading: false,
+      selectedIds: [],
+
+      paginationShow: false,
+      tableData: [],
+      total: 10
+    };
+  },
+  computed: {
+    ...mapState({ user: state => state.user }),
+    ids() {
+      var ids = "";
+      for (let id of this.selectedIds) {
+        if (!ids) {
+          ids += id;
+        } else {
+          ids += "," + id;
+        }
+      }
+      return ids;
+    },
+    noBatchSelected() {
+      return this.selectedIds.length === 0;
+    }
+  },
+  methods: {
+    back() {
+      this.$router.push({ path: "/home/overview" });
+    },
+    setRead() {
+      var ids = this.checkIds();
+      if (!ids) return;
+      var url =
+        EXAM_WORK_API + "/notice/updateNoticeReadStatus?noticeId=" + ids;
+      this.$httpWithMsg.post(url).then(() => {
+        this.$notify({
+          type: "success",
+          message: "操作成功"
+        });
+        this.searchForm();
+      });
+    },
+    checkIds() {
+      if (this.ids.length == 0) {
+        this.$notify({
+          type: "warning",
+          message: "请选择通知"
+        });
+        return "";
+      } else {
+        return this.ids;
+      }
+    },
+    selectChange(row) {
+      this.selectedIds = [];
+      row.forEach(element => {
+        this.selectedIds.push(element.id);
+      });
+    },
+    handleSearchBtn() {
+      this.currentPage = 0;
+      this.searchForm();
+    },
+    //查询
+    searchForm() {
+      this.loading = true;
+      var url = EXAM_WORK_API + "/notice/getUserNoticeList";
+      this.$httpWithMsg
+        .get(url)
+        .then(response => {
+          this.tableData = response.data;
+          this.total = response.data.length;
+          this.loading = false;
+
+          this.$nextTick(function() {
+            this.paginationShow = true;
+          });
+        })
+        .finally(() => (this.loading = false));
+    },
+    init() {
+      this.searchForm();
+    }
+  },
+  //初始化查询
+  created() {
+    this.init();
+  }
+};
+</script>
+
+<style scoped>
+.page {
+  margin-top: 10px;
+}
+.pull-length {
+  width: 300px;
+}
+.pull-center {
+  margin-top: 20px;
+}
+.editForm .el-form-item {
+  margin-bottom: 12px;
+}
+.mhome-message-read {
+  width: 16px;
+  height: 14px;
+  background-image: url(./svgs/sms-read.svg);
+}
+.mhome-message-unread {
+  width: 16px;
+  height: 14px;
+  background-image: url(./svgs/sms-unread.svg);
+}
+.mhome-message-title {
+  line-height: 14px;
+  margin-left: 8px;
+}
+</style>

src/modules/portal/views/home/SiteMessagePopup.vue

@@ -0,0 +1,119 @@
+<template>
+  <transition
+    name="fade"
+    mode="out-in"
+    appear
+    :duration="{ enter: 500, leave: 300 }"
+  >
+    <div v-if="unreadMessage" :key="unreadMessage.id" class="popup">
+      <h5
+        style=" padding: 5px; background:#3c8dbd;
+              border-radius:6px 6px 0px 0px; font-size:14px;
+              font-weight:500;
+              color:rgba(255,255,255,1);
+              line-height:20px;"
+      >
+        {{ unreadMessage.title }}
+      </h5>
+
+      <p
+        style="text-overflow: ellipsis; text-indent: 2em; text-align: left; height: 100px; overflow: hidden; margin: 20px;"
+      >
+        {{ unreadMessageContent }}
+      </p>
+      <div style="text-align: left; margin-left: 20px; margin-bottom: 10px;">
+        <router-link :to="'/home/site-message/' + unreadMessage.id">
+          详情 >>>
+        </router-link>
+        <span
+          @click="ignoreMessage"
+          style="display: inline-block; margin-left: 20px; cursor: pointer;"
+          >忽略</span
+        >
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "SiteMessagePopup",
+  data() {
+    let ignoreMessageIds = window.sessionStorage.getItem("ignoreMessageIds");
+    if (ignoreMessageIds) {
+      ignoreMessageIds = JSON.parse(ignoreMessageIds);
+    } else {
+      ignoreMessageIds = [];
+    }
+    return {
+      siteMessages: [],
+      ignoreMessageIds
+    };
+  },
+  methods: {
+    ignoreMessage() {
+      this.ignoreMessageIds.push(this.unreadMessage.id + "-" + this.user.id);
+      window.sessionStorage.setItem(
+        "ignoreMessageIds",
+        JSON.stringify(this.ignoreMessageIds)
+      );
+    },
+    async getUnreadNoticeList() {
+      try {
+        this.$httpWithoutBar
+          .get("/api/ecs_exam_work/notice/getUserNoticeList?hasRead=false")
+          .then(response => {
+            this.siteMessages = response.data;
+            setTimeout(() => {
+              this.getUnreadNoticeList();
+            }, 5000);
+          });
+      } catch (error) {
+        console.log("tag", error);
+      }
+    }
+  },
+  created() {
+    this.getUnreadNoticeList();
+  },
+  computed: {
+    ...mapState({ user: state => state.user }),
+    unreadMessage() {
+      const unreadMessages = this.siteMessages
+        .filter(v => v.hasRead === false)
+        .filter(
+          v =>
+            this.ignoreMessageIds.includes(v.id + "-" + this.user.id) === false
+        )
+        .reverse();
+      this.$emit("changeUnreadMessageCount", unreadMessages.length);
+      if (unreadMessages.length > 0) {
+        return unreadMessages[0];
+      } else {
+        return null;
+      }
+    },
+    unreadMessageContent() {
+      const div = document.createElement("div");
+      div.innerHTML = this.unreadMessage.content;
+      const text = div.textContent || div.innerText || "";
+      return text.slice(0, 90) + (text.length > 90 ? "..." : "");
+    }
+  }
+};
+</script>
+
+<style scoped>
+.popup {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 320px;
+  height: 200px;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  border: 1px solid rgba(221, 221, 221, 1);
+}
+</style>

src/modules/portal/views/home/svgs/sms-unread.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="12px" viewBox="0 0 16 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
+    <title>sms-未读</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="8-考生端-公告列表" transform="translate(-260.000000, -235.000000)" fill="#FDAD08">
+            <g id="sms-未读" transform="translate(260.000000, 235.000000)">
+                <path d="M10.2612161,6.01241042 L15.9078877,0.460631922 C15.7791453,0.191589577 15.5045861,0.00576547231 15.1865006,0.00576547231 L0.799296703,0.00576547231 C0.481230769,0.00576547231 0.206652015,0.191589577 0.07798779,0.460631922 L5.7245812,6.01241042 C6.97732845,6.80249511 9.00846886,6.80249511 10.2612161,6.01241042 Z M0,1.563557 L0,10.4731661 L4.69352869,6.00699674 L0,1.563557 Z M11.2922686,6.00699674 L15.9857973,10.4731661 L15.9857973,1.563557 L11.2922686,6.00699674 Z M10.5570891,6.70301629 C9.14094261,7.60211726 6.8448547,7.60211726 5.42872772,6.70301629 L5.21726984,6.50284691 L0.0903540904,11.569544 C0.223746032,11.8252964 0.490998779,11.9999609 0.799296703,11.9999609 L15.1865006,11.9999609 C15.4948181,11.9999609 15.7621294,11.8252964 15.8954432,11.569544 L10.768547,6.50284691 L10.5570891,6.70301629 Z" id="Fill-1"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/plugins/axios.js

@@ -375,12 +375,6 @@ _$httpWithoutBar.interceptors.response.use(
         window.___lastInvalidDate === undefined ||
         window.___lastInvalidDate < Date.now() - 300
       ) {
-        Vue.prototype.$alert("登录失效，请重新登录！", "提示", {
-          confirmButtonText: "确定",
-          callback: () => {
-            router.push("/login/" + getRootOrgId());
-          }
-        });
         window.___lastInvalidDate = Date.now();
       }
       return Promise.reject(error);