refactor: use patch api to refactor category drag-and-drop sorting fe…

…ature (#6461) #### What type of PR is this? /area ui /kind improvement /milestone 2.19.x #### What this PR does / why we need it: 使用 patch 接口重构分类拖动排序功能。 #### Which issue(s) this PR fixes: None #### Special notes for your reviewer: 需要测试文章分类的拖动排序功能是否符合预期。 #### Does this PR introduce a user-facing change? ```release-note 使用 patch 接口重构分类拖动排序功能。 ```
halo-dev · Aug 14, 2024 · d78547f · d78547f
1 parent c2ac19f
commit d78547f
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 15 deletions.
diff --git a/ui/console-src/modules/contents/posts/categories/CategoryList.vue b/ui/console-src/modules/contents/posts/categories/CategoryList.vue
@@ -40,9 +40,20 @@ const handleUpdateInBatch = useDebounceFn(async () => {
   try {
     batchUpdating.value = true;
     const promises = categoriesToUpdate.map((category) =>
-      coreApiClient.content.category.updateCategory({
+      coreApiClient.content.category.patchCategory({
         name: category.metadata.name,
-        category: category,
+        jsonPatchInner: [
+          {
+            op: "add",
+            path: "/spec/children",
+            value: category.spec.children || [],
+          },
+          {
+            op: "add",
+            path: "/spec/priority",
+            value: category.spec.priority || 0,
+          },
+        ],
       })
     );
     await Promise.all(promises);

diff --git a/ui/console-src/modules/contents/posts/categories/components/CategoryEditingModal.vue b/ui/console-src/modules/contents/posts/categories/components/CategoryEditingModal.vue
@@ -10,6 +10,7 @@ import { setFocus } from "@/formkit/utils/focus";
 import { FormType } from "@/types/slug";
 import useSlugify from "@console/composables/use-slugify";
 import { useThemeCustomTemplates } from "@console/modules/interface/themes/composables/use-theme";
+import { reset, submitForm } from "@formkit/core";
 import type { Category } from "@halo-dev/api-client";
 import {
   IconRefreshLine,
@@ -21,7 +22,6 @@ import {
 import { useQueryClient } from "@tanstack/vue-query";
 import { cloneDeep } from "lodash-es";
 import { useI18n } from "vue-i18n";
-import { submitForm, reset } from "@formkit/core";
 
 const props = withDefaults(
   defineProps<{
@@ -109,28 +109,30 @@ const handleSaveCategory = async () => {
         parentCategory = data;
       }
 
-      const priority = parentCategory?.spec.children
+      formState.value.spec.priority = parentCategory?.spec.children
         ? parentCategory.spec.children.length + 1
         : 0;
 
-      formState.value.spec.priority = priority;
-
       const { data: createdCategory } =
         await coreApiClient.content.category.createCategory({
           category: formState.value,
         });
 
       if (parentCategory) {
-        parentCategory.spec.children = Array.from(
-          new Set([
-            ...(parentCategory.spec.children || []),
-            createdCategory.metadata.name,
-          ])
-        );
-
-        await coreApiClient.content.category.updateCategory({
+        await coreApiClient.content.category.patchCategory({
           name: selectedParentCategory.value,
-          category: parentCategory,
+          jsonPatchInner: [
+            {
+              op: "add",
+              path: "/spec/children",
+              value: Array.from(
+                new Set([
+                  ...(parentCategory.spec.children || []),
+                  createdCategory.metadata.name,
+                ])
+              ),
+            },
+          ],
         });
       }
     }