管理后台企业版开发使用指南

简介

在企业版管理后台中，开发者可以通过config.ts和router.ts文件快速完成后台的搭建，还可以通过自定义表单操作，实现多样化需求。

获取模板

请联系bd@mokyun.com获取体验。

配置环境

yarn install

框架目录结构

test-admin
├─ build
│ └─ publish.js             // 脚本文件
├─ public
│ └─ config.d.ts
├─ src                      // 业务代码
│ ├─ .prettierrc.json
│ ├─ api
│ ├─ App.vue
│ ├─ assets
│ ├─ static
│ ├─ store
│ ├─ styles
│ ├─ utils
│ ├─ components
│ ├─ config.example         // 配置对应的`mobox`服务地址和图片上传接口的示例文件
│ ├─ router.example         // 配置页面和路由的示例文件
│ ├─ icons
│ ├─ init.ts
│ ├─ interfaces
│ ├─ main.ts
│ ├─ permission.ts
│ ├─ registerServiceWorker.ts
│ ├─ shims-vue.d.ts
│ └─ views                  // 页面模板
├─ tsconfig.json
├─ tslint.json
├─ vue.config.js
├─ yarn.lock
├─ .browserslistrc
├─ .editorconfig
├─ .env
├─ .gitignore
├─ .prettierrc
├─ cypress.json
├─ LICENSE
├─ package.json
├─ postcss.config.js
├─ README-zh.md
├─ README.md
└─ babel.config.js

创建管理后台

配置 config.ts 文件

config.ts 参考 src/config.example 示例文件，该文件配置的是管理后台页面中获取或编辑数据时访问的mobox后端云接口地址，以及上传图片时用到的配置参数（注：文件统一上传到七牛云空间）。

创建 router.ts 文件

• router.ts 创建 ：参考 src/router.example 示例文件，该文件配置的是管理后台页面的路由及页面列表展示的字段。

• 页面配置 ：页面对应使用mobox后端云建立的项目中的数据表，用于运营人员对数据的查看和编辑。通过 router.ts 文件中的的 config 变量编辑页面表单。示例如下：

export const config: { [K: string]: any } = {
  student: {
    table: 'Student',
    columns: [
      {
        key: 'name',
        title: '姓名',
      },
      {
        key: 'avatarUrl',
        title: '头像',
        type: 'picture',
        add: true,
        show: true,
      },
      {
        key: 'sex',
        title: '性别',
        type: 'status',
        mapper: {
          [Gender.Male]: ['男', 'success'],
          [Gender.Female]: ['女', 'warning'],
        },
      },
      { key: 'age', title: '年龄' },
      { key: 'interests', title: '兴趣', search: false },
      {
        key: 'professionId',
        title: '专业',
        type: 'searchSelect',
        mapTo: { table: 'Profession', key: 'id', value: 'title', in: true },
        where: { status: true },
        selectOptions: [],
        edit: true,
      },
      {
        key: 'professionId',
        _key: 'describe',
        title: '专业描述',
        type: 'searchSelect',
        mapTo: { table: 'Profession', key: 'id', value: 'describe', in: true },
        where: { status: true },
        selectOptions: [],
        edit: true,
      },
      { key: 'createdAt', title: '创建时间', type: 'dateTime', edit: false },
    ],
    permission: { edit: true, add: true, delete: true, search: true },
    tips: '提示：谨慎删除数据！',
    hook: {
      select: [
        '$$',
        'tableGet',
        (instance: any, obj: any) => {
          obj.params.order = { createdAt: 'DESC' }
          obj.params.where.sex = Gender.Male
          return obj
        },
      ],
    },
  },
}

示例中构建的是 Student 数据表的管理页面，需配置如下属性：

页面路由配置：

通过 router.ts 的 routes 变量编辑页面路由，示例如下：

