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