README

安装

NPM

$	npm install ant-process-ui

使用

全部引入

import Vue from 'vue'
import Process from 'ant-process-ui'
import 'ant-process-ui/lib/ant-process-ui.css'

Vue.use(Process)

组件

todo-list

待办事项控件

示例

显示状态

visible 属性默认为false，通过更改该属性控制显示与隐藏

// 显示待办事项控件
<todo-list :config="{visible: true}"></todo-list>

// 隐藏待办事项控件
<todo-list :config="{visible: false}"></todo-list>

待办事项图标

组件本身自带待办事项图标，业务端可通过传入 icon 属性修改图标
```
// 显示待办事项控件
<todo-list :config="{icon: require('url')}"></todo-list>
```

自定义事件

点击【全部】，业务端可通过 handleTotal 自定义事件接收事件通知。具体业务需求由业务端自行实现

<todo-list :config="config" @handleTotal="handleTotal"></todo-list>

export default {
  data () {
    return {
      config: {
        visible: true
      }
    }
  },
  methods: {
    handleTotal() {
          this.config.visible = false
      console.log('您点击了全部并关闭该组件')
    }
  }
}

自定义请求配置

为了更灵活应对业务需求，提供了自定义请求配置入口。通过request对象中配置 url、method、data，即可发起请求获取数据。获取的数据结构必须与组件默认接口返回的数据结构一致

<todo-list :config="config" @handleTotal="handleTotal"></todo-list>

export default {
  data () {
    return {
      config: {
        visible: true,
        request: {
          url: 'url',
          method: 'post',
          data: {
            current: 1,
            size: 20
          }
        }
      }
    }
  },
  methods: {
    handleTotal() {
          this.config.visible = false
      console.log('您点击了全部并关闭该组件')
    }
  }
}

config 参数配置

参数	说明	类型	可选值	默认值
visible	控制组件显示隐藏	Array	true/false	false
icon	设置待办事项图标	String	-	-
request	通过设置url、method、data自定义请求	Object	-	-
width	设置弹框宽度	String	-	640px
totalPage	点击【全部】时应跳转的页面地址，地址为完整的url路径。如：https://.....。该配置与handleTotal 自定义事件二选一。如设置该配置则事件不生效。请注意	String	-	-

事件

参数	说明	类型
handleTotal	点击【全部】时触发	-

done-list

已办事项控件

示例

显示状态

visible 属性默认为false，通过更改该属性控制显示与隐藏

// 显示已办事项控件
<done-list :config="{visible: true}"></done-list>

// 隐藏已办事项控件
<done-list :config="{visible: false}"></done-list>

已办事项图标

组件本身自带待办事项图标，业务端可通过传入 icon 属性修改图标
```
// 显示已办事项控件
<done-list :config="{icon: require('url')}"></done-list>
```

自定义事件

点击【全部】，业务端可通过 handleTotal 自定义事件接收事件通知。具体业务需求由业务端自行实现

<done-list :config="config" @handleTotal="handleTotal"></done-list>

export default {
  data () {
    return {
      config: {
        visible: true
      }
    }
  },
  methods: {
    handleTotal() {
          this.config.visible = false
      console.log('您点击了全部并关闭该组件')
    }
  }
}

自定义请求配置

<done-list :config="config" @handleTotal="handleTotal"></done-list>

export default {
  data () {
    return {
      config: {
        visible: true,
        request: {
          url: 'url',
          method: 'post',
          data: {
            current: 1,
            size: 20
          }
        }
      }
    }
  },
  methods: {
    handleTotal() {
          this.config.visible = false
      console.log('您点击了全部并关闭该组件')
    }
  }
}

config 参数配置

参数	说明	类型	可选值	默认值
visible	控制组件显示隐藏	Array	true/false	false
icon	设置待办事项图标	String	-	-
request	通过设置url、method、data自定义请求	Object	-	-
width	设置弹框宽度	String	-	640px
totalPage	点击【全部】时应跳转的页面地址，地址为完整的url路径。如：https://.....。该配置与handleTotal 自定义事件二选一。如设置该配置则事件不生效。请注意	String	-	-

事件

参数	说明	类型
handleTotal	点击【全部】时触发	-

busines-component

工作流查看控件

示例

通过配置 config 对象中的 flowableId(流程实例ID)、id(任务ID，当从已办进详情时不为空。即查某任务信息) 即可渲染

<busines-component :config="config"></busines-component>

export default {
  data () {
    return {
      config: {
        flowableId: '',
          id: ""
      }
    }
  }
}

config 参数配置

参数	说明	类型	可选值	默认值
flowableId	流程实例ID	String	-	-
id	id	String	-	-

Usage no npm install needed!

README

安装

NPM

使用

组件

todo-list

done-list

busines-component