sl-sfy-safety/src/views/production-safety/productionSafetySystem/safetyOrganizationSystemManagement/components/TeamDetailDrawer.vue

<template>
  <el-drawer v-model="showDrawer" direction="rtl" @close="clearData">
    <div class="team-detail__info">
      <div class="team-detail__info__team-name">{{ teamAndPersonInfo?.teamName }}</div>
      <div class="team-detail__info__member-count">
        共 <span>{{ teamAndPersonInfo?.memberCount || 0 }}</span> 人
      </div>
    </div>

    <div class="team-detail__level" v-for="level in levelAndPersonList" :key="level.positionLevel">
      <div class="team-detail__level__title">
        {{ level.title }}
      </div>
      <div class="team-detail__level__content">
        <div v-for="(person, index) in level.personList" :key="index">{{ person }}</div>
      </div>
    </div>

    <div class="team-detail__description">
      <div class="team-detail__description__title"> 队伍职责 </div>
      <div class="team-detail__description__content"> {{ teamAndPersonInfo?.description }} </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { queryEmergencyTeamDetail } from '@/api/emergency-organization/teams';
  import { TeamAndPersonInfoType } from '../team-management/type';

  const props = defineProps<{ selectedTeamId: number | null }>();

  type LevelAndPersonType = {
    positionLevel: number;
    title: string;
    personList: string[];
  };

  const showDrawer = ref(false);
  const teamAndPersonInfo = ref<TeamAndPersonInfoType>();
  const levelAndPersonList = ref<LevelAndPersonType[]>([]);

  function drawerShow() {
    showDrawer.value = true;
  }

  function clearData() {
    teamAndPersonInfo.value = undefined;
    levelAndPersonList.value = [];
  }

  // 按照职位等级排序队伍人员
  function setLevelAndPerson() {
    const levelMap: { [key: number]: LevelAndPersonType } = {};

    teamAndPersonInfo.value?.personnelList.map((person) => {
      if (!(person.positionLevel in levelMap)) {
        levelMap[person.positionLevel] = { positionLevel: person.positionLevel, title: person.title, personList: [] };
      }

      levelMap[person.positionLevel].personList.push(person.realname);
    });

    for (let level in levelMap) {
      levelAndPersonList.value.push(levelMap[level]);
    }
  }

  watch(
    () => showDrawer.value,
    async () => {
      if (showDrawer.value) {
        teamAndPersonInfo.value = await queryEmergencyTeamDetail(props.selectedTeamId!);
        setLevelAndPerson();
      }
    },
  );

  defineExpose({
    drawerShow,
  });
</script>

<style scoped lang="scss">
  .team-detail__info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    &__team-name {
      font-size: 20px;
      font-weight: bold;
    }
    &__member-count {
      span {
        color: #1777ff;
      }
    }
  }

  .team-detail__level {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px 0;
    border-left: 3px solid #1777ff;
    background-color: #e5effe;

    &__title {
      flex: 1;
      height: inherit;
      padding: 0 10px;
      color: #1777ff;
      text-align: center;
      white-space: nowrap;
    }

    &__content {
      flex: 10;
      display: flex;
      flex-wrap: wrap;
      padding: 0 15px;
      gap: 15px;
      border-left: 1px solid #c5c3c3;
    }
  }

  .team-detail__description {
    margin-top: 20px;
    &__title {
      margin-bottom: 10px;
      font-size: 20px;
      font-weight: bold;
    }
    &__content {
      color: #aaaaaa;
      white-space: pre-wrap;
    }
  }
</style>