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

<template>
  <div class="white pa-3 content" v-loading="loading">
    <m-card class="content-left mr-3">
      <el-tree
        ref="tree"
        :data="organizationTree"
        :props="defaultProps"
        node-key="organizationNo"
        :expand-on-click-node="false"
        highlight-current
        :default-expanded-keys="[expandExpandedKeys]"
        @node-click="handleNodeClick"
      >
        <template v-slot="{ data }">
          <div class="text">
            <div>{{ data.organizationName }}</div>
            <div class="eye link" @click.stop="onJump(data.organizationNo)">
              <span class="mdi mdi-eye"></span>
              <span class="min ml-1">
                详情
              </span>
            </div>
          </div>
        </template>
      </el-tree>
    </m-card>

    <m-table
      class="content-right"
      :headers="headers"
      :items="items"
      :page-size="pageInfo.size"
      :page-current="pageInfo.current"
      :total="total"
      @page-change="onPageChange"
    >
      <template #parentOrganizationName="{ row }">
        <span class="link" @click="onJump(row.parentOrganizationNo)">
          {{ row.parentOrganizationName || '--' }}
        </span>
      </template>
      <template #deptName="{ row }">
        <span class="link" @click="onJump(row.organizationNo)">
          {{ row.deptName || '--' }}
        </span>
      </template>
      <template #employeeName="{ row }">
        <span class="link" @click="onJump(row.organizationNo, row)">
          {{ row.employeeName || '--' }}
        </span>
      </template>
      <template #actions-header>
        <el-input
          v-model="searchQuery.employeeName"
          size="mini"
          placeholder="输入员工名字，按回车搜索"
          @keydown.enter.native="onSearch"
        ></el-input>
      </template>
    </m-table>
  </div>
</template>

<script>
import {
  getOrganizationDetails
} from '@/api/system'

import qs from 'qs'
import { mapGetters } from 'vuex'
export default {
  name: 'human-resources-panorama',
  data () {
    return {
      searchQuery: {
        organizationNo: null,
        employeeName: null
      },
      loading: false,
      defaultProps: {
        children: 'child',
        label: 'organizationName'
      },
      expandExpandedKeys: null,
      pageInfo: {
        current: 1,
        size: 10
      },
      total: 0,
      orders: [],
      headers: [
        { label: '上级机构', prop: 'parentOrganizationName' },
        { label: '部门', prop: 'deptName' },
        { label: '员工姓名', prop: 'employeeName', align: 'center' },
        { label: '岗位', prop: 'postName' },
        { label: '', prop: 'actions' }
      ],
      items: []
    }
  },
  computed: {
    ...mapGetters(['organizationTree'])
  },
  created () {
    this.getDept()
  },
  methods: {
    async getDept () {
      if (!this.organizationTree.length) {
        return
      }
      this.expandExpandedKeys = this.organizationTree[0].organizationNo
      this.handleNodeClick({ organizationNo: this.organizationTree[0].organizationNo })
      this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(this.organizationTree[0].organizationNo)
      })
    },
    async onInit () {
      this.loading = true
      try {
        const { data } = await getOrganizationDetails({
          ...this.searchQuery,
          employeePage: {
            ...this.pageInfo,
            orders: this.orders
          }
        })
        this.items = data.employees.records
        this.total = data.employees.total
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    async handleNodeClick ({ organizationNo }) {
      this.searchQuery.organizationNo = organizationNo
      this.onInit()
    },
    onJump (organizationNo, employee) {
      const _ROOT = '/human-resources/panorama/details'
      const query = {
        organizationNo: organizationNo
      }
      if (employee) {
        query.employeeNo = employee.personnelCode
        query.employeeName = employee.employeeName
      }
      window.open(`${_ROOT}?${qs.stringify(query)}`)
    },
    onPageChange (index) {
      this.pageInfo.current = index
      this.onInit()
    },
    onSearch () {
      this.pageInfo.current = 1
      this.onInit()
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  &-left {
    width: 400px;
    overflow: auto;
    font-size: 14px;
    .text {
      display: flex;
      justify-content: space-between;
      flex: 1;
      .eye {
        position: absolute;
        right: 0;
        padding: 0 10px;
        font-size: 18px;
        display: flex;
        align-items: center;
      }
    }
  }
  &-right {
    flex: 1;
    width: 0;
    overflow: auto;
  }
}
.link {
  color: #409eff;
  text-decoration: underline;
  cursor: pointer;
  &:hover {
    color: #409eff;
  }
}
.min {
  font-size: 12px;
}
</style>