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

<template>
  <div class="pa-3 white">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="核算规则" name="Solution">
        <Solution
          label="核算规则"
          ref="Solution"
          @history="onHistory"
        >
          <template #tool>
            <m-button type="orange" size="small" icon="el-icon-plus" @click="onOpen('salarySolutionEditRefs')" >新增</m-button>
          </template>
          <template #actions="{ row }">
            <m-button text type="primary" size="small" @click="onOpen('salarySolutionEditRefs', row)">编辑</m-button>
            <m-button text type="primary" size="small" @click="onOpen('salarySolutionRulesRefs', row)">规则配置</m-button>
            <m-button text type="success" size="small" @click="onCalculate(row)">计算</m-button>
            <m-button text type="success" size="small" @click="onSend(row)">发布</m-button>
          </template>
        </Solution>
      </el-tab-pane>
      <el-tab-pane label="系数导向" name="Coefficient">
        <Coefficient label="系数导向" ref="Coefficient"></Coefficient>
      </el-tab-pane>
      <el-tab-pane label="历史记录" name="History">
        <History label="历史记录" ref="History" @history="onHistory"></History>
      </el-tab-pane>
    </el-tabs>
    <el-drawer
      :title="itemData.title"
      :visible.sync="show"
      direction="rtl"
    >
      <div class="pa-3" v-loading="loading">
        <SolutionDetails :item-data="itemData"></SolutionDetails>
      </div>
    </el-drawer>
    <SalarySolutionEdit ref="salarySolutionEditRefs" @refresh="$refs.Solution.onInit()"></SalarySolutionEdit>
    <SalarySandboxRules ref="salarySandboxRulesRefs" @refresh="$refs.Solution.onInit()"></SalarySandboxRules>
  </div>
</template>

<script>
import Solution from '../solution/salarySolution'
import SalarySolutionEdit from './salarySandboxEdit.vue'
import SalarySandboxRules from './salarySandboxRules.vue'
import Coefficient from '../solution/salaryCoefficient'
import History from '../solution/salarySolutionHistory'
import SolutionDetails from '../solution/components/solutionDetails.vue'
import {
  getSolutionDetails
} from '@/api/salary'
export default {
  name: 'Salary-Sandbox',
  provide () {
    return {
      env: 1
    }
  },
  components: {
    SalarySolutionEdit,
    SalarySandboxRules,
    Solution,
    Coefficient,
    History,
    SolutionDetails
  },
  data () {
    return {
      itemData: {},
      loading: false,
      show: false,
      activeName: 'Solution'
    }
  },
  mounted () {
    this.$refs[this.activeName].onInit()
  },
  methods: {
    onCalculate () {},
    onOpen (ref, item) {
      this.$refs[ref]?.open && this.$refs[ref].open(item)
    },
    handleClick (tab, event) {
      this.$refs[this.activeName].onInit()
    },
    async onHistory ({ performanceSolutionId }) {
      this.show = true
      this.loading = true
      try {
        const { data } = await getSolutionDetails({ performanceSolutionId })
        const { performanceSolutionDetailRespCategoryVos, ...obj } = data
        const resolveData = {
          ...obj,
          performanceSolutionDetailRespCategoryVos: performanceSolutionDetailRespCategoryVos.map(e => {
            e.calculateConfigurations = e.calculateConfigurations.map(item => {
              if (item.valueCategory !== 0) {
                item.value = JSON.parse(item.value)
                return item
              }
              return item
            })
            return e
          })
        }
        this.itemData = {
          ...resolveData.entity,
          ...resolveData
        }
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>