From 4b36577b0034b2e3ab7dc946db7e2a8f09d7d629 Mon Sep 17 00:00:00 2001
From: lanrenwo <lanrenwo@users.noreply.github.com>
Date: Wed, 15 Jun 2022 22:42:20 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=BB=84=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E9=A1=B5=E7=9A=84=E8=B7=AF=E7=94=B1=E5=88=97=E5=8F=AA=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA5=E6=9D=A1=EF=BC=8C=E8=B6=85=E8=BF=87=E5=88=99?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=9B=B4=E5=A4=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/pages/group/List.vue  | 46 ++++++++++++++++++++++++++---------
 web/src/pages/user/Policy.vue | 33 +++++++++++++++++++------
 2 files changed, 61 insertions(+), 18 deletions(-)

diff --git a/web/src/pages/group/List.vue b/web/src/pages/group/List.vue
index 6ce97bd..7a1b08b 100644
--- a/web/src/pages/group/List.vue
+++ b/web/src/pages/group/List.vue
@@ -1,7 +1,6 @@
 <template>
   <div>
     <el-card>
-
       <el-form :inline="true">
         <el-form-item>
           <el-button
@@ -65,8 +64,13 @@
             label="路由包含"
             width="200">
           <template slot-scope="scope">
-            <el-row v-for="(item,inx) in scope.row.route_include.slice(0, 5)" :key="inx">{{ item.val }}</el-row>
-            <el-row v-if="scope.row.route_include.length > 5">...</el-row>            
+            <el-row v-for="(item,inx) in scope.row.route_include.slice(0, readMinRows)" :key="inx">{{ item.val }}</el-row>
+            <div v-if="scope.row.route_include.length > readMinRows">
+              <div v-if="readMore[`ri_${ scope.row.id }`]">
+                <el-row v-for="(item,inx) in scope.row.route_include.slice(readMinRows)" :key="inx">{{ item.val }}</el-row>              
+              </div>
+              <el-button size="mini" type="text" @click="toggleMore(`ri_${ scope.row.id }`)">{{ readMore[`ri_${ scope.row.id }`] ? "▲ 收起" : "▼ 更多" }}</el-button>              
+            </div>            
           </template>
         </el-table-column>
 
@@ -75,8 +79,13 @@
             label="路由排除"
             width="200">
           <template slot-scope="scope">
-            <el-row v-for="(item,inx) in scope.row.route_exclude.slice(0, 5)" :key="inx">{{ item.val }}</el-row>
-            <el-row v-if="scope.row.route_exclude.length > 5">...</el-row>
+            <el-row v-for="(item,inx) in scope.row.route_exclude.slice(0, readMinRows)" :key="inx">{{ item.val }}</el-row>
+            <div v-if="scope.row.route_exclude.length > readMinRows">
+              <div v-if="readMore[`re_${ scope.row.id }`]">
+                <el-row v-for="(item,inx) in scope.row.route_exclude.slice(readMinRows)" :key="inx">{{ item.val }}</el-row>              
+              </div>
+              <el-button size="mini" type="text" @click="toggleMore(`re_${ scope.row.id }`)">{{ readMore[`re_${ scope.row.id }`] ? "▲ 收起" : "▼ 更多" }}</el-button>              
+            </div>
           </template>
         </el-table-column>
 
@@ -85,10 +94,17 @@
             label="LINK-ACL"
             min-width="200">
           <template slot-scope="scope">
-            <el-row v-for="(item,inx) in scope.row.link_acl.slice(0, 5)" :key="inx">
+            <el-row v-for="(item,inx) in scope.row.link_acl.slice(0, readMinRows)" :key="inx">
               {{ item.action }} => {{ item.val }} : {{ item.port }}
             </el-row>
-            <el-row v-if="scope.row.link_acl.length > 5">...</el-row>
+            <div v-if="scope.row.link_acl.length > readMinRows">
+              <div v-if="readMore[`la_${ scope.row.id }`]">
+                <el-row v-for="(item,inx) in scope.row.link_acl.slice(readMinRows)" :key="inx">
+                  {{ item.action }} => {{ item.val }} : {{ item.port }}
+                </el-row>
+              </div>
+              <el-button size="mini" type="text" @click="toggleMore(`la_${ scope.row.id }`)">{{ readMore[`la_${ scope.row.id }`] ? "▲ 收起" : "▼ 更多" }}</el-button>              
+            </div>
           </template>
         </el-table-column>
 
