Delete Rule Method

src/api/bangumi.ts

@@ -40,12 +40,14 @@ export const apiBangumi = {
   /**
    * 删除指定 bangumiId 的数据库规则，会在重新匹配到后重建
    * @param bangumiId - 需要删除的 bangumi 的 id
+   * @param file - 是否同时删除关联文件。
    * @returns axios 请求返回的数据
    */
-  async deleteRule(bangumiId: number) {
-    const { data } = await axios.delete(
-      `api/v1/bangumi/deleteRule/${bangumiId}`
-    );
+  async deleteRule(bangumiId: number, file: boolean) {
+    const { data } = await axios.delete<{
+      status: 'success';
+      msg: string;
+    }>(`api/v1/bangumi/deleteRule/${bangumiId}`);
     return data;
   },
 

src/components/ab-edit-rule.vue

@@ -2,9 +2,13 @@
 import type { BangumiRule } from '#/bangumi';
 
 const emit = defineEmits<{
-  (e: 'disable', opts: { id: number; deleteFile: boolean }): void;
   (e: 'apply', rule: BangumiRule): void;
   (e: 'enable', id: number): void;
+  (
+    e: 'deleteFile',
+    type: 'disable' | 'delete',
+    opts: { id: number; deleteFile: boolean }
+  ): void;
 }>();
 
 const show = defineModel('show', { default: false });
@@ -12,17 +16,28 @@ const rule = defineModel<BangumiRule>('rule', {
   required: true,
 });
 
-const deleteRuleDialog = ref(false);
+const deleteFileDialog = reactive<{
+  show: boolean;
+  type: 'disable' | 'delete';
+}>({
+  show: false,
+  type: 'disable',
+});
 watch(show, (val) => {
   if (!val) {
-    deleteRuleDialog.value = false;
+    deleteFileDialog.show = false;
   }
 });
 
+const showDeleteFileDialog = (type: 'disable' | 'delete') => {
+  deleteFileDialog.show = true;
+  deleteFileDialog.type = type;
+};
+
 const close = () => (show.value = false);
 
-function emitDisable(deleteFile: boolean) {
-  emit('disable', {
+function emitdeleteFile(deleteFile: boolean) {
+  emit('deleteFile', deleteFileDialog.type, {
     id: rule.value.id,
     deleteFile,
   });
@@ -74,22 +89,30 @@ const boxSize = computed(() => {
         <ab-button
           size="small"
           type="warn"
-          @click="() => (deleteRuleDialog = true)"
+          @click="() => showDeleteFileDialog('disable')"
           >Disable</ab-button
         >
+        <ab-button
+          size="small"
+          type="warn"
+          @click="() => showDeleteFileDialog('delete')"
+          >Delete</ab-button
+        >
         <ab-button size="small" @click="emitApply">Apply</ab-button>
       </div>
     </div>
 
-    <ab-popup v-model:show="deleteRuleDialog" title="Delete">
+    <ab-popup v-model:show="deleteFileDialog.show" title="Delete">
       <div>Delete Local File?</div>
       <div line my-8px></div>
 
       <div fx-cer justify-center space-x-10px>
-        <ab-button size="small" type="warn" @click="() => emitDisable(true)"
+        <ab-button size="small" type="warn" @click="() => emitdeleteFile(true)"
           >Yes</ab-button
         >
-        <ab-button size="small" @click="() => emitDisable(false)">No</ab-button>
+        <ab-button size="small" @click="() => emitdeleteFile(false)"
+          >No</ab-button
+        >
       </div>
     </ab-popup>
   </ab-popup>

src/pages/index/bangumi.vue

@@ -2,7 +2,7 @@
 import type { BangumiRule } from '#/bangumi';
 
 const { data } = storeToRefs(useBangumiStore());
-const { getAll, useUpdateRule, useDisableRule, useEnableRule } =
+const { getAll, useUpdateRule, useDisableRule, useEnableRule, useDeleteRule } =
   useBangumiStore();
 
 const editRule = reactive<{
@@ -47,6 +47,7 @@ const { execute: updateRule, onResult: onUpdateRuleResult } = useUpdateRule();
 const { execute: enableRule, onResult: onEnableRuleResult } = useEnableRule();
 const { execute: disableRule, onResult: onDisableRuleResult } =
   useDisableRule();
+const { execute: deleteRule, onResult: onDeleteRuleResult } = useDeleteRule();
 
 onUpdateRuleResult(() => {
   refresh();
@@ -60,10 +61,27 @@ onEnableRuleResult(() => {
   refresh();
 });
 
+onDeleteRuleResult(() => {
+  refresh();
+});
+
 onActivated(() => {
   getAll();
 });
 
+function ruleManage(
+  type: 'disable' | 'delete',
+  id: number,
+  deleteFile: boolean
+) {
+  if (type === 'disable') {
+    disableRule(id, deleteFile);
+  }
+  if (type === 'delete') {
+    deleteRule(id, deleteFile);
+  }
+}
+
 definePage({
   name: 'Bangumi List',
 });
@@ -85,7 +103,9 @@ definePage({
       v-model:show="editRule.show"
       v-model:rule="editRule.item"
       @enable="(id) => enableRule(id)"
-      @disable="({ id, deleteFile }) => disableRule(id, deleteFile)"
+      @delete-file="
+        (type, { id, deleteFile }) => ruleManage(type, id, deleteFile)
+      "
       @apply="(rule) => updateRule(rule)"
     ></ab-edit-rule>
   </div>

src/store/bangumi.ts

@@ -74,5 +74,30 @@ export const useBangumiStore = defineStore('bangumi', () => {
     };
   }
 
-  return { data, getAll, useUpdateRule, useDisableRule, useEnableRule };
+  function useDeleteRule() {
+    const { execute, onResult } = useApi(apiBangumi.deleteRule, {
+      failRule: (data) => {
+        return data.status !== 'success';
+      },
+      message: {
+        success: 'Delete Success!',
+        fail: 'Delete Failed!',
+        error: 'Operation Failed!',
+      },
+    });
+
+    return {
+      execute,
+      onResult,
+    };
+  }
+
+  return {
+    data,
+    getAll,
+    useUpdateRule,
+    useDisableRule,
+    useEnableRule,
+    useDeleteRule,
+  };
 });

types/dts/components.d.ts

@@ -9,34 +9,34 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    AbAdd: typeof import('./components/basic/ab-add.vue')['default']
-    AbAddBangumi: typeof import('./components/ab-add-bangumi.vue')['default']
-    AbBangumiCard: typeof import('./components/ab-bangumi-card.vue')['default']
-    AbButton: typeof import('./components/basic/ab-button.vue')['default']
-    AbChangeAccount: typeof import('./components/ab-change-account.vue')['default']
-    AbCheckbox: typeof import('./components/basic/ab-checkbox.vue')['default']
-    AbContainer: typeof import('./components/ab-container.vue')['default']
-    AbEditRule: typeof import('./components/ab-edit-rule.vue')['default']
-    AbFoldPanel: typeof import('./components/ab-fold-panel.vue')['default']
-    AbLabel: typeof import('./components/ab-label.vue')['default']
-    AbPageTitle: typeof import('./components/basic/ab-page-title.vue')['default']
-    AbPopup: typeof import('./components/ab-popup.vue')['default']
-    AbRule: typeof import('./components/ab-rule.vue')['default']
-    AbSearch: typeof import('./components/basic/ab-search.vue')['default']
-    AbSelect: typeof import('./components/basic/ab-select.vue')['default']
-    AbSetting: typeof import('./components/ab-setting.vue')['default']
-    AbSidebar: typeof import('./components/layout/ab-sidebar.vue')['default']
-    AbStatus: typeof import('./components/basic/ab-status.vue')['default']
-    AbStatusBar: typeof import('./components/ab-status-bar.vue')['default']
-    AbSwitch: typeof import('./components/basic/ab-switch.vue')['default']
-    AbTopbar: typeof import('./components/layout/ab-topbar.vue')['default']
-    ConfigDownload: typeof import('./components/setting/config-download.vue')['default']
-    ConfigManage: typeof import('./components/setting/config-manage.vue')['default']
-    ConfigNormal: typeof import('./components/setting/config-normal.vue')['default']
-    ConfigNotification: typeof import('./components/setting/config-notification.vue')['default']
-    ConfigParser: typeof import('./components/setting/config-parser.vue')['default']
-    ConfigPlayer: typeof import('./components/setting/config-player.vue')['default']
-    ConfigProxy: typeof import('./components/setting/config-proxy.vue')['default']
+    AbAdd: typeof import('./../../src/components/basic/ab-add.vue')['default']
+    AbAddBangumi: typeof import('./../../src/components/ab-add-bangumi.vue')['default']
+    AbBangumiCard: typeof import('./../../src/components/ab-bangumi-card.vue')['default']
+    AbButton: typeof import('./../../src/components/basic/ab-button.vue')['default']
+    AbChangeAccount: typeof import('./../../src/components/ab-change-account.vue')['default']
+    AbCheckbox: typeof import('./../../src/components/basic/ab-checkbox.vue')['default']
+    AbContainer: typeof import('./../../src/components/ab-container.vue')['default']
+    AbEditRule: typeof import('./../../src/components/ab-edit-rule.vue')['default']
+    AbFoldPanel: typeof import('./../../src/components/ab-fold-panel.vue')['default']
+    AbLabel: typeof import('./../../src/components/ab-label.vue')['default']
+    AbPageTitle: typeof import('./../../src/components/basic/ab-page-title.vue')['default']
+    AbPopup: typeof import('./../../src/components/ab-popup.vue')['default']
+    AbRule: typeof import('./../../src/components/ab-rule.vue')['default']
+    AbSearch: typeof import('./../../src/components/basic/ab-search.vue')['default']
+    AbSelect: typeof import('./../../src/components/basic/ab-select.vue')['default']
+    AbSetting: typeof import('./../../src/components/ab-setting.vue')['default']
+    AbSidebar: typeof import('./../../src/components/layout/ab-sidebar.vue')['default']
+    AbStatus: typeof import('./../../src/components/basic/ab-status.vue')['default']
+    AbStatusBar: typeof import('./../../src/components/ab-status-bar.vue')['default']
+    AbSwitch: typeof import('./../../src/components/basic/ab-switch.vue')['default']
+    AbTopbar: typeof import('./../../src/components/layout/ab-topbar.vue')['default']
+    ConfigDownload: typeof import('./../../src/components/setting/config-download.vue')['default']
+    ConfigManage: typeof import('./../../src/components/setting/config-manage.vue')['default']
+    ConfigNormal: typeof import('./../../src/components/setting/config-normal.vue')['default']
+    ConfigNotification: typeof import('./../../src/components/setting/config-notification.vue')['default']
+    ConfigParser: typeof import('./../../src/components/setting/config-parser.vue')['default']
+    ConfigPlayer: typeof import('./../../src/components/setting/config-player.vue')['default']
+    ConfigProxy: typeof import('./../../src/components/setting/config-proxy.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }