班级学员管理

xiangpei

2024-06-04 c87c4fe5aa3987d61b10d57208232a94eec83d7c

 src/layout/components/Navbar.vue

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

    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />

    <div class="right-menu">
      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
        <div class="avatar-wrapper">
          <span>{{userName}}</span>
          <i class="el-icon-caret-bottom" />
  <div>
    <div class="h">
      <div class="h-title">
        <img
          src="@/assets/img/logo.jpg"
          alt=""
        >
        <p>江西语音视频培训系统</p>
      </div>
      <div class="h-list">
        <div
          class="h-list-con"
          :class="titleNum == 1 ? ' h-list-con-act ' : ''"
          @click="handleTitleNum(1)"
        >
          系统首页
        </div>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/profile/index">
            <el-dropdown-item>个人信息</el-dropdown-item>
          </router-link>
          <router-link to="/">
            <el-dropdown-item>主页</el-dropdown-item>
          </router-link>
          <el-dropdown-item  @click.native="logout"  divided>退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
        <div
          class="h-list-con"
          :class="titleNum == 2 ? ' h-list-con-act ' : ''"
          @click="handleTitleNum(2)"
        >
          考试
        </div>
        <div
          class="h-list-con"
          :class="titleNum == 3 ? ' h-list-con-act ' : ''"
          @click="handleTitleNum(3)"
        >
          教学
        </div>
        <div
          class="h-list-con"
          :class="titleNum == 4 ? ' h-list-con-act ' : ''"
          @click="handleTitleNum(4)"
        >
          应用管理
        </div>
      </div>
      <div
        style="width:210px; display:flex; align-items:center"
        class="op"
      >
        <div>
          <svg
            t="1651734628449"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2227"
            width="24"
            height="24"
          >
            <path
              d="M236.539274 477.852272c17.253966 0 31.233352-13.980409 31.233352-31.233352 0-110.680798 64.816215-197.723224 173.372629-232.82058 14.792914-4.77884 23.811312-19.713994 21.168112-35.026748-0.426719-2.480494-0.64059-4.900613-0.64059-7.197936 0-24.614607 22.683628-44.63457 50.561559-44.63457 27.858488 0 50.53086 20.018939 50.53086 44.63457 0 2.379187-0.203638 4.727675-0.599657 7.005554-2.745531 15.535835 6.537903 30.674627 21.615297 35.290761 110.202914 33.714869 173.402305 118.550023 173.402305 232.748948 0 17.253966 13.980409 31.233352 31.234375 31.233352s31.233352-13.980409 31.233352-31.233352c0-133.414569-72.349795-238.259452-194.876386-284.724717-5.174859-54.537104-53.673433-97.422843-112.541169-97.422843-59.062164 0-107.691721 43.149752-112.623034 97.921193-120.482025 47.999201-194.306404 154.959258-194.306404 284.226367C205.305923 463.871863 219.285309 477.852272 236.539274 477.852272z"
              p-id="2228"
              fill="#707070"
            ></path>
            <path
              d="M819.911812 602.309842l0-55.889915c0-17.253966-13.980409-31.233352-31.233352-31.233352s-31.234375 13.980409-31.234375 31.233352l0 67.988464c0 7.80885 2.928702 15.34243 8.204869 21.097504 40.10951 43.780109 86.381369 99.497085 95.105055 116.89329-0.315178 10.827603-3.345188 13.552667-32.586163 13.552667L196.820668 765.951853c-26.983561 0-31.671327-7.259334-32.484855-13.735839 9.17087-17.701151 55.381331-73.072249 95.449909-116.669186 5.306866-5.765307 8.245801-13.30912 8.245801-21.137413l0-67.988464c0-17.253966-13.980409-31.233352-31.233352-31.233352s-31.233352 13.980409-31.233352 31.233352l0 55.848982C101.69617 716.315362 101.69617 737.829352 101.69617 748.300844c0 38.727023 24.991184 80.117712 95.124498 80.117712l631.347179 0c23.5166 0 95.094822 0 95.094822-80.117712C923.262668 737.788419 923.262668 716.202799 819.911812 602.309842z"
              p-id="2229"
              fill="#707070"
            ></path>
            <path
              d="M400.99993 366.001835c-17.253966 0-31.233352 13.980409-31.233352 31.234375l0 30.470989c0 17.253966 13.980409 31.234375 31.233352 31.234375s31.234375-13.980409 31.234375-31.234375l0-30.470989C432.234305 379.982244 418.253896 366.001835 400.99993 366.001835z"
              p-id="2230"
              fill="#707070"
            ></path>
            <path
              d="M623.957885 366.001835c-17.253966 0-31.234375 13.980409-31.234375 31.234375l0 30.470989c0 17.253966 13.980409 31.234375 31.234375 31.234375 17.253966 0 31.233352-13.980409 31.233352-31.234375l0-30.470989C655.19226 379.982244 641.21185 366.001835 623.957885 366.001835z"
              p-id="2231"
              fill="#707070"
            ></path>
            <path
              d="M512.170892 598.435605c43.963281 0 75.105558-30.318516 86.574774-48.223305 9.222035-14.396895 5.03262-33.358759-9.242502-42.763966-14.305821-9.405207-33.593096-5.38873-43.159986 8.764618-0.132006 0.193405-13.614066 19.754926-34.172287 19.754926-19.989263 0-32.43369-18.117636-33.267685-19.378349-9.181103-14.407128-28.285207-18.809391-42.834574-9.750061-14.650675 9.099239-19.155269 28.356838-10.044774 43.007513C437.238272 567.892985 467.99374 598.435605 512.170892 598.435605z"
              p-id="2232"
              fill="#707070"
            ></path>
            <path
              d="M601.661066 856.999498c-15.179724-8.225335-34.131355-2.593058-42.346457 12.576433-9.292644 17.142425-27.248597 27.79709-46.871517 27.79709-19.530822 0-37.476543-10.67513-46.830585-27.848255-8.256034-15.149025-27.217898-20.741393-42.366923-12.495592-15.149025 8.256034-20.741393 27.217898-12.495592 42.366923 20.304442 37.283138 59.275012 60.444651 101.6931 60.444651 42.560328 0 81.561597-23.180955 101.794407-60.494793C622.453624 884.176464 616.821347 865.224834 601.661066 856.999498z"
              p-id="2233"
              fill="#707070"
            ></path>
          </svg>
        </div>
        <div style="margin:0 30px;">
          <svg
            t="1651734671187"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3098"
            width="24"
            height="24"
          >
            <path
              d="M511.175727 63.057151c-248.402463 0-449.734888 201.352891-449.734888 449.734888 0 248.387114 201.332425 449.740004 449.734888 449.740004 248.366647 0 449.738981-201.352891 449.738981-449.740004C960.914708 264.410042 759.542374 63.057151 511.175727 63.057151L511.175727 63.057151zM511.175727 925.048337c-227.684606 0-412.257322-184.564529-412.257322-412.256298 0-227.688699 184.573739-412.255275 412.257322-412.255275 227.687676 0 412.260391 184.566576 412.260391 412.255275C923.436118 740.482785 738.863403 925.048337 511.175727 925.048337L511.175727 925.048337zM511.175727 925.048337"
              p-id="3099"
              fill="#707070"
            ></path>
            <path
              d="M477.49565 650.367371c-0.225127-7.990998-0.336668-13.950733-0.336668-17.922185 0-23.479761 3.347235-43.725874 9.984399-60.796668 4.874007-12.869099 12.757558-25.806759 23.588231-38.904055 7.938809-9.531074 22.288632-23.477714 42.989093-41.745776 20.703531-18.257829 34.196847-32.835849 40.384779-43.664475 6.183839-10.835789 9.29776-22.686698 9.29776-35.55989 0-23.252587-9.072633-43.72792-27.219945-61.309344-18.150382-17.581424-40.439014-26.423813-66.808592-26.423813-25.464975 0-46.734394 7.995091-63.805188 23.928992-17.068747 15.933901-28.242228 40.832987-33.573653 74.747401l-61.479213-7.313569c5.559623-45.428655 22.0062-80.195483 49.341778-104.355743 27.335578-24.159236 63.520709-36.238342 108.4899-36.238342 47.642067 0 85.638449 12.985756 113.998357 38.903032 28.354791 25.919323 42.533722 57.284681 42.533722 94.0357 0 21.264303-4.989641 40.886199-14.97404 58.809407-9.979282 17.921161-29.489638 39.755446-58.468646 65.448618-19.452028 17.353227-32.212656 30.05655-38.168298 38.280862-5.958712 8.224312-10.437723 17.58654-13.331633 28.247344-2.888793 10.662851-4.536316 27.897374-4.988618 51.836599l-57.45455 0L477.494627 650.367371 477.49565 650.367371z"
              p-id="3100"
              fill="#707070"
            ></path>
            <path
              d="M473.811748 770.316254 473.811748 702.21011 541.923008 702.21011 541.923008 770.316254 473.811748 770.316254 473.811748 770.316254Z"
              p-id="3101"
              fill="#707070"
            ></path>
          </svg>
        </div>
        <!-- <div @click="handleSetting">
          <img
            src="https://img1.baidu.com/it/u=272523489,3471024224&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            style="width:24px;height:24px; border-radius:20px;"
            alt=""
          >
        </div> -->
        <el-dropdown
          trigger="click"
          placement="top"
        >
          <div>
            <img
              :src="avatar"
              style="width:24px;height:24px; border-radius:20px;"
              alt=""
            >
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <div
                  class="setting-con"
                  @click="getMine('/mine')"
                >
                  个人设置
                </div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div
                  class="setting-con"
                  @click="getMine('/study-particulars')"
                >
                  学习档案
                </div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div
                  class="setting-con"
                  @click="() => checkCloseDialog = true"
                >
                  退出系统
                </div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

      <!-- <div
        class="setting"
        :style="`height:${settingHeight}px`"
        v-show="settingHeight !== 0"
      >
        <div
          class="setting-con"
          @click="getMine"
        >
          个人设置
        </div>
        <div
          class="setting-con"
          @click="() => checkCloseDialog = true"
        >
          退出系统
        </div>
      </div> -->
    </div>
    <s-dialog
      v-model="checkCloseDialog"
      style="z-index:2"
      title="确定关闭系统？"
      width="200px"
    >
      <div style="display:flex; justify-content:space-between; padding:10px 10px;">
        <el-button
          colorType="default"
          size="small"
          @click="() => checkCloseDialog = false"
        >取消</el-button>
        <el-button
          colorType="deepBlue"
          size="small"
          @click="closeSystem"
        >确定</el-button>
      </div>
    </s-dialog>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import loginApi from '@/api/login'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'

import { mapGetters } from "vuex";
// 注释后可浏览器测试
// import { app, ipcRenderer } from "electron";
export default {
  components: {
    Breadcrumb,
    Hamburger
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'device',
      'userName'
    ])
  data () {
    return {
      // titleNum:1,
      settingHeight: 0,
      checkCloseDialog: false,
      // 头像
      avatar: require("../../assets/img/avatarIcon.png"),
    };
  },
  methods: {
    toggleSideBar () {
      this.$store.dispatch('app/toggleSideBar')
    handleTitleNum(num) {
      switch (num) {
        case 1:
          this.$router.push("/");
          break;
        case 2:
          this.$router.push("/exam");
          break;
        case 3:
          this.$router.push("/teach");
          break;
        case 4:
          this.$router.push("/manage");
        default:
          break;
      }
    },
    logout () {
      let _this = this
      loginApi.logout().then(function (result) {
        if (result && result.code === 1) {
          _this.clearLogin()
          _this.$router.push({ path: '/login' })
    handleSetting() {
      clearInterval(this.st);
      this.t = setInterval(() => {
        this.settingHeight += 2;
        if (this.settingHeight >= 80) {
          this.settingHeight = 80;
          window.addEventListener("click", this.handleClick);
          clearInterval(this.t);
        }
      })
      }, 1);
    },
    ...mapMutations('user', ['clearLogin'])
  }
}
    handleClick(e) {
      if (e.target.className !== "setting-con" && this.settingHeight == 80) {
        this.settinghidden();
      }
    },
    settinghidden() {
      document.removeEventListener("click", this.handleClick);
      clearInterval(this.t);
      this.st = setInterval(() => {
        this.settingHeight -= 2;
        if (this.settingHeight <= 0) {
          this.settingHeight = 0;
          clearInterval(this.st);
        }
      }, 1);
    },
    closeSystem() {
      // _app.destroy()
      //注释后可浏览器测试
      // ipcRenderer.send("closeWindow");
      // app.quit();
    },
    // 个人设置
    getMine(i) {
      this.$router.push(i);
    },
  },
  computed: {
    ...mapGetters({
      titleNum: "GET_HEADER_NUM",
      userInfo: "userInfo",
    }),
  },
  created() {
    // this.titleNum = this.$store.getters.getHeader
  },
  mounted() {
    console.log(this.$store);
    // 设置头像
    this.avatar = this.userInfo.avatar ? this.userInfo.avatar : this.avatar;
  },
};
</script>

