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