ruoyi-nbcio-plus基于vue3的flowable的业务表单升级修改(一)

简介: ruoyi-nbcio-plus基于vue3的flowable的业务表单升级修改(一)

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio

演示地址:RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/

更多nbcio-boot功能请看演示系统

gitee源代码地址

后端代码: https://gitee.com/nbacheng/nbcio-boot

前端代码:https://gitee.com/nbacheng/nbcio-vue.git

在线演示(包括H5) : http://218.75.87.38:9888

1、原有的api接口文件

import request from '@/utils/request'
// 查询流程业务单列表
export function listCustomForm(query) {
  return request({
    url: '/workflow/customForm/list',
    method: 'get',
    params: query
  })
}
// 查询流程业务单详细
export function getCustomForm(id) {
  return request({
    url: '/workflow/customForm/' + id,
    method: 'get'
  })
}
// 新增流程业务单
export function addCustomForm(data) {
  return request({
    url: '/workflow/customForm',
    method: 'post',
    data: data
  })
}
// 修改流程业务单
export function updateCustomForm(data) {
  return request({
    url: '/workflow/customForm',
    method: 'put',
    data: data
  })
}
// 根据选择关联的流程定义,更新自定义流程表单列表
export function updateCustom(data) {
  return request({
    url: '/workflow/customForm/updateCustom',
    method: 'post',
    data: data
  })
}
// 删除流程业务单
export function delCustomForm(id) {
  return request({
    url: '/workflow/customForm/' + id,
    method: 'delete'
  })
}

2、修改成两个文件index.ts和types.ts

其中index.ts如下:

import request from '@/utils/request';
import { AxiosPromise } from 'axios';
import { WfCustomForm, WfCustomFormQuery, WfCustomFormVO, CustomFormVO } from '@/api/workflow/customForm/types';
// 查询流程业务单列表
export function listCustomForm(query: WfCustomFormQuery): AxiosPromise<WfCustomFormVO[]> {
  return request({
    url: '/workflow/customForm/list',
    method: 'get',
    params: query
  })
}
// 查询流程业务单详细
export function getCustomForm(id: string | number) {
  return request({
    url: '/workflow/customForm/' + id,
    method: 'get'
  })
}
// 新增流程业务单
export function addCustomForm(data: WfCustomForm) {
  return request({
    url: '/workflow/customForm',
    method: 'post',
    data: data
  })
}
// 修改流程业务单
export function updateCustomForm(data: WfCustomForm) {
  return request({
    url: '/workflow/customForm',
    method: 'put',
    data: data
  })
}
// 根据选择关联的流程定义,更新自定义流程表单列表
export function updateCustom(data: CustomFormVO) {
  return request({
    url: '/workflow/customForm/updateCustom',
    method: 'post',
    data: data
  })
}
// 删除流程业务单
export function delCustomForm(id: string | number) {
  return request({
    url: '/workflow/customForm/' + id,
    method: 'delete'
  })
}

types.ts文件如下:

/**
 * 流程业务表单返回对象
 */
export interface WfCustomFormVO {
  id: string | number;
  businessName: string;
  businessService: string;
  flowName: string;
  deployId: string;
  routeName: string;
  component: string;
  tableId: string | number;
}
export interface WfCustomForm {
  id: string | number;
  businessName: string;
  businessService: string;
  flowName: string;
  deployId: string;
  routeName: string;
  component: string;
  tableId: string | number;
}
/**
 * 流程业务表单查询对象类型
 */
export interface WfCustomFormQuery extends PageQuery {
  businessName?: string;
  businessService?: string;
  flowName?: string;
}
export interface WfCustomForm {
  id: string | number;
  businessName: string;
  businessService: string;
  flowName: string;
  deployId: string;
  routeName: string;
  component: string;
  tableId: string | number;
}
export interface CustomFormVO {
  id: string | number;
  deployId: string;
  flowName: string;
}

3、在实际vue界面调用的地方需要引入上面的内容,如:

import { listCustomForm, getCustomForm, delCustomForm, addCustomForm, updateCustomForm, updateCustom } from '@/api/workflow/customForm';
import { WfCustomFormVO, WfCustomFormQuery, WfCustomForm, CustomFormVO } from '@/api/workflow/customForm/types';


相关文章
|
前端开发
基于若依ruoyi-nbcio支持flowable流程增加自定义业务表单(二)
基于若依ruoyi-nbcio支持flowable流程增加自定义业务表单(二)
1184 1
|
前端开发
基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持自定义业务表单流程(二)
基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持自定义业务表单流程(二)
1097 2
基于若依ruoyi-nbcio支持flowable流程增加自定义业务表单(三)
基于若依ruoyi-nbcio支持flowable流程增加自定义业务表单(三)
796 1
|
SQL JavaScript 前端开发
基于若依ruoyi-nbcio支持flowable流程增加自定义业务表单(一)
基于若依ruoyi-nbcio支持flowable流程增加自定义业务表单(一)
1301 2
|
前端开发
基于jeecgboot的flowable流程支持退回到发起人节点表单修改功能
基于jeecgboot的flowable流程支持退回到发起人节点表单修改功能
1474 0
|
SQL 前端开发
基于若依ruoyi-nbcio增加flowable流程待办消息的提醒,并提供右上角的红字数字提醒(八)
基于若依ruoyi-nbcio增加flowable流程待办消息的提醒,并提供右上角的红字数字提醒(八)
778 0
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable的业务表单升级修改(二)
ruoyi-nbcio-plus基于vue3的flowable的业务表单升级修改(二)
385 0
|
前端开发 数据库 JavaScript
基于Flowable的流程挂接自定义业务表单的设计与实践
文章讨论了如何在Flowable流程引擎中挂接自定义业务表单,以及相关设计和实践的步骤。文章中包含了一些前后端代码示例,如Vue组件的模板和脚本部分,这些代码用于实现与Flowable流程引擎交互的界面。例如,有一个按钮组件用于提交申请,点击后会触发applySubmit方法,该方法会与后端API进行交互,处理流程启动、查询关联流程等逻辑。
54693 11
|
SQL 前端开发
基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持自定义业务表单流程(五)
基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持自定义业务表单流程(五)
629 2
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable的websocket消息组件的升级修改(一)
ruoyi-nbcio-plus基于vue3的flowable的websocket消息组件的升级修改(一)
324 1