729 lines
32 KiB
HTML
729 lines
32 KiB
HTML
<!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;
|
||
}
|
||
|
||
.tab-active {
|
||
@apply text-primary border-primary;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<!-- 全局上下文路径变量 -->
|
||
<script th:inline="javascript">
|
||
const ctx = [[@{/}]]; // 自动获取servlet.context.path
|
||
</script>
|
||
|
||
<!-- 在<head>中添加，通过Thymeleaf读取后端传递的环境变量（推荐） -->
|
||
<script th:inline="javascript">
|
||
// 后端传递的基础路径（K8S：http://backend-service:8080；本地：空）
|
||
const apiBaseUrl = [[${apiBaseUrl}]] || '';
|
||
|
||
// 处理斜杠问题：移除路径首尾多余的斜杠，避免拼接后出现 //
|
||
const normalizePath = (path) => {
|
||
return path.replace(/^\/+|\/+$/g, ''); // 移除开头和结尾的斜杠
|
||
};
|
||
|
||
// 生成完整路径：确保 apiBaseUrl 和相对路径正确拼接
|
||
const getFullUrl = (relativePath) => {
|
||
if (!relativePath) return apiBaseUrl;
|
||
|
||
const normalizedBase = normalizePath(apiBaseUrl);
|
||
const normalizedRelative = normalizePath(relativePath);
|
||
|
||
// 若基础路径为空，直接返回相对路径（本地环境）
|
||
if (!normalizedBase) {
|
||
return `/${normalizedRelative}`;
|
||
}
|
||
|
||
// 拼接基础路径和相对路径（K8S环境）
|
||
return `/${normalizedBase}/${normalizedRelative}`;
|
||
};
|
||
</script>
|
||
</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"
|
||
th:text="${isAuthenticated} ? '流程操作' : '授权验证'"></h2>
|
||
<p class="text-secondary"
|
||
th:text="${isAuthenticated} ? '请根据需要选择相应操作并填写表单信息' : '请输入或获取授权码以继续操作'"></p>
|
||
</div>
|
||
|
||
<!-- 授权验证区域 - 未认证时显示 -->
|
||
<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="${apiBaseUrl} + @{/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>授权码有效期为30分钟，请及时使用
|
||
</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">
|
||
操作类型 <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 gap-4">
|
||
<button type="button"
|
||
onclick="processForm.reset(); updateFormFields(); operationMessage.classList.add('hidden')"
|
||
class="px-6 py-2.5 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium rounded-lg transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] flex items-center">
|
||
<i class="fa fa-refresh mr-2"></i>重置
|
||
</button>
|
||
<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>
|
||
|
||
<!-- 操作消息显示区域 -->
|
||
<div id="operationMessage" class="mt-4 p-4 rounded-lg hidden"></div>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- 操作说明 - 仅在验证通过后显示 -->
|
||
<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>操作说明，功能如有问题请联系王粒
|
||
</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">
|
||
© 2026 审批流程后台操作系统 - 版权所有
|
||
</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="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" id="maskMessage">请稍候，正在处理您的请求...</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 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 copyToast = document.getElementById('copyToast');
|
||
const submitMask = document.getElementById('submitMask');
|
||
const maskMessage = document.getElementById('maskMessage');
|
||
const operationMessage = document.getElementById('operationMessage');
|
||
|
||
// 错误提示元素
|
||
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)) {
|
||
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(message) {
|
||
maskMessage.textContent = message || '请稍候，正在处理您的请求...';
|
||
submitMask.classList.remove('opacity-0', 'pointer-events-none');
|
||
}
|
||
|
||
// 隐藏遮罩层
|
||
function hideMask() {
|
||
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;
|
||
|
||
// 重置所有字段状态
|
||
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);
|
||
}
|
||
|
||
// 获取授权码
|
||
async function getAuthCode() {
|
||
const password = authPassword.value.trim();
|
||
if (!password) {
|
||
getAuthError.innerHTML = '<i class="fa fa-exclamation-circle mr-1"></i>请输入管理员密码';
|
||
getAuthError.classList.remove('hidden');
|
||
return;
|
||
}
|
||
|
||
// 显示遮罩层
|
||
showMask('请稍候，正在获取授权码...');
|
||
getAuthError.classList.add('hidden');
|
||
|
||
try {
|
||
// 使用全局上下文路径变量拼接URL
|
||
const url = getFullUrl(`web/process/get-auth-code?password=${encodeURIComponent(password)}`);
|
||
|
||
// 保持POST请求方式，参数通过URL查询参数传递
|
||
const response = await fetch(url, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Accept': 'application/json'
|
||
}
|
||
});
|
||
|
||
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 {
|
||
// 显示错误信息
|
||
getAuthError.innerHTML = '<i class="fa fa-exclamation-circle mr-1"></i>' + (result.msg || '密码错误，无法获取授权码');
|
||
getAuthError.classList.remove('hidden');
|
||
}
|
||
} catch (error) {
|
||
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 fullActionUrl = getFullUrl("/web/process/handle");
|
||
// 使用全局上下文路径变量
|
||
const response = await fetch(fullActionUrl, {
|
||
method: this.method,
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Accept': 'application/json'
|
||
},
|
||
body: JSON.stringify(formData)
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
// 显示消息区域
|
||
operationMessage.classList.remove('hidden');
|
||
|
||
if (response.ok && result.code === 200) {
|
||
// 成功消息 - 绿色背景
|
||
operationMessage.className = 'mt-4 p-4 rounded-lg bg-green-50 border border-green-200 text-green-700';
|
||
operationMessage.innerHTML = `<i class="fa fa-check-circle mr-2"></i>${result.msg || '操作已成功提交'}`;
|
||
} else {
|
||
// 错误消息 - 红色背景
|
||
operationMessage.className = 'mt-4 p-4 rounded-lg bg-red-50 border border-red-200 text-red-700';
|
||
operationMessage.innerHTML = `<i class="fa fa-exclamation-circle mr-2"></i>${result.msg || '操作失败，请重试'}`;
|
||
}
|
||
} catch (error) {
|
||
console.error('请求错误:', error);
|
||
// 网络错误消息
|
||
operationMessage.className = 'mt-4 p-4 rounded-lg bg-red-50 border border-red-200 text-red-700';
|
||
operationMessage.innerHTML = `<i class="fa fa-exclamation-circle mr-2"></i>网络错误，请稍后重试`;
|
||
operationMessage.classList.remove('hidden');
|
||
} finally {
|
||
// 隐藏遮罩层
|
||
hideMask();
|
||
}
|
||
});
|
||
}
|
||
|
||
// 授权码表单提交处理
|
||
if (authForm) {
|
||
authForm.addEventListener('submit', function (e) {
|
||
// 显示遮罩层
|
||
showMask('请稍候，正在验证授权码...');
|
||
// 清除之前的错误提示
|
||
if (authError) {
|
||
authError.classList.add('hidden');
|
||
}
|
||
// 允许表单正常提交
|
||
});
|
||
}
|
||
|
||
// 获取授权码按钮点击事件
|
||
if (getAuthCodeBtn) {
|
||
getAuthCodeBtn.addEventListener('click', getAuthCode);
|
||
}
|
||
|
||
// 初始化
|
||
if (operationType) {
|
||
updateFormFields();
|
||
}
|
||
|
||
// 页面加载时检查后端消息
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
// 检查流程操作的后端消息（使用 Thymeleaf JS 内联语法）
|
||
/*[[#{
|
||
if (${message != null}) {
|
||
operationMessage.classList.remove('hidden');
|
||
if (${message.startsWith('操作成功')}) {
|
||
operationMessage.className = 'mt-4 p-4 rounded-lg bg-green-50 border border-green-200 text-green-700';
|
||
} else {
|
||
operationMessage.className = 'mt-4 p-4 rounded-lg bg-red-50 border border-red-200 text-red-700';
|
||
}
|
||
operationMessage.innerHTML = '<i class="fa ' + (${message.startsWith('操作成功')} ? 'fa-check-circle' : 'fa-exclamation-circle') + ' mr-2"></i>' + '${message}';
|
||
}
|
||
}]]*/
|
||
|
||
// 显示授权错误（如果有）
|
||
if (authError && authError.textContent.trim() !== '') {
|
||
authError.classList.remove('hidden');
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |