feat(系统设置): 组织的用户组与项目接口对接&表格空数据展示-

frontend/src/api/modules/setting/organizationAndProject.ts

@@ -8,6 +8,14 @@ import {
   SystemGetUserByOrgOrProjectIdParams,
 } from '@/models/setting/system/orgAndProject';
 
+// 组织与项目-公共
+// 系统-组织及项目，获取管理员下拉选项
+export function getAdminByOrgOrProject() {
+  return MSR.get({ url: orgUrl.getAdminByOrgOrProjectUrl });
+}
+
+// 系统-组织
+
 // 获取组织列表
 export function postOrgTable(data: TableQueryParams) {
   return MSR.post({ url: orgUrl.postOrgTableUrl, data });
@@ -43,7 +51,9 @@ export function enableOrDisableOrg(id: string, isEnable = true) {
   return MSR.get({ url: `${isEnable ? orgUrl.getEnableOrgUrl : orgUrl.getDisableOrgUrl}${id}` });
 }
 
-// 获取项目列表
+// 系统-项目
+
+// 系统-获取项目列表
 export function postProjectTable(data: TableQueryParams) {
   return MSR.post({ url: orgUrl.postProjectTableUrl, data });
 }
@@ -96,3 +106,44 @@ export function getAllUser() {
 export function getOrgAndProjectCount() {
   return MSR.get({ url: orgUrl.getOrgAndProjectCountUrl });
 }
+
+// 组织-项目
+// 组织-获取项目列表
+export function postProjectTableByOrg(data: TableQueryParams) {
+  return MSR.post({ url: orgUrl.postProjectTableByOrgIdUrl, data });
+}
+
+// 组织-启用或禁用项目
+export function enableOrDisableProjectByOrg(id: string, isEnable = true) {
+  return MSR.get({ url: `${isEnable ? orgUrl.getEnableProjectByOrgUrl : orgUrl.getDisableProjectByOrgUrl}${id}` });
+}
+
+// 组织-删除项目
+export function deleteProjectByOrg(id: string) {
+  return MSR.get({ url: `${orgUrl.getDeleteProjectByOrgUrl}${id}` });
+}
+
+// 组织-撤销删除项目
+export function revokeDeleteProjectByOrg(id: string) {
+  return MSR.get({ url: `${orgUrl.getRecoverProjectByOrgUrl}${id}` });
+}
+
+// 组织-创建或更新项目
+export function createOrUpdateProjectByOrg(data: CreateOrUpdateSystemProjectParams) {
+  return MSR.post({ url: data.id ? orgUrl.postModifyProjectByOrgUrl : orgUrl.postAddProjectByOrgUrl, data });
+}
+
+// 组织-获取项目下的成员列表
+export function postProjectMemberByProjectId(data: TableQueryParams) {
+  return MSR.post({ url: orgUrl.postProjectMemberByOrgIdUrl, data });
+}
+
+// 组织-移除项目成员
+export function deleteProjectMemberByOrg(projectId: string, userId: string) {
+  return MSR.get({ url: `${orgUrl.getDeleteProjectMemberByOrgUrl}${projectId}/${userId}` });
+}
+
+// 组织-添加项目成员
+export function addProjectMemberByOrg(data: AddUserToOrgOrProjectParams) {
+  return MSR.post({ url: orgUrl.postAddProjectMemberByOrgUrl, data });
+}

frontend/src/api/modules/setting/usergroup.ts

@@ -72,14 +72,28 @@ export function saveOrgUSetting(data: SaveGlobalUSettingData) {
   return MSR.post<UserGroupAuthSetting[]>({ url: ugUrl.editOrgUSettingUrl, data });
 }
 
+// 系统-获取用户组对应的用户列表
 export function postUserByUserGroup(data: TableQueryParams) {
   return MSR.post<CommonList<UserTableItem[]>>({ url: ugUrl.postUserByUserGroupUrl, data });
 }
+// 组织-获取用户组对应的用户列表
+export function postOrgUserByUserGroup(data: TableQueryParams) {
+  return MSR.post<CommonList<UserTableItem[]>>({ url: ugUrl.postOrgUserByUserGroupUrl, data });
+}
 
+// 系统-删除用户组对应的用户
 export function deleteUserFromUserGroup(id: string) {
   return MSR.get<string>({ url: `${ugUrl.deleteUserFromUserGroupUrl}${id}` });
 }
-
+// 组织-删除用户组对应的用户
+export function deleteOrgUserFromUserGroup(id: string) {
+  return MSR.get<string>({ url: `${ugUrl.deleteOrgUserFromUserGroupUrl}${id}` });
+}
+// 系统-添加用户到用户组
 export function addUserToUserGroup(data: { roleId: string; userIds: string[] }) {
   return MSR.post<string>({ url: ugUrl.addUserToUserGroupUrl, data });
 }
+// 组织-添加用户到用户组
+export function addOrgUserToUserGroup(data: { userRoleId: string; userIds: string[]; organizationId: string }) {
+  return MSR.post<string>({ url: ugUrl.addOrgUserToUserGroupUrl, data });
+}

frontend/src/api/requrls/setting/organizationAndProject.ts

@@ -1,3 +1,4 @@
+// 系统-组织
 // 修改组织
 export const postModifyOrgUrl = '/system/organization/update';
 // 获取系统下所有组织-下拉选项
@@ -25,7 +26,7 @@ export const getDeleteOrgUrl = '/system/organization/delete/';
 // 获取系统默认组织
 export const getOrgDefaultUrl = '/system/organization/default';
 
-// 项目
+// 系统-项目
 // 更新项目信息
 export const postModifyProjectUrl = '/system/project/update';
 // 获取项目列表
@@ -46,6 +47,8 @@ export const getProjectInfoUrl = '/system/project/get/';
 export const getDeleteProjectUrl = '/system/project/delete/';
 // 系统-组织及项目，获取用户下拉选项
 export const getUserByOrgOrProjectUrl = '/system/organization/get-option/';
+// 系统-组织及项目，获取管理员下拉选项
+export const getAdminByOrgOrProjectUrl = '/system/organization/get-admin-option/';
 // 启用项目
 export const getEnableProjectUrl = '/system/project/enable/';
 // 禁用项目
@@ -55,3 +58,27 @@ export const getOrgOrProjectAdminUrl = '/system/project/user-list';
 
 // 获取项目和组织的总数
 export const getOrgAndProjectCountUrl = '/system/organization/total';
+
+// 组织-项目
+// 修改项目
+export const postModifyProjectByOrgUrl = '/organization/project/update';
+// 获取项目列表
+export const postProjectTableByOrgIdUrl = '/organization/project/page';
+// 获取项目下的成员列表
+export const postProjectMemberByOrgIdUrl = '/organization/project/member-list';
+// 添加项目
+export const postAddProjectByOrgUrl = '/organization/project/add';
+// 添加项目成员
+export const postAddProjectMemberByOrgUrl = '/organization/project/add-members';
+// 获取用户列表
+export const getUserTableByOrgIdOrProjectIdUrl = '/organization/project/user-list/';
+// 恢复项目
+export const getRecoverProjectByOrgUrl = '/organization/project/revoke/';
+// 移除项目成员
+export const getDeleteProjectMemberByOrgUrl = '/organization/project/remove-member/';
+// 启用项目
+export const getEnableProjectByOrgUrl = '/organization/project/enable/';
+// 禁用项目
+export const getDisableProjectByOrgUrl = '/organization/project/disable/';
+// 删除项目
+export const getDeleteProjectByOrgUrl = '/organization/project/delete/';

frontend/src/api/requrls/setting/usergroup.ts

@@ -1,3 +1,4 @@
+/** 系统 */
 /** 修改用户组 */
 export const updateUserGroupU = `/user/role/global/update`;
 /** 编辑用户组对应的权限配置 */
@@ -20,25 +21,24 @@ export const addUserToUserGroupUrl = `/user/role/relation/global/add`;
 /** 删除用户组用户 */
 export const deleteUserFromUserGroupUrl = `/user/role/relation/global/delete/`;
 
-// 组织下的用户组
+/** 组织 */
-
+// 组织-修改用户组
 export const updateOrgUserGroupU = `/user/role/organization/update`;
-/** 编辑用户组对应的权限配置 */
+/** 组织-编辑用户组对应的权限配置 */
 export const editOrgUSettingUrl = `/user/role/organization/permission/update`;
-/** 添加用户组 */
+/** 组织-创建用户组 */
 export const addOrgUserGroupU = `/user/role/organization/add`;
-/** 获取用户组对应的权限配置 */
+/** 组织-获取用户组对应的权限配置 */
 export const getOrgUSettingUrl = `/user/role/organization/permission/setting/`;
-/** 获取用户组 */
+/** 组织-获取用户组 */
 export const getOrgUserGroupU = `/user/role/organization/list/`;
 /** 获取单个用户组信息 */
 export const getOrgUsergroupInfoU = `/user/role/organization/get/`;
-/** 删除用户组 */
+/** 组织-删除用户组 */
 export const deleteOrgUserGroupU = `/user/role/organization/delete/`;
-
+/** 组织-根据用户组获取用户列表 */
-/** 根据用户组获取用户列表 */
+export const postOrgUserByUserGroupUrl = `/user/role/organization/list-member`;
-export const postOrgUserByUserGroupUrl = `/user/role/relation/organization/list`;
+/** 组织-用户组添加用户 */
-/** 创建用户组添加用户 */
+export const addOrgUserToUserGroupUrl = `/user/role/organization/add-member`;
-export const addOrgUserToUserGroupUrl = `/user/role/relation/organization/add`;
+/** 组织-删除用户组用户 */
-/** 删除用户组用户 */
+export const deleteOrgUserFromUserGroupUrl = `/user/role/organization/delete/`;
-export const deleteOrgUserFromUserGroupUrl = `/user/role/relation/organization/delete/`;

frontend/src/components/pure/ms-table/base-table.vue

@@ -76,7 +76,7 @@
                   @press-enter="handleEditInputEnter(record)"
                 />
                 <slot v-else :name="item.slotName" v-bind="{ record, rowIndex, column }">
-                  <span>{{ record[item.dataIndex as string] }}</span>
+                  <span>{{ record[item.dataIndex as string] || '-' }}</span>
                 </slot>
                 <MsIcon
                   v-if="item.editable && item.dataIndex === editKey"

frontend/src/views/setting/organization/project/components/addProjectModal.vue

@@ -26,15 +26,10 @@
         >
           <a-input v-model="form.name" :placeholder="t('system.project.projectNamePlaceholder')" />
         </a-form-item>
-        <a-form-item
+        <a-form-item field="organizationId" :label="t('system.project.affiliatedOrg')">
-          required
-          field="organizationId"
-          :label="t('system.project.affiliatedOrg')"
-          :rules="[{ required: true, message: t('system.project.affiliatedOrgRequired') }]"
-        >
           <a-select
             v-model="form.organizationId"
-            :disabled="!isXpack"
+            disabled
             allow-search
             :options="affiliatedOrgOption"
             :default-value="isXpack ? '' : 'default_organization'"
@@ -85,11 +80,12 @@
   import { reactive, ref, watchEffect, computed } from 'vue';
   import type { FormInstance, ValidatedError } from '@arco-design/web-vue';
   import MsUserSelector from '@/components/business/ms-user-selector/index.vue';
-  import { createOrUpdateProject, getSystemOrgOption } from '@/api/modules/setting/organizationAndProject';
+  import { createOrUpdateProjectByOrg, getSystemOrgOption } from '@/api/modules/setting/organizationAndProject';
   import { Message } from '@arco-design/web-vue';
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
   import { CreateOrUpdateSystemProjectParams, SystemOrgOption } from '@/models/setting/system/orgAndProject';
   import useLicenseStore from '@/store/modules/setting/license';
+  import { useAppStore } from '@/store';
 
   const { t } = useI18n();
   const props = defineProps<{
@@ -102,6 +98,8 @@
   const loading = ref(false);
   const isEdit = computed(() => !!props.currentProject?.id);
   const affiliatedOrgOption = ref<SystemOrgOption[]>([]);
+  const appStore = useAppStore();
+  const currentOrgId = computed(() => appStore.currentOrgId);
   const licenseStore = useLicenseStore();
   const moduleOption = [
     { label: 'menu.workbench', value: 'workstation' },
@@ -120,7 +118,7 @@
   const form = reactive<CreateOrUpdateSystemProjectParams>({
     name: '',
     userIds: [],
-    organizationId: '',
+    organizationId: currentOrgId.value,
     description: '',
     enable: true,
     moduleIds: [],
@@ -147,7 +145,7 @@
       }
       try {
         loading.value = true;
-        await createOrUpdateProject({ id: props.currentProject?.id, ...form });
+        await createOrUpdateProjectByOrg({ id: props.currentProject?.id, ...form });
         Message.success(
           isEdit.value
             ? t('system.organization.updateOrganizationSuccess')
@@ -184,4 +182,3 @@
     }
   });
 </script>
-@/api/modules/setting/organizationAndProject

frontend/src/views/setting/organization/project/components/addUserModal.vue

@@ -15,7 +15,7 @@
           :label="t('system.organization.member')"
           :rules="[{ required: true, message: t('system.organization.addMemberRequired') }]"
         >
-          <MsUserSelector v-model:value="form.name" type="organization" :source-id="organizationId || projectId" />
+          <MsUserSelector v-model:value="form.name" type="organization" :source-id="projectId" />
         </a-form-item>
       </a-form>
     </div>
@@ -33,14 +33,13 @@
 <script lang="ts" setup>
   import { useI18n } from '@/hooks/useI18n';
   import { reactive, ref, watchEffect, onUnmounted } from 'vue';
-  import { addUserToOrgOrProject } from '@/api/modules/setting/organizationAndProject';
+  import { addProjectMemberByOrg } from '@/api/modules/setting/organizationAndProject';
   import { Message, type FormInstance, type ValidatedError } from '@arco-design/web-vue';
   import MsUserSelector from '@/components/business/ms-user-selector/index.vue';
 
   const { t } = useI18n();
   const props = defineProps<{
     visible: boolean;
-    organizationId?: string;
     projectId?: string;
   }>();
 
@@ -72,10 +71,10 @@
       if (errors) {
         loading.value = false;
       }
-      const { organizationId, projectId } = props;
+      const { projectId } = props;
       try {
         loading.value = true;
-        await addUserToOrgOrProject({ userIds: form.name, organizationId, projectId });
+        await addProjectMemberByOrg({ userIds: form.name, projectId });
         Message.success(t('system.organization.addSuccess'));
         handleCancel();
       } catch (error) {
@@ -101,4 +100,3 @@
     color: var(--color-text-4);
   }
 </style>
-@/api/modules/setting/organizationAndProject

frontend/src/views/setting/organization/project/components/userDrawer.vue

@@ -47,10 +47,7 @@
 </template>
 
 <script lang="ts" setup>
-  import {
+  import { postProjectMemberByProjectId, deleteProjectMemberByOrg } from '@/api/modules/setting/organizationAndProject';
-    postUserTableByOrgIdOrProjectId,
-    deleteUserFromOrgOrProject,
-  } from '@/api/modules/setting/organizationAndProject';
   import { MsTableColumn } from '@/components/pure/ms-table/type';
   import useTable from '@/components/pure/ms-table/useTable';
   import { useI18n } from '@/hooks/useI18n';
@@ -95,7 +92,7 @@
     { title: 'system.organization.operation', slotName: 'operation' },
   ];
 
-  const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(postUserTableByOrgIdOrProjectId, {
+  const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(postProjectMemberByProjectId, {
     columns: projectColumn,
     showSetting: false,
     scroll: { y: 'auto', x: '600px' },
@@ -114,7 +111,6 @@
   };
 
   const fetchData = async () => {
-    setLoadListParams({ organizationId: props.organizationId });
     await loadList();
   };
 
@@ -128,11 +124,8 @@
 
   const handleRemove = async (record: TableData) => {
     try {
-      if (props.organizationId) {
-        await deleteUserFromOrgOrProject(props.organizationId, record.id);
-      }
       if (props.projectId) {
-        await deleteUserFromOrgOrProject(props.projectId, record.id, true);
+        await deleteProjectMemberByOrg(props.projectId, record.id);
       }
       Message.success(t('common.removeSuccess'));
       fetchData();
@@ -141,16 +134,10 @@
       console.error(error);
     }
   };
-
-  watch(
-    () => props.organizationId,
-    () => {
-      fetchData();
-    }
-  );
   watch(
     () => props.projectId,
     () => {
+      setLoadListParams({ projectId: props.projectId });
       fetchData();
     }
   );
@@ -161,4 +148,3 @@
     }
   );
 </script>
-@/api/modules/setting/organizationAndProject

frontend/src/views/setting/organization/project/orgProject.vue

@@ -15,7 +15,7 @@
         <span>{{ record.name }}</span>
         <a-tooltip background-color="#FFFFFF">
           <template #content>
-            <span class="text-[var(--color-text-1)]">{{ t('system.organization.revokeDeleteToolTip') }}</span>
+            <span class="text-[var(--color-text-1)]">{{ t('system.project.revokeDeleteToolTip') }}</span>
             <MsButton class="ml-[8px]" @click="handleRevokeDelete(record)">{{ t('common.revokeDelete') }}</MsButton>
           </template>
           <MsIcon v-if="record.deleted" type="icon-icon_alarm_clock" class="ml-[4px] text-[rgb(var(--danger-6))]" />
@@ -52,7 +52,7 @@
       @cancel="handleAddProjectModalCancel"
     />
     <AddUserModal :project-id="currentProjectId" :visible="userVisible" @cancel="handleAddUserModalCancel" />
-    <UserDrawer :project-id="currentProjectId" v-bind="currentUserDrawer" @cancel="handleUserDrawerCancel" />
+    <UserDrawer v-bind="currentUserDrawer" @cancel="handleUserDrawerCancel" />
   </MsCard>
 </template>
 
@@ -60,14 +60,14 @@
   import { useI18n } from '@/hooks/useI18n';
   import useTable from '@/components/pure/ms-table/useTable';
   import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
-  import { useTableStore } from '@/store';
+  import { useTableStore, useAppStore } from '@/store';
-  import { ref, reactive } from 'vue';
+  import { ref, reactive, onMounted, computed } from 'vue';
   import type { ActionsItem } from '@/components/pure/ms-table-more-action/types';
   import {
-    postProjectTable,
+    postProjectTableByOrg,
-    deleteProject,
+    deleteProjectByOrg,
-    enableOrDisableProject,
+    enableOrDisableProjectByOrg,
-    revokeDeleteProject,
+    revokeDeleteProjectByOrg,
   } from '@/api/modules/setting/organizationAndProject';
   import { TableKeyEnum } from '@/enums/tableEnum';
   import { MsTableColumn } from '@/components/pure/ms-table/type';
@@ -89,6 +89,8 @@
   const currentProjectId = ref('');
   const currentUpdateProject = ref<CreateOrUpdateSystemProjectParams>();
   const { openDeleteModal, openModal } = useModal();
+  const appStore = useAppStore();
+  const currentOrgId = computed(() => appStore.currentOrgId);
 
   const keyword = ref('');
 
@@ -144,7 +146,7 @@
 
   tableStore.initColumn(TableKeyEnum.SYSTEM_PROJECT, organizationColumns, 'drawer');
 
-  const { propsRes, propsEvent, loadList, setKeyword } = useTable(postProjectTable, {
+  const { propsRes, propsEvent, loadList, setKeyword, setLoadListParams } = useTable(postProjectTableByOrg, {
     tableKey: TableKeyEnum.SYSTEM_PROJECT,
     scroll: { y: 'auto', x: '1300px' },
     selectable: false,
@@ -160,7 +162,7 @@
 
   const currentUserDrawer = reactive({
     visible: false,
-    organizationId: '',
+    projectId: '',
   });
 
   const tableActions: ActionsItem[] = [
@@ -181,7 +183,7 @@
       content: t('system.organization.deleteTip'),
       onBeforeOk: async () => {
         try {
-          await deleteProject(record.id);
+          await deleteProjectByOrg(record.id);
           Message.success(t('common.deleteSuccess'));
           fetchData();
         } catch (error) {
@@ -210,7 +212,7 @@
       okText,
       onBeforeOk: async () => {
         try {
-          await enableOrDisableProject(record.id, isEnable);
+          await enableOrDisableProjectByOrg(record.id, isEnable);
           Message.success(isEnable ? t('common.enableSuccess') : t('common.closeSuccess'));
           fetchData();
         } catch (error) {
@@ -243,7 +245,7 @@
 
   const showUserDrawer = (record: TableData) => {
     currentUserDrawer.visible = true;
-    currentUserDrawer.organizationId = record.id;
+    currentUserDrawer.projectId = record.id;
   };
 
   const handleUserDrawerCancel = () => {
@@ -265,11 +267,11 @@
       type: 'error',
       cancelText: t('common.cancel'),
       title: t('system.project.revokeDeleteTitle', { name: record.name }),
-      content: t('system.organization.enableContent'),
+      content: t('system.project.enableContent'),
       okText: t('common.revokeDelete'),
       onBeforeOk: async () => {
         try {
-          await revokeDeleteProject(record.id);
+          await revokeDeleteProjectByOrg(record.id);
           Message.success(t('common.revokeDeleteSuccess'));
           fetchData();
         } catch (error) {
@@ -280,6 +282,10 @@
       hideCancel: false,
     });
   };
+  onMounted(() => {
+    setLoadListParams({ organizationId: currentOrgId.value });
+    fetchData();
+  });
 </script>
 
 <style lang="scss" scoped>

frontend/src/views/setting/organization/usergroup/components/addUserModal.vue

@@ -33,10 +33,11 @@
 
 <script lang="ts" setup>
   import { useI18n } from '@/hooks/useI18n';
-  import { reactive, ref, watchEffect } from 'vue';
+  import { reactive, ref, watchEffect, computed } from 'vue';
   import useUserGroupStore from '@/store/modules/setting/organization/usergroup';
-  import { addUserToUserGroup } from '@/api/modules/setting/usergroup';
+  import { useAppStore } from '@/store';
-  import type { FormInstance, ValidatedError } from '@arco-design/web-vue';
+  import { addOrgUserToUserGroup } from '@/api/modules/setting/usergroup';
+  import { Message, type FormInstance, type ValidatedError } from '@arco-design/web-vue';
   import MsUserSelector from '@/components/business/ms-user-selector/index.vue';
 
   const { t } = useI18n();
@@ -45,6 +46,8 @@
   }>();
 
   const store = useUserGroupStore();
+  const appStore = useAppStore();
+  const currentOrgId = computed(() => appStore.currentOrgId);
 
   const emit = defineEmits<{
     (e: 'cancel'): void;
@@ -79,8 +82,13 @@
       }
       try {
         loading.value = true;
-        await addUserToUserGroup({ roleId: store.currentId, userIds: form.name });
+        await addOrgUserToUserGroup({
+          userRoleId: store.currentId,
+          userIds: form.name,
+          organizationId: currentOrgId.value,
+        });
         handleCancel();
+        Message.success(t('common.addSuccess'));
       } catch (e) {
         // eslint-disable-next-line no-console
         console.log(e);

frontend/src/views/setting/organization/usergroup/components/index.vue

@@ -79,7 +79,7 @@
 <script lang="ts" setup>
   import { ref, onMounted, computed } from 'vue';
   import { useI18n } from '@/hooks/useI18n';
-  import { CustomMoreActionItem, PopVisibleItem, RenameType, UserGroupItem } from '@/models/setting/usergroup';
+  import { PopVisibleItem, RenameType, UserGroupItem } from '@/models/setting/usergroup';
   import MsTableMoreAction from '@/components/pure/ms-table-more-action/index.vue';
   import { ActionsItem } from '@/components/pure/ms-table-more-action/types';
   import AddUserModal from './addUserModal.vue';
@@ -88,7 +88,7 @@
   import { Message } from '@arco-design/web-vue';
   import useUserGroupStore from '@/store/modules/setting/organization/usergroup';
   import { useAppStore } from '@/store';
-  import { getOrgUserGroupList, updateOrAddOrgUserGroup, deleteOrgUserGroup } from '@/api/modules/setting/usergroup';
+  import { getOrgUserGroupList, deleteOrgUserGroup } from '@/api/modules/setting/usergroup';
   import { characterLimit } from '@/utils';
 
   const { t } = useI18n();

frontend/src/views/setting/organization/usergroup/components/userTable.vue

@@ -16,10 +16,10 @@
   import { useI18n } from '@/hooks/useI18n';
   import useTable from '@/components/pure/ms-table/useTable';
   import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
-  import { useTableStore } from '@/store';
+  import { useTableStore, useAppStore } from '@/store';
   import useUserGroupStore from '@/store/modules/setting/organization/usergroup';
-  import { watchEffect, ref, watch } from 'vue';
+  import { watchEffect, ref, watch, computed } from 'vue';
-  import { postUserByUserGroup, deleteUserFromUserGroup } from '@/api/modules/setting/usergroup';
+  import { postOrgUserByUserGroup, deleteOrgUserFromUserGroup } from '@/api/modules/setting/usergroup';
   import { UserTableItem } from '@/models/setting/usergroup';
   import { TableKeyEnum } from '@/enums/tableEnum';
   import { MsTableColumn } from '@/components/pure/ms-table/type';
@@ -29,6 +29,8 @@
   const { t } = useI18n();
   const store = useUserGroupStore();
   const tableStore = useTableStore();
+  const appStore = useAppStore();
+  const currentOrgId = computed(() => appStore.currentOrgId);
   const userVisible = ref(false);
   const props = defineProps<{
     keyword: string;
@@ -57,7 +59,7 @@
 
   tableStore.initColumn(TableKeyEnum.USERGROUPUSER, userGroupUsercolumns, 'drawer');
 
-  const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(postUserByUserGroup, {
+  const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(postOrgUserByUserGroup, {
     tableKey: TableKeyEnum.USERGROUPUSER,
     scroll: { x: '600px' },
     selectable: true,
@@ -70,7 +72,7 @@
   };
   const handleRemove = async (record: UserTableItem) => {
     try {
-      await deleteUserFromUserGroup(record.id);
+      await deleteOrgUserFromUserGroup(record.id);
       await fetchData();
     } catch (error) {
       // eslint-disable-next-line no-console
@@ -85,15 +87,12 @@
     userVisible.value = false;
   };
   watchEffect(() => {
-    if (store.currentId) {
+    if (store.currentId && currentOrgId.value) {
-      setLoadListParams({ roleId: store.currentId });
+      setLoadListParams({ userRoleId: store.currentId, organizationId: currentOrgId.value });
       fetchData();
     }
   });
-  watch(
+  defineExpose({
-    () => props.keyword,
+    fetchData,
-    () => {
+  });
-      fetchData();
-    }
-  );
 </script>

frontend/src/views/setting/organization/usergroup/orgUserGroup.vue

@@ -26,7 +26,7 @@
           </div>
         </div>
         <div class="mt-[16px]">
-          <user-table v-if="currentTable === 'user' && couldShowUser" :keyword="currentKeyword" />
+          <user-table v-if="currentTable === 'user' && couldShowUser" ref="userRef" :keyword="currentKeyword" />
           <auth-table v-if="currentTable === 'auth' && couldShowAuth" ref="authRef" />
         </div>
       </div>
@@ -45,7 +45,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, computed, watchEffect } from 'vue';
+  import { ref, computed, watchEffect, nextTick } from 'vue';
   import { useI18n } from '@/hooks/useI18n';
   import MsCard from '@/components/pure/ms-card/index.vue';
   import useUserGroupStore from '@/store/modules/setting/organization/usergroup';
@@ -65,13 +65,26 @@
     handleSave: () => void;
     canSave: boolean;
   }>();
+  const userRef = ref();
   const appStore = useAppStore();
 
+  const tableSearch = () => {
+    if (currentTable.value === 'user' && userRef.value) {
+      userRef.value.fetchData();
+    } else if (!userRef.value) {
+      nextTick(() => {
+        userRef.value?.fetchData();
+      });
+    }
+  };
+
   const handleSearch = (value: string) => {
     currentKeyword.value = value;
+    tableSearch();
   };
   const handleEnter = (eve: Event) => {
     currentKeyword.value = (eve.target as HTMLInputElement).value;
+    tableSearch();
   };
 
   const store = useUserGroupStore();

frontend/src/views/setting/system/usergroup/components/userTable.vue

@@ -18,7 +18,7 @@
   import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
   import { useTableStore } from '@/store';
   import useUserGroupStore from '@/store/modules/setting/system/usergroup';
-  import { watchEffect, ref, watch } from 'vue';
+  import { watchEffect, ref } from 'vue';
   import { postUserByUserGroup, deleteUserFromUserGroup } from '@/api/modules/setting/usergroup';
   import { UserTableItem } from '@/models/setting/usergroup';
   import { TableKeyEnum } from '@/enums/tableEnum';
@@ -90,10 +90,7 @@
       fetchData();
     }
   });
-  watch(
+  defineExpose({
-    () => props.keyword,
+    fetchData,
-    () => {
+  });
-      fetchData();
-    }
-  );
 </script>

frontend/src/views/setting/system/usergroup/index.vue

@@ -26,7 +26,7 @@
           </div>
         </div>
         <div class="mt-[16px]">
-          <user-table v-if="currentTable === 'user' && couldShowUser" :keyword="currentKeyword" />
+          <user-table v-if="currentTable === 'user' && couldShowUser" ref="userRef" :keyword="currentKeyword" />
           <auth-table v-if="currentTable === 'auth' && couldShowAuth" ref="authRef" />
         </div>
       </div>
@@ -45,7 +45,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, computed, watchEffect } from 'vue';
+  import { ref, computed, watchEffect, nextTick } from 'vue';
   import { useI18n } from '@/hooks/useI18n';
   import MsCard from '@/components/pure/ms-card/index.vue';
   import useUserGroupStore from '@/store/modules/setting/system/usergroup';
@@ -65,13 +65,26 @@
     handleSave: () => void;
     canSave: boolean;
   }>();
+  const userRef = ref();
   const appStore = useAppStore();
 
+  const tableSearch = () => {
+    if (currentTable.value === 'user' && userRef.value) {
+      userRef.value.fetchData();
+    } else if (!userRef.value) {
+      nextTick(() => {
+        userRef.value.fetchData();
+      });
+    }
+  };
+
   const handleSearch = (value: string) => {
     currentKeyword.value = value;
+    tableSearch();
   };
   const handleEnter = (eve: Event) => {
     currentKeyword.value = (eve.target as HTMLInputElement).value;
+    tableSearch();
   };
 
   const store = useUserGroupStore();