wangli/workflow-engine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/REQ-5965' into dev

Browse Source
This commit is contained in:
wangli 2025-11-19 10:29:23 +08:00
commit 624f1e5b92
9 changed files with 801 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
workflow-engine-common/src/main/java/cn/axzo/workflow/common/model/request/bpmn/process/BpmnProcessInstanceCreateWithFormDTO.java
View File

@ -1,6 +1,5 @@
package cn.axzo.workflow.common.model.request.bpmn.process;
import cn.axzo.workflow.common.model.dto.UploadFieldDTO;
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
@ -20,15 +19,7 @@ public class BpmnProcessInstanceCreateWithFormDTO {
/**
* 审批使用了表单，请一定注意传参
* <p>
* 图片类型和附件类型组件：请用 @see {@link UploadFieldDTO} 对象集合传入
* <pre>
* // form_image 为表单项的 key， value 为 UploadFileDTO 对象集合，如果前端使用了组件，一般建议回传所有属性；特殊情况下可以只传 fileUrl
* "form_image": [{
* "fileName": "",
* "fileUrl": "http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960",
* "fileKey": 123
* }]
* </pre>
* 请先查看{@see https://alidocs.dingtalk.com/i/nodes/ZgpG2NdyVXKy17o6fQ5nKGvMWMwvDqPk}文档，根据不同类型传不同的 value 对象
*/
@ApiModelProperty(value = "通过表单创建流程时传入的初始表单数据")
private Map<String, Object> startFormVariables;

12
workflow-engine-server/pom.xml
View File

@ -158,6 +158,18 @@
<groupId>cn.axzo.infra</groupId>
<artifactId>adapter</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>net.sourceforge.nekohtml</groupId>
<artifactId>nekohtml</artifactId>
</dependency>
</dependencies>
<build>

21
workflow-engine-server/src/main/java/cn/axzo/workflow/server/common/interceptor/RequestHeaderContextInterceptor.java
View File

@ -22,10 +22,10 @@ import static cn.axzo.workflow.client.config.WorkflowRequestInterceptor.HEADER_A
import static cn.axzo.workflow.client.config.WorkflowRequestInterceptor.HEADER_HTTP_CLIENT;
import static cn.axzo.workflow.client.config.WorkflowRequestInterceptor.HEADER_HTTP_CLIENT_VALUE;
import static cn.axzo.workflow.client.config.WorkflowRequestInterceptor.HEADER_SERVER_NAME;
import static cn.axzo.workflow.common.constant.BpmnConstants.FLOW_SERVER_VERSION_130;
import static cn.axzo.workflow.common.constant.StarterConstants.ENABLE_MANAGEABLE;
import static cn.axzo.workflow.common.code.OtherRespCode.CLIENT_VERSION_SUPPORT;
import static cn.axzo.workflow.common.code.OtherRespCode.MICRO_SERVER_NEED_REBUILD;
import static cn.axzo.workflow.common.constant.BpmnConstants.FLOW_SERVER_VERSION_130;
import static cn.axzo.workflow.common.constant.StarterConstants.ENABLE_MANAGEABLE;
/**
* 客户端与服务端的版本比较
@ -47,11 +47,11 @@ public class RequestHeaderContextInterceptor implements HandlerInterceptor {
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
if (Objects.equals(HEADER_HTTP_CLIENT_VALUE, request.getHeader(HEADER_HTTP_CLIENT))) {
String headerClientVersion = request.getHeader(HEADER_API_VERSION)
.replaceAll("-SNAPSHOT", "")
.replaceAll("-RELEASE", "");
.replaceAll("-SNAPSHOT", "")
.replaceAll("-RELEASE", "");
serviceVersion = serviceVersion
.replaceAll("-SNAPSHOT", "")
.replaceAll("-RELEASE", "");
.replaceAll("-SNAPSHOT", "")
.replaceAll("-RELEASE", "");
DefaultArtifactVersion minimumSupportedVersion = new DefaultArtifactVersion(FLOW_SERVER_VERSION_130);
DefaultArtifactVersion clientVersion = new DefaultArtifactVersion(headerClientVersion);
DefaultArtifactVersion serverVersion = new DefaultArtifactVersion(serviceVersion);
@ -67,8 +67,11 @@ public class RequestHeaderContextInterceptor implements HandlerInterceptor {
}
// 仅 feignApi 才需要检查版本
if (!request.getRequestURI().contains("/web/") && !request.getRequestURI().contains("checkDeath")
&& !request.getRequestURI().contains("/error")
&& !StringUtils.hasText(request.getHeader(HEADER_HTTP_CLIENT))) {
&& !request.getRequestURI().contains(".ico")
&& !request.getRequestURI().contains(".json")
&& !request.getRequestURI().contains(".html")
&& !request.getRequestURI().contains("/error")
&& !StringUtils.hasText(request.getHeader(HEADER_HTTP_CLIENT))) {
String serverName = request.getHeader(HEADER_SERVER_NAME);
printHeader(request);
log.error(MICRO_SERVER_NEED_REBUILD.getMessage(), serverName);
@ -104,7 +107,7 @@ public class RequestHeaderContextInterceptor implements HandlerInterceptor {
}
ExtAxProperty property = extAxProperty.get();
if (Objects.equals(property.getValue(), clientVersion.toString())
&& Objects.equals(property.getManageable().toString(), manageableStatus)) {
&& Objects.equals(property.getManageable().toString(), manageableStatus)) {
return;
}
property.setName(requestApplicationName);

178
workflow-engine-server/src/main/java/cn/axzo/workflow/server/controller/web/DangerOperationController.java Normal file
View File

@ -0,0 +1,178 @@
package cn.axzo.workflow.server.controller.web;
import cn.axzo.infra.xxl220to250.XxlJobLogger;
import cn.axzo.workflow.common.model.request.bpmn.process.BpmnProcessInstanceAbortDTO;
import cn.axzo.workflow.common.model.request.bpmn.process.BpmnProcessInstanceCancelDTO;
import cn.axzo.workflow.common.model.request.bpmn.task.BpmnTaskAuditDTO;
import cn.axzo.workflow.common.model.request.bpmn.task.BpmnTaskDelegateAssigner;
import cn.axzo.workflow.core.repository.entity.ExtAxProcessLog;
import cn.axzo.workflow.core.service.BpmnProcessTaskService;
import cn.axzo.workflow.core.service.ExtAxProcessLogService;
import cn.axzo.workflow.server.controller.web.bpmn.BpmnProcessInstanceController;
import cn.axzo.workflow.server.controller.web.bpmn.BpmnProcessJobController;
import cn.axzo.workflow.server.controller.web.bpmn.BpmnProcessTaskController;
import cn.axzo.workflow.server.xxljob.DangerSuperOperationJobHandler;
import lombok.extern.slf4j.Slf4j;
import org.flowable.engine.RuntimeService;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.util.CollectionUtils;
import org.springframework.util.StringUtils;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import javax.annotation.Resource;
import java.util.List;
import static cn.axzo.workflow.common.constant.BpmnConstants.INTERNAL_INITIATOR;
import static cn.axzo.workflow.common.enums.BpmnProcessInstanceResultEnum.PROCESSING;
/**
* 用于临时处理审批的一些问题
*
* @author wangli
* @since 2025-11-18 15:37
*/
@Slf4j
@Controller
public class DangerOperationController {
@Resource
private RuntimeService runtimeService;
@Resource
private BpmnProcessInstanceController instanceController;
@Resource
private BpmnProcessTaskController taskController;
@Resource
private BpmnProcessTaskService taskService;
@Resource
private BpmnProcessJobController jobController;
@Resource
private ExtAxProcessLogService processLogService;
// 显示表单页面
@GetMapping("/web/process/form")
public String showProcessForm(Model model) {
// 可以在这里添加需要传递到页面的数据
return "form"; // 对应templates目录下的form.html
}
// 处理表单提交
@PostMapping(value = "/web/process/handle", consumes = MediaType.APPLICATION_JSON_UTF8_VALUE)
public String handleProcess(@Validated @RequestBody DangerSuperOperationJobHandler.DangerOperationJobParam jobParam, Model model) {
// 处理表单提交的逻辑
log.info("操作类型: {}", jobParam.getOperationType());
log.info("流程实例编号: {} ", jobParam.getProcessInstanceId());
log.info("自然人ID: {}", jobParam.getPersonId());
log.info("意见: {}", jobParam.getComment());
// 这里可以添加实际的业务逻辑，如调用流程引擎API等
switch (jobParam.getOperationType()) {
case CANCEL:
cancelProcessInstance(jobParam);
break;
case APPROVE:
approveTask(jobParam);
break;
case REJECT:
rejectTask(jobParam);
break;
case ABORT:
abortProcessInstance(jobParam);
break;
case RESUMER_DEADLINE_JOB:
resumerDeadlineJob(jobParam);
break;
default:
break;
}
// 可以将处理结果添加到模型中返回给页面
model.addAttribute("message", "操作已成功提交");
return "form"; // 处理完成后返回表单页面
}
private void resumerDeadlineJob(DangerSuperOperationJobHandler.DangerOperationJobParam jobParam) {
jobController.executeDeadLetterJobAction("", jobParam.getProcessInstanceId());
}
private void abortProcessInstance(DangerSuperOperationJobHandler.DangerOperationJobParam jobParam) {
instanceController.abortProcessInstance(BpmnProcessInstanceAbortDTO.builder()
.processInstanceId(jobParam.getProcessInstanceId())
.advice(jobParam.getComment())
.build());
}
private void rejectTask(DangerSuperOperationJobHandler.DangerOperationJobParam jobParam) {
String personId = jobParam.getPersonId();
if (!StringUtils.hasText(personId)) {
log.warn("缺少 personId 参数，无法驳回任务");
XxlJobLogger.log("缺少 personId 参数，无法驳回任务");
}
String taskId = taskService.findTaskIdByInstanceIdAndPersonId(jobParam.getProcessInstanceId(), jobParam.getPersonId());
ExtAxProcessLog query = new ExtAxProcessLog();
query.setProcessInstanceId(jobParam.getProcessInstanceId());
query.setTaskId(taskId);
query.setStatus(PROCESSING.getStatus());
List<ExtAxProcessLog> logs = processLogService.genericQuery(query);
if (CollectionUtils.isEmpty(logs)) {
log.warn("未找到可操作的任务日志，无法驳回任务，processInstanceId={}, personId={}", jobParam.getProcessInstanceId(), jobParam.getPersonId());
XxlJobLogger.log("未找到可操作的任务日志，无法驳回任务，processInstanceId={}, personId={}", jobParam.getProcessInstanceId(), jobParam.getPersonId());
return;
}
taskController.rejectTask(BpmnTaskAuditDTO.builder()
.processInstanceId(jobParam.getProcessInstanceId())
.advice(jobParam.getComment())
.approver(logs.get(0).getAssigneeFull().get(0))
.async(false)
.build());
}
private void approveTask(DangerSuperOperationJobHandler.DangerOperationJobParam jobParam) {
String personId = jobParam.getPersonId();
if (!StringUtils.hasText(personId)) {
log.warn("缺少 personId 参数，无法驳回任务");
XxlJobLogger.log("缺少 personId 参数，无法驳回任务");
}
String taskId = taskService.findTaskIdByInstanceIdAndPersonId(jobParam.getProcessInstanceId(), jobParam.getPersonId());
ExtAxProcessLog query = new ExtAxProcessLog();
query.setProcessInstanceId(jobParam.getProcessInstanceId());
query.setTaskId(taskId);
query.setStatus(PROCESSING.getStatus());
List<ExtAxProcessLog> logs = processLogService.genericQuery(query);
if (CollectionUtils.isEmpty(logs)) {
log.warn("未找到可操作的任务日志，无法驳回任务，processInstanceId={}, personId={}", jobParam.getProcessInstanceId(), jobParam.getPersonId());
XxlJobLogger.log("未找到可操作的任务日志，无法驳回任务，processInstanceId={}, personId={}", jobParam.getProcessInstanceId(), jobParam.getPersonId());
return;
}
taskController.approveTask(BpmnTaskAuditDTO.builder()
.processInstanceId(jobParam.getProcessInstanceId())
.advice(jobParam.getComment())
.approver(logs.get(0).getAssigneeFull().get(0))
.async(false)
.build());
}
private void cancelProcessInstance(DangerSuperOperationJobHandler.DangerOperationJobParam jobParam) {
String processInstanceId = jobParam.getProcessInstanceId();
BpmnTaskDelegateAssigner assigner = BpmnTaskDelegateAssigner.toObjectCompatible(runtimeService.getVariable(processInstanceId, INTERNAL_INITIATOR));
BpmnProcessInstanceCancelDTO cancelDTO = new BpmnProcessInstanceCancelDTO();
cancelDTO.setProcessInstanceId(processInstanceId);
cancelDTO.setInitiator(assigner);
cancelDTO.setReason(jobParam.getComment());
cancelDTO.setAsync(false);
instanceController.cancelProcessInstance(cancelDTO);
log.info("撤回操作完成");
XxlJobLogger.log("撤回操作完成");
}
}

190
workflow-engine-server/src/main/java/cn/axzo/workflow/server/xxljob/DangerSuperOperationJobHandler.java Normal file
View File

@ -0,0 +1,190 @@
package cn.axzo.workflow.server.xxljob;
import cn.axzo.infra.xxl220to250.XxlJobLogger;
import cn.axzo.workflow.common.model.request.bpmn.process.BpmnProcessInstanceAbortDTO;
import cn.axzo.workflow.common.model.request.bpmn.process.BpmnProcessInstanceCancelDTO;
import cn.axzo.workflow.common.model.request.bpmn.task.BpmnTaskAuditDTO;
import cn.axzo.workflow.common.model.request.bpmn.task.BpmnTaskDelegateAssigner;
import cn.axzo.workflow.core.repository.entity.ExtAxProcessLog;
import cn.axzo.workflow.core.service.BpmnProcessTaskService;
import cn.axzo.workflow.core.service.ExtAxProcessLogService;
import cn.axzo.workflow.server.controller.web.bpmn.BpmnProcessInstanceController;
import cn.axzo.workflow.server.controller.web.bpmn.BpmnProcessJobController;
import cn.axzo.workflow.server.controller.web.bpmn.BpmnProcessTaskController;
import com.alibaba.fastjson.JSON;
import com.xxl.job.core.context.XxlJobHelper;
import com.xxl.job.core.handler.IJobHandler;
import com.xxl.job.core.handler.annotation.XxlJob;
import lombok.Data;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.flowable.engine.RuntimeService;
import org.springframework.stereotype.Component;
import org.springframework.util.CollectionUtils;
import org.springframework.util.StringUtils;
import javax.annotation.Resource;
import javax.validation.constraints.NotBlank;
import javax.validation.constraints.NotNull;
import java.io.Serializable;
import java.util.List;
import static cn.axzo.workflow.common.constant.BpmnConstants.INTERNAL_INITIATOR;
import static cn.axzo.workflow.common.enums.BpmnProcessInstanceResultEnum.PROCESSING;
/**
* 危险操作，操作审批中的行为
*
* @author wangli
* @since 2025-11-18 14:08
*/
@Component
@RequiredArgsConstructor
@Slf4j
public class DangerSuperOperationJobHandler extends IJobHandler {
@Resource
private RuntimeService runtimeService;
@Resource
private BpmnProcessInstanceController instanceController;
@Resource
private BpmnProcessTaskController taskController;
@Resource
private BpmnProcessTaskService taskService;
@Resource
private BpmnProcessJobController jobController;
@Resource
private ExtAxProcessLogService processLogService;
@Override
@XxlJob("DangerSuperOperationJobHandler")
public void execute() throws Exception {
String paramStr = XxlJobHelper.getJobParam();
log.info("#DangerSuperOperationJobHandler#param_({})", paramStr);
XxlJobLogger.log("#DangerSuperOperationJobHandler#param_({})", paramStr);
DangerOperationJobParam dangerOperationJobParam = JSON.parseObject(paramStr, DangerOperationJobParam.class);
String processInstanceId = dangerOperationJobParam.getProcessInstanceId();
if (!StringUtils.hasText(processInstanceId)) {
log.warn("缺少 processInstanceId 参数，无法撤回流程实例");
XxlJobLogger.log("缺少 processInstanceId 参数，无法撤回流程实例");
return;
}
switch (dangerOperationJobParam.getOperationType()) {
case CANCEL:
cancelProcessInstance(dangerOperationJobParam);
break;
case APPROVE:
approveTask(dangerOperationJobParam);
break;
case REJECT:
rejectTask(dangerOperationJobParam);
break;
case ABORT:
abortProcessInstance(dangerOperationJobParam);
break;
case RESUMER_DEADLINE_JOB:
resumerDeadlineJob(dangerOperationJobParam);
break;
default:
break;
}
}
private void resumerDeadlineJob(DangerOperationJobParam dangerOperationJobParam) {
jobController.executeDeadLetterJobAction("", dangerOperationJobParam.getProcessInstanceId());
}
private void abortProcessInstance(DangerOperationJobParam dangerOperationJobParam) {
instanceController.abortProcessInstance(BpmnProcessInstanceAbortDTO.builder()
.processInstanceId(dangerOperationJobParam.getProcessInstanceId())
.advice(dangerOperationJobParam.getComment())
.build());
}
private void rejectTask(DangerOperationJobParam dangerOperationJobParam) {
String personId = dangerOperationJobParam.getPersonId();
if (!StringUtils.hasText(personId)) {
log.warn("缺少 personId 参数，无法驳回任务");
XxlJobLogger.log("缺少 personId 参数，无法驳回任务");
}
String taskId = taskService.findTaskIdByInstanceIdAndPersonId(dangerOperationJobParam.getProcessInstanceId(), dangerOperationJobParam.getPersonId());
ExtAxProcessLog query = new ExtAxProcessLog();
query.setProcessInstanceId(dangerOperationJobParam.getProcessInstanceId());
query.setTaskId(taskId);
query.setStatus(PROCESSING.getStatus());
List<ExtAxProcessLog> logs = processLogService.genericQuery(query);
if (CollectionUtils.isEmpty(logs)) {
log.warn("未找到可操作的任务日志，无法驳回任务，processInstanceId={}, personId={}", dangerOperationJobParam.getProcessInstanceId(), dangerOperationJobParam.getPersonId());
XxlJobLogger.log("未找到可操作的任务日志，无法驳回任务，processInstanceId={}, personId={}", dangerOperationJobParam.getProcessInstanceId(), dangerOperationJobParam.getPersonId());
return;
}
taskController.rejectTask(BpmnTaskAuditDTO.builder()
.processInstanceId(dangerOperationJobParam.getProcessInstanceId())
.advice(dangerOperationJobParam.getComment())
.approver(logs.get(0).getAssigneeFull().get(0))
.async(false)
.build());
}
private void approveTask(DangerOperationJobParam dangerOperationJobParam) {
String personId = dangerOperationJobParam.getPersonId();
if (!StringUtils.hasText(personId)) {
log.warn("缺少 personId 参数，无法驳回任务");
XxlJobLogger.log("缺少 personId 参数，无法驳回任务");
}
String taskId = taskService.findTaskIdByInstanceIdAndPersonId(dangerOperationJobParam.getProcessInstanceId(), dangerOperationJobParam.getPersonId());
ExtAxProcessLog query = new ExtAxProcessLog();
query.setProcessInstanceId(dangerOperationJobParam.getProcessInstanceId());
query.setTaskId(taskId);
query.setStatus(PROCESSING.getStatus());
List<ExtAxProcessLog> logs = processLogService.genericQuery(query);
if (CollectionUtils.isEmpty(logs)) {
log.warn("未找到可操作的任务日志，无法驳回任务，processInstanceId={}, personId={}", dangerOperationJobParam.getProcessInstanceId(), dangerOperationJobParam.getPersonId());
XxlJobLogger.log("未找到可操作的任务日志，无法驳回任务，processInstanceId={}, personId={}", dangerOperationJobParam.getProcessInstanceId(), dangerOperationJobParam.getPersonId());
return;
}
taskController.approveTask(BpmnTaskAuditDTO.builder()
.processInstanceId(dangerOperationJobParam.getProcessInstanceId())
.advice(dangerOperationJobParam.getComment())
.approver(logs.get(0).getAssigneeFull().get(0))
.async(false)
.build());
}
private void cancelProcessInstance(DangerOperationJobParam dangerOperationJobParam) {
String processInstanceId = dangerOperationJobParam.getProcessInstanceId();
BpmnTaskDelegateAssigner assigner = BpmnTaskDelegateAssigner.toObjectCompatible(runtimeService.getVariable(processInstanceId, INTERNAL_INITIATOR));
BpmnProcessInstanceCancelDTO cancelDTO = new BpmnProcessInstanceCancelDTO();
cancelDTO.setProcessInstanceId(processInstanceId);
cancelDTO.setInitiator(assigner);
cancelDTO.setReason(dangerOperationJobParam.getComment());
cancelDTO.setAsync(false);
instanceController.cancelProcessInstance(cancelDTO);
log.info("撤回操作完成");
XxlJobLogger.log("撤回操作完成");
}
@Data
public static class DangerOperationJobParam implements Serializable {
@NotNull(message = "操作类型不能为空")
private OperationEnumType operationType;
@NotBlank(message = "流程实例ID不能为空")
private String processInstanceId;
private String personId;
private String comment;
}
public static enum OperationEnumType {
CANCEL, // 撤销任务
APPROVE, // 同意任务
REJECT, // 拒绝任务
ABORT, // 中止实例
RESUMER_DEADLINE_JOB, // 一般是因为二方计算人异常导致卡节点
}
}

7
workflow-engine-server/src/main/resources/application.yml
View File

@ -2,3 +2,10 @@ arthas:
app-name: ${spring.application.name}
agent-id: ${ARTHAS_AGENT_ID:${spring.profiles.active}-${spring.application.name}}
tunnel-server: ${ARTHAS_TUNNEL_SERVER:ws://localhost:7777/ws}
spring:
thymeleaf:
mode: LEGACYHTML5
cache: false
encoding: UTF-8
prefix: classpath:/templates/
suffix: .html

1
workflow-engine-server/src/main/resources/static/.well-known/appspecific/com.chrome.devtools.json Normal file
View File

@ -0,0 +1 @@
{}

BIN
workflow-engine-server/src/main/resources/static/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

400
workflow-engine-server/src/main/resources/templates/form.html Normal file
View File

@ -0,0 +1,400 @@
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流程操作表单</title>
<!-- 引入Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入Font Awesome -->
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 配置Tailwind自定义颜色和字体 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#6B7280',
success: '#00B42A',
danger: '#F53F3F',
warning: '#FF7D00',
light: '#F2F3F5',
dark: '#1D2129'
},
fontFamily: {
inter: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.form-input-focus {
@apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
}
.form-transition {
@apply transition-all duration-300 ease-in-out;
}
.card-shadow {
@apply shadow-lg hover:shadow-xl transition-shadow duration-300;
}
.form-hidden {
@apply hidden opacity-0 h-0;
}
.form-visible {
@apply opacity-100 h-auto;
}
.mask-fade {
@apply transition-opacity duration-300 ease-in-out;
}
}
</style>
</head>
<body class="bg-gray-50 font-inter min-h-screen flex flex-col">
<!-- 顶部导航 -->
<header class="bg-white shadow-sm">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<h1 class="text-xl font-bold text-primary flex items-center">
<i class="fa fa-cogs mr-2"></i>流程管理系统
</h1>
<div class="text-gray-600">
<i class="fa fa-user-circle-o mr-1"></i>管理员操作
</div>
</div>
</header>
<!-- 主要内容 -->
<main class="flex-grow container mx-auto px-4 py-8 md:py-12">
<div class="max-w-2xl mx-auto">
<!-- 表单卡片 -->
<div class="bg-white rounded-xl p-6 md:p-8 card-shadow">
<div class="mb-6">
<h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark mb-2">流程操作</h2>
<p class="text-secondary">请根据需要选择相应操作并填写表单信息</p>
</div>
<!-- 表单 -->
<form id="processForm" th:action="@{/web/process/handle}" method="post" class="space-y-6">
<!-- 操作类型选择 -->
<div class="form-group">
<label for="operationType" class="block text-sm font-medium text-gray-700 mb-1">
操作类型 <span class="text-danger">*</span>
</label>
<div class="relative">
<select id="operationType" name="operationType"
class="w-full px-4 py-2.5 rounded-lg border border-gray-300 bg-white form-input-focus form-transition appearance-none"
required>
<option value="" disabled selected>请选择操作类型</option>
<option value="CANCEL">撤回实例</option>
<option value="APPROVE">同意任务</option>
<option value="REJECT">拒绝任务</option>
<option value="ABORT">中止实例</option>
<option value="RESUMER_DEADLINE_JOB">恢复节点</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-500">
<i class="fa fa-chevron-down text-xs"></i>
</div>
</div>
</div>
<!-- 流程实例编号 -->
<div id="processInstanceIdGroup" class="form-group form-transition">
<label for="processInstanceId" class="block text-sm font-medium text-gray-700 mb-1">
流程实例编号 <span class="text-danger">*</span>
</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
<i class="fa fa-hashtag"></i>
</span>
<input type="text" id="processInstanceId" name="processInstanceId"
class="w-full pl-10 pr-4 py-2.5 rounded-lg border border-gray-300 form-input-focus form-transition"
placeholder="请输入流程实例编号" required
oninput="this.value = this.value.replace(/[^0-9]/g, '');"/>
</div>
<p class="mt-1 text-xs text-gray-500 hidden" id="processInstanceIdError">
<i class="fa fa-exclamation-circle text-danger mr-1"></i>流程实例编号为必填项
</p>
</div>
<!-- 自然人ID -->
<div id="personIdGroup" class="form-group form-transition form-hidden">
<label for="personId" class="block text-sm font-medium text-gray-700 mb-1">
自然人ID <span class="text-danger">*</span>
</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
<i class="fa fa-user"></i>
</span>
<input type="text" id="personId" name="personId"
class="w-full pl-10 pr-4 py-2.5 rounded-lg border border-gray-300 form-input-focus form-transition"
placeholder="请输入自然人ID"
oninput="this.value = this.value.replace(/[^0-9]/g, '');"/>
</div>
<p class="mt-1 text-xs text-gray-500 hidden" id="personIdError">
<i class="fa fa-exclamation-circle text-danger mr-1"></i>自然人ID为必填项
</p>
</div>
<!-- 意见 -->
<div id="commentGroup" class="form-group form-transition form-hidden">
<label for="comment" class="block text-sm font-medium text-gray-700 mb-1">
意见 <span id="commentRequired" class="text-danger hidden">*</span>
</label>
<div class="relative">
<span class="absolute top-3 left-3 text-gray-500">
<i class="fa fa-comment"></i>
</span>
<textarea id="comment" name="comment" rows="3"
class="w-full pl-10 pr-4 py-2.5 rounded-lg border border-gray-300 form-input-focus form-transition resize-none"
placeholder="请输入意见（选填）"></textarea>
</div>
<p class="mt-1 text-xs text-gray-500 hidden" id="commentError">
<i class="fa fa-exclamation-circle text-danger mr-1"></i>意见为必填项
</p>
</div>
<!-- 提交按钮 -->
<div class="pt-4 flex justify-end">
<button type="submit"
class="px-6 py-2.5 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] flex items-center">
<i class="fa fa-check mr-2"></i>提交
</button>
</div>
</form>
</div>
<!-- 操作说明 -->
<div class="mt-6 bg-blue-50 border border-blue-100 rounded-lg p-4">
<h3 class="font-medium text-primary flex items-center mb-2">
<i class="fa fa-info-circle mr-2"></i>操作说明
</h3>
<ul class="text-sm text-gray-600 space-y-1 list-disc list-inside">
<li>撤回实例：需要提供流程实例编号，可选择填写意见</li>
<li>同意/拒绝任务：需要提供流程实例编号和处理人ID</li>
<li>中止实例：需要提供流程实例编号和中止原因</li>
<li>恢复节点：仅需要提供流程实例编号</li>
</ul>
</div>
</div>
</main>
<!-- 页脚 -->
<footer class="bg-white border-t border-gray-200 py-4">
<div class="container mx-auto px-4 text-center text-sm text-gray-500">
© 2025 流程管理系统 - 版权所有
</div>
</footer>
<!-- 成功提交提示框 -->
<div id="successToast"
class="fixed top-4 right-4 bg-success text-white px-4 py-3 rounded-lg shadow-lg transform translate-x-full transition-transform duration-500 flex items-center z-50">
<i class="fa fa-check-circle mr-2"></i>
<span>操作提交成功！</span>
</div>
<!-- 提交遮罩层 -->
<div id="submitMask"
class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 mask-fade opacity-0 pointer-events-none">
<div class="bg-white rounded-lg p-8 max-w-md w-full flex flex-col items-center">
<div class="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin mb-4"></div>
<h3 class="text-lg font-medium text-dark mb-2">处理中</h3>
<p class="text-gray-500 text-center">请稍候，正在提交您的操作...</p>
</div>
</div>
<script>
// 获取DOM元素
const operationType = document.getElementById('operationType');
const processInstanceIdGroup = document.getElementById('processInstanceIdGroup');
const personIdGroup = document.getElementById('personIdGroup');
const commentGroup = document.getElementById('commentGroup');
const commentRequired = document.getElementById('commentRequired');
const personId = document.getElementById('personId');
const comment = document.getElementById('comment');
const processForm = document.getElementById('processForm');
const successToast = document.getElementById('successToast');
const submitMask = document.getElementById('submitMask'); // 遮罩层元素
// 错误提示元素
const processInstanceIdError = document.getElementById('processInstanceIdError');
const personIdError = document.getElementById('personIdError');
const commentError = document.getElementById('commentError');
// 清除所有元素的计时器，防止冲突
const elementTimeouts = new Map();
// 显示元素的动画
function showElement(element) {
if (elementTimeouts.has(element)) {
clearTimeout(elementTimeouts.get(element));
elementTimeouts.delete(element);
}
element.classList.remove('form-hidden');
setTimeout(() => {
element.classList.add('form-visible');
}, 10);
}
// 隐藏元素的动画
function hideElement(element) {
element.classList.remove('form-visible');
const timeoutId = setTimeout(() => {
element.classList.add('form-hidden');
elementTimeouts.delete(element);
}, 300);
elementTimeouts.set(element, timeoutId);
}
// 显示遮罩层
function showMask() {
submitMask.classList.remove('opacity-0', 'pointer-events-none');
}
// 隐藏遮罩层
function hideMask() {
submitMask.classList.add('opacity-0', 'pointer-events-none');
}
// 根据选择的操作类型显示对应的表单字段
function updateFormFields() {
const selectedValue = operationType.value;
// 重置所有字段状态
hideElement(personIdGroup);
hideElement(commentGroup);
commentRequired.classList.add('hidden');
personId.required = false;
comment.required = false;
// 清除错误提示
processInstanceIdError.classList.add('hidden');
personIdError.classList.add('hidden');
commentError.classList.add('hidden');
// 根据选择显示不同字段
switch (selectedValue) {
case 'CANCEL': // 撤回实例
showElement(commentGroup);
break;
case 'APPROVE': // 同意任务
case 'REJECT': // 拒绝任务
showElement(personIdGroup);
showElement(commentGroup);
personId.required = true;
break;
case 'ABORT': // 中止实例
showElement(commentGroup);
commentRequired.classList.remove('hidden');
comment.required = true;
break;
case 'RESUMER_DEADLINE_JOB': // 恢复节点
// 只显示流程实例ID，其他都隐藏
break;
}
}
// 表单验证
function validateForm() {
let isValid = true;
const selectedValue = operationType.value;
// 验证流程实例ID
const processInstanceId = document.getElementById('processInstanceId').value.trim();
if (!processInstanceId) {
processInstanceIdError.classList.remove('hidden');
isValid = false;
} else {
processInstanceIdError.classList.add('hidden');
}
// 根据操作类型验证其他字段
if ((selectedValue === 'APPROVE' || selectedValue === 'REJECT') &&
!personId.value.trim()) {
personIdError.classList.remove('hidden');
isValid = false;
} else {
personIdError.classList.add('hidden');
}
if (selectedValue === 'ABORT' && !comment.value.trim()) {
commentError.classList.remove('hidden');
isValid = false;
} else {
commentError.classList.add('hidden');
}
return isValid;
}
// 显示成功提示
function showSuccessToast() {
successToast.classList.remove('translate-x-full');
setTimeout(() => {
successToast.classList.add('translate-x-full');
}, 3000);
}
// 事件监听
operationType.addEventListener('change', updateFormFields);
processForm.addEventListener('submit', async function (e) {
e.preventDefault();
// 清除两个字段的所有空格
const processInstanceIdInput = document.getElementById('processInstanceId');
const personIdInput = document.getElementById('personId');
processInstanceIdInput.value = processInstanceIdInput.value.replace(/\s+/g, '');
personIdInput.value = personIdInput.value.replace(/\s+/g, '');
if (!validateForm()) return;
// 显示遮罩层
showMask();
// 收集表单数据为 JSON 对象
const formData = {
operationType: operationType.value,
processInstanceId: processInstanceIdInput.value,
personId: personIdInput.value || null,
comment: comment.value?.trim() || null
};
try {
const response = await fetch(this.action, {
method: this.method,
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(formData)
});
if (response.ok) {
showSuccessToast();
processForm.reset();
updateFormFields();
} else {
alert('提交失败，请重试');
}
} catch (error) {
console.error('请求错误:', error);
alert('网络错误，请稍后重试');
} finally {
// 无论成功或失败，都隐藏遮罩层
hideMask();
}
});
// 初始化
updateFormFields();
</script>
</body>
</html>