From 8d8e26e62384f954cb40bf9c77610a253b0be06d Mon Sep 17 00:00:00 2001
From: RubyLiu <liulubingjava@163.com>
Date: Fri, 15 Sep 2023 17:12:48 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E9=A1=B9=E7=9B=AE=E7=AE=A1=E7=90=86):=20?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=BB=84=E9=A1=B5=E9=9D=A2=E6=8E=A5=E5=8F=A3?=
 =?UTF-8?q?=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/project-management/usergroup.ts   |  30 +--
 .../requrls/project-management/usergroup.ts   |   6 +-
 .../business/ms-user-group-comp/authTable.vue |  10 +-
 .../createOrUpdateUserGroup.vue               |   5 +-
 .../business/ms-user-selector/utils.ts        |   8 +-
 .../src/components/pure/ms-button/not-mr.vue  |  70 +++++++
 frontend/src/models/setting/usergroup.ts      |   2 +
 .../userGroup/addUserModal.vue                |  21 +--
 .../userGroup/locale/en-US.ts                 |   3 +
 .../userGroup/locale/zh-CN.ts                 |   4 +
 .../userGroup/projectUserGroup.vue            | 175 +++++++++++++++---
 .../userGroup/userDrawer.vue                  |  44 ++---
 .../organization/project/orgProject.vue       |   2 +-
 13 files changed, 287 insertions(+), 93 deletions(-)
 create mode 100644 frontend/src/components/pure/ms-button/not-mr.vue

diff --git a/frontend/src/api/modules/project-management/usergroup.ts b/frontend/src/api/modules/project-management/usergroup.ts
index 018b0bd7d2..762feb4022 100644
--- a/frontend/src/api/modules/project-management/usergroup.ts
+++ b/frontend/src/api/modules/project-management/usergroup.ts
@@ -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 });
 }
diff --git a/frontend/src/api/requrls/project-management/usergroup.ts b/frontend/src/api/requrls/project-management/usergroup.ts
index cc21a909a4..b8064bffab 100644
--- a/frontend/src/api/requrls/project-management/usergroup.ts
+++ b/frontend/src/api/requrls/project-management/usergroup.ts
@@ -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/';
diff --git a/frontend/src/components/business/ms-user-group-comp/authTable.vue b/frontend/src/components/business/ms-user-group-comp/authTable.vue
index fbc6eca160..de2506d8a2 100644
--- a/frontend/src/components/business/ms-user-group-comp/authTable.vue
+++ b/frontend/src/components/business/ms-user-group-comp/authTable.vue
@@ -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);
diff --git a/frontend/src/components/business/ms-user-group-comp/createOrUpdateUserGroup.vue b/frontend/src/components/business/ms-user-group-comp/createOrUpdateUserGroup.vue
index b409d43e29..5709d4e357 100644
--- a/frontend/src/components/business/ms-user-group-comp/createOrUpdateUserGroup.vue
+++ b/frontend/src/components/business/ms-user-group-comp/createOrUpdateUserGroup.vue
@@ -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(
diff --git a/frontend/src/components/business/ms-user-selector/utils.ts b/frontend/src/components/business/ms-user-selector/utils.ts
index 8a60c6f7ed..07f92260fa 100644
--- a/frontend/src/components/business/ms-user-selector/utils.ts
+++ b/frontend/src/components/business/ms-user-selector/utils.ts
@@ -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);
+  }
 }
diff --git a/frontend/src/components/pure/ms-button/not-mr.vue b/frontend/src/components/pure/ms-button/not-mr.vue
new file mode 100644
index 0000000000..297654cd35
--- /dev/null
+++ b/frontend/src/components/pure/ms-button/not-mr.vue
@@ -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>
diff --git a/frontend/src/models/setting/usergroup.ts b/frontend/src/models/setting/usergroup.ts
index 9649a942a6..379171f279 100644
--- a/frontend/src/models/setting/usergroup.ts
+++ b/frontend/src/models/setting/usergroup.ts
@@ -48,6 +48,8 @@ export interface CurrentUserGroupItem {
   type: AuthScopeEnum;
   // 是否是内置用户组
   internal: boolean;
+  // 组ID
+  scopeId?: string;
 }
 
 export interface SystemUserGroupParams {
diff --git a/frontend/src/views/project-management/projectAndPermission/userGroup/addUserModal.vue b/frontend/src/views/project-management/projectAndPermission/userGroup/addUserModal.vue
index 04b1a05f2f..e599996031 100644
--- a/frontend/src/views/project-management/projectAndPermission/userGroup/addUserModal.vue
+++ b/frontend/src/views/project-management/projectAndPermission/userGroup/addUserModal.vue
@@ -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) {
diff --git a/frontend/src/views/project-management/projectAndPermission/userGroup/locale/en-US.ts b/frontend/src/views/project-management/projectAndPermission/userGroup/locale/en-US.ts
index c8e15010c4..8df7d18e0e 100644
--- a/frontend/src/views/project-management/projectAndPermission/userGroup/locale/en-US.ts
+++ b/frontend/src/views/project-management/projectAndPermission/userGroup/locale/en-US.ts
@@ -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!',
 };
diff --git a/frontend/src/views/project-management/projectAndPermission/userGroup/locale/zh-CN.ts b/frontend/src/views/project-management/projectAndPermission/userGroup/locale/zh-CN.ts
index 5abbc0986b..7e03f05156 100644
--- a/frontend/src/views/project-management/projectAndPermission/userGroup/locale/zh-CN.ts
+++ b/frontend/src/views/project-management/projectAndPermission/userGroup/locale/zh-CN.ts
@@ -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': '添加用户组',
 };
diff --git a/frontend/src/views/project-management/projectAndPermission/userGroup/projectUserGroup.vue b/frontend/src/views/project-management/projectAndPermission/userGroup/projectUserGroup.vue
index d8c301b118..7b8e375663 100644
--- a/frontend/src/views/project-management/projectAndPermission/userGroup/projectUserGroup.vue
+++ b/frontend/src/views/project-management/projectAndPermission/userGroup/projectUserGroup.vue
@@ -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>
diff --git a/frontend/src/views/project-management/projectAndPermission/userGroup/userDrawer.vue b/frontend/src/views/project-management/projectAndPermission/userGroup/userDrawer.vue
index 9c0a71678d..07fc1ef92d 100644
--- a/frontend/src/views/project-management/projectAndPermission/userGroup/userDrawer.vue
+++ b/frontend/src/views/project-management/projectAndPermission/userGroup/userDrawer.vue
@@ -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>
diff --git a/frontend/src/views/setting/organization/project/orgProject.vue b/frontend/src/views/setting/organization/project/orgProject.vue
index 5b90ac1253..f75c59e12d 100644
--- a/frontend/src/views/setting/organization/project/orgProject.vue
+++ b/frontend/src/views/setting/organization/project/orgProject.vue
@@ -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)">{{