考勤统计页面

src/views/attendance/components/tab-clock-time.vue

@@ -0,0 +1,44 @@
+<!--  -->
+<template>
+    <HcCard>
+       <HcTable :column="tableColumn" :datas="tableData"/>
+       <template #action>
+           <HcPages :pages="searchForm" @change="pageChange"></HcPages>
+       </template>
+    </HcCard>
+   </template>
+   
+   <script setup>
+   import {ref, watch} from  'vue'
+   
+   
+   const tableColumn = [
+       {key: 'name', name: '姓名'},
+       {key: 'text', name: '部门'},
+       {key: 'color', name: '职位'},
+       {key: 'color', name: '周一'},
+       {key: 'color', name: '周二'},
+       {key: 'color', name: '周二'},
+       {key: 'color', name: '周三'},
+       {key: 'color', name: '周四'},
+       {key: 'color', name: '周五'},
+       {key: 'color', name: '周六'},
+       {key: 'color', name: '周天'},
+   ]
+   const tableData = ref([
+       {name: '名称1', text: '文本1', color: ''},
+       {name: '名称2', text: '文本2', color: ''},
+       {name: '名称3', text: '文本3', color: ''}
+   ])
+   //搜索表单
+   const searchForm = ref({current: 1, size: 20, total: 60})
+   
+   //分页被点击
+   const pageChange = ({current, size}) => {
+       searchForm.value.current = current
+       searchForm.value.size = size
+   }
+   
+   </script>
+   <style lang='scss' scoped>
+   </style>

src/views/attendance/components/tab-month-static.vue

@@ -0,0 +1,52 @@
+<!--  -->
+<template>
+ <HcCard>
+    <HcTable :column="tableColumn" :datas="tableData"/>
+    <template #action>
+        <HcPages :pages="searchForm" @change="pageChange"></HcPages>
+    </template>
+ </HcCard>
+</template>
+
+<script setup>
+import {ref, watch} from  'vue'
+
+
+const tableColumn = [
+    {key: 'name', name: '姓名'},
+    {key: 'text', name: '部门'},
+    {key: 'color', name: '出勤天数'},
+    {key: 'color', name: '休息天数'},
+    {key: 'color', name: '工作时长'},
+    {key: 'color', name: '迟到次数'},
+    {key: 'color', name: '迟到时长'},
+    {key: 'color', name: '严重迟到次数'},
+    {key: 'color', name: '严重迟到时长'},
+    {key: 'color', name: '旷工迟到天数'},
+    {key: 'color', name: '早退次数'},
+    {key: 'color', name: '早退时长'},
+    {key: 'color', name: '上班缺卡次数'},
+    {key: 'color', name: '下班缺卡次数'},
+    {key: 'color', name: '旷工天数'},
+    {key: 'color', name: '丧假（天）'},
+    {key: 'color', name: '事假（小时）'},
+    {key: 'color', name: '年假（天）'},
+    {key: 'color', name: '加班总时长'},
+]
+const tableData = ref([
+    {name: '名称1', text: '文本1', color: ''},
+    {name: '名称2', text: '文本2', color: ''},
+    {name: '名称3', text: '文本3', color: ''}
+])
+//搜索表单
+const searchForm = ref({current: 1, size: 20, total: 60})
+
+//分页被点击
+const pageChange = ({current, size}) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+}
+
+</script>
+<style lang='scss' scoped>
+</style>

src/views/attendance/components/tab-original-record.vue

@@ -0,0 +1,45 @@
+<!--  -->
+<template>
+    <HcCard>
+       <HcTable :column="tableColumn" :datas="tableData"/>
+       <template #action>
+           <HcPages :pages="searchForm" @change="pageChange"></HcPages>
+       </template>
+    </HcCard>
+   </template>
+   
+   <script setup>
+   import {ref, watch} from  'vue'
+   
+   
+   const tableColumn = [
+       {key: 'name', name: '姓名'},
+       {key: 'text', name: '部门'},
+       {key: 'color', name: '职位'},
+       {key: 'color', name: '考勤日期'},
+       {key: 'color', name: '考勤时间'},
+       {key: 'color', name: '打卡时间'},
+       {key: 'color', name: '打卡结果'},
+       {key: 'color', name: '打卡地址'},
+       {key: 'color', name: '打卡备注'},
+       {key: 'color', name: '异常打卡原因'},
+       {key: 'color', name: '打卡图片'},
+       {key: 'color', name: '打卡设备'},
+   ]
+   const tableData = ref([
+       {name: '名称1', text: '文本1', color: ''},
+       {name: '名称2', text: '文本2', color: ''},
+       {name: '名称3', text: '文本3', color: ''}
+   ])
+   //搜索表单
+   const searchForm = ref({current: 1, size: 20, total: 60})
+   
+   //分页被点击
+   const pageChange = ({current, size}) => {
+       searchForm.value.current = current
+       searchForm.value.size = size
+   }
+   
+   </script>
+   <style lang='scss' scoped>
+   </style>

src/views/attendance/statistic.vue

@@ -1,10 +1,50 @@
-<!--  -->
 <template>
-  <div ></div>
+  <HcTabsSimple :cur="tabsKey" :datas="tabsData" @tabClick="tabsClick">
+      <template #tab-month-static>
+          <MonthStatic :cur="tabsKey" :type="1"/>
+      </template>
+      <template #tab-original-record>
+          <originalRecord :cur="tabsKey" :type="2"/>
+      </template>
+      <template #tab-clock-time>
+          <clockTime :cur="tabsKey" :type="3"/>
+      </template>
+
+  </HcTabsSimple>
 </template>
 
 <script setup>
-import {ref, watch} from  'vue'
+import {ref, watch, onMounted} from "vue";
+import MonthStatic from "./components/tab-month-static.vue";
+import originalRecord from "./components/tab-original-record.vue";
+import clockTime from "./components/tab-clock-time.vue";
+
+
+
+//类型处理
+const tabsKey = ref('month-static')
+const tabsData = ref([
+  {icon: 'bar-chart-box', label: '月度统计', key: 'month-static'},
+  {icon: 'tools', label: '原始记录', key: 'original-record'},
+  {icon: 'time', label: '打卡时间', key: 'clock-time'},
+
+ 
+])
+//渲染完成
+onMounted(() => {
+
+})
+const tabsClick = (key) => {
+  tabsKey.value = key
+}
+
+
 </script>
-<style lang='scss' scoped>
-</style>
+
+<style lang="scss" scoped>
+
+</style>
+
+<style lang="scss">
+
+</style>