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="companyId">
                <!-- <el-select v-model="queryModel.companyId"  size="mini" filterable focus="" >
                    <el-option
                        v-for="company in companyList"
                        :key="company.id"
                        :label="company.name"
                        :value="company.id"
                    ></el-option>
                </el-select> -->
                <el-select-tree
                    size="mini"
                    :props="props"
                    :options="treeData"
                    v-model="queryModel.companyId"
                    height="200"
                ></el-select-tree>

            </el-form-item>
            <el-form-item label="推送状态" prop="status">
                <el-select v-model="queryModel.status"  size="mini"  >
                    <el-option
                        v-for="status in statusList"
                        :key="status.id"
                        :label="status.name"
                        :value="status.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="缴费状态" prop="payStatus">
                <el-select v-model="queryModel.payStatus"  size="mini"  >
                    <el-option
                        v-for="payStatus in payStatusList"
                        :key="payStatus.id"
                        :label="payStatus.name"
                        :value="payStatus.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="缴费方式" prop="payName">
                <el-select v-model="queryModel.payName"  size="mini"  >
                    <el-option
                        v-for="payName in payNameList"
                        :key="payName.id"
                        :label="payName.name"
                        :value="payName.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="收款账户" prop="collectionAccount">
                <el-select v-model="queryModel.collectionAccount"  size="mini"  >
                    <el-option
                        v-for="collectionAccount in collectionAccountList"
                        :key="collectionAccount.id"
                        :label="collectionAccount.name"
                        :value="collectionAccount.id"
                    ></el-option>
                </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 label="支付时间" prop="payTimeRange">
                <el-date-picker
                    v-model="queryModel.payTimeRange"
                    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 label="收费项目：" prop="payService">
            <el-select v-model="queryModel.payService"  size="mini">
                <el-option
                    v-for="payService in payServiceList"
                    :key="payService.id"
                    :label="payService.goodsName"
                    :value="payService.id"
                ></el-option>
            </el-select>
            </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 
        ref="formTable"
        :data="tableData" 
        :height="tableHeight"
        v-loading="loading" stripe>
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="name" label="账单名称" width="180"></el-table-column>
            <el-table-column prop="companyName" label="缴费单位" width="180"></el-table-column>
            <el-table-column prop="personName" label="推送用户" width="150">
                <template slot-scope="{row}">
                    <div>{{row.personName}}</div>
                    <div>{{row.phone}}</div>
                </template>
            </el-table-column>
            <el-table-column prop="collectionAccount" label="收款账户" ></el-table-column>
            <el-table-column prop="totalFee" label="订单总额" ></el-table-column>
            <el-table-column prop="status" label="账单状态">
                <template slot-scope="{row}">
                    <span v-if="row.status=='1'" style="color:#67C23A">已推送</span>
                    <span v-else-if="row.status=='2'" style="color:#E6A23C">推送失败</span>
                    <span v-else-if="row.status=='3'" style="color:#909399">已关闭</span>
                    <span v-else style="color:#F56C6C">未推送</span>
                </template>
            </el-table-column>
            <el-table-column prop="pushTime" label="推送时间"  width="180"></el-table-column>
            <el-table-column prop="payStatus" label="缴费状态" >
                <template slot-scope="{row}">
                    <span v-if="row.payStatus=='10'" style="color:#F56C6C">未支付</span>
                    <span v-else-if="row.payStatus=='15'" style="color:#E6A23C">部分支付</span>
                    <span v-else-if="row.payStatus=='20'" style="color:#67C23A">已支付</span>
                    <span v-else-if="row.payStatus=='30'" style="color:#909399">已关闭</span>
                    <span v-else-if="row.payStatus=='40'" style="color:#909399">已退款</span>
                </template>
            </el-table-column>
            <el-table-column prop="payTime" label="缴费时间" width="180"></el-table-column>
            <el-table-column prop="payName" label="支付方式" ></el-table-column>
            <el-table-column prop="payee" label="收款方" ></el-table-column>
            <el-table-column label="操作" width="180" fixed="right">
                <template slot-scope="{row}">

                    <span class="link-span"><el-link  type="primary" @click="handleDetailList(row)">查看详情</el-link></span>
                    <el-link  type="primary" @click="handlePush(row)">推送账单</el-link>

                    <div>
                        <span class="link-span"><el-link  type="warning" @click="handleClose(row)">关闭账单</el-link></span>
                        <el-link  type="danger" @click="handleDelete(row)">删除账单</el-link>
                    </div>
                    <div v-if="row.payStatus=='10'">
                        <span class="link-span"><el-link  type="primary" @click="handlePayTime(row)">设置线下支付</el-link></span>
                    </div>
                </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>
        <billPush-detail
            v-if="showModal"
            :businessKey="businessKey"
            :parentId="selectedRecord.id"
            :title="modalTitle"
            @close="onDetailModalClose"
        ></billPush-detail>
        <billPush-detail-list
            v-if="showModal2"
            :businessKey="businessKey"
            :parentId="selectedRecord.id"
            :title="modalTitle2"
            @close="onDetailModalClose2"
        ></billPush-detail-list>
        <billPush-order-payTime
            v-if="showModal3"
            :businessKey="businessKey"
            :title="modalTitle3"
            @close="onDetailModalClose3"
        ></billPush-order-payTime>
    </div>
