slble-attend/sl.ble_sys-attend/src-js/views/project/hisProject/importExcel.vue

<template>
  <div class="excel-import-container">
    <!-- 文件上传按钮 -->
    <el-upload
      class="upload-btn"
      action="#"
      :auto-upload="false"
      :show-file-list="false"
      :on-change="handleFileChange"
      accept=".xlsx, .xls"
    >
      <el-button type="primary" :icon="Upload">导入 Excel</el-button>
    </el-upload>

    <!-- 解析结果展示 -->
    <div v-if="tableData.length > 0" class="result-table">
      <span>
        <span style="font-weight: 900; font-size: 18px;">解析结果 (共 {{ tableData.length }} 条)</span>
        <span style="margin-left: 10px; color: #ff0000;">注意:如果Excel中有重复id字段,会导致数据覆盖</span>
      </span>
      <!-- <el-table :data="tableData" border style="width: 100%">
        <el-table-column 
          v-for="(key, index) in Object.keys(tableData[0])" 
          :key="index" 
          :prop="key" 
          :label="key"
        />
      </el-table> -->

    <pure-table
      row-key="id"
      align-whole="center"
      :header-cell-style="{
        background: 'var(--el-fill-color-light)',
        color: 'var(--el-text-color-primary)'
      }"
      :columns="columns"
      :table-key="tableKey"
      border
      :adaptive="false"
      showOverflowTooltip
      :loading="false"
      :data="
        tableData.slice(
          (pagination.currentPage - 1) * pagination.pageSize,
          pagination.currentPage * pagination.pageSize
        )
      "
      :pagination="pagination"
      @page-size-change="onSizeChange"
      @page-current-change="onCurrentChange"
    >
    </pure-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import * as XLSX from 'xlsx';
import { delObjectProperty } from "@pureadmin/utils";
import { Upload } from '@element-plus/icons-vue';

 /** 分页配置 */
const pagination = reactive({
  pageSize: 10,
  currentPage: 1,
  pageSizes: [10, 20, 40, 60],
  total: 0,
  align: "right",
  background: true,
  size: "default"
});

// 1. 声明要触发的自定义事件（可选，用于类型提示和校验）
const emit = defineEmits(['onExcelData']);

// 存储解析后的表格数据
const tableData = ref([]);
const columns = ref([]);

// 处理文件上传
const handleFileChange = (file) => {
  // 获取文件对象
  const rawFile = file.raw;
  if (!rawFile) return;

  // 创建文件读取器
  const reader = new FileReader();

  // 读取文件内容
  reader.onload = (e) => {
    try {
      // 解析 Excel 内容
      const data = e.target.result;
      const workbook = XLSX.read(data, { type: 'binary' });

      // 取第一个工作表（可根据实际需求修改）
      const firstSheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[firstSheetName];

      // 转换为 JSON 格式（header: 1 表示以数组形式返回，header: 'A' 表示带表头）
      const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

      // 处理表头和数据（如果需要结构化数据）
      if (jsonData.length > 0) {
        const headers = jsonData[0]; // 表头行
        const content = jsonData.slice(1); // 内容行

        console.log('Headers:', headers);
        for (const v of headers) {
          columns.value.push({
            label: v,
            prop: v
          });
        }

        // 转换为 { 表头1: 值1, 表头2: 值2 } 格式
        tableData.value = content.map(row => {
          const obj = {};
          headers.forEach((header, index) => {
            obj[header] = row[index];
          });
          if (!obj.id) {
            return null;
          } else {
            return obj;
          }
        });
        pagination.total = tableData.value.length;

        emit('onExcelData', tableData.value); // 触发自定义事件，传递解析后的数据
      }
    } catch (error) {
      console.error('Excel 解析失败:', error);
      alert('导入失败，请检查文件格式是否正确');
    }
  };

  // 以二进制方式读取文件
  reader.readAsBinaryString(rawFile);
};

onMounted(() => {
  // 初始化
  tableData.value = [];
  columns.value = [];
});

</script>

<style scoped>
.excel-import-container {
  padding: 20px;
}

.upload-btn {
  margin-bottom: 20px;
}

.result-table {
  margin-top: 20px;
}

h3 {
  margin-bottom: 10px;
  color: #333;
}
</style>