feat: Allow users to customize asset name and comment

src/components/Apps/GrantedAssets/index.vue

@@ -1,5 +1,6 @@
 <template>
   <AssetTreeTable
+    ref="AssetTreeTable"
     :header-actions="headerActions"
     :table-config="tableConfig"
     :tree-setting="treeSetting"
@@ -47,9 +48,19 @@ export default {
         return this.tableUrl.replace('/assets/', `/assets/${row.id}/accounts/`)
       }
     },
-    nameDisabled: {
-      type: Boolean,
-      default: true
+    name: {
+      type: Object,
+      default: () => ({
+        formatter: DetailFormatter,
+        formatterArgs: {
+          route: 'AssetDetail',
+          can: true
+        }
+      })
+    },
+    comment: {
+      type: Object,
+      default: () => ({})
     }
   },
   data() {
@@ -80,11 +91,7 @@ export default {
         },
         columnsMeta: {
           name: {
-            formatter: DetailFormatter,
-            formatterArgs: {
-              route: 'AssetDetail',
-              can: !this.nameDisabled
-            }
+            ...this.name
           },
           labels: {
             formatterArgs: {
@@ -99,7 +106,8 @@ export default {
             formatter: AccountInfoFormatter,
             width: '100px'
           },
-          connectivity: connectivityMeta
+          connectivity: connectivityMeta,
+          comment: { ...this.comment }
         },
         tableAttrs: {
           rowClassName({ row }) {

src/views/workbench/myassets/index.vue

@@ -1,12 +1,20 @@
 <template>
   <Page>
-    <GrantedAssets :actions="actions" :table-url="tableUrl" :tree-url="treeUrl" />
+    <GrantedAssets
+      ref="grantedAssets"
+      :name="name"
+      :comment="comment"
+      :actions="actions"
+      :table-url="tableUrl"
+      :tree-url="treeUrl"
+    />
   </Page>
 </template>
 
 <script>
 import GrantedAssets from '@/components/Apps/GrantedAssets/index.vue'
 import Page from '@/layout/components/Page/index.vue'
+import { EditableInputFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   components: {
@@ -48,7 +56,25 @@ export default {
           ]
         }
       },
-      allFavorites: []
+      allFavorites: [],
+      name: {
+        formatter: EditableInputFormatter,
+        formatterArgs: {
+          canEdit: true,
+          onEnter: ({ row, col, oldValue, newValue }) => {
+            this.updateAssetCoustomAtrr(row, col, oldValue, newValue)
+          }
+        }
+      },
+      comment: {
+        formatter: EditableInputFormatter,
+        formatterArgs: {
+          canEdit: true,
+          onEnter: ({ row, col, oldValue, newValue }) => {
+            this.updateAssetCoustomAtrr(row, col, oldValue, newValue)
+          }
+        }
+      }
     }
   },
   mounted() {
@@ -94,6 +120,16 @@ export default {
         }
       })
       return ok
+    },
+    updateAssetCoustomAtrr(row, col, oldValue, newValue) {
+      const colProp = col.prop
+      this.$axios.post('/api/v1/assets/my-asset/', {
+        asset: row.id,
+        [colProp]: newValue
+      }).then(() => {
+        this.$message.success(this.$t('UpdateSuccessMsg'))
+        this.$refs.grantedAssets.$refs.AssetTreeTable.$refs.TreeList.reloadTable()
+      })
     }
   }
 }