107 lines
2.8 KiB
TypeScript
Executable File
107 lines
2.8 KiB
TypeScript
Executable File
import React from 'react';
|
||
import { Form, Input, Select, InputNumber, Modal, message, FormInstance } from 'antd';
|
||
import OptionCreator from './optionCreator';
|
||
import { FieldTypeOptions, GroupOptions } from './defaultFields';
|
||
|
||
type StaffFieldModalProps = {
|
||
form: FormInstance;
|
||
isModalVisible: boolean;
|
||
setIsModalVisible: (visible: boolean) => void;
|
||
editingField: any;
|
||
isProcessing: boolean;
|
||
handleSubmit: () => Promise<void>;
|
||
optionFieldTypes: string[];
|
||
showOptions: boolean;
|
||
};
|
||
|
||
const StaffFieldModal: React.FC<StaffFieldModalProps> = ({
|
||
form,
|
||
isModalVisible,
|
||
setIsModalVisible,
|
||
editingField,
|
||
isProcessing,
|
||
handleSubmit,
|
||
optionFieldTypes,
|
||
showOptions
|
||
}) => {
|
||
return (
|
||
<Modal
|
||
title={editingField ? '编辑字段' : '添加字段'}
|
||
open={isModalVisible}
|
||
onOk={handleSubmit}
|
||
onCancel={() => setIsModalVisible(false)}
|
||
confirmLoading={isProcessing}
|
||
>
|
||
<Form
|
||
form={form}
|
||
layout="vertical"
|
||
>
|
||
<Form.Item
|
||
name="name"
|
||
label="字段标识"
|
||
rules={[
|
||
{ required: true, message: '请输入字段标识' },
|
||
{ pattern: /^[a-zA-Z][a-zA-Z0-9]*$/, message: '字段标识必须以字母开头，只能包含字母和数字' }
|
||
]}
|
||
>
|
||
<Input placeholder="请输入字段标识，如：phoneNumber" />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="label"
|
||
label="字段名称"
|
||
rules={[{ required: true, message: '请输入字段名称' }]}
|
||
>
|
||
<Input placeholder="请输入字段名称，如：手机号码" />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="type"
|
||
label="字段类型"
|
||
rules={[{ required: true, message: '请选择字段类型' }]}
|
||
>
|
||
<Select options={FieldTypeOptions} />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="options"
|
||
label="字段选项"
|
||
hidden={!showOptions}
|
||
>
|
||
<OptionCreator
|
||
options={form.getFieldValue('options') || []}
|
||
onChange={(newOptions) => form.setFieldsValue({ options: newOptions })}
|
||
/>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="required"
|
||
label="是否必填"
|
||
>
|
||
<Select
|
||
options={[
|
||
{ label: '是', value: true },
|
||
{ label: '否', value: false },
|
||
]}
|
||
/>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="group"
|
||
label="字段分组"
|
||
>
|
||
<Select options={GroupOptions} allowClear />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="order"
|
||
label="显示顺序"
|
||
>
|
||
<InputNumber min={0} />
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
);
|
||
};
|
||
|
||
export default StaffFieldModal; |