peng.peng
2 years ago
4 changed files with 180 additions and 27 deletions
@ -0,0 +1,121 @@ |
|||
import React, { useState, useRef } from 'react'; |
|||
import { Button, Form, Row, Col, Table, Popconfirm, Input, message } from 'antd'; |
|||
import { |
|||
ModalForm, |
|||
ProFormRadio, |
|||
ProFormSelect, |
|||
ProFormTextArea, |
|||
ProFormDigit, |
|||
ProFormDependency, |
|||
ProFormText |
|||
} from '@ant-design/pro-form'; |
|||
|
|||
import moment from 'moment'; |
|||
|
|||
export default (props) => { |
|||
const { title, triggerRender, editData = null, onFinish, readOnly, } = props; |
|||
const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 16 } }; |
|||
const initialValues = editData ? { |
|||
...editData, |
|||
} : {}; |
|||
|
|||
return ( |
|||
<ModalForm |
|||
title={title || ''} |
|||
initialValues={initialValues} |
|||
trigger={ |
|||
triggerRender ? triggerRender : <Button type="primary" > |
|||
{title || ''} |
|||
</Button> |
|||
} |
|||
layout="horizontal" |
|||
grid={true} |
|||
{...formItemLayout} |
|||
modalProps={{ |
|||
destroyOnClose: true, |
|||
onCancel: () => { }, |
|||
// bodyStyle: { height: 800, overflowY: 'auto' }
|
|||
}} |
|||
onFinish={async (values) => { |
|||
onFinish && await onFinish(values, editData) |
|||
return true; |
|||
}} |
|||
submitter={!readOnly} |
|||
width={500} |
|||
|
|||
> |
|||
<ProFormText |
|||
rules={[{ required: true, message: '请输入属性名称' }]} |
|||
disabled={readOnly || editData} |
|||
name="attributeName" |
|||
label="属性名称" |
|||
/> |
|||
|
|||
<ProFormText |
|||
rules={[{ required: true, message: '请输入属性代码' }]} |
|||
disabled={readOnly || editData} |
|||
name="attributeCode" |
|||
label="属性代码" |
|||
/> |
|||
|
|||
<ProFormSelect |
|||
rules={[{ required: true, message: '请选择检查类型' }]} |
|||
options={[ |
|||
{ label: '整型', value: '整型' }, |
|||
{ label: '字符型', value: '字符型' }, |
|||
{ label: '布尔型', value: '布尔型' },]} |
|||
disabled={readOnly || editData} |
|||
name="dataType" |
|||
label="数据类型" |
|||
fieldProps={{ |
|||
showSearch: true |
|||
}} |
|||
/> |
|||
<ProFormDigit |
|||
disabled={readOnly || editData} |
|||
name="length" |
|||
label="长度" |
|||
fieldProps={{ precision: 0 }} |
|||
/> |
|||
|
|||
<ProFormSelect |
|||
rules={[{ required: true, message: '请选择输入控件' }]} |
|||
options={[ |
|||
{ label: '数字输入框', value: '数字输入框' }, |
|||
{ label: '文本框', value: '文本框' }, |
|||
{ label: '下拉框', value: '下拉框' }, |
|||
]} |
|||
disabled={readOnly || editData} |
|||
name="control" |
|||
label="输入控件" |
|||
/> |
|||
|
|||
<ProFormSelect |
|||
rules={[{ required: true, message: '请选择是否允许为空' }]} |
|||
options={[ |
|||
{ label: '是', value: true }, |
|||
{ label: '否', value: false }]} |
|||
disabled={readOnly || editData} |
|||
name="nullable" |
|||
label="是否允许为空" |
|||
/> |
|||
|
|||
<ProFormSelect |
|||
rules={[{ required: true, message: '请选是否只读' }]} |
|||
options={[ |
|||
{ label: '是', value: true }, |
|||
{ label: '否', value: false }]} |
|||
disabled={readOnly || editData} |
|||
name="readOnly" |
|||
label="是否只读" |
|||
/> |
|||
|
|||
<ProFormTextArea |
|||
disabled={readOnly || editData} |
|||
name="description" |
|||
label="描述" |
|||
/> |
|||
|
|||
</ModalForm> |
|||
); |
|||
}; |
Loading…
Reference in new issue