导出页部门筛选更改

This commit is contained in:
shijing 2023-03-08 12:17:48 +08:00
parent cb4854d0f5
commit f674e8e3e8
2 changed files with 213 additions and 152 deletions

View File

@ -6,10 +6,10 @@
v-model="query.employee__belong_dept" v-model="query.employee__belong_dept"
ref="belongDept" ref="belongDept"
:options="deptData" clearable :options="deptData" clearable
placeholder="部门/单位" placeholder="相关方"
@change="handleQuery" @change="handleQuery"
:show-all-levels="false" :show-all-levels="false"
:props="{emitPath:false,checkStrictly: true}" :props="{emitPath:false}"
/> />
<el-date-picker <el-date-picker
v-model="monthV" v-model="monthV"
@ -32,12 +32,18 @@
icon="el-icon-search" icon="el-icon-search"
@click="handleQuery" @click="handleQuery"
></el-button> ></el-button>
<el-button
type="primary"
:loading = 'cLoading'
icon="el-icon-download"
@click="exportExcel"
>下载记录</el-button>
<el-button <el-button
type="primary" type="primary"
:loading = 'dLoading' :loading = 'dLoading'
icon="el-icon-download" icon="el-icon-download"
@click="exportList" @click="exportList"
></el-button> >下载统计</el-button>
</div> </div>
</div> </div>
</el-header> </el-header>
@ -87,149 +93,177 @@
</el-main> </el-main>
</el-container> </el-container>
</template> </template>
<script> <script>
import * as XLSX2 from "xlsx"; import config from "@/config"
import { genTree } from "@/utils/verificate"; import * as XLSX2 from "xlsx";
import { fill } from "lodash"; import { fill } from "lodash";
export default { export default {
name: "clock_record", name: "clock_record",
components: {}, components: {},
data() { data() {
return { return {
apiObj: this.$API.hrm.clock_record.list, apiObj: this.$API.hrm.clock_record.list,
deptData: [], deptData: [],
tableData:[], tableData:[],
monthV: null, monthV: null,
query: {}, query: {},
userList:[], userList:[],
selection: [], selection: [],
type_:{ type_:{
10: {"label": "上班打卡", "color": ""}, 10: {"label": "上班打卡", "color": ""},
20: {"label": "下班打卡", "color": "success"} 20: {"label": "下班打卡", "color": "success"}
}, },
epOptions:{ epOptions:{
"employee": "正式员工", "employee": "正式员工",
"remployee": "相关方" "remployee": "相关方"
}, },
trigger_:{ trigger_:{
"door": "门禁", "door": "门禁",
"location": "定位" "location": "定位"
}, },
excelName:'', excelName:'',
weekList : ['姓名','星期'], weekList : ['姓名','星期'],
daysList:['姓名','日期'], daysList:['姓名','日期'],
dLoading: false, dLoading: false,
}; cLoading:false,
}, ElLoading:null,
mounted() { deptSearch:{},
this.getDept(); };
},
methods: {
async getDept() {
let res = await this.$API.system.dept.list.req({ page: 0, type__in: 'dept,rparty' });
this.deptData = genTree(res);
}, },
handleQuery(){ mounted() {
if(this.monthV){ this.getDept();
this.query.year = this.monthV.getFullYear(); that.ElLoading =null;
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(){ methods: {
if(this.monthV){ async getDept() {
this.query.year = this.monthV.getFullYear(); let res = await this.$API.system.dept.list.req({ page: 0, type__in: 'dept,rparty' });
this.query.month = this.monthV.getMonth() + 1; this.deptData = this.genTree(res);
}else{ },
this.query.year = null; handleQuery(){
this.query.month = null; if(this.monthV){
} this.query.year = this.monthV.getFullYear();
this.dLoading = true; this.query.month = this.monthV.getMonth() + 1;
this.$API.hrm.clock_record.export_excel }else{
.req(this.query) this.query.year = null;
.then(res=>{ this.query.month = null;
window.open(res.path, "_blank"); }
this.dLoading = false; if(this.query.employee__belong_dept){
}).catch(e=>{this.dLoading = false;}) let getCheckedNodes = this.$refs['belongDept'].getCheckedNodes()[0].data;
}, this.excelName = getCheckedNodes.name;
// }
getOneData(id){ this.$refs.table.queryData(this.query)
let that = this; },
return new Promise((resolve,reject)=>{ exportExcel(){
that.$API.hrm.clock_record.list.req({page:1,page_size:400,year:that.query.year,month:that.query.month,employee:id}) let that = this;
.then(res=>{ if(that.query.employee__belong_dept!=undefined &&that.query.employee__belong_dept!=null &&
resolve(res.results) 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)
},
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})
.then(res=>{ .then(res=>{
let promiseList = []; that.cLoading = false;
let rowData1 = [],rowData2=[]; that.ElLoading.close();
that.userList=res.results; let urls = config.API_URL.slice(0,-4)+res.path;
that.userList.forEach ((item)=> { console.log(urls)
promiseList.push(that.getOneData(item.id))
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 = [ rowData1 = [
item.name, this.userList[i].name,
'上班打卡', '上班打卡',
] ]
rowData2 = [ rowData2 = [
item.name, this.userList[i].name,
'下班打卡', '下班打卡',
] ]
recordList.forEach(recordItem=>{ for(let j=0;j<recordList.length;j++){
let dateInd = new Date(recordItem.create_time).getDate(); let dateInd = new Date(recordList[j].create_time).getDate();
let dateIndex = parseInt(dateInd); let dateIndex = parseInt(dateInd);
if(recordItem.type==10){ if(recordList[j].type==10){
rowData1[dateIndex+1] = '√'; rowData1[dateIndex+1] = '√';
}else{ }else{
rowData2[dateIndex+1] = '√'; rowData2[dateIndex+1] = '√';
} }
}) }
tableData.push(rowData1); tableData.push(rowData1);
tableData.push(rowData2); tableData.push(rowData2);
}) }
let ws = XLSX2.utils.aoa_to_sheet(tableData); let ws = XLSX2.utils.aoa_to_sheet(tableData);
let wb = XLSX2.utils.book_new(); let wb = XLSX2.utils.book_new();
// //
const font = { const font = {
name: '宋体', name: '宋体',
sz: 12, sz: 12,
@ -260,27 +294,53 @@ export default {
XLSX2.utils.book_append_sheet(wb, ws, chartName); // 簿 XLSX2.utils.book_append_sheet(wb, ws, chartName); // 簿
XLSX2.writeFile(wb, chartName+'.xlsx'); // XLSX2.writeFile(wb, chartName+'.xlsx'); //
that.dLoading = false; that.dLoading = false;
}); that.ElLoading.close();
});
}).catch(e=>{
that.dLoading = false;
that.ElLoading.close();
}) })
}, },
getDayWeek(day){ getDayWeek(day){
switch(day){ switch(day){
case 0: case 0:
return '日'; return '日';
case 1: case 1:
return '一'; return '一';
case 2: case 2:
return '二'; return '二';
case 3: case 3:
return '三'; return '三';
case 4: case 4:
return '四'; return '四';
case 5: case 5:
return '五'; return '五';
case 6: case 6:
return '六'; 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> </script>

View File

@ -28,6 +28,7 @@
clearable clearable
show-password show-password
:placeholder="$t('login.PWPlaceholder')" :placeholder="$t('login.PWPlaceholder')"
@keyup.enter="login"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item style="margin-bottom: 10px"> <el-form-item style="margin-bottom: 10px">