eeInfo.vue 4.0 KB
<template>
    <section>
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.deviceId" placeholder="设备编号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="EeInfoQuery()">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-table
                v-loading="listLoading"
                :data="eeInfoList"
                stripe
                style="width: 100%">
            <el-table-column prop="orderNumber" label="订单号">
            </el-table-column>

            <el-table-column prop="actionType" label="充值类型">
                <template slot-scope="scope">
                    <div v-if="scope.row.actionType === '0'" style="color:#20a0ff">充值</div>
                    <div v-else="scope.row.paytype === 1" style="color: #42d885">扣费</div>
                </template>
            </el-table-column>

            <el-table-column prop="deviceId" label="设备编号">
            </el-table-column>

            <el-table-column prop="money" label="充值金额">
            </el-table-column>

            <el-table-column prop="status" label="充值状态">
                <template slot-scope="scope">
                    <div v-if="scope.row.status === '0'" style="color:#42d885">成功</div>
                    <div v-else="scope.row.status === 1" style="color:#ff4d51">失败</div>
                </template>
            </el-table-column>

            <el-table-column prop="opertTime" :formatter="dateForma" label="充值日期">
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange" :page-size="5"
                           :total="total" style="float:right;">
            </el-pagination>
        </el-col>

    </section>
</template>

<script>
    import {getList} from "../../api/empt/eeInfo";
    import moment from "moment";

    export default {
        data() {
            return {
                filters: {
                    deviceId: ''
                },
                total: 0,
                pageNum: 1,
                pageSize: 5,
                eeInfoList: [],
                listLoading: false
            }
        },
        methods: {
            handleCurrentChange(val) {
                this.pageNum = val;
                this.EeInfoQuery();
            },
            EeInfoQuery() {
                let params = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    deviceId: this.filters.deviceId

                };
                this.listLoading = true;
                getList(params).then(res => {
                    let resData = res.data;
                    this.total = resData.total;
                    this.eeInfoList = resData.list;
                    this.listLoading = false;
                }).catch((error) => {
                    if (null != error.response && error.response !== undefined) {
                        let status = error.response.status;
                        let msg = error.response.statusText;
                        this.listLoading = false;
                        alert(status + msg);
                    } else {
                        this.listLoading = false;
                        alert(error);
                    }
                })
            },

            dateForma: function (row, column) {

                var date = row[column.property];

                if (date == undefined) {
                    return ''
                }
                ;

                return moment(date).format("YYYY-MM-DD HH:mm:ss")

            }
        },
        mounted() {
            this.EeInfoQuery();
        }
    }
</script>

<style scoped>

</style>