fj-dc-ui/.svn/pristine/cc/cc36907be98f426ce3a81ab9d44b4dcdf1becf87.svn-base

<template>
   <el-table
     ref="table"
     class="editTable"
    :data="editableTableData"
    style="width: 100%"
    :border='true'
    :highlight-current-row = 'true'
    :row-class-name="tableRowClassName"
    @current-change="currentRowChangeHandler"
    @click="tableClick"
    :height="tableHeight"
    >
    <slot></slot>
  </el-table>
</template>

<script>
import mulitpleSelect from '@baseWidget/multipleSelect.vue'
import singleSelect from '@baseWidget/singleSelect.vue'
export default {
  name: 'editabletable',
  props:['columnData','tableData'],
  watch: {
    tableData:function(){
      console.log('tableData变化了');
      this.editableTableData = this.tableData;
    },
     columnData:function(){
       if(this.columnData){
      this.tableColumnConfig = this.columnData;
    }
    if(this.tableData){
      this.editableTableData = this.tableData;
      this.editableTableData.forEach((row)=>{
         row['_rowState'] = '-';
      });
    }
    }
  },
  components: {
    'mulitpleSelect':mulitpleSelect,
    'singleSelect':singleSelect,
  },
  data () {
    return {
      tableHeight:50,
      currentRow:{},
      rememberRowData:{},
      editableTableData: [],
        tableColumnConfig:[]
    }
  },
  created () {
    if(this.columnData){
      this.tableColumnConfig = this.columnData;
    }
    if(this.tableData){
      this.editableTableData = this.tableData;
      this.editableTableData.forEach((row)=>{
         row['_rowState'] = '-';
      });
    }
  },
  mounted(){
    this.$nextTick(function () {
        this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 50;
        let self = this;
        window.onresize = function() {
            self.tableHeight = window.innerHeight - self.$refs.table.$el.offsetTop - 50
        }
    })
  },
  methods: {
      doLayout(){
         this.$refs.table.doLayout();
      },
      cellContentChangeHandler:function(event,columnConfig,row,callBackHandler){
          console.log("表格数据编辑，发生变化的列是"+columnConfig.title+',行内容是'+row);
          console.log("变化后表格数据");
          console.log(this.tableData);
          if(callBackHandler){
          callBackHandler(event,row,row[columnConfig.prop],this);
          }
      },
      currentRowChangeHandler:function(currentRow){
        console.log('当前行变化');
        this.currentRow = currentRow;
        this.rememberRowData = Object.assign({}, this.currentRow);
      },
      showTargetLabels:function(ar,labelProp){
        let result = [];
        if(ar&&ar instanceof Array){
          ar.forEach((e)=>{
            result.push(e[labelProp]);
          });
        }
        return result.join(',');
      },
      showTargetLabel:function(obj,labelProp){
        if(obj){
          return obj[labelProp];
        }else{
          return '';
        }
      },
      addOneRow:function(newRowObj){

        newRowObj['_rowState'] = 'add';
        // this.editableTableData.push(newRowObj);
        this.editableTableData.unshift(newRowObj);
        console.log(this.editableTableData);
        this.currentRow = newRowObj;
      },
      rowCellDataChangeHandler:function(anyEvent,row,column){
        console.log("rowCellDataChangeHandler");
        this.currentRow[column.prop] = anyEvent['newValue'];
        this.currentRow['_rowState'] = 'change';
        if(column.type == 'mulitpleSelect'){
			if(anyEvent['changeType'] == 'add'){
				if(column['inputParams']['addCallBackFunction']&&column['inputParams']['addCallBackFunction'] instanceof Function){
					column['inputParams']['addCallBackFunction'](anyEvent.changeElement,row,this);
				}
			}else if(anyEvent['changeType'] == 'delete'){
				if(column['inputParams']['deleteCallBackFunction']&&column['inputParams']['deleteCallBackFunction'] instanceof Function){
					column['inputParams']['deleteCallBackFunction'](anyEvent.changeElement,row,this);
				}
			}
        }else if(column.type == 'select'){
			if(anyEvent['changeType'] == 'add'){
				if(column['inputParams']['addCallBackFunction']&&column['inputParams']['addCallBackFunction'] instanceof Function){
					column['inputParams']['addCallBackFunction'](anyEvent.changeElement,row,this);
				}
			}else if(anyEvent['changeType'] == 'delete'){
				if(column['inputParams']['deleteCallBackFunction']&&column['inputParams']['deleteCallBackFunction'] instanceof Function){
					column['inputParams']['deleteCallBackFunction'](anyEvent.changeElement,row,this);
				}
			}else if(anyEvent['changeType'] == 'change'){
				if(column['inputParams']['changeCallBackFunction']&&column['inputParams']['changeCallBackFunction'] instanceof Function){
					column['inputParams']['changeCallBackFunction'](anyEvent,row,this);
				}
			}
		}
	  },

      tableRowClassName:function(row,rowIndex){
        if (row['_rowState'] == 'change') {
          return 'warning-row';
        } else if (row['_rowState'] == 'add') {
          return 'success-row';
        }
        return '';
      },
      singleRowSubmit:function(row){
         this.currentRow = null;
         this.$emit('rowEditDone',{});
      },
      rollback:function(row){
        this.currentRow = this.rememberRowData;
        this.currentRow = null;
      },
      cleanCurrentSelectedRow:function(){
        this.currentRow = null;
      },
      tableClick:function(){
        console.log('tableClick');
      },
      singleRowDelete:function(row){
        this.$emit('rowDelete',{'row':row});
      }
  },
}
</script>

<style>
  .editTable .el-select .el-input.is-focus .el-input__inner{
    border : 0px !important;
  }
  .el-table .warning-row {
    background: oldlace;
  }
  .el-table .success-row {
    background: #f0f9eb;
  }
</style>