remuneration/src/views/bonus/process/index.vue

<template>
  <div class="pa-3 white">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        v-for="item in items"
        :key="item.name"
        :label="item.label"
        :name="item.name"
      >
        <component :is="item.component" :ref="item.name" :label="item.label" @hook:mounted="onComponentMounted"></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'ProcessIndex',
  data () {
    return {
      activeName: '',
      items: []
    }
  },
  created () {
    console.log(this.$route.meta.roles)
    this.items = this.$route.meta.roles.filter(e => e.hidden === 1).sort((a, b) => a.sort - b.sort).map(e => {
      return {
        name: e.name,
        label: e.label,
        component: () => import(`./${e.component}/index.vue`)
      }
    })
    if (this.$route.query.name) {
      this.activeName = this.$route.query.name
    } else {
      this.activeName = this.items[0].name
    }
  },
  computed: {
    name () {
      return this.items.find(e => e.name === this.activeName)?.label ?? ''
    }
  },
  methods: {
    onComponentMounted () {
      this.$nextTick(() => {
        if (!this.$refs[this.activeName]) {
          return
        }
        this.$refs[this.activeName][0].onInit && this.$refs[this.activeName][0].onInit(this.name)
      })
    },
    handleClick () {
      this.$router.push(`${this.$route.path}?name=${this.activeName}`)
      this.$nextTick(() => {
        this.$refs[this.activeName][0].onInit && this.$refs[this.activeName][0].onInit(this.name)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  /* 自定义样式 */
  ::v-deep .el-tabs__content {
    overflow: visible !important;
  }
</style>