提交

CODE/smart-community/property-api/src/main/java/com/community/huiju/controller/BillController.java

@@ -0,0 +1,20 @@
+package com.community.huiju.controller;
+
+
+import com.community.huiju.common.base.BaseController;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+/**
+ * <p>
+ * 缴费项表 前端控制器
+ * </p>
+ *
+ * @author weiximei
+ * @since 2019-02-13
+ */
+@RestController
+@RequestMapping("/tp/bill")
+public class BillController extends BaseController {
+
+}

CODE/smart-community/property-api/src/main/java/com/community/huiju/controller/BillInvoiceController.java

@@ -0,0 +1,20 @@
+package com.community.huiju.controller;
+
+
+import com.community.huiju.common.base.BaseController;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+/**
+ * <p>
+ * 缴费单 前端控制器
+ * </p>
+ *
+ * @author weiximei
+ * @since 2019-02-13
+ */
+@RestController
+@RequestMapping("/tp/bill-invoice")
+public class BillInvoiceController extends BaseController {
+
+}

CODE/smart-community/property-api/src/main/java/com/community/huiju/controller/BillStatementController.java

@@ -0,0 +1,20 @@
+package com.community.huiju.controller;
+
+
+import com.community.huiju.common.base.BaseController;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+/**
+ * <p>
+ * 账单流水表 前端控制器
+ * </p>
+ *
+ * @author weiximei
+ * @since 2019-02-13
+ */
+@RestController
+@RequestMapping("/tp/bill-statement")
+public class BillStatementController extends BaseController {
+
+}

CODE/smart-community/property-api/src/main/java/com/community/huiju/dao/BillInvoiceMapper.java

@@ -0,0 +1,25 @@
+package com.community.huiju.dao;
+
+import com.baomidou.mybatisplus.core.mapper.BaseMapper;
+import com.baomidou.mybatisplus.core.metadata.IPage;
+import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
+import com.community.huiju.model.BillInvoice;
+import org.apache.ibatis.annotations.Mapper;
+import org.apache.ibatis.annotations.Param;
+
+import java.util.Map;
+
+/**
+ * <p>
+ * 缴费单 Mapper 接口
+ * </p>
+ *
+ * @author weiximei
+ * @since 2019-02-13
+ */
+@Mapper
+public interface BillInvoiceMapper extends BaseMapper<BillInvoice> {
+
+    IPage<BillInvoice> selectBillInvoice(Page page, @Param("map") Map<String, Object> map);
+
+}

CODE/smart-community/property-api/src/main/java/com/community/huiju/dao/BillMapper.java

@@ -0,0 +1,18 @@
+package com.community.huiju.dao;
+
+import com.baomidou.mybatisplus.core.mapper.BaseMapper;
+import com.community.huiju.model.Bill;
+import org.apache.ibatis.annotations.Mapper;
+
+/**
+ * <p>
+ * 缴费项表 Mapper 接口
+ * </p>
+ *
+ * @author weiximei
+ * @since 2019-02-13
+ */
+@Mapper
+public interface BillMapper extends BaseMapper<Bill> {
+
+}

CODE/smart-community/property-api/src/main/java/com/community/huiju/dao/BillStatementMapper.java

@@ -0,0 +1,18 @@
+package com.community.huiju.dao;
+
+import com.baomidou.mybatisplus.core.mapper.BaseMapper;
+import com.community.huiju.model.BillStatement;
+import org.apache.ibatis.annotations.Mapper;
+
+/**
+ * <p>
+ * 账单流水表 Mapper 接口
+ * </p>
+ *
+ * @author weiximei
+ * @since 2019-02-13
+ */
+@Mapper
+public interface BillStatementMapper extends BaseMapper<BillStatement> {
+
+}

CODE/smart-community/property-api/src/main/java/com/community/huiju/model/Bill.java

