<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()
|
this.inputFocus()
|
},
|
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>
|
