大家好，我是小丞同學，一名大二的前端愛好者
這個系列文章是實戰 jira 任務管理系統的一個學習總結
非常感謝你的閱讀，不對的地方歡迎指正
願你忠于自己，熱愛生活
在上一篇文章中，我們處理了看闆頁面的布局，以及它的邏輯功能，基礎功能已經基本實作，項目、任務的增删改查，搜尋功能的實作，在這一篇我們就對任務組頁面進行最後的布局，和功能實作，寫到這裡，大部分的功能 hook 已經實作了，對于增删改查我們也已經非常了解了。
知識點搶先看
增删任務組功能
路由跳轉
一、頁面布局
這部分已經寫過好幾次了，速戰速決
1. 布局的簡單介紹
這裡我們采用的是 antd 中的 List 元件，頂部左右兩側采用的是自己封裝的 Row 元件，讓它們排列在兩側，連結跳轉部分采用的 Link 元件，通過周遊資料的方式實作渲染
2. 資料的擷取
在這裡我們需要擷取到我們的任務資料，在這裡我們需要寫一個擷取資料的 custom hook： useEpics ，和其他擷取資料的 hook 一樣
我們接收一個 param 資料對象，通過 useQuery 發送請求
再複習一下，它的第二個參數是一個異步事件，第一個參數是元組，當依賴項 param 發生改變時，會重新發送請求，更新緩存中的 epics 資料内容
export const useEpics = (param?: Partial<Epic>) => {
const client = useHttp()
return useQuery<Epic[]>(['epics', param], () => client('epics', { data: param }))
} 我們在 epic/index.ts 中使用 ，擷取任務組資料 epics 以及用于跳轉連結的 tasks 資料
// 關于任務的資訊
const { data: epics } = useEpics(useEpicSearchParams())
// 擷取任務組中的任務清單
const { data: tasks } = useTasks({ projectId: currentProject?.id }) 這樣我們就實作了資料的擷取
接下來我們來看看如何在元件中使用這兩個資料的
對于 epics 它作為我們需要渲染的主内容，需要通過 List.Item 進行渲染
在 List 元件中，我們可以傳入我們的資料源 dataSource ，通過 renderItem 屬性，對 epics 資料進行周遊
<List dataSource={epics} renderItem={epic => <List.Item></List.Item> /> 這樣我們的 epic 就是每一個任務資料通過對象取值方式就能擷取需要的資料
在這裡主要提一下對于時間的渲染
後端給我們傳回的資料格式是時間戳，我們需要将她轉變成這種格式便于閱讀
在這裡我們采用了一個 dayjs 的庫，通過 format 方法确定了她輸出的時間格式 YYYY-MM-DD ，隻需要傳入它的時間即可
<div>開始時間：{dayjs(epic.start).format("YYYY-MM-DD")}</div>
<div>結束時間：{dayjs(epic.end).format("YYYY-MM-DD")}</div> 二、增删任務組功能
首先我們先來實作删除任務組的功能
1. 删除任務組
實作思路如下
點選删除按鈕，彈出提示框
确認删除
調用接口删除緩存
代碼實作
當我們點選删除時，我們調用 confirmDeleteEpic 函數，進行删除确認
這個函數封裝的是一個 Modal.config 元件
// 删除時的提示框
const confirmDeleteEpic = (epic: Epic) => {
Modal.confirm({
title: `你确定删除項目組${epic.name}嗎？`,
content: '點選确定删除',
okText: '确定',
onOk() {
// 确認時調用删除
deleteEpic({ id: epic.id })
}
})
} 當我們在點選确認時，正式調用删除接口 deleteEpic ，傳入我們删除的任務組 id ，即可删除
我們來看看如何實作這個 deleteEpic
首先我們還是需要封裝一個 useDeleteEpic 的 hook 用來處理删除請求，這裡采用 useMutation 來處理，傳入目前的 id ，配置删除的 config 對象
寫到這裡自己也對 useMutation 有了進一步的認識，它可以接收兩個參數，第一個參數我們傳入我們的異步請求，第二個參數來配置 config 如何處理緩存中的資料
// 删除看闆
export const useDeleteEpic = (queryKey: QueryKey) => {
const client = useHttp()
return useMutation(
// 這裡我沒有出現問題，視訊出現了問題
// 直接（id:number)
({ id }: { id: number }) => client(`epics/${id}`, {
method: "DELETE",
}),
useDeleteConfig(queryKey)
)
} 這樣我們的删除功能就實作了
2. 添加任務組功能
實作思路
寫一個 create-epic 頁面
寫入新增任務組資訊
送出建立請求
首先我們需要在 epic 檔案夾目錄下建立一個 create-epic 檔案，用來編寫建立任務頁面
這樣做的好處是能夠将複雜部分分離出來，使得主檔案中的代碼量減少，閱讀性更佳
新增任務組頁面，我們同樣采用的是 Drawer 元件來實作
值得注意的是我們必須要添加 forceRender={true} 元件，否則在頁面第一次加載時會報錯
在 Drawer 元件中同樣的我們采用了 Form 元件，當表單送出時自動調用 onFinish 方法，處理添加請求
const onFinish = async (values: any) => {
// 僅僅傳一個values 不夠，需要傳入 projectid
await addEpic({ ...values, projectId })
props.onClose()
} 在這裡我們采用的時一個 async、await 的組合，等待接口傳回結果後我們再關閉視窗，但是由于我們采用了樂觀更新，這裡其實隻要寫入緩存中就會關閉視窗了
同時為了讓 Form 表單在視窗關閉時自動清空，這裡我們采用了 useEffect 來實作，在依賴項中寫入 visible 監聽變化
useEffect(() => {
form.resetFields()
}, [form, props.visible]) 這樣我們的建立功能也實作了，最後我們再稍微講講任務組 item 中的路由跳轉
三、路由跳轉
當我們點選下面的任務時，需要跳轉到看闆頁面對應任務的編輯視窗，我們來看看效果圖
其實這隻要我們的路由位址配置好了就沒有問題了
我們來看看如何配置這個跳轉的路由位址
指定到對應的 editingTaskId 頁面，這樣視窗就會彈出來了，這樣是我們采用 url 進行狀态管理的好處
to={`/projects/${currentProject?.id}/kanban?editingTaskId=${task.id}`} 那麼我們如何将對應的任務綁定到對應的任務組下呢？
這裡我們采用 filter 來實作，當 task 下的 epicId 和 epic 下的 id 一緻時說明是這個任務組下的，我們周遊渲染即可
{
tasks?.filter(task => task.epicId === epic.id)
.map(task => <Link
style={{ marginRight: '20px' }}
key={task.id}
// 連結到看闆頁面
to={`/projects/${currentProject?.id}/kanban?editingTaskId=${task.id}`}>
{task.name}
</Link>)
} 注意：采用 map 是一定要注意 key 唯一噢~
總結
能夠熟練的實作了增删功能
認識到了 url 狀态管理的好處
采用合适的數組的方法可以極好的幫助我們實作功能