fea: 打卡查看-支持出差打卡类型

This commit is contained in:
wangzhuo
2025-09-19 15:30:07 +08:00
parent 082d60e2da
commit af25a14c17
2 changed files with 123 additions and 107 deletions

View File

@@ -1,164 +1,171 @@
<template> <template>
<view class="con-body"> <view class="con-body">
<view class="con-bg"> <view class="con-bg">
<!-- 头部 --> <!-- 头部 -->
<customHeader ref="customHeaderRef" :title="'考勤查看'" :leftFlag="true" :rightFlag="false"></customHeader> <customHeader ref="customHeaderRef" :title="'考勤查看'" :leftFlag="true" :rightFlag="false"></customHeader>
<!-- 高度来避免头部遮挡 --> <!-- 高度来避免头部遮挡 -->
<view class="top-height" :style="{ paddingTop: navBarPaddingTop + 'px' }"></view> <view class="top-height" :style="{ paddingTop: navBarPaddingTop + 'px' }"></view>
<!-- 正文内容 --> <!-- 正文内容 -->
<view> <view>
<!-- 搜索 --> <!-- 搜索 -->
<!-- <view class="search">--> <!-- <view class="search">-->
<!-- <picker mode="date" :value="defaultDate" :start="startDate" :end="endDate" @change="bindDateChange"--> <!-- <picker mode="date" :value="defaultDate" :start="startDate" :end="endDate" @change="bindDateChange"-->
<!-- class="picker-bg">--> <!-- class="picker-bg">-->
<!-- <view class="picker">--> <!-- <view class="picker">-->
<!-- <uni-icons custom-prefix="iconfont" color="#ffffff" type="icon-phoneshizhong"--> <!-- <uni-icons custom-prefix="iconfont" color="#ffffff" type="icon-phoneshizhong"-->
<!-- size="18"></uni-icons>--> <!-- size="18"></uni-icons>-->
<!-- <view>{{ defaultDate }}</view>--> <!-- <view>{{ defaultDate }}</view>-->
<!-- <uni-icons type="down" size="18"></uni-icons>--> <!-- <uni-icons type="down" size="18"></uni-icons>-->
<!-- </view>--> <!-- </view>-->
<!-- </picker>--> <!-- </picker>-->
<!-- <button type="default" @click="handleSearch" size="mini" class="btn-search">查询</button>--> <!-- <button type="default" @click="handleSearch" size="mini" class="btn-search">查询</button>-->
<!-- </view>--> <!-- </view>-->
<!-- 分页部分 --> <!-- 分页部分 -->
<view class="white-bg margin-bottom20" v-for="(item, index) in list"> <view class="white-bg margin-bottom20" v-for="(item, index) in list">
<view class="report-list" > <view class="report-list">
<view class="title" <view class="title"
:style="{color: item.mapType == 1 ? '#F5813A' : '#1989FA'}" :style="{color: MapType[item.mapType].color}"
>类型{{ item.mapType == 1 ? '签到' : '打卡' }}</view> >类型{{ MapType[item.mapType].label }}
<view class="r-list"> </view><!--item.mapType == 1 ? '#F5813A' : '#1989FA'}-->
<view class="r-left">开始签到时间</view> <view class="r-list">
<view class="r-right">{{ item.goVisistStartTime }}</view> <view class="r-left">开始签到时间</view>
</view> <view class="r-right">{{ item.goVisistStartTime }}</view>
<view class="border-bottom"></view> </view>
<view class="r-list"> <view class="border-bottom"></view>
<view class="r-left">开始签到地点</view> <view class="r-list">
<view class="r-right">{{ item.addressForStart }}</view> <view class="r-left">开始签到地点</view>
</view> <view class="r-right">{{ item.addressForStart }}</view>
<view class="border-bottom"></view> </view>
<view class="r-list"> <view class="border-bottom"></view>
<view class="r-left">结束签到时间</view> <view class="r-list">
<view class="r-right">{{ item.goVisistEndTime }}</view> <view class="r-left">结束签到时间</view>
</view> <view class="r-right">{{ item.goVisistEndTime }}</view>
<view class="border-bottom"></view> </view>
<view class="r-list"> <view class="border-bottom"></view>
<view class="r-left">结束签到地点</view> <view class="r-list">
<view class="r-right">{{ item.addressForEnd }}</view> <view class="r-left">结束签到地点</view>
</view> <view class="r-right">{{ item.addressForEnd }}</view>
<view class="r-list" v-if="item.remark != null"> </view>
<view class="r-left">备注内容</view> <view class="r-list" v-if="item.remark != null">
<view class="r-right">{{ item.remark }}</view> <view class="r-left">备注内容</view>
</view> <view class="r-right">{{ item.remark }}</view>
</view> </view>
</view> </view>
</view>
</view> </view>
</view>
</view> </view>
</view>
</template> </template>
<script setup> <script setup>
import customHeader from '@/components/customHeader.vue' import customHeader from '@/components/customHeader.vue'
import { getNavBarPaddingTop } from '@/utils/system.js' import {getNavBarPaddingTop} from '@/utils/system.js'
import { onMounted, ref } from 'vue'; import {onMounted, ref} from 'vue';
import { getDate } from '@/utils/datetime.js' import {getDate} from '@/utils/datetime.js'
import { CheckInInformationViewing } from '../../../../api/crm/activity/map'; import {CheckInInformationViewing} from '../../../../api/crm/activity/map';
import { onLoad } from '@dcloudio/uni-app'; import {onLoad} from '@dcloudio/uni-app';
import {MapType} from "./dataMap";
const navBarPaddingTop = ref(0); const navBarPaddingTop = ref(0);
onMounted(() => { onMounted(() => {
navBarPaddingTop.value = getNavBarPaddingTop() * 2; navBarPaddingTop.value = getNavBarPaddingTop() * 2;
}) })
// 开始时间 // 开始时间
let startDate = getDate('start'); let startDate = getDate('start');
// 结束时间间隔10年 // 结束时间间隔10年
let endDate = getDate('end'); let endDate = getDate('end');
let defaultDate = getDate({ format: true }) let defaultDate = getDate({format: true})
let bindDateChange = (e) => { let bindDateChange = (e) => {
defaultDate = e.detail.value defaultDate = e.detail.value
} }
//获取list集合信息 //获取list集合信息
let list = ref([]) let list = ref([])
function getList() { function getList() {
CheckInInformationViewing().then(res => { CheckInInformationViewing().then(res => {
list.value = res.rows list.value = res.rows
}) })
} }
onLoad(() => { onLoad(() => {
getList() getList()
}) })
</script> </script>
<style scoped> <style scoped>
.r-left {
min-width: 6em;
}
.con-bg {
overflow-y: auto;
}
.search { .search {
display: flex; display: flex;
margin-bottom: 30rpx; margin-bottom: 30rpx;
padding: 0 30rpx; padding: 0 30rpx;
} }
.search .btn-search { .search .btn-search {
border: none; border: none;
background: none; background: none;
color: #fff; color: #fff;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 28rpx; font-size: 28rpx;
/* 调整为更合适的字号 */ /* 调整为更合适的字号 */
font-weight: normal; font-weight: normal;
/* 如果不需要加粗,可以去掉 bolder */ /* 如果不需要加粗,可以去掉 bolder */
margin-left: 0rpx; margin-left: 0rpx;
padding: 0 20rpx; padding: 0 20rpx;
/* 调整 padding去掉 padding-top */ /* 调整 padding去掉 padding-top */
height: 56rpx; height: 56rpx;
/* 固定高度,确保与 picker 对齐 */ /* 固定高度,确保与 picker 对齐 */
cursor: pointer; cursor: pointer;
} }
.search .btn-search::after { .search .btn-search::after {
display: none; display: none;
} }
.search .picker-bg { .search .picker-bg {
display: flex; display: flex;
background-color: #6FA2F8; background-color: #6FA2F8;
border-radius: 25px; border-radius: 25px;
color: #fff; color: #fff;
font-size: 28rpx; font-size: 28rpx;
padding: 0rpx 20rpx; padding: 0rpx 20rpx;
/* #ifndef APP-PLUS */ /* #ifndef APP-PLUS */
padding: 10rpx 20rpx 0 20rpx; padding: 10rpx 20rpx 0 20rpx;
/* #endif */ /* #endif */
margin-right: 20rpx; margin-right: 20rpx;
} }
.search .picker-bg .picker { .search .picker-bg .picker {
display: flex; display: flex;
align-items: center; align-items: center;
/* #ifndef APP-PLUS */ /* #ifndef APP-PLUS */
padding-top: 2rpx; padding-top: 2rpx;
/* #endif */ /* #endif */
} }
.search .picker-bg .picker .uni-icons { .search .picker-bg .picker .uni-icons {
color: #fff !important; color: #fff !important;
} }
.search .picker-bg .picker .uni-icons:first-child { .search .picker-bg .picker .uni-icons:first-child {
margin-right: 10rpx; margin-right: 10rpx;
} }
.search .picker-bg .picker .uniui-down { .search .picker-bg .picker .uniui-down {
margin-left: 10rpx; margin-left: 10rpx;
} }
</style> </style>

View File

@@ -0,0 +1,9 @@
/**
* 签到/打卡/出差
* @type {{"1": {label: 签到, bgc: string}, "2": {label: 打卡, bgc: string}, "3": {label: 出差, bgc: string}}}
*/
export const MapType = {
'1': {label:'签到', color:'#F5813A'},
'2': {label:'打卡', color:'#1989FA'},
'3': {label:'出差', color:'#42b883'}
}