1.465
This commit is contained in:
dengqichen
parent
4ac65e0c7e
commit
23f4daf3e9
@ -0,0 +1,233 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogBody,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { useToast } from '@/components/ui/use-toast';
|
||||
import { createApplication, updateApplication } from '../service';
|
||||
import { getEnabledCategories } from '../../Category/service';
|
||||
import type { Application, CreateApplicationRequest } from '../types';
|
||||
import { DevelopmentLanguageTypeEnum } from '../types';
|
||||
import type { ApplicationCategoryResponse } from '../../Category/types';
|
||||
|
||||
// 表单数据类型（包含enabled字段）
|
||||
interface ApplicationFormData extends Partial<CreateApplicationRequest> {
|
||||
enabled?: boolean;
|
||||
}
|
||||
|
||||
interface EditDialogProps {
|
||||
open: boolean;
|
||||
record?: Application;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onSuccess: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 应用编辑对话框
|
||||
*/
|
||||
const EditDialog: React.FC<EditDialogProps> = ({
|
||||
open,
|
||||
record,
|
||||
onOpenChange,
|
||||
onSuccess,
|
||||
}) => {
|
||||
const { toast } = useToast();
|
||||
const [categories, setCategories] = useState<ApplicationCategoryResponse[]>([]);
|
||||
const [formData, setFormData] = useState<ApplicationFormData>({
|
||||
enabled: true,
|
||||
sort: 0,
|
||||
language: DevelopmentLanguageTypeEnum.JAVA,
|
||||
});
|
||||
|
||||
// 加载分类列表
|
||||
const loadCategories = async () => {
|
||||
try {
|
||||
const data = await getEnabledCategories();
|
||||
setCategories(data || []);
|
||||
} catch (error) {
|
||||
console.error('加载分类失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
loadCategories();
|
||||
if (record) {
|
||||
setFormData({
|
||||
appCode: record.appCode,
|
||||
appName: record.appName,
|
||||
appDesc: record.appDesc,
|
||||
applicationCategoryId: record.applicationCategoryId,
|
||||
language: record.language,
|
||||
sort: record.sort,
|
||||
enabled: record.enabled,
|
||||
});
|
||||
} else {
|
||||
setFormData({
|
||||
enabled: true,
|
||||
sort: 0,
|
||||
language: DevelopmentLanguageTypeEnum.JAVA,
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [open, record]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
// 验证
|
||||
if (!formData.appCode?.trim()) {
|
||||
toast({ title: '提示', description: '请输入应用编码', variant: 'destructive' });
|
||||
return;
|
||||
}
|
||||
if (!formData.appName?.trim()) {
|
||||
toast({ title: '提示', description: '请输入应用名称', variant: 'destructive' });
|
||||
return;
|
||||
}
|
||||
|
||||
if (record) {
|
||||
await updateApplication({ ...formData, id: record.id } as any);
|
||||
toast({ title: '更新成功', description: `应用 "${formData.appName}" 已更新` });
|
||||
} else {
|
||||
await createApplication(formData as CreateApplicationRequest);
|
||||
toast({ title: '创建成功', description: `应用 "${formData.appName}" 已创建` });
|
||||
}
|
||||
|
||||
onSuccess();
|
||||
onOpenChange(false);
|
||||
} catch (error) {
|
||||
console.error('保存失败:', error);
|
||||
toast({
|
||||
title: '保存失败',
|
||||
description: error instanceof Error ? error.message : '未知错误',
|
||||
variant: 'destructive'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-[600px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{record ? '编辑应用' : '新建应用'}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<DialogBody>
|
||||
<div className="grid gap-4">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="applicationCategoryId">应用分类</Label>
|
||||
<Select
|
||||
value={formData.applicationCategoryId?.toString()}
|
||||
onValueChange={(value) => setFormData({ ...formData, applicationCategoryId: Number(value) })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="请选择应用分类" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{categories.map((category) => (
|
||||
<SelectItem key={category.id} value={category.id.toString()}>
|
||||
{category.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="appCode">应用编码 *</Label>
|
||||
<Input
|
||||
id="appCode"
|
||||
value={formData.appCode || ''}
|
||||
onChange={(e) => setFormData({ ...formData, appCode: e.target.value })}
|
||||
placeholder="请输入应用编码"
|
||||
disabled={!!record}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="appName">应用名称 *</Label>
|
||||
<Input
|
||||
id="appName"
|
||||
value={formData.appName || ''}
|
||||
onChange={(e) => setFormData({ ...formData, appName: e.target.value })}
|
||||
placeholder="请输入应用名称"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="language">开发语言</Label>
|
||||
<Select
|
||||
value={formData.language}
|
||||
onValueChange={(value) => setFormData({ ...formData, language: value as DevelopmentLanguageTypeEnum })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="请选择开发语言" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={DevelopmentLanguageTypeEnum.JAVA}>Java</SelectItem>
|
||||
<SelectItem value={DevelopmentLanguageTypeEnum.NODE_JS}>NodeJS</SelectItem>
|
||||
<SelectItem value={DevelopmentLanguageTypeEnum.PYTHON}>Python</SelectItem>
|
||||
<SelectItem value={DevelopmentLanguageTypeEnum.GO}>Go</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="appDesc">应用描述</Label>
|
||||
<Textarea
|
||||
id="appDesc"
|
||||
value={formData.appDesc || ''}
|
||||
onChange={(e) => setFormData({ ...formData, appDesc: e.target.value })}
|
||||
placeholder="请输入应用描述"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="sort">显示排序</Label>
|
||||
<Input
|
||||
id="sort"
|
||||
type="number"
|
||||
value={formData.sort || 0}
|
||||
onChange={(e) => setFormData({ ...formData, sort: Number(e.target.value) })}
|
||||
placeholder="请输入显示排序"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="enabled">启用状态</Label>
|
||||
<Switch
|
||||
id="enabled"
|
||||
checked={formData.enabled}
|
||||
onCheckedChange={(checked) => setFormData({ ...formData, enabled: checked })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</DialogBody>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={handleSubmit}>确定</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditDialog;
|
||||
@ -23,9 +23,9 @@ export const deleteApplication = (id: number) =>
|
||||
export const getApplication = (id: number) =>
|
||||
request.get<Application>(`${BASE_URL}/${id}`);
|
||||
|
||||
// 分页查询应用列表（带统计信息）
|
||||
// 分页查询应用列表
|
||||
export const getApplicationPage = (params?: ApplicationQuery) =>
|
||||
request.get<Page<Application>>(`${BASE_URL}/pageWithStats`, { params });
|
||||
request.get<Page<Application>>(`${BASE_URL}/page`, { params });
|
||||
|
||||
// 获取所有应用列表
|
||||
export const getApplicationList = () =>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user