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

<template>
    <el-dialog
    :visible.sync="showDialog"
    :title="title"
    width="70%"
    :modal-append-to-body="true"
    style="text-align:left;"
    @close="closeDialog"
    :close-on-click-modal="false"
    append-to-body
    
  >
        <div class="user-panel" v-loading="loading">
                <el-form ref="form" :model="formModel" label-width="150">
                    <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.payee}}</span>
                        </el-col>
                        <el-col :span="8">
                            <span class="fontText">收款账户</span> 
                            <span class="data">{{formModel.collectionAccount}}</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.companyName}}</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <span class="fontText" >推送用户</span> 
                            <span class="data" >{{formModel.personName}}</span>
                        </el-col>
                        <el-col :span="8">
                            <span class="fontText">推送状态</span> 
                            <span class="data" v-if="formModel.status=='0'" style="color:#F56C6C">未推送</span>
                            <span class="data" v-else-if="formModel.status=='1'" style="color:#67C23A">已推送</span>
                            <span class="data" v-else-if="formModel.status=='2'" style="color:#E6A23C">推送失败</span>
                            <span class="data" v-else-if="formModel.status=='3'" style="color:#909399">已关闭</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.pushTime}}</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <span class="fontText" >缴费状态</span> 
                            <span class="data" v-if="formModel.payStatus=='10'" style="color:#F56C6C">未支付</span>
                            <span class="data" v-if="formModel.payStatus=='15'" style="color:#E6A23C">部分支付</span>
                            <span class="data" v-else-if="formModel.payStatus=='20'" style="color:#67C23A">已支付</span>
                            <span class="data" v-else-if="formModel.payStatus=='30'" style="color:#909399">已关闭</span>
                            <span class="data" v-else-if="formModel.payStatus=='40'" style="color:#909399">已退款</span>
                        </el-col>
                        <el-col :span="8">
                            <span class="fontText">支付方式</span> 
                            <el-link class="data"  type="primary" v-if="formModel.payStatus=='10'" @click="handlePayTime">{{formModel.payName}}</el-link>
                            <span class="data" v-else>{{formModel.payName}}</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.payTime}}</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <span class="fontText" >收款人</span> 
                            <span class="data">{{formModel.payeePerson}}</span>
                        </el-col>
                        <el-col :span="8">
                            <span class="fontText">账单备注</span> 
                            <span class="data">{{formModel.bak}}</span>
                        </el-col>
                    </el-row>
                 </el-form>
            </div>
            <el-divider></el-divider>
            <el-row class="button-group">
                <el-button type="success" size="small" plain icon="el-icon-download" @click="exportXls()">导出数据</el-button>
                <el-button
                    type="primary"
                    size="small"
                    plain
                    icon="el-icon-edit"
                    @click="handleEdit" v-if="formModel.status=='0'"
                    >修改账单</el-button
                >
                <el-button
                    type="primary"
                    size="small"
                    plain
                    icon="el-icon-edit"
                    disabled
                    @click="handleEdit" v-else
                    >修改账单</el-button
                >
            </el-row>
            <el-table :data="tableData" v-loading="loading" stripe  show-summary :summary-method="getSummaries">
                <el-table-column type="index" label="序号" width="80"></el-table-column>
                <el-table-column prop="goodsName" label="收费项目"></el-table-column>
                <el-table-column prop="beginEndTime" label="起止时间" width="300"></el-table-column>
                <el-table-column prop="num" label="数量"></el-table-column>
                <el-table-column prop="standard" label="收费标准（元）"></el-table-column>
                <el-table-column prop="totalFee" 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>
            <billPush-detail
                v-if="showModal"
                :businessKey="businessKey"
                :title="modalTitle"
                @close="onDetailModalClose"
            ></billPush-detail>
            <billPush-order-payTime
                v-if="showModal2"
                :businessKey="businessKey"
                :title="modalTitle2"
                @close="onDetailModalClose2"
            ></billPush-order-payTime>

    </el-dialog>
</template>
<script>
import Constant from "@/constant";
import billPushApi from "@/api/business/billPush";
import billPushPersonApi from "@/api/business/billPushPerson";
import billPushDetail from "./billPush-detail";
import billPushOrderPayTime from "./billPush-order-payTime";
export default {
    props: ["businessKey", "title"],
    data() {
        return{
            formModel:{

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

        },
        handleEdit() {
            this.modalTitle = "编辑";
            this.operation = "edit";
            this.businessKey = this.businessKey;
            this.showModal = true;
        },
        changePage(pageIndex,exportFlag) {
            var self = this;
            self.loading = true;

            var billPushId = self.businessKey;

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

            formData.append("billPushId", billPushId);
            formData.append("pageIndex", self.pageIndex);
            
            
            if(exportFlag!=null){
                formData.append("exportFlag", exportFlag);
                formData.append("pageSize", 10000);
            }
            else{
                formData.append("pageSize", self.pageSize);
            }


            billPushApi.goodsPageList(formData)
                .then(function(response) {
                    self.loading = false;

                    var jsonData = response.data;

                    if(jsonData.result) {
                        if(exportFlag){
                            //导出
                            self.$message({
                                showClose: true,
                                type: "success",
                                message: `报表已生成，<a href="${jsonData.data}">请点击链接下载</a>`,
                                dangerouslyUseHTMLString: true,
                                duration: 30000
                            });
                        }
                        else{
                            //分页查看
                            var page = jsonData.data;

                            self.tableData = page.data;
                            self.totalPages = page.totalPages;
                            self.totalElements = page.recordsTotal;
                        }
                    }
                    else{
                        self.$message.warning(jsonData.message);
                    }

                    // 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;
        },
        onDetailModalClose(retObj) {
            //保存成功后回调
            this.showModal = false;
            //this.closeDialog();
             this.changePage(1,false);
        },
        exportXls() {
            this.changePage(1,true);
        },
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合计';
                    return;
                }
                const values = data.map(item => Number(item[column.property]));
                if (!values.every(value => isNaN(value))) {
                    sums[5] = values.reduce((prev, curr) => {
                    const value = Number(curr);
                    if (!isNaN(value)) {
                        return prev + curr;
                    } else {
                        return prev;
                    }
                    }, 0);
                    sums[5] ;
                } else {
                    sums[index] = '';
                }
            });

            return sums;
        },
        onDetailModalClose2(){
            //保存成功后回调
            this.showModal2 = false;
            var self = this;

            (function() {
                if (self.businessKey.length == 0) {
                    return billPushApi.createGoods();
                } 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 + "");
            });

        },
        handlePayTime(){
            var self = this;

            var billPushId = self.businessKey;

            this.modalTitle2 = "账单推送详情";
            this.operation = "detail";
            this.businessKey = billPushId;
            this.showModal2 = true;
        }
    },
    components: {
        "billPush-detail": billPushDetail,
        "billPush-order-payTime":billPushOrderPayTime
    },
    mounted: function() {
        var self = this;

        (function() {
            if (self.businessKey.length == 0) {
                return billPushApi.createGoods();
            } 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 + "");
        });

        this.changePage(1,false);
    }
}
</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>