【实战】十一、看板页面及任务组页面开发（五） —— React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目（二十七）

---

学习内容来源：React + React Hook + TS 最佳实践-慕课网

---

相对原教程，我在学习开始时（2023.03）采用的是当前最新版本：

项	版本
react & react-dom	^18.2.0
react-router & react-router-dom	^6.11.2
antd	^4.24.8
@commitlint/cli & @commitlint/config-conventional	^17.4.4
eslint-config-prettier	^8.6.0
husky	^8.0.3
lint-staged	^13.1.2
prettier	2.8.4
json-server	0.17.2
craco-less	^2.0.0
@craco/craco	^7.1.0
qs	^6.11.0
dayjs	^1.11.7
react-helmet	^6.1.0
@types/react-helmet	^6.1.6
react-query	^6.1.0
@welldone-software/why-did-you-render	^7.0.1
@emotion/react & @emotion/styled	^11.10.6

具体配置、操作和内容会有差异，“坑”也会有所不同。。。

---

一、项目起航：项目初始化与配置

• 一、项目起航：项目初始化与配置

二、React 与 Hook 应用：实现项目列表

• 二、React 与 Hook 应用：实现项目列表

三、TS 应用：JS神助攻 - 强类型

• 三、 TS 应用：JS神助攻 - 强类型

四、JWT、用户认证与异步请求

• 四、 JWT、用户认证与异步请求(上)

---

• 四、 JWT、用户认证与异步请求(下)

五、CSS 其实很简单 - 用 CSS-in-JS 添加样式

• 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式(上)

---

• 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式(下)

六、用户体验优化 - 加载中和错误状态处理

• 六、用户体验优化 - 加载中和错误状态处理(上)

---

• 六、用户体验优化 - 加载中和错误状态处理(中)

---

• 六、用户体验优化 - 加载中和错误状态处理(下)

七、Hook，路由，与 URL 状态管理

• 七、Hook，路由，与 URL 状态管理(上)

---

• 七、Hook，路由，与 URL 状态管理(中)

---

• 七、Hook，路由，与 URL 状态管理(下)

八、用户选择器与项目编辑功能

• 八、用户选择器与项目编辑功能(上)

---

• 八、用户选择器与项目编辑功能(下)

九、深入React 状态管理与Redux机制

• 九、深入React 状态管理与Redux机制(一)

---

• 九、深入React 状态管理与Redux机制(二)

---

• 九、深入React 状态管理与Redux机制(三)

---

• 九、深入React 状态管理与Redux机制(四)

---

• 九、深入React 状态管理与Redux机制(五)

十、用 react-query 获取数据，管理缓存

• 十、用 react-query 获取数据，管理缓存（上）

---

• 十、用 react-query 获取数据，管理缓存（下）

十一、看板页面及任务组页面开发

1~3

• 十一、看板页面及任务组页面开发（一）

4~6

• 十一、看板页面及任务组页面开发（二）

7&8

• 十一、看板页面及任务组页面开发（三）

9&10

• 十一、看板页面及任务组页面开发（四）

11.排序乐观更新

新建 src\utils\reorder.ts （这部分视频没有详细讲。。。之后项目中如果用到可以深挖一下）：

/*** 在本地对排序进行乐观更新* @param fromId 要排序的项目的id* @param type 'before' | 'after'* @param referenceId 参照id* @param list 要排序的列表, 比如tasks, kanbans*/
export const reorder = ({fromId,type,referenceId,list,
}: {list: { id: number }[];fromId: number;type: "after" | "before";referenceId: number;
}) => {const copiedList = [...list];// 找到fromId对应项目的下标const movingItemIndex = copiedList.findIndex((item) => item.id === fromId);if (!referenceId) {return insertAfter([...copiedList], movingItemIndex, copiedList.length - 1);}const targetIndex = copiedList.findIndex((item) => item.id === referenceId);const insert = type === "after" ? insertAfter : insertBefore;return insert([...copiedList], movingItemIndex, targetIndex);
};/*** 在list中，把from放在to的前边* @param list* @param from* @param to*/
const insertBefore = (list: unknown[], from: number, to: number) => {const toItem = list[to];const removedItem = list.splice(from, 1)[0];const toIndex = list.indexOf(toItem);list.splice(toIndex, 0, removedItem);return list;
};/*** 在list中，把from放在to的后面* @param list* @param from* @param to*/
const insertAfter = (list: unknown[], from: number, to: number) => {const toItem = list[to];const removedItem = list.splice(from, 1)[0];const toIndex = list.indexOf(toItem);list.splice(toIndex + 1, 0, removedItem);return list;
};

编辑 src\utils\use-optimistic-options.ts(在之前写的配置中调用，完成乐观更新):

...
export const useReorderViewboardConfig = (queryKey: QueryKey) =>useConfig(queryKey, (target, old) => reorder({ list: old, ...target }));export const useReorderTaskConfig = (queryKey: QueryKey) =>useConfig(queryKey, (target, old) => {const orderedList = reorder({ list: old, ...target }) as Task[];return orderedList.map((item) =>item.id === target.fromId? { ...item, kanbanId: target.toKanbanId }: item);});

由于 task 的排序有可能是跨 面板 的，因此会复杂一些

查看效果，发现在拖拽到其他面板后，若是原面板为空，拖不回去了。。。因此需要为 DropChild 加一个最小高度

编辑 src\screens\ViewBoard\components\ViewboardCloumn.tsx:

...
export const ViewboardColumn = React.forwardRef<...>((...) => {...return (<Container {...props} ref={ref}>...<TasksContainer><Drop {...}><DropChild style={{minHeight: '5px'}}>...</DropChild></Drop><CreateTask kanbanId={viewboard.id} /></TasksContainer></Container>);
});
...

至此拖拽大功告成！

12.任务组页面 (上)

看板页面开发完，接下来是任务组页面

新建 src\types\TaskGroup.ts：

export interface TaskGroup {id: number;name: string;projectId: number;// 开始时间start: number;// 结束时间end: number;
}

新建 src\utils\taskGroup.ts（与看板 Viewboard(kanban) 类似，可以复制后修改）：

import { cleanObject } from "utils";
import { useHttp } from "./http";
import { TaskGroup } from "types/TaskGroup";
import { QueryKey, useMutation, useQuery } from "react-query";
import {useAddConfig,useDeleteConfig,
} from "./use-optimistic-options";export const useTaskGroups = (param?: Partial<TaskGroup>) => {const client = useHttp();return useQuery<TaskGroup[]>(["taskgroups", param], () =>client("epics", { data: cleanObject(param || {}) }));
};export const useAddTaskGroup = (queryKey: QueryKey) => {const client = useHttp();return useMutation((params: Partial<TaskGroup>) =>client(`epics`, {method: "POST",data: params,}),useAddConfig(queryKey));
};export const useDeleteTaskGroup = (queryKey: QueryKey) => {const client = useHttp();return useMutation((id?: number) =>client(`epics/${id}`, {method: "DELETE",}),useDeleteConfig(queryKey));
};

新建 src\screens\TaskGroup\utils.ts:

import { useProjectIdInUrl } from "screens/ViewBoard/utils";export const useTaskGroupSearchParams = () => ({projectId: useProjectIdInUrl(),
});export const useTaskGroupsQueryKey = () => ["taskgroups",useTaskGroupSearchParams(),
];

修改 src\types\Task.ts(属性字段需要和实际数据一致。。。)：

export interface Task {id: number;name: string;projectId: number;processorId: number; // 经办人epicId: number; // 任务组(原 taskGroupId)kanbanId: number;typeId: number; // bug or tasknote: string;
}

编辑 src\screens\TaskGroup\index.tsx（之前新建路由时创建过，页面布局有一部分与看板相同，可以拿过来 src\screens\ViewBoard\index.tsx）：

import { Row, ViewContainer } from "components/lib";
import { useProjectInUrl } from "screens/ViewBoard/utils";
import { useTaskGroups } from "utils/taskGroup";
import { useTaskGroupSearchParams, useTaskGroupsQueryKey } from "./utils";
import { Button, List, Modal } from "antd";
import dayjs from "dayjs";
import { useTasks } from "utils/task";
import { Link } from "react-router-dom";
import { TaskGroup } from "types/TaskGroup";
import { useState } from "react";export const TaskGroupIndex = () => {const { data: currentProject } = useProjectInUrl();const { data: taskGroups } = useTaskGroups(useTaskGroupSearchParams());const { data: tasks } = useTasks({ projectId: currentProject?.id });return (<ViewContainer><Row between={true}><h1>{currentProject?.name}任务组</h1><Button onClick={() => setEpicCreateOpen(true)} type={"link"}>创建任务组</Button></Row><Liststyle={{ overflow: "scroll" }}dataSource={taskGroups}itemLayout={"vertical"}renderItem={(taskGroup) => (<List.Item><List.Item.Metatitle={<Row between={true}><span>{taskGroup.name}</span><Button onClick={() => {}} type={"link"}>删除</Button></Row>}description={<div><div>开始时间：{dayjs(taskGroup.start).format("YYYY-MM-DD")}</div><div>结束时间：{dayjs(taskGroup.end).format("YYYY-MM-DD")}</div></div>}/><div>{tasks?.filter((task) => task.epicId === taskGroup.id).map((task) => (<Linkto={`/projects/${currentProject?.id}/viewboard?editingTaskId=${task.id}`}key={task.id}>{task.name}</Link>))}</div></List.Item>)}/></ViewContainer>);
};

查看页面效果，点击对应任务会跳转到看板并打开任务编辑窗口

编辑 src\screens\TaskGroup\index.tsx（新增删除任务组功能）：

...
import { useDeleteTaskGroup, useTaskGroups } from "utils/taskGroup";export const TaskGroupIndex = () => {...const { mutate: deleteTaskGroup } = useDeleteTaskGroup(useTaskGroupsQueryKey());const confirmDeleteEpic = (taskGroup: TaskGroup) => {Modal.confirm({title: `确定删除项目组：${taskGroup.name}`,content: "点击确定删除",okText: "确定",onOk() {deleteTaskGroup(taskGroup.id);},});};return (<ViewContainer><Row between={true}>...</Row><Liststyle={{ overflow: "scroll" }}dataSource={taskGroups}itemLayout={"vertical"}renderItem={(taskGroup) => (<List.Item><List.Item.Metatitle={<Row between={true}><span>{taskGroup.name}</span><Button onClick={() => confirmDeleteEpic(taskGroup)} type={"link"}>删除</Button></Row>}description={...}/><div>...</div></List.Item>)}/></ViewContainer>);
};

查看页面，可以正常删除任务组（建议功能尝试放到完成创建功能之后再尝试，你懂的。。。）

---

部分引用笔记还在草稿阶段，敬请期待。。。