|
|
@@ -0,0 +1,84 @@
|
|
|
+<template>
|
|
|
+ <div style="display: flex;">
|
|
|
+ <el-upload
|
|
|
+ action=""
|
|
|
+ :auto-upload="false"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-change="handleFileChange"
|
|
|
+ accept=".xlsx, .xls"
|
|
|
+ >
|
|
|
+ <el-button type="primary">导入Excel</el-button>
|
|
|
+ </el-upload>
|
|
|
+
|
|
|
+ <el-button type="success" @click="exportExcel" style="margin-left: 40px">导出Excel</el-button>
|
|
|
+ </div>
|
|
|
+ <div style="height: 20px"></div>
|
|
|
+ <el-table :data="fileList">
|
|
|
+ <el-table-column></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-drawer
|
|
|
+ v-model="detailShow"
|
|
|
+ title="材料详情"
|
|
|
+ direction="rtl"
|
|
|
+ >
|
|
|
+ <el-table :data="tableData" border style="width: 1800px" height="700px">
|
|
|
+ <el-table-column
|
|
|
+ v-for="column in tableColumns"
|
|
|
+ :key="column.prop"
|
|
|
+ :prop="column.prop"
|
|
|
+ :label="column.label"
|
|
|
+ />
|
|
|
+ </el-table>
|
|
|
+ </el-drawer>
|
|
|
+ <div style="height: 30px"></div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref } from 'vue';
|
|
|
+import { ElUpload, ElButton, ElMessage } from 'element-plus';
|
|
|
+import * as XLSX from 'xlsx';
|
|
|
+const fileList = reactive([])
|
|
|
+
|
|
|
+const loading = ref(false);
|
|
|
+const tableColumns = ref([]);
|
|
|
+const tableData = ref([]);
|
|
|
+const detailShow = ref(false)
|
|
|
+
|
|
|
+const handleFileChange = (file) => {
|
|
|
+ const reader = new FileReader();
|
|
|
+ reader.onload = (e) => {
|
|
|
+ try {
|
|
|
+ const data = new Uint8Array(e.target.result);
|
|
|
+ const workbook = XLSX.read(data, { type: 'array' });
|
|
|
+ const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
|
|
|
+ const jsonData = XLSX.utils.sheet_to_json(firstSheet);
|
|
|
+ // console.log('data', data)
|
|
|
+ // console.log('workbook', workbook)
|
|
|
+ // console.log('firstSheet', firstSheet)
|
|
|
+ // console.log('jsonData', jsonData)
|
|
|
+
|
|
|
+ if (jsonData.length === 0) throw new Error('Excel文件为空');
|
|
|
+
|
|
|
+ // 动态生成表头
|
|
|
+ tableColumns.value = Object.keys(jsonData[0]).map(key => ({
|
|
|
+ prop: key,
|
|
|
+ label: key.replace(/_/g, ' '),
|
|
|
+ }));
|
|
|
+ tableData.value = jsonData;
|
|
|
+ ElMessage.success('导入成功');
|
|
|
+ } catch (error) {
|
|
|
+ ElMessage.error(`解析失败: ${error.message}`);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ reader.readAsArrayBuffer(file.raw);
|
|
|
+ reader.onloadstart = () => loading.value = true;
|
|
|
+ reader.onloadend = () => loading.value = false;
|
|
|
+}
|
|
|
+
|
|
|
+const exportExcel = () => {
|
|
|
+ const worksheet = XLSX.utils.json_to_sheet(tableData.value)
|
|
|
+ const workbook = XLSX.utils.book_new()
|
|
|
+ XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
|
|
|
+ XLSX.writeFile(workbook, '导出数据.xlsx')
|
|
|
+};
|
|
|
+</script>
|
