forked from yoone/WEB
97 lines
2.5 KiB
TypeScript
97 lines
2.5 KiB
TypeScript
import { Form, Input, Modal } from 'antd';
|
|
import React, { useEffect } from 'react';
|
|
|
|
interface DictItemModalProps {
|
|
// 模态框是否可见
|
|
visible: boolean;
|
|
// 是否为编辑模式
|
|
isEdit: boolean;
|
|
// 编辑时的字典项数据
|
|
editingData?: any;
|
|
// 当前选中的字典
|
|
selectedDict?: any;
|
|
// 取消回调
|
|
onCancel: () => void;
|
|
// 确认回调
|
|
onOk: (values: any) => Promise<void>;
|
|
}
|
|
|
|
const DictItemModal: React.FC<DictItemModalProps> = ({
|
|
visible,
|
|
isEdit,
|
|
editingData,
|
|
selectedDict,
|
|
onCancel,
|
|
onOk,
|
|
}) => {
|
|
const [form] = Form.useForm();
|
|
|
|
// 当模态框打开或编辑数据变化时，重置或设置表单值
|
|
useEffect(() => {
|
|
if (visible) {
|
|
if (isEdit && editingData) {
|
|
// 编辑模式，设置表单值为编辑数据
|
|
form.setFieldsValue(editingData);
|
|
} else {
|
|
// 新增模式，重置表单
|
|
form.resetFields();
|
|
}
|
|
}
|
|
}, [visible, isEdit, editingData, form]);
|
|
|
|
// 表单提交处理
|
|
const handleOk = async () => {
|
|
try {
|
|
const values = await form.validateFields();
|
|
await onOk(values);
|
|
} catch (error) {
|
|
// 表单验证失败，不关闭模态框
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
title={
|
|
isEdit
|
|
? '编辑字典项'
|
|
: `添加字典项 - ${selectedDict?.title || '未选择字典'}`
|
|
}
|
|
open={visible}
|
|
onOk={handleOk}
|
|
onCancel={onCancel}
|
|
destroyOnClose
|
|
>
|
|
<Form form={form} layout="vertical">
|
|
<Form.Item
|
|
label="名称"
|
|
name="name"
|
|
rules={[{ required: true, message: '请输入名称' }]}
|
|
>
|
|
<Input placeholder="名称 (e.g., zyn)" />
|
|
</Form.Item>
|
|
<Form.Item
|
|
label="标题"
|
|
name="title"
|
|
rules={[{ required: true, message: '请输入标题' }]}
|
|
>
|
|
<Input placeholder="标题 (e.g., ZYN)" />
|
|
</Form.Item>
|
|
<Form.Item label="中文标题" name="titleCN">
|
|
<Input placeholder="中文标题 (e.g., 品牌)" />
|
|
</Form.Item>
|
|
<Form.Item label="简称 (可选)" name="shortName">
|
|
<Input placeholder="简称 (可选)" />
|
|
</Form.Item>
|
|
<Form.Item label="图片 (可选)" name="image">
|
|
<Input placeholder="图片链接 (可选)" />
|
|
</Form.Item>
|
|
<Form.Item label="值 (可选)" name="value">
|
|
<Input placeholder="值 (可选)" />
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default DictItemModal;
|