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

import React, { useEffect, useState } from 'react';
import { Modal, Input, Form, Select, InputNumber, Tooltip, Tag, message } from 'antd';
import { UploadLocal } from '$components';
const { TextArea } = Input;
const MetadataFileModal = (props) => {
    const { onConfirm, onCancel, editData, metadataModels } = props;
    const [form] = Form.useForm();
    const [editUrl, setEditUrl] = useState([]);
    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 === '文件').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 = '';
                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}
                    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;
    }

    const vsjunct = (params) => {
        if (params.length) {
            let appendix = []
            for (let p of params) {
                appendix.push({
                    fName: p.name,
                    size: p.size,
                    fileSize: p.size,
                    storageUrl: p.storageUrl,//必须有storageUrl
                })
            }
            setEditUrl(appendix)
        } else {
            setEditUrl([])
        }
    }
    const handleCancel = () => {
        if (editData.add) {
            if (form.getFieldValue('files') && form.getFieldValue('files').length) {
                onCancel(form.getFieldValue('files')[0]);
            } else {
                onCancel(null);
            }
        } else {
            if (!(form.getFieldValue('files') && form.getFieldValue('files').length)) {
                message.warning('文件已被删除，可重新编辑上传');
                onCancel(null, editData.record.id);
            } else {
                if (!editData.record.files.length) {
                    message.warning('文件需确定提交，才进行入库存储');
                    onCancel(form.getFieldValue('files')[0]);
                } else {
                    onCancel(null);
                }
            }
        }
    }
    return (
        <Modal title={editData.title} open={true} destroyOnClose
            okText='确定' width={800}
            onOk={() => handleOk(null)}
            onCancel={() => handleCancel()}>
            <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='description'
                    rules={[{ max: 255, message: `文件描述不超过255个字符` }]}>
                    <TextArea rows={4} style={{ width: '90%' }} placeholder={`请输入文件描述`} />
                </Form.Item>
                <Form.Item
                    label='文件'
                    name='files'
                    rules={[{ required: true, message: '文件不可为空' }]}>
                    <UploadLocal
                        addNew={editData.add || !editData.record.files.length}
                        isLocal={true}
                        maxFilesNum={1}
                        maxFileSize={40}
                        onChange={vsjunct}
                        fileTypes={["jpg", "png", "gif", "txt", "doc", "docx", "pdf", "xls", "xlsx", "zip", "rar"]}
                        value={editUrl}
                        defaultValue={editUrl}
                        fileList={editData.record.files || []}
                    />
                </Form.Item>
                <Form.Item style={{ paddingLeft: 190 }}>
                    <Tag color="orange">文件大小不超过40MB，开放资源包含多个文件，建议将文件进行压缩，形成压缩包再上传</Tag>
                    <Tag color="orange">支持的文件格式：jpg,png,gif,txt,doc,docx,pdf,xsl,xlsx,zip,rar</Tag>
                </Form.Item>
                {renderModelItems()}
            </Form>
        </Modal >
    )
}
export default MetadataFileModal;