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