open-source/qinglong
1
0
Fork 0
mirror of https://github.com/whyour/qinglong.git synced 2025-05-29 20:26:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

修复环境变量拖拽

Browse Source
This commit is contained in:
hanhh 2021-09-02 19:16:28 +08:00
parent 0fdaf97461
commit be3b8ad52e
2 changed files with 33 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
back/services/env.ts
View File

@ -89,7 +89,7 @@ export default class EnvService {
fromIndex: number; fromIndex: number;
toIndex: number; toIndex: number;
}, },
) { ): Promise<Env> {
let targetPosition: number; let targetPosition: number;
const isUpward = fromIndex > toIndex; const isUpward = fromIndex > toIndex;
const envs = await this.envs(); const envs = await this.envs();
@ -102,11 +102,11 @@ export default class EnvService {
? (envs[toIndex].position + envs[toIndex - 1].position) / 2 ? (envs[toIndex].position + envs[toIndex - 1].position) / 2
: (envs[toIndex].position + envs[toIndex + 1].position) / 2; : (envs[toIndex].position + envs[toIndex + 1].position) / 2;
} }
this.update({ const newDoc = await this.update({
_id, _id,
position: targetPosition, position: targetPosition,
}); });
await this.set_envs(); return newDoc;
} }
public async envs( public async envs(

32
src/pages/env/index.tsx vendored
View File

@ -25,7 +25,6 @@ import EditNameModal from './editNameModal';
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 './index.less'; import './index.less';
import { useCtx } from '@/utils/hooks';
const { Text } = Typography; const { Text } = Typography;
const { Search } = Input; const { Search } = Input;
@ -60,11 +59,10 @@ const DragableBodyRow = ({
...restProps ...restProps
}: any) => { }: any) => {
const ref = useRef(); const ref = useRef();
const [{ isOver, dropClassName }, drop] = useDrop( const [{ isOver, dropClassName }, drop] = useDrop({
() => ({
accept: type, accept: type,
collect: (monitor) => { collect: (monitor) => {
const { index: dragIndex } = monitor.getItem() || ({} as any); const { index: dragIndex } = (monitor.getItem() as any) || {};
if (dragIndex === index) { if (dragIndex === index) {
return {}; return {};
} }
@ -77,19 +75,14 @@ const DragableBodyRow = ({
drop: (item: any) => { drop: (item: any) => {
moveRow(item.index, index); moveRow(item.index, index);
}, },
}), });
[index], const [, drag] = useDrag({
);
const [, drag, preview] = useDrag(
() => ({
type, type,
item: { index }, item: { index },
collect: (monitor) => ({ collect: (monitor) => ({
isDragging: monitor.isDragging(), isDragging: monitor.isDragging(),
}), }),
}), });
[index],
);
drop(drag(ref)); drop(drag(ref));
return ( return (
@ -98,9 +91,7 @@ const DragableBodyRow = ({
className={`${className}${isOver ? dropClassName : ''}`} className={`${className}${isOver ? dropClassName : ''}`}
style={{ cursor: 'move', ...style }} style={{ cursor: 'move', ...style }}
{...restProps} {...restProps}
> />
{restProps.children}
</tr>
); );
}; };
@ -350,16 +341,17 @@ const Env = ({ headerStyle, isPhone, theme }: any) => {
return; return;
} }
const dragRow = value[dragIndex]; const dragRow = value[dragIndex];
const newData = [...value];
newData.splice(dragIndex, 1);
newData.splice(hoverIndex, 0, dragRow);
setValue([...newData]);
request request
.put(`${config.apiPrefix}envs/${dragRow._id}/move`, { .put(`${config.apiPrefix}envs/${dragRow._id}/move`, {
data: { fromIndex: dragIndex, toIndex: hoverIndex }, data: { fromIndex: dragIndex, toIndex: hoverIndex },
}) })
.then((data: any) => { .then((data: any) => {
if (data.code !== 200) { if (data.code === 200) {
const newData = [...value];
newData.splice(dragIndex, 1);
newData.splice(hoverIndex, 0, { ...dragRow, ...data.data });
setValue([...newData]);
} else {
message.error(data); message.error(data);
} }
}); });