remuneration/src/components/Analysis/index.vue

<template>
  <div>
    <m-search :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
    <m-card class="mt-3" v-loading="loading">
      <AnalysisChart class="mb-3" v-for="item in items" :key="item.key" :option="item.value" :init="drillInit"></AnalysisChart>
      <m-empty v-if="items.length === 0"></m-empty>
    </m-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import AnalysisChart from './AnalysisChart.vue'
export default {
  name: 'AnalysisPage',
  props: {
    searchApi: {
      type: Function,
      default: () => ({})
    },
    drillInit: {
      type: Function,
      default: () => ({})
    }
  },
  components: {
    AnalysisChart
  },
  data () {
    return {
      chart: {},
      loading: false,
      searchValues: {
        parentOrganizationNo: null
      },
      items: []
    }
  },
  computed: {
    ...mapGetters(['organizationTree']),
    searchItems () {
      return [
        {
          label: '上级机构',
          type: 'cascader',
          prop: 'parentOrganizationNo',
          options: {
            filterable: true,
            clearable: true,
            placeholder: '请选择上级机构',
            options: this.organizationTree,
            showAllLevels: false,
            props: {
              emitPath: false,
              checkStrictly: true,
              value: 'organizationNo',
              label: 'organizationName',
              children: 'child'
            }
          }
        }
      ]
    }
  },
  mounted () {
    this.searchValues.parentOrganizationNo = this.organizationTree[0].organizationNo
    this.onInit()
  },
  methods: {
    async onInit () {
      this.loading = true
      try {
        const { data } = await this.searchApi({
          ...this.searchValues
        })
        this.items = Object.keys(data).map(key => {
          return {
            key,
            value: data[key]
          }
        })
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    onSearch () {
      if (this.searchValues.parentOrganizationNo === null) {
        this.searchValues.parentOrganizationNo = this.organizationTree[0].organizationNo
      }
      this.onInit()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>