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'
});
组件
- FlowFormInstance组件;
- FlowFormView组件;
- FlowTaskDone组件;
- FlowTaskTodo组件;
- FlowChart组件;
- HistoryTaskList组件;
- FlowFormNavBtns组件;
- SelectAssignerComponent组件;
- 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>