dy-admin-manager/src/layout/components/Navbar.vue

<template>
  <div class="navbar">
    <!-- <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
    <router-link
      key="collapse"
      style="display: flex; align-items: center; padding-left: 30px"
      to="/"
    >
      <img
        v-if="tenantLogo"
        :src="tenantLogo"
        class="sidebar-logo"
        style="width: 36px; height: 36px"
      />
      <img
        v-else
        src="@/assets/images/base/smallLogo.png"
        class="sidebar-logo"
        style="width: 36px; height: 36px"
      />
      <span class="tenantName" :title="tenantName">{{ tenantName }}</span>
    </router-link>
    <!-- <breadcrumb class="breadcrumb-container" /> -->
    <div class="indexlayout-top-menu">
      <!-- :class="{'active': getTopMenuActive === route.path}" -->
      <!-- el-scrollbar -->
      <el-scrollbar class="horizontal-scrollbar" style="overflow: hidden; height: 100%">
        <template v-for="route in permission_routes">
          <app-link
            v-if="!route.hidden"
            :to="route.path"
            :key="route.id"
            class="indexlayout-top-menu-li"
            :class="{ active: getTopMenuActive === route.path }"
          >
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                height: 76px;
              "
            >
              <i :class="[route.meta.icon, 'menuSize']"></i>
              <span style="line-height: 1.2">{{ route.meta.title }}</span>
            </div>
          </app-link>
        </template>
      </el-scrollbar>
    </div>
    <div class="right-menu">
      <el-tooltip
        style="display: flex"
        effect="dark"
        v-if="tenantForm.tenantId == 1"
        content="点击进入商城系统"
        placement="bottom"
      >
        <div class="msginfo right-position" @click="gotoMall">
          <i class="icon_admin_mall operationSize"></i>
        </div>
      </el-tooltip>
      <el-tooltip
        style="display: flex"
        effect="dark"
        v-if="tenantForm.tenantId == 1"
        content="点击进入OA系统"
        placement="bottom"
      >
        <div class="msginfo right-position" @click="gotoOa">
          <i class="icon_admin_oa operationSize"></i>
        </div>
      </el-tooltip>

      <!-- <el-popover
        placement="bottom"
        trigger="hover"
        style="display: flex;"
        v-if="tenantForm.tenantId == 1"
      >
        <div class="popover-container" style="text-align: center">OA审批</div>

        <div
          class="msginfo right-position"
          @click="gotoOa"
          slot="reference"
        >
          <i class="icon_admin_oa operationSize"></i>
        </div>
      </el-popover> -->
      <!-- <el-popover
        v-if="isShowIns"
        placement="bottom"
        trigger="hover"
        style="display: flex;"
      >
        <div class="popover-container" style="text-align: center">操作手册</div>

        <div
          class="msginfo right-position"
          @click="openIns"
          slot="reference"
        >
          <i class="icon_admin_book operationSize"></i>
        </div>
      </el-popover> -->

      <!-- <el-popover
        placement="bottom"
        trigger="hover"
        style="display: flex;"
      >
        <div class="popover-container" style="text-align: center">系统日志</div>
        <div
          class="msginfo right-position"
          v-permission="'/journal'"
          @click="gotoRecode"
          slot="reference"
        >
          <i class="icon_admin_message operationSize"></i>
        </div>
      </el-popover> -->
      <el-tooltip
        style="display: flex"
        effect="dark"
        content="点击查看系统日志"
        placement="bottom"
      >
        <div class="msginfo right-position" v-permission="'/journal'" @click="gotoRecode">
          <i class="icon_admin_message operationSize"></i>
        </div>
      </el-tooltip>
      <el-tooltip
        style="display: flex"
        effect="dark"
        content="点击打开聊天"
        placement="bottom"
      >
        <el-badge :is-dot="noReadNum > 0 ? true : false" class="item">
          <div class="msginfo right-position" @click="gotoChart">
            <i class="icon_admin_chart operationSize"></i>
          </div>
        </el-badge>
      </el-tooltip>
      <div class="left-menu" v-if="organNameList && organNameList.length > 0">
        <el-popover
          placement="top-start"
          width="300"
          trigger="hover"
          style="display: flex"
        >
          <div class="popover-container">
            <el-tag
              class="navbar_tag"
              type="info"
              v-for="item in organNameList"
              :key="item"
              >{{ item }}</el-tag
            >
          </div>
          <span slot="reference" class="msginfo right-position">
            <i class="icon_admin_orgin operationSize"></i>
          </span>
        </el-popover>
      </div>
      <el-dropdown class="avatar-container" trigger="hover" style="margin-left: 12px">
        <div class="avatar-wrapper">
          <img
            v-if="$store.getters.avatar"
            :src="$store.getters.avatar"
            class="user-avatar"
          />
          <img
            v-else
            class="user-avatar"
            src="@/assets/images/base/placehorder-icon.png"
          />
          <span>{{ name }}</span>
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <div class="drop_userInfo">
            <div class="avatar-wrapper">
              <img
                v-if="$store.getters.avatar"
                :src="$store.getters.avatar"
                class="user-avatar"
              />
              <img
                v-else
                class="user-avatar"
                src="@/assets/images/base/placehorder-icon.png"
              />
              <div>
                <span>{{ name }}</span>
                <p class="positionName" :title="positionName">
                  {{ positionName }}
                </p>
              </div>
            </div>
          </div>
          <div class="tenantService" v-if="!tenantStatus">
            <div class="serviceName">
              <p class="name">{{ tenantInfo.serverName }}</p>
              <div
                class="serviceRenew"
                @click="onRenew"
                v-if="
                  $helpers.permission('/ productService') &&
                  $helpers.permission('/serviceRenew')
                "
              >
                立即续费
              </div>
            </div>
            <div class="serviceTime" v-if="tenantInfo.validRemaining > 0">
              剩余{{ tenantInfo.validRemaining }}天（{{ tenantInfo.expiryDateEnd }}）到期
            </div>
            <div class="serviceTime" v-else>已过期</div>
          </div>
          <!-- divided -->
          <el-dropdown-item v-if="tenantStatus" @click.native="onTenantChange">
            <i class="icon_admin_tenant userSize"></i>
            <span class="dropdown-text">{{ tenantName }}</span>
            <i style="margin-left: 3px" class="icon_admin_change userSize"></i>
          </el-dropdown-item>
          <el-dropdown-item
            @click.native="
              () => {
                this.nocloseable = false;
                resetPassWord();
              }
            "
          >
            <i class="icon_admin_edit userSize"></i>
            <span class="dropdown-text">修改密码</span>
          </el-dropdown-item>
          <el-dropdown-item
            @click.native="accountStatus = true"
            v-if="$helpers.permission('employee/simpleUpdate')"
          >
            <i class="icon_admin_account userSize"></i>
            <span class="dropdown-text">账号设置</span>
          </el-dropdown-item>
          <el-dropdown-item style="border-top: 1px solid #e5e5e5" @click.native="logout">
            <i class="icon_admin_exit userSize"></i>
            <span class="dropdown-text">安全退出</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-dialog
      title="修改密码"
      width="500px"
      append-to-body
      :visible.sync="resetVisible"
      :show-close="!nocloseable"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <el-form
        :model="resetForm"
        label-position="right"
        label-width="100px"
        ref="pwdForm"
      >
        <el-form-item label="手机号" prop="phone">
          <div>{{ this.$store.getters.phone }}</div>
        </el-form-item>
        <el-form-item
          label="新密码"
          :rules="[
            { required: true, message: '密码不能为空', trigger: 'blur' },
            {
              pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
              message: '密码为6-20位数字和字母组合',
              trigger: 'blur',
            },
          ]"
          prop="password"
        >
          <el-input
            v-model.trim="resetForm.password"
            type="password"
            style="width: 180px"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="再次输入"
          :rules="[
            { required: true, message: '密码不能为空', trigger: 'blur' },
            {
              pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
              message: '密码为6-20位数字和字母组合',
              trigger: 'blur',
            },
          ]"
          prop="password2"
        >
          <el-input
            v-model.trim="resetForm.password2"
            type="password"
            style="width: 180px"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="验证码"
          :rules="[{ required: true, message: '验证码不能为空', trigger: 'blur' }]"
          prop="authCode"
          style=""
        >
          <el-input
            v-model.trim="resetForm.authCode"
            style="width: 180px"
            autocomplete="off"
          ></el-input>
          <el-button :disabled="isDisable" @click="getCode">{{ btnName }}</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetVisible = false" v-if="!nocloseable">取 消</el-button>
        <el-button type="primary" @click="submitResetPassWord">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="切换机构"
      width="500px"
      append-to-body
      v-if="tenantVisible"
      :visible.sync="tenantVisible"
    >
      <el-form
        :model="tenantForm"
        label-position="right"
        label-width="100px"
        ref="tenantForm"
      >
        <el-form-item
          label="选择机构"
          :rules="[{ required: true, message: '请选择机构', trigger: 'change' }]"
          prop="tenantId"
        >
          <el-select
            v-model.trim="tenantForm.tenantId"
            filterable
            placeholder="请选择机构"
            clearable
            style="width: 100% !important"
          >
            <el-option
              v-for="(item, index) in tenantList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="tenantVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitTenant">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="账号设置"
      append-to-body
      :visible.sync="accountStatus"
      v-if="accountStatus"
      width="650px"
    >
      <user-model @close="accountStatus = false"></user-model>
    </el-dialog>
    <!-- <portal-target name="AppMain" ref="target">
      <instructions ref="instructions" @checkShow="checkShow" />
    </portal-target> -->
  </div>
