dd_pc/src/views/ranking/custom_rank.vue

<template>
	<div class="all-box">
		<div class="all flex-box">
				<div class="terr-left" v-loading="item_loading">
					<div style="text-align: center; padding: 10px 0;"><el-button type="primary" @click="addGroup" :disabled="table_loading" v-if="employeeOrdept">新建分组</el-button></div>
					<el-menu v-if="groups_list.length > 0" default-active="0" class="el-menu-vertical-demo elMenuCustomRule_Z">
						<el-menu-item v-for="(item, index) in groups_list" :key="index" :index="index.toString()" @click="getGroupsInfo(item)">
							<i class="el-icon-document-copy"></i>
							<span slot="title">{{ item.name }}</span>
						</el-menu-item>
					</el-menu>
					<div v-else style="text-align: center;margin-top: 10%;" class="fontColorC">
						<img src="@/assets/image/nodata.png" style="width: 180px;height: 120px;margin: 30px auto;" />
						<div>还没有自定义分组</div>
					</div>
				</div>
				<div class="listData flex-1" v-loading="table_loading">
					<div style="margin-bottom: 10px;" v-if="groups_list.length != 0">
						<div  class="groups_name">
							<div class="flex-box flex-v-ce margin-bottom">
								<div class="groupsName">
									{{ groups_info.name }}
									<span class="blue" v-if="total > 0">({{ total }}人)</span>
								</div>
								<el-button @click="editGroup" v-if="employeeOrdept" size="medium" style="margin-left:15px;">编辑</el-button>
							</div>
						</div>
					</div>
					<FormBox style="min-width: 800px !important;width:800px !important;">
						<div class="form-item" v-if="newGroupForm.date_interval == 1">
							<div class="form-label">月份</div>
							<div class="form-search">
								<el-date-picker size="medium" v-model="time.month" type="month" :clearable="false" placeholder="请选择月份" value-format="yyyy-MM"></el-date-picker>
							</div>
						</div>
						<div class="form-item" v-if="newGroupForm.date_interval == 2">
							<div class="form-label">季度</div>
							<div class="form-search">
								<Season ref="Seasons" :defaultHint="true" :isActive="true" class="date-picker-width" @confirm="export_quarter_confirm"></Season>
							</div>
						</div>
						<div class="form-item" v-if="newGroupForm.date_interval == 3">
							<div class="form-label">年份</div>
							<div class="form-search">
								<el-date-picker size="medium" v-model="time.year" type="year" :clearable="false" placeholder="请选择年份" value-format="yyyy"></el-date-picker>
							</div>
						</div>
						<div class="form-item">
							<el-checkbox style="margin-right: 10px;" v-model="sort" size="medium" label="由低到高" border></el-checkbox>
							<el-button type="primary" @click="exportExcel" v-if="table_list.length > 0"  size="medium">导 出</el-button>
						</div>
					</FormBox>
					<div style="height: 10px;"></div>	
					<el-alert
						v-if="lastUpdateTime != undefined || lastUpdateTime"
						:title="
							'温馨提醒：排名会在积分产生后自动更新，最近更新时间：' +
								(lastUpdateTime != undefined ? (lastUpdateTime == '' ? '正在更新，请稍候' : lastUpdateTime) : '正在更新，请稍候')
						"
						type="success"
						:closable="false"
						show-icon
					></el-alert>

					<el-table :data="table_list" @row-click="open_detail">
						<el-table-column label="名次" width="80" align="center" >
							<template slot-scope="scope">
								<img v-if="scope.row.rank === 1" src="@/assets/image/statistics_NO1.png" alt="" />
								<img v-if="scope.row.rank === 2" src="@/assets/image/statistics_NO2.png" alt="" />
								<img v-if="scope.row.rank === 3" src="@/assets/image/statistics_NO3.png" alt="" />
								<span v-if="scope.row.rank > 3">{{ scope.row.rank }}</span>
							</template>
						</el-table-column>
						<el-table-column label="姓名" align="left">
							<template slot-scope="scope">
								<div class="flex-box">
									<userImage :user_name="scope.row.name" :img_url="scope.row.img_url" width="50px" height="50px"></userImage>
									<span style="line-height: 50px; padding-left: 10px;">{{ scope.row.name }}</span>
								</div>
							</template>
						</el-table-column>
						<el-table-column show-overflow-tooltip label="部门" align="left" prop="deptName"></el-table-column>
						<el-table-column label="B分" align="left" prop="point"></el-table-column>
						<el-table-column>
							<template slot-scope="scope">
								<span  class="blue" style="cursor: pointer;">查看详情</span>
							</template>
						</el-table-column>
						<template slot="empty">
							<div class="nopoint_box">
								<div class="noimg noperson"></div>
								<span class="title">没有对应的数据</span>
							</div>
						</template>
					</el-table>
					<center style="padding: 20px 0;">
						<el-pagination
							background
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:page-sizes="[10, 20, 50, 100]"
							layout="total, sizes, prev, pager, next"
							:page-size="params.page_size"
							:current-page="params.page"
							:total="total"
						></el-pagination>
					</center>
				</div>
		</div>

		
		<!-- 新增分组 -->
		<el-dialog :title="popupType ? '新增分组' : '编辑分组'" width="500px" :visible.sync="groupShow" :close-on-click-modal="false">
			<div style="width: 400px;margin: 0 auto;">
				<el-form ref="newGroupForm" v-loading="loading" :model="newGroupForm" :rules="rules" label-width="85px" @submit.native.prevent>
					<el-form-item label="分组名称" prop="group_name">
						<el-input v-model="newGroupForm.group_name" placeholder="请输入分组名称" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="分组成员" :required="true">
						<el-input auto-complete="off" v-model="employees" placeholder="请选择分组成员"></el-input>
						<div @click="isEmployeeShow = true" style=" position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 9;"></div>
						<el-dialog title="选择人员" width="700px" :visible.sync="isEmployeeShow" append-to-body :before-close="handleClose">
							<EmployeeSelector
								v-if="isEmployeeShow"
								ref="Employee"
								:user_no_select="false"
								:selected="employees_selected"
								:close_clear_data="true"
								@confirm="move_employee_confirm"
							/>
							<span slot="footer" class="dialog-footer">
								<el-button @click="isEmployeeShow = false">取 消</el-button>
								<el-button type="primary" @click="submitEmployee()">确 定</el-button>
							</span>
						</el-dialog>
					</el-form-item>
					<el-form-item label="积分规则" :required="true">
						<el-input auto-complete="off" v-model="newGroupFormRules" placeholder="全部规则分类"></el-input>
						<div @click="ruleDialogTableVisibles" style="height:36px; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 9;cursor:pointer"></div>
						<div style="margin-bottom:12px;">
							<span style="font-size:13px;color:#8a8a8a;position: absolute; top: 30px; left: 0;">{{ ruleHint }}</span>
						</div>
					</el-form-item>
					<el-form-item label="统计周期" label-width="85px" :required="true" :show-message="false">
						<el-select v-model="options_time_value" placeholder="月度" @change="options_times">
							<el-option v-for="item in options_time" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer flex-v-ce flex-box">
				<el-button type="danger" v-if="!popupType" :loading="delLoad" @click="delItem">删除</el-button>
				<div class="flex-1"></div>
				<el-button @click="resetForm('newGroupForm')">取 消</el-button>
				<el-button type="primary" :loading="saveLoad" @click="subGroupForm('newGroupForm')">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 选择规则 -->
		<el-dialog title="选择规则" width="952px" :visible.sync="ruleDialogTableVisible" @close="closeNone" append-to-body :before-close="handleClose">
			<div style="display:flex;position: relative;width:100%;height:40px">
				<span style="position: absolute;line-height:40px;left:20px">已选：{{ valuesOrLength.length }}条</span>
				<el-input type="text" class="search" style="position: absolute;right:20px;width:20%" placeholder="输入关键字搜索" v-model.trim="keyword" />
			</div>
			<el-row class="architecture">
				<el-col :span="8" class="RuleLeft" style="height:500px">
					<div ref="ruletree" class="department_box">
						<el-tree
							ref="menum"
							node-key="id"
							:accordion="true"
							:highlight-current="true"
							@node-expand="treeOpen"
							:data="treedata"
							:default-expand-all="defaultExpand"
							:props="defaultProps"
							@node-click="handleNodeClick"
							@check="handleCheckChange"
						>
							<div
								content="tree"
								v-if="!data.dis"
								v-show="treedata.length != 0"
								class="custom-tree-node"
								slot-scope="{ node, data }"
								style="font-size: 14px;color: #606266; width:100%; text-align: left;"
							>
								<span class="name">{{ data.name }}</span>
							</div>
						</el-tree>
					</div>
				</el-col>
				<el-col :span="16" class="RuleRight" v-loading="tableLoadingRule" style="height:500px;overflow-y:auto">
					<el-table
						ref="multipleTable"
						:data="tableData_rule"
						tooltip-effect="dark"
						style="width: 100%;cursor:pointer"
						@select="onTableSelect"
						@select-all="selectAll"
						@cell-click="clicktable"
						@selection-change="handleSelectionChange"
					>
						<el-table-column type="selection" width="55"></el-table-column>
						<el-table-column prop="remark" :label="'全选'" show-overflow-tooltip></el-table-column>
					</el-table>
				</el-col>
			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button @click="ruleDialogTableVisible = false">取 消</el-button>
				<el-button type="primary" @click="ruleDialogTableVisibleQD">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import EmployeeSelector from '@/components/EmployeeSelector.vue';
