LiaoNingDangAn/src/views/index.vue

<template>
  <div class="wai" @click="closeMessage">
    <div class="main">
      <!-- 头部 -->
      <div class="header">
        <div class="header-titleimg">
          <img src="../assets/images/home/log.png" alt="" class="hti-img" />
          <div class="hti-span">药品企业公共服务系统</div>
        </div>

        <!-- 右边 -->
        <div class="header-right">
          <!-- 右边名字 -->
          <div class="heari-name">
            <div class="heari-name-img">
              <img src="../assets/images/home/role.png" alt="" class="" />
            </div>

            <div class="heari-name-dow">
              <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                  <span v-show="!firmInfo.trueName">请登录</span>
                  <span v-show="firmInfo.trueName">{{
                    firmInfo.trueName
                  }}</span>
                  <i class="el-icon-arrow-down el-icon-caret-bottom"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="2">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>

          <!-- 右边搜索 -->
          <div class="heari-selest">
            <el-autocomplete
              popper-class="my-autocomplete"
              v-model="state"
              :fetch-suggestions="querySearch"
              placeholder="应用/消息/公告"
              @select="handleSelect"
            >
              <i
                class="el-icon-search el-input__icon"
                slot="suffix"
                @click="handleIconClick"
              >
              </i>
            </el-autocomplete>
          </div>

          <!-- 消息 -->
          <div class="message" @click.stop="openMessage">
            <img src="../assets/images/home/massg.png" alt="" />
            <span class="mass-span" v-show="mesLength">{{ mesLength }}</span>
          </div>

          <!-- taber -->
          <div class="heari-tabber">
            <div @click="switchDome(0)">
              <img src="../assets/images/home/work.png" alt="" />
              <span>工作台</span>
              <div class="active" v-show="myindex == 0"></div>
            </div>
            <div @click="switchDome(1)">
              <img
                src="../assets/images/home/zhongxin.png"
                alt=""
                style="margin: 4px 0 0 0"
              />
              <span>事务中心</span>
              <div class="active" v-show="myindex == 1"></div>
            </div>
            <!-- <div @click="switchDome(2)">
              <img
                src="../assets/images/home/zhongxin.png"
                alt=""
                style="margin: 4px 0 0 0"
              />
              <span>企业中心</span>
              <div class="active" v-show="myindex == 2"></div>
            </div> -->
          </div>
        </div>
      </div>

      <div
        class="mass-div"
        v-show="visible"
        :style="massListTwo.length == 0 ? 'padding:0' : ''"
      >
        <div
          class="massdiv-item"
          v-for="(item, index) in massListTwo"
          :key="index"
          @click.stop="masswhole(item)"
          ref="message"
        >
          <div class="msd-gongdian"></div>
          <p class="msd-wenzi">{{ item.content }}</p>
          <i class="el-icon-d-arrow-right msd-jiantou"></i>
        </div>
        <div class="btns" v-show="mesLength > 6">
          <div class="left" @click.stop="previousPage">
            <el-tag :type="end ? '' : 'info'"
              ><i class="el-icon-d-arrow-left"></i
            ></el-tag>
          </div>
          <div class="right" @click.stop="nextPage">
            <el-tag :type="end ? 'info' : ''"
              ><i class="el-icon-d-arrow-right"></i
            ></el-tag>
          </div>
        </div>
      </div>

      <div @click.stop="">
        <el-dialog
          :visible.sync="dialogVisible"
          width="30%"
          :center="true"
          :destroy-on-close="true"
          @close="close"
        >
          <div class="dialog-title" v-show="dialogVisible" v-loading="loading">
            <img
              src="../assets/images/home/homemasg.png"
              alt=""
              class="dialog-img"
            />
            <span class="dialog-font">消息详情</span>
          </div>
          <div class="dialog-content" v-show="dialogVisible">{{ massg }}</div>
        </el-dialog>
      </div>

      <!-- 路由出口 -->
      <keep-alive include="homework">
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import axios from "axios";
export default {
  data() {
    return {
      restaurants: [],
      state: "",
      myindex: 0,
      //接受消息数据的数组
      massList: [],
      visible: false,
      dialogVisible: false,
      massg: "",
      loading: false,
      firmInfo: {}, //登录的企业信息
      mesLength: null, //消息总条数
      massListTwo: [], //消息数据数组
      total: 0, //总页数
      page: 1, //当前页
      end: false, //是否到最后一页
      isOne: true,

      // 用户信息
      timer: null,
      headerData: {},
    };
  },
  created() {
    this.qiyeLOgin();
  },
  async mounted() {
    localStorage.setItem("Login_index", 0);
    window.document.title = "企业服务（企业端）";
    let firmInfo = JSON.parse(localStorage.getItem("loginName"));
    this.firmInfo = firmInfo;
    let message = await this.$api.Message.findCount(firmInfo.entCode);
    this.massList = message.data;
    this.mesLength = message.data.length;
    this.massListTwo = this.massList.slice(0, 6);
    this.total = Math.ceil(message.data.length / 6);

    // 每隔一个小时（3600 秒）发送一次请求
    this.timer = setInterval(() => {
      this.qiyeLOgin();
    }, 3600000);
  },
  beforeDestroy() {
    // localStorage.removeItem("loginName");
    // localStorage.removeItem("Ls-Token");
    clearInterval(timer);
  },
  methods: {
    async qiyeLOgin() {
      let message = await this.$api.login.frimLogin();
      localStorage.setItem(
        "MSSM-LIAONING__TOKEN",
        message.data.result.userToken
      );
      if (localStorage.getItem("MSSM-LIAONING__TOKEN")) {
        let message = await this.$api.login.frimUserInfo(
          localStorage.getItem("MSSM-LIAONING__TOKEN")
        );
        this.headerData = message;
        console.log("312313213", message);
      }
    },
    handleSelect() {
      console.log("搜索");
    },
    querySearch() {
      console.log("搜索");
    },
    handleIconClick() {},
    // 日历事件
    mouseenter(event, dateInfo) {},
    mouseleave(event, dateInfo) {},
    changeMonth(start, end) {},
    clickMonth(start, end) {},
    switchDome(id) {
      this.myindex = id;
      this.visible = false;
      if (id == 0) {
        this.$router.push("/index/homework");
      } else if (id == 1) {
        this.$router.push("/index/affair/myTianbao");
      } else if (id == 2) {
        this.$router.push("/index/affair/myTianbao");
      }
    },
    // 打开消息列表
    openMessage() {
      if (this.massListTwo.length == 0) {
        if (this.isOne) {
          this.isOne = false;
          this.$message({
            message: "暂无更多消息",
            type: "warning",
          });
          setTimeout(() => {
            this.isOne = true;
          }, 1500);
        }
      } else {
        this.visible = !this.visible;
      }
    },
    // 点击其他地方关闭消息列表
    closeMessage() {
      this.visible == true ? (this.visible = false) : "";
      this.page = 1;
      this.massListTwo = this.massList.slice(
        (this.page - 1) * 6,
        this.page * 6
      );
      this.end = false;
    },
    // 打开消息详情事件
    async masswhole(item) {
      this.dialogVisible = true;
      this.loading = true;
      let message = await this.$api.Message.filltasknotreport(item.id);
      // console.log(message);
      if (message.code == 200) this.loading = false;
      this.massg = message.data.content;
    },
    // 关闭事件
    async close() {
      let message = await this.$api.Message.findCount(this.firmInfo.entCode);
      this.massList = message.data;
      console.log(message.data);
      this.massListTwo = this.massList.slice(
        (this.page - 1) * 6,
        this.page * 6
      );
      this.mesLength = message.data.length;
      // this.visible = false;
    },
    // 消息的上一页下一页
    previousPage() {
      this.page = this.page - 1;
      if (this.page > 0) {
        this.massListTwo = this.massList.slice(
          (this.page - 1) * 6,
          this.page * 6
        );
        if (this.page > 1) {
          this.end = true;
        } else {
          this.end = false;
        }
      } else {
        this.page = 1;
        this.end = false;
      }
    },
    nextPage() {
      if (this.page < this.total) {
        this.massListTwo = this.massList.slice(
          this.page * 6,
          (this.page + 1) * 6
        );
        this.page = this.page + 1;
        if (this.page < this.total) {
          this.end = false;
        } else {
          this.end = true;
        }
      } else {
        this.end = true;
        this.page == this.total;
      }
    },

    // 下拉框事件
    handleCommand(e) {
      if (e == 2) {
        Cookies.remove("username");
        Cookies.remove("password");
        Cookies.remove("rememberMe");
        Cookies.remove("Admin-Token");
        localStorage.removeItem("Login_index");
        localStorage.removeItem("loginName");
      }
    },
  },
  watch: {
    $route: {
      handler(to, from) {
        if (
          to.path == "/index/affair/myTianbao" ||
          to.path == "/index/affair/myZhaohui" ||
          to.path == "/index/affair/myShenqing" ||
          to.path == "/index/affair/myZhaohui" ||
          to.path == "/index/affair/myWenshu"
        ) {
          this.myindex = 1;
        } else {
          this.myindex = 0;
        }
      },
      immediate: true, //第一次就执行
    },
  },

  beforeRouteLeave(to, from, next) {
    if (
      to.path.split("/")[1] == "monitor" ||
      to.path.split("/")[1] == "convenient" ||
      to.path.split("/")[1] == "" ||
      to.path.split("/")[1] == "login"
    ) {
      this.$router.push({ name: "index" });
    } else {
      next();
    }

    //离开时守卫
    //通过路由规则离开该组件时，才会被调用
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/utils.scss";
p {
  margin: 0;
}
::v-deep .el-dialog__body {
  padding-top: vw(10);
}
::v-deep .el-dialog__wrapper {
  height: 100vh;
}
::v-deep .el-dialog:not(.is-fullscreen) {
  margin-top: 30vh !important;
}
::v-deep .el-dialog {
  border-radius: vw(6);
}
.box-card {
  box-sizing: border-box;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: vw(15);
  ::v-deep.el-card__header {
    padding: 0;
    min-height: 0px;
  }
  .clearfix {
    position: relative;
    padding: vw(10) vw(20);
    display: flex;
    align-items: center;

    .clearfix-img {
      margin: 0px vw(10) 0 0;
      width: vw(17);
      height: vw(18);
    }

    .clearfix-font {
      font-size: vw(18);
      font-family: Source Han Bolde CN;
      font-weight: bold;
      color: #292f38;
      user-select: none;
    }
    .clearfix-left {
      display: flex;
      align-items: center;
      position: absolute;
      right: vw(5);
      cursor: pointer;
      span {
        font-size: vw(14);
        font-family: Source Han Regular CN;
        font-weight: 400;
        color: #8e8e8e;
      }

      i {
        font-size: vw(14);
      }
    }
  }
  ::v-deep.el-card__body {
    box-sizing: border-box;
    padding: 0;
  }
}

.dialog-title {
  display: flex;
  align-items: center;
  .dialog-img {
    width: vw(18);
    margin-right: vw(10);
    // height: vw(26);
  }
  .dialog-font {
    font-size: vw(20);
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #292f38;
  }
}
.dialog-content {
  margin: vh(10) 0 0 vw(25);
  font-size: vw(14);
  font-family: Source Han Regular CN;
  font-weight: 400;
  color: #292f38;
}
.mass-div {
  z-index: 999;
  position: absolute;
  top: vh(55);
  right: vw(226);
  padding: 0 vw(24) vh(5) vw(24);
  width: vw(273);
  background-color: #ffffff;
  border-radius: vw(8);
  box-shadow: 0px 0px vw(12) 0px rgba(194, 212, 226, 0.64);
  .btns {
    display: flex;
    justify-content: flex-end;
    .left {
      margin-right: vw(5);
      cursor: pointer;
    }
    .right {
      cursor: pointer;
    }
  }
  .massdiv-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: vh(24) 0;
    .msd-gongdian {
      width: vw(10);
      height: vw(10);
      background: #ff0000;
      border-radius: 50%;
    }
    .msd-wenzi {
      margin: 0 vw(10);
      width: vw(178);
      font-size: vw(14);
      font-family: Source Han Regular CN;
      font-weight: 400;
      color: #292f38;
      overflow: hidden; /*控制内容溢出时隐藏*/
      text-overflow: ellipsis; /*显示省略号*/
      white-space: nowrap; /*禁止换行*/
    }

    .msd-jiantou {
      font-size: vw(14);
      font-family: Source Han Regular CN;
      font-weight: 400;
      color: #292f38;
    }
  }
  .massdiv-item:hover {
    cursor: pointer;
    .msd-wenzi {
      color: #0051b7;
    }
  }
}
.header {
  position: sticky;
  z-index: 99;
  top: 0;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 vw(22) 0 vw(19);
  width: 100vw;
  height: vh(60);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1e80eb;
  box-shadow: vh(-1) vw(1) vh(2) 0px #7da5c7;
  overflow: hidden;
  .header-titleimg {
    display: flex;
    overflow: hidden;
    .hti-img {
      margin: 0px vw(10) 0 0;
      width: vw(32);

      // background: linear-gradient(0deg, #3dc1f6, #e5f7ff);
      // box-shadow: 0px 1px 4px 0px #103f72;
    }
    .hti-span {
      box-sizing: border-box;
      width: vw(250);
      // height: 23px;
      font-size: vw(24);
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #ffffff;
      text-shadow: 0px vw(1) vw(4) #1d5abe;
    }
  }

  .header-right {
    display: flex;
    flex-direction: row-reverse;
    .heari-name {
      display: flex;
      align-items: center;
      .heari-name-img {
        box-sizing: border-box;
        background: linear-gradient(0deg, #f4f9ff, #e0eefe);
        border: vw(2) solid #ffffff;
        box-shadow: 0px vw(2) vw(2) 0px rgba(4, 50, 103, 0.45);
        border-radius: 50%;
        text-align: center;
        img {
          width: vw(30);
          height: vw(26);
        }
      }
      .heari-name-dow {
        display: flex;
        align-items: center;
        font-family: Source Han Regular CN;
        cursor: pointer;
        .el-dropdown-link {
          margin: vh(0) 0 0 vw(5);
          width: vw(41);
          height: vw(14);
          font-size: vw(14);
          font-family: Source Han Regular CN;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }

    .heari-selest {
      margin: 0 vw(23) 0 0;
      width: vw(304);
      height: 100%;

      ::v-deep.el-input {
        .el-input__inner {
          margin-top: vh(6);
          width: vw(304);
          height: vh(35);
          background: #ffffff;
          border-radius: vw(15);
          font-size: vw(14);
          font-family: Source Han Regular CN;
          font-weight: 400;
          color: #b1b6bf;
        }
        .el-input__icon {
          margin: vh(-4) 0 0 0;
          font-size: vw(16);
          cursor: pointer; /*改变鼠标样式为手型*/
        }
      }
    }

    .message {
      position: relative;
      margin: vh(10) vw(10) 0 0;
      cursor: pointer; /*改变鼠标样式为手型*/
      img {
        width: vw(25);
        height: vh(30);
      }
      .mass-span {
        position: absolute;
        top: vh(-8);
        right: vw(-10);
        width: vw(23);
        height: vw(23);
        text-align: center;
        line-height: vw(20);
        border-radius: 50%;
        background-color: #ff0000;

        font-size: vw(12);
        transform: scale(0.73);
        font-family: DIN-Regular;
        font-weight: 400;
        color: #ffffff;
      }
    }

    .heari-tabber {
      display: flex;
      margin: 0 vw(30) 0 0;
      div {
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        width: vw(129);
        cursor: pointer;
        img {
          position: relative;
          z-index: 1;
          width: vw(20);
          // height: 20px;
        }
        span {
          position: relative;
          z-index: 1;
          font-size: vw(18);
          font-family: Source Han Regular CN;
          font-weight: 400;
          color: #ffffff;
          text-shadow: 0px vw(1) vw(2) #0051b7;
        }

        .active {
          position: absolute;
          top: -10;
          left: 0;
          z-index: 0;
          width: vw(129);
          height: vh(60);
          // background-image: linear-gradient(#1e80eb, #ffffff);
          background-image: linear-gradient(
            to bottom,
            RGB(30, 128, 235, 0.5),
            RGB(255, 255, 255, 0.5)
          );
          // background: rgba( 0.5);
          border-radius: vw(3);
        }
      }
    }
  }
}

.wai,
.main {
  min-height: 100%;
}
.Router_exit {
  min-height: 90vh;
}
</style>