dd_pc/src/views/ranking/task_rank.vue

<template>
	<div>
		<div class="all">
			<div>
				<el-form :inline="true">
					<el-form-item label="时间">
						<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-form-item>
					<el-form-item>
						<el-date-picker
							size="medium"
							v-show="time_type == '1' || time_type == '月份'"
							v-model="formData.month"
							class="date-picker-width"
							type="month"
							value-format="yyyy-MM"
							placeholder="选择月份排名"
						></el-date-picker>
						<el-date-picker
							size="medium"
							v-show="time_type == '2'"
							v-model="formData.year"
							class="date-picker-width"
							type="year"
							value-format="yyyy"
							placeholder="选择年份排名"
						></el-date-picker>
						<season v-if="time_type == '3'" :isActive="true" class="date-picker-width" @confirm="export_quarter_confirm"></season>
						<el-date-picker
							size="medium"
							v-show="time_type == '4'"
							class="date-picker-width"
							v-model="formData.time_range"
							type="daterange"
							format="yyyy 年 MM 月 dd 日"
							value-format="yyyy-MM-dd"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
						></el-date-picker>
					</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-form-item>
<!-- 					<el-form-item label="谁不参与排名">
						<el-select v-model="formData.exclusion" size="medium" multiple filterable clearable 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="props2"
							ref="rule_id"
							clearable
							placeholder="请选择规则分类"
						></el-cascader>
					</el-form-item> -->
					<el-form-item label="积分类型">
						<el-select class="date-picker-width" size="medium" v-model="formData.pt_id" 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.age" :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-form-item>
				</el-form>
			</div>
			<el-table :data="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.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 prop="point" label="任务分" 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></noData>
				</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="formData.page_size"
					:total="total"
				></el-pagination>
			</center>
		
		<!-- 导出弹窗 -->
		<el-dialog title="导出排名" :visible.sync="dialogVisible" width="730px" top="10%">
			<div style="font-size:15px;margin-bottom: 20px;">系统将按以下已选条件导出对应的排名报表</div>
			<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="timestamp"
							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="积分类型">
					<el-select  style="width: 80px;" size="medium" v-model="Dc_Data.pt_id" 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="规则分类" style="margin-left:20px">
					<el-cascader
						class="date-picker-width"
						@change="ruleInquiredialog"
						v-model="rule_ids"
						:options="rule_trees"
						:props="props"
						size="medium"
						ref="derive"
						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>
		</div>
	</div>
