slble-attend/sl.ble_sys-attend/src-js/views/project/rtProject/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";
import Project from "@/model/project.js";
import Location from "@/model/location.js";
import Person from "@/model/person.js";
import { ElNotification, ElMessageBox } from "element-plus";

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

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

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

const project = new Project();

const parseWorksheet_proj = (worksheet, project) => {
  const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
  if (jsonData.length > 1) {
    const row_id = jsonData[1];
    const id = row_id[1];
    project.id = Number(id);
  }

  if (jsonData.length > 2) {
    const row_name = jsonData[2];
    const name = row_name[1];
    project.name = name;
  }

  if (jsonData.length > 3) {
    const row_ver = jsonData[3];
    const version = row_ver[1];
    project.version = Number(version);
  }
};

const parseWorksheet_location = (worksheet, project) => {
  const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
  if (jsonData.length > 0) {
    project.locations = [];

    const headers = jsonData[0]; // 表头行
    const content = jsonData.slice(1); // 内容行

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

    for (const v of data_loc) {
      const loc = new Location(v);
      loc.parent = project;
      project.locations.push(loc);
    }
  }
};

const parseWorksheet_person = (worksheet, project) => {
  const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
  if (jsonData.length > 0) {
    project.persons = [];

    const headers = jsonData[0]; // 表头行
    const content = jsonData.slice(1); // 内容行

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

    for (const v of data_person) {
      const person = new Person(v);
      project.persons.push(person);
    }
  }
};

// 处理文件上传
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" });

      let worksheet = null;
      // 取 proj 工作表
      worksheet = workbook.Sheets["project"] || workbook.Sheets["项目"];
      if (worksheet) {
        parseWorksheet_proj(worksheet, project);
      }

      // 取 location 工作表
      worksheet = workbook.Sheets["location"] || workbook.Sheets["区域"];
      if (worksheet) {
        parseWorksheet_location(worksheet, project);
      }

      // 取 person 工作表
      worksheet = workbook.Sheets["person"] || workbook.Sheets["人员"];
      if (worksheet) {
        parseWorksheet_person(worksheet, project);
      }

      console.log("Excel 解析完成:", project);
      ElNotification.success({
        message: "Excel 解析完成"
      });
      emit("onExcelDataProject", project); // 触发自定义事件，传递解析后的数据
    } 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>