</template>

<script>
import qs from "qs";
import Logo from "./Sidebar/Logo";
import { mapGetters } from "vuex";
// import Breadcrumb from '@/components/Breadcrumb'
// import Hamburger from '@/components/Hamburger'
import { resetPassword } from "@/api/buildTeam";
import AppLink from "./Sidebar/Link";
import { getBelongTopMenuPath } from "@/utils/permission";
// import instructions from "./instructions";
import { validOaUrl, validMallUrl } from "@/utils/validate";
import { tenantInfoQueryPage } from "@/views/organManager/api";
import Cookies from "js-cookie";
import axios from "axios";
import userModel from "./modal/userModal";
export default {
  data() {
    let tenantConfig = sessionStorage.getItem("tenantConfig");
    tenantConfig = tenantConfig ? JSON.parse(tenantConfig) : {};
    return {
      accountStatus: false,
      organName: this.$store.getters.organName,
      organNameList: [],
      resetVisible: false,
      resetForm: {
        phone: "",
        authCode: "",
        password: "",
        password2: "",
      },
      isDisable: false, // 是否允许发送验证码
      timerCount: 60,
      btnName: "获取验证码",
      isShowIns: false,
      tenantVisible: false,
      tenantName: tenantConfig.tenantName || null,
      tenantForm: {
        tenantId: Number(tenantConfig.tenantId) || null,
      },
      tenantList: [],
      tenantLogo: tenantConfig.tenantLogo || null,
      noReadNum: 0,
      nocloseable: false,
    };
  },

  components: {
    AppLink,
    userModel,
    // instructions,
    // Breadcrumb,
    // Hamburger
  },
  computed: {
    ...mapGetters([
      "sidebar",
      "avatar",
      "name",
      "positionName",
      "permission_routes",
      "tenantInfo",
    ]),
    getTopMenuActive() {
      let route = this.$route;
      //  (route, getBelongTopMenuPath(route))
      return getBelongTopMenuPath(route);
    },
    tenantStatus() {
      // 判断是否是平台账号 true 是
      const baseTenantId = sessionStorage.getItem("baseTenantId");
      return baseTenantId < 0 ? true : false;
    },
  },
  mounted() {
    // this.$bus.$on("resetPwd", () => {
    //   this.resetPassWord();
    // });
    console.log(this.$store.getters.pwdflag, "getpwdflag");
    if (this.$store.getters.pwdflag) {
      // this.$confirm("当前账号存在安全风险是否修改密码", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(() => {
      //   })
      //   .catch(() => {});
      this.nocloseable = true;
      this.resetPassWord();
    }
    this.$bus.$on("getShowNums", (obj) => {
      this.noReadNum = obj;
    });
    // 手动加入
    this.toggleSideBar();
    this.organNameList = this.organName ? this.organName.split(",") : [];
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch("app/toggleSideBar");
    },
    async logout() {
      await this.$store.dispatch("user/logout");
      localStorage.removeItem("firstMenuUrl");
      // await this.$store.dispatch("permission/removePermission")
      this.$router.push(`/login`);
      window.location.reload();
    },
    async onTenantChange() {
      try {
        const res = await tenantInfoQueryPage({
          page: 1,
          rows: 999,
          payState: 1,
          state: 1,
        });
        this.tenantList = res.data?.rows || [];
        this.tenantVisible = true;
      } catch (e) {}
    },
    onRenew() {
      this.$router.push("/productService");
    },
    submitTenant() {
      this.$refs["tenantForm"].validate((res) => {
        if (res) {
          const tenantForm = this.tenantForm;
          let tenantName = null;
          let tenantLogo = null;
          this.tenantList.forEach((item) => {
            if (item.id == tenantForm.tenantId) {
              tenantName = item.name;
              tenantLogo = item.logo;
              this.tenantName = item.name;
              this.tenantLogo = item.logo;
            }
          });
          let tenantConfig = sessionStorage.getItem("tenantConfig");
          tenantConfig = tenantConfig ? JSON.parse(tenantConfig) : {};
          if (tenantConfig.tenantId != tenantForm.tenantId) {
            //判断是否是当前路由
            // if(url == this.$route.path) {
            tenantConfig.tenantId = tenantForm.tenantId;
            tenantConfig.tenantName = tenantName;
            tenantConfig.tenantLogo = tenantLogo;
            sessionStorage.setItem("tenantConfig", JSON.stringify(tenantConfig));
            this.$router.push({
              path: "/redirect",
              query: this.$route.fullPath,
            });
            // } else {
            //     this.$router.push({
            //     path: url
            //     })
            // }

            // 需要重置数据
            this.$store.commit("commit_branchs", []);
            this.$store.commit("commit_subjects", []);
            this.$store.commit("commit_teachers", []);
            this.$store.commit("commit_schools", []);
            this.$store.commit("commit_vip_group_category", []);
            this.$store.commit("commit_educations", []);
            this.$store.commit("commit_technician", []);
            this.$store.commit("commit_roles", []);
            this.$store.commit("commit_employs", []);
            // 移除
            localStorage.removeItem("searchs");
          }
        }
      });
    },
    gotoRecode() {
      this.$router.push("/journal/journal");
    },
    resetPassWord() {
      this.resetVisible = true;
    },
    submitResetPassWord() {
      if (this.resetForm.password !== this.resetForm.password2) {
        this.$message.error("两次密码必须相同");
        return;
      }
      this.$refs["pwdForm"].validate((res) => {
        if (res) {
          // 发请求
          resetPassword({
            authCode: this.resetForm.authCode,
            mobile: this.$store.getters.phone,
            newPassword: this.resetForm.password,
          }).then((res) => {
            if (res.code == 200) {
              // 修改成功
              this.$message.success("修改成功");
              this.logout();
            }
          });
        }
      });
    },
    getCode() {
      // 获取验证码
      if (!this.$store.getters.phone) {
        this.$message.error("请输入正确的手机号");
        return;
      }
      if (!this.isDisable) {
        this.isDisable = true;
        // 发请求成功后开启定时器
        // 发送验证码
        axios
          .post(
            "/api-web/code/sendSms",
            qs.stringify({ mobile: this.$store.getters.phone })
          )
          .then((res) => {
            if (res.data.code == 200) {
              let timer = setInterval((res) => {
                if (this.timerCount <= 0) {
                  clearInterval(timer);
                  this.isDisable = false;
                  this.btnName = "获取验证码";
                  this.timerCount = 60;
                } else {
                  this.timerCount--;
                  this.btnName = `${this.timerCount}s后重试`;
                }
              }, 1000);
            }
          });
      }
    },
    openIns() {
      // this.$refs.instructions.showInstructions();
    },
    checkShow(val) {
      this.isShowIns = val;
    },
    gotoOa() {
      // console.log(validOaUrl())
      // const Token = Cookies.get('cross-Token')
      // console.log(Token, validOaUrl().split('//')[1])
      // Cookies.set('Admin-Token', Token, { domain: `.${validOaUrl().split('//')[1]}`, path: '/' })
      // document.cookie = `Adminoken=${Token};domain=oadev.dayaedu.com;`
      window.open(validOaUrl());
    },
    gotoMall() {
      window.open(validMallUrl());
    },
    gotoChart() {
      // 初始化未读数
      this.$bus.$emit("openChart", true);
    },
  },
  watch: {
    resetVisible(val) {
      if (!val) {
        this.resetForm = {
          phone: "",
          authCode: "",
          password: "",
          password2: "",
        };
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.navbar_tag {
  margin: 0 5px 8px;
}
::v-deep .el-scrollbar__thumb {
  background-color: rgba(255, 255, 255, 0.3);
  &:hover {
    background-color: rgba(255, 255, 255, 0.3);
  }
}
.indexlayout-top-menu {
  padding-left: 57px;
  height: 76px;
  line-height: 76px;
  flex: 1;
  display: flex;
  overflow: hidden;
  /* overflow-x: auto; */
  .indexlayout-top-menu-li {
    display: table-cell;
    padding: 0 5px;
    height: 76px;
    text-decoration: none;
    color: #f2f2f2;
    font-size: 16px;
    transition: all 0.3s ease;
    span {
      // display: block;
      transition: all 0.3s ease;
      // padding: 10px 20px;
      padding: 8px 20px 3px;
    }
    &:hover,
    &.active {
      span {
        font-weight: 500;
        //   border-radius: 6px;
      }
    }
    // &.active span {
    //   font-weight: bold;
    // }
  }
  .breadcrumb {
    line-height: 76px;
    margin-left: 10px;
    .el-breadcrumb__item {
      display: inline-block;
      float: none;
    }
  }
}
.popover-container {
  max-height: 350px;
  overflow-y: scroll;
}
.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 76px;
  overflow: hidden;
  position: relative;
  z-index: 2000;
  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.1);

  h2 {
    font-size: 18px;
    line-height: 76px;
    margin: 0 0 0 30px;
    display: inline-block;
  }
  .hamburger-container {
    line-height: 76px;
    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;
  }
  .left-menu {
    line-height: 76px;
    // padding-right: 22px;
    font-size: 16px;
    .topIcon {
      width: 20px;
      height: 25px;
    }
  }
  .right-menu {
    min-width: 154px;
    float: right;
    height: 100%;
    line-height: 76px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    &:focus {
      outline: none;
    }
    .msginfo.ins {
      img {
        width: 18px;
        height: 23px;
      }
    }
    .msginfo {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      padding: 0 12px;
      position: relative;
      cursor: pointer;
      img {
        width: 24px;
        height: 24px;
      }
      .active {
        position: absolute;
        width: 7px;
        height: 7px;
        background-color: #f97215;
        border-radius: 50%;
        top: 20px;
        right: -4px;
      }
    }
    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 14px;
      color: #5a5e66;
      vertical-align: text-bottom;

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

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

    .avatar-container {
      height: 76px;
      margin-right: 42px;
      cursor: pointer;

      .avatar-wrapper {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        span {
          margin-left: 8px;
          font-size: 14px;
          font-weight: 500;
          // color: rgba(68, 68, 68, 1);
          color: #fff;
        }

        .user-avatar {
          cursor: pointer;
          width: 32px;
          height: 32px;
          border: 2px solid #f0f2f5;
          border-radius: 50%;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 14px;
        }
      }
    }
  }
}
.user-dropdown {
  width: 258px;
  padding-top: 0 !important;
  box-shadow: 0px 2px 13px 0px rgba(0, 0, 0, 0.05);
  ::v-deep .popper__arrow {
    border-bottom-color: var(--color-primary) !important;
    &::after {
      border-bottom-color: var(--color-primary) !important;
    }
  }
  .drop_userInfo {
    background-color: var(--color-primary);
    height: 64px;
    color: #fff;
    padding: 0 12px;
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: center;
    .avatar-wrapper {
      display: flex;
      align-items: center;
      background: url("../../assets/images/user_tips.png") no-repeat right center;
      background-size: 45%;
      width: 100%;
      .user-avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        margin-right: 10px;
      }
    }
  }
  .tenantService {
    border-bottom: 1px solid #e5e5e5;
    padding: 18px 17px 12px;
    .serviceName {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .name {
        font-size: 18px;
        font-weight: 600;
        color: var(--color-primary);
        line-height: 25px;
        width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .serviceRenew {
        width: 63px;
        height: 22px;
        background: linear-gradient(270deg, #ffc65e 0%, #ffe8a6 100%);
        border-radius: 11px;
        line-height: 22px;
        font-size: 11px;
        font-weight: 400;
        color: #981e13;
        text-align: center;
        cursor: pointer;
      }
    }
    .serviceTime {
      margin-top: 15px;
      font-size: 13px;
      font-weight: 400;
      color: #333333;
      line-height: 18px;
    }
  }
  .el-dropdown-menu__item {
    display: flex;
    align-items: center;
    // margin: 3px 17px;
    padding: 7px 17px;
  }
  .dropdown-text {
    display: block;
    width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.right-position {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 75px;
}
.sidebar-logo {
  margin-right: 8px;
}
.tenantName {
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ffffff;
  line-height: 28px;
  max-width: 150px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.positionName {
  padding-top: 5px;
  font-size: 12px;
  width: 145px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/deep/.el-badge__content.is-fixed.is-dot {
  top: 28px !important;
}
</style>