<template>
  <j-modal
    :title='title'
    :width='width'
    :visible='visible'
    @ok='handleOk'
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel='handleCancel'
    cancelText='关闭'>
    <div class='table-operator'>
      <a-button @click='loadData' type='primary' icon='reload'>重置</a-button>
    </div>
    <a-table :columns='columns' rowKey='id' :data-source='dataSource' bordered :pagination='false'>
    </a-table>
  </j-modal>
</template>

<script>
import { getAction } from '@api/manage'
import { initDictOptions, filterDictText } from '@/components/dict/JDictSelectUtil'
import DictTextShower from '@comp/business/DictTextShower'

let rowSpanValueArr = []
let rowSpanChildrenValueArr = []

function getRowspanData(data, key, value, column, index) {
  let count = 0
  let isHas = false
  rowSpanChildrenValueArr.forEach(item => {
    if (item.value === value && item.column === column) {
      isHas = true
    }
  })
  if (isHas) {
    return 0
  }
  data.forEach(item => {
    // 每有一条数据占一格
    if (item[key] === value) {
      count++
    }
  })
  rowSpanChildrenValueArr.push({
    value: value,
    column: column
  })
  return count
}

function getRowspan(data, key, value) {
  // 防止对空值进行计算
  if (!value) {
    return 1
  }
  // 已经跨行的数据一律不占格
  if (rowSpanValueArr.includes(value)) {
    return 0
  }
  let count = 0
  data.forEach(item => {
    // 每有一条数据占一格
    if (item[key] === value) {
      count++
    }
  })
  rowSpanValueArr.push(value)
  return count
}

