8 changed files with 219 additions and 18 deletions
@ -1,3 +1,8 @@ |
|||
'use strict'; |
|||
import React from 'react'; |
|||
export const ModelTypes = ['目录', '库', '视图', '表', '字段', '索引', '外键', '主键', '唯一约束']; |
|||
export const ConfigurableTypes = { |
|||
'目录': ['库'], |
|||
'库': ['视图', '表'], |
|||
'表': ['字段', '索引', '外键', '主键', '唯一约束'] |
|||
} |
|||
|
|||
@ -1,7 +1,186 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import React, { useEffect, useState } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Tabs, Spin, Table, Button, Divider, message } from 'antd'; |
|||
import moment from 'moment'; |
|||
import { push } from 'react-router-redux'; |
|||
import MetadataDatabaseModal from '../components/metadataDatabModal'; |
|||
import { ModelTypes, ConfigurableTypes } from '../constants/index'; |
|||
|
|||
function MetadataDetails (props) { |
|||
return <>元数据详情</> |
|||
} |
|||
const MetadataDetails = (props) => { |
|||
const { user, actions, dispatch, clientHeight, metadataModels, isRequesting, resourceCatalogPath, match } = props; |
|||
const { metadataManagement } = actions; |
|||
const [activeKey, setActiveKey] = useState('info'); |
|||
const [databasesRecord, setDatabasesRecord] = useState(null); |
|||
const [databasesRecordId, setDatabasesRecordId] = useState(null); |
|||
const [tableData, setTableData] = useState([]); |
|||
const [tableDataCount, setTableDataCount] = useState(0);//Table数据
|
|||
const [limit, setLimit] = useState(10); |
|||
const [currentPage, setCurrentPage] = useState(1); |
|||
const [modalVisible, setModalVisible] = useState(false); |
|||
const [editData, setEditData] = useState({}); |
|||
|
|||
const initData = () => { |
|||
dispatch(metadataManagement.getMetadataModels({ modelTypes: ModelTypes })); |
|||
dispatch(metadataManagement.getMetadataDatabasesById(match.params.id)).then(res => { |
|||
if (res.success) { |
|||
setDatabasesRecord(res.payload.data); |
|||
setDatabasesRecordId(res.payload.data.id); |
|||
initTableData({ id: res.payload.data.id, limit, offset: 0 }); |
|||
} |
|||
}); |
|||
} |
|||
useEffect(() => { |
|||
setActiveKey('info') |
|||
initData(); |
|||
}, [match.params.id]) |
|||
|
|||
const onTabChange = (key) => { |
|||
setActiveKey(key) |
|||
} |
|||
const onView = (record) => { |
|||
setDatabasesRecordId(record.id); |
|||
dispatch(push(`/metadataManagement/latestMetadata/detail/${record.id}`)); |
|||
} |
|||
const renderBasicInfo = () => { |
|||
return databasesRecord ? <div style={{ marginLeft: 24 }}> |
|||
{/* <Divider orientation="left" orientationMargin="0" plain>基本信息</Divider> */} |
|||
< div style={{ lineHeight: '35px', marginLeft: 32 }}> |
|||
<div > 元数据名称：<span style={{ color: '#7F7F7F' }}>{databasesRecord.name}</span></div> |
|||
<div > 元数据代码：<span style={{ color: '#7F7F7F' }}>{databasesRecord.code}</span></div> |
|||
<div > 元数据类型：<span style={{ color: '#7F7F7F' }}>{databasesRecord.type}</span></div> |
|||
<div > 创建时间：<span style={{ color: '#7F7F7F' }}>{moment(databasesRecord.createAt).format("YYYY-MM-DD HH:mm:ss")}</span></div> |
|||
<div > 修改时间：<span style={{ color: '#7F7F7F' }}>{databasesRecord.updateAt ? moment(databasesRecord.updateAt).format("YYYY-MM-DD HH:mm:ss") : ''}</span></div> |
|||
<div > 上下文路径：<span style={{ color: '#7F7F7F' }}>{'/' + resourceCatalogPath.join('/')}</span></div> |
|||
<div > 元数据详情：<span style={{ color: '#7F7F7F' }}>{databasesRecord.description}</span></div> |
|||
</div > |
|||
<Divider orientation="left" orientationMargin="5" plain>属性</Divider> |
|||
< div style={{ lineHeight: '35px', marginLeft: 32 }}> |
|||
{databasesRecord.attributesParam ? metadataModels && metadataModels.filter(mm => mm.modelType === databasesRecord.type).map(mm => |
|||
<div > {mm.attributeName}：<span style={{ color: '#7F7F7F' }}>{databasesRecord.attributesParam[mm.attributeCode]}</span></div>) : ''} |
|||
</div > |
|||
</div > : <></> |
|||
} |
|||
const initTableData = (query = {}) => { |
|||
dispatch(metadataManagement.getMetadataDatabases({ ...query })).then(res => { |
|||
if (res.success) { |
|||
setTableData(res.payload.data.rows); |
|||
setTableDataCount(res.payload.data.count); |
|||
} |
|||
}) |
|||
} |
|||
//新建
|
|||
const onConfirm = (values) => { |
|||
let obj = { |
|||
parent: databasesRecord.id, |
|||
createBy: user.id, catalog: databasesRecord.catalog, |
|||
catalogKey: sessionStorage.getItem('jumpSelectedKey'), ...values |
|||
} |
|||
dispatch(metadataManagement.postMeatadataDatabases(obj)).then(() => { |
|||
setCurrentPage(1); |
|||
initTableData({ id: databasesRecord.id, limit, offset: 0 }); |
|||
setModalVisible(false); |
|||
}); |
|||
} |
|||
const renderConfigInfo = () => { |
|||
const columns = [ |
|||
{ |
|||
title: '元数据名称', |
|||
dataIndex: 'name', |
|||
key: 'name', |
|||
ellipsis: true |
|||
}, { |
|||
title: '元数据代码', |
|||
dataIndex: 'code', |
|||
key: 'code', |
|||
ellipsis: true |
|||
}, { |
|||
title: '元数据类型', |
|||
dataIndex: 'type', |
|||
key: 'type', |
|||
}, { |
|||
title: '操作', |
|||
dataIndex: 'action', |
|||
render: (text, record) => { |
|||
return <a onClick={() => onView(record)}>查看</a> |
|||
} |
|||
}]; |
|||
|
|||
return databasesRecord && ConfigurableTypes['表'].includes(databasesRecord.type) ? null : <Spin spinning={isRequesting}> |
|||
<div style={{ marginBottom: 16 }}> |
|||
<Button type='primary' onClick={() => { |
|||
setEditData({ add: true, title: '新建库表元数据', record: { path: '/' + resourceCatalogPath.join('/'), type: ConfigurableTypes[databasesRecord.type][0] } }); |
|||
setModalVisible(true); |
|||
}}>新建</Button> |
|||
</div> |
|||
<Table |
|||
scroll={{ y: clientHeight - 320 }} |
|||
rowKey='id' |
|||
columns={columns} |
|||
dataSource={tableData} |
|||
pagination={{ |
|||
current: currentPage, |
|||
pageSize: limit, |
|||
total: tableDataCount, |
|||
showSizeChanger: true, |
|||
// showQuickJumper: true,
|
|||
showTotal: (total) => { return <span style={{ fontSize: 15 }}>{`共${Math.ceil(total / limit)} 页，${total} 项`}</span> }, |
|||
onShowSizeChange: (currentPage, pageSize) => { |
|||
setCurrentPage(currentPage); |
|||
setLimit(pageSize); |
|||
}, |
|||
onChange: (page, pageSize) => { |
|||
setCurrentPage(page); |
|||
setLimit(pageSize); |
|||
let queryParams = { |
|||
id: databasesRecord.id, |
|||
page: page - 1, |
|||
size: pageSize |
|||
}; |
|||
initTableData(queryParams); |
|||
} |
|||
}} |
|||
> |
|||
</Table> |
|||
{ |
|||
modalVisible ? |
|||
<MetadataDatabaseModal |
|||
modelTypes={ConfigurableTypes[databasesRecord.type]} |
|||
metadataModels={metadataModels.filter(m => ConfigurableTypes[databasesRecord.type].includes(m.modelType))} |
|||
editData={editData} |
|||
onCancel={() => setModalVisible(false)} |
|||
onConfirm={onConfirm} /> : '' |
|||
} |
|||
</Spin > |
|||
|
|||
export default MetadataDetails |
|||
} |
|||
return <div> |
|||
<Tabs defaultActiveKey="info" |
|||
onChange={onTabChange} |
|||
activeKey={activeKey} |
|||
items={[ |
|||
{ |
|||
label: <span>基本信息</span>, |
|||
key: 'info', children: renderBasicInfo() |
|||
}, |
|||
{ |
|||
label: <span>组合</span>, |
|||
key: 'detailConfig', children: renderConfigInfo() |
|||
} |
|||
]}> |
|||
</Tabs> |
|||
{ |
|||
|
|||
} |
|||
</div > |
|||
} |
|||
function mapStateToProps(state) { |
|||
const { global, auth, metadataModels } = state; |
|||
return { |
|||
user: auth.user, |
|||
actions: global.actions, |
|||
clientHeight: global.clientHeight, |
|||
isRequesting: metadataModels.isRequesting, |
|||
metadataModels: metadataModels.data, |
|||
}; |
|||
} |
|||
export default connect(mapStateToProps)(MetadataDetails) |
|||
Loading…
Reference in new issue