feat: 快速添加成员&快速添加成员组件

frontend/src/assets/style/arco-reset.less

@@ -172,6 +172,7 @@
   .btn-text-sec-disabled();
 }
 .arco-btn-outline {
+  border: 1px solid rgb(var(--primary-5)) !important;
   color: rgb(var(--primary-5)) !important;
   .btn-outline-primary-hover();
   .btn-outline-primary-active();

frontend/src/components/business/ms-user-group-comp/userTable.vue

@@ -1,6 +1,9 @@
 <template>
-  <a-button type="primary" @click="handleAddUser">{{ t('system.userGroup.quickAddUser') }}</a-button>
   <MsBaseTable class="mt-[16px]" v-bind="propsRes" v-on="propsEvent">
+    <template #quickCreate>
+      <!-- <a-button type="primary" @click="handleAddUser">{{ t('system.userGroup.quickAddUser') }}</a-button> -->
+      <MsConfirmUserSelector :ok-loading="okLoading" v-bind="userSelectorProps" @confirm="handleAddMember" />
+    </template>
     <template #action="{ record }">
       <MsRemoveButton
         :title="t('system.userGroup.removeName', { name: record.name })"
@@ -9,19 +12,20 @@
       />
     </template>
   </MsBaseTable>
-  <AddUserModal :current-id="props.current.id" :visible="userVisible" @cancel="handleAddUserModalCancel" />
 </template>
 
 <script lang="ts" setup>
-  import { computed, inject, ref, watchEffect } from 'vue';
+  import { computed, ref, watchEffect } from 'vue';
+  import { Message } from '@arco-design/web-vue';
 
   import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
   import { MsTableColumn } from '@/components/pure/ms-table/type';
   import useTable from '@/components/pure/ms-table/useTable';
   import MsRemoveButton from '@/components/business/ms-remove-button/MsRemoveButton.vue';
-  import AddUserModal from './addUserModal.vue';
 
   import {
+    addOrgUserToUserGroup,
+    addUserToUserGroup,
     deleteOrgUserFromUserGroup,
     deleteUserFromUserGroup,
     postOrgUserByUserGroup,
@@ -33,17 +37,39 @@
   import { CurrentUserGroupItem, UserTableItem } from '@/models/setting/usergroup';
   import { AuthScopeEnum } from '@/enums/commonEnum';
 
-  const systemType = inject<AuthScopeEnum>('systemType');
+  import { MsConfirmUserSelector } from '../ms-user-selector';
+  import { UserRequestTypeEnum } from '../ms-user-selector/utils';
 
+  const systemType = inject<AuthScopeEnum>('systemType');
   const { t } = useI18n();
   const appStore = useAppStore();
   const currentOrgId = computed(() => appStore.currentOrgId);
-  const userVisible = ref(false);
+  const okLoading = ref(false);
   const props = defineProps<{
     keyword: string;
     current: CurrentUserGroupItem;
   }>();
 
+  const userSelectorProps = computed(() => {
+    if (systemType === AuthScopeEnum.SYSTEM) {
+      return {
+        type: UserRequestTypeEnum.SYSTEM_USER_GROUP,
+        loadOptionParams: {
+          roleId: props.current.id,
+        },
+        disabledKey: 'exclude',
+      };
+    }
+    return {
+      type: UserRequestTypeEnum.ORGANIZATION_USER_GROUP,
+      loadOptionParams: {
+        roleId: props.current.id,
+        organizationId: currentOrgId.value,
+      },
+      disabledKey: 'checkRoleFlag',
+    };
+  });
+
   const userGroupUsercolumns: MsTableColumn = [
     {
       title: 'system.userGroup.name',
@@ -101,22 +127,42 @@
           userIds: [record.id],
         });
       }
-      // TODO 项目-用户组
       await fetchData();
     } catch (error) {
       // eslint-disable-next-line no-console
       console.log(error);
     }
   };
