loveuer/upipe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: 基本解决了新建拖动排序的问题

Browse Source
This commit is contained in:
loveuer 2025-04-03 17:34:58 +08:00
parent b2bbfab22c
commit d9d939ff37
3 changed files with 37 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
frontend/src/pages/TestPage.tsx
View File

@ -1,80 +0,0 @@
import { makeStyles } from "@mui/styles";
import { Tag } from "antd";
const useStyles = makeStyles({
container: {
height: '200px',
width: '600px',
border: '1px solid black',
margin: "100px",
display: 'flex',
flexDirection: 'column',
flexWrap: 'wrap',
overflowY: 'scroll',
},
names: {
maxWidth: '140px',
minWidth: '140px',
},
phones: {
maxWidth: '140px',
minWidth: '140px',
},
address: {
maxWidth: '140px',
minWidth: '140px',
}
});
export const TestPage = () => {
const style = useStyles();
return (
<div className={style.container}>
<div className={style.names}>
<Tag>name1</Tag>
<Tag>name2</Tag>
<Tag>name3</Tag>
<Tag>name4</Tag>
<Tag>name5</Tag>
<Tag>name6</Tag>
<Tag>name7</Tag>
<Tag>name8</Tag>
<Tag>name9</Tag>
<Tag>name10</Tag>
<Tag>name11</Tag>
<Tag>name12</Tag>
<Tag>name13</Tag>
<Tag>name14</Tag>
<Tag>name15</Tag>
</div>
<div className={style.phones}>
<Tag color="success">phone1</Tag>
<Tag color="success">phone2</Tag>
<Tag color="success">phone3</Tag>
<Tag color="success">phone4</Tag>
<Tag color="success">phone5</Tag>
<Tag color="success">phone6</Tag>
<Tag color="success">phone7</Tag>
<Tag color="success">phone8</Tag>
<Tag color="success">phone9</Tag>
</div>
<div className={style.address}>
<Tag color="error">address1</Tag>
<Tag color="error">address2</Tag>
<Tag color="error">address3</Tag>
<Tag color="error">address4</Tag>
<Tag color="error">address5</Tag>
<Tag color="error">address6</Tag>
<Tag color="error">address7</Tag>
<Tag color="error">address8</Tag>
</div>
<div>
<Tag color="warning">birthday</Tag>
<Tag color="warning">birthday</Tag>
<Tag color="warning">birthday</Tag>
<Tag color="warning">birthday</Tag>
<Tag color="warning">birthday</Tag>
<Tag color="warning">birthday</Tag>
</div>
</div>
);
}

58
frontend/src/pages/task/components/TaskCreate.tsx
View File

@ -1,6 +1,6 @@
import { makeStyles } from "@mui/styles"
import { Modal, Collapse } from "antd"
import { DndContext } from '@dnd-kit/core'
import { DndContext, } from '@dnd-kit/core'
import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities'
import { arrayMove } from '@dnd-kit/sortable'
@ -11,7 +11,8 @@ const useStyle = makeStyles({
footer: {
display: 'flex',
flexDirection: 'row',
}
},
dnd: {}
})
export interface TaskCreateProps {
@ -34,7 +35,7 @@ export const TaskCreate = (props: TaskCreateProps) => {
const style = useStyle();
const [items, setItems] = useState(steps);
const onDragEnd = ({ active, over }) => {
const onDragEnd = ({ active, over }: { active: any, over: any }) => {
if (active.id !== over?.id) {
setItems(items => {
const oldIndex = items.findIndex(item => item.id === active.id);
@ -57,44 +58,59 @@ export const TaskCreate = (props: TaskCreateProps) => {
title="新建任务"
open={props.open}
>
<SortableItem key={items[0].id} id={items[0].id} disabled>
<Collapse style={{flex:1}} items={[items[0]].map(v => { return { key: v.id, label: v.title, children: <p>hello</p> } })}>
</Collapse>
</SortableItem>
<DndContext onDragEnd={onDragEnd}>
<SortableContext items={items} strategy={verticalListSortingStrategy}>
<Collapse>
{items.map(item => (
<SortableItem key={item.id} id={item.id}>
<Collapse.Panel key={item.id} header={item.title}>
{'步骤内容-' + item.type}
</Collapse.Panel>
</SortableItem>
))}
</Collapse>
{
items.filter(v => v.type === "mid").map(v => {
return (
<SortableItem key={v.id} id={v.id}>
<Collapse items={[{ key: v.id, label: v.title, children: <p>hello</p> }]} style={{ flex: 1 }}>
</Collapse>
</SortableItem>
)
})
}
</SortableContext>
</DndContext>
<SortableItem key={items[items.length - 1].id} id={items[items.length - 1].id} disabled>
<Collapse style={{flex:1}} items={[items[items.length - 1]].map(v => { return { key: v.id, label: v.title, children: <p>hello</p> } })}>
</Collapse>
</SortableItem>
</Modal>
</div>
);
};
const SortableItem = ({ id, children }: { id: number; children: JSX.Element }) => {
const SortableItem = ({ id, children, disabled=false }: { id: number; children: JSX.Element;disabled? : boolean}) => {
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
const style = {
transform: CSS.Transform.toString(transform),
'transform': CSS.Transform.toString(transform),
transition,
cursor: 'move',
backgroundColor: 'white',
marginBottom: 8,
borderRadius: 4,
boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
'cursor': disabled? 'not-allowed': 'move',
'background-color': 'white',
'margin-bottom': 8,
'border-radius': 4,
'box-shadow': '0 2px 4px rgba(0,0,0,0.1)',
'display': 'flex', // Add this line to make the item a flex container
'flex-direction': 'row', // Add this line to set the direction of the flex container to row
'padding': '10px',
};
return (
<div ref={setNodeRef} style={style} {...attributes}>
<div {...listeners} style={{
padding: '8px 16px',
borderRight: '2px solid #1890ff',
display: 'inline-block',
borderRight: disabled?'2px solid red':'2px solid green',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
marginRight: 16
}}>⋮⋮</div>
{children}

2
frontend/src/routes.tsx
View File

@ -3,7 +3,6 @@ import { HomePage } from './pages/HomePage';
import { AboutPage } from './pages/AboutPage';
import TaskPage from './pages/task/TaskPage';
import LoginPage from './pages/LoginPage';
import { TestPage } from './pages/TestPage';
const AppRoutes = () => {
return (
@ -13,7 +12,6 @@ const AppRoutes = () => {
<Route path="/about" element={<AboutPage />} />
<Route path="/tasks" element={<TaskPage />} />
<Route path="/login" element={<LoginPage />} />
<Route path="/test" element={<TestPage/>} />
</Routes>
</Router>
);