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

src/components/CommonItemItem/CommonItem.vue

@@ -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>

src/pages/attendance-statistics/attendance-statistics.vue

@@ -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>

src/pages/attendance/AttendanceClockIn.vue

@@ -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" />

src/pages/attendance/AttendanceSet.vue

@@ -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>
+<style lang="scss" scoped></style>
-  page {
-    background-color: #f6f8fc;
-  }
-</style>

src/pages/attendance/AttendanceStatistics.vue

@@ -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>

src/pages/attendance/attendance-add-group/attendance-add-group.vue

@@ -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>

src/pages/attendance/attendance.vue

@@ -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 AttendanceClockIn from './AttendanceClockIn.vue'
-  import AttendanceSet from '../attendance-set/attendance-set.vue'
+  import AttendanceStatistics from './AttendanceStatistics.vue'
-  import AttendanceStatistics from '../attendance-statistics/attendance-statistics.vue'
+  import AttendanceSet from './AttendanceSet.vue'
   const pages = [AttendanceClockIn, AttendanceStatistics, AttendanceSet]
+  const titleTab = ['考勤打卡', '考勤统计', '设置']
   const list = ref<Array<TabBarItem>>([
     {
       title: '打卡',

src/pages/home/home.vue

@@ -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">