shuimu-dashboard-h5/src/layout/components/Navbar/SchoolSelect.vue

<script setup lang="ts">
import { SchoolList } from "@/api/school/types";
import { getSchoolSelect } from "@/api/school";
import { watch } from "vue";
import { useUserStore } from "@/store/modules/user";

const userStore = useUserStore();
/**
 * 学校数据
 */
const schoolData = ref<SchoolList[]>();
const schoolId = ref(0);
const schoolNum = ref("");
async function getSchoolData() {
  getSchoolSelect()
    .then(({ data }) => {
      schoolData.value = data;
      if (schoolId.value == 0) {
        schoolId.value = data[0].school_id;
        schoolNum.value = data[0].num;
        userStore.changeSchool(schoolId.value, schoolNum.value);
      }
    })
    .catch((error) => {
      console.log(error);
    });
}
onMounted(() => {
  getSchoolData();
});
watch(
  () => schoolId.value,
  (newValue) => {
    let num: string = "";
    schoolData.value?.some((school) => {
      if (newValue == school.school_id) {
        num = school.num;
        return true;
      }
    });
    userStore.changeSchool(newValue, num);
  }
);
</script>
<template>
  <!-- 学校选择下拉框 -->
  <div class="nav-select">
    <el-select v-model="schoolId" size="large" placeholder="请选择学校">
      <el-option
        v-for="item in schoolData"
        :key="item.school_id"
        :label="item.name"
        :value="item.school_id"
      />
    </el-select>
    <span class="school">学校编码：{{ userStore.schoolNum }}</span>
  </div>
</template>
<style scoped lang="scss">
.nav-select {
  display: flex;
  align-items: center;
  justify-items: center;
  .school {
    padding-left: 15px;
  }
}
.svg-icon {
  margin-bottom: -2px;
}
.el-select {
  padding: 15px 0;
  width: 280px;
  margin-left: 12px;
}
//移动端兼容
.mobile {
  .navbar {
    .nav-select {
      position: absolute;
      left: 0;
      top: 80px;
      z-index: 1;
      width: 100%;
      box-sizing: border-box;
      padding: 0 24px;
      .el-select {
        width: 100%;
        padding: 0;
        margin: 0;
      }
      :deep(.el-input__wrapper) {
        background: #ffffff;
      }
    }
  }
}
/* 自定义 el-select 样式 */
:deep(.el-input__wrapper) {
  background: #efefef;
  border-radius: 12px;
}
/* el-select 各种边框线隐藏**/
:deep(.el-select) {
  --el-select-input-focus-border-color: none !important;
}
:deep(.el-input__wrapper) {
  box-shadow: none !important;
}
:deep(.el-select .el-input.is-focus .el-input__wrapper) {
  box-shadow: none !important;
}
:deep(.el-select .el-input__wrapper.is-focus) {
  box-shadow: none !important;
}
:deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
  box-shadow: none !important;
}
</style>