Merge branch 'ft-dev' into 'main'

fix:把批量删除修改为统一封装形式，移除我之前单独写的批量删除代码

See merge request huang/yun-teng-iot-front!210

@@ -75,10 +75,9 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, reactive, ref, computed } from 'vue';
+  import { defineComponent, reactive, nextTick } from 'vue';
   import { BasicTable, useTable, TableAction, TableImg } from '/@/components/Table';
   import { PageWrapper } from '/@/components/Page';
-  import { useMessage } from '/@/hooks/web/useMessage';
   import { useDrawer } from '/@/components/Drawer';
   import CameraDrawer from './CameraDrawer.vue';
   import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
@@ -87,6 +86,7 @@
   import VideoPreviewModal from './DialogPreviewVideo.vue';
   import { useModal } from '/@/components/Modal';
   import { Authority } from '/@/components/Authority';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
 
   export default defineComponent({
     components: {
@@ -100,22 +100,11 @@
       Authority,
     },
     setup() {
-      let selectedRowIds = ref<string[]>([]);
-      const hasBatchDelete = ref(true);
-      // 复选框事件
-      const onSelectRowChange = (selectedRowKeys: string[]) => {
-        selectedRowIds.value = selectedRowKeys;
-        if (selectedRowIds.value.length > 0) {
-          hasBatchDelete.value = false;
-        } else {
-          hasBatchDelete.value = true;
-        }
-      };
       const searchInfo = reactive<Recordable>({});
       const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
       const [registerModal, { openModal }] = useModal();
       // 表格hooks
-      const [registerTable, { reload }] = useTable({
+      const [registerTable, { reload, setProps }] = useTable({
         title: '视频列表',
         api: cameraPage,
         columns,
@@ -129,10 +118,6 @@
         useSearchForm: true,
         showTableSetting: true,
         bordered: true,
-        rowSelection: {
-          onChange: onSelectRowChange,
-          type: 'checkbox',
-        },
         rowKey: 'id',
         actionColumn: {
           width: 200,
@@ -144,12 +129,20 @@
       });
       // 弹框
       const [registerDrawer, { openDrawer }] = useDrawer();
-      const { createMessage } = useMessage();
 
       // 刷新
       const handleSuccess = () => {
         reload();
       };
+      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
+        deleteCameraManage,
+        handleSuccess,
+        setProps
+      );
+
+      nextTick(() => {
+        setProps(selectionOptions);
+      });
       // 新增或编辑
       const handleCreateOrEdit = (record: Recordable | null) => {
         if (record) {
@@ -163,27 +156,6 @@
           });
         }
       };
-      // 删除或批量删除
-      const handleDeleteOrBatchDelete = async (record: Recordable | null) => {
-        if (record) {
-          try {
-            await deleteCameraManage([record.id]);
-            createMessage.success('删除视频成功');
-            handleSuccess();
-          } catch (e) {}
-        } else {
-          hasBatchDelete.value = true;
-          try {
-            await deleteCameraManage(selectedRowIds.value);
-            createMessage.success('批量删除视频成功');
-            selectedRowIds.value = [];
-            handleSuccess();
-            setTimeout(() => {
-              hasBatchDelete.value = false;
-            }, 3000);
-          } catch (e) {}
-        }
-      };
 
       // 树形选择器
       const handleSelect = (organizationId: string) => {

@@ -15,7 +15,12 @@
           <a-button disabled @click="handleImport"> 导入设备配置 </a-button>
         </ImpExcel>
         <Authority value="api:yt:admin:deleteDeviceConfig">
-          <a-button danger color="error" @click="handleTableDel" :disabled="disabled">
+          <a-button
+            type="primary"
+            color="error"
+            @click="handleDeleteOrBatchDelete(null)"
+            :disabled="hasBatchDelete"
+          >
             批量删除
           </a-button>
         </Authority>
@@ -67,7 +72,7 @@
               color: 'error',
               popConfirm: {
                 title: '是否确认删除',
-                confirm: handleDelete.bind(null, record),
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
               },
               ifShow: () => {
                 return record.default === false;
@@ -96,6 +101,7 @@
   import { ImpExcel, ExcelData } from '/@/components/Excel';
   // import { jsonToSheetXlsx, ExportModalResult } from '/@/components/Excel';
   import { Authority } from '/@/components/Authority';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
 
   export default defineComponent({
     name: 'DeviceProfileManagement',
@@ -112,31 +118,45 @@
       const { createMessage } = useMessage();
       const [registerModal, { openModal }] = useModal();
       const [registerModalDetail] = useModal();
-      const [registerTable, { reload, getSelectRows, setTableData, getForm, getSelectRowKeys }] =
-        useTable({
-          title: '设备配置列表',
-          clickToRowSelect: false,
-          api: deviceConfigGetQuery,
-          immediate: immediateStatus.value,
-          columns,
-          formConfig: {
-            labelWidth: 120,
-            schemas: searchFormSchema,
-          },
-          rowKey: 'id',
-          useSearchForm: true,
-          showTableSetting: true,
-          bordered: true,
-          showIndexColumn: false,
-          actionColumn: {
-            width: 240,
-            title: '操作',
-            dataIndex: 'action',
-            slots: { customRender: 'action' },
-            fixed: 'right',
-          },
-        });
-
+      const [
+        registerTable,
+        { setProps, reload, getSelectRows, setTableData, getForm, getSelectRowKeys },
+      ] = useTable({
+        title: '设备配置列表',
+        clickToRowSelect: false,
+        api: deviceConfigGetQuery,
+        immediate: immediateStatus.value,
+        columns,
+        formConfig: {
+          labelWidth: 120,
+          schemas: searchFormSchema,
+        },
+        rowKey: 'id',
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        showIndexColumn: false,
+        actionColumn: {
+          width: 240,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+          fixed: 'right',
+        },
+      });
+      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
+        useBatchDelete(deviceConfigDelete, handleSuccess, setProps);
+      selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
+        // Demo:status为1的选择框禁用
+        if (record.default === true) {
+          return { disabled: true };
+        } else {
+          return { disabled: false };
+        }
+      };
+      nextTick(() => {
+        setProps(selectionOptions);
+      });
       /**
        *@param url,name
        **/
@@ -251,26 +271,26 @@
           disabled.value = true;
         }
       };
-      const handleTableDel = () => {
-        disabled.value = true;
-        deviceConfigDelete(selectedRowKeys)
-          .then(() => {
-            createMessage.success('删除设备配置成功');
-            handleSuccess();
-            setTimeout(() => {
-              disabled.value = false;
-            }, 3000);
-            selectedRowKeys.length = 0;
-          })
-          .catch((e) => {
-            selectedRowKeys.length = 0;
-            setTimeout(() => {
-              disabled.value = false;
-            }, 3000);
-            createMessage.error(e);
-          });
-        selectedRowKeys.length = 0;
-      };
+      // const handleTableDel = () => {
+      //   disabled.value = true;
+      //   deviceConfigDelete(selectedRowKeys)
+      //     .then(() => {
+      //       createMessage.success('删除设备配置成功');
+      //       handleSuccess();
+      //       setTimeout(() => {
+      //         disabled.value = false;
+      //       }, 3000);
+      //       selectedRowKeys.length = 0;
+      //     })
+      //     .catch((e) => {
+      //       selectedRowKeys.length = 0;
+      //       setTimeout(() => {
+      //         disabled.value = false;
+      //       }, 3000);
+      //       createMessage.error(e);
+      //     });
+      //   selectedRowKeys.length = 0;
+      // };
 
       function handleDelete(record: Recordable) {
         let ids = [record.id];
@@ -304,6 +324,7 @@
       function handleSuccess() {
         reload();
       }
+
       const handleSetDefault = async (record: Recordable) => {
         let id = record.id;
         const obj = {
@@ -337,7 +358,7 @@
         // register1,
         // defaultHeader,
         useSelectionChange,
-        handleTableDel,
+        // handleTableDel,
         tableListRef,
         loadDataSuccess,
         handleImport,
@@ -349,6 +370,8 @@
         handleDelete,
         handleSuccess,
         registerModal,
+        hasBatchDelete,
+        handleDeleteOrBatchDelete,
       };
     },
   });

@@ -13,11 +13,12 @@
         </Authority>
         <Authority value="api:yt:admin:deleteDataFlow">
           <a-button
-            :disabled="disabledStatus1"
-            @click="handleDelete"
-            :type="disabledStatus1 ? 'default' : 'primary'"
+            type="primary"
+            color="error"
+            @click="handleDeleteOrBatchDelete(null)"
+            :disabled="hasBatchDelete"
           >
-            <span :style="{ color: disabledStatus1 ? 'grey' : 'white' }">批量删除</span>
+            批量删除
           </a-button>
         </Authority>
         <a-button
@@ -55,7 +56,7 @@
               color: 'error',
               popConfirm: {
                 title: '是否确认删除',
-                confirm: handleSingleDelete.bind(null, record),
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
               },
               ifShow: (_action) => {
                 return record.status == 0;
@@ -94,7 +95,7 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, reactive, ref } from 'vue';
+  import { defineComponent, reactive, ref, nextTick } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { columns, searchFormSchema } from './config';
   import { useModal } from '/@/components/Modal';
@@ -106,6 +107,7 @@
   } from '/@/api/datamanager/dataManagerApi';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { Authority } from '/@/components/Authority';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
 
   export default defineComponent({
     name: 'Index',
@@ -123,10 +125,13 @@
       let selectedRowKeys: any = ref([]);
       let getSelectRowsArr: any = ref([]);
       let isJudgeSelectRowsArr: any = ref([]);
+      const handleSuccess = () => {
+        reload();
+      };
       const [registerModal, { openModal }] = useModal();
       const [
         registerTable,
-        { reload, getSelectRowKeys, getSelectRows, setLoading, clearSelectedRowKeys },
+        { setProps, reload, getSelectRowKeys, getSelectRows, setLoading, clearSelectedRowKeys },
       ] = useTable({
         title: '数据流转列表',
         clickToRowSelect: false,
@@ -149,6 +154,22 @@
           fixed: 'right',
         },
       });
+      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
+        deleteConvertApi,
+        handleSuccess,
+        setProps
+      );
+      selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
+        // Demo:status为1的选择框禁用
+        if (record.status === 1) {
+          return { disabled: true };
+        } else {
+          return { disabled: false };
+        }
+      };
+      nextTick(() => {
+        setProps(selectionOptions);
+      });
 
       //新增
       const handleAdd = () => {
@@ -159,9 +180,6 @@
         }, 10);
       };
 
