解决跨域问题

src/api/contractApi.js

@@ -6,7 +6,7 @@ const service = axios.create({
   timeout: 10000
 })
 
-// 导入销售合同Excel
+// 导入采购合同Excel
 export const importContractExcel = (file) => {
   const formData = new FormData()
   formData.append('file', file)
@@ -19,7 +19,21 @@ export const importContractExcel = (file) => {
     }
   })
 }
+// 导入销售合同Excel
+export const importSalesContractExcel = (file) => {
+  const formData = new FormData()
+  formData.append('file', file)
+  return service({
+    url: '/salesContract/importExcel',
+    method: 'post',
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
 
 export default {
-  importContractExcel
+  importContractExcel,
+  importSalesContractExcel
 }

src/router/index.js

@@ -4,6 +4,7 @@ import PurchaseContractView from '../views/PurchaseContractView.vue'
 import UserList from '../views/UserList.vue'
 import UserAdd from '../views/UserAdd.vue'
 import UserEdit from '../views/UserEdit.vue'
+import ImportSalesContractExcel from "../views/ImportSalesContractExcel.vue";
 
 const routes = [
   {
@@ -11,6 +12,11 @@ const routes = [
     name: 'contract',
     component: SalesContractView
   },
+  {
+    path:'/sales',
+    name:'sales',
+    component: ImportSalesContractExcel
+  },
   {
     path: '/PC',
     name: 'PC',

src/views/ImportSalesContractExcel.vue

@@ -0,0 +1,438 @@
+<template>
+  <div class="excel-import-simple">
+    <el-card class="import-card">
+      <template #header>
+        <div class="card-header">
+          <span class="title">销售合同Excel导入</span>
+        </div>
+      </template>
+
+      <!-- 文件上传区域 -->
+      <div class="upload-area">
+        <el-upload
+            ref="uploadRef"
+            class="upload-demo"
+            drag
+            action="#"
+            :auto-upload="false"
+            :on-change="handleFileChange"
+            :on-remove="handleFileRemove"
+            :file-list="fileList"
+            :limit="1"
+            accept=".xlsx,.xls"
+        >
+          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+          <div class="el-upload__text">
+            将销售合同Excel文件拖到此处，或<em>点击上传</em>
+          </div>
+          <template #tip>
+            <div class="el-upload__tip">
+              只能上传 .xlsx 或 .xls 格式的Excel文件
+            </div>
+          </template>
+        </el-upload>
+      </div>
+
+      <!-- 导入按钮 -->
+      <div class="action-buttons">
+        <el-button
+            type="primary"
+            :loading="loading"
+            :disabled="!fileList.length"
+            @click="handleImport"
+        >
+          {{ loading ? '导入中...' : '开始导入' }}
+        </el-button>
+        <el-button @click="handleReset">重置</el-button>
+      </div>
+
+      <!-- 导入结果 -->
+      <div v-if="importResult" class="result-area">
+        <!-- 成功结果 -->
+        <div v-if="importResult.success" class="success-result">
+          <el-alert
+              :title="importResult.title"
+              type="success"
+              :description="importResult.message"
+              show-icon
+              :closable="false"
+          />
+
+          <!-- 成功统计信息 -->
+          <div class="statistics">
+            <el-descriptions :column="2" border size="small">
+              <el-descriptions-item label="总记录数">
+                <el-tag type="info">{{ importResult.totalRecords }}</el-tag>
+              </el-descriptions-item>
+              <el-descriptions-item label="成功记录数">
+                <el-tag type="success">{{ importResult.successRecords }}</el-tag>
+              </el-descriptions-item>
+              <el-descriptions-item label="失败记录数">
+                <el-tag type="danger">{{ importResult.totalRecords - importResult.successRecords }}</el-tag>
+              </el-descriptions-item>
+              <el-descriptions-item label="成功率">
+                <el-tag :type="getSuccessRateType(importResult.successRate)">
+                  {{ (importResult.successRate * 100).toFixed(2) }}%
+                </el-tag>
+              </el-descriptions-item>
+            </el-descriptions>
+          </div>
+        </div>
+
+        <!-- 失败结果 -->
+        <div v-else class="error-result">
+          <el-alert
+              :title="importResult.title"
+              type="error"
+              :description="importResult.message"
+              show-icon
+              :closable="false"
+          />
+
+          <!-- 错误列表 -->
+          <div v-if="importResult.errors && importResult.errors.length" class="error-list">
+            <div class="error-header">
+              <h4>
+                <el-icon color="#F56C6C"><Warning /></el-icon>
+                错误信息（共 {{ importResult.errors.length }} 条）
+              </h4>
+              <el-button
+                  size="small"
+                  @click="exportErrors"
+                  :disabled="!importResult.errors.length"
+              >
+                导出错误报告
+              </el-button>
+            </div>
+            <div class="error-scroll">
+              <div
+                  v-for="(error, index) in importResult.errors"
+                  :key="index"
+                  class="error-item"
+              >
+                <span class="error-index">{{ index + 1 }}.</span>
+                <span class="error-content">{{ error }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 导入说明 -->
+      <div class="import-tips">
+        <el-alert
+            title="导入说明"
+            type="info"
+            :closable="false"
+        >
+          <template #default>
+            <div class="tips-content">
+              <p>1. 请确保Excel文件包含以下Sheet：</p>
+              <ul>
+                <li>Sheet1: 销售合同主表</li>
+                <li>Sheet2: 产品明细</li>
+                <li>Sheet3: 收款计划</li>
+                <li>Sheet4: 责任中心</li>
+                <li>Sheet5: 费用明细</li>
+                <li>Sheet6: 服务费率</li>
+              </ul>
+              <p>2. 系统会自动根据合同号关联主表和子表数据</p>
+              <p>3. 如果合同已存在，系统会自动删除后重新导入</p>
+            </div>
+          </template>
+        </el-alert>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { ElMessage } from 'element-plus'
+import { UploadFilled, Warning } from '@element-plus/icons-vue'
+import axios from 'axios'
+
+// 响应式数据
+const uploadRef = ref()
+const fileList = ref([])
+const loading = ref(false)
+const importResult = ref(null)
+
+// API配置
+const API_BASE_URL = 'http://localhost:8080' // 确保与Postman中使用的地址一致
+
+// 计算属性 - 成功率类型
+const getSuccessRateType = (rate) => {
+  if (rate >= 0.9) return 'success'
+  if (rate >= 0.7) return 'warning'
+  return 'danger'
+}
+
+// 处理文件选择
+const handleFileChange = (file) => {
+  const isExcel = file.name.endsWith('.xlsx') || file.name.endsWith('.xls')
+
+  if (!isExcel) {
+    ElMessage.error('只能上传Excel文件!')
+    uploadRef.value.handleRemove(file)
+    return false
+  }
+
+  const isLt50M = file.size / 1024 / 1024 < 50
+  if (!isLt50M) {
+    ElMessage.error('Excel文件大小不能超过50MB!')
+    uploadRef.value.handleRemove(file)
+    return false
+  }
+
+  fileList.value = [file]
+  importResult.value = null
+}
+
+// 处理文件移除
+const handleFileRemove = () => {
+  fileList.value = []
+  importResult.value = null
+}
+
+// 执行导入
+const handleImport = async () => {
+  if (!fileList.value.length) {
+    ElMessage.warning('请先选择Excel文件')
+    return
+  }
+
+  const file = fileList.value[0].raw
+  loading.value = true
+  importResult.value = null
+
+  try {
+    const formData = new FormData()
+    formData.append('file', file)
+
+    console.log('开始上传文件:', file.name)
+    console.log('文件大小:', file.size)
+
+    // 方案1：直接调用完整URL，关闭withCredentials
+    const response = await axios.post(
+        'http://localhost:8080/api/salesContract/import',
+        formData,
+        {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          },
+          timeout: 120000,
+          withCredentials: false  // 必须设为false
+        }
+    )
+
+    console.log('API响应成功:', response.status)
+    console.log('响应数据:', response.data)
+
+    // 处理响应数据
+    if (response.status === 200) {
+      const resultData = response.data
+
+      // 根据实际返回结构判断
+      if (resultData.code === 200 || resultData.success === true) {
+        importResult.value = {
+          success: true,
+          title: '导入成功',
+          message: resultData.message || '导入成功',
+          totalRecords: resultData.totalRecords || 0,
+          successRecords: resultData.successRecords || 0,
+          errors: resultData.errors || []
+        }
+        ElMessage.success('导入成功')
+      } else {
+        importResult.value = {
+          success: false,
+          title: '导入失败',
+          message: resultData.message || '导入失败',
+          errors: resultData.errors || []
+        }
+        ElMessage.error(resultData.message || '导入失败')
+      }
+    }
+
+  } catch (error) {
+    console.error('详细错误信息:', error)
+    console.error('错误配置:', error.config)
+
+    let errorMessage = '网络请求失败'
+    let errorDetails = []
+
+    if (error.code === 'ERR_NETWORK') {
+      errorMessage = '网络连接被阻止'
+      errorDetails = [
+        '可能的原因：',
+        '1. 后端服务未启动',
+        '2. 端口被占用',
+        '3. 防火墙阻止',
+        '4. 跨域限制'
+      ]
+    }
+
+    ElMessage.error(errorMessage)
+    importResult.value = {
+      success: false,
+      title: '导入失败',
+      message: errorMessage,
+      errors: errorDetails
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+// 导出错误报告
+const exportErrors = () => {
+  if (!importResult.value || !importResult.value.errors.length) return
+
+  const errorText = importResult.value.errors.join('\n')
+  const blob = new Blob([errorText], { type: 'text/plain;charset=utf-8' })
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = `销售合同导入错误报告_${new Date().toISOString().split('T')[0]}.txt`
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  URL.revokeObjectURL(url)
+
+  ElMessage.success('错误报告导出成功')
+}
+
+// 重置
+const handleReset = () => {
+  fileList.value = []
+  importResult.value = null
+  uploadRef.value?.clearFiles()
+}
+</script>
+
+<style scoped>
+.excel-import-simple {
+  padding: 20px;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.import-card {
+  min-height: 500px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.upload-area {
+  margin: 20px 0;
+}
+
+.action-buttons {
+  text-align: center;
+  margin: 20px 0;
+}
+
+.result-area {
+  margin-top: 20px;
+}
+
+.success-result,
+.error-result {
+  margin-bottom: 20px;
+}
+
+.statistics {
+  margin-top: 15px;
+  padding: 15px;
+  background: #f0f9ff;
+  border-radius: 4px;
+  border: 1px solid #e1f3ff;
+}
+
+.error-list {
+  margin-top: 15px;
+  padding: 15px;
+  background: #fef0f0;
+  border-radius: 4px;
+  border: 1px solid #fde2e2;
+}
+
+.error-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.error-header h4 {
+  margin: 0;
+  color: #f56c6c;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.error-scroll {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.error-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 8px 0;
+  border-bottom: 1px solid #fde2e2;
+  line-height: 1.4;
+}
+
+.error-item:last-child {
+  border-bottom: none;
+}
+
+.error-index {
+  color: #909399;
+  font-size: 12px;
+  margin-right: 8px;
+  flex-shrink: 0;
+  min-width: 20px;
+}
+
+.error-content {
+  font-size: 13px;
+  color: #f56c6c;
+  word-break: break-all;
+}
+
+.import-tips {
+  margin-top: 20px;
+}
+
+.tips-content {
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.tips-content p {
+  margin: 5px 0;
+}
+
+.tips-content ul {
+  margin: 5px 0;
+  padding-left: 20px;
+}
+
+.tips-content li {
+  margin: 2px 0;
+}
+</style>

vite.config.js

@@ -1,18 +1,22 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
-// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
   server: {
     port: 3000,
-    open: true,
+    host: 'localhost', // 明确指定host
     proxy: {
       '/api': {
         target: 'http://localhost:8080',
         changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, '')
+        secure: false,
+        configure: (proxy, options) => {
+          proxy.on('proxyReq', (proxyReq, req, res) => {
+            console.log('代理请求:', req.method, req.url)
+          })
+        }
       }
     }
   }
-})
+})