GovernmentDataResourceCenter/web/client/src/sections/metadataManagement/containers/metadataDetails.js

import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Tabs, Spin, Table, Button, Divider, message } from 'antd';
import moment from 'moment';
import { push } from 'react-router-redux';
import MetadataDatabaseModal from '../components/metadataDatabModal';
import { ModelTypes, ConfigurableTypes } from '../constants/index';

const MetadataDetails = (props) => {
    const { user, actions, dispatch, clientHeight, metadataModels, isRequesting, resourceCatalogPath, match } = props;
    const { metadataManagement } = actions;
    const [activeKey, setActiveKey] = useState('info');
    const [databasesRecord, setDatabasesRecord] = useState(null);
    const [databasesRecordId, setDatabasesRecordId] = useState(null);
    const [tableData, setTableData] = useState([]);
    const [tableDataCount, setTableDataCount] = useState(0);//Table数据
    const [limit, setLimit] = useState(10);
    const [currentPage, setCurrentPage] = useState(1);
    const [modalVisible, setModalVisible] = useState(false);
    const [editData, setEditData] = useState({});

    const initData = () => {
        dispatch(metadataManagement.getMetadataModels({ modelTypes: ModelTypes }));
        dispatch(metadataManagement.getMetadataDatabasesById(match.params.id)).then(res => {
            if (res.success) {
                setDatabasesRecord(res.payload.data);
                setDatabasesRecordId(res.payload.data.id);
                initTableData({ id: res.payload.data.id, limit, offset: 0 });
            }
        });
    }
    useEffect(() => {
        setActiveKey('info')
        initData();
    }, [match.params.id])

    const onTabChange = (key) => {
        setActiveKey(key)
    }
    const onView = (record) => {
        setDatabasesRecordId(record.id);
        dispatch(push(`/metadataManagement/latestMetadata/detail/${record.id}`));
    }
    const renderBasicInfo = () => {
        return databasesRecord ? <div style={{ marginLeft: 24 }}>
            {/* <Divider orientation="left" orientationMargin="0" plain>基本信息</Divider> */}
            < div style={{ lineHeight: '35px', marginLeft: 32 }}>
                <div > 元数据名称：<span style={{ color: '#7F7F7F' }}>{databasesRecord.name}</span></div>
                <div > 元数据代码：<span style={{ color: '#7F7F7F' }}>{databasesRecord.code}</span></div>
                <div > 元数据类型：<span style={{ color: '#7F7F7F' }}>{databasesRecord.type}</span></div>
                <div > 创建时间：<span style={{ color: '#7F7F7F' }}>{moment(databasesRecord.createAt).format("YYYY-MM-DD HH:mm:ss")}</span></div>
                <div > 修改时间：<span style={{ color: '#7F7F7F' }}>{databasesRecord.updateAt ? moment(databasesRecord.updateAt).format("YYYY-MM-DD HH:mm:ss") : ''}</span></div>
                <div > 上下文路径：<span style={{ color: '#7F7F7F' }}>{'/' + resourceCatalogPath.join('/')}</span></div>
                <div > 元数据详情：<span style={{ color: '#7F7F7F' }}>{databasesRecord.description}</span></div>
            </div >
            <Divider orientation="left" orientationMargin="5" plain>属性</Divider>
            < div style={{ lineHeight: '35px', marginLeft: 32 }}>
                {databasesRecord.attributesParam ? metadataModels && metadataModels.filter(mm => mm.modelType === databasesRecord.type).map(mm =>
                    <div > {mm.attributeName}：<span style={{ color: '#7F7F7F' }}>{databasesRecord.attributesParam[mm.attributeCode]}</span></div>) : ''}
            </div >
        </div > : <></>
    }
    const initTableData = (query = {}) => {
        dispatch(metadataManagement.getMetadataDatabases({ ...query })).then(res => {
            if (res.success) {
                setTableData(res.payload.data.rows);
                setTableDataCount(res.payload.data.count);
            }
        })
    }
    //新建
    const onConfirm = (values) => {
        let obj = {
            parent: databasesRecord.id,
            createBy: user.id, catalog: databasesRecord.catalog,
            catalogKey: sessionStorage.getItem('jumpSelectedKey'), ...values
        }
        dispatch(metadataManagement.postMeatadataDatabases(obj)).then(() => {
            setCurrentPage(1);
            initTableData({ id: databasesRecord.id, limit, offset: 0 });
            setModalVisible(false);
        });
    }
    const renderConfigInfo = () => {
        const columns = [
            {
                title: '元数据名称',
                dataIndex: 'name',
                key: 'name',
                ellipsis: true
            }, {
                title: '元数据代码',
                dataIndex: 'code',
                key: 'code',
                ellipsis: true
            }, {
                title: '元数据类型',
                dataIndex: 'type',
                key: 'type',
            }, {
                title: '操作',
                dataIndex: 'action',
                render: (text, record) => {
                    return <a onClick={() => onView(record)}>查看</a>
                }
            }];

        return databasesRecord && ConfigurableTypes['表'].includes(databasesRecord.type) ? null : <Spin spinning={isRequesting}>
            <div style={{ marginBottom: 16 }}>
                <Button type='primary' onClick={() => {
                    setEditData({ add: true, title: '新建库表元数据', record: { path: '/' + resourceCatalogPath.join('/'), type: ConfigurableTypes[databasesRecord.type][0] } });
                    setModalVisible(true);
                }}>新建</Button>
            </div>
            <Table
                scroll={{ y: clientHeight - 320 }}
                rowKey='id'
                columns={columns}
                dataSource={tableData}
                pagination={{
                    current: currentPage,
                    pageSize: limit,
                    total: tableDataCount,
                    showSizeChanger: true,
                    // showQuickJumper: true,
                    showTotal: (total) => { return <span style={{ fontSize: 15 }}>{`共${Math.ceil(total / limit)} 页，${total} 项`}</span> },
                    onShowSizeChange: (currentPage, pageSize) => {
                        setCurrentPage(currentPage);
                        setLimit(pageSize);
                    },
                    onChange: (page, pageSize) => {
                        setCurrentPage(page);
                        setLimit(pageSize);
                        let queryParams = {
                            id: databasesRecord.id,
                            page: page - 1,
                            size: pageSize
                        };
                        initTableData(queryParams);
                    }
                }}
            >
            </Table>
            {
                modalVisible ?
                    <MetadataDatabaseModal
                        modelTypes={ConfigurableTypes[databasesRecord.type]}
                        metadataModels={metadataModels.filter(m => ConfigurableTypes[databasesRecord.type].includes(m.modelType))}
                        editData={editData}
                        onCancel={() => setModalVisible(false)}
                        onConfirm={onConfirm} /> : ''
            }
        </Spin >

    }
    return <div>
        <Tabs defaultActiveKey="info"
            onChange={onTabChange}
            activeKey={activeKey}
            items={[
                {
                    label: <span>基本信息</span>,
                    key: 'info', children: renderBasicInfo()
                },
                {
                    label: <span>组合</span>,
                    key: 'detailConfig', children: renderConfigInfo()
                }
            ]}>
        </Tabs>
        {

        }
    </div >
}
function mapStateToProps(state) {
    const { global, auth, metadataModels } = state;
    return {
        user: auth.user,
        actions: global.actions,
        clientHeight: global.clientHeight,
        isRequesting: metadataModels.isRequesting,
        metadataModels: metadataModels.data,
    };
}
export default connect(mapStateToProps)(MetadataDetails)