userPayOrder.vue 7.9 KB
<template>
    <el-container>
        <el-main >
            <el-row type="flex" class="row-bg" justify="center">
                <el-col :span="20">
                    <div style="background-color: mediumseagreen; height: 45px; color: #e6f1fe;">
                        <h2>&nbsp;&nbsp;查询房间号</h2>
                    </div>
                    <br/>
                    <el-form :inline="true"  :model="filters">
                        <el-form-item prop="roomNumber">
                            <el-input style="width: 700px" v-model="filters.roomNumber" placeholder="房间号"></el-input>
                            <br/><br/>
                            <el-button style="width: 150px" type="primary" v-on:click="getdefaultData()">查询</el-button>
                        </el-form-item>
                    </el-form>

                    <el-form :model="userPayForm" :rules="rules"  ref="userPayForm"  label-width="180px" :label-position="labelPosition">
                        <el-col :span="24">
                            <el-form-item label="透支电费">
                                <el-input disabled="" style="width: 100px" v-model="userPayForm.overdraftthreshold"></el-input>&nbsp;元
                            </el-form-item>


                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="状态">
                                <el-input disabled="" style="width: 100px" v-model="userPayForm.payUserName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="剩余电费">
                                <el-input disabled="" style="width: 100px" v-model="userPayForm.payLocationName"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="24">
                            <el-form-item label="充值日期">
                                <el-date-picker type="date" placeholder="" v-model="userPayForm.payTime"  disabled="" style="width: 200px;" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item v-if="Edistatus=='create'" label="充值金额" prop="payFees">
                                <el-input type="number" oninput ="value=value.replace(/[^0-9.]/g,'')" v-model.number="userPayForm.payFees"></el-input>
                            </el-form-item>
                            <el-form-item v-else label="充值金额" prop="payFees">
                                <el-input  type="number" oninput ="value=value.replace(/[^0-9]/g,'')" v-model.number="userPayForm.payFees"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form>

                    <el-form :model="waterForm" :rules="rules"  ref="userPayForm"  label-width="180px" :label-position="labelPosition">
                        <el-col :span="24">
                            <el-form-item label="透支水费">
                                <el-input disabled="" style="width: 100px" v-model="waterForm.overdraftthreshold"></el-input>&nbsp;元
                            </el-form-item>


                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="状态">
                                <el-input disabled="" style="width: 100px" v-model="waterForm.payUserName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="剩余水费">
                                <el-input disabled="" style="width: 100px" v-model="waterForm.payLocationName"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="24">
                            <el-form-item label="充值日期">
                                <el-date-picker type="date" placeholder="" v-model="waterForm.payTime"  disabled="" style="width: 200px;" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item v-if="Edistatus=='create'" label="充值金额" prop="payFees">
                                <el-input type="number" oninput ="value=value.replace(/[^0-9.]/g,'')" v-model.number="waterForm.payFees"></el-input>
                            </el-form-item>
                            <el-form-item v-else label="充值金额" prop="payFees">
                                <el-input  type="number" oninput ="value=value.replace(/[^0-9]/g,'')" v-model.number="waterForm.payFees"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </el-col>


            </el-row>
        </el-main>
    </el-container>
</template>
<style scoped>

</style>
<script>
    import loginUserInfo from '@/api/base'
    import {getList} from '../../api/empt/userPayOrder';

    export default {
        data() {
            return{
                filters:{
                    roomNumber:''
                },

                userPayForm:{
                    overdraftthreshold:'',
                    payTime:'',
                },
                waterForm:{
                    overdraftthreshold:'',
                    payTime:'',
                },
                rules:{
                    payType: [
                        { required: true, message: '请选择充值类型', trigger: 'change' }
                    ],
                    payFees:[
                        { required: true, message: '充值金额不能为空'},
                        { type: 'number', message: '金额必须为数字值'}
                    ],

                },

                labelPosition:'left',
                Edistatus:'',
                shuibiao:'',
                dianbiao:''
            }
        },
        methods:{

            getdefaultData(){

                let para = {
                    roomNumber: this.filters.roomNumber
                };


                getList(para).then((res) => {
                    let resData = res.data;
                    if (resData.length>0){
                        for(var i=0; i<resData.length; i++){
                            if(resData[i].wmId === null){

                                this.userPayForm = resData[i];
                                this.userPayForm.payTime = new Date();
                            }else {
                                this.waterForm = resData[i];
                                this.waterForm.payTime = new Date();
                            }
                        }
                    }else {
                        this.$alert('请输入正确的房间号', '提示', {
                            confirmButtonText: '确定',
                            callback: action => {
                            }
                        });
                    }


                    this.listLoading = false;
                    //NProgress.done();
                }).catch((error) => {
                    this.listLoading = false;
                    if(null!= error.response && error.response!==undefined){
                        let status= error.response.status;
                        let msg = error.response.statusText;
                        alert("请输入所查询的房号1");
                    }else {
                        this.$alert('请输入房间号', '提示', {
                            confirmButtonText: '确定',

                        });
                    }

                });


            },

        },
        mounted(){

        }
    }
</script>