|
|
@@ -0,0 +1,459 @@
|
|
|
+<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 label="" class="zhuangtai">
|
|
|
+ <el-select v-model="selectItem.value" clearable placeholder="支付状态" @change="getItem">
|
|
|
+ <el-option v-for="item in options" :key="item.value" :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </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
|
|
|
+ class="item">次均额：<span class="green_txt">{{ avg }}</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="balance" label="充值前余额" align="center" :formatter="formatBalance">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="account" label="支付余额（元）" align="center" :formatter="formatBalance"
|
|
|
+ show-overflow-tooltip></el-table-column>
|
|
|
+ <!-- <el-table-column prop="account" label="到账余额（元）" align="center" :formatter="formatBalance"
|
|
|
+ show-overflow-tooltip></el-table-column> -->
|
|
|
+ <el-table-column label="支付状态" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag class="green_font" v-if="scope.row.pay_state == 2" type="text"
|
|
|
+ @click="handleShowDialog(scope.$index, scope.row)">
|
|
|
+ 已到账
|
|
|
+ </el-tag>
|
|
|
+ <el-tag class="red_font" v-else-if="scope.row.pay_state == 1" type="text"
|
|
|
+ @click="handleShowDialog(scope.$index, scope.row)">
|
|
|
+ 未到账
|
|
|
+ </el-tag>
|
|
|
+ <el-tag class="red_font" v-else="scope.row.pay_state == 0" type="text"
|
|
|
+ @click="handleShowDialog(scope.$index, scope.row)">
|
|
|
+ 未支付
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="re_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"></el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="forth-row">
|
|
|
+ <!-- 支付状态对话框 -->
|
|
|
+ <el-dialog title="支付状态" :visible.sync="viewdialogFormVisible" :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false" width="500px" top="0vh" class="my-dialog">
|
|
|
+ <hr
|
|
|
+ style="width:100%; position:absolute; top:60px; left:0px; background-color:#CCCCCC; height:1px; border:0;">
|
|
|
+ <div class="desc">
|
|
|
+ <span class="lab">联系人：</span>
|
|
|
+ <span class="con">{{ showOrderStatus.userName }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="desc">
|
|
|
+ <span class="lab">支付情况：</span>
|
|
|
+ <span class="con">{{ showOrderStatus.orderState }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="desc">
|
|
|
+ <span class="lab">现账户余额：</span>
|
|
|
+ <span class="con">{{ showOrderStatus.balance }}</span>
|
|
|
+ </div>
|
|
|
+ <span class="seal-result" v-if="showOrderStatus.result == 0">已支付</span>
|
|
|
+ <span class="seal-result seal-result-fail" v-else-if="showOrderStatus.result == 1">未支付</span>
|
|
|
+ <span v-else="showOrderStatus.result == -1"></span>
|
|
|
+ </el-dialog>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ amount: 0.0.toFixed(2),
|
|
|
+ total_times: 0,
|
|
|
+ avg: 0.0.toFixed(2),
|
|
|
+ select_datetime: [],
|
|
|
+ startTime: '',
|
|
|
+ endTime: '',
|
|
|
+ options: [{
|
|
|
+ value: 2,
|
|
|
+ label: '已到账'
|
|
|
+ }, {
|
|
|
+ value: 1,
|
|
|
+ label: '未到账'
|
|
|
+ }, {
|
|
|
+ value: 0,
|
|
|
+ label: '未支付'
|
|
|
+ }],
|
|
|
+ selectItem: {
|
|
|
+ value: '',
|
|
|
+ label: ''
|
|
|
+ },
|
|
|
+ searchformUser: '', // 查找的姓名
|
|
|
+ select_month: '', // 选择的月份
|
|
|
+ // 余额列表
|
|
|
+ tableData: [], // 余额列表
|
|
|
+ rows_total: 0, // 余额列表总记录数
|
|
|
+ currentPage: 1, // 余额列表当前页
|
|
|
+ pageRows: 8, // 每页记录数
|
|
|
+ viewdialogFormVisible: false,
|
|
|
+ showOrderStatus: {
|
|
|
+ userName: '',
|
|
|
+ orderState: '',
|
|
|
+ balance: 0,
|
|
|
+ result: -1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // 获取总金额
|
|
|
+ // this.get_total_amount()
|
|
|
+ // 获取余额列表
|
|
|
+ let params = {
|
|
|
+ page: this.currentPage,
|
|
|
+ rows: this.pageRows
|
|
|
+ }
|
|
|
+
|
|
|
+ // 初始化日期为今天天 至 明天
|
|
|
+ this.initDate()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 订单详情
|
|
|
+ * @param {Object} index
|
|
|
+ * @param {Object} row
|
|
|
+ */
|
|
|
+ handleShowDialog(index, row) {
|
|
|
+ // console.log(index, row)
|
|
|
+ // 显示支付状态对话框
|
|
|
+ this.viewdialogFormVisible = true
|
|
|
+
|
|
|
+ // 获取订单状态
|
|
|
+ this.get_order_state(row.user_name, row.stu_number, row.order_num)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取订单状态
|
|
|
+ * @param {Object} userName
|
|
|
+ * @param {Object} orderNo
|
|
|
+ */
|
|
|
+ get_order_state(userName, stu_number, orderNo) {
|
|
|
+ // 组合参数
|
|
|
+ let formData = new FormData();
|
|
|
+ formData.append("orderNo", orderNo);
|
|
|
+ formData.append("stu_number", stu_number);
|
|
|
+
|
|
|
+ this.showOrderStatus = {
|
|
|
+ userName: '',
|
|
|
+ orderState: '',
|
|
|
+ balance: 0,
|
|
|
+ result: -1
|
|
|
+ }
|
|
|
+
|
|
|
+ var _this = this;
|
|
|
+ this.$axios.post('/jxch-smartmp/HotWaters/wpqueryOrder.action', formData)
|
|
|
+ .then(res => {
|
|
|
+ // console.log(res.data);
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ // _this.$message.success('数据加载成功！');
|
|
|
+ _this.showOrderStatus.result = 0
|
|
|
+ } else if (res.data.code == 205) {
|
|
|
+ _this.showOrderStatus.result = 1
|
|
|
+ } else if (res.data.code == 520) {
|
|
|
+ _this.showOrderStatus.result = -1
|
|
|
+ } else {
|
|
|
+ _this.showOrderStatus.result = -1
|
|
|
+ _this.$message.warning('【获取订单状态】暂无数据！');
|
|
|
+ }
|
|
|
+ _this.showOrderStatus.userName = userName;
|
|
|
+ _this.showOrderStatus.balance = res.data.balance.toFixed(2);
|
|
|
+ _this.showOrderStatus.orderState = res.data.message;
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ // console.log(err);
|
|
|
+ _this.$message.error('【获取订单状态】请求异常: ' + err);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取参数
|
|
|
+ * @param {Object} e
|
|
|
+ */
|
|
|
+ getItem(e) {
|
|
|
+ if (typeof e == 'number' && e == 2) {
|
|
|
+ this.selectItem.value = this.options[0].value
|
|
|
+ this.selectItem.label = this.options[0].label
|
|
|
+ } else if (typeof e == 'number' && e == 1) {
|
|
|
+ this.selectItem.value = this.options[1].value
|
|
|
+ this.selectItem.label = this.options[1].label
|
|
|
+ } else if (typeof e == 'number' && e == 0) {
|
|
|
+ this.selectItem.value = this.options[2].value
|
|
|
+ this.selectItem.label = this.options[2].label
|
|
|
+ } else {
|
|
|
+ this.selectItem = {
|
|
|
+ value: '',
|
|
|
+ label: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // console.log(typeof(this.selectItem));
|
|
|
+ // console.log(this.selectItem);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 序号的计算
|
|
|
+ */
|
|
|
+ indexMethod(index) {
|
|
|
+ return (this.currentPage - 1) * 8 + index + 1;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 格式化列数据
|
|
|
+ */
|
|
|
+ formatBalance: (row, column, cellValue, index) => {
|
|
|
+ // row: 行数据
|
|
|
+ // column: 列属性
|
|
|
+ // cellValue: 单元格数据值
|
|
|
+ // index: 行索引，注意：2.3.9版本以后才有。
|
|
|
+ return cellValue.toFixed(2)
|
|
|
+ },
|
|
|
+ formatStatus: (row, column, cellValue, index) => {
|
|
|
+ // row: 行数据
|
|
|
+ // column: 列属性
|
|
|
+ // cellValue: 单元格数据值
|
|
|
+ // index: 行索引，注意：2.3.9版本以后才有。
|
|
|
+ // 0：未支付，1：未到账，2：已到账
|
|
|
+ if (cellValue == 2) {
|
|
|
+ return '已到账'
|
|
|
+ } else if (cellValue == 1) {
|
|
|
+ return '未到账'
|
|
|
+ } else if (cellValue == 0) {
|
|
|
+ return '未支付'
|
|
|
+ } else {
|
|
|
+ return '未知'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 充值记录列表
|
|
|
+ */
|
|
|
+ get_amount_list(params) {
|
|
|
+ var _this = this
|
|
|
+ // _this.tableData = []
|
|
|
+ // _this.rows_total = 0
|
|
|
+ this.$axios.get('/jxch-smartmp/HotWaters/waterqueryRe.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
|
|
|
+
|
|
|
+ _this.amount = res.data.totalAccount.toFixed(2)
|
|
|
+ _this.total_times = res.data.total
|
|
|
+ _this.avg = res.data.avgAccount.toFixed(2)
|
|
|
+ } else {
|
|
|
+ _this.$message.success('【充值记录列表】暂无数据！');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ // console.log(err);
|
|
|
+ _this.$message.error('【充值记录列表】请求异常: ' + err);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 充值记录列表改变页码
|
|
|
+ * @param {Object} val
|
|
|
+ */
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ // console.log(val);
|
|
|
+ this.currentPage = val
|
|
|
+ var params = {
|
|
|
+ page: this.currentPage,
|
|
|
+ rows: this.pageRows,
|
|
|
+ }
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ if (typeof this.selectItem.value == 'number' && this.selectItem.label != '') {
|
|
|
+ params.value = this.selectItem.value
|
|
|
+ // params.label = this.selectItem.label
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取充值记录列表
|
|
|
+ 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(1)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取指定格式 年、月、日
|
|
|
+ * @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 {
|
|
|
+ // 选择日期后，马上搜索
|
|
|
+ // this.handleCurrentChange(1)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 查找姓名对应的 余额列表
|
|
|
+ */
|
|
|
+ onSearch() {
|
|
|
+ this.currentPage = 1
|
|
|
+
|
|
|
+ this.handleCurrentChange(this.currentPage)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 导出为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/waterre_toExcel.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);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取查看记录列表
|
|
|
+ */
|
|
|
+ get_view_list(params) {
|
|
|
+ var _this = this
|
|
|
+ _this.view_tableData = []
|
|
|
+ // _this.view_rows_total = 0
|
|
|
+ this.$axios.get('/jxch-smartmp/HotWaters/waterfindRecharge.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.view_tableData = res.data.rows
|
|
|
+ _this.view_rows_total = res.data.total
|
|
|
+ } else {
|
|
|
+ _this.$message.success('【获取查看记录列表】暂无数据！');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ // console.log(err);
|
|
|
+ _this.$message.error('【获取查看记录列表】请求异常: ' + err);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ @import url("tuikuan.css");
|
|
|
+</style>
|
soft5566
