dzhh-frontend/.svn/pristine/83/83e49367fa109faa4c96381c94f6685046d221d2.svn-base

<template>
  <div ref="tableWarp" class="tableWarp">
    <!-- 操作按钮区域 -->
    <slot name="extra_" slot="extra"></slot>
    <div class="table-operator">
      <a-row type="flex" :gutter="24" justify="space-between">
        <a-col :xl="16" :lg="16" :md="16" :sm="16" >
          <a-button type="primary" icon="download" >导出</a-button>
          <h5 style="display:inline-block;">{{cggraphreportData.head.annotation}}</h5>
        </a-col>
      </a-row>
    </div>
    <a-table
      size="middle"
      bordered
      rowKey="id"
      :columns="columns"
      :data-source="getTableAddTotalRow"
      :pagination="false"
      :scroll="{x:getTableScroll}"
    >
      <template v-for="(key,i) in Object.keys(customRender)" :slot="key" slot-scope="text, record, index">
        <div class="custom-render" :key="i" @click="addComment(text,record,index,$event)" v-html="customRender[key](text, record)"></div>
      </template>
    </a-table>
  </div>
</template>
<script>
export default {
  name: 'GraphreportAutoTreeTable',
  computed: {
    getTableAddTotalRow() { // 根据配置获取表格数据
      let tableDataSource_
      if (this.cggraphreportData.head.dataType === 'json') {
        tableDataSource_ = JSON.parse(JSON.stringify(this.chartData))
      } else if (this.cggraphreportData.head.dataType === 'sql' || this.cggraphreportData.head.dataType === 'bean') {
        tableDataSource_ = JSON.parse(JSON.stringify(this.cggraphreportData.data.data))
      }
      return tableDataSource_
    },
    getTableScroll() {
      const width = this.columns.length * 100 - 40
      // 解决表格列分配宽度小于表格宽度时 多一列bug
      if (width < this.tableWarpWidth) {
        this.columns.forEach(function(item) {
          if (item.dataIndex !== 'rowIndex') {
            delete item.width
          }
        })
      }
      return width > this.tableWarpWidth ? width : false
    }
  },
  data() {
    return {
      columns: [], // 需要渲染的表头
      customRender: {},
      spinning: true,
      tableWarpWidth: 0, // 判断table是否超宽
      isTotal: false // 判断是否合计
    }
  },
  props: ['items', 'cggraphreportData', 'chartData'],
  watch: {
    items: {
      handler(val, oldVal) {
        this.getColunms()
      },
      deep: true // true 深度监听
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$refs.tableWarp) {
        this.tableWarpWidth = this.$refs.tableWarp.offsetWidth
      }
      this.getColunms()
    })
  },
  methods: {
    getColunms() { // 根据弹窗的数据获取表格的表头
      const that = this
      const items = JSON.parse(JSON.stringify(this.items))
      items.sort(function(a, b) {
        return a.orderNum - b.orderNum
      })
      items.forEach((item, i) => {
        if (item.isShow) {
          const column = {
            title: item.fieldTxt,
            dataIndex: item.fieldName,
            width: 100
          }
          if (i !== 0) {
            column.align = 'center'
          }
          if (item.jsEnhance) {
            column.scopedSlots = { customRender: column.dataIndex }
            var obj = eval('(' + item.jsEnhance + ')')
            that.customRender[column.dataIndex] = obj.customRender
          }
          that.columns.push(column)
        }
      })
    },
    addComment(text, record, index, $event) { // 处理js增强添加的方法  目前只支持click
      var domClick = $event.target.getAttribute('@click')
      if (domClick) {
        domClick = eval('(' + domClick + ')')
        domClick.call(this, text, record, index)
      }
    }
  }
}
</script>
<style scoped>
.ant-table td { white-space: nowrap; }
</style>
<style>
  .custom-render>*{
    display: inline-block;
    min-width: 20px;
    height: 100%;
    border-radius: 5px;
  }
  .custom-render{
    display: inline-block;
  }
</style>