<template>
|
<div>
|
<div class="bg-white border-bottom pt-4 pb-4 px-4">
|
<!-- <h4 class="font-weight-bold py-2 mb-2">
|
<router-link to="/">
|
<span class="text-muted font-weight-light">考勤管理 /</span>
|
</router-link>
|
考勤报表
|
</h4>-->
|
<div class="flex-row-between title-box">
|
<div class="flex-row-left">
|
<div
|
v-if="$route.query.isShow=== 'true'"
|
class="grid-content bg-purple mr10"
|
style="width: 100px;"
|
>
|
<Select v-model="gradesValue" @change="selectClass()" placeholder="年级">
|
<Option
|
v-for="item in gradeDate"
|
:key="item.value"
|
:label="item.name"
|
:value="item.id"
|
></Option>
|
</Select>
|
</div>
|
<div
|
v-if="$route.query.isShow=== 'true'"
|
class="grid-content bg-purple mr10"
|
style="width: 100px;"
|
>
|
<Select
|
v-model="classValue"
|
:disabled="classDis"
|
@change="queryList()"
|
placeholder="班级"
|
>
|
<Option
|
v-for="item in classDate"
|
:key="item.value"
|
:label="item.name"
|
:value="item.id"
|
></Option>
|
</Select>
|
</div>
|
</div>
|
<div class="text-center">
|
<el-date-picker
|
style="width:120px"
|
v-model="selectMonth"
|
@change="queryList"
|
:clearable="false"
|
value-format="yyyy-MM"
|
format="yyyy-MM"
|
type="month"
|
placeholder="选择年月"
|
></el-date-picker>
|
<a style="color:#666;font-size:20px">考勤表</a>
|
</div>
|
<div>
|
<fButton
|
type="default"
|
@click.native="exportExcel"
|
authority="sys:attendance:export"
|
class="pl-6 pr-6"
|
>导出报表</fButton>
|
<!-- <b-btn @click="exportExcel" class="pl-6 pr-6" variant="default">导出报表</b-btn> -->
|
<b-button variant="default" class="pl-4 pr-4" @click="$router.push({path:'/'})">关闭</b-button>
|
</div>
|
</div>
|
</div>
|
<b-card class="mx-4 mt-4">
|
<Table
|
:data="tableDate"
|
height="70vh"
|
id="out-table"
|
:border="true"
|
:fit="true"
|
style="width:100%;mso-number-format:'\@'"
|
>
|
<TableColumn type="index" width="50" label="序号"></TableColumn>
|
<TableColumn label="姓名" width="70" property="perName" style="mso-number-format:'\@';">
|
<!-- <template slot-scope="{row}">{{row.perName +' ' || '- -'}}</template> -->
|
<template
|
slot-scope="{row}"
|
>{{isNaN(parseInt(row.perName))?row.perName:'身份证:'+row.perName}}</template>
|
</TableColumn>
|
<TableColumn
|
v-for="item in countDays"
|
:key="item"
|
:label="item+''"
|
width="50"
|
property="total.label"
|
>
|
<template
|
slot-scope="scope"
|
>{{scope.row.totalList[item-1]&&scope.row.totalList[item-1].detail?scope.row.totalList[item-1].detail:''}}</template>
|
</TableColumn>
|
<TableColumn label="出勤" width="50" property="attendValue" id="attendance"></TableColumn>
|
<TableColumn label="迟到" width="50" property="lateValue" id="late"></TableColumn>
|
<TableColumn label="早退" width="50" property="leaveEarlyValue" id="leaveEarly"></TableColumn>
|
</Table>
|
</b-card>
|
</div>
|
</template>
|
|
<script>
|
import FileSaver from 'file-saver'
|
import XLSX from 'xlsx'
|
import { queryGrads } from '@/server/common.js'
|
import {
|
Select,
|
Col,
|
Row,
|
Option,
|
Button,
|
Table,
|
TableColumn,
|
DatePicker
|
} from 'element-ui'
|
|
import { getExportList } from '@/server/models/export.js'
|
export default {
|
props: ['isTeacher'],
|
data() {
|
return {
|
/** 班级禁用 */
|
classDis: true,
|
/** 查询班级年级的参数变量 */
|
typeG: 600,
|
typeC: 700,
|
orgid: this.$store.getters.basicUserInfo.orgId,
|
currentId: this.$store.getters.basicUserInfo.officeId,
|
/** */
|
gradeDate: [
|
{
|
id: 'all',
|
name: '全部'
|
}
|
],
|
classDate: [
|
{
|
id: 'all',
|
name: '全部'
|
}
|
],
|
tableDate: [],
|
gradesValue: '',
|
classValue: '',
|
identity: '',
|
selectMonth: this.$moment(new Date()).format('YYYY-MM'),
|
countDays: 0
|
}
|
},
|
methods: {
|
exportExcel() {
|
/* generate workbook object from table */
|
var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
|
/* get binary string as output */
|
var wbout = XLSX.write(wb, {
|
bookType: 'xlsx',
|
bookSST: true,
|
type: 'array'
|
})
|
try {
|
FileSaver.saveAs(
|
new Blob([wbout], { type: 'application/octet-stream' }),
|
'考勤.xlsx'
|
)
|
} catch (e) {
|
if (typeof console !== 'undefined') console.log(e, wbout)
|
}
|
return wbout
|
},
|
async queryList() {
|
// console.log(this.selectMonth + ' month')
|
// console.log(this.$moment(this.selectMonth).month() + ' m')
|
// console.log(this.$moment(this.selectMonth).year() + ' y')
|
|
let month = this.$moment(this.selectMonth).month() + 1
|
let year = this.$moment(this.selectMonth).year()
|
this.countDays = this.getDaysInOneMonth(year, month)
|
// console.log(this.countDays)
|
// console.log(this.classValue)
|
// console.log(this.gradeValue)
|
let json = {
|
mouthDate: this.selectMonth,
|
gradeValue: this.gradesValue,
|
classValue: this.classValue,
|
identity: this.$route.query.identity,
|
days: this.countDays
|
}
|
/* 保存拼接 */
|
// json.authorizationSystem = ',' + json.authorizationSystem + ','
|
let res = await getExportList(json)
|
if (res && res.data) {
|
console.log(res.data + ' res ')
|
this.tableDate = res.data
|
} else {
|
this.$toast({
|
message: res.msg ? res.msg : '报错了',
|
type: 'error'
|
})
|
}
|
},
|
getDaysInOneMonth(year, month) {
|
month = parseInt(month, 10)
|
var d = new Date(year, month, 0)
|
return d.getDate()
|
},
|
/** 选择年级，同时让班级根据年级获取数据 */
|
selectGrad() {
|
let json = {
|
orgid: this.orgid,
|
type: this.typeG,
|
currentId: this.currentId
|
}
|
this.queryGrads(json)
|
},
|
async queryGrads(json) {
|
let res = await queryGrads(json)
|
this.gradeDate = this.gradeDate.concat(res)
|
console.log(this.gradeDate, '学生考勤导出')
|
},
|
selectClass() {
|
this.classDis = false
|
this.classes = [
|
{
|
id: 'all',
|
name: '全部'
|
}
|
]
|
this.classValue = ''
|
let json = {
|
type: this.typeC,
|
orgid: this.orgid,
|
currentId: this.gradesValue
|
}
|
this.queryClass(json)
|
this.queryList()
|
},
|
async queryClass(json) {
|
let res = await queryGrads(json)
|
// console.log(res)
|
this.classDate = this.classDate.concat(res)
|
}
|
},
|
watch: {
|
gradesValue(newVal, oldVal) {
|
console.log(newVal, 'newVal', oldVal, 'oldVal')
|
if (newVal !== oldVal) {
|
if (newVal === 'all') {
|
this.classDis = true
|
} else {
|
this.classDis = false
|
}
|
}
|
}
|
},
|
created() {
|
this.queryList()
|
this.selectGrad()
|
},
|
components: {
|
Select,
|
Col,
|
Row,
|
Option,
|
Button,
|
Table,
|
TableColumn,
|
elDatePicker: DatePicker
|
}
|
}
|
</script>
|
<style scope>
|
.has-gutter th {
|
background: #f4fcff;
|
}
|
</style>
|
