dd_pc/src/views/ranking/log_rank.vue

<template>
	<div>
		<div class="all" v-loading="attendload">
			<div>
				<el-form :inline="true">
					<el-form-item label="人员">
						<el-select v-model="formData.employeeID" size="medium" multiple filterable collapse-tags placeholder="请选择员工">
							<el-option v-for="item in employee_map" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="时间">
						<el-date-picker
							style="width:290px"
							class="first-element-btn"
							:clearable="false"
							v-model="time_range"
							type="daterange"
							value-format="yyyy-MM-dd"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							:picker-options="instantPickerOptions"
							@change="onFilterChanged"
						></el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" plain @click="exportRanking">导出排名</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-table :data="all_integral_list" style="width: 100%" v-loading="loading">
				<el-table-column label="名次" width="100" align="center">
					<template slot-scope="scope">
						<img v-if="scope.row.rank === 1" src="@/assets/image/statistics_NO1.png" alt />
						<img v-if="scope.row.rank === 2" src="@/assets/image/statistics_NO2.png" alt />
						<img v-if="scope.row.rank === 3" src="@/assets/image/statistics_NO3.png" alt />
						<span v-if="scope.row.rank > 3">{{ scope.row.rank }}</span>
					</template>
				</el-table-column>
				<el-table-column label="姓名" align="left">
					<template slot-scope="scope">
						<div style="display:flex;">
							<userImage :user_name="scope.row.name" :img_url="scope.row.img_url" width="50px" height="50px"></userImage>
							<span style="line-height: 50px; padding-left: 10px;">{{ scope.row.name }}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="point" label="B分" align="left">
					<template slot-scope="scope">
						<b style="font-size:15px;color:#909399">{{ scope.row.point }}</b>
					</template>
				</el-table-column>
				<template slot="empty">
					<noData :content="checkingInGroup.length == 0 ? '请先开启钉钉考勤' : '暂无数据'"></noData>
				</template>
			</el-table>
			<center style="padding: 20px 0;">
				<el-pagination
					background
					@size-change="handleSizeChange1"
					@current-change="handleCurrentChange"
					:current-page="formData.page"
					:page-sizes="[10, 20, 50, 100]"
					layout="total, sizes, prev, pager, next"
					:page-size="pageLimit1"
					:total="total"
				></el-pagination>
			</center>
		</div>
		<!-- 导出弹窗 -->
		<el-dialog title="导出排名" :visible.sync="dialogVisible" width="730px">
			<div style="font-size:15px;margin:20px 0 20px 0;">系统将按以下已选条件导出对应的排名报表</div>
			<div v-loading="exportLoad">
				<el-form :inline="true">
					<el-form-item label="考勤组">
						<el-select v-model="exportData.group_id" @change="selectgroupId" filterable :clearable="false" placeholder="请选择考勤组">
							<el-option v-for="item in checkingInGroup" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="排名类型">
						<el-select v-model="exportData.event_type" style="width:150px" placeholder="请选择">
							<el-option v-for="(item, index) in event_type" :key="index" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="时间">
						<el-date-picker
							class="first-element-btn"
							:clearable="false"
							v-model="exportTime_range"
							type="daterange"
							value-format="yyyy-MM-dd"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							:picker-options="instantPickerOptions"
						></el-date-picker>
					</el-form-item>
				</el-form>
				<span class="dialog-footer" style="display:flex;justify-content: flex-end;">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="exportExcel">导 出</el-button>
				</span>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import noData from '@/components/noData';
export default {
	data() {
		return {
			employee_map: JSON.parse(localStorage.getItem('SET_EMPLOYEE_MAP')),
			exportLoad: false,
			dialogVisible: false,
			checkingInGroup: [],
			time_range:[],
			total: 0,
			dept_tree: [],
			dept_name: [],
			pageLimit1: 10,
			formData: {
				employeeID:'',
				group_id: '',
				page: 1,
				page_size: 10,
				event_type: 0
			},
			attendload: false,
			loading: false,
			all_integral_list: [],
			instantPickerOptions: {
				shortcuts: [
					{
						text: '本周',
						onClick(picker) {
							const now = new Date();
							const start = new Date();
							start.setTime(now.getTime() - (now.getDay() - 1) * 24 * 60 * 60 * 1000);
							now.setTime(start.getTime() + 6 * 24 * 60 * 60 * 1000 - 1000);
							picker.$emit('pick', [start, now]);
						}
					},
					{
						text: '上周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - (start.getDay() + 6) * 3600 * 1000 * 24);
							end.setTime(start.getTime() + 6 * 24 * 60 * 60 * 1000 - 1000);
							picker.$emit('pick', [start, end]);
						}
					},
					{
						text: '本月',
						onClick(picker) {
							const now = new Date();
							const startDate = new Date(now.getFullYear(), now.getMonth(), 1);
							const endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
							picker.$emit('pick', [startDate, endDate]);
						}
					},
					{
						text: '上月',
						onClick(picker) {
							const now = new Date();
							const startDate = new Date(now.getFullYear() - (now.getMonth() > 0 ? 0 : 1), (now.getMonth() + 11) % 12, 1);
							const endDate = new Date(now.getFullYear(), now.getMonth(), 0);
							picker.$emit('pick', [startDate, endDate]);
						}
					}
				]
			},
			exportData: {
				group_id: '',
				event_type: 0
			},
		};
	},
	components: { noData },
	watch: {

	},
	mounted() {
		this.getEmployeeList()
	},
	methods: {
		getEmployeeList() {
			this.$axios('get', '/api/employee/list', {}).then(res => {
				if (res.data.code == 1) {
					this.employee_map = res.data.data.list;
				}
			});
		},
		exportRanking() {
			if (this.checkingInGroup.length > 0) {
				this.exportData.group_id = this.checkingInGroup[0].id;
			}
			this.dialogVisible = true;
		},
		exportExcel() {
			window.open(
				process.env.VUE_APP_BASE_API +
					'api/download/groups_ranking/export?start_date=' +
					this.exportTime_range[0] +
					'&end_date=' +
					this.exportTime_range[1] +
					'&page=' +
					1 +
					'&page_size=' +
					2000 +
					'&group_id=' +
					this.exportData.group_id +
					'&event_type=' +
					this.exportData.event_type +
					'&employee_id=' +
					this.$getUserData().id,
				'_blank'
			);
		},
		selectgroupId() {
			this.get_all_integral();
		},
		onFilterChanged() {
			this.get_all_integral();
		},
		//分页
		handleSizeChange1(val) {
			this.pageLimit1 = val;
			this.formData.page_size = this.pageLimit1;
			this.get_all_integral();
		},
		handleCurrentChange(val) {
			this.formData.page = val;
			this.get_all_integral();
		},
		//请求数据
		get_all_integral() {
			let self = this;
			self.loading = true;
			let data = {
				group_id: this.formData.group_id,
				page: this.formData.page,
				page_size: this.formData.page_size,
				event_type: this.formData.event_type
			};
			data.start_date = this.time_range[0];
			data.end_date = this.time_range[1];
			this.$axios('post', '/api/ad/rank', data)
				.then(res => {
					if (res.data.code == 1) {
						self.all_integral_list = res.data.data.list;
						this.total = res.data.data.total;
					} else {
						self.$message.error(res.data.data.msg);
					}
				})
				.finally(() => {
					self.loading = false;
				});
		}
	}
};
</script>

<style scoped>
.el-date-editor.el-input {
	width: auto;
}
.date-picker-width {
	width: 145px !important;
}
.search ::v-deep .el-input-group__append:active {
	background: #26a2ff;
}
.search ::v-deep .el-input-group__append:active .el-icon-search {
	color: #fff;
}
</style>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
	padding: 0px 20px 30px;
}
</style>