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="isSyncData ? '7' : '1'" class="el-menu-vertical-demo" @select="staffs" background-color="#ffffff" text-color="#666666" :active-text-color="themeColor" 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="!isSyncData">
          <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 || permissions.leaveAudit">
            <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="2" @select="bills" @click="auditList()" v-if="permissions.leaveAudit">
              <i class="iconfont firerock-iconshenhe"></i>
              <span slot="title">{{ $t('qingJiaShenHe') }}</span>
            </el-menu-item>
            <el-menu-item index="3" @select="bills" @click="bills(false, 2)" >
              <i class="iconfont firerock-iconbaoxiaodan"></i>
              <span slot="title">{{ $t('singlelistofleave') }}</span>
            </el-menu-item>
            <!-- <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-icongongshitongji"></i>
                <span slot="title">{{ $t('for') }}</span>
              </template>
          </el-menu-item>

          <el-menu-item index="9" v-if="permissions.leaveStatistical">
              <template slot="title">
                <i class="iconfont firerock-icongongshitongji"></i>
                <span slot="title">{{ $t('restTime') }}</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-iconsetting"></i>
                <span slot="title">{{ $t('annualleavemanagement') }}</span>
              </template>
          </el-menu-item>
          </template>

          <!-- 钉钉环境对接 -->
          <template v-if="isSyncData">
            <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 && !isSyncData" 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%;overflow: auto;">
            <!-- 表单 -->
            <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 : '~'}} {{ addForm.timeType == 0 ? '天' : '小时' }}</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-if="user.userNameNeedTranslate != 1" 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>

                    <selectCat v-if="user.userNameNeedTranslate == 1" :size="'medium'" :widthStr="'240'" :subject="users" :subjectId="addForm.ownerId" :distinction="'1'" :disabled="true" @selectCal="selectCal"></selectCat>

                </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;margin-right: 400px" :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 label="1">{{ $t('leavehour') }}</el-radio>
                    </el-radio-group>
                </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-item label="相关凭证" style="width: 100%">
                  <el-upload action="#" list-type="picture-card" multiple ref="leaveApplicationFormUploadRef" :limit="5" :http-request="imageUpload" :file-list="leaveAndUploadPictures">
                      <i slot="default" class="el-icon-plus"></i>
                      <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                            <i class="el-icon-zoom-in"></i>
                          </span>
                          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                            <i class="el-icon-delete"></i>
                          </span>
                        </span>
                      </div>
                  </el-upload>
                </el-form-item>
                <!--请假流程显示-->
                <el-form-item :label="$t('other.approvalProcess')" style="width: 100%;color:#606266" >
                  <span v-for="(item, index) in curWorkflowList" :key="item.id" >
                    <span v-if="index>0"><i class="el-icon-right"></i></span>
                    <span><i class="el-icon-s-custom"></i></span>
                    <span v-if="user.userNameNeedTranslate == 1">
                      <span v-if="item.auditorType == 1"><TranslationOpenDataText type='departmentName' :openid='item.auditDeptName' ></TranslationOpenDataText>{{ $t('zhu-yao-fu-ze-ren') }}</span>
                      <TranslationOpenDataText type='userName' :openid='item.userName' v-if="item.auditorType == 2"></TranslationOpenDataText>
                    </span>
                    <span v-if="user.userNameNeedTranslate == 0">
                      {{item.auditorType == 1 ? (`${item.auditDeptName} ${$t('zhu-yao-fu-ze-ren')}`) : item.userName}}
                    </span>
                  </span>
                </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%;overflow: auto;">
          <div class="flex">
            <div>
              <el-select v-if="user.userNameNeedTranslate != 1" v-model="ownerIds" :placeholder="$t('pleaseselectthepersonaskingforleave')" clearable @change="chufas()" style="width: 120px" 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>
              <selectCat v-if="user.userNameNeedTranslate == 1" :size="'small'" :subject="users" :subjectId="ownerIds" :distinction="'3'" :disabled="false" :widthStr="'120'" :clearable="true" @selectCal="selectCal" v-show="permissions.leaveAll" style="width: 120px"></selectCat>
            </div>
            <div>
              <span style="color: #606266">{{ $t('leavetype') }}</span>
              <el-select v-model="type" :placeholder="$t('defaultText.pleaseChoose')" clearable @change="chufas()" style="width: 110px;" 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: 110px" 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: 110px" 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:250px"></el-date-picker>
            </div>
            <div>
              <el-button type="primary" v-if="!isAuditList" size="small" style="margin-left:20px" @click="exportLeave()">{{ $t('dao-chu-qing-jia-dan') }}</el-button>
            </div>
            <!--美莱德同步请假数据按钮 -->
            <div v-if="user.companyId==876" >
              <el-button type="primary" v-if="!isAuditList" size="small" style="margin-left:20px" @click="syncLeave()" :loading="this.syncLeaveLoading">{{ '同步请假数据' }}</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">
                  <template slot-scope="scope">
                    <div>
                      <span v-if="user.userNameNeedTranslate != 1">{{scope.row.ownerName}}</span>
                      <span v-if="user.userNameNeedTranslate == 1">
                        <TranslationOpenDataText type='userName' :openid='scope.row.ownerName'></TranslationOpenDataText>
                      </span>
                    </div>
                  </template>
                </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="180">
                  <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"><span>{{ $t('state.WaitingAudit') }}-</span>
                        <span v-if="user.userNameNeedTranslate != 1">{{scope.row.auditorName}}</span>
                        <span v-if="user.userNameNeedTranslate == 1">
                          <TranslationOpenDataText type='userName' :openid='scope.row.auditorName'></TranslationOpenDataText>
                        </span>
                      </div>
                      <div v-if="scope.row.status == 2" style="color: red">{{ $t('btn.rejected') }}<el-link style="margin-left:5px;" @click="showDenyReason(scope.row.id)">{{ $t('chaKanYuanYin') }}</el-link></div>
                      <div v-if="scope.row.status == 3" style="color: #666666">{{ $t('yiCheHui') }}</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">
                  <template slot-scope="scope">
                    <el-popover placement="top-start"  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="相关凭证" min-width="200">
                  <template slot-scope="scope">
                    <el-button type="primary" size="mini" v-if="scope.row.fileUrlsList.length && scope.row.fileUrlsList[0].name" @click="clickToViewTheImage(scope.row.fileUrlsList)">点击查看</el-button>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('operation')" min-width="180" fixed="right" v-if="isAuditList && !isSyncData">
                    <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 && !isSyncData">
                    <template slot-scope="scope">
                      <!-- <div v-if="(scope.row.status != 0 && scope.row.ownerId == user.id) || permissions.leaveAll"> -->
                      <div v-if="(scope.row.status != 0 || permissions.leaveAll) && scope.row.ownerId == user.id">
                        <el-button size="mini" v-if="scope.row.status == 3 ||scope.row.status == 2" @click.stop.native="deletes(scope.row)" >{{ $t('btn.delete') }}</el-button>
                        <el-button size="mini" v-if="scope.row.status == 1" @click.stop.native="cancel(scope.row)">{{ $t('btn.withdraw') }}</el-button>
                        <el-button size="mini" v-if="scope.row.status == 3 ||scope.row.status == 2 " type="primary" @click.stop.native="editor(scope.row)">{{ $t('zhong-xin-ti-jiao') }}</el-button>
                      </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="poss">
                <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-if="user.userNameNeedTranslate != 1" v-model="keyword" class="input-with-select" @keyup.enter.native="statistical()" :placeholder="$t('pleaseenterstaffsearch')" clearable="true" size="small">
                  <el-button slot="append" @click="statistical()" icon="el-icon-search"></el-button>
              </el-input>
              <selectCat v-if="user.userNameNeedTranslate == 1" :size="'small'" :widthStr="'240'" :subject="users" :distinction="'11'" :disabled="false" @selectCal="selectCal" :clearable="true"></selectCat>
            </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">
                      <span v-if="user.userNameNeedTranslate != 1">{{scope.row.ownerName}}</span>
                      <span v-if="user.userNameNeedTranslate == 1"><TranslationOpenDataText type='userName' :openid='scope.row.ownerName'></TranslationOpenDataText></span>
                    </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 == 9" 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-if="user.userNameNeedTranslate != 1" v-model="userName" class="input-with-select" @keyup.enter.native="restTime()" :placeholder="$t('pleaseenterstaffsearch')" clearable="true" size="small">
                  <el-button slot="append" @click="restTime()" icon="el-icon-search"></el-button>
              </el-input>
              <selectCat v-if="user.userNameNeedTranslate == 1" :size="'small'" :widthStr="'240'" :subject="users" :distinction="'11'" :disabled="false" @selectCal="selectCal" :clearable="true"></selectCat> -->
              <selectPersonnel v-model="userId" @change="restTime" />
            </div>
          </div>
          <!-- <div style="margin-top: 30px"> -->
          <div>
            <el-table key="apk2is4" v-loading="loading" :data="restTimeList" height="780px" style="width: 99%">
              <el-table-column prop="userName" :label="$t('lable.name')" width="300">
                <template slot-scope="scope">
                    <div v-if="scope.row.userName">
                      <span v-if="user.userNameNeedTranslate != 1">{{scope.row.userName}}</span>
                      <span v-if="user.userNameNeedTranslate == 1"><TranslationOpenDataText type='userName' :openid='scope.row.userName'></TranslationOpenDataText></span>
                    </div>
                    <div v-else>
                      <span>{{ $t('Nstatisticpresent') }}</span>
                    </div>
                  </template>
              </el-table-column>
              <el-table-column prop="restTimeDayStr" :label="$t('remaindaysRest')" width="300">
                <template slot-scope="scope">
                    {{scope.row.restTimeDayStr}} / {{ $t('time.day') }}
                  </template>
              </el-table-column>
              <el-table-column prop="restTimeHourStr" :label="$t('remainlengthofRest')">
                <template slot-scope="scope">
                    {{scope.row.restTimeHourStr}}/{{ $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>
                  <!-- 添加试试看 -->
                  <span class="custom-tree-node" slot-scope="{ node, data }">
                      <!-- <span>{{ node.label }}</span> -->
                      <span v-if="user.userNameNeedTranslate == '1'">
                        <TranslationOpenDataText type='departmentName' :openid='node.label'></TranslationOpenDataText>
                      </span>
                      <span v-else>
                        {{ node.label }}
                        <span v-if="false">{{data}}</span>
                      </span>
                  </span>
                </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 class="themeFontColor">
                  <!-- {{depData.label}} -->
                    <span v-if="user.userNameNeedTranslate != 1">{{depData.label}}</span>
                    <span v-if="user.userNameNeedTranslate == 1"><TranslationOpenDataText type='departmentName' :openid='depData.label'></TranslationOpenDataText></span>
                  &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 && user.userNameNeedTranslate == 1" @click="editNodeDialog(index, item)">
                          <!-- {{item.auditDeptName}} -->
                          <TranslationOpenDataText type='departmentName' :openid='item.auditDeptName'></TranslationOpenDataText>
                        </el-button>
                        <el-button type="primary" v-if="item.auditorType == 2 && user.userNameNeedTranslate == 1" @click="editNodeDialog(index, item)">
                          <!-- {{item.userName}} -->
                            <TranslationOpenDataText type='userName' :openid='item.userName'></TranslationOpenDataText>
                        </el-button>

                        <el-button type="primary" v-if="item.auditorType == 1 && user.userNameNeedTranslate != 1" @click="editNodeDialog(index, item)">
                          {{item.auditDeptName}}
                        </el-button>
                        <el-button type="primary" v-if="item.auditorType == 2 && user.userNameNeedTranslate != 1" @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 themeFontColor"></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 v-show="user.userNameNeedTranslate != 1"></el-cascader>

                    <vueCascader :size="'small'" :widthStr="'200'" :clearable="true" :userName="true" :fistRadio="true" :subjectId="this.selectedAuuid" :subject="soption" :radios="true" :distinction="'1'" @vueCasader="vueCasader" v-if="user.userNameNeedTranslate == 1"></vueCascader>

              </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%" v-if="user.userNameNeedTranslate != 1">
              <el-input style="float:left;" v-model="keywordAl" class="input-with-select" @keyup.enter.native="searchAl()" :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%;">
              <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" v-if="user.userNameNeedTranslate != 1">
              </el-cascader>
              <vueCascader :size="'small'" :widthStr="'120'" :clearable="true" :subject="Nsdata" :radios="true" :distinction="'2'" @vueCasader="vueCasader" v-if="user.userNameNeedTranslate == 1"></vueCascader>
            </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">
                    <span v-if="user.userNameNeedTranslate != 1">
                      {{scope.row.userName}}
                    </span>
                    <span v-if="user.userNameNeedTranslate == 1">
                      <TranslationOpenDataText type='userName' :openid='scope.row.userName'></TranslationOpenDataText>
                    </span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="department" :label="$t('departmentsuod')" width="200">
                <template slot-scope="scope">
                  <span v-if="user.userNameNeedTranslate != 1">
                    {{scope.row.department}}
                  </span>
                  <span v-if="user.userNameNeedTranslate == 1">
                    <TranslationOpenDataText type='departmentName' :openid='scope.row.department'></TranslationOpenDataText>
                  </span>
                </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: 120px" 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"
                collapse-tags 
                @change="departmentOptionsChg"
                v-model="departmentSel"
                :options="departmentOptions"
                :placeholder="$t('qing-xuan-ze-bu-men')"
                :show-all-levels="false"
                :props="{ multiple: true }"
                clearable></el-cascader>
              </div>
              <div>
                <span>{{ $t('personnelselection') }}</span>
                <el-select v-model="userSelId" :placeholder="$t('pleaseselectthepersonaskingforleave')" clearable @change="userChg()" style="width: 140px" 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 0px 0 10px">
                <el-button size="small" type="primary" @click="listSynchronize" :loading="synchronizeLoading">{{ $t('synchronizefromStaple') }}</el-button>
                <el-button size="small" type="primary" @click="exportLeaveList" :loading="exporLoading">{{ $t('dao-chu-jia-qi') }}</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-if="user.userNameNeedTranslate != 1" 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>
            <selectCat v-if="user.userNameNeedTranslate == 1" :size="'mini'" :subject="users" :subjectId="addForm.ownerId" :disabled="true" :distinction="'4'" :filterable="false" @selectCal="selectCal"></selectCat>

        </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-item label="相关凭证" style="width: 100%">
            <el-upload action="#" list-type="picture-card" multiple ref="leaveApplicationFormUploadDetailRef" :limit="5" :http-request="imageDetailUpload" :file-list="addForm.fileUrlsList">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="handlePictureCardDetailPreview(file)">
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDetailRemove(file)">
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
          </el-upload>
        </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>
  <el-dialog :title="$t('defaultText.pleaseEnterTheReason')"  v-if="denyDialogV" :visible.sync="denyDialogV" :close-on-click-modal="false" customClass="customWidth" width="500px">
        <div>
            <el-input type="textarea" v-model="denyInfo.reason" rows="2" :placeholder="$t('reasonforyourdecisiontoreject')" />
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button  @click="denyDialogV = false" >{{ $t('btn.cancel') }}</el-button>
            <el-button type="primary" @click="submitDeny()" >{{ $t('btn.determine') }}</el-button>
        </div>
    </el-dialog>
    
    <el-dialog :title="$t('dismissreason')" v-if="denyReasonVisible" :visible.sync="denyReasonVisible" customClass="customWidth" width="400px">
        <div style="padding:20px 40px 20px 0">
            <el-timeline :reverse="false">
                <el-timeline-item v-for="item in auditLogList" :key="item.id" :timestamp="item.indate">
                  <span v-if="user.userNameNeedTranslate == 1"><TranslationOpenDataText type='userName' :openid='item.auditorName'></TranslationOpenDataText> </span>
                  <span v-if="user.userNameNeedTranslate == 0">{{item.auditorName}}</span>
                  <span> {{item.isPass==0?$t('boHuiLeQingJiaShenQing'):$t('state.approved')}}</span>
                  <span v-if="item.isPass == 0">{{ $t('other.reason') }} ：{{item.denyReason}}</span>
                  </el-timeline-item>
            </el-timeline>
        </div>
    </el-dialog>
    <!-- <el-dialog title="审批流程" v-if="denyReasonVisible" :visible.sync="denyReasonVisible" :close-on-click-modal="false" customClass="customWidth" width="500px">
        <div>
          <el-steps direction="vertical" >
            <el-step v-for="item in auditLogList" :title="item.auditorName" description="这是一段很长很长很长的描述性文字"></el-step>
          </el-steps>
          
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button  @click="denyReasonVisible = false" >{{ $t('btn.cancel') }}</el-button>
        </div>
    </el-dialog> -->

    <!-- 文件图片显示 -->
    <div v-show="false">
      <viewer :images="excessiveImagesList">
        <img ref="imgsaListRef" v-for="src in excessiveImagesList" :src="src.url">
      </viewer>
    </div>
  </section>
</template>

<script>
import { config, error } from 'dingtalk-jsapi';
// 自定义select组件
import selectCat from "@/components/select.vue"
import Select from '../../components/select.vue';
import selectPersonnel from '../../components/selectPersonnel.vue';

 // 引入自定义级联组件
import vueCascader from "@/components/cascader.vue"

import { getThemeColor } from '@/utils/commonMethod.js'
import { del } from 'vue';
export default {
  name: "expense",
  components: {
    selectCat,
    Select,
    vueCascader,
    selectPersonnel
  },
  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 {
      themeColor: getThemeColor(),
      denyDialogV: false,
      denyInfo: {},
      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" }]
      },
      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: ''
      },
      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: '',
      userId:'',
      statData: this.getCurrentTimes(),
      endData: this.getCurrentTime(),
      statisticalList: [],
      restTimeList:[],
      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,
      txselnumTwo: 0,

      approverList: [],
      isSyncData: 0,
      vacationList: [],
      leaveTypeList: [],
      leaveTypeItem: '',
      departmentOptions: [],
      departmentSel: [],
      userSelId: '',
      synchronizeLoading: false,
      kuanBl: 0,
      hubs: 0,
      vueCasaderItem: [], // 仿数据
      vueIAlDataSItems: undefined, // 仿数据
      exporLoading: false,
      addNodeObj: {},
      curWorkflowList:{},
      denyReasonVisible : false,
      auditLogList:[],
      selectedAuuid: '',
      syncLeaveLoading:false,
      relatedVouchersList: [],
      excessiveImagesList: [],
      leaveAndUploadPictures: []
    };
  },
  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.isSyncData = this.user.timeType.syncDingding || this.user.timeType.syncFanwei;
  },

  mounted() {
    if(this.isSyncData){
      this.bills(false,2)
      this.staffs(7,['7'])
      this.getUsers()
    }else{
      this.getUsers() // 获取人员信息
      this.getDepartment();
      this.getAl();
      this.getAuditWorkflow();
    }
  },
  filters: {},
  methods: {
    imageUpload(res) {
      const row = res.file
      const formData = new FormData();
      formData.append('multipartFile', row);
      this.$refs.leaveApplicationFormUploadRef.uploadFiles = [];
      this.http.uploadFile(`/common/uploadFile`, formData, res => {
        if (res.code == "ok") {
          const url = res.data
          this.leaveAndUploadPictures.push({
            name: url,
            url: `/upload/${url}`,
          })
        } else {
            this.$message({ message: res.msg, type: "error" });
        }
      }, err => {
        this.$message({ message: error, type: "error" });
      })
    },
    imageDetailUpload(res) {
      const row = res.file
      const formData = new FormData();
      formData.append('multipartFile', row);
      this.$refs.leaveApplicationFormUploadDetailRef.uploadFiles = [];
      this.http.uploadFile(`/common/uploadFile`, formData, res => {
        if (res.code == "ok") {
          const url = res.data
          this.addForm.fileUrlsList.push({
            name: url,
            url: `/upload/${url}`,
          })
        } else {
            this.$message({ message: res.msg, type: "error" });
        }
      }, err => {
        this.$message({ message: error, type: "error" });
      })
    },
    handlePictureCardPreview(file) {
      const list = this.$refs.leaveApplicationFormUploadRef.uploadFiles || [];
      const fileIndex = list.findIndex(item => item.uid === file.uid);
      this.excessiveImagesList = list

      setTimeout(() => {
        this.$refs.imgsaListRef[fileIndex].click()
      }, 200);
    },
    handlePictureCardDetailPreview(file) {
      const list = this.$refs.leaveApplicationFormUploadDetailRef.uploadFiles || [];
      const fileIndex = list.findIndex(item => item.uid === file.uid);
      this.excessiveImagesList = list

      setTimeout(() => {
        this.$refs.imgsaListRef[fileIndex].click()
      }, 200);
    },
    clickToViewTheImage(list) {
      this.excessiveImagesList = list
      setTimeout(() => {
        this.$refs.imgsaListRef[0].click()
      }, 200);
    },
    handleRemove(file) {
      const list = this.$refs.leaveApplicationFormUploadRef.uploadFiles || [];
      const fileIndex = list.findIndex(item => item.uid === file.uid);
      if(list.length) {
        console.log(list)
        this.$refs.leaveApplicationFormUploadRef.uploadFiles.splice(fileIndex, 1);
        this.leaveAndUploadPictures.splice(fileIndex, 1)
      }
    },
    handleDetailRemove(file) {
      const list = this.$refs.leaveApplicationFormUploadDetailRef.uploadFiles || [];
      const fileIndex = list.findIndex(item => item.uid === file.uid);
      if(list.length) {
        this.$refs.leaveApplicationFormUploadDetailRef.uploadFiles.splice(fileIndex, 1);
        this.addForm.fileUrlsList.splice(fileIndex, 1)
      }
    },
    showDenyReason(sheetId) {
      this.denyReasonVisible = true;
      this.auditLogList = [];
      this.http.post('/leave-audit-log/getBySheetId',{sheetId: sheetId},
        res => {
          if(res.code == 'ok'){
            this.auditLogList = res.data;
          }else{
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }
        },err => {
          this.$message({
            message: err,
            type: 'error'
          })
        })
    },
    //获取添加请假单时的审批流
    getAuditWorkflow() {
      this.http.post('/audit-workflow-setting/get',{userId: this.user.id, type: 1},
        res => {
          if(res.code == 'ok'){
            this.curWorkflowList = res.data;
          }else{
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }
        },err => {
          this.$message({
            message: err,
            type: 'error'
          })
        })
    },
    // 导出请假单
    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', this.$t('qingJiaDan'));// 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'
        })
      })
    },
    // 导出假期
    exportLeaveList() {
      this.exporLoading = true
      let param = {
        leaveCode: this.leaveTypeItem,
        companyId: this.user.companyId,
        // departmentId: this.departmentSel ? this.departmentSel[this.departmentSel.length - 1] : '',
      }
      let arrList = []
      for(let i in this.departmentSel) {
        arrList.push(this.departmentSel[i][this.departmentSel[i].length - 1])
      }
      console.log(arrList, '处理好的')
      param.departmentId = arrList
      if(this.userSelId != '') {
        param.userId = this.userSelId
      }
      this.http.post('/user-yearleave-setting/exportDingDingLeaveQt',param,
      res => {
        this.exporLoading = false
        if(res.code == 'ok'){
          var filePath = res.data;
          const a = document.createElement('a'); // 创建a标签
          a.setAttribute('download', this.$t('shengYuJiaQi'));// download属性
          a.setAttribute('href', filePath);// href链接
          a.click(); //自执行点击事件
          a.remove();
        }else{
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      },err => {
        this.exporLoading = false
        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
        }
        console.log(this.departmentSel, '甚于')
        // if(this.departmentSel.length != 0){
        //   item.departmentId = this.departmentSel[this.departmentSel.length - 1]
        // }
        let arrList = []
        for(let i in this.departmentSel) {
          arrList.push(this.departmentSel[i][this.departmentSel[i].length - 1])
        }
        console.log(arrList, '处理好的')
        item.departmentId = arrList
        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)
    },

    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.user.userNameNeedTranslate != 1 ? this.$refs.selectAl.getCheckedNodes()[0] : this.vueIAlDataSItems
        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), type: 'dep', id: 0},
                          {value: 2 , label : this.$t('designatedpersonnel'),children : this.susers, type: 'user', id: 0}
                        ]
                        console.log(this.soption, '选人的数据')
                        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].type = 'dep'
                        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;
              this.selectedAuuid = ''
            },
    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.curDeptId = item.auditDeptId;
                            this.selectedAuuid = item.userId || item.auditDeptId
                            console.log(this.selectedAuuid, '看看数据类')
                            this.dialogVisible = true;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.listLoading = false;
                        this.$message({
                            message: error,
                            type: "error"
                        });
                        }
                    );
                
            },
    addNode() {
              
              if (this.curDeptId == null) return;
              // if(this.user.userNameNeedTranslate != '1') {
              // var node = this.user.userNameNeedTranslate != '1' ? this.vueCasaderItem : this.$refs.deptCascader.getCheckedNodes()[0];
              // var node = this.$refs.deptCascader.getCheckedNodes()[0];
              var node = ''
              if(this.user.userNameNeedTranslate != 1) {
                // node = this.user.userNameNeedTranslate != '1' ? this.vueCasaderItem : this.$refs.deptCascader.getCheckedNodes()[0];
                node = this.$refs.deptCascader.getCheckedNodes()[0];
              } else {
                node = this.addNodeObj
              }
              console.log(this.vueCasaderItem)
              console.log("node",node);
              let flgUserRadio = true
              if(this.user.userNameNeedTranslate == 1) {
                for(let s in this.dataArray) {
                  if(node.type == 'dep') {
                    if(this.dataArray[s].auditDeptName == node.label) {
                      flgUserRadio = false
                    }
                  } else {
                    if(this.dataArray[s].userName == node.label) {
                      flgUserRadio = false
                    }
                  }
                }
              }
              if(!flgUserRadio) {
                if(node.type == 'dep') {
                  this.$message({
                      message: this.$t('yi-cun-zai-zhong-fu-bu-men'),
                      type: "error"
                  });
                } else {
                  this.$message({
                      message: this.$t('yi-cun-zai-zhong-fu-ren-yuan'),
                      type: "error"
                  });
                }
                return false
              }
              this.dialogVisible = false;
              if (this.isAdd) {
                if(this.user.userNameNeedTranslate != 1) {
                  var nodes
                  if(node.path[0] == 1){
                    nodes = {auditDeptId: node.value, auditDeptName: node.label, auditorType: 1};
                  }else if(node.path[0] == 2){
                    nodes = {userId: node.value, userName: node.label, auditorType: 2};
                  }
                } else {
                  if(node.type == 'dep') {
                    nodes = {auditDeptId: node.value, auditDeptName: node.label, auditorType: 1};
                  } else {
                    nodes = {userId: node.value, userName: node.label, auditorType: 2};
                  }
                }
                
                this.dataArray.splice(this.sindex, 0, nodes);
                
              } else {
                //编辑
                if(node.type == 'dep') {
                  this.dataArray[this.sindex].auditDeptId = node.value;
                  this.dataArray[this.sindex].auditDeptName = node.label;
                  this.dataArray[this.sindex].auditorType = 1
                  this.dataArray[this.sindex].userId = ''
                  this.dataArray[this.sindex].userName = ''
                } else {
                  this.dataArray[this.sindex].userId = node.value;
                  this.dataArray[this.sindex].userName = node.label;
                  this.dataArray[this.sindex].auditDeptId = ''
                  this.dataArray[this.sindex].auditDeptName = ''
                  this.dataArray[this.sindex].auditorType = 2
                }
              }
              console.log(this.dataArray, '数据')
            },
    deleteNode() {
                this.dialogVisible = false;
                this.dataArray.splice(this.sindex, 1);
            },
    submitInsert() {
      if(this.dataArray.length > 0) {
        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"
              });
          });
      } else {
        this.$message({
            message: this.$t('zhi-shao-xuan-ze-yi-ge-bu-men-huo-zhe-ren-yuan-zuo-wei-shen-he-ren'),
            type: "error"
        });
      }
    },
    
    // 
    approve(item) {
      //审核通过
      this.http.post('/leave-sheet/approve', {id:item.id
        },
        res => {
            if (res.code == "ok") {
                this.auditList();
                this.$message({
                        message: this.$t('operationissuccessful'),
                        type: "success"
                        });
            } else {
                this.$message({
                message: res.msg,
                type: "error"
                });
            }
        },
        error => {
            this.$message({
                message: error,
                type: "error"
            });
        });
    },
    deny(item) {
      this.denyDialogV = true;
      this.denyInfo = {id:item.id, reason:null};
    },

    syncLeave(){
      this.syncLeaveLoading=true
      this.http.post('/leave-sheet/syncLeaveSheet',{},
        res => {
            if (res.code == "ok") {
                this.$message({
                        message: this.$t('operationissuccessful'),
                        type: "success"
                });
            } else {
                this.$message({
                message: res.msg,
                type: "error"
                });
            }
            this.syncLeaveLoading=false
        },
        error => {
            this.$message({
                message: error,
                type: "error"
            });
        });
    },

    submitDeny(id) {
      //审核驳回
      this.http.post('/leave-sheet/deny', this.denyInfo,
        res => {
            if (res.code == "ok") {
                this.auditList();
                this.denyDialogV = false;
                this.$message({
                        message: this.$t('operationissuccessful'),
                        type: "success"
                        });
            } else {
                this.$message({
                message: res.msg,
                type: "error"
                });
            }
        },
        error => {
            this.$message({
                message: error,
                type: "error"
            });
        });
    },
    getUsers() {
      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,type: 'user'})
                }
                //只能自己填报自己的请假单
                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;
        this.getAuditWorkflow();
      } 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()
      } else if(keyPath[0] == '9'){
        this.displayTable = true;
        this.apk = true
        this.apk2 = 9
        this.restTime()
      } 

      this.leaveAndUploadPictures = []
    },
    auditList() {
      this.falg = 1
      this.code = 1
      this.tableData = []
      this.displayTable = true;
      this.isAuditList = true;
      this.loading = true
      this.page = '1'
      var param = { pageIndex: this.page,
                    pageSize: this.size,
                    // createDate: this.createDate,
                    startDate: this.createDate == null ? '' : this.createDate[0],
                    endDate: this.createDate == null ? '' : this.createDate[1],
                    ownerId: this.ownerIds,
                    way: this.type,
                  };
      this.list = [];
      // this.total = 0;
      this.http.post('/leave-sheet/auditList', param,
        res => {
            if (res.code == "ok") {
              this.tableData = res.data.records.map(item => ({
                ...item,
                fileUrlsList: (item.fileUrls || '').split(',').map(em => ({
                  name: em,
                  url: `/upload/${em}`
                }))
              }));
              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"
            });
        });
    },
    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.map(item => ({
                ...item,
                fileUrlsList: (item.fileUrls || '').split(',').map(em => ({
                  name: em,
                  url: `/upload/${em}`
                }))
              }));
              console.log(this.tableData)
              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() {
      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(){
      // return
        this.$refs.addForm.validate(valid => {
          this.addForm.endDate = this.buling(this.addForm.endDate)
          this.addForm.startDate = this.buling(this.addForm.startDate)
          if (valid) {
            let formData = new FormData()
            const fileList = this.leaveAndUploadPictures.map(item => item.name)
            Object.keys(this.addForm).forEach(key => {
              formData.append(key, this.addForm[key])
            })

            formData.append('fileUrls', fileList.join(','))

            this.http.uploadFile('/leave-sheet/add', formData,
            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.flg = true
                    this.$refs.leaveApplicationFormUploadRef.clearFiles()
                    this.leaveAndUploadPictures = []
                } 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)
            }
            this.txselnumTwo = res.data
          } 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'
            this.txselnum = this.txselnumTwo > 0.5 ? this.txselnumTwo.toFixed(1) : 0
        } 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
            this.txselnum = this.dayToHourConversion(this.txselnumTwo)
        }
    },
    dayToHourConversion(val) {
        let value = +val;  
        let workHours = 8;   
        let result = value * workHours; 
        return result.toFixed(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

        // 调用接口获取请假天数
        let startDateData = this.buling(this.addForm.startDate)
        let endDateData = this.buling(this.addForm.endDate)
        this.http.post('/leave-sheet/leaveDays', {
          startDate: startDateData,
          endDate: endDateData
        },
          res => {
              if (res.code == "ok") {
                  this.addForm.timeDays = res.data
                  this.timeChoose = res.data
              } else {
                  this.$message({
                    message: res.msg,
                    type: "error"
                  });
              }
          },
          error => {
              this.$message({
                  message: error,
                  type: "error"
              });
          });
    },
    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.page = 1
      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"
            });
        });
    },
    restTime() {
      this.loading = true
      this.http.post('/leave-sheet/getCompanyUserTime', {
        userId: this.userId,
      },
        res => {
            if (res.code == "ok") {
                this.restTimeList = 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)
    },
    cancel(e) {
      this.$confirm(this.$t('queDingYaoCheHuiGaiQingJiaShenQingMa'), this.$t('other.prompts'), {
          //type: 'warning'
      }).then(() => {
          this.http.post('/leave-sheet/cancel', {id:e.id},
          res => {
              if (res.code == "ok") {
                  this.bills();
                  this.$message({
                      message: this.$t('operationissuccessful'),
                      type: "success"
                  });
              } else {
                  this.$message({
                  message: res.msg,
                  type: "error"
                  });
              }
          },
          error => {
              this.$message({
                  message: error,
                  type: "error"
              });
          });
      });
    },
    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) {
      console.log(items, '<===== zhong-xin-ti-jiao')
      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.addForm.fileUrlsList = items.fileUrlsList || []
      this.affId = items.id
    },
    determine () {
      var adl = this.addForm
      adl.id = this.affId
      adl.fileUrls = this.addForm.fileUrlsList.map(item => {
        return item.name
      }).join(',')
      delete adl.fileUrlsList
      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: '',
                    fileUrls: []
                  }
                  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()
    },
    // 自定义组件事件
    selectCal(obj) {
      if(obj.distinction == '1') {
        this.addForm.ownerId = obj.id
        this.txselts(obj.other, obj.id)
      } else if(obj.distinction == '2') {
        let arr = []
        for(let i in obj.arrUserList) {
          arr.push(obj.arrUserList[i].id)
        }
      } else if(obj.distinction == '3') {
        this.ownerIds = obj.id
        this.chufas()
      } else if(obj.distinction == '4') {
        this.addForm.ownerId = obj.id
        this.selts()
      } else if(obj.distinction == '11') {
        if(obj.name != this.$t('defaultText.pleaseChoose')) {
          this.keyword = obj.name
        } else {
          this.keyword = ''
        }
        this.statistical()
      }
    },
    vueCasader(obj) {
      if(obj.distinction == 1) {
        let arr = []
        arr.push(obj.id)
        this.curDeptId = arr
        this.vueCasaderItem = obj.item
        this.addNodeObj = obj.item
        console.log(obj)
      } else if(obj.distinction == 2) {
        let arr = []
        arr.push(obj.id)
        this.NcurDeptId = arr
        console.log(obj, '闯过奥的值')
        if(obj.item) {
          if(obj.item.label != this.$t('defaultText.pleaseChoose')) {
            this.vueIAlDataSItems = obj.item
          } else {
            this.vueIAlDataSItems = undefined
          }
        } else {
          this.vueIAlDataSItems = undefined
        }
        this.selAl()
      }
    }
  }
};
</script>
<style scoped lang="scss">
@import "../../assets/scss/handle";

.themeFontColor {
    @include font_color("color");
}

.addNode {
  cursor:pointer;
}
.addNode:hover {
  @include font_color("color");
}
.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;
  @include border_color("border_color");
}
.side:hover .spans {
  border: 1px solid;
  @include border_color("border_color");
  @include background_color("background_color");
}
.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>