暂存

src/api/export.ts

@@ -1,17 +1,11 @@
-import { http } from "../utils/http";
+import { http } from "../utils/http/index1";
 import { loadEnv } from "@build/index";
 
-const { VITE_PROXY_USER_REAL } = loadEnv();
-
-interface postType extends Promise<any> {
-  data?: object;
-  code?: number;
-  message?: string;
-}
+const { VITE_PROXY_DOMAIN_REAL } = loadEnv();
 
 //导出
-export const httpExport = (url: string, data?: object): postType => {
-  return http.request("post", `${VITE_PROXY_USER_REAL}admin/${url}`, {
+export const httpExport = (url: string, data?: object): any => {
+  return http.request("post", `${VITE_PROXY_DOMAIN_REAL}admin/${url}`, {
     data,
     responseType: "blob"
   });

src/utils/export.ts

@@ -1,14 +1,13 @@
 import { ElMessage } from "element-plus";
 import { utils, writeFile } from "xlsx";
 import { httpExport } from "/@/api/export";
-import { responseHandle } from "./responseHandle";
 
 type Options<T> = {
   //导出方式 http(网络请求) front(纯前端导出)
   type: "front" | "http";
   //type为http时需要url作为请求url
   url?: string;
-  //type未http时请求的参数
+  //type为http时请求的参数
   params?: any;
   //type为front时 需要传入导出的数据
   data?: T[];
@@ -16,14 +15,27 @@ type Options<T> = {
   columns?: any[];
   //导出文件名
   name?: string;
+  //导出文件类型
+  httpType?: "zip" | "excel";
 };
-
+const httpTypeList = [
+  {
+    key: "zip",
+    value: "aplication/zip",
+    fileName: "zip"
+  },
+  {
+    key: "excel",
+    value: "application/vnd.ms-excel",
+    fileName: "xlsx"
+  }
+];
 //要排除的列
 const EXCLUDE_COLUMNS = ["序号", "操作"];
 
 //纯前端导出
 function frontEndExport<T>(
-  _options: Pick<Options<T>, "data" | "columns" | "name">
+  _options: Pick<Options<T>, "data" | "columns" | "name" | "httpType">
 ) {
   const { data, columns, name } = _options;
 
@@ -44,48 +56,37 @@ function frontEndExport<T>(
   utils.book_append_sheet(workBook, workSheet, "sheet1");
 
   //导出
-  writeFile(workBook, name);
+  writeFile(workBook, name + ".xlsx");
 }
 
 //配合后端文件流导出
 async function httpRequsetExport<T>(
-  _options: Pick<Options<T>, "url" | "name" | "params">
+  _options: Pick<Options<T>, "url" | "name" | "params" | "httpType">
 ) {
   if (!_options.url) return;
+  if (!_options.httpType) _options.httpType = "zip";
+  const { value: httpHeader, fileName } =
+    httpTypeList.find(item => item.key === _options.httpType) || {};
 
-  const { code, message, data } = await httpExport(_options.url, {
+  const res = await httpExport(_options.url, {
     data: _options.params
   });
-
-  function handler() {
-    const url = window.URL.createObjectURL(
-      //todo:blob对象类型
-      new Blob([data], {
-        type: ""
-      })
-    );
-
-    //创建a标签 执行下载
-    const link = document.createElement("a");
-    link.style.display = "none";
-    link.href = url;
-    link.setAttribute("download", _options.name);
-
-    //删除a标签 释放url
-    document.appendChild(link);
-    link.click();
-    link.remove();
-    window.URL.revokeObjectURL(url);
-  }
-
-  responseHandle({
-    code,
-    handler,
-    message,
-    logout: () => {
-      console.log("todo:登出");
-    }
-  });
+  const url = window.URL.createObjectURL(
+    //todo:blob对象类型
+    new Blob([res], {
+      type: httpHeader
+    })
+  ); //创建a标签 执行下载
+  const link = document.createElement("a");
+  link.style.display = "none";
+  link.href = url;
+  link.setAttribute("download", _options.name + "." + fileName);
+
+  //删除a标签 释放url
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  window.URL.revokeObjectURL(url);
 }
 
 function generatorResult<T>({
@@ -114,15 +115,16 @@ export function exportPageContent<T = any>({
   url,
   columns,
   data,
-  name: _name
+  name: _name,
+  httpType
 }: Options<T>) {
-  const name = _name ? _name : "导出数据.xlsx";
+  const name = _name ? _name : "导出数据";
   switch (type) {
     case "front":
       frontEndExport({ data, columns, name });
       break;
     case "http":
-      httpRequsetExport({ url, name });
+      httpRequsetExport({ url, name, httpType });
       break;
   }
 }

src/utils/http/index1.ts

@@ -0,0 +1,156 @@
+import Axios, { AxiosInstance, AxiosRequestConfig } from "axios";
+import {
+  resultType,
+  PureHttpError,
+  RequestMethods,
+  PureHttpResponse,
+  PureHttpRequestConfig
+} from "./types";
+import qs from "qs";
+import NProgress from "../progress";
+// import { loadEnv } from "@build/index";
+import { getToken } from "/@/utils/auth";
+import { useUserStoreHook } from "/@/store/modules/user";
+
+// 加载环境变量 VITE_PROXY_DOMAIN（开发环境）  VITE_PROXY_DOMAIN_REAL（打包后的线上环境）
+// const { VITE_PROXY_DOMAIN, VITE_PROXY_DOMAIN_REAL } = loadEnv();
+
+// 相关配置请参考：www.axios-js.com/zh-cn/docs/#axios-request-config-1
+const defaultConfig: AxiosRequestConfig = {
+  // baseURL:
+  //   process.env.NODE_ENV === "production"
+  //     ? VITE_PROXY_DOMAIN_REAL
+  //     : VITE_PROXY_DOMAIN,
+
+  baseURL: "",
+  timeout: 10000,
+  headers: {
+    Accept: `aplication/zip`
+  },
+  responseType: "blob",
+  // 数组格式参数序列化
+  paramsSerializer: params => qs.stringify(params, { indices: false })
+};
+
+class PureHttp {
+  constructor() {
+    this.httpInterceptorsRequest();
+    this.httpInterceptorsResponse();
+  }
+  /** 初始化配置对象 */
+  private static initConfig: PureHttpRequestConfig = {};
+
+  /** 保存当前Axios实例对象 */
+  private static axiosInstance: AxiosInstance = Axios.create(defaultConfig);
+
+  /** 请求拦截 */
+  private httpInterceptorsRequest(): void {
+    PureHttp.axiosInstance.interceptors.request.use(
+      (config: PureHttpRequestConfig) => {
+        console.log(config);
+        const $config = config;
+        // $config.headers = {
+        //   Accept: `aplication/zip`
+        // };
+        // 开启进度条动画
+        NProgress.start();
+        // 优先判断post/get等方法是否传入回掉，否则执行初始化设置等回掉
+        if (typeof config.beforeRequestCallback === "function") {
+          config.beforeRequestCallback($config);
+          return $config;
+        }
+        if (PureHttp.initConfig.beforeRequestCallback) {
+          PureHttp.initConfig.beforeRequestCallback($config);
+          return $config;
+        }
+        const token = getToken();
+        if (token) {
+          config.data["token"] = token;
+          return $config;
+        } else {
+          return $config;
+        }
+      },
+      error => {
+        return Promise.reject(error);
+      }
+    );
+  }
+
+  /** 响应拦截 */
+  private httpInterceptorsResponse(): void {
+    const instance = PureHttp.axiosInstance;
+    instance.interceptors.response.use(
+      (response: PureHttpResponse) => {
+        const $config = response.config;
+        // 关闭进度条动画
+        NProgress.done();
+        // 优先判断post/get等方法是否传入回掉，否则执行初始化设置等回掉
+        if (typeof $config.beforeResponseCallback === "function") {
+          $config.beforeResponseCallback(response);
+          return response.data;
+        }
+        if (PureHttp.initConfig.beforeResponseCallback) {
+          PureHttp.initConfig.beforeResponseCallback(response);
+          return response.data;
+        }
+        return response.data;
+      },
+      (error: PureHttpError) => {
+        const $error = error;
+        $error.isCancelRequest = Axios.isCancel($error);
+        // 关闭进度条动画
+        NProgress.done();
+        // 所有的响应异常 区分来源为取消请求/非取消请求
+        return Promise.reject($error);
+      }
+    );
+  }
+
+  /** 通用请求工具函数 */
+  public request<T>(
+    method: RequestMethods,
+    url: string,
+    param?: AxiosRequestConfig,
+    axiosConfig?: PureHttpRequestConfig
+  ): Promise<T> {
+    const config = {
+      method,
+      url,
+      ...param,
+      ...axiosConfig
+    } as PureHttpRequestConfig;
+
+    // 单独处理自定义请求/响应回掉
+    return new Promise((resolve, reject) => {
+      PureHttp.axiosInstance
+        .request(config)
+        .then((response: undefined) => {
+          resolve(response);
+        })
+        .catch(error => {
+          reject(error);
+        });
+    });
+  }
+
+  /** 单独抽离的post工具函数 */
+  public post<T, P>(
+    url: string,
+    params?: T,
+    config?: PureHttpRequestConfig
+  ): Promise<P> {
+    return this.request<P>("post", url, params, config);
+  }
+
+  /** 单独抽离的get工具函数 */
+  public get<T, P>(
+    url: string,
+    params?: T,
+    config?: PureHttpRequestConfig
+  ): Promise<P> {
+    return this.request<P>("get", url, params, config);
+  }
+}
+
+export const http = new PureHttp();

src/views/mobile/exchangeOrder/index.vue

@@ -1,40 +1,56 @@
 <script setup lang="ts">
-import { usePageSearch } from "/@/components/PageSearch";
+import { ref, unref } from "vue";
 import searchConfig from "./config/search.config";
 import contentConfig from "./config/content.config";
 import PageAuth from "/@/components/PageAuth";
 import { PageModal, usePageModal } from "/@/components/PageModal";
 import modalConfig from "./config/modal.config";
-import { useRouter } from "vue-router";
-import PageContainer, {
-  type Events,
-  type Hooks
-} from "/@/components/PageContainer";
-
+import { PageContent } from "/@/components/PageContent";
+import type { PageContentInstance } from "/@/components/PageContent";
+import { PageSearch, usePageSearch } from "/@/components/PageSearch";
+import { exportPageContent } from "/@/utils/export";
 const pageName = "order";
-const basePath = "/sellOut/projectDetail";
-// , handleResetClick, handleSearchClick
-const { pageContentRef } = usePageSearch();
-const { push } = useRouter();
-const hooks: Hooks = {
-  pageSearchHook: () => usePageSearch(undefined, undefined, searchConfig)
-};
-const { pageModalRef, handlePreviewData, handleConfrim, defaultInfo } =
-  usePageModal({ pageContentRef });
-const events: Events = {
-  content: {
-    preview: row => handlePreviewData(row)
-  }
-};
+
+const { handleResetClick, handleSearchClick } = usePageSearch();
+const pageContentRef = ref<PageContentInstance | null>(null);
+const { pageModalRef, handleConfrim, defaultInfo } = usePageModal({
+  pageContentRef
+});
+
+async function handleDetailData(id, type) {
+  // actionModalRef.value.onShow("兑换商品库存", type, id);
+}
 </script>
 
 <template>
   <!-- <PageAuth :pageName="pageName"> -->
-  <PageContainer
-    :hooks="hooks"
-    :events="events"
-    :search-config="searchConfig"
+  <PageSearch
+    :form-config="searchConfig"
+    @search-btn-click="handleSearchClick"
+    @reset-btn-click="handleResetClick"
+  >
+    <template #action>
+      <!-- v-if="!isSuperUser" @click="onDownloadTemplate" -->
+      <el-button
+        @click="
+          exportPageContent({
+            type: 'http',
+            url: 'orderExport',
+            params: {},
+            name: '订单导出'
+          })
+        "
+        >导出订单</el-button
+      >
+      <!-- v-if="!isSuperUser" -->
+      <!-- @click="() => execlUploadRef.onDisplay()" -->
+      <el-button type="primary">批量发货 </el-button>
+    </template>
+  </PageSearch>
+  <PageContent
+    ref="pageContentRef"
     :content-config="contentConfig"
+    @preview-btn-click="({ id }) => handleDetailData(id, 'preview')"
   />
   <PageModal
     ref="pageModalRef"