chore: initial commit
This commit is contained in:
200
src/pages/system/api/components/action-dialog.tsx
Normal file
200
src/pages/system/api/components/action-dialog.tsx
Normal file
@@ -0,0 +1,200 @@
|
||||
import { useId, useState } from 'react'
|
||||
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { Controller, useForm } from 'react-hook-form'
|
||||
import { toast } from 'sonner'
|
||||
import z from 'zod'
|
||||
|
||||
import { createSysApi, updateSysApi } from '@/api'
|
||||
import { Badge } from '@/components/ui/badge.tsx'
|
||||
import { Button } from '@/components/ui/button.tsx'
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog.tsx'
|
||||
import { Field, FieldError, FieldGroup, FieldLabel } from '@/components/ui/field'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select.tsx'
|
||||
import { Spinner } from '@/components/ui/spinner.tsx'
|
||||
import { HttpMethod, HttpMethodClass } from '@/enum'
|
||||
import { SysApiFormSchema, type SysApi, type SysApiForm } from '@/schemas'
|
||||
|
||||
interface Props {
|
||||
currentRow?: SysApi | null
|
||||
onClose: () => void
|
||||
onConfirm: () => void
|
||||
open: boolean
|
||||
}
|
||||
|
||||
export function ActionsDialog({ open, currentRow, onClose, onConfirm }: Props) {
|
||||
const isEdit = !!currentRow?.id
|
||||
|
||||
const formId = useId()
|
||||
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const form = useForm<z.infer<typeof SysApiFormSchema>>({
|
||||
resolver: zodResolver(SysApiFormSchema),
|
||||
defaultValues: currentRow
|
||||
? { ...currentRow }
|
||||
: {
|
||||
name: '',
|
||||
path: '',
|
||||
group_name: '',
|
||||
method: '' as HttpMethod,
|
||||
sort: 0,
|
||||
},
|
||||
})
|
||||
|
||||
const onSubmit = async (values: SysApiForm) => {
|
||||
try {
|
||||
setLoading(true)
|
||||
if (values.id) {
|
||||
await updateSysApi(values.id, values)
|
||||
} else {
|
||||
await createSysApi(values)
|
||||
}
|
||||
toast('操作成功！')
|
||||
onConfirm()
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onClose}>
|
||||
<DialogContent onCloseAutoFocus={() => form.reset()}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{isEdit ? '编辑' : '创建'}接口</DialogTitle>
|
||||
<DialogDescription />
|
||||
</DialogHeader>
|
||||
|
||||
<form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
|
||||
<FieldGroup className='gap-4'>
|
||||
<Controller
|
||||
name='name'
|
||||
control={form.control}
|
||||
render={({ field, fieldState }) => (
|
||||
<Field data-invalid={fieldState.invalid}>
|
||||
<FieldLabel htmlFor='name'>接口名称</FieldLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id='name'
|
||||
aria-invalid={fieldState.invalid}
|
||||
placeholder='请输入接口名称'
|
||||
autoComplete='off'
|
||||
/>
|
||||
{fieldState.invalid && <FieldError errors={[fieldState.error]} />}
|
||||
</Field>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name='group_name'
|
||||
control={form.control}
|
||||
render={({ field, fieldState }) => (
|
||||
<Field data-invalid={fieldState.invalid}>
|
||||
<FieldLabel htmlFor='group_name'>分组名称</FieldLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id='group_name'
|
||||
aria-invalid={fieldState.invalid}
|
||||
placeholder='请输入分组名称'
|
||||
autoComplete='off'
|
||||
/>
|
||||
{fieldState.invalid && <FieldError errors={[fieldState.error]} />}
|
||||
</Field>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name='path'
|
||||
control={form.control}
|
||||
render={({ field, fieldState }) => (
|
||||
<Field data-invalid={fieldState.invalid}>
|
||||
<FieldLabel htmlFor='path'>接口路径</FieldLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id='path'
|
||||
aria-invalid={fieldState.invalid}
|
||||
placeholder='请输入接口路径'
|
||||
autoComplete='off'
|
||||
/>
|
||||
{fieldState.invalid && <FieldError errors={[fieldState.error]} />}
|
||||
</Field>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name='method'
|
||||
control={form.control}
|
||||
render={({ field, fieldState }) => (
|
||||
<Field data-invalid={fieldState.invalid}>
|
||||
<FieldLabel>接口方法</FieldLabel>
|
||||
<Select value={field.value} onValueChange={(value) => field.onChange(value)}>
|
||||
<SelectTrigger className='w-full'>
|
||||
<SelectValue placeholder='请选择接口方法' />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
{Object.values(HttpMethod).map((option) => (
|
||||
<SelectItem key={option} value={option}>
|
||||
<Badge className={HttpMethodClass[option]}>{option}</Badge>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{fieldState.invalid && <FieldError errors={[fieldState.error]} />}
|
||||
</Field>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name='sort'
|
||||
control={form.control}
|
||||
render={({ field, fieldState }) => (
|
||||
<Field data-invalid={fieldState.invalid}>
|
||||
<FieldLabel htmlFor='sort'>排序</FieldLabel>
|
||||
<Input
|
||||
type='number'
|
||||
{...field}
|
||||
id='sort'
|
||||
aria-invalid={fieldState.invalid}
|
||||
placeholder='请输入排序'
|
||||
autoComplete='off'
|
||||
/>
|
||||
{fieldState.invalid && <FieldError errors={[fieldState.error]} />}
|
||||
</Field>
|
||||
)}
|
||||
/>
|
||||
</FieldGroup>
|
||||
</form>
|
||||
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<Button disabled={loading} variant='outline'>
|
||||
取消
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<Button disabled={loading} form={formId} type='submit'>
|
||||
保存
|
||||
{loading && <Spinner data-icon='inline-start' />}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user