eas_webadmin/src/views/management/student/index.vue

<template>
  <div class="h-full bg-white">
    <fs-crud ref="crudRef" v-bind="crudBinding" />
    <n-modal v-model:show="showModal" preset="dialog" title="Dialog">
      <template #header>
        <div>Excel 文件导入</div>
      </template>
      <div style="padding: 1rem">
        <n-upload
          multiple
          directory-dnd
          :action="uploadFile"
          :max="1"
          @before-upload="beforeUpload"
          @finish="handleFinish"
        >
          <n-upload-dragger>
            <div style="margin-bottom: 12px">
              <n-icon size="48" :depth="3">
                <archive-icon />
              </n-icon>
            </div>
            <n-text style="font-size: 16px"> 点击或者拖动文件到该区域来上传 </n-text>
            <n-p depth="3" style="margin: 8px 0 0 0">
              请不要上传敏感数据，比如你的银行卡号和密码，信用卡号有效期和安全码
            </n-p>
          </n-upload-dragger>
        </n-upload>
      </div>
    </n-modal>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import type { UploadFileInfo } from 'naive-ui';
import { useFs } from '@fast-crud/fast-crud';
import { getServiceEnvConfig } from '~/.env-config';
import createCrudOptions from './crud';

const { url, proxyPattern } = getServiceEnvConfig(import.meta.env);

const showModal = ref(false);
function openModal() {
  showModal.value = true;
}
function closeModal() {
  showModal.value = false;
}
const context: any = {
  openModal,
  closeModal
};
const { crudRef, crudBinding, crudExpose } = useFs({ createCrudOptions, context });
const uploadFile = proxyPattern ? `${proxyPattern}/student/importExcel` : `${url}/student/importExcel`;
function handleFinish() {
  crudExpose.doRefresh();
  closeModal();
  window.$message?.success('上传成功');
}
function beforeUpload(data: { file: UploadFileInfo; fileList: UploadFileInfo[] }) {
  if (data.file.file?.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
    window.$message?.error('只能上传 Excel 格式的表格文件 请重新上传');
    return false;
  }
  return true;
}
onMounted(() => {
  crudExpose.doRefresh();
});
</script>

<style scoped></style>