feat(系统设置): 系统用户组管理新增用户接口对接

frontend/src/api/modules/setting/usergroup.ts

@@ -8,6 +8,8 @@ import {
   editGlobalUSettingUrl,
   postUserByUserGroupUrl,
   deleteUserFromUserGroupUrl,
+  getUserListUrl,
+  addUserToUserGroupUrl,
 } from '@/api/requrls/setting/usergroup';
 import { TableQueryParams, CommonList } from '@/models/common';
 import { UserGroupItem, UserGroupAuthSeting, SaveGlobalUSettingData, UserTableItem } from '@/models/setting/usergroup';
@@ -53,3 +55,11 @@ export function postUserByUserGroup(data: TableQueryParams) {
 export function deleteUserFromUserGroup(id: string) {
   return MSR.get<string>({ url: `${deleteUserFromUserGroupUrl}${id}` });
 }
+
+export function getUserList() {
+  return MSR.get<UserTableItem[]>({ url: getUserListUrl });
+}
+
+export function addUserToUserGroup(data: { roleId: string; userIds: string[] }) {
+  return MSR.post<string>({ url: addUserToUserGroupUrl, data });
+}

frontend/src/api/requrls/setting/usergroup.ts

@@ -16,6 +16,8 @@ export const deleteUserGroupU = `/user/role/global/delete/`;
 /** 根据用户组获取用户列表 */
 export const postUserByUserGroupUrl = `/user/role/relation/global/list`;
 /** 创建用户组添加用户 */
-export const addUserToUserGroupU = `/user/role/relation/global/add/`;
+export const addUserToUserGroupUrl = `/user/role/relation/global/add`;
 /** 删除用户组用户 */
 export const deleteUserFromUserGroupUrl = `/user/role/relation/global/delete/`;
+/** 获取所有用户 */
+export const getUserListUrl = '/system/user/list';

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

@@ -1,4 +1,9 @@
 /** 表格样式  **/
+.arco-table-container {
+  border-top: none !important;
+  border-right: none !important;
+  border-left: none !important;
+}
 .arco-table-cell {
   .circle {
     @apply inline-block rounded-full;

frontend/src/components/pure/ms-table/base-table.vue

@@ -152,7 +152,7 @@
     }
     switch (attrs.size) {
       case 'small':
-        return '10px';
+        return '15px';
       case 'mini':
         return '10px';
       default:

frontend/src/components/pure/ms-table/useTable.ts

@@ -51,6 +51,7 @@ export default function useTableProps(
     enableDrag: false,
     showSelectAll: true,
     showSetting: true,
+    columnResizable: true,
     ...props,
   };
 

frontend/src/models/setting/usergroup.ts

@@ -94,8 +94,18 @@ export interface SaveGlobalUSettingData {
 
 export interface UserTableItem {
   id: string;
-  userId: string;
   name: string;
   email: string;
+  password: string;
+  enable: boolean;
+  createTime: number;
+  updateTime: number;
+  language: string;
+  lastOrganizationId: string;
   phone: string;
+  source: string;
+  lastProjectId: string;
+  createUser: string;
+  updateUser: string;
+  deleted: boolean;
 }

frontend/src/views/setting/system/usergroup/components/addUserGroupModal.vue

@@ -92,4 +92,3 @@
     });
   };
 </script>
-@/models/setting/usergroup

frontend/src/views/setting/system/usergroup/components/addUserModal.vue

@@ -3,12 +3,14 @@
     v-model:visible="currentVisible"
     width="680px"
     :ok-text="t('system.userGroup.add')"
-    @ok="handelOk"
+    unmount-on-close
+    :ok-loading="loading"
+    :on-before-ok="handleBeforeOk"
     @cancel="handleCancel"
   >
     <template #title> {{ t('system.userGroup.addUser') }} </template>
     <div class="form">
-      <a-form :model="form" size="large" :style="{ width: '600px' }" layout="vertical">
+      <a-form ref="formRef" :model="form" size="large" :style="{ width: '600px' }" layout="vertical">
         <a-form-item
           field="name"
           :label="t('system.userGroup.user')"
@@ -39,14 +41,24 @@
 
 <script lang="ts" setup>
   import { useI18n } from '@/hooks/useI18n';
-  import { reactive, ref, watchEffect, onUnmounted } from 'vue';
-  import { UserOption } from '@/models/setting/usergroup';
+  import { reactive, ref, watchEffect, onUnmounted, onMounted } from 'vue';
+  import { UserTableItem } from '@/models/setting/usergroup';
+  import { useUserGroupStore } from '@/store';
+  import { getUserList, addUserToUserGroup } from '@/api/modules/setting/usergroup';
+  import type { FormInstance, ValidatedError } from '@arco-design/web-vue';
 
   const { t } = useI18n();
   const props = defineProps<{
     visible: boolean;
   }>();
 
+  const store = useUserGroupStore();
+
+  const emit = defineEmits<{
+    (e: 'cancel'): void;
+    (e: 'submit', value: string[]): void;
+  }>();
+
   const fieldNames = { value: 'id', label: 'name' };
 
   const currentVisible = ref(props.visible);
@@ -58,38 +70,38 @@
 
   const labelCache = new Map();
 
-  const allOption: UserOption[] = [
-    { id: 1, name: 'llb', email: 'name@163.com' },
-    {
-      id: 2,
-      name: 'rubyliu',
-      email: 'rubyliu@163.com',
-    },
-    {
-      id: 3,
-      name: 'jack',
-      email: 'jack@163.com',
-    },
-  ];
+  const allOption = ref<UserTableItem[]>([]);
 
-  const userOptions = ref<UserOption[]>(allOption);
+  const userOptions = ref<UserTableItem[]>([]);
+
+  const formRef = ref<FormInstance>();
+
+  const initUserList = async () => {
+    const res = await getUserList();
+    allOption.value = res;
+    userOptions.value = res;
+  };
 
   watchEffect(() => {
     currentVisible.value = props.visible;
   });
-  const emit = defineEmits<{
-    (e: 'cancel'): void;
-  }>();
 
   const handleCancel = () => {
     emit('cancel');
   };
 
-  const handelOk = () => {
-    // eslint-disable-next-line no-console
-    console.log('ok');
-    handleCancel();
+  const handleBeforeOk = () => {
+    loading.value = true;
+    formRef.value?.validate(async (errors: undefined | Record<string, ValidatedError>) => {
+      if (errors) {
+        loading.value = false;
+        return false;
+      }
+      await addUserToUserGroup({ roleId: store.currentId, userIds: form.name });
+      return true;
+    });
   };
+
   const handleSearch = (value: string) => {
     if (value) {
       loading.value = true;
@@ -98,11 +110,18 @@
         loading.value = false;
       }, 60);
     } else {
-      userOptions.value = allOption;
+      userOptions.value = allOption.value;
     }
   };
