566 lines
23 KiB
HTML
566 lines
23 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>
|
|
.document-preview {
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
height: 400px;
|
|
}
|
|
|
|
.preview-toolbar {
|
|
padding: 8px 16px;
|
|
background-color: #f9f9f9;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.preview-content {
|
|
height: calc(100% - 44px);
|
|
overflow: auto;
|
|
padding: 16px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.preview-placeholder {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
color: #999;
|
|
}
|
|
|
|
.preview-placeholder i {
|
|
font-size: 48px;
|
|
margin-bottom: 16px;
|
|
color: #ddd;
|
|
}
|
|
|
|
.file-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.document-info {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.document-icon {
|
|
font-size: 32px;
|
|
margin-right: 16px;
|
|
padding: 8px;
|
|
background-color: #f9f9f9;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.document-details {
|
|
flex: 1;
|
|
}
|
|
|
|
.document-name {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.document-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 16px;
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.meta-item i {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.status-pending {
|
|
background-color: #E6F7FF;
|
|
color: #1890FF;
|
|
}
|
|
|
|
.status-processing {
|
|
background-color: #FFF7E6;
|
|
color: #FA8C16;
|
|
}
|
|
|
|
.status-pass {
|
|
background-color: #F6FFED;
|
|
color: #52C41A;
|
|
}
|
|
|
|
.status-warning {
|
|
background-color: #FFFBE6;
|
|
color: #FAAD14;
|
|
}
|
|
|
|
.status-fail {
|
|
background-color: #FFF1F0;
|
|
color: #F5222D;
|
|
}
|
|
|
|
.alert {
|
|
padding: 12px 16px;
|
|
border-radius: 4px;
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.alert-success {
|
|
background-color: #f6ffed;
|
|
border: 1px solid #b7eb8f;
|
|
color: #52c41a;
|
|
}
|
|
|
|
.alert-info {
|
|
background-color: #e6f7ff;
|
|
border: 1px solid #91d5ff;
|
|
color: #1890ff;
|
|
}
|
|
|
|
.alert-warning {
|
|
background-color: #fffbe6;
|
|
border: 1px solid #ffe58f;
|
|
color: #faad14;
|
|
}
|
|
|
|
.alert-error {
|
|
background-color: #fff2f0;
|
|
border: 1px solid #ffccc7;
|
|
color: #ff4d4f;
|
|
}
|
|
|
|
.history-timeline {
|
|
position: relative;
|
|
margin-top: 20px;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.history-timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 8px;
|
|
bottom: 8px;
|
|
width: 2px;
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.timeline-item {
|
|
position: relative;
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.timeline-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background-color: var(--primary-color);
|
|
left: -24px;
|
|
top: 6px;
|
|
}
|
|
|
|
.timeline-item:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.timeline-time {
|
|
font-size: 12px;
|
|
color: #999;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.timeline-content {
|
|
background-color: #f9f9f9;
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
}
|
|
</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 active">
|
|
<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">
|
|
<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">
|
|
<a href="文档-列表.html" class="text-primary hover:underline">文档列表</a>
|
|
</span>
|
|
<span class="breadcrumb-item">修改文档</span>
|
|
</div>
|
|
|
|
<!-- 页面头部 -->
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-xl font-medium">修改文档信息</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 mb-4">
|
|
<div class="ant-card-body">
|
|
<div class="document-info">
|
|
<div class="document-icon">
|
|
<i class="ri-file-pdf-line text-red-500"></i>
|
|
</div>
|
|
<div class="document-details">
|
|
<div class="document-name" id="doc-name">2023年度烟草销售框架合同.pdf</div>
|
|
<div class="document-meta">
|
|
<div class="meta-item">
|
|
<i class="ri-file-list-line"></i>
|
|
<span id="doc-type">销售合同</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<i class="ri-time-line"></i>
|
|
<span id="upload-time">2023-10-15 15:30</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<i class="ri-hard-drive-line"></i>
|
|
<span id="file-size">2.5 MB</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="status-badge status-pending" id="doc-status">待审核</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="alert alert-info mb-4">
|
|
<i class="ri-information-line mr-2"></i> 您可以修改此文档的基本信息，但不能更改文档内容。如需修改内容，请删除后重新上传新文档。
|
|
</div>
|
|
|
|
<form id="edit-form">
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<div class="form-group">
|
|
<label class="form-label">文档类型 <span class="text-red-500">*</span></label>
|
|
<select class="form-select" id="edit-doc-type" required>
|
|
<option value="1">销售合同</option>
|
|
<option value="2">采购合同</option>
|
|
<option value="3">专卖许可证</option>
|
|
<option value="4">行政处罚决定书</option>
|
|
<option value="5">承包协议</option>
|
|
</select>
|
|
<div class="text-sm text-secondary mt-1">更改文档类型将重新应用对应的评查规则</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">文档编号</label>
|
|
<input type="text" class="form-input" id="edit-doc-number" placeholder="请输入合同编号、许可证号等" value="XS20230001">
|
|
<div class="text-sm text-secondary mt-1">如无编号可留空</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">状态 <span class="text-red-500">*</span></label>
|
|
<select class="form-select" id="edit-doc-status" required>
|
|
<option value="pending">待审核</option>
|
|
<option value="processing">审核中</option>
|
|
<option value="pass">通过</option>
|
|
<option value="warning">警告</option>
|
|
<option value="fail">不通过</option>
|
|
</select>
|
|
<div class="text-sm text-secondary mt-1">更改状态可能会影响此文档在列表中的显示和排序</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">文档属性</label>
|
|
<div class="flex items-center mt-2">
|
|
<label class="switch mr-2">
|
|
<input type="checkbox" id="test-document-toggle">
|
|
<span class="slider"></span>
|
|
</label>
|
|
<span>标记为测试文档（不计入正式统计）</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group col-span-2">
|
|
<label class="form-label">备注信息</label>
|
|
<textarea class="form-textarea" id="edit-doc-remark" placeholder="可输入文档的相关描述或备注信息" rows="3">此合同为2023年度与XX公司的销售框架协议，适用于全年的烟草销售业务。</textarea>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 文档预览 -->
|
|
<div class="ant-card mb-4">
|
|
<div class="ant-card-header">
|
|
<div class="ant-card-title">文档预览</div>
|
|
</div>
|
|
<div class="ant-card-body">
|
|
<div class="document-preview">
|
|
<div class="preview-toolbar">
|
|
<div class="flex items-center">
|
|
<i class="ri-file-pdf-line text-red-500 mr-1"></i>
|
|
<span>2023年度烟草销售框架合同.pdf</span>
|
|
</div>
|
|
<div>
|
|
<button class="ant-btn ant-btn-text ant-btn-sm">
|
|
<i class="ri-download-line"></i> 下载
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="preview-content">
|
|
<div class="preview-placeholder">
|
|
<i class="ri-file-pdf-line"></i>
|
|
<p>预览功能暂不可用</p>
|
|
<p class="text-xs mt-2">PDF文件需要外部查看器支持</p>
|
|
<button class="ant-btn ant-btn-primary ant-btn-sm mt-4">
|
|
<i class="ri-external-link-line"></i> 在新窗口打开
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 修改历史 -->
|
|
<div class="ant-card">
|
|
<div class="ant-card-header">
|
|
<div class="ant-card-title">修改历史</div>
|
|
</div>
|
|
<div class="ant-card-body">
|
|
<div class="history-timeline">
|
|
<div class="timeline-item">
|
|
<div class="timeline-time">2023-10-15 15:30</div>
|
|
<div class="timeline-content">
|
|
<div><strong>系统</strong> 创建了此文档</div>
|
|
<div class="text-xs text-secondary mt-1">首次上传文档，文档类型：销售合同，状态：待审核</div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-time">2023-10-15 16:45</div>
|
|
<div class="timeline-content">
|
|
<div><strong>张三</strong> 启动了文档审核</div>
|
|
<div class="text-xs text-secondary mt-1">状态由"待审核"变更为"审核中"</div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-time">2023-10-15 17:20</div>
|
|
<div class="timeline-content">
|
|
<div><strong>系统</strong> 完成了文档审核</div>
|
|
<div class="text-xs text-secondary mt-1">状态由"审核中"变更为"通过"，未发现问题</div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-time">2023-10-16 09:10</div>
|
|
<div class="timeline-content">
|
|
<div><strong>李四</strong> 修改了文档属性</div>
|
|
<div class="text-xs text-secondary mt-1">添加了备注信息，完善了文档编号</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 初始化表单状态
|
|
const editDocType = document.getElementById('edit-doc-type');
|
|
const editDocNumber = document.getElementById('edit-doc-number');
|
|
const editDocStatus = document.getElementById('edit-doc-status');
|
|
const editDocRemark = document.getElementById('edit-doc-remark');
|
|
const testDocumentToggle = document.getElementById('test-document-toggle');
|
|
const saveBtn = document.getElementById('save-btn');
|
|
|
|
// 从URL获取文档ID
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const docId = urlParams.get('id') || '1'; // 默认使用ID 1
|
|
|
|
// 实际应用中，应该使用AJAX请求获取文档数据
|
|
// 以下是模拟数据
|
|
const documentData = {
|
|
id: docId,
|
|
name: '2023年度烟草销售框架合同.pdf',
|
|
type_id: '1', // 销售合同
|
|
document_number: 'XS20230001',
|
|
file_size: 2.5 * 1024 * 1024, // 2.5MB in bytes
|
|
upload_time: '2023-10-15 15:30',
|
|
is_test_document: false,
|
|
status: 'pass',
|
|
remark: '此合同为2023年度与XX公司的销售框架协议，适用于全年的烟草销售业务。'
|
|
};
|
|
|
|
// 填充表单数据
|
|
editDocType.value = documentData.type_id;
|
|
editDocNumber.value = documentData.document_number;
|
|
editDocStatus.value = documentData.status;
|
|
editDocRemark.value = documentData.remark;
|
|
testDocumentToggle.checked = documentData.is_test_document;
|
|
|
|
// 更新显示的文档状态徽章
|
|
const docStatusBadge = document.getElementById('doc-status');
|
|
updateStatusBadge(docStatusBadge, documentData.status);
|
|
|
|
// 状态变更时更新徽章
|
|
editDocStatus.addEventListener('change', function() {
|
|
updateStatusBadge(docStatusBadge, this.value);
|
|
});
|
|
|
|
// 保存按钮点击事件
|
|
saveBtn.addEventListener('click', function() {
|
|
// 表单验证
|
|
const form = document.getElementById('edit-form');
|
|
if (!form.checkValidity()) {
|
|
form.reportValidity();
|
|
return;
|
|
}
|
|
|
|
// 收集表单数据
|
|
const formData = {
|
|
id: docId,
|
|
type_id: editDocType.value,
|
|
document_number: editDocNumber.value,
|
|
status: editDocStatus.value,
|
|
is_test_document: testDocumentToggle.checked,
|
|
remark: editDocRemark.value
|
|
};
|
|
|
|
// 实际应用中应该使用AJAX请求发送数据
|
|
console.log('保存文档修改:', formData);
|
|
|
|
// 模拟保存成功
|
|
alert('文档信息已成功更新！');
|
|
|
|
// 添加新的修改历史条目
|
|
addHistoryItem('当前用户', '修改了文档信息', `更新了文档类型、状态和备注信息`);
|
|
|
|
// 实际应用中可能需要重定向或刷新页面
|
|
// window.location.href = '文档-列表.html';
|
|
});
|
|
|
|
// 添加历史记录条目
|
|
function addHistoryItem(user, action, details) {
|
|
const timeline = document.querySelector('.history-timeline');
|
|
const now = new Date();
|
|
const timeString = `${now.getFullYear()}-${padZero(now.getMonth() + 1)}-${padZero(now.getDate())} ${padZero(now.getHours())}:${padZero(now.getMinutes())}`;
|
|
|
|
const timelineItem = document.createElement('div');
|
|
timelineItem.className = 'timeline-item';
|
|
timelineItem.innerHTML = `
|
|
<div class="timeline-time">${timeString}</div>
|
|
<div class="timeline-content">
|
|
<div><strong>${user}</strong> ${action}</div>
|
|
<div class="text-xs text-secondary mt-1">${details}</div>
|
|
</div>
|
|
`;
|
|
|
|
// 插入到顶部
|
|
timeline.insertBefore(timelineItem, timeline.firstChild);
|
|
}
|
|
|
|
// 辅助函数：数字补零
|
|
function padZero(num) {
|
|
return num < 10 ? '0' + num : num;
|
|
}
|
|
|
|
// 更新状态徽章
|
|
function updateStatusBadge(badgeElement, status) {
|
|
// 移除所有状态类
|
|
badgeElement.classList.remove(
|
|
'status-pending', 'status-processing', 'status-pass', 'status-warning', 'status-fail'
|
|
);
|
|
|
|
// 添加对应状态类
|
|
badgeElement.classList.add('status-' + status);
|
|
|
|
// 更新显示文本
|
|
const statusTexts = {
|
|
'pending': '待审核',
|
|
'processing': '审核中',
|
|
'pass': '通过',
|
|
'warning': '警告',
|
|
'fail': '不通过'
|
|
};
|
|
|
|
badgeElement.textContent = statusTexts[status] || status;
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |