perf:优化代码结构和性能

- 调整 script标签添加 async 属性以优化加载性能
- 解决企业用户查询排序报错、添加第二参数
- 添加 gzip压缩以提高页面加载速度

package.json

@@ -89,6 +89,7 @@
     "@vue/cli-service": "4.4.6",
     "babel-eslint": "10.1.0",
     "chalk": "4.1.0",
+    "compression-webpack-plugin": "2.0.0",
     "connect": "3.6.6",
     "eslint": "7.15.0",
     "eslint-plugin-vue": "7.2.0",

public/index.html

@@ -13,14 +13,14 @@
 
   <link href="https://static.drgyen.com/pc/smart-power-ui/font_2506643_51mhr4b9ys6.css" rel="stylesheet">
 
-  <script src="https://webapi.amap.com/maps?v=1.4.15&key=4b483d227a9c7dd12e46faae5a8c8af8" type="text/javascript"></script>
+  <script async src="https://webapi.amap.com/maps?v=1.4.15&key=4b483d227a9c7dd12e46faae5a8c8af8" type="text/javascript"></script>
   <script src="<%= BASE_URL %>js/config.js"></script>
 
-  <script src="https://webapi.amap.com/maps?v=1.4.15&key=4b483d227a9c7dd12e46faae5a8c8af8&plugin=AMap.PlaceSearch"></script>
+  <script async src="https://webapi.amap.com/maps?v=1.4.15&key=4b483d227a9c7dd12e46faae5a8c8af8&plugin=AMap.PlaceSearch"></script>
-  <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
+  <script async src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
-  <script src="https://webapi.amap.com/maps?v=1.4.15&key=4b483d227a9c7dd12e46faae5a8c8af8&plugin=AMap.Geocoder" type="text/javascript"></script>
+  <script async src="https://webapi.amap.com/maps?v=1.4.15&key=4b483d227a9c7dd12e46faae5a8c8af8&plugin=AMap.Geocoder" type="text/javascript"></script>
   <!--    <script type="text/javascript" src="<%= BASE_URL %>cdn/js/jessibuca/jessibuca.js"></script>-->
-  <script src="<%= BASE_URL %>cdn/js/liveplayer/liveplayer-lib.min.js"></script>
+  <script async src="<%= BASE_URL %>cdn/js/liveplayer/liveplayer-lib.min.js"></script>
   <title><%= process.env.VUE_APP_SYSTEM_NAME %></title>
   <style>
     html,

src/assets/icons/svg/qrcode.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1744705489321" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4437" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M32.42 1.83h409.17c41.6 4.06 31.57 76.36 31.57 123.33v223.63c0 48.61 9.28 108.18-23.34 121.99-21.24 8.98-78.25 2.71-105.73 2.71H127.17C77.01 473.49 8.54 485.3 0.84 442.31V33.01C6.45 17.76 16.32 6.72 32.42 1.83m56.3 92.16v291.39h295.2V89.93H90.1c-1.61 0.22-1.5 2.14-1.38 4.06M581.64 1.83h409.17c16.69 6.11 28.15 17.38 31.57 36.6v398.46c-3.74 16.56-12.5 30.69-28.83 35.23-26.68 7.42-71.04 1.36-102.98 1.36H680.5c-31.68 0-78.63 6.58-104.35-1.36-36.31-11.21-26.09-81.16-26.09-130.11V133.3c0-56.5-12.56-123.57 31.58-131.47M637.93 94v291.39h295.21V89.93H639.3c-1.59 0.22-1.49 2.14-1.37 4.07m-414.65 85.38c41.11-7.66 73.44 19.76 74.15 56.92 0.92 49.01-49.79 75.93-89.25 55.57-45.16-23.29-42.19-101.82 15.1-112.49m549.21 0c96.84-17.86 94.98 133.52 0 117.91-60.44-9.93-62.4-106.41 0-117.91m-333.64 844.37H33.8c-16.82-5.09-28.18-15.56-32.95-32.53V583.27c4-11.95 13.23-25.87 27.46-29.82 26.88-7.46 70.78-1.36 102.99-1.36h210.07c31.05 0 76.24-6.84 104.35 1.36 38.05 11.08 27.46 79.91 27.46 128.76V897.7c-0.02 52.72 11.49 121.34-34.33 126.05M88.72 644.25v291.4h295.2V640.19H90.1c-1.61 0.23-1.5 2.14-1.38 4.06m933.66-55.56v113.84c-3.2 38.4-0.46 82.67-1.37 123.33H728.55v-66.41c-27.47-3.17-60.87-0.46-90.62-1.37-3.21 85.85-0.46 177.55-1.38 265.65H583c-46.04-9.11-32.95-77.3-32.95-131.47V682.21c0-31.59-6.48-78.95 1.38-104.37 9.37-30.32 49.98-25.75 90.62-25.75h199.09v180.26h91.99c0.91-59.64-1.83-122.89 1.37-180.26 44.28-2.58 85.28-1.95 87.88 36.6M230.14 728.28c43.9-4.79 80.18 36.85 63.16 82.68-23.61 63.52-136.47 39.64-115.34-40.66 5.84-22.2 22.73-38.8 52.18-42.02m597.27 295.47h-98.86c0.91-34.8-1.83-73.2 1.38-105.72h97.48v105.72m194.97-105.72v69.13c-3.81 19.27-15.23 31.03-32.95 36.59h-70.02c0.91-34.79-1.83-73.19 1.37-105.71l101.6-0.01" p-id="4438"></path></svg>

src/views/system/tenant/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
+    <el-form ref="queryForm" :inline="true" :model="queryParams" label-width="68px">
       <el-form-item label="企业名称" prop="tenantName">
         <el-input
           v-model="queryParams.tenantName"
-          placeholder="请输入企业名称"
           clearable
+          placeholder="请输入企业名称"
           size="small"
           @keyup.enter.native="handleQuery"
         />
@@ -20,17 +20,17 @@
         />
       </el-form-item>-->
       <el-form-item label="类型" prop="tenantType">
-        <el-select v-model="queryParams.tenantType" placeholder="请选择类型" clearable size="small">
+        <el-select v-model="queryParams.tenantType" clearable placeholder="请选择类型" size="small">
           <el-option
-            :label="item.dictLabel"
             v-for="item in tenantTypeOptions"
             :key="item.dictValue"
+            :label="item.dictLabel"
             :value="item.dictValue"
           />
         </el-select>
       </el-form-item>
       <el-form-item label="用户状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="用户状态" clearable size="small">
+        <el-select v-model="queryParams.status" clearable placeholder="用户状态" size="small">
           <el-option
             v-for="dict in statusOptions"
             :key="dict.dictValue"
@@ -41,17 +41,17 @@
       </el-form-item>
       <el-form-item label="有效期" prop="expirationTime">
         <el-date-picker
+          v-model="queryParams.expirationTime"
           clearable
+          placeholder="选择有效期"
           size="small"
           style="width: 200px"
-          v-model="queryParams.expirationTime"
           type="date"
           value-format="yyyy-MM-dd"
-          placeholder="选择有效期"
         ></el-date-picker>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
@@ -59,31 +59,31 @@
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
-          type="primary"
+          v-hasPermi="['system:tenant:add']"
           icon="el-icon-plus"
           size="mini"
+          type="primary"
           @click="handleAdd"
-          v-hasPermi="['system:tenant:add']"
         >新增</el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
-          type="success"
+          v-hasPermi="['system:tenant:edit']"
+          :disabled="single"
           icon="el-icon-edit"
           size="mini"
-          :disabled="single"
+          type="success"
           @click="handleUpdate"
-          v-hasPermi="['system:tenant:edit']"
         >修改</el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
-          type="danger"
+          v-hasPermi="['system:tenant:remove']"
+          :disabled="multiple"
           icon="el-icon-delete"
           size="mini"
-          :disabled="multiple"
+          type="danger"
           @click="handleDelete"
-          v-hasPermi="['system:tenant:remove']"
         >删除</el-button>
       </el-col>
       <!-- <el-col :span="1.5">
@@ -104,47 +104,47 @@
       @sort-change="sortChange"
       @selection-change="handleSelectionChange"
     >