</template>
<script>
import season from '@/components/season';
export default {
	components: { season },
	name:'task_rank',
	data() {
		return {
			// 导出
			Dc_Data: {
				//导出数据
				value1: '', //时间
				DC_position: '全部', //人员
				dept_name: [], //部门
				rule_id: [] ,//规则
				pt_id: 3,
			},
			rule_ids: null,
			
			employee_map: JSON.parse(localStorage.getItem('SET_EMPLOYEE_MAP')),
			total: 0,
			time_types: [{ label: '月份', value: '1' }, { label: '季度', value: '3' }, { label: '年份', value: '2' }, { label: '自定义', value: '4' }],
			time_type: '1',
			dept_name: [],
			dept_tree: [],
			point_types: [],
			point_type: [],
			rule_trees: null,
			rule_id: null,
			props: { value: 'id', label: 'name', children: 'child', multiple: true },
			props2: { value: 'id', label: 'name', children: 'child', checkStrictly: true },
			positions: [{age: 'all', name: '全部' }, { age: 'manager', name: '管理者' }, {age: 'employee', name: '员工' }],
			formData: {
				position:'all',
				exclusion:[],
				sort: 'DESC',
				pt_id: 3,
				year: '',
				month: this.$moment().format('YYYY-MM'),
				quarter: '',
				time_range: [],
				dept_id: '0',
				page: 1,
				rule_id:'',
				page_size: 10,
				source_type: '2'
			},
			sort: false,
			loading: false,
			list: [],
			dialogVisible:false,

		};
	},

	watch: {
		'formData.pt_id'(){
			this.formData.page = 1;
			this.get_list();
		},
		'formData.month'(){
			this.formData.page = 1;
			this.get_list();
		},
		'formData.year'(){
			this.formData.page = 1;
			this.get_list();
		},
		'formData.time_range'(){
			this.formData.page = 1;
			this.get_list();
		},
		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.$nextTick(() => {
				this.$refs.dept.dropDownVisible = false;
				// this.getEmployeeList();
			});
			this.formData.page = 1;
			this.get_list();
		},
		rule_id(val) {
			if(val.length==0){
				this.formData.rule_id='';
				return false
			}
			if(val.length==1){
				this.formData.rule_id=(val).toString()
			}else{
				this.formData.rule_id=(val[val.length-1]).toString()
			}
			this.$refs.rule_id.dropDownVisible = false;
		}
	},
	created() {
		this.point_types = this.$getTyps();
		this.getDepartment();
		this.getEmployeeList();
		this.get_rule_tree();
	},
	mounted() {
		this.get_list();
	},
	methods: {
		ruleInquiredialog() {
			this.ruleUtif('derive');
		},
		ruleUtif(rule) {
			let ruleList = this.$refs[rule].getCheckedNodes();
			let ruleId = [];
			ruleList.forEach(item => {
				ruleId.push(item.value);
			});
			if (rule == 'ruleinquire') {
				this.formData.rule_id = ruleId;
			} else {
				this.Dc_Data.rule_id = ruleId;
			}
			this.$nextTick(() => {
				if (this.$refs[rule].presentTags[1]) {
					this.$refs[rule].presentTags[1].text = '+ ' + (ruleId.length - 1).toString();
				} else {
					if (ruleId.length > 1) {
						let list = {
							closable: false,
							key: -1,
							text: '+ ' + (ruleId.length - 1).toString()
						};
						this.$refs[rule].presentTags[1] = list;
					}
				}
			});
		},
		// 查询
		selectBtn() {
			this.formData.page = 1;
			this.get_list();
		},
		// 获取积分规则
		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;
		},
		//获取部门
		getDepartment() {
			this.$axios('get', '/api/department/tree').then(res => {
				this.dept_tree = this.getTreeData(res.data.data.list);
			});
		},
		// 选择时间
		export_quarter_confirm(val) {
			this.formData.quarter = val;
			this.formData.page = 1;
			this.get_list();
		},
		getEmployeeList() {
			this.$axios('get', '/api/employee/list', { dept_id: this.formData.dept_id }).then(res => {
				if (res.data.code == 1) {
					this.employee_map = res.data.data.list;
				}
			});
		},
		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 data = '';
			if (this.Dc_Data.value1) {
				data += '&start_date=' + this.$moment(this.Dc_Data.value1[0]).format('YYYY-MM-DD');
				data += '&end_date=' +  this.$moment(this.Dc_Data.value1[1]).format('YYYY-MM-DD');
			}
			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;
			}
			data += '&source_type=2';
			let url=process.env.VUE_APP_BASE_API + 'api/download/ranking/v2?pt_id=' + this.Dc_Data.pt_id + '&employee_id=' + this.$getUserData().id + data;
			window.open(url, '_blank');
			this.dialogVisible = false;
		},
		// 页面变更
		handleCurrentChange(val) {
			this.formData.page = val;
			this.get_list();
		},
		handleSizeChange(val) {
			this.formData.page = 1;
			this.formData.page_size = val;
			this.get_list();
		},
		//请求数据
		get_list() {
			let data = {
				sort: this.formData.sort,
				pt_id: this.formData.pt_id,
				dept_id: this.formData.dept_id,
				page: this.formData.page,
				page_size: this.formData.page_size,
				exclusion:this.formData.exclusion.toString(),
				source_type: '2',
				position:this.formData.position,
				rule_id:this.formData.rule_id,
			};
			if (this.time_type == 1) {
				data.month = this.formData.month;
			} else if (this.time_type == 2) {
				data.year = this.formData.year;
			} else if (this.time_type == 3) {
				data.quarter = this.formData.quarter;
			} else if (this.time_type == 4) {
				data.start_date = this.formData.time_range[0];
				data.end_date = this.formData.time_range[1];
			}
			this.loading = true;
			this.$axios('get', '/api/integral/statistics/ranking', data, 'v2')
				.then(res => {
					this.list = res.data.data.list;
					this.total = res.data.data.total;
				})
				.finally(() => {
					this.loading = false;
				});
		}
	}
};
</script>

<style scoped>
.el-date-editor.el-input {
	width: auto;
}
.date-picker-width {
	width: 100% !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>