td_official/src/components/ProjectSelector/index.vue

<template>
  <div class="select-container" v-loading.fullscreen.lock="fullscreenLoading">
    <label for="projectSelect" class="select-label">项目列表:</label>
    <el-select
      id="projectSelect"
      v-model="selectedProjectId"
      placeholder="全部工程项目"
      clearable
      filterable
      @change="handleSelect"
      style="width: 150px; margin-right: 20px"
    >
      <el-option v-for="project in projects" :key="project.id" :label="project.name" :value="project.id" />
    </el-select>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue';
import { useUserStore } from '@/store/modules/user';
import { getProjectTeam } from '@/utils/projectTeam';
import router, { resetRouter } from '@/router';
import usePermissionStore from '@/store/modules/permission';
import { isHttp } from '@/utils/validate';
import { changeProject } from '@/api/project/project';
const fullscreenLoading = ref(false);
const route = useRoute();
const userStore = useUserStore();
const projects = computed(() => [
  // { id: '', name: '全部工程项目' }, // 添加空选项
  ...userStore.projects
]);
const proxy = getCurrentInstance()?.proxy as any;

const selectedProjectId = ref(userStore.selectedProject?.id || '');

// 监听 userStore.selectedProject 变化，更新 selectedProjectId
watch(
  () => userStore.selectedProject,
  (newProject) => {
    selectedProjectId.value = newProject?.id ?? ''; // 避免 undefined 导致 placeholder 显示
  },
  { deep: true }
);

/** 切换项目逻辑 */
const handleSelect = async (projectId: string) => {
  proxy.$cache.local.setJSON('isCheckRole', 'true');

  const userStore = useUserStore();
  const permissionStore = usePermissionStore();
  const selectedProject = projects.value.find((p) => p.id === projectId);
  if (!selectedProject) return;
  const loadingInstance = ElLoading.service({
    lock: true,
    text: '项目切换中...',
    background: 'rgba(0, 0, 0, 0.7)'
  });
  setTimeout(() => {
    if (loadingInstance && loadingInstance.visible) {
      loadingInstance.close();
    }
  }, 3000);
  await changeProject(projectId);
  console.log('切换项目', selectedProject);

  // 更新项目 & 权限
  userStore.setSelectedProject(selectedProject);
  await userStore.setInfo();
  await userStore.setRoles(); // 这里会刷新 permissions/roles
  // 重新生成路由
  permissionStore.generateRoutes().then((routeList) => {
    const currentPath = router.currentRoute.value.fullPath;
    const exist = currentPath == '/' || currentPath == '/index' ? true : routeExists(currentPath, routeList);
    if (exist) return loadingInstance.close();

    proxy?.$tab.closeAllPage();
    router.push('/index');
    loadingInstance.close();

    // 刷新当前路由
  });
};
function routeExists(fullPath: string, routes: any[], parentPath = ''): boolean {
  for (const route of routes) {
    // 拼接完整 path
    let currentPath = route.path.startsWith('/') ? route.path : `${parentPath}/${route.path}`;

    // 处理多余的 "//"
    currentPath = currentPath.replace(/\/+/g, '/');

    // 判断
    if (currentPath === fullPath) {
      return true;
    }

    // 递归子路由
    if (route.children && route.children.length > 0) {
      if (routeExists(fullPath, route.children, currentPath)) {
        return true;
      }
    }
  }
  return false;
}
</script>

<style lang="scss" scoped>
.select-container {
  display: flex;
  align-items: center; // 上下居中对齐
  gap: 10px; // label 和 select 之间的间距
}

.select-label {
  font-weight: bold;
  color: #333;
  white-space: nowrap; // 防止 label 换行
  font-size: 14px; // 设置字体大小
}

#projectSelect {
  .el-select {
    width: 400px; // 保持宽度

    .el-input__inner {
      height: 38px;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

      &:hover {
        border-color: #409eff;
      }

      &:focus {
        border-color: #409eff;
        box-shadow: 0 0 5px rgba(64, 158, 255, 0.3);
      }
    }

    .el-input__icon {
      line-height: 38px;
    }
  }

  &.is-focus .el-input__inner {
    border-color: #409eff;
  }
}

// 响应式设计（可选）
@media (max-width: 768px) {
  .select-container {
    flex-direction: column; // 栈式布局
    align-items: flex-start; // 左对齐

    .select-label {
      margin-bottom: 5px; // label 和 select 之间的垂直间距
    }

    #projectSelect .el-select {
      width: 100%; // 在小屏幕上占满宽度
    }
  }
}
</style>