+
+  onMounted(() => {
+    initUserList();
+  });
+
   onUnmounted(() => {
     labelCache.clear();
+    form.name = [];
+    loading.value = false;
   });
 </script>
 
@@ -114,4 +133,3 @@
     color: var(--color-text-4);
   }
 </style>
-@/models/setting/usergroup

frontend/src/views/setting/system/usergroup/components/authTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative">
+  <div class="usergroup-auth-table">
     <a-table
       :span-method="dataSpanMethod"
       :scroll="{ y: '860px', x: '800px' }"
@@ -284,15 +284,23 @@
 </script>
 
 <style scoped lang="less">
-  .action {
-    position: absolute;
-    right: 24px;
-    bottom: 0;
-    left: 24px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: calc(100% - 24px);
+  .usergroup-auth-table {
+    position: relative;
+    height: 100vh;
+    :deep(.arco-table-container) {
+      border-top: 1px solid var(--color-text-n8) !important;
+      border-right: 1px solid var(--color-text-n8) !important;
+      border-left: 1px solid var(--color-text-n8) !important;
+    }
+    .action {
+      position: absolute;
+      right: 24px;
+      bottom: 0;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: calc(100% - 24px);
+    }
   }
 </style>
-@/models/setting/usergroup @/api/modules/setting/usergroup

frontend/src/views/setting/system/usergroup/components/userTable.vue

@@ -1,9 +1,11 @@
 <template>
-  <MsBaseTable v-bind="propsRes" v-on="propsEvent">
+  <a-button type="primary" @click="handleAddUser">{{ t('system.userGroup.quickAddUser') }}</a-button>
+  <MsBaseTable class="mt-[16px]" v-bind="propsRes" v-on="propsEvent">
     <template #action="{ record }">
       <ms-button @click="handleRemove(record)">{{ t('system.userGroup.remove') }}</ms-button>
     </template>
   </MsBaseTable>
+  <AddUserModal :visible="userVisible" @cancel="handleAddUserModalCancel" />
 </template>
 
 <script lang="ts" setup>
@@ -11,16 +13,18 @@
   import useTable from '@/components/pure/ms-table/useTable';
   import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
   import { useUserGroupStore, useTableStore } from '@/store';
-  import { watchEffect } from 'vue';
+  import { watchEffect, ref } from 'vue';
   import { postUserByUserGroup, deleteUserFromUserGroup } from '@/api/modules/setting/usergroup';
   import { UserTableItem } from '@/models/setting/usergroup';
   import { TableKeyEnum } from '@/enums/tableEnum';
   import MsButton from '@/components/pure/ms-button/index.vue';
   import { MsTableColumn } from '@/components/pure/ms-table/type';
+  import AddUserModal from './addUserModal.vue';
 
   const { t } = useI18n();
   const store = useUserGroupStore();
   const tableStore = useTableStore();
+  const userVisible = ref(false);
 
   const userGroupUsercolumns: MsTableColumn = [
     {
@@ -63,8 +67,19 @@
     await loadList();
   };
   const handleRemove = async (record: UserTableItem) => {
-    await deleteUserFromUserGroup(record.id);
-    await fetchData();
+    try {
+      await deleteUserFromUserGroup(record.id);
+      await fetchData();
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
+  };
+  const handleAddUser = () => {
+    userVisible.value = true;
+  };
+  const handleAddUserModalCancel = () => {
+    userVisible.value = false;
   };
   watchEffect(() => {
     if (store.currentId) {

frontend/src/views/setting/system/usergroup/locale/en-US.ts

@@ -53,6 +53,7 @@ export default {
       operation: 'Operation',
       phone: 'Phone',
       remove: 'Remove',
+      quickAddUser: 'Quick add user',
     },
   },
   permission: {

frontend/src/views/setting/system/usergroup/locale/zh-CN.ts

@@ -52,6 +52,7 @@ export default {
       operation: '操作',
       phone: '手机',
       remove: '移除',
+      quickAddUser: '快速添加用户',
     },
   },
   permission: {