1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<template>
  <el-container>
    <el-aside>
      <basic-container>
        <div ref="TreeBox" style="height: calc(100vh - 154px);!important;">
          <!-- 左侧树         -->
          <div style="height:  calc(100vh - 190px);">
            <avue-tree :data="treeData" :option="treeOption" @node-click="nodeClick">
          <span slot-scope="{ node, data }" class="el-tree-node__label">
           <span style="font-size: 15px">
              <i class="el-icon-s-promotion"></i>
                {{ (node || {}).label }}
            </span>
          </span>
            </avue-tree>
          </div>
        </div>
      </basic-container>
    </el-aside>
 
    <el-main>
      <basic-container>
 
      </basic-container>
    </el-main>
 
  </el-container>
</template>
 
<script>
import {getBizTypes} from "@/api/modeling/businessType/api";
export default {
  name: "index",
  data() {
    return {
      treeOption: {
        height: 'auto',
        defaultExpandedKeys: ['topNode'],
        menu: false,
        addBtn: false,
        props: {
          label: 'label',
          value: 'oid',
          children: 'children'
        }
      },
      nodeRow: {},
      treeData: [{
        label: '业务类型树',
        oid: 'topNode',
        children: []
      }],
    }
  },
  created() {
    this.getTreeList();
  },
  methods: {
    //树表查询
    getTreeList() {
      const loading = this.$loading({});
      getBizTypes().then(res => {
        const data = res.data.data.map(item => {
          item.attributes.label = item.attributes.id;
          return item.attributes;
        });
        this.treeData[0].children = data;
        loading.close();
      }).catch(error => {
        loading.close();
      })
    },
    // 树点击
    nodeClick(row) {
      this.nodeRow = row;
    },
  }
}
</script>
 
<style lang="scss" scoped>
::v-deep {
  .el-scrollbar__wrap {
    overflow: auto !important;
  }
  .headerCon{
    .el-button{
      width: 82px;
    }
  }
}
 
.headerCon {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5px;
 
  .el-button + .el-button {
    margin-left: 5px;
  }
 
  .el-button {
    margin-top: 5px;
  }
}
 
.headerCon > .el-button:nth-child(4) {
  margin-left: 0;
}
 
.headerCon > .el-button:nth-child(7) {
  margin-left: 0;
}
 
 
.smallBtn {
  width: 82px;
  text-align: center;
  padding-left: 4.5px;
}
 
</style>