remuneration/src/views/salary/solution/index.vue

<template>
  <div class="white pa-3">
    <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" @history="onHistory"></component>
      </el-tab-pane>
    </el-tabs>
    <DrawerHistory ref="drawerHistoryRefs" :get-page="getPage">
      <template #panel="{ item }">
        <el-form label-position="right" class="m-form" label-width="100px">
          <el-form-item label="方案名称">
            <el-tag>{{ itemData.title }}</el-tag>
          </el-form-item>
          <el-form-item label="方案描述">
            <div>{{ itemData.tag }}</div>
          </el-form-item>
          <el-form-item label="规则配置">
            <m-card class="mb-3" v-if="item.length">
              <el-form label-position="right" class="m-form" label-width="200px">
                <el-form-item v-for="_item in item" :key="_item.performanceSolutionId + _item.calculateConfigurationId" :label="_item.name">
                  <el-tag>{{ _item.value }}</el-tag>
                </el-form-item>
              </el-form>
            </m-card>
          </el-form-item>
        </el-form>
      </template>
    </DrawerHistory>
  </div>
</template>

<script>
import DrawerHistory from '@/components/DrawerHistory'
import {
  getSolutionDetails
} from '@/api/salary'
export default {
  name: 'salary-solution',
  components: {
    DrawerHistory
  },
  data () {
    return {
      activeName: '',
      items: [],
      itemData: {}
    }
  },
  created () {
    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
    }
  },
  methods: {
    handleClick () {
      this.$router.push(`${this.$route.path}?name=${this.activeName}`)
      this.$nextTick(() => {
        this.$refs[this.activeName][0].onInit()
      })
    },
    onComponentMounted () {
      this.$nextTick(() => {
        this.$refs[this.activeName] && this.$refs[this.activeName][0].onInit()
      })
    },
    onHistory (row) {
      this.itemData = row
      this.$refs.drawerHistoryRefs.open(`${row.title} 历史记录`)
    },
    async getPage () {
      return new Promise((resolve, reject) => {
        getSolutionDetails({ performanceSolutionId: this.itemData.performanceSolutionId }).then(({ data }) => {
          resolve({
            data: data.calculateConfigurations,
            total: data.calculateConfigurations.length
          })
        }).catch(reject)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__content  {
  overflow: visible !important;
}
</style>