修复：#13598 角色管理-列表批量操作，删除角色后，选中记录数据未更新问题

jeecgboot-vue3/src/views/system/role/components/RoleUserTable.vue

@@ -5,7 +5,7 @@
         <!-- <a-button type="primary" @click="handleCreate" v-if="!disableUserEdit"> 新增用户</a-button> -->
         <a-button type="primary" @click="handleSelect"> 添加用户</a-button>
 
-        <a-dropdown v-if="checkedKeys.length > 0">
+        <a-dropdown v-if="getSelectRowKeys().length > 0">
           <template #overlay>
             <a-menu>
               <a-menu-item key="1" @click="batchHandleDelete">
@@ -31,188 +31,192 @@
   </BasicDrawer>
 </template>
 <script lang="ts" setup>
-  import { ref, watch, unref } from 'vue';
-  import { BasicTable, useTable, TableAction } from '/src/components/Table';
-  import { BasicDrawer, useDrawer, useDrawerInner } from '/src/components/Drawer';
-  import { useModal } from '/src/components/Modal';
-  import UserDrawer from '../../user/UserDrawer.vue';
-  import UseSelectModal from './UseSelectModal.vue';
-  import { userList, deleteUserRole, batchDeleteUserRole, addUserRole } from '../role.api';
-  import { userColumns, searchUserFormSchema } from '../role.data';
-  import { getUserRoles,userComplexConditionTwo } from '../../user/user.api';
+import { ref, watch, unref } from 'vue';
+import { BasicTable, useTable, TableAction } from '/src/components/Table';
+import { BasicDrawer, useDrawer, useDrawerInner } from '/src/components/Drawer';
+import { useModal } from '/src/components/Modal';
+import UserDrawer from '../../user/UserDrawer.vue';
+import UseSelectModal from './UseSelectModal.vue';
+import { userList, deleteUserRole, batchDeleteUserRole, addUserRole } from '../role.api';
+import { userColumns, searchUserFormSchema } from '../role.data';
+import { getUserRoles, userComplexConditionTwo } from '../../user/user.api';
 
