增加团队管理增删改差
This commit is contained in:
dengqichen
parent
0a5c60b888
commit
d7d555f1ee
@ -1,7 +1,7 @@
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import type {Application, RepositoryGroup, RepositoryProject} from '../types';
|
||||
import type {Application, RepositoryProject} from '../types';
|
||||
import {DevelopmentLanguageTypeEnum} from '../types';
|
||||
import {createApplication, updateApplication, getRepositoryGroupList, getRepositoryProjects} from '../service';
|
||||
import {createApplication, updateApplication, getRepositoryProjectsBySystem} from '../service';
|
||||
import type {ExternalSystemResponse} from '@/pages/Deploy/External/types';
|
||||
import {SystemType} from '@/pages/Deploy/External/types';
|
||||
import {getExternalSystems} from '@/pages/Deploy/External/service';
|
||||
@ -63,7 +63,6 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
|
||||
}) => {
|
||||
const [categories, setCategories] = useState<ApplicationCategoryResponse[]>([]);
|
||||
const [externalSystems, setExternalSystems] = useState<ExternalSystemResponse[]>([]);
|
||||
const [repositoryGroups, setRepositoryGroups] = useState<RepositoryGroup[]>([]);
|
||||
const [repositoryProjects, setRepositoryProjects] = useState<RepositoryProject[]>([]);
|
||||
const {toast} = useToast();
|
||||
const isEdit = !!initialValues?.id;
|
||||
@ -79,7 +78,6 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
|
||||
enabled: true,
|
||||
sort: 0,
|
||||
externalSystemId: undefined,
|
||||
repoGroupId: undefined,
|
||||
repoProjectId: undefined,
|
||||
},
|
||||
});
|
||||
@ -136,41 +134,28 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
|
||||
enabled: initialValues.enabled,
|
||||
sort: initialValues.sort,
|
||||
externalSystemId: initialValues.externalSystemId,
|
||||
repoGroupId: initialValues.repoGroupId,
|
||||
repoProjectId: initialValues.repoProjectId
|
||||
});
|
||||
|
||||
// 如果有外部系统ID，加载仓库组
|
||||
// 如果有外部系统ID，加载仓库项目
|
||||
if (initialValues.externalSystemId) {
|
||||
fetchRepositoryGroups(initialValues.externalSystemId);
|
||||
}
|
||||
|
||||
// 如果有仓库组ID，加载仓库项目
|
||||
if (initialValues.repoGroupId) {
|
||||
fetchRepositoryProjects(initialValues.repoGroupId);
|
||||
fetchRepositoryProjects(initialValues.externalSystemId);
|
||||
}
|
||||
}
|
||||
}, [initialValues]);
|
||||
|
||||
// 当选择外部系统时，获取对应的仓库组列表
|
||||
// 当选择外部系统时，获取对应的仓库项目列表
|
||||
const handleExternalSystemChange = (externalSystemId: number | undefined) => {
|
||||
form.setValue('repoGroupId', undefined);
|
||||
form.setValue('repoProjectId', undefined);
|
||||
setRepositoryProjects([]);
|
||||
if (externalSystemId) {
|
||||
fetchRepositoryGroups(externalSystemId);
|
||||
fetchRepositoryProjects(externalSystemId);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchRepositoryGroups = async (externalSystemId: number | undefined) => {
|
||||
const fetchRepositoryProjects = async (externalSystemId: number | undefined) => {
|
||||
if (!externalSystemId) return;
|
||||
const response = await getRepositoryGroupList(externalSystemId);
|
||||
setRepositoryGroups(response || []);
|
||||
};
|
||||
|
||||
const fetchRepositoryProjects = async (repoGroupId: number | undefined) => {
|
||||
if (!repoGroupId) return;
|
||||
const response = await getRepositoryProjects(repoGroupId);
|
||||
const response = await getRepositoryProjectsBySystem(externalSystemId);
|
||||
setRepositoryProjects(response || []);
|
||||
};
|
||||
|
||||
@ -352,106 +337,6 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="repoGroupId"
|
||||
render={({field}) => {
|
||||
const [searchValue, setSearchValue] = React.useState("");
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const filteredGroups = repositoryGroups.filter(group =>
|
||||
group.name.toLowerCase().includes(searchValue.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<FormItem>
|
||||
<FormLabel>代码仓库组</FormLabel>
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
disabled={!form.watch('externalSystemId')}
|
||||
className={cn(
|
||||
"w-full justify-between",
|
||||
!field.value && "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
{field.value
|
||||
? repositoryGroups.find(
|
||||
(group) => group.repoGroupId === field.value
|
||||
)?.fullName || "请选择代码仓库组"
|
||||
: !form.watch('externalSystemId')
|
||||
? "请先选择外部系统"
|
||||
: "请选择代码仓库组"}
|
||||
<ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[--radix-popover-trigger-width] p-0">
|
||||
<div className="flex items-center border-b px-3">
|
||||
<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
<input
|
||||
placeholder="搜索代码仓库组..."
|
||||
className="flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
|
||||
value={searchValue}
|
||||
onChange={(e) => setSearchValue(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<ScrollArea className="h-[200px] w-full">
|
||||
<div className="p-1">
|
||||
{filteredGroups.length === 0 ? (
|
||||
<div className="p-4 text-center text-sm text-muted-foreground">
|
||||
未找到代码仓库组
|
||||
</div>
|
||||
) : (
|
||||
filteredGroups.map((group) => (
|
||||
<div
|
||||
key={group.repoGroupId}
|
||||
className={cn(
|
||||
"relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground",
|
||||
group.repoGroupId === field.value && "bg-accent text-accent-foreground"
|
||||
)}
|
||||
onClick={() => {
|
||||
const groupId = group.repoGroupId;
|
||||
form.setValue("repoGroupId", groupId);
|
||||
form.setValue("repoProjectId", undefined as any);
|
||||
setRepositoryProjects([]);
|
||||
fetchRepositoryProjects(groupId);
|
||||
setSearchValue("");
|
||||
setOpen(false);
|
||||
}}
|
||||
onWheel={(e) => {
|
||||
const scrollArea = e.currentTarget.closest('[data-radix-scroll-area-viewport]');
|
||||
if (scrollArea) {
|
||||
scrollArea.scrollTop += e.deltaY;
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{group.fullName}</span>
|
||||
<span className="text-xs text-muted-foreground truncate">
|
||||
{group.fullPath}
|
||||
</span>
|
||||
</div>
|
||||
{group.repoGroupId === field.value && (
|
||||
<Check className="ml-auto h-4 w-4" />
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="repoProjectId"
|
||||
@ -471,7 +356,7 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
disabled={!form.watch('repoGroupId')}
|
||||
disabled={!form.watch('externalSystemId')}
|
||||
className={cn(
|
||||
"w-full justify-between",
|
||||
!field.value && "text-muted-foreground"
|
||||
@ -481,8 +366,8 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
|
||||
? repositoryProjects.find(
|
||||
(project) => project.repoProjectId === field.value
|
||||
)?.name
|
||||
: !form.watch('repoGroupId')
|
||||
? "请先选择代码仓库组"
|
||||
: !form.watch('externalSystemId')
|
||||
? "请先选择外部系统"
|
||||
: "请选择项目"}
|
||||
<ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
@ -511,7 +396,7 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
|
||||
key={project.repoProjectId}
|
||||
className={cn(
|
||||
"relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground",
|
||||
project.id === field.value && "bg-accent text-accent-foreground"
|
||||
project.repoProjectId === field.value && "bg-accent text-accent-foreground"
|
||||
)}
|
||||
onClick={() => {
|
||||
form.setValue("repoProjectId", project.repoProjectId);
|
||||
|
||||
@ -207,7 +207,7 @@ const ApplicationList: React.FC = () => {
|
||||
size: 120,
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center gap-2">
|
||||
<span>{row.original.category?.name || '-'}</span>
|
||||
<span>{row.original.applicationCategory?.name || '-'}</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
|
||||
@ -17,7 +17,6 @@ export const applicationFormSchema = z.object({
|
||||
invalid_type_error: '应用分类必须是数字',
|
||||
}),
|
||||
externalSystemId: z.number().optional(),
|
||||
repoGroupId: z.number().optional(),
|
||||
repoProjectId: z.number().optional(),
|
||||
language: z.nativeEnum(DevelopmentLanguageTypeEnum, {
|
||||
required_error: "请选择开发语言",
|
||||
|
||||
@ -45,8 +45,14 @@ export const getRepositoryGroupList = (externalSystemId: number) =>
|
||||
params: { externalSystemId },
|
||||
});
|
||||
|
||||
// 获取项目列表
|
||||
// 获取项目列表（根据仓库组）
|
||||
export const getRepositoryProjects = (repoGroupId: number) =>
|
||||
request.get<RepositoryProject[]>(`${REPOSITORY_PROJECT_URL}/list`, {
|
||||
params: { repoGroupId: repoGroupId },
|
||||
});
|
||||
|
||||
// 获取项目列表（根据外部系统）
|
||||
export const getRepositoryProjectsBySystem = (externalSystemId: number) =>
|
||||
request.get<RepositoryProject[]>(`${REPOSITORY_PROJECT_URL}/list`, {
|
||||
params: { externalSystemId },
|
||||
});
|
||||
|
||||
@ -19,11 +19,9 @@ export interface Application extends BaseResponse {
|
||||
sort: number;
|
||||
teamCount?: number;
|
||||
applicationCategoryId: number;
|
||||
category?: ApplicationCategoryResponse;
|
||||
applicationCategory?: ApplicationCategoryResponse;
|
||||
externalSystemId?: number;
|
||||
externalSystem?: ExternalSystemResponse;
|
||||
repoGroupId?: number;
|
||||
repositoryGroup?: RepositoryGroup;
|
||||
repoProjectId?: number;
|
||||
repositoryProject?: RepositoryProject;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user