项目创建

2025-07-04 17:16:38 +08:00
parent ce47b39fa5
commit 719911918f
372 changed files with 105035 additions and 32 deletions
@@ -0,0 +1,89 @@
+<template>
+  <div class="page-content">
+    <ArtExcelImport @import-success="handleImportSuccess" @import-error="handleImportError">
+      <template #import-text> 上传 Excel </template>
+    </ArtExcelImport>
+
+    <ArtExcelExport
+      style="margin-left: 10px"
+      :data="tableData"
+      filename="用户数据"
+      sheetName="用户列表"
+      type="success"
+      :headers="headers"
+      @export-success="handleExportSuccess"
+      @export-error="handleExportError"
+    >
+      导出 Excel
+    </ArtExcelExport>
+
+    <ElButton type="danger" @click="handleClear" v-ripple>清除数据</ElButton>
+
+    <ArtTable :data="tableData" style="margin-top: 10px">
+      <ElTableColumn
+        v-for="key in Object.keys(headers)"
+        :key="key"
+        :prop="key"
+        :label="headers[key as keyof typeof headers]"
+      />
+    </ArtTable>
+  </div>
+</template>
+
+<script setup lang="ts">
+  interface TableData {
+    name: string
+    age: number
+    city: string
+  }
+
+  const handleImportSuccess = (data: any[]) => {
+    // 将导入的数据转换为正确的格式
+    const formattedData = data.map((item) => ({
+      name: item['姓名'],
+      age: Number(item['年龄']),
+      city: item['城市']
+    }))
+    tableData.value = formattedData
+
+    // tableData.value = data
+  }
+
+  const handleImportError = (error: Error) => {
+    // 处理导入错误
+    console.error('导入失败:', error)
+  }
+
+  // 使用类型化的ref
+  const tableData = ref<TableData[]>([
+    { name: '李四', age: 20, city: '上海' },
+    { name: '张三', age: 25, city: '北京' },
+    { name: '王五', age: 30, city: '广州' },
+    { name: '赵六', age: 35, city: '深圳' },
+    { name: '孙七', age: 28, city: '杭州' },
+    { name: '周八', age: 32, city: '成都' },
+    { name: '吴九', age: 27, city: '武汉' },
+    { name: '郑十', age: 40, city: '南京' },
+    { name: '刘一', age: 22, city: '重庆' },
+    { name: '陈二', age: 33, city: '西安' }
+  ])
+
+  // 自定义表头映射
+  const headers = {
+    name: '姓名',
+    age: '年龄',
+    city: '城市'
+  }
+
+  const handleExportSuccess = () => {
+    ElMessage.success('导出成功')
+  }
+
+  const handleExportError = (error: Error) => {
+    ElMessage.error(`导出失败: ${error.message}`)
+  }
+
+  const handleClear = () => {
+    tableData.value = []
+  }
+</script>