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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<template>
  <el-container>
    <el-aside>
      <basic-container>
        <div ref="TreeBox" style="height: calc(100vh - 144px);!important;">
          <div class="headerCon">
            <el-button icon="el-icon-plus" plain size="small" type="primary" @click="addClickHandler">创建
            </el-button>
            <el-button icon="el-icon-edit" plain size="small" type="primary" @click="editClickHandler">修改
            </el-button>
            <el-button icon="el-icon-delete" plain size="small" type="danger" @click="deleteClickHandler">删除
            </el-button>
            <el-button icon="el-icon-download" plain size="small" type="primary" @click="exportClickHandler">导出
            </el-button>
            <el-button icon="el-icon-upload2" plain size="small" type="primary" @click="upLoadClickHandler">导入
            </el-button>
            <el-button class="miniBtn" icon="el-icon-circle-plus-outline" plain size="small"
                       type="primary" @click="createViewClickHandler">创建视图
            </el-button>
            <el-button class="miniBtn" icon="el-icon-circle-plus-outline" plain size="small"
                       type="primary" @click="checkClickHandler">创建索引
            </el-button>
            <el-button icon="el-icon-menu" plain size="small" style="width: 82px;text-align: center;padding-left: 1px"
                       type="primary" @click="checkClickHandler">一致性检查
            </el-button>
            <el-button class="miniBtn" icon="el-icon-delete" plain size="small"
                       type="danger" @click="checkClickHandler">删除数据
            </el-button>
            <el-button class="smallBtn" plain size="small"
                       type="danger" @click="checkClickHandler">删除全部类型
            </el-button>
            <el-button class="smallBtn" plain size="small" type="primary">查看使用范围
            </el-button>
          </div>
          <!-- 左侧树 -->
          <div style="height:  calc(100vh - 330px);">
            <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-container>
</template>
 
<script>
import {getBizTypes} from "@/api/modeling/businessType/api"
 
export default {
  name: "index",
  data() {
    return {
      treeOption: {
        height: 'auto',
        defaultExpandAll: false,
        menu: false,
        addBtn: false,
        props: {
          label: 'name',
          value: 'name',
          children: 'children'
        }
      },
      treeData: []
    }
  },
  created() {
    this.getTreeList();
  },
  methods: {
    getTreeList() {
      getBizTypes().then(res => {
        const data = res.data.data.map(item => {
          return item.attributes;
        });
        this.treeData = data;
      })
    }
  }
}
</script>
 
<style lang="scss" scoped>
::v-deep {
  .el-scrollbar__wrap {
    overflow: auto !important;
  }
 
  .el-form-item .el-select {
    width: 100%;
  }
 
  .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;
}
 
.headerCon > .el-button:nth-child(10) {
  margin-left: 0;
}
 
.miniBtn {
  width: 82px;
  text-align: center;
  padding-left: 7px;
}
 
.smallBtn {
  width: 82px;
  text-align: center;
  padding-left: 4.5px;
}
</style>