From 70874bab313b82e96eff315b26e766e01dc993df Mon Sep 17 00:00:00 2001
From: RubyLiu <liulubingjava@163.com>
Date: Mon, 19 Jun 2023 19:00:13 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=B3=BB=E7=BB=9F=E8=AE=BE=E7=BD=AE):=20?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=BB=84=E7=AE=A1=E7=90=86=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/modules/api-test/index.ts    |   8 +-
 frontend/src/api/modules/system/usergroup.ts  |  30 +++++
 frontend/src/api/requrls/usergroup.ts         |  21 +++
 .../usergroup/deleteUserGroupModal.vue        |  58 ++++++++
 .../components/bussiness/usergroup/index.vue  | 126 +++++++++++++-----
 .../bussiness/usergroup/popconfirm.vue        |  69 +++++++---
 .../components/bussiness/usergroup/type.ts    |  23 +++-
 .../components/pure/ms-table/base-table.vue   |  33 ++---
 .../components/pure/ms-table/batchAction.vue  |  51 +++----
 frontend/src/components/pure/ms-table/type.ts |  11 ++
 frontend/src/models/api-test.ts               |   9 +-
 frontend/src/models/common.ts                 |   3 +-
 frontend/src/store/modules/system/types.ts    |   1 +
 .../src/store/modules/system/usergroup.ts     |   1 +
 frontend/src/views/api-test/index.vue         |  62 ++++++++-
 frontend/src/views/system/locale/en-US.ts     |   8 ++
 frontend/src/views/system/locale/zh-CN.ts     |   7 +
 frontend/src/views/system/usergroup/index.vue |   6 +-
 18 files changed, 407 insertions(+), 120 deletions(-)
 create mode 100644 frontend/src/api/modules/system/usergroup.ts
 create mode 100644 frontend/src/api/requrls/usergroup.ts
 create mode 100644 frontend/src/components/bussiness/usergroup/deleteUserGroupModal.vue

diff --git a/frontend/src/api/modules/api-test/index.ts b/frontend/src/api/modules/api-test/index.ts
index 0dd28e3ace..f468c35c50 100644
--- a/frontend/src/api/modules/api-test/index.ts
+++ b/frontend/src/api/modules/api-test/index.ts
@@ -1,16 +1,16 @@
 import MSR from '@/api/http/index';
 import { GetApiTestList, GetApiTestListUrl } from '@/api/requrls/api-test';
-import { TableQueryParams } from '@/models/common';
-import { CommonList } from '@/models/api-test';
+import { TableQueryParams, CommonList } from '@/models/common';
+import { APIListItemI } from '@/models/api-test';
 
 export function getTableList(params: TableQueryParams) {
   const { current, pageSize, sort, filter, keyword } = params;
-  return MSR.post<CommonList>({
+  return MSR.post<CommonList<APIListItemI>>({
     url: GetApiTestList,
     data: { current, pageSize, sort, filter, keyword, projectId: 'test-project-id' },
   });
 }
 
 export function getlist() {
-  return MSR.get<CommonList>({ url: GetApiTestListUrl });
+  return MSR.get<CommonList<APIListItemI>>({ url: GetApiTestListUrl });
 }
diff --git a/frontend/src/api/modules/system/usergroup.ts b/frontend/src/api/modules/system/usergroup.ts
new file mode 100644
index 0000000000..f3179f7b51
--- /dev/null
+++ b/frontend/src/api/modules/system/usergroup.ts
@@ -0,0 +1,30 @@
+import MSR from '@/api/http/index';
+import { updateUserGroupU, getUserGroupU, addUserGroupU, deleteUserGroupU } from '@/api/requrls/usergroup';
+// import { QueryParams, CommonList } from '@/models/common';
+import { UserGroupItem } from '@/components/bussiness/usergroup/type';
+
+export function updateOrAddUserGroup(data: Partial<UserGroupItem>) {
+  return MSR.post<UserGroupItem>({
+    url: data.id ? updateUserGroupU : addUserGroupU,
+    data,
+  });
+}
+
+export function updateSocpe(data: Partial<UserGroupItem>) {
+  return MSR.post<UserGroupItem>({
+    url: updateUserGroupU,
+    data,
+  });
+}
+
+export function getUserGroupList() {
+  return MSR.get<UserGroupItem[]>({ url: getUserGroupU });
+}
+
+export function deleteUserGroup(id: string) {
+  return MSR.get<string>({ url: `${deleteUserGroupU}${id}` });
+}
+
+export function getUsergroupInfo(id: string) {
+  return MSR.get<UserGroupItem>({ url: `${getUserGroupU}${id}` });
+}
diff --git a/frontend/src/api/requrls/usergroup.ts b/frontend/src/api/requrls/usergroup.ts
new file mode 100644
index 0000000000..20fef3266d
--- /dev/null
+++ b/frontend/src/api/requrls/usergroup.ts
@@ -0,0 +1,21 @@
+/** 修改用户组 */
+export const updateUserGroupU = `/user/role/global/update`;
+/** 编辑用户组对应的权限配置 */
+export const editGlobalUSetting = `/user/role/global/permission/update`;
+/** 添加用户组 */
+export const addUserGroupU = `/user/role/global/add`;
+/** 获取用户组对应的权限配置 */
+export const getGlobalUSetting = `/user/role/global/permission/list`;
+/** 获取用户组 */
+export const getUserGroupU = `/user/role/global/list`;
+/** 获取单个用户组信息 */
+export const getUsergroupInfoU = `/user/role/global/get/`;
+/** 删除用户组 */
+export const deleteUserGroupU = `/user/role/global/delete/`;
+
+/** 根据用户组获取用户列表 */
+export const getUserByUserGroupU = `/user/role/relation/global/list/`;
+/** 创建用户组添加用户 */
+export const addUserToUserGroupU = `/user/role/relation/global/add/`;
+/** 删除用户组用户 */
+export const deleteUserFromUserGroupU = `/user/role/relation/global/delete/`;
diff --git a/frontend/src/components/bussiness/usergroup/deleteUserGroupModal.vue b/frontend/src/components/bussiness/usergroup/deleteUserGroupModal.vue
new file mode 100644
index 0000000000..b7e5c27a05
--- /dev/null
+++ b/frontend/src/components/bussiness/usergroup/deleteUserGroupModal.vue
@@ -0,0 +1,58 @@
+<template>
+  <a-modal v-model:visible="currentVisible" modal-class="ug-delete">
+    <template #title>
+      <div class="flex w-full items-center">
+        <icon-exclamation-circle-fill class="danger" />
+        <span class="n1"> {{ t('system.userGroup.isDeleteUserGroup', { name: store.currentName }) }} </span>
+      </div>
+    </template>
+    <div>{{ t('system.userGroup.beforeDeleteUserGroup') }}</div>
+    <template #footer>
+      <a-button @click="emit('cancel')">{{ t('cancel') }}</a-button>
+      <a-button type="primary" @click="emit('ok')">{{ t('confirmDelete') }}</a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from '@/hooks/useI18n';
+  import { ref, watchEffect } from 'vue';
+  import useUserGroupStore from '@/store/modules/system/usergroup';
+
+  const { t } = useI18n();
+  const store = useUserGroupStore();
+
+  const props = defineProps<{
+    visible: boolean;
+  }>();
+
+  const currentVisible = ref(props.visible);
+
+  const emit = defineEmits<{
+    (e: 'cancel'): void;
+    (e: 'ok'): void;
+  }>();
+
+  watchEffect(() => {
+    currentVisible.value = props.visible;
+  });
+</script>
+
+<style scoped lang="less">
+  .ug-delete {
+    .danger {
+      font-size: 20px;
+      color: rgb(var(--danger-6));
+    }
+    .n1 {
+      color: var(--color-text-1);
+    }
+    .arco-modal-header {
+      border-bottom: none;
+    }
+    :deep(.arco-modal-title-align-center) {
+      justify-content: flex-start;
+      border: 1px solid red;
+    }
+  }
+</style>
diff --git a/frontend/src/components/bussiness/usergroup/index.vue b/frontend/src/components/bussiness/usergroup/index.vue
index 590a0c8539..86b2ca8fe5 100644
--- a/frontend/src/components/bussiness/usergroup/index.vue
+++ b/frontend/src/components/bussiness/usergroup/index.vue
@@ -13,7 +13,7 @@
       </div>
       <div>
         <div
-          v-for="element in customList"
+          v-for="element in userGroupList"
           :key="element.id"
           :class="{
             'flex': true,
@@ -28,13 +28,15 @@
             :visible="popVisible[element.id]"
             :type="popType"
             :default-name="popDefaultName"
+            :list="userGroupList"
             position="bl"
             @cancel="() => handlePopConfirmCancel(element.id)"
+            @submit="(value: CustomMoreActionItem) => handlePopConfirmSubmit(value,element.id)"
           >
             <div class="draglist-item flex grow flex-row justify-between">
               <div class="usergroup-title leading-[24px]">
                 <span class="n1">{{ element.name }}</span>
-                <span v-if="element.title" class="n4">{{ `（${element.title}）` }}</span>
+                <span v-if="element.type" class="n4">（{{ t(`system.userGroup.${element.type}`) }}）</span>
               </div>
               <div v-if="element.id === currentId">
                 <MsTableMoreAction :list="customAction" @select="(value) => handleMoreAction(value, element.id)" />
@@ -47,43 +49,38 @@
   </div>
   <AddUserModal :visible="addUserVisible" @cancel="addUserVisible = false" />
   <AddUserGroupModal :visible="addUserGroupVisible" @cancel="addUserGroupVisible = false" />
+  <DeleteUserGroupModal :visible="deleteUserGroupVisible" @cancel="deleteUserGroupVisible = false" />
 </template>
 
 <script lang="ts" setup>
-  import { ref, onBeforeMount } from 'vue';
+  import { ref, onMounted } from 'vue';
   import { useI18n } from '@/hooks/useI18n';
-  import { PopVisibleItem, RenameType, UserGroupListItem } from './type';
+  import { CustomMoreActionItem, PopVisibleItem, RenameType, UserGroupItem } from './type';
   import MsTableMoreAction from '@/components/pure/ms-table-more-action/index.vue';
   import { ActionsItem } from '@/components/pure/ms-table-more-action/types';
   import AddUserModal from './addUserModal.vue';
   import AddUserGroupModal from './addUserGroupModal.vue';
+  import DeleteUserGroupModal from './deleteUserGroupModal.vue';
   import popconfirm from './popconfirm.vue';
   import useUserGroupStore from '@/store/modules/system/usergroup';
+  import { getUserGroupList, updateOrAddUserGroup } from '@/api/modules/system/usergroup';
 
   const { t } = useI18n();
 
   const searchKey = ref('');
   const store = useUserGroupStore();
   // 请求loading
-  const currentId = ref(0);
+  const currentId = ref('');
   const addUserVisible = ref(false);
   const addUserGroupVisible = ref(false);
+  const deleteUserGroupVisible = ref(false);
   // 修改用户组名字，权限范围
   const popVisible = ref<PopVisibleItem>({});
   // 用户组和权限范围的状态
   const popType = ref<RenameType>('rename');
   const popDefaultName = ref('');
   // 用户列表
-  const customList = ref<UserGroupListItem[]>([
-    { name: '系统管理员', title: '', id: 1, authScope: 'system' },
-    { name: '系统成员', title: '', id: 2, authScope: 'system' },
-    { name: '组织管理员', title: '', id: 3, authScope: 'system' },
-    { name: '组织成员', title: '', id: 4, authScope: 'system' },
-    { name: '项目管理员', title: '', id: 5, authScope: 'system' },
-    { name: '项目成员', title: '', id: 6, authScope: 'system' },
-    { name: '自定义用户组1', title: '项目', id: 7, authScope: 'project' },
-    { name: '自定义用户组2', title: '组织', id: 8, authScope: 'oraganation' },
-  ]);
+  const userGroupList = ref<UserGroupItem[]>([]);
 
   const customAction: ActionsItem[] = [
     {
@@ -105,44 +102,99 @@
       eventTag: 'delete',
     },
   ];
-
+  // 新增用户组
   const addUserGroup = () => {
     // eslint-disable-next-line no-console
     addUserGroupVisible.value = true;
   };
-
-  function searchData(keyword: string) {
-    // eslint-disable-next-line no-console
-    console.log(keyword);
-  }
-
-  const handleMoreAction = (item: ActionsItem, id: number) => {
+  // 点击更多操作
+  const handleMoreAction = (item: ActionsItem, id: string) => {
     if (item.eventTag !== 'delete') {
       popType.value = item.eventTag as RenameType;
-      const tmpObj = customList.value.filter((ele) => ele.id === id)[0];
+      const tmpObj = userGroupList.value.filter((ele) => ele.id === id)[0];
       popVisible.value = { ...popVisible.value, [id]: true };
       if (item.eventTag === 'rename') {
         popDefaultName.value = tmpObj.name;
       } else {
-        popDefaultName.value = tmpObj.authScope;
+        popDefaultName.value = tmpObj.scopeId;
       }
+    } else {
+      // 删除用户组
+      deleteUserGroupVisible.value = true;
     }
   };
-  const handlePopConfirmCancel = (id: number) => {
+
+  // 点击用户组列表
+  const handleListItemClick = (element: UserGroupItem) => {
+    const { id, name, type } = element;
+    currentId.value = id;
+    store.setInfo({ currentName: name, currentTitle: type });
+  };
+
+  // 用户组数据初始化
+  const initData = async () => {
+    try {
+      const res = await getUserGroupList();
+      if (res.length > 0) {
+        userGroupList.value = res;
+        handleListItemClick(res[0]);
+        // 弹窗赋值
+        const tmpObj: PopVisibleItem = {};
+        res.forEach((element) => {
+          tmpObj[element.id] = false;
+        });
+        popVisible.value = tmpObj;
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    }
+  };
+  // 关闭confirm 弹窗
+  const handlePopConfirmCancel = (id: string) => {
     popVisible.value = { ...popVisible.value, [id]: false };
   };
-  onBeforeMount(() => {
-    const tmpObj: PopVisibleItem = {};
-    customList.value.forEach((element) => {
-      tmpObj[element.id] = false;
-    });
-    popVisible.value = tmpObj;
-  });
-  const handleListItemClick = (element: UserGroupListItem) => {
-    const { id, name, title } = element;
-    currentId.value = id;
-    store.setInfo({ currentName: name, currentTitle: title });
+  // 修改用户组名字，权限范围
+  const handlePopConfirmSubmit = async (item: CustomMoreActionItem, id: string) => {
+    popVisible.value = { ...popVisible.value, [id]: false };
+    if (item.eventKey === 'rename') {
+      // 修改用户组名字
+      try {
+        const res = await updateOrAddUserGroup({ id, name: item.name });
+        if (res) {
+          initData();
+        }
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+      }
+    } else {
+      // 修改权限范围
+      try {
+        const res = await updateOrAddUserGroup({ id, scopeId: item.name });
+        if (res) {
+          initData();
+        }
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+      }
+    }
+    initData();
   };
+
+  function searchData(eve: Event) {
+    if (!(eve.target as HTMLInputElement).value) {
+      initData();
+      return;
+    }
+    const keyword = (eve.target as HTMLInputElement).value;
+    const tmpArr = userGroupList.value.filter((ele) => ele.name.includes(keyword));
+    userGroupList.value = tmpArr;
+  }
+  onMounted(() => {
+    initData();
+  });
 </script>
 
 <style scoped lang="less">
diff --git a/frontend/src/components/bussiness/usergroup/popconfirm.vue b/frontend/src/components/bussiness/usergroup/popconfirm.vue
index 898f71b77f..e3c94889bf 100644
--- a/frontend/src/components/bussiness/usergroup/popconfirm.vue
+++ b/frontend/src/components/bussiness/usergroup/popconfirm.vue
@@ -3,21 +3,23 @@
     :popup-visible="renameVisible"
     :ok-text="t('system.userGroup.confirm')"
     :cancel-text="t('system.userGroup.cancel')"
-    :blur-to-close="false"
-    :click-to-close="false"
-    :click-outside-to-close="false"
-    @ok="handleSubmit('rename')"
-    @cancel="handleRenameCancel"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
     @popup-visible-change="() => (form.name = '')"
   >
     <template #icon>{{ null }}</template>
     <template #content>
-      <a-form :model="form" :label-col-props="{ span: 0 }" :wrapper-col-props="{ span: 24 }">
+      <a-form ref="formRef" :model="form" :label-col-props="{ span: 0 }" :wrapper-col-props="{ span: 24 }">
         <a-form-item>
           <div class="title">{{ message.title }}</div>
         </a-form-item>
-        <a-form-item field="name" :rules="[{ required: true, message: message.rule }]">
-          <a-input v-model="form.name" />
+        <a-form-item field="name" :rules="[{ validator: validateName }]">
+          <a-input v-if="props.type === 'rename'" v-model="form.name" />
+          <a-select v-else v-model="form.name" class="w-[176px]">
+            <a-option value="SYSTEM">{{ t('system.userGroup.SYSTEM') }}</a-option>
+            <a-option value="ORGANIZATION">{{ t('system.userGroup.ORGANIZATION') }}</a-option>
+            <a-option value="PROJECT">{{ t('system.userGroup.PROJECT') }}</a-option>
+          </a-select>
         </a-form-item>
       </a-form>
     </template>
@@ -27,20 +29,48 @@
 
 <script setup lang="ts">
   import { useI18n } from '@/hooks/useI18n';
-  import { watchEffect, reactive, ref, computed } from 'vue';
-  import { CustomMoreActionItem, RenameType } from './type';
+  import { watchEffect, reactive, ref, computed, onUnmounted } from 'vue';
+  import { CustomMoreActionItem, RenameType, UserGroupItem } from './type';
+  import { ValidatedError } from '@arco-design/web-vue';
+  import useUserGroupStore from '@/store/modules/system/usergroup';
 
   const { t } = useI18n();
+  const formRef = ref();
   const form = reactive({
     name: '',
   });
 
+  const store = useUserGroupStore();
+
   const props = defineProps<{
     visible: boolean;
     defaultName: string;
     type: RenameType;
+    list: UserGroupItem[];
   }>();
 
+  const validateName = (value: string, callback: (error?: string) => void) => {
+    if (props.type === 'rename') {
+      if (value === '') {
+        callback(t('system.userGroup.userGroupNameIsNotNone'));
+      } else {
+        if (value === props.defaultName) {
+          callback();
+        } else {
+          const isExist = props.list.some((item) => item.name === value);
+          if (isExist) {
+            callback(t('system.userGroup.userGroupNameIsExist', { name: value }));
+          }
+        }
+        callback();
+      }
+    } else if (value === '') {
+      callback(t('system.userGroup.userGroupAuthScopeIsNotNone'));
+    } else {
+      callback();
+    }
+  };
+
   const message = computed(() => {
     if (props.type === 'rename') {
       return {
@@ -55,22 +85,31 @@
   });
 
   const emit = defineEmits<{
-    (e: 'submit', value: CustomMoreActionItem): void;
+    (e: 'submit', value: CustomMoreActionItem): Promise<void>;
+    (e: 'cancel'): void;
   }>();
 
   const renameVisible = ref(props.visible);
 
-  const handleSubmit = (type: string) => {
-    // eslint-disable-next-line no-console
-    emit('submit', { eventKey: type, name: form.name });
+  const handleSubmit = () => {
+    formRef.value.validate((errors: undefined | Record<string, ValidatedError>) => {
+      if (!errors) {
+        emit('submit', { eventKey: props.type, name: form.name });
+      }
+    });
   };
-  const handleRenameCancel = () => {
+  const handleCancel = () => {
     form.name = '';
+    emit('cancel');
   };
   watchEffect(() => {
     renameVisible.value = props.visible;
     form.name = props.defaultName;
   });
+
+  onUnmounted(() => {
+    handleCancel();
+  });
 </script>
 
 <style lang="less" scoped>
diff --git a/frontend/src/components/bussiness/usergroup/type.ts b/frontend/src/components/bussiness/usergroup/type.ts
index 89a346fbd7..dc0b6a0656 100644
--- a/frontend/src/components/bussiness/usergroup/type.ts
+++ b/frontend/src/components/bussiness/usergroup/type.ts
@@ -14,7 +14,28 @@ export interface CustomMoreActionItem {
   name: string;
 }
 export interface PopVisibleItem {
-  [key: number]: boolean;
+  [key: string]: boolean;
 }
 
 export type RenameType = 'rename' | 'auth';
+
+export interface UserGroupItem {
+  // 组ID
+  id: string;
+  // 组名称
+  name: string;
+  // 组描述
+  description: string;
+  // 是否是内置用户组
+  internal: true;
+  // 所属类型
+  type: string;
+  createTime: number;
+  updateTime: number;
+  // 创建人
+  createUser: string;
+  // 应用范围
+  scopeId: string;
+  // 自定义排序
+  pos: number;
+}
diff --git a/frontend/src/components/pure/ms-table/base-table.vue b/frontend/src/components/pure/ms-table/base-table.vue
index 5b01ded91f..bb79060d60 100644
--- a/frontend/src/components/pure/ms-table/base-table.vue
+++ b/frontend/src/components/pure/ms-table/base-table.vue
@@ -17,17 +17,11 @@
         <slot :name="key" v-bind="{ rowIndex, record, column }"></slot>
       </template>
     </a-table>
-    <div v-if="selectCurrent > 0" class="mt-[21px]">
+    <div v-if="selectCurrent > 0 && attrs.showSelectAll" class="mt-[21px]">
       <batch-action
         :select-row-count="selectCurrent"
-        @batch-export="emit('batchExport')"
-        @batch-edit="emit('batchEdit')"
-        @batch-move="emit('batchMoveTo')"
-        @batch-copy="emit('batchCopyTo')"
-        @batch-related="emit('batchRelated')"
-        @batch-generate="emit('batchGenerate')"
-        @batch-add-public="emit('batchAddPublic')"
-        @batch-delete="emit('batchDelete')"
+        :action-config="props.actionConfig"
+        @batch-action="(item: BatchActionParams) => emit('batchAction', item)"
         @clear="selectionChange([], true)"
       />
     </div>
@@ -37,28 +31,19 @@
 <script lang="ts" setup>
   import { useSlots, useAttrs, computed, ref, onMounted } from 'vue';
   import selectAll from './select-all.vue';
-  import { MsTableProps, SelectAllEnum, MsPaginationI } from './type';
+  import { MsTableProps, SelectAllEnum, MsPaginationI, BatchActionParams, BatchActionConfig } from './type';
   import BatchAction from './batchAction.vue';
 
   import type { TableData } from '@arco-design/web-vue';
 
   const batchleft = ref('10px');
-  const props = defineProps({
-    selectedKeys: {
-      type: Array as unknown as () => (string | number)[],
-      default: () => [],
-    },
-  });
+  const props = defineProps<{
+    selectedKeys?: (string | number)[];
+    actionConfig?: BatchActionConfig;
+  }>();
   const emit = defineEmits<{
     (e: 'selectedChange', value: (string | number)[]): void;
-    (e: 'batchExport'): void;
-    (e: 'batchEdit'): void;
-    (e: 'batchMoveTo'): void;
-    (e: 'batchCopyTo'): void;
-    (e: 'batchRelated'): void;
-    (e: 'batchGenerate'): void;
-    (e: 'batchAddPublic'): void;
-    (e: 'batchDelete'): void;
+    (e: 'batchAction', value: BatchActionParams): void;
   }>();
   const isSelectAll = ref(false);
   // 全选按钮-当前的条数
diff --git a/frontend/src/components/pure/ms-table/batchAction.vue b/frontend/src/components/pure/ms-table/batchAction.vue
index 7b10ab9d09..6cc990f062 100644
--- a/frontend/src/components/pure/ms-table/batchAction.vue
+++ b/frontend/src/components/pure/ms-table/batchAction.vue
@@ -1,19 +1,29 @@
 <template>
-  <div class="ms-table__patch-action">
+  <div v-if="props.actionConfig" class="ms-table__patch-action">
     <span class="title">{{ t('msTable.batch.selected', { count: props.selectRowCount }) }}</span>
-    <a-button class="ml-4" type="outline" @click="emit('batchExport')">{{ t('msTable.batch.export') }}</a-button>
-    <a-button class="ml-3" type="outline" @click="emit('batchEdit')">{{ t('msTable.batch.edit') }}</a-button>
-    <a-button class="ml-3" type="outline" @click="emit('batchMoveTo')">{{ t('msTable.batch.moveTo') }}</a-button>
-    <a-button class="ml-3" type="outline" @click="emit('batchCopyTo')">{{ t('msTable.batch.copyTo') }}</a-button>
-    <div class="relative top-[2px] ml-3 inline-block">
+    <template v-for="element in props.actionConfig.baseAction" :key="element.label">
+      <a-divider v-if="element.isDivider" class="mx-0 my-[6px]" />
+      <a-button
+        v-else
+        :class="{
+          'delete': element.danger,
+          'ml-4': true,
+        }"
+        type="outline"
+        @click="emit('batchAction', element)"
+        >{{ t(element.label as string) }}</a-button
+      >
+    </template>
+    <div v-if="props.actionConfig.moreAction" class="relative top-[2px] ml-3 inline-block">
       <a-dropdown position="tr">
         <a-button type="outline"><a-icon-more /></a-button>
         <template #content>
-          <a-doption @click="emit('batchRelated')">{{ t('msTable.batch.related') }}</a-doption>
-          <a-doption @click="emit('batchGenerate')">{{ t('msTable.batch.generateDep') }}</a-doption>
-          <a-doption @click="emit('batchAddTo')">{{ t('msTable.batch.addPublic') }}</a-doption>
-          <a-divider margin="0" />
-          <a-doption class="delete" @click="emit('batchExport')">{{ t('msTable.batch.delete') }}</a-doption>
+          <template v-for="element in props.actionConfig.moreAction" :key="element.label">
+            <a-divider v-if="element.isDivider" margin="0" />
+            <a-doption v-else :value="element" :class="{ delete: element.danger }">{{
+              t(element.label as string)
+            }}</a-doption>
+          </template>
         </template>
       </a-dropdown>
     </div>
@@ -23,22 +33,15 @@
 
 <script lang="ts" setup>
   import { useI18n } from '@/hooks/useI18n';
+  import { BatchActionConfig, BatchActionParams } from './type';
 
   const { t } = useI18n();
-  const props = defineProps({
-    selectRowCount: {
-      type: Number,
-    },
-  });
+  const props = defineProps<{
+    selectRowCount?: number;
+    actionConfig?: BatchActionConfig;
+  }>();
   const emit = defineEmits<{
-    (e: 'batchExport'): void;
-    (e: 'batchEdit'): void;
-    (e: 'batchMoveTo'): void;
-    (e: 'batchCopyTo'): void;
-    (e: 'batchRelated'): void;
-    (e: 'batchGenerate'): void;
-    (e: 'batchAddTo'): void;
-    (e: 'batchDelete'): void;
+    (e: 'batchAction', value: BatchActionParams): void;
     (e: 'clear'): void;
   }>();
 </script>
diff --git a/frontend/src/components/pure/ms-table/type.ts b/frontend/src/components/pure/ms-table/type.ts
index cbfeedbc81..f2721937cd 100644
--- a/frontend/src/components/pure/ms-table/type.ts
+++ b/frontend/src/components/pure/ms-table/type.ts
@@ -70,3 +70,14 @@ export enum SelectAllEnum {
 export interface SortItem {
   [key: string]: string;
 }
+
+export interface BatchActionParams {
+  label?: string;
+  eventTag?: string;
+  isDivider?: boolean;
+  danger?: boolean;
+}
+export interface BatchActionConfig {
+  baseAction: BatchActionParams[];
+  moreAction?: BatchActionParams[];
+}
diff --git a/frontend/src/models/api-test.ts b/frontend/src/models/api-test.ts
index 450e9bebbb..afbb5d413c 100644
--- a/frontend/src/models/api-test.ts
+++ b/frontend/src/models/api-test.ts
@@ -1,4 +1,4 @@
-export interface ListItemI {
+export interface APIListItemI {
   id: number;
   type: string;
   receiver: string;
@@ -19,10 +19,3 @@ export interface SortItem {
 export interface FilterItem {
   [key: string]: any;
 }
-export interface CommonList {
-  [x: string]: any;
-  pageSize: number;
-  total: number;
-  current: number;
-  list: ListItemI;
-}
diff --git a/frontend/src/models/common.ts b/frontend/src/models/common.ts
index a1e24b46f1..a7af23514c 100644
--- a/frontend/src/models/common.ts
+++ b/frontend/src/models/common.ts
@@ -22,8 +22,7 @@ export interface TableQueryParams {
   keyword?: string;
   [key: string]: any;
 }
-
-export interface TableResult<T> {
+export interface CommonList<T> {
   [x: string]: any;
   pageSize: number;
   total: number;
diff --git a/frontend/src/store/modules/system/types.ts b/frontend/src/store/modules/system/types.ts
index e5f4dd12d6..2841938921 100644
--- a/frontend/src/store/modules/system/types.ts
+++ b/frontend/src/store/modules/system/types.ts
@@ -2,4 +2,5 @@ export interface UserGroupState {
   // 当前用户组名字
   currentName: string;
   currentTitle: string;
+  currentId: string;
 }
diff --git a/frontend/src/store/modules/system/usergroup.ts b/frontend/src/store/modules/system/usergroup.ts
index 44aa9b5679..5c0e0eb9dc 100644
--- a/frontend/src/store/modules/system/usergroup.ts
+++ b/frontend/src/store/modules/system/usergroup.ts
@@ -5,6 +5,7 @@ const useUserGroupStore = defineStore('userGroup', {
   state: (): UserGroupState => ({
     currentName: '',
     currentTitle: '',
+    currentId: '',
   }),
   getters: {
     userGroupInfo(state: UserGroupState): UserGroupState {
diff --git a/frontend/src/views/api-test/index.vue b/frontend/src/views/api-test/index.vue
index 08fdbf755b..ae15db5160 100644
--- a/frontend/src/views/api-test/index.vue
+++ b/frontend/src/views/api-test/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="h-[100vh] bg-white px-[20px] py-[16px] pb-0">
-    <ms-base-table v-bind="propsRes" v-on="propsEvent"> </ms-base-table>
+    <ms-base-table v-bind="propsRes" :action-config="actionConfig" v-on="propsEvent"> </ms-base-table>
   </div>
   <a-divider />
 </template>
@@ -8,7 +8,7 @@
 <script lang="ts" setup>
   import { onMounted } from 'vue';
   import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
-  import { MsTableColumn } from '@/components/pure/ms-table/type';
+  import { BatchActionConfig, MsTableColumn } from '@/components/pure/ms-table/type';
   import useTable from '@/components/pure/ms-table/useTable';
   import { getTableList } from '@/api/modules/api-test/index';
 
@@ -92,6 +92,64 @@
     },
   ];
 
+  const actionConfig: BatchActionConfig = {
+    baseAction: [
+      {
+        label: 'msTable.batch.export',
+        eventTag: 'batchExport',
+        isDivider: false,
+        danger: false,
+      },
+      {
+        label: 'msTable.batch.edit',
+        eventTag: 'batchEdit',
+        isDivider: false,
+        danger: false,
+      },
+      {
+        label: 'msTable.batch.moveTo',
+        eventTag: 'batchMoveTo',
+        isDivider: false,
+        danger: false,
+      },
+      {
+        label: 'msTable.batch.copyTo',
+        eventTag: 'batchCopyTo',
+        isDivider: false,
+        danger: false,
+      },
+    ],
+    moreAction: [
+      {
+        label: 'msTable.batch.related',
+        eventTag: 'batchRelated',
+        isDivider: false,
+        danger: false,
+      },
+      {
+        label: 'msTable.batch.generateDep',
+        eventTag: 'batchGenerate',
+        isDivider: false,
+        danger: false,
+      },
+      {
+        label: 'msTable.batch.addPublic',
+        eventTag: 'batchAddTo',
+        isDivider: false,
+        danger: false,
+      },
+      {
+        isDivider: true,
+      },
+      {
+        label: 'msTable.batch.delete',
+        eventTag: 'batchDelete',
+        isDivider: false,
+        danger: true,
+      },
+    ],
+  };
+
   const { propsRes, propsEvent, loadList } = useTable(getTableList, {
     columns,
     scroll: { y: 750, x: 2000 },
diff --git a/frontend/src/views/system/locale/en-US.ts b/frontend/src/views/system/locale/en-US.ts
index 387cce6085..a4d897989b 100644
--- a/frontend/src/views/system/locale/en-US.ts
+++ b/frontend/src/views/system/locale/en-US.ts
@@ -25,6 +25,7 @@ export default {
       revoke: 'revoke',
       pleaseSelectUser: 'Please select user',
       pleaseInputUserGroupName: 'Please input user group name,and not equal to system user group name',
+      userGroupNameIsExist: `Usergroup {name} is exist`,
       pleaseSelectAuthScope: 'Please select auth scope',
       userGroupNameIsNotNone: 'User group name is not none',
       authScopeIsNotNone: 'Auth scope is not none',
@@ -32,6 +33,13 @@ export default {
       confirm: 'Confirm',
       global: 'Global',
       searchPlacehoder: 'Search by ID/Name',
+      SYSTEM: '系统',
+      PROJECT: '项目',
+      ORGANIZATION: '组织',
+      isDeleteUserGroup: 'Delete or not: {name}?',
+      beforeDeleteUserGroup:
+        'After deletion, the project data under the organization will be deleted together. Please operate with caution!',
+      confirmDelete: 'Confirm delete',
     },
   },
   'system.user.createUser': 'Create User',
diff --git a/frontend/src/views/system/locale/zh-CN.ts b/frontend/src/views/system/locale/zh-CN.ts
index 2c8a10b625..f342352e5e 100644
--- a/frontend/src/views/system/locale/zh-CN.ts
+++ b/frontend/src/views/system/locale/zh-CN.ts
@@ -30,8 +30,15 @@ export default {
       authScopeIsNotNone: '权限范围不能为空',
       userIsNotNone: '成员不能为空',
       pleaseInputUserGroupName: '请输入用户组名称，且不与其他用户组名称重复',
+      userGroupNameIsExist: `用户组{name}已存在`,
       pleaseSelectAuthScope: '请选择用户组所属的权限范围',
       searchPlacehoder: '通过ID/名称搜索',
+      SYSTEM: '系统',
+      PROJECT: '项目',
+      ORGANIZATION: '组织',
+      isDeleteUserGroup: '是否删除: {name}?',
+      beforeDeleteUserGroup: '删除后，该组织下的项目数据将一起删除，请谨慎操作！',
+      confirmDelete: '确认删除',
     },
   },
   'system.user.createUser': '创建用户',
diff --git a/frontend/src/views/system/usergroup/index.vue b/frontend/src/views/system/usergroup/index.vue
index 27b8801900..f3b0f77058 100644
--- a/frontend/src/views/system/usergroup/index.vue
+++ b/frontend/src/views/system/usergroup/index.vue
@@ -3,8 +3,8 @@
     <div class="user-group-left">
       <UserGroupLeft />
     </div>
-    <div class="grow-1 overflow-x-scroll p-[24px]">
-      <div class="flex flex-row items-center justify-between">
+    <div class="grow-1 w-[100%] overflow-x-scroll p-[24px]">
+      <div class="grow-1 flex flex-row items-center justify-between">
         <div class="title">{{ store.userGroupInfo.currentName }}</div>
         <div class="flex items-center">
           <a-input class="w-[240px]" :placeholder="t('system.userGroup.searchPlacehoder')">
@@ -18,7 +18,7 @@
           </a-radio-group>
         </div>
       </div>
-      <div class="mt-[16px]">
+      <div class="grow-1 mt-[16px]">
         <user-table v-if="currentTable === 'user'" />
         <auth-table v-if="currentTable === 'auth'" />
       </div>