TanWenyan/leaudit-platform-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
yorn
2025-03-26 10:04:27 +08:00
parent a42a9990bf
commit 97ccf5a077
141 changed files with 88034 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/评查点分组-编辑.html
+534
View File
@@ -0,0 +1,534 @@
<!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>