Browse Source

feat(common): 优化考勤页面布局和功能

- 调整考勤记录的显示格式,增加对请假记录的支持
- 添加请假日期和时间选择功能
- 优化校园选择和备注输入界面
- 修复了一些小的显示问题,如空值显示等
master
liutong 10 months ago
parent
commit
beef8b2af2
  1. 211
      pages/common/my_attendance.vue
  2. 7
      pages/market/my/index.vue
  3. 2
      pages/student/my/my.vue

211
pages/common/my_attendance.vue

@ -28,25 +28,31 @@
@click="openInfo(v)"
>
<view class="left">
<!-- <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>-->
</view>
<view class="right">
<view class="content">普通考勤</view>
<view class="content">
{{v.status_name}}
</view>
<view class="content">
校区{{v.campus_id_name}}
校区{{v.campus_id_name || ''}}
</view>
<view class="content">
备注{{v.remarks || ''}}
</view>
<view class="content">
<text>{{v.attendance_date}} {{v.check_in_time}}</text>
<text v-if="v.check_out_time" style="padding: 0 20rpx">-</text>
<text v-if="v.check_out_time">{{v.attendance_date}} {{v.check_out_time}}</text>
<view class="item" v-if="v.status != 'leave'">
<!--考勤-->
<text>开始时间{{ v.attendance_date }} {{ v.check_in_time || '' }}</text>
<text v-if="v.check_out_time">结束时间{{ v.attendance_date }} {{ v.check_out_time || '' }}</text>
</view>
<!--请假-->
<view class="item" v-else>
<text>开始时间{{ v.attendance_date }} {{v.leave_start_time || ''}}</text>
<text>结束时间{{ v.attendance_date }} {{v.leave_end_time || ''}}</text>
</view>
</view>
</view>
<view class="right"></view>
</view>
</view>
@ -67,7 +73,21 @@
:key="k"
>
<view class="left">
<!-- <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>-->
<view class="content">普通考勤</view>
<view class="content">
{{v.status_name}}
</view>
<view class="content">
校区{{v.campus_id_name}}
</view>
<view class="content">
备注{{v.remarks || ''}}
</view>
<view class="content">
<text>{{v.attendance_date}} {{v.check_in_time}}</text>
<text v-if="v.check_out_time" style="padding: 0 20rpx">-</text>
<text v-if="v.check_out_time">{{v.attendance_date}} {{v.check_out_time}}</text>
</view>
</view>
<view class="right">
<view class="content">普通考勤</view>
@ -105,7 +125,21 @@
:key="k"
>
<view class="left">
<!-- <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>-->
<view class="content">普通考勤</view>
<view class="content">
{{v.status_name}}
</view>
<view class="content">
校区{{v.campus_id_name}}
</view>
<view class="content">
备注{{v.remarks || ''}}
</view>
<view class="content">
<text>{{v.attendance_date}} {{v.check_in_time}}</text>
<text v-if="v.check_out_time" style="padding: 0 20rpx">-</text>
<text v-if="v.check_out_time">{{v.attendance_date}} {{v.check_out_time}}</text>
</view>
</view>
<view class="right">
<view class="content">普通考勤</view>
@ -150,8 +184,69 @@
<text class="fui-descr">{{signIn_content}}</text>
<fui-form class="form-section" ref="form" top="0" :model="formData" :show="false">
<view class="input-style">
<!-- 请假日期选择-->
<fui-form-item
v-if="formData.status == 'leave'"
label="选择日期"
asterisk
asteriskPosition="right"
labelSize='26'
prop=""
background='#fff'
labelColor='#000'
:bottomBorder='true'
>
<view class="input-title" style="margin-right:14rpx;">
<view
class="input-title"
style="margin-right:14rpx;"
@click="openLeaveData()">
{{ (formData.attendance_date) ? formData.attendance_date : '点击选择' }}
</view>
<fui-date-picker
:show="showLeaveData"
type="3"
:minDate="leaveMinDate"
:maxDate="leaveMaxDate"
@change="changeLeaveData"
@cancel="cancelLeaveData"
></fui-date-picker>
</view>
</fui-form-item>
<!-- 请假时间选择-->
<fui-form-item
v-if="formData.status == 'leave'"
label="选择时间范围"
asterisk
asteriskPosition="right"
labelSize='26'
prop=""
background='#fff'
labelColor='#000'
:bottomBorder='true'
>
<view class="input-title" style="margin-right:14rpx;">
<view
class="input-title"
style="margin-right:14rpx;"
@click="openLeaveStartTime()">
{{ (formData.leave_time) ? formData.leave_time : '点击选择' }}
</view>
<fui-date-picker
:show="showLeaveStartTime"
range
type="6"
@change="changeLeaveStartTime"
@cancel="cancelLeaveStartTime"
></fui-date-picker>
</view>
</fui-form-item>
<!--校区选择-->
<fui-form-item
v-if="picker_options.length"
label="选择校区"
asterisk
asteriskPosition="right"
@ -172,7 +267,6 @@
</fui-form-item>
<!--备注-->
<fui-form-item
v-if="formData.status == 'leave'"
label="备注"
labelSize='26'
prop=""
@ -256,7 +350,7 @@
<!-- 选择器 -->
<!-- 校区下拉选择器 -->
<fui-picker
:linkage='picker_linkage'
:options="picker_options"
@ -266,6 +360,10 @@
@cancel="cancelCicker">
</fui-picker>
<!-- 请假日期选择器-->
<!-- 请假时间范围选择器-->
</view>
</template>
@ -324,6 +422,9 @@ export default {
status:'',//: present-, absent-, late-, leave_early-退,leave-,sign_out-退
remarks:'',//
attendance_date:'',///
leave_time:'',//
leave_start_time:'',//
leave_end_time:'',//
longitude:'',//
latitude:'',//
},
@ -349,6 +450,16 @@ export default {
// },
],//
//
showLeaveData:false,
leaveMinDate:'',//
leaveMaxDate:'',//
//
showLeaveStartTime:false,
//
info_show:false,//|true=,false=
info_data:{},//
@ -399,11 +510,20 @@ export default {
this.userInfo = res.data
this.picker_options = []
res.data.cameus_dept_arr.forEach((v,k)=>{
if(v.campus_id){
this.picker_options.push({
text: v.campus_id_name,
value: v.campus_id
})
}
})
//
if(!this.picker_options.length){
this.formData.campus_id = 0
this.formData.campus_id_name = ''
}
console.log(123123,this.picker_options)
},
@ -420,7 +540,17 @@ export default {
this.formData.attendance_date = res
},
//
this.leaveMinDate = res
//
const minDate = new Date(this.leaveMinDate);
minDate.setMonth(minDate.getMonth() + 6);
const max_year = minDate.getFullYear();
const max_month = String(minDate.getMonth() + 1).padStart(2, '0');
const max_day = String(minDate.getDate()).padStart(2, '0');
this.leaveMaxDate = `${max_year}-${max_month}-${max_day}`; },
//tag
async segmented(e) {
@ -773,6 +903,43 @@ export default {
return [data];
},
//
//-
changeLeaveData(e){
console.log('请假日期选择',e)
this.formData.attendance_date = e.result
this.cancelLeaveData()
},
//
openLeaveData(){
this.showLeaveData = true
},
//
cancelLeaveData(){
this.showLeaveData = false
},
//-
changeLeaveStartTime(e){
console.log('请假开始时间选择',e)
let leave_start_time = e.startDate.result
let leave_end_time = e.endDate.result
this.formData.leave_time = `${leave_start_time}-${leave_end_time}`
this.formData.leave_start_time = leave_start_time
this.formData.leave_end_time = leave_end_time
this.cancelLeaveStartTime()
},
//
openLeaveStartTime(){
this.showLeaveStartTime = true
},
//
cancelLeaveStartTime(){
this.showLeaveStartTime = false
},
}
}
</script>
@ -825,24 +992,24 @@ export default {
align-items: center;
gap: 43rpx;
.left{
image{
width: 174rpx;
height: 174rpx;
border-radius: 24rpx;
background-color: #333333;
}
}
.right{
border: 1px solid red;
display: flex;
flex-direction: column;
gap: 18rpx;
.content{
font-size: 24rpx;
.item{
display: flex;
flex-direction: column;
}
}
.content:nth-child(1){
font-size: 28rpx;
}
}
.right{
border: 1px solid red;
}
}
}
.title_box{
@ -856,6 +1023,7 @@ export default {
}
.section_btn{
margin-top: 20rpx;
display: flex;
justify-content: center;
display: flex;
@ -901,6 +1069,9 @@ export default {
.input-style {
text-align: right !important;
.input-title{
border: 1px solid red;
}
}
.button_box{
margin-top: 30rpx;

7
pages/market/my/index.vue

@ -23,12 +23,12 @@
<view class="bottom" v-for="(v,k) in userInfo.cameus_dept_arr">
<view class="left">
<view class="title">校区</view>
<view class="title">{{v.campus_id_name}}</view>
<view class="title">{{v.campus_id_name || ''}}</view>
</view>
<view class="division"></view>
<view class="right">
<view class="title">部门</view>
<view class="title dept">{{v.dept_name_str}}</view>
<view class="title dept">{{v.dept_name_str || ''}}</view>
</view>
</view>
</view>
@ -279,7 +279,8 @@ export default {
/* 小程序端样式 */
// #ifdef MP-WEIXIN
padding: 80rpx 0rpx;
padding-top: 110rpx;
padding-bottom: 40rpx;
// #endif
font-size: 30rpx;

2
pages/student/my/my.vue

@ -174,7 +174,7 @@
<style lang="less" scoped>
.main_box {
background: #292929;
min-height: 28vh;
height: 100%;
}
//

Loading…
Cancel
Save