Skip to content

S
szse
Commit bbb5cdf4 by zhaochengxiang
Options

模型字段列宽可调

parent 0c77fc51
Showing with 283 additions and 217 deletions
src/view/Manage/Model/Component/ImportActionTable.jsx
......@@ -7,6 +7,7 @@ import update from 'immutability-helper';
import { useClickAway } from 'ahooks';
import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
import ResizeObserver from 'rc-resize-observer';
import { Resizable } from 'react-resizable';
import { generateUUID, highlightSearchContentByTerms, showMessage, inputWidth, paginate } from '../../../../util';
import { dispatch, dispatchLatest } from '../../../../model';
......@@ -26,6 +27,36 @@ const MENU_ID = 'model-attribute-menu';
const InputDebounce = DebounceInput(300)(Input);
const ResizeableHeaderCell = props => {
const { onResize, width, onClick, ...restProps } = props;
if (!width) {
return <th {...restProps} />;
}
return (
<Resizable
width={width}
height={0}
handle={
<span
className="react-resizable-handle"
onClick={(e) => {
e.stopPropagation();
}}
/>
}
onResize={onResize}
draggableOpts={{ enableUserSelectHack: false }}
>
<th
onClick={onClick}
{...restProps}
/>
</Resizable>
);
};
const DatatypeInput = ({ value = {}, datatypes, onChange }) => {
const onNameChange = (value) => {
......@@ -273,6 +304,211 @@ const ImportActionTable = (props) => {
id: MENU_ID,
});
const cols = [
{
title: '序号',
dataIndex: 'key',
editable: false,
width: 60,
fixed: 'left',
render: (text, record, index) => {
return (index+1).toString();
}
},
{
title: '中文名称',
width: 200,
dataIndex: 'cnName',
editable: true,
ellipsis: true,
require: true,
fixed: 'left',
render: (text, _, __) => {
return (
<Tooltip title={text||''}>
<span>
{highlightSearchContentByTerms(text, terms)}
</span>
</Tooltip>
)
}
},
{
title: '英文名称',
width: 200,
dataIndex: 'name',
editable: true,
ellipsis: true,
require: true,
render: (text, record, index) => {
return (
<Tooltip title={text||''}>
<span style={{ fontWeight: 'bold' }} >{highlightSearchContentByTerms(text, terms)}</span>
</Tooltip>
)
}
},
{
title: '类型',
width: (editingKey!=='')?250:150,
dataIndex: 'datatype',
editable: true,
ellipsis: true,
require: true,
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: 'Not Null',
width: 80,
dataIndex: 'notNull',
editable: (type==='model'?true:false),
render: (notNull, record, index) => {
if (!notNull) {
return '-';
} else if (notNull) {
return (
<CheckOutlined />
)
}
return '';
}
},
{
title: '主键',
width: 50,
dataIndex: 'partOfPrimaryKeyLogically',
editable: (type==='model'?true:false),
render: (partOfPrimaryKeyLogically, record, index) => {
if (!partOfPrimaryKeyLogically) {
return '-';
} else if (partOfPrimaryKeyLogically === true) {
return (
<CheckOutlined />
)
}
return '';
}
},
{
title: '外键',
width: 50,
dataIndex: 'foreignKey',
editable: (type==='model'?true:false),
render: (foreignKey, record, index) => {
if (!foreignKey) {
return '-';
} else if (foreignKey === true) {
return (
<CheckOutlined />
)
}
return '';
}
},
{
title: '重点关注',
width: 75,
dataIndex: 'needAttention',
editable: (type==='model'?true:false),
render: (needAttention, record, index) => {
if (!needAttention) {
return '-';
} else if (needAttention === true) {
return (
<CheckOutlined />
)
}
return '';
}
},
{
title: '业务含义',
dataIndex: 'remark',
editable: true,
ellipsis: true,
require: true,
width: 200,
render: (text, _, __) => {
return (
<Tooltip title={text||''}>
<span>
{highlightSearchContentByTerms(text, terms)}
</span>
</Tooltip>
)
}
},
{
title: '默认值',
dataIndex: 'defaultValue',
editable: true,
ellipsis: true,
width: 100,
render: (text, _, __) => {
return (
<Tooltip title={text||''}>
<span>
{highlightSearchContentByTerms(text, terms)}
</span>
</Tooltip>
)
}
},
{
title: '计算规则',
dataIndex: 'definition',
editable: true,
ellipsis: true,
width: 200,
render: (text, _, __) => {
return (
<Tooltip title={text||''}>
<span>
{highlightSearchContentByTerms(text, terms)}
</span>
</Tooltip>
)
}
},
{
title: '值域',
dataIndex: 'valueRange',
editable: true,
ellipsis: true,
width: 100,
render: (text, _, __) => {
return (
<Tooltip title={text||''}>
<span>
{highlightSearchContentByTerms(text, terms)}
</span>
</Tooltip>
)
}
},
];
const [ columns, setColumns ] = useState(cols);
useClickAway(() => {
save();
}, tableRef);
......@@ -324,6 +560,11 @@ const ImportActionTable = (props) => {
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [filterPageCondition])
useEffect(() => {
mergedColumns();
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [validateReports, editable, editingKey])
const isEditing = (record) => record?.iid === editingKey;
const onAddClick = (event) => {
......@@ -674,211 +915,8 @@ const ImportActionTable = (props) => {
setSuggests([]);
};
const columns = [
{
title: '序号',
dataIndex: 'key',
editable: false,
width: 60,
fixed: 'left',
render: (text, record, index) => {
return (index+1).toString();
}
},
{
title: '中文名称',
width: 200,
dataIndex: 'cnName',
editable: true,
ellipsis: true,
require: true,
fixed: 'left',
render: (text, _, __) => {
return (
<Tooltip title={text||''}>
<span>
{highlightSearchContentByTerms(text, terms)}
</span>
</Tooltip>
)
}
},
{
title: '英文名称',
width: 200,
dataIndex: 'name',
editable: true,
ellipsis: true,
require: true,
render: (text, record, index) => {
return (
<Tooltip title={text||''}>
<span style={{ fontWeight: 'bold' }} >{highlightSearchContentByTerms(text, terms)}</span>
</Tooltip>
)
}
},
{
title: '类型',
width: (editingKey!=='')?250:150,
dataIndex: 'datatype',
editable: true,
ellipsis: true,
require: true,
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: 'Not Null',
width: 80,
dataIndex: 'notNull',
editable: (type==='model'?true:false),
render: (notNull, record, index) => {
if (!notNull) {
return '-';
} else if (notNull) {
return (
<CheckOutlined />
)
}
return '';
}
},
{
title: '主键',
width: 50,
dataIndex: 'partOfPrimaryKeyLogically',
editable: (type==='model'?true:false),
render: (partOfPrimaryKeyLogically, record, index) => {
if (!partOfPrimaryKeyLogically) {
return '-';
} else if (partOfPrimaryKeyLogically === true) {
return (
<CheckOutlined />
)
}
return '';
}
},
{
title: '外键',
width: 50,
dataIndex: 'foreignKey',
editable: (type==='model'?true:false),
render: (foreignKey, record, index) => {
if (!foreignKey) {
return '-';
} else if (foreignKey === true) {
return (
<CheckOutlined />
)
}
return '';
}
},
{
title: '重点关注',
width: 75,
dataIndex: 'needAttention',
editable: (type==='model'?true:false),
render: (needAttention, record, index) => {
if (!needAttention) {
return '-';
} else if (needAttention === true) {
return (
<CheckOutlined />
)
}
return '';
}
},
{
title: '业务含义',
dataIndex: 'remark',
editable: true,
ellipsis: true,
require: true,
width: 200,
render: (text, _, __) => {
return (
<Tooltip title={text||''}>
<span>
{highlightSearchContentByTerms(text, terms)}
</span>
</Tooltip>
)
}
},
{
title: '默认值',
dataIndex: 'defaultValue',
editable: true,
ellipsis: true,
width: 100,
render: (text, _, __) => {
return (
<Tooltip title={text||''}>
<span>
{highlightSearchContentByTerms(text, terms)}
</span>
</Tooltip>
)
}
},
{
title: '计算规则',
dataIndex: 'definition',
editable: true,
ellipsis: true,
width: 200,
render: (text, _, __) => {
return (
<Tooltip title={text||''}>
<span>
{highlightSearchContentByTerms(text, terms)}
</span>
</Tooltip>
)
}
},
{
title: '值域',
dataIndex: 'valueRange',
editable: true,
ellipsis: true,
width: 100,
render: (text, _, __) => {
return (
<Tooltip title={text||''}>
<span>
{highlightSearchContentByTerms(text, terms)}
</span>
</Tooltip>
)
}
},
];
const editableColumn = [
...columns,
...cols,
{
title: '操作',
dataIndex: 'action',
......@@ -1017,7 +1055,7 @@ const ImportActionTable = (props) => {
};
const includeValidateColumn = [
...columns,
...cols,
validateColumn
]
......@@ -1030,10 +1068,9 @@ const ImportActionTable = (props) => {
const hasValidateReports = (validateReports||[]).filter(report => report.type==='DataModelAttribute').length>0;
if (editable) {
let _columns = hasValidateReports ? includeValidateEditableColumn: editableColumn;
return _columns.map((col) => {
_columns = _columns.map((col) => {
if (!col.editable) {
return col;
}
......@@ -1051,18 +1088,20 @@ const ImportActionTable = (props) => {
}),
};
});
}
//非编辑状态下 隐藏重点关注
let _columns = hasValidateReports ? includeValidateColumn: columns;
setColumns(_columns);
} else {
//非编辑状态下 隐藏重点关注
let _columns = hasValidateReports ? includeValidateColumn: cols;
if (action === 'flow') {
_columns = hasValidateReports ? includeValidateEditableColumn: editableColumn;
}
if (action === 'flow') {
_columns = hasValidateReports ? includeValidateEditableColumn: editableColumn;
}
_columns = _columns.filter((col) => col.dataIndex!=='needAttention');
return _columns;
_columns = _columns.filter((col) => col.dataIndex!=='needAttention');
setColumns(_columns);
}
}
const moveRow = useCallback(
......@@ -1127,6 +1166,30 @@ const ImportActionTable = (props) => {
}
}
const handleResize = index => (e, { size }) => {
const nextColumns = [...columns];
nextColumns[index] = {
...nextColumns[index],
width: size.width,
};
setColumns(nextColumns);
};
const resizeColumns = () => {
return (
columns.map((column, index) => {
return {
...column,
onHeaderCell: column => ({
width: column.width,
onResize: handleResize(index),
}),
};
})
);
}
return (
<div className='model-import-action-table'>
<div className='d-flex mb-3' style={{ justifyContent: 'space-between', alignItems: 'center' }}>
......@@ -1174,6 +1237,9 @@ const ImportActionTable = (props) => {
<Form form={form} component={false} onValuesChange={onValuesChange}>
<Table
components={{
header: {
cell: ResizeableHeaderCell,
},
body: {
cell: EditableCell,
//编辑或者搜索状态下不允许拖动
......@@ -1221,7 +1287,7 @@ const ImportActionTable = (props) => {
return rowParams;
}}
dataSource={filterPageData||[]}
columns={mergedColumns()}
columns={resizeColumns()}
size='small'
rowKey='iid'
pagination={false}
......
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