feat: 添加角色组功能

apps/web-ele/src/views/system-manage/user-manage/form.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { AccountEntity, WorkerEntity } from '@vben/types';
+import type { AccountEntity, RoleGroupEntity, WorkerEntity } from '@vben/types';
 
 import { computed, onMounted, ref } from 'vue';
 
@@ -13,12 +13,35 @@ import {
   editAccountApi,
   getAccountDetailApi,
 } from '#/api/account';
+import { getRoleListApi } from '#/api/role';
 import { getWorkerListApi } from '#/api/worker';
 
 const emit = defineEmits(['finish']);
 const data = ref();
 const formType = ref<'create' | 'detail' | 'edit'>('create');
 const workerOptions = ref<{ label: string; value: string }[]>([]);
+const roleOptions = ref<{ label: string; value: string }[]>([]);
+
+// 获取角色列表
+async function fetchRoleOptions() {
+  try {
+    const res = await getRoleListApi({
+      pageindex: 1,
+      rows: 1000,
+    });
+
+    if (res && res.Data) {
+      roleOptions.value = res.Data.filter(
+        (item: RoleGroupEntity) => item.available === 0,
+      ).map((item: RoleGroupEntity) => ({
+        label: item.title,
+        value: item.id.toString(),
+      }));
+    }
+  } catch (error) {
+    console.error('获取角色列表失败', error);
+  }
+}
 
 // 获取职员列表
 async function fetchWorkerOptions() {
@@ -39,9 +62,10 @@ async function fetchWorkerOptions() {
   }
 }
 
-// 初始化时获取职员列表
+// 初始化时获取选项数据
 onMounted(() => {
   fetchWorkerOptions();
+  fetchRoleOptions();
 });
 
 const titleMap = {
@@ -97,12 +121,18 @@ const [BaseForm, baseFormApi] = useVbenForm({
       },
     },
     {
-      component: 'Input',
+      component: 'Select',
       fieldName: 'accountgrouplist',
       label: '角色组',
-      rules: z.string().min(1, '请输入角色组'),
+      rules: z.array(z.string()).min(1, '请选择角色组'),
       componentProps: {
-        placeholder: '请输入角色组',
+        placeholder: '请选择角色组',
+        options: roleOptions,
+        multiple: true,
+        filterable: true,
+        clearable: true,
+        collapseTags: true,
+        collapseTagsTooltip: true,
       },
     },
     // {
@@ -151,11 +181,20 @@ const [Modal, modalApi] = useVbenModal({
     }
 
     try {
+      // 处理角色组数据格式：将数组转换为逗号分隔的字符串
+      const processedValues = {
+        ...formValues,
+        accountgrouplist: Array.isArray(formValues.accountgrouplist)
+          ? formValues.accountgrouplist.join(',')
+          : formValues.accountgrouplist,
+      };
+
       const apiMap = {
-        create: () => addAccountApi(formValues as unknown as AccountEntity),
+        create: () =>
+          addAccountApi(processedValues as unknown as AccountEntity),
         edit: () =>
           editAccountApi({
-            ...formValues,
+            ...processedValues,
             'accountid.value': data.value.row.accountid,
           } as unknown as AccountEntity),
       };
@@ -193,7 +232,15 @@ const [Modal, modalApi] = useVbenModal({
           accountid: data.value.row.accountid,
         });
 
-        baseFormApi.setValues(detailData);
+        // 处理角色组数据格式：将逗号分隔的字符串转换为数组
+        const processedDetailData = {
+          ...detailData,
+          accountgrouplist: detailData.accountgrouplist
+            ? detailData.accountgrouplist.split(',').filter(Boolean)
+            : [],
+        };
+
+        baseFormApi.setValues(processedDetailData);
       } catch {
         // console.log(error);
       }