关于Element-UI可编辑表格的实现过程

目录

• 一、 可编辑单元格的实现
• 二、 Input框编辑时动态查询（下拉列表）
• 三、 点击图标显示下拉、点击图标显示Dialog的实现

一、 可编辑单元格的实现

实现效果：点击可编辑

实现原理：在单元格中放置span 和 input ，绑定data中同一的数据，捕捉点击单元格事件和失去焦点事件，添加/删除 元素的相应class，控制span 和 input 框的显示。

实现代码：

Style：

.tb-edit .input-box {
   display: none
}
.tb-edit .current-cell .input-box {
   display: block;
   margin-left: -15px;
}

Html：

<el-table-column
      label='<@spring.message "flowemptransfer.description"/>'
      class-name="column-bg-color-editable"
      width="100"
      show-overflow-tooltip>
   <template scope="scope">
      <div class="input-box">
         <el-input size="small" @blur="handleInputBlur" v-model="scope.row.description" ></el-input>
      </div>
      <span>{{scope.row.description}}</span>
   </template>
</el-table-column>

JavaScript：

//单元格点击后，显示input，并让input 获取焦点
handleCellClick:function(row, column, cell, event){
    emptransfer.addClass(cell,'current-cell');
    if(emptransfer.getChildElement(cell,3) !== 0){
        var _inputParentNode =emptransfer.getChildElement(cell,3);
        if(_inputParentNode.hasChildNodes()&& _inputParentNode.childNodes.length > 2) {
            var _inputNode = _inputParentNode.childNodes[2];
            if(_inputNode.tagName === 'INPUT'){
                _inputNode.focus();
            }
        }
    }
},
//input框失去焦点事件
handleInputBlur:function(event){   //当 input 失去焦点 时,input 切换为 span，并且让下方 表格消失（注意，与点击表格事件的执行顺序）
    var _event = event;
    setTimeout(function(){
        var _inputNode = _event.target;
        if(emptransfer.getParentElement(_inputNode,4)!==0){
            var _cellNode = emptransfer.getParentElement(_inputNode,4);
            emptransfer.removeClass(_cellNode,'current-cell');
            emptransfer.removeClass(_cellNode,'current-cell2');
        }
    },200);
},

二、 Input框编辑时动态查询（下拉列表）

实现效果：编辑input时，下方出现下拉动态查询，点击下拉中的数据，填入表中

实现原理：原理同上，监听input编辑事件获取DOM节点，改变class控制子元素的显示。

这里的显示情况有三种：

1）不点击表格时，只显示span

2）点击表格后，未编辑，只显示input

3）在input框编辑时显示input + 下拉表格区域

流程如下：

实现代码：

Style：

.tb-edit .input-box {//显示span
  display: none
}
.tb-edit .current-cell .input-box {//显示input
  display: block;
  margin-left: -15px;
}
.tb-edit .hidden-list{//不显示 下拉区域
  display: none;
}
.tb-edit .current-cell2 .hidden-list{//显示下拉区域
  display: block;
}

Html：

<template scope="scope">
  <div class="input-box">
     <el-input size="small" v-model="scope.row.employeeCode"  @blur="handleInputBlur" @focus="handleInputFocus" :row-index=scope.$index @change="handleEdit">
     </el-input>
  </div>
  <span>{{scope.row.employeeCode}}</span>
<span><i  @click="selectEmpInfo(scope.$index)" class="el-input__icon el-icon-information"></i></span>
  <div class="hidden-list" style="position: absolute;z-index:10;border: 1px solid #bfbfbf;box-shadow: 0px 0px 2px 0px #aaa;left:0px;">
     <el-table stripe border
             :data="downListTableData"
             :row-index=scope.$index
             tooltip-effect="light"
             v-loading="empDownListLoading"
             style="width: 100%;margin-top: 20px"
             @row-click="empDownListItemClick">
        <el-table-column
              width="100"
              prop="employeeCode"
              label='<@spring.message "flowemptransfer.employeecode"/>'
        ></el-table-column>
        <el-table-column
              width="90"
              prop="name"
              label='<@spring.message "flowemptransfer.name"/>'
        ></el-table-column>
        <el-table-column
              prop="joinDate"
              label='<@spring.message "flowemptransfer.joindate"/>'
              width="110px"
              fit="true"
        ></el-table-column>
        <el-table-column
              prop="fullUnitName"
              show-overflow-tooltip="true"
              width="160"
              label='<@spring.message "flowemptransfer.nowdept"/>'
        ></el-table-column>
        <el-table-column
              prop="positionName"
              show-overflow-tooltip="true"
              width="160"
              label='<@spring.message "flowemptransfer.nowposi"/>'
        ></el-table-column>
     </el-table>
  </div>
</template>

JavaScript:

//单元格点击后，显示input，并让input 获取焦点
handleCellClick:function(row, column, cell, event){
   emptransfer.addClass(cell,'current-cell');
   if(emptransfer.getChildElement(cell,3) !== 0){
       var _inputParentNode =emptransfer.getChildElement(cell,3);
       if(_inputParentNode.hasChildNodes()&& _inputParentNode.childNodes.length > 2) {
           var _inputNode = _inputParentNode.childNodes[2];
           if(_inputNode.tagName === 'INPUT'){
               _inputNode.focus();
           }
       }
   }
},
//input框失去焦点事件
handleInputBlur:function(event){   //当 input 失去焦点 时,input 切换为 span，并且让下方 表格消失（注意，与点击表格事件的执行顺序）
   var _event = event;
   setTimeout(function(){
       var _inputNode = _event.target;
       if(emptransfer.getParentElement(_inputNode,4)!==0){
           var _cellNode = emptransfer.getParentElement(_inputNode,4);
           emptransfer.removeClass(_cellNode,'current-cell');
           emptransfer.removeClass(_cellNode,'current-cell2');
       }
   },200);
},
//input框编辑时触发的方法，动态弹出员工查询下拉列表
handleEdit:function(value) {
   var _inputNode = inputFocusEle;
   if(emptransfer.getParentElement(_inputNode,1)!==0){
       var _parentNode = emptransfer.getParentElement(_inputNode,1);
       var index = _parentNode.getAttribute('row-index');
       emptransfer.tableData[index].name='';
       emptransfer.tableData[index].joinDate='';
       emptransfer.tableData[index].nowDept='';
       emptransfer.tableData[index].nowFullDept='';
       emptransfer.tableData[index].nowDeptCode='';
       emptransfer.tableData[index].nowPosi='';
       emptransfer.tableData[index].nowPosiCode='';
   }
   if(emptransfer.getParentElement(_inputNode,4)!==0){
       var _cellNode = emptransfer.getParentElement(_inputNode,4);
       emptransfer.addClass(_cellNode,'current-cell2')
       emptransfer.queryPreEmpInfo(_inputNode.value);
   }
},

三、 点击图标显示下拉、点击图标显示Dialog的实现

实现效果：

实现原理：同上。

实现代码：

Style：

.tb-edit .transfer-type-list{
   display: none;
}
.tb-edit .current-cell1 .transfer-type-list{
   display: block;
   z-index: 10;
}

Html：

<template scope="scope">
   <div  style="display: inline-block;color:#0c91e5;cursor: pointer"><span ><i class="el-icon-information" tabindex="1" @blur="handleIconBlur" @click="selectTransferType($event)"></i></span></div>
   <span >{{scope.row.transferType}}</span>
   <div class="transfer-type-list" style="position: absolute;background-color: #ffffff;left:-40px;border: 1px solid #bfbfbf;box-shadow: 0px 0px 2px 0px #aaa">
      <div style="height: 30px;width: 180px;">
         <div style="float: left;height: 100%;width: 5px;background-color: #0c91e5;"></div>
         <div style="float: left;height: 100%;margin-left: 15px;width: 130px;line-height: 30px;font-weight: 700;"><@spring.message "flowemptransfer.transfertype"/></div>
         <div style="float:left;width: 0;height: 0;margin-top: 11px;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top:8px solid #0c91e5;"></div>
      </div>
      <div class="transfer-type-item" v-for="(item,index) in transferPosiType" @click="handleTransferTypeClick($event,scope.$index)">
         <div style="display:inline-block;width: 25%;height: 30px;line-height: 30px;text-align: center;font-size: 12px;color: #ccc;border: 1px solid #f1f1f1;">{{item.codeValue}}</div>
         <div style="display:inline-block;margin-left:-4px;width: 75%;height: 30px;line-height: 30px;text-align: center;border: 1px solid #f1f1f1;font-size: 12px">{{item.codeName}}</div>
         <input type="hidden" :value="index"/>
      </div>
   </div>
</template>

JavaScript：

//点击弹出 调整类型下拉列表
selectTransferType:function(event){    //点击事件， 下方出现下拉列表： 调动类型
    var _i = event.target;
    _i.focus();
    if( emptransfer.getParentElement(_i,4)!==0){
        var _boxEle = emptransfer.getParentElement(_i,4);
        emptransfer.addClass(_boxEle,'current-cell1');
    }
},
//调整类型下拉列表的行点击事件
handleTransferTypeClick:function(event,index){
    var _index;
    var _click = event.target;
    var _item = _click.parentNode;
    var _nextNode = _item.childNodes[4];
    if(_nextNode.tagName === 'INPUT'){
        _index = _nextNode.value;
    }else{
        var _inputNode =_click.childNodes[4];
        _index = _inputNode.value;
    }
    emptransfer.tableData[index].transferType = emptransfer.transferPosiType[_index].codeName;
    emptransfer.tableData[index].transferTypeCode = emptransfer.transferPosiType[_index].codeValue;
    if(emptransfer.getParentElement(_item,3)!==0){
        var _boxEle = emptransfer.getParentElement(_item,3);
        emptransfer.removeClass(_boxEle,'current-cell1');
    }
},

demo代码：

<#include "../../include/header.html">
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>员工调动申请</title>
  <link href="${base.contextPath}/lib/bootstrap-3.3.7/css/bootstrap.min.css" rel="external nofollow"  rel="stylesheet" type="text/css"/>
  <script src="${base.contextPath}/lib/lodash4.13.1/lodash.min.js"></script>
  <style>
    #emptransfer{
      padding: 30px;
    }
    .hr-label {
      margin-top: 30px;
      margin-bottom: 20px;
    }
    .header-btn{
      margin-left: -15px;
    }
    .label-width{
      padding-top:5px;
    }
    .content-label{
      text-align: right;
      margin-left: 1%;
    }
    .btn-submit{
      width:100%;
    }
    .middle{
      min-width:1044px;
    }
    .info-1{
      font-size: 20px;
      font-weight: 700;
      color: red;
      vertical-align: middle;
    }
    .info-2{
      font-size: 14px;
      font-style: italic;
    }
    .info-3{
      font-style: italic;
      font-size: 12px;
      margin-top: 7px;
    }
    .info-4{
      font-style: italic;
      margin-bottom: 20px;
      font-size: 12px;
    }
    .btn-add{
      margin-right: 30px;
      display: inline-block;
      cursor: pointer;
    }
    .btn-delete{
      margin-right: 30px;
      display: inline-block;
      cursor: pointer;
    }
    .btn-import{
      margin-right: 30px;
      display: inline-block;
      cursor: pointer;
    }
    .btn-export{
      display: inline-block;
      cursor: pointer;
    }
    .btn-modelexcel{
      display: inline-block;
      float: right;
    }
    .btn-download-exel {
      display: inline-block;
      float: right;
      border: 1px solid #0092da;
      padding: 2px 12px;
      border-radius: 16px;
      color: #0092da;
      cursor: pointer;
    }
    .tb-edit .input-box {
      display: none
    }
    .tb-edit .current-cell{
      /*position: relative;*/
    }
    .tb-edit .current-cell .input-box {
      display: block;
      margin-left: -15px;
    }
    .tb-edit .current-cell .input-box+span {
      display: none
    }
    .tb-edit .el-table__body-wrapper{
      height:500px;
    }
    .hidden-list .el-table__body-wrapper{
      height:auto;
    }
    .input-box{
       width:99px;
     }
    .el-input--small .el-input__inner {
      height: 38px;
    }
    .input-box  input{
      padding-right: 30px;
    }
    .tb-edit .transfer-type-list{
      display: none;
    }
    .tb-edit .current-cell1 .transfer-type-list{
      display: block;
      z-index: 10;
    }
    .tb-edit .hidden-list{
      display: none;
    }
    .tb-edit .current-cell2 .hidden-list{
      display: block;
    }
    .transfer-type-item:hover{
      background-color: #f1f1f1;
    }
    .el-date-editor.el-input {
      width: 120px;
    }
    .el-input__icon{
      color:#0c91e5;
      cursor: pointer;
    }
    .el-table .cell, .el-table th > div{
      padding-right: 6px;
      padding-left: 15px;
    }
    .column-bg-color{
      background-color: #eef1f6;
    }
    .column-bg-color-editable{
      background-color: #e1f1ec;
    }
    .el-table--enable-row-hover .el-table__body tr:hover .column-bg-color-editable{
      background-color: #e1f1ec;
    }
    .el-dialog__headerbtn .el-dialog__close {
      background-color: #00A0D1;
      color: #ffffff;
      width: 30px;
      height: 32px;
      padding-top: 9px;
    }
    .el-dialog__headerbtn .el-dialog__close:before {
      background-color: #00A0D1;
      color: #ffffff;
      width: 50px;
      height: 50px;
    }
    .el-dialog__header {
      padding: 0px;
      border-bottom: 1px solid #EBEDEE;
      margin-bottom: 10px;
    }
    #import-file-dialog .el-dialog__title {
      line-height: 2;
      font-size: 16px;
      font-weight: 700;
      color: #14A4FA;
      margin-top: 22px;
      border-left: 5px solid #14A4FA;
      padding-left: 17px;
      padding-bottom: -15px;
      margin-top: 10px;
    }
    .content-span{
      line-height: 26px;
    }
  </style>
</head>
<body>
<script type="text/javascript">
    var _token = '${_csrf.token}';
    var employeeCodeStr = '<@spring.message "flowemptransfer.employeecode"/>';
    var nameStr = '<@spring.message "flowemptransfer.name"/>';
    var joinDateStr = '<@spring.message "flowemptransfer.joindate"/>';
    var nowDeptStr = '<@spring.message "flowemptransfer.nowdept"/>';
    var nowDeptCodeStr = '<@spring.message "flowemptransfer.nowdeptcode"/>';
    var nowPosiStr = '<@spring.message "flowemptransfer.nowposi"/>';
    var nowPosiCodeStr = '<@spring.message "flowemptransfer.nowposicode"/>';
    var transferDepStr = '<@spring.message "flowemptransfer.transferdept"/>';
    var transferDepCodeStr = '<@spring.message "flowemptransfer.transferdeptcode"/>';
    var transferPosiStr = '<@spring.message "flowemptransfer.transferposi"/>';
    var transferPosiCodeStr = '<@spring.message "flowemptransfer.transferposicode"/>';
    var transferTypeStr = '<@spring.message "flowemptransfer.transfertype"/>';
    var transferTypeCodeStr = '<@spring.message "flowemptransfer.transfertypecode"/>';
    var effectiveDateStr = '<@spring.message "flowemptransfer.effectivedate"/>';
    var descriptionStr = '<@spring.message "flowemptransfer.description"/>';
    var downloadExcelName = '<@spring.message "flowemptransfer.downloadexcelname"/>';
    var exportExcelName = '<@spring.message "flowemptransfer.exportexcelname"/>';
    var tables = '<@spring.message "flowemptransfer.tablenumber"/>';
    var infoTipOne = '<@spring.message "flowemptransfer.infotipone"/>';
    var empCodeNotEmpty = '<@spring.message "flowemptransfer.empcodenotempty"/>';
    var transferPosiNotEmpty = '<@spring.message "flowemptransfer.transferposinotempty"/>';
    var transferDeptNotEmpty = '<@spring.message "flowemptransfer.transferdeptnotempty"/>';
    var transferTypeNotEmpty = '<@spring.message "flowemptransfer.transfertypenotempty"/>';
    var effectiveDateNotEmpty = '<@spring.message "flowemptransfer.effectivedatenotempty"/>';
    const TRANSFER_TYPE = 'MASSGMASSNA3'
    const TEMPLATE_NAME="EMP_TRANSFER_EXCEL_URL";
