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

       这个部分主要讲所有任务的功能

1、主要列表界面如下：

<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" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button><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><a-tag color="blue" v-if="column.key === 'finishTime' && record.finishTime == null" >进行中</a-tag><a-tag color="green" v-if="column.key === 'finishTime' &&  record.finishTime != null">已完成</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><!-- 发起流程 --><a-modal @cancel="open = false" :title="title" v-model:open="open" width="60%" append-to-body><el-form :model="queryProcessParams" ref="queryProcessForm" :inline="true" v-show="showSearch" label-width="68px"><el-form-item label="名称" prop="name"><el-inputv-model="queryProcessParams.name"placeholder="请输入名称"clearablesize="small"@keyup.enter.native="handleProcessQuery"/></el-form-item><el-form-item><el-button type="primary" icon="Search" size="small" @click="handleProcessQuery">搜索</el-button><el-button icon="Refresh" size="small" @click="resetProcessQuery">重置</el-button></el-form-item></el-form><el-table v-loading="processLoading" fit :data="definitionList" border ><el-table-column label="流程名称" align="center" prop="name" /><el-table-column label="流程版本" align="center"><template #default="scope"><el-tag size="large" >V{{ scope.row.version }}</el-tag></template></el-table-column><el-table-column label="流程分类" align="center" prop="category" /><el-table-column label="表单名称" align="center" prop="formName" /><el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width"><template #default="scope"><el-buttonsize="small"type="text"icon="el-icon-edit-outline"v-if="(scope.row.formId != null && (scope.row.appType == 'OA' || scope.row.appType == 'ONLINE'))"@click="handleStartProcess(scope.row)">发起流程</el-button></template></el-table-column></el-table><paginationv-show="processTotal > 0":total="processTotal"v-model:page="queryProcessParams.pageNum"v-model:limit="queryProcessParams.pageSize"@pagination="queryDefinition"/></a-modal><!-- 委派 转办 选择人员 --><a-modaltitle="选择委派或转办人员" width="900px"  :maskClosable="false":confirmLoading="confirmLoading"v-model:open="delegateassign":footer="null"@cancel="closeNode">   <a-form  v-if="delegateassign"><a-form-item class="ant-form-item-bottom" :label-col="labelCol" :wrapper-col="wrapperCol"  label="请选择委派或转办人员" v-show="true"><a-checkbox-group @change="spryType" v-model="spryTypes" ><!-- 1用户 5 部门负责人 4发起人的部门负责人--><a-checkbox value="1"> 直接选择人员 </a-checkbox><a-checkbox value="5"> 部门负责人 </a-checkbox><a-checkbox value="4">发起人的部门负责人<a-tooltip placement="topLeft" title="自动获取发起人所在部门的负责人，即其上级领导。（如果其本身就是部门负责人，则指向发起人自己。）"><a-icon type="exclamation-circle" /></a-tooltip></a-checkbox></a-checkbox-group></a-form-item><!--            1用户  4发起人的部门负责人--><a-form-item class="ant-form-item-bottom" :label-col="labelCol" :wrapper-col="wrapperCol" label="选择人员" v-if="spryTypes.indexOf('1')>-1" ><!--  通过部门选择用户控件 --><j-select-user-by-dept v-model="spry.userIds" :multi="false"></j-select-user-by-dept></a-form-item><a-form-item class="ant-form-item-bottom" :label-col="labelCol" :wrapper-col="wrapperCol" label="选择部门负责人" v-if="spryTypes.indexOf('5')>-1" ><j-select-dept v-model="spry.departmentManageIds" :multi="false"></j-select-dept></a-form-item><!--btn--><a-form-item class="a-form-item-submit" :wrapper-col="{ span: 12, offset: 10 }"><a-button @click="sprySubmit" type="primary" html-type="submit" :disabled="userNode.type==0||userNode.type==2||confirmLoading">提交</a-button><a-button @click="closeNode" style="margin-left: 50px">关闭</a-button></a-form-item></a-form></a-modal>  </div>
</template><script lang="ts" name="myProcess" setup>import { ref, reactive } from 'vue';import { useRouter, useRoute } from 'vue-router';import 'element-plus/dist/index.css'import 'element-plus/theme-chalk/display.css'import { Search, Refresh } from '@element-plus/icons-vue'import Pagination  from '/@/components/Pagination/index.vue'import { BasicTable, useTable, TableAction } from '/@/components/Table';import { useListPage } from '/@/hooks/system/useListPage';import { columns, superQuerySchema } from './AllProcess.data';import { getExportUrl } from './AllProcess.api'import { allProcessList, delDeployment, stopProcess } from "@/views/flowable/api/process"import { delegateTask,assignTask } from "@/views/flowable/api/todo";  import { listDefinition } from "@/views/flowable/api/definition";import { downloadFile } from '/@/utils/common/renderUtils';import { useUserStore } from '/@/store/modules/user';import { useMessage } from '/@/hooks/web/useMessage';import JSelectUserByDept from '/@/components/Form/src/jeecg/components/JSelectUserByDept.vue';import JSelectDept from '/@/components/Form/src/jeecg/components/JSelectDept.vue';const formRef = ref();const queryParam = reactive<any>({});const toggleSearchStatus = ref<boolean>(false);const registerModal = ref();const userStore = useUserStore();const { createMessage, createConfirm } = useMessage();// 获取路由器对象 href跳转用到const router = useRouter();const route = useRoute();//注册table数据const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({tableProps: {title: 'AllProcess',api: allProcessList,columns,canResize:false,useSearchForm: false,actionColumn: {width: 120,fixed: 'right',},beforeFetch: (params) => {return Object.assign(params, queryParam);},},exportConfig: {name: "myProcess",url: getExportUrl,params: queryParam,},});const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;const labelCol = reactive({xs:24,sm:4,xl:6,xxl:4});const wrapperCol = reactive({xs: 24,sm: 20,});// 高级查询配置const superQueryConfig = reactive(superQuerySchema);//新建流程相关参数const processTotal = ref(0)const processLoading = ref(true)const title = ref('')const open = ref(false)const definitionList = ref<any>([])const queryProcessForm = ref(null)// 显示搜索条件const showSearch = ref(true)//流程查询参数const queryProcessParams = reactive<any> ({pageNum: 1,pageSize: 10,name: null,category: null,key: null,tenantId: null,deployTime: null,derivedFrom: null,derivedFromRoot: null,parentDeploymentId: null,engineVersion: null})//委派与转办选择用户界面const delegateassign = ref(false)const confirmLoading = ref(false)const current = ref(0)const userNode = ref<any>({})const spryTypes = ref<any>([])const spry = reactive({//选中的用户userIds: '',departmentManageIds: '',chooseSponsor: false,chooseDepHeader: false,})//传入处理委派或转办参数const assignee  = ref('');const taskId = ref('');const dataId = ref('');const type = ref('');const category = ref('');/*** 高级查询事件*/function handleSuperQuery(params) {Object.keys(params).map((k) => {queryParam[k] = params[k];});searchQuery();}/*** 新增事件*/function handleAdd() {open.value = true;title.value = "发起流程";queryDefinition();}/** 发起流程申请 */const handleStartProcess = (row) => {if(row.appType == 'OA') {/**  发起oa流程申请 */router.push({ path: '/flowable/task/record/index',query: {deployId: row.deploymentId,procDefId:row.id,category: row.category,finished: true}})}else if(row.appType == 'ONLINE'){//查询对于online表单数据进行选择流程提交申请router.push({ path: '/flowable/model/onlinetablelist',query: {deployId: row.deploymentId,procDefId:row.id,onlineId: row.formId,category: row.category,finished: true}})}  else {}}/** 搜索按钮操作 */function handleProcessQuery() {queryProcessParams.pageNum = 1;queryDefinition();}/** 重置按钮操作 */function resetProcessQuery() {queryProcessForm.value.resetFields();handleProcessQuery();}function queryDefinition() {processLoading.value = true;listDefinition(queryProcessParams).then(response => {console.log("listDefinition response",response)definitionList.value = response.result.records;processTotal.value = response.result.total;processLoading.value = false;});}/*** 详情*/function handleDetail(record: Recordable) {console.log("handleDetail record",record)router.push({ path: '/flowable/task/record/index',query: {procInsId: record.procInsId,deployId: record.deployId,taskId: record.taskId,businessKey: record.businessKey,category: record.category,appType: record.appType,finished: false}})}function spryType(types){spryTypes.value = types;/*  1用户 4发起人的部门负责人 5部门负责人*/if (spryTypes.value.indexOf('1')==-1) spry.userIds = '';if (spryTypes.value.indexOf('5')==-1) spry.departmentManageIds = '';//是否选中发起人的部门领导spry.chooseDepHeader = spryTypes.value.indexOf('4')>-1 ;console.log("spry",spry)}const sprySubmit = () => {if (spryTypes.value.length==0){createMessage.error("必须选择委托或转办人员！");return;}if (spry.userIds == ''){createMessage.error("必须选择委托或转办人员！");return;}delegateassign.value = false;      assignee.value = spry.userIds;console.log("assign=",assign.value);if(type.value == "1") { //委派handleDelegate();}else if(type.value == "2") { //转办handleAssign();}else {createMessage.error("不认识的类型，未知的错误！");}}//弹出选择委派或转办人员界面selType: 1-委派 2-转办function SelectUser(record: Recordable,selType: string){console.log("SelectUser selType",selType);taskId.value = record.taskId;dataId.value = record.businessKey;type.value = selType;category.value = record.category;delegateassign.value = true ;}//委派流程function handleDelegate(record: Recordable) {const params = {taskId: taskId.value,assignee: assignee.value,dataId: dataId.value,category: category.value,}delegateTask(params).then( res => {createMessage.success(res.message);reload();});}//转办流程function handleAssign(record: Recordable) {const params = {taskId: taskId.value,assignee: assignee.value,dataId: dataId.value,category: category.value,}assignTask(params).then( res => {createMessage.success(res.message);reload();});}  /*** 取消流程申请*/function handleCancel(record: Recordable) {const params = {instanceId: record.procInsId}stopProcess(params).then( res => {createMessage.success(res.message);reload();});}/*** 删除事件*/async function handleDelete(record) {//await deleteOne({ id: record.id }, handleSuccess);const ids = record.procInsId;const dataid = record.businessKey;delDeployment(ids,dataid).then((res) => {if (res.success) {createMessage.success("删除成功");reload();} else {createMessage.warning(res.message)}})}/*** 批量删除事件*/async function batchHandleDelete() {await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);}/*** 成功回调*/function handleSuccess() {(selectedRowKeys.value = []) && reload();}/*** 下拉操作栏*/function getDropDownAction(record) {return [{label: '详情',onClick: handleDetail.bind(null, record),},{label: '委派',onClick: SelectUser.bind(null,record, '1'),},{label: '转办',onClick: SelectUser.bind(null,record, '2'),},{label: '取消申请',onClick: handleCancel.bind(null, record),}, {label: '删除',popConfirm: {title: '是否确认删除',confirm: handleDelete.bind(null, record),placement: 'topLeft',}}]}/*** 查询*/function searchQuery() {reload();}/*** 重置*/function searchReset() {formRef.value.resetFields();selectedRowKeys.value = [];//刷新数据reload();}</script><style lang="less" scoped>.ant-form-item-bottom {margin-bottom: 60px; /* 调整表单项之间的间距 */}.a-form-item-submit { //调整提交按钮与底部的距离position: relative ;bottom: 30px; /* 距离底部的高度 */}.jeecg-basic-table-form-container {padding: 0;.table-page-search-submitButtons {display: block;margin-bottom: 24px;white-space: nowrap;}.query-group-cust{min-width: 100px !important;}.query-group-split-cust{width: 30px;display: inline-block;text-align: center}}
</style>

上面包含了委派与转办的界面与方法

2、主要界面如下：