重新构建路由和配置样式文件

This commit is contained in:
2025-03-26 10:04:27 +08:00
parent a42a9990bf
commit 97ccf5a077
141 changed files with 88034 additions and 179 deletions
+401
View File
@@ -0,0 +1,401 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>中国烟草AI合同及卷宗审核系统 - 新增/编辑文档类型</title>
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<!-- 引入外部CSS文件 -->
<link href="../css/main.css" rel="stylesheet">
<style>
.checkbox-group {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
}
.checkbox-item {
display: flex;
align-items: center;
padding: 8px 12px;
border: 1px solid #f0f0f0;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
}
.checkbox-item:hover {
border-color: var(--primary-color);
background-color: rgba(0, 104, 74, 0.05);
}
.checkbox-item.checked {
border-color: var(--primary-color);
background-color: rgba(0, 104, 74, 0.1);
}
.checkbox-item input {
margin-right: 8px;
}
/* 树形结构样式 */
.parent-checkbox-item {
background-color: #f9f9f9;
font-weight: 500;
}
.child-checkbox-item {
margin-left: 30px;
border-left: 3px solid #f0f0f0;
}
.expand-icon {
width: 22px;
height: 22px;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-right: 8px;
transition: all 0.2s;
}
.expand-icon:hover {
background-color: rgba(0, 104, 74, 0.1);
}
.group-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
margin-left: 8px;
}
.parent-badge {
background-color: rgba(0, 104, 74, 0.1);
color: var(--primary-color);
}
.child-badge {
background-color: rgba(0, 104, 74, 0.05);
color: var(--primary-color);
}
</style>
</head>
<body>
<div class="layout-container">
<!-- 侧边栏 -->
<div class="sidebar">
<div class="py-6 px-4 border-b border-gray-100">
<div class="flex items-center">
<i class="ri-file-search-line text-primary text-xl mr-2"></i>
<h2 class="text-lg font-medium">AI审核系统</h2>
</div>
</div>
<div class="py-4">
<div class="sidebar-menu-item">
<a href="#" class="flex items-center text-sm font-medium">
<i class="ri-dashboard-line mr-3"></i>
<span>首页</span>
</a>
</div>
<div class="sidebar-menu-item">
<a href="#" class="flex items-center text-sm font-medium">
<i class="ri-file-upload-line mr-3"></i>
<span>文件上传</span>
</a>
</div>
<div class="sidebar-menu-item active">
<a href="#" class="flex items-center text-sm font-medium">
<i class="ri-list-check-2 mr-3"></i>
<span>评查规则库</span>
</a>
</div>
<div class="sidebar-menu-item">
<a href="#" class="flex items-center text-sm font-medium">
<i class="ri-history-line mr-3"></i>
<span>审核历史</span>
</a>
</div>
<div class="sidebar-menu-item">
<a href="#" class="flex items-center text-sm font-medium">
<i class="ri-settings-3-line mr-3"></i>
<span>系统设置</span>
</a>
</div>
</div>
</div>
<!-- 主内容区 -->
<div class="main-content">
<!-- 面包屑导航 -->
<div class="breadcrumb">
<span class="breadcrumb-item">首页</span>
<span class="breadcrumb-item">评查规则库</span>
<span class="breadcrumb-item">文档类型管理</span>
<span class="breadcrumb-item" id="page-title">新增文档类型</span>
</div>
<!-- 页面头部 -->
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-medium" id="header-title">新增文档类型</h2>
<div>
<button class="ant-btn ant-btn-default mr-2" onclick="window.location.href='文档类型-列表.html'">
<i class="ri-arrow-left-line"></i> 返回
</button>
<button class="ant-btn ant-btn-primary" id="save-btn">
<i class="ri-save-line"></i> 保存
</button>
</div>
</div>
<!-- 表单 -->
<div class="ant-card">
<div class="ant-card-body">
<form id="type-form">
<div class="grid grid-cols-1 gap-6">
<div class="form-group">
<label class="form-label">文档类型名称 <span class="text-red-500">*</span></label>
<input type="text" class="form-input" id="type-name" name="name" placeholder="请输入文档类型名称" required>
<div class="text-sm text-secondary mt-1">例如:销售合同、采购合同、专卖许可证等</div>
</div>
<div class="form-group">
<label class="form-label">类型描述</label>
<textarea class="form-textarea" id="type-description" name="description" placeholder="请输入类型描述,介绍此类型文档的用途和特点" rows="3"></textarea>
</div>
<!-- 添加三个提示词模板选择 -->
<div class="form-group flex space-x-4">
<div class="w-full">
<label class="form-label">抽取提示词模板</label>
<select class="form-select" id="extraction-prompt-template" name="extraction_prompt_template">
<option value="">请选择抽取提示词模板</option>
<option value="1">行政处罚-抽取通用模板</option>
<option value="4">采购合同-乙方资质抽取</option>
<option value="5">合同-关键条款抽取</option>
<option value="6">烟草许可证-信息抽取</option>
</select>
<div class="text-sm text-secondary mt-1">选择用于从此类文档中抽取信息的提示词模板</div>
</div>
<div class="w-full">
<label class="form-label">评查提示词模板</label>
<select class="form-select" id="evaluation-prompt-template" name="evaluation_prompt_template">
<option value="">请选择评查提示词模板</option>
<option value="2">销售合同-甲方信息评估</option>
<option value="5">合同通用-关键条款评估</option>
<option value="10">行政处罚-合规性评估</option>
<option value="11">烟草许可证-完整性评估</option>
</select>
<div class="text-sm text-secondary mt-1">选择用于评估此类文档内容的提示词模板</div>
</div>
<div class="w-full">
<label class="form-label">总结提示词模板</label>
<select class="form-select" id="summary-prompt-template" name="summary_prompt_template">
<option value="">请选择总结提示词模板</option>
<option value="3">专卖许可证-摘要模板</option>
<option value="12">合同通用-摘要模板</option>
<option value="13">行政处罚-要点摘要</option>
<option value="14">采购合同-摘要模板</option>
</select>
<div class="text-sm text-secondary mt-1">选择用于生成此类文档摘要的提示词模板</div>
</div>
</div>
<div class="form-group">
<label class="form-label">关联评查点分组 <span class="text-red-500">*</span></label>
<div class="checkbox-group" id="groups-container">
<!-- 一级分组:合同基本要素检查 -->
<div class="checkbox-item parent-checkbox-item" data-group-id="1">
<span class="expand-icon" data-group-id="1">
<i class="ri-arrow-down-s-line text-primary"></i>
</span>
<input type="checkbox" id="group-1" name="checkpoint_group_ids" value="1">
<label for="group-1">合同基本要素检查</label>
<span class="group-badge parent-badge">一级分组</span>
</div>
<!-- 二级分组 -->
<div class="checkbox-item child-checkbox-item child-of-1" data-parent-id="1" data-group-id="2">
<input type="checkbox" id="group-2" name="checkpoint_group_ids" value="2">
<label for="group-2">必备要素检查</label>
<span class="group-badge child-badge">二级分组</span>
</div>
<!-- 二级分组 -->
<div class="checkbox-item child-checkbox-item child-of-1" data-parent-id="1" data-group-id="3">
<input type="checkbox" id="group-3" name="checkpoint_group_ids" value="3">
<label for="group-3">合同主体检查</label>
<span class="group-badge child-badge">二级分组</span>
</div>
<!-- 一级分组:销售合同专项检查 -->
<div class="checkbox-item parent-checkbox-item" data-group-id="4">
<span class="expand-icon" data-group-id="4">
<i class="ri-arrow-right-s-line text-primary"></i>
</span>
<input type="checkbox" id="group-4" name="checkpoint_group_ids" value="4">
<label for="group-4">销售合同专项检查</label>
<span class="group-badge parent-badge">一级分组</span>
</div>
<!-- 二级分组(默认隐藏) -->
<div class="checkbox-item child-checkbox-item child-of-4 hidden" data-parent-id="4" data-group-id="6">
<input type="checkbox" id="group-6" name="checkpoint_group_ids" value="6">
<label for="group-6">付款条件检查</label>
<span class="group-badge child-badge">二级分组</span>
</div>
<!-- 一级分组:行政处罚规范性检查 -->
<div class="checkbox-item parent-checkbox-item" data-group-id="5">
<span class="expand-icon" data-group-id="5">
<i class="ri-arrow-right-s-line text-primary"></i>
</span>
<input type="checkbox" id="group-5" name="checkpoint_group_ids" value="5">
<label for="group-5">行政处罚规范性检查</label>
<span class="group-badge parent-badge">一级分组</span>
</div>
</div>
<div class="text-sm text-secondary mt-2">选择与此文档类型关联的评查点分组,文档上传后将应用这些分组中的评查点进行审核</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 获取页面参数
const urlParams = new URLSearchParams(window.location.search);
const typeId = urlParams.get('id');
const typeName = urlParams.get('name');
// 判断是新增还是编辑模式
if (typeId) {
document.getElementById('page-title').textContent = '编辑文档类型';
document.getElementById('header-title').textContent = '编辑文档类型';
// 加载文档类型数据
// 实际应用中应通过AJAX请求获取数据
if (typeName) {
document.getElementById('type-name').value = decodeURIComponent(typeName);
}
// 模拟加载数据
if (typeId === '1') { // 销售合同
document.getElementById('type-description').value = '烟草产品销售相关的合同文档';
document.getElementById('group-1').checked = true;
document.getElementById('group-4').checked = true;
document.getElementById('group-1').closest('.checkbox-item').classList.add('checked');
document.getElementById('group-4').closest('.checkbox-item').classList.add('checked');
} else if (typeId === '2') { // 采购合同
document.getElementById('type-description').value = '烟草企业采购设备及原材料相关的合同文档';
document.getElementById('group-1').checked = true;
document.getElementById('group-1').closest('.checkbox-item').classList.add('checked');
}
}
// 复选框样式交互
document.querySelectorAll('.checkbox-item').forEach(item => {
item.addEventListener('click', function(e) {
// 如果点击的是展开/收起图标,不处理选中状态
if (e.target.closest('.expand-icon')) {
return;
}
if (e.target.tagName !== 'INPUT') {
const checkbox = this.querySelector('input[type="checkbox"]');
checkbox.checked = !checkbox.checked;
if (checkbox.checked) {
this.classList.add('checked');
} else {
this.classList.remove('checked');
}
} else {
if (e.target.checked) {
this.classList.add('checked');
} else {
this.classList.remove('checked');
}
}
});
});
// 展开/收起功能
document.querySelectorAll('.expand-icon').forEach(icon => {
icon.addEventListener('click', function(e) {
e.stopPropagation(); // 阻止事件冒泡,避免触发父元素的click事件
const groupId = this.getAttribute('data-group-id');
const childItems = document.querySelectorAll(`.child-of-${groupId}`);
const iconElement = this.querySelector('i');
if (iconElement.classList.contains('ri-arrow-right-s-line')) {
// 展开
childItems.forEach(item => item.classList.remove('hidden'));
iconElement.classList.remove('ri-arrow-right-s-line');
iconElement.classList.add('ri-arrow-down-s-line');
} else {
// 收起
childItems.forEach(item => item.classList.add('hidden'));
iconElement.classList.remove('ri-arrow-down-s-line');
iconElement.classList.add('ri-arrow-right-s-line');
}
});
});
// 保存按钮点击事件
document.getElementById('save-btn').addEventListener('click', function() {
const form = document.getElementById('type-form');
// 表单验证
if (!form.checkValidity()) {
form.reportValidity();
return;
}
// 获取表单数据
const typeName = document.getElementById('type-name').value;
const typeDescription = document.getElementById('type-description').value;
// 获取选中的评查点分组ID
const selectedGroups = Array.from(
document.querySelectorAll('input[name="checkpoint_group_ids"]:checked')
).map(checkbox => checkbox.value);
if (selectedGroups.length === 0) {
alert('请至少选择一个关联的评查点分组');
return;
}
// 构建要提交的数据
const formData = {
id: typeId || null,
name: typeName,
description: typeDescription,
checkpoint_group_ids: selectedGroups
};
console.log('提交数据:', formData);
// 实际应用中应通过AJAX提交数据
alert('保存成功!');
window.location.href = '文档类型列表.html';
});
// 页面加载时默认展开第一个分组
document.querySelector('.expand-icon[data-group-id="1"]').click();
});
</script>
</body>
</html>