abc_ABC123A
abc_ABC123A

ruoyi自定义工作流（前端二，添加流程管理页面）

添加流程管理页面包括三部分

引入api代码
引入主页面代码
添加菜单

引入api代码（fp放在api目录下）

ruoyi自定义工作流（前端二，添加流程管理页面）_第1张图片

  1. exam.js
import request from '@/utils/request'

// 查询流程节点与审批关联列表
export function listExam(query) {
  return request({
    url: '/fp/exam/list',
    method: 'get',
    params: query
  })
}

// 查询流程节点与审批关联详细
export function getExam(nodeId) {
  return request({
    url: '/fp/exam/' + nodeId,
    method: 'get'
  })
}

// 新增流程节点与审批关联
export function addExam(data) {
  return request({
    url: '/fp/exam',
    method: 'post',
    data: data
  })
}

// 修改流程节点与审批关联
export function updateExam(data) {
  return request({
    url: '/fp/exam',
    method: 'put',
    data: data
  })
}

// 删除流程节点与审批关联
export function delExam(nodeId) {
  return request({
    url: '/fp/exam/' + nodeId,
    method: 'delete'
  })
}

// 导出流程节点与审批关联
export function exportExam(query) {
  return request({
    url: '/fp/exam/export',
    method: 'get',
    params: query
  })
}
  1. group.js
import request from '@/utils/request'

// 查询流程分组列表
export function listGroup(query) {
  return request({
    url: '/transmonitor/group/list',
    method: 'get',
    params: query
  })
}

// 查询流程分组列表不分页
export function allGroup(query) {
  return request({
    url: '/fp/group/all',
    method: 'get',
    params: query
  })
}

// 查询流程分组详细
export function getGroup(id) {
  return request({
    url: '/fp/group/' + id,
    method: 'get'
  })
}

// 新增流程分组
export function addGroup(data) {
  return request({
    url: '/fp/group',
    method: 'post',
    data: data
  })
}

// 分组排序
export function sortGroup(data) {
  return request({
    url: '/fp/group/sort',
    method: 'post',
    data: data
  })
}

// 修改流程分组
export function updateGroup(data) {
  return request({
    url: '/fp/group',
    method: 'put',
    data: data
  })
}

// 删除流程分组
export function delGroup(id) {
  return request({
    url: '/fp/group/' + id,
    method: 'delete'
  })
}

// 导出流程分组
export function exportGroup(query) {
  return request({
    url: '/fp/group/export',
    method: 'get',
    params: query
  })
}
  1. mount.js
import request from '@/utils/request'

// 查询流程挂载列表
export function listMount(query) {
  return request({
    url: '/fp/mount/list',
    method: 'get',
    params: query
  })
}

// 查询流程挂载详细
export function getMount(busCode) {
  return request({
    url: '/fp/mount/' + busCode,
    method: 'get'
  })
}

// 新增流程挂载
export function addMount(data) {
  return request({
    url: '/fp/mount',
    method: 'post',
    data: data
  })
}

// 修改流程挂载
export function updateMount(data) {
  return request({
    url: '/fp/mount',
    method: 'put',
    data: data
  })
}

// 删除流程挂载
export function delMount(busCode) {
  return request({
    url: '/fp/mount/' + busCode,
    method: 'delete'
  })
}

// 导出流程挂载
export function exportMount(query) {
  return request({
    url: '/fp/mount/export',
    method: 'get',
    params: query
  })
}
  1. node.js
import request from '@/utils/request'

// 查询流程节点列表
export function listNode(query) {
  return request({
    url: '/fp/node/list',
    method: 'get',
    params: query
  })
}

// 查询流程回调处理列表 不分页
export function allCallback(query) {
  return request({
    url: '/fp/callback/all',
    method: 'get',
    params: query
  })
}

// 查询流程进度
export function listPs(query) {
  return request({
    url: '/fp/busNode/query',
    method: 'get',
    params: query
  })
}

// 查询流程节点详细
export function getNode(nodeId) {
  return request({
    url: '/fp/node/' + nodeId,
    method: 'get'
  })
}

