dzhh-frontend/.svn/pristine/e7/e78543a43328e7aefe68af284ce067b238277b90.svn-base

<template>
  <span>
    <a-popover title="自定义列" trigger="click" placement="leftBottom">
        <template slot="content">
          <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" >
            <a-row style="width:500px">
              <template v-for="(item,index) in defColumns">
                <template >
                    <a-col :span="8" :key="index">
                      <a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox>
                    </a-col>
                </template>
              </template>
            </a-row>
          </a-checkbox-group>
        </template>
        <a><a-icon type="setting" />设置</a>
    </a-popover>
  </span>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'ColSetting',
  props: {
    defColumns: {// 默认列
      type: Array,
      default: []
    },
    value: { // 必须要使用value
      type: Array,
      default: []
    }
  },
  data() {
    return {
      settingColumns: []// 列设置
    }
  },
  mounted() {
    this.initColumns()
  },
  methods: {
    // 列设置更改事件
    onColSettingsChange(checkedValues) {
      var key = this.$route.name + this.$route.params.code + ':colsettings'
      Vue.ls.set(key, checkedValues, 300 * 24 * 60 * 60 * 1000)
      this.$emit('input', checkedValues)
    },
    initColumns() {
      var key = this.$route.name + this.$route.params.code + ':colsettings'
      const colSettings = Vue.ls.get(key)
      if (!colSettings || colSettings.length === 0) {
        this.settingColumns = []
        this.defColumns.forEach(column => {
          if (this.settingColumns.indexOf(column['dataIndex']) < 0) {
            this.settingColumns.push(column['dataIndex'])
          }
        })
      } else {
        this.settingColumns = colSettings
      }
      this.$emit('input', colSettings)
    }
  }
}
</script>