perf: 优化请求封装和登录页

admin_2/src/api/engine.js

-import request from "@/utils/request";
+import { request } from '@/utils/request';
 
 // 获取排队系统数据
 export const getQueueSystemList = (data) => {
   return request({
     url: `/bill/ph/queue/stat/list`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 
@@ -13,8 +13,8 @@ export const getQueueSystemList = (data) => {
 export const getEvaSystemList = (data) => {
   return request({
     url: `/bill/pj/evaluate/stat/list`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 
@@ -22,8 +22,8 @@ export const getEvaSystemList = (data) => {
 export const getQueueStatList = (data) => {
   return request({
     url: `/bill/ph/queue/stat/list`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 
@@ -31,7 +31,7 @@ export const getQueueStatList = (data) => {
 export const getEvaStatList = (data) => {
   return request({
     url: `/bill/pj/evaluate/stat/list`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };

admin_2/src/api/home.js

-import request from "@/utils/request";
+import { request } from '@/utils/request';
 // 获取首页数据
 export const getHomeData = (data) => {
   return request({
     url: `/bill/login/index`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };

admin_2/src/api/login.js

-import request from "@/utils/request";
+import { request } from '@/utils/request';
 
 // 登录
 export const login = (data) => {
   return request({
     url: `/bill/login/login`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 
@@ -13,8 +13,8 @@ export const login = (data) => {
 export const logout = (data) => {
   return request({
     url: `/bill/login/logout`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 
@@ -22,7 +22,17 @@ export const logout = (data) => {
 export const changePassword = (data) => {
   return request({
     url: `/bill/user/change/password`,
-    method: "post",
-    data,
+    method: 'post',
+    data
+  });
+};
+
+// 登录验证码
+export const loginCode = (params) => {
+  return request({
+    url: `/bill/securitycode/createCode`,
+    method: 'get',
+    params,
+    responseType: 'blob'
   });
 };

admin_2/src/api/market.js

-import request from "@/utils/request";
+import { request } from '@/utils/request';
 /**
  *  排队数据报表
  */
@@ -6,16 +6,16 @@ import request from "@/utils/request";
 export const getQueueList = (data) => {
   return request({
     url: `/bill/ph/queue/list`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 // 获取排号详情
 export const getQueueInfo = (params) => {
   return request({
     url: `/bill/ph/queue/info`,
-    method: "get",
-    params,
+    method: 'get',
+    params
   });
 };
 
@@ -26,15 +26,15 @@ export const getQueueInfo = (params) => {
 export const getEvaluateList = (data) => {
   return request({
     url: `/bill/pj/evaluate/list`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 // 获取评价详情
 export const getEvaluateInfo = (params) => {
   return request({
     url: `/bill/pj/evaluate/info`,
-    method: "get",
-    params,
+    method: 'get',
+    params
   });
 };

admin_2/src/api/site.js

-import request from "@/utils/request";
+import { request } from '@/utils/request';
 
 // 获取个人站点树
 export const getSiteTree = (params) => {
   return request({
     url: `/base/site/siteTree`,
-    method: "get",
-    params,
+    method: 'get',
+    params
   });
 };
 
@@ -13,16 +13,16 @@ export const getSiteTree = (params) => {
 export const getDepartment = (data) => {
   return request({
     url: `/base/dept/list`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 // 获取大厅
 export const getHall = (data) => {
   return request({
     url: `/base/site/hall/list`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 
@@ -30,15 +30,15 @@ export const getHall = (data) => {
 export const getWindow = (data) => {
   return request({
     url: `/base/window/list`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 // 获取站点业务
 export const getSiteBusiness = (data) => {
   return request({
     url: `/base/site/business/list`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };

admin_2/src/api/system.js

 // 系统api
-import request from "@/utils/request";
+import { request } from '@/utils/request';
 /**
  *  系统参数
  */
@@ -7,32 +7,32 @@ import request from "@/utils/request";
 export const getParamList = (data) => {
   return request({
     url: `/bill/param/list`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 // 查看系统参数
 export const getParamInfo = (params) => {
   return request({
     url: `/bill/param/info`,
-    method: "get",
-    params,
+    method: 'get',
+    params
   });
 };
 // 保存编辑系统参数
 export const saveParam = (data) => {
   return request({
     url: `/bill/param/save`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 // 删除系统参数
 export const delParam = (params) => {
   return request({
     url: `/bill/param/delete`,
-    method: "get",
-    params,
+    method: 'get',
+    params
   });
 };
 
@@ -43,32 +43,32 @@ export const delParam = (params) => {
 export const getTaskList = (data) => {
   return request({
     url: `/bill/task/list`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 // 查看任务信息
 export const getTaskInfo = (params) => {
   return request({
     url: `/bill/task/info`,
-    method: "get",
-    params,
+    method: 'get',
+    params
   });
 };
 // 保存编辑任务信息
 export const saveTask = (data) => {
   return request({
     url: `/bill/task/save`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 // 删除任务信息
 export const delTask = (params) => {
   return request({
     url: `/bill/task/delete`,
-    method: "get",
-    params,
+    method: 'get',
+    params
   });
 };
 
@@ -80,16 +80,16 @@ export const delTask = (params) => {
 export const getlogsList = (data) => {
   return request({
     url: `/bill/oper/log/list`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 // 查看操作日志
 export const getlog = (params) => {
   return request({
     url: `/bill/oper/log/info`,
-    method: "get",
-    params,
+    method: 'get',
+    params
   });
 };
 
@@ -101,48 +101,48 @@ export const getlog = (params) => {
 export const getResourceList = (data) => {
   return request({
     url: `/bill/resource/list`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 // 获取资源信息详情
 export const getResourceDetail = (params) => {
   return request({
     url: `/bill/resource/info`,
-    method: "get",
-    params,
+    method: 'get',
+    params
   });
 };
 // 添加资源信息
 export const saveResource = (data) => {
   return request({
     url: `/bill/resource/save`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 // 删除资源信息
 export const deleteResource = (params) => {
   return request({
     url: `/bill/resource/delete`,
-    method: "get",
-    params,
+    method: 'get',
+    params
   });
 };
 // 刷新资源
 export const refreshResource = (data) => {
   return request({
     url: `/bill/resource/refreshUrl`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 // 资源分组
 export const getResourceGroup = (data) => {
   return request({
     url: `/bill/resource/group`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 /**
@@ -153,32 +153,32 @@ export const getResourceGroup = (data) => {
 export const getAccessList = (data) => {
   return request({
     url: `/bill/access/list`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 // 查看接入区县
 export const getAccessInfo = (params) => {
   return request({
     url: `/bill/access/info`,
-    method: "get",
-    params,
+    method: 'get',
+    params
   });
 };
 // 保存编辑接入区县
 export const saveAccess = (data) => {
   return request({
     url: `/bill/access/save`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 // 删除接入区县
 export const delAccess = (params) => {
   return request({
     url: `/bill/access/delete`,
-    method: "get",
-    params,
+    method: 'get',
+    params
   });
 };
 
@@ -190,48 +190,48 @@ export const delAccess = (params) => {
 export const getRoleList = (data) => {
   return request({
     url: `/bill/role/list`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 // 获取角色详情
 export const getRole = (params) => {
   return request({
     url: `/bill/role/get`,
-    method: "get",
-    params,
+    method: 'get',
+    params
   });
 };
 // 保存角色
 export const addRole = (data) => {
   return request({
     url: `/bill/role/save`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 // 删除角色
 export const deleteRole = (params) => {
   return request({
     url: `/bill/role/delete`,
-    method: "get",
-    params,
+    method: 'get',
+    params
   });
 };
 // 获取角色资源列表
 export const getRoleResourceList = (data) => {
   return request({
     url: `/bill/role/auth/list`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 // 添加角色资源
 export const addRoleResource = (data) => {
   return request({
     url: `/bill/role/auth/distributionSource`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 
@@ -239,8 +239,8 @@ export const addRoleResource = (data) => {
 export const addRoleMenu = (data) => {
   return request({
     url: `/bill/role/auth/distributionMenu`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 
@@ -248,8 +248,8 @@ export const addRoleMenu = (data) => {
 export const getRoleMenuList = (data) => {
   return request({
     url: `/bill/role/auth/editMenu`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 
@@ -260,32 +260,32 @@ export const getRoleMenuList = (data) => {
 export const getUserList = (data) => {
   return request({
     url: `/bill/user/list`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 // 获取用户信息
 export const getUserInfo = (params) => {
   return request({
     url: `/bill/user/info`,
-    method: "get",
-    params,
+    method: 'get',
+    params
   });
 };
 // 保存用户
 export const saveUser = (data) => {
   return request({
     url: `/bill/user/save`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 // 删除用户
 export const deleteUser = (params) => {
   return request({
     url: `/bill/user/delete`,
-    method: "get",
-    params,
+    method: 'get',
+    params
   });
 };
 
@@ -296,8 +296,8 @@ export const deleteUser = (params) => {
 export const getSystemList = (data) => {
   return request({
     url: `/bill/access/system/list`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 
@@ -305,8 +305,8 @@ export const getSystemList = (data) => {
 export const getSystemInfo = (params) => {
   return request({
     url: `/bill/access/system/info`,
-    method: "get",
-    params,
+    method: 'get',
+    params
   });
 };
 
@@ -314,8 +314,8 @@ export const getSystemInfo = (params) => {
 export const saveSystem = (data) => {
   return request({
     url: `/bill/access/system/save`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 
@@ -323,8 +323,8 @@ export const saveSystem = (data) => {
 export const deleteSystem = (params) => {
   return request({
     url: `/bill/access/system/delete`,
-    method: "get",
-    params,
+    method: 'get',
+    params
   });
 };
 
@@ -336,32 +336,32 @@ export const deleteSystem = (params) => {
 export const getMenuList = (data) => {
   return request({
     url: `/bill/menu/list`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 // 获取菜单信息
 export const getMenuInfo = (params) => {
   return request({
     url: `/bill/menu/info`,
-    method: "get",
-    params,
+    method: 'get',
+    params
   });
 };
 // 保存菜单
 export const saveMenu = (data) => {
   return request({
     url: `/bill/menu/save`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 // 删除菜单
 export const deleteMenu = (params) => {
   return request({
     url: `/bill/menu/delete`,
-    method: "get",
-    params,
+    method: 'get',
+    params
   });
 };
 
@@ -369,8 +369,8 @@ export const deleteMenu = (params) => {
 export const changeMenuSort = (data) => {
   return request({
     url: `/bill/menu/upOrDown`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };
 
@@ -378,7 +378,7 @@ export const changeMenuSort = (data) => {
 export const getMenuTreeselect = (data) => {
   return request({
     url: `/bill/menu/treeselect`,
-    method: "post",
-    data,
+    method: 'post',
+    data
   });
 };

admin_2/src/pages/home/Home.vue

@@ -27,19 +27,19 @@
           <div class="flex h-full w-full flex-col">
             <div class="mb-[18px] text-[18px] text-[#232323]">近30日数据总量趋势</div>
             <div class="echarts-box">
-              <LineEchart :dataset="totalDataset"></LineEchart>
+              <line-echart :dataset="totalDataset"></line-echart>
             </div>
           </div>
           <div class="flex h-full w-full flex-col">
             <div class="mb-[18px] text-[18px] text-[#232323]">近30日排队数据总量趋势</div>
             <div class="echarts-box">
-              <LineEchart :dataset="phDataset" color="#1DCFB4"></LineEchart>
+              <line-echart :dataset="phDataset" color="#1DCFB4"></line-echart>
             </div>
           </div>
           <div class="flex h-full w-full flex-col">
             <div class="mb-[18px] text-[18px] text-[#232323]">近30日评价数据总量趋势</div>
             <div class="echarts-box">
-              <LineEchart :dataset="pjDataset" color="#F57520"></LineEchart>
+              <line-echart :dataset="pjDataset" color="#F57520"></line-echart>
             </div>
           </div>
         </div>
@@ -48,7 +48,7 @@
       <div class="flex w-full flex-col items-center">
         <div class="main-title">对接站点矩阵</div>
         <div class="area-list grid w-full grid-cols-7 gap-5">
-          <AreaCard v-for="v in homeData.accessList" :key="v.id" :data="v"></AreaCard>
+          <area-card v-for="v in homeData.accessList" :key="v.id" :data="v"></area-card>
         </div>
       </div>
     </div>

admin_2/src/pages/login/Login.vue

@@ -4,7 +4,7 @@
     <div class="flex min-w-[450px] flex-col justify-center bg-white p-[25px]">
       <h1 class="mb-4 text-center text-[24px] font-[500]">{{ systemName }}</h1>
       <el-form class="w-full" ref="form" :model="form" :rules="rules" hide-required-asterisk>
-        <el-form-item l prop="loginName">
+        <el-form-item prop="loginName">
           <el-input
             clearable
             prefix-icon="el-icon-user"
@@ -33,7 +33,12 @@
               @keyup.enter="onSubmit"
             ></el-input>
             <div class="code-box h-[40px] cursor-pointer overflow-hidden rounded-[4px]">
-              <img class="h-full w-full" :src="securityUrl" @click="createCode" />
+              <img
+                v-show="securityUrl"
+                class="h-full w-full"
+                :src="securityUrl"
+                @click="createCode"
+              />
             </div>
           </div>
         </el-form-item>
@@ -60,18 +65,16 @@ import { mapMutations } from 'vuex';
 import { getHomeData } from '@/api/home';
 import { generateRoutes, filterBtn } from '@/utils';
 import { calcMenu } from '@/router';
-import { login } from '@/api/login';
+import { login, loginCode } from '@/api/login';
 import { systemName } from '@/config';
 export default {
   name: 'login',
   data() {
     return {
       systemName,
-      api: process.env.VUE_APP_API_BASE_URL,
+      // api: process.env.VUE_APP_API_BASE_URL,
       securityUrl: '',
-      originData: [],
       loading: false,
-      redirect: this.$route.query.redirect || '/',
       form: {
         loginName: '',
         password: '',
@@ -100,11 +103,15 @@ export default {
     ]),
 
     // 获取验证码
-    createCode() {
-      // 加时间戳印记用于刷新gif
+    async createCode() {
       let mark = new Date().getTime();
-      // this.form.mark = mark;
-      this.securityUrl = this.api + '/bill/securitycode/createCode' + `?mark=${mark}`;
+      let res = await loginCode({
+        t: mark
+      });
+      if (res.data) {
+        let url = URL.createObjectURL(res.data);
+        this.securityUrl = url;
+      }
     },
 
     onSubmit() {
@@ -175,6 +182,11 @@ export default {
         .map((v) => v.perms);
       this.SET_permissions(btnPermissions);
     }
+  },
+  beforeDestroy() {
+    if (this.securityUrl) {
+      URL.revokeObjectURL(this.securityUrl);
+    }
   }
 };
 </script>

admin_2/src/pages/system/access/components/AddAccess.vue

@@ -11,7 +11,11 @@
     >
       <el-form ref="form" :model="form" :rules="rules" size="medium" label-width="100px">
         <el-form-item label="区域" prop="areaName">
-          <InputTree :treeData="initTree" v-model="form.areaName" @change="changeArea"></InputTree>
+          <input-tree
+            :treeData="initTree"
+            v-model="form.areaName"
+            @change="changeArea"
+          ></input-tree>
         </el-form-item>
         <el-form-item label="系统标签" prop="tag">
           <div class="flex gap-2">

admin_2/src/pages/system/menu/Menu.vue

@@ -9,7 +9,7 @@
           >批量删除</el-button
         > -->
       </div>
-      <!-- <div slot="right">
+      <!-- <div slot="search">
         <el-form ref="searchForm" :model="searchForm" inline>
           <el-form-item prop="name">
             <el-input

admin_2/src/pages/system/menu/components/AddMenu.vue

@@ -31,7 +31,7 @@
           <el-input placeholder="请输入菜单名称" v-model="form.name" clearable></el-input>
         </el-form-item>
         <el-form-item label="菜单图标" prop="imgPath" v-if="form.menuType != 2">
-          <IconSelect v-model="form.imgPath"></IconSelect>
+          <icon-select v-model="form.imgPath"></icon-select>
         </el-form-item>
 
         <el-form-item label="权限类型" prop="authType" v-if="form.menuType != 2">

admin_2/src/utils/request.js

 /**
  *  axios 工具函数层
  */
-import axios from "axios";
-import router from "@/router";
-import store from "@/store";
-import { message } from "@/utils/resetMessage";
-import { responseErr, loginErr } from "@/config";
+import axios from 'axios';
+import router from '@/router';
+import store from '@/store';
+import { message } from '@/utils/resetMessage';
+import { responseErr, loginErr } from '@/config';
 // 加载条插件
 // import NProgress from "nprogress";
 
-// 请求超时时间
-axios.defaults.timeout = 60 * 1000;
+// 接口地址
+const baseURL = process.env.VUE_APP_API_BASE_URL;
+// 请求超时
+const timeout = 60 * 1000;
 
-// 设置统一服务器地址
-axios.defaults.baseURL = process.env.VUE_APP_API_BASE_URL;
-// 请求拦截
-axios.interceptors.request.use(
-  (config) => {
-    let token = store.getters["user/token"];
+// 请求拦截（成功）
+function reqSuccess(config) {
+  let token = store.getters['user/token'];
   if (token) {
     config.headers.Authorization = token;
   }
   // NProgress.start();
   return config;
-  },
-  (err) => {
-    return Promise.reject(err);
-  }
-);
+}
 
-// 响应拦截
-axios.interceptors.response.use(
-  (response) => {
+// 响应拦截(成功)
+function resSuccess(response) {
   if (response.data.code !== undefined && response.data.msg !== undefined) {
     // 取出数据
     let { code, msg } = response.data;
     if (code == -1) {
       message.error({
-          message: msg,
+        message: msg
       });
-        if (msg === "非法用户,不可访问") {
+      if (msg === '非法用户,不可访问') {
         // 重置store下的user模块
-          store.commit("user/reset");
-          router.push("/");
+        store.commit('user/reset');
+        router.push('/');
       }
     } else if (loginErr.includes(code)) {
       message.error({
-          message: msg,
+        message: msg
       });
       // 重置store下的user模块
-        store.commit("user/reset");
+      store.commit('user/reset');
       setTimeout(() => {
         location.href = process.env.VUE_APP_API_portal_URL;
       }, 2000);
@@ -57,24 +51,40 @@ axios.interceptors.response.use(
   }
   // NProgress.done();
   return response;
-  },
-  (error) => {
+}
+// 响应拦截(错误)
+function resError(error) {
   if (error && error.response) {
     let msg = responseErr[error.response.status];
     error.message = msg || `连接错误${error.response.status}`;
   } else {
-      if (JSON.stringify(error).includes("timeout")) {
-        error.message = "服务器响应超时，请刷新当前页";
+    if (JSON.stringify(error).includes('timeout')) {
+      error.message = '服务器响应超时，请刷新当前页';
     } else {
-        error.message = "连接服务器失败";
+      error.message = '连接服务器失败';
     }
   }
   message.error({
-      message: error.message,
+    message: error.message
   });
 
   return Promise.resolve(error.response);
+}
+
+// 请求配置
+const request = axios.create({
+  // 请求超时时间
+  timeout,
+  // 设置统一服务器地址
+  baseURL,
+  headers: {
+    'Content-Type': 'application/json;charset=UTF-8'
   }
-);
+});
+
+request.interceptors.request.use(reqSuccess, (err) => {
+  return Promise.reject(err);
+});
+request.interceptors.response.use(resSuccess, resError);
 
-export default axios;
+export { request };