[Update] 修改ztree

src/components/AutoDataZTree/index.vue

@@ -12,7 +12,6 @@
 <script>
 import DataZTree from '../DataZTree'
 import $ from '@/utils/jquery-vendor'
-const merge = require('deepmerge')
 export default {
   name: 'AutoDataZTree',
   components: {
@@ -46,14 +45,13 @@ export default {
           // beforeAsync: this.defaultCallback.bind(this, 'beforeAsync')
         }
       },
-      current_node: '',
+      currentNode: '',
-      current_node_id: ''
+      currentNodeId: ''
     }
   },
   computed: {
     treeSetting() {
-      const treeSetting = merge(this.defaultSetting, this.setting)
+      return _.merge(this.defaultSetting, this.setting)
-      return treeSetting
     },
     zTree() {
       return this.$refs.dataztree.zTree
@@ -86,14 +84,14 @@ export default {
     },
     editTreeNode: function() {
       this.hideRMenu()
-      var current_node = this.zTree.getSelectedNodes()[0]
+      var currentNode = this.zTree.getSelectedNodes()[0]
-      if (!current_node) {
+      if (!currentNode) {
         return
       }
-      if (current_node) {
+      if (currentNode) {
-        current_node.name = current_node.meta.node.value
+        currentNode.name = currentNode.meta.node.value
       }
-      this.zTree.editName(current_node)
+      this.zTree.editName(currentNode)
     },
     hideRMenu: function() {
       if (this.rMenu) this.rMenu.css({ 'visibility': 'hidden' })
@@ -103,8 +101,8 @@ export default {
 
     onSelected: function(event, treeNode) {
       if (treeNode.meta.type === 'node') {
-        this.current_node = treeNode
+        this.currentNode = treeNode
-        this.current_node_id = treeNode.meta.node.id
+        this.currentNodeId = treeNode.meta.node.id
         this.$emit('urlChange', `${this.setting.url}?node_id=${treeNode.meta.node.id}&show_current_asset=null`)
       } else if (treeNode.meta.type === 'asset') {
         this.$emit('urlChange', `${this.setting.url}?asset_id=${treeNode.meta.asset.id}&show_current_asset=null`)
@@ -123,7 +121,7 @@ export default {
       )
     },
     onRename: function(event, treeId, treeNode, isCancel) {
-      var url = `${this.treeSetting.nodeUrl}${this.current_node_id}/`
+      var url = `${this.treeSetting.nodeUrl}${this.currentNodeId}/`
       if (isCancel) {
         return
       }

src/components/DataZTree/index.vue

@@ -9,7 +9,6 @@
 
 <script>
 import ZTree from './components/ZTree'
-const merge = require('deepmerge')
 export default {
   name: 'DataZTree',
   components: {
@@ -58,8 +57,7 @@ export default {
   },
   computed: {
     treeSetting() {
-      const treeSetting = merge(this.defaultSetting, this.setting)
+      return _.merge(this.defaultSetting, this.setting)
-      return treeSetting
     },
     zTree() {
       return this.$refs.ztree.zTree

src/components/ListTable/TableAction.vue

@@ -1,15 +1,14 @@
 <template>
   <div class="table-header">
     <slot name="header">
-      <div v-if="hasLeftActions" class="table-header-left-side">
+      <div class="table-header-left-side">
-        <ActionsGroup :actions="actions" :more-actions="moreActions" class="header-action" />
+        <ActionsGroup v-if="hasLeftActions" :actions="actions" :more-actions="moreActions" class="header-action" />
       </div>
       <div class="table-action-right-side">
         <AutoDataSearch v-if="hasSearch" class="right-side-item action-search" :config="searchConfig" :url="tableUrl" @tagSearch="handleTagSearch" />
         <ActionsGroup :is-fa="true" :actions="rightSideActions" class="right-side-actions right-side-item" />
         <DialogAction :selected-rows="selectedRows" :url="tableUrl" />
       </div>
-
     </slot>
   </div>
 </template>

src/components/ListTable/index.vue

@@ -32,7 +32,6 @@ export default {
       type: Object,
       default: () => ({})
     }
-
   },
   data() {
     return {

src/components/TreeTable/index.vue

@@ -1,18 +1,18 @@
 <template>
   <el-collapse-transition>
     <div style="display: flex;justify-items: center; flex-wrap: nowrap;justify-content:space-between;">
-      <div v-show="showTree" :style="showTree?('width:250px;'):('width:0;')" class="transition-box">
+      <div v-show="iShowTree" :style="iShowTree?('width:250px;'):('width:0;')" class="transition-box">
-        <AutoDataZTree :setting="treeSetting" @urlChange="handleUrlChange" />
+        <AutoDataZTree :setting="treeSetting" class="auto-data-ztree" @urlChange="handleUrlChange" />
       </div>
-      <div :style="showTree?('display: flex;width: calc(100% - 250px);'):('display: flex;width:100%;')">
+      <div :style="iShowTree?('display: flex;width: calc(100% - 250px);'):('display: flex;width:100%;')">
         <div class="mini">
-          <div style="display:block" class="mini-button" @click="showTree=!showTree">
+          <div style="display:block" class="mini-button" @click="iShowTree=!showTree">
-            <i v-show="showTree" class="fa fa-angle-left fa-x" /><i v-show="!showTree" class="fa fa-angle-right fa-x" />
+            <i v-show="iShowTree" class="fa fa-angle-left fa-x" /><i v-show="!iShowTree" class="fa fa-angle-right fa-x" />
           </div>
         </div>
-        <div class="transition-box" style="width: calc(100% - 17px);">
+        <IBox class="transition-box" style="width: calc(100% - 17px);">
-          <ListTable :table-config="internalTableConfig" :header-actions="headerActions" />
+          <ListTable :table-config="iTableConfig" :header-actions="headerActions" />
-        </div>
+        </IBox>
       </div>
     </div>
   </el-collapse-transition>
@@ -21,30 +21,35 @@
 <script>
 import AutoDataZTree from '../AutoDataZTree'
 import ListTable from '../ListTable'
+import IBox from '../IBox'
 export default {
   name: 'TreeTable',
   components: {
     ListTable,
-    AutoDataZTree
+    AutoDataZTree,
+    IBox
   },
   props: {
-    ...ListTable.props
+    ...ListTable.props,
+    treeSetting: {
+      type: Object,
+      default: () => AutoDataZTree.props.setting.default()
+    },
+    showTree: {
+      type: Boolean,
+      default: true
+    }
   },
   data() {
     return {
-      showTree: true,
+      iTableConfig: this.tableConfig,
-      internalTableConfig: this.tableConfig
+      iShowTree: this.showTree
-    }
-  },
-  computed: {
-    treeSetting() {
-      return this.tableConfig.treeSetting
     }
   },
   methods: {
     handleUrlChange(_url) {
-      this.$set(this.internalTableConfig, 'url', _url)
+      this.$set(this.iTableConfig, 'url', _url)
-      console.log(this.internalTableConfig)
+      console.log(this.iTableConfig)
     }
   }
 }
@@ -68,4 +73,9 @@ export default {
     margin-right: 5px;
     width: 12px !important;
   }
+
+  .auto-data-ztree {
+    overflow: auto;
+    /*border-right: solid 1px red;*/
+  }
 </style>

src/views/users/groups/UserGroupDetail/GroupAssetPermission.vue

@@ -1,10 +1,10 @@
 <template>
-  <TreeTable :table-config="tableConfig" />
+  <TreeTable :table-config="tableConfig" :header-actions="headerActions" :tree-setting="treeSetting" />
 </template>
 
 <script>
-import { TreeTable } from '@/components'
 import { DetailFormatter } from '@/components/ListTable/formatters'
+import { TreeTable } from '@/components'
 
 export default {
   name: 'GroupAssetPermission',
@@ -18,19 +18,26 @@ export default {
     }
   },
   data() {
+    const vm = this
     return {
-      tableConfig: {
-        url: `/api/v1/perms/user-groups/${this.object.id}/nodes/children/tree/?cache_policy=1`,
-        hasTree: true,
       treeSetting: {
-          showMenu: true,
+        showMenu: false,
         showRefresh: true,
         showAssets: false,
-          url: '/api/v1/assets/assets/',
+        url: `/api/v1/perms/user-groups/${this.object.id}/assets/?cache_policy=1`,
-          nodeUrl: '/api/v1/assets/nodes/',
         // ?assets=0不显示资产. =1显示资产
-          treeUrl: '/api/v1/assets/nodes/children/tree/?assets=0'
+        treeUrl: `/api/v1/perms/user-groups/${this.object.id}/nodes/children/tree/?cache_policy=1`,
+        callback: {
+          onSelected(event, node) {
+            const url = `/api/v1/perms/user-groups/${vm.object.id}/nodes/${node.meta.node.id}/assets/?cache_policy=1&all=1`
+            vm.tableConfig.url = url
+            vm.$log.debug('Current node: ', url)
+          }
+        }
       },
+      tableConfig: {
+        url: `/api/v1/perms/user-groups/${this.object.id}/assets/?cache_policy=1`,
+        hasTree: true,
         columns: [
           {
             prop: 'hostname',
@@ -55,6 +62,9 @@ export default {
             width: '200px'
           }
         ]
+      },
+      headerActions: {
+        hasLeftActions: false
       }
     }
   }

src/views/users/users/UserList.vue

@@ -30,6 +30,7 @@ export default {
         }
       },
       headerActions: {
+        hasCreate: false,
         extraMoreActions: [
           {
             name: 'deactiveSelected',