<style>
  .departmentTreeStyleCont {
    padding-top: 20px;
    display: flex;
    height: 100%;
  }

  .departmentTreeStyleCont .departmentTreeStyle {
    background: #fff;
    padding: 20px;
    flex: 0 1 400px;
    min-height: 800px;
  }

  .departmentTreeStyleCont .departmentTreeStyle>p {
    font-size: 14px;
    margin-bottom: 15px;
    color: #333;
    font-weight: bold;
    height: 14px;
    line-height: 14px;
    border-left: 3px solid #E95252;
    text-indent: 20px;
  }

  .departmentTreeStyleCont .departmentTreeStyle .spanIcon {
    padding-left: 20px;
    display: none
  }

  .departmentTreeStyleCont .departmentTreeStyle .el-tree-node__content {
    height: 32px;
    line-height: 32px;
    font-size: 12px
  }

  .TreeSpan img {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    vertical-align: sub;
    margin-right: 3px;
  }

  .departmentTreeStyleCont .departmentTreeStyle .el-tree-node__content:hover .spanIcon {
    display: inline-block
  }

  .departmentTreeStyleCont .departmentTreeStyle .el-tree-node__content:hover .spanIcon i {
    font-size: 14px !important;
    color: #999;
    margin-right: 2px;
  }

  .departmentTreeStyleCont .departmentTreeStyle .el-tree-node__content:hover .spanIcon i:hover {
    color: #E95252;
  }

  .departmentTreeStyleCont .departmentTreeLayer>p {
    font-size: 14px;
    margin-bottom: 15px;
    color: #333;
    font-weight: bold;
    height: 14px;
    line-height: 14px;
    border-left: 3px solid #E95252;
    text-indent: 20px;
  }

  .departmentTreeStyleCont .departmentTreeLayer {
    background: #fff;
    min-height: 300px;
    padding: 20px;
    margin-left: 20px;
    flex: auto
  }

  .departmentTreeStyleCont .el-date-editor.el-input,
  .departmentTreeStyleCont .el-date-editor.el-input__inner {
    width: auto !important;
  }

