dd_pc/src/views/ranking/attendance_rating.vue

<template>
	<div>
		<div class="all" v-loading="attendload">
			<div>
				<el-form :inline="true">
					<el-form-item label="考勤组">
						<el-select v-model="formData.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="formData.event_type" @change="selectgroupId" style="width:110px" 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
							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-button type="primary" plain @click="isUpdate=true">更新考勤数据</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 show-overflow-tooltip label="部门" align="left" min-width="120px" prop="deptName"></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="isUpdate" width="730px">
			<el-form>
				<el-form-item label="考勤组">
					  <el-radio-group v-model="update.type">
						<el-radio label="daily">更新某一天的考勤数据</el-radio>
						<el-radio label="monthly">更新某个月的考勤数据</el-radio>
					  </el-radio-group>
				</el-form-item>
				<el-form-item label="日" v-if="update.type=='daily'">
					<el-date-picker
					  v-model="update.target_date"
					  type="date"
					  value-format="yyyy-MM-dd"
					  :picker-options="pickerOptions"
					  placeholder="选择日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="月" v-else>
					<el-date-picker
					 value-format="yyyy-MM"
					 :picker-options="pickerOptions"
					  v-model="update.target_month"
					  type="month"
					  placeholder="选择月">
					</el-date-picker>
				</el-form-item>
			</el-form>
			<span class="dialog-footer" style="display:flex;justify-content: flex-end;">
				<el-button @click="isUpdate = false">取 消</el-button>
				<el-button type="primary" @click="saveUpdate">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 导出弹窗 -->
		<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>

export default {
	data() {
		return {
		  // 设置只能选择当前日期及之后的日期
		    pickerOptions: {
			  disabledDate(time) {
				return time.getTime() > Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的 
			  }
			},
			exportLoad: false,
			dialogVisible: false,
			checkingInGroup: [],
			event_type: [
				{ id: 0, name: '总分' },
				{ id: 1, name: '迟到' },
				{ id: 2, name: '早退' },
				{ id: 6, name: '准时打卡' },
				{ id: 20, name: '上班缺卡' },
				{ id: 21, name: '下班缺卡' },
				{ id: 16, name: '加班 ' },
				{ id: 10, name: '缺勤' }
			],
			attendload: false,
			loading: false,
			all_integral_list: null,
			Month_range: this.$moment().format('YYYY-MM'),
			time_range: [
				this.$moment()
					.startOf('month')
					.format('YYYY-MM-DD'),
				this.$moment()
					.endOf('month')
					.format('YYYY-MM-DD')
			],
			formData: {
				group_id: '',
				// date_type: 3,
				page: 1,
				page_size: 10,
				event_type: 0
			},
			exportMonth_range: this.$moment().format('YYYY-MM'),
			exportTime_range: [
				this.$moment()
					.startOf('month')
					.format('YYYY-MM-DD'),
				this.$moment()
					.endOf('month')
					.format('YYYY-MM-DD')
			],
			exportData: {
				group_id: '',
				event_type: 0
			},
			total: 0,
			dept_tree: [],
			dept_name: [],
			pageLimit1: 10,
			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]);
						}
					}
				]
			},
			// 更新考勤数据
			isUpdate:false,
			update:{
				type:'daily',
				target_date:this.$moment().subtract(1, "days").format("YYYY-MM-DD"),
				target_month:this.$moment().format("YYYY-MM"),
			}
		};
	},
	
	watch:{
		isUpdate(val){
			if(!val){
				this.update={
					type:'daily',
					target_date:this.$moment().subtract(1, "days").format("YYYY-MM-DD"),
					target_month:this.$moment().format("YYYY-MM"),
				}
			}
		}
	},
	mounted() {
		this.checkingIn_group(); //考勤组
	},
	methods: {
		saveUpdate(){
			let update=this.update
			let data={type:update.type};
			if(update.type=='daily'){
				if(!update.target_date){
					this.$message.error('请选择日期');
					return false
				}
				data.target_date=update.target_date
			}else{
				if(!update.target_month){
					this.$message.error('请选择月份');
					return false
				}
				data.target_month=update.target_month
			}
			this.$axios('post','/api/ding/ad_sync',data).then(res => {
				if (res.data.code == 1) {
					this.$message.success('已更新');
					this.isUpdate=false;
				}
			})
		},
		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();
		},
		//请求数据
		checkingIn_group() {
			this.attendload = true;
			let self = this;
			let params = {
				page: 1,
				page_size: 2000
			};
			this.$axios('get', '/api/ad/groups', params)
				.then(res => {
					if (res.data.code == 1) {
						let list = res.data.data.list;
						let datas = [];
						for (let key in list) {
							let obj = {};
							obj.id = key;
							obj.name = list[key];
							datas.push(obj);
						}
						this.checkingInGroup = datas;
						this.formData.group_id = datas[0].id;
					}
				})
				.finally(() => {
					this.get_all_integral();
					this.attendload = false;
				});
		},
		//请求数据
		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) {
						this.all_integral_list =this.$returnDeptName(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>