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

<template>
  <div>
    <el-descriptions 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 content-position="left">参数及公式</m-divider>
    <m-card
      v-for="item in rules"
      :key="item.category"
      shadow="never"
    >
      <template #header>
        {{ item.category }}
      </template>
      <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
          v-for="(calculateConfiguration, index) in item.calculateConfigurations"
          :key="index"
          :label="calculateConfiguration.name"
        >
          <template v-if="calculateConfiguration.valueCategory === 0">
            <el-tag>{{ 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-form-item> -->
        <el-form-item label="计算公式">
          <m-card shadow="never">
            <div v-html="item.calculateFormulas?.[0]?.content"></div>
          </m-card>
        </el-form-item>
      </el-form>
    </m-card>
    <m-empty v-if="rules.length === 0"></m-empty>
  </div>
</template>

<script>
export default {
  name: 'solutionDetails',
  props: {
    itemData: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {

      activeNames: null,
      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>