-      const handleSuccess = () => {
-        reload();
-      };
       const handleEdit = (record: Recordable) => {
         setTimeout(() => {
           openModal(true, {
@@ -217,16 +235,6 @@
           setLoading(false);
         }
       };
-      const handleSingleDelete = async (record: Recordable) => {
-        try {
-          let ids = [record.id];
-          await deleteConvertApi(ids);
-          createMessage.success('删除成功');
-          reload();
-        } catch (e) {
-          return e;
-        }
-      };
       const useSelectionChange = () => {
         selectedRowKeys.value = getSelectRowKeys();
         isJudgeSelectRowsArr.value = getSelectRows();
@@ -262,35 +270,6 @@
           disabledStatus1.value = true;
         }
       };
-
-      const handleDelete = async () => {
-        try {
-          disabledStatus1.value = true;
-          setLoading(true);
-          const data = await deleteConvertApi(selectedRowKeys.value);
-          if (data == true) {
-            createMessage.success('删除成功');
-            setLoading(false);
-            setTimeout(() => {
-              disabledStatus1.value = false;
-            }, 3000);
-            reload();
-          } else {
-            createMessage.error('删除失败');
-          }
-        } catch (e: any) {
-          createMessage.error(e);
-          setTimeout(() => {
-            disabledStatus1.value = false;
-          }, 3000);
-        } finally {
-          setLoading(false);
-          clearSelectedRowKeys();
-          setTimeout(() => {
-            disabledStatus1.value = false;
-          }, 3000);
-        }
-      };
       const handleMutiuteDisable = async () => {
         enableObj.convertIds.length = 0;
         try {
@@ -354,15 +333,15 @@
         loading,
         registerTable,
         handleAdd,
-        handleDelete,
         registerModal,
         handleSuccess,
         handleEdit,
         handleEnableOrDisable,
-        handleSingleDelete,
         useSelectionChange,
         handleMutiuteDisable,
         handleDisable,
+        hasBatchDelete,
+        handleDeleteOrBatchDelete,
       };
     },
   });

