perf: 优化 action 显示

src/components/TableFormatters/AmountFormatter.vue

@@ -1,15 +1,15 @@
 <template>
-  <DetailFormatter :row="row" :col="col">
+  <DetailFormatter :col="col" :row="row">
     <template>
       <el-popover
-        placement="top-start"
-        :title="title"
-        width="400"
-        trigger="hover"
         :disabled="!showItems"
+        :title="title"
+        placement="top-start"
+        trigger="hover"
+        width="400"
       >
         <div class="detail-content">
-          <div v-for="item of items" :key="item" class="detail-item">
+          <div v-for="item of items" :key="getKey(item)" class="detail-item">
             <span class="detail-item-name">{{ item }}</span>
           </div>
         </div>
@@ -22,37 +22,48 @@
 <script>
 import DetailFormatter from './DetailFormatter'
 import BaseFormatter from './base'
+
 export default {
   name: 'AmountFormatter',
   components: {
     DetailFormatter
   },
   extends: BaseFormatter,
-  data() {
-    return {
-      formatterArgsNew: {
-        showItems: true,
-        getItem(item) {
-          return item.name
+  props: {
+    formatterArgsDefault: {
+      type: Object,
+      default() {
+        return {
+          showItems: true,
+          getItem(item) {
+            return item.name
+          }
         }
       }
     }
   },
+  data() {
+    return {
+      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs || {})
+    }
+  },
   computed: {
     title() {
       return this.formatterArgs.title || ''
     },
     items() {
-      const getItem = this.formatterArgs.getItem || function(item) { return item.name }
+      const getItem = this.formatterArgs.getItem || (item => item.name)
       return this.cellValue?.map(item => getItem(item))
     },
     showItems() {
       return this.formatterArgs.showItems !== false && this.cellValue?.length > 0
     }
   },
-  mounted() {
-  },
   methods: {
+    getKey(item) {
+      const id = Math.random().toString(36).substring(2)
+      return id + item
+    }
   }
 }
 </script>

src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionDetail.vue

@@ -1,10 +1,10 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="14" :sm="24">
-      <AutoDetailCard :url="url" :fields="detailFields" :object="object" />
+      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
     <el-col :md="10" :sm="24">
-      <QuickActions type="primary" :actions="quickActions" />
+      <QuickActions :actions="quickActions" type="primary" />
     </el-col>
   </el-row>
 </template>
@@ -72,7 +72,7 @@ export default {
           key: this.$t('perms.Actions'),
           value: this.object.actions,
           formatter(row, value) {
-            const actionLabels = value.map(item => item.label)
+            const actionLabels = value.map(item => item.label.replace(/ \([^)]*\)/, ''))
             return (
               <div>
                 {actionLabels.map(item => (

src/views/perms/AssetPermission/AssetPermissionList.vue

@@ -29,6 +29,7 @@ export default {
     PermBulkUpdateDialog
   },
   data() {
+    const vm = this
     return {
       helpMsg: this.$t('perms.AssetPermissionHelpMsg'),
       treeSetting: {
@@ -61,9 +62,12 @@ export default {
           action: {
             label: this.$t('common.Action'),
             formatter: function(row) {
+              if (row.actions.length === 6) {
+                return vm.$t('common.All')
+              }
               return row.actions.map(item => {
-                return item.label
-              }).join(', ')
+                return item.label.replace(/ \([^)]*\)/, '')
+              }).join(',')
             }
           },
           is_expired: {