基于jeecgboot-vue3的Flowable流程-待办任务（一）_vue3集成flowable

因为这个项目license问题无法开源，更多技术支持与服务请加入我的知识星球。

1、ToDo.data.ts的数据信息如下

import {BasicColumn} from '/@/components/Table';
import {FormSchema} from '/@/components/Table';
import { rules} from '/@/utils/helper/validator';
import { render } from '/@/utils/common/renderUtils';
//列表数据
export const columns: BasicColumn[] = [
  {
    title: '#',
    dataIndex: '',
    key:'rowIndex',
    width:60,
    align:"center"
  },
  {
    title:'任务编号',
    align:"center",
    dataIndex: 'procInsId',
  },
  {
    title:'流程名称',
    align:"center",
    dataIndex: 'procDefName',
  },
  {
    title:'任务节点',
    align:"center",
    dataIndex: 'taskName',
  },
  {
    title:'流程类别',
    align:"center",
    dataIndex: 'category'
  },
  {
    title:'流程版本',
    align:"center",
    dataIndex: 'procDefVersion'
  },
  {
    title:'业务主键',
    align:"center",
    dataIndex: 'businessKey'
  },
  {
    title:'流程发起人',
    align:"center",
    dataIndex: 'startUserName'
  },
  {
    title:'接收时间',
    align:"center",
    dataIndex: 'createTime'
  },
];
 
//查询数据
export const searchFormSchema: FormSchema[] = [
  {
    label: "流程名称",
    field: 'procDefName',
    component: 'Input',
  },
  {
    label: "开始日期",
    field: 'createTime',
    component: 'DatePicker',
  },
];
 
//表单数据
export const formSchema: FormSchema[] = [
  {
    title:'任务编号',
    align:"center",
    dataIndex: 'procInsId',
  },
  {
    title:'流程名称',
    align:"center",
    dataIndex: 'procDefName',
  },
  {
    title:'任务节点',
    align:"center",
    dataIndex: 'taskName',
  },
  {
    title:'流程类别',
    align:"center",
    dataIndex: 'category'
  },
  {
    title:'流程版本',
    align:"center",
    dataIndex: 'procDefVersion'
  },
  {
    title:'业务主键',
    align:"center",
    dataIndex: 'businessKey'
  },
  {
    title:'流程发起人',
    align:"center",
    dataIndex: 'startUserName'
  },
  {
    title:'接收时间',
    align:"center",
    dataIndex: 'createTime'
  },
	// TODO 主键隐藏字段，目前写死为ID
  {
    label: '',
    field: 'id',
    component: 'Input',
    show: false,
  },
];
 
// 高级查询数据
export const superQuerySchema = {
  procInsId: {title: '任务编号',order: 0,view: 'text', type: 'string',},
  procDefName: {title: '流程名称',order: 1,view: 'text', type: 'string',},
  taskName: {title: '任务节点',order: 2,view: 'text', type: 'string',},
  category: {title: '流程类别',order: 2,view: 'text', type: 'string',},
  procDefVersion: {title: '流程版本',order: 3,view: 'text', type: 'string',},
  businessKey: {title: '业务主键',order: 4,view: 'text', type: 'string',},
  startUserName: {title: '流程发起人',order: 4,view: 'text', type: 'string',},
  createTime: {title: '接收时间',order: 5,view: 'date', type: 'string',},
};

2、表格数据用todoListNew接口

//注册table数据
  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
    tableProps: {
      title: 'toDo',
      api: todoListNew,
      columns,
      canResize:false,
      useSearchForm: false,
      actionColumn: {
        width: 120,
        fixed: 'right',
      },
      beforeFetch: (params) => {
        return Object.assign(params, queryParam);
      },
    },
    exportConfig: {
      name: "toDo",
      url: getExportUrl,
      params: queryParam,
    },
  });

3、接口设置成如下，返回没有result这些信息，直接就是数据了

// 查询待办任务列表
export const todoListNew = (params: any) => defHttp.get({ url: Api.todoListNew, params });

4、后端接口跟原先vue2版本一样

5、效果图如下：