新建的两个菜单默认位于未归类应用当中。在这里我们创建一个应用，并把菜单迁移过来集中管理

1. 基本概念

在一个CabloyJS项目中可以创建多个应用，每个应用都可以配置自己的界面组合，主要包含左侧菜单、中间主页、右侧个人信息页面等的配置。我们既可以在CabloyJS中创建一个应用，也可以随着业务的扩展创建多个应用

由于这里创建的出差申请属于OA办公的业务场景，我们可以创建一个应用，名称就叫OA

2. 创建应用

在这里，我们通过Cli终端命令创建一个极简配置的应用，关于应用的更多配置，请参见：App应用-介绍

  1. 1npm run cli :create:app OA -- --module=bz-businesstrip
名称 说明
:create:app 创建应用的指令名称
OA 应用名称
bz-businesstrip 应用所归属的模块名称

接下来打开已经创建好的应用配置文件，确认一下应用Key是什么

src/module/bz-businesstrip/backend/src/config/static/app/appOA.js

  1. 1module.exports = app => {
  2. 2  ...
  3. 3  const _app = {
  4. 4    atomName: 'OA',
  5. 5    atomStaticKey: 'appOA',
  6. 6    atomRevision: 0,
  7. 7    atomCategoryId: 'AppCategoryManagement',
  8. 8    description: '',
  9. 9    appIcon: '::radio-button-unchecked',
  10. 10    appIsolate: false,
  11. 11    content: JSON.stringify(content),
  12. 12    resourceRoles: 'authenticated',
  13. 13    appSorting: 0,
  14. 14  };
  15. 15  return _app;
  16. 16};

其中atomStaticKey就是应用Key，值为appOA，系统在初始化时会自动追加模块名称作为前缀，从而确保唯一性，因此完整的应用Key就是bz-businesstrip:appOA

3. 迁移菜单

现在把之前创建的两个菜单迁移过来

src/module/bz-businesstrip/backend/src/config/static/resources.js

  1. 1module.exports = app => {
  2. 2  const moduleInfo = app.meta.mockUtil.parseInfoFromPackage(__dirname);
  3. 3  const resources = [
  4. 4    // menu
  5. 5    {
  6. 6      atomName: 'Create Businesstrip',
  7. 7      atomStaticKey: 'createBusinesstrip',
  8. 8-      atomRevision: 1,
  9. 9+      atomRevision: 2,
  10. 10      atomCategoryId: 'a-base:menu.Create',
  11. 11      resourceType: 'a-base:menu',
  12. 12      resourceConfig: JSON.stringify({
  13. 13        module: moduleInfo.relativeName,
  14. 14        atomClassName: 'businesstrip',
  15. 15        atomAction: 'create',
  16. 16      }),
  17. 17      resourceIcon: '::add',
  18. 18-      appKey: 'a-appbooster:appUnclassified',
  19. 19+      appKey: 'bz-businesstrip:appOA',
  20. 20      resourceRoles: 'authenticated',
  21. 21    },
  22. 22    {
  23. 23      atomName: 'Businesstrip List',
  24. 24      atomStaticKey: 'listBusinesstrip',
  25. 25-      atomRevision: 1,
  26. 26+      atomRevision: 2,
  27. 27      atomCategryId: 'a-base:menu.List',
  28. 28      resourceType: 'a-base:menu',
  29. 29      resourceConfig: JSON.stringify({
  30. 30        module: moduleInfo.relativeName,
  31. 31        atomClassName: 'businesstrip',
  32. 32        atomAction: 'read',
  33. 33      }),
  34. 34      resourceIcon: ':outline:data-list-outline',
  35. 35-      appKey: 'a-appbooster:appUnclassified',
  36. 36+      appKey: 'bz-businesstrip:appOA',
  37. 37      resourceRoles: 'authenticated',
  38. 38    },
  39. 39  ];
  40. 40  return resources;
  41. 41};

  1. 将appKey改为bz-businesstrip:appOA

  2. 将atomRevision递增，以便告知系统自动更新菜单数据

4. 设置初始应用

前面提到，在一个CabloyJS项目中可以创建多个应用。如果只需要创建一个应用，那么可以把这个应用设置为初始应用，从而实现打开网页时默认显示该应用

只需要在项目的前端config文件中覆盖相应模块(a-app)的配置即可：

src/front/config/config.default.js

  1. 1modules: {
  2. 2  'a-app': {
  3. 3    appInit: {
  4. 4      default: 'bz-businesstrip:appOA',
  5. 5    },
  6. 6  },
  7. 7}