收费项目管理页面

src/api/base/payService.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+import constant from '@/constant'
+
+function payServicePageList(formData) {
+  return request.post(constant.serverUrl + "/base/goodsInfo/payServicePageList", formData);
+}
+
+function goodsTypeList() {
+  return request.post(constant.serverUrl + "/base/goodsInfo/goodsTypeList");
+}
+
+function addPayService(formModel){
+  return request.post(constant.serverUrl + "/base/goodsInfo/addPayService", formModel,{
+    headers: {
+      "Content-Type": "application/json"
+    }
+  });
+}
+
+function editPayService(id){
+  return request.get(constant.serverUrl + "/base/goodsInfo/editPayService/" + id);
+}
+
+
+function update(formModel){  
+  return request.post(constant.serverUrl + "/base/goodsInfo/update", formModel,{
+    headers: {
+      "Content-Type": "application/json"
+    }
+  });
+}
+
+function create(){
+  return request.get(constant.serverUrl + "/base/goodsInfo/create");
+}
+
+function remove(id){
+  return request.post(constant.serverUrl + "/base/goodsInfo/delete/" + id);
+}
+
+
+export default {
+    payServicePageList,goodsTypeList,addPayService,update,editPayService,create,remove
+  }

src/api/business/billPush.js

@@ -5,8 +5,56 @@ function pageList(formData){
   return request.post(constant.serverUrl + "/business/billPush/pageList", formData);
 }
 
+function payServiceList(formData){
+  return request.post(constant.serverUrl + "/business/billPush/payServiceList", formData);
+}
+
+function create(){
+  return request.get(constant.serverUrl + "/business/billPush/create");
+}
+
+function createPerson(){
+  return request.get(constant.serverUrl + "/business/billPush/createPerson");
+}
+
+function edit(id){
+  return request.get(constant.serverUrl + "/business/billPush/edit/" + id);
+}
+
+function detail(id){
+  return request.get(constant.serverUrl + "/business/billPush/detail/" + id);
+}
+
+function add(formModel){
+  return request.post(constant.serverUrl + "/business/billPush/add", formModel,{
+    headers: {
+      "Content-Type": "application/json"
+    }
+  });
+}
+
+function update(formModel){  
+  return request.post(constant.serverUrl + "/business/billPush/update", formModel,{
+    headers: {
+      "Content-Type": "application/json"
+    }
+  });
+}
+
+function remove(id){
+  return request.post(constant.serverUrl + "/business/billPush/delete/" + id);
+}
+
+function batchRemove(idList){
+  return request.post(constant.serverUrl + "/business/billPush/batchDelete",idList,{
+    headers: {
+      "Content-Type": "application/json"
+    }
+  });
+}
+
 
 
 export default {
-    pageList
+    pageList,create,edit,add,update,remove,batchRemove,payServiceList,createPerson,detail
   }

src/api/business/billPushPerson.js

@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+import constant from '@/constant'
+
+function pageList(formData){
+  return request.post(constant.serverUrl + "/business/billPushPerson/pageList", formData);
+}
+
+
+export default {
+    pageList
+}

src/routers/modules/base.js

@@ -521,6 +521,15 @@ var routers = [
                         roles: ["admin"],
                         title: '审批角色管理'
                 }
+        },
+        {
+                path: '/base/payService/list',
+                name: 'basePayServiceList',
+                component: () => import('@/views/base/payService-list.vue'),
+                meta: {
+                        roles: ["admin"],
+                        title: '收费项目管理'
+                }
         }
 ]
 

src/views/base/payService-detail.vue

@@ -0,0 +1,161 @@
+<template>
+        <el-dialog
+            width="30%"
+            :visible.sync="showDialog"
+            :title="title"
+            :modal-append-to-body="true"
+            :append-to-body="true"
+            style="text-align:left;"
+            @close="closeDialog"
+            :close-on-click-modal="false"
+            >
+            <div class="user-panel" v-loading="loading">
+            <el-form ref="form" :model="formModel" :rules="ruleValidate" :label-width="'80px'">
+                <el-form-item label="项目类型" prop="type" >
+                    <el-select v-model="formModel.type" style="width:300px">
+                        <el-option
+                        v-for="useType in typeList"
+                        :key="useType.id"
+                        :label="useType.goodsName"
+                        :value="useType.id"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="收费项目" prop="name">
+                    <el-input v-model="formModel.name" placeholder="请输入名称" style="width:300px"></el-input>
+                </el-form-item>
+                <el-form-item label="收费说明" prop="desc">
+                    <el-input v-model="formModel.desc" placeholder="请输入名称" style="width:300px"></el-input>
+                </el-form-item>
+                <el-form-item label="单价" prop="unitPrice">
+                    <el-input v-model="formModel.unitPrice" placeholder="请输入单价" style="width:300px"></el-input>
+                </el-form-item>
+                <el-form-item label="单位" prop="unit">
+                    <el-input v-model="formModel.unit" placeholder="请输入单位" style="width:300px"></el-input>
+                </el-form-item>
+                <el-form-item label="是否激活" prop="isActivation">
+                    <el-switch
+                        v-model="formModel.isActivation"
+                        active-color="#13ce66"
+                        inactive-color="#ff4949">
+                    </el-switch>
+                </el-form-item>
+
+            </el-form>
+            </div>
+            <span slot="footer" class="dialog-footer">
+            <el-button @click="closeDialog">取 消</el-button>
+            <el-button type="primary" @click="handleSubmit" :loading="submitting">确 定</el-button>
+            </span>
+        </el-dialog>
+</template>
+<script>
+import Constant from "@/constant";
+import payServiceApi from "@/api/base/payService";
+export default {
+    props: ["businessKey", "title"],
+    data(){
+        return{
+            ruleValidate: {
+                type: [{ required: true, message: "类型不能为空", trigger: "blur" }],
+                name: [{ required: true, message: "收费项目不能为空", trigger: "blur" }],
+                desc: [{ required: true, message: "收费说明不能为空", trigger: "blur" }],
+                unitPrice: [{ required: true, message: "单价不能为空", trigger: "blur" }],
+                unit: [{ required: true, message: "单位不能为空", trigger: "blur" }],
+            },
+            formModel:{
+                type:"",
+                name:"",
+                isActivation:true,
+            },
+            typeList:[],
+            showDialog: true,
+            loading: false,
+            submitting: false,
+        }
+    },
+    created() {
+        var self = this;
+
+        payServiceApi.goodsTypeList().then(response => {
+            var jsonData = response.data;
+            this.typeList = jsonData.data;
+        });
+    },
+    methods: {
+        closeDialog() {
+            this.$emit("close", false);
+        },
+        handleSubmit() {
+            var self = this;
+            this.$refs["form"].validate(valid => {
+                if (valid) {
+                (function() {
+                    var id = self.formModel.id;
+
+                    if (id == null || id.length == 0) {
+                    return payServiceApi.addPayService(self.formModel);
+                    } else {
+                    return payServiceApi.update(self.formModel);
+                    }
+                })().then(function(response) {
+                    var jsonData = response.data;
+
+                    if (jsonData.result) {
+                    self.$message({
+                        message: "保存成功!",
+                        type: "success"
+                    });
+
+                    self.$emit("close", {
+                        result : true,
+                        data : jsonData.data
+                    });
+                    } else {
+                    self.$message({
+                        message: jsonData.message + "",
+                        type: "warning"
+                    });
+
+                    self.$emit("close", {
+                        result : false
+                    });
+                    }
+                });
+                }
+            });
+        },
+    },
+    async mounted() {
+        var self = this;
+        self.loading = true;
+
+        (function() {
+        if (self.businessKey.length == 0) {
+            return payServiceApi.create(self.parentId);
+        } else {
+            return payServiceApi.editPayService(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;
+}
+</style>

src/views/base/payService-list.vue

@@ -0,0 +1,234 @@
+<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-row class="button-group">
+        <el-button
+            type="primary"
+            size="small"
+            plain
+            icon="el-icon-circle-plus"
+            @click="handleAdd(null)"
+        >新增</el-button>
+        </el-row>
+        <el-table
+            ref="formTable"
+            :data="tableData"
+            v-loading="loading"
+            element-loading-text="拼命加载中"
+            stripe
+        >
+            <el-table-column type="index" label="序号" width="60">
+                <template slot-scope='scope'>
+                    {{(pageIndex - 1)*pageSize + scope.$index + 1}}
+                </template>
+            </el-table-column>
+            <el-table-column prop="typeN" label="收费项目类型" ></el-table-column>
+            <el-table-column prop="pic" label="" >
+                <template slot-scope="{row}">
+                    <el-image v-if="row.pic"
+                        style="width: 100px; height: 100px"
+                        :src="row.pic"></el-image>
+                </template>
+            </el-table-column>
+            <el-table-column prop="name" label="收费项目" ></el-table-column>
+            <el-table-column prop="desc" label="收费项目说明" ></el-table-column>
+            <el-table-column prop="unitPrice" label="单价" ></el-table-column>
+            <el-table-column prop="unit" label="单位" ></el-table-column>
+            <el-table-column prop="isActivation" label="激活开关" >
+                <template slot-scope="{row}">
+                    <el-switch
+                        v-model="row.isActivation"
+                        active-color="#13ce66"
+                        inactive-color="#ff4949">
+                    </el-switch>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作">
+                <template slot-scope="{row}">
+                <el-button size="mini" type="warning" @click="handleEdit(row)">编辑</el-button>
+                <el-button size="mini" type="danger" @click="handleDelete(row)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div style="text-align:center;">
+            <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>
+        <payService-detail
+            v-if="showModal"
+            :businessKey="businessKey"
+            :parentId="selectedRecord.id"
+            :title="modalTitle"
+            @close="onDetailModalClose"
+        ></payService-detail>
+    </div>
+</template>
+<script>
+import Constant from "@/constant";
+import payServiceApi from "@/api/base/payService";
+import payServiceDetail from "./payService-detail";
+export default {
+    name: 'basePayServiceList',
+    data(){
+        return{
+            loading: false,
+            showModal: false,
+            tableData: [],
+            multipleSelection: [],
+            pageIndex: 1,
+            pageSize: 10,
+            totalElements: 0,
+            tableHeight: 400,
+            pageSizeList: [10,30,50,100],
+        }
+    },
+    methods:{
+        changePage(pageIndex) {
+            this.loading = true;
+            var formData = new FormData();
+
+            formData.append("pageIndex", this.pageIndex);
+            formData.append("pageSize", this.pageSize);
+
+
+            payServiceApi.payServicePageList(formData).then(response => {
+                this.loading = false;
+                var jsonData = response.data;
+
+                console.log(jsonData);
+
+                this.tableData = jsonData.data.data;
+                this.totalElements = jsonData.data.recordsTotal;
+
+                this.pageIndex = pageIndex;
+            });
+        },
+        pageSizeChange(pageSize) {
+            this.pageSize = pageSize;
+            
+            this.$nextTick(()=>{
+                this.changePage(1);
+            });
+        },
+        handleReset(name) {
+            this.$refs[name].resetFields();
+        },
+        onDetailModalClose(retObj) {
+            //保存成功后回调
+            this.showModal = false;
+
+            if (retObj.result) {
+                var retData = retObj.data;
+
+                this.changePage(this.pageIndex);
+
+            }
+        },
+        handleAdd(record) {
+            this.modalTitle = "新增";
+            this.operation = "add";
+            this.businessKey = "";
+
+            if(record!=null){
+                this.selectedRecord = record;
+            }
+            else{
+                this.selectedRecord = {};
+            }
+
+            this.showModal = true;
+        },
+        handleEdit(record) {
+            this.modalTitle = "编辑";
+            this.operation = "edit";
+            this.businessKey = record.id;
+            this.selectedRecord = record;
+            this.showModal = true;
+        },
+        handleDelete(record) {
+            var self = this;
+
+            self.$confirm("是否确认删除?", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning"
+                })
+                .then(() => {
+                payServiceApi.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: "删除成功!"
+                    });
+                    }
+                });
+            });
+        },
+        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;
+        },   
+        
+    },
+    mounted() {
+        this.changePage(1);
+    },
+    components: {
+        "payService-detail": payServiceDetail
+    }
+    
+}
+</script>
+<style scoped>
+.el-divider {
+  margin: 5px 0;
+}
+
+.el-breadcrumb {
+  margin: 10px;
+  line-height: 20px;
+}
+.order-list{
+    text-align: left;
+}
+.button-group {
+  padding: 10px;
+  text-align: left;
+}
+</style>