-  const handleAddUser = () => {
-    userVisible.value = true;
-  };
-  const handleAddUserModalCancel = (shouldSearch: boolean) => {
-    if (shouldSearch) {
-      fetchData();
+
+  /**
+   * 添加成员
+   * @param userIds 用户ids
+   */
+  const handleAddMember = async (userIds: string[], callback: (v: boolean) => void) => {
+    try {
+      okLoading.value = true;
+      if (systemType === AuthScopeEnum.SYSTEM) {
+        await addUserToUserGroup({ roleId: props.current.id, userIds });
+      }
+      if (systemType === AuthScopeEnum.ORGANIZATION) {
+        await addOrgUserToUserGroup({
+          userRoleId: props.current.id,
+          userIds,
+          organizationId: currentOrgId.value,
+        });
+      }
+      Message.success(t('common.addSuccess'));
+      await fetchData();
+      callback(true);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.log(e);
+      callback(false);
+    } finally {
+      okLoading.value = false;
     }
-    userVisible.value = false;
   };
+
   watchEffect(() => {
     if (props.current.id && currentOrgId.value) {
       if (systemType === AuthScopeEnum.SYSTEM) {

frontend/src/components/business/ms-user-selector/MsConfirmUserSelector.vue

@@ -0,0 +1,68 @@
+<template>
+  <div
+    v-if="!switchStatus"
+    class="flex cursor-pointer flex-row gap-[8px] text-[rgb(var(--primary-5))]"
+    @click="showUserSelector"
+  >
+    <div>
+      <MsIcon class="mr-[4px]" type="icon-icon_add_outlined" />
+    </div>
+    <div>{{ t('common.quickAddMember') }}</div>
+  </div>
+  <div v-else>
+    <div class="flex flex-row items-center">
+      <MsUserSelector v-bind="$attrs" v-model="memberList" class="w-[262px]" />
+      <a-button type="outline" :loading="props.okLoading" class="ml-[12px]" size="mini" @click="handleConfirm">
+        {{ t('common.confirm') }}
+      </a-button>
+      <div
+        class="ml-[8px] flex h-[24px] w-[48px] cursor-pointer items-center justify-center rounded-[4px] border border-[var(--color-text-input-border)] px-[11px] text-[12px] text-[var(--color-text-1)] hover:bg-[rgb(var(--primary-1))]"
+        @click="handleCancel"
+      >
+        {{ t('common.cancel') }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import MsIcon from '@/components/pure/ms-icon-font/index.vue';
+  import MsUserSelector from './index.vue';
+
+  import { useI18n } from '@/hooks/useI18n';
+
+  const { t } = useI18n();
+
+  const props = withDefaults(
+    defineProps<{
+      okLoading?: boolean;
+    }>(),
+    {
+      okLoading: false,
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'confirm', value: string[], callback: (v: boolean) => void): void;
+  }>();
+  const switchStatus = ref(false);
+  const memberList = ref<string[]>([]);
+
+  const handleConfirm = () => {
+    emit('confirm', memberList.value, (v) => {
+      switchStatus.value = !v;
+      if (v) {
+        memberList.value = [];
+      }
+    });
+  };
+  const handleCancel = () => {
+    if (props.okLoading) return;
+    switchStatus.value = false;
+    memberList.value = [];
+  };
+
+  const showUserSelector = () => {
+    switchStatus.value = true;
+  };
+</script>

frontend/src/components/business/ms-user-selector/index.ts

@@ -0,0 +1,2 @@
+export { default as MsUserSelector } from './index.vue';
+export { default as MsConfirmUserSelector } from './MsConfirmUserSelector.vue';

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

@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, onMounted, ref } from 'vue';
+  import { computed, ref } from 'vue';
   import { debounce } from 'lodash-es';
 
   import { useI18n } from '@/hooks/useI18n';
@@ -68,7 +68,7 @@
 
   const allOptions = ref<MsUserSelectorOption[]>([]);
   const currentLoadParams = ref<Record<string, any>>(props.loadOptionParams || {});
-  const loading = ref(false);
+  const loading = ref(true);
 
   const currentValue = computed(() => {
     return allOptions.value.filter((item) => props.modelValue.includes(item.id)) || [];
@@ -137,7 +137,7 @@
     );
   };
 
-  onMounted(async () => {
+  onBeforeMount(async () => {
     await loadList();
   });
 </script>

frontend/src/components/pure/ms-table/comp/pageSizeSelector.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="flex h-[32px] w-[289px] items-center gap-[4px]">
+    <div
+      v-for="item in option"
+      :key="item"
+      class="flex h-[28px] w-[49px] items-center justify-center"
+      :class="{ 'bg-[var(--color-bg-1)] text-[var(--color-text-4)]': item !== props.modelValue }"
+      @click="handleClick(item)"
+      >{{ item }}</div
+    >
+  </div>
+</template>
+
+<script lang="ts" setup>
+  const props = defineProps<{
+    modelValue: number;
+  }>();
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value: number): void;
+  }>();
+  const option = [10, 20, 30, 40, 50];
+  const handleClick = (value: number) => {
+    emit('update:modelValue', value);
+  };
+</script>

frontend/src/config/settings.json

@@ -13,7 +13,7 @@
   "tabBar": false,
   "serverMenu": [],
   "pageSize": 10,
-  "showPageSize": true,
+  "showPageSize": false,
   "showTotal": true,
   "showJumper": true,
   "hideOnSinglePage": false

frontend/src/locale/en-US/common.ts

@@ -61,4 +61,5 @@ export default {
   'common.setting': 'Setting',
   'common.resetDefault': 'Restore default',
   'common.pleaseSelect': 'Please Select',
+  'common.quickAddMember': 'Quick Add Member',
 };

frontend/src/locale/zh-CN/common.ts

@@ -65,4 +65,5 @@ export default {
   'common.tagPlaceholder': '添加标签回车结束',
   'common.batchModify': '批量修改',
   'common.pleaseSelect': '请选择',
+  'common.quickAddMember': '快速添加成员',
 };

frontend/src/router/routes/modules/projectManagement.ts

@@ -150,18 +150,16 @@ const ProjectManagement: AppRouteRecordRaw = {
       component: () =>
         import('@/views/project-management/projectAndPermission/menuManagement/components/falseAlermRule.vue'),
       meta: {
-        locale: 'project.menu.far',
+        locale: 'project.menu.API_ERROR_REPORT_RULE',
         roles: ['*'],
         breadcrumbs: [
           {
             name: ProjectManagementRouteEnum.PROJECT_MANAGEMENT_PERMISSION_MENU_MANAGEMENT,
-            locale: 'project.permission.menuManagement',
+            locale: 'project.projectManagement.menuManagement',
           },
           {
             name: ProjectManagementRouteEnum.PROJECT_MANAGEMENT_MENU_MANAGEMENT_ERROR_REPORT_RULE,
             locale: 'menu.projectManagement.menuManagementErrorReportRule',
-            editTag: 'id',
-            editLocale: 'project.menu.far',
           },
         ],
       },

frontend/src/views/project-management/projectAndPermission/menuManagement/components/falseAlermRule.vue

@@ -1,5 +1,5 @@
 <template>
-  <MsCard simple>
+  <MsCard has-breadcrumb>
     <div class="mb-4 flex items-center justify-between">
       <a-button type="primary" @click="showAddRule(undefined)">{{ t('project.menu.addFalseAlertRules') }}</a-button>
       <a-input-search

frontend/src/views/setting/system/organizationAndProject/index.vue

@@ -26,7 +26,7 @@
     </div>
     <div>
       <SystemOrganization v-if="currentTable === 'organization'" ref="orgTableRef" :keyword="currentKeyword" />
-      <SystemProject v-if="currentTable === 'project'" ref="projectTabeRef" :keyword="currentKeyword" />
+      <SystemProject v-if="currentTable === 'project'" ref="projectTableRef" :keyword="currentKeyword" />
     </div>
   </MsCard>
   <AddOrganizationModal :visible="organizationVisible" @submit="tableSearch" @cancel="handleAddOrganizationCancel" />
@@ -55,7 +55,7 @@
   const projectCount = ref(0);
   const currentKeyword = ref('');
   const orgTableRef = ref();
-  const projectTabeRef = ref();
+  const projectTableRef = ref();
   const projectVisible = ref(false);
 
   // 初始化项目数量和组织数量
@@ -79,11 +79,11 @@
           orgTableRef.value?.fetchData();
         });
       }
-    } else if (projectTabeRef.value) {
-      projectTabeRef.value.fetchData();
+    } else if (projectTableRef.value) {
+      projectTableRef.value.fetchData();
     } else {
       nextTick(() => {
-        projectTabeRef.value?.fetchData();
+        projectTableRef.value?.fetchData();
       });
     }
     initOrgAndProjectCount();