|
|
|
@@ -0,0 +1,495 @@ |
|
|
|
<template> |
|
|
|
<div class="home_wrapper"> |
|
|
|
<div class="header_main"> |
|
|
|
零工登记 |
|
|
|
<div class="return_btn" @click="onClickLeft"></div> |
|
|
|
<div class="add_btn" v-show="showBtn" @click="$router.push({path:'/sunVillage_info/list_tourists_registration_add'})"></div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="record_main"> |
|
|
|
<div class="record_det"> |
|
|
|
<div class="year_l" @click="tabShow"><i :class="{'icon':true , 'zk':!showTab , 'ss':showTab } "></i>{{year == '' ? '全部': year}}<span class="unit">{{year == '' ? '': '年'}}</span>{{month}}<span class="unit">{{month == '' ? '': '月'}}</span></div> |
|
|
|
<div class="total_r">共<span>{{listLength}}</span>次出工</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="date_box" v-if="showTab"> |
|
|
|
<div class="record_list"> |
|
|
|
<div :class="{'flex_block':true , 'current':year == ''}" @click="tabClick('')">全部</div> |
|
|
|
<div v-for="(item,index) in yearList" :key="index" :class="{'flex_block':true , 'current':year == item}" @click="tabClick(item)">{{item}}</div> |
|
|
|
</div> |
|
|
|
<div class="record_list month_list"> |
|
|
|
<div v-for="(item,index) in 12" :key="index" :class="{'flex_block':true , 'current':month == item}" @click="tabClickMonth(item)"> |
|
|
|
{{item}}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="center_box"> |
|
|
|
<div class="name_box"> |
|
|
|
<van-row> |
|
|
|
<van-col :span="24">姓名</van-col> |
|
|
|
</van-row> |
|
|
|
<van-row v-for="(item,index) in 10" :key="index"> |
|
|
|
<van-col :span="24">张三</van-col> |
|
|
|
</van-row> |
|
|
|
<div class="name_bg"></div> |
|
|
|
<img src="../../assets/images/sunVillage_info/name_icon.png" class="name_icon"/> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="right_box"> |
|
|
|
<div class="right_box_box"> |
|
|
|
<van-row> |
|
|
|
<van-col :span="8">出工日期</van-col> |
|
|
|
<van-col :span="8">出工事由</van-col> |
|
|
|
<van-col :span="8">出工数</van-col> |
|
|
|
</van-row> |
|
|
|
<van-row v-for="(item,index) in 10" :key="index"> |
|
|
|
<van-col :span="8">2023-03-05</van-col> |
|
|
|
<van-col :span="8">上班打卡</van-col> |
|
|
|
<van-col :span="8">8</van-col> |
|
|
|
</van-row> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="clear"></div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { listOddjob } from "@/api/sunVillage_info/fixedAssets"; |
|
|
|
import Cookies from "js-cookie"; |
|
|
|
import request from '@/utils/request' |
|
|
|
export default { |
|
|
|
name: "certificateList", |
|
|
|
data() { |
|
|
|
return { |
|
|
|
applicationList:[], |
|
|
|
applicationListSecond:[], |
|
|
|
assetStatusOptions:[], |
|
|
|
auditStatus:[], |
|
|
|
loading: false, |
|
|
|
finished: false, |
|
|
|
show: false, |
|
|
|
showTab: false, |
|
|
|
fileList:[], |
|
|
|
listLength:'0', |
|
|
|
searchInput:'', |
|
|
|
queryParams:{ |
|
|
|
pageNum:1, |
|
|
|
pageSize:10, |
|
|
|
orderByColumn:'openNy', |
|
|
|
isAsc:'desc', |
|
|
|
year:'', |
|
|
|
}, |
|
|
|
uploadFiles1:[], |
|
|
|
projectId:'', |
|
|
|
projectIndex:'', |
|
|
|
year:'', |
|
|
|
month:'', |
|
|
|
showBtn:true, |
|
|
|
yearMonth:[], |
|
|
|
yearList:[], |
|
|
|
deptName:'', |
|
|
|
nowYear:new Date().getFullYear(), |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.queryParams.bookId = Cookies.get('bookId'); |
|
|
|
this.queryParams.deptId = Cookies.get('deptId'); |
|
|
|
this.deptName = Cookies.get('deptName'); |
|
|
|
this.queryParams.yearMonth = this.$route.query.time; |
|
|
|
for (let i = 0 ; i < 5 ; i++){ |
|
|
|
this.yearList.push(this.nowYear-i); |
|
|
|
} |
|
|
|
this.getList(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getList(){ |
|
|
|
var _this = this; |
|
|
|
|
|
|
|
}, |
|
|
|
tabClickMonth(month){ |
|
|
|
this.month = month ; |
|
|
|
if (month < 10){ |
|
|
|
this.queryParams.yearMonth = this.year + '-0' + month |
|
|
|
}else{ |
|
|
|
this.queryParams.yearMonth = this.year + '-' + month |
|
|
|
} |
|
|
|
this.finished = false; |
|
|
|
this.queryParams.pageNum = 1; |
|
|
|
this.applicationList = []; |
|
|
|
this.getList(); |
|
|
|
}, |
|
|
|
tabShow(){ |
|
|
|
this.showTab = !this.showTab; |
|
|
|
}, |
|
|
|
tabClick(year){ |
|
|
|
this.year = year ; |
|
|
|
if (year == ''){ |
|
|
|
this.queryParams.yearMonth = '' |
|
|
|
this.month = '' |
|
|
|
}else{ |
|
|
|
this.queryParams.yearMonth = year + '- 01' |
|
|
|
this.month = '1' |
|
|
|
} |
|
|
|
this.finished = false; |
|
|
|
this.queryParams.pageNum = 1; |
|
|
|
this.applicationList = []; |
|
|
|
this.getList(); |
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
|
|
|
|
.home_wrapper{ |
|
|
|
background: #e9e9e9; |
|
|
|
min-height: 100vh; |
|
|
|
width: 100vw; |
|
|
|
.header_main{ |
|
|
|
height: 116px; |
|
|
|
background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
font-size: 36px; |
|
|
|
line-height: 116px; |
|
|
|
text-align: center; |
|
|
|
color: #fff; |
|
|
|
position: relative; |
|
|
|
.return_btn{ |
|
|
|
width: 24px; |
|
|
|
height: 43.2px; |
|
|
|
background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat; |
|
|
|
background-size: 20px 36px; |
|
|
|
position: absolute; |
|
|
|
left: 38px; |
|
|
|
top: 36px; |
|
|
|
} |
|
|
|
.add_btn{ |
|
|
|
width: 56.4px; |
|
|
|
height: 40.8px; |
|
|
|
background: url('../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat; |
|
|
|
background-size: 47px 34px; |
|
|
|
position: absolute; |
|
|
|
right: 38px; |
|
|
|
top: 36px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.list_main{ |
|
|
|
padding:0 22px; |
|
|
|
.item{ |
|
|
|
height: 100px; |
|
|
|
border-radius: 30px; |
|
|
|
background: #fff; |
|
|
|
box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1); |
|
|
|
padding:15px 32px; |
|
|
|
display: flex; |
|
|
|
margin-bottom: 20px; |
|
|
|
.info{ |
|
|
|
flex:1; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
.title{ |
|
|
|
display: flex; |
|
|
|
font-size: 32px; |
|
|
|
align-items: center; |
|
|
|
height: 58px; |
|
|
|
.icon_box{ |
|
|
|
width: 34px; |
|
|
|
display: block; |
|
|
|
height: 30px; |
|
|
|
background: url('../../assets/images/sunVillage_info/list_icon_2.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
margin-right: 10px; |
|
|
|
} |
|
|
|
.news_title{ |
|
|
|
max-width:416px; |
|
|
|
overflow: hidden; |
|
|
|
white-space: nowrap; |
|
|
|
text-overflow: ellipsis; |
|
|
|
-o-text-overflow: ellipsis; |
|
|
|
} |
|
|
|
.tips_mark{ |
|
|
|
width: 34px; |
|
|
|
height: 34px; |
|
|
|
background: #fa0c0c; |
|
|
|
border-radius: 8px; |
|
|
|
font-size: 24px; |
|
|
|
color: #fff; |
|
|
|
text-align: center; |
|
|
|
line-height: 34px; |
|
|
|
margin-left: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
.red{ |
|
|
|
color: #fa0c0c; |
|
|
|
} |
|
|
|
.green{ |
|
|
|
color: #4caf50; |
|
|
|
} |
|
|
|
.time{ |
|
|
|
font-size: 32px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: right; |
|
|
|
height: 30px; |
|
|
|
margin-top: 6px; |
|
|
|
.icon_time{ |
|
|
|
width: 25px; |
|
|
|
height: 25px; |
|
|
|
background: url('../../assets/images/sunVillage_info/list_icon_4.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
margin-right: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.operation{ |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: flex-end; |
|
|
|
text-align: right; |
|
|
|
.opera_btn{ |
|
|
|
width: 52px; |
|
|
|
height: 52px; |
|
|
|
border-radius: 50%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content:center; |
|
|
|
|
|
|
|
&.delete{ |
|
|
|
background:#df0707; |
|
|
|
margin-left: 28px; |
|
|
|
.icon{ |
|
|
|
width: 22px; |
|
|
|
height: 29px; |
|
|
|
background: url('../../assets/images/sunVillage_info/list_icon_7.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
} |
|
|
|
&.edit{ |
|
|
|
background: #79cf13; |
|
|
|
.icon { |
|
|
|
width: 26px; |
|
|
|
height: 25px; |
|
|
|
background: url('../../assets/images/sunVillage_info/list_icon_6.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
} |
|
|
|
&.view{ |
|
|
|
background: #3494ff; |
|
|
|
.icon { |
|
|
|
width: 29px; |
|
|
|
height: 21px; |
|
|
|
background: url('../../assets/images/sunVillage_info/list_icon_3.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
.bottom_tips{ |
|
|
|
font-size: 24px; |
|
|
|
color: #a7a6a6; |
|
|
|
text-align: center; |
|
|
|
margin-top: 32px; |
|
|
|
background: url('../../assets/images/sunVillage_info/list_icon_8.png') center center no-repeat; |
|
|
|
background-size: 260px 2px; |
|
|
|
.xs{ |
|
|
|
padding:0 8px; |
|
|
|
background: #e9e9e9; |
|
|
|
} |
|
|
|
} |
|
|
|
.banner { |
|
|
|
display: flex; |
|
|
|
background:#3494ff; |
|
|
|
color:#fff; |
|
|
|
text-align: center; |
|
|
|
margin:3%; |
|
|
|
border-radius: 10PX; |
|
|
|
} |
|
|
|
.banner_tabs{ |
|
|
|
flex:1; |
|
|
|
padding:10PX 0; |
|
|
|
font-size: 16PX; |
|
|
|
div:nth-child(2){ |
|
|
|
font-size: 14PX; |
|
|
|
margin-top: 5PX; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.record_main{ |
|
|
|
padding:30px 22px; |
|
|
|
.record_det{ |
|
|
|
height: 38px; |
|
|
|
line-height: 38px; |
|
|
|
display: flex; |
|
|
|
justify-content:space-between; |
|
|
|
.year_l{ |
|
|
|
font-size: 30px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
color: #858585; |
|
|
|
|
|
|
|
.unit{ |
|
|
|
padding-left: 5px; |
|
|
|
} |
|
|
|
.icon{ |
|
|
|
width: 23px; |
|
|
|
height: 12px; |
|
|
|
display: block; |
|
|
|
background: url('../../assets/images/sunVillage_info/list_icon_1.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
margin-bottom: 4px; |
|
|
|
margin-right: 8px; |
|
|
|
&.zk { |
|
|
|
transform: rotate(0deg) |
|
|
|
} |
|
|
|
&.ss{ |
|
|
|
transform: rotate(180deg) |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
.total_r{ |
|
|
|
font-size: 26px; |
|
|
|
letter-spacing: 2px; |
|
|
|
span{ |
|
|
|
color: #2facfe; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.record_list{ |
|
|
|
display: flex; |
|
|
|
flex-flow: wrap; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
.flex_block{ |
|
|
|
font-size: 30px; |
|
|
|
color: #aaaaaa; |
|
|
|
&.current{ |
|
|
|
color: #2facfe; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.month_list{ |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
.flex_block{ |
|
|
|
font-size: 30px; |
|
|
|
color: #aaaaaa; |
|
|
|
padding-right: 0px; |
|
|
|
&.current{ |
|
|
|
color: #2facfe; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.date_box{ |
|
|
|
background: url('../../assets/images/sunVillage_info/date_bg.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
height: 90PX; |
|
|
|
padding: 0 15PX; |
|
|
|
margin-top: 15PX; |
|
|
|
.record_list{ |
|
|
|
height: 45PX; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
.month_list{ |
|
|
|
border-top: 2PX dashed #e2e2e2; |
|
|
|
} |
|
|
|
} |
|
|
|
.top_head_title{ |
|
|
|
font-size: 16PX; |
|
|
|
text-align: center; |
|
|
|
padding: 15PX 0; |
|
|
|
} |
|
|
|
.name_box{ |
|
|
|
float: left; |
|
|
|
width: 100PX; |
|
|
|
position: relative; |
|
|
|
.name_bg{ |
|
|
|
background-color: rgba(47,172,254,0.2); |
|
|
|
width: 100PX; |
|
|
|
height: 100%; |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
} |
|
|
|
.name_icon{ |
|
|
|
position: absolute; |
|
|
|
top: 40PX; |
|
|
|
left: 50%; |
|
|
|
transform: translateX(-50%); |
|
|
|
} |
|
|
|
.van-row:nth-child(odd){ |
|
|
|
.van-col { |
|
|
|
background-color: #ffffff; |
|
|
|
} |
|
|
|
} |
|
|
|
.van-row:nth-child(1){ |
|
|
|
border-top-left-radius: 10PX; |
|
|
|
border-bottom-left-radius: 10PX; |
|
|
|
background-color: #ffffff; |
|
|
|
.van-col { |
|
|
|
background-color: #2facfe; |
|
|
|
color: #ffffff; |
|
|
|
border-radius: 10PX; |
|
|
|
} |
|
|
|
} |
|
|
|
.van-col{ |
|
|
|
font-size: 16PX; |
|
|
|
padding: 10PX 15PX; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
} |
|
|
|
.center_box{ |
|
|
|
padding-left: 3%; |
|
|
|
} |
|
|
|
.right_box{ |
|
|
|
float: left; |
|
|
|
width: calc(100% - 100PX); |
|
|
|
overflow:hidden; |
|
|
|
overflow-x: scroll; |
|
|
|
white-space:nowrap; |
|
|
|
display: -webkit-box; |
|
|
|
-webkit-overflow-scrolling: touch; |
|
|
|
.right_box_box{ |
|
|
|
width: 400PX; |
|
|
|
} |
|
|
|
.van-row:nth-child(odd){ |
|
|
|
.van-col{ |
|
|
|
background-color: #ffffff; |
|
|
|
} |
|
|
|
} |
|
|
|
.van-row:nth-child(1){ |
|
|
|
.van-col{ |
|
|
|
color: #2facfe; |
|
|
|
} |
|
|
|
} |
|
|
|
.van-col{ |
|
|
|
font-size: 16PX; |
|
|
|
padding: 10PX 15PX; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
} |
|
|
|
.clear{ |
|
|
|
clear: both; |
|
|
|
} |
|
|
|
</style> |
