sl-sfy-safety/src/views/emergency/organization/team-management/PageTeamManagement.vue

<template>
  <div class="safety-platform-container">
    <header class="safety-platform-container__header">
      <div class="breadcrumb-title"> 应急架构编辑 </div>
    </header>

    <main class="safety-platform-container__main">
      <div class="safety-platform-container__main__team-bar" v-loading="loadingTeams">
        <LeaderTeamBar />
      </div>

      <div v-if="curTeam" class="safety-platform-container__main__team-info" v-loading="loadingTeamInfo">
        <TeamAndPersonInfo />
      </div>
      <div v-else class="safety-platform-container__main__team-info--empty"><div>请选择队伍</div></div>
    </main>
  </div>
</template>

<script setup lang="ts">
  import { onUnmounted } from 'vue';
  import { storeToRefs } from 'pinia';
  import LeaderTeamBar from './leader-teams/LeaderTeamBar.vue';
  import TeamAndPersonInfo from './team-info/TeamAndPersonInfo.vue';
  import useTeamStore from './store/userTeam';

  const { curTeam, loadingTeams, loadingTeamInfo } = storeToRefs(useTeamStore());
  const { clearData } = useTeamStore();

  onUnmounted(() => {
    {
      clearData();
    }
  });
</script>

<style lang="scss" scoped>
  @use '@/styles/page-details-layout.scss' as *;

  .safety-platform-container__main {
    width: 100%;
    display: flex;
    &__team-bar {
    }
    &__team-info {
      flex: 1;
      min-width: 0;
      overflow: auto;
    }

    &__team-info--empty {
      margin: 350cpx auto;
      font-size: 20px;
      font-weight: bold;
      text-align: center;
    }
  }
</style>