打卡记录导出excel带颜色
This commit is contained in:
parent
717bff01c8
commit
ab88bc38ee
|
|
@ -14,6 +14,7 @@
|
|||
"codemirror": "5.65.5",
|
||||
"core-js": "3.22.8",
|
||||
"cropperjs": "1.5.12",
|
||||
"crypto-browserify": "^3.12.0",
|
||||
"crypto-js": "4.1.1",
|
||||
"d3": "^7.6.1",
|
||||
"dagre": "^0.8.5",
|
||||
|
|
@ -34,7 +35,8 @@
|
|||
"vuex": "4.0.2",
|
||||
"xgplayer": "2.31.6",
|
||||
"xgplayer-hls": "2.5.2",
|
||||
"xlsx": "^0.18.5"
|
||||
"xlsx": "^0.18.5",
|
||||
"xlsx-style": "^0.8.13"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.18.2",
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<script type="text/javascript">
|
||||
document.write("<script src='config.js?"+new Date().getTime()+"'><\/script>");
|
||||
</script>
|
||||
<script type="text/javascript" src="./xlsx.full.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -90,8 +90,10 @@
|
|||
</el-table-column> -->
|
||||
<el-table-column label="考勤推测">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.exception_type==10" type="warning" effect="dark">在岗时间短</el-tag>
|
||||
<el-tag v-if="scope.row.exception_type==20" type="danger" effect="dark">在岗时间长</el-tag>
|
||||
<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>
|
||||
|
|
@ -102,6 +104,7 @@
|
|||
<script>
|
||||
import config from "@/config"
|
||||
import * as XLSX2 from "xlsx";
|
||||
import * as XLSX from "xlsx-style";
|
||||
import { fill } from "lodash";
|
||||
export default {
|
||||
name: "clock_record",
|
||||
|
|
@ -214,13 +217,10 @@
|
|||
this.dLoading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
let days = new Date(this.query.year, this.query.month , 0).getDate();
|
||||
let weekList = ['姓名','星期'],daysList=['姓名','日期'],titleData = [];
|
||||
for(var i = 1;i<= days;i++){
|
||||
let weekNum = new Date(this.query.year+'-'+this.query.month+'-'+i).getDay();
|
||||
// debugger;
|
||||
// console.log(weekNum)
|
||||
let week=that.getDayWeek(weekNum)
|
||||
daysList.push(i);
|
||||
weekList.push(week);
|
||||
|
|
@ -259,9 +259,9 @@
|
|||
let dateInd = new Date(recordList[j].create_time).getDate();
|
||||
let dateIndex = parseInt(dateInd);
|
||||
if(recordList[j].type==10){
|
||||
rowData1[dateIndex+1] = recordList[j].create_time.substring(11,16);
|
||||
rowData1[dateIndex+1] = recordList[j].create_time.substring(11,16)+'&'+recordList[j].exception_type;
|
||||
}else{
|
||||
rowData2[dateIndex+1] = recordList[j].create_time.substring(11,16);
|
||||
rowData2[dateIndex+1] = recordList[j].create_time.substring(11,16)+'&'+recordList[j].exception_type;
|
||||
}
|
||||
}
|
||||
tableData.push(rowData1);
|
||||
|
|
@ -269,31 +269,92 @@
|
|||
}
|
||||
let ws = XLSX2.utils.aoa_to_sheet(tableData);
|
||||
let wb = XLSX2.utils.book_new();
|
||||
|
||||
//字体样式
|
||||
// const font = {
|
||||
// name: '宋体',
|
||||
// sz: 12,
|
||||
// bold: true,
|
||||
// color: { rgb: '00000000' },
|
||||
// }
|
||||
//设置文字居中
|
||||
// const alignment = {
|
||||
// horizontal: 'center',
|
||||
// vertical: 'center',
|
||||
// }
|
||||
// ws['B1'].s = {
|
||||
// font,
|
||||
// alignment,
|
||||
// fill:{
|
||||
// bgColor:{
|
||||
// indexed:64
|
||||
// },
|
||||
// fgColor:{
|
||||
// rgb:'#FFF000'
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
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 } },
|
||||
|
|
@ -302,12 +363,28 @@
|
|||
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'); // 保存的文件名
|
||||
// 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();
|
||||
});
|
||||
|
|
@ -316,6 +393,28 @@
|
|||
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:
|
||||
|
|
@ -359,3 +458,36 @@
|
|||
},
|
||||
};
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -71,6 +71,16 @@ module.exports = defineConfig({
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
resolve:{
|
||||
fallback:{
|
||||
fs:false,
|
||||
crypto: require.resolve("crypto-browserify"),
|
||||
stream: false,
|
||||
}
|
||||
},
|
||||
externals:{
|
||||
'./cptable':'var cptable'
|
||||
}
|
||||
},
|
||||
pluginOptions: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue