From f61bd6e8e4c3243544baca8a00a4f0a334c5ea87 Mon Sep 17 00:00:00 2001
From: wuxw <928255095@qq.com>
Date: Mon, 30 Jun 2025 22:53:44 +0800
Subject: [PATCH] 费用下功能基本搞定

---
 src/api/fee/addOweFeeCallableApi.js         | 101 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/api/fee/feeApi.js                       |  17 +++++++++++++++++
 src/api/fee/feeSummaryApi.js                |  33 +++++++++++++++++++++++++++++++++
 src/api/fee/listOweFeeApi.js                | 108 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/api/fee/oweFeeCallableApi.js            | 120 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/api/fee/payFeeBatchApi.js               |  53 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/api/fee/staffFeeManageApi.js            |  33 +++++++++++++++++++++++++++++++++
 src/components/fee/applyDeleteFeeBatch.vue  | 111 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/fee/audit.vue                |  95 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------------
 src/components/fee/deleteOweFeeCallable.vue |  61 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/fee/roomTreeDiv.vue          | 151 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/fee/searchFloor.vue          | 187 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/fee/writeOweFeeCallable.vue  |  97 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/i18n/feeI18n.js                         |  18 ++++++++++++++++++
 src/router/feeRouter.js                     |  30 ++++++++++++++++++++++++++++++
 src/views/fee/addOweFeeCallableLang.js      |  48 ++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/fee/addOweFeeCallableList.vue     | 355 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/fee/feeComboMemberManageList.vue  |  72 +++++++++++++-----------------------------------------------------------
 src/views/fee/feeSummaryLang.js             |  32 ++++++++++++++++++++++++++++++++
 src/views/fee/feeSummaryList.vue            | 137 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/fee/listOweFeeLang.js             |  92 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/fee/listOweFeeList.vue            | 417 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/fee/meterWaterManageList.vue      |   2 +-
 src/views/fee/oweFeeCallableLang.js         | 106 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/fee/oweFeeCallableList.vue        | 256 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/fee/payFeeBatchLang.js            | 150 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/fee/payFeeBatchList.vue           | 197 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/fee/staffFeeManageLang.js         |  50 ++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/fee/staffFeeManageList.vue        | 194 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 29 files changed, 3224 insertions(+), 99 deletions(-)
 create mode 100644 src/api/fee/addOweFeeCallableApi.js
 create mode 100644 src/api/fee/feeApi.js
 create mode 100644 src/api/fee/feeSummaryApi.js
 create mode 100644 src/api/fee/listOweFeeApi.js
 create mode 100644 src/api/fee/oweFeeCallableApi.js
 create mode 100644 src/api/fee/payFeeBatchApi.js
 create mode 100644 src/api/fee/staffFeeManageApi.js
 create mode 100644 src/components/fee/applyDeleteFeeBatch.vue
 create mode 100644 src/components/fee/deleteOweFeeCallable.vue
 create mode 100644 src/components/fee/roomTreeDiv.vue
 create mode 100644 src/components/fee/searchFloor.vue
 create mode 100644 src/components/fee/writeOweFeeCallable.vue
 create mode 100644 src/views/fee/addOweFeeCallableLang.js
 create mode 100644 src/views/fee/addOweFeeCallableList.vue
 create mode 100644 src/views/fee/feeSummaryLang.js
 create mode 100644 src/views/fee/feeSummaryList.vue
 create mode 100644 src/views/fee/listOweFeeLang.js
 create mode 100644 src/views/fee/listOweFeeList.vue
 create mode 100644 src/views/fee/oweFeeCallableLang.js
 create mode 100644 src/views/fee/oweFeeCallableList.vue
 create mode 100644 src/views/fee/payFeeBatchLang.js
 create mode 100644 src/views/fee/payFeeBatchList.vue
 create mode 100644 src/views/fee/staffFeeManageLang.js
 create mode 100644 src/views/fee/staffFeeManageList.vue

