perf: 优化系统用户详情信息

src/views/assets/SystemUser/SystemUserDetail/Detail.vue

@@ -4,15 +4,21 @@
       <DetailCard :items="detailCardItems" />
     </el-col>
     <el-col :span="10">
-      <QuickUpdate v-bind="AutoPushConfig" />
-      <RelationCard v-if="object.protocol === 'ssh'" ref="RelationCard" type="info" style="margin-top: 15px" v-bind="nodeRelationConfig" />
+      <QuickActions type="primary" :actions="quickActions" />
+      <RelationCard
+        v-if="object.protocol === 'ssh'"
+        ref="RelationCard"
+        v-bind="nodeRelationConfig"
+        type="info"
+        style="margin-top: 15px"
+      />
     </el-col>
   </el-row>
 </template>
 
 <script>
 import DetailCard from '@/components/DetailCard'
-import QuickUpdate from './QuickUpdate'
+import QuickActions from '@/components/QuickActions'
 import RelationCard from '@/components/RelationCard/index'
 import { toSafeLocalDateStr } from '@/utils/common'
 
@@ -20,7 +26,7 @@ export default {
   name: 'Detail',
   components: {
     DetailCard,
-    QuickUpdate,
+    QuickActions,
     RelationCard
   },
   props: {
@@ -31,17 +37,29 @@ export default {
   },
   data() {
     return {
-      AutoPushConfig: {
-        icon: 'fa-info',
-        title: this.$t('assets.QuickUpdate'),
-        url: `/api/v1/assets/system-users/${this.object.id}/`,
-        content: [
-          {
-            name: this.$t('assets.AutoPush'),
-            auto_push: this.object.auto_push
+      quickActions: [
+        {
+          title: this.$t('assets.AutoPush'),
+          type: 'switcher',
+          attrs: {
+            label: this.$t('assets.AutoPush'),
+            model: this.object.auto_push,
+            disabled: ['rdp', 'ssh'].indexOf(this.object.protocol) === -1
+          },
+          callbacks: {
+            change: function(val) {
+              this.$axios.patch(
+                `/api/v1/assets/system-users/${this.object.id}/`,
+                { auto_push: val }
+              ).then(res => {
+                this.$message.success(this.$t('common.updateSuccessMsg'))
+              }).catch(err => {
+                this.$message.error(this.$t('common.updateErrorMsg' + ' ' + err))
+              })
+            }.bind(this)
           }
-        ]
-      },
+        }
+      ],
       nodeRelationConfig: {
         icon: 'fa-info',
         hasObjectsId: this.object.cmd_filters,
@@ -97,6 +115,10 @@ export default {
           key: this.$t('assets.Username'),
           value: this.object.username
         },
+        {
+          key: this.$t('assets.Protocol'),
+          value: this.object.protocol
+        },
         {
           key: this.$t('assets.LoginModel'),
           value: this.object.login_mode_display

src/views/assets/SystemUser/SystemUserDetail/QuickUpdate.vue

@@ -1,72 +0,0 @@
-<template>
-  <el-card class="box-card primary box-margin">
-    <div slot="header" class="clearfix">
-      <i v-if="icon" :class="'fa ' + icon" />
-      <span>{{ title }}</span>
-    </div>
-    <div>
-      <el-table class="el-table" :data="content" :show-header="false">
-        <el-table-column prop="name" />
-        <el-table-column prop="auto_push" align="right">
-          <template slot-scope="scope">
-            <Switcher
-              v-model="scope.row.auto_push"
-              @change="HandleChangeAction(scope.$index, scope.row)"
-            />
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-  </el-card>
-</template>
-
-<script>
-import { Switcher } from '@/components'
-
-export default {
-  name: 'AutoPushCard',
-  components: {
-    Switcher
-  },
-  props: {
-    title: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    content: {
-      type: Array,
-      default: () => []
-    },
-    url: {
-      type: String,
-      default: ''
-    }
-  },
-  methods: {
-    HandleChangeAction(index, row) {
-      this.$axios.patch(this.url, { auto_push: row.auto_push }
-      ).then(res => {
-        this.$message.success(this.$t('common.updateSuccessMsg'))
-      }).catch(err => {
-        this.$message.error(this.$t('common.updateErrorMsg' + ' ' + err))
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .box-margin {
-    margin-bottom: 20px;
-  }
-  .el-table::before{
-    display: none;
-  }
-  .el-table >>> td{
-    border-bottom: none;
-  }
-</style>