@@ -322,7 +338,8 @@
             <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
             <el-button @click="disVisible">取消</el-button>
             </el-form-item>
-        </el-form>        
+          </el-tabs>
+        </el-form> 
     </el-dialog>
 
   </div>
@@ -349,7 +366,8 @@ export default {
       tableData: [],
       count: 10,
       activeTab : "general",
-
+      readMore: {},
+      readMinRows : 5,
       ruleForm: {
         bandwidth: 0,
         status: 1,
@@ -477,9 +495,15 @@ export default {
     },
     resetForm(formName) {
       this.$refs[formName].resetFields();
-    }
+    },
+    toggleMore(id) {
+      if (this.readMore[id]) {
+        this.$set(this.readMore, id, false);
+      } else {
+        this.$set(this.readMore, id, true);
+      }
+    },
   },
-
 }
 </script>
 
diff --git a/web/src/pages/user/Policy.vue b/web/src/pages/user/Policy.vue
index e009fad..b2a852e 100644
--- a/web/src/pages/user/Policy.vue
+++ b/web/src/pages/user/Policy.vue
@@ -50,21 +50,31 @@
 
         <el-table-column
             prop="route_include"
-            label="包含路由"
+            label="路由包含"
             width="200">
           <template slot-scope="scope">
-            <el-row v-for="(item,inx) in scope.row.route_include.slice(0, 5)" :key="inx">{{ item.val }}</el-row>
-            <el-row v-if="scope.row.route_include.length > 5">...</el-row>
+            <el-row v-for="(item,inx) in scope.row.route_include.slice(0, readMinRows)" :key="inx">{{ item.val }}</el-row>
+            <div v-if="scope.row.route_include.length > readMinRows">
+              <div v-if="readMore[`ri_${ scope.row.id }`]">
+                <el-row v-for="(item,inx) in scope.row.route_include.slice(readMinRows)" :key="inx">{{ item.val }}</el-row>              
+              </div>
+              <el-button size="mini" type="text" @click="toggleMore(`ri_${ scope.row.id }`)">{{ readMore[`ri_${ scope.row.id }`] ? "▲ 收起" : "▼ 更多" }}</el-button>              
+            </div>            
           </template>
         </el-table-column>
 
         <el-table-column
             prop="route_exclude"
-            label="排除路由"
+            label="路由排除"
             width="200">
           <template slot-scope="scope">
-            <el-row v-for="(item,inx) in scope.row.route_exclude.slice(0, 5)" :key="inx">{{ item.val }}</el-row>
-            <el-row v-if="scope.row.route_exclude.length > 5">...</el-row>
+            <el-row v-for="(item,inx) in scope.row.route_exclude.slice(0, readMinRows)" :key="inx">{{ item.val }}</el-row>
+            <div v-if="scope.row.route_exclude.length > readMinRows">
+              <div v-if="readMore[`re_${ scope.row.id }`]">
+                <el-row v-for="(item,inx) in scope.row.route_exclude.slice(readMinRows)" :key="inx">{{ item.val }}</el-row>              
+              </div>
+              <el-button size="mini" type="text" @click="toggleMore(`re_${ scope.row.id }`)">{{ readMore[`re_${ scope.row.id }`] ? "▲ 收起" : "▼ 更多" }}</el-button>              
+            </div>
           </template>
         </el-table-column>
         <el-table-column
@@ -261,6 +271,8 @@ export default {
       tableData: [],
       count: 10,
       activeTab : "general",
+      readMore: {},
+      readMinRows : 5,      
       ruleForm: {
         bandwidth: 0,
         status: 1,
@@ -379,7 +391,14 @@ export default {
     },
     resetForm(formName) {
       this.$refs[formName].resetFields();
-    }
+    },
+    toggleMore(id) {
+      if (this.readMore[id]) {
+        this.$set(this.readMore, id, false);
+      } else {
+        this.$set(this.readMore, id, true);
+      }
+    },    
   },
 
 }