dd_pc/src789/views/ranking/dept_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" style="padding: 20px;">
			<el-form :inline="true">
				<el-form-item label="时间">
					<el-col :span="8">
						<el-select  size="medium" v-model="time_type" placeholder="请选择分类" style="width: 100px;">
							<el-option v-for="item in time_types" :key="item.label" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-col>
					<el-col :span="16">
						<el-date-picker
						   size="medium"
							v-show="time_type == '2'"
							v-model="export_from.year"
							class="date-picker-width"
							type="year"
							value-format="yyyy"
							placeholder="选择年份排名"
						></el-date-picker>
						<el-date-picker
						     size="medium"
							v-show="time_type == '1' || time_type == '月份'"
							v-model="export_from.month"
							class="date-picker-width"
							type="month"
							value-format="yyyy-MM"
							placeholder="选择月份排名"
						></el-date-picker>
						<season v-if="time_type == '3'" :isActive="true" class="date-picker-width" @confirm="export_quarter_confirm"></season>
					</el-col>
				</el-form-item>
				<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-cascader
						v-model="dept_name"
						:options="dept_tree"
						:props="{ multiple: true, checkStrictly: true }"
						class="date-picker-width"
						ref="dept"
						clearable
						collapse-tags
						placeholder="全公司"
					  ></el-cascader>-->
				</el-form-item>
				<el-form-item label="谁不参与排名">
					<el-select v-model="formData.exclusion"  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-cascader
					   size="medium"
						class="date-picker-width"
						v-model="rule_id"
						:options="rule_trees"
						:props="props"
						ref="rule"
						clearable
						collapse-tags
						placeholder="请选择规则分类"
					></el-cascader>
				</el-form-item> -->
			  <el-form-item label="积分分类">
				  <el-select class="date-picker-width" size="medium" v-model="formData.pt_id" clearable placeholder="请选择积分分类">
				  	<el-option v-for="item in point_types" :key="item.name" :label="item.name" :value="item.id"></el-option>
				  </el-select>
			  </el-form-item>
				<el-form-item label="人员">
					<el-select  size="medium" v-model="formData.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>
				<el-form-item>
					<el-checkbox v-model="sort" size="medium" label="排名由低到高" border></el-checkbox>
					<el-button type="primary"  size="medium" @click="selectBtn" style="margin-left:20px">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary"  size="medium" plain @click="dialogVisible = true">导出排名</el-button>
					<!-- <el-button type="primary"  size="medium" plain @click="byRanking('byRankingData')">轮播排名</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="labelName" 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"
					:page-sizes="[10, 20, 30, 40, 50, 100]"
					layout="total, sizes, prev, pager, next"
					:page-size="formData.page_size"
					: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-item label="规则分类" style="margin-left:20px">
					<el-cascader
						class="date-picker-width"
						v-model="Dc_Data.rule_id"
						:options="rule_trees"
						:props="props"
						 size="medium"
						ref="rule"
						clearable
						collapse-tags
						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>

		<!-- 轮播弹窗 -->
		<el-dialog title="轮播排名" :visible.sync="byRankingShow" width="500px" top="10%">
			<div>
				<el-form :inline="true" ref="byRankingData" :model="byRankingData" :rules="byRankingDataRules" label-width="90px">
					<el-form-item label="月份" prop="month">
						<el-date-picker v-model="byRankingData.month"  size="medium" class="date-picker-width" type="month" value-format="yyyy-MM" placeholder="选择月份排名"></el-date-picker>
					</el-form-item>
					<el-form-item label="选择部门" prop="dept_id">
						<el-cascader
						    size="medium"
							class="date-picker-width"
							v-model="byRankingData.dept_id"
							:options="dept_tree"
							:props="{ checkStrictly: true,value:'obj',label:'name',children:'_child'}"
							ref="dept1"
							clearable
							filterable
							placeholder="全公司"
						></el-cascader>
					</el-form-item>
					<el-form-item label="人员范围" prop="position">
						<el-radio-group  size="medium" v-model="byRankingData.position">
							<el-radio label="all">管理者和员工</el-radio>
							<el-radio label="manager">只看管理者</el-radio>
							<el-radio label="employee">只看员工</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer">
				<el-button @click="byRankingShow = false"  size="medium">取 消</el-button>
				<el-button type="primary" @click="swiperPage('byRankingData')"  size="medium">开始轮播</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import moment from 'moment';
import season from '@/components/season';
export default {
	data() {
		return {
			Dc_Data: {
				//导出数据
				value1: '', //时间
				DC_position: '全部', //人员
				dept_name: [], //部门
				rule_id: [] //规则
			},
			dialogVisible: false,
			dept_name: [],
			dept_tree: [],
			loading: false,
			formData: {
				dept_id: '0',
				sort: 'DESC',
				pt_id: 3,
				time_type: 1,
				exclusion: [],
				page: 1,
				rule_id: [],
				page_size: 10,
				position: 0 //部门多选删除这个
			},
			total: null,
			rule_trees: null,
			rule_id: null,
			list: null,
			point_types:[],
			point_type: [],
			sort: false,
			time_types: [{ label: '月份', value: '1' }, { label: '年份', value: '2' }, { label: '季度', value: '3' }],
			props: { value: 'id', label: 'name', children: 'child', multiple: true },
			time_type: '月份',
			export_from: {
				year: '',
				month: moment().format('YYYY-MM'),
				quarter: ''
			},
			employee_map: JSON.parse(localStorage.getItem('SET_EMPLOYEE_MAP')),
			positions: [{ id: 0, age: 'all', name: '全部' }, { id: 1, age: 'manager', name: '管理者' }, { id: 2, age: 'employee', name: '员工' }],
			tips_show: false,
			byRankingShow: false,
			byRankingData: {
				month: '',
				dept_id: '',
				position: 'all'
			},
			byRankingDeptId: '',
			byRankingDataRules: {
				month: [{ required: true, message: '请选择月份', trigger: 'blur' }],
				dept_id: [{ required: true, message: '请选择部门', trigger: 'change' }],
				position: [{ required: true, message: '请选择人员范围', trigger: 'change' }]
			},
			labelName:'B分',
		};
	},
	watch: {
		sort(val) {
			if (val) {
				this.formData.sort = 'ASC';
			} else {
				this.formData.sort = 'DESC';
			}
		},
		dept_name(val) {
			if (val.length !== 0) {
				// 这是选部门多选。如果更改需求用这个：
				// let dept_id = [];
				// for (var i in val) {
				//   dept_id.push(val[i][0]);
				// }
				// console.log(dept_id);
				// this.formData.dept_id = dept_id;//传入选中的部门ID,是数组
				this.formData.dept_id = val[val.length - 1];
			} else {
				this.formData.dept_id = 0;
			}
			this.$nextTick(() => {
				this.$refs.dept.dropDownVisible = false;
				this.getEmployeeList();
			});
		},
		'byRankingData.dept_id'(val) {
			this.$refs.dept1.dropDownVisible = false;
		},
		'Dc_Data.dept_name': function(val) {
			this.$refs.dept2.dropDownVisible = false;
		},
		rule_id(val) {
			if (val.length !== 0) {
				this.formData.rule_id = [];
				val.forEach((element, index) => {
					this.formData.rule_id.push(element[element.length - 1]);
				});
			} else {
				this.formData.rule_id !== undefined ? delete this.formData.rule_id : '';
			}
		}
	},
	components: { season },
	methods: {
		// 轮播页面跳转
		swiperPage(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					var { href } = this.$router.resolve({
						path: '/deptRankSwiper',
						query: {
							month: this.byRankingData.month || 0,
							type: '2',
							position: this.byRankingData.position,
							dept_id: this.byRankingData.dept_id[0].id,
							dept_name:this.byRankingData.dept_id[0].name,
							pt_id: 3
						}
					});
					window.open(href);
				}
			});
		},
		// 轮播排名弹窗
		byRanking() {
			this.byRankingData={
				month: '',
				dept_id: '',
				position: 'all'
			},
			this.byRankingShow = true;	
		},
		// 提示信息
		tips_close() {
			localStorage.setItem('dept_rank_tips', 'true');
			this.tips_show = false;
		},
		// 查询
		selectBtn() {
			switch (this.time_type) {
				case '1':
					this.$set(this.formData, 'month', this.export_from.month);
					this.formData.month ? '' : delete this.formData.month;
					break;
				case '2':
					this.$set(this.formData, 'year', this.export_from.year);
					this.formData.year ? '' : delete this.formData.year;
					break;
				case '月份':
					this.$set(this.formData, 'month', this.export_from.month);
					this.formData.month ? '' : delete this.formData.month;
					break;
				case '3':
					this.$set(this.formData, 'quarter', this.export_from.quarter);
					this.formData.quarter ? '' : delete this.formData.quarter;
					break;
				default:
					break;
			}
			
			let data = JSON.parse(JSON.stringify(this.formData));
			var employee_ids =data.exclusion.join(',');
			data.exclusion=employee_ids;
			data.page = 1;
			data.page_size = 10;
			this.$nextTick(() => {
				this.get_list(data);
			});
		},
		// 页面变更
		handleCurrentChange(val) {
			this.formData.page = val;
			this.get_list(this.formData);
		},
		handleSizeChange(val) {
			this.formData.page_size = val;
			this.get_list(this.formData);
		},
		// 选择时间
		export_quarter_confirm(val) {
			this.export_from.quarter = val;
		},
		//请求数据
		get_list(data, bool) {
			if (this.time_type == 1) {
				delete data.year;
				delete data.quarter;
			} else if (this.time_type == 2) {
				delete data.month;
				delete data.quarter;
			} else if (this.time_type == '月份') {
				delete data.year;
				delete data.quarter;
			} else if (this.time_type == 3) {
				delete data.month;
				delete data.year;
			}
			if (bool) {
				data.month = moment().format('YYYY-MM');
			}
			let self = this;
			self.loading = true;
			data ? '' : (data = this.formData);
			
			data.position = data.position == 'manager' ? 'manager' : data.position == 'employee' ? 'employee' : 'all';
			self.$axios('get','/api/integral/statistics/ranking',data,'v2').then(res => {
				this.labelName=this.formData.pt_id==2? 'A分':'B分';
				if (res.data.code == 1) {
					self.list = res.data.data.list;
					self.total = res.data.data.total;
				} else {
					self.$message.error(res.data.data.msg);
				}
			})
			.finally(() => {
				self.loading = false;
			});
		},
		// 获取积分规则
		get_rule_tree() {
			this.$axios('get','/api/integral/rule/trees',{ cycle_type: '1'}).then(res => {
				this.rule_trees =this.getRuleTreeData(res.data.data.rule_tree);
			});
		},
		// 规则递归 children
		getRuleTreeData(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.getRuleTreeData(data[i].child);
				}
			}
			return data;
		},
		// 递归判断列表，把最后的children设为undefined
		getTreeData(data) {
			for (var i = 0; i < data.length; i++) {
				data[i].obj={id:data[i].id,name:data[i].name};
				if (data[i]._child.length < 1) {
					// children若为空数组，则将children设为undefined
					data[i]._child = undefined;
				} else {
					// children若不为空数组，则继续 递归调用 本方法
					this.getTreeData(data[i]._child);
				}
			}
			return data;
		},
		getEmployeeList() {
			let self = this;
			self.$axios('get','/api/employee/list',{ dept_id: self.formData.dept_id }).then(res => {
				if (res.data.code == 1) {
					this.employee_map = res.data.data.list;
				} else {
					self.$message.error(res.data.data.msg);
				}
			})
		},

		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='+this.formData.pt_id+'&employee_id='+this.$getUserData().id+ data, '_blank');
			this.dialogVisible = false;
		},
		//获取部门
		getDepartment() {
			this.$axios('get','/api/department/tree').then(res => {
				this.dept_tree =this.getTreeData(res.data.data.list);
			});
		},
	},
	mounted() {
		this.point_types=this.$getTyps().slice(1);
		this.tips_show = JSON.parse(localStorage.getItem('dept_rank_tips')) ? false : true;
		this.getDepartment();
		this.getEmployeeList();
		this.get_list(this.formData, true);
		this.get_rule_tree();
	}
};
</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:url("/static/images/nodata_default.png") no-repeat center; */
	background-size: 99%;
}
.noperson {
	display: inline-block;
	width: 110px;
	height: 110px;
	line-height: none;
	margin: 22px auto 16px;
	background: url('/static/images/noperson_default.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;
		}
	}
}
::v-deep .el-dialog {
	top: 21%;
}
.picker_er {
	margin-top: 20px;
}
.el-range-editor--medium.el-input__inner {
	width: 280px;
}
::v-deep .el-cascader .el-input .el-input__inner {
	width: 150px;
}
.el-checkbox.is-bordered.el-checkbox--medium {
	padding: 9px 20px 7px 10px;
}
</style>
<!--  -->