feat:排序处理，添加计划名称前缀组件

src/components/StepSort.tsx

@@ -1,16 +1,9 @@
-import React, {CSSProperties, Fragment, useState} from "react";
+import React, {CSSProperties, Fragment, useEffect, useState} from "react";
 import {DragDropContext, Droppable, Draggable, DropResult, DraggingStyle, NotDraggingStyle} from "react-beautiful-dnd";
 import {TaskStepSortVO} from "@/components/type/TaskSort.d";
-import {Button, Drawer, Modal} from "antd";
+import {Button, Drawer, message, Modal} from "antd";
 import TextArea from "antd/es/input/TextArea";
-
+import {addStepItemAPI} from "@/components/service/StepSort";
-// fake data generator
-const getItems = (count: number, offset = 0) =>
-    Array.from({length: count}, (v, k) => k).map(k => ({
-        id: `item-${k + offset}-${new Date().getTime()}`,
-        stepDesc: `item ${k + offset}`,
-        sortIndex: k + offset,
-    }));
 
 const reorder = (list: TaskStepSortVO[], startIndex: number, endIndex: number) => {
     const result = Array.from(list);
@@ -34,11 +27,23 @@ const getListStyle = (isDraggingOver: boolean) => ({
     width: "100%"
 });
 
-const StepSort = (props: { taskId: string }) => {
+const StepSort = (props: { taskId: string, stepList: TaskStepSortVO[] }) => {
-    const [state, setState] = useState<TaskStepSortVO[]>(getItems(5, 10));
+    const [state, setState] = useState<TaskStepSortVO[]>(props.stepList);
     // 抽屉 start
     const [open, setOpen] = useState(false);
     const [dialogueOpen, setDialogueOpen] = useState(false);
+    const [sortItemList, setSortItemList] = useState<TaskStepSortVO[]>([]);
+    const [modalText, setModalText] = useState<TaskStepSortVO>({
+        id: "",
+        stepDesc: undefined,
+        sortIndex: undefined,
+        taskId: props.taskId,
+    });
+
+    useEffect(() => {
+        //     根据任务id查找步骤
+
+    }, []);
 
     function onDragEnd(result: DropResult) {
         const {source, destination} = result;
@@ -50,16 +55,64 @@ const StepSort = (props: { taskId: string }) => {
         let newState = [...state];
         newState = items;
         setState(newState);
+        props.stepList.length=0
+        props.stepList.push(...newState)
+    }
+
+    const [confirmButtonLoading, setConfirmButtonLoading] = useState(false);
+    const confirmModalTextArea = () => {
+        setConfirmButtonLoading(true)
+        addStepItemAPI(modalText).then(res => {
+            if (res.data.status.success) {
+                message.info("添加步骤成功")
+                setModalText(
+                    {...modalText, stepDesc: undefined})
+                setState([...state, res.data.data])
+                props.stepList.length=0
+                props.stepList.push(...state, res.data.data)
+                setDialogueOpen(false);
+            } else {
+                message.error(res.data.status.message)
+            }
+        }).finally(()=>{
+            setConfirmButtonLoading(false)
+        })
     }
 
     return (
         <Fragment>
-
             <Modal
+                title={`步骤`}
                 closable={false}
                 open={dialogueOpen}
+                confirmLoading={confirmButtonLoading}
+                onCancel={
+                    () => {
+                        setDialogueOpen(false);
+                    }
+                }
+                destroyOnClose={true}
+                onOk={confirmModalTextArea}
             >
-                <TextArea autoSize={{ minRows: 4, maxRows: 20 }} placeholder="最大长度255" maxLength={255} autoFocus />
+                <TextArea autoSize={{minRows: 4, maxRows: 20}}
+                          placeholder="最大长度255"
+                          showCount
+                          styles={{
+                              count: {
+                                  // color:"red",
+                                  bottom: "0px"
+                              }
+                          }}
+                          value={modalText.sortIndex}
+                          maxLength={255} autoFocus
+                          onChange={(e) => setModalText(
+                              {...modalText, stepDesc: e.target.value})}
+                          onKeyDown={event => {
+                              if (event.ctrlKey && event.key === 'Enter') {
+                                  confirmModalTextArea();
+                              }
+                          }}
+                />
             </Modal>
 
             <Button type={open ? "primary" : "default"} onClick={() => setOpen(!open)}>
@@ -107,16 +160,13 @@ const StepSort = (props: { taskId: string }) => {
                                                         {`步骤${index + 1}`}
                                                     </div>
                                                     <div
-                                                        style={{
-                                                            display: "flex",
-                                                            justifyContent: "space-around",
-                                                            border: "solid",
-                                                            borderRadius: grid * 2,
-                                                        }}
                                                     >
+                                                        <div style={{whiteSpace: 'pre-line',border: "solid",
+                                                            borderRadius: grid,}}>
                                                             {item.stepDesc}
                                                         </div>
                                                     </div>
+                                                </div>
                                             )}
                                         </Draggable>
                                     ))}

src/components/TaskNameAndIcon.tsx

@@ -0,0 +1,24 @@
+import {TaskMessage} from "@/lib/definitions";
+import React, {Fragment} from "react";
+
+const TaskNameAndIcon = (props: {task:TaskMessage}) => {
+    return (<Fragment>
+        {props.task.fId &&
+            <svg className="icon" aria-hidden="true">
+                <use xlinkHref="#icon-tuandui"></use>
+            </svg>
+        }
+        {props.task.taskType == '2' &&
+            <svg className="icon" aria-hidden="true">
+                <use xlinkHref="#icon-youxuliebiao"></use>
+            </svg>
+        }
+        {props.task.taskType == '3' &&
+            <svg className="icon" aria-hidden="true">
+                <use xlinkHref="#icon-dingshi"></use>
+            </svg>
+        }
+        <text>{props.task.name}</text>
+    </Fragment>)
+}
+export default TaskNameAndIcon;

src/components/service/StepSort.tsx

@@ -0,0 +1,9 @@
+import {AxiosResponse} from "axios";
+import {ResponseVO} from "@/lib/definitions";
+import {httpReq} from "@/utils/axiosReq";
+import {TaskStepSortVO} from "@/components/type/TaskSort.d";
+
+export const addStepItemAPI= (data:TaskStepSortVO):Promise<AxiosResponse<ResponseVO<TaskStepSortVO>>> =>{
+    return httpReq.post(process.env.NEXT_PUBLIC_TODO_REQUEST_URL + `/task/step/sort/item`,
+        data)
+}

src/components/type/TaskSort.d.tsx

@@ -1,5 +1,6 @@
 export type TaskStepSortVO = {
     id: string,
-    sortIndex: number,
+    sortIndex: number|undefined,
-    stepDesc: string
+    stepDesc: string|undefined,
+    taskId:string
 }

src/lib/definitions.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import {Dayjs} from "dayjs";
+import {TaskStepSortVO} from "@/components/type/TaskSort.d";
 
 export type Request<T>={
     data:T,
@@ -36,6 +37,7 @@ export type TaskMessage ={
     fId?:string;
     fName?:string;
     taskType?:string;
+    stepList?:TaskStepSortVO[];
 }
 
 
@@ -51,6 +53,7 @@ export type DataType = TaskMessage&{
     actualTimeRange?:(string|Dayjs|undefined)[]
     children: DataType[]|undefined;
     sortNo?:number;
+
 }
 export type DictType={
     id:number;

src/lib/task/project/data.tsx

@@ -52,7 +52,7 @@ export async function getTask(id: string): Promise<ResponseVO<DataType>> {
     return response.data;
 }
 
-export function addTask(task: DataType): Promise<AxiosResponse<ResponseVO<TaskMessage>>> {
+export function addTask(task: DataType): Promise<AxiosResponse<ResponseVO<DataType>>> {
     noStore();
     // 使用 Axios 发送 POST 请求添加数据
     switch(task.taskType){

src/ui/globals.css

@@ -24,7 +24,7 @@ html {
 }
 .icon {
     /* em 当前元素的 font-size 值,如果元素没有显式设置 font-size，则继承父元素的 font-size。 控制与字体大小相关的属性*/
-    width: 1em;
+    width: 2em;
     height: 1em;
     vertical-align: -0.15em;
     fill: currentColor;

src/ui/task/calendar/CalShow.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from "react";
+import React, {Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState} from "react";
 import {Calendar, dayjsLocalizer, Event, SlotInfo, View} from 'react-big-calendar'
 import dayjs, {Dayjs} from 'dayjs'
 import 'react-big-calendar/lib/css/react-big-calendar.css'
@@ -14,6 +14,8 @@ import LocalContext from "@/ui/LocalContent";
 import withDragAndDrop, {EventInteractionArgs} from "react-big-calendar/lib/addons/dragAndDrop";
 import {TaskEvent} from "@/lib/task/calendar/data";
 import {editExpectAPI} from "@/lib/task/calendar/service";
+import TaskNamePrefixIcon from "@/components/TaskNameAndIcon";
+import TaskNameAndIcon from "@/components/TaskNameAndIcon";
 
 /**
  * https://github.com/jquense/react-big-calendar?tab=readme-ov-file
@@ -116,7 +118,7 @@ const CalShow: React.FC = () => {
                     return {
                         start: dayjs(taskState.expectedStartTime).toDate(),
                         end: dayjs(taskState.expectedEndTime).toDate(),
-                        title: taskState.name,
+                        title: <TaskNameAndIcon task={taskState}/>,
                         resource: taskState.id,
                         id: taskState.id,
                         state: taskState.state,
@@ -271,7 +273,7 @@ const CalShow: React.FC = () => {
                                   haveButton={false}
                                   itemId={itemId}
                                   reloadData={reloadData} expectedStartTime={expectedStartTime}
-                                  closeOpen={()=>setOpen(false)}
+                                  closeOpen={() => setOpen(false)}
                                   expectedEndTime={expectedEndTime}/>}
         <DragAndDropCalendar
             // 本地设置

src/ui/task/project/DetailModelForm.tsx

@@ -189,7 +189,7 @@ export const DetailModelForm: React.FC<DetailModelFormProps> = (props) => {
                                                 onClick={() => props.closeOpen?.()}>关闭</Button>)
                         }
                         if (taskType == '2') {
-                            result.push(<StepSort taskId={props.itemId!}/>)
+                            result.push(<StepSort taskId={props.itemId!} stepList={requestTask?.stepList||[]}/>)
                         }
                         return result;
                     },
@@ -205,9 +205,9 @@ export const DetailModelForm: React.FC<DetailModelFormProps> = (props) => {
                         // }
                         // return defaultDoms;
                         const result = defaultDoms.filter(defaultButton => defaultButton.key == 'rest');
-                        if (taskType == '2') {
+                        // if (taskType == '2') {
-                            result.push(<StepSort taskId={props.itemId!}/>)
+                        //     result.push(<StepSort taskId={props.itemId!} stepList={requestTask?.stepList||[]}/>)
-                        }
+                        // }
                         result.push(<Button type="primary" key="create-team" loading={operationRequest}
                                             onClick={() => form.submit()}>{taskType == '1' ? "创建团队" : "确认"}
                         </Button>)
@@ -270,6 +270,8 @@ export const DetailModelForm: React.FC<DetailModelFormProps> = (props) => {
                         await addTask(values).then(response => {
                                 console.log('response', response)
                                 if (response.data.status.success) {
+                                    setRequestTask(response.data.data)
+
                                     message.success(`添加计划${response.data.data.name}成功`)
                                     // 树任务重新刷新
                                     // 四象限任务重新刷新

src/ui/task/project/TreeTablePro.tsx

@@ -20,6 +20,7 @@ import dayjs from "dayjs";
 import '@/ui/task/project/TreeTablePro.modules.css'
 import {useSearchParams} from "next/navigation";
 import {TaskWebSelectVO} from "@/lib/task/project/definitions";
+import TaskNameAndIcon from "@/components/TaskNameAndIcon";
 
 const TreeTablePro: React.FC = (props:{joinId?:string}) => {
     // 刷新表格
@@ -55,12 +56,7 @@ const TreeTablePro: React.FC = (props:{joinId?:string}) => {
                 ],
             },
             render: (_, record) => {
-                return <Fragment>
+                return  <TaskNameAndIcon task={record}/>
-                    {record.fId && <svg className="icon" aria-hidden="true">
-                        <use xlinkHref="#icon-tuandui"></use>
-                    </svg>}
-                    <text>{record.name}</text>
-                </Fragment>
             }
         },
         {