[Update] 添加显示节点信息的执行逻辑

src/components/AutoDataZTree/index.vue

@@ -210,7 +210,18 @@ export default {
       this.$emit('urlChange', `${this.setting.url}?node_id=${currentNode.meta.node.id}&show_current_asset=0`)
     },
     showNodeInfo: function() {
-
+      this.hideRMenu()
+      const currentNode = this.zTree.getSelectedNodes()[0]
+      if (!currentNode) {
+        return
+      }
+      this.$axios.get(
+        `/api/v1/assets/nodes/${currentNode.meta.node.id}/`
+      ).then(res => {
+        this.$emit('showNodeInfoDialog', res)
+      }).catch(error => {
+        this.$message.error(this.$t('common.getErrorMsg' + ' ' + error))
+      })
     },
     onRename: function(event, treeId, treeNode, isCancel) {
       const url = `${this.treeSetting.nodeUrl}${this.currentNodeId}/`

src/components/TreeTable/index.vue

@@ -8,6 +8,7 @@
           :setting="treeSetting"
           class="auto-data-ztree"
           @urlChange="handleUrlChange"
+          @showNodeInfoDialog="showNodeInfoDialog"
         >
           <div slot="rMenu" slot-scope="{data}">
             <slot name="rMenu" :data="data" />
@@ -24,12 +25,19 @@
           <ListTable ref="ListTable" :key="componentKey" :table-config="iTableConfig" :header-actions="headerActions" />
         </div>
       </div>
+      <Dialog width="30%" :title="this.$t('assets.NodeInformation')" :visible.sync="nodeInfoDialog.show" :show-cancel="false" :show-confirm="false">
+        <el-row v-for="item in nodeInfoDialog.items" :key="'card-' + item.key" :gutter="10" class="item">
+          <el-col :span="6"><div class="item-label"><label>{{ item.label }}: </label></div></el-col>
+          <el-col :span="18"><div class="item-text">{{ item.value }}</div></el-col>
+        </el-row>
+      </Dialog>
     </div>
   </el-collapse-transition>
 </template>
 
 <script>
 import AutoDataZTree from '../AutoDataZTree'
+import Dialog from '@/components/Dialog'
 import ListTable from '../ListTable'
 import IBox from '../IBox'
 export default {
@@ -37,7 +45,8 @@ export default {
   components: {
     ListTable,
     AutoDataZTree,
-    IBox
+    IBox,
+    Dialog
   },
   props: {
     ...ListTable.props,
@@ -59,8 +68,11 @@ export default {
     return {
       iTableConfig: this.tableConfig,
       iShowTree: this.showTree,
-      componentKey: 0
-
+      componentKey: 0,
+      nodeInfoDialog: {
+        show: false,
+        items: []
+      }
     }
   },
   watch: {
@@ -79,12 +91,21 @@ export default {
     },
     getSelectedNodes: function() {
       return this.$refs.AutoDataZTree.getSelectedNodes()
+    },
+    showNodeInfoDialog(node) {
+      this.nodeInfoDialog.show = true
+      this.nodeInfoDialog.items = [
+        { key: 'id', label: 'ID', value: node.id },
+        { key: 'name', label: this.$t('assets.Name'), value: node.name },
+        { key: 'fullName', label: this.$t('assets.FullName'), value: node.full_value },
+        { key: 'key', label: this.$t('assets.Key'), value: node.key }
+      ]
     }
   }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
   .mini-button{
     width: 12px;
     float: right;
@@ -108,4 +129,11 @@ export default {
     overflow: auto;
     /*border-right: solid 1px red;*/
   }
+
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+     }
+  }
 </style>

src/i18n/langs/cn.json

@@ -29,6 +29,9 @@
     "": ""
   },
   "assets": {
+    "FullName": "全称",
+    "Key": "键",
+    "NodeInformation": "节点信息",
     "Action": "动作",
     "AutoGenerateKey": "自动生成密钥",
     "UnselectedAssets":"未选择资产",
@@ -248,6 +251,7 @@
       "DropConfirmMsg": "你想移动节点: {src} 到 {dst} 下吗?"
     },
     "updateErrorMsg": "更新失败",
+    "getErrorMsg": "获取失败",
     "updateSelected": "更新所选",
     "updateSuccessMsg": "更新成功",
     "Disable": "禁用",

src/i18n/langs/en.json

@@ -29,6 +29,9 @@
     "": ""
   },
   "assets": {
+    "FullName": "Full name",
+    "Key": "Key",
+    "NodeInformation": "Node information",
     "Action": "Action",
     "NoInputCommand": "No input command",
     "UnselectedAssets":"Unselected assets",
@@ -244,6 +247,7 @@
       "Empty": "Empty",
       "Loading": "Loading"
     },
+    "getErrorMsg": "Get failed",
     "updateErrorMsg": "Update failed",
     "updateSelected": "Update selected",
     "updateSuccessMsg": "Update success",