xh-flow-ui

这个项目用来存放工作流引擎相关公共业务组件，如表单设计器、web端表单渲染器、流程设计器等，便于后续维护及发布到npm上

目录结构

• assest：用来存放公共业务组件所用到的资源，如图片资源；
• config：用来配置开发、非开发环境相关基础配置、打包等的信息；
• examples：用于测试编写的公共业务组件；
• lib：打包构建出来的目录(待发布到npm上)；
• mixins：编写公共业务组件所用的mixins目录；
• packages：核心代码目录(公共业务组件所在目录)；
• store：存放全局state数据所在目录；
• utils：工具函数所在目录

公共组件开发规则

1. 所有的公共组件都在packages目录下进行开发；
2. 开发好的公共组件需在examples目录下进行引入测试，运行yarn serve或npm run serve来启动示例；
3. 测试无问题后，通过yarn lib:build 或 npm run lib:build进行打包。然后再examples再一次进行测试；
4. 测试无问题后便可根据情况发布到npm上；
5. 需要编写每个公共(业务)组件的使用文档。

该组件库包含的公共(业务)组件如下：

1. 表单设计器(ElFormDesigner)组件；
2. Web端表单渲染器(ElFormRender)组件；
3. Web端流程设计器(Process)组件

全局引入

1. 安装：yarn add xh-flow-ui或npm install xh-flow-ui；

2. 在入口文件进行组件注册：

   import XhFlowUi from 'xh-flow-ui'
   import 'xh-flow-ui/lib/xh-flow-ui.css'
   Vue.use(XhFlowUi)
      

按需引入

1. 安装依赖：yarn add babel-plugin-import或npm install babel-plugin-import --save；

2. 在babel.config.js文件中增加以下配置：

   module.exports = {
     presets: [
       '@vue/cli-plugin-babel/preset'
     ],
     plugins: [
       [
         "import",
         {
           "libraryName": "xh-flow-ui",
           style: (name) => {
             return `${name}/style.css`;
           }
         }
       ]
     ]
   }
      

3. 在入口文件进行组件按需注册：

   import {ElFormRender, ElFormDesigner, Process } from 'xh-flow-ui'
   import 'xh-flow-ui/lib/index/style.css'
      
   Vue.use(ElFormRender)
   Vue.use(ElFormDesigner)
   Vue.use(Process)

4. 或者在单独的Vue组件中局部引入：

   import { ElFormRender } from 'xh-flow-ui'
   import 'xh-flow-ui/lib/el-form-render/style.css'

表单设计器el-form-designer的使用

    <el-form-designer 
          v-model="mFormData"
          :kitComponents="kitComponents"
          :conf="conf"
          :subTitle="subTitle"
    />

表单设计器ElFormDesignerAPI如下:

| 属性名 | 类型 | 必填 | 默认值 | 说明 | | :-------------: | :------: | :--: | :----: | :------------------------: | | v-model | object | 是 | - | 绑定值。整个表单设计器 | | kitComponents | array | 否 | [] | 套件库集合 | | conf | object | 是 | {} | 整个表单设计器的JSON对象 | | subTitle | string | 是 | '' | 表单设计器中间画布区标题 |

注：表单设计器由于使用了svg资源，所以需要做额外的配置处理。步骤如下：

1. 在入口文件main.js中引入：

   import  'xh-flow-ui/lib/components/SvgIcon/index'

2. 在项目根目录新增assets文件夹，并在该文件夹中新增icons文件夹，将node_modules/xh-flow-ui目录下的assets/icons目录下的svg资源拷贝到项目根目录assets/icons目录里；

3. svg相关的配置：

   3.1 安装依赖："svg-sprite-loader": "^4.1.6",

   3.2 在vue.config.js中进行相关配置：

   const path = require('path');
   function resolve(dir) {
     return path.join(__dirname, dir)
   }
   module.exports = {
   	configureWebpack: config => {
   		return {
   			resolve: {
                   alias: {
                     'assets': resolve('./asstes')
                   }
         		},
   		}
   	},
   	chainWebpack: config => {
   		// 找到svg 默认的处理规则，将某个目录排除处理里的范围
   		config.module.rule('svg').exclude.add(resolve('./asstes/icons')).end();
   		// 新加一个icons的处理规则,用svg-sprite-loader处理，将上面那个目录添加到这个规则的处理范围内
   		config.module
   			.rule('svg-sprite-loader')  // 新添加的处理规则
   			.test(/\.svg$/)
   			.include                   // 添加
   			.add(resolve('./asstes/icons')) //处理svg目录
   			.end()
   			.use('svg-sprite-loader') // 使用svg-sprite-loader处理
   			.loader('svg-sprite-loader')
   			.options({
   					symbolId: 'icon-[name]'
   			})
   	},
   }

表单渲染器el-form-render的使用

    <el-form-render 
        :formJson="formJson"
        :checkDetail="checkDetail"
        :isPreview="true"
        :isH5Module="true"
    />

表单渲染器ElFormRenderAPI如下:

| 属性名 | 类型 | 必填 | 默认值 | 说明 | | :-----------: | :-------: | :--: | :----: | :----------------------------------------------------------: | | formJson | string | 是 | '' | 表单渲染器JSON字符串 | | isPreview | boolean | 否 | false | 是否以预览模式查看表单渲染器的内容 | | checkDetail | boolean | 否 | false | 是否以项目模式查看表单渲染器内容 | | isH5Module | boolean | 否 | false | 是PC端还是APP端布局方式查看表单渲染器，一般用于APP端预览的功能 |

获取表单渲染器ElFormRender处理后的JSON数据的方式如下：

给当前引入使用的表单渲染器组件添加ref，然后调用getFormData方法，如：

    <el-form-render 
        ref="xxxRender"	
        :formJson="formJson"
        :checkDetail="checkDetail"
        :isPreview="true"
        :isH5Module="true"
    />

	this.$refs.xxxRender.getFormData().then((res) => {
	   //这里的res就是表单渲染器处理后的数据集合，该对象有两个属性，分别是formModel(当前表单渲染器表单数据对象)、jsonConf(当前表单渲染器处理后的整个表单JSON格式数据对象集)
	   const { formModel, jsonConf } = res
	})

流程设计器Process的使用

    <Process
          :chooseOptionsConfig="chooseOptionsConfig"
          :conf="conf"
          flowType=‘flowConfig’
          @handelData="handelData"
    />

流程设计器ProcessAPI如下:

| 属性名 | 类型 | 必填 | 默认值 | 说明 | | :-------------------: | :------: | :--: | :----: | :------------------------------------------: | | chooseOptionsConfig | object | 否 | {} | 节点面板选项，详情参考'./package/Process/README' | | conf | object | 否 | {} | 默认节点树，详情参考'./package/Process/README' | | flowType | string | 否 | 'flowConfig' | 流程设计类型，详情参考'./package/Process/README' | | handelData | fn | 否 | (data)=>{} | 流程设计返回数据函数 |