Skip to content

S
szse
Commit 266982e7 by zhaochengxiang
Options

匹配推荐

parent f52df316
Showing with 180 additions and 161 deletions
src/view/Manage/Model/Component/suggest.jsx
import React from 'react' import React from 'react'
import { Modal, Button, Spin, Tooltip, Typography, Space, Input } from "antd" import { Modal, Button, Spin, Tooltip, Typography, Space, Input } from "antd"
import { ArrowsAltOutlined, ShrinkOutlined } from '@ant-design/icons';
import { dispatch } from '../../../../model' import { dispatch } from '../../../../model'
import Table from '../../../../util/Component/Table' import Table from '../../../../util/Component/Table'
...@@ -21,6 +22,97 @@ const FC = (props) => { ...@@ -21,6 +22,97 @@ const FC = (props) => {
cnName: undefined, cnName: undefined,
triggerType: undefined, triggerType: undefined,
}) })
const [isCompact, setCompact] = React.useState(true)
const cols = [
{
title: '中文名称',
dataIndex: 'cnName',
width: 200,
render: (text, _, __) => {
return (
<Tooltip title={text||''}>
<span>{text||''}</span>
</Tooltip>
)
}
},
{
title: '英文名称',
dataIndex: 'name',
render: (text, _, __) => {
return (
<Tooltip title={text||''}>
<span>{text||''}</span>
</Tooltip>
)
}
},
{
title: '类型',
dataIndex: 'datatype',
width: 160,
render: (_, record, __) => {
if (record?.datatype) {
if ((record?.datatype?.name==='Char'||record?.datatype?.name==='Varchar') && record?.datatype?.parameterValues?.length>0) {
return `${record?.datatype?.name||''}(${(record?.datatype?.parameterValues[0]?record.datatype.parameterValues[0]:0)})`;
} else if ((record?.datatype?.name==='Decimal'||record?.datatype?.name==='Numeric') && record?.datatype?.parameterValues?.length>1) {
return `${record?.datatype?.name||''}(${(record?.datatype?.parameterValues[0]?record.datatype.parameterValues[0]:0)},${(record?.datatype?.parameterValues[1]?record.datatype.parameterValues[1]:0)})`;
}
return record.datatype.name||'';
}
return '';
}
},
{
title: '业务含义',
dataIndex: 'remark',
render: (text, _, __) => {
return (
<Tooltip title={text||''}>
<Typography.Text ellipsis={true}>{text||''}</Typography.Text>
</Tooltip>
)
}
},
{
title: '匹配度',
dataIndex: 'score',
width: 100,
render: (_, record, index) => {
return (
<React.Fragment>
<span style={{ color: '#f50' }}>{`${record.recommendedStats?.score}%`}</span>
{ index===0 && <span style={{ color: '#f50' }}> 推荐</span> }
</React.Fragment>
);
}
},
{
title: '使用次数',
dataIndex: 'referencesCount',
width: 80,
render: (_, record) => {
return (
<span>{record.recommendedStats?.referencesCount}</span>
);
}
},
{
title: '来源',
dataIndex: 'source',
render: (_, record) => {
return (
<SourceComponent data={record.recommendedStats?.sourceInfos||[]} name={record.name||''} onClick={onSourceClick} />
);
}
},
]
React.useEffect(() => { React.useEffect(() => {
if (visible) { if (visible) {
...@@ -43,11 +135,14 @@ const FC = (props) => { ...@@ -43,11 +135,14 @@ const FC = (props) => {
} }
}, [args], { wait:300 }) }, [args], { wait:300 })
const columns = React.useMemo(() => {
return isCompact ? [...cols].slice(0, 4) : [...cols]
}, [cols, isCompact])
const onSourceClick = (id, name) => { const onSourceClick = (id, name) => {
const timestamp = new Date().getTime(); const timestamp = new Date().getTime();
const tempArray = (id??'').split('='); const tempArray = (id??'').split('=');
if (tempArray.length>=3) { if (tempArray.length>=3) {
dispatch({ dispatch({
type: 'datamodel.getParent', type: 'datamodel.getParent',
payload: { payload: {
...@@ -64,98 +159,6 @@ const FC = (props) => { ...@@ -64,98 +159,6 @@ const FC = (props) => {
} }
} }
const cols = React.useMemo(() => {
return [
{
title: '中文名称',
dataIndex: 'cnName',
width: 200,
render: (text, _, __) => {
return (
<Tooltip title={text||''}>
<span>{text||''}</span>
</Tooltip>
)
}
},
{
title: '英文名称',
dataIndex: 'name',
render: (text, _, __) => {
return (
<Tooltip title={text||''}>
<span>{text||''}</span>
</Tooltip>
)
}
},
{
title: '类型',
dataIndex: 'datatype',
width: 160,
render: (_, record, __) => {
if (record?.datatype) {
if ((record?.datatype?.name==='Char'||record?.datatype?.name==='Varchar') && record?.datatype?.parameterValues?.length>0) {
return `${record?.datatype?.name||''}(${(record?.datatype?.parameterValues[0]?record.datatype.parameterValues[0]:0)})`;
} else if ((record?.datatype?.name==='Decimal'||record?.datatype?.name==='Numeric') && record?.datatype?.parameterValues?.length>1) {
return `${record?.datatype?.name||''}(${(record?.datatype?.parameterValues[0]?record.datatype.parameterValues[0]:0)},${(record?.datatype?.parameterValues[1]?record.datatype.parameterValues[1]:0)})`;
}
return record.datatype.name||'';
}
return '';
}
},
{
title: '业务含义',
dataIndex: 'remark',
render: (text, _, __) => {
return (
<Tooltip title={text||''}>
<Typography.Text ellipsis={true}>{text||''}</Typography.Text>
</Tooltip>
)
}
},
{
title: '匹配度',
dataIndex: 'score',
width: 100,
render: (_, record, index) => {
return (
<React.Fragment>
<span style={{ color: '#f50' }}>{`${record.recommendedStats?.score}%`}</span>
{ index===0 && <span style={{ color: '#f50' }}> 推荐</span> }
</React.Fragment>
);
}
},
{
title: '使用次数',
dataIndex: 'referencesCount',
width: 80,
render: (_, record) => {
return (
<span>{record.recommendedStats?.referencesCount}</span>
);
}
},
{
title: '来源',
dataIndex: 'source',
render: (_, record) => {
return (
<SourceComponent data={record.recommendedStats?.sourceInfos||[]} name={record.name||''} onClick={onSourceClick} />
);
}
},
]
}, [onSourceClick])
const getSuggests = () => { const getSuggests = () => {
setLoading(true) setLoading(true)
dispatch({ dispatch({
...@@ -214,82 +217,98 @@ const FC = (props) => { ...@@ -214,82 +217,98 @@ const FC = (props) => {
close() close()
} }
const footer = React.useMemo(() => { // const footer = React.useMemo(() => {
return [ // return [
<Button key='cancel' // <Button key='cancel'
onClick={() => close()} // onClick={() => close()}
>取消</Button>, // >取消</Button>,
<Button key='save' type='primary' // <Button key='save' type='primary'
onClick={() => save()} // onClick={() => save()}
>确定</Button> // >确定</Button>
] // ]
}, [close, save]) // }, [close, save])
return ( return (
<Modal <Modal
visible={visible} visible={visible}
footer={footer} footer={null}
width='80%' width={isCompact?'50%':'80%'}
bodyStyle={{ padding: '15px', overflowX: 'auto', maxHeight: '80vh' }} bodyStyle={{ padding: '15px' }}
title='匹配推荐' title='匹配推荐'
centered destroyOnClose centered destroyOnClose
onCancel={() => { close() }} onCancel={() => { close() }}
> >
<div className='mb-3'>
<Space>
<span>中文名称:</span>
<Input size="middle"
placeholder="请输入中文名称"
value={args.cnName}
bordered={true} allowClear
onChange={(e) => {
setOffset(1)
setArgs({...args, cnName: e.target.value, triggerType: 'cnName'})
}}
style={{ width: inputWidth }}
/>
<span>英文名称:</span>
<Input size="middle"
placeholder="请输入英文名称"
value={args.name}
bordered={true} allowClear
onChange={(e) => {
setOffset(1)
setArgs({...args, name: e.target.value, triggerType: 'name'})
}}
style={{ width: inputWidth }}
/>
</Space>
</div>
{ {
!animating && <Spin spinning={loading}> !animating && <div>
<Table <div className='flex mb-3' style={{ justifyContent: 'space-between' }}>
extraColWidth={32} <Space>
size='small' <span>中文名称:</span>
rowKey='iid' <Input size="middle"
dataSource={suggests||[]} placeholder="请输入中文名称"
columns={cols} value={args.cnName}
pagination={false} bordered={true} allowClear
rowClassName={(record, index) => { onChange={(e) => {
return 'pointer'; setOffset(1)
}} setArgs({...args, cnName: e.target.value, triggerType: 'cnName'})
onRowClick={(event, record) => { }}
setSelectedRows([record]) style={{ width: inputWidth }}
}} />
rowSelection={{ <span>英文名称:</span>
type: 'radio', <Input size="middle"
selectedRowKeys: (selectedRows??[]).map(item => item.iid), placeholder="请输入英文名称"
onChange: (selectedRowKeys, selectedRows) => { value={args.name}
setSelectedRows(selectedRows) bordered={true} allowClear
}, onChange={(e) => {
}} setOffset(1)
/> setArgs({...args, name: e.target.value, triggerType: 'name'})
<div className='flex pt-3' style={{ justifyContent: 'center' }}> }}
<Tooltip title={!havaMore?'没有更多推荐字段':''}> style={{ width: inputWidth }}
<Button onClick={getSuggests} disabled={!havaMore} >加载更多</Button> />
</Tooltip> </Space>
</div> <Button
</Spin> icon={isCompact ? <ArrowsAltOutlined /> : <ShrinkOutlined />}
onClick={() => {
setCompact(prev => !prev)
}}
/>
</div>
<Spin spinning={loading}>
<div style={{ height: isCompact?'50vh':'80vh', overflow: 'auto' }}>
<Table
extraColWidth={32}
size='small'
rowKey='iid'
dataSource={suggests||[]}
columns={columns}
pagination={false}
rowClassName={(record, index) => {
return 'pointer';
}}
onRowClick={(event, record) => {
setSelectedRows([record])
onOk?.(record)
close()
}}
rowSelection={{
type: 'radio',
selectedRowKeys: (selectedRows??[]).map(item => item.iid),
onChange: (selectedRowKeys, selectedRows) => {
setSelectedRows(selectedRows)
if ((selectedRows??[]).length > 0) {
onOk?.(selectedRows[0])
close()
}
},
}}
/>
<div className='flex pt-3' style={{ justifyContent: 'center' }}>
<Tooltip title={!havaMore?'没有更多推荐字段':''}>
<Button onClick={getSuggests} disabled={!havaMore} >加载更多</Button>
</Tooltip>
</div>
</div>
</Spin>
</div>
} }
</Modal> </Modal>
) )
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment