房屋收费页面开发完成

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>