// 查询流程节点及操作权限
export function listNodeDatas(proId) {
  return request({
    url: '/fp/node/datas/' + proId,
    method: 'get'
  })
}

// 新增流程节点
export function addNode(data) {
  return request({
    url: '/fp/node',
    method: 'post',
    data: data
  })
}

// 新增流程节点
export function insertNode(data) {
  return request({
    url: '/fp/node/insert',
    method: 'post',
    data: data
  })
}

// 修改流程节点
export function updateNode(data) {
  return request({
    url: '/fp/node',
    method: 'put',
    data: data
  })
}

// 删除流程节点
export function delNode(nodeId) {
  return request({
    url: '/fp/node/' + nodeId,
    method: 'delete'
  })
}

// 导出流程节点
export function exportNode(query) {
  return request({
    url: '/fp/node/export',
    method: 'get',
    params: query
  })
}
  1. proce.js
import request from '@/utils/request'

// 查询流程定义列表
export function listProce(query) {
  return request({
    url: '/fp/proce/list',
    method: 'get',
    params: query
  })
}

// 查询流程定义列表不分页
export function allProce(query) {
  return request({
    url: '/fp/proce/all',
    method: 'get',
    params: query
  })
}

// 查询流程定义详细
export function getProce(proId) {
  return request({
    url: '/fp/proce/' + proId,
    method: 'get'
  })
}

// 新增流程定义
export function addProce(data) {
  return request({
    url: '/fp/proce',
    method: 'post',
    data: data
  })
}

// 停用或启用流程
export function setStatus(data) {
  return request({
    url: '/fp/proce/setStatus',
    method: 'post',
    data: data
  })
}

// 修改流程定义
export function updateProce(data) {
  return request({
    url: '/fp/proce',
    method: 'put',
    data: data
  })
}

// 删除流程定义
export function delProce(proId) {
  return request({
    url: '/fp/proce/' + proId,
    method: 'delete'
  })
}

// 导出流程定义
export function exportProce(query) {
  return request({
    url: '/fp/proce/export',
    method: 'get',
    params: query
  })
}

// 预览流程节点
export function queryPs(query) {
  return request({
    url: '/fp/proce/query',
    method: 'get',
    params: query
  })
}
  1. start.js
import request from '@/utils/request'

// 查询我的申请
export function listApply(query) {
  return request({
    url: '/fp/start/list',
    method: 'get',
    params: query
  })
}
// 查询抄送我的
export function listCcme(query) {
  return request({
    url: '/fp/start/ccme',
    method: 'get',
    params: query
  })
}
// 查询由我参与的
export function listBmpt(query) {
  return request({
    url: '/fp/start/bmpt',
    method: 'get',
    params: query
  })
}

// 查询流程节点列表
export function listStart(query) {
  return request({
    url: '/fp/start/query',
    method: 'get',
    params: query
  })
}

// 流程节点操作
export function executorFp(data) {
  return request({
    url: '/fp/start/executorFp',
    method: 'post',
    data: data
  })
}


// 流程启动
export function startFp(data) {
  return request({
    url: '/fp/start/startFp',
    method: 'post',
    data: data
  })
}


// 流程重新发起
export function initiateFp(data) {
  return request({
    url: '/fp/start/initiateFp',
    method: 'post',
    data: data
  })
}

// 流程驳回
export function rejectedFp(data) {
  return request({
    url: '/fp/start/rejectedFp',
    method: 'post',
    data: data
  })
}

引入主页面代码（fp放在views目录下）

ruoyi自定义工作流（前端二，添加流程管理页面）_第2张图片

  1. apply–>index.vue
  1. bmpt —> index.vue
  1. ccme —> index.vue
  1. model —> tl —>index.vue
  1. model —> tl —> child.vue
  1. mount —> index.vue
  1. proce —> fg ----> CodeTypeDialog.vue
  1. proce —> fg —> DraggableItem.vue
  1. proce —> fg ----> FormDrawer.vue