From 8d688ee2df0d97d5faa7d48d0034c0a5c416d585 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Tue, 2 Jun 2020 10:52:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=20loginlog=EF=BC=8C?=
 =?UTF-8?q?=E5=92=8Ctag=20search?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TagSearch/index.vue    | 31 ++++++++++++++++++++++-----
 src/layout/components/NavBar/Logo.vue | 13 ++++++++---
 src/views/audits/LoginLogList.vue     | 29 +++++++++++++++++--------
 3 files changed, 56 insertions(+), 17 deletions(-)

diff --git a/src/components/TagSearch/index.vue b/src/components/TagSearch/index.vue
index bd890952f..0d6e2796d 100644
--- a/src/components/TagSearch/index.vue
+++ b/src/components/TagSearch/index.vue
@@ -2,9 +2,11 @@
   <div class="filter-field">
     <el-cascader ref="Cascade" :options="options" :props="config" @change="handleMenuItemChange" />
     <el-tag v-for="(v, k) in filterTags" :key="k" :name="k" closable size="small" class="filter-tag" type="info" @close="handleTagClose(k)">
-      <strong v-if="v.label">{{ v.label + ':' }}</strong> {{ v.value }}
+      <strong v-if="v.label">{{ v.label + ':' }}</strong>
+      <span v-if="v.valueLabel">{{ v.valueLabel }}</span>
+      <span v-else>{{ v.value }}</span>
     </el-tag>
-    <span v-if="filterLabel" slot="prefix" class="filterTitle">{{ filterLabel + ':' }}</span>
+    <span v-if="keyLabel" slot="prefix" class="filterTitle">{{ keyLabel + ':' }}</span>
     <el-input ref="SearchInput" v-model="filterValue" :placeholder="placeholder" class="search-input" @blur="focus = false" @focus="focus = true" @change="handleConfirm" />
   </div>
 </template>
@@ -26,12 +28,13 @@ export default {
     return {
       filterKey: '',
       filterValue: '',
+      valueLabel: '',
       filterTags: {},
       focus: false
     }
   },
   computed: {
-    filterLabel() {
+    keyLabel() {
       for (const field of this.options) {
         if (field.value === this.filterKey) {
           return field.label
@@ -68,6 +71,22 @@ export default {
     }
   },
   methods: {
+    getValueLabel(key, value) {
+      for (const field of this.options) {
+        if (field.value !== key) {
+          continue
+        }
+        if (!field.children) {
+          continue
+        }
+        for (const child of field.children) {
+          if (child.value === value) {
+            return child.label
+          }
+        }
+      }
+      return ''
+    },
     handleMenuItemChange(keys) {
       this.$log.debug('Tag search keys: ', keys)
       if (keys.length === 0) {
@@ -79,10 +98,10 @@ export default {
       } else if (keys.length === 2) {
         this.filterKey = keys[0]
         this.filterValue = keys[1]
+        this.valueLabel = this.getValueLabel(keys[0], keys[1])
         this.handleConfirm()
       }
       this.$nextTick(() => this.$refs.Cascade.handleClear())
-      // setTimeout(() => this.$refs.Cascade.handleClear(), 100)
     },
     handleTagClose(evt) {
       this.$delete(this.filterTags, evt)
@@ -92,9 +111,11 @@ export default {
       if (this.filterValue && !this.filterKey) {
         this.filterKey = 'search'
       }
-      this.$set(this.filterTags, this.filterKey, { label: this.filterLabel, value: this.filterValue })
+      const tag = { key: this.filterKey, label: this.keyLabel, value: this.filterValue, valueLabel: this.valueLabel }
+      this.$set(this.filterTags, this.filterKey, tag)
       this.filterKey = ''
       this.filterValue = ''
+      this.valueLabel = ''
     }
   }
 }
diff --git a/src/layout/components/NavBar/Logo.vue b/src/layout/components/NavBar/Logo.vue
index f383c3da4..e160e2575 100644
--- a/src/layout/components/NavBar/Logo.vue
+++ b/src/layout/components/NavBar/Logo.vue
@@ -6,8 +6,8 @@
         <h1 v-else class="sidebar-title">{{ title }}</h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="customSettings.logo_index != '/static/img/logo_text.png' " :src="customSettings.logo_index" class="sidebar-logo">
-        <img v-else-if="logoText" :src="logoText" class="sidebar-logo-text">
+        <img :src="logoSrc" class="sidebar-logo-text">
+        <!--        <img v-else-if="logoText" :src="logoText" class="sidebar-logo-text">-->
         <!--        <h1 class="sidebar-title">{{ title }}</h1>-->
       </router-link>
     </transition>
@@ -35,7 +35,14 @@ export default {
   computed: {
     ...mapGetters([
       'customSettings'
-    ])
+    ]),
+    logoSrc() {
+      if (this.customSettings.logo_index !== '/static/img/logo_text.png') {
+        return this.customSettings.logo_index
+      } else {
+        return this.logoText
+      }
+    }
   },
   created() {
     console.log(this.customSettings.logo_index)
diff --git a/src/views/audits/LoginLogList.vue b/src/views/audits/LoginLogList.vue
index be039f719..d4b03d319 100644
--- a/src/views/audits/LoginLogList.vue
+++ b/src/views/audits/LoginLogList.vue
@@ -13,21 +13,32 @@ export default {
     return {
       tableConfig: {
         url: '/api/v1/audits/login-logs/',
-        columns: ['id', 'username', 'type', 'ip', 'city', 'user_agent', 'mfa', 'reason', 'status', 'datetime'],
+        columns: ['username', 'type', 'ip', 'city', 'user_agent', 'mfa', 'reason', 'status', 'datetime'],
         columnsMeta: {
-          id: {
-            type: 'index'
-          },
           user_agent: {
-            formatter: (row, column, cellValue) => cellValue.slice(0, 20),
-            width: '150px'
+            width: '150px',
+            showOverflowTooltip: true
+          },
+          ip: {
+            width: '130px'
+          },
+          status: {
+            width: '80px'
+          },
+          mfa: {
+            label: 'MFA',
+            width: '80px'
+          },
+          type: {
+            width: '100px'
+          },
+          datetime: {
+            width: '160px'
           }
         }
       },
       headerActions: {
-        hasSelection: false,
-        hasCreate: false,
-        hasBulkDelete: false,
+        hasLeftActions: false,
         hasImport: false,
         hasRefresh: false
       }