open-source/qinglong
1
0
Fork 0
mirror of https://github.com/whyour/qinglong.git synced 2025-05-29 11:19:34 +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(

68
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,36 +59,30 @@ 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 {}; }
} return {
return { isOver: monitor.isOver(),
isOver: monitor.isOver(), dropClassName:
dropClassName: dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',
dragIndex < index ? ' drop-over-downward' : ' drop-over-upward', };
}; },
}, drop: (item: any) => {
drop: (item: any) => { moveRow(item.index, index);
moveRow(item.index, index); },
}, });
const [, drag] = useDrag({
type,
item: { index },
collect: (monitor) => ({
isDragging: monitor.isDragging(),
}), }),
[index], });
);
const [, drag, preview] = useDrag(
() => ({
type,
item: { index },
collect: (monitor) => ({
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);
} }
}); });