dd_pc/src/views/set/voluntarilyPoint.vue

<template>
	<div>
		<el-alert class="diy-tip" title="什么是自动积分?" @close="tips_close" v-if="tips_show" type="success" description show-icon>
			<p>系统按照设定的时间（每月/每周/每日) 自动给员工添加B分，比如某员工有一个工程师证，得到公司的认可，公司就会每月给他加分</p>
		</el-alert>
		<div class="all">
			<div class="flex-box">
				<div class="terr-left">
					<div><el-button size="medium" @click="add_grouping()" type="primary">新增加分组</el-button></div>
					<div><el-button size="medium" @click="add_rules_detail" type="primary">新增加分项</el-button></div>

					<!-- 循环分组 -->
					<el-col :span="24" style="padding-right: 0;" v-loading="rule_trees_load">
						<el-menu :default-active="default_active" class="rule_name" :unique-opened="true">
							<el-submenu :index="index.toString()" :key="index" v-for="(item, index) in rule_list">
								<template slot="title">
									<div style="width: 80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; height: 47px;line-height: 47px;">
										<i class="el-icon-edit-outline title_top" @click.stop="edit_grouping(item)"></i>
										<span class="title_top">{{ item.name }}</span>
									</div>
								</template>
								<el-menu-item
									:key="index2"
									:index="returnIndex(index, index2)"
									v-for="(data, index2) in item.child"
									@click="open_rights(data)"
									style="height: 47px;line-height: 47px;"
								>
									<div style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
										<span slot="title">{{ data.remark }}</span>
									</div>
								</el-menu-item>
							</el-submenu>
						</el-menu>
					</el-col>
				</div>

				<div class="terr-right border-right flex-1">
					<el-col :span="24" v-show="rule_list.length == 0 || isShowAdd" style="text-align: center;margin: 0 auto;position: relative;top: 30%;">
						<p><img src="@/assets/image/nodata_default.png" width="200px" alt="" /></p>
						<p style="color: #909399;">
							还没有
							<span v-if="rule_list.length == 0">加分组和</span>
							加分项
						</p>
						<p style="color: #909399;">
							<span v-if="rule_list.length == 0">先</span>
							<span style="color: #26A2FF;cursor:pointer;" v-if="rule_list.length == 0" @click="add_grouping()">【新增加分组】</span>
							<span v-if="rule_list.length == 0">再</span>
							<span v-if="rule_list.length !== 0">请</span>
							<span style="color: #26A2FF;cursor:pointer" @click="add_rules_detail">【新增加分项】</span>
						</p>
					</el-col>

					<el-col v-if="!isShowAdd && right_rules_detail.remark">
						<el-row>
							<el-col :span="24" style="font-size:20px;color:#303133;line-height:36px;">
								{{ right_rules_detail.remark }}
								<span style="padding-left: 10px;">{{ right_rules_detail.min_point }}B分</span>
								<el-button plain style="padding:10px 12px; margin-left: 10px;" @click="edit_rules()">编辑</el-button>
							</el-col>
						</el-row>
						<div class="flex-box btns flex-v-ce">
							<div class="flex-1">
								<el-button size="small" @click="del_item" type="danger" plain>批量移除</el-button>
								<el-button size="small" type="primary" @click="add_employee_show = true">添加人员</el-button>
								<el-button size="small" type="primary" plain @click="toleadShw = true">导入自动积分</el-button>
							</div>
							<div>
								<el-select size="small" v-model="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>
						<el-table ref="multipleTable" :data="table_list" tooltip-effect="dark" style="width: 100%;margin-top:20px;" @selection-change="handleSelectionChange">
							<el-table-column type="selection" width="45"></el-table-column>
							<el-table-column label="姓名">
								<template slot-scope="scope">
									<div style="display:flex">
										<span class="fl">
											<userImage
												width="50px"
												height="50px"
												:user_name="scope.row.employee.name"
												:img_url="scope.row.employee.img_url"
												v-if="scope.row.employee"
											></userImage>
										</span>
										<span style="margin-left: 10px; line-height: 50px; display: inline-block" v-if="scope.row.employee">{{ scope.row.employee.name }}</span>
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="cycle_remark" label="加分周期"></el-table-column>
							<el-table-column prop="update_time" label="更新时间">
								<template slot-scope="scope">
									<div>{{ getUpdate(scope.row.update_time) }}</div>
								</template>
							</el-table-column>
							<template slot="empty">
								<noData></noData>
							</template>
						</el-table>

						<!-- 分页 -->
						<div style=" text-align: center; padding: 20px;">
							<el-pagination
								background
								layout="total, prev, pager, next"
								:current-page="page"
								@current-change="handleCurrentChange"
								:page-sizes="[10, 20, 50, 100]"
								:page-size.sync="pagesize"
								:hide-on-single-page="true"
								:total="total"
							></el-pagination>
						</div>
					</el-col>
				</div>
			</div>

			<!-- 可写公共组建： -->
			<!-- 新增加分组弹出框 -->
			<el-dialog :close-on-click-modal="false" :title="grouping_type ? '编辑加分组' : '新增加分组'" :visible.sync="dialogVisible" width="40%">
				<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label="加分组名称" prop="name" :rules="[{ required: true, message: '请输入加分组名称' }]">
						<el-input type="age" v-model="numberValidateForm.name" placeholder="请输入加分组名称"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer" style=" overflow: hidden;">
					<el-button
						class="fl"
						type="danger"
						v-show="grouping_type"
						@click="del_grouping(numberValidateForm)"
						style="float:left"
						:loading="disabled"
						:disabled="disabled"
					>
						删除
					</el-button>
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="submitForm('numberValidateForm')" :loading="disabled" :disabled="disabled">确 定</el-button>
				</span>
			</el-dialog>

			<!-- 新增加分项 -->
			<el-dialog :title="rules_detail_title ? '编辑加分项' : '新增加分项'" :visible.sync="dialogFormVisible" width="500px">
				<el-form :model="rules_detail_form" ref="rules_detail_form" :rules="rules_rules" label-width="120px">
					<el-form-item label="加分项名称" :label-width="formLabelWidth" prop="remark">
						<el-input v-model="rules_detail_form.remark" placeholder="请输入加分项名称"></el-input>
					</el-form-item>
					<el-form-item label="加分组" :label-width="formLabelWidth" prop="rule_id">
						<el-select v-model="rules_detail_form.rule_id" style="width: 100%;" placeholder="请选择加分组">
							<el-option v-for="item in rule_list" :key="item.value" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="B分" prop="min_point">
						<el-input
							v-model="rules_detail_form.min_point"
							placeholder="请输入B分分值"
							oninput="if(this.value=='0'){this.value='';}else{this.value=this.value.replace(/[^0-9]/g,'')}"
						></el-input>
						<!-- <span data-v-a17f1960 style="display: block; font-size: 12px; color: rgb(96, 98, 102);text-align: left;">固定加分加B分</span> -->
					</el-form-item>
					<!-- <el-form-item label="是否与考勤挂钩" prop="is_attendance"><el-switch v-model="is_attendance"></el-switch></el-form-item> -->
					<div style="overflow: hidden;">
						<el-button
							type="danger"
							v-show="rules_detail_title"
							class="fl"
							@click="del_rules_detail(rules_detail_form)"
							style="float:left"
							:loading="disabled"
							:disabled="disabled"
						>
							删除
						</el-button>

						<el-button
							v-if="rules_detail_title"
							class="fr"
							type="primary"
							@click="editRule('rules_detail_form')"
							style="float:right"
							:loading="disabled"
							:disabled="disabled"
						>
							确 定
						</el-button>
						<el-button v-else class="fr" type="primary" @click="editRule('rules_detail_form')" style="float:right" :loading="disabled" :disabled="disabled">
							确 定
						</el-button>
						<el-button class="fr" @click="rules_detail_close('rules_detail_form')" style="float:right">取 消</el-button>
					</div>
				</el-form>
			</el-dialog>

			<el-dialog title="添加人员" :visible.sync="add_employee_show" :before-close="add_employee_close" width="700px">
				<el-form :model="add_employee_form" ref="add_employee_form" label-width="80px">
					<el-form-item label="加分周期" :rules="[{ required: true, message: '请选择加分周期', trigger: 'change' }]">
						<el-select v-model="task_cycle_name" placeholder="请选择加分周期">
							<el-option v-for="item in task_cycle" :key="item.value" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<div v-loading="staff_loading">
						<EmployeeSelector
							v-if="add_employee_show"
							:max="add_employee_max"
							:user_no_select="false"
							@confirm="add_employee_confirm"
							ref="Employee"
						></EmployeeSelector>
					</div>
					<el-form-item style="text-align: right; margin-bottom: 0;margin-top: 20px;">
						<el-button @click="add_employee_close()">取消</el-button>
						<el-button type="primary" @click="sub_add_employee('add_employee_form')" :loading="disabled" :disabled="disabled">完成</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>

			<!-- 导入规则 -->
			<!-- <el-dialog title="导入自动积分" :visible.sync="import_rules_show" width="500px" @before-close="close_import">
			  <el-row>
			    <el-col :span="12">
			      <div style="text-align: center;line-height: 34px;">
			        <p>1、导出模板，填写好规则</p>
			        <p><img src="../../assets/image/rules_mould.png" alt="" /></p>
			        <p>规则表</p>
			        <p>
			          <a target="_blank" :href="publicBASE_API + '/api/download/point_auto'"><el-button type="primary" >下载模板</el-button></a>
			        </p>
			      </div>
			    </el-col>
			    <el-col :span="12">
			      <div style="text-align: center;line-height: 34px;">
			        <p>2、上传填好的规则表</p>
			        <p><img src="../../assets/image/rules_mould1.png" alt="" /></p>
			        <p>仅支持xls、xlsx格式文件</p>
			        <el-upload
			          class="upload-demo"
			          :headers="ATOKEN"
			          :data="{ type: 'auto_integral' }"
			          ref="upload"
			          :limit="1"
					  :action="action"
			          :on-remove="handleRemove"
			          :on-success="handleSuccess"
			          :before-upload="beforeFilesUpload"
			          :file-list="fileList"
			        >
			          <el-button slot="trigger" type="primary">选取文件</el-button>
			        </el-upload>
			      </div>
			    </el-col>
			  </el-row>
			</el-dialog> -->

			<toLead :visible.sync="toleadShw" :nowIndex.sync="nowIndex" :tolead="toleadResult" @confirm="tealConfirm" :export_type="'auto_point'" :dstyle="'padding: 40px 80px;'">
				<template slot="1">
					<el-row v-if="nowIndex == 1">
						<el-col :span="12">
							<div style="text-align: center;line-height: 34px;">
								<p>1、导出模板，填写好规则</p>
								<p><img src="../../assets/image/rules_mould.png" alt="" /></p>
								<p>规则表</p>
								<p>
									<a target="_blank" :href="publicBASE_API + '/api/download/point_auto'"><el-button type="primary">下载模板</el-button></a>
								</p>
							</div>
						</el-col>
						<el-col :span="12">
							<div style="text-align: center;line-height: 34px;">
								<p>2、上传填好的规则表</p>
								<p><img src="../../assets/image/rules_mould1.png" alt="" /></p>
								<p>仅支持xls、xlsx格式文件</p>
								<el-upload
									class="upload-demo"
									:headers="ATOKEN"
									:data="{ type: 'auto_integral' }"
									ref="upload"
									:limit="1"
									:action="action"
									:on-remove="handleRemove"
									:on-success="handleSuccess"
									:before-upload="beforeFilesUpload"
									:file-list="fileList"
									:on-progress="handleOnthecross"
								>
									<el-button slot="trigger" type="primary">选取文件</el-button>
								</el-upload>
								<!-- <p><el-button type="primary" @click="submitUpload" :loading="save_loading" v-show="import_btn_show" block>导入</el-button></p> -->
							</div>
						</el-col>
					</el-row>
				</template>
			</toLead>
		</div>
	</div>
</template>

<script>
import EmployeeSelector from '@/components/EmployeeSelector';

import toLead from '@/components/toLead';
export default {
	data() {
		return {
			pd_tianjia: false,
			default_active: '0-0',
			table_list: [],
			tips_show: false,
			rule_trees_load: false,
			dialogVisible: false,

			rules_detail_show: false, //是否弹出添加人员弹窗
			add_employee_visible: false,
			add_employee_max: 0,
			add_employee_show: false,

			task_cycle_name: '',
			add_employee_form: {
				employee_ids: []
			},

			isShowAdd: false,
			del_arr: {
				ids: []
			},
			val_page: '', //存入某一页文本框选中的数量
			page: 1, //默认页数  为1
			total: 0, //返回的总数据
			pagesize: 10, //每页显示的数据
			table_loading: false,
			staff_loading: false,

			dialogFormVisible: false,
			form: {
				name: '',
				region: '',
				date1: '',
				date2: '',
				delivery: false,
				type: [],
				resource: '',
				desc: ''
			},
			formLabelWidth: '120px',

			numberValidateForm: {
				name: ''
			},
			disabled: false, //按钮不能被多次点击
			grouping_type: '',
			rules_detail_title: '',
			rule_list: [], //分类集合
			item_list: [], //规则集合

			right_rules_detail: {},

			add_employee_id: '',
			rules_detail_form: {
				rule_id: '',
				range_type: '1',
				prize_type: '1',
				min_point: '',
				remark: '',
				is_attendance: '0',
				cycle_type: '2',
				pt_id: '3'
			},
			is_attendance: false,
			rules_rules: {
				remark: [
					{
						required: true,
						message: '请输入规则名称',
						trigger: 'blur'
					},
					{
						max: 100,
						message: '分类名称不能大于100个字符',
						trigger: 'blur'
					}
				],
				min_point: [
					{
						required: true,
						message: '请输入积分',
						trigger: 'blur'
					}
				],
				rule_id: [
					{
						required: true,
						message: '请选择分类',
						trigger: 'blur'
					}
				]
			},
			task_cycle: [
				{
					name: '每天0点自动加分',
					value: 1
				},
				{
					name: '每周一自动加分',
					value: 2
				},
				{
					name: '每月1号自动加分',
					value: 3
				}
			],
			action: process.env.VUE_APP_BASE_API + 'api/integral/auto/import',
			publicBASE_API: process.env.VUE_APP_BASE_API,
			save_loading: false,
			ATOKEN: { 'A-TOKEN': this.$getToken(), Accept: 'application/vnd.test.v2+json' },
			import_btn_show: false,
			fileList: [],
			file: null,
			import_rules_show: false, //导出弹窗

			keyword: '',
			employee_map: [],
			employee_id: '',
			selectData: {},
			//导入相关
			toleadShw: false,
			nowIndex: 1,
			toleadResult: {}
		};
	},
	components: {
		EmployeeSelector,
		toLead
	},
	created() {
		this.getEmployee();
	},
	watch: {
		toleadShw(val) {
			if (val) this.nowIndex = 1;
		},
		employee_id(val) {
			this.page = 1;
			this.open_right(this.selectData);
		}
	},
	mounted() {
		if (localStorage.getItem('voluntarilyPoint')) {
			this.tips_show = false;
		} else {
			this.tips_show = true;
		}
		this.get_role_lists(true);
	},
	methods: {
		//获取员工列表
		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;
				})
				.finally(err => {});
		},
		getUpdate(date) {
			return this.$moment.unix(date).format('YYYY-MM-DD HH:mm:ss');
		},
		// 搜索
		onFilterChanged() {},
		close_import() {
			this.import_rules_show = false;
			this.import_btn_show = false;
			this.$refs.upload.clearFiles();
		},
		submitUpload() {
			this.save_loading = true;
			let params = {
				file: this.file
			};
			this.$axios('post', '/api/integral/auto/import', params)
				.then(res => {
					if (res.data.code == 1) {
						// this.import_rules_show = false;
						this.close_import(); //成功之后关闭并清除选中的文件
						this.$message.success({ message: res.data.msg });
						this.get_rule_trees();
					} else {
						this.$message({ type: 'error', message: res.data.msg });
					}
				})
				.catch(() => {})
				.finally(() => {
					this.save_loading = false;
				});
		},
		//导入
		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;
			}
		},
		tealConfirm() {
			this.page = 1;
			this.open_right(this.selectData);
		},
		handleOnthecross(event, file, fileList) {
			this.nowIndex = 2;
		},
		handleSuccess(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;
			if (response.code == 1) {
				if (response.data.length > 0) {
					var htmls = response.data;
					var str = "<div class='red'></div>";
					htmls.forEach(item => {
						str += `<div>${item.errors}</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.close_import();
					this.page = 1;
					this.open_right(this.selectData);
				}
			} else {
				this.$message.error({ message: response.msg });
				this.close_import();
			}
		},
		handleRemove(file, fileList) {
			if (fileList !== null && fileList.length != 0) {
				this.import_btn_show = true;
			} else {
				this.import_btn_show = false;
			}
		},

		returnIndex(str, str2) {
			return str + '-' + str2;
		},
		handleCurrentChange(val) {
			this.page = val;
			this.open_right();
		},
		open_rights(data) {
			this.page = 1;
			this.selectData = data;
			this.open_right(data);
		},
		// 组建
		add_employee_confirm(val) {
			this.add_employee_form.employee_ids = [];
			if (val.employee.length !== 0) {
				val.employee.forEach(element => {
					this.add_employee_form.employee_ids.push(element.id);
				});
			}
		},

		// 添加成员点击取消
		add_employee_close() {
			this.add_employee_show = false;
		},

		// 添加成员点击完成
		sub_add_employee(form) {
			let self = this;
			if (!self.task_cycle_name) {
				self.$message.error('请选择加分周期');
				return false;
			}
			this.$refs.Employee.confirm(); //调用组件的confirm（）；
			if (this.add_employee_form.employee_ids.length <= 0) {
				this.$message.error('请选择员工');
				return false;
			}
			let data = {
				employee_ids: this.add_employee_form.employee_ids,
				task_cycle: self.task_cycle_name,
				item_id: self.add_employee_id,
				rule_id: self.add_rulse_id
			};
			self.$refs[form].validate(valid => {
				if (valid) {
					if (data.rule_id == '' || data.item_id == '') {
						self.$message.error('请先选择细则');
					} else {
						this.disabled = true;
						self.staff_loading = true;
						self.$axios('post', '/api/integral/auto/add', data)
							.then(res => {
								if (res.data.code == 1) {
									self.$message.success('此次操作成功' + res.data.data.success + '条,失败' + res.data.data.error + '条,已经存在的' + res.data.data.exist + '条');
									self.open_right();
								} else {
									self.$message.error(res.data.msg);
								}
							})
							.finally(() => {
								self.add_employee_show = false;
								self.staff_loading = false;
								this.disabled = false;
							});
					}
				} else {
					return false;
				}
			});
		},
		handleSelectionChange(val) {
			this.del_arr.ids = [];
			val.forEach(element => {
				this.del_arr.ids.push(element.id);
			});
			this.val_page = val;
		},
		// 批量删除
		del_item() {
			let self = this;
			if (self.del_arr.ids.length !== 0) {
				self.$confirm('此操作将永久删除该人员的自动加分, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.$axios('post', '/api/integral/auto/delete/many', self.del_arr)
						.then(res => {
							if (res.data.code == 1) {
								self.$message.success(res.data.msg);
								// 判断当页的总数与选中的数量是否相等，如果相等，此页就无数据，就请求上一页的数据
								if (this.table_list.length == this.val_page.length) {
									if (this.page !== 1) {
										//判断不在第一页的时候执行
										this.page = this.page - 1;
									}
								}
								self.open_right();
							} else {
								self.$message.error(res.data.msg);
							}
						})
						.finally(() => {
							self.loading = false;
						});
				});
			} else {
				self.$message.error('请选择要移除的人员');
			}
		},
		// 关闭提示语
		tips_close() {
			localStorage.setItem('voluntarilyPoint', 'true');
			this.tips_show = false;
		},
		//新增加分项
		add_rules_detail() {
			this.rules_detail_form = {
				rule_id: '',
				range_type: '1',
				prize_type: '1',
				min_point: '',
				remark: '',
				is_attendance: '0',
				cycle_type: '2',
				pt_id: '3'
			};
			this.dialogFormVisible = true;
			this.rules_detail_title = false;
		},
		//编辑加分项
		editRule(form) {
			let self = this;
			let data = null;
			self.rules_detail_form.max_point = self.rules_detail_form.min_point;
			if (this.rules_detail_title == false) {
				data = {
					items: [self.rules_detail_form]
				};
			} else {
				self.rules_detail_form.item_id = self.rules_detail_form.id;
				data = self.rules_detail_form;
				data.sync = 2;
			}
			self.$refs[form].validate(valid => {
				if (valid) {
					this.disabled = true;
					// if (this.is_attendance) {
					// 	self.rules_detail_form.is_attendance = 1;
					// } else {
					// 	self.rules_detail_form.is_attendance = 0;
					// }
					var url = this.rules_detail_title ? 'api/integral/rule/items/edit' : '/api/integral/rule/items';
					self.$axios('post', url, data)
						.then(res => {
							// setTimeout(() => {
							// 	this.is_attendance = false;
							// }, 300);
							if (res.data.code == 1) {
								self.$message.success(res.data.msg);
								self.rules_detail_show = false;
								if (this.rules_detail_title) {
									//当为编辑时
									if (self.rules_detail_form.rule_id != self.right_rules_detail.rule_id) {
										//当编辑规则修改了上级时
										self.get_role_lists(true);
									} else {
										//正常编辑
										self.get_role_lists();
										self.right_rules_detail.remark = data.remark;
										self.right_rules_detail.min_point = data.min_point;
									}
								} else {
									//当为添加时
									self.add_employee_id = res.data.data.item_id; //规则ID
									self.add_rulse_id = self.rules_detail_form.rule_id; //分类ID
									self.get_role_lists(true, true);
									setTimeout(() => {
										self.add_employee_show = true;
									}, 600);
								}
							} else {
								self.$message.error(res.data.msg);
							}
						})
						.finally(() => {
							this.dialogFormVisible = false;
							self.disabled = false;
						});
				} else {
					return false;
				}
			});
		},
		//点击取消
		rules_detail_close(form) {
			this.dialogFormVisible = false;
			this.rules_detail_show = false;
			this.$refs[form].resetFields();
		},
		//获取右边表格数据
		open_right(data, updata) {
			let self = this;
			self.table_loading = true;
			this.isShowAdd = false;
			if (data && !updata) {
				self.add_employee_id = data.id;
				self.add_rulse_id = data.rule_id;
				self.right_rules_detail = data;
			} else if (updata) {
				self.right_rules_detail = data;
			} else {
				self.add_employee_id = self.right_rules_detail.id;
				self.add_rulse_id = self.right_rules_detail.rule_id;
			}
			var params = {
				item_id: self.add_employee_id || '',
				employee_id: self.employee_id || '',
				page: self.page,
				page_size: Number(this.pagesize)
			};
			self.$axios('get', '/api/integral/auto/list', params)
				.then(res => {
					if (res.data.code == 1) {
						self.table_list = res.data.data.list || [];
						self.total = res.data.data.total;
					} else {
						self.$message.error(res.data.msg);
					}
				})
				.finally(() => {
					self.table_loading = false;
				});
		},

		//  编辑规则
		edit_rules() {
			this.rules_detail_title = true;
			this.dialogFormVisible = true;
			this.rules_detail_form = JSON.parse(JSON.stringify(this.right_rules_detail));
			// this.is_attendance = this.rules_detail_form.is_attendance == '0' ? false : true;
		},
		// 删除规则
		del_rules_detail(item) {
			this.$confirm('此操作将永久删除该加分项, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.disabled = true;
				this.$axios('post', '/api/integral/rule/items/destroy', { item_ids: JSON.stringify([item.id]) })
					.then(res => {
						if (res.data.code == 1) {
							this.$message.success('删除成功');
							this.rules_detail_show = false;
							this.get_role_lists(true);
						} else {
							this.$message.error(res.data.msg);
							this.get_role_lists();
						}
					})
					.finally(() => {
						this.dialogFormVisible = false;
						this.disabled = false;
					});
			});
		},

		//新增加分组展示不同渲染
		add_grouping() {
			this.numberValidateForm = {
				name: ''
			};
			this.dialogVisible = true;
			this.grouping_type = false;
		},
		// 新增加分组
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					let data = this.grouping_type
						? {
								rule_id: this.numberValidateForm.id,
								pid: '0',
								name: this.numberValidateForm.name
						  }
						: {
								cycle_type: '2',
								pid: '0',
								name: this.numberValidateForm.name
						  };
					this.disabled = true;
					var url = this.grouping_type ? '/api/integral/rule/edit' : '/api/integral/rule';
					this.$axios('post', url, data)
						.then(res => {
							if (res.data.code == '1') {
								this.get_role_lists();
								this.$message.success(this.grouping_type ? '修改积分规则' : res.data.msg);
							}
						})
						.finally(() => {
							this.dialogVisible = false;
							this.disabled = false;
						});
				} else {
					return false;
				}
			});
		},
		//修改分组
		edit_grouping(item) {
			this.dialogVisible = true;
			this.numberValidateForm = JSON.parse(JSON.stringify(item));
			this.grouping_type = true;
		},
		//删除分组
		del_grouping(item) {
			this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.disabled = true;
					this.$axios('post', '/api/integral/rule/destroy', { rule_id: item.id })
						.then(res => {
							if (res.data.code == 1) {
								this.get_role_lists();
								this.$message.success('删除成功');
							}
						})
						.finally(() => {
							this.dialogVisible = false;
							this.disabled = false;
						});
				})
				.catch(() => {
					setTimeout(() => {
						this.dialogVisible = false;
					}, 300);
				});
		},
		// 获取初始化数据
		get_role_lists(is, noUpdata) {
			this.table_loading = true;
			this.rule_trees_load = true;
			this.$axios('get', '/api/integral/rule/trees', { cycle_type: '2' })
				.then(res => {
					var rule_list = res.data.data.rule_tree || [];
					var item_list = res.data.data.item_list || [];
					var itemListAll = [];
					for (let i in item_list) {
						for (let k in item_list[i]) {
							itemListAll.push(item_list[i][k]);
						}
					}
					rule_list.map(item => {
						item.child = itemListAll.filter(item2 => {
							return item2.rule_id == item.id;
						});
					});
					this.rule_list = rule_list;
					this.item_list = itemListAll;
					if (is) {
						this.default_active = '';
						if (rule_list[0].child[0]) {
							this.right_rules_detail = {};
							this.table_list = [];
							this.page = 1;
							this.selectData = rule_list[0].child[0];
							this.open_right(rule_list[0].child[0], noUpdata);
							setTimeout(() => {
								this.default_active = '0-0';
							}, 500);
						} else {
							this.right_rules_detail = {};
							this.isShowAdd = true;
						}
					}
				})
				.finally(err => {
					setTimeout(() => {
						this.rule_trees_load = false;
						this.table_loading = false;
					}, 700);
				});
		}
	}
};
</script>

<style scoped="scoped" lang="scss">
.rule_name {
	border-right: 0;
	margin-top: 16px;
	li {
		border-bottom: 1px #f8f8f8 solid;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		::v-deep .el-submenu__title {
			padding: 0 10px !important;
			i.el-submenu__icon-arrow.el-icon-arrow-down {
				color: #909399 !important;
			}
		}
		// li:hover .el-submenu__title {
		// 	background: #e7f6ff;
		// }
		// ul {
		// 	li.is-active {
		// 		background-color: #e7f6ff !important;
		// 	}
		// }
	}
	// ::v-deep .is-opened .el-submenu__title .title_top {
	// 	color: #409eff !important;
	// }
	// ::v-deep .is-opened .el-menu .el-menu-item span {
	// 	color: #333;
	// }
	// ::v-deep .is-opened .el-menu .is-active span {
	// 	color: #409eff;
	// }
}
::v-deep .el-submenu__title {
	height: 47px !important;
	line-height: 47px !important;
}
.rule_list {
	position: relative;
	display: table-cell;
}

.rule_list:after {
	content: ' ';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 1px;
	background: #ebeef5;
}
.terr-right {
	min-height: calc(100vh - 224px);
	.name {
		height: 100%;
		font-size: 18px;
		margin-right: 20px;
	}

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