19 changed files with 689 additions and 121 deletions
@ -0,0 +1 @@ |
|||
03专项三期文件本地上传默认路径 |
|||
@ -0,0 +1,196 @@ |
|||
import React, { useEffect, useState } from 'react'; |
|||
import { Modal, Input, Form, Select, InputNumber, Tooltip, Switch } from 'antd'; |
|||
import { RestapiMethods } from '../constants/index'; |
|||
const { TextArea } = Input; |
|||
const MetadataRestapiModal = (props) => { |
|||
const { onConfirm, onCancel, editData, metadataModels } = props; |
|||
const [form] = Form.useForm(); |
|||
const [bodyParamRequired, setBodyParamRequired] = useState(false); |
|||
const [returnRequired, setReturnRequired] = useState(false); |
|||
useEffect(() => { |
|||
// form.setFieldValue('enabled', editData.record?.enabled || false);
|
|||
}, []); |
|||
const handleOk = () => { |
|||
form.validateFields().then(values => { |
|||
if (onConfirm) { |
|||
let dataSave = JSON.parse(JSON.stringify(values)); |
|||
dataSave.attributesParam = {}; |
|||
metadataModels.filter(mm => mm.modelType === '接口').map(m => { |
|||
dataSave.attributesParam[m.attributeCode] = values[m.attributeCode]; |
|||
delete dataSave[m.attributeCode]; |
|||
}) |
|||
onConfirm(dataSave); |
|||
} |
|||
}) |
|||
} |
|||
const isObjectString = (value) => { |
|||
if (typeof value !== "string") { |
|||
return false; |
|||
} |
|||
try { |
|||
JSON.parse(value); |
|||
return true; |
|||
} catch (e) { |
|||
return false; |
|||
} |
|||
} |
|||
const validatorNull = (rule, value, getFieldValue, validateFields, label) => { |
|||
if (!value || !value.trim().length) { |
|||
return Promise.reject(new Error(`${label}不可空字符串`)); |
|||
} |
|||
return Promise.resolve(); |
|||
} |
|||
const renderModelItems = () => { |
|||
const items = metadataModels.filter(mm => mm.modelType === '接口').map(m => { |
|||
if (m.control === '文本框') { |
|||
const rules = [{ required: !m.nullable, message: '' }] |
|||
if (!m.nullable) { |
|||
rules.push(({ getFieldValue, validateFields }) => ({ |
|||
validator(_, value) { return validatorNull(_, value, getFieldValue, validateFields, m.attributeName) } |
|||
})) |
|||
rules.push({ max: m.length, message: `${m.attributeName}不超过${m.length}个字符` }) |
|||
} |
|||
return <Form.Item |
|||
label={m.attributeName.length > 10 ? <Tooltip title={m.attributeName}> |
|||
{m.attributeName.substring(0, 10) + '...'} |
|||
</Tooltip> : m.attributeName} |
|||
name={m.attributeCode} |
|||
key={m.attributeCode} |
|||
rules={rules}> |
|||
<Input style={{ width: '90%' }} placeholder={`请输入${m.attributeName}`} /> |
|||
</Form.Item> |
|||
} else if (m.control === '数字输入框') { |
|||
const rules = [{ required: !m.nullable, message: `${m.attributeName}不可空` }] |
|||
let maxValue = ''; |
|||
let length = m.length; |
|||
if (length) { |
|||
while (length > 0) { |
|||
maxValue += '9' |
|||
length--; |
|||
} |
|||
} |
|||
return <Form.Item |
|||
label={m.attributeName.length > 10 ? <Tooltip title={m.attributeName}> |
|||
{m.attributeName.substring(0, 10) + '...'} |
|||
</Tooltip> : m.attributeName} |
|||
name={m.attributeCode} |
|||
key={m.attributeCode} |
|||
rules={rules}> |
|||
<InputNumber min={0} max={maxValue ? parseInt(maxValue) : 0} precision={0} style={{ width: '90%' }} placeholder={`请输入${m.attributeName}`} /> |
|||
</Form.Item> |
|||
} else { |
|||
return <Form.Item |
|||
label={m.attributeName.length > 10 ? <Tooltip title={m.attributeName}> |
|||
{m.attributeName.substring(0, 10) + '...'} |
|||
</Tooltip> : m.attributeName} |
|||
name={m.attributeCode} |
|||
key={m.attributeCode} |
|||
rules={[{ required: !m.nullable, message: `${m.attributeName}不可空` }]}> |
|||
<Select |
|||
placeholder={`请选择${m.attributeName}`} |
|||
style={{ width: '90%' }} |
|||
showSearch |
|||
optionFilterProp='children' |
|||
getPopupContainer={triggerNode => triggerNode.parentNode} |
|||
filterOption={(input, option) => option.props.children |
|||
.toLowerCase().indexOf(input.toLowerCase()) >= 0} |
|||
> |
|||
<Select.Option value={'是'} key={'是'}>是</Select.Option> |
|||
<Select.Option value={'否'} key={'否'}>否</Select.Option> |
|||
</Select> |
|||
</Form.Item > |
|||
} |
|||
}) |
|||
return items; |
|||
} |
|||
return ( |
|||
<Modal title={editData.title} open={true} destroyOnClose |
|||
okText='确定' width={800} |
|||
onOk={() => handleOk(null)} |
|||
onCancel={onCancel}> |
|||
<Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} initialValues={editData.record || {}}> |
|||
<Form.Item |
|||
label='接口名称' |
|||
name='name' |
|||
key='name' |
|||
rules={[{ required: true, message: '' }, { max: 255, message: `接口名称不超过255个字符` }, |
|||
({ getFieldValue, validateFields }) => ({ |
|||
validator(_, value) { return validatorNull(_, value, getFieldValue, validateFields, '接口名称') } |
|||
})]}> |
|||
<Input style={{ width: '90%' }} placeholder={`请输入接口名称`} /> |
|||
</Form.Item> |
|||
<Form.Item |
|||
label='接口路由' |
|||
name='url' |
|||
key='url' |
|||
rules={[{ required: true, message: '' }, { max: 255, message: `接口路由不超过255个字符` }, |
|||
({ getFieldValue, validateFields }) => ({ |
|||
validator(_, value) { return validatorNull(_, value, getFieldValue, validateFields, '接口路由') } |
|||
})]}> |
|||
<Input style={{ width: '90%' }} placeholder={`请输入接口路由`} /> |
|||
</Form.Item> |
|||
<Form.Item |
|||
label="接口类型" |
|||
name='method' |
|||
key='method' |
|||
rules={[{ required: true, message: '请选择接口类型' }]}> |
|||
<Select |
|||
placeholder='请选择接口类型' |
|||
style={{ width: '90%' }} |
|||
showSearch |
|||
optionFilterProp='children' |
|||
getPopupContainer={triggerNode => triggerNode.parentNode} |
|||
filterOption={(input, option) => option.props.children |
|||
.toLowerCase().indexOf(input.toLowerCase()) >= 0} |
|||
onChange={value => { |
|||
if (value === 'post' || value === 'put') { |
|||
setBodyParamRequired(true) |
|||
setReturnRequired(false) |
|||
} |
|||
if (value === 'get') { |
|||
setBodyParamRequired(false) |
|||
setReturnRequired(true) |
|||
} |
|||
if (value === 'delete') { |
|||
setBodyParamRequired(false) |
|||
setReturnRequired(false) |
|||
} |
|||
}} |
|||
> |
|||
{RestapiMethods.map(m => <Select.Option value={m} key={m}>{m}</Select.Option>)} |
|||
</Select> |
|||
</Form.Item> |
|||
<Form.Item |
|||
label='传参' |
|||
name='queryParam' |
|||
key='queryParam' |
|||
rules={[{ max: 255, message: `传参不超过255个字符` }]}> |
|||
<TextArea rows={3} style={{ width: '90%' }} /> |
|||
</Form.Item> |
|||
<Form.Item |
|||
label='请求实体' |
|||
name='bodyParam' |
|||
key='bodyParam' |
|||
rules={[{ required: bodyParamRequired }]}> |
|||
<TextArea rows={3} style={{ width: '90%' }} placeholder={`请输入请求实体`} /> |
|||
</Form.Item> |
|||
<Form.Item |
|||
label='返回值' |
|||
name='return' |
|||
key='return' |
|||
rules={[{ required: returnRequired }]}> |
|||
<TextArea rows={3} style={{ width: '90%' }} placeholder={`请输入返回值`} /> |
|||
</Form.Item> |
|||
<Form.Item |
|||
label='状态' |
|||
name='enabled' |
|||
key='enabled' |
|||
valuePropName='checked'> |
|||
<Switch checkedChildren="启用" unCheckedChildren="禁用" /> |
|||
</Form.Item> |
|||
{renderModelItems()} |
|||
</Form> |
|||
</Modal > |
|||
) |
|||
} |
|||
export default MetadataRestapiModal; |
|||
Loading…
Reference in new issue