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