基于jeecgboot-vue3的Flowable流程-待办任务(一)

news2024/11/26 9:30:47
因为这个项目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、效果图如下:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1797121.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

气膜体育馆的建设对环境影响如何—轻空间

气膜体育馆作为一种新型的体育设施,凭借其独特的结构和施工方式,在建设过程中对环境的影响较小。相比传统的体育馆建设,气膜体育馆在多个方面展现出了环保和可持续发展的优势。 减少对土地的破坏 气膜体育馆的建设无需进行大量的土建工程&…

四川汇聚荣聚荣科技有限公司综合实力如何?

在探讨一个公司的综合实力时,我们不仅关注其经济表现,还应深入分析其技术实力、市场地位、创新能力、团队素质以及社会责任感等多个维度。四川汇聚荣聚荣科技有限公司作为一家立足于科技领域的企业,其实力究竟如何呢?接下来的内容将围绕这一…

前端进阶之HTML表单

前端之HTML表单 1.HTML表单的定义及概述 HTML 表单用于搜集不同类型的用户输入。 用<form> 元素定义HTML表单 例如&#xff1a; <form>. form elements. </form>1.1 HTML 表单包含表单元素&#xff1a;表单元素指的是不同类型的 input 元素、复选框、单…

postman如何导入证书

1、打开postman&#xff0c;点击Settings。 2、添加证书。 3、填写要访问平台的URL路径及端口、证书文件、证书密码。 4、添加完之后即可立即调用postman。

STM32项目分享:智能家居语音系统

目录 一、前言 二、项目简介 1.功能详解 2.主要器件 三、原理图设计 四、PCB硬件设计 1.PCB图 2.PCB打板焊接图: 五、程序设计 六、实验效果 七、包含内容 项目分享 一、前言 项目成品图片&#xff1a; 哔哩哔哩视频链接&#xff1a; https://www.bilibili.com…

C51学习归纳6 --- UART串口数据通信

这一部分我认为是十分重要的&#xff0c;没有了数据的传输&#xff0c;我们做的很多事情将是没有意义的。我们一般利用串口做两件事&#xff0c;一是单片机向电脑发送信息&#xff0c;二是单片机接收电脑的信息。 一、UART原理 TXD:发送信息通道,RXD: 接收信息通道。我发送你接…

鸿蒙轻内核M核源码分析系列九 互斥锁Mutex

多任务环境下会存在多个任务访问同一公共资源的场景&#xff0c;而有些公共资源是非共享的临界资源&#xff0c;只能被独占使用。鸿蒙轻内核使用互斥锁来避免这种冲突&#xff0c;互斥锁是一种特殊的二值性信号量&#xff0c;用于实现对临界资源的独占式处理。另外&#xff0c;…

问题:律师会见委托人的方式包括团体会见和( )。 #职场发展#笔记#学习方法

问题&#xff1a;律师会见委托人的方式包括团体会见和&#xff08; &#xff09;。 参考答案如图所示

Linux常见故障处理之df命令卡住不输出

一、背景说明 朋友咨询Linux系统下输入df -h命令后没有任何输出结果&#xff0c;博主的第一反应是/根分区磁盘空间满了&#xff0c;朋友说cd等其他命令可以执行。博主又猜测可能是有人误定义了命令别名&#xff0c;进一步确认命令卡住在等待输出页面。事后博主想起来可能是共享…

CAN总线学习笔记-CAN帧结构

数据帧 数据帧&#xff1a;发送设备主动发送数据&#xff08;广播式&#xff09; 标准格式的11ID不够用了&#xff0c;由此产生了扩展格式 SOF&#xff1a;帧起始&#xff0c;表示后面一段波形为传输的数据位 ID&#xff1a;标识符&#xff0c;区分功能&#xff0c;同时决定优…

手机直连SpaceX星链,一场“酱油比鸡贵”的营销游戏

手机能支持卫星通话&#xff0c;在今天已经不算什么新闻。但手机直连卫星&#xff0c;近期确实引起了不少消费者的好奇。 最近有新闻爆出&#xff0c;马斯克的SpaceX利用运营商T-Mobile的网络&#xff0c;首次完成了通过星链&#xff08;Starlink&#xff09;卫星发送短信、视频…

Java——break、continue和return

一、break break语句用于立即终止最内层的循环或switch语句。它是一种控制流语句&#xff0c;能够在满足特定条件时跳出循环或结束switch块的执行。 1、在循环中使用 1&#xff09;一般的 break break语句可以用于for、while和do-while循环中。当在循环中遇到break语句时&a…

IP质量不够好,可以使用高质量的代理IP吗?

在当今互联网时代&#xff0c;IP代理是一个不可或缺的工具&#xff0c;但许多人可能对它的原理和应用感到困惑。IP代理涉及IP地址的使用和切换&#xff0c;旨在提供更好的隐私保护和访问控制。本文将介绍IP代理的工作原理以及为什么选择高质量的代理IP。 一、IP代理的基本原理…

LeetCode LRU缓存

题目描述 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类&#xff1a; LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存int get(int key) 如果关键字 key 存在于缓存中&#xff0c;则返回关键字的值&#xff0c;…

CarSim车辆运动轨迹绘制

CarSim车辆运动轨迹绘制 CarSim中与车辆位置有关的信息分别为Xo和Yo 输出到Simulink中 导入到工作空间中保存&#xff0c;low_carsim_path.mat &#xff0c;绘制结果曲线&#xff0c;low_carsim_path_comp.m data csvread(low_two_path.csv,1,0); low_two_path_x data(:,1)…

电商数据驱动的决策智慧:深度解析数据采集与应用||电商API接口接入与应用

引言 在数字化时代&#xff0c;数据已成为电商企业最宝贵的资产之一。通过有效的数据采集&#xff0c;企业能够洞察市场动态、理解消费者需求、优化运营策略&#xff0c;从而在激烈的市场竞争中脱颖而出。本文将深入探讨电商数据采集的重要性、常用方法以及应用实践。 一、电商…

教程 | Navicat 17 管理连接新方法

Navicat 17 提供了比以往更多的连接数据库实例的方式。除了传统的连接字符串方式以外&#xff0c;Navicat 17 还支持 URI 连接&#xff0c;无论身在何处&#xff0c;都可以轻松地通过 URI 访问对象。另外&#xff0c;还有一个新的管理连接功能&#xff0c;即允许你通过一个以用…

在github上创建(上传、关联)自已的项目

目录 创建一个github项目并进行开发。 1.github创建空项目 2. git clone 项目 3. 将项目关联 创建一个github项目并进行开发。 1.github创建空项目 右边的New 然后按步创建就行 2. git clone 项目 复制这个连接 然后在终端&#xff1a;git clone [刚才复制的连接] 3. 将…

【代码随想录】【算法训练营】【第27天】 [39]组合总和 [40] 组合总和II [131]分割回文串

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 LeetCode。 day26&#xff0c; 休息的周末~ day 27&#xff0c;周一&#xff0c;库存没了&#xff0c;哭死~ 题目详情 [39] 组合总和 题目描述 39 组合总和 解题思路 前提&#xff1a;组合的子集问题&…

[matlab]折线图之多条折线如何绘制实心圆作为标记点

使用MarkerFaceColor是标记点填充的颜色&#xff0c;b&#xff0c;表示blue&#xff0c;蓝色 plot(x, a, d--, MarkerFaceColor, b); % 绘制仿真结果的曲线如果一张图多条曲线那么每条曲线需要单独调用一次plot&#xff0c;每个plot间用hold on 连接 plot(x, a, d--, MarkerF…