路由白名单

src/router/index.js

@@ -322,6 +322,22 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/routerList',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/router/routerList'),
+        meta: {
+          title: '路由白名单',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
   {
     path: '/hall',
     component: Layout,

src/views/router/routerList.vue

@@ -1,6 +1,15 @@
 <template>
     <!-- 路由白名单位管理 -->
     <div>
+        <!-- 提示信息 -->
+        <div class="tips">
+            <el-row>
+                <el-col :span="24">
+                    <i class="tipsIcon"></i>
+                    <span class="tipsText">通常来说，用户访问了非路由列表中的地址，前端会阻止其访问。但是部分功能，比如商圈，广告等并不存在于导航池中，自然也就不存在于路由列表。此时需要手动添加路由使其可以访问。</span>
+                </el-col>
+            </el-row>
+        </div>
         <!-- 头部搜索框部分 -->
         <div class="title">
             <el-row>
@@ -85,14 +94,12 @@
                 <div class="dialogText">
                     <el-form-item label="网站名称:" prop="website_id">
                         <el-cascader
-                            :filter-method="getWebNavList"
+                            :props="props"
                             v-model="ruleForm.website_id"
                             placeholder="请输入网站名称"
-                            :options="webSiteList"
-                            :props="props"
-                            clearable
+                            :options="webSiteAllList"
                             filterable
-                            collapse-tags>
+                            >
                         </el-cascader>
          
                     </el-form-item>
@@ -145,6 +152,7 @@ export default {
             tableData: [],//表格数据
             // 可以输入的搜索框相关
             webSiteList: [],//获取关联网站列表
+            webSiteAllList: [],//获取关联网站列表
             webSiteLoading: false,
             value: '',
             // 分页相关
@@ -358,16 +366,6 @@ export default {
         selectWebSite(value) {
             this.webSiteName_id = value
         },
-
-        //添加 / 编辑弹窗中输入关键词下拉框 
-        // 判断是否已经关联了网站
-        detectionWebSite(value) {
-            console.log(value);
-            this.website_id = value
-            console.log(this.website_id);
-
-        },
-
         //
         getWebNavList(query) {
             if (query !== '') {
@@ -387,10 +385,30 @@ export default {
                 this.navList = [];
             }
         },
+        
+        getWebNavLists(node,query) {
+            if (query !== '') {
+                this.webSiteLoading = true;
+                let data = { keyword: query }
+                let dataArr = [];
+                this.$store.dispatch('pool/getNavWebList', data).then(res => {
+                    this.webSiteAllList = res.data;
+                    this.webSiteLoading = false;
+                }).catch(() => {
+                    this.$message({
+                        type: 'info',
+                        message: '网络错误，请重试！'
+                    });
+                })
+            } else {
+                this.navList = [];
+            }
+        },
     },
     mounted() {
         this.getData(),
         this.getWebNavList();
+        this.getWebNavLists();
     
     },
 }
@@ -666,7 +684,7 @@ input[aria-hidden=true] {
 }
 
 .titleWidth {
-  width: 400px;
+//   width: 600px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;