feat(系统设置): 用户组管理删除用户组

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

@@ -21,21 +21,10 @@
           :label="t('system.userGroup.authScope')"
           :rules="[{ required: true, message: t('system.userGroup.authScopeIsNotNone') }]"
         >
-          <a-select
-            v-model="form.authScope"
-            :virtual-list-props="{ height: 200 }"
-            :placeholder="t('system.userGroup.pleaseSelectAuthScope')"
-            :options="authOptions"
-            :field-names="fieldNames"
-            @search="handleSearch"
-          >
-            <template #label="{ data }">
-              <span class="option-name"> {{ data.name }} </span>
-            </template>
-            <template #option="{ data }">
-              <span class="option-name"> {{ data.name }} </span>
-              <span class="option-email"> {{ `(${data.email})` }} </span>
-            </template>
+          <a-select v-model="form.authScope" :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>
           </a-select>
         </a-form-item>
       </a-form>
@@ -46,7 +35,6 @@
 <script lang="ts" setup>
   import { useI18n } from '@/hooks/useI18n';
   import { reactive, ref, watchEffect } from 'vue';
-  import { UserOption } from './type';
 
   const { t } = useI18n();
   const props = defineProps<{
@@ -61,36 +49,9 @@
     name: '',
     authScope: '',
   });
-  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 authOptions = ref<UserOption[]>(allOption);
 
-  const loading = ref(false);
-
-  const fieldNames = { value: 'id', label: 'name' };
   const currentVisible = ref(props.visible);
-  const handleSearch = (value: string) => {
-    if (value) {
-      loading.value = true;
-      window.setTimeout(() => {
-        authOptions.value = authOptions.value.filter((item) => item.name.includes(value));
-        loading.value = false;
-      }, 60);
-    } else {
-      authOptions.value = allOption;
-    }
-  };
+
   watchEffect(() => {
     currentVisible.value = props.visible;
   });

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

@@ -1,58 +0,0 @@
-<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>

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

@@ -49,7 +49,6 @@
   </div>
   <AddUserModal :visible="addUserVisible" @cancel="addUserVisible = false" />
   <AddUserGroupModal :visible="addUserGroupVisible" @cancel="addUserGroupVisible = false" />
-  <DeleteUserGroupModal :visible="deleteUserGroupVisible" @cancel="deleteUserGroupVisible = false" />
 </template>
 
 <script lang="ts" setup>
@@ -60,20 +59,21 @@
   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 useModal from '@/hooks/useModal';
+  import { Message } from '@arco-design/web-vue';
   import popconfirm from './popconfirm.vue';
   import useUserGroupStore from '@/store/modules/system/usergroup';
-  import { getUserGroupList, updateOrAddUserGroup } from '@/api/modules/system/usergroup';
+  import { getUserGroupList, updateOrAddUserGroup, deleteUserGroup } from '@/api/modules/system/usergroup';
 
   const { t } = useI18n();
 
   const searchKey = ref('');
   const store = useUserGroupStore();
+  const { openModal } = useModal();
   // 请求loading
   const currentId = ref('');
   const addUserVisible = ref(false);
   const addUserGroupVisible = ref(false);
-  const deleteUserGroupVisible = ref(false);
   // 修改用户组名字，权限范围
   const popVisible = ref<PopVisibleItem>({});
   // 用户组和权限范围的状态
@@ -119,8 +119,28 @@
         popDefaultName.value = tmpObj.scopeId;
       }
     } else {
-      // 删除用户组
-      deleteUserGroupVisible.value = true;
+      openModal({
+        type: 'warning',
+        title: t('system.userGroup.isDeleteUserGroup', { name: store.currentName }),
+        content: t('system.userGroup.beforeDeleteUserGroup'),
+        okText: t('system.userGroup.confirmDelete'),
+        cancelText: t('system.userGroup.cancel'),
+        okButtonProps: {
+          status: 'danger',
+        },
+        onBeforeOk: async () => {
+          try {
+            await deleteUserGroup(id);
+            Message.success(t('system.user.deleteUserSuccess'));
+            return true;
+          } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error(error);
+            return false;
+          }
+        },
+        hideCancel: false,
+      });
     }
   };