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

fengtao
1 parent 64cfe362
Showing 2 changed files with 55 additions and 86 deletions
src/views/alarm/config/config.data.ts
src/views/alarm/config/index.vue
--- a/src/views/alarm/config/config.data.ts
View file @8fca840
+++ b/src/views/alarm/config/config.data.ts
View file @8fca840
@@ -3,10 +3,6 @@ import { getOrganizationList } from '/@/api/system/system';
 import { copyTransFun } from '/@/utils/fnUtils';
 import { findDictItemByCode } from '/@/api/system/dict';
 import { alarmContactGetPage } from '/@/api/device/deviceConfigApi';
-import { Switch } from 'ant-design-vue';
-import { h } from 'vue';
-import { putAlarmConfigStatus } from '/@/api/alarm/config/alarmConfig';
-import { useMessage } from '/@/hooks/web/useMessage';
 // 表格列数据
 export const columns: BasicColumn[] = [
@@ -36,34 +32,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();
-          putAlarmConfigStatus(newStatus, record.id)
-            .then(() => {
-              record.status = newStatus;
-              if (record.status == 1) {
-                createMessage.success(`启用`);
-              } else {
-                createMessage.success('未启用');
-              }
-            })
-            .finally(() => {
-              record.pendingStatus = false;
-            });
-        },
-      });
-    },
+    slots: { customRender: 'status' },
   },
   {
     title: '备注',
--- a/src/views/alarm/config/index.vue
View file @8fca840
+++ b/src/views/alarm/config/index.vue
View file @8fca840
@@ -9,8 +9,6 @@
       <BasicTable
         @register="registerTable"
         :searchInfo="searchInfo"
-        @selection-change="useSelectionChange"
-        :rowSelection="{ type: 'checkbox' }"
         class="w-3/4 xl:w-4/5"
         :clickToRowSelect="false"
       >
@@ -35,6 +33,15 @@
             查看联系方式
           </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="[
@@ -68,10 +75,9 @@
 </template>
 <script lang="ts">
-  import { defineComponent, reactive, ref, h } from 'vue';
+  import { defineComponent, reactive, h } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { PageWrapper } from '/@/components/Page';
-  import { useMessage } from '/@/hooks/web/useMessage';
   import { useDrawer } from '/@/components/Drawer';
   import ContactDrawer from './ContactDrawer.vue';
   import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
@@ -81,6 +87,10 @@
   import { JsonPreview } from '/@/components/CodeEditor';
   import { findDictItemByCode } from '/@/api/system/dict';
   import { alarmContactGetPage } from '/@/api/device/deviceConfigApi';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { Switch } from 'ant-design-vue';
+  import { putAlarmConfigStatus } from '/@/api/alarm/config/alarmConfig';
+  import { useMessage } from '/@/hooks/web/useMessage';
   export default defineComponent({
     components: {
@@ -89,18 +99,30 @@
       BasicTable,
       TableAction,
       ContactDrawer,
+      Switch,
     },
     setup() {
-      let selectArray: any = [];
-      const hasBatchDelete = ref(true);
       const searchInfo = reactive<Recordable>({});
       const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
+      // 刷新
+      const handleSuccess = () => {
+        reload();
+      };
+      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
+        useBatchDelete(deleteAlarmConfig, handleSuccess);
+      selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
+        // Demo:status为1的选择框禁用
+        if (record.status === 1) {
+          return { disabled: true };
+        } else {
+          return { disabled: false };
+        }
+      };
       // 表格hooks
-      const [registerTable, { reload, getSelectRows, getSelectRowKeys }] = useTable({
+      const [registerTable, { reload, setProps, setSelectedRowKeys }] = useTable({
         title: '告警配置列表',
         api: queryAlarmConfig,
         columns,
-        clickToRowSelect: false,
         showIndexColumn: false,
         formConfig: {
           labelWidth: 120,
@@ -110,7 +132,6 @@
         useSearchForm: true,
         showTableSetting: true,
         bordered: true,
-        rowKey: 'id',
         actionColumn: {
           width: 200,
           title: '操作',
@@ -118,15 +139,11 @@
           slots: { customRender: 'action' },
           fixed: 'right',
         },
+        ...selectionOptions,
       });
       // 弹框
       const [registerDrawer, { openDrawer }] = useDrawer();
-      const { createMessage } = useMessage();
-      // 刷新
-      const handleSuccess = () => {
-        reload();
-      };
       // 新增或编辑
       const handleCreateOrEdit = (record: Recordable | null) => {
         if (record) {
@@ -140,45 +157,6 @@
           });
         }
       };
-      const useSelectionChange = () => {
-        selectArray = getSelectRowKeys();
-        if (selectArray.length > 0) {
-          hasBatchDelete.value = false;
-        }
-        let getRows = getSelectRows();
-        const isJudge = getRows.map((m) => m.status);
-        if (isJudge.length === 0) {
-          hasBatchDelete.value = true;
-        }
-        if (isJudge.includes(1) && isJudge.includes(0)) {
-          hasBatchDelete.value = true;
-        } else if (isJudge.includes(1) && !isJudge.includes(0)) {
-          hasBatchDelete.value = true;
-        } else if (!isJudge.includes(1) && isJudge.includes(0)) {
-          hasBatchDelete.value = false;
-        }
-      };
-      // 删除或批量删除
-      const handleDeleteOrBatchDelete = async (record: Recordable | null) => {
-        if (record) {
-          try {
-            await deleteAlarmConfig([record.id]);
-            createMessage.success('删除成功');
-            handleSuccess();
-          } catch (e: any) {}
-        } else {
-          try {
-            await deleteAlarmConfig(selectArray);
-            createMessage.success('批量删除成功');
-            handleSuccess();
-            selectArray.length = 0;
-          } catch (e: any) {
-            selectArray.length = 0;
-          } finally {
-            selectArray.length = 0;
-          }
-        }
-      };
       // 树形选择器
       const handleSelect = (organizationId: string) => {
@@ -226,8 +204,29 @@
           content: h(JsonPreview, { data: JSON.parse(JSON.stringify(arr4)) }),
         });
       };
+      const statusChange = async (checked, record) => {
+        setProps({
+          loading: true,
+        });
+        setSelectedRowKeys([]);
+        resetSelectedRowKeys();
+        const newStatus = checked ? 1 : 0;
+        const { createMessage } = useMessage();
+        try {
+          await putAlarmConfigStatus(newStatus, record.id);
+          if (newStatus) {
+            createMessage.success(`启用成功`);
+          } else {
+            createMessage.success('禁用成功');
+          }
+        } finally {
+          setProps({
+            loading: false,
+          });
+          reload();
+        }
+      };
       return {
-        useSelectionChange,
         searchInfo,
         hasBatchDelete,
         handleCreateOrEdit,
@@ -239,6 +238,7 @@
         organizationIdTreeRef,
         showAlarmContact,
         showMessageMode,
+        statusChange,
       };
     },
   });