dd_pc/src/views/ranking/integral_event.vue

<template>
	<div>
		<div class="all padding-20">
			<el-form ref="form" :inline="true" label-width="80px">
				<el-form-item label="规则分类">
					<el-cascader
						class="date-picker-width"
						v-model="rule"
						:options="rule_trees"
						:props="props"
						@change="rule_null"
						size="medium"
						ref="rule"
						clearable
						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 getTypes()" :key="item.name" :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="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 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 label="时间" style="margin-top: 1px;">
					<el-date-picker
						v-model="time_slot"
						type="daterange"
						size="medium"
						value-format="yyyy-MM-dd"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
					></el-date-picker>
				</el-form-item>
				<el-form-item style="margin-top: 2px;">
					<el-input size="medium" v-model="formData.keyword" placeholder="输入同事姓名" max="200" @keyup.enter.native="keyWordSelect" class="persons_name">
						<el-button size="medium" slot="append" icon="el-icon-search" @click="keyWordSelect"></el-button>
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button v-if="employeeOrdept" type="success" size="medium" @click="toleadShw = true" plain>导入数据</el-button>
					<el-button type="primary" size="medium" @click="exportExcel" plain>导出当前数据</el-button>
					<el-button class="first-element-btn" v-if="employeeOrdept" :disabled="deleteDisabled" @click="deleteInBatches" type="danger">批量删除</el-button>
					<!-- <el-button type="primary" size="medium" plain @click="swiperShow = true">轮播事件</el-button> -->
				</el-form-item>

				<div class="diy-tip1" style="margin-bottom: 10px;">
					<div>
						当前数据：{{total}}条
					</div>
				</div>
			</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" show-overflow-tooltip label="事件内容" align="left" min-width="280px"></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="create_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="create_time" label="录入时间" align="left" width="140px">
						<template slot-scope="scope">
							<!-- {{ cuttString(scope.row.create_time) }} -->
							{{ scope.row.create_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">事件详情</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 v-show="detail_info.source_type_mark">
					<el-col :span="6">来源类型</el-col>
					<el-col :span="18">{{ detail_info.source_type_mark }}</el-col>
				</el-row>

				<el-row v-show="!detail_info.rule_id">
					<el-col :span="6">记录人</el-col>
					<el-col :span="18">{{ detail_info.employee_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 style="text-align: center;margin-top: 30px;" v-if="detail_info.source_type == 10">
					<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')" 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 fontColorF">
						<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="导入积分事件数据" width="600px" :visible.sync="excelImportShow" :close-on-click-modal="false" :before-close="close_import">
			<div style="padding:0 50px;">
				<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"
					>
						<p>
							2、上传积分事件数据Excel表
							<el-button style="margin-left: 10px;" size="medium" type="primary" plain>选择文件</el-button>
						</p>
					</el-upload>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="close_import" size="medium">取 消</el-button>
			</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 toLead from '@/components/toLead';
export default {
	data() {
		return {
			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
			},
			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'),

			selectionID: [], //删除的事件ID
			// 查看日志
			showLog: false,
			ding_report: {
				contents: [],
				images: []
			},
			//导入相关
			toleadShw: false,
			nowIndex: 1,
			toleadResult: {},
			deriveNum: 0,
			
			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: '钉钉汇报(日志)奖扣分'},
			]
		};
	},
	components: {Steps, toLead },
	mounted() {
		this.deriveRestrict()
		this.getDepartment();
		this.get_rule_trees();
		this.get_integral_list(this.formData);
		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);
		},
		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: {
		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 +
					(this.formData.rule_id ? '&rule_id=' + this.formData.rule_id : '') +
					(this.formData.pt_id ? '&pt_id=' + this.formData.pt_id : '') +
					(this.formData.dept_ids ? '&dept_ids=' + this.formData.dept_ids : '') +
					(this.formData.source_type ? '&source_type=' + this.formData.source_type : '') +
					(this.formData.start_day ? '&start_day=' + this.formData.start_day : '') +
					(this.formData.end_day ? '&end_day=' + this.formData.end_day : '') +
					(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);
			});
		},
		get_integral_list(data) {
			this.loading = true;
			this.$axios('get', '/api/integral/statistics/integral', data)
				.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;
				});
		},
		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;
		}
	}
};
</script>
<style scoped lang="scss">
.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>