@@ -0,0 +1,90 @@
+package com.community.huiju.model;
+
+import com.baomidou.mybatisplus.annotation.TableName;
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+import lombok.experimental.Accessors;
+
+import java.io.Serializable;
+import java.time.LocalDateTime;
+
+/**
+ * <p>
+ * 缴费项表
+ * </p>
+ *
+ * @author weiximei
+ * @since 2019-02-13
+ */
+@Data
+@EqualsAndHashCode(callSuper = false)
+@Accessors(chain = true)
+@TableName("tp_bill")
+public class Bill implements Serializable {
+
+    private static final long serialVersionUID = 1L;
+
+    /**
+     * 小区id
+     */
+    private Integer communityId;
+
+    /**
+     * 收费项名称
+     */
+    private String billName;
+
+    /**
+     * 缴费项说明
+     */
+    private String billExplain;
+
+    private String payPrice;
+
+    /**
+     * 应缴户数
+     */
+    private Integer payTotalNum;
+
+    /**
+     * 已缴户数
+     */
+    private Integer payedNum;
+
+    /**
+     * 未缴户数
+     */
+    private Integer unpayedNum;
+
+    /**
+     * 项目状态 0：正在收费  1：收费完成  2： 草稿 3：正在收费
+     */
+    private String billStatus;
+
+    /**
+     * 截止时间
+     */
+    private LocalDateTime endDate;
+
+    /**
+     * 创建人
+     */
+    private Integer createUser;
+
+    /**
+     * 创建时间
+     */
+    private LocalDateTime createDate;
+
+    /**
+     * 更新人
+     */
+    private Integer updateUser;
+
+    /**
+     * 更新时间
+     */
+    private LocalDateTime updateDate;
+
+
+}

CODE/smart-community/property-api/src/main/java/com/community/huiju/model/BillInvoice.java

@@ -0,0 +1,98 @@
+package com.community.huiju.model;
+
+import com.baomidou.mybatisplus.annotation.TableName;
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+import lombok.experimental.Accessors;
+
+import java.io.Serializable;
+import java.time.LocalDateTime;
+
+/**
+ * <p>
+ * 缴费单
+ * </p>
+ *
+ * @author weiximei
+ * @since 2019-02-13
+ */
+@Data
+@EqualsAndHashCode(callSuper = false)
+@Accessors(chain = true)
+@TableName("tp_bill_invoice")
+public class BillInvoice implements Serializable {
+
+    private static final long serialVersionUID = 1L;
+
+    /**
+     * 小区id
+     */
+    private Integer communityId;
+
+    /**
+     * 收费项id
+     */
+    private Integer billId;
+
+    /**
+     * 楼栋业主资料信息id
+     */
+    private Integer buildingOwnerInfoId;
+
+    /**
+     * app用户id
+     */
+    private Integer taUserId;
+
+    /**
+     * 收费说明
+     */
+    private String billInvoiceExplain;
+
+    /**
+     * 收费金额
+     */
+    private Integer payPrice;
+
+    /**
+     * 账单流水id
+     */
+    private Integer billStatementId;
+
+    /**
+     * 缴费状态  0：未缴费  1：已线上缴费 2：已线下缴费
+     */
+    private String billStatus;
+
+    /**
+     * 缴费人
+     */
+    private String payName;
+
+    /**
+     * 缴费时间
+     */
+    private LocalDateTime payDate;
+
+    /**
+     * 创建人
+     */
+    private Integer createUser;
+
+    /**
+     * 创建时间
+     */
+    private LocalDateTime createDate;
+
+    /**
+     * 更新人
+     */
+    private Integer updateUser;
+
+    /**
+     * 更新时间
+     */
+    private LocalDateTime updateDate;
+
+
+}

CODE/smart-community/property-api/src/main/java/com/community/huiju/model/BillStatement.java

