流程组件接入文档

新流程接入文档

安装

npm install ddy-process-pc-vue2

基础用法

// 导入依赖
import process, {
  ProcessAPI,
  beforeCreate,
  reactivate,
  ProcessEnums,
} from "ddy-process-pc-vue2";

// 设置请求函数
ProcessAPI.setAjax(ajaxFuc);

说明： ajaxFuc 为函数类型

ajaxFuc(obj)

obj {
 type: String, //请求方式（'get'||'post'）
 url: String,
 param: Any
}
// 调用时会传入上述参数

<!-- 创建并启动流程 -->
<template>
  <beforeCreate ref="beforeCreateRef"></beforeCreate>
</template>

<script>
export default {
  components: {
    beforeCreate
  },
  methods: {
    // 1，打开流程弹窗
    openProcess(){
      this.$refs.beforeCreateRef.selectShow({
        // 🆘businessCode流程标识，原先的type，字符串
        // 🆘userInfo用户信息，包括用户部门，用户公司，等等都放在这
        businessCode: '9',
        userInfo: {
          deptId: this.saveData.deptId || '',
          "subjectId": localStorage.getItem('lastSubjectId') || '',
        }
      }).then((createAndStart) => {
        // 2， 发起流程，业务保存成功后调用
        let p = {
          // 业务id
          processBusinessKey: data.businessKey,
          // 🆘流程标识，原先的type，字符串
          businessType: data.businessType
          // 流程标题
          title: '陈淞淞发起了xxx申请',
          // 流程名称,与流程标识对应
          name: '请假申请',
          // 发起流程/激活流程使用的申请人id
          applyUserId: this.$store.getters.userId,
        };
        createAndStart(p).then((res)=>{
          if (res.code == ProcessEnums.apiCode.success) {
            // 创建成功
          }else{
            // 创建失败
          }
        }).finally(()=>{
          // 创建失败
        })
      })
    },
    // 复活流程
    revivalProcess(){
      // 1，打开流程弹窗
      // 🆘参数由字符串列表 改为 对象形式
      this.$refs.beforeCreateRef.revivalShow({
        // 流程实例id
        processInstId: saveData.processId,
        // 部门id
        deptId: saveData.deptId,
        // 业务id
        businessId: saveData.id,
      }).then((revivalFlow) => {
        // ...业务保存的相关逻辑

        // 2， 重新发起，业务保存成功后调用
        // 🆘参数 改为 对象形式
        revivalFlow({
          // 流程名称,与流程标识对应
          name: '请假申请',
          // 申请人id
          applyUserId: this.$store.getters.userId,
        }).then((res)=>{
          if (res.code == ProcessEnums.apiCode.success) {
            // 复活成功
          }else{
            // 复活失败
          }
        }).finally(()=>{
          // 复活失败
        })
      })
    }
  }
}
</script>

<!-- 创建并启动流程 -->
<template>
  <process
    :processId="processInstId"
    @Complete="
      //操作成功回调
    "
    :userId="userId"
    :isView="
    //是否只查看
    ">
  </process>
</template>

<script>
export default {
  components: {
    process
  },
}
</script>

yanhuang 流程接入文档

安装

npm install ui-process-pc

基础用法

// 导入依赖
import process, {
  ProcessAPI,
  beforeCreate,
  reactivate,
  ProcessEnums,
} from "ui-process-pc";

// 设置请求函数
ProcessAPI.setAjax(ajaxFuc);

说明： ajaxFuc 为函数类型

ajaxFuc(obj)

obj {
 type: String, //请求方式（'get'||'post'）
 url: String,
 param: Any
}
// 调用时会传入上述参数

// 创建并启动流程
<beforeCreate ref="beforeCreateRef"></beforeCreate>


export default {
  components: {
    beforeCreate
    ...

this.$refs.beforeCreateRef.selectShow({
  appId: 'com.awspaas.user.apps.top.study.project',
  processGroupName: this.beType
}).then((createAndStart) => {
  // ...业务保存的相关逻辑

  // 业务保存成功后调用
  let p = {
    processBusinessKey: res.data.id,  //业务ID
    businessType: 26,   //流程类型
    title: '标题' //流程标题
  };
  createAndStart(p).then((res)=>{
     if (res.code == ProcessEnums.apiCode.success) {
      // 创建成功
     }else{
      // 创建失败
     }
  }).finally(()=>{
    // 创建失败
  })
})

// 复活流程
<beforeCreate ref="beforeCreateRef"></beforeCreate>


export default {
  components: {
    beforeCreate
    ...

this.$refs.beforeCreateRef.revivalShow(BusinessKey).then((revivalFlow) => {
  // ...业务保存的相关逻辑

  // 业务保存成功后调用
  revivalFlow().then((res)=>{
     if (res.code == ProcessEnums.apiCode.success) {
      // 复活成功
     }else{
      // 复活失败
     }
  }).finally(()=>{
    // 复活失败
  })
})

// 查看及流程审批相关操作
<process
    :processId="processInstId"
    :processDefId="processDefId"
    :task="task"
    @Complete="
      //操作成功回调
    "
    :userId="userId"
    :isView="
    //是否只查看
    ">
</process>


task {
  activityDefId: 节点id,
  processInstId: 流程实例id,
  processDefId: 流程定义id,
  id: 任务id,
}