feat: 新增文件上传

src/api/voice/file.js

@@ -0,0 +1,12 @@
+import request from '@/utils/request'
+
+export const fileApi = {
+  /**
+   * 停水公告 - 查询
+   */
+  getImportFailList: params => request({
+    url: `/excel/getImportFailList`,
+    params
+  }),
+
+}

src/views/voice/upload/index.vue

@@ -0,0 +1,138 @@
+<script setup>
+import { getToken } from "@/utils/auth";
+import { fileApi } from '@/api/voice/file';
+import { onMounted } from "vue";
+
+const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + "/excel/updateUserInfoFromExcel "); // 上传文件服务器地址
+const { proxy } = getCurrentInstance();
+const headers = ref({ Authorization: "Bearer " + getToken() });
+const fileList = ref([]);
+const fileInfoList = ref([]);
+
+const tableData = [
+  {
+    code: 'C12342384792834',
+    phone: '15001033588',
+  },
+  {
+    code: 'C12342384792835',
+    phone: '15001033566',
+  },
+  {
+    code: 'C12342384792836',
+    phone: '15001033588',
+  },
+  {
+    code: 'C12342384792837',
+    phone: '15001033509',
+  }
+]
+
+const init = () => {
+  fileApi.getImportFailList().then(({ data }) => {
+    fileInfoList.value = data.map(item => {
+      return JSON.parse(item.content) || []
+    })
+  })
+}
+
+// 上传成功回调
+function handleUploadSuccess(res) {
+  if (res.code === 200) {
+    proxy.$modal.msgSuccess("文件上传成功");
+    fileList.value = [];
+    init();
+  }
+}
+
+onMounted(() => {
+  init();
+})
+</script>
+
+<template>
+  <div class="upload-container">
+    <div class="layout-card">
+      <h4 class="title">文件上传</h4>
+      <el-scrollbar style="height: calc(100% - 58px);">
+        <div class="bg-[#fff] pb-[20px]">
+          <div class="content">
+            <p class="text-[red]">Excel文件 示例:</p>
+            <p class="text-[red]">请严格按照一下格式创建文件，进行导入。</p>
+            <div class="px-[20px] py-[20px] bg-[#eceff6] mt-[20px]">
+              <div class="w-[600px]">
+                <el-table :data="tableData" border>
+                  <el-table-column prop="code" label="用户编号" width="300" />
+                  <el-table-column prop="phone" label="用户手机号" width="300" />
+                </el-table>
+              </div>
+            </div>
+          </div>
+
+        <div class="flex justify-center pt-[20px]">
+          <el-upload accept=".xlsx" :limit="1" :action="uploadFileUrl" :file-list="fileList"
+            :on-success="handleUploadSuccess" :show-file-list="false" :headers="headers" ref="fileUpload">
+            <el-button type="primary" class="w-[200px]" size="large">上传文件</el-button>
+          </el-upload>
+        </div>
+      </div>
+
+        <div class="mt-[20px]">
+          <div v-for="item, index in fileInfoList" :key="index" style="margin-bottom: 20px;" class="bg-[#fff] px-[20px] py-[20px]">
+            <el-descriptions title="导入结果" :column="1">
+              <el-descriptions-item label="导入时间">{{ item.time }}</el-descriptions-item>
+              <el-descriptions-item label="导入成功">{{ item.successNum }}</el-descriptions-item>
+              <el-descriptions-item label="导入失败">{{ item.failNum }}</el-descriptions-item>
+            </el-descriptions>
+            <div class="result">
+              <p class="text-[#606266] text-[14px] font-bold pb-[10px]">
+                <el-divider content-position="left">错误数据</el-divider>
+              </p>
+              <el-table :data="item?.failList || []" border>
+                <el-table-column prop="userNo" label="用户编号" />
+                <el-table-column prop="phone" label="用户手机号" />
+              </el-table>
+            </div>
+            <el-divider />
+          </div>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.upload-container {
+  display: flex;
+  flex-flow: column;
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  // background: #eceff6;
+
+  .layout-card {
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+    border-radius: 8px;
+    // background: #fff;
+
+    .title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 12px;
+      color: #1D2129;
+      font-size: 18px;
+      font-weight: bold;
+      line-height: 26px;
+    }
+
+    .content {
+      padding: 20px;
+      // background: #eceff6;
+    }
+  }
+}
+</style>
+