@@ -0,0 +1,68 @@
+package com.community.huiju.model;
+
+import com.baomidou.mybatisplus.annotation.TableName;
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+import lombok.experimental.Accessors;
+
+import java.io.Serializable;
+import java.time.LocalDateTime;
+
+/**
+ * <p>
+ * 账单流水表
+ * </p>
+ *
+ * @author weiximei
+ * @since 2019-02-13
+ */
+@Data
+@EqualsAndHashCode(callSuper = false)
+@Accessors(chain = true)
+@TableName("tp_bill_statement")
+public class BillStatement implements Serializable {
+
+    private static final long serialVersionUID = 1L;
+
+    /**
+     * 小区id
+     */
+    private Integer communityId;
+
+    /**
+     * 缴费单id
+     */
+    private Integer billInvoiceId;
+
+    /**
+     * app 用户id
+     */
+    private Integer taUserId;
+
+    /**
+     * 收费金额
+     */
+    private Integer payPrice;
+
+    /**
+     * 缴费人
+     */
+    private String payName;
+
+    /**
+     * 缴费备注
+     */
+    private String payRemark;
+
+    /**
+     * 缴费方式  0：微信支付  1：线下缴费
+     */
+    private String payType;
+
+    /**
+     * 生成流水时间
+     */
+    private LocalDateTime createTime;
+
+
+}

CODE/smart-community/property-api/src/main/java/com/community/huiju/service/IBillInvoiceService.java

@@ -0,0 +1,26 @@
+package com.community.huiju.service;
+
+import com.baomidou.mybatisplus.extension.service.IService;
+import com.community.commom.mode.ResponseBean;
+import com.community.huiju.model.BillInvoice;
+
+/**
+ * <p>
+ * 缴费单 服务类
+ * </p>
+ *
+ * @author weiximei
+ * @since 2019-02-13
+ */
+public interface IBillInvoiceService extends IService<BillInvoice> {
+
+
+    /**
+     * 根据条件查询 缴费项目
+     * @param parameter
+     * @return
+     */
+    ResponseBean getBillList(String parameter);
+
+
+}

CODE/smart-community/property-api/src/main/java/com/community/huiju/service/IBillService.java

@@ -0,0 +1,18 @@
+package com.community.huiju.service;
+
+import com.baomidou.mybatisplus.extension.service.IService;
+import com.community.commom.mode.ResponseBean;
+import com.community.huiju.model.Bill;
+
+/**
+ * <p>
+ * 缴费项表 服务类
+ * </p>
+ *
+ * @author weiximei
+ * @since 2019-02-13
+ */
+public interface IBillService extends IService<Bill> {
+
+
+}

CODE/smart-community/property-api/src/main/java/com/community/huiju/service/IBillStatementService.java

@@ -0,0 +1,16 @@
+package com.community.huiju.service;
+
+import com.baomidou.mybatisplus.extension.service.IService;
+import com.community.huiju.model.BillStatement;
+
+/**
+ * <p>
+ * 账单流水表 服务类
+ * </p>
+ *
+ * @author weiximei
+ * @since 2019-02-13
+ */
+public interface IBillStatementService extends IService<BillStatement> {
+
+}

CODE/smart-community/property-api/src/main/java/com/community/huiju/service/impl/BillInvoiceServiceImpl.java

