dd_pc/src/views/ranking/total_rank.vue

<template>
	<div>
		<div class="diy_tip_bg" v-show="tips_show">
			<el-alert class="diy-tip" @close="tips_close" type="success" description><p>排名包含初始分和工龄分</p></el-alert>
		</div>

		<div class="all padding-20">
			<FormBox :isShowHeader="false">
				<template slot="footer">
					<el-form :inline="true" label-width="70px">
						<el-form-item label="部门">
							<el-cascader
							  size="medium"
								class="date-picker-width"
								v-model="dept_name"
								:options="dept_tree"
								:props="{ checkStrictly: true,value:'id',label:'name',children:'_child'}"
								ref="dept"
								clearable
								filterable
								placeholder="全公司"
							></el-cascader>
						</el-form-item>
					</el-form>
				</template>
			</FormBox>
			<div style="margin: 10px 0;">
				<el-button type="primary" style="margin-right: 10px;" size="medium" plain @click="dialogVisible = true">导出排名</el-button>
				<el-checkbox v-model="sort" size="medium" label="排名由低到高" border></el-checkbox>
			</div>
			<el-table :data="list" style="width: 100%;cursor: pointer;" v-loading="loading" @row-click="open_detail">
				<el-table-column label="名次" width="80" 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 class="flex-box">
							<userImage :user_name="scope.row.employee_name"	:img_url="scope.row.employee_img_url" width="50px" height="50px"></userImage>
							<span style="line-height: 50px; padding-left: 10px;">{{ scope.row.employee_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 label="B分" align="left" prop="point"></el-table-column>
				<el-table-column>
					<template slot-scope="scope">
						<span  class="blue" style="cursor: pointer;">查看详情</span>
					</template>
				</el-table-column>
				<template slot="empty">
					<div class="nopoint_box">
						<div class="noimg noperson"></div>
						<span class="title">没有对应的数据</span>
					</div>
				</template>
			</el-table>

			<center style="padding: 20px 0;">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="formData.page"
					:page-sizes="[10, 20, 50, 100]"
					layout="total, sizes, prev, pager, next"
					:page-size="pageLimit"
					:total="total"
				></el-pagination>
			</center>
		</div>
		
		<!-- 导出弹窗 -->
		<el-dialog title="导出排名" :visible.sync="dialogVisible" width="730px" top="10%">
			<div style="font-size:15px;margin-bottom:10px;font-weight: 600;">系统将按以下已选条件导出对应的排名报表</div>
			<FormBox :isShowHeader="false">
				<template slot="footer">
					<el-form :inline="true"  label-width="70px">
						<el-form-item label="人员">
							<el-select  size="medium" v-model="Dc_Data.DC_position" placeholder="请选择">
								<el-option v-for="item in positions" :key="item.id" :label="item.name" :value="item.age"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="部门">
							<el-cascader
								class="date-picker-width cascader_bm"
								v-model="Dc_Data.dept_name"
								:options="dept_tree"
								:props="{ checkStrictly: true,value:'id',label:'name',children:'_child'}"
								ref="dept2"
								size="medium"
								clearable
								filterable
								placeholder="全公司"
							></el-cascader>
						</el-form-item>
						<el-form-item label="时间">
							<el-date-picker
								v-model="Dc_Data.value1"
								type="daterange"
								 size="medium"
								value-format="yyyy-MM-dd"
								format="yyyy-MM-dd"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
							></el-date-picker>
						</el-form-item>
					</el-form>
				</template>
			</FormBox>

			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false"  size="medium">取 消</el-button>
				<el-button type="primary" @click="exportExcel"  size="medium">导 出</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
export default {
	name:'total_rank',
	data() {
		return {
			dept_name: [],
			dept_tree: [],
			loading: false,
			formData: {
				dept_id: '0',
				sort: 'DESC',
				page: 1,
				page_size: 10,
				pt_id: 3,
				type: 'all'
			},
			sort: false,
			list: null,
			pageLimit: 10,
			total: null,
			tips_show: false,
			dialogVisible:false,
			positions: [{ id: 0, age: 'all', name: '全部' }, { id: 1, age: 'manager', name: '管理者' }, { id: 2, age: 'employee', name: '员工' }],
			Dc_Data: {
				//导出数据
				value1: '', //时间
				DC_position: '全部', //人员
				dept_name: [], //部门
			},
		};
	},
	watch: {
		sort(val) {
			if (val) {
				this.formData.sort = 'ASC';
			} else {
				this.formData.sort = 'DESC';
			}
			this.formData.page = 1;
			this.get_list();
		},
		dept_name(val) {
			if (val.length !== 0) {
				this.formData.dept_id = val[val.length - 1];
			} else {
				this.formData.dept_id = '0';
			}
			this.formData.page = 1;
			this.$nextTick(() => {
				this.$refs.dept.dropDownVisible = false;
				this.get_list();
			});
		}
	},
	methods: {
		open_detail(item) {
			let data={
				userInfo:JSON.stringify(item),
				type:2
			}
			this.$router.push({path: '/JfDetail',query:data})
		},
		exportExcel() {
			//人员
			this.Dc_Data.DC_position =this.Dc_Data.DC_position == 'manager' ? 'manager' : this.Dc_Data.DC_position == 'employee' ? 'employee' : this.Dc_Data.DC_position == '全部' ? 'all' : 'all';
			//部门
			let dept_name;
			for (let i in this.Dc_Data.dept_name) {
				dept_name = this.Dc_Data.dept_name[i];
			}
			this.Dc_Data.dept_name = dept_name;
			//规则
			let rule_id = [];
			for (let i in this.Dc_Data.rule_id) {
				for (let a in this.Dc_Data.rule_id[i]) {
					rule_id.push(this.Dc_Data.rule_id[i][a]);
				}
			}
			this.Dc_Data.rule_id = rule_id;
			let data = '';
			if (this.Dc_Data.value1) {
				data += '&start_date=' + this.Dc_Data.value1[0];
				data += '&end_date=' + this.Dc_Data.value1[1];
			}
			data += '&position=' + this.Dc_Data.DC_position;
			this.Dc_Data.dept_name > 0 ? (data += '&dept_id=' + this.Dc_Data.dept_name) : (data += '&dept_id=0');
			if (this.Dc_Data.rule_id.length > 0) {
				data += '&rule_id=' + this.Dc_Data.rule_id;
			}
			
			window.open(process.env.VUE_APP_BASE_API + 'api/download/ranking/v2?pt_id=3&type=all&employee_id='+this.$getUserData().id+ data, '_blank');
			this.dialogVisible = false;
		},
		// 提示信息
		tips_close() {
			this.$setCache('total_rank_tips', 'true');
			this.tips_show = false;
		},
		// 页面变更
		handleCurrentChange(val) {
			this.formData.page = val;
			this.get_list();
		},
		handleSizeChange(val) {
			this.pageLimit = val;
			this.formData.page_size = this.pageLimit;
			this.get_list();
		},
		//获取部门
		getDepartment() {
			this.$axios('get','/api/department/tree').then(res => {
				this.dept_tree =this.getTreeData(res.data.data.list);
			});
		},
		get_list() {
			this.loading = true;
			this.$axios('get','/api/integral/statistics/ranking', this.formData,'v2').then(res => {
					if (res.data.code == 1) {
						this.list =this.$returnDeptName(res.data.data.list);
						this.total = res.data.data.total;
					} else {
						this.$message.error(res.data.data.msg);
					}
				})
				.finally(() => {
					this.loading = false;
				});
		},
		// 递归判断列表，把最后的children设为undefined
		getTreeData(data) {
			for (var i = 0; i < data.length; i++) {
				if (data[i]._child.length < 1) {
					// children若为空数组，则将children设为undefined
					data[i]._child = undefined;
				} else {
					// children若不为空数组，则继续 递归调用 本方法
					this.getTreeData(data[i]._child);
				}
			}
			return data;
		}
	},
	created() {
		this.getDepartment();
	},
	mounted() {
		this.tips_show = this.$getCache('total_rank_tips') ? false : true;
		this.get_list();
	}
};
</script>
<style scoped lang="scss">
.el-checkbox.is-bordered.el-checkbox--medium {
	padding: 9px 20px 7px 10px;
}
.search_box {
	::v-deep button:active {
		background: #26a2ff;
	}
	::v-deep button:active .el-icon-search {
		color: #fff;
	}
}
.date-picker-width {
	width: 100% !important;
}
.nopoint_box {
	display: inline-block;
	text-align: center;
	width: 100%;
	margin-bottom: 10px;
}
.noimg {
	display: inline-block;
	width: 110px;
	height: 110px;
	margin: 22px auto 16px;
	background-size: 99%;
}
.noperson {
	display: inline-block;
	width: 110px;
	height: 110px;
	line-height: none;
	margin: 22px auto 16px;
	background-size: 99%;
}
.title {
	display: block;
	text-align: center;
	font-size: 12px !important;
	line-height: 30px;
	color: #909399 !important;
	padding: 0;
}
.nopoint_box a {
	color: #26a2ff;
}
.chart_content {
	.chart-legend__wrap {
		text-align: right;
		padding: 20px;
		padding-right: 50px;
		& .chart-legend__pink {
			position: relative;
			padding-left: 12px;
			padding-right: 5px;
			&:after {
				content: '';
				position: absolute;
				margin-top: -2px;
				top: 35%;
				left: 0;
				width: 8px;
				height: 8px;
				background: #f56c6c;
				border-radius: 100%;
			}
		}

		& .chart-legend__green {
			position: relative;
			padding-left: 12px;
			&:after {
				content: '';
				position: absolute;
				margin-top: -2px;
				top: 35%;
				left: 0;
				width: 8px;
				height: 8px;
				background: #53b87f;
				border-radius: 100%;
			}
		}
	}
}
.drawer_title {
	font-size: 18px;
	padding: 20px;
}
.manager_statistics_box {
	background-color: #ffffff;
	padding: 20px;
	min-height: calc(100vh - 160px);
	::v-deep .el-row .el-checkbox .el-checkbox__label {
		line-height: 20px;
	}
}
.diy_tip_bg {
	background: #f5f6f9;
	overflow: hidden;
	.diy-tip {
		margin-bottom: 15px;
		border: 1px solid #67c23a;
		padding: 20px 16px;
		p {
			color: #67c23a !important;
			font-size: 14px;
			margin: 0 !important;
			padding: 4px 0;
		}
	}
}
</style>