<style lang="scss" scoped>
.navbar {
  height: 50px;
<style scoped lang="scss">
.h {
  width: 100vw;
  background: white;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
  height: 75px;
  display: flex;
  justify-content: space-between;
  position: fixed;
  z-index: 999;
  &-title {
    display: flex;
    align-items: center;
    margin-left: 50px;

    & img {
      width: 50px;
      height: 50px;
    }
  }

  &-list {
    // margin:0 auto;
    display: flex;

    &-con {
      // width:
      font-size: 20px;
      line-height: 70px;
      font-weight: 500;
      color: #aaa;
      margin: 0 50px;
      cursor: pointer;

      &-act {
        border-bottom: 5px solid rgba(16, 71, 247, 1);

        color: rgba(16, 71, 247, 1);
      }
    }
  }
}

.setting {
  position: absolute;
  right: 69px;
  top: 55px;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
  height: 80px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);

  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
  // &-con {
  // width: 80px;
  // height: 30px;

  // background: white;
  // cursor: pointer;
  // text-align: center;
  // line-height: 30px;
  // padding: 5px 2px;

  // &:hover {
  //   background: rgb(240, 240, 240);
  // }
  // }
}

.op {
  & div {
    cursor: pointer;
    transition: background .3s;
    -webkit-tap-highlight-color:transparent;

    &:hover {
      background: rgba(0, 0, 0, .025)
    }
  }
}

  .breadcrumb-container {
    float: left;
  }

  .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 .3s;

        &:hover {
          background: rgba(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;
        }
      }
    }
  }
// 下拉框样式
.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>