本文主要是介绍基于jeecgboot-vue3的Flowable流程-已办任务（二），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
因为这个项目license问题无法开源，更多技术支持与服务请加入我的知识星球。
接上一节，这个部分主要讲功能代码
1、注册列表数据显示
//注册table数据const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({tableProps: {title: 'myProcess',api: finishedListNew,columns,canResize:false,useSearchForm: false,actionColumn: {width: 120,fixed: 'right',},beforeFetch: (params) => {return Object.assign(params, queryParam);},},2、流程流转记录
/** 流程流转记录 */function handleFlowRecord(record: Recordable) {router.push({ path: '/flowable/task/record/index',query: {procInsId: record.procInsId,deployId: record.deployId,taskId: record.taskId,businessKey: record.businessKey,appType: record.appType,finished: false}})}3、撤回功能
/** 撤回任务 */function handleRevoke(record: Recordable) {const params = {instanceId: record.procInsId,dataId: record.businessKey}revokeProcess(params).then( res => {createMessage.success(res.message);reload();});}4、收回功能
/** 收回任务 */function handleRecall(record: Recordable) {const params = {instanceId: record.procInsId,dataId: record.businessKey}recallProcess(params).then( res => {createMessage.success(res.message);reload();});}5、主要的界面
<template><div class="p-2"><!--查询区域--><div class="jeecg-basic-table-form-container"><a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol"><a-row :gutter="24"><a-col :lg="6"><a-form-item name="procDefName"><template #label><span title="流程名称">流程名称</span></template><a-input placeholder="请输入流程名称" v-model:value="queryParam.procDefName"></a-input></a-form-item></a-col><a-col :lg="6"><a-form-item name="createTime"><template #label><span title="接收日期">接收日期</span></template><a-date-picker valueFormat="YYYY-MM-DD" placeholder="请选择接收日期" v-model:value="queryParam.createTime" /></a-form-item></a-col><template v-if="toggleSearchStatus"><a-col :lg="6"><a-form-item name="createBy"><template #label><span title="创建人员">创建人员</span></template><a-input placeholder="请输入创建人员" v-model:value="queryParam.createBy"></a-input></a-form-item></a-col></template><a-col :xl="6" :lg="7" :md="8" :sm="24"><span style="float: left; overflow: hidden" class="table-page-search-submitButtons"><a-col :lg="6"><a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button><a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button><a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px">{{ toggleSearchStatus ? '收起' : '展开' }}<Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" /></a></a-col></span></a-col></a-row></a-form></div><!--引用表格--><BasicTable @register="registerTable" :rowSelection="rowSelection"><!--插槽:table标题--><template #tableTitle><a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button><a-dropdown v-if="selectedRowKeys.length > 0"><template #overlay><a-menu><a-menu-item key="1" @click="batchHandleDelete"><Icon icon="ant-design:delete-outlined"></Icon>删除</a-menu-item></a-menu></template><a-button>批量操作<Icon icon="mdi:chevron-down"></Icon></a-button></a-dropdown><!-- 高级查询 --><super-query :config="superQueryConfig" @search="handleSuperQuery" /></template><!--操作栏--><template #action="{ record }"><TableAction :dropDownActions="getDropDownAction(record)"/></template><template #bodyCell="{ column, record, index, text }"><label v-if="column.key === 'rowIndex'">{{index+1}}</label><a-tag color="blue" v-if="column.key === 'procDefVersion'">V{{ record.procDefVersion }}</a-tag><label v-if="column.key === 'assigneeName' && record.assigneeName">{{record.assigneeName}} <el-tag type="info" size="small">{{record.deptName}}</el-tag></label><label v-if="column.key === 'assigneeName' && record.candidate">{{record.candidate}}</label></template></BasicTable></div>
</template>这篇关于基于jeecgboot-vue3的Flowable流程-已办任务（二）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
