epmet-oper-gov/src/views/modules/plugins/power/servicestation.vue

<template>
  <div>
    <div class="div_search">
      <el-form :rules="dataRule" :inline="true">
          <el-form-item label="所属组织" prop="deptName">
              <el-cascader
                      style="width:350px"
                      placeholder="请选择所属组织"
                      :options="agencytree"
                      v-model="agencyId"
                      :props="{ expandTrigger: 'hover', label: 'orgName', value: 'orgId', children: 'subOrgList' }"
                      clearable/>
          </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="loadTree()">加载动力主轴</el-button>
            </el-form-item>
      </el-form>
    </div>
    <div class="div_main">
      <div :style="{height:rowHeight}"
          class="div_tree">
        <el-input placeholder="输入关键字进行过滤"
                  v-model="filterText">
        </el-input>
        <el-scrollbar :style="{height:treeHeight}"
                      class="scrollar">
          <el-tree ref="ref_tree"
                  v-loading="treeLoading"
                  class="filter_tree"
                  :data="treeData"
                  :props="defaultProps"
                  :highlight-current="true"
                  node-key="id"
                  :expand-on-click-node="false"
                  default-expand-all
                  :filter-node-method="filterNode"
                  @node-click="handleNodeClick">
          </el-tree>
        </el-scrollbar>
      </div>
      <div :style="{height:rowHeight}"
          class="div_table">
        <servicestation-table :axisStructId="axisStructId" ref="ref_communityTable"></servicestation-table>
      </div>
    </div>
  </div>
</template>

<script>
import CDialog from '@c/CDialog'
import servicestationTable from './servicestationTable'
import { requestPost } from "@/js/dai/request";
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      agencytree: [], // 所属组织
      agencyId: '',
      filterText: '',
      treeLoading: false,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      selTreeObj: {},
      centerPoint: [],
      axisStructId: '' // 动力主轴节点id
    }
  },
  async mounted () {
    // this.treeLoading = true
    // await this.loadTree()
    await this.getAgencyTree()
    // this.treeLoading = false
  },
  computed: {
    rowHeight () {
      return this.$store.state.inIframe ? this.clientHeight - 230 + this.iframeHeight + 'px' : this.clientHeight - 230 + 'px'
    },
    treeHeight () {
      return this.$store.state.inIframe ? this.clientHeight - 310 + this.iframeHeight + 'px' : this.clientHeight - 310 + 'px'
    },
    ...mapGetters(['clientHeight', 'iframeHeight']),

    dataRule () {
      return {
        deptName:[
            { required: true, message: "请选择", trigger: "blur" }
        ]
      }
    }
  },
  methods: {
    async loadTree () {
      this.axisStructId = ''
      if (this.agencyId.length === 0 || !this.agencyId) {
        return this.$message.error('请选择所属组织')
      }
      this.treeLoading = true
      const url = "/pli/power/data/axis/structTree"
      let params = {
        agencyId: this.agencyId[this.agencyId.length-1]
      }
      const { data, code, msg } = await requestPost(url, params)
      this.treeLoading = false
      if (code === 0) {
        this.treeData = data
      } else {
        this.$message.error(msg)
      }
    },
    handleNodeClick (obj) {
      this.axisStructId = obj.id
    },
    filterNode (value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 获取组织列表
    async getAgencyTree(){
        const url = '/data/aggregator/org/agencytree'

        let params = {
            agencyId:this.agencyId,
            client:'gov'
        }

        const { data, code, msg } = await requestPost(url,params)

        if (code === 0) {
            let _data
            if (data) {
                _data = this.removeByOrgType(data, 'agency')
                if (_data) {
                    this.agencytree = this.removeEmptySubOrgList(_data)
                }
            }
        } else {
            this.$message.error(msg)
        }
    },
    removeByOrgType (orgArray, orgType) {
        if (orgArray && orgArray.length > 0) {
            for (let p = orgArray.length - 1; p >= 0; p--) {
                let orgInfo = orgArray[p]
                if (orgInfo) {
                    if (orgInfo.orgType !== orgType) {
                        orgArray.splice(p, 1)
                    } else {
                        this.removeByOrgType(orgInfo.subOrgList, orgType)
                    }
                }
            }
        }
        return orgArray
    },
    removeEmptySubOrgList (orgArray) {
        orgArray.forEach((orgInfo) => {
            if (orgInfo && orgInfo.subOrgList) {
                if (orgInfo.subOrgList.length === 0) {
                    orgInfo.subOrgList = undefined
                } else {
                    this.removeEmptySubOrgList(orgInfo.subOrgList)
                }
            }
        })
        return orgArray;
    }
  },
  watch: {
    filterText (val) {
      this.$refs.ref_tree.filter(val);
    }
  },
  components: {
    servicestationTable, CDialog
  }
}
</script>
<style lang="scss" scoped >
.div_search {
  width: calc(100% - 5px);
  background: #ffffff;
  border-radius: 4px;
  padding: 30px 20px 5px;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
}
.div_main {
  margin-top: 10px;
  display: flex;
}
.scrollar {
  margin-top: 10px;
}

.div_tree {
  flex: 0 0 280px;
  background-color: #ffffff;
  border-radius: 5px;
  padding: 10px;
  overflow-y: hidden;
}
.filter_tree {
  overflow-x: auto;
}

.div_table {
  margin-left: 15px;
  // flex: 1;
  width: calc(100% - 300px);
  background-color: #ffffff;
  border-radius: 5px;
  padding: 10px;
}

.div_btn {
  margin-top: 20px;
}

.row {
  padding: 10px;
}
</style>

<style>
/* .aui-content > .el-tabs > .el-tabs__content {
  padding: 0px;
} */

.el-tree-node:focus > .el-tree-node__content {
  /* background-color: #ccc !important; */
  color: #2195fe;
}
</style>
<style lang="scss" scoped>
.div_tree {
  /deep/ .el-scrollbar__wrap {
    overflow-x: hidden !important;
  }
}
</style>