增加规则禁用与启用 & 使用 useApi 重构 bangumi 相关api操作

src/components/ab-edit-rule.vue

@@ -2,8 +2,9 @@
 import type { BangumiRule } from '#/bangumi';
 
 const emit = defineEmits<{
-  delete: [{ id: number; deleteFile: boolean }];
-  apply: [item: BangumiRule];
+  (e: 'disable', opts: { id: number; deleteFile: boolean }): void;
+  (e: 'apply', rule: BangumiRule): void;
+  (e: 'enable', id: number): void;
 }>();
 
 const show = defineModel('show', { default: false });
@@ -18,8 +19,10 @@ watch(show, (val) => {
   }
 });
 
-function emitDelete(deleteFile: boolean) {
-  emit('delete', {
+const close = () => (show.value = false);
+
+function emitDisable(deleteFile: boolean) {
+  emit('disable', {
     id: rule.value.id,
     deleteFile,
   });
@@ -27,11 +30,44 @@ function emitDelete(deleteFile: boolean) {
 function emitApply() {
   emit('apply', rule.value);
 }
+
+function emitEnable() {
+  emit('enable', rule.value.id);
+}
+
+const popupTitle = computed(() => {
+  if (rule.value.deleted) {
+    return 'Enable Rule';
+  } else {
+    return 'Edit Rule';
+  }
+});
+
+const boxSize = computed(() => {
+  if (rule.value.deleted) {
+    return 'w-300px';
+  } else {
+    return 'w-380px';
+  }
+});
 </script>
 
 <template>
-  <ab-popup v-model:show="show" title="Edit Rule" css="w-380px">
-    <div space-y-12px>
+  <ab-popup v-model:show="show" :title="popupTitle" :css="boxSize">
+    <div v-if="rule.deleted">
+      <div>Do you want to enable this rule?</div>
+
+      <div line my-8px></div>
+
+      <div fx-cer justify-center space-x-10px>
+        <ab-button size="small" type="warn" @click="() => emitEnable()"
+          >Yes</ab-button
+        >
+        <ab-button size="small" @click="() => close()">No</ab-button>
+      </div>
+    </div>
+
+    <div v-else space-y-12px>
       <ab-rule v-model:rule="rule"></ab-rule>
 
       <div fx-cer justify-end space-x-10px>
@@ -39,7 +75,7 @@ function emitApply() {
           size="small"
           type="warn"
           @click="() => (deleteRuleDialog = true)"
-          >Delete</ab-button
+          >Disable</ab-button
         >
         <ab-button size="small" @click="emitApply">Apply</ab-button>
       </div>
@@ -50,10 +86,10 @@ function emitApply() {
       <div line my-8px></div>
 
       <div fx-cer justify-center space-x-10px>
-        <ab-button size="small" type="warn" @click="() => emitDelete(true)"
+        <ab-button size="small" type="warn" @click="() => emitDisable(true)"
           >Yes</ab-button
         >
-        <ab-button size="small" @click="() => emitDelete(false)">No</ab-button>
+        <ab-button size="small" @click="() => emitDisable(false)">No</ab-button>
       </div>
     </ab-popup>
   </ab-popup>

src/pages/index/bangumi.vue

@@ -2,7 +2,8 @@
 import type { BangumiRule } from '#/bangumi';
 
 const { data } = storeToRefs(useBangumiStore());
-const { getAll, updateRule, removeRule } = useBangumiStore();
+const { getAll, useUpdateRule, useDisableRule, useEnableRule } =
+  useBangumiStore();
 
 const editRule = reactive<{
   show: boolean;
@@ -32,32 +33,32 @@ const editRule = reactive<{
   },
 });
 
-async function open(data: BangumiRule) {
+function open(data: BangumiRule) {
   editRule.show = true;
   editRule.item = data;
 }
 
-async function deleteRule({
-  id,
-  deleteFile,
-}: {
-  id: number;
-  deleteFile: boolean;
-}) {
-  const res = await removeRule(id, deleteFile);
-  if (res) {
-    editRule.show = false;
-    getAll();
-  }
+function refresh() {
+  editRule.show = false;
+  getAll();
 }
 
-async function applyRule(newData: BangumiRule) {
-  const res = await updateRule(newData);
-  if (res) {
-    editRule.show = false;
-    getAll();
-  }
-}
+const { execute: updateRule, onResult: onUpdateRuleResult } = useUpdateRule();
+const { execute: enableRule, onResult: onEnableRuleResult } = useEnableRule();
+const { execute: disableRule, onResult: onDisableRuleResult } =
+  useDisableRule();
+
+onUpdateRuleResult(() => {
+  refresh();
+});
+
+onDisableRuleResult(() => {
+  refresh();
+});
+
+onEnableRuleResult(() => {
+  refresh();
+});
 
 onActivated(() => {
   getAll();
@@ -83,8 +84,9 @@ definePage({
     <ab-edit-rule
       v-model:show="editRule.show"
       v-model:rule="editRule.item"
-      @delete="deleteRule"
-      @apply="applyRule"
+      @enable="(id) => enableRule(id)"
+      @disable="({ id, deleteFile }) => disableRule(id, deleteFile)"
+      @apply="(rule) => updateRule(rule)"
     ></ab-edit-rule>
   </div>
 </template>

src/store/bangumi.ts

@@ -1,49 +1,78 @@
 import type { BangumiRule } from '#/bangumi';
 
 export const useBangumiStore = defineStore('bangumi', () => {
-  const message = useMessage();
   const data = ref<BangumiRule[]>();
 
-  const getAll = async () => {
-    const res = await apiBangumi.getAll();
+  function getAll() {
+    const { execute, onResult } = useApi(apiBangumi.getAll);
 
-    const sort = (arr: BangumiRule[]) => {
+    function sort(arr: BangumiRule[]) {
       return arr.sort((a, b) => b.id - a.id);
+    }
+
+    onResult((res) => {
+      const enabled = sort(res.filter((e) => !e.deleted));
+      const disabled = sort(res.filter((e) => e.deleted));
+
+      data.value = [...enabled, ...disabled];
+    });
+
+    execute();
+  }
+
+  function useUpdateRule() {
+    const { execute, onResult } = useApi(apiBangumi.updateRule, {
+      failRule: (data) => {
+        return data.status !== 'success';
+      },
+      message: {
+        success: 'Update Success!',
+        fail: 'Update Failed!',
+        error: 'Operation Failed!',
+      },
+    });
+
+    return {
+      execute,
+      onResult,
     };
+  }
 
-    const enabled = sort(res.filter((e) => !e.deleted));
-    const disabled = sort(res.filter((e) => e.deleted));
+  function useDisableRule() {
+    const { execute, onResult } = useApi(apiBangumi.disableRule, {
+      failRule: (data) => {
+        return data.status !== 'success';
+      },
+      message: {
+        success: 'Disabled Success!',
+        fail: 'Disabled Failed!',
+        error: 'Operation Failed!',
+      },
+    });
 
-    data.value = [...enabled, ...disabled];
-  };
+    return {
+      execute,
+      onResult,
+    };
+  }
 
-  const updateRule = async (newRule: BangumiRule) => {
-    try {
-      const res = await apiBangumi.updateRule(newRule);
-      if (res.status === 'success') {
-        message.success('Update Success!');
-        return true;
-      } else {
-        message.error('Update Failed!');
-      }
-    } catch (error) {
-      message.error('Operation Failed!');
-    }
-  };
+  function useEnableRule() {
+    const { execute, onResult } = useApi(apiBangumi.enableRule, {
+      failRule: (data) => {
+        return data.status !== 'success';
+      },
+      message: {
+        success: 'Enabled Success!',
+        fail: 'Enabled Failed!',
+        error: 'Operation Failed!',
+      },
+    });
 
-  const removeRule = async (bangumiId: number, deleteFile = false) => {
-    try {
-      const res = await apiBangumi.deleteRule(bangumiId, deleteFile);
-      if (res.status === 'success') {
-        message.success(`${res.msg} Success!`);
-        return true;
-      } else {
-        message.error('Delete Failed!');
-      }
-    } catch (error) {
-      message.error('Operation Failed!');
-    }
-  };
+    return {
+      execute,
+      onResult,
+    };
+  }
 
-  return { data, getAll, updateRule, removeRule };
+  return { data, getAll, useUpdateRule, useDisableRule, useEnableRule };
 });