sl-sfy-safety/src/views/production-safety/productionSafetySystem/securityOrganizationalStructure/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">{{ organization?.orgName }}</div>
      <div class="team-detail__info__member-count">
        共 <span>{{ organization?.userNum || 0 }}</span> 人
      </div>
    </div>
    <div class="team-detail__description">
      <div class="team-detail__description__title"> 组织职责 </div>
      <div class="team-detail__description__content"> {{ organization?.depResp || '暂无职责'}} </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue';
  import {
    safetyOrgUserDetail,
  } from '@/api/safety-organization-management';
  const props = defineProps<{ selectedTeamId: number | null }>();

  type LevelAndPersonType = {
    positionLevel: number;
    title: string;
    personList: string[];
  };
 interface OrganizationInfoType {
     createdAt: Date;
     createdBy: number;
     depResp: string;
     id: number;
     isDeleted: number;
     orgName: string;
     parentId: number;
     updatedAt: Date;
     userNum: number;
};


  const showDrawer = ref(false);
  const organization = ref<OrganizationInfoType>();

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

  function clearData() {
    organization.value = undefined;
  }

  watch(
    () => showDrawer.value,
    async () => {
      if (showDrawer.value) {
        organization.value = await safetyOrgUserDetail(props.selectedTeamId!);
      }
    },
  );

  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: 16px;
      font-weight: bold;
    }
    &__content {
      color: #aaaaaa;
      white-space: pre-wrap;
    }
  }
</style>