dd_pc/src/views/set/rule.vue

<template>
	<div class="all-box">
		<!-- 头部提示 -->
		<el-alert class="diy-tip" title="如何使用积分规则?" type="success" @close="tips_close" v-if="tips_show" description show-icon>
			<p>先【添加规则分类】，再【添加规则】</p>
		</el-alert>
		<div class="all">
			<div class="flex-box" v-loading="rule_loading">
				<div class="terr-left">
					<el-button size="medium" @click="add_class" type="primary">+ 添加规则分类</el-button>
					<div class="rule_class_box">
						<el-tree accordion :data="rule_tree" class="cate-tree" :props="defaultProps" :highlight-current="true" @node-click="handleNodeClick"></el-tree>
					</div>
				</div>
				<div class="terr-right border-right flex-1">
					<div class="flex-box flex-v-ce">
						<div class="name">{{ selectItem.name }}</div>
						<el-button size="medium" plain v-if="selectItem.id" @click="edit_class">编辑</el-button>
					</div>
					<div class="flex-box ruleSearch">
						<div class="flex-box btns flex-v-ce">
							<el-button size="small" @click="del_item" type="danger" plain>批量删除</el-button>
							<el-button size="small" @click="add_rule" type="primary">添加规则</el-button>
							<el-button size="small" type="success" @click="toleadShw = true" plain>导入规则</el-button>
							<el-button size="small" type="success" @click="derivedRule" plain>导出规则</el-button>
						</div>
						<div class="" style="display:inline-block; width:180px;margin:20px 0 0 10px;">
							<el-input
								placeholder="搜索规则内容"
								ref="search-bar"
								v-model="keyword"
								class="input-with-select"
								@keyup.enter.native="onFilterChanged"
								style=""
							>
								<el-button slot="append" icon="el-icon-search" @click="onFilterChanged"></el-button>
							</el-input>
						</div>
					</div>
							
					<el-table stripe ref="multipleTable" :data="item_list" tooltip-effect="dark" @selection-change="handleSelectionChange" @row-click="editDetails" align="center">
						<el-table-column type="selection" width="55"></el-table-column>
						<el-table-column prop="remark" label="内容" align="left"></el-table-column>
						<el-table-column label="分值" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.range_type == 1">
									<span :class="scope.row.min_point > 0 ? 'red' : 'green'">{{ scope.row.min_point }} {{ scope.row.pt_Obj.name }}</span>
								</div>
								<div v-if="scope.row.range_type == 2">
									<span :class="scope.row.min_point > 0 ? 'red' : 'green'">{{ scope.row.min_point }}</span>
									至
									<span :class="scope.row.max_point > 0 ? 'red' : 'green'">{{ scope.row.max_point }} {{ scope.row.pt_Obj.name }}</span>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="remark" label="操作" align="center">
							<template slot-scope="scope">
								<span @click.stop="ruleQRcode(scope.row)" class="lookQrcode">查看二维码</span>
								<span class="blue" style="padding-left: 10px;cursor: pointer;">编辑</span>
							</template>
						</el-table-column>
						<template slot="empty">
							<noData></noData>
						</template>
					</el-table>
				</div>
			</div>
		</div>
		<el-dialog @close="closeCode" :visible.sync="innerVisible" width="444px" append-to-body>
			<div style="border-radius: 15px;border: 1px solid #f1f1f1;padding: 10px; width: 346px;box-sizing: border-box;margin: 0 auto;">
				<div id="qrcode" ref="qrcode"></div>
			</div>
			<div class="qrcodesave" ><span @click.stop="downloadE">下载保存此二维码</span></div>
		</el-dialog>

		<!-- 编辑添加分类 -->
		<el-dialog
			:title="class_type == 'add' ? '添加规则分类' : '编辑规则分类'"
			:visible.sync="class_show"
			@close="add_dept_close('dept_formdata')"
			:close-on-click-modal="false"
			width="500px"
		>
			<el-form :model="dept_formdata" ref="dept_formdata" :rules="dept_formdata_rules" label-width="80px">
				<el-form-item label="规则分类" prop="name"><el-input v-model="dept_formdata.name" maxlength="10" show-word-limit></el-input></el-form-item>
				<el-form-item label="上级分类">
					<el-cascader
						ref="dept"
						v-model="dept_formdata.pid"
						:options="rule_tree"
						:props="{ checkStrictly: true, label: 'name', value: 'id', children: 'child' }"
						clearable
						filterable
					></el-cascader>
				</el-form-item>
				<div class="flex-box">
					<el-button type="danger" @click="del_dept" v-show="class_type == 'edit'">删除分类</el-button>
					<div class="flex-1"></div>
					<el-button @click="add_dept_close('dept_formdata')">取消</el-button>
					<el-button type="primary" @click="submit_add_dept('dept_formdata')" :loading="dept_loading" :disabled="dept_loading">确定</el-button>
				</div>
			</el-form>
		</el-dialog>

		<!-- 添加编辑规则 -->
		<el-dialog :title="rule_type == 'add' ? '添加规则' : '编辑规则'" :visible.sync="rule_show" :close-on-click-modal="false" width="600px">
			<el-form :model="rules_detail_form" ref="rules_detail_form" :rules="rules" label-width="80px">
				<el-form-item label="规则内容" prop="remark">
					<el-input v-model="rules_detail_form.remark" placeholder="请输入规则内容" type="textarea" :rows="5" maxlength="300" show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="所属分类" prop="rule_id">
					<div style="position: relative;">
						<div
							style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 9;"
							@click="not_data"
							v-show="rule_tree !== null && rule_tree.length == 0"
						></div>
						<el-cascader
							ref="dept2"
							placeholder="请选择分类"
							v-model="rules_detail_form.rule_id"
							:options="rule_tree"
							:props="{ checkStrictly: true, label: 'name', value: 'id', children: 'child' }"
							clearable
							filterable
						></el-cascader>
					</div>
				</el-form-item>
				<el-form-item label="规则类型" prop="pt_id">
					<el-radio v-model="rules_detail_form.pt_id" :label="item.id" v-for="(item, index) in point_types" :key="index" v-show="item.name !== '绩效分'">
						{{ item.name }}
					</el-radio>
				</el-form-item>
				<el-form-item label="规则积分" prop="range_type">
					<el-radio-group v-model="rules_detail_form.range_type">
						<el-radio :label="item.value" v-for="(item, index) in range_type_arr" :key="index">{{ item.name }}</el-radio>
					</el-radio-group>
				</el-form-item>
				<div class="flex-box flex-v-ce">
					<el-form-item class="select_width">
						<el-input placeholder="请输入分值" v-model.number="rules_detail_form.min_point" type="age" class="input-with-select">
							<el-select v-model="integral_select_name1" slot="prepend" placeholder="请选择类型">
								<el-option v-for="(item, index) in integral_select" :key="index" :label="item.name" :value="item.value"></el-option>
							</el-select>
						</el-input>
					</el-form-item>

					<div v-if="rules_detail_form.range_type == 2" style="position: relative;bottom: 10px;padding: 0 10px;">至</div>
					<el-form-item v-if="rules_detail_form.range_type == 2" class="form-right select_width">
						<el-input placeholder="请输入分值" v-model.number="rules_detail_form.max_point" type="age" class="input-with-select">
							<el-select v-model="integral_select_name2" slot="prepend" placeholder="请选择类型">
								<el-option v-for="(item, index) in integral_select" :key="index" :label="item.name" :value="item.value"></el-option>
							</el-select>
						</el-input>
					</el-form-item>
				</div>

				<div class="flex-box flex-v-ce">
					<el-button type="danger" @click="del_rule" :loading="delRule_loading" :disabled="delRule_loading" v-show="rule_type == 'edit'">删除规则</el-button>
					<div class="flex-1"></div>
					<el-button @click="rule_close('rules_detail_form')">取消</el-button>
					<el-button type="primary" v-show="rule_type == 'add'" :loading="rule_loading2" :disabled="rule_loading2" @click="add_submit_rule('rules_detail_form')">
						确定
					</el-button>
					<el-button type="primary" v-show="rule_type == 'edit'" :loading="rule_loading2" :disabled="rule_loading2" @click="edit_submit_rule('rules_detail_form')">
						确定
					</el-button>
				</div>
			</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 class="text-center">
						<p>1、下载规则模版，填写好规则</p>
						<p><img src="@/assets/image/rules_mould.png" alt="" /></p>
						<p>规则表</p>
						<p>
							<a target="_blank" :href="downloadUrl"><el-button type="primary">下载模板</el-button></a>
						</p>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="text-center">
						<p>2、上传填好的规则表</p>
						<p><img src="@/assets/image/rules_mould1.png" alt="" /></p>
						<p>仅支持xls、xlsx格式文件</p>
						<el-upload
							class="upload-demo"
							:headers="ATOKEN"
							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="'rule_items'" :dstyle="'height:180px;padding: 40px 80px;'">
			<template slot="1">
				<el-row v-if="nowIndex == 1">
					<el-col :span="12">
						<div class="text-center">
							<p>1、下载规则模版，填写好规则</p>
							<p><img src="@/assets/image/rules_mould.png" alt="" /></p>
							<p>规则表</p>
							<span>
								<a target="_blank" :href="downloadUrl"><el-button type="primary">下载模板</el-button></a>
							</span>
						</div>
					</el-col>
					<el-col :span="12">
						<div class="text-center">
							<p>2、上传填好的规则表</p>
							<p><img src="@/assets/image/rules_mould1.png" alt="" /></p>
							<p>仅支持xls、xlsx格式文件</p>
							<el-upload
								class="upload-demo"
								:headers="ATOKEN"
								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>
						</div>
					</el-col>
				</el-row>
			</template>
		</toLead>
	</div>