-      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column align="center" type="selection" width="55" />
-      <el-table-column label="序号" type="index" align="center" width="50" />
+      <el-table-column align="center" label="序号" type="index" width="50" />
-      <el-table-column label="企业名称" align="center" sortable="custom" prop="tenantName" />
+      <el-table-column align="center" label="企业名称" prop="tenantName" sortable="custom" />
-      <el-table-column label="企业编码" align="center" sortable="custom" prop="tenantCode" />
+      <el-table-column align="center" label="企业编码" prop="tenantCode" sortable="custom" />
-      <el-table-column label="类型" align="center" prop="tenantType" :formatter="tenantTypeFormat" />
+      <el-table-column :formatter="tenantTypeFormat" align="center" label="类型" prop="tenantType" />
-      <el-table-column label="用户状态" align="center" :formatter="statusFormat" width="80" />
+      <el-table-column :formatter="statusFormat" align="center" label="用户状态" width="80" />
 
       <el-table-column
-        label="有效期"
-        sortable="custom"
         align="center"
-        prop="expirationTime"
+        label="有效期"
+        prop="expirationTime,createTime"
+        sortable="custom"
         width="160"
       >
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.expirationTime, "{y}-{m}-{d}") }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">
+      <el-table-column align="center" class-name="small-padding fixed-width" label="操作" width="250">
         <template slot-scope="scope">
 
-          <buttons-set :option="bottonOption" :btnData="btnData()" :scope="scope"></buttons-set>
+          <buttons-set :btnData="btnData()" :option="bottonOption" :scope="scope"></buttons-set>
         </template>
       </el-table-column>
     </el-table>
 
     <pagination
       v-show="total > 0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
+      :page.sync="queryParams.pageNum"
+      :total="total"
       @pagination="getList"
     />
 
     <!-- 添加或修改企业用户对话框 -->
     <el-dialog
-      :title="title"
-      class="eldialog-wrap"
-      :visible.sync="open"
-      width="500px"
       :close-on-click-modal="false"
+      :title="title"
+      :visible.sync="open"
+      class="eldialog-wrap"
+      width="500px"
     >
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="企业名称:" prop="tenantName">
@@ -156,11 +156,11 @@
         </el-form-item>
 
         <el-form-item label="类型:">
-          <el-select v-model="form.tenantType" style="width: 100%;" placeholder="请选择类型">
+          <el-select v-model="form.tenantType" placeholder="请选择类型" style="width: 100%;">
             <el-option
-              :label="item.dictLabel"
               v-for="item in tenantTypeOptions"
               :key="item.dictValue"
+              :label="item.dictLabel"
               :value="item.dictValue"
             />
           </el-select>
@@ -177,13 +177,13 @@
 
         <el-form-item label="有效期:" prop="expirationTime">
           <el-date-picker
+            v-model="form.expirationTime"
             clearable
+            placeholder="选择有效期"
             size="small"
             style="width: 100%"
-            v-model="form.expirationTime"
             type="date"
             value-format="yyyy-MM-dd"
-            placeholder="选择有效期"
           ></el-date-picker>
         </el-form-item>
 
@@ -208,12 +208,12 @@
 
     <!-- 分配用户用户对话框 -->
     <el-dialog
-      :title="title_user"
-      class="teant-child-dialog"
-      :visible.sync="open_user"
-      width="80%"
       :close-on-click-modal="false"
+      :title="title_user"
+      :visible.sync="open_user"
       append-to-body
+      class="teant-child-dialog"
+      width="80%"
     >
       <dis-user v-if="tempType === 'disUser'" :tenantId="tenantId"></dis-user>
 
@@ -339,7 +339,7 @@ export default {
         tenantType: undefined,
         status: undefined,
         expirationTime: undefined,
-        orderByColumn: "expirationTime",
+        orderByColumn: "expirationTime,createTime",
         isAsc: "desc"
       },
       bottonOption: {

vue.config.js

@@ -2,6 +2,7 @@
 const path = require('path')
 const defaultSettings = require('./src/settings.js')
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const CompressionWebpackPlugin = require('compression-webpack-plugin');
 
 function resolve(dir) {
   return path.join(__dirname, dir)
@@ -82,6 +83,14 @@ module.exports = {
         symbolId: 'icon-[name]'
       })
       .end()
+    // 压缩插件配置
+    config.plugin('compression')
+      .use(CompressionWebpackPlugin, [{
+        algorithm: 'gzip',
+        test: /\.(js|css|html|svg)$/,
+        threshold: 10240,
+        minRatio: 0.8
+      }]);
 
     config
       .when(process.env.NODE_ENV !== 'development'&&process.env.NODE_ENV !== 'drgy'&&process.env.NODE_ENV !== 'dr',