-  const emit = defineEmits(['register', 'hideUserList']);
-  const props = defineProps({
-    disableUserEdit: {type:Boolean,default:false}
-  })
-  
-  const checkedKeys = ref<Array<string | number>>([]);
-  const roleId = ref('');
-  const appId = ref('');
-  const [registerBaseDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
-    roleId.value = data.id;
-    appId.value = data.appId;
-    setProps({ searchInfo: { roleId: data.id } });
-    reload();
-  });
-  //注册drawer
-  const [registerDrawer, { openDrawer }] = useDrawer();
-  //注册drawer
-  const [registerModal, { openModal }] = useModal();
-  const [registerTable, { reload, updateTableDataRecord, setProps,getDataSource }] = useTable({
-    title: '用户列表',
-    api: userComplexConditionTwo,
-    columns: userColumns,
-    formConfig: {
-      //update-begin---author:wangshuai ---date:20230703  for：【QQYUN-5685】3、租户角色下,查询居左显示
-      labelWidth: 90,
-      //update-end---author:wangshuai ---date:20230703  for：【QQYUN-5685】3、租户角色下,查询居左显示
-      schemas: searchUserFormSchema,
-      autoSubmitOnEnter: true,
-      baseColProps: {
-        xs: 24,
-        sm: 10,
-        md: 10,
-        lg: 10,
-        xl: 10,
-        xxl: 10,
-      },
-      actionColOptions: {
-        push: 3,
-        xs: 24,
-        sm: 8,
-        md: 8,
-        lg: 8,
-        xl: 8,
-        xxl: 8,
-      },
+const emit = defineEmits(['register', 'hideUserList']);
+const props = defineProps({
+  disableUserEdit: { type: Boolean, default: false },
+});
 
+const checkedKeys = ref<Array<string | number>>([]);
+const roleId = ref('');
+const appId = ref('');
+const [registerBaseDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+  roleId.value = data.id;
+  appId.value = data.appId;
+  setProps({ searchInfo: { roleId: data.id } });
+  reload();
+});
+//注册drawer
+const [registerDrawer, { openDrawer }] = useDrawer();
+//注册drawer
+const [registerModal, { openModal }] = useModal();
+const [registerTable, { reload, updateTableDataRecord, setProps, getDataSource,rowSelection,getSelectRowKeys,setSelectedRowKeys }] = useTable({
+  title: '用户列表',
+  api: userComplexConditionTwo,
+  columns: userColumns,
+  formConfig: {
+    //update-begin---author:wangshuai ---date:20230703  for：【QQYUN-5685】3、租户角色下,查询居左显示
+    labelWidth: 90,
+    //update-end---author:wangshuai ---date:20230703  for：【QQYUN-5685】3、租户角色下,查询居左显示
+    schemas: searchUserFormSchema,
+    autoSubmitOnEnter: true,
+    baseColProps: {
+      xs: 24,
+      sm: 10,
+      md: 10,
+      lg: 10,
+      xl: 10,
+      xxl: 10,
     },
-    striped: true,
-    useSearchForm: true,
-    showTableSetting: false,
-    clickToRowSelect: true,
-    bordered: true,
-    showIndexColumn: false,
-    // 【issues/1064】列设置的 cacheKey
-    tableSetting: { fullScreen: true, cacheKey: 'role_user_table' },
-    canResize: false,
-    rowKey: 'id',
-    pagination : { hideOnSinglePage: true },
-    actionColumn: {
-      width: 180,
-      title: '操作',
-      dataIndex: 'action',
-      slots: { customRender: 'action' },
-      fixed: undefined,
+    actionColOptions: {
+      push: 3,
+      xs: 24,
+      sm: 8,
+      md: 8,
+      lg: 8,
+      xl: 8,
+      xxl: 8,
     },
-  });
-
-  /**
-   * 选择列配置
-   */
-  const rowSelection = {
+  },
+  rowSelection: {
     type: 'checkbox',
-    columnWidth: 50,
-    selectedRowKeys: checkedKeys,
-    onChange: onSelectChange,
-  };
+    columnWidth: 50
+  },
+  striped: true,
+  useSearchForm: true,
+  showTableSetting: false,
+  clickToRowSelect: false,
+  bordered: true,
+  showIndexColumn: false,
+  // 【issues/1064】列设置的 cacheKey
+  tableSetting: { fullScreen: true, cacheKey: 'role_user_table' },
+  canResize: false,
+  rowKey: 'id',
+  pagination: { hideOnSinglePage: true },
+  actionColumn: {
+    width: 180,
+    title: '操作',
+    dataIndex: 'action',
+    slots: { customRender: 'action' },
+    fixed: undefined,
+  },
+});
 
-  /**
-   * 选择事件
-   */
-  function onSelectChange(selectedRowKeys: (string | number)[], selectionRows) {
-    checkedKeys.value = selectedRowKeys;
-  }
+/**
+ * 选择列配置
+ */
+// const;
 
-  /**
-   * 新增
-   */
-  function handleCreate() {
-    openDrawer(true, {
-      isUpdate: false,
-      selectedroles: [roleId.value],
-      isRole: true,
-    });
-  }
-  /**
-   * 编辑
-   */
-  async function handleEdit(record: Recordable) {
-    try {
-      const userRoles = await getUserRoles({ userid: record.id });
-      if (userRoles && userRoles.length > 0) {
-        record.selectedroles = userRoles;
-      }
-    } catch (e) {
-      console.log(e);
+/**
+ * 选择事件
+ */
+// function onSelectChange(selectedRowKeys: (string | number)[], selectionRows) {
+//   checkedKeys.value = selectedRowKeys;
+// }
+
+/**
+ * 新增
+ */
+function handleCreate() {
+  openDrawer(true, {
+    isUpdate: false,
+    selectedroles: [roleId.value],
+    isRole: true,
+  });
+}
+/**
+ * 编辑
+ */
+async function handleEdit(record: Recordable) {
+  try {
+    const userRoles = await getUserRoles({ userid: record.id });
+    if (userRoles && userRoles.length > 0) {
+      record.selectedroles = userRoles;
     }
-    openDrawer(true, {
-      record,
-      isUpdate: true,
-      isRole: true,
-    });
+  } catch (e) {
+    console.log(e);
   }
+  openDrawer(true, {
+    record,
+    isUpdate: true,
+    isRole: true,
+  });
+}
 
-  /**
-   * 删除事件
-   */
-  async function handleDelete(record) {
-    await deleteUserRole({ userId: record.id, roleId: roleId.value }, reload);
-  }
+/**
+ * 删除事件
+ */
+async function handleDelete(record) {
+  await deleteUserRole({ userId: record.id, roleId: roleId.value }, () => {
+    setSelectedRowKeys([]);
+    reload()});
+}
 
-  /**
-   * 批量删除事件
-   */
-  async function batchHandleDelete() {
-    await batchDeleteUserRole({ userIds: checkedKeys.value.join(','), roleId: roleId.value }, reload);
-  }
+/**
+ * 批量删除事件
+ */
+async function batchHandleDelete() {
 
-  /**
-   * 成功回调
-   */
-  function handleSuccess({ isUpdate, values }) {
-    isUpdate ? updateTableDataRecord(values.id, values) : reload();
-  }
-  /**
-   * 选择已有用户
-   */
-  function handleSelect() {
-    const list = getDataSource();
-    console.log('list', list);
-    openModal(true,{list:list,appId:ref(appId)});
-  }
-  /**
-   * 添加已有用户
-   */
-  async function selectOk(val) {
-    await addUserRole({ roleId: roleId.value, userIdList: val }, reload);
-  }
-  /**
-   * 操作栏
-   */
-  function getTableAction(record) {
-    return [
-      // {
-      //   label: '编辑',
-      //   onClick: handleEdit.bind(null, record),
-      //   ifShow: () => !props.disableUserEdit,
-      // },
-      {
-        label: '移除',
-        popConfirm: {
-          title: '是否移除该用户',
-          confirm: handleDelete.bind(null, record),
-        },
+  await batchDeleteUserRole({ userIds: getSelectRowKeys().join(','), roleId: roleId.value }, () => {
+    setSelectedRowKeys([]);
+    reload();
+  });
+}
+
+/**
+ * 成功回调
+ */
+function handleSuccess({ isUpdate, values }) {
+  isUpdate ? updateTableDataRecord(values.id, values) : reload();
+}
+/**
+ * 选择已有用户
+ */
+function handleSelect() {
+  const list = getDataSource();
+  console.log('list', list);
+  openModal(true, { list: list, appId: ref(appId) });
+}
+/**
+ * 添加已有用户
+ */
+async function selectOk(val) {
+  await addUserRole({ roleId: roleId.value, userIdList: val }, reload);
+}
+/**
+ * 操作栏
+ */
+function getTableAction(record) {
+  return [
+    // {
+    //   label: '编辑',
+    //   onClick: handleEdit.bind(null, record),
+    //   ifShow: () => !props.disableUserEdit,
+    // },
+    {
+      label: '移除',
+      popConfirm: {
+        title: '是否移除该用户',
+        confirm: handleDelete.bind(null, record),
       },
-    ];
-  }
+    },
+  ];
+}
 </script>
 
 <style scoped>
-  /*update-begin---author:wangshuai ---date:20230703  for：【QQYUN-5685】3、租户角色下,查询居左显示*/
-  :deep(.ant-form-item-control-input-content){
-    text-align: left;
-  }
-  /*update-end---author:wangshuai ---date:20230703  for：【QQYUN-5685】3、租户角色下,查询居左显示*/
+/*update-begin---author:wangshuai ---date:20230703  for：【QQYUN-5685】3、租户角色下,查询居左显示*/
+:deep(.ant-form-item-control-input-content) {
+  text-align: left;
+}
+/*update-end---author:wangshuai ---date:20230703  for：【QQYUN-5685】3、租户角色下,查询居左显示*/
 </style>

jeecgboot-vue3/src/views/system/role/index.vue

@@ -94,12 +94,12 @@ const { prefixCls, tableContext, onImportXls, onExportXls } = useListPage({
         params.appId = idsString;
       }
       //模糊查询
-      if(params.roleName){
-        params.roleName ='*'+ params.roleName.trim()+'*';
+      if (params.roleName) {
+        params.roleName = '*' + params.roleName.trim() + '*';
+      }
+      if (params.roleCode) {
+        params.roleCode = '*' + params.roleCode.trim() + '*';
       }
-      if(params.roleCode){
-        params.roleCode ='*'+ params.roleCode.trim()+'*';
-      } 
     },
     afterFetch: (record) => {
       const app = apps.value;
@@ -160,7 +160,10 @@ async function handleDelete(record) {
  * 批量删除事件
  */
 async function batchHandleDelete() {
-  await batchDeleteRole({ ids: selectedRowKeys.value }, reload);
+  await batchDeleteRole({ ids: selectedRowKeys.value }, () => {
+    selectedRowKeys.value = [];
+    reload();
+  });
 }
 /**
  * 角色授权弹窗