hotWaterManagerWeb/src/components/shangjiaduizhang/shangjiaduizhang.vue

<template>
	<div>
		<el-row>
			<el-col :span="24" class="first-row">
				<div class="tag">商家对账</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" class="second-row">
				<div class="total_balance">当日消费：{{today_xiaofei}}元</div>
				<el-link type="primary" class="xiaofei" @click="showxiaofeiDialog">年/月消费</el-link>
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item label="楼栋号：" class="shuibiaoId">
						<el-select v-model="drom_options.value" @change="selectGetBuild(drom_options.value)"
							placeholder="请选择楼栋号" class="my-select">
							<el-option v-for="item in drom_options.builds" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="宿舍号：" class="shuibiaoId">
						<el-select v-model="room_options.room_value" @change="selectGetroom(room_options.room_value)"
							placeholder="请选择宿舍号" class="my-select">
							<el-option v-for="item in room_options.rooms" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="日期：" class="shuibiaoId">
						<div class="block">
							<el-date-picker v-model="select_riqi.select_day" :editable="false" @change="selectGetDate"
								value-format="yyyy-MM-dd" type="date" placeholder="当天日期"></el-date-picker>
						</div>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<hr style="background-color: #CCCCCC;height: 1px;border: 0;">
		<el-row>
			<el-col :span="24" class="third-row">
				<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
					@selection-change="handleSelectionChange" highlight-current-row>
					<el-table-column type="selection" label="全选" align="center" width="55"></el-table-column>
					<el-table-column label="学号" align="center">
						<template slot-scope="scope">{{ scope.row.stu_number }}</template>
					</el-table-column>
					<el-table-column prop="user_name" label="姓名" align="center"></el-table-column>
					<el-table-column prop="use_amount" label="消费金额（元）" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="build" label="楼栋号" align="center" show-overflow-tooltip></el-table-column>
					<el-table-column prop="dom" label="宿舍号" align="center" show-overflow-tooltip></el-table-column>
					<el-table-column prop="begin_time" label="消费时间" align="center" show-overflow-tooltip>
					</el-table-column>
				</el-table>
				<div style="margin-top: 20px" class="table-footer">
					<div class="pages">
						<el-pagination :hide-on-single-page="true" layout="prev, pager, next"
							:page-size="table.pageRows" :total="rows_total" @current-change="handleCurrentChange">
						</el-pagination>
					</div>
					<div class="export-table">
						<el-button type="primary" size="small" @click="handleDownloadTable">表格导出</el-button>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" class="forth-row">
				<!-- 编辑对话框 -->
				<el-dialog title="消费情况" :visible.sync="xiaofeiDialog" :close-on-click-modal="false"
					:close-on-press-escape="false" width="640px" top="0vh" class="my-dialog">
					<hr
						style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
					<div class="view-balance">当日消费：{{ xiaofei.day_balance }}元</div>
					<div class="view-balance">当月消费：{{ xiaofei.month_balance }}元</div>
					<div class="view-balance">当年消费：{{ xiaofei.year_balance }}元</div>
					<div class="view-balance"></div>
				</el-dialog>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// 今日消费
				today_xiaofei: 0.0.toFixed(2),
				// 年月日的消费
				xiaofei: {
					day_balance: 0.0.toFixed(2),
					month_balance: 0.0.toFixed(2),
					year_balance: 0.0.toFixed(2),
				},
				// 楼栋号下拉列表
				drom_options: { // 下拉列表的数据绑定
					builds: [{
						value: 0,
						label: '全部'
					}],
					value: 0,
					label: ''
				},
				// 宿舍号下拉列表
				room_options: {
					rooms: [{
						value: 0,
						label: '全部'
					}],
					room_value: 0,
					room_label: ''
				},
				select_riqi: {
					// 选择日期：年-月-日
					select_day: '',
					// 选择日期：年-月
					select_month: '',
					// 选择日期：年
					select_year: ''
				},
				// 控制消费对话框显示隐藏
				xiaofeiDialog: false,
				// 表格数据
				tableData: [],
				rows_total: 0,
				// 表格参数
				table: {
					currentPage: 1, // 当前所在页码
					pageRows: 8, // 每页显示的行数
				},
				// 多选后，选择的所有行的数据数组
				// multipleSelection: []
			}
		},
		created() {
			var statue = sessionStorage.getItem('uname')
			if (!statue || typeof(statue) == 'undefined' || statue == '' || statue == 'null') {
				this.$router.replace('/')
			} else {
				// 获取当天日期
				var myDate = this.getNowFormatDate();
				let params = {
					page: this.table.currentPage,
					rows: this.table.pageRows,
					begin_time: myDate
					// begin_time: '2021-08-10'
				}
				// 获取当日消费列表
				this.getTodayXiaofei(params)
				// 获取年月日，并获取消费总金额
				this.selectGetDate(myDate)
				// 取得楼栋号，填充下拉列表
				this.getBuildsFillSelect()
			}
		},
		methods: {
			/**
			 * 导出表格
			 */
			handleDownloadTable() {
				var _this = this
				var params = { data: {}}
				if (_this.drom_options.label) {
					params.data.build = _this.drom_options.label
				}
				if (_this.room_options.room_label) {
					params.data.dom = _this.room_options.room_label
				}
				if (_this.select_riqi.select_day) {
					params.data.begin_time = _this.select_riqi.select_day
				}
				if (JSON.stringify(params.data) == '{}') {
					params = ''
				}
				this.$axios.post('/jxch-smartmp-api/HotWaters/watertoComExcel.action', params)
					.then(res => {
						console.log(res.data.downurl);
						if (typeof(res.data.downurl) != 'undefined' && res.data.downurl != '' && JSON.stringify(res
								.data) != '{}') {
							window.open('https://jtishfw.ncjti.edu.cn/jxch-smartmp' + res.data.downurl)
						} else {
							_this.$message.error('【未获得】表格！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【导出表格】请求异常: ' + err);
					})
			},
			/**
			 * 改变页码
			 * @param {Object} val
			 */
			handleCurrentChange(val) {
				// console.log(val);
				this.table.currentPage = val
				// 组合参数，刷新消费表格
				this.selectParams(val)
			},
			/**
			 * 1. 获取日期下拉列表选择的日期
			 * 2. 拆分到对于的变量中，便于根据
			 * @param {Object} val
			 */
			selectGetDate(val) {
				// console.log(val);
				this.select_riqi.select_year = ''
				this.select_riqi.select_month = ''
				this.select_riqi.select_day = ''
				if (val) {
					this.select_riqi.select_year = val.split('-')[0]
					this.select_riqi.select_month = val.split('-')[0] + '-' + val.split('-')[1]
					this.select_riqi.select_day = val
				} else {
					this.select_riqi.select_year = ""
					this.select_riqi.select_month = ""
					this.select_riqi.select_day = ""
				}

				this.table.currentPage = 1

				// 获取年月日消费总金额
				this.get_year_month_day_amount()

				// 组合参数，刷新消费表格
				this.selectParams()
			},
			/**
			 * 获取当前时间，格式YYYY-MM-DD
			 */
			getNowFormatDate() {
				var date = new Date();
				var seperator1 = "-";
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = year + seperator1 + month + seperator1 + strDate;
				return currentdate;
			},
			/**
			 * 获取宿舍号，填充宿舍号下拉列表
			 */
			getRooms() {
				var _this = this
				let params = {
					params: {
						build: this.drom_options.label
					}
				}
				this.$axios.get('/jxch-smartmp-api/HotWaters/watergetdoms.action', params)
					.then(res => {
						// console.log(res.data);
						if (typeof(res.data.doms) != 'undefined' && res.data.doms != '' && JSON.stringify(res.data) !=
							'{}') {
							this.room_options.rooms = [{
								value: 0,
								label: '全部'
							}]
							for (var i = 0; i < res.data.doms.length; i++) {
								let tmp = {
									value: i + 1,
									label: res.data.doms[i]
								}
								this.room_options.rooms.push(tmp)
							}
						} else {
							_this.$message.success('【宿舍号】暂无数据！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【宿舍号】请求异常: ' + err);
					})
			},
			/**
			 * 1. 获取楼栋号下拉列表选择的id
			 * 2. 刷新消费表格
			 * 3. 获取宿舍号填充下拉列表
			 * @param {Object} vId
			 */
			selectGetBuild(vId) {
				// console.log(vId);
				let obj = {};
				obj = this.drom_options.builds.find((item) => {
					return item.value === vId; //筛选出匹配数据
				});
				// console.log(obj);
				this.drom_options.value = obj.value
				this.drom_options.label = obj.label

				this.table.currentPage = 1

				// 获取宿舍号，填充宿舍号下拉列表
				this.getRooms()
				// 组合参数，刷新消费表格
				this.selectParams()
			},
			/**
			 * 1. 获取宿舍号下拉列表选择的id
			 * 2. 刷新消费表格
			 * @param {Object} vId
			 */
			selectGetroom(vId) {
				// console.log(vId);
				let obj = {};
				obj = this.room_options.rooms.find((item) => {
					return item.value === vId; //筛选出匹配数据
				});
				// console.log(obj);
				this.room_options.room_value = obj.value
				this.room_options.room_label = obj.label

				this.table.currentPage = 1

				// 组合参数，刷新消费表格
				this.selectParams()
			},
			/**
			 * 1. 组合参数
			 * 2. 刷新消费表格
			 */
			selectParams() {
				var params = {}
				params.page = this.table.currentPage
				params.rows = this.table.pageRows
				if (this.drom_options.value != 0) {
					params.build = this.drom_options.label
				}
				if (this.room_options.room_value != 0) {
					params.dom = this.room_options.room_label
				}
				if (this.select_riqi.select_day != '') {
					params.begin_time = this.select_riqi.select_day
				}
				// 刷新消费表格
				this.getTodayXiaofei(params)
			},
			/**
			 * 获取消费列表
			 * @param {Object} params
			 */
			getTodayXiaofei(params) {
				var _this = this
				this.$axios.get('/jxch-smartmp-api/HotWaters/waterfindConsume.action', {
						params: params
					})
					.then(res => {
						// console.log(res.data);
						this.tableData = []
						_this.rows_total = 0
						if (typeof(res.data.rows) != 'undefined' && res.data.rows != '' && JSON.stringify(res.data) !=
							'{}') {
							_this.tableData = res.data.rows
							_this.rows_total = res.data.total
						} else {
							_this.$message.success('【当日消费】暂无数据！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【当日消费】请求异常: ' + err);
					})
			},
			/**
			 * 获取楼栋号，填充下拉列表
			 */
			getBuildsFillSelect() {
				// 获取楼栋号，填充下拉列表
				var _this = this
				this.$axios.get('/jxch-smartmp-api/HotWaters/watergetBuilds.action')
					.then(res => {
						// console.log(res.data);
						if (typeof(res.data.builds) != 'undefined' && res.data.builds != '' && JSON.stringify(res
								.data) != '{}') {
							this.drom_options.builds = [{
								value: 0,
								label: '全部'
							}]
							for (var i = 0; i < res.data.builds.length; i++) {
								let tmp = {
									value: i + 1,
									label: res.data.builds[i]
								}
								this.drom_options.builds.push(tmp)
							}
						} else {
							_this.$message.success('【楼栋号】暂无数据！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【楼栋号】请求异常: ' + err);
					})
			},
			/**
			 * 获取年月日消费总金额
			 * @param {Object} params
			 */
			get_year_month_day_amount() {
				var _this = this
				this.xiaofei.year_balance = 0.0.toFixed(2)
				this.xiaofei.month_balance = 0.0.toFixed(2)
				this.xiaofei.day_balance = 0.0.toFixed(2)
				this.today_xiaofei = 0.0.toFixed(2)
				// 年消费记录
				this.$axios.get('/jxch-smartmp-api/HotWaters/watertotalFeel.action', {
						params: {
							year: this.select_riqi.select_year
						}
					})
					.then(res => {
						// console.log(res.data);
						if (typeof(res.data) != 'undefined' && res.data != '' && JSON.stringify(res.data) != '{}') {
							// _this.$message.success('数据加载成功！');
							this.xiaofei.year_balance = parseFloat(res.data.money_year).toFixed(2)
						} else {
							_this.$message.success('【年消费】暂无数据！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【年消费】请求异常: ' + err);
					})

				// 月消费记录
				this.$axios.get('/jxch-smartmp-api/HotWaters/watertotalFeel.action', {
						params: {
							month: this.select_riqi.select_month
						}
					})
					.then(res => {
						// console.log(res.data);
						if (typeof(res.data) != 'undefined' && res.data != '' && JSON.stringify(res.data) != '{}') {
							// _this.$message.success('数据加载成功！');
							this.xiaofei.month_balance = parseFloat(res.data.money_month).toFixed(2)
						} else {
							_this.$message.success('【月消费】暂无数据！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【月消费】请求异常: ' + err);
					})

				// 日消费记录
				this.$axios.get('/jxch-smartmp-api/HotWaters/watertotalFeel.action', {
						params: {
							day: this.select_riqi.select_day
						}
					})
					.then(res => {
						// console.log(res.data);
						if (typeof(res.data) != 'undefined' && res.data != '' && JSON.stringify(res.data) != '{}') {
							// _this.$message.success('数据加载成功！');
							this.xiaofei.day_balance = parseFloat(res.data.money_day).toFixed(2)

							this.today_xiaofei = parseFloat(res.data.money_day).toFixed(2)
						} else {
							_this.$message.success('【日消费】暂无数据！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【日消费】请求异常: ' + err);
					})
			},
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			// 显示消费对话框
			showxiaofeiDialog() {
				this.xiaofeiDialog = true
			},
			// 点击多选按钮获取的行数据数组
			handleSelectionChange(val) {
				// this.multipleSelection = val
				// console.log(val);
			}
		}
	}
</script>

<style scoped>
	@import url("shangjiaduizhang.css");
</style>