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-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-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)" >全部</p></el-menu-item>
            <el-menu-item index="2-2" ><p @click="bills(true)">待核审</p></el-menu-item>
          </el-submenu>
            <el-menu-item index="3" @select="bills" @click="bills(false)" 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">
              <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">{{shuz[ins]}}</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="ownerId" >
                    <!--普通员工只能自己填报自己的 -->
                    <el-select v-model="addForm.ownerId" @change="selts()" placeholder="请选择请假人" style="width: 150px" :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>
                    <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: 60%;margin-right:500px">
                    <el-col :span="11">
                        <el-date-picker v-if="flg" type="date" placeholder="开始日期" value-format="yyyy-MM-dd" :picker-options="pickerOptionsStart" v-model="addForm.startDate" style="width: 100%;" @blur="datas()"></el-date-picker>
                        <el-date-picker v-else type="date" placeholder="开始日期" value-format="yyyy-MM-dd" v-model="addForm.startDate" style="width: 100%;" @change="datasss()"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-date-picker v-if="flg" type="date" placeholder="结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptionsEnd" v-model="addForm.endDate" style="width: 100%;" @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-select  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-input v-model="addForm.timeHours" @blur="inputss()" @input="addForm.timeDays=addForm.timeDays.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: 50%"></el-input>
                </el-form-item>
            </el-form>

            <div>
              <p style="margin-left: 75px"><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">
            <el-table v-loading="loading" :data="tableData" style="width: 100%" height="100%">
                <el-table-column prop="ownerName" label="请假人" width="180"></el-table-column>
                <el-table-column prop="tel" label="电话" width="180"></el-table-column>
                <el-table-column prop="leaveType" label="请假类型" width="180">
                  <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>
                  </template>
                </el-table-column>
                <el-table-column prop="startDate" label="请假开始时间" width="180"></el-table-column>
                <el-table-column prop="endDate" label="请假结束时间" width="180"></el-table-column>
                <el-table-column label="请假天数" width="120">
                  <template slot-scope="scope">
                    <div>{{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 type="primary" size="mini" @click.stop.native="approve(scope.row)">通过</el-button>
                        <el-button type="danger" 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>
            <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" class="tops">
      <!-- 公共 -->
        <div class="ctons">
          <div style="display: flex;align-items: center;">
            <div style="display: inline-block;width: 350px">
              <el-input style="float:left;" v-model="keyword" class="input-with-select" placeholder="请输入人员搜索" clearable="true">
                  <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">开始日期</span>
              <el-date-picker
                v-model="statData"
                type="date"
                placeholder="选择日期" >
              </el-date-picker>
            </div>
            <div style="display: inline-block;width: 350px">
              <span style="display: inline-block;margin: 0 15px 0 0">结束日期</span>
              <el-date-picker
                v-model="endData"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </div>
          </div>
          <div style="margin-top: 30px">
            <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>
 
  </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][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'}]
      },
      user: JSON.parse(sessionStorage.getItem("user")),
      shuz: ['事假填报', '病假填报', '年假填报', '产假填报'],
      ins: 0,
      addForm: {
        timeType: '0',
        startDate: this.getCurrentTime(),
        endDate: this.getCurrentTime(),
        timeDays: 1,
        leaveType: 0,
        // indate: this.getCurrentTime(),
        timeHours: '8',
        tel: ''
      },
      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();
          }
          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,
    };
  },
  computed: {},
  watch: {},
  created() {},

  mounted() {
    this.getUsers() // 获取人员信息
  },
  filters: {},
  methods: {
    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;
                if (this.user.role == 0) {
                    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) {
      if (keyPath[0] == '1') {
        this.displayTable = false;
        this.apk = false
      } else if(keyPath[0] == '2') {
        this.displayTable = true;
        this.apk = false
      } else {
        this.displayTable = true;
        this.apk = true
        this.statistical()
      }
    },
    bills(audit){
      this.tableData = []
      this.displayTable = true;
      this.isAuditList = audit;
      this.loading = true
      var param = {pageIndex: this.page,
                    pageSize: this.size,
                    code: '',
                    createDate: '',
                    ownerId:'',
                    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"
            });
        });
    },
    submits(){
        this.$refs.addForm.validate(valid => {
          if (valid) {
            this.http.post('/leave-sheet/add', this.addForm,
            res => {
                if (res.code == "ok") {
                    this.$message({
                      message: '填报成功',
                      type: "success"
                    });
                } 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(1234)
      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'
        }
    },
    // 计算日期
    datas() {
        // this.addForm.timeDays = this.DateDiff(this.addForm.startDate, this.addForm.endDate)
        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;
    },
    // 时间
    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 {
        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]
      }
      }
    },
  }
};
</script>
<style scoped>
.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;
}
.poss {
    position: fixed;
    bottom: 20px;
    right: 1%;
    box-sizing: border-box;
}
</style>