@@ -0,0 +1,92 @@
+package com.community.huiju.service.impl;
+
+import com.alibaba.fastjson.JSONObject;
+import com.baomidou.mybatisplus.core.metadata.IPage;
+import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
+import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
+import com.community.commom.mode.ResponseBean;
+import com.community.huiju.dao.BillMapper;
+import com.community.huiju.dao.BillStatementMapper;
+import com.community.huiju.model.BillInvoice;
+import com.community.huiju.dao.BillInvoiceMapper;
+import com.community.huiju.service.IBillInvoiceService;
+import com.google.common.collect.Maps;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+import java.util.Map;
+
+/**
+ * <p>
+ * 缴费单 服务实现类
+ * </p>
+ *
+ * @author weiximei
+ * @since 2019-02-13
+ */
+@Service
+public class BillInvoiceServiceImpl extends ServiceImpl<BillInvoiceMapper, BillInvoice> implements IBillInvoiceService {
+
+    /** 缴费项表 **/
+    @Autowired
+    private BillMapper billMapper;
+
+    /** 缴费单 **/
+    @Autowired
+    private BillInvoiceMapper billInvoiceMapper;
+
+    /** 账单流水表 **/
+    @Autowired
+    private BillStatementMapper billStatementMapper;
+
+    @Override
+    public ResponseBean getBillList(String parameter) {
+        ResponseBean responseBean = new ResponseBean();
+        JSONObject jsonObject = JSONObject.parseObject(parameter);
+
+        Integer pageNum = jsonObject.getInteger("pageNum");
+        Integer pageSize = jsonObject.getInteger("pageSize");
+        // 缴费项ID
+        Integer billId = jsonObject.getInteger("billId");
+        // 期
+        String phase = jsonObject.getString("phase");
+        // 栋
+        String building = jsonObject.getString("building");
+        // 单元
+        String unit = jsonObject.getString("unit");
+        // 户号
+        String roomNo = jsonObject.getString("roomNo");
+        // 业主姓名
+        String ownerName = jsonObject.getString("ownerName");
+        // 缴费状态
+        Integer billStatus = jsonObject.getInteger("billStatus");
+        // 缴费人姓名
+        String payName = jsonObject.getString("payName");
+
+        Map<String, Object> map = Maps.newHashMap();
+        map.put("billId", billId);
+        map.put("phase", phase);
+        map.put("building", building);
+        map.put("unit", unit);
+        map.put("roomNo", roomNo);
+        map.put("ownerName", ownerName);
+        map.put("billStatus", billStatus);
+        map.put("payName", payName);
+
+
+        Page<BillInvoice> page = new Page<>();
+        page.setCurrent(pageNum);
+        page.setSize(pageSize);
+        IPage<BillInvoice> invoiceIPage = billInvoiceMapper.selectBillInvoice(page, map);
+
+        Map<String, Object> respMap = Maps.newHashMap();
+        respMap.put("pageNum", invoiceIPage.getCurrent());
+        respMap.put("pageSize", invoiceIPage.getSize());
+        respMap.put("total", invoiceIPage.getTotal());
+        respMap.put("list", invoiceIPage.getRecords());
+
+        responseBean.addSuccess(respMap);
+
+        return responseBean;
+    }
+}

CODE/smart-community/property-api/src/main/java/com/community/huiju/service/impl/BillServiceImpl.java

@@ -0,0 +1,37 @@
+package com.community.huiju.service.impl;
+
+import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
+import com.community.commom.mode.ResponseBean;
+import com.community.huiju.dao.BillInvoiceMapper;
+import com.community.huiju.dao.BillStatementMapper;
+import com.community.huiju.model.Bill;
+import com.community.huiju.dao.BillMapper;
+import com.community.huiju.service.IBillService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+/**
+ * <p>
+ * 缴费项表 服务实现类
+ * </p>
+ *
+ * @author weiximei
+ * @since 2019-02-13
+ */
+@Service
+public class BillServiceImpl extends ServiceImpl<BillMapper, Bill> implements IBillService {
+
+    /** 缴费项表 **/
+    @Autowired
+    private BillMapper billMapper;
+
+    /** 缴费单 **/
+    @Autowired
+    private BillInvoiceMapper billInvoiceMapper;
+
+    /** 账单流水表 **/
+    @Autowired
+    private BillStatementMapper billStatementMapper;
+
+
+}

CODE/smart-community/property-api/src/main/java/com/community/huiju/service/impl/BillStatementServiceImpl.java

@@ -0,0 +1,20 @@
+package com.community.huiju.service.impl;
+
+import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
+import com.community.huiju.model.BillStatement;
+import com.community.huiju.dao.BillStatementMapper;
+import com.community.huiju.service.IBillStatementService;
+import org.springframework.stereotype.Service;
+
+/**
+ * <p>
+ * 账单流水表 服务实现类
+ * </p>
+ *
+ * @author weiximei
+ * @since 2019-02-13
+ */
+@Service
+public class BillStatementServiceImpl extends ServiceImpl<BillStatementMapper, BillStatement> implements IBillStatementService {
+
+}

