From 291b15956b275d84c063d7e93e358d321bbc19b8 Mon Sep 17 00:00:00 2001
From: fit2bot <68588906+fit2bot@users.noreply.github.com>
Date: Mon, 6 Feb 2023 16:41:42 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BF=AE=E6=94=B9=20tree=20menu=20(#25?=
 =?UTF-8?q?36)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* perf: 修改 ztree

* perf: 修改 tree menu

---------

Co-authored-by: ibuler <ibuler@qq.com>
---
 src/components/AutoDataTable/index.vue        |   5 +-
 src/components/AutoDataZTree/index.vue        |   8 +-
 .../DataZTree/components/ZTree/index.vue      | 113 +++++++++---------
 src/components/FormFields/CodeEditor.vue      |  36 +++---
 src/components/TreeTable/index.vue            |  22 ++--
 src/i18n/langs/en.json                        |   1 +
 src/i18n/langs/ja.json                        |   1 +
 src/i18n/langs/zh.json                        |   1 +
 src/views/assets/Asset/AssetList/AllList.vue  |  31 +----
 .../components/NodeAssetsUpdateDialog.vue     |  29 ++++-
 .../Asset/AssetList/components/TreeMenu.vue   |  65 ++++++++--
 src/views/assets/Domain/DomainList.vue        |   6 +-
 12 files changed, 180 insertions(+), 138 deletions(-)

diff --git a/src/components/AutoDataTable/index.vue b/src/components/AutoDataTable/index.vue
index 23580d8bc..ac24b2ce6 100644
--- a/src/components/AutoDataTable/index.vue
+++ b/src/components/AutoDataTable/index.vue
@@ -235,10 +235,11 @@ export default {
     setDefaultFormatterIfNeed(col) {
       if (!col.formatter) {
         col.formatter = (row, column, cellValue) => {
-          const value = cellValue || '-'
+          let value = cellValue
           let padding = '0'
-          if (value === '-') {
+          if (!value && value !== 0) {
             padding = '6px'
+            value = '-'
           }
           return <span style={{ marginLeft: padding }}>{value}</span>
         }
diff --git a/src/components/AutoDataZTree/index.vue b/src/components/AutoDataZTree/index.vue
index cbe8c672b..7fb5ccd4b 100644
--- a/src/components/AutoDataZTree/index.vue
+++ b/src/components/AutoDataZTree/index.vue
@@ -169,7 +169,9 @@ export default {
         treeNode.meta.data = res
         this.zTree.updateNode(treeNode)
         this.$message.success(this.$tc('common.updateSuccessMsg'))
-      }).finally(() => { this.refreshTree() })
+      }).finally(() => {
+        this.refreshTree()
+      })
     },
     onBodyMouseDown: function(event) {
       const rMenuID = this.$refs.dataztree.$refs.ztree.iRMenuID
@@ -305,11 +307,13 @@ export default {
     text-decoration: none;
     background-color: #f5f5f5;
   }
-  .rmenu:hover{
+
+  .rmenu:hover {
     background-color: #f5f7fa;
   }
 
   .data-z-tree >>> .fa {
     width: 10px;
+    margin-right: 3px;
   }
 </style>
diff --git a/src/components/DataZTree/components/ZTree/index.vue b/src/components/DataZTree/components/ZTree/index.vue
index 7e7886cbc..d261d2438 100644
--- a/src/components/DataZTree/components/ZTree/index.vue
+++ b/src/components/DataZTree/components/ZTree/index.vue
@@ -19,9 +19,9 @@
             <input
               id="searchInput"
               v-model="treeSearchValue"
-              type="text"
               autocomplete="off"
               class="tree-input"
+              type="text"
             >
           </a>
           <span v-if="treeSetting.showRefresh" class="icon-refresh" @click="refresh">
@@ -29,10 +29,10 @@
           </span>
         </span>
       </div>
-      <ul v-show="loading" class="ztree">
+      <ul v-if="loading" class="ztree">
         {{ this.$t('common.tree.Loading') }}...
       </ul>
-      <ul v-show="!loading" :id="iZTreeID" class="ztree" />
+      <ul v-else :id="iZTreeID" class="ztree tree-obj" />
       <div v-if="treeSetting.treeUrl===''" class="tree-empty">
         {{ this.$t('common.tree.Empty') }}
       </div>
@@ -42,10 +42,10 @@
         <el-input
           v-if="treeSetting.showSearch && showTreeSearch"
           v-model="treeSearchValue"
+          :placeholder="$tc('common.Search')"
+          class="fixed-tree-search"
           prefix-icon="fa fa-search"
           size="mini"
-          class="fixed-tree-search"
-          :placeholder="$tc('common.Search')"
           @input="treeSearchHandle"
         >
           <span slot="suffix">
@@ -62,7 +62,7 @@
       <ul v-show="loading" class="ztree">
         {{ this.$t('common.tree.Loading') }}...
       </ul>
-      <ul v-show="!loading" :id="iZTreeID" class="ztree" />
+      <ul v-show="!loading" :id="iZTreeID" :key="iZTreeID" class="ztree" />
       <div v-if="treeSetting.treeUrl===''" class="tree-empty">
         {{ this.$t('common.tree.Empty') }}
         <a id="tree-refresh"><i class="fa fa-refresh" /></a>
@@ -123,18 +123,25 @@ export default {
     $.fn.zTree.destroy(this.iZTreeID)
   },
   methods: {
-    initTree: function() {
+    async initTree(refresh = false) {
       const vm = this
       let treeUrl
-      if (this.init) {
-        this.loading = true
-      }
-      if (this.init && this.treeSetting.treeUrl.indexOf('/perms/') !== -1 && this.treeSetting.treeUrl.indexOf('rebuild_tree') === -1) {
-        treeUrl = (this.treeSetting.treeUrl.indexOf('?') === -1) ? `${this.treeSetting.treeUrl}?rebuild_tree=1` : `${this.treeSetting.treeUrl}&rebuild_tree=1`
+      this.loading = true
+      if (refresh && this.treeSetting.treeUrl.indexOf('/perms/') !== -1 &&
+        this.treeSetting.treeUrl.indexOf('rebuild_tree') === -1
+      ) {
+        treeUrl = (this.treeSetting.treeUrl.indexOf('?') === -1)
+          ? `${this.treeSetting.treeUrl}?rebuild_tree=1`
+          : `${this.treeSetting.treeUrl}&rebuild_tree=1`
       } else {
         treeUrl = this.treeSetting.treeUrl
       }
-      this.$axios.get(treeUrl, {
+
+      if (refresh) {
+        $.fn.zTree.destroy(this.iZTreeID)
+      }
+
+      let res = await this.$axios.get(treeUrl, {
         'axios-retry': {
           retries: 20,
           retryCondition: e => {
@@ -145,36 +152,29 @@ export default {
             return 5000
           }
         }
-      }).then(res => {
-        if (!res) res = []
-        if (res.length === 0) {
-          res.push({
-            name: this.$t('common.tree.Empty')
-          })
-        }
-        this.treeSetting.treeUrl = treeUrl
-        if (this.init) {
-          vm.zTree.destroy()
-        }
-
-        this.zTree = $.fn.zTree.init($(`#${this.iZTreeID}`), this.treeSetting, res)
-        if (!this.treeSetting.customTreeHeader) {
-          const rootNode = this.zTree.getNodes()[0]
-          this.rootNodeAddDom(rootNode)
-        }
-        // 手动上报事件, Tree加载完成
-        this.$emit('TreeInitFinish', this.zTree)
-
-        if (this.treeSetting.showMenu) {
-          this.rMenu = $(`#${this.iRMenuID}`)
-        }
-        if (this.treeSetting.otherMenu) {
-          $('.menu-actions').append(this.otherMenu)
-        }
-      }).finally(_ => {
-        vm.loading = false
-        vm.init = true
       })
+      vm.loading = false
+      if (!res) res = []
+      if (res?.length === 0) {
+        res?.push({
+          name: this.$t('common.tree.Empty')
+        })
+      }
+      this.treeSetting.treeUrl = treeUrl
+      vm.zTree = $.fn.zTree.init($(`#${this.iZTreeID}`), this.treeSetting, res)
+      if (!this.treeSetting.customTreeHeader) {
+        const rootNode = this.zTree.getNodes()[0]
+        this.rootNodeAddDom(rootNode)
+      }
+      // 手动上报事件, Tree加载完成
+      this.$emit('TreeInitFinish', this.zTree)
+
+      if (this.treeSetting.showMenu) {
+        this.rMenu = $(`#${this.iRMenuID}`)
+      }
+      if (this.treeSetting?.otherMenu) {
+        $('.menu-actions').append(this.otherMenu)
+      }
     },
     onSearch() {
       this.showTreeSearch = !this.showTreeSearch
@@ -187,7 +187,7 @@ export default {
     rootNodeAddDom(rootNode) {
       const { showSearch, showRefresh } = this.treeSetting
       const searchIcon = `
-        <a class="tree-action-btn" onclick="onSearch()">
+        <a class="tree-action-btn" id='search-btn' onclick="onSearch()">
           <i class='fa fa-search tree-banner-icon'></i>
         </a>`
       const refreshIcon = `
@@ -204,16 +204,13 @@ export default {
         $rootNodeRef.after(icons)
       }
     },
-    refresh() {
+    async refresh() {
       this.treeSearchValue = ''
-      const result = this.treeSetting?.callback?.refresh()
-      if (result && result.then) {
-        result.finally(() => {
-          this.initTree()
-        })
-      } else {
-        this.initTree()
+      if (this.treeSetting?.callback?.refresh) {
+        await this.treeSetting.callback.refresh()
       }
+      this.zTree.destroy()
+      setTimeout(() => this.initTree(true), 200)
     },
     treeSearch() {
       const searchIcon = document.getElementById(`searchIcon`)
@@ -374,7 +371,6 @@ export default {
         }
         searchNode.open = true
       })
-      return
     }
   }
 
@@ -455,7 +451,8 @@ export default {
   .treebox {
     height: 70vh;
     background-color: transparent;
-    >>> .ztree {
+
+    > > > .ztree {
       overflow: auto;
       background-color: transparent;
       height: calc(100% - 50px);
@@ -464,7 +461,7 @@ export default {
         background-color: transparent !important;
 
         .button {
-          background-color: rgba(0,0,0,0);
+          background-color: rgba(0, 0, 0, 0);
         }
 
         ul {
@@ -589,21 +586,21 @@ export default {
   .fixed-tree-search {
     margin-bottom: 10px;
 
-    & >>> .el-input__inner {
+    & > > > .el-input__inner {
       border-radius: 4px;
       background: #fafafa;
       padding-right: 32px;
     }
 
-    & >>> .el-input__suffix {
+    & > > > .el-input__suffix {
       padding-right: 8px;
     }
 
-    & >>> .el-input__prefix {
+    & > > > .el-input__prefix {
       padding-left: 6px;
     }
 
-    & >>> .el-input__suffix-inner {
+    & > > > .el-input__suffix-inner {
       line-height: 30px;
     }
   }
diff --git a/src/components/FormFields/CodeEditor.vue b/src/components/FormFields/CodeEditor.vue
index fceaf673a..dcfbdbd52 100644
--- a/src/components/FormFields/CodeEditor.vue
+++ b/src/components/FormFields/CodeEditor.vue
@@ -1,17 +1,17 @@
 <template>
-  <div style="font-size: 12px" class="code-editor">
+  <div class="code-editor" style="font-size: 12px">
     <div class="toolbar">
       <div
         v-for="(item,index) in toolbar.left"
         :key="index"
         style="display: inline-block; margin: 0 2px"
       >
-        <el-tooltip :content="item.tip" placement="top" :disabled="!item.tip">
+        <el-tooltip :content="item.tip" :disabled="!item.tip" placement="top">
           <el-button
             v-if="item.type ==='button'"
-            size="mini"
-            :type="item.el&&item.el.type"
             :disabled="item.disabled"
+            :type="item.el&&item.el.type"
+            size="mini"
             @click="item.callback()"
           >
             <i :class="item.icon" style="margin-right: 4px;" />{{ item.name }}
@@ -20,9 +20,9 @@
           <el-autocomplete
             v-if="item.type === 'input' && item.el.autoComplete"
             v-model="item.value"
-            size="mini"
-            class="inline-input"
             :fetch-suggestions="item.el.query"
+            class="inline-input"
+            size="mini"
             @select="item.callback(item.value)"
           />
 
@@ -34,13 +34,13 @@
               v-if="item.type==='select' && item.el && item.el.create"
               :key="index"
               v-model="item.value"
-              class="autoWidth-select"
-              size="mini"
-              default-first-option
-              :multiple="item.el.multiple"
               :allow-create="item.el.create || false"
               :filterable="item.el.create || false"
+              :multiple="item.el.multiple"
               :placeholder="item.name"
+              class="autoWidth-select"
+              default-first-option
+              size="mini"
               @change="item.callback(item.value)"
             >
               <template slot="prefix">
@@ -50,8 +50,8 @@
                 v-for="(option,id) in item.options"
                 :key="id"
                 :label="option.label"
-                :value="option.value"
                 :title="option.value"
+                :value="option.value"
               />
             </el-select>
           </div>
@@ -63,7 +63,7 @@
               item.callback(command)
             }"
           >
-            <el-button type="default" size="mini">
+            <el-button size="mini" type="default">
               <b>{{ item.name }}:</b> {{ getLabel(item.value, item.options) }} <i
                 class="el-icon-arrow-down el-icon--right"
               />
@@ -78,14 +78,14 @@
           <el-switch
             v-if="item.type === 'switch'"
             v-model="item.value"
-            :disabled="item.disabled"
             :active-text="item.name"
+            :disabled="item.disabled"
             @change="item.callback( item.value)"
           />
         </el-tooltip>
       </div>
 
-      <div style="float: right" class="right-side">
+      <div class="right-side" style="float: right">
         <div
           v-for="(item,index) in toolbar.right"
           :key="index"
@@ -94,10 +94,10 @@
           <el-tooltip :content="item.tip">
             <el-button
               v-if="item.type ==='button'"
-              size="mini"
-              type="default"
               :disabled="item.disabled"
+              size="mini"
               style="background-color: transparent"
+              type="default"
               @click="item.callback()"
             >
               <i v-if="item.icon.startsWith('fa')" :class="'fa ' + item.icon" />
@@ -107,7 +107,7 @@
         </div>
       </div>
     </div>
-    <codemirror ref="myCm" v-model="iValue" class="editor" :options="iOptions" />
+    <codemirror ref="myCm" v-model="iValue" :options="iOptions" class="editor" />
   </div>
 </template>
 
@@ -193,7 +193,7 @@ export default {
   line-height: 29px;
   vertical-align: bottom;
   display: inline-block;
-  padding: 3px;
+  padding: 3px 3px 3px 0;
   margin-bottom: 5px;
 }
 
diff --git a/src/components/TreeTable/index.vue b/src/components/TreeTable/index.vue
index bb90745a1..2f9a8f295 100644
--- a/src/components/TreeTable/index.vue
+++ b/src/components/TreeTable/index.vue
@@ -7,45 +7,41 @@
       <div v-show="iShowTree" :style="iShowTree?('width:20%;'):('width:0;')" class="left">
         <component
           :is="component"
-          ref="AutoDataZTree"
           :key="componentTreeKey"
+          ref="AutoDataZTree"
           :setting="treeSetting"
           class="auto-data-ztree"
           v-bind="treeTabConfig"
-          v-on="$listeners"
           @urlChange="handleUrlChange"
+          v-on="$listeners"
         >
           <div slot="rMenu" slot-scope="{data}">
-            <slot name="rMenu" :data="data" />
+            <slot :data="data" name="rMenu" />
           </div>
         </component>
       </div>
       <div
-        class="right"
         :style="iShowTree?('display: flex;width: calc(100% - 20%);'):('display: flex;width:100%;')"
+        class="right"
       >
         <div v-if="showTree" class="mini">
-          <div class="mini-button" :class="{'is-show': iShowTree}" @click="iShowTree = !iShowTree">
+          <div :class="{'is-show': iShowTree}" class="mini-button" @click="iShowTree = !iShowTree">
             <svg-icon
               :icon-class="'double-left'"
-              class="icon-left"
               :style="{'transform': iShowTree ? 'none' : 'rotate(180deg)'}"
+              class="icon-left"
             />
           </div>
         </div>
         <div class="transition-box" style="width: calc(100% - 7px);">
           <slot name="table">
             <ListTable
-              ref="ListTable"
               :key="componentKey"
-              :table-config="iTableConfig"
+              ref="ListTable"
               :header-actions="headerActions"
+              :table-config="iTableConfig"
               v-on="$listeners"
-            >
-              <template v-slot:left>
-                Hello world
-              </template>
-            </ListTable>
+            />
           </slot>
         </div>
       </div>
diff --git a/src/i18n/langs/en.json b/src/i18n/langs/en.json
index 250d23623..25334e4b7 100644
--- a/src/i18n/langs/en.json
+++ b/src/i18n/langs/en.json
@@ -1626,6 +1626,7 @@
   },
   "tree": {
     "AddAssetToNode": "Add asset to node",
+    "RemoveAssetFromNode": "Remove asset from node",
     "CreateNode": "Create node",
     "DeleteNode": "Delete node",
     "MoveAssetToNode": "move asset to node",
diff --git a/src/i18n/langs/ja.json b/src/i18n/langs/ja.json
index 0ef284b25..aac444a7f 100644
--- a/src/i18n/langs/ja.json
+++ b/src/i18n/langs/ja.json
@@ -1617,6 +1617,7 @@
   },
   "tree": {
     "AddAssetToNode": "ノードにアセットを追加",
+    "RemoveAssetFromNode": "ノードからアセットを削除",
     "CreateNode": "ノードの作成",
     "DeleteNode": "ノードの削除",
     "MoveAssetToNode": "資産をノードに移動する",
diff --git a/src/i18n/langs/zh.json b/src/i18n/langs/zh.json
index e63e23f1a..1e7db7339 100644
--- a/src/i18n/langs/zh.json
+++ b/src/i18n/langs/zh.json
@@ -1611,6 +1611,7 @@
   },
   "tree": {
     "AddAssetToNode": "添加资产到节点",
+    "RemoveAssetFromNode": "从节点移除资产",
     "CreateNode": "创建节点",
     "DeleteNode": "删除节点",
     "MoveAssetToNode": "移动资产到节点",
diff --git a/src/views/assets/Asset/AssetList/AllList.vue b/src/views/assets/Asset/AssetList/AllList.vue
index 48c727dc1..4ab7ac668 100644
--- a/src/views/assets/Asset/AssetList/AllList.vue
+++ b/src/views/assets/Asset/AssetList/AllList.vue
@@ -36,7 +36,6 @@ export default {
     BaseList
   },
   data() {
-    const vm = this
     const tableUrl = '/api/v1/assets/assets/'
     return {
       treeRef: null,
@@ -53,35 +52,7 @@ export default {
       headerActions: {
         hasImport: false
       },
-      addExtraMoreActions: [
-        {
-          name: 'RemoveFromCurrentNode',
-          title: this.$t('assets.RemoveFromCurrentNode'),
-          can: ({ selectedRows }) => {
-            if (!vm.$route.query.node_id) {
-              return false
-            }
-            return selectedRows.length > 0 &&
-              !vm.currentOrgIsRoot &&
-              vm.$hasPerm('assets.change_node')
-          },
-          callback: function({ selectedRows, reloadTable }) {
-            const assetsId = []
-            for (const item of selectedRows) {
-              assetsId.push(item.id)
-            }
-            const nodeId = this.$route.query.node_id
-            if (!nodeId) return
-            const url = `/api/v1/assets/nodes/${nodeId}/assets/remove/`
-            this.$axios.put(url, { assets: assetsId }).then(res => {
-              this.$message.success(this.$t('common.removeSuccessMsg'))
-              reloadTable()
-            }).catch(err => {
-              this.$message.error(this.$t('common.removeErrorMsg' + ' ' + err))
-            })
-          }.bind(this)
-        }
-      ],
+      addExtraMoreActions: [],
       helpMessage: this.$t('assets.AssetListHelpMessage')
     }
   },
diff --git a/src/views/assets/Asset/AssetList/components/NodeAssetsUpdateDialog.vue b/src/views/assets/Asset/AssetList/components/NodeAssetsUpdateDialog.vue
index 9008956fa..26b635988 100644
--- a/src/views/assets/Asset/AssetList/components/NodeAssetsUpdateDialog.vue
+++ b/src/views/assets/Asset/AssetList/components/NodeAssetsUpdateDialog.vue
@@ -2,10 +2,11 @@
   <div class="asset-select-dialog">
     <AssetDialog
       v-if="iVisible"
+      :base-url="assetsUrl"
       :title="$tc('assets.Assets')"
       :visible.sync="iVisible"
       @cancel="assetTreeTableDialogHandleCancel"
-      @confirm="assetTreeTableDialogHandleConfirm($event)"
+      @confirm="assetTreeTableDialogHandleConfirm"
     />
   </div>
 </template>
@@ -47,17 +48,37 @@ export default {
       get() {
         return this.visible
       }
+    },
+    assetsUrl() {
+      if (this.action === 'remove') {
+        return '/api/v1/assets/assets/?node_id=' + this.selectNode.meta.data.id
+      } else {
+        return `/api/v1/assets/assets/`
+      }
     }
   },
   methods: {
     assetTreeTableDialogHandleConfirm(assetsSelected) {
+      if (!assetsSelected) {
+        return
+      }
       const currentNode = this.selectNode
       if (!currentNode || assetsSelected.length === 0) {
         return
       }
-      let url = `/api/v1/assets/nodes/${currentNode.meta.data.id}/assets/add/`
-      if (this.action === 'move') {
-        url = `/api/v1/assets/nodes/${currentNode.meta.data.id}/assets/replace/`
+      let url
+      switch (this.action) {
+        case 'add':
+          url = `/api/v1/assets/nodes/${currentNode.meta.data.id}/assets/add/`
+          break
+        case 'move':
+          url = `/api/v1/assets/nodes/${currentNode.meta.data.id}/assets/replace/`
+          break
+        case 'remove':
+          url = `/api/v1/assets/nodes/${currentNode.meta.data.id}/assets/remove/`
+          break
+        default:
+          return
       }
       this.$axios.put(
         url, { assets: assetsSelected }
diff --git a/src/views/assets/Asset/AssetList/components/TreeMenu.vue b/src/views/assets/Asset/AssetList/components/TreeMenu.vue
index dd77e0641..98e00eda4 100644
--- a/src/views/assets/Asset/AssetList/components/TreeMenu.vue
+++ b/src/views/assets/Asset/AssetList/components/TreeMenu.vue
@@ -1,16 +1,50 @@
 <template>
   <div>
-    <li id="m_add_asset_to_node" v-perms="'assets.add_assettonode'" class="rmenu" tabindex="-1" @click="rMenuAddAssetToNode">
+    <li class="divider" />
+    <li
+      id="m_add_asset_to_node"
+      v-perms="'assets.add_assettonode'"
+      class="rmenu"
+      tabindex="-1"
+      @click="rMenuAddAssetToNode"
+    >
       <i class="fa fa-clone" />  {{ this.$t('tree.AddAssetToNode') }}
     </li>
-    <li id="m_move_asset_to_node" v-perms="'assets.move_assettonode'" class="rmenu" tabindex="-1" @click="rMenuMoveAssetToNode">
+    <li
+      id="m_move_asset_to_node"
+      v-perms="'assets.move_assettonode'"
+      class="rmenu"
+      tabindex="-1"
+      @click="rMenuMoveAssetToNode"
+    >
       <i class="fa fa-scissors" />  {{ this.$t('tree.MoveAssetToNode') }}
     </li>
+    <li
+      id="m_remove_asset_from_node"
+      v-perms="'assets.move_assettonode'"
+      class="rmenu"
+      tabindex="-1"
+      @click="rMenuRemoveAssetFromNode"
+    >
+      <i class="fa fa-minus-square-o" />  {{ this.$t('tree.RemoveAssetFromNode') }}
+    </li>
     <li v-if="$hasPerm('assets.move_assettonode | assets.add_assettonode')" class="divider" />
-    <li id="m_update_node_asset_hardware_info" v-perms="'assets.refresh_assethardwareinfo'" class="rmenu" tabindex="-1" @click="rMenuUpdateNodeAssetHardwareInfo">
+    <li
+      id="m_update_node_asset_hardware_info"
+      v-perms="'assets.refresh_assethardwareinfo'"
+      class="rmenu"
+      tabindex="-1"
+      @click="rMenuUpdateNodeAssetHardwareInfo"
+    >
       <i class="fa fa-refresh" />  {{ this.$t('tree.UpdateNodeAssetHardwareInfo') }}
     </li>
-    <li id="m_test_node_asset_connectivity" v-perms="'assets.test_assetconnectivity'" class="rmenu" tabindex="-1" @click="rMenuTestNodeAssetConnectivity">
+    <li
+      id="m_test_node_asset_connectivity"
+      v-perms="'assets.test_assetconnectivity'"
+      class="rmenu"
+      tabindex="-1"
+      @click="rMenuTestNodeAssetConnectivity"
+    >
       <i class="fa fa-link" />  {{ this.$t('tree.TestNodeAssetConnectivity') }}
     </li>
     <li v-if="$hasPerm('assets.add_assettonode | assets.test_assetconnectivity')" class="divider" />
@@ -21,22 +55,29 @@
       <i class="fa fa-align-justify" />  {{ this.$t('tree.ShowAssetAllChildrenNode') }}
     </li>
     <li class="divider" />
-    <li id="m_check_assets_amount" v-perms="'assets.change_node'" class="rmenu" tabindex="-1" @click="rCheckAssetsAmount">
+    <li
+      id="m_check_assets_amount"
+      v-perms="'assets.change_node'"
+      class="rmenu"
+      tabindex="-1"
+      @click="rCheckAssetsAmount"
+    >
       <i class="fa fa-clone" />  {{ this.$t('tree.CheckAssetsAmount') }}
     </li>
     <li id="m_show_node_info" class="rmenu" tabindex="-1" @click="rMenuShowNodeInfo">
       <i class="fa fa-info-circle" />  {{ this.$t('tree.ShowNodeInfo') }}
     </li>
     <NodeAssetsUpdateDialog
+      v-if="nodeAssetsUpdateDialog.visible"
       :visible.sync="nodeAssetsUpdateDialog.visible"
       v-bind="nodeAssetsUpdateDialog"
     />
     <Dialog
-      width="50%"
-      :title="$tc('assets.NodeInformation')"
-      :visible.sync="nodeInfoDialogSetting.dialogVisible"
       :show-cancel="false"
       :show-confirm="false"
+      :title="$tc('assets.NodeInformation')"
+      :visible.sync="nodeInfoDialogSetting.dialogVisible"
+      width="50%"
     >
       <el-row
         v-for="item in nodeInfoDialogSetting.items"
@@ -97,6 +138,11 @@ export default {
       this.nodeAssetsUpdateDialog.action = 'move'
       this.nodeAssetsUpdateDialog.selectNode = this.getSelectedNodes()[0]
     },
+    rMenuRemoveAssetFromNode() {
+      this.nodeAssetsUpdateDialog.visible = true
+      this.nodeAssetsUpdateDialog.action = 'remove'
+      this.nodeAssetsUpdateDialog.selectNode = this.getSelectedNodes()[0]
+    },
     rMenuUpdateNodeAssetHardwareInfo() {
       this.hideMenu()
       const currentNode = this.getSelectedNodes()[0]
@@ -218,8 +264,9 @@ div.rMenu li {
 
 .el-row {
   margin-bottom: 20px;
+
   &:last-child {
-     margin-bottom: 0;
+    margin-bottom: 0;
   }
 }
 
diff --git a/src/views/assets/Domain/DomainList.vue b/src/views/assets/Domain/DomainList.vue
index 1371401b3..29d45d1d2 100644
--- a/src/views/assets/Domain/DomainList.vue
+++ b/src/views/assets/Domain/DomainList.vue
@@ -1,5 +1,5 @@
 <template>
-  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" :help-message="notice" />
+  <GenericListPage :header-actions="headerActions" :help-message="notice" :table-config="tableConfig" />
 </template>
 
 <script>
@@ -14,6 +14,8 @@ export default {
     return {
       tableConfig: {
         url: '/api/v1/assets/domains/',
+        columnsExclude: ['assets', 'gateway'],
+        columnsExtra: ['asset_count', 'gateway_count'],
         columnsShow: {
           min: ['name', 'actions'],
           default: ['name', 'asset_count', 'gateway_count', 'comment', 'actions']
@@ -22,7 +24,7 @@ export default {
           asset_count: {
             label: this.$t('assets.Assets'),
             formatter: function(row) {
-              return <span> { row.assets.length } </span>
+              return <span> {row.assets.length} </span>
             }
           },
           gateway_count: {