ant-process-ui v0.1.4

安装

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 参数配置

事件

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('您点击了全部并关闭该组件')
      }
    }
  }

• 自定义请求配置

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

  <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 参数配置

事件

busines-component

工作流查看控件

示例

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

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

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

config 参数配置