Browse Source

新增临时用户表和正式用户表导出功能

chenlei 6 months ago
parent
commit
e2e203ad75

+ 24 - 0
src/api/customer/user.js

@@ -53,6 +53,30 @@ export default {
     getOfficialList:params=>{
         return get('/user/official/list',params)
     },
+    /**
+     * 导出用户列表
+     * @param {Object} params
+     * @param {Number} params.Keyword
+     * @param {Number} params.SortParam
+     * @param {Number} params.SortType
+
+     * @returns 
+     */
+    getTemporaryExport:params=>{
+        return get('/user/temporary/export',params)
+    },
+     /**
+     * 导出用户列表
+     * @param {Object} params
+     * @param {Number} params.Keyword
+     * @param {Number} params.SortParam
+     * @param {Number} params.SortType
+
+     * @returns 
+     */
+     getOfficialExport:params=>{
+        return get('/user/official/export',params)
+    },
     /**
      * @param {Number} params.UserId
      * @returns 

+ 12 - 4
src/api/index.js

@@ -19,6 +19,10 @@ const _axios = axios.create(config);
 
 _axios.interceptors.request.use(
   function (config) {
+    // 检查请求路径并设置responseType
+    if (config.url.endsWith('/user/temporary/export') || config.url.endsWith('/user/official/export')) {
+      config.responseType = 'blob'; // 如果是导出excel的请求,则设置responseType为blob
+    }
     // Do something before request is sent
     let auth = localStorage.getItem('token')
     if(auth) {
@@ -38,10 +42,14 @@ _axios.interceptors.response.use(
   function (response) {
     // Do something with response data
     let data
-    if(import.meta.env.MODE==='production'){
-      data=JSON.parse(CryptoJS.Des3Decrypt(response.data,import.meta.env.VITE_APP_RESPONSE_DES_KEY));//解密
-    }else{
-      data=response.data
+    let isExportRequest = response.config.url.endsWith('/user/temporary/export') || response.config.url.endsWith('/user/official/export');
+    if (import.meta.env.MODE === 'production' && !isExportRequest) {
+      data = JSON.parse(CryptoJS.Des3Decrypt(response.data, import.meta.env.VITE_APP_RESPONSE_DES_KEY)); // 解密
+    } else {
+      data = response.data;
+      if (isExportRequest) {
+        data.fileName = decodeURIComponent((response.headers['content-disposition'].split("=utf-8''"))[1]);
+      }
     }
     
 

+ 25 - 1
src/views/customer/TempUserList.vue

@@ -87,13 +87,37 @@ function Details(row) {
     show.value = true;
     userId.value = row.Id + '';
 }
+
+/* 下载数据 */
+async function downloadExcel() {
+    const res = await apiCustomerUser.getTemporaryExport(
+        {
+            Keyword:tableQuery.keyWord,
+            SortParam:tableQuery.sortParam,
+            SortType:tableQuery.sortType,
+        }
+    )
+    const blob = new Blob([res], {
+        type: "application/vnd.ms-excel;charset=utf-8",
+    });
+    let fileName = res.fileName;
+
+    const elink = document.createElement("a");
+    elink.download = fileName; //命名下载名称
+    elink.style.display = "none";
+    elink.href = URL.createObjectURL(blob);
+    document.body.appendChild(elink);
+    elink.click(); // 点击下载
+    URL.revokeObjectURL(elink.href); // 释放URL 对象
+    document.body.removeChild(elink); // 释放标
+}
 </script>
 
 <template>
     <el-card class="box-card">
         <div class="temp-user-list-wrap">
             <div class="search-box">
-                <el-button type="primary" style="margin-right: 20px;">导出表格</el-button>
+                <el-button type="primary" style="margin-right: 20px;"  @click="downloadExcel">导出表格</el-button>
                 <el-input 
                     v-model="tableQuery.keyWord"
                     :prefix-icon="Search" clearable

+ 24 - 1
src/views/customer/UserList.vue

@@ -118,6 +118,29 @@ function changeDatePicker(val) {
 function userDetails(row) {
     showUserDialog.value = true;
 }
+
+/* 下载数据 */
+async function downloadExcel() {
+    const res = await apiCustomerUser.getOfficialExport(
+        {
+            Keyword:tableQuery.keyWord,
+            SortParam:tableQuery.sortParam,
+            SortType:tableQuery.sortType,
+        }
+    )
+    const blob = new Blob([res], {
+        type: "application/vnd.ms-excel;charset=utf-8",
+    });
+    let fileName = res.fileName;
+    const elink = document.createElement("a");
+    elink.download = fileName; //命名下载名称
+    elink.style.display = "none";
+    elink.href = URL.createObjectURL(blob);
+    document.body.appendChild(elink);
+    elink.click(); // 点击下载
+    URL.revokeObjectURL(elink.href); // 释放URL 对象
+    document.body.removeChild(elink); // 释放标
+}
 </script>
 
 <template>
@@ -140,7 +163,7 @@ function userDetails(row) {
                     </el-date-picker>
                 </div>
                 <div class="search-box">
-                    <el-button type="primary" style="margin-right: 20px;">导出表格</el-button>
+                    <el-button type="primary" style="margin-right: 20px;" @click="downloadExcel">导出表格</el-button>
                     <el-input 
                         v-model="tableQuery.keyWord"
                         :prefix-icon="Search" clearable

+ 0 - 13
src/views/products/components/PackageDialog.vue

@@ -195,19 +195,6 @@ function handleValidPrice() {
   </el-dialog>
 </template>
 
-
-<style scoped>
-.no-spinner::-webkit-inner-spin-button,
-.no-spinner::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-/* 对于 Firefox */
-.no-spinner {
-  -moz-appearance: textfield;
-}
-</style>
-
 <style scoped lang="scss">
 .dialog-content {
   width: 100%;