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

frontend/src/components/bussiness/usergroup/addUserGroupModal.vue

@@ -3,25 +3,31 @@
     v-model:visible="currentVisible"
     width="680px"
     :ok-text="t('system.userGroup.create')"
-    @ok="handelOk"
+    :loading="props.loading"
+    unmount-on-close
+    :on-before-ok="handleBeforeOk"
     @cancel="handleCancel"
   >
     <template #title> {{ t('system.userGroup.createUserGroup') }} </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"
+          required
           :label="t('system.userGroup.userGroupName')"
-          :rules="[{ required: true, message: t('system.userGroup.userGroupNameIsNotNone') }]"
+          :rules="[
+            { required: true, message: t('system.userGroup.userGroupNameIsNotNone') },
+            { validator: validateName },
+          ]"
         >
           <a-input v-model="form.name" :placeholder="t('system.userGroup.pleaseInputUserGroupName')" />
         </a-form-item>
         <a-form-item
-          field="authScope"
+          field="type"
           :label="t('system.userGroup.authScope')"
           :rules="[{ required: true, message: t('system.userGroup.authScopeIsNotNone') }]"
         >
-          <a-select v-model="form.authScope" :placeholder="t('system.userGroup.pleaseSelectAuthScope')">
+          <a-select v-model="form.type" :placeholder="t('system.userGroup.pleaseSelectAuthScope')">
             <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>
@@ -35,23 +41,40 @@
 <script lang="ts" setup>
   import { useI18n } from '@/hooks/useI18n';
   import { reactive, ref, watchEffect } from 'vue';
+  import { UserGroupItem } from './type';
+  import type { FormInstance, ValidatedError } from '@arco-design/web-vue';
 
   const { t } = useI18n();
   const props = defineProps<{
     visible: boolean;
+    list: UserGroupItem[];
+    loading: boolean;
   }>();
 
+  const formRef = ref<FormInstance>();
+
   const emit = defineEmits<{
     (e: 'cancel'): void;
+    (e: 'submit', value: Partial<UserGroupItem>): void;
   }>();
 
   const form = reactive({
     name: '',
-    authScope: '',
+    type: '',
   });
 
   const currentVisible = ref(props.visible);
 
+  const validateName = (value: string, callback: (error?: string) => void) => {
+    if (value !== '') {
+      const isExist = props.list.some((item) => item.name === value);
+      if (isExist) {
+        callback(t('system.userGroup.userGroupNameIsExist', { name: value }));
+      }
+      callback();
+    }
+  };
+
   watchEffect(() => {
     currentVisible.value = props.visible;
   });
@@ -59,9 +82,13 @@
     emit('cancel');
   };
 
-  const handelOk = () => {
-    // eslint-disable-next-line no-console
-    console.log('ok');
-    handleCancel();
+  const handleBeforeOk = () => {
+    formRef.value?.validate((errors: undefined | Record<string, ValidatedError>) => {
+      if (errors) {
+        return false;
+      }
+      emit('submit', form);
+      return true;
+    });
   };
 </script>

frontend/src/components/bussiness/usergroup/authTable.vue

@@ -3,14 +3,13 @@
     :scroll="{ y: '860px', x: '1440px' }"
     :columns="columns"
     :data="data"
-    :span-method="dataSpanMethod"
     :bordered="{ wrapper: true, cell: true }"
     size="small"
   />
 </template>
 
 <script setup lang="ts">
-  import { TableData, TableColumnData } from '@arco-design/web-vue';
+  import { TableData } from '@arco-design/web-vue';
   import { RenderFunction, VNodeChild } from 'vue';
 
   export declare type OperationName = 'selection-checkbox' | 'selection-radio' | 'expand' | 'drag-handle';
@@ -79,20 +78,4 @@
       email: 'william.smith@example.com',
     },
   ];
-  const dataSpanMethod = ({
-    record,
-    column,
-  }: {
-    record: TableData;
-    column: TableColumnData | TableOperationColumn;
-    rowIndex: number;
-    columnIndex: number;
-  }): { rowspan?: number; colspan?: number } | void => {
-    if (record.name === 'Alisa Ross' && column.dataIndex === 'salary') {
-      return {
-        rowspan: 2,
-      };
-    }
-    return {};
-  };
 </script>

frontend/src/components/bussiness/usergroup/index.vue

@@ -48,7 +48,13 @@
     </div>
   </div>
   <AddUserModal :visible="addUserVisible" @cancel="addUserVisible = false" />
-  <AddUserGroupModal :visible="addUserGroupVisible" @cancel="addUserGroupVisible = false" />
+  <AddUserGroupModal
+    :list="userGroupList"
+    :visible="addUserGroupVisible"
+    :loading="addUserGrouploading"
+    @cancel="addUserGroupVisible = false"
+    @submit="handleAddUserGroup"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -74,6 +80,7 @@
   const currentId = ref('');
   const addUserVisible = ref(false);
   const addUserGroupVisible = ref(false);
+  const addUserGrouploading = ref(false);
   // 修改用户组名字，权限范围
   const popVisible = ref<PopVisibleItem>({});
   // 用户组和权限范围的状态
@@ -212,6 +219,23 @@
     const tmpArr = userGroupList.value.filter((ele) => ele.name.includes(keyword));
     userGroupList.value = tmpArr;
   }
+  // 新增用户组
+  const handleAddUserGroup = async (value: Partial<UserGroupItem>) => {
+    try {
+      addUserGrouploading.value = true;
+      const res = await updateOrAddUserGroup(value);
+      if (res) {
+        Message.success(t('system.userGroup.addUserGroupSuccess'));
+        initData();
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    } finally {
+      addUserGrouploading.value = false;
+    }
+  };
+
   onMounted(() => {
     initData();
   });