import moment from 'moment';
import Season from '@/components/season';
// let valuesLengths = []
var selecteds = [];
let selectionID = [];
//节流
const delay = (function() {
	let timer = 0;
	return function(callback, ms) {
		clearTimeout(timer);
		timer = setTimeout(callback.ms);
	};
})();
export default {
	name:'custom_rank',
	data() {
		return {
			isEmployeeShow: false,
			ruleHint: '',
			employeeOrdept: !this.$authoritys('employee') && !this.$authoritys('dept_manager'),
			lastUpdateTime: '',
			tableLoadingRule: false, //规则细则加载
			keyword: '',
			values_no: [],
			backups: [], //备份
			valuesLength: [],
			multipleSelection: [],
			valuesOrLength: [],
			itemList: {},
			ruleTrees: [], //所有规则列表
			tableData_rule: [],
			defaultExpand: false,
			defaultProps: {
				children: 'child',
				label: 'name'
			},
			treedata: [],

			ruleDialogTableVisible: false, //编辑-规则-弹出框
			loading: false,
			options_time: [
				{
					value: '1',
					label: '月度'
				},
				{
					value: '2',
					label: '季度'
				},
				{
					value: '3',
					label: '年度'
				}
			],
			options_time_value: '',

			popupType: false,
			item_loading: false,
			table_loading: false,
			groups_info_loading: false,
			groups_info: {
				name: '',
				employees: []
			},
			groups_list: [], //左边分组
			table_list: [],
			total: null,
			time: {
				year: moment().format('YYYY'), //年
				quarter: moment().format('YYYYQ'), //季度
				month: moment().format('YYYY-MM') //月
			},
			params: {
				page: 1,
				page_size: 10,
				group_id: '',
				sort: 'asc',
				rule: '',
				pt_id: 3
			},
			rule_trees: [],
			clickItem: null,
			groupShow: false,
			rules: {
				group_name: [{ required: true, message: '请输入分组名称', trigger: 'blur' }, { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }]
			},
			newGroupForm: {
				group_name: '',
				employees: [],
				items: [],
				date_interval: '1'
			},
			newGroupFormRules: '',
			saveLoad: false,
			delLoad: false,
			show_employee_selector: false,
			employee_not_select: [],
			employees_selected: { employee: [], dept: [] },
			employees: '',
			props: { value: 'id', label: 'name', children: 'child', multiple: true, checkStrictly: true }, //
			sort: false
		};
	},
	watch: {
		'time.month'(val, old_val) {
			this.time.month = val;
			this.params.page = 1;
			this.open_right(this.clickItem);
		},
		'time.year'(val, old_val) {
			this.time.year = val;
			this.params.page = 1;
			this.open_right(this.clickItem);
		},
		// "time.quarter"(val, old_val) {
		//   this.params.quarter = val
		//   // this.params.page = 1;
		//   // this.open_right(this.clickItem);
		// },
		sort(val) {
			this.params.page = 1;
			val ? (this.params.sort = 'desc') : (this.params.sort = 'asc');
			this.open_right(this.clickItem);
		},
		keyword() {
			//函数节流
			if (this.timer) {
				clearTimeout(this.timer);
			}
			//清空 全部
			if (!this.keyword) {
				this.tableData_rule = this.tableData_rule2;
				this.ifPitchOnChild(this.tableData_rule, selecteds);
				return;
			}
			this.timer = setTimeout(() => {
				const result = [];
				this.tableData_rule2.forEach(val => {
					if (val.remark.indexOf(this.keyword) > -1) {
						result.push(val);
					}
				});
				this.tableData_rule = result;
				this.ifPitchOnChild(this.tableData_rule, selecteds);
			}, 100);
		}
	},
	components: { EmployeeSelector, Season },
	methods: {
		open_detail(item) {
			let data={
				userInfo:JSON.stringify(item),
				type:3,
				items:this.clickItem.items,
				dateType:this.newGroupForm.date_interval,
			}
			if(this.newGroupForm.date_interval=='1'){
				data.date=this.time.month
				this.$router.push({path: '/JfDetail',query:data})
			}
			if(this.newGroupForm.date_interval=='2'){
				let date={type:2,year:this.time.quarter.slice(0,4),season:this.time.quarter.slice(4)}
				this.getDate((res)=>{
					data.start_date = this.$moment(Number(res.data.start+'000')).format('YYYY-MM-DD')
					data.end_date = this.$moment(Number(res.data.end+'000')).format('YYYY-MM-DD')
					this.$router.push({path: '/JfDetail',query:data})
				},date)
			}
			if(this.newGroupForm.date_interval=='3'){
				data.date=this.time.year
				this.$router.push({path: '/JfDetail',query:data})
			}
		},
		getDate(func,date) {
			this.$axios('post', '/api/timestamp', date).then(res => {
					func(res.data)
			});
		},
		exportExcel() {
			let months;
			if (this.newGroupForm.date_interval == '1') {
				months = this.time.month.replace('-', '');
			}
			let data={
				group_id:this.clickItem.id,
				date:'',
				sort:this.sort?'desc':'asc',
				employee_id:this.$getUserData().id,
			};
			data.date =this.newGroupForm.date_interval == '1'? months: this.newGroupForm.date_interval == '2'
					? this.time.quarter
					: this.newGroupForm.date_interval == '3'
					? this.time.year
					: '';	
			let str='&group_id='+data.group_id+'&date='+data.date+'&sort='+data.sort;
			window.open(process.env.VUE_APP_BASE_API + 'api/download/groups_export/v2?employee_id='+this.$getUserData().id+str, '_blank');
		},
		submitEmployee() {
			this.$refs.Employee.confirm(); //调用组件的confirm（）；
		},
		//点击某行
		clicktable(row, column, cell, event) {
			let selectedsif = false;
			for (let i in selecteds) {
				if (row.id == selecteds[i]) {
					selectedsif = true;
					selecteds.splice(i, 1);
					this.toggleSelection([row], false);
				}
			}
			if (selectedsif == false) {
				selecteds.push(row.id);
				this.ifPitchOnChild(this.tableData_rule, selecteds);
			}
		},
		//全选
		selectAll(selection) {
			for (let i in selection) {
				selectionID.push(selection[i].id);
			}
			let tableData_rules = []; //当前分页id
			for (let i in this.tableData_rule) {
				tableData_rules.push(this.tableData_rule[i].id);
			}
			selectionID = [...new Set(selectionID)];
			if (selection.length == 0) {
				//全不选
				//判断差值
				var diff = [];
				var tmp = tableData_rules;
				selectionID.forEach(function(val1, i) {
					if (tableData_rules.indexOf(val1) < 0) {
						diff.push(val1);
					} else {
						tmp.splice(tmp.indexOf(val1), 1);
					}
				});
				selectionID = diff.concat(tmp);
			} else {
				//全选
			}
			selecteds = [...new Set(selectionID)];
			this.valuesOrLength = selecteds;
		},
		// 递归判断列表，把最后的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;
		},
		//获取规则
		get_rule_trees() {
			this.$axios('get', '/api/integral/rule/trees', { cycle_type: 1 }).then(res => {
				this.treedata = this.getTreeData(res.data.data.rule_tree || []);
				this.itemList = res.data.data.item_list; //规则
			});
		},
		//点击规则弹出窗口
		ruleDialogTableVisibles() {
			this.tableLoadingRule = true;
			selecteds = this.valuesOrLength;
			//点击弹出窗口并展示所有数据
			let tableData_r = [];
			for (let i in this.itemList) {
				for (let a in this.itemList[i]) {
					tableData_r.push(this.itemList[i][a]);
				}
			}
			this.tableData_rule2 = tableData_r; //赋予筛选数据
			this.tableData_rule = tableData_r;
			this.ruleDialogTableVisible = true;
			this.ifPitchOnChild(this.tableData_rule, selecteds);
		},
		recursion(data, arr) {
			for (let i in data.child) {
				if (data.child.length != 0) {
					arr.push(data.id);
				} else {
					arr.push(data.id);
				}
			}
			return [...new Set(arr)];
		},

		//此方法：拿到当前点击规则分类的所有子节点ID,（为了包含子分类 规则）
		menuIdInit(menus) {
			var _this = this;
			var _menu = menus;
			var menuId = [];
			var len = _menu.length;
			for (var i = 0; i < len; i++) {
				var item = _menu[i];
				if (item.child && item.child.length != 0) {
					var child = item.child;
					for (var j = 0; j < child.length; j++) {
						_menu[len + j] = child[j];
					}
					len = _menu.length;
				}
				menuId.push(item.id);
			}
			return menuId;
		},
		//点击规则分类
		handleNodeClick(data) {
			let dataArr = this.menuIdInit([data]); //调用方法
			this.tableLoadingRule = true;
			this.keyword = ''; //切换规则重置搜索框
			let tableData_r = [];
			for (let i in this.itemList) {
				for (let a in this.itemList[i]) {
					for (let x in dataArr) {
						if (dataArr[x] == this.itemList[i][a].rule_id) {
							tableData_r.push(this.itemList[i][a]);
						}
					}
				}
			}
			this.tableData_rule2 = tableData_r; //赋予筛选数据
			this.tableData_rule = tableData_r;
			this.ifPitchOnChild(this.tableData_rule, selecteds);
		},
		ifPitchOnChild(item, indexID) {
			let pitchOnChild = [];
			for (let i in item) {
				for (let a in indexID) {
					//判断外层的值相不相等
					if (indexID[a] == item[i].id) {
						pitchOnChild.push(item[i]);
					}
				}
			}
			this.toggleSelection(pitchOnChild, true);
		},
		//默认选中
		toggleSelection(rows, selected) {
			if (rows) {
				this.$nextTick(() => {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row, selected);
					});
				});
			} else {
				this.$refs.multipleTable.clearSelection();
			}
			setTimeout(() => {
				//给遮到层，让默认选中的有缓冲时间
				this.tableLoadingRule = false;
			}, 300);
		},
		onTableSelect(rows, row) {
			let selected = rows.length && rows.indexOf(row) !== -1;
			if (selected) {
				selecteds.push(row.id);
			} else {
				for (let i in selecteds) {
					if (row.id == selecteds[i]) {
						selecteds.splice(i, 1);
					}
				}
			}
		},
		//规则弹窗选中时
		handleSelectionChange(val) {},
		//关闭回调
		closeNone() {
			selecteds = [];
		},
		//规则弹窗确定
		ruleDialogTableVisibleQD() {
			let valuesLengths = [];
			for (let i in selecteds) {
				valuesLengths.push(selecteds[i]);
			}
			// valuesLengths = selecteds
			this.valuesOrLength = valuesLengths;
			this.newGroupForm.items = this.valuesOrLength;
			if (this.valuesOrLength.length >= 1) {
				this.newGroupFormRules = this.valuesOrLength.length + '条规则';
				this.ruleHint = '统计已选规则的积分(只选分类不指定规则的积分除外)';
			} else {
				this.newGroupFormRules = '';
				this.ruleHint = '统计所有积分(基础分和工龄分除外)';
			}
			this.ruleDialogTableVisible = false;
		},
		//关闭
		handleClose(done) {
			done();
		},
		// 选择时间-季度
		export_quarter_confirm(val) {
			this.time.quarter = val;
			this.params.page = 1;
			this.open_right(this.clickItem);
		},
		// 树型菜单点击筛选
		handleCheckChange(check, param) {},
		getRuletableData_rule(data) {
			let tableData_ruleP = [];
			for (let i in data) {
			}
			return data;
		},
		getRuleTreeDatas(data) {
			let dates = [];
			for (let i in data) {
				if (data[i].child == undefined) {
					dates.push(data[i]);
				} else {
					this.getRuleTreeData(data[i].child);
				}
			}
			return dates;
		},

		treeOpen() {},

		//点击编辑
		editGroup() {
			this.groupShow = true;
			this.popupType = false;
			this.getGroupsInfo(this.clickItem, true);
		},
		// 获取分类信息
		getGroupsInfo(item, ifs) {
			let self = this;
			if (!item) {
				return false;
			}
			if (!ifs) {
				self.table_loading = true;
				this.params.page = 1;
			}
			this.loading = true;
			self.$axios('get', '/api/integral/statistics/groups/info', { group_id: item.id })
				.then(res => {
					if (res.data.code == 1) {
						// 规则ID
						let itemsBjRule_ID = [];
						for (let i in res.data.data.items) {
							itemsBjRule_ID.push(res.data.data.items[i].id);
						}
						this.valuesOrLength = itemsBjRule_ID;
						if (this.valuesOrLength.length >= 1) {
							this.newGroupFormRules = this.valuesOrLength.length + '条规则';
							this.ruleHint = '统计已选规则的积分(只选分类不指定规则的积分除外)';
						} else {
							this.newGroupFormRules = '';
							this.ruleHint = '统计所有积分(基础分和工龄分除外)';
						}
						this.newGroupForm.date_interval = res.data.data.date_interval;
						this.options_time_value =
							res.data.data.date_interval == 1 ? '月度' : res.data.data.date_interval == 2 ? '季度' : res.data.data.date_interval == 3 ? '年度' : '';
						self.groups_info = res.data.data;
						self.newGroupForm.employees = [];
						self.employees = '';
						self.employees_selected.employee = res.data.data.employees;
						res.data.data.employees.forEach(element => {
							self.newGroupForm.employees.push(element.id);
							self.employees += element.name + ',';
						});
						self.newGroupForm.group_name = res.data.data.name;
						this.loading = false;
						if (!ifs) {
							this.open_right(item, true);
						}
					} else {
						self.$message.error(res.data.data.msg);
						this.loading = false;
					}
				})
				.catch(() => {
					if (!ifs) {
						self.table_loading = false;
					}
				})
				.finally(() => {
					this.loading = false;
				});
		},
		//编辑时间选中
		options_times(val) {
			this.newGroupForm.date_interval = val;
		},
		// 规则分类改变之后请求数据
		rule_null(val) {
			let ruleNullId = [];
			for (let i in val) {
				for (let a in val[i]) {
					ruleNullId.push(val[i][a]);
				}
			}
		},
		// 选人组件提交
		move_employee_confirm(data) {
			this.newGroupForm.employees = [];
			this.employees = '';
			this.employees_selected = data;
			if (data.employee !== null && data.employee.length != 0) {
				data.employee.forEach(element => {
					this.newGroupForm.employees.push(element.id);
					this.employees += element.name + ',';
				});
			}
			this.isEmployeeShow = false;
		},
		// 删除分组
		delItem() {
			let self = this;
			this.$confirm('确定要删除当前分组吗？, 是否继续?', '删除分组', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				let data = { group_id: self.clickItem.id };
				self.delLoad = true;
				self.$axios('post', '/api/integral/statistics/groups/drop', data)
					.then(res => {
						if (res.data.code == 1) {
							self.$message.success(res.data.msg);
							self.groupShow = false;
							self.getGroupsList();
						} else {
							self.$message.error(res.data.msg);
						}
					})
					.finally(() => {
						self.delLoad = false;
					});
			});
		},
		// 提交表单
		subGroupForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.saveFun();
				}
			});
		},
		saveFun() {
			let self = this;
			
			let data = JSON.parse(JSON.stringify(self.newGroupForm));
			if (!self.popupType) {
				data.group_id = self.clickItem.id;
			}
			if(data.items.length==0){
				data.items=this.valuesOrLength
			}
			if(data.employees.length==0){
				this.$message.error("分组人员不能为空");
				return false
			}
			self.saveLoad = true;
			self.$axios('POST', this.popupType ? '/api/integral/statistics/groups/create' : '/api/integral/statistics/groups', data)
				.then(res => {
					if (res.data.code == 1) {
						if (self.popupType) {
							self.popupType = false;
							this.getGroupsList();
						} else {
							self.getGroupsList(self.clickItem.id); //传入当前ID.为了修改后页面不切换
						}
						self.$message.success(res.data.msg);
						const resData = res.data.data;
						self.groups_list.push({
							id: resData.id,
							employees: resData.employees,
							name: name
						}); //左边分组
						self.groupShow = false;
						this.employees = '';
						this.employee_not_select = [];
						this.employees_selected = { employee: [], dept: [] };
					} else {
						self.$message.error(res.data.msg);
					}
				})
				.finally(() => {
					setTimeout(() => {
						self.saveLoad = false;
					}, 500);
				});
		},
		// 重置表单
		resetForm(formName) {
			this.$refs[formName].resetFields();
			this.newGroupForm.employees = [];
			this.employees = '';
			this.employee_not_select = [];
			this.employees_selected = { employee: [], dept: [] };
			this.groupShow = false;
		},
		// 新增分组
		addGroup() {
			//规则
			(this.newGroupFormRules = ''), (this.valuesOrLength = []), (this.options_time_value = '');
			this.groupShow = true;
			this.popupType = true;
			this.employees = '';
			this.employee_not_select = [];
			this.employees_selected = { employee: [], dept: [] };
			this.newGroupForm = {
				group_name: '',
				employees: [],
				rules: [],
				items: [],
				date_interval: '1'
			};
			this.ruleHint = '统计所有积分(基础分和工龄分除外)';
		},
		// 页码变更
		handleCurrentChange(val) {
			this.params.page = val;
			this.open_right(this.clickItem);
		},
		handleSizeChange(val) {
			this.params.page_size = val;
			this.open_right(this.clickItem);
		},
		open_right(item, tim) {
			if (tim) {
				this.time = {
					year: moment().format('YYYY'), //年
					quarter: moment().format('YYYYQ'), //季度
					month: moment().format('YYYY-MM') //月
				};
				if (this.$refs.Seasons) {
					if (this.newGroupForm.date_interval == 2) {
						this.$refs.Seasons.choseQuarter = '';
					}
				}
			}
			this.valuesOrLength = [];
			let self = this;
			self.table_loading = true;
			self.clickItem = item;
			if (!item) {
				self.table_loading = false;
				return false;
			}
			let data = JSON.parse(JSON.stringify(self.params));
			data.rule ? '' : delete data.rule;
			// data.date ? "" : delete data.month;
			data.group_id = item.id;
			let months;
			if (this.newGroupForm.date_interval == '1') {
				months = this.time.month.replace('-', '');
			}
			data.date =
				this.newGroupForm.date_interval == '1'
					? months
					: this.newGroupForm.date_interval == '2'
					? this.time.quarter
					: this.newGroupForm.date_interval == '3'
					? this.time.year
					: '';
			self.$axios('get', '/api/integral/statistics/groups/rank', data,'v2')
				.then(res => {
					if (res.data.code == 1) {
						this.table_list =this.$returnDeptName(res.data.data.list);
						self.total = res.data.data.total;
						self.lastUpdateTime = res.data.data.update_time;
					} else {
						self.$message.error(res.data.data.msg);
					}
				})
				.finally(() => {
					self.table_loading = false;
				});
		},
		// 获取分类列表
		getGroupsList(atPresent, isload) {
			let self = this;
			self.item_loading = true;
			self.$axios('get', '/api/integral/statistics/groups')
				.then(res => {
					if (res.data.code == 1) {
						// self.groups_list = res.data.data.list;//获取所有
						let lists = res.data.data.list;
						if (this.$authoritys('employee')) {
							//员工权限只能查看包含自己的
							let user = this.$getUserData().id;
							let data = [];
							lists.forEach(item => {
								if (item.employees.length == 0) {
									data.push(item);
								} else {
									item.employees.forEach(id=>{
										if(id==user){
											data.push(item);
										}
									})
									
									// if (item.employees.indexOf(user.toString()) != -1) {
									// 	data.push(item);
									// }
								}
							});
							this.$nextTick(()=>{
								this.groups_list = data;
							})
						} else {
							this.$nextTick(()=>{
								this.groups_list = lists;
							})
						}

						self.$nextTick(() => {
							if (atPresent) {
								for (let i in self.groups_list) {
									if (atPresent == self.groups_list[i].id) {
										self.getGroupsInfo(self.groups_list[i]);
									}
								}
							} else {
								if (!isload) {
									self.open_right(self.groups_list[0]);
								}
								self.getGroupsInfo(self.groups_list[0]);
							}
						});
					} else {
						self.$message.error(res.data.data.msg);
					}
				})
				.finally(() => {
					self.item_loading = false;
				});
		}
	},
	mounted() {
		this.get_rule_trees();
		this.getGroupsList(false, true); //避免首次进入调用两次open_right（）方法，加上true判断
	}
};
</script>
<style scoped lang="scss">
.el-checkbox.is-bordered.el-checkbox--medium {
	padding: 9px 20px 7px 10px;
}	
::v-deep .itemClass .el-cascader-menu .el-cascader-menu__wrap li.el-cascader-node {
	height: auto;
	max-width: 500px;
	.el-cascader-node__label {
		white-space: initial;
		overflow: initial;
		text-overflow: initial;
	}
}
.listData {
	position: relative;
	display: table-cell;
	margin: 0 !important;
	padding: 20px;
	min-width: 600px;
	&::after {
		content: ' ';
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 1px;
		background: #ebeef5;
	}
	& .groups_name {
		display: block;
		font-size: 20px;
		color: rgb(48, 49, 51);
		vertical-align: middle;
	}
}
::v-deep .el-menu-item {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	&.is-active {
		background-color: #ecf5ff;
	}
}

.architecture {
	display: flex;
	text-align: center;
	// margin-top:20px;
	padding-left: 0px;
	background-color: #fff;
	width: 100%;
	overflow: hidden;
	cursor: default;
	min-height: calc(60vh - 160px);
}
.architecture .RuleLine {
	display: table-cell;
	width: 1px;
	min-height: 600px;
	background: hsl(0, 2%, 76%);
}
.architecture .RuleLeft {
	display: block;
	text-align: center;
	padding: 20px 10px;
	border-right: none;
	overflow-y: auto;
	overflow-x: none;
}
/*滚动条的宽度*/

.architecture .RuleLeft::-webkit-scrollbar {
	width: 9px;
	height: 9px;
}
.architecture .RuleRight::-webkit-scrollbar {
	width: 9px;
	height: 9px;
}

/*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果*/

.architecture .RuleLeft::-webkit-scrollbar-track {
	width: 6px;
	background-color: #fff0;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
.architecture .RuleRight::-webkit-scrollbar-track {
	width: 6px;
	background-color: #fff0;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}

/*滚动条的设置*/

.architecture .RuleLeft::-webkit-scrollbar-thumb {
	background-color: #fff0;
	background-clip: padding-box;
	min-height: 28px;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
.architecture .RuleRight::-webkit-scrollbar-thumb {
	background-color: #fff0;
	background-clip: padding-box;
	min-height: 28px;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
/*滚动条移上去的背景*/

.architecture .RuleLeft:hover::-webkit-scrollbar-thumb {
	overflow-x: none;
	background-color: rgba(144, 147, 153, 0.3);
}
.architecture .RuleRight:hover::-webkit-scrollbar-thumb {
	background-color: rgba(115, 118, 124, 0.3);
}

.architecture .RuleLeft .company_name {
	position: relative;
	display: block;
	font-family: 'Microsoft YaHei';
	text-align: left;
	padding: 15px 28px 17px;
	cursor: pointer;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border-bottom: 1px #f8f8f8 solid;
}
.architecture .RuleLeft .company_name img {
	position: relative;
	display: inline-block;
	top: 2px;
	width: 18px;
	height: 18px;
	margin-right: 4px;
}
.architecture .RuleLeft ::v-deep .el-button {
	margin-bottom: 16px !important;
}
.architecture .RuleRight {
	position: relative;
	display: table-cell;
	text-align: left;
	padding: 20px;
}
.architecture .RuleRight .title span .sapn {
	display: inline-block;
	vertical-align: middle;
	max-width: 600px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.architecture .RuleRight:after {
	content: ' ';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 1px;
	background: #ebeef5;
}
.architecture .RuleRight .list_box {
	width: 100%;
	background: #fff;
}
.architecture .RuleRight .list_box ::v-deep table {
	font-family: 'Microsoft YaHei';
	width: 100% !important;
	/*max-width:1920px; */
}
.architecture .department_box {
}
.architecture .department_box ::v-deep .el-tree-node {
	display: block;
	text-align: center;
}
.architecture .department_box ::v-deep .el-tree-node__content {
	// padding-left:24px !important;
	height: auto !important;
}

.architecture .department_box ::v-deep .el-tree-node .el-icon-caret-right {
	display: inline-block;
	color: #909399;
	font-size: 16px;
	padding: 6px 8px;
}
.architecture .department_box ::v-deep .el-tree-node .el-icon-caret-right.is-leaf {
	color: transparent;
	cursor: default;
}
.architecture .department_box ::v-deep .el-tree-node .custom-tree-node img {
	margin-top: 0px;
	width: 20px;
}
.architecture .department_box ::v-deep .el-tree-node .custom-tree-node span {
}
.architecture .department_box ::v-deep .el-tree-node__content {
	padding: 12px 0;
	border-bottom: 1px #f8f8f8 solid;
}
.architecture .department_box ::v-deep .el-tree-node__content:hover {
	background: #ecf5ff;
	border-radius: 4px;
}
.architecture .department_box ::v-deep .is-focusable .is-current {
	border-radius: 4px;
}
.architecture .department_box ::v-deep .is-focusable .is-current .name {
	color: #409eff;
	font-weight: normal;
	transition: 0.35s ease-in-out;
}

.elMenuCustomRule_Z {
	overflow-y: auto;
	border: none;
	//   height: 980px;
}
// 滚动条样式
.elMenuCustomRule_Z::-webkit-scrollbar {
	width: 9px;
	height: 9px;
}
.elMenuCustomRule_Z::-webkit-scrollbar-track {
	width: 6px;
	background-color: #fff0;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
/*滚动条的设置*/
.elMenuCustomRule_Z::-webkit-scrollbar-thumb {
	background-color: #fff0;
	background-clip: padding-box;
	min-height: 28px;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
/*滚动条移上去的背景*/
.elMenuCustomRule_Z:hover::-webkit-scrollbar-thumb {
	background-color: rgba(144, 147, 153, 0.3);
}

::v-deep .el-table .cell {
	//让规则不隐藏
	overflow: inherit;
	white-space: normal;
}

.terr-left button {
	margin: 0 auto;
	display: block;
	margin-bottom: 20px;
}
</style>