ByhLoanBackedList.vue

<template>
    <div>
        <div class="page-search">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="formInline.backedNo" onkeyup="this.value=this.value.replace(/\s+/g,'')" placeholder="还款编号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="formInline.bankAccount" onkeyup="this.value=this.value.replace(/\s+/g,'')" placeholder="还款银行账号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="formInline.status" placeholder="还款单状态">
                        <el-option v-for="item in this.$enumUtils.toValue('LoanBackedStatusEnum')" :key="item.value"
                                   :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-date-picker v-model="formInline.date" type="daterange"  range-separator="至"
                                    start-placeholder="还款单开始日期" end-placeholder="还款单结束日期"></el-date-picker>
                </el-form-item>
                <br/>
                <!-- <el-button @click="importMarketMoney"  type="primary" style="margin-left:80px;float:left">数据导出</el-button> -->
                <el-form-item style="float:right;margin-right:80px" >
                    <el-button @click="reset" type="primary">重置</el-button>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-table :data="loanBackedList" stripe style="width: 100%">
                <el-table-column prop="backedNo" label="还款编号" ></el-table-column>
                <el-table-column prop="cardOwnerName" label="银行账号户主名称" ></el-table-column>
                <el-table-column prop="cardOwnerMobile" label="银行账号户主电话号码" ></el-table-column>
                <el-table-column prop="clientNo" label="客户编号" ></el-table-column>
                <el-table-column prop="cardBankAccount" label="银行账号" ></el-table-column>
                <el-table-column prop="bankAccount" label="还款银行账号"></el-table-column>
                <el-table-column prop="cardBankName" label="还款银行账户名称"></el-table-column>
                <el-table-column prop="backedAmt" label="还款金额" ></el-table-column>
                <el-table-column prop="backedDate" label="还款时间"  :formatter="transDateFormat" ></el-table-column>
                <el-table-column prop="statusStr" label="还款单状态" ></el-table-column>
                <el-table-column prop="creator" label="创建人"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="getBackedDetails(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--分页-->
        <div class="page">
            <el-pagination
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :current-page.sync="page.current"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="page.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total">
            </el-pagination>
        </div>


    </div>
</template>

<script>
    import * as moment from "moment";
    export default {
        name: "ByhLoanBackedList",
        data(){
            return {
                flag: false,
                page: {
                    current: 1,
                    size: 10,
                    total: 0
                },
                loanBackedList:[],
                formInline: {
                    backedNo: '',
                    date: null,
                    status: '',
                    bankAccount: '',
                    backedType:'TRANSFER'
                },
            }
        },

        created() {
            if (this.$route != null && this.$route.query != null && this.$route.query.flag) {
                this.flag = this.$route.query.flag;
                this.formInline.status = this.$route.query.status;
                this.formInline.bankAccount = this.$route.query.bankAccount;
                this.page.current = parseInt(this.$route.query.current);
                this.formInline.date = this.mergeDate(this.$route.query.gmtCreatedStart, this.$route.query.gmtCreatedEnd);
            }
        },

        mounted() {
            //还款日志
            this.loanBackedList = this.backedData();
        },

        methods: {
            /** 加载数据 */
            backedData(params) {
                this.$$post('/back/getBackPageList', this.buildParam()).then(res => {
                    if (res.data.code != 200) {
                        this.$message.error(res.data.message);
                        return
                    }
                    this.loanBackedList = res.data.result.data;
                    this.page.total = res.data.result.total;
                })
            },

            /*查看详情*/
            getBackedDetails(record) {
                // this.$$get(`/detail/transfer/${record.backedNo}`)
                //     .then(res => {
                //         if (res.data.code != 200)
                //             throw res.data.message
                //     })
                //     .catch(err => this.$$msg.err(err))
                this.$router.push({
                    path: 'ByhLoanBackedDetails',
                    query: {
                        backedNo: record.backedNo,
                        clientNo: record.clientNo,
                        status: this.formInline.status,
                        bankAccount: this.formInline.bankAccount,
                        gmtCreatedStart: this.getDate(this.formInline.date, 0),
                        gmtCreatedEnd: this.getDate(this.formInline.date, 1),
                        current: this.page.current,
                    }
                })
            },

            /*搜索条件*/
            onSubmit() {
                this.backedData();
            },
            /*重置*/
            reset() {
                this.formInline.backedNo = '';
                this.formInline.date = '';
                this.formInline.status = '';
                this.formInline.bankAccount = '';
                this.formInline.clientNo = '';
            },

            dateFormatText: function (param) {
                return moment(param).format("YYYY-MM-DD");
            },

            getDate(param, num) {
                if (param && param[num] !== '') {
                    return moment(param[num]).format("YYYY-MM-DD")
                }
                return ""
            },

            mergeDate(param1, param2) {
                if (param1 == "") {
                    return ""
                }
                var array = new Array();
                array[0] = new Date(param1)
                array[1] = new Date(param2)
                return array;
            },



            //还款类型
            typyFormat: function (row, column) {
                var status = row['backedType'];
                return this.$enumUtils.toMsg('BackedTransferTypeEnum', status);
            },
            //还款单状态
            statusFormat: function (row, column) {
                var status = row['status'];
                return this.$enumUtils.toMsg('XmRaiseBackedStatus', status);
            },
            //结果状态
            resultFormat: function (row, column) {
                var result = row['result'];
                if(result!=null){
                    return this.$enumUtils.toMsg('SuccessAndFail', result);
                }else{
                    return '未处理';
                }

            },

            /** 处理分页操作*/
            handleCurrentChange() {
                this.loanBackedList = this.backedData()
            },
            handleSizeChange(row){
                this.page.size=row
                this.page.current=1;
                this.backedData();
            },

            //参数
            buildParam() {
                var return_hash = {
                    size: this.page.size,
                    current: this.page.current,
                    backedType: 'TRANSFER',
                };
                if (this.formInline.backedNo != '') {
                    return_hash['backedNo'] = this.formInline.backedNo
                }
                if (this.formInline.status != '') {
                    return_hash['status'] = this.formInline.status
                }
                if (this.formInline.bankAccount != '') {
                    return_hash['bankAccount'] = this.formInline.bankAccount
                }
                if (this.formInline.date != null  && this.formInline.date.length>0) {
                    var  end = new Date(this.formInline.date[1])

                    end=end.setDate(end.getDate()+1);
                    end=new Date(end);

                    return_hash['gmtCreatedStart'] = this.formInline.date[0];
                    return_hash['gmtCreatedEnd'] = end
                }
                return return_hash;
            },
        }
    }


</script>

<style scoped>

</style>