dzhh-frontend/.svn/pristine/73/733ba90dbd3f59ce803ba3c4ff1cd7a626d8e097.svn-base

<template>
  <s-table
    size="middle"
    bordered
    row-key="id"
    :columns="columns"
    :data="loadData_"
  >
    <!-- <template slot="graphType" slot-scope="text, record">
      <div v-if="text">
        <template v-for="(t,i) in getGraphType(text)">
          <a-tag color="cyan" :key="i">{{t}}</a-tag>
        </template>
      </div>
    </template> -->
    <template slot="action" slot-scope="text, record">
      <a @click="handleAdd(record)" :disabled="layoutCodes.indexOf(record.code)>=0">添加</a>
      <!-- <a-divider type="vertical" />
      <a @click="handleDel(record)" >移除</a> -->
    </template>
  </s-table>
</template>

<script>
import STable from '@/components/Xtable'
import { getAction } from '@/api/manage'
// 引入相关的依赖
export default {
  name: 'ChartList',
  components: {
    STable
  },
  props: {
    layout: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    'layout.length': {
      handler(newValue, oldValue) {
        this.layoutCodes = []
        this.layout.forEach(item => {
          this.layoutCodes.push(item.data.code)
        })
      }
    }
  },
  data() {
    return {
      queryParam: {},
      graphTypeDictOptions: {
        bar: '柱状图',
        line: '曲线图',
        pie: '饼图',
        transverseBarMuiltid: '条形图',
        radar: '雷达图',
        funnel: '漏斗图',
        table: '数据表格'
      },
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '图表名称',
          align: 'center',
          dataIndex: 'name'
        },
        {
          title: '编码',
          align: 'center',
          dataIndex: 'code'
        },
        {
          title: '图表类型',
          align: 'center',
          dataIndex: 'graphType',
          scopedSlots: { customRender: 'graphType' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: '/diagram/diagramConfiguration/list'
      },
      layoutCodes: [],
      loadData_: parameter => {
        return getAction(this.url.list, Object.assign(parameter, this.queryParam)).then(res => {
          return res.result
        })
      }
    }
  },
  methods: {
    handleDel(data) {
      this.$emit('delete', data.i)
    },
    handleAdd(data) {
      this.$emit('add', {
        code: data.code,
        title: data.name,
        url: '/online/cggraphreport/chart/' + data.code,
        comp: 'OnlGraphreportAutoChart'
      })
    },
    getGraphType(graphTypes) {
      if (graphTypes) {
        var arry = []
        graphTypes.split(',').forEach(item => {
          this.graphTypeDictOptions[item] ? arry.push(this.graphTypeDictOptions[item]) : ''
        })
        return arry
      } else {
        return []
      }
    }
  },
  mounted() {
    this.layout.forEach(item => {
      this.layoutCodes.push(item.code)
    })
  }
}
</script>
<style scoped>

</style>