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 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="import_rules_show = true" plain>导入规则</el-button>
					</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">
								<el-dropdown placement="bottom" :show-timeout="150" :hide-timeout="150" >
									<span class="el-dropdown-links" @click.stop="">···</span>
									<el-dropdown-menu  slot="dropdown" >
										<el-dropdown-item ><el-button type="text" class="color-red" style="font-size:12px;" v-loading.fullscreen.lock="bodyLoad" @click.stop="ruleQRcode(scope.row)">查看二维码</el-button></el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
							</template> -->
							<template slot-scope="scope">
								<div @click.stop="ruleQRcode(scope.row)"><span class="lookQrcode">查看二维码</span></div>
							</template>
						</el-table-column>
						<template slot="empty">
							<noData></noData>
						</template>
					</el-table>
				</div>
			</div>
		</div>
		<!-- <el-dialog
			width="280px"
			@close="closeCode"
			:visible.sync="innerVisible"
			append-to-body>
			<div class="paycode">
				<div id="qrcode" ref="qrcode"></div>
				<div @click.stop="downloadE">下载保存此二维码</div>
			</div>
		</el-dialog> -->
		<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"></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="3" maxlength="100" 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>

				<!-- 			<el-form-item prop="min_point">
					<el-row :gutter="20" class="select_width">
						<el-col :span="11">
							<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-col>
						<el-col :span="1" v-show="rules_detail_form.range_type == 2">至</el-col>
						<el-col :span="11" v-show="rules_detail_form.range_type == 2">
							<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-col>
					</el-row>
				</el-form-item> -->

				<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>
						<!-- <p><el-button type="primary" @click="submitUpload" :loading="save_loading" v-show="import_btn_show" block>导入</el-button></p> -->
					</div>
				</el-col>
			</el-row>
		</el-dialog>
	</div>
</template>

<script>
import noData from '@/components/noData';
import QRCode from 'qrcodejs2';
export default {
	data() {
		return {
			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: 0,
				max_point: 0,
				min_point2: 0,
				max_point2: 0,
				remark: '',
				is_attendance: '0',
				cycle_type: '1',
				pt_id: 0
			},
			rules: {
				remark: [
					{
						required: true,
						message: '请输入规则名称',
						trigger: 'blur'
					}
				],
				rule_id: [
					{
						required: true,
						message: '请选择分类',
						trigger: 'change'
					}
				]
				// min_point2:[{ required: true, message: '分值不能为空'},{ pattern: /^[1-9]\d*$/, message: '分值必须为数字值'}],
				// max_point2:[{ required: true, message: '分值不能为空'},{ pattern: /^[1-9]\d*$/, message: '分值必须为数字值'}],
			},
			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: ''
		};
	},
	components: {
		noData
	},
	watch: {
		'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 (localStorage.getItem('rule')) {
				this.tips_show = false;
			} else {
				this.tips_show = true;
			}
		});
		var that = this;
		// setTimeout(function(){
		that.getData();
		// },1000);
	},
	methods: {
		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='+localStorage.getItem('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;
				});
		},
		handleSuccess(response) {
			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();
				}
			}
		},
		handleRemove(file, fileList) {
			if (fileList !== null && fileList.length != 0) {
				this.import_btn_show = true;
			} else {
				this.import_btn_show = false;
			}
		},
		imgChange(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) {
				this.import_btn_show = true;
			} else {
				this.$message.warning('文件格式上传错误,仅支持上传xlsx,xls）');
				return false;
			}
		},

		edit_submit_rule(form) {
			let self = this;
			self.$refs[form].validate(valid => {
				if (valid) {
					if (self.rules_detail_form.min_point == 0 || !self.rules_detail_form.min_point) {
						this.$message.error('请输入积分分值');
						return;
					}
					// self.rules_detail_form.min_point=self.rules_detail_form.min_point2;
					// self.rules_detail_form.max_point=self.rules_detail_form.max_point2;
					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();
										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();
									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) {
					// self.rules_detail_form.min_point=self.rules_detail_form.min_point2;
					// self.rules_detail_form.max_point=self.rules_detail_form.max_point2;
					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('请输入积分分值');
						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();
										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();
									self.rule_close(form);
								}
							})
							.finally(() => {
								this.rule_loading2 = false;
							});
					}
				} else {
					this.rule_loading2 = false;
					return false;
				}
			});
		},
		//删除规则
		del_rule() {
			let self = this;
			let data = {
				item_id: [this.rules_detail_form.id]
			};
			this.delRule_loading = true;
			self.$confirm('此操作将永久删除该选项, 是否继续?', '提示').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: 0,
				max_point: 0,
				min_point2: 0,
				max_point2: 0,
				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;
			}
			this.$confirm('此操作将永久删除该选项, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				let data = {
					item_id: 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();
						this.handleNodeClick(this.selectItem);
					}
				});
			});
		},

		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);
				// this.rules_detail_form.min_point2=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);
				// this.rules_detail_form.max_point2=str.toString().substring(1);
			} else {
				this.integral_select_name2 = '1';
			}
			// this.rules_detail_form.min_point2=this.rules_detail_form.min_point;
			// this.rules_detail_form.max_point2=this.rules_detail_form.max_point;

			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) {
			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;
		},
		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;
		},

		getData(is) {
			this.rule_loading = true;
			var that = this;
			this.$axios('get', '/api/integral/rule/trees', { cycle_type: 1 })
				.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 = that.$getTyps(item_list[i][k].pt_id);
							list.push(item_list[i][k]);
						}
					}
					that.rule_tree = res.data.data.rule_tree || [];
					that.item_list = list;
					that.all_item_list = list;
					if (is) {
						that.handleNodeClick(that.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) {
					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_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_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() {
			localStorage.setItem('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;
.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 {
		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;
}
</style>