perf: asset name edit add icon

jumpserver · Aug 9, 2024 · 607bb47 · 607bb47
1 parent 1d676ec
commit 607bb47
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 7 deletions.
diff --git a/src/components/Table/TableFormatters/EditableInputFormatter.vue b/src/components/Table/TableFormatters/EditableInputFormatter.vue
@@ -1,16 +1,26 @@
 <template>
-  <div style="width: 100%;min-height: 20px" @click.stop="editCell">
+  <div class="edit-container" style="min-height: 20px" @click.stop="editCell">
     <el-input
       v-if="inEditMode"
+      ref="inputRef"
       v-model="value"
       class="editInput"
       size="mini"
       @blur="onInputEnter"
       @keyup.enter.native="onInputEnter"
     />
     <template v-else>
-      <span>{{ iCellValue }}</span>
+      <span class="cellValue">{{ iCellValue }}</span>
+      <a
+        v-if="formatterArgs.showEditBtn"
+        :class="[{ 'disabled-link': this.$store.getters.currentOrgIsRoot },'edit-btn']"
+        style="padding-left: 5px"
+        @click="editCell"
+      >
+        <i class="fa fa-edit" />
+      </a>
     </template>
+
   </div>
 </template>
 
@@ -61,6 +71,9 @@ export default {
     editCell() {
       if (this.formatterArgs.canEdit) {
         this.inEditMode = true
+        this.$nextTick(() => {
+          this.$refs.inputRef.focus()
+        })
       }
     },
     getCellValue(val) {
@@ -88,7 +101,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .editInput ::v-deep .el-input__inner {
   padding: 2px;
   line-height: 12px;
@@ -97,4 +110,35 @@ export default {
 .editInput {
   padding: -6px;
 }
+
+.edit-btn {
+  visibility: hidden;
+  position: relative;
+  transition: all 1s;
+
+  & > i {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+}
+
+.edit-container {
+  display: flex;
+  flex-wrap: nowrap;
+
+  &:hover {
+    .edit-btn {
+      visibility: visible;
+    }
+  }
+
+  .cellValue {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}
+
 </style>
diff --git a/src/views/workbench/myassets/index.vue b/src/views/workbench/myassets/index.vue
@@ -61,17 +61,19 @@ export default {
         formatter: EditableInputFormatter,
         formatterArgs: {
           canEdit: true,
+          showEditBtn: true,
           onEnter: ({ row, col, oldValue, newValue }) => {
-            this.updateAssetCoustomAtrr(row, col, oldValue, newValue)
+            this.updateAssetCustomAttr(row, col, oldValue, newValue)
           }
         }
       },
       comment: {
         formatter: EditableInputFormatter,
         formatterArgs: {
           canEdit: true,
+          showEditBtn: true,
           onEnter: ({ row, col, oldValue, newValue }) => {
-            this.updateAssetCoustomAtrr(row, col, oldValue, newValue)
+            this.updateAssetCustomAttr(row, col, oldValue, newValue)
           }
         }
       }
@@ -121,14 +123,21 @@ export default {
       })
       return ok
     },
-    updateAssetCoustomAtrr(row, col, oldValue, newValue) {
+    updateAssetCustomAttr(row, col, oldValue, newValue) {
+      if (oldValue.toString() === newValue.toString()) {
+        return
+      }
       const colProp = col.prop
+
       this.$axios.post('/api/v1/assets/my-asset/', {
         asset: row.id,
         [colProp]: newValue
+      }).catch((e) => {
+        this.$message.error(e?.response?.request?.responseText || this.$t('BadRequestErrorMsg'))
+        return Promise.reject(e)
       }).then(() => {
+        this.$set(row, colProp, newValue)
         this.$message.success(this.$t('UpdateSuccessMsg'))
-        this.$refs.grantedAssets.$refs.AssetTreeTable.$refs.TreeList.reloadTable()
       })
     }
   }