@tongfun/tf-widget 0.1.18 → 0.1.22

package/package/t-data-list/src/t-table/table-group.vue

@@ -1,179 +1,180 @@
-<template>
-  <div class="table-group">
-    <!-- 节点搜索 -->
-    <el-input v-model="search" placeholder="请输入节点名称" />
-
-    <!-- 节点展示 -->
-    <el-scrollbar class="scrollbar">
-      <el-tree
-        ref="treeRef"
-        :data="dataTree"
-        node-key="id"
-        icon-class="nothing but won`t show any icon"
-        :default-expanded-keys="expandKeys"
-        :filter-node-method="treeFilter"
-        @node-expand="handleNodeExpand"
-        @node-collapse="handleCollapse"
-      >
-        <template slot-scope="{node,data}">
-          <TableGroupItem
-            :current-data="currentData"
-            :data="data"
-            :node="node"
-            @addChild="handleAddChild"
-            @edit="handleEdit"
-            @remove="handleRemove"
-            @itemClick="handleItemClick"
-          />
-        </template>
-      </el-tree>
-    </el-scrollbar>
-
-    <!-- 节点编辑 -->
-    <TableGroupItemEdit
-      :visible.sync="editVisible"
-      :edit-data="editData"
-      :node-options="dataTree"
-      :type="type"
-      @success="getGroupTree"
-    />
-  </div>
-</template>
-<script>
-import { getGroupTree, removeGroupNode } from '@/api/tableV3.js'
-import TableGroupItem from './table-group-item.vue'
-import TableGroupItemEdit from './table-group-item-edit.vue'
-export default {
-  components: {
-    TableGroupItem,
-    TableGroupItemEdit
-  },
-  data () {
-    return {
-      // 本地分组过滤输入内容
-      search: '',
-      // 分组树
-      dataTree: [],
-      // 当前选中的数据
-      currentData: null,
-      // 默认展开的key
-      expandKeys: ['0'],
-      /**
-       * 分组编辑弹窗相关属性
-       */
-      editVisible: false,
-      // 点击新增或者修改的时候，对应节点的数据对象
-      editData: {
-        groupCode: ''
-      },
-      // 新增一个节点还是修改一个节点的标识
-      type: ''
-    }
-  },
-  watch: {
-    search (value) {
-      this.$refs.treeRef.filter(value)
-    }
-  },
-  inject: ['target'],
-  created () {
-    this.getGroupTree()
-  },
-  methods: {
-    /**
-     * 节点展开，记录正在展开的节点
-     */
-    handleNodeExpand (data) {
-      this.expandKeys.push(data.id)
-    },
-    handleCollapse (data) {
-      this.expandKeys.splice(this.expandKeys.indexOf(data.id), 1)
-    },
-    // 节点内容本地过滤函数
-    treeFilter (value, data) {
-      if (!value) {
-        return true
-      }
-      return data.name.indexOf(value) !== -1
-    },
-    /**
-     * 获取分组
-     */
-    async getGroupTree () {
-      const res = await getGroupTree(this.target)
-      if (res.code !== 0) {
-        if (res.code === 10045) {
-          this.dataTree = []
-          return
-        }
-        return this.$message.error(res.msg)
-      }
-      this.dataTree = []
-      this.dataTree.push(res.data)
-    },
-    /**
-     * 切换分组
-     */
-    handleItemClick (data) {
-      const group = {
-        field: data.field,
-        value: data.id
-      }
-      this.$emit('groupChange', group)
-    },
-    /**
-     * 显示添加分组节点窗口
-     */
-    handleAddChild (data) {
-      this.type = 'insert'
-      this.editData = data
-      this.editVisible = true
-    },
-    /**
-     * 显示修改分组节点窗口
-     */
-    handleEdit (data) {
-      this.type = 'update'
-      this.editData = data
-      this.editVisible = true
-    },
-    /**
-     * 删除分组
-     */
-    async handleRemove (data) {
-      const res = await removeGroupNode(this.target, data.id)
-      if (res.code !== 0) {
-        return this.$message.error(res.msg)
-      }
-      this.$message.success('删除成功')
-      this.getGroupTree()
-    }
-  }
-}
-</script>
-
-<style scoped lang='less'>
-  .table-group {
-    height:100%;
-    .scrollbar{
-      height:calc(100% - 40px);
-    }
-    ::v-deep .el-scrollbar__wrap {
-      overflow-x:hidden;
-    }
-    background-color: #fff;
-    // margin-right:10px;
-    // border-radius:5px;
-    box-sizing: border-box;
-    border: 1px solid #e8eaec;
-    border-right: 0px;
-    &:first-child{
-      padding: 5px;
-    }
-  }
-  /deep/ .el-tree{
-    display: inline-block;
-    min-width: 100%;
-  }
-
-</style>
+<template>
+  <div class="table-group">
+    <!-- 节点搜索 -->
+    <el-input v-model="search" placeholder="请输入节点名称" />
+
+    <!-- 节点展示 -->
+    <el-scrollbar :class="[queryType === 'LIST' ? 'scrollbar' :'in-selector']">
+      <el-tree
+        ref="treeRef"
+        :data="dataTree"
+        node-key="id"
+        icon-class="nothing but won`t show any icon"
+        :default-expanded-keys="expandKeys"
+        :filter-node-method="treeFilter"
+        @node-expand="handleNodeExpand"
+        @node-collapse="handleCollapse"
+      >
+        <template slot-scope="{node,data}">
+          <TableGroupItem
+            :current-data="currentData"
+            :data="data"
+            :node="node"
+            @addChild="handleAddChild"
+            @edit="handleEdit"
+            @remove="handleRemove"
+            @itemClick="handleItemClick"
+          />
+        </template>
+      </el-tree>
+    </el-scrollbar>
+
+    <!-- 节点编辑 -->
+    <TableGroupItemEdit
+      :visible.sync="editVisible"
+      :edit-data="editData"
+      :node-options="dataTree"
+      :type="type"
+      @success="getGroupTree"
+    />
+  </div>
+</template>
+<script>
+import { getGroupTree, removeGroupNode } from '@/api/tableV3.js'
+import TableGroupItem from './table-group-item.vue'
+import TableGroupItemEdit from './table-group-item-edit.vue'
+export default {
+  components: {
+    TableGroupItem,
+    TableGroupItemEdit
+  },
+  data () {
+    return {
+      // 本地分组过滤输入内容
+      search: '',
+      // 分组树
+      dataTree: [],
+      // 当前选中的数据
+      currentData: null,
+      // 默认展开的key
+      expandKeys: ['0'],
+      /**
+       * 分组编辑弹窗相关属性
+       */
+      editVisible: false,
+      // 点击新增或者修改的时候，对应节点的数据对象
+      editData: {
+        groupCode: ''
+      },
+      // 新增一个节点还是修改一个节点的标识
+      type: ''
+    }
+  },
+  watch: {
+    search (value) {
+      this.$refs.treeRef.filter(value)
+    }
+  },
+  inject: ['target', 'queryType'],
+  created () {
+    this.getGroupTree()
+  },
+  methods: {
+    /**
+     * 节点展开，记录正在展开的节点
+     */
+    handleNodeExpand (data) {
+      this.expandKeys.push(data.id)
+    },
+    handleCollapse (data) {
+      this.expandKeys.splice(this.expandKeys.indexOf(data.id), 1)
+    },
+    // 节点内容本地过滤函数
+    treeFilter (value, data) {
+      if (!value) {
+        return true
+      }
+      return data.name.indexOf(value) !== -1
+    },
+    /**
+     * 获取分组
+     */
+    async getGroupTree () {
+      const res = await getGroupTree(this.target)
+      if (res.code !== 0) {
+        if (res.code === 10045) {
+          this.dataTree = []
+          return
+        }
+        return this.$message.error(res.msg)
+      }
+      this.dataTree = []
+      this.dataTree.push(res.data)
+    },
+    /**
+     * 切换分组
+     */
+    handleItemClick (data) {
+      const group = {
+        field: data.field,
+        value: data.id
+      }
+      this.$emit('groupChange', group)
+    },
+    /**
+     * 显示添加分组节点窗口
+     */
+    handleAddChild (data) {
+      this.type = 'insert'
+      this.editData = data
+      this.editVisible = true
+    },
+    /**
+     * 显示修改分组节点窗口
+     */
+    handleEdit (data) {
+      this.type = 'update'
+      this.editData = data
+      this.editVisible = true
+    },
+    /**
+     * 删除分组
+     */
+    async handleRemove (data) {
+      const res = await removeGroupNode(this.target, data.id)
+      if (res.code !== 0) {
+        return this.$message.error(res.msg)
+      }
+      this.$message.success('删除成功')
+      this.getGroupTree()
+    }
+  }
+}
+</script>
+
+<style scoped lang='less'>
+  .table-group {
+    height:70vh;
+    .scrollbar{
+      height:70vh;
+    }
+    .in-selector {
+      height:53vh;
+    }
+    ::v-deep .el-scrollbar__wrap {
+      overflow-x:hidden;
+    }
+    background-color: #fff;
+    box-sizing: border-box;
+    border: 1px solid #e8eaec;
+    border-right: 0px;
+    &:first-child{
+      padding: 5px;
+    }
+  }
+  /deep/ .el-tree{
+    display: inline-block;
+    min-width: 100%;
+  }
+
+</style>