sl-sfy-safety/src/views/disaster/components/GroupSelect.vue

<template>
  <div class="group-select-container">
    <el-select
      v-model="selectedGroups"
      multiple
      collapse-tags
      collapse-tags-tooltip
      :max-collapse-tags="2"
      placeholder="请选择分组"
      filterable
      @change="handleChange"
      :disabled="disabled"
    >
      <template #header>
        <el-checkbox v-model="checkAll" :indeterminate="indeterminate" @change="handleCheckAllChange">
          全部分组
        </el-checkbox>
      </template>
      <el-option v-for="item in groupOptions" :key="item.id" :value="item.id" :label="item.name" />
    </el-select>
    <span @click="showGroupInfo" v-if="selectedGroups.length > 0" class="group-info-span"> 人员详情 </span>

    <el-dialog
      width="500"
      v-model="groupInfo"
      title="人员详情"
      align-center
      :close-on-click-modal="false"
      :destroy-on-close="true"
      class="customDialog--pushObject"
    >
      <Group :userGroupInfo="userGroupInfo" />
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import Group from './Group.vue';
  import type { UserGroupOption, UserGroupInfo } from '@/types/person-group/type';
  import { getUserGroupDetailByIds } from '@/api/system/person-group';

  const props = defineProps<{
    modelValue: number[];
    groupOptions: UserGroupOption[];
    disabled?: boolean;
  }>();

  const emit = defineEmits<{
    (e: 'update:modelValue', value: number[]): void;
    (e: 'change', value: number[]): void;
  }>();

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

  const groupInfo = ref(false);
  const userGroupInfo = ref<UserGroupInfo[]>([]);

  const showGroupInfo = () => {
    groupInfo.value = true;
    getUserGroupInfo();
  };

  const handleChange = (value: number[]) => {
    emit('update:modelValue', value);
    emit('change', value);
  };

  const getUserGroupInfo = async () => {
    const res = await getUserGroupDetailByIds(selectedGroups.value);
    userGroupInfo.value = res.map((item) => ({
      ...item,
      isExpand: false,
      isHidden: false,
    }));
  };

  const checkAll = ref(false);
  const indeterminate = ref(false);

  const handleCheckAllChange = () => {
    if (checkAll.value) {
      selectedGroups.value = props.groupOptions.map((item) => item.id);
    } else {
      selectedGroups.value = [];
    }
    handleChange(selectedGroups.value);
  };
  watch(
    () => [props.groupOptions, selectedGroups.value],
    ([newGroupOptions, newSelectedGroups]) => {
      if (newGroupOptions.length === 0) return;
      checkAll.value = newSelectedGroups.length === newGroupOptions.length;
      indeterminate.value = newSelectedGroups.length > 0 && newSelectedGroups.length < newGroupOptions.length;
    },
  );
  // 监听 props 中的 modelValue 变化，更新内部的 selectedGroups
  watch(
    () => props.modelValue,
    (newValue) => {
      selectedGroups.value = [...newValue];
    },
    { immediate: true },
  );
</script>

<style lang="scss" scoped>
  .group-select-container {
    position: relative;
    width: 100%;
  }

  .group-info-span {
    position: absolute;
    left: 0;
    bottom: -30px;
    cursor: pointer;
    font-size: 14px;
    color: $primary-color;
  }
</style>