|
|
@@ -1,31 +1,38 @@
|
|
|
<template>
|
|
|
<div class="workSpace">
|
|
|
- <searchForm :keys="['userName']"> </searchForm>
|
|
|
+ <searchForm ref='searchForm' :keys="['userName']" @on-search='onSearch'> </searchForm>
|
|
|
<VaCard tag="b" class="table">
|
|
|
<div class="va-table-responsive">
|
|
|
- <table class="va-table">
|
|
|
- <thead>
|
|
|
- <tr>
|
|
|
- <th>人员姓名</th>
|
|
|
- <th>打卡时间</th>
|
|
|
- <th>打卡地点</th>
|
|
|
- <th>考勤状态</th>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody>
|
|
|
- <tr v-for="user in users" :key="user.id">
|
|
|
- <td>{{ user.fullName }}</td>
|
|
|
- <td>{{ user.email }}</td>
|
|
|
- <td>{{ user.country }}</td>
|
|
|
- <td>
|
|
|
- <VaBadge :text="user.text" :color="user.status" />
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
+ <VaDataTable :items="users" :columns="columns" :loading="loading">
|
|
|
+ <template #cell(clockTime)="{ value }">
|
|
|
+ {{getTime(value)}}
|
|
|
+ </template>
|
|
|
+ <template #cell(clockStatusName)="{ rowData }">
|
|
|
+ <VaBadge
|
|
|
+ v-if='rowData.clockStatus ==1'
|
|
|
+ :text="rowData.clockStatusName"
|
|
|
+ color="success"
|
|
|
+ class="mr-2"
|
|
|
+ />
|
|
|
+
|
|
|
+ <VaBadge
|
|
|
+ v-else
|
|
|
+ :text="rowData.clockStatusName"
|
|
|
+ color="danger"
|
|
|
+ class="mr-2"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </VaDataTable>
|
|
|
</div>
|
|
|
<div class="pagination">
|
|
|
- <VaPagination v-model="page" :pages="15" :visible-pages="4" class="justify-center sm:justify-start" />
|
|
|
+ <VaPagination
|
|
|
+ @click="update"
|
|
|
+ v-model="pageInfo.pageNum"
|
|
|
+ :total="pageInfo.total"
|
|
|
+ :page-size="pageInfo.pageSize"
|
|
|
+ :visible-pages="4"
|
|
|
+ class="justify-center sm:justify-start"
|
|
|
+ />
|
|
|
</div>
|
|
|
</VaCard>
|
|
|
</div>
|
|
|
@@ -33,48 +40,56 @@
|
|
|
|
|
|
<script>
|
|
|
import searchForm from '../module/searchForm.vue'
|
|
|
+ import dict from '../../../common/dict'
|
|
|
+ import moment from 'moment'
|
|
|
export default {
|
|
|
name: 'index',
|
|
|
components: {
|
|
|
searchForm,
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ onSearch(){
|
|
|
+ this.pageInfo.pageNum = 1
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ update(){
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ getTime(time){
|
|
|
+ return moment(new Date(parseInt(time))).format('yyyy-MM-DD HH:mm:ss')
|
|
|
+ },
|
|
|
+ getList(){
|
|
|
+ let params = {
|
|
|
+ pageNum: Math.ceil(this.pageInfo.pageNum / this.pageInfo.pageSize),
|
|
|
+ pageSize: this.pageInfo.pageSize,
|
|
|
+ userName: this.$refs.searchForm.form.userName,
|
|
|
+ }
|
|
|
+ if( this.$refs.searchForm.form.clockTime!=null){
|
|
|
+ params.clockTime = this.$refs.searchForm.form.clockTime.getTime()
|
|
|
+ }
|
|
|
+ this.$api.getWorkClockList(params).then(res=>{
|
|
|
+ this.users = res.result.records
|
|
|
+ this.pageInfo.total = res.result.total
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
- page: 3,
|
|
|
- users: [
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- fullName: 'Ashley Mcdaniel',
|
|
|
- email: '2024-01-06 10:00:00',
|
|
|
- country: 'Cayman Islands',
|
|
|
- status: 'warning',
|
|
|
- text: '迟到',
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- fullName: 'Todd Sellers',
|
|
|
- email: '2024-01-06 08:00:00',
|
|
|
- country: 'Togo',
|
|
|
- status: 'info',
|
|
|
- text: '正常',
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- fullName: 'Sherman Knowles',
|
|
|
- email: '2024-01-06 17:00:00',
|
|
|
- country: 'Central African Republic',
|
|
|
- status: 'warning',
|
|
|
- text: '早退',
|
|
|
- },
|
|
|
- {
|
|
|
- id: 4,
|
|
|
- fullName: 'Vasquez Lawson',
|
|
|
- email: '2024-01-06 08:00:00',
|
|
|
- country: 'Bouvet Island',
|
|
|
- status: 'info',
|
|
|
- text: '正常',
|
|
|
- },
|
|
|
+ pageInfo:{
|
|
|
+ ...dict.pageInfo
|
|
|
+ },
|
|
|
+ users:[],
|
|
|
+ columns:[
|
|
|
+ { key: 'name', label: '员工姓名' },
|
|
|
+ { key: 'clockAddr', label: '打卡地址' },
|
|
|
+ { key: 'clockTime', label: '打卡时间' },
|
|
|
+ { key: 'clockTypeName', label: '打卡类型' },
|
|
|
+ { key: 'clockStatusName', label: '打卡状态' },
|
|
|
],
|
|
|
+ loading:false
|
|
|
}
|
|
|
},
|
|
|
}
|