file upload and export

src/views/dataList/enterprise/index.vue

@@ -61,7 +61,12 @@
         >
       </el-col>
       <el-col :span="1.5">
-        <el-button type="info" plain icon="upload" size="default" @click=""
+        <el-button
+          type="info"
+          plain
+          icon="upload"
+          size="default"
+          @click="handleImport"
           >导入</el-button
         >
       </el-col>
@@ -135,6 +140,53 @@
       v-model:limit="queryParams.page_size"
       @pagination="getList"
     />
+
+    <!-- 用户导入对话框 -->
+    <el-dialog
+      :title="upload.title"
+      v-model="upload.open"
+      width="400px"
+      append-to-body
+    >
+      <el-upload
+        ref="uploadRef"
+        :limit="1"
+        accept=".xlsx, .xls"
+        :headers="upload.headers"
+        :action="upload.url"
+        :disabled="upload.isUploading"
+        :on-progress="handleFileUploadProgress"
+        :on-success="handleFileSuccess"
+        :auto-upload="false"
+        drag
+      >
+        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <template #tip>
+          <div class="el-upload__tip text-center">
+            <!-- <div class="el-upload__tip">
+              <el-checkbox
+                v-model="upload.updateSupport"
+              />是否更新已经存在的用户数据
+            </div> -->
+            <span>仅允许导入xls、xlsx格式文件。</span>
+            <!-- <el-link
+              type="primary"
+              :underline="false"
+              style="font-size: 12px; vertical-align: baseline"
+              @click="importTemplate"
+              >下载模板</el-link
+            > -->
+          </div>
+        </template>
+      </el-upload>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitFileForm">确 定</el-button>
+          <el-button @click="upload.open = false">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -144,13 +196,20 @@ import {
   companyExport,
   companyDelete,
 } from "@/api/dataList/enterprise";
-import { download } from "@/utils/request";
-import dayjs from "dayjs";
+import { getToken } from "@/utils/auth";
+import axios from "axios";
+// import { download } from "@/utils/request";
+// import dayjs from "dayjs";
+import { tansParams, blobValidate } from "@/utils/ruoyi";
+import { saveAs } from "file-saver";
 import { tenantSelect } from "@/api/subPlatform/tenant";
 import { reactive, ref, toRefs } from "vue";
 import { useRouter } from "vue-router";
 import { enterpriseOptions } from "@/utils/parameter";
-import { ElMessageBox } from "element-plus";
+import { ElLoading, ElMessageBox } from "element-plus";
+import request from "@/utils/request";
+import dayjs from "dayjs";
+
 const router = useRouter();
 const data = reactive({
   queryParams: {
@@ -161,6 +220,23 @@ const data = reactive({
     tenantId: undefined,
   },
 });
+
+/*** 用户导入参数 */
+const upload = reactive({
+  // 是否显示弹出层（用户导入）
+  open: false,
+  // 弹出层标题（用户导入）
+  title: "",
+  // 是否禁用上传
+  isUploading: false,
+  // 是否更新已经存在的用户数据
+  // updateSupport: 0,
+  // 设置上传的请求头部
+  headers: { Authorization: "Bearer " + getToken() },
+  // 上传的地址
+  url: import.meta.env.VITE_APP_BASE_API + "/business/enterprise/importData",
+});
+
 const { queryParams } = toRefs(data);
 const showSearch = ref(true);
 const siteList = ref([]);
@@ -205,6 +281,42 @@ const handleDetail = (id) => {
     query: { id },
   });
 };
+const uploadRef = ref(null);
+/** 导入按钮操作 */
+function handleImport() {
+  upload.title = "用户导入";
+  upload.open = true;
+}
+/** 下载模板操作 */
+function importTemplate() {
+  proxy.download(
+    "system/user/importTemplate",
+    {},
+    `user_template_${new Date().getTime()}.xlsx`
+  );
+}
+/**文件上传中处理 */
+const handleFileUploadProgress = (event, file, fileList) => {
+  upload.isUploading = true;
+};
+/** 文件上传成功处理 */
+const handleFileSuccess = (response, file, fileList) => {
+  upload.open = false;
+  upload.isUploading = false;
+  uploadRef.value.handleRemove(file);
+  ElMessageBox.alert(
+    "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
+      response.msg +
+      "</div>",
+    "导入结果",
+    { dangerouslyUseHTMLString: true }
+  );
+  getList();
+};
+/** 提交上传文件 */
+function submitFileForm() {
+  uploadRef.value.submit();
+}
 const handleDelete = async (id) => {
   ElMessageBox.confirm(`是否确认删除编号为${id}的数据项？`)
     .then(async () => {
@@ -214,13 +326,51 @@ const handleDelete = async (id) => {
     })
     .catch(() => {});
 };
-const handleExport = () => {
-  ElMessageBox.confirm(`是否确认企业列表？`)
-    .then(() => {
-      download("/business/enterprise/export", {}, "res.xls");
-      // companyExport();
+
+let downloadLoadingInstance;
+const download = (url, filename) => {
+  downloadLoadingInstance = ElLoading.service({
+    text: "正在下载数据，请稍候",
+    background: "rgba(0, 0, 0, 0.7)",
+  });
+  return request
+    .get(url, {
+      // transformRequest: [
+      //   (params) => {
+      //     return tansParams(params);
+      //   },
+      // ],
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      responseType: "blob",
     })
-    .catch(() => {});
+    .then(async (data) => {
+      const isLogin = await blobValidate(data);
+      if (isLogin) {
+        const blob = new Blob([data]);
+        saveAs(blob, filename);
+      } else {
+        const resText = await data.text();
+        const rspObj = JSON.parse(resText);
+        const errMsg =
+          errorCode[rspObj.code] || rspObj.msg || errorCode["default"];
+        ElMessage.error(errMsg);
+      }
+      downloadLoadingInstance.close();
+    })
+    .catch((r) => {
+      console.error(r);
+      ElMessage.error("下载文件出现错误，请联系管理员！");
+      downloadLoadingInstance.close();
+    });
+};
+
+const handleExport = () => {
+  ElMessageBox.confirm(`是否确认企业列表？`).then(() => {
+    download(
+      `/business/enterprise/export`,
+      `企业信息(${dayjs().format("YYYYMMDDHHmmss")}).xlsx`
+    );
+  });
 };
 getList();
 getSiteList();