mode

.env.development

@@ -0,0 +1,3 @@
+NODE_ENV = 'development'
+VUE_APP_MODE = 'development'
+VUE_APP_URL = 'http://localhost:8082/webapp/rating_manager/'

.env.production

@@ -0,0 +1,3 @@
+NODE_ENV = 'production'
+VUE_APP_MODE = 'production'
+VUE_APP_URL = 'http://test.fecribd.com/webapp/rating_manager/'

package.json

@@ -3,8 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "serve": "vue-cli-service serve --mode development",
+    "build": "vue-cli-service build --mode development",
+    "serve-prod": "vue-cli-service serve --mode production",
+    "build-prod": "vue-cli-service build --mode production",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {

src/api/request.js

@@ -1,4 +1,5 @@
 import axios from 'axios'
+import router from "@/router/index"
 import { rsaKey } from "@/utils/rsaKey.js";
 
 //创建axios实例
@@ -31,7 +32,7 @@ axios.interceptors.response.use(response => {
     case 400:
       break;
     case 401:
-      window.location.href = "http://test.fecribd.com/webapp/entry_system/login"
+      router.push("/webapp/entry_system/login")
       break;
     case 500:
       break

src/components/encapsulatedTable.vue

@@ -5,7 +5,13 @@
     <el-table
       ref="table"
       :data="data"
+      :border="border"
+      :row-key="checkKey"
+      :span-method="spanMethod"
+      :cell-style="cellStyle"
+      :header-cell-style="headerCellStyle"
       @cell-click="cellClick"
+      @sort-change="sortChange"
       @selection-change="handleSelectChange"
     >
       <!-- 多选 -->
@@ -19,8 +25,10 @@
       <el-table-column
         v-for="(item, index) in column"
         :key="index"
+        :sortable="sortable"
         :prop="item.prop"
         :label="item.label"
+        :align="align"
       >
         <template slot-scope="scope">
           <!-- 单元格 - 默认文本展示内容 -->
@@ -51,11 +59,31 @@
 <script>
 export default {
   props: {
+    // 表格 - 边框
+    border: {
+      type: Boolean,
+      default: true,
+    },
+    // 表格 - 单元格内容排列方式
+    align: {
+      type: String,
+      default: "center",
+    },
+    // 表格 - 排序
+    sortable: {
+      type: Boolean,
+      default: true,
+    },
     // 表格 - 勾选功能存在 ? true - 是 : false - 否
     selection: {
       type: Boolean,
       default: false,
     },
+    // 勾选的依据字段,默认为id
+    checkKey: {
+      type: String,
+      default: "id",
+    },
     // 表格渲染时需要被勾选的数据
     checkValue: [Array],
     // 自定义单元格内容 - 插槽
@@ -66,10 +94,27 @@ export default {
       default: null,
     },
     // 表格数据
-    data: [Array],
+    data: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
     // 表格列数据
-    column: [Array],
+    column: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    // 表格合并函数方法
+    spanMethod: [Function],
+    // 表格单元格style样式
+    cellStyle: [Function, Object],
+    // 表格表头行style样式
+    headerCellStyle: [Function, Object],
   },
+
   data() {
     return {};
   },
@@ -99,12 +144,46 @@ export default {
     cellClick(row, column) {
       this.$emit("cellClick", { row, column: column.property });
     },
+
+    // 确定 勾选项和数据项 绑定联系
+    toggleSelect() {
+      this.$refs.table.clearSelection();
+      this.$nextTick(() => {
+        this.data.forEach((row) => {
+          this.checkValue.forEach((item) => {
+            row[this.checkKey] === item[this.checkKey]
+              ? this.$refs.table.toggleRowSelection(row, true)
+              : null;
+          });
+        });
+      });
+    },
+
+    sortChange({ prop, order }) {
+      this.$emit("sortChange", { prop, order });
+    },
   },
 
   watch: {
-    data: {},
-    immediate: true,
-    deep: true,
+    data: {
+      handle(newVal) {
+        this.data = newVal;
+        // 组件重新渲染时，绑定上次已勾选的数据项
+        if (this.selection) {
+          this.toggleSelect();
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+    checkValue: {
+      handle(newVal) {
+        this.checkValue = newVal;
+        if (this.selection) {
+          this.toggleSelect();
+        }
+      },
+    },
   },
 };
 </script>

src/router/index.js

@@ -16,8 +16,25 @@ const router = new VueRouter({
   }, {
     path: "/webapp/entry_system/detail/:id",
     name: "detail",
+    meta: {
+      requireAuth: true
+    },
     component: () => import("@/view/user/detail/index")
   }]
 })
 
+router.beforeEach((to, from, next) => {
+  if (to.matched.some(r => r.meta.requireAuth)) {
+    if (localStorage.getItem("token")) {
+      next();
+    } else {
+      next({
+        path: '/webapp/entry_system/login',
+      })
+    }
+  } else {
+    next();
+  }
+})
+
 export default router

src/view/user/detail/index.vue

@@ -114,6 +114,7 @@ export default {
     },
 
     logOut() {
+      localStorage.removeItem("token")
       this.$router.push("/webapp/entry_system/login");
     },
   },

src/view/user/login.vue

@@ -167,18 +167,10 @@ export default {
               verify_code: this.form.vcode,
             })
             .then((res) => {
-              document.cookie = "uid=";
-              document.cookie = "token=";
-              document.cookie = "refresh_token=";
               localStorage.setItem("role", res.role);
               localStorage.setItem("token", res.token);
-              localStorage.setItem("refresh_token", res.refresh_token);
-              document.cookie = "uid=" + res.uid;
-              document.cookie = "token=" + res.token;
-              document.cookie = "refresh_token=" + res.refresh_token;
               if (res.uid) {
-                window.location.href =
-                "http://test.fecribd.com/webapp/rating_manager/";
+                window.location.href = process.env.VUE_APP_URL;
               }
             });
         } else {