epmet-oper-pc-chengyang/epmet-oper-web/src/views/modules/base/community/community.vue

<template>
  <div>

    <el-row class="row"
            :gutter="10">
      <el-col :span="5">
        <el-card>

          <div :style="{height:rowHeight}"
               class="div_tree">
            <el-input placeholder="输入关键字进行过滤"
                      v-model="filterText">
            </el-input>

            <el-tree ref="ref_tree"
                     class="filter-tree"
                     :data="treeData"
                     :props="defaultProps"
                     node-key="id"
                     :expand-on-click-node="false"
                     default-expand-all
                     :filter-node-method="filterNode"
                     @node-click="handleNodeClick">
            </el-tree>

          </div>

        </el-card>
      </el-col>

      <el-col :span="19">
        <el-card>
          <div :style="{height:rowHeight}">

            <build-table v-if="selTreeLevel==='neighbourHood'"
                         ref="ref_neighTable"></build-table>
            <room-table v-else-if="selTreeLevel==='building'"
                        ref="ref_buildingTable"></room-table>
            <community-table v-else
                             ref="ref_communityTable"></community-table>

          </div>
        </el-card>
      </el-col>

    </el-row>

  </div>
</template>

<script>
import CDialog from '@c/CDialog'
import communityTable from './communityTable'
import buildTable from './buildTable'
import roomTable from './roomTable'
import { requestPost } from "@/js/dai/request";
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务

let loading // 加载动画
export default {
  data () {
    return {
      filterText: '',
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },

      selTreeId: '',
      selTreeLevel: '',

      centerPoint: []

    }
  },
  components: {
    CDialog
  },
  async mounted () {
    await this.loadOrgData()
    await this.$refs['ref_communityTable'].initData(this.centerPoint)

    await this.loadTree()
    await this.$refs['ref_communityTable'].loadTable(this.selTreeId, this.selTreeLevel)
  },
  computed: {
    rowHeight () {
      return (this.clientHeight - 200) + 'px'
    },
    ...mapGetters(['clientHeight'])
  },
  methods: {
    async loadTree () {
      const url = "/gov/org/building/treelist"
      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/building/treelist"
      let params = {}

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

      if (code === 0) {

        this.treeData = data
        if (data.length > 0) {
          this.selTreeId = data[0].id
          this.selTreeLevel = data[0].level
        }

      } else {
        this.$message.error(msg)
      }
    },

    //加载组织数据
    async loadOrgData () {
      const url = "/gov/org/agency/maporg"
      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/agency/maporg"
      let params = {}

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

      if (code === 0) {
        this.centerPoint = []

        this.centerPoint.push(data.latitude)
        this.centerPoint.push(data.longitude)

      } else {
        this.$message.error(msg)
      }

    },

    handleNodeClick (obj) {
      if (obj.level === 'building') {
        this.$refs['ref_buildingTable'].loadTable(obj.id, obj.level)
      } else if (obj.level === 'neighbourHood') {
        this.$refs['ref_neighTable'].loadTable(obj.id, obj.level)
      } else {
        this.$refs['ref_communityTable'].loadTable(obj.id, obj.level)
      }

    },

    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },

    filterNode (value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val);
    }
  },
  components: {
    communityTable, buildTable, roomTable
  }
}
</script>
<style lang="scss" scoped >
.div_tree {
  overflow-y: auto;
}

.div_btn {
  margin-top: 20px;
}

.el-row {
  /* margin-bottom: 20px; */
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-right: 50px;
}
</style>