9 changed files with 445 additions and 47 deletions
@ -0,0 +1,53 @@ |
|||
import React, { useEffect, useState } from 'react'; |
|||
import { Modal, Input, Form } from 'antd'; |
|||
const { TextArea } = Input; |
|||
const MetadataResourceModal = (props) => { |
|||
const { onConfirm, onCancel, editData } = props; |
|||
const [form] = Form.useForm(); |
|||
useEffect(() => { |
|||
}, []); |
|||
const handleOk = () => { |
|||
form.validateFields().then(values => { |
|||
if (onConfirm) { |
|||
onConfirm({ ...editData.record, ...values }); |
|||
} |
|||
}) |
|||
} |
|||
const validatorNull = (rule, value, getFieldValue, validateFields, label) => { |
|||
if (!value || !value.trim().length) { |
|||
return Promise.reject(new Error(`${label}不可空字符串`)); |
|||
} |
|||
return Promise.resolve(); |
|||
} |
|||
return ( |
|||
<Modal 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='resourceName' |
|||
rules={[{ required: true, message: '资源名称不可空' }]}> |
|||
<Input disabled style={{ width: '90%' }} /> |
|||
</Form.Item> |
|||
<Form.Item |
|||
label='申请人' |
|||
name='applyByName' |
|||
rules={[{ required: true, message: '申请人不可空' }]}> |
|||
<Input disabled style={{ width: '90%' }} /> |
|||
</Form.Item> |
|||
<Form.Item |
|||
label='需求描述' |
|||
name='requirements' |
|||
rules={[{ required: true, message: '' }, { max: 255, message: `需求描述不超过255个字符` }, |
|||
({ getFieldValue, validateFields }) => ({ |
|||
validator(_, value) { return validatorNull(_, value, getFieldValue, validateFields, '需求描述') } |
|||
})]}> |
|||
<TextArea rows={4} style={{ width: '90%' }} placeholder={`请输入需求描述`} /> |
|||
</Form.Item> |
|||
</Form> |
|||
</Modal > |
|||
) |
|||
} |
|||
export default MetadataResourceModal; |
@ -0,0 +1,79 @@ |
|||
import React, { useEffect, useState } from 'react'; |
|||
import { Modal, Form, Select, } from 'antd'; |
|||
const MetadataDatabaseTagModal = (props) => { |
|||
const { onConfirm, onCancel, editData, tagList } = props; |
|||
const [form] = Form.useForm(); |
|||
const [tagSet, setTagSet] = useState(editData.record.tagSet || []); |
|||
useEffect(() => { |
|||
}, []); |
|||
const handleOk = () => { |
|||
form.validateFields().then(values => { |
|||
if (onConfirm) { |
|||
onConfirm({ database: editData.record.id, ...values }); |
|||
} |
|||
}) |
|||
} |
|||
const renderTagItems = () => { |
|||
let tags = []; |
|||
if (tagSet.length) { |
|||
tagList.map(t => { |
|||
if (tagSet.includes(t.tagSetId)) { |
|||
t.tags.map(t => { |
|||
tags.push(<Select.Option value={t.id} key={`tag-${t.id}`}>{t.name}</Select.Option>) |
|||
}) |
|||
} |
|||
}); |
|||
} |
|||
return tags; |
|||
} |
|||
return ( |
|||
<Modal 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='tagSet' |
|||
rules={[{ required: true, message: '请选择标签集' }]}> |
|||
<Select |
|||
maxTagCount={5} |
|||
placeholder='请选择标签集' |
|||
style={{ width: '90%' }} |
|||
showSearch |
|||
optionFilterProp='children' |
|||
getPopupContainer={triggerNode => triggerNode.parentNode} |
|||
filterOption={(input, option) => option.props.children |
|||
.toLowerCase().indexOf(input.toLowerCase()) >= 0} |
|||
onChange={value => { |
|||
setTagSet(value) |
|||
form.setFieldValue('tags', []); |
|||
}} |
|||
mode="multiple" |
|||
> |
|||
{tagList.map(t => <Select.Option value={t.tagSetId} key={`tagSet-${t.tagSetId}`}>{t.tagSetName}</Select.Option>)} |
|||
</Select> |
|||
</Form.Item> |
|||
<Form.Item |
|||
label="标签" |
|||
name='tags' |
|||
rules={[{ required: true, message: '请选择标签' }]}> |
|||
<Select |
|||
maxTagCount={5} |
|||
placeholder='请选择标签' |
|||
style={{ width: '90%' }} |
|||
showSearch |
|||
optionFilterProp='children' |
|||
getPopupContainer={triggerNode => triggerNode.parentNode} |
|||
filterOption={(input, option) => option.props.children |
|||
.toLowerCase().indexOf(input.toLowerCase()) >= 0} |
|||
mode="multiple" |
|||
> |
|||
{renderTagItems()} |
|||
</Select> |
|||
</Form.Item> |
|||
</Form> |
|||
</Modal > |
|||
) |
|||
} |
|||
export default MetadataDatabaseTagModal; |
Loading…
Reference in new issue