CODE/smart-community/property-api/src/main/resources/mapper/BillInvoiceMapper.xml

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.community.huiju.dao.BillInvoiceMapper">
+
+    <select id="selectBillInvoice" resultType="com.community.huiju.model.BillInvoice">
+
+        SELECT
+            tpi.*, tboi.owner_name,
+            tboi.phase,
+            tboi.building,
+            tboi.unit,
+            tboi.room_no
+        FROM
+            tp_bill_invoice tpi
+        LEFT JOIN tp_building_owner_info tboi ON tpi.building_owner_info_id = tboi.id
+        <where>
+            <trim prefixOverrides="and | or">
+                <if test="map.phase != null and map.phase != ''">
+                    AND tboi.phase = #{map.phase}
+                </if>
+                <if test="map.building != null and map.building != ''">
+                    AND tboi.building = #{map.building}
+                </if>
+                <if test="map.unit != null and map.unit != ''">
+                    AND tboi.unit = #{map.unit}
+                </if>
+                <if test="map.roomNo != null and map.roomNo != ''">
+                    AND tboi.room_no = #{map.roomNo}
+                </if>
+                <if test="map.ownerName != null and map.ownerName != ''">
+                    AND tboi.owner_name = #{map.ownerName}
+                </if>
+                <if test="map.billStatus != null and map.billStatu != ''">
+                    AND tpi.bill_status = #{map.billStatus}
+                </if>
+                <if test="map.payName != null and map.payName != ''">
+                    AND tpi.pay_name = #{map.payName}
+                </if>
+            </trim>
+        </where>
+
+    </select>
+
+</mapper>

CODE/smart-community/property-api/src/main/resources/mapper/BillMapper.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.community.huiju.dao.BillMapper">
+
+</mapper>

CODE/smart-community/property-api/src/main/resources/mapper/BillStatementMapper.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.community.huiju.dao.BillStatementMapper">
+
+</mapper>

VUECODE/smart-property-manage/src/permission.js