</template>

<script>

import QRCode from 'qrcodejs2';
import toLead from '@/components/toLead';
export default {
	data() {
		return {
			keyword:'',//搜索关键字
			
			ruleDetails: {},
			innerVisible: false,
			bodyLoad: false,
			action: process.env.VUE_APP_BASE_API + 'api/rule/import',
			downloadUrl: process.env.VUE_APP_BASE_API + 'api/download/rule_item',
			ATOKEN: { 'A-TOKEN': this.$getToken(), Accept: 'application/vnd.test.v2+json' },
			tips_show: true,
			rule_loading: false,
			rule_tree: [],
			item_list: [],
			all_item_list: [],
			defaultProps: {
				id: 'id',
				children: 'child',
				label: 'name'
			},
			selectItem: { name: '积分规则' }, //选择的分类
			//添加分类
			class_show: false,
			delRule_loading: false,
			dept_formdata_rules: {
				name: [
					{
						required: true,
						message: '请输入规则分类',
						trigger: 'blur'
					},
					{
						min: 2,
						max: 20,
						message: '长度在 2 到 20 个字符',
						trigger: 'blur'
					}
				]
			},
			dept_formdata: {
				name: '',
				pid: '0',
				cycle_type: '1'
			},
			class_type: 'add',
			dept_loading: false,

			// 规则相关
			del_item_id: [], //选择规则ID集合
			rule_loading2: false,
			rule_type: 'add',
			rule_show: false,
			rules_detail_form: {
				rule_id: '',
				range_type: '1',
				prize_type: '0',
				min_point: '',
				max_point: '',
				min_point2: '',
				max_point2: '',
				remark: '',
				is_attendance: '0',
				cycle_type: '1',
				pt_id: 0
			},
			rules: {
				remark: [
					{
						required: true,
						message: '请输入规则名称',
						trigger: 'blur'
					}
				],
				rule_id: [
					{
						required: true,
						message: '请选择分类',
						trigger: 'change'
					}
				]
			},
			integral_select_name1: '1',
			integral_select_name2: '1',
			point_types: [],
			range_type_arr: [
				{
					name: '固定分值',
					value: '1'
				},
				{
					name: '范围分值',
					value: '2'
				}
			],
			integral_select: [
				{
					name: '奖分',
					value: '1'
				},
				{
					name: '扣分',
					value: '2'
				}
			],
			//导入规则
			import_rules_show: false,
			save_loading: false,
			import_btn_show: false,
			fileList: [],
			file: null,
			flName: '',
			// item_lists:[],
			//导入相关
			toleadShw: false,
			nowIndex: 1,
			toleadResult: {}
		};
	},
	components: {
		toLead
	},
	watch: {
		toleadShw(val){
			if(val) this.nowIndex = 1
		},
		'dept_formdata.pid'(val, old_val) {
			this.$nextTick(() => {
				this.$refs.dept.dropDownVisible = false;
			});
		},
		'rules_detail_form.rule_id'(val, old_val) {
			this.$nextTick(() => {
				this.$refs.dept2.dropDownVisible = false;
			});
		}
	},
	created() {
		this.point_types = this.$getTyps().reverse();
	},
	mounted() {
		this.$nextTick(function() {
			if (this.$getCache('rule')) {
				this.tips_show = false;
			} else {
				this.tips_show = true;
			}
		});
		var that = this;
		that.getData();
	},
	methods: {
		handleOnthecross(event, file, fileList){
			this.nowIndex = 2
		},
		//导出规则按钮
		derivedRule(){
		  let userData=this.$getUserData();
		  window.open(process.env.VUE_APP_BASE_API+'/api/download/rule_item/item?employee_id='+userData.id)
		},
		downloadE() {
			let rule_remark = '';
			if (this.ruleDetails.remark.length > 10) {
				rule_remark = this.ruleDetails.remark;
				rule_remark = rule_remark.slice(0, 10);
			} else {
				rule_remark = this.ruleDetails.remark;
			}
			var canvasData = this.$refs.qrcode.getElementsByTagName('canvas')
			var a = document.createElement("a");
			var event = new MouseEvent("click"); // 创建一个单击事件
			a.href = canvasData[0].toDataURL("image/png");
			a.download = rule_remark;
			a.dispatchEvent(event); // 触发a的单击事件
		},
		payOrder (row) {// 展示二维码
			let url = 'dingtalk://dingtalkclient/action/open_micro_app'
			let appid = '?appId='+this.$appId
			let corpId = '&corpId='+this.$getCache('corpId')
			// let corpId = '&corpId=ding011f57ab048cf202ffe93478753d9884'
			let page = '&page='+encodeURIComponent(`pages/workbench/apply/apply?id=${encodeURIComponent(row)}`)//encodeURIComponent('小米')
			let urls = url+appid+corpId+page
			var qrcode = new QRCode('qrcode', {
				text: urls, // 二维码内容
				width: 325,
				height: 325,
				render: 'table', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
				colorDark: '#34373e', // 二维码色
				colorLight: '#ffffff', // 背景色
				correctLevel: QRCode.CorrectLevel.H // 容错等级，H是heigh，最高，所以二维码看起来很密
			})
		},
		ruleQRcode(row) {
			this.ruleDetails = row;
			// 生成二维码
			this.innerVisible = true;
			// 使用$nextTick确保数据渲染
			this.$nextTick(() => {
				this.payOrder(row.id);
			});
		},
		// 关闭弹框,清除已经生成的二维码
		closeCode() {
			setTimeout(() => {
				this.$refs.qrcode.innerHTML = '';
			}, 150);
		},

		// 导入相关
		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/rule/import', params)
				.then(res => {
					if (res.data.code == 1) {
						this.close_import();
						this.$message.success({ message: res.data.msg });
						this.getData();
					} else {
						this.$message({ type: 'error', message: res.data.msg });
					}
				})
				.finally(() => {
					this.save_loading = false;
				});
		},
		tealConfirm(){
			this.getData();
		},
		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.getData();
					this.close_import();
				}
			}else{
				this.$message.error({ message: response.msg });
			}
		},
		handleRemove(file, fileList) {
			if (fileList !== null && fileList.length != 0) {
				this.import_btn_show = true;
			} else {
				this.import_btn_show = 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
				return false;
			}
		},

		edit_submit_rule(form) {
			let self = this;
			self.$refs[form].validate(valid => {
				if (valid) {
					if (!self.rules_detail_form.min_point) {
						this.$message.error('积分不能为空或为0');
						return;
					}
					if (self.integral_select_name1 != '1' && self.rules_detail_form.min_point >= 0) {
						self.rules_detail_form.min_point = '-' + self.rules_detail_form.min_point;
					}
					if (self.integral_select_name2 != '1' && self.rules_detail_form.max_point >= 0) {
						self.rules_detail_form.max_point = '-' + self.rules_detail_form.max_point;
					}
					if (self.rules_detail_form.range_type == 1) {
						self.rules_detail_form.max_point = self.rules_detail_form.min_point;
					}
					if (Array.isArray(self.rules_detail_form.rule_id)) {
						self.rules_detail_form.rule_id = self.rules_detail_form.rule_id[self.rules_detail_form.rule_id.length - 1];
					}
					if (parseFloat(self.rules_detail_form.min_point) > parseFloat(self.rules_detail_form.max_point)) {
						this.$confirm(
							'填写的规则积分是' +
								self.rules_detail_form.min_point +
								' ～ ' +
								self.rules_detail_form.max_point +
								'，应该是 ' +
								self.rules_detail_form.max_point +
								' ～ ' +
								self.rules_detail_form.min_point +
								'吧？',
							'提示',
							{
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
							}
						).then(() => {
							this.rule_loading2 = true;
							let min_point = self.rules_detail_form.min_point;
							self.rules_detail_form.min_point = self.rules_detail_form.max_point;
							self.rules_detail_form.max_point = min_point;
							let data = self.rules_detail_form;
							data.item_id = self.rules_detail_form.id;
							if (self.rules_detail_form.min_point == 0 && self.rules_detail_form.range_type == 1) {
								self.$message.error('积分不能为零');
								this.rule_loading2 = false;
								return false;
							}
							this.$axios('post', '/api/integral/rule/items/edit', data)
								.then(res => {
									if (res.data.code == 1) {
										self.$message.success(res.data.msg);
										self.getData(true);
										self.rule_close(form);
									}
								})
								.finally(err => {
									this.rule_loading2 = false;
								});
						});
					} else {
						this.rule_loading2 = true;
						self.rules_detail_form.item_id = self.rules_detail_form.id;
						let data = self.rules_detail_form;
						data.item_id = self.rules_detail_form.id;
						if (self.rules_detail_form.min_point == 0 && self.rules_detail_form.range_type == 1) {
							self.$message.error('积分不能为零');
							this.rule_loading2 = false;
							return false;
						}
						this.$axios('post', '/api/integral/rule/items/edit', data)
							.then(res => {
								if (res.data.code == 1) {
									self.$message.success(res.data.msg);
									self.getData(true);
									self.rule_close(form);
								}
							})
							.finally(() => {
								this.rule_loading2 = false;
							});
					}
				} else {
					this.rule_loading2 = false;
					return false;
				}
			});
		},
		//添加规则
		add_submit_rule(form) {
			let self = this;
			self.$refs[form].validate(valid => {
				if (valid) {
					if (self.integral_select_name1 != '1' && self.rules_detail_form.min_point >= 0) {
						self.rules_detail_form.min_point = '-' + self.rules_detail_form.min_point;
					}
					if (self.integral_select_name2 != '1' && self.rules_detail_form.max_point >= 0) {
						self.rules_detail_form.max_point = '-' + self.rules_detail_form.max_point;
					}
					if (self.rules_detail_form.range_type == 1) {
						self.rules_detail_form.max_point = self.rules_detail_form.min_point;
					}
					if (self.rules_detail_form.min_point == 0 || !self.rules_detail_form.min_point || self.rules_detail_form.max_point == 0 || !self.rules_detail_form.max_point) {
						this.$message.error('积分不能为空或为0');
						return;
					}
					if (Array.isArray(self.rules_detail_form.rule_id)) {
						self.rules_detail_form.rule_id = self.rules_detail_form.rule_id[self.rules_detail_form.rule_id.length - 1];
					}
					if (parseFloat(self.rules_detail_form.min_point) > parseFloat(self.rules_detail_form.max_point)) {
						this.$confirm('填写的规则积分是' +self.rules_detail_form.min_point +' ～ ' +self.rules_detail_form.max_point +'，应该是 ' +self.rules_detail_form.max_point +' ～ ' +self.rules_detail_form.min_point +'吧？','提示',
							{
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
							}
						).then(() => {
							this.rule_loading2 = true;
							let min_point = self.rules_detail_form.min_point;
							self.rules_detail_form.min_point = self.rules_detail_form.max_point;
							self.rules_detail_form.max_point = min_point;
							if (self.rules_detail_form.min_point == 0 && self.rules_detail_form.range_type == 1) {
								self.$message.error('积分不能为零');
								this.rule_loading2 = false;
								return false;
							}
							let data = {
								items: [self.rules_detail_form]
							};
							this.$axios('post', '/api/integral/rule/items', data)
								.then(res => {
									if (res.data.code == 1) {
										self.$message.success(res.data.msg);
										self.getData(true);
										self.rule_close(form);
									}
								})
								.finally(() => {
									this.rule_loading2 = false;
								});
						});
					} else {
						this.rule_loading2 = true;
						self.rules_detail_form.item_id = self.rules_detail_form.id;
						if (self.rules_detail_form.min_point == 0 && self.rules_detail_form.range_type == 1) {
							self.$message.error('积分不能为零');
							this.rule_loading2 = false;
							return false;
						}
						let data = {
							items: [self.rules_detail_form]
						};
						this.$axios('post', '/api/integral/rule/items', data)
							.then(res => {
								if (res.data.code == 1) {
									self.$message.success(res.data.msg);
									self.getData(true);
									self.rule_close(form);
								}
							})
							.finally(() => {
								this.rule_loading2 = false;
							});
					}
				} else {
					this.rule_loading2 = false;
					return false;
				}
			});
		},
		//删除规则
		del_rule() {
			let self = this;
			let data = {
				item_ids:JSON.stringify([this.rules_detail_form.id])
			};
			this.delRule_loading = true;
        	const h = this.$createElement;
			self.$msgbox({
				title: '提示',
				message: h('div', null, [
					h('p', null, [
						h('i', { class: "el-icon-info", style: "color: #e6a23c; "}, null),
						h('span', { style: "font-size: 16px; color: black; padding-left: 5px;" }, '删除操作可能造成以下影响')
					]),
					h('ul', { style: "list-style: disc; padding: 0 0 0 21px; color: #6d6d6d; margin: 5px 0; " },[
						h('li', {style: "margin: 5px 0;"}, '与当前积分规则关联的积分审批，以此规则作为依据的审批单只能作废'),
						h('li', {style: "margin: 5px 0;"}, '与当前积分规则关联的自定义积分排名，此规则产生的积分将不再统计'),
					]),
					h('p', { style: "font-size: 15px; color: #616161; " }, '请确保无上述审批单或排名数据影响后，再操作删除'),
				]),
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				showCancelButton: true,
				customClass: 'winClass',//弹窗样式
			}).then(
				() => {
					this.$axios('post', '/api/integral/rule/items/destroy', data)
						.then(res => {
							if (res.data.code == 1) {
								self.$message.success(res.data.msg);
								self.rule_show = false;
								self.getData(true);
							}
						})
						.finally(() => {
							this.delRule_loading = false;
						});
				},
				err => {
					this.delRule_loading = false;
				}
			);
		},
		//关闭规则弹窗
		rule_close(form) {
			this.rule_show = false;
			this.$refs[form].resetFields();
		},
		not_data() {
			this.$confirm('暂时没有积分分类,是否前往添加?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.rule_show = false;
				this.class_show = true;
			});
		},
		add_rule() {
			this.rule_show = true;
			this.rule_type = 'add';
			this.rules_detail_form = {
				rule_id: '',
				range_type: '1',
				prize_type: '0',
				min_point: '',
				max_point: '',
				min_point2: '',
				max_point2: '',
				remark: '',
				is_attendance: '0',
				cycle_type: '1',
				pt_id: 3
			};
			this.integral_select_name1 = '1';
			this.integral_select_name2 = '1';
		},
		//批量删除
		del_item() {
			if (this.del_item_id.length == 0) {
				this.$message.error('请选择积分细则');
				return false;
			}
        	const h = this.$createElement;
			this.$msgbox({
				title: '提示',
				message: h('div', null, [
					h('p', null, [
						h('i', { class: "el-icon-info", style: "color: #e6a23c; "}, null),
						h('span', { style: "font-size: 16px; color: black; padding-left: 5px;" }, '删除操作可能造成以下影响')
					]),
					h('ul', { style: "list-style: disc; padding: 0 0 0 21px; color: #6d6d6d; margin: 5px 0; " },[
						h('li', {style: "margin: 5px 0;"}, '与当前积分规则关联的积分审批，以此规则作为依据的审批单只能作废'),
						h('li', {style: "margin: 5px 0;"}, '与当前积分规则关联的自定义积分排名，此规则产生的积分将不再统计'),
					]),
					h('p', { style: "font-size: 15px; color: #616161; " }, '请确保无上述审批单或排名数据影响后，再操作删除'),
				]),
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				showCancelButton: true,
				customClass: 'winClass',//弹窗样式
			}).then(() => {
				let data = {
					item_ids: JSON.stringify(this.del_item_id)
				};
				this.$axios('post', '/api/integral/rule/items/destroy', data).then(res => {
					if (res.data.code == 1) {
						this.$message.success(res.data.msg);
						this.getData(true);
					}
				});
			});
		},

		editDetails(val) {
			this.rules_detail_form = JSON.parse(JSON.stringify(val));
			if (this.rules_detail_form.min_point == this.rules_detail_form.max_point) {
				this.rules_detail_form.range_type = '1';
			} else {
				this.rules_detail_form.range_type = '2';
			}
			if (this.rules_detail_form.min_point < 0) {
				this.integral_select_name1 = '2';
				let str = this.rules_detail_form.min_point;
				this.rules_detail_form.min_point = str.toString().substring(1);
			} else {
				this.integral_select_name1 = '1';
			}
			if (this.rules_detail_form.max_point < 0) {
				this.integral_select_name2 = '2';
				let str = this.rules_detail_form.max_point;
				this.rules_detail_form.max_point = str.toString().substring(1);
			} else {
				this.integral_select_name2 = '1';
			}
			this.rule_show = true;
			this.rule_type = 'edit';
		},
		handleSelectionChange(val) {
			this.del_item_id = [];
			val.forEach(element => {
				this.del_item_id.push(element.id);
			});
		},

		handleNodeClick(e) {
			if(e.id){
				var items = this.getItemData(e);
				this.selectItem = {
					child: e.child,
					id: e.id,
					name: e.name,
					pid: e.pid
				};
				this.flName = e.name;
				this.item_list = items;
			}else{
				this.selectItem = { name: '积分规则' };
			}
		},
		getItemData(e) {
			var ids = [];
			var lists = [];
			if (e.child && e.child.length > 0) {
				ids.push(e.id);
				e.child.map(item => {
					ids.push(item.id);
					if (item.child && item.child.length > 0) {
						item.child.map(item1 => {
							ids.push(item1.id);
							if (item1.child && item1.child.length > 0) {
								item1.child.map(item2 => {
									ids.push(item2.id);
								});
							}
						});
					}
				});
				for (var i = 0; i < ids.length; i++) {
					lists.push(...this.filterItem(ids[i]));
				}
			} else {
				lists = this.filterItem(e.id);
			}
			return lists;
		},
		//根据分类ID获取对应的规则
		filterItem(id) {
			var all_item_list = this.all_item_list;
			var items = all_item_list.filter(item => {
				return item.rule_id == id;
			});
			return items;
		},
		//点击搜索
		onFilterChanged: function() {
			this.getData(true)
		},

		getData(is) {
			this.rule_loading = true;
			this.$axios('get', '/api/integral/rule/trees', { cycle_type: 1 , keyword:this.keyword})
				.then(res => {
					var item_list = res.data.data.item_list || [];
					var list = [];
					for (let i in item_list) {
						for (let k in item_list[i]) {
							item_list[i][k].pt_Obj = this.$getTyps(item_list[i][k].pt_id);
							list.push(item_list[i][k]);
						}
					}
					this.rule_tree = res.data.data.rule_tree || [];
					this.item_list = list;
					this.all_item_list = list;
					if (is) {
						this.handleNodeClick(this.selectItem);
					} else {
						this.selectItem = { name: '积分规则' }; //选择的分类
					}
				})
				.finally(() => {
					this.rule_loading = false;
				});
		},
		//编辑分组
		edit_class() {
			this.class_show = true;
			this.class_type = 'edit';
			this.dept_formdata = {
				child: this.selectItem.child,
				id: this.selectItem.id,
				name: this.selectItem.name,
				pid: this.selectItem.pid
			};
		},
		//添加分组
		submit_add_dept(form) {
			this.dept_loading = true;
			let that = this;
			that.$refs[form].validate(valid => {
				if (valid) {
					let pidData=JSON.parse(JSON.stringify(that.dept_formdata.pid))//备份选择的规则，因为提交时间PID会被重新赋值
					if (that.class_type == 'edit') {
						delete that.dept_formdata.child;
						that.dept_formdata.rule_id = that.dept_formdata.id;
						if (typeof that.dept_formdata.pid == 'number') {
						} else {
							if (that.dept_formdata.pid.length > 0) {
								that.dept_formdata.pid = that.dept_formdata.pid[that.dept_formdata.pid.length - 1];
							} else {
								that.dept_formdata.pid = 0;
							}
						}
						this.$axios('post', '/api/integral/rule/edit', that.dept_formdata)
							.then(res => {
								if (res.data.code == 1) {
									that.selectItem.name = that.dept_formdata.name;
									that.$message.success('修改积分分类成功');
									this.getData(true);
									this.add_dept_close('dept_formdata');
								}
							})
							.finally(() => {
								this.dept_formdata.pid=pidData
								this.dept_loading = false;
							});
					} else {
						if (that.dept_formdata.pid !== null && that.dept_formdata.pid.length == 0) {
							that.dept_formdata.pid = 0;
						} else {
							that.dept_formdata.pid = that.dept_formdata.pid[that.dept_formdata.pid.length - 1];
						}
						this.$axios('post', '/api/integral/rule', that.dept_formdata)
							.then(res => {
								if (res.data.code == 1) {
									that.$message.success('添加积分分类成功');
									this.getData(true);
									this.add_dept_close('dept_formdata');
								}
							})
							.finally(() => {
								this.dept_formdata.pid=pidData
								this.dept_loading = false;
							});
					}
				} else {
					this.dept_loading = false;
				}
			});
		},
		//删除分组
		del_dept() {
			this.$confirm('此操作将永久删除该分组, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$axios('post', '/api/integral/rule/destroy', { rule_id: this.selectItem.id }).then(res => {
					if (res.data.code == 1) {
						this.$message.success(res.data.msg);
						this.getData();
						this.add_dept_close('dept_formdata');
					}
				});
			});
		},
		//关闭弹窗
		add_dept_close(form) {
			this.class_show = false;
			this.$refs[form].resetFields();
		},
		//关闭提示
		tips_close() {
			this.$setCache('rule', 'true');
			this.tips_show = false;
		},
		//添加分类
		add_class() {
			this.class_show = true;
			this.class_type = 'add';
			this.dept_formdata = {
				name: '',
				pid: '0',
				cycle_type: '1'
			};
		}
	}
};
</script>

