Skip to content

S
szse
Commit 006f8d94 by zhaochengxiang
Options

模型基本信息自适应

parent 1d6f0c2a
Showing with 97 additions and 71 deletions
src/view/Manage/Model/Component/ImportActionHeader.jsx
...@@ -497,28 +497,28 @@ const ImportActionHeader = (props) => { ...@@ -497,28 +497,28 @@ const ImportActionHeader = (props) => {
{...formItemLayout} {...formItemLayout}
onValuesChange={onValuesChange} onValuesChange={onValuesChange}
> >
<Row > <Row gutter={10}>
<Col span={8}> <Col md={24} lg={12} xl={8}>
<Form.Item <Form.Item
label="中文名称" label="中文名称"
name="cnName" name="cnName"
labelAlign="left" labelAlign="left"
rules={[{ required: true, message: '请输入中文名称!' }]} rules={[{ required: true, message: '请输入中文名称!' }]}
> >
<InputDebounce style={{ width: 300 }} /> <InputDebounce />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={8}> <Col md={24} lg={12} xl={8}>
<Form.Item <Form.Item
label="英文名称" label="英文名称"
name="name" name="name"
labelAlign="left" labelAlign="left"
rules={[{ required: true, message: '请输入英文名称!' }]} rules={[{ required: true, message: '请输入英文名称!' }]}
> >
<AutoComplete options={options} onSearch={onSearch} style={{ width: 300 }} /> <AutoComplete options={options} onSearch={onSearch} />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={8}> <Col md={24} lg={12} xl={8}>
<Form.Item <Form.Item
label="规范" label="规范"
name="easyDataModelerModelingConstraint" name="easyDataModelerModelingConstraint"
...@@ -532,19 +532,17 @@ const ImportActionHeader = (props) => { ...@@ -532,19 +532,17 @@ const ImportActionHeader = (props) => {
/> />
</Form.Item> </Form.Item>
</Col> </Col>
</Row> <Col md={24} lg={12} xl={8}>
<Row >
<Col span={8}>
<Form.Item <Form.Item
label="数据内容" label="数据内容"
name="remark" name="remark"
labelAlign="left" labelAlign="left"
rules={[{ required: true, message: '请输入数据内容!' }]} rules={[{ required: true, message: '请输入数据内容!' }]}
> >
<TextArea row={4} style={{ width: 300 }} /> <TextArea row={4} />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={8}> <Col md={24} lg={12} xl={8}>
<Form.Item <Form.Item
label="生成表类型" label="生成表类型"
name="easyDataModelerModelingTemplate" name="easyDataModelerModelingTemplate"
...@@ -559,102 +557,104 @@ const ImportActionHeader = (props) => { ...@@ -559,102 +557,104 @@ const ImportActionHeader = (props) => {
/> />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={8}> <Col md={24} lg={12} xl={8}>
<Form.Item <Form.Item
label="数据表类型" label="数据表类型"
name="tableType" name="tableType"
labelAlign="left" labelAlign="left"
hidden={onlyShowRequireChange} hidden={onlyShowRequireChange}
> >
<Input style={{ width: 300 }} /> <Input />
</Form.Item> </Form.Item>
</Col> </Col>
</Row> <Col md={24} lg={12} xl={8}>
<Row hidden={onlyShowRequireChange}>
<Col span={8}>
<Form.Item <Form.Item
label="数据平台" label="数据平台"
name="dataResidence" name="dataResidence"
labelAlign="left" labelAlign="left"
hidden={onlyShowRequireChange}
> >
<Input style={{ width: 300 }} disabled={true} /> <Input disabled={true} />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={8}> <Col md={24} lg={12} xl={8}>
<Form.Item <Form.Item
label="数据情况" label="数据情况"
name="dataCircumstances" name="dataCircumstances"
labelAlign="left" labelAlign="left"
hidden={onlyShowRequireChange} hidden={onlyShowRequireChange}
> >
<Input style={{ width: 300 }} /> <Input />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={8}> <Col md={24} lg={12} xl={8}>
<Form.Item <Form.Item
label="分布键" label="分布键"
name="easyDataModelerDistributionKey" name="easyDataModelerDistributionKey"
labelAlign="left" labelAlign="left"
hidden={onlyShowRequireChange}
> >
<AttributesSelect modelerData={modelerData} /> <AttributesSelect modelerData={modelerData} />
</Form.Item> </Form.Item>
</Col> </Col>
</Row> <Col md={24} lg={12} xl={8}>
<Row hidden={onlyShowRequireChange}>
<Col span={8}>
<Form.Item <Form.Item
label="分区键" label="分区键"
name="partition" name="partition"
labelAlign="left" labelAlign="left"
hidden={onlyShowRequireChange}
> >
<PartitionSelect modelerData={modelerData} partitionTypes={supportedPartitionTypes} /> <PartitionSelect modelerData={modelerData} partitionTypes={supportedPartitionTypes} />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={8}> <Col md={24} lg={12} xl={8}>
<Form.Item <Form.Item
label="主键" label="主键"
name="easyDataModelerPrimaryKey" name="easyDataModelerPrimaryKey"
labelAlign="left" labelAlign="left"
hidden={onlyShowRequireChange}
> >
<AttributesSelect modelerData={modelerData} /> <AttributesSelect modelerData={modelerData} />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={8}> <Col md={24} lg={12} xl={8}>
<Form.Item <Form.Item
label="类主键" label="类主键"
name="easyDataModelerSemiPrimaryKey" name="easyDataModelerSemiPrimaryKey"
labelAlign="left" labelAlign="left"
hidden={onlyShowRequireChange}
> >
<AttributesSelect modelerData={modelerData} mode='tags' /> <AttributesSelect modelerData={modelerData} mode='tags' />
</Form.Item> </Form.Item>
</Col> </Col>
</Row> <Col md={24} lg={12} xl={8}>
<Row hidden={onlyShowRequireChange}>
<Col span={8}>
<Form.Item <Form.Item
label="加载方式" label="加载方式"
name="dataLoadingStrategy" name="dataLoadingStrategy"
labelAlign="left" labelAlign="left"
hidden={onlyShowRequireChange}
> >
<LoadSelect /> <LoadSelect />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={8}> <Col md={24} lg={12} xl={8}>
<Form.Item <Form.Item
label="更新时间" label="更新时间"
name="dataUpdatingTiming" name="dataUpdatingTiming"
labelAlign="left" labelAlign="left"
hidden={onlyShowRequireChange}
> >
<UpdateSelect /> <UpdateSelect />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={8}> <Col md={24} lg={12} xl={8}>
<Form.Item <Form.Item
label="维护历史" label="维护历史"
name="maintenanceRecords" name="maintenanceRecords"
labelAlign="left" labelAlign="left"
hidden={onlyShowRequireChange}
> >
<Input style={{ width: 300 }} disabled={true} /> <Input disabled={true} />
</Form.Item> </Form.Item>
</Col> </Col>
</Row> </Row>
......
src/view/Manage/Model/Component/ModelTable.jsx
...@@ -5,6 +5,7 @@ import SmoothScroll from 'smooth-scroll'; ...@@ -5,6 +5,7 @@ import SmoothScroll from 'smooth-scroll';
import classnames from 'classnames'; import classnames from 'classnames';
import { Resizable } from 'react-resizable'; import { Resizable } from 'react-resizable';
import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify"; import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
import ResizeObserver from 'rc-resize-observer';
import { dispatch } from '../../../../model'; import { dispatch } from '../../../../model';
import { showMessage, getQueryParam, paginate, isSzseEnv, getTextLength, getTextWidth } from '../../../../util'; import { showMessage, getQueryParam, paginate, isSzseEnv, getTextLength, getTextWidth } from '../../../../util';
...@@ -124,7 +125,7 @@ const ModelTable = (props) => { ...@@ -124,7 +125,7 @@ const ModelTable = (props) => {
const [ filterData, setFilterData ] = useState([]); const [ filterData, setFilterData ] = useState([]);
const [ subData, setSubData ] = useState([]); const [ subData, setSubData ] = useState([]);
const commonColumns = [ const cols = [
{ {
title: '序号', title: '序号',
dataIndex: 'key', dataIndex: 'key',
...@@ -240,7 +241,7 @@ const ModelTable = (props) => { ...@@ -240,7 +241,7 @@ const ModelTable = (props) => {
} }
}; };
const [ columns, setColumns ] = useState(commonColumns); const [ columns, setColumns ] = useState(cols);
const [ pagination, setPagination ] = useState( { pageNum: 1, pageSize: 20 } ); const [ pagination, setPagination ] = useState( { pageNum: 1, pageSize: 20 } );
const [ currentItem, setCurrentItem ] = useState(null); const [ currentItem, setCurrentItem ] = useState(null);
const { pageNum, pageSize } = pagination; const { pageNum, pageSize } = pagination;
...@@ -256,7 +257,7 @@ const ModelTable = (props) => { ...@@ -256,7 +257,7 @@ const ModelTable = (props) => {
if ((modelId||'') !== '') { if ((modelId||'') !== '') {
setColumns(commonColumns.filter(item => item.dataIndex!=='key')); setColumns(cols.filter(item => item.dataIndex!=='key'));
window?.addEventListener("storage", (e) => { window?.addEventListener("storage", (e) => {
if (e.key === 'modelChange') { if (e.key === 'modelChange') {
...@@ -264,7 +265,7 @@ const ModelTable = (props) => { ...@@ -264,7 +265,7 @@ const ModelTable = (props) => {
} }
}); });
} else if ((modelId||'')==='' && (view==='state'||(keyword||'')!=='')) { } else if ((modelId||'')==='' && (view==='state'||(keyword||'')!=='')) {
setColumns(commonColumns.splice(3, 0, pathColumn)); setColumns(cols.splice(3, 0, pathColumn));
} }
//eslint-disable-next-line react-hooks/exhaustive-deps //eslint-disable-next-line react-hooks/exhaustive-deps
...@@ -617,43 +618,69 @@ const ModelTable = (props) => { ...@@ -617,43 +618,69 @@ const ModelTable = (props) => {
return ( return (
<div className={classes}> <div className={classes}>
<Table <ResizeObserver
rowSelection={rowSelection} onResize={({ width }) => {
components={{ let newColumns = [...cols];
header: {
cell: ResizeableHeaderCell, if ((modelId||'') !== '') {
newColumns = cols.filter(item => item.dataIndex!=='key');
} else if ((modelId||'')==='' && (view==='state'||(keyword||'')!=='')) {
newColumns = cols.splice(3, 0, pathColumn);
} }
newColumns.forEach((column, index) => {
if (!column.width) {
const rowWidth = (columns.reduce((preVal, col) => (col.width?col.width:0) + preVal, 0)) + 50;
if (width > rowWidth) {
column.width = (width-rowWidth)>200?(width-rowWidth):200;
} else {
column.width = 200;
}
}
});
setColumns(newColumns);
}} }}
columns={ >
columns.map((col, index) => ({ <Table
...col, rowSelection={rowSelection}
onHeaderCell: column => ({ components={{
width: column.width, header: {
onResize: handleResize(index), cell: ResizeableHeaderCell,
}), }
})) }}
} columns={
rowKey={'id'} columns.map((col, index) => ({
dataSource={modelId?(subData||[]):(filterData||[])} ...col,
pagination={false} onHeaderCell: column => ({
size={modelId?'small':'default'} width: column.width,
onRow={(record, index) => { onResize: handleResize(index),
return { }),
id: `data-model-${record?.id}`, }))
style: { backgroundColor: (record?.id===anchorId)?'#e7f7ff':'transparent' },
onContextMenu: event => {
setCurrentItem(record);
displayMenu(event);
},
} }
}} rowKey={'id'}
onChange={onTableChange} dataSource={modelId?(subData||[]):(filterData||[])}
expandable={expandable} pagination={false}
sticky={!modelId} size={modelId?'small':'default'}
scroll={{ onRow={(record, index) => {
x: (modelId || (filterData||[]).length>0)?'max-content':null return {
}} id: `data-model-${record?.id}`,
/> style: { backgroundColor: (record?.id===anchorId)?'#e7f7ff':'transparent' },
onContextMenu: event => {
setCurrentItem(record);
displayMenu(event);
},
}
}}
onChange={onTableChange}
expandable={expandable}
/>
</ResizeObserver>
{ {
!modelId && (data||[]).length>0 && <Pagination !modelId && (data||[]).length>0 && <Pagination
className="text-center mt-3" className="text-center mt-3"
......
src/view/Manage/Model/Component/SuggestTable.jsx
...@@ -182,8 +182,7 @@ const SuggestTable = (props) => { ...@@ -182,8 +182,7 @@ const SuggestTable = (props) => {
const rowWidth = (columns.reduce((preVal, col) => (col.width?col.width:0) + preVal, 0)) + 50; const rowWidth = (columns.reduce((preVal, col) => (col.width?col.width:0) + preVal, 0)) + 50;
if (width > rowWidth) { if (width > rowWidth) {
column.width = width - rowWidth; column.width = (width-rowWidth)>200?(width-rowWidth):200;
} else { } else {
column.width = 200; column.width = 200;
} }
......
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