jk-temporary-workers-portal/src/views/business/billPush-list.vue

<template>
    <div>
        <el-breadcrumb separator=">">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>
                <a href="#">系统管理</a>
            </el-breadcrumb-item>
            <el-breadcrumb-item>
                <a href="#">账单推送管理</a>
            </el-breadcrumb-item>
            </el-breadcrumb>
        <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>
                <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>
        <el-row class="button-group">
            <el-button
                type="primary"
                size="small"
                plain
                icon="el-icon-circle-plus"
                @click="handleAdd"
                >创建账单</el-button
            >
        </el-row>
        <el-table :data="tableData" style="min-height:400px;" v-loading="loading" stripe>
            <el-table-column type="index" label="序号" :index="indexMethod" width="50"></el-table-column>
            <el-table-column prop="name" label="账单名称" width="120"></el-table-column>
            <el-table-column prop="bak" label="账单备注" width="120"></el-table-column>
            <el-table-column prop="collectionAccount" label="收款账户" width="120"></el-table-column>
            <el-table-column prop="payService" label="收费项目" width="120"></el-table-column>
            <el-table-column prop="pushTime" label="账单推送时间" width="120"></el-table-column>
            <el-table-column label="账单推送情况" width="180">
                <template slot-scope="{row}">
                    <div>应发送人数：{{row.totalPushNumber}}</div>
                    <div>实发送人数：{{row.actualPushNumber}}</div>
                    <div>未通知人数：{{row.notYetPushNumber}}<span class="span-view"><el-link type="primary"><i class="el-icon-view"></i></el-link></span></div>
                    
                </template>
            </el-table-column>
            <el-table-column label="账单收缴情况" width="180">
                <template slot-scope="{row}">
                    <div>应收：{{row.totalReceivable}}元</div>
                    <div>实收：{{row.netReceipts}}元</div>
                    <div>未收：{{row.notReceived}}元<span class="span-view"><el-link type="primary"><i class="el-icon-view"></i></el-link></span></div>
                </template>
            </el-table-column>
            <el-table-column prop="payee" label="收款方" width="80"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="{row}">
                    <div>
                        <span class="link-span"><el-link  type="success" @click="handleEdit(row)">导入名单</el-link></span>
                        <el-link  type="primary" @click="handleDelete(row)">查看详情</el-link>
                    </div>
                    <div>
                        <span class="link-span"><el-link  type="primary" @click="handleDelete(row)">推送账单</el-link></span>
                        <el-link  type="warning" @click="handleDelete(row)">关闭账单</el-link>
                    </div>
                    <el-link  type="danger" @click="handleDelete(row)">删除账单</el-link>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
        :current-page.sync="pageIndex"
        :total="totalElements"
        :page-sizes="pageSizeList"
        @current-change="changePage"
        @size-change="pageSizeChange"
        layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
    </div>
</template>
<script>
import Constant from "@/constant";
import billPushApi from "@/api/business/billPush";
export default {
    name: "businessBillPushList",
    data() {
        var self = this;

        return {
            queryModel: {
                personName: "",
                status: "",
                requestTimeRange: ['',''],
            },
            loading: false,
            tableData: [],
            pageIndex: 1,
            pageSize: 10,
            totalPages: 0,
            totalElements: 0,
            pageSizeList: [10, 20, 30],
            multipleSelection: [],
            showModal: false,
        }
    },
    methods: {
        changePage(pageIndex) {
            var self = this;

            self.loading = true;

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

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


            billPushApi.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() {
        this.changePage(1);
    }
}
</script>
<style lang="scss" scoped>
.el-breadcrumb {
  margin: 10px;
  line-height: 20px;
}

.el-divider {
  margin: 5px 0;
}

.demo-form-inline {
  margin-left: 10px;
  text-align: left;
}

.button-group {
  margin-left: 10px;
  text-align: left;
}
.link-span{
    margin-right: 30px;
}
.span-view{
    margin-left: 10px;
}
</style>