上班与休息页面完善
This commit is contained in:
BianLzhaoMin
parent
c1eace3eaf
commit
598000adc7
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<view class="date-picker-wrapper" @tap="handleOpen">
|
||||
<view class="date-picker-wrapper" :class="{ disabled: disabled }" @tap="handleOpen">
|
||||
<up-icon v-if="showIcon" name="calendar" :size="iconSize" :color="iconColor" />
|
||||
<text class="date-text" :class="{ placeholder: !displayValue }">
|
||||
{{ displayValue || placeholder }}
|
||||
</text>
|
||||
<up-icon v-if="showArrow" name="arrow-down" size="16" color="#999" />
|
||||
<up-icon v-if="showArrow && !disabled" name="arrow-down" size="16" color="#999" />
|
||||
</view>
|
||||
|
||||
<up-datetime-picker
|
||||
|
|
@ -78,6 +78,11 @@ const props = defineProps({
|
|||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'change'])
|
||||
|
|
@ -162,6 +167,9 @@ const pickerValue = computed({
|
|||
* 打开选择器
|
||||
*/
|
||||
const handleOpen = () => {
|
||||
if (props.disabled) {
|
||||
return
|
||||
}
|
||||
showPicker.value = true
|
||||
}
|
||||
|
||||
|
|
@ -204,4 +212,10 @@ const handleConfirm = (e) => {
|
|||
.date-text.placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.date-picker-wrapper.disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
@change="handleStatusChange"
|
||||
/>
|
||||
<up-input
|
||||
v-model="searchKeyword"
|
||||
v-model="queryParamsKeyword"
|
||||
placeholder="请输入关键字"
|
||||
:clearable="true"
|
||||
@input="handleSearchInput"
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
v-model="selectedDate"
|
||||
format="YYYY-MM-DD"
|
||||
placeholder="选择日期"
|
||||
@change="handleDateChange"
|
||||
:disabled="true"
|
||||
/>
|
||||
<up-button
|
||||
text="搜索"
|
||||
|
|
@ -60,16 +60,16 @@
|
|||
<view class="personnel-header">
|
||||
<text class="personnel-name">{{ item.name }}</text>
|
||||
<text class="personnel-status" :class="getStatusClass(item.status)">
|
||||
{{ item.status }}
|
||||
{{ getStatusText(item.status) }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="personnel-info">
|
||||
<text class="info-label">身份证号:</text>
|
||||
<text class="info-value">{{ item.idNumber }}</text>
|
||||
</view>
|
||||
<view v-if="item.punchTime" class="personnel-info">
|
||||
<view class="personnel-info">
|
||||
<text class="info-label">打卡时间:</text>
|
||||
<text class="info-value">{{ item.punchTime }}</text>
|
||||
<text class="info-value">{{ item.addTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -80,6 +80,7 @@
|
|||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import dayjs from 'dayjs'
|
||||
import NavBarModal from '@/components/NavBarModal/index.vue'
|
||||
import CommonPicker from '@/components/CommonPicker/index.vue'
|
||||
|
|
@ -87,6 +88,10 @@ import DatePicker from '@/components/DatePicker/index.vue'
|
|||
import ReviewEmptyState from '@/components/ReviewEmptyState/index.vue'
|
||||
import { getContentStyle } from '@/utils/safeArea'
|
||||
import { getWorkRestListAPI } from '@/services/realName/attendance/workRest'
|
||||
import { useMemberStore, useCommonStore } from '@/stores'
|
||||
|
||||
const memberStore = useMemberStore()
|
||||
const commonStore = useCommonStore()
|
||||
|
||||
const contentStyle = computed(() => {
|
||||
return getContentStyle({
|
||||
|
|
@ -97,45 +102,71 @@ const contentStyle = computed(() => {
|
|||
})
|
||||
|
||||
// 状态选项
|
||||
const statusOptions = ['全部', '计日打卡', '计件打卡', '停窝工打卡', '休息打卡', '未打卡']
|
||||
const statusOptions = [
|
||||
{
|
||||
label: '全部',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
label: '计日打卡',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
label: '计件打卡',
|
||||
value: '2',
|
||||
},
|
||||
{
|
||||
label: '停窝工打卡',
|
||||
value: '3',
|
||||
},
|
||||
{
|
||||
label: '休息打卡',
|
||||
value: '4',
|
||||
},
|
||||
{
|
||||
label: '未打卡',
|
||||
value: '5',
|
||||
},
|
||||
]
|
||||
|
||||
const searchKeyword = ref('')
|
||||
const filterStatus = ref('全部')
|
||||
const selectedDate = ref(Date.now()) // 默认今天
|
||||
// 状态到type的映射
|
||||
const statusTypeMap = {
|
||||
全部: '',
|
||||
计日打卡: '1',
|
||||
计件打卡: '2',
|
||||
停窝工打卡: '3',
|
||||
休息打卡: '4',
|
||||
未打卡: '5',
|
||||
}
|
||||
|
||||
const filterStatus = ref('')
|
||||
// 默认今天，且固定为当天（不可修改）
|
||||
// 获取当天的开始时间（00:00:00）
|
||||
const getTodayStartTime = () => {
|
||||
const today = new Date()
|
||||
today.setHours(0, 0, 0, 0)
|
||||
return today.getTime()
|
||||
}
|
||||
const selectedDate = ref(getTodayStartTime())
|
||||
const loading = ref(false)
|
||||
|
||||
// 查询参数
|
||||
const queryParams = computed(() => {
|
||||
return {
|
||||
teamId: memberStore.realNameUserInfo.teamId,
|
||||
proId: commonStore.activeProjectId || memberStore.realNameUserInfo.proId,
|
||||
currentDay: dayjs(selectedDate.value).format('YYYY-MM-DD'),
|
||||
type: filterStatus.value,
|
||||
subId: memberStore.realNameUserInfo.subId,
|
||||
keyWord: queryParamsKeyword.value,
|
||||
}
|
||||
})
|
||||
|
||||
// 关键字（单独定义，避免computed循环引用）
|
||||
const queryParamsKeyword = ref('')
|
||||
|
||||
// 人员列表数据
|
||||
const personnelList = ref([
|
||||
{
|
||||
name: '丁兴旺',
|
||||
status: '已打卡',
|
||||
idNumber: '36042419920927085X',
|
||||
punchTime: '2025-12-01 06:57:36',
|
||||
},
|
||||
{
|
||||
name: '袁亥良',
|
||||
status: '未打卡',
|
||||
idNumber: '421281199309103315',
|
||||
punchTime: '',
|
||||
},
|
||||
{
|
||||
name: '游木生',
|
||||
status: '已打卡',
|
||||
idNumber: '422323196810263338',
|
||||
punchTime: '2025-12-01 07:13:14',
|
||||
},
|
||||
{
|
||||
name: '熊拥华',
|
||||
status: '已打卡',
|
||||
idNumber: '42232319771116331X',
|
||||
punchTime: '2025-12-01 07:00:45',
|
||||
},
|
||||
{
|
||||
name: '吴庸奎',
|
||||
status: '已打卡',
|
||||
idNumber: '42232319801212331X',
|
||||
punchTime: '2025-12-01 07:05:23',
|
||||
},
|
||||
])
|
||||
const personnelList = ref([])
|
||||
|
||||
// 按钮样式
|
||||
const buttonStyle = computed(() => {
|
||||
|
|
@ -154,17 +185,16 @@ const buttonStyle = computed(() => {
|
|||
* @param {String} value - 输入值
|
||||
*/
|
||||
const handleSearchInput = (value) => {
|
||||
searchKeyword.value = value
|
||||
handleSearch()
|
||||
// 可以在这里实现实时搜索，或者等用户点击搜索按钮
|
||||
// 这里选择点击搜索按钮才搜索
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理状态变化
|
||||
* @param {String} status - 状态值
|
||||
*/
|
||||
const handleStatusChange = (status) => {
|
||||
filterStatus.value = status
|
||||
// TODO: 根据状态筛选数据
|
||||
const handleStatusChange = (e) => {
|
||||
filterStatus.value = e.value
|
||||
loadList()
|
||||
}
|
||||
|
||||
|
|
@ -174,7 +204,6 @@ const handleStatusChange = (status) => {
|
|||
*/
|
||||
const handleDateChange = (timestamp) => {
|
||||
selectedDate.value = timestamp
|
||||
// TODO: 根据日期重新加载数据
|
||||
loadList()
|
||||
}
|
||||
|
||||
|
|
@ -182,12 +211,6 @@ const handleDateChange = (timestamp) => {
|
|||
* 处理搜索
|
||||
*/
|
||||
const handleSearch = () => {
|
||||
// TODO: 调用搜索接口
|
||||
console.log('搜索参数:', {
|
||||
keyword: searchKeyword.value,
|
||||
status: filterStatus.value,
|
||||
date: dayjs(selectedDate.value).format('YYYY-MM-DD'),
|
||||
})
|
||||
loadList()
|
||||
}
|
||||
|
||||
|
|
@ -197,21 +220,19 @@ const handleSearch = () => {
|
|||
* @returns {String} 样式类名
|
||||
*/
|
||||
const getStatusClass = (status) => {
|
||||
const statusMap = {
|
||||
已打卡: 'status-punched',
|
||||
未打卡: 'status-not-punched',
|
||||
}
|
||||
return statusMap[status] || ''
|
||||
// 根据实际返回的状态值进行映射
|
||||
if (status === '1') return 'status-punched'
|
||||
if (status === '2') return 'status-punched'
|
||||
if (status === '3') return 'status-punched'
|
||||
if (status === '4') return 'status-punched'
|
||||
if (status === '5') return 'status-not-punched'
|
||||
return ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载列表数据
|
||||
*/
|
||||
const loadList = () => {
|
||||
// TODO: 调用接口加载数据
|
||||
// 根据筛选条件过滤数据
|
||||
// const filteredList = filterPersonnelList()
|
||||
// personnelList.value = filteredList
|
||||
getWorkRestList()
|
||||
}
|
||||
|
||||
|
|
@ -222,13 +243,102 @@ const handleBack = () => {
|
|||
uni.navigateBack()
|
||||
}
|
||||
|
||||
// 获取上班与休息列表
|
||||
/**
|
||||
* 获取上班与休息列表
|
||||
*/
|
||||
const getWorkRestList = async () => {
|
||||
const res = await getWorkRestListAPI({})
|
||||
console.log('上班与休息列表', res)
|
||||
try {
|
||||
loading.value = true
|
||||
|
||||
// 检查必要参数
|
||||
if (!queryParams.value.teamId || !queryParams.value.proId || !queryParams.value.subId) {
|
||||
uni.showToast({
|
||||
title: '缺少必要参数',
|
||||
icon: 'none',
|
||||
})
|
||||
personnelList.value = []
|
||||
return
|
||||
}
|
||||
|
||||
const res = await getWorkRestListAPI(queryParams.value)
|
||||
|
||||
if (res.res === 1 && res.obj) {
|
||||
// 根据实际返回数据结构处理
|
||||
if (Array.isArray(res.obj)) {
|
||||
personnelList.value = formatPersonnelList(res.obj)
|
||||
} else if (res.obj.list && Array.isArray(res.obj.list)) {
|
||||
personnelList.value = formatPersonnelList(res.obj.list)
|
||||
} else if (res.obj.result && Array.isArray(res.obj.result)) {
|
||||
personnelList.value = formatPersonnelList(res.obj.result)
|
||||
} else {
|
||||
personnelList.value = []
|
||||
}
|
||||
} else {
|
||||
personnelList.value = []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载上班与休息列表失败:', error)
|
||||
uni.showToast({
|
||||
title: '加载失败，请重试',
|
||||
icon: 'none',
|
||||
})
|
||||
personnelList.value = []
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
getWorkRestList()
|
||||
/**
|
||||
* 格式化人员列表数据
|
||||
* @param {Array} list - 原始数据列表
|
||||
* @returns {Array} 格式化后的列表
|
||||
*/
|
||||
const formatPersonnelList = (list) => {
|
||||
return list.map((item) => {
|
||||
// 根据实际返回的字段进行映射
|
||||
// 这里需要根据实际API返回的数据结构调整
|
||||
return {
|
||||
name: item.name || item.personName || item.person_name || '-',
|
||||
status: getStatusText(item.type, item.status),
|
||||
idNumber: item.idNumber || item.id_number || item.idCard || item.id_card || '-',
|
||||
punchTime:
|
||||
item.punchTime ||
|
||||
item.punch_time ||
|
||||
item.attendanceTime ||
|
||||
item.attendance_time ||
|
||||
'',
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据type获取状态文本
|
||||
* @param {String|Number} type - 类型值
|
||||
* @param {String} status - 状态值
|
||||
* @returns {String} 状态文本
|
||||
*/
|
||||
const getStatusText = (type, status) => {
|
||||
// 如果已经有状态文本，直接返回
|
||||
if (status) {
|
||||
return status
|
||||
}
|
||||
|
||||
// 根据type映射状态文本
|
||||
const typeMap = {
|
||||
1: '计日打卡',
|
||||
2: '计件打卡',
|
||||
3: '停窝工打卡',
|
||||
4: '休息打卡',
|
||||
5: '未打卡',
|
||||
}
|
||||
|
||||
return typeMap[String(type)] || '未打卡'
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
// 加载列表数据
|
||||
loadList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
Loading…
Reference in New Issue