diff --git a/src/api/fee/addOweFeeCallableApi.js b/src/api/fee/addOweFeeCallableApi.js
new file mode 100644
index 0000000..29f1b40
--- /dev/null
+++ b/src/api/fee/addOweFeeCallableApi.js
@@ -0,0 +1,101 @@
+import request from '@/utils/request'
+
+// 保存催缴欠费
+export function saveOweFeeCallable(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/oweFeeCallable.saveOweFeeCallable',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 导出催缴函Excel
+export function exportCollectionLetterExcel(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/export.exportData',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取费用配置列表
+export function listFeeConfigs(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feeConfig.listFeeConfigs',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询楼栋列表
+export function queryFloors(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/floor.queryFloors',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询欠费房屋报表
+export function queryReportOweFee(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reportOweFee/queryReportOweFee',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/fee/feeApi.js b/src/api/fee/feeApi.js
new file mode 100644
index 0000000..e56fe66
--- /dev/null
+++ b/src/api/fee/feeApi.js
@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+// 查询费用列表
+export function listFee(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.listFee',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+        resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
diff --git a/src/api/fee/feeSummaryApi.js b/src/api/fee/feeSummaryApi.js
new file mode 100644
index 0000000..c8dff90
--- /dev/null
+++ b/src/api/fee/feeSummaryApi.js
@@ -0,0 +1,33 @@
+import request from '@/utils/request'
+
+// 获取缴费汇总列表
+export function listFeeSummarys(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/callComponent/feeSummary/list',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 导出Excel
+export function exportFeeSummary(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feeSummary/export',
+      method: 'get',
+      params,
+      responseType: 'blob'
+    }).then(response => {
+      resolve(response)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/fee/listOweFeeApi.js b/src/api/fee/listOweFeeApi.js
new file mode 100644
index 0000000..1c14e50
--- /dev/null
+++ b/src/api/fee/listOweFeeApi.js
@@ -0,0 +1,108 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 查询欠费信息
+export function queryReportOweFee(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reportOweFee/queryReportOweFee',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: params.communityId || getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve({
+        data: res.data,
+        total: res.total,
+        records: res.records
+      })
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询收费项列表
+export function listFeeConfigs(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feeConfig.listFeeConfigs',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: params.communityId || getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve({
+        data: res.feeConfigs
+      })
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询楼栋列表
+export function queryFloors(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/floor.queryFloors',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: params.communityId || getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve({
+        data: res.apiFloorDataVoList,
+        total: res.records
+      })
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询单元列表
+export function queryUnits(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/unit.queryUnits',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: params.communityId || getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve({
+        data: res
+      })
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 导出数据
+export function exportData(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/export.exportData',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: params.communityId || getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/fee/oweFeeCallableApi.js b/src/api/fee/oweFeeCallableApi.js
new file mode 100644
index 0000000..a377f02
--- /dev/null
+++ b/src/api/fee/oweFeeCallableApi.js
@@ -0,0 +1,120 @@
+import request from '@/utils/request'
+
+/**
+ * 获取欠费催缴列表
+ * @param {Object} params 查询参数
+ * @returns {Promise} 
+ */
+export function listOweFeeCallable(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/oweFeeCallable.listOweFeeCallable',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve({
+        data: res.data,
+        total: res.total
+      })
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 登记欠费催缴
+ * @param {Object} data 登记数据
+ * @returns {Promise}
+ */
+export function writeOweFeeCallable(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/oweFeeCallable.writeOweFeeCallable',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 删除欠费催缴记录
+ * @param {Object} data 删除数据
+ * @returns {Promise}
+ */
+export function deleteOweFeeCallable(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/oweFeeCallable.deleteOweFeeCallable',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 获取欠费催缴详情
+ * @param {String} ofcId 催缴ID
+ * @returns {Promise}
+ */
+export function getOweFeeCallableDetail(ofcId) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/oweFeeCallable.getOweFeeCallable',
+      method: 'get',
+      params: { ofcId }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res.data)
+      } else {
+        reject(new Error(res.msg))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 更新欠费催缴状态
+ * @param {Object} data 更新数据
+ * @returns {Promise}
+ */
+export function updateOweFeeCallableState(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/oweFeeCallable.updateOweFeeCallableState',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/fee/payFeeBatchApi.js b/src/api/fee/payFeeBatchApi.js
new file mode 100644
index 0000000..768b0bb
--- /dev/null
+++ b/src/api/fee/payFeeBatchApi.js
@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 获取费用批次列表
+export function listPayFeeBatch(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/payFeeBatch.listPayFeeBatch',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 申请取消费用批次
+export function applyDeletePayFeeBatch(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/payFeeBatch.applyDeletePayFeeBatchCmd',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 更新费用批次状态
+export function updatePayFeeBatch(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/payFeeBatch.updatePayFeeBatch',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/fee/staffFeeManageApi.js b/src/api/fee/staffFeeManageApi.js
new file mode 100644
index 0000000..78b451f
--- /dev/null
+++ b/src/api/fee/staffFeeManageApi.js
@@ -0,0 +1,33 @@
+import request from '@/utils/request'
+
+// 获取员工收费列表
+export function getStaffFeeList(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/api.getStaffFee',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 导出员工收费数据
+export function exportStaffFee(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/callComponent/exportReportFee/exportData',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/components/fee/applyDeleteFeeBatch.vue b/src/components/fee/applyDeleteFeeBatch.vue
new file mode 100644
index 0000000..b0cd2f1
--- /dev/null
+++ b/src/components/fee/applyDeleteFeeBatch.vue
@@ -0,0 +1,111 @@
+<template>
+  <el-dialog
+    :title="$t('applyDeleteFeeBatch.title')"
+    :visible.sync="visible"
+    width="50%"
+    @close="handleClose"
+  >
+    <el-form
+      ref="form"
+      :model="formData"
+      label-width="120px"
+      label-position="right"
+    >
+      <el-form-item :label="$t('applyDeleteFeeBatch.form.batchId')">
+        <el-input
+          v-model="formData.batchId"
+          disabled
+        />
+      </el-form-item>
+      <el-form-item :label="$t('applyDeleteFeeBatch.form.createUserName')">
+        <el-input
+          v-model="formData.createUserName"
+          disabled
+        />
+      </el-form-item>
+      <el-form-item :label="$t('applyDeleteFeeBatch.form.createTime')">
+        <el-input
+          v-model="formData.createTime"
+          disabled
+        />
+      </el-form-item>
+      <el-form-item
+        :label="$t('applyDeleteFeeBatch.form.remark')"
+        prop="remark"
+        :rules="[
+          { required: true, message: $t('applyDeleteFeeBatch.rules.remarkRequired'), trigger: 'blur' }
+        ]"
+      >
+        <el-input
+          v-model="formData.remark"
+          type="textarea"
+          :rows="3"
+          :placeholder="$t('applyDeleteFeeBatch.placeholder.remark')"
+        />
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('common.cancel') }}
+      </el-button>
+      <el-button type="primary" @click="handleSubmit">
+        {{ $t('common.save') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { applyDeletePayFeeBatch } from '@/api/fee/payFeeBatchApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'ApplyDeleteFeeBatch',
+  data() {
+    return {
+      visible: false,
+      formData: {
+        batchId: '',
+        createUserName: '',
+        createTime: '',
+        remark: '',
+        communityId: ''
+      }
+    }
+  },
+  methods: {
+    open(data) {
+      this.resetForm()
+      Object.assign(this.formData, data)
+      this.formData.communityId = getCommunityId()
+      this.visible = true
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+    },
+    resetForm() {
+      this.formData = {
+        batchId: '',
+        createUserName: '',
+        createTime: '',
+        remark: '',
+        communityId: ''
+      }
+    },
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            await applyDeletePayFeeBatch(this.formData)
+            this.$message.success(this.$t('applyDeleteFeeBatch.message.success'))
+            this.visible = false
+            this.$emit('success')
+          } catch (error) {
+            console.error('申请取消失败:', error)
+          }
+        }
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/audit.vue b/src/components/fee/audit.vue
index 86df773..f6496b8 100644
--- a/src/components/fee/audit.vue
+++ b/src/components/fee/audit.vue
@@ -1,89 +1,106 @@
 <template>
   <el-dialog
-    :title="$t('audit.auditInfo')"
+    :title="$t('audit.title')"
     :visible.sync="visible"
     width="50%"
     @close="handleClose"
   >
-    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
-      <el-form-item :label="$t('audit.auditStatus')" prop="state">
-        <el-select 
-          v-model="form.state" 
-          :placeholder="$t('audit.selectAudit')"
+    <el-form
+      ref="form"
+      :model="formData"
+      label-width="120px"
+      label-position="right"
+    >
+      <el-form-item
+        :label="$t('audit.form.state')"
+        prop="state"
+        :rules="[
+          { required: true, message: $t('audit.rules.stateRequired'), trigger: 'change' }
+        ]"
+      >
+        <el-select
+          v-model="formData.state"
+          :placeholder="$t('audit.placeholder.state')"
           style="width:100%"
-          @change="handleStatusChange"
+          @change="handleStateChange"
         >
-          <el-option 
-            :label="$t('audit.agree')" 
+          <el-option
+            :label="$t('audit.state.agree')"
             value="1100"
           />
-          <el-option 
-            :label="$t('audit.reject')" 
+          <el-option
+            :label="$t('audit.state.reject')"
             value="1200"
           />
         </el-select>
       </el-form-item>
-      <el-form-item :label="$t('audit.reason')" prop="remark">
+      <el-form-item
+        :label="$t('audit.form.remark')"
+        prop="remark"
+        :rules="[
+          { required: true, message: $t('audit.rules.remarkRequired'), trigger: 'blur' },
+          { max: 200, message: $t('audit.rules.remarkMaxLength'), trigger: 'blur' }
+        ]"
+      >
         <el-input
-          v-model="form.remark"
+          v-model="formData.remark"
           type="textarea"
-          :rows="4"
-          :placeholder="$t('audit.inputReason')"
+          :rows="3"
+          :placeholder="$t('audit.placeholder.remark')"
         />
       </el-form-item>
     </el-form>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="visible = false">{{ $t('common.cancel') }}</el-button>
-      <el-button type="primary" @click="handleSubmit">{{ $t('common.submit') }}</el-button>
-    </span>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('common.cancel') }}
+      </el-button>
+      <el-button type="primary" @click="handleSubmit">
+        {{ $t('common.submit') }}
+      </el-button>
+    </div>
   </el-dialog>
 </template>
 
 <script>
 export default {
-  name: 'AuditModal',
+  name: 'Audit',
   data() {
     return {
       visible: false,
-      form: {
+      formData: {
         state: '',
         remark: ''
-      },
-      rules: {
-        state: [
-          { required: true, message: this.$t('audit.stateRequired'), trigger: 'change' }
-        ],
-        remark: [
-          { required: true, message: this.$t('audit.reasonRequired'), trigger: 'blur' },
-          { max: 200, message: this.$t('audit.reasonMaxLength'), trigger: 'blur' }
-        ]
       }
     }
   },
   methods: {
     open() {
+      this.resetForm()
       this.visible = true
     },
     handleClose() {
       this.$refs.form.resetFields()
     },
-    handleStatusChange(val) {
+    resetForm() {
+      this.formData = {
+        state: '',
+        remark: ''
+      }
+    },
+    handleStateChange(val) {
       if (val === '1100') {
-        this.form.remark = this.$t('audit.agree')
+        this.formData.remark = this.$t('audit.state.agree')
       } else {
-        this.form.remark = ''
+        this.formData.remark = ''
       }
     },
     handleSubmit() {
       this.$refs.form.validate(valid => {
         if (valid) {
-          const auditInfo = {
-            state: this.form.state,
-            remark: this.form.state === '1200' 
-              ? `${this.$t('audit.reject')}: ${this.form.remark}`
-              : this.form.remark
+          if (this.formData.state === '1200') {
+            this.formData.remark = `${this.$t('audit.state.reject')}:${this.formData.remark}`
           }
-          this.$emit('success', auditInfo)
+          this.$emit('success', this.formData)
           this.visible = false
         }
       })
diff --git a/src/components/fee/deleteOweFeeCallable.vue b/src/components/fee/deleteOweFeeCallable.vue
new file mode 100644
index 0000000..eaae522
--- /dev/null
+++ b/src/components/fee/deleteOweFeeCallable.vue
@@ -0,0 +1,61 @@
+<template>
+  <el-dialog
+    :title="$t('oweFeeCallable.delete.title')"
+    :visible.sync="dialogVisible"
+    width="30%"
+    @close="handleClose">
+    <div class="delete-content">
+      <p>{{ $t('oweFeeCallable.delete.confirm') }}</p>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleConfirm">{{ $t('common.confirm') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteOweFeeCallable } from '@/api/fee/oweFeeCallableApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'DeleteOweFeeCallable',
+  data() {
+    return {
+      dialogVisible: false,
+      currentItem: null
+    }
+  },
+  methods: {
+    open(item) {
+      this.currentItem = {
+        ...item,
+        communityId: getCommunityId()
+      }
+      this.dialogVisible = true
+    },
+    async handleConfirm() {
+      try {
+        await deleteOweFeeCallable(this.currentItem)
+        this.$message.success(this.$t('oweFeeCallable.delete.success'))
+        this.dialogVisible = false
+        this.$emit('success')
+      } catch (error) {
+        console.error('删除失败:', error)
+        this.$message.error(error.message || this.$t('oweFeeCallable.delete.error'))
+      }
+    },
+    handleClose() {
+      this.currentItem = null
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.delete-content {
+  text-align: center;
+  font-size: 16px;
+  padding: 20px 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/fee/roomTreeDiv.vue b/src/components/fee/roomTreeDiv.vue
new file mode 100644
index 0000000..53015cb
--- /dev/null
+++ b/src/components/fee/roomTreeDiv.vue
@@ -0,0 +1,151 @@
+<template>
+  <el-card class="tree-card">
+    <el-tree
+      :data="treeData"
+      :props="defaultProps"
+      node-key="id"
+      default-expand-all
+      highlight-current
+      @node-click="handleNodeClick"
+      :expand-on-click-node="false">
+      <span class="custom-tree-node" slot-scope="{ node, data }">
+        <span>{{ node.label }}</span>
+      </span>
+    </el-tree>
+  </el-card>
+</template>
+
+<script>
+import { queryUnits, queryRoomsTree } from '@/api/property/roomApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'RoomTreeDiv',
+  data() {
+    return {
+      treeData: [],
+      defaultProps: {
+        children: 'children',
+        label: 'text'
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.loadTreeData()
+  },
+  methods: {
+    async loadTreeData() {
+      try {
+        const units = await this.getUnits()
+        this.treeData = this.buildTreeData(units)
+      } catch (error) {
+        console.error('加载树数据失败:', error)
+      }
+    },
+    async getUnits() {
+      const params = {
+        communityId: this.communityId
+      }
+      const response = await queryUnits(params)
+      return response.data
+    },
+    buildTreeData(units) {
+      const floors = {}
+      
+      // 按楼层分组
+      units.forEach(unit => {
+        if (!floors[unit.floorId]) {
+          floors[unit.floorId] = {
+            id: `f_${unit.floorId}`,
+            floorId: unit.floorId,
+            floorNum: unit.floorNum,
+            text: `${unit.floorNum}栋`,
+            icon: 'el-icon-office-building',
+            children: []
+          }
+        }
+        
+        floors[unit.floorId].children.push({
+          id: `u_${unit.unitId}`,
+          unitId: unit.unitId,
+          text: `${unit.unitNum}单元`,
+          icon: 'el-icon-collection',
+          children: []
+        })
+      })
+      
+      return Object.values(floors)
+    },
+    async handleNodeClick(data) {
+      if (data.id.startsWith('u_')) {
+        await this.loadRooms(data.unitId, data)
+      } else if (data.id.startsWith('r_')) {
+        this.$emit('selectRoom', {
+          roomId: data.roomId,
+          roomName: data.text
+        })
+      }
+    },
+    async loadRooms(unitId, node) {
+      try {
+        if (node.children && node.children.length > 0) return
+        
+        const params = {
+          unitId: unitId,
+          communityId: this.communityId,
+          page: 1,
+          row: 1000
+        }
+        
+        const response = await queryRoomsTree(params)
+        const rooms = response.data.rooms || []
+        
+        rooms.forEach(room => {
+          let label = room.roomNum
+          if (room.ownerName) {
+            label += `(${room.ownerName})`
+          }
+          
+          node.children.push({
+            id: `r_${room.roomId}`,
+            roomId: room.roomId,
+            text: label,
+            icon: 'el-icon-house',
+            roomName: `${room.floorNum}-${room.unitNum}-${room.roomNum}`
+          })
+        })
+        
+        // 默认选择第一个房间
+        if (rooms.length > 0) {
+          const firstRoom = rooms[0]
+          this.$emit('selectRoom', {
+            roomId: firstRoom.roomId,
+            roomName: `${firstRoom.floorNum}-${firstRoom.unitNum}-${firstRoom.roomNum}`
+          })
+        }
+      } catch (error) {
+        console.error('加载房间数据失败:', error)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tree-card {
+  height: 100%;
+  /deep/ .el-card__body {
+    padding: 10px;
+  }
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/fee/searchFloor.vue b/src/components/fee/searchFloor.vue
new file mode 100644
index 0000000..a712ec4
--- /dev/null
+++ b/src/components/fee/searchFloor.vue
@@ -0,0 +1,187 @@
+<template>
+  <el-dialog
+    :title="$t('searchFloor.title')"
+    :visible.sync="dialogVisible"
+    width="70%"
+    @close="handleClose"
+  >
+    <el-row :gutter="20">
+      <el-col :span="6">
+        <el-input
+          v-model.trim="searchFloorInfo.floorId"
+          :placeholder="$t('searchFloor.floorId')"
+          clearable
+        ></el-input>
+      </el-col>
+      <el-col :span="6">
+        <el-input
+          v-model.trim="searchFloorInfo.floorName"
+          :placeholder="$t('searchFloor.floorName')"
+          clearable
+        ></el-input>
+      </el-col>
+      <el-col :span="8">
+        <el-input
+          v-model.trim="searchFloorInfo.floorNum"
+          :placeholder="$t('searchFloor.floorNum')"
+          clearable
+          style="margin-right: 10px"
+        ></el-input>
+        <el-button type="primary" @click="searchFloors">
+          <i class="el-icon-search"></i>
+          {{ $t('common.search') }}
+        </el-button>
+        <el-button type="info" @click="resetFloors">
+          <i class="el-icon-refresh"></i>
+          {{ $t('common.reset') }}
+        </el-button>
+      </el-col>
+    </el-row>
+
+    <el-table
+      :data="searchFloorInfo.floors"
+      border
+      style="width: 100%; margin-top: 20px"
+      v-loading="loading"
+    >
+      <el-table-column
+        prop="floorId"
+        :label="$t('searchFloor.table.floorId')"
+        align="center"
+      ></el-table-column>
+      <el-table-column
+        prop="floorName"
+        :label="$t('searchFloor.table.floorName')"
+        align="center"
+      ></el-table-column>
+      <el-table-column
+        prop="floorNum"
+        :label="$t('searchFloor.table.floorNum')"
+        align="center"
+      ></el-table-column>
+      <el-table-column
+        prop="userName"
+        :label="$t('searchFloor.table.userName')"
+        align="center"
+      ></el-table-column>
+      <el-table-column
+        :label="$t('common.operation')"
+        align="center"
+        width="120"
+      >
+        <template slot-scope="scope">
+          <el-button
+            type="primary"
+            size="mini"
+            @click="chooseFloor(scope.row)"
+          >
+            {{ $t('common.select') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="page.current"
+      :page-sizes="[10, 20, 30, 50]"
+      :page-size="page.size"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="page.total"
+      style="margin-top: 20px;"
+    ></el-pagination>
+  </el-dialog>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { queryFloors } from '@/api/fee/listOweFeeApi'
+
+export default {
+  name: 'SearchFloor',
+  data() {
+    return {
+      dialogVisible: false,
+      loading: false,
+      searchFloorInfo: {
+        floors: [],
+        floorId: '',
+        floorName: '',
+        floorNum: ''
+      },
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open() {
+      this.dialogVisible = true
+      this.refreshSearchFloorData()
+      this.loadAllFloorInfo()
+    },
+    async loadAllFloorInfo() {
+      try {
+        this.loading = true
+        const params = {
+          page: this.page.current,
+          row: this.page.size,
+          communityId: getCommunityId(),
+          floorId: this.searchFloorInfo.floorId,
+          floorName: this.searchFloorInfo.floorName,
+          floorNum: this.searchFloorInfo.floorNum
+        }
+        const { data, total } = await queryFloors(params)
+        this.searchFloorInfo.floors = data
+        this.page.total = total
+      } catch (error) {
+        console.error('获取楼栋信息失败:', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    chooseFloor(floor) {
+      this.$emit('chooseFloor', floor)
+      this.dialogVisible = false
+    },
+    searchFloors() {
+      this.page.current = 1
+      this.loadAllFloorInfo()
+    },
+    resetFloors() {
+      this.searchFloorInfo.floorId = ''
+      this.searchFloorInfo.floorName = ''
+      this.searchFloorInfo.floorNum = ''
+      this.page.current = 1
+      this.loadAllFloorInfo()
+    },
+    refreshSearchFloorData() {
+      this.searchFloorInfo.floorId = ''
+      this.searchFloorInfo.floorName = ''
+      this.searchFloorInfo.floorNum = ''
+    },
+    handleClose() {
+      this.refreshSearchFloorData()
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this.loadAllFloorInfo()
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this.loadAllFloorInfo()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-dialog {
+  .el-row {
+    margin-bottom: 20px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/fee/writeOweFeeCallable.vue b/src/components/fee/writeOweFeeCallable.vue
new file mode 100644
index 0000000..a80af33
--- /dev/null
+++ b/src/components/fee/writeOweFeeCallable.vue
@@ -0,0 +1,97 @@
+<template>
+  <el-dialog :title="$t('oweFeeCallable.write.title')" :visible.sync="dialogVisible" width="50%" @close="handleClose">
+    <el-form :model="form" label-width="120px" ref="form">
+      <el-form-item :label="$t('oweFeeCallable.write.roomName')" prop="roomName">
+        <el-input v-model="form.roomName" disabled></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('oweFeeCallable.write.feeName')" prop="feeIds">
+        <el-checkbox-group v-model="form.feeIds">
+          <el-checkbox v-for="fee in form.fees" :key="fee.feeId" :label="fee.feeId">
+            {{ fee.feeName }}
+          </el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item :label="$t('oweFeeCallable.write.remark')" prop="remark">
+        <el-input type="textarea" :rows="5" v-model="form.remark"
+          :placeholder="$t('oweFeeCallable.write.remarkPlaceholder')">
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleSubmit">{{ $t('common.submit') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { listFee } from '@/api/fee/feeApi'
+import { writeOweFeeCallable } from '@/api/fee/oweFeeCallableApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'WriteOweFeeCallable',
+  data() {
+    return {
+      dialogVisible: false,
+      form: {
+        roomId: '',
+        roomName: '',
+        fees: [],
+        feeIds: [],
+        remark: '',
+        communityId: ''
+      }
+    }
+  },
+  methods: {
+    open(data) {
+      this.form = {
+        roomId: data.roomId,
+        roomName: data.roomName,
+        fees: [],
+        feeIds: [],
+        remark: '',
+        communityId: getCommunityId()
+      }
+      this.loadFees()
+      this.dialogVisible = true
+    },
+    async loadFees() {
+      try {
+        const params = {
+          communityId: this.form.communityId,
+          payerObjId: this.form.roomId,
+          state: '2008001',
+          page: 1,
+          row: 100
+        }
+        const response = await listFee(params)
+        this.form.fees = response.data.fees || []
+      } catch (error) {
+        console.error('加载费用数据失败:', error)
+      }
+    },
+    async handleSubmit() {
+      try {
+        await writeOweFeeCallable(this.form)
+        this.$message.success(this.$t('oweFeeCallable.write.success'))
+        this.dialogVisible = false
+        this.$emit('success')
+      } catch (error) {
+        console.error('提交失败:', error)
+        this.$message.error(error.message || this.$t('oweFeeCallable.write.error'))
+      }
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-checkbox {
+  margin-right: 15px;
+}
+</style>
\ No newline at end of file
diff --git a/src/i18n/feeI18n.js b/src/i18n/feeI18n.js
index 4e79927..d4b985e 100644
--- a/src/i18n/feeI18n.js
+++ b/src/i18n/feeI18n.js
@@ -17,6 +17,12 @@ import { messages as shareReadingFeeMessages } from '../views/fee/shareReadingFe
 import { messages as feeComboManageMessages } from '../views/fee/feeComboManageLang'
 import { messages as payFeeAuditManageMessages } from '../views/fee/payFeeAuditManageLang'
 import { messages as feeComboMemberManageMessages } from '../views/fee/feeComboMemberManageLang'
+import { messages as payFeeBatchMessages } from '../views/fee/payFeeBatchLang'
+import { messages as listOweFeeMessages } from '../views/fee/listOweFeeLang'
+import { messages as oweFeeCallableMessages } from '../views/fee/oweFeeCallableLang'
+import { messages as addOweFeeCallableMessages } from '../views/fee/addOweFeeCallableLang'
+import { messages as staffFeeManageMessages } from '../views/fee/staffFeeManageLang'
+import { messages as feeSummaryMessages } from '../views/fee/feeSummaryLang'
 
 export const messages = {
     en: {
@@ -39,6 +45,12 @@ export const messages = {
         ...feeComboManageMessages.en,
         ...payFeeAuditManageMessages.en,
         ...feeComboMemberManageMessages.en,
+        ...payFeeBatchMessages.en,
+        ...listOweFeeMessages.en,
+        ...oweFeeCallableMessages.en,
+        ...addOweFeeCallableMessages.en,
+        ...staffFeeManageMessages.en,
+        ...feeSummaryMessages.en,
     },
     zh: {
         ...contractCreateFeeMessages.zh,
@@ -60,5 +72,11 @@ export const messages = {
         ...feeComboManageMessages.zh,
         ...payFeeAuditManageMessages.zh,
         ...feeComboMemberManageMessages.zh,
+        ...payFeeBatchMessages.zh,
+        ...listOweFeeMessages.zh,
+        ...oweFeeCallableMessages.zh,
+        ...addOweFeeCallableMessages.zh,
+        ...staffFeeManageMessages.zh,
+        ...feeSummaryMessages.zh,
     }
 }
\ No newline at end of file
diff --git a/src/router/feeRouter.js b/src/router/feeRouter.js
index 1a6e0c8..387fab5 100644
--- a/src/router/feeRouter.js
+++ b/src/router/feeRouter.js
@@ -79,5 +79,35 @@ export default [
         name: '/views/fee/feeComboMemberManage',
         component: () => import('@/views/fee/feeComboMemberManageList.vue')
     },
+    {
+        path: '/pages/property/payFeeBatch',
+        name: '/pages/property/payFeeBatch',
+        component: () => import('@/views/fee/payFeeBatchList.vue')
+    },
+    {
+        path: '/pages/property/listOweFee',
+        name: '/pages/property/listOweFee',
+        component: () => import('@/views/fee/listOweFeeList.vue')
+    },
+    {
+        path: '/pages/fee/oweFeeCallable',
+        name: '/pages/fee/oweFeeCallable',
+        component: () => import('@/views/fee/oweFeeCallableList.vue')
+    },
+    {
+        path: '/views/fee/addOweFeeCallable',
+        name: '/views/fee/addOweFeeCallable',
+        component: () => import('@/views/fee/addOweFeeCallableList.vue')
+    },
+    {
+        path: '/pages/property/staffFeeManage',
+        name: '/pages/property/staffFeeManage',
+        component: () => import('@/views/fee/staffFeeManageList.vue')
+    },
+    {
+        path: '/pages/property/feeSummary',
+        name: '/pages/property/feeSummary',
+        component: () => import('@/views/fee/feeSummaryList.vue')
+    },
 
 ]
\ No newline at end of file
diff --git a/src/views/fee/addOweFeeCallableLang.js b/src/views/fee/addOweFeeCallableLang.js
new file mode 100644
index 0000000..7aff393
--- /dev/null
+++ b/src/views/fee/addOweFeeCallableLang.js
@@ -0,0 +1,48 @@
+export const messages = {
+  en: {
+    addOweFeeCallable: {
+      title: 'Collection of Arrears',
+      callableWay: 'Collection Method',
+      selectCallableWay: 'Please select collection method',
+      feeConfigs: 'Collection Fees',
+      floor: 'Building',
+      selectFloor: 'Please select building',
+      timeRange: 'Time Range',
+      selectTimeRange: 'Please select time range',
+      startTime: 'Start Time',
+      selectStartTime: 'Please select start time',
+      endTime: 'End Time',
+      selectEndTime: 'Please select end time',
+      oweRooms: 'Arrears Rooms',
+      noOweRooms: 'No arrears rooms',
+      checkAll: 'Select All',
+      ttsCall: 'Voice Collection',
+      callableWayRequired: 'Collection method is required',
+      roomsRequired: 'Please select arrears rooms',
+      noOweRoomsSelected: 'No arrears rooms selected'
+    }
+  },
+  zh: {
+    addOweFeeCallable: {
+      title: '催缴欠费',
+      callableWay: '催缴方式',
+      selectCallableWay: '请选择催缴方式',
+      feeConfigs: '催缴费用',
+      floor: '楼栋',
+      selectFloor: '请选择楼栋',
+      timeRange: '应收时间段',
+      selectTimeRange: '请选择应收时间段',
+      startTime: '开始时间',
+      selectStartTime: '请选择开始时间',
+      endTime: '结束时间',
+      selectEndTime: '请选择结束时间',
+      oweRooms: '欠费房屋',
+      noOweRooms: '没有欠费房屋',
+      checkAll: '全选',
+      ttsCall: '语音催缴',
+      callableWayRequired: '催缴方式不能为空',
+      roomsRequired: '请选择欠费房屋',
+      noOweRoomsSelected: '未选择欠费房屋'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/addOweFeeCallableList.vue b/src/views/fee/addOweFeeCallableList.vue
new file mode 100644
index 0000000..9e978d8
--- /dev/null
+++ b/src/views/fee/addOweFeeCallableList.vue
@@ -0,0 +1,355 @@
+<template>
+  <div class="add-owe-fee-callable-container">
+    <el-card>
+      <div slot="header" class="clearfix">
+        <span>{{ $t('addOweFeeCallable.title') }}</span>
+      </div>
+
+      <el-form label-position="right" label-width="120px">
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item :label="$t('addOweFeeCallable.callableWay')">
+              <el-select 
+                v-model="addOweFeeCallableInfo.callableWay" 
+                style="width:100%"
+                :placeholder="$t('addOweFeeCallable.selectCallableWay')">
+                <el-option 
+                  v-for="item in callableWayOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item :label="$t('addOweFeeCallable.feeConfigs')">
+              <el-checkbox-group v-model="addOweFeeCallableInfo.configIds" @change="loadOweFeeRooms">
+                <el-checkbox 
+                  v-for="item in addOweFeeCallableInfo.feeConfigs"
+                  :key="item.configId"
+                  :label="item.configId">
+                  {{item.feeName}}
+                </el-checkbox>
+              </el-checkbox-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item :label="$t('addOweFeeCallable.floor')">
+              <el-select 
+                v-model="addOweFeeCallableInfo.floorId" 
+                style="width:100%"
+                @change="loadOweFeeRooms"
+                :placeholder="$t('addOweFeeCallable.selectFloor')">
+                <el-option 
+                  v-for="item in addOweFeeCallableInfo.floors"
+                  :key="item.floorId"
+                  :label="item.floorNum"
+                  :value="item.floorId">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item :label="$t('addOweFeeCallable.timeRange')">
+              <el-select 
+                v-model="addOweFeeCallableInfo.hasTime" 
+                style="width:100%"
+                @change="loadOweFeeRooms"
+                :placeholder="$t('addOweFeeCallable.selectTimeRange')">
+                <el-option 
+                  v-for="item in timeRangeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20" v-show="addOweFeeCallableInfo.hasTime === 'ON'">
+          <el-col :span="12">
+            <el-form-item :label="$t('addOweFeeCallable.startTime')">
+              <el-date-picker
+                v-model="addOweFeeCallableInfo.startTime"
+                type="datetime"
+                style="width:100%"
+                :placeholder="$t('addOweFeeCallable.selectStartTime')">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('addOweFeeCallable.endTime')">
+              <el-date-picker
+                v-model="addOweFeeCallableInfo.endTime"
+                type="datetime"
+                style="width:100%"
+                :placeholder="$t('addOweFeeCallable.selectEndTime')">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item :label="$t('addOweFeeCallable.oweRooms')">
+              <div v-if="addOweFeeCallableInfo.rooms && addOweFeeCallableInfo.rooms.length > 0">
+                <el-checkbox 
+                  v-model="checkAllStatus"
+                  @change="handleCheckAllChange">
+                  {{ $t('addOweFeeCallable.checkAll') }}
+                </el-checkbox>
+                <el-checkbox-group 
+                  v-model="addOweFeeCallableInfo.roomIds"
+                  @change="handleCheckedRoomsChange">
+                  <el-checkbox 
+                    v-for="item in addOweFeeCallableInfo.rooms"
+                    :key="item.payerObjId"
+                    :label="item.payerObjId">
+                    {{item.payerObjName}}
+                  </el-checkbox>
+                </el-checkbox-group>
+              </div>
+              <div v-else>
+                {{ $t('addOweFeeCallable.noOweRooms') }}
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="24" class="text-right">
+            <el-button @click="goBack">{{ $t('common.back') }}</el-button>
+            <el-button 
+              v-if="addOweFeeCallableInfo.callableWay === 'EXCEL'"
+              type="primary"
+              @click="exportCollectionLetterExcel">
+              {{ $t('common.export') }}
+            </el-button>
+            <el-button 
+              v-else-if="addOweFeeCallableInfo.callableWay === 'TTS'"
+              type="primary"
+              @click="ttsOweFee">
+              {{ $t('addOweFeeCallable.ttsCall') }}
+            </el-button>
+            <el-button 
+              v-else
+              type="primary"
+              @click="saveOweFeeCallable">
+              {{ $t('common.submit') }}
+            </el-button>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { 
+  saveOweFeeCallable,
+  exportCollectionLetterExcel,
+  listFeeConfigs,
+  queryFloors,
+  queryReportOweFee
+} from '@/api/fee/addOweFeeCallableApi'
+
+export default {
+  name: 'AddOweFeeCallableList',
+  data() {
+    return {
+      addOweFeeCallableInfo: {
+        callableWay: '',
+        remark: '',
+        floorId: '',
+        communityId: '',
+        configIds: [],
+        roomId: '',
+        roomIds: [],
+        rooms: [],
+        feeConfigs: [],
+        hasTime: 'OFF',
+        startTime: '',
+        endTime: '',
+        floors: []
+      },
+      callableWayOptions: [
+        { value: 'WECHAT', label: '微信模板消息' },
+        { value: 'SMS', label: '短信' },
+        { value: 'EXCEL', label: '导出' },
+        { value: 'TTS', label: '呼电话催缴' }
+      ],
+      timeRangeOptions: [
+        { value: 'OFF', label: '否' },
+        { value: 'ON', label: '是' }
+      ],
+      checkAllStatus: false,
+      loading: false
+    }
+  },
+  created() {
+    this.addOweFeeCallableInfo.communityId = getCommunityId()
+    this.listFeeConfigs()
+    this.loadOweFeeFloors()
+  },
+  methods: {
+    async listFeeConfigs() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          communityId: this.addOweFeeCallableInfo.communityId,
+          isDefault: 'F'
+        }
+        const { data } = await listFeeConfigs(params)
+        this.addOweFeeCallableInfo.feeConfigs = data.feeConfigs
+      } catch (error) {
+        console.error('获取费用配置失败:', error)
+      }
+    },
+    async loadOweFeeFloors() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          communityId: this.addOweFeeCallableInfo.communityId
+        }
+        const { data } = await queryFloors(params)
+        this.addOweFeeCallableInfo.floors = data.apiFloorDataVoList
+      } catch (error) {
+        console.error('获取楼栋失败:', error)
+      }
+    },
+    async loadOweFeeRooms() {
+      if (!this.addOweFeeCallableInfo.floorId || 
+          !this.addOweFeeCallableInfo.configIds || 
+          this.addOweFeeCallableInfo.configIds.length === 0) {
+        return
+      }
+
+      try {
+        const params = {
+          page: 1,
+          row: 500,
+          configIds: this.addOweFeeCallableInfo.configIds.join(','),
+          communityId: this.addOweFeeCallableInfo.communityId,
+          floorId: this.addOweFeeCallableInfo.floorId
+        }
+        const { data } = await queryReportOweFee(params)
+        this.addOweFeeCallableInfo.rooms = data.data || []
+        this.addOweFeeCallableInfo.roomIds = this.addOweFeeCallableInfo.rooms.map(item => item.payerObjId)
+        this.checkAllStatus = this.addOweFeeCallableInfo.rooms.length > 0
+      } catch (error) {
+        console.error('获取欠费房屋失败:', error)
+      }
+    },
+    handleCheckAllChange(val) {
+      this.addOweFeeCallableInfo.roomIds = val ? 
+        this.addOweFeeCallableInfo.rooms.map(item => item.payerObjId) : []
+    },
+    handleCheckedRoomsChange(value) {
+      const checkedCount = value.length
+      this.checkAllStatus = checkedCount === this.addOweFeeCallableInfo.rooms.length
+    },
+    validateForm() {
+      if (!this.addOweFeeCallableInfo.callableWay) {
+        this.$message.error(this.$t('addOweFeeCallable.callableWayRequired'))
+        return false
+      }
+      if (!this.addOweFeeCallableInfo.roomIds || this.addOweFeeCallableInfo.roomIds.length === 0) {
+        this.$message.error(this.$t('addOweFeeCallable.roomsRequired'))
+        return false
+      }
+      return true
+    },
+    async saveOweFeeCallable() {
+      if (!this.validateForm()) return
+
+      try {
+        await saveOweFeeCallable(this.addOweFeeCallableInfo)
+        this.$message.success(this.$t('common.submitSuccess'))
+        this.goBack()
+      } catch (error) {
+        console.error('提交失败:', error)
+        this.$message.error(error.message || this.$t('common.submitFailed'))
+      }
+    },
+    async exportCollectionLetterExcel() {
+      if (!this.validateForm()) return
+
+      try {
+        const params = {
+          communityId: this.addOweFeeCallableInfo.communityId,
+          pagePath: 'dataFeeManualCollection',
+          configIds: this.addOweFeeCallableInfo.configIds.join(','),
+          roomIds: this.addOweFeeCallableInfo.roomIds.join(','),
+          startTime: this.addOweFeeCallableInfo.startTime,
+          endTime: this.addOweFeeCallableInfo.endTime
+        }
+        await exportCollectionLetterExcel(params)
+        this.$message.success(this.$t('common.exportSuccess'))
+        this.$router.push('/pages/property/downloadTempFile?tab=下载中心')
+      } catch (error) {
+        console.error('导出失败:', error)
+        this.$message.error(error.message || this.$t('common.exportFailed'))
+      }
+    },
+    ttsOweFee() {
+      if (!this.validateForm()) return
+
+      const oweFee = this.addOweFeeCallableInfo.rooms
+        .filter(room => this.addOweFeeCallableInfo.roomIds.includes(room.payerObjId))
+        .map(room => ({ ...room, state: 'W' }))
+
+      if (oweFee.length === 0) {
+        this.$message.error(this.$t('addOweFeeCallable.noOweRoomsSelected'))
+        return
+      }
+
+      const data = {
+        configIds: this.addOweFeeCallableInfo.configIds,
+        oweFee,
+        startTime: this.addOweFeeCallableInfo.startTime,
+        endTime: this.addOweFeeCallableInfo.endTime
+      }
+
+      localStorage.setItem('TTS_OWE_FEE_DATA', JSON.stringify(data))
+      this.$router.push('/fee/ttsOweFeeCallable')
+    },
+    goBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.add-owe-fee-callable-container {
+  padding: 20px;
+
+  .el-checkbox-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
+  }
+
+  .el-checkbox {
+    margin-right: 0;
+  }
+
+  .text-right {
+    text-align: right;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/fee/feeComboMemberManageList.vue b/src/views/fee/feeComboMemberManageList.vue
index 9642b08..115c5d2 100644
--- a/src/views/fee/feeComboMemberManageList.vue
+++ b/src/views/fee/feeComboMemberManageList.vue
@@ -14,80 +14,34 @@
         </div>
       </div>
 
-      <el-table
-        :data="feeComboMemberManageInfo.feeComboMembers"
-        border
-        style="width: 100%"
-        v-loading="loading"
-      >
-        <el-table-column
-          prop="feeTypeCdName"
-          :label="$t('feeComboMemberManage.feeType')"
-          align="center"
-        />
-        <el-table-column
-          prop="feeName"
-          :label="$t('feeComboMemberManage.feeItem')"
-          align="center"
-        />
-        <el-table-column
-          prop="feeFlagName"
-          :label="$t('feeComboMemberManage.feeFlag')"
-          align="center"
-        />
-        <el-table-column
-          :label="$t('feeComboMemberManage.paymentType')"
-          align="center"
-        >
+      <el-table :data="feeComboMemberManageInfo.feeComboMembers" border style="width: 100%" v-loading="loading">
+        <el-table-column prop="feeTypeCdName" :label="$t('feeComboMemberManage.feeType')" align="center" />
+        <el-table-column prop="feeName" :label="$t('feeComboMemberManage.feeItem')" align="center" />
+        <el-table-column prop="feeFlagName" :label="$t('feeComboMemberManage.feeFlag')" align="center" />
+        <el-table-column :label="$t('feeComboMemberManage.paymentType')" align="center">
           <template slot-scope="scope">
             {{ scope.row.paymentCd == '1200' ? $t('feeComboMemberManage.prepay') : $t('feeComboMemberManage.postpay') }}
           </template>
         </el-table-column>
-        <el-table-column
-          prop="paymentCycle"
-          :label="$t('feeComboMemberManage.paymentCycle')"
-          align="center"
-        />
-        <el-table-column
-          :label="$t('feeComboMemberManage.unitPrice')"
-          align="center"
-        >
+        <el-table-column prop="paymentCycle" :label="$t('feeComboMemberManage.paymentCycle')" align="center" />
+        <el-table-column :label="$t('feeComboMemberManage.unitPrice')" align="center">
           <template slot-scope="scope">
             {{ scope.row.computingFormula == '2002' ? '-' : scope.row.squarePrice }}
           </template>
         </el-table-column>
-        <el-table-column
-          prop="additionalAmount"
-          :label="$t('feeComboMemberManage.additionalFee')"
-          align="center"
-        />
-        <el-table-column
-          :label="$t('common.operation')"
-          align="center"
-          width="150"
-        >
+        <el-table-column prop="additionalAmount" :label="$t('feeComboMemberManage.additionalFee')" align="center" />
+        <el-table-column :label="$t('common.operation')" align="center" width="150">
           <template slot-scope="scope">
-            <el-button
-              type="danger"
-              size="mini"
-              @click="_openDeleteFeeComboMemberModel(scope.row)"
-            >
+            <el-button type="danger" size="mini" @click="_openDeleteFeeComboMemberModel(scope.row)">
               {{ $t('common.delete') }}
             </el-button>
           </template>
         </el-table-column>
       </el-table>
 
-      <el-pagination
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="page.current"
-        :page-sizes="[10, 20, 30, 50]"
-        :page-size="page.size"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="page.total"
-        class="pagination"
-      />
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.current"
+        :page-sizes="[10, 20, 30, 50]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper"
+        :total="page.total" class="pagination" />
     </el-card>
 
     <add-fee-combo-member ref="addFeeComboMember" @success="handleSuccess" />
diff --git a/src/views/fee/feeSummaryLang.js b/src/views/fee/feeSummaryLang.js
new file mode 100644
index 0000000..b28981d
--- /dev/null
+++ b/src/views/fee/feeSummaryLang.js
@@ -0,0 +1,32 @@
+export const messages = {
+  en: {
+    feeSummary: {
+      title: 'Fee Summary',
+      day: 'Day',
+      month: 'Month',
+      year: 'Year',
+      time: 'Time',
+      feeItemId: 'Fee Item ID',
+      feeItemName: 'Fee Item Name',
+      receivableAmount: 'Receivable Amount',
+      receivedAmount: 'Received Amount',
+      yuan: 'yuan',
+      fetchError: 'Failed to fetch fee summary data'
+    }
+  },
+  zh: {
+    feeSummary: {
+      title: '缴费汇总表',
+      day: '日',
+      month: '月',
+      year: '年',
+      time: '时间',
+      feeItemId: '费用项ID',
+      feeItemName: '费用项名称',
+      receivableAmount: '应收金额',
+      receivedAmount: '实收金额',
+      yuan: '元',
+      fetchError: '获取缴费汇总数据失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/feeSummaryList.vue b/src/views/fee/feeSummaryList.vue
new file mode 100644
index 0000000..48debd8
--- /dev/null
+++ b/src/views/fee/feeSummaryList.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="fee-summary-container animated fadeInRight">
+    <el-row>
+      <el-col :span="24">
+        <el-card>
+          <div slot="header" class="clearfix">
+            <span>{{ $t('feeSummary.title') }}</span>
+            <div class="card-header-right">
+              <el-button-group>
+                <el-button size="small" :type="feeSummaryInfo.feeSummaryType === 1001 ? 'primary' : ''"
+                  @click="_switchFeeSummaryType(1001)">
+                  {{ $t('feeSummary.day') }}
+                </el-button>
+                <el-button size="small" :type="feeSummaryInfo.feeSummaryType === 1101 ? 'primary' : ''"
+                  @click="_switchFeeSummaryType(1101)">
+                  {{ $t('feeSummary.month') }}
+                </el-button>
+                <el-button size="small" :type="feeSummaryInfo.feeSummaryType === 1111 ? 'primary' : ''"
+                  @click="_switchFeeSummaryType(1111)">
+                  {{ $t('feeSummary.year') }}
+                </el-button>
+              </el-button-group>
+            </div>
+          </div>
+
+          <el-table :data="feeSummaryInfo.fees" border style="width: 100%" v-loading="loading">
+            <el-table-column prop="createTime" :label="$t('feeSummary.time')" align="center" />
+            <el-table-column prop="configId" :label="$t('feeSummary.feeItemId')" align="center" />
+            <el-table-column prop="feeName" :label="$t('feeSummary.feeItemName')" align="center" />
+            <el-table-column prop="receivableAmounts" :label="$t('feeSummary.receivableAmount')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.receivableAmounts }} {{ $t('feeSummary.yuan') }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="receivedAmounts" :label="$t('feeSummary.receivedAmount')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.receivedAmounts }} {{ $t('feeSummary.yuan') }}
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <el-pagination class="pagination-wrapper" :current-page.sync="page.current" :page-sizes="[10, 20, 30, 50]"
+            :page-size="page.size" :total="page.total" layout="total, sizes, prev, pager, next, jumper"
+            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { listFeeSummarys } from '@/api/fee/feeSummaryApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'FeeSummaryList',
+  data() {
+    return {
+      loading: false,
+      feeSummaryInfo: {
+        fees: [],
+        feeSummaryType: '1001',
+        total: 0
+      },
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this._listFeeSummarys(this.page.current, this.page.size)
+  },
+  methods: {
+    async _listFeeSummarys(page, size) {
+      try {
+        this.loading = true
+        const params = {
+          page,
+          row: size,
+          feeSummaryType: this.feeSummaryInfo.feeSummaryType,
+          communityId: this.communityId
+        }
+        const { fees, total } = await listFeeSummarys(params)
+        this.feeSummaryInfo.fees = fees
+        this.page.total = total
+      } catch (error) {
+        this.$message.error(this.$t('feeSummary.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    _switchFeeSummaryType(feeSummaryType) {
+      this.feeSummaryInfo.feeSummaryType = feeSummaryType
+      this.page.current = 1
+      this._listFeeSummarys(this.page.current, this.page.size)
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this._listFeeSummarys(this.page.current, this.page.size)
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this._listFeeSummarys(this.page.current, this.page.size)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.fee-summary-container {
+  padding: 20px;
+
+  .clearfix {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .card-header-right {
+    display: flex;
+    align-items: center;
+  }
+
+  .pagination-wrapper {
+    margin-top: 20px;
+    text-align: right;
+  }
+
+  .el-button-group {
+    margin-left: 10px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/fee/listOweFeeLang.js b/src/views/fee/listOweFeeLang.js
new file mode 100644
index 0000000..d381fa3
--- /dev/null
+++ b/src/views/fee/listOweFeeLang.js
@@ -0,0 +1,92 @@
+export const messages = {
+  en: {
+    listOweFee: {
+      search: {
+        title: 'Search Conditions',
+        floorName: 'Please select building',
+        unit: 'Please select unit',
+        roomNum: 'Please enter room number',
+        roomType: 'Please select room type',
+        ownerName: 'Please enter owner name',
+        payObjType: 'Please select payment object type',
+        roomNumFormat: 'Please enter room number, e.g. 1-1-1123',
+        carportNum: 'Please enter parking space number, e.g. 6-8',
+        feeConfig: 'Please select fee items'
+      },
+      table: {
+        title: 'Arrears Information',
+        index: 'No.',
+        payerObjName: 'Payment Object',
+        ownerName: 'Owner Name',
+        ownerTel: 'Phone Number',
+        endTime: 'Start Time',
+        deadlineTime: 'End Time',
+        total: 'Total (Unit: Yuan)',
+        updateTime: 'Update Time'
+      },
+      summary: {
+        subtotal: 'Subtotal',
+        total: 'Total'
+      },
+      exportSuccess: 'Export initiated successfully',
+      exportError: 'Export failed'
+    },
+    searchFloor: {
+      title: 'Building Selection',
+      floorId: 'Please enter building ID',
+      floorName: 'Please enter building name',
+      floorNum: 'Please enter building number',
+      table: {
+        floorId: 'Building ID',
+        floorName: 'Name',
+        floorNum: 'Number',
+        userName: 'Creator'
+      }
+    }
+  },
+  zh: {
+    listOweFee: {
+      search: {
+        title: '查询条件',
+        floorName: '请选择楼栋',
+        unit: '单元',
+        roomNum: '请填写房屋编号',
+        roomType: '请选择房屋类型',
+        ownerName: '请填写业主名称',
+        payObjType: '请选择付费对象类型',
+        roomNumFormat: '请填写房屋编号,如1-1-1123',
+        carportNum: '请填写车位编号，如6-8',
+        feeConfig: '请选择收费项'
+      },
+      table: {
+        title: '欠费信息',
+        index: '序号',
+        payerObjName: '收费对象',
+        ownerName: '业主名称',
+        ownerTel: '手机号',
+        endTime: '开始时间',
+        deadlineTime: '结束时间',
+        total: '合计(单位:元)',
+        updateTime: '更新时间'
+      },
+      summary: {
+        subtotal: '小计',
+        total: '合计'
+      },
+      exportSuccess: '导出成功',
+      exportError: '导出失败'
+    },
+    searchFloor: {
+      title: '小区楼栋',
+      floorId: '请输入楼栋ID',
+      floorName: '请输入楼栋名称',
+      floorNum: '请输入楼栋编号',
+      table: {
+        floorId: '楼栋ID',
+        floorName: '名称',
+        floorNum: '编号',
+        userName: '创建人'
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/listOweFeeList.vue b/src/views/fee/listOweFeeList.vue
new file mode 100644
index 0000000..8bc58c1
--- /dev/null
+++ b/src/views/fee/listOweFeeList.vue
@@ -0,0 +1,417 @@
+<template>
+  <div class="list-owe-fee-container">
+    <!-- 查询条件 -->
+    <el-card class="search-card">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('listOweFee.search.title') }}</span>
+        <el-button type="text" style="float: right; padding: 3px 0" @click="toggleMoreCondition">
+          {{ listOweFeeInfo.moreCondition ? $t('common.hide') : $t('common.more') }}
+        </el-button>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-input v-model="listOweFeeInfo.conditions.floorName" :placeholder="$t('listOweFee.search.floorName')"
+            class="search-item">
+            <el-button slot="append" type="primary" @click="openChooseFloor">
+              <i class="el-icon-search"></i>
+              {{ $t('common.select') }}
+            </el-button>
+          </el-input>
+        </el-col>
+        <el-col :span="6">
+          <el-select v-model="listOweFeeInfo.conditions.unitId" :placeholder="$t('listOweFee.search.unit')"
+            style="width:100%">
+            <el-option :label="$t('listOweFee.search.unit')" value=""></el-option>
+            <el-option v-for="(unit, index) in listOweFeeInfo.roomUnits" :key="index"
+              :label="unit.unitNum + $t('listOweFee.search.unit')" :value="unit.unitId"></el-option>
+          </el-select>
+        </el-col>
+        <el-col :span="6">
+          <el-input v-model.trim="listOweFeeInfo.conditions.roomNum"
+            :placeholder="$t('listOweFee.search.roomNum')"></el-input>
+        </el-col>
+        <el-col :span="6">
+          <el-button type="primary" @click="queryOweFee">
+            <i class="el-icon-search"></i>
+            {{ $t('common.search') }}
+          </el-button>
+          <el-button type="info" @click="resetOweFee">
+            <i class="el-icon-refresh"></i>
+            {{ $t('common.reset') }}
+          </el-button>
+        </el-col>
+      </el-row>
+
+      <!-- 更多查询条件 -->
+      <el-row v-show="listOweFeeInfo.moreCondition" :gutter="20">
+        <el-col :span="6">
+          <el-select v-model="listOweFeeInfo.conditions.roomSubType" :placeholder="$t('listOweFee.search.roomType')"
+            style="width:100%">
+            <el-option :label="$t('common.selectRoomType')" value=""></el-option>
+            <el-option v-for="(item, index) in listOweFeeInfo.roomSubTypes" :key="index" :label="item.name"
+              :value="item.statusCd"></el-option>
+          </el-select>
+        </el-col>
+        <el-col :span="6">
+          <el-input v-model.trim="listOweFeeInfo.conditions.ownerName"
+            :placeholder="$t('listOweFee.search.ownerName')"></el-input>
+        </el-col>
+        <el-col :span="6">
+          <el-select v-model="listOweFeeInfo.conditions.payObjType" :placeholder="$t('listOweFee.search.payObjType')"
+            style="width:100%">
+            <el-option :label="$t('common.selectPayObjType')" value=""></el-option>
+            <el-option v-for="(item, index) in listOweFeeInfo.payObjTypes" :key="index" :label="item.name"
+              :value="item.statusCd"></el-option>
+          </el-select>
+        </el-col>
+      </el-row>
+
+      <el-row v-show="listOweFeeInfo.moreCondition" :gutter="20">
+        <el-col v-if="listOweFeeInfo.conditions.payObjType === '3333'" :span="6">
+          <el-input v-model.trim="listOweFeeInfo.conditions.num"
+            :placeholder="$t('listOweFee.search.roomNumFormat')"></el-input>
+        </el-col>
+        <el-col v-if="listOweFeeInfo.conditions.payObjType === '6666'" :span="6">
+          <el-input v-model.trim="listOweFeeInfo.conditions.num"
+            :placeholder="$t('listOweFee.search.carportNum')"></el-input>
+        </el-col>
+        <el-col :span="6">
+          <el-select v-model="selectedFeeConfigs" multiple :placeholder="$t('listOweFee.search.feeConfig')"
+            style="width:100%">
+            <el-option v-for="(item, index) in listOweFeeInfo.feeConfigs" :key="index" :label="item.feeName"
+              :value="item.configId"></el-option>
+          </el-select>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <!-- 欠费信息表格 -->
+    <el-card class="table-card">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('listOweFee.table.title') }}</span>
+        <el-button type="primary" size="small" @click="exportFee">
+          <i class="el-icon-download"></i>
+          {{ $t('common.export') }}
+        </el-button>
+      </div>
+      <el-table :data="listOweFeeInfo.fees" border style="width: 100%" v-loading="loading">
+        <el-table-column prop="index" :label="$t('listOweFee.table.index')" width="80" align="center">
+          <template slot-scope="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="payerObjName" :label="$t('listOweFee.table.payerObjName')"
+          align="center"></el-table-column>
+        <el-table-column prop="ownerName" :label="$t('listOweFee.table.ownerName')" align="center"></el-table-column>
+        <el-table-column prop="ownerTel" :label="$t('listOweFee.table.ownerTel')" align="center"></el-table-column>
+        <el-table-column prop="endTime" :label="$t('listOweFee.table.endTime')" align="center"></el-table-column>
+        <el-table-column prop="deadlineTime" :label="$t('listOweFee.table.deadlineTime')"
+          align="center"></el-table-column>
+        <el-table-column v-for="(item, index) in listOweFeeInfo.feeConfigNames" :key="index" :label="item.configName"
+          align="center">
+          <template slot-scope="scope">
+            {{ getFeeOweAmount(item, scope.row) }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('listOweFee.table.total')" align="center">
+          <template slot-scope="scope">
+            {{ getAllFeeOweAmount(scope.row) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="updateTime" :label="$t('listOweFee.table.updateTime')" align="center"></el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.current"
+        :page-sizes="[10, 20, 30, 50]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper"
+        :total="page.total" style="margin-top: 20px;"></el-pagination>
+
+      <!-- 小计和合计 -->
+      <div class="summary-wrapper">
+        <div class="summary-item">
+          <span class="summary-title">{{ $t('listOweFee.summary.subtotal') }}</span>
+          <div v-for="(item, index) in listOweFeeInfo.feeConfigNames" :key="index" class="summary-content">
+            {{ item.configName }}: {{ getFeeOweAllAmount(item) }} {{ $t('common.yuan') }}
+          </div>
+          <div class="summary-content">
+            {{ $t('listOweFee.summary.total') }}: {{ getFeeOweAllAmounts() }} {{ $t('common.yuan') }}
+          </div>
+        </div>
+      </div>
+    </el-card>
+
+    <!-- 选择楼栋组件 -->
+    <search-floor ref="searchFloor" @chooseFloor="handleChooseFloor"></search-floor>
+  </div>
+</template>
+
+<script>
+import { getDict } from '@/api/community/communityApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import { queryReportOweFee, listFeeConfigs, exportData,queryUnits } from '@/api/fee/listOweFeeApi'
+import SearchFloor from '@/components/fee/searchFloor'
+
+export default {
+  name: 'ListOweFee',
+  components: {
+    SearchFloor
+  },
+  data() {
+    return {
+      loading: false,
+      listOweFeeInfo: {
+        fees: [],
+        moreCondition: false,
+        roomUnits: [],
+        conditions: {
+          configIds: '',
+          payObjType: '',
+          num: '',
+          billType: '00123',
+          floorId: '',
+          floorName: '',
+          roomNum: '',
+          unitId: '',
+          roomSubType: '',
+          ownerName: '',
+          communityId: ''
+        },
+        feeConfigs: [],
+        feeConfigNames: [],
+        payObjTypes: [],
+        roomSubTypes: []
+      },
+      selectedFeeConfigs: [],
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.listOweFeeInfo.conditions.communityId = getCommunityId()
+    this.initData()
+  },
+  watch: {
+    selectedFeeConfigs(newVal) {
+      this.listOweFeeInfo.feeConfigNames = newVal.map(configId => {
+        const config = this.listOweFeeInfo.feeConfigs.find(item => item.configId === configId)
+        return {
+          configId,
+          configName: config ? config.feeName : ''
+        }
+      })
+    }
+  },
+  methods: {
+    async initData() {
+      try {
+        this.loading = true
+        await Promise.all([
+          this.getPayObjTypes(),
+          this.getRoomSubTypes(),
+          this.loadListOweFeeInfo(),
+          this.listFeeConfigs()
+        ])
+      } catch (error) {
+        console.error('初始化数据失败:', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    async getPayObjTypes() {
+      try {
+        const data = await getDict('report_owe_fee', 'payer_obj_type')
+        this.listOweFeeInfo.payObjTypes = data
+      } catch (error) {
+        console.error('获取付费对象类型失败:', error)
+      }
+    },
+    async getRoomSubTypes() {
+      try {
+        const data = await getDict('building_room', 'room_sub_type')
+        this.listOweFeeInfo.roomSubTypes = data
+      } catch (error) {
+        console.error('获取房屋类型失败:', error)
+      }
+    },
+    async loadListOweFeeInfo() {
+      try {
+        const params = {
+          ...this.listOweFeeInfo.conditions,
+          page: this.page.current,
+          row: this.page.size,
+          configIds: this.listOweFeeInfo.feeConfigNames.map(item => item.configId).join(',')
+        }
+        const { data, total } = await queryReportOweFee(params)
+        this.listOweFeeInfo.fees = data
+        this.page.total = total
+      } catch (error) {
+        console.error('获取欠费信息失败:', error)
+      }
+    },
+    async listFeeConfigs() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          communityId: this.listOweFeeInfo.conditions.communityId
+        }
+        const { data } = await listFeeConfigs(params)
+        this.listOweFeeInfo.feeConfigs = data
+      } catch (error) {
+        console.error('获取收费项失败:', error)
+      }
+    },
+    toggleMoreCondition() {
+      this.listOweFeeInfo.moreCondition = !this.listOweFeeInfo.moreCondition
+    },
+    queryOweFee() {
+      this.page.current = 1
+      this.loadListOweFeeInfo()
+    },
+    resetOweFee() {
+      this.listOweFeeInfo.conditions = {
+        configIds: '',
+        payObjType: '',
+        num: '',
+        billType: '00123',
+        floorId: '',
+        floorName: '',
+        roomNum: '',
+        unitId: '',
+        roomSubType: '',
+        ownerName: '',
+        communityId: this.listOweFeeInfo.conditions.communityId
+      }
+      this.selectedFeeConfigs = []
+      this.loadListOweFeeInfo()
+    },
+    getFeeOweAmount(item, fee) {
+      if (!fee.items) return 0
+      const found = fee.items.find(tmp => tmp.configId === item.configId)
+      return found ? found.amountOwed : 0
+    },
+    getFeeOweAllAmount(item) {
+      let amountOwed = 0.0
+      this.listOweFeeInfo.fees.forEach(feeItem => {
+        if (!feeItem.items) return
+        feeItem.items.forEach(tmp => {
+          if (tmp.configId === item.configId) {
+            amountOwed += parseFloat(tmp.amountOwed)
+          }
+        })
+      })
+      return amountOwed.toFixed(2)
+    },
+    getAllFeeOweAmount(fee) {
+      if (this.listOweFeeInfo.feeConfigNames.length < 1) {
+        return fee.amountOwed
+      }
+      let amountOwed = 0.0
+      this.listOweFeeInfo.feeConfigNames.forEach(feeItem => {
+        if (!fee.items) return
+        fee.items.forEach(item => {
+          if (feeItem.configId === item.configId) {
+            amountOwed += parseFloat(item.amountOwed)
+          }
+        })
+      })
+      return amountOwed.toFixed(2)
+    },
+    getFeeOweAllAmounts() {
+      let amountOwed = 0.0
+      this.listOweFeeInfo.fees.forEach(feeItem => {
+        const rowAmount = this.getAllFeeOweAmount(feeItem)
+        amountOwed += parseFloat(rowAmount)
+      })
+      return amountOwed.toFixed(2)
+    },
+    async exportFee() {
+      try {
+        const params = {
+          ...this.listOweFeeInfo.conditions,
+          pagePath: 'reportListOweFee',
+          configIds: this.listOweFeeInfo.feeConfigNames.map(item => item.configId).join(',')
+        }
+        await exportData(params)
+        this.$message.success(this.$t('listOweFee.exportSuccess'))
+        this.$router.push('/pages/property/downloadTempFile?tab=下载中心')
+      } catch (error) {
+        console.error('导出失败:', error)
+        this.$message.error(this.$t('listOweFee.exportError'))
+      }
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this.loadListOweFeeInfo()
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this.loadListOweFeeInfo()
+    },
+    openChooseFloor() {
+      this.$refs.searchFloor.open()
+    },
+    handleChooseFloor(floor) {
+      this.listOweFeeInfo.conditions.floorId = floor.floorId
+      this.listOweFeeInfo.conditions.floorName = floor.floorName
+      this.loadUnits(floor.floorId)
+    },
+    async loadUnits(floorId) {
+      try {
+        const params = {
+          floorId,
+          communityId: this.listOweFeeInfo.conditions.communityId
+        }
+        const { data } = await queryUnits(params)
+        this.listOweFeeInfo.roomUnits = data
+      } catch (error) {
+        console.error('获取单元信息失败:', error)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.list-owe-fee-container {
+  padding: 20px;
+
+  .search-card {
+    margin-bottom: 20px;
+
+    .search-item {
+      margin-bottom: 15px;
+    }
+  }
+
+  .table-card {
+    margin-bottom: 20px;
+  }
+
+  .summary-wrapper {
+    margin-top: 20px;
+    padding: 15px;
+    background-color: #f5f7fa;
+    border-radius: 4px;
+
+    .summary-item {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+
+    .summary-title {
+      font-weight: bold;
+      margin-right: 20px;
+    }
+
+    .summary-content {
+      margin-right: 30px;
+      margin-bottom: 10px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/fee/meterWaterManageList.vue b/src/views/fee/meterWaterManageList.vue
index abb886c..cc58fc1 100644
--- a/src/views/fee/meterWaterManageList.vue
+++ b/src/views/fee/meterWaterManageList.vue
@@ -223,7 +223,7 @@ export default {
   padding: 20px;
 
   .tree-container {
-    height: calc(100vh - 120px);
+    min-height: 450px;
     overflow-y: auto;
     background: #fff;
     padding: 10px;
diff --git a/src/views/fee/oweFeeCallableLang.js b/src/views/fee/oweFeeCallableLang.js
new file mode 100644
index 0000000..b24b59e
--- /dev/null
+++ b/src/views/fee/oweFeeCallableLang.js
@@ -0,0 +1,106 @@
+export const messages = {
+  en: {
+    oweFeeCallable: {
+      search: {
+        title: 'Search Conditions',
+        ownerName: 'Owner Name',
+        ownerNamePlaceholder: 'Please enter owner name',
+        feeName: 'Fee Name',
+        feeNamePlaceholder: 'Please enter fee name',
+        callableWay: 'Callable Way',
+        callableWayPlaceholder: 'Please select callable way',
+        staffName: 'Staff Name',
+        staffNamePlaceholder: 'Please enter staff name',
+        state: 'State',
+        statePlaceholder: 'Please select state'
+      },
+      list: {
+        title: 'Call Records',
+        register: 'Register',
+        call: 'Call'
+      },
+      table: {
+        id: 'ID',
+        ownerName: 'Owner Name',
+        payerObjName: 'Payer Object',
+        feeName: 'Fee Name',
+        amountdOwed: 'Amount Owed',
+        timeRange: 'Time Range',
+        callableWayName: 'Callable Way',
+        staffName: 'Staff Name',
+        stateName: 'State',
+        remark: 'Remark',
+        createTime: 'Create Time'
+      },
+      write: {
+        title: 'Call Registration',
+        roomName: 'Room',
+        feeName: 'Call Fees',
+        remark: 'Remark',
+        remarkPlaceholder: 'Please enter remark',
+        success: 'Registration successful',
+        error: 'Registration failed'
+      },
+      delete: {
+        title: 'Delete Confirmation',
+        confirm: 'Are you sure to delete this call record?',
+        success: 'Delete successful',
+        error: 'Delete failed'
+      },
+      fetchError: 'Failed to fetch data',
+      selectRoomFirst: 'Please select a room first'
+    }
+  },
+  zh: {
+    oweFeeCallable: {
+      search: {
+        title: '查询条件',
+        ownerName: '业主名称',
+        ownerNamePlaceholder: '请输入业主名称',
+        feeName: '费用名称',
+        feeNamePlaceholder: '请输入费用名称',
+        callableWay: '催缴方式',
+        callableWayPlaceholder: '请选择催缴方式',
+        staffName: '催缴人',
+        staffNamePlaceholder: '请输入催缴人',
+        state: '状态',
+        statePlaceholder: '请选择状态'
+      },
+      list: {
+        title: '催缴记录',
+        register: '登记',
+        call: '催缴'
+      },
+      table: {
+        id: '编号',
+        ownerName: '业主名称',
+        payerObjName: '付费对象',
+        feeName: '费用名称',
+        amountdOwed: '催缴金额',
+        timeRange: '欠费时间段',
+        callableWayName: '催缴方式',
+        staffName: '催缴人',
+        stateName: '状态',
+        remark: '说明',
+        createTime: '创建时间'
+      },
+      write: {
+        title: '催缴登记',
+        roomName: '登记房屋',
+        feeName: '催缴费用',
+        remark: '催缴说明',
+        remarkPlaceholder: '请输入备注',
+        success: '登记成功',
+        error: '登记失败'
+      },
+      delete: {
+        title: '删除确认',
+        confirm: '确定删除欠费催缴记录吗？',
+        success: '删除成功',
+        error: '删除失败'
+      },
+      fetchError: '获取数据失败',
+      selectRoomFirst: '请先选择房屋'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/oweFeeCallableList.vue b/src/views/fee/oweFeeCallableList.vue
new file mode 100644
index 0000000..494f44f
--- /dev/null
+++ b/src/views/fee/oweFeeCallableList.vue
@@ -0,0 +1,256 @@
+<template>
+  <div class="owe-fee-callable-container">
+    <el-row :gutter="20">
+      <el-col :span="4" class="tree-container">
+        <room-tree-div ref="roomTree" @selectRoom="handleSelectRoom"></room-tree-div>
+      </el-col>
+      <el-col :span="20">
+        <el-card class="search-card">
+          <div slot="header" class="flex justify-between">
+            <span>{{ $t('oweFeeCallable.search.title') }}</span>
+          </div>
+          <el-form :inline="true" :model="searchForm" class="search-form text-left">
+            <el-form-item :label="$t('oweFeeCallable.search.ownerName')">
+              <el-input v-model="searchForm.ownerName"
+                :placeholder="$t('oweFeeCallable.search.ownerNamePlaceholder')"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('oweFeeCallable.search.feeName')">
+              <el-input v-model="searchForm.feeName"
+                :placeholder="$t('oweFeeCallable.search.feeNamePlaceholder')"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('oweFeeCallable.search.callableWay')">
+              <el-select v-model="searchForm.callableWay"
+                :placeholder="$t('oweFeeCallable.search.callableWayPlaceholder')" style="width:100%">
+                <el-option label="全部" value=""></el-option>
+                <el-option label="微信模板消息" value="WECHAT"></el-option>
+                <el-option label="短信" value="SMS"></el-option>
+                <el-option label="上门催缴" value="PRINT"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('oweFeeCallable.search.staffName')">
+              <el-input v-model="searchForm.staffName"
+                :placeholder="$t('oweFeeCallable.search.staffNamePlaceholder')"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('oweFeeCallable.search.state')">
+              <el-select v-model="searchForm.state" :placeholder="$t('oweFeeCallable.search.statePlaceholder')"
+                style="width:100%">
+                <el-option label="全部" value=""></el-option>
+                <el-option label="待催缴" value="W"></el-option>
+                <el-option label="催缴完成" value="C"></el-option>
+                <el-option label="催缴失败" value="F"></el-option>
+                <el-option label="催缴中" value="D"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleSearch">{{ $t('common.search') }}</el-button>
+              <el-button @click="handleReset">{{ $t('common.reset') }}</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+
+        <el-card class="list-card">
+          <div slot="header" class="flex justify-between">
+            <span>{{ roomName || $t('oweFeeCallable.list.title') }}</span>
+            <div style="float: right;">
+              <el-button type="primary" size="small" @click="handleWritePrint">{{ $t('oweFeeCallable.list.register')
+              }}</el-button>
+              <el-button type="primary" size="small" @click="handleAdd">{{ $t('oweFeeCallable.list.call') }}</el-button>
+            </div>
+          </div>
+          <el-table :data="tableData" border style="width: 100%" v-loading="loading">
+            <el-table-column prop="ofcId" :label="$t('oweFeeCallable.table.id')" align="center">
+            </el-table-column>
+            <el-table-column prop="ownerName" :label="$t('oweFeeCallable.table.ownerName')" align="center">
+            </el-table-column>
+            <el-table-column prop="payerObjName" :label="$t('oweFeeCallable.table.payerObjName')" align="center">
+            </el-table-column>
+            <el-table-column prop="feeName" :label="$t('oweFeeCallable.table.feeName')" align="center">
+            </el-table-column>
+            <el-table-column prop="amountdOwed" :label="$t('oweFeeCallable.table.amountdOwed')" align="center">
+            </el-table-column>
+            <el-table-column :label="$t('oweFeeCallable.table.timeRange')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.startTime }} ~ {{ scope.row.endTime }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="callableWayName" :label="$t('oweFeeCallable.table.callableWayName')" align="center">
+            </el-table-column>
+            <el-table-column prop="staffName" :label="$t('oweFeeCallable.table.staffName')" align="center">
+            </el-table-column>
+            <el-table-column prop="stateName" :label="$t('oweFeeCallable.table.stateName')" align="center">
+            </el-table-column>
+            <el-table-column prop="remark" :label="$t('oweFeeCallable.table.remark')" align="center" width="200">
+              <template slot-scope="scope">
+                <el-tooltip :content="scope.row.remark" placement="top">
+                  <div class="text-ellipsis">{{ scope.row.remark }}</div>
+                </el-tooltip>
+              </template>
+            </el-table-column>
+            <el-table-column prop="createTime" :label="$t('oweFeeCallable.table.createTime')" align="center">
+            </el-table-column>
+            <el-table-column :label="$t('common.operation')" align="center" width="150">
+              <template slot-scope="scope">
+                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">{{ $t('common.delete')
+                }}</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-pagination @size-change="handleSizeChange" @current-change="handlePageChange"
+            :current-page="pagination.current" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.size"
+            layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" class="pagination">
+          </el-pagination>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <write-owe-fee-callable ref="writeOweFeeCallable" @success="handleSuccess"></write-owe-fee-callable>
+    <delete-owe-fee-callable ref="deleteOweFeeCallable" @success="handleSuccess"></delete-owe-fee-callable>
+  </div>
+</template>
+
+<script>
+import { listOweFeeCallable } from '@/api/fee/oweFeeCallableApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import RoomTreeDiv from '@/components/room/roomTreeDiv'
+import WriteOweFeeCallable from '@/components/fee/writeOweFeeCallable'
+import DeleteOweFeeCallable from '@/components/fee/deleteOweFeeCallable'
+
+export default {
+  name: 'OweFeeCallableList',
+  components: {
+    RoomTreeDiv,
+    WriteOweFeeCallable,
+    DeleteOweFeeCallable
+  },
+  data() {
+    return {
+      loading: false,
+      roomName: '',
+      roomId: '',
+      searchForm: {
+        ownerName: '',
+        feeName: '',
+        callableWay: '',
+        staffName: '',
+        state: '',
+        payerObjId: ''
+      },
+      tableData: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      try {
+        this.loading = true
+        const params = {
+          page: this.pagination.current,
+          row: this.pagination.size,
+          communityId: this.communityId,
+          ...this.searchForm
+        }
+        const { data, total } = await listOweFeeCallable(params)
+        this.tableData = data
+        this.pagination.total = total
+      } catch (error) {
+        this.$message.error(this.$t('oweFeeCallable.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSearch() {
+      this.pagination.current = 1
+      this.getList()
+    },
+    handleReset() {
+      this.searchForm = {
+        ownerName: '',
+        feeName: '',
+        callableWay: '',
+        staffName: '',
+        state: '',
+        payerObjId: this.searchForm.payerObjId
+      }
+      this.handleSearch()
+    },
+    handleSelectRoom({ roomId, roomName }) {
+      this.roomId = roomId
+      this.roomName = roomName
+      this.searchForm.payerObjId = roomId
+      this.handleSearch()
+    },
+    handleWritePrint() {
+      if (!this.roomId) {
+        this.$message.warning(this.$t('oweFeeCallable.selectRoomFirst'))
+        return
+      }
+      this.$refs.writeOweFeeCallable.open({
+        roomId: this.roomId,
+        roomName: this.roomName
+      })
+    },
+    handleAdd() {
+      this.$router.push('/views/fee/addOweFeeCallable')
+    },
+    handleDelete(row) {
+      this.$refs.deleteOweFeeCallable.open(row)
+    },
+    handleSuccess() {
+      this.getList()
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.getList()
+    },
+    handlePageChange(val) {
+      this.pagination.current = val
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.owe-fee-callable-container {
+  padding: 20px;
+
+  .tree-container {
+    min-height: 450px;
+    overflow-y: auto;
+    background: #fff;
+    padding: 10px;
+    border-radius: 4px;
+  }
+
+  .search-card {
+    margin-bottom: 20px;
+
+    .search-form {
+      .el-form-item {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .list-card {
+    .pagination {
+      margin-top: 20px;
+      text-align: right;
+    }
+  }
+
+  .text-ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/fee/payFeeBatchLang.js b/src/views/fee/payFeeBatchLang.js
new file mode 100644
index 0000000..24bff4c
--- /dev/null
+++ b/src/views/fee/payFeeBatchLang.js
@@ -0,0 +1,150 @@
+export const messages = {
+  en: {
+    payFeeBatch: {
+      search: {
+        title: 'Search Conditions',
+        batchId: 'Please enter batch number',
+        state: 'Please select status',
+        createUserName: 'Please enter creator'
+      },
+      list: {
+        title: 'Fee Cancellation'
+      },
+      table: {
+        batchId: 'Batch Number',
+        createUserName: 'Employee',
+        createTime: 'Time',
+        remark: 'Cancellation Reason',
+        noRemark: 'None',
+        stateName: 'Audit Status',
+        msg: 'Audit Opinion',
+        operation: 'Operation'
+      },
+      state: {
+        normal: 'Normal',
+        applyCancel: 'Apply for Cancellation',
+        auditPass: 'Audit Passed',
+        auditFail: 'Audit Failed'
+      },
+      button: {
+        applyCancel: 'Apply for Cancellation',
+        audit: 'Audit'
+      },
+      message: {
+        auditSuccess: 'Audit successful'
+      }
+    },
+    applyDeleteFeeBatch: {
+      title: 'Fee Cancellation Application',
+      form: {
+        batchId: 'Batch Number',
+        createUserName: 'Employee',
+        createTime: 'Creation Time',
+        remark: 'Cancellation Reason'
+      },
+      rules: {
+        remarkRequired: 'Cancellation reason cannot be empty'
+      },
+      placeholder: {
+        remark: 'Please enter the cancellation reason'
+      },
+      message: {
+        success: 'Cancellation application submitted successfully'
+      }
+    },
+    audit: {
+      title: 'Audit Information',
+      form: {
+        state: 'Audit Status',
+        remark: 'Reason'
+      },
+      state: {
+        agree: 'Agree',
+        reject: 'Reject'
+      },
+      rules: {
+        stateRequired: 'Audit status cannot be empty',
+        remarkRequired: 'Reason cannot be empty',
+        remarkMaxLength: 'Reason cannot exceed 200 characters'
+      },
+      placeholder: {
+        state: 'Please audit',
+        remark: 'Please enter the reason (required)'
+      }
+    }
+  },
+  zh: {
+    payFeeBatch: {
+      search: {
+        title: '查询条件',
+        batchId: '请输入批次号',
+        state: '请选择状态',
+        createUserName: '请填写创建员工'
+      },
+      list: {
+        title: '取消费用'
+      },
+      table: {
+        batchId: '批次号',
+        createUserName: '员工',
+        createTime: '时间',
+        remark: '取消原因',
+        noRemark: '无',
+        stateName: '审核状态',
+        msg: '审核意见',
+        operation: '操作'
+      },
+      state: {
+        normal: '正常',
+        applyCancel: '申请取消',
+        auditPass: '审核通过',
+        auditFail: '审核失败'
+      },
+      button: {
+        applyCancel: '申请取消',
+        audit: '审核'
+      },
+      message: {
+        auditSuccess: '审核成功'
+      }
+    },
+    applyDeleteFeeBatch: {
+      title: '费用取消申请',
+      form: {
+        batchId: '批次号',
+        createUserName: '员工',
+        createTime: '创建时间',
+        remark: '取消原因'
+      },
+      rules: {
+        remarkRequired: '取消原因不能为空'
+      },
+      placeholder: {
+        remark: '请填写取消原因'
+      },
+      message: {
+        success: '取消申请提交成功'
+      }
+    },
+    audit: {
+      title: '审核信息',
+      form: {
+        state: '审核状态',
+        remark: '原因'
+      },
+      state: {
+        agree: '同意',
+        reject: '拒绝'
+      },
+      rules: {
+        stateRequired: '审核状态不能为空',
+        remarkRequired: '原因内容不能为空',
+        remarkMaxLength: '原因内容不能超过200字'
+      },
+      placeholder: {
+        state: '请审核',
+        remark: '请填写原因(必填)'
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/payFeeBatchList.vue b/src/views/fee/payFeeBatchList.vue
new file mode 100644
index 0000000..8a1b7cb
--- /dev/null
+++ b/src/views/fee/payFeeBatchList.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="pay-fee-batch-container animated fadeInRight">
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <el-card class="box-card">
+          <div slot="header" class="flex justify-between">
+            <span>{{ $t('payFeeBatch.search.title') }}</span>
+          </div>
+          <div class="search-content">
+            <el-row :gutter="20">
+              <el-col :span="6">
+                <el-input v-model="payFeeBatchInfo.conditions.batchId" :placeholder="$t('payFeeBatch.search.batchId')"
+                  clearable />
+              </el-col>
+              <el-col :span="6">
+                <el-select v-model="payFeeBatchInfo.conditions.state" :placeholder="$t('payFeeBatch.search.state')"
+                  style="width:100%">
+                  <el-option :label="$t('payFeeBatch.state.normal')" value="2006001" />
+                  <el-option :label="$t('payFeeBatch.state.applyCancel')" value="2007001" />
+                  <el-option :label="$t('payFeeBatch.state.auditPass')" value="2008001" />
+                  <el-option :label="$t('payFeeBatch.state.auditFail')" value="2009001" />
+                </el-select>
+              </el-col>
+              <el-col :span="6">
+                <el-input v-model="payFeeBatchInfo.conditions.createUserName"
+                  :placeholder="$t('payFeeBatch.search.createUserName')" clearable />
+              </el-col>
+              <el-col :span="6">
+                <el-button type="primary" @click="_queryPayFeeBatchMethod">
+                  <i class="el-icon-search"></i>
+                  {{ $t('common.search') }}
+                </el-button>
+                <el-button @click="_resetPayFeeBatchMethod">
+                  <i class="el-icon-refresh"></i>
+                  {{ $t('common.reset') }}
+                </el-button>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" style="margin-top:20px">
+      <el-col :span="24">
+        <el-card class="box-card">
+          <div slot="header" class="flex justify-between">
+            <span>{{ $t('payFeeBatch.list.title') }}</span>
+          </div>
+          <el-table :data="payFeeBatchInfo.payFeeBatchs" border style="width:100%">
+            <el-table-column prop="batchId" :label="$t('payFeeBatch.table.batchId')" align="center" />
+            <el-table-column prop="createUserName" :label="$t('payFeeBatch.table.createUserName')" align="center" />
+            <el-table-column prop="createTime" :label="$t('payFeeBatch.table.createTime')" align="center" />
+            <el-table-column prop="remark" :label="$t('payFeeBatch.table.remark')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.remark || $t('payFeeBatch.table.noRemark') }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="stateName" :label="$t('payFeeBatch.table.stateName')" align="center" />
+            <el-table-column prop="msg" :label="$t('payFeeBatch.table.msg')" align="center" />
+            <el-table-column :label="$t('common.operation')" align="center" width="200">
+              <template slot-scope="scope">
+                <el-button v-if="scope.row.state === '2006001'" size="mini" @click="_openApply(scope.row)">
+                  {{ $t('payFeeBatch.button.applyCancel') }}
+                </el-button>
+                <el-button v-if="scope.row.state === '2007001'" size="mini" type="primary"
+                  @click="_openPayFeeBatchAuditModel(scope.row)">
+                  {{ $t('payFeeBatch.button.audit') }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <el-pagination :current-page.sync="pagination.current" :page-sizes="[10, 20, 30, 50]"
+            :page-size="pagination.size" :total="pagination.total" layout="total, sizes, prev, pager, next, jumper"
+            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <apply-delete-fee-batch ref="applyDeleteFeeBatch" @success="handleSuccess" />
+    <audit ref="audit" @success="handleSuccess" />
+  </div>
+</template>
+
+<script>
+import { listPayFeeBatch, updatePayFeeBatch } from '@/api/fee/payFeeBatchApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import ApplyDeleteFeeBatch from '@/components/fee/applyDeleteFeeBatch'
+import Audit from '@/components/fee/audit'
+
+export default {
+  name: 'PayFeeBatchList',
+  components: {
+    ApplyDeleteFeeBatch,
+    Audit
+  },
+  data() {
+    return {
+      payFeeBatchInfo: {
+        payFeeBatchs: [],
+        conditions: {
+          communityId: '',
+          state: '',
+          batchId: '',
+          createUserName: ''
+        }
+      },
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.payFeeBatchInfo.conditions.communityId = getCommunityId()
+    this._listPayFeeBatchs(this.pagination.current, this.pagination.size)
+  },
+  methods: {
+    async _listPayFeeBatchs(page, size) {
+      try {
+        const params = {
+          ...this.payFeeBatchInfo.conditions,
+          page,
+          row: size
+        }
+        const { data, total } = await listPayFeeBatch(params)
+        this.payFeeBatchInfo.payFeeBatchs = data
+        this.pagination.total = total
+      } catch (error) {
+        console.error('获取数据失败:', error)
+      }
+    },
+    _queryPayFeeBatchMethod() {
+      this.pagination.current = 1
+      this._listPayFeeBatchs(this.pagination.current, this.pagination.size)
+    },
+    _resetPayFeeBatchMethod() {
+      this.payFeeBatchInfo.conditions = {
+        ...this.payFeeBatchInfo.conditions,
+        state: '',
+        batchId: '',
+        createUserName: ''
+      }
+      this._queryPayFeeBatchMethod()
+    },
+    _openApply(payFee) {
+      this.$refs.applyDeleteFeeBatch.open(payFee)
+    },
+    _openPayFeeBatchAuditModel(payFee) {
+      this.payFeeBatchInfo.payFeeBatch = payFee
+      this.$refs.audit.open()
+    },
+    async _auditPayFeeBatchState(auditInfo) {
+      try {
+        const payFeeBatch = {
+          ...this.payFeeBatchInfo.payFeeBatch,
+          state: auditInfo.state,
+          msg: auditInfo.remark
+        }
+        await updatePayFeeBatch(payFeeBatch)
+        this.$message.success(this.$t('payFeeBatch.message.auditSuccess'))
+        this._listPayFeeBatchs(this.pagination.current, this.pagination.size)
+      } catch (error) {
+        console.error('审核失败:', error)
+      }
+    },
+    handleSuccess() {
+      this._listPayFeeBatchs(this.pagination.current, this.pagination.size)
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this._listPayFeeBatchs(this.pagination.current, this.pagination.size)
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this._listPayFeeBatchs(this.pagination.current, this.pagination.size)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pay-fee-batch-container {
+  padding: 20px;
+
+  .search-content {
+    margin-bottom: 20px;
+  }
+
+  .el-pagination {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/fee/staffFeeManageLang.js b/src/views/fee/staffFeeManageLang.js
new file mode 100644
index 0000000..13fed9e
--- /dev/null
+++ b/src/views/fee/staffFeeManageLang.js
@@ -0,0 +1,50 @@
+export const messages = {
+  en: {
+    staffFeeManage: {
+      search: {
+        title: 'Search Conditions',
+        userCode: 'Staff Code',
+        userCodePlaceholder: 'Please enter staff code',
+        startTime: 'Start Time',
+        startTimePlaceholder: 'Please select start time',
+        endTime: 'End Time',
+        endTimePlaceholder: 'Please select end time'
+      },
+      list: {
+        title: 'Staff Fee Management'
+      },
+      table: {
+        userCode: 'Staff Code',
+        userName: 'Staff Name',
+        receivableAmount: 'Receivable Amount',
+        receivedAmount: 'Received Amount',
+        yuan: 'Yuan'
+      },
+      fetchError: 'Failed to fetch staff fee data'
+    }
+  },
+  zh: {
+    staffFeeManage: {
+      search: {
+        title: '查询条件',
+        userCode: '员工编码',
+        userCodePlaceholder: '请填写员工编码',
+        startTime: '开始时间',
+        startTimePlaceholder: '请选择开始时间',
+        endTime: '结束时间',
+        endTimePlaceholder: '请选择结束时间'
+      },
+      list: {
+        title: '员工收费管理'
+      },
+      table: {
+        userCode: '员工编码',
+        userName: '员工名称',
+        receivableAmount: '应收金额',
+        receivedAmount: '实收金额',
+        yuan: '元'
+      },
+      fetchError: '获取员工收费数据失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/staffFeeManageList.vue b/src/views/fee/staffFeeManageList.vue
new file mode 100644
index 0000000..3b495bf
--- /dev/null
+++ b/src/views/fee/staffFeeManageList.vue
@@ -0,0 +1,194 @@
+<template>
+  <div class="staff-fee-manage-container animated fadeInRight">
+    <el-row :gutter="20" class="mb-20">
+      <el-col :span="24">
+        <el-card>
+          <div slot="header" class="flex justify-between">
+            <span>{{ $t('staffFeeManage.search.title') }}</span>
+          </div>
+          <el-form :inline="true" :model="searchForm" class="demo-form-inline">
+            <el-form-item :label="$t('staffFeeManage.search.userCode')">
+              <el-input
+                v-model="searchForm.userCode"
+                :placeholder="$t('staffFeeManage.search.userCodePlaceholder')"
+                clearable
+              />
+            </el-form-item>
+            <el-form-item :label="$t('staffFeeManage.search.startTime')">
+              <el-date-picker
+                v-model="searchForm.startTime"
+                type="datetime"
+                :placeholder="$t('staffFeeManage.search.startTimePlaceholder')"
+                value-format="yyyy-MM-dd HH:mm:ss"
+              />
+            </el-form-item>
+            <el-form-item :label="$t('staffFeeManage.search.endTime')">
+              <el-date-picker
+                v-model="searchForm.endTime"
+                type="datetime"
+                :placeholder="$t('staffFeeManage.search.endTimePlaceholder')"
+                value-format="yyyy-MM-dd HH:mm:ss"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleSearch">
+                {{ $t('common.search') }}
+              </el-button>
+              <el-button @click="handleReset">
+                {{ $t('common.reset') }}
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <el-card>
+          <div slot="header" class="flex justify-between">
+            <span>{{ $t('staffFeeManage.list.title') }}</span>
+            <el-button
+              type="primary"
+              size="small"
+              class="float-right"
+              @click="handleExport"
+            >
+              {{ $t('common.export') }}
+            </el-button>
+          </div>
+          <el-table
+            v-loading="loading"
+            :data="tableData"
+            border
+            style="width: 100%"
+          >
+            <el-table-column
+              prop="userId"
+              :label="$t('staffFeeManage.table.userCode')"
+              align="center"
+            />
+            <el-table-column
+              prop="userName"
+              :label="$t('staffFeeManage.table.userName')"
+              align="center"
+            />
+            <el-table-column
+              prop="receivableAmount"
+              :label="$t('staffFeeManage.table.receivableAmount')"
+              align="center"
+            >
+              <template slot-scope="scope">
+                {{ scope.row.receivableAmount }} {{ $t('staffFeeManage.table.yuan') }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="receivedAmount"
+              :label="$t('staffFeeManage.table.receivedAmount')"
+              align="center"
+            >
+              <template slot-scope="scope">
+                {{ scope.row.receivedAmount }} {{ $t('staffFeeManage.table.yuan') }}
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-pagination
+            :current-page="pagination.current"
+            :page-sizes="[10, 20, 30, 50]"
+            :page-size="pagination.size"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="pagination.total"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getStaffFeeList } from '@/api/fee/staffFeeManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'StaffFeeManageList',
+  data() {
+    return {
+      loading: false,
+      searchForm: {
+        communityId: '',
+        userCode: '',
+        startTime: '',
+        endTime: ''
+      },
+      tableData: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.searchForm.communityId = getCommunityId()
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      try {
+        this.loading = true
+        const params = {
+          page: this.pagination.current,
+          row: this.pagination.size,
+          ...this.searchForm
+        }
+        const { data, total } = await getStaffFeeList(params)
+        this.tableData = data
+        this.pagination.total = total
+      } catch (error) {
+        this.$message.error(this.$t('staffFeeManage.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSearch() {
+      this.pagination.current = 1
+      this.getList()
+    },
+    handleReset() {
+      this.searchForm = {
+        communityId: getCommunityId(),
+        userCode: '',
+        startTime: '',
+        endTime: ''
+      }
+      this.pagination.current = 1
+      this.getList()
+    },
+    handleExport() {
+      // 导出逻辑
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.staff-fee-manage-container {
+  padding: 20px;
+  .mb-20 {
+    margin-bottom: 20px;
+  }
+  .float-right {
+    float: right;
+  }
+}
+</style>
\ No newline at end of file
--
libgit2 0.21.4