feat: 分配角色

apps/web-antd/src/router/routes/local.ts

@@ -57,6 +57,7 @@ const profileRoute: RouteRecordStringComponent[] = [
       },
     ],
   },
+  // TODO: 图标要改
   {
     component: 'BasicLayout',
     meta: {
@@ -81,6 +82,30 @@ const profileRoute: RouteRecordStringComponent[] = [
       },
     ],
   },
+  {
+    component: 'BasicLayout',
+    meta: {
+      hideChildrenInMenu: true,
+      hideInMenu: true,
+      title: '分配角色',
+    },
+    name: 'RoleAssign',
+    path: '/',
+    redirect: '/system/role-assign',
+    children: [
+      {
+        component: '/system/role-assign/index',
+        meta: {
+          activePath: '/tool/gen',
+          icon: 'mingcute:profile-line',
+          keepAlive: true,
+          title: '分配角色',
+        },
+        name: 'RoleAssignIndex',
+        path: '/system/role-assign/:roleId',
+      },
+    ],
+  },
 ];
 
 /**

apps/web-antd/src/views/system/role-assign/data.tsx

@@ -0,0 +1,20 @@
+import type { FormSchemaGetter } from '#/adapter';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'userName',
+    label: '用户账号',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'phonenumber',
+    label: '手机号码',
+  },
+];

apps/web-antd/src/views/system/role-assign/index.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+
+import { Card } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter';
+
+import { querySchema } from './data';
+
+const route = useRoute();
+const roleId = route.params.roleId as string;
+
+const [QueryForm] = useVbenForm({
+  // 默认展开
+  collapsed: false,
+  // 所有表单项共用，可单独在表单内覆盖
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: querySchema(),
+  // 是否可展开
+  showCollapseButton: true,
+  submitButtonOptions: {
+    text: '查询',
+  },
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+});
+</script>
+
+<template>
+  <Page>
+    <Card class="flex-1">
+      <QueryForm />
+      ID: {{ roleId }}
+    </Card>
+  </Page>
+</template>

apps/web-antd/src/views/system/role/index.vue

@@ -3,6 +3,7 @@ import type { Recordable } from '@vben/types';
 import type { ColumnsType } from 'ant-design-vue/es/table';
 
 import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
 
 import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
@@ -95,6 +96,11 @@ function handleAuthEdit(record: Recordable<any>) {
   authModalApi.setData({ id: record.roleId });
   authModalApi.open();
 }
+
+const router = useRouter();
+function handleAssignRole(record: Recordable<any>) {
+  router.push(`/system/role-assign/${record.roleId}`);
+}
 </script>
 
 <template>
@@ -116,6 +122,9 @@ function handleAuthEdit(record: Recordable<any>) {
               <a-button size="small" @click="handleAuthEdit(record)">
                 数据权限
               </a-button>
+              <a-button size="small" @click="handleAssignRole(record)">
+                分配角色
+              </a-button>
             </Space>
           </template>
         </template>