wh-flow

基于 Element UI的一套包括流程列表和流程页面的UI组件

npm插件地址：  https://www.npmjs.com/package/wh-flow

安装

npm install wh-flow --save

使用

全局引用 main.js

import WHFlow from 'wh-flow'
Vue.use(WHFlow)

局部引用 test.vue

import { whFlowList, whFlowEditor ... } from 'wh-flow'
components: {
    whFlowList,
    whFlowEditor,
    ...
}

注意

本插件中使用 svg 图片， 项目中使用需要引入 svg-sprite-loader 和 vue-json-editor（ debug 模式查看 json 数据） svg-sprite-loader配置 webpack中的chainWebpack

=== 配置示例 src/assets/icons/svg 中存放 下载的svg svg 下载地址:

npm install svg-sprite-loader --save-dev

chainWebpack: (config) => {
  config.module
    .rule('svg')
    .exclude.add(resolve('src/assets/icons'))
    .end()
  config.module
    .rule('icons')
    .test(/\.svg$/)
    .include.add(resolve('src/assets/icons'))
    .end()
    .use('svg-sprite-loader')
    .loader('svg-sprite-loader')
    .options({
      symbolId: 'icon-[name]'
    })
    .end()
}

组件

1. wh-flow-List

| 属性 | 类型 | 必填 | 说明 | | --- | --- | --- | --- | | permissionsUser |array| 否 | 按钮的权限默认全显示（可取值：类型管理： wh:flow:type:manage，流程新增：wh:flow:add，流程编辑：wh:flow:edit，流程删除：wh:flow:remove） | baseUrl | string | 是 | 请求接口的地址（例如：'http://192.168.27.74:8082'） | | headers | object | 是 | 请求接口的请求头(例如； {Authorization: 'Bearer ***',Clientid: ''}) |

| 方法 | 说明 |
| --- | --- | | on-click-command | function (data){} data.type：点击的类型， data.id： 点击的 id， data.disabled: 是否只读 |

例子：

<wh-flow-list
  :base-url="baseUrl"
  :headers="headers"
  @on-click-command="handleClickCommand"/>

2. wh-flow-editor

| 属性 | 类型 | 必填 | 说明 |
| --- | --- | --- | --- | | baseUrl |string| 是 | 请求接口的地址（例如：'http://192.168.27.74:8082'） | | headers|object| 是 | 请求接口的请求头(例如； {Authorization: 'Bearer ****',Clientid: ''}) | | flowId | string | 否 | 编辑，查看的时候需要 | | disabled | boolean | 否 | 是否不能编辑， 默认 false 可编辑 | | showJson | boolean | 否 | 是否显示 对应的JSON数据， 默认 false 不展示 |

| 方法 | 说明 |
| --- | --- | | on-back | 编辑页面的返回事件 | | on-complete | 新增或者编辑页面点击上传后的事件，参数：修改后的上传参数 |

例子：

<wh-flow-editor
      :base-url="baseUrl"
      :headers="headers"
      @on-back="onBack"
      @on-complete="onComplete" />

3. wh-flow-display

| 属性 | 类型 | 必填 | 说明 |
| --- | --- | --- | --- | | baseUrl | string | 是 | 请求接口的地址（例如：'http://192.168.27.74:8082'） | | headers | object | 是 | 请求接口的请求头(例如； {Authorization: 'Bearer ****',Clientid: ''}) | | flowId | string | 是 | 请求对应的流程 json | | showHeader | boolean | 否 | 默认显示，false上面没有返回按钮等信息 |

| 方法 | 说明 |
| --- | --- | | on-back | 编辑页面的返回事件 |

例子：

<wh-flow-display
      :flow-id="flowId"
      :base-url="baseUrl"
      :headers="headers"
      :show-header="false"
      @on-back="onBack" />