sl-sfy-safety/src/views/emergency/organization/team-management/leader-teams/LeaderTeamBar.vue

<template>
  <div class="leader-team-bar">
    <div class="leader-team-bar__decoration"></div>

    <div class="leader-team-bar__teams">
      <el-scrollbar>
        <el-collapse v-model="activeTeam">
          <LeaderTeam :teamData="leaderTeamTree" :parentId="leaderTeamTree.teamId" @expand="expandCollapse" />
        </el-collapse>
      </el-scrollbar>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { storeToRefs } from 'pinia';
  import { ElScrollbar, ElCollapse } from 'element-plus';
  import LeaderTeam from './LeaderTeam.vue';
  import useTeamStore from '../store/userTeam';

  const activeTeam = ref<number[]>([]);

  const { leaderTeamTree } = storeToRefs(useTeamStore());
  const { getLeaderTeams } = useTeamStore();

  function expandCollapse(collapseId: number) {
    activeTeam.value.push(collapseId);
  }

  onMounted(async () => {
    await getLeaderTeams();

    activeTeam.value.push(leaderTeamTree.value.teamId); // 默认展开一级队伍
  });
</script>

<style lang="scss" scoped>
  .leader-team-bar {
    height: 100%;
    background: #f4f7ff;

    .leader-team-bar__decoration {
      height: 5px;
      margin-bottom: 20px;
      border-radius: 8px 8px 0 0;
      background-color: #1777ff;
    }

    .leader-team-bar__teams {
      height: calc(100% - 25px);
      color: #333333;
      padding: 0px 16px;
      padding-right: 4px;
    }
  }

  :deep(.el-collapse) {
    border: 0px;
  }
  :deep(.el-collapse-item__arrow) {
    margin-right: 12px;
    color: #333333;
  }

  :deep(.el-collapse-item__wrap) {
    background: transparent;
    border-bottom: transparent;
  }
  :deep(.el-collapse-item__content) {
    padding: 0px;
    margin-right: 10px;
  }
  :deep(.el-collapse-item__header) {
    background: #f4f7ff;
    border: 0px;
    flex-direction: row-reverse;
    padding-left: 12px;
    margin-right: 10px;
  }
</style>