</style>
<template>
  <div class="flexOne">
    <div class="query-box" v-show="!isTree">
      <ul>
        <li>
          <span><em>{{$t('admin.admin_company')}}</em>
            <el-select filterable :disabled="msg.IsParentCompany==2" v-model='msg.RB_Branch_Id'
              :placeholder="$t('pub.unlimitedSel')">
              <el-option :label="$t('pub.unlimitedSel')" :value='-1'></el-option>
              <el-option v-for='item in companyList' :label='item.BName' :value='item.Id' :key="item.Id">
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span><em>{{$t('admin.admin_parentdepartment')}}</em>
            <el-select filterable clearable v-model='msg.ParentId' :placeholder="$t('pub.unlimitedSel')">
              <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
              <el-option v-for='item in departmentList' :label='item.DepartmentName' :value='item.DepartmentID'
                :key="item.DepartmentID">
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span><em>{{$t('admin.admin_departmentLevel')}}</em>
            <el-select v-model="msg.Tier">
              <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
              <el-option v-for='item in tierList' :label='item.name' :value='item.id' :key="item.id"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span><em>{{$t('admin.admin_department')}} </em>
            <el-input v-model='msg.DepartmentName' @keyup.enter.native="getList" :placeholder="$t('pub.pleaseImport')">
            </el-input>
          </span>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
            @click="resetPageIndex(),getList()" />
          <input type="button" @click="outerVisible = true,getCompany()" class="normalBtn" :value="$t('pub.addBtn')" />
          <input type="button" class="normalBtn" :value="$t('adm.adm_sxjg')" @click="isTree=true" />
        </li>
      </ul>
    </div>

    <div v-show="isTree" class="departmentTreeStyleCont">
      <div class="departmentTreeStyle">
        <p>
          {{$t('adm.adm_jggl')}}
          <input type="button" class="normalBtn fr"
            style="font-size: 12px; width: 86px; height: 24px; padding: 0 2px; margin-top: -5px;"
            :value="$t('adm.adm_fhlb')" @click="isTree=false" />
        </p>
        <el-tree :data="allList" node-key="id" :props="defaultProps" @node-drag-start="handleDragStart"
          @node-drag-enter="handleDragEnter" @node-drag-leave="handleDragLeave" @node-drag-over="handleDragOver"
          @node-drag-end="handleDragEnd" @node-drop="handleDrop" draggable :allow-drop="allowDrop"
          :allow-drag="allowDrag">
          <span class="TreeSpan" slot-scope="{ node, data }">
            <i v-show="data.DType==1" class="iconfont icon-bumen"></i>
            <img v-show="data.DType==2" v-if="!data.Images" src="../../assets/img/default_head_img.jpg">
            <img v-show="data.DType==2" v-else :src="data.Images" :onerror='defaultImg' />
            {{node.label}}<span v-show="data.DType==2"
              style="background: #E95252; font-size: 12px; height: 16px; line-height: 16px; color:#fff; padding: 0 4px; border-radius: 4px; display: inline-block; margin-left: 5px;">{{data.PostName}}</span>
            <span class="spanIcon" v-if="data.DType==1">
              <el-tooltip class="item" effect="dark" :content="$t('adm.adm_addzibumen')" placement="top">
                <i class="iconfont icon-tianjia"
                  @click="treeLayerShow=true;treeLayerShowUser=false,resetForm('addMsg'),addTreeData(data)"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" :content="$t('adm.adm_addyuangong')" placement="top">
                <i class="iconfont icon-tianjiayuangong"
                  @click="treeLayerShow=false,treeLayerShowUser=true,resetForm('addMsg1'),addTreeUerData(data)"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top">
                <i class="iconfont icon-xiugai"
                  @click="treeLayerShow=true,treeLayerShowUser=false,treeLayerTitle='部门信息编辑',resetForm('addMsg'),updateData(data.DepartmentID)"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top">
                <i class="iconfont icon-shanchu" @click='deleteDeparment(data.DepartmentID)'></i>
              </el-tooltip>
            </span>
            <span class="spanIcon" v-if="data.DType==2">
              <el-tooltip class="item" effect="dark" :content="$t('adm.adm_edityuangong')" placement="top">
                <i class="iconfont icon-xiugai"
                  @click="treeLayerShow=false,treeLayerShowUser=true,treeLayerUserTitle='修改员工信息',resetForm('addMsg1'),updateDataUser(data)"></i>
              </el-tooltip>
            </span>
          </span>
        </el-tree>
      </div>
      <div class="departmentTreeLayer" v-show="treeLayerShowUser">
        <p>{{treeLayerUserTitle}}</p>
        <el-form :model="addMsg1" :rules="rules1" ref="addMsg1" label-width="90px">
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item :label="$t('system.table_company')" prop="RB_Branch_id">
                <el-select filterable v-model='addMsg1.RB_Branch_id' @change='layerLinkageDepartment'
                  :placeholder="$t('pub.unlimitedSel')">
                  <el-option v-for='item in companyList' :label='item.BName' :value='item.Id' :key="item.Id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('admin.admin_Department')" prop="RB_Department_Id">
                <el-select filterable v-model='addMsg1.RB_Department_Id' @change='layerLinkagePost'
                  :placeholder="$t('pub.unlimitedSel')">
                  <el-option v-for='item in layerDepartMentList' :label='item.DepartmentName' :value='item.DepartmentID'
                    :key="item.DepartmentID">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('admin.admin_Post')" prop="RB_Post_Id">
                <el-select filterable v-model='addMsg1.RB_Post_Id' :placeholder="$t('pub.unlimitedSel')">
                  <el-option v-for='item in layerPostList' :label='item.PostName' :value='item.PostId'
                    :key="item.PostId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('system.query_name')" prop="EmName">
                <el-input maxlength='20' type="text" v-model="addMsg1.EmName" :placeholder="$t('pub.pleaseImport')">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item :label="$t('system.table_IDcard')" prop="EmCard">
                <el-input type="text" v-model="addMsg1.EmCard" :placeholder="$t('pub.pleaseImport')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('leader.leader_Sex')" prop="EmSex">
                <el-select filterable v-model='addMsg1.EmSex' :placeholder="$t('pub.unlimitedSel')">
                  <el-option :label="$t('pub.man')" value='0'></el-option>
                  <el-option :label="$t('pub.woman')" value='1'></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('adm.adm_xueli')" prop="EmEducation">
                <el-input maxlength='20' type="text" v-model="addMsg1.EmEducation"
                  :placeholder="$t('pub.pleaseImport')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="入职时间" prop="EmEntry">
                <el-date-picker value-format="yyyy-MM-dd" v-model='addMsg1.EmEntry' type="date"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="离职时间" prop="EmLeave">
                <el-date-picker value-format="yyyy-MM-dd" v-model='addMsg1.EmLeave' type="date" disabled>
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('admin.admin_address')" prop="EmAddress">
                <el-input maxlength='50' type="text" v-model="addMsg1.EmAddress" :placeholder="$t('pub.pleaseImport')">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('pub.mbPhoneNum')" prop="EmMobile">
                <el-input type="text" v-model="addMsg1.EmMobile" :placeholder="$t('pub.pleaseImport')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('pub.telphone')" prop="EmTel">
                <el-input maxlength='20' type="text" v-model="addMsg1.EmTel" :placeholder="$t('pub.pleaseImport')">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="QQ" prop="EmQQ">
                <el-input type="text" v-model="addMsg1.EmQQ" :placeholder="$t('pub.pleaseImport')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="生日" prop="EmBirthday">
                <el-date-picker value-format="yyyy-MM-dd" v-model='addMsg1.EmBirthday' type="date"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('system.table_acc')" prop="EmAccount">
                <el-input type="text" v-model="addMsg1.EmAccount" :placeholder="$t('pub.pleaseImport')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="密码" prop="EmPassword">
                <el-input type="password" v-model="addMsg1.EmPassword" :placeholder="$t('pub.pleaseImport')"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="24">
              <input type="button" :value="$t('pub.cancelBtn')" class="hollowFixedBtn"
                @click="resetForm('addMsg1'),treeLayerShowUser=false"></input>
              <input type="button" class="normalBtn" :value="$t('pub.saveBtn')" @click="submitForm1('addMsg1')"></input>
              <button v-if='isleaveBtn' class="normalBtn" @click="setIsLeave(leaveId)">{{leaveBtn}}</button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="departmentTreeLayer" v-show="treeLayerShow">
        <p>
          {{treeLayerTitle}}
        </p>
        <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px">
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item :label="$t('admin.admin_company')" prop="RB_Branch_Id">
                <el-select filterable clearable v-model='addMsg.RB_Branch_Id' :placeholder="$t('pub.unlimitedSel')"
                  @change='getDeparmentTierByBranch'>
                  <el-option v-for='item in companyList' :label='item.BName' :value='item.Id' :key="item.Id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('admin.admin_department')" prop="DepartmentName">
                <el-input type="text" maxlength='20' v-model="addMsg.DepartmentName"
                  :placeholder="$t('pub.pleaseImport')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('admin.admin_departmentLevel')" prop="Tier">
                <el-select v-model="addMsg.Tier" @change='getParentDeparment'>
                  <el-option v-for='item in layerTierList' :label='item.name' :value='item.id' :key="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('admin.admin_parentdepartment')" prop="ParentId">
                <el-select filterable v-model='addMsg.ParentId' :placeholder="$t('pub.pleaseSel')">
                  <el-option v-for='item in layerDepartmentList' :label='item.DepartmentName' :value='item.DepartmentID'
                    :key="item.DepartmentID">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item :label="$t('admin.admin_leader')" prop="DepartmentManager">
                <el-select filterable clearable v-model='addMsg.ManagerIdArr' :placeholder="$t('pub.pleaseSel')"
                  multiple>
                  <el-option v-for='item in employeeList' :label='item.EmName' :value='item.EmployeeId'
                    :key="item.EmployeeId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('admin.admin_dphone')" prop="DepartmentTel">
                <el-input type="text" v-model="addMsg.DepartmentTel" :placeholder="$t('pub.pleaseImport')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="部门排序" prop="Sort">
                <el-input type="text" v-model="addMsg.Sort" :placeholder="$t('pub.pleaseImport')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label='是否领队' prop="IsLeader">
                <el-switch v-model="addMsg.IsLeader" active-value="1" inactive-value="0"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form-item label="绑定岗位" prop="PostIdArr">
                <el-select filterable class='w400 multiple_input' multiple v-model='addMsg.PostIdArr'
                  :placeholder="$t('pub.pleaseSel')">
                  <el-option v-for='item in postList' :label='item.PostName' :value='item.PostId' :key="item.PostId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <button class="hollowFixedBtn" @click="treeLayerShow = false,resetForm('addMsg')">
                {{$t('pub.cancelBtn')}}
              </button>
              <button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button>
            </el-col>
            <el-col :span="12">
            </el-col>
          </el-row>
        </el-form>
      </div>

    </div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading='loading' v-show="!isTree">
      <tr>
        <th width="200">{{$t('admin.admin_company')}}</th>
        <th width="200">{{$t('admin.admin_department')}}</th>
        <th>{{$t('admin.admin_departmentLevel')}}</th>
        <th>{{$t('admin.admin_leader')}}</th>
        <th>{{$t('admin.admin_dphone')}}</th>
        <th width="300">绑定岗位</th>
        <th>排序</th>
        <th>{{$t('admin.admin_operate')}}</th>
      </tr>
      <tr v-for="(item,index) in DataList">
        <td>{{item.RB_Branch_Name}}</td>
        <td>{{item.DepartmentName}}</td>
        <td>{{item.Tier}}级</td>
        <td>{{item.DepartmentManagerName}}</td>
        <td>{{item.DepartmentTel}}</td>
        <td>{{item.PostName}}</td>
        <td>{{item.Sort}}</td>
        <td>
          <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top">
            <el-button type="primary" icon="el-icon-edit" circle
              @click="outerVisible = true,dialogTitle='修改部门信息',updateData(item.DepartmentID)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="$t('pub.delete')" placement="top">
            <el-button type="danger" icon="el-icon-delete" @click='deleteDeparment(item.DepartmentID)' circle>
            </el-button>
          </el-tooltip>
        </td>
      </tr>
    </table>
    <el-pagination v-show="!isTree" background @current-change="handleCurrentChange" :current-page.sync="currentPage"
      layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total=total>
    </el-pagination>
    <el-dialog custom-class='w800' :title="dialogTitle" :visible.sync="outerVisible" center
      :before-close="closeChangeMachie">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px">
        <table class="layerNoIcon">
          <tr>
            <td>
              <el-form-item :label="$t('admin.admin_company')" prop="RB_Branch_Id">
                <el-select class='w200' filterable clearable v-model='addMsg.RB_Branch_Id'
                  :placeholder="$t('pub.unlimitedSel')" @change='getDeparmentTierByBranch'>
                  <el-option v-for='item in layercompanyList' :label='item.BName' :value='item.Id' :key="item.Id">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
            <td>
              <el-form-item :label="$t('admin.admin_department')" prop="DepartmentName">
                <el-input class='w200' type="text" maxlength='20' v-model="addMsg.DepartmentName"
                  :placeholder="$t('pub.pleaseImport')"></el-input>
              </el-form-item>

            </td>
          </tr>
          <tr>
            <td>
              <el-form-item :label="$t('admin.admin_departmentLevel')" prop="Tier">
                <el-select class='w200' v-model="addMsg.Tier" @change='getParentDeparment'>
                  <el-option v-for='item in layerTierList' :label='item.name' :value='item.id' :key="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
            <td>
              <el-form-item :label="$t('admin.admin_parentdepartment')" prop="ParentId">
                <el-select filterable class='w200' v-model='addMsg.ParentId' :placeholder="$t('pub.pleaseSel')">
                  <el-option v-for='item in layerDepartmentList' :label='item.DepartmentName' :value='item.DepartmentID'
                    :key="item.DepartmentID">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item :label="$t('admin.admin_leader')" prop="DepartmentManager">
                <el-select filterable class='w200 multiple_input' clearable v-model='addMsg.ManagerIdArr'
                  :placeholder="$t('pub.pleaseSel')" multiple>
                  <el-option v-for='item in employeeList' :label='item.EmName' :value='item.EmployeeId'
                    :key="item.EmployeeId">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
            <td>
              <el-form-item :label="$t('admin.admin_dphone')" prop="DepartmentTel">
                <el-input class='w200' type="text" v-model="addMsg.DepartmentTel" :placeholder="$t('pub.pleaseImport')">
                </el-input>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item :label="$t('admin.admin_departsort')" prop="Sort">
                <el-input class='w200' type="text" v-model="addMsg.Sort" :placeholder="$t('pub.pleaseImport')">
                </el-input>
              </el-form-item>
            </td>
            <td>
              <el-form-item class='w400' :label="$t('admin.admin_isleader')" prop="IsLeader">
                <el-switch v-model="addMsg.IsLeader" active-value="1" inactive-value="0"></el-switch>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <el-form-item :label="$t('admin.admin_Bindingposition')" prop="PostIdArr">
                <el-select filterable class='w500 multiple_input' multiple v-model='addMsg.PostIdArr'
                  :placeholder="$t('pub.pleaseSel')">
                  <el-option v-for='item in postList' :label='item.PostName' :value='item.PostId' :key="item.PostId">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
          </tr>
        </table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <button class="hollowFixedBtn" @click="outerVisible = false,resetForm('addMsg')">{{$t('pub.cancelBtn')}}
        </button> &nbsp;
        <button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    data() {
      let validateParentDepartment = (rule, value, callback) => {
        if (this.addMsg.Tier != '1' && value == '') {
          return callback(new Error('请选择上级层级'));
        } else {
          callback();
        }
      }
      return {
        leaveBtn: '',
        leaveId: '',
        isleaveBtn: false,
        layerDepartMentList: [],
        layerPostList: [],
        treeLayerTitle: '',
        treeLayerUserTitle: '',
        treeLayerShow: false,
        treeLayerShowUser: false,
        //树形
        defaultProps: {
          children: 'ChildList',
          label: 'DepartmentName',
        },
        isTree: false,
        loading: true,
        //分页
        total: 0,
        pageSize: '',
        currentPage: 1,
        //弹窗
        outerVisible: false,
        dialogTitle: '',
        rules: { //表单验证
          RB_Branch_Id: [{
            required: true,
            message: this.$t('rule.company'),
            trigger: 'change'
          }],
          DepartmentName: [{
            required: true,
            message: this.$t('rule.qsrbmmingchen'),
            trigger: 'blur'
          }],
          Tier: [{
            required: true,
            message: this.$t('rule.qxzbmcengji'),
            trigger: 'change'
          }],
          ParentId: [{
            validator: validateParentDepartment,
            trigger: 'change'
          }],
          DepartmentManager: [{
            required: false,
            message: this.$t('rule.qxzfuzeren'),
            trigger: 'change'
          }],
          PostIdArr: [{
            required: true,
            message: this.$t('rule.qsrbdgangwei'),
            trigger: 'change'
          }],
          DepartmentTel: [{
            pattern: /^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/,
            message: this.$t('rule.qsrzqdbmdianhua')
          }],
          Sort: [{
            required: true,
            pattern: /^(-|\+)?\d+$/,
            message: this.$t('rule.qszhengshu')
          }],
          IsLeader: [{
            required: false,
            trigger: 'change'
          }],

        },
        addMsg1: {
          EmName: '',
          EmSex: '0',
          EmCard: '',
          EmBirthday: '',
          EmEducation: '',
          EmEntry: '',
          EmLeave: '',
          EmAddress: '',
          EmMobile: '',
          EmTel: '',
          EmQQ: '',
          EmPhoto: '',
          EmAccount: '',
          EmPassword: '',
          RB_Group_id: '',
          RB_Branch_id: '',
          RB_Department_Id: '',
          RB_Post_Id: '',
        },
        rules1: {
          RB_Branch_id: [{
            required: true,
            message: this.$t('rule.company'),
            trigger: 'change'
          }],
          RB_Department_Id: [{
            required: true,
            message: this.$t('tips.qxzbumen'),
            trigger: 'change'
          }],
          RB_Post_Id: [{
            required: true,
            message: this.$t('tips.qxzgangwei'),
            trigger: 'change'
          }],
          EmName: [{
            required: true,
            message: this.$t('rule.qsrname'),
            trigger: 'blur'
          }],
          EmEntry: [{
            required: true,
            message: '请选择入职时间',
            trigger: 'blur'
          }],
          EmAccount: [{
              required: true,
              message: this.$t('login.login_account'),
              trigger: 'blur'
            },
            {
              pattern: /^[a-zA-Z0-9]{4,18}$/,
              message: '账号为6-18位字母数字组成'
            }
          ],
          EmPassword: [{
            required: true,
            message: this.$t('login.login_password'),
            trigger: 'blur'
          }],
          EmQQ: [{
            pattern: /^\d{5,11}$/,
            message: '请输入正确的qq'
          }],
          EmMobile: [{
            pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|17[012356789]|18[0-9]|19[0-9]|14[57])[0-9]{8}$/,
            message: this.$t('rule.qsrtelphone'),
          }],
          EmCard: [{
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: this.$t('rule.qsrIdnum'),
          }],
        },
        //请求数据
        departmentMsg: {
          ParentId: '-1',
          RB_Group_Id: '0',
          RB_Branch_Id: '-1',
          Status: '0',
          Tier: '0',
        },
        layerDepartmentMsg: {
          BranchId: '',
          Tier: ''
        },
        msg: {
          pageIndex: 1,
          pageSize: 15,
          ParentId: '0',
          Tier: '0',
          RB_Branch_Id: '-1',
          DepartmentName: '',
          IsParentCompany: 2
        },
        companyMsg: {
          RB_Group_Id: '0',
          Status: 0,
        },
        postMsg: {
          RB_Group_Id: '',
        },
        employeeMsg: {
          BranchId: '-1',
          IsLeave: 0
        },
        addMsg: {
          DepartmentID: '0',
          DepartmentName: '',
          DepartmentManager: '',
          DepartmentTel: '',
          RB_Branch_Id: '',
          RB_Group_Id: '0',
          ParentId: '',
          Tier: '',
          Status: '0',
          Sort: '',
          PostIdArr: [],
          IsLeader: '0',
          ManagerIds: '', //部门负责人
          ManagerIdArr: [] //数组
        },
        getDepartmentMsg: {
          RB_Group_Id: '0',
          RB_Branch_Id: '-1',
          Status: '0',
        },
        getPostMsg: {
          RB_Group_Id: '0',
          RB_Branch_Id: '-1',
          RB_Department_Id: '0',
        },
        layerTierMsg: {
          BranchId: '-1'
        },
        dragMsg: {
          IsSort: 1,
          Tier: '',
          Sort: '',
          ParentId: '',
          DepartmentID: '',
        },
        defaultImg: 'this.src="' + require("../../assets/img/default_head_img.jpg") + '"',
        //返回数据
        DataList: [],
        companyList: [],
        layercompanyList: [],
        departmentList: [],
        layerDepartmentList: [],
        postList: [],
        employeeList: [],
        tierList: [],
        layerTierList: [],
        allList: []

      }
    },
    mounted() {
      let userInfo = this.getLocalStorage();
      this.addMsg1.RB_Group_id = this.postMsg.RB_Group_Id = this.companyMsg.RB_Group_Id = this.departmentMsg
        .RB_Group_Id = this.addMsg.RB_Group_Id = userInfo.RB_Group_id; //集团
      this.companyMsg.RB_Branch_Id = userInfo.RB_Branch_id; //公司
      this.msg.RB_Branch_Id = userInfo.RB_Branch_id; //公司
      this.msg.IsParentCompany = userInfo.IsParentCompany; //是否为总公司

      this.getList();
      this.getCompany();
      this.getDepartment();
      this.getEmployee();
      this.getPost()
      this.getTier()
      this.getAllDepartment()
    },
    filters: {
      //			tierFormat(value){
      //				if(value=='1')
      //				return '一级'
      //				if(value=='2')
      //				return '二级'
      //				if(value=='3')
      //				return '三级'
      //				if(value=='4')
      //				return '四级'
      //				if(value=='5')
      //				return '五级'
      //			}
    },
    methods: {
      setIsLeave(Id) {
        let myDate = new Date();
        let _year = myDate.getFullYear();
        let _month = myDate.getMonth() >= 9 ? myDate.getMonth() + 1 : '0' + (myDate.getMonth() + 1);
        let _date = myDate.getDate() > 9 ? myDate.getDate() : '0' + myDate.getDate();
        let _time = _year + '-' + _month + '-' + _date;
        this.apipost('admin_post_EmployeeInOrOut', {
          Id: Id,
          Time: _time,
        }, res => {
          if (res.data.resultCode == 1) {
            this.$message.success(res.data.message)
            this.getList();
            this.getAllDepartment()
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
      layerLinkageDepartment() { //弹窗联动部门
        this.addMsg1.RB_Department_Id = '';
        this.addMsg1.RB_Post_Id = '',
          this.getDepartmentMsg.RB_Branch_Id = this.addMsg1.RB_Branch_id;
        this.getDerpartMent();
      },
      layerLinkagePost() { //弹窗联动岗位
        this.addMsg1.RB_Post_Id = '',
          this.getPostMsg.RB_Branch_Id = this.addMsg1.RB_Branch_id;
        this.getPostMsg.RB_Department_Id = this.addMsg1.RB_Department_Id
        this.getPost1()

      },
      getPost1() { //岗位
        this.apipost('admin_get_PostGetList', this.getPostMsg, res => {
          if (res.data.resultCode == 1) {
            this.layerPostList = res.data.data;
          } else {}
        }, err => {})
      },
      getDerpartMent() { //获取部门
        this.apipost('admin_get_DepartmentGetList', this.getDepartmentMsg, res => {
          if (res.data.resultCode == 1) {
            this.layerDepartMentList = res.data.data;
          } else {}
        }, err => {})
      },
      handleDragStart(node, ev) {},
      handleDragEnter(draggingNode, dropNode, ev) {},
      handleDragLeave(draggingNode, dropNode, ev) {},
      handleDragOver(draggingNode, dropNode, ev) {},
      handleDragEnd(draggingNode, dropNode, dropType, ev) {},
      handleDrop(node, node1, inner) {
        if (inner == 'inner') {
          this.dragMsg.Tier = node1.data.Tier + 1
          this.dragMsg.Sort = node.data.Sort
          this.dragMsg.ParentId = node1.data.DepartmentID
          this.dragMsg.DepartmentID = node.data.DepartmentID
        }
        if (inner == 'before') {
          this.dragMsg.Tier = node1.data.Tier
          this.dragMsg.Sort = node1.data.Sort - 1
          this.dragMsg.ParentId = node1.data.ParentId
          this.dragMsg.DepartmentID = node.data.DepartmentID
        }
        if (inner == 'after') {
          this.dragMsg.Tier = node1.data.Tier
          this.dragMsg.Sort = node1.data.Sort + 1
          this.dragMsg.ParentId = node1.data.ParentId
          this.dragMsg.DepartmentID = node.data.DepartmentID
        }
        this.apipost('admin_post_DepartmentSet', this.dragMsg, res => {
          if (res.data.resultCode == 1) {
            this.$message.success(res.data.message);
            this.getList()
            this.getAllDepartment()
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },

      allowDrop(draggingNode, dropNode, type) {
        return dropNode.data.DType === 1
      },
      allowDrag(draggingNode) {
        return draggingNode.data.DType === 1
      },
      getAllDepartment() {
        this.apipost('user_get_GetGroupDepartmentTreeList', {}, res => {
          if (res.data.resultCode == 1) {
            this.allList = res.data.data
          }
        }, err => {})
      },
      getTier() {
        this.apipost('app_get_GetDepartmentTier', {}, res => {
          if (res.data.resultCode == 1) {
            this.layerTierList = []
            for (let i = res.data.data.StartNum; i <= res.data.data.EndNum; i++) {
              this.tierList.push({
                id: i,
                name: i + '级'
              })
            }
          } else {}
        }, err => {})
      },
      getlayerTier() {
        this.apipost('app_get_GetDepartmentTier', this.layerTierMsg, res => {
          if (res.data.resultCode == 1) {
            this.layerTierList = []
            for (let i = res.data.data.StartNum; i <= res.data.data.EndNum; i++) {
              this.layerTierList.push({
                id: i,
                name: i + '级'
              })
            }
          } else {}
        }, err => {})
      },
      getDeparmentTierByBranch() {
        this.layerTierMsg.BranchId = this.employeeMsg.BranchId = this.layerDepartmentMsg.BranchId = this.addMsg
          .RB_Branch_Id
        this.addMsg.DepartmentManager = ''
        this.getLayerParentDepartment()
        this.getEmployee()
        this.getlayerTier()
      },
      getParentDeparment() {
        this.addMsg.ParentId = '';
        if (this.addMsg.Tier == 1) {
          this.layerDepartmentList = null;
        } else {
          this.layerDepartmentMsg.Tier = this.addMsg.Tier;
          this.getLayerParentDepartment();
        }
      },
      getList() { //获取数据
        this.loading = true
        this.treeLayerShow = false
        this.treeLayerShowUser = false
        this.apipost('admin_get_DepartmentGetPageList', this.msg, res => {
          if (res.data.resultCode == 1) {
            this.DataList = res.data.data.pageData;
            this.total = res.data.data.count;
            this.loading = false
          } else {}
        }, err => {})
      },
      getCompany() { //公司
        this.dialogTitle = this.$t('adm.adm_xzbumen');
        this.apipost('admin_get_BranchGetList', this.companyMsg, res => {
          if (this.outerVisible) {
            this.layercompanyList = res.data.data
          } else {
            this.companyList = res.data.data
          }
        }, err => {})
      },
      getDepartment() { //获取上级部门
        this.apipost('admin_get_DepartmentGetList', this.departmentMsg, res => {
          if (res.data.resultCode == 1) {
            this.departmentList = res.data.data
          }
        }, err => {})
      },
      getLayerParentDepartment() {
        this.apipost('app_get_GetDepartmentCascade', this.layerDepartmentMsg, res => {
          if (res.data.resultCode == 1) {
            this.layerDepartmentList = res.data.data
          }
        }, err => {})
      },
      getPost() { //获取岗位
        this.apipost('admin_get_PostGetList', this.postMsg, res => {
          if (res.data.resultCode == 1) {
            this.postList = res.data.data
          }
        }, err => {})
      },
      getEmployee() { //员工
        this.apipost('admin_get_EmployeeGetList', this.employeeMsg, res => {
          if (res.data.resultCode == 1) {
            this.employeeList = res.data.data;
          } else {}
        }, err => {})
      },
      addData1() {
        this.apipost('admin_post_EmployeeOperate', this.addMsg1, res => {
          if (res.data.resultCode == 1) {
            this.$message.success(res.data.message);
            this.getList();
            this.getAllDepartment()
            this.resetForm('addMsg1');
          } else {
            this.$message.error(res.data.message)
          }

        }, err => {})

      },
      submitForm1(addMsg) { //提交创建、修改表单
        this.$refs[addMsg].validate((valid) => {
          if (valid) {
            this.addData1()
          } else {
            return false;
          }
        });
      },
      resetForm(formName) { //弹出框取消 初始化谈框内表单
        this.$refs[formName].resetFields();
      },
      addData() { //新增数据
        if (this.addMsg.ManagerIdArr.length > 0) {
          this.addMsg.ManagerIds = this.addMsg.ManagerIdArr.join(",");
          this.addMsg.DepartmentManager = String(this.addMsg.ManagerIdArr[0]);
        } else {
          this.addMsg.ManagerIds = ''
          this.addMsg.DepartmentManager = 0
        }
        this.apipost('admin_post_DepartmentSet', this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.$message.success(res.data.message);
            this.outerVisible = false;
            this.treeLayerShow = false
            this.getList()
            this.getAllDepartment()
            this.resetForm('addMsg');

          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
      addTreeData(obj) {
        this.treeLayerTitle = this.$t('adm.adm_addbumen');
        this.getCompany()
        this.layerDepartmentMsg.BranchId = this.layerTierMsg.BranchId = this.addMsg.RB_Branch_Id = obj.RB_Branch_Id
        this.layerDepartmentMsg.Tier = obj.Tier + 1;
        this.getlayerTier()
        this.getLayerParentDepartment()
        this.addMsg.Tier = obj.Tier + 1
        this.addMsg.ParentId = obj.DepartmentID

      },
      addTreeUerData(obj) {
        this.isleaveBtn = false;
        this.treeLayerUserTitle = this.$t('adm.adm_addyuangong');
        this.getCompany()
        this.getDepartmentMsg.RB_Branch_Id = this.addMsg1.RB_Branch_id = obj.RB_Branch_Id
        this.getDerpartMent();
        this.getPostMsg.RB_Department_Id = this.addMsg1.RB_Department_Id = obj.DepartmentID
        this.getPost1()
      },
      updateData(id) {
        this.getCompany();
        this.addMsg.DepartmentID = id
        this.apipost('admin_get_DepartmentGet', {
          DepartmentID: id
        }, res => {
          if (res.data.resultCode == 1) {
            this.layerDepartmentMsg.BranchId = this.layerTierMsg.BranchId = this.addMsg.RB_Branch_Id = res.data.data
              .RB_Branch_Id
            this.addMsg.DepartmentName = res.data.data.DepartmentName;
            this.addMsg.ParentId = res.data.data.ParentId.toString();
            this.addMsg.DepartmentManager = res.data.data.DepartmentManager == "0" ? '' : res.data.data
              .DepartmentManager;
            this.addMsg.DepartmentTel = res.data.data.DepartmentTel;
            this.addMsg.Sort = res.data.data.Sort;
            this.addMsg.ManagerIds = res.data.data.ManagerIds;
            this.addMsg.ManagerIdArr = res.data.data.ManagerIdArr;
            this.addMsg.IsLeader = res.data.data.IsLeader.toString();
            this.layerDepartmentMsg.Tier = this.addMsg.Tier = res.data.data.Tier;
            this.getlayerTier()
            this.getLayerParentDepartment()
            if (res.data.data.PostIdStr != '') {
              this.addMsg.PostIdArr = res.data.data.PostIdStr
            } else {
              this.addMsg.PostIdArr = []
            }
            if (res.data.data.Tier == 1) {
              this.addMsg.ParentId = '';
              this.layerDepartmentList = null;
            } else {
              this.addMsg.ParentId = res.data.data.ParentId;
              this.departmentMsg.Tier = res.data.data.Tier - 1;
              this.getDepartment();
            }

          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
      updateDataUser(obj) {
        this.leaveId = obj.DepartmentID
        this.isleaveBtn = true;
        this.apipost('admin_get_EmployeeGet', {
          Id: obj.DepartmentID
        }, res => {
          if (res.data.resultCode == 1) {
            this.getDepartmentMsg.RB_Branch_Id = res.data.data.RB_Branch_id
            this.getPostMsg.RB_Department_Id = res.data.data.RB_Department_Id;
            this.getDerpartMent();
            this.getPost1();
            this.addMsg1 = res.data.data;
            if (res.data.data.IsLeave == 0) {
              this.leaveBtn = '设为离职';
            } else {
              this.leaveBtn = '设为在职';
            }
            this.addMsg1.EmSex = res.data.data.EmSex.toString();
          }
        }, err => {})

      },
      deleteDeparment(id) {
        this.$confirm(this.$t('tips.tips_deletealldepart'), this.$t('tips.tips'), {
          confirmButtonText: this.$t('pub.sureBtn'),
          cancelButtonText: this.$t('pub.cancelBtn'),
          type: 'warning'
        }).then(() => {
          this.apipost('admin_post_DepartmentRemove', {
            DepartmentID: id
          }, res => {
            if (res.data.resultCode == 1) {
              this.$message.success(this.$t('tips.shanchuchenggong'))
              this.getList();
              this.getAllDepartment()
            }
          }, err => {})

        }).catch(() => {
          this.$message.info('已取消删除！')
        });
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1
      },
      submitForm(addMsg) { //提交创建、修改表单
        this.$refs[addMsg].validate((valid) => {
          if (valid) {
            this.addData()
          } else {
            return false;
          }
        });
      },
      closeChangeMachie(done) { //弹出框关闭初始化弹框内表单
        done();
        this.resetForm('addMsg');
      },
      resetForm(formName) { //弹出框取消 初始化谈框内表单
        this.$refs[formName].resetFields();
        this.addMsg.DepartmentID = 0
        this.addMsg1.EmployeeId = '0'
        this.addMsg1.EmPhoto = ''
        //			 	this.layerDepartmentMsg.Tier=''
        //			 	this.layerTierList=[]
        //			 	this.layerDepartmentList=[]
      }
    }
  }

</script>
