From 7f1e769377d359672d35b06140345c6a5797debc Mon Sep 17 00:00:00 2001
From: lanrenwo <lanrenwo@users.noreply.github.com>
Date: Wed, 15 Jun 2022 09:37:37 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=BB=84=E5=88=97?=
=?UTF-8?q?=E8=A1=A8=E9=A1=B5=E7=9A=84=E8=B7=AF=E7=94=B1=E5=88=97=E5=8F=AA?=
=?UTF-8?q?=E6=98=BE=E7=A4=BA5=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
web/src/pages/group/List.vue | 9 ++++++---
1 file changed, 6 insertions(+), 3 deletions(-)
diff --git a/web/src/pages/group/List.vue b/web/src/pages/group/List.vue
index 446584d..6ce97bd 100644
--- a/web/src/pages/group/List.vue
+++ b/web/src/pages/group/List.vue
@@ -65,7 +65,8 @@
label="路由包含"
width="200">
<template slot-scope="scope">
- <el-row v-for="(item,inx) in scope.row.route_include" :key="inx">{{ item.val }}</el-row>
+ <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>
</template>
</el-table-column>
@@ -74,7 +75,8 @@
label="路由排除"
width="200">
<template slot-scope="scope">
- <el-row v-for="(item,inx) in scope.row.route_exclude" :key="inx">{{ item.val }}</el-row>
+ <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>
</template>
</el-table-column>
@@ -83,9 +85,10 @@
label="LINK-ACL"
min-width="200">
<template slot-scope="scope">
- <el-row v-for="(item,inx) in scope.row.link_acl" :key="inx">
+ <el-row v-for="(item,inx) in scope.row.link_acl.slice(0, 5)" :key="inx">
{{ item.action }} => {{ item.val }} : {{ item.port }}
</el-row>
+ <el-row v-if="scope.row.link_acl.length > 5">...</el-row>
</template>
</el-table-column>
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 2/2] =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=BB=84=E5=88=97?=
=?UTF-8?q?=E8=A1=A8=E9=A1=B5=E7=9A=84=E8=B7=AF=E7=94=B1=E5=88=97=E5=8F=AA?=
=?UTF-8?q?=E6=98=BE=E7=A4=BA5=E6=9D=A1=EF=BC=8C=E8=B6=85=E8=BF=87?=
=?UTF-8?q?=E5=88=99=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);
+ }
+ },
},
}