库位导入显示进度条

smart-admin-web-typescript/src/api/business/base/location/location-api.ts

@@ -65,4 +65,11 @@ export const locationApi = {
     multipleInsert: (param: object) => {
         return postRequest('/location/multipleInsert', param);
     },
+
+    /**
+     * 导入  @author  hj
+     */
+    importLocations: (file: object, config = {}) => {
+        return postRequest('/location/importLocations', file, config);
+    },
 };

smart-admin-web-typescript/src/lib/axios.ts

@@ -146,11 +146,12 @@ export const request = (config) => {
 /**
  * post请求
  */
-export const postRequest = (url, data) => {
+export const postRequest = (url, data,configs = {}) => {
   return request({
     data,
     url,
     method: 'post',
+    ...configs,
   });
 };
 

smart-admin-web-typescript/src/views/business/base/location/location-list.vue

@@ -69,11 +69,18 @@
 
         <a-button @click="showMultipleInsertForm" type="primary" v-privilege="'location:multipleInsert'">
           <template #icon>
-            <EditOutlined/>
+            <PlusOutlined/>
           </template>
           批量新建
         </a-button>
 
+        <a-button @click="showImportModal" type="primary" v-privilege="'location:importLocations'">
+          <template #icon>
+            <ImportOutlined/>
+          </template>
+          导入
+        </a-button>
+
       </div>
       <div class="smart-table-setting-block">
         <TableOperator v-model="columns" :tableId="TABLE_ID_CONST.BUSINESS.BASE.LOCATION" :refresh="queryData"/>
@@ -166,6 +173,39 @@
     <!--    批量新建-->
     <MultipleInsert ref="multipleInsertFormRef" @reloadList="queryData"/>
 
+    <a-modal v-model:open="importModalShowFlag" title="导入" @onCancel="hideImportModal" @ok="hideImportModal">
+      <div style="text-align: center; width: 400px; margin: 0 auto">
+        <a-button @click="downloadExcel">
+          <download-outlined/>
+          第一步：下载模板
+        </a-button>
+        <br/>
+        <br/>
+        <a-upload
+            v-model:fileList="fileList"
+            name="file"
+            :multiple="false"
+            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+            accept=".xls,.xlsx"
+            :before-upload="beforeUpload"
+            @remove="handleRemove"
+        >
+          <a-button>
+            <upload-outlined/>
+            第二步：选择文件
+          </a-button>
+        </a-upload>
+
+        <br/>
+        <a-button @click="onImportLocations">
+          <ImportOutlined/>
+          第三步：开始导入
+        </a-button>
+        <!-- 新增进度条 -->
+        <a-progress v-if="uploadProgress > 0" :percent="uploadProgress" status="active" />
+      </div>
+    </a-modal>
+
   </a-card>
 </template>
 <script setup lang="ts">
@@ -185,6 +225,7 @@ import SmartEnumSelect from '/@/components/framework/smart-enum-select/index.vue
 import DictPreview from '/@/components/dict-preview/index.vue';
 import {useDict} from '/@/utils/dict';
 import MultipleInsert from "/@/views/business/base/location/multiple-insert.vue";
+import { UploadFile } from 'ant-design-vue';
 
 
 const locType = useDict('LOC_TYPE');
@@ -407,4 +448,82 @@ const multipleInsertFormRef = ref();
 function showMultipleInsertForm() {
   multipleInsertFormRef.value.showMultipleInsert();
 }
+
+// ------------------------------- 导出和导入 ---------------------------------
+// 导入弹窗
+const importModalShowFlag = ref(false);
+
+const fileList = ref<UploadFile[]>([])
+
+// 新增上传进度
+const uploadProgress = ref(0);
+
+// 显示导入
+function showImportModal() {
+  fileList.value = [];
+  uploadProgress.value = 0;
+  importModalShowFlag.value = true;
+}
+
+// 关闭 导入
+function hideImportModal() {
+  importModalShowFlag.value = false;
+  uploadProgress.value = 0;
+}
+
+//下载模板
+function downloadExcel() {
+  window.open('https://smartadmin.vip/cdn/%E5%95%86%E5%93%81%E6%A8%A1%E6%9D%BF.xls');
+}
+
+// 移除文件
+function handleRemove(file: UploadFile) {
+  const index = fileList.value.indexOf(file);
+  const newFileList = fileList.value.slice();
+  newFileList.splice(index, 1);
+  fileList.value = newFileList;
+}
+
+// 上传文件
+function beforeUpload(file:UploadFile) {
+  fileList.value = [...(fileList.value || []), file];
+
+  return false;
+}
+
+
+
+//导入
+async function onImportLocations() {
+  console.log(fileList.value.length);
+  if (fileList.value.length === 0) {
+    return message.error('请选择文件');
+  }
+  const formData = new FormData();
+  fileList.value.forEach((file: UploadFile) => {
+    formData.append('file', file.originFileObj!);
+  });
+
+  SmartLoading.show();
+  try {
+    // 补全进度条的显示代码
+    const config = {
+      onUploadProgress: (progressEvent) => {
+        const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+        // 更新进度条状态
+        console.log(`上传进度: ${percentCompleted}%`);
+        uploadProgress.value = percentCompleted;
+      },
+    };
+    let res = await locationApi.importLocations(formData, config);
+    message.success(res.msg);
+    await queryData();
+  } catch (e) {
+    smartSentry.captureError(e);
+    message.error('导入失败');
+  } finally {
+    SmartLoading.hide();
+  }
+}
+
 </script>