导出页部门筛选更改
This commit is contained in:
parent
cb4854d0f5
commit
f674e8e3e8
|
|
@ -6,10 +6,10 @@
|
|||
v-model="query.employee__belong_dept"
|
||||
ref="belongDept"
|
||||
:options="deptData" clearable
|
||||
placeholder="部门/单位"
|
||||
placeholder="相关方"
|
||||
@change="handleQuery"
|
||||
:show-all-levels="false"
|
||||
:props="{emitPath:false,checkStrictly: true}"
|
||||
:props="{emitPath:false}"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-model="monthV"
|
||||
|
|
@ -32,12 +32,18 @@
|
|||
icon="el-icon-search"
|
||||
@click="handleQuery"
|
||||
></el-button>
|
||||
<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>
|
||||
>下载统计</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-header>
|
||||
|
|
@ -87,149 +93,177 @@
|
|||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
<script>
|
||||
import * as XLSX2 from "xlsx";
|
||||
import { genTree } from "@/utils/verificate";
|
||||
import { fill } from "lodash";
|
||||
export default {
|
||||
name: "clock_record",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
apiObj: this.$API.hrm.clock_record.list,
|
||||
deptData: [],
|
||||
tableData:[],
|
||||
monthV: null,
|
||||
query: {},
|
||||
userList:[],
|
||||
selection: [],
|
||||
type_:{
|
||||
10: {"label": "上班打卡", "color": ""},
|
||||
20: {"label": "下班打卡", "color": "success"}
|
||||
},
|
||||
epOptions:{
|
||||
"employee": "正式员工",
|
||||
"remployee": "相关方"
|
||||
},
|
||||
trigger_:{
|
||||
"door": "门禁",
|
||||
"location": "定位"
|
||||
},
|
||||
excelName:'',
|
||||
weekList : ['姓名','星期'],
|
||||
daysList:['姓名','日期'],
|
||||
dLoading: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getDept();
|
||||
},
|
||||
methods: {
|
||||
async getDept() {
|
||||
let res = await this.$API.system.dept.list.req({ page: 0, type__in: 'dept,rparty' });
|
||||
this.deptData = genTree(res);
|
||||
<script>
|
||||
import config from "@/config"
|
||||
import * as XLSX2 from "xlsx";
|
||||
import { fill } from "lodash";
|
||||
export default {
|
||||
name: "clock_record",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
apiObj: this.$API.hrm.clock_record.list,
|
||||
deptData: [],
|
||||
tableData:[],
|
||||
monthV: null,
|
||||
query: {},
|
||||
userList:[],
|
||||
selection: [],
|
||||
type_:{
|
||||
10: {"label": "上班打卡", "color": ""},
|
||||
20: {"label": "下班打卡", "color": "success"}
|
||||
},
|
||||
epOptions:{
|
||||
"employee": "正式员工",
|
||||
"remployee": "相关方"
|
||||
},
|
||||
trigger_:{
|
||||
"door": "门禁",
|
||||
"location": "定位"
|
||||
},
|
||||
excelName:'',
|
||||
weekList : ['姓名','星期'],
|
||||
daysList:['姓名','日期'],
|
||||
dLoading: false,
|
||||
cLoading:false,
|
||||
ElLoading:null,
|
||||
deptSearch:{},
|
||||
};
|
||||
},
|
||||
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;
|
||||
}
|
||||
if(this.query.employee__belong_dept){
|
||||
let getCheckedNodes = this.$refs['belongDept'].getCheckedNodes()[0].data;
|
||||
this.excelName = getCheckedNodes.name;
|
||||
}
|
||||
this.$refs.table.queryData(this.query)
|
||||
mounted() {
|
||||
this.getDept();
|
||||
that.ElLoading =null;
|
||||
},
|
||||
exportExcel(){
|
||||
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.dLoading = true;
|
||||
this.$API.hrm.clock_record.export_excel
|
||||
.req(this.query)
|
||||
.then(res=>{
|
||||
window.open(res.path, "_blank");
|
||||
this.dLoading = false;
|
||||
}).catch(e=>{this.dLoading = false;})
|
||||
},
|
||||
//循环调用的接口
|
||||
getOneData(id){
|
||||
let that = this;
|
||||
return new Promise((resolve,reject)=>{
|
||||
that.$API.hrm.clock_record.list.req({page:1,page_size:400,year:that.query.year,month:that.query.month,employee:id})
|
||||
.then(res=>{
|
||||
resolve(res.results)
|
||||
methods: {
|
||||
async getDept() {
|
||||
let res = await this.$API.system.dept.list.req({ page: 0, type__in: 'dept,rparty' });
|
||||
this.deptData = this.genTree(res);
|
||||
},
|
||||
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;
|
||||
}
|
||||
if(this.query.employee__belong_dept){
|
||||
let getCheckedNodes = this.$refs['belongDept'].getCheckedNodes()[0].data;
|
||||
this.excelName = getCheckedNodes.name;
|
||||
}
|
||||
this.$refs.table.queryData(this.query)
|
||||
},
|
||||
exportExcel(){
|
||||
let that = this;
|
||||
if(that.query.employee__belong_dept!=undefined &&that.query.employee__belong_dept!=null &&
|
||||
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)',
|
||||
})
|
||||
})
|
||||
},
|
||||
exportList(){
|
||||
let that = this;
|
||||
this.dLoading = true;
|
||||
if(this.query.employee__belong_dept!=undefined &&this.query.employee__belong_dept!=null &&
|
||||
this.query.year!=undefined &&this.query.year!=null && this.query.month!=undefined&& this.query.month!=null){
|
||||
}else{
|
||||
this.$message.warning("请选择部门和月份后导出")
|
||||
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);
|
||||
}
|
||||
let chartName = this.excelName+that.query.year+'年'+that.query.month+'月考勤统计表';
|
||||
titleData.push(chartName)
|
||||
let tableData = [];
|
||||
tableData.push(titleData)
|
||||
tableData.push(weekList)
|
||||
tableData.push(daysList)
|
||||
that.$API.hrm.employee.list.req({page:1,page_size:999,belong_dept:that.query.employee__belong_dept})
|
||||
that.$API.hrm.clock_record.export_excel.req(that.query)
|
||||
.then(res=>{
|
||||
let promiseList = [];
|
||||
let rowData1 = [],rowData2=[];
|
||||
that.userList=res.results;
|
||||
that.userList.forEach ((item)=> {
|
||||
promiseList.push(that.getOneData(item.id))
|
||||
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:400,year:that.query.year,month:that.query.month,employee:id})
|
||||
.then(res=>{
|
||||
resolve(res.results)
|
||||
})
|
||||
Promise.all(promiseList).then(res=> {
|
||||
that.userList.forEach ((item,index)=> {
|
||||
let recordList = res[index];
|
||||
})
|
||||
},
|
||||
exportList(){
|
||||
let that = this;
|
||||
this.dLoading = true;
|
||||
if(this.query.employee__belong_dept!=undefined &&this.query.employee__belong_dept!=null &&
|
||||
this.query.year!=undefined &&this.query.year!=null && this.query.month!=undefined&& this.query.month!=null){
|
||||
}else{
|
||||
this.$message.warning("请选择部门和月份后导出")
|
||||
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);
|
||||
}
|
||||
let chartName = this.excelName+that.query.year+'年'+that.query.month+'月考勤统计表';
|
||||
titleData.push(chartName)
|
||||
let tableData = [];
|
||||
tableData.push(titleData)
|
||||
tableData.push(weekList)
|
||||
tableData.push(daysList)
|
||||
that.ElLoading = this.$loading({
|
||||
lock: true,
|
||||
text: '数据请求中，请稍后...',
|
||||
background: 'rgba(0, 0, 0, 0)',
|
||||
})
|
||||
that.$API.hrm.employee.list.req({page:1,page_size:999,belong_dept:that.query.employee__belong_dept})
|
||||
.then(res=>{
|
||||
let promiseList = [];
|
||||
let rowData1 = [],rowData2=[];
|
||||
that.userList=res.results;
|
||||
that.userList.forEach ((item)=> {
|
||||
promiseList.push(that.getOneData(item.id))
|
||||
})
|
||||
Promise.all(promiseList).then(res=> {
|
||||
for(let i=0;i<this.userList.length;i++){
|
||||
let recordList = res[i];
|
||||
rowData1 = [
|
||||
item.name,
|
||||
this.userList[i].name,
|
||||
'上班打卡',
|
||||
]
|
||||
rowData2 = [
|
||||
item.name,
|
||||
this.userList[i].name,
|
||||
'下班打卡',
|
||||
]
|
||||
recordList.forEach(recordItem=>{
|
||||
let dateInd = new Date(recordItem.create_time).getDate();
|
||||
let dateIndex = parseInt(dateInd);
|
||||
if(recordItem.type==10){
|
||||
rowData1[dateIndex+1] = '√';
|
||||
}else{
|
||||
rowData2[dateIndex+1] = '√';
|
||||
}
|
||||
})
|
||||
for(let j=0;j<recordList.length;j++){
|
||||
let dateInd = new Date(recordList[j].create_time).getDate();
|
||||
let dateIndex = parseInt(dateInd);
|
||||
if(recordList[j].type==10){
|
||||
rowData1[dateIndex+1] = '√';
|
||||
}else{
|
||||
rowData2[dateIndex+1] = '√';
|
||||
}
|
||||
}
|
||||
tableData.push(rowData1);
|
||||
tableData.push(rowData2);
|
||||
})
|
||||
}
|
||||
let ws = XLSX2.utils.aoa_to_sheet(tableData);
|
||||
let wb = XLSX2.utils.book_new();
|
||||
//字体样式
|
||||
//字体样式
|
||||
const font = {
|
||||
name: '宋体',
|
||||
sz: 12,
|
||||
|
|
@ -260,27 +294,53 @@ export default {
|
|||
XLSX2.utils.book_append_sheet(wb, ws, chartName); // 工作簿名称
|
||||
XLSX2.writeFile(wb, chartName+'.xlsx'); // 保存的文件名
|
||||
that.dLoading = false;
|
||||
});
|
||||
that.ElLoading.close();
|
||||
});
|
||||
}).catch(e=>{
|
||||
that.dLoading = false;
|
||||
that.ElLoading.close();
|
||||
})
|
||||
},
|
||||
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 '六';
|
||||
}
|
||||
},
|
||||
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 '六';
|
||||
}
|
||||
},
|
||||
genTree(data) {
|
||||
const result = [
|
||||
{id:'bumen',label:'部门',value:'bumen',children:[]},
|
||||
{id:'xiangguanfang',label:'相关方',value:'xiangguanfang',children:[]}
|
||||
]
|
||||
if (!Array.isArray(data)) {
|
||||
return result
|
||||
}
|
||||
data.forEach(item => {
|
||||
item.label = item.name
|
||||
if(item.fullname){
|
||||
item.label = item.fullname
|
||||
}
|
||||
item.value = item.id
|
||||
if(item.type==='dept'){
|
||||
result[0].children.push(item)
|
||||
}else{
|
||||
result[1].children.push(item)
|
||||
}
|
||||
})
|
||||
return result
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
clearable
|
||||
show-password
|
||||
:placeholder="$t('login.PWPlaceholder')"
|
||||
@keyup.enter="login"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-bottom: 10px">
|
||||
|
|
|
|||
Loading…
Reference in New Issue