love-donation-portal/src/views/business/billPush-detail-list.vue

<template>
    <el-dialog
    :visible.sync="showDialog"
    :title="title"
    width="95%"
    :modal-append-to-body="false"
    style="text-align:left;"
    @close="closeDialog"
    :close-on-click-modal="false"
  >
        <div class="user-panel" v-loading="loading">
                <el-form ref="form" :model="formModel" >
                    <el-row :gutter="20" >
                        <el-col :span="8">
                            <div class="grid-content bg-purple">
                                <span class="fontText">账单名称</span> 
                                <span class="data">{{formModel.name}}</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <span class="fontText">账单备注</span> 
                            <span class="data">{{formModel.bak}}</span>
                        </el-col>
                        <el-col :span="8">
                            <span class="fontText">收费项目</span> 
                            <span class="data">{{formModel.payServiceN}}</span>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" >
                        <el-col :span="8">
                            <div class="grid-content bg-purple">
                                <span class="fontText">收款方</span> 
                                <span class="data">{{formModel.payee}}</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <span class="fontText" >收款账户</span> 
                            <span class="data" v-if="formModel.collectionAccount=='1'">物业账户</span>
                            <span class="data" v-if="formModel.collectionAccount=='2'">企业账户</span>
                        </el-col>
                        <el-col :span="8">
                            <span class="fontText">推送时间</span> 
                            <span class="data">{{formModel.pushTime}}</span>
                        </el-col>
                    </el-row>
                 </el-form>
            </div>
            <el-divider></el-divider>
            <el-form ref="queryForm" :model="queryModel" inline class="demo-form-inline">
                <el-form-item label="待缴用户" prop="name">
                    <el-input type="text" size="mini" v-model="queryModel.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phone">
                    <el-input type="text" size="mini" v-model="queryModel.phone"></el-input>
                </el-form-item>
                <el-form-item label="所属单位" prop="unit">
                    <el-select v-model="queryModel.unit"  size="mini" filterable focus="" >

                    </el-select>
                </el-form-item>
                <el-form-item label="推送状态" prop="pushStatus">
                <el-select v-model="queryModel.pushStatus"  size="mini">
                </el-select>
                </el-form-item>
                <el-form-item label="缴费状态" prop="payService">
                    <el-select v-model="queryModel.payService"  size="mini">
                    </el-select>
                </el-form-item>
                <el-form-item label="支付方式" prop="payService">
                    <el-select v-model="queryModel.payService"  size="mini">
                    </el-select>
                </el-form-item>
                <el-form-item label="支付时间" prop="pushTimeRange">
                <el-date-picker
                    v-model="queryModel.pushTimeRange"
                    type="daterange"
                    size="mini"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="选择时间范围"
                    value-format="yyyy-MM-dd"
                    >
                </el-date-picker>
            </el-form-item>
                <el-form-item>
                    <el-button
                    type="primary"
                    size="mini"
                    icon="ios-search"
                    @click="changePage(1)"
                    :loading="loading"
                    >查询</el-button>&nbsp;
                    <el-button
                    type="info"
                    size="mini"
                    style="margin-left: 8px"
                    @click="handleReset('queryForm')"
                    >重置</el-button>&nbsp;
                </el-form-item>
            </el-form>
            <el-divider></el-divider>
            <template>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="全部" name="first">
                        <el-table :data="tableData" v-loading="loading" stripe>
                            <el-table-column type="index" label="序号" width="50"></el-table-column>
                            <el-table-column prop="name" label="姓名"></el-table-column>
                            <el-table-column prop="phone" label="手机号码"></el-table-column>
                            <el-table-column prop="unit" label="所属单位"></el-table-column>
                            <el-table-column prop="unit" label="收费项目"></el-table-column>
                            <el-table-column prop="unit" label="收费金额"></el-table-column>
                            <el-table-column prop="unit" label="推送状态"></el-table-column>
                            <el-table-column prop="unit" label="缴费状态"></el-table-column>
                            <el-table-column prop="unit" label="支付方式"></el-table-column>
                            <el-table-column prop="unit" label="支付时间"></el-table-column>
                            <el-table-column prop="unit" label="操作"></el-table-column>
                        </el-table>
                        <el-pagination style="text-align: center;"
                            :current-page.sync="pageIndex"
                            :total="totalElements"
                            :page-sizes="pageSizeList"
                            @current-change="changePage"
                            @size-change="pageSizeChange"
                            layout="total, sizes, prev, pager, next, jumper"
                        ></el-pagination>
                    </el-tab-pane>
                    <el-tab-pane label="已支付" name="second">
                        <el-table :data="tableData" v-loading="loading" stripe>
                            <el-table-column type="index" label="序号" width="50"></el-table-column>
                            <el-table-column prop="name" label="姓名"></el-table-column>
                            <el-table-column prop="phone" label="手机号码"></el-table-column>
                            <el-table-column prop="unit" label="所属单位"></el-table-column>
                            <el-table-column prop="unit" label="收费项目"></el-table-column>
                            <el-table-column prop="unit" label="收费金额"></el-table-column>
                            <el-table-column prop="unit" label="推送状态"></el-table-column>
                            <el-table-column prop="unit" label="缴费状态"></el-table-column>
                            <el-table-column prop="unit" label="支付方式"></el-table-column>
                            <el-table-column prop="unit" label="支付时间"></el-table-column>
                            <el-table-column prop="unit" label="操作"></el-table-column>
                        </el-table>
                        <el-pagination style="text-align: center;"
                            :current-page.sync="pageIndex"
                            :total="totalElements"
                            :page-sizes="pageSizeList"
                            @current-change="changePage"
                            @size-change="pageSizeChange"
                            layout="total, sizes, prev, pager, next, jumper"
                        ></el-pagination>
                    </el-tab-pane>
                    <el-tab-pane label="未支付" name="third">
                        <el-table :data="tableData"  v-loading="loading" stripe>
                            <el-table-column type="index" label="序号" width="50"></el-table-column>
                            <el-table-column prop="name" label="姓名"></el-table-column>
                            <el-table-column prop="phone" label="手机号码"></el-table-column>
                            <el-table-column prop="unit" label="所属单位"></el-table-column>
                            <el-table-column prop="unit" label="收费项目"></el-table-column>
                            <el-table-column prop="unit" label="收费金额"></el-table-column>
                            <el-table-column prop="unit" label="推送状态"></el-table-column>
                            <el-table-column prop="unit" label="缴费状态"></el-table-column>
                            <el-table-column prop="unit" label="支付方式"></el-table-column>
                            <el-table-column prop="unit" label="支付时间"></el-table-column>
                            <el-table-column prop="unit" label="操作"></el-table-column>
                        </el-table>
                        <el-pagination style="text-align: center;"
                            :current-page.sync="pageIndex"
                            :total="totalElements"
                            :page-sizes="pageSizeList"
                            @current-change="changePage"
                            @size-change="pageSizeChange"
                            layout="total, sizes, prev, pager, next, jumper"
                        ></el-pagination>
                    </el-tab-pane>
                    <el-tab-pane label="已发送" name="fourth">
                        <el-table :data="tableData" v-loading="loading" stripe>
                            <el-table-column type="index" label="序号" width="50"></el-table-column>
                            <el-table-column prop="name" label="姓名"></el-table-column>
                            <el-table-column prop="phone" label="手机号码"></el-table-column>
                            <el-table-column prop="unit" label="所属单位"></el-table-column>
                            <el-table-column prop="unit" label="收费项目"></el-table-column>
                            <el-table-column prop="unit" label="收费金额"></el-table-column>
                            <el-table-column prop="unit" label="推送状态"></el-table-column>
                            <el-table-column prop="unit" label="缴费状态"></el-table-column>
                            <el-table-column prop="unit" label="支付方式"></el-table-column>
                            <el-table-column prop="unit" label="支付时间"></el-table-column>
                            <el-table-column prop="unit" label="操作"></el-table-column>
                        </el-table>
                        <el-pagination style="text-align: center;"
                            :current-page.sync="pageIndex"
                            :total="totalElements"
                            :page-sizes="pageSizeList"
                            @current-change="changePage"
                            @size-change="pageSizeChange"
                            layout="total, sizes, prev, pager, next, jumper"
                        ></el-pagination>
                    </el-tab-pane>
                    <el-tab-pane label="未发送" name="fiveth">
                        <el-table :data="tableData" v-loading="loading" stripe>
                            <el-table-column type="index" label="序号" width="50"></el-table-column>
                            <el-table-column prop="name" label="姓名"></el-table-column>
                            <el-table-column prop="phone" label="手机号码"></el-table-column>
                            <el-table-column prop="unit" label="所属单位"></el-table-column>
                            <el-table-column prop="unit" label="收费项目"></el-table-column>
                            <el-table-column prop="unit" label="收费金额"></el-table-column>
                            <el-table-column prop="unit" label="推送状态"></el-table-column>
                            <el-table-column prop="unit" label="缴费状态"></el-table-column>
                            <el-table-column prop="unit" label="支付方式"></el-table-column>
                            <el-table-column prop="unit" label="支付时间"></el-table-column>
                            <el-table-column prop="unit" label="操作"></el-table-column>
                        </el-table>
                        <el-pagination style="text-align: center;"
                            :current-page.sync="pageIndex"
                            :total="totalElements"
                            :page-sizes="pageSizeList"
                            @current-change="changePage"
                            @size-change="pageSizeChange"
                            layout="total, sizes, prev, pager, next, jumper"
                        ></el-pagination>
                    </el-tab-pane>
                </el-tabs>
            </template>
    </el-dialog>
</template>
<script>
import Constant from "@/constant";
import billPushApi from "@/api/business/billPush";
import billPushPersonApi from "@/api/business/billPushPerson";
export default {
    props: ["businessKey", "title"],
    data() {
        return{
            formModel:{

            },
            queryModel: {
                name: "",
                status: "",
                pushTimeRange: ['',''],
                companyId:"",
                payService:"",
            },
            tableData:[],
            pageIndex: 1,
            pageSize: 10,
            totalPages: 0,
            totalElements: 0,
            pageSizeList: [10, 20, 30],
            multipleSelection: [],
            activeName:"first",
            showDialog: true,
            loading: false,
        }
    },
    methods:{
        closeDialog() {
            this.$emit("close", false);
        },
        handleClick(){

        },
        changePage(pageIndex) {
            var self = this;
            self.loading = true;

            var mainId = self.businessKey;

            self.pageIndex = pageIndex;
            var formData = new FormData();

            formData.append("mainId", mainId);
            formData.append("pageIndex", self.pageIndex);
            formData.append("pageSize", self.pageSize);


            billPushPersonApi.pageList(formData)
                .then(function(response) {
                    self.loading = false;

                    var jsonData = response.data.data;

                    self.tableData = jsonData.data;
                    self.totalPages = jsonData.totalPages;
                    self.totalElements = jsonData.recordsTotal;
                })
                .catch(error => {
                    self.loading = false;
                    // self.$message.error(error + "");
                });
 
        },
        pageSizeChange(pageSize) {
            this.pageSize = pageSize;
        },
    },
    mounted: function() {
        var self = this;

        this.changePage(1);

        (function() {
            if (self.businessKey.length == 0) {
                return billPushApi.createPerson();
            } else {
                return billPushApi.detail(self.businessKey);
            }
        })()
        .then(response => {
            var jsonData = response.data;
            self.loading = false;

            if (jsonData.result) {
                self.formModel = jsonData.data;
            } else {
                self.$message.error(jsonData.message + "");
            }
        })
        .catch(error => {
            self.$message.error(error + "");
        });
    }
}
</script>
<style scoped>
.user-panel {
  margin: 10px auto;
  margin-left: 20px;
}
.data{
    margin-left: 50px;
    font-weight:bold
}
.el-row {
margin-bottom: 20px;
}
.el-col {
border-radius: 4px;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.title1{
    margin-bottom: 40px;
}
.title2{
    margin-top: 40px;
    margin-bottom: 40px;
}
</style>