1.考勤打卡递交

小小儁爺

2024-11-15 c0e9df213221d16f6ab6c9106ae01ad571cd45fc

 src/views/attendanceModule/attendanceClockIn.vue

@@ -1,15 +1,184 @@
<template>
  <div>
    123
    <div class="body" :style="{height:mainHeight+'px'}">

      <div class="bodyTopFormGroup" style="margin-top: 10px;height: 50px;padding:5px 0;">
        <div class="elForm" style="align-items: center;padding:5px 0;">
          <div style="font-weight: bolder;font-size: 14px;margin: 0 15px;color: #606266">
            工号二维码
          </div>
          <el-input
            v-model="form.usercode"
            :name="'usercodeInput'"
            placeholder="请扫描或输入工号二维码"
            style="width: 300px"
            @change="enterNative"
          />
        </div>
      </div>

      <div class="bodyTopButtonGroup" style="margin-top: 2px;height: 100px;align-items: center;">
        <el-form
          ref="form"
          :model="form"
          label-width="80px"
          inline
          style="display: flex;width: 50%;"
        >
          <div class="elForm">
            <el-form-item label="员工编号:" style=" display: flex;">
              <div style="width: 200px;">{{ form2.usercode }}</div>
            </el-form-item>
            <el-form-item label="员工姓名:" style=" display: flex;">
              <div style="width: 200px;">{{ form2.username }}</div>
            </el-form-item>
            <el-form-item label="所属车间:" style=" display: flex;">
              <div style="width: 200px;">{{ form2.torg_name }}</div>
            </el-form-item>
            <el-form-item label="所属岗位:" style=" display: flex;">
              <div style="width: 200px;">{{ form2.postname }}</div>
            </el-form-item>
          </div>
        </el-form>
      </div>

      <div class="elTableDiv">
        <el-table
          ref="tableDataRef"
          class="tableFixed"
          :data="tableData"
          :height="tableHeight+'px'"
          border
          row-class-name="custom-row"
          :style="{width: 100+'%',height:tableHeight+'px',}"
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
        >
          <el-table-column
            type="index"
            width="50"
            fixed
            label="序号"
          />
          <el-table-column
            prop="wkshop_name"
            label="所属车间"
          />
          <el-table-column
            prop="username"
            label="打卡人员"
          />
          <el-table-column
            prop="createdate"
            label="打卡时间"
          />
          <el-table-column
            prop="workprice"
            label="工价(元/小时)"
          />
        </el-table>
      </div>
      <!--      <div-->
      <!--        class="bodyTopButtonGroup"-->
      <!--        style="margin-top: 0;height: 60px;display:flex;align-items: center;justify-content: center"-->
      <!--      >-->
      <!--        <el-button-->
      <!--          v-waves-->
      <!--          :disabled="isDisabled"-->
      <!--          type="primary"-->
      <!--          style="width: 150px;height: 40px;"-->
      <!--          icon="el-icon-alarm-clock"-->
      <!--          @click="clockIn"-->
      <!--        >考勤打卡</el-button>-->
      <!--      </div>-->

    </div>

  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves'
import { AttendanceSave, AttendanceSearch } from '@/api/attendanceModule'
import $ from 'jquery'
import { handleDatetime2 } from '@/utils/global'

export default {
  name: 'AttendanceClockIn'
  name: 'AttendanceClockIn',
  directives: { elDragDialog, waves },
  data() {
    return {
      mainHeight: 0,
      tableHeight: 0,
      form: {
        usercode: ''
      },
      form2: {

      },
      tableData: [],
      isDisabled: true
    }
  },
  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  created() {
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.inputFocus()
  },
  methods: {
    inputFocus() {
      // this.$nextTick(() => {
      $('input[name=\'usercodeInput\']')[0].focus()
      // })
    },
    async enterNative(val) {
      const { data: res } = await AttendanceSearch({ usercode: val })
      this.form.usercode = ''
      if (res.userdate.length === 0 && res.checkcrd.length === 0) {
        this.$message.info('无此员工号！')
        this.form2 = {}
        this.tableData = []
        this.isDisabled = true
      } else {
        this.form2 = res.userdate[0]
        await this.clockIn()

        // this.tableData = res.checkcrd
        // this.isDisabled = false
      }
    },
    async clockIn() {
      const data = {
        'wkshop_code': this.form2.storg_code,
        'user_code': this.form2.usercode
      }
      const res = await AttendanceSave(data)
      if (res.code === '200') {
        // await this.enterNative(this.form2.usercode)
        this.$message.success('打卡成功！')

        const { data: res2 } = await AttendanceSearch({ usercode: this.form2.usercode })
        this.tableData = res2.checkcrd.sort((a, b) => new Date(b.createdate).getTime() - new Date(a.createdate).getTime())
        this.isDisabled = false
      }
    },
    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 180
        this.$refs.tableDataRef.doLayout()
      })
    }
  }
}
</script>

<style scoped>

</style>