<style scoped lang="scss">
$red: #f56c6c;
::v-deep .el-table__row{
	cursor: pointer;
}
.select_width .el-select {
	width: 80px;
	background-color: #fff;
	border: 1px solid #f1f1f1;
	border-left: none;
	color: #222;
	border-radius: 5px;
}
.text-center {
	text-align: center;
}
.text-center p {
	padding: 10px 0;
}
.terr-right {
	.name {
		font-size: 18px;
		margin-right: 20px;
	}
	.btns button {
		font-size: 14px;
		height: 38px;
		width: 90px;
		margin-top: 20px;
		margin-right: 5px;
	}
}
.rule_class_box {
	::v-deep .el-tree-node {
		border-bottom: 1px #f8f8f8 solid;
	}
	::v-deep .el-tree-node__content {
		padding: 10px 0;
		// border-bottom: 1px #f8f8f8 solid;
	}
	::v-deep .el-tree-node__content:hover {
		background: #ecf5ff;
		border-radius: 4px;
	}
	::v-deep .is-current .el-tree-node__content .el-icon-caret-right {
		color: #409eff !important;
	}
	::v-deep .is-current .el-tree-node__content .el-tree-node__label {
		color: #409eff !important;
	}
	::v-deep .is-current .el-tree-node__children .el-icon-caret-right {
		color: #c0c4cc !important;
	}
	::v-deep .is-current .el-tree-node__children .el-tree-node__label {
		color: #606266 !important;
	}
	::v-deep .el-tree-node__label {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}
.form-right ::v-deep .el-form-item__content {
	margin-left: 0px !important;
}
.terr-left button {
	margin: 0 auto;
	display: block;
	margin-bottom: 20px;
}

.el-dropdown-links {
	font-size: 20px;
	cursor: pointer;
	color: #686a6d;
}
.color-red {
	color: $red;
	&:hover {
		color: #f14141;
	}
}
.qrcodesave {
	text-align: center;
	margin-top: 15px;
	font-size: 18px;
	span {
		color: #606266;
		cursor: pointer;
		transition: all 0.3s;
	}
}

.qrcodesave span:hover {
	color: #2490fd;
}
.lookQrcode {
	color: #606266;
	cursor: pointer;
	transition: all 0.3s;
}
.lookQrcode:hover {
	color: #2490fd;
}
.ruleSearch ::v-deep .el-input__inner{
	height:38px;
}
</style>
<style lang="scss">
	.winClass{
		width: 500px
	}
</style>