|
|
@@ -0,0 +1,159 @@
|
|
|
+<template>
|
|
|
+ <div class="tree-wrapper">
|
|
|
+ <el-tree
|
|
|
+ :data="treeList"
|
|
|
+ :props="defaultProps"
|
|
|
+ v-loading="treeLoading"
|
|
|
+ :node-key="nodeKey"
|
|
|
+ ref="tree"
|
|
|
+ :highlight-current="true"
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ @node-click="handleNodeClick"
|
|
|
+ v-bind="$attrs"
|
|
|
+ :default-expand-all="defaultExpandAll"
|
|
|
+ >
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { getTreeByGroup } from '@/api/classifyManage';
|
|
|
+ // let originId = '';
|
|
|
+ // let originType = '';
|
|
|
+ export default {
|
|
|
+ props: {
|
|
|
+ // treeList私有化处理
|
|
|
+ treeFormate: {
|
|
|
+ type: Function,
|
|
|
+ default: null
|
|
|
+ },
|
|
|
+ defaultProps: {
|
|
|
+ type: Object,
|
|
|
+ default: function () {
|
|
|
+ return {
|
|
|
+ children: 'children',
|
|
|
+ value: 'id',
|
|
|
+ label: 'name'
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ defaultExpandAll: {
|
|
|
+ type: Boolean,
|
|
|
+ default: function () {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 初始请求treeList
|
|
|
+ init: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ type: {
|
|
|
+ type: String,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ nodeKey: {
|
|
|
+ type: String,
|
|
|
+ default: 'id'
|
|
|
+ }
|
|
|
+ // appendRoot: {
|
|
|
+ // type: Boolean,
|
|
|
+ // default: false
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ treeList: [],
|
|
|
+ treeLoading: false,
|
|
|
+ parentName: '',
|
|
|
+ parentId: '',
|
|
|
+ currentKey: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ if (this.init) {
|
|
|
+ this.getTreeData();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getInstance() {
|
|
|
+ return this.$refs.tree;
|
|
|
+ },
|
|
|
+ // 获取树结构数据
|
|
|
+ async getTreeData() {
|
|
|
+ try {
|
|
|
+ this.treeLoading = true;
|
|
|
+
|
|
|
+ const res = await getTreeByGroup({type: this.type});
|
|
|
+ this.treeLoading = false;
|
|
|
+ if (res?.code === '0') {
|
|
|
+ this.treeList = res.data;
|
|
|
+ this.$emit('setRootId', res.data[0].id);
|
|
|
+ if (this.treeFormate) {
|
|
|
+ this.treeList = this.treeFormate(this.treeList);
|
|
|
+ }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // 默认高亮第一级树节点
|
|
|
+ if (this.treeList[0]) {
|
|
|
+ this.setCurrentKey(this.treeList[0].id);
|
|
|
+ this.handleNodeClick(
|
|
|
+ this.treeList[0],
|
|
|
+ this.$refs.tree.getCurrentNode()
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return this.treeList;
|
|
|
+ }
|
|
|
+ } catch (error) {}
|
|
|
+ this.treeLoading = false;
|
|
|
+ },
|
|
|
+ // 递归 - 往树children里面添加parentName
|
|
|
+ // _setParentName (tree) {
|
|
|
+ // let data = tree;
|
|
|
+ // for (let i = 0; i < data.length; i++) {
|
|
|
+ // if (data[i].parentId === '0') {
|
|
|
+ // this.parentName = data[i].name;
|
|
|
+ // originId = data[i].id;
|
|
|
+ // originType = data[i].type;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // data[i]['originId'] = originId;
|
|
|
+ // data[i]['originType'] = originType;
|
|
|
+ // data[i]['parentId'] = data[i]['parentId'];
|
|
|
+ // if (data[i].children && data[i].children.length > 0) {
|
|
|
+ // this._setParentName(data[i].children);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // return data;
|
|
|
+ // },
|
|
|
+
|
|
|
+ handleNodeClick(data, node) {
|
|
|
+ this.$emit('handleNodeClick', data, node);
|
|
|
+ },
|
|
|
+ // 设置默认高亮行
|
|
|
+ setCurrentKey(id) {
|
|
|
+ this.currentKey = id;
|
|
|
+ this.$refs.tree.setCurrentKey(this.currentKey);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取树的选中状态
|
|
|
+ getSelectList() {
|
|
|
+ const selectList = this.$refs.tree.getCurrentNode();
|
|
|
+ return selectList;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .tree-wrapper {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ :deep(.el-tree) {
|
|
|
+ display: inline-block;
|
|
|
+ min-width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
lijiang007