manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/views/leave/list.vue

<template>
  <section id="section">
    <div class="sidebars" ref="sidebars" :style="'width: 180px;display: block;overflow:hidden;background: #fff;height:'+hubs+ 'px'">
      <h3><i class="iconfont firerock-iconbaoxiao" style="padding-right: 10px"></i>{{ $t('navigation.askForLeaveManagement') }}</h3>
      <el-divider ></el-divider>
      <el-col :span="12">
        <el-menu :default-active="isDingding ? '7' : '1'" class="el-menu-vertical-demo" @select="staffs" background-color="#ffffff" text-color="#666666" active-text-color="#20A0FF" style="width:100%">
          <!-- <el-submenu index="1">
            <template slot="title">
              <i class="iconfont firerock-icontianbao"></i>
              <span>员工请假填报</span>
            </template>
              <el-menu-item index="1-1"><p @click="ssl(0)">请事假</p></el-menu-item>
              <el-menu-item index="1-2"><p @click="ssl(1)">请病假</p></el-menu-item>
              <el-menu-item index="1-3"><p @click="ssl(2)">请年假</p></el-menu-item>
              <el-menu-item index="1-4"><p @click="ssl(3)">请产假</p></el-menu-item>
          </el-submenu> -->
          <template v-if="!isDingding">
          <el-menu-item index="1" v-if="permissions.leaveFil">
            <i class="iconfont firerock-icontianbao"></i>
            <span slot="title">{{ $t('staffleavetofillin') }}</span>
          </el-menu-item>
          <el-submenu index="2" v-if="permissions.leaveAll">
            <template slot="title">
              <i class="iconfont firerock-iconbaoxiaodan"></i>
              <span>{{ $t('singlelistofleave') }}</span>
            </template>
            <el-menu-item index="2-1" ><p @click="bills(false, 2)" v-if="permissions.leaveAll">{{ $t('all') }}</p></el-menu-item>
            <el-menu-item index="2-2" ><p @click="bills(true, 1)" v-if="permissions.leaveAudit">{{ $t('state.WaitingAudit') }}</p></el-menu-item>
          </el-submenu>
            <el-menu-item index="3" @select="bills" @click="bills(false, 2)" v-if="!permissions.leaveAll">
              <i class="iconfont firerock-iconbaoxiaodan"></i>
              <span slot="title">{{ $t('myleaveform') }}</span>
            </el-menu-item>
            <el-menu-item index="4" v-if="permissions.leaveStatistical">
              <template slot="title">
                <i class="iconfont firerock-icontianbao"></i>
                <span slot="title">{{ $t('for') }}</span>
              </template>
          </el-menu-item>

          <el-menu-item index="5" v-if="permissions.leaveProcess">
              <template slot="title">
                <i class="iconfont firerock-iconliucheng"></i>
                <span slot="title">{{ $t('leaveApprovalProcess') }}</span>
              </template>
          </el-menu-item>

          <el-menu-item index="6" v-if="permissions.leaveAnnual">
              <template slot="title">
                <i class="iconfont firerock-icontianbao"></i>
                <span slot="title">{{ $t('annualleavemanagement') }}</span>
              </template>
          </el-menu-item>
          </template>

          <!-- 钉钉环境对接 -->
          <template v-if="isDingding">
            <el-menu-item index="7">
                <template slot="title">
                  <i class="iconfont firerock-iconbaoxiaodan"></i>
                  <span slot="title">{{ $t('singlelistofleave') }}</span>
                </template>
            </el-menu-item>
            <el-menu-item index="8">
                <template slot="title">
                  <i class="iconfont firerock-iconbaoxiaodan"></i>
                  <span slot="title">{{ $t('scheduleofremainingLeave') }}</span>
                </template>
            </el-menu-item>
          </template>


          </el-menu>
      </el-col>
    </div>
     <!-- 侧边栏点击事件 -->
      <!-- <div class="side" @click="side" ref="sid" style="left: 430px">
        <div class="spans" ref="side" style="left: -19px;"><i  ref="sideI" class="el-icon-arrow-left"></i></div>
      </div> -->
    <!-- 内容主体区域 -->
  <div class="contents">
    <div v-if="!displayTable && !isDingding" class="headine" ref="headine">
      <h3 ref="headHe" style="padding-left: 220px">{{ $t('aketimeoffto') }}</h3>
      <!-- <p style="float: right;margin-right: 25px;"><el-button type="primary" @click="submits('addFormRules')" size="mini">提交</el-button></p> -->
    </div>
    <!-- 上面部分 -->
    <div v-if="!displayTable && apk == false" class="tops" :style="'height:' +hubs+'px'">
        <!-- 公共 -->
        <div class="ctons" style="width: 98%">
            <!-- 表单 -->
            <el-form ref="addForm" :model="addForm" label-width="80px" :rules="addFormRules">
                <!-- 请假类型 -->
                <el-form-item :label="$t('leavetype')" prop="leaveType" style="width: 100%">
                    <!--普通员工只能自己填报自己的 -->
                    <el-select v-model="addForm.leaveType" @change="txselts(addForm.leaveType,addForm.ownerId)" :placeholder="$t('defaultText.pleaseChoose')" style="width: 240px">
                          <el-option v-for="item in qjType" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                    <template  v-if="addForm.leaveType == 6">
                      <span style="margin-left:18px;color:#777;">{{ $t('restcanbeadjusted') }} {{addForm.ownerId != '' ? txselnum : '~'}} {{ $t('time.day') }}</span>
                      <el-tooltip effect="dark" :content="$t('overtimhourscabeusedforoffsetting')" placement="top-start">
                        <i class="el-icon-question" style="color:#606266;"></i>
                      </el-tooltip>
                    </template>
                </el-form-item>
                <!-- 请假人 -->
                <el-form-item :label="$t('leavepeople')" prop="ownerId"  style="width: 300px">
                    <!--普通员工只能自己填报自己的 -->
                    <el-select v-model="addForm.ownerId" @change="txselts(addForm.leaveType,addForm.ownerId)" :placeholder="$t('defaultText.pleaseChoose')" style="width: 240px" :disabled="true" filterable="true">
                        <span v-for="(item, index) in users" :key="index">
                        <el-option :label="item.name" :value="item.id"></el-option>
                        </span> 
                    </el-select>
                </el-form-item>
                <!-- 电话 -->
                <el-form-item :label="$t('phone')" prop="tel" style="margin-right:300px">
                    <el-input ref="ipts" v-model="addForm.tel" :placeholder="$t('peaseenterthe')" style="width: 250px"></el-input>
                </el-form-item>
                <!-- 单选 -->
                <el-form-item style="display: inline-block;width:300px" :label="$t('lengthunit')">
                    <el-radio-group v-model="addForm.timeType" @change="chanRadio()" style="display:inline-block;width:240px">
                        <el-radio label="0">{{ $t('accordingdays') }}</el-radio>
                        <el-radio label="1" v-if="addForm.leaveType != 6">{{ $t('leavehour') }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!-- 选择审批人 -->
                <el-form-item :label="$t('approver')" style="width:300px" prop="projectAuditorJson">
                    <el-select style="display:inline-block;width:250px;" multiple v-model="addForm.projectAuditorJson" :placeholder="$t('defaultText.pleaseChoose')">
                      <el-option
                      v-for="item in approverList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                      ></el-option>
                    </el-select>
                </el-form-item>
                <!-- 时间选择 -->
                <el-form-item :label="flg ? $t('optiondate') : $t('other.timeSelection')" style="width: 100%;">
                    <el-col style="display: inline-block; width: 240px">
                        <el-date-picker v-if="flg" type="date" :placeholder="$t('time.startDate')" value-format="yyyy-MM-dd"  v-model="addForm.startDate" style="width: 240px;" @blur="datas()"></el-date-picker>
                        <el-date-picker v-else type="date" :placeholder="$t('time.startDate')" value-format="yyyy-MM-dd" v-model="addForm.startDate" style="width: 240px;" @change="datasss()"></el-date-picker>
                    </el-col>
                    <el-col class="line" v-if="flg" style="display: inline-block; width: 50px">-</el-col>
                    <el-col style="display: inline-block; width: 240px">
                        <el-date-picker v-if="flg" type="date" :placeholder="$t('time.endDate')" value-format="yyyy-MM-dd" :picker-options="pickerOptionsEnd" v-model="addForm.endDate" style="width: 250px;" @blur="datas()"></el-date-picker>
                        <!-- <el-select v-else v-model="addForm.timeHours" placeholder="请假时长" @change="chanSele()">
                            <el-option v-for="(item, index) in options" :key="index" :label="item" :value="item"></el-option>
                        </el-select> -->
                    </el-col>
                </el-form-item>
                <!-- 请假天数 -->
                <el-form-item :label="flg ? $t('leavedays') : $t('leavetime')" prop="timeDays" style="margin-right: 500px">
                   <!-- {{flg ? addForm.timeDays : addForm.timeHours}}{{flg ? '天' : '小时'}} -->
                   <!-- <div v-if="flg">{{addForm.timeDays}} 天</div> -->
                   <div v-if="flg"> <el-input v-model="addForm.timeDays" @blur="inputs()" @input="addForm.timeDays=addForm.timeDays.replace(/[^\d.]/g,'')" style="width: 120px; margin-right: 20px;" type="number" :step="0.5"></el-input> {{ $t('time.day') }}</div>
                   <div v-else>
                      <el-input v-model="addForm.timeHours" @blur="inputss()" @input="addForm.timeHours=addForm.timeHours.replace(/[^\d.]/g,'')" style="width: 120px; margin-right: 20px;"></el-input> {{ $t('time.hour') }}
                   </div>
                </el-form-item>
                <!-- 备注 -->
                <el-form-item :label="$t('bei-zhu')" style="width: 100%">
                    <el-input type="textarea" v-model="addForm.remark" :rows="5" style="width: 550px" maxlength="100" show-word-limit></el-input>
                </el-form-item>
            </el-form>

            <div>
              <p style="margin-left: 20%"><el-button type="primary" @click="submits('addFormRules')" size="mini" :disabled="txselnum == 0 && addForm.leaveType == 6 && addForm.ownerId != '' ? true : false">{{ $t('btn.submit') }}</el-button></p>
            </div>
        </div>
    </div>

    <!-- 下面部分 -->
    <div v-if="displayTable && apk == false" class="tops" :style="'height:' +hubs+'px'">
        <!-- 公共 -->
        <div class="ctons" style="width: 98%;">
          <div class="flex">
            <div>
              <el-select v-model="ownerIds" :placeholder="$t('pleaseselectthepersonaskingforleave')" clearable @change="chufas()" style="width: 160px" size="small" v-show="permissions.leaveAll" filterable="true">
                  <span v-for="(item, index) in users" :key="index">
                  <el-option :label="item.name" :value="item.id"></el-option>
                  </span> 
              </el-select>
            </div>
            <div>
              <span style="color: #606266">{{ $t('leavetype') }}</span>
              <el-select v-model="type" :placeholder="$t('defaultText.pleaseChoose')" clearable @change="chufas()" style="width: 160px;" size="small" filterable="true">
                  <span v-for="(item, index) in typess" :key="index">
                  <el-option :label="item.name" :value="item.id"></el-option>
                  </span> 
              </el-select>
            </div>
            <div>
              <span style="color: #606266">{{$t('offstate')}}</span>
              <el-select v-if="falg == 0" v-model="code" :placeholder="$t('defaultText.pleaseChoose')" clearable @change="chufas()" size="small" style="width: 160px" filterable="true">
                  <span v-for="(item, index) in statuss" :key="index">
                  <el-option :label="item.name" :value="item.id"></el-option>
                  </span> 
              </el-select>
              <el-select v-if="falg == 1" disabled v-model="code" :placeholder="$t('pleaseselectthetypeofleave')" clearable @change="chufas()" size="small" style="width: 160px" filterable="true">
                  <span v-for="(item, index) in statuss" :key="index">
                  <el-option :label="item.name" :value="item.id"></el-option>
                  </span> 
              </el-select>
            </div>
            <div>
              <!-- <span style="color: #606266">请假时间</span>
              <el-date-picker v-model="createDate" type="date" @change="chufas()" value-format="yyyy-MM-dd" placeholder="选择日期" size="small" clearable="false"> </el-date-picker> -->
                <span style="color: #606266">{{ $t('message.period') }}</span>
                <el-date-picker v-model="createDate" type="daterange" :range-separator="$t('other.to')" :start-placeholder="$t('time.startDate')" :end-placeholder="$t('time.endDate')" @change="chufas()" value-format="yyyy-MM-dd" :placeholder="$t('optiondate')" size="small" clearable style="width:280px"></el-date-picker>
            </div>
            <div>
              <el-button type="primary" size="small" style="margin-left:20px" @click="exportLeave()">{{ $t('dao-chu-qing-jia-dan') }}</el-button>
            </div>
          </div>
            <el-table v-loading="loading" :data="tableData" style="width: 100%" height="94%">
                <el-table-column prop="ownerName" :label="$t('leavepeople')" min-width="120" fixed="left"></el-table-column>
                <el-table-column prop="tel" :label="$t('phone')" min-width="120"></el-table-column>
                <el-table-column prop="leaveType" :label="$t('leavetype')" min-width="120">
                  <template slot-scope="scope">
                    <!-- <div v-if="scope.row.leaveType == 0">事假</div>
                    <div v-if="scope.row.leaveType == 1">病假</div>
                    <div v-if="scope.row.leaveType == 2">年假</div>
                    <div v-if="scope.row.leaveType == 3">产假</div> -->
                    {{qjType[scope.row.leaveType].name}}
                  </template>
                </el-table-column>
                <el-table-column prop="startDate" :label="$t('leavestarttime')" min-width="150"></el-table-column>
                <el-table-column prop="endDate" :label="$t('leaveendtime')" min-width="150"></el-table-column>
                <el-table-column :label="$t('leavedays')" min-width="120">
                  <template slot-scope="scope">
                    <div v-if="scope.row.timeType == '1'">/</div>
                    <div v-else>{{scope.row.timeDays}} {{ $t('time.day') }}</div>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('leavetime')" min-width="120" v-if="!user.timeType.syncDingding">
                  <template slot-scope="scope">
                    <div>{{scope.row.timeHours}} {{ $t('time.hour') }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="status" :label="$t('state.states')" min-width="100">
                  <template slot-scope="scope">
                    <div v-if="scope.row.status == 0 || scope.row.status == 1 || scope.row.status == 2 || scope.row.status == 3 || scope.row.status == 4">
                      <div v-if="scope.row.status == 0" >{{ $t('state.approved') }}</div>
                      <div v-if="scope.row.status == 1" style="color: orange">{{ $t('state.WaitingAudit') }}</div>
                      <div v-if="scope.row.status == 2" style="color: red">{{ $t('btn.rejected') }}</div>
                      <div v-if="scope.row.status == 3" style="color: #666666">{{ $t('btn.undo') }}</div>
                    </div>
                    <div v-else>
                      <span>{{ $t('norequestforleaveatpresent') }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="remark" :label="$t('bei-zhu')" min-width="200" header-align="center">
                  <template slot-scope="scope">
                    <!-- <div class="apls">{{scope.row.remark}}</div> -->
                    <el-popover placement="top-start" :title="$t('biao-ti')" width="200" trigger="hover" :content="scope.row.remark">
                      <div slot="reference" class="apls">{{scope.row.remark}}</div>
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('operation')" min-width="180" fixed="right" v-if="isAuditList && !isDingding">
                    <template slot-scope="scope">
                      <div>
                        <el-button icon="el-icon-check" circle size="mini" @click.stop.native="approve(scope.row)"></el-button>
                        <el-button icon="el-icon-close" circle size="mini"  @click.stop.native="deny(scope.row)"></el-button>
                      </div>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('operation')" min-width="180" fixed="right" v-if="!isAuditList && !isDingding">
                    <template slot-scope="scope">
                      <div v-if="(scope.row.status != 0 && scope.row.ownerId == user.id) || permissions.leaveAll">
                        <el-button icon="el-icon-delete" circle size="mini"  @click.stop.native="deletes(scope.row)" ></el-button>
                        <el-button icon="el-icon-edit" circle size="mini" @click.stop.native="editor(scope.row)"></el-button>
                      </div>
                      <!-- <div>
                        <el-button icon="el-icon-delete" circle size="mini"  @click.stop.native="deletes(scope.row)"></el-button>
                        <el-button icon="el-icon-edit" circle size="mini" @click.stop.native="editor(scope.row)"></el-button>
                      </div> -->
                    </template>
                </el-table-column>
            </el-table>
            <div class="poss">
                <!-- <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[20, 50, 100, 200]"
                  :page-size="20"
                  layout="total, sizes, prev, pager, next"
                  :total="total">
                </el-pagination> -->
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="page"
                  :page-sizes="[20, 50, 100, 200]"
                  :page-size="20"
                  layout="total, sizes, prev, pager, next"
                  :total="total">
                </el-pagination>
          </div>
        </div>
    </div>

    <!-- 统计部分 -->
    <div v-if="displayTable && apk && apk2 == 4" class="tops" :style="'height:' +hubs+'px'">
      <!-- 公共 -->
        <div class="ctons" style="width: 98%;">
          <div style="display: flex;align-items: center;padding-bottom: 20px;border-bottom: 1px solid #f2f2f2">
            <div style="display: inline-block;width: 350px">
              <el-input style="float:left;" v-model="keyword" class="input-with-select" :placeholder="$t('pleaseenterstaffsearch')" clearable="true" size="small">
                  <el-button slot="append" @click="statistical()" icon="el-icon-search"></el-button>
              </el-input>
            </div>
            <div style="display: inline-block;width: 340px">
              <span style="display: inline-block;margin: 0 15px 0 20px;color: rgb(96, 98, 102);">{{ $t('time.startDate') }}</span>
              <el-date-picker
                v-model="statData"
                type="date"
                :placeholder="$t('optiondate')"
                size="small"
                @change="statistical()"
                clearable="false"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptionsStarts">
              </el-date-picker>
            </div>
            <div style="display: inline-block;width: 350px">
              <span style="display: inline-block;margin: 0 15px 0 0;color: rgb(96, 98, 102);">{{ $t('time.endDate') }}</span>
              <el-date-picker
                v-model="endData"
                type="date"
                :placeholder="$t('optiondate')"
                size="small"
                @change="statistical()"
                clearable="fasle"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptionsEnds">
              </el-date-picker>
            </div>
          </div>
          <!-- <div style="margin-top: 30px"> -->
          <div>
            <el-table key="apk2is4" v-loading="loading" :data="statisticalList" height="780px" style="width: 99%">
              <el-table-column prop="ownerName" :label="$t('lable.name')" width="300">
                <template slot-scope="scope">
                    <div v-if="scope.row.ownerName">
                      {{scope.row.ownerName}}
                    </div>
                    <div v-else>
                      <span>{{ $t('Nstatisticpresent') }}</span>
                    </div>
                  </template>
              </el-table-column>
              <el-table-column prop="timeDays" :label="$t('totaldaysleave')" width="300">
                <template slot-scope="scope">
                    {{scope.row.timeDays}} / {{ $t('time.day') }}
                  </template>
              </el-table-column>
              <el-table-column prop="timeHours" :label="$t('totallengthofleave')">
                <template slot-scope="scope">
                    {{scope.row.timeHours}}/{{ $t('time.hour') }}
                  </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
    </div>

<!-- 审批流 -->
    <div v-if="displayTable && apk && apk2 == 5" class="tops" :style="'height:' +hubs+'px'">
        
        <div class="ctons" style="width: 98%;">
        <el-col :span="6" >
            <el-scrollbar style="height:100%;border:1px solid #dddddd;margin-left:15px;" >
            <div class="tree" :style="'height:'+ (tableHeight-120) + 'px'">
                <el-tree :data="sdata" :props="sdefaultProps" @node-click="handleNodeClick" accordion></el-tree>
            </div>
            </el-scrollbar>
        </el-col>
        <el-col :span="18" >
            <el-scrollbar style="height:100%;border:1px solid #dddddd;margin-right:20px;" >
            <div class="tree" :style="'height:'+ (tableHeight-120) + 'px'">
                <div style="padding:5px;color:#333;" v-if="depData != null">{{ $t('setup') }} &lt;<span style="color:#20a0ff;">{{depData.label}}&gt;</span> {{ $t('approvalprocessforleaveofdirect staff') }}
                    <el-tooltip effect="dark" v-if="depData != null && depData.children!=null" content="仅适用于当前部门的直属人员，子部门人员的审批流程需要单独设置" placement="top-start">
                    <i class="el-icon-question"></i>
                    </el-tooltip>
                </div>
                <div style="padding:5px;" v-if="depData == null">{{ $t('qing-xuan-ze-bu-men') }}</div>
                <div style="width:100%;margin:0 auto;text-align: center; margin-top:50px;" v-if="depData != null">
                    <span>{{ $t('employeeisallowed') }}</span>
                    <icon class="iconfont firerock-iconright"></icon>
                    <icon class="iconfont firerock-iconInsertLine addNode" @click="showNodeDialog(0)"></icon>
                    <icon class="iconfont firerock-iconright"></icon>
                    <span v-for="(item, index) in dataArray" :key="item.seq" >
                        
                        <el-button type="primary" v-if="item.auditorType == 1" @click="editNodeDialog(index, item)">{{item.auditDeptName}}</el-button>
                        <el-button type="primary" v-if="item.auditorType == 2" @click="editNodeDialog(index, item)">{{item.userName}}</el-button>
                        <template v-if="item.auditorType == 1 || item.auditorType == 2">
                        <icon class="iconfont firerock-iconright"></icon>
                        <icon class="iconfont firerock-iconInsertLine addNode" @click="showNodeDialog(index+1)"></icon>
                        <icon class="iconfont firerock-iconright"></icon>
                        </template>
                    </span>

                    <!--结束点 -->
                    <icon class="iconfont firerock-iconApp_New_Line" style="color:#20A0FF;"></icon>
                    {{ $t('approvaltocomplete') }} 
                  </div>

                <div style="width:100%;margin:0 auto;margin-bottom:30px;position: absolute;bottom: 0px;text-align: center; ">
                    <el-button type="primary" @click="submitInsert" :loading="addLoading">{{ $t('save') }}</el-button>
                </div>
            </div>
            </el-scrollbar>
            
        </el-col>
        </div>

        <!--部门选择列表 -->
        <el-dialog  :title="$t('pleaseselectapprover')" v-if="dialogVisible" :visible.sync="dialogVisible"  width="460px">
              <el-form label-width="140px">
              <el-form-item :label="$t('selectdepartmentsdesignatepersonnel')" >
                  <el-cascader filterable ref="deptCascader"  v-model="curDeptId" :placeholder="$t('defaultText.pleaseChoose')" style="width: 100%" @change="chooseDept"
                    :options="soption" :props="{ checkStrictly: true,expandTrigger: 'hover' }" :show-all-levels="false" clearable></el-cascader>
              </el-form-item>
              </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="default" @click="deleteNode" v-if="!isAdd" style="float:left;">{{ $t('btn.delete') }}</el-button>
                <el-button type="primary" @click="addNode" >{{ $t('btn.determine') }}</el-button>
            </div>
        </el-dialog>

    </div>
  <!-- 年假管理 -->
    <div v-if="displayTable && apk && apk2 == 6" class="tops" :style="'height:' +hubs+'px'">
      <div class="ctons" style="width: 98%;">
        <div style="display: flex;align-items: center;padding-bottom: 20px;border-bottom: 1px solid #f2f2f2">
            <div style="display: inline-block;width: 18%;margin-left:1%">
              <el-button size="small" @click="changeAltime(0)">{{ $t('volumeset') }}</el-button>
            </div>
            <div style="display: inline-block;width: 26%">
              <el-input style="float:left;" v-model="keywordAl" class="input-with-select" :placeholder="$t('pleaseenterhepersonnamesearch')" clearable="true" size="small" @clear="clearsearchAl()">
                  <el-button slot="append" @click="searchAl()" icon="el-icon-search"></el-button>
              </el-input>
            </div>
            <div style="display: inline-block;width: 32%;margin-left:12%">
              <span style="display: inline-block;margin: 0 15px 0 20px;color: rgb(96, 98, 102);">{{ $t('screeningDepartment') }}</span>
              <el-cascader
                ref="selectAl"
                filterable
                v-model="NcurDeptId"
                :placeholder="$t('defaultText.pleaseChoose')"
                size="small"
                style="width: 60%"
                @change="selAl()"
                clearable
                :options="Nsdata"
                :props="{ checkStrictly: true, expandTrigger: 'hover' }"
                :show-all-levels="false">
              </el-cascader>
            </div>
            
        </div>
        <div>
          <el-table key="apk2is6" v-loading="loading" :data="iAlDataS" height="480" style="width: 99%;" @selection-change="selPchg">
            <el-table-column type="selection"></el-table-column>
              <el-table-column prop="userName" :label="$t('lable.name')" width="200">
                <template slot-scope="scope">
                  <div v-if="scope.row.userName">
                    {{scope.row.userName}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="department" :label="$t('departmentsuod')" width="200">
                <template slot-scope="scope">
                  {{scope.row.department}}
                </template>
              </el-table-column>
              <el-table-column prop="yearDays" :label="$t('annualleaveperyear')" width="200">
                <template slot-scope="scope">
                  {{scope.row.yearDays != null ? scope.row.yearDays + $t('time.day') : "-"}}
                </template>
              </el-table-column>
              <el-table-column prop="leftdays" :label="$t('remainingdaysofannualleave')" width="200">
                <template slot-scope="scope">
                  {{scope.row.yearDays != null ? scope.row.yearDays - scope.row.alreadyDays + $t('time.day') : "-"}}
                </template>
              </el-table-column>
              <el-table-column prop="id" :label="$t('numberofannualleavedays')">
                <template slot-scope="scope">
                  <el-button size="small" @click="changeAltime(scope.row)">{{ $t('setup') }}</el-button>
                </template>
              </el-table-column>
          </el-table>
        </div>
      </div>
      <el-dialog :title="$t('pleasesetthetimelimitforannualleave')" v-if="Alshow" :visible.sync="Alshow" @close="delAltime()" width="500px">
        <el-form label-width="8rem">
          <el-form-item :label="$t('setthenumberofannualleavedaysperyear')" >
            <el-input v-model="Alchange.yearDays" type="number" min="0" :placeholder="$t('pleaseenterdays')"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="default" @click="delAltime()">{{ $t('btn.cancel') }}</el-button>
          <el-button type="primary" @click="chgAltime()">{{ $t('btn.determine') }}</el-button>
        </div>
      </el-dialog>
    </div>

    <div v-if="displayTable && apk && apk2 == 8" class="tops" :style="'height:' +hubs+'px'">
        <!-- 公共 -->
        <div class="ctons" style="width: 98%;">
          <div class="flex">
            <div>
              <span>{{ $t('leavetype') }}</span>
              <el-select v-model="leaveTypeItem" :placeholder="$t('pleaseselectthetypeofleave')" @change="leaveTypeChange()" style="width: 180px" size="small"  filterable="true">
                  <span v-for="item in leaveTypeList" :key="item.leaveCode">
                  <el-option :label="item.leaveName" :value="item.leaveCode"></el-option>
                  </span> 
              </el-select>
            </div>
            <template v-if="permissions.leaveAll">
              <div>
                <span>{{ $t('departmentofscreening') }}</span>
                <el-cascader
                size="small"
                @change="departmentOptionsChg"
                v-model="departmentSel"
                :options="departmentOptions"
                :placeholder="$t('qing-xuan-ze-bu-men')"
                :show-all-levels="false"
                :props="{ checkStrictly: true }"
                clearable></el-cascader>
              </div>
              <div>
                <span>{{ $t('personnelselection') }}</span>
                <el-select v-model="userSelId" :placeholder="$t('pleaseselectthepersonaskingforleave')" clearable @change="userChg()" style="width: 180px" size="small" v-show="permissions.leaveAll" filterable="true">
                    <span v-for="(item, index) in users" :key="index">
                    <el-option :label="item.name" :value="item.id"></el-option>
                    </span> 
                </el-select>
              </div>
              <div style="margin:0 10px 0 40px">
                <el-button size="small" type="primary" @click="listSynchronize" :loading="synchronizeLoading">{{ $t('synchronizefromStaple') }}</el-button>
              </div>
            </template>
            
          </div>
            <el-table key="apk2is8" v-loading="loading" :data="vacationList" style="width: 100%" height="94%">
                <el-table-column prop="name" :label="$t('screening.employeename')" min-width="120" fixed="left"></el-table-column>
                <el-table-column :label="$t('periodofvalidity')" min-width="250" align="center">
                  <template slot-scope="scope">
                    <span>{{scope.row.startTime == null && scope.row.endTime == null ? '~ ~' : (scope.row.startTime + '\u3000~\u3000' + scope.row.endTime)}}</span>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('combination')" min-width="100" align="center">
                  <template slot-scope="scope">
                    <span>{{scope.row.quotaInDays == null && scope.row.quotaInHours == null ? '-' : (scope.row.quotaInDays == null ? scope.row.quotaInHours + $t('time.hour') : scope.row.quotaInDays + $t('time.day'))}}</span>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('beenused')" min-width="100" align="center">
                  <template slot-scope="scope">
                    <span>{{scope.row.usedInDays == null && scope.row.usedInHours == null ? '-' : (scope.row.usedInDays == null ? scope.row.usedInHours + $t('time.hour') : scope.row.usedInDays + $t('time.day'))}}</span>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('remainingamount')" min-width="100" align="center">
                  <template slot-scope="scope">
                    <span>{{scope.row.leftInDays == null && scope.row.leftInHours == null ? '-' : (scope.row.leftInDays == null ? scope.row.leftInHours + $t('time.hour') : scope.row.leftInDays + $t('time.day'))}}</span>
                  </template>
                </el-table-column>
            </el-table>
            <div class="poss">
                <el-pagination
                  @size-change="vacationSizeChange"
                  @current-change="vacationCurrentChange"
                  :current-page="page"
                  :page-sizes="[50]"
                  :page-size="50"
                  layout="total, sizes, prev, pager, next"
                  :total="total">
                </el-pagination>
          </div>
        </div>
    </div>
<!-- --------- -->
  </div>
  <!-- 请假单详情 -->
  <el-dialog :title="$t('leaveForm')" :visible.sync="dialog" width="1000px" @close="bangd()">
    <!-- 表单 -->
    <el-form ref="addForm" :model="addForm" label-width="80px" :rules="addFormRules">
        <!-- 请假人 -->
        <el-form-item :label="$t('leavepeople')" prop="ownerId"  style="width: 300px;display: inline-block;">
            <!--普通员工只能自己填报自己的 -->
            <el-select v-model="addForm.ownerId" @change="selts()" :placeholder="$t('pleaseselectthepersonaskingforleave')" style="width: 240px" :disabled="true" filterable="true">
                <span v-for="(item, index) in users" :key="index">
                <el-option :label="item.name" :value="item.id"></el-option>
                </span>
            </el-select>
        </el-form-item>
        <!-- 电话 -->
        <el-form-item :label="$t('phone')" prop="tel" style="width: 300px;display: inline-block;">
            <el-input ref="ipts" v-model="addForm.tel" :placeholder="$t('defaultText.PleaseEnterYourPhone')" style="width: 250px;"></el-input>
        </el-form-item>
        <!-- 单选 -->
        <el-form-item style="display: block" :label="$t('lengthunit')">
            <el-radio-group v-model="addForm.timeType" @change="chanRadio()">
                <el-radio label="0">{{ $t('accordingdays') }}</el-radio>
                <el-radio label="1">{{ $t('leavehour') }}</el-radio>
            </el-radio-group>
        </el-form-item>
        <!-- 时间选择 -->
        <el-form-item :label="flg ? $t('optiondate') : $t('other.timeSelection')" style="width: 74%;margin-right:500px">
            <el-col :span="9">
                <el-date-picker v-if="flg" type="date" :placeholder="$t('time.startDate')" value-format="yyyy-MM-dd"  v-model="addForm.startDate" style="width: 240px;" @blur="datas()"></el-date-picker>
                <el-date-picker v-else type="date" :placeholder="$t('time.startDate')" value-format="yyyy-MM-dd" v-model="addForm.startDate" style="width: 240px;" @change="datasss()"></el-date-picker>
            </el-col>
            <el-col class="line" v-if="flg" :span="2">-</el-col>
            <el-col :span="9">
                <el-date-picker v-if="flg" type="date" :placeholder="$t('time.endDate')" value-format="yyyy-MM-dd" :picker-options="pickerOptionsEnd" v-model="addForm.endDate" style="width: 250px;" @blur="datas()"></el-date-picker>
                <!-- <el-select v-else v-model="addForm.timeHours" placeholder="请假时长" @change="chanSele()">
                    <el-option v-for="(item, index) in options" :key="index" :label="item" :value="item"></el-option>
                </el-select> -->
            </el-col>
        </el-form-item>
        <!-- 请假天数 -->
        <el-form-item :label="flg ? $t('leavedays') : $t('leavetime')" prop="timeDays" style="margin-right: 500px">
           <!-- {{flg ? addForm.timeDays : addForm.timeHours}}{{flg ? '天' : '小时'}} -->
           <!-- <div v-if="flg">{{addForm.timeDays}} 天</div> -->
           <div v-if="flg"> <el-input v-model="addForm.timeDays" @blur="inputs()" @input="addForm.timeDays=addForm.timeDays.replace(/[^\d.]/g,'')" style="width: 100px; margin-right: 20px;"></el-input> {{ $t('time.day') }}</div>
           <div v-else>
              <el-input v-model="addForm.timeHours" @blur="inputss()" @input="addForm.timeHours=addForm.timeHours.replace(/[^\d.]/g,'')" style="width: 100px; margin-right: 20px;"></el-input> {{ $t('time.hour') }}
           </div>
        </el-form-item>
        <!-- 备注 -->
        <el-form-item :label="$t('bei-zhu')" style="width: 100%">
            <el-input type="textarea" v-model="addForm.remark" :rows="5" style="width: 62%" maxlength="100" show-word-limit></el-input>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialog = false">{{ $t('btn.cancel') }}</el-button>
      <el-button type="primary" @click="determine()">{{ $t('btn.determine') }}</el-button>
    </span>
  </el-dialog>
 
  </section>
</template>

<script>
import { config, error } from 'dingtalk-jsapi';
export default {
  name: "expense",
  components: {},
  props: {},
  data() {
    //验证手机号
    var checkTel = (rule, value, callback) =>{
        if (!value) {
            return callback(new Error(this.$t('phonenumbercannotbeempty')));
        } else {
            const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/
            if (reg.test(value)) {
                callback();
            } else {
                return callback(new Error(this.$t('pleaseenterthecorrectcellphonenumber')));
            }
        }
    };
    var checks = (rule, value, callback) => {
      if (!value) {
            return callback(new Error(this.$t('leavedayscannotbeempty')));
        } else {
            if (value > this.timeChoose) {
              return callback(new Error(this.$t('daysbeyondthecurrentlyselecteddat')));
            } else {
              callback();
            }
        }
    };
    return {
      addFormRules: {
        ownerId: [{ required: true, message: this.$t('pleaseselectthepersonaskingforleave'), trigger: "blur" }],
        tel: [{required: true, validator: checkTel, trigger: 'blur'}],
        timeDays: [{required: true, validator: checks, trigger: 'blur'}],
        leaveType: [{ required: true, message: this.$t('pleaseselectthetypeofleave'), trigger: "blur" }],
        projectAuditorJson: [{ required: true, message: this.$t('pleaseselectapprover'), trigger: "blur" }]
      },
      user: JSON.parse(sessionStorage.getItem("user")),
      shuz: [this.$t('personalleaveisallowed'), this.$t('leaveisallowed'), this.$t('annualleaveisallowed'), this.$t('maternityleaveisallowed')],
      ins: 0,
      addForm: {
        timeType: '0',
        startDate: this.getCurrentTime(),
        endDate: this.getCurrentTime(),
        timeDays: 1,
        leaveType: 0,
        ownerId: '',
        // indate: this.getCurrentTime(),
        timeHours: 8,
        tel: '',
        remark: '',
        projectAuditorJson: ''
      },
      displayTable: false,
      users: [], // 人员信息
      flg: true,
      createDate: [],
      pickerOptionsEnd: {
          disabledDate: (time) => {
          if (this.addForm.startDate) {
              return time.getTime() < new Date(this.addForm.startDate).getTime() - 86400000;
          }
          return time.getTime() <= new Date(this.createDate).getTime() - 86400000;
          },
      },
      pickerOptionsEnds: {
        disabledDate: (time) => {
          if (this.statData) {
              return time.getTime() < new Date(this.statData).getTime() - 86400000;
          }
          return time.getTime() <= new Date(this.createDate).getTime() - 86400000;
          },
      },
      options: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
      tableData: [],
      page: 1,
      size: 20,
      isAuditList: '',
      total:0,
      apk: false,
      keyword: '',
      statData: this.getCurrentTimes(),
      endData: this.getCurrentTime(),
      statisticalList: [],
      loading: false,
      timeChoose: 1,
      permissions: JSON.parse(sessionStorage.getItem("permissions")),
      typess: [{name: this.$t('leave.personalLeave'),id: 0},{name: this.$t('leave.sickLeave'),id: 1},{name: this.$t('leave.annualLeave'),id: 2},{name: this.$t('leave.maternityLeave'),id: 3},{name: this.$t('leave.marriageLeave'),id: 4},{name: this.$t('leave.bereavementLeave'),id: 5},{name: this.$t('leave.leave'),id: 6},{name: this.$t('leave.paternityLeave'),id: 7},{name: this.$t('leave.other'), id: 8}],
      statuss: [{
        name: this.$t('state.approved'),
        id: 0
      },{
        name: this.$t('state.WaitingAudit'),
        id: 1
      },{
        name: this.$t('btn.rejected'),
        id: 2
      },{
        name: this.$t('state.undone'),
        id: 3
      }],
      createDatelis: '',
      ownerIds: '',
      type: '',
      code: '',
      falg: 0,
      dialog: false,
      adform: {},
      affId: '',
      qjType: [
        {name: this.$t('leave.personalLeave'), id: 0},
        {name: this.$t('leave.sickLeave'), id: 1},
        {name: this.$t('leave.annualLeave'), id: 2},
        {name: this.$t('leave.maternityLeave'), id: 3},
        {name: this.$t('leave.marriageLeave'), id: 4},
        {name: this.$t('leave.bereavementLeave'), id: 5},
        {name: this.$t('leave.leave'), id: 6},
        {name: this.$t('leave.paternityLeave'), id: 7},
        {name: this.$t('leave.other'), id: 8}
      ],
      // 
      apk2: false,
      sdata:[],
      dataArray:[],
      sdefaultProps: {
          children: 'children',
          label: 'label'
      },
      depData: null,
      isAdd : false,
      sindex : 0,
      curDeptId : null,
      curUserId : null,
      dialogVisible: false,
      soption : null,

      Alshow: false,
      Alchange: {yearDays:null,userId:null},
      AlchangeP: [],
      susers: [],
      keywordAl: '',
      NcurDeptId:[],
      Nsdata : [],
      AlData : [],
      iAlDataS: [],
      iAlData : [],

      // ---------
      txselnum: 0,

      approverList: [],
      isDingding: 0,
      vacationList: [],
      leaveTypeList: [],
      leaveTypeItem: '',
      departmentOptions: [],
      departmentSel: [],
      userSelId: '',
      synchronizeLoading: false,
      kuanBl: 0,
      hubs: 0
    };
  },
  computed: {},
  watch: {},
  created() {
    let widTHBul = document.documentElement.clientWidth - 440
    this.kuanBl = widTHBul
    this.hubs = (document.documentElement.clientHeight || document.body.clientHeight) - 70
    let height = window.innerHeight;
            this.tableHeight = height - 195;
            const that = this;
            window.onresize = function temp() {
                that.tableHeight = window.innerHeight - 195;
            };
    // console.log('user',this.user);
    this.isDingding = this.user.timeType.syncDingding
  },

  mounted() {
    if(this.isDingding){
      this.bills(false,2)
      this.staffs(7,['7'])
      this.getUsers()
    }else{
      this.getUsers() // 获取人员信息
    this.getDepartment();
    this.getAl();
    this.getApproverList()
    }
  },
  filters: {},
  methods: {
    // 导出请假单
    exportLeave(){
      let param = {}
      if(this.code !== ''){
        param.status = this.code
      }
      if(this.type !== ''){
        param.leaveType = this.type
      }
      if(this.createDate && this.createDate.length){
        param.startTime = this.createDate[0]
        param.endTime = this.createDate[1]
      }
      // console.log(this.code,this.type,param);
      // return
      this.http.post('/leave-sheet/exportLeave',param,
      res => {
        if(res.code == 'ok'){
          var filePath = res.data;
          const a = document.createElement('a'); // 创建a标签
          a.setAttribute('download', '请假单');// download属性
          a.setAttribute('href', filePath);// href链接
          a.click(); //自执行点击事件
          a.remove();
        }else{
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      },err => {
        this.$message({
          message: err,
          type: 'error'
        })
      })
    },

    // 从钉钉同步假期剩余表
    listSynchronize(){
      this.synchronizeLoading = true
      this.http.post('/dingding/syncLeaveQuotaData',{
        companyId: this.user.companyId
      },res => {
        if(res.code == 'ok'){
          this.synchronizeLoading = false
          this.$message({
            message: this.$t('synchronoussuccess'),
            type: 'success'
          })
          this.getVacationList()
          this.page = 1
          this.departmentSel = []
          this.userSelId = ''
        }else {
          this.synchronizeLoading = false
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      },err => {
        this.synchronizeLoading = false
        this.$message({
          message: err,
          type: 'error'
        })
      })
    },

    // 获取部门列表
    getDepartmentOptions(){
      this.http.post(this.port.manage.depList,{
      },res =>{
        if(res.code == 'ok'){
          // console.log('getDepartment',res.data);
          this.departmentOptions = this.changeArr(res.data)
        }else {
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      },err => {
        this.$message({
          message: err,
          type: 'error'
        })
      })
    },
    departmentOptionsChg(){
      // console.log(this.departmentSel);
      this.page = 1
      this.getVacationList(1)
    },
    userChg(){
      // console.log(this.userSelId);
      this.page = 1
      this.getVacationList(1)
    },


    // 获取剩余假期信息列表
    getVacationList(e){
      this.loading = true
      let item = {}
      if(e){
        item = {
          companyId: this.user.companyId,
          pageIndex: this.page,
          leaveCode: this.leaveTypeItem
        }
        if(this.departmentSel.length != 0){
          item.departmentId = this.departmentSel[this.departmentSel.length - 1]
        }
        if(this.userSelId != ''){
          item.userId = this.userSelId
        }
        // if()
      }else{
        item = {
          companyId: this.user.companyId,
          // leaveCode: '',
          // userId: '',
          pageIndex: this.page,
          // departmentId: ''
        }
      }
      this.http.post('/user-yearleave-setting/getDingDingLeaveQt',item,
      res => {
        if(res.code == 'ok'){
          this.vacationList = res.data.records
          this.total = res.data.total
          if(!e){
            this.leaveTypeList = res.data.leaveTypeList
          this.leaveTypeItem = res.data.defaultLeaveType.leaveCode
          }
          

          this.loading = false
        }else {
          this.loading = false
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      },err => {
        this.loading = false
        this.$message({
          message: err,
          type: 'error'
        })
      })
    },
    leaveTypeChange(){
      // console.log(this.leaveTypeItem);
      this.page = 1
      this.getVacationList(1)
    },




    getApproverList(){
      this.http.post('/project/getMyParticiPMList',{
      },res => {
        if(res.code == 'ok'){
          this.approverList = res.data
          if(this.approverList.length == 0){
            this.$message({
              message: this.$t('configureanapprover'),
              type: 'warning'
            })
          }
          // console.log('list',res.data);
        }else {
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      },error => {
        this.$message({
          message: error,
          type: 'error'
        })
      })
    },

    changeAltime(e){
      if(e == 0 && this.AlchangeP.length == 0){
          this.$message(this.$t('selecttheitemsyouwanttobatchset'))
          return
      }else if(e != 0){
        this.Alchange = JSON.parse(JSON.stringify(e))
      }
      this.Alshow = true
    },
    selPchg(e){
      this.AlchangeP = e
    },
    searchAl(){
      this.iAlDataS = []
      for (let i = 0; i < this.iAlData.length; i++) {
        if (this.iAlData[i].userName.indexOf(this.keywordAl) != -1) {
          this.iAlDataS.push(this.iAlData[i])
        }
      }
    },
    clearsearchAl(){
      this.iAlDataS = this.iAlData
    },
    delAltime(){
      this.Alshow = false
      this.Alchange = {yearDays:null,userId:null}
    },
    chgAltime(){
      let chgPar = {}
      let userids = ''
      let Alpost = ''
      if(this.Alchange.userId == null && this.AlchangeP != []){
        Alpost = "/user-yearleave-setting/saveBatch"
        for (let i = 0; i < this.AlchangeP.length; i++) {
          userids = userids + "," + this.AlchangeP[i].userId
        }
        chgPar = {userIds: userids.slice(1), companyId: this.user.companyId, yearDays: this.Alchange.yearDays}
      }else {
        Alpost = "/user-yearleave-setting/save"
        userids = this.Alchange.userId
        chgPar = {userId: userids, companyId: this.user.companyId, yearDays: this.Alchange.yearDays}
      }
      this.http.post(Alpost,chgPar,
          res => {
            if(res.code == "ok"){
              this.Alshow = false,
              this.Alchange = {yearDays:null,userId:null},
              this.AlchangeP = []
              this.getAl()
            }else{
              this.$message({
                message: res.msg,
                type: "error"
              })
            }
          },
          error => {
            this.Alshow = false
            this.$message({
                message: error,
                type: "error"
              })
          }
      )
    },
    getAl(){
      this.http.get('/user-yearleave-setting/list',
          res => {
            if(res.code == "ok"){
              this.iAlData = res.data
              this.iAlDataS = this.iAlData
              if(this.apk2 == 6){
                this.selAl()
              }
            } else {
              this.$message({
                message: res.msg,
                type: "error"
              })
            }
          },
          error => {
            this.Alshow = false
            this.$message({
                message: error,
                type: "error"
              })
          }
      )
    },
    selAl(){
        let e = this.$refs.selectAl.getCheckedNodes()[0]
        if(e == undefined){
          this.iAlDataS = this.iAlData
        }else{
          this.iAlDataS = []
        for (let i = 0; i < this.iAlData.length; i++) {
          if (e.label == this.iAlData[i].department) {
            this.iAlDataS.push(this.iAlData[i])
          }
        }
        }
    },
    // ---------

    handleNodeClick(data) {
                if(this.depData == null || data.id != this.depData.id) {
                    this.depData = data;
                    // console.log("depdata",this.depData);
                    this.getSettings();
                }
            },

    getSettings() {
                this.http.post('/audit-workflow-setting/get',{deptId: this.depData.id,type: 1},
                    res => {
                        this.listLoading = false;
                        if (res.code == "ok") {
                            this.dataArray = res.data;
                            // console.log("请求1",res.data);
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.listLoading = false;
                        this.$message({
                            message: error,
                            type: "error"
                        });
                        }
                    );
            },
    // 获取部门列表
    getDepartment() {
                this.http.post( this.port.manage.depList, {},
                res => {
                    if (res.code == "ok") {
                        var list = res.data , list1 = JSON.parse(JSON.stringify(res.data));
                        this.sdata = list;
                        this.soption = [
                          {value: 1 , label : this.$t('lable.department') , children : this.changeArr(list1)},
                          {value: 2 , label : this.$t('designatedpersonnel'),children : this.susers}
                        ]
                        this.Nsdata = list1
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

    changeArr(arr) {
                for (var i = 0; i < arr.length; i++) {
                    if(arr[i].id != -1 && arr[i].id != 0) {
                        if (arr[i].children != null && arr[i].children.length>0) {
                            arr[i].children = this.changeArr(arr[i].children);
                        }
                        arr[i].id && (arr[i].value = arr[i].id);
                        delete arr[i].id;
                    }
                }
                for(var i in arr) {
                    if(arr[i].id == -1 || arr[i].id == 0) {
                        arr.splice(i,1)
                    }    
                }
                return arr;
            },
    showNodeDialog(index) {
              this.isAdd = true;
              this.sindex = index;
              this.curDeptId = null;
              this.curUserId = null;
              this.dialogVisible = true;
            },
    editNodeDialog(index, item) {
                //检查是否可编辑
                this.http.post('/audit-workflow-setting/checkNodeInUse',{auditDeptId: item.auditDeptId, deptId: this.depData.id,type: 1},
                    res => {
                        this.listLoading = false;
                        if (res.code == "ok") {
                            this.isAdd = false;
                            this.sindex = index;
                            this.curUserId = item.userId;
                            this.dialogVisible = true;
                            this.curDeptId = item.auditDeptId;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.listLoading = false;
                        this.$message({
                            message: error,
                            type: "error"
                        });
                        }
                    );
                
            },
    addNode() {
              this.dialogVisible = false;
              if (this.curDeptId == null) return;
              var node = this.$refs.deptCascader.getCheckedNodes()[0];
              // console.log("node",node);
              
              if (this.isAdd) {
                if(node.path[0] == 1){
                  var node = {auditDeptId: node.value, auditDeptName: node.label, auditorType: 1};
                }else if(node.path[0] == 2){
                  var node = {userId: node.value, userName: node.label, auditorType: 2};
                }
                this.dataArray.splice(this.sindex, 0, node);
                
              } else {
                //编辑
                this.dataArray[this.sindex].auditDeptId = node.value;
                this.dataArray[this.sindex].auditDeptName = node.label;
              }
            },
    deleteNode() {
                this.dialogVisible = false;
                this.dataArray.splice(this.sindex, 1);
            },
    submitInsert() {
                this.http.post('/audit-workflow-setting/add',{json:JSON.stringify(this.dataArray), deptId: this.depData.id, type:1},
                            res => {
                                this.listLoading = false;
                                if (res.code == "ok") {
                                    this.$message({
                                        message: this.$t('savesuccess'),
                                        type: "success"
                                    });
                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: "error"
                                    });
                                }
                            },
                            error => {
                                this.listLoading = false;
                                this.$message({
                                    message: error,
                                    type: "error"
                                });
                                }
                            );
            },
    
    // 
    approve(item) {
      //审核通过
      this.http.post('/leave-sheet/approve', {id:item.id
        },
        res => {
            if (res.code == "ok") {
                this.bills(true);
            } else {
                this.$message({
                message: res.msg,
                type: "error"
                });
            }
        },
        error => {
            this.$message({
                message: error,
                type: "error"
            });
        });
    },
    deny(item) {
      //审核驳回
      this.http.post('/leave-sheet/deny', {id:item.id
        },
        res => {
            if (res.code == "ok") {
                this.bills(true);
            } else {
                this.$message({
                message: res.msg,
                type: "error"
                });
            }
        },
        error => {
            this.$message({
                message: error,
                type: "error"
            });
        });
    },
    getUsers() {
      // this.http.post(this.port.manage.list, {
      //       departmentId: -1,
      //       pageIndex: 1,
      //       // pageSize: 99999
      //       pageSize: -1
      //   },
      this.http.post('/user/getSimpleActiveUserList', {},
        res => {
            if (res.code == "ok") {
                // this.users = res.data.records;
                this.users = res.data;
                for (let i = 0; i < this.users.length; i++) {
                  this.susers.push({value:this.users[i].id,label:this.users[i].name})
                }
                //只能自己填报自己的请假单
                this.addForm.ownerId = this.user.id;
                this.addForm.status = 1;
                this.addForm.tel = this.user.phone
            } else {
                this.$message({
                message: res.msg,
                type: "error"
                });
            }
        },
        error => {
            this.$message({
                message: error,
                type: "error"
            });
        });
    },
    // 员工请假填报点击事件
    ssl(index) {
      this.ins = index;
      this.addForm.leaveType = index
    },
    staffs(key, keyPath) {
      // console.log("keypath",key,keyPath)
      if (keyPath[0] == '1') {
        this.displayTable = false;
        this.apk = false
      } else if(keyPath[0] == '2' || keyPath[0] == '3') {
        this.displayTable = true;
        this.apk = false
      } else if(keyPath[0] == '4'){
        this.displayTable = true;
        this.apk = true
        this.apk2 = 4
        this.statistical()
      } else if(keyPath[0] == '5'){
        this.displayTable = true;
        this.apk2 = 5
        this.apk = true
      } else if(keyPath[0] == '6'){
        this.NcurDeptId = []
        this.displayTable = true;
        this.apk2 = 6
        this.apk = true
        this.getAl()
      } else if(keyPath[0] == '7'){
        this.displayTable = true;
        this.apk = false
        this.bills(false,2)
      } else if(keyPath[0] == '8'){
        this.apk2 = 8
        this.displayTable = true
        this.apk = true
        this.userSelId = ''
        this.page = 1
        this.departmentSel = []
        this.getVacationList()
        this.getDepartmentOptions()
      }
    },
    bills(audit, tr){
      if(tr) {
        this.code = ''
        this.createDate = []
        // this.ownerIds = ''
        this.type = ''
        if(tr == 1) {
          this.falg = 1
          this.code = 1
        } else if(tr == 2) {
          this.code = ''
          this.falg = 0
        } else {
          this.falg = 0
        }
      } else {
        this.falg = false
      }
      this.tableData = []
      this.displayTable = true;
      this.isAuditList = audit;
      this.loading = true
      this.page = '1'
      var param = { pageIndex: this.page,
                    pageSize: this.size,
                    status: this.code,
                    // createDate: this.createDate,
                    startDate: this.createDate == null ? '' : this.createDate[0],
                    endDate: this.createDate == null ? '' : this.createDate[1],
                    ownerId: this.ownerIds,
                    leaveType: this.type,
                  };
      if (this.isAuditList) {
        param.status = 1;
      }
      this.list = [];
      // this.total = 0;
      this.http.post('/leave-sheet/list', param,
        res => {
            if (res.code == "ok") {
              this.tableData = res.data.records
              this.total = res.data.total
              this.loading = false
            } else {
              this.loading = false
                this.$message({
                message: res.msg,
                type: "error"
                });
            }
        },
        error => {
          this.loading = false
            this.$message({
                message: error,
                type: "error"
            });
        });
    },
    billss() {
      this.page = 1
      var param = {pageIndex: this.page,
                    pageSize: this.size,
                    status: this.code,
                    // startDate: this.createDate,
                    startDate: this.createDate == null ? '' : this.createDate[0],
                    endDate: this.createDate == null ? '' : this.createDate[1],
                    ownerId: this.ownerIds,
                    leaveType: this.type,
                  };
      this.http.post('/leave-sheet/list', param,
        res => {
            if (res.code == "ok") {
              this.tableData = res.data.records
              this.total = res.data.total
              this.loading = false
            } else {
              this.loading = false
                this.$message({
                message: res.msg,
                type: "error"
                });
            }
        },
        error => {
          this.loading = false
            this.$message({
                message: error,
                type: "error"
            });
        });
    },
    // 判断日期是否补零了
    buling(das) {
      var rqi = das.split('-')
      rqi[1].length <= 1 ? rqi[1] = '0' + rqi[1] : rqi[1] = rqi[1]
      rqi[2].length <= 1 ? rqi[2] = '0' + rqi[2] : rqi[2] = rqi[2]
      var zong = rqi[0] + '-' + rqi[1] + '-' + rqi[2]
      return zong
    },
    submits(){
      // console.log(this.addForm)
      // return
        this.$refs.addForm.validate(valid => {
          this.addForm.endDate = this.buling(this.addForm.endDate)
          this.addForm.startDate = this.buling(this.addForm.startDate)
          // this.addForm.projectAuditorJson = JSON.stringify(this.addForm.projectAuditorJson)
          if (valid) {
            this.http.post('/leave-sheet/add', this.addForm,
            res => {
                if (res.code == "ok") {
                    this.$message({
                      message: this.$t('message.fillinsuccessfully'),
                      type: "success"
                    });
                    this.addForm.timeType = '0'
                    this.addForm.startDate = this.getCurrentTime()
                    this.addForm.endDate = this.getCurrentTime()
                    this.addForm.timeDays = 1
                    this.addForm.leaveType = 0
                    this.addForm.timeHours = 8
                    this.addForm.remark = ''
                    this.addForm.projectAuditorJson = ''
                    // this.addForm = {
                    //   timeType: '0',
                    //   startDate: this.getCurrentTime(),
                    //   endDate: this.getCurrentTime(),
                    //   timeDays: 1,
                    //   leaveType: 0,
                    //   ownerId: '',
                    //   // indate: this.getCurrentTime(),
                    //   timeHours: 8,
                    //   tel: '',
                    //   remark: '',
                    //   projectAuditorJson: ''
                    // }
                    this.flg = true
                } else {
                    this.$message({
                      message: res.msg,
                      type: "error"
                    });
                }
            },
            error => {
                this.$message({
                    message: error,
                    type: "error"
                });
            });
          } else {
            return false;
          }
        });
    },
    txselts(a,b){
      this.selts()
      // console.log('txselts',this.addForm.ownerId);
      if(a == 6 && this.addForm.ownerId != ''){
        this.http.post('/leave-sheet/getOTAvaiDays',{ userId:b },
        res => {
          if(res.code == "ok") {
            // console.log('post',res.data);
            if(res.data < 0.5){
              this.txselnum = 0
            }else{
              this.txselnum = res.data.toFixed(1)
            }
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.$message({
            message: error,
            type: "error"
          });
        })
      }
    },
    selts() {
      for(var i in this.users) {
        if(this.users[i].id == this.addForm.ownerId) {
          this.addForm.tel = this.users[i].phone
        }
      }
    },
    chanRadio() {
      // console.log(this.addForm.timeType)
        if(this.addForm.timeType == '0') {
            this.flg = true
            this.addForm.startDate = this.getCurrentTime()
            this.addForm.endDate = this.getCurrentTime()
            this.addForm.timeType = '0'
            this.addForm.timeDays = '1'
            this.addForm.timeHours = '8'
        } else {
            this.flg = false
            this.addForm.startDate = this.getCurrentTime()
            this.addForm.endDate = this.getCurrentTime()
            this.addForm.timeType = '1'
            this.addForm.timeHours = 1,
            this.addForm.timeDays = 1
        }
    },
    // 计算日期
    datas() {
        // this.addForm.timeDays = this.DateDiff(this.addForm.startDate, this.addForm.endDate)
        if(this.addForm.startDate > this.addForm.endDate) {
          this.addForm.endDate = this.addForm.startDate
        }
        this.addForm.timeDays = this.countWorkDay(this.addForm.startDate, this.addForm.endDate)
        this.timeChoose = this.addForm.timeDays
        this.addForm.timeHours = this.addForm.timeDays * 8
    },
    datasss() {
      // console.log(123)
      this.addForm.endDate = this.addForm.startDate
    },
    DateDiff(sDate1,  sDate2){
       var  aDate,  oDate1,  oDate2,  iDays  
       aDate  =  sDate1.split("-")  
       oDate1  =  new  Date(aDate[1]  +  '-'  +  aDate[2]  +  '-'  +  aDate[0])
       aDate  =  sDate2.split("-")  
       oDate2  =  new  Date(aDate[1]  +  '-'  +  aDate[2]  +  '-'  +  aDate[0])  
       iDays  =  parseInt(Math.abs(oDate1  -  oDate2)  /  1000  /  60  /  60  /24)
       return  iDays + 1
    },
    stringToDate(dateString){
        dateString = dateString.split('-');
        return new Date(dateString[0], dateString[1] - 1, dateString[2]);
    },
    countWorkDay(date1, date2){
        date1 = this.stringToDate(date1);
        date2 = this.stringToDate(date2);
        var delta = (date2 - date1) / (1000 * 60 * 60 * 24) + 1; // 计算出总时间
        var weeks = 0;
        for(var i = 0; i < delta; i++){
            if(date1.getDay() == 0 || date1.getDay() == 6) weeks ++;  // 若为周六或周天则加1
            date1 = date1.valueOf();
            date1 += 1000 * 60 * 60 * 24;
            date1 = new Date(date1);
        }
        return delta - weeks;
    },
    chufas() {
      this.billss()
    },
    // 时间
    getTadeTime() {
        var time = new Date();
        return time.getHours() +':00:00'
    },
    // 日期
    getCurrentTime() {
        var _this = this;
    　　let yy = new Date().getFullYear();
    　　let mm = new Date().getMonth()+1;
    　　let dd = new Date().getDate();
    　　_this.gettime = yy +'-'+ mm +'-'+ dd;
    　  return  _this.gettime
    },
    getCurrentTimes() {
        var _this = this;
    　　let yy = new Date().getFullYear();
    　　let mm = new Date().getMonth()+1;
    　　let dd = new Date().getDate();
    　　_this.gettime = yy+'-'+mm+'-'+'01';
    　  return  _this.gettime
    },
    chanSele() {
        this.addForm.timeHours = parseInt(this.addForm.timeHours)
    },
    handleSizeChange(val){
      this.size = val;
      this.bills()
    },
    handleCurrentChange(val) {
      // console.log(val, 1, '1')
      this.page =  val;
      this.bills()
    },
    vacationSizeChange(val){
      this.size = val
      this.getVacationList(1)
    },
    vacationCurrentChange(val){
      this.page = val
      this.getVacationList(1)
    },
    statistical() {
      this.loading = true
      this.http.post('/leave-sheet/summaryData', {
        keyword: this.keyword,
        startDate: this.statData,
        endDate: this.endData
      },
        res => {
            if (res.code == "ok") {
                this.statisticalList = res.data
                this.loading = false
            } else {
              this.loading = false
                this.$message({
                message: res.msg,
                type: "error"
                });
            }
        },
        error => {
            this.$message({
                message: error,
                type: "error"
            });
        });
    },
    //
    inputs() {
      var str = this.addForm.timeDays + ''
      if(str.indexOf('.') != '-1') {
        var s = str.split('.')[0]
        var st = str.split('.')[1]
        var sts = st.split('')
        this.addForm.timeDays = s + '.' + sts[0]
      }
    },
    inputss() {
      if(this.addForm.timeHours <= 0) {
        this.addForm.timeHours = 1
      } else if(this.addForm.timeHours > 8) {
        this.addForm.timeHours = 8
      } else {
        if(this.addForm.timeHours.indexOf('.') != '-1') {
          var str = this.addForm.timeHours
          // console.log(str)
          if(str.indexOf('.') != '-1') {
            var s = str.split('.')[0]
            var st = str.split('.')[1]
            var sts = st.split('')
            this.addForm.timeHours = s + '.' + sts[0]
          }
        }
      }
      // console.log(this.addForm)
    },
    deletes(e) {
      this.$confirm(this.$t('deleteit'), this.$t('other.prompts'), {
          //type: 'warning'
      }).then(() => {
          this.http.post('/leave-sheet/delete', {id:e.id},
          res => {
              if (res.code == "ok") {
                  this.bills();
                  this.$message({
                      message: this.$t('message.successfullyDeleted'),
                      type: "success"
                  });
              } else {
                  this.$message({
                  message: res.msg,
                  type: "error"
                  });
              }
          },
          error => {
              this.$message({
                  message: error,
                  type: "error"
              });
          });
      });
    },
    editor(items) {
      this.dialog = true
      this.addForm.ownerId = items.ownerId
      this.addForm.tel = items.tel
      this.addForm.timeType = items.timeType + ''
      this.addForm.startDate = items.startDate
      this.addForm.endDate = items.endDate
      this.addForm.timeDays = items.timeDays
      this.addForm.timeHours = items.timeHours
      this.addForm.remark = items.remark
      this.affId = items.id
    },
    determine () {
      var adl = this.addForm
      adl.id = this.affId
      this.http.post('/leave-sheet/add', adl,
          res => {
              if (res.code == "ok") {
                  this.dialog = false
                  this.bills();
                  this.addForm = {
                    timeType: '0',
                    startDate: this.getCurrentTime(),
                    endDate: this.getCurrentTime(),
                    timeDays: 1,
                    leaveType: 0,
                    timeHours: '8',
                    tel: '',
                    remark: ''
                  }
                  this.getUsers()
              } else {
                  this.$message({
                  message: res.msg,
                  type: "error"
                  });
              }
          },
          error => {
              this.$message({
                  message: error,
                  type: "error"
              });
          });
    },
    bangd() {
      this.addForm = {
        timeType: '0',
        startDate: this.getCurrentTime(),
        endDate: this.getCurrentTime(),
        timeDays: 1,
        leaveType: 0,
        timeHours: '8',
        tel: '',
        remark: ''
      }
      this.getUsers()
    }
  }
};
</script>
<style scoped>
.addNode {
  cursor:pointer;
}
.addNode:hover {
  color:#20a0ff;
}
.apls {
  width: 200px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tups {
  width: 100%;
  height: 25px;
  position: relative;
  z-index: 99;
  overflow: hidden;
}
.tups img {
  height: 25px !important;
  position: relative;
  z-index: 99;
}
.viewer-canvas {
  position: absolute;
  z-index: 9 !important;
}
.icl {
  margin-top: -25px !important;
}
/* 费用报销标题 */
.headine {
  width: 100%;
  height: 46.4px;
  line-height: 46.4px;
  background: #fff;
  box-sizing: border-box;
}
.headine h3 {
  margin: 0;
  display: inline-block;
  box-sizing: border-box;
  color: #999;
}
.headine p {
  display: inline-block;
  margin: 0;
}
/* /费用报销标题 */
.sidebars {
  height: 100%;
  position: absolute;
  border-right: 1px solid #E6E6E6;
  z-index: 2;
  top: 0;
}
.sidebars h3 {
  margin: 0;
  line-height: 45px;
  background: #ffffff;
  font-weight: normal;
  color: #666;
  padding-left: 20px;
}
.sidebars .el-col-12 {
  width: 100%
}

.public {
  height: 230px;
  border-bottom: 1px solid #ddd;
}
.public .el-form-item {
 display: inline-block;
}
.pu_button {
  text-align: right;
  width: 100%;
  padding: 24px 30px;
  box-sizing: border-box;
}
.pu_bu_x .pu_bu_t {
  display: inline-block;
}
.pu_bu_x {
  margin-right: 20px;
  color: #20A0F7;
  cursor: pointer;
}
.pu_bu_t {
  color: #20A0F7;
  cursor: pointer;
  display: block; 
  float: right; 
  position: 
  relative; 
  top: -20px; 
  right: 63px;
}
.pu_table {
  margin-left: 10px;
}
.pu_bu_t:hover {
  color: #7bbcff;
}
.pu_bu_x:hover {
  color: #7bbcff;
}

/* 我的单据报销凭证 */
.staff{
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  background: #fff;
}

/*  */
.sdat{
    display: inline-block;
    width: 260px;
    margin-left: 13px;
}
.messages .el-form-item{
  display: inline-block;
}
.messages .el-date-editor.el-input, .el-date-editor.el-input__inner{
  width: 190px;
}

/* 我的报销单据 */
.search {
  position: relative;
  top: 20px;
  left: 20px;
}
.tables {
  margin-top: 50px;
  box-sizing: border-box;
  padding: 10px;
}
.informant .el-form-item {
  display: inline-block;
}
/* 侧边栏收索 */
.side {
  position: absolute;
  z-index: 2;
  border-right: 2px solid #DDDDDD;
  height: 100%;
  top: 0;
  width: 0;
}
.side .spans {
  width: 20px;
  height: 30px;
  border: 1px solid #DDDDDD;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  margin-top: -50%;
  text-align: center;
  z-index: 1;
  background: #fff;
}
.side .spans i{
  margin-top: 7px;
  color: #C0BFBF
}
.side:hover {
  border-right: 2px solid #20A0FF;
}
.side:hover .spans {
  border: 1px solid #20A0FF;
  background: #20A0FF;
}
.side:hover .spans i{
  color: #fff;
}

/* 右边整体页面 */
.contents {
  height: 100%;
  /* padding: 30px; */
  background: #F7F7F7;
  /* position: absolute; */
}

.submits {
  margin-left: 50%;

}
.waiting {
  color:orange;
}
.rejected {
  color:red;
}
/* 请假模块 */
.tops {
    width: 100%;
    position: relative;
    background: #f7f7f7;
    box-sizing: border-box;
    padding: 20px 0 0 200px;
}
.ctons {
    /* width: 86%; */
    height: 92%;
    overflow: hidden;
    background: #fff;
    padding: 30px 40px;
    box-sizing: border-box;
}
.ctons .el-form-item {
    display: inline-block;
}
.line {
    text-align: center;
    margin: 0 6px
}
.poss {
    position: fixed;
    bottom: 4px;
    right: 1%;
    box-sizing: border-box;
}
.flex {
  display: flex;
  padding: 0 0 20px 0;
  border-bottom: 1px solid #f2f2f2;
}
.flex span {
  color: #606266;
  display: inline-block;
  margin: 0 10px 0 20px;
}
</style>