补卡申请以及补卡审核页面完善
This commit is contained in:
BianLzhaoMin
parent
da89c2499b
commit
4132c24d63
|
|
@ -40,7 +40,7 @@ export const editCardReplacementApplyAPI = (data) => {
|
|||
// 删除补卡申请
|
||||
export const deleteCardReplacementApplyAPI = (data) => {
|
||||
return request({
|
||||
url: '/bmw/pmAttDevice/delPmAttDevice',
|
||||
url: '/bmw/cardApply/delRepairCardApply',
|
||||
method: 'POST',
|
||||
data,
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 获取补卡审核列表
|
||||
export const getCardReplacementAuditListAPI = (data) => {
|
||||
return request({
|
||||
url: '/bmw/cardApply/list',
|
||||
method: 'GET',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
|
||||
// 获取补卡审核详情
|
||||
export const getCardReplacementAuditDetailAPI = (data) => {
|
||||
return request({
|
||||
url: '/bmw/cardApply/getRepairCardDetails',
|
||||
method: 'GET',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
|
||||
// 补卡审核接口
|
||||
export const cardReplacementAuditAPI = (data) => {
|
||||
return request({
|
||||
url: '/bmw/cardApply/audit',
|
||||
method: 'POST',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
|
@ -25,8 +25,8 @@
|
|||
:before-close="handleCloseInner"
|
||||
:visible.sync="dialogConfig.innerVisible"
|
||||
:style="{
|
||||
'--el-dialog-min-height': dialogConfig.minHeight,
|
||||
'--el-dialog-max-height': dialogConfig.maxHeight,
|
||||
'--el-dialog-min-height': dialogConfig.innerMinHeight,
|
||||
'--el-dialog-max-height': dialogConfig.innerMaxHeight,
|
||||
}"
|
||||
>
|
||||
<!-- 内层弹框内容 -->
|
||||
|
|
|
|||
|
|
@ -342,13 +342,18 @@ export default {
|
|||
if (e.f_type === 'dateRange') {
|
||||
this.$set(this.queryParams, e.dateType[0], '')
|
||||
this.$set(this.queryParams, e.dateType[1], '')
|
||||
|
||||
console.log(e.dateType, 'e.dateType')
|
||||
console.log(this.queryParams, 'this.queryParams')
|
||||
this.typeList = e.dateType
|
||||
} else {
|
||||
this.$set(this.queryParams, e.f_model, '')
|
||||
}
|
||||
})
|
||||
if (this.sendParams !== null) {
|
||||
Object.assign(this.queryParams, this.sendParams)
|
||||
for (let key in this.sendParams) {
|
||||
this.$set(this.queryParams, key, this.sendParams[key])
|
||||
}
|
||||
}
|
||||
this.getTableList()
|
||||
},
|
||||
|
|
@ -371,15 +376,17 @@ export default {
|
|||
}
|
||||
|
||||
const params = { ...this.queryParams }
|
||||
delete params.time
|
||||
const queryParams = JSON.parse(JSON.stringify(params))
|
||||
console.log(this.queryParams, 'queryParams')
|
||||
delete queryParams.time
|
||||
console.log(
|
||||
`%c🔍 列表查询入参 %c`,
|
||||
'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
|
||||
'',
|
||||
params,
|
||||
queryParams,
|
||||
)
|
||||
this.loading = true
|
||||
const res = await this.requestApi(params)
|
||||
const res = await this.requestApi(queryParams)
|
||||
if (res.code === 200) {
|
||||
this.tableList = res.rows
|
||||
this.total = res.total
|
||||
|
|
@ -398,10 +405,10 @@ export default {
|
|||
/** 重置按钮 */
|
||||
resetQuery() {
|
||||
this.$refs.queryFormRef.resetFields()
|
||||
|
||||
if (this.typeList.length > 0) {
|
||||
this.queryParams[this.typeList[0]] = ''
|
||||
this.queryParams[this.typeList[1]] = ''
|
||||
this.queryParams.time = []
|
||||
} else {
|
||||
this.queryParams[this.typeList] = ''
|
||||
}
|
||||
|
|
@ -481,12 +488,12 @@ export default {
|
|||
|
||||
/* 时间change事件 */
|
||||
onChangeTime(e, type) {
|
||||
// console.log(e, "时间", type);
|
||||
console.log(e, '时间', type)
|
||||
const [_1, _2] = type
|
||||
const [_time1, _time2] = e
|
||||
if (e.length > 0) {
|
||||
this.queryParams[_time1] = _1
|
||||
this.queryParams[_time2] = _2
|
||||
this.queryParams[_1] = _time1
|
||||
this.queryParams[_2] = _time2
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -114,6 +114,7 @@
|
|||
>
|
||||
<template slot="outerContent">
|
||||
<SelectPersonAndDate
|
||||
:editRow="editRow"
|
||||
ref="selectPersonAndDateRef"
|
||||
@onPersonSubmit="onPersonSubmit"
|
||||
:selectProjectId="selectProjectId"
|
||||
|
|
@ -182,6 +183,8 @@ export default {
|
|||
repairCardRecords: [],
|
||||
fileList: [],
|
||||
},
|
||||
|
||||
editRow: {}, // 修改时的当前行数据
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -210,9 +213,12 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
// 修改
|
||||
// 修改按钮
|
||||
onHandleEdit(row) {
|
||||
console.log(row)
|
||||
this.editRow = row
|
||||
this.dialogConfig.outerTitle = '修改补卡人员以及补卡日期'
|
||||
this.dialogConfig.outerVisible = true
|
||||
},
|
||||
|
||||
// 删除
|
||||
|
|
@ -222,51 +228,58 @@ export default {
|
|||
|
||||
// 补卡信息接口新增
|
||||
async onHandleConfirmFinishFun() {
|
||||
// 组装参数
|
||||
const { repairMonth, repairRemark, fileList } = this.addParams
|
||||
const repairNum = this.tableData.length
|
||||
const formData = new FormData()
|
||||
const fileMsg = []
|
||||
const repairDay = this.tableData.reduce((acc, curr) => {
|
||||
return acc + curr.repairDay
|
||||
}, 0)
|
||||
const params = {
|
||||
proId: this.selectProjectId,
|
||||
repairMonth,
|
||||
repairRemark,
|
||||
repairNum,
|
||||
repairDay,
|
||||
repairCardRecords: this.tableData.map((e) => {
|
||||
return {
|
||||
name: e.name,
|
||||
phone: e.phone,
|
||||
proId: e.proId,
|
||||
teamId: e.teamId,
|
||||
idNumber: e.idNumber,
|
||||
workerId: e.workerId,
|
||||
repairDay: e.repairDay,
|
||||
repairDate: e.repairDate,
|
||||
}
|
||||
}),
|
||||
}
|
||||
return new Promise(async (resolve, reject) => {
|
||||
// 组装参数
|
||||
const { repairMonth, repairRemark, fileList } = this.addParams
|
||||
const repairNum = this.tableData.length
|
||||
const formData = new FormData()
|
||||
const fileMsg = []
|
||||
const repairDay = this.tableData.reduce((acc, curr) => {
|
||||
return acc + curr.repairDay
|
||||
}, 0)
|
||||
const params = {
|
||||
proId: this.selectProjectId,
|
||||
repairMonth,
|
||||
repairRemark,
|
||||
repairNum,
|
||||
repairDay,
|
||||
repairCardRecords: this.tableData.map((e) => {
|
||||
return {
|
||||
name: e.name,
|
||||
phone: e.phone,
|
||||
proId: e.proId,
|
||||
teamId: e.teamId,
|
||||
idNumber: e.idNumber,
|
||||
workerId: e.workerId,
|
||||
repairDay: e.repairDay,
|
||||
repairDate: e.repairDate,
|
||||
}
|
||||
}),
|
||||
}
|
||||
|
||||
if (fileList.length > 0) {
|
||||
fileList.forEach((e) => {
|
||||
fileMsg.push({
|
||||
type: 1,
|
||||
name: '附件',
|
||||
if (fileList.length > 0) {
|
||||
fileList.forEach((e) => {
|
||||
fileMsg.push({
|
||||
type: 1,
|
||||
name: '附件',
|
||||
})
|
||||
|
||||
formData.append('file', e.raw)
|
||||
})
|
||||
}
|
||||
formData.append('fileMsg', JSON.stringify(fileMsg))
|
||||
formData.append('params', JSON.stringify(params))
|
||||
const res = await addCardReplacementApplyAPI(formData)
|
||||
|
||||
formData.append('file', e.raw)
|
||||
})
|
||||
}
|
||||
formData.append('fileMsg', JSON.stringify(fileMsg))
|
||||
formData.append('params', JSON.stringify(params))
|
||||
const res = await addCardReplacementApplyAPI(formData)
|
||||
console.log(res)
|
||||
if (res.code === 200) {
|
||||
this.$modal.msgSuccess('补卡信息新增成功')
|
||||
resolve()
|
||||
} else {
|
||||
this.$modal.msgError(res.msg)
|
||||
reject()
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ export const formLabel = [
|
|||
isShow: false, // 是否展示label
|
||||
f_type: 'ipt',
|
||||
f_label: '姓名',
|
||||
f_model: 'deviceCode',
|
||||
f_model: 'name',
|
||||
},
|
||||
{
|
||||
isShow: false, // 是否展示label
|
||||
|
|
@ -20,26 +20,26 @@ export const formLabel = [
|
|||
]
|
||||
|
||||
export const columnsList = [
|
||||
{ t_props: 'deviceCode', t_label: '工程名称' },
|
||||
{ t_props: 'deviceName', t_label: '补卡人数' },
|
||||
{ t_props: 'proName', t_label: '补卡天数' },
|
||||
{ t_slot: 'isShanghai', t_label: '补卡说明' },
|
||||
{ t_props: 'proName', t_label: '工程名称' },
|
||||
{ t_props: 'repairNum', t_label: '补卡人数' },
|
||||
{ t_props: 'repairDay', t_label: '补卡天数' },
|
||||
{ t_props: 'repairRemark', t_label: '补卡说明' },
|
||||
{
|
||||
t_label: '申请人',
|
||||
t_slot: 'onLine',
|
||||
t_props: 'applyUser',
|
||||
},
|
||||
{ t_label: '绑定人', t_props: '申请时间' },
|
||||
{ t_label: '申请时间', t_props: 'applyTime' },
|
||||
{
|
||||
t_label: '审核状态',
|
||||
t_props: 'updateTime',
|
||||
t_slot: 'checkStatus',
|
||||
},
|
||||
{
|
||||
t_label: '审核人',
|
||||
t_props: 'updateTime',
|
||||
t_props: 'checkUser',
|
||||
},
|
||||
{
|
||||
t_label: '审核时间',
|
||||
t_props: 'updateTime',
|
||||
t_props: 'checkTime',
|
||||
},
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
size="mini"
|
||||
type="success"
|
||||
icon="el-icon-download"
|
||||
@click="onHandleExportAttendanceMachine(queryParams)"
|
||||
@click="onHandleExportCardReplacementApply(queryParams)"
|
||||
>
|
||||
导出
|
||||
</el-button>
|
||||
|
|
@ -33,26 +33,46 @@
|
|||
</template>
|
||||
|
||||
<template slot="handle" slot-scope="{ data }">
|
||||
<!-- <el-button
|
||||
<el-button
|
||||
plain
|
||||
size="mini"
|
||||
type="warning"
|
||||
type="primary"
|
||||
icon="el-icon-edit"
|
||||
v-hasPermi="['attendance:machine:unbind']"
|
||||
@click="onHandleUnBindAttendanceMachine(data)"
|
||||
@click="onHandleEditCardReplacementApply(data)"
|
||||
>
|
||||
解绑
|
||||
</el-button> -->
|
||||
修改
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
v-hasPermi="['attendance:machine:delete']"
|
||||
@click="onHandleDeleteSubBaseInfo(data)"
|
||||
@click="onHandleDeleteCardReplacementApply(data)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<template slot="checkStatus" slot-scope="{ data }">
|
||||
<el-tag
|
||||
size="mini"
|
||||
type="warning"
|
||||
v-if="data.checkStatus === 0"
|
||||
>
|
||||
审核中
|
||||
</el-tag>
|
||||
<el-tag
|
||||
size="mini"
|
||||
type="success"
|
||||
v-if="data.checkStatus === 1"
|
||||
>
|
||||
通过
|
||||
</el-tag>
|
||||
<el-tag size="mini" type="danger" v-if="data.checkStatus === 2">
|
||||
驳回
|
||||
</el-tag>
|
||||
</template>
|
||||
</TableModel>
|
||||
|
||||
<DialogModel
|
||||
|
|
@ -124,7 +144,7 @@ import DialogModel from '@/components/DialogModel'
|
|||
import AddApplyForm from './add-apply-form.vue'
|
||||
import { formLabel, columnsList, dialogConfig } from './config'
|
||||
import {
|
||||
deleteAttendanceMachineAPI,
|
||||
deleteCardReplacementApplyAPI,
|
||||
getCardReplacementApplyListAPI,
|
||||
} from '@/api/construction-person/attendance-manage/card-replacement-apply'
|
||||
|
||||
|
|
@ -153,34 +173,19 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
// 导出按钮
|
||||
onHandleExportAttendanceMachine(queryParams) {
|
||||
this.download(
|
||||
'/bmw/pmAttDevice/export',
|
||||
{
|
||||
...queryParams,
|
||||
},
|
||||
`考勤机列表.xlsx`,
|
||||
)
|
||||
onHandleExportCardReplacementApply(queryParams) {
|
||||
// this.download(
|
||||
// '/bmw/pmAttDevice/export',
|
||||
// {
|
||||
// ...queryParams,
|
||||
// },
|
||||
// `考勤机列表.xlsx`,
|
||||
// )
|
||||
},
|
||||
|
||||
// 新增或修改
|
||||
onHandleAddOrBindAttendanceMachine(type, data) {
|
||||
this.dialogConfig.outerTitle =
|
||||
type === 1 ? '新增考勤机' : '绑定考勤机'
|
||||
|
||||
if (type === 2) {
|
||||
const { proId, deviceCode, deviceName } = data
|
||||
|
||||
this.editFormData = {
|
||||
isUpdate: true,
|
||||
proId,
|
||||
deviceCode,
|
||||
deviceName,
|
||||
}
|
||||
} else {
|
||||
this.editFormData = {}
|
||||
}
|
||||
this.dialogConfig.outerVisible = true
|
||||
// 修改补卡申请
|
||||
onHandleEditCardReplacementApply(data) {
|
||||
console.log(data)
|
||||
},
|
||||
|
||||
// 新增补卡申请
|
||||
|
|
@ -193,19 +198,19 @@ export default {
|
|||
},
|
||||
|
||||
// 删除
|
||||
onHandleDeleteSubBaseInfo(data) {
|
||||
this.$confirm('确定删除该考勤机吗？', '温馨提示', {
|
||||
onHandleDeleteCardReplacementApply(data) {
|
||||
this.$confirm('确定删除该补卡申请吗？', '温馨提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(async () => {
|
||||
const res = await deleteAttendanceMachineAPI({
|
||||
deviceCode: data.deviceCode,
|
||||
const res = await deleteCardReplacementApplyAPI({
|
||||
id: data.id,
|
||||
})
|
||||
if (res.code === 200) {
|
||||
this.$modal.msgSuccess('删除成功')
|
||||
this.$refs.attendanceMachineTableRef.getTableList() // 更新列表
|
||||
this.$refs.cardReplacementApplyTableRef.getTableList() // 更新列表
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
|
|
@ -213,26 +218,15 @@ export default {
|
|||
})
|
||||
},
|
||||
|
||||
// 确定按钮
|
||||
onHandleConfirm() {
|
||||
console.log('确定')
|
||||
},
|
||||
|
||||
// 最终的确定按钮
|
||||
async onHandleConfirmFinish() {
|
||||
this.$refs.addApplyFormRef.onHandleConfirmFinishFun()
|
||||
// try {
|
||||
// await
|
||||
// this.handleCloseDialogOuter()
|
||||
// // this.$refs.attendanceMachineTableRef.getTableList()
|
||||
// } catch (error) {
|
||||
// // console.log('表单提交失败', error)
|
||||
// }
|
||||
},
|
||||
|
||||
// 关闭弹框
|
||||
handleCloseDialogOuter() {
|
||||
this.dialogConfig.outerVisible = false
|
||||
try {
|
||||
await this.$refs.addApplyFormRef.onHandleConfirmFinishFun()
|
||||
this.handleCloseDialogOuter()
|
||||
this.$refs.cardReplacementApplyTableRef.getTableList()
|
||||
} catch (error) {
|
||||
// console.log('表单提交失败', error)
|
||||
}
|
||||
},
|
||||
|
||||
// 下一步
|
||||
|
|
@ -255,6 +249,11 @@ export default {
|
|||
(item) => item.value === this.selectProjectId,
|
||||
).label
|
||||
},
|
||||
|
||||
// 关闭弹框
|
||||
handleCloseDialogOuter() {
|
||||
this.dialogConfig.outerVisible = false
|
||||
},
|
||||
},
|
||||
|
||||
async created() {
|
||||
|
|
|
|||
|
|
@ -123,6 +123,11 @@ export default {
|
|||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
|
||||
editRow: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
// AttendanceCalendar,
|
||||
|
|
@ -139,11 +144,14 @@ export default {
|
|||
personOptions: [],
|
||||
name: '',
|
||||
idNumber: '',
|
||||
workerId: '',
|
||||
initHeight: 0,
|
||||
// 补卡信息列表
|
||||
dateList: [],
|
||||
// 补卡日期列表
|
||||
cardReplacementDateList: [],
|
||||
// 修改时的补卡日期列表
|
||||
editRepairDateList: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -192,11 +200,11 @@ export default {
|
|||
|
||||
// 获取考勤记录
|
||||
async getCardReplacementPersonCheckRecord() {
|
||||
const workerId = this.personOptions.find(
|
||||
(item) => item.value === this.queryPersonForm.selectPersonId,
|
||||
).id
|
||||
// const workerId = this.personOptions.find(
|
||||
// (item) => item.value === this.queryPersonForm.selectPersonId,
|
||||
// ).id
|
||||
const { data: res } = await getCardReplacementPersonCheckRecordAPI({
|
||||
workerId,
|
||||
workerId: this.workerId,
|
||||
proId: this.selectProjectId,
|
||||
startTime: this.queryPersonForm.time[0],
|
||||
endTime: this.queryPersonForm.time[1],
|
||||
|
|
@ -204,15 +212,28 @@ export default {
|
|||
|
||||
const tempList = []
|
||||
if (Object.keys(res).length > 0) {
|
||||
for (const key in res) {
|
||||
tempList.push({
|
||||
month: key.split('-')[1],
|
||||
date: key.split('-')[2],
|
||||
inRange: res[key].inRange,
|
||||
isActive: res[key].isActive,
|
||||
currentDate: key,
|
||||
isChecked: false,
|
||||
})
|
||||
if (this.editRepairDateList.length > 0) {
|
||||
for (const key in res) {
|
||||
tempList.push({
|
||||
month: key.split('-')[1],
|
||||
date: key.split('-')[2],
|
||||
inRange: res[key].inRange,
|
||||
isActive: res[key].isActive,
|
||||
currentDate: key,
|
||||
isChecked: this.editRepairDateList.includes(key),
|
||||
})
|
||||
}
|
||||
} else {
|
||||
for (const key in res) {
|
||||
tempList.push({
|
||||
month: key.split('-')[1],
|
||||
date: key.split('-')[2],
|
||||
inRange: res[key].inRange,
|
||||
isActive: res[key].isActive,
|
||||
currentDate: key,
|
||||
isChecked: false,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -239,6 +260,7 @@ export default {
|
|||
console.log(personInfo, 'personInfo')
|
||||
|
||||
const { name, idNumber, phone, teamName, id, teamId } = personInfo
|
||||
this.workerId = id
|
||||
|
||||
this.dateList = []
|
||||
this.dateList.push({
|
||||
|
|
@ -266,6 +288,30 @@ export default {
|
|||
created() {
|
||||
this.getCardReplacementPersonList()
|
||||
},
|
||||
|
||||
watch: {
|
||||
editRow: {
|
||||
handler(newVal) {
|
||||
if (Object.keys(newVal).length > 0) {
|
||||
const { workerId, idNumber, name, repairDate } = newVal
|
||||
this.queryPersonForm.selectPersonId = workerId
|
||||
this.workerId = workerId
|
||||
this.idNumber = idNumber
|
||||
this.name = name
|
||||
|
||||
const repairDateList = repairDate.split(',')
|
||||
this.editRepairDateList = repairDateList
|
||||
this.queryPersonForm.time = [
|
||||
repairDateList[0],
|
||||
repairDateList[repairDateList.length - 1],
|
||||
]
|
||||
this.getCardReplacementPersonCheckRecord()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,167 @@
|
|||
<template>
|
||||
<div style="width: 100%">
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<TitleTip
|
||||
borderBottom="none"
|
||||
padding="24px 10px"
|
||||
titleText="补卡人员清单"
|
||||
justifyContent="flex-start"
|
||||
>
|
||||
<template name="right">
|
||||
<span>{{ selectProjectName }}</span>
|
||||
</template>
|
||||
</TitleTip>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-table :data="tableData">
|
||||
<el-table-column align="center" label="姓名" prop="name" />
|
||||
<el-table-column align="center" label="身份证" prop="idNumber" />
|
||||
<el-table-column align="center" label="补卡天数" prop="repairDay" />
|
||||
<el-table-column
|
||||
align="center"
|
||||
width="300"
|
||||
label="补卡日期"
|
||||
prop="repairDate"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column align="center" label="补卡工程" prop="proName" />
|
||||
<el-table-column align="center" label="联系方式" prop="phone" />
|
||||
<el-table-column align="center" label="所属班组" prop="teamName" />
|
||||
<el-table-column align="center" label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="onHandleEdit(scope.row)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
style="color: #f56c6c"
|
||||
@click="onHandleDelete($scope.index, scope)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<TitleTip
|
||||
borderBottom="none"
|
||||
padding="24px 10px"
|
||||
titleText="补卡说明"
|
||||
justifyContent="flex-start"
|
||||
/>
|
||||
|
||||
<el-form
|
||||
label-width="140px"
|
||||
ref="addOrEditFormRef"
|
||||
:model="addApplyForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="补卡说明" prop="repairRemark">
|
||||
<el-input
|
||||
clearable
|
||||
maxlength="30"
|
||||
type="textarea"
|
||||
show-word-limit
|
||||
placeholder="请输入考勤机编码"
|
||||
v-model="addParams.repairRemark"
|
||||
:autosize="{ minRows: 4, maxRows: 8 }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="附件">
|
||||
<!-- <UploadFileFormData
|
||||
:limit="3"
|
||||
:file-size="20"
|
||||
:multiple="true"
|
||||
uploadTip="补卡说明附件上传"
|
||||
:file-list.sync="addParams.fileList"
|
||||
:file-type="[
|
||||
'jpg',
|
||||
'png',
|
||||
'jpeg',
|
||||
'pdf',
|
||||
'doc',
|
||||
'docx',
|
||||
]"
|
||||
/> -->
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCardReplacementAuditDetailAPI } from '@/api/construction-person/attendance-manage/card-replacement-audit'
|
||||
export default {
|
||||
name: 'AddApplyForm',
|
||||
props: {
|
||||
selectProjectName: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
queryDetailsId: {
|
||||
type: [Number, String],
|
||||
default: () => '',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
addApplyForm: {
|
||||
reason: '',
|
||||
},
|
||||
dialogConfig: {
|
||||
outerTitle: '选择补卡人员以及补卡日期',
|
||||
outerWidth: '',
|
||||
minHeight: '90vh',
|
||||
maxHeight: '90vh',
|
||||
outerVisible: false,
|
||||
},
|
||||
tableData: [],
|
||||
|
||||
addParams: {
|
||||
// proId: '', // 工程id
|
||||
// repairNum: '', // 补卡人数
|
||||
// repairDay: '', // 补卡天数
|
||||
repairRemark: '', // 补卡说明
|
||||
repairMonth: '2025-08', // 补卡月份
|
||||
repairCardRecords: [],
|
||||
fileList: [],
|
||||
},
|
||||
|
||||
editRow: {}, // 修改时的当前行数据
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取补卡审核详情
|
||||
async getCardReplacementAuditDetail() {
|
||||
const { data: res } = await getCardReplacementAuditDetailAPI({
|
||||
id: this.queryDetailsId,
|
||||
})
|
||||
console.log(res)
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
queryDetailsId: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.getCardReplacementAuditDetail()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
export const formLabel = [
|
||||
{
|
||||
isShow: false, // 是否展示label
|
||||
f_type: 'ipt',
|
||||
f_label: '姓名',
|
||||
f_model: 'deviceCode',
|
||||
},
|
||||
{
|
||||
isShow: false, // 是否展示label
|
||||
f_type: 'ipt',
|
||||
f_label: '工程',
|
||||
f_model: 'deviceName',
|
||||
},
|
||||
{
|
||||
isShow: false, // 是否展示label
|
||||
f_type: 'ipt',
|
||||
f_label: '状态',
|
||||
f_model: 'proName',
|
||||
},
|
||||
]
|
||||
|
||||
export const columnsList = [
|
||||
{ t_props: 'proName', t_label: '工程名称' },
|
||||
{ t_props: 'repairNum', t_label: '补卡人数' },
|
||||
{ t_props: 'repairDay', t_label: '补卡天数' },
|
||||
{ t_props: 'repairRemark', t_label: '补卡说明' },
|
||||
{
|
||||
t_label: '申请人',
|
||||
t_props: 'applyUser',
|
||||
},
|
||||
{ t_label: '申请时间', t_props: 'applyTime' },
|
||||
{
|
||||
t_label: '审核状态',
|
||||
t_slot: 'checkStatus',
|
||||
},
|
||||
{
|
||||
t_label: '审核人',
|
||||
t_props: 'checkUser',
|
||||
},
|
||||
{
|
||||
t_label: '审核时间',
|
||||
t_props: 'checkTime',
|
||||
},
|
||||
]
|
||||
|
||||
export const dialogConfig = {
|
||||
outerTitle: '',
|
||||
minHeight: '90vh',
|
||||
maxHeight: '90vh',
|
||||
outerWidth: '80%',
|
||||
outerVisible: false,
|
||||
innerMinHeight: '50vh',
|
||||
innerMaxHeight: '50vh',
|
||||
innerWidth: '40%',
|
||||
innerVisible: false,
|
||||
innerTitle: '驳回意见',
|
||||
}
|
||||
|
|
@ -1,11 +1,243 @@
|
|||
<template>
|
||||
<!-- 施工人员 ---- 考勤管理 ---- 补卡审核-->
|
||||
<div class="app-container">
|
||||
<h1>补卡审核</h1>
|
||||
<TableModel
|
||||
:formLabel="formLabel"
|
||||
:showOperation="true"
|
||||
:showRightTools="true"
|
||||
:columnsList="columnsList"
|
||||
ref="cardReplacementAuditTableRef"
|
||||
:request-api="getCardReplacementAuditListAPI"
|
||||
>
|
||||
<template slot="btn" slot-scope="{ queryParams }">
|
||||
<el-button
|
||||
plain
|
||||
size="mini"
|
||||
type="success"
|
||||
icon="el-icon-download"
|
||||
@click="onHandleExportCardReplacementAudit(queryParams)"
|
||||
>
|
||||
导出
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<template slot="handle" slot-scope="{ data }">
|
||||
<el-button
|
||||
plain
|
||||
size="mini"
|
||||
type="warning"
|
||||
icon="el-icon-check"
|
||||
v-hasPermi="['attendance:machine:unbind']"
|
||||
@click="onHandleAudit(data)"
|
||||
>
|
||||
审核
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
v-hasPermi="['attendance:machine:delete']"
|
||||
@click="onHandleDetail(data)"
|
||||
>
|
||||
详情
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<template slot="checkStatus" slot-scope="{ data }">
|
||||
<el-tag
|
||||
size="mini"
|
||||
type="warning"
|
||||
v-if="data.checkStatus === 0"
|
||||
>
|
||||
审核中
|
||||
</el-tag>
|
||||
<el-tag
|
||||
size="mini"
|
||||
type="success"
|
||||
v-if="data.checkStatus === 1"
|
||||
>
|
||||
通过
|
||||
</el-tag>
|
||||
<el-tag size="mini" type="danger" v-if="data.checkStatus === 2">
|
||||
驳回
|
||||
</el-tag>
|
||||
</template>
|
||||
</TableModel>
|
||||
|
||||
<DialogModel
|
||||
:dialogConfig="dialogConfig"
|
||||
@closeDialogOuter="handleCloseDialogOuter"
|
||||
@closeDialogInner="handleCloseDialogInner"
|
||||
>
|
||||
<template slot="outerContent">
|
||||
<AuditForm
|
||||
ref="auditFormRef"
|
||||
:queryDetailsId="queryDetailsId"
|
||||
:selectProjectName="selectProjectName"
|
||||
/>
|
||||
|
||||
<el-row class="dialog-footer-btn">
|
||||
<el-button
|
||||
size="medium"
|
||||
type="danger"
|
||||
@click="onHandleReject"
|
||||
>
|
||||
驳回
|
||||
</el-button>
|
||||
<el-button
|
||||
size="medium"
|
||||
type="success"
|
||||
@click="onHandlePassAndReject(1)"
|
||||
>
|
||||
通过
|
||||
</el-button>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<template slot="innerContent">
|
||||
<el-form>
|
||||
<el-form-item label="驳回意见">
|
||||
<el-input
|
||||
clearable
|
||||
maxlength="500"
|
||||
type="textarea"
|
||||
show-word-limit
|
||||
v-model="refuseRemark"
|
||||
placeholder="请输入驳回意见"
|
||||
:autosize="{ minRows: 8, maxRows: 16 }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row class="dialog-footer-btn">
|
||||
<el-button size="medium" @click="handleCloseDialogInner">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button
|
||||
size="medium"
|
||||
type="primary"
|
||||
@click="onHandlePassAndReject(2)"
|
||||
>
|
||||
确定
|
||||
</el-button>
|
||||
</el-row>
|
||||
</template>
|
||||
</DialogModel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
</script>
|
||||
import TableModel from '@/components/TableModel'
|
||||
import DialogModel from '@/components/DialogModel'
|
||||
|
||||
<style></style>
|
||||
import AuditForm from './audit-form.vue'
|
||||
import { formLabel, columnsList, dialogConfig } from './config'
|
||||
import {
|
||||
getCardReplacementAuditListAPI,
|
||||
cardReplacementAuditAPI,
|
||||
} from '@/api/construction-person/attendance-manage/card-replacement-audit'
|
||||
|
||||
export default {
|
||||
name: 'CardReplacementAudit',
|
||||
components: {
|
||||
TableModel,
|
||||
DialogModel,
|
||||
AuditForm,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
formLabel,
|
||||
columnsList,
|
||||
dialogConfig,
|
||||
editFormData: {}, // 修改时回显的数据
|
||||
getCardReplacementAuditListAPI,
|
||||
|
||||
lotProjectOptions: [],
|
||||
queryDetailsId: '',
|
||||
selectProjectName: '',
|
||||
refuseRemark: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 导出按钮
|
||||
onHandleExportCardReplacementAudit(queryParams) {
|
||||
this.download(
|
||||
'/bmw/pmAttDevice/export',
|
||||
{
|
||||
...queryParams,
|
||||
},
|
||||
`考勤机列表.xlsx`,
|
||||
)
|
||||
},
|
||||
|
||||
// 审核按钮
|
||||
onHandleAudit(data) {
|
||||
this.selectProjectName = data.proName
|
||||
this.queryDetailsId = data.id
|
||||
this.dialogConfig.outerVisible = true
|
||||
},
|
||||
|
||||
// 详情按钮
|
||||
onHandleDetail(data) {
|
||||
console.log(data)
|
||||
},
|
||||
|
||||
// 关闭弹框
|
||||
onHandleReject() {
|
||||
this.dialogConfig.innerVisible = true
|
||||
},
|
||||
|
||||
// 通过和驳回按钮
|
||||
onHandlePassAndReject(checkStatus) {
|
||||
this.$confirm(
|
||||
checkStatus === 1
|
||||
? '确定通过此次补卡申请吗？'
|
||||
: '确定驳回此次补卡申请吗？',
|
||||
'温馨提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
},
|
||||
)
|
||||
.then(async () => {
|
||||
const params = {
|
||||
id: this.queryDetailsId,
|
||||
checkStatus,
|
||||
}
|
||||
if (checkStatus === 2) {
|
||||
params.refuseRemark = this.refuseRemark
|
||||
}
|
||||
const res = await cardReplacementAuditAPI(params)
|
||||
if (res.code === 200) {
|
||||
this.$modal.msgSuccess(
|
||||
checkStatus === 1 ? '通过成功' : '驳回成功',
|
||||
)
|
||||
this.$refs.cardReplacementAuditTableRef.getTableList()
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// console.log('取消')
|
||||
})
|
||||
.finally(() => {
|
||||
if (checkStatus === 0) {
|
||||
this.refuseRemark = ''
|
||||
this.dialogConfig.innerVisible = false
|
||||
}
|
||||
this.dialogConfig.outerVisible = false
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭弹框 外层
|
||||
handleCloseDialogOuter() {
|
||||
this.dialogConfig.outerVisible = false
|
||||
},
|
||||
|
||||
// 关闭弹框 内层
|
||||
handleCloseDialogInner() {
|
||||
this.dialogConfig.innerVisible = false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,285 @@
|
|||
<template>
|
||||
<div style="width: 100%">
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<TitleTip
|
||||
borderBottom="none"
|
||||
padding="24px 10px"
|
||||
titleText="补卡人员清单"
|
||||
justifyContent="flex-start"
|
||||
>
|
||||
<template name="right">
|
||||
<span>{{ selectProjectName }}</span>
|
||||
</template>
|
||||
</TitleTip>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-plus"
|
||||
@click="handleSelectPerson"
|
||||
>
|
||||
选择补卡人员
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-table :data="tableData">
|
||||
<el-table-column align="center" label="姓名" prop="name" />
|
||||
<el-table-column align="center" label="身份证" prop="idNumber" />
|
||||
<el-table-column align="center" label="补卡天数" prop="repairDay" />
|
||||
<el-table-column
|
||||
align="center"
|
||||
width="300"
|
||||
label="补卡日期"
|
||||
prop="repairDate"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column align="center" label="补卡工程" prop="proName" />
|
||||
<el-table-column align="center" label="联系方式" prop="phone" />
|
||||
<el-table-column align="center" label="所属班组" prop="teamName" />
|
||||
<el-table-column align="center" label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="onHandleEdit(scope.row)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
style="color: #f56c6c"
|
||||
@click="onHandleDelete($scope.index, scope)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<TitleTip
|
||||
borderBottom="none"
|
||||
padding="24px 10px"
|
||||
titleText="补卡说明"
|
||||
justifyContent="flex-start"
|
||||
/>
|
||||
|
||||
<el-form
|
||||
label-width="140px"
|
||||
ref="addOrEditFormRef"
|
||||
:model="addApplyForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="补卡说明" prop="repairRemark">
|
||||
<el-input
|
||||
clearable
|
||||
maxlength="30"
|
||||
type="textarea"
|
||||
show-word-limit
|
||||
placeholder="请输入考勤机编码"
|
||||
v-model="addParams.repairRemark"
|
||||
:autosize="{ minRows: 4, maxRows: 8 }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="附件">
|
||||
<UploadFileFormData
|
||||
:limit="3"
|
||||
:file-size="20"
|
||||
:multiple="true"
|
||||
uploadTip="补卡说明附件上传"
|
||||
:file-list.sync="addParams.fileList"
|
||||
:file-type="[
|
||||
'jpg',
|
||||
'png',
|
||||
'jpeg',
|
||||
'pdf',
|
||||
'doc',
|
||||
'docx',
|
||||
]"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<DialogModel
|
||||
:dialogConfig="dialogConfig"
|
||||
@closeDialogOuter="handleCloseDialogOuter"
|
||||
>
|
||||
<template slot="outerContent">
|
||||
<SelectPersonAndDate
|
||||
:editRow="editRow"
|
||||
ref="selectPersonAndDateRef"
|
||||
@onPersonSubmit="onPersonSubmit"
|
||||
:selectProjectId="selectProjectId"
|
||||
:selectProjectName="selectProjectName"
|
||||
/>
|
||||
|
||||
<el-row class="dialog-footer-btn">
|
||||
<el-button size="medium" @click="handleCloseDialogOuter">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button
|
||||
size="medium"
|
||||
type="primary"
|
||||
@click="onHandleConfirm"
|
||||
>
|
||||
确定
|
||||
</el-button>
|
||||
</el-row>
|
||||
</template>
|
||||
</DialogModel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DialogModel from '@/components/DialogModel'
|
||||
import UploadFileFormData from '@/components/UploadFileFormData'
|
||||
import SelectPersonAndDate from './select-person-and-date.vue'
|
||||
import { addCardReplacementApplyAPI } from '@/api/construction-person/attendance-manage/card-replacement-apply'
|
||||
export default {
|
||||
name: 'AddApplyForm',
|
||||
props: {
|
||||
selectProjectName: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
selectProjectId: {
|
||||
type: [Number, String],
|
||||
default: () => '',
|
||||
},
|
||||
},
|
||||
components: {
|
||||
DialogModel,
|
||||
SelectPersonAndDate,
|
||||
UploadFileFormData,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addApplyForm: {
|
||||
reason: '',
|
||||
},
|
||||
dialogConfig: {
|
||||
outerTitle: '选择补卡人员以及补卡日期',
|
||||
outerWidth: '',
|
||||
minHeight: '90vh',
|
||||
maxHeight: '90vh',
|
||||
outerVisible: false,
|
||||
},
|
||||
tableData: [],
|
||||
|
||||
addParams: {
|
||||
// proId: '', // 工程id
|
||||
// repairNum: '', // 补卡人数
|
||||
// repairDay: '', // 补卡天数
|
||||
repairRemark: '', // 补卡说明
|
||||
repairMonth: '2025-08', // 补卡月份
|
||||
repairCardRecords: [],
|
||||
fileList: [],
|
||||
},
|
||||
|
||||
editRow: {}, // 修改时的当前行数据
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSelectPerson() {
|
||||
// console.log(this.addApplyForm)
|
||||
this.dialogConfig.outerVisible = true
|
||||
},
|
||||
handleCloseDialogOuter() {
|
||||
this.dialogConfig.outerVisible = false
|
||||
},
|
||||
|
||||
// 确定按钮 ---- 日期已确定，人员已确定
|
||||
onHandleConfirm() {
|
||||
this.$refs.selectPersonAndDateRef.onPersonSubmit()
|
||||
this.dialogConfig.outerVisible = false
|
||||
},
|
||||
|
||||
// 人员选择成功
|
||||
onPersonSubmit(val) {
|
||||
// 已经选中的数据
|
||||
if (val && val.length > 0) {
|
||||
val.forEach((item) => {
|
||||
console.log(item, 'item----')
|
||||
this.tableData.push(item)
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 修改按钮
|
||||
onHandleEdit(row) {
|
||||
console.log(row)
|
||||
this.editRow = row
|
||||
this.dialogConfig.outerTitle = '修改补卡人员以及补卡日期'
|
||||
this.dialogConfig.outerVisible = true
|
||||
},
|
||||
|
||||
// 删除
|
||||
onHandleDelete(index, row) {
|
||||
this.tableData.splice(index, 1)
|
||||
},
|
||||
|
||||
// 补卡信息接口新增
|
||||
async onHandleConfirmFinishFun() {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
// 组装参数
|
||||
const { repairMonth, repairRemark, fileList } = this.addParams
|
||||
const repairNum = this.tableData.length
|
||||
const formData = new FormData()
|
||||
const fileMsg = []
|
||||
const repairDay = this.tableData.reduce((acc, curr) => {
|
||||
return acc + curr.repairDay
|
||||
}, 0)
|
||||
const params = {
|
||||
proId: this.selectProjectId,
|
||||
repairMonth,
|
||||
repairRemark,
|
||||
repairNum,
|
||||
repairDay,
|
||||
repairCardRecords: this.tableData.map((e) => {
|
||||
return {
|
||||
name: e.name,
|
||||
phone: e.phone,
|
||||
proId: e.proId,
|
||||
teamId: e.teamId,
|
||||
idNumber: e.idNumber,
|
||||
workerId: e.workerId,
|
||||
repairDay: e.repairDay,
|
||||
repairDate: e.repairDate,
|
||||
}
|
||||
}),
|
||||
}
|
||||
|
||||
if (fileList.length > 0) {
|
||||
fileList.forEach((e) => {
|
||||
fileMsg.push({
|
||||
type: 1,
|
||||
name: '附件',
|
||||
})
|
||||
|
||||
formData.append('file', e.raw)
|
||||
})
|
||||
}
|
||||
formData.append('fileMsg', JSON.stringify(fileMsg))
|
||||
formData.append('params', JSON.stringify(params))
|
||||
const res = await addCardReplacementApplyAPI(formData)
|
||||
|
||||
if (res.code === 200) {
|
||||
this.$modal.msgSuccess('补卡信息新增成功')
|
||||
resolve()
|
||||
} else {
|
||||
this.$modal.msgError(res.msg)
|
||||
reject()
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
export const formLabel = [
|
||||
{
|
||||
isShow: false, // 是否展示label
|
||||
f_type: 'ipt',
|
||||
f_label: '工程',
|
||||
f_model: 'deviceName',
|
||||
},
|
||||
]
|
||||
|
||||
export const columnsList = [
|
||||
{ t_props: 'deviceCode', t_label: '工程名称' },
|
||||
{ t_props: 'deviceName', t_label: '申请补卡次数' },
|
||||
{ t_props: 'proName', t_label: '申请补卡人数' },
|
||||
{ t_slot: 'isShanghai', t_label: '申请补卡天数' },
|
||||
{
|
||||
t_label: '最后申请时间',
|
||||
t_slot: 'onLine',
|
||||
},
|
||||
]
|
||||
|
||||
export const dialogConfig = {
|
||||
outerTitle: '',
|
||||
minHeight: '',
|
||||
maxHeight: '',
|
||||
outerWidth: '40%',
|
||||
outerVisible: false,
|
||||
}
|
||||
|
|
@ -1,11 +1,267 @@
|
|||
<template>
|
||||
<!-- 施工人员 ---- 考勤管理 ---- 补卡统计-->
|
||||
<div class="app-container">
|
||||
<h1>补卡统计</h1>
|
||||
<TableModel
|
||||
:formLabel="formLabel"
|
||||
:showOperation="true"
|
||||
:showRightTools="true"
|
||||
:columnsList="columnsList"
|
||||
ref="cardReplacementApplyTableRef"
|
||||
:request-api="getCardReplacementApplyListAPI"
|
||||
>
|
||||
<template slot="btn" slot-scope="{ queryParams }">
|
||||
<el-button
|
||||
plain
|
||||
size="mini"
|
||||
type="success"
|
||||
icon="el-icon-download"
|
||||
@click="onHandleExportAttendanceMachine(queryParams)"
|
||||
>
|
||||
导出
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
plain
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
v-hasPermi="['attendance:machine:add']"
|
||||
@click="onHandleAddCardReplacementApply(1, null)"
|
||||
>
|
||||
新增
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<template slot="handle" slot-scope="{ data }">
|
||||
<!-- <el-button
|
||||
plain
|
||||
size="mini"
|
||||
type="warning"
|
||||
icon="el-icon-edit"
|
||||
v-hasPermi="['attendance:machine:unbind']"
|
||||
@click="onHandleUnBindAttendanceMachine(data)"
|
||||
>
|
||||
解绑
|
||||
</el-button> -->
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
v-hasPermi="['attendance:machine:delete']"
|
||||
@click="onHandleDeleteSubBaseInfo(data)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</TableModel>
|
||||
|
||||
<DialogModel
|
||||
:dialogConfig="dialogConfig"
|
||||
@closeDialogOuter="handleCloseDialogOuter"
|
||||
>
|
||||
<template slot="outerContent">
|
||||
<template v-if="dialogConfig.outerTitle === '选择补卡工程'">
|
||||
<el-form label-width="100px">
|
||||
<el-form-item label="补卡工程">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
placeholder="请选择"
|
||||
v-model="selectProjectId"
|
||||
@change="handleSelectProject"
|
||||
>
|
||||
<el-option
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in lotProjectOptions"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row class="dialog-footer-btn">
|
||||
<el-button
|
||||
size="medium"
|
||||
type="primary"
|
||||
@click="onHandleNextStep"
|
||||
>
|
||||
下一步
|
||||
</el-button>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<template v-if="dialogConfig.outerTitle === '新增补卡申请'">
|
||||
<AddApplyForm
|
||||
ref="addApplyFormRef"
|
||||
:selectProjectId="selectProjectId"
|
||||
:selectProjectName="selectProjectName"
|
||||
/>
|
||||
|
||||
<el-row class="dialog-footer-btn">
|
||||
<el-button
|
||||
size="medium"
|
||||
@click="handleCloseDialogOuter"
|
||||
>
|
||||
取消
|
||||
</el-button>
|
||||
<el-button
|
||||
size="medium"
|
||||
type="primary"
|
||||
@click="onHandleConfirmFinish"
|
||||
>
|
||||
确定
|
||||
</el-button>
|
||||
</el-row>
|
||||
</template>
|
||||
</template>
|
||||
</DialogModel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
</script>
|
||||
import TableModel from '@/components/TableModel'
|
||||
import DialogModel from '@/components/DialogModel'
|
||||
|
||||
<style></style>
|
||||
import AddApplyForm from './add-apply-form.vue'
|
||||
import { formLabel, columnsList, dialogConfig } from './config'
|
||||
import {
|
||||
deleteAttendanceMachineAPI,
|
||||
getCardReplacementApplyListAPI,
|
||||
} from '@/api/construction-person/attendance-manage/card-replacement-apply'
|
||||
|
||||
import { getLotProjectSelectListCommonFun } from '@/utils/getCommonData'
|
||||
export default {
|
||||
name: 'CardReplacementCount',
|
||||
components: {
|
||||
TableModel,
|
||||
DialogModel,
|
||||
|
||||
AddApplyForm,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
formLabel,
|
||||
columnsList,
|
||||
dialogConfig,
|
||||
editFormData: {}, // 修改时回显的数据
|
||||
getCardReplacementApplyListAPI,
|
||||
|
||||
lotProjectOptions: [],
|
||||
selectProjectId: '',
|
||||
selectProjectName: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 导出按钮
|
||||
onHandleExportAttendanceMachine(queryParams) {
|
||||
this.download(
|
||||
'/bmw/pmAttDevice/export',
|
||||
{
|
||||
...queryParams,
|
||||
},
|
||||
`考勤机列表.xlsx`,
|
||||
)
|
||||
},
|
||||
|
||||
// 新增或修改
|
||||
onHandleAddOrBindAttendanceMachine(type, data) {
|
||||
this.dialogConfig.outerTitle =
|
||||
type === 1 ? '新增考勤机' : '绑定考勤机'
|
||||
|
||||
if (type === 2) {
|
||||
const { proId, deviceCode, deviceName } = data
|
||||
|
||||
this.editFormData = {
|
||||
isUpdate: true,
|
||||
proId,
|
||||
deviceCode,
|
||||
deviceName,
|
||||
}
|
||||
} else {
|
||||
this.editFormData = {}
|
||||
}
|
||||
this.dialogConfig.outerVisible = true
|
||||
},
|
||||
|
||||
// 新增补卡申请
|
||||
onHandleAddCardReplacementApply(type, data) {
|
||||
this.dialogConfig.outerTitle = '选择补卡工程'
|
||||
this.dialogConfig.outerWidth = '30%'
|
||||
this.dialogConfig.minHeight = ''
|
||||
this.dialogConfig.maxHeight = ''
|
||||
this.dialogConfig.outerVisible = true
|
||||
},
|
||||
|
||||
// 删除
|
||||
onHandleDeleteSubBaseInfo(data) {
|
||||
this.$confirm('确定删除该考勤机吗？', '温馨提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(async () => {
|
||||
const res = await deleteAttendanceMachineAPI({
|
||||
deviceCode: data.deviceCode,
|
||||
})
|
||||
if (res.code === 200) {
|
||||
this.$modal.msgSuccess('删除成功')
|
||||
this.$refs.attendanceMachineTableRef.getTableList() // 更新列表
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// console.log('取消')
|
||||
})
|
||||
},
|
||||
|
||||
// 确定按钮
|
||||
onHandleConfirm() {
|
||||
console.log('确定')
|
||||
},
|
||||
|
||||
// 最终的确定按钮
|
||||
async onHandleConfirmFinish() {
|
||||
try {
|
||||
await this.$refs.addApplyFormRef.onHandleConfirmFinishFun()
|
||||
this.handleCloseDialogOuter()
|
||||
this.$refs.cardReplacementApplyTableRef.getTableList()
|
||||
} catch (error) {
|
||||
// console.log('表单提交失败', error)
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭弹框
|
||||
handleCloseDialogOuter() {
|
||||
this.dialogConfig.outerVisible = false
|
||||
},
|
||||
|
||||
// 下一步
|
||||
onHandleNextStep() {
|
||||
if (!this.selectProjectId) {
|
||||
this.$modal.msgError('请选择补卡工程')
|
||||
return
|
||||
}
|
||||
|
||||
this.dialogConfig.outerTitle = '新增补卡申请'
|
||||
this.dialogConfig.outerWidth = '80%'
|
||||
this.dialogConfig.minHeight = '80vh'
|
||||
this.dialogConfig.maxHeight = '80h'
|
||||
this.dialogConfig.outerVisible = true
|
||||
},
|
||||
|
||||
// 选择补卡工程
|
||||
handleSelectProject() {
|
||||
this.selectProjectName = this.lotProjectOptions.find(
|
||||
(item) => item.value === this.selectProjectId,
|
||||
).label
|
||||
},
|
||||
},
|
||||
|
||||
async created() {
|
||||
const lot = await getLotProjectSelectListCommonFun()
|
||||
this.lotProjectOptions = lot.map((item) => ({
|
||||
value: item.id,
|
||||
label: item.proName,
|
||||
}))
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,349 @@
|
|||
<template>
|
||||
<!-- 选择补卡人员及补卡日期页面 -->
|
||||
<div style="width: 100%">
|
||||
<el-form :model="queryPersonForm" :inline="true" size="mini">
|
||||
<el-form-item prop="reason">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
placeholder="请选择人员"
|
||||
@change="onChangePerson"
|
||||
v-model="queryPersonForm.selectPersonId"
|
||||
>
|
||||
<el-option
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in personOptions"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="reason">
|
||||
<el-date-picker
|
||||
type="daterange"
|
||||
style="width: 240px"
|
||||
range-separator="至"
|
||||
value-format="yyyy-MM-dd"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
v-model="queryPersonForm.time"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="reason">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
@click="handleQuery"
|
||||
>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
type="warning"
|
||||
icon="el-icon-refresh"
|
||||
@click="resetQuery"
|
||||
>
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div v-if="idNumber">
|
||||
<span>
|
||||
{{ name }}
|
||||
</span>
|
||||
<span> ({{ idNumber }}) </span>
|
||||
</div>
|
||||
|
||||
<!-- 补卡日历 -->
|
||||
<div class="date-ist" v-if="cardReplacementDateList.length > 0">
|
||||
<div
|
||||
:key="item.currentDate"
|
||||
v-for="(item, index) in cardReplacementDateList"
|
||||
style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
"
|
||||
>
|
||||
<span
|
||||
style="
|
||||
padding: 4px 0;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
font-family: 'PingFang SC';
|
||||
"
|
||||
>
|
||||
{{ item.month }}月
|
||||
</span>
|
||||
<div
|
||||
class="item"
|
||||
:ref="`item${index}`"
|
||||
:style="{
|
||||
height: initHeight + 'px',
|
||||
backgroundColor: item.inRange
|
||||
? item.isActive == 1
|
||||
? '#19be6b'
|
||||
: '#f56c6c'
|
||||
: '#999',
|
||||
}"
|
||||
:class="{
|
||||
'item-active': item.isChecked,
|
||||
}"
|
||||
>
|
||||
{{ item.date }}
|
||||
|
||||
<el-checkbox
|
||||
class="check-box-item"
|
||||
v-model="item.isChecked"
|
||||
v-if="item.isActive == 0 && item.inRange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getCardReplacementPersonListAPI,
|
||||
getCardReplacementPersonCheckRecordAPI,
|
||||
} from '@/api/construction-person/attendance-manage/card-replacement-apply'
|
||||
export default {
|
||||
name: 'SelectPersonAndDate',
|
||||
props: {
|
||||
selectProjectId: {
|
||||
type: [Number, String],
|
||||
default: () => '',
|
||||
},
|
||||
selectProjectName: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
|
||||
editRow: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
// AttendanceCalendar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
queryPersonForm: {
|
||||
selectPersonId: '',
|
||||
time: [
|
||||
new Date().toISOString().split('T')[0],
|
||||
new Date().toISOString().split('T')[0],
|
||||
],
|
||||
},
|
||||
personOptions: [],
|
||||
name: '',
|
||||
idNumber: '',
|
||||
workerId: '',
|
||||
initHeight: 0,
|
||||
// 补卡信息列表
|
||||
dateList: [],
|
||||
// 补卡日期列表
|
||||
cardReplacementDateList: [],
|
||||
// 修改时的补卡日期列表
|
||||
editRepairDateList: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleCloseDialogOuter() {
|
||||
this.dialogConfig.outerVisible = false
|
||||
},
|
||||
|
||||
// 获取补卡人员列表
|
||||
async getCardReplacementPersonList() {
|
||||
const { data: res } = await getCardReplacementPersonListAPI({
|
||||
proId: this.selectProjectId,
|
||||
})
|
||||
this.personOptions = res.map((item) => ({
|
||||
...item,
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
}))
|
||||
},
|
||||
// 查询
|
||||
handleQuery() {
|
||||
this.getCardReplacementPersonCheckRecord()
|
||||
},
|
||||
|
||||
resetQuery() {
|
||||
this.queryPersonForm.selectPersonId = ''
|
||||
this.queryPersonForm.time = [
|
||||
new Date().toISOString().split('T')[0],
|
||||
new Date().toISOString().split('T')[0],
|
||||
]
|
||||
this.getCardReplacementPersonCheckRecord()
|
||||
},
|
||||
|
||||
// 处理数据
|
||||
onPersonSubmit() {
|
||||
const tempList = this.cardReplacementDateList.filter(
|
||||
(item) => item.isChecked,
|
||||
)
|
||||
if (tempList.length > 0) {
|
||||
const repairDate = tempList.map((item) => item.currentDate)
|
||||
this.dateList[0].repairDate = repairDate.join(',')
|
||||
this.dateList[0].repairDay = repairDate.length
|
||||
|
||||
this.$emit('onPersonSubmit', this.dateList)
|
||||
}
|
||||
},
|
||||
|
||||
// 获取考勤记录
|
||||
async getCardReplacementPersonCheckRecord() {
|
||||
// const workerId = this.personOptions.find(
|
||||
// (item) => item.value === this.queryPersonForm.selectPersonId,
|
||||
// ).id
|
||||
const { data: res } = await getCardReplacementPersonCheckRecordAPI({
|
||||
workerId: this.workerId,
|
||||
proId: this.selectProjectId,
|
||||
startTime: this.queryPersonForm.time[0],
|
||||
endTime: this.queryPersonForm.time[1],
|
||||
})
|
||||
|
||||
const tempList = []
|
||||
if (Object.keys(res).length > 0) {
|
||||
if (this.editRepairDateList.length > 0) {
|
||||
for (const key in res) {
|
||||
tempList.push({
|
||||
month: key.split('-')[1],
|
||||
date: key.split('-')[2],
|
||||
inRange: res[key].inRange,
|
||||
isActive: res[key].isActive,
|
||||
currentDate: key,
|
||||
isChecked: this.editRepairDateList.includes(key),
|
||||
})
|
||||
}
|
||||
} else {
|
||||
for (const key in res) {
|
||||
tempList.push({
|
||||
month: key.split('-')[1],
|
||||
date: key.split('-')[2],
|
||||
inRange: res[key].inRange,
|
||||
isActive: res[key].isActive,
|
||||
currentDate: key,
|
||||
isChecked: false,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.cardReplacementDateList = tempList.sort((a, b) => {
|
||||
return a.date - b.date
|
||||
})
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getInitHeight()
|
||||
})
|
||||
},
|
||||
|
||||
// 当人员选择发生变化时
|
||||
onChangePerson(val) {
|
||||
if (!val) {
|
||||
this.dateList = []
|
||||
return
|
||||
}
|
||||
|
||||
const personInfo = this.personOptions.find(
|
||||
(item) => item.value === val,
|
||||
)
|
||||
|
||||
console.log(personInfo, 'personInfo')
|
||||
|
||||
const { name, idNumber, phone, teamName, id, teamId } = personInfo
|
||||
this.workerId = id
|
||||
|
||||
this.dateList = []
|
||||
this.dateList.push({
|
||||
teamName, // 补卡人员姓名
|
||||
name, // 补卡人员所属班组
|
||||
phone, // 补卡人员联系方式
|
||||
idNumber, // 补卡人员身份证号
|
||||
repairDay: '', // 补卡天数
|
||||
repairDate: '', // 补卡日期
|
||||
workerId: id, // 补卡人员id
|
||||
teamId, // 补卡人员所属班组id
|
||||
proName: this.selectProjectName, // 工程名称
|
||||
proId: this.selectProjectId, // 工程id
|
||||
})
|
||||
},
|
||||
|
||||
getInitHeight() {
|
||||
const item = this.$refs[`item0`][0]
|
||||
if (item) {
|
||||
this.initHeight = item.offsetWidth
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getCardReplacementPersonList()
|
||||
},
|
||||
|
||||
watch: {
|
||||
editRow: {
|
||||
handler(newVal) {
|
||||
if (Object.keys(newVal).length > 0) {
|
||||
const { workerId, idNumber, name, repairDate } = newVal
|
||||
this.queryPersonForm.selectPersonId = workerId
|
||||
this.workerId = workerId
|
||||
this.idNumber = idNumber
|
||||
this.name = name
|
||||
|
||||
const repairDateList = repairDate.split(',')
|
||||
this.editRepairDateList = repairDateList
|
||||
this.queryPersonForm.time = [
|
||||
repairDateList[0],
|
||||
repairDateList[repairDateList.length - 1],
|
||||
]
|
||||
this.getCardReplacementPersonCheckRecord()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.date-ist {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 10px;
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
border-radius: 5px;
|
||||
align-items: center;
|
||||
border-radius: 6px;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
|
||||
.check-box-item {
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-active {
|
||||
background-color: #b58bae !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue