fix[DEFECT-335]修改消息配置批量删除问题

fengtao
1 parent 40c8b6c9
Showing 4 changed files with 115 additions and 170 deletions
src/views/message/config/config.data.ts
src/views/message/config/index.vue
src/views/message/template/index.vue
src/views/message/template/template.data.ts
--- a/src/views/message/config/config.data.ts
View file @045e3a9
+++ b/src/views/message/config/config.data.ts
View file @045e3a9
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
-import { h } from 'vue';
-import { Switch } from 'ant-design-vue';
-import { setMessageConfigStatus } from '/@/api/message/config';
-import { useMessage } from '/@/hooks/web/useMessage';
 import { findDictItemByCode } from '/@/api/system/dict';
 import { MessageEnum } from '/@/enums/messageEnum';
 export const columns: BasicColumn[] = [
@@ -32,30 +28,7 @@ export const columns: BasicColumn[] = [
     title: '状态',
     dataIndex: 'status',
     width: 120,
-    customRender: ({ record }) => {
-      if (!Reflect.has(record, 'pendingStatus')) {
-        record.pendingStatus = false;
-      }
-      return h(Switch, {
-        checked: record.status === 1,
-        checkedChildren: '已启用',
-        unCheckedChildren: '已禁用',
-        loading: record.pendingStatus,
-        onChange(checked: boolean) {
-          record.pendingStatus = true;
-          const newStatus = checked ? 1 : 0;
-          const { createMessage } = useMessage();
-          setMessageConfigStatus(record.id, record.messageType, newStatus, record.tenantId)
-            .then(() => {
-              record.status = newStatus;
-              createMessage.success(`修改成功`);
-            })
-            .finally(() => {
-              record.pendingStatus = false;
-            });
-        },
-      });
-    },
+    slots: { customRender: 'status' },
   },
   {
     title: '创建时间',
--- a/src/views/message/config/index.vue
View file @045e3a9
+++ b/src/views/message/config/index.vue
View file @045e3a9
 <template>
   <div>
-    <BasicTable
-      @selection-change="useSelectionChange"
-      :rowSelection="{ type: 'checkbox' }"
-      @register="registerTable"
-      :clickToRowSelect="false"
-    >
+    <BasicTable @register="registerTable" :clickToRowSelect="false">
       <template #toolbar>
         <a-button type="primary" @click="handleCreate"> 新增消息配置 </a-button>
-        <a-button color="error" @click="handleDeleteOrBatchDelete(null)" :disabled="disabled">
+        <a-button color="error" @click="handleDeleteOrBatchDelete(null)" :disabled="hasBatchDelete">
           批量删除
         </a-button>
       </template>
       <template #config="{ record }">
         <a-button type="link" class="ml-2" @click="showData(record)"> 查看配置 </a-button>
       </template>
+      <template #status="{ record }">
+        <Switch
+          :checked="record.status === 1"
+          :loading="record.pendingStatus"
+          checkedChildren="启用"
+          unCheckedChildren="禁用"
+          @change="(checked:boolean)=>statusChange(checked,record)"
+        />
+      </template>
       <template #action="{ record }">
         <TableAction
           :actions="[
@@ -41,7 +45,7 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, h, ref } from 'vue';
+  import { defineComponent, h } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { messageConfigPage, deleteMessageConfig } from '/@/api/message/config';
   import { useDrawer } from '/@/components/Drawer';
@@ -50,17 +54,29 @@
   import { Modal } from 'ant-design-vue';
   import { JsonPreview } from '/@/components/CodeEditor';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { Switch } from 'ant-design-vue';
+  import { setMessageConfigStatus } from '/@/api/message/config';
   export default defineComponent({
     name: 'MessageConfigManagement',
-    components: { BasicTable, ConfigDrawer, TableAction },
+    components: { BasicTable, ConfigDrawer, TableAction, Switch },
     setup() {
-      let selectedRowKeys: any = [];
-      const disabled = ref(true);
-      const { createMessage } = useMessage();
-
       const [registerDrawer, { openDrawer }] = useDrawer();
-      const [registerTable, { reload, getSelectRows, getSelectRowKeys }] = useTable({
+      function handleSuccess() {
+        reload();
+      }
+      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
+        useBatchDelete(deleteMessageConfig, handleSuccess);
+      selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
+        // Demo:status为1的选择框禁用
+        if (record.status === 1) {
+          return { disabled: true };
+        } else {
+          return { disabled: false };
+        }
+      };
+      const [registerTable, { reload, setProps, setSelectedRowKeys }] = useTable({
         title: '消息配置列表',
         api: messageConfigPage,
         columns,
@@ -69,7 +85,6 @@
           schemas: searchFormSchema,
         },
         useSearchForm: true,
-        rowKey: 'id',
         showTableSetting: true,
         bordered: true,
         showIndexColumn: false,
@@ -80,6 +95,7 @@
           slots: { customRender: 'action' },
           fixed: 'right',
         },
+        ...selectionOptions,
       });
       function handleCreate() {
@@ -95,9 +111,6 @@
         });
       }
-      function handleSuccess() {
-        reload();
-      }
       function showData(record: Recordable) {
         Modal.info({
           title: '当前配置',
@@ -107,43 +120,29 @@
           content: h(JsonPreview, { data: JSON.parse(JSON.stringify(record.config)) }),
         });
       }
-
-      const useSelectionChange = () => {
-        selectedRowKeys = getSelectRowKeys();
-        if (selectedRowKeys.length > 0) {
-          disabled.value = false;
-        }
-        const isJudge = getSelectRows().map((m) => m.status);
-        if (isJudge.includes(1)) {
-          disabled.value = true;
-        } else {
-          disabled.value = false;
-        }
-        if (isJudge.length === 0) {
-          disabled.value = true;
-        }
-      };
-      // 删除或批量删除
-      const handleDeleteOrBatchDelete = async (record: Recordable | null) => {
-        if (record) {
-          try {
-            await deleteMessageConfig([record.id]);
-            createMessage.success('删除成功');
-            handleSuccess();
-          } catch (e: any) {}
-        } else {
-          try {
-            await deleteMessageConfig(selectedRowKeys);
-            createMessage.success('批量删除成功');
-            handleSuccess();
-            selectedRowKeys.length = 0;
-          } catch (e: any) {
-            selectedRowKeys.length = 0;
-          } finally {
-            selectedRowKeys.length = 0;
+      const statusChange = async (checked, record) => {
+        setProps({
+          loading: true,
+        });
+        setSelectedRowKeys([]);
+        resetSelectedRowKeys();
+        const newStatus = checked ? 1 : 0;
+        const { createMessage } = useMessage();
+        try {
+          await setMessageConfigStatus(record.id, record.messageType, newStatus, record.tenantId);
+          if (newStatus) {
+            createMessage.success(`启用成功`);
+          } else {
+            createMessage.success('禁用成功');
           }
+        } finally {
+          setProps({
+            loading: false,
+          });
+          reload();
         }
       };
+
       return {
         registerTable,
         registerDrawer,
@@ -151,9 +150,9 @@
         handleCreate,
         handleEdit,
         handleSuccess,
-        disabled,
         handleDeleteOrBatchDelete,
-        useSelectionChange,
+        hasBatchDelete,
+        statusChange,
       };
     },
   });
--- a/src/views/message/template/index.vue
View file @045e3a9
+++ b/src/views/message/template/index.vue
View file @045e3a9
 <template>
   <div>
-    <BasicTable
-      @selection-change="useSelectionChange"
-      :rowSelection="{ type: 'checkbox' }"
-      @register="registerTable"
-      :clickToRowSelect="false"
-    >
+    <BasicTable @register="registerTable" :clickToRowSelect="false">
       <template #toolbar>
         <a-button type="primary" @click="handleCreate"> 新增消息模板 </a-button>
-        <a-button color="error" @click="handleDeleteOrBatchDelete(null)" :disabled="disabled">
+        <a-button color="error" @click="handleDeleteOrBatchDelete(null)" :disabled="hasBatchDelete">
           批量删除
         </a-button>
       </template>
@@ -17,6 +12,15 @@
           {{ record.messageConfig?.configName }}
         </a-button>
       </template>
+      <template #status="{ record }">
+        <Switch
+          :checked="record.status === 1"
+          :loading="record.pendingStatus"
+          checkedChildren="启用"
+          unCheckedChildren="禁用"
+          @change="(checked:boolean)=>statusChange(checked,record)"
+        />
+      </template>
       <template #action="{ record }">
         <TableAction
           :actions="[
@@ -49,7 +53,7 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, ref } from 'vue';
+  import { defineComponent } from 'vue';
   import { BasicTable, TableAction, useTable } from '/@/components/Table';
   import { useDrawer } from '/@/components/Drawer';
   import TemplateDrawer from './TemplateDrawer.vue';
@@ -62,20 +66,32 @@
   import { MessageEnum } from '/@/enums/messageEnum';
   import SendEmail from '/@/views/message/template/SendEmail.vue';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { Switch } from 'ant-design-vue';
+  import { setMessageTemplateStatus } from '/@/api/message/template';
   export default defineComponent({
     name: 'MessageTemplateManagement',
-    components: { SendSms, SendEmail, BasicTable, TemplateDrawer, TableAction },
+    components: { SendSms, SendEmail, BasicTable, TemplateDrawer, TableAction, Switch },
     setup() {
-      let selectedRowKeys: any = [];
-      const disabled = ref(true);
-      const { createMessage } = useMessage();
       const [registerModal, { openModal: openModal }] = useModal();
       const [registerMailModal, { openModal: openMailModal }] = useModal();
       const go = useGo();
+      function handleSuccess() {
+        reload();
+      }
       const [registerDrawer, { openDrawer }] = useDrawer();
-
-      const [registerTable, { reload, getSelectRows, getSelectRowKeys }] = useTable({
+      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
+        useBatchDelete(deleteMessageTemplate, handleSuccess);
+      selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
+        // Demo:status为1的选择框禁用
+        if (record.status === 1) {
+          return { disabled: true };
+        } else {
+          return { disabled: false };
+        }
+      };
+      const [registerTable, { reload, setProps, setSelectedRowKeys }] = useTable({
         title: '消息模板列表',
         api: messageTemplatePage,
         columns,
@@ -83,7 +99,6 @@
           labelWidth: 120,
           schemas: searchFormSchema,
         },
-        rowKey: 'id',
         useSearchForm: true,
         showTableSetting: true,
         bordered: true,
@@ -95,6 +110,7 @@
           slots: { customRender: 'action' },
           fixed: 'right',
         },
+        ...selectionOptions,
       });
       function handleCreate() {
@@ -130,46 +146,37 @@
           });
         }
       }
