<template>
<div id="contaion">
<better-scroll ref="scroll" :scrollY="true" height="99%" :data="dataList">
<div style="min-height: 100%; display: flex; justify-content: space-between;" class="box-header">
<div style="display: flex; align-items: center; margin-left: 20%;">
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="我的记录" name="first"></el-tab-pane>
</el-tabs>
</template>
</div>
<div style="display: flex; align-items: center; margin-right :20%">
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="我的下级" name="second"></el-tab-pane>
</el-tabs>
</template>
</div>
</div>
<div style="min-height:100%" v-show="showMyRecords">
</div>
<div style="min-height:100% width: 100%;" v-show="showMySubordinates">
<div class="box-header">
<div style="width: 100%;">
<div class="box-heard-time" style="padding-right: 0px;">
<div style="width: 50%; margin-left: -45px;">
<span>
<clockin ref="clockin" style=" font-weight: 600; color: #030303; font-size: 14px" @isUpdate="setParam">
请选择部门</clockin>
</span>
</div>
<!-- <div style="padding-top: 2px; ">
<van-icon v-if="checkLastMonth" name="arrow-left" @click="handleChangeTime(1)" />
<van-icon v-else color="#e8e8e8" name="arrow-left" />
</div> -->
<TimePicker ref="time_picker" @isUpdate="setParam"></TimePicker>
<div style=" margin-left: -65px; margin-right: -65px; font-weight: 600; color: #030303; font-size: 14px">
<!-- {{ dateNow }} -->
</div>
<!-- <div style="padding-top: 2px">
<van-icon name="arrow" @click="handleChangeTime(2)" />
</div> -->
</div>
</div>
</div>
<EmployeeSchedule ref="employee_schedule">
</EmployeeSchedule>
</div>
</better-scroll>
</div>
</template>
data() {
return {
activeName: 'first',//first
showMyRecords: true,
showMySubordinates: true,
}
},
methods: {
setParam(name, value) {
if (value.state == 'data') {
this.$refs[name].param = value.val
}
else {
this.$refs[name].loading = value.val
}
},
handleClick(tab, event) {
if (tab.name === 'first') {
this.showMyRecords = true;
this.showMySubordinates = false;
} else if (tab.name === 'second') {
this.showMyRecords = false;
this.showMySubordinates = true;
}
},
}
</script>
<style lang="less" scoped>
#contaion {
width: 100%;
height: 90vh;
/* background: #eeeeee7c; */
background: rgba(238, 238, 238, 0.411);
}
#contaion {
overflow: hidden;
-webkit-overflow-scrolling: touch;
}
#contaion::-webkit-scrollbar {
display: none;
}
.box-header {
height: 40px;
display: flex;
flex-direction: row;
line-height: 40px;
justify-content: space-between;
margin-top: 10px;
background: #ffffff;
}
</style>