合并

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

 package com.community.huiju.controller;
 
 
+import com.community.commom.mode.ResponseBean;
 import com.community.huiju.common.base.BaseController;
+import com.community.huiju.service.IBillService;
+import io.swagger.annotations.Api;
+import io.swagger.annotations.ApiImplicitParam;
+import io.swagger.annotations.ApiImplicitParams;
+import io.swagger.annotations.ApiOperation;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.cloud.context.config.annotation.RefreshScope;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
 
+import javax.servlet.http.HttpSession;
+import java.util.List;
+
 /**
  * <p>
  * 缴费项表 前端控制器
  * @since 2019-02-13
  */
 @RestController
-@RequestMapping("/tp/bill")
+@RequestMapping("/")
+@RefreshScope
+@Api(value = "缴费项 API", description = "缴费项 API")
 public class BillController extends BaseController {
 
+    @Autowired
+    private IBillService iBillService;
+
+    @ApiOperation(value = "根据 id 查询缴费项详情", notes = "根据 id 查询缴费项详情")
+    @ApiImplicitParams({
+            @ApiImplicitParam(dataTypeClass = String.class, paramType = "path", name = "id", value = "id编号")
+    })
+    @RequestMapping(value = "/bill/{id}")
+    public ResponseBean getByBillId(HttpSession session, @PathVariable("id") Integer id) {
+        ResponseBean responseBean = new ResponseBean();
+        responseBean = iBillService.getByBillId(id);
+        return responseBean;
+    }
+
 }

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

 import com.community.commom.session.UserElement;
 import com.community.huiju.common.base.BaseController;
 import com.community.huiju.service.IBillInvoiceService;
+import com.community.huiju.service.IBillService;
 import io.swagger.annotations.Api;
 import io.swagger.annotations.ApiImplicitParam;
 import io.swagger.annotations.ApiImplicitParams;
 import org.springframework.web.bind.annotation.RestController;
 
 import javax.servlet.http.HttpSession;
+import java.util.List;
 
 /**
  * <p>
     @Autowired
     private IBillInvoiceService iBillInvoiceService;
 
+    @Autowired
+    private IBillService iBillService;
+
     @ApiOperation(value = "查询缴费单", notes = "查询缴费单")
     @ApiImplicitParams({
             @ApiImplicitParam(dataTypeClass = String.class, paramType = "body", name = "parameter", value = "billId: 缴费项目id," +
         return responseBean;
     }
 
+    @ApiOperation(value = "修改缴费项 收费项名称,缴费项说明,截止时间", notes = "修改缴费项 收费项名称,缴费项说明,截止时间")
+    @ApiImplicitParams({
+            @ApiImplicitParam(dataTypeClass = String.class, paramType = "body", name = "parameter", value = "billName收费项名称,billExplain缴费项说明,endDate截止时间"),
+            @ApiImplicitParam(paramType = "header", dataTypeClass = String.class, name = "X-Auth-Token", value = "Token")
+    })
+    @RequestMapping(value = "/bill/invoice/updateBill", method = RequestMethod.PUT)
+    public ResponseBean updateBill(HttpSession session, @RequestBody String parameter) {
+        ResponseBean responseBean = new ResponseBean();
+
+        UserElement userElement = getUserElement(session);
+        responseBean = iBillService.updateBillNameAndBillExplainAndEndDate(userElement, parameter);
+        return responseBean;
+    }
+
+    @ApiOperation(value = "根据 id集合 删除缴费单", notes = "根据 id集合 删除缴费单")
+    @ApiImplicitParams({
+            @ApiImplicitParam(dataTypeClass = String.class, paramType = "body", name = "ids", value = "id集合"),
+            @ApiImplicitParam(paramType = "header", dataTypeClass = String.class, name = "X-Auth-Token", value = "Token")
+    })
+    @RequestMapping(value = "/bill/invoice/delete", method = RequestMethod.POST)
+    public ResponseBean delete(HttpSession session, @RequestBody List<Integer> ids) {
+        ResponseBean responseBean = new ResponseBean();
+        UserElement userElement = getUserElement(session);
+
+        responseBean = iBillInvoiceService.deleteBillInvoice(ids, userElement);
+        return responseBean;
+    }
+
+    @ApiOperation(value = "设置线下缴费", notes = "设置线下缴费")
+    @ApiImplicitParams({
+            @ApiImplicitParam(dataTypeClass = String.class, paramType = "body", name = "ids", value = "id集合"),
+            @ApiImplicitParam(paramType = "header", dataTypeClass = String.class, name = "X-Auth-Token", value = "Token")
+    })
+    @RequestMapping(value = "/bill/invoice/offlinePayment", method = RequestMethod.POST)
+    public ResponseBean offlinePayment(HttpSession session, @RequestBody List<Integer> ids) {
+        ResponseBean responseBean = new ResponseBean();
+        UserElement userElement = getUserElement(session);
+
+        responseBean = iBillInvoiceService.offlinePayment(ids, userElement);
+        return responseBean;
+    }
+
+
 }

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

 package com.community.huiju.model;
 
+import com.baomidou.mybatisplus.annotation.IdType;
+import com.baomidou.mybatisplus.annotation.TableId;
 import com.baomidou.mybatisplus.annotation.TableName;
 import lombok.Data;
 import lombok.EqualsAndHashCode;
 
 import java.io.Serializable;
 import java.time.LocalDateTime;
+import java.util.Date;
 
 /**
  * <p>
 
     private static final long serialVersionUID = 1L;
 
+    @TableId(value = "id", type = IdType.AUTO)
+    private Integer id;
+
     /**
      * 小区id
      */
     /**
      * 截止时间
      */
-    private LocalDateTime endDate;
+    private Date endDate;
 
     /**
      * 创建人

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

 import com.community.commom.session.UserElement;
 import com.community.huiju.model.BillInvoice;
 
+import java.util.List;
+
 /**
  * <p>
  * 缴费单 服务类
      */
     ResponseBean getBillList(String parameter, UserElement userElement);
 
+    /**
+     * 批量删除 缴费单
+     * @param ids
+     * @param userElement
+     * @return
+     */
+    ResponseBean deleteBillInvoice(List<Integer> ids, UserElement userElement);
+
+    /**
+     * 设置线下缴费
+     * @param ids
+     * @param userElement
+     * @return
+     */
+    ResponseBean offlinePayment(List<Integer> ids, UserElement userElement);
 
 }

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

 
 import com.baomidou.mybatisplus.extension.service.IService;
 import com.community.commom.mode.ResponseBean;
+import com.community.commom.session.UserElement;
 import com.community.huiju.model.Bill;
 
 /**
  */
 public interface IBillService extends IService<Bill> {
 
+    /**
+     * 修改 缴费项的 收费项名称,缴费项说明,截止时间
+     *
+     * @param parameter
+     * @param userElement
+     * @return
+     */
+    ResponseBean updateBillNameAndBillExplainAndEndDate(UserElement userElement, String parameter);
+
+    /**
+     * 根据ID查询 缴费项
+     * @param id
+     * @return
+     */
+    ResponseBean getByBillId(Integer id);
 
 }

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

 import com.community.commom.session.UserElement;
 import com.community.huiju.dao.BillMapper;
 import com.community.huiju.dao.BillStatementMapper;
+import com.community.huiju.exception.WisdomException;
+import com.community.huiju.model.Bill;
 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 org.springframework.transaction.annotation.Transactional;
 
