siujamo
83 lines
2.3 KiB
TypeScript
83 lines
2.3 KiB
TypeScript
import { App, Form, type FormInstance, Input, InputNumber, Select, Switch } from "antd"
|
|
import { type Status, StatusOptions } from "@/types/constant"
|
|
import type { FormMode } from "@/types/form"
|
|
import { useEffect, useMemo } from "react"
|
|
|
|
/**
|
|
* Role form values.
|
|
*/
|
|
export interface RoleFormValues {
|
|
id: number | string | null
|
|
name: string
|
|
code: string
|
|
sort: number
|
|
defaultValue: boolean
|
|
description: string | null
|
|
status: Status
|
|
}
|
|
|
|
/**
|
|
* Component props.
|
|
*/
|
|
export interface RoleDisplayFormProps {
|
|
initialValues?: RoleFormValues
|
|
form: FormInstance<RoleFormValues>
|
|
mode: FormMode
|
|
}
|
|
|
|
export default function RoleDisplayForm({ initialValues, form, mode }: RoleDisplayFormProps) {
|
|
const isEditing = useMemo<boolean>(() => mode == "edit", [mode])
|
|
|
|
// Initialise form values
|
|
useEffect(() => {
|
|
if (initialValues) {
|
|
form.setFieldsValue(initialValues)
|
|
} else {
|
|
form.resetFields()
|
|
}
|
|
}, [initialValues, form])
|
|
|
|
return (
|
|
<Form<RoleFormValues>
|
|
form={form}
|
|
initialValues={initialValues}
|
|
layout="vertical"
|
|
labelAlign="right"
|
|
validateTrigger="onBlur">
|
|
<Form.Item<RoleFormValues> label="角色编号" hidden={!isEditing} name="id">
|
|
<Input disabled />
|
|
</Form.Item>
|
|
<Form.Item<RoleFormValues>
|
|
label="角色名称"
|
|
name="name"
|
|
rules={[{ required: true, message: "角色名称不能为空" }]}>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item<RoleFormValues>
|
|
label="角色编码"
|
|
name="code"
|
|
rules={[
|
|
{ required: true, message: "角色编码不能为空" },
|
|
{ pattern: /^[a-z-]+$/, message: "角色编码格式错误，仅支持小写英文字母及 '-'" },
|
|
]}>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item<RoleFormValues>
|
|
label="排序编码"
|
|
name="sort"
|
|
rules={[
|
|
{ required: true, message: "排序不能为空" },
|
|
{ type: "number", min: 0, max: Number.MAX_VALUE, message: "排序必须是正数" },
|
|
]}>
|
|
<InputNumber type="number" />
|
|
</Form.Item>
|
|
<Form.Item<RoleFormValues> label="是否为默认角色" name="defaultValue">
|
|
<Switch disabled={isEditing} />
|
|
</Form.Item>
|
|
<Form.Item<RoleFormValues> label="角色状态" name="status">
|
|
<Select<Status> options={StatusOptions} />
|
|
</Form.Item>
|
|
</Form>
|
|
)
|
|
}
|