-      function handleSuccess() {
-        reload();
-      }
+
       function goConfig() {
         go(PageEnum.MESSAGE_CONFIG);
       }
-      const useSelectionChange = () => {
-        selectedRowKeys = getSelectRowKeys();
-        if (selectedRowKeys.length > 0) {
-          disabled.value = false;
-        }
-        const isJudge = getSelectRows().map((m) => m.status);
-        if (isJudge.includes(1)) {
-          disabled.value = true;
-        } else {
-          disabled.value = false;
-        }
-        if (isJudge.length === 0) {
-          disabled.value = true;
-        }
-      };
-      // 删除或批量删除
-      const handleDeleteOrBatchDelete = async (record: Recordable | null) => {
-        if (record) {
-          try {
-            await deleteMessageTemplate([record.id]);
-            createMessage.success('删除成功');
-            handleSuccess();
-          } catch (e: any) {}
-        } else {
-          try {
-            await deleteMessageTemplate(selectedRowKeys);
-            createMessage.success('批量删除成功');
-            handleSuccess();
-            selectedRowKeys.length = 0;
-          } catch (e: any) {
-            selectedRowKeys.length = 0;
-          } finally {
-            selectedRowKeys.length = 0;
+      const statusChange = async (checked, record) => {
+        setProps({
+          loading: true,
+        });
+        setSelectedRowKeys([]);
+        resetSelectedRowKeys();
+        const newStatus = checked ? 1 : 0;
+        const { createMessage } = useMessage();
+        try {
+          const { id, templatePurpose, messageType, tenantId } = record;
+          await setMessageTemplateStatus({
+            id,
+            templatePurpose,
+            messageType,
+            tenantId,
+            status: newStatus,
+          });
+          if (newStatus) {
+            createMessage.success(`启用成功`);
+          } else {
+            createMessage.success('禁用成功');
           }
+        } finally {
+          setProps({
+            loading: false,
+          });
+          reload();
         }
       };
       return {
@@ -182,9 +189,9 @@
         handleSuccess,
         handleModal,
         goConfig,
-        useSelectionChange,
-        disabled,
         handleDeleteOrBatchDelete,
+        statusChange,
+        hasBatchDelete,
       };
     },
   });
--- a/src/views/message/template/template.data.ts
View file @045e3a9
+++ b/src/views/message/template/template.data.ts
View file @045e3a9
@@ -3,10 +3,6 @@ import { FormSchema } from '/@/components/Table';
 import { findDictItemByCode } from '/@/api/system/dict';
 import { findMessageConfig } from '/@/api/message/config';
 import { isMessage } from '/@/views/message/config/config.data';
-import { h } from 'vue';
-import { Switch } from 'ant-design-vue';
-import { useMessage } from '/@/hooks/web/useMessage';
-import { setMessageTemplateStatus } from '/@/api/message/template';
 export const columns: BasicColumn[] = [
   {
@@ -44,37 +40,7 @@ export const columns: BasicColumn[] = [
     title: '状态',
     dataIndex: 'status',
     width: 100,
-    customRender: ({ record }) => {
-      if (!Reflect.has(record, 'pendingStatus')) {
-        record.pendingStatus = false;
-      }
-      return h(Switch, {
-        checked: record.status === 1,
-        checkedChildren: '已启用',
-        unCheckedChildren: '已禁用',
-        loading: record.pendingStatus,
-        onChange(checked: boolean) {
-          const { id, templatePurpose, messageType, tenantId } = record;
-          record.pendingStatus = true;
-          const newStatus = checked ? 1 : 0;
-          const { createMessage } = useMessage();
-          setMessageTemplateStatus({
-            id,
-            templatePurpose,
-            messageType,
-            tenantId,
-            status: newStatus,
-          })
-            .then(() => {
-              record.status = newStatus;
-              createMessage.success(`修改成功`);
-            })
-            .finally(() => {
-              record.pendingStatus = false;
-            });
-        },
-      });
-    },
+    slots: { customRender: 'status' },
   },
   {
     title: '模板用途',