账号信息添加打卡记录
This commit is contained in:
parent
0b4a4cdd92
commit
0d2250d417
|
|
@ -69,13 +69,6 @@
|
|||
<span v-if="scope.row.employee">{{scope.row.employee_.belong_dept_name}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="打卡类型" prop="number">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.type==10 || scope.row.type==20">
|
||||
<el-tag :type="type_[scope.row.type].color">{{type_[scope.row.type].label}}</el-tag>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="触发形式" prop="type">
|
||||
<template #default="scope">
|
||||
{{trigger_[scope.row.trigger]}}--
|
||||
|
|
@ -92,6 +85,10 @@
|
|||
</el-table-column> -->
|
||||
<el-table-column label="考勤推测">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.type==10 || scope.row.type==20">
|
||||
<el-tag :type="type_[scope.row.type].color">{{type_[scope.row.type].label}}</el-tag>
|
||||
</span>
|
||||
<span v-if="(scope.row.type==10 || scope.row.type==20)&&scope.row.exception_type!==null">-</span>
|
||||
<span v-if="scope.row.exception_type==10" class="nomalState type1">在岗时间短</span>
|
||||
<span v-if="scope.row.exception_type==20" class="nomalState type2">在岗时间长</span>
|
||||
<span v-if="scope.row.exception_type==30" class="nomalState type3">缺卡</span>
|
||||
|
|
@ -191,8 +188,6 @@
|
|||
that.cLoading = false;
|
||||
that.ElLoading.close();
|
||||
let urls = config.API_URL.slice(0,-4)+res.path;
|
||||
console.log(urls)
|
||||
|
||||
window.open(urls, "_blank");
|
||||
}).catch(e=>{
|
||||
that.cLoading = false;
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@ export default {
|
|||
account: defineAsyncComponent(() => import("./user/account")),
|
||||
seting: defineAsyncComponent(() => import("./user/seting")),
|
||||
pushSettings: defineAsyncComponent(() => import("./user/pushSettings")),
|
||||
clockRecord: defineAsyncComponent(() => import("./user/clock_record")),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -82,6 +83,11 @@ export default {
|
|||
title: "修改密码",
|
||||
component: "pushSettings",
|
||||
},
|
||||
{
|
||||
icon: "el-icon-platform",
|
||||
title: "打卡记录",
|
||||
component: "clockRecord",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -0,0 +1,455 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div class="left-panel">
|
||||
<el-date-picker
|
||||
v-model="monthV"
|
||||
type="month"
|
||||
style="margin-left:4px"
|
||||
placeholder="选择月份"
|
||||
@change="handleQuery"
|
||||
/>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<div class="right-panel-search">
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading = 'cLoading'
|
||||
icon="el-icon-download"
|
||||
@click="exportExcel"
|
||||
>下载记录</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading = 'dLoading'
|
||||
icon="el-icon-download"
|
||||
@click="exportList"
|
||||
>下载统计</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<el-table
|
||||
ref="table"
|
||||
:data="tableDaata"
|
||||
row-key="id"
|
||||
stripe
|
||||
>
|
||||
<el-table-column label="人员类型" prop="employee">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.employee">{{epOptions[scope.row.employee_.type]}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="人员" prop="employee">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.employee">{{scope.row.employee_.name}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="所属部门" prop="employee">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.employee">{{scope.row.employee_.belong_dept_name}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="触发形式" prop="type">
|
||||
<template #default="scope">
|
||||
{{trigger_[scope.row.trigger]}}--
|
||||
<span v-if="scope.row.detail">{{scope.row.detail.deviceName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="考勤推测">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.type==10 || scope.row.type==20">
|
||||
<el-tag :type="type_[scope.row.type].color">{{type_[scope.row.type].label}}</el-tag>
|
||||
</span>
|
||||
<span v-if="(scope.row.type==10 || scope.row.type==20)&&scope.row.exception_type!==null">-</span>
|
||||
<span v-if="scope.row.exception_type==10" class="nomalState type1">在岗时间短</span>
|
||||
<span v-if="scope.row.exception_type==20" class="nomalState type2">在岗时间长</span>
|
||||
<span v-if="scope.row.exception_type==30" class="nomalState type3">缺卡</span>
|
||||
<span v-if="scope.row.exception_type==40" class="nomalState type4">加班</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="打卡时间" prop="create_time"></el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
:small="true"
|
||||
:total="dataTotal"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:page-size="query.page_size"
|
||||
:page-sizes="[20, 50, 100, 200]" v-model:currentPage="query.page"
|
||||
@current-change="getList" @update:page-size="getList"></el-pagination>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
<script>
|
||||
import config from "@/config"
|
||||
import * as XLSX2 from "xlsx";
|
||||
import * as XLSX from "xlsx-style";
|
||||
export default {
|
||||
name: "clock_record",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
userForm:{},
|
||||
tableData:[],
|
||||
monthV: null,
|
||||
query: {
|
||||
page:1,
|
||||
page_size:20,
|
||||
year:'',
|
||||
month:'',
|
||||
employee:''
|
||||
},
|
||||
dataTotal:0,
|
||||
selection: [],
|
||||
type_:{
|
||||
10: {"label": "上班打卡", "color": ""},
|
||||
20: {"label": "下班打卡", "color": "success"},
|
||||
},
|
||||
epOptions:{
|
||||
"employee": "正式员工",
|
||||
"remployee": "相关方"
|
||||
},
|
||||
trigger_:{
|
||||
"door": "门禁",
|
||||
"location": "定位"
|
||||
},
|
||||
tableDaata:[],
|
||||
excelName:'',
|
||||
weekList : ['姓名','星期'],
|
||||
daysList:['姓名','日期'],
|
||||
dLoading: false,
|
||||
cLoading:false,
|
||||
ElLoading:null,
|
||||
deptSearch:{},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getemployee();
|
||||
this.ElLoading =null;
|
||||
},
|
||||
methods: {
|
||||
handleQuery(){
|
||||
if(this.monthV){
|
||||
this.query.year = this.monthV.getFullYear();
|
||||
this.query.month = this.monthV.getMonth() + 1;
|
||||
}else{
|
||||
this.query.year = null;
|
||||
this.query.month = null;
|
||||
}
|
||||
this.getList();
|
||||
},
|
||||
getemployee() {
|
||||
let that = this;
|
||||
that.$API.hrm.employee.read.req().then((res) => {
|
||||
that.userForm = res;
|
||||
that.query.employee = res.id;
|
||||
that.getList();
|
||||
});
|
||||
},
|
||||
getList(){
|
||||
let that = this;
|
||||
that.$API.hrm.clock_record.list.req(that.query)
|
||||
.then(res=>{
|
||||
that.tableDaata = res.results;
|
||||
that.dataTotal = res.count;
|
||||
})
|
||||
},
|
||||
exportExcel(){
|
||||
let that = this;
|
||||
if(that.query.year!=undefined &&that.query.year!=null && that.query.month!=undefined&& that.query.month!=null){
|
||||
}else{
|
||||
that.$message.warning("请选择月份后导出")
|
||||
that.cLoading = false;
|
||||
return;
|
||||
}
|
||||
if(that.monthV){
|
||||
that.query.year = that.monthV.getFullYear();
|
||||
that.query.month = that.monthV.getMonth() + 1;
|
||||
}else{
|
||||
that.query.year = null;
|
||||
that.query.month = null;
|
||||
}
|
||||
that.cLoading = true;
|
||||
that.ElLoading = this.$loading({
|
||||
lock: true,
|
||||
text: '数据请求中，请稍后...',
|
||||
background: 'rgba(0, 0, 0, 0)',
|
||||
})
|
||||
that.$API.hrm.clock_record.export_excel.req(that.query)
|
||||
.then(res=>{
|
||||
that.cLoading = false;
|
||||
that.ElLoading.close();
|
||||
let urls = config.API_URL.slice(0,-4)+res.path;
|
||||
console.log(urls)
|
||||
|
||||
window.open(urls, "_blank");
|
||||
}).catch(e=>{
|
||||
that.cLoading = false;
|
||||
that.ElLoading.close();
|
||||
})
|
||||
},
|
||||
//循环调用的接口
|
||||
getOneData(id){
|
||||
let that = this;
|
||||
return new Promise((resolve,reject)=>{
|
||||
that.$API.hrm.clock_record.list.req({page:1,page_size:499,type__in:'10,20',year:that.query.year,month:that.query.month,employee:id})
|
||||
.then(res=>{
|
||||
resolve(res.results)
|
||||
})
|
||||
})
|
||||
},
|
||||
exportList(){
|
||||
let that = this;
|
||||
that.dLoading = true;
|
||||
if(that.query.year!=undefined &&that.query.year!=null && that.query.month!=undefined&& that.query.month!=null){
|
||||
}else{
|
||||
that.$message.warning("请选择月份后导出")
|
||||
that.dLoading = false;
|
||||
return;
|
||||
}
|
||||
let days = new Date(that.query.year, that.query.month , 0).getDate();
|
||||
let weekList = ['姓名','星期'],daysList=['姓名','日期'],titleData = [];
|
||||
for(var i = 1;i<= days;i++){
|
||||
let weekNum = new Date(that.query.year+'-'+that.query.month+'-'+i).getDay();
|
||||
let week=that.getDayWeek(weekNum)
|
||||
daysList.push(i);
|
||||
weekList.push(week);
|
||||
}
|
||||
let chartName = that.userForm.name+that.query.year+'年'+that.query.month+'月考勤统计表';
|
||||
titleData.push(chartName)
|
||||
let tableData = [];
|
||||
tableData.push(titleData)
|
||||
tableData.push(weekList)
|
||||
tableData.push(daysList)
|
||||
that.ElLoading = that.$loading({
|
||||
lock: true,
|
||||
text: '数据请求中，请稍后...',
|
||||
background: 'rgba(0, 0, 0, 0)',
|
||||
})
|
||||
let rowData1 = [],rowData2=[];
|
||||
rowData1 = [
|
||||
that.userForm.name,
|
||||
'上班打卡',
|
||||
]
|
||||
rowData2 = [
|
||||
that.userForm.name,
|
||||
'下班打卡',
|
||||
]
|
||||
let query = that.query;
|
||||
query.page_size = 499;
|
||||
query.type__in = '10,20';
|
||||
that.$API.hrm.clock_record.list.req(query)
|
||||
.then(res=>{
|
||||
let recordList = res.results;
|
||||
for(let i=0;i<recordList.length;i++){
|
||||
let dateInd = new Date(recordList[i].create_time).getDate();
|
||||
let dateIndex = parseInt(dateInd);
|
||||
if(recordList[i].type==10){
|
||||
rowData1[dateIndex+1] = recordList[i].create_time.substring(11,16)+'&'+recordList[i].exception_type;
|
||||
}else{
|
||||
rowData2[dateIndex+1] = recordList[i].create_time.substring(11,16)+'&'+recordList[i].exception_type;
|
||||
}
|
||||
}
|
||||
tableData.push(rowData1);
|
||||
tableData.push(rowData2);
|
||||
let ws = XLSX2.utils.aoa_to_sheet(tableData);
|
||||
let wb = XLSX2.utils.book_new();
|
||||
ws['!freeze'] = {
|
||||
xSplit: "1", //冻结列
|
||||
ySplit: "1", //冻结行
|
||||
topLeftCell: "B2", //在未冻结区域的左上角显示的单元格，默认为第一个未冻结的单元格
|
||||
state: "frozen"
|
||||
}
|
||||
for(let key in ws){
|
||||
if(key.indexOf('!')!==0){
|
||||
if(key==='A1'){
|
||||
ws[key].s = {
|
||||
font: {
|
||||
sz: "12",
|
||||
bold: true
|
||||
},
|
||||
alignment: {
|
||||
horizontal: "center", vertical: "center"
|
||||
},
|
||||
fill: {
|
||||
bgColor: { rgb: "FFFFAA00" },
|
||||
fgColor: { rgb: "FFFFAA00" }
|
||||
}
|
||||
};
|
||||
}else{
|
||||
let cal = ws[key]['v']+'';
|
||||
let type = null;
|
||||
if(cal.indexOf('&')>-1){
|
||||
ws[key]['v'] = cal.split('&')[0]
|
||||
type = cal.split('&')[1];
|
||||
}
|
||||
if(type!==null&&type!=='null'){
|
||||
console.log('type:'+type)
|
||||
if(type==='10'){//在岗时间短-----黄色
|
||||
ws[key].s = {
|
||||
font: {sz: 10},
|
||||
alignment: { horizontal: 'center', vertical: 'center' },
|
||||
fill: {
|
||||
bgColor: { rgb: "F8DD4E" },
|
||||
fgColor: { rgb: "F8DD4E" },
|
||||
}
|
||||
};
|
||||
}else if(type==='20'){//在岗时间长----红色
|
||||
ws[key]['s'] = {
|
||||
font: {
|
||||
sz: 10,
|
||||
},
|
||||
alignment: { horizontal: 'center', vertical: 'center'},
|
||||
fill: {
|
||||
bgColor: { rgb: "FF0000" },
|
||||
fgColor: { rgb: "FF0000" }
|
||||
}
|
||||
};
|
||||
}else if(type==='30'){//缺卡-----橙色
|
||||
ws[key]['s'] = {
|
||||
font: {
|
||||
sz: 10,
|
||||
},
|
||||
alignment: { horizontal: 'center', vertical: 'center'},
|
||||
fill: {
|
||||
bgColor: { rgb: "FA8435" },
|
||||
fgColor: { rgb: "FA8435" }
|
||||
}
|
||||
};
|
||||
}else if(type==='40'){//加班---蓝色
|
||||
ws[key]['s'] = {
|
||||
font: {
|
||||
sz: 10,
|
||||
},
|
||||
alignment: { horizontal: 'center', vertical: 'center' },
|
||||
fill: {
|
||||
bgColor: { rgb: "44CEF6" },
|
||||
fgColor: { rgb: "44CEF6" }
|
||||
}
|
||||
};
|
||||
}
|
||||
}else{//正常--无色
|
||||
ws[key]['s'] = {
|
||||
font: {
|
||||
sz: 10,
|
||||
},
|
||||
alignment: { horizontal: 'center', vertical: 'center'},
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log(ws)
|
||||
// s 意为 start ，即开始的单元格//r 是 row ，表示行号，从 0 计起//c 是 col ，表示列号，从 0 计起
|
||||
let cNumber = daysList.length-1;
|
||||
let merge = [{ s: { r: 0, c: 0 }, e: { r: 0, c:cNumber } }];//{ s: { r: 0, c: 0 }, e: { r: 1, c: 0 } },
|
||||
for(let i = 1;i<tableData.length;i++){
|
||||
merge.push({ s: { r: i, c: 0 }, e: { r: i+1, c: 0 } })
|
||||
i++
|
||||
}
|
||||
ws['!merges'] = merge;
|
||||
|
||||
let closList = new Array(31).fill({wch: 5});
|
||||
closList.unshift({wch:8})
|
||||
closList.unshift({wch:10})
|
||||
ws['!cols'] = closList;
|
||||
let rows = new Array(500).fill({hpx: 15});
|
||||
rows.unshift({hpx:20})
|
||||
ws['!rows'] = rows; // 添加到sheet中
|
||||
|
||||
XLSX2.utils.book_append_sheet(wb, ws, chartName); // 工作簿名称
|
||||
// XLSX2.writeFile(wb, chartName+'.xlsx'); // 保存的文件名
|
||||
var wopts = {
|
||||
bookType: 'xlsx', // 要生成的文件类型
|
||||
bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
|
||||
type: 'binary'
|
||||
};
|
||||
var wbout = XLSX.write(wb, wopts);
|
||||
var blob = new Blob([this.s2ab(wbout)], {
|
||||
type: "application/octet-stream"
|
||||
}); // 字符串转ArrayBuffer
|
||||
// 导出excel文件 如导出后的文件不能打开，请将后缀替换为 .xls
|
||||
this.openDownloadDialog(blob, chartName+`.xlsx`);
|
||||
that.dLoading = false;
|
||||
that.ElLoading.close();
|
||||
}).catch(e=>{
|
||||
that.dLoading = false;
|
||||
that.ElLoading.close();
|
||||
})
|
||||
},
|
||||
s2ab(s) {
|
||||
var buf = new ArrayBuffer(s.length);
|
||||
var view = new Uint8Array(buf);
|
||||
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
|
||||
return buf;
|
||||
},
|
||||
openDownloadDialog(url, saveName) {
|
||||
if (typeof url == 'object' && url instanceof Blob) {
|
||||
url = URL.createObjectURL(url); // 创建blob地址
|
||||
}
|
||||
var aLink = document.createElement('a');
|
||||
aLink.href = url;
|
||||
aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
|
||||
var event;
|
||||
if (window.MouseEvent) event = new MouseEvent('click');
|
||||
else {
|
||||
event = document.createEvent('MouseEvents');
|
||||
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
|
||||
}
|
||||
aLink.dispatchEvent(event);
|
||||
},
|
||||
getDayWeek(day){
|
||||
switch(day){
|
||||
case 0:
|
||||
return '日';
|
||||
case 1:
|
||||
return '一';
|
||||
case 2:
|
||||
return '二';
|
||||
case 3:
|
||||
return '三';
|
||||
case 4:
|
||||
return '四';
|
||||
case 5:
|
||||
return '五';
|
||||
case 6:
|
||||
return '六';
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.nomalState {
|
||||
font-size: 12px;
|
||||
padding: 0 9px;
|
||||
|
||||
height: 24px;
|
||||
line-height: 23px;
|
||||
border-radius: 5px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
.nomalState.type1{
|
||||
color: #F8DD4E;
|
||||
background-color: #f9f7e6;
|
||||
border: 1px solid #f3f0d5;
|
||||
}
|
||||
.nomalState.type2{
|
||||
color: #FF0000;
|
||||
background-color: #f7e7e7;
|
||||
border: 1px solid #fbe0e0;
|
||||
}
|
||||
.nomalState.type3{
|
||||
color: #FA8435;
|
||||
background-color: #fef6ed;
|
||||
border: 1px solid #fde9cc;
|
||||
}
|
||||
.nomalState.type4{
|
||||
color: #44CEF6;
|
||||
background-color: #f0f9fb;
|
||||
border: 1px solid #d2f9ff;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue