dd_pc/src/views/ranking/balanceA.vue

<template>
	<div>
		<el-alert class="diy-tip" @close="tips_close" v-show="tips_show" type="success" description>
			<p>A分余额在线下兑换/使用过后，由管理员手动结算清零；</p>
			<p>清零操作为全员批量清除，请谨慎操作。此操作不会清空A分统计、排名和事件！</p>
			<p>每次清零将清空指定月份之前的余额（不含指定月份），不可清空未结束月份的余额：</p>
			<p>例如当前是2020年7月8号，指定选择2020年7月份，可清空2020年7月1号之前所有余额，不清除7月1-8号的余额。</p>
		</el-alert>
		<div class="box boxMinHeight">
			<el-tabs v-model="active">
				<el-tab-pane :disabled="loading" label="A分余额" name="balanceA"></el-tab-pane>
				<el-tab-pane :disabled="loading" label="清空记录" name="clearLog"></el-tab-pane>
			</el-tabs>

			<el-form :inline="true" v-if="active == 'balanceA'">
				<el-form-item label="部门">
					<el-cascader
						size="medium"
						class="date-picker-width"
						v-model="dept_name"
						:options="dept_tree"
						ref="dept"
						:props="{ checkStrictly: true, value: 'id', label: 'name', children: '_child' }"
						clearable
						filterable
						placeholder="全公司"
					></el-cascader>
				</el-form-item>

				<el-form-item>
					<el-input size="medium" v-model="formData.keyword" placeholder="输入同事姓名" max="200" @keyup.enter.native="getList()" class="persons_name">
						<el-button size="medium" slot="append" icon="el-icon-search" @click="getList()"></el-button>
					</el-input>
				</el-form-item>

				<el-form-item style="float: right;"><el-button size="medium" type="primary" @click="clearAPointShow = true">清空A分余额</el-button></el-form-item>
			</el-form>

			<el-table :data="list" style="width: 100%" v-if="active == 'balanceA'" v-loading="loading">
				<el-table-column label="姓名" prop="name" width="250">
					<template slot-scope="scope">
						<div class="flex-box-ce">
							<userImage class="fl" :id="scope.row.id" :user_name="scope.row.name" :img_url="scope.row.img_url" width="50px" height="50px"></userImage>
							<span style="line-height: 50px; padding-left: 10px;">{{ scope.row.name }}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column show-overflow-tooltip label="部门" align="left" min-width="120px" prop="deptName"></el-table-column>
				<el-table-column label="A分余额" prop="balance_a"></el-table-column>
				<template slot="empty">
					<noData></noData>
				</template>
			</el-table>

			<el-table :data="list" style="width: 100%" v-else v-loading="loading">
				<el-table-column label="操作人" prop="name" width="250">
					<template slot-scope="scope">
						<div class="flex-box-ce">
							<userImage class="fl" :id="scope.row.id" :user_name="scope.row.name" :img_url="scope.row.img_url" width="50px" height="50px"></userImage>
							<span style="line-height: 50px; padding-left: 10px;">{{ scope.row.name }}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="内容" prop="remark"></el-table-column>
				<el-table-column prop="create_time" label="时间"></el-table-column>
				<template slot="empty">
					<noData></noData>
				</template>
			</el-table>

			<center style="padding: 20px 0;">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:page-sizes="[10, 20, 50, 100]"
					layout="total, sizes, prev, pager, next"
					:page-size="formData.page_size"
					:current-page="formData.page"
					:total="total"
				></el-pagination>
			</center>

			<el-dialog title="清空A分余额" :visible.sync="clearAPointShow" width="500px" @close="clearAPointClose('popupForm')">
				<el-form :model="popupForm" ref="popupForm">
					<el-form-item prop="month" :rules="[{ required: true, message: '请选择月份', trigger: 'blur' }]">
						<el-col :span="3">清空</el-col>
						<el-col :span="8">
							<el-date-picker style="width: 100%" v-model="popupForm.month" value-format="yyyy-MM" type="month" placeholder="请选择月份"></el-date-picker>
						</el-col>
						<el-col :span="6">之前的A分</el-col>
					</el-form-item>
				</el-form>
				<span slot="footer">
					<el-button @click="resetForm('popupForm')">取 消</el-button>
					<el-button type="primary" @click="onSubmit('popupForm')">确 定</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			active: 'balanceA',
			loading: false,
			tips_show: false,
			clearAPointShow: false,
			list: null,
			total: null,
			dept_name: '',
			formData: {
				keyword: '',
				dept_id: '0',
				page: 1,
				page_size: 10
			},
			dept_tree: null,
			popupForm: {
				month: ''
			}
		};
	},
	watch: {
		dept_name(val) {
			this.formData.dept_id = val[val.length - 1];
			this.$refs.dept.dropDownVisible = false;
			this.getList();
		},
		active(val) {
			this.list = [];
			this.formData = {
				keyword: '',
				dept_id: '0',
				page: 1,
				page_size: 10
			};
			val == 'balanceA' ? this.getList() : this.getLog();
		}
	},
	methods: {
		resetForm(formName) {
			this.clearAPointShow = false;
			this.$refs[formName].resetFields();
		},
		// 清空数据
		onSubmit(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.$axios('post', '/api/integral/site/a/clear', this.popupForm)
						.then(res => {
							if (res.data.code == 1) {
								this.$message.success('清除成功');
								this.resetForm(formName);
								this.getList();
								this.clearAPointShow = false;
							} else {
								this.$message.error(res.data.data.msg);
							}
						})
						.finally(() => {
							this.loading = false;
						});
				}
			});
		},
		// 关闭弹窗
		clearAPointClose(formName) {
			this.$refs[formName].resetFields();
		},
		// 提示信息
		tips_close() {
			this.$setCache('balanceA_tips', 'true');
			this.tips_show = false;
		},
		// 页码变更
		handleCurrentChange(val) {
			this.formData.page = val;
			this.active == 'balanceA' ? this.getList() : this.getLog();
		},
		handleSizeChange(val) {
			this.formData.page_size = val;
			this.active == 'balanceA' ? this.getList() : this.getLog();
		},
		// 获取列表
		getList() {
			this.loading = true;
			this.$axios('get', '/api/integral/site/a/balance', this.formData)
				.then(res => {
					if (res.data.code == 1) {
						this.list = this.$returnDeptName(res.data.data.list);
						this.total = res.data.data.total;
					} else {
						this.$message.error(res.data.data.msg);
					}
				})
				.finally(() => {
					this.loading = false;
				});
		},
		// 获取日志列表
		getLog() {
			let self = this;
			self.loading = true;
			let data = {
				page: this.formData.page,
				page_size: this.formData.page_size
			};
			self.$axios('get', '/api/integral/site/a/logs', data)
				.then(res => {
					if (res.data.code == 1) {
						self.list = res.data.data.list;
						self.total = res.data.data.total;
					} else {
						self.$message.error(res.data.data.msg);
					}
				})
				.finally(() => {
					self.loading = false;
				});
		},
		// 递归判断列表，把最后的children设为undefined
		getTreeData(data) {
			for (var i = 0; i < data.length; i++) {
				if (data[i]._child.length < 1) {
					// children若为空数组，则将children设为undefined
					data[i]._child = undefined;
				} else {
					// children若不为空数组，则继续 递归调用 本方法
					this.getTreeData(data[i]._child);
				}
			}
			return data;
		},
		//获取部门
		getDepartment() {
			this.$axios('get', '/api/department/tree').then(res => {
				this.dept_tree = this.getTreeData(res.data.data.list);
			});
		}
	},
	created() {
		this.getDepartment();
	},
	mounted() {
		if (this.$getCache('balanceA_tips')) {
			this.tips_show = false;
		} else {
			this.tips_show = true;
		}
		this.getList();
	}
};
</script>
<style scoped lang="scss">
.box {
	background-color: #ffffff;
	padding: 20px;
}
.listData {
	position: relative;
	display: table-cell;
	margin: 0 !important;
	padding: 20px;
	min-height: 600px;
	&::after {
		content: ' ';
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 1px;
		background: #ebeef5;
	}
	& .groups_name {
		display: block;
		font-size: 20px;
		color: rgb(48, 49, 51);
		vertical-align: middle;
	}
}
::v-deep .el-menu-item {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	&.is-active {
		background-color: #ecf5ff;
	}
}
.diy-tip {
	margin-bottom: 15px;
	border: 1px solid #67c23a;
	padding: 20px 16px;
	p {
		color: #67c23a !important;
		font-size: 14px;
		margin: 0 !important;
		padding: 4px 0;
	}
}
</style>