|
|
|
@ -1,16 +1,40 @@ |
|
|
|
import React, { useEffect, useState } from 'react' |
|
|
|
import { Input, Tooltip, Empty } from 'antd' |
|
|
|
import { InsertRowBelowOutlined, DatabaseOutlined, FileOutlined, PullRequestOutlined } from '@ant-design/icons'; |
|
|
|
import { Input, Tooltip, Empty, Pagination, Popover, message } from 'antd' |
|
|
|
import { InsertRowBelowOutlined, DatabaseOutlined, FileOutlined, PullRequestOutlined, KeyOutlined } from '@ant-design/icons'; |
|
|
|
import { useFsRequest, ApiTable } from '$utils'; |
|
|
|
import { connect } from 'react-redux'; |
|
|
|
import { downloadImg, markRedKeywords } from '../utils/index' |
|
|
|
import KeyModal from '../components/keyModal'; |
|
|
|
const METADTA_TYPE = { |
|
|
|
'库': 'databases', |
|
|
|
'表': 'databases', |
|
|
|
'文件': 'files', |
|
|
|
'接口': 'restapis', |
|
|
|
} |
|
|
|
|
|
|
|
const METADTA_TYPE_NAMES = { |
|
|
|
'库': '库表/库（Schema）', |
|
|
|
'表': '库表/表（Table）', |
|
|
|
'文件': '文件（File）', |
|
|
|
'接口': '接口（Api）', |
|
|
|
} |
|
|
|
|
|
|
|
import './style.less'; |
|
|
|
function Retrieval(props) { |
|
|
|
const { user, catalogs, dispatch, actions } = props; |
|
|
|
const [keywords, setKeywords] = useState() |
|
|
|
const [firstInput, setFirstInput] = useState() |
|
|
|
const [page, setPage] = useState(1) |
|
|
|
const [currentData, setCurrentData] = useState(null) |
|
|
|
const formRef = React.createRef(); |
|
|
|
// const { data: catalogs = [] } = useFsRequest({
|
|
|
|
// url: ApiTable.getResourceCatalog,
|
|
|
|
// });
|
|
|
|
useEffect(() => { |
|
|
|
dispatch(actions.metadataManagement.getResourceCatalog()) |
|
|
|
}, []) |
|
|
|
|
|
|
|
const { data: catalogs = [] } = useFsRequest({ |
|
|
|
url: ApiTable.getResourceCatalog, |
|
|
|
}); |
|
|
|
|
|
|
|
//检索元数据
|
|
|
|
const { data: result = {} } = useFsRequest({ |
|
|
|
url: ApiTable.searchMetadata, |
|
|
|
query: { |
|
|
|
@ -20,7 +44,15 @@ function Retrieval(props) { |
|
|
|
ready: !!keywords |
|
|
|
}); |
|
|
|
|
|
|
|
console.log(result) |
|
|
|
//用户申请资源列表
|
|
|
|
const { data: approveList = {} } = useFsRequest({ |
|
|
|
url: ApiTable.approveList, |
|
|
|
query: { |
|
|
|
applyById: user?.id |
|
|
|
}, |
|
|
|
refreshDeps: [user?.id], |
|
|
|
ready: !!(user?.id) |
|
|
|
}); |
|
|
|
|
|
|
|
const renderIcon = (type) => { |
|
|
|
switch (type) { |
|
|
|
@ -54,9 +86,33 @@ function Retrieval(props) { |
|
|
|
</Tooltip> : text |
|
|
|
} |
|
|
|
|
|
|
|
const renderName = (text) => { |
|
|
|
function createMarkup(textFilter) { |
|
|
|
return { __html: textFilter.length == text.length ? markRedKeywords(textFilter, keywords) : markRedKeywords(textFilter, keywords) + '...' }; |
|
|
|
} |
|
|
|
return text?.length > 16 ? |
|
|
|
<Popover placement="topRight" title={null} content={<span dangerouslySetInnerHTML={createMarkup(text)} />}> |
|
|
|
<span dangerouslySetInnerHTML={createMarkup(text.substring(0, 16))} /> |
|
|
|
</Popover> |
|
|
|
: <span dangerouslySetInnerHTML={createMarkup(text)} /> |
|
|
|
} |
|
|
|
|
|
|
|
const downloadData = (s) => { |
|
|
|
if (s?.type == '文件') { |
|
|
|
const suffix = s?.fileName?.substring(s?.fileName?.length - 3, s?.fileName?.length) |
|
|
|
if (suffix == 'png' || suffix == 'jpg') { |
|
|
|
downloadImg(s.fileName) |
|
|
|
} else { |
|
|
|
window.open('/assets/files/common/' + s.fileName) |
|
|
|
} |
|
|
|
} else { |
|
|
|
alert('库表下载待开发') |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
return !result?.rows ? <div className='search-container'> |
|
|
|
<div className='title'>数据资源检索</div> |
|
|
|
<Input addonAfter={<div onClick={() => { setKeywords(firstInput) }} style={{ color: '#fff' }}>搜索一下</div>} |
|
|
|
<Input addonAfter={<div onClick={() => { setKeywords(firstInput) }} style={{ color: '#fff', cursor: 'pointer' }}>搜索一下</div>} |
|
|
|
style={{ width: '40%', marginLeft: 10, marginBottom: 30 }} |
|
|
|
onChange={e => { setFirstInput(e.target.value) }} |
|
|
|
onPressEnter={e => { setKeywords(e.target.value) }} |
|
|
|
@ -66,25 +122,63 @@ function Retrieval(props) { |
|
|
|
<Input.Search defaultValue={keywords} style={{ width: '30%', marginLeft: 10, marginBottom: 30 }} |
|
|
|
onSearch={value => { setKeywords(value) }} |
|
|
|
/> |
|
|
|
{result?.rows?.map(s => { |
|
|
|
{result?.rows?.slice((page - 1) * 10, (page - 1) * 10 + 10).map(s => { |
|
|
|
const catalogText = renderCatalog(s?.catalog).split('/').reverse().toString().replaceAll(',', '/') |
|
|
|
const tagText = s?.tagDatabases?.map(x => x.tag.name).toString() || '-' |
|
|
|
return <div className='result-row'> |
|
|
|
<div className='column1'> |
|
|
|
{renderIcon(s?.type)} |
|
|
|
{s?.code && <span> 代码：{renderText(s?.code)}</span>} |
|
|
|
<span> 名称：{renderText(s?.name)}</span> |
|
|
|
<span> 类型：{s?.type}</span> |
|
|
|
<span> 名称：{renderName(s?.name)}</span> |
|
|
|
<span> 类型：{METADTA_TYPE_NAMES[s?.type]}</span> |
|
|
|
<span> 路径：{renderText(catalogText)}</span> |
|
|
|
<span> 标签：{renderText(tagText)}</span> |
|
|
|
</div> |
|
|
|
<div className='column2'>相关操作：<a>定位</a> |
|
|
|
{s?.type == '表' || s?.type == '文件' ? <a>下载</a> : ''} |
|
|
|
<div className='column2'>相关操作：<a onClick={() => { window.open(`/metadataManagement/latestMetadata?type=${METADTA_TYPE[s.type]}&treeId=${s?.catalog}&resourceId=${s.id}&catalogKey=${s.catalogKey}`) }}>定位</a> |
|
|
|
{s?.type == '表' || s?.type == '文件' ? |
|
|
|
user?.role == '数据消费者' ? |
|
|
|
<a onClick={() => { |
|
|
|
const token = approveList?.rows?.find(x => x.resourceId == s.id)?.token |
|
|
|
if (!token) { |
|
|
|
message.warning('您暂未申请该数据资源，请先申请该数据资源') |
|
|
|
} else { |
|
|
|
setCurrentData(s) |
|
|
|
} |
|
|
|
|
|
|
|
}}>下载</a> : |
|
|
|
<a onClick={() => { downloadData(s) }}>下载</a> : ''} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
})} |
|
|
|
{result?.rows?.length > 0 && <Pagination |
|
|
|
defaultCurrent={1} total={result?.rows?.length} |
|
|
|
style={{ float: 'right', paddingRight: '5%' }} |
|
|
|
showTotal={total => `共 ${total} 条数据`} |
|
|
|
onChange={(page, pageSize) => { |
|
|
|
setPage(page) |
|
|
|
}} |
|
|
|
/>} |
|
|
|
{!result?.rows?.length > 0 && <Empty />} |
|
|
|
|
|
|
|
{currentData && <KeyModal |
|
|
|
resourceId={currentData?.id} |
|
|
|
approveList={approveList} |
|
|
|
onFinish={() => { |
|
|
|
downloadData(currentData) |
|
|
|
setCurrentData(null) |
|
|
|
}} |
|
|
|
onCancel={() => { setCurrentData(null) }} |
|
|
|
/>} |
|
|
|
</> |
|
|
|
} |
|
|
|
|
|
|
|
export default Retrieval |
|
|
|
function mapStateToProps(state) { |
|
|
|
const { auth, resourceCatalog, global } = state; |
|
|
|
return { |
|
|
|
catalogs: resourceCatalog?.data || [], |
|
|
|
user: auth.user, |
|
|
|
actions: global.actions, |
|
|
|
}; |
|
|
|
} |
|
|
|
export default connect(mapStateToProps)(Retrieval) |
|
|
|
|
|
|
|
|
