403 lines
20 KiB
HTML
403 lines
20 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>中国烟草AI合同及卷宗审核系统 - 新增/编辑文档类型</title>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/2.5.0/remixicon.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
|
|
<!-- <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="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> |