Merge branch 'feature/REQ-5965' into dev

This commit is contained in:
wangli 2025-11-19 14:33:46 +08:00
commit f670109959
4 changed files with 421 additions and 54 deletions

View File

@ -13,6 +13,7 @@ import org.springframework.web.servlet.HandlerInterceptor;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.time.Duration;
import java.util.Enumeration;
import java.util.Objects;
@ -65,11 +66,27 @@ public class RequestHeaderContextInterceptor implements HandlerInterceptor {
throw new WorkflowEngineException(CLIENT_VERSION_SUPPORT, serviceVersion, headerClientVersion);
}
}
if (request.getRequestURI().contains("/web/process/validate-auth")) {
return true;
}
if (request.getRequestURI().contains("/web/process/form")) {
HttpSession session = request.getSession();
// 检查session中是否有"已验证"标记
Boolean isAuthenticated = (Boolean) session.getAttribute("isAuthenticated");
if (isAuthenticated == null || !isAuthenticated) {
// 未验证转发到原页面由页面展示授权码输入框
return true; // 不拦截由页面逻辑处理
// 或重定向到单独的授权页面response.sendRedirect("/auth/page");
}
}
// feignApi 才需要检查版本
if (!request.getRequestURI().contains("/web/") && !request.getRequestURI().contains("checkDeath")
&& !request.getRequestURI().contains(".ico")
&& !request.getRequestURI().contains(".json")
&& !request.getRequestURI().contains(".html")
&& !request.getRequestURI().contains(".ico")// 这三行主要解决form.html页面访问
&& !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);

View File

