diff --git a/src/api/basic/estate/index.js b/src/api/basic/estate/index.js
index 3e90d3f..a9a81f2 100644
--- a/src/api/basic/estate/index.js
+++ b/src/api/basic/estate/index.js
@@ -163,11 +163,20 @@ export function estateTypeDel(params) {
 		data: params,
 	})
 }
-// 
+// 房屋列表级联
 export function estate(params) {
 	return httpService({
 		url: `/user/estate/findEstateCascade`,
 		method: 'get',
 		params: params,
 	})
+}
+
+// 房屋列表级联
+export function findEstateCascade(params) {
+	return httpService({
+		url: `/user/estate/findEstateCascade`,
+		method: 'get',
+		params: params,
+	})
 }
\ No newline at end of file
diff --git a/src/api/payment/payPlan/index.js b/src/api/payment/payPlan/index.js
new file mode 100644
index 0000000..6c421fb
--- /dev/null
+++ b/src/api/payment/payPlan/index.js
@@ -0,0 +1,100 @@
+import httpService from "@/request"
+
+// 手动生成后台账单
+export function manuallyGenerateBills(params) {
+	return httpService({
+		url: `/user/bill/manuallyGenerateBills`,
+		method: 'post',
+		data: params,
+	})
+}
+
+// 自动生成后台账单计划
+export function autoGenerateBills(params) {
+	return httpService({
+		url: `/user/billAuto/autoGenerateBills`,
+		method: 'post',
+		data: params,
+	})
+}
+
+// 后台自动生成账单List
+export function billAutoList(params) {
+	return httpService({
+		url: `/user/billAuto/billAutoList`,
+		method: 'get',
+		params: params,
+	})
+}
+
+// 删除后台自动生成账单计划
+export function deleteAutoGenerateBills(params) {
+	return httpService({
+		url: `/user/billAuto/deleteAutoGenerateBills`,
+		method: 'post',
+		data: params,
+	})
+}
+
+// 生成后台账单自动扣费计划
+export function autoDeductionBills(params) {
+	return httpService({
+		url: `/user/billAutoDeduction/autoDeductionBills`,
+		method: 'post',
+		data: params,
+	})
+}
+
+// 后台自动扣费账单list
+export function getAutoDeductionBills(params) {
+	return httpService({
+		url: `/user/billAutoDeduction/list`,
+		method: 'get',
+		params: params,
+	})
+}
+
+// 删除后台自动扣费账单计划
+export function deleteAutoDeductionBills(params) {
+	return httpService({
+		url: `/user/billAutoDeduction/deleteAutoDeductionBills`,
+		method: 'post',
+		data: params,
+	})
+}
+
+// 根据账单自动生成主键id获取账单自动生成信息
+export function findByIdByBillAutoId(params) {
+	return httpService({
+		url: `/user/billAuto/findByIdByBillAutoId`,
+		method: 'get',
+		params: params,
+	})
+}
+
+// 根据账单自动扣费主键id获取账单自动扣费信息
+export function findById(params) {
+	return httpService({
+		url: `/user/billAutoDeduction/findById`,
+		method: 'get',
+		params: params,
+	})
+}
+
+// 修改自动生成后台账单计划
+export function updateAutoGenerateBills(params) {
+	return httpService({
+		url: `/user/billAuto/updateAutoGenerateBills`,
+		method: 'post',
+		data: params,
+	})
+}
+
+// 修改自动扣费后台账单计划
+export function updateAutoDeductionBills(params) {
+	return httpService({
+		url: `/user/billAutoDeduction/updateAutoDeductionBills`,
+		method: 'post',
+		data: params,
+	})
+}
\ No newline at end of file
diff --git a/src/views/Payment/PayPlan/addBillDrawer.vue b/src/views/Payment/PayPlan/addBillDrawer.vue
new file mode 100644
index 0000000..51addc1
--- /dev/null
+++ b/src/views/Payment/PayPlan/addBillDrawer.vue
@@ -0,0 +1,167 @@
+<template>
+    <a-drawer title="添加手动生成账单" :width="820" :visible="isVisibleDrawer" :body-style="{ paddingBottom: '80px' }" @close="onClose">
+        <div class="drawer-content">
+            <div style="display: flex">
+                <div class="inner-content">
+                    <a-tree v-model="checkedKeys" :selected-keys="form.estateIds" 
+                    :selectable="false" :tree-data="roomTreeData" checkable checkStrictly :replace-fields="replaceFields"></a-tree>
+                </div>
+                <div class="inner-content">
+                    <a-table :data-source="tableData" :columns="columns" :pagination="false"
+                        :row-selection="{
+                            selectedRowKeys: this.form.chargesIds,
+                            onChange: selectionChoosed,
+                        }"
+                        :row-key="
+                            (record, index) => {
+                            return record.id;
+                            }
+                        ">
+                        <template slot="title">
+                            <span style="font-weight: 600">收费标准</span>
+                        </template>
+                    </a-table>
+                    <a-form-model title="基础信息">
+                        <a-row>
+                            <a-col :span="24">
+                                <a-form-model-item label="账单名称">
+                                    <a-input v-model="form.name"></a-input>
+                                </a-form-model-item>
+                            </a-col>
+                            <a-col :span="24">
+                                <a-form-model-item label="选择时间">
+                                    <a-range-picker v-model="selTime"  @change="timeChange" value-format="YYYY-MM-DD HH:mm:ss"></a-range-picker>
+                                </a-form-model-item>
+                            </a-col>
+                        </a-row>
+                    </a-form-model>
+                </div>
+            </div>
+        </div>
+        <div class="drawer-footer">
+            <a-button :style="{ marginRight: '8px' }" @click="onClose">
+                关闭
+            </a-button>
+            <a-button type="primary" @click="onSubmit"> 提交 </a-button>
+        </div>
+    </a-drawer>
+</template>
+
+<script>
+import {findEstateCascade} from "@/api/basic/estate"
+import { chargesList } from "@/api/payment/chargeStandardManage";
+import { manuallyGenerateBills } from "@/api/payment/payPlan"
+export default {
+    name: 'addBillDrawer',
+    props: {
+		visible: Boolean,
+	},
+    watch: {
+		visible: {
+			handler(newValue) {
+				this.isVisibleDrawer = newValue;
+			},
+			immediate: true,
+		},
+        checkedKeys(val) {
+            this.form.estateIds = val.checked;
+        },
+	},
+    mounted() {
+        this.getApi()  
+    },
+    data() {
+        return {
+            form: {
+                estateIds: [],
+                chargesIds: [],
+                name: '',
+                billDateStart: '',
+                billDateEnd: '',
+            },
+            isVisibleDrawer: false,
+            roomTreeData: [],
+            replaceFields: {
+                children: 'childList',
+                title: 'name',
+                key: 'id'
+            },
+            checkedKeys: [],
+            //收费标准
+            tableData: [],
+            columns: [
+                {title: "费用名称", dataIndex: "name"},
+                {title: "计费方式", dataIndex: "billingType"},
+                {title: "计量方式", dataIndex: "calculateType"},
+                {title: "计量单价", dataIndex: "calculateUnit"},
+                {title: "备注", dataIndex: "remarks"},
+            ],
+            selTime: []
+        }
+    },
+    methods: {
+        getApi() {
+            findEstateCascade().then(res => {
+                let data = res.data;
+                data.forEach(ele => {
+                    ele.childList.forEach(el => {
+                        el.checkable = false
+                    });
+                    ele.checkable = false
+                })
+                this.roomTreeData = data
+            });
+            chargesList({pageNum: 1,size: 1000}).then(res => {
+                let data = res.data.rows;
+                this.tableData = data;
+            })
+        },
+        onClose() {
+			this.$emit("onClose");
+		},
+        onCheck(checkedKeys) {
+            this.checkedKeys = checkedKeys.checked;
+        },
+        //收费标准
+        selectionChoosed(data) {
+            this.form.chargesIds = data;
+        },
+        timeChange(val) {
+            this.form.billDateStart = this.selTime[0];
+            this.form.billDateEnd = this.selTime[1];
+        },
+        success(){
+			this.$emit('success')
+		},
+        addClose() {
+            this.onClose();
+            this.form = {
+                estateIds: [],
+                chargesIds: [],
+                name: '',
+                billDateStart: '',
+                billDateEnd: '',
+            };
+            this.checkedKeys = [];
+            this.selTime = []
+        },
+        onSubmit() {
+            manuallyGenerateBills(this.form).then(res => {
+                if(res.code === 200){
+					this.$message.success(res.msg)
+                    this.addClose();
+					this.success()
+				} else {
+					this.$message.error(res.msg)
+				}
+            })
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.inner-content {
+    padding :8px 8px 8px 16px
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Payment/PayPlan/autoBillDrawer.vue b/src/views/Payment/PayPlan/autoBillDrawer.vue
new file mode 100644
index 0000000..7fac4f1
--- /dev/null
+++ b/src/views/Payment/PayPlan/autoBillDrawer.vue
@@ -0,0 +1,198 @@
+<template>
+    <a-drawer title="添加自动生成账单计划" :width="820" :visible="isVisibleDrawer" :body-style="{ paddingBottom: '80px' }" @close="onClose">
+        <div class="drawer-content">
+            <div style="display: flex">
+                <div class="inner-content">
+                    <a-tree v-model="checkedKeys" :selected-keys="form.estateIds" 
+                    :selectable="false" :tree-data="roomTreeData" checkable checkStrictly :replace-fields="replaceFields"></a-tree>
+                </div>
+                <div class="inner-content">
+                    <a-table :data-source="tableData" :columns="columns" :pagination="false"
+                        :row-selection="{
+                            selectedRowKeys: this.form.chargesIds,
+                            onChange: selectionChoosed,
+                        }"
+                        :row-key="
+                            (record, index) => {
+                            return record.id;
+                            }
+                        ">
+                        <template slot="title">
+                            <span style="font-weight: 600">收费标准</span>
+                        </template>
+                    </a-table>
+                    <a-form-model>
+                        <a-row>
+                            <a-col :span="24">
+                                <a-form-model-item label="账单计划名称">
+                                    <a-input v-model="form.name"></a-input>
+                                </a-form-model-item>
+                            </a-col>
+                            <a-col :span="24">
+                                <a-form-model-item label="生效日期">
+                                    <a-radio-group v-model="form.isLongTermEffective" :options="[{label:'长期生效',value:1},{label:'选择日期',value:2}]"></a-radio-group>
+                                </a-form-model-item>
+                            </a-col>
+                            <a-col :span="24">
+                                <a-form-model-item label="选择计划日期">
+                                    <a-range-picker v-model="selTime"  @change="timeChange" value-format="YYYY-MM-DD HH:mm:ss"></a-range-picker>
+                                </a-form-model-item>
+                            </a-col>
+                            <a-col :span="8">
+                                <a-form-model-item label="扣费时间">
+                                    <a-select v-model="form.billDateStart">
+                                        <a-select-option :value="1">每月第一天</a-select-option>
+                                        <a-select-option :value="2">每月最后一天</a-select-option>
+                                    </a-select>
+                                </a-form-model-item>
+                            </a-col>
+                            <a-col :span="8">
+                                <a-form-model-item label="提前/延长">
+                                    <a-select v-model="form.billDateType">
+                                        <a-select-option :value="1">提前</a-select-option>
+                                        <a-select-option :value="2">延长</a-select-option>
+                                    </a-select>
+                                </a-form-model-item>
+                            </a-col>
+                            <a-col :span="8">
+                                <a-form-model-item label="天数">
+                                    <a-input-number v-model="form.billDateNum"></a-input-number>天
+                                </a-form-model-item>
+                            </a-col>
+                        </a-row>
+                    </a-form-model>
+                </div>
+            </div>
+        </div>
+        <div class="drawer-footer">
+            <a-button :style="{ marginRight: '8px' }" @click="onClose">
+                关闭
+            </a-button>
+            <a-button type="primary" @click="onSubmit"> 提交 </a-button>
+        </div>
+    </a-drawer>
+</template>
+
+<script>
+import {findEstateCascade} from "@/api/basic/estate"
+import { chargesList } from "@/api/payment/chargeStandardManage";
+import { autoGenerateBills } from "@/api/payment/payPlan"
+export default {
+    name: 'addBillDrawer',
+    props: {
+		visible: Boolean,
+	},
+    watch: {
+		visible: {
+			handler(newValue) {
+				this.isVisibleDrawer = newValue;
+			},
+			immediate: true,
+		},
+        checkedKeys(val) {
+            this.form.estateIds = val.checked;
+        },
+	},
+    mounted() {
+        this.getApi()  
+    },
+    data() {
+        return {
+            form: {
+                estateIds: [],
+                chargesIds: [],
+                name: '',
+                isLongTermEffective: 1,
+                autoEffectiveDateStart: '-',
+                autoEffectiveDateEnd: '-',
+                billDateStart: 1,
+                billDateType: 1,
+                billDateNum: 0,
+            },
+            isVisibleDrawer: false,
+            roomTreeData: [],
+            replaceFields: {
+                children: 'childList',
+                title: 'name',
+                key: 'id'
+            },
+            checkedKeys: [],
+            //收费标准
+            tableData: [],
+            columns: [
+                {title: "费用名称", dataIndex: "name",width: 100},
+                {title: "计费方式", dataIndex: "billingType",width: 100},
+                {title: "计量方式", dataIndex: "calculateType",width: 100},
+                {title: "计量单价", dataIndex: "calculateUnit",width: 100},
+                {title: "备注", dataIndex: "remarks"},
+            ],
+            selTime: []
+        }
+    },
+    methods: {
+        getApi() {
+            findEstateCascade().then(res => {
+                let data = res.data;
+                data.forEach(ele => {
+                    ele.childList.forEach(el => {
+                        el.checkable = false
+                    });
+                    ele.checkable = false
+                })
+                this.roomTreeData = data
+            });
+            chargesList({pageNum: 1,size: 1000}).then(res => {
+                let data = res.data.rows;
+                this.tableData = data;
+            })
+        },
+        onClose() {
+			this.$emit("onClose");
+		},
+        onCheck(checkedKeys) {
+            this.checkedKeys = checkedKeys.checked;
+        },
+        //收费标准
+        selectionChoosed(data) {
+            this.form.chargesIds = data;
+        },
+        timeChange(val) {
+            this.form.autoEffectiveDateStart = this.selTime[0];
+            this.form.autoEffectiveDateEnd = this.selTime[1];
+        },
+        success(){
+			this.$emit('success')
+		},
+        addClose() {
+            this.onClose();
+            this.form = {
+                estateIds: [],
+                chargesIds: [],
+                name: '',
+                billDateStart: '',
+                billDateEnd: '',
+            };
+            this.checkedKeys = [];
+            this.selTime = []
+        },
+        onSubmit() {
+            console.log(this.form)
+            autoGenerateBills(this.form).then(res => {
+                if(res.code === 200){
+					this.$message.success(res.msg)
+                    this.addClose();
+					this.success()
+				} else {
+					this.$message.error(res.msg)
+				}
+            })
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.inner-content {
+    padding :8px 8px 8px 16px
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Payment/PayPlan/autoBillPaymentDrawer.vue b/src/views/Payment/PayPlan/autoBillPaymentDrawer.vue
new file mode 100644
index 0000000..4158b0e
--- /dev/null
+++ b/src/views/Payment/PayPlan/autoBillPaymentDrawer.vue
@@ -0,0 +1,198 @@
+<template>
+    <a-drawer title="添加账单自动扣费计划" :width="820" :visible="isVisibleDrawer" :body-style="{ paddingBottom: '80px' }" @close="onClose">
+        <div class="drawer-content">
+            <div style="display: flex">
+                <div class="inner-content">
+                    <a-tree v-model="checkedKeys" :selected-keys="form.estateIds" 
+                    :selectable="false" :tree-data="roomTreeData" checkable checkStrictly :replace-fields="replaceFields"></a-tree>
+                </div>
+                <div class="inner-content">
+                    <a-table :data-source="tableData" :columns="columns" :pagination="false"
+                        :row-selection="{
+                            selectedRowKeys: this.form.chargesIds,
+                            onChange: selectionChoosed,
+                        }"
+                        :row-key="
+                            (record, index) => {
+                            return record.id;
+                            }
+                        ">
+                        <template slot="title">
+                            <span style="font-weight: 600">收费标准</span>
+                        </template>
+                    </a-table>
+                    <a-form-model>
+                        <a-row>
+                            <a-col :span="24">
+                                <a-form-model-item label="账单计划名称">
+                                    <a-input v-model="form.name"></a-input>
+                                </a-form-model-item>
+                            </a-col>
+                            <a-col :span="24">
+                                <a-form-model-item label="生效日期">
+                                    <a-radio-group v-model="form.isLongTermEffective" :options="[{label:'长期生效',value:1},{label:'选择日期',value:2}]"></a-radio-group>
+                                </a-form-model-item>
+                            </a-col>
+                            <a-col :span="24">
+                                <a-form-model-item label="选择计划日期">
+                                    <a-range-picker v-model="selTime"  @change="timeChange" value-format="YYYY-MM-DD HH:mm:ss"></a-range-picker>
+                                </a-form-model-item>
+                            </a-col>
+                            <a-col :span="8">
+                                <a-form-model-item label="扣费时间">
+                                    <a-select v-model="form.billDateStart">
+                                        <a-select-option :value="1">每月第一天</a-select-option>
+                                        <a-select-option :value="2">每月最后一天</a-select-option>
+                                    </a-select>
+                                </a-form-model-item>
+                            </a-col>
+                            <a-col :span="8">
+                                <a-form-model-item label="提前/延长">
+                                    <a-select v-model="form.billDateType">
+                                        <a-select-option :value="1">提前</a-select-option>
+                                        <a-select-option :value="2">延长</a-select-option>
+                                    </a-select>
+                                </a-form-model-item>
+                            </a-col>
+                            <a-col :span="8">
+                                <a-form-model-item label="天数">
+                                    <a-input-number v-model="form.billDateNum"></a-input-number>天
+                                </a-form-model-item>
+                            </a-col>
+                        </a-row>
+                    </a-form-model>
+                </div>
+            </div>
+        </div>
+        <div class="drawer-footer">
+            <a-button :style="{ marginRight: '8px' }" @click="onClose">
+                关闭
+            </a-button>
+            <a-button type="primary" @click="onSubmit"> 提交 </a-button>
+        </div>
+    </a-drawer>
+</template>
+
+<script>
+import {findEstateCascade} from "@/api/basic/estate"
+import { chargesList } from "@/api/payment/chargeStandardManage";
+import { autoDeductionBills } from "@/api/payment/payPlan"
+export default {
+    name: 'addBillDrawer',
+    props: {
+		visible: Boolean,
+	},
+    watch: {
+		visible: {
+			handler(newValue) {
+				this.isVisibleDrawer = newValue;
+			},
+			immediate: true,
+		},
+        checkedKeys(val) {
+            this.form.estateIds = val.checked;
+        },
+	},
+    mounted() {
+        this.getApi()  
+    },
+    data() {
+        return {
+            form: {
+                estateIds: [],
+                chargesIds: [],
+                name: '',
+                isLongTermEffective: 1,
+                autoEffectiveDateStart: '',
+                autoEffectiveDateEnd: '',
+                billDateStart: 1,
+                billDateType: 1,
+                billDateNum: 0,
+            },
+            isVisibleDrawer: false,
+            roomTreeData: [],
+            replaceFields: {
+                children: 'childList',
+                title: 'name',
+                key: 'id'
+            },
+            checkedKeys: [],
+            //收费标准
+            tableData: [],
+            columns: [
+                {title: "费用名称", dataIndex: "name",width: 100},
+                {title: "计费方式", dataIndex: "billingType",width: 100},
+                {title: "计量方式", dataIndex: "calculateType",width: 100},
+                {title: "计量单价", dataIndex: "calculateUnit",width: 100},
+                {title: "备注", dataIndex: "remarks"},
+            ],
+            selTime: []
+        }
+    },
+    methods: {
+        getApi() {
+            findEstateCascade().then(res => {
+                let data = res.data;
+                data.forEach(ele => {
+                    ele.childList.forEach(el => {
+                        el.checkable = false
+                    });
+                    ele.checkable = false
+                })
+                this.roomTreeData = data
+            });
+            chargesList({pageNum: 1,size: 1000}).then(res => {
+                let data = res.data.rows;
+                this.tableData = data;
+            })
+        },
+        onClose() {
+			this.$emit("onClose");
+		},
+        onCheck(checkedKeys) {
+            this.checkedKeys = checkedKeys.checked;
+        },
+        //收费标准
+        selectionChoosed(data) {
+            this.form.chargesIds = data;
+        },
+        timeChange(val) {
+            this.form.autoEffectiveDateStart = this.selTime[0];
+            this.form.autoEffectiveDateEnd = this.selTime[1];
+        },
+        success(){
+			this.$emit('success')
+		},
+        addClose() {
+            this.onClose();
+            this.form = {
+                estateIds: [],
+                chargesIds: [],
+                name: '',
+                billDateStart: '',
+                billDateEnd: '',
+            };
+            this.checkedKeys = [];
+            this.selTime = []
+        },
+        onSubmit() {
+            console.log(this.form)
+            autoDeductionBills(this.form).then(res => {
+                if(res.code === 200){
+					this.$message.success(res.msg)
+                    this.addClose();
+					this.success()
+				} else {
+					this.$message.error(res.msg)
+				}
+            })
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.inner-content {
+    padding :8px 8px 8px 16px
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Payment/PayPlan/index.vue b/src/views/Payment/PayPlan/index.vue
index 809a7d4..3eb60bb 100644
--- a/src/views/Payment/PayPlan/index.vue
+++ b/src/views/Payment/PayPlan/index.vue
@@ -1,20 +1,178 @@
 <template>
   <div>
 	  <div class="cardTitle">缴费计划</div>
+    <a-tabs v-model="activeMode">
+      <a-tab-pane :key="1" tab="手动生成账单"> </a-tab-pane>
+      <a-tab-pane :key="2" tab="自动生成账单"> </a-tab-pane>
+      <a-tab-pane :key="3" tab="账单自动扣费"> </a-tab-pane>
+    </a-tabs>
     <searchForm :formItem="formItem" @getSearch="search($event)"></searchForm>
-    <a-table :columns="columns" :data-source="tableData">
-
+    <a-button type="danger" style="margin: 10px" @click="multipleDel"><a-icon type="delete" />批量删除</a-button>
+    <a-button style="margin: 10px" class="add-btn" @click="addBill"><a-icon type="plus" />添加</a-button>
+    <a-table v-if="activeMode==2" :columns="columns" :data-source="tableData" :pagination="pagination" @change="pageChange" 
+      :row-selection="{
+        selectedRowKeys: table2Keys,
+        onChange: table2Change,
+      }"
+      :row-key="
+        (record, index) => {
+          return record.id;
+        }
+      ">
+      <span slot="action" slot-scope="text, record">
+        <a @click="onEdit(record)">编辑</a><a style="color: red;margin-left: 8px" @click="onDel(record)">删除</a>
+      </span>
     </a-table>
+    <a-table v-if="activeMode==3" :columns="columns" :data-source="tableData2" :pagination="pagination2" @change="pageChange2"
+      :row-selection="{
+        selectedRowKeys: table3Keys,
+        onChange: table3Change,
+      }"
+      :row-key="
+        (record, index) => {
+          return record.id;
+        }
+      ">
+      <span slot="action" slot-scope="text, record">
+        <a @click="onEdit(record)">编辑</a><a style="color: red;margin-left: 8px" @click="onDel(record)">删除</a>
+      </span>
+    </a-table>
+    <add-bill-drawer v-if="activeMode==1" :visible="addShow" @success="success" @onClose="addClose"></add-bill-drawer>
+    <auto-bill-drawer v-else-if="activeMode==2" :visible="addShow" @success="success" @onClose="addClose"></auto-bill-drawer>
+    <auto-bill-payment-drawer v-else-if="activeMode==3" :visible="addShow" @success="success" @onClose="addClose"></auto-bill-payment-drawer>
+    <a-drawer title="编辑" :width="820" :visible="editShow" :body-style="{ paddingBottom: '80px' }" @close="editClose">
+      <div class="drawer-content">
+            <div style="display: flex">
+                <div class="inner-content">
+                    <div style="font-weight: 600">选择房屋</div>
+                    <a-tree v-model="form.estateIds"
+                    :selectable="false" :tree-data="roomTreeData" defaultExpandAll checkable checkStrictly :replace-fields="replaceFields">
+                    </a-tree>
+                </div>
+                <div class="inner-content">
+                    <a-table :data-source="editTableData" :columns="editColumns" :pagination="false"
+                        :row-selection="{
+                            selectedRowKeys: this.form.chargesIds,
+                            onChange: selectionChoosed,
+                        }"
+                        :row-key="
+                            (record, index) => {
+                            return record.id;
+                            }
+                        ">
+                        <template slot="title">
+                            <span style="font-weight: 600">收费标准</span>
+                        </template>
+                    </a-table>
+                    <a-form-model>
+                        <a-row>
+                            <a-col :span="24">
+                                <a-form-model-item label="账单计划名称">
+                                    <a-input v-model="form.name"></a-input>
+                                </a-form-model-item>
+                            </a-col>
+                            <a-col :span="24">
+                                <a-form-model-item label="生效日期">
+                                    <a-radio-group v-model="form.isLongTermEffective" :options="[{label:'长期生效',value:1},{label:'选择日期',value:2}]"></a-radio-group>
+                                </a-form-model-item>
+                            </a-col>
+                            <a-col :span="24">
+                                <a-form-model-item label="选择计划日期">
+                                    <a-range-picker style="width: 400px" v-model="selTime"  @change="timeChange" value-format="YYYY-MM-DD HH:mm:ss"></a-range-picker>
+                                </a-form-model-item>
+                            </a-col>
+                            <a-col :span="8">
+                                <a-form-model-item label="扣费时间">
+                                    <a-select v-model="form.billDateStart">
+                                        <a-select-option :value="1">每月第一天</a-select-option>
+                                        <a-select-option :value="2">每月最后一天</a-select-option>
+                                    </a-select>
+                                </a-form-model-item>
+                            </a-col>
+                            <a-col :span="8">
+                                <a-form-model-item label="提前/延长">
+                                    <a-select v-model="form.billDateType">
+                                        <a-select-option :value="1">提前</a-select-option>
+                                        <a-select-option :value="2">延长</a-select-option>
+                                    </a-select>
+                                </a-form-model-item>
+                            </a-col>
+                            <a-col :span="8">
+                                <a-form-model-item label="天数">
+                                    <a-input-number v-model="form.billDateNum"></a-input-number>天
+                                </a-form-model-item>
+                            </a-col>
+                        </a-row>
+                    </a-form-model>
+                </div>
+            </div>
+        </div>
+        <div class="drawer-footer">
+            <a-button :style="{ marginRight: '8px' }" @click="editClose">
+                关闭
+            </a-button>
+            <a-button type="primary" @click="editSubmit"> 提交 </a-button>
+        </div>
+    </a-drawer>
   </div>
 </template>
 
 <script>
+import addBillDrawer from "../PayPlan/addBillDrawer.vue"
+import autoBillDrawer from "../PayPlan/autoBillDrawer.vue"
+import autoBillPaymentDrawer from "../PayPlan/autoBillPaymentDrawer.vue"
+import {findEstateCascade} from "@/api/basic/estate" //api
+import { chargesList } from "@/api/payment/chargeStandardManage"; //api
+import {billAutoList, getAutoDeductionBills} from "@/api/payment/payPlan" //查
+import {deleteAutoGenerateBills, deleteAutoDeductionBills} from "@/api/payment/payPlan" //删
+import {updateAutoGenerateBills, updateAutoDeductionBills} from "@/api/payment/payPlan" //改
+import {findByIdByBillAutoId, findById} from "@/api/payment/payPlan" //回调
 export default {
     name: 'payPlay',
+    components: {
+      addBillDrawer,
+      autoBillDrawer,
+      autoBillPaymentDrawer
+    },
+    watch: {
+        checkedKeys(val) {
+            this.form.estateIds = val.checked;
+        },
+    },
     data() {
         return {
+            //编辑抽屉
+            form: {
+                id: undefined,
+                estateIds: [],
+                chargesIds: [],
+                name: '',
+                isLongTermEffective: 1,
+                autoEffectiveDateStart: '',
+                autoEffectiveDateEnd: '',
+                billDateStart: 1,
+                billDateType: 1,
+                billDateNum: 0,
+            },
+            checkedKeys: [],
+            selTime: [,],
+            editTableData: [],
+            roomTreeData: [],
+            replaceFields: {
+                children: 'childList',
+                title: 'name',
+                key: 'id'
+            },
+            editColumns: [
+                {title: "费用名称", dataIndex: "name",width: 100},
+                {title: "计费方式", dataIndex: "billingType",width: 100},
+                {title: "计量方式", dataIndex: "calculateType",width: 100},
+                {title: "计量单价", dataIndex: "calculateUnit",width: 100},
+                {title: "备注", dataIndex: "remarks"},
+            ],
+            ////////
             searchForm: {
-              
+              name: ''
             },
             formItem: [
                 {
@@ -24,8 +182,43 @@ export default {
                     placeholder:'请输入'
                 },
             ],
-            columns: [],
+            columns: [
+                {title: "账单名称", dataIndex: "name", width: 240},
+                {title: "计划有效时间开始", dataIndex: "autoEffectiveDateStart", width: 240},
+                {title: "计划有效时间结束", dataIndex: "autoEffectiveDateEnd", width: 240},
+                {title: "账单生成时间", dataIndex: "billDateStart", width: 176,
+                customRender: function (billDateStart) {
+                  switch (billDateStart) {
+                  case 1:
+                    return "每月第一天";
+                  case 2:
+                    return "每月最后一天";
+                  default:
+                    break;
+                  }
+                },},
+                {title: "账单生成时间类型", dataIndex: "billDateType", width: 180,
+                customRender: function (billDateType) {
+                  switch (billDateType) {
+                  case 1:
+                    return "提前";
+                  case 2:
+                    return "延长";
+                  default:
+                    break;
+                  }
+                },},
+                {title: "账单生成时间天数", dataIndex: "billDateNum"},
+                { title: "操作",
+                  dataIndex: "action",
+                  key: "action",
+                  width: "180",
+                  fixed: "right",
+                  scopedSlots: { customRender: "action" },
+                },
+            ],
             tableData: [],
+            tableData2: [],
             pagination: {
                 current: 1,
                 total: 0,
@@ -33,21 +226,199 @@ export default {
                 showTotal: (total) => `共 ${total} 条`,
                 showSizeChanger: true,
                 showQuickJumper: true,
-            }
+            },
+            pagination2: {
+                current: 1,
+                total: 0,
+                pageSize: 10,
+                showTotal: (total) => `共 ${total} 条`,
+                showSizeChanger: true,
+                showQuickJumper: true,
+            },
+            table2Keys: [],
+            table3Keys: [],
+            activeMode: 1,
+            //手动生成账单
+            addShow: false,
+            editShow: false,
         }
     },
+    created() {
+      this.getApi()
+      this.getData()
+    },
     methods: {
+        getApi() {
+            findEstateCascade().then(res => {
+                let data = res.data;
+                data.forEach(ele => {
+                    ele.childList.forEach(el => {
+                        el.checkable = false
+                    });
+                    ele.checkable = false
+                })
+                this.roomTreeData = data
+            });
+            chargesList({pageNum: 1,size: 1000}).then(res => {
+                let data = res.data.rows;
+                this.editTableData = data;
+            })
+        },
         getData() {
-          let obj = {}
+          let obj = Object.assign(this.searchForm, {size: this.pagination.pageSize,pageNum: this.pagination.current})
+          billAutoList(obj).then(res => {
+            this.tableData = res.data.rows;
+            this.pagination.total = res.data.total;
+          })
+          getAutoDeductionBills(obj).then(res => {
+            this.tableData2 = res.data.rows;
+            this.pagination2.total = res.data.total;
+          })
         },
         search(data) {
             this.searchForm = data;
             this.getData()
         },
+        success() {
+          this.getData();
+        },
+        //手动生成账单
+        addBill() {
+          this.addShow = true
+        },
+        addClose() {
+          this.addShow = false
+        },
+        //分页
+        pageChange(val) {
+          this.pagination = val
+          this.getData()
+        },
+        pageChange2(val) {
+          this.pagination = val
+          this.getData()
+        },
+        //点击编辑的回调
+        onEdit(val) {
+          this.editShow = true
+          if(this.activeMode == 2) {
+            let obj = {billAutoId : val.id}
+            findByIdByBillAutoId(obj).then(res => {
+              let data = res.data;
+              this.form = data;
+              this.selTime = [res.data.autoEffectiveDateStart,res.data.autoEffectiveDateEnd]
+            })
+          } else if(this.activeMode == 3) {
+            let obj = {billAutoDeductionId : val.id}
+            findById(obj).then(res => {
+              let data = res.data;
+              this.form = data;
+              this.selTime = [res.data.autoEffectiveDateStart,res.data.autoEffectiveDateEnd]
+            })
+          }
+        },
+        editClose() {
+          this.editShow = false
+        },
+        editSubmit() {
+          let obj = this.form;
+          if(obj.estateIds.checked) {
+            obj.estateIds = obj.estateIds.checked;
+          }
+          // console.log(obj)
+          if(this.activeMode == 2) {
+            updateAutoGenerateBills(obj).then(res => {
+              if(res.code === 200){
+                  this.$message.success(res.msg);
+                  this.editShow = false;
+                  this.getData()
+              } else {
+                  this.$message.error(res.msg);
+              }
+            })
+          } else if (this.activeMode == 3) {
+            updateAutoDeductionBills(obj).then(res => {
+              if(res.code === 200){
+                  this.$message.success(res.msg);
+                  this.editShow = false;
+                  this.getData()
+              } else {
+                  this.$message.error(res.msg);
+              }
+            })
+          }
+        },
+        timeChange() {
+            this.form.autoEffectiveDateStart = this.selTime[0];
+            this.form.autoEffectiveDateEnd = this.selTime[1];
+        },
+        selectionChoosed(data) {
+            this.form.chargesIds = data;
+        },
+        table2Change(data) {
+            this.table2Keys = data;
+        },
+        table3Change(data) {
+            this.table3Keys = data;
+        },
+        //删除
+        onDel(val) {
+          this.$confirm({
+            title: "是否删除",
+            icon:'close',
+            onOk:async()=>{
+              if(this.activeMode == 2) {
+                let res = await deleteAutoGenerateBills({billAutoIds: [val.id]});
+                if(res.code === 200){
+                  this.$message.success(res.msg);
+                  this.getData()
+                } else {
+                  this.$message.error(res.msg);
+                }
+              } else if (this.activeMode == 3) {
+                let res = await deleteAutoDeductionBills({billAutoDeductionIds: [val.id]});
+                if(res.code === 200){
+                  this.$message.success(res.msg);
+                  this.getData()
+                } else {
+                  this.$message.error(res.msg);
+                }
+              }
+            },
+          })
+        },
+        //批量删除
+        multipleDel() {
+          this.$confirm({
+            title: "是否删除",
+            icon:'close',
+            onOk:async()=>{
+              if(this.activeMode == 2) {
+                let res = await deleteAutoGenerateBills({billAutoIds: this.table2Keys});
+                if(res.code === 200){
+                  this.$message.success(res.msg);
+                  this.getData()
+                } else {
+                  this.$message.error(res.msg);
+                }
+              } else if (this.activeMode == 3) {
+                let res = await deleteAutoDeductionBills({billAutoDeductionIds: this.table3Keys});
+                if(res.code === 200){
+                  this.$message.success(res.msg);
+                  this.getData()
+                } else {
+                  this.$message.error(res.msg);
+                }
+              }
+            },
+          })
+        }
     }
 }
 </script>
 
-<style>
-
+<style lang="less">
+.inner-content {
+    padding :8px 8px 8px 16px
+}
 </style>
\ No newline at end of file