@@ -44,9 +44,8 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, reactive, ref, computed, h } from 'vue';
+  import { defineComponent, reactive, h, nextTick } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { useMessage } from '/@/hooks/web/useMessage';
   import { useDrawer } from '/@/components/Drawer';
   import FeedbackDrawer from './FeedbackDrawer.vue';
   import { feedbackPage, deleteFeedbackManage } from '/@/api/feedback/feedbackManager';
@@ -55,6 +54,7 @@
   import { Modal } from 'ant-design-vue';
   import { JsonPreview } from '/@/components/CodeEditor';
   import { Authority } from '/@/components/Authority';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
 
   export default defineComponent({
     components: {
@@ -64,21 +64,10 @@
       Authority,
     },
     setup() {
-      let selectedRowIds = ref<string[]>([]);
-      const hasBatchDelete = ref(true);
-      // 复选框事件
-      const onSelectRowChange = (selectedRowKeys: string[]) => {
-        selectedRowIds.value = selectedRowKeys;
-        if (selectedRowIds.value.length > 0) {
-          hasBatchDelete.value = false;
-        } else {
-          hasBatchDelete.value = true;
-        }
-      };
       const searchInfo = reactive<Recordable>({});
       const [registerModal] = useModal();
       // 表格hooks
-      const [registerTable, { reload }] = useTable({
+      const [registerTable, { reload, setProps }] = useTable({
         title: '意见反馈列表',
         api: feedbackPage,
         columns,
@@ -91,10 +80,6 @@
         useSearchForm: true,
         showTableSetting: true,
         bordered: true,
-        rowSelection: {
-          onChange: onSelectRowChange,
-          type: 'checkbox',
-        },
         rowKey: 'id',
         actionColumn: {
           width: 200,
@@ -106,12 +91,20 @@
       });
       // 弹框
       const [registerDrawer, { openDrawer }] = useDrawer();
-      const { createMessage } = useMessage();
 
       // 刷新
       const handleSuccess = () => {
         reload();
       };
+      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
+        deleteFeedbackManage,
+        handleSuccess,
+        setProps
+      );
+
+      nextTick(() => {
+        setProps(selectionOptions);
+      });
       // 新增或编辑
       const handleCreateOrEdit = (record: Recordable | null) => {
         if (record) {
@@ -125,27 +118,6 @@
           });
         }
       };
-      // 删除或批量删除
-      const handleDeleteOrBatchDelete = async (record: Recordable | null) => {
-        if (record) {
-          try {
-            await deleteFeedbackManage([record.id]);
-            createMessage.success('删除成功');
-            handleSuccess();
-          } catch (e) {}
-        } else {
-          hasBatchDelete.value = true;
-          try {
-            await deleteFeedbackManage(selectedRowIds.value);
-            createMessage.success('批量删除成功');
-            selectedRowIds.value = [];
-            handleSuccess();
-            setTimeout(() => {
-              hasBatchDelete.value = false;
-            }, 3000);
-          } catch (e) {}
-        }
-      };
 
       // 树形选择器
       const handleSelect = (organizationId: string) => {

@@ -90,9 +90,13 @@
           roleMenus.value = await getMenusIdsByRoleId(data.record.id);
           originMenus.value = [...roleMenus.value];
           for (let item of treeData.value) {
-            pidArr.value.push(item.key);
+            if (item?.children != 0) {
+              pidArr.value.push(item.key);
+            }
             for (let item1 of item?.children) {
-              pidArr.value.push(item1.key);
+              if (item1?.children != 0) {
+                pidArr.value.push(item1.key);
+              }
             }
           }
           for (let item of roleMenus.value) {

@@ -11,11 +11,25 @@
           <a-button type="primary" @click="handleCreate">新增角色</a-button>
         </Authority>
         <Authority value="api:yt:admin:deleteSysRole">
-          <a-button color="error" @click="handleDeleteOrBatchDelete(null)" :disabled="isStatus">
+          <a-button
+            type="primary"
+            color="error"
+            @click="handleDeleteOrBatchDelete(null)"
+            :disabled="hasBatchDelete"
+          >
             批量删除
           </a-button>
         </Authority>
       </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="[
@@ -44,26 +58,27 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, ref } from 'vue';
+  import { defineComponent, nextTick } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { delRole, getRoleListByPage } from '/@/api/system/system';
+  import { delRole, getRoleListByPage, setRoleStatus } from '/@/api/system/system';
   import { useDrawer } from '/@/components/Drawer';
   import RoleDrawer from './RoleDrawer.vue';
   import { columns, searchFormSchema } from './role.data';
   import { RoleEnum } from '/@/enums/roleEnum';
-  import { useMessage } from '/@/hooks/web/useMessage';
   import { Authority } from '/@/components/Authority';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { Switch } from 'ant-design-vue';
 
   export default defineComponent({
     name: 'RoleManagement',
-    components: { BasicTable, RoleDrawer, TableAction, Authority },
+    components: { BasicTable, RoleDrawer, TableAction, Authority, Switch },
     setup() {
-      const { createMessage } = useMessage();
       const [registerDrawer, { openDrawer }] = useDrawer();
-      const isStatus = ref(true);
-      let selectArray: any = [];
-
-      const [registerTable, { reload, getSelectRows }] = useTable({
+      function handleSuccess() {
+        reload();
+      }
+      const [registerTable, { setProps, reload, setSelectedRowKeys }] = useTable({
         title: '角色列表',
         api: getRoleListByPage,
         columns,
@@ -83,6 +98,19 @@
           fixed: 'right',
         },
       });
+      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
+        useBatchDelete(delRole, handleSuccess, setProps);
+      selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
+        // Demo:status为1的选择框禁用
+        if (record.status === 1) {
+          return { disabled: true };
+        } else {
+          return { disabled: false };
+        }
+      };
+      nextTick(() => {
+        setProps(selectionOptions);
+      });
 
       function handleCreate() {
         openDrawer(true, {
@@ -96,52 +124,27 @@
           isUpdate: true,
         });
       }
-      function handleSuccess() {
-        reload();
-      }
 
-      const useSelectionChange = () => {
-        let getRows = getSelectRows();
-        const isJudge = getRows.map((m) => m.roleType);
-        if (isJudge.includes('SYS_ADMIN')) {
-          isStatus.value = true;
-        } else {
-          isStatus.value = false;
-        }
-        if (isJudge.length === 0) {
-          isStatus.value = true;
-        }
-        selectArray = getRows.filter((f) => f.status !== 'SYS_ADMIN').map((m) => m.id);
-      };
-
-      const handleDeleteOrBatchDelete = async (record: Recordable | null) => {
-        if (record) {
-          try {
-            await delRole([record.id]);
-            createMessage.success('删除成功');
-            handleSuccess();
-          } catch (e: any) {}
-        } else {
-          isStatus.value = true;
-          try {
-            await delRole(selectArray);
-            createMessage.success('批量删除成功');
-            handleSuccess();
-            selectArray.length = 0;
-            setTimeout(() => {
-              isStatus.value = false;
-            }, 3000);
-          } catch (e: any) {
-            selectArray.length = 0;
-            setTimeout(() => {
-              isStatus.value = false;
-            }, 3000);
-          } finally {
-            selectArray.length = 0;
-            setTimeout(() => {
-              isStatus.value = false;
-            }, 3000);
+      const statusChange = async (checked, record) => {
+        setProps({
+          loading: true,
+        });
+        setSelectedRowKeys([]);
+        resetSelectedRowKeys();
+        const newStatus = checked ? 1 : 0;
+        const { createMessage } = useMessage();
+        try {
+          await setRoleStatus(record.id, newStatus);
+          if (newStatus) {
+            createMessage.success(`启用成功`);
+          } else {
+            createMessage.success('禁用成功');
           }
+        } finally {
+          setProps({
+            loading: false,
+          });
+          reload();
         }
       };
 
@@ -152,9 +155,9 @@
         handleEdit,
         handleSuccess,
         RoleEnum,
+        hasBatchDelete,
         handleDeleteOrBatchDelete,
-        isStatus,
-        useSelectionChange,
+        statusChange,
       };
     },
   });

 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
-import { h } from 'vue';
-import { Switch } from 'ant-design-vue';
-import { setRoleStatus } from '/@/api/system/system';
-import { useMessage } from '/@/hooks/web/useMessage';
-import { getRoleListByPage } from '/@/api/system/system';
-import { USER_INFO_KEY } from '/@/enums/cacheEnum';
-import { getAuthCache } from '/@/utils/auth';
 
 export const columns: BasicColumn[] = [
   {
@@ -23,46 +16,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,
-        async onChange(checked: boolean) {
-          record.pendingStatus = true;
-          const newStatus = checked ? 1 : 0;
-          const { createMessage } = useMessage();
-          const data = await getRoleListByPage({
-            page: 1,
-            pageSize: 100,
-            // roleType: 'CUSTOMER_USER',
-          });
-          const userInfo = (await getAuthCache(USER_INFO_KEY)) as unknown as any;
-          const findById = data.items.find((f) => {
-            if (f.id === userInfo.plainRoles[0].roleId) {
-              return f.id;
-            }
-          });
-          if (record.id == findById?.id) return createMessage.error(`该租户下面有此客户，无法禁用`);
-          record.pendingStatus = true;
-          setRoleStatus(record.id, newStatus)
-            .then(() => {
-              record.status = newStatus;
-              createMessage.success(`已成功修改角色状态`);
-            })
-            .catch(() => {
-              createMessage.error('修改角色状态失败');
-            })
-            .finally(() => {
-              record.pendingStatus = false;
-            });
-        },
-      });
-    },
+    slots: { customRender: 'status' },
   },
 
   {

@@ -93,9 +93,13 @@
           roleMenus.value = await getMenusIdsByRoleId(data.record.id);
           originMenus.value = [...roleMenus.value];
           for (let item of treeData.value) {
-            pidArr.value.push(item.key);
+            if (item?.children != 0) {
+              pidArr.value.push(item.key);
+            }
             for (let item1 of item?.children) {
-              pidArr.value.push(item1.key);
+              if (item1?.children != 0) {
+                pidArr.value.push(item1.key);
+              }
             }
           }
           for (let item of roleMenus.value) {

@@ -2,7 +2,6 @@
   <div>
     <BasicTable
       @register="registerTable"
-      @selection-change="useSelectionChange"
       :rowSelection="{ type: 'checkbox' }"
       :clickToRowSelect="false"
     >
@@ -11,11 +10,25 @@
           <a-button type="primary" @click="handleCreate"> 新增角色 </a-button>
         </Authority>
         <Authority value="api:yt:admin:deleteTenantRole">
-          <a-button type="default" :disabled="disabled" @click="handleBatchDelete">
+          <a-button
+            type="primary"
+            color="error"
+            @click="handleDeleteOrBatchDelete(null)"
+            :disabled="hasBatchDelete"
+          >
             批量删除
           </a-button>
         </Authority>
       </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="[
@@ -32,7 +45,7 @@
               color: 'error',
               popConfirm: {
                 title: '是否确认删除',
-                confirm: handleDelete.bind(null, record),
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
               },
             },
           ]"
@@ -43,29 +56,30 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, ref } from 'vue';
+  import { defineComponent, nextTick } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { delRole, getRoleListByPage } from '/@/api/system/system';
+  import { delRole, getRoleListByPage, setRoleStatus } from '/@/api/system/system';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useDrawer } from '/@/components/Drawer';
   import RoleDrawer from './RoleDrawer.vue';
   import { columns, searchFormSchema } from './role.data';
   import { RoleEnum } from '/@/enums/roleEnum';
   import { Authority } from '/@/components/Authority';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { Switch } from 'ant-design-vue';
 
   export default defineComponent({
     name: 'TenantRoleManagement',
-    components: { BasicTable, RoleDrawer, TableAction, Authority },
+    components: { BasicTable, RoleDrawer, TableAction, Authority, Switch },
     setup() {
       const [registerDrawer, { openDrawer }] = useDrawer();
-      let selectedRowKeys: Array<string> = [];
-      const disabled = ref(true);
-      const { createMessage } = useMessage();
-      const [registerTable, { reload, getSelectRows }] = useTable({
+      function handleSuccess() {
+        reload();
+      }
+      const [registerTable, { reload, setProps, setSelectedRowKeys }] = useTable({
         title: '租户角色列表',
         api: getRoleListByPage,
         columns,
-
         formConfig: {
           labelWidth: 120,
           schemas: searchFormSchema,
@@ -82,6 +96,19 @@
           fixed: 'right',
         },
       });
+      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
+        useBatchDelete(delRole, handleSuccess, setProps);
+      selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
+        // Demo:status为1的选择框禁用
+        if (record.status === 1) {
+          return { disabled: true };
+        } else {
+          return { disabled: false };
+        }
+      };
+      nextTick(() => {
+        setProps(selectionOptions);
+      });
 
       function handleCreate() {
         openDrawer(true, {
@@ -95,50 +122,39 @@
           isUpdate: true,
         });
       }
-
-      async function handleDelete(record: Recordable) {
-        const roleIds = [record.id];
-        delRole(roleIds).then(() => {
-          createMessage.success('删除成功');
-          reload();
+      const statusChange = async (checked, record) => {
+        setProps({
+          loading: true,
         });
-      }
-
-      const useSelectionChange = () => {
-        selectedRowKeys = getSelectRows();
-        if (selectedRowKeys.length !== 0) {
-          disabled.value = false;
-        } else {
-          disabled.value = true;
+        setSelectedRowKeys([]);
+        resetSelectedRowKeys();
+        const newStatus = checked ? 1 : 0;
+        const { createMessage } = useMessage();
+        try {
+          await setRoleStatus(record.id, newStatus);
+          if (newStatus) {
+            createMessage.success(`启用成功`);
+          } else {
+            createMessage.success('禁用成功');
+          }
+        } finally {
+          setProps({
+            loading: false,
+          });
+          reload();
         }
       };
-      const handleBatchDelete = async () => {
-        disabled.value = true;
-        let roleIds = selectedRowKeys.map((m: any) => {
-          return m.id;
-        });
-        await delRole(roleIds);
-        createMessage.success('批量删除成功');
-        reload();
-        setTimeout(() => {
-          disabled.value = false;
-        }, 3000);
-      };
-      function handleSuccess() {
-        reload();
-      }
 
       return {
-        disabled,
-        useSelectionChange,
-        handleBatchDelete,
+        statusChange,
         registerTable,
         registerDrawer,
         handleCreate,
         handleEdit,
-        handleDelete,
         handleSuccess,
         RoleEnum,
+        hasBatchDelete,
+        handleDeleteOrBatchDelete,
       };
     },
   });

 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
-import { h } from 'vue';
-import { Switch } from 'ant-design-vue';
-import { setRoleStatus } from '/@/api/system/system';
-import { useMessage } from '/@/hooks/web/useMessage';
 import { RoleEnum } from '/@/enums/roleEnum';
 export const columns: BasicColumn[] = [
   {
@@ -20,35 +16,8 @@ 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();
-          setRoleStatus(record.id, newStatus)
-            .then(() => {
-              record.status = newStatus;
-              createMessage.success(`已成功修改角色状态`);
-            })
-            .catch(() => {
-              createMessage.error('修改角色状态失败');
-            })
-            .finally(() => {
-              record.pendingStatus = false;
-            });
-        },
-      });
-    },
+    slots: { customRender: 'status' },
   },
-
   {
     title: '备注',
     dataIndex: 'remark',