Skip to content

S
szse
Commit fe1235c7 by zhaochengxiang
Options

字段编辑优化

parent 90483a08
Showing with 429 additions and 248 deletions
src/view/Manage/Model/Component/ImportAction.jsx
......@@ -358,10 +358,10 @@ const ImportAction = (props) => {
const getAllNewKeysAfterTableChange = (newModelerData) => {
//分布键
let newDistribution = [...(newModelerData.easyDataModelerDistributionKey||[])];
let newDistribution = [];
(newDistribution||[]).forEach((item, index) => {
const _index = (newModelerData.easyDataModelerDataModelAttributes||[]).findIndex(_item => item.name === _item.name);
(newModelerData.easyDataModelerDistributionKey||[]).forEach((item, index) => {
const _index = (newModelerData.easyDataModelerDataModelAttributes||[]).findIndex(_item => item.iid === _item.iid);
if (_index !== -1) {
newDistribution.push({...newModelerData.easyDataModelerDataModelAttributes[_index]});
......@@ -373,10 +373,10 @@ const ImportAction = (props) => {
}
//主键
let newPrimary = [...(newModelerData.easyDataModelerPrimaryKey||[])];
let newPrimary = [];
(newPrimary||[]).forEach((item, index) => {
const _index = (newModelerData.easyDataModelerDataModelAttributes||[]).findIndex(_item => item.name === _item.name);
(newModelerData.easyDataModelerPrimaryKey||[]).forEach((item, index) => {
const _index = (newModelerData.easyDataModelerDataModelAttributes||[]).findIndex(_item => item.iid === _item.iid);
if (_index !== -1) {
newPrimary.push({...newModelerData.easyDataModelerDataModelAttributes[_index]});
......@@ -393,7 +393,7 @@ const ImportAction = (props) => {
const newKeys = [];
(newPartition.keys||[]).forEach((item, index) => {
const _index = (newModelerData.easyDataModelerDataModelAttributes||[]).findIndex(_item => item.name === _item.name);
const _index = (newModelerData.easyDataModelerDataModelAttributes||[]).findIndex(_item => item.iid === _item.iid);
if (_index !== -1) {
newKeys.push({...newModelerData.easyDataModelerDataModelAttributes[_index]});
......@@ -406,6 +406,21 @@ const ImportAction = (props) => {
newPartition = null;
}
//类主键
let newSemiPrimary = [];
(newModelerData.semiPrimaryKey||[]).forEach((item, index) => {
const _index = (newModelerData.easyDataModelerDataModelAttributes||[]).findIndex(_item => item.iid === _item.iid);
if (_index !== -1) {
newSemiPrimary.push({...newModelerData.easyDataModelerDataModelAttributes[_index]});
}
})
if ((newSemiPrimary||[]).length === 0) {
newSemiPrimary = null;
}
//索引
let newEasyDataModelerIndices = [...(newModelerData.easyDataModelerIndices||[])];
(newModelerData.easyDataModelerIndices||[]).forEach((easyDataModelerIndex, index) => {
......@@ -427,7 +442,7 @@ const ImportAction = (props) => {
newEasyDataModelerIndices = newEasyDataModelerIndices.filter(item => (item.indexedEasyDataModelAttributes||[]).length > 0);
return { partition: newPartition, easyDataModelerDistributionKey: newDistribution, easyDataModelerPrimaryKey: newPrimary, easyDataModelerIndices: newEasyDataModelerIndices };
return { partition: newPartition, easyDataModelerDistributionKey: newDistribution, easyDataModelerPrimaryKey: newPrimary, easyDataModelerIndices: newEasyDataModelerIndices, semiPrimaryKey: newSemiPrimary};
}
return (
......
src/view/Manage/Model/Component/ImportActionHeader.jsx
......@@ -82,7 +82,7 @@ const TemplateSelect = ({ value = {}, templates = [], onChange, ...restProps })
const AttributesSelect = ({ value = [], modelerData, onChange, ...restProps }) => {
const onAttributeChange = (value) => {
const currentAttributes = (modelerData?.easyDataModelerDataModelAttributes||[]).filter(attribute => (value||[]).indexOf(attribute.name)!==-1);
const currentAttributes = (modelerData?.easyDataModelerDataModelAttributes||[]).filter(attribute => (value||[]).indexOf(attribute.iid)!==-1);
triggerChange(currentAttributes);
}
......@@ -94,15 +94,15 @@ const AttributesSelect = ({ value = [], modelerData, onChange, ...restProps }) =
//value有可能为空
value = value ? value: [];
let attributeNames = [];
let attributeIds = [];
value.forEach(attribute => {
attributeNames.push(attribute.name);
attributeIds.push(attribute.iid);
})
return (
<Select
onChange={(value) => { onAttributeChange && onAttributeChange(value) }}
value={attributeNames}
value={attributeIds}
placeholder='请选择字段名称'
style={{ width: 300 }}
mode='multiple'
......@@ -111,7 +111,7 @@ const AttributesSelect = ({ value = [], modelerData, onChange, ...restProps }) =
{
(modelerData?.easyDataModelerDataModelAttributes||[]).map((attribute, index) => {
return (
<Option key={index} value={attribute.name||''}>{attribute.name||''}</Option>
<Option key={index} value={attribute.iid||''}>{attribute.name||''}</Option>
);
})
}
......@@ -134,7 +134,7 @@ const PartitionSelect = ({ value = {}, modelerData, partitionTypes = [], onChang
}
const onAttributeChange = (value) => {
const currentAttributes = (modelerData?.easyDataModelerDataModelAttributes||[]).filter(attribute => (value||[]).indexOf(attribute.name)!==-1);
const currentAttributes = (modelerData?.easyDataModelerDataModelAttributes||[]).filter(attribute => (value||[]).indexOf(attribute.iid)!==-1);
triggerChange({ keys: currentAttributes });
}
......@@ -149,9 +149,9 @@ const PartitionSelect = ({ value = {}, modelerData, partitionTypes = [], onChang
//value有可能为空
value = value ? value: {};
let attributeNames = [];
let attributeIds = [];
(value?.keys||[]).forEach(attribute => {
attributeNames.push(attribute.name);
attributeIds.push(attribute.iid);
})
return (
......@@ -173,7 +173,7 @@ const PartitionSelect = ({ value = {}, modelerData, partitionTypes = [], onChang
</Select>
<Select
onChange={(value) => { onAttributeChange && onAttributeChange(value) }}
value={attributeNames}
value={attributeIds}
placeholder='请选择字段名称'
style={{ width: 200, marginLeft: 5 }}
mode='multiple'
......@@ -182,7 +182,7 @@ const PartitionSelect = ({ value = {}, modelerData, partitionTypes = [], onChang
{
(modelerData?.easyDataModelerDataModelAttributes||[]).map((attribute, index) => {
return (
<Option key={index} value={attribute.name||''}>{attribute.name||''}</Option>
<Option key={index} value={attribute.iid||''}>{attribute.name||''}</Option>
);
})
}
......@@ -399,7 +399,7 @@ const ImportActionHeader = (props) => {
setOnlyShowRequireChange(e.target.checked);
}
let distributionDescription = '', primaryDescription = '', partitionsDescription = '';
let distributionDescription = '', primaryDescription = '', partitionsDescription = '', semiPrimaryDescription = '';
if (!editable && modelerData) {
//分布
......@@ -438,6 +438,17 @@ const ImportActionHeader = (props) => {
if (modelerData?.partition?.partitionType?.name) {
partitionsDescription += '/' + modelerData?.partition?.partitionType?.name||'';
}
//类主键
if (modelerData?.semiPrimaryKey) {
(modelerData?.semiPrimaryKey||[]).forEach((item, index) => {
if (index > 0) {
semiPrimaryDescription += ',';
}
semiPrimaryDescription += item.name||'';
})
}
}
return (
......@@ -583,10 +594,10 @@ const ImportActionHeader = (props) => {
<Col span={8}>
<Form.Item
label="类主键"
name="semiPrimaryKeysDescription"
name="semiPrimaryKey"
labelAlign="left"
>
<Input style={{ width: 300 }} />
<AttributesSelect modelerData={modelerData} />
</Form.Item>
</Col>
</Row>
......@@ -650,7 +661,7 @@ const ImportActionHeader = (props) => {
<Descriptions.Item label="分布键">{highlightSearchContentByTerms(distributionDescription||'', terms)}</Descriptions.Item>
<Descriptions.Item label="分区键">{highlightSearchContentByTerms(partitionsDescription||'', terms)}</Descriptions.Item>
<Descriptions.Item label="主键">{highlightSearchContentByTerms(primaryDescription||'', terms)}</Descriptions.Item>
<Descriptions.Item label="类主键">{highlightSearchContentByTerms(modelerData.semiPrimaryKeysDescription||'', terms)}</Descriptions.Item>
<Descriptions.Item label="类主键">{highlightSearchContentByTerms(semiPrimaryDescription||'', terms)}</Descriptions.Item>
<Descriptions.Item label="加载方式">{highlightSearchContentByTerms(modelerData.dataLoadingStrategy||'', terms)}</Descriptions.Item>
<Descriptions.Item label="更新时间">{highlightSearchContentByTerms(modelerData.dataUpdatingTiming||'', terms)}</Descriptions.Item>
<Descriptions.Item label="维护历史">{highlightSearchContentByTerms(modelerData.maintenanceRecords||'', terms)}</Descriptions.Item>
......
src/view/Manage/Model/Component/ImportActionIndex.jsx
......@@ -4,6 +4,8 @@ import { DeleteOutlined, CloseOutlined, CheckOutlined, PlusOutlined, MinusOutlin
import { DndProvider, useDrag, useDrop } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import update from 'immutability-helper';
import { useClickAway } from 'ahooks';
import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
import { addEventListenerForSidebar, removeEventListenerForSidebar } from './Help';
import { showMessage, highlightSearchContentByTerms, inputWidth } from '../../../../util';
......@@ -11,6 +13,7 @@ import { showMessage, highlightSearchContentByTerms, inputWidth } from '../../..
const { Option } = Select;
const type = 'DragableIndexBodyRow';
const MENU_ID = 'model-index-menu';
const AttributesInputItem = ({ indexedAttribute = null, indexedAttributeOrder = null, attributes, onAttributeChange, onOrderChange, onDelete , className }) => {
......@@ -20,33 +23,37 @@ const AttributesInputItem = ({ indexedAttribute = null, indexedAttributeOrder =
<span>字段名称:</span>
</Col>
<Col span={6}>
<Select
onChange={(value) => { onAttributeChange && onAttributeChange(value) }}
value={indexedAttribute ? (indexedAttribute.name||'') : ''}
placeholder='请选择字段名称'
>
{
(attributes||[]).map((attribute, index) => {
return (
((attribute.name||'')==='') ? null : <Option key={index} value={attribute.iid||''}>{attribute.name||''}</Option>
);
})
}
</Select>
<span onClick={e => e.stopPropagation()}>
<Select
onChange={(value) => { onAttributeChange && onAttributeChange(value) }}
value={indexedAttribute ? (indexedAttribute.name||'') : ''}
placeholder='请选择字段名称'
>
{
(attributes||[]).map((attribute, index) => {
return (
((attribute.name||'')==='') ? null : <Option key={index} value={attribute.iid||''}>{attribute.name||''}</Option>
);
})
}
</Select>
</span>
</Col>
<Col span={1}></Col>
<Col span={2}>
<span>排序:</span>
</Col>
<Col span={6}>
<Select
onChange={(value) => { onOrderChange && onOrderChange(value) }}
value={indexedAttributeOrder||''}
placeholder='请选择排序方式'
>
<Option value='DESC'>DESC</Option>
<Option value='ASC'>ASC</Option>
</Select>
<span onClick={e => e.stopPropagation()}>
<Select
onChange={(value) => { onOrderChange && onOrderChange(value) }}
value={indexedAttributeOrder||''}
placeholder='请选择排序方式'
>
<Option value='DESC'>DESC</Option>
<Option value='ASC'>ASC</Option>
</Select>
</span>
</Col>
<Col span={1}></Col>
<Col span={1}>
......@@ -121,7 +128,7 @@ const AttributesInput = ({ value = {}, attributes, onChange }) => {
};
return (
<>
<React.Fragment>
{
(indexedEasyDataModelAttributes||[]).map((indexedAttribute, index) => {
return (
......@@ -133,13 +140,16 @@ const AttributesInput = ({ value = {}, attributes, onChange }) => {
attributes={attributes}
onAttributeChange={(value) => { onAttributeChange(value, index) } }
onOrderChange={(value) => { onOrderChange(value, index) }}
onDelete={() => { onItemDelete(index) }}
onDelete={(event) => {
event.stopPropagation();
onItemDelete(index)
}}
/>
);
})
}
<Button onClick={addAttribute}>新增字段</Button>
</>
</React.Fragment>
)
}
......@@ -276,9 +286,20 @@ const ImportActionIndex = (props) => {
const [ filterData, setFilterData ] = useState([]);
const [ insertIndex, setInsertIndex ] = useState(0);
const [ currentItem, setCurrentItem ] = useState(null);
const dataRef = useRef();
dataRef.current = data;
const tableRef = useRef(null);
const { show } = useContextMenu({
id: MENU_ID,
});
useClickAway(() => {
save();
}, tableRef);
//规则改变的时候 数据表为可编辑状态
useEffect(() => {
......@@ -308,29 +329,79 @@ const ImportActionIndex = (props) => {
const isEditing = (record) => record.name === editingKey;
const onAddClick = () => {
const newFilterData = [...filterData, {name: ''}];
const onAddClick = (event) => {
event.stopPropagation();
setFilterData(newFilterData);
save().then(result => {
if (result) {
const newData = [...dataRef.current, {name: ''}];
setInsertIndex(newFilterData.length-1);
edit(newFilterData[newFilterData.length-1]);
setFilterData(newData);
setInsertIndex(newData.length-1);
edit(newData[newData.length-1], false);
}
})
}
const insert = (record) => {
const newData = [...data];
const index = newData.findIndex((item) => record.name === item.name);
const insertToFront = (record) => {
save().then(result => {
if (result) {
let newData = [...dataRef.current];
const index = newData.findIndex((item) => record.name === item.name);
if (index === -1) {
newData.splice(index+1, 0, {name: ''});
if (insertIndex === 0) {
newData = [{name: ''}, ...newData];
edit(newData[0], false);
} else {
newData.splice(insertIndex, 0, {name: ''});
edit(newData[insertIndex], false);
}
setFilterData(newData);
} else if (index === 0) {
newData = [{name: ''}, ...newData];
setInsertIndex(index+1);
edit(newData[index+1]);
setInsertIndex(0);
edit(newData[0], false);
} else {
newData.splice(index, 0, {name: ''});
setInsertIndex(index);
edit(newData[index], false);
}
setFilterData(newData);
}
})
}
const edit = (record) => {
const insertToBack = (record) => {
save().then(result => {
if (result) {
const newData = [...dataRef.current];
const index = newData.findIndex((item) => record.name === item.name);
if (index === -1) {
newData.splice(insertIndex+1, 0, {name: ''});
setFilterData(newData);
setInsertIndex(insertIndex+1);
edit(newData[insertIndex+1], false);
} else {
newData.splice(index+1, 0, {name: ''});
setFilterData(newData);
setInsertIndex(index+1);
edit(newData[index+1], false);
}
}
})
}
const editLogic = (record) => {
form.setFieldsValue({
name: '',
attributesWithOrders: {
......@@ -340,92 +411,104 @@ const ImportActionIndex = (props) => {
unique: false,
...record,
});
setEditingKey(record.name);
};
const remove = (record) => {
const newData = [...data];
const index = newData.findIndex((item) => record.name === item.name);
newData.splice(index, 1);
onChange && onChange(newData);
setEditingKey(record?.name);
}
const cancel = () => {
const edit = (record, needSave = true) => {
const newFilterData = [...filterData];
if (needSave) {
save().then(result => {
if (result) {
editLogic(record);
}
})
} else {
editLogic(record);
}
};
const index = newFilterData.findIndex((item) => editingKey === item.name);
const remove = (record) => {
const newData = [...data];
const index = newData.findIndex((item) => record.name === item.name);
const item = newFilterData[index];
if (!item.name || item.name==='') {
newFilterData.splice(index, 1);
setFilterData(newFilterData);
if (index !== -1) {
newData.splice(index, 1);
}
onChange && onChange(newData);
setEditingKey(null);
};
}
const save = async() => {
try {
const row = await form.validateFields();
if (editingKey!==null) {
const row = await form.validateFields();
// console.log('row', row);
const newData = [...data];
const index = newData.findIndex((item) => editingKey === item.name);
//判断索引名称是否唯一
let _index;
if (index === -1) {
_index = (data||[]).findIndex(item => item.name === row.name);
} else {
const newDataExcludeSelf = [...data];
newDataExcludeSelf.splice(index, 1);
_index = (newDataExcludeSelf||[]).findIndex(item => item.name === row.name);
}
// console.log('row', row);
const newData = [...data];
const index = newData.findIndex((item) => editingKey === item.name);
//判断索引名称是否唯一
let _index;
if (index === -1) {
_index = (data||[]).findIndex(item => item.name === row.name);
} else {
const newDataExcludeSelf = [...data];
newDataExcludeSelf.splice(index, 1);
_index = (newDataExcludeSelf||[]).findIndex(item => item.name === row.name);
}
if (_index !== -1) {
form.setFields([{ name: 'name', errors: ['索引名称不能重复'] }]);
return;
}
if (_index !== -1) {
form.setFields([{ name: 'name', errors: ['索引名称不能重复'] }]);
return;
}
const _indexedEasyDataModelAttributes = [], _indexedAttributeOrders = [];
row.attributesWithOrders.indexedEasyDataModelAttributes.forEach((item, index) => {
if ((item.iid||'')!=='') {
_indexedEasyDataModelAttributes.push(item);
_indexedAttributeOrders.push(row.attributesWithOrders.indexedAttributeOrders[index]);
}
})
const _indexedEasyDataModelAttributes = [], _indexedAttributeOrders = [];
row.attributesWithOrders.indexedEasyDataModelAttributes.forEach((item, index) => {
if ((item.iid||'')!=='') {
_indexedEasyDataModelAttributes.push(item);
_indexedAttributeOrders.push(row.attributesWithOrders.indexedAttributeOrders[index]);
if (_indexedEasyDataModelAttributes.length === 0) {
form.setFields([{ name: 'attributesWithOrders', errors: ['必须选择字段'] }]);
return;
}
})
if (_indexedEasyDataModelAttributes.length === 0) {
form.setFields([{ name: 'attributesWithOrders', errors: ['必须选择字段'] }]);
return;
}
if (index === -1) {
newData.splice(insertIndex, 0 , {
name: row.name,
unique: row.unique,
indexedEasyDataModelAttributes: _indexedEasyDataModelAttributes,
indexedAttributeOrders: _indexedAttributeOrders,
});
} else {
newData.splice(index, 1, {...{
name: row.name,
unique: row.unique,
indexedEasyDataModelAttributes: _indexedEasyDataModelAttributes,
indexedAttributeOrders: _indexedAttributeOrders,
}});
}
dataRef.current = newData;
onChange && onChange(newData, true);
if (index === -1) {
newData.splice(insertIndex, 0 , {
name: row.name,
unique: row.unique,
indexedEasyDataModelAttributes: _indexedEasyDataModelAttributes,
indexedAttributeOrders: _indexedAttributeOrders,
});
} else {
newData.splice(index, 1, {...{
name: row.name,
unique: row.unique,
indexedEasyDataModelAttributes: _indexedEasyDataModelAttributes,
indexedAttributeOrders: _indexedAttributeOrders,
}});
setEditingKey(null);
}
onChange && onChange(newData, true);
setEditingKey(null);
return true;
} catch (errInfo) {
console.log('Validate Failed:', errInfo);
return false;
}
};
......@@ -515,35 +598,16 @@ const ImportActionIndex = (props) => {
render: (_, record) => {
if (!editable) return null;
return isEditing(record) ? (
<>
<Typography.Link className='mr-3' disabled={editingKey===null} onClick={(event) => {
event.preventDefault();
event.stopPropagation();
save();
}}>
保存
</Typography.Link>
<Typography.Link disabled={editingKey===null} onClick={(event) => {
event.preventDefault();
event.stopPropagation();
cancel();
}}>
取消
</Typography.Link>
</>
) : (
<>
return (
<React.Fragment>
<Button
className='mr-3'
size='small'
type='text'
icon={<PlusOutlined />}
disabled={editingKey !== null}
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
insert(record);
insertToFront(record);
}}
/>
......@@ -552,15 +616,13 @@ const ImportActionIndex = (props) => {
size='small'
type='text'
icon={<MinusOutlined />}
disabled={editingKey !== null}
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
remove(record);
}}
/>
</>
);
</React.Fragment>
)
},
},
]
......@@ -682,14 +744,18 @@ const ImportActionIndex = (props) => {
setKeyword(e.target.value||'');
}
const onClickRowTriggerEdit = (record) => {
edit(record);
const displayMenu = (e) => {
show(e);
}
let disableAdd = false, addTip = '';
if (editingKey!==null || keyword!=='') {
disableAdd = true;
addTip = '正在搜索或者编辑中,不允许新建';
const handleItemClick = ({ event, props, data, triggerEvent }) => {
const key = event.currentTarget.id;
if (key === 'up') {
insertToFront(currentItem);
} else if (key === 'down') {
insertToBack(currentItem);
}
}
return (
......@@ -705,8 +771,8 @@ const ImportActionIndex = (props) => {
</Space>
<Space>
{
editable && <Tooltip title={addTip}>
<Button onClick={onAddClick} disabled={disableAdd} >新建</Button>
editable && <Tooltip>
<Button onClick={onAddClick} >新建</Button>
</Tooltip>
}
<div className='d-flex' style={{ alignItems: 'center' }}>
......@@ -720,7 +786,7 @@ const ImportActionIndex = (props) => {
</div>
</Space>
</div>
<div className='mb-3' id="containerId">
<div className='mb-3' id="containerId" ref={tableRef}>
<DndProvider backend={HTML5Backend} >
<Form form={form} component={false} onValuesChange={onValuesChange}>
<Table
......@@ -732,15 +798,31 @@ const ImportActionIndex = (props) => {
},
}}
onRow={(record, index) => {
if (!editable || editingKey!==null || keyword.length>0) return null;
return {
let rowParams = {
index,
onClick: (event) => {
onClickRowTriggerEdit(record);
},
moveRow
};
if (editable) {
rowParams = {...rowParams, onContextMenu: event => {
setCurrentItem(record);
displayMenu(event);
}
};
if (!isEditing(record)) {
rowParams = {...rowParams, onClick: (event) => {
event.stopPropagation();
edit(record);
}
}
if (keyword.length===0) {
rowParams = {...rowParams, moveRow};
}
}
}
return rowParams;
}}
dataSource={filterData||[]}
columns={mergedColumns()}
......@@ -752,6 +834,15 @@ const ImportActionIndex = (props) => {
/>
</Form>
</DndProvider>
<RcMenu id={MENU_ID} >
<RcItem id="up" onClick={handleItemClick}>
向上插入
</RcItem>
<RcItem id="down" onClick={handleItemClick}>
向下插入
</RcItem>
</RcMenu>
</div>
</div>
);
......
src/view/Manage/Model/Component/ImportActionTable.jsx
......@@ -5,6 +5,7 @@ import { DndProvider, useDrag, useDrop } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import update from 'immutability-helper';
import { useClickAway } from 'ahooks';
import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
import { generateUUID, highlightSearchContentByTerms, showMessage, inputWidth, paginate } from '../../../../util';
import { dispatch, dispatchLatest } from '../../../../model';
......@@ -18,6 +19,7 @@ const { Option } = Select;
const type = 'DragableTableBodyRow';
const perSuggestCount = 5;
const supportMaxAttributeCountPerPage = 100;
const MENU_ID = 'model-attribute-menu';
const DatatypeInput = ({ value = {}, datatypes, onChange }) => {
......@@ -251,12 +253,17 @@ const ImportActionTable = (props) => {
const [ filterPageData, setFilterPageData ] = useState([]);
const { pageNum, pageSize, filterData } = filterPageCondition;
const [ insertIndex, setInsertIndex ] = useState(0);
const [ currentItem, setCurrentItem ] = useState(null);
const moveRowRef = useRef({ data, onChange, pageNum, pageSize });
const tableRef = useRef(null)
const tableRef = useRef(null);
const { show } = useContextMenu({
id: MENU_ID,
});
useClickAway(() => {
editItemPrevSave();
save();
}, tableRef);
//规则改变的时候 数据表为可编辑状态
......@@ -292,8 +299,6 @@ const ImportActionTable = (props) => {
}, [keyword])
useEffect(() => {
moveRowRef.current.pageNum = pageNum;
moveRowRef.current.pageSize = pageSize;
......@@ -315,41 +320,74 @@ const ImportActionTable = (props) => {
const isEditing = (record) => record?.iid === editingKey;
const onAddClick = () => {
const iid = generateUUID();
const newFilterData = [...filterData, {iid}];
const onAddClick = (event) => {
event.stopPropagation();
save().then(result => {
if (result) {
const iid = generateUUID();
const newData = [...moveRowRef.current.data, {iid}];
if (newData.length > supportMaxAttributeCountPerPage) {
const totalNum = parseInt(newData.length/supportMaxAttributeCountPerPage) + ((newData.length%supportMaxAttributeCountPerPage===0)?0:1);
setFilterPageCondition({...filterPageCondition, ...{ filterData: newData, pageNum: totalNum }});
} else {
setFilterPageCondition({...filterPageCondition, ...{ filterData: newData}});
}
if (newFilterData.length > supportMaxAttributeCountPerPage) {
const totalNum = parseInt(newFilterData.length/supportMaxAttributeCountPerPage) + ((newFilterData.length%supportMaxAttributeCountPerPage===0)?0:1);
setFilterPageCondition({...filterPageCondition, ...{ filterData: newFilterData, pageNum: totalNum }});
} else {
setFilterPageCondition({...filterPageCondition, ...{ filterData: newFilterData}});
}
setInsertIndex(newData.length-1);
edit(newData[newData.length-1], false);
setTimeout(() => {
document.getElementById(`field-${iid}`)?.scrollIntoView();
}, 200)
}
})
}
const insertToFront = (record) => {
save().then(result => {
if (result) {
let newData = [...moveRowRef.current.data];
const index = newData.findIndex((item) => record.iid === item.iid);
setInsertIndex(newFilterData.length-1);
const iid = generateUUID();
edit(newFilterData[newFilterData.length-1]);
setTimeout(() => {
document.getElementById(`field-${iid}`)?.scrollIntoView();
}, 200)
if (index === 0) {
newData = [{iid}, ...newData];
setInsertIndex(0);
edit(newData[0], false);
} else {
newData.splice(index, 0, {iid});
setInsertIndex(index);
edit(newData[index], false);
}
setFilterPageCondition({...filterPageCondition, ...{ filterData: newData}});
}
})
}
const insert = (record) => {
const newData = [...data];
const index = newData.findIndex((item) => record.iid === item.iid);
const insertToBack = (record) => {
save().then(result => {
if (result) {
const newData = [...moveRowRef.current.data];
const index = newData.findIndex((item) => record.iid === item.iid);
const iid = generateUUID();
newData.splice(index+1, 0, {iid});
setFilterPageCondition({...filterPageCondition, ...{ filterData: newData}});
setInsertIndex(index+1);
edit(newData[index+1]);
const iid = generateUUID();
newData.splice(index+1, 0, {iid});
setFilterPageCondition({...filterPageCondition, ...{ filterData: newData}});
setInsertIndex(index+1);
edit(newData[index+1], false);
}
})
}
const edit = (record) => {
const editLogic = (record) => {
form.setFieldsValue({
name: '',
cnName: '',
......@@ -366,41 +404,46 @@ const ImportActionTable = (props) => {
...record,
});
setEditingKey(record.iid);
setAutoTranslate((record.name||'')==='');
console.log('record', record);
if ((record.cnName||'')!=='') {
onValuesChange({ cnName: record.cnName }, record, 1, record.iid);
} else if ((record.name||'')!=='') {
onValuesChange({ name: record.name }, record, 1, record.iid);
setEditingKey(record?.iid);
setAutoTranslate((record?.name||'')==='');
if ((record?.cnName||'')!=='') {
onValuesChange({ cnName: record?.cnName }, record, 1, record?.iid);
} else if ((record?.name||'')!=='') {
onValuesChange({ name: record?.name }, record, 1, record?.iid);
}
}
const edit = (record, needSave = true) => {
if (needSave) {
save().then((result) => {
editLogic(record);
});
} else {
editLogic(record);
}
};
const remove = (record) => {
const newData = [...data];
const index = newData.findIndex((item) => record.iid === item.iid);
newData.splice(index, 1);
onChange && onChange(newData);
}
const cancel = () => {
const newFilterData = [...filterData];
if (index !== -1) {
newData.splice(index, 1);
}
const _index = (data||[]).findIndex((item) => editingKey === item.iid);
onChange && onChange(newData);
const index = newFilterData.findIndex((item) => editingKey === item.iid);
const item = newFilterData[index];
if (_index===-1 && (!item.name || item.name==='')) {
newFilterData.splice(index, 1);
setFilterPageCondition({...filterPageCondition, filterData: newFilterData })
if (editingKey === record.iid) {
setEditingKey('');
setSuggests([]);
setEnglishSuggests([]);
}
}
setEditingKey('');
setSuggests([]);
setEnglishSuggests([]);
};
const editItemPrevSave = async(editNewItem = null) => {
const save = async() => {
try {
......@@ -447,6 +490,8 @@ const ImportActionTable = (props) => {
newData.splice(index, 1, { ...item, ...row, modelingTemplateTag: null });
}
moveRowRef.current.data = newData;
onChange && onChange(newData, true);
setEditingKey('');
......@@ -454,12 +499,11 @@ const ImportActionTable = (props) => {
setEnglishSuggests([]);
}
if (editNewItem) {
edit(editNewItem);
}
return true;
} catch (errInfo) {
console.log('Validate Failed:', errInfo);
return false;
}
};
......@@ -824,7 +868,6 @@ const ImportActionTable = (props) => {
!isEditing(record) && <React.Fragment>
{
record?.isPossibleNewRecommendedDefinition?.possible && <Typography.Link className='mr-3' onClick={(event) => {
event.preventDefault();
event.stopPropagation();
value?.setGlobalState && value?.setGlobalState({
message: 'data-govern-show-standard-create',
......@@ -839,7 +882,6 @@ const ImportActionTable = (props) => {
}
{
record?.isPossibleNewTerm?.possible && <Typography.Link className='mr-3' onClick={(event) => {
event.preventDefault();
event.stopPropagation();
value?.setGlobalState && value?.setGlobalState({
message: 'data-govern-show-standard-create',
......@@ -863,11 +905,9 @@ const ImportActionTable = (props) => {
size='small'
type='text'
icon={<PlusOutlined />}
disabled={editingKey !== ''}
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
insert(record);
insertToFront(record);
}}
/>
......@@ -876,9 +916,7 @@ const ImportActionTable = (props) => {
size='small'
type='text'
icon={<MinusOutlined />}
disabled={editingKey !== ''}
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
remove(record);
}}
......@@ -1055,14 +1093,18 @@ const ImportActionTable = (props) => {
onValuesChange(currentChangedValues, form.getFieldsValue(), suggestOffset);
}
const onClickRowTriggerEdit = (record) => {
edit(record);
const displayMenu = (e) => {
show(e);
}
let disableAdd = false, addTip = '';
if (editingKey!=='' || keyword!=='') {
disableAdd = true;
addTip = '正在搜索或者编辑中,不允许新建';
const handleItemClick = ({ event, props, data, triggerEvent }) => {
const key = event.currentTarget.id;
if (key === 'up') {
insertToFront(currentItem);
} else if (key === 'down') {
insertToBack(currentItem);
}
}
return (
......@@ -1078,8 +1120,8 @@ const ImportActionTable = (props) => {
</Space>
<Space>
{
editable && <Tooltip title={addTip}>
<Button onClick={onAddClick} disabled={disableAdd} >新建</Button>
editable && <Tooltip>
<Button onClick={onAddClick}>新建</Button>
</Tooltip>
}
<div className='d-flex' style={{ alignItems: 'center' }}>
......@@ -1116,20 +1158,33 @@ const ImportActionTable = (props) => {
return 'editable-row';
}}
onRow={(record, index) => {
if (!editable || isEditing(record) || keyword.length>0) return {
id: `field-${record.iid}`,
};
return {
let rowParams = {
index,
id: `field-${record.iid}`,
onClick: (event) => {
event.preventDefault();
event.stopPropagation();
editItemPrevSave(record);
},
moveRow
}
if (editable) {
rowParams = {...rowParams, onContextMenu: event => {
setCurrentItem(record);
displayMenu(event);
}
};
if (!isEditing(record)) {
rowParams = {...rowParams, onClick: (event) => {
event.stopPropagation();
edit(record);
}
}
if (keyword.length===0) {
rowParams = {...rowParams, moveRow};
}
}
}
return rowParams;
}}
dataSource={filterPageData||[]}
columns={mergedColumns()}
......@@ -1212,7 +1267,16 @@ const ImportActionTable = (props) => {
pageSizeOptions={[50, supportMaxAttributeCountPerPage]}
showTotal={total => `共 ${(filterData||[]).length} 条`}
/>
}
}
<RcMenu id={MENU_ID} >
<RcItem id="up" onClick={handleItemClick}>
向上插入
</RcItem>
<RcItem id="down" onClick={handleItemClick}>
向下插入
</RcItem>
</RcMenu>
</div>
</div>
......
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