<template>
|
<div class="full-screen-container">
|
<slot name="function"/>
|
|
<a-tabs default-active-key="1">
|
<a-tab-pane tab="打卡上下班" key="1" dataset="first">
|
<a-form-model ref="form" :model="model" :rules="validateRules" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-row>
|
<a-col :span="24">
|
<a-form-model-item label="设备名称" prop="equipmentIdList">
|
<a-select v-model="model.equipmentIdList" mode="multiple" placeholder="请选择设备" :maxTagCount="3"
|
allow-clear>
|
<a-select-option v-for="item in equipmentList" :key="item.equipmentId">
|
{{item.equipmentId+`[${item.equipmentName}]`}}
|
</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
|
<div style="text-align: center;margin-top: 150px">
|
<a-space>
|
<a-button size="large" type="primary" @click="handleClockInAndOut('In',1)" :loading="clockInLoading1"
|
:disabled="clockOutLoading1||clockInLoading2||clockOutLoading2">早班上班
|
</a-button>
|
<a-button size="large" type="primary" @click="handleClockInAndOut('Out',1)" :loading="clockOutLoading1"
|
:disabled="clockInLoading1||clockInLoading2||clockOutLoading2">
|
早班下班
|
</a-button>
|
<a-button size="large" type="primary" @click="handleClockInAndOut('In',2)" :loading="clockInLoading2"
|
:disabled="clockOutLoading1||clockInLoading1||clockOutLoading2">晚班上班
|
</a-button>
|
<a-button size="large" type="primary" @click="handleClockInAndOut('Out',2)" :loading="clockOutLoading2"
|
:disabled="clockOutLoading1||clockInLoading2||clockInLoading1">
|
晚班下班
|
</a-button>
|
</a-space>
|
</div>
|
</a-form-model>
|
|
|
</a-tab-pane>
|
|
<a-tab-pane tab="当前设备状态" key="2">
|
<a-table :dataSource="dataSource" :columns="columns" rowKey="id" bordered :pagination="false"
|
:loading="loading"/>
|
</a-tab-pane>
|
</a-tabs>
|
</div>
|
</template>
|
|
<script>
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
import { getAction, postAction } from '@/api/manage'
|
import moment from 'moment'
|
|
export default {
|
name: 'EquipmentStartWork',
|
mixins: [JeecgListMixin],
|
data() {
|
return {
|
model: {},
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
equipmentList: [],
|
columns: [
|
{
|
title: '用户编号',
|
align: 'center',
|
dataIndex: 'punchUserUserName',
|
width: 250
|
},
|
{
|
title: '用户名称',
|
align: 'center',
|
dataIndex: 'punchUserRealName'
|
},
|
{
|
title: '设备编号',
|
align: 'center',
|
dataIndex: 'equipmentId',
|
width: 200
|
},
|
{
|
title: '班次',
|
align: 'center',
|
dataIndex: 'shiftScheduleName',
|
width: 150
|
},
|
{
|
title: '上班打卡时间',
|
align: 'center',
|
dataIndex: 'checkInTime'
|
},
|
{
|
title: '下班打卡时间',
|
align: 'center',
|
dataIndex: 'checkOutTime'
|
}
|
],
|
validateRules: {
|
equipmentIdList: [
|
{ required: true, message: '请选择设备!', trigger: 'change' }
|
]
|
},
|
clockInLoading1: false,
|
clockOutLoading1: false,
|
clockInLoading2: false,
|
clockOutLoading2: false,
|
url: {
|
equipmentList: '/mdc/mdcEquipment/getEquipmentList',
|
clockIn: '/mdcEquipmentPunch/workUp',
|
clockOut: '/mdcEquipmentPunch/workDown',
|
list: '/mdcEquipmentPunch/list'
|
}
|
}
|
},
|
created() {
|
this.getEquipmentListByApi()
|
},
|
methods: {
|
// 获取设备列表
|
getEquipmentListByApi() {
|
const that = this
|
getAction(this.url.equipmentList)
|
.then(res => {
|
if (res.success) that.equipmentList = res.result
|
})
|
},
|
|
/**
|
* 打卡上下班事件
|
* @param clockInOrOut In为上班 Out为下班
|
* @param shiftSchedule 1为早班 2为晚班
|
*/
|
handleClockInAndOut(clockInOrOut, shiftSchedule) {
|
const that = this
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
that['clock' + clockInOrOut + 'Loading' + shiftSchedule] = true
|
that.queryParam = {}
|
that.queryParam['shiftSchedule'] = shiftSchedule
|
that.queryParam['check' + clockInOrOut + 'Time'] = moment().format('YYYY-MM-DD HH:mm:ss')
|
that.queryParam.equipmentId = that.model.equipmentIdList.join()
|
console.log('queryParam', that.queryParam)
|
|
postAction(that.url['clock' + clockInOrOut], that.queryParam)
|
.then(res => {
|
console.log('res', res)
|
if (res.success) {
|
that.$notification.success({
|
message: '消息',
|
description: res.message
|
})
|
that.loadData()
|
} else {
|
that.$notification.warning({
|
message: '消息',
|
description: res.message
|
})
|
}
|
})
|
.finally(() => {
|
that['clock' + clockInOrOut + 'Loading' + shiftSchedule] = false
|
})
|
} else {
|
return false
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
/deep/ .ant-tabs {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
|
.ant-tabs-content {
|
width: 100%;
|
flex: 1;
|
|
.ant-tabs-tabpane[dataset='first'] {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
}
|
}
|
}
|
</style>
|