src/views/business/billPush-detail-list.vue

@@ -0,0 +1,349 @@
+<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>

src/views/business/billPush-detail.vue

@@ -0,0 +1,294 @@
+<template>
+  <el-dialog
+    :visible.sync="showDialog"
+    :title="title"
+    width="90%"
+    :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" :rules="ruleValidate" :inline="true" class="demo-form-inline"  label-width="120px">
+        <el-form-item label="账单名称：" prop="name">
+          <el-input v-model="formModel.name" placeholder="请输入账单名称" class="input-form-main"></el-input>
+        </el-form-item>
+        <el-form-item label="收款方：" prop="payee">
+          <el-input v-model="formModel.payee" placeholder="请输入收款方" class="input-form-main"></el-input>
+        </el-form-item>
+        <el-form-item label="选择公司：" prop="companyId">
+          <el-select v-model="formModel.companyId" filterable class="input-form-main" @change="handChange">
+            <el-option
+                v-for="company in companyList"
+                :key="company.id"
+                :label="company.name"
+                :value="company.id"
+              ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="收款账户：" prop="collectionAccount">
+            <template>
+                <el-radio-group v-model="formModel.collectionAccount">
+                    <el-radio  label="1">物业账户</el-radio>
+                    <el-radio  label="2">企业账户</el-radio>
+                </el-radio-group>
+            </template>
+        </el-form-item>
+        <el-form-item label="收费项目：" prop="payService">
+          <el-select v-model="formModel.payService" class="input-form-main">
+            <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 label="备注：" prop="bak">
+          <el-input type="textarea" v-model="formModel.bak" placeholder="请输入备注"  class="input-form-main"></el-input>
+        </el-form-item>
+
+        <h3>人员账单信息</h3>
+        <el-row class="button-group">
+            <el-button
+                type="primary"
+                size="small"
+                plain
+                icon="el-icon-circle-plus"
+                >导入账单</el-button
+            >
+        </el-row>
+        <el-table :data="formModel.billPushPersonList" border>
+            <el-table-column type="index" label="序号" width="50"></el-table-column>
+            <el-table-column prop="name" label="姓名">
+                <template slot-scope="scope">
+                    <el-form-item
+                    :prop="'billPushPersonList.' + scope.$index + '.name'"
+                    :rules="ruleValidate['name']"
+                    >
+                        <el-input placeholder="姓名" style="width:200px" v-model="scope.row.name"></el-input>
+                    </el-form-item>
+                </template>
+            </el-table-column>
+            <el-table-column prop="phone" label="电话">
+                <template slot-scope="scope">
+                    <el-form-item
+                    :prop="'billPushPersonList.' + scope.$index + '.phone'"
+                    :rules="ruleValidate['phone']"
+                    >
+                        <el-input placeholder="电话" style="width:200px" v-model="scope.row.phone"></el-input>
+                    </el-form-item>
+                </template>
+            </el-table-column>
+            <el-table-column prop="unit" label="所属单位">
+                <template slot-scope="scope">
+                    <el-form-item
+                    :prop="'billPushPersonList.' + scope.$index + '.unit'"
+                    :rules="ruleValidate['unit']"
+                    >
+                    <el-input placeholder="所属单位" style="width:200px" v-model="scope.row.unit"></el-input>
+                    </el-form-item>
+                </template>
+            </el-table-column>
+            <el-table-column prop="payFee" label="收费金额">
+                <template slot-scope="scope">
+                    <el-form-item
+                    :prop="'billPushPersonList.' + scope.$index + '.payFee'"
+                    :rules="ruleValidate['payFee']"
+                    >
+                    <el-input placeholder="收费金额" style="width:200px" v-model="scope.row.payFee"></el-input>
+                    </el-form-item>
+                </template>
+            </el-table-column>
+
+            <el-table-column label="操作" width="200">
+              <template slot-scope="{row}">
+                <el-form-item>
+                  <i class="el-icon-delete my-font" @click="handleDelete(row)"></i>
+                  <i class="el-icon-document-add my-font" @click="handleInsert(row)"></i>
+                </el-form-item>
+              </template>
+            </el-table-column>
+
+            <div slot="empty">
+              <el-button icon="el-icon-circle-plus-outline" :plain="true" @click="handleAdd()">新增</el-button>
+            </div>
+        </el-table>
+      </el-form>
+     <div class="el-table__empty-block" v-if="formModel.billPushPersonList.length!=0">
+          <el-button icon="el-icon-circle-plus-outline" @click="handleAdd()">新增</el-button>
+     </div>
+    </div>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="closeDialog">取 消</el-button>
+      <el-button type="primary" @click="handleSubmit" :loading="submitting">保存</el-button>
+    </span>
+    
+  </el-dialog>
+</template>
+<script>
+import Constant from "@/constant";
+import billPushApi from "@/api/business/billPush";
+import companyInfoApi from "@/api/base/companyInfo";
+export default {
+    props: ["businessKey", "title"],
+    data() {
+        return {
+            ruleValidate: {
+                name: [{ required: true, message: "账单名称不能为空", trigger: "blur" }],
+                payee: [{ required: true, message: "收款方不能为空", trigger: "blur" }],
+                companyId: [{ required: true, message: "公司不能为空", trigger: "blur" }],
+                collectionAccount: [{ required: true, message: "请选择收款账户", trigger: "blur" }],
+                payService: [{ required: true, message: "收费项目不能为空", trigger: "blur" }]
+            },
+            formModel: {
+                name:"",
+                payee:"",
+                companyId:"",
+                payService:"",
+                collectionAccount:"",
+                bak:"",
+                billPushPersonList:[],
+                removeBillPushPersonList:[],
+            },
+            payServiceList:[],
+            tableData:[],
+            companyList:[],
+            showDialog: true,
+            loading: false,
+            submitting: false,
+        }
+    },
+    created() {
+        companyInfoApi.list().then((response)=>{
+            var jsonData = response.data;
+            this.companyList = jsonData.data;
+        });
+    },
+    methods: {
+        closeDialog() {
+        this.$emit("close", false);
+        },
+        handChange(selVal){
+
+            this.formModel.payService = "";
+
+            var formData = new FormData();
+            formData.append("companyId", selVal);
+
+            billPushApi.payServiceList(formData).then((response)=>{
+                var jsonData = response.data;
+                this.payServiceList = jsonData.data;
+            });
+        },
+        handleSubmit() {
+            var self = this;
+
+            var billPushPersonList = this.formModel.billPushPersonList;
+
+            for(var i=0;i<billPushPersonList.length;i++){
+                billPushPersonList[i].sortNo = i+1;
+            }
+
+            this.$refs["form"].validate(valid => {
+                if (valid) {
+                (function() {
+                    var id = self.formModel.id;
+
+                    if (id == null || id.length == 0) {
+                    return billPushApi.add(self.formModel);
+                    } else {
+                    return billPushApi.update(self.formModel);
+                    }
+                })().then(function(response) {
+                    var jsonData = response.data;
+
+                    if (jsonData.result) {
+                    self.$message({
+                        message: "保存成功!",
+                        type: "success"
+                    });
+
+                    self.$emit("close", true);
+                    } else {
+                    self.$message({
+                        message: jsonData.message + "",
+                        type: "warning"
+                    });
+                    self.$emit("close", false);
+                    }
+                });
+                }
+            });
+        },
+        handleAdd() {
+            this.formModel.billPushPersonList.push({
+                sortNo: this.formModel.billPushPersonList.length + 1,
+                name: "",
+                routeId: this.businessKey,
+                payFee: "",
+                totalFee: "",
+            });
+        },
+        handleInsert(row) {
+            var billPushPersonList = this.formModel.billPushPersonList;
+            var index = billPushPersonList.indexOf(row);
+
+            if(index>=0){
+                billPushPersonList.splice(index+1,0,{
+                    sortNo: index + 2,
+                    name: "",
+                    routeId: this.businessKey,
+                    payFee: "",
+                    totalFee: "",
+                });
+            }
+        },
+        handleDelete(row) {
+            var billPushPersonList = this.formModel.billPushPersonList;
+
+            billPushPersonList.splice(billPushPersonList.indexOf(row), 1);
+
+            this.formModel.removeBillPushPersonList.push(row);
+        },
+    },
+    mounted: function() {
+        var self = this;
+
+        (function() {
+        if (self.businessKey.length == 0) {
+            return billPushApi.createPerson();
+        } else {
+            return billPushApi.edit(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>
+.input-form-main{
+    width: 500px;
+}
+.link-span{
+    margin-right: 20px;
+}
+.my-font {
+  font-size: 20px;
+  cursor: pointer;
+  margin-right: 10px;
+}
+</style>

src/views/business/billPush-list.vue

@@ -11,9 +11,42 @@
             </el-breadcrumb>
         <el-divider></el-divider>
         <el-form ref="queryForm" :model="queryModel" inline class="demo-form-inline">
+            <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="name">
                 <el-input type="text" size="mini" v-model="queryModel.name"></el-input>
             </el-form-item>
+            <el-form-item label="选择公司：" prop="companyId">
+                <el-select v-model="queryModel.companyId"  size="mini" filterable focus="" @change="handChange">
+                    <el-option
+                        v-for="company in companyList"
+                        :key="company.id"
+                        :label="company.name"
+                        :value="company.id"
+                    ></el-option>
+                </el-select>
+            </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"
@@ -42,11 +75,16 @@
             >
         </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 type="index" label="序号" width="50"></el-table-column>
             <el-table-column prop="name" label="账单名称" width="120"></el-table-column>
+            <el-table-column prop="collectionAccount" label="收款账户" width="120">
+                <template slot-scope="{row}">
+                    <span v-if="row.collectionAccount=='1'">物业账户</span>
+                    <span v-if="row.collectionAccount=='2'">企业账户</span>
+                </template>
+            </el-table-column>
+            <el-table-column prop="payServiceN" 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}">
@@ -68,11 +106,11 @@
                 <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>
+                        <el-link  type="primary" @click="handleDetailList(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>
+                        <span class="link-span"><el-link  type="primary" @click="handlePush(row)">推送账单</el-link></span>
+                        <el-link  type="warning" @click="handleClose(row)">关闭账单</el-link>
                     </div>
                     <el-link  type="danger" @click="handleDelete(row)">删除账单</el-link>
                 </template>
@@ -86,11 +124,28 @@
         @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>
     </div>
 </template>
 <script>
 import Constant from "@/constant";
 import billPushApi from "@/api/business/billPush";
+import companyInfoApi from "@/api/base/companyInfo";
+import billPushDetail from "./billPush-detail";
+import billPushDetailList from "./billPush-detail-list";
 export default {
     name: "businessBillPushList",
     data() {
@@ -98,12 +153,16 @@ export default {
 
         return {
             queryModel: {
-                personName: "",
+                name: "",
                 status: "",
-                requestTimeRange: ['',''],
+                pushTimeRange: ['',''],
+                companyId:"",
+                payService:"",
             },
             loading: false,
             tableData: [],
+            payServiceList:[],
+            companyList:[],
             pageIndex: 1,
             pageSize: 10,
             totalPages: 0,
@@ -111,8 +170,15 @@ export default {
             pageSizeList: [10, 20, 30],
             multipleSelection: [],
             showModal: false,
+            showModal2: false,
         }
     },
+    created() {
+        companyInfoApi.list().then((response)=>{
+            var jsonData = response.data;
+            this.companyList = jsonData.data;
+        });
+    },
     methods: {
         changePage(pageIndex) {
             var self = this;
@@ -125,6 +191,11 @@ export default {
             formData.append("pageIndex", self.pageIndex);
             formData.append("pageSize", self.pageSize);
 
+            formData.append("name", self.queryModel.name);
+            formData.append("pushTimeRange", self.queryModel.pushTimeRange);
+            formData.append("payService", self.queryModel.payService);
+
+
 
             billPushApi.pageList(formData)
                 .then(function(response) {
@@ -144,9 +215,71 @@ export default {
         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;
+        },
+        onDetailModalClose(retObj) {
+            //保存成功后回调
+            this.showModal = false;
+
+            if (retObj.result) {
+                var retData = retObj.data;
+
+                this.changePage(this.pageIndex);
+
+            }
+        },
+        onDetailModalClose2(retObj) {
+            //保存成功后回调
+            this.showModal2 = 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;
+        },
     },
     mounted: function() {
         this.changePage(1);
+    },
+    components: {
+        "billPush-detail": billPushDetail,
+        "billPush-detail-list":billPushDetailList
     }
 }
 </script>