@bingoit/mobile-flow

移动端流程功能模块

Usage no npm install needed!

<script type="module">
  import bingoitMobileFlow from 'https://cdn.skypack.dev/@bingoit/mobile-flow';
</script>

README

mobile-flow

定义移动端流程功能,如:流程表单、流程图等;

安装方法

npm install @bingoit/mobile-flow --save

使用方法

需要依赖mobile-ui模块,所以使用时需要先引入“mobile-ui”:

import Vue from 'vue';
import BingoMobileUI from '@bingoit/mobile-ui';
Vue.use(BingoMobileUI);

使用时需要配置相关参数:
1.系统参数的配置
参数设置:如设置系统名称,logo地址,是否为调试模式等。

 import {initSystem} from "@bingoit/mobile-base/lib/setting";
 initSystem({
     name: '测试系统名称 ',
     logo: require('./assets/logo.png'),
     isDebug: true,

     // 重要,没有配置该项将导致表单实例列表为流程表单时点击新增按钮报错
     flowFormInstanceRouterPath: '/flow/form/instance',
 });

2.配置未登录处理方法;如:

 //设置ajax请求,返回结果为未登录状态时的处理方法;
 import {removeToken, removeUserInfo, removeLoginState, getToken } from "@bingoit/utils";
 import { setTokenHandler, setNotLoginHandler } from "@bingoit/ajax";
 setNotLoginHandler(this,function () {
     removeLoginState();
     removeUserInfo();
     removeToken();
     router.push('/login/normal').then(() => {});
 });

3.设置获取token的方法(如果未设置使用默认浏览器sessionId通讯) ;如:

 //设置token
 setTokenHandler(this, function () {
     return getToken();
 });

4.设置路由拦截器;如:

 //设置路由拦截
 import {routerInterceptor} from "@bingoit/mobile-base/lib/utils/router.utils";
 routerInterceptor(router, store, undefined);

5.配置路由(基础模块路由的导入);如:

 import FlowRouters from '@bingoit/mobile-flow/lib/router';
 let routers = [];
 routers.push(...FlowRouters);
 const router = new Router({
     routes: routers
 });
 export default router;

6.配置Vuex(基础模块的Vuex导入);如:

 import {FlowStoreState, FlowStoreMutations, FlowStoreGetters, modules} from '@bingoit/mobile-flow/lib/store';
 let options =  {
     state: FlowStoreState,
     mutations: FlowStoreMutations,
     getters: FlowStoreGetters,
     modules,
 }
 export default new Vuex.Store(options);

表单渲染组件的使用

import Vue from 'vue';
import BingoMobileFlowUI from '@bingoit/mobile-flow';
Vue.use(BingoMobileFlowUI);
<bgo-flow-chart :process-id="processId" :order-id="orderId"></bgo-flow-chart>

组件

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