feat: device of menu

src/api/backend/api/typings.d.ts

@@ -448,6 +448,8 @@ declare namespace API {
     orderNo: number;
     /** 前端路由地址 */
     path: string;
+    /** 应用客户端 */
+    device: number;
     /** 是否外链 */
     isExt: boolean;
     /** 外链打开方式 */
@@ -472,7 +474,8 @@ declare namespace API {
     parentId: number;
     name: string;
     path: string;
-    permission: string;
+    permission: string /** 应用客户端 */;
+    device: number;
     type: number;
     icon: string;
     orderNo: number;
@@ -498,8 +501,11 @@ declare namespace API {
     parentId: number;
     name: string;
     path: string;
+    /** 应用客户端 */
+    device: number;
     permission: string;
     type: number;
+    device: number;
     icon: string;
     orderNo: number;
     component: string;
@@ -572,6 +578,8 @@ declare namespace API {
     orderNo?: number;
     /** 前端路由地址 */
     path?: string;
+    /** 应用客户端 */
+    device: number;
     /** 是否外链 */
     isExt?: boolean;
     /** 外链打开方式 */
@@ -808,6 +816,7 @@ declare namespace API {
     page?: number;
     pageSize?: number;
     field?: string;
+    useForSelect?: number; // 1: 用于下拉选择
     order?: 'ASC' | 'DESC';
     _t?: number;
   };

src/enums/index.ts

@@ -0,0 +1,4 @@
+export enum ResourceDeviceEnum{
+    APP = 0,
+    PC = 1
+}

src/views/system/menu/columns.tsx

@@ -22,6 +22,20 @@ const getMenuType = (type) => {
   }
 };
 
+/**
+ * 将对应设备类型类型转为字符串字意
+ */
+const getDeviceType = (type) => {
+  switch (type) {
+    case 0:
+      return <Tag color="warning">APP端</Tag>;
+    case 1:
+      return <Tag color="success">PC端</Tag>;
+    default:
+      return '';
+  }
+};
+
 export const baseColumns: TableColumnItem[] = [
   {
     title: '名称',
@@ -44,6 +58,13 @@ export const baseColumns: TableColumnItem[] = [
     hideInSearch: true,
     customRender: ({ record }) => getMenuType(record.type),
   },
+  {
+    title: '客户端',
+    width: 80,
+    dataIndex: 'device',
+    hideInSearch: true,
+    customRender: ({ record }) => getDeviceType(record.device),
+  },
   {
     title: '节点路由',
     dataIndex: 'path',

src/views/system/menu/formSchemas.tsx

@@ -4,14 +4,16 @@ import { IconPicker, Icon } from '@/components/basic/icon';
 import { asyncRoutes } from '@/router/asyncModules';
 import Api from '@/api/';
 import { findPath, str2tree } from '@/utils/common';
+import { ResourceDeviceEnum } from '@/enums';
 
 /** 菜单类型 0: 目录 | 1: 菜单 | 2: 按钮 */
+const isPC = (type: API.MenuDto['device']) => type === ResourceDeviceEnum.PC;
 const isDir = (type: API.MenuDto['type']) => type === 0;
 const isMenu = (type: API.MenuDto['type']) => type === 1;
 const isButton = (type: API.MenuDto['type']) => type === 2;
 
 export const useMenuSchemas = (): FormSchema<API.MenuDto>[] => [
-  {
+  { 
     field: 'type',
     component: 'RadioGroup',
     label: '菜单类型',
@@ -34,6 +36,25 @@ export const useMenuSchemas = (): FormSchema<API.MenuDto>[] => [
       ],
     },
   },
+  {
+    field: 'device',
+    component: 'RadioGroup',
+    label: '客户端类型',
+    defaultValue: 1,
+    rules: [{ required: true, type: 'number' }],
+    componentProps: {
+      options: [
+        {
+          label: 'PC端',
+          value: 1,
+        },
+        {
+          label: 'APP端',
+          value: 0,
+        },
+      ],
+    },
+  },
   {
     field: 'name',
     component: 'Input',
@@ -55,7 +76,7 @@ export const useMenuSchemas = (): FormSchema<API.MenuDto>[] => [
           findPath(menuTree, formModel['parentId']) || [],
         );
         schema.componentProps.treeDefaultExpandedKeys = treeDefaultExpandedKeys;
-        return [{ id: -1, name: '一级菜单', children: menuTree }];
+        return [{ id: -1, name: '根目录', children: menuTree }];
       },
       getPopupContainer: () => document.body,
     },
@@ -119,7 +140,8 @@ export const useMenuSchemas = (): FormSchema<API.MenuDto>[] => [
     field: 'component',
     component: 'Cascader',
     label: '文件路径',
-    vIf: ({ formModel }) => isMenu(formModel['type']) && !formModel['isExt'],
+    vIf: ({ formModel }) =>
+      isMenu(formModel['type']) && !formModel['isExt'] && isPC(formModel['device']),
     componentProps: {
       options: Object.keys(asyncRoutes).reduce(
         (prev, curr) => (str2tree(curr, prev, '/'), prev),

src/views/system/user/AvatarUpload.vue

@@ -53,7 +53,7 @@
 
   const uploadAvatar = async (file: FileType) => {
     const { filename } = await Api.toolsUpload.uploadUpload({ file });
-    modelValue.value = filename;
+    modelValue.value = filename?.path;
   };
 
   const customRequest: UploadProps['customRequest'] = async (options) => {

src/views/system/user/formSchemas.tsx

@@ -29,7 +29,7 @@ export const userSchemas: FormSchema<API.UserDto>[] = [
     componentProps: {
       mode: 'multiple',
       request: async () => {
-        const { items = [] } = await Api.systemRole.roleList({});
+        const { items = [] } = await Api.systemRole.roleList({ useForSelect: 1 });
         return items.map((n) => ({ label: n.name, value: n.id }));
       },
     },