Skip to content

S
szse
Commit f8ba0c1f by zhaochengxiang
Options

字段排序不能滚动问题

parent 04d1dfff
Showing with 180 additions and 198 deletions
src/index.less
......@@ -104,3 +104,11 @@ div[id^='__qiankun_microapp_wrapper_'] {
.yy-typography, .yy-typography p {
margin-bottom: 0 !important;
}
tr.drop-over-downward td {
border-bottom: 2px dashed #1890ff;
}
tr.drop-over-upward td {
border-top: 2px dashed #1890ff;
}
\ No newline at end of file
src/view/Manage/Model/Component/ImportAction.jsx
......@@ -252,53 +252,62 @@ const ImportAction = (props) => {
return newEasyDataModelerIndices.filter(item => (item.indexedEasyDataModelAttributes||[]).length > 0);
}
const container = (<>
{
<div className='d-flex mb-5' style={{ alignItems: 'center' }}>
<span style={{ marginLeft: 'auto' }}>规范:</span>
<Select className='ml-3' value={constraint.name?constraint.name:null} placeholder='请选择规范' style={{ minWidth: 100 }} onChange={onConstraintChange} disabled={ action==='detail' } >
{
(constraints||[]).map((constraint, index) => {
return (
<Option key={index} value={constraint.name}>{ constraint.cnName||'' }</Option>
)
})
}
</Select>
</div>
}
<ImportActionHeader
form={form}
editable={action!=='detail'}
modelerData={modelerData||{}}
templates={templates}
validateReports={validateReports}
onTemplateChange={onTemplateChange}
onChange={onHeaderChange}
terms={terms}
/>
<ImportActionTable
modelerData={modelerData||{}}
constraint={constraint}
template={template}
validateReports={validateReports}
supportedDatatypes={supportedDatatypes}
onChange={onTableChange}
editable={action!=='detail'}
terms={terms}
/>
<ImportActionIndex
modelerData={modelerData||{}}
constraint={constraint}
template={template}
validateReports={validateReports}
onChange={onIndexChange}
editable={action!=='detail'}
terms={terms}
/>
</>);
return (
<Spin spinning={loading}>
{
<div className='d-flex mb-5' style={{ alignItems: 'center' }}>
<span style={{ marginLeft: 'auto' }}>规范:</span>
<Select className='ml-3' value={constraint.name?constraint.name:null} placeholder='请选择规范' style={{ minWidth: 100 }} onChange={onConstraintChange} disabled={ action==='detail' } >
{
(constraints||[]).map((constraint, index) => {
return (
<Option key={index} value={constraint.name}>{ constraint.cnName||'' }</Option>
)
})
}
</Select>
</div>
}
<ImportActionHeader
form={form}
editable={action!=='detail'}
modelerData={modelerData||{}}
templates={templates}
validateReports={validateReports}
onTemplateChange={onTemplateChange}
onChange={onHeaderChange}
terms={terms}
/>
<ImportActionTable
modelerData={modelerData||{}}
constraint={constraint}
template={template}
validateReports={validateReports}
supportedDatatypes={supportedDatatypes}
onChange={onTableChange}
editable={action!=='detail'}
terms={terms}
/>
<ImportActionIndex
modelerData={modelerData||{}}
constraint={constraint}
template={template}
validateReports={validateReports}
onChange={onIndexChange}
editable={action!=='detail'}
terms={terms}
/>
</Spin>
<>
{
//container包裹在Spin中,会有谷歌浏览器字段排序拖动不能滚动鼠标的问题,所以加载完成后,直接展示container
loading ? <Spin spinning={loading}>
{ container }
</Spin> : container
}
</>
);
};
......
src/view/Manage/Model/Component/ImportActionIndex.jsx
......@@ -603,36 +603,18 @@ const ImportActionIndex = (props) => {
return hasValidateReports ? includeValidateColumn : columns;
}
let pendingUpdateFn = undefined;
let requestedFrame = undefined;
const drawFrame = () => {
const newData = update(data, pendingUpdateFn);
onChange && onChange(newData);
pendingUpdateFn = undefined;
requestedFrame = undefined;
};
const scheduleUpdate = (updateFn) => {
pendingUpdateFn = updateFn;
if (!requestedFrame) {
requestedFrame = requestAnimationFrame(drawFrame);
}
}
const moveRow = useCallback(
(dragIndex, hoverIndex) => {
const dragRow = data[dragIndex];
scheduleUpdate({
const newData = update(data, {
$splice: [
[dragIndex, 1],
[hoverIndex, 0, dragRow],
],
});
onChange && onChange(newData);
},
//eslint-disable-next-line react-hooks/exhaustive-deps
[data],
......@@ -671,34 +653,36 @@ const ImportActionIndex = (props) => {
editable && <Button className='ml-3' type="primary" onClick={onAddClick} disabled={ editingKey!==null || keyword!=='' } >新增索引</Button>
}
</div>
<DndProvider backend={HTML5Backend} >
<Form form={form} component={false} onValuesChange={onValuesChange}>
<Table
components={{
body: {
cell: EditableCell,
//编辑或者搜索状态下不允许拖动
row: (editable&&editingKey===null&&keyword==='')?DragableBodyRow:null,
},
}}
onRow={(record, index) => {
if (!editable || editingKey!==null || keyword.length>0) return null;
return {
index,
moveRow
}
}}
dataSource={filterData||[]}
columns={mergedColumns()}
size='small'
rowKey='name'
rowClassName="editable-row"
pagination={false}
sticky
/>
</Form>
</DndProvider>
<div className='content'>
<DndProvider backend={HTML5Backend} >
<Form form={form} component={false} onValuesChange={onValuesChange}>
<Table
components={{
body: {
cell: EditableCell,
//编辑或者搜索状态下不允许拖动
row: (editable&&editingKey===null&&keyword==='')?DragableBodyRow:null,
},
}}
onRow={(record, index) => {
if (!editable || editingKey!==null || keyword.length>0) return null;
return {
index,
moveRow
}
}}
dataSource={filterData||[]}
columns={mergedColumns()}
size='small'
rowKey='name'
rowClassName="editable-row"
pagination={false}
sticky
/>
</Form>
</DndProvider>
</div>
</div>
);
};
......
src/view/Manage/Model/Component/ImportActionIndex.less
.model-import-action-index {
.yy-table {
.content {
max-height: 200px !important;
overflow: auto !important;
}
......
src/view/Manage/Model/Component/ImportActionTable.jsx
......@@ -691,39 +691,18 @@ const ImportActionTable = (props) => {
return hasValidateReports ? includeValidateColumn : columns;
}
//增加拖拽自动滚动功能
//https://codesandbox.io/s/react-dnd-example-12-s3nnf?file=/src/Container.jsx:393-425
let pendingUpdateFn = undefined;
let requestedFrame = undefined;
const drawFrame = () => {
const newData = update(data, pendingUpdateFn);
onChangeRef.current && onChangeRef.current(newData);
pendingUpdateFn = undefined;
requestedFrame = undefined;
};
const scheduleUpdate = (updateFn) => {
pendingUpdateFn = updateFn;
if (!requestedFrame) {
requestedFrame = requestAnimationFrame(drawFrame);
}
}
const moveRow = useCallback(
(dragIndex, hoverIndex) => {
const dragRow = data[dragIndex];
scheduleUpdate({
const newData = update(data, {
$splice: [
[dragIndex, 1],
[hoverIndex, 0, dragRow],
],
});
// onChangeRef.current && onChangeRef.current(newData);
onChangeRef.current && onChangeRef.current(newData);
},
//eslint-disable-next-line react-hooks/exhaustive-deps
[data],
......@@ -762,88 +741,90 @@ const ImportActionTable = (props) => {
editable && <Button className='ml-3' type="primary" onClick={onAddClick} disabled={ editingKey!=='' || keyword!=='' } >新增字段</Button>
}
</div>
<DndProvider backend={HTML5Backend} >
<Form form={form} component={false} onValuesChange={onValuesChange}>
<Table
components={{
body: {
cell: EditableCell,
//编辑或者搜索状态下不允许拖动
row: (editable&&editingKey===''&&keyword==='')?DragableBodyRow:null,
},
}}
onRow={(record, index) => {
if (!editable || editingKey!=='' || keyword.length>0) return null;
return {
index,
moveRow
}
}}
dataSource={filterData||[]}
columns={mergedColumns()}
size='small'
rowKey='iid'
rowClassName="editable-row"
pagination={false}
sticky
expandable={{
columnWidth: 0,
expandedRowRender: record => (
<>
{
editingKey!=='' && <>
<div className='content'>
<DndProvider backend={HTML5Backend} >
<Form form={form} component={false} onValuesChange={onValuesChange}>
<Table
components={{
body: {
cell: EditableCell,
//编辑或者搜索状态下不允许拖动
row: (editable&&editingKey===''&&keyword==='')?DragableBodyRow:null,
},
}}
onRow={(record, index) => {
if (!editable || editingKey!=='' || keyword.length>0) return null;
return {
index,
moveRow
}
}}
dataSource={filterData||[]}
columns={mergedColumns()}
size='small'
rowKey='iid'
rowClassName="editable-row"
pagination={false}
sticky
expandable={{
columnWidth: 0,
expandedRowRender: record => (
<>
{
suggests && suggests.length>0 && (
<>
{/* <Divider orientation="left">智能推荐</Divider> */}
<Radio.Group onChange={onSuggestChange} className='mb-3 ml-7'>
{
suggests && suggests.map((suggest, index) => {
return (
<Radio key={index} value={index} className='mt-3' style={{ display: 'block' }}>
{`中文名称: ${suggest.cnName||''} 英文名称: ${suggest.name||''} 描述: ${suggest.remark||''} 匹配度: `}
<span style={{ color: '#f50' }}>{`${suggest.score*100}%`}</span>
{ index===0 && <span style={{ color: '#f50' }}> 推荐</span> }
</Radio>
)
})
}
</Radio.Group>
</>
)
}
{
englishSuggests && englishSuggests.length>0 && (
<>
{/* <Divider orientation="left">智能推荐</Divider> */}
<Radio.Group onChange={onEnglishSuggestChange} className='mb-3 ml-7'>
{
englishSuggests && englishSuggests.map((suggest, index) => {
return (
<Radio key={index} value={index} className='mt-3' style={{ display: 'block' }}>
{suggest||''}
</Radio>
)
})
}
</Radio.Group>
</>
)
editingKey!=='' && <>
{
suggests && suggests.length>0 && (
<>
{/* <Divider orientation="left">智能推荐</Divider> */}
<Radio.Group onChange={onSuggestChange} className='mb-3 ml-7'>
{
suggests && suggests.map((suggest, index) => {
return (
<Radio key={index} value={index} className='mt-3' style={{ display: 'block' }}>
{`中文名称: ${suggest.cnName||''} 英文名称: ${suggest.name||''} 描述: ${suggest.remark||''} 匹配度: `}
<span style={{ color: '#f50' }}>{`${suggest.score*100}%`}</span>
{ index===0 && <span style={{ color: '#f50' }}> 推荐</span> }
</Radio>
)
})
}
</Radio.Group>
</>
)
}
{
englishSuggests && englishSuggests.length>0 && (
<>
{/* <Divider orientation="left">智能推荐</Divider> */}
<Radio.Group onChange={onEnglishSuggestChange} className='mb-3 ml-7'>
{
englishSuggests && englishSuggests.map((suggest, index) => {
return (
<Radio key={index} value={index} className='mt-3' style={{ display: 'block' }}>
{suggest||''}
</Radio>
)
})
}
</Radio.Group>
</>
)
}
</>
}
</>
}
</>
),
expandIcon: ({ expanded, onExpand, record }) => {
return null;
},
rowExpandable: record => (editingKey!==''&&((suggests||[]).length>0 || (englishSuggests||[]).length>0)),
expandedRowKeys: [editingKey]
}}
/>
</Form>
</DndProvider>
),
expandIcon: ({ expanded, onExpand, record }) => {
return null;
},
rowExpandable: record => (editingKey!==''&&((suggests||[]).length>0 || (englishSuggests||[]).length>0)),
expandedRowKeys: [editingKey]
}}
/>
</Form>
</DndProvider>
</div>
</div>
);
};
......
src/view/Manage/Model/Component/ImportActionTable.less
.model-import-action-table {
.yy-table {
.content {
max-height: 400px !important;
overflow: auto !important;
}
......
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