mirror of
https://github.com/bufanyun/hotgo.git
synced 2025-11-13 04:33:44 +08:00
69 lines
2.1 KiB
Vue
69 lines
2.1 KiB
Vue
<template>
|
||
<div>
|
||
<div class="n-layout-page-header">
|
||
<n-card :bordered="false" title="导入excel">
|
||
将excel表格数据导入，可解析出完整的表格内容，包括所有的sheet和行列数据
|
||
</n-card>
|
||
</div>
|
||
<n-card :bordered="false" class="mt-4 proCard">
|
||
<n-upload
|
||
directory-dnd
|
||
:custom-request="handleUpload"
|
||
name="file"
|
||
type="file"
|
||
accept=".xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
||
>
|
||
<n-upload-dragger>
|
||
<div style="margin-bottom: 12px">
|
||
<n-icon size="48" :depth="3">
|
||
<DownloadOutlined />
|
||
</n-icon>
|
||
</div>
|
||
<n-text style="font-size: 16px"> 点击或者拖动.xlsx文件到该区域来上传</n-text>
|
||
<n-p depth="3" style="margin: 8px 0 0 0"> 单次上传数据最大不建议超过5000条</n-p>
|
||
</n-upload-dragger>
|
||
</n-upload>
|
||
</n-card>
|
||
|
||
<n-card
|
||
:bordered="false"
|
||
class="proCard mt-4"
|
||
size="small"
|
||
:segmented="{ content: true }"
|
||
title="表格数据"
|
||
>
|
||
<n-scrollbar style="max-height: 520px">
|
||
<JsonViewer :value="response" :expand-depth="5" copyable boxed sort class="json-width" />
|
||
</n-scrollbar>
|
||
</n-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref } from 'vue';
|
||
import { UploadCustomRequestOptions, useMessage } from 'naive-ui';
|
||
import { DownloadOutlined } from '@vicons/antd';
|
||
import { ImportExcel } from '@/api/addons/hgexample/comp';
|
||
import type { UploadFileParams } from '@/utils/http/axios/types';
|
||
import { JsonViewer } from 'vue3-json-viewer';
|
||
import 'vue3-json-viewer/dist/index.css';
|
||
|
||
const message = useMessage();
|
||
const response = ref<any>({});
|
||
|
||
function handleUpload(options: UploadCustomRequestOptions) {
|
||
message.loading('正在导入，请稍候...', { duration: 1200 });
|
||
const params: UploadFileParams = {
|
||
file: options.file.file as File,
|
||
};
|
||
|
||
ImportExcel(params).then((res) => {
|
||
response.value = res;
|
||
message.destroyAll();
|
||
message.success('解析成功');
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<style lang="less"></style>
|