[Update] 修改login log

src/components/QuickActions/action.vue

@@ -0,0 +1,59 @@
+<template>
+  <tr>
+    <td>{{ action.title }}:</td>
+    <td>
+      <span>
+        <component :is="iType" v-model="action.attrs.model" v-bind="action.attrs" v-on="callbacks">{{ label }}</component>
+      </span>
+    </td>
+  </tr>
+</template>
+
+<script>
+import Switcher from '../Swicher'
+export default {
+  name: 'ActionItem',
+  components: {
+    Switcher
+  },
+  props: {
+    action: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      empty: () => {}
+    }
+  },
+  computed: {
+    iType() {
+      switch (this.action.type) {
+        case 'switcher':
+          return 'Switcher'
+        default:
+          return 'el-button'
+      }
+    },
+    label() {
+      return this.action.attrs ? this.action.attrs.label : ''
+    },
+    model() {
+      return this.action.attrs ? this.action.attrs.model : ''
+    },
+    callbacks() {
+      const wrappers = {}
+      const callbacks = this.action.callbacks || {}
+      for (const [event, callback] of Object.entries(callbacks)) {
+        wrappers[event] = (e) => callback(e, this.action)
+      }
+      return wrappers
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/QuickActions/index.vue

@@ -1,18 +1,22 @@
 <template>
   <IBox fa="fa-edit" :title="title" v-bind="$attrs">
     <div class="quick-actions">
-      <slot />
+      <table>
+        <ActionItem v-for="action of actions" :key="action.title" :action="action" />
+      </table>
     </div>
   </IBox>
 </template>
 
 <script>
 import { IBox } from '@/components'
+import ActionItem from './action'
 
 export default {
   name: 'QuickActions',
   components: {
-    IBox
+    IBox,
+    ActionItem
   },
   props: {
     title: {
@@ -20,6 +24,10 @@ export default {
       default() {
         return this.$tc('Quick update')
       }
+    },
+    actions: {
+      type: Array,
+      default: () => []
     }
   }
 }
@@ -42,6 +50,7 @@ export default {
   }
 
   .quick-actions >>> button {
-    padding: 1px 13px;
+    padding: 2px 10px;
+    font-size: 13px;
   }
 </style>

src/components/Swicher/index.vue

@@ -4,6 +4,7 @@
     :active-color="activeColor"
     inactive-color="#dcdfe6"
     v-bind="$attrs"
+    v-on="$listeners"
   />
 </template>
 

src/layout/components/GenericCreateUpdatePage/index.vue

@@ -18,8 +18,4 @@ export default {
 </script>
 
 <style scoped>
-  .ibox >>> .el-card__body {
-    padding-top: 30px;
-  }
-
 </style>

src/views/audits/LoginLogList.vue

@@ -13,46 +13,14 @@ export default {
     return {
       tableConfig: {
         url: '/api/v1/audits/login-logs/',
-        columns: ['username', 'type', 'ip', 'city', 'user_agent', 'mfa', 'reason', 'status', 'datetime'],
-        columnsMeta: [
-          {
-            prop: 'username',
-            label: this.$t('audits.username')
-          },
-          {
-            prop: 'type',
-            label: this.$t('audits.type'),
-            sortable: true
-          },
-          {
-            prop: 'ip',
-            label: this.$t('audits.ip')
-          },
-          {
-            prop: 'city',
-            label: this.$t('audits.city')
-          },
-          {
-            prop: 'user_agent',
-            label: this.$tc('audits.user_agent')
-          },
-          {
-            prop: 'mfa',
-            label: this.$t('audits.mfa')
-          },
-          {
-            prop: 'reason',
-            label: this.$t('audits.reason')
-          },
-          {
-            prop: 'status',
-            label: this.$t('audits.status')
-          },
-          {
-            prop: 'datetime',
-            label: this.$t('audits.datetime')
+        columns: ['id', 'username', 'type', 'ip', 'city', 'user_agent', 'mfa', 'reason', 'status', 'datetime'],
+        columnsMeta: {
+          id: {
+            type: 'index',
+            index: (v) => v * 2
           }
-        ]
+        },
+        hasSelection: false
       },
       headerActions: {
         createRoute: 'AssetCreate'

src/views/users/users/UserDetail/UserInfo.vue

@@ -4,73 +4,21 @@
       <DetailCard :items="detailItems" />
     </el-col>
     <el-col :md="10" :sm="24">
-      <QuickActions type="primary">
-        <table>
-          <tr>
-            <td>{{ $tc('Active') }}:</td>
-            <td>
-              <span>
-                <Switcher v-model="isActive" :width="50" />
-              </span>
-            </td>
-          </tr>
-          <tr>
-            <td>{{ $t('users.Force enabled MFA') }}:</td>
-            <td>
-              <span>
-                <Switcher v-model="isForceEnableMFA" :width="50" />
-              </span>
-            </td>
-          </tr>
-          <tr>
-            <td>{{ $t('users.Reset MFA') }}:</td>
-            <td>
-              <span>
-                <el-button type="primary" size="mini">{{ $tc('Reset') }}</el-button>
-              </span>
-            </td>
-          </tr>
-          <tr>
-            <td>{{ $t('users.Send reset password mail') }}:</td>
-            <td>
-              <span>
-                <el-button type="primary" size="mini">{{ $tc('Send') }}</el-button>
-              </span>
-            </td>
-          </tr>
-          <tr>
-            <td>{{ $t('users.Send reset ssh key mail') }}:</td>
-            <td>
-              <span>
-                <el-button type="primary" size="mini">{{ $tc('Send') }}</el-button>
-              </span>
-            </td>
-          </tr>
-          <tr>
-            <td>{{ $t('users.Unblock user') }}</td>
-            <td>
-              <span>
-                <el-button type="primary" size="mini">{{ $tc('Unblock') }}</el-button>
-              </span>
-            </td>
-          </tr>
-        </table>
-      </QuickActions>
+      <QuickActions type="primary" :actions="quickActions" />
       <RelationCard type="info" style="margin-top: 15px" v-bind="relationConfig" />
     </el-col>
   </el-row>
 </template>
 
 <script>
-import { DetailCard, RelationCard, QuickActions, Switcher } from '@/components'
+import { DetailCard, RelationCard, QuickActions } from '@/components'
 
 export default {
   name: 'UserInfo',
   components: {
     DetailCard,
     RelationCard,
-    QuickActions,
-    Switcher
+    QuickActions
   },
   props: {
     object: {
@@ -79,9 +27,82 @@ export default {
     }
   },
   data() {
+    const vm = this
     return {
-      isActive: this.object.is_active,
-      isForceEnableMFA: this.object.mfa_level === 2,
+      quickActions: [
+        {
+          title: this.$tc('Active'),
+          type: 'switcher',
+          attrs: {
+            model: this.object.is_active
+          },
+          callbacks: {
+            change: function(v, item) {
+              const url = `/api/v1/users/users/${vm.object.id}/`
+              const data = { is_active: v }
+              // vm.$axios.patch(url, data).then(() => {
+              // })
+              console.log('Current is: ', url, data)
+              console.log(item)
+            }
+          }
+        },
+        {
+          title: this.$t('users.Force enabled MFA'),
+          type: 'switcher',
+          attrs: {
+            model: this.object.mfa_level === 2
+          }
+        },
+        {
+          title: this.$t('users.Reset MFA'),
+          attrs: {
+            type: 'primary',
+            label: this.$tc('Reset')
+          },
+          callbacks: {
+            click: function() {
+              console.log('click')
+            }
+          }
+        },
+        {
+          title: this.$t('users.Send reset password mail'),
+          attrs: {
+            type: 'primary',
+            label: this.$tc('Send')
+          },
+          callbacks: {
+            click: function() {
+              console.log('click')
+            }
+          }
+        },
+        {
+          title: this.$t('users.Send reset ssh key mail'),
+          attrs: {
+            type: 'primary',
+            label: this.$tc('Send')
+          },
+          callbacks: {
+            click: function() {
+              console.log('click')
+            }
+          }
+        },
+        {
+          title: this.$t('users.Unblock user'),
+          attrs: {
+            type: 'primary',
+            label: this.$tc('Unblock')
+          },
+          callbacks: {
+            click: function() {
+              console.log('click')
+            }
+          }
+        }
+      ],
       relationConfig: {
         icon: 'fa-user',
         title: this.$t('users.User groups'),