7x31
/
anylink
mirror of https://github.com/bjdgyc/anylink.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

用户组列表页的路由列只显示5条，超过则显示更多

This commit is contained in:
lanrenwo 2022-06-15 22:42:20 +08:00
parent 7f1e769377
commit 4b36577b00
2 changed files with 61 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
web/src/pages/group/List.vue
View File

@ -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,6 +338,7 @@
<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
<el-button @click="disVisible">取消</el-button>
</el-form-item>
</el-tabs>
</el-form>
</el-dialog>
@ -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>

31
web/src/pages/user/Policy.vue
View File

@ -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,8 +391,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>