@@ -18,6 +18,7 @@ router.beforeEach((to, from, next) => {
         store.dispatch('GetInfo').then(res => { // 拉取用户信息
           const rounterMap = []
           const permissionMap = res.data.permissionList
+          console.log(permissionMap)
           // 构造父路由
           constantRouterMap.forEach(router => {
             permissionMap.forEach(permission => {

VUECODE/smart-property-manage/src/router/index.js

@@ -205,6 +205,29 @@ export const constantRouterMap = [
         meta: { title: '编辑成员', icon: 'table' }
       }
     ]
+  },
+  {
+    path: '/bill',
+    component: Layout,
+    redirect: '/bill/index',
+    name: 'bill',
+    alwaysShow: true,
+    meta: { title: '收费', icon: 'zip' },
+    children: [
+      {
+        path: '/bill/management',
+        component: () => import('@/views/bill/index'),
+        name: 'bill-index',
+        meta: { title: '收费组管理', icon: 'table' }
+      },
+      {
+        path: '/bill/management/info',
+        component: () => import('@/views/bill/info/index'),
+        name: 'bill-info',
+        hidden: true,
+        meta: { title: '收费组详情', icon: 'table' }
+      }
+    ]
   }
 ]
 

VUECODE/smart-property-manage/src/views/bill/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    收费组详情
+    <el-button type="primary" @click="getInfo">查看详情</el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Index',
+  methods: {
+    getInfo() {
+      this.$router.push({ name: 'bill-info' })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

VUECODE/smart-property-manage/src/views/bill/info/index.vue

@@ -0,0 +1,175 @@
+<template>
+  <div id="root">
+    <div class="bill-info-title">
+      <div class="title-info">收费组名称: {{ billName }}</div>
+      <div class="title-info">收费组说明: {{ billExplain }}</div>
+      <div class="title-info">截止时间: {{ endDate }}</div>
+      <el-button type="info">修改</el-button>
+    </div>
+    <div class="bill-info-search">
+      <span style="font-weight: bold;">收费情况</span>
+      <el-form :model="formInline" inline="true" class="form-inline">
+        <el-form-item label="选择房子">
+          <el-select v-model="formInline.phase" placeholder="请选择期">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"/>
+          </el-select>
+          <el-select v-model="formInline.building" placeholder="请选择栋">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"/>
+          </el-select>
+          <el-select v-model="formInline.unit" placeholder="请选择单元">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"/>
+          </el-select>
+          <el-select v-model="formInline.roomNo" placeholder="请选择户">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"/>
+          </el-select>
+        </el-form-item>
+        <br>
+        <el-form-item label="业主姓名">
+          <el-input v-model="formInline.ownerName"/>
+        </el-form-item>
+        <el-form-item label="缴费状态">
+          <el-select v-model="formInline.billStatus" placeholder="活动区域">
+            <el-option label="请选择" value="shanghai"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="缴费人姓名">
+          <el-input v-model="formInline.payName"/>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="info">清空</el-button>
+          <el-button type="primary" @click="onSubmit">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="bill-info-operation">
+      <el-button type="primary">添加更多收费单</el-button>
+      <el-button type="danger">删除</el-button>
+      <el-button type="primary">设置为已线下缴费</el-button>
+      <el-button type="success">导出数据</el-button>
+      <div style="height: 40px; line-height: 40px; margin-left: 10px; color: #99a9bf;">未缴户主费用可以直接点击 收费金额数字 修改，已缴费业主无法修改，需要线下多退少补</div>
+    </div>
+    <el-table
+      ref="multipleTable"
+      :data="list"
+      style="width: 100%; margin-top: 20px;"
+      border="true"
+      @selection-change="handleSelectionChange">
+      <el-table-column
+        type="selection"
+        width="55"/>
+      <el-table-column
+        label="收费单号">
+        <template slot-scope="scope">{{ scope.row.date }}</template>
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="房屋信息"/>
+      <el-table-column
+        prop="address"
+        label="业主姓名"
+        show-overflow-tooltip/>
+      <el-table-column
+        prop="name"
+        label="收费单说明"/>
+      <el-table-column
+        prop="name"
+        label="金额(元)"/>
+      <el-table-column
+        prop="name"
+        label="流水"/>
+      <el-table-column
+        prop="name"
+        label="缴费状态"/>
+      <el-table-column
+        prop="name"
+        label="缴费人"/>
+      <el-table-column
+        prop="name"
+        label="缴费时间"/>
+      <el-table-column
+        prop="name"
+        label="新建时间"/>
+      <el-table-column
+        prop="name"
+        label="新建人"/>
+      <el-table-column
+        prop="name"
+        label="修改时间"/>
+      <el-table-column
+        prop="name"
+        label="修改时间"/>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Index',
+  data() {
+    return {
+      formInline: {
+        billId: '', // 缴费项目id
+        phase: '',
+        building: '',
+        unit: '',
+        roomNo: '',
+        ownerName: '',
+        billStatus: '',
+        payName: ''
+      },
+      billName: 'xxx收费项目',
+      billExplain: 'xxx收费说明',
+      endDate: 'xxx收费项截止时间',
+      list: [] // 数据列表
+    }
+  },
+  methods: {
+    handleSelectionChange(val) {
+      console.log(val)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.bill-info-title {
+  display: flex;
+  justify-content: space-between;
+  margin-left: 20px;
+  margin-right: 20px;
+  margin-top: 20px;
+}
+.title-info {
+  height: 40px;
+  line-height: 40px;
+}
+.bill-info-search {
+  margin-left: 20px;
+  margin-right: 20px;
+  margin-top: 20px;
+}
+.form-inline {
+  margin-top: 10px;
+}
+.bill-info-operation {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: 20px;
+}
+</style>