remuneration/src/views/salary/solution/salaryCoefficient/salarySolutionParam.vue

<template>
  <m-dialog ref="dialog" title="系数管理" @sure="onSure">
    <el-form v-loading="loading" label-width="100px">
      <el-form-item label="名称">
        <el-tag color="primary">{{ itemData.title }}</el-tag>
      </el-form-item>
      <el-form-item label="系数管理">
        <m-card shadow="never">
          <template v-if="items.length" v-slot:default>
            <el-tabs v-model="activeNames" >
              <el-tab-pane
                v-for="item in items"
                :key="item.category"
                :title="item.category"
                :name="item.category"
                :label="item.category"
              >
                <el-form-item
                  label-width="150px"
                  v-for="(calculateConfiguration, index) in item.calculateConfigurations"
                  :key="index"
                  :label="calculateConfiguration.name"
                  class="mt-3"
                >
                  <template v-if="calculateConfiguration.valueCategory === 0">
                    <el-slider
                      input-size="small"
                      v-model="calculateConfiguration.value"
                      :min="calculateConfiguration.miniValue"
                      :max="calculateConfiguration.maxValue"
                      :step="0.01"
                      show-input
                    >
                    </el-slider>
                  </template>
                  <template v-else>
                    <m-table
                      clearHeader
                      shadow="never"
                      :headers="[
                        { label: '名称', prop: 'name' },
                        { label: '值', prop: 'value' }
                      ]"
                      :items="calculateConfiguration.value"
                    >
                      <template #value="{ row }">
                        <el-input v-model="row.value" size="small" placeholder="请输入对应的值"></el-input>
                      </template>
                    </m-table>
                  </template>
                </el-form-item>
              </el-tab-pane>
            </el-tabs>
          </template>
          <template v-if="!items.length">
            <m-empty description="尚未配置系数"></m-empty>
          </template>
        </m-card>
      </el-form-item>
    </el-form>
  </m-dialog>
</template>

<script>
import {
  getSolutionDetails,
  saveSolution
} from '@/api/salary'
export default {
  name: 'salarySolutionParam',
  inject: ['env'],
  data () {
    return {
      activeNames: null,
      loading: false,
      itemData: {},
      items: []
    }
  },
  methods: {
    async open (item) {
      this.itemData = item
      this.$refs.dialog.open()
      this.loading = true
      try {
        const { data } = await getSolutionDetails({
          performanceSolutionId: item.performanceSolutionId
        })

        this.items = data.performanceSolutionDetailRespCategoryVos.map(e => {
          e.calculateConfigurations = e.calculateConfigurations.map(item => {
            if (item.valueCategory !== 0) {
              item.value = JSON.parse(item.value)
              return item
            }

            item.maxValue = !item.maxValue ? Infinity : Number(item.maxValue)
            item.miniValue = !item.miniValue ? -Infinity : Number(item.miniValue)

            if (item.value) {
              item.value = Number(item.value)
            }
            return item
          })
          return e
        })
        this.activeNames = this.items[0]?.category
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    async onSure () {
      const query = {
        entity: {
          performanceSolutionId: this.itemData.performanceSolutionId,
          env: this.env
        },
        performanceSolutionDetailRespCategoryVos: this.items
      }
      try {
        await saveSolution(query)
        this.$refs.dialog.close()
        this.$emit('refresh')
        this.$message.success('保存成功')
      } catch (error) {
        this.$message.error(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>