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

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

gitee源代码地址

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

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

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

gitee源代码地址

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

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

在线演示（包括H5） ： http://122.227.135.243: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';