Commit ea69eeea by zhaochengxiang

字段编辑,点击相应位置即进入编辑状态,点击别的单元时自动保存编辑结果

parent cc43d846
import React, { useState, useCallback, useRef, useEffect } from 'react'; import React, { useState, useCallback, useRef, useEffect } from 'react';
import { Input, Form, Typography, Radio, Button, Popconfirm, Select, Row, Col, Popover, Checkbox, Tooltip, Table, Pagination } from 'antd'; import { Input, Form, Typography, Radio, Button, Select, Row, Col, Popover, Checkbox, Tooltip, Table, Pagination } from 'antd';
import { CloseOutlined, CheckOutlined } from '@ant-design/icons'; import { CloseOutlined, CheckOutlined, PlusOutlined, MinusOutlined } from '@ant-design/icons';
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';
...@@ -327,6 +327,17 @@ const ImportActionTable = (props) => { ...@@ -327,6 +327,17 @@ const ImportActionTable = (props) => {
}, 200) }, 200)
} }
const insert = (record) => {
const newData = [...data];
const index = newData.findIndex((item) => record.iid === item.iid);
const iid = generateUUID();
newData.splice(index+1, 0, {iid});
setFilterPageCondition({...filterPageCondition, ...{ filterData: newData}});
edit(newData[index+1]);
}
const edit = (record) => { const edit = (record) => {
form.setFieldsValue({ form.setFieldsValue({
name: '', name: '',
...@@ -787,20 +798,24 @@ const ImportActionTable = (props) => { ...@@ -787,20 +798,24 @@ const ImportActionTable = (props) => {
{ {
!isEditing(record) && <React.Fragment> !isEditing(record) && <React.Fragment>
{ {
record?.isPossibleNewRecommendedDefinition?.possible && <Typography.Link className='mr-3' onClick={() => { record?.isPossibleNewRecommendedDefinition?.possible && <Typography.Link className='mr-3' onClick={(event) => {
event.preventDefault();
event.stopPropagation();
value?.setGlobalState && value?.setGlobalState({ value?.setGlobalState && value?.setGlobalState({
message: 'data-govern-show-standard-create', message: 'data-govern-show-standard-create',
data: { data: {
column: record, column: record,
type: record?.isPossibleNewRecommendedDefinition?.type type: record?.isPossibleNewRecommendedDefinition?.type
} }
}) });
}}> }}>
加入标准 加入标准
</Typography.Link> </Typography.Link>
} }
{ {
record?.isPossibleNewTerm?.possible && <Typography.Link className='mr-3' onClick={() => { record?.isPossibleNewTerm?.possible && <Typography.Link className='mr-3' onClick={(event) => {
event.preventDefault();
event.stopPropagation();
value?.setGlobalState && value?.setGlobalState({ value?.setGlobalState && value?.setGlobalState({
message: 'data-govern-show-standard-create', message: 'data-govern-show-standard-create',
data: { data: {
...@@ -819,21 +834,48 @@ const ImportActionTable = (props) => { ...@@ -819,21 +834,48 @@ const ImportActionTable = (props) => {
{ {
isEditing(record) ? ( isEditing(record) ? (
<React.Fragment> <React.Fragment>
<Typography.Link className='mr-3' disabled={editingKey === ''} onClick={() => save()}> <Typography.Link className='mr-3' disabled={editingKey === ''} onClick={(event) => {
event.preventDefault();
event.stopPropagation();
save();
}}>
保存 保存
</Typography.Link> </Typography.Link>
<Typography.Link disabled={editingKey === ''} onClick={() => {cancel()}}> <Typography.Link disabled={editingKey === ''} onClick={(event) => {
event.preventDefault();
event.stopPropagation();
cancel();
}}>
取消 取消
</Typography.Link> </Typography.Link>
</React.Fragment> </React.Fragment>
) : ( ) : (
<React.Fragment> <React.Fragment>
<Typography.Link className='mr-3' disabled={editingKey !== ''} onClick={() => edit(record)}> <Button
编辑 className='mr-3'
</Typography.Link> size='small'
<Popconfirm disabled={editingKey !== ''} title="删除字段会删除相关的索引,您确定删除吗?" onConfirm={() => remove(record)}> type='text'
<a disabled={editingKey !== ''} href="">删除</a> icon={<PlusOutlined />}
</Popconfirm> 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>
) )
} }
...@@ -1008,6 +1050,10 @@ const ImportActionTable = (props) => { ...@@ -1008,6 +1050,10 @@ const ImportActionTable = (props) => {
onValuesChange(currentChangedValues, form.getFieldsValue(), suggestOffset); onValuesChange(currentChangedValues, form.getFieldsValue(), suggestOffset);
} }
const onClickRowTriggerEdit = (record) => {
edit(record);
}
let disableAdd = false, addTip = ''; let disableAdd = false, addTip = '';
if (editingKey!=='' || keyword!=='') { if (editingKey!=='' || keyword!=='') {
disableAdd = true; disableAdd = true;
...@@ -1057,12 +1103,15 @@ const ImportActionTable = (props) => { ...@@ -1057,12 +1103,15 @@ const ImportActionTable = (props) => {
}} }}
onRow={(record, index) => { onRow={(record, index) => {
if (!editable || editingKey!=='' || keyword.length>0) return { if (!editable || editingKey!=='' || keyword.length>0) return {
id: `field-${record.iid}` id: `field-${record.iid}`,
}; };
return { return {
index, index,
id: `field-${record.iid}`, id: `field-${record.iid}`,
onClick: (event) => {
onClickRowTriggerEdit(record);
},
moveRow moveRow
} }
}} }}
......
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
display: none; display: none;
} }
.yy-table-tbody > tr > td { .yy-table-tbody > tr:not(.yy-table-measure-row)> td {
padding: 8px 8px !important; padding: 8px 8px !important;
} }
} }
......
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