534 lines
22 KiB
HTML
534 lines
22 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://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>
|
|
/* 表单布局优化 */
|
|
.form-container {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.form-section {
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
margin-bottom: 24px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.form-section:hover {
|
|
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.form-section-header {
|
|
padding: 16px 24px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.form-section-header h3 {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
margin: 0;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.form-section-header i {
|
|
margin-right: 10px;
|
|
color: var(--primary-color);
|
|
font-size: 18px;
|
|
}
|
|
|
|
.form-section-body {
|
|
padding: 24px;
|
|
}
|
|
|
|
/* 表单组件优化 */
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.form-input,
|
|
.form-select,
|
|
.form-textarea {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 4px;
|
|
transition: all 0.3s;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.form-input:hover,
|
|
.form-select:hover,
|
|
.form-textarea:hover {
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.form-input:focus,
|
|
.form-select:focus,
|
|
.form-textarea:focus {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 2px rgba(0, 104, 74, 0.1);
|
|
outline: none;
|
|
}
|
|
|
|
.form-textarea {
|
|
min-height: 120px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.form-tip {
|
|
margin-top: 6px;
|
|
font-size: 12px;
|
|
color: #8c8c8c;
|
|
}
|
|
|
|
.form-radio-group {
|
|
display: flex;
|
|
gap: 24px;
|
|
}
|
|
|
|
.form-radio-item {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-radio {
|
|
margin-right: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 按钮样式优化 */
|
|
.btn-container {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.ant-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.ant-btn i {
|
|
margin-right: 6px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* 必填标记样式 */
|
|
.required-mark {
|
|
color: #ff4d4f;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
/* 表单布局辅助类 */
|
|
.form-row {
|
|
display: flex;
|
|
gap: 24px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.form-col {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* 提示信息增强 */
|
|
.field-message {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 16px;
|
|
background-color: rgba(0, 104, 74, 0.05);
|
|
border-radius: 4px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.field-message i {
|
|
font-size: 18px;
|
|
margin-right: 10px;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.field-message p {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
}
|
|
</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">
|
|
<a href="#" class="breadcrumb-item">首页</a>
|
|
<a href="#" class="breadcrumb-item">评查规则库</a>
|
|
<a href="评查点分组列表.html" class="breadcrumb-item">评查点分组管理</a>
|
|
<span class="breadcrumb-item" id="page-title">新增分组</span>
|
|
</div>
|
|
|
|
<!-- 页面头部 -->
|
|
<div class="flex justify-between items-center mb-6">
|
|
<div>
|
|
<h2 class="text-xl font-medium mb-1" id="header-title">新增评查点分组</h2>
|
|
<p class="text-sm text-secondary">创建新的评查点分组，用于组织管理评查点</p>
|
|
</div>
|
|
<div class="flex">
|
|
<button class="ant-btn ant-btn-default mr-3" 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="form-container">
|
|
<!-- 提示信息 -->
|
|
<div class="field-message">
|
|
<i class="ri-information-line"></i>
|
|
<p>评查点分组用于对评查点进行分类管理，合理的分组结构有助于更高效地组织和查找评查点。</p>
|
|
</div>
|
|
|
|
<!-- 表单内容 -->
|
|
<form id="group-form">
|
|
<input type="hidden" id="group-id">
|
|
|
|
<!-- 基本信息区域 -->
|
|
<div class="form-section">
|
|
<div class="form-section-header">
|
|
<i class="ri-file-info-line"></i>
|
|
<h3>基本信息</h3>
|
|
</div>
|
|
<div class="form-section-body">
|
|
<!-- 分组类型选择 -->
|
|
<div class="form-group">
|
|
<label class="form-label">
|
|
分组类型 <span class="required-mark">*</span>
|
|
</label>
|
|
<div class="form-radio-group">
|
|
<label class="form-radio-item">
|
|
<input type="radio" name="group-type" class="form-radio" value="primary" checked>
|
|
<span>一级分组</span>
|
|
</label>
|
|
<label class="form-radio-item">
|
|
<input type="radio" name="group-type" class="form-radio" value="secondary">
|
|
<span>二级分组</span>
|
|
</label>
|
|
</div>
|
|
<div class="form-tip">一级分组作为顶层分类，二级分组需要选择所属的一级分组</div>
|
|
</div>
|
|
|
|
<!-- 上级分组选择 -->
|
|
<div id="parent-group-container" class="form-group hidden">
|
|
<label class="form-label">
|
|
上级分组 <span class="required-mark">*</span>
|
|
</label>
|
|
<select class="form-select" id="parent-group">
|
|
<option value="">请选择上级分组</option>
|
|
<option value="1">合同基本要素检查</option>
|
|
<option value="4">销售合同专项检查</option>
|
|
<option value="5">行政处罚规范性检查</option>
|
|
</select>
|
|
<div class="form-tip">选择此分组所属的上级分组</div>
|
|
</div>
|
|
|
|
<!-- 分组编码和名称 -->
|
|
<div class="form-row">
|
|
<div class="form-col">
|
|
<div class="form-group">
|
|
<label class="form-label">
|
|
分组编码 <span class="required-mark">*</span>
|
|
</label>
|
|
<input type="text" class="form-input" id="group-code" placeholder="请输入分组编码，如contract-base">
|
|
<div class="form-tip">编码只能包含字母、数字和连字符，且必须唯一</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-col">
|
|
<div class="form-group">
|
|
<label class="form-label">
|
|
分组名称 <span class="required-mark">*</span>
|
|
</label>
|
|
<input type="text" class="form-input" id="group-name" placeholder="请输入分组名称，如合同基本要素检查">
|
|
<div class="form-tip">请使用简洁明了的名称，不超过30个字符</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 详细配置区域 -->
|
|
<div class="form-section">
|
|
<div class="form-section-header">
|
|
<i class="ri-settings-4-line"></i>
|
|
<h3>详细配置</h3>
|
|
</div>
|
|
<div class="form-section-body">
|
|
<!-- 分组描述 -->
|
|
<div class="form-group">
|
|
<label class="form-label">分组描述</label>
|
|
<textarea class="form-textarea" id="group-description" placeholder="请输入分组描述，包括适用场景、分组目的等"></textarea>
|
|
<div class="form-tip">详细描述有助于其他用户了解该分组的用途</div>
|
|
</div>
|
|
|
|
<!-- 是否启用 -->
|
|
<div class="form-group" style="max-width: 400px;">
|
|
<label class="form-label">状态</label>
|
|
<select class="form-select" id="group-enabled">
|
|
<option value="true">启用</option>
|
|
<option value="false">禁用</option>
|
|
</select>
|
|
<div class="form-tip">禁用状态的分组及其下的评查点将不会参与评查</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 提交按钮区 -->
|
|
<div class="flex justify-end gap-3 mb-10 mt-6">
|
|
<button type="button" class="ant-btn ant-btn-default" onclick="window.location.href='评查点分组列表.html'">
|
|
<i class="ri-close-line"></i> 取消
|
|
</button>
|
|
<button type="button" class="ant-btn ant-btn-primary" id="footer-save-btn">
|
|
<i class="ri-save-line"></i> 保存分组
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 获取URL参数
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const groupId = urlParams.get('id');
|
|
|
|
// 根据是否有ID判断是新增还是编辑
|
|
if (groupId) {
|
|
document.getElementById('page-title').textContent = '编辑分组';
|
|
document.getElementById('header-title').textContent = '编辑评查点分组';
|
|
document.getElementById('group-id').value = groupId;
|
|
|
|
// 模拟加载数据（实际应从API获取）
|
|
loadGroupData(groupId);
|
|
}
|
|
|
|
// 分组类型切换事件
|
|
const groupTypeRadios = document.querySelectorAll('input[name="group-type"]');
|
|
const parentGroupContainer = document.getElementById('parent-group-container');
|
|
|
|
groupTypeRadios.forEach(radio => {
|
|
radio.addEventListener('change', function() {
|
|
if (this.value === 'secondary') {
|
|
parentGroupContainer.classList.remove('hidden');
|
|
} else {
|
|
parentGroupContainer.classList.add('hidden');
|
|
document.getElementById('parent-group').value = '';
|
|
}
|
|
});
|
|
});
|
|
|
|
// 保存按钮点击事件
|
|
const saveButtons = document.querySelectorAll('#save-btn, #footer-save-btn');
|
|
saveButtons.forEach(btn => {
|
|
btn.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
// 表单验证
|
|
if (validateForm()) {
|
|
// 提交表单
|
|
saveGroup();
|
|
}
|
|
});
|
|
});
|
|
|
|
// 表单验证函数
|
|
function validateForm() {
|
|
const code = document.getElementById('group-code').value.trim();
|
|
const name = document.getElementById('group-name').value.trim();
|
|
const groupType = document.querySelector('input[name="group-type"]:checked').value;
|
|
|
|
if (!code) {
|
|
alert('请输入分组编码');
|
|
document.getElementById('group-code').focus();
|
|
return false;
|
|
}
|
|
|
|
// 编码格式验证
|
|
if (!/^[a-zA-Z0-9\-]+$/.test(code)) {
|
|
alert('分组编码只能包含字母、数字和连字符');
|
|
document.getElementById('group-code').focus();
|
|
return false;
|
|
}
|
|
|
|
if (!name) {
|
|
alert('请输入分组名称');
|
|
document.getElementById('group-name').focus();
|
|
return false;
|
|
}
|
|
|
|
// 二级分组需要选择上级分组
|
|
if (groupType === 'secondary') {
|
|
const parentGroup = document.getElementById('parent-group').value;
|
|
if (!parentGroup) {
|
|
alert('请选择上级分组');
|
|
document.getElementById('parent-group').focus();
|
|
return false;
|
|
}
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
// 保存分组函数
|
|
function saveGroup() {
|
|
const groupData = {
|
|
id: document.getElementById('group-id').value,
|
|
code: document.getElementById('group-code').value.trim(),
|
|
name: document.getElementById('group-name').value.trim(),
|
|
description: document.getElementById('group-description').value.trim(),
|
|
is_enabled: document.getElementById('group-enabled').value === 'true',
|
|
pid: null
|
|
};
|
|
|
|
// 如果是二级分组，设置pid
|
|
if (document.querySelector('input[name="group-type"]:checked').value === 'secondary') {
|
|
groupData.pid = document.getElementById('parent-group').value;
|
|
}
|
|
|
|
// 实际应调用API保存数据
|
|
console.log('保存分组数据:', groupData);
|
|
|
|
// 模拟保存成功
|
|
alert(groupData.id ? '分组更新成功！' : '分组添加成功！');
|
|
window.location.href = '评查点分组列表.html';
|
|
}
|
|
|
|
// 加载分组数据函数
|
|
function loadGroupData(id) {
|
|
// 实际应从API获取数据
|
|
// 模拟数据
|
|
const demoData = {
|
|
1: {
|
|
code: 'contract-base',
|
|
name: '合同基本要素检查',
|
|
description: '检查合同基本要素是否完整规范',
|
|
is_enabled: true,
|
|
pid: null
|
|
},
|
|
2: {
|
|
code: 'essential-elements',
|
|
name: '必备要素检查',
|
|
description: '检查合同中的必要信息项是否齐全',
|
|
is_enabled: true,
|
|
pid: 1
|
|
},
|
|
3: {
|
|
code: 'contract-parties',
|
|
name: '合同主体检查',
|
|
description: '检查合同主体信息是否规范',
|
|
is_enabled: true,
|
|
pid: 1
|
|
},
|
|
4: {
|
|
code: 'contract-sales',
|
|
name: '销售合同专项检查',
|
|
description: '针对销售合同的专项合规检查',
|
|
is_enabled: true,
|
|
pid: null
|
|
},
|
|
5: {
|
|
code: 'punishment',
|
|
name: '行政处罚规范性检查',
|
|
description: '对行政处罚文书的合规性检查',
|
|
is_enabled: false,
|
|
pid: null
|
|
}
|
|
};
|
|
|
|
// 填充表单
|
|
if (demoData[id]) {
|
|
const data = demoData[id];
|
|
document.getElementById('group-code').value = data.code;
|
|
document.getElementById('group-name').value = data.name;
|
|
document.getElementById('group-description').value = data.description || '';
|
|
document.getElementById('group-enabled').value = data.is_enabled ? 'true' : 'false';
|
|
|
|
// 设置分组类型和上级分组
|
|
if (data.pid) {
|
|
document.querySelector('input[name="group-type"][value="secondary"]').checked = true;
|
|
document.getElementById('parent-group-container').classList.remove('hidden');
|
|
document.getElementById('parent-group').value = data.pid;
|
|
} else {
|
|
document.querySelector('input[name="group-type"][value="primary"]').checked = true;
|
|
document.getElementById('parent-group-container').classList.add('hidden');
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |