(*)模型管理UI提交

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

@@ -1,7 +1,169 @@
 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';
 
-function MetaModelManagement (props) {
-    return <>模型管理</>
+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 MetaModelManagement
+export default connect(mapStateToProps)(MetaModelManagement);
+
+