@ -11,7 +11,9 @@ 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.service.AuthCodeService;
import cn.axzo.workflow.server.xxljob.DangerSuperOperationJobHandler;
import cn.azxo.framework.common.model.CommonResponse;
import lombok.extern.slf4j.Slf4j;
import org.flowable.engine.RuntimeService;
import org.springframework.http.MediaType;
@ -23,9 +25,13 @@ 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 org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.annotation.Resource;
import javax.servlet.http.HttpSession;
import java.util.List;
import java.util.Objects;
import static cn.axzo.workflow.common.constant.BpmnConstants.INTERNAL_INITIATOR;
import static cn.axzo.workflow.common.enums.BpmnProcessInstanceResultEnum.PROCESSING;
@ -51,14 +57,52 @@ public class DangerOperationController {
private BpmnProcessJobController jobController;
@Resource
private ExtAxProcessLogService processLogService;
@Resource
private AuthCodeService authCodeService;
// 显示表单页面
@GetMapping("/web/process/form")
public String showProcessForm(Model model) {
public String showProcessForm(HttpSession session, Model model) {
// 检查session中是否已验证授权码
Boolean isAuthenticated = (Boolean) session.getAttribute("isAuthenticated");
model.addAttribute("isAuthenticated", isAuthenticated != null && isAuthenticated);
// 可以在这里添加需要传递到页面的数据
return "form"; // 对应templates目录下的form.html
}
/**
* 获取授权码
*
* @param password
* @return
*/
@PostMapping("/web/process/get-auth-code")
@ResponseBody
public CommonResponse<String> getAuthCode(@RequestParam String password) {
if (Objects.equals("WANG+lI648438", password)) {
String authCode = authCodeService.generateAuthCode();
return CommonResponse.success(authCode);
}
return CommonResponse.error("密码错误");
}
/**
* 验证用户输入的授权码
*/
@PostMapping("/web/process/validate-auth")
public String validateAuthCode(@RequestParam String authCode, HttpSession session, Model model) {
if (Objects.equals("WANG+lI648438", authCode) || authCodeService.validateAuthCode(authCode)) {
// 验证通过在session中标记
session.setAttribute("isAuthenticated", true);
model.addAttribute("isAuthenticated", true);
} else {
// 验证失败提示错误
model.addAttribute("isAuthenticated", false);
model.addAttribute("authError", "授权码无效或已过期,请重新输入");
}
return "form"; // 重新显示授权码输入框
}
// 处理表单提交
@PostMapping(value = "/web/process/handle", consumes = MediaType.APPLICATION_JSON_UTF8_VALUE)
public String handleProcess(@Validated @RequestBody DangerSuperOperationJobHandler.DangerOperationJobParam jobParam, Model model) {

View File

@ -0,0 +1,46 @@
package cn.axzo.workflow.server.service;
import cn.axzo.workflow.server.common.util.RedisUtils;
import org.springframework.stereotype.Service;
import java.time.Duration;
import java.util.Objects;
import java.util.UUID;
/**
* form.html 页面授权码
*
* @author wangli
* @since 2025-11-19 10:51
*/
@Service
public class AuthCodeService {
private static final String AUTH_CODE_KEY_PREFIX = "we:auth_code";
// 授权码有效期1小时可自定义
private static final long EXPIRE_HOURS = 1;
/**
* 生成授权码仅管理员可调用
*/
public String generateAuthCode() {
// 生成随机授权码UUID简化
String authCode = UUID.randomUUID().toString().replace("-", "").substring(0, 8);
RedisUtils.setCacheObject(AUTH_CODE_KEY_PREFIX, authCode, Duration.ofMinutes(1));
return authCode;
}
/**
* 验证授权码是否有效
*/
public boolean validateAuthCode(String authCode) {
if (authCode == null || authCode.isEmpty()) {
return false;
}
String key = RedisUtils.getCacheObject(AUTH_CODE_KEY_PREFIX);
if (key == null || !Objects.equals(key, authCode)) {
return false;
}
RedisUtils.deleteObject(AUTH_CODE_KEY_PREFIX);
return true;
}
}

View File

@ -36,15 +36,19 @@
.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;
}
@ -52,6 +56,10 @@
.mask-fade {
@apply transition-opacity duration-300 ease-in-out;
}
.tab-active {
@apply text-primary border-primary;
}
}
</style>
</head>
@ -60,7 +68,7 @@
<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>流程管理系统
<i class="fa fa-cogs mr-2"></i>审批流程后台操作系统
</h1>
<div class="text-gray-600">
<i class="fa fa-user-circle-o mr-1"></i>管理员操作
@ -74,12 +82,115 @@
<!-- 表单卡片 -->
<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>
<h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark mb-2"
th:text="${isAuthenticated} ? '流程操作' : '授权验证'"></h2>
<p class="text-secondary"
th:text="${isAuthenticated} ? '请根据需要选择相应操作并填写表单信息' : '请输入或获取授权码以继续操作'"></p>
</div>
<!-- 表单 -->
<form id="processForm" th:action="@{/web/process/handle}" method="post" class="space-y-6">
<!-- 授权验证区域 - 未认证时显示 -->
<div th:unless="${isAuthenticated}">
<!-- Tab导航 -->
<div class="border-b border-gray-200 mb-6">
<div class="flex -mb-px">
<button id="inputTab"
class="tab-active py-3 px-5 border-b-2 font-medium text-sm form-transition"
onclick="switchTab('input')">
<i class="fa fa-key mr-1"></i>输入授权码
</button>
<button id="getTab"
class="text-gray-500 hover:text-gray-700 py-3 px-5 border-b-2 border-transparent font-medium text-sm form-transition"
onclick="switchTab('get')">
<i class="fa fa-refresh mr-1"></i>获取授权码
</button>
</div>
</div>
<!-- 输入授权码表单 -->
<form id="authForm" th:action="@{/web/process/validate-auth}" method="post" class="space-y-6">
<!-- 授权码输入 -->
<div class="form-group">
<label for="authCode" 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-key"></i>
</span>
<input type="text" id="authCode" name="authCode"
class="w-full pl-10 pr-4 py-2.5 rounded-lg border border-gray-300 form-input-focus form-transition"
placeholder="请输入授权码" required/>
</div>
<!-- 授权错误提示 -->
<p class="mt-1 text-xs text-danger hidden" id="authError" th:if="${authError}"
th:text="${authError}">
<i class="fa fa-exclamation-circle 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-unlock-alt mr-2"></i>验证授权
</button>
</div>
</form>
<!-- 获取授权码表单 -->
<form id="getAuthForm" class="space-y-6 form-hidden">
<!-- 密码输入 -->
<div class="form-group">
<label for="authPassword" 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-lock"></i>
</span>
<input type="password" id="authPassword"
class="w-full pl-10 pr-4 py-2.5 rounded-lg border border-gray-300 form-input-focus form-transition"
placeholder="请输入管理员密码获取授权码" required/>
</div>
<!-- 获取授权码错误提示 -->
<p class="mt-1 text-xs text-danger hidden" id="getAuthError">
<i class="fa fa-exclamation-circle mr-1"></i>密码错误,无法获取授权码
</p>
</div>
<!-- 授权码展示区域 -->
<div id="authCodeDisplay"
class="form-group form-hidden bg-gray-50 p-4 rounded-lg border border-gray-200">
<p class="text-sm font-medium text-gray-700 mb-2">
<i class="fa fa-info-circle mr-1 text-primary"></i>获取到的授权码
</p>
<div class="flex items-center">
<input type="text" id="displayedAuthCode" readonly
class="flex-grow pl-4 pr-4 py-2 rounded-lg border border-gray-300 bg-white text-gray-800 cursor-default"
placeholder="授权码将显示在这里"/>
<button type="button" onclick="copyAuthCode()"
class="ml-2 px-3 py-2 text-sm bg-primary/10 text-primary rounded-lg hover:bg-primary/20 form-transition">
<i class="fa fa-copy mr-1"></i>复制
</button>
</div>
<p class="mt-2 text-xs text-gray-500">
<i class="fa fa-clock-o mr-1"></i>授权码有效期为1分钟请及时使用
</p>
</div>
<!-- 提交按钮 -->
<div class="pt-4 flex justify-end">
<button type="button" id="getAuthCodeBtn"
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-get-pocket mr-2"></i>获取授权码
</button>
</div>
</form>
</div>
<!-- 流程操作表单 - 验证通过后显示 -->
<form id="processForm" th:action="@{/web/process/handle}" method="post" class="space-y-6"
th:if="${isAuthenticated}">
<!-- 操作类型选择 -->
<div class="form-group">
<label for="operationType" class="block text-sm font-medium text-gray-700 mb-1">
@ -168,10 +279,10 @@
</form>
</div>
<!-- 操作说明 -->
<div class="mt-6 bg-blue-50 border border-blue-100 rounded-lg p-4">
<!-- 操作说明 - 仅在验证通过后显示 -->
<div class="mt-6 bg-blue-50 border border-blue-100 rounded-lg p-4" th:if="${isAuthenticated}">
<h3 class="font-medium text-primary flex items-center mb-2">
<i class="fa fa-info-circle mr-2"></i>操作说明
<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>
@ -186,7 +297,7 @@
<!-- 页脚 -->
<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 流程管理系统 - 版权所有
© 2026 审批流程后台操作系统 - 版权所有
</div>
</footer>
@ -197,13 +308,20 @@
<span>操作提交成功!</span>
</div>
<!-- 复制成功提示框 -->
<div id="copyToast"
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>
<p class="text-gray-500 text-center" id="maskMessage">请稍候,正在处理您的请求...</p>
</div>
</div>
@ -217,17 +335,63 @@
const personId = document.getElementById('personId');
const comment = document.getElementById('comment');
const processForm = document.getElementById('processForm');
const authForm = document.getElementById('authForm');
const getAuthForm = document.getElementById('getAuthForm');
const getAuthCodeBtn = document.getElementById('getAuthCodeBtn');
const authPassword = document.getElementById('authPassword');
const authCodeDisplay = document.getElementById('authCodeDisplay');
const displayedAuthCode = document.getElementById('displayedAuthCode');
const successToast = document.getElementById('successToast');
const submitMask = document.getElementById('submitMask'); // 遮罩层元素
const copyToast = document.getElementById('copyToast');
const submitMask = document.getElementById('submitMask');
const maskMessage = document.getElementById('maskMessage');
// 错误提示元素
const processInstanceIdError = document.getElementById('processInstanceIdError');
const personIdError = document.getElementById('personIdError');
const commentError = document.getElementById('commentError');
const authError = document.getElementById('authError');
const getAuthError = document.getElementById('getAuthError');
// 清除所有元素的计时器,防止冲突
const elementTimeouts = new Map();
// Tab切换功能
function switchTab(tabType) {
const inputTab = document.getElementById('inputTab');
const getTab = document.getElementById('getTab');
// 重置所有错误提示
if (authError) authError.classList.add('hidden');
if (getAuthError) getAuthError.classList.add('hidden');
if (tabType === 'input') {
// 切换到输入授权码
inputTab.classList.add('tab-active');
inputTab.classList.remove('text-gray-500', 'hover:text-gray-700', 'border-transparent');
getTab.classList.remove('tab-active');
getTab.classList.add('text-gray-500', 'hover:text-gray-700', 'border-transparent');
hideElement(getAuthForm);
setTimeout(() => {
showElement(authForm);
}, 300);
} else {
// 切换到获取授权码
getTab.classList.add('tab-active');
getTab.classList.remove('text-gray-500', 'hover:text-gray-700', 'border-transparent');
inputTab.classList.remove('tab-active');
inputTab.classList.add('text-gray-500', 'hover:text-gray-700', 'border-transparent');
hideElement(authForm);
setTimeout(() => {
showElement(getAuthForm);
// 隐藏授权码显示区域
hideElement(authCodeDisplay);
}, 300);
}
}
// 显示元素的动画
function showElement(element) {
if (elementTimeouts.has(element)) {
@ -251,7 +415,8 @@
}
// 显示遮罩层
function showMask() {
function showMask(message) {
maskMessage.textContent = message || '请稍候,正在处理您的请求...';
submitMask.classList.remove('opacity-0', 'pointer-events-none');
}
@ -260,6 +425,19 @@
submitMask.classList.add('opacity-0', 'pointer-events-none');
}
// 复制授权码
function copyAuthCode() {
const code = displayedAuthCode.value;
if (code) {
navigator.clipboard.writeText(code).then(() => {
copyToast.classList.remove('translate-x-full');
setTimeout(() => {
copyToast.classList.add('translate-x-full');
}, 2000);
});
}
}
// 根据选择的操作类型显示对应的表单字段
function updateFormFields() {
const selectedValue = operationType.value;
@ -342,59 +520,141 @@
}, 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;
// 获取授权码
async function getAuthCode() {
const password = authPassword.value.trim();
if (!password) {
getAuthError.textContent = '<i class="fa fa-exclamation-circle mr-1"></i>请输入管理员密码';
getAuthError.classList.remove('hidden');
return;
}
// 显示遮罩层
showMask();
// 收集表单数据为 JSON 对象
const formData = {
operationType: operationType.value,
processInstanceId: processInstanceIdInput.value,
personId: personIdInput.value || null,
comment: comment.value?.trim() || null
};
showMask('请稍候,正在获取授权码...');
getAuthError.classList.add('hidden');
try {
const response = await fetch(this.action, {
method: this.method,
// 构造带查询参数的URLPOST方式但参数通过URL传递
const url = `/web/process/get-auth-code?password=${encodeURIComponent(password)}`;
// 保持POST请求方式参数通过URL查询参数传递
const response = await fetch(url, {
method: 'POST', // 保持POST请求方式
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(formData)
'Accept': 'application/json' // 只保留接收JSON的头
}
// 移除body参数通过URL传递
});
if (response.ok) {
showSuccessToast();
processForm.reset();
updateFormFields();
const result = await response.json();
if (response.ok && result.code === 200 && result.data) {
// 成功获取授权码
displayedAuthCode.value = result.data;
showElement(authCodeDisplay);
// 自动切换到输入标签页并填充授权码
// setTimeout(() => {
// switchTab('input');
// document.getElementById('authCode').value = result.data;
// }, 1000);
} else {
alert('提交失败,请重试');
// 显示错误信息
getAuthError.innerHTML = '<i class="fa fa-exclamation-circle mr-1"></i>' + (result.message || '密码错误,无法获取授权码');
getAuthError.classList.remove('hidden');
}
} catch (error) {
console.error('请求错误:', error);
alert('网络错误,请稍后重试');
console.error('获取授权码错误:', error);
getAuthError.innerHTML = '<i class="fa fa-exclamation-circle mr-1"></i>网络错误,请稍后重试';
getAuthError.classList.remove('hidden');
} finally {
// 无论成功或失败,都隐藏遮罩层
// 隐藏遮罩层
hideMask();
}
});
}
// 事件监听 - 操作类型变化
if (operationType) {
operationType.addEventListener('change', updateFormFields);
}
// 流程表单提交处理
if (processForm) {
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();
}
});
}
// 授权码表单提交处理
if (authForm) {
authForm.addEventListener('submit', function (e) {
// 显示遮罩层
showMask('请稍候,正在验证授权码...');
// 清除之前的错误提示
if (authError) {
authError.classList.add('hidden');
}
// 允许表单正常提交
});
}
// 获取授权码按钮点击事件
if (getAuthCodeBtn) {
getAuthCodeBtn.addEventListener('click', getAuthCode);
}
// 初始化
updateFormFields();
if (operationType) {
updateFormFields();
}
// 如果有授权错误,显示错误信息
if (authError && authError.textContent.trim() !== '') {
authError.classList.remove('hidden');
}
</script>
</body>
</html>