开发者中心

# 工作流接入使用说明-前端

# 网页端

1、如在framework-vue-demo中的通用审批页面，使用sh-activiti-process 流程节点组件，sh-activiti-button 操作按钮组件。

img-1

# sh-activiti-process 流程节点组件

/**
 * :type 操作类型 add/edit/view/process
 * :formRef 表单的ref
 * :form 业务单数据
 * :activitiApi 接口
 * @loadList 回调，用于提交后刷新列表
 */
<sh-activiti-process
    ref="activiti"
    title="流程处理"
    :type="type"
    :formRef="formRef"
    :form="form"
    :activitiApi="activitiApi"
    @loadList="loadList">
</sh-activiti-process>

activitiApi参数如下:

activitiApi: {
        saveApi: FILE_SAVE,  // 保存接口
        updateApi: FILE_UPDATE,  // 提交接口
        processApi: FILE_PROCESS,  // 获取审批节点
        recallApi: FILE_RECALL,  // 撤回接口
        detailApi: FILE_DETAIL  // 业务单详情
      }

formRef 表单的ref:

// 在表单中定义ref=‘form’
<sh-form :model="form" ref="form">
    
// 然后把表单的ref赋值给formRef
this.formRef = this.$refs.form

# sh-activiti-button 操作按钮组件

/**
 * :type 操作类型 add/edit/view/process
 * :activitiRef // sh-activiti-process组件的ref
 * :closeName 关闭按钮名称
 * :@close 关闭回调
 */
<sh-activiti-button 
	:type="type"
	:activitiRef="activitiRef"
	@close="handleClose">
</sh-activiti-button>

activitiRef 是sh-activiti-process组件的ref

// 在流程节点组件中定义ref=‘activiti’
<sh-activiti-process ref="activiti">
    
// 然后把表单的ref赋值给formRef
this.activitiRef = this.$refs.activiti

2、在打开通用审批页面弹框时，须初始化sh-activiti-process流程节点组件，并把表单的ref赋值给formRef；把表单的ref赋值给formRef。row为业务单信息，并且存在字段processTaskId ，则根据id 查询审批业务单详情。

如：

img-2

# 移动端

1、如framework-app-demo外出的页面，并使用sh-activiti-process流程节点组件

img-5

# sh-activiti-process 流程节点组件

/**
 * :form {Object} 业务单的数据
 * :activitiApi {Object} 接口
 * :validate {Function} 表单校验方法
 * @loadList {Function} 回调，用于提交后的操作
 */
<template>
  <sh-form ref="form">
    ...
  </sh-form>
  <sh-activiti-process ref="activiti" :activitiApi="activitiApi" :validate="validate" :form="form" @loadList="loadList" />
</template>

activitiApi参数如下:

activitiApi: {
  processApi: EGRESS_PROCESS, // 获取流程审批节点
  saveApi: EGRESS_SAVE, // 保存
  updateApi: EGRESS_UPDATE, // 更新
  deleteApi: EGRESS_DELETE, // 删除
  revokeApi: EGRESS_REVOKE, // 作废
  recallApi: RECALL_APPRO // 撤回
}

validate 表单校验方法

1、如果表单使用的是sh-form

validate(callback) {
  // 可以在这里做一些提交前的额外校验或数据处理
  // ...
  this.$refs.form.validate(valid => {
    if (!valid) {
      callback()
    }
  })
}

2、如果使用的是van-form

validate(callback) {
  // 可以在这里做一些提交前的额外校验或数据处理
  // ...
  this.$refs.form.validate().then(() => {
    callback()
  }).catch(err => {
    console.log(err)
  })
}

2、初始化流程节点

如为新增一个流程，可不传 id，除此外编辑审批等其他操作必须传业务单 id；

// id为业务单id
this.$refs.activiti.init(id)

3、有业务单id加载完业务单详情信息后，再去加载对应的调流程节点信息。

若有新增列表，则使用this.$router.push()获取待办详情；否则使用监听queryId

this.$router.push({ path: '/document', query: { id: item.id, type: 'recruitmentDemand', newActiviti: item.newActiviti}})

img-5