peng.peng
2 years ago
1 changed files with 165 additions and 3 deletions
@ -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); |
|||
|
|||
|
|||
|
Loading…
Reference in new issue