sky/starwork-uniapp
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 1.考勤一级页面 2.考勤设置--添加考勤组页面

Browse Source
This commit is contained in:
魏少阳 2025-01-03 10:01:30 +08:00
parent 4d1c9a7335
commit 922d1a5384
8 changed files with 252 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/CommonItemItem/CommonItem.vue Normal file
View File

@ -0,0 +1,56 @@
<template>
<view class="mx-2">
<view class="flex flex-row items-center py-4">
<view class="color-red mr-0.5" v-if="isMust">*</view>
<view>{{ text }}</view>
<view v-if="$slots.child" class="flex-1 mx-2"><slot name="child" class="flex-1"></slot></view>
<view v-if="!$slots.child" class="flex-1 flex flex-row flex-justify-end items-center">
<view v-if="!value" class="color-gray">{{ hint }}</view>
<view v-else class="color-[#656567]">{{ value }}</view>
<wd-icon
v-if="isNext"
name="arrow-right ml-1.5 mr-0.5"
class="text-gray"
size="22"
></wd-icon>
</view>
</view>
<view v-if="!noLine" class="hpx bg-gray-300 mx-2.5"></view>
</view>
</template>
<script lang="ts" setup>
const props = defineProps({
text: {
type: String,
default: ''
},
isMust: {
type: Boolean,
default: false
},
value: {
type: String,
default: ''
},
isNext: {
type: Boolean,
default: true
},
noLine: {
type: Boolean,
default: false
},
hint: {
type: String,
default: '请选择'
}
})
//
</script>
<style lang="scss" scoped>
page {
background-color: #f6f8fc;
}
</style>

27
src/pages/attendance-statistics/attendance-statistics.vue
View File

@ -1,27 +0,0 @@
<route lang="json5" type="page">
{
layout: 'default',
style: {
navigationStyle: 'custom'
}
}
</route>
<template>
<TopNavigation title="考勤统计"></TopNavigation>
<wd-tabs v-model="tab">
<block v-for="item in tabs" :key="item">
<wd-tab :title="item"></wd-tab>
</block>
</wd-tabs>
</template>
<script lang="ts" setup>
//
const tabs = ['团队统计', '我的统计']
const tab = ref<number>(0)
</script>
<style lang="scss" scoped>
//
</style>

1
src/pages/attendance-clockIn/attendance-clockIn.vue → src/pages/attendance/AttendanceClockIn.vue
View File

@ -8,7 +8,6 @@
</route>
<template>
<TopNavigation title="考勤打卡"></TopNavigation>
<view class="bg-white rounded-1 pt-20 pb-15 box-border mx-4 mt-2">
<view class="text-center">
<image src="/static/images/icon_wechat.png" class="w-30 h30" />

19
src/pages/attendance-set/attendance-set.vue → src/pages/attendance/AttendanceSet.vue
View File

@ -8,9 +8,11 @@
</route>
<template>
<TopNavigation title="设置"></TopNavigation>
<view class="mx-4 mt-2">
<view class="my-2 p-3.5 flex flex-justify-between rounded-1.2 items-center bg-white">
<view
class="my-2 p-3.5 flex flex-justify-between rounded-1.2 items-center bg-white"
@click="goAddGroup"
>
<view class="color-[#3372FA]">添加考勤组</view>
<wd-icon name="add-circle" class="color-[#3372FA]" size="20"></wd-icon>
</view>
@ -77,10 +79,13 @@
icon: '/static/tabbar/home.png'
}
])
function goAddGroup() {
// todo goAddGroup
console.log('goAddGroup')
uni.navigateTo({
url: '/pages/attendance/attendance-add-group/attendance-add-group'
})
}
</script>
<style lang="scss" scoped>
page {
background-color: #f6f8fc;
}
</style>
<style lang="scss" scoped></style>

113
src/pages/attendance/AttendanceStatistics.vue Normal file
View File

