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

import React, { useEffect, useState } from 'react'
import { Spin, Select, Tree, Row, Col, Button } from 'antd';
import { connect } from 'react-redux';
import ProTable from '@ant-design/pro-table';

const TreeNode = Tree.TreeNode;
const DATABASE_TYPE = ['目录', '库', '表', '字段', '主键', '外键', '索引'];
function MetaModelManagement(props) {
    const { loading, clientHeight } = props;
    const [selectedKeys, setSelectKeys] = useState([DATABASE_TYPE[0]])
    const [pageSize, setPageSize] = useState(10);
    const [currentPage, setCurrentPage] = useState(1);

    const columns = [
        {
            title: '属性名称',
            dataIndex: 'attributeName',
            ellipsis: true,
            search: false,
        },
        {
            title: '属性代码',
            dataIndex: 'attributeCode',
            ellipsis: true,
            search: false,
        },
        {
            title: '数据类型',
            dataIndex: 'dataType',
            ellipsis: true,
            search: false,
        },
        {
            title: '输入控件',
            dataIndex: 'control',
            ellipsis: true,
            search: false,
        },
        {
            title: '长度',
            dataIndex: 'length',
            ellipsis: true,
            search: false,
        },
        {
            title: '小数位数',
            dataIndex: 'company',
            ellipsis: true,
            search: false,
        },
        {
            title: '允许为空',
            dataIndex: 'readOnly',
            ellipsis: true,
            search: false,
        },
        {
            title: '是否只读',
            dataIndex: 'readOnly',
            ellipsis: true,
            search: false,
        },
        {
            title: '描述',
            dataIndex: 'description',
            ellipsis: true,
            search: false,
        },


        {
            title: '操作',
            width: 160,
            key: 'option',
            valueType: 'option',
            render: (text, record) => {
                const options = [];

                options.push(<a>删除</a>)
                return options;

            },
        },
    ];


    return <Spin spinning={loading}>
        <Row>
            <Col style={{ width: 240 }}>
                <Tree
                    height={clientHeight - 95}
                    defaultExpandedKeys={[]}
                    selectedKeys={selectedKeys}
                    onSelect={(keys, e) => {
                        if (e.selected) {
                            setSelectKeys(keys)
                        }
                    }}
                    defaultExpandAll={true}
                >
                    <TreeNode title={'数据库'} key={'数据库'} selectable={false}>
                        <TreeNode selectable={false} title={'关系型数据库'} key={'关系型数据库'}>
                            {DATABASE_TYPE.map(s => <TreeNode title={s} key={s} />)}
                        </TreeNode>
                    </TreeNode>
                    <TreeNode title={'文件'} key={'文件'} />
                    <TreeNode title={'接口'} key={'接口'} />
                </Tree>
            </Col>
            <Col style={{ width: 'calc(100% - 240px)' }}>
                <ProTable
                    columns={columns}
                    rowKey="id"
                    request={async (param) => {

                    }}
                    dateFormatter="string"
                    search={false}
                    scroll={
                        {
                            scrollToFirstRowOnChange: true,
                            y: clientHeight - 260
                        }
                    }
                    pagination={{
                        total: 0,
                        showSizeChanger: true,
                        showQuickJumper: true,
                        current: currentPage,
                        pageSize: pageSize || 10,
                        pageSizeOptions: [10, 20, 50],
                        showTotal: (total) => {
                            return <span style={{ fontSize: 15 }}>{`共${Math.ceil(total / pageSize)}页，${total}项`}</span>
                        },
                        onShowSizeChange: (currentPage, pageSize) => {
                            setCurrentPage(currentPage);
                            setPageSize(pageSize);

                        },
                        onChange: (page, pageSize) => {
                            setCurrentPage(page);
                            setPageSize(pageSize);

                        }
                    }}
                    dataSource={[]}
                    headerTitle={<Button type='primary'>新建</Button>}
                    options={false}
                />
            </Col>
        </Row>
    </Spin>

}

function mapStateToProps(state) {
    const {
        auth, global,
    } = state;
    return {
        loading: auth.isRequesting,
        clientHeight: global.clientHeight,

    };
}

export default connect(mapStateToProps)(MetaModelManagement);