peng.peng
2 years ago
4 changed files with 205 additions and 5 deletions
@ -1,7 +1,183 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import { Spin, Popconfirm, Tree, Row, Col, Button, Input, Table } from 'antd'; |
|||
import { connect } from 'react-redux'; |
|||
import ProTable from '@ant-design/pro-table'; |
|||
|
|||
function MetadataDetails (props) { |
|||
return <>数据源管理</> |
|||
const TreeNode = Tree.TreeNode; |
|||
function DataSourceManagement(props) { |
|||
const { loading, clientHeight, actions, dispatch, metaModel } = props; |
|||
const [pageSize, setPageSize] = useState(10); |
|||
const [currentPage, setCurrentPage] = useState(1); |
|||
|
|||
const queryData = (search) => { |
|||
const query = { |
|||
limit: search ? 10 : pageSize || 10, |
|||
page: search ? 1 : currentPage || 1, |
|||
} |
|||
|
|||
dispatch(actions.metadataManagement.getMetaModelList(query)); |
|||
} |
|||
|
|||
useEffect(() => { |
|||
queryData(); |
|||
}, [pageSize, currentPage]); |
|||
|
|||
const handleDelete = (id) => { |
|||
dispatch(actions.metadataManagement.deleteMetaModel(id)).then(() => { |
|||
queryData(); |
|||
}); |
|||
}; |
|||
|
|||
const onFinish = async (values, editData) => { |
|||
if (editData) { |
|||
const dataToSave = { ...values } |
|||
return dispatch( |
|||
actions.metadataManagement.modifyMetaModel(editData.id, dataToSave, values?.msg || ''), |
|||
).then(() => { |
|||
queryData(); |
|||
}); |
|||
} |
|||
|
|||
return dispatch(actions.metadataManagement.addMetaModel({ |
|||
...values, |
|||
})).then(() => { |
|||
queryData(); |
|||
}); |
|||
}; |
|||
|
|||
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: 'nullable', |
|||
ellipsis: true, |
|||
search: false, |
|||
render: (text, record) => record?.nullable ? '是' : '否' |
|||
}, |
|||
{ |
|||
title: '是否只读', |
|||
dataIndex: 'readOnly', |
|||
ellipsis: true, |
|||
search: false, |
|||
render: (text, record) => record?.readOnly ? '是' : '否' |
|||
}, |
|||
{ |
|||
title: '描述', |
|||
dataIndex: 'description', |
|||
ellipsis: true, |
|||
search: false, |
|||
}, |
|||
{ |
|||
title: '操作', |
|||
width: 160, |
|||
key: 'option', |
|||
valueType: 'option', |
|||
render: (text, record) => { |
|||
const options = []; |
|||
options.push(<a>编辑</a>) |
|||
options.push( |
|||
<Popconfirm |
|||
key="del" |
|||
placement="top" |
|||
title="是否确认删除该模型?" |
|||
onConfirm={() => handleDelete(record.id)} |
|||
okText="是" |
|||
cancelText="否" |
|||
> |
|||
<a>删除</a> |
|||
</Popconfirm>) |
|||
|
|||
return options; |
|||
|
|||
}, |
|||
}, |
|||
]; |
|||
return <Spin spinning={loading}> |
|||
<Row style={{ marginBottom: 16 }}> |
|||
<Col span={12}><Button type='primary'>新建</Button></Col> |
|||
<Col span={12} style={{ textAlign: 'right' }}><Input style={{ width: 220, marginRight: 15 }} placeholder="数据源名称" /><Button type='primary'>查询</Button></Col> |
|||
</Row> |
|||
<Table |
|||
columns={columns} |
|||
dateFormatter="string" |
|||
search={false} |
|||
scroll={ |
|||
{ |
|||
scrollToFirstRowOnChange: true, |
|||
y: clientHeight - 260 |
|||
} |
|||
} |
|||
pagination={{ |
|||
size: 'large', |
|||
total: metaModel?.count, |
|||
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={metaModel?.rows || []} |
|||
options={false} |
|||
/> |
|||
</Spin> |
|||
|
|||
} |
|||
|
|||
function mapStateToProps(state) { |
|||
const { |
|||
auth, global, metaModel |
|||
} = state; |
|||
return { |
|||
loading: metaModel.isRequesting, |
|||
clientHeight: global.clientHeight, |
|||
actions: global.actions, |
|||
metaModel: metaModel?.data || {} |
|||
}; |
|||
} |
|||
|
|||
export default MetadataDetails |
|||
export default connect(mapStateToProps)(DataSourceManagement); |
|||
|
|||
|
|||
|
|||
|
Loading…
Reference in new issue