zsjz-ai/ai-frontend/packages/trans/views/aiBaseStation/components/BaseStationImportModal.vue

<template>
  <BasicModal
    :open="open"
    title="导入基站数据"
    okText="导入"
    :confirmLoading="submitting"
    :maskClosable="false"
    :keyboard="false"
    :width="520"
    :minHeight="180"
    wrapClassName="ai-base-station-import-modal"
    @update:open="handleOpenChange"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <div class="base-station-import-modal">
      <div class="base-station-import-modal__toolbar">
        <span class="base-station-import-modal__tip">仅支持导入 `.xls` 格式文件，单次仅允许选择一个文件。</span>
        <Button type="link" class="base-station-import-modal__template" @click="emit('fetch-template')">
          获取导入模版
        </Button>
      </div>
      <Upload
        accept=".xls"
        :file-list="fileList"
        :before-upload="beforeUpload"
        @remove="handleRemove"
      >
        <Button>
          <template #icon><UploadOutlined /></template>
          选择文件
        </Button>
      </Upload>
      <div v-if="uploadInfo" class="base-station-import-modal__progress">{{ uploadInfo }}</div>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { Button, Upload } from 'ant-design-vue';
  import type { FileType } from 'ant-design-vue/es/upload/interface';
  import type { AxiosProgressEvent } from 'axios';
  import { UploadOutlined } from '@ant-design/icons-vue';
  import { BasicModal } from '@jeesite/core/components/Modal';
  import { useMessage } from '@jeesite/core/hooks/web/useMessage';
  import { useUserStoreWithOut } from '@jeesite/core/store/modules/case';
  import {
    importBaseStationFile,
    type BaseStationImportPayload,
    type BaseStationImportResponse,
  } from '@jeesite/trans/api/baseStationQueryApi';

  type BaseStationImportSuccessPayload = BaseStationImportPayload | string | Recordable | null | undefined;

  const props = defineProps<{
    open: boolean;
  }>();

  const emit = defineEmits<{
    (e: 'update:open', value: boolean): void;
    (e: 'success', payload: BaseStationImportSuccessPayload): void;
    (e: 'fetch-template'): void;
  }>();

  const { createMessage } = useMessage();

  const fileList = ref<FileType[]>([]);
  const uploadInfo = ref('');
  const submitting = ref(false);

  const resetState = () => {
    fileList.value = [];
    uploadInfo.value = '';
    submitting.value = false;
  };

  watch(
    () => props.open,
    (open) => {
      if (!open) {
        resetState();
      }
    },
  );

  const beforeUpload = (file: FileType) => {
    const fileName = String(file.name || '');
    if (!/\.xls$/i.test(fileName)) {
      createMessage.warning('请选择 .xls 格式文件');
      fileList.value = [];
      return false;
    }
    fileList.value = [file];
    return false;
  };

  const handleRemove = () => {
    fileList.value = [];
  };

  const handleOpenChange = (value: boolean) => {
    emit('update:open', value);
  };

  const handleCancel = () => {
    emit('update:open', false);
  };

  const handleUploadProgress = (progressEvent: AxiosProgressEvent) => {
    const total = Number(progressEvent.total || 0);
    if (!total) return;
    const percent = Math.min(100, Math.floor((Number(progressEvent.loaded || 0) / total) * 100));
    uploadInfo.value = percent >= 100 ? '' : `正在导入，请稍候 ${percent}%...`;
  };

  const getCaseId = () => {
    const caseId = useUserStoreWithOut().getCaseInfo?.id;
    if (caseId !== undefined && caseId !== null && String(caseId).trim()) {
      return caseId;
    }
    const localCaseId = window.localStorage.getItem('caseId');
    return localCaseId && localCaseId.trim() ? localCaseId.trim() : undefined;
  };

  const handleSubmit = async () => {
    const currentFile = fileList.value[0];
    if (!currentFile) {
      createMessage.warning('请先选择要导入的基站文件');
      return;
    }

    try {
      submitting.value = true;
      const file = ((currentFile as any).originFileObj || currentFile) as File;
      const payload = (await importBaseStationFile({ file }, handleUploadProgress, getCaseId())) as BaseStationImportResponse;
      const code = Number(payload.code || 0);
      const message = payload.message || payload.msg || (code === 200 ? '导入成功' : '导入失败');
      if (code !== 200) {
        createMessage.error(message);
        return;
      }
      emit('success', payload.data ?? payload);
      emit('update:open', false);
      createMessage.success(message);
    } catch (error: any) {
      createMessage.error(error?.message || '导入基站数据失败');
    } finally {
      submitting.value = false;
      uploadInfo.value = '';
    }
  };
</script>

<style lang="less">
  .ai-base-station-import-modal {
    .ant-modal-body {
      padding: 20px 24px 24px;
    }
  }

  .base-station-import-modal {
    display: flex;
    flex-direction: column;
    gap: 16px;

    .base-station-import-modal__toolbar {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .base-station-import-modal__tip {
      color: #6b7280;
      font-size: 13px;
      line-height: 20px;
    }

    .base-station-import-modal__template {
      padding-right: 0;
      white-space: nowrap;
    }

    .base-station-import-modal__progress {
      color: #2563eb;
      font-size: 12px;
      line-height: 18px;
    }
  }
</style>