@bingoit/workbench-designer v1.3.13

@bingoit/workbench-designer

缤果钉钉工作台可视化配置模块

功能描述

工作台可视化配置模块，包含一个可拖拉拽的可视化设计器、工作台管理列表以及工作台配置列表。

可视化设计器

通过设计器，可用拖拉拽的方式对移动端和PC工作台进行布局设计和详细配置。

设计器采用左中右的多列布局方式，左侧为组件列表侧边栏，中间为画布，右侧为工作台或者具体组件的详细配置侧边栏。由于需要同时支持移动端和PC端的设计，所以画布可在移动端和PC端之间切换。

工作台管理列表

对已创建的工作台进行查询、编辑、删除

工作台配置列表

配置默认工作台以及工作台的可见范围

可见范围决定了当一个人登录到工作台时匹配到的是哪个工作台模板，如果当前用户没有在任何工作台模板的可见范围内，则会自动匹配默认工作台。

如何使用

安装

npm i @bingoit/workbench-designer --save

路由配置

import Vue from 'vue';
import Router from 'vue-router';
import { routerInterceptor, registerRouter, getRouteByPath } from '@bingoit/desktop-base/lib/router/helper';
import store from '../store';
Vue.use(Router);

import { BaseRoutes } from '@bingoit/desktop-base/lib/router';
import WorkbenchDesignerRoutes from '@bingoit/workbench-designer/lib/router';
import { isNotEmpty } from '@bingoit/utils'

let routeArray = [];
routeArray.push(...BaseRoutes);

let workbenchStaticRoutes = registerRouter(WorkbenchDesignerRoutes);

if(workbenchStaticRoutes) {
    let rootRoute = getRouteByPath(routeArray, '/');
    workbenchStaticRoutes.forEach(route => {
        if(isNotEmpty(route.isRootChildrenRoute)
            && route.isRootChildrenRoute) {
            rootRoute.children.push(route);
        } else {
            routeArray.push(route);
        }
    });
}

const router = new Router({
    routes: routeArray
});
routerInterceptor(router, store);
export default router;