@bingoit/desktop-flow

desktop-flow

PC端流程模块；如：流程表单、待办、已办等；

安装方法

npm install @bingoit/desktop-flow --save

使用方法

需要依赖desktop-ui模块，所以使用时需要先引入“desktop-ui”：

import Vue from 'vue';
import BingoDesktopUI from '@bingoit/desktop-ui';
import '@bingoit/desktop-ui/lib/desktop-ui.css';
Vue.use(BingoDesktopUI);

设置Vuex

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
import baseStoreOptions from '@bingoit/desktop-base/lib/store';
export default new Vuex.Store(baseStoreOptions);

设置路由

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

const originalReplace = Router.prototype.replace;
Router.prototype.replace = function replace(location) {
    return originalReplace.call(this, location).catch(err => err);
};
const originalPush = Router.prototype.push;
Router.prototype.push = function push(location, onResolve, onReject) {
    if (onResolve || onReject)
        return originalPush.call(this, location, onResolve, onReject)
    return originalPush.call(this, location).catch(err => err);
};

//基础模块的路由
import BaseRoutes from '@bingoit/desktop-base/lib/router';
//表单模块的路由
import {FormDesignerRoutes, FormInstanceRoutes, FormListRoutes} from '@bingoit/desktop-form/lib/router';
//流程模块的路由
import { FlowInstanceRoutes } from "@bingoit/desktop-flow/lib/router";


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

// registerRouter方法会返回非菜单的路由，这部分路由作为静态路由注册到路由表中；
// 菜单路由会根据菜单权限动态注册路由
let formDesignerStaticRoutes = registerRouter(FormDesignerRoutes);
let formInstanceStaticRoutes = registerRouter(FormInstanceRoutes);
let formListStaticRoutes = registerRouter(FormListRoutes);

let flowInstanceStaticRoutes = registerRouter(FlowInstanceRoutes);

if(formDesignerStaticRoutes) {
    routeArray.push(...formDesignerStaticRoutes);
}
if(formInstanceStaticRoutes) {
    routeArray.push(...formInstanceStaticRoutes);
}
if(formListStaticRoutes) {
    routeArray.push(...formListStaticRoutes);
}

if(flowInstanceStaticRoutes) {
    let rootRoute = getRouteByPath(routeArray, '/');
    flowInstanceStaticRoutes.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;

初始化表单设置

如果需要使用表单列表的功能，并且需要在列表中查看流程表单相关的数据时，需要设置流程表单组件及路由：

//全局设置
import Vue from 'vue';

//或者只对列表设置
import {initFormList } from "@bingoit/desktop-form/lib/List/setting";
initFormList({
    flowFormInstanceComponent: require("@bingo/desktop-flow/lib/Instance/views/form/instance"),
    flowFormViewComponent: require("@bingo/desktop-flow/lib/Instance/views/form/view"),
    flowFormInstanceRouterPath: '/flow/form/instance'
});

组件

1. FlowFormInstance组件;
2. FlowFormView组件;
3. FlowTaskDone组件;
4. FlowTaskTodo组件;
5. FlowChart组件;
6. HistoryTaskList组件;
7. FlowFormNavBtns组件;
8. SelectAssignerComponent组件;
9. DialogFlowChart组件;

---

下面是使用FlowFormInstance组件的使用方式为：

//全局引入
import Vue from 'vue';
import BingoDesktopFlow from '@bingoit/desktop-flow';
Vue.use(BingoDesktopFlow);

//单个引入
import Vue from 'vue';
import {FlowFormInstance} from '@bingoit/desktop-flow/lib/Instance';
Vue.use(FlowFormInstance);

使用方式：

<bgo-flow-form-instance
    :process-id="processId"
    :order-id="orderId"
    :task-id="taskId"
    :task-key="taskKey">
</bgo-flow-form-instance>