权限页面配置

server/api/migrations/0013_menu_status.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.1.7 on 2021-03-30 13:47
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('api', '0012_auto_20210330_1125'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='menu',
+            name='status',
+            field=models.BooleanField(default=1),
+        ),
+    ]

server/api/migrations/0014_auto_20210330_1405.py

@@ -0,0 +1,24 @@
+# Generated by Django 3.1.7 on 2021-03-30 14:05
+
+from django.db import migrations, models
+import django.utils.timezone
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('api', '0013_menu_status'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='menu',
+            old_name='remark',
+            new_name='detail',
+        ),
+        migrations.AddField(
+            model_name='menu',
+            name='create_time',
+            field=models.DateTimeField(auto_created=True, default=django.utils.timezone.now),
+        ),
+    ]

server/api/migrations/0015_auto_20210330_1410.py

@@ -0,0 +1,22 @@
+# Generated by Django 3.1.7 on 2021-03-30 14:10
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('api', '0014_auto_20210330_1405'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='menu',
+            name='users',
+        ),
+        migrations.AddField(
+            model_name='user',
+            name='menus',
+            field=models.ManyToManyField(null=True, to='api.Menu'),
+        ),
+    ]

server/api/migrations/0016_auto_20210331_1439.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.1.7 on 2021-03-31 14:39
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('api', '0015_auto_20210330_1410'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='user',
+            old_name='desc',
+            new_name='detail',
+        ),
+    ]

server/api/models.py

@@ -1,4 +1,5 @@
 from django.db import models
+from django.utils import timezone
 
 
 class User(models.Model):
@@ -8,8 +9,9 @@ class User(models.Model):
     roleName = models.CharField(max_length=32, null=True)
     value = models.CharField(max_length=32, null=True)
     status = models.BooleanField(default=1)
-    desc = models.CharField(max_length=124)
+    detail = models.CharField(max_length=124)
     token = models.CharField(max_length=500, unique=True, null=False)
+    menus = models.ManyToManyField("Menu", null=True)
 
     def __unicode__(self):
         return self.username
@@ -28,10 +30,13 @@ class Menu(models.Model):
     parent = models.ForeignKey(
         "Menu", on_delete=models.DO_NOTHING, null=True, blank=True)  # 父节点
     redirect = models.CharField(max_length=64, null=True, blank=True)  # 重定向
-    remark = models.CharField(max_length=64, null=True, blank=True)  # 备注
+    detail = models.CharField(max_length=64, null=True, blank=True)  # 备注
+    status = models.BooleanField(default=1)
+    create_time = models.DateTimeField(
+        auto_created=True, default=timezone.now)
     # meta = models.OneToOneField(Metas,null=True,on_delete=models.CASCADE)
-    users = models.ManyToManyField("User", null=True)
-    # 已下三个为菜单meta配置
+    # users = models.ManyToManyField("User", null=True)
+    # 以下三个为菜单meta配置
     title = models.CharField(max_length=32, null=True)
     affix = models.BooleanField(default=1)
     icon = models.CharField(max_length=32, null=True)

server/api/urls.py

@@ -21,8 +21,10 @@ urlpatterns = [
     # path('cbv/', views.cbv.as_view(), name='cbv'),
     # path('excbv/', views.extend_cbv.as_view(), name='extend_cbv'),
     path('login/', views.login.as_view(), name='login'),
-    path('getUserInfoById/', views.getUserInfoById.as_view(), name='get_userinfo'),
+    path('getUserInfoById/', views.getUserInfoById.as_view(), name='get_user_info'),
+    path('getUserList/', views.getUserList.as_view(), name='get_user_list'),
     path('user/add/', views.add_user.as_view(), name='add_user'),
     path('getMenuListById/', views.getMenuListById.as_view(), name='get_menu'),
+    path('getAllMenuList/', views.getAllMenuList.as_view(), name='get_all_menu'),
     path('menu/add/', views.add_menu.as_view(), name='add_menu'),
 ]

server/api/views.py

@@ -57,6 +57,28 @@ def format_useinfo(user):
     return res
 
 
+def format_uselist(list):
+    json_user = json.loads(
+        serialize('json', list, ensure_ascii=False)
+    )
+    res = []
+    for item in json_user:
+        item['fields'].pop('value')
+        item['fields'].pop('token')
+        user = item.get('fields')
+        user['id'] = item.get('pk')
+        # res['roles'] = [
+        #     {
+        #         'roleName': res.get('roleName'), 'value': res.get('value')
+        #     }
+        # ]
+        # res.pop('roleName')
+        # res.pop('value')
+        # res.pop('password')
+        res.append(user)
+    return res
+
+
 def format_login_result(user):
     format_user = json.loads(
         serialize('json', user, ensure_ascii=False)
@@ -64,6 +86,7 @@ def format_login_result(user):
     for item in format_user:
         res = {}
         res['userId'] = item.get('pk')
+        res['menus'] = item.get('menus')
         res['token'] = item.get('fields').get('token')
         res['roles'] = [
             {
@@ -73,31 +96,36 @@ def format_login_result(user):
     return res
 
 
-def format_menus(data):
-    # 一级菜单列表(无父id)
+def format_menus(querySetObj, mode):
+    # querySet 转json对象
+    data = json.loads(serialize('json', querySetObj, ensure_ascii=False))
+    # 定义一级菜单列表(无父id)
     menus = []
     # 子菜单列表
     childrens = []
     for item in data:
         item['fields']['id'] = item.get('pk')
-        # 将某些字段合并处理成前台需要的路由结构
-        item['fields']['meta'] = {
-            "title": item.get('fields').get('title'),
-            "affix": item.get('fields').get('affix'),
-            "icon": item.get('fields').get('icon'),
-        }
-        # 删除多余字段
-        item['fields'].pop('title')
-        item['fields'].pop('affix')
-        item['fields'].pop('icon')
-        if (item.get('fields').get('parent') == None):
+        # mode True -- 否将某些字段合并处理成前台路由需要的数据结构;
+        if mode:
+            item['fields']['meta'] = {
+                "title": item['fields'].pop('title'),
+                "affix":  item['fields'].pop('affix'),
+                "icon": item['fields'].pop('icon'),
+            }
+            if (item.get('fields').get('parent') == None):
+                menus.append(item.get('fields'))
+            else:
+                childrens.append(item.get('fields'))
+
+            for children in childrens:
+                # 将列表转化成树形菜单
+                getTree(children, menus, childrens)
+
+        else:  # False -- 不必转成树结构, menuName 语言包需要到前台转中文
+            item['fields']["menuName"] = item['fields'].pop("title")
+            item['fields'].pop('affix')
             menus.append(item.get('fields'))
-        else:
-            childrens.append(item.get('fields'))
 
-    for children in childrens:
-        # 将列表转化成树形菜单
-        getTree(children, menus, childrens)
     return menus
 
 
@@ -126,6 +154,7 @@ def getTree(children, menus, childrens):
                     getTree(children, m.get('children'), childrens)
 
 
+# 请求---------------------------------------------------------------------
 class login(View):
 
     def post(self, request):
@@ -133,11 +162,7 @@ class login(View):
         user = User.objects.all().filter(username=data.get(
             'username'), password=data.get('password'))
         if user:
-            print('-------user---------')
-            print(user)
             res = format_login_result(user)
-            print('---------------res--------')
-            print(res)
             return JsonResponse({'code': 0, 'msg': 'success', 'result': res}, json_dumps_params={"ensure_ascii": False})
         else:
             return JsonResponse({'code': 1, 'error': '用户名或密码不正确'}, json_dumps_params={"ensure_ascii": False})
@@ -155,6 +180,16 @@ class getUserInfoById(View):
             return JsonResponse({'code': 1, 'result': {'message': 'error'}}, json_dumps_params={"ensure_ascii": False})
 
 
+class getUserList(View):
+    def get(self, request):
+        users = User.objects.all()
+        if users:
+            res = format_uselist(users)
+            return JsonResponse({'code': 0, 'result': res, }, json_dumps_params={"ensure_ascii": False})
+        else:
+            return JsonResponse({'code': 1, 'result': {'message': 'no role,create role'}}, json_dumps_params={"ensure_ascii": False})
+
+
 class add_user(View):
     def post(self, request):
         data = request.POST
@@ -168,13 +203,17 @@ class add_user(View):
 class getMenuListById(View):
     def get(self, request):
         querySetObj = Menu.objects.all()
-
-        # querySet 转json对象
-        data = json.loads(serialize('json', querySetObj, ensure_ascii=False))
-        menus = format_menus(data)
+        menus = format_menus(querySetObj, True)
         return JsonResponse({'code': 0, 'result': menus})
 
 
+class getAllMenuList(View):
+    def get(self, request):
+        querySetObj = Menu.objects.all()
+        menus = format_menus(querySetObj, False)
+        return JsonResponse({'code': 0, 'result': {'format': True, 'menus': menus}})
+
+
 class add_menu(View):
     def post(self, request):
         data = request.POST

src/api/sys/menu.ts

@@ -1,9 +1,14 @@
 import { defHttp } from '/@/utils/http/axios';
 
-import { getMenuListByIdParams, getMenuListByIdParamsResultModel } from './model/menuModel';
+import {
+  getMenuListByIdParams,
+  getAllMenuListResultModel,
+  getMenuListByIdParamsResultModel,
+} from './model/menuModel';
 
 enum Api {
   GetMenuListById = '/getMenuListById',
+  GETAllMenuList = '/getAllMenuList',
 }
 
 /**
@@ -16,3 +21,12 @@ export function getMenuListById(params: getMenuListByIdParams) {
     params,
   });
 }
+/**
+ * @description: Get all based on id
+ */
+export function getAllMenuList() {
+  return defHttp.request<getAllMenuListResultModel>({
+    url: Api.GETAllMenuList,
+    method: 'GET',
+  });
+}

src/api/sys/model/menuModel.ts

@@ -21,3 +21,19 @@ export interface getMenuListByIdParams {
  * @description: Get menu return value
  */
 export type getMenuListByIdParamsResultModel = RouteItem[];
+
+export interface getAllMenuListResultModel {
+  id: number;
+  path: string;
+  name?: string;
+  component: any;
+  icon?: string;
+  parent?: number;
+  create_time?: Date;
+  menuName?: string;
+  // alias?: string | string[];
+  redirect?: string;
+  status?: true;
+  caseSensitive?: boolean;
+  children?: getAllMenuListResultModel[];
+}

src/api/sys/model/userModel.ts

@@ -13,6 +13,18 @@ export interface GetUserInfoByUserIdParams {
   userId: string | number;
 }
 
+export interface CreateUserParams {
+  username: string;
+  password: string;
+  // 真实名字
+  realName: string;
+
+  status?: boolean;
+  // 介绍
+  desc?: string;
+  menus?: string[] | number[];
+}
+
 export interface RoleInfo {
   roleName: string;
   value: string;
@@ -30,6 +42,10 @@ export interface LoginResultModel {
 /**
  * @description: Get user information return value
  */
+export interface GetUserListModel {}
+/**
+ * @description: Get user information return value
+ */
 export interface GetUserInfoByUserIdModel {
   roles: RoleInfo[];
   // 用户id

src/api/sys/user.ts

@@ -4,12 +4,15 @@ import {
   LoginResultModel,
   GetUserInfoByUserIdParams,
   GetUserInfoByUserIdModel,
+  GetUserListModel,
 } from './model/userModel';
 import { ErrorMessageMode } from '/@/utils/http/axios/types';
 
 enum Api {
   Login = '/login/',
   GetUserInfoById = '/getUserInfoById',
+  GetUserList = '/getUserList',
+  createUser = '/createUser',
   GetPermCodeByUserId = '/getPermCodeByUserId',
 }
 
@@ -17,18 +20,18 @@ enum Api {
  * @description: user login api
  */
 export function loginApi(params: LoginParams, mode: ErrorMessageMode = 'modal') {
-  console.log(
-    defHttp.request<LoginResultModel>(
-      {
-        url: Api.Login,
-        method: 'POST',
-        params,
-      },
-      {
-        errorMessageMode: mode,
-      }
-    )
-  );
+  // console.log(
+  //   defHttp.request<LoginResultModel>(
+  //     {
+  //       url: Api.Login,
+  //       method: 'POST',
+  //       params,
+  //     },
+  //     {
+  //       errorMessageMode: mode,
+  //     }
+  //   )
+  // );
   return defHttp.request<LoginResultModel>(
     {
       url: Api.Login,
@@ -52,6 +55,21 @@ export function getUserInfoById(params: GetUserInfoByUserIdParams) {
   });
 }
 
+export function getUserList() {
+  return defHttp.request<GetUserListModel>({
+    url: Api.GetUserList,
+    method: 'GET',
+  });
+}
+
+export function createUser(params: GetUserInfoByUserIdParams) {
+  return defHttp.request<GetUserInfoByUserIdModel>({
+    url: Api.createUser,
+    method: 'POST',
+    params,
+  });
+}
+
 export function getPermCodeByUserId(params: GetUserInfoByUserIdParams) {
   return defHttp.request<string[]>({
     url: Api.GetPermCodeByUserId,

src/components/Form/src/components/RadioButtonGroup.vue

@@ -28,10 +28,11 @@
     },
     props: {
       value: {
-        type: String as PropType<string>,
+        type: Boolean,
+        // type: String as PropType<string>,
       },
       options: {
-        type: Array as PropType<RadioItem[]>,
+        type: Array as PropType<RadioItem[] | boolean[]>,
         default: () => [],
       },
     },

src/store/modules/menu.ts

@@ -0,0 +1,45 @@
+import store from '/@/store/index';
+import { VuexModule, Module, getModule, Mutation, Action } from 'vuex-module-decorators';
+import { hotModuleUnregisterModule } from '/@/utils/helper/vuexHelper';
+
+import { getAllMenuList } from '/@/api/sys/menu';
+
+import { useI18n } from '/@/hooks/web/useI18n';
+import { listToTree } from '/@/utils/formatMenu';
+
+const NAME = 'menu';
+hotModuleUnregisterModule(NAME);
+
+@Module({ namespaced: true, name: NAME, dynamic: true, store })
+class Menu extends VuexModule {
+  // menuList
+  private MenuTree = [];
+
+  get getMenuTree() {
+    return this.MenuTree;
+  }
+
+  @Mutation
+  commitResetState(): void {
+    this.MenuTree = [];
+  }
+
+  @Mutation
+  commitMenuTree(menuList): void {
+    this.MenuTree = menuList;
+  }
+
+  @Action
+  async getAllMenuListAction() {
+    const { t } = useI18n();
+    let res = (await getAllMenuList()) as any;
+    res.map((item) => (item.menuName = t(item.menuName))) as any;
+
+    const menuList = listToTree(res);
+    this.commitMenuTree(menuList);
+    console.log('------------ menuList---------');
+    console.log(menuList);
+    return menuList;
+  }
+}
+export const menuStore = getModule<Menu>(Menu);

src/utils/formatMenu.ts

@@ -0,0 +1,30 @@
+function isExist(list, child) {
+  let flag = true;
+  list.forEach((item) => {
+    if (item.id === child.id) {
+      flag = false;
+    }
+  });
+  return flag;
+}
+
+export function listToTree(oldArr) {
+  oldArr.forEach((element) => {
+    let parent = element.parent;
+    if (parent !== null) {
+      oldArr.forEach((ele) => {
+        if (ele.id === parent) {
+          //当内层循环的ID== 外层循环的parendId时，（说明有children），需要往该内层id里建个children并push对应的数组；
+          if (!ele.children) {
+            ele.children = [];
+          }
+          if (isExist(ele.children, element)) {
+            ele.children.push(element);
+          }
+        }
+      });
+    }
+  });
+  oldArr = oldArr.filter((ele) => ele.parent === null); //这一步是过滤，按树展开，将多余的数组剔除；
+  return oldArr;
+}

src/utils/http/axios/Axios.ts

@@ -10,6 +10,8 @@ import { errorResult } from './const';
 import { ContentTypeEnum } from '/@/enums/httpEnum';
 import qs from 'qs';
 import { RequestEnum } from '../../../enums/httpEnum';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { listToTree } from '/@/utils/formatMenu';
 
 export * from './axiosTransform';
 
@@ -207,7 +209,14 @@ export class VAxios {
         .request<any, AxiosResponse<Result>>(conf)
         .then((res: AxiosResponse<Result>) => {
           if (transformRequestHook && isFunction(transformRequestHook)) {
-            const ret = transformRequestHook(res, opt);
+            let ret = transformRequestHook(res, opt);
+            if (ret.format) {
+              // 权限菜单页面数据格式化
+              const { t } = useI18n();
+              ret.menus.map((item) => (item.menuName = t(item.menuName)));
+              ret = listToTree(ret.menus);
+            }
+            console.log(ret);
             ret !== errorResult ? resolve(ret) : reject(new Error('request error!'));
             return;
           }

src/views/permission/menu/data.ts

@@ -77,11 +77,11 @@ export const formSchema: FormSchema[] = [
     field: 'status',
     label: '状态',
     component: 'RadioButtonGroup',
-    defaultValue: '0',
+    defaultValue: true,
     componentProps: {
       options: [
-        { label: '启用', value: '0' },
-        { label: '禁用', value: '1' },
+        { label: '启用', value: true },
+        { label: '禁用', value: false },
       ],
     },
   },
@@ -132,7 +132,7 @@ export const dataSource = [
   {
     key: '0-1',
     menuName: 'Dashboard',
-    status: '0',
+    status: true,
     icon: 'ion:layers-outline',
     create_time: '2021-01-01',
     detail: '',
@@ -140,7 +140,7 @@ export const dataSource = [
       {
         key: '0-1-1',
         menuName: '工作台',
-        status: '0',
+        status: true,
         icon: 'ion:git-compare-outline',
         create_time: '2021-01-01',
         detail: '',
@@ -148,7 +148,7 @@ export const dataSource = [
       {
         key: '0-1-2',
         menuName: '分析页',
-        status: '1',
+        status: false,
         icon: 'ion:tv-outline',
         create_time: '2021-01-01',
         detail: '',
@@ -158,7 +158,7 @@ export const dataSource = [
   {
     key: '1-1',
     menuName: '权限管理',
-    status: '0',
+    status: true,
     icon: 'bx:bx-lock',
     create_time: '2021-01-01',
     detail: '',
@@ -166,7 +166,7 @@ export const dataSource = [
       {
         key: '1-1-1',
         menuName: '角色管理',
-        status: '0',
+        status: true,
         icon: 'bx:bx-lock',
         create_time: '2021-01-01',
         detail: '',
@@ -174,7 +174,7 @@ export const dataSource = [
       {
         key: '1-1-2',
         menuName: '菜单管理',
-        status: '0',
+        status: true,
         icon: 'bx:bx-lock',
         create_time: '2021-01-01',
         detail: '',

src/views/permission/menu/index.vue

@@ -3,7 +3,7 @@
     <BasicTable
       ref="tableRef"
       @register="registerTable"
-      rowKey="key"
+      rowKey="id"
       isTreeTable
     >
       <template #action="{ record, column }">
@@ -27,7 +27,10 @@
   import { h } from 'vue';
   import { Tag } from 'ant-design-vue';
   import { Icon } from '/@/components/Icon';
-  import { dataSource } from './data'
+
+  // import { dataSource } from './data'
+
+  import { getAllMenuList } from '/@/api/sys/menu';
   import {
     BasicTable,
     useTable,
@@ -94,7 +97,8 @@
         title: "菜单列表",
         titleHelpMessage: "温馨提醒",
         columns: columns,
-        dataSource: dataSource,
+        // dataSource: dataSource,
+        api:getAllMenuList,
         bordered: true,
         showIndexColumn: false,
         actionColumn: {
@@ -224,6 +228,7 @@
         getSelectRowKeyList,
         addRegister,
         saveData,
+        getAllMenuList
       };
     },
   });

src/views/permission/role/add.vue

@@ -48,12 +48,9 @@
         id:0
       })
       const modelData:ModelData = props.modelData
-
+      console.log(modelData)
       const modelRef = ref({});
       const adaptWidth = adapt()
-      // const checkedKeys = ref<string[]>(['0-1']); // 勾选节点复选框
-      // const selectedKeys = ref<string[]>([]); // 点击选中节点,
-      // const expandedKeys = ref<string[]>(['0-1']); // 展开树节点
       watch(modelData, () => {
         console.log('expandedKeys', modelData.expandedKeys);
         console.log('selectedKeys', modelData.selectedKeys);
@@ -62,7 +59,7 @@
 
       const schemas: FormSchema[] = [
         {
-          field: 'name',
+          field: 'username',
           component: 'Input',
           label: '账户名',
           labelWidth: adaptWidth.labelWidth,
@@ -71,6 +68,15 @@
           }
         },
         {
+          field: 'realName',
+          component: 'Input',
+          label: '姓名',
+          labelWidth: adaptWidth.labelWidth,
+          colProps: {
+            span: adaptWidth.elContainer,
+          }
+        },
+        {
           field: 'password',
           component: 'Input',
           label: '密码',
@@ -95,8 +101,8 @@
           component: 'RadioButtonGroup',
           componentProps: {
             options: [
-              { label: '启用', value: '0' },
-              { label: '停用', value: '1' },
+              { label: '启用', value: true },
+              { label: '停用', value: false },
             ],
           },
           labelWidth: adaptWidth.labelWidth,
@@ -128,7 +134,14 @@
         // });
 
         // 方式2
-        modelRef.value = { name: data.name, password: data.password, status: data.status, detail: data.detail };
+        modelRef.value = {
+          username: data.username,
+          realName: data.realName,
+          password: data.password,
+          status: data.status,
+          detail: data.detail,
+          menus: data.menus
+          };
 
         // setProps({
         //   model:{ field2: data.data, field1: data.info }

src/views/permission/role/index.vue

@@ -22,10 +22,11 @@
   import { defineComponent, reactive, ref, unref } from 'vue';
   import Add from './add.vue'
   import { useModal } from '/@/components/Modal';
-  import { treeData } from './data';
+  // import { treeData } from './data';
+  import { getAllMenuList } from '/@/api/sys/menu';
   import { h } from 'vue';
   import { Tag } from 'ant-design-vue';
-
+  import { getUserList } from '/@/api/sys/user';
   import {
     BasicTable,
     useTable,
@@ -39,9 +40,9 @@
   interface ModelData {
     title: string,
     treeData: object[],
-    checkedKeys: string[],
-    selectedKeys: string[],
-    expandedKeys: string[]
+    checkedKeys: string[] | number[],
+    selectedKeys: string[] | number[],
+    expandedKeys: string[] | number[]
   }
 
   const columns: BasicColumn[] = [
@@ -55,7 +56,13 @@
     },
     {
       title: '账户名',
-      dataIndex: 'name',
+      dataIndex: 'username',
+      // editRow: true,
+      width: 160,
+    },
+    {
+      title: '姓名',
+      dataIndex: 'realName',
       // editRow: true,
       width: 160,
     },
@@ -71,9 +78,9 @@
       width: 80,
       customRender: ({ record }) => {
         const status = record.status;
-        const enable = ~~status === 0;
-        const color = enable ? 'green' : 'red';
-        const text = enable ? '启用' : '停用';
+        // const enable = ~~status === 0;
+        const color = status ? 'green' : 'red';
+        const text = status ? '启用' : '停用';
         return h(Tag, { color: color }, () => text);
       },
     },
@@ -81,33 +88,30 @@
       title: '详情',
       dataIndex: 'detail',
       // editRow: true,
-      width: 200,
-    },
+      width: 150,
+    }
   ];
 
   export default defineComponent({
-    components: { BasicTable, TableAction, Add, treeData },
+    components: { BasicTable, TableAction, Add },
     setup() {
-      console.log(treeData)
       const tableRef = ref<Nullable<TableActionType>>(null);
       const currentEditKeyRef = ref('');
       const modelData = reactive<ModelData>({
         title: '添加',
-        treeData: treeData,
-        checkedKeys: ['0-1'],
-        selectedKeys: ['0-1'],
-        expandedKeys: ['0-1']
+        treeData: [],
+        checkedKeys: [],
+        selectedKeys: [],
+        expandedKeys: []
       })
+      getTreeData()
       const [registerTable] = useTable({
         title: "角色列表",
         titleHelpMessage: "温馨提醒",
         rowSelection: { type: 'checkbox' },
         columns: columns,
         clickToRowSelect: false, // 点击行不勾选
-        dataSource: [
-          { id: 1, name: 'vben', status: '0', detail: 'super admin', password: '123456' },
-          { id:2,name:'test', status: '1', detail: 'test admin', password: '123456' }
-        ],
+        api: getUserList,
         actionColumn: {
           width: 160,
           title: '操作',
@@ -142,10 +146,13 @@
         modelData.selectedKeys = []
         modelData.expandedKeys = []
         openAdd(true, {
-          id: 0,
-          name: '',
+          username: '',
           password: '',
           detail: '',
+          menus: [],
+          roleName: '',
+          realName: '',
+          status: true,
           isUpdate: true,
         });
       }
@@ -154,24 +161,17 @@
         currentEditKeyRef.value = record.id;  // record.key
         console.log(record)
         modelData.title = '编辑'
-        modelData.checkedKeys = ['0-1']
-        if (record.id === 2) {
-          modelData.checkedKeys = []
-        }
-        console.log(record.id)
+
         const data = getTableAction().getDataSource()
         data.map(item => {
           if (item.id === record.id) {
             record = item
           }
         })
-        openAdd(true, {
-          // id: record.id,
-          // name: record.name,
-          // password: record.password,
-          // detail: record.detail,
-          ...record
-        });
+        modelData.checkedKeys = record.menus
+        modelData.selectedKeys = []
+        modelData.expandedKeys = []
+        openAdd(true, record);
       }
 
       function handleDelete(record: Recordable) {
@@ -185,6 +185,7 @@
       function saveData(data: any) {
         const datas = getTableAction().getDataSource()
         const info = reactive({...data.info})
+        console.log(info)
         if (modelData.title === "添加") {
           datas.map(item => {
             if (info.id === 0 || info.id === item.id) {
@@ -206,6 +207,12 @@
           getTableAction().setTableData(dataArr)
         }
       }
+      async function getTreeData() {
+        let treeData = await getAllMenuList() as any
+        modelData.treeData = JSON.parse(JSON.stringify(treeData).replace(/menuName/g,"title").replace(/id/g,"key"))
+
+        console.log(modelData.treeData)
+      }
 
       function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
         if (false) {
@@ -231,7 +238,6 @@
       }
       return {
         modelData,
-        treeData,
         tableRef,
         registerTable,
         addRole,
@@ -241,7 +247,9 @@
         getSelectRowList,
         getSelectRowKeyList,
         addRegister,
-        saveData
+        saveData,
+        getUserList,
+        getTreeData
       };
     },
   });