export default {
  name: 'TemplatePreview',
  components: {
    DictTextShower
  },
  data() {
    return {
      rootNormsInfo: {},
      levelData: {},
      levelCount: 0,
      title: '',
      width: '80%',
      visible: false,
      disableSubmit: false,
      templateId: '',
      dataSource: [],
      columns: [],
      styleDictOptions: {},
      url: {
        previewList: '/business/busAssessNorm/previewList'
      },
      chnNumChar: ['一', '二', '三', '四', '五', '六', '七', '八', '九'],
      noDictStyleArr: ['score', 'text']
    }
  },
  created() {
    this.initDictConfig()
  },
  methods: {
    show(id) {
      this.templateId = id
      this.visible = true
      this.loadData()
    },
    initDictConfig() {
      initDictOptions('norm_style').then((res) => {
        if (res.success) {
          this.styleDictOptions = res.result
        }
      })
    },
    init() {
      this.dataSource = []
      this.columns = []
      this.levelData = {}
      this.levelCount = 0
      this.rootNormsInfo = {}
      rowSpanValueArr = []
      rowSpanChildrenValueArr = []
    },
    loadData() {
      this.init()
      getAction(this.url.previewList, { templateId: this.templateId }).then(res => {
        if (res.success) {
          // 扁平化树的数据
          res.result.forEach((item, index) => {
            this.levelData[item.id] = 0
            if (!this.rootNormsInfo[item.name]) {
              this.rootNormsInfo[item.name] = {
                'izAssess': item.izAssess,
                'description': item.description,
                'style': item.style,
                'remark': item.remark,
                'weight': item.weight,
                'minValue': item.minValue,
                'maxValue': item.maxValue,
                'defaultValue': item.defaultValue
              }
            }
            // 如果有子集,则只加入父级指标名称信息
            if (item['children'].length >= 1) {
              let obj = {
                'norm_0': item.name
              }
              this.getChildrenData(item['children'], 0, obj, item.id)
            } else {
              this.dataSource.push({
                'norm_0': item.name,
                'description': item.description,
                'style': item.style,
                'remark': item.remark,
                'weight': item.weight,
                'minValue': item.minValue,
                'maxValue': item.maxValue,
                'defaultValue': item.defaultValue
              })
            }
          })
          // 确定最大级树
          this.getMaxLevel()
          // 根据最大级树处理表头
          this.addToColumns()
        }
      })
    },
    getChildrenData(data, level, obj, id) {
      data.forEach(item => {
        let key = `norm_${level + 1}`
        obj[key] = item.name
        if (item['children'].length >= 1) {
          this.levelData[id] += 1
          this.getChildrenData(item['children'], level + 1, obj, id)
        } else {
          const addObj = {
            'id': item.id,
            'description': item.description,
            'style': item.style,
            'remark': item.remark,
            'weight': item.weight,
            'minValue': item.minValue,
            'maxValue': item.maxValue,
            'defaultValue': item.defaultValue
          }
          for (let i = 0; i <= level + 1; i++) {
            let key = `norm_${i}`
            addObj[key] = obj[key]
          }
          this.dataSource.push(addObj)
        }
      })
    },
    getMaxLevel() {
      this.levelCount = 0
      for (let i in this.levelData) {
        if (this.levelData[i] > this.levelCount) {
          this.levelCount = this.levelData[i]
        }
      }
    },
    addToColumns() {
      this.columns = [
        {
          title: '评价内容',
          align: 'center',
          dataIndex: 'description',
          customRender: (text, record, index) => {
            const obj = {
              children: text,
              attrs: {}
            }
            if (this.rootNormsInfo[record['norm_0']]['izAssess'] === '1') {
              obj.children = this.rootNormsInfo[record['norm_0']]['description']
              obj.attrs.rowSpan = getRowspanData(this.dataSource, 'norm_0', record['norm_0'], 'description', index)
            }
            return obj
          }
        },
        {
          title: '指标考评风格',
          align: 'center',
          dataIndex: 'style',
          customRender: (text, record, index) => {
            const obj = {
              children: text,
              attrs: {}
            }
            if (this.rootNormsInfo[record['norm_0']]['izAssess'] === '1') {
              obj.attrs.rowSpan = getRowspanData(this.dataSource, 'norm_0', record['norm_0'], 'style', index)
              let value = this.rootNormsInfo[record['norm_0']]['style']
              let minValue = this.rootNormsInfo[record['norm_0']]['minValue']
              let maxValue = this.rootNormsInfo[record['norm_0']]['maxValue']
              obj.children = value === 'score' ? `${filterDictText(this.styleDictOptions, value)}${minValue} - ${maxValue}` : filterDictText(this.styleDictOptions, value)
            } else {
              obj.children = text === 'score' ? `${filterDictText(this.styleDictOptions, text)}${record.minValue} - ${record.maxValue}` : filterDictText(this.styleDictOptions, text)
            }
            return obj
          }
        },
        {
          title: '权重(%)',
          align: 'center',
          dataIndex: 'weight',
          customRender: (text, record, index) => {
            const obj = {
              children: text,
              attrs: {}
            }
            if (this.rootNormsInfo[record['norm_0']]['izAssess'] === '1') {
              obj.children = this.rootNormsInfo[record['norm_0']]['weight']
              obj.attrs.rowSpan = getRowspanData(this.dataSource, 'norm_0', record['norm_0'], 'weight', index)
            }
            return obj
          }
        },
        {
          title: '默认值',
          align: 'center',
          dataIndex: 'defaultValue',
          scopedSlots: { customRender: 'defaultValue' },
          customRender: (text, record, index) => {
            const obj = {
              children: text,
              attrs: {}
            }
            if (this.rootNormsInfo[record['norm_0']]['izAssess'] === '1') {
              obj.children = this.noDictStyleArr.includes(this.rootNormsInfo[record['norm_0']]['style']) ? this.rootNormsInfo[record['norm_0']]['defaultValue'] : this.$createElement(DictTextShower, {
                props: {
                  dictCode: this.rootNormsInfo[record['norm_0']]['style'],
                  dictValue: this.rootNormsInfo[record['norm_0']]['defaultValue']
                }
              })
              obj.attrs.rowSpan = getRowspanData(this.dataSource, 'norm_0', record['norm_0'], 'defaultValue', index)
            } else {
              obj.children = this.noDictStyleArr.includes(record.style) ? text : this.$createElement(DictTextShower, {
                props: {
                  dictCode: record.style,
                  dictValue: text
                }
              })
            }
            return obj
          }
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remark',
          customRender: (text, record, index) => {
            const obj = {
              children: text,
              attrs: {}
            }
            if (this.rootNormsInfo[record['norm_0']]['izAssess'] === '1') {
              obj.children = this.rootNormsInfo[record['norm_0']]['remark']
              obj.attrs.rowSpan = getRowspanData(this.dataSource, 'norm_0', record['norm_0'], 'remark', index)
            }
            return obj
          }
        }
      ]
      // 从最大级递减从前加入数组
      for (let i = this.levelCount; i >= 0; i--) {
        this.columns.unshift({
          title: `${this.chnNumChar[i]}级指标`,
          align: 'center',
          dataIndex: `norm_${i}`,
          customRender: (text, record, index) => {
            const obj = {
              children: text,
              attrs: {}
            }
            obj.attrs.rowSpan = getRowspan(this.dataSource, `norm_${i}`, text)
            return obj
          }
        })
      }
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      this.close()
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>

# To Be Continued!😎

Last Updated: 10/30/2021, 9:08:06 PM