You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
2.5 KiB
100 lines
2.5 KiB
<template>
|
|
<div class="d-flex justify-space-between pa-3">
|
|
<div class="d-flex align-center">
|
|
<!-- <a-icon type="left" class="mr-1" @click="back" /> -->
|
|
考勤管理
|
|
</div>
|
|
<div class="d-flex align-center">
|
|
<a-button type="primary" size="small" class="mr-3" @click="openSearch"> 搜索 </a-button>
|
|
<a-button type="primary" size="small" @click="clockExport"> 导出 </a-button>
|
|
</div>
|
|
<div class="timer p-4" v-if="show">
|
|
<!-- 时间选择 -->
|
|
<TimePicker />
|
|
<!-- 成员选择 -->
|
|
<MemberPicker />
|
|
<div class="mt-5 flex justify-center">
|
|
<a-button size="small" class="mr-10" @click="show = false"> 取消 </a-button>
|
|
<a-button type="primary" size="small" @click="searchParam"> 确认 </a-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex';
|
|
import { clockExport } from '@/config/api';
|
|
import TimePicker from '@/components/TimePicker/TimePicker.vue';
|
|
import MemberPicker from '@/components/MemberPicker/MemberPicker.vue';
|
|
|
|
export default {
|
|
components: { TimePicker, MemberPicker },
|
|
data() {
|
|
return { show: false };
|
|
},
|
|
computed: mapState('home', ['projectId', 'startTime', 'endTime', 'memberIdList']),
|
|
methods: {
|
|
/**
|
|
* 导出考勤excel
|
|
* @param {string} projectId
|
|
* @param {array} memberIdList
|
|
* @param {string} startTime
|
|
* @param {string} endTime
|
|
*/
|
|
async clockExport() {
|
|
try {
|
|
const { projectId, memberIdList, startTime, endTime } = this;
|
|
const params = { param: { projectId, memberIdList, startTime, endTime } };
|
|
const res = await clockExport(params);
|
|
const { code, msg, data } = res.data;
|
|
if (code === 200) {
|
|
this.$message.success('导出成功');
|
|
window.location.href = data.url;
|
|
} else {
|
|
this.$message.error(msg || '导出失败');
|
|
throw msg;
|
|
}
|
|
} catch (error) {
|
|
throw error || '导出失败';
|
|
}
|
|
},
|
|
|
|
searchParam() {
|
|
this.$emit('searchParam');
|
|
this.show = false;
|
|
},
|
|
|
|
openSearch() {
|
|
this.show = !this.show;
|
|
},
|
|
|
|
// back() {
|
|
// window.location.href = document.referrer;
|
|
// window.history.back(-1);
|
|
// },
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.search {
|
|
border: none;
|
|
}
|
|
.timer {
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 49px;
|
|
left: 0;
|
|
background-color: #fff;
|
|
color: black;
|
|
box-shadow: 0px 0px 5px #ccc;
|
|
z-index: 1;
|
|
}
|
|
|
|
.export {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 2;
|
|
}
|
|
</style>
|
|
|