86 lines
2.1 KiB
Vue
86 lines
2.1 KiB
Vue
<!--抄送组件-->
|
|
<script setup lang="ts">
|
|
import type { User } from '#/api/system/user/model';
|
|
|
|
import { computed, type PropType } from 'vue';
|
|
|
|
import { useVbenModal, VbenAvatar } from '@vben/common-ui';
|
|
|
|
import { Avatar, AvatarGroup, Tooltip } from 'ant-design-vue';
|
|
|
|
import { userSelectModal } from '.';
|
|
|
|
defineOptions({
|
|
name: 'CopyComponent',
|
|
inheritAttrs: false,
|
|
});
|
|
|
|
const props = withDefaults(defineProps<{ ellipseNumber?: number }>(), {
|
|
/**
|
|
* 最大显示的头像数量 超过显示为省略号头像
|
|
*/
|
|
ellipseNumber: 3,
|
|
});
|
|
|
|
const emit = defineEmits<{ finish: [User[]] }>();
|
|
|
|
const [UserSelectModal, modalApi] = useVbenModal({
|
|
connectedComponent: userSelectModal,
|
|
});
|
|
|
|
const userListModel = defineModel('userList', {
|
|
type: Array as PropType<User[]>,
|
|
default: () => [],
|
|
});
|
|
|
|
function handleOpen() {
|
|
modalApi.setData({ userList: userListModel.value });
|
|
modalApi.open();
|
|
}
|
|
|
|
function handleFinish(userList: User[]) {
|
|
// 清空 直接赋值[]会丢失响应性
|
|
userListModel.value.splice(0, userListModel.value.length);
|
|
userListModel.value.push(...userList);
|
|
emit('finish', userList);
|
|
}
|
|
|
|
const displayedList = computed(() => {
|
|
return userListModel.value.slice(0, props.ellipseNumber);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center gap-2">
|
|
<AvatarGroup v-if="userListModel.length > 0">
|
|
<Tooltip
|
|
v-for="user in displayedList"
|
|
:key="user.userId"
|
|
:title="user.nickName"
|
|
placement="top"
|
|
>
|
|
<div>
|
|
<VbenAvatar
|
|
:alt="user.nickName"
|
|
class="bg-primary size-[36px] cursor-pointer rounded-full border text-white"
|
|
src=""
|
|
/>
|
|
</div>
|
|
</Tooltip>
|
|
<Tooltip
|
|
:title="`等${userListModel.length - props.ellipseNumber}人`"
|
|
placement="top"
|
|
>
|
|
<Avatar
|
|
v-if="userListModel.length > ellipseNumber"
|
|
class="bg-primary size-[36px] cursor-pointer rounded-full border text-white"
|
|
>
|
|
...
|
|
</Avatar>
|
|
</Tooltip>
|
|
</AvatarGroup>
|
|
<a-button size="small" @click="handleOpen">选择人员</a-button>
|
|
<UserSelectModal @finish="handleFinish" />
|
|
</div>
|
|
</template>
|