GovernmentDataResourceCenter/web/client/src/sections/metadataManagement/components/metadataDatabaseModal.js

import React, { useEffect, useState } from 'react';
import { Modal, Input, Form, Select, InputNumber, Tooltip } from 'antd';
const { TextArea } = Input;
const MetadataDatabaseModal = (props) => {
    const { onConfirm, onCancel, editData, metadataModels, modelTypes } = props;
    const [form] = Form.useForm();
    const [type, setType] = useState(editData.record.type);
    useEffect(() => {
    }, []);
    const handleOk = () => {
        form.validateFields().then(values => {
            if (onConfirm) {
                let dataSave = JSON.parse(JSON.stringify(values));
                dataSave.attributesParam = {};
                metadataModels.map(m => {
                    dataSave.attributesParam[m.attributeCode] = values[m.attributeCode];
                    delete dataSave[m.attributeCode];
                })
                onConfirm(dataSave);
            }
        })
    }
    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 === type).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}
                    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 = '';
                if (m.length) {
                    while (m.length > 0) {
                        maxValue += '9'
                        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}
                    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}
                    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'
                    rules={[{ required: true, message: '' }, { max: 50, message: `元数据名称不超过50个字符` },
                    ({ getFieldValue, validateFields }) => ({
                        validator(_, value) { return validatorNull(_, value, getFieldValue, validateFields, '元数据名称') }
                    })]}>
                    <Input style={{ width: '90%' }} placeholder={`请输入元数据名称`} />
                </Form.Item>
                <Form.Item
                    label='元数据代码'
                    name='code'
                    rules={[{ required: true, message: '' }, { max: 50, message: `元数据代码不超过50个字符` },
                    ({ getFieldValue, validateFields }) => ({
                        validator(_, value) { return validatorNull(_, value, getFieldValue, validateFields, '元数据代码') }
                    })]}>
                    <Input style={{ width: '90%' }} placeholder={`请输入元数据代码`} />
                </Form.Item>
                <Form.Item
                    label="元数据类型"
                    name='type'
                    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 => setType(value)}
                        disabled={!editData.add}
                    >
                        {modelTypes.map(m => <Select.Option value={m} key={m}>{m}</Select.Option>)}
                    </Select>
                </Form.Item>
                <Form.Item
                    label='上下文路径'
                    name='path'
                    rules={[{ required: true }]}
                >
                    <TextArea disabled rows={1} style={{ width: '90%' }} />
                </Form.Item>
                <Form.Item
                    label='详情'
                    name='description'
                    rules={[{ max: 255, message: `描述不超过255个字符` }]}>
                    <TextArea rows={4} style={{ width: '90%' }} placeholder={`请输入描述`} />
                </Form.Item>
                {renderModelItems()}
            </Form>
        </Modal >
    )
}
export default MetadataDatabaseModal;