---初始化后台管理web页面项目

src/components/Import/index.ts

@@ -0,0 +1,4 @@
+import { withInstall } from '/@/utils';
+import importModal from './src/ImportModal.vue';
+
+export const ImportModal = withInstall(importModal);

src/components/Import/src/ImportModal.vue

@@ -0,0 +1,131 @@
+<template>
+  <BasicModal @register="registerModal" :title="title" @cancel="emit('success')">
+    <div class="import-box">
+      <a-upload-dragger
+        v-model:file-list="fileList"
+        name="file"
+        :multiple="true"
+        :action="action"
+        :beforeUpload="beforeUpload"
+        :data="data"
+        accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+        :headers="{ Authorization: `Bearer ${getToken()}` }"
+      >
+        <img src="/src/assets/images/import.png" />
+        <span class="upload-tip">只能上传Excel文件，且不能超过1G</span>
+        <span class="upload-text">将文件拖到此处，或<b>点击上传</b></span>
+          <div v-if="VITE_GLOB_UPLOAD_ALERT_TIP?.trim()" style="color: red; margin-top: 8px;">
+              {{VITE_GLOB_UPLOAD_ALERT_TIP}}
+          </div>
+      </a-upload-dragger>
+      <a-button size="large" @click="downLoadTemplate">下载模板</a-button>
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { getAppEnvConfig } from '/@/utils/env';
+  import { getToken } from '/@/utils/auth';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { downloadFile } from '/@/api/sys/download';
+  import { downloadByData } from '/@/utils/file/download';
+
+  const props = defineProps({
+    importUrl: String,
+    data: Object,
+  });
+  const { VITE_GLOB_UPLOAD_ALERT_TIP } = getAppEnvConfig();
+  const title = ref('');
+  const fileList = ref();
+  const importType = ref('');
+  const { notification } = useMessage();
+
+  const emit = defineEmits(['success', 'register']);
+  let downLoadUrl;
+  let templateApi;
+  let templateTitle;
+
+  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
+    title.value = data.title;
+    downLoadUrl = data.downLoadUrl;
+    importType.value = data.type;
+    templateApi = data.api;
+    templateTitle = data.templateTitle;
+    fileList.value = [];
+    setModalProps({
+      destroyOnClose: true,
+      maskClosable: false,
+      footer: null,
+      width: 800,
+      height: 500,
+    });
+  });
+  const action = computed(() => {
+    return getAppEnvConfig().VITE_GLOB_API_URL + props.importUrl;
+  });
+
+  const beforeUpload = (file) => {
+    const isFile1000M = file.size / 1024 / 1024 > 1000;
+    if (isFile1000M) {
+      notification.error({
+        message: 'Tip',
+        description: '文件大小不能超过1G！',
+      });
+      return false;
+    }
+  };
+
+  const downLoadTemplate = async () => {
+    const method = importType.value || 'GET';
+    let res;
+    if (templateApi) {
+      res = await templateApi();
+    } else {
+      res = await downloadFile(downLoadUrl, { isTemplate: true, ...props.data }, method);
+    }
+    downloadByData(
+      res.data,
+      `${templateTitle || '模板'}.xlsx`,
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    );
+  };
+</script>
+<style lang="less" scoped>
+  .import-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin: 0 15px 15px;
+
+    img {
+      cursor: pointer;
+    }
+
+    .upload-tip {
+      position: absolute;
+      bottom: 120px;
+      right: 57px;
+      font-size: 13px;
+    }
+
+    .upload-text {
+      position: absolute;
+      bottom: 55px;
+      right: 88px;
+      font-weight: 600;
+      font-size: 16px;
+      color: #000;
+
+      b {
+        color: #429fff;
+      }
+    }
+  }
+
+  :deep(.ant-upload.ant-upload-drag) {
+    background: #fff;
+    border: none;
+  }
+</style>