feat(项目管理): 用户组页面接口对接
This commit is contained in:
parent
1880e03b3d
commit
8d8e26e623
|
@ -5,12 +5,12 @@ import {
|
||||||
UserGroupItem,
|
UserGroupItem,
|
||||||
SystemUserGroupParams,
|
SystemUserGroupParams,
|
||||||
UserGroupAuthSetting,
|
UserGroupAuthSetting,
|
||||||
SaveGlobalUSettingData,
|
|
||||||
UserTableItem,
|
UserTableItem,
|
||||||
|
SaveGlobalUSettingData,
|
||||||
} from '@/models/setting/usergroup';
|
} from '@/models/setting/usergroup';
|
||||||
|
|
||||||
// 项目-创建或修改用户组
|
// 项目-创建或修改用户组
|
||||||
export function updateOrAddUserGroup(data: SystemUserGroupParams) {
|
export function updateOrAddProjectUserGroup(data: SystemUserGroupParams) {
|
||||||
return MSR.post<UserGroupItem>({
|
return MSR.post<UserGroupItem>({
|
||||||
url: data.id ? ugUrl.updateUrl : ugUrl.addUrl,
|
url: data.id ? ugUrl.updateUrl : ugUrl.addUrl,
|
||||||
data,
|
data,
|
||||||
|
@ -27,22 +27,14 @@ export function deleteUserGroup(id: string) {
|
||||||
return MSR.get<string>({ url: `${ugUrl.deleteUrl}${id}` });
|
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 });
|
return MSR.post<UserGroupAuthSetting[]>({ url: ugUrl.updatePermissionUrl, data });
|
||||||
}
|
}
|
||||||
|
|
||||||
// 项目-获取用户组对应的权限
|
// 项目-获取用户组对应的权限
|
||||||
export function postAuthByUserGroup(data: TableQueryParams) {
|
export function getAuthByUserGroup(id: string) {
|
||||||
return MSR.post<CommonList<UserTableItem[]>>({ url: ugUrl.listPermissionUrl, data });
|
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 });
|
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 });
|
return MSR.post<string>({ url: ugUrl.addMemberUrl, data });
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,6 +5,6 @@ export const updatePermissionUrl = '/user/role/project/permission/update';
|
||||||
export const listMemberUrl = '/user/role/project/list-member';
|
export const listMemberUrl = '/user/role/project/list-member';
|
||||||
export const addMemberUrl = '/user/role/project/add-member';
|
export const addMemberUrl = '/user/role/project/add-member';
|
||||||
export const listPermissionUrl = '/user/role/project/permission/setting/';
|
export const listPermissionUrl = '/user/role/project/permission/setting/';
|
||||||
export const listUserGroupUrl = '/user/role/project/list/';
|
export const listUserGroupUrl = '/user/role/project/list';
|
||||||
export const getMemberOptionsUrl = '/api/project-management/usergroup/getMemberOptions';
|
export const getMemberOptionsUrl = '/user/role/project/get-member/option/';
|
||||||
export const deleteUrl = '/api/project-management/usergroup/delete';
|
export const deleteUrl = '/user/role/project/delete/';
|
||||||
|
|
|
@ -59,6 +59,7 @@
|
||||||
saveGlobalUSetting,
|
saveGlobalUSetting,
|
||||||
saveOrgUSetting,
|
saveOrgUSetting,
|
||||||
} from '@/api/modules/setting/usergroup';
|
} from '@/api/modules/setting/usergroup';
|
||||||
|
import { getAuthByUserGroup, saveProjectUGSetting } from '@/api/modules/project-management/usergroup';
|
||||||
import {
|
import {
|
||||||
UserGroupAuthSetting,
|
UserGroupAuthSetting,
|
||||||
AuthTableItem,
|
AuthTableItem,
|
||||||
|
@ -266,8 +267,7 @@
|
||||||
res = await getOrgUSetting(id);
|
res = await getOrgUSetting(id);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// TODO 项目的
|
res = await getAuthByUserGroup(id);
|
||||||
res = await getOrgUSetting(id);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
tableData.value = transformData(res);
|
tableData.value = transformData(res);
|
||||||
|
@ -306,7 +306,11 @@
|
||||||
permissions,
|
permissions,
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
// TODO 项目的
|
// 项目的
|
||||||
|
await saveProjectUGSetting({
|
||||||
|
userRoleId: props.current.id,
|
||||||
|
permissions,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
Message.success(t('common.saveSuccess'));
|
Message.success(t('common.saveSuccess'));
|
||||||
initData(props.current.id, props.current.internal);
|
initData(props.current.id, props.current.internal);
|
||||||
|
|
|
@ -51,6 +51,7 @@
|
||||||
import { Message } from '@arco-design/web-vue';
|
import { Message } from '@arco-design/web-vue';
|
||||||
import type { FormInstance, ValidatedError } from '@arco-design/web-vue';
|
import type { FormInstance, ValidatedError } from '@arco-design/web-vue';
|
||||||
import { updateOrAddOrgUserGroup, updateOrAddUserGroup } from '@/api/modules/setting/usergroup';
|
import { updateOrAddOrgUserGroup, updateOrAddUserGroup } from '@/api/modules/setting/usergroup';
|
||||||
|
import { updateOrAddProjectUserGroup } from '@/api/modules/project-management/usergroup';
|
||||||
import { UserGroupItem } from '@/models/setting/usergroup';
|
import { UserGroupItem } from '@/models/setting/usergroup';
|
||||||
import { AuthScopeEnum } from '@/enums/commonEnum';
|
import { AuthScopeEnum } from '@/enums/commonEnum';
|
||||||
import { useAppStore } from '@/store';
|
import { useAppStore } from '@/store';
|
||||||
|
@ -114,7 +115,6 @@
|
||||||
if (systemType === AuthScopeEnum.SYSTEM) {
|
if (systemType === AuthScopeEnum.SYSTEM) {
|
||||||
res = await updateOrAddUserGroup({ id: props.id, name: form.name, type: props.authScope });
|
res = await updateOrAddUserGroup({ id: props.id, name: form.name, type: props.authScope });
|
||||||
} else if (systemType === AuthScopeEnum.ORGANIZATION) {
|
} else if (systemType === AuthScopeEnum.ORGANIZATION) {
|
||||||
debugger;
|
|
||||||
// 组织用户组
|
// 组织用户组
|
||||||
res = await updateOrAddOrgUserGroup({
|
res = await updateOrAddOrgUserGroup({
|
||||||
id: props.id,
|
id: props.id,
|
||||||
|
@ -123,7 +123,8 @@
|
||||||
scopeId: appStore.currentOrgId,
|
scopeId: appStore.currentOrgId,
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
res = await updateOrAddUserGroup({ id: props.id, name: form.name, type: props.authScope });
|
// 项目用户组 项目用户组只有创建
|
||||||
|
res = await updateOrAddProjectUserGroup({ name: form.name });
|
||||||
}
|
}
|
||||||
if (res) {
|
if (res) {
|
||||||
Message.success(
|
Message.success(
|
||||||
|
|
|
@ -7,6 +7,7 @@ import {
|
||||||
import { getOrgUserGroupOption, getSystemUserGroupOption } from '@/api/modules/setting/usergroup';
|
import { getOrgUserGroupOption, getSystemUserGroupOption } from '@/api/modules/setting/usergroup';
|
||||||
import { getUser, getProjectList } from '@/api/modules/setting/member';
|
import { getUser, getProjectList } from '@/api/modules/setting/member';
|
||||||
import { getProjectMemberOptions } from '@/api/modules/project-management/projectMember';
|
import { getProjectMemberOptions } from '@/api/modules/project-management/projectMember';
|
||||||
|
import { getProjectUserGroupOptions } from '@/api/modules/project-management/usergroup';
|
||||||
|
|
||||||
// eslint-disable-next-line no-shadow
|
// eslint-disable-next-line no-shadow
|
||||||
export enum UserRequesetTypeEnum {
|
export enum UserRequesetTypeEnum {
|
||||||
|
@ -22,6 +23,7 @@ export enum UserRequesetTypeEnum {
|
||||||
SYSTEM_ORGANIZATION_PROJECT = 'SYSTEM_ORGANIZATION_PROJECT',
|
SYSTEM_ORGANIZATION_PROJECT = 'SYSTEM_ORGANIZATION_PROJECT',
|
||||||
SYSTEM_ORGANIZATION_MEMBER = 'SYSTEM_ORGANIZATION_MEMBER',
|
SYSTEM_ORGANIZATION_MEMBER = 'SYSTEM_ORGANIZATION_MEMBER',
|
||||||
PROJECT_PERMISSION_MEMBER = 'PROJECT_PERMISSION_MEMBER',
|
PROJECT_PERMISSION_MEMBER = 'PROJECT_PERMISSION_MEMBER',
|
||||||
|
PROJECT_USER_GROUP = 'PROJECT_USER_GROUP',
|
||||||
}
|
}
|
||||||
export default function initOptionsFunc(type: string, params: Record<string, any>) {
|
export default function initOptionsFunc(type: string, params: Record<string, any>) {
|
||||||
if (type === UserRequesetTypeEnum.SYSTEM_USER_GROUP) {
|
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);
|
return getUser(params.organizationId, params.keyword);
|
||||||
}
|
}
|
||||||
if (type === UserRequesetTypeEnum.PROJECT_PERMISSION_MEMBER) {
|
if (type === UserRequesetTypeEnum.PROJECT_PERMISSION_MEMBER) {
|
||||||
// 系统-组织-项目成员
|
// 项目-项目成员
|
||||||
return getProjectMemberOptions(params.projectId, params.keyword);
|
return getProjectMemberOptions(params.projectId, params.keyword);
|
||||||
}
|
}
|
||||||
|
if (type === UserRequesetTypeEnum.PROJECT_USER_GROUP) {
|
||||||
|
// 项目-用户组
|
||||||
|
return getProjectUserGroupOptions(params.projectId, params.userRoleId, params.keyword);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
|
@ -48,6 +48,8 @@ export interface CurrentUserGroupItem {
|
||||||
type: AuthScopeEnum;
|
type: AuthScopeEnum;
|
||||||
// 是否是内置用户组
|
// 是否是内置用户组
|
||||||
internal: boolean;
|
internal: boolean;
|
||||||
|
// 组ID
|
||||||
|
scopeId?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface SystemUserGroupParams {
|
export interface SystemUserGroupParams {
|
||||||
|
|
|
@ -17,9 +17,9 @@
|
||||||
>
|
>
|
||||||
<MsUserSelector
|
<MsUserSelector
|
||||||
v-model:value="form.name"
|
v-model:value="form.name"
|
||||||
:type="UserRequesetTypeEnum.ORGANIZATION_PROJECT"
|
:type="UserRequesetTypeEnum.PROJECT_USER_GROUP"
|
||||||
:load-option-params="{ organizationId: currentOrgId, projectId: props.projectId }"
|
:load-option-params="{ projectId: props.projectId, userRoleId: props.userRoleId }"
|
||||||
disabled-key="memberFlag"
|
disabled-key="checkRoleFlag"
|
||||||
/>
|
/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-form>
|
</a-form>
|
||||||
|
@ -37,21 +37,18 @@
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { useI18n } from '@/hooks/useI18n';
|
import { useI18n } from '@/hooks/useI18n';
|
||||||
import { reactive, ref, watchEffect, onUnmounted, computed } from 'vue';
|
import { reactive, ref, watchEffect, onUnmounted } from 'vue';
|
||||||
import { addProjectMemberByOrg } from '@/api/modules/setting/organizationAndProject';
|
import { addUserToUserGroup } from '@/api/modules/project-management/usergroup';
|
||||||
import { Message, type FormInstance, type ValidatedError } from '@arco-design/web-vue';
|
import { Message, type FormInstance, type ValidatedError } from '@arco-design/web-vue';
|
||||||
import MsUserSelector from '@/components/business/ms-user-selector/index.vue';
|
import MsUserSelector from '@/components/business/ms-user-selector/index.vue';
|
||||||
import { UserRequesetTypeEnum } from '@/components/business/ms-user-selector/utils';
|
import { UserRequesetTypeEnum } from '@/components/business/ms-user-selector/utils';
|
||||||
import { useAppStore } from '@/store';
|
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
visible: boolean;
|
visible: boolean;
|
||||||
projectId?: string;
|
projectId: string;
|
||||||
|
userRoleId: string;
|
||||||
}>();
|
}>();
|
||||||
const appStore = useAppStore();
|
|
||||||
|
|
||||||
const currentOrgId = computed(() => appStore.currentOrgId);
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
(e: 'cancel', shouldSearch: boolean): void;
|
(e: 'cancel', shouldSearch: boolean): void;
|
||||||
|
@ -80,10 +77,10 @@
|
||||||
if (errors) {
|
if (errors) {
|
||||||
loading.value = false;
|
loading.value = false;
|
||||||
}
|
}
|
||||||
const { projectId } = props;
|
const { projectId, userRoleId } = props;
|
||||||
try {
|
try {
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
await addProjectMemberByOrg({ userIds: form.name, projectId });
|
await addUserToUserGroup({ userIds: form.name, projectId, userRoleId });
|
||||||
Message.success(t('system.organization.addSuccess'));
|
Message.success(t('system.organization.addSuccess'));
|
||||||
handleCancel(true);
|
handleCancel(true);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
|
|
@ -4,4 +4,7 @@ export default {
|
||||||
'project.usergroup.name': 'User Group Name',
|
'project.usergroup.name': 'User Group Name',
|
||||||
'project.usergroup.memberCount': 'Member Count',
|
'project.usergroup.memberCount': 'Member Count',
|
||||||
'project.userGroup.viewAuth': 'View Auth',
|
'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,4 +4,8 @@ export default {
|
||||||
'project.userGroup.name': '用户组名称',
|
'project.userGroup.name': '用户组名称',
|
||||||
'project.userGroup.memberCount': '成员数',
|
'project.userGroup.memberCount': '成员数',
|
||||||
'project.userGroup.viewAuth': '查看权限',
|
'project.userGroup.viewAuth': '查看权限',
|
||||||
|
'project.userGroup.deleteName': '是否删除: {name}?',
|
||||||
|
'project.userGroup.deleteTip': '删除后,项目下用户组数据将一起删除,请谨慎操作!',
|
||||||
|
'project.userGroup.addRequired': '用户组名称不能为空',
|
||||||
|
'project.userGroup.addUserGroup': '添加用户组',
|
||||||
};
|
};
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
<MsBaseTable class="mt-[16px]" v-bind="propsRes" v-on="propsEvent">
|
<MsBaseTable class="mt-[16px]" v-bind="propsRes" v-on="propsEvent">
|
||||||
<template #name="{ record }">
|
<template #name="{ record }">
|
||||||
<div class="flex flex-row items-center gap-[4px]">
|
<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)]">{{
|
<div class="ml-1 text-[var(--color-text-4)]">{{
|
||||||
`(${record.internal ? t('common.internal') : t('common.custom')})`
|
`(${record.internal ? t('common.internal') : t('common.custom')})`
|
||||||
}}</div>
|
}}</div>
|
||||||
|
@ -25,66 +25,125 @@
|
||||||
}}</span>
|
}}</span>
|
||||||
</template>
|
</template>
|
||||||
<template #operation="{ record }">
|
<template #operation="{ record }">
|
||||||
<MsButton @click="showAuthDrawer(record)">{{ t('project.userGroup.viewAuth') }}</MsButton>
|
<div class="flex flex-row flex-nowrap">
|
||||||
<a-divider />
|
<MsButton @click="showAuthDrawer(record)">{{ t('project.userGroup.viewAuth') }}</MsButton>
|
||||||
<MsButton @click="handleDelete(record)">{{ t('common.delete') }}</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>
|
</template>
|
||||||
</MsBaseTable>
|
</MsBaseTable>
|
||||||
<a-drawer
|
<a-drawer
|
||||||
:width="680"
|
:width="928"
|
||||||
:visible="authVisible"
|
:visible="authVisible"
|
||||||
unmount-on-close
|
unmount-on-close
|
||||||
:footer="false"
|
:footer="!currentItem.internal"
|
||||||
:title="t('system.organization.addMember')"
|
:title="currentItem.name"
|
||||||
:mask="false"
|
:mask="false"
|
||||||
class="ms-drawer-no-mask"
|
class="ms-drawer-no-mask"
|
||||||
@cancel="authVisible = false"
|
@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>
|
</a-drawer>
|
||||||
<UserDrawer
|
<UserDrawer
|
||||||
:visible="userVisible"
|
:visible="userVisible"
|
||||||
:rganization-id="appStore.currentOrgId"
|
:project-id="currentProjectId"
|
||||||
:project-id="appStore.currentProjectId"
|
:user-role-id="currentItem.id"
|
||||||
:user-group-id="currentItem.id"
|
@request-fetch-data="fetchData"
|
||||||
@cancel="userVisible = false"
|
@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>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted } from 'vue';
|
import { ref, onMounted, computed, provide } from 'vue';
|
||||||
import { useI18n } from '@/hooks/useI18n';
|
import { useI18n } from '@/hooks/useI18n';
|
||||||
import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
|
import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
|
||||||
import useTable from '@/components/pure/ms-table/useTable';
|
import useTable from '@/components/pure/ms-table/useTable';
|
||||||
import { ColumnEditTypeEnum, TableKeyEnum } from '@/enums/tableEnum';
|
import { ColumnEditTypeEnum, TableKeyEnum } from '@/enums/tableEnum';
|
||||||
import AuthTable from '@/components/business/ms-user-group-comp/authTable.vue';
|
import AuthTable from '@/components/business/ms-user-group-comp/authTable.vue';
|
||||||
import { MsTableColumn } from '@/components/pure/ms-table/type';
|
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 { UserGroupItem, CurrentUserGroupItem } from '@/models/setting/usergroup';
|
||||||
import { AuthScopeEnum } from '@/enums/commonEnum';
|
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 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 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 { openDeleteModal } = useModal();
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const appStore = useAppStore();
|
const appStore = useAppStore();
|
||||||
const tableStore = useTableStore();
|
|
||||||
|
|
||||||
const keyword = ref('');
|
const keyword = ref('');
|
||||||
|
const currentProjectId = computed(() => appStore.currentProjectId);
|
||||||
|
const form = ref({
|
||||||
|
name: '',
|
||||||
|
});
|
||||||
|
const addUserGroupFormRef = ref();
|
||||||
|
const addUserGroupLoading = ref(false);
|
||||||
const currentItem = ref<CurrentUserGroupItem>({
|
const currentItem = ref<CurrentUserGroupItem>({
|
||||||
id: '',
|
id: '',
|
||||||
name: '',
|
name: '',
|
||||||
type: AuthScopeEnum.PROJECT,
|
type: AuthScopeEnum.PROJECT,
|
||||||
internal: true,
|
internal: true,
|
||||||
|
scopeId: '',
|
||||||
});
|
});
|
||||||
const authVisible = ref(false);
|
const authVisible = ref(false);
|
||||||
const userVisible = ref(false);
|
const userVisible = ref(false);
|
||||||
const addUserGroupVisible = 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',
|
title: 'project.userGroup.name',
|
||||||
dataIndex: 'name',
|
dataIndex: 'name',
|
||||||
|
@ -103,15 +162,32 @@
|
||||||
slotName: 'operation',
|
slotName: 'operation',
|
||||||
dataIndex: 'operation',
|
dataIndex: 'operation',
|
||||||
fixed: 'right',
|
fixed: 'right',
|
||||||
width: 100,
|
width: 150,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
tableStore.initColumn(TableKeyEnum.PROJECT_USER_GROUP, userGroupUsercolumns, 'drawer');
|
|
||||||
const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(postUserGroupList, {
|
const handleNameChange = async (record: UserGroupItem) => {
|
||||||
tableKey: TableKeyEnum.PROJECT_USER_GROUP,
|
try {
|
||||||
selectable: false,
|
await updateOrAddProjectUserGroup(record);
|
||||||
noDisable: false,
|
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 () => {
|
const fetchData = async () => {
|
||||||
setKeyword(keyword.value);
|
setKeyword(keyword.value);
|
||||||
|
@ -128,14 +204,23 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
const showUserDrawer = (record: UserGroupItem) => {
|
const showUserDrawer = (record: UserGroupItem) => {
|
||||||
currentItem.value = record;
|
const { id, internal, name, scopeId, type } = record;
|
||||||
|
currentItem.value = { id, internal, name, scopeId, type };
|
||||||
userVisible.value = true;
|
userVisible.value = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleAuthReset = () => {
|
||||||
|
authRef.value?.handleReset();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAuthSave = () => {
|
||||||
|
authRef.value?.handleSave();
|
||||||
|
};
|
||||||
|
|
||||||
const handleDelete = (record: UserGroupItem) => {
|
const handleDelete = (record: UserGroupItem) => {
|
||||||
openDeleteModal({
|
openDeleteModal({
|
||||||
title: t('system.organization.deleteName', { name: record.name }),
|
title: t('project.userGroup.deleteName', { name: record.name }),
|
||||||
content: t('system.organization.deleteTip'),
|
content: t('project.userGroup.deleteTip'),
|
||||||
onBeforeOk: async () => {
|
onBeforeOk: async () => {
|
||||||
try {
|
try {
|
||||||
await deleteUserGroup(record.id);
|
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(() => {
|
onMounted(() => {
|
||||||
setLoadListParams({ projectId: appStore.currentProjectId });
|
setLoadListParams({ projectId: currentProjectId.value });
|
||||||
fetchData();
|
fetchData();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -42,18 +42,18 @@
|
||||||
</a-drawer>
|
</a-drawer>
|
||||||
<AddUserModal
|
<AddUserModal
|
||||||
:project-id="props.projectId"
|
:project-id="props.projectId"
|
||||||
:organization-id="props.organizationId"
|
:user-role-id="props.userRoleId"
|
||||||
:visible="userVisible"
|
:visible="userVisible"
|
||||||
@cancel="handleHideUserModal"
|
@cancel="handleHideUserModal"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<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 { MsTableColumn } from '@/components/pure/ms-table/type';
|
||||||
import useTable from '@/components/pure/ms-table/useTable';
|
import useTable from '@/components/pure/ms-table/useTable';
|
||||||
import { useI18n } from '@/hooks/useI18n';
|
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 MsBaseTable from '@/components/pure/ms-table/base-table.vue';
|
||||||
import AddUserModal from './addUserModal.vue';
|
import AddUserModal from './addUserModal.vue';
|
||||||
import { TableData, Message } from '@arco-design/web-vue';
|
import { TableData, Message } from '@arco-design/web-vue';
|
||||||
|
@ -61,8 +61,8 @@
|
||||||
|
|
||||||
export interface projectDrawerProps {
|
export interface projectDrawerProps {
|
||||||
visible: boolean;
|
visible: boolean;
|
||||||
organizationId?: string;
|
userRoleId: string;
|
||||||
projectId?: string;
|
projectId: string;
|
||||||
}
|
}
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const props = defineProps<projectDrawerProps>();
|
const props = defineProps<projectDrawerProps>();
|
||||||
|
@ -98,7 +98,7 @@
|
||||||
{ title: 'system.organization.operation', slotName: 'operation' },
|
{ title: 'system.organization.operation', slotName: 'operation' },
|
||||||
];
|
];
|
||||||
|
|
||||||
const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(postProjectMemberByProjectId, {
|
const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(postUserByUserGroup, {
|
||||||
heightUsed: 240,
|
heightUsed: 240,
|
||||||
columns: projectColumn,
|
columns: projectColumn,
|
||||||
scroll: { x: '100%' },
|
scroll: { x: '100%' },
|
||||||
|
@ -134,34 +134,26 @@
|
||||||
|
|
||||||
const handleRemove = async (record: TableData) => {
|
const handleRemove = async (record: TableData) => {
|
||||||
try {
|
try {
|
||||||
if (props.projectId) {
|
const { projectId, userRoleId } = props;
|
||||||
await deleteProjectMemberByOrg(props.projectId, record.id);
|
if (projectId && userRoleId) {
|
||||||
|
await deleteUserFromUserGroup({ projectId, userRoleId, userIds: [record.id] });
|
||||||
}
|
}
|
||||||
Message.success(t('common.removeSuccess'));
|
Message.success(t('common.removeSuccess'));
|
||||||
fetchData();
|
fetchData();
|
||||||
|
emit('requestFetchData');
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
// eslint-disable-next-line no-console
|
// eslint-disable-next-line no-console
|
||||||
console.error(error);
|
console.error(error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
watch(
|
watchEffect(() => {
|
||||||
() => props.projectId,
|
currentVisible.value = props.visible;
|
||||||
() => {
|
});
|
||||||
setLoadListParams({ projectId: props.projectId });
|
watchEffect(() => {
|
||||||
|
const { projectId, userRoleId } = props;
|
||||||
|
if (projectId && userRoleId) {
|
||||||
|
setLoadListParams({ projectId, userRoleId });
|
||||||
fetchData();
|
fetchData();
|
||||||
}
|
}
|
||||||
);
|
});
|
||||||
watch(
|
|
||||||
() => props.visible,
|
|
||||||
(visible) => {
|
|
||||||
currentVisible.value = visible;
|
|
||||||
}
|
|
||||||
);
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
:deep(.custom-height) {
|
|
||||||
height: 100vh !important;
|
|
||||||
border: 1px solid red;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
@ -22,7 +22,7 @@
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</template>
|
</template>
|
||||||
<template #creator="{ record }">
|
<template #creator="{ record }">
|
||||||
<MsUserAdminDiv :is-admin="record.projectCreateUserIsAdmin" :name="record.createUser" />
|
<MsUserAdminDiv :is-admin="record.orgCreateUserIsAdmin" :name="record.createUser" />
|
||||||
</template>
|
</template>
|
||||||
<template #memberCount="{ record }">
|
<template #memberCount="{ record }">
|
||||||
<span class="cursor-pointer text-[rgb(var(--primary-5))]" @click="showUserDrawer(record)">{{
|
<span class="cursor-pointer text-[rgb(var(--primary-5))]" @click="showUserDrawer(record)">{{
|
||||||
|
|
Loading…
Reference in New Issue