105 lines
3.6 KiB
TypeScript
105 lines
3.6 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import React, { useState } from "react";
|
|||
|
|
import { ExcelImporter } from "@/components/ExcelImporter";
|
|||
|
|
import { Button } from "@/components/ui/button";
|
|||
|
|
import { Card } from "@/components/ui/card";
|
|||
|
|
import { Code } from "@/components/ui/code";
|
|||
|
|
import { Separator } from "@/components/ui/separator";
|
|||
|
|
|
|||
|
|
interface ImportedData {
|
|||
|
|
mobile: number;
|
|||
|
|
from: string;
|
|||
|
|
alias: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function ExcelImportDemo() {
|
|||
|
|
const [importedData, setImportedData] = useState<ImportedData[]>([]);
|
|||
|
|
const [showData, setShowData] = useState(false);
|
|||
|
|
|
|||
|
|
const handleImport = (data: ImportedData[]) => {
|
|||
|
|
setImportedData(data);
|
|||
|
|
setShowData(true);
|
|||
|
|
console.log("导入的数据:", data);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="container mx-auto py-10 space-y-8">
|
|||
|
|
<div className="flex flex-col space-y-2">
|
|||
|
|
<h1 className="text-2xl font-bold">Excel导入演示</h1>
|
|||
|
|
<p className="text-gray-500">
|
|||
|
|
本演示页面用于测试Excel文件导入功能，将解析Excel中的手机号码、来源和微信号字段。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Separator />
|
|||
|
|
|
|||
|
|
<div className="grid gap-8 md:grid-cols-2">
|
|||
|
|
<div>
|
|||
|
|
<h2 className="text-xl font-semibold mb-4">上传Excel文件</h2>
|
|||
|
|
<ExcelImporter onImport={handleImport} />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<h2 className="text-xl font-semibold mb-4">导入结果</h2>
|
|||
|
|
<Card className="p-4">
|
|||
|
|
{importedData.length > 0 ? (
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<p>导入 {importedData.length} 条数据</p>
|
|||
|
|
<div className="bg-gray-100 p-4 rounded-md overflow-auto max-h-[400px]">
|
|||
|
|
<pre className="text-sm">
|
|||
|
|
{JSON.stringify(importedData, null, 2)}
|
|||
|
|
</pre>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex justify-end">
|
|||
|
|
<Button
|
|||
|
|
variant={showData ? "default" : "outline"}
|
|||
|
|
onClick={() => setShowData(!showData)}
|
|||
|
|
>
|
|||
|
|
{showData ? "隐藏数据" : "显示数据"}
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="text-center py-8 text-gray-500">
|
|||
|
|
<p>尚未导入数据</p>
|
|||
|
|
<p className="text-sm mt-2">请上传Excel文件并点击确认导入</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</Card>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Separator />
|
|||
|
|
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<h2 className="text-xl font-semibold">使用说明</h2>
|
|||
|
|
<div className="grid gap-6 md:grid-cols-2">
|
|||
|
|
<Card className="p-4 space-y-2">
|
|||
|
|
<h3 className="font-medium">功能说明</h3>
|
|||
|
|
<ul className="list-disc pl-5 space-y-1 text-sm">
|
|||
|
|
<li>支持上传.xlsx和.xls格式的Excel文件</li>
|
|||
|
|
<li>自动识别"手机号码"、"来源"和"微信号"栏位</li>
|
|||
|
|
<li>可以自动跳过没有手机号的行</li>
|
|||
|
|
<li>点击"确认导入"按钮将解析后的数据传给回调函数</li>
|
|||
|
|
</ul>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
<Card className="p-4 space-y-2">
|
|||
|
|
<h3 className="font-medium">数据结构</h3>
|
|||
|
|
<Code className="text-xs">
|
|||
|
|
{`{
|
|||
|
|
mobile: "手机号码", // 必填
|
|||
|
|
from: "来源", // 选填
|
|||
|
|
alias: "微信号" // 选填
|
|||
|
|
}`}
|
|||
|
|
</Code>
|
|||
|
|
<p className="text-sm text-gray-500">
|
|||
|
|
注意：手机号为空的行会被自动忽略，来源和微信号栏位如果没有数据，则为空字符串。
|
|||
|
|
</p>
|
|||
|
|
</Card>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|