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';


相关文章
|
6月前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable流程设计器组件的升级修改
ruoyi-nbcio-plus基于vue3的flowable流程设计器组件的升级修改
163 1
|
6月前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable的自定义业务提交申请组件的升级修改
ruoyi-nbcio-plus基于vue3的flowable的自定义业务提交申请组件的升级修改
73 2
|
6月前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable的自定义业务撤回申请组件的升级修改
ruoyi-nbcio-plus基于vue3的flowable的自定义业务撤回申请组件的升级修改
89 2
|
6月前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable流程设计器主界面升级修改
ruoyi-nbcio-plus基于vue3的flowable流程设计器主界面升级修改
108 1
|
6月前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable流程查看器组件的升级修改
ruoyi-nbcio-plus基于vue3的flowable流程查看器组件的升级修改
75 1
|
6月前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable的websocket消息组件的升级修改(一)
ruoyi-nbcio-plus基于vue3的flowable的websocket消息组件的升级修改(一)
54 1
|
6月前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable的业务表单升级修改(二)
ruoyi-nbcio-plus基于vue3的flowable的业务表单升级修改(二)
88 0
|
6月前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
107 0
|
6月前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable流程基础信息ElementBaseInfo.vue的升级修改
ruoyi-nbcio-plus基于vue3的flowable流程基础信息ElementBaseInfo.vue的升级修改
38 0
|
6月前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable新建流程的升级修改
ruoyi-nbcio-plus基于vue3的flowable新建流程的升级修改
63 0