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

<template>
  <section>
    <div class="sidebars" ref="sidebars" style="width: 200px;display: block;background: #fff">
      <h3><i class="iconfont firerock-iconbaoxiao" style="padding-right: 10px"></i>请假管理</h3>
      <el-divider ></el-divider>
      <el-col :span="12">
        <el-menu default-active="1" class="el-menu-vertical-demo" @select="staffs" background-color="#ffffff" text-color="#666666" active-text-color="#20A0FF" style="width:100%">
          <!-- <el-submenu index="1">
            <template slot="title">
              <i class="iconfont firerock-icontianbao"></i>
              <span>员工请假填报</span>
            </template>
              <el-menu-item index="1-1"><p @click="ssl(0)">请事假</p></el-menu-item>
              <el-menu-item index="1-2"><p @click="ssl(1)">请病假</p></el-menu-item>
              <el-menu-item index="1-3"><p @click="ssl(2)">请年假</p></el-menu-item>
              <el-menu-item index="1-4"><p @click="ssl(3)">请产假</p></el-menu-item>
          </el-submenu> -->
          <el-menu-item index="1">
            <i class="iconfont firerock-icontianbao"></i>
            <span slot="title">员工请假填报</span>
          </el-menu-item>
          <el-submenu index="2" v-if="user.role != 0">
            <template slot="title">
              <i class="iconfont firerock-iconbaoxiaodan"></i>
              <span>{{user.role == 0?"我的请假单":"请假单列表"}}</span>
            </template>
            <el-menu-item index="2-1" ><p @click="bills(false, 2)" >全部</p></el-menu-item>
            <el-menu-item index="2-2" v-if="user.role != 6"><p @click="bills(true, 1)">待审核</p></el-menu-item>
          </el-submenu>
            <el-menu-item index="3" @select="bills" @click="bills(false, 2)" v-if="user.role == 0">
              <i class="iconfont firerock-iconbaoxiaodan"></i>
              <span slot="title">{{user.role == 0?"我的请假单":"请假单列表"}}</span>
            </el-menu-item>
            <el-menu-item index="4" v-if="user.role != 0">
              <template slot="title">
                <i class="iconfont firerock-icontianbao"></i>
                <span slot="title">请假统计</span>
              </template>
          </el-menu-item>

          <el-menu-item index="5" v-if="user.role == 1 || user.role == 2">
              <template slot="title">
                <i class="iconfont firerock-iconliucheng"></i>
                <span slot="title">请假审批流程</span>
              </template>
          </el-menu-item>

          <el-menu-item index="6" v-if="user.role != 0">
              <template slot="title">
                <i class="iconfont firerock-icontianbao"></i>
                <span slot="title">年假管理</span>
              </template>
          </el-menu-item>


          </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" class="headine" ref="headine">
      <h3 ref="headHe" style="padding-left: 220px">请假填报</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">
        <!-- 公共 -->
        <div class="ctons">
            <!-- 表单 -->
            <el-form ref="addForm" :model="addForm" label-width="80px" :rules="addFormRules">
                <!-- 请假类型 -->
                <el-form-item label="请假类型" prop="leaveType" style="width: 100%">
                    <!--普通员工只能自己填报自己的 -->
                    <el-select v-model="addForm.leaveType" @change="selts()" placeholder="请选择请假类型" style="width: 240px">
                          <el-option v-for="item in qjType" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 请假人 -->
                <el-form-item label="请假人" prop="ownerId"  style="width: 300px">
                    <!--普通员工只能自己填报自己的 -->
                    <el-select v-model="addForm.ownerId" @change="selts()" placeholder="请选择请假人" style="width: 240px" :disabled="user.role == 0" filterable="true">
                        <span v-for="(item, index) in users" :key="index">
                        <el-option :label="item.name" :value="item.id"></el-option>
                        </span> 
                    </el-select>
                </el-form-item>
                <!-- 电话 -->
                <el-form-item label="电话" prop="tel">
                    <el-input ref="ipts" v-model="addForm.tel" placeholder="请输入手机号" style="width: 250px"></el-input>
                </el-form-item>
                <!-- 单选 -->
                <el-form-item style="display: block" label="时长单位">
                    <el-radio-group v-model="addForm.timeType" @change="chanRadio()">
                        <el-radio label="0">按天请假</el-radio>
                        <el-radio label="1">按小时请假</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!-- 时间选择 -->
                <el-form-item :label="flg ? '选择日期' : '选择时间'" style="width: 100%;">
                    <el-col style="display: inline-block; width: 240px">
                        <el-date-picker v-if="flg" type="date" placeholder="开始日期" 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="开始日期" 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="结束日期" 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 ? '请假天数' : '请假时长'" 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> 天</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> 小时
                   </div>
                </el-form-item>
                <!-- 备注 -->
                <el-form-item label="备注" style="width: 100%">
                    <el-input type="textarea" v-model="addForm.remark" :rows="5" style="width: 550px" maxlength="100" show-word-limit></el-input>
                </el-form-item>
            </el-form>

            <div>
              <p style="margin-left: 20%"><el-button type="primary" @click="submits('addFormRules')" size="mini">提交</el-button></p>
            </div>
        </div>
    </div>

    <!-- 下面部分 -->
    <div v-if="displayTable && apk == false" class="tops">
        <!-- 公共 -->
        <div class="ctons">
          <div class="flex">
            <div>
              <el-select v-model="ownerIds" placeholder="请选择请假人" clearable @change="chufas()" style="width: 180px" size="small" :disabled="user.role == 0" filterable="true">
                  <span v-for="(item, index) in users" :key="index">
                  <el-option :label="item.name" :value="item.id"></el-option>
                  </span> 
              </el-select>
            </div>
            <div>
              <span style="color: #606266">请假类型</span>
              <el-select v-model="type" placeholder="请选择请假类型" clearable @change="chufas()" style="width: 180px;" 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">请假状态</span>
              <el-select v-if="falg == 0" v-model="code" placeholder="请选择请假状态" clearable @change="chufas()" size="small" style="width: 180px" 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="请选择请假类型" clearable @change="chufas()" size="small" style="width: 180px" 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>
            </div>
          </div>
            <el-table v-loading="loading" :data="tableData" style="width: 100%" height="90%">
                <el-table-column prop="ownerName" label="请假人" width="120"></el-table-column>
                <el-table-column prop="tel" label="电话" width="120"></el-table-column>
                <el-table-column prop="leaveType" label="请假类型" 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="请假开始时间" width="150"></el-table-column>
                <el-table-column prop="endDate" label="请假结束时间" width="150"></el-table-column>
                <el-table-column label="请假天数" width="120">
                  <template slot-scope="scope">
                    <div v-if="scope.row.timeType == '1'">/</div>
                    <div v-else>{{scope.row.timeDays}}天</div>
                  </template>
                </el-table-column>
                <el-table-column label="请假时长" width="120">
                  <template slot-scope="scope">
                    <div>{{scope.row.timeHours}}小时</div>
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="100">
                  <template slot-scope="scope">
                    <div v-if="scope.row.status == 0 || scope.row.status == 1 || scope.row.status == 2 || scope.row.status == 3 || scope.row.status == 4">
                      <div v-if="scope.row.status == 0" >审核通过</div>
                      <div v-if="scope.row.status == 1" style="color: orange">待审核</div>
                      <div v-if="scope.row.status == 2" style="color: red">驳回</div>
                      <div v-if="scope.row.status == 3" style="color: #666666">撤销</div>
                    </div>
                    <div v-else>
                      <span>暂无请假单</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" width="200">
                  <template slot-scope="scope">
                    <!-- <div class="apls">{{scope.row.remark}}</div> -->
                    <el-popover placement="top-start" title="标题" 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="操作" width="180" fixed="right" v-if="isAuditList">
                    <template slot-scope="scope">
                      <div v-if="user.role != 0">
                        <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>
                      <div v-else>
                        <el-button type="danger" size="mini">撤销</el-button>
                      </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" fixed="right" v-if="!isAuditList && user.role != 6">
                    <template slot-scope="scope">
                      <div v-if="user.role == 0 ">
                        <el-button icon="el-icon-delete" circle size="mini"  @click.stop.native="deletes(scope.row)" v-if="scope.row.status != 0"></el-button>
                        <el-button icon="el-icon-edit" circle size="mini" @click.stop.native="editor(scope.row)" v-if="scope.row.status != 0"></el-button>
                      </div>
                      <div v-if="user.role != 0 ">
                        <el-button icon="el-icon-delete" circle size="mini"  @click.stop.native="deletes(scope.row)"></el-button>
                        <el-button icon="el-icon-edit" circle size="mini" @click.stop.native="editor(scope.row)"></el-button>
                      </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="poss">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[20, 50, 100, 200]"
                  :page-size="20"
                  layout="total, sizes, prev, pager, next"
                  :total="total">
                </el-pagination>
          </div>
        </div>
    </div>

    <!-- 统计部分 -->
    <div v-if="displayTable && apk && apk2 == 4" class="tops">
      <!-- 公共 -->
        <div class="ctons">
          <div style="display: flex;align-items: center;padding-bottom: 20px;border-bottom: 1px solid #f2f2f2">
            <div style="display: inline-block;width: 350px">
              <el-input style="float:left;" v-model="keyword" class="input-with-select" placeholder="请输入人员搜索" clearable="true" size="small">
                  <el-button slot="append" @click="statistical()" icon="el-icon-search"></el-button>
              </el-input>
            </div>
            <div style="display: inline-block;width: 340px">
              <span style="display: inline-block;margin: 0 15px 0 20px;color: rgb(96, 98, 102);">开始日期</span>
              <el-date-picker
                v-model="statData"
                type="date"
                placeholder="选择日期"
                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);">结束日期</span>
              <el-date-picker
                v-model="endData"
                type="date"
                placeholder="选择日期"
                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 v-loading="loading" :data="statisticalList" height="780px" style="width: 100%">
              <el-table-column prop="ownerName" label="姓名" width="300">
                <template slot-scope="scope">
                    <div v-if="scope.row.ownerName">
                      {{scope.row.ownerName}}
                    </div>
                    <div v-else>
                      <span>暂无请假统计</span>
                    </div>
                  </template>
              </el-table-column>
              <el-table-column prop="timeDays" label="请假总天数" width="300">
                <template slot-scope="scope">
                    {{scope.row.timeDays}}/天
                  </template>
              </el-table-column>
              <el-table-column prop="timeHours" label="请假总时长">
                <template slot-scope="scope">
                    {{scope.row.timeHours}}/小时
                  </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
    </div>

    <div v-if="displayTable && apk && apk2 == 5" class="tops">
        
        <div class="ctons">
        <el-col :span="6" >
            <el-scrollbar style="height:100%;border:1px solid #dddddd;margin-left:15px;" >
            <div class="tree" :style="'height:'+ (tableHeight-120) + 'px'">
                <el-tree :data="sdata" :props="sdefaultProps" @node-click="handleNodeClick" accordion></el-tree>
            </div>
            </el-scrollbar>
        </el-col>
        <el-col :span="18" >
            <el-scrollbar style="height:100%;border:1px solid #dddddd;margin-right:20px;" >
            <div class="tree" :style="'height:'+ (tableHeight-120) + 'px'">
                <div style="padding:5px;color:#333;" v-if="depData != null">设置 &lt;<span style="color:#20a0ff;">{{depData.label}}&gt;</span> 直属人员请假审批流程
                    <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">请选择部门</div>
                <div style="width:100%;margin:0 auto;text-align: center; margin-top:50px;" v-if="depData != null">
                    <span>员工填报</span>
                    <icon class="iconfont firerock-iconright"></icon>
                    <icon class="iconfont firerock-iconInsertLine addNode" @click="showNodeDialog(0)"></icon>
                    <icon class="iconfont firerock-iconright"></icon>
                    <span v-for="(item, index) in dataArray" :key="item.seq" >
                        
                        <el-button type="primary" v-if="item.auditorType == 1" @click="editNodeDialog(index, item)">{{item.auditDeptName}}</el-button>
                        <el-button type="primary" v-if="item.auditorType == 0" >项目负责人</el-button>
                        <el-button type="primary" v-if="item.auditorType == 2" @click="editNodeDialog(index, item)">{{item.userName}}</el-button>
                        <icon class="iconfont firerock-iconright"></icon>
                        <icon class="iconfont firerock-iconInsertLine addNode" @click="showNodeDialog(index+1)"></icon>
                        <icon class="iconfont firerock-iconright"></icon>
                    </span>

                    <!--结束点 -->
                    <icon class="iconfont firerock-iconApp_New_Line" style="color:#20A0FF;"></icon>
                    审批完成
                </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">保存</el-button>
                </div>
            </div>
            </el-scrollbar>
            
        </el-col>
        </div>

        <!--部门选择列表 -->
        <el-dialog  title="请选择审批人" v-if="dialogVisible" :visible.sync="dialogVisible"  width="460px">
              <el-form label-width="140px">
              <el-form-item label="选择部门/指定人员" >
                  <el-cascader filterable ref="deptCascader"  v-model="curDeptId" placeholder="请选择部门/指定人员" style="width: 100%" @change="chooseDept"
                    :options="soption" :props="{ checkStrictly: true,expandTrigger: 'hover' }" :show-all-levels="false" clearable></el-cascader>
              </el-form-item>
              </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="default" @click="deleteNode" v-if="!isAdd" style="float:left;">删除</el-button>
                <el-button type="primary" @click="addNode" >确定</el-button>
            </div>
        </el-dialog>

    </div>
  <!-- -------------- -->
    <div v-if="displayTable && apk && apk2 == 6" class="tops">
      <div class="ctons">
        <div style="display: flex;align-items: center;padding-bottom: 20px;border-bottom: 1px solid #f2f2f2">
            <div style="display: inline-block;width: 350px">
              <el-input style="float:left;" v-model="keywordAl" class="input-with-select" placeholder="请输入人员搜索" clearable="true" size="small">
                  <el-button slot="append" @click="searchAl()" icon="el-icon-search"></el-button>
              </el-input>
            </div>
            <div style="display: inline-block;width: 340px;margin-left:100px">
              <span style="display: inline-block;margin: 0 15px 0 20px;color: rgb(96, 98, 102);">按部门筛选</span>
              <el-cascader
                filterable
                v-model="NcurDeptId"
                placeholder="请选择部门/指定人员"
                size="small"
                style="width: 50%"
                @change="chooseDept"
                :options="Nsdata"
                :props="{ checkStrictly: true, expandTrigger: 'hover' }"
                :show-all-levels="false">
              </el-cascader>
            </div>
        </div>
        <div>
          <el-table v-loading="loading" :data="iAlDataS" height="780px" style="width: 100%">
              <el-table-column prop="name" label="姓名" width="200">
                <template slot-scope="scope">
                  <div v-if="scope.row.name">
                    {{scope.row.name}}
                  </div>
                  <div v-else>
                    <span>暂无请假统计</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="Dpm" label="所在部门" width="200">
                <template slot-scope="scope">
                  {{scope.row.Dpm}}
                </template>
              </el-table-column>
              <el-table-column prop="AltimeAll" label="每年年假天数" width="200">
                <template slot-scope="scope">
                  {{scope.row.AltimeAll}}天
                </template>
              </el-table-column>
              <el-table-column prop="AltimeAlr" label="剩余年假天数" width="200">
                <template slot-scope="scope">
                  {{scope.row.AltimeAll - scope.row.AltimeAlr}}天
                </template>
              </el-table-column>
              <el-table-column prop="id" label="设置">
                <template slot-scope="scope">
                  <el-button size="small" @click="changeAltime(scope.row.id)">设置</el-button>
                </template>
              </el-table-column>
          </el-table>
        </div>
      </div>
      <el-dialog title="请设置年假时限" v-if="Alshow" :visible.sync="Alshow" width="500px">
        <el-form label-width="100px">
          <el-form-item label="设置总年假天数" >
            <el-input v-model="Alchange" type="number" placeholder="请输入天数"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="default" @click="delAltime" v-if="!isAdd" style="float:left;">取消</el-button>
          <el-button type="primary" @click="chgAltime" >确定</el-button>
        </div>
      </el-dialog>
    </div>
<!-- ------------------- -->
  </div>
  <!-- 请假单详情 -->
  <el-dialog title="请假单详情" :visible.sync="dialog" width="1000px" @close="bangd()">
    <!-- 表单 -->
    <el-form ref="addForm" :model="addForm" label-width="80px" :rules="addFormRules">
        <!-- 请假人 -->
        <el-form-item label="请假人" prop="ownerId"  style="width: 300px;display: inline-block;">
            <!--普通员工只能自己填报自己的 -->
            <el-select v-model="addForm.ownerId" @change="selts()" placeholder="请选择请假人" style="width: 240px" :disabled="user.role == 0" filterable="true">
                <span v-for="(item, index) in users" :key="index">
                <el-option :label="item.name" :value="item.id"></el-option>
                </span> 
            </el-select>
        </el-form-item>
        <!-- 电话 -->
        <el-form-item label="电话" prop="tel" style="width: 300px;display: inline-block;">
            <el-input ref="ipts" v-model="addForm.tel" placeholder="请输入手机号" style="width: 250px;"></el-input>
        </el-form-item>
        <!-- 单选 -->
        <el-form-item style="display: block" label="时长单位">
            <el-radio-group v-model="addForm.timeType" @change="chanRadio()">
                <el-radio label="0">按天请假</el-radio>
                <el-radio label="1">按小时请假</el-radio>
            </el-radio-group>
        </el-form-item>
        <!-- 时间选择 -->
        <el-form-item :label="flg ? '选择日期' : '选择时间'" style="width: 74%;margin-right:500px">
            <el-col :span="9">
                <el-date-picker v-if="flg" type="date" placeholder="开始日期" 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="开始日期" 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="结束日期" 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 ? '请假天数' : '请假时长'" 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> 天</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> 小时
           </div>
        </el-form-item>
        <!-- 备注 -->
        <el-form-item label="备注" style="width: 100%">
            <el-input type="textarea" v-model="addForm.remark" :rows="5" style="width: 62%" maxlength="100" show-word-limit></el-input>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialog = false">取 消</el-button>
      <el-button type="primary" @click="determine()">确 定</el-button>
    </span>
  </el-dialog>
 
  </section>
</template>

<script>
import { config } from 'dingtalk-jsapi';
export default {
  name: "expense",
  components: {},
  props: {},
  data() {
    //验证手机号
    var checkTel = (rule, value, callback) =>{
        if (!value) {
            return callback(new Error('手机号不能为空'));
        } else {
            const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/
            if (reg.test(value)) {
                callback();
            } else {
                return callback(new Error('请输入正确的手机号'));
            }
        }
    };
    var checks = (rule, value, callback) => {
      if (!value) {
            return callback(new Error('请假天数不能为空'));
        } else {
            if (value > this.timeChoose) {
              return callback(new Error('超过当前选择日期的天数'));
            } else {
              callback();
            }
        }
    };
    return {
      addFormRules: {
        ownerId: [{ required: true, message: "请选择请假人", trigger: "blur" }],
        tel: [{required: true, validator: checkTel, trigger: 'blur'}],
        timeDays: [{required: true, validator: checks, trigger: 'blur'}],
        leaveType: [{ required: true, message: "请选择请假类型", trigger: "blur" }]
      },
      user: JSON.parse(sessionStorage.getItem("user")),
      shuz: ['事假填报', '病假填报', '年假填报', '产假填报'],
      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: '2020-01-01',
      // pickerOptionsStart: {
      //   disabledDate: (time) => {
      //     if (this.addForm.endDate) {
      //       return time.getTime() > new Date(this.addForm.endDate).getTime() || time.getTime() <= new Date(this.createDate).getTime() - 86400000;
      //     }
      //     return time.getTime() <= new Date(this.createDate).getTime() - 86400000;
      //   },
      // },
      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;
          },
      },
      // pickerOptionsStarts: {
      //   disabledDate: (time) => {
      //     if (this.endData) {
      //       return time.getTime() > new Date(this.endData).getTime() || time.getTime() <= new Date(this.createDate).getTime() - 86400000;
      //     }
      //     return time.getTime() <= new Date(this.createDate).getTime() - 86400000;
      //   },
      // },
      pickerOptionsEnds: {
        disabledDate: (time) => {
          if (this.statData) {
              return time.getTime() < new Date(this.statData).getTime() - 86400000;
          }
          return time.getTime() <= new Date(this.createDate).getTime() - 86400000;
          },
      },
      options: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
      tableData: [],
      page: 1,
      size: 20,
      isAuditList: '',
      total:0,
      apk: false,
      keyword: '',
      statData: this.getCurrentTimes(),
      endData: this.getCurrentTime(),
      statisticalList: [],
      loading: false,
      timeChoose: 1,
      // typess: [{
      //   name: '事假',
      //   id: 0
      // },{
      //   name: '病假',
      //   id: 1
      // },{
      //   name: '年假',
      //   id: 2
      // },{
      //   name: '产假',
      //   id: 3
      // }],
      typess: [{name: '事假',id: 0},{name: '病假',id: 1},{name: '年假',id: 2},{name: '产假',id: 3},{name: '婚假',id: 4},{name: '丧假',id: 5},{name: '调休假',id: 6},{name: '陪产假',id: 7},{name: '其他', id: 8}],
      statuss: [{
        name: '审核通过',
        id: 0
      },{
        name: '待审核',
        id: 1
      },{
        name: '驳回',
        id: 2
      },{
        name: '已撤销',
        id: 3
      }],
      createDatelis: '',
      ownerIds: '',
      type: '',
      code: '',
      createDate: '',
      falg: 0,
      dialog: false,
      adform: {},
      affId: '',
      qjType: [{name: '事假',id: 0},{name: '病假',id: 1},{name: '年假',id: 2},{name: '产假',id: 3},{name: '婚假',id: 4},{name: '丧假',id: 5},{name: '调休假',id: 6},{name: '陪产假',id: 7},{name: '其他', 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: '',
      susers: [],
      keywordAl: '',
      NcurDeptId:null,
      Nsdata : [],
      AlData : [],
      iAlDataS: [],
      iAlData : [
        {name: "杨峰", id: "7913998191517310976", Dpm:"软件开发部", AltimeAll: 2, AltimeAlr: 1},
        {name: "赵四", id: "123456789", Dpm:"美术中心", AltimeAll: 3, AltimeAlr: 1},
        {name: "刘能", id: "987654321", Dpm:"策划部", AltimeAll: 3, AltimeAlr: 2},
      ]

      // ------------------
    };
  },
  computed: {},
  watch: {},
  created() {
    let height = window.innerHeight;
            this.tableHeight = height - 195;
            const that = this;
            window.onresize = function temp() {
                that.tableHeight = window.innerHeight - 195;
            };
  },

  mounted() {
    this.getUsers() // 获取人员信息
    this.getDepartment();
    this.getAl()
  },
  filters: {},
  methods: {
    changeAltime(id){
      this.Alshow = true
      console.log("id",id);
    },
    searchAl(){
      this.iAlDataS = []
      for (let i = 0; i < this.iAlData.length; i++) {
        if (this.iAlData[i].name.indexOf(this.keywordAl) != -1) {
          this.iAlDataS.push(this.iAlData[i])
        }
      }
    },
    delAltime(){

    },
    chgAltime(){

    },
    getAl(){
      this.http.get('/user-yearleave-setting/list',
          res => {
            if(res.code == "ok"){
              this.iAlData = res.data
              console.log("getAl",res.data);
            }
          }
      )
    },
    // ---------

    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},
                    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 : "部门" , children : this.changeArr(list1)},
                          {value: 2 , label : "指定人员",children : this.susers}
                        ]
                        this.Nsdata = list1
                        // console.log("列表",this.Nsdata);
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

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

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

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

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

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

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

.submits {
  margin-left: 50%;

}
.waiting {
  color:orange;
}
.rejected {
  color:red;
}
/* 请假模块 */
.tops {
    width: 100%;
    height:100%;
    position: absolute;
    background: #f7f7f7;
    box-sizing: border-box;
    padding: 20px 0 0 220px;
}
.ctons {
    width: 86%;
    height: 92%;
    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: 20px;
    right: 1%;
    box-sizing: border-box;
}
.flex {
  display: flex;
  padding: 0 0 20px 0;
  border-bottom: 1px solid #f2f2f2;
}
.flex span {
  display: inline-block;
  margin: 0 10px 0 20px;
}
</style>