zhjwxt/上传模板修复脚本.js

// 上传模板修复脚本
// 在浏览器控制台中执行此脚本来修复文件上传功能

console.log('🔧 开始修复上传模板功能...');

// 创建一个完全独立的上传模板弹窗，正确处理文件上传
function createFixedUploadDialog() {
  // 移除可能存在的旧弹窗
  const existingDialog = document.querySelector('.fixed-upload-dialog');
  if (existingDialog) {
    existingDialog.remove();
  }
  
  const overlay = document.createElement('div');
  overlay.className = 'fixed-upload-dialog';
  overlay.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
  `;
  
  const content = document.createElement('div');
  content.style.cssText = `
    background: white;
    border-radius: 8px;
    width: 600px;
    max-width: 90vw;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  `;
  
  content.innerHTML = `
    <div style="display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #eee;">
      <h3 style="margin: 0;">上传合同模板 (修复版)</h3>
      <button onclick="this.closest('.fixed-upload-dialog').remove()" style="background: none; border: none; font-size: 24px; cursor: pointer;">×</button>
    </div>
    <div style="padding: 20px; max-height: 60vh; overflow-y: auto;">
      <div style="margin-bottom: 20px; padding: 15px; background: #f0f9ff; border-radius: 4px; border-left: 4px solid #409eff;">
        <h4 style="margin: 0 0 10px 0; color: #409eff;">🔧 修复说明</h4>
        <ul style="margin: 0; padding-left: 20px;">
          <li style="margin: 5px 0; color: #606266;">修复了文件选择和上传逻辑</li>
          <li style="margin: 5px 0; color: #606266;">确保文件正确包含在FormData中</li>
          <li style="margin: 5px 0; color: #606266;">增强了文件验证和错误处理</li>
        </ul>
      </div>
      
      <div class="upload-form">
        <div class="form-item" style="margin-bottom: 20px;">
          <label style="display: block; margin-bottom: 8px; font-weight: 500; color: #303133;">模板名称 <span style="color: red;">*</span></label>
          <input id="fixed-contract-name" type="text" placeholder="请输入模板名称" style="width: 100%; padding: 8px 12px; border: 1px solid #dcdfe6; border-radius: 4px; font-size: 14px; box-sizing: border-box;" />
        </div>
        
        <div class="form-item" style="margin-bottom: 20px;">
          <label style="display: block; margin-bottom: 8px; font-weight: 500; color: #303133;">合同类型 <span style="color: red;">*</span></label>
          <select id="fixed-contract-type" style="width: 100%; padding: 8px 12px; border: 1px solid #dcdfe6; border-radius: 4px; font-size: 14px; box-sizing: border-box;">
            <option value="">请选择合同类型</option>
            <option value="course">课程合同</option>
            <option value="service">服务合同</option>
          </select>
        </div>
        
        <div class="form-item" style="margin-bottom: 20px;">
          <label style="display: block; margin-bottom: 8px; font-weight: 500; color: #303133;">模板文件 <span style="color: red;">*</span></label>
          <div style="border: 2px dashed #dcdfe6; border-radius: 4px; padding: 20px; text-align: center; transition: border-color 0.3s;">
            <input type="file" id="fixed-file-input" accept=".docx" style="width: 100%; padding: 8px; border: 1px solid #dcdfe6; border-radius: 4px; cursor: pointer;" />
            <div style="margin-top: 8px; font-size: 12px; color: #909399;">只支持 .docx 格式文件，文件大小不超过 10MB</div>
            <div id="fixed-file-info" style="display: none; margin-top: 10px; padding: 8px; background: #f0f9ff; border: 1px solid #b3d8ff; border-radius: 4px; color: #409eff; font-size: 14px;"></div>
          </div>
        </div>
        
        <div class="form-item" style="margin-bottom: 20px;">
          <label style="display: block; margin-bottom: 8px; font-weight: 500; color: #303133;">备注</label>
          <textarea id="fixed-remarks" placeholder="请输入备注信息" style="width: 100%; padding: 8px 12px; border: 1px solid #dcdfe6; border-radius: 4px; min-height: 80px; resize: vertical; box-sizing: border-box;"></textarea>
        </div>
      </div>
    </div>
    <div style="display: flex; justify-content: flex-end; gap: 10px; padding: 20px; border-top: 1px solid #eee;">
      <button onclick="this.closest('.fixed-upload-dialog').remove()" style="padding: 8px 16px; border: 1px solid #ddd; background: white; color: #666; border-radius: 4px; cursor: pointer;">取消</button>
      <button id="fixed-upload-btn" style="padding: 8px 16px; border: 1px solid #409eff; background: #409eff; color: white; border-radius: 4px; cursor: pointer;">确定</button>
    </div>
  `;
  
  overlay.appendChild(content);
  document.body.appendChild(overlay);
  
  // 设置文件选择事件
  setupFileUploadEvents();
  
  return overlay;
}

// 设置文件上传相关事件
function setupFileUploadEvents() {
  const fileInput = document.getElementById('fixed-file-input');
  const fileInfo = document.getElementById('fixed-file-info');
  const uploadBtn = document.getElementById('fixed-upload-btn');
  
  // 存储选择的文件
  let selectedFile = null;
  
  // 文件选择事件
  fileInput.addEventListener('change', function(event) {
    const file = event.target.files[0];
    console.log('📁 文件选择事件触发:', file);
    
    if (!file) {
      selectedFile = null;
      fileInfo.style.display = 'none';
      return;
    }
    
    // 检查文件类型
    if (!file.name.toLowerCase().endsWith('.docx')) {
      alert('❌ 只支持上传 .docx 格式的文件！');
      fileInput.value = '';
      selectedFile = null;
      fileInfo.style.display = 'none';
      return;
    }
    
    // 检查文件大小 (10MB)
    if (file.size > 10 * 1024 * 1024) {
      alert('❌ 文件大小不能超过 10MB！');
      fileInput.value = '';
      selectedFile = null;
      fileInfo.style.display = 'none';
      return;
    }
    
    // 存储文件并显示信息
    selectedFile = file;
    fileInfo.innerHTML = `📄 ${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)`;
    fileInfo.style.display = 'block';
    
    console.log('✅ 文件选择成功:', {
      name: file.name,
      size: file.size,
      type: file.type,
      lastModified: file.lastModified
    });
  });
  
  // 上传按钮事件
  uploadBtn.addEventListener('click', async function() {
    console.log('🚀 开始上传流程...');
    
    // 获取表单数据
    const contractName = document.getElementById('fixed-contract-name').value.trim();
    const contractType = document.getElementById('fixed-contract-type').value;
    const remarks = document.getElementById('fixed-remarks').value.trim();
    
    // 验证表单
    if (!contractName) {
      alert('❌ 请输入模板名称');
      return;
    }
    
    if (!contractType) {
      alert('❌ 请选择合同类型');
      return;
    }
    
    if (!selectedFile) {
      alert('❌ 请选择模板文件');
      return;
    }
    
    console.log('📋 表单数据验证通过:', {
      contractName,
      contractType,
      remarks,
      file: selectedFile
    });
    
    // 显示上传状态
    const originalText = uploadBtn.textContent;
    uploadBtn.textContent = '上传中...';
    uploadBtn.disabled = true;
    
    try {
      // 构建FormData
      const formData = new FormData();
      formData.append('contract_name', contractName);
      formData.append('contract_type', contractType);
      formData.append('file', selectedFile);
      formData.append('remarks', remarks);
      
      console.log('📦 FormData构建完成:', {
        contract_name: contractName,
        contract_type: contractType,
        file: selectedFile.name,
        remarks: remarks
      });
      
      // 验证FormData内容
      console.log('🔍 FormData内容检查:');
      for (let [key, value] of formData.entries()) {
        if (value instanceof File) {
          console.log(`  ${key}: File(${value.name}, ${value.size} bytes)`);
        } else {
          console.log(`  ${key}: ${value}`);
        }
      }
      
      // 调用上传API
      const response = await fetch('/api/document_template/upload', {
        method: 'POST',
        headers: {
          'Authorization': 'Bearer ' + (localStorage.getItem('token') || sessionStorage.getItem('token') || '')
        },
        body: formData
      });
      
      console.log('📡 API响应状态:', response.status);
      
      if (response.ok) {
        const result = await response.json();
        console.log('✅ 上传成功:', result);
        alert('✅ 模板上传成功！');
        
        // 关闭弹窗
        document.querySelector('.fixed-upload-dialog').remove();
        
        // 刷新页面列表（如果可能）
        if (window.location.reload) {
          setTimeout(() => {
            window.location.reload();
          }, 1000);
        }
        
      } else {
        const errorText = await response.text();
        console.error('❌ 上传失败:', response.status, errorText);
        alert(`❌ 上传失败: ${response.status} - ${errorText}`);
      }
      
    } catch (error) {
      console.error('❌ 上传过程中发生错误:', error);
      alert(`❌ 上传失败: ${error.message}`);
    } finally {
      // 恢复按钮状态
      uploadBtn.textContent = originalText;
      uploadBtn.disabled = false;
    }
  });
}

// 创建修复版上传弹窗
console.log('🚀 创建修复版上传模板弹窗...');
createFixedUploadDialog();

console.log('✅ 修复脚本执行完成！');
console.log('📝 请测试文件选择和上传功能');
console.log('🔍 查看控制台日志了解详细的上传过程');