perf: 完成一些快速筛选

src/components/Apps/AccountListTable/AccountList.vue

@@ -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: {

src/components/Table/ListTable/QuickFilter.vue

@@ -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>

src/components/Table/ListTable/index.vue

@@ -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

src/views/pam/Account/AccountList.vue

@@ -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>

src/views/users/User/UserList.vue

@@ -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: {