This commit is contained in:
孟帅
2024-03-07 20:08:56 +08:00
parent 6dd8cbadad
commit 0fbc1ad47c
246 changed files with 9441 additions and 2293 deletions

View File

@@ -0,0 +1,68 @@
<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>