mirror of
https://github.com/jumpserver/lina.git
synced 2025-09-18 08:12:33 +00:00
perf: 完成一些快速筛选
This commit is contained in:
@@ -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: {
|
||||
|
129
src/components/Table/ListTable/QuickFilter.vue
Normal file
129
src/components/Table/ListTable/QuickFilter.vue
Normal 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>
|
@@ -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
|
||||
|
@@ -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>
|
||||
|
@@ -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: {
|
||||
|
Reference in New Issue
Block a user