remuneration/src/views/humanResources/organizationStructure/index.vue

<template>
  <m-table
    v-loading="loading"
    row-key="uuid"
    :items="items"
    :headers="headers"
    :page-size="total"
    :page-current="1"
    :total="total"
    :expand-row-keys="expandRowKeys"
    lazy
    :load="load"
    :tree-props="{children: 'child'}"
    :default-sort="{ prop: 'sort', order: 'ascending' }"
  ></m-table>
</template>

<script>
import {
  getOrganizationTree,
  drillEmployee
} from '@/api/system'
export default {
  name: 'organization-structure',
  data () {
    return {
      expandRowKeys: [],
      loading: false,
      items: [],
      total: 0,
      headers: [
        { label: '机构名称', prop: 'organizationName' }
      ]
    }
  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      try {
        const { data } = await getOrganizationTree()
        this.expandRowKeys = [data.uuid]
        this.items = [
          data
        ]
        this.total = this.items.length
      } catch (error) {
        this.$message.error(error)
      }
    },
    async load (tree, treeNode, resolve) {
      try {
        const { data } = await drillEmployee({ deptName: tree.organizationName })
        resolve(data)
      } catch (error) {
        this.$message.error(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>