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) =>
|
export const getApplication = (id: number) =>
|
||||||
request.get<Application>(`${BASE_URL}/${id}`);
|
request.get<Application>(`${BASE_URL}/${id}`);
|
||||||
|
|
||||||
// 分页查询应用列表（带统计信息）
|
// 分页查询应用列表
|
||||||
export const getApplicationPage = (params?: ApplicationQuery) =>
|
export const getApplicationPage = (params?: ApplicationQuery) =>
|
||||||
request.get<Page<Application>>(`${BASE_URL}/pageWithStats`, { params });
|
request.get<Page<Application>>(`${BASE_URL}/page`, { params });
|
||||||
|
|
||||||
// 获取所有应用列表
|
// 获取所有应用列表
|
||||||
export const getApplicationList = () =>
|
export const getApplicationList = () =>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user