vue2-s-cli/template/src/api/index.js

脚手架

import { ajax as $http } from "@/util/api";
import { Notification } from "element-ui";
import store from "../store";

const postRes = (json) => {
  const url = process.env.VUE_APP_URL;
  // 处理参数
  let reqJson = json;
  const state = store.state;
  const userData = state.userData || {};
  const navVal = state.navVal || {};
  const appVal = state.appVal || {};
  let commonJson = {
    accessPath: navVal.accessPath,
    pageId: navVal.pageId,
    accountId: userData.id,
    accountName: userData.username,
    projectId: state.systemId,
    applicationId: appVal.project_id
  };
  reqJson["Param"] = { ...commonJson, ...reqJson["Param"] };

  return new Promise((resolve, reject) => {
    $http({
      method: "post",
      url: url,
      data: reqJson,
      responseType: reqJson.responseType || "json",
    })
      .then((res) => {
        const resData = res.data || {};
        const msg = resData.msg || "";
        const code = resData.code;
        if (code !== 100000 && msg) {
          console.log("%c  请求失败信息  ", "color: #fff; background: #e6a23c; ", msg);
          // 是否需要弹窗显示报错信息
          if (!reqJson.noTip) {
            Notification.warning(msg);
          }
        }

        // 处理CSV导出
        if (res.headers["content-type"].includes("application/csv")) {
          const blob = new Blob(["\ufeff" + res.data], {
            type: "application/ms-excel",
          });
          let downloadElement = document.createElement("a");
          const href = window.URL.createObjectURL(blob);
          downloadElement.href = href;
          downloadElement.download = reqJson.Param["file_name"] || "export.xlsx";
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement);
          window.URL.revokeObjectURL(href);
          resolve(res);
        }

        resolve(resData);
      })
      .catch((err) => {
        console.log("%c  请求catch  ", "color: #fff; background: red", err);
        reject(err);
      });
  });
};

// post请求-心娱门户
const postResXy = (json) => {
  const url = process.env.VUE_APP_XYURL;
  return new Promise((resolve, reject) => {
    $http
      .post(url, json)
      .then((res) => {
        const resData = res.data || {};
        if (resData.code !== 0 && resData.msg) {
          Notification.error(resData.msg);
          return;
        }
        resolve(resData);
      })
      .catch((err) => {
        Notification.error("获取用户信息失败");
        reject(err);
      });
  });
};

const postReqExport = (json, name = "") => {
  const url = process.env.VUE_APP_URL;
  // 处理参数
  let reqJson = json;
  const state = store.state;
  const userData = state.userData || {};
  const navVal = state.navVal || {};
  const appVal = state.appVal || {};
  let commonJson = {
    accessPath: navVal.accessPath,
    pageId: navVal.pageId,
    accountId: userData.id,
    accountName: userData.username,
    projectId: state.systemId,
    applicationId: appVal.project_id
  };
  reqJson["Param"] = { ...commonJson, ...reqJson["Param"] };

  return new Promise((resolve, reject) => {
    $http({
      method: "post",
      url: url,
      data: reqJson,
      responseType: "blob",
    })
      .then((res) => {
        if (res.headers["content-type"].includes("application/json")) {
          console.log(111, res);
          Notification.warning(res.msg || "导出失败");
          resolve(res);
          return;
        }

        // var contentDisposition = res.headers["content-disposition"]; //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
        // var patt = new RegExp("filename=([^;]+\\.[^.;]+);*");
        // var result = patt.exec(contentDisposition);
        // var filename = result[1];
        var filename = name || "文件.xlsx";
        var url = window.URL.createObjectURL(res.data); //创建下载的链接
        var downloadElement = document.createElement("a");
        downloadElement.style.display = "none";
        downloadElement.href = url;
        // decodeURI 解决headers 中值乱码情况
        downloadElement.setAttribute("download", `${decodeURI(filename)}`);
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        downloadElement.remove();
        window.URL.revokeObjectURL(downloadElement.href); //释放掉blob对象
        resolve(res);
      })
      .catch((err) => {
        console.log("%c  请求catch  ", "color: #fff; background: red", err);
        reject(err);
      });
  });
};
// 上传文件调取的接口(上传FormData数据)
const uploadFiles = (formData, params, callback) => {
  const url = process.env.VUE_APP_UPLOAD;
  // 处理参数
  const state = store.state;
  const userData = state.userData || {};
  const navVal = state.navVal || {};
  const projectId = state.systemId;
  const appVal = state.appVal || {};
  let commonJson = {
    accessPath: navVal.accessPath,
    pageId: navVal.pageId,
    accountId: userData.id,
    accountName: userData.username,
    projectId: Number(projectId),
    applicationId: appVal.project_id,
    ...params
  };
  formData.append("Param", JSON.stringify(commonJson));
  return new Promise((resolve, reject) => {
    $http({
      method: "post",
      url: url,
      data: formData,
      onUploadProgress: progressEvent => {
        // 获取上传进度
        if (progressEvent.lengthComputable) {
          callback && callback(progressEvent);
        }
      }
    })
      .then(res => {
        const resData = res.data || {};
        const msg = resData.msg || "";
        const code = resData.code;
        if (code !== 100000 && msg) {
          console.log(
            "%c  请求失败信息  ",
            "color: #fff; background: #e6a23c; ",
            msg
          );
          Notification.warning(msg);
        }
        resolve(resData);
      })
      .catch(err => {
        console.log("%c  请求catch  ", "color: #fff; background: red", err);
        reject(err);
      });
  });
}
export default {
  postRes, // post请求
  postResXy, // post请求
  postReqExport,
  uploadFiles, // 上传文件
};