@ -0,0 +1,113 @@
<route lang="json5" type="page">
{
layout: 'default',
style: {
navigationStyle: 'custom'
}
}
</route>
<template>
<view class="flex flex-col flex-1">
<wd-tabs v-model="tabIndex" color="#3372FA" inactiveColor="gray">
<block v-for="item in tabs" :key="item">
<wd-tab :title="item"></wd-tab>
</block>
</wd-tabs>
<view v-if="tabIndex == 0" class="flex-1 flex flex-col px-3 pt-4">
<view class="flex flex-row items-center">
<wd-icon name="arrow-left" class="text-gray" size="20"></wd-icon>
<view class="w-30 text-center">
{{ new Date(teamDateTime).getFullYear() }}年{{ new Date(teamDateTime).getMonth() + 1 }}月
</view>
<wd-icon name="arrow-right" class="text-gray" size="20"></wd-icon>
<view class="color-[#3372FA] flex-1 text-end text-3">查看/导出月报</view>
</view>
<view class="rounded-1 bg-white mt-4 p-3.5 flex flex-col">
<wd-calendar-view
v-model="teamDateTime"
@change="handleChange"
:min-date="new Date(new Date().getFullYear(), new Date().getMonth(), 1).getTime()"
:max-date="new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getTime()"
/>
<view class="h-px bg-gray-300 my-4"></view>
<wd-circle
class="flex flex-row flex-justify-center mt-2"
v-model="current"
:size="100"
:strokeWidth="20"
></wd-circle>
<view class="text-5 font-500 text-center mt-3">0/13</view>
<view class="text-3 color-gray text-center">打卡人数/应到人数</view>
<view class="flex flex-row flex-justify-between mt-4 mx-5">
<view v-for="(item, index) in statusList" :key="index" class="flex flex-col items-center">
<view class="font-bold">{{ item.value }}</view>
<view class="text-3 color-gray">{{ item.name }}</view>
</view>
</view>
</view>
<view class="w-100% h-17 bg-blue mt-2 rounded-1" @click="goCheck"></view>
<view class="w-100% h-17 bg-gray mt-2 rounded-1" @click="goProblem"></view>
</view>
<view v-if="tabIndex == 1" class="flex-1 flex flex-col px-3 pt-4">
<view class="flex flex-row items-center">
<wd-icon name="arrow-left" class="text-gray" size="20"></wd-icon>
<view class="w-30 text-center">
{{ new Date(teamDateTime).getFullYear() }}年{{ new Date(teamDateTime).getMonth() + 1 }}月
</view>
<wd-icon name="arrow-right" class="text-gray" size="20"></wd-icon>
<view class="color-[#3372FA] flex-1 text-end text-3">查看月报</view>
</view>
<view class="rounded-1 bg-white mt-4 p-3.5 flex flex-col">
<wd-calendar-view
v-model="myDateTime"
@change="handleChange"
:min-date="new Date(new Date().getFullYear(), new Date().getMonth(), 1).getTime()"
:max-date="new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getTime()"
/>
<view class="h-px bg-gray-300 my-4"></view>
<view class="flex flex-row flex-justify-between items-center">
<view class="text-4 font-500 text-center">
{{ new Date(myDateTime).getFullYear() }}年{{ new Date(myDateTime).getMonth() + 1 }}月{{
new Date(myDateTime).getDate()
}}日
</view>
<view class="color-gray text-3">休息</view>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
//
const tabs = ['团队统计', '我的统计']
const statusList = ref([
{ name: '未打卡', value: 13 },
{ name: '迟到', value: 0 },
{ name: '请假', value: 0 }
])
const tabIndex = ref(0)
const teamDateTime = ref(Date.now())
const myDateTime = ref(Date.now())
const current = ref<number>(0)
function handleChange({ value }) {
console.log(value)
}
function goCheck() {
console.log('goCheck')
}
function goProblem() {
console.log('goProblem')
}
onMounted(() => {
console.log('mounted')
current.value = Math.random() * 100
})
</script>
<style lang="scss" scoped>
.wd-circle {
display: flex;
}
</style>

58
src/pages/attendance/attendance-add-group/attendance-add-group.vue Normal file
View File

@ -0,0 +1,58 @@
<route lang="json5" type="page">
{
layout: 'default',
style: {
navigationStyle: 'custom'
}
}
</route>
<template>
<TopNavigation title="添加考勤组"></TopNavigation>
<view class="h-[calc(100vh-60px)] p-3 box-border">
<view class="bg-white rounded-1.2 mt-2">
<CommonItem text="考勤组名称" isMust value="有多少">
<template v-slot:child>
<input
class="text-right"
v-model="name"
placeholder="必填"
placeholder-class="input-placeholder"
@input="nameInput()"
:maxlength="15"
/>
</template>
</CommonItem>
<CommonItem text="考勤类型" noLine value="固定班制"></CommonItem>
</view>
<view class="bg-white rounded-1.2 mt-2">
<CommonItem text="考勤人员" isMust value=""></CommonItem>
<CommonItem text="考勤时间" noLine value="周一至周五,09:00-17:00"></CommonItem>
</view>
<view class="bg-white rounded-1.2 mt-2">
<CommonItem text="打卡方式" value="打卡设备"></CommonItem>
<CommonItem text="打卡设备" isMust noLine value="" hint="未选择"></CommonItem>
</view>
<view class="bg-white rounded-1.2 mt-2">
<CommonItem text="加班统计规则" noLine value="" hint="未开启"></CommonItem>
</view>
<view class="fixed bottom-0 left-0 w-full p-3 box-border">
<wd-button block>保存</wd-button>
</view>
</view>
</template>
<script lang="ts" setup>
import CommonItem from '@/components/CommonItemItem/CommonItem.vue'
const name = ref('')
const nameInput = () => {
console.log(name.value)
}
//
</script>
<style lang="scss" scoped>
page {
background-color: #f6f8fc;
}
</style>

12
src/pages/attendance/attendance.vue
View File

@ -8,19 +8,21 @@
</route>
<template>
<view class="h-[calc(100vh-50px)] overflow-y-auto">
<TopNavigation :title="titleTab[curIndex]"></TopNavigation>
<scroll-view class="h-[calc(100vh-50px-60px)]" scroll-y>
<view v-for="(item, index) in pages" :key="index" v-show="curIndex == index">
<component :is="item"></component>
</view>
</view>
</scroll-view>
<CustomTabBar :list="list" :default-index="0" @change="change"></CustomTabBar>
</template>
<script lang="ts" setup>
import AttendanceClockIn from '../attendance-clockIn/attendance-clockIn.vue'
import AttendanceSet from '../attendance-set/attendance-set.vue'
import AttendanceStatistics from '../attendance-statistics/attendance-statistics.vue'
import AttendanceClockIn from './AttendanceClockIn.vue'
import AttendanceStatistics from './AttendanceStatistics.vue'
import AttendanceSet from './AttendanceSet.vue'
const pages = [AttendanceClockIn, AttendanceStatistics, AttendanceSet]
const titleTab = ['考勤打卡', '考勤统计', '设置']
const list = ref<Array<TabBarItem>>([
{
title: '打卡',

6
src/pages/home/home.vue
View File

@ -14,6 +14,7 @@
<view class="pt-10">
<CustomTabBar :list="list" :default-index="1" @change="change"></CustomTabBar>
</view>
<view @click="handleClick">考勤</view>
</view>
</template>
@ -244,6 +245,11 @@
const clickItem = item => {
console.log(item)
}
const handleClick = () => {
uni.navigateTo({
url: '/pages/attendance/attendance'
})
}
</script>
<style lang="scss">