fix: 修复我的资产页面button消失的bug (#844)

* perf: 修改命令存储创建

* fix: 修复我的资产页面button消失的bug

Co-authored-by: ibuler <ibuler@qq.com>

src/components/DataActions/index.vue

@@ -44,7 +44,6 @@
         </el-tooltip>
       </el-button>
     </template>
-
   </div>
 </template>
 

src/components/TableFormatters/ActionsFormatter.vue

@@ -1,5 +1,5 @@
 <template>
-  <ActionsGroup :size="'mini'" :actions="actions" :more-actions="moreActions" :more-actions-title="moreActionsTitle" />
+  <ActionsGroup v-loading="loadingStatus" :size="'mini'" :actions="actions" :more-actions="moreActions" :more-actions-title="moreActionsTitle" />
 </template>
 
 <script>
@@ -147,6 +147,7 @@ export default {
         v.has = this.cleanBoolean(v, 'has', true)
         v.can = this.cleanBoolean(v, 'can', true)
         v.callback = this.cleanCallback(v, 'callback')
+        v.fa = this.cleanValue(v, 'fa')
         v.order = v.order || 100
         v.tip = this.cleanValue(v, 'tip')
         return v
@@ -166,6 +167,9 @@ export default {
         return []
       }
       return this.cleanedActions.slice(1, this.cleanedActions.length)
+    },
+    loadingStatus() {
+      return this.col.formatterArgs.loading
     }
   },
   methods: {

src/components/TableFormatters/LoadingActionsFormatter.vue

@@ -1,116 +0,0 @@
-<template>
-  <ActionsGroup v-loading="loadStatus" :size="'mini'" :actions="actions" :more-actions="moreActions" />
-</template>
-
-<script>
-import ActionsGroup from '@/components/ActionsGroup'
-import BaseFormatter from './base'
-
-export default {
-  name: 'LoadingActionsFormatter',
-  components: { ActionsGroup },
-  extends: BaseFormatter,
-  props: {
-    formatterArgsDefault: {
-      type: Object,
-      default: function() {
-        return {
-          hasUpdate: true, // can set function(row, value)
-          canUpdate: true, // can set function(row, value)
-          hasDelete: true, // can set function(row, value)
-          canDelete: true,
-          updateRoute: this.$route.name.replace('List', 'Update'),
-          extraActions: [] // format see defaultActions
-        }
-      }
-    }
-  },
-  data() {
-    const colActions = Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
-    const defaultActions = [
-      {
-        name: 'update',
-        title: this.$t('common.Update'),
-        type: 'primary',
-        has: colActions.hasUpdate,
-        can: colActions.canUpdate,
-        callback: colActions.onUpdate
-      },
-      {
-        name: 'delete',
-        title: this.$t('common.Delete'),
-        type: 'danger',
-        has: colActions.hasDelete,
-        can: colActions.canDelete,
-        callback: colActions.onDelete
-      }
-    ]
-    return {
-      colActions: colActions,
-      defaultActions: defaultActions,
-      extraActions: colActions.extraActions
-    }
-  },
-  computed: {
-    cleanedActions() {
-      let actions = [...this.defaultActions, ...this.extraActions]
-      actions = _.cloneDeep(actions)
-      actions = actions.map((v) => {
-        v.has = this.cleanBoolean(v, 'has')
-        v.can = this.cleanBoolean(v, 'can')
-        v.fa = this.cleanFa(v, 'fa')
-        v.callback = this.cleanCallback(v)
-        return v
-      })
-      actions = actions.filter((v) => v.has)
-      return actions
-    },
-    actions() {
-      if (this.cleanedActions.length <= 2) {
-        return this.cleanedActions
-      }
-      return this.cleanedActions.slice(0, 1)
-    },
-    moreActions() {
-      if (this.cleanedActions.length <= 2) {
-        return []
-      }
-      return this.cleanedActions.slice(1, this.cleanedActions.length)
-    },
-    loadStatus() {
-      return this.col.formatterArgs.loading
-    }
-  },
-  methods: {
-    cleanBoolean(item, attr) {
-      const ok = item[attr]
-      if (typeof ok !== 'function') {
-        return ok === undefined ? true : ok
-      }
-      return ok(this.row, this.cellValue)
-    },
-    cleanCallback(item) {
-      const callback = item.callback
-      const attrs = {
-        reload: this.reload,
-        row: this.row,
-        col: this.col,
-        cellValue: this.cellValue,
-        tableData: this.tableData
-      }
-      return () => { return callback.bind(this)(attrs) }
-    },
-    cleanFa(item, attr) {
-      const ok = item[attr]
-      if (typeof ok !== 'function') {
-        return ok === undefined ? false : ok
-      }
-      return ok(this.row, this.cellValue)
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

src/components/TableFormatters/index.js

@@ -9,7 +9,6 @@ import DateFormatter from './DateFormatter'
 import SystemUserFormatter from './GrantedSystemUsersShowFormatter'
 import ShowKeyFormatter from '@/components/TableFormatters/ShowKeyFormatter'
 import DialogDetailFormatter from './DialogDetailFormatter'
-import LoadingActionsFormatter from './LoadingActionsFormatter'
 import EditableInputFormatter from './EditableInputFormatter'
 import StatusFormatter from './StatusFormatter'
 
@@ -24,7 +23,6 @@ export default {
   SystemUserFormatter,
   ShowKeyFormatter,
   DialogDetailFormatter,
-  LoadingActionsFormatter,
   ArrayFormatter,
   EditableInputFormatter,
   StatusFormatter
@@ -41,7 +39,6 @@ export {
   SystemUserFormatter,
   ShowKeyFormatter,
   DialogDetailFormatter,
-  LoadingActionsFormatter,
   ArrayFormatter,
   EditableInputFormatter,
   StatusFormatter

src/userviews/assets/index.vue

@@ -4,7 +4,7 @@
 
 <script>
 import GenericTreeListPage from '@/layout/components/GenericTreeListPage/index'
-import { LoadingActionsFormatter, SystemUserFormatter, DialogDetailFormatter } from '@/components/TableFormatters'
+import { ActionsFormatter, SystemUserFormatter, DialogDetailFormatter } from '@/components/TableFormatters'
 export default {
   components: {
     GenericTreeListPage
@@ -104,7 +104,7 @@ export default {
           {
             prop: 'id',
             align: 'center',
-            formatter: LoadingActionsFormatter,
+            formatter: ActionsFormatter,
             width: '100px',
             label: this.$t('common.action'),
             formatterArgs: {
@@ -117,7 +117,7 @@ export default {
                   name: 'connect',
                   fa: 'fa-terminal',
                   type: 'primary',
-                  can: ({ row, cellValue }) => {
+                  can: function({ row, cellValue }) {
                     return row.is_active
                   },
                   callback: function({ row, col, cellValue, reload }) {
@@ -127,7 +127,7 @@ export default {
                 {
                   name: 'favor',
                   type: 'info',
-                  fa: function(row, cellValue) {
+                  fa: function({ row, cellValue }) {
                     if (this.checkFavorite(row.id)) {
                       return 'fa-star'
                     }
@@ -160,20 +160,25 @@ export default {
   },
   methods: {
     refreshAllFavorites() {
-      this.tableConfig.columns[this.tableConfig.columns.length - 1].formatterArgs.loading = true
+      const actionsIndex = this.tableConfig.columns.length - 1
+      this.tableConfig.columns[actionsIndex].formatterArgs.loading = true
       this.$axios.get('/api/v1/assets/favorite-assets/').then(resp => {
         this.allFavorites = resp
-        this.tableConfig.columns[this.tableConfig.columns.length - 1].formatterArgs.loading = false
+        this.tableConfig.columns[actionsIndex].formatterArgs.loading = false
       })
     },
     addOrDeleteFavorite(assetId) {
       if (this.checkFavorite(assetId)) {
-        this.$axios.delete(`/api/v1/assets/favorite-assets/?asset=${assetId}`).then(res => this.removeFavorite(assetId))
+        this.$axios.delete(`/api/v1/assets/favorite-assets/?asset=${assetId}`).then(
+          res => this.removeFavorite(assetId)
+        )
       } else {
         const data = {
           asset: assetId
         }
-        this.$axios.post('/api/v1/assets/favorite-assets/', data).then(res => this.addFavorite(assetId))
+        this.$axios.post('/api/v1/assets/favorite-assets/', data).then(
+          res => this.addFavorite(assetId)
+        )
       }
     },
     checkFavorite(assetId) {