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 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) { |
const TreeNode = Tree.TreeNode; |
||||
return <>数据源管理</> |
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