saas_entrepot_admin/src/layout/components/Navbar.vue

<template>
  <div class="navbar">
    <hamburger
      id="hamburger-container"
      :is-active="sidebar.opened"
      class="hamburger-container"
      @toggleClick="toggleSideBar"
    />

    <breadcrumb
      id="breadcrumb-container"
      class="breadcrumb-container"
      v-if="!topNav"
    />
    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />

    <div class="right-menu">
      <template v-if="device !== 'mobile'">
        <search id="header-search" class="right-menu-item" />

        <!-- <el-tooltip content="源码地址" effect="dark" placement="bottom">
          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
        </el-tooltip>

        <el-tooltip content="文档地址" effect="dark" placement="bottom">
          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
        </el-tooltip> -->
        <el-tooltip content="版本说明" effect="dark" placement="bottom">
          <version
            id="version"
            class="right-menu-item hover-effect"
            @openMsg="openMsg"
          />
        </el-tooltip>

        <el-dialog
          append-to-body
          :visible.sync="dialogVisible"
          width="560px"
          :show-close="false"
          :close-on-click-modal="false"
        >
          <div slot="title" class="hearders">
            <div class="leftTitle">版本说明</div>
            <div class="rightBoxs">
              <img
                src="@/assets/images/Close@2x.png"
                alt=""
                @click="dialogVisible = false"
              />
            </div>
          </div>
          <div class="dialogSty">
            <h2>v6.0.0</h2>
            <p>1.第六阶段完整版</p>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">关 闭</el-button>
          </span>
        </el-dialog>
        <screenfull id="screenfull" class="right-menu-item hover-effect" />

        <el-tooltip content="布局大小" effect="dark" placement="bottom">
          <size-select id="size-select" class="right-menu-item hover-effect" />
        </el-tooltip>
      </template>
      <el-dropdown
        v-if="!spotDataStatus"
        class="avatar-container right-menu-item hover-effect"
        trigger="click"
      >
        <div class="avatar-wrapper">
          <img :src="avatar" class="user-avatar" />
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/user/profile">
            <el-dropdown-item>个人中心</el-dropdown-item>
          </router-link>
          <el-dropdown-item @click.native="setting = true">
            <span>布局设置</span>
          </el-dropdown-item>
          <el-dropdown-item divided @click.native="logout">
            <span>退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-dialog
      append-to-body
      :visible.sync="dialog_haveRead"
      width="440px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">{{ total }}条未读消息</div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="dialog_haveRead = false"
          />
        </div>
      </div>
      <div class="haveRead_style">
        <div
          v-for="(item, index) in tableData"
          :key="index"
          class="haveRead_list"
        >
          <strong>{{ item.remind }}</strong>
          <p>
            {{ item.text }}
          </p>
          <p style="time_style">{{ $methodsTools.onlyForma(item.sendTime) }}</p>
          <div>
            <el-button type="primary" size="small" @click="newSee(item.id)"
              >立即查看</el-button
            >
            <el-button size="small" @click="changeReadStatus(item.id)"
              >标记为已读</el-button
            >
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="seeAllRead">查看所有</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Breadcrumb from "@/components/Breadcrumb";
import TopNav from "@/components/TopNav";
import Hamburger from "@/components/Hamburger";
import Screenfull from "@/components/Screenfull";
import SizeSelect from "@/components/SizeSelect";
import version from "@/components/version";
import Search from "@/components/HeaderSearch";
import RuoYiGit from "@/components/RuoYi/Git";
import RuoYiDoc from "@/components/RuoYi/Doc";

