[Update] 修改ztree

2025-09-25 14:25:23 +00:00 · 2020-04-30 15:18:15 +08:00
parent a443e16ea7
commit 32a3c370ba
7 changed files with 66 additions and 51 deletions
--- a/src/components/AutoDataZTree/index.vue
+++ b/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: '',
-      current_node_id: ''
+      currentNode: '',
+      currentNodeId: ''
    }
  },
  computed: {
    treeSetting() {
-      const treeSetting = merge(this.defaultSetting, this.setting)
-      return treeSetting
+      return _.merge(this.defaultSetting, this.setting)
    },
    zTree() {
      return this.$refs.dataztree.zTree
@@ -86,14 +84,14 @@ export default {
    },
    editTreeNode: function() {
      this.hideRMenu()
-      var current_node = this.zTree.getSelectedNodes()[0]
-      if (!current_node) {
+      var currentNode = this.zTree.getSelectedNodes()[0]
+      if (!currentNode) {
        return
      }
-      if (current_node) {
-        current_node.name = current_node.meta.node.value
+      if (currentNode) {
+        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.current_node_id = treeNode.meta.node.id
+        this.currentNode = treeNode
+        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
      }
--- a/src/components/DataZTree/index.vue
+++ b/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 treeSetting
+      return _.merge(this.defaultSetting, this.setting)
    },
    zTree() {
      return this.$refs.ztree.zTree
--- a/src/components/ListTable/TableAction.vue
+++ b/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">
-        <ActionsGroup :actions="actions" :more-actions="moreActions" class="header-action" />
+      <div class="table-header-left-side">
+        <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>
--- a/src/components/ListTable/index.vue
+++ b/src/components/ListTable/index.vue
@@ -32,7 +32,6 @@ export default {
      type: Object,
      default: () => ({})
    }
-
  },
  data() {
    return {
--- a/src/components/TreeTable/index.vue
+++ b/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">
-        <AutoDataZTree :setting="treeSetting" @urlChange="handleUrlChange" />
+      <div v-show="iShowTree" :style="iShowTree?('width:250px;'):('width:0;')" class="transition-box">
+        <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">
-            <i v-show="showTree" class="fa fa-angle-left fa-x" /><i v-show="!showTree" class="fa fa-angle-right fa-x" />
+          <div style="display:block" class="mini-button" @click="iShowTree=!showTree">
+            <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);">
-          <ListTable :table-config="internalTableConfig" :header-actions="headerActions" />
-        </div>
+        <IBox class="transition-box" style="width: calc(100% - 17px);">
+          <ListTable :table-config="iTableConfig" :header-actions="headerActions" />
+        </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,
-      internalTableConfig: this.tableConfig
-    }
-  },
-  computed: {
-    treeSetting() {
-      return this.tableConfig.treeSetting
+      iTableConfig: this.tableConfig,
+      iShowTree: this.showTree
    }
  },
  methods: {
    handleUrlChange(_url) {
-      this.$set(this.internalTableConfig, 'url', _url)
-      console.log(this.internalTableConfig)
+      this.$set(this.iTableConfig, 'url', _url)
+      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>
--- a/src/views/users/groups/UserGroupDetail/GroupAssetPermission.vue
+++ b/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 {
+      treeSetting: {
+        showMenu: false,
+        showRefresh: true,
+        showAssets: false,
+        url: `/api/v1/perms/user-groups/${this.object.id}/assets/?cache_policy=1`,
+        // ?assets=0不显示资产. =1显示资产
+        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}/nodes/children/tree/?cache_policy=1`,
+        url: `/api/v1/perms/user-groups/${this.object.id}/assets/?cache_policy=1`,
        hasTree: true,
-        treeSetting: {
-          showMenu: true,
-          showRefresh: true,
-          showAssets: false,
-          url: '/api/v1/assets/assets/',
-          nodeUrl: '/api/v1/assets/nodes/',
-          // ?assets=0不显示资产. =1显示资产
-          treeUrl: '/api/v1/assets/nodes/children/tree/?assets=0'
-        },
        columns: [
          {
            prop: 'hostname',
@@ -55,6 +62,9 @@ export default {
            width: '200px'
          }
        ]
+      },
+      headerActions: {
+        hasLeftActions: false
      }
    }
  }
--- a/src/views/users/users/UserList.vue
+++ b/src/views/users/users/UserList.vue
@@ -30,6 +30,7 @@ export default {
        }
      },
      headerActions: {
+        hasCreate: false,
        extraMoreActions: [
          {
            name: 'deactiveSelected',