dd_pc/src/views/ranking/integral_event_two.vue

<template>
	<div>
		<div class="all padding-20">
			<header class="flex-box-ce" style="padding-bottom: 20px;">
				<el-link :underline="false" :disabled="loading" class="fh" @click="$router.go(-1)">返回</el-link>

				<div>{{parameter.name}}的奖扣执行明细</div>
			</header>
			<el-form ref="form" :inline="true" label-width="80px">
				<el-form-item label="事件来源">
					<el-select class="date-picker-width" size="medium" v-model="formData.source_type" clearable placeholder="全部">
						<el-option v-for="item in source_type" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<div class="flex-box-ce">
						<el-select size="medium" v-model="select_employee_id" filterable clearable placeholder="请输入或选择人员" style="width: 250px;margin-right: 10px;">
							<el-option v-for="item in employee_map" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
						<el-input size="medium" v-model="formData.keyword" placeholder="输入关键字查找" max="200" @keyup.enter.native="keyWordSelect">
							<el-button size="medium" slot="append" icon="el-icon-search" @click="keyWordSelect"></el-button>
						</el-input>
					</div>
				</el-form-item>
				<el-form-item>
					<downloadexcel
						v-if="exportExcelArr.length>0"
						:fetch="returnArr"
						:header="parameter.name+'的奖扣执行明细'"
						:name="parameter.name+'的奖扣执行明细.xls'"
						:fields="json_fields"
						>
						<el-button type="primary" plain size="medium" style="margin-left:20px">导出全部明细</el-button>
					</downloadexcel>
					<!-- <el-button type="primary" size="medium" @click="exportExcel" plain>导出全部事件</el-button> -->
					<!-- <el-button class="first-element-btn" size="medium" v-if="employeeOrdept" :disabled="deleteDisabled" @click="deleteInBatches" type="danger">批量删除</el-button> -->
				</el-form-item>
			  <!-- <el-alert v-if="str" :title="'此列表受【数据查看权限】控制，当前权限：'+str" type="info"></el-alert> -->
			</el-form>

			<!-- 表格 -->
			<div>
				<el-table :data="list" style="width: 100%;cursor: pointer;" v-loading="loading" @row-click="open_detail" @selection-change="deleteEvents">
					<el-table-column v-if="employeeOrdept" type="selection" width="55"></el-table-column>
					<el-table-column prop="employee_name" label="姓名" align="left" min-width="125px">
						<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 prop="dept" show-overflow-tooltip label="部门" align="left" min-width="120px"></el-table-column>
					<el-table-column prop="point" label="积分" align="left" min-width="120px">
						<template slot-scope="scope">
							<span :class="scope.row.point < 0 ? 'green' : 'red'">{{ scope.row.point }} {{ point_name(scope.row.pt_id) }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="remark" label="事件内容" align="left" min-width="280px">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" placement="top">
								<div slot="content" style="width: 400px;">{{ scope.row.remark }}</div>
								<div class="remark">{{ scope.row.remark }}</div>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column prop="rule_name" show-overflow-tooltip label="规则分类" align="left" min-width="140px"></el-table-column>
					<el-table-column prop="event_time" label="事件发生时间" align="left" min-width="140px">
						<template slot-scope="scope">
							{{ scope.row.event_time }}
						</template>
					</el-table-column>
					<el-table-column prop="source_type" label="来源" align="left" min-width="140px">
						<template slot-scope="scope">
							<span v-show="scope.row.source_type == 1">
								积分奖扣
								<span v-if="scope.row.recorder_name">({{ scope.row.recorder_name }})</span>
							</span>
							<span v-show="scope.row.source_type == 2">任务</span>
							<span v-show="scope.row.source_type == 3">积分系统分配</span>
							<span v-show="scope.row.source_type == 4">考勤系统分配</span>
							<span v-show="scope.row.source_type == 5">
								积分申请
								<span v-if="scope.row.applyor_name">({{ scope.row.applyor_name }})</span>
							</span>
							<span v-show="scope.row.source_type == 6">绩效任务包</span>
							<span v-show="scope.row.source_type == 8">积分导入</span>
							<span v-show="scope.row.source_type == 9">A分转B分</span>
							<span v-show="scope.row.source_type == 10">钉钉汇报(日志)奖扣分</span>
							<span v-show="scope.row.source_type > 10">其他</span>
						</template>
					</el-table-column>
					<el-table-column prop="update_time" label="录入时间" align="left" width="140px">
						<template slot-scope="scope">
							<!-- {{ cuttString(scope.row.create_time) }} -->
							{{ scope.row.update_time }}
						</template>
					</el-table-column>

					<template slot="empty">
						<noData></noData>
					</template>
				</el-table>
				<center class="pagination">
					<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>
		</div>
		<el-drawer title="事件详情" :visible.sync="detail_popup" ref="drawer" :with-header="false" :width="'500px'" direction="rtl">
			<div class="drawer_title flex-box-ce">
				<span class="flex-1">事件详情</span>
				<i  @click="detail_popup=false" style="cursor: pointer;" class="el-icon-close"></i>
			</div>
			<div class="detail_popup" v-loading="detail_loading" v-if="detail_info !== null">
				<el-row style="padding-bottom:10px;border-bottom:1px #f8f8f8 solid;">
					<div class="flex-box flex-v-ce">
						<userImage  :user_name="detail_info.employee_name" width="50px" height="50px" fontSize="1"></userImage>
						<span style="font-size: 18px;line-height:50px; margin-left:10px;margin-right:4px;">{{ detail_info.employee_name }}</span>
						<span class="red point" v-show="detail_info.point >= 0">+{{ detail_info.point }} {{ point_name(detail_info.pt_id) }}</span>
						<span class="green point" v-show="detail_info.point < 0">{{ detail_info.point }} {{ point_name(detail_info.pt_id) }}</span>
					</div>
				</el-row>

				<el-row v-show="detail_info.rule_list">
					<el-col :span="6">事件内容</el-col>
					<el-col :span="18" v-if="detail_info.remark">{{ detail_info.remark && (detail_info.remark.customize || detail_info.remark.rule) }}</el-col>
				</el-row>

				<el-row v-show="detail_info.files && detail_info.files.length > 0">
					<el-col :span="18" :offset="6">
						<el-image
							v-for="(itme, index) in detail_info.files"
							:key="index"
							style="width: 80px; height: 80px;margin: 0 5px;"
							:src="itme"
							:preview-src-list="detail_info.files"
						></el-image>
					</el-col>
				</el-row>

				<el-row v-show="detail_info.rule_list">
					<el-col :span="6">规则分类</el-col>
					<el-col :span="18">{{ detail_info.rule_list }}</el-col>
				</el-row>

				<el-row>
					<el-col :span="6">来源类型</el-col>
					<el-col :span="18">
							<span v-show="detail_info.source_type == 1">积分奖扣</span>
							<span v-show="detail_info.source_type == 2">任务</span>
							<span v-show="detail_info.source_type == 3">积分系统分配</span>
							<span v-show="detail_info.source_type == 4">考勤系统分配</span>
							<span v-show="detail_info.source_type == 5">积分申请</span>
							<span v-show="detail_info.source_type == 6">绩效任务包</span>
							<span v-show="detail_info.source_type == 8">积分导入</span>
							<span v-show="detail_info.source_type == 9">A分转B分</span>
							<span v-show="detail_info.source_type == 10">钉钉汇报(日志)奖扣分</span>
							<span v-show="detail_info.source_type > 10">其他</span>
					</el-col>
				</el-row>

				<el-row v-show="detail_info.recorder_name">
					<el-col :span="6">记录人</el-col>
					<el-col :span="18">{{ detail_info.recorder_name }}</el-col>
				</el-row>

				<el-row v-show="detail_info.date">
					<el-col :span="6">事件时间</el-col>
					<el-col :span="18">{{ detail_info.date }}</el-col>
				</el-row>

				<el-row v-show="detail_info.complete_task.time">
					<el-col :span="6">完成时间</el-col>
					<el-col :span="18">{{ detail_info.complete_task.time }}</el-col>
				</el-row>

				<el-row v-show="detail_info.complete_task.remark">
					<el-col :span="6">完成备注</el-col>
					<el-col :span="18">{{ detail_info.complete_task.remark }}</el-col>
				</el-row>

				<el-row v-show="detail_info.complete_task && detail_info.complete_task.files && detail_info.complete_task.files.length > 0">
					<el-col :span="18" :offset="6">
						<el-image
							v-for="(itme, index) in detail_info.complete_task.files"
							:key="index"
							style="width: 80px; height: 80px;margin: 0 5px;"
							:src="itme"
							:preview-src-list="detail_info.complete_task.files"
						></el-image>
					</el-col>
				</el-row>

				<div v-show="detail_info.rule_id">
					<p class="row_title">规则依据</p>
					<el-row>
						<el-col :span="6">规则分类</el-col>
						<el-col :span="18">{{ detail_info.rule_list }}</el-col>
					</el-row>
					<el-row v-show="detail_info.remark.rule">
						<el-col :span="6">积分规则</el-col>
						<el-col :span="18">{{ detail_info.remark.rule }}</el-col>
					</el-row>
					<el-row>
						<el-col :span="6">积分</el-col>
						<el-col :span="18" v-show="detail_info.rule_item.min_point == detail_info.rule_item.max_point">{{ detail_info.rule_item.min_point }}</el-col>
						<el-col :span="18" v-show="detail_info.rule_item.min_point != detail_info.rule_item.max_point">
							{{ detail_info.rule_item.min_point }} ~ {{ detail_info.rule_item.max_point }}
						</el-col>
					</el-row>
				</div>
				<div v-show="detail_info.process"><Steps :process="detail_info.process"></Steps></div>
				<div v-show="detail_info.dc_remark.flow"><Review :process="detail_info.dc_remark.flow" :status="detail_info.dc_status"></Review></div>
				<div style="text-align: center;margin-top: 30px;" v-if="detail_info.source_type == 10 && see_log">
					<el-button type="primary" size="medium" @click="showLog = true">
						查看日志详情内容
						<span style=";padding-left:5px;">»</span>
					</el-button>
				</div>
			</div>
			<div v-if="!this.$authoritys('employee') && !this.$authoritys('dept_manager')" style="position: absolute; bottom: 20px; display: block; right: 20px;">
				<el-button @click="close_integral_event">取消</el-button>
				<el-button type="danger" @click="del_integral_event(detail_info)">删除</el-button>
			</div>
		</el-drawer>

		<el-dialog title="查看日志详情" width="600px" :visible.sync="showLog">
			<div class="title">{{ ding_report.creator_name }}的{{ ding_report.template_name }}</div>
			<div v-if="ding_report.contents.length > 0">
				<div class="contents" v-for="(item, index) in ding_report.contents" :key="index">
					<div class="key">{{ item.key }}</div>
					<div class="value fontColorC">
						<span v-if="item.value">{{ item.value }}</span>
						<span v-else>未填写</span>
					</div>
				</div>
			</div>
			<div v-if="ding_report.images.length > 0">
				<div class="key" style="margin-bottom: 20px;">图片</div>
				<div class="flex-box flex-d-wrap">
					<el-image
						v-for="(item, index) in ding_report.images"
						:key="index"
						style="width: 100px; height: 100px;margin-right:8px"
						:src="item"
						:preview-src-list="ding_report.images"
					></el-image>
				</div>
			</div>
		</el-dialog>

		<el-dialog title="导入错误信息" :visible.sync="importErrorInfoShow" width="30%">
			<div>
				<el-table :data="error_list" border stripe>
					<el-table-column prop="name" label="错误信息">
						<template slot-scope="scope">
							{{ scope.row }}
						</template>
					</el-table-column>
				</el-table>
			</div>
			<span slot="footer"><el-button type="primary" size="medium" @click="importErrorInfoShow = false">确 定</el-button></span>
		</el-dialog>

		<el-dialog title="轮播事件" :visible.sync="swiperShow" width="500px">
			<div>
				<el-row>
					<el-col :span="5" style="line-height: 36px;">仅展示最新的</el-col>
					<el-col :span="6">
						<el-select v-model="page_size" placeholder="请选择">
							<el-option v-for="item in swiperPageList" :key="item.value" :label="item.value" :value="item.value"></el-option>
						</el-select>
					</el-col>
					<el-col :span="6" style="line-height: 36px;">条积分事件来轮播</el-col>
				</el-row>
			</div>
			<span slot="footer">
				<el-button size="medium" @click="swiperShow = false" style="margin-right: 10px;">取 消</el-button>
				<router-link :to="{ path: '/deptRankSwiper?' + '&page=1&page_size=' + this.page_size + '&type=1' }" target="_blank">
					<el-button size="medium" type="primary">开始轮播</el-button>
				</router-link>
			</span>
		</el-dialog>
		<toLead :visible.sync="toleadShw" :nowIndex.sync="nowIndex" :tolead="toleadResult" @confirm="tealConfirm" :export_type="'integral_event'" :dstyle="'height:130px;'">
			<template slot="1">
				<div v-if="nowIndex == 1">
					<div class="flex-box flex-v-ce margin-bottom">
						<div style="margin-right: 10px;">1、下载积分事件模版，批量录入积分事件</div>
						<el-button size="medium" type="primary" @click="downloadTemplate" plain>下载模板</el-button>
					</div>
					<div class="margin-bottom">
						<el-upload
							:limit="1"
							:headers="ATOKEN"
							ref="upload"
							:action="action"
							:on-remove="handleRemove"
							:on-success="handlePictureCardPrediv"
							:file-list="fileList"
							:before-upload="beforeFilesUpload"
							:on-progress="handleOnthecross"
						>
							<p>
								2、上传积分事件数据Excel表
								<el-button style="margin-left: 10px;" size="medium" type="primary" plain>选择文件</el-button>
							</p>
						</el-upload>
					</div>
				</div>
			</template>
		</toLead>
	</div>
</template>
<script>
import Steps from '@/components/Steps';
import Review from '@/components/Review';
import toLead from '@/components/toLead';
import downloadexcel from "vue-json-excel";	
export default {
	data() {
		return {
			json_fields:{
				'姓名':'employee_name',
				'部门':'dept',
				'积分':'point',
				'积分种类':'pointType',
				'事件内容':'remark',
				'规则分类':'rule_name',
				'事件发生时间':'event_time',
				'来源':'source_type',
				'复核状态':'dc_status',
				'录入时间':'update_time',
			},
			parameter:{},
			deleteDisabled: true,
			action: process.env.VUE_APP_BASE_API + 'api/integral/import',
			ATOKEN: { 'A-TOKEN': this.$getToken(), Accept: 'application/vnd.test.v2+json' },

			loading: false,
			swiperShow: false,
			swiperPageList: [{ value: '10' }, { value: '30' }, { value: '50' }],
			page_size: 10,
			point_types: this.$getTyps(),
			dept_name: [],
			dept_tree: [],
			formData: {
				page: 1,
				page_size: 10,
				month:'',
				pt_id:3,
				dc_status:JSON.stringify([1]),
				order_key:'update_time'
			},
			time_slot: null,
			rule_trees: [],
			props: { checkStrictly: true, value: 'id', label: 'name', children: 'child' },
			rule: [],
			list: [],
			total: null,
			detail_info: null,
			detail_popup: false,
			detail_loading: false,
			pageLimit: 10,
			excelImportShow: false,
			update_btn: false,
			error_list: [],
			importErrorInfoShow: false,
			fileList: [],
			employeeOrdept: !this.$authoritys('employee') && !this.$authoritys('dept_manager'),
			select_employee_id: '',
			employee_map: [],
			selectionID: [], //删除的事件ID
			// 查看日志
			showLog: false,
			see_log: 1,
			ding_report: {
				contents: [],
				images: []
			},
			//导入相关
			toleadShw: false,
			nowIndex: 1,
			toleadResult: {},
			deriveNum: 0,
			str:'',
			source_type: [
				{ id: 0, name: '全部' },
				{ id: 1, name: '积分奖扣' },
				{ id: 2, name: '任务' },
				{ id: 3, name: '积分系统分配' },
				{ id: 4, name: '考勤系统分配' },
				{ id: 5, name: '积分申请' },
				// {id: 6,name: '绩效任务包'},
				{ id: 8, name: '积分导入' },
				{ id: 9, name: 'A分转B分' },
				{ id: 10, name: '钉钉汇报(日志)奖扣分' }
			],
			exportExcelArr:[]
		};
	},
	components: { Steps, toLead,Review,downloadexcel },
	created() {
		this.parameter=JSON.parse(this.$route.query.data);
		this.formData.month=this.parameter.date;
		this.formData.recorder_id=this.parameter.id;
		this.getEmployee();
		this.getDataAccess();
		
		// document.getElementById('main').scrollTop = 0;
	},
	mounted() {
		this.deriveRestrict();
		this.getDepartment();
		this.get_rule_trees();
		this.get_integral_list(this.formData);
		this.see_log = this.$store.state.config.see_log;
		this.point_types = this.getTypes();
	},
	watch: {
		toleadShw(val) {
			if (val) this.nowIndex = 1;
		},
		selectionID() {
			if (this.selectionID.length == 0) {
				this.deleteDisabled = true;
			} else {
				this.deleteDisabled = false;
			}
		},
		'formData.pt_id'(val, old_val) {
			this.formData.page = 1;
			!val ? delete this.formData.pt_id : '';
			this.get_integral_list(this.formData);
		},
		'formData.source_type'(val) {
			this.formData.page = 1;
			val == 0 ? delete this.formData.source_type : '';
			this.get_integral_list(this.formData);
		},
		'formData.page'(val, old_val) {
			this.get_integral_list(this.formData);
		},
		select_employee_id(val) {
		  this.formData.page = 1;
		  this.formData.employee_ids = val;
		  this.get_integral_list(this.formData);
		},
		time_slot(val, old_val) {
			this.formData.page = 1;
			if (val !== null) {
				this.formData.start_day = val[0];
				this.formData.end_day = val[1];
			} else {
				delete this.formData.start_day;
				delete this.formData.end_day;
			}
			this.get_integral_list(this.formData);
		},
		dept_name(val, old_val) {
			this.formData.page = 1;
			if (val.length !== 0) {
				this.formData.dept_ids = val[val.length - 1];
			} else {
				this.formData.dept_ids = 0;
			}
			this.$nextTick(() => {
				this.$refs.dept.dropDownVisible = false;
				this.get_integral_list(this.formData);
			});
		}
	},
	methods: {
		returnArr(){
			return this.exportExcelArr;
		},
		// 获取数据范围权限
		getDataAccess(id) {
			this.$axios('get', '/api/integral/statistics/range_level').then(res => {
				let resData = res.data.data;
				if(resData==1){
					this.str='仅查看自己的数据'
				}else if(resData==2){
					this.str='查看自己以及管理范围内用户的数据'
				}else if(resData==3){
					this.str='查看全员数据'
				}
			})
		},
		//获取员工列表
		getEmployee() {
			this.$axios('get', '/api/employee/index', { dept_id: 0, keywords: '', page: 1, page_size: 3000, is_official: 1 }).then(res => {
				let list = res.data.data.list;
				this.employee_map = list;
			});
		},
		deriveRestrict() {
			this.deriveNum = 0;
			this.$axios('GET', '/api/site/info').then(res => {
				if (res.data.code == 1) {
					this.deriveNum = Number(res.data.data.export_max_num);
				}
			});
		},
		getTypes() {
			var arr = this.$getTyps();
			return arr.filter(function(item) {
				return item.code != 'JX';
			});
		},
		handleRemove(file, fileList) {
			// if (fileList !== null && fileList.length != 0) {
			// 	this.import_btn_show = true;
			// } else {
			// 	this.import_btn_show = false;
			// }
		},
		// 导入相关
		close_import() {
			this.excelImportShow = false;
			this.$refs.upload.clearFiles();
		},
		// keyword
		keyWordSelect() {
			this.formData.page = 1;
			this.get_integral_list(this.formData);
		},
		downloadTemplate() {
			window.open(process.env.VUE_APP_BASE_API + 'api/download/integral/template');
		},
		uploadFile() {
			let params = {};
			params.file = this.file;
			this.update_btn = true;
			this.$axios('post', '/api/integral/import', params, 'v2')
				.then(res => {
					if (res.data.code == 1) {
						if (res.data.data.error.length == 0) {
							this.$message({ type: 'success', message: '导入成功' });
							this.excelImportShow = false;
						} else {
							this.$message({ type: 'error', message: '导入错误' });
							this.error_list = res.data.data.error;
							this.importErrorInfoShow = true;
						}
					} else {
						this.$message({ type: 'error', message: res.data.msg });
					}
				})
				.finally(() => {
					setTimeout(() => {
						this.update_btn = false;
					}, 3000);
				});
		},
		tealConfirm() {
			this.keyWordSelect();
		},
		handleOnthecross(event, file, fileList) {
			this.nowIndex = 2;
		},
		handlePictureCardPrediv(response) {
			if (response.code == 1) {
				response.data.id = 1;
			} else {
				response.data.id = 0;
				response.data.name = response.msg;
			}
			this.toleadResult = response.data;
			this.nowIndex = 3;
			return;
			// this.nowIndex = 3
			if (response.code == 1) {
				if (response.data.error.length > 0) {
					var htmls = response.data.error;
					var str = "<div class='red'></div>";
					htmls.forEach(item => {
						str += `<div>${item}</div>`;
					});
					// this.close_import();
					this.$notify.error({
						title: '导入错误',
						dangerouslyUseHTMLString: true,
						message: str,
						duration: 0,
						offset: 50,
						customClass: 'notifyBox'
					});
				} else {
					this.file = response.data;
					this.$message.success({ message: response.msg });
					this.keyWordSelect();
					this.close_import();
				}
			} else {
				this.$message.error({ message: response.msg });
			}
		},
		beforeFilesUpload(file) {
			const $ext_list = ['xlsx', 'xls'];
			let len = file.name.split('.').length - 1;
			const $ext_name = file.name.split('.')[len];
			if ($ext_list.indexOf($ext_name) != -1) {
			} else {
				this.toleadResult.id = 0;
				this.toleadResult.name = '文件格式上传错误,仅支持上传xlsx,xls）';
				this.nowIndex = 3;
				// this.$message.warning('文件格式上传错误,仅支持上传xlsx,xls）');
				return false;
			}
		},
		exportExcel() {
			if (this.deriveNum > 0 && this.total >= this.deriveNum) {
				this.$message.warning('当前数据已超出' + this.deriveNum + '条，请拆分时间段分批导出');
				return;
			}
			window.open(
				process.env.VUE_APP_BASE_API +
					'api/download/integral?employee_id=' +this.$getUserData().id +
					'&page=' +this.formData.page +'&page_size=' +this.formData.page_size +'&pt_id=3'+'&dc_status=[1]'+
					'&recorder_id=' +this.parameter.id +'&month=' +this.parameter.date +'&order_key=update_time'+
					(this.formData.source_type ? '&source_type=' + this.formData.source_type : '') +
					(this.formData.keyword ? '&keyword=' + this.formData.keyword : ''),
				'_blank'
			);
		},
		// end 文件上传
		handleSizeChange(val) {
			this.pageLimit = val;
			this.formData.page_size = this.pageLimit;
			this.get_integral_list(this.formData);
		},
		cuttString(data) {
			return data.substring(5);
		},
		deleteInBatches() {
			if (this.selectionID.length < 1) {
				return false;
			}
			this.$confirm('此操作将永久删除选中的积分事件, 确认要删除吗？', '批量删除事件', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.loading = true;
					this.$axios('POST', '/api/integral/statistics/integral/many', { event_ids: this.selectionID })
						.then(res => {
							if (res.data.code == 1) {
								this.$message({
									message: res.data.msg,
									type: 'success'
								});
								if (this.selectionID.length == this.list.length) {
									if (this.formData.page > 1) {
										this.formData.page = this.formData.page - 1;
									}
								}
								this.get_integral_list(this.formData);
							} else {
								this.$message.error(res.data.msg);
							}
						})
						.finally(() => {
							this.loading = false;
						});
				})
				.catch(() => {});
		},
		deleteEvents(selection) {
			let listId = [];
			selection.forEach(item => {
				listId.push(item.id);
			});
			this.selectionID = listId;
		},
		open_detail(item) {
			this.detail_popup = true;
			let data = {
				event_id: item.id
			};
			this.detail_loading = true;
			this.$axios('get', '/api/integral/statistics/integral/info', data)
				.then(res => {
					if (res.data.code == 1) {
						this.detail_info = res.data.data;
						var ding_report = res.data.data.remark.ding_report;
						if (Object.keys(ding_report).length != 0) {
							this.ding_report = res.data.data.remark.ding_report;
						}
					} else {
						this.$message.error(res.data.data.msg);
					}
				})
				.finally(() => {
					this.detail_loading = false;
				});
		},
		//获取部门
		getDepartment() {
			this.$axios('get', '/api/department/tree').then(res => {
				this.dept_tree = this.getTreeData(res.data.data.list);
			});
		},
		//获取规则
		get_rule_trees() {
			this.$axios('get', '/api/integral/rule/trees').then(res => {
				this.rule_trees = this.getRuleTreeData(res.data.data.rule_tree);
			});
		},
		opneWebSocket(item,is) {
			let data={
				type:"esi",
				recorder_id:item.recorder_id,
				page:item.page,
				page_size:item.page_size,
				month:item.month,
				dc_status:item.dc_status,
				keyword:item.keyword,
				pt_id:item.pt_id,
				source_type:item.source_type,
			};
			if(item.employee_ids){
				data.employee_id=item.employee_ids
			}
			if(is){
				data.page_size=100000;
			}else{
				this.loading = true;
			}
			this.$socketApiTow.sendData(data,(res)=>{
				if (res.code == 1&&res.type=='esi') {
					if(res.result.source_msg.page_size==100000){
						let list = res.result.list;
						let strArr=['','积分奖扣','任务','积分系统分配','考勤系统分配','积分申请','绩效任务包','','积分导入','A分转B分','钉钉汇报(日志)奖扣分','其他'];
						list.forEach(item=>{
							item.pointType=item.pt_id==3?'B分':'A分';
							item.source_type=strArr[item.source_type]|| '其他';
							item.dc_status=item.dc_status==1? '复核通过':item.dc_status==2?'复核不通过':'待复核';
						})
						this.exportExcelArr=list;
						this.loading = false;
					}else{
						this.list = res.result.list;
						this.total = res.result.total;
						this.$nextTick(()=>{
							if(this.exportExcelArr.length==0){
								this.opneWebSocket(item,true);
							}else{
								this.loading = false;
							}
						})
					}
				}
				if (res.type=='break') {
					this.loading = false;
				}
			},true)
		},
		get_integral_list(data) {
			this.opneWebSocket(data);
			return false
			this.loading = true;
			this.$axios('get', '/api/integral/statistics/integral', data)
				.then(res => {
					if (res.data.code == 1) {
						this.list = res.data.data.list;
						if(data.page==1){
							this.total = res.data.data.total;
						}
					} else {
						this.$message.error(res.data.data.msg);
					}
				})
				.finally(() => {
					this.loading = false;
				});
		},
		handleCurrentChange(val) {
			this.formData.page = val;
		},
		rule_null(val) {
			if (val.length == 0) {
				this.formData.rule_id = 0;
			} else {
				this.formData.rule_id = this.rule[this.rule.length - 1];
			}
			this.$nextTick(() => {
				this.$refs.rule.dropDownVisible = false;
				this.get_integral_list(this.formData);
			});
		},
		del_integral_event(item) {
			this.$confirm('删除事件的同时也会撤销积分，确定删除吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$axios('post', '/api/integral/statistics/integral/destroy', { event_id: item.event_id }).then(res => {
					if (res.data.code == 1) {
						this.$message.success(res.data.msg);
						this.detail_popup = false;
						this.get_integral_list(this.formData);
					} else {
						this.$message.error(res.data.msg);
					}
				});
			});
		},
		close_integral_event() {
			this.detail_popup = false;
		},
		point_name(id) {
			return this.point_types.find(item => {
				if (item.id == id) {
					return item.name;
				}
			}).name;
		},
		// 递归判断列表，把最后的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;
		},
		// 规则递归 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;
		}
	},
	beforeRouteLeave(to, from, next) {
		this.$socketApiTow.closewebsocket();
		setTimeout(()=>{
				    next();
		},1000)
	}
};
</script>
<style scoped lang="scss">
.fh{
	position: relative;
	cursor: pointer;
	padding-right: 40px !important;
}
// .fh:hover{
// 	color: #26a2ff;
// }
.fh::after{
	width: 2px;
	background-color: #ccc;
	height: 30px;
	content: " ";
	position: absolute;
	right: 20px;
	top: -5px;
}
.remark {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.title {
	text-align: center;
	font-weight: 700;
	max-width: 70%;
	margin: 20px auto;
	margin-top: 0;
	font-size: 18px;
}
.key {
	font-weight: 700;
	font-size: 16px;
}
.value {
	font-size: 14px;
	margin: 10px 0;
	margin-bottom: 20px;
}
.imgs {
	width: 80px;
	height: 80px;
	margin-right: 5px;
	margin-bottom: 5px;
}
header.el-drawer__header {
	font-size: 18px;
	font-family: MicrosoftYaHei;
	color: #303133;
	width: 500px;
	span {
		:focus {
			outline: 0;
		}
	}
}
.display_flex {
	display: flex;
}
.label {
	line-height: 36px;
	padding-right: 10px;
}
.time_section {
	.el-range-editor {
		width: 330px;
	}
}
.pagination {
	padding: 20px 0;
}
.detail_popup {
	padding: 20px;
	height: calc(100vh - 140px);
	overflow: auto;
	padding-bottom: 100px;
	.row_title {
		position: relative;
		margin: 0 0 20px 0;
		padding-top: 12px;
		font-size: 16px;
		color: #303133;
		line-height: 22px;
	}
	.row_title:before {
		position: absolute;
		top: 0;
		content: ' ';
		width: 100%;
		border-top: 1px #f8f8f8 solid;
	}
	.el-row {
		margin-bottom: 10px;
		font-size: 14px;
		.el-col-4 {
			color: #606266;
		}
	}
}
span.point {
	font-size: 16px;
}
.drawer_title {
	font-size: 18px;
	padding: 20px;
	border-bottom: 1px #efefef solid;
}
.row_tips {
	display: block;
	color: #909399;
	font-size: 12px;
	margin-top: 0px;
}
.el-range-editor--medium .el-range-separator {
	width: 25px;
}
.integral_event_box {
	background-color: #ffffff;
	padding: 20px;
	min-height: calc(100vh - 160px);
}
.examine_steps ::v-deep .el-step.is-vertical .el-step__title {
	padding-bottom: 0;
}

.diy-tip1 {
	margin-bottom: 10px !important;
	background: #f0f9eb !important;
	color: #67c23a !important;
	border: 1px solid #67c23a !important;
	padding: 9px !important;
	min-width: 800px;
	border-radius: 4px;
}
</style>