hotWaterManagerWeb/src/components/tuikuan/tuikuan.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="riqi">
						<el-date-picker v-model="select_datetime" type="daterange" range-separator="至" @change="dateChange" start-placeholder="开始日期"
							end-placeholder="结束日期" value-format="yyyy-MM-dd">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="" class="shuibiaoId">
						<el-input v-model="searchformUser" clearable placeholder="联系人/手机号"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="onSearch">搜索</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-document" @click="onExport">导出</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<div class="">
					<span class="item">总计：<span class="green_txt">{{ amount }}</span>元</span> <span class="item">总交易笔数：<span
							class="green_txt">{{ total_times }}</span>笔</span> <span </div>
			</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="序号" type="index" :index="indexMethod" width="100px">
					</el-table-column>
					<el-table-column align="center" label="户号">
						<template slot-scope="scope">{{ scope.row.card_number }}</template>
					</el-table-column>
					<el-table-column prop="user_name" label="联系人" align="center"></el-table-column>
					<el-table-column prop="order_num" label="交易流水号" align="center"></el-table-column>
					<el-table-column prop="handler_man" label="操作账号" align="center">
					</el-table-column>
					<el-table-column prop="account" label="支付金额（元）" align="center" :formatter="formatBalance" show-overflow-tooltip></el-table-column>
					<el-table-column prop="time" label="支付时间" align="center" width="200px"></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('page')"></el-pagination>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				amount: 0.0.toFixed(2),
				total_times: 0,
				select_datetime: [],
				startTime: '',
				endTime: '',
				searchformUser: '', // 查找的姓名
				select_month: '', // 选择的月份
				// 余额列表
				tableData: [], // 余额列表
				rows_total: 0, // 余额列表总记录数
				currentPage: 1, // 余额列表当前页
				pageRows: 8, // 每页记录数
				viewdialogFormVisible: false,
				showOrderStatus: {
					userName: '',
					orderState: '',
					balance: 0,
					result: -1
				}
			}
		},
		created() {
			var level = sessionStorage.getItem('level');
			if (level === '2') {
				// 获取总金额
				this.get_total_amount();
				// 获取余额列表
				let params = {
					page: this.currentPage,
					rows: this.pageRows
				};

				// 初始化日期为今天天 至 明天
				this.initDate();
			} else {
				this.$message.error('请使用【退款专用账号】登录！');
			}
		},
		methods: {
			get_total_amount() {
				var _this = this;
				let formData = new FormData();
				if (typeof _this.startTime != 'undefined' && _this.startTime != '') {
					formData.append("begin_time", _this.startTime);
				}
				if (typeof _this.endTime != 'undefined' && _this.endTime != '') {
					formData.append("end_time", _this.endTime);
				}
				if (_this.searchformUser != '' && typeof _this.searchformUser != 'undefined') {
					params.user_name = this.searchformUser
				}
				this.$axios.post('/jxch-smartmp/HotWaters/waterrefund_total.action', formData)
					.then(res => {
						// console.log(res.data);
						if (res.data.code == 200) {
							_this.amount = res.data.data;
						} else {
							_this.$message.error(res.data.message);
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【获取退款总金额】请求异常: ' + err);
					});
			},
			/**
			 * 序号的计算
			 */
			indexMethod(index) {
				return (this.currentPage - 1) * this.pageRows + index + 1;
			},
			/**
			 * 格式化列数据
			 */
			formatBalance: (row, column, cellValue, index) => {
				// row: 行数据
				// column: 列属性
				// cellValue: 单元格数据值
				// index: 行索引，注意：2.3.9版本以后才有。
				return cellValue.toFixed(2)
			},
			/**
			 * 退款列表
			 */
			get_amount_list(params) {
				var _this = this
				this.$axios.get('/jxch-smartmp/HotWaters/waterrefund_list.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);
					})
			},
			/**
			 * 退款列表改变页码
			 * @param {Object} param
			 */
			handleCurrentChange(param) {
				// console.log(param);
				this.currentPage = this.currentPage
				var params = {
					page: this.currentPage,
					rows: this.pageRows,
				}
				if (param != 'init') {
					if (this.startTime != '' && typeof this.startTime != 'undefined') {
						params.begin_time = this.startTime
					}
					if (this.endTime != '' && typeof this.endTime != 'undefined') {
						params.end_time = this.endTime
					}
					if (this.searchformUser != '' && typeof this.searchformUser != 'undefined') {
						params.user_name = this.searchformUser
					}
				}


				// 获取退款列表
				this.get_amount_list(params)
			},
			/**
			 * 初始化日期时间
			 */
			initDate() {
				//当前设定的日期时间
				let d = new Date;
				var year1 = d.getFullYear(); // 获取当前年份
				var mon1 = d.getMonth() + 1; // 获取当前月份
				var day1 = d.getDate(); // 获取当前日

				//前一天设定的日期时间
				d.setTime(d.getTime() - 24 * 60 * 60 * 1000);
				var year2 = d.getFullYear(); // 获取当前年份
				var mon2 = d.getMonth() + 1; // 获取当前月份
				var day2 = d.getDate(); // 获取当前日

				this.startTime = this.getDate(year2, mon2, day2)
				this.endTime = this.getDate(year1, mon1, day1)

				this.select_datetime.push(this.startTime)
				this.select_datetime.push(this.endTime)

				// 显示列表
				this.handleCurrentChange('init')
			},
			/**
			 * 获取指定格式 年、月、日
			 * @param {Object} y
			 * @param {Object} m
			 * @param {Object} d
			 */
			getDate(y, m, d) {
				m = m > 9 ? m : '0' + m;
				d = d > 9 ? d : '0' + d;

				return y + "-" + m + "-" + d;
			},
			/**
			 * 选择起止日期
			 * @param {Object} val
			 */
			dateChange(val) {
				this.startTime = val[0]
				this.endTime = val[1]

				if (this.startTime == this.endTime) {
					this.$message.error('起止日期不能为同一天！')
				} else {

				}
			},
			/**
			 * 查找姓名对应的 余额列表
			 */
			onSearch() {
				this.currentPage = 1

				this.handleCurrentChange('search')
			},
			/**
			 * 导出为Excel表格
			 */
			onExport() {
				var _this = this;
				let formData = new FormData();
				if (typeof _this.startTime != 'undefined' && _this.startTime != '') {
					formData.append("begin_time", _this.startTime);
				}
				if (typeof _this.endTime != 'undefined' && _this.endTime != '') {
					formData.append("end_time", _this.endTime);
				}
				this.$axios.post('/jxch-smartmp/HotWaters/watertoRefundExcel.action', formData)
					.then(res => {
						if (typeof res.data.downurl != 'undefined' && res.data.downurl != '' && JSON
							.stringify(res.data) != '{}') {
							// console.log(res.data.downurl);
							window.open('https://jtishfw.ncjti.edu.cn/jxch-smartmp' + res.data.downurl);
						} else {
							_this.$message.error(res.data.message);
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【导出表格】请求异常: ' + err);
					})
			}
		}
	}
</script>

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