<template>
|
<div>
|
<div class="bg-white border-bottom pt-4 pb-4 px-4">
|
<h5 class="font-weight-bold py-2">
|
<router-link to="/">
|
<i class="ion ion-ios-arrow-dropleft f20 text-dark pr5"></i>
|
<span class="text-muted font-weight-light">考勤管理 /</span>
|
</router-link>考勤报表
|
</h5>
|
<div class="flex-row-between title-box">
|
<div class="flex-row-left">
|
<div class="grid-content bg-purple mr10" style="width: 100px;">
|
<Select
|
class="mr10"
|
v-model="identityVal"
|
placeholder="身份"
|
style="width:100%"
|
@change="queryList"
|
>
|
<Option
|
v-for="item in identity"
|
:key="item.value"
|
:label="item.lable"
|
:value="item.value"
|
></Option>
|
</Select>
|
</div>
|
<div class="grid-content bg-purple mr10" style="width: 200px;">
|
<select-org-tree
|
ref="tree"
|
:data="treeList"
|
:isOpenAll="false"
|
:highlightCurrent="false"
|
:showCheckbox="true"
|
@hide-change="({ids})=>{checkIds=ids;queryList()}"
|
/>
|
</div>
|
<div class="grid-content bg-purple mr10 pt10" style="width: 150px;">
|
<b-form-checkbox v-model="delFlag" @change="(val)=>{delFlag = val;queryList()}">已删除人员</b-form-checkbox>
|
</div>
|
</div>
|
<div class="text-center pr50">
|
<el-date-picker
|
style="width:120px"
|
v-model="selectMonth"
|
@change="queryList"
|
:clearable="false"
|
value-format="yyyy-MM"
|
format="yyyy-MM"
|
type="month"
|
placeholder="选择年月"
|
class="mr10"
|
></el-date-picker>
|
<a style="color:#666;font-size:20px" class="pr50 mr50">考勤表</a>
|
</div>
|
<div>
|
<!-- <fButton
|
type="default"
|
@click.native="exportExcel"
|
authority="sys:attendance:export"
|
class="pl-6 pr-6"
|
>导出</fButton>-->
|
<fTemplate authority="sys:attendance:export">
|
<span class="text-primary cursor-pointer font-weight-bolder" @click="exportExcel">
|
<i class="ion ion-md-open pr5"></i>
|
导出
|
</span>
|
</fTemplate>
|
<!-- <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="65vh"
|
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 { mapState } from 'vuex'
|
import FileSaver from 'file-saver'
|
import XLSX from 'xlsx'
|
import {
|
Select,
|
Col,
|
Row,
|
Option,
|
Button,
|
Table,
|
TableColumn,
|
DatePicker
|
} from 'element-ui'
|
import selectOrgTree from '../Home/components/SelectOrgTree'
|
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: '',
|
selectMonth: this.$moment(new Date()).format('YYYY-MM'),
|
countDays: 0,
|
/* 新增 变量 */
|
identityVal: '',
|
checkIds: [],
|
delFlag: true
|
}
|
},
|
computed: {
|
...mapState({
|
treeList: 'dictOrgTree',
|
identity: 'dictIdentity'
|
})
|
},
|
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() {
|
let month = this.$moment(this.selectMonth).month() + 1
|
let year = this.$moment(this.selectMonth).year()
|
this.countDays = this.getDaysInOneMonth(year, month)
|
let json = {
|
mouthDate: this.selectMonth,
|
gradeValue: this.gradesValue,
|
classValue: this.classValue,
|
identity: this.identityVal,
|
days: this.countDays,
|
delFlag: this.delFlag,
|
orgIds: this.checkIds.join(',')
|
}
|
/* 保存拼接 */
|
// json.authorizationSystem = ',' + json.authorizationSystem + ','
|
let res = await getExportList(json)
|
if (res && res.data) {
|
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.identityVal =
|
this.identity[0] && this.identity[0].value ? this.identity[0].value : ''
|
|
this.queryList()
|
},
|
components: {
|
Select,
|
Col,
|
Row,
|
Option,
|
Button,
|
Table,
|
TableColumn,
|
elDatePicker: DatePicker,
|
selectOrgTree
|
}
|
}
|
</script>
|
<style scope>
|
.has-gutter th {
|
background: #f4fcff;
|
}
|
</style>
|
