hotWaterManagerWeb/src/components/zhifuyichang/zhifuyichang.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">
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item label="选择：" class="shuibiaoId">
						<el-select v-model="drom_options.value" placeholder="请选择" class="my-select"
							@change="selectGetBuild(drom_options.value)">
							<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>
			</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%"
					highlight-current-row>
					<el-table-column align="center" label="姓名" width="200">
						<template slot-scope="scope">{{ scope.row.stu_number }}</template>
					</el-table-column>
					<el-table-column prop="user_name" label="学号" align="center" width="200"></el-table-column>
					<el-table-column prop="user_name" label="充值宿舍号" align="center" width="200"></el-table-column>
					<el-table-column prop="balance" label="金额（元）" align="center" show-overflow-tooltip></el-table-column>
					<el-table-column prop="balance" label="时间" align="center" show-overflow-tooltip></el-table-column>
					<el-table-column label="操作" align="center" width="380">
						<template slot-scope="scope">
							<el-button type="text" v-if="handle"
								@click="handleShowDialog(scope.$index, scope.row)">未处理</el-button>
							<el-button type="text" class="exception" v-else>已处理</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div style="margin-top: 20px" class="table-footer">
					<div class="pages">
						<el-pagination layout="prev, pager, next" :current-page.sync="currentPage"
							:hide-on-single-page="true" :page-size="pageRows" :total="rows_total"
							@current-change="handleCurrentChange"></el-pagination>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" class="forth-row">
				<!-- 操作对话框 -->
				<el-dialog title="用水异常处理" :visible.sync="detail_dialogFormVisible" width="640px" top="0vh"
					class="my-dialog" :close-on-click-modal="false" :close-on-press-escape="false">
					<hr
						style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
					<el-form :inline="true" class="demo-form-inline">
						<el-form-item label="姓名：" class="shuibiaoId">
							<el-input v-model="detail_userName" placeholder="请输入姓名" clearable></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onSearch">查找</el-button>
						</el-form-item>
					</el-form>
					<el-table ref="multipleTable" :data="detail_tableData" tooltip-effect="dark" style="width: 100%"
						highlight-current-row>
						<el-table-column align="center" label="学号">
							<template slot-scope="scope">{{ scope.row.stu_number }}</template>
						</el-table-column>
						<el-table-column align="center" prop="user_name" label="姓名" show-overflow-tooltip>
						</el-table-column>
						<el-table-column align="center" prop="use_amount" label="用水量" show-overflow-tooltip>
						</el-table-column>
					</el-table>
					<div slot="footer" class="dialog-footer">
						<div class="dialog-pages">
							<el-pagination layout="prev, pager, next"
								:current-page.sync="control_table.detail_current_page" :hide-on-single-page="true"
								:page-size="control_table.detail_page_rows" @current-change="handleCurrentChange"
								:total="control_table.detail_total_rows"></el-pagination>
						</div>
					</div>
				</el-dialog>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				drom_value: 0, // 楼栋号编码
				drom: '', // 楼栋号
				// 楼栋号下拉列表
				drom_options: { // 下拉列表的数据绑定
					builds: [{
						value: 0,
						label: '电费'
					},{
						value: 1,
						label: '水费'
					}],
					value: 0
				},
				currentPage: 1, // 余额列表当前页
				pageRows: 8, // 每页记录数
				tableData: [], // 异常列表
				rows_total: 0, // 总行数
				// 详情对话框相关参数
				detail_dialogFormVisible: false, // 控制详情对话框显示、隐藏
				detail_userName: '', // 姓名用于查询
				detail_tableData: [],
				control_table: {
					detail_current_page: 1,
					detail_page_rows: 8,
					detail_total_rows: 0
				},
				handle: true
			}
		},
		created() {
			// 获取余额列表
			let params = {
				page: this.currentPage,
				rows: this.pageRows
			}
			// 异常列表
			this.get_exception_list(params)
		},
		methods: {
			/**
			 * 列表改变页码
			 * @param {Object} val
			 */
			handleCurrentChange(val) {
				// console.log(val);
				this.currentPage = val
				var params = {}
				if (this.searchformUser != '' & typeof(this.searchformUser) != 'undefined') {
					params = {
						page: this.currentPage,
						rows: this.pageRows,
						user_name: this.searchformUser
					}
				} else {
					params = {
						page: this.currentPage,
						rows: this.pageRows
					}
				}
				// 获取余额列表
				// this.get_amount_list(params)
			},
			/**
			 * 处理异常
			 * @param {Object} index
			 * @param {Object} row
			 */
			handleShowDialog(index, row) {
				console.log(index, row)
			},
			/**
			 * 获取余额列表
			 */
			get_exception_list(params) {
				var _this = this
				_this.tableData = []
				// _this.rows_total = 0
				this.$axios.get('/jxch-smartmp-api/HotWaters/waterMoney.action', {
						params: params
					})
					.then(res => {
						// console.log(res.data);
						if (typeof(res.data.rows) != 'undefined' && res.data.rows != '' && JSON.stringify(res.data) !=
							'{}') {
							// _this.$message.success('数据加载成功！');
							_this.tableData = res.data.rows
							_this.rows_total = res.data.total
						} else {
							_this.$message.success('【获取余额列表】暂无数据！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【获取余额列表】请求异常: ' + err);
					})
			},
			/**
			 * 选择楼栋号
			 */
			selectGetBuild(vId) {
				// console.log(vId);
				this.drom_value = 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.drom = this.drom_options.label

				// 共用部分
				// this.updateData()
			},
			/**
			 * 详情页面查找
			 */
			onSearch() {
				this.control_table.detail_current_page = 1

				// this.show_detail()
			}
		}
	}
</script>

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