ioc-admin-ui/src/views/systemManagement/indexConfiguration/index.vue

<template>
  <div class="container">
    <div class="header">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item
          v-for="(item, index) in indexList"
          :key="index"
          :index="item.id+''"
        >
          <el-button round>{{item.name}}</el-button>
        </el-menu-item>
      </el-menu>

    </div>
    <div class="left-pane">
      <el-input
        placeholder="请输入关键字"
        suffix-icon="el-icon-search"
        v-model="filterText"
      ></el-input>
      <div class="tree_container">

        <el-tree
          ref="tree"
          :data="indexSecondList"
          :props="defaultProps"
          node-key="id"
          default-expand-all
          :filter-node-method="filterNode"
          @node-click="handleNodeClick"
        >
          <span slot-scope="{node}">
            <span style="padding-left: 10px; vertical-align: text-bottom;">{{ node.label }}</span>
          </span>
        </el-tree>
      </div>

    </div>
    <div
      class="right-pane"
      v-if="tableData.length!=0"
    >
      <div>
        <p class="info">{{selectedIndexItem.name}}</p>
        <!-- <el-button class="new_button">新建</el-button> -->
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        style="width: 100%"
      >
        <!-- @selection-change="handleSelectionChange" -->
        <!-- <el-table-column
          type="selection"
          width="50"
        >
        </el-table-column> -->
        <el-table-column
          prop="name"
          label="指标名称"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="indexUnit"
          label="指标单位"
        >
        </el-table-column> -->
        <el-table-column
          prop="defaultValue"
          label="默认值"
        >
        </el-table-column>
        <el-table-column
          prop="compare"
          label="比较值"
        >
        </el-table-column>
        <el-table-column
          prop="rule"
          label="计算规则"
        >
        </el-table-column>
        <el-table-column
          prop="operation"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="edit(scope.row)"
            >编辑</el-button>
          </template>

        </el-table-column>
      </el-table>
    </div>
    <div class="bottom">
      <page
        class="page"
        :paginationData="paginationData"
      ></page>
    </div>
    <editDialog
      ref="editDialog"
      v-bind="{
        update:getSecondListAfterUpdate,
        beforeFrom:selectedSingleIndex
      }"
    ></editDialog>
  </div>

</template>

<script>
import page from "@/components/pagination/index";
// import dropdown from "@/components/Dropdown/index";

import editDialog from "./dialog/editDialog.vue";

