gz-att-web/src/views/report/attReport/check.vue

467 lines
23 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="日期">
<el-date-picker
v-model="dateRange"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:clearable="false"
></el-date-picker>
</el-form-item>
<el-form-item label="部门" prop="orgId">
<treeselect v-model="queryParams.orgId" :options="deptOptions" :normalizer="normalizer" placeholder="选择部门"
style="width: 240px"/>
</el-form-item>
<el-form-item label="姓名" prop="userName">
<el-input
v-model="queryParams.userName"
placeholder="请输入姓名"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态筛选" prop="attStatus">
<el-select
v-model="queryParams.attStatus"
placeholder="状态"
clearable
style="width: 240px"
>
<el-option
v-for="dict in dict.type.att_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
<el-button type="success" icon="el-icon-s-check" size="mini" @click="openDialog" v-hasPermi="['att:attDetailsUpdate:exam']">批量审批</el-button>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" :selectable="selectable"/>
<el-table-column label="序号" align="center" width="80" type="index">
<template slot-scope="scope">
<span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="审批状态" align="center" prop="reviewerStatus">
<template slot-scope="scope">
<div v-if="scope.row.reviewerStatus==0">待审核</div>
<div v-if="scope.row.reviewerStatus==1">已审核</div>
<div v-if="scope.row.reviewerStatus==2">已拒绝</div>
</template>
</el-table-column>
<el-table-column label="姓名" align="center" prop="userName"/>
<el-table-column label="所属部门" align="center" prop="orgName" :show-overflow-tooltip="true"/>
<el-table-column label="考勤日期" align="center" prop="attCurrentDay" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column label="上班打卡时间" align="center" prop="toWorkOriginalAttCurrentTime" width="180"></el-table-column>
<el-table-column label="上班状态" align="center" prop="toWorkOriginalAttStatus">
<template slot-scope="scope">
<div v-if="scope.row.toWorkOriginalAttStatus==0">未打卡</div>
<div v-if="scope.row.toWorkOriginalAttStatus==1">正常</div>
<div style="color: #F1A4AD" v-if="scope.row.toWorkOriginalAttStatus==2">迟到</div>
<div style="color: #29C9C9" v-if="scope.row.toWorkOriginalAttStatus==3">旷工</div>
<div v-if="scope.row.toWorkOriginalAttStatus==4">早退</div>
<div v-if="scope.row.toWorkOriginalAttStatus==5">轮休</div>
<div style="color: #14ACF0" v-if="scope.row.toWorkOriginalAttStatus==6">请假</div>
<div v-if="scope.row.toWorkOriginalAttStatus==7">临时外出</div>
<div style="color: #DD1E36" v-if="scope.row.toWorkOriginalAttStatus==8">出入异常</div>
<div v-if="scope.row.toWorkOriginalAttStatus==9">打卡地异常</div>
<div v-if="scope.row.toWorkOriginalAttStatus==10">出差</div>
<div v-if="scope.row.toWorkOriginalAttStatus==11">法定节假日</div>
</template>
</el-table-column>
<el-table-column label="打卡地址" align="center" prop="toWorkAttAddress" :show-overflow-tooltip="true"/>
<el-table-column label="修改后时间" align="center" prop="toWorkUpdateAttCurrentTime" :show-overflow-tooltip="true"/>
<el-table-column label="修改后状态" align="center" prop="toWorkUpdateAttStatus" :show-overflow-tooltip="true">
<template slot-scope="scope">
<div v-if="scope.row.toWorkUpdateAttStatus==0" @click="reasonDialog(scope.row.toErrorRemake)">未打卡</div>
<div v-if="scope.row.toWorkUpdateAttStatus==1" @click="reasonDialog(scope.row.toErrorRemake)">正常</div>
<div style="color: #F1A4AD" v-if="scope.row.toWorkUpdateAttStatus==2" @click="reasonDialog(scope.row.toErrorRemake)">迟到</div>
<div style="color: #29C9C9" v-if="scope.row.toWorkUpdateAttStatus==3" @click="reasonDialog(scope.row.toErrorRemake)">旷工</div>
<div v-if="scope.row.toWorkUpdateAttStatus==4" @click="reasonDialog(scope.row.toErrorRemake)">早退</div>
<div v-if="scope.row.toWorkUpdateAttStatus==5" @click="reasonDialog(scope.row.toErrorRemake)">轮休</div>
<div style="color: #14ACF0" v-if="scope.row.toWorkUpdateAttStatus==6" @click="reasonDialog(scope.row.toErrorRemake)">请假</div>
<div v-if="scope.row.toWorkUpdateAttStatus==7" @click="reasonDialog(scope.row.toErrorRemake)">临时外出</div>
<div style="color: #DD1E36" v-if="scope.row.toWorkUpdateAttStatus==8" @click="reasonDialog(scope.row.toErrorRemake)">出入异常</div>
<div v-if="scope.row.toWorkUpdateAttStatus==9" @click="reasonDialog(scope.row.toErrorRemake)">打卡地异常</div>
<div v-if="scope.row.toWorkUpdateAttStatus==10" @click="reasonDialog(scope.row.toErrorRemake)">出差</div>
<div v-if="scope.row.toWorkUpdateAttStatus==11" @click="reasonDialog(scope.row.toErrorRemake)">法定节假日</div>
</template>
</el-table-column>
<el-table-column label="下班打卡时间" align="center" prop="offWorkOriginalAttCurrentTime" width="180"></el-table-column>
<el-table-column label="下班状态" align="center" prop="offWorkOriginalAttStatus">
<template slot-scope="scope">
<div v-if="scope.row.offWorkOriginalAttStatus==0">未打卡</div>
<div v-if="scope.row.offWorkOriginalAttStatus==1">正常</div>
<div style="color: #F1A4AD" v-if="scope.row.offWorkOriginalAttStatus==2">迟到</div>
<div style="color: #29C9C9" v-if="scope.row.offWorkOriginalAttStatus==3">旷工</div>
<div v-if="scope.row.offWorkOriginalAttStatus==4">早退</div>
<div v-if="scope.row.offWorkOriginalAttStatus==5">轮休</div>
<div style="color: #14ACF0" v-if="scope.row.offWorkOriginalAttStatus==6">请假</div>
<div v-if="scope.row.offWorkOriginalAttStatus==7">临时外出</div>
<div style="color: #DD1E36" v-if="scope.row.offWorkOriginalAttStatus==8">出入异常</div>
<div v-if="scope.row.offWorkOriginalAttStatus==9">打卡地异常</div>
<div v-if="scope.row.offWorkOriginalAttStatus==10">出差</div>
<div v-if="scope.row.offWorkOriginalAttStatus==11">法定节假日</div>
</template>
</el-table-column>
<el-table-column label="打卡地址" align="center" prop="offWorkAttAddress" :show-overflow-tooltip="true"/>
<el-table-column label="修改后时间" align="center" prop="offWorkUpdateAttCurrentTime" :show-overflow-tooltip="true"/>
<el-table-column label="修改后状态" align="center" prop="offWorkUpdateAttStatus" :show-overflow-tooltip="true">
<template slot-scope="scope">
<div v-if="scope.row.offWorkUpdateAttStatus==0" @click="reasonDialog(scope.row.offErrorRemake)">未打卡</div>
<div v-if="scope.row.offWorkUpdateAttStatus==1" @click="reasonDialog(scope.row.offErrorRemake)">正常</div>
<div style="color: #F1A4AD" v-if="scope.row.offWorkUpdateAttStatus==2" @click="reasonDialog(scope.row.offErrorRemake)">迟到</div>
<div style="color: #29C9C9" v-if="scope.row.offWorkUpdateAttStatus==3" @click="reasonDialog(scope.row.offErrorRemake)">旷工</div>
<div v-if="scope.row.offWorkUpdateAttStatus==4" @click="reasonDialog(scope.row.offErrorRemake)">早退</div>
<div v-if="scope.row.offWorkUpdateAttStatus==5" @click="reasonDialog(scope.row.offErrorRemake)">轮休</div>
<div style="color: #14ACF0" v-if="scope.row.offWorkUpdateAttStatus==6" @click="reasonDialog(scope.row.offErrorRemake)">请假</div>
<div v-if="scope.row.offWorkUpdateAttStatus==7" @click="reasonDialog(scope.row.offErrorRemake)">临时外出</div>
<div style="color: #DD1E36" v-if="scope.row.offWorkUpdateAttStatus==8" @click="reasonDialog(scope.row.offErrorRemake)">出入异常</div>
<div v-if="scope.row.offWorkUpdateAttStatus==9" @click="reasonDialog(scope.row.offErrorRemake)">打卡地异常</div>
<div v-if="scope.row.offWorkUpdateAttStatus==10" @click="reasonDialog(scope.row.offErrorRemake)">出差</div>
<div v-if="scope.row.offWorkUpdateAttStatus==11" @click="reasonDialog(scope.row.offErrorRemake)">法定节假日</div>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<el-dialog title="批量审批" :visible.sync="open" width="1300px" append-to-body>
<el-table v-loading="loading" :data="dialogList" width="100%" height="500px">
<el-table-column label="序号" type="index" width="55" align="center"/>
<el-table-column label="姓名" align="center" prop="userName"/>
<el-table-column label="所属部门" align="center" prop="orgName" :show-overflow-tooltip="true" width="150"/>
<el-table-column label="考勤日期" align="center" prop="attCurrentDay" :show-overflow-tooltip="true" width="120"/>
<el-table-column label="上班打卡时间" align="center" prop="toWorkOriginalAttCurrentTime" width="150"/>
<el-table-column label="上班状态" align="center" prop="toWorkOriginalAttStatus" width="120">
<template slot-scope="scope">
<div v-if="scope.row.toWorkOriginalAttStatus==0">未打卡</div>
<div v-if="scope.row.toWorkOriginalAttStatus==1">正常</div>
<div style="color: #F1A4AD" v-if="scope.row.toWorkOriginalAttStatus==2">迟到</div>
<div style="color: #29C9C9" v-if="scope.row.toWorkOriginalAttStatus==3">旷工</div>
<div v-if="scope.row.toWorkOriginalAttStatus==4">早退</div>
<div v-if="scope.row.toWorkOriginalAttStatus==5">轮休</div>
<div style="color: #14ACF0" v-if="scope.row.toWorkOriginalAttStatus==6">请假</div>
<div v-if="scope.row.toWorkOriginalAttStatus==7">临时外出</div>
<div style="color: #DD1E36" v-if="scope.row.toWorkOriginalAttStatus==8">出入异常</div>
<div v-if="scope.row.toWorkOriginalAttStatus==9">打卡地异常</div>
<div v-if="scope.row.toWorkOriginalAttStatus==10">出差</div>
<div v-if="scope.row.toWorkOriginalAttStatus==11">法定节假日</div>
</template>
</el-table-column>
<el-table-column label="打卡地址" align="center" prop="toWorkAttAddress" :show-overflow-tooltip="true" width="150"/>
<el-table-column label="修改后时间" align="center" prop="toWorkUpdateAttCurrentTime" :show-overflow-tooltip="true" width="150"/>
<el-table-column label="修改后状态" align="center" prop="toWorkUpdateAttStatus" :show-overflow-tooltip="true" width="120">
<template slot-scope="scope">
<div v-if="scope.row.toWorkUpdateAttStatus==0" @click="reasonDialog(scope.row.toErrorRemake)">未打卡</div>
<div v-if="scope.row.toWorkUpdateAttStatus==1" @click="reasonDialog(scope.row.toErrorRemake)">正常</div>
<div style="color: #F1A4AD" v-if="scope.row.toWorkUpdateAttStatus==2" @click="reasonDialog(scope.row.toErrorRemake)">迟到</div>
<div style="color: #29C9C9" v-if="scope.row.toWorkUpdateAttStatus==3" @click="reasonDialog(scope.row.toErrorRemake)">旷工</div>
<div v-if="scope.row.toWorkUpdateAttStatus==4" @click="reasonDialog(scope.row.toErrorRemake)">早退</div>
<div v-if="scope.row.toWorkUpdateAttStatus==5" @click="reasonDialog(scope.row.toErrorRemake)">轮休</div>
<div style="color: #14ACF0" v-if="scope.row.toWorkUpdateAttStatus==6" @click="reasonDialog(scope.row.toErrorRemake)">请假</div>
<div v-if="scope.row.toWorkUpdateAttStatus==7" @click="reasonDialog(scope.row.toErrorRemake)">临时外出</div>
<div style="color: #DD1E36" v-if="scope.row.toWorkUpdateAttStatus==8" @click="reasonDialog(scope.row.toErrorRemake)">出入异常</div>
<div v-if="scope.row.toWorkUpdateAttStatus==9" @click="reasonDialog(scope.row.toErrorRemake)">打卡地异常</div>
<div v-if="scope.row.toWorkUpdateAttStatus==10" @click="reasonDialog(scope.row.toErrorRemake)">出差</div>
<div v-if="scope.row.toWorkUpdateAttStatus==11" @click="reasonDialog(scope.row.toErrorRemake)">法定节假日</div>
</template>
</el-table-column>
<el-table-column label="下班打卡时间" align="center" prop="offWorkOriginalAttCurrentTime" width="150"></el-table-column>
<el-table-column label="下班状态" align="center" prop="offWorkOriginalAttStatus" width="120">
<template slot-scope="scope">
<div v-if="scope.row.offWorkOriginalAttStatus==0">未打卡</div>
<div v-if="scope.row.offWorkOriginalAttStatus==1">正常</div>
<div style="color: #F1A4AD" v-if="scope.row.offWorkOriginalAttStatus==2">迟到</div>
<div style="color: #29C9C9" v-if="scope.row.offWorkOriginalAttStatus==3">旷工</div>
<div v-if="scope.row.offWorkOriginalAttStatus==4">早退</div>
<div v-if="scope.row.offWorkOriginalAttStatus==5">轮休</div>
<div style="color: #14ACF0" v-if="scope.row.offWorkOriginalAttStatus==6">请假</div>
<div v-if="scope.row.offWorkOriginalAttStatus==7">临时外出</div>
<div style="color: #DD1E36" v-if="scope.row.offWorkOriginalAttStatus==8">出入异常</div>
<div v-if="scope.row.offWorkOriginalAttStatus==9">打卡地异常</div>
<div v-if="scope.row.offWorkOriginalAttStatus==10">出差</div>
<div v-if="scope.row.offWorkOriginalAttStatus==11">法定节假日</div>
</template>
</el-table-column>
<el-table-column label="打卡地址" align="center" prop="offWorkAttAddress" :show-overflow-tooltip="true" width="150"/>
<el-table-column label="修改后时间" align="center" prop="offWorkUpdateAttCurrentTime" :show-overflow-tooltip="true" width="150"/>
<el-table-column label="修改后状态" align="center" prop="offWorkUpdateAttStatus" :show-overflow-tooltip="true" width="120">
<template slot-scope="scope">
<div v-if="scope.row.offWorkUpdateAttStatus==0" @click="reasonDialog(scope.row.offErrorRemake)">未打卡</div>
<div v-if="scope.row.offWorkUpdateAttStatus==1" @click="reasonDialog(scope.row.offErrorRemake)">正常</div>
<div style="color: #F1A4AD" v-if="scope.row.offWorkUpdateAttStatus==2" @click="reasonDialog(scope.row.offErrorRemake)">迟到</div>
<div style="color: #29C9C9" v-if="scope.row.offWorkUpdateAttStatus==3" @click="reasonDialog(scope.row.offErrorRemake)">旷工</div>
<div v-if="scope.row.offWorkUpdateAttStatus==4" @click="reasonDialog(scope.row.offErrorRemake)">早退</div>
<div v-if="scope.row.offWorkUpdateAttStatus==5" @click="reasonDialog(scope.row.offErrorRemake)">轮休</div>
<div style="color: #14ACF0" v-if="scope.row.offWorkUpdateAttStatus==6" @click="reasonDialog(scope.row.offErrorRemake)">请假</div>
<div v-if="scope.row.offWorkUpdateAttStatus==7" @click="reasonDialog(scope.row.offErrorRemake)">临时外出</div>
<div style="color: #DD1E36" v-if="scope.row.offWorkUpdateAttStatus==8" @click="reasonDialog(scope.row.offErrorRemake)">出入异常</div>
<div v-if="scope.row.offWorkUpdateAttStatus==9" @click="reasonDialog(scope.row.offErrorRemake)">打卡地异常</div>
<div v-if="scope.row.offWorkUpdateAttStatus==10" @click="reasonDialog(scope.row.offErrorRemake)">出差</div>
<div v-if="scope.row.offWorkUpdateAttStatus==11" @click="reasonDialog(scope.row.offErrorRemake)">法定节假日</div>
</template>
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitEdit">同 意</el-button>
<el-button @click="refuse">拒 绝</el-button>
</div>
</el-dialog>
<!-- 添加或修改参数配置对话框 -->
<el-dialog :title="title" :visible.sync="openReason" width="500px" append-to-body>
<el-form ref="form" :model="reasonStr" label-width="500px">
<el-col :span="24">
<el-input type="textarea" :autosize="{minRows:3,maxRows:4}" :value="reasonStr" :disabled="true" />
</el-col>
</el-form>
<div style="margin-top: 65px" slot="footer" class="dialog-footer" align="center">
<el-button @click="cancelRecord">取消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {getDetailsRecordList, updateAttDetailsDataExamine,listDept} from "@/api/report/attReport";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "Dict",
dicts: ['att_status'],
components: {Treeselect},
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 字典表格数据
typeList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
openReason: false,
dialogList:[],
// 日期范围
dateRange:[],
reasonStr:undefined,
deptOptions: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
userName: undefined,
orgId: undefined,
attStatus: undefined
},
};
},
created() {
if(this.$route.query.param){
console.log(this.$route.query.param)
this.queryParams.userName=this.$route.query.param
}
this.getWeekDates();
this.getDeptList();
this.getList();
},
methods: {
getWeekDates() {
const now = new Date();
const dayOfWeek = now.getDay();
const dayOffset = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
const monday = new Date(now);
monday.setDate(monday.getDate() + dayOffset);
const sunday = new Date(monday);
sunday.setDate(sunday.getDate() + 6);
this.dateRange[0]=monday.toISOString().split('T')[0];
this.dateRange[1]=sunday.toISOString().split('T')[0];
},
formatDate(dateString){
const date = new Date(dateString); // 创建日期对象
const year = date.getFullYear(); // 获取年份
const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份注意月份从0开始
const day = String(date.getDate()).padStart(2, '0'); // 获取日期
const weekdays = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; // 星期几数组
const weekday = weekdays[date.getDay()]; // 获取星期几
return `${year}-${month}-${day} ${weekday}`; // 组合成所需格式
},
getDeptList() {
listDept().then(response => {
this.deptOptions = this.handleTree(response.data, "id");
});
},
/** 转换部门数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.id,
label: node.orgName,
children: node.children
};
},
/** 查询字典类型列表 */
getList() {
this.loading = true;
console.log(this.dateRange)
if (this.dateRange && this.dateRange.length > 0) {
this.queryParams.startDate = this.dateRange[0]
this.queryParams.endDate = this.dateRange[1]
} else {
this.queryParams.startDate = undefined
this.queryParams.endDate = undefined
}
getDetailsRecordList(this.queryParams).then(response => {
this.typeList = response.rows;
this.total = response.total;
this.loading = false;
}
);
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.getWeekDates();
this.resetForm("queryForm");
this.handleQuery();
},
//是否可用勾选框
selectable(row) {
if (row.reviewerStatus == '0') {
return true
} else {
return false
}
},
// 多选框选中数据
handleSelectionChange(selection) {
this.dialogList = selection;
},
openDialog(){
console.log(this.dialogList)
if(this.dialogList.length>0){
this.open=true;
}else{
this.$message({ message: '请先勾选数据!', type: 'warning' })
}
},
submitEdit(){
let paramList = []
this.dialogList.forEach(item=>{
let obj = {
userId:item.userId,
orgId:item.orgId,
attCurrentDay:item.attCurrentDay,
reviewerStatus:1,
}
paramList.push(obj)
})
// console.log(paramList)
updateAttDetailsDataExamine(paramList).then(response => {
if(response.code==200){
this.$modal.msgSuccess("审批成功!");
this.dialogList=[]
this.open = false;
this.getList();
}else{
this.$message({ message: '审批失败!', type: 'warning' })
}
});
},
refuse(){
let paramList = []
this.dialogList.forEach(item=>{
let obj = {
userId:item.userId,
orgId:item.orgId,
attCurrentDay:item.attCurrentDay,
reviewerStatus:2,
}
paramList.push(obj)
})
// console.log(paramList)
updateAttDetailsDataExamine(paramList).then(response => {
if(response.code==200){
this.$modal.msgSuccess("审批成功!");
this.dialogList=[]
this.open = false;
this.getList();
}else{
this.$message({ message: '审批失败!', type: 'warning' })
}
});
},
reasonDialog(reason){
this.reasonStr=reason
this.openReason = true;
this.title="原因说明";
},
cancelRecord(){
this.openReason = false;
},
/** 导出按钮操作 */
handleExport() {
this.download('system/dict/type/export', {
...this.queryParams
}, `type_${new Date().getTime()}.xlsx`)
},
}
};
</script>