107 lines
2.8 KiB
TypeScript
107 lines
2.8 KiB
TypeScript
|
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;
|