dd_pc/src/views/workbench/review.vue

<template>
	<div>
		<div class="all padding-20">
			<el-tabs v-model="active">
				<el-tab-pane :disabled="loading" label="待复核" name="review"></el-tab-pane>
				<el-tab-pane :disabled="loading" label="已复核" name="noreview"></el-tab-pane>
			</el-tabs>
			<FormBox>
				<div class="form-item">
					<div class="form-label">姓名搜索</div>
					<div class="form-search">
						<el-select size="medium" v-model="select_employee_id" filterable clearable placeholder="请输入或选择人员">
							<el-option v-for="item in employee_map" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</div>
				</div>
				<div class="form-item">
					<div class="form-label">所在部门</div>
					<div class="form-search">
						<el-cascader
							size="medium"
							v-model="dept_name"
							:options="dept_tree"
							:props="{ checkStrictly: true, multiple: true, value: 'id', label: 'name', children: '_child' }"
							ref="dept"
							filterable
							collapse-tags
							clearable
							placeholder="全公司"
						></el-cascader>
					</div>
				</div>
				<div class="form-item">
					<div class="form-label">积分类型</div>
					<div class="form-search">
						<el-select  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>
					</div>
				</div>
				<div class="form-item">
					<div class="form-label">事件来源</div>
					<div class="form-search">
							<el-select 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>
					</div>
				</div>
				<div class="form-item">
					<div class="form-label">规则分类</div>
					<div class="form-search">
						<el-cascader
							v-model="rule"
							:options="rule_trees"
							:props="props"
							@change="rule_null"
							size="medium"
							ref="rule"
							clearable
							placeholder="全部规则分类"
						></el-cascader>
					</div>
				</div>
				<div class="form-item">
					<div class="form-label">
						<el-tooltip effect="dark" placement="top">
						  <template slot="content">
							默认仅显示组织架构中“已启用”人员的积分事件，未启用、已离职等人员的积分事件可以通过“未启用&未授权”筛选查看
						  </template>
						  <span>人员状态	<i class="el-icon-warning"></i></span>
						</el-tooltip>
					</div>
					<div class="form-search">
						<el-select size="medium" v-model="formData.is_enable">
							<el-option  label="已启用" :value="1"></el-option>
							<el-option  label="未授权&未启用" :value="0"></el-option>
						</el-select>
					</div>
				</div>
				<div class="form-item">
					<div class="form-label">发生时间</div>
					<div class="form-search">
						<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>
					</div>
				</div>
				<div class="form-item" v-if="active=='noreview'">
					<div class="form-label">复核状态</div>
					<div class="form-search">
						<el-select class="date-picker-width" size="medium" v-model="dc_status"  placeholder="全部">
							<el-option v-for="item in reviewArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</div>
				</div>
				<div class="form-item">
					<div class="form-label">内容搜索</div>
					<div class="form-search">
						<el-input size="medium" clearable max="20" v-model="formData.keyword" placeholder="请输入"></el-input>
					</div>
				</div>
<!--				<div class="form-item">-->
<!--					<div class="form-label">分值查询</div>-->
<!--					<div class="form-search">-->
<!--						<el-input size="medium" type="number" clearable v-model="formData.point" placeholder="请输入"></el-input>-->
<!--					</div>-->
<!--				</div>-->


			</FormBox>
			<div style="padding: 10px 0;position: relative;z-index: 1;background-color: #fff;" v-if="active=='review'">
				<el-button plain  size="medium" :disabled="deleteDisabled" @click="deleteInBatches" type="primary">批量复核通过</el-button>
				<span style="padding-left: 20px;">
					<span class="orange" v-if="!isOpen"><i class="el-icon-warning-outline"></i> 正在连接服务器，请稍候...</span>
					<span v-else class="green"><i class="el-icon-connection"></i> 成功连接服务器，可操作使用！</span>
					<!-- <el-button type="primary" size="mini" plain v-if="isBtn" @click="initWebSocke">主要按钮</el-button> -->
				</span>
			</div>
			<!-- 表格 -->
			<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="active=='review'" 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="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="操作" min-width="140px" v-if="active=='review'">
						<template slot-scope="scope">
							<el-link :underline="false" type="primary" :disabled="setLoading" @click.stop="pass(scope.row)">通过</el-link>
							<el-link :underline="false" type="danger" :disabled="setLoading" style="padding: 0 10px;" @click.stop="noPass(scope.row)">不通过</el-link>
							<el-dropdown  @command="setGrade(scope.row)" v-if="event_review_point==1">
							  <i class="el-icon-more"></i>
							  <el-dropdown-menu slot="dropdown">
							    <el-dropdown-item>调整分数</el-dropdown-item>
							  </el-dropdown-menu>
							</el-dropdown>
						</template>
					</el-table-column>
					<el-table-column prop="create_time" label="状态" min-width="140px" v-else>
						<template slot-scope="scope">
							<span class="green" v-if="scope.row.dc_status==1">通过</span>
							<span class="red" v-if="scope.row.dc_status==2">不通过</span>
						</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-dialog title="填写原因" width="480px" top="15vh" :visible.sync="isNo" :close-on-click-modal="false">
			<el-form ref="newForm" label-width="110px">
				<el-form-item label="不通过原因" prop="content">
					<el-input v-model="comment" placeholder="请输入不通过原因" type="textarea" rows="4" maxlength="50" show-word-limit></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer flex-box-end">
				<el-button @click="isNo = false">取 消</el-button>
				<el-button type="primary"  @click="saveNo()">确 定</el-button>
			</div>
		</el-dialog>
		
		<!-- 调整分数 -->
		<el-dialog title="调整分数" width="480px" top="15vh" :visible.sync="isPrizeShow" :close-on-click-modal="false">
			<el-form ref="newForm2" :rules="rules" :model="newForm" label-width="110px">
				<el-form-item label="分数" prop="point">
					<el-input v-model="newForm.point" maxlength="10" placeholder="请输入分数" auto-complete="off" @input="newForm.point=newForm.point.replace(/[^(\-)0-9]/g,'')"></el-input>
				</el-form-item>
				<el-form-item label="调整原因" prop="comment">
					<el-input v-model="newForm.comment" placeholder="请输入调整原因" type="textarea" rows="4" maxlength="50" show-word-limit></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer flex-box-end">
				<el-button @click="isPrizeShow = false">取 消</el-button>
				<el-button type="primary" @click="subGroupForm('newForm2')">确定并通过</el-button>
			</div>
		</el-dialog>
		
		<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 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.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="isResult"  width="800" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
			<div>
				<el-progress :text-inside="true" :stroke-width="24" :percentage="percentage"></el-progress>
				<div style="margin-top: 20px;border: 1px solid #f1f1f1;max-height: 500px;overflow-y: auto;" class="scroll-bar">
					<div class="flex-box-ce results" style="font-weight: 600;">
						<div style="border-right: 1px solid #f1f1f1;width: 50px;">序号</div>
						<div class="flex-1" style="border-right: 1px solid #f1f1f1;">奖扣对象</div>
						<div class="flex-2" style="border-right: 1px solid #f1f1f1;">事件内容</div>
						<div class="flex-1" style="border-right: 1px solid #f1f1f1;">积分</div>
						<div class="flex-2" >处理结果</div>
					</div>
					<div class="flex-box-ce results" v-for="(item, index) in results" :key="index">
						<div style="border-right: 1px solid #f1f1f1;width: 50px;">{{results.length-index}}</div>
						<div class="flex-1" style="border-right: 1px solid #f1f1f1;">{{ item.name }}</div>
						<div class="flex-2" style="border-right: 1px solid #f1f1f1;">{{ item.remark }}</div>
						<div class="flex-1" style="border-right: 1px solid #f1f1f1;">
							{{ item.point>0? '+'+item.point:item.point }} 
							<span>{{ item.pt_id==3? 'B分':'A分' }}</span>
						</div>
						<div class="flex-2 green" v-if="item.msg=='提交成功'">{{ item.msg }}</div>
						<div class="flex-2 red" v-else>{{ item.msg }}</div>
					</div>
				</div>
				<span slot="footer">
					<div class="flex-box-end" style="margin-top: 20px;" v-show="results.length==resultList.length"><el-button type="primary" @click="isResult = false" size="small">确 定</el-button></div>
				</span>
			</div>
		</el-dialog>
	
	</div>
</template>
<script>
import Steps from '@/components/Steps';
import Review from '@/components/Review';
import toLead from '@/components/toLead';
import {_debounce} from '@/api/auth';
export default {
	data() {
		return {
			active:'review',
			deleteDisabled: true,
			loading: false,
			page_size: 10,
			point_types: this.$getTyps(),
			dept_name: [],
			dept_tree: [],
			formData: {
				page: 1,
				page_size: 10,
				dc_status:JSON.stringify([0]),
				is_enable:1,
        point:''
			},
			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,
			select_employee_id: '',
			employee_map: [],
			selectionID: [], //删除的事件ID
			// 查看日志
			showLog: false,
			see_log: 1,
			ding_report: {
				contents: [],
				images: []
			},
			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: '钉钉汇报(日志)分' }
			],
			dc_status:0,
			reviewArr: [
				{ id: 0, name: '全部' },
				{ id: 1, name: '通过' },
				{ id: 2, name: '不通过' },
			],
			rules: {
				point: [{ required: true, message: '请输入分值', trigger: 'blur' }],
				comment: [{ required: true, message: '请输入调整原因', trigger: 'blur' }],
			},
			newForm:{
				point:'',
				comment:''
			},
			isPrizeShow:false,
			event_review_point:1,
			// 长连接结果
			results: [], //提交的返回结果集合
			isResult: false,
			percentage: 0,
			resultList:[],//要发送数据的集合
			resultIndex:0,
			
			isShowError:false,
			errorMsg:'服务器繁忙，请稍后再试',
		
			
			isNo:false,
			noData:{},
			comment:'',
			setLoading:false,
			isOpen:false,
			
			isBtn:false,
		};
	},
	components: { Steps, toLead,Review },
	created() {
		this.getEmployee();
		this.initWebSocke();
	},
	mounted() {
		this.getDepartment();
		this.get_rule_trees();
		this.get_integral_list(this.formData);
		let siteConfig=this.$getCache('siteConfig');
		this.see_log = siteConfig.see_log;
		this.event_review_point=siteConfig.event_review_point;
		this.point_types = this.getTypes();
	},
	watch: {
		selectionID() {
			if (this.selectionID.length == 0) {
				this.deleteDisabled = true;
			} else {
				this.deleteDisabled = false;
			}
		},
		'formData.keyword': {
			deep: true,
			handler: _debounce(function(val) {
				this.formData.page = 1;
				this.get_integral_list(this.formData);
			}, 1000)
		},
    'formData.point':{
      deep: true,
      handler: _debounce(function(v){
        this.formData.page = 1;
        this.get_integral_list(this.formData)
      },1000)
    },
		'formData.is_enable'(val, old_val) {
			this.formData.page = 1;
			this.get_integral_list(this.formData);
		},
		'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) {
				let dept_ids=[];
				val.forEach((item)=>{
					dept_ids.push(item[item.length-1]);
				})
				let set =new Set(dept_ids);
				this.formData.dept_ids = [...set].toString();
			} else {
				this.formData.dept_ids = 0;
			}
			this.$nextTick(() => {
				this.$refs.dept.dropDownVisible = false;
				this.get_integral_list(this.formData);
			});
		},
		active(val){
			this.formData.page = 1;
			if(val=='review'){//待复核
				this.formData.dc_status=JSON.stringify([0]);
				delete this.formData.order_key
			}else{
				this.dc_status=0;
				this.formData.order_key='update_time';
				this.formData.dc_status=JSON.stringify([1,2]);
			}
			this.get_integral_list(this.formData);
		},
		dc_status(val){
			if(val==0){
				this.formData.dc_status=JSON.stringify([1,2]);
			}else if(val==1){
				this.formData.dc_status=JSON.stringify([1]);
			}else{
				this.formData.dc_status=JSON.stringify([2]);
			}
			this.get_integral_list(this.formData);
		},
		isResult(val){
			if(!val){
				this.get_integral_list(this.formData);
			}
		},
	},
	methods: {
		initWebSocke(is){
			// if(is){
			// 	this.$message({type: 'info',message: '正在重新连接'});
			// }
			// this.isBtn=false;
		    let setTime=setTimeout(()=>{
				if(!this.isOpen){
					// this.isBtn=true;
					this.initWebSocke();
				}
				clearTimeout(setTime)
			},20000)
			this.$socketApiTow.sendData({},this.onmessageWS);
		},
		
		setGrade(item){
			this.noData={
				type:'event_check',
				action:'agree',
				event_id:item.id,
				comment:'',
			}
			this.newForm.point=item.point;
			this.newForm.comment='';
			this.isPrizeShow=true;
		},
		
		// 提交表单
		subGroupForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.noData.comment=this.newForm.comment;
					this.noData.point=this.newForm.point;
					if(this.newForm.point=='0'||this.newForm.point===0){
						this.$message({type: 'error',message: '分值不能为0'});
						return false
					}
					if(!isNaN(this.newForm.point)){
						this.setLoading=true;
						this.webSocket(this.noData)
					}else{
						this.$message({type: 'error',message: '分值只能为数值'});
					}
				}
			});
		},
		//通过
		pass(item){
			let data={
				type:'event_check',
				action:'agree',
				event_id:item.id,
				point:item.point
			}
			this.setLoading=true;
			this.webSocket(data)
		},
		webSocket(data,is){
			
			if(!this.isOpen){
				this.$message({type: 'info',message: '正在连接服务器，请稍候...'});
				return false;
			}
			this.resultList=is? data:[data];
			this.resultIndex=0;
			this.percentage=0;
			this.results=[];
			if(this.resultList.length!=1){
				this.isResult=true;
			}
			this.opneWebSocket()
		},
		opneWebSocket() {
			let wsData=this.resultList;
			if(wsData[this.resultIndex]){
				this.$socketApiTow.sendData(wsData[this.resultIndex],this.onmessageWS)
			}else{
				console.log(this.results)
			}
		},
		onmessageWS(e){
			this.setLoading=false;
			if(e.type=='event_check'){
				if(this.resultList.length==1){ //单条
					if(e.code==1){
						this.$message.success('提交成功')
						this.isNo=false;
						this.isPrizeShow=false;
						this.get_integral_list(this.formData);
						return false;
					}else{
						this.$message.error(e.msg)
						return false;
					}
				}
				let user;
				if(e.code==1){		
					user={
						name:e.result.task.msg.name,
						point:e.result.task.msg.point,
						remark:e.result.task.msg.remark,
						pt_id:e.result.task.msg.pt_id,
						msg:'提交成功'
					}
				}else{
					let item=this.resultList[this.resultIndex]
					user={
						name:item.name,
						point:item.point,
						remark:item.remark,
						pt_id:item.pt_id,
						msg:e.msg
					}
				}
				this.results.unshift(user);
				this.resultIndex++;
				this.opneWebSocket();
				// 进度条
				let lng = this.resultList.length;
				this.percentage = Math.floor(this.resultIndex / (lng / 100))
				if (lng == this.results.length) {
					this.percentage = 100;
				}
			}
			if(e.type=='auth'){
			  this.isOpen=true;
			}
			// // 连接不上
			// if(e.type=='break'){
			// 	this.isOpen=false;
			// 	let setT=setTimeout(()=>{
			// 		this.$socketApiTow.sendData({},this.onmessageWS);
			// 		clearTimeout(setT)
			// 	},120000)
			// }
		},
		saveNo(){
			if (!this.comment) {
				this.$message({type: 'error',message: '请填写不通过原因'});
				return false;
			}
			this.noData.comment=this.comment;
			this.webSocket(this.noData)
		},
		//不通过
		noPass(item){
			this.comment='';
			this.isNo=true;
			this.noData={
				type:'event_check',
				action:'disagree',
				event_id:item.id,
				comment:'',
			}
		},
		//获取员工列表
		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;
			});
		},
		handleSizeChange(val) {
			this.pageLimit = val;
			this.formData.page_size = this.pageLimit;
			this.get_integral_list(this.formData);
		},
		getTypes() {
			var arr = this.$getTyps();
			return arr.filter(function(item) {
				return item.code != 'JX';
			});
		},
		deleteInBatches() {
			if (this.selectionID.length < 1) {
				return false;
			}
			this.webSocket(this.selectionID,true)
		},
		deleteEvents(selection) {
			let listId = [];
			selection.forEach(item => {
				listId.push({
					type:'event_check',
					action:'agree',
					event_id:item.id,
					point:item.point,
					remark:item.remark,
					name:item.employee_name,
					pt_id:item.pt_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 => {
				this.list = res.data.data.list;
				if(data.page==1){
					this.total = res.data.data.total;
				}
			}).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;
		}
	},
	beforeDestroy() {
		//取消echarts自适应
		this.$socketApiTow.closewebsocket();
	}
};
</script>
<style scoped lang="scss">
	.results {
		border-bottom: 1px solid #f1f1f1;
		text-align: center;
	}
	.results div {
		padding: 10px;
	}
.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>