</script>
  <div id="emptransfer" v-loading="submitLoading"  style="min-width: 500px">
    <div class="header">
      <div class="row ">
        <div class="col-md-1 col-sm-1 col-xs-2 content-label"><label class="label-width"><@spring.message "flowemptransfer.description"/></label></div>
        <div class="col-md-5 col-sm-5 col-xs-9 ">
          <textarea v-model="headMemo" class="form-control margin-label" rows="5" placeholder="<@spring.message 'policy.remarktip'/>" style="border: 1px solid #eee;">
          </textarea>
          <div >
            <div style="display:inline-block;width: 5px;vertical-align: top"><span class="info-1">*</span></div>
            <div style="display:inline-block;width: 15%;vertical-align: top"><span class="info-2"><@spring.message "flowemptransfer.note"/>：</span></div>
            <div style="display:inline-block;width: 75%"><div class="info-3">1、<@spring.message "flowemptransfer.notetext1"/></div>
              <div class="info-4">2、<@spring.message "flowemptransfer.notetext2"/></div></div>
          </div>
          <div class="header-btn">
            <div class="col-md-5 col-sm-5 col-xs-8"><el-button type="primary" class="btn-submit" @click="checkSubmit"><@spring.message "flowemptransfer.submitbtnstr"/></el-button></div>
          </div>
        </div>
      </div>
      <div class="hr-label">
        <hr>
      </div>
      <div class="btn-add" @click="add">
        <img src="${base.contextPath}/resources/myflow/emplevechange/images/add.png">
        <span><@spring.message "flowemptransfer.addbtnstr"/></span>
      </div>
      <div class="btn-delete" @click="removeDialogVisible = true">
        <img src="${base.contextPath}/resources/myflow/emplevechange/images/delete.png">
        <span><@spring.message "flowemptransfer.removebtnstr"/></span>
      </div>
      <div class="btn-import" @click="confirmInportDialog =true">
        <img src="${base.contextPath}/resources/myflow/emplevechange/images/import.png">
        <span><@spring.message "flowemptransfer.importbtnstr"/></span>
      </div>
      <div class="btn-export exportBtn" @click="exportExcel">
        <img src="${base.contextPath}/resources/myflow/emplevechange/images/export.png">
        <span><@spring.message "flowemptransfer.exportbtnstr"/></span>
      </div>
      <div class="btn-download-exel" >
        <a href="${base.contextPath}/baseupload/load?url=/20171213/1513147546849.xls" rel="external nofollow"  download='<@spring.message "flowemptransfer.downloadexcelname"/>'><@spring.message "flowemptransfer.downformwork"/></a>
      </div>
    </div>
    <div clas="middle">
      <el-table
          class="tb-edit"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="light"
          style="width: 100%;margin-top: 20px"
          border
          @selection-change="handleSelectionChange"
          @cell-click ="handleCellClick"
          :row-class-name="tableRowClassName"
          >
        <el-table-column
            type="selection"
            class-name="column-bg-color"
            width="55">
        </el-table-column>
        <el-table-column
            label='<@spring.message "flowemptransfer.employeecode"/>'
            width="100"
            show-overflow-tooltip
            class-name="column-bg-color-editable"
            >
          <template scope="scope">
            <div class="input-box">
              <el-input size="small" v-model="scope.row.employeeCode"  @blur="handleInputBlur" @focus="handleInputFocus" :row-index=scope.$index @change="handleEdit">
              </el-input>
            </div>
            <span>{{scope.row.employeeCode}}</span><span><i  @click="selectEmpInfo(scope.$index)" class="el-input__icon el-icon-information"></i></span>
            <div class="hidden-list" style="position: absolute;z-index:10;border: 1px solid #bfbfbf;box-shadow: 0px 0px 2px 0px #aaa;left:0px;">
              <el-table stripe border
                    :data="downListTableData"
                    :row-index=scope.$index
                    tooltip-effect="light"
                    v-loading="empDownListLoading"
                    style="width: 100%;margin-top: 20px"
                    @row-click="empDownListItemClick">
                <el-table-column
                    width="100"
                    prop="employeeCode"
                    label='<@spring.message "flowemptransfer.employeecode"/>'
                ></el-table-column>
                <el-table-column
                    width="90"
                    prop="name"
                    label='<@spring.message "flowemptransfer.name"/>'
                ></el-table-column>
                <el-table-column
                    prop="joinDate"
                    label='<@spring.message "flowemptransfer.joindate"/>'
                    width="110px"
                    fit="true"
                ></el-table-column>
                <el-table-column
                    prop="fullUnitName"
                    show-overflow-tooltip="true"
                    width="160"
                    label='<@spring.message "flowemptransfer.nowdept"/>'
                ></el-table-column>
                <el-table-column
                    prop="positionName"
                    show-overflow-tooltip="true"
                    width="160"
                    label='<@spring.message "flowemptransfer.nowposi"/>'
                ></el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label='<@spring.message "flowemptransfer.name"/>'
            width="80"
            class-name="column-bg-color"
            >
        </el-table-column>
        <el-table-column
            prop="joinDate"
            label='<@spring.message "flowemptransfer.joindate"/>'
            width="100"
            class-name="column-bg-color"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="nowFullDept"
            label='<@spring.message "flowemptransfer.nowdept"/>'
            width="110"
            class-name="column-bg-color"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="nowPosi"
            label='<@spring.message "flowemptransfer.nowposi"/>'
            width="110"
            class-name="column-bg-color"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="transferFullDept"
            label='<@spring.message "flowemptransfer.transferdept"/>'
            width="110"
            class-name="column-bg-color"
            show-overflow-tooltip
            >
        </el-table-column>
        <el-table-column
            label='<@spring.message "flowemptransfer.transferposi"/>'
            width="110"
            class-name="column-bg-color-editable"
            show-overflow-tooltip>
          <template scope="scope">
            <div style="display: inline-block;color:#0c91e5;cursor: pointer" @click="selectTransferPosi(scope.$index)"><span><i class="el-icon-information" ></i></span></div>
            <span >{{scope.row.transferPosi}}</span>
          </template>
        </el-table-column>
        <el-table-column
            label='<@spring.message "flowemptransfer.transfertype"/>'
            width="100"
            class-name="column-bg-color-editable"
            show-overflow-tooltip>
          <template scope="scope">
            <div  style="display: inline-block;color:#0c91e5;cursor: pointer"><span ><i class="el-icon-information" tabindex="1" @blur="handleIconBlur" @click="selectTransferType($event)"></i></span></div>
            <span >{{scope.row.transferType}}</span>
            <div class="transfer-type-list" style="position: absolute;background-color: #ffffff;left:-40px;border: 1px solid #bfbfbf;box-shadow: 0px 0px 2px 0px #aaa">
              <div style="height: 30px;width: 180px;">
                <div style="float: left;height: 100%;width: 5px;background-color: #0c91e5;"></div>
                <div style="float: left;height: 100%;margin-left: 15px;width: 130px;line-height: 30px;font-weight: 700;"><@spring.message "flowemptransfer.transfertype"/></div>
                <div style="float:left;width: 0;height: 0;margin-top: 11px;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top:8px solid #0c91e5;"></div>
              </div>
              <div class="transfer-type-item" v-for="(item,index) in transferPosiType" @click="handleTransferTypeClick($event,scope.$index)">
                <div style="display:inline-block;width: 25%;height: 30px;line-height: 30px;text-align: center;font-size: 12px;color: #ccc;border: 1px solid #f1f1f1;">{{item.codeValue}}</div>
                <div style="display:inline-block;margin-left:-4px;width: 75%;height: 30px;line-height: 30px;text-align: center;border: 1px solid #f1f1f1;font-size: 12px">{{item.codeName}}</div>
                <input type="hidden" :value="index"/>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            label='<@spring.message "flowemptransfer.effectivedate"/>'
            width="130"
            class-name="column-bg-color-editable"
            show-overflow-tooltip>
          <template scope="scope">
            <div class="input-box">
              <el-date-picker
                  v-model="scope.row.effectiveDate"
                  type="date"
                  @blur="handleDataPickerBlur"
                  placeholder='<@spring.message "flowemptransfer.selectdate"/>'>
              </el-date-picker>
            </div>
            <span >{{scope.row.effectiveDate|fomatDate}}</span>
          </template>
        </el-table-column>
        <el-table-column
            label='<@spring.message "flowemptransfer.description"/>'
            class-name="column-bg-color-editable"
            width="100"
            show-overflow-tooltip>
          <template scope="scope">
            <div class="input-box">
              <el-input size="small" @blur="handleInputBlur" v-model="scope.row.description" ></el-input>
            </div>
            <span>{{scope.row.description}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
        :visible.sync="empInfoDialogVisible"
        width="30%"
        @close="closeEmpDialog"
    >
      <div class="row">
        <label class="" style="text-align: center;margin-left: 10%;width: 8%;"><@spring.message "flowemptransfer.employeecode"/></label>
        <el-input style="display: inline-block;width: 30%;" v-model="empDialogParam.employeeCode"></el-input>
        <label  style="text-align: center;width: 8%;"><@spring.message "flowemptransfer.name"/></label>
        <el-input style="display: inline-block;width: 30%;" v-model="empDialogParam.name"></el-input>
      </div>
      <div class="row">
        <el-button style="display:block;width:20%;margin: 30px auto 20px;" type="primary" @click="queryDialogEmpInfo"><@spring.message "flowemptransfer.querybtnstr"/></el-button>
      </div>
      <div class="row" style="margin: 0px 10px">
        <hr style="background-color: #f1f1f1"/>
        <el-table
          :data="empDialogTableData"
          tooltip-effect="light"
          style="width: 100%;margin-top: 20px"
          v-loading="empDialogLoading"
          @row-click="empDialogItemClick">
          <el-table-column
              prop="employeeCode"
              width="80"
              label='<@spring.message "flowemptransfer.employeecode"/>'
          ></el-table-column>
          <el-table-column
              prop="name"
              width="80"
              label='<@spring.message "flowemptransfer.name"/>'
          ></el-table-column>
          <el-table-column
              prop="joinDate"
              label='<@spring.message "flowemptransfer.joindate"/>'
          ></el-table-column>
          <el-table-column
              show-overflow-tooltip="true"
              prop="fullUnitName"
              label='<@spring.message "flowemptransfer.nowdept"/>'
          ></el-table-column>
          <el-table-column
              show-overflow-tooltip="true"
              prop="positionName"
              label='<@spring.message "flowemptransfer.nowposi"/>'
          ></el-table-column>
        </el-table>
      </div>
      <el-pagination
          @current-change="empDialogPageChange"
          :current-page="1"
          :page-count="paginationEmpDialog.pageCount"
          layout="prev, pager, next, jumper">
      </el-pagination>
    </el-dialog>
    <el-dialog
        :visible.sync="newPosiDialogVisible"
        width="30%"
        @close="closePosiDialog"
    >
      <div class="row">
        <label class="" style="text-align: center;margin-left: 10%;width: 8%;" ><@spring.message "flowemptransfer.unit"/></label>
        <el-input style="display: inline-block;width: 30%;" v-model="posiDialogParam.fullUnitName"></el-input>
        <label  style="text-align: center;width: 8%;"><@spring.message "flowemptransfer.position"/></label>
        <el-input style="display: inline-block;width: 30%;"  v-model="posiDialogParam.positionName"></el-input>
      </div>
      <div class="row">
        <el-button style="display:block;width:20%;margin: 30px auto 20px;" type="primary" @click="queryDialogPosi"><@spring.message "flowemptransfer.querybtnstr"/></el-button>
      </div>
      <div class="row" style="margin: 0px 10px">
        <hr style="background-color: #f1f1f1"/>
        <el-table
            tooltip-effect="light"
            style="width: 100%;margin-top: 20px"
            :data="posiDialogTableData"
            v-loading="posiDialogLoading"
            @row-click="posiDialogItemClick">
          <el-table-column
              prop="unitCode"
              width="100"
              label='<@spring.message "flowemptransfer.unitcode"/>'
          ></el-table-column>
          <el-table-column
              prop="fullUnitName"
              show-overflow-tooltip="true"
              header-align="center"
              label='<@spring.message "flowemptransfer.unitName"/>'
          ></el-table-column>
          <el-table-column
              prop="positionCode"
              width="100"
              label='<@spring.message "flowemptransfer.positioncode"/>'
          ></el-table-column>
          <el-table-column
              prop="positionName"
              show-overflow-tooltip="true"
              label='<@spring.message "flowemptransfer.positionname"/>'
          ></el-table-column>
        </el-table>
      </div>
      <el-pagination
          @current-change="posiDialogPageChange"
          :current-page="1"
          :page-count="paginationPosiDialog.pageCount"
          layout="prev, pager, next, jumper">
      </el-pagination>
    </el-dialog>
    <el-dialog id="import-file-dialog" title='<@spring.message "flowemptransfer.importdialogtitle"/>' :visible.sync="importDialogFlag" >
      <div class="header-title">
        <img  src="${base.contextPath}/resources/myflow/emplevechange/images/icon.png">
        <label  ><@spring.message "flowemptransfer.importnote"/></label>
      </div>
      <div class="header-content" style="padding:20px;">
        <span class="content-span">1.<@spring.message "flowemptransfer.importtipone"/></span><br>
        <span class="content-span">2.<@spring.message "flowemptransfer.importtiptwo"/></span><br>
        <span class="content-span">3.<@spring.message "flowemptransfer.importtipthree"/></span><br>
        <span class="content-span" style="color:#14A4FA;"><@spring.message "flowemptransfer.importtipfour"/></span><br>
        <span class="content-span" style="color:#14A4FA;"><@spring.message "flowemptransfer.importtipfive"/></span><br>
      </div>
      <div class="header-title">
        <img  src="${base.contextPath}/resources/myflow/emplevechange/images/icon.png">
        <label  ><@spring.message "flowemptransfer.importfile"/></label>
      </div>
      <div class="footer-content" style="padding: 20px;">
        <form method="POST" id="formID" enctype="multipart/form-data">
          <table width="100%" cellpadding="5px" id="diaTable" >
            <tr>
              <td>
                <span for="uploadFile" class="chose-label" style="margin-right: 10px;"><@spring.message "flowemptransfer.selectfile"/></span>
                <input id="uploadFile" type="file" @change="getFile"  style="display: none">
                <el-input v-model="filename" class="import-input" style="width: 55%;display: inline-block;" disabled></el-input>
                <el-button type="primary" class="lookup-label" @click="fileClick" style="width:85px;"><@spring.message "flowemptransfer.browsethrough"/></el-button>
              </td>
            </tr>
          </table>
        </form>
      </div>
      <div  class="footer-btn" style="text-align: center">
        <el-button class="dialog-import-btn"  @click="submitForm($event)" style="width: 18%;border-color: #4db3ff;color: #4db3ff;"><@spring.message "flowemptransfer.importbtnstr"/></el-button>
      </div>
      <!--<div class="header-title">-->
        <!--<img  src="${base.contextPath}/resources/myflow/emplevechange/images/icon.png">-->
        <!--<label  ><@spring.message "flowemptransfer.importfile"/></label>-->
      <!--</div>-->
      <div class="header-content" style="padding: 20px">
        <span class="content-span">1.<@spring.message "flowemptransfer.importtipsix"/></span><br>
        <span class="content-span">2.<@spring.message "flowemptransfer.importtipseven"/></span><br>
        <span class="content-span">3.<@spring.message "flowemptransfer.importtipeight"/></span><br>
      </div>
    </el-dialog>
    <hhr-dialog
        :visible.sync="warnDialogVisible"
        @confirm="warnDialogVisible = false"
        :text1="warnDialogText"
        confirm-text="<@spring.message 'hap.confirm'/>"
        type="warn"></hhr-dialog>
    <hhr-dialog
        :visible.sync="removeDialogVisible"
        @confirm="remove"
        @cancel="removeDialogVisible = false"
        text1='<@spring.message "flowemptransfer.removedialogtext"/>'
        confirm-text="<@spring.message 'hap.confirm'/>"
        cancel-text="<@spring.message 'hap.cancel'/>"
        type="doubt"></hhr-dialog>
    <hhr-dialog
        :visible.sync="confirmInportDialog"
        @confirm="importExcel"
        @cancel="confirmInportDialog = false"
        text1='<@spring.message "flowemptransfer.importdialogtextone"/>'
        text2='<@spring.message "flowemptransfer.importdialogtexttwo"/>'
        confirm-text="<@spring.message 'hap.confirm'/>"
        cancel-text="<@spring.message 'hap.cancel'/>"
        type="doubt"></hhr-dialog>
    <hhr-dialog
        :visible.sync="submitValiteDialog"
        @confirm="submitValiteDialog = false"
        :text1="submitValiteHint"
        confirm-text="<@spring.message 'hap.confirm'/>"
        type="warn"></hhr-dialog>
    <hhr-dialog
        :visible.sync="confirmSubmitDialog"
        @confirm="submit"
        @cancel="cancelSubmit"
        text1='<@spring.message "flowemptransfer.confirmsubmit"/>'
        confirm-text="<@spring.message 'hap.confirm'/>"
        cancel-text="<@spring.message 'hap.cancel'/>"
        type="doubt"></hhr-dialog>
  </div>
<script type="text/javascript" >
    var inputFocusEle ;
    var emptransfer = new Vue({
        el:"#emptransfer",
        data:{
            instruction:'',
            templateurl:'',
            showInput:true,
            headMemo:'',
            downListTableData:[],
            tableData: [],
            empDialogTableData:[],
            empDialogTableAllData:[],
            posiDialogTableData:[],
            posiDialogTableAllData:[],
            multipleSelection: [],
            showPosiDialog:true,
            newPosiDialogVisible:false,
            empInfoDialogVisible:false,
            confirmInportDialog:false,
            importDialogFlag:false,
            warnDialogVisible:false,
            removeDialogVisible:false,
            submitValiteDialog:false,
            confirmSubmitDialog:false,
            empDownListLoading:false,
            empDialogLoading:false,
            posiDialogLoading:false,
            submitLoading:false,
            submitValiteHint:'',
            warnDialogText:'',
            filename:'',
            file: '',
            transferPosiType:[],
            rowIndex:'',
            dotList:[],
            source:null,
            export:{
                enable: true,
            },
            wopts:{bookType: 'xlsx', bookSST: true, type: 'binary', cellStyles: true},
            paginationEmpDialog:{
                pageCount: 1,
                num: 5,
            },
            paginationPosiDialog:{
                pageCount: 1,
                num: 5,
            },
            pagination:{
                pageCount: 1,
                num: 10,
            },
            empDialogParam:{
                employeeCode:'',
                name:''
            },
            posiDialogParam:{
                fullUnitName:'',
                positionName:''
            }
        },
        mounted:function () {
            axios.get('${base.contextPath}/sap/code?code='+TRANSFER_TYPE)
                .then(function (response) {
                    emptransfer.transferPosiType = response.data.rows;
                })
                .catch(function (error) {
                    console.error(error);
                    emptransfer.$message.error({
                        message: "<@spring.message 'hhr.axioserror'/>",
                        duration: 2000
                    });
                });
            axios.get('${base.contextPath}/hhr/myflow/download/queryexcelurl?templeName='+TEMPLATE_NAME)
                .then(function (response) {
                    console.info(response);
                    if(response.data.success){
                        emptransfer.templateurl= response.data.message;
                        console.info(emptransfer.templateurl);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                    emptransfer.$message.error({
                        message: "<@spring.message 'hhr.axioserror'/>",
                        duration: 2000
                    });
                });
        },
        methods:{
            //初始化时候将index 加入到row中
            tableRowClassName:function(row, index) {
                //把每一行的索引放进row
                row.index = index
            },
            //全选/全不选 事件
            toggleSelection:function(rows) {
//                if (rows) {
//                    rows.forEach(row => {
//                        this.$refs.multipleTable.toggleRowSelection(row);
//                    });
//                } else {
//                    this.$refs.multipleTable.clearSelection();
//                }
                if (rows) {
                    rows.forEach(function (row) {
                        undefined.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    undefined.$refs.multipleTable.clearSelection();
                }
            },
            //勾选改变触发事件
            handleSelectionChange:function(val) {
                this.multipleSelection = val;
            },
            //新增
            add:function(){
                emptransfer.tableData.push({
                    employeeCode:'',
                    name: '',
                    joinDate:'',
                    nowDept:'',
                    nowPosi:'',
                    transferDept:'',
                    transferPosi:'',
                    transferType:'',
                    effectiveDate:'',
                    description:''
                });
//                emptransfer.tablePageChange(1)
            },
            //删除
            remove:function(){
                emptransfer.removeDialogVisible = false;
//                emptransfer.tableData =this.tableData.filter(t => !emptransfer.multipleSelection.some(s => s.index === t.index))
                emptransfer.tableData = emptransfer.tableData.filter(function (t) {
                    return !emptransfer.multipleSelection.some(function (s) {
                        return s.index === t.index;
                    });
                });
        emptransfer.multipleSelection =[];
            },
            //提交前的数据校验
            checkSubmit:function () {
//                emptransfer.submitLoading = true;
                var myTable = emptransfer.tableData;
                var dtoList = [];
                var _myJson = {};
                var message = '';
                if(myTable.length==0){
                    message = infoTipOne;
                }else{
                    for(var i=0;i<myTable.length;i++){
                        var dto = {};
                        if(myTable[i].employeeCode==''|myTable[i].employeeCode==null){
                            message =  tables + (i+1) + empCodeNotEmpty;
                            break;
                        }else{
                            dto["employeeCode"] = myTable[i].employeeCode;
                        }
                        if(myTable[i].transferDeptCode==''|myTable[i].transferDeptCode==null){
                            message = tables + (i+1) + transferDeptNotEmpty;
                            break;
                        }else{
                            dto["newUnitCode"] = myTable[i].transferDeptCode;
                        }
                        if(myTable[i].transferPosiCode==''|myTable[i].transferPosiCode==null){
                            message = tables + (i+1) + transferPosiNotEmpty;
                            break;
                        }else{
                            dto["newPositionCode"] = myTable[i].transferPosiCode;
                        }
                        if(myTable[i].transferTypeCode==''|myTable[i].transferTypeCode==null){
                            message = tables + (i+1) + transferTypeNotEmpty;
                            break;
                        }else{
                            dto["changeType"] = myTable[i].transferTypeCode;
                        }
                        if(myTable[i].effectiveDate==''|myTable[i].effectiveDate==null){
                            message = tables + (i+1) + effectiveDateNotEmpty;
                            break;
                        }else{
                            dto["validDate"] = myTable[i].effectiveDate;
                        }
                        dto["name"] = myTable[i].name;
                        dto["originalUnitCode"] = myTable[i].nowDeptCode;
                        dto["originalPositionCode"] = myTable[i].nowPosiCode;
                        dto["originalUnitName"] =myTable[i].nowDept;
                        dto["originalPositionName"] =myTable[i].nowPosi;
                        dto["newUnitName"] =myTable[i].transferDept;
                        dto["newPositionName"] =myTable[i].transferPosi;
                        dto["joinDate"] =myTable[i].joinDate;
                        dto["changeTypeText"] =myTable[i].transferType;
                        dto["memo"] =myTable[i].description;
                        dto["headMemo"] = emptransfer.headMemo;
                        dtoList.push(dto);
                    }
                }
                if(message == ''){
                    emptransfer.confirmSubmitDialog = true;
                    emptransfer.dtoList = dtoList;
                }else{
                    emptransfer.submitValiteHint = message;
                    emptransfer.submitValiteDialog = true;
                }
            },
      //提交
            submit:function () {
                emptransfer.confirmSubmitDialog = false;
                emptransfer.submitLoading = true;
                var configsubmit = {
                    method: 'post',
                    url: "${base.contextPath}/hhr/flow/emptransfer/apply/submit",
                    data: emptransfer.dtoList,
                    headers: {'X-Requested-With': 'XMLHttpRequest','X-CSRF-TOKEN':'${_csrf.token}'},
                    requestHeader:{'Content-Type':'application/json'}
                }
                axios(configsubmit).then(function (response) {
                    if(response.data.success){
                        emptransfer.tableData = [];
                        emptransfer.headMemo = '';
                        emptransfer.submitLoading = false;
                        var url = "myflow/base/submitsuccess.html";
                        window.parent.window.openTab(url,"<@spring.message 'employeechange.submitsuccess'/>");
                    }else{
                        emptransfer.submitLoading = false;
                        console.error(response.data.message);
                        emptransfer.$message.error({
                            message: response.data.message,
                            duration: 2000
                        });
                    }
                }).catch(function (error) {
                    emptransfer.submitLoading = false;
                    console.error(error);
                    emptransfer.$message.error({
                        message: "<@spring.message 'hhr.axioserror'/>",
                        duration: 2000
                    });
                });
            },
      //取消提交
            cancelSubmit:function () {
                emptransfer.confirmSubmitDialog = false;
                emptransfer.dtoList = [];
            },
            //input获取焦点时讲input元素提出来
            handleInputFocus:function(event){
                inputFocusEle = event.target;
            },
            //input框编辑时触发的方法，动态弹出员工查询下拉列表
            handleEdit:function(value) {
                var _inputNode = inputFocusEle;
                if(emptransfer.getParentElement(_inputNode,1)!==0){
                    var _parentNode = emptransfer.getParentElement(_inputNode,1);
                    var index = _parentNode.getAttribute('row-index');
                    emptransfer.tableData[index].name='';
                    emptransfer.tableData[index].joinDate='';
                    emptransfer.tableData[index].nowDept='';
                    emptransfer.tableData[index].nowFullDept='';
                    emptransfer.tableData[index].nowDeptCode='';
                    emptransfer.tableData[index].nowPosi='';
                    emptransfer.tableData[index].nowPosiCode='';
                }
                if(emptransfer.getParentElement(_inputNode,4)!==0){
                    var _cellNode = emptransfer.getParentElement(_inputNode,4);
                    emptransfer.addClass(_cellNode,'current-cell2')
                    emptransfer.queryPreEmpInfo(_inputNode.value);
                }
            },
            //查询 下拉中的 前10条员工信息
            queryPreEmpInfo:_.debounce(function (empCode) {
                emptransfer.empDownListLoading = true;
                axios("${base.contextPath}/hhr/myflow/emptransfer/queryPreEmpUnitPosi?employeeCode="+empCode)
                    .then(function (response) {
                        emptransfer.empDownListLoading = false;
                        if(typeof(response.data.rows)!=="undefined"){
                            emptransfer.downListTableData = response.data.rows;
//                            emptransfer.downListTableData.forEach(row=>{
//                                row["employeeCode"] = row["employeeCode"].replace(/\b(0{1,5})/gi,"");
//                                if(row["joinDate"]!==null){
//                                    row["joinDate"] = (row["joinDate"].split(' '))[0];
//                                }
//                            })
                            emptransfer.downListTableData.forEach(function (row) {
                                row["employeeCode"] = row["employeeCode"].replace(/\b(0{1,5})/gi, "");
                                if (row["joinDate"] !== null) {
                                    row["joinDate"] = row["joinDate"].split(' ')[0];
                                }
                            });
                        }
                    })
                    .catch(function (error) {
                        emptransfer.empDownListLoading = false;
                        console.error(error);
                        emptransfer.$message.error({
                            message: "<@spring.message 'hhr.axioserror'/>",
                            duration: 2000
                        });
                    });
            },500),
            //员工查询下拉的表格行点击事件
            empDownListItemClick:function(row, event, column){ //编辑 工号 时 动态获取 员工信息的table 的row-click
                var _tr = event.target;
                if(emptransfer.getParentElement(_tr,6)!==0){
                    var _getRowIndexEle = emptransfer.getParentElement(_tr,6);
                    var index = _getRowIndexEle.getAttribute('row-index');
                    if(index === null){
                        _getRowIndexEle = _getRowIndexEle.childNodes[0];
                        index = _getRowIndexEle.getAttribute('row-index');
                    }
                    if( emptransfer.getParentElement(_getRowIndexEle,3)!==0){
                        var _boxEle = emptransfer.getParentElement(_getRowIndexEle,3);
                        emptransfer.tableData[index].employeeCode=row.employeeCode;
                        emptransfer.tableData[index].name=row.name;
                        emptransfer.tableData[index].joinDate=row.joinDate;
                        emptransfer.tableData[index].nowDept=row.unitName;
                        emptransfer.tableData[index].nowFullDept=row.fullUnitName;
                        emptransfer.tableData[index].nowDeptCode=row.unitCode;
                        emptransfer.tableData[index].nowPosi=row.positionName;
                        emptransfer.tableData[index].nowPosiCode=row.positionCode;
                        emptransfer.removeClass(_boxEle,'current-cell');
                    }
                }
            },
            //input框失去焦点事件
            handleInputBlur:function(event){   //当 input 失去焦点 时,input 切换为 span，并且让下方 表格消失（注意，与点击表格事件的执行顺序）
                var _event = event;
                setTimeout(function(){
                    var _inputNode = _event.target;
                    if(emptransfer.getParentElement(_inputNode,4)!==0){
                        var _cellNode = emptransfer.getParentElement(_inputNode,4);
                        emptransfer.removeClass(_cellNode,'current-cell');
                        emptransfer.removeClass(_cellNode,'current-cell2');
                    }
                },200);
            },
            //点击弹出 员工查询Dialog
            selectEmpInfo:function(index){
                emptransfer.rowIndex=index;
                emptransfer.empInfoDialogVisible = true;
//                emptransfer.queryDialogEmpInfo();
            },
            //查询 Dialog中的员工信息
            queryDialogEmpInfo:function () {
                emptransfer.paginationEmpDialog.pageCount = 1;
                emptransfer.empDialogLoading = true;
                var empQueryParamJson = emptransfer.empDialogParam;
                var CancelToken = axios.CancelToken;
                var source = CancelToken.source();
                emptransfer.source = source;
                var configqueryemp = {
                    method: 'post',
                    url: "${base.contextPath}/hhr/myflow/emptransfer/queryEmpUnitPosi",
                    data: empQueryParamJson,
                    headers: {'X-Requested-With': 'XMLHttpRequest','X-CSRF-TOKEN':_token},
                    requestHeader:{'Content-Type':'application/json'},
                    cancelToken:source.token
                }
                axios(configqueryemp).then(function (response) {
                    if(response.data.success){
                        emptransfer.empDialogLoading = false;
                        emptransfer.empDialogTableAllData = response.data.rows;
//                        emptransfer.empDialogTableAllData.forEach(row=>{
//                            row["employeeCode"] = row["employeeCode"].replace(/\b(0{1,5})/gi,"");
//                            if( row["joinDate"]!= null){
//                                row["joinDate"] = (row["joinDate"].split(" "))[0];
//                            }
//                        })
                        emptransfer.empDialogTableAllData.forEach(function (row) {
                            row["employeeCode"] = row["employeeCode"].replace(/\b(0{1,5})/gi, "");
                            if (row["joinDate"] != null) {
                                row["joinDate"] = row["joinDate"].split(" ")[0];
                            }
                        });
                        emptransfer.empDialogPageChange(1);
                    }else{
                        emptransfer.empDialogLoading = false;
                        console.error(response.data.message);
                        emptransfer.$message.error({
                            message: response.data.message,
                            duration: 2000
                        });
                    }
                }).catch(function (error) {
                    emptransfer.empDialogLoading = false;
                    console.error(error);
//                    emptransfer.$message.error({
//                        message: "<@spring.message 'hhr.axioserror'/>",
//                        duration: 2000
//                    });
                });
            },
            //员工信息Dialog分页方法
            empDialogPageChange: function (currentPage) {
                var total = emptransfer.empDialogTableAllData.length;
                emptransfer.paginationEmpDialog.pageCount = Math.ceil(total/emptransfer.paginationEmpDialog.num);
                var start = (currentPage-1)*emptransfer.paginationEmpDialog.num;
                emptransfer.empDialogTableData = [];
                for(var i=start; i<start+emptransfer.paginationEmpDialog.num && i<total; i++){
                    emptransfer.empDialogTableData[i-start] = emptransfer.empDialogTableAllData[i];
                }
            },
            //员工查询Dialog的表格行点击事件
            empDialogItemClick:function(row, event, column){
                var index = emptransfer.rowIndex;
                emptransfer.tableData[index].employeeCode = row.employeeCode;
                emptransfer.tableData[index].name = row.name;
                emptransfer.tableData[index].joinDate = row.joinDate;
                emptransfer.tableData[index].nowFullDept = row.fullUnitName;
                emptransfer.tableData[index].nowDept = row.unitName;
                emptransfer.tableData[index].nowDeptCode = row.unitCode;
                emptransfer.tableData[index].nowPosi = row.positionName;
                emptransfer.tableData[index].nowPosiCode = row.positionCode;
                emptransfer.empInfoDialogVisible =false;
            },
            //员工查询Dialog框关闭的回调
            closeEmpDialog:function () {
                emptransfer.source.cancel("操作被用户取消");
                emptransfer.paginationEmpDialog.pageCount=1;
                emptransfer.paginationEmpDialog.num=5;
                emptransfer.empDialogParam.employeeCode='';
                emptransfer.empDialogParam.name='';
                emptransfer.empDialogTableAllData=[];
                emptransfer.empDialogTableData=[];
            },
            //点击弹出 新岗位查询Dialog
            selectTransferPosi:function(index){  //点击事件，弹窗：现岗位 选择LOV
                emptransfer.rowIndex=index;
                emptransfer.newPosiDialogVisible = true;
//                emptransfer.queryDialogPosi();
            },
            //查询 Dialog中的新岗位信息
            queryDialogPosi:function () {
                emptransfer.paginationPosiDialog.pageCount = 1;
                emptransfer.posiDialogLoading = true;
                var posiQueryParamJson = emptransfer.posiDialogParam;
                var CancelToken = axios.CancelToken;
                var source = CancelToken.source();
                emptransfer.source = source;
                var configqueryemp = {
                    method: 'post',
                    url: "${base.contextPath}/hhr/myflow/emptransfer/queryTransferPosi",
                    data: posiQueryParamJson,
                    headers: {'X-Requested-With': 'XMLHttpRequest','X-CSRF-TOKEN':_token},
                    requestHeader:{'Content-Type':'application/json'},
          cancelToken:source.token
                }
                axios(configqueryemp).then(function (response) {
                    if(response.data.success){
                        emptransfer.posiDialogLoading = false;
                        emptransfer.posiDialogTableAllData = response.data.rows;
                        emptransfer.posiDialogPageChange(1);
                    }else{
                        emptransfer.posiDialogLoading = false;
                        console.error(response.data.message);
                        emptransfer.$message.error({
                            message: response.data.message,
                            duration: 2000
                        });
                    }
                }).catch(function (error) {
                    emptransfer.posiDialogLoading = false;
                    console.error(error);
//                    emptransfer.$message.error({
//                        message: "<@spring.message 'hhr.axioserror'/>",
//                        duration: 2000
//                    });
                });
            },
            //新岗位Dialog分页方法
            posiDialogPageChange: function (currentPage) {
                var total = emptransfer.posiDialogTableAllData.length;
                emptransfer.paginationPosiDialog.pageCount = Math.ceil(total/emptransfer.paginationPosiDialog.num);
                var start = (currentPage-1)*emptransfer.paginationPosiDialog.num;
                emptransfer.posiDialogTableData = [];
                for(var i=start; i<start+emptransfer.paginationPosiDialog.num && i<total; i++){
                    emptransfer.posiDialogTableData[i-start] = emptransfer.posiDialogTableAllData[i];
                }
            },
            //新岗位Dialog的表格行点击事件
            posiDialogItemClick:function(row, event, column){
                var index = emptransfer.rowIndex;
                emptransfer.tableData[index].transferDept = row.unitName;
                emptransfer.tableData[index].transferFullDept = row.fullUnitName;
                emptransfer.tableData[index].transferDeptCode = row.unitCode;
                emptransfer.tableData[index].transferPosi = row.positionName;
                emptransfer.tableData[index].transferPosiCode = row.positionCode;
                emptransfer.newPosiDialogVisible =false;
            },
            //新岗位Dialog框关闭的回调
            closePosiDialog:function () {
                emptransfer.source.cancel("操作被用户取消");
                emptransfer.paginationPosiDialog.pageCount=1;
                emptransfer.paginationPosiDialog.num=5;
                emptransfer.posiDialogParam.employeeCode='';
                emptransfer.posiDialogParam.name='';
                emptransfer.posiDialogTableAllData=[];
                emptransfer.posiDialogTableData=[];
            },
            //点击弹出 调整类型下拉列表
            selectTransferType:function(event){ //点击事件， 下方出现下拉列表： 调动类型
                var _i = event.target;
                _i.focus();
                if( emptransfer.getParentElement(_i,4)!==0){
                    var _boxEle = emptransfer.getParentElement(_i,4);
                    emptransfer.addClass(_boxEle,'current-cell1');
                }
            },
            //调整类型下拉列表的行点击事件
            handleTransferTypeClick:function(event,index){
                var _index;
                var _click = event.target;
                var _item = _click.parentNode;
                var _nextNode = _item.childNodes[4];
                if(_nextNode.tagName === 'INPUT'){
                    _index = _nextNode.value;
                }else{
                    var _inputNode =_click.childNodes[4];
                    _index = _inputNode.value;
                }
                emptransfer.tableData[index].transferType = emptransfer.transferPosiType[_index].codeName;
                emptransfer.tableData[index].transferTypeCode = emptransfer.transferPosiType[_index].codeValue;
                if(emptransfer.getParentElement(_item,3)!==0){
                    var _boxEle = emptransfer.getParentElement(_item,3);
                    emptransfer.removeClass(_boxEle,'current-cell1');
                }
            },
            handleDelete:function(index, row) {
            },
            //单元格点击后，显示input，并让input 获取焦点
            handleCellClick:function(row, column, cell, event){
                emptransfer.addClass(cell,'current-cell');
                if(emptransfer.getChildElement(cell,3) !== 0){
                    var _inputParentNode =emptransfer.getChildElement(cell,3);
                    if(_inputParentNode.hasChildNodes()&& _inputParentNode.childNodes.length > 2) {
                        var _inputNode = _inputParentNode.childNodes[2];
                        if(_inputNode.tagName === 'INPUT'){
                            _inputNode.focus();
                        }
                    }
                }
            },
            //调整类型 的Icon 的失去焦点事件
            handleIconBlur:function(event){
                var _event = event;
                setTimeout(function(){
                    var _iNode = _event.target;
                    if(emptransfer.getParentElement(_iNode,4)!==0){
                        var _cellNode = emptransfer.getParentElement(_iNode,4);
                        emptransfer.removeClass(_cellNode,'current-cell1');
                    }
                },200);
            },
            //日期组件失去焦点事件
            handleDataPickerBlur:function(element){
                setTimeout(function(){
                    var _dataPickerNode = element.$el;
                    if(emptransfer.getParentElement(_dataPickerNode,3)!==0){
                        var _cellNode = emptransfer.getParentElement(_dataPickerNode,3);
                        emptransfer.removeClass(_cellNode,'current-cell');
                    }
                },200);
            },
            //获取trElement num 层父元素
            getParentElement:function(trElement,num){
                var currentNode = trElement;
                for(var i =0;i < num;i++ ){
                    if(currentNode !== null){
                        currentNode = currentNode.parentNode;
                    }else{
                        return 0
                    }
                }
                return currentNode;
            },
            //获取trElement num 层子元素
            getChildElement:function(trElement,num){
                var currentNode = trElement;
                for(var i =0;i < num;i++ ){
                    if(currentNode.hasChildNodes()){
                        currentNode = currentNode.childNodes[0];
                    }else{
                        return 0;
                    }
                }
                return currentNode;
            },
            //获取 当前事件  的 单元格元素
            getCell:function(event){
                var cell = event.target;
                while (cell && cell.tagName.toUpperCase() !== 'HTML') {
                    if (cell.tagName.toUpperCase() === 'TD') {
                        return cell;
                    }
                    cell = cell.parentNode;
                }
                return null;
            },
            //给elements 添加 类cName
            addClass:function( elements,cName ){
                if( !emptransfer.hasClass( elements,cName ) ){
                    elements.className += " " + cName;
                };
            },
            //移除elements 类cName
            removeClass:function( elements,cName ) {
                if (emptransfer.hasClass(elements, cName)) {
                    elements.className = elements.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), " "); // replace方法是替换
                };
            },
            //判断elements 是否有类cName
            hasClass:function( elements,cName ){
                return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); // ( \\s|^ ) 判断前面是否有空格 （\\s | $ ）判断后面是否有空格 两个感叹号为转换为布尔值 以方便做判断
            },
            //弹出 Dialog 提示导入excel确认信息
            importExcel:function(){
                emptransfer.tableData = [];
                emptransfer.confirmInportDialog=false;
                emptransfer.importDialogFlag=true;
            },
            //导入excel到后台，解析校验后，再返回前台显示
            submitForm:function(event) {
                event.preventDefault();
                var formData = new FormData();
                if(this.file==""){
                    emptransfer.warnDialogText='<@spring.message "emplevelchange.selectfile"/>';
                    emptransfer.warnDialogVisible=true;
                    return;
                }
                formData.append('file', this.file);
                var configsave = {
                    method: 'post',
                    url: "${base.contextPath}/api/public/hhr/myflow/emptransfer/importExcel",
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: { 'Content-Type': 'multipart/form-data'},
                }
        emptransfer.submitLoading = true;
                axios(configsave).then(function (response) {
                    if(response.data.success){
                        if(typeof(response.data.rows)!=="undefined"){
                            emptransfer.tableData = response.data.rows
//                            emptransfer.tableData.forEach(row=>{
//                                row["joinDate"] = row["joinDate"].split(" ")[0];
//                            })
                            emptransfer.tableData.forEach(function (row) {
                                row["joinDate"] = row["joinDate"].split(" ")[0];
                                row["effectiveDate"] = row["effectiveDate"].split(" ")[0];
                            });
                            emptransfer.importDialogFlag=false;
                        }
                    }else{
                        emptransfer.warnDialogText = response.data.message;
                        emptransfer.warnDialogVisible = true;
                    }
                    emptransfer.submitLoading = false;
                }).catch(function (error) {
                    emptransfer.warnDialogText = response.data.message;
                    emptransfer.submitLoading = false;
                    emptransfer.warnDialogVisible = true;
                });
            },
            //点击“浏览”获取要上传的文件
            fileClick:function() {
                document.getElementById('uploadFile').click()
            },
            //获取上传的文件和文件名
            getFile:function(event) {
                this.file = event.target.files[0];
                this.filename=this.file.name;
            },
            //导出excel校验
            exportExcel:function () {
                console.log('---------------211---------------')
                if(emptransfer.tableData.length === 0){
                    emptransfer.$message.error("没有数据可以导出！");
                    return;
                }
                if (emptransfer.export.enable) {
                    emptransfer.export.enable = false;
                    document.getElementsByClassName("exportBtn")[0].style.cursor = "wait";
                    document.getElementsByClassName("exportBtn")[0].style["background-color"] = "#969696";
                    emptransfer.exportExelAction(emptransfer.changeExelData(emptransfer.tableData));
                    window.setTimeout(exportEnable, 3000);
                }
                function exportEnable() {
                    emptransfer.export.enable = true;
                    document.getElementsByClassName("exportBtn")[0].style.cursor = "pointer";
                    document.getElementsByClassName("exportBtn")[0].style["background-color"] = "#FFFFFF";
                }
            },
            //导出execl动作
            exportExelAction:function(json,type){
                var tmpdata = json[0];
                json.unshift({});
                var keyMap = []; //获取keys
                for (var k in tmpdata) {
                    keyMap.push(k);
                    json[0][k] = k;
                }
                var tmpdata = []; //用来保存转换好的json
                var _tmp = json.map(function (v, i) {
                    return keyMap.map(function (k, j) {
                        return Object.assign({}, {
                            v: v[k],
                            position: (j > 25 ? emptransfer.getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
                        });
                    });
                }).reduce(function (prev, next) {
                    return prev.concat(next);
                }).forEach(function (v, i) {
                    return tmpdata[v.position] = {
                        v: v.v
                    };
                });
                var outputPos = Object.keys(tmpdata); //设置区域,比如表格从A1到D10
                var index = ["A1", "B1", "C1", "D1", "E1", "F1", "G1", "H1", "I1", "J1", "K1", "L1", "M1", "N1"];
                index.forEach(function (i) {
                    tmpdata[i].s = {
                        font: {
                            bold: true,
                            color: {
                                rgb: "000000"
                            }
                        },
                        fill: {
                            bgColor: {
                                rgb: "CCCCCC"
                            },
                            fgColor: {
                                rgb: "CCCCCC"
                            }
                        },
                        alignment: {
                            horizontal: "center"
                        }
                    };
                });
//设置列宽
                tmpdata["!cols"] = [{
                    wpx: '60'
                }, {
                    wpx: '75'
                }, {
                    wpx: '90'
                }, {
                    wpx: '100'
                }, {
                    wpx: '160'
                }, {
                    wpx: '100'
                }, {
                    wpx: '180'
                }, {
                    wpx: '120'
                }, {
                    wpx: '160'
                }, {
                    wpx: '120'
                }, {
                    wpx: '180'
                }, {
                    wpx: '100'
                }, {
                    wpx: '90'
                }, {
                    wpx: '180'
                }];
                var tmpWB = {
                    SheetNames: ['mySheet'], //保存的表标题
                    Sheets: {
                        'mySheet': Object.assign({}, tmpdata, //内容
                            {
                                '!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] //设置填充区域
                            })
                    }
                };
                var tmpDown = new Blob([emptransfer.s2ab(XLSX.write(tmpWB, { bookType: type == undefined ? 'xlsx' : type, bookSST: false, type: 'binary' //这里的数据是用来定义导出的格式类型
                }))], {
                    type: ""
                }); //创建二进制对象写入转换
                emptransfer.saveAs(tmpDown, exportExcelName + '.' + (emptransfer.wopts.bookType == "biff2" ? "xls" : emptransfer.wopts.bookType));
            },
            //表头数据的处理
            changeExelData:function (json) {
                var _newJsonArray = [];
                json.map(function (v, i) {
                    var _newJson = {};
                    _newJson[employeeCodeStr] = v["employeeCode"]; //工号
                    _newJson[nameStr] = v["name"]; //姓名
                    _newJson[joinDateStr] = v["joinDate"]; //入职日期
                    _newJson[nowDeptCodeStr] = v["nowDeptCode"]; //现部门编码
                    _newJson[nowDeptStr] = v["nowFullDept"]; //现部门文本
                    _newJson[nowPosiCodeStr] = v["nowPosiCode"]; //现岗位编码
                    _newJson[nowPosiStr] = v["nowPosi"]; //现岗位文本
                    _newJson[transferDepCodeStr] = v["transferDeptCode"]; //调动后部门编码
                    _newJson[transferDepStr] = v["transferFullDept"]; //调动后部门文本
                    _newJson[transferPosiCodeStr] = v["transferPosiCode"]; //调动后岗位编码
                    _newJson[transferPosiStr] = v["transferPosi"]; //调动后岗位文本
                    _newJson[transferTypeStr] = v["transferTypeCode"] + ' ' + v["transferType"]; //调动类型编码+文本
                    _newJson[effectiveDateStr] = emptransfer.dateFormat(v["effectiveDate"]); //生效日期
                    _newJson[descriptionStr] = v["description"]; //备注
                    _newJsonArray.push(_newJson);
                });
                return _newJsonArray;
            },
            // 将指定的自然数转换为26进制表示。映射关系：[0-25] -> [A-Z]。
            getCharCol:function(n){
                var temCol = '',
                    s = '',
                    m = 0
                while (n > 0) {
                    m = n % 26 + 1
                    s = String.fromCharCode(m + 64) + s
                    n = (n - m) / 26
                }
                return s
            },
      //模拟a标签点击，下载表格文件（兼容IE和Edge）
            saveAs:function( obj, fileName) {
                if('msSaveOrOpenBlob' in navigator){
                    // Microsoft Edge and Microsoft Internet Explorer 10-11
                    window.navigator.msSaveOrOpenBlob(obj, fileName);
                }else{
                    // standard code for Google Chrome, Mozilla Firefox etc
                    var evt = document.createEvent('MouseEvents');
                    evt.initEvent('click', true, true);
                    var t = document.createElement("a");
                    t.setAttribute("download", fileName || "下载");
                    var myurl =   URL.createObjectURL(obj);
                    t.setAttribute("href", myurl);
                    t.dispatchEvent(evt)
                    setTimeout(function () {
                        URL.revokeObjectURL(obj);
                    }, 100);
                }
            },
            //字符串转字符流
            s2ab:function(s){
                var buf = new ArrayBuffer(s.length);
                var view = new Uint8Array(buf);
                for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
                return buf;
            },
            formatTen: function (num) {
                return num > 9 ? (num + "") : ("0" + num);
            },
            dateFormat:function (value) {
                if (!value) { return ''}
                var date = new Date(value);
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();
                var hour = date.getHours();
                var minute = date.getMinutes();
                var second = date.getSeconds();
                return year + "-" + emptransfer.formatTen(month) + "-" +emptransfer.formatTen(day);
            }
        }
    });
    //过滤器
    Vue.filter('fomatDate', function(value) {
        if (!value) { return ''}
        var date = new Date(value);
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        return year + "-" + emptransfer.formatTen(month) + "-" +emptransfer.formatTen(day);
    })
</script>
</body>
</html>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。