oa/src/pages/attendanceSetting/attendanceRecord/index.vue

<template>
  <div class="workSpace">
    <searchForm ref='searchForm' :keys="['userName']" @on-search='onSearch'> </searchForm>
    <VaCard tag="b" class="table">
      <div class="va-table-responsive">
        <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
          @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>
</template>

<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 {
        pageInfo:{
          ...dict.pageInfo
        },
        users:[],
        columns:[
          { key: 'name', label: '员工姓名' },
          { key: 'clockAddr', label: '打卡地址' },
          { key: 'clockTime', label: '打卡时间' },
          { key: 'clockTypeName', label: '打卡类型' },
          { key: 'clockStatusName', label: '打卡状态' },
        ],
        loading:false
      }
    },
  }
</script>

<style scoped lang="less">
  .workSpace {
    width: 100%;
    flex: 1;
  }
  .table {
    margin-top: 20px;
    width: 100%;
  }
  .va-table-responsive {
    width: 100%;
  }
  .va-table {
    width: 100%;
  }
  .pagination {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 10px;
  }
</style>