因为这个项目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>