92 lines
2.3 KiB
Vue
92 lines
2.3 KiB
Vue
|
<script lang="ts" setup>
|
|||
|
|
import { computed } from 'vue';
|
|||
|
|
|
|||
|
|
import { IconifyIcon } from '@vben/icons';
|
|||
|
|
|
|||
|
|
import {
|
|||
|
|
Button,
|
|||
|
|
DropdownMenu,
|
|||
|
|
DropdownMenuContent,
|
|||
|
|
DropdownMenuGroup,
|
|||
|
|
DropdownMenuItem,
|
|||
|
|
DropdownMenuTrigger,
|
|||
|
|
} from '@vben-core/shadcn-ui';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 窄接口：widget 不依赖 apps/* 的 API 类型，只取下拉展示所需字段。
|
|||
|
|
* 消费端若传入更大的 Project 对象会被结构化子类型接收，无兼容问题。
|
|||
|
|
*/
|
|||
|
|
interface Project {
|
|||
|
|
id?: number;
|
|||
|
|
name: string;
|
|||
|
|
code?: string;
|
|||
|
|
status?: number;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
defineOptions({
|
|||
|
|
name: 'ProjectDropdown',
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const props = defineProps<{
|
|||
|
|
projectList?: Project[];
|
|||
|
|
visitProjectId?: null | number;
|
|||
|
|
}>();
|
|||
|
|
|
|||
|
|
const emit = defineEmits(['success']);
|
|||
|
|
|
|||
|
|
const projects = computed(() => props.projectList ?? []);
|
|||
|
|
|
|||
|
|
async function handleChange(id: number | undefined) {
|
|||
|
|
if (!id) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const project = projects.value.find((item) => item.id === id);
|
|||
|
|
if (!project) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
emit('success', project);
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<template>
|
|||
|
|
<DropdownMenu>
|
|||
|
|
<DropdownMenuTrigger>
|
|||
|
|
<Button
|
|||
|
|
variant="outline"
|
|||
|
|
class="hover:bg-accent ml-1 mr-2 h-8 w-32 cursor-pointer rounded-full p-1.5"
|
|||
|
|
>
|
|||
|
|
<IconifyIcon icon="lucide:folder-kanban" class="mr-2" />
|
|||
|
|
{{
|
|||
|
|
projects.find((item) => item.id === visitProjectId)?.name ||
|
|||
|
|
'请选择项目'
|
|||
|
|
}}
|
|||
|
|
</Button>
|
|||
|
|
</DropdownMenuTrigger>
|
|||
|
|
<DropdownMenuContent class="w-40 p-0 pb-1">
|
|||
|
|
<DropdownMenuGroup>
|
|||
|
|
<DropdownMenuItem
|
|||
|
|
v-for="project in projects"
|
|||
|
|
:key="project.id"
|
|||
|
|
:disabled="project.id === visitProjectId"
|
|||
|
|
class="mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
|
|||
|
|
@click="handleChange(project.id)"
|
|||
|
|
>
|
|||
|
|
<template v-if="project.id === visitProjectId">
|
|||
|
|
<IconifyIcon icon="lucide:check" class="mr-2" />
|
|||
|
|
{{ project.name }}
|
|||
|
|
</template>
|
|||
|
|
<template v-else>
|
|||
|
|
{{ project.name }}
|
|||
|
|
</template>
|
|||
|
|
</DropdownMenuItem>
|
|||
|
|
<DropdownMenuItem
|
|||
|
|
v-if="projects.length === 0"
|
|||
|
|
disabled
|
|||
|
|
class="mx-1 flex cursor-default items-center rounded-sm py-1 text-xs leading-8 opacity-60"
|
|||
|
|
>
|
|||
|
|
暂无项目
|
|||
|
|
</DropdownMenuItem>
|
|||
|
|
</DropdownMenuGroup>
|
|||
|
|
</DropdownMenuContent>
|
|||
|
|
</DropdownMenu>
|
|||
|
|
</template>
|