预缴

src/views/Payment/PrepayManage/depend/list.js

@@ -1,44 +1,33 @@
 export const formItem = [
 	{
 		type: 'input',
-		label:'关键字',
-		prop:'keyword',
+		label:'流水号',
+		prop:'code',
 		placeholder:'请输入'
 	},
 	{
-		type: 'select',
-		label:'余量告警',
-		prop:'status',
-		placeholder: '请选择',
-		option:[{ id:1,name:'充足'},{ id:2,name:'不足'}]
+		type: 'time',
+		label:'创建时间',
+		start: 'createDateStart',
+		end:'createDateEnd'
 	},
 ]
 export const columns = [
 	{
-		title: "房屋名称",
-		dataIndex: "manageBuildingName",
-		scopedSlots: { customRender: "name" },
+		title: "充值金额",
+		dataIndex: "amount",
 	},
 	{
-		title: "户主",
-		dataIndex: "owner",
+		title: "流水号",
+		dataIndex: "code",
 	},
 	{
-		title: "余额",
-		dataIndex: "balance",
+		title: "创建时间",
+		dataIndex: "createDate",
 	},
 	{
-		title: "余额状态",
-		dataIndex: "",
-		scopedSlots:{ customRender: "tags"}
-	},
-	{
-		title: "操作",
-		dataIndex: "action",
-		key: "action",
-		width: "180",
-		fixed: "right",
-		scopedSlots: { customRender: "action" },
+		title: "创建人",
+		dataIndex: "createName",
 	},
 ]
 export const pagination = {

src/views/Payment/PrepayManage/depend/preList.vue

@@ -10,7 +10,26 @@
       <div class="drawer-content">
         基本信息
         <a-divider></a-divider>
-        
+        <searchForm
+          :formItem="formItem"
+          @getSearch="getData($event)"
+        ></searchForm>
+        <a-table
+          :columns="columns"
+          :data-source="tableData"
+          :pagination="pagination"
+          @change="handleTableChange"
+          :row-selection="{
+            selectedRowKeys: selectedRowKeys,
+            onChange: selectionChoosed,
+          }"
+          :row-key="
+            (record, index) => {
+              return record.id;
+            }
+          "
+        >
+        </a-table>
       </div>
       <div class="drawer-footer">
         <a-button :style="{ marginRight: '8px' }" @click="close">
@@ -23,9 +42,66 @@
 
 <script>
 import { formItem, columns, pagination } from "./list";
+import {
+	rechargeList,
+} from "@/api/payment/prepayManage";
 export default {
+	props: {
+		id: Number,
+		show: Boolean,
+	},
+	data() {
+		return {
+			formItem,
+			columns,
+			pagination,
+			selectedRowKeys: [],
+			tableData:[],
+			searchForm:{
+				estateId: undefined,
+				code: undefined,
+				createDateStart: undefined,
+				createDateEnd: undefined,
+			}
+		};
+	},
 	methods: {
-	
+		async getData(data) {
+			if (data !== undefined) {
+				this.searchForm = data;
+			}
+			let res = await rechargeList({
+				pageNum: this.pagination.current,
+				size: this.pagination.pageSize,
+				...this.searchForm,
+			});
+			this.tableData = res.data.rows;
+			this.pagination.total = res.data.total;
+			this.selectedRowKeys = [];
+		},
+		selectionChoosed() {},
+		close(){
+			this.$emit('close');
+		},
+		handleTableChange(pagination) {
+			console.log(pagination);
+			const pager = { ...this.pagination };
+			pager.current = pagination.current;
+			pager.pageSize = pagination.pageSize;
+			this.pagination = pager;
+			this.getData();
+		},
+	},
+	watch: {
+		id: {
+			handler(id) {
+				if(id!== null && id!== undefined){
+					this.searchForm.estateId = id
+					this.getData()
+				}
+			},
+			immediate: true,
+		},
 	},
 };
 </script>

src/views/Payment/PrepayManage/index.vue

