因为这个项目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-input
v-model="queryProcessParams.name"
placeholder="请输入名称"
clearable
size="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-button
size="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>
<pagination
v-show="processTotal > 0"
:total="processTotal"
v-model:page="queryProcessParams.pageNum"
v-model:limit="queryProcessParams.pageSize"
@pagination="queryDefinition"
/>
</a-modal>
<!-- 委派 转办 选择人员 -->
<a-modal
title="选择委派或转办人员" 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、主要界面如下：
