1378 lines
68 KiB
HTML
1378 lines
68 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>枢机协律中央法庭 - 案件管理系统</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://cdn.gvsds.com/font-awesome/css/all.min.css" rel="stylesheet">
|
||
<!-- Tailwind 配置 -->
|
||
<script>
|
||
tailwind.config = {
|
||
darkMode: 'class',
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
primary: '#0F3460',
|
||
secondary: '#E6B325',
|
||
accent: '#16C2D5',
|
||
success: '#27AE60',
|
||
pending: '#F39C12',
|
||
danger: '#E74C3C',
|
||
},
|
||
fontFamily: {
|
||
sans: ['Noto Sans SC', 'sans-serif'],
|
||
serif: ['Noto Serif SC', 'serif'],
|
||
},
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style type="text/tailwindcss">
|
||
@layer utilities {
|
||
.content-auto {
|
||
content-visibility: auto;
|
||
}
|
||
.card-hover {
|
||
transition: all 0.3s ease;
|
||
}
|
||
.card-hover:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||
}
|
||
.fade-in {
|
||
animation: fadeIn 0.5s ease-in-out;
|
||
}
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
.list-item-enter {
|
||
animation: slideIn 0.3s ease-out;
|
||
}
|
||
@keyframes slideIn {
|
||
from { transform: translateX(-10px); opacity: 0; }
|
||
to { transform: translateX(0); opacity: 1; }
|
||
}
|
||
.btn-icon {
|
||
@apply p-1.5 rounded transition-colors flex items-center justify-center;
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
.input-error {
|
||
@apply border-danger focus:ring-danger;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-100 transition-colors duration-300 min-h-screen flex flex-col">
|
||
<!-- 顶部导航栏 -->
|
||
<header class="bg-primary text-white shadow-md sticky top-0 z-50">
|
||
<div class="container mx-auto px-4">
|
||
<div class="flex justify-between items-center py-4">
|
||
<div class="flex items-center">
|
||
<i class="fa fa-balance-scale text-2xl mr-3 text-secondary"></i>
|
||
<h1 class="text-xl md:text-2xl font-serif font-bold">枢机协律中央法庭</h1>
|
||
</div>
|
||
|
||
<div class="flex items-center space-x-4">
|
||
<button id="refreshBtn" class="flex items-center px-3 py-1.5 rounded hover:bg-primary-700 transition-colors">
|
||
<i class="fa fa-refresh mr-1"></i>
|
||
<span class="hidden md:inline">刷新数据</span>
|
||
</button>
|
||
|
||
<button id="themeToggle" class="w-9 h-9 rounded-full flex items-center justify-center hover:bg-primary-700 transition-colors">
|
||
<i class="fa fa-moon-o dark:hidden"></i>
|
||
<i class="fa fa-sun-o hidden dark:block"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 导航标签 -->
|
||
<div class="flex border-t border-primary-700 overflow-x-auto">
|
||
<button class="tab-btn active flex-1 py-3 px-4 text-center focus:outline-none" data-tab="all-Cases">
|
||
<i class="fa fa-list-alt mr-1"></i>所有案件
|
||
</button>
|
||
<button class="tab-btn flex-1 py-3 px-4 text-center focus:outline-none" data-tab="my-Cases">
|
||
<i class="fa fa-user-circle mr-1"></i>我的案件
|
||
</button>
|
||
<button class="tab-btn flex-1 py-3 px-4 text-center focus:outline-none" data-tab="pending-Cases">
|
||
<i class="fa fa-clock-o mr-1"></i>未审核案件
|
||
</button>
|
||
<button class="tab-btn flex-1 py-3 px-4 text-center focus:outline-none" data-tab="new-Case">
|
||
<i class="fa fa-plus-circle mr-1"></i>提起诉讼
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 主内容区 -->
|
||
<main class="flex-grow container mx-auto px-4 py-8">
|
||
<!-- 加载状态 -->
|
||
<div id="loading" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center">
|
||
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl flex flex-col items-center">
|
||
<div class="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin mb-4"></div>
|
||
<p class="text-lg font-medium">数据加载中...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 消息提示 -->
|
||
<div id="message" class="hidden fixed top-20 right-4 max-w-sm p-4 rounded-lg shadow-lg z-50 fade-in"></div>
|
||
|
||
<!-- 所有案件标签页 -->
|
||
<div id="all-Cases" class="tab-content active">
|
||
<div class="flex justify-between items-center mb-6">
|
||
<h2 class="text-2xl font-bold text-primary dark:text-secondary">所有案件</h2>
|
||
<div class="relative">
|
||
<input type="text" id="allCasesSearch" placeholder="搜索案件..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-primary">
|
||
<i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
<div id="all-Cases-container" class="col-span-full">
|
||
<div class="flex flex-col items-center justify-center py-16 text-gray-500 dark:text-gray-400">
|
||
<i class="fa fa-folder-open-o text-5xl mb-4"></i>
|
||
<p class="text-lg">点击刷新按钮加载案件数据</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 我的案件标签页 -->
|
||
<div id="my-Cases" class="tab-content hidden">
|
||
<div class="flex justify-between items-center mb-6">
|
||
<h2 class="text-2xl font-bold text-primary dark:text-secondary">我的案件</h2>
|
||
<div class="relative">
|
||
<input type="text" id="myCasesSearch" placeholder="搜索我的案件..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-primary">
|
||
<i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
<div id="my-Cases-container" class="col-span-full">
|
||
<div class="flex flex-col items-center justify-center py-16 text-gray-500 dark:text-gray-400">
|
||
<i class="fa fa-user-circle-o text-5xl mb-4"></i>
|
||
<p class="text-lg">点击刷新按钮加载您的案件数据</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 未审核案件标签页 -->
|
||
<div id="pending-Cases" class="tab-content hidden">
|
||
<div class="flex justify-between items-center mb-6">
|
||
<h2 class="text-2xl font-bold text-primary dark:text-secondary">未审核案件</h2>
|
||
<div class="relative">
|
||
<input type="text" id="pendingCasesSearch" placeholder="搜索未审核案件..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-primary">
|
||
<i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
<div id="pending-Cases-container" class="col-span-full">
|
||
<div class="flex flex-col items-center justify-center py-16 text-gray-500 dark:text-gray-400">
|
||
<i class="fa fa-clock-o text-5xl mb-4"></i>
|
||
<p class="text-lg">点击刷新按钮加载未审核案件数据</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 提起诉讼表单标签页 -->
|
||
<div id="new-Case" class="tab-content hidden">
|
||
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 md:p-8 border border-gray-200 dark:border-gray-700">
|
||
<h2 class="text-2xl font-bold text-primary dark:text-secondary mb-6">提起诉讼 / 修改案件</h2>
|
||
|
||
<form id="CaseForm" class="space-y-6">
|
||
<!-- 隐藏的案件UUID -->
|
||
<input type="hidden" id="CaseUUID">
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<label for="CaseTitle" class="block text-sm font-medium mb-2">案件标题 <span class="text-danger">*</span></label>
|
||
<input type="text" id="CaseTitle" name="CaseTitle" required class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary">
|
||
</div>
|
||
|
||
<div>
|
||
<label for="CaseType" class="block text-sm font-medium mb-2">案件类型 <span class="text-danger">*</span></label>
|
||
<select id="CaseType" name="CaseType" required class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary">
|
||
<option value="">请选择案件类型</option>
|
||
<option value="0">民事案件</option>
|
||
<option value="1">刑事案件</option>
|
||
<option value="2">行政案件</option>
|
||
<option value="3">商事案件</option>
|
||
<option value="4">环境案件</option>
|
||
<option value="5">其他案件</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 原告信息 -->
|
||
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 bg-gray-50 dark:bg-gray-800/50">
|
||
<h3 class="font-medium mb-3 text-primary dark:text-secondary">原告信息 <span class="text-danger">*</span></h3>
|
||
<div class="flex items-center space-x-4 mb-4">
|
||
<label class="inline-flex items-center">
|
||
<input type="radio" name="plaintiffType" value="personal" checked class="text-primary focus:ring-primary">
|
||
<span class="ml-2">个人名义</span>
|
||
</label>
|
||
<label class="inline-flex items-center">
|
||
<input type="radio" name="plaintiffType" value="enterprise" class="text-primary focus:ring-primary">
|
||
<span class="ml-2">企业名义</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div id="plaintiffPersonalContainer" class="plaintiff-container">
|
||
<p class="text-sm text-gray-500 dark:text-gray-400 italic">
|
||
<i class="fa fa-info-circle mr-1 text-primary"></i>将使用当前账户作为原告信息
|
||
</p>
|
||
<input type="hidden" id="plaintiffUUID" name="plaintiffUUID" value="USER123456789">
|
||
</div>
|
||
|
||
<div id="plaintiffEnterpriseContainer" class="plaintiff-container hidden">
|
||
<div class="relative">
|
||
<input type="text" id="enterpriseUUID" placeholder="请输入企业UUID" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary">
|
||
<button type="button" id="verifyEnterpriseBtn" class="absolute right-2 top-1/2 transform -translate-y-1/2 px-3 py-1 bg-accent text-white text-sm rounded hover:bg-accent/90 transition-colors">
|
||
验证权限
|
||
</button>
|
||
</div>
|
||
<p id="enterpriseVerifyResult" class="mt-2 text-sm hidden"></p>
|
||
<input type="hidden" id="plaintiffUUID" name="plaintiffUUID">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 被告信息 -->
|
||
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 bg-gray-50 dark:bg-gray-800/50">
|
||
<h3 class="font-medium mb-3 text-primary dark:text-secondary">被告信息</h3>
|
||
<div class="flex items-center space-x-4 mb-4">
|
||
<label class="inline-flex items-center">
|
||
<input type="radio" name="defendantType" value="personal" checked class="text-primary focus:ring-primary">
|
||
<span class="ml-2">个人名义</span>
|
||
</label>
|
||
<label class="inline-flex items-center">
|
||
<input type="radio" name="defendantType" value="enterprise" class="text-primary focus:ring-primary">
|
||
<span class="ml-2">企业名义</span>
|
||
</label>
|
||
<label class="inline-flex items-center">
|
||
<input type="radio" name="defendantType" value="self" class="text-primary focus:ring-primary">
|
||
<span class="ml-2">本人(值为空)</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div id="defendantPersonalContainer" class="defendant-container">
|
||
<div class="mb-3">
|
||
<label class="inline-flex items-center mr-4">
|
||
<input type="radio" name="defendantPersonalMethod" value="uuid" checked class="text-primary focus:ring-primary">
|
||
<span class="ml-2">UUID</span>
|
||
</label>
|
||
<label class="inline-flex items-center mr-4">
|
||
<input type="radio" name="defendantPersonalMethod" value="gameName" class="text-primary focus:ring-primary">
|
||
<span class="ml-2">游戏名</span>
|
||
</label>
|
||
<label class="inline-flex items-center">
|
||
<input type="radio" name="defendantPersonalMethod" value="gvsds" class="text-primary focus:ring-primary">
|
||
<span class="ml-2">GVSDS账户名</span>
|
||
</label>
|
||
</div>
|
||
<div>
|
||
<input type="text" id="defendantPersonalInfo" placeholder="请输入被告UUID" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary">
|
||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||
<i class="fa fa-exclamation-circle mr-1"></i>注意符合格式
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="defendantEnterpriseContainer" class="defendant-container hidden">
|
||
<div class="mb-3">
|
||
<label class="inline-flex items-center mr-4">
|
||
<input type="radio" name="defendantEnterpriseMethod" value="uuid" checked class="text-primary focus:ring-primary">
|
||
<span class="ml-2">企业UUID</span>
|
||
</label>
|
||
<label class="inline-flex items-center">
|
||
<input type="radio" name="defendantEnterpriseMethod" value="name" class="text-primary focus:ring-primary">
|
||
<span class="ml-2">企业名称</span>
|
||
</label>
|
||
</div>
|
||
<div>
|
||
<input type="text" id="defendantEnterpriseInfo" placeholder="请输入企业UUID" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary">
|
||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||
<i class="fa fa-exclamation-circle mr-1"></i>不能包含"|"字符
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="defendantSelfContainer" class="defendant-container hidden">
|
||
<p class="text-sm text-gray-500 dark:text-gray-400 italic">
|
||
<i class="fa fa-info-circle mr-1 text-primary"></i>被告为本人,相关字段将留空
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label class="block text-sm font-medium mb-2">案件描述 <span class="text-danger">*</span></label>
|
||
<textarea id="CaseDescription" name="CaseDescription" rows="6" required class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="详细描述案件的起因、经过、相关证据等信息..."></textarea>
|
||
</div>
|
||
|
||
<!-- 诉讼请求(带修改和删除按钮) -->
|
||
<div>
|
||
<label class="block text-sm font-medium mb-2">诉讼请求 <span class="text-danger">*</span></label>
|
||
<div class="flex mb-3">
|
||
<input type="text" id="demandInput" placeholder="输入诉讼请求,按回车添加..." class="flex-1 px-4 py-2 rounded-l-lg border border-r-0 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary">
|
||
<button type="button" id="addDemandBtn" class="px-4 py-2 bg-primary text-white rounded-r-lg hover:bg-primary/90 transition-colors">
|
||
<i class="fa fa-plus"></i>
|
||
</button>
|
||
</div>
|
||
<div id="demandsList" class="space-y-2 max-h-60 overflow-y-auto pr-2">
|
||
<div class="text-gray-500 dark:text-gray-400 text-sm italic text-center py-4 border border-dashed rounded-lg">
|
||
尚未添加诉讼请求
|
||
</div>
|
||
</div>
|
||
<input type="hidden" id="CaseDemands" name="CaseDemands">
|
||
</div>
|
||
|
||
<!-- 证据列表(带修改和删除按钮) -->
|
||
<div>
|
||
<label class="block text-sm font-medium mb-2">证据清单</label>
|
||
<div class="flex mb-3">
|
||
<input type="text" id="evidenceInput" placeholder="输入证据信息,按回车添加..." class="flex-1 px-4 py-2 rounded-l-lg border border-r-0 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary">
|
||
<button type="button" id="addEvidenceBtn" class="px-4 py-2 bg-primary text-white rounded-r-lg hover:bg-primary/90 transition-colors">
|
||
<i class="fa fa-plus"></i>
|
||
</button>
|
||
</div>
|
||
<div id="evidencesList" class="space-y-2 max-h-60 overflow-y-auto pr-2">
|
||
<div class="text-gray-500 dark:text-gray-400 text-sm italic text-center py-4 border border-dashed rounded-lg">
|
||
尚未添加证据
|
||
</div>
|
||
</div>
|
||
<input type="hidden" id="evidenceList" name="evidenceList">
|
||
</div>
|
||
|
||
<div class="flex justify-end space-x-4 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||
<button type="button" id="resetForm" class="px-6 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
|
||
重置
|
||
</button>
|
||
<button type="submit" class="px-6 py-2.5 bg-primary hover:bg-primary/90 text-white rounded-lg transition-colors">
|
||
<i class="fa fa-paper-plane mr-1"></i>提交案件
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<script>
|
||
// 全局状态
|
||
const state = {
|
||
allCases: [],
|
||
myCases: [],
|
||
pendingCases: [],
|
||
isLoading: false,
|
||
currentUserInfo: {
|
||
username: "张三",
|
||
uuid: "USER123456789"
|
||
},
|
||
formData: {
|
||
demands: [],
|
||
evidences: []
|
||
}
|
||
};
|
||
|
||
// DOM元素
|
||
const elements = {
|
||
tabs: document.querySelectorAll('.tab-btn'),
|
||
tabContents: document.querySelectorAll('.tab-content'),
|
||
refreshBtn: document.getElementById('refreshBtn'),
|
||
themeToggle: document.getElementById('themeToggle'),
|
||
loading: document.getElementById('loading'),
|
||
message: document.getElementById('message'),
|
||
allCasesContainer: document.getElementById('all-Cases-container'),
|
||
myCasesContainer: document.getElementById('my-Cases-container'),
|
||
pendingCasesContainer: document.getElementById('pending-Cases-container'),
|
||
CaseForm: document.getElementById('CaseForm'),
|
||
CaseUUID: document.getElementById('CaseUUID'),
|
||
resetForm: document.getElementById('resetForm'),
|
||
allCasesSearch: document.getElementById('allCasesSearch'),
|
||
myCasesSearch: document.getElementById('myCasesSearch'),
|
||
pendingCasesSearch: document.getElementById('pendingCasesSearch'),
|
||
|
||
// 原告信息相关
|
||
plaintiffTypeRadios: document.querySelectorAll('input[name="plaintiffType"]'),
|
||
plaintiffPersonalContainer: document.getElementById('plaintiffPersonalContainer'),
|
||
plaintiffEnterpriseContainer: document.getElementById('plaintiffEnterpriseContainer'),
|
||
enterpriseUUID: document.getElementById('enterpriseUUID'),
|
||
verifyEnterpriseBtn: document.getElementById('verifyEnterpriseBtn'),
|
||
enterpriseVerifyResult: document.getElementById('enterpriseVerifyResult'),
|
||
plaintiffUUID: document.getElementById('plaintiffUUID'),
|
||
|
||
// 被告信息相关
|
||
defendantTypeRadios: document.querySelectorAll('input[name="defendantType"]'),
|
||
defendantPersonalContainer: document.getElementById('defendantPersonalContainer'),
|
||
defendantEnterpriseContainer: document.getElementById('defendantEnterpriseContainer'),
|
||
defendantSelfContainer: document.getElementById('defendantSelfContainer'),
|
||
defendantPersonalMethodRadios: document.querySelectorAll('input[name="defendantPersonalMethod"]'),
|
||
defendantEnterpriseMethodRadios: document.querySelectorAll('input[name="defendantEnterpriseMethod"]'),
|
||
defendantPersonalInfo: document.getElementById('defendantPersonalInfo'),
|
||
defendantEnterpriseInfo: document.getElementById('defendantEnterpriseInfo'),
|
||
|
||
// 诉讼请求相关
|
||
demandInput: document.getElementById('demandInput'),
|
||
addDemandBtn: document.getElementById('addDemandBtn'),
|
||
demandsList: document.getElementById('demandsList'),
|
||
CaseDemands: document.getElementById('CaseDemands'),
|
||
|
||
// 证据相关
|
||
evidenceInput: document.getElementById('evidenceInput'),
|
||
addEvidenceBtn: document.getElementById('addEvidenceBtn'),
|
||
evidencesList: document.getElementById('evidencesList'),
|
||
evidenceList: document.getElementById('evidenceList')
|
||
};
|
||
|
||
// 初始化
|
||
function init() {
|
||
setupEventListeners();
|
||
checkThemePreference();
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const tabParam = urlParams.get('tab');
|
||
if (tabParam && document.querySelector(`.tab-btn[data-tab="${tabParam}"]`)) {
|
||
document.querySelector(`.tab-btn[data-tab="${tabParam}"]`).click();
|
||
} else {
|
||
fetchAllCases(); // 默认加载所有案件
|
||
}
|
||
}
|
||
|
||
// 设置事件监听器
|
||
function setupEventListeners() {
|
||
// 标签页切换
|
||
elements.tabs.forEach(tab => {
|
||
tab.addEventListener('click', () => {
|
||
const tabId = tab.getAttribute('data-tab');
|
||
elements.tabs.forEach(t => t.classList.remove('active', 'bg-primary-800', 'text-secondary'));
|
||
tab.classList.add('active', 'bg-primary-800', 'text-secondary');
|
||
elements.tabContents.forEach(content => content.classList.add('hidden'));
|
||
document.getElementById(tabId).classList.remove('hidden');
|
||
});
|
||
});
|
||
|
||
// 刷新按钮
|
||
elements.refreshBtn.addEventListener('click', refreshAllData);
|
||
|
||
// 主题切换
|
||
elements.themeToggle.addEventListener('click', toggleTheme);
|
||
|
||
// 表单提交
|
||
elements.CaseForm.addEventListener('submit', handleFormSubmit);
|
||
|
||
// 重置表单
|
||
elements.resetForm.addEventListener('click', resetForm);
|
||
|
||
// 搜索功能
|
||
elements.allCasesSearch.addEventListener('input', filterAllCases);
|
||
elements.myCasesSearch.addEventListener('input', filterMyCases);
|
||
elements.pendingCasesSearch.addEventListener('input', filterPendingCases);
|
||
|
||
// 原告类型切换
|
||
elements.plaintiffTypeRadios.forEach(radio => {
|
||
radio.addEventListener('change', togglePlaintiffType);
|
||
});
|
||
|
||
// 被告类型切换
|
||
elements.defendantTypeRadios.forEach(radio => {
|
||
radio.addEventListener('change', toggleDefendantType);
|
||
});
|
||
|
||
// 被告个人信息方式切换
|
||
elements.defendantPersonalMethodRadios.forEach(radio => {
|
||
radio.addEventListener('change', updateDefendantPersonalPlaceholder);
|
||
});
|
||
|
||
// 被告企业信息方式切换
|
||
elements.defendantEnterpriseMethodRadios.forEach(radio => {
|
||
radio.addEventListener('change', updateDefendantEnterprisePlaceholder);
|
||
});
|
||
|
||
// 验证企业权限
|
||
elements.verifyEnterpriseBtn.addEventListener('click', verifyEnterprisePermission);
|
||
|
||
// 诉讼请求添加
|
||
elements.addDemandBtn.addEventListener('click', addDemand);
|
||
elements.demandInput.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Enter') {
|
||
e.preventDefault();
|
||
addDemand();
|
||
}
|
||
});
|
||
|
||
// 证据添加
|
||
elements.addEvidenceBtn.addEventListener('click', addEvidence);
|
||
elements.evidenceInput.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Enter') {
|
||
e.preventDefault();
|
||
addEvidence();
|
||
}
|
||
});
|
||
|
||
// 被告信息输入验证(禁止|字符)
|
||
elements.defendantPersonalInfo.addEventListener('input', (e) => {
|
||
validateInputWithoutPipe(e.target);
|
||
});
|
||
elements.defendantEnterpriseInfo.addEventListener('input', (e) => {
|
||
validateInputWithoutPipe(e.target);
|
||
});
|
||
}
|
||
|
||
// 验证输入框不含|字符
|
||
function validateInputWithoutPipe(inputEl) {
|
||
if (inputEl.value.includes('|')) {
|
||
inputEl.classList.add('input-error');
|
||
// 自动移除|字符
|
||
inputEl.value = inputEl.value.replace(/\|/g, '');
|
||
showMessage('输入内容不能包含"|"字符', 'error');
|
||
} else {
|
||
inputEl.classList.remove('input-error');
|
||
}
|
||
}
|
||
|
||
// 切换原告类型显示
|
||
function togglePlaintiffType() {
|
||
const isPersonal = document.querySelector('input[name="plaintiffType"][value="personal"]').checked;
|
||
|
||
if (isPersonal) {
|
||
elements.plaintiffPersonalContainer.classList.remove('hidden');
|
||
elements.plaintiffEnterpriseContainer.classList.add('hidden');
|
||
elements.plaintiffUUID.value = state.currentUserInfo.uuid;
|
||
} else {
|
||
elements.plaintiffPersonalContainer.classList.add('hidden');
|
||
elements.plaintiffEnterpriseContainer.classList.remove('hidden');
|
||
elements.enterpriseVerifyResult.classList.add('hidden');
|
||
elements.enterpriseVerifyResult.textContent = '';
|
||
elements.plaintiffUUID.value = '';
|
||
}
|
||
}
|
||
|
||
// 切换被告类型显示
|
||
function toggleDefendantType() {
|
||
const defendantType = document.querySelector('input[name="defendantType"]:checked').value;
|
||
|
||
// 隐藏所有容器
|
||
elements.defendantPersonalContainer.classList.add('hidden');
|
||
elements.defendantEnterpriseContainer.classList.add('hidden');
|
||
elements.defendantSelfContainer.classList.add('hidden');
|
||
|
||
// 显示选中的类型容器
|
||
if (defendantType === 'personal') {
|
||
elements.defendantPersonalContainer.classList.remove('hidden');
|
||
updateDefendantPersonalPlaceholder();
|
||
} else if (defendantType === 'enterprise') {
|
||
elements.defendantEnterpriseContainer.classList.remove('hidden');
|
||
updateDefendantEnterprisePlaceholder();
|
||
} else if (defendantType === 'self') {
|
||
elements.defendantSelfContainer.classList.remove('hidden');
|
||
}
|
||
}
|
||
|
||
// 更新被告个人信息输入框占位符
|
||
function updateDefendantPersonalPlaceholder() {
|
||
const method = document.querySelector('input[name="defendantPersonalMethod"]:checked').value;
|
||
const placeholders = {
|
||
'uuid': '请输入被告UUID',
|
||
'gameName': '请输入被告游戏名',
|
||
'gvsds': '请输入被告GVSDS账户名'
|
||
};
|
||
elements.defendantPersonalInfo.placeholder = placeholders[method] || '请输入被告信息';
|
||
}
|
||
|
||
// 更新被告企业信息输入框占位符
|
||
function updateDefendantEnterprisePlaceholder() {
|
||
const method = document.querySelector('input[name="defendantEnterpriseMethod"]:checked').value;
|
||
const placeholders = {
|
||
'uuid': '请输入企业UUID',
|
||
'name': '请输入企业名称'
|
||
};
|
||
elements.defendantEnterpriseInfo.placeholder = placeholders[method] || '请输入企业信息';
|
||
}
|
||
|
||
// 验证企业权限
|
||
function verifyEnterprisePermission() {
|
||
const enterpriseUUID = elements.enterpriseUUID.value.trim();
|
||
|
||
if (!enterpriseUUID) {
|
||
showMessage('请输入企业UUID', 'error');
|
||
return;
|
||
}
|
||
|
||
// 验证企业UUID不含|字符
|
||
if (enterpriseUUID.includes('|')) {
|
||
showMessage('企业UUID不能包含"|"字符', 'error');
|
||
elements.enterpriseUUID.classList.add('input-error');
|
||
return;
|
||
}
|
||
elements.enterpriseUUID.classList.remove('input-error');
|
||
|
||
showLoading();
|
||
|
||
setTimeout(() => {
|
||
hideLoading();
|
||
const isVerified = Math.random() > 0.3;
|
||
|
||
if (isVerified) {
|
||
elements.enterpriseVerifyResult.textContent = `✅ 验证通过:您对企业 ${enterpriseUUID} 拥有操作权限`;
|
||
elements.enterpriseVerifyResult.className = 'mt-2 text-sm text-success';
|
||
elements.enterpriseVerifyResult.classList.remove('hidden');
|
||
elements.plaintiffUUID.value = enterpriseUUID;
|
||
} else {
|
||
elements.enterpriseVerifyResult.textContent = `❌ 验证失败:您对企业 ${enterpriseUUID} 没有操作权限`;
|
||
elements.enterpriseVerifyResult.className = 'mt-2 text-sm text-danger';
|
||
elements.enterpriseVerifyResult.classList.remove('hidden');
|
||
elements.plaintiffUUID.value = '';
|
||
}
|
||
}, 800);
|
||
}
|
||
|
||
// 添加诉讼请求
|
||
function addDemand() {
|
||
const demandText = elements.demandInput.value.trim();
|
||
|
||
if (!demandText) {
|
||
showMessage('请输入诉讼请求内容', 'error');
|
||
return;
|
||
}
|
||
|
||
// 验证诉讼请求不含|字符
|
||
if (demandText.includes('|')) {
|
||
showMessage('诉讼请求不能包含"|"字符', 'error');
|
||
elements.demandInput.classList.add('input-error');
|
||
return;
|
||
}
|
||
elements.demandInput.classList.remove('input-error');
|
||
|
||
const demandId = `demand_${Date.now()}`;
|
||
state.formData.demands.push({
|
||
id: demandId,
|
||
text: demandText
|
||
});
|
||
|
||
renderDemandsList();
|
||
elements.demandInput.value = '';
|
||
updateDemandsHiddenField();
|
||
}
|
||
|
||
// 渲染诉讼请求列表
|
||
function renderDemandsList() {
|
||
if (state.formData.demands.length === 0) {
|
||
elements.demandsList.innerHTML = `
|
||
<div class="text-gray-500 dark:text-gray-400 text-sm italic text-center py-4 border border-dashed rounded-lg">
|
||
尚未添加诉讼请求
|
||
</div>
|
||
`;
|
||
return;
|
||
}
|
||
|
||
elements.demandsList.innerHTML = state.formData.demands.map((demand, index) => `
|
||
<div class="flex items-center p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 list-item-enter">
|
||
<span class="flex-1 mr-2">${index + 1}. ${demand.text}</span>
|
||
<div class="flex space-x-1">
|
||
<button type="button" class="edit-demand btn-icon text-primary hover:bg-primary/10"
|
||
title="修改" data-id="${demand.id}">
|
||
<i class="fa fa-pencil"></i>
|
||
</button>
|
||
<button type="button" class="delete-demand btn-icon text-danger hover:bg-danger/10"
|
||
title="删除" data-id="${demand.id}">
|
||
<i class="fa fa-trash"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
|
||
attachDemandEventListeners();
|
||
}
|
||
|
||
// 为诉讼请求子项添加事件
|
||
function attachDemandEventListeners() {
|
||
// 修改诉讼请求
|
||
document.querySelectorAll('.edit-demand').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
const demandId = btn.getAttribute('data-id');
|
||
const demand = state.formData.demands.find(d => d.id === demandId);
|
||
|
||
if (demand) {
|
||
elements.demandInput.value = demand.text;
|
||
deleteDemand(demandId);
|
||
elements.demandInput.focus();
|
||
}
|
||
});
|
||
});
|
||
|
||
// 删除诉讼请求
|
||
document.querySelectorAll('.delete-demand').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
const demandId = btn.getAttribute('data-id');
|
||
if (confirm('确定要删除这条诉讼请求吗?')) {
|
||
deleteDemand(demandId);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// 删除诉讼请求
|
||
function deleteDemand(demandId) {
|
||
state.formData.demands = state.formData.demands.filter(d => d.id !== demandId);
|
||
renderDemandsList();
|
||
updateDemandsHiddenField();
|
||
}
|
||
|
||
// 更新诉讼请求隐藏字段
|
||
function updateDemandsHiddenField() {
|
||
const demandsText = state.formData.demands.map(d => d.text).join('|||');
|
||
elements.CaseDemands.value = demandsText;
|
||
}
|
||
|
||
// 添加证据
|
||
function addEvidence() {
|
||
const evidenceText = elements.evidenceInput.value.trim();
|
||
|
||
if (!evidenceText) {
|
||
showMessage('请输入证据信息', 'error');
|
||
return;
|
||
}
|
||
|
||
// 验证证据不含|字符
|
||
if (evidenceText.includes('|')) {
|
||
showMessage('证据信息不能包含"|"字符', 'error');
|
||
elements.evidenceInput.classList.add('input-error');
|
||
return;
|
||
}
|
||
elements.evidenceInput.classList.remove('input-error');
|
||
|
||
const evidenceId = `evidence_${Date.now()}`;
|
||
state.formData.evidences.push({
|
||
id: evidenceId,
|
||
text: evidenceText
|
||
});
|
||
|
||
renderEvidencesList();
|
||
elements.evidenceInput.value = '';
|
||
updateEvidencesHiddenField();
|
||
}
|
||
|
||
// 渲染证据列表
|
||
function renderEvidencesList() {
|
||
if (state.formData.evidences.length === 0) {
|
||
elements.evidencesList.innerHTML = `
|
||
<div class="text-gray-500 dark:text-gray-400 text-sm italic text-center py-4 border border-dashed rounded-lg">
|
||
尚未添加证据
|
||
</div>
|
||
`;
|
||
return;
|
||
}
|
||
|
||
elements.evidencesList.innerHTML = state.formData.evidences.map((evidence, index) => `
|
||
<div class="flex items-center p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 list-item-enter">
|
||
<span class="flex-1 mr-2">${index + 1}. ${evidence.text}</span>
|
||
<div class="flex space-x-1">
|
||
<button type="button" class="edit-evidence btn-icon text-primary hover:bg-primary/10"
|
||
title="修改" data-id="${evidence.id}">
|
||
<i class="fa fa-pencil"></i>
|
||
</button>
|
||
<button type="button" class="delete-evidence btn-icon text-danger hover:bg-danger/10"
|
||
title="删除" data-id="${evidence.id}">
|
||
<i class="fa fa-trash"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
|
||
attachEvidenceEventListeners();
|
||
}
|
||
|
||
// 为证据子项添加事件
|
||
function attachEvidenceEventListeners() {
|
||
// 修改证据
|
||
document.querySelectorAll('.edit-evidence').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
const evidenceId = btn.getAttribute('data-id');
|
||
const evidence = state.formData.evidences.find(e => e.id === evidenceId);
|
||
|
||
if (evidence) {
|
||
elements.evidenceInput.value = evidence.text;
|
||
deleteEvidence(evidenceId);
|
||
elements.evidenceInput.focus();
|
||
}
|
||
});
|
||
});
|
||
|
||
// 删除证据
|
||
document.querySelectorAll('.delete-evidence').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
const evidenceId = btn.getAttribute('data-id');
|
||
if (confirm('确定要删除这条证据吗?')) {
|
||
deleteEvidence(evidenceId);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// 删除证据
|
||
function deleteEvidence(evidenceId) {
|
||
state.formData.evidences = state.formData.evidences.filter(e => e.id !== evidenceId);
|
||
renderEvidencesList();
|
||
updateEvidencesHiddenField();
|
||
}
|
||
|
||
// 更新证据隐藏字段
|
||
function updateEvidencesHiddenField() {
|
||
const evidencesText = state.formData.evidences.map(e => e.text).join('|||');
|
||
elements.evidenceList.value = evidencesText;
|
||
}
|
||
|
||
// 检查主题偏好
|
||
function checkThemePreference() {
|
||
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||
document.documentElement.classList.add('dark');
|
||
} else {
|
||
document.documentElement.classList.remove('dark');
|
||
}
|
||
}
|
||
|
||
// 切换主题
|
||
function toggleTheme() {
|
||
document.documentElement.classList.toggle('dark');
|
||
localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
|
||
}
|
||
|
||
// 显示加载状态
|
||
function showLoading() {
|
||
state.isLoading = true;
|
||
elements.loading.classList.remove('hidden');
|
||
}
|
||
|
||
// 隐藏加载状态
|
||
function hideLoading() {
|
||
state.isLoading = false;
|
||
elements.loading.classList.add('hidden');
|
||
}
|
||
|
||
// 显示消息提示
|
||
function showMessage(text, type = 'info') {
|
||
const messageEl = elements.message;
|
||
messageEl.textContent = text;
|
||
messageEl.classList.remove('hidden', 'bg-info', 'bg-success', 'bg-danger', 'bg-pending');
|
||
|
||
switch(type) {
|
||
case 'success':
|
||
messageEl.classList.add('bg-success', 'text-white');
|
||
break;
|
||
case 'error':
|
||
messageEl.classList.add('bg-danger', 'text-white');
|
||
break;
|
||
case 'pending':
|
||
messageEl.classList.add('bg-pending', 'text-white');
|
||
break;
|
||
default:
|
||
messageEl.classList.add('bg-primary', 'text-white');
|
||
}
|
||
|
||
setTimeout(() => {
|
||
messageEl.classList.add('hidden');
|
||
}, 3000);
|
||
}
|
||
|
||
// 刷新所有数据
|
||
function refreshAllData() {
|
||
showLoading();
|
||
|
||
Promise.all([
|
||
fetchAllCases(true),
|
||
fetchMyCases(true),
|
||
fetchPendingCases(true)
|
||
]).then(() => {
|
||
hideLoading();
|
||
showMessage('数据已更新', 'success');
|
||
}).catch(error => {
|
||
hideLoading();
|
||
showMessage(`数据更新失败: ${error.message}`, 'error');
|
||
});
|
||
}
|
||
|
||
// 通用API请求函数
|
||
async function apiRequest(url, method = 'GET', data = null) {
|
||
try {
|
||
const options = {
|
||
method,
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
};
|
||
|
||
if (data) {
|
||
options.body = JSON.stringify(data);
|
||
}
|
||
|
||
const response = await fetch(url, options);
|
||
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP error! status: ${response.status}`);
|
||
}
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.status === 1) {
|
||
throw new Error(result.msg || '操作失败');
|
||
}
|
||
|
||
return result.data;
|
||
} catch (error) {
|
||
console.error('API请求错误:', error);
|
||
throw error;
|
||
}
|
||
}
|
||
|
||
// 获取所有案件
|
||
async function fetchAllCases(forceRefresh = false) {
|
||
if (!forceRefresh && state.allCases.length > 0) {
|
||
return state.allCases;
|
||
}
|
||
|
||
try {
|
||
const data = await apiRequest('/API/dcase.api');
|
||
state.allCases = data;
|
||
renderCases(state.allCases, elements.allCasesContainer);
|
||
return data;
|
||
} catch (error) {
|
||
showMessage(`获取所有案件失败: ${error.message}`, 'error');
|
||
throw error;
|
||
}
|
||
}
|
||
|
||
// 获取我的案件
|
||
async function fetchMyCases(forceRefresh = false) {
|
||
if (!forceRefresh && state.myCases.length > 0) {
|
||
return state.myCases;
|
||
}
|
||
|
||
try {
|
||
const data = await apiRequest('/API/myCase.api');
|
||
state.myCases = data;
|
||
renderCases(state.myCases, elements.myCasesContainer, true);
|
||
return data;
|
||
} catch (error) {
|
||
showMessage(`获取我的案件失败: ${error.message}`, 'error');
|
||
throw error;
|
||
}
|
||
}
|
||
|
||
// 获取未审核案件
|
||
async function fetchPendingCases(forceRefresh = false) {
|
||
if (!forceRefresh && state.pendingCases.length > 0) {
|
||
return state.pendingCases;
|
||
}
|
||
|
||
try {
|
||
const data = await apiRequest('/API/dCase.api');
|
||
state.pendingCases = data;
|
||
renderCases(state.pendingCases, elements.pendingCasesContainer, false, true);
|
||
return data;
|
||
} catch (error) {
|
||
showMessage(`获取未审核案件失败: ${error.message}`, 'error');
|
||
throw error;
|
||
}
|
||
}
|
||
|
||
// 渲染案件列表
|
||
function renderCases(Cases, container, isMyCase = false, isPending = false) {
|
||
if (!Cases || Cases.length === 0) {
|
||
container.innerHTML = `
|
||
<div class="flex flex-col items-center justify-center py-16 text-gray-500 dark:text-gray-400">
|
||
<i class="fa fa-folder-open-o text-5xl mb-4"></i>
|
||
<p class="text-lg">暂无相关案件数据</p>
|
||
</div>
|
||
`;
|
||
return;
|
||
}
|
||
|
||
container.innerHTML = Cases.map(CaseItem => `
|
||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden card-hover border border-gray-200 dark:border-gray-700">
|
||
<div class="p-5">
|
||
<div class="flex justify-between items-start mb-3">
|
||
<h3 class="text-lg font-bold text-primary dark:text-secondary">${CaseItem.Title}</h3>
|
||
<span class="px-2 py-1 text-xs rounded-full ${getCaseStatusClass(CaseItem.Status)}">
|
||
${getCaseStatusText(CaseItem.Status)}
|
||
</span>
|
||
</div>
|
||
|
||
<div class="text-sm text-gray-600 dark:text-gray-300 space-y-2 mb-4">
|
||
<p><span class="font-medium">案件编号:</span> ${CaseItem.CaseUUID}</p>
|
||
<p><span class="font-medium">案件类型:</span> ${getCaseTypeText(CaseItem.Type)}</p>
|
||
<p><span class="font-medium">原告:</span> ${CaseItem.Plaintiff}</p>
|
||
<p><span class="font-medium">被告:</span> ${CaseItem.Defendant || '本人'}</p>
|
||
<p class="line-clamp-2 mt-1"><span class="font-medium">案件简述:</span> ${CaseItem.Description || '无'}</p>
|
||
</div>
|
||
|
||
<div class="text-xs text-gray-500 dark:text-gray-400 mb-4">
|
||
<p>提交时间: ${formatDate(CaseItem.SubmitTime)}</p>
|
||
${CaseItem.UpdateTime ? `<p>更新时间: ${formatDate(CaseItem.UpdateTime)}</p>` : ''}
|
||
</div>
|
||
|
||
<div class="flex justify-end space-x-2 pt-2 border-t border-gray-100 dark:border-gray-700">
|
||
${isMyCase && CaseItem.Status === 'pending' ? `
|
||
<button class="edit-Case px-3 py-1 text-sm bg-accent text-white rounded hover:bg-accent/90 transition-colors"
|
||
data-uuid="${CaseItem.CaseUUID}">
|
||
<i class="fa fa-edit mr-1"></i>编辑
|
||
</button>
|
||
` : ''}
|
||
|
||
${isPending ? `
|
||
<button class="approve-Case px-3 py-1 text-sm bg-success text-white rounded hover:bg-success/90 transition-colors"
|
||
data-uuid="${CaseItem.CaseUUID}">
|
||
<i class="fa fa-check mr-1"></i>通过
|
||
</button>
|
||
` : ''}
|
||
|
||
<button class="view-Case px-3 py-1 text-sm bg-primary text-white rounded hover:bg-primary/90 transition-colors"
|
||
data-uuid="${CaseItem.CaseUUID}">
|
||
<i class="fa fa-eye mr-1"></i>查看详情
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
|
||
attachCaseActionListeners(container, isMyCase, isPending);
|
||
}
|
||
|
||
// 为案件操作按钮添加事件监听器
|
||
function attachCaseActionListeners(container, isMyCase, isPending) {
|
||
container.querySelectorAll('.view-Case').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
const CaseUUID = btn.getAttribute('data-uuid');
|
||
viewCaseDetails(CaseUUID);
|
||
});
|
||
});
|
||
|
||
if (isMyCase) {
|
||
container.querySelectorAll('.edit-Case').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
const CaseUUID = btn.getAttribute('data-uuid');
|
||
editCase(CaseUUID);
|
||
});
|
||
});
|
||
}
|
||
|
||
if (isPending) {
|
||
container.querySelectorAll('.approve-Case').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
const CaseUUID = btn.getAttribute('data-uuid');
|
||
approveCase(CaseUUID);
|
||
});
|
||
});
|
||
}
|
||
}
|
||
|
||
// 查看案件详情
|
||
function viewCaseDetails(CaseUUID) {
|
||
showMessage(`查看案件 ${CaseUUID} 的详情`, 'info');
|
||
}
|
||
|
||
// 编辑案件
|
||
function editCase(CaseUUID) {
|
||
const CaseToEdit = state.myCases.find(c => c.CaseUUID === CaseUUID);
|
||
if (!CaseToEdit) {
|
||
showMessage('未找到该案件', 'error');
|
||
return;
|
||
}
|
||
|
||
elements.CaseUUID.value = CaseToEdit.CaseUUID;
|
||
document.getElementById('CaseTitle').value = CaseToEdit.Title || '';
|
||
document.getElementById('CaseType').value = CaseToEdit.Type || '';
|
||
document.getElementById('CaseDescription').value = CaseToEdit.Description || '';
|
||
|
||
// 原告信息回显
|
||
if (CaseToEdit.CasePlaintiffType === 'enterprise') {
|
||
document.querySelector('input[name="plaintiffType"][value="enterprise"]').checked = true;
|
||
togglePlaintiffType();
|
||
elements.enterpriseUUID.value = CaseToEdit.CasePlaintiff || '';
|
||
elements.enterpriseVerifyResult.textContent = `✅ 验证通过:您对企业 ${CaseToEdit.CasePlaintiff} 拥有操作权限`;
|
||
elements.enterpriseVerifyResult.className = 'mt-2 text-sm text-success';
|
||
elements.enterpriseVerifyResult.classList.remove('hidden');
|
||
elements.plaintiffUUID.value = CaseToEdit.CasePlaintiff;
|
||
} else {
|
||
document.querySelector('input[name="plaintiffType"][value="personal"]').checked = true;
|
||
togglePlaintiffType();
|
||
}
|
||
|
||
// 被告信息回显
|
||
if (CaseToEdit.CaseDefendantType === 'self') {
|
||
document.querySelector('input[name="defendantType"][value="self"]').checked = true;
|
||
} else if (CaseToEdit.CaseDefendantType === 'enterprise') {
|
||
document.querySelector('input[name="defendantType"][value="enterprise"]').checked = true;
|
||
if (CaseToEdit.DefendantMethod === 'name') {
|
||
document.querySelector('input[name="defendantEnterpriseMethod"][value="name"]').checked = true;
|
||
} else {
|
||
document.querySelector('input[name="defendantEnterpriseMethod"][value="uuid"]').checked = true;
|
||
}
|
||
updateDefendantEnterprisePlaceholder();
|
||
elements.defendantEnterpriseInfo.value = CaseToEdit.CaseDefendant || '';
|
||
} else {
|
||
document.querySelector('input[name="defendantType"][value="personal"]').checked = true;
|
||
if (CaseToEdit.DefendantMethod) {
|
||
const radio = document.querySelector(`input[name="defendantPersonalMethod"][value="${CaseToEdit.DefendantMethod}"]`);
|
||
if (radio) radio.checked = true;
|
||
}
|
||
updateDefendantPersonalPlaceholder();
|
||
elements.defendantPersonalInfo.value = CaseToEdit.CaseDefendant || '';
|
||
}
|
||
toggleDefendantType();
|
||
|
||
// 诉讼请求回显
|
||
state.formData.demands = [];
|
||
if (CaseToEdit.Demands && CaseToEdit.Demands.length) {
|
||
CaseToEdit.Demands.forEach(text => {
|
||
state.formData.demands.push({
|
||
id: `demand_${Date.now()}_${Math.random().toString(36).substr(2, 5)}`,
|
||
text
|
||
});
|
||
});
|
||
}
|
||
renderDemandsList();
|
||
updateDemandsHiddenField();
|
||
|
||
// 证据回显
|
||
state.formData.evidences = [];
|
||
if (CaseToEdit.Evidences && CaseToEdit.Evidences.length) {
|
||
CaseToEdit.Evidences.forEach(text => {
|
||
state.formData.evidences.push({
|
||
id: `evidence_${Date.now()}_${Math.random().toString(36).substr(2, 5)}`,
|
||
text
|
||
});
|
||
});
|
||
}
|
||
renderEvidencesList();
|
||
updateEvidencesHiddenField();
|
||
|
||
// 切换到提起诉讼标签页
|
||
elements.tabs.forEach(tab => {
|
||
if (tab.getAttribute('data-tab') === 'new-Case') {
|
||
tab.click();
|
||
}
|
||
});
|
||
|
||
showMessage('请修改案件信息', 'info');
|
||
}
|
||
|
||
// 审核通过案件
|
||
async function approveCase(CaseUUID) {
|
||
if (!confirm(`确定要通过案件 ${CaseUUID} 的立案申请吗?`)) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
showLoading();
|
||
await apiRequest('/API/passCase.api', 'POST', { CaseUUID: CaseUUID });
|
||
hideLoading();
|
||
showMessage('案件已批准立案', 'success');
|
||
fetchPendingCases(true);
|
||
} catch (error) {
|
||
hideLoading();
|
||
showMessage(`批准失败: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
// 处理表单提交 - 核心修改:按新规则处理原告/被告字段
|
||
async function handleFormSubmit(e) {
|
||
e.preventDefault();
|
||
|
||
// 验证诉讼请求
|
||
if (state.formData.demands.length === 0) {
|
||
showMessage('请至少添加一项诉讼请求', 'error');
|
||
return;
|
||
}
|
||
|
||
// 1. 获取原告信息(类型和UUID)
|
||
const CasePlaintiffType = document.querySelector('input[name="plaintiffType"]:checked').value;
|
||
const CasePlaintiff = elements.plaintiffUUID.value.trim();
|
||
|
||
// 验证原告信息
|
||
if (!CasePlaintiff) {
|
||
showMessage('请完善原告信息并验证企业权限(如适用)', 'error');
|
||
return;
|
||
}
|
||
if (CasePlaintiff.includes('|')) {
|
||
showMessage('原告UUID不能包含"|"字符', 'error');
|
||
return;
|
||
}
|
||
|
||
// 2. 获取被告信息(类型和值)
|
||
const CaseDefendantType = document.querySelector('input[name="defendantType"]:checked').value;
|
||
let CaseDefendant = '';
|
||
|
||
// 根据被告类型获取对应值(本人模式值为空)
|
||
if (CaseDefendantType === 'personal') {
|
||
CaseDefendant = elements.defendantPersonalInfo.value.trim();
|
||
// 个人模式下允许为空但不推荐
|
||
if (!CaseDefendant) {
|
||
if (!confirm('被告信息为空,确定提交吗?')) return;
|
||
}
|
||
} else if (CaseDefendantType === 'enterprise') {
|
||
CaseDefendant = elements.defendantEnterpriseInfo.value.trim();
|
||
// 企业模式下允许为空但不推荐
|
||
if (!CaseDefendant) {
|
||
if (!confirm('被告信息为空,确定提交吗?')) return;
|
||
}
|
||
}
|
||
// 本人模式下保持CaseDefendant为空
|
||
|
||
|
||
// 3. 构建最终提交数据
|
||
const formData = {
|
||
CaseUUID: elements.CaseUUID.value || null,
|
||
CaseTitle: document.getElementById('CaseTitle').value.trim(),
|
||
CaseType: document.getElementById('CaseType').value,
|
||
// 原告信息(类型+UUID)
|
||
CasePlaintiffType: CasePlaintiffType, // personal/enterprise
|
||
CasePlaintiff: CasePlaintiff, // 原告UUID
|
||
// 被告信息(类型+值,本人模式值为空)
|
||
CaseDefendantType: CaseDefendantType, // personal/enterprise/self
|
||
CaseDefendant: CaseDefendant, // 被告值(为空表示本人)
|
||
CaseDescription: document.getElementById('CaseDescription').value.trim(),
|
||
CaseDemands: state.formData.demands.map(d => d.text),
|
||
CaseEvidences: state.formData.evidences.map(e => e.text)
|
||
};
|
||
|
||
try {
|
||
showLoading();
|
||
// 提交数据到API
|
||
await apiRequest('/API/NewCase.api', 'POST', formData);
|
||
hideLoading();
|
||
|
||
if (formData.CaseUUID) {
|
||
showMessage('案件已更新', 'success');
|
||
} else {
|
||
showMessage('案件已提交,等待审核', 'success');
|
||
}
|
||
|
||
resetForm();
|
||
fetchMyCases(true);
|
||
fetchPendingCases(true);
|
||
|
||
// 切换到"我的案件"标签页
|
||
elements.tabs.forEach(tab => {
|
||
if (tab.getAttribute('data-tab') === 'my-Cases') {
|
||
tab.click();
|
||
}
|
||
});
|
||
} catch (error) {
|
||
hideLoading();
|
||
showMessage(`提交失败: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
// 重置表单
|
||
function resetForm() {
|
||
elements.CaseForm.reset();
|
||
elements.CaseUUID.value = '';
|
||
|
||
// 重置原告信息
|
||
document.querySelector('input[name="plaintiffType"][value="personal"]').checked = true;
|
||
togglePlaintiffType();
|
||
|
||
// 重置被告信息
|
||
document.querySelector('input[name="defendantType"][value="personal"]').checked = true;
|
||
document.querySelector('input[name="defendantPersonalMethod"][value="uuid"]').checked = true;
|
||
toggleDefendantType();
|
||
updateDefendantPersonalPlaceholder();
|
||
|
||
// 重置诉讼请求和证据
|
||
state.formData.demands = [];
|
||
renderDemandsList();
|
||
updateDemandsHiddenField();
|
||
|
||
state.formData.evidences = [];
|
||
renderEvidencesList();
|
||
updateEvidencesHiddenField();
|
||
}
|
||
|
||
// 过滤所有案件
|
||
function filterAllCases() {
|
||
const searchTerm = elements.allCasesSearch.value.toLowerCase();
|
||
const filteredCases = state.allCases.filter(CaseItem =>
|
||
CaseItem.Title.toLowerCase().includes(searchTerm) ||
|
||
CaseItem.CaseUUID.toLowerCase().includes(searchTerm) ||
|
||
CaseItem.Plaintiff.toLowerCase().includes(searchTerm) ||
|
||
(CaseItem.Defendant && CaseItem.Defendant.toLowerCase().includes(searchTerm))
|
||
);
|
||
renderCases(filteredCases, elements.allCasesContainer);
|
||
}
|
||
|
||
// 过滤我的案件
|
||
function filterMyCases() {
|
||
const searchTerm = elements.myCasesSearch.value.toLowerCase();
|
||
const filteredCases = state.myCases.filter(CaseItem =>
|
||
CaseItem.Title.toLowerCase().includes(searchTerm) ||
|
||
CaseItem.CaseUUID.toLowerCase().includes(searchTerm) ||
|
||
CaseItem.Plaintiff.toLowerCase().includes(searchTerm) ||
|
||
(CaseItem.Defendant && CaseItem.Defendant.toLowerCase().includes(searchTerm))
|
||
);
|
||
renderCases(filteredCases, elements.myCasesContainer, true);
|
||
}
|
||
|
||
// 过滤未审核案件
|
||
function filterPendingCases() {
|
||
const searchTerm = elements.pendingCasesSearch.value.toLowerCase();
|
||
const filteredCases = state.pendingCases.filter(CaseItem =>
|
||
CaseItem.Title.toLowerCase().includes(searchTerm) ||
|
||
CaseItem.CaseUUID.toLowerCase().includes(searchTerm) ||
|
||
CaseItem.Plaintiff.toLowerCase().includes(searchTerm) ||
|
||
(CaseItem.Defendant && CaseItem.Defendant.toLowerCase().includes(searchTerm))
|
||
);
|
||
renderCases(filteredCases, elements.pendingCasesContainer, false, true);
|
||
}
|
||
|
||
// 辅助函数:格式化日期
|
||
function formatDate(dateString) {
|
||
if (!dateString) return '';
|
||
const date = new Date(dateString);
|
||
return date.toLocaleString();
|
||
}
|
||
|
||
// 辅助函数:获取案件状态文本
|
||
function getCaseStatusText(status) {
|
||
const statusMap = {
|
||
'pending': '待审核',
|
||
'approved': '已立案',
|
||
'processing': '审理中',
|
||
'completed': '已结案',
|
||
'rejected': '已驳回'
|
||
};
|
||
return statusMap[status] || status;
|
||
}
|
||
|
||
// 辅助函数:获取案件状态样式类
|
||
function getCaseStatusClass(status) {
|
||
const classMap = {
|
||
'pending': 'bg-pending/20 text-pending',
|
||
'approved': 'bg-success/20 text-success',
|
||
'processing': 'bg-primary/20 text-primary',
|
||
'completed': 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300',
|
||
'rejected': 'bg-danger/20 text-danger'
|
||
};
|
||
return classMap[status] || 'bg-gray-200 text-gray-700';
|
||
}
|
||
|
||
// 辅助函数:获取案件类型文本
|
||
function getCaseTypeText(type) {
|
||
const typeMap = {
|
||
'0': '民事案件',
|
||
'1': '刑事案件',
|
||
'2': '行政案件',
|
||
'3': '商事案件',
|
||
'4': '环境案件',
|
||
'5': '其他案件'
|
||
};
|
||
return typeMap[type] || type;
|
||
}
|
||
|
||
// 启动应用
|
||
document.addEventListener('DOMContentLoaded', init);
|
||
</script>
|
||
</body>
|
||
</html> |