基于jeecgboot-vue3的Flowable流程-待办任务(一) 因为这个项目license问题无法开源,更多技术支持与服务请加入我的知识星球。

因为这个项目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、效果图如下:

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-08 15:14:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-08 15:14:02       100 阅读
  3. 在Django里面运行非项目文件

    2024-06-08 15:14:02       82 阅读
  4. Python语言-面向对象

    2024-06-08 15:14:02       91 阅读

热门阅读

  1. 基于CycleGAN的图像风格转换

    2024-06-08 15:14:02       21 阅读
  2. C++ 纯虚函数 virtual = 0

    2024-06-08 15:14:02       35 阅读
  3. python --监听鼠标事件

    2024-06-08 15:14:02       29 阅读
  4. Vue Web前端:深入探索与实战应用

    2024-06-08 15:14:02       37 阅读