Source/plt-web/plt-web-ui/src/views/modelingMenu/modeling/statusPool/index.vue

@@ -1,13 +1,116 @@
<template>
  <p>状态池</p>
  <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">创建
            </el-button>
            <el-button icon="el-icon-edit" plain size="small" type="primary">修改
            </el-button>
            <el-button icon="el-icon-delete" plain size="small" type="danger">删除
            </el-button>
            <el-button icon="el-icon-download" plain size="small" type="primary">导出
            </el-button>
            <el-button icon="el-icon-upload2" plain size="small" type="primary">导入
            </el-button>
            <el-button icon="el-icon-view" plain size="small" type="primary">查看
            </el-button>
          </div>
          <!-- 左侧树         -->
          <div style="height:  calc(100vh - 280px);">
            <avue-tree :data="treeData" :option="treeOption" @node-click="nodeClick">
          <span slot-scope="{ node, data }" class="el-tree-node__label">
           <span>
              <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 {gridStatus} from "@/api/modeling/statusPool/api";

export default {
  name: "index"
  name: "index",
  data() {
    return {
      treeOption: {
        height: 'auto',
        defaultExpandAll: false,
        menu: false,
        addBtn: false,
        props: {
          label: 'id',
          value: 'id',
          children: 'children'
        }
      },
      treeData: [],
      nodeRow:{}
    }
  },
  created() {
    this.getTreeList();
  },
  methods: {
    getTreeList() {
      gridStatus().then(res => {
        const data = res.data.data;
        this.treeData = data;
        this.tableLoading = false;
      }).catch(err => {
        this.$message.error(err)
      });
    },
    nodeClick(row) {
      this.nodeRow = row;
    }
  }
}
</script>

<style scoped>
<style lang="scss" scoped>
::v-deep {
  .el-scrollbar__wrap {
    overflow: auto !important;
  }
}

.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;
}
</style>