const routes = [
  {
    path: '/config',
    meta: { title: '基础配置', icon: 'el-icon-money' },
    component: Layout,
    children: [
      {
        path: 'classroom',
        meta: { title: '教室列表', ...config.classroom },
        component: { extends: TemplateTable },
      },
      {
        path: 'profession',
        meta: { title: '专业列表', ...config.profession },
        component: { extends: TemplateTable },
      },
    ],
  },
  {
    path: '/student',
    meta: { title: '学生管理', icon: 'el-icon-money' },
    component: Layout,
    children: [
      {
        path: 'student',
        meta: { title: '学生列表', ...config.student },
        component: { extends: TemplateTable },
      },
    ],
  },
]

示例中构建的是 Student 数据表的页面路由，需要配置如下属性：

预览项目

yarn serve

运行完成后最下方会出现本地访问地址，在浏览器中打开地址（推荐使用 Google 浏览器）访问管理后台。

页面效果

图 1-1

发布项目

yarn pub

附录

permission 定义了对整张表的有哪些操作权限，具体通过下列属性定义：

export 为 true 则此表有导出数据的功能：

 permission: {
      edit: true,
      add: true,
      delete: true,
      search: true,
      export: true, // 是否允许导出
      // 导出接口
      exportFunction: async (where: any) => {
        return Api.Admin.getMonth(where);
      }
    }

在管理后台页面选择导出表的条件，会调用 exportFunction 方法里配置的mobox后端云接口查询要导出的数据。例如此处调用的是 Admin 类下的 getMonth 接口，where 是导出条件。

topOperate 自定义页面列表上方的操作按钮，示例如下：

topOperate: [
  {
    title: '订阅配置',
    type: 'warning',
    fn: () => {
      console.log('运行状态')
    },
  },
]

title 为按钮名称，type 为按钮样式，具体需求可在 fn 中编写此按钮的业务代码。

lineOperate 定义对行数据操作内容，示例如下：

lineOperate: {
      link: [
        {
          title: '订阅配置',
          type: 'warning',
          table: 'userNode',
          PK: 'userId',
          FK: 'id'
        }
      ],
      operate: [
        {
          title: '运行状态', // 数据行自定义操作
          type: 'primary',
          fn: () => {
            console.log('运行状态');
          }
        }
      ]
    }

• link：关联表操作，title 为按钮名称，type 为按钮样式，table 为关联表在 router.ts 文件 config 中配置的表名，FK 为字段名，PK 为该字段在关联表中对应的字段名。点击该按钮会将该字段在本表中的值作为条件查询在关联表中关联的数据，然后展示查询出来的关联表数据。
• operate：自定义操作按钮，具体需求可在 fn 中编写此按钮的业务代码。

hook 用于自定义表的增删改查，并且可以通过自定义函数改变传入 mobox 后端云接口的参数：

示例代码：

hook: {
      select: [
        '$$',
        'tableGet',
        (instance: any, obj: any) => {
          obj.params.order = { createdAt: 'DESC' };
          obj.params.where.role = UserRoles.Normal;
          return obj;
        }
      ],
      save: [
        'Admin',
        'getOrderRecord',
        async (instance: any, obj: any) => {
          obj.recordId = Number(obj.params.where.id);
          return obj;
        },
      ],
      add: [
        '$$',
        'tableAdd',
        (instance: any, obj: any) => {
          const option = {
            name: 'Users',
            data: {
              id: obj.data.userId,
              role: UserRoles.Hotel,
            },
          };
          save(option);
          return obj;
        },
      ],
      delete: [
        '$$',
        'tableDelete',
        (instance: any, obj: any) => {
          const option = {
            name: 'Users',
            data: {
              id: obj.data.userId,
              role: UserRoles.Normal,
            },
          };
          save(option);
          return obj;
        },
      ],
    },

hook 的属性值都是数组，参数有三个，第一个是调用的接口的类名，若使用系统方法则为“$$”,若使用mobox后端云的接口则为接口的类名，第二个参数是接口名，第三个参数为函数，instance 当前实例，参数 obj 是当前操作的数据行，此函数用于更改前端传入接口的参数或其他业务需求操作。

columns 定义表字段：

type 定义表字段的页面渲染类型：

参考

• Vue.js 官网
• ES6 入门中文版
• ElelmentUI 中文网
• TypeScript 中文网