Skip to content

S
szse
Commit bbb5cdf4 by zhaochengxiang
Options

模型字段列宽可调

parent 0c77fc51
Showing with 277 additions and 211 deletions
src/view/Manage/Model/Component/ImportActionTable.jsx
...@@ -7,6 +7,7 @@ import update from 'immutability-helper'; ...@@ -7,6 +7,7 @@ import update from 'immutability-helper';
import { useClickAway } from 'ahooks'; import { useClickAway } from 'ahooks';
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 ResizeObserver from 'rc-resize-observer';
import { Resizable } from 'react-resizable';
import { generateUUID, highlightSearchContentByTerms, showMessage, inputWidth, paginate } from '../../../../util'; import { generateUUID, highlightSearchContentByTerms, showMessage, inputWidth, paginate } from '../../../../util';
import { dispatch, dispatchLatest } from '../../../../model'; import { dispatch, dispatchLatest } from '../../../../model';
...@@ -26,6 +27,36 @@ const MENU_ID = 'model-attribute-menu'; ...@@ -26,6 +27,36 @@ const MENU_ID = 'model-attribute-menu';
const InputDebounce = DebounceInput(300)(Input); 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 DatatypeInput = ({ value = {}, datatypes, onChange }) => {
const onNameChange = (value) => { const onNameChange = (value) => {
...@@ -273,6 +304,211 @@ const ImportActionTable = (props) => { ...@@ -273,6 +304,211 @@ const ImportActionTable = (props) => {
id: MENU_ID, 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(() => { useClickAway(() => {
save(); save();
}, tableRef); }, tableRef);
...@@ -324,6 +560,11 @@ const ImportActionTable = (props) => { ...@@ -324,6 +560,11 @@ const ImportActionTable = (props) => {
//eslint-disable-next-line react-hooks/exhaustive-deps //eslint-disable-next-line react-hooks/exhaustive-deps
}, [filterPageCondition]) }, [filterPageCondition])
useEffect(() => {
mergedColumns();
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [validateReports, editable, editingKey])
const isEditing = (record) => record?.iid === editingKey; const isEditing = (record) => record?.iid === editingKey;
const onAddClick = (event) => { const onAddClick = (event) => {
...@@ -674,211 +915,8 @@ const ImportActionTable = (props) => { ...@@ -674,211 +915,8 @@ const ImportActionTable = (props) => {
setSuggests([]); 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 = [ const editableColumn = [
...columns, ...cols,
{ {
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
...@@ -1017,7 +1055,7 @@ const ImportActionTable = (props) => { ...@@ -1017,7 +1055,7 @@ const ImportActionTable = (props) => {
}; };
const includeValidateColumn = [ const includeValidateColumn = [
...columns, ...cols,
validateColumn validateColumn
] ]
...@@ -1030,10 +1068,9 @@ const ImportActionTable = (props) => { ...@@ -1030,10 +1068,9 @@ const ImportActionTable = (props) => {
const hasValidateReports = (validateReports||[]).filter(report => report.type==='DataModelAttribute').length>0; const hasValidateReports = (validateReports||[]).filter(report => report.type==='DataModelAttribute').length>0;
if (editable) { if (editable) {
let _columns = hasValidateReports ? includeValidateEditableColumn: editableColumn; let _columns = hasValidateReports ? includeValidateEditableColumn: editableColumn;
return _columns.map((col) => { _columns = _columns.map((col) => {
if (!col.editable) { if (!col.editable) {
return col; return col;
} }
...@@ -1051,10 +1088,11 @@ const ImportActionTable = (props) => { ...@@ -1051,10 +1088,11 @@ const ImportActionTable = (props) => {
}), }),
}; };
}); });
}
setColumns(_columns);
} else {
//非编辑状态下 隐藏重点关注 //非编辑状态下 隐藏重点关注
let _columns = hasValidateReports ? includeValidateColumn: columns; let _columns = hasValidateReports ? includeValidateColumn: cols;
if (action === 'flow') { if (action === 'flow') {
_columns = hasValidateReports ? includeValidateEditableColumn: editableColumn; _columns = hasValidateReports ? includeValidateEditableColumn: editableColumn;
...@@ -1062,7 +1100,8 @@ const ImportActionTable = (props) => { ...@@ -1062,7 +1100,8 @@ const ImportActionTable = (props) => {
_columns = _columns.filter((col) => col.dataIndex!=='needAttention'); _columns = _columns.filter((col) => col.dataIndex!=='needAttention');
return _columns; setColumns(_columns);
}
} }
const moveRow = useCallback( const moveRow = useCallback(
...@@ -1127,6 +1166,30 @@ const ImportActionTable = (props) => { ...@@ -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 ( return (
<div className='model-import-action-table'> <div className='model-import-action-table'>
<div className='d-flex mb-3' style={{ justifyContent: 'space-between', alignItems: 'center' }}> <div className='d-flex mb-3' style={{ justifyContent: 'space-between', alignItems: 'center' }}>
...@@ -1174,6 +1237,9 @@ const ImportActionTable = (props) => { ...@@ -1174,6 +1237,9 @@ const ImportActionTable = (props) => {
<Form form={form} component={false} onValuesChange={onValuesChange}> <Form form={form} component={false} onValuesChange={onValuesChange}>
<Table <Table
components={{ components={{
header: {
cell: ResizeableHeaderCell,
},
body: { body: {
cell: EditableCell, cell: EditableCell,
//编辑或者搜索状态下不允许拖动 //编辑或者搜索状态下不允许拖动
...@@ -1221,7 +1287,7 @@ const ImportActionTable = (props) => { ...@@ -1221,7 +1287,7 @@ const ImportActionTable = (props) => {
return rowParams; return rowParams;
}} }}
dataSource={filterPageData||[]} dataSource={filterPageData||[]}
columns={mergedColumns()} columns={resizeColumns()}
size='small' size='small'
rowKey='iid' rowKey='iid'
pagination={false} 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