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="manager_statistics_box">
			<el-form :inline="true">
				<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-item>
					<el-checkbox v-model="sort" size="medium" label="排名由低到高" border></el-checkbox>
					<el-button type="primary" size="medium" @click="dialogVisible = true" style="margin-left: 10px;" plain>导出排名</el-button>
				</el-form-item>
			</el-form>

			<el-table :data="list" style="width: 100%" v-loading="loading">
				<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	class="fl" :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 label="B分" align="left" prop="point"></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, 30, 40, 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%">
			<span style="font-size:15px">系统将按以下已选条件导出对应的排名报表</span>
			<el-form :inline="true">
				<div class="picker_er">
					<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-item label="人员" style="margin-left:30px">
						<el-select  size="medium" v-model="Dc_Data.DC_position" style="width:150px" placeholder="请选择">
							<el-option v-for="item in positions" :key="item.id" :label="item.name" :value="item.age"></el-option>
						</el-select>
					</el-form-item>
				</div>
				<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>
			<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 {
	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: {
		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;
			}
			var tempwindow = window.open('_blank'); // 先打开页面
			tempwindow.document.write(
			  "<p style='text-align:center;padding-top:50px;font-size:24px'>数据报表正在生成，生成后将自动下载，请不要关闭此标签页<br/><span style='font-size:17px'>（如网络错误请刷新后重试)<span/></p>"
			);
			tempwindow.document.title = '导出';
			tempwindow.location = process.env.VUE_APP_BASE_API + '/api/download/ranking/v2?pt_id=3&type=all&employee_id='+this.$getUserData().id+ data; // 后更改页面地址
			this.dialogVisible = false;
		},
		// 提示信息
		tips_close() {
			localStorage.setItem('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 = 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 = JSON.parse(localStorage.getItem('total_rank_tips')) ? false : true;
		this.get_list();
	}
};
</script>
<style scoped lang="scss">
.search_box {
	::v-deep button:active {
		background: #26a2ff;
	}
	::v-deep button:active .el-icon-search {
		color: #fff;
	}
}
.date-picker-width {
	width: 100% !important;
}
.color_green {
	color: #67c23a;
}
.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: url("@/assets/image/rules_mould.png") no-repeat center;
	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>