| | |
| | | <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="delClickHandler">删除 |
| | | </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="smallBtn" plain size="small" type="primary" |
| | | @click="checkViewClickHandler">查看使用范围 |
| | | </el-button> |
| | | </div> |
| | | <div ref="TreeBox" style="height: calc(100vh - 154px);!important;"> |
| | | <!-- 左侧树 --> |
| | | <div style="height: calc(100vh - 280px);"> |
| | | <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"> |
| | |
| | | |
| | | <el-main> |
| | | <basic-container> |
| | | |
| | | </basic-container> |
| | | </el-main> |
| | | |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import {getBizTypes} from "@/api/modeling/businessType/api"; |
| | | export default { |
| | | name: "index" |
| | | 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> |
| | | |