+import java.util.List;
 import java.util.Map;
 
 /**
         page.setSize(pageSize);
         IPage<BillInvoice> invoiceIPage = billInvoiceMapper.selectBillInvoice(page, map);
 
+        // 缴费项目
+        Bill bill = billMapper.selectById(billId);
+
         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());
+        respMap.put("billName", bill.getBillName());
+        respMap.put("billExplain", bill.getBillExplain());
+        respMap.put("endDate", bill.getEndDate());
 
         responseBean.addSuccess(respMap);
 
         return responseBean;
     }
+
+    @Override
+    @Transactional(rollbackFor = Exception.class)
+    public ResponseBean deleteBillInvoice(List<Integer> ids, UserElement userElement) {
+        ResponseBean responseBean = new ResponseBean();
+        if (null == userElement) {
+            responseBean.addError("请登录后操作");
+            return responseBean;
+        }
+
+        ids.stream().forEach(e -> {
+            BillInvoice billInvoice = billInvoiceMapper.selectById(e);
+            if (!"0".equals(billInvoice.getBillStatus())) {
+                throw new WisdomException("费用已缴，无法删除");
+            }
+            billInvoiceMapper.deleteById(e);
+        });
+
+        responseBean.addSuccess("操作成功");
+        return responseBean;
+    }
+
+    @Override
+    @Transactional(rollbackFor = Exception.class)
+    public ResponseBean offlinePayment(List<Integer> ids, UserElement userElement) {
+        ResponseBean responseBean = new ResponseBean();
+        if (null == userElement) {
+            responseBean.addError("请登录后操作");
+            return responseBean;
+        }
+
+        ids.stream().forEach(e -> {
+            BillInvoice billInvoice = billInvoiceMapper.selectById(e);
+            if ("1".equals(billInvoice.getBillStatus())) {
+                throw new WisdomException("费用已缴，无法更改");
+            }
+
+            billInvoice.setBillStatus("2");
+            billInvoiceMapper.updateById(billInvoice);
+        });
+
+        responseBean.addSuccess("操作成功");
+        return responseBean;
+    }
 }

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

 package com.community.huiju.service.impl;
 
+import com.alibaba.fastjson.JSONObject;
 import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
 import com.community.commom.mode.ResponseBean;
+import com.community.commom.session.UserElement;
 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.apache.commons.lang3.StringUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
 
 /**
  * <p>
     @Autowired
     private BillStatementMapper billStatementMapper;
 
+    @Override
+    @Transactional(rollbackFor = Exception.class)
+    public ResponseBean updateBillNameAndBillExplainAndEndDate(UserElement userElement, String parameter) {
+        ResponseBean responseBean = new ResponseBean();
+        Bill bill = JSONObject.parseObject(parameter, Bill.class);
+        if (StringUtils.isEmpty(bill.getBillName())) {
+            responseBean.addError("收费项名称不能为空");
+            return responseBean;
+        }
+        if (StringUtils.isEmpty(bill.getBillExplain())) {
+            responseBean.addError("缴费项说明");
+            return responseBean;
+        }
+        if (bill.getEndDate() == null) {
+            responseBean.addError("截止时间不能为空");
+            return responseBean;
+        }
 
+        Bill selectBill = billMapper.selectById(bill.getId());
+        if (selectBill == null) {
+            responseBean.addError("缴费项不存在");
+            return responseBean;
+        }
+
+        billMapper.updateById(bill);
+        responseBean.addSuccess("操作成功");
+        return responseBean;
+    }
+
+    @Override
+    public ResponseBean getByBillId(Integer id) {
+        ResponseBean responseBean = new ResponseBean();
+        Bill bill = billMapper.selectById(id);
+        responseBean.addSuccess(bill);
+        return responseBean;
+    }
 }

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

                     AND tboi.room_no = #{map.roomNo}
                 </if>
                 <if test="map.ownerName != null and map.ownerName != ''">
-                    AND tboi.owner_name = #{map.ownerName}
+                    AND tboi.owner_name like CONCAT('%',#{map.ownerName},'%')
                 </if>
                 <if test="map.billStatus != null and map.billStatus != ''">
                     AND tpi.bill_status = #{map.billStatus}
                 </if>
                 <if test="map.payName != null and map.payName != ''">
-                    AND tpi.pay_name = #{map.payName}
+                    AND tpi.pay_name like CONCAT('%',#{map.payName}, '%')
                 </if>
                 <if test="map.billId != null">
                     AND tpi.bill_id = #{map.billId}

VUECODE/smart-property-manage/src/api/billInvoice.js

   })
 }
 
+// 修改缴费项 收费项名称,缴费项说明,截止时间
+export function updateBillNameAndBillExplainAndEndDate(data) {
+  return request({
+    url: '/bill/invoice/updateBill',
+    method: 'put',
+    data: {
+      id: data.id, // 收费项ID
+      billName: data.billName, // 收费项名称
+      billExplain: data.billExplain, // 缴费项说明
+      endDate: data.endDate // 截止时间
+    }
+  })
+}
 
+// 根据ID 查询缴费项信息
+export function getBillByIdInfo(id) {
+  return request({
+    url: '/bill/' + id,
+    method: 'get'
+  })
+}
 
+//  根据 id 批量删除 缴费单
+export function deleteBillInvoiceById(data) {
+  return request({
+    url: '/bill/invoice/delete',
+    method: 'post',
+    data
+  })
+}
 
-
-
-
-
-
-
+// 设置线下缴费
+export function billInvoiceOfflinePayment(data) {
+  return request({
+    url: '/bill/invoice/offlinePayment',
+    method: 'post',
+    data
+  })
+}

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

         name: 'bill-info',
         hidden: true,
         meta: { title: '收费组详情', icon: 'table' }
+      },
+      {
+        path: '/bill/management/info/bill-edi',
+        component: () => import('@/views/bill/info/bill-edi/index'),
+        name: 'bill-info-edi',
+        hidden: true,
+        meta: { title: '收费组详情', icon: 'table' }
       }
     ]
   },

VUECODE/smart-property-manage/src/store/modules/billInvoice.js

-import { getBillInvoiceList } from '@/api/billInvoice'
+import { getBillInvoiceList, updateBillNameAndBillExplainAndEndDate, getBillByIdInfo, deleteBillInvoiceById, billInvoiceOfflinePayment } from '@/api/billInvoice'
 
 const billInvoice = {
   state: {
 
   },
   actions: {
-    GetBillInvoiceList({ commit }, data) {
+    GetBillInvoiceList({ commit }, data) { // // 查询缴费单
       return new Promise((resolve, reject) => {
         getBillInvoiceList(data).then(response => {
           resolve(response)
           reject(error)
         })
       })
+    },
+    UpdateBillNameAndBillExplainAndEndDate({ commit }, data) { // 修改缴费项 收费项名称,缴费项说明,截止时间
+      return new Promise((resolve, reject) => {
+        updateBillNameAndBillExplainAndEndDate(data).then(response => {
+          resolve(response)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+    GetBillByIdInfo({ commit }, id) { // 根据 id 查询 缴费项信息
+      return new Promise((resolve, reject) => {
+        getBillByIdInfo(id).then(response => {
+          resolve(response)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+    DeleteBillInvoiceById({ commit }, data) { // 根据 id 集合批量删除
+      return new Promise((resolve, reject) => {
+        deleteBillInvoiceById(data).then(response => {
+          resolve(response)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+    BillInvoiceOfflinePayment({ commit }, data) { // 设置线下缴费
+      return new Promise((resolve, reject) => {
+        billInvoiceOfflinePayment(data).then(response => {
+          resolve(response)
+        }).catch(error => {
+          reject(error)
+        })
+      })
     }
   }
 }

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

   name: 'Index',
   methods: {
     getInfo() {
-      this.$router.push({ name: 'bill-info', params: { id: 187 }})
+      this.$router.push({ name: 'bill-info', params: { id: 908 }})
     }
   }
 }

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

+<template>
+  <div id="root">
+    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="form-ruleForm">
+      <el-form-item label="收费组名称" prop="billName">
+        <el-input v-model="ruleForm.billName"/>
+      </el-form-item>
+      <el-form-item label="收费组说明" prop="billExplain">
+        <el-input v-model="ruleForm.billExplain"/>
+      </el-form-item>
+      <el-form-item label="截止时间" prop="endDate">
+        <el-date-picker
+          v-model="ruleForm.endDate"
+          type="date"
+          placeholder="选择日期"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Index',
+  data() {
+    return {
+      ruleForm: {
+        id: '', // 收费项ID
+        billName: '', // 收费项名称
+        billExplain: '', // 缴费项说明
+        endDate: '' // 截止时间
+      },
+      rules: {
+        billName: [
+          { required: true, message: '请输入收费项名称', trigger: 'blur' }
+        ],
+        billExplain: [
+          { required: true, message: '请选择缴费项说明', trigger: 'blur' }
+        ],
+        endDate: [
+          { type: 'date', required: true, message: '请选择截止时间', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  mounted() {
+    this.ruleForm.id = this.$route.params.id
+    this.getBillByIdInfo()
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$store.dispatch('UpdateBillNameAndBillExplainAndEndDate', this.ruleForm).then(res => {
+            const code = res.code
+            if (code === '0') {
+              this.$message.success(res.message)
+              this.$router.push({ name: 'bill-info', params: { id: this.ruleForm.id }})
+              return
+            }
+            this.$message.error(res.message)
+          }).catch(() => {
+            console.log('UpdateBillNameAndBillExplainAndEndDate error')
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    resetForm(formName) { // 重置
+      this.$refs[formName].resetFields()
+    },
+    getBillByIdInfo() { // 根据 id 查询 缴费项信息
+      this.$store.dispatch('GetBillByIdInfo', this.ruleForm.id).then(res => {
+        const resData = res.data
+        this.ruleForm.billName = resData.billName
+        this.ruleForm.billExplain = resData.billExplain
+        this.ruleForm.endDate = resData.endDate
+      }).catch(() => {
+        console.log('GetBillByIdInfo error')
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+#root {
+  margin-top: 20px;
+  margin-left: auto;
+  margin-right: auto;
+  width: 500px;
+}
+</style>

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

     <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 class="title-info">截止时间: {{ formatDate(endDate) }}</div>
+      <el-button type="info" @click="updateBill">修改</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-select v-model="formInline.phase" placeholder="请选择期" @change="buildSelectChange(0)">
             <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"/>
+              v-for="item in phaseList"
+              :key="item.id"
+              :label="item.phase"
+              :value="item.phase"/>
           </el-select>
-          <el-select v-model="formInline.building" placeholder="请选择栋">
+          <el-select v-model="formInline.building" placeholder="请选择栋" @change="buildSelectChange(1)">
             <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"/>
+              v-for="item in buildingList"
+              :key="item.id"
+              :label="item.building"
+              :value="item.building"/>
           </el-select>
-          <el-select v-model="formInline.unit" placeholder="请选择单元">
+          <el-select v-model="formInline.unit" placeholder="请选择单元" @change="buildSelectChange(3)">
             <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"/>
+              v-for="item in unitList"
+              :key="item.id"
+              :label="item.unit"
+              :value="item.unit"/>
           </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"/>
+              v-for="item in roomNoList"
+              :key="item.id"
+              :label="item.roomNo"
+              :value="item.roomNo"/>
           </el-select>
         </el-form-item>
         <br>
         </el-form-item>
         <el-form-item label="缴费状态">
           <el-select v-model="formInline.billStatus" placeholder="活动区域">
-            <el-option label="请选择" value="shanghai"/>
+            <el-option label="未缴费" value="0"/>
+            <el-option label="已线上缴费" value="1"/>
+            <el-option label="已线下缴费" value="2"/>
           </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-button type="info" @click="cleanQuery">清空</el-button>
+          <el-button type="primary" @click="getBillInvoice">查询</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="danger" @click="deleteBeachIds">删除</el-button>
+      <el-button type="primary" @click="offlinePayment">设置为已线下缴费</el-button>
       <el-button type="success">导出数据</el-button>
       <div style="height: 40px; line-height: 40px; margin-left: 10px; color: #99a9bf;">未缴户主费用可以直接点击 收费金额数字 修改，已缴费业主无法修改，需要线下多退少补</div>
     </div>
     <el-table
+      v-loading="tableLoading"
       ref="multipleTable"
       :data="list"
       style="width: 100%; margin-top: 20px;"
-      border="true"
+      border
       @selection-change="handleSelectionChange">
       <el-table-column
         type="selection"
-        width="55"/>
+        width="55"
+        align="center"/>
       <el-table-column
         prop="id"
         label="收费单号"
-        width="55">
+        width="55"
+        align="center">
         <!--<template slot-scope="scope">{{ scope.row.date }}</template>-->
       </el-table-column>
       <el-table-column
         prop="name"
-        label="房屋信息">
+        label="房屋信息"
+        align="center">
         <template slot-scope="scope">{{ scope.row.phase + '期' + scope.row.building + '栋' + scope.row.unit + '单元' + scope.row.roomNo + '户号' }}</template>
       </el-table-column>
       <el-table-column
         prop="ownerName"
         label="业主姓名"
+        align="center"
         show-overflow-tooltip/>
       <el-table-column
         prop="billInvoiceExplain"
         label="收费单说明"
-        width="300"/>
+        width="300"
+        align="center"/>
       <el-table-column
         prop="payPrice"
-        label="金额(元)"/>
+        label="金额(元)"
+        align="center">
+        <template slot-scope="scope">
+          <span style="color: #409EFF;cursor: pointer" @click="ediPayPrice(scope.row)">{{ scope.row.payPrice }}</span>
+        </template>
+      </el-table-column>
       <el-table-column
         prop="billStatement"
-        label="流水"/>
+        label="流水"
+        align="center"/>
       <el-table-column
         prop="billStatus"
-        label="缴费状态"/>
+        label="缴费状态"
+        align="center">
+        <template slot-scope="scope">{{ showBillStatus(scope.row.billStatus) }}</template>
+      </el-table-column>
       <el-table-column
         prop="payName"
-        label="缴费人"/>
+        label="缴费人"
+        align="center"/>
       <el-table-column
         prop="payDate"
-        label="缴费时间"/>
+        label="缴费时间"
+        align="center">
+        <template slot-scope="scope"> {{ formatDate(scope.row.payDate) }} </template>
+      </el-table-column>
       <el-table-column
         prop="createDate"
-        label="新建时间"/>
+        label="新建时间"
+        align="center">
+        <template slot-scope="scope"> {{ formatDate(scope.row.createDate) }} </template>
+      </el-table-column>
       <el-table-column
         prop="createUserName"
-        label="新建人"/>
+        label="新建人"
+        align="center"/>
       <el-table-column
         prop="updateUserName"
-        label="修改时间"/>
+        label="修改人"
+        align="center"/>
       <el-table-column
         prop="updateDate"
-        label="修改时间"/>
+        label="修改时间"
+        align="center">
+        <template slot-scope="scope"> {{ formatDate(scope.row.updateDate) }} </template>
+      </el-table-column>
     </el-table>
     <div class="pagination-info">
       <el-pagination
         :current-page="formInline.pageNum"
-        :page-sizes="[100, 200, 300, 400]"
+        :page-sizes="[10, 20, 40, 80, 100]"
         :page-size="formInline.pageSize"
         :total="total"
         layout="total, sizes, prev, pager, next, jumper"
         pageSize: 10,
         pageNum: 1
       },
-      billName: 'xxx收费项目',
-      billExplain: 'xxx收费说明',
-      endDate: 'xxx收费项截止时间',
+      billName: '', // 缴费组说明
+      billExplain: '', // 缴费组说明
+      endDate: '', // 缴费组截止时间
       list: [], // 数据列表
-      total: 0
+      total: 0,
+      buildingList: [], // seletc 楼栋集合
+      unitList: [], // seletc 单元集合
+      levelList: [], // seletc 层 集合
+      roomNoList: [], //  seletc 户号集合
+      phaseList: [], // 期 集合
+      deleteIds: [], // 需要删除的id集合
+      tableLoading: true // 表格加载圈
     }
   },
   mounted() {
+    // 获取期
+    this.getPhase()
     this.formInline.billId = this.$route.params.id
     this.getBillInvoice()
   },
   methods: {
     handleSelectionChange(val) {
       console.log(val)
+      this.deleteIds = []
+      for (const i in val) {
+        this.deleteIds.push(val[i].id)
+      }
+    },
+    cleanQuery() { // 清空
+      this.formInline.phase = ''
+      this.formInline.building = ''
+      this.formInline.unit = ''
+      this.formInline.roomNo = ''
+      this.formInline.ownerName = ''
+      this.formInline.billStatus = ''
+      this.formInline.payName = ''
+      this.getBillInvoice()
     },
     getBillInvoice() {
       this.$store.dispatch('GetBillInvoiceList', this.formInline).then(res => {
         this.formInline.pageNum = resData.pageNum
         this.formInline.pageSize = resData.pageSize
         this.total = resData.total
+        this.billName = resData.billName
+        this.billExplain = resData.billExplain
+        this.endDate = resData.endDate
+        this.tableLoading = false
       }).catch(() => {
         console.log('GetBillInvoiceList error')
+        this.tableLoading = false
+      })
+    },
+    getPhase() { // 获取期
+      this.formInline.phase = ''
+      this.$store.dispatch('BuildingAddress', this.formInline).then((res) => {
+        this.phaseList = res.data
+      }).catch(() => {
+        console.log('error phase BuildingAddress')
+      })
+    },
+    getBuild() { // 获取楼栋
+      this.formInline.building = ''
+      this.$store.dispatch('BuildingAddress', this.formInline).then((res) => {
+        this.buildingList = res.data
+      }).catch(() => {
+        console.log('error building BuildingAddress')
+      })
+    },
+    getUnit() { // 获取单元
+      this.formInline.unit = ''
+      this.$store.dispatch('BuildingAddress', this.formInline).then((res) => {
+        this.unitList = res.data
+      }).catch(() => {
+        console.log('error unit BuildingAddress')
+      })
+    },
+    getLevel() { // 获取楼层
+      this.formInline.level = ''
+      this.$store.dispatch('BuildingAddress', this.formInline).then((res) => {
+        this.levelList = res.data
+      }).catch(() => {
+        console.log('error level BuildingAddress')
+      })
+    },
+    getRoomNo() { // 获取户号
+      this.formInline.roomNo = ''
+      this.$store.dispatch('BuildingAddress', this.formInline).then((res) => {
+        this.roomNoList = res.data
+      }).catch(() => {
+        console.log('error roomNo BuildingAddress')
+      })
+    },
+    buildSelectChange(value) { // select 的 change
+      switch (value) {
+        case 0: // 查询栋
+          this.buildingList = []
+          this.unitList = []
+          this.levelList = []
+          this.roomNoList = []
+          this.formInline.building = ''
+          this.formInline.unit = ''
+          this.formInline.level = ''
+          this.formInline.roomNo = ''
+          this.getBuild()
+          break
+        case 1: // 查询 单元
+          this.unitList = []
+          this.levelList = []
+          this.roomNoList = []
+          this.formInline.unit = ''
+          this.formInline.level = ''
+          this.formInline.roomNo = ''
+          this.getUnit()
+          break
+        case 2: // 查询 楼层
+          this.levelList = []
+          this.roomNoList = []
+          this.formInline.level = ''
+          this.formInline.roomNo = ''
+          this.getLevel()
+          break
+        case 3: // 查询 户号
+          this.roomNoList = []
+          this.formInline.roomNo = ''
+          this.getRoomNo()
+          break
+      }
+    },
+    formatDate(val) {
+      var value = new Date(val)
+      var year = value.getFullYear()
+      var month = value.getMonth() + 1
+      var day = value.getDate()
+      // var hour = value.getHours()
+      // var minutes = value.getMinutes()
+      // var seconds = value.getSeconds()
+      // return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
+      return year + '-' + month + '-' + day
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.formInline.pageSize = val
+      this.getBillInvoice()
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.formInline.pageNum = val
+      this.getBillInvoice()
+    },
+    updateBill() { // 跳转修改bill标题页面 bill-info-edi
+      this.$router.push({ name: 'bill-info-edi', params: { id: this.formInline.billId }})
+    },
+    deleteBeachIds() { // 批量删除
+      if (this.deleteIds.length <= 0) {
+        this.$message.error('请至少选择一行数据')
+        return
+      }
+      this.$store.dispatch('DeleteBillInvoiceById', this.deleteIds).then(res => {
+        const code = res.code
+        if (code === '0') {
+          this.$message.success(res.message)
+          this.getBillInvoice()
+          return
+        }
+        this.$message.error(res.message)
+      }).catch(() => {
+        console.log('DeleteBillInvoiceById error')
+      })
+    },
+    showBillStatus(val) {
+      let str = ''
+      switch (val) {
+        case '0':
+          str = '未缴费'
+          break
+        case '1':
+          str = '已线上缴费'
+          break
+        case '2':
+          str = '已线下缴费'
+          break
+      }
+      return str
+    },
+    offlinePayment() { // 设置线下缴费
+      this.$store.dispatch('BillInvoiceOfflinePayment', this.deleteIds).then(res => {
+        const resCode = res.code
+        if (resCode === '0') {
+          this.$message.success(res.message)
+          this.getBillInvoice()
+          return
+        }
+        this.$message.error(res.message)
+      }).catch(() => {
+        console.log('BillInvoiceOfflinePayment error')
+      })
+    },
+    ediPayPrice(obj) { // 修改金额
+      const payPrice = obj.payPrice
+      this.$prompt('请输入金额', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputPlaceholder: payPrice,
+        inputPattern: /^\d+\.?\d{0,2}$/,
+        inputErrorMessage: '请输入有效的金额'
+      }).then(({ value }) => {
+        this.$message({
+          type: 'success',
+          message: '你的金额是: ' + value
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '取消输入'
+        })
       })
     }
   }

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

         this.deleteIds.push(data[i].id)
       }
     },
-    getPhase() { // 获取楼栋
+    getPhase() { // 获取期
       this.listQuery.phase = ''
       this.$store.dispatch('BuildingAddress', this.listQuery).then((res) => {
         this.phaseList = res.data