export default {
  components: {
    Breadcrumb,
    TopNav,
    Hamburger,
    Screenfull,
    SizeSelect,
    Search,
    RuoYiGit,
    RuoYiDoc,
    version,
  },
  data() {
    return {
      dialogVisible: false,
      dialog_haveRead: false,
      tableData: [], //未读列表
      total: 0, //未读数量
      spotDataStatus: false,
    };
  },
  computed: {
    ...mapGetters(["sidebar", "avatar", "device"]),
    setting: {
      get() {
        return this.$store.state.settings.showSettings;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "showSettings",
          value: val,
        });
      },
    },
    topNav: {
      get() {
        return this.$store.state.settings.topNav;
      },
    },
  },
  mounted() {
    this.spotDataStatus = sessionStorage.getItem("spotData") ? true : false;
    if (
      this.$route.name !== "StationLetter" &&
      !sessionStorage.getItem("spotData")
    ) {
      this.$api.inquireinformsys_userinformUnReadSum().then((res) => {
        if (res.data > 0) {
          this.getDontReadList();
        }
      });
    }
  },
  methods: {
    /**
     * 立即查看
     */
    newSee(id) {
      this.$router.push({
        name: "StationLetter",
        params: {
          id: id,
        },
      });
      // this.dialog_haveRead = false;
    },
    /**
     * 获取未读数据列表
     */
    getDontReadList() {
      var self = this;
      let val = {
        receiptStatus: 0,
        systemStatus: 1,
      };
      this.$api.inquireinformsys_userlist(val).then((result) => {
        this.tableData = result.rows;
        this.total = result.total;
        if (this.total > 0) {
          const h = this.$createElement;
          let arrays = result.rows.map((item, index) => {
            return h(
              "div",
              {
                style: {
                  borderBottom:
                    result.total === index + 1 ? "none" : "1px solid #D9D9D9",
                  marginTop: "26px",
                  paddingBottom: "26px",
                },
              },
              [
                h(
                  "strong",
                  {
                    style: {
                      fontSize: "16px",
                      fontWeight: "bold",
                      color: "#222222",
                      marginBottom: "12px",
                    },
                  },
                  item.remind
                ),
                h(
                  "p",
                  {
                    style: {
                      fontSize: "14px",
                      color: "#606266",
                      marginBottom: "12px",
                    },
                  },
                  item.text
                ),
                h(
                  "p",
                  {
                    style: {
                      fontSize: "12px",
                      color: "#999999",
                      marginBottom: "12px",
                    },
                  },
                  this.$methodsTools.onlyForma(item.sendTime)
                ),
                h(
                  "el-button",
                  {
                    attrs: {
                      size: "small",
                      type: "primary",
                    },
                    on: {
                      click: function () {
                        self.newSee(item.id);
                        self.$notify.closeAll();
                      },
                    },
                  },
                  "立即查看"
                ),
                h(
                  "el-button",
                  {
                    attrs: {
                      size: "small",
                    },
                    on: {
                      click: async function () {
                        await self.changeReadStatus(item.id);
                        self.$notify.closeAll();
                        self.$nextTick(() => {
                          self.getDontReadList();
                        });
                      },
                    },
                  },
                  "标记为已读"
                ),
              ]
            );
          });
          this.$notify({
            title: `${result.total}条未读信息`,
            position: "bottom-right",
            dangerouslyUseHTMLString: true,
            duration: 0,
            customClass: "notiSty",
            message: h("div", [
              h(
                "div",
                {
                  class: "znxStyle",
                },
                arrays
              ),
              h(
                "div",
                {
                  class: "btn_bottom_style",
                  on: {
                    click: function () {
                      self.seeAllRead();
                      self.$notify.closeAll();
                    },
                  },
                },
                "查看所有"
              ),
            ]),
          });
          // this.dialog_haveRead = true;
        } else {
          // this.dialog_haveRead = false;
        }
      });
    },
    /**
     * 更新已读状态
     */
    changeReadStatus(id) {
      return new Promise((resolve, reject) => {
        this.$api
          .editupdateReadStatusBatch({ ids: [id], receiptStatus: 1 })
          .then((res) => {
            this.$message.success("已读成功");
            resolve();
            // this.getDontReadList();
          });
      });
    },
    /**
     * 查看所有消息
     */
    seeAllRead() {
      this.$router.push({
        name: "StationLetter",
      });
      // this.dialog_haveRead = false;
    },
    openMsg() {
      this.dialogVisible = true;
    },
    toggleSideBar() {
      this.$store.dispatch("app/toggleSideBar");
    },
    async logout() {
      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const tid = sessionStorage.TenantId;
          this.$store.dispatch("LogOut").then(() => {
            location.href = "/index?TenantId=" + tid;
          });
        })
        .catch(() => {
          // var message: h("div", [
          //       h("strong", null, item.text),
          //       h("p", null, this.$methodsTools.onlyForma(item.sendTime)),
          //       h(
          //         "el-button",
          //         {
          //           attrs: {
          //             size: "small",
          //             type: "primary",
          //           },
          //           on: {
          //             click: function () {
          //               self.newSee(item.id);
          //               self.$notify.closeAll();
          //             },
          //           },
          //         },
          //         "立即查看"
          //       ),
          //       h(
          //         "el-button",
          //         {
          //           attrs: {
          //             size: "small",
          //           },
          //           on: {
          //             click: function () {
          //               self.changeReadStatus(item.id);
          //               instance[index].close();
          //             },
          //           },
          //         },
          //         "标记已读"
          //       ),
          //       h(
          //         "el-button",
          //         {
          //           attrs: {
          //             size: "small",
          //             type: "success",
          //           },
          //           on: {
          //             click: function () {
          //               self.seeAllRead()
          //               self.$notify.closeAll();
          //             },
          //           },
          //         },
          //         "查看全部"
          //       ),
          //     ]),
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.haveRead_list {
  margin-top: 24px;
  padding-bottom: 28px;
  border-bottom: 1px solid #d9d9d9;
  & > strong {
    color: #000;
  }
  & > .time_style {
    color: #999999;
  }
  &:last-child {
    border-bottom: none;
  }
}
/deep/.el-button {
  border-radius: 8px;
}
/deep/.el-dialog {
  z-index: 9999;
  border-radius: 8px;
  .el-dialog__header {
    padding: 0;
    .hearders {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 18px 0px 20px;
      border-bottom: 1px solid #e2e2e2;
      .leftTitle {
        font-size: 14px;
        font-weight: bold;
        color: #2f4378;
      }
      .rightBoxs {
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
          margin-left: 13px;
          cursor: pointer;
        }
      }
    }
  }
  .el-dialog__body {
    padding: 0px 20px;
    max-height: 450px;
    overflow: auto;
    h2 {
      font-weight: bold;
      color: #333;
      border-bottom: 2px dashed #000;
      padding-bottom: 10px;
    }
  }
  .el-dialog__footer {
    padding: 0;
    .dialog-footer {
      padding: 0px 40px;
      height: 70px;
      border-top: 1px solid #e2e2e2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
.imgBox {
  width: 100%;
  // height: 210px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 8px 8px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .imgLabel {
    flex: 1;
    width: 100%;
    border: 1px dotted #e2e2e2;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    .msPhoto {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 100%;
      max-height: 270px;
      img {
        max-width: 100%;
        max-height: 270px;
      }
    }
    .imgbbx {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      i {
        font-weight: bold;
        margin: 14px 0;
        font-size: 24px;
      }
    }
  }
  p {
    margin: 5px 0px;
  }
}
.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }

  .breadcrumb-container {
    float: left;
  }

  .topmenu-container {
    position: absolute;
    left: 50px;
  }

  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }

  .right-menu {
    float: right;
    height: 100%;
    line-height: 50px;

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }

    .avatar-container {
      margin-right: 30px;

      .avatar-wrapper {
        margin-top: 5px;
        position: relative;

        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 10px;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }
}
.znxStyle {
  max-height: 460px;
  overflow-y: auto;
  padding: 0px 28px;
  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(165, 165, 165, 0.2);
    background: rgba(165, 165, 165, 0.2);
  }
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(165, 165, 165, 0.2);
    border-radius: 0;
    background: rgba(226, 225, 225, 0.2);
  }
}
.btn_bottom_style {
  height: 50px;
  border-top: 1px solid #d9d9d9;
  line-height: 50px;
  text-align: center;
  color: #222;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
  &:hover {
    background-color: #eee;
  }
}
.btnStyle_s {
  margin-top: 6px;
  background-color: skyblue;
  color: #fff;
}
</style>
<style lang="less">
.notiSty {
  width: 400px !important;
  padding: 0px !important;
  & > .el-notification__group {
    width: 100%;
    margin: 0px;
    & > .el-notification__title {
      text-align: center;
      height: 60px;
      line-height: 60px;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      background-color: #409eff;
      font-family: OPPOSans-Bold, OPPOSans;
    }
    & > .el-notification__closeBtn {
      color: #fff;
      font-size: 18px;
      top: 24px;
    }
  }
}
</style>