test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(系统设置): 用户选择器支持远程搜索

This commit is contained in:
RubyLiu 2023-09-11 19:09:02 +08:00 committed by 刘瑞斌
parent a21c295b8a
commit 3c90c82320
5 changed files with 55 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/api/modules/setting/organizationAndProject.ts
View File

@ -74,13 +74,13 @@ export function addUserToOrgOrProject(data: AddUserToOrgOrProjectParams) {
return MSR.post({ url: data.projectId ? orgUrl.postAddProjectMemberUrl : orgUrl.postAddOrgMemberUrl, data });
}
// 获取用户下拉选项
export function getUserByOrganizationOrProject(sourceId: string) {
return MSR.get({ url: `${orgUrl.getUserByOrgOrProjectUrl}${sourceId}` });
export function getUserByOrganizationOrProject(sourceId: string, keyword: string) {
return MSR.get({ url: `${orgUrl.getUserByOrgOrProjectUrl}${sourceId}`, params: { keyword } });
}
// 系统-获取管理员下拉选项
export function getAdminByOrganizationOrProject() {
return MSR.get({ url: `${orgUrl.getAdminByOrgOrProjectUrl}` });
export function getAdminByOrganizationOrProject(keyword: string) {
return MSR.get({ url: `${orgUrl.getAdminByOrgOrProjectUrl}`, params: { keyword } });
}
// 删除组织或项目成员
export function deleteUserFromOrgOrProject(sourceId: string, userId: string, isOrg = true) {
@ -156,11 +156,14 @@ export function addProjectMemberByOrg(data: AddUserToOrgOrProjectParams) {
}
// 组织-获取项目下的管理员选项
export function getAdminByProjectByOrg(organizationId: string) {
return MSR.get({ url: `${orgUrl.getAdminByOrganizationOrProjectUrl}${organizationId}` });
export function getAdminByProjectByOrg(organizationId: string, keyword: string) {
return MSR.get({ url: `${orgUrl.getAdminByOrganizationOrProjectUrl}${organizationId}`, params: { keyword } });
}
// 组织-获取成员下的成员选项
export function getUserByProjectByOrg(organizationId: string, projectId: string) {
return MSR.get({ url: `${orgUrl.getUserByOrganizationOrProjectUrl}${organizationId}/${projectId}` });
export function getUserByProjectByOrg(organizationId: string, projectId: string, keyword: string) {
return MSR.get({
url: `${orgUrl.getUserByOrganizationOrProjectUrl}${organizationId}/${projectId}`,
params: { keyword },
});
}

11
frontend/src/api/modules/setting/usergroup.ts
View File

@ -72,13 +72,16 @@ export function saveGlobalUSetting(data: SaveGlobalUSettingData) {
}
// 系统-获取需要关联的用户选项
export function getSystemUserGroupOption(id: string) {
return MSR.get<UserTableItem[]>({ url: `${ugUrl.getSystemUserGroupOptionUrl}${id}` });
export function getSystemUserGroupOption(id: string, keyword: string) {
return MSR.get<UserTableItem[]>({ url: `${ugUrl.getSystemUserGroupOptionUrl}${id}`, params: { keyword } });
}
// 组织-获取需要关联的用户选项
export function getOrgUserGroupOption(organizationId: string, roleId: string) {
return MSR.get<UserTableItem[]>({ url: `${ugUrl.getOrgUserGroupOptionUrl}${organizationId}/${roleId}` });
export function getOrgUserGroupOption(organizationId: string, roleId: string, keyword: string) {
return MSR.get<UserTableItem[]>({
url: `${ugUrl.getOrgUserGroupOptionUrl}${organizationId}/${roleId}`,
params: { keyword },
});
}
// 组织-编辑用户组对应的权限配置

38
frontend/src/components/business/ms-user-group-comp/addUserModal.vue
View File

@ -16,12 +16,7 @@
:label="t('system.userGroup.user')"
:rules="[{ required: true, message: t('system.userGroup.pleaseSelectUser') }]"
>
<MsUserSelector
v-model:value="form.name"
:type="UserRequesetTypeEnum.ORGANIZATION_USER_GROUP"
:load-option-params="loadOptionParmas"
disabled-key="checkRoleFlag"
/>
<MsUserSelector v-model:value="form.name" v-bind="userSelectorProps" />
</a-form-item>
</a-form>
</div>
@ -55,6 +50,25 @@
const appStore = useAppStore();
const currentOrgId = computed(() => appStore.currentOrgId);
const userSelectorProps = computed(() => {
if (systemType === AuthScopeEnum.SYSTEM) {
return {
type: UserRequesetTypeEnum.SYSTEM_USER_GROUP,
loadOptionParams: {
roleId: props.currentId,
},
disabledKey: 'exclude',
};
}
return {
type: UserRequesetTypeEnum.ORGANIZATION_USER_GROUP,
loadOptionParams: {
roleId: props.currentId,
organizationId: currentOrgId.value,
},
disabledKey: 'checkRoleFlag',
};
});
const emit = defineEmits<{
(e: 'cancel', shouldSearch: boolean): void;
@ -62,18 +76,6 @@
const currentVisible = ref(props.visible);
const loading = ref(false);
const loadOptionParmas = computed(() => {
if (systemType === AuthScopeEnum.SYSTEM) {
return {
roleId: props.currentId,
};
}
return {
roleId: props.currentId,
organizationId: currentOrgId.value,
};
// TODO 项目-用户组
});
const form = reactive({
name: [],

33
frontend/src/components/business/ms-user-selector/index.vue
View File

@ -7,7 +7,7 @@
:disabled="props.disabled"
allow-clear
@change="change"
@search="search"
@search="debouncedSearch"
>
<template #label="{ data }">
<span class="text-[var(--color-text-1)]"> {{ data.value.name }} </span>
@ -25,6 +25,7 @@
import { useI18n } from '@/hooks/useI18n';
import { ref, onMounted, computed } from 'vue';
import initOptionsFunc, { UserRequesetTypeEnum } from './utils';
import { debounce } from 'lodash-es';
export interface MsUserSelectorOption {
id: string;
@ -62,7 +63,7 @@
const { t } = useI18n();
const currentOptions = ref<MsUserSelectorOption[]>([]);
const oldOptions = ref<MsUserSelectorOption[]>([]);
const currentLoadParams = ref<Record<string, any>>(props.loadOptionParams || {});
const currentValue = computed(() => {
return currentOptions.value.filter((item) => props.value.includes(item.id)) || [];
@ -80,7 +81,7 @@
};
const loadList = async () => {
try {
const list = (await initOptionsFunc(props.type, props.loadOptionParams || {})) || [];
const list = (await initOptionsFunc(props.type, currentLoadParams.value || {})) || [];
const { firstLabelKey, secondLabelKey, disabledKey, valueKey } = props;
list.forEach((item: MsUserSelectorOption) => {
if (firstLabelKey) {
@ -97,35 +98,23 @@
}
});
currentOptions.value = [...list];
oldOptions.value = [...list];
} catch (error) {
// eslint-disable-next-line no-console
console.log(error);
currentOptions.value = [];
oldOptions.value = [];
}
};
const idInSelected = (id: string) => {
return props.value.includes(id);
};
const search = async (value: string) => {
let timeout = null;
if (value) {
timeout = window.setTimeout(() => {
currentOptions.value = currentOptions.value.filter(
(item) => item.name.includes(value) || item.email.includes(value) || idInSelected(item.id)
);
}, 60);
} else {
if (timeout) {
window.clearTimeout(timeout);
}
currentOptions.value = [...oldOptions.value];
}
currentLoadParams.value = {
...currentLoadParams.value,
keyword: value,
};
await loadList();
};
const debouncedSearch = debounce(search, 300, { maxWait: 1000 });
onMounted(async () => {
await loadList();
});

12
frontend/src/components/business/ms-user-selector/utils.ts
View File

@ -21,26 +21,26 @@ export enum UserRequesetTypeEnum {
export default function initOptionsFunc(type: string, params: Record<string, any>) {
if (type === UserRequesetTypeEnum.SYSTEM_USER_GROUP) {
// 系统 - 用户组-添加成员-下拉选项
return getSystemUserGroupOption(params.roleId);
return getSystemUserGroupOption(params.roleId, params.keyword);
}
if (type === UserRequesetTypeEnum.ORGANIZATION_USER_GROUP) {
// 组织 - 用户组-添加成员-下拉选项
return getOrgUserGroupOption(params.organizationId, params.roleId);
return getOrgUserGroupOption(params.organizationId, params.roleId, params.keyword);
}
if (type === UserRequesetTypeEnum.SYSTEM_ORGANIZATION_ADMIN || type === UserRequesetTypeEnum.SYSTEM_PROJECT_ADMIN) {
// 系统 - 【组织 或 项目】-添加管理员-下拉选项
return getAdminByOrganizationOrProject();
return getAdminByOrganizationOrProject(params.keyword);
}
if (type === UserRequesetTypeEnum.SYSTEM_ORGANIZATION || type === UserRequesetTypeEnum.SYSTEM_PROJECT) {
// 系统 -【组织 或 项目】-添加成员-下拉选项
return getUserByOrganizationOrProject(params.sourceId);
return getUserByOrganizationOrProject(params.sourceId, params.keyword);
}
if (type === UserRequesetTypeEnum.ORGANIZATION_PROJECT) {
// 组织 - 项目-添加成员-下拉选项
return getUserByProjectByOrg(params.organizationId, params.projectId);
return getUserByProjectByOrg(params.organizationId, params.projectId, params.keyword);
}
if (type === UserRequesetTypeEnum.ORGANIZATION_PROJECT_ADMIN) {
// 组织 - 项目-添加管理员-下拉选项
return getAdminByProjectByOrg(params.organizationId);
return getAdminByProjectByOrg(params.organizationId, params.keyword);
}
}