房屋收费页面开发完成

wuxw
1 parent 7a03ee5c
Showing 114 changed files with 10063 additions and 624 deletions
src/api/fee/addProxyFeeApi.js
src/api/fee/batchPayFeeOrderApi.js
src/api/fee/carDetailOwnerApi.js
src/api/fee/deleteFeeApi.js
src/api/fee/deleteFeeRuleApi.js
src/api/fee/deleteOweFeeCallableApi.js
src/api/fee/doImportCreateFeeApi.js
src/api/fee/downloadCollectionLetterOrderApi.js
src/api/fee/editFeeApi.js
src/api/fee/editFeeRuleApi.js
src/api/fee/exportFeeImportExcelApi.js
src/api/fee/feeDetailFeeRuleApi.js
src/api/fee/feeDetailRuleBillApi.js
src/api/fee/finishFeeRuleApi.js
src/api/fee/inputSearchRoomApi.js
src/api/fee/inputSearchRoomByOwnerApi.js
src/api/fee/ownerDetailAccountApi.js
src/api/fee/ownerDetailAccountReceiptApi.js
src/api/fee/prestoreAccountApi.js
src/api/fee/propertyFeeApi.js
+import request from '@/utils/request'
+
+export function saveProxyFee(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/meterWater.saveProxyFee',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to save proxy fee'))
+      }
+    }).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 || 'Failed to list fee configs'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+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)
+    })
+  })
+}
+
+// 查询费用对象
+export function listFeeObj(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feeApi/listFeeObj',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询业主账户
+export function queryCommunityOwnerAccount(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/account.queryCommunityOwnerAccount',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询押金信息
+export function queryFeeDeposit(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.queryFeeDeposit',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 退押金
+export function refundFeeDeposit(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.refundFeeDeposit',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 批量缴费
+export function payBatchFee(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.payBatchFee',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 扫码支付
+export function qrCodePayment(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/payment.qrCodePayment',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 检查支付状态
+export function checkPayFinish(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/payment.checkPayFinish',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询打印页面
+export function listFeePrintPage(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feePrintPage.listFeePrintPage',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function queryOwners(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/owner.queryOwners',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code == 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to query owners'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function deleteFee(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.deleteFee',
+      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
+import request from '@/utils/request'
+
+export function deletePayFeeRule(data) {
+  return request({
+    url: '/payFeeRule.deletePayFeeRule',
+    method: 'post',
+    data
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+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 || 'Failed to delete owe fee callable'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function importData(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/assetImport/importData',
+      method: 'post',
+      data,
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to import data'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function exportData(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 || 'Failed to export data'))
+      }
+    }).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 || 'Failed to query floors'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function updateFee(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.updateFee',
+      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
+import request from '@/utils/request'
+
+export function updatePayFeeRule(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/payFeeRule.updatePayFeeRule',
+      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
+import request from '@/utils/request'
+
+export function exportData(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 || 'Failed to export data'))
+      }
+    }).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 || 'Failed to list fee configs'))
+      }
+    }).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 || 'Failed to query floors'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function listPayFeeRule(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/payFeeRule.listPayFeeRule',
+      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
+import request from '@/utils/request'
+
+export function listPayFeeRuleBill(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/payFeeRule.listPayFeeRuleBill',
+      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
+import request from '@/utils/request'
+
+export function updatePayFeeRule(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/payFeeRule.updatePayFeeRule',
+      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
+import request from '@/utils/request'
+
+export function queryRooms(params) {
+  return request({
+    url: '/room.queryRooms',
+    method: 'get',
+    params
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function queryRoomsByOwner(params) {
+  return request({
+    url: '/room.queryRoomsByOwner',
+    method: 'get',
+    params
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function queryCommunityOwnerAccount(params) {
+  return request({
+    url: '/account.queryCommunityOwnerAccount',
+    method: 'get',
+    params
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function listAccountReceipt(params) {
+  return request({
+    url: '/receipt.listAccountReceipt',
+    method: 'get',
+    params
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function ownerPrestoreAccount(data) {
+  return request({
+    url: '/account.ownerPrestoreAccount',
+    method: 'post',
+    data
+  })
+}
+
+export function queryOwners(params) {
+  return request({
+    url: '/owner.queryOwners',
+    method: 'get',
+    params
+  })
+}
+
+export function queryRoomsByOwner(params) {
+  return request({
+    url: '/room.queryRoomsByOwner',
+    method: 'get',
+    params
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+// 查询费用明细列表
+export function queryFeeDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.queryFeeDetail',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询主费用信息
+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)
+    })
+  })
+}
+
+// 查询房间信息
+export function queryRooms(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/room.queryRooms',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).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
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 提交退费申请
+export function saveReturnPayFee(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/returnPayFee.saveReturnPayFee',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询费用折扣信息
+export function queryFeeDetailDiscount(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feeDiscount/queryFeeDetailDiscount',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function saveRoomCreateFee(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.saveRoomCreateFee',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to save room create fee'))
+      }
+    }).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 || 'Failed to list fee configs'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+// 查询房间列表
+export function queryRooms(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/room.queryRooms',
+      method: 'get',
+      params
+    })
+      .then(response => {
+        const res = response.data
+          resolve(res)
+      })
+      .catch(error => {
+        reject(error)
+      })
+  })
+}
+
+// 导出费用导入模板
+export function exportFeeImportExcel(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 importCreateFee(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.importCreateFee',
+      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)
+      })
+  })
+}
+
+// 批量创建费用
+export function batchCreateFee(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.batchCreateFee',
+      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)
+      })
+  })
+}
+
+// 下载催缴单
+export function downloadCollectionLetter(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.downloadCollectionLetter',
+      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
+import request from '@/utils/request'
+
+export function listOweFeeCallable(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/oweFeeCallable.listOweFeeCallable',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code == 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to list owe fee callable'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function queryFeeReceipt(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feeReceipt/queryFeeReceipt',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code == 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to query fee receipt'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+export function listFeePrintPage(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feePrintPage.listFeePrintPage',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code == 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to list fee print pages'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+export function queryOwnerCars(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/owner.queryOwnerCars',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code == 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to query owner cars'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+export function queryContract(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/queryContract',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code == 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to query contract'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function queryFeeDetail(params) {
+  return request({
+    url: '/fee.queryFeeDetail',
+    method: 'get',
+    params
+  })
+}
+
+export function generatorReceipt(data) {
+  return request({
+    url: '/receipt.generatorReceipt',
+    method: 'post',
+    data
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function listMeterWaters(params) {
+  return request({
+    url: '/meterWater.listMeterWaters',
+    method: 'get',
+    params
+  })
+}
+
+export function listMeterTypes(params) {
+  return request({
+    url: '/meterType.listMeterType',
+    method: 'get',
+    params
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function queryRoomsByOwner(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/room.queryRoomsByOwner',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+
+        resolve(res)
+
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function queryFeeDeposit(params) {
+  return request({
+    url: '/fee.queryFeeDeposit',
+    method: 'get',
+    params
+  })
+}
 \ No newline at end of file
+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)
+    })
+  })
+}
+
+export function listFeeConfigs(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feeConfig.listFeeConfigs',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+        resolve(res)
+
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+export function listMonthFee(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.listMonthFee',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+
+        resolve(res)
+
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function importTempData(data) {
+  return request({
+    url: '/importRoomFee/importTempData',
+    method: 'post',
+    data
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+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 || 'Failed to write owe fee callable'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+export function listFee(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.listFee',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code == 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to list fees'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
 <template>
-  <el-dialog
-    :title="$t('contract.selectOwner')"
-    :visible.sync="visible"
-    width="80%"
-    :before-close="handleClose">
-    
+  <el-dialog :title="$t('contract.selectOwner')" :visible.sync="visible" width="80%" :before-close="handleClose">
+
     <div class="search-wrapper">
       <el-row :gutter="20">
         <el-col :span="8">
-          <el-input
-            v-model="searchOwnerInfo.roomName"
-            :placeholder="$t('contract.inputRoomFullNum')">
+          <el-input v-model="searchOwnerInfo.roomName" :placeholder="$t('contract.inputRoomFullNum')">
           </el-input>
         </el-col>
         <el-col :span="8">
-          <el-input
-            v-model="searchOwnerInfo._currentOwnerName"
-            :placeholder="$t('contract.inputOwnerName')">
+          <el-input v-model="searchOwnerInfo._currentOwnerName" :placeholder="$t('contract.inputOwnerName')">
           </el-input>
         </el-col>
         <el-col :span="8">
@@ -27,65 +19,32 @@
         </el-col>
       </el-row>
     </div>
-    
-    <el-table
-      :data="searchOwnerInfo.owners"
-      border
-      style="width: 100%"
-      height="400">
-      <el-table-column
-        prop="memberId"
-        :label="$t('contract.ownerId')"
-        align="center">
+
+    <el-table :data="searchOwnerInfo.owners" border style="width: 100%" height="400">
+      <el-table-column prop="memberId" :label="$t('contract.ownerId')" align="center">
       </el-table-column>
-      <el-table-column
-        prop="name"
-        :label="$t('contract.name')"
-        align="center">
+      <el-table-column prop="name" :label="$t('contract.name')" align="center">
       </el-table-column>
-      <el-table-column
-        prop="personTypeName"
-        :label="$t('contract.personType')"
-        align="center">
+      <el-table-column prop="personTypeName" :label="$t('contract.personType')" align="center">
       </el-table-column>
-      <el-table-column
-        prop="personRoleName"
-        :label="$t('contract.personRole')"
-        align="center">
+      <el-table-column prop="personRoleName" :label="$t('contract.personRole')" align="center">
       </el-table-column>
-      <el-table-column
-        prop="idCard"
-        :label="$t('contract.idCard')"
-        align="center">
+      <el-table-column prop="idCard" :label="$t('contract.idCard')" align="center">
       </el-table-column>
-      <el-table-column
-        prop="link"
-        :label="$t('contract.contact')"
-        align="center">
+      <el-table-column prop="link" :label="$t('contract.contact')" align="center">
       </el-table-column>
-      <el-table-column
-        :label="$t('common.operation')"
-        align="center"
-        width="120">
+      <el-table-column :label="$t('common.operation')" align="center" width="120">
         <template slot-scope="scope">
-          <el-button
-            type="primary"
-            size="mini"
-            @click="chooseOwner(scope.row)">
+          <el-button type="primary" size="mini" @click="chooseOwner(scope.row)">
             {{ $t('contract.select') }}
           </el-button>
         </template>
       </el-table-column>
     </el-table>
-    
+
     <div class="pagination-wrapper">
-      <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"
+      <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">
       </el-pagination>
     </div>
@@ -94,6 +53,7 @@
 <script>
 import { queryOwners } from '@/api/contract/addContractApi'
+import { getCommunityId } from '@/api/community/communityApi'
 export default {
   name: 'SearchOwner',
@@ -133,12 +93,12 @@ export default {
       const params = {
         page: _page,
         row: _row,
-        communityId: this.$store.getters.communityId,
+        communityId: getCommunityId(),
         name: this.searchOwnerInfo._currentOwnerName.trim(),
         roomName: this.searchOwnerInfo.roomName.trim(),
         ownerTypeCd: this.searchOwnerInfo.ownerTypeCd
       }
-      
+
       queryOwners(params).then(response => {
         this.searchOwnerInfo.owners = response.data
         this.page.total = response.records
@@ -190,7 +150,7 @@ export default {
   text-align: right;
 }
-.el-button + .el-button {
+.el-button+.el-button {
   margin-left: 10px;
 }
 </style>
 \ No newline at end of file
@@ -66,6 +66,7 @@
 <script>
 import { queryApplyRoomDiscountType ,listRoomsWhereFeeSet} from '@/api/fee/applyRoomDiscountManageApi'
 import UploadImageUrl from '@/components/upload/UploadImageUrl'
+import { getCommunityId } from '@/api/community/communityApi'
 export default {
   name: 'AddApplyRoomDiscount',
@@ -231,7 +232,7 @@ export default {
     },
     async saveApplyRoomDiscount() {
       try {
-        this.form.communityId = this.$store.getters.communityId
+        this.form.communityId = getCommunityId()
         await this.$api.applyRoomDiscount.saveApplyRoomDiscount(this.form)
         this.$message.success(this.$t('applyRoomDiscount.message.saveSuccess'))
         this.visible = false
+<template>
+  <el-dialog :title="$t('addProxyFee.title')" :visible.sync="visible" width="70%" :before-close="handleClose">
+    <el-form ref="form" :model="formData" label-width="120px">
+      <el-form-item :label="$t('addProxyFee.feeType')" prop="feeTypeCd">
+        <el-select v-model="formData.feeTypeCd" @change="handleFeeTypeChange"
+          :placeholder="$t('addProxyFee.feeTypePlaceholder')" style="width: 100%">
+          <el-option v-for="item in feeTypeOptions" :key="item.value" :label="item.label"
+            :value="item.value"></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item :label="$t('addProxyFee.feeItem')" prop="configId">
+        <el-select v-model="formData.configId" @change="handleConfigChange"
+          :placeholder="$t('addProxyFee.feeItemPlaceholder')" style="width: 100%">
+          <el-option v-for="item in feeConfigOptions" :key="item.configId" :label="item.feeName"
+            :value="item.configId"></el-option>
+        </el-select>
+        <span class="tip">{{ $t('addProxyFee.feeItemTip') }}</span>
+      </el-form-item>
+
+      <el-form-item :label="$t('addProxyFee.chargeObject')">
+        <el-input v-model="formData.ownerName" disabled
+          :placeholder="$t('addProxyFee.chargeObjectPlaceholder')"></el-input>
+      </el-form-item>
+
+      <template v-if="formData.feeTypeCd !== '888800010014'">
+        <el-form-item :label="$t('addProxyFee.consumption')" prop="consumption">
+          <el-input v-model="formData.consumption" @blur="handleConsumptionBlur"
+            :placeholder="$t('addProxyFee.consumptionPlaceholder')"></el-input>
+        </el-form-item>
+
+        <el-form-item :label="$t('addProxyFee.amount')" prop="amount">
+          <el-input v-model="formData.amount" @blur="handleAmountBlur"
+            :placeholder="$t('addProxyFee.amountPlaceholder')"></el-input>
+        </el-form-item>
+      </template>
+
+      <template v-else>
+        <el-form-item :label="$t('addProxyFee.quantity')" prop="consumption">
+          <el-input v-model="formData.consumption" @blur="handleConsumptionBlur"
+            :placeholder="$t('addProxyFee.consumptionPlaceholder')"></el-input>
+        </el-form-item>
+
+        <el-form-item :label="$t('addProxyFee.amount')">
+          <el-input v-model="formData.amount" disabled :placeholder="$t('addProxyFee.amountPlaceholder')"></el-input>
+        </el-form-item>
+      </template>
+
+      <el-form-item :label="$t('addProxyFee.startTime')" prop="startTime">
+        <el-date-picker v-model="formData.startTime" type="date" :placeholder="$t('addProxyFee.startTimePlaceholder')"
+          value-format="yyyy-MM-dd" @change="validateStartTime"></el-date-picker>
+      </el-form-item>
+
+      <el-form-item :label="$t('addProxyFee.endTime')" prop="endTime">
+        <el-date-picker v-model="formData.endTime" type="date" :placeholder="$t('addProxyFee.endTimePlaceholder')"
+          value-format="yyyy-MM-dd" @change="validateEndTime"></el-date-picker>
+      </el-form-item>
+    </el-form>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleSubmit">{{ $t('common.save') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { saveProxyFee, listFeeConfigs } from '@/api/fee/addProxyFeeApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import { dateFormat } from '@/utils/dateUtil'
+
+export default {
+  name: 'AddProxyFee',
+  props: {
+    callBackListener: String,
+    callBackFunction: String
+  },
+  data() {
+    return {
+      visible: false,
+      formData: {
+        remark: '',
+        roomId: '',
+        objId: '',
+        objName: '',
+        feeTypeCd: '',
+        feeConfigs: [],
+        amount: '',
+        consumption: '',
+        configId: '',
+        ownerName: '',
+        objType: '3333',
+        startTime: dateFormat(new Date()),
+        endTime: dateFormat(new Date())
+      },
+      feeTypeOptions: [
+        { value: '888800010015', label: this.$t('addProxyFee.waterFee') },
+        { value: '888800010016', label: this.$t('addProxyFee.electricityFee') },
+        { value: '888800010014', label: this.$t('addProxyFee.otherFee') }
+      ],
+      feeConfigOptions: [],
+      rules: {
+        amount: [
+          { required: true, message: this.$t('addProxyFee.validate.amountRequired'), trigger: 'blur' },
+          { pattern: /^\d+(\.\d{1,2})?$/, message: this.$t('addProxyFee.validate.amountFormat'), trigger: 'blur' }
+        ],
+        consumption: [
+          { required: true, message: this.$t('addProxyFee.validate.consumptionRequired'), trigger: 'blur' },
+          { pattern: /^\d+(\.\d{1,2})?$/, message: this.$t('addProxyFee.validate.consumptionFormat'), trigger: 'blur' }
+        ],
+        objId: [
+          { required: true, message: this.$t('addProxyFee.validate.roomRequired'), trigger: 'blur' }
+        ],
+        configId: [
+          { required: true, message: this.$t('addProxyFee.validate.feeRequired'), trigger: 'change' }
+        ],
+        startTime: [
+          { required: true, message: this.$t('addProxyFee.validate.startTimeRequired'), trigger: 'blur' }
+        ],
+        endTime: [
+          { required: true, message: this.$t('addProxyFee.validate.endTimeRequired'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open(params) {
+      this.resetForm()
+      if (params.objType) {
+        this.formData.objType = params.objType
+      }
+      this.formData.roomId = params.roomId
+      this.formData.objId = params.roomId
+      this.formData.objName = params.roomName
+      this.formData.ownerName = `${params.roomName}(${params.ownerName})`
+      this.visible = true
+    },
+
+    handleFeeTypeChange(value) {
+      this.formData.amount = ''
+      this.formData.consumption = ''
+      this.formData.configId = ''
+      this.loadFeeConfigs(value)
+    },
+
+    loadFeeConfigs(feeTypeCd) {
+      listFeeConfigs({
+        page: 1,
+        row: 20,
+        communityId: getCommunityId(),
+        feeTypeCd,
+        isDefault: 'F',
+        computingFormula: '6006',
+        valid: '1'
+      }).then(response => {
+        this.feeConfigOptions = response.data.feeConfigs
+      })
+    },
+
+    handleConfigChange() {
+      this.formData.amount = ''
+      this.formData.consumption = ''
+    },
+
+    getCurrentConfig() {
+      return this.feeConfigOptions.find(
+        item => this.formData.configId === item.configId && item.computingFormula === '6006'
+      )
+    },
+
+    handleAmountBlur() {
+      const config = this.getCurrentConfig()
+      const amount = parseFloat(this.formData.amount)
+
+      if (!config) {
+        this.$message.error(this.$t('addProxyFee.validate.invalidConfig'))
+        this.formData.amount = ''
+        this.formData.consumption = ''
+        return
+      }
+
+      if (amount < config.additionalAmount) {
+        this.$message.error(this.$t('addProxyFee.validate.amountTooSmall'))
+        this.formData.amount = ''
+        this.formData.consumption = ''
+        return
+      }
+
+      const consumption = (amount - config.additionalAmount) / config.squarePrice
+      this.formData.consumption = consumption.toFixed(2)
+    },
+
+    handleConsumptionBlur() {
+      const config = this.getCurrentConfig()
+      const consumption = parseFloat(this.formData.consumption)
+
+      if (!config) {
+        this.$message.error(this.$t('addProxyFee.validate.invalidConfig'))
+        this.formData.amount = ''
+        this.formData.consumption = ''
+        return
+      }
+
+      const amount = config.squarePrice * consumption + parseFloat(config.additionalAmount)
+      this.formData.amount = amount.toFixed(2)
+    },
+
+    validateStartTime(value) {
+      const start = new Date(value)
+      const end = new Date(this.formData.endTime)
+      if (start >= end) {
+        this.$message.error(this.$t('addProxyFee.validate.startBeforeEnd'))
+        this.formData.startTime = ''
+      }
+    },
+
+    validateEndTime(value) {
+      const start = new Date(this.formData.startTime)
+      const end = new Date(value)
+      if (start >= end) {
+        this.$message.error(this.$t('addProxyFee.validate.endAfterStart'))
+        this.formData.endTime = ''
+      }
+    },
+
+    handleSubmit() {
+      this.$refs.form.validate(valid => {
+        if (!valid) return
+
+        const params = {
+          ...this.formData,
+          communityId: getCommunityId()
+        }
+
+
+
+        saveProxyFee(params).then(() => {
+          this.$message.success(this.$t('addProxyFee.successMessage'))
+          this.$emit('success')
+          this.handleClose()
+        }).catch(error => {
+          this.$message.error(error.message)
+        })
+      })
+    },
+
+    resetForm() {
+      if (this.$refs.form) {
+        this.$refs.form.resetFields()
+      }
+      this.formData = {
+        remark: '',
+        roomId: '',
+        objId: '',
+        objName: '',
+        feeTypeCd: '',
+        feeConfigs: [],
+        amount: '',
+        consumption: '',
+        configId: '',
+        ownerName: '',
+        objType: '3333',
+        startTime: dateFormat(new Date()),
+        endTime: dateFormat(new Date())
+      }
+    },
+
+    handleClose() {
+      this.visible = false
+      this.resetForm()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tip {
+  font-size: 12px;
+  color: #909399;
+}
+</style>
 \ No newline at end of file
+<template>
+  <div>
+    <el-button @click="openModal">{{ $t('addProxyFeeDemo.openModal') }}</el-button>
+    <add-proxy-fee ref="addProxyFee" @success="handleSuccess"></add-proxy-fee>
+  </div>
+</template>
+
+<script>
+import AddProxyFee from './addProxyFee'
+
+export default {
+  name: 'AddProxyFeeDemo',
+  components: {
+    AddProxyFee
+  },
+  methods: {
+    openModal() {
+      this.$refs.addProxyFee.open({
+        roomId: '123',
+        roomName: '1-2-101',
+        ownerName: 'Test Owner'
+      })
+    },
+    handleSuccess() {
+      this.$message.success(this.$t('addProxyFeeDemo.successMessage'))
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="batchFeeCycleInfo.fee.feeName"
+    :visible.sync="visible"
+    width="500px"
+    :before-close="handleClose"
+  >
+    <el-form label-width="120px">
+      <el-form-item :label="$t('batchFeeCycle.paymentCycle')">
+        <el-select 
+          v-model="batchFeeCycleInfo.tempCycle" 
+          @change="changeTempCycle"
+          style="width:100%"
+          :placeholder="$t('batchFeeCycle.selectCycleTip')"
+        >
+          <el-option 
+            value="-100" 
+            :label="$t('batchFeeCycle.default')"
+          ></el-option>
+          <el-option 
+            value="-102" 
+            :label="$t('batchFeeCycle.customCycle')"
+          ></el-option>
+          <el-option 
+            value="-101" 
+            :label="$t('batchFeeCycle.customAmount')"
+          ></el-option>
+          <el-option 
+            value="-103" 
+            :label="$t('batchFeeCycle.customEndTime')"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item 
+        v-if="batchFeeCycleInfo.tempCycle === '-101'" 
+        :label="$t('batchFeeCycle.customAmount')"
+      >
+        <el-input
+          type="number"
+          v-model="batchFeeCycleInfo.receivedAmount"
+          :placeholder="$t('batchFeeCycle.enterCustomAmount')"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item 
+        v-if="batchFeeCycleInfo.tempCycle === '-102'" 
+        :label="$t('batchFeeCycle.actualCycle')"
+      >
+        <el-input
+          type="number"
+          v-model="batchFeeCycleInfo.cycles"
+          :placeholder="$t('batchFeeCycle.enterActualCycle')"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item 
+        v-if="batchFeeCycleInfo.tempCycle === '-103'" 
+        :label="$t('batchFeeCycle.endTime')"
+      >
+        <el-date-picker
+          v-model="batchFeeCycleInfo.custEndTime"
+          type="date"
+          style="width:100%"
+          :placeholder="$t('batchFeeCycle.selectEndTime')"
+          value-format="yyyy-MM-dd"
+        ></el-date-picker>
+      </el-form-item>
+    </el-form>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="_doSubmitFeeCycle">{{ $t('common.confirm') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'BatchFeeCycle',
+  data() {
+    return {
+      visible: false,
+      batchFeeCycleInfo: {
+        cycles: '',
+        tempCycle: '',
+        custEndTime: '',
+        receivedAmount: '',
+        fee: {}
+      }
+    }
+  },
+  methods: {
+    open(fee) {
+      this.batchFeeCycleInfo = {
+        cycles: fee.cycles,
+        tempCycle: fee.tempCycle,
+        receivedAmount: fee.receivedAmount,
+        fee: { ...fee }
+      }
+      this.visible = true
+    },
+
+    handleClose() {
+      this.visible = false
+    },
+
+    changeTempCycle() {
+      const tempCycle = this.batchFeeCycleInfo.tempCycle + ""
+      if (tempCycle !== '-100') {
+        this.batchFeeCycleInfo.cycles = "1"
+      }
+    },
+
+    _doSubmitFeeCycle() {
+      const updatedFee = {
+        ...this.batchFeeCycleInfo.fee,
+        tempCycle: this.batchFeeCycleInfo.tempCycle,
+        cycles: this.batchFeeCycleInfo.cycles,
+        custEndTime: this.batchFeeCycleInfo.custEndTime,
+        receivedAmount: this.batchFeeCycleInfo.receivedAmount
+      }
+
+      this.$emit('changeMonth', updatedFee)
+      this.handleClose()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog__body {
+  padding: 20px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <div>
+    <el-dialog :title="$t('batchPayConfirm.title')" :visible.sync="visible" width="600px" :before-close="handleClose">
+      <el-form label-width="120px">
+        <el-form-item :label="$t('batchPayConfirm.amount')">
+          <span>{{ batchPayConfirmInfo.feePrices }} {{ $t('batchPayConfirm.yuan') }}</span>
+        </el-form-item>
+        <el-form-item :label="$t('batchPayConfirm.accountAmount')">
+          <span>{{ batchPayConfirmInfo.accountAmount }} {{ $t('batchPayConfirm.yuan') }}</span>
+        </el-form-item>
+        <el-form-item :label="$t('batchPayConfirm.paymentMethod')">
+          <el-select v-model="batchPayConfirmInfo.primeRate" style="width:100%"
+            :placeholder="$t('batchPayConfirm.selectPaymentMethod')">
+            <el-option v-for="item in filteredPrimeRates" :key="item.statusCd" :label="item.name"
+              :value="item.statusCd"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="batchPayConfirmInfo.payType === 'qrCode'">
+          <el-input v-model="batchPayConfirmInfo.authCode" :placeholder="$t('batchPayConfirm.scanCodeTip')"
+            @keyup.enter.native="_qrCodePayFee"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="handleClose">{{ $t('common.close') }}</el-button>
+        <el-button type="primary" @click="_doPayFee" v-if="batchPayConfirmInfo.payType === 'common'">{{
+          $t('batchPayConfirm.confirmPay') }}</el-button>
+      </span>
+    </el-dialog>
+
+    <el-dialog :title="$t('batchPayConfirm.payResult')" :visible.sync="resultVisible" width="500px">
+      <div class="result-content">
+        <p>{{ $t('batchPayConfirm.paySuccess') }}</p>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="_back">{{ $t('common.back') }}</el-button>
+        <el-button type="primary" @click="_printAndBack('ON')">{{ $t('batchPayConfirm.mergePrint') }}</el-button>
+        <el-button type="primary" @click="_printAndBack('OFF')">{{ $t('batchPayConfirm.printReceipt') }}</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getCommunityId, getDict } from '@/api/community/communityApi'
+import { payBatchFee, qrCodePayment, checkPayFinish, listFeePrintPage } from '@/api/fee/batchPayFeeOrderApi'
+
+export default {
+  name: 'BatchPayConfirm',
+  data() {
+    return {
+      visible: false,
+      resultVisible: false,
+      batchPayConfirmInfo: {
+        payType: '',
+        fees: [],
+        primeRate: '',
+        primeRates: [],
+        payerObjName: '',
+        orderId: '',
+        paymentPoolId: '',
+        authCode: '',
+        feePrices: '',
+        detailIds: '',
+        printUrl: '/print.html#/pages/property/printPayFee',
+        accountAmount: '',
+        acctId: ''
+      }
+    }
+  },
+  computed: {
+    filteredPrimeRates() {
+      if (this.batchPayConfirmInfo.payType === 'qrCode') {
+        return this.batchPayConfirmInfo.primeRates.filter(
+          item => item.statusCd === '3' || item.statusCd === '4'
+        )
+      } else {
+        return this.batchPayConfirmInfo.primeRates.filter(
+          item => item.statusCd !== '5' && item.statusCd !== '6' && item.statusCd !== '8'
+        )
+      }
+    }
+  },
+  created() {
+    this._initDictData()
+    this._listFeePrintPages()
+  },
+  methods: {
+    async _initDictData() {
+      try {
+        const data = await getDict('pay_fee_detail', 'prime_rate')
+        this.batchPayConfirmInfo.primeRates = data
+      } catch (error) {
+        console.error('获取字典数据失败:', error)
+      }
+    },
+
+    async _listFeePrintPages() {
+      try {
+        const params = {
+          page: 1,
+          row: 1,
+          state: 'T',
+          communityId: getCommunityId()
+        }
+        const res = await listFeePrintPage(params)
+        if (res.code === 0 && res.data && res.data.length > 0) {
+          this.batchPayConfirmInfo.printUrl = res.data[0].url
+        }
+      } catch (error) {
+        console.error('请求失败:', error)
+      }
+    },
+
+    open(params) {
+      this.batchPayConfirmInfo = {
+        ...this.batchPayConfirmInfo,
+        ...params
+      }
+      this.visible = true
+
+      if (params.payType === 'qrCode') {
+        this.$nextTick(() => {
+          document.getElementById("authCode").focus()
+        })
+      }
+    },
+
+    handleClose() {
+      this.visible = false
+    },
+
+    async _doPayFee() {
+      if (!this.batchPayConfirmInfo.primeRate) {
+        this.$message.warning(this.$t('batchPayConfirm.selectPaymentMethodTip'))
+        return
+      }
+
+      const fees = this.batchPayConfirmInfo.fees.map(fee => ({
+        ...fee,
+        primeRate: this.batchPayConfirmInfo.primeRate
+      }))
+
+      try {
+        const data = {
+          communityId: getCommunityId(),
+          fees,
+          acctId: this.batchPayConfirmInfo.acctId,
+          accountAmount: this.batchPayConfirmInfo.accountAmount
+        }
+
+        const res = await payBatchFee(data)
+        if (res.code === 0) {
+          this._doDealPayResult(res)
+        } else {
+          this.$message.error(res.msg)
+        }
+      } catch (error) {
+        console.error('请求失败:', error)
+        this.handleClose()
+        this.$message.error('缴费失败')
+      }
+    },
+
+    async _qrCodePayFee() {
+      if (!this.batchPayConfirmInfo.primeRate) {
+        this.$message.warning(this.$t('batchPayConfirm.selectPaymentMethodTip'))
+        return
+      }
+
+      const fees = this.batchPayConfirmInfo.fees.map(fee => ({
+        ...fee,
+        primeRate: this.batchPayConfirmInfo.primeRate
+      }))
+
+      try {
+        const data = {
+          communityId: getCommunityId(),
+          fees,
+          acctId: this.batchPayConfirmInfo.acctId,
+          accountAmount: this.batchPayConfirmInfo.accountAmount,
+          authCode: this.batchPayConfirmInfo.authCode,
+          receivedAmount: this.batchPayConfirmInfo.feePrices,
+          payerObjName: this.batchPayConfirmInfo.payerObjName,
+          subServiceCode: 'fee.payBatchFee'
+        }
+
+        const res = await qrCodePayment(data)
+        if (res.code === 404) {
+          this.$message.warning(res.msg)
+          if (res.data && res.data.orderId) {
+            this.batchPayConfirmInfo.orderId = res.data.orderId
+            this.batchPayConfirmInfo.paymentPoolId = res.data.paymentPoolId
+            setTimeout(() => this._qrCodeCheckPayFinish(), 5000)
+          }
+        } else if (res.code === 0) {
+          this._doDealPayResult(res)
+        } else {
+          this.$message.error(res.msg)
+        }
+      } catch (error) {
+        console.error('请求失败:', error)
+        this.$message.error('扫码支付失败')
+      }
+    },
+
+    async _qrCodeCheckPayFinish() {
+      const fees = this.batchPayConfirmInfo.fees.map(fee => ({
+        ...fee,
+        primeRate: this.batchPayConfirmInfo.primeRate
+      }))
+
+      try {
+        const data = {
+          communityId: getCommunityId(),
+          fees,
+          acctId: this.batchPayConfirmInfo.acctId,
+          accountAmount: this.batchPayConfirmInfo.accountAmount,
+          authCode: this.batchPayConfirmInfo.authCode,
+          receivedAmount: this.batchPayConfirmInfo.feePrices,
+          subServiceCode: 'fee.payBatchFee',
+          orderId: this.batchPayConfirmInfo.orderId,
+          paymentPoolId: this.batchPayConfirmInfo.paymentPoolId
+        }
+
+        const res = await checkPayFinish(data)
+        if (res.code === 404) {
+          this.$message.warning(res.msg)
+        } else if (res.code === 41) {
+          setTimeout(() => this._qrCodeCheckPayFinish(), 5000)
+        } else {
+          this._doDealPayResult(res)
+        }
+      } catch (error) {
+        console.error('请求失败:', error)
+        this.$message.error('支付状态查询失败')
+      }
+    },
+
+    _doDealPayResult(res) {
+      this.handleClose()
+      const detailIds = res.data.details.join(',')
+      this.batchPayConfirmInfo.detailIds = detailIds
+
+      setTimeout(() => {
+        this.resultVisible = true
+      }, 2000)
+    },
+
+    _printAndBack(merge) {
+      this.resultVisible = false
+      window.open(`${this.batchPayConfirmInfo.printUrl}?detailIds=${this.batchPayConfirmInfo.detailIds}&merge=${merge}`)
+    },
+
+    _back() {
+      this.resultVisible = false
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.result-content {
+  text-align: center;
+  font-size: 16px;
+  padding: 20px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <div>
+    <el-row>
+      <el-col :span="24" class="text-right"></el-col>
+    </el-row>
+    <div class="margin-top">
+      <el-table :data="carDetailOwnerInfo.owners" border stripe>
+        <el-table-column :label="$t('carDetailOwner.ownerFace')" align="center">
+          <template slot-scope="scope">
+            <el-image 
+              style="width: 60px; height: 60px; border-radius: 4px;"
+              :src="scope.row.url || '/img/noPhoto.jpg'"
+              :preview-src-list="[scope.row.url]"
+              v-if="scope.row.url"
+            ></el-image>
+            <el-image 
+              style="width: 60px; height: 60px; border-radius: 4px;"
+              src="/img/noPhoto.jpg"
+              v-else
+            ></el-image>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('carDetailOwner.name')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.name}}({{scope.row.link}})
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('carDetailOwner.gender')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.sex == 0 ? $t('carDetailOwner.male') : $t('carDetailOwner.female')}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="idCard" :label="$t('carDetailOwner.idCard')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.idCard || '-'}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="address" :label="$t('carDetailOwner.address')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.address || '-'}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="roomCount" :label="$t('carDetailOwner.roomCount')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.roomCount || 0}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="memberCount" :label="$t('carDetailOwner.memberCount')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.memberCount || 0}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="carCount" :label="$t('carDetailOwner.carCount')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.carCount || 0}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="complaintCount" :label="$t('carDetailOwner.complaintCount')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.complaintCount || 0}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="repairCount" :label="$t('carDetailOwner.repairCount')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.repairCount || 0}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="oweFee" :label="$t('carDetailOwner.oweFee')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.oweFee || '0.00'}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="contractCount" :label="$t('carDetailOwner.contractCount')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.contractCount || 0}}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('carDetailOwner.actions')" align="center">
+          <template slot-scope="scope">
+            <el-button-group>
+              <el-button size="mini" @click="_toCarDetailOwnerDetail(scope.row)">
+                {{ $t('carDetailOwner.detail') }}
+              </el-button>
+            </el-button-group>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-size="pageSize"
+        layout="total, prev, pager, next"
+        :total="total">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { queryOwners } from '@/api/fee/carDetailOwnerApi'
+
+export default {
+  name: 'CarDetailOwner',
+  data() {
+    return {
+      DEFAULT_PAGE: 1,
+      DEFAULT_ROWS: 10,
+      carDetailOwnerInfo: {
+        owners: [],
+        ownerId: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  created() {
+    this._initEvent()
+  },
+  methods: {
+    _initEvent() {
+      this.$on('switch', this.handleSwitch)
+      this.$on('notify', this._loadCarDetailOwnerData)
+    },
+    handleSwitch(data) {
+      this.carDetailOwnerInfo.ownerId = data.ownerId
+      this._loadCarDetailOwnerData(this.DEFAULT_PAGE, this.DEFAULT_ROWS)
+    },
+    handleCurrentChange(val) {
+      this._loadCarDetailOwnerData(val, this.DEFAULT_ROWS)
+    },
+    async _loadCarDetailOwnerData(page, row) {
+      try {
+        const res = await queryOwners({
+          ownerId: this.carDetailOwnerInfo.ownerId,
+          communityId: getCommunityId(),
+          ownerTypeCd: '1001',
+          page,
+          row
+        })
+        this.carDetailOwnerInfo.owners = res.data
+        this.total = res.records
+      } catch (error) {
+        console.error('Request failed:', error)
+      }
+    },
+    _toCarDetailOwnerDetail(owner) {
+      window.open(`/#/pages/owner/ownerDetail?ownerId=${owner.ownerId}`)
+    },
+    open(params) {
+      this.handleSwitch(params)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 15px;
+}
+.text-right {
+  text-align: right;
+}
+</style>
 \ No newline at end of file
+<template>
+  <car-detail-owner ref="carDetailOwner"></car-detail-owner>
+</template>
+
+<script>
+import CarDetailOwner from './carDetailOwner'
+
+export default {
+  name: 'CarDetailOwnerDemo',
+  components: {
+    CarDetailOwner
+  },
+  mounted() {
+    this.$refs.carDetailOwner.$emit('switch', {
+      ownerId: '123'
+    })
+  }
+}
+</script>
 \ No newline at end of file
@@ -26,6 +26,7 @@
 <script>
 import { deleteApplyRoomDiscount } from '@/api/fee/applyRoomDiscountManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
 export default {
   name: 'DeleteApplyRoomDiscount',
@@ -43,7 +44,7 @@ export default {
     open(data) {
       this.form = {
         ardId: data.ardId,
-        communityId: this.$store.getters.communityId
+        communityId: getCommunityId()
       }
       this.visible = true
     },
 <template>
-  <el-dialog :title="$t('deleteFee.title')" :visible.sync="visible" width="30%">
-    <div>
-      <p>{{ $t('deleteFee.confirmDelete') }}</p>
-    </div>
+  <el-dialog
+    :title="$t('deleteFee.title')"
+    :visible.sync="visible"
+    width="30%"
+    :before-close="handleClose"
+  >
+    <p>{{ $t('deleteFee.confirmMessage') }}</p>
     <span slot="footer" class="dialog-footer">
-      <el-button @click="close">{{ $t('common.cancel') }}</el-button>
+      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
       <el-button type="primary" @click="deleteFee">{{ $t('common.confirm') }}</el-button>
     </span>
   </el-dialog>
 </template>
 <script>
-import { deleteFee } from '@/api/fee/listCarFeeApi'
+import { deleteFee } from '@/api/fee/deleteFeeApi'
+import { getCommunityId } from '@/api/community/communityApi'
 export default {
   name: 'DeleteFee',
@@ -22,25 +26,29 @@ export default {
     }
   },
   methods: {
-    open(info) {
-      this.deleteFeeInfo = info
+    open(params) {
+      this.deleteFeeInfo = params
       this.visible = true
     },
-    close() {
+    handleClose() {
       this.visible = false
     },
-    deleteFee() {
-      deleteFee(this.deleteFeeInfo).then(response => {
-        if (response.code === 0) {
-          this.$message.success(this.$t('common.deleteSuccess'))
+    async deleteFee() {
+      this.deleteFeeInfo.communityId = getCommunityId()
+      
+      try {
+        const res = await deleteFee(this.deleteFeeInfo)
+        if (res.code === 0) {
+          this.$message.success(this.$t('common.operateSuccess'))
           this.$emit('success')
-          this.close()
+          this.handleClose()
         } else {
-          this.$message.error(response.msg)
+          this.$message.error(res.msg)
         }
-      }).catch(error => {
-        this.$message.error(error.message)
-      })
+      } catch (error) {
+        console.error('请求失败:', error)
+        this.$message.error(this.$t('common.operateFail'))
+      }
     }
   }
 }
+<template>
+  <div>
+    <el-button @click="openModal">{{ $t('deleteFeeDemo.openModal') }}</el-button>
+    <delete-fee ref="deleteFee" @success="handleSuccess"></delete-fee>
+  </div>
+</template>
+
+<script>
+import DeleteFee from './deleteFee'
+
+export default {
+  name: 'DeleteFeeDemo',
+  components: {
+    DeleteFee
+  },
+  methods: {
+    openModal() {
+      this.$refs.deleteFee.open({
+        feeId: '123'
+      })
+    },
+    handleSuccess() {
+      this.$message.success(this.$t('deleteFeeDemo.successMessage'))
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('deleteFeeRule.confirmTitle')"
+    :visible.sync="dialogVisible"
+    width="30%"
+  >
+    <div class="text-center">
+      <p>{{ $t('deleteFeeRule.confirmMessage') }}</p>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="closeDeleteFeeRuleModel">{{ $t('deleteFeeRule.cancel') }}</el-button>
+      <el-button type="primary" @click="deleteFeeRule">{{ $t('deleteFeeRule.confirmDelete') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { deletePayFeeRule } from '@/api/fee/deleteFeeRuleApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'DeleteFeeRule',
+  data() {
+    return {
+      dialogVisible: false,
+      deleteFeeRuleInfo: {},
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    open(params) {
+      this.deleteFeeRuleInfo = params
+      this.dialogVisible = true
+    },
+    deleteFeeRule() {
+      const params = {
+        ...this.deleteFeeRuleInfo,
+        communityId: this.communityId
+      }
+
+      deletePayFeeRule(params).then(response => {
+        if (response.code === 0) {
+          this.dialogVisible = false
+          this.$emit('delete-success')
+          this.$message.success(this.$t('deleteFeeRule.deleteSuccess'))
+        } else {
+          this.$message.error(response.msg)
+        }
+      }).catch(error => {
+        console.error('请求失败:', error)
+        this.$message.error(this.$t('deleteFeeRule.deleteFailed'))
+      })
+    },
+    closeDeleteFeeRuleModel() {
+      this.dialogVisible = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.text-center {
+  text-align: center;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-button @click="openModal">{{ $t('deleteFeeRuleDemo.openModal') }}</el-button>
+  <delete-fee-rule ref="deleteFeeRule" @delete-success="handleDeleteSuccess"></delete-fee-rule>
+</template>
+
+<script>
+import DeleteFeeRule from './deleteFeeRule'
+
+export default {
+  name: 'DeleteFeeRuleDemo',
+  components: {
+    DeleteFeeRule
+  },
+  methods: {
+    openModal() {
+      this.$refs.deleteFeeRule.open({
+        feeRuleId: '123'
+      })
+    },
+    handleDeleteSuccess() {
+      console.log('Delete success')
+    }
+  }
+}
+</script>
 \ No newline at end of file
 <template>
   <el-dialog
-    :title="$t('oweFeeCallable.delete.title')"
+    :title="$t('deleteOweFeeCallable.title')"
     :visible.sync="dialogVisible"
     width="30%"
-    @close="handleClose">
-    <div class="delete-content">
-      <p>{{ $t('oweFeeCallable.delete.confirm') }}</p>
+    :before-close="handleClose"
+  >
+    <div align="center">
+      <h4>{{ $t('deleteOweFeeCallable.confirmDelete') }}</h4>
     </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>
+      <el-button @click="closeDeleteOweFeeCallableModel">{{ $t('deleteOweFeeCallable.cancel') }}</el-button>
+      <el-button type="primary" @click="deleteOweFeeCallable">{{ $t('deleteOweFeeCallable.confirm') }}</el-button>
     </span>
   </el-dialog>
 </template>
 <script>
-import { deleteOweFeeCallable } from '@/api/fee/oweFeeCallableApi'
 import { getCommunityId } from '@/api/community/communityApi'
+import { deleteOweFeeCallable } from '@/api/fee/deleteOweFeeCallableApi'
 export default {
   name: 'DeleteOweFeeCallable',
   data() {
     return {
       dialogVisible: false,
-      currentItem: null
+      deleteOweFeeCallableInfo: {}
     }
   },
+  created() {
+    this._initEvent()
+  },
   methods: {
-    open(item) {
-      this.currentItem = {
-        ...item,
-        communityId: getCommunityId()
-      }
+    _initEvent() {
+      this.$on('openDeleteOweFeeCallableModal', this.open)
+    },
+    open(params) {
+      this.deleteOweFeeCallableInfo = params
       this.dialogVisible = true
     },
-    async handleConfirm() {
+    handleClose(done) {
+      this.closeDeleteOweFeeCallableModel()
+      done()
+    },
+    async deleteOweFeeCallable() {
       try {
-        await deleteOweFeeCallable(this.currentItem)
-        this.$message.success(this.$t('oweFeeCallable.delete.success'))
-        this.dialogVisible = false
-        this.$emit('success')
+        const params = {
+          ...this.deleteOweFeeCallableInfo,
+          communityId: getCommunityId()
+        }
+        const res = await deleteOweFeeCallable(params)
+        if (res.code === 0) {
+          this.dialogVisible = false
+          this.$emit('listOweFeeCallable', {})
+          this.$emit('listOwnerData', {})
+          this.$message.success(this.$t('deleteOweFeeCallable.success'))
+        } else {
+          this.$message.error(res.msg)
+        }
       } catch (error) {
-        console.error('删除失败:', error)
-        this.$message.error(error.message || this.$t('oweFeeCallable.delete.error'))
+        console.error('Request failed:', error)
+        this.$message.error(error.message)
       }
     },
-    handleClose() {
-      this.currentItem = null
+    closeDeleteOweFeeCallableModel() {
+      this.dialogVisible = false
     }
   }
 }
-</script>
-
-<style lang="scss" scoped>
-.delete-content {
-  text-align: center;
-  font-size: 16px;
-  padding: 20px 0;
-}
-</style>
 \ No newline at end of file
+</script>
 \ No newline at end of file
+<template>
+  <el-button @click="openModal">{{$t('deleteOweFeeCallableDemo.openModal')}}</el-button>
+  <delete-owe-fee-callable ref="deleteOweFeeCallable"></delete-owe-fee-callable>
+</template>
+
+<script>
+import DeleteOweFeeCallable from './deleteOweFeeCallable'
+
+export default {
+  name: 'DeleteOweFeeCallableDemo',
+  components: {
+    DeleteOweFeeCallable
+  },
+  methods: {
+    openModal() {
+      this.$refs.deleteOweFeeCallable.open({
+        ofcId: '123'
+      })
+    }
+  }
+}
+</script>
 \ No newline at end of file
 <template>
-  <el-dialog 
-    :title="$t('doImportCreateFee.customCreateFee')" 
-    :visible.sync="visible" 
-    width="50%"
+  <el-dialog
+    :title="$t('doImportCreateFee.title')"
+    :visible.sync="visible"
+    width="70%"
+    :before-close="handleClose"
   >
-    <el-form label-width="150px">
+    <el-form label-width="120px">
       <el-form-item :label="$t('doImportCreateFee.selectFile')">
         <el-upload
           class="upload-demo"
-          :before-upload="beforeUpload"
+          action=""
+          :auto-upload="false"
+          :on-change="handleFileChange"
           :show-file-list="false"
+          accept=".xls,.xlsx"
         >
-          <el-button size="small" type="primary">
-            <i class="el-icon-upload"></i>
-            {{ $t('common.selectFile') }}
-          </el-button>
-          <div slot="tip" class="el-upload__tip" style="margin-top:10px">
-            {{ fileName || $t('doImportCreateFee.requiredFile') }}
+          <el-button size="small" type="primary">{{ $t('doImportCreateFee.clickUpload') }}</el-button>
+          <div slot="tip" class="el-upload__tip">
+            {{ fileName || $t('doImportCreateFee.fileTip') }}
           </div>
         </el-upload>
       </el-form-item>
     </el-form>
-    
-    <div slot="footer" class="dialog-footer">
-      <el-button @click="visible = false">{{ $t('doImportCreateFee.cancel') }}</el-button>
-      <el-button type="primary" @click="handleImport" :disabled="!file">
-        {{ $t('doImportCreateFee.import') }}
-      </el-button>
-    </div>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
+      <el-button 
+        type="primary" 
+        @click="handleImport"
+        :disabled="!fileName"
+      >{{ $t('common.import') }}</el-button>
+    </span>
   </el-dialog>
 </template>
 <script>
-import { importCustomFee } from '@/api/fee/carCreateFeeApi'
+import { importData } from '@/api/fee/doImportCreateFeeApi'
+import { getCommunityId } from '@/api/community/communityApi'
 export default {
   name: 'DoImportCreateFee',
@@ -43,52 +47,69 @@ export default {
       fileName: ''
     }
   },
+  computed: {
+    communityId() {
+      return getCommunityId()
+    }
+  },
   methods: {
     open() {
       this.visible = true
-      this.file = null
-      this.fileName = ''
+      this.reset()
     },
-    beforeUpload(file) {
-      const validTypes = ['xlsx', 'xls']
-      const fileType = file.name.split('.').pop().toLowerCase()
-      const isExcel = validTypes.includes(fileType)
-      const isLt2M = file.size / 1024 / 1024 < 2
-      
-      if (!isExcel) {
-        this.$message.error(this.$t('common.invalidExcelType'))
+    
+    handleFileChange(file) {
+      if (!this.checkFileType(file.name)) {
+        this.$message.error(this.$t('doImportCreateFee.validate.invalidFileType'))
         return false
       }
-      if (!isLt2M) {
-        this.$message.error(this.$t('common.fileSizeExceed'))
+      
+      if (!this.checkFileSize(file.size)) {
+        this.$message.error(this.$t('doImportCreateFee.validate.fileTooLarge'))
         return false
       }
-      this.file = file
+      this.file = file.raw
       this.fileName = file.name
-      return false // 阻止自动上传
     },
-    async handleImport() {
-      if (!this.file) {
-        this.$message.warning(this.$t('doImportCreateFee.requiredFile'))
-        return
-      }
+    
+    checkFileType(filename) {
+      const ext = filename.split('.').pop().toLowerCase()
+      return ['xls', 'xlsx'].includes(ext)
+    },
+    
+    checkFileSize(size) {
+      return size <= 2 * 1024 * 1024 // 2MB
+    },
+    
+    handleImport() {
+      const formData = new FormData()
+      formData.append('uploadFile', this.file)
+      formData.append('communityId', this.communityId)
+      formData.append('importAdapt', 'importCustomFee')
-      try {
-        const res = await importCustomFee({
-          file: this.file
-        })
-        
+      importData(formData).then(response => {
+        const res = response.data
         if (res.code === 0) {
-          this.$message.success(this.$t('common.importSuccess'))
-          this.visible = false
-          this.$emit('success')
+          this.$message.success(this.$t('doImportCreateFee.successMessage'))
+          this.handleClose()
+          this.$router.push(`/pages/property/assetImportLogDetail?logId=${res.data.logId}&logType=importCustomFee`)
         } else {
-          this.$message.error(res.msg || this.$t('common.importError'))
+          this.$message.error(res.msg)
         }
-      } catch (error) {
-        this.$message.error(this.$t('common.importError'))
-      }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+    },
+    
+    handleClose() {
+      this.visible = false
+      this.reset()
+    },
+    
+    reset() {
+      this.file = null
+      this.fileName = ''
     }
   }
 }
+<template>
+  <div>
+    <el-button @click="openModal">{{ $t('doImportCreateFeeDemo.openModal') }}</el-button>
+    <do-import-create-fee ref="doImportCreateFee"></do-import-create-fee>
+  </div>
+</template>
+
+<script>
+import DoImportCreateFee from './doImportCreateFee'
+
+export default {
+  name: 'DoImportCreateFeeDemo',
+  components: {
+    DoImportCreateFee
+  },
+  methods: {
+    openModal() {
+      this.$refs.doImportCreateFee.open()
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('downloadCollectionLetterOrder.title')"
+    :visible.sync="visible"
+    width="70%"
+    :before-close="handleClose"
+  >
+    <el-form label-width="120px">
+      <template v-if="roomId">
+        <el-alert
+          :title="$t('downloadCollectionLetterOrder.confirmExport')"
+          type="info"
+          show-icon
+        ></el-alert>
+      </template>
+      <template v-else>
+        <el-form-item :label="$t('downloadCollectionLetterOrder.selectFloor')">
+          <el-select
+            v-model="floorId"
+            :placeholder="$t('downloadCollectionLetterOrder.floorPlaceholder')"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in floors"
+              :key="item.floorId"
+              :label="item.floorNum"
+              :value="item.floorId"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </template>
+    </el-form>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
+      <el-button 
+        type="primary" 
+        @click="handleExport"
+        :disabled="!floorId && !roomId"
+      >{{ $t('common.export') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { exportData, queryFloors } from '@/api/fee/downloadCollectionLetterOrderApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'DownloadCollectionLetterOrder',
+  data() {
+    return {
+      visible: false,
+      roomId: '',
+      floorId: '',
+      floors: []
+    }
+  },
+  computed: {
+    communityId() {
+      return getCommunityId()
+    }
+  },
+  methods: {
+    open(params) {
+      this.visible = true
+      this.roomId = params.roomId || ''
+      this.loadFloors()
+    },
+    
+    loadFloors() {
+      queryFloors({
+        page: 1,
+        row: 100,
+        communityId: this.communityId
+      }).then(response => {
+        this.floors = response.data.apiFloorDataVoList
+      })
+    },
+    
+    handleExport() {
+      const params = {
+        communityId: this.communityId,
+        pagePath: 'dataFeeManualCollection',
+        floorId: this.floorId,
+        roomId: this.roomId
+      }
+      
+      exportData(params).then(response => {
+        const res = response.data
+        this.$message.success(res.msg)
+        if (res.code === 0) {
+          this.handleClose()
+          this.$router.push('/pages/property/downloadTempFile?tab=下载中心')
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+    },
+    
+    handleClose() {
+      this.visible = false
+      this.reset()
+    },
+    
+    reset() {
+      this.roomId = ''
+      this.floorId = ''
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div>
+    <el-button @click="openModal">{{ $t('downloadCollectionLetterOrderDemo.openModal') }}</el-button>
+    <download-collection-letter-order ref="downloadCollectionLetterOrder"></download-collection-letter-order>
+  </div>
+</template>
+
+<script>
+import DownloadCollectionLetterOrder from './downloadCollectionLetterOrder'
+
+export default {
+  name: 'DownloadCollectionLetterOrderDemo',
+  components: {
+    DownloadCollectionLetterOrder
+  },
+  methods: {
+    openModal() {
+      this.$refs.downloadCollectionLetterOrder.open({
+        roomId: '123' // Optional, remove if you want to select floor
+      })
+    }
+  }
+}
+</script>
 \ No newline at end of file
@@ -48,6 +48,7 @@
 <script>
 import { updateApplyRoomDiscount } from '@/api/fee/applyRoomDiscountManageApi'
 import UploadImageUrl from '@/components/upload/UploadImageUrl'
+import { getCommunityId } from '@/api/community/communityApi'
 export default {
   name: 'EditApplyRoomDiscount',
@@ -90,7 +91,7 @@ export default {
       this.form = {
         ...this.form,
         ...data,
-        communityId: this.$store.getters.communityId
+        communityId: getCommunityId()
       }
       this.$nextTick(() => {
         if (this.$refs.uploadImage) {
@@ -113,6 +113,7 @@
 <script>
 import { updateApplyRoomDiscount } from '@/api/fee/applyRoomDiscountManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
 export default {
   name: 'EditApplyRoomDiscountRecord',
@@ -164,7 +165,7 @@ export default {
       this.form = {
         ...this.form,
         ...data,
-        communityId: this.$store.getters.communityId
+        communityId: getCommunityId()
       }
       this.visible = true
     },
 <template>
-  <el-dialog :title="$t('editFee.title')" :visible.sync="visible" width="50%">
+  <el-dialog
+    :title="$t('editFee.title')"
+    :visible.sync="visible"
+    width="50%"
+    :before-close="handleClose"
+  >
     <el-form :model="editFeeInfo" label-width="120px">
-      <el-form-item :label="$t('editFee.startTime')" required>
-        <el-date-picker v-model="editFeeInfo.startTime" type="datetime" :placeholder="$t('editFee.startTimePlaceholder')"
-          value-format="yyyy-MM-dd HH:mm:ss" style="width:100%">
-        </el-date-picker>
+      <el-form-item :label="$t('editFee.startTime')" prop="startTime">
+        <el-date-picker
+          v-model="editFeeInfo.startTime"
+          type="datetime"
+          :placeholder="$t('editFee.startTimePlaceholder')"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          @change="validateStartTime"
+        ></el-date-picker>
       </el-form-item>
-      <el-form-item :label="$t('editFee.endTime')" required>
-        <el-date-picker v-model="editFeeInfo.endTime" type="datetime" :placeholder="$t('editFee.endTimePlaceholder')"
-          value-format="yyyy-MM-dd HH:mm:ss" style="width:100%">
-        </el-date-picker>
+      <el-form-item :label="$t('editFee.endTime')" prop="endTime">
+        <el-date-picker
+          v-model="editFeeInfo.endTime"
+          type="date"
+          :placeholder="$t('editFee.endTimePlaceholder')"
+          value-format="yyyy-MM-dd"
+          @change="validateEndTime"
+        ></el-date-picker>
       </el-form-item>
-      <el-form-item :label="$t('editFee.maxEndTime')" required>
-        <el-date-picker v-model="editFeeInfo.maxEndTime" type="datetime"
-          :placeholder="$t('editFee.maxEndTimePlaceholder')" value-format="yyyy-MM-dd HH:mm:ss" style="width:100%">
-        </el-date-picker>
+      <el-form-item :label="$t('editFee.maxEndTime')" prop="maxEndTime">
+        <el-date-picker
+          v-model="editFeeInfo.maxEndTime"
+          type="date"
+          :placeholder="$t('editFee.maxEndTimePlaceholder')"
+          value-format="yyyy-MM-dd"
+          @change="validateMaxEndTime"
+        ></el-date-picker>
       </el-form-item>
-      <template v-if="editFeeInfo.computingFormula == '1102'">
-        <el-form-item :label="$t('editFee.rateCycle')" required>
-          <el-input v-model="editFeeInfo.rateCycle" :placeholder="$t('editFee.rateCyclePlaceholder')"></el-input>
+      <template v-if="editFeeInfo.computingFormula === '1102'">
+        <el-form-item :label="$t('editFee.rateCycle')" prop="rateCycle">
+          <el-input
+            v-model="editFeeInfo.rateCycle"
+            :placeholder="$t('editFee.rateCyclePlaceholder')"
+          ></el-input>
         </el-form-item>
-        <el-form-item :label="$t('editFee.rate')" required>
-          <el-input v-model="editFeeInfo.rate" :placeholder="$t('editFee.ratePlaceholder')"></el-input>
+        <el-form-item :label="$t('editFee.rate')" prop="rate">
+          <el-input
+            v-model="editFeeInfo.rate"
+            :placeholder="$t('editFee.ratePlaceholder')"
+          ></el-input>
         </el-form-item>
-        <el-form-item :label="$t('editFee.rateStartTime')" required>
-          <el-date-picker v-model="editFeeInfo.rateStartTime" type="datetime"
-            :placeholder="$t('editFee.rateStartTimePlaceholder')" value-format="yyyy-MM-dd HH:mm:ss" style="width:100%">
-          </el-date-picker>
+        <el-form-item :label="$t('editFee.rateStartTime')" prop="rateStartTime">
+          <el-date-picker
+            v-model="editFeeInfo.rateStartTime"
+            type="date"
+            :placeholder="$t('editFee.rateStartTimePlaceholder')"
+            value-format="yyyy-MM-dd"
+            @change="validateRateStartTime"
+          ></el-date-picker>
         </el-form-item>
       </template>
     </el-form>
     <span slot="footer" class="dialog-footer">
-      <el-button @click="close">{{ $t('common.cancel') }}</el-button>
+      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
       <el-button type="primary" @click="_doEidtFee">{{ $t('common.submit') }}</el-button>
     </span>
   </el-dialog>
 </template>
 <script>
-import { updateFee } from '@/api/fee/listCarFeeApi'
+import { updateFee } from '@/api/fee/editFeeApi'
+import { getCommunityId } from '@/api/community/communityApi'
 export default {
   name: 'EditFee',
@@ -60,25 +88,97 @@ export default {
   },
   methods: {
     open(fee) {
-      this.editFeeInfo = { ...fee }
+      this.editFeeInfo = {
+        feeId: fee.feeId,
+        startTime: fee.startTime.indexOf(":") === -1 ? fee.startTime + " 00:00:00" : fee.startTime,
+        endTime: fee.endTime.split(' ')[0],
+        feeFlag: fee.feeFlag,
+        maxEndTime: fee.maxEndTime,
+        computingFormula: fee.computingFormula,
+        rateCycle: fee.rateCycle,
+        rate: fee.rate,
+        rateStartTime: fee.rateStartTime
+      }
       this.visible = true
     },
-    close() {
+    handleClose() {
       this.visible = false
+      this.clearAddFeeConfigInfo()
+    },
+    validateStartTime(value) {
+      const start = new Date(value)
+      const end = new Date(this.editFeeInfo.endTime)
+      if (start >= end) {
+        this.$message.error(this.$t('editFee.startTimeError'))
+        this.editFeeInfo.startTime = ''
+      }
+    },
+    validateEndTime(value) {
+      const start = new Date(this.editFeeInfo.startTime)
+      const end = new Date(value)
+      if (start >= end) {
+        this.$message.error(this.$t('editFee.endTimeError'))
+        this.editFeeInfo.endTime = ''
+      }
+    },
+    validateMaxEndTime(value) {
+      const start = new Date(this.editFeeInfo.startTime)
+      const end = new Date(value)
+      if (start >= end) {
+        this.$message.error(this.$t('editFee.maxEndTimeError'))
+        this.editFeeInfo.maxEndTime = ''
+      }
+    },
+    validateRateStartTime(value) {
+      const start = new Date(this.editFeeInfo.startTime)
+      const end = new Date(value)
+      if (start >= end) {
+        this.$message.error(this.$t('editFee.rateStartTimeError'))
+        this.editFeeInfo.rateStartTime = ''
+      }
+    },
+    editFeeValidate() {
+      if (!this.editFeeInfo.startTime) {
+        this.$message.error(this.$t('editFee.startTimeRequired'))
+        return false
+      }
+      if (!this.editFeeInfo.endTime) {
+        this.$message.error(this.$t('editFee.endTimeRequired'))
+        return false
+      }
+      return true
     },
-    _doEidtFee() {
-      // 验证逻辑
-      updateFee(this.editFeeInfo).then(response => {
-        if (response.code === 0) {
-          this.$message.success(this.$t('common.updateSuccess'))
+    async _doEidtFee() {
+      if (!this.editFeeValidate()) return
+      
+      this.editFeeInfo.communityId = getCommunityId()
+      
+      try {
+        const res = await updateFee(this.editFeeInfo)
+        if (res.code === 0) {
+          this.$message.success(this.$t('common.operateSuccess'))
           this.$emit('success')
-          this.close()
+          this.handleClose()
         } else {
-          this.$message.error(response.msg)
+          this.$message.error(res.msg)
         }
-      }).catch(error => {
-        this.$message.error(error.message)
-      })
+      } catch (error) {
+        console.error('请求失败:', error)
+        this.$message.error(this.$t('common.operateFail'))
+      }
+    },
+    clearAddFeeConfigInfo() {
+      this.editFeeInfo = {
+        feeId: '',
+        startTime: '',
+        endTime: '',
+        feeFlag: '',
+        maxEndTime: '',
+        computingFormula: '',
+        rateCycle: '',
+        rate: '',
+        rateStartTime: ''
+      }
     }
   }
 }
+<template>
+  <div>
+    <el-button @click="openModal">{{ $t('editFeeDemo.openModal') }}</el-button>
+    <edit-fee ref="editFee" @success="handleSuccess"></edit-fee>
+  </div>
+</template>
+
+<script>
+import EditFee from './editFee'
+
+export default {
+  name: 'EditFeeDemo',
+  components: {
+    EditFee
+  },
+  methods: {
+    openModal() {
+      this.$refs.editFee.open({
+        feeId: '123',
+        startTime: '2023-01-01 00:00:00',
+        endTime: '2023-01-01',
+        maxEndTime: '2023-12-31',
+        computingFormula: '1102',
+        rateCycle: '12',
+        rate: '0.05',
+        rateStartTime: '2023-01-01'
+      })
+    },
+    handleSuccess() {
+      this.$message.success(this.$t('editFeeDemo.successMessage'))
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('editFeeRule.title')"
+    :visible.sync="visible"
+    width="50%"
+    :before-close="handleClose"
+  >
+    <el-form :model="editFeeRuleInfo" label-width="120px">
+      <el-form-item :label="$t('editFeeRule.maxTime')" prop="maxTime">
+        <el-date-picker
+          v-model="editFeeRuleInfo.maxTime"
+          type="datetime"
+          :placeholder="$t('editFeeRule.maxTimePlaceholder')"
+          value-format="yyyy-MM-dd HH:mm:ss"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item :label="$t('editFeeRule.curYearMonth')" prop="curYearMonth">
+        <el-date-picker
+          v-model="editFeeRuleInfo.curYearMonth"
+          type="date"
+          :placeholder="$t('editFeeRule.curYearMonthPlaceholder')"
+          value-format="yyyy-MM-dd"
+          @change="validateCurYearMonth"
+        ></el-date-picker>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="_doEidtFee">{{ $t('common.submit') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { updatePayFeeRule } from '@/api/fee/editFeeRuleApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'EditFeeRule',
+  data() {
+    return {
+      visible: false,
+      editFeeRuleInfo: {
+        ruleId: '',
+        maxTime: '',
+        curYearMonth: '',
+        oldCurYearMonth: ''
+      }
+    }
+  },
+  methods: {
+    open(fee) {
+      this.editFeeRuleInfo = {
+        ruleId: fee.ruleId,
+        maxTime: fee.maxTime,
+        curYearMonth: fee.curYearMonth,
+        oldCurYearMonth: fee.curYearMonth
+      }
+      this.visible = true
+    },
+    handleClose() {
+      this.visible = false
+      this.clearEditFeeRuleInfoData()
+    },
+    validateCurYearMonth(value) {
+      const start = new Date(this.editFeeRuleInfo.oldCurYearMonth)
+      const end = new Date(value)
+      if (start >= end) {
+        this.$message.error(this.$t('editFeeRule.dateError', { date: this.editFeeRuleInfo.oldCurYearMonth }))
+        this.editFeeRuleInfo.curYearMonth = ''
+      }
+    },
+    editFeeRuleValidate() {
+      if (!this.editFeeRuleInfo.maxTime) {
+        this.$message.error(this.$t('editFeeRule.maxTimeRequired'))
+        return false
+      }
+      if (!this.editFeeRuleInfo.curYearMonth) {
+        this.$message.error(this.$t('editFeeRule.curYearMonthRequired'))
+        return false
+      }
+      return true
+    },
+    async _doEidtFee() {
+      if (!this.editFeeRuleValidate()) return
+      
+      this.editFeeRuleInfo.communityId = getCommunityId()
+      
+      try {
+        const res = await updatePayFeeRule(this.editFeeRuleInfo)
+        if (res.code === 0) {
+          this.$message.success(this.$t('common.operateSuccess'))
+          this.$emit('success')
+          this.handleClose()
+        } else {
+          this.$message.error(res.msg)
+        }
+      } catch (error) {
+        console.error('请求失败:', error)
+        this.$message.error(this.$t('common.operateFail'))
+      }
+    },
+    clearEditFeeRuleInfoData() {
+      this.editFeeRuleInfo = {
+        ruleId: '',
+        maxTime: '',
+        curYearMonth: '',
+        oldCurYearMonth: ''
+      }
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div>
+    <el-button @click="openModal">{{ $t('editFeeRuleDemo.openModal') }}</el-button>
+    <edit-fee-rule ref="editFeeRule" @success="handleSuccess"></edit-fee-rule>
+  </div>
+</template>
+
+<script>
+import EditFeeRule from './editFeeRule'
+
+export default {
+  name: 'EditFeeRuleDemo',
+  components: {
+    EditFeeRule
+  },
+  methods: {
+    openModal() {
+      this.$refs.editFeeRule.open({
+        ruleId: '123',
+        maxTime: '2023-12-31 23:59:59',
+        curYearMonth: '2023-01-01'
+      })
+    },
+    handleSuccess() {
+      this.$message.success(this.$t('editFeeRuleDemo.successMessage'))
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('exportFeeImportExcel.title')"
+    :visible.sync="visible"
+    width="70%"
+    :before-close="handleClose"
+  >
+    <el-form label-width="120px">
+      <el-form-item :label="$t('exportFeeImportExcel.floor')">
+        <div>
+          <el-checkbox 
+            v-model="isFloorAll" 
+            @change="toggleAllFloors"
+          >{{ $t('exportFeeImportExcel.all') }}</el-checkbox>
+          <el-checkbox
+            v-for="item in floors"
+            :key="item.floorId"
+            v-model="selectedFloorIds"
+            :label="item.floorId"
+            @change="handleFloorChange"
+            class="margin-left"
+          >{{ item.floorName }}</el-checkbox>
+        </div>
+      </el-form-item>
+
+      <el-form-item :label="$t('exportFeeImportExcel.feeItem')">
+        <div>
+          <el-checkbox 
+            v-model="isConfigAll" 
+            @change="toggleAllConfigs"
+          >{{ $t('exportFeeImportExcel.all') }}</el-checkbox>
+          <el-checkbox
+            v-for="item in configs"
+            :key="item.configId"
+            v-model="selectedConfigIds"
+            :label="item.configId"
+            @change="handleConfigChange"
+            class="margin-left"
+          >{{ item.feeName }}</el-checkbox>
+        </div>
+      </el-form-item>
+    </el-form>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleExport">{{ $t('common.export') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { exportData, listFeeConfigs, queryFloors } from '@/api/fee/exportFeeImportExcelApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'ExportFeeImportExcel',
+  data() {
+    return {
+      visible: false,
+      isFloorAll: true,
+      isConfigAll: true,
+      selectedFloorIds: [],
+      selectedConfigIds: [],
+      floors: [],
+      configs: []
+    }
+  },
+  computed: {
+    communityId() {
+      return getCommunityId()
+    }
+  },
+  methods: {
+    open() {
+      this.visible = true
+      this.loadFloors()
+      this.loadConfigs()
+    },
+    
+    loadFloors() {
+      queryFloors({
+        page: 1,
+        row: 150,
+        communityId: this.communityId
+      }).then(response => {
+        this.floors = response.data.apiFloorDataVoList
+        this.selectedFloorIds = this.floors.map(item => item.floorId)
+      })
+    },
+    
+    loadConfigs() {
+      listFeeConfigs({
+        page: 1,
+        row: 100,
+        communityId: this.communityId,
+        isDefault: 'F'
+      }).then(response => {
+        this.configs = response.data.feeConfigs
+        this.selectedConfigIds = this.configs.map(item => item.configId)
+      })
+    },
+    
+    toggleAllFloors() {
+      this.selectedFloorIds = this.isFloorAll 
+        ? this.floors.map(item => item.floorId)
+        : []
+    },
+    
+    toggleAllConfigs() {
+      this.selectedConfigIds = this.isConfigAll
+        ? this.configs.map(item => item.configId)
+        : []
+    },
+    
+    handleFloorChange() {
+      this.isFloorAll = this.selectedFloorIds.length === this.floors.length
+    },
+    
+    handleConfigChange() {
+      this.isConfigAll = this.selectedConfigIds.length === this.configs.length
+    },
+    
+    handleExport() {
+      const params = {
+        floorIds: this.selectedFloorIds.join(','),
+        configIds: this.selectedConfigIds.join(','),
+        communityId: this.communityId,
+        type: '1001',
+        pagePath: 'exportCreateFeeTemplate'
+      }
+      
+      exportData(params).then(response => {
+        this.$message.success(response.data.msg)
+        if (response.data.code === 0) {
+          this.handleClose()
+          this.$router.push('/pages/property/downloadTempFile?tab=下载中心')
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+    },
+    
+    handleClose() {
+      this.visible = false
+      this.reset()
+    },
+    
+    reset() {
+      this.isFloorAll = true
+      this.isConfigAll = true
+      this.selectedFloorIds = []
+      this.selectedConfigIds = []
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-left {
+  margin-left: 15px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <div>
+    <el-button @click="openModal">{{ $t('exportFeeImportExcelDemo.openModal') }}</el-button>
+    <export-fee-import-excel ref="exportFeeImportExcel"></export-fee-import-excel>
+  </div>
+</template>
+
+<script>
+import ExportFeeImportExcel from './exportFeeImportExcel'
+
+export default {
+  name: 'ExportFeeImportExcelDemo',
+  components: {
+    ExportFeeImportExcel
+  },
+  methods: {
+    openModal() {
+      this.$refs.exportFeeImportExcel.open()
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div>
+    <el-table :data="feeDetailFeeRuleInfo.rules" border style="width: 100%">
+      <el-table-column prop="ruleId" :label="$t('feeDetailFeeRule.ruleId')" align="center"></el-table-column>
+      <el-table-column :label="$t('feeDetailFeeRule.feeItem')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.feeTypeCdName }}>{{ scope.row.feeName }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="feeFlagName" :label="$t('feeDetailFeeRule.feeFlag')" align="center"></el-table-column>
+      <el-table-column prop="startTime" :label="$t('feeDetailFeeRule.createTime')" align="center"></el-table-column>
+      <el-table-column :label="$t('feeDetailFeeRule.validPeriod')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.endTime }}~{{ scope.row.maxTime }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="computingFormulaName" :label="$t('feeDetailFeeRule.formula')" align="center"></el-table-column>
+      <el-table-column :label="$t('feeDetailFeeRule.price')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.computingFormula === '2002' ? '-' : scope.row.squarePrice }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="additionalAmount" :label="$t('feeDetailFeeRule.additionalFee')" align="center"></el-table-column>
+      <el-table-column :label="$t('feeDetailFeeRule.status')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.state === '2008001' ? $t('common.valid') : $t('common.invalid') }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="curYearMonth" :label="$t('feeDetailFeeRule.billDay')" align="center"></el-table-column>
+      <el-table-column :label="$t('feeDetailFeeRule.billCycle')" align="center">
+        <template>按月</template>
+      </el-table-column>
+      <el-table-column :label="$t('common.operation')" align="center" v-if="hasPrivilege">
+        <template slot-scope="scope">
+          <el-button
+            v-if="hasPrivilege('502020090427190001')"
+            type="text"
+            size="small"
+            @click="_updateFeeRule(scope.row)"
+          >
+            {{ $t('common.edit') }}
+          </el-button>
+          <el-button
+            v-if="hasPrivilege('502021070488970005')"
+            type="text"
+            size="small"
+            @click="_finishFeeRule(scope.row)"
+          >
+            {{ $t('common.manualFinish') }}
+          </el-button>
+          <el-button
+            v-if="hasPrivilege('502020090604200029')"
+            type="text"
+            size="small"
+            @click="_deleteFeeRule(scope.row)"
+          >
+            {{ $t('common.cancel') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="currentPage"
+      :page-sizes="[10, 20, 30, 50]"
+      :page-size="pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total"
+    ></el-pagination>
+
+    <edit-fee-rule ref="editFeeRule" @success="loadData"></edit-fee-rule>
+    <finish-fee-rule ref="finishFeeRule" @success="loadData"></finish-fee-rule>
+    <delete-fee ref="deleteFee" @success="loadData"></delete-fee>
+  </div>
+</template>
+
+<script>
+import { listPayFeeRule } from '@/api/fee/feeDetailFeeRuleApi'
+import EditFeeRule from './editFeeRule'
+import FinishFeeRule from './finishFeeRule'
+import DeleteFee from './deleteFee'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'FeeDetailFeeRule',
+  components: {
+    EditFeeRule,
+    FinishFeeRule,
+    DeleteFee
+  },
+  props: {
+    feeId: {
+      type: String,
+      default: ''
+    },
+    roomId: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      feeDetailFeeRuleInfo: {
+        rules: [],
+        feeId: '',
+        roomId: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  computed: {
+  },
+  methods: {
+    async loadData() {
+      const params = {
+        communityId: getCommunityId(),
+        feeId: this.feeDetailFeeRuleInfo.feeId,
+        payerObjId: this.feeDetailFeeRuleInfo.roomId,
+        detailId: '-1',
+        page: this.currentPage,
+        row: this.pageSize
+      }
+
+      try {
+        const res = await listPayFeeRule(params)
+        if (res.code === 0) {
+          this.feeDetailFeeRuleInfo.rules = res.data
+          this.total = res.records
+        } else {
+          this.$message.error(res.msg)
+        }
+      } catch (error) {
+        console.error('请求失败:', error)
+      }
+    },
+    handleSizeChange(val) {
+      this.pageSize = val
+      this.loadData()
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this.loadData()
+    },
+    _deleteFeeRule(fee) {
+      this.$refs.deleteFee.open(fee)
+    },
+    _updateFeeRule(fee) {
+      this.$refs.editFeeRule.open(fee)
+    },
+    _finishFeeRule(fee) {
+      this.$refs.finishFeeRule.open(fee)
+    },
+    open(params) {
+      // 这个方法用于接收参数并初始化组件
+      if (params.feeId) {
+        this.feeDetailFeeRuleInfo.feeId = params.feeId
+      }
+      if (params.roomId) {
+        this.feeDetailFeeRuleInfo.roomId = params.roomId
+      }
+      this.loadData()
+    }
+  },
+  watch: {
+    feeId(newVal) {
+      this.feeDetailFeeRuleInfo.feeId = newVal
+      this.loadData()
+    },
+    roomId(newVal) {
+      this.feeDetailFeeRuleInfo.roomId = newVal
+      this.loadData()
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div>
+    <el-button @click="switchData">{{ $t('feeDetailFeeRuleDemo.switchData') }}</el-button>
+    <fee-detail-fee-rule ref="feeDetailFeeRule"></fee-detail-fee-rule>
+  </div>
+</template>
+
+<script>
+import FeeDetailFeeRule from './feeDetailFeeRule'
+
+export default {
+  name: 'FeeDetailFeeRuleDemo',
+  components: {
+    FeeDetailFeeRule
+  },
+  methods: {
+    switchData() {
+      this.$refs.feeDetailFeeRule.loadData({
+        feeId: '123',
+        roomId: '456'
+      })
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div>
+    <el-table :data="feeDetailRuleBillInfo.bills" border style="width: 100%">
+      <el-table-column prop="billName" :label="$t('feeDetailRuleBill.billName')" align="center"></el-table-column>
+      <el-table-column :label="$t('feeDetailRuleBill.feeItem')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.feeTypeCdName }}>{{ scope.row.feeName }}
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('feeDetailRuleBill.receivablePeriod')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.endTime }}~{{ scope.row.deadlineTime }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="feeTotalPrice" :label="$t('feeDetailRuleBill.receivableAmount')" align="center"></el-table-column>
+      <el-table-column prop="ruleId" :label="$t('feeDetailRuleBill.ruleId')" align="center"></el-table-column>
+      <el-table-column prop="feeId" :label="$t('feeDetailRuleBill.feeId')" align="center"></el-table-column>
+      <el-table-column prop="stateName" :label="$t('feeDetailRuleBill.status')" align="center"></el-table-column>
+      <el-table-column :label="$t('feeDetailRuleBill.description')" align="center">
+        <template slot-scope="scope">
+          <div>{{ $t('feeDetailRuleBill.price') }}: {{ scope.row.squarePrice }}</div>
+          <div>{{ $t('feeDetailRuleBill.fixedFee') }}: {{ scope.row.additionalAmount }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('common.operation')" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" size="small">
+            <a :href="'/#/pages/fee/feeDetail?feeId=' + scope.row.feeId" target="_blank">
+              {{ $t('common.detail') }}
+            </a>
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="currentPage"
+      :page-sizes="[10, 20, 30, 50]"
+      :page-size="pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total"
+    ></el-pagination>
+  </div>
+</template>
+
+<script>
+import { listPayFeeRuleBill } from '@/api/fee/feeDetailRuleBillApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'FeeDetailRuleBill',
+  props: {
+    feeId: {
+      type: String,
+      default: ''
+    },
+    roomId: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      feeDetailRuleBillInfo: {
+        bills: [],
+        feeId: '',
+        roomId: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  methods: {
+    async loadData() {
+      const params = {
+        communityId: getCommunityId(),
+        feeId: this.feeDetailRuleBillInfo.feeId,
+        payerObjId: this.feeDetailRuleBillInfo.roomId,
+        page: this.currentPage,
+        row: this.pageSize
+      }
+
+      try {
+        const res = await listPayFeeRuleBill(params)
+        if (res.code === 0) {
+          this.feeDetailRuleBillInfo.bills = res.data
+          this.total = res.records
+        } else {
+          this.$message.error(res.msg)
+        }
+      } catch (error) {
+        console.error('请求失败:', error)
+      }
+    },
+    handleSizeChange(val) {
+      this.pageSize = val
+      this.loadData()
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this.loadData()
+    },
+    open(params) {
+      // 这个方法用于接收参数并初始化组件
+      if (params.feeId) {
+        this.feeDetailRuleBillInfo.feeId = params.feeId
+      }
+      if (params.roomId) {
+        this.feeDetailRuleBillInfo.roomId = params.roomId
+      }
+      this.loadData()
+    }
+  },
+  watch: {
+    feeId(newVal) {
+      this.feeDetailRuleBillInfo.feeId = newVal
+      this.loadData()
+    },
+    roomId(newVal) {
+      this.feeDetailRuleBillInfo.roomId = newVal
+      this.loadData()
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div>
+    <el-button @click="switchData">{{ $t('feeDetailRuleBillDemo.switchData') }}</el-button>
+    <fee-detail-rule-bill ref="feeDetailRuleBill"></fee-detail-rule-bill>
+  </div>
+</template>
+
+<script>
+import FeeDetailRuleBill from './feeDetailRuleBill'
+
+export default {
+  name: 'FeeDetailRuleBillDemo',
+  components: {
+    FeeDetailRuleBill
+  },
+  methods: {
+    switchData() {
+      this.$refs.feeDetailRuleBill.loadData({
+        feeId: '123',
+        roomId: '456'
+      })
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('finishFeeRule.title')"
+    :visible.sync="visible"
+    width="30%"
+    :before-close="handleClose"
+  >
+    <p>{{ $t('finishFeeRule.confirmMessage') }}</p>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="finishFeeRule">{{ $t('common.confirm') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { updatePayFeeRule } from '@/api/fee/finishFeeRuleApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'FinishFeeRule',
+  data() {
+    return {
+      visible: false,
+      finishFeeRuleInfo: {}
+    }
+  },
+  methods: {
+    open(params) {
+      this.finishFeeRuleInfo = params
+      this.visible = true
+    },
+    handleClose() {
+      this.visible = false
+    },
+    async finishFeeRule() {
+      const data = {
+        ruleId: this.finishFeeRuleInfo.ruleId,
+        state: '2009001',
+        communityId: getCommunityId()
+      }
+      
+      try {
+        const res = await updatePayFeeRule(data)
+        if (res.code === 0) {
+          this.$message.success(this.$t('common.operateSuccess'))
+          this.$emit('success')
+          this.handleClose()
+        } else {
+          this.$message.error(res.msg)
+        }
+      } catch (error) {
+        console.error('请求失败:', error)
+        this.$message.error(this.$t('common.operateFail'))
+      }
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div 
+    class="vc-input-search text-left" 
+    @mouseleave="doInputSearchRoomClose"
+    v-if="rooms && rooms.length>0"
+  >
+    <div class="close">
+      <i class="el-icon-close" @click="doInputSearchRoomClose"></i>
+    </div>
+    <div 
+      class="padding-left-sm padding-top-sm" 
+      style="cursor:pointer;"
+      v-for="(item,index) in rooms" 
+      :key="index"
+      @click="inputSearchRoomChooseRoom(item)"
+    >
+      <span>{{item.floorNum}}-{{item.unitNum}}-{{item.roomNum}}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryRooms } from '@/api/fee/inputSearchRoomApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'InputSearchRoom',
+  data() {
+    return {
+      rooms: [],
+      callComponent: '',
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.$on('searchRoom', this.handleSearchRoom)
+    this.$on('close', this.handleClose)
+  },
+  methods: {
+    handleSearchRoom(param) {
+      if (!param.roomName) return
+      this.loadRoomInfo(param.roomName)
+      this.callComponent = param.callComponent
+    },
+    handleClose() {
+      this.rooms = []
+    },
+    async loadRoomInfo(roomName) {
+      try {
+        const res = await queryRooms({
+          page: 1,
+          row: 10,
+          flag: 1,
+          roomNum: roomName,
+          communityId: this.communityId
+        })
+        this.rooms = res.rooms
+        if (res.rooms.length <= 0) {
+          this.$message.warning(this.$t('inputSearchRoom.noRoomFound'))
+        }
+      } catch (error) {
+        console.error('请求失败:', error)
+      }
+    },
+    inputSearchRoomChooseRoom(room) {
+      this.$emit(this.callComponent, 'notifyRoom', room)
+      this.rooms = []
+    },
+    doInputSearchRoomClose() {
+      this.rooms = []
+    }
+  }
+}
+</script>
+
+<style scoped>
+.vc-input-search {
+  position: absolute;
+  z-index: 999;
+  background: #fff;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+  padding: 10px;
+}
+.close {
+  text-align: right;
+  cursor: pointer;
+}
+.padding-left-sm {
+  padding-left: 10px;
+}
+.padding-top-sm {
+  padding-top: 5px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <div 
+    class="vc-input-search text-left"
+    v-if="rooms && rooms.length>0"
+  >
+    <div class="close">
+      <i class="el-icon-close" @click="doInputSearchRoomByOwnerClose"></i>
+    </div>
+    <div 
+      class="padding-left-sm padding-top-sm" 
+      style="cursor:pointer;"
+      v-for="(item,index) in rooms" 
+      :key="index"
+      @click="inputSearchRoomChooseRoomByOwner(item)"
+    >
+      <span>{{item.floorNum}}-{{item.unitNum}}-{{item.roomNum}}({{item.ownerName}})</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryRoomsByOwner } from '@/api/fee/inputSearchRoomByOwnerApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'InputSearchRoomByOwner',
+  data() {
+    return {
+      rooms: [],
+      callComponent: '',
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.$on('searchRoom', this.handleSearchRoom)
+    this.$on('close', this.handleClose)
+  },
+  methods: {
+    handleSearchRoom(param) {
+      if (!param.ownerName) return
+      this.loadRoomByOwnerInfo(param.ownerName)
+      this.callComponent = param.callComponent
+    },
+    handleClose() {
+      this.rooms = []
+    },
+    async loadRoomByOwnerInfo(ownerName) {
+      try {
+        const res = await queryRoomsByOwner({
+          page: 1,
+          row: 10,
+          ownerNameLike: ownerName,
+          communityId: this.communityId
+        })
+        this.rooms = res.rooms
+      } catch (error) {
+        console.error('请求失败:', error)
+      }
+    },
+    inputSearchRoomChooseRoomByOwner(room) {
+      this.$emit(this.callComponent, 'notifyRoomByOwner', room)
+      this.rooms = []
+    },
+    doInputSearchRoomByOwnerClose() {
+      this.rooms = []
+    }
+  }
+}
+</script>
+
+<style scoped>
+.vc-input-search {
+  position: absolute;
+  z-index: 999;
+  background: #fff;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+  padding: 10px;
+}
+.close {
+  text-align: right;
+  cursor: pointer;
+}
+.padding-left-sm {
+  padding-left: 10px;
+}
+.padding-top-sm {
+  padding-top: 5px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <div>
+    <el-input 
+      v-model="ownerName" 
+      :placeholder="$t('inputSearchRoomByOwnerDemo.searchPlaceholder')"
+      @input="handleSearch"
+    ></el-input>
+    <input-search-room-by-owner ref="inputSearchRoomByOwner"></input-search-room-by-owner>
+  </div>
+</template>
+
+<script>
+import InputSearchRoomByOwner from './inputSearchRoomByOwner'
+
+export default {
+  name: 'InputSearchRoomByOwnerDemo',
+  components: {
+    InputSearchRoomByOwner
+  },
+  data() {
+    return {
+      ownerName: ''
+    }
+  },
+  methods: {
+    handleSearch() {
+      this.$refs.inputSearchRoomByOwner.$emit('searchRoom', {
+        ownerName: this.ownerName,
+        callComponent: 'yourComponentName'
+      })
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div>
+    <el-input 
+      v-model="roomName" 
+      :placeholder="$t('inputSearchRoomDemo.searchPlaceholder')"
+      @input="handleSearch"
+    ></el-input>
+    <input-search-room ref="inputSearchRoom"></input-search-room>
+  </div>
+</template>
+
+<script>
+import InputSearchRoom from './inputSearchRoom'
+
+export default {
+  name: 'InputSearchRoomDemo',
+  components: {
+    InputSearchRoom
+  },
+  data() {
+    return {
+      roomName: ''
+    }
+  },
+  methods: {
+    handleSearch() {
+      this.$refs.inputSearchRoom.$emit('searchRoom', {
+        roomName: this.roomName,
+        callComponent: 'yourComponentName'
+      })
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-card v-if="payFeeDepositInfo.fees.length > 0" class="deposit-card">
+    <div slot="header" class="clearfix">
+      <span>{{ $t('payFeeDeposit.title') }}</span>
+      <el-button type="primary" size="small" class="float-right" @click="_queryPayFeeDeposit">
+        <i class="el-icon-refresh"></i>
+        {{ $t('common.refresh') }}
+      </el-button>
+    </div>
+
+    <el-table :data="payFeeDepositInfo.fees" border style="width: 100%" v-loading="loading">
+      <el-table-column prop="payerObjName" :label="$t('payFeeDeposit.payerObj')" align="center"></el-table-column>
+      <el-table-column prop="feeName" :label="$t('payFeeDeposit.feeItem')" align="center"></el-table-column>
+      <el-table-column :label="$t('payFeeDeposit.timePeriod')" align="center" width="220">
+        <template slot-scope="scope">
+          {{ scope.row.startTime }} ~ {{ scope.row.endTime }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="receivedAmount" :label="$t('payFeeDeposit.amount')" align="center"></el-table-column>
+      <el-table-column prop="createTime" :label="$t('payFeeDeposit.payTime')" align="center"
+        width="180"></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="_openRefundDeposit(scope.row)">
+            {{ $t('payFeeDeposit.refund') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <refund-deposit-fee ref="refundDepositFee"></refund-deposit-fee>
+  </el-card>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { queryFeeDeposit } from '@/api/fee/batchPayFeeOrderApi'
+import RefundDepositFee from './refundDepositFee'
+
+export default {
+  name: 'PayFeeDeposit',
+  components: {
+    RefundDepositFee
+  },
+  data() {
+    return {
+      loading: false,
+      payFeeDepositInfo: {
+        fees: [],
+        payerObjId: '',
+        payerObjType: '',
+        ownerId: '',
+        communityId: ''
+      }
+    }
+  },
+  created() {
+    this.payFeeDepositInfo.communityId = getCommunityId()
+  },
+  methods: {
+    async _listFeeDeposit(page = 1, rows = 20) {
+      this.loading = true
+      try {
+        const params = {
+          page,
+          row: rows,
+          payerObjId: this.payFeeDepositInfo.payerObjId,
+          ownerId: this.payFeeDepositInfo.ownerId,
+          communityId: this.payFeeDepositInfo.communityId,
+          state: '1400'
+        }
+
+        const res = await queryFeeDeposit(params)
+        if (res.code === 0) {
+          this.payFeeDepositInfo.fees = res.data || []
+        }
+      } catch (error) {
+        console.error('请求失败:', error)
+      } finally {
+        this.loading = false
+      }
+    },
+
+    _queryPayFeeDeposit() {
+      this._listFeeDeposit()
+    },
+
+    _openRefundDeposit(fee) {
+      this.$refs.refundDepositFee.open(fee)
+    },
+
+    open(params) {
+      this.payFeeDepositInfo = {
+        ...this.payFeeDepositInfo,
+        ...params
+      }
+      this._listFeeDeposit()
+    },
+
+    refresh() {
+      this._listFeeDeposit()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.deposit-card {
+  margin-bottom: 20px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-card v-if="payFeeUserAccountInfo.accountList.length > 0" class="account-card">
+    <div slot="header" class="flex justify-between">
+      <span>{{ $t('payFeeUserAccount.title') }}</span>
+      <el-button type="primary" size="small" class="float-right" @click="_queryPayFeeUserAccount">
+        <i class="el-icon-refresh"></i>
+        {{ $t('common.refresh') }}
+      </el-button>
+    </div>
+
+    <el-table :data="payFeeUserAccountInfo.accountList" border style="width: 100%" v-loading="loading">
+      <el-table-column width="55" align="center">
+        <template slot-scope="scope">
+          <el-radio v-model="payFeeUserAccountInfo.selectAccountIds" :label="scope.row.acctId"
+            @change="_computeFeeUserAmount(scope.row)"></el-radio>
+        </template>
+      </el-table-column>
+      <el-table-column prop="acctTypeName" :label="$t('payFeeUserAccount.accountType')"
+        align="center"></el-table-column>
+      <el-table-column prop="acctName" :label="$t('payFeeUserAccount.accountName')" align="center"></el-table-column>
+      <el-table-column :label="$t('payFeeUserAccount.accountAmount')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.amount }} {{ $t('payFeeUserAccount.yuan') }}
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('common.operation')" align="center" width="150">
+        <template slot-scope="scope">
+          <el-button type="primary" size="mini" @click="_openAddUserAmountModal(scope.row)">
+            <i class="el-icon-plus"></i>
+            {{ $t('payFeeUserAccount.preSave') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-card>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { queryCommunityOwnerAccount } from '@/api/fee/batchPayFeeOrderApi'
+
+export default {
+  name: 'PayFeeUserAccount',
+  data() {
+    return {
+      loading: false,
+      payFeeUserAccountInfo: {
+        accountList: [],
+        feeId: '',
+        ownerId: '',
+        communityId: '',
+        quanAccount: false,
+        selectAccountIds: [],
+        integralAmount: '',
+        cashAmount: '',
+        couponAmount: ''
+      }
+    }
+  },
+  created() {
+    this.payFeeUserAccountInfo.communityId = getCommunityId()
+  },
+  methods: {
+    async _listUserAccount(page = 1, rows = 20) {
+      this.loading = true
+      try {
+        const params = {
+          page,
+          row: rows,
+          feeId: this.payFeeUserAccountInfo.feeId,
+          ownerId: this.payFeeUserAccountInfo.ownerId,
+          communityId: this.payFeeUserAccountInfo.communityId
+        }
+
+        const res = await queryCommunityOwnerAccount(params)
+        if (res.code === 0) {
+          this.payFeeUserAccountInfo.accountList = res.data || []
+        }
+      } catch (error) {
+        console.error('请求失败:', error)
+      } finally {
+        this.loading = false
+      }
+    },
+
+    _queryPayFeeUserAccount() {
+      this._listUserAccount()
+    },
+
+    _openAddUserAmountModal(userAccount) {
+      window.open(`/#/pages/owner/ownerDetail?ownerId=${userAccount.objId}&currentTab=ownerDetailAccount`)
+    },
+
+    _computeFeeUserAmount(acct) {
+      let _totalUserAmount = 0.0
+      let _selectAccount = []
+
+      this.payFeeUserAccountInfo.accountList.forEach(item => {
+        if (acct.acctId === item.acctId && item.amount != 0) {
+          _totalUserAmount += parseFloat(item.amount)
+          _selectAccount.push(item)
+          this.payFeeUserAccountInfo.cashAmount = item.amount
+        }
+      })
+
+      this.$emit('changeUserAmountPrice', {
+        totalUserAmount: _totalUserAmount,
+        accountList: this.payFeeUserAccountInfo.accountList,
+        integralAmount: 0,
+        cashAmount: this.payFeeUserAccountInfo.cashAmount,
+        couponAmount: 0,
+        selectAccount: _selectAccount
+      })
+    },
+
+    open(params) {
+      this.payFeeUserAccountInfo = {
+        ...this.payFeeUserAccountInfo,
+        ...params
+      }
+      this._listUserAccount()
+    },
+
+    refresh() {
+      this._listUserAccount()
+    },
+
+    refreshAndChoose() {
+      this.payFeeUserAccountInfo.accountList = []
+      this.payFeeUserAccountInfo.selectAccountIds = []
+      this._listUserAccount()
+      setTimeout(() => {
+        this.payFeeUserAccountInfo.accountList.forEach(item => {
+          if (item.acctType === '2003') {
+            this.payFeeUserAccountInfo.selectAccountIds.push(item.acctId)
+          }
+        })
+      }, 2000)
+    },
+
+    clear() {
+      this.payFeeUserAccountInfo.accountList = []
+      this.payFeeUserAccountInfo.selectAccountIds = []
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.account-card {
+  margin-bottom: 20px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('prestoreAccount.title')"
+    :visible.sync="dialogVisible"
+    width="50%"
+  >
+    <el-form :model="prestoreAccountInfo" label-width="120px">
+      <el-form-item :label="$t('prestoreAccount.accountType')" required>
+        <el-select
+          v-model="prestoreAccountInfo.acctType"
+          style="width: 100%"
+        >
+          <el-option
+            :label="$t('prestoreAccount.selectAccountType')"
+            value=""
+            disabled
+          ></el-option>
+          <el-option
+            v-for="(type,index) in prestoreAccountInfo.acctTypes"
+            :key="index"
+            :label="type.name"
+            :value="type.statusCd"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item :label="$t('prestoreAccount.ownerPhone')" required>
+        <el-input
+          v-model="prestoreAccountInfo.tel"
+          :placeholder="$t('prestoreAccount.ownerPhonePlaceholder')"
+          @blur="_changeTel"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item :label="$t('prestoreAccount.ownerName')" required>
+        <el-select
+          v-model="prestoreAccountInfo.ownerId"
+          style="width: 100%"
+          @change="_loadOwnerRooms"
+        >
+          <el-option
+            :label="$t('prestoreAccount.selectOwner')"
+            value=""
+            disabled
+          ></el-option>
+          <el-option
+            v-for="(owner,index) in prestoreAccountInfo.owners"
+            :key="index"
+            :label="owner.name"
+            :value="owner.ownerId"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item
+        v-if="prestoreAccountInfo.acctType == '2004' || prestoreAccountInfo.acctType == '2005'"
+        :label="$t('prestoreAccount.deductionRoom')"
+        required
+      >
+        <el-select v-model="prestoreAccountInfo.roomId" style="width: 100%">
+          <el-option
+            :label="$t('prestoreAccount.selectRoom')"
+            value=""
+            disabled
+          ></el-option>
+          <el-option
+            v-for="(room,index) in prestoreAccountInfo.rooms"
+            :key="index"
+            :label="room.roomName"
+            :value="room.roomId"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item :label="$t('prestoreAccount.prestoreAmount')" required>
+        <el-input
+          v-model="prestoreAccountInfo.amount"
+          :placeholder="$t('prestoreAccount.prestoreAmountPlaceholder')"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item :label="$t('prestoreAccount.paymentMethod')" required>
+        <el-select v-model="prestoreAccountInfo.primeRate" style="width: 100%">
+          <el-option
+            :label="$t('prestoreAccount.selectPaymentMethod')"
+            value=""
+            disabled
+          ></el-option>
+          <el-option
+            v-for="(item,index) in prestoreAccountInfo.primeRates"
+            v-if="item.statusCd != '5' && item.statusCd != '6'"
+            :key="index"
+            :label="item.name"
+            :value="item.statusCd"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item :label="$t('prestoreAccount.remark')">
+        <el-input
+          type="textarea"
+          :rows="3"
+          v-model="prestoreAccountInfo.remark"
+          :placeholder="$t('prestoreAccount.remarkPlaceholder')"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">{{ $t('prestoreAccount.cancel') }}</el-button>
+      <el-button type="primary" @click="savePrestoreAccountInfo">{{ $t('prestoreAccount.save') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { ownerPrestoreAccount, queryOwners, queryRoomsByOwner } from '@/api/fee/prestoreAccountApi'
+import { getDict } from '@/api/community/communityApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'PrestoreAccount',
+  data() {
+    return {
+      dialogVisible: false,
+      prestoreAccountInfo: {
+        tel: '',
+        ownerId: '',
+        owners: [],
+        amount: '',
+        remark: '',
+        acctTypes: [],
+        acctType: '2003',
+        primeRate: '',
+        primeRates: [],
+        rooms: [],
+        roomId: '',
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this._initPrimeRates()
+  },
+  methods: {
+    open(params) {
+      this.dialogVisible = true
+      this._initAcctTypes()
+      
+      if (params) {
+        this.prestoreAccountInfo.tel = params.tel || ''
+        this.prestoreAccountInfo.ownerId = params.ownerId || ''
+        this.prestoreAccountInfo.acctType = params.acctType || '2003'
+        this.prestoreAccountInfo.roomId = params.roomId || ''
+        
+        if (params.tel) {
+          this._changeTel()
+          this._loadOwnerRooms()
+        }
+      }
+    },
+    _initPrimeRates() {
+      getDict('pay_fee_detail', 'prime_rate').then(data => {
+        this.prestoreAccountInfo.primeRates = data
+      })
+    },
+    _initAcctTypes() {
+      getDict('account', 'acct_type').then(data => {
+        this.prestoreAccountInfo.acctTypes = data
+      })
+    },
+    prestoreAccountValidate() {
+      if (!this.prestoreAccountInfo.ownerId) {
+        this.$message.error(this.$t('prestoreAccount.validateOwner'))
+        return false
+      }
+      if (!this.prestoreAccountInfo.amount) {
+        this.$message.error(this.$t('prestoreAccount.validateAmount'))
+        return false
+      }
+      if (!this.prestoreAccountInfo.acctType) {
+        this.$message.error(this.$t('prestoreAccount.validateAccountType'))
+        return false
+      }
+      if (this.prestoreAccountInfo.remark && this.prestoreAccountInfo.remark.length > 200) {
+        this.$message.error(this.$t('prestoreAccount.validateRemark'))
+        return false
+      }
+      return true
+    },
+    savePrestoreAccountInfo() {
+      if (!this.prestoreAccountValidate()) return
+
+      const params = {
+        ...this.prestoreAccountInfo,
+        communityId: this.communityId
+      }
+
+      ownerPrestoreAccount(params).then(response => {
+        if (response.code === 0) {
+          this.$message.success(this.$t('prestoreAccount.saveSuccess'))
+          this.dialogVisible = false
+          this.clearPrestoreAccountInfo()
+          this.$emit('save-success')
+        } else {
+          this.$message.error(response.msg)
+        }
+      }).catch(error => {
+        console.error('请求失败:', error)
+        this.$message.error(this.$t('prestoreAccount.saveFailed'))
+      })
+    },
+    clearPrestoreAccountInfo() {
+      const primeRates = this.prestoreAccountInfo.primeRates
+      this.prestoreAccountInfo = {
+        tel: '',
+        ownerId: '',
+        owners: [],
+        amount: '',
+        remark: '',
+        acctTypes: [],
+        acctType: '2003',
+        primeRate: '',
+        primeRates: primeRates,
+        rooms: [],
+        roomId: '',
+      }
+    },
+    _changeTel() {
+      if (!this.prestoreAccountInfo.tel) return
+
+      const params = {
+        communityId: this.communityId,
+        row: 50,
+        page: 1,
+        link: this.prestoreAccountInfo.tel,
+        ownerTypeCd: '1001'
+      }
+
+      queryOwners(params).then(response => {
+        this.prestoreAccountInfo.owners = response.data
+      }).catch(error => {
+        console.error('请求失败:', error)
+        this.prestoreAccountInfo.owners = []
+      })
+    },
+    _loadOwnerRooms() {
+      if (!this.prestoreAccountInfo.ownerId) return
+
+      const params = {
+        communityId: this.communityId,
+        row: 50,
+        page: 1,
+        ownerId: this.prestoreAccountInfo.ownerId,
+      }
+
+      queryRoomsByOwner(params).then(response => {
+        this.prestoreAccountInfo.rooms = response.rooms
+      }).catch(error => {
+        console.error('请求失败:', error)
+        this.prestoreAccountInfo.rooms = []
+      })
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-button @click="openModal">{{ $t('prestoreAccountDemo.openModal') }}</el-button>
+  <prestore-account ref="prestoreAccount"></prestore-account>
+</template>
+
+<script>
+import PrestoreAccount from './prestoreAccount'
+
+export default {
+  name: 'PrestoreAccountDemo',
+  components: {
+    PrestoreAccount
+  },
+  methods: {
+    openModal() {
+      this.$refs.prestoreAccount.open({
+        tel: '13800138000',
+        ownerId: '123',
+        acctType: '2003',
+        roomId: '456'
+      })
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('refundDepositFee.title')"
+    :visible.sync="visible"
+    width="500px"
+    :before-close="handleClose"
+  >
+    <div class="dialog-content">
+      <p>{{ $t('refundDepositFee.confirmText') }}</p>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="refundDepositFee">{{ $t('common.confirm') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { refundFeeDeposit } from '@/api/fee/batchPayFeeOrderApi'
+
+export default {
+  name: 'RefundDepositFee',
+  data() {
+    return {
+      visible: false,
+      refundDepositFeeInfo: {}
+    }
+  },
+  methods: {
+    open(fee) {
+      this.refundDepositFeeInfo = { ...fee }
+      this.visible = true
+    },
+
+    handleClose() {
+      this.visible = false
+    },
+
+    async refundDepositFee() {
+      try {
+        const params = {
+          ...this.refundDepositFeeInfo,
+          communityId: getCommunityId()
+        }
+
+        const res = await refundFeeDeposit(params)
+        if (res.code === 0) {
+          this.$message.success('退押金成功')
+          this.visible = false
+          this.$emit('success')
+          this.$emit('refresh')
+        } else {
+          this.$message.error(res.msg)
+        }
+      } catch (error) {
+        console.error('请求失败:', error)
+        this.$message.error('退押金失败')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dialog-content {
+  padding: 20px;
+  text-align: center;
+  font-size: 16px;
+  line-height: 1.6;
+}
+</style>
 \ No newline at end of file
 <template>
-  <el-dialog
-    :title="$t('returnPayFee.refundTitle')"
+  <el-dialog 
+    :title="$t('returnPayFee.fillRefundReason')" 
     :visible.sync="visible"
     width="50%"
-    @close="handleClose"
+    center
   >
-    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
-      <el-form-item :label="`${$t('returnPayFee.fee')}ID`">
-        <el-input v-model="form.detailId" readonly />
+    <el-form :model="returnFeeDetailInfo" label-width="120px">
+      <el-form-item :label="$t('returnPayFee.paymentId')">
+        <el-input v-model="returnFeeDetailInfo.detailId" readonly />
       </el-form-item>
-      <el-form-item :label="`${$t('returnPayFee.cycle')}(${$t('returnPayFee.month')})`">
-        <el-input v-model="form.cycles" readonly />
+      
+      <el-form-item :label="`${$t('returnPayFee.cycle')}(单位月)`">
+        <el-input v-model="returnFeeDetailInfo.cycles" readonly />
       </el-form-item>
+      
       <el-form-item :label="$t('returnPayFee.receivableAmount')">
-        <el-input v-model="form.receivableAmount" readonly />
+        <el-input v-model="returnFeeDetailInfo.receivableAmount" readonly />
       </el-form-item>
+      
       <el-form-item :label="$t('returnPayFee.receivedAmount')">
-        <el-input v-model="form.receivedAmount" readonly />
+        <el-input v-model="returnFeeDetailInfo.receivedAmount" readonly />
       </el-form-item>
-      <el-form-item :label="$t('returnPayFee.payTime')">
-        <el-input v-model="form.payTime" readonly />
+      
+      <el-form-item :label="$t('returnPayFee.paymentTime')">
+        <el-input v-model="returnFeeDetailInfo.payTime" readonly />
       </el-form-item>
-      <el-form-item 
-        :label="`<span style='color:red'>*</span>${$t('returnPayFee.refundReason')}`" 
-        prop="reason"
-      >
+      
+      <el-form-item :label="$t('returnPayFee.refundReason')" required>
         <el-input
-          v-model="form.reason"
           type="textarea"
-          :rows="4"
-          :placeholder="$t('returnPayFee.inputReason')"
-        />
+          :rows="3"
+          v-model="returnFeeDetailInfo.reason"
+          :placeholder="$t('returnPayFee.enterRefundReason')"
+        ></el-input>
       </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('returnPayFee.submitRefund') }}</el-button>
+      <el-button type="primary" @click="submitReturnPayFee">{{ $t('returnPayFee.submitRefund') }}</el-button>
     </span>
   </el-dialog>
 </template>
 <script>
-import { saveReturnPayFee } from '@/api/fee/payFeeAuditManageApi'
 import { getCommunityId } from '@/api/community/communityApi'
+import { saveReturnPayFee } from '@/api/fee/propertyFeeApi'
 export default {
-  name: 'ReturnPayFeeModal',
+  name: 'ReturnPayFee',
   data() {
     return {
       visible: false,
-      form: {
+      returnFeeDetailInfo: {
         detailId: '',
         cycles: '',
         receivableAmount: '',
@@ -61,47 +64,63 @@ export default {
         feeTypeCd: '',
         configId: ''
       },
-      rules: {
-        reason: [
-          { required: true, message: this.$t('returnPayFee.reasonRequired'), trigger: 'blur' },
-          { min: 1, max: 200, message: this.$t('returnPayFee.reasonLength'), trigger: 'blur' }
-        ]
-      }
+      communityId: ''
     }
   },
+  created() {
+    this.communityId = getCommunityId()
+  },
   methods: {
-    open(row) {
-      this.form = {
-        detailId: row.detailId,
-        cycles: row.cycles,
-        receivableAmount: row.receivableAmount,
-        receivedAmount: row.receivedAmount,
-        payTime: row.createTime,
-        reason: '',
-        communityId: row.communityId,
-        feeId: row.feeId,
-        feeTypeCd: row.feeTypeCd,
-        configId: row.configId
+    open(params) {
+      this.returnFeeDetailInfo = {
+        ...this.returnFeeDetailInfo,
+        communityId: params.communityId || this.communityId,
+        payTime: params.createTime,
+        detailId: params.detailId,
+        cycles: params.cycles,
+        receivableAmount: params.receivableAmount,
+        receivedAmount: params.receivedAmount,
+        feeId: params.mainFeeInfo.feeId || '',
+        feeTypeCd: params.mainFeeInfo.feeTypeCd || '',
+        configId: params.mainFeeInfo.configId || '',
+        remark: params.remark || ''
       }
       this.visible = true
     },
-    handleClose() {
-      this.$refs.form.resetFields()
+    returnPayFeeValidate() {
+      if (!this.returnFeeDetailInfo.reason) {
+        this.$message.error(this.$t('returnPayFee.refundReasonRequired'))
+        return false
+      }
+      if (this.returnFeeDetailInfo.reason.length > 200) {
+        this.$message.error(this.$t('returnPayFee.refundReasonTooLong'))
+        return false
+      }
+      return true
     },
-    async handleSubmit() {
+    async submitReturnPayFee() {
+      if (!this.returnPayFeeValidate()) return
+      
       try {
-        await this.$refs.form.validate()
-        this.form.communityId = getCommunityId()
-        await saveReturnPayFee(this.form)
-        this.$message.success(this.$t('common.operateSuccess'))
-        this.$emit('success')
-        this.visible = false
-      } catch (error) {
-        if (error.message) {
-          this.$message.error(error.message)
+        const res = await saveReturnPayFee(this.returnFeeDetailInfo)
+        if (res.code === 0) {
+          this.$message.success(this.$t('common.operateSuccess'))
+          this.visible = false
+          this.$emit('success')
+        } else {
+          this.$message.error(res.msg || this.$t('common.operateFailed'))
         }
+      } catch (error) {
+        console.error('提交退费申请失败:', error)
+        this.$message.error(this.$t('common.operateFailed'))
       }
     }
   }
 }
-</script>
 \ No newline at end of file
+</script>
+
+<style scoped>
+.el-input, .el-textarea {
+  width: 100%;
+}
+</style>
 \ No newline at end of file
@@ -102,6 +102,7 @@
 //import { getDict } from '@/api/community/communityApi'
 import { queryFeeDiscount, updateReviewApplyRoomDiscount } from '@/api/fee/applyRoomDiscountManageApi'
 import ViewImage from '@/components/system/viewImage'
+import { getCommunityId } from '@/api/community/communityApi'
 export default {
   name: 'ReviewApplyRoomDiscount',
@@ -182,7 +183,7 @@ export default {
       this.form = {
         ...this.form,
         ...data,
-        communityId: this.$store.getters.communityId,
+        communityId: getCommunityId(),
         selectedFees: [],
         refundAmount: ''
       }
+<template>
+  <el-dialog
+    :title="$t('roomCreateFeeAdd.title')"
+    :visible.sync="visible"
+    width="70%"
+    :before-close="handleClose"
+  >
+    <el-form ref="form" :model="formData" label-width="120px">
+      <el-form-item :label="$t('roomCreateFeeAdd.location')">
+        <el-input 
+          v-model="formData.locationTypeCdName" 
+          disabled
+          :placeholder="$t('roomCreateFeeAdd.locationPlaceholder')"
+        ></el-input>
+      </el-form-item>
+      
+      <el-form-item :label="$t('roomCreateFeeAdd.feeType')" prop="feeTypeCd">
+        <el-select
+          v-model="formData.feeTypeCd"
+          @change="handleFeeTypeChange"
+          :placeholder="$t('roomCreateFeeAdd.feeTypePlaceholder')"
+          style="width: 100%"
+        >
+          <template v-for="item in feeTypeOptions">
+            <el-option
+              v-if="item.statusCd !='888800010017'"
+              :key="item.statusCd"
+              :label="item.name"
+              :value="item.statusCd"
+            ></el-option>
+          </template>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item 
+        v-if="formData.feeTypeCd"
+        :label="$t('roomCreateFeeAdd.feeItem')"
+        prop="configId"
+      >
+        <el-select
+          v-model="formData.configId"
+          @change="handleConfigChange"
+          :placeholder="$t('roomCreateFeeAdd.feeItemPlaceholder')"
+          style="width: 100%"
+        >
+          <el-option
+            v-for="item in feeConfigOptions"
+            :key="item.configId"
+            :label="item.feeName"
+            :value="item.configId"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item 
+        v-if="formData.computingFormula == '4004'"
+        :label="$t('roomCreateFeeAdd.amount')"
+        prop="amount"
+      >
+        <el-input
+          v-model="formData.amount"
+          :placeholder="$t('roomCreateFeeAdd.amountPlaceholder')"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item :label="$t('roomCreateFeeAdd.startTime')" prop="startTime">
+        <el-date-picker
+          v-model="formData.startTime"
+          type="date"
+          :placeholder="$t('roomCreateFeeAdd.startTimePlaceholder')"
+          value-format="yyyy-MM-dd"
+          @change="validateStartTime"
+        ></el-date-picker>
+      </el-form-item>
+
+      <el-form-item :label="$t('roomCreateFeeAdd.endTime')" prop="endTime">
+        <el-date-picker
+          v-model="formData.endTime"
+          type="date"
+          :placeholder="$t('roomCreateFeeAdd.endTimePlaceholder')"
+          value-format="yyyy-MM-dd"
+          @change="validateEndTime"
+        ></el-date-picker>
+      </el-form-item>
+
+      <el-form-item 
+        v-show="formData.computingFormula == '1102'"
+        :label="$t('roomCreateFeeAdd.rateCycle')"
+        prop="rateCycle"
+      >
+        <el-input
+          v-model="formData.rateCycle"
+          :placeholder="$t('roomCreateFeeAdd.rateCyclePlaceholder')"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item 
+        v-show="formData.computingFormula == '1102'"
+        :label="$t('roomCreateFeeAdd.rate')"
+        prop="rate"
+      >
+        <el-input
+          v-model="formData.rate"
+          :placeholder="$t('roomCreateFeeAdd.ratePlaceholder')"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item 
+        v-show="formData.computingFormula == '1102'"
+        :label="$t('roomCreateFeeAdd.rateStartTime')"
+        prop="rateStartTime"
+      >
+        <el-date-picker
+          v-model="formData.rateStartTime"
+          type="date"
+          :placeholder="$t('roomCreateFeeAdd.rateStartTimePlaceholder')"
+          value-format="yyyy-MM-dd"
+        ></el-date-picker>
+      </el-form-item>
+    </el-form>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleSubmit">{{ $t('common.submit') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { saveRoomCreateFee, listFeeConfigs } from '@/api/fee/roomCreateFeeAddApi'
+import { getDict, getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'RoomCreateFeeAdd',
+  data() {
+    return {
+      visible: false,
+      formData: {
+        feeTypeCds: [],
+        feeConfigs: [],
+        locationTypeCd: '',
+        locationObjId: '',
+        feeTypeCd: '',
+        configId: '',
+        locationTypeCdName: '',
+        startTime: '',
+        endTime: '2050-01-01',
+        computingFormula: '',
+        amount: '',
+        rateCycle: '',
+        rate: '',
+        rateStartTime: '',
+        feeFlag: ''
+      },
+      feeTypeOptions: [],
+      feeConfigOptions: [],
+      rules: {
+        locationObjId: [
+          { required: true, message: this.$t('roomCreateFeeAdd.validate.locationRequired'), trigger: 'blur' }
+        ],
+        feeTypeCd: [
+          { required: true, message: this.$t('roomCreateFeeAdd.validate.feeTypeRequired'), trigger: 'change' }
+        ],
+        configId: [
+          { required: true, message: this.$t('roomCreateFeeAdd.validate.feeItemRequired'), trigger: 'change' }
+        ],
+        startTime: [
+          { required: true, message: this.$t('roomCreateFeeAdd.validate.startTimeRequired'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open(room) {
+      this.resetForm()
+      this.formData.locationObjId = room.roomId
+      this.formData.locationTypeCdName = `${room.floorNum}-${room.unitNum}-${room.roomNum}(${room.ownerName})`
+      
+      if (room.roomName) {
+        this.formData.locationTypeCdName = room.roomName
+      }
+      
+      this.formData.roomType = room.roomType
+      if (room.roomType === '2020602') {
+        this.formData.locationTypeCdName = `${room.floorNum}-${room.roomNum}(${room.ownerName})`
+      }
+      
+      this.loadFeeTypes()
+      this.visible = true
+    },
+    
+    loadFeeTypes() {
+      getDict('pay_fee_config', 'fee_type_cd').then(data => {
+        this.feeTypeOptions = data.filter(item => 
+          item.statusCd !== '888800010015' && item.statusCd !== '888800010016'
+        )
+      })
+    },
+    
+    handleFeeTypeChange(value) {
+      if (value === '888800010006' || value === '888800010014') {
+        this.formData.startTime = this.$dayjs().format('YYYY-MM-DD')
+        this.formData.endTime = this.$dayjs().add(1, 'month').format('YYYY-MM-DD')
+      }
+      
+      this.formData.configId = ''
+      this.loadFeeConfigs(value)
+    },
+    
+    loadFeeConfigs(feeTypeCd) {
+      listFeeConfigs({
+        page: 1,
+        row: 500,
+        communityId: getCommunityId(),
+        feeTypeCd,
+        isDefault: 'F',
+        state: 'Y'
+      }).then(response => {
+        this.feeConfigOptions = response.data.feeConfigs
+      })
+    },
+    
+    handleConfigChange(configId) {
+      if (this.formData.feeTypeCd !== '888800010006' && 
+          this.formData.feeTypeCd !== '888800010014' && 
+          this.formData.feeFlag === '1003006') {
+        this.formData.endTime = ''
+      }
+      
+      const config = this.feeConfigOptions.find(item => item.configId === configId)
+      if (config) {
+        this.formData.feeFlag = config.feeFlag
+        this.formData.computingFormula = config.computingFormula
+      }
+    },
+    
+    validateStartTime(value) {
+      if (!this.formData.feeFlag && !this.formData.feeTypeCd) {
+        const start = new Date(value)
+        const end = new Date(this.formData.endTime)
+        if (start >= end) {
+          this.$message.error(this.$t('roomCreateFeeAdd.validate.startBeforeEnd'))
+          this.formData.startTime = ''
+        }
+      }
+    },
+    
+    validateEndTime(value) {
+      const start = new Date(this.formData.startTime)
+      const end = new Date(value)
+      if (start >= end) {
+        this.$message.error(this.$t('roomCreateFeeAdd.validate.endAfterStart'))
+        this.formData.endTime = ''
+      }
+    },
+    
+    handleSubmit() {
+      this.$refs.form.validate(valid => {
+        if (!valid) return
+        
+        if (this.formData.feeTypeCd !== '888800010006' && this.formData.feeFlag !== '1003006') {
+          if (!this.formData.endTime) {
+            this.$message.error(this.$t('roomCreateFeeAdd.validate.endTimeRequired'))
+            return
+          }
+        }
+        
+        const params = {
+          ...this.formData,
+          communityId: getCommunityId()
+        }
+        
+        saveRoomCreateFee(params).then(() => {
+          this.$message.success(this.$t('roomCreateFeeAdd.successMessage'))
+          this.$emit('success')
+          this.handleClose()
+        }).catch(error => {
+          this.$message.error(error.message)
+        })
+      })
+    },
+    
+    resetForm() {
+      if (this.$refs.form) {
+        this.$refs.form.resetFields()
+      }
+      this.formData = {
+        feeTypeCds: [],
+        feeConfigs: [],
+        locationTypeCd: '',
+        locationObjId: '',
+        feeTypeCd: '',
+        configId: '',
+        locationTypeCdName: '',
+        startTime: '',
+        endTime: '2050-01-01',
+        computingFormula: '',
+        amount: '',
+        rateCycle: '',
+        rate: '',
+        rateStartTime: '',
+        feeFlag: ''
+      }
+    },
+    
+    handleClose() {
+      this.visible = false
+      this.resetForm()
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div>
+    <el-button @click="openModal">{{ $t('roomCreateFeeAddDemo.openModal') }}</el-button>
+    <room-create-fee-add ref="roomCreateFeeAdd" @success="handleSuccess"></room-create-fee-add>
+  </div>
+</template>
+
+<script>
+import RoomCreateFeeAdd from './roomCreateFeeAdd'
+
+export default {
+  name: 'RoomCreateFeeAddDemo',
+  components: {
+    RoomCreateFeeAdd
+  },
+  methods: {
+    openModal() {
+      this.$refs.roomCreateFeeAdd.open({
+        roomId: '123',
+        floorNum: '1',
+        unitNum: '2',
+        roomNum: '101',
+        ownerName: 'Test Owner',
+        roomType: '2020601'
+      })
+    },
+    handleSuccess() {
+      this.$message.success(this.$t('roomCreateFeeAddDemo.successMessage'))
+    }
+  }
+}
+</script>
 \ No newline at end of file
-<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
+<template>
+  <div>
+    <el-row class="margin-top">
+      <el-col :span="24" class="text-right">
+        <el-button 
+          type="primary" 
+          size="small" 
+          v-if="simplifyCallableInfo.roomId"
+          @click="_openWritePrintOweFeeCallableModal"
+        >
+          <i class="el-icon-plus"></i>
+          {{ $t('simplifyCallable.register') }}
+        </el-button>
+        <el-button 
+          type="primary" 
+          size="small" 
+          v-if="simplifyCallableInfo.roomId"
+          @click="_openAddOweFeeCallableModal"
+        >
+          <i class="el-icon-plus"></i>
+          {{ $t('simplifyCallable.callable') }}
+        </el-button>
+        <el-button 
+          type="primary" 
+          size="small" 
+          v-if="simplifyCallableInfo.roomId"
+          @click="_printOwnOrder"
+        >
+          <i class="el-icon-plus"></i>
+          {{ $t('simplifyCallable.callableOrder') }}
+        </el-button>
+      </el-col>
+    </el-row>
+    <div>
+      <el-table
+        :data="simplifyCallableInfo.callables"
+        style="margin-top:10px"
+        border
+        stripe
+      >
+        <el-table-column prop="ofcId" :label="$t('simplifyCallable.id')" align="center"></el-table-column>
+        <el-table-column prop="ownerName" :label="$t('simplifyCallable.ownerName')" align="center"></el-table-column>
+        <el-table-column prop="payerObjName" :label="$t('simplifyCallable.payerObjName')" align="center"></el-table-column>
+        <el-table-column prop="feeName" :label="$t('simplifyCallable.feeName')" align="center"></el-table-column>
+        <el-table-column prop="amountdOwed" :label="$t('simplifyCallable.amount')" align="center"></el-table-column>
+        <el-table-column :label="$t('simplifyCallable.timePeriod')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.startTime}}<br>~{{scope.row.endTime}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="callableWayName" :label="$t('simplifyCallable.callableWay')" align="center"></el-table-column>
+        <el-table-column prop="staffName" :label="$t('simplifyCallable.staffName')" align="center"></el-table-column>
+        <el-table-column prop="stateName" :label="$t('simplifyCallable.status')" align="center"></el-table-column>
+        <el-table-column prop="remark" :label="$t('simplifyCallable.remark')" align="center">
+          <template slot-scope="scope">
+            <div class="textAuto" style="max-width: 200px;">{{scope.row.remark}}</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" :label="$t('simplifyCallable.createTime')" align="center"></el-table-column>
+        <el-table-column :label="$t('simplifyCallable.actions')" align="center">
+          <template slot-scope="scope">
+            <el-button-group>
+              <el-button size="mini" @click="_openDeleteOweFeeCallableModel(scope.row)">
+                {{ $t('simplifyCallable.delete') }}
+              </el-button>
+            </el-button-group>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-size="pageSize"
+        layout="total, prev, pager, next"
+        :total="total">
+      </el-pagination>
+    </div>
+    <write-owe-fee-callable ref="writeOweFeeCallable"></write-owe-fee-callable>
+    <delete-owe-fee-callable ref="deleteOweFeeCallable"></delete-owe-fee-callable>
+  </div>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { listOweFeeCallable } from '@/api/fee/simplifyCallableApi'
+import WriteOweFeeCallable from './writeOweFeeCallable'
+import DeleteOweFeeCallable from './deleteOweFeeCallable'
+
+export default {
+  name: 'SimplifyCallable',
+  components: {
+    WriteOweFeeCallable,
+    DeleteOweFeeCallable
+  },
+  data() {
+    return {
+      DEFAULT_PAGE: 1,
+      DEFAULT_ROWS: 10,
+      simplifyCallableInfo: {
+        callables: [],
+        ownerId: '',
+        roomId: '',
+        roomName: '',
+        total: 0,
+        records: 0
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  created() {
+    this._initEvent()
+  },
+  methods: {
+    _initEvent() {
+      this.$on('switch', this.handleSwitch)
+      this.$on('listOwnerData', this._listSimplifyCallable)
+    },
+    handleSwitch(param) {
+      if (!param.roomId) return
+      this.clearSimplifyCallableInfo()
+      Object.assign(this.simplifyCallableInfo, param)
+      this._listSimplifyCallable(this.DEFAULT_PAGE, this.DEFAULT_ROWS)
+    },
+    handleCurrentChange(val) {
+      this._listSimplifyCallable(val, this.DEFAULT_ROWS)
+    },
+    async _listSimplifyCallable(page, row) {
+      try {
+        const res = await listOweFeeCallable({
+          page,
+          row,
+          payerObjId: this.simplifyCallableInfo.roomId,
+          communityId: getCommunityId()
+        })
+        this.simplifyCallableInfo.total = res.total
+        this.simplifyCallableInfo.records = res.records
+        this.simplifyCallableInfo.callables = res.data
+        this.total = res.records
+      } catch (error) {
+        console.error('Request failed:', error)
+      }
+    },
+    clearSimplifyCallableInfo() {
+      this.simplifyCallableInfo = {
+        callables: [],
+        ownerId: '',
+        roomId: '',
+        roomName: '',
+        total: 0,
+        records: 0
+      }
+    },
+    _printOwnOrder() {
+      window.open(`/print.html#/pages/property/printOweFee?payObjId=${this.simplifyCallableInfo.roomId}&payObjType=3333&payObjName=${this.simplifyCallableInfo.roomName}`)
+    },
+    _openWritePrintOweFeeCallableModal() {
+      if (!this.simplifyCallableInfo.roomId) {
+        this.$message.warning(this.$t('simplifyCallable.noRoomSelected'))
+        return
+      }
+      this.$refs.writeOweFeeCallable.open({
+        roomId: this.simplifyCallableInfo.roomId,
+        roomName: this.simplifyCallableInfo.roomName
+      })
+    },
+    _openAddOweFeeCallableModal() {
+      this.$router.push(`/fee/roomOweFeeCallable?roomId=${this.simplifyCallableInfo.roomId}`)
+    },
+    _openDeleteOweFeeCallableModel(oweFeeCallable) {
+      this.$refs.deleteOweFeeCallable.open(oweFeeCallable)
+    },
+    open(params) {
+      this.handleSwitch(params)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 15px;
+}
+.text-right {
+  text-align: right;
+}
+.textAuto {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
 \ No newline at end of file
+<template>
+  <simplify-callable ref="simplifyCallable"></simplify-callable>
+</template>
+
+<script>
+import SimplifyCallable from './simplifyCallable'
+
+export default {
+  name: 'SimplifyCallableDemo',
+  components: {
+    SimplifyCallable
+  },
+  mounted() {
+    this.$refs.simplifyCallable.$emit('switch', {
+      roomId: '123',
+      roomName: 'Test Room',
+      ownerId: '456'
+    })
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div>
+    <el-row class="margin-top-lg">
+      <el-col :span="4" class="padding-right-xs padding-left-xl">
+        <el-select v-model="simplifyFeeReceiptInfo.objType" size="small" @change="_changeSimplifyFeeReceiptFeeTypeCd"
+          :placeholder="$t('simplifyFeeReceipt.selectFeeType')">
+          <el-option v-for="(item, index) in simplifyFeeReceiptInfo.objTypes" :key="index" :label="item.name"
+            :value="item.statusCd"></el-option>
+        </el-select>
+      </el-col>
+      <el-col :span="4" class="padding-right-xs padding-left-xl" v-if="simplifyFeeReceiptInfo.objType == '6666'">
+        <el-select v-model="simplifyFeeReceiptInfo.carId" size="small" @change="changeSimplifyFeeReceiptCar"
+          :placeholder="$t('simplifyFeeReceipt.selectCar')">
+          <el-option v-for="(item, index) in simplifyFeeReceiptInfo.ownerCars" :key="index" :label="item.carNum"
+            :value="item.carId"></el-option>
+        </el-select>
+      </el-col>
+      <el-col :span="4" class="padding-right-xs padding-left-xl" v-else-if="simplifyFeeReceiptInfo.objType == '7777'">
+        <el-select v-model="simplifyFeeReceiptInfo.contractId" size="small" @change="changeSimplifyFeeReceiptCar"
+          :placeholder="$t('simplifyFeeReceipt.selectContract')">
+          <el-option v-for="(item, index) in simplifyFeeReceiptInfo.ownerContracts" :key="index"
+            :label="item.contractCode" :value="item.contractId"></el-option>
+        </el-select>
+      </el-col>
+      <el-col :span="4" class="padding-right-xs padding-left-xl" v-if="simplifyFeeReceiptInfo.objType != '7777'">
+        <el-select v-model="simplifyFeeReceiptInfo.ownerFlag" size="small" @change="_queryFeeReceiptMethod">
+          <el-option
+            :label="$t('simplifyFeeReceipt.current') + (simplifyFeeReceiptInfo.objType == '6666' ? $t('simplifyFeeReceipt.car') : $t('simplifyFeeReceipt.room'))"
+            value="F"></el-option>
+          <el-option
+            :label="$t('simplifyFeeReceipt.all') + (simplifyFeeReceiptInfo.objType == '6666' ? $t('simplifyFeeReceipt.car') : $t('simplifyFeeReceipt.room'))"
+            value="T"></el-option>
+        </el-select>
+      </el-col>
+      <el-col :span="4" class="padding-right-xs padding-left-xl">
+        <el-input v-model="simplifyFeeReceiptInfo.receiptCode" size="small"
+          :placeholder="$t('simplifyFeeReceipt.receiptCode')"></el-input>
+      </el-col>
+      <el-col :span="4" class="padding-right-xs padding-left-xl">
+        <el-button type="primary" size="small" @click="_queryFeeReceiptMethod">
+          {{ $t('simplifyFeeReceipt.query') }}
+        </el-button>
+      </el-col>
+      <el-col :span="8" class="text-right padding-right-lg">
+        <el-button type="primary" size="small" @click="_printFeeReceipt('OFF')">
+          {{ $t('simplifyFeeReceipt.print') }}
+        </el-button>
+        <el-button type="primary" size="small" @click="_printFeeReceipt('ON')">
+          {{ $t('simplifyFeeReceipt.mergePrint') }}
+        </el-button>
+        <el-button type="primary" size="small" @click="_printFeeSmallReceipt">
+          {{ $t('simplifyFeeReceipt.printSmall') }}
+        </el-button>
+        <el-button type="primary" size="small" @click="_printApplyFeeReceipt">
+          {{ $t('simplifyFeeReceipt.apply') }}
+        </el-button>
+      </el-col>
+    </el-row>
+    <div class="margin-top">
+      <el-table :data="simplifyFeeReceiptInfo.feeReceipts" border stripe>
+        <el-table-column type="selection" width="55" align="center"></el-table-column>
+        <el-table-column prop="receiptCode" :label="$t('simplifyFeeReceipt.receiptCode')"
+          align="center"></el-table-column>
+        <el-table-column :label="$t('simplifyFeeReceipt.feeType')" align="center">
+          <template slot-scope="scope">
+            {{ _getFeeObjName(scope.row.objType) }}{{ $t('simplifyFeeReceipt.fee') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="objName" :label="_getFeeObjName(simplifyFeeReceiptInfo.objType)"
+          align="center"></el-table-column>
+        <el-table-column prop="payObjName" :label="$t('simplifyFeeReceipt.owner')" align="center"></el-table-column>
+        <el-table-column prop="feeName" :label="$t('simplifyFeeReceipt.feeItem')" align="center"></el-table-column>
+        <el-table-column :label="$t('simplifyFeeReceipt.timePeriod')" align="center">
+          <template slot-scope="scope">
+            {{ dateFormat(scope.row.startTime) }}~<br>
+            <span v-if="scope.row.startTime >= scope.row.endTime">
+              {{ dateFormat(scope.row.endTime) }}
+            </span>
+            <span v-else>
+              {{ dateFormat(scope.row.endTime) }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="amount" :label="$t('simplifyFeeReceipt.totalAmount')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.amount }}{{ $t('simplifyFeeReceipt.yuan') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" :label="$t('simplifyFeeReceipt.payTime')" align="center"></el-table-column>
+        <el-table-column prop="receiptId" :label="$t('simplifyFeeReceipt.receiptId')" align="center"></el-table-column>
+      </el-table>
+      <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
+        layout="total, prev, pager, next" :total="total">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCommunityId, getDict } from '@/api/community/communityApi'
+import { queryFeeReceipt, listFeePrintPage } from '@/api/fee/simplifyFeeReceiptApi'
+import { queryOwnerCars } from '@/api/room/ownerCarsApi'
+import { queryContract } from '@/api/contract/contractChangeDetailApi'
+import { dateFormat } from '@/utils/dateUtil'
+
+export default {
+  name: 'SimplifyFeeReceipt',
+  data() {
+    return {
+      DEFAULT_PAGE: 1,
+      DEFAULT_ROWS: 50,
+      simplifyFeeReceiptInfo: {
+        feeReceipts: [],
+        objType: '3333',
+        objId: '',
+        payObjId: '',
+        roomId: '',
+        carId: '',
+        receiptCode: '',
+        total: '',
+        records: '',
+        ownerId: '',
+        objTypes: [],
+        ownerCars: [],
+        ownerContracts: [],
+        selectReceipts: [],
+        ownerFlag: 'F',
+        contractId: '',
+        quan: false,
+        printUrl: '/print.html#/pages/property/printPayFee'
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  watch: {
+    'simplifyFeeReceiptInfo.selectReceipts': {
+      handler(newVal) {
+        this.simplifyFeeReceiptInfo.quan = newVal.length === this.simplifyFeeReceiptInfo.feeReceipts.length
+      },
+      deep: true
+    }
+  },
+  created() {
+    this._loadDictData()
+  },
+  methods: {
+    handleSwitch(param) {
+      if (param.roomId === '') return
+      this.clearSimplifyFeeReceiptInfo()
+      this._listFeePrintPages()
+      Object.assign(this.simplifyFeeReceiptInfo, param)
+      this.simplifyFeeReceiptInfo.objId = param.roomId
+      this.simplifyFeeReceiptInfo.payObjId = param.ownerId
+      this._listSimplifyFeeReceipt(this.DEFAULT_PAGE, this.DEFAULT_ROWS)
+    },
+    handleCurrentChange(val) {
+      this._listSimplifyFeeReceipt(val, this.DEFAULT_ROWS)
+    },
+    async _loadDictData() {
+      try {
+        const data = await getDict('fee_receipt', 'obj_type')
+        this.simplifyFeeReceiptInfo.objTypes = data
+      } catch (error) {
+        console.error('Failed to load dict data:', error)
+      }
+    },
+    async _listSimplifyFeeReceipt(page, rows) {
+      this.simplifyFeeReceiptInfo.selectReceipts = []
+      this.simplifyFeeReceiptInfo.quan = false
+      let objId = ''
+      if (this.simplifyFeeReceiptInfo.objType === '3333') {
+        objId = this.simplifyFeeReceiptInfo.roomId
+      } else if (this.simplifyFeeReceiptInfo.objType === '6666') {
+        objId = this.simplifyFeeReceiptInfo.carId
+      } else {
+        objId = this.simplifyFeeReceiptInfo.contractId
+      }
+
+      const params = {
+        page,
+        row: rows,
+        objType: this.simplifyFeeReceiptInfo.objType,
+        objId,
+        receiptCode: this.simplifyFeeReceiptInfo.receiptCode,
+        communityId: getCommunityId()
+      }
+
+      if (this.simplifyFeeReceiptInfo.ownerFlag === 'T') {
+        params.objId = ''
+        params.payObjId = this.simplifyFeeReceiptInfo.payObjId
+      }
+
+      try {
+        const res = await queryFeeReceipt(params)
+        this.simplifyFeeReceiptInfo.total = res.total
+        this.simplifyFeeReceiptInfo.records = res.records
+        this.simplifyFeeReceiptInfo.feeReceipts = res.data
+        this.total = res.records
+      } catch (error) {
+        console.error('Request failed:', error)
+      }
+    },
+    _queryFeeReceiptMethod() {
+      this._listSimplifyFeeReceipt(this.DEFAULT_PAGE, this.DEFAULT_ROWS)
+    },
+    _printFeeReceipt(merge) {
+      if (this.simplifyFeeReceiptInfo.selectReceipts.length < 1) {
+        this.$message.warning(this.$t('simplifyFeeReceipt.selectReceipt'))
+        return
+      }
+      const receiptids = this.simplifyFeeReceiptInfo.selectReceipts.join(',')
+      window.open(`${this.simplifyFeeReceiptInfo.printUrl}?receiptIds=${receiptids}&apply=N&merge=${merge}`)
+    },
+    _printApplyFeeReceipt() {
+      if (this.simplifyFeeReceiptInfo.selectReceipts.length < 1) {
+        this.$message.warning(this.$t('simplifyFeeReceipt.selectReceipt'))
+        return
+      }
+      const receiptids = this.simplifyFeeReceiptInfo.selectReceipts.join(',')
+      window.open(`/print.html#/pages/property/printPayFee?receiptIds=${receiptids}&apply=Y`)
+    },
+    _printFeeSmallReceipt() {
+      if (this.simplifyFeeReceiptInfo.selectReceipts.length < 1) {
+        this.$message.warning(this.$t('simplifyFeeReceipt.selectReceipt'))
+        return
+      }
+      const receiptids = this.simplifyFeeReceiptInfo.selectReceipts.join(',')
+      window.open(`/smallPrint.html#/pages/property/printSmallPayFee?receiptIds=${receiptids}`)
+    },
+    clearSimplifyFeeReceiptInfo() {
+      this.simplifyFeeReceiptInfo = {
+        feeReceipts: [],
+        objType: '3333',
+        objId: '',
+        roomId: '',
+        carId: '',
+        receiptCode: '',
+        total: '',
+        records: '',
+        ownerId: '',
+        objTypes: [],
+        ownerCars: [],
+        ownerContracts: [],
+        selectReceipts: [],
+        ownerFlag: 'F',
+        contractId: '',
+        quan: false,
+        printUrl: '/print.html#/pages/property/printPayFee'
+      }
+    },
+    async _changeSimplifyFeeReceiptFeeTypeCd(objType) {
+      if (objType === '3333') {
+        this.$emit('notify', {})
+      } else if (objType === '6666') {
+        try {
+          await this._listSimplifyFeeReceiptOwnerCar()
+          this.$emit('notify', {})
+        } catch (error) {
+          console.error(error)
+        }
+      } else {
+        try {
+          await this._listSimplifyFeeReceiptOwnerContract()
+          this.$emit('notify', {})
+        } catch (error) {
+          console.error(error)
+        }
+      }
+    },
+    changeSimplifyFeeReceiptCar() {
+      this._changeSimplifyFeeReceiptFeeTypeCd(this.simplifyFeeReceiptInfo.objType)
+    },
+    async _listSimplifyFeeReceiptOwnerCar() {
+      try {
+        const res = await queryOwnerCars({
+          page: 1,
+          row: 50,
+          ownerId: this.simplifyFeeReceiptInfo.ownerId,
+          carTypeCd: '1001',
+          communityId: getCommunityId()
+        })
+        this.simplifyFeeReceiptInfo.ownerCars = res.data
+        if (res.data.length > 0) {
+          this.simplifyFeeReceiptInfo.carId = res.data[0].carId
+          return res.data
+        }
+        throw new Error(this.$t('simplifyFeeReceipt.noCar'))
+      } catch (error) {
+        console.error('Request failed:', error)
+        throw error
+      }
+    },
+    async _listSimplifyFeeReceiptOwnerContract() {
+      try {
+        const res = await queryContract({
+          page: 1,
+          row: 50,
+          objId: this.simplifyFeeReceiptInfo.ownerId,
+          communityId: getCommunityId()
+        })
+        this.simplifyFeeReceiptInfo.ownerContracts = res.data
+        if (res.data.length > 0) {
+          this.simplifyFeeReceiptInfo.contractId = res.data[0].contractId
+          return res.data
+        }
+        throw new Error(this.$t('simplifyFeeReceipt.noContract'))
+      } catch (error) {
+        console.error('Request failed:', error)
+        throw error
+      }
+    },
+    checkAllReceipt(e) {
+      const checkObj = document.querySelectorAll('.checReceiptItem')
+      if (e.target.checked) {
+        checkObj.forEach(item => {
+          if (!item.checked) {
+            this.simplifyFeeReceiptInfo.selectReceipts.push(item.value)
+          }
+        })
+      } else {
+        this.simplifyFeeReceiptInfo.selectReceipts = []
+      }
+    },
+    _getFeeObjName(feeTypeCd) {
+      if (feeTypeCd === '3333') {
+        return this.$t('simplifyFeeReceipt.room')
+      } else if (feeTypeCd === '6666') {
+        return this.$t('simplifyFeeReceipt.car')
+      } else {
+        return this.$t('simplifyFeeReceipt.contract')
+      }
+    },
+    async _listFeePrintPages() {
+      try {
+        const res = await listFeePrintPage({
+          page: 1,
+          row: 1,
+          state: 'T',
+          communityId: getCommunityId()
+        })
+        const feePrintPages = res.data
+        if (feePrintPages && feePrintPages.length > 0) {
+          this.simplifyFeeReceiptInfo.printUrl = feePrintPages[0].url
+        }
+      } catch (error) {
+        console.error('Request failed:', error)
+      }
+    },
+    open(params) {
+      this.handleSwitch(params)
+    },
+    dateFormat(date) {
+      return dateFormat(date)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top-lg {
+  margin-top: 20px;
+}
+
+.padding-right-xs {
+  padding-right: 5px;
+}
+
+.padding-left-xl {
+  padding-left: 20px;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.padding-right-lg {
+  padding-right: 20px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <simplify-fee-receipt ref="simplifyFeeReceipt"></simplify-fee-receipt>
+</template>
+
+<script>
+import SimplifyFeeReceipt from './simplifyFeeReceipt'
+
+export default {
+  name: 'SimplifyFeeReceiptDemo',
+  components: {
+    SimplifyFeeReceipt
+  },
+  mounted() {
+    this.$refs.simplifyFeeReceipt.$emit('switch', {
+      roomId: '123',
+      ownerId: '456'
+    })
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div>
+    <el-row class="margin-top">
+      <el-col :span="24">
+        <el-table
+          :data="simplifyHisFeeInfo.feeDetails"
+          style="width: 100%; margin-top: 10px"
+          border
+          stripe
+        >
+          <el-table-column prop="feeName" :label="$t('simplifyHisFee.feeItem')" align="center"></el-table-column>
+          <el-table-column prop="payerObjName" :label="$t('simplifyHisFee.payerObject')" align="center"></el-table-column>
+          <el-table-column :label="$t('simplifyHisFee.receiptNumber')" align="center">
+            <template slot-scope="scope">
+              <div v-if="scope.row.receiptCode">{{ scope.row.receiptCode }}</div>
+              <div v-else>
+                <el-link
+                  v-if="scope.row.state === '1400'"
+                  type="primary"
+                  @click="_openGeneratorReceiptCode(scope.row)"
+                >
+                  {{ $t('simplifyHisFee.manualGenerate') }}
+                </el-link>
+                <span v-else>-</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="cycles" :label="$t('simplifyHisFee.cycle')" align="center"></el-table-column>
+          <el-table-column :label="$t('simplifyHisFee.receivableReceived')" align="center">
+            <template slot-scope="scope">
+              <div v-if="scope.row.state === '1500'">
+                {{ scope.row.payerObjName }}{{ $t('simplifyHisFee.viewInFee') }}
+              </div>
+              <div v-else>
+                {{ scope.row.receivableAmount }}/{{ scope.row.receivedAmount }}<br>
+                <div v-if="scope.row.acctAmount > 0">
+                  {{ $t('simplifyHisFee.accountDeduction') }}: {{ scope.row.acctAmount }}<br>
+                </div>
+                <div
+                  v-for="(item, index) in scope.row.payFeeDetailDiscountDtoList"
+                  :key="index"
+                >
+                  {{ item.discountName }}: {{ Math.abs(item.discountPrice) }}<br>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="primeRateName" :label="$t('simplifyHisFee.paymentMethod')" align="center"></el-table-column>
+          <el-table-column :label="$t('simplifyHisFee.paymentPeriod')" align="center">
+            <template slot-scope="scope">
+              {{ formatDate(scope.row.startTime) }}~<br>
+              {{ formatDate(scope.row.endTime) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="createTime" :label="$t('simplifyHisFee.paymentTime')" align="center"></el-table-column>
+          <el-table-column prop="cashierName" :label="$t('simplifyHisFee.cashier')" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.cashierName || '-' }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="stateName" :label="$t('simplifyHisFee.status')" align="center"></el-table-column>
+          <el-table-column prop="remark" :label="$t('simplifyHisFee.remark')" align="center"></el-table-column>
+          <el-table-column :label="$t('simplifyHisFee.operation')" align="center">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="primary"
+                plain
+                @click="_toHisFeeDetail(scope.row)"
+              >
+                {{ $t('simplifyHisFee.detail') }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-size="pageSize"
+          layout="total, prev, pager, next"
+          :total="simplifyHisFeeInfo.total"
+          class="pagination-container"
+        ></el-pagination>
+      </el-col>
+    </el-row>
+
+    <el-dialog
+      :title="$t('simplifyHisFee.generateReceipt')"
+      :visible.sync="receiptDialogVisible"
+      width="50%"
+    >
+      <el-form label-position="left" label-width="120px">
+        <el-form-item :label="$t('simplifyHisFee.receiptNumber')">
+          <el-select
+            v-model="simplifyHisFeeInfo.receiptType"
+            class="w-100"
+            :placeholder="$t('simplifyHisFee.receiptNumberRequired')"
+          >
+            <el-option disabled value="">{{ $t('simplifyHisFee.receiptNumberRequired') }}</el-option>
+            <el-option value="Y" :label="$t('simplifyHisFee.systemGenerate')"></el-option>
+            <el-option value="N" :label="$t('simplifyHisFee.custom')"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="simplifyHisFeeInfo.receiptType === 'N'"
+          :label="$t('simplifyHisFee.receiptNumber')"
+        >
+          <el-input
+            v-model="simplifyHisFeeInfo.receiptCode"
+            :placeholder="$t('simplifyHisFee.receiptNumberRequired')"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="receiptDialogVisible = false">{{ $t('simplifyHisFee.cancel') }}</el-button>
+        <el-button type="primary" @click="_generatorReceiptCode">{{ $t('simplifyHisFee.generate') }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { queryFeeDetail, generatorReceipt } from '@/api/fee/simplifyHisFeeApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import { dateFormat } from '@/utils/dateUtil'
+
+export default {
+  name: 'SimplifyHisFee',
+  data() {
+    return {
+      DEFAULT_PAGE: 1,
+      DEFAULT_ROWS: 10,
+      currentPage: 1,
+      pageSize: 10,
+      receiptDialogVisible: false,
+      simplifyHisFeeInfo: {
+        total: 0,
+        records: 1,
+        feeDetails: [],
+        ownerId: '',
+        feeDetail: {},
+        receiptType: 'Y',
+        receiptCode: ''
+      }
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    open(param) {
+      this.handleSwitch(param)
+    },
+    handleSwitch(param) {
+      this.clearSimplifyHisFeeInfo()
+      if (!param.ownerId) {
+        return
+      }
+      Object.assign(this.simplifyHisFeeInfo, param)
+      this._listSimplifyFeeDetails(this.DEFAULT_PAGE, this.DEFAULT_ROWS)
+    },
+    handleNotify() {
+      this._listSimplifyFeeDetails(this.DEFAULT_PAGE, this.DEFAULT_ROWS)
+    },
+    handleCurrentChange(page) {
+      this._listSimplifyFeeDetails(page, this.DEFAULT_ROWS)
+    },
+    formatDate(date) {
+      if (!date) return ''
+      return dateFormat(date)
+    },
+    _listSimplifyFeeDetails(page, row) {
+      const params = {
+        page,
+        row,
+        communityId: this.communityId,
+        ownerId: this.simplifyHisFeeInfo.ownerId
+      }
+
+      queryFeeDetail(params)
+        .then(response => {
+          const res = response.data
+          this.simplifyHisFeeInfo.total = res.total
+          this.simplifyHisFeeInfo.records = res.records
+          this.simplifyHisFeeInfo.feeDetails = res.feeDetails
+          this.currentPage = page
+        })
+        .catch(error => {
+          console.error('请求失败处理', error)
+        })
+    },
+    clearSimplifyHisFeeInfo() {
+      this.simplifyHisFeeInfo = {
+        total: 0,
+        records: 1,
+        feeDetails: [],
+        ownerId: '',
+        feeDetail: {},
+        receiptType: 'Y',
+        receiptCode: ''
+      }
+    },
+    _toHisFeeDetail(detail) {
+      this.$router.push(`/views/fee/propertyFee?feeId=${detail.feeId}`)
+    },
+    _openGeneratorReceiptCode(detail) {
+      this.simplifyHisFeeInfo.feeDetail = detail
+      this.receiptDialogVisible = true
+    },
+    _generatorReceiptCode() {
+      const data = {
+        detailId: this.simplifyHisFeeInfo.feeDetail.detailId,
+        communityId: this.communityId,
+        receiptCode: this.simplifyHisFeeInfo.receiptCode
+      }
+
+      generatorReceipt(data)
+        .then(response => {
+          const res = response.data
+          this.$message.success(res.msg)
+          if (res.code !== '0') {
+            return
+          }
+          this.receiptDialogVisible = false
+          setTimeout(() => {
+            this.$emit('doSearch')
+          }, 1000)
+        })
+        .catch(error => {
+          console.error('请求失败处理', error)
+          this.$message.error(error.message || '操作失败')
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+.w-100 {
+  width: 100%;
+}
+.pagination-container {
+  margin-top: 20px;
+  text-align: right;
+}
+</style>
 \ No newline at end of file
+<template>
+  <div>
+    <simplify-his-fee ref="simplifyHisFee"></simplify-his-fee>
+  </div>
+</template>
+
+<script>
+import SimplifyHisFee from './simplifyHisFee'
+
+export default {
+  name: 'SimplifyHisFeeDemo',
+  components: {
+    SimplifyHisFee
+  },
+  mounted() {
+    this.$refs.simplifyHisFee.$emit('switch', {
+      ownerId: '123'
+    })
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div>
+    <el-row class="margin-top-lg">
+      <el-col :span="4" class="padding-right-xs padding-left-xl">
+        <el-select v-model="simplifyMeterWaterFeeInfo.meterType" size="small" @change="_listSimplifyMeterWaterFee(1, 10)">
+          <el-option :label="$t('simplifyMeterWaterLog.selectMeterType')" value=""></el-option>
+          <el-option v-for="(item, index) in simplifyMeterWaterFeeInfo.meterTypes" :key="index" :label="item.typeName"
+            :value="item.typeId"></el-option>
+        </el-select>
+      </el-col>
+      <el-col :span="20" class="text-right" v-if="simplifyMeterWaterFeeInfo.roomId">
+        <el-button type="primary" size="small" style="margin-left:10px" @click="_openAddMeterWaterModal()">
+          <i class="el-icon-plus"></i> {{ $t('simplifyMeterWaterLog.addMeterReading') }}
+        </el-button>
+      </el-col>
+    </el-row>
+
+    <div class="margin-top">
+      <el-table :data="simplifyMeterWaterFeeInfo.meterWaters" style="width: 100%; margin-top:10px" border>
+        <el-table-column prop="meterTypeName" :label="$t('simplifyMeterWaterLog.meterType')"
+          align="center"></el-table-column>
+        <el-table-column prop="objName" :label="$t('simplifyMeterWaterLog.objectName')" align="center"></el-table-column>
+        <el-table-column prop="preDegrees" :label="$t('simplifyMeterWaterLog.previousReading')"
+          align="center"></el-table-column>
+        <el-table-column prop="curDegrees" :label="$t('simplifyMeterWaterLog.currentReading')"
+          align="center"></el-table-column>
+        <el-table-column prop="preReadingTime" :label="$t('simplifyMeterWaterLog.previousReadingTime')"
+          align="center"></el-table-column>
+        <el-table-column prop="curReadingTime" :label="$t('simplifyMeterWaterLog.currentReadingTime')"
+          align="center"></el-table-column>
+        <el-table-column prop="createTime" :label="$t('simplifyMeterWaterLog.createTime')"
+          align="center"></el-table-column>
+      </el-table>
+
+      <el-row>
+        <el-col :span="12"></el-col>
+        <el-col :span="12" class="text-right">
+          <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
+            layout="total, prev, pager, next" :total="simplifyMeterWaterFeeInfo.total"></el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listMeterWaters, listMeterTypes } from '@/api/fee/simplifyMeterWaterLogApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'SimplifyMeterWaterLog',
+  data() {
+    return {
+      simplifyMeterWaterFeeInfo: {
+        meterTypes: [],
+        meterWaters: [],
+        total: 0,
+        records: 1,
+        roomId: '',
+        roomName: '',
+        ownerName: '',
+        floorNum: '',
+        unitNum: '',
+        roomNum: '',
+        meterType: ""
+      },
+      currentPage: 1,
+      pageSize: 10
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._listSimplifyMeterWaterFee(val, this.pageSize)
+    },
+    _listSimplifyMeterWaterFee(page, row) {
+      const param = {
+        page,
+        row,
+        communityId: this.communityId,
+        roomNum: `${this.simplifyMeterWaterFeeInfo.floorNum}-${this.simplifyMeterWaterFeeInfo.unitNum}-${this.simplifyMeterWaterFeeInfo.roomNum}`,
+        meterType: this.simplifyMeterWaterFeeInfo.meterType
+      }
+
+      listMeterWaters(param).then(response => {
+        const data = response.data
+        this.simplifyMeterWaterFeeInfo.total = data.total
+        this.simplifyMeterWaterFeeInfo.records = data.records
+        this.simplifyMeterWaterFeeInfo.meterWaters = data.data
+      }).catch(error => {
+        console.error('请求失败:', error)
+      })
+    },
+    _openAddMeterWaterModal() {
+      this.$emit('openAddModal', {
+        roomId: this.simplifyMeterWaterFeeInfo.roomId,
+        roomName: this.simplifyMeterWaterFeeInfo.roomName,
+        ownerName: this.simplifyMeterWaterFeeInfo.ownerName
+      })
+    },
+    clearSimplifyMeterWaterFeeInfo() {
+      this.simplifyMeterWaterFeeInfo = {
+        meterTypes: [],
+        meterWaters: [],
+        total: 0,
+        records: 1,
+        roomId: '',
+        ownerName: '',
+        roomName: '',
+        floorNum: '',
+        unitNum: '',
+        roomNum: '',
+        meterType: ""
+      }
+    },
+    _listMeterTypes() {
+      const param = {
+        page: 1,
+        row: 100,
+        communityId: this.communityId
+      }
+
+      listMeterTypes(param).then(response => {
+        const data = response.data
+        this.simplifyMeterWaterFeeInfo.meterTypes = data.data
+      }).catch(error => {
+        console.error('请求失败:', error)
+      })
+    },
+    switchData(param) {
+      if (param.roomId === '') return
+      this.clearSimplifyMeterWaterFeeInfo()
+      Object.assign(this.simplifyMeterWaterFeeInfo, param)
+      this._listMeterTypes()
+      this._listSimplifyMeterWaterFee(1, 10)
+    },
+    open(params) {
+      this.switchData(params)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top-lg {
+  margin-top: 20px;
+}
+
+.margin-top {
+  margin-top: 15px;
+}
+
+.padding-right-xs {
+  padding-right: 5px;
+}
+
+.padding-left-xl {
+  padding-left: 20px;
+}
+
+.text-right {
+  text-align: right;
+}
+</style>
 \ No newline at end of file
+<template>
+  <simplify-meter-water-log ref="simplifyMeterWaterLog"></simplify-meter-water-log>
+</template>
+
+<script>
+import SimplifyMeterWaterLog from './simplifyMeterWaterLog'
+
+export default {
+  name: 'SimplifyMeterWaterLogDemo',
+  components: {
+    SimplifyMeterWaterLog
+  },
+  mounted() {
+    this.$refs.simplifyMeterWaterLog.switchData({
+      roomId: '123',
+      roomName: 'Test Room',
+      ownerName: 'Test Owner',
+      floorNum: '1',
+      unitNum: '2',
+      roomNum: '101'
+    })
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div>
+    <el-row class="margin-top">
+      <el-col :span="22" class="text-right"></el-col>
+      <el-col :span="2" class="text-right">
+        <el-button
+          type="primary"
+          size="small"
+          style="margin-left:10px"
+          v-if="hasPrivilege('502020082314267912') && simplifyOwnerRoomsInfo.ownerId"
+          @click="_openSimplifyOwnerRoomsBatchPayFeeModal()"
+        >
+          <i class="el-icon-plus"></i>
+          <span>{{ $t('simplifyOwnerRooms.batchPay') }}</span>
+        </el-button>
+      </el-col>
+    </el-row>
+    <div>
+      <el-table
+        :data="simplifyOwnerRoomsInfo.rooms"
+        style="margin-top:10px"
+        border
+        stripe
+      >
+        <el-table-column :label="$t('simplifyOwnerRooms.roomCode')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.floorNum}}-{{scope.row.unitNum}}-{{scope.row.roomNum}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="layer" :label="$t('simplifyOwnerRooms.floor')" align="center"></el-table-column>
+        <el-table-column prop="roomSubTypeName" :label="$t('simplifyOwnerRooms.type')" align="center"></el-table-column>
+        <el-table-column :label="$t('simplifyOwnerRooms.area')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.builtUpArea}}/{{scope.row.roomArea}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="roomRent" :label="$t('simplifyOwnerRooms.rent')" align="center"></el-table-column>
+        <el-table-column :label="$t('simplifyOwnerRooms.validity')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.startTime}}<br>~{{scope.row.endTime}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="stateName" :label="$t('simplifyOwnerRooms.roomStatus')" align="center"></el-table-column>
+        <el-table-column :label="$t('simplifyOwnerRooms.roomOweFee')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.roomOweFee || '0.00'}}({{$t('simplifyOwnerRooms.updateDaily')}})
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('simplifyOwnerRooms.actions')" align="center">
+          <template slot-scope="scope">
+            <el-button-group v-if="simplifyOwnerRoomsInfo.roomId != scope.row.roomId">
+              <el-button size="mini" @click="_toChooseOwnerRoomModel(scope.row)">
+                {{ $t('simplifyOwnerRooms.choose') }}
+              </el-button>
+            </el-button-group>
+            <div v-else>
+              {{ $t('simplifyOwnerRooms.currentRoom') }}
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-row>
+        <el-col :span="16"></el-col>
+        <el-col :span="8" class="float-right">
+          <span>{{ $t('simplifyOwnerRooms.subtotalOweFee') }}：{{simplifyOwnerRoomsInfo.allOweFeeAmount}}</span>
+        </el-col>
+      </el-row>
+      <el-pagination
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-size="pageSize"
+        layout="total, prev, pager, next"
+        :total="total">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { queryRoomsByOwner } from '@/api/fee/simplifyOwnerRoomsApi'
+
+export default {
+  name: 'SimplifyOwnerRooms',
+  data() {
+    return {
+      DEFAULT_PAGE: 1,
+      DEFAULT_ROWS: 10,
+      simplifyOwnerRoomsInfo: {
+        rooms: [],
+        ownerId: '',
+        roomId: '',
+        total: 0,
+        records: 1,
+        allOweFeeAmount: 0
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  created() {
+    this._initEvent()
+  },
+  methods: {
+    _initEvent() {
+    },
+    handleSwitch(param) {
+      if (!param.ownerId) return
+      this.clearSimplifyOwnerRoomsInfo()
+      Object.assign(this.simplifyOwnerRoomsInfo, param)
+      this._listSimplifyOwnerRooms(this.DEFAULT_PAGE, this.DEFAULT_ROWS)
+    },
+    handleCurrentChange(val) {
+      this._listSimplifyOwnerRooms(val, this.DEFAULT_ROWS)
+    },
+    async _listSimplifyOwnerRooms() {
+      try {
+        const res = await queryRoomsByOwner({
+          ownerId: this.simplifyOwnerRoomsInfo.ownerId,
+          communityId: getCommunityId()
+        })
+        this.simplifyOwnerRoomsInfo.rooms = res.rooms
+        this._computeOwnerRoomOweFeeAmount()
+        this.simplifyOwnerRoomsInfo.total = res.total
+        this.simplifyOwnerRoomsInfo.records = res.records
+        this.total = res.records
+      } catch (error) {
+        console.error('Request failed:', error)
+      }
+    },
+    _toChooseOwnerRoomModel(room) {
+      this.$emit('notifyRoom', room)
+    },
+    _computeOwnerRoomOweFeeAmount() {
+      let total = 0
+      this.simplifyOwnerRoomsInfo.allOweFeeAmount = 0
+      if (!this.simplifyOwnerRoomsInfo.rooms || this.simplifyOwnerRoomsInfo.rooms.length < 1) return
+      
+      this.simplifyOwnerRoomsInfo.rooms.forEach(room => {
+        if (room.roomOweFee) {
+          total += parseFloat(room.roomOweFee)
+        }
+      })
+      this.simplifyOwnerRoomsInfo.allOweFeeAmount = total.toFixed(2)
+    },
+    clearSimplifyOwnerRoomsInfo() {
+      this.simplifyOwnerRoomsInfo = {
+        rooms: [],
+        ownerId: '',
+        roomId: '',
+        total: 0,
+        records: 1,
+        allOweFeeAmount: 0
+      }
+    },
+    _openSimplifyOwnerRoomsBatchPayFeeModal() {
+      this.$router.push(`/property/batchPayFeeOrder?ownerId=${this.simplifyOwnerRoomsInfo.ownerId}&payerObjType=3333`)
+    },
+    hasPrivilege(code) {
+      void code; // 占位，消除未使用警告
+      return true;
+    },
+    open(params) {
+      this.handleSwitch(params)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 15px;
+}
+.float-right {
+  float: right;
+}
+.text-right {
+  text-align: right;
+}
+</style>
 \ No newline at end of file
+<template>
+  <simplify-owner-rooms ref="simplifyOwnerRooms"></simplify-owner-rooms>
+</template>
+
+<script>
+import SimplifyOwnerRooms from './simplifyOwnerRooms'
+
+export default {
+  name: 'SimplifyOwnerRoomsDemo',
+  components: {
+    SimplifyOwnerRooms
+  },
+  mounted() {
+    this.$refs.simplifyOwnerRooms.$emit('switch', {
+      ownerId: '123',
+      roomId: '456'
+    })
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div>
+    <el-row class="margin-top">
+      <el-col :span="20"></el-col>
+      <el-col :span="4" class="text-right"></el-col>
+    </el-row>
+
+    <el-table :data="simplifyRefundDepositInfo.fees" border style="width: 100%; margin-top:10px">
+      <el-table-column prop="payerObjName" :label="$t('simplifyRefundDeposit.chargeObject')"
+        align="center"></el-table-column>
+      <el-table-column prop="feeName" :label="$t('simplifyRefundDeposit.feeItem')" align="center"></el-table-column>
+      <el-table-column :label="$t('simplifyRefundDeposit.timePeriod')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.startTime }}~{{ scope.row.endTime }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="receivedAmount" :label="$t('simplifyRefundDeposit.amount')"
+        align="center"></el-table-column>
+      <el-table-column prop="createTime" :label="$t('simplifyRefundDeposit.paymentTime')"
+        align="center"></el-table-column>
+      <el-table-column prop="stateName" :label="$t('simplifyRefundDeposit.status')" align="center"></el-table-column>
+      <el-table-column :label="$t('simplifyRefundDeposit.operation')" align="center">
+        <template slot-scope="scope">
+          <el-button-group>
+            <el-button v-if="scope.row.state == '1400'" size="mini" @click="_openRefundModel(scope.row)">
+              {{ $t('simplifyRefundDeposit.refundDeposit') }}
+            </el-button>
+            <el-button size="mini" @click="_toSimplifyFeeDepositFeeDetail(scope.row)">
+              {{ $t('simplifyRefundDeposit.detail') }}
+            </el-button>
+          </el-button-group>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-row class="margin-top">
+      <el-col :span="24" class="text-right">
+        <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
+          layout="total, prev, pager, next" :total="simplifyRefundDepositInfo.total"></el-pagination>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { queryFeeDeposit } from '@/api/fee/simplifyRefundDepositApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'SimplifyRefundDeposit',
+  data() {
+    return {
+      simplifyRefundDepositInfo: {
+        fees: [],
+        ownerId: '',
+        roomId: '',
+        roomName: '',
+        total: 0,
+        records: 0
+      },
+      currentPage: 1,
+      pageSize: 10,
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._listSimplifyFeeDeposit(val, this.pageSize)
+    },
+    _listSimplifyFeeDeposit(page, rows) {
+      const params = {
+        page,
+        row: rows,
+        payerObjId: this.simplifyRefundDepositInfo.roomId,
+        ownerId: this.simplifyRefundDepositInfo.ownerId,
+        communityId: this.communityId,
+        state: '1400'
+      }
+
+      queryFeeDeposit(params).then(response => {
+        if (response.code !== 0) return
+        this.simplifyRefundDepositInfo.total = response.total
+        this.simplifyRefundDepositInfo.records = response.records
+        this.simplifyRefundDepositInfo.fees = response.data
+      }).catch(error => {
+        console.error('请求失败:', error)
+      })
+    },
+    clearSimplifyFeeDepositInfo() {
+      this.simplifyRefundDepositInfo = {
+        fees: [],
+        ownerId: '',
+        roomId: '',
+        roomName: '',
+        total: 0,
+        records: 0
+      }
+    },
+    _openRefundModel() {
+      const roomId = this.simplifyRefundDepositInfo.roomId
+      this.$router.push(`/pages/fee/refundDepositFee?roomId=${roomId}`)
+    },
+    _toSimplifyFeeDepositFeeDetail(fee) {
+      this.$router.push(`/pages/property/propertyFee?feeId=${fee.feeId}`)
+    },
+    switchData(param) {
+      if (!param.roomId) return
+      this.clearSimplifyFeeDepositInfo()
+      Object.assign(this.simplifyRefundDepositInfo, param)
+      this._listSimplifyFeeDeposit(1, 10)
+    },
+    open(params) {
+      this.switchData(params)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 15px;
+}
+
+.text-right {
+  text-align: right;
+}
+</style>
 \ No newline at end of file
+<template>
+  <simplify-refund-deposit ref="simplifyRefundDeposit"></simplify-refund-deposit>
+</template>
+
+<script>
+import SimplifyRefundDeposit from './simplifyRefundDeposit'
+
+export default {
+  name: 'SimplifyRefundDepositDemo',
+  components: {
+    SimplifyRefundDeposit
+  },
+  mounted() {
+    this.$refs.simplifyRefundDeposit.switchData({
+      roomId: '123',
+      ownerId: '456',
+      roomName: 'Test Room'
+    })
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div>
+    <el-row class="margin-top-lg">
+      <el-col :span="2" >
+        <el-select v-model="simplifyRoomFeeInfo.feeTypeCd" @change="changeSimplifyRoomFeeFeeTypeCd" size="small"
+          :placeholder="$t('simplifyRoomFee.selectFeeType')">
+          <template v-for="item in simplifyRoomFeeInfo.feeTypeCds">
+            <el-option :key="item.statusCd" :label="item.name" :value="item.statusCd"
+              v-if="item.statusCd != '888800010008'"></el-option>
+          </template>
+        </el-select>
+      </el-col>
+      <el-col :span="2" >
+        <el-select v-model="simplifyRoomFeeInfo.configId" @change="changeSimplifyRoomConfigId" size="small"
+          :placeholder="$t('simplifyRoomFee.selectFeeItem')">
+          <el-option v-for="item in simplifyRoomFeeInfo.feeConfigs" :key="item.configId" :label="item.feeName"
+            :value="item.configId"></el-option>
+        </el-select>
+      </el-col>
+      <el-col :span="2" >
+        <el-select v-model="simplifyRoomFeeInfo.state" @change="changeSimplifyRoomConfigId" size="small"
+          :placeholder="$t('simplifyRoomFee.selectStatus')">
+          <el-option :label="$t('simplifyRoomFee.valid')" value="2008001"></el-option>
+          <el-option :label="$t('simplifyRoomFee.feeEnd')" value="2009001"></el-option>
+        </el-select>
+      </el-col>
+      <el-col :span="2" >
+        <el-select v-model="simplifyRoomFeeInfo.ownerFee" @change="changeSimplifyRoomConfigId" size="small">
+          <el-option :label="$t('simplifyRoomFee.currentRoom')" value="N"></el-option>
+          <el-option :label="$t('simplifyRoomFee.currentOwner')" value="Y"></el-option>
+        </el-select>
+      </el-col>
+      <el-col :span="2" v-if="simplifyRoomFeeInfo.roomId && simplifyRoomFeeInfo.state == '2008001'">
+        <el-select v-model="simplifyRoomFeeInfo.showFlag" @change="changeSimplifyRoomShowFlag" size="small">
+          <el-option :label="$t('simplifyRoomFee.default')" value="DEFAULT"></el-option>
+          <el-option :label="$t('simplifyRoomFee.monthly')" value="MONTH"></el-option>
+        </el-select>
+      </el-col>
+      <el-col :span="2" v-else></el-col>
+      <el-col :span="13" class="text-right">
+        <el-button type="primary" size="small" v-if="hasPrivilege('502020082314267912')"
+          @click="openBatchPayRoomFeeModal">
+          <i class="el-icon-plus"></i>
+          {{ $t('simplifyRoomFee.batchPayment') }}
+        </el-button>
+        <el-button type="primary" size="small" v-if="hasPrivilege('502022073007100003')"
+          @click="openTempImportRoomFeeModal">
+          <i class="el-icon-plus"></i>
+          {{ $t('simplifyRoomFee.tempFee') }}
+        </el-button>
+        <el-button type="primary" size="small" v-if="hasPrivilege('502022073049300004')" @click="openProxyFeeModal">
+          <i class="el-icon-plus"></i>
+          {{ $t('simplifyRoomFee.quantityPayment') }}
+        </el-button>
+        <el-button type="primary" size="small" v-if="hasPrivilege('502022073042960005')"
+          @click="openAddMeterWaterSimplifyModal">
+          <i class="el-icon-plus"></i>
+          {{ $t('simplifyRoomFee.waterElectricity') }}
+        </el-button>
+        <el-button type="primary" size="small" v-if="hasPrivilege('502022073006890006')"
+          @click="openRoomCreateFeeComboModal">
+          <i class="el-icon-plus"></i>
+          {{ $t('simplifyRoomFee.feePackage') }}
+        </el-button>
+        <el-button type="primary" size="small" v-if="hasPrivilege('502022073096990007')"
+          @click="openRoomCreateFeeAddModal">
+          <i class="el-icon-plus"></i>
+          {{ $t('simplifyRoomFee.createFee') }}
+        </el-button>
+        <el-button type="primary" size="small" v-if="hasPrivilege('502020080570210194')" @click="toOwnerPayFee">
+          <i class="el-icon-plus"></i>
+          {{ $t('simplifyRoomFee.arrearsPayment') }}
+        </el-button>
+      </el-col>
+    </el-row>
+
+    <div class="margin-top" v-show="simplifyRoomFeeInfo.showFlag == 'DEFAULT'">
+      <el-table :data="simplifyRoomFeeInfo.fees" style="width: 100%" border stripe>
+        <el-table-column prop="feeName" :label="$t('simplifyRoomFee.feeItem')" align="center">
+          <template slot-scope="scope">
+            <span class="hand" @click="viewRoomFeeConfig(scope.row)">
+              {{ scope.row.feeName }}{{ getSimplifyRoomFeeRoomName(scope.row) }}
+              <i class="el-icon-info"></i>
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="feeFlagName" :label="$t('simplifyRoomFee.feeFlag')" align="center"></el-table-column>
+        <el-table-column prop="feeTypeCdName" :label="$t('simplifyRoomFee.feeType')" align="center"></el-table-column>
+        <el-table-column prop="amountOwed" :label="$t('simplifyRoomFee.receivableAmount')"
+          align="center"></el-table-column>
+        <el-table-column :label="$t('simplifyRoomFee.accountTime')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.startTime }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('simplifyRoomFee.receivablePeriod')" align="center">
+          <template slot-scope="scope">
+            {{ getEndTime(scope.row) }}~<br />{{ getDeadlineTime(scope.row) }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('simplifyRoomFee.description')" align="center" width="150">
+          <template slot-scope="scope">
+            <div v-if="scope.row.computingFormula == '5005' || scope.row.computingFormula == '9009'">
+              <span>{{ $t('simplifyRoomFee.preDegrees') }}</span>{{ scope.row.preDegrees }}
+            </div>
+            <div v-if="scope.row.computingFormula == '5005' || scope.row.computingFormula == '9009'">
+              <span>{{ $t('simplifyRoomFee.curDegrees') }}</span>{{ scope.row.curDegrees }}
+            </div>
+            <div v-if="scope.row.computingFormula == '5005' || scope.row.computingFormula == '9009'">
+              <span>{{ $t('simplifyRoomFee.unitPrice') }}</span>{{ getOnePrice1(scope.row) }}
+            </div>
+            <div v-if="scope.row.computingFormula == '5005' || scope.row.computingFormula == '9009'">
+              <span>{{ $t('simplifyRoomFee.additionalFee') }}</span>{{ scope.row.additionalAmount }}
+            </div>
+            <div v-else-if="scope.row.computingFormula == '6006'">
+              <span>{{ $t('simplifyRoomFee.usage') }}</span>{{ getAttrValue(scope.row.feeAttrs, '390006') }}
+            </div>
+            <div v-else-if="scope.row.computingFormula == '6006'">
+              <span>{{ $t('simplifyRoomFee.unitPrice') }}</span>{{ scope.row.squarePrice }}
+            </div>
+            <div v-else-if="scope.row.computingFormula == '6006'">
+              <span>{{ $t('simplifyRoomFee.additionalFee') }}</span>{{ scope.row.additionalAmount }}
+            </div>
+            <div v-else-if="scope.row.feeTypeCd == '888800010017'">
+              <span>{{ $t('simplifyRoomFee.algorithm') }}</span>{{ getAttrValue(scope.row.feeAttrs, '390005') }}
+            </div>
+            <div v-else-if="scope.row.feeTypeCd == '888800010017'">
+              <span>{{ $t('simplifyRoomFee.usage') }}</span>{{ getAttrValue(scope.row.feeAttrs, '390003') }}
+            </div>
+            <div v-else>
+              <span>{{ $t('simplifyRoomFee.unitPrice') }}</span>{{ scope.row.squarePrice }}
+            </div>
+            <div v-if="scope.row.feeFlag == '1003006'">
+              <span>{{ $t('simplifyRoomFee.additionalFee') }}</span>{{ scope.row.additionalAmount }}
+            </div>
+            <div v-else>
+              <span>{{ $t('simplifyRoomFee.fixedFee') }}</span>{{ scope.row.additionalAmount }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="stateName" :label="$t('simplifyRoomFee.status')" align="center"></el-table-column>
+        <el-table-column :label="$t('simplifyRoomFee.operation')" align="center" width="200">
+          <template slot-scope="scope">
+            <el-button type="text" v-if="scope.row.state != '2009001' && hasPrivilege('502020082314267912')"
+              @click="payFee(scope.row)">
+              {{ $t('simplifyRoomFee.payment') }}
+            </el-button>
+            <el-button type="text" @click="payFeeHis(scope.row)">
+              {{ $t('simplifyRoomFee.paymentHistory') }}
+            </el-button>
+            <el-dropdown
+              v-if="hasPrivilege('502020090604200029') || hasPrivilege('502021070488970005') || hasPrivilege('502020090427190001')">
+              <span class="el-dropdown-link">
+                {{ $t('simplifyRoomFee.moreOperations') }}<i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item v-if="hasPrivilege('502020090604200029')" @click.native="deleteFee(scope.row)">
+                  {{ $t('simplifyRoomFee.cancelFee') }}
+                </el-dropdown-item>
+                <el-dropdown-item v-if="hasPrivilege('502021070488970005')" @click.native="finishFee(scope.row)">
+                  {{ $t('simplifyRoomFee.manualEnd') }}
+                </el-dropdown-item>
+                <el-dropdown-item v-if="scope.row.state != '2009001' && hasPrivilege('502020090427190001')"
+                  @click.native="editFee(scope.row)">
+                  {{ $t('simplifyRoomFee.feeChange') }}
+                </el-dropdown-item>
+                <el-dropdown-item>
+                  <a target="_blank" :href="'/#/pages/fee/feeDetail?feeId=' + scope.row.feeId">
+                    {{ $t('simplifyRoomFee.details') }}
+                  </a>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
+        layout="total, prev, pager, next" :total="total" class="pagination text-right"></el-pagination>
+    </div>
+
+    <div class="margin-top" v-show="simplifyRoomFeeInfo.showFlag == 'MONTH'">
+      <el-table :data="simplifyRoomFeeInfo.monthFees" style="width: 100%" border stripe>
+        <el-table-column prop="feeName" :label="$t('simplifyRoomFee.feeItem')" align="center">
+          <template slot-scope="scope">
+            <span class="hand" @click="viewRoomFeeConfig(scope.row)">
+              {{ scope.row.feeName }}{{ getSimplifyRoomFeeRoomName(scope.row) }}
+              <i class="el-icon-info"></i>
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="feeFlagName" :label="$t('simplifyRoomFee.feeFlag')" align="center"></el-table-column>
+        <el-table-column prop="feeTypeCdName" :label="$t('simplifyRoomFee.feeType')" align="center"></el-table-column>
+        <el-table-column :label="$t('simplifyRoomFee.chargeYearMonth')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.detailYear }}-{{ scope.row.detailMonth }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="receivableAmount" :label="$t('simplifyRoomFee.receivableAmount')"
+          align="center"></el-table-column>
+        <el-table-column :label="$t('simplifyRoomFee.description')" align="center" width="150">
+          <template slot-scope="scope">
+            <div v-if="scope.row.computingFormula == '5005' || scope.row.computingFormula == '9009'">
+              <span>{{ $t('simplifyRoomFee.preDegrees') }}</span>{{ scope.row.preDegrees }}
+            </div>
+            <div v-if="scope.row.computingFormula == '5005' || scope.row.computingFormula == '9009'">
+              <span>{{ $t('simplifyRoomFee.curDegrees') }}</span>{{ scope.row.curDegrees }}
+            </div>
+            <div v-if="scope.row.computingFormula == '5005' || scope.row.computingFormula == '9009'">
+              <span>{{ $t('simplifyRoomFee.unitPrice') }}</span>{{ getOnePrice1(scope.row) }}
+            </div>
+            <div v-if="scope.row.computingFormula == '5005' || scope.row.computingFormula == '9009'">
+              <span>{{ $t('simplifyRoomFee.additionalFee') }}</span>{{ scope.row.additionalAmount }}
+            </div>
+            <div v-else-if="scope.row.computingFormula == '6006'">
+              <span>{{ $t('simplifyRoomFee.usage') }}</span>{{ getAttrValue(scope.row.feeAttrs, '390006') }}
+            </div>
+            <div v-else-if="scope.row.computingFormula == '6006'">
+              <span>{{ $t('simplifyRoomFee.unitPrice') }}</span>{{ scope.row.squarePrice }}
+            </div>
+            <div v-else-if="scope.row.computingFormula == '6006'">
+              <span>{{ $t('simplifyRoomFee.additionalFee') }}</span>{{ scope.row.additionalAmount }}
+            </div>
+            <div v-else-if="scope.row.feeTypeCd == '888800010017'">
+              <span>{{ $t('simplifyRoomFee.algorithm') }}</span>{{ getAttrValue(scope.row.feeAttrs, '390005') }}
+            </div>
+            <div v-else-if="scope.row.feeTypeCd == '888800010017'">
+              <span>{{ $t('simplifyRoomFee.usage') }}</span>{{ getAttrValue(scope.row.feeAttrs, '390003') }}
+            </div>
+            <div v-else>
+              <span>{{ $t('simplifyRoomFee.unitPrice') }}</span>{{ scope.row.squarePrice }}
+            </div>
+            <div v-if="scope.row.feeFlag == '1003006'">
+              <span>{{ $t('simplifyRoomFee.additionalFee') }}</span>{{ scope.row.additionalAmount }}
+            </div>
+            <div v-else>
+              <span>{{ $t('simplifyRoomFee.fixedFee') }}</span>{{ scope.row.additionalAmount }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('simplifyRoomFee.operation')" align="center">
+          <template slot-scope="scope">
+            <a target="_blank" :href="'/#/pages/fee/feeDetail?feeId=' + scope.row.feeId">
+              {{ $t('simplifyRoomFee.details') }}
+            </a>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <el-row>
+      <el-col :span="12" class="text-left">
+        <div>{{ $t('simplifyRoomFee.note1') }}</div>
+        <div>{{ $t('simplifyRoomFee.note2') }}</div>
+      </el-col>
+      <el-col :span="6">
+        <span>
+          <span>{{ $t('simplifyRoomFee.arrearsSubtotal') }}</span>{{ simplifyRoomFeeInfo.totalAmount }}
+        </span>
+      </el-col>
+    </el-row>
+    <!-- Modal Components -->
+    <delete-fee ref="deleteFee"></delete-fee>
+    <edit-fee ref="editFee"></edit-fee>
+    <temp-import-room-fee ref="tempImportRoomFee"></temp-import-room-fee>
+  </div>
+</template>
+
+<script>
+import { listFee, listFeeConfigs, listMonthFee } from '@/api/fee/simplifyRoomFeeApi'
+import { getDict } from '@/api/community/communityApi'
+import { getCommunityId } from '@/api/community/communityApi'
+//import { listFeeConfigs } from '@/api/fee/feeConfigManageApi'
+import TempImportRoomFee from './tempImportRoomFee'
+import { dateFormat } from '@/utils/dateUtil'
+import DeleteFee from '@/components/fee/deleteFee'
+import EditFee from '@/components/fee/editFee'
+
+export default {
+  name: 'SimplifyRoomFee',
+  components: {
+    TempImportRoomFee,
+    DeleteFee,
+    EditFee,
+  },
+  data() {
+    return {
+      simplifyRoomFeeInfo: {
+        total: 0,
+        records: 1,
+        fees: [],
+        monthFees: [],
+        roomId: '',
+        roomName: '',
+        name: '',
+        floorNum: '',
+        unitNum: '',
+        roomNum: '',
+        configId: '',
+        feeTypeCds: [],
+        feeTypeCd: '',
+        state: '2008001',
+        totalAmount: 0.0,
+        roomType: '',
+        ownerFee: 'N',
+        ownerId: '',
+        showFlag: 'DEFAULT',
+        feeConfigs: []
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  computed: {
+    filteredFeeTypeCds() {
+      return this.simplifyRoomFeeInfo.feeTypeCds.filter(item => item.statusCd !== '888800010008')
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    //this.loadDictData()
+  },
+  methods: {
+    open(params) {
+      this.handleSwitch(params)
+    },
+    handleSwitch(param) {
+      this.clearSimplifyRoomFeeInfo()
+      if (param.roomId === '') return
+
+      Object.assign(this.simplifyRoomFeeInfo, param)
+      this.listSimplifyRoomFee(1, this.pageSize)
+
+      getDict('pay_fee_config', 'fee_type_cd').then(data => {
+        this.simplifyRoomFeeInfo.feeTypeCds = data
+      })
+    },
+    handleNotify() {
+      this.listSimplifyRoomFee(this.currentPage, this.pageSize)
+    },
+    getOnePrice1(fee) {
+      let price = fee.mwPrice
+      if (!price) return fee.squarePrice
+      if (parseFloat(price) > 0) return price
+      return fee.squarePrice
+    },
+    async listSimplifyRoomFee(page, row) {
+      const params = {
+        page,
+        row,
+        communityId: getCommunityId(),
+        payerObjId: this.simplifyRoomFeeInfo.roomId,
+        payerObjType: '3333',
+        configId: this.simplifyRoomFeeInfo.configId,
+        state: this.simplifyRoomFeeInfo.state,
+        feeTypeCd: this.simplifyRoomFeeInfo.feeTypeCd
+      }
+
+      if (this.simplifyRoomFeeInfo.ownerFee === 'Y') {
+        params.payerObjId = ''
+        params.ownerId = this.simplifyRoomFeeInfo.ownerId
+      }
+
+      try {
+        const res = await listFee(params)
+        this.simplifyRoomFeeInfo.total = res.total
+        this.simplifyRoomFeeInfo.records = res.records
+        let totalAmount = 0.0
+
+        res.fees.forEach(item => {
+          totalAmount += parseFloat(item.amountOwed)
+        })
+
+        this.simplifyRoomFeeInfo.totalAmount = totalAmount.toFixed(2)
+        this.simplifyRoomFeeInfo.fees = res.fees.sort(this.roomFeeCompare)
+        this.total = res.records
+      } catch (error) {
+        console.error('Failed to fetch fee list:', error)
+      }
+    },
+    roomFeeCompare(a, b) {
+      if (a.payerObjName < b.payerObjName) return -1
+      if (a.payerObjName > b.payerObjName) return 1
+      return 0
+    },
+    toOwnerPayFee() {
+      this.$router.push({
+        path: '/property/owePayFeeOrder',
+        query: {
+          payObjId: this.simplifyRoomFeeInfo.roomId,
+          payObjType: '3333',
+          roomName: this.simplifyRoomFeeInfo.roomName
+        }
+      })
+    },
+    openRoomCreateFeeAddModal() {
+      this.simplifyRoomFeeInfo.ownerName = this.simplifyRoomFeeInfo.name
+      this.$emit('openRoomCreateFeeAddModal', {
+        isMore: false,
+        room: this.simplifyRoomFeeInfo,
+        ownerName: this.simplifyRoomFeeInfo.name
+      })
+    },
+    openAddMeterWaterSimplifyModal() {
+      this.$emit('openAddMeterWaterModal', {
+        roomId: this.simplifyRoomFeeInfo.roomId,
+        roomName: this.simplifyRoomFeeInfo.roomName,
+        ownerName: this.simplifyRoomFeeInfo.name
+      })
+    },
+    getAttrValue(attrs, specCd) {
+      const attr = attrs.find(item => item.specCd === specCd)
+      return attr ? attr.value : ""
+    },
+    getDeadlineTime(fee) {
+      if (fee.amountOwed == 0 && fee.endTime == fee.deadlineTime) return "-"
+      if (fee.state == '2009001') return "-"
+      return dateFormat(fee.deadlineTime)
+    },
+    getEndTime(fee) {
+      if (fee.state == '2009001') return "-"
+      return dateFormat(fee.endTime)
+    },
+    openProxyFeeModal() {
+      this.$emit('openAddProxyFeeModal', {
+        roomId: this.simplifyRoomFeeInfo.roomId,
+        roomName: this.simplifyRoomFeeInfo.roomName,
+        ownerName: this.simplifyRoomFeeInfo.name
+      })
+    },
+    payFee(fee) {
+      fee.roomName = this.simplifyRoomFeeInfo.roomName
+      fee.builtUpArea = this.simplifyRoomFeeInfo.builtUpArea
+      this.$router.push({
+        path: '/property/payFeeOrder',
+        query: { feeId: fee.feeId }
+      })
+    },
+    editFee(fee) {
+      fee.maxEndTime = this.getAttrValue(fee.feeAttrs, '390010')
+      this.$refs.editFee.open(fee)
+    },
+    payFeeHis(fee) {
+      fee.builtUpArea = this.simplifyRoomFeeInfo.builtUpArea
+      this.$router.push({
+        path: '/views/fee/propertyFee',
+        query: fee
+      })
+    },
+    deleteFee(fee) {
+      this.$emit('openDeleteFeeModal', {
+        communityId: getCommunityId(),
+        feeId: fee.feeId
+      })
+    },
+    finishFee(fee) {
+      this.$emit('openFinishFeeModal', {
+        communityId: getCommunityId(),
+        feeId: fee.feeId
+      })
+    },
+    openTempImportRoomFeeModal() {
+      this.$refs.tempImportRoomFee.open({
+        roomId: this.simplifyRoomFeeInfo.roomId,
+        roomName: this.simplifyRoomFeeInfo.roomName,
+        ownerName: this.simplifyRoomFeeInfo.name
+      })
+    },
+    clearSimplifyRoomFeeInfo() {
+      const feeConfigs = this.simplifyRoomFeeInfo.feeConfigs
+      this.simplifyRoomFeeInfo = {
+        total: 0,
+        records: 1,
+        fees: [],
+        monthFees: [],
+        accounts: [],
+        roomId: '',
+        name: '',
+        roomName: '',
+        floorNum: '',
+        unitNum: '',
+        roomNum: '',
+        feeConfigs: feeConfigs,
+        feeTypeCd: '',
+        configId: '',
+        state: '2008001',
+        totalAmount: 0.0,
+        roomType: '',
+        ownerFee: 'N',
+        ownerId: '',
+        showFlag: 'DEFAULT'
+      }
+    },
+    changeSimplifyRoomFeeFeeTypeCd(feeTypeCd) {
+      this.simplifyRoomFeeInfo.configId = ''
+      this.$emit('notify', {})
+
+      const params = {
+        page: 1,
+        row: 50,
+        communityId: getCommunityId(),
+        feeTypeCd: feeTypeCd,
+        isDefault: '',
+        valid: '1'
+      }
+
+      listFeeConfigs(params).then(res => {
+        this.simplifyRoomFeeInfo.feeConfigs = res.feeConfigs
+      }).catch(error => {
+        console.error('Failed to fetch fee configs:', error)
+      })
+    },
+    changeSimplifyRoomConfigId() {
+      this.$emit('notify', {})
+    },
+    simplifyRoomGetFeeOwnerInfo(attrs) {
+      const ownerName = this.getAttrValue(attrs, '390008')
+      const ownerLink = this.getAttrValue(attrs, '390009')
+      return `业主：${ownerName},电话：${ownerLink}`
+    },
+    getSimplifyRoomFeeRoomName(fee) {
+      if (this.simplifyRoomFeeInfo.ownerFee != 'Y') return ''
+
+      const attr = fee.feeAttrs.find(item => item.specCd === '390012')
+      return attr ? `(${attr.value})` : ''
+    },
+    openBatchPayRoomFeeModal() {
+      this.$router.push({
+        path: '/views/fee/batchPayFeeOrder',
+        query: {
+          ownerId: this.simplifyRoomFeeInfo.ownerId,
+          payerObjType: '3333'
+        }
+      })
+    },
+    openMonthPayRoomFeeModal() {
+      this.$router.push({
+        path: '/property/payFeeMonthOrder',
+        query: {
+          payerObjId: this.simplifyRoomFeeInfo.roomId,
+          payerObjType: '3333'
+        }
+      })
+    },
+    openRoomCreateFeeComboModal() {
+      this.$router.push({
+        path: '/property/createFeeByCombo',
+        query: {
+          payerObjId: this.simplifyRoomFeeInfo.roomId,
+          payerObjName: this.simplifyRoomFeeInfo.roomName,
+          payerObjType: '3333'
+        }
+      })
+    },
+    viewRoomFeeConfig(fee) {
+      const params = {
+        page: 1,
+        row: 1,
+        communityId: getCommunityId(),
+        configId: fee.configId
+      }
+
+      listFeeConfigs(params).then(res => {
+        const feeConfig = res.feeConfigs[0]
+        this.$emit('openViewDataModal', {
+          title: `${fee.feeName} 费用项`,
+          data: {
+            "费用项ID": feeConfig.configId,
+            "费用类型": feeConfig.feeTypeCdName,
+            "收费项目": feeConfig.feeName,
+            "费用标识": feeConfig.feeFlagName,
+            "催缴类型": feeConfig.billTypeName,
+            "付费类型": feeConfig.paymentCd == '1200' ? '预付费' : '后付费',
+            "缴费周期": feeConfig.paymentCycle,
+            "应收开始时间": feeConfig.startTime,
+            "应收结束时间": feeConfig.endTime,
+            "公式": feeConfig.computingFormulaName,
+            "计费单价": feeConfig.computingFormula == '2002' ? '-' : feeConfig.squarePrice,
+            "附加/固定费用": feeConfig.additionalAmount
+          }
+        })
+      }).catch(error => {
+        console.error('Failed to fetch fee config:', error)
+      })
+    },
+    viewRoomFee(fee) {
+      const data = {
+        "费用ID": fee.feeId,
+        "费用标识": fee.feeFlagName,
+        "费用类型": fee.feeTypeCdName,
+        "付费对象": fee.payerObjName,
+        "费用项": fee.feeName,
+        "费用状态": fee.stateName,
+        "建账时间": fee.startTime,
+        "应收开始时间": this.getEndTime(fee),
+        "应收结束时间": this.getDeadlineTime(fee),
+        "批次": fee.batchId
+      }
+
+      fee.feeAttrs.forEach(attr => {
+        data[attr.specCdName] = attr.value
+      })
+
+      this.$emit('openViewDataModal', {
+        title: `${fee.feeName} 详情`,
+        data: data
+      })
+    },
+    changeSimplifyRoomShowFlag() {
+      if (this.simplifyRoomFeeInfo.showFlag == 'MONTH') {
+        this.listSimplifyRoomMonthFee(1, this.pageSize)
+      } else {
+        this.listSimplifyRoomFee(1, this.pageSize)
+      }
+    },
+    async listSimplifyRoomMonthFee(page, row) {
+      const params = {
+        page,
+        row,
+        communityId: getCommunityId(),
+        objId: this.simplifyRoomFeeInfo.roomId,
+        payerObjType: '3333',
+        configId: this.simplifyRoomFeeInfo.configId,
+        feeTypeCd: this.simplifyRoomFeeInfo.feeTypeCd,
+        detailId: '-1',
+        feeState: '2008001'
+      }
+
+      if (this.simplifyRoomFeeInfo.ownerFee == 'Y') {
+        params.payerObjId = ''
+        params.ownerId = this.simplifyRoomFeeInfo.ownerId
+      }
+
+      try {
+        const res = await listMonthFee(params)
+        this.simplifyRoomFeeInfo.total = res.total
+        this.simplifyRoomFeeInfo.records = res.records
+        let totalAmount = 0.0
+
+        res.data.forEach(item => {
+          totalAmount += parseFloat(item.receivableAmount)
+        })
+
+        this.simplifyRoomFeeInfo.totalAmount = totalAmount.toFixed(2)
+        this.simplifyRoomFeeInfo.monthFees = res.data
+      } catch (error) {
+        console.error('Failed to fetch month fee list:', error)
+      }
+    },
+    handleCurrentChange(page) {
+      this.currentPage = page
+      if (this.simplifyRoomFeeInfo.showFlag == 'MONTH') {
+        this.listSimplifyRoomMonthFee(page, this.pageSize)
+      } else {
+        this.listSimplifyRoomFee(page, this.pageSize)
+      }
+    },
+    // 其他方法类似
+  }
+}
+</script>
+
+<style scoped>
+.margin-top-lg {
+  margin-top: 20px;
+}
+
+.margin-top {
+  margin-top: 15px;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.hand {
+  cursor: pointer;
+}
+</style>
 \ No newline at end of file
+<template>
+  <div>
+    <simplify-room-fee ref="simplifyRoomFee"></simplify-room-fee>
+  </div>
+</template>
+
+<script>
+import SimplifyRoomFee from './simplifyRoomFee'
+
+export default {
+  name: 'SimplifyRoomFeeDemo',
+  components: {
+    SimplifyRoomFee
+  },
+  mounted() {
+    this.$refs.simplifyRoomFee.$emit('switch', {
+      roomId: '123',
+      roomName: '测试房间',
+      name: '测试业主'
+    })
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-dialog 
+    :title="$t('tempImportRoomFee.title')"
+    :visible.sync="dialogVisible"
+    width="70%"
+    @close="clearTempImportRoomFeeInfo"
+  >
+    <el-form :model="form" label-width="120px">
+      <el-form-item :label="$t('tempImportRoomFee.feeType')">
+        <el-select 
+          v-model="form.feeTypeCd"
+          @change="changeFeeTypeCd"
+          :placeholder="$t('tempImportRoomFee.selectFeeType')"
+        >
+          <el-option 
+            v-for="(item,index) in feeTypeCds" 
+            :key="index"
+            :label="item.name"
+            :value="item.statusCd"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item :label="$t('tempImportRoomFee.feeObj')">
+        <el-input 
+          v-model="form.objName" 
+          disabled
+          :placeholder="$t('tempImportRoomFee.inputFeeObj')"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item :label="$t('tempImportRoomFee.feeName')" v-if="form.feeNameFlag === 'S'">
+        <el-select 
+          v-model="form.configId"
+          :placeholder="$t('tempImportRoomFee.selectFeeItem')"
+        >
+          <el-option 
+            v-for="(item,index) in feeConfigs" 
+            :key="index"
+            :label="item.feeName"
+            :value="item.configId"
+          ></el-option>
+        </el-select>
+        <span>{{$t('tempImportRoomFee.feeItemDesc')}}</span>
+      </el-form-item>
+
+      <el-form-item :label="$t('tempImportRoomFee.feeName')" v-else>
+        <el-col :span="18">
+          <el-input 
+            v-model="form.feeName" 
+            :placeholder="$t('tempImportRoomFee.inputFeeName')"
+          ></el-input>
+        </el-col>
+        <el-col :span="6">
+          <el-button @click="toggleFeeNameFlag">{{$t('tempImportRoomFee.select')}}</el-button>
+        </el-col>
+      </el-form-item>
+
+      <el-form-item :label="$t('tempImportRoomFee.amount')">
+        <el-input 
+          v-model="form.amount" 
+          :placeholder="$t('tempImportRoomFee.inputAmount')"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item :label="$t('tempImportRoomFee.startTime')">
+        <el-date-picker
+          v-model="form.startTime"
+          type="datetime"
+          :placeholder="$t('tempImportRoomFee.selectStartTime')"
+          value-format="yyyy-MM-dd HH:mm:ss"
+        ></el-date-picker>
+      </el-form-item>
+
+      <el-form-item :label="$t('tempImportRoomFee.endTime')">
+        <el-date-picker
+          v-model="form.endTime"
+          type="datetime"
+          :placeholder="$t('tempImportRoomFee.selectEndTime')"
+          value-format="yyyy-MM-dd HH:mm:ss"
+        ></el-date-picker>
+      </el-form-item>
+    </el-form>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">{{$t('tempImportRoomFee.cancel')}}</el-button>
+      <el-button type="primary" @click="saveTempImportFeeInfo">{{$t('tempImportRoomFee.submit')}}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { importTempData } from '@/api/fee/tempImportRoomFeeApi'
+import { getDict } from '@/api/community/communityApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import { listFeeConfigs } from '@/api/fee/feeConfigManageApi'
+export default {
+  name: 'TempImportRoomFee',
+  data() {
+    return {
+      dialogVisible: false,
+      form: {
+        communityId: '',
+        feeTypeCd: '',
+        objType: '',
+        feeTypeCds: [],
+        configId: '',
+        objName: '',
+        objId: '',
+        amount: '',
+        startTime: this.formatDate(new Date()),
+        endTime: this.addMonth(new Date(), 1),
+        feeConfigs: [],
+        feeNameFlag: 'S'
+      },
+      feeTypeCds: [],
+      feeConfigs: [],
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.loadDictData()
+  },
+  methods: {
+    open(room) {
+      this.clearTempImportRoomFeeInfo()
+      this.form.objId = room.roomId
+      this.form.objName = room.roomName
+      this.form.objType = room.objType
+      this.dialogVisible = true
+    },
+    async loadDictData() {
+      try {
+        const data = await getDict('pay_fee_config', 'fee_type_cd')
+        this.feeTypeCds = data
+        this.form.feeTypeCds = data
+      } catch (error) {
+        console.error('获取字典数据失败:', error)
+      }
+    },
+    async changeFeeTypeCd(feeTypeCd) {
+      try {
+        const res = await listFeeConfigs({
+          page: 1,
+          row: 500,
+          communityId: this.communityId,
+          feeTypeCd: feeTypeCd,
+          isDefault: 'F',
+          computingFormula: '4004',
+          valid: '1'
+        })
+        this.feeConfigs = res.feeConfigs
+      } catch (error) {
+        console.error('获取费用配置失败:', error)
+      }
+    },
+    toggleFeeNameFlag() {
+      this.form.feeNameFlag = this.form.feeNameFlag === 'S' ? 'I' : 'S'
+    },
+    validateForm() {
+      if (!this.form.feeTypeCd) {
+        this.$message.warning(this.$t('tempImportRoomFee.feeTypeRequired'))
+        return false
+      }
+      if (!this.form.configId && this.form.feeNameFlag === 'S') {
+        this.$message.warning(this.$t('tempImportRoomFee.feeNameRequired'))
+        return false
+      }
+      if (!this.form.objId) {
+        this.$message.warning(this.$t('tempImportRoomFee.feeObjRequired'))
+        return false
+      }
+      if (!this.form.startTime) {
+        this.$message.warning(this.$t('tempImportRoomFee.startTimeRequired'))
+        return false
+      }
+      if (!this.form.endTime) {
+        this.$message.warning(this.$t('tempImportRoomFee.endTimeRequired'))
+        return false
+      }
+      if (new Date(this.form.startTime) >= new Date(this.form.endTime)) {
+        this.$message.warning(this.$t('tempImportRoomFee.endTimeMustAfterStart'))
+        return false
+      }
+      if (!this.form.amount) {
+        this.$message.warning(this.$t('tempImportRoomFee.amountRequired'))
+        return false
+      }
+      return true
+    },
+    async saveTempImportFeeInfo() {
+      if (!this.validateForm()) return
+      
+      try {
+        const res = await importTempData({
+          ...this.form,
+          communityId: this.communityId
+        })
+        if (res.code === 0) {
+          this.dialogVisible = false
+          this.$emit('notify')
+          this.$message.success(this.$t('tempImportRoomFee.createSuccess'))
+        } else {
+          this.$message.error(res.msg)
+        }
+      } catch (error) {
+        console.error('请求失败:', error)
+        this.$message.error(this.$t('tempImportRoomFee.createFailed'))
+      }
+    },
+    clearTempImportRoomFeeInfo() {
+      this.form = {
+        communityId: this.communityId,
+        feeTypeCd: '',
+        feeTypeCds: this.feeTypeCds,
+        configId: '',
+        objName: '',
+        objId: '',
+        amount: '',
+        startTime: this.formatDate(new Date()),
+        endTime: this.addMonth(new Date(), 1),
+        feeNameFlag: 'S',
+        feeConfigs: []
+      }
+    },
+    formatDate(date) {
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      const hours = String(date.getHours()).padStart(2, '0')
+      const minutes = String(date.getMinutes()).padStart(2, '0')
+      const seconds = String(date.getSeconds()).padStart(2, '0')
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+    },
+    addMonth(date, months) {
+      const newDate = new Date(date)
+      newDate.setMonth(newDate.getMonth() + months)
+      return this.formatDate(newDate)
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div>
+    <el-button @click="openModal">{{$t('tempImportRoomFeeDemo.openModal')}}</el-button>
+    <temp-import-room-fee ref="tempImportRoomFee"></temp-import-room-fee>
+  </div>
+</template>
+
+<script>
+import TempImportRoomFee from './tempImportRoomFee'
+
+export default {
+  name: 'TempImportRoomFeeDemo',
+  components: {
+    TempImportRoomFee
+  },
+  methods: {
+    openModal() {
+      this.$refs.tempImportRoomFee.open({
+        roomId: '123',
+        roomName: '测试房间',
+        ownerName: '测试业主'
+      })
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-tooltip effect="dark" content="查看详情" placement="top">
+    <i class="el-icon-info hand" @click="open"></i>
+  </el-tooltip>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { listFeeConfigs } from '@/api/fee/propertyFeeApi'
+
+export default {
+  name: 'ViewFeeConfigData',
+  data() {
+    return {
+      configId: '',
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    open(params) {
+      this.configId = params.configId
+      this._loadFeeConfigData()
+    },
+    async _loadFeeConfigData() {
+      try {
+        const res = await listFeeConfigs({
+          page: 1,
+          row: 1,
+          communityId: this.communityId,
+          configId: this.configId
+        })
+        
+        if (res.data && res.data.length > 0) {
+          const feeConfig = res.data[0]
+          const configData = {
+            "费用项ID": feeConfig.configId,
+            "费用类型": feeConfig.feeTypeCdName,
+            "收费项目": feeConfig.feeName,
+            "费用标识": feeConfig.feeFlagName,
+            "催缴类型": feeConfig.billTypeName,
+            "付费类型": feeConfig.paymentCd === '1200' ? this.$t('viewFeeConfigData.prepaid') : this.$t('viewFeeConfigData.postpaid'),
+            "缴费周期": feeConfig.paymentCycle,
+            "计费起始时间": feeConfig.startTime,
+            "计费终止时间": feeConfig.endTime,
+            "公式": feeConfig.computingFormulaName,
+            "计费单价": feeConfig.computingFormula === '2002' ? '-' : feeConfig.squarePrice,
+            "附加/固定费用": feeConfig.additionalAmount
+          }
+          
+          this.$emit('openViewDataModal', {
+            title: `${feeConfig.feeName} ${this.$t('viewFeeConfigData.feeItem')}`,
+            data: configData
+          })
+        }
+      } catch (error) {
+        console.error('加载费用配置数据失败:', error)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.hand {
+  cursor: pointer;
+  color: #409EFF;
+  margin-left: 5px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('viewFeeDetailDiscount.discount')"
+    :visible.sync="visible"
+    width="70%"
+    center
+  >
+    <el-table
+      :data="viewFeeDetailDiscountInfo.feeDetailDiscounts"
+      border
+      stripe
+      style="width: 100%"
+    >
+      <el-table-column 
+        prop="discountName" 
+        :label="$t('viewFeeDetailDiscount.discountName')" 
+        align="center"
+      />
+      <el-table-column 
+        :label="$t('viewFeeDetailDiscount.discountType')" 
+        align="center"
+      >
+        <template slot-scope="scope">
+          {{ scope.row.discountType === '1001' ? $t('viewFeeDetailDiscount.discount') : $t('viewFeeDetailDiscount.breach') }}
+        </template>
+      </el-table-column>
+      <el-table-column 
+        prop="ruleName" 
+        :label="$t('viewFeeDetailDiscount.ruleName')" 
+        align="center"
+      />
+      <el-table-column 
+        :label="$t('viewFeeDetailDiscount.discountRule')" 
+        align="center"
+      >
+        <template slot-scope="scope">
+          <div v-for="(item,index) in scope.row.feeDiscountSpecs" :key="index">
+            {{item.specName}}：{{item.specValue}}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column 
+        prop="discountPrice" 
+        :label="$t('viewFeeDetailDiscount.discountAmount')" 
+        align="center"
+      />
+    </el-table>
+  </el-dialog>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { queryFeeDetailDiscount } from '@/api/fee/propertyFeeApi'
+
+export default {
+  name: 'ViewFeeDetailDiscount',
+  data() {
+    return {
+      visible: false,
+      viewFeeDetailDiscountInfo: {
+        feeDetailDiscounts: []
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    open(params) {
+      this.visible = true
+      this._loadAllFeeDetailDiscountInfo(params)
+    },
+    async _loadAllFeeDetailDiscountInfo(params) {
+      try {
+        const res = await queryFeeDetailDiscount({
+          page: 1,
+          row: 30,
+          communityId: this.communityId,
+          detailId: params.detailId
+        })
+        
+        this.viewFeeDetailDiscountInfo.feeDetailDiscounts = res.data || []
+      } catch (error) {
+        console.error('加载折扣信息失败:', error)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-table {
+  margin-top: 15px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-card class="box-card">
+    <div slot="header" class="clearfix">
+      <span>{{ $t('viewMainFee.feeInfo') }}</span>
+      <el-button 
+        type="primary" 
+        size="small" 
+        style="float: right; margin-left: 10px;"
+        @click="_openCallBackOwner"
+      >
+        {{ $t('common.back') }}
+      </el-button>
+    </div>
+    
+    <el-row :gutter="20">
+      <el-col :span="6">
+        <div class="form-item">
+          <label>{{ $t('viewMainFee.feeId') }}</label>
+          <div>{{ mainFeeInfo.feeId }}</div>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div class="form-item">
+          <label>{{ $t('viewMainFee.feeFlag') }}</label>
+          <div>{{ mainFeeInfo.feeFlagName }}</div>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div class="form-item">
+          <label>{{ $t('viewMainFee.feeType') }}</label>
+          <div>{{ mainFeeInfo.feeTypeCdName }}</div>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div class="form-item">
+          <label>{{ $t('viewMainFee.payerObj') }}</label>
+          <div>
+            {{ mainFeeInfo.payerObjName }}
+            <view-room-data 
+              v-if="mainFeeInfo.payerObjType == '3333'"
+              ref="viewRoomData"
+            />
+          </div>
+        </div>
+      </el-col>
+      
+      <el-col :span="6">
+        <div class="form-item">
+          <label>{{ $t('viewMainFee.feeItem') }}</label>
+          <div class="hand" @click="_viewFeeConfig">
+            {{ mainFeeInfo.feeName }}
+            <view-fee-config-data ref="viewFeeConfigData" />
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div class="form-item">
+          <label>{{ $t('viewMainFee.feeStatus') }}</label>
+          <div>{{ mainFeeInfo.stateName }}</div>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div class="form-item">
+          <label>{{ $t('viewMainFee.startTime') }}</label>
+          <div>{{ mainFeeInfo.startTime }}</div>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div class="form-item">
+          <label>{{ $t('viewMainFee.billingStartTime') }}</label>
+          <div>{{ _getEndTime(mainFeeInfo) }}</div>
+        </div>
+      </el-col>
+      
+      <el-col :span="6">
+        <div class="form-item">
+          <label>{{ $t('viewMainFee.billingEndTime') }}</label>
+          <div>{{ _getDeadlineTime(mainFeeInfo) }}</div>
+        </div>
+      </el-col>
+      <el-col :span="6" v-if="mainFeeInfo.amount != '-1.00'">
+        <div class="form-item">
+          <label>{{ $t('viewMainFee.feeAmount') }}</label>
+          <div>{{ mainFeeInfo.amount }}</div>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div class="form-item">
+          <label>{{ $t('viewMainFee.batch') }}</label>
+          <div>{{ mainFeeInfo.batchId }}</div>
+        </div>
+      </el-col>
+      
+      <template v-for="(item,index) in mainFeeInfo.feeAttrs">
+        <el-col :span="6" :key="index">
+          <div class="form-item">
+            <label>{{ item.specCdName }}：</label>
+            <div>{{ item.value }}</div>
+          </div>
+        </el-col>
+      </template>
+    </el-row>
+    
+    <el-row :gutter="20" v-if="mainFeeInfo.payerObjType == '3333'">
+      <el-col :span="6">
+        <div class="form-item">
+          <label>{{ $t('viewMainFee.area') }}</label>
+          <div>{{ mainFeeInfo.builtUpArea }}</div>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div class="form-item">
+          <label>{{ $t('viewMainFee.unitPrice') }}</label>
+          <div>{{ mainFeeInfo.squarePrice }}</div>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div class="form-item">
+          <label>{{ $t('viewMainFee.additionalFee') }}</label>
+          <div>{{ mainFeeInfo.additionalAmount }}</div>
+        </div>
+      </el-col>
+    </el-row>
+    
+    <el-row :gutter="20" v-else>
+      <el-col :span="6">
+        <div class="form-item">
+          <label>{{ $t('viewMainFee.fixedFee') }}</label>
+          <div>{{ mainFeeInfo.additionalAmount }}</div>
+        </div>
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { listFee } from '@/api/fee/propertyFeeApi'
+import ViewRoomData from './viewRoomData'
+import ViewFeeConfigData from './viewFeeConfigData'
+
+export default {
+  name: 'ViewMainFee',
+  components: {
+    ViewRoomData,
+    ViewFeeConfigData
+  },
+  props: {
+    feeName: {
+      type: String,
+      required: true
+    },
+    feeTypeCd: {
+      type: String,
+      required: true
+    },
+    payName: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      mainFeeInfo: {
+        feeName: this.feeName,
+        feeId: "",
+        feeTypeCd: '',
+        builtUpArea: "",
+        startTime: "",
+        endTime: "",
+        amount: "-1.00",
+        feeFlagName: '',
+        feeTypeCdName: '',
+        configId: '',
+        stateName: '',
+        additionalAmount: 0.0,
+        squarePrice: 0,
+        deadlineTime: '',
+        payerObjType: '',
+        payerObjId: '',
+        payerObjName: '',
+        feeAttrs: [],
+        batchId: ''
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    const feeId = this.$route.query.feeId
+    if (feeId) {
+      this.loadMainFeeInfo({ feeId })
+    }
+  },
+  methods: {
+    async loadMainFeeInfo(params) {
+      try {
+        const res = await listFee({
+          ...params,
+          communityId: this.communityId,
+          page: 1,
+          row: 1
+        })
+        
+        if (res.data && res.data.length > 0) {
+          Object.assign(this.mainFeeInfo, res.data[0])
+          this.mainFeeInfo.feeAttrs = res.data[0].feeAttrs || []
+          
+          if (this.mainFeeInfo.payerObjType === '3333') {
+            this._loadRoomAndOwnerByRoomId()
+          } else if (this.mainFeeInfo.payerObjType === '6666') {
+            this._loadRoomAndOwnerByCarId()
+          } else {
+            this._loadContractAndOwnerByContractId()
+          }
+          
+          this.$emit('listFeeDetail', { feeId: this.mainFeeInfo.feeId })
+        }
+      } catch (error) {
+        console.error('加载主费用信息失败:', error)
+      }
+    },
+    _openCallBackOwner() {
+      this.$router.go(-1)
+    },
+    _getDeadlineTime(fee) {
+      if (fee.endTime === fee.deadlineTime || fee.state === '2009001') {
+        return "-"
+      }
+      return fee.deadlineTime
+    },
+    _getEndTime(fee) {
+      if (fee.state === '2009001') {
+        return "-"
+      }
+      return fee.endTime
+    },
+    _viewFeeConfig() {
+      this.$refs.viewFeeConfigData.open({ configId: this.mainFeeInfo.configId })
+    },
+    _viewRoomData() {
+      this.$refs.viewRoomData.open({ roomId: this.mainFeeInfo.payerObjId })
+    },
+    async _loadRoomAndOwnerByRoomId() {
+      // 实现获取房间和业主信息的逻辑
+    },
+    async _loadRoomAndOwnerByCarId() {
+      // 实现获取车位和业主信息的逻辑
+    },
+    async _loadContractAndOwnerByContractId() {
+      // 实现获取合同和业主信息的逻辑
+    }
+  }
+}
+</script>
+
+<style scoped>
+.form-item {
+  margin-bottom: 20px;
+  
+  label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+  }
+  
+  div {
+    padding: 8px 0;
+  }
+}
+
+.hand {
+  cursor: pointer;
+  color: #409EFF;
+  
+  &:hover {
+    text-decoration: underline;
+  }
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-tooltip effect="dark" content="查看详情" placement="top">
+    <i class="el-icon-info hand" @click="open"></i>
+  </el-tooltip>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { queryRooms } from '@/api/fee/propertyFeeApi'
+
+export default {
+  name: 'ViewRoomData',
+  data() {
+    return {
+      roomId: '',
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    open(params) {
+      this.roomId = params.roomId
+      this._loadViewRoomData()
+    },
+    async _loadViewRoomData() {
+      try {
+        const res = await queryRooms({
+          page: 1,
+          row: 1,
+          communityId: this.communityId,
+          roomId: this.roomId
+        })
+        
+        if (res.data && res.data.length > 0) {
+          const room = res.data[0]
+          const roomData = {
+            "房屋": `${room.floorNum}-${room.unitNum}-${room.roomNum}`,
+            "楼层": room.layer,
+            "业主": room.ownerName || '-',
+            "电话": room.link || '-',
+            "类型": room.roomSubTypeName,
+            "建筑面积": room.builtUpArea,
+            "室内面积": room.roomArea,
+            "租金": room.roomRent,
+            "房屋状态": room.stateName,
+            "入住时间": room.startTime
+          }
+          
+          if (room.roomAttrDto) {
+            room.roomAttrDto.forEach(attr => {
+              roomData[attr.specName] = attr.valueName
+            })
+          }
+          
+          this.$emit('openViewDataModal', {
+            title: `${room.floorNum}-${room.unitNum}-${room.roomNum} 详情`,
+            data: roomData
+          })
+        }
+      } catch (error) {
+        console.error('加载房间数据失败:', error)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.hand {
+  cursor: pointer;
+  color: #409EFF;
+  margin-left: 5px;
+}
+</style>
 \ No newline at end of file
 <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>
+  <el-dialog
+    :title="$t('writeOweFeeCallable.title')"
+    :visible.sync="dialogVisible"
+    width="70%"
+    :before-close="handleClose"
+  >
+    <div class="ibox-content">
+      <el-form label-width="120px">
+        <el-form-item :label="$t('writeOweFeeCallable.room')">
+          <el-input 
+            v-model="writeOweFeeCallableInfo.roomName" 
+            readonly
+            :placeholder="$t('writeOweFeeCallable.roomPlaceholder')"
+          ></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('writeOweFeeCallable.fees')">
+          <el-checkbox-group v-model="writeOweFeeCallableInfo.feeIds">
+            <el-checkbox 
+              v-for="(item,index) in writeOweFeeCallableInfo.fees" 
+              :key="index"
+              :label="item.feeId"
+            >
+              {{item.feeName}}
+            </el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item :label="$t('writeOweFeeCallable.remark')">
+          <el-input
+            type="textarea"
+            :rows="5"
+            v-model="writeOweFeeCallableInfo.remark"
+            :placeholder="$t('writeOweFeeCallable.remarkPlaceholder')"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
     <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>
+      <el-button @click="dialogVisible = false">{{ $t('writeOweFeeCallable.cancel') }}</el-button>
+      <el-button type="primary" @click="_wirteCallable">{{ $t('writeOweFeeCallable.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'
+import { writeOweFeeCallable, listFee } from '@/api/fee/writeOweFeeCallableApi'
 export default {
   name: 'WriteOweFeeCallable',
   data() {
     return {
       dialogVisible: false,
-      form: {
+      writeOweFeeCallableInfo: {
         roomId: '',
         roomName: '',
         fees: [],
         feeIds: [],
-        remark: '',
-        communityId: ''
+        remark: ''
       }
     }
   },
+  created() {
+    this._initEvent()
+  },
   methods: {
-    open(data) {
-      this.form = {
-        roomId: data.roomId,
-        roomName: data.roomName,
-        fees: [],
-        feeIds: [],
-        remark: '',
-        communityId: getCommunityId()
-      }
-      this.loadFees()
+    _initEvent() {
+      this.$on('openWriteOweFeeCallableModal', this.open)
+    },
+    open(param) {
+      Object.assign(this.writeOweFeeCallableInfo, param)
+      this._loadWriteOweRoomFees()
       this.dialogVisible = true
     },
-    async loadFees() {
+    handleClose(done) {
+      this.clearWriteOweFeeCallable()
+      done()
+    },
+    async _wirteCallable() {
       try {
         const params = {
-          communityId: this.form.communityId,
-          payerObjId: this.form.roomId,
-          state: '2008001',
-          page: 1,
-          row: 100
+          ...this.writeOweFeeCallableInfo,
+          communityId: getCommunityId()
+        }
+        const res = await writeOweFeeCallable(params)
+        if (res.code === 0) {
+          this.dialogVisible = false
+          this.clearWriteOweFeeCallable()
+          this.$emit('listOweFeeCallable', {})
+          this.$emit('listOwnerData', {})
+          this.$message.success(this.$t('writeOweFeeCallable.success'))
+        } else {
+          this.$message.error(res.msg)
         }
-        const response = await listFee(params)
-        this.form.fees = response.data.fees || []
       } catch (error) {
-        console.error('加载费用数据失败:', error)
+        console.error('Request failed:', error)
+        this.$message.error(error.message)
+      }
+    },
+    clearWriteOweFeeCallable() {
+      this.writeOweFeeCallableInfo = {
+        roomId: '',
+        roomName: '',
+        fees: [],
+        feeIds: [],
+        remark: ''
       }
     },
-    async handleSubmit() {
+    async _loadWriteOweRoomFees() {
       try {
-        await writeOweFeeCallable(this.form)
-        this.$message.success(this.$t('oweFeeCallable.write.success'))
-        this.dialogVisible = false
-        this.$emit('success')
+        const res = await listFee({
+          page: 1,
+          row: 100,
+          communityId: getCommunityId(),
+          payerObjId: this.writeOweFeeCallableInfo.roomId,
+          state: '2008001'
+        })
+        this.writeOweFeeCallableInfo.fees = res.fees
       } catch (error) {
-        console.error('提交失败:', error)
-        this.$message.error(error.message || this.$t('oweFeeCallable.write.error'))
+        console.error('Request failed:', error)
       }
-    },
-    handleClose() {
-      this.$refs.form.resetFields()
     }
   }
 }
-</script>
-
-<style lang="scss" scoped>
-.el-checkbox {
-  margin-right: 15px;
-}
-</style>
 \ No newline at end of file
+</script>
 \ No newline at end of file
+<template>
+  <el-button @click="openModal">{{$t('writeOweFeeCallableDemo.openModal')}}</el-button>
+  <write-owe-fee-callable ref="writeOweFeeCallable"></write-owe-fee-callable>
+</template>
+
+<script>
+import WriteOweFeeCallable from './writeOweFeeCallable'
+
+export default {
+  name: 'WriteOweFeeCallableDemo',
+  components: {
+    WriteOweFeeCallable
+  },
+  methods: {
+    openModal() {
+      this.$refs.writeOweFeeCallable.open({
+        roomId: '123',
+        roomName: 'Test Room'
+      })
+    }
+  }
+}
+</script>
 \ No newline at end of file
@@ -109,10 +109,6 @@ export default {
     },
   },
   created() {
-    this.$on('switch', (data) => {
-      this.ownerDetailAccountInfo.ownerId = data.ownerId
-      this._loadOwnerDetailAccountData(1, this.pagination.pageSize)
-    })
   }
 }
 </script>
@@ -85,7 +85,7 @@ export default {
       }
       listAccountReceipt(param).then(response => {
-        this.ownerDetailAccountReceiptInfo.feeReceipts = response.data.data.map(item => {
+        this.ownerDetailAccountReceiptInfo.feeReceipts = response.data.map(item => {
           return { ...item, checked: false }
         })
         this.total = response.data.total
@@ -72,6 +72,21 @@ export default {
       })
       this.treeData = Object.values(floorMap)
+      this.$nextTick(() => {
+        this.expandAndSelectFirstRoom()
+      })
+    },
+    async expandAndSelectFirstRoom() {
+      if (!this.treeData.length) return
+      const firstFloor = this.treeData[0]
+      if (!firstFloor.children || !firstFloor.children.length) return
+      const firstUnit = firstFloor.children[0]
+      const treeRef = this.$refs.tree
+      if (treeRef && treeRef.store) {
+        treeRef.store.nodesMap[firstFloor.id] && (treeRef.store.nodesMap[firstFloor.id].expanded = true)
+        treeRef.store.nodesMap[firstUnit.id] && (treeRef.store.nodesMap[firstUnit.id].expanded = true)
+      }
+      await this.loadRooms(firstUnit, { data: firstUnit })
     },
     async handleNodeClick(data, node) {
       if (data.id.startsWith('u_')) {
@@ -108,6 +123,10 @@ export default {
           // Update the node's children
           this.$set(node.data, 'children', roomNodes)
+          this.$emit('selectRoom', {
+            roomId: roomNodes[0].roomId,
+            roomName: roomNodes[0].roomName
+          })
         }
       } catch (error) {
         console.error('Failed to load rooms:', error)
@@ -34,6 +34,7 @@
 <script>
 import { uploadFile } from '@/api/common'
+import { getCommunityId } from '@/api/community/communityApi'
 export default {
   name: 'UploadImageUrl',
@@ -88,7 +89,7 @@ export default {
     uploadFile(file) {
       const formData = new FormData()
       formData.append('uploadFile', file)
-      formData.append('communityId', this.$store.getters.communityId)
+      formData.append('communityId', getCommunityId())
       uploadFile(formData)
         .then(response => {
@@ -21,6 +21,7 @@
 <script>
 import { listOrgTree } from '@/api/staff/staffCommunityApi'
+import { getCommunityId } from '@/api/community/communityApi'
 export default {
   name: 'ChooseOrgTree',
@@ -43,7 +44,7 @@ export default {
     async loadOrgs() {
       try {
         const { data } = await listOrgTree({
-          communityId: this.$store.getters.communityId
+          communityId: getCommunityId()
         })
         this.orgs = data
       } catch (error) {
@@ -23,6 +23,9 @@ import { messages as oweFeeCallableMessages } from &#39;../views/fee/oweFeeCallableL
 import { messages as addOweFeeCallableMessages } from '../views/fee/addOweFeeCallableLang'
 import { messages as staffFeeManageMessages } from '../views/fee/staffFeeManageLang'
 import { messages as feeSummaryMessages } from '../views/fee/feeSummaryLang'
+import { messages as roomCreateFeeMessages } from '../views/fee/roomCreateFeeLang.js'
+import { messages as propertyFeeMessages } from '../views/fee/propertyFeeLang'
+import { messages as batchPayFeeOrderMessages } from '../views/fee/batchPayFeeOrderLang'
 export const messages = {
     en: {
@@ -51,6 +54,9 @@ export const messages = {
         ...addOweFeeCallableMessages.en,
         ...staffFeeManageMessages.en,
         ...feeSummaryMessages.en,
+        ...roomCreateFeeMessages.en,
+        ...propertyFeeMessages.en,
+        ...batchPayFeeOrderMessages.en,
     },
     zh: {
         ...contractCreateFeeMessages.zh,
@@ -78,5 +84,8 @@ export const messages = {
         ...addOweFeeCallableMessages.zh,
         ...staffFeeManageMessages.zh,
         ...feeSummaryMessages.zh,
+        ...roomCreateFeeMessages.zh,
+        ...propertyFeeMessages.zh,
+        ...batchPayFeeOrderMessages.zh,
     }
 }
 \ No newline at end of file
@@ -109,5 +109,20 @@ export default [
         name: '/pages/property/feeSummary',
         component: () => import('@/views/fee/feeSummaryList.vue')
     },
+    {
+        path: '/pages/property/roomCreateFee',
+        name: '/pages/property/roomCreateFee',
+        component: () => import('@/views/fee/roomCreateFeeList.vue')
+    },
+    {
+        path: '/views/fee/propertyFee',
+        name: '/views/fee/propertyFee',
+        component: () => import('@/views/fee/propertyFeeList.vue')
+    },
+    {
+        path:'/views/fee/batchPayFeeOrder',
+        name:'/views/fee/batchPayFeeOrder',
+        component: () => import('@/views/fee/batchPayFeeOrderList.vue')
+        },
 ]
 \ No newline at end of file
+export const messages = {
+  en: {
+    addProxyFee: {
+      title: 'Pay by Quantity',
+      feeType: 'Fee Type',
+      feeTypePlaceholder: 'Required, please select fee type',
+      feeItem: 'Fee Item',
+      feeItemPlaceholder: 'Required, please select fee item',
+      feeItemTip: 'Note: Display items with formula (usage * unit price + additional fee)',
+      chargeObject: 'Charge Object',
+      chargeObjectPlaceholder: 'Required, please fill in room',
+      consumption: 'Consumption',
+      consumptionPlaceholder: 'Required, please fill in consumption',
+      quantity: 'Quantity',
+      amount: 'Amount',
+      amountPlaceholder: 'Required, please fill in amount',
+      startTime: 'Start Time',
+      startTimePlaceholder: 'Required, please fill in start time',
+      endTime: 'End Time',
+      endTimePlaceholder: 'Required, please fill in end time',
+      waterFee: 'Water Fee',
+      electricityFee: 'Electricity Fee',
+      otherFee: 'Other',
+      validate: {
+        amountRequired: 'Amount is required',
+        amountFormat: 'Invalid amount format, e.g. 3.00',
+        consumptionRequired: 'Consumption is required',
+        consumptionFormat: 'Invalid consumption format, e.g. 3.00',
+        roomRequired: 'Room is required',
+        feeRequired: 'Fee is required',
+        startTimeRequired: 'Start time is required',
+        endTimeRequired: 'End time is required',
+        startBeforeEnd: 'Start time must be before end time',
+        endAfterStart: 'End time must be after start time',
+        invalidConfig: 'Invalid fee item or formula error',
+        amountTooSmall: 'Amount is too small'
+      },
+      successMessage: 'Saved successfully'
+    },
+    addProxyFeeDemo: {
+      openModal: 'Open Pay by Quantity Modal',
+      successMessage: 'Saved successfully'
+    }
+  },
+  zh: {
+    addProxyFee: {
+      title: '按量缴费',
+      feeType: '费用类型',
+      feeTypePlaceholder: '必填，请选择费用类型',
+      feeItem: '收费项目',
+      feeItemPlaceholder: '必填，请选择收费项目',
+      feeItemTip: '说明：显示公式为(用量*单价+附加费)的费用项',
+      chargeObject: '收费对象',
+      chargeObjectPlaceholder: '必填，请填写房屋',
+      consumption: '用量',
+      consumptionPlaceholder: '必填，请填写用量',
+      quantity: '个数',
+      amount: '金额',
+      amountPlaceholder: '必填，请填写金额',
+      startTime: '开始时间',
+      startTimePlaceholder: '必填，请填写开始时间',
+      endTime: '结束时间',
+      endTimePlaceholder: '必填，请填写结束时间',
+      waterFee: '水费',
+      electricityFee: '电费',
+      otherFee: '其他',
+      validate: {
+        amountRequired: '金额不能为空',
+        amountFormat: '金额格式错误，如3.00',
+        consumptionRequired: '用量不能为空',
+        consumptionFormat: '用量格式错误，如3.00',
+        roomRequired: '房屋必填',
+        feeRequired: '费用必填',
+        startTimeRequired: '开始时间不能为空',
+        endTimeRequired: '结束时间不能为空',
+        startBeforeEnd: '开始时间必须小于结束时间',
+        endAfterStart: '结束时间必须大于开始时间',
+        invalidConfig: '未选择收费项目或者收费项目公式错误',
+        amountTooSmall: '输入金额太小'
+      },
+      successMessage: '保存成功'
+    },
+    addProxyFeeDemo: {
+      openModal: '打开按量缴费弹窗',
+      successMessage: '保存成功'
+    }
+  }
+}
 \ No newline at end of file
+export const messages = {
+  en: {
+    batchPayFeeOrder: {
+      title: 'Batch Payment',
+      feeType: 'Fee Type',
+      feeItem: 'Fee Item', 
+      feeFlag: 'Fee Flag',
+      payerObj: 'Payer Object',
+      receivablePeriod: 'Receivable Period',
+      receivable: 'Receivable/Owed',
+      paymentCycle: 'Payment Cycle',
+      actualAmount: 'Actual Amount',
+      remark: 'Remark',
+      month: 'months',
+      enterActualAmount: 'Enter actual amount',
+      enterRemark: 'Enter remark',
+      scanPay: 'Scan Payment',
+      submitPay: 'Submit Payment'
+    },
+    payFeeUserAccount: {
+      title: 'Account Information',
+      accountType: 'Account Type',
+      accountName: 'Account Name',
+      accountAmount: 'Account Amount',
+      operation: 'Operation',
+      preSave: 'Pre-save',
+      yuan: 'yuan'
+    },
+    payFeeDeposit: {
+      title: 'Deposit Information',
+      payerObj: 'Payer Object',
+      feeItem: 'Fee Item',
+      timePeriod: 'Time Period',
+      amount: 'Amount',
+      payTime: 'Payment Time',
+      refund: 'Refund Deposit'
+    },
+    refundDepositFee: {
+      title: 'Confirm Operation',
+      confirmText: 'After the deposit is refunded, it will be automatically deposited into the account. You can choose to pay from the account. If you refund cash to the owner, please go to the business homepage to refund the deposit!'
+    },
+    batchPayConfirm: {
+      title: 'Payment Confirmation',
+      amount: 'Amount:',
+      accountAmount: 'Account Amount:',
+      paymentMethod: 'Payment Method:',
+      selectPaymentMethod: 'Please select payment method',
+      scanCodeTip: 'Please scan with scanner',
+      confirmPay: 'Confirm Payment',
+      payResult: 'Payment Result',
+      paySuccess: 'Payment Successful',
+      mergePrint: 'Merge Print',
+      printReceipt: 'Print Receipt',
+      yuan: 'yuan'
+    },
+    batchFeeCycle: {
+      paymentCycle: 'Payment Cycle',
+      selectCycleTip: 'Please select payment cycle',
+      default: 'Default',
+      customCycle: 'Custom Cycle',
+      customAmount: 'Custom Amount',
+      customEndTime: 'Custom End Time',
+      actualCycle: 'Actual Cycle',
+      enterActualCycle: 'Enter actual cycle',
+      endTime: 'End Time',
+      selectEndTime: 'Select end time',
+      enterCustomAmount: 'Enter custom amount'
+    }
+  },
+  zh: {
+    batchPayFeeOrder: {
+      title: '批量缴费',
+      feeType: '费用类型',
+      feeItem: '费用项目',
+      feeFlag: '费用标识',
+      payerObj: '收费对象',
+      receivablePeriod: '应收时间段',
+      receivable: '应收/欠费',
+      paymentCycle: '缴费周期',
+      actualAmount: '实收',
+      remark: '备注',
+      month: '个月',
+      enterActualAmount: '请输入实际金额',
+      enterRemark: '请输入备注',
+      scanPay: '扫码收费',
+      submitPay: '提交收费'
+    },
+    payFeeUserAccount: {
+      title: '账户信息',
+      accountType: '账户类型',
+      accountName: '账户名',
+      accountAmount: '账户金额',
+      operation: '操作',
+      preSave: '预存',
+      yuan: '元'
+    },
+    payFeeDeposit: {
+      title: '押金信息',
+      payerObj: '收费对象',
+      feeItem: '费用项',
+      timePeriod: '时间段',
+      amount: '金额',
+      payTime: '缴费时间',
+      refund: '退押金'
+    },
+    refundDepositFee: {
+      title: '请确认您的操作!',
+      confirmText: '押金退款后自动存到账户中，您可以从账户中选择缴费，如果退现金给业主，请到业务首页面退押金！'
+    },
+    batchPayConfirm: {
+      title: '收费确认',
+      amount: '金额：',
+      accountAmount: '账户金额：',
+      paymentMethod: '支付方式：',
+      selectPaymentMethod: '必填，请选择支付方式',
+      scanCodeTip: '请用扫码枪扫码',
+      confirmPay: '确定收费',
+      payResult: '缴费提示',
+      paySuccess: '缴费成功',
+      mergePrint: '合并打印',
+      printReceipt: '打印收据',
+      yuan: '元'
+    },
+    batchFeeCycle: {
+      paymentCycle: '缴费周期',
+      selectCycleTip: '必填，请选择缴费周期',
+      default: '默认',
+      customCycle: '自定义周期',
+      customAmount: '自定义金额',
+      customEndTime: '自定义结束时间',
+      actualCycle: '实际周期',
+      enterActualCycle: '请输入实际周期',
+      endTime: '缴费结束时间',
+      selectEndTime: '缴费结束时间',
+      enterCustomAmount: '请输入自定义金额'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="batch-pay-fee-order-container">
+    <el-row :gutter="20">
+      <el-col :span="4">
+        <el-card class="payer-object-card">
+          <div class="card-title">收费对象</div>
+          <div class="checkbox-list">
+            <el-checkbox-group v-model="batchPayFeeOrderInfo.payerObjNames" @change="_chanagePayerObjName">
+              <el-checkbox v-for="(item, index) in batchPayFeeOrderInfo.payObjs" :key="index" :label="item"
+                class="checkbox-item">{{ item }}</el-checkbox>
+            </el-checkbox-group>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="20">
+        <el-card>
+          <div slot="header" class="flex justify-between">
+            <span>{{ $t('batchPayFeeOrder.title') }}</span>
+            <el-button type="primary" size="small" class="float-right" @click="_goBack">{{ $t('common.back')
+            }}</el-button>
+          </div>
+
+          <el-table :data="batchPayFeeOrderInfo.batchFees" border style="width: 100%" v-loading="loading">
+            <el-table-column type="selection" width="55" align="center"></el-table-column>
+            <el-table-column prop="feeTypeCdName" :label="$t('batchPayFeeOrder.feeType')"
+              align="center"></el-table-column>
+            <el-table-column prop="feeName" :label="$t('batchPayFeeOrder.feeItem')" align="center"></el-table-column>
+            <el-table-column prop="feeFlagName" :label="$t('batchPayFeeOrder.feeFlag')"
+              align="center"></el-table-column>
+            <el-table-column :label="$t('batchPayFeeOrder.payerObj')" align="center">
+              <template slot-scope="scope">
+                {{ _getBatchPayFeeRoomName(scope.row) }}
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('batchPayFeeOrder.receivablePeriod')" align="center" width="180">
+              <template slot-scope="scope">
+                <div>{{ _getEndTime(scope.row) }}</div>
+                <div>{{ _getDeadlineTime(scope.row) }}</div>
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('batchPayFeeOrder.receivable')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.receivableAmount }}/{{ scope.row.amountOwed }}
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('batchPayFeeOrder.paymentCycle')" align="center" width="150">
+              <template slot-scope="scope">
+                <div v-if="scope.row.feeFlag != '2006012'">
+                  <div v-if="scope.row.tempCycle == '-102'" class="cycle-text">周期：{{ scope.row.cycles }}个月</div>
+                  <div v-else-if="scope.row.tempCycle == '-101'" class="custom-amount">
+                    自定义金额<br>{{ scope.row.receivedAmount }}</div>
+                  <div v-else-if="scope.row.tempCycle == '-103'" class="custom-end-time">
+                    结束时间<br>{{ scope.row.custEndTime }}</div>
+                  <el-select v-else v-model="scope.row.cycles" @change="_changeMonth(scope.row.cycles, scope.row)"
+                    style="width:100%">
+                    <el-option v-for="item in _getBatchPaymentCycles(scope.row)" :key="item"
+                      :label="`${item}${$t('batchPayFeeOrder.month')}`" :value="item"></el-option>
+                  </el-select>
+                  <el-button type="text" icon="el-icon-setting" @click="_settingsFeeCycle(scope.row)"></el-button>
+                </div>
+                <div v-else>-</div>
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('batchPayFeeOrder.actualAmount')" align="center" width="150">
+              <template slot-scope="scope">
+                <el-input v-if="scope.row.receivedAmountSwitch == '1'" v-model="scope.row.receivedAmount"
+                  :placeholder="$t('batchPayFeeOrder.enterActualAmount')" @change="_doComputeTotalFee"></el-input>
+                <span v-else>{{ scope.row.receivedAmount }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('batchPayFeeOrder.remark')" align="center" width="200">
+              <template slot-scope="scope">
+                <el-input v-model="scope.row.remark" :placeholder="$t('batchPayFeeOrder.enterRemark')"></el-input>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+        <div class="margin-top">
+          <pay-fee-user-account ref="payFeeUserAccount"></pay-fee-user-account>
+        </div>
+        <pay-fee-deposit ref="payFeeDeposit"></pay-fee-deposit>
+
+        <el-row class="footer-row text-left">
+          <el-col :span="16">
+            <div class="tips">
+              <p>温馨提示：批量缴费不支持优惠折扣和优惠券抵扣功能，如需要请到缴费页面缴费</p>
+              <p><b>缴费金额：缴费金额等于所有实收</b></p>
+            </div>
+          </el-col>
+          <el-col :span="4">
+            <div class="total-amount">
+              缴费金额：<span class="amount">{{ batchPayFeeOrderInfo.feePrices }}元</span>
+            </div>
+          </el-col>
+          <el-col :span="4" class="text-right">
+            <el-button type="success" size="medium" @click="_openPayFee('qrCode')">{{ $t('batchPayFeeOrder.scanPay')
+            }}</el-button>
+            <el-button type="primary" size="medium" @click="_openPayFee('common')">{{ $t('batchPayFeeOrder.submitPay')
+            }}</el-button>
+          </el-col>
+        </el-row>
+
+      </el-col>
+    </el-row>
+
+    <batch-pay-confirm ref="batchPayConfirm"></batch-pay-confirm>
+    <batch-fee-cycle ref="batchFeeCycle"></batch-fee-cycle>
+  </div>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import PayFeeUserAccount from '@/components/fee/payFeeUserAccount'
+import PayFeeDeposit from '@/components/fee/payFeeDeposit'
+import BatchPayConfirm from '@/components/fee/batchPayConfirm'
+import BatchFeeCycle from '@/components/fee/batchFeeCycle'
+import { listFee, listFeeObj } from '@/api/fee/batchPayFeeOrderApi'
+import {dateFormat,dateAdd} from '@/utils/dateUtil'
+
+export default {
+  name: 'BatchPayFeeOrderList',
+  components: {
+    PayFeeUserAccount,
+    PayFeeDeposit,
+    BatchPayConfirm,
+    BatchFeeCycle
+  },
+  data() {
+    return {
+      loading: false,
+      batchPayFeeOrderInfo: {
+        batchFees: [],
+        allBatchFees: [],
+        selectPayFeeIds: [],
+        feePrices: 0.00,
+        communityId: '',
+        ownerId: '',
+        payerObjType: '',
+        remark: '',
+        payerObjNames: [],
+        payObjs: [],
+        accountAmount: 0.0,
+        acctId: ''
+      }
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this._initData()
+  },
+  methods: {
+    async _initData() {
+      const ownerId = this.$route.query.ownerId
+      const payerObjType = this.$route.query.payerObjType
+
+      if (!ownerId) {
+        this.$message.error('非法操作')
+        this.$router.go(-1)
+        return
+      }
+
+      this.batchPayFeeOrderInfo.ownerId = ownerId
+      this.batchPayFeeOrderInfo.payerObjType = payerObjType
+
+      await this._loadBatchFees()
+
+      this.$refs.payFeeUserAccount._listUserAccount(1, 20)
+      this.$refs.payFeeDeposit._listFeeDeposit(1, 20)
+    },
+
+    async _loadBatchFees() {
+      this.loading = true
+      try {
+        const params = {
+          page: 1,
+          row: 500,
+          communityId: this.communityId,
+          ownerId: this.batchPayFeeOrderInfo.ownerId,
+          payerObjType: this.batchPayFeeOrderInfo.payerObjType,
+          state: '2008001'
+        }
+
+        const res = await listFee(params)
+     
+        let _batchFees = []
+        let _selectPayFeeIds = []
+
+        res.fees.sort(this._batchRoomFeeCompare).forEach(feeItem => {
+          _batchFees.push({
+            ...feeItem,
+            cycles: feeItem.paymentCycle,
+            receivableAmount: feeItem.feeTotalPrice,
+            receivedAmount: feeItem.feeTotalPrice,
+            tempCycle: '-100'
+          })
+          _selectPayFeeIds.push(feeItem.feeId)
+        })
+
+        this.batchPayFeeOrderInfo = {
+          ...this.batchPayFeeOrderInfo,
+          allBatchFees: _batchFees,
+          selectPayFeeIds: _selectPayFeeIds,
+          batchFees: _batchFees
+        }
+
+        this._pushPayObjs()
+        this._doComputeTotalFee()
+      } catch (error) {
+        console.error('请求失败:', error)
+      } finally {
+        this.loading = false
+      }
+    },
+
+    _batchRoomFeeCompare(a, b) {
+      if (a.payerObjName < b.payerObjName) return -1
+      if (a.payerObjName > b.payerObjName) return 1
+      return 0
+    },
+
+    _pushPayObjs() {
+      const _allBatchFees = this.batchPayFeeOrderInfo.allBatchFees
+      const _payObjs = []
+      const _payerObjNames = []
+
+      _allBatchFees.forEach(fee => {
+        if (!fee.feeAttrs) return
+
+        let _payerObjName = ''
+        fee.feeAttrs.forEach(item => {
+          if (item.specCd === '390012') {
+            _payerObjName = item.value
+          }
+        })
+
+        if (_payerObjName && !this._hasPayObjsIn(_payerObjName, _payObjs)) {
+          _payObjs.push(_payerObjName)
+          _payerObjNames.push(_payerObjName)
+        }
+      })
+
+      this.batchPayFeeOrderInfo.payObjs = _payObjs
+      this.batchPayFeeOrderInfo.payerObjNames = _payerObjNames
+    },
+
+    _hasPayObjsIn(payerObjName, payObjs) {
+      return payObjs.includes(payerObjName)
+    },
+
+    _hasPayObjNamesIn(payerObjName) {
+      return this.batchPayFeeOrderInfo.payerObjNames.includes(payerObjName)
+    },
+
+    _chanagePayerObjName() {
+      const _allBatchFees = this.batchPayFeeOrderInfo.allBatchFees
+      const _batchFees = []
+
+      _allBatchFees.forEach(fee => {
+        let _payerObjName = ''
+        if (fee.feeAttrs) {
+          fee.feeAttrs.forEach(item => {
+            if (item.specCd === '390012') {
+              _payerObjName = item.value
+            }
+          })
+        }
+
+        if (_payerObjName && this._hasPayObjNamesIn(_payerObjName)) {
+          _batchFees.push(fee)
+        }
+      })
+
+      this.batchPayFeeOrderInfo.batchFees = _batchFees
+      this._doComputeTotalFee()
+    },
+
+    _openPayFee(payType) {
+      if (this.batchPayFeeOrderInfo.selectPayFeeIds.length <= 0) {
+        this.$message.warning('未选择费用')
+        return
+      }
+
+      const _payerObjName = this.batchPayFeeOrderInfo.payerObjNames.join(',')
+      const params = {
+        fees: this._getPayFees(),
+        payType: payType,
+        feePrices: this.batchPayFeeOrderInfo.feePrices,
+        payerObjName: _payerObjName,
+        acctId: this.batchPayFeeOrderInfo.acctId,
+        accountAmount: this.batchPayFeeOrderInfo.accountAmount
+      }
+
+      this.$refs.batchPayConfirm.open(params)
+    },
+
+    _getPayFees() {
+      const _selectPayFeeIds = this.batchPayFeeOrderInfo.selectPayFeeIds
+      const _batchFees = this.batchPayFeeOrderInfo.batchFees
+      const _fees = []
+
+      _selectPayFeeIds.forEach(id => {
+        _batchFees.forEach(fee => {
+          if (id === fee.feeId) {
+            _fees.push(fee)
+          }
+        })
+      })
+
+      return _fees
+    },
+
+    _goBack() {
+      this.$router.go(-1)
+    },
+
+    _getDeadlineTime(fee) {
+      if (fee.amountOwed === 0 && fee.endTime === fee.deadlineTime) return "-"
+      if (fee.state === '2009001') return "-"
+      return dateFormat(fee.deadlineTime)
+    },
+
+    _getEndTime(fee) {
+      if (fee.state === '2009001') return "-"
+      return dateFormat(fee.endTime)
+    },
+
+    _getBatchPayFeeRoomName(fee) {
+      if (!fee.feeAttrs) return ""
+
+      let _feeName = ''
+      fee.feeAttrs.forEach(item => {
+        if (item.specCd === '390012') {
+          _feeName = item.value
+        }
+      })
+
+      return _feeName
+    },
+
+    _getBatchPaymentCycles(fee) {
+      const paymentCycles = []
+      for (let i = 1; i < 13; i++) {
+        paymentCycles.push(i * parseFloat(fee.paymentCycle))
+      }
+      return paymentCycles
+    },
+
+    _doComputeTotalFee() {
+      const _selectPayFeeIds = this.batchPayFeeOrderInfo.selectPayFeeIds
+      const _batchFees = this.batchPayFeeOrderInfo.batchFees
+      const _accountAmount = this.batchPayFeeOrderInfo.accountAmount
+
+      let _totalFee = 0
+
+      _selectPayFeeIds.forEach(id => {
+        _batchFees.forEach(fee => {
+          if (id === fee.feeId && fee.receivedAmount) {
+            _totalFee += parseFloat(fee.receivedAmount)
+          }
+        })
+      })
+
+      if (_accountAmount) {
+        _totalFee = _totalFee - parseFloat(_accountAmount)
+      }
+
+      this.batchPayFeeOrderInfo.feePrices = Math.max(0, _totalFee).toFixed(2)
+    },
+
+    async _changeMonth(cycles, fee) {
+      if (!cycles) {
+        cycles = fee.cycles
+      }
+
+      if (fee.tempCycle === '-101') {
+        this._doComputeTotalFee()
+        return
+      }
+
+      try {
+        const params = {
+          communityId: this.communityId,
+          feeId: fee.feeId,
+          page: 1,
+          row: 1,
+          cycle: cycles
+        }
+
+        if (fee.tempCycle === '-103') {
+          params.custEndTime = dateAdd(fee.custEndTime)
+        }
+
+        const res = await listFeeObj(params)
+        if (res.code === 0) {
+          fee.receivableAmount = res.data.feeTotalPrice
+          fee.receivedAmount = fee.receivableAmount
+          this._doComputeTotalFee()
+        }
+      } catch (error) {
+        console.error('请求失败:', error)
+      }
+    },
+
+    _settingsFeeCycle(batchFee) {
+      this.$refs.batchFeeCycle.open(batchFee)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.batch-pay-fee-order-container {
+  padding: 20px;
+
+  .payer-object-card {
+    height: 100%;
+
+    .card-title {
+      padding: 10px;
+      font-weight: bold;
+    }
+
+    .checkbox-list {
+      padding: 10px;
+
+      .checkbox-item {
+        display: block;
+        margin: 5px 0;
+      }
+    }
+  }
+
+  .footer-row {
+    margin-top: 20px;
+    padding: 20px;
+    background: #f5f7fa;
+    border-radius: 4px;
+
+    .tips {
+      color: #666;
+      line-height: 1.6;
+    }
+
+    .total-amount {
+      font-size: 16px;
+
+      .amount {
+        font-size: 30px;
+        color: #f56c6c;
+        margin-left: 5px;
+      }
+    }
+  }
+
+  .cycle-text,
+  .custom-amount,
+  .custom-end-time {
+    line-height: 1.5;
+    padding: 5px 0;
+  }
+}
+</style>
 \ No newline at end of file
@@ -6,46 +6,22 @@
       </div>
       <el-row :gutter="20">
         <el-col :span="6">
-          <el-select 
-            v-model="searchForm.payObjType" 
-            :placeholder="$t('payFeeAuditManage.selectPayObj')"
-            style="width:100%"
-          >
-            <el-option 
-              v-for="item in payObjTypes" 
-              :key="item.statusCd" 
-              :label="item.name" 
-              :value="item.statusCd"
-            />
+          <el-select v-model="searchForm.payObjType" :placeholder="$t('payFeeAuditManage.selectPayObj')"
+            style="width:100%">
+            <el-option v-for="item in payObjTypes" :key="item.statusCd" :label="item.name" :value="item.statusCd" />
           </el-select>
         </el-col>
         <el-col :span="6">
-          <el-select 
-            v-model="searchForm.state" 
-            :placeholder="$t('payFeeAuditManage.selectStatus')"
-            style="width:100%"
-          >
-            <el-option 
-              :label="$t('payFeeAuditManage.pendingReview')" 
-              value="1010"
-            />
-            <el-option 
-              :label="$t('payFeeAuditManage.approved')" 
-              value="2020"
-            />
-            <el-option 
-              :label="$t('payFeeAuditManage.rejected')" 
-              value="3030"
-            />
+          <el-select v-model="searchForm.state" :placeholder="$t('payFeeAuditManage.selectStatus')" style="width:100%">
+            <el-option :label="$t('payFeeAuditManage.pendingReview')" value="1010" />
+            <el-option :label="$t('payFeeAuditManage.approved')" value="2020" />
+            <el-option :label="$t('payFeeAuditManage.rejected')" value="3030" />
           </el-select>
         </el-col>
         <el-col :span="6">
-          <el-input
-            v-model="searchForm.payerObjId"
-            :placeholder="searchForm.payObjType === '666' 
-              ? $t('payFeeAuditManage.inputPlateNumber') 
-              : $t('payFeeAuditManage.inputRoomInfo')"
-          />
+          <el-input v-model="searchForm.payerObjId" :placeholder="searchForm.payObjType === '666'
+            ? $t('payFeeAuditManage.inputPlateNumber')
+            : $t('payFeeAuditManage.inputRoomInfo')" />
         </el-col>
         <el-col :span="6">
           <el-button type="primary" @click="handleSearch">
@@ -63,123 +39,46 @@
     <el-card class="table-card">
       <div slot="header" class="flex justify-between">
         <span>{{ $t('payFeeAuditManage.tableTitle') }}</span>
-        <el-button 
-          type="primary" 
-          size="small" 
-          style="float:right" 
-          @click="handleBatchAudit"
-        >
+        <el-button type="primary" size="small" style="float:right" @click="handleBatchAudit">
           <i class="el-icon-plus"></i>
           {{ $t('payFeeAuditManage.batchAudit') }}
         </el-button>
       </div>
-      
-      <el-table 
-        :data="tableData" 
-        border 
-        style="width:100%"
-        @selection-change="handleSelectionChange"
-      >
+
+      <el-table :data="tableData" border style="width:100%" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column 
-          prop="payerObjName" 
-          :label="$t('payFeeAuditManage.house')" 
-          align="center"
-        />
-        <el-table-column 
-          prop="feeName" 
-          :label="$t('payFeeAuditManage.feeItem')" 
-          align="center"
-        />
-        <el-table-column 
-          prop="cycles" 
-          :label="$t('payFeeAuditManage.payCycle')" 
-          align="center"
-        >
+        <el-table-column prop="payerObjName" :label="$t('payFeeAuditManage.house')" align="center" />
+        <el-table-column prop="feeName" :label="$t('payFeeAuditManage.feeItem')" align="center" />
+        <el-table-column prop="cycles" :label="$t('payFeeAuditManage.payCycle')" align="center">
           <template slot-scope="scope">
             {{ scope.row.cycles }} {{ $t('payFeeAuditManage.month') }}
           </template>
         </el-table-column>
-        <el-table-column 
-          prop="startTime" 
-          :label="$t('payFeeAuditManage.startTime')" 
-          align="center"
-        />
-        <el-table-column 
-          prop="endTime" 
-          :label="$t('payFeeAuditManage.endTime')" 
-          align="center"
-        />
-        <el-table-column 
-          prop="receivableAmount" 
-          :label="$t('payFeeAuditManage.receivableAmount')" 
-          align="center"
-        />
-        <el-table-column 
-          prop="receivedAmount" 
-          :label="$t('payFeeAuditManage.receivedAmount')" 
-          align="center"
-        />
-        <el-table-column 
-          prop="userName" 
-          :label="$t('payFeeAuditManage.operator')" 
-          align="center"
-        />
-        <el-table-column 
-          prop="createTime" 
-          :label="$t('payFeeAuditManage.payTime')" 
-          align="center"
-        />
-        <el-table-column 
-          prop="state" 
-          :label="$t('payFeeAuditManage.auditStatus')" 
-          align="center"
-        >
+        <el-table-column prop="startTime" :label="$t('payFeeAuditManage.startTime')" align="center" />
+        <el-table-column prop="endTime" :label="$t('payFeeAuditManage.endTime')" align="center" />
+        <el-table-column prop="receivableAmount" :label="$t('payFeeAuditManage.receivableAmount')" align="center" />
+        <el-table-column prop="receivedAmount" :label="$t('payFeeAuditManage.receivedAmount')" align="center" />
+        <el-table-column prop="userName" :label="$t('payFeeAuditManage.operator')" align="center" />
+        <el-table-column prop="createTime" :label="$t('payFeeAuditManage.payTime')" align="center" />
+        <el-table-column prop="state" :label="$t('payFeeAuditManage.auditStatus')" align="center">
           <template slot-scope="scope">
-            <el-tag 
-              :type="getStatusTagType(scope.row.state)"
-            >
+            <el-tag :type="getStatusTagType(scope.row.state)">
               {{ getStatusText(scope.row.state) }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column 
-          prop="message" 
-          :label="$t('payFeeAuditManage.auditRemark')" 
-          align="center"
-        />
-        <el-table-column 
-          prop="remark" 
-          :label="$t('payFeeAuditManage.payRemark')" 
-          align="center"
-        />
-        <el-table-column 
-          :label="$t('common.operation')" 
-          align="center" 
-          width="200"
-        >
+        <el-table-column prop="message" :label="$t('payFeeAuditManage.auditRemark')" align="center" />
+        <el-table-column prop="remark" :label="$t('payFeeAuditManage.payRemark')" align="center" />
+        <el-table-column :label="$t('common.operation')" align="center" width="200">
           <template slot-scope="scope">
-            <el-button 
-              type="text" 
-              size="small" 
-              @click="handleDetail(scope.row)"
-            >
+            <el-button type="text" size="small" @click="handleDetail(scope.row)">
               {{ $t('common.detail') }}
             </el-button>
-            <el-button 
-              v-if="scope.row.state !== '2020' && scope.row.state !== '3030'"
-              type="text" 
-              size="small" 
-              @click="handleAudit(scope.row)"
-            >
+            <el-button v-if="scope.row.state !== '2020' && scope.row.state !== '3030'" type="text" size="small"
+              @click="handleAudit(scope.row)">
               {{ $t('payFeeAuditManage.auditFee') }}
             </el-button>
-            <el-button 
-              v-if="scope.row.state === '3030'"
-              type="text" 
-              size="small" 
-              @click="handleRefund(scope.row)"
-            >
+            <el-button v-if="scope.row.state === '3030'" type="text" size="small" @click="handleRefund(scope.row)">
               {{ $t('payFeeAuditManage.refund') }}
             </el-button>
           </template>
@@ -190,15 +89,9 @@
         <div class="tip-text">
           {{ $t('payFeeAuditManage.auditTip') }}
         </div>
-        <el-pagination
-          :current-page="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-pagination :current-page="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" />
       </div>
     </el-card>
@@ -316,8 +209,8 @@ export default {
         const params = {
           state: auditInfo.state === '1100' ? '2020' : '3030',
           message: auditInfo.remark,
-          feeDetailId: this.currentRow 
-            ? this.currentRow.detailId 
+          feeDetailId: this.currentRow
+            ? this.currentRow.detailId
             : this.multipleSelection.map(item => item.detailId).join(','),
           communityId: this.searchForm.communityId
         }
@@ -332,14 +225,14 @@ export default {
       this.getList()
     },
     getStatusTagType(state) {
-      switch(state) {
+      switch (state) {
         case '2020': return 'success'
         case '3030': return 'danger'
         default: return 'info'
       }
     },
     getStatusText(state) {
-      switch(state) {
+      switch (state) {
         case '2020': return this.$t('payFeeAuditManage.approved')
         case '3030': return this.$t('payFeeAuditManage.rejected')
         default: return this.$t('payFeeAuditManage.pendingReview')
@@ -352,17 +245,17 @@ export default {
 <style lang="scss" scoped>
 .pay-fee-audit-manage-container {
   padding: 20px;
-  
+
   .search-card {
     margin-bottom: 20px;
   }
-  
+
   .pagination-wrapper {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: 20px;
-    
+
     .tip-text {
       color: #999;
       font-size: 12px;
+export const messages = {
+  en: {
+    propertyFee: {
+      title: 'Property Fee Management',
+      feeName: 'Property Fee',
+      paymentHistory: 'Payment History',
+      selectStartTime: 'Select start time',
+      selectEndTime: 'Select end time',
+      searchNow: 'Search Now',
+      reset: 'Reset',
+      paymentId: 'Payment ID',
+      cycle: 'Cycle(Month)',
+      paymentMethod: 'Payment Method',
+      receivableAmount: 'Receivable Amount(Yuan)',
+      receivedAmount: 'Received Amount(Yuan)',
+      paymentTime: 'Payment Time',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      cashier: 'Cashier',
+      status: 'Status',
+      remark: 'Remark',
+      operation: 'Operation',
+      applyRefund: 'Apply Refund',
+      discount: 'Discount',
+      viewInFee: 'view in fee',
+      accountDeduction: 'Account Deduction'
+    },
+    viewMainFee: {
+      feeInfo: 'Fee Information',
+      feeId: 'Fee ID',
+      feeFlag: 'Fee Flag',
+      feeType: 'Fee Type',
+      payerObj: 'Payer Object',
+      feeItem: 'Fee Item',
+      feeStatus: 'Fee Status',
+      startTime: 'Create Time',
+      billingStartTime: 'Billing Start Time',
+      billingEndTime: 'Billing End Time',
+      feeAmount: 'Fee Amount(Yuan)',
+      batch: 'Batch',
+      area: 'Area(㎡)',
+      unitPrice: 'Unit Price(Yuan/㎡)',
+      additionalFee: 'Additional Fee(Yuan)',
+      fixedFee: 'Fixed Fee(Yuan)'
+    },
+    returnPayFee: {
+      fillRefundReason: 'Fill Refund Reason',
+      paymentId: 'Payment',
+      cycle: 'Cycle',
+      receivableAmount: 'Receivable Amount',
+      receivedAmount: 'Received Amount',
+      paymentTime: 'Payment Time',
+      refundReason: 'Refund Reason',
+      enterRefundReason: 'Please enter refund reason',
+      submitRefund: 'Submit Refund Application',
+      refundReasonRequired: 'Refund reason is required',
+      refundReasonTooLong: 'Refund reason cannot exceed 200 characters'
+    },
+    viewFeeDetailDiscount: {
+      discount: 'Discount',
+      discountName: 'Discount Name',
+      discountType: 'Discount Type',
+      ruleName: 'Rule Name',
+      discountRule: 'Discount Rule',
+      discountAmount: 'Discount Amount(Yuan)',
+      breach: 'Breach'
+    }
+  },
+  zh: {
+    propertyFee: {
+      title: '物业费管理',
+      feeName: '物业费',
+      paymentHistory: '缴费历史',
+      selectStartTime: '请选择开始时间',
+      selectEndTime: '请选择结束时间',
+      searchNow: '马上查询',
+      reset: '重置',
+      paymentId: '缴费ID',
+      cycle: '周期(单位:月)',
+      paymentMethod: '缴费方式',
+      receivableAmount: '应收金额(单位:元)',
+      receivedAmount: '实收金额(单位:元)',
+      paymentTime: '缴费时间',
+      startTime: '缴费起始时间',
+      endTime: '缴费结束时间',
+      cashier: '收银员',
+      status: '状态',
+      remark: '备注',
+      operation: '操作',
+      applyRefund: '申请退费',
+      discount: '折扣',
+      viewInFee: '费用中查看',
+      accountDeduction: '账户扣款'
+    },
+    viewMainFee: {
+      feeInfo: '费用信息',
+      feeId: '费用ID',
+      feeFlag: '费用标识',
+      feeType: '费用类型',
+      payerObj: '付费对象',
+      feeItem: '费用项',
+      feeStatus: '费用状态',
+      startTime: '建账时间',
+      billingStartTime: '计费开始时间',
+      billingEndTime: '计费结束时间',
+      feeAmount: '费用金额(单位:元)',
+      batch: '批次',
+      area: '面积(㎡)',
+      unitPrice: '单价(元/㎡)',
+      additionalFee: '附加费(元)',
+      fixedFee: '固定费(元)'
+    },
+    returnPayFee: {
+      fillRefundReason: '填写退费原因',
+      paymentId: '缴费',
+      cycle: '周期',
+      receivableAmount: '应收金额',
+      receivedAmount: '实收金额',
+      paymentTime: '缴费时间',
+      refundReason: '退费原因',
+      enterRefundReason: '请输入退费原因',
+      submitRefund: '提交退费申请',
+      refundReasonRequired: '退费原因不能为空',
+      refundReasonTooLong: '退费原因不能超过200位'
+    },
+    viewFeeDetailDiscount: {
+      discount: '折扣',
+      discountName: '折扣名称',
+      discountType: '折扣类型',
+      ruleName: '规则名称',
+      discountRule: '折扣规则',
+      discountAmount: '折扣金额(元)',
+      breach: '违约'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="property-fee-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>{{ $t('propertyFee.title') }}</span>
+      </div>
+      
+      <!-- 主费用信息组件 -->
+      <view-main-fee 
+        ref="viewMainFee"
+        :fee-name="$t('propertyFee.feeName')"
+        fee-type-cd="888800010001"
+        pay-name="propertyPay"
+      />
+
+      <el-card class="box-card" style="margin-top: 20px;">
+        <div slot="header" class="clearfix">
+          <span>{{ $t('propertyFee.paymentHistory') }}</span>
+        </div>
+        
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-date-picker
+              v-model="feeDetailInfo.startTime"
+              type="date"
+              :placeholder="$t('propertyFee.selectStartTime')"
+              style="width: 100%;"
+            />
+          </el-col>
+          <el-col :span="6">
+            <el-date-picker
+              v-model="feeDetailInfo.endTime"
+              type="date"
+              :placeholder="$t('propertyFee.selectEndTime')"
+              style="width: 100%;"
+            />
+          </el-col>
+          <el-col :span="12">
+            <el-button type="primary" @click="queryFeeDetailMethod()">
+              <i class="el-icon-search"></i>
+              {{ $t('propertyFee.searchNow') }}
+            </el-button>
+            <el-button type="info" @click="resetFeeDetailMethod()" style="margin-left: 20px;">
+              <i class="el-icon-refresh"></i>
+              {{ $t('propertyFee.reset') }}
+            </el-button>
+          </el-col>
+        </el-row>
+
+        <el-table
+          :data="feeDetailInfo.feeDetails"
+          style="width: 100%; margin-top: 20px;"
+          border
+          stripe
+        >
+          <el-table-column prop="detailId" :label="$t('propertyFee.paymentId')" align="center" />
+          <el-table-column prop="cycles" :label="$t('propertyFee.cycle')" align="center" />
+          <el-table-column prop="primeRateName" :label="$t('propertyFee.paymentMethod')" align="center" />
+          <el-table-column :label="$t('propertyFee.receivableAmount')" align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.state=='1500'">{{scope.row.payerObjName}}{{$t('propertyFee.viewInFee')}}</span>
+              <span v-else>{{scope.row.receivableAmount}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('propertyFee.receivedAmount')" align="center">
+            <template slot-scope="scope">
+              {{scope.row.receivedAmount}}<br>
+              <div v-if="scope.row.acctAmount>0">
+                {{$t('propertyFee.accountDeduction')}}: {{scope.row.acctAmount}}<br>
+              </div>
+              <div v-for="(item,index) in scope.row.payFeeDetailDiscountDtoList" :key="index">
+                {{item.discountName}}: {{Math.abs(item.discountPrice)}}<br>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="createTime" :label="$t('propertyFee.paymentTime')" align="center" />
+          <el-table-column :label="$t('propertyFee.startTime')" align="center">
+            <template slot-scope="scope">
+              {{dateFormat(scope.row.startTime)}}
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('propertyFee.endTime')" align="center">
+            <template slot-scope="scope">
+              {{dateFormat(scope.row.endTime)}}
+            </template>
+          </el-table-column>
+          <el-table-column prop="cashierName" :label="$t('propertyFee.cashier')" align="center" />
+          <el-table-column prop="stateName" :label="$t('propertyFee.status')" align="center" />
+          <el-table-column prop="remark" :label="$t('propertyFee.remark')" align="center" />
+          <el-table-column :label="$t('propertyFee.operation')" align="center">
+            <template slot-scope="scope">
+              <el-button-group>
+                <el-button 
+                  v-if="scope.row.state=='1400' || scope.row.state== '1200' || scope.row.state== ''"
+                  size="mini"
+                  @click="_openRefundModel(scope.row)"
+                >
+                  {{ $t('propertyFee.applyRefund') }}
+                </el-button>
+                <el-button 
+                  v-if="scope.row.state!='1500'"
+                  size="mini"
+                  @click="_openFeeDetailDiscountModal(scope.row)"
+                >
+                  {{ $t('propertyFee.discount') }}
+                </el-button>
+              </el-button-group>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination
+          :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"
+          style="margin-top: 20px;"
+        />
+      </el-card>
+
+      <!-- 子组件 -->
+      <return-pay-fee ref="returnPayFee" />
+      <view-fee-detail-discount ref="viewFeeDetailDiscount" />
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { queryFeeDetail } from '@/api/fee/propertyFeeApi'
+import ViewMainFee from '@/components/fee/viewMainFee'
+import ReturnPayFee from '@/components/fee/returnPayFee'
+import ViewFeeDetailDiscount from '@/components/fee/viewFeeDetailDiscount'
+
+export default {
+  name: 'PropertyFeeList',
+  components: {
+    ViewMainFee,
+    ReturnPayFee,
+    ViewFeeDetailDiscount
+  },
+  data() {
+    return {
+      feeDetailInfo: {
+        feeDetails: [],
+        total: 0,
+        records: 1,
+        feeId: '',
+        startTime: '',
+        endTime: ''
+      },
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    dateFormat(date) {
+      if (!date) return ''
+      return this.$moment(date).format('YYYY-MM-DD')
+    },
+    async listFeeDetail(page = 1, row = 10) {
+      try {
+        const params = {
+          page,
+          row,
+          communityId: this.communityId,
+          feeId: this.feeDetailInfo.feeId,
+          startTime: this.feeDetailInfo.startTime,
+          endTime: this.feeDetailInfo.endTime
+        }
+        
+        const { data, total, records } = await queryFeeDetail(params)
+        this.feeDetailInfo.feeDetails = data
+        this.feeDetailInfo.total = total
+        this.feeDetailInfo.records = records
+        this.page.total = records
+      } catch (error) {
+        console.error('获取费用明细失败:', error)
+      }
+    },
+    queryFeeDetailMethod() {
+      this.page.current = 1
+      this.listFeeDetail()
+    },
+    resetFeeDetailMethod() {
+      this.feeDetailInfo.startTime = ''
+      this.feeDetailInfo.endTime = ''
+      this.queryFeeDetailMethod()
+    },
+    _openRefundModel(feeDetail) {
+      this.$refs.returnPayFee.open(feeDetail)
+    },
+    _openFeeDetailDiscountModal(detail) {
+      this.$refs.viewFeeDetailDiscount.open(detail)
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this.listFeeDetail(this.page.current, val)
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this.listFeeDetail(val, this.page.size)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.property-fee-container {
+  padding: 20px;
+  
+  .box-card {
+    margin-bottom: 20px;
+  }
+  
+  .clearfix {
+    font-size: 18px;
+    font-weight: bold;
+  }
+}
+</style>
 \ No newline at end of file
+export const messages = {
+  en: {
+    roomCreateFee: {
+      customTemplate: 'Custom Template',
+      customImport: 'Custom Import',
+      batchCreate: 'Batch Create',
+      batchCollectionLetter: 'Batch Collection Letter',
+      roomNumPlaceholder: 'Room number, e.g. 1-1-1123',
+      ownerNamePlaceholder: 'Please enter owner name',
+      roomFee: 'Room Fee',
+      paymentHistory: 'Payment History',
+      rooms: 'Rooms',
+      owner: 'Owner',
+      callable: 'Callable',
+      receiptReprint: 'Receipt Reprint',
+      meterReadingRecords: 'Meter Reading Records',
+      prepaidAccount: 'Prepaid Account',
+      prepaidReprint: 'Prepaid Reprint',
+      deposit: 'Deposit',
+      billingRules: 'Billing Rules',
+      feeBills: 'Fee Bills'
+    },
+    inputSearchRoom: {
+      noRoomFound: 'No room found'
+    },
+    inputSearchRoomDemo: {
+      searchPlaceholder: 'Search by room number'
+    },
+    inputSearchRoomByOwnerDemo: {
+      searchPlaceholder: 'Search by owner name'
+    },
+    tempImportRoomFee: {
+      title: 'Temporary Fee',
+      feeType: 'Fee Type',
+      selectFeeType: 'Required, please select fee type',
+      feeObj: 'Fee Object',
+      inputFeeObj: 'Required, please fill in fee object',
+      feeName: 'Fee Name',
+      selectFeeItem: 'Required, please select fee item',
+      feeItemDesc: 'Description: Items with formulas are dynamic fee items',
+      inputFeeName: 'Required, please fill in fee name',
+      select: 'Select',
+      amount: 'Amount',
+      inputAmount: 'Required, please fill in amount',
+      startTime: 'Start Time',
+      selectStartTime: 'Required, please select start time',
+      endTime: 'End Time',
+      selectEndTime: 'Required, please select end time',
+      cancel: 'Cancel',
+      submit: 'Submit',
+      feeTypeRequired: 'Fee type cannot be empty',
+      feeNameRequired: 'Fee name cannot be empty',
+      feeObjRequired: 'Fee object cannot be empty',
+      startTimeRequired: 'Start time cannot be empty',
+      endTimeRequired: 'End time cannot be empty',
+      endTimeMustAfterStart: 'End time must be after start time',
+      amountRequired: 'Amount cannot be empty',
+      createSuccess: 'Created successfully',
+      createFailed: 'Creation failed'
+    },
+    tempImportRoomFeeDemo: {
+      openModal: 'Open Temporary Fee Modal'
+    },
+    simplifyRoomFee: {
+      selectFeeType: 'Select Fee Type',
+      selectFeeItem: 'Select Fee Item',
+      selectStatus: 'Select Status',
+      currentRoom: 'Current Room',
+      currentOwner: 'Current Owner',
+      default: 'Default',
+      monthly: 'Monthly',
+      batchPayment: 'Batch Payment',
+      tempFee: 'Temporary Fee',
+      quantityPayment: 'Quantity Payment',
+      waterElectricity: 'Water & Electricity',
+      feePackage: 'Fee Package',
+      createFee: 'Create Fee',
+      arrearsPayment: 'Arrears Payment',
+      feeItem: 'Fee Item',
+      feeFlag: 'Fee Flag',
+      feeType: 'Fee Type',
+      receivableAmount: 'Receivable Amount',
+      accountTime: 'Account Time',
+      receivablePeriod: 'Receivable Period',
+      description: 'Description',
+      status: 'Status',
+      operation: 'Operation',
+      preDegrees: 'Previous Degrees:',
+      curDegrees: 'Current Degrees:',
+      unitPrice: 'Unit Price:',
+      additionalFee: 'Additional Fee:',
+      usage: 'Usage:',
+      algorithm: 'Algorithm:',
+      fixedFee: 'Fixed Fee:',
+      moreOperations: 'More Operations',
+      cancelFee: 'Cancel Fee',
+      manualEnd: 'Manual End',
+      feeChange: 'Fee Change',
+      details: 'Details',
+      chargeYearMonth: 'Charge Year-Month',
+      note1: 'Note: The receivable end time "-" means not yet receivable or fee collection has ended',
+      note2: 'Receivable amount -1 generally indicates an error in the fee item formula setting, please check',
+      arrearsSubtotal: 'Arrears Subtotal:',
+      valid: 'Valid',
+      feeEnd: 'Fee End',
+      payment: 'Payment',
+      paymentHistory: 'Payment History'
+    },
+    simplifyHisFee: {
+      feeItem: 'Fee Item',
+      payerObject: 'Payer Object',
+      receiptNumber: 'Receipt Number',
+      manualGenerate: 'Manual Generate',
+      cycle: 'Cycle(Month)',
+      receivableReceived: 'Receivable/Received(Yuan)',
+      accountDeduction: 'Account Deduction',
+      paymentMethod: 'Payment Method',
+      paymentPeriod: 'Payment Period',
+      paymentTime: 'Payment Time',
+      cashier: 'Cashier',
+      status: 'Status',
+      remark: 'Remark',
+      operation: 'Operation',
+      detail: 'Detail',
+      generateReceipt: 'Generate Receipt',
+      systemGenerate: 'System Generate',
+      custom: 'Custom',
+      receiptNumberRequired: 'Required, please select receipt number generation method',
+      cancel: 'Cancel',
+      generate: 'Generate',
+      viewInFee: 'view in fee'
+    },
+    simplifyOwnerRooms: {
+      batchPay: 'Batch Payment',
+      roomCode: 'Room Code',
+      floor: 'Floor',
+      type: 'Type',
+      area: 'Built/Indoor Area',
+      rent: 'Rent',
+      validity: 'Validity',
+      roomStatus: 'Room Status',
+      roomOweFee: 'Room Owe Fee',
+      updateDaily: 'Update Daily',
+      actions: 'Actions',
+      choose: 'Choose',
+      currentRoom: 'Current Room',
+      subtotalOweFee: 'Subtotal Owe Fee'
+    },
+    carDetailOwner: {
+      ownerFace: 'Owner Face',
+      name: 'Name',
+      gender: 'Gender',
+      male: 'Male',
+      female: 'Female',
+      idCard: 'ID Card',
+      address: 'Address',
+      roomCount: 'Room Count',
+      memberCount: 'Member Count',
+      carCount: 'Car Count',
+      complaintCount: 'Complaint',
+      repairCount: 'Repair',
+      oweFee: 'Owe Fee',
+      contractCount: 'Contract',
+      actions: 'Actions',
+      detail: 'Detail'
+    },
+    writeOweFeeCallable: {
+      title: 'Callable Registration',
+      room: 'Registration Room',
+      roomPlaceholder: 'Required, please fill in the room',
+      fees: 'Callable Fees',
+      remark: 'Callable Remark',
+      remarkPlaceholder: 'Please enter remark',
+      cancel: 'Cancel',
+      submit: 'Submit',
+      success: 'Registration successful'
+    },
+    deleteOweFeeCallable: {
+      title: 'Please confirm your operation!',
+      confirmDelete: 'Confirm to delete owe fee callable',
+      cancel: 'Cancel',
+      confirm: 'Confirm Delete!',
+      success: 'Delete successful'
+    },
+    simplifyCallable: {
+      register: 'Register',
+      callable: 'Callable',
+      callableOrder: 'Callable Order',
+      noRoomSelected: 'No room selected',
+      id: 'ID',
+      ownerName: 'Owner Name',
+      payerObjName: 'Payer Object Name',
+      feeName: 'Fee Name',
+      amount: 'Amount',
+      timePeriod: 'Time Period',
+      callableWay: 'Callable Way',
+      staffName: 'Staff Name',
+      status: 'Status',
+      remark: 'Remark',
+      createTime: 'Create Time',
+      actions: 'Operations',
+      delete: 'Delete'
+    },
+    simplifyFeeReceipt: {
+      selectFeeType: 'Please select fee type',
+      selectCar: 'Please select car',
+      selectContract: 'Please select contract',
+      current: 'Current ',
+      car: 'Car',
+      room: 'Room',
+      all: 'All ',
+      receiptCode: 'Receipt Code',
+      query: 'Query',
+      print: 'Print',
+      mergePrint: 'Merge Print',
+      printSmall: 'Print Small',
+      apply: 'Apply',
+      feeType: 'Fee Type',
+      owner: 'Owner',
+      feeItem: 'Fee Item',
+      timePeriod: 'Time Period',
+      totalAmount: 'Total Amount',
+      payTime: 'Pay Time',
+      receiptId: 'Receipt ID',
+      yuan: 'Yuan',
+      fee: 'Fee',
+      noCar: 'No car',
+      noContract: 'No contract',
+      selectReceipt: 'Please select receipt',
+      contract: 'Contract'
+    },
+    simplifyMeterWaterLog: {
+      selectMeterType: 'Select meter type',
+      addMeterReading: 'Add meter reading',
+      meterType: 'Meter Type',
+      objectName: 'Object Name',
+      previousReading: 'Previous Reading',
+      currentReading: 'Current Reading',
+      previousReadingTime: 'Previous Reading Time',
+      currentReadingTime: 'Current Reading Time',
+      createTime: 'Create Time'
+    },
+    prestoreAccount: {
+      title: 'Prestore',
+      accountType: 'Account Type',
+      selectAccountType: 'Please select account type',
+      ownerPhone: 'Owner Phone',
+      ownerPhonePlaceholder: 'Required, please enter owner phone',
+      ownerName: 'Owner Name',
+      selectOwner: 'Required, please select owner',
+      deductionRoom: 'Deduction Room',
+      selectRoom: 'Required, please select room',
+      prestoreAmount: 'Prestore Amount',
+      prestoreAmountPlaceholder: 'Required, please enter prestore amount',
+      paymentMethod: 'Payment Method',
+      selectPaymentMethod: 'Required, please select payment method',
+      remark: 'Remark',
+      remarkPlaceholder: 'Optional, please enter remark',
+      cancel: 'Cancel',
+      save: 'Save',
+      validateOwner: 'Owner cannot be empty',
+      validateAmount: 'Amount cannot be empty',
+      validateAccountType: 'Please select account type',
+      validateRemark: 'Remark cannot exceed 200 characters',
+      saveSuccess: 'Prestore success',
+      saveFailed: 'Prestore failed'
+    },
+    
+    simplifyRefundDeposit: {
+      chargeObject: 'Charge Object',
+      feeItem: 'Fee Item',
+      timePeriod: 'Time Period',
+      amount: 'Amount',
+      paymentTime: 'Payment Time',
+      status: 'Status',
+      operation: 'Operation',
+      refundDeposit: 'Refund Deposit',
+      detail: 'Detail'
+    },
+    deleteFeeRule: {
+      confirmTitle: 'Please confirm your operation',
+      confirmMessage: 'Confirm to delete the fee rule? When deleting the fee rule, related fees and payment records will also be deleted!',
+      cancel: 'Cancel',
+      confirmDelete: 'Confirm Delete',
+      deleteSuccess: 'Delete success',
+      deleteFailed: 'Delete failed'
+    },
+    editFeeRule: {
+      title: 'Bill Change',
+      maxTime: 'Bill End Time',
+      maxTimePlaceholder: 'Required, please fill in the bill end time',
+      curYearMonth: 'Bill Day',
+      curYearMonthPlaceholder: 'Required, please fill in the bill day',
+      dateError: 'Bill day should be greater than {date}',
+      maxTimeRequired: 'Bill end time is required',
+      curYearMonthRequired: 'Bill day is required'
+    },
+    finishFeeRule: {
+      title: 'Please confirm your operation',
+      confirmMessage: 'End the fee bill, no new bill fees will be generated on the bill day!'
+    },
+    feeDetailFeeRule: {
+      ruleId: 'Rule ID',
+      feeItem: 'Fee Item',
+      feeFlag: 'Fee Flag',
+      createTime: 'Create Time',
+      validPeriod: 'Valid Period',
+      formula: 'Bill Formula',
+      price: 'Price',
+      additionalFee: 'Additional/Fixed Fee',
+      status: 'Status',
+      billDay: 'Bill Day',
+      billCycle: 'Bill Cycle'
+    },
+    feeDetailRuleBill: {
+      billName: 'Bill Name',
+      feeItem: 'Fee Item',
+      receivablePeriod: 'Receivable Period',
+      receivableAmount: 'Receivable Amount',
+      ruleId: 'Rule ID',
+      feeId: 'Fee ID',
+      status: 'Status',
+      description: 'Description',
+      price: 'Price',
+      fixedFee: 'Fixed Fee'
+    },
+    deleteFee: {
+      title: 'Please confirm your operation',
+      confirmMessage: 'Confirm to delete the fee'
+    },
+    editFee: {
+      title: 'Fee Change',
+      startTime: 'Create Time',
+      startTimePlaceholder: 'Required, please fill in the create time',
+      endTime: 'Receivable Start Time',
+      endTimePlaceholder: 'Required, please fill in the receivable start time',
+      maxEndTime: 'Receivable End Time',
+      maxEndTimePlaceholder: 'Required, please fill in the receivable end time',
+      rateCycle: 'Rate Cycle',
+      rateCyclePlaceholder: 'Required, please fill in the rate cycle (months)',
+      rate: 'Rate',
+      ratePlaceholder: 'Required, please fill in the rate',
+      rateStartTime: 'Rate Start Time',
+      rateStartTimePlaceholder: 'Required, please fill in the rate start time',
+      startTimeError: 'Create time must be less than receivable start time',
+      endTimeError: 'Receivable start time must be greater than create time',
+      maxEndTimeError: 'Receivable end time must be greater than create time',
+      rateStartTimeError: 'Rate start time must be greater than create time',
+      startTimeRequired: 'Create time is required',
+      endTimeRequired: 'Receivable start time is required'
+    },
+    roomCreateFeeAdd: {
+      title: 'Create Fee',
+      location: 'Room',
+      locationPlaceholder: 'Required, please fill in the charge scope',
+      feeType: 'Fee Type',
+      feeTypePlaceholder: 'Required, please select fee type',
+      feeItem: 'Fee Item',
+      feeItemPlaceholder: 'Required, please select fee item',
+      amount: 'Amount',
+      amountPlaceholder: 'Required, please fill in the amount',
+      startTime: 'Start Time',
+      startTimePlaceholder: 'Required, please fill in start time',
+      endTime: 'End Time',
+      endTimePlaceholder: 'Required, please fill in end time',
+      rateCycle: 'Rate Cycle',
+      rateCyclePlaceholder: 'Required, please fill in rate cycle (months)',
+      rate: 'Rate',
+      ratePlaceholder: 'Required, please fill in rate',
+      rateStartTime: 'Rate Start Time',
+      rateStartTimePlaceholder: 'Required, please fill in rate start time',
+      validate: {
+        locationRequired: 'Room is required',
+        feeTypeRequired: 'Fee type is required',
+        feeItemRequired: 'Fee item is required',
+        startTimeRequired: 'Start time is required',
+        endTimeRequired: 'End time is required',
+        startBeforeEnd: 'Start time must be before end time',
+        endAfterStart: 'End time must be after start time'
+      },
+      successMessage: 'Fee created successfully'
+    },
+    roomCreateFeeAddDemo: {
+      openModal: 'Open Create Fee Modal',
+      successMessage: 'Fee created successfully'
+    },
+    addProxyFee: {
+      title: 'Pay by Quantity',
+      feeType: 'Fee Type',
+      feeTypePlaceholder: 'Required, please select fee type',
+      feeItem: 'Fee Item',
+      feeItemPlaceholder: 'Required, please select fee item',
+      feeItemTip: 'Note: Display items with formula (usage * unit price + additional fee)',
+      chargeObject: 'Charge Object',
+      chargeObjectPlaceholder: 'Required, please fill in room',
+      consumption: 'Consumption',
+      consumptionPlaceholder: 'Required, please fill in consumption',
+      quantity: 'Quantity',
+      amount: 'Amount',
+      amountPlaceholder: 'Required, please fill in amount',
+      startTime: 'Start Time',
+      startTimePlaceholder: 'Required, please fill in start time',
+      endTime: 'End Time',
+      endTimePlaceholder: 'Required, please fill in end time',
+      waterFee: 'Water Fee',
+      electricityFee: 'Electricity Fee',
+      otherFee: 'Other',
+      validate: {
+        amountRequired: 'Amount is required',
+        amountFormat: 'Invalid amount format, e.g. 3.00',
+        consumptionRequired: 'Consumption is required',
+        consumptionFormat: 'Invalid consumption format, e.g. 3.00',
+        roomRequired: 'Room is required',
+        feeRequired: 'Fee is required',
+        startTimeRequired: 'Start time is required',
+        endTimeRequired: 'End time is required',
+        startBeforeEnd: 'Start time must be before end time',
+        endAfterStart: 'End time must be after start time',
+        invalidConfig: 'Invalid fee item or formula error',
+        amountTooSmall: 'Amount is too small'
+      },
+      successMessage: 'Saved successfully'
+    },
+    addProxyFeeDemo: {
+      openModal: 'Open Pay by Quantity Modal',
+      successMessage: 'Saved successfully'
+    },
+    exportFeeImportExcel: {
+      title: 'Template Export',
+      floor: 'Floor',
+      feeItem: 'Fee Item',
+      all: 'All',
+      successMessage: 'Export successful'
+    },
+    exportFeeImportExcelDemo: {
+      openModal: 'Open Template Export Modal'
+    },
+    doImportCreateFee: {
+      title: 'Custom Create Fee',
+      selectFile: 'Select File',
+      clickUpload: 'Click to upload',
+      fileTip: 'Required, please select data file',
+      validate: {
+        invalidFileType: 'Invalid Excel format',
+        fileTooLarge: 'Excel file size cannot exceed 2MB'
+      },
+      successMessage: 'Import successful'
+    },
+    doImportCreateFeeDemo: {
+      openModal: 'Open Custom Create Fee Modal'
+    },
+    downloadCollectionLetterOrder: {
+      title: 'Batch Collection Letter',
+      confirmExport: 'Confirm to export collection letter',
+      selectFloor: 'Select Floor',
+      floorPlaceholder: 'Required, please select floor'
+    },
+    downloadCollectionLetterOrderDemo: {
+      openModal: 'Open Collection Letter Modal'
+    }
+  },
+  zh: {
+    roomCreateFee: {
+      customTemplate: '自定义模板',
+      customImport: '自定义导入',
+      batchCreate: '批量创建',
+      batchCollectionLetter: '批量催缴单',
+      roomNumPlaceholder: '房屋编号,如1-1-1123',
+      ownerNamePlaceholder: '请填写业主名称',
+      roomFee: '房屋费用',
+      paymentHistory: '缴费历史',
+      rooms: '房屋',
+      owner: '业主',
+      callable: '催缴',
+      receiptReprint: '补打收据',
+      meterReadingRecords: '抄表记录',
+      prepaidAccount: '预存账户',
+      prepaidReprint: '预存补打',
+      deposit: '押金',
+      billingRules: '账单规则',
+      feeBills: '费用账单'
+    },
+    inputSearchRoom: {
+      noRoomFound: '未查询到房屋'
+    },
+    inputSearchRoomDemo: {
+      searchPlaceholder: '按房号搜索'
+    },
+    inputSearchRoomByOwnerDemo: {
+      searchPlaceholder: '按业主姓名搜索'
+    },
+    tempImportRoomFee: {
+      title: '临时收费',
+      feeType: '费用类型',
+      selectFeeType: '必填，请选择费用类型',
+      feeObj: '费用对象',
+      inputFeeObj: '必填，请填写费用对象',
+      feeName: '费用名称',
+      selectFeeItem: '必填，请选择收费项目',
+      feeItemDesc: '说明：显示公式为动态费用的费用项',
+      inputFeeName: '必填，请填写费用名称',
+      select: '选择',
+      amount: '收费金额',
+      inputAmount: '必填，请填写收费金额',
+      startTime: '开始时间',
+      selectStartTime: '必填，请填写开始时间',
+      endTime: '结束时间',
+      selectEndTime: '必填，请填写结束时间',
+      cancel: '取消',
+      submit: '提交',
+      feeTypeRequired: '费用类型不能为空',
+      feeNameRequired: '费用名称不能为空',
+      feeObjRequired: '费用对象不能为空',
+      startTimeRequired: '开始时间不能为空',
+      endTimeRequired: '结束时间不能为空',
+      endTimeMustAfterStart: '结束时间必须大于开始时间',
+      amountRequired: '金额不能为空',
+      createSuccess: '创建成功',
+      createFailed: '创建失败'
+    },
+    tempImportRoomFeeDemo: {
+      openModal: '打开临时收费模态框'
+    },
+    simplifyRoomFee: {
+      selectFeeType: '请选择费用类型',
+      selectFeeItem: '请选择收费项目',
+      selectStatus: '请选择状态',
+      currentRoom: '当前房屋',
+      currentOwner: '当前业主',
+      default: '默认',
+      monthly: '按月',
+      batchPayment: '批量缴费',
+      tempFee: '临时收费',
+      quantityPayment: '按量缴费',
+      waterElectricity: '水电抄表',
+      feePackage: '费用套餐',
+      createFee: '创建费用',
+      arrearsPayment: '欠费缴费',
+      feeItem: '费用项目',
+      feeFlag: '费用标识',
+      feeType: '费用类型',
+      receivableAmount: '应收金额',
+      accountTime: '建账时间',
+      receivablePeriod: '应收时间段',
+      description: '说明',
+      status: '状态',
+      operation: '操作',
+      preDegrees: '上期度数：',
+      curDegrees: '本期度数：',
+      unitPrice: '单价：',
+      additionalFee: '附加费：',
+      usage: '用量：',
+      algorithm: '算法：',
+      fixedFee: '固定费：',
+      moreOperations: '更多操作',
+      cancelFee: '取消费用',
+      manualEnd: '手工结束',
+      feeChange: '费用变更',
+      details: '详情',
+      chargeYearMonth: '收费年月',
+      note1: '注意：应收结束时间 "-" 表示未到应收时间或收费已结束',
+      note2: '应收金额为-1一般为费用项公式设置出错请检查',
+      arrearsSubtotal: '欠费小计：',
+      valid: '有效',
+      feeEnd: '收费结束',
+      payment: '缴费',
+      paymentHistory: '缴费历史'
+    },
+    simplifyHisFee: {
+      feeItem: '费用项',
+      payerObject: '收费对象',
+      receiptNumber: '收据编号',
+      manualGenerate: '手工生成',
+      cycle: '周期(单位:月)',
+      receivableReceived: '应收/实收(单位:元)',
+      accountDeduction: '账户扣款',
+      paymentMethod: '缴费方式',
+      paymentPeriod: '缴费起始段',
+      paymentTime: '缴费时间',
+      cashier: '收银员',
+      status: '状态',
+      remark: '备注',
+      operation: '操作',
+      detail: '详情',
+      generateReceipt: '生成收据',
+      systemGenerate: '系统生成',
+      custom: '自定义',
+      receiptNumberRequired: '必填，请选择收据编号生成方式',
+      cancel: '取消',
+      generate: '生成',
+      viewInFee: '费用中查看'
+    },
+    simplifyOwnerRooms: {
+      batchPay: '批量缴费',
+      roomCode: '房屋编号',
+      floor: '楼层',
+      type: '类型',
+      area: '建筑/室内面积',
+      rent: '租金',
+      validity: '有效期',
+      roomStatus: '房屋状态',
+      roomOweFee: '房屋欠费',
+      updateDaily: '按天更新',
+      actions: '操作',
+      choose: '选择',
+      currentRoom: '当前房屋',
+      subtotalOweFee: '欠费小计'
+    },
+    carDetailOwner: {
+      ownerFace: '业主人脸',
+      name: '姓名',
+      gender: '性别',
+      male: '男',
+      female: '女',
+      idCard: '身份证',
+      address: '家庭住址',
+      roomCount: '房屋数',
+      memberCount: '业主成员',
+      carCount: '车辆数',
+      complaintCount: '投诉',
+      repairCount: '报修',
+      oweFee: '欠费',
+      contractCount: '业主合同',
+      actions: '操作',
+      detail: '详情'
+    },
+    writeOweFeeCallable: {
+      title: '催缴登记',
+      room: '登记房屋',
+      roomPlaceholder: '必填，请填写房屋',
+      fees: '催缴费用',
+      remark: '催缴说明',
+      remarkPlaceholder: '请输入备注',
+      cancel: '取消',
+      submit: '提交',
+      success: '登记成功'
+    },
+    deleteOweFeeCallable: {
+      title: '请确认您的操作!',
+      confirmDelete: '确定删除欠费催缴',
+      cancel: '点错了',
+      confirm: '确认删除!',
+      success: '删除成功'
+    },
+    simplifyCallable: {
+      register: '登记',
+      callable: '催缴',
+      callableOrder: '催缴单',
+      noRoomSelected: '未选择房屋',
+      id: '编号',
+      ownerName: '业主名称',
+      payerObjName: '付费对象名称',
+      feeName: '费用名称',
+      amount: '催缴金额',
+      timePeriod: '欠费时间段',
+      callableWay: '催缴方式',
+      staffName: '催缴人',
+      status: '状态',
+      remark: '说明',
+      createTime: '创建时间',
+      actions: '操作',
+      delete: '删除'
+    },
+    simplifyFeeReceipt: {
+      selectFeeType: '请选择收费类型',
+      selectCar: '请选择车辆',
+      selectContract: '请选择合同',
+      current: '当前',
+      car: '车辆',
+      room: '房屋',
+      all: '全部',
+      receiptCode: '收据编号',
+      query: '查询',
+      print: '打印',
+      mergePrint: '合并打印',
+      printSmall: '打印小票',
+      apply: '申请单',
+      feeType: '费用类型',
+      owner: '业主',
+      feeItem: '费用项目',
+      timePeriod: '收费时间段',
+      totalAmount: '总金额',
+      payTime: '缴费时间',
+      receiptId: '收据ID',
+      yuan: '元',
+      fee: '费',
+      noCar: '没有车位',
+      noContract: '没有合同',
+      selectReceipt: '请选择收据',
+      contract: '合同'
+    },
+    simplifyMeterWaterLog: {
+      selectMeterType: '请选择表类型',
+      addMeterReading: '水电抄表',
+      meterType: '表类型',
+      objectName: '对象名称',
+      previousReading: '上期度数',
+      currentReading: '本期度数',
+      previousReadingTime: '上期读表时间',
+      currentReadingTime: '本期读表时间',
+      createTime: '创建时间'
+    },
+    prestoreAccount: {
+      title: '预存',
+      accountType: '账户类型',
+      selectAccountType: '必填，请选择账户类型',
+      ownerPhone: '业主手机',
+      ownerPhonePlaceholder: '必填，请填写业主手机号',
+      ownerName: '业主名称',
+      selectOwner: '必填，请选择业主',
+      deductionRoom: '扣款房屋',
+      selectRoom: '必填，请选择房屋',
+      prestoreAmount: '预存金额',
+      prestoreAmountPlaceholder: '必填，请填写预存金额',
+      paymentMethod: '支付方式',
+      selectPaymentMethod: '必填，请选择支付方式',
+      remark: '备注',
+      remarkPlaceholder: '可填，请填写备注',
+      cancel: '取消',
+      save: '保存',
+      validateOwner: '业主不能为空',
+      validateAmount: '金额不能为空',
+      validateAccountType: '请选择账户类型',
+      validateRemark: '备注长度不能超过200位',
+      saveSuccess: '预存成功',
+      saveFailed: '预存失败'
+    },
+    
+    simplifyRefundDeposit: {
+      chargeObject: '收费对象',
+      feeItem: '费用项',
+      timePeriod: '时间段',
+      amount: '金额',
+      paymentTime: '缴费时间',
+      status: '状态',
+      operation: '操作',
+      refundDeposit: '退押金',
+      detail: '详情'
+    },
+    deleteFeeRule: {
+      confirmTitle: '请确认您的操作',
+      confirmMessage: '确定删除账单规则，删除账单规则时，相关费用及缴费记录也会被删除！',
+      cancel: '点错了',
+      confirmDelete: '确认删除',
+      deleteSuccess: '删除成功',
+      deleteFailed: '删除失败'
+    },
+    editFeeRule: {
+      title: '账单变更',
+      maxTime: '账单结束时间',
+      maxTimePlaceholder: '必填，请填写账单结束时间',
+      curYearMonth: '账单日',
+      curYearMonthPlaceholder: '必填，请填写账单日',
+      dateError: '账单日应大于{date}',
+      maxTimeRequired: '账单结束时间不能为空',
+      curYearMonthRequired: '账单日不能为空'
+    },
+    finishFeeRule: {
+      title: '请确认您的操作',
+      confirmMessage: '结束费用账单，账单日不在产生新的账单费用！'
+    },
+    feeDetailFeeRule: {
+      ruleId: '规则编号',
+      feeItem: '费用项',
+      feeFlag: '费用标识',
+      createTime: '建账时间',
+      validPeriod: '账单有效期',
+      formula: '账单公式',
+      price: '计费单价',
+      additionalFee: '附加/固定费用',
+      status: '状态',
+      billDay: '账单日',
+      billCycle: '账单周期'
+    },
+    feeDetailRuleBill: {
+      billName: '账单名称',
+      feeItem: '费用项',
+      receivablePeriod: '应收时间段',
+      receivableAmount: '应收金额',
+      ruleId: '规则编号',
+      feeId: '费用编号',
+      status: '状态',
+      description: '说明',
+      price: '单价',
+      fixedFee: '固定费'
+    },
+    deleteFee: {
+      title: '请确认您的操作',
+      confirmMessage: '确定删除费用'
+    },
+    editFee: {
+      title: '费用变更',
+      startTime: '建账时间',
+      startTimePlaceholder: '必填，请填写建账时间',
+      endTime: '应收开始时间',
+      endTimePlaceholder: '必填，请填写应收开始时间',
+      maxEndTime: '应收结束时间',
+      maxEndTimePlaceholder: '必填，请填写应收结束时间',
+      rateCycle: '递增周期',
+      rateCyclePlaceholder: '必填，请填写递增周期,请填写月份',
+      rate: '计费递增率',
+      ratePlaceholder: '必填，请填写递增率',
+      rateStartTime: '递增开始时间',
+      rateStartTimePlaceholder: '必填，请填写递增开始时间',
+      startTimeError: '建账时间必须小于计费起始时间',
+      endTimeError: '计费起始时间必须大于建账时间',
+      maxEndTimeError: '计费结束时间必须大于开始时间',
+      rateStartTimeError: '递增开始时间必须大于开始时间',
+      startTimeRequired: '建账时间不能为空',
+      endTimeRequired: '计费起始时间不能为空'
+    },
+    roomCreateFeeAdd: {
+      title: '创建费用',
+      location: '房屋',
+      locationPlaceholder: '必填，请填写收费范围',
+      feeType: '费用类型',
+      feeTypePlaceholder: '必填，请选择费用类型',
+      feeItem: '收费项目',
+      feeItemPlaceholder: '必填，请选择收费项目',
+      amount: '收费金额',
+      amountPlaceholder: '必填，请填写收费金额',
+      startTime: '计费起始时间',
+      startTimePlaceholder: '必填，请填写计费起始时间',
+      endTime: '计费结束时间',
+      endTimePlaceholder: '必填，请填写计费结束时间',
+      rateCycle: '递增周期',
+      rateCyclePlaceholder: '必填，请填写递增周期,请填写月份',
+      rate: '计费递增率',
+      ratePlaceholder: '必填，请填写递增率',
+      rateStartTime: '递增开始时间',
+      rateStartTimePlaceholder: '必填，请填写递增开始时间',
+      validate: {
+        locationRequired: '收费对象不能为空',
+        feeTypeRequired: '费用类型不能为空',
+        feeItemRequired: '费用项目不能为空',
+        startTimeRequired: '计费起始时间不能为空',
+        endTimeRequired: '计费终止时间不能为空',
+        startBeforeEnd: '计费起始时间必须小于计费终止时间',
+        endAfterStart: '计费终止时间必须大于计费起始时间'
+      },
+      successMessage: '创建收费成功'
+    },
+    roomCreateFeeAddDemo: {
+      openModal: '打开创建费用弹窗',
+      successMessage: '费用创建成功'
+    },
+    addProxyFee: {
+      title: '按量缴费',
+      feeType: '费用类型',
+      feeTypePlaceholder: '必填，请选择费用类型',
+      feeItem: '收费项目',
+      feeItemPlaceholder: '必填，请选择收费项目',
+      feeItemTip: '说明：显示公式为(用量*单价+附加费)的费用项',
+      chargeObject: '收费对象',
+      chargeObjectPlaceholder: '必填，请填写房屋',
+      consumption: '用量',
+      consumptionPlaceholder: '必填，请填写用量',
+      quantity: '个数',
+      amount: '金额',
+      amountPlaceholder: '必填，请填写金额',
+      startTime: '开始时间',
+      startTimePlaceholder: '必填，请填写开始时间',
+      endTime: '结束时间',
+      endTimePlaceholder: '必填，请填写结束时间',
+      waterFee: '水费',
+      electricityFee: '电费',
+      otherFee: '其他',
+      validate: {
+        amountRequired: '金额不能为空',
+        amountFormat: '金额格式错误，如3.00',
+        consumptionRequired: '用量不能为空',
+        consumptionFormat: '用量格式错误，如3.00',
+        roomRequired: '房屋必填',
+        feeRequired: '费用必填',
+        startTimeRequired: '开始时间不能为空',
+        endTimeRequired: '结束时间不能为空',
+        startBeforeEnd: '开始时间必须小于结束时间',
+        endAfterStart: '结束时间必须大于开始时间',
+        invalidConfig: '未选择收费项目或者收费项目公式错误',
+        amountTooSmall: '输入金额太小'
+      },
+      successMessage: '保存成功'
+    },
+    addProxyFeeDemo: {
+      openModal: '打开按量缴费弹窗',
+      successMessage: '保存成功'
+    },
+    exportFeeImportExcel: {
+      title: '模板导出',
+      floor: '楼栋',
+      feeItem: '费用项',
+      all: '全部',
+      successMessage: '导出成功'
+    },
+    exportFeeImportExcelDemo: {
+      openModal: '打开模板导出弹窗'
+    },
+    doImportCreateFee: {
+      title: '自定义创建费用',
+      selectFile: '选择文件',
+      clickUpload: '点击上传',
+      fileTip: '必填，请选择数据文件',
+      validate: {
+        invalidFileType: '不是有效的Excel格式',
+        fileTooLarge: 'Excel文件大小不能超过2M'
+      },
+      successMessage: '导入成功'
+    },
+    doImportCreateFeeDemo: {
+      openModal: '打开自定义创建费用弹窗'
+    },
+    downloadCollectionLetterOrder: {
+      title: '批量催缴单',
+      confirmExport: '确认导出催缴单',
+      selectFloor: '选择楼栋',
+      floorPlaceholder: '必填，请选择楼栋'
+    },
+    downloadCollectionLetterOrderDemo: {
+      openModal: '打开催缴单弹窗'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <el-col :span="4" class="tree-container">
+        <room-tree-div ref="roomTreeDiv" @selectRoom="handleSelectRoom"></room-tree-div>
+      </el-col>
+      <el-col :span="20">
+        <el-card class="box-card">
+          <div slot="header" class="flex justify-between">
+            <span>{{ roomCreateFeeInfo.roomName }}</span>
+            <div class="header-tools">
+              <el-button v-if="hasPrivilege('502022073096990007')" size="small" @click="_openFeeImportExcel">
+                <i class="el-icon-download"></i>
+                {{ $t('roomCreateFee.customTemplate') }}
+              </el-button>
+              <el-button v-if="hasPrivilege('502022073096990007')" size="small" @click="_openDoCreateRoomFee">
+                <i class="el-icon-plus"></i>
+                {{ $t('roomCreateFee.customImport') }}
+              </el-button>
+              <el-button v-if="hasPrivilege('502022073096990007')" size="small" @click="_toBatchCreateFee(null, true)">
+                <i class="el-icon-plus"></i>
+                {{ $t('roomCreateFee.batchCreate') }}
+              </el-button>
+              <el-button size="small" @click="_downloadCollectionLetterOrder">
+                <i class="el-icon-download"></i>
+                {{ $t('roomCreateFee.batchCollectionLetter') }}
+              </el-button>
+            </div>
+          </div>
+
+          <div class="filter-container">
+            <el-row :gutter="20">
+              <el-col :span="6">
+                <el-input v-model="roomCreateFeeInfo.condition.roomNum"
+                  :placeholder="$t('roomCreateFee.roomNumPlaceholder')" clearable
+                  @blur="listRoomInRoomCreateFee"></el-input>
+                <input-search-room ref="inputSearchRoom"></input-search-room>
+              </el-col>
+              <el-col :span="6">
+                <el-input v-model="roomCreateFeeInfo.condition.ownerName"
+                  :placeholder="$t('roomCreateFee.ownerNamePlaceholder')" clearable
+                  @input="_inputRoomByOwner"></el-input>
+                <input-search-room-by-owner ref="inputSearchRoomByOwner"></input-search-room-by-owner>
+              </el-col>
+              <el-col :span="6">
+                <el-button type="primary" size="small" @click="_queryRoomCreateFeeMethod">
+                  {{ $t('common.query') }}
+                </el-button>
+                <el-button size="small" @click="_resetRoomCreateFeeMethod">
+                  {{ $t('common.reset') }}
+                </el-button>
+              </el-col>
+            </el-row>
+          </div>
+
+          <el-tabs v-model="roomCreateFeeInfo._currentTab" @tab-click="changeTab(roomCreateFeeInfo._currentTab)">
+            <el-tab-pane label="房屋费用" name="simplifyRoomFee">
+              <simplify-room-fee v-if="roomCreateFeeInfo._currentTab === 'simplifyRoomFee'"
+                ref="simplifyRoomFee"></simplify-room-fee>
+            </el-tab-pane>
+            <el-tab-pane v-if="roomCreateFeeInfo.ownerId" label="缴费历史" name="simplifyHisFee">
+              <simplify-his-fee v-if="roomCreateFeeInfo._currentTab === 'simplifyHisFee'"
+                ref="simplifyHisFee"></simplify-his-fee>
+            </el-tab-pane>
+            <el-tab-pane v-if="roomCreateFeeInfo.ownerId" label="房屋" name="simplifyOwnerRooms">
+              <simplify-owner-rooms v-if="roomCreateFeeInfo._currentTab === 'simplifyOwnerRooms'"
+                ref="simplifyOwnerRooms"></simplify-owner-rooms>
+            </el-tab-pane>
+            <el-tab-pane v-if="roomCreateFeeInfo.ownerId" label="业主" name="carDetailOwner">
+              <car-detail-owner v-if="roomCreateFeeInfo._currentTab === 'carDetailOwner'"
+                ref="carDetailOwner"></car-detail-owner>
+            </el-tab-pane>
+            <el-tab-pane label="催缴" name="simplifyCallable">
+              <simplify-callable v-if="roomCreateFeeInfo._currentTab === 'simplifyCallable'"
+                ref="simplifyCallable"></simplify-callable>
+            </el-tab-pane>
+            <el-tab-pane v-if="hasPrivilege('502020092373407363')" label="补打收据" name="simplifyFeeReceipt">
+              <simplify-fee-receipt v-if="roomCreateFeeInfo._currentTab === 'simplifyFeeReceipt'"
+                ref="simplifyFeeReceipt"></simplify-fee-receipt>
+            </el-tab-pane>
+            <el-tab-pane label="抄表记录" name="simplifyMeterWaterLog">
+              <simplify-meter-water-log v-if="roomCreateFeeInfo._currentTab === 'simplifyMeterWaterLog'"
+                ref="simplifyMeterWaterLog"></simplify-meter-water-log>
+            </el-tab-pane>
+            <el-tab-pane v-if="roomCreateFeeInfo.ownerId" label="预存账户" name="ownerDetailAccount">
+              <owner-detail-account v-if="roomCreateFeeInfo._currentTab === 'ownerDetailAccount'"
+                ref="ownerDetailAccount"></owner-detail-account>
+            </el-tab-pane>
+            <el-tab-pane v-if="roomCreateFeeInfo.ownerId" label="预存补打" name="ownerDetailAccountReceipt">
+              <owner-detail-account-receipt v-if="roomCreateFeeInfo._currentTab === 'ownerDetailAccountReceipt'"
+                ref="ownerDetailAccountReceipt"></owner-detail-account-receipt>
+            </el-tab-pane>
+            <el-tab-pane label="押金" name="simplifyRefundDeposit">
+              <simplify-refund-deposit v-if="roomCreateFeeInfo._currentTab === 'simplifyRefundDeposit'"
+                ref="simplifyRefundDeposit"></simplify-refund-deposit>
+            </el-tab-pane>
+            <el-tab-pane label="账单规则" name="feeDetailFeeRule">
+              <fee-detail-fee-rule v-if="roomCreateFeeInfo._currentTab === 'feeDetailFeeRule'"
+                ref="feeDetailFeeRule"></fee-detail-fee-rule>
+            </el-tab-pane>
+            <el-tab-pane label="费用账单" name="feeDetailRuleBill">
+              <fee-detail-rule-bill v-if="roomCreateFeeInfo._currentTab === 'feeDetailRuleBill'"
+                ref="feeDetailRuleBill"></fee-detail-rule-bill>
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+
+
+    <room-create-fee-add ref="roomCreateFeeAdd"></room-create-fee-add>
+    <add-meter-water ref="addMeterWater"></add-meter-water>
+    <add-proxy-fee ref="addProxyFee"></add-proxy-fee>
+    <export-fee-import-excel ref="exportFeeImportExcel"></export-fee-import-excel>
+    <do-import-create-fee ref="doImportCreateFee"></do-import-create-fee>
+    <download-collection-letter-order ref="downloadCollectionLetterOrder"></download-collection-letter-order>
+  </div>
+</template>
+
+<script>
+import RoomTreeDiv from '@/components/room/roomTreeDiv'
+import InputSearchRoom from '@/components/fee/inputSearchRoom'
+import InputSearchRoomByOwner from '@/components/fee/inputSearchRoomByOwner'
+import SimplifyRoomFee from '@/components/fee/simplifyRoomFee'
+import SimplifyHisFee from '@/components/fee/simplifyHisFee'
+import SimplifyOwnerRooms from '@/components/fee/simplifyOwnerRooms'
+import CarDetailOwner from '@/components/fee/carDetailOwner'
+import SimplifyCallable from '@/components/fee/simplifyCallable'
+import SimplifyFeeReceipt from '@/components/fee/simplifyFeeReceipt'
+import SimplifyMeterWaterLog from '@/components/fee/simplifyMeterWaterLog'
+import OwnerDetailAccount from '@/components/owner/ownerDetailAccount'
+import OwnerDetailAccountReceipt from '@/components/owner/ownerDetailAccountReceipt'
+import SimplifyRefundDeposit from '@/components/fee/simplifyRefundDeposit'
+import FeeDetailFeeRule from '@/components/fee/feeDetailFeeRule'
+import FeeDetailRuleBill from '@/components/fee/feeDetailRuleBill'
+
+import RoomCreateFeeAdd from '@/components/fee/roomCreateFeeAdd'
+import AddMeterWater from '@/components/fee/addMeterWater'
+import AddProxyFee from '@/components/fee/addProxyFee'
+import ExportFeeImportExcel from '@/components/fee/exportFeeImportExcel'
+import DoImportCreateFee from '@/components/fee/doImportCreateFee'
+import DownloadCollectionLetterOrder from '@/components/fee/downloadCollectionLetterOrder'
+import { getCommunityId } from '@/api/community/communityApi'
+import { queryRooms } from '@/api/fee/roomCreateFeeApi'
+
+export default {
+  name: 'RoomCreateFeeList',
+  components: {
+    RoomTreeDiv,
+    InputSearchRoom,
+    InputSearchRoomByOwner,
+    SimplifyRoomFee,
+    SimplifyHisFee,
+    SimplifyOwnerRooms,
+    CarDetailOwner,
+    SimplifyCallable,
+    SimplifyFeeReceipt,
+    SimplifyMeterWaterLog,
+    OwnerDetailAccount,
+    OwnerDetailAccountReceipt,
+    SimplifyRefundDeposit,
+    FeeDetailFeeRule,
+    FeeDetailRuleBill,
+
+    RoomCreateFeeAdd,
+    AddMeterWater,
+    AddProxyFee,
+    ExportFeeImportExcel,
+    DoImportCreateFee,
+    DownloadCollectionLetterOrder
+  },
+  data() {
+    return {
+      roomCreateFeeInfo: {
+        roomName: '',
+        roomId: '',
+        ownerId: '',
+        ownerName: '',
+        roomType: '',
+        _currentTab: 'simplifyRoomFee',
+        condition: {
+          roomNum: '',
+          ownerName: ''
+        },
+        timer: null
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.initRoomTree()
+  },
+  methods: {
+    initRoomTree() {
+      // this.$refs.roomTreeDiv.initRoomTreeDiv({
+      //   callName: 'roomCreateFee'
+      // })
+    },
+    handleSelectRoom(param) {
+      this.roomCreateFeeInfo.ownerName = ''
+      this.roomCreateFeeInfo.ownerId = ''
+      this.roomCreateFeeInfo.roomId = param.roomId
+      this.roomCreateFeeInfo.roomName = param.roomName
+
+      this.roomCreateFeeInfo.condition.ownerName = ''
+      this.roomCreateFeeInfo.condition.roomNum = ''
+      this.listRoomInRoomCreateFee()
+    },
+    notifyRoomByOwner(room) {
+      this.$set(this.roomCreateFeeInfo, 'ownerName', room.ownerName)
+      this.$set(this.roomCreateFeeInfo, 'ownerId', room.ownerId)
+      this.$set(this.roomCreateFeeInfo, 'roomId', room.roomId)
+      this.$set(
+        this.roomCreateFeeInfo,
+        'roomName',
+        `${room.floorNum}-${room.unitNum}-${room.roomNum}`
+      )
+      this.listRoomInRoomCreateFee()
+    },
+    async listRoomInRoomCreateFee() {
+      const param = {
+        page: 1,
+        row: 1,
+        communityId: this.communityId,
+        roomId: this.roomCreateFeeInfo.roomId
+      }
+
+      if (this.roomCreateFeeInfo.condition.roomNum) {
+        param.flag = '1'
+        param.roomNum = this.roomCreateFeeInfo.condition.roomNum
+        param.roomId = ''
+        this.roomCreateFeeInfo.roomName = ''
+        this.roomCreateFeeInfo.ownerName = ''
+        this.roomCreateFeeInfo.ownerId = ''
+        this.roomCreateFeeInfo.roomId = ''
+      }
+
+      try {
+        const response = await queryRooms(param)
+        const room = response.rooms[0]
+        Object.assign(this.roomCreateFeeInfo, room)
+        this.changeTab('simplifyRoomFee')
+      } catch (error) {
+        console.error('请求失败:', error)
+      }
+    },
+    _inputRoomByOwner() {
+      if (this.roomCreateFeeInfo.timer) {
+        clearTimeout(this.roomCreateFeeInfo.timer)
+      }
+      this.roomCreateFeeInfo.timer = setTimeout(() => {
+        this.$refs.inputSearchRoomByOwner.$emit('searchRoom', {
+          callComponent: 'roomCreateFee',
+          ownerName: this.roomCreateFeeInfo.condition.ownerName
+        })
+      }, 1500)
+    },
+    _queryRoomCreateFeeMethod() {
+      this.listRoomInRoomCreateFee()
+    },
+    _resetRoomCreateFeeMethod() {
+      this.$refs.inputSearchRoom.$emit('close', {})
+      this.$refs.inputSearchRoomByOwner.$emit('close', {})
+      this.roomCreateFeeInfo.roomNum = ''
+      this.roomCreateFeeInfo.ownerName = ''
+      this.roomCreateFeeInfo.ownerId = ''
+      this.roomCreateFeeInfo.condition.ownerName = ''
+      this.roomCreateFeeInfo.condition.roomNum = ''
+      this.changeTab('simplifyRoomFee')
+    },
+    changeTab(tab) {
+      this.roomCreateFeeInfo._currentTab = tab
+      setTimeout(() => {
+        if (this.$refs[tab]) {
+          if(tab === 'ownerDetailAccount' || tab === 'ownerDetailAccountReceipt') {
+            this.$refs[tab].open(this.roomCreateFeeInfo.ownerId, this.roomCreateFeeInfo.ownerName, this.roomCreateFeeInfo.roomId)
+            return;
+          } 
+          this.$refs[tab].open({
+            ownerId: this.roomCreateFeeInfo.ownerId,
+            ownerName: this.roomCreateFeeInfo.ownerName,
+            roomId: this.roomCreateFeeInfo.roomId,
+            roomName: this.roomCreateFeeInfo.roomName
+          })
+        }
+      }, 500)
+    },
+    _roomCreateFeetoSimplifyAcceptance() {
+      const date = new Date()
+      localStorage.setItem('JAVA110_IS_BACK', date.getTime())
+      localStorage.setItem(
+        'simplifyAcceptanceSearch',
+        JSON.stringify({
+          searchType: '1',
+          searchValue: `${this.roomCreateFeeInfo.floorNum}-${this.roomCreateFeeInfo.unitNum}-${this.roomCreateFeeInfo.roomNum}`,
+          searchPlaceholder: '请输入房屋编号 楼栋-单元-房屋 如1-1-1'
+        })
+      )
+      this.$router.push('/pages/property/simplifyAcceptance?tab=业务受理')
+    },
+    _toBatchCreateFee() {
+      this.$router.push('/pages/fee/roomCreatePayFee')
+    },
+    _downloadCollectionLetterOrder() {
+      this.$router.push('/pages/fee/addOweFeeCallable?callableWay=EXCEL')
+    },
+    _downloadRoomCollectionLetterOrder(room) {
+      this.$refs.downloadCollectionLetterOrder.open({
+        roomId: room.roomId
+      })
+    },
+    _openFeeImportExcel() {
+      this.$refs.exportFeeImportExcel.open()
+    },
+    _openDoCreateRoomFee() {
+      this.$refs.doImportCreateFee.open()
+    },
+    _openRoomCreateFeeComboModal() {
+      this.$router.push(
+        `/pages/property/createFeeByCombo?payerObjId=${this.roomCreateFeeInfo.roomId}&payerObjName=${this.roomCreateFeeInfo.roomName}&payerObjType=3333`
+      )
+    },
+  }
+}
+</script>
+
+<style scoped>
+.app-container {
+  padding: 20px;
+}
+  .tree-container {
+    min-height: 450px;
+    overflow-y: auto;
+    background: #fff;
+    padding: 10px;
+    border-radius: 4px;
+  }
+
+.header-tools {
+  float: right;
+}
+
+.filter-container {
+  margin-bottom: 20px;
+}
+</style>
 \ No newline at end of file