desktop-form v0.0.1

desktop-form

PC端表单模块；如：表单设计器、表单列表等；

安装方法

npm install @bingoit/desktop-form --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 { routerInterceptor, registerRouter } from '@bingoit/desktop-base/lib/router/helper';
import store from '../store';
Vue.use(Router);
import BaseRouters from '@bingoit/desktop-base/lib/router';
import {DesignerRouter, InstanceRouter, ListRouter} from '@bingoit/desktop-form/lib/router';

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

//注册路由，原因是：为了满足根据菜单权限动态配置路由
let designerStaticRouters = registerRouter(DesignerRouter);
let instanceStaticRouters = registerRouter(InstanceRouter);
let listStaticRouters = registerRouter(ListRouter);
if(designerStaticRouters) {
    routeArray.push(...designerStaticRouters);
}
if(instanceStaticRouters) {
    routeArray.push(...instanceStaticRouters);
}
if(listStaticRouters) {
    routeArray.push(...listStaticRouters);
}

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

初始化设置

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

//全局设置
import Vue from 'vue';
import BingoDesktopForm from '@bingoit/desktop-form';

Vue.use(BingoDesktopForm, {
    flowFormInstanceComponent: "流程表单实例的组件",
    flowFormViewComponent: "流程表单查看的组件",
    flowFormInstanceRouterPath: '流程表单路由'
});

//或者只对列表设置
import {initFormList } from "@bingoit/desktop-form/lib/List/setting";
initFormList({
    flowFormInstanceComponent: "流程表单实例的组件",
    flowFormViewComponent: "流程表单查看的组件",
    flowFormInstanceRouterPath: '流程表单路由'
});

组件

表单模块对外提供了表单渲染组件FormRender,使用方式为：

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

<bgo-form-render
    type="form"
    :args="args"
    :is-show-submit-btn="false"
    :upload-args="uploadArgs"
    @completed="formLoadingCompleted"
    @on-upload-success="onUploadSuccess">
</bgo-form-render>

FormRender组件的详细说明，请查看组件使用说明