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-15 17:12:48 +08:00 committed by fit2-zhao
parent 1880e03b3d
commit 8d8e26e623
13 changed files with 287 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/api/modules/project-management/usergroup.ts
View File

@ -5,12 +5,12 @@ import {
UserGroupItem,
SystemUserGroupParams,
UserGroupAuthSetting,
SaveGlobalUSettingData,
UserTableItem,
SaveGlobalUSettingData,
} from '@/models/setting/usergroup';
// 项目-创建或修改用户组
export function updateOrAddUserGroup(data: SystemUserGroupParams) {
export function updateOrAddProjectUserGroup(data: SystemUserGroupParams) {
return MSR.post<UserGroupItem>({
url: data.id ? ugUrl.updateUrl : ugUrl.addUrl,
data,
@ -27,22 +27,14 @@ export function deleteUserGroup(id: string) {
return MSR.get<string>({ url: `${ugUrl.deleteUrl}${id}` });
}
// 项目-获取需要关联的用户选项
export function getUserGroupOption(organizationId: string, roleId: string, keyword: string) {
return MSR.get<UserTableItem[]>({
url: `${ugUrl.getMemberOptionsUrl}${organizationId}/${roleId}`,
params: { keyword },
});
}
// 项目-编辑用户组对应的权限配置
export function saveUSetting(data: SaveGlobalUSettingData) {
export function saveProjectUGSetting(data: SaveGlobalUSettingData) {
return MSR.post<UserGroupAuthSetting[]>({ url: ugUrl.updatePermissionUrl, data });
}
// 项目-获取用户组对应的权限
export function postAuthByUserGroup(data: TableQueryParams) {
return MSR.post<CommonList<UserTableItem[]>>({ url: ugUrl.listPermissionUrl, data });
export function getAuthByUserGroup(id: string) {
return MSR.get<UserGroupAuthSetting[]>({ url: ugUrl.listPermissionUrl + id });
}
// 项目-获取用户组对应的用户列表
@ -51,11 +43,19 @@ export function postUserByUserGroup(data: TableQueryParams) {
}
// 项目-删除用户组对应的用户
export function deleteUserFromUserGroup(data: { userRoleId: string; userIds: string[]; organizationId: string }) {
export function deleteUserFromUserGroup(data: { projectId: string; userRoleId: string; userIds: string[] }) {
return MSR.post<CommonList<UserTableItem[]>>({ url: ugUrl.removeMemberUrl, data });
}
// 项目-获取需要关联的用户选项
export function getProjectUserGroupOptions(projectId: string, userRoleId: string, keyword: string) {
return MSR.get<UserTableItem[]>({
url: `${ugUrl.getMemberOptionsUrl}${projectId}/${userRoleId}`,
params: { keyword },
});
}
// 项目-添加用户到用户组
export function addUserToUserGroup(data: { userRoleId: string; userIds: string[]; organizationId: string }) {
export function addUserToUserGroup(data: { projectId: string; userRoleId: string; userIds: string[] }) {
return MSR.post<string>({ url: ugUrl.addMemberUrl, data });
}

6
frontend/src/api/requrls/project-management/usergroup.ts
View File

@ -5,6 +5,6 @@ export const updatePermissionUrl = '/user/role/project/permission/update';
export const listMemberUrl = '/user/role/project/list-member';
export const addMemberUrl = '/user/role/project/add-member';
export const listPermissionUrl = '/user/role/project/permission/setting/';
export const listUserGroupUrl = '/user/role/project/list/';
export const getMemberOptionsUrl = '/api/project-management/usergroup/getMemberOptions';
export const deleteUrl = '/api/project-management/usergroup/delete';
export const listUserGroupUrl = '/user/role/project/list';
export const getMemberOptionsUrl = '/user/role/project/get-member/option/';
export const deleteUrl = '/user/role/project/delete/';

10
frontend/src/components/business/ms-user-group-comp/authTable.vue
View File

@ -59,6 +59,7 @@
saveGlobalUSetting,
saveOrgUSetting,
} from '@/api/modules/setting/usergroup';
import { getAuthByUserGroup, saveProjectUGSetting } from '@/api/modules/project-management/usergroup';
import {
UserGroupAuthSetting,
AuthTableItem,
@ -266,8 +267,7 @@
res = await getOrgUSetting(id);
}
} else {
// TODO 项目的
res = await getOrgUSetting(id);
res = await getAuthByUserGroup(id);
}
tableData.value = transformData(res);
@ -306,7 +306,11 @@
permissions,
});
} else {
// TODO 项目的
// 项目的
await saveProjectUGSetting({
userRoleId: props.current.id,
permissions,
});
}
Message.success(t('common.saveSuccess'));
initData(props.current.id, props.current.internal);

5
frontend/src/components/business/ms-user-group-comp/createOrUpdateUserGroup.vue
View File

@ -51,6 +51,7 @@
import { Message } from '@arco-design/web-vue';
import type { FormInstance, ValidatedError } from '@arco-design/web-vue';
import { updateOrAddOrgUserGroup, updateOrAddUserGroup } from '@/api/modules/setting/usergroup';
import { updateOrAddProjectUserGroup } from '@/api/modules/project-management/usergroup';
import { UserGroupItem } from '@/models/setting/usergroup';
import { AuthScopeEnum } from '@/enums/commonEnum';
import { useAppStore } from '@/store';
@ -114,7 +115,6 @@
if (systemType === AuthScopeEnum.SYSTEM) {
res = await updateOrAddUserGroup({ id: props.id, name: form.name, type: props.authScope });
} else if (systemType === AuthScopeEnum.ORGANIZATION) {
debugger;
// 组织用户组
res = await updateOrAddOrgUserGroup({
id: props.id,
@ -123,7 +123,8 @@
scopeId: appStore.currentOrgId,
});
} else {
res = await updateOrAddUserGroup({ id: props.id, name: form.name, type: props.authScope });
// 项目用户组 项目用户组只有创建
res = await updateOrAddProjectUserGroup({ name: form.name });
}
if (res) {
Message.success(

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

@ -7,6 +7,7 @@ import {
import { getOrgUserGroupOption, getSystemUserGroupOption } from '@/api/modules/setting/usergroup';
import { getUser, getProjectList } from '@/api/modules/setting/member';
import { getProjectMemberOptions } from '@/api/modules/project-management/projectMember';
import { getProjectUserGroupOptions } from '@/api/modules/project-management/usergroup';
// eslint-disable-next-line no-shadow
export enum UserRequesetTypeEnum {
@ -22,6 +23,7 @@ export enum UserRequesetTypeEnum {
SYSTEM_ORGANIZATION_PROJECT = 'SYSTEM_ORGANIZATION_PROJECT',
SYSTEM_ORGANIZATION_MEMBER = 'SYSTEM_ORGANIZATION_MEMBER',
PROJECT_PERMISSION_MEMBER = 'PROJECT_PERMISSION_MEMBER',
PROJECT_USER_GROUP = 'PROJECT_USER_GROUP',
}
export default function initOptionsFunc(type: string, params: Record<string, any>) {
if (type === UserRequesetTypeEnum.SYSTEM_USER_GROUP) {
@ -57,7 +59,11 @@ export default function initOptionsFunc(type: string, params: Record<string, any
return getUser(params.organizationId, params.keyword);
}
if (type === UserRequesetTypeEnum.PROJECT_PERMISSION_MEMBER) {
// 系统-组织-项目成员
// 项目-项目成员
return getProjectMemberOptions(params.projectId, params.keyword);
}
if (type === UserRequesetTypeEnum.PROJECT_USER_GROUP) {
// 项目-用户组
return getProjectUserGroupOptions(params.projectId, params.userRoleId, params.keyword);
}
}

70
frontend/src/components/pure/ms-button/not-mr.vue Normal file
View File

@ -0,0 +1,70 @@
<template>
<div :class="`ms-button ms-button-${props.type} ms-button--${props.status}`" @click="clickHandler">
<slot></slot>
</div>
</template>
<script setup lang="ts">
const props = withDefaults(
defineProps<{
type?: 'text' | 'icon' | 'button';
status?: 'primary' | 'danger' | 'secondary';
}>(),
{
type: 'text',
status: 'primary',
}
);
const emit = defineEmits(['click']);
function clickHandler() {
emit('click');
}
</script>
<style lang="less" scoped>
.ms-button {
@apply flex cursor-pointer items-center align-middle;
padding: 0 4px;
font-size: 1rem;
border-radius: var(--border-radius-mini);
line-height: 22px;
}
.ms-button-text {
@apply p-0;
color: rgb(var(--primary-5));
}
.ms-button-icon {
padding: 4px;
color: var(--color-text-4);
&:hover {
color: rgb(var(--primary-5));
background-color: rgb(var(--primary-9));
.arco-icon {
color: rgb(var(--primary-5));
}
}
}
.ms-button--secondary {
color: var(--color-text-2);
&:not(.ms-button-text):hover {
background-color: var(--color-text-n8);
}
}
.ms-button--primary {
color: rgb(var(--primary-5));
&:not(.ms-button-text):hover {
background-color: rgb(var(--primary-9));
}
}
.ms-button--danger {
color: rgb(var(--danger-6));
&:not(.ms-button-text):hover {
color: rgb(var(--danger-6));
background-color: rgb(var(--danger-1));
}
}
</style>

2
frontend/src/models/setting/usergroup.ts
View File

@ -48,6 +48,8 @@ export interface CurrentUserGroupItem {
type: AuthScopeEnum;
// 是否是内置用户组
internal: boolean;
// 组ID
scopeId?: string;
}
export interface SystemUserGroupParams {

21
frontend/src/views/project-management/projectAndPermission/userGroup/addUserModal.vue
View File

@ -17,9 +17,9 @@
>
<MsUserSelector
v-model:value="form.name"
:type="UserRequesetTypeEnum.ORGANIZATION_PROJECT"
:load-option-params="{ organizationId: currentOrgId, projectId: props.projectId }"
disabled-key="memberFlag"
:type="UserRequesetTypeEnum.PROJECT_USER_GROUP"
:load-option-params="{ projectId: props.projectId, userRoleId: props.userRoleId }"
disabled-key="checkRoleFlag"
/>
</a-form-item>
</a-form>
@ -37,21 +37,18 @@
<script lang="ts" setup>
import { useI18n } from '@/hooks/useI18n';
import { reactive, ref, watchEffect, onUnmounted, computed } from 'vue';
import { addProjectMemberByOrg } from '@/api/modules/setting/organizationAndProject';
import { reactive, ref, watchEffect, onUnmounted } from 'vue';
import { addUserToUserGroup } from '@/api/modules/project-management/usergroup';
import { Message, type FormInstance, type ValidatedError } from '@arco-design/web-vue';
import MsUserSelector from '@/components/business/ms-user-selector/index.vue';
import { UserRequesetTypeEnum } from '@/components/business/ms-user-selector/utils';
import { useAppStore } from '@/store';
const { t } = useI18n();
const props = defineProps<{
visible: boolean;
projectId?: string;
projectId: string;
userRoleId: string;
}>();
const appStore = useAppStore();
const currentOrgId = computed(() => appStore.currentOrgId);
const emit = defineEmits<{
(e: 'cancel', shouldSearch: boolean): void;
@ -80,10 +77,10 @@
if (errors) {
loading.value = false;
}
const { projectId } = props;
const { projectId, userRoleId } = props;
try {
loading.value = true;
await addProjectMemberByOrg({ userIds: form.name, projectId });
await addUserToUserGroup({ userIds: form.name, projectId, userRoleId });
Message.success(t('system.organization.addSuccess'));
handleCancel(true);
} catch (error) {

3
frontend/src/views/project-management/projectAndPermission/userGroup/locale/en-US.ts
View File

@ -4,4 +4,7 @@ export default {
'project.usergroup.name': 'User Group Name',
'project.usergroup.memberCount': 'Member Count',
'project.userGroup.viewAuth': 'View Auth',
'project.userGroup.deleteName': 'Are you sure to delete: {name}?',
'project.userGroup.deleteTip':
'After deletion, the user group data under the project will be deleted together, please operate with caution!',
};

4
frontend/src/views/project-management/projectAndPermission/userGroup/locale/zh-CN.ts
View File

@ -4,4 +4,8 @@ export default {
'project.userGroup.name': '用户组名称',
'project.userGroup.memberCount': '成员数',
'project.userGroup.viewAuth': '查看权限',
'project.userGroup.deleteName': '是否删除: {name}？',
'project.userGroup.deleteTip': '删除后，项目下用户组数据将一起删除，请谨慎操作！',
'project.userGroup.addRequired': '用户组名称不能为空',
'project.userGroup.addUserGroup': '添加用户组',
};

175
frontend/src/views/project-management/projectAndPermission/userGroup/projectUserGroup.vue
View File

@ -13,7 +13,7 @@
<MsBaseTable class="mt-[16px]" v-bind="propsRes" v-on="propsEvent">
<template #name="{ record }">
<div class="flex flex-row items-center gap-[4px]">
<div class="one-text-line">{{ record.name }}</div>
<div class="one-line-text">{{ record.name }}</div>
<div class="ml-1 text-[var(--color-text-4)]">{{
`(${record.internal ? t('common.internal') : t('common.custom')})`
}}</div>
@ -25,66 +25,125 @@
}}</span>
</template>
<template #operation="{ record }">
<MsButton @click="showAuthDrawer(record)">{{ t('project.userGroup.viewAuth') }}</MsButton>
<a-divider />
<MsButton @click="handleDelete(record)">{{ t('common.delete') }}</MsButton>
<div class="flex flex-row flex-nowrap">
<MsButton @click="showAuthDrawer(record)">{{ t('project.userGroup.viewAuth') }}</MsButton>
<a-divider v-if="!record.internal" direction="vertical" />
<MsButton v-if="!record.internal" status="danger" @click="handleDelete(record)">{{
t('common.delete')
}}</MsButton>
</div>
</template>
</MsBaseTable>
<a-drawer
:width="680"
:width="928"
:visible="authVisible"
unmount-on-close
:footer="false"
:title="t('system.organization.addMember')"
:footer="!currentItem.internal"
:title="currentItem.name"
:mask="false"
class="ms-drawer-no-mask"
@cancel="authVisible = false"
>
<AuthTable :current="currentItem" />
<AuthTable ref="authRef" :current="currentItem" />
<template #footer>
<div class="flex items-center justify-between">
<ms-button class="btn" :disabled="!canSave" @click="handleAuthReset">{{
t('system.userGroup.reset')
}}</ms-button>
<a-button class="btn" :disabled="!canSave" type="primary" @click="handleAuthSave">{{
t('common.save')
}}</a-button>
</div>
</template>
</a-drawer>
<UserDrawer
:visible="userVisible"
:rganization-id="appStore.currentOrgId"
:project-id="appStore.currentProjectId"
:user-group-id="currentItem.id"
:project-id="currentProjectId"
:user-role-id="currentItem.id"
@request-fetch-data="fetchData"
@cancel="userVisible = false"
/>
<a-modal
v-model:visible="addUserGroupVisible"
:ok-text="t('common.create')"
title-align="start"
class="ms-modal-form ms-modal-medium"
width="480px"
>
<template #title> {{ t('project.userGroup.addUserGroup') }} </template>
<div class="form">
<a-form ref="addUserGroupFormRef" :model="form" size="large" layout="vertical">
<a-form-item
field="name"
:label="t('project.userGroup.name')"
:rules="[{ required: true, message: t('project.userGroup.addRequired') }]"
asterisk-position="end"
>
<a-input v-model="form.name" class="w-100" />
</a-form-item>
</a-form>
</div>
<template #footer>
<a-button type="secondary" :loading="addUserGroupLoading" @click="handleAddUGCancel(false)">
{{ t('common.cancel') }}
</a-button>
<a-button type="primary" :loading="addUserGroupLoading" @click="handleCreateUserGroup">
{{ t('common.add') }}
</a-button>
</template>
</a-modal>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ref, onMounted, computed, provide } from 'vue';
import { useI18n } from '@/hooks/useI18n';
import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
import useTable from '@/components/pure/ms-table/useTable';
import { ColumnEditTypeEnum, TableKeyEnum } from '@/enums/tableEnum';
import AuthTable from '@/components/business/ms-user-group-comp/authTable.vue';
import { MsTableColumn } from '@/components/pure/ms-table/type';
import { useTableStore, useAppStore } from '@/store';
import { useAppStore } from '@/store';
import { UserGroupItem, CurrentUserGroupItem } from '@/models/setting/usergroup';
import { AuthScopeEnum } from '@/enums/commonEnum';
import { postUserGroupList, deleteUserGroup } from '@/api/modules/project-management/usergroup';
import {
postUserGroupList,
deleteUserGroup,
updateOrAddProjectUserGroup,
} from '@/api/modules/project-management/usergroup';
import UserDrawer from './userDrawer.vue';
import MsButton from '@/components/pure/ms-button/index.vue';
import MsButton from '@/components/pure/ms-button/not-mr.vue';
import useModal from '@/hooks/useModal';
import { Message } from '@arco-design/web-vue';
import { Message, ValidatedError } from '@arco-design/web-vue';
provide('systemType', AuthScopeEnum.PROJECT);
const { openDeleteModal } = useModal();
const { t } = useI18n();
const appStore = useAppStore();
const tableStore = useTableStore();
const keyword = ref('');
const currentProjectId = computed(() => appStore.currentProjectId);
const form = ref({
name: '',
});
const addUserGroupFormRef = ref();
const addUserGroupLoading = ref(false);
const currentItem = ref<CurrentUserGroupItem>({
id: '',
name: '',
type: AuthScopeEnum.PROJECT,
internal: true,
scopeId: '',
});
const authVisible = ref(false);
const userVisible = ref(false);
const addUserGroupVisible = ref(false);
const authRef = ref();
const userGroupUsercolumns: MsTableColumn = [
const canSave = computed(() => {
return authRef.value?.canSave;
});
const userGroupcolumns: MsTableColumn = [
{
title: 'project.userGroup.name',
dataIndex: 'name',
@ -103,15 +162,32 @@
slotName: 'operation',
dataIndex: 'operation',
fixed: 'right',
width: 100,
width: 150,
},
];
tableStore.initColumn(TableKeyEnum.PROJECT_USER_GROUP, userGroupUsercolumns, 'drawer');
const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(postUserGroupList, {
tableKey: TableKeyEnum.PROJECT_USER_GROUP,
selectable: false,
noDisable: false,
});
const handleNameChange = async (record: UserGroupItem) => {
try {
await updateOrAddProjectUserGroup(record);
Message.success(t('common.updateSuccess'));
} catch (error) {
// eslint-disable-next-line no-console
console.log(error);
}
};
const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(
postUserGroupList,
{
tableKey: TableKeyEnum.PROJECT_USER_GROUP,
columns: userGroupcolumns,
selectable: false,
scroll: { x: '100%' },
noDisable: true,
},
undefined,
(record) => handleNameChange(record)
);
const fetchData = async () => {
setKeyword(keyword.value);
@ -128,14 +204,23 @@
};
const showUserDrawer = (record: UserGroupItem) => {
currentItem.value = record;
const { id, internal, name, scopeId, type } = record;
currentItem.value = { id, internal, name, scopeId, type };
userVisible.value = true;
};
const handleAuthReset = () => {
authRef.value?.handleReset();
};
const handleAuthSave = () => {
authRef.value?.handleSave();
};
const handleDelete = (record: UserGroupItem) => {
openDeleteModal({
title: t('system.organization.deleteName', { name: record.name }),
content: t('system.organization.deleteTip'),
title: t('project.userGroup.deleteName', { name: record.name }),
content: t('project.userGroup.deleteTip'),
onBeforeOk: async () => {
try {
await deleteUserGroup(record.id);
@ -148,8 +233,38 @@
},
});
};
const handleAddUGCancel = (shouldSearch: boolean) => {
addUserGroupFormRef.value?.resetFields();
addUserGroupVisible.value = false;
if (shouldSearch) {
fetchData();
}
};
const handleCreateUserGroup = () => {
addUserGroupFormRef.value?.validate(async (errors: undefined | Record<string, ValidatedError>) => {
if (errors) {
return;
}
try {
addUserGroupLoading.value = true;
await updateOrAddProjectUserGroup({
name: form.value.name,
scopeId: appStore.currentProjectId,
});
Message.success(t('common.createSuccess'));
handleAddUGCancel(true);
} catch (error) {
// eslint-disable-next-line no-console
console.error(error);
} finally {
addUserGroupLoading.value = false;
}
});
};
onMounted(() => {
setLoadListParams({ projectId: appStore.currentProjectId });
setLoadListParams({ projectId: currentProjectId.value });
fetchData();
});
</script>

44
frontend/src/views/project-management/projectAndPermission/userGroup/userDrawer.vue
View File

@ -42,18 +42,18 @@
</a-drawer>
<AddUserModal
:project-id="props.projectId"
:organization-id="props.organizationId"
:user-role-id="props.userRoleId"
:visible="userVisible"
@cancel="handleHideUserModal"
/>
</template>
<script lang="ts" setup>
import { postProjectMemberByProjectId, deleteProjectMemberByOrg } from '@/api/modules/setting/organizationAndProject';
import { postUserByUserGroup, deleteUserFromUserGroup } from '@/api/modules/project-management/usergroup';
import { MsTableColumn } from '@/components/pure/ms-table/type';
import useTable from '@/components/pure/ms-table/useTable';
import { useI18n } from '@/hooks/useI18n';
import { watch, ref } from 'vue';
import { ref, watchEffect } from 'vue';
import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
import AddUserModal from './addUserModal.vue';
import { TableData, Message } from '@arco-design/web-vue';
@ -61,8 +61,8 @@
export interface projectDrawerProps {
visible: boolean;
organizationId?: string;
projectId?: string;
userRoleId: string;
projectId: string;
}
const { t } = useI18n();
const props = defineProps<projectDrawerProps>();
@ -98,7 +98,7 @@
{ title: 'system.organization.operation', slotName: 'operation' },
];
const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(postProjectMemberByProjectId, {
const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(postUserByUserGroup, {
heightUsed: 240,
columns: projectColumn,
scroll: { x: '100%' },
@ -134,34 +134,26 @@
const handleRemove = async (record: TableData) => {
try {
if (props.projectId) {
await deleteProjectMemberByOrg(props.projectId, record.id);
const { projectId, userRoleId } = props;
if (projectId && userRoleId) {
await deleteUserFromUserGroup({ projectId, userRoleId, userIds: [record.id] });
}
Message.success(t('common.removeSuccess'));
fetchData();
emit('requestFetchData');
} catch (error) {
// eslint-disable-next-line no-console
console.error(error);
}
};
watch(
() => props.projectId,
() => {
setLoadListParams({ projectId: props.projectId });
watchEffect(() => {
currentVisible.value = props.visible;
});
watchEffect(() => {
const { projectId, userRoleId } = props;
if (projectId && userRoleId) {
setLoadListParams({ projectId, userRoleId });
fetchData();
}
);
watch(
() => props.visible,
(visible) => {
currentVisible.value = visible;
}
);
});
</script>
<style lang="less" scoped>
:deep(.custom-height) {
height: 100vh !important;
border: 1px solid red;
}
</style>

2
frontend/src/views/setting/organization/project/orgProject.vue
View File

@ -22,7 +22,7 @@
</a-tooltip>
</template>
<template #creator="{ record }">
<MsUserAdminDiv :is-admin="record.projectCreateUserIsAdmin" :name="record.createUser" />
<MsUserAdminDiv :is-admin="record.orgCreateUserIsAdmin" :name="record.createUser" />
</template>
<template #memberCount="{ record }">
<span class="cursor-pointer text-[rgb(var(--primary-5))]" @click="showUserDrawer(record)">{{