1.递交

小小儁爺

2024-09-09 19a02db65a717d22138a623a425040dfba292eb8

 src/views/attendanceModule/attendanceClockIn.vue

@@ -1,172 +1,177 @@
<template>

  <div>

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



export default {

  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]

        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)

      }

    },

    // 获取页面高度

    getHeight() {

      this.$nextTick(() => {

        this.mainHeight = window.innerHeight - 85

        this.tableHeight = this.mainHeight - 250

        this.$refs.tableDataRef.doLayout()

      })

    }

  }

}

</script>



<template>
  <div>
    <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'

export default {
  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]
        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('打卡成功！')
      }
    },
    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 250
        this.$refs.tableDataRef.doLayout()
      })
    }
  }
}
</script>