remuneration/src/views/salary/solution/components/solutionDetails.vue

<template>
  <div>
    <el-descriptions v-if="!onlyParam" class="margin-top" :column="1" border>
      <el-descriptions-item
        v-for="header in columnHeaders"
        :key="header.prop"
      >
        <template slot="label">{{ header.name }}</template>
        <template v-if="header.prop === 'postNames'">
          <span>{{ itemData[header.prop] && itemData[header.prop].join('、') }}</span>
        </template>
        <template v-else>
          {{ itemData[header.prop] }}
        </template>
      </el-descriptions-item>
    </el-descriptions>
    <m-divider v-if="!onlyParam" content-position="left">参数及公式</m-divider>
    <el-tabs v-model="activeNames">
      <el-tab-pane
        v-for="(item, index) in rules"
        :key="item.category"
        :label="item.category"
        :name="index.toString()"
      >
        <el-form label-width="100px">
          <el-form-item label="系数">
            <!-- <m-card shadow="never"> -->
              <el-descriptions
                :labelStyle="{ width: '180px'}"
                :column="1"
                border
              >
                <el-descriptions-item
                  v-for="(calculateConfiguration, index) in item.calculateConfigurations"
                  :key="index"
                  :label="calculateConfiguration.name"
                >
                  <template v-if="calculateConfiguration.valueCategory === 0">
                    <el-tag size="small">{{ calculateConfiguration.value }}</el-tag>
                  </template>
                  <template v-else>
                    <m-table
                      clearHeader
                      shadow="never"
                      :headers="[
                        { label: '名称', prop: 'name' },
                        { label: '值', prop: 'value' }
                      ]"
                      :items="calculateConfiguration.value"
                    >
                    </m-table>
                  </template>
                </el-descriptions-item>
              </el-descriptions>
            <!-- </m-card> -->
          </el-form-item>
          <el-form-item label="计算公式" v-if="!onlyParam">
            <m-card shadow="never" :bodyStyle="{ maxHeight: '300px', overflow: 'auto' }">
              <div v-html="item.calculateFormulas?.[0]?.content"></div>
            </m-card>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <m-empty v-if="rules.length === 0"></m-empty>
  </div>
</template>

<script>
export default {
  name: 'solutionDetails',
  props: {
    itemData: {
      type: Object,
      default: () => ({})
    },
    onlyParam: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      activeNames: 0,
      columnHeaders: [
        { name: '规则名称', prop: 'title' },
        { name: '规则描述', prop: 'tag' },
        { name: '绩效机构', prop: 'organizationName' },
        { name: '绩效职务', prop: 'postNames' }
      ]
    }
  },
  computed: {
    rules () {
      return this.itemData.performanceSolutionDetailRespCategoryVos || []
    }
  }
}
</script>

<style lang="scss" scoped>

</style>