import api from "@/api/systemConfig/api";
export default {
  components: {
    editDialog,
    page,
    // dropdown,
  },
  data() {
    return {
      total: 0,
      filterText: "",
      show: true,
      value: "test",

      activeIndex: "1",
      indexList: [],
      indexSecondList: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      selectedIndexItem: null,
      tableData: [],
      selectedSingleIndex: null,

      paginationData: {
        pageSize: 10,
        pagerCount: 5,
        currentPage: 1,
        pageSizes: [5, 10, 20, 30],
        total: 0,
        currentChange: (val) => {
          this.handlePageChange(val);
        },
        handleSizeChange: (val) => {
          this.handleSizeChange(val);
        },
      },
    };
  },
  mounted() {
    this.getIndexList();
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    handleSelect(key, keyPath) {
      this.activeIndex = key;
      this.indexSecondList =
        this.indexList[Number(this.activeIndex) - 1].children;
    },
    handleNodeClick(data, node) {
      this.selectedIndexItem = data;
      this.resetPageConfig();
      this.handlePageChange(1);
    }, 

    handlePageChange(val) {
      this.paginationData.currentPage = val;
      this.getSecondList({
        parent_id: this.selectedIndexItem.id,
        page_size: this.paginationData.pageSize,
        page: val,
      })
        .then((result) => {})
        .catch((err) => {});
    },
    handleSizeChange(val) {
      this.paginationData.pageSize = val;
      this.getSecondList({
        parent_id: this.selectedIndexItem.id,
        page_size: val,
        page: this.paginationData.currentPage,
      })
        .then((result) => {})
        .catch((err) => {});
    },

    resetPageConfig(obj) {
      let t = {
        pageSize: 10,
        pagerCount: 5,
        currentPage: 1,
        pageSizes: [5, 10, 20, 30],
        total: 30,
        currentChange: (val) => {
          this.handlePageChange(val);
        },
        handleSizeChange: (val) => {
          this.handleSizeChange(val);
        },
      };
      if (obj != null || obj != undefined) {
        for (const key in obj) {
          t[key] = obj[key];
        }
        this.paginationData = t;
      }
    },

    getIndexList() {
      let that = this;
      return new Promise((resolve, reject) => {
        api
          .getIndexList({ id: -1 })
          .then((result) => {
            that.indexList = result.data.data.data;
            that.indexSecondList =
              that.indexList[Number(that.activeIndex) - 1].children;
            resolve();
          })
          .catch((err) => {});
      });
    },

    getSecondList(param) {
      let that = this;
      return new Promise((resolve, reject) => {
        api
          .getIndexSecondList(param)
          .then((result) => {
            that.tableData = result.data.data.data.list;
            that.paginationData.total = result.data.data.data.total
            // "compare": null,
            // "defaultValue": "0",
            // "id": 4,
            // "isDel": 0,
            // "name": "\u4eca\u65e5\u79bb\u5f00\u5927\u697c(\u4eba)",
            // "parentId": 7,
            // "remark": null,
            // "rule": null,
            // "units": "",
            // "useSite": null
          })
          .catch((err) => {});
      });
    },

    getSecondListAfterUpdate() {
      this.resetPageConfig({
        currentPage: 1,
      });
      this.handlePageChange(1);
    },

    edit(data) {
      this.$refs.editDialog.dialogVisible = true;
      this.selectedSingleIndex = data;
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  position: relative;
  width: 100%;
  height: 100%;
  line-height: 20px;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;

  .header {
    .el-menu-item {
      font-size: 16px;
    }
    .el-menu.el-menu--horizontal {
      border-bottom: 0px solid #e6e6e6;
      .el-menu-item {
        border-bottom: 0px;
        padding-left: 10px;
        padding-right: 10px;
        .el-button {
          color: #606266;
          border-color: #ebebeb;
          border: 1px solid #ebebeb;
        }
      }
      > .el-menu-item.is-active {
        border-bottom: 0px;
        .el-button {
          color: #ffffff;
          border-color: #2ea8e6;
          background-color: #2ea8e6;
        }
      }
    }
  }

  .left-pane {
    width: 300px;
    padding: 15px;
    height: calc(100% - 90px);
    display: inline-block;

    .tree_container {
      height: calc(100% - 45px);
      margin-top: 10px;
      margin-bottom: 10px;
      overflow: hidden;
      overflow-y: auto;
      .el-tree {
        height: 100%;
        background-color: #fafafa;

        /deep/.el-tree-node__content {
          align-items: center;
          height: 30px;
          cursor: pointer;
          font-size: 16px;
          position: relative;
          color: #999999;
          padding-top: 10px;
          padding-left: 30px !important;

          .operate_btns {
            position: absolute;
            right: 20px;
            display: none;
          }

          &:hover,
          :focus-within {
            background-color: #f7fbff;

            .operate_btns {
              display: inline;
            }
          }
        }

        /deep/.el-tree-node__children {
          .el-tree-node__content {
            padding-left: 60px !important;
          }
        }
      }
    }
  }

  .right-pane {
    box-sizing: border-box;
    padding: 15px;
    width: calc(100% - 330px);
    height: calc(100% - 120px);
    display: inline-block;
    vertical-align: top;
    .info {
      text-align: left;
      padding: 10px;
      font-size: 25px;
    }

    .new_button {
      padding: 5px;
      width: 100px;
      position: relative;
      left: 42%;
      text-align: center;
      font-size: 16px;
      color: #fff;
      background: #3da0d6;
    }

    .el-table {
      margin-top: 10px;
    }

    .el-select {
      width: 80px;
      margin-right: 20px;
    }
  }

  .bottom {
    position: absolute;
    left: 345px;
    right: 16px;
    bottom: 30px;
    height: 50px;
    line-height: 20px;
    text-align: center;

    .checkbox {
      position: absolute;
      left: 30px;
      top: 15px;
      font-size: 14px;
    }

    .check-cancel {
      position: absolute;
      // line-height: 20px;
      font-size: 14px;
      text-align: center;
      left: 140px;
      top: 10px;
    }
  }
}
</style>