perf: 完成一些快速筛选

This commit is contained in:
ibuler
2024-10-15 18:26:34 +08:00
parent 73cc319e7b
commit 762fa4c17e
5 changed files with 262 additions and 88 deletions

View File

@@ -1,6 +1,11 @@
<template>
<div>
<ListTable ref="ListTable" :header-actions="headerActions" :table-config="tableConfig" />
<ListTable
ref="ListTable"
:header-actions="headerActions"
:quick-filters="quickFilters"
:table-config="tableConfig"
/>
<ViewSecret
v-if="showViewSecretDialog"
:account="account"
@@ -147,6 +152,87 @@ export default {
iAsset: this.asset,
account: {},
secretUrl: '',
quickFilters: [
{
label: '过滤',
options: [
{
label: '全部账号',
value: ''
},
{
label: '拥有的',
value: 'windows'
},
{
label: '收藏夹',
value: 'linux'
},
{
label: '最近访问',
value: ''
}
]
},
{
label: '风险账号',
options: [
{
label: '过期的密码',
value: 'true'
},
{
label: '冲突的密码',
value: 'true'
},
{
label: '违法策略',
value: 'true'
},
{
label: '禁用的资源',
value: 'true'
},
{
label: '回收站',
value: 'true'
}
]
},
{
label: '账号类型',
options: [
{
label: '全部',
value: 'windows'
},
{
label: ' 主机',
value: 'linux'
},
{
label: '数据库',
value: 'database'
},
{
label: '云',
value: 'cloud'
},
{
label: '网络设备',
value: 'network'
},
{
label: '应用',
value: 'application'
},
{
label: '其他',
value: 'other'
}
]
}
],
tableConfig: {
url: this.url,
permissions: {

View File

@@ -0,0 +1,129 @@
<template>
<div v-if="filters" class="quick-filter">
<div v-show="isExpand" class="quick-filter-wrap">
<div class="quick-filter-zone">
<div v-for="category in filters" :key="category.label" class="item-zone">
<h5>{{ category.label }}</h5>
<div>
<span v-for="option in category.options" :key="option.label" class="item">
{{ option.label }}
</span>
</div>
</div>
</div>
</div>
<div class="expand-bar-wrap">
<div class="expand-bar" @click="toggle">
<i :class="isExpand ? 'expand': 'shrink' " class="fa fa-angle-double-up" />
<span v-show="!isExpand"> 展开过滤器 </span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'QuickFilter',
props: {
filters: {
type: Array,
default: () => []
},
expand: {
type: Boolean,
default: true
}
},
data() {
return {
isExpand: this.expand
}
},
watch: {
isExpand(val) {
this.$emit('expand', val)
}
},
mounted() {
console.log(this.filters)
},
methods: {
toggle() {
this.isExpand = !this.isExpand
console.log('toggle')
}
}
}
</script>
<style lang='scss' scoped>
.quick-filter-zone {
display: flex;
justify-content: flex-start;
h5 {
font-weight: 600;
text-transform: uppercase;
font-size: 12px;
margin-bottom: .5rem;
line-height: 1.2;
display: inline-block;
}
.item-zone {
margin-right: 30px;
margin-bottom: 5px;
}
.item {
display: inline-block;
margin-right: 10px;
border-radius: 5px;
background-color: #f5f7fa;
color: #303133;
font-size: 12px;
cursor: pointer;
&:hover {
color: var(--color-primary);
}
}
ul {
list-style: none outside none;
margin-block-start: 0;
padding-left: 0;
}
}
.quick-filter {
display: flex;
place-content: stretch flex-end;
justify-content: center;
align-content: stretch;
}
.quick-filter-wrap {
display: inline-block;
width: calc(100% - 25px);
margin-bottom: 10px;
}
.expand-bar-wrap {
margin: auto 0;
}
.expand-bar {
text-align: center;
display: inline-block;
cursor: pointer;
i {
padding: 5px;
&.shrink {
transform: rotate(180deg);
}
}
}
</style>

View File

@@ -1,5 +1,6 @@
<template>
<div>
<QuickFilter :filters="quickFilters" />
<TableAction
v-if="hasActions"
:date-pick="handleDateChange"
@@ -31,11 +32,13 @@ import IBox from '../../IBox/index.vue'
import TableAction from './TableAction/index.vue'
import Emitter from '@/mixins/emitter'
import AutoDataTable from '../AutoDataTable/index.vue'
import QuickFilter from './QuickFilter.vue'
import { getDayEnd, getDaysAgo } from '@/utils/time'
export default {
name: 'ListTable',
components: {
QuickFilter,
AutoDataTable,
TableAction,
IBox
@@ -51,6 +54,10 @@ export default {
headerActions: {
type: Object,
default: () => ({})
},
quickFilters: {
type: Array,
default: () => null
}
},
data() {
@@ -190,6 +197,7 @@ export default {
},
mounted() {
this.$set(this.urlUpdated, this.tableUrl, location.href)
console.log('QUick ', this.quickFilters)
},
deactivated() {
this.isDeactivated = true

View File

@@ -1,45 +1,5 @@
<template>
<div>
<div>
<!-- Todo: 未来移动到通用 table -->
<div class="expanded-filter-zone">
<div class="item-zone">
<h5>过滤</h5>
<div>
<span class="item">全部账号</span>
<span class="item">拥有的</span>
<span class="item">收藏夹</span>
<span class="item">最近访问</span>
</div>
</div>
<div class="item-zone">
<h5>风险账号</h5>
<div>
<span class="item">过期的密码</span>
<span class="item">冲突的密码</span>
<span class="item">违法策略</span>
<span class="item">禁用的资源</span>
<span class="item">回收站</span>
</div>
</div>
<div class="item-zone">
<h5>账号类型</h5>
<div>
<span class="item">全部</span>
<span class="item">主机</span>
<span class="item">数据库</span>
<span class="item">网络设备</span>
<span class="item">云服务</span>
<span class="item">其他</span>
</div>
</div>
</div>
<div class="expand-zone">
<div class="expand-bar">
<i class="fa fa-angle-double-up" />
</div>
</div>
</div>
<AccountListTable ref="table" v-bind="tableConfig" />
</div>
</template>
@@ -112,51 +72,4 @@ export default {
padding-left: 20px;
}
.expand-bar {
text-align: center;
i {
cursor: pointer;
//transform: rotateY(90deg);
}
}
.expanded-filter-zone {
display: flex;
justify-content: space-between;
h5 {
font-weight: 600;
text-transform: uppercase;
font-size: 12px;
margin-bottom: .5rem;
line-height: 1.2;
display: inline-block;
}
.item-zone {
margin-right: 30px;
margin-bottom: 5px;
}
.item {
display: inline-block;
margin-right: 10px;
border-radius: 5px;
background-color: #f5f7fa;
color: #303133;
font-size: 12px;
cursor: pointer;
&:hover {
color: var(--color-primary);
}
}
ul {
list-style: none outside none;
margin-block-start: 0;
padding-left: 0;
}
}
</style>

View File

@@ -3,6 +3,7 @@
<GenericListPage
ref="GenericListPage"
:header-actions="headerActions"
:quick-filters="quickFilters"
:table-config="tableConfig"
/>
<GenericUpdateFormDialog
@@ -42,6 +43,43 @@ export default {
return !vm.currentOrgIsRoot
}
return {
quickFilters: [
{
label: '快速筛选',
options: [
{
label: '禁用的',
value: ''
},
{
label: '首次登录的',
value: ''
},
{
label: '没有用户组的',
value: ''
}
]
},
{
label: '认证',
options: [
{
label: '密码过期的',
value: ''
},
{
label: '需要更新密码的',
value: ''
},
{
label: '没有开启 MFA',
value: ''
}
]
}
],
tableConfig: {
url: '/api/v1/users/users/',
permissions: {