@@ -19,22 +19,19 @@
     >
       <span slot="name" slot-scope="text, row">
         {{
-          row.buildingName +
-          "栋/" +
-          row.unitName +
-          "单元/" +
-          row.name +
-          "室"
+          row.buildingName + "栋/" + row.unitName + "单元/" + row.name + "室"
         }}
       </span>
       <span slot="action" slot-scope="text, row">
         <a-space>
           <a class="ant-dropdown-link" @click="list(row.id)">明细</a>
-          <a class="ant-dropdown-link" @click="recharge(row.id)">充值</a>
+          <a class="ant-dropdown-link" @click="recharge(row)">充值</a>
         </a-space>
       </span>
       <span slot="tags" slot-scope="text, row">
-        <a-tag>{{ row.status===1?'充足':row.status===2?'不足':'-' }}</a-tag>
+        <a-tag>{{
+          row.status === 1 ? "充足" : row.status === 2 ? "不足" : "-"
+        }}</a-tag>
       </span>
     </a-table>
     <div class="action">
@@ -50,22 +47,43 @@
         </template>
       </span>
     </div>
+    <!-- 预缴明细 -->
+    <pre-list :show="drawer.show" :id="drawer.id" @close="close"></pre-list>
+    <!-- 充值 -->
+    <a-modal
+      title="预缴充值"
+      :visible="modal.show"
+      @ok="rechargeOk"
+      @cancel="rechargeCancel"
+    >
+      <a-input
+        v-model.number="modal.amount"
+        placeholder="请输入充值金额"
+      ></a-input>
+    </a-modal>
   </div>
 </template>
 
 <script>
 import { formItem, columns, pagination } from "./depend/config";
-import {
-	prepaymentList,
-	rechargeList,
-	recharge,
-} from "@/api/payment/prepayManage";
-import { allBuilding } from "@/api/basic/estate"
+import { prepaymentList, recharge } from "@/api/payment/prepayManage";
+import { allBuilding } from "@/api/basic/estate";
+import preList from "./depend/preList.vue";
 export default {
+	components: {
+		preList,
+	},
 	data() {
 		return {
 			drawer: {
 				show: false,
+				id: undefined,
+			},
+			modal: {
+				show: false,
+				estateInfo: "",
+				amount: undefined,
+				id: undefined,
 			},
 			tableData: [],
 			searchForm: {
@@ -83,13 +101,13 @@ export default {
 	},
 	mounted() {
 		this.getData();
-		this.getSelect()
+		this.getSelect();
 	},
 	methods: {
-		async getSelect(){
+		async getSelect() {
 			// 获取楼栋 后续可加单元、房间筛选
-			let res = await allBuilding()
-			this.formItem[2].option = res.data
+			let res = await allBuilding();
+			this.formItem[2].option = res.data;
 		},
 		async getData(data) {
 			if (data !== undefined) {
@@ -107,8 +125,50 @@ export default {
 		selectionChoosed(data) {
 			this.selectedRowKeys = data;
 		},
-		recharge(id){},
-		list(id){},
+		recharge(row) {
+			this.modal = {
+				show: true,
+				id:row.id,
+				estateInfo:
+          row.buildingName + "栋/" + row.unitName + "单元/" + row.name + "室",
+			};
+		},
+		rechargeOk() {
+			this.$confirm({
+				title: "预缴充值",
+				content: `是否给房屋${this.modal.estateInfo}充值`,
+				onOk:()=>{
+					recharge({ estateId: this.modal.id, amount: this.modal.amount }).then(
+						(res) => {
+							if (res.code === 200) {
+								this.$message.success(res.msg);
+								this.getData()
+								this.rechargeCancel();
+							} else {
+								this.$message.error(res.msg);
+							}
+						}
+					);
+				},
+			});
+		},
+		rechargeCancel() {
+			this.modal = {
+				show: false,
+				estateInfo: "",
+				amount: undefined,
+				id: undefined,
+			};
+		},
+		list(id) {
+			this.drawer = {
+				show: true,
+				id: id,
+			};
+		},
+		close() {
+			this.drawer.show = false;
+		},
 		handleMenuClick(data) {
 			console.log(data);
 		},