746 lines
22 KiB
HTML
746 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>许可文件上传 - LawRisk</title>
|
||
<style>
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
font-family: "Microsoft YaHei", "PingFang SC", -apple-system, BlinkMacSystemFont, sans-serif;
|
||
background: linear-gradient(135deg, #f7fafc 0%, #e2e8f0 100%);
|
||
min-height: 100vh;
|
||
color: #1f2937;
|
||
}
|
||
|
||
.page {
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
padding: 32px 20px 60px;
|
||
}
|
||
|
||
.header {
|
||
background: #fff;
|
||
border-radius: 18px;
|
||
padding: 28px;
|
||
box-shadow: 0 20px 60px rgba(79, 70, 229, 0.12);
|
||
margin-bottom: 24px;
|
||
position: relative;
|
||
}
|
||
|
||
.title {
|
||
text-align: center;
|
||
}
|
||
|
||
.title h1 {
|
||
font-size: 30px;
|
||
margin: 0;
|
||
color: #111827;
|
||
}
|
||
|
||
.title p {
|
||
margin: 6px 0 0;
|
||
color: #4b5563;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.upload-section {
|
||
background: #fff;
|
||
border-radius: 18px;
|
||
padding: 28px;
|
||
box-shadow: 0 20px 60px rgba(79, 70, 229, 0.12);
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #374151;
|
||
margin: 0 0 20px;
|
||
padding-bottom: 12px;
|
||
border-bottom: 2px solid #f3f4f6;
|
||
}
|
||
|
||
.upload-area {
|
||
border: 2px dashed #d1d5db;
|
||
border-radius: 12px;
|
||
padding: 48px 20px;
|
||
text-align: center;
|
||
background: #f9fafb;
|
||
transition: all 0.3s;
|
||
cursor: pointer;
|
||
position: relative;
|
||
}
|
||
|
||
.upload-area:hover {
|
||
border-color: #6366f1;
|
||
background: #f0f9ff;
|
||
}
|
||
|
||
.upload-area.dragover {
|
||
border-color: #6366f1;
|
||
background: #eef2ff;
|
||
transform: scale(1.02);
|
||
}
|
||
|
||
.upload-icon {
|
||
font-size: 48px;
|
||
margin-bottom: 12px;
|
||
color: #6366f1;
|
||
}
|
||
|
||
.upload-text {
|
||
font-size: 16px;
|
||
color: #4b5563;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.upload-hint {
|
||
font-size: 14px;
|
||
color: #9ca3af;
|
||
}
|
||
|
||
.upload-input {
|
||
position: absolute;
|
||
opacity: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.file-list {
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.file-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16px;
|
||
background: #f9fafb;
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 10px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.file-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
flex: 1;
|
||
}
|
||
|
||
.file-icon {
|
||
font-size: 24px;
|
||
color: #6366f1;
|
||
}
|
||
|
||
.file-details {
|
||
flex: 1;
|
||
}
|
||
|
||
.file-name {
|
||
font-weight: 600;
|
||
color: #374151;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.file-size {
|
||
font-size: 13px;
|
||
color: #9ca3af;
|
||
}
|
||
|
||
.file-status {
|
||
font-size: 13px;
|
||
padding: 4px 12px;
|
||
border-radius: 999px;
|
||
background: #dbeafe;
|
||
color: #1e40af;
|
||
}
|
||
|
||
.file-status.uploading {
|
||
background: #fef3c7;
|
||
color: #92400e;
|
||
}
|
||
|
||
.file-status.success {
|
||
background: #d1fae5;
|
||
color: #065f46;
|
||
}
|
||
|
||
.file-status.error {
|
||
background: #fee2e2;
|
||
color: #991b1b;
|
||
}
|
||
|
||
.file-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.btn {
|
||
padding: 8px 16px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.btn-small {
|
||
padding: 6px 12px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.btn-danger {
|
||
background: #fee2e2;
|
||
color: #991b1b;
|
||
}
|
||
|
||
.btn-danger:hover {
|
||
background: #fecaca;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: #6366f1;
|
||
color: #fff;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: #4f46e5;
|
||
}
|
||
|
||
.btn:disabled {
|
||
opacity: 0.6;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.form-label {
|
||
display: block;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #374151;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.hint-icon {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 18px;
|
||
height: 18px;
|
||
margin-left: 6px;
|
||
border-radius: 50%;
|
||
border: 1px solid #9ca3af;
|
||
color: #374151;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
background: #f9fafb;
|
||
cursor: default;
|
||
}
|
||
|
||
.form-select,
|
||
.form-input,
|
||
.form-textarea {
|
||
width: 100%;
|
||
padding: 12px 16px;
|
||
border: 1px solid #d1d5db;
|
||
border-radius: 10px;
|
||
font-size: 14px;
|
||
background: #fff;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.form-select:focus,
|
||
.form-input:focus,
|
||
.form-textarea:focus {
|
||
outline: none;
|
||
border-color: #6366f1;
|
||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
|
||
}
|
||
|
||
.form-textarea {
|
||
resize: vertical;
|
||
min-height: 80px;
|
||
}
|
||
|
||
.form-help {
|
||
font-size: 13px;
|
||
color: #6b7280;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.binding-options {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 20px;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.binding-card {
|
||
padding: 16px;
|
||
border: 2px solid #e5e7eb;
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.binding-card:hover {
|
||
border-color: #6366f1;
|
||
}
|
||
|
||
.binding-card.selected {
|
||
border-color: #6366f1;
|
||
background: #eef2ff;
|
||
}
|
||
|
||
.binding-radio {
|
||
display: none;
|
||
}
|
||
|
||
.binding-title {
|
||
font-weight: 600;
|
||
color: #374151;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.binding-desc {
|
||
font-size: 13px;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.submit-section {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 12px;
|
||
margin-top: 24px;
|
||
padding-top: 24px;
|
||
border-top: 2px solid #f3f4f6;
|
||
}
|
||
|
||
.loading {
|
||
text-align: center;
|
||
padding: 40px 20px;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.loading-spinner {
|
||
display: inline-block;
|
||
width: 40px;
|
||
height: 40px;
|
||
border: 4px solid #f3f4f6;
|
||
border-top-color: #6366f1;
|
||
border-radius: 50%;
|
||
animation: spin 0.8s linear infinite;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
@keyframes spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.error-message {
|
||
background: #fee2e2;
|
||
border: 1px solid #fecaca;
|
||
color: #991b1b;
|
||
padding: 16px;
|
||
border-radius: 10px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.success-message {
|
||
background: #d1fae5;
|
||
border: 1px solid #a7f3d0;
|
||
color: #065f46;
|
||
padding: 16px;
|
||
border-radius: 10px;
|
||
margin-bottom: 20px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="page">
|
||
<!-- 页面头部 -->
|
||
<div class="header">
|
||
<div class="title">
|
||
<h1>许可文件上传</h1>
|
||
<p>上传Excel格式的许可文件，可选择绑定到特定单位</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 上传区域 -->
|
||
<div class="upload-section">
|
||
<h2 class="section-title">1. 选择文件</h2>
|
||
|
||
<div id="uploadArea" class="upload-area">
|
||
<div class="upload-icon">📤</div>
|
||
<div class="upload-text">点击或拖拽文件到此处上传</div>
|
||
<div class="upload-hint">支持 .xlsx 格式，建议文件大小不超过 50MB</div>
|
||
<input type="file" id="fileInput" class="upload-input" accept=".xlsx,.xls" multiple />
|
||
</div>
|
||
|
||
<div id="fileList" class="file-list" style="display: none;"></div>
|
||
</div>
|
||
|
||
<!-- 绑定设置 -->
|
||
<div class="upload-section">
|
||
<h2 class="section-title">2. 绑定设置（可选）</h2>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">
|
||
绑定单位
|
||
<span class="hint-icon" title="自动绑定到当前账号所属单位，该单位及下级可见，上级可下钻查看，横向同级不可见。">i</span>
|
||
</label>
|
||
<div class="binding-card selected"
|
||
style="display:flex; align-items:center; justify-content:space-between;">
|
||
<div>
|
||
<div class="binding-title" id="boundDeptLabel">加载中...</div>
|
||
<div class="binding-desc">绑定到本单位，权限范围由组织层级决定</div>
|
||
</div>
|
||
<div class="pill" id="boundDeptHint">自动绑定</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">上传说明（可选）</label>
|
||
<textarea id="uploadNote" class="form-textarea" placeholder="输入本次上传的说明信息..."></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 提交区域 -->
|
||
<div class="upload-section">
|
||
<div class="submit-section">
|
||
<button id="cancelBtn" class="btn" style="background: #e5e7eb; color: #374151;">取消</button>
|
||
<button id="submitBtn" class="btn btn-primary" disabled>开始上传</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 状态消息 -->
|
||
<div id="errorMessage" class="error-message" style="display: none;"></div>
|
||
<div id="successMessage" class="success-message" style="display: none;"></div>
|
||
|
||
<!-- 上传进度 -->
|
||
<div id="uploadProgress" class="upload-section" style="display: none;">
|
||
<h2 class="section-title">上传进度</h2>
|
||
<div id="progressContent"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 全局变量
|
||
let selectedFiles = [];
|
||
let currentDepartment = null;
|
||
|
||
// DOM元素
|
||
const uploadArea = document.getElementById('uploadArea');
|
||
const fileInput = document.getElementById('fileInput');
|
||
const fileList = document.getElementById('fileList');
|
||
const submitBtn = document.getElementById('submitBtn');
|
||
const cancelBtn = document.getElementById('cancelBtn');
|
||
const errorMessage = document.getElementById('errorMessage');
|
||
const successMessage = document.getElementById('successMessage');
|
||
const boundDeptLabel = document.getElementById('boundDeptLabel');
|
||
const uploadProgress = document.getElementById('uploadProgress');
|
||
const progressContent = document.getElementById('progressContent');
|
||
|
||
// 页面初始化
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
loadCurrentUserDept();
|
||
bindEvents();
|
||
});
|
||
|
||
// 绑定事件
|
||
function bindEvents() {
|
||
// 文件选择
|
||
fileInput.addEventListener('change', handleFileSelect);
|
||
|
||
// 拖拽上传
|
||
uploadArea.addEventListener('dragover', handleDragOver);
|
||
uploadArea.addEventListener('dragleave', handleDragLeave);
|
||
uploadArea.addEventListener('drop', handleDrop);
|
||
|
||
// 提交/取消
|
||
submitBtn.addEventListener('click', handleSubmit);
|
||
cancelBtn.addEventListener('click', handleCancel);
|
||
}
|
||
|
||
// 处理文件选择
|
||
function handleFileSelect(e) {
|
||
const files = Array.from(e.target.files);
|
||
addFiles(files);
|
||
}
|
||
|
||
// 处理拖拽悬停
|
||
function handleDragOver(e) {
|
||
e.preventDefault();
|
||
uploadArea.classList.add('dragover');
|
||
}
|
||
|
||
// 处理拖拽离开
|
||
function handleDragLeave(e) {
|
||
e.preventDefault();
|
||
uploadArea.classList.remove('dragover');
|
||
}
|
||
|
||
// 处理拖拽放下
|
||
function handleDrop(e) {
|
||
e.preventDefault();
|
||
uploadArea.classList.remove('dragover');
|
||
|
||
const files = Array.from(e.dataTransfer.files);
|
||
addFiles(files);
|
||
}
|
||
|
||
// 添加文件
|
||
function addFiles(files) {
|
||
// 过滤文件类型
|
||
const validFiles = files.filter(file => {
|
||
const validTypes = ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'];
|
||
const validExt = file.name.endsWith('.xlsx') || file.name.endsWith('.xls');
|
||
|
||
if (!validTypes.includes(file.type) && !validExt) {
|
||
showError(`文件 "${file.name}" 不是有效的Excel格式`);
|
||
return false;
|
||
}
|
||
|
||
if (file.size > 50 * 1024 * 1024) {
|
||
showError(`文件 "${file.name}" 超过50MB大小限制`);
|
||
return false;
|
||
}
|
||
|
||
return true;
|
||
});
|
||
|
||
validFiles.forEach(file => {
|
||
selectedFiles.push({
|
||
file: file,
|
||
id: Date.now() + Math.random(),
|
||
status: 'pending'
|
||
});
|
||
});
|
||
|
||
renderFileList();
|
||
updateSubmitButton();
|
||
}
|
||
|
||
// 渲染文件列表
|
||
function renderFileList() {
|
||
if (selectedFiles.length === 0) {
|
||
fileList.style.display = 'none';
|
||
return;
|
||
}
|
||
|
||
fileList.style.display = 'block';
|
||
fileList.innerHTML = selectedFiles.map(item => `
|
||
<div class="file-item" data-id="${item.id}">
|
||
<div class="file-info">
|
||
<div class="file-icon">📊</div>
|
||
<div class="file-details">
|
||
<div class="file-name">${escapeHtml(item.file.name)}</div>
|
||
<div class="file-size">${formatFileSize(item.file.size)}</div>
|
||
</div>
|
||
</div>
|
||
<div class="file-status ${item.status}">${getStatusText(item.status)}</div>
|
||
<div class="file-actions">
|
||
<button class="btn btn-small btn-danger" onclick="removeFile('${item.id}')">移除</button>
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
|
||
// 移除文件
|
||
function removeFile(id) {
|
||
selectedFiles = selectedFiles.filter(item => item.id !== id);
|
||
renderFileList();
|
||
updateSubmitButton();
|
||
}
|
||
|
||
async function loadCurrentUserDept() {
|
||
try {
|
||
const resp = await fetch('/fs-ai-asistant/api/workflow/lawrisk/auth/me');
|
||
const data = await resp.json();
|
||
if (!data.authenticated) {
|
||
throw new Error('未登录');
|
||
}
|
||
const dept = data.user && data.user.department;
|
||
currentDepartment = dept;
|
||
if (dept && dept.name) {
|
||
boundDeptLabel.textContent = `${dept.name}${dept.code ? ' · ' + dept.code : ''}`;
|
||
boundDeptHint.textContent = '自动绑定';
|
||
submitBtn.disabled = false;
|
||
} else {
|
||
boundDeptLabel.textContent = '未绑定单位';
|
||
boundDeptHint.textContent = '请先绑定';
|
||
submitBtn.disabled = true;
|
||
showError('当前账号未绑定单位，无法上传文件。');
|
||
}
|
||
} catch (error) {
|
||
console.error('加载当前用户失败:', error);
|
||
boundDeptLabel.textContent = '加载失败';
|
||
boundDeptHint.textContent = '请重新登录';
|
||
submitBtn.disabled = true;
|
||
showError('无法获取当前用户信息，请重新登录。');
|
||
}
|
||
}
|
||
|
||
// 处理提交
|
||
async function handleSubmit() {
|
||
if (selectedFiles.length === 0) {
|
||
showError('请先选择要上传的文件');
|
||
return;
|
||
}
|
||
|
||
const boundDepartmentId = currentDepartment ? currentDepartment.id : null;
|
||
const bindingMode = 'department';
|
||
|
||
if (!boundDepartmentId) {
|
||
showError('当前账号未绑定单位，请先绑定后再上传。');
|
||
return;
|
||
}
|
||
|
||
// 开始上传第一个文件
|
||
await uploadFile(0, boundDepartmentId, bindingMode);
|
||
}
|
||
|
||
// 上传文件
|
||
async function uploadFile(index, boundDepartmentId, bindingMode) {
|
||
if (index >= selectedFiles.length) {
|
||
// 所有文件上传完成
|
||
showSuccess(`成功上传 ${selectedFiles.length} 个文件`);
|
||
resetForm();
|
||
return;
|
||
}
|
||
|
||
const item = selectedFiles[index];
|
||
item.status = 'uploading';
|
||
renderFileList();
|
||
|
||
try {
|
||
const formData = new FormData();
|
||
formData.append('file', item.file);
|
||
|
||
// 添加绑定信息
|
||
if (boundDepartmentId) {
|
||
formData.append('bound_department_id', boundDepartmentId);
|
||
}
|
||
formData.append('binding_mode', bindingMode || 'auto');
|
||
|
||
const response = await fetch('/fs-ai-asistant/api/workflow/lawrisk/admin/permit-import/upload', {
|
||
method: 'POST',
|
||
body: formData
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (!data.success) {
|
||
throw new Error(data.message || '上传失败');
|
||
}
|
||
|
||
item.status = 'success';
|
||
renderFileList();
|
||
|
||
// 显示上传进度
|
||
showProgress(index + 1, selectedFiles.length, item.file.name);
|
||
|
||
// 继续上传下一个文件
|
||
setTimeout(() => uploadFile(index + 1, boundDepartmentId, bindingMode), 1000);
|
||
|
||
} catch (error) {
|
||
console.error('上传失败:', error);
|
||
item.status = 'error';
|
||
renderFileList();
|
||
showError(`文件 "${item.file.name}" 上传失败: ` + error.message);
|
||
}
|
||
}
|
||
|
||
// 显示上传进度
|
||
function showProgress(current, total, filename) {
|
||
uploadProgress.style.display = 'block';
|
||
progressContent.innerHTML = `
|
||
<div style="margin-bottom: 12px;">正在上传: ${escapeHtml(filename)} (${current}/${total})</div>
|
||
<div style="width: 100%; height: 8px; background: #f3f4f6; border-radius: 4px; overflow: hidden;">
|
||
<div style="width: ${(current / total) * 100}%; height: 100%; background: #6366f1; transition: width 0.3s;"></div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
// 处理取消
|
||
function handleCancel() {
|
||
if (confirm('确定要取消上传吗？已选择的文件将被清除。')) {
|
||
resetForm();
|
||
}
|
||
}
|
||
|
||
// 重置表单
|
||
function resetForm() {
|
||
selectedFiles = [];
|
||
fileInput.value = '';
|
||
fileList.style.display = 'none';
|
||
uploadProgress.style.display = 'none';
|
||
submitBtn.disabled = true;
|
||
|
||
document.getElementById('uploadNote').value = '';
|
||
}
|
||
|
||
// 更新提交按钮状态
|
||
function updateSubmitButton() {
|
||
submitBtn.disabled = selectedFiles.length === 0;
|
||
}
|
||
|
||
// 获取状态文本
|
||
function getStatusText(status) {
|
||
const statusMap = {
|
||
'pending': '等待上传',
|
||
'uploading': '上传中...',
|
||
'success': '上传成功',
|
||
'error': '上传失败'
|
||
};
|
||
return statusMap[status] || status;
|
||
}
|
||
|
||
// 格式化文件大小
|
||
function formatFileSize(bytes) {
|
||
if (bytes < 1024) return bytes + ' B';
|
||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
|
||
return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
|
||
}
|
||
|
||
// HTML转义
|
||
function escapeHtml(text) {
|
||
if (!text) return '';
|
||
const div = document.createElement('div');
|
||
div.textContent = text;
|
||
return div.innerHTML;
|
||
}
|
||
|
||
// 显示错误信息
|
||
function showError(message) {
|
||
errorMessage.textContent = message;
|
||
errorMessage.style.display = 'block';
|
||
setTimeout(() => errorMessage.style.display = 'none', 5000);
|
||
}
|
||
|
||
// 显示成功信息
|
||
function showSuccess(message) {
|
||
successMessage.textContent = message;
|
||
successMessage.style.display = 'block';
|
||
setTimeout(() => successMessage.style.display = 'none', 5000);
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |