fj-dc-ui/.svn/pristine/2c/2c2b1dbe6c60ea3e66c6560aaff4d571c6b8ba41.svn-base

<template>
   <el-table
     class="editTable"
    :data="editableTableData"
    style="width: 100%"
    :border='true'
    :highlight-current-row = 'true'
    :row-class-name="tableRowClassName"
    @current-change="currentRowChangeHandler"
    @click="tableClick"
    >
    <el-table-column v-for="(column,index) in tableColumnConfig"
      :label="column.title"
      :prop="column.prop"
      :key = 'index'
      :show-overflow-tooltip = "true"
    >
      <template slot-scope="scope">
       <!-- 针对文字 -->
        <transition name="el-fade-in-linear">
        <el-input v-model="scope.row[column.prop]" v-if="column.editable && column.type == 'text' && currentRow == scope.row" @change="cellContentChangeHandler($event,column,scope.row,column.inputParams.changeHandler)"></el-input>
        </transition>
         <transition name="el-fade-in-linear">
        <p v-if=" column.type == 'text' && currentRow != scope.row">{{scope.row[column.prop]}}</p>
        </transition>
         <transition name="el-fade-in-linear">
        <p v-if=" column.type == 'text' && currentRow == scope.row && !column.editable">{{scope.row[column.prop]}}</p>
        </transition>
       <!-- 针对多选 -->
       <transition name="el-fade-in-linear">
       <mulitpleSelect  
        :initalValue="scope.row[column.prop]" 
        :selectData="column['inputParams']['selectData']" 
        :valueName="column.inputParams['valueName']"
        :labelName="column['inputParams']['labelName']"
        :valueType="column.inputParams['valueType']"
        :otherSearchParams="scope.row" 
        :subLabelName="column['inputParams']['subLabelName']"
        @valueChange="rowCellDataChangeHandler($event,scope.row,column)"
        v-if="column.type == 'mulitpleSelect' && currentRow == scope.row"
        ></mulitpleSelect>
         </transition>
        <transition name="el-fade-in-linear">
         <p v-if="column.type == 'mulitpleSelect' && currentRow != scope.row">{{showTargetLabels(scope.row[column.prop],column['inputParams']['labelName'])}}</p>
         </transition>
         <transition name="el-fade-in-linear">
        <p v-if="column.type == 'mulitpleSelect' && currentRow == scope.row && !column.editable">{{showTargetLabels(scope.row[column.prop],column['inputParams']['labelName'])}}</p>
        </transition>
       <!-- 针对单选 -->
       <transition name="el-fade-in-linear">
       <singleSelect  
        :initalValue="scope.row[column.prop]" 
        :selectData="column['inputParams']['selectData']" 
        :valueName="column.inputParams['valueName']"
        :labelName="column['inputParams']['labelName']"
        :otherSearchParams="scope.row" 
		@valueChange="rowCellDataChangeHandler($event,scope.row,column)"
        v-if="column.type == 'select' && currentRow == scope.row"
        ></singleSelect>
        </transition>
        <transition name="el-fade-in-linear">
        <p v-if="column.type == 'select' && currentRow != scope.row">{{showTargetLabel(scope.row[column.prop],column['inputParams']['labelName'])}}</p>
         </transition>
        <transition name="el-fade-in-linear">
        <p v-if="column.type == 'select' && currentRow == scope.row && !column.editable">{{showTargetLabel(scope.row[column.prop],column['inputParams']['labelName'])}}</p>
       
        </transition>
        <!-- 针对日期 -->
      </template>
    </el-table-column>
     <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <!-- <el-button v-show="currentRow == scope.row" @click="singleRowSubmit(scope.row)" type="text" size="small">提交</el-button> -->
        <!-- <el-button v-show="currentRow == scope.row" @click="rollback(scope.row)" type="text" size="small">取消</el-button> -->
        <el-button v-show="currentRow == scope.row" @click="singleRowSubmit(scope.row)" type="text" size="small">确定</el-button>
        <el-button v-show="currentRow == scope.row" @click="singleRowDelete(scope.row)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import mulitpleSelect from '@baseWidget/multipleSelect.vue'
import singleSelect from '@baseWidget/singleSelect.vue'
export default {
  name: 'editabletable',
  props:['columnData','tableData','tableOtherParams'],
  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 {
      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'] = '-';
      });
    }
  },
  methods: {
      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){
        let newRow = Object.assign({}, newRowObj);
        this.tableColumnConfig.forEach((column)=>{
           if(column.type=='text'){
			 newRow[column.prop] = '';
			 if(newRowObj.hasOwnProperty(column.prop)){
				 newRow[column.prop] = newRowObj[column.prop];
			 }
           }
           if(column.type=='mulitpleSelect'){
			  newRow[column.prop] = [];
			  if(newRowObj.hasOwnProperty(column.prop)){
				  newRow[column.prop] = newRowObj[column.prop];
			  }
           }
        });
        // newRow['id.'] = newRowObj['id'];
        newRow['_rowState'] = 'add';
        this.editableTableData.push(newRow);
        this.currentRow = newRow;
      },
      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>