Skip to content

S
szse
Commit 90483a08 by zhaochengxiang
Options

点击表格外取消编辑

parent dbe80392
Showing with 83 additions and 84 deletions
package.json
......@@ -10,6 +10,7 @@
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"ahooks": "^3.1.7",
"antd": "^4.18.2",
"axios": "^0.19.0",
"copy-to-clipboard": "^3.3.1",
......
src/view/Manage/Model/Component/ImportActionTable.jsx
......@@ -4,6 +4,7 @@ import { CloseOutlined, CheckOutlined, PlusOutlined, MinusOutlined, QuestionCirc
import { DndProvider, useDrag, useDrop } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import update from 'immutability-helper';
import { useClickAway } from 'ahooks';
import { generateUUID, highlightSearchContentByTerms, showMessage, inputWidth, paginate } from '../../../../util';
import { dispatch, dispatchLatest } from '../../../../model';
......@@ -252,6 +253,11 @@ const ImportActionTable = (props) => {
const [ insertIndex, setInsertIndex ] = useState(0);
const moveRowRef = useRef({ data, onChange, pageNum, pageSize });
const tableRef = useRef(null)
useClickAway(() => {
editItemPrevSave();
}, tableRef);
//规则改变的时候 数据表为可编辑状态
useEffect(() => {
......@@ -394,54 +400,63 @@ const ImportActionTable = (props) => {
setEnglishSuggests([]);
};
const save = async() => {
const editItemPrevSave = async(editNewItem = null) => {
try {
const row = await form.validateFields();
if ((row.datatype.name||'')==='') {
form.setFields([{ name: 'datatype', errors: ['必须选择类型'] }]);
return;
}
if (editingKey!=='') {
(row.datatype.parameterNames||[]).forEach((parameterName, index) => {
if (!row.datatype.parameterValues[index] || row.datatype.parameterValues[index]==='') {
row.datatype.parameterValues[index] = 0;
const row = await form.validateFields();
if ((row.datatype.name||'')==='') {
form.setFields([{ name: 'datatype', errors: ['必须选择类型'] }]);
return;
}
})
const newData = [...data];
const index = newData.findIndex((item) => editingKey === item.iid);
//判断字段名称是否唯一
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);
}
(row.datatype.parameterNames||[]).forEach((parameterName, index) => {
if (!row.datatype.parameterValues[index] || row.datatype.parameterValues[index]==='') {
row.datatype.parameterValues[index] = 0;
}
})
if (_index !== -1) {
form.setFields([{ name: 'name', errors: ['字段名称不能重复'] }]);
return;
}
const newData = [...data];
const index = newData.findIndex((item) => editingKey === item.iid);
//判断字段名称是否唯一
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) {
if (_index !== -1) {
form.setFields([{ name: 'name', errors: ['字段名称不能重复'] }]);
return;
}
newData.splice(insertIndex, 0, {...row, iid: editingKey, modelingTemplateTag: null});
} else {
const item = newData[index];
newData.splice(index, 1, { ...item, ...row, modelingTemplateTag: null });
}
if (index === -1) {
newData.splice(insertIndex, 0, {...row, iid: editingKey, modelingTemplateTag: null});
} else {
const item = newData[index];
newData.splice(index, 1, { ...item, ...row, modelingTemplateTag: null });
}
onChange && onChange(newData, true);
onChange && onChange(newData, true);
setEditingKey('');
setSuggests([]);
setEnglishSuggests([]);
setEditingKey('');
setSuggests([]);
setEnglishSuggests([]);
}
if (editNewItem) {
edit(editNewItem);
}
} catch (errInfo) {
console.log('Validate Failed:', errInfo);
......@@ -842,52 +857,33 @@ const ImportActionTable = (props) => {
{
editable && <React.Fragment>
{
isEditing(record) ? (
<React.Fragment>
<Typography.Link className='mr-3' disabled={editingKey === ''} onClick={(event) => {
<React.Fragment>
<Button
className='mr-3'
size='small'
type='text'
icon={<PlusOutlined />}
disabled={editingKey !== ''}
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
save();
}}>
保存
</Typography.Link>
<Typography.Link disabled={editingKey === ''} onClick={(event) => {
insert(record);
}}
/>
<Button
className='mr-3'
size='small'
type='text'
icon={<MinusOutlined />}
disabled={editingKey !== ''}
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
cancel();
}}>
取消
</Typography.Link>
</React.Fragment>
) : (
<React.Fragment>
<Button
className='mr-3'
size='small'
type='text'
icon={<PlusOutlined />}
disabled={editingKey !== ''}
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
insert(record);
}}
/>
<Button
className='mr-3'
size='small'
type='text'
icon={<MinusOutlined />}
disabled={editingKey !== ''}
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
remove(record);
}}
/>
</React.Fragment>
)
remove(record);
}}
/>
</React.Fragment>
}
</React.Fragment>
}
......@@ -1075,7 +1071,7 @@ const ImportActionTable = (props) => {
<Space>
<h2 style={{ marginBottom: 0 }}>数据表结构</h2>
{
editable && <Popover content='点击行进行编辑,表格可以通过拖拽来排序'>
editable && <Popover content='点击行进行编辑, 点击表格外或者点击表格其他行取消编辑,表格可以通过拖拽来排序'>
<QuestionCircleOutlined className='pointer' />
</Popover>
}
......@@ -1097,7 +1093,7 @@ const ImportActionTable = (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
......@@ -1120,7 +1116,7 @@ const ImportActionTable = (props) => {
return 'editable-row';
}}
onRow={(record, index) => {
if (!editable || editingKey!=='' || keyword.length>0) return {
if (!editable || isEditing(record) || keyword.length>0) return {
id: `field-${record.iid}`,
};
......@@ -1128,7 +1124,9 @@ const ImportActionTable = (props) => {
index,
id: `field-${record.iid}`,
onClick: (event) => {
onClickRowTriggerEdit(record);
event.preventDefault();
event.stopPropagation();
editItemPrevSave(record);
},
moveRow
}
......
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