</template>
<script>
import Constant from "@/constant";
import billPushApi from "@/api/business/billPush";
import companyInfoApi from "@/api/base/companyInfo";
import companyPaymentApi from "@/api/base/companyPayment";
import billPushDetail from "./billPush-detail";
import billPushDetailList from "./billPush-detail-list";
import billPushOrderPayTime from "./billPush-order-payTime";
import pageUtil from "@/utils/page";
import SelectTree from "@/components/SelectTree";
import NProgress from "nprogress"; // progress bar
import "nprogress/nprogress.css"; // progress bar style

export default {
    name: "businessBillPushList",
    data() {
        var self = this;

        return {
            queryModel: {
                companyId:"",
                status: "",
                payName:"",
                collectionAccount:"",
                pushTimeRange: "",
                payTimeRange:"",
                payStatus:"",
            },
            treeData: [],
            loading: false,
            statusList:[
                {
                    id:"0",
                    name:"未推送",
                },
                {
                    id:"1",
                    name:"已推送",
                },
                {
                    id:"2",
                    name:"推送失败",
                },
                {      
                    id:"3",
                    name:"已关闭",
                }
            ],
            tableData: [],
            payStatusList:[
                {
                    id:"10",
                    name:"未支付",
                },
                {
                    id:"15",
                    name:"部分支付",
                },
                {
                    id:"20",
                    name:"已支付",
                },
                {      
                    id:"30",
                    name:"已关闭",
                },
                {      
                    id:"40",
                    name:"已退款",
                }
            ],
            payNameList:[
                {
                    id:"wechat",
                    name:"微信",
                },
                {
                    id:"alipay",
                    name:"支付宝",
                },
                {
                    id:"cash",
                    name:"现金",
                },
            ],
            collectionAccountList:[],
            companyList:[],
            pageIndex: 1,
            pageSize: 10,
            totalPages: 0,
            totalElements: 0,
            pageSizeList: [10, 20, 30],
            multipleSelection: [],
            showModal: false,
            showModal2: false,
            showModal3:false,
            props: {
                // 配置项（必选）
                value: "id",
                label: "name",
                children: "children"
            },
            tableHeight: 400
        }
    },
    created() {

        
        this.loadTree();

        // companyInfoApi.list().then((response)=>{
        //     var jsonData = response.data;
        //     this.companyList = jsonData.data;
        // });

        companyPaymentApi.list().then((response)=>{
            var jsonData = response.data;
            this.collectionAccountList = jsonData.data;
        });

        setTimeout(()=>{
            this.tableHeight = pageUtil.autoAdjustHeight(this.$refs.formTable.$el);
        },1000);
    },
    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);

            if(self.queryModel.companyId!=null){
                formData.append("companyId", self.queryModel.companyId);
            }

            
            formData.append("status", self.queryModel.status);
            formData.append("payName", self.queryModel.payName);

            formData.append("collectionAccount", self.queryModel.collectionAccount);
            formData.append("pushTimeRange", self.queryModel.pushTimeRange);
            formData.append("payTimeRange", self.queryModel.payTimeRange);
            formData.append("payStatus", self.queryModel.payStatus);


            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;
        },
        handleAdd(record) {
            this.modalTitle = "账单信息";
            this.operation = "add";
            this.businessKey = "";

            if(record!=null){
                this.selectedRecord = record;
            }
            else{
                this.selectedRecord = {};
            }

            this.showModal = true;
        },
        loadTree() {
            companyInfoApi.list().then(resp => {
                var jsonData = resp.data;

                if (jsonData.result) {
                this.treeData = jsonData.data;
                } else {
                this.$message.error(jsonData.message + "");
                }
            });
        },
        onDetailModalClose(retObj) {
            //保存成功后回调
            this.showModal = false;

            if(retObj){
                this.changePage(this.pageIndex);
            }         
        },
        onDetailModalClose2(retObj) {
            //保存成功后回调
            this.showModal2 = false;

            this.changePage(this.pageIndex);

            
        },
        onDetailModalClose3(retObj) {
            //保存成功后回调
            this.showModal3 = false;

            if (retObj.result) {
                var retData = retObj.data;

                this.changePage(this.pageIndex);

            }

            
        },
        handleReset(name) {
            this.$refs[name].resetFields();
        },
        handChange(selVal){

            this.queryModel.payService = "";

            var formData = new FormData();
            formData.append("companyId", selVal);

            billPushApi.payServiceList(formData).then((response)=>{
                var jsonData = response.data;
                this.payServiceList = jsonData.data;
            });
        },
        handleDetailList(record){
            this.modalTitle2 = "账单推送详情";
            this.operation = "detail";
            this.businessKey = record.id;
            this.selectedRecord = record;
            this.showModal2 = true;
        },
        handlePush(record){
            var id = record.id;
            
            var formData = new FormData();
            formData.append("id", id);

            billPushApi.pushBill(formData).then((response)=>{
                var jsonData = response.data;

                if (jsonData.result) {
                    this.changePage(this.pageIndex);
                    this.$message.success("账单消息推送成功！");
                } else {
                    this.$message.error(jsonData.message + "");
                }

            });
        },
        handleDelete(record) {
            var self = this;

            self.$confirm("是否确认删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
                })
                .then(() => {
                billPushApi.remove(record.id).then(function(response) {
                    var jsonData = response.data;

                    if (jsonData.result) {
                    var rs = self.loopDelete(self.tableData,record.id);

                    self.$message({
                        type: "success",
                        message: "删除成功!"
                    });
                    }
                });
            });
        },
        handleClose(record) {
            var self = this;

            self.$confirm("是否确认关闭?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
                })
                .then(() => {
                billPushApi.closeBill(record.id).then(function(response) {
                    var jsonData = response.data;

                    if (jsonData.result) {
                        self.changePage(self.pageIndex);
                        this.$message.success("关闭成功！");
                    } else {
                        this.$message.error(jsonData.message + "");
                    }

                });
            });
        },
        loopDelete(list,id){
            var rs = false;

            for(var i=0;i<list.length;i++){
                if(list[i].id == id){
                list.splice(i,1);
                rs = true;
                break;
                }

                if(list[i].children!=null){
                rs = this.loopDelete(list[i].children,id);

                if(rs){
                    break;
                }
                }
            }

            return rs;
        }, 
        handlePayTime(record){
            var self = this;

            this.modalTitle3 = "账单推送详情";
            this.operation = "detail";
            this.businessKey = record.id;
            this.showModal3 = true;
        }
    },
    mounted: function() {
        this.changePage(1);
    },
    components: {
        "billPush-detail": billPushDetail,
        "billPush-detail-list":billPushDetailList,
        "billPush-order-payTime":billPushOrderPayTime,
        "el-select-tree": SelectTree
    }
}
</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>