diff --git a/src/api/dev/serviceProvideManageApi.js b/src/api/dev/serviceProvideManageApi.js
index 2ac9bae..fefd07c 100644
--- a/src/api/dev/serviceProvideManageApi.js
+++ b/src/api/dev/serviceProvideManageApi.js
@@ -71,4 +71,18 @@ export function getServiceProvideDetail(params) {
       reject(error)
     })
   })
+}
+export function deleteServiceProvide(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/serviceProvide.deleteServiceProvide',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
 }
\ No newline at end of file
diff --git a/src/api/fee/feeDetailApi.js b/src/api/fee/feeDetailApi.js
new file mode 100644
index 0000000..caa0037
--- /dev/null
+++ b/src/api/fee/feeDetailApi.js
@@ -0,0 +1,105 @@
+import request from '@/utils/request'
+
+/**
+ * 获取费用详情
+ * @param {Object} params 查询参数
+ * @returns {Promise} Promise对象
+ */
+export function getFeeDetail(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)
+    })
+  })
+}
+
+/**
+ * 获取缴费记录列表
+ * @param {Object} params 查询参数
+ * @returns {Promise} Promise对象
+ */
+export function getPaymentRecords(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.listPaymentRecords',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+        resolve(res)
+
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 获取按月展示数据
+ * @param {Object} params 查询参数
+ * @returns {Promise} Promise对象
+ */
+export function getMonthlyFeeData(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.listMonthlyFee',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+        resolve(res)
+
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 获取关联房屋数据
+ * @param {Object} params 查询参数
+ * @returns {Promise} Promise对象
+ */
+export function getRelatedRooms(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.listRelatedRooms',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+        resolve(res)
+
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 获取关联车辆数据
+ * @param {Object} params 查询参数
+ * @returns {Promise} Promise对象
+ */
+export function getRelatedCars(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.listRelatedCars',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+        resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/fee/feeDetailCarApi.js b/src/api/fee/feeDetailCarApi.js
new file mode 100644
index 0000000..556ad79
--- /dev/null
+++ b/src/api/fee/feeDetailCarApi.js
@@ -0,0 +1,24 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export function queryOwnerCars(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/owner.queryOwnerCars',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).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)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/fee/feeDetailConfigApi.js b/src/api/fee/feeDetailConfigApi.js
new file mode 100644
index 0000000..42ca7f8
--- /dev/null
+++ b/src/api/fee/feeDetailConfigApi.js
@@ -0,0 +1,24 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export function listFeeConfigs(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feeConfig.listFeeConfigs',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).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
diff --git a/src/api/fee/feeDetailContractApi.js b/src/api/fee/feeDetailContractApi.js
new file mode 100644
index 0000000..11f92ab
--- /dev/null
+++ b/src/api/fee/feeDetailContractApi.js
@@ -0,0 +1,24 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export function queryContract(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/queryContract',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).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
diff --git a/src/api/fee/feeDetailDiscountApi.js b/src/api/fee/feeDetailDiscountApi.js
new file mode 100644
index 0000000..cc21d82
--- /dev/null
+++ b/src/api/fee/feeDetailDiscountApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function queryApplyRoomDiscount(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/applyRoomDiscount/queryApplyRoomDiscount',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to query apply room discount'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/fee/feeDetailHisApi.js b/src/api/fee/feeDetailHisApi.js
new file mode 100644
index 0000000..cf922c7
--- /dev/null
+++ b/src/api/fee/feeDetailHisApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function queryHisFee(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.queryHisFee',
+      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 history'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/fee/feeDetailHisFeeApi.js b/src/api/fee/feeDetailHisFeeApi.js
new file mode 100644
index 0000000..2b45829
--- /dev/null
+++ b/src/api/fee/feeDetailHisFeeApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export function queryFeeDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.queryFeeDetail',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+        resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/fee/feeDetailImportApi.js b/src/api/fee/feeDetailImportApi.js
new file mode 100644
index 0000000..4fd3509
--- /dev/null
+++ b/src/api/fee/feeDetailImportApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function queryImportFeeDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/importFee/queryImportFeeDetail',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to query import fee detail'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/fee/feeDetailMeterApi.js b/src/api/fee/feeDetailMeterApi.js
new file mode 100644
index 0000000..e2a1514
--- /dev/null
+++ b/src/api/fee/feeDetailMeterApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function listMeterWaters(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/meterWater.listMeterWaters',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to list meter waters'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/fee/feeDetailMonthFeeApi.js b/src/api/fee/feeDetailMonthFeeApi.js
new file mode 100644
index 0000000..5ddd1c8
--- /dev/null
+++ b/src/api/fee/feeDetailMonthFeeApi.js
@@ -0,0 +1,24 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export function listMonthFee(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.listMonthFee',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code == 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to list month fee'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/fee/feeDetailOwnerApi.js b/src/api/fee/feeDetailOwnerApi.js
new file mode 100644
index 0000000..0670b07
--- /dev/null
+++ b/src/api/fee/feeDetailOwnerApi.js
@@ -0,0 +1,20 @@
+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
diff --git a/src/api/fee/feeDetailReceiptApi.js b/src/api/fee/feeDetailReceiptApi.js
new file mode 100644
index 0000000..4958605
--- /dev/null
+++ b/src/api/fee/feeDetailReceiptApi.js
@@ -0,0 +1,20 @@
+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 apply room discount'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/fee/feeDetailRoomApi.js b/src/api/fee/feeDetailRoomApi.js
new file mode 100644
index 0000000..40e2033
--- /dev/null
+++ b/src/api/fee/feeDetailRoomApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export function queryRooms(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/room.queryRooms',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+        resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/fee/feeDetailSubApi.js b/src/api/fee/feeDetailSubApi.js
new file mode 100644
index 0000000..081d12b
--- /dev/null
+++ b/src/api/fee/feeDetailSubApi.js
@@ -0,0 +1,39 @@
+import request from '@/utils/request'
+
+export function listPayFeeSub(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feeSub.listPayFeeSub',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to get fee sub list'))
+      }
+    }).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 get fee list'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/fee/mergeFeeApi.js b/src/api/fee/mergeFeeApi.js
new file mode 100644
index 0000000..017e2be
--- /dev/null
+++ b/src/api/fee/mergeFeeApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function mergePayFee(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feeSub.mergePayFee',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to merge fee'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/components/fee/feeDetailCar.vue b/src/components/fee/feeDetailCar.vue
new file mode 100644
index 0000000..aa29490
--- /dev/null
+++ b/src/components/fee/feeDetailCar.vue
@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <div class="margin-top">
+      <el-table :data="feeDetailCarInfo.cars" style="width: 100%">
+        <el-table-column prop="carNum" :label="$t('feeDetailCar.licensePlate')" align="center"></el-table-column>
+        <el-table-column :label="$t('feeDetailCar.licenseType')" align="center">
+          <template slot-scope="scope">
+            <span v-if="scope.row.leaseType == 'T'">{{$t('feeDetailCar.temporaryCar')}}</span>
+            <span v-else>{{scope.row.leaseTypeName}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="carTypeName" :label="$t('feeDetailCar.carType')" align="center"></el-table-column>
+        <el-table-column prop="carColor" :label="$t('feeDetailCar.color')" align="center"></el-table-column>
+        <el-table-column :label="$t('feeDetailCar.owner')" align="center">
+          <template slot-scope="scope">{{scope.row.ownerName}}({{scope.row.link}})</template>
+        </el-table-column>
+        <el-table-column :label="$t('feeDetailCar.parkingSpace')" align="center">
+          <template slot-scope="scope">
+            <span v-if="scope.row.areaNum && scope.row.state == '1001'">
+              {{scope.row.areaNum}}{{$t('feeDetailCar.parkingLot')}}{{scope.row.num}}{{$t('feeDetailCar.parkingSpace')}}
+            </span>
+            <span v-else>{{$t('feeDetailCar.spaceReleased')}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('feeDetailCar.validityPeriod')" align="center">
+          <template slot-scope="scope">
+            <span v-if="scope.row.leaseType == 'H'">
+              {{scope.row.startTime}}<br>~{{scope.row.endTime}}
+            </span>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="12"></el-col>
+        <el-col :span="12">
+          <el-pagination
+            @current-change="handleCurrentChange"
+            :current-page="pagination.currentPage"
+            :page-size="pagination.pageSize"
+            layout="total, prev, pager, next"
+            :total="pagination.total">
+          </el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryOwnerCars } from '@/api/fee/feeDetailCarApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'FeeDetailCar',
+  data() {
+    return {
+      feeDetailCarInfo: {
+        cars: [],
+        memberId: ''
+      },
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open(params) {
+      this.feeDetailCarInfo.memberId = params.payerObjId
+      this._loadFeeDetailCarData()
+    },
+    _loadFeeDetailCarData() {
+      const params = {
+        communityId: getCommunityId(),
+        memberId: this.feeDetailCarInfo.memberId,
+        page: this.pagination.currentPage,
+        row: this.pagination.pageSize
+      }
+
+      queryOwnerCars(params).then(res => {
+        this.feeDetailCarInfo.cars = res.data
+        this.pagination.total = res.records
+      }).catch(error => {
+        console.error('Failed to load car details:', error)
+      })
+    },
+    handleCurrentChange(val) {
+      this.pagination.currentPage = val
+      this._loadFeeDetailCarData()
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/feeDetailCarDemo.vue b/src/components/fee/feeDetailCarDemo.vue
new file mode 100644
index 0000000..2cc6601
--- /dev/null
+++ b/src/components/fee/feeDetailCarDemo.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <el-button @click="openComponent">{{ $t('feeDetailCarDemo.openComponent') }}</el-button>
+    <fee-detail-car ref="feeDetailCar"></fee-detail-car>
+  </div>
+</template>
+
+<script>
+import FeeDetailCar from './feeDetailCar'
+
+export default {
+  name: 'FeeDetailCarDemo',
+  components: {
+    FeeDetailCar
+  },
+  methods: {
+    openComponent() {
+      this.$refs.feeDetailCar.open({
+        payerObjId: '123'
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/feeDetailConfig.vue b/src/components/fee/feeDetailConfig.vue
new file mode 100644
index 0000000..96e4cd0
--- /dev/null
+++ b/src/components/fee/feeDetailConfig.vue
@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <div class="margin-top">
+      <el-table :data="feeDetailConfigInfo.feeConfigs" style="width: 100%">
+        <el-table-column prop="feeTypeCdName" :label="$t('feeDetailConfig.feeType')" align="center"></el-table-column>
+        <el-table-column prop="feeName" :label="$t('feeDetailConfig.feeItem')" align="center"></el-table-column>
+        <el-table-column prop="feeFlagName" :label="$t('feeDetailConfig.feeFlag')" align="center"></el-table-column>
+        <el-table-column prop="billTypeName" :label="$t('feeDetailConfig.reminderType')" align="center"></el-table-column>
+        <el-table-column :label="$t('feeDetailConfig.paymentType')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.paymentCd == '1200' ? $t('feeDetailConfig.prepaid') : $t('feeDetailConfig.postpaid')}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="paymentCycle" :label="$t('feeDetailConfig.paymentCycle')" align="center"></el-table-column>
+        <el-table-column prop="units" :label="$t('feeDetailConfig.unit')" align="center"></el-table-column>
+        <el-table-column prop="computingFormulaName" :label="$t('feeDetailConfig.formula')" align="center"></el-table-column>
+        <el-table-column :label="$t('feeDetailConfig.unitPrice')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.computingFormula == '2002' ? '-' : scope.row.squarePrice}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="additionalAmount" :label="$t('feeDetailConfig.additionalFee')" align="center"></el-table-column>
+        <el-table-column :label="$t('feeDetailConfig.accountDeduction')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.deductFrom == 'Y' ? $t('feeDetailConfig.yes') : $t('feeDetailConfig.no')}}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('feeDetailConfig.mobilePayment')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.payOnline == 'Y' ? $t('feeDetailConfig.yes') : $t('feeDetailConfig.no')}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="scale" :label="$t('feeDetailConfig.decimalPlaces')" align="center"></el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="12"></el-col>
+        <el-col :span="12">
+          <el-pagination
+            @current-change="handleCurrentChange"
+            :current-page="pagination.currentPage"
+            :page-size="pagination.pageSize"
+            layout="total, prev, pager, next"
+            :total="pagination.total">
+          </el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listFeeConfigs } from '@/api/fee/feeDetailConfigApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'FeeDetailConfig',
+  data() {
+    return {
+      feeDetailConfigInfo: {
+        feeConfigs: [],
+        configId: ''
+      },
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open(params) {
+      this.feeDetailConfigInfo.configId = params.configId
+      this._loadFeeDetailConfigData()
+    },
+    _loadFeeDetailConfigData() {
+      const params = {
+        communityId: getCommunityId(),
+        configId: this.feeDetailConfigInfo.configId,
+        page: this.pagination.currentPage,
+        row: this.pagination.pageSize
+      }
+
+      listFeeConfigs(params).then(res => {
+        this.feeDetailConfigInfo.feeConfigs = res.feeConfigs
+        this.pagination.total = res.records
+      }).catch(error => {
+        console.error('Failed to load fee config details:', error)
+      })
+    },
+    handleCurrentChange(val) {
+      this.pagination.currentPage = val
+      this._loadFeeDetailConfigData()
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/feeDetailConfigDemo.vue b/src/components/fee/feeDetailConfigDemo.vue
new file mode 100644
index 0000000..be6ecd5
--- /dev/null
+++ b/src/components/fee/feeDetailConfigDemo.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <el-button @click="openComponent">{{ $t('feeDetailConfigDemo.openComponent') }}</el-button>
+    <fee-detail-config ref="feeDetailConfig"></fee-detail-config>
+  </div>
+</template>
+
+<script>
+import FeeDetailConfig from './feeDetailConfig'
+
+export default {
+  name: 'FeeDetailConfigDemo',
+  components: {
+    FeeDetailConfig
+  },
+  methods: {
+    openComponent() {
+      this.$refs.feeDetailConfig.open({
+        configId: '123'
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/feeDetailContract.vue b/src/components/fee/feeDetailContract.vue
new file mode 100644
index 0000000..dee6e61
--- /dev/null
+++ b/src/components/fee/feeDetailContract.vue
@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <div class="margin-top">
+      <el-table :data="feeDetailContractInfo.contracts" style="width: 100%">
+        <el-table-column prop="contractName" :label="$t('feeDetailContract.contractName')" align="center"></el-table-column>
+        <el-table-column prop="contractCode" :label="$t('feeDetailContract.contractCode')" align="center"></el-table-column>
+        <el-table-column :label="$t('feeDetailContract.parentContractCode')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.parentContractCode ? scope.row.parentContractCode : '-'}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="contractTypeName" :label="$t('feeDetailContract.contractType')" align="center"></el-table-column>
+        <el-table-column prop="operator" :label="$t('feeDetailContract.operator')" align="center"></el-table-column>
+        <el-table-column prop="amount" :label="$t('feeDetailContract.contractAmount')" align="center"></el-table-column>
+        <el-table-column prop="startTime" :label="$t('feeDetailContract.startTime')" align="center"></el-table-column>
+        <el-table-column prop="endTime" :label="$t('feeDetailContract.endTime')" align="center"></el-table-column>
+        <el-table-column prop="createTime" :label="$t('feeDetailContract.draftTime')" align="center"></el-table-column>
+        <el-table-column prop="stateName" :label="$t('feeDetailContract.status')" align="center"></el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="12"></el-col>
+        <el-col :span="12">
+          <el-pagination
+            @current-change="handleCurrentChange"
+            :current-page="pagination.currentPage"
+            :page-size="pagination.pageSize"
+            layout="total, prev, pager, next"
+            :total="pagination.total">
+          </el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryContract } from '@/api/fee/feeDetailContractApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'FeeDetailContract',
+  data() {
+    return {
+      feeDetailContractInfo: {
+        contracts: [],
+        contractId: ''
+      },
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open(params) {
+      this.feeDetailContractInfo.contractId = params.payerObjId
+      this._loadFeeDetailContractData()
+    },
+    _loadFeeDetailContractData() {
+      const params = {
+        communityId: getCommunityId(),
+        contractId: this.feeDetailContractInfo.contractId,
+        page: this.pagination.currentPage,
+        row: this.pagination.pageSize
+      }
+
+      queryContract(params).then(res => {
+        this.feeDetailContractInfo.contracts = res.data
+        this.pagination.total = res.records
+      }).catch(error => {
+        console.error('Failed to load contract details:', error)
+      })
+    },
+    handleCurrentChange(val) {
+      this.pagination.currentPage = val
+      this._loadFeeDetailContractData()
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/feeDetailContractDemo.vue b/src/components/fee/feeDetailContractDemo.vue
new file mode 100644
index 0000000..ba9b9c5
--- /dev/null
+++ b/src/components/fee/feeDetailContractDemo.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <el-button @click="openComponent">{{ $t('feeDetailContractDemo.openComponent') }}</el-button>
+    <fee-detail-contract ref="feeDetailContract"></fee-detail-contract>
+  </div>
+</template>
+
+<script>
+import FeeDetailContract from './feeDetailContract'
+
+export default {
+  name: 'FeeDetailContractDemo',
+  components: {
+    FeeDetailContract
+  },
+  methods: {
+    openComponent() {
+      this.$refs.feeDetailContract.open({
+        payerObjId: '123'
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/feeDetailDiscount.vue b/src/components/fee/feeDetailDiscount.vue
new file mode 100644
index 0000000..d38965f
--- /dev/null
+++ b/src/components/fee/feeDetailDiscount.vue
@@ -0,0 +1,148 @@
+<template>
+  <div>
+    <div class="margin-top">
+      <el-table
+        :data="feeDetailDiscountInfo.applyRoomDiscounts"
+        border
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="roomName"
+          :label="$t('feeDetailDiscount.roomName')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="discountId"
+          :label="$t('feeDetailDiscount.discountId')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="discountName"
+          :label="$t('feeDetailDiscount.discountName')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="applyTypeName"
+          :label="$t('feeDetailDiscount.applyType')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="createUserName"
+          :label="$t('feeDetailDiscount.applicant')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="createUserTel"
+          :label="$t('feeDetailDiscount.applicantPhone')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="startTime"
+          :label="$t('feeDetailDiscount.startTime')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="endTime"
+          :label="$t('feeDetailDiscount.endTime')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="stateName"
+          :label="$t('feeDetailDiscount.status')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="createTime"
+          :label="$t('feeDetailDiscount.createTime')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="inUse"
+          :label="$t('feeDetailDiscount.useStatus')"
+          align="center"
+        >
+          <template #default="{row}">
+            {{row.inUse === '0' ? $t('feeDetailDiscount.notUsed') : $t('feeDetailDiscount.used')}}
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="$t('feeDetailDiscount.returnType')"
+          align="center"
+        >
+          <template #default="{row}">
+            <span v-if="row.discountId">
+              {{row.returnWay === '1002' ? $t('feeDetailDiscount.accountBalance') : $t('feeDetailDiscount.discount')}}
+            </span>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="$t('feeDetailDiscount.returnAmount')"
+          align="center"
+        >
+          <template #default="{row}">
+            {{row.returnAmount ? row.returnAmount : '-'}}
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="4"></el-col>
+        <el-col :span="20">
+          <el-pagination
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-size="pageSize"
+            layout="total, prev, pager, next, jumper"
+            :total="total"
+          ></el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryApplyRoomDiscount } from '@/api/fee/feeDetailDiscountApi'
+
+export default {
+  name: 'FeeDetailDiscount',
+  data() {
+    return {
+      feeDetailDiscountInfo: {
+        applyRoomDiscounts: [],
+        feeId: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  methods: {
+    open(params) {
+      this.feeDetailDiscountInfo.feeId = params.feeId
+      this._loadFeeDetailDiscountData(this.currentPage, this.pageSize)
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._loadFeeDetailDiscountData(this.currentPage, this.pageSize)
+    },
+    async _loadFeeDetailDiscountData(page, row) {
+      try {
+        const params = {
+          communityId: this.$store.getters.communityId,
+          feeId: this.feeDetailDiscountInfo.feeId,
+          page,
+          row
+        }
+        
+        const res = await queryApplyRoomDiscount(params)
+        this.feeDetailDiscountInfo.applyRoomDiscounts = res.data
+        this.total = res.records
+      } catch (error) {
+        console.error('Failed to load discount data:', error)
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/feeDetailDiscountDemo.vue b/src/components/fee/feeDetailDiscountDemo.vue
new file mode 100644
index 0000000..613645a
--- /dev/null
+++ b/src/components/fee/feeDetailDiscountDemo.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <el-button @click="openComponent">{{ $t('feeDetailDiscountDemo.openComponent') }}</el-button>
+    <fee-detail-discount ref="feeDetailDiscount"></fee-detail-discount>
+  </div>
+</template>
+
+<script>
+import FeeDetailDiscount from './feeDetailDiscount'
+
+export default {
+  name: 'FeeDetailDiscountDemo',
+  components: {
+    FeeDetailDiscount
+  },
+  methods: {
+    openComponent() {
+      this.$refs.feeDetailDiscount.open({
+        feeId: '123'
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/feeDetailHis.vue b/src/components/fee/feeDetailHis.vue
new file mode 100644
index 0000000..3f4596d
--- /dev/null
+++ b/src/components/fee/feeDetailHis.vue
@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <el-row class="margin-top">
+      <el-col :span="24" class="text-right"></el-col>
+    </el-row>
+    <div class="margin-top">
+      <el-table
+        :data="feeDetailHisInfo.fees"
+        border
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="feeName"
+          :label="$t('feeDetailHis.feeName')"
+          align="center"
+        >
+          <template #default="{row}">
+            {{row.feeName}}
+            <span v-if="row.payerObjName">({{row.payerObjName}})</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="startTime"
+          :label="$t('feeDetailHis.startTime')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="endTime"
+          :label="$t('feeDetailHis.endTime')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          :label="$t('feeDetailHis.operation')"
+          align="center"
+        >
+          <template #default="{row}">
+            {{_getFeeHisOperate(row)}}
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="userName"
+          :label="$t('feeDetailHis.operator')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="createTime"
+          :label="$t('feeDetailHis.operationTime')"
+          align="center"
+        ></el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="4"></el-col>
+        <el-col :span="20">
+          <el-pagination
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-size="pageSize"
+            layout="total, prev, pager, next, jumper"
+            :total="total"
+          ></el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryHisFee } from '@/api/fee/feeDetailHisApi'
+
+export default {
+  name: 'FeeDetailHis',
+  data() {
+    return {
+      feeDetailHisInfo: {
+        fees: [],
+        feeId: '',
+        staffNameLike: '',
+        feeNameLike: '',
+        payerObjName: '',
+        logStartTime: '',
+        logEndTime: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  methods: {
+    open(params) {
+      this.feeDetailHisInfo = Object.assign(this.feeDetailHisInfo, params)
+      this._loadFeeDetailHisData(this.currentPage, this.pageSize)
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._loadFeeDetailHisData(this.currentPage, this.pageSize)
+    },
+    async _loadFeeDetailHisData(page, row) {
+      try {
+        const params = {
+          communityId: this.$store.getters.communityId,
+          feeId: this.feeDetailHisInfo.feeId,
+          staffNameLike: this.feeDetailHisInfo.staffNameLike,
+          feeNameLike: this.feeDetailHisInfo.feeNameLike,
+          payerObjName: this.feeDetailHisInfo.payerObjName,
+          logStartTime: this.feeDetailHisInfo.logStartTime,
+          logEndTime: this.feeDetailHisInfo.logEndTime,
+          page,
+          row
+        }
+        
+        const res = await queryHisFee(params)
+        this.feeDetailHisInfo.fees = res.data
+        this.total = res.records
+      } catch (error) {
+        console.error('Failed to load fee history data:', error)
+      }
+    },
+    _getFeeHisOperate(fee) {
+      let feeCount = 0
+      this.feeDetailHisInfo.fees.forEach(item => {
+        if (fee.bId === item.bId) {
+          feeCount += 1
+        }
+      })
+      
+      if (feeCount <= 1) {
+        if (fee.operate === 'ADD') return this.$t('feeDetailHis.add')
+        if (fee.operate === 'DEL') return this.$t('feeDetailHis.delete')
+        return '-'
+      }
+      
+      if (fee.operate === 'ADD') return this.$t('feeDetailHis.modifyNew')
+      if (fee.operate === 'DEL') return this.$t('feeDetailHis.modifyOld')
+      return '-'
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/feeDetailHisDemo.vue b/src/components/fee/feeDetailHisDemo.vue
new file mode 100644
index 0000000..e79eceb
--- /dev/null
+++ b/src/components/fee/feeDetailHisDemo.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <el-button @click="openComponent">{{ $t('feeDetailHisDemo.openComponent') }}</el-button>
+    <fee-detail-his ref="feeDetailHis"></fee-detail-his>
+  </div>
+</template>
+
+<script>
+import FeeDetailHis from './feeDetailHis'
+
+export default {
+  name: 'FeeDetailHisDemo',
+  components: {
+    FeeDetailHis
+  },
+  methods: {
+    openComponent() {
+      this.$refs.feeDetailHis.open({
+        feeId: '123',
+        staffNameLike: '',
+        feeNameLike: '',
+        payerObjName: '',
+        logStartTime: '',
+        logEndTime: ''
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/feeDetailHisFee.vue b/src/components/fee/feeDetailHisFee.vue
new file mode 100644
index 0000000..a8acd1b
--- /dev/null
+++ b/src/components/fee/feeDetailHisFee.vue
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="24" class="text-right"></el-col>
+    </el-row>
+
+    <div class="margin-top">
+      <el-table :data="feeDetailHisFeeInfo.feeDetails" style="width: 100%">
+        <el-table-column prop="feeName" :label="$t('feeDetailHisFee.feeName')" align="center"></el-table-column>
+        <el-table-column prop="payerObjName" :label="$t('feeDetailHisFee.payerObjName')"
+          align="center"></el-table-column>
+        <el-table-column prop="cycles" :label="$t('feeDetailHisFee.cycles')" align="center"></el-table-column>
+        <el-table-column :label="$t('feeDetailHisFee.amount')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.receivableAmount }}/{{ scope.row.receivedAmount }}<br>
+            <div v-if="scope.row.acctAmount > 0">
+              {{ $t('feeDetailHisFee.accountDeduction') }}: {{ scope.row.acctAmount }}<br>
+            </div>
+            <div v-for="(item, index) in scope.row.payFeeDetailDiscountDtoList" :key="index">
+              {{ item.discountName }}: {{ Math.abs(item.discountPrice) }}<br>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="primeRateName" :label="$t('feeDetailHisFee.paymentMethod')"
+          align="center"></el-table-column>
+        <el-table-column :label="$t('feeDetailHisFee.paymentPeriod')" align="center">
+          <template slot-scope="scope">
+            {{ dateFormat(scope.row.startTime) }}~<br>
+            {{ dateFormat(scope.row.endTime) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" :label="$t('feeDetailHisFee.paymentTime')" align="center"></el-table-column>
+        <el-table-column prop="cashierName" :label="$t('feeDetailHisFee.cashier')" align="center">
+          <template slot-scope="scope">{{ scope.row.cashierName || '-' }}</template>
+        </el-table-column>
+        <el-table-column prop="stateName" :label="$t('feeDetailHisFee.status')" align="center"></el-table-column>
+        <el-table-column prop="remark" :label="$t('feeDetailHisFee.remark')" align="center"></el-table-column>
+        <el-table-column :label="$t('feeDetailHisFee.operation')" align="center">
+          <template slot-scope="scope">
+            <el-button v-if="scope.row.state == '1400' || scope.row.state == '1200' || scope.row.state == ''" size="mini"
+              @click="_toRefundFee(scope.row)">
+              {{ $t('feeDetailHisFee.detail') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="12"></el-col>
+        <el-col :span="12">
+          <el-pagination @current-change="handleCurrentChange" :current-page="pagination.currentPage"
+            :page-size="pagination.pageSize" layout="total, prev, pager, next" :total="pagination.total">
+          </el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryFeeDetail } from '@/api/fee/feeDetailHisFeeApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'FeeDetailHisFee',
+  data() {
+    return {
+      feeDetailHisFeeInfo: {
+        feeDetails: [],
+        feeId: ''
+      },
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open(params) {
+      this.feeDetailHisFeeInfo.feeId = params.feeId
+      this._loadFeeDetailHisFeeData()
+    },
+    _loadFeeDetailHisFeeData() {
+      const params = {
+        communityId: getCommunityId(),
+        feeId: this.feeDetailHisFeeInfo.feeId,
+        page: this.pagination.currentPage,
+        row: this.pagination.pageSize
+      }
+
+      queryFeeDetail(params).then(res => {
+        this.feeDetailHisFeeInfo.feeDetails = res.feeDetails
+        this.pagination.total = res.records
+      }).catch(error => {
+        console.error('Failed to load fee detail history:', error)
+      })
+    },
+    handleCurrentChange(val) {
+      this.pagination.currentPage = val
+      this._loadFeeDetailHisFeeData()
+    },
+    _toRefundFee(detail) {
+      this.$router.push(`/pages/property/propertyFee?feeId=${detail.feeId}`)
+    },
+    dateFormat(date) {
+      return this.$moment(date).format('YYYY-MM-DD')
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/feeDetailHisFeeDemo.vue b/src/components/fee/feeDetailHisFeeDemo.vue
new file mode 100644
index 0000000..24e9c7f
--- /dev/null
+++ b/src/components/fee/feeDetailHisFeeDemo.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <el-button @click="openComponent">{{ $t('feeDetailHisFeeDemo.openComponent') }}</el-button>
+    <fee-detail-his-fee ref="feeDetailHisFee"></fee-detail-his-fee>
+  </div>
+</template>
+
+<script>
+import FeeDetailHisFee from './feeDetailHisFee'
+
+export default {
+  name: 'FeeDetailHisFeeDemo',
+  components: {
+    FeeDetailHisFee
+  },
+  methods: {
+    openComponent() {
+      this.$refs.feeDetailHisFee.open({
+        feeId: '123'
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/feeDetailImport.vue b/src/components/fee/feeDetailImport.vue
new file mode 100644
index 0000000..dff23d5
--- /dev/null
+++ b/src/components/fee/feeDetailImport.vue
@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <div class="margin-top">
+      <el-table
+        :data="feeDetailImportInfo.importFeeDetails"
+        border
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="floorNum"
+          :label="$t('feeDetailImport.floorNum')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="unitNum"
+          :label="$t('feeDetailImport.unitNum')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="roomNum"
+          :label="$t('feeDetailImport.roomNum')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="feeName"
+          :label="$t('feeDetailImport.feeName')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="startTime"
+          :label="$t('feeDetailImport.startTime')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="endTime"
+          :label="$t('feeDetailImport.endTime')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="amount"
+          :label="$t('feeDetailImport.totalAmount')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="remark"
+          :label="$t('feeDetailImport.remark')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="state"
+          :label="$t('feeDetailImport.status')"
+          align="center"
+        >
+          <template #default="{row}">
+            <el-tag :type="row.state === '1000' ? 'success' : 'danger'">
+              {{row.state === '1000' ? $t('feeDetailImport.importSuccess') : $t('feeDetailImport.importFailed')}}
+            </el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="4"></el-col>
+        <el-col :span="20">
+          <el-pagination
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-size="pageSize"
+            layout="total, prev, pager, next, jumper"
+            :total="total"
+          ></el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryImportFeeDetail } from '@/api/fee/feeDetailImportApi'
+
+export default {
+  name: 'FeeDetailImport',
+  data() {
+    return {
+      feeDetailImportInfo: {
+        importFeeDetails: [],
+        feeId: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  methods: {
+    open(params) {
+      this.feeDetailImportInfo.feeId = params.feeId
+      this._loadFeeDetailImportData(this.currentPage, this.pageSize)
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._loadFeeDetailImportData(this.currentPage, this.pageSize)
+    },
+    async _loadFeeDetailImportData(page, row) {
+      try {
+        const params = {
+          communityId: this.$store.getters.communityId,
+          feeId: this.feeDetailImportInfo.feeId,
+          page,
+          row
+        }
+        
+        const res = await queryImportFeeDetail(params)
+        this.feeDetailImportInfo.importFeeDetails = res.data
+        this.total = res.records
+      } catch (error) {
+        console.error('Failed to load import fee data:', error)
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/feeDetailImportDemo.vue b/src/components/fee/feeDetailImportDemo.vue
new file mode 100644
index 0000000..08dacea
--- /dev/null
+++ b/src/components/fee/feeDetailImportDemo.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <el-button @click="openComponent">{{ $t('feeDetailImportDemo.openComponent') }}</el-button>
+    <fee-detail-import ref="feeDetailImport"></fee-detail-import>
+  </div>
+</template>
+
+<script>
+import FeeDetailImport from './feeDetailImport'
+
+export default {
+  name: 'FeeDetailImportDemo',
+  components: {
+    FeeDetailImport
+  },
+  methods: {
+    openComponent() {
+      this.$refs.feeDetailImport.open({
+        feeId: '123'
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/feeDetailMeter.vue b/src/components/fee/feeDetailMeter.vue
new file mode 100644
index 0000000..e602382
--- /dev/null
+++ b/src/components/fee/feeDetailMeter.vue
@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <div class="margin-top">
+      <el-table
+        :data="feeDetailMeterInfo.meterWaters"
+        border
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="waterId"
+          :label="$t('feeDetailMeter.meterId')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="meterTypeName"
+          :label="$t('feeDetailMeter.meterType')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="objName"
+          :label="$t('feeDetailMeter.objName')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="preDegrees"
+          :label="$t('feeDetailMeter.preDegrees')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="curDegrees"
+          :label="$t('feeDetailMeter.curDegrees')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="preReadingTime"
+          :label="$t('feeDetailMeter.preReadingTime')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="curReadingTime"
+          :label="$t('feeDetailMeter.curReadingTime')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="createTime"
+          :label="$t('feeDetailMeter.createTime')"
+          align="center"
+        ></el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="4"></el-col>
+        <el-col :span="20">
+          <el-pagination
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-size="pageSize"
+            layout="total, prev, pager, next, jumper"
+            :total="total"
+          ></el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listMeterWaters } from '@/api/fee/feeDetailMeterApi'
+
+export default {
+  name: 'FeeDetailMeter',
+  data() {
+    return {
+      feeDetailMeterInfo: {
+        meterWaters: [],
+        feeId: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  methods: {
+    open(params) {
+      this.feeDetailMeterInfo.feeId = params.feeId
+      this._loadFeeDetailMeterData(this.currentPage, this.pageSize)
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._loadFeeDetailMeterData(this.currentPage, this.pageSize)
+    },
+    async _loadFeeDetailMeterData(page, row) {
+      try {
+        const params = {
+          communityId: this.$store.getters.communityId,
+          feeId: this.feeDetailMeterInfo.feeId,
+          page,
+          row
+        }
+        
+        const res = await listMeterWaters(params)
+        this.feeDetailMeterInfo.meterWaters = res.data
+        this.total = res.records
+      } catch (error) {
+        console.error('Failed to load meter data:', error)
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/feeDetailMeterDemo.vue b/src/components/fee/feeDetailMeterDemo.vue
new file mode 100644
index 0000000..5be3f9e
--- /dev/null
+++ b/src/components/fee/feeDetailMeterDemo.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <el-button @click="openComponent">{{ $t('feeDetailMeterDemo.openComponent') }}</el-button>
+    <fee-detail-meter ref="feeDetailMeter"></fee-detail-meter>
+  </div>
+</template>
+
+<script>
+import FeeDetailMeter from './feeDetailMeter'
+
+export default {
+  name: 'FeeDetailMeterDemo',
+  components: {
+    FeeDetailMeter
+  },
+  methods: {
+    openComponent() {
+      this.$refs.feeDetailMeter.open({
+        feeId: '123'
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/feeDetailMonthFee.vue b/src/components/fee/feeDetailMonthFee.vue
new file mode 100644
index 0000000..09d2ceb
--- /dev/null
+++ b/src/components/fee/feeDetailMonthFee.vue
@@ -0,0 +1,137 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="24" class="text-right"></el-col>
+    </el-row>
+
+    <div class="margin-top">
+      <el-table :data="feeDetailMonthFeeInfo.monthFees" style="width: 100%">
+        <el-table-column prop="feeName" :label="$t('feeDetailMonthFee.feeItem')" align="center"></el-table-column>
+        <el-table-column prop="feeFlagName" :label="$t('feeDetailMonthFee.feeFlag')" align="center"></el-table-column>
+        <el-table-column prop="feeTypeCdName" :label="$t('feeDetailMonthFee.feeType')" align="center"></el-table-column>
+        <el-table-column :label="$t('feeDetailMonthFee.chargeYearMonth')" align="center">
+          <template slot-scope="scope">{{scope.row.detailYear}}-{{scope.row.detailMonth}}</template>
+        </el-table-column>
+        <el-table-column prop="receivableAmount" :label="$t('feeDetailMonthFee.receivableAmount')" align="center"></el-table-column>
+        <el-table-column :label="$t('feeDetailMonthFee.description')" align="center">
+          <template slot-scope="scope">
+            <div v-if="scope.row.computingFormula == '5005' || scope.row.computingFormula == '9009'">
+              <div>
+                <span>{{$t('feeDetailMonthFee.lastDegrees')}}</span>{{scope.row.preDegrees}}
+              </div>
+              <div>
+                <span>{{$t('feeDetailMonthFee.currentDegrees')}}</span>{{scope.row.curDegrees}}
+              </div>
+              <div>
+                <span>{{$t('feeDetailMonthFee.unitPrice')}}</span>{{getOnePrice1(scope.row)}}
+              </div>
+              <div>
+                <span>{{$t('feeDetailMonthFee.additionalFee')}}</span>{{scope.row.additionalAmount}}
+              </div>
+            </div>
+            <div v-else-if="scope.row.computingFormula == '6006'">
+              <div>
+                <span>{{$t('feeDetailMonthFee.usage')}}</span>{{_getAttrValue(scope.row.feeAttrs,'390006')}}
+              </div>
+              <div>
+                <span>{{$t('feeDetailMonthFee.unitPrice')}}</span>{{scope.row.squarePrice}}
+              </div>
+              <div>
+                <span>{{$t('feeDetailMonthFee.additionalFee')}}</span>{{scope.row.additionalAmount}}
+              </div>
+            </div>
+            <div v-else-if="scope.row.feeTypeCd == '888800010017'" width="150">
+              <div>
+                <span>{{$t('feeDetailMonthFee.algorithm')}}</span>{{_getAttrValue(scope.row.feeAttrs,'390005')}}
+              </div>
+              <div>
+                <span>{{$t('feeDetailMonthFee.usage')}}</span>{{_getAttrValue(scope.row.feeAttrs,'390003')}}
+              </div>
+            </div>
+            <div v-else>
+              <div>
+                <span>{{$t('feeDetailMonthFee.unitPrice')}}</span>{{scope.row.squarePrice}}
+              </div>
+              <div v-if="scope.row.feeFlag == '1003006'">
+                <span>{{$t('feeDetailMonthFee.additionalFee')}}</span>{{scope.row.additionalAmount}}
+              </div>
+              <div v-else>
+                <span>{{$t('feeDetailMonthFee.fixedFee')}}</span>{{scope.row.additionalAmount}}
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="12"></el-col>
+        <el-col :span="12">
+          <el-pagination
+            @current-change="handleCurrentChange"
+            :current-page="pagination.currentPage"
+            :page-size="pagination.pageSize"
+            layout="total, prev, pager, next"
+            :total="pagination.total">
+          </el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listMonthFee } from '@/api/fee/feeDetailMonthFeeApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'FeeDetailMonthFee',
+  data() {
+    return {
+      feeDetailMonthFeeInfo: {
+        monthFees: [],
+        feeId: ''
+      },
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open(params) {
+      this.feeDetailMonthFeeInfo.feeId = params.feeId
+      this._loadFeeDetailMonthFeeData()
+    },
+    _loadFeeDetailMonthFeeData() {
+      const params = {
+        communityId: getCommunityId(),
+        feeId: this.feeDetailMonthFeeInfo.feeId,
+        detailId: '-1',
+        page: this.pagination.currentPage,
+        row: this.pagination.pageSize
+      }
+
+      listMonthFee(params).then(res => {
+        this.feeDetailMonthFeeInfo.monthFees = res.data
+        this.pagination.total = res.records
+      }).catch(error => {
+        console.error('Failed to load month fee details:', error)
+      })
+    },
+    handleCurrentChange(val) {
+      this.pagination.currentPage = val
+      this._loadFeeDetailMonthFeeData()
+    },
+    getOnePrice1(fee) {
+      // Implement your logic here
+      return fee.squarePrice || '-'
+    },
+    _getAttrValue(attrs, code) {
+      if (!attrs) return '-'
+      const attr = attrs.find(item => item.specCd === code)
+      return attr ? attr.value : '-'
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/feeDetailMonthFeeDemo.vue b/src/components/fee/feeDetailMonthFeeDemo.vue
new file mode 100644
index 0000000..eff0bfb
--- /dev/null
+++ b/src/components/fee/feeDetailMonthFeeDemo.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <el-button @click="openComponent">{{ $t('feeDetailMonthFeeDemo.openComponent') }}</el-button>
+    <fee-detail-month-fee ref="feeDetailMonthFee"></fee-detail-month-fee>
+  </div>
+</template>
+
+<script>
+import FeeDetailMonthFee from './feeDetailMonthFee'
+
+export default {
+  name: 'FeeDetailMonthFeeDemo',
+  components: {
+    FeeDetailMonthFee
+  },
+  methods: {
+    openComponent() {
+      this.$refs.feeDetailMonthFee.open({
+        feeId: '123'
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/feeDetailOwner.vue b/src/components/fee/feeDetailOwner.vue
new file mode 100644
index 0000000..d9e748a
--- /dev/null
+++ b/src/components/fee/feeDetailOwner.vue
@@ -0,0 +1,242 @@
+<template>
+  <div>
+    <div class="margin-top">
+      <el-table
+        :data="feeDetailOwnerInfo.owners"
+        border
+        style="width: 100%"
+      >
+        <el-table-column
+          :label="$t('feeDetailOwner.ownerFace')"
+          align="center"
+        >
+          <template #default="{row}">
+            <el-image
+              style="width: 60px; height: 60px;"
+              class="border-radius"
+              :src="row.url || '/img/noPhoto.jpg'"
+              :preview-src-list="[row.url]"
+              v-if="row.url"
+            ></el-image>
+            <el-image
+              style="width: 60px; height: 60px;"
+              class="border-radius"
+              src="/img/noPhoto.jpg"
+              v-else
+            ></el-image>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          :label="$t('feeDetailOwner.name')"
+          align="center"
+        >
+          <template #default="{row}">
+            {{row.name}}({{row.link}})
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="sex"
+          :label="$t('feeDetailOwner.gender')"
+          align="center"
+        >
+          <template #default="{row}">
+            {{row.sex === 0 ? $t('feeDetailOwner.male') : $t('feeDetailOwner.female')}}
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="idCard"
+          :label="$t('feeDetailOwner.idCard')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="address"
+          :label="$t('feeDetailOwner.address')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="roomCount"
+          :label="$t('feeDetailOwner.roomCount')"
+          align="center"
+        >
+          <template #default="{row}">
+            <el-link type="primary" @click="_viewOwnerRooms(row)">
+              {{row.roomCount || 0}}
+            </el-link>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="memberCount"
+          :label="$t('feeDetailOwner.memberCount')"
+          align="center"
+        >
+          <template #default="{row}">
+            <el-link type="primary" @click="_viewOwnerMembers(row)">
+              {{row.memberCount || 0}}
+            </el-link>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="carCount"
+          :label="$t('feeDetailOwner.carCount')"
+          align="center"
+        >
+          <template #default="{row}">
+            <el-link type="primary" @click="_viewOwnerCars(row)">
+              {{row.carCount || 0}}
+            </el-link>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="complaintCount"
+          :label="$t('feeDetailOwner.complaintCount')"
+          align="center"
+        >
+          <template #default="{row}">
+            <el-link type="primary" @click="_viewComplaints(row)">
+              {{row.complaintCount || 0}}
+            </el-link>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="repairCount"
+          :label="$t('feeDetailOwner.repairCount')"
+          align="center"
+        >
+          <template #default="{row}">
+            <el-link type="primary" @click="_viewRepairs(row)">
+              {{row.repairCount || 0}}
+            </el-link>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="oweFee"
+          :label="$t('feeDetailOwner.oweFee')"
+          align="center"
+        >
+          <template #default="{row}">
+            <el-link type="primary" @click="_viewOweFees(row)">
+              {{row.oweFee || '0.00'}}
+            </el-link>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="contractCount"
+          :label="$t('feeDetailOwner.contractCount')"
+          align="center"
+        >
+          <template #default="{row}">
+            <el-link type="primary" @click="_viewRoomContracts(row)">
+              {{row.contractCount || 0}}
+            </el-link>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="4"></el-col>
+        <el-col :span="20">
+          <el-pagination
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-size="pageSize"
+            layout="total, prev, pager, next, jumper"
+            :total="total"
+          ></el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+
+    <owner-rooms ref="ownerRooms"></owner-rooms>
+    <owner-members ref="ownerMembers"></owner-members>
+    <owner-cars ref="ownerCars"></owner-cars>
+    <owner-complaints ref="ownerComplaints"></owner-complaints>
+    <owner-repairs ref="ownerRepairs"></owner-repairs>
+    <owner-owe-fees ref="ownerOweFees"></owner-owe-fees>
+    <room-contracts ref="roomContracts"></room-contracts>
+  </div>
+</template>
+
+<script>
+import { queryOwners } from '@/api/fee/feeDetailOwnerApi'
+import OwnerRooms from '@/components/owner/ownerRooms'
+import OwnerMembers from '@/components/owner/ownerMembers'
+import OwnerCars from '@/components/owner/ownerCars'
+import OwnerComplaints from '@/components/owner/ownerComplaints'
+import OwnerRepairs from '@/components/owner/ownerRepairs'
+import OwnerOweFees from '@/components/owner/ownerOweFees'
+import RoomContracts from '@/components/room/roomContracts'
+
+export default {
+  name: 'FeeDetailOwner',
+  components: {
+    OwnerRooms,
+    OwnerMembers,
+    OwnerCars,
+    OwnerComplaints,
+    OwnerRepairs,
+    OwnerOweFees,
+    RoomContracts
+  },
+  data() {
+    return {
+      feeDetailOwnerInfo: {
+        owners: [],
+        ownerId: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  methods: {
+    open(params) {
+      if (!params.ownerId) return
+      this.feeDetailOwnerInfo.ownerId = params.ownerId
+      this._loadFeeDetailOwnerData(this.currentPage, this.pageSize)
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._loadFeeDetailOwnerData(this.currentPage, this.pageSize)
+    },
+    async _loadFeeDetailOwnerData(page, row) {
+      try {
+        const params = {
+          ownerId: this.feeDetailOwnerInfo.ownerId,
+          communityId: this.$store.getters.communityId,
+          ownerTypeCd: '1001',
+          page,
+          row
+        }
+        
+        const res = await queryOwners(params)
+        this.feeDetailOwnerInfo.owners = res.data
+        this.total = res.records
+      } catch (error) {
+        console.error('Failed to load owner data:', error)
+      }
+    },
+    _viewOwnerRooms(owner) {
+      this.$refs.ownerRooms.open(owner)
+    },
+    _viewOwnerMembers(owner) {
+      this.$refs.ownerMembers.open(owner)
+    },
+    _viewOwnerCars(owner) {
+      this.$refs.ownerCars.open(owner)
+    },
+    _viewComplaints(owner) {
+      this.$refs.ownerComplaints.open(owner)
+    },
+    _viewRepairs(owner) {
+      this.$refs.ownerRepairs.open(owner)
+    },
+    _viewOweFees(owner) {
+      this.$refs.ownerOweFees.open(owner)
+    },
+    _viewRoomContracts(owner) {
+      this.$refs.roomContracts.open(owner)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/feeDetailOwnerDemo.vue b/src/components/fee/feeDetailOwnerDemo.vue
new file mode 100644
index 0000000..f4356c0
--- /dev/null
+++ b/src/components/fee/feeDetailOwnerDemo.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <el-button @click="openComponent">{{ $t('feeDetailOwnerDemo.openComponent') }}</el-button>
+    <fee-detail-owner ref="feeDetailOwner"></fee-detail-owner>
+  </div>
+</template>
+
+<script>
+import FeeDetailOwner from './feeDetailOwner'
+
+export default {
+  name: 'FeeDetailOwnerDemo',
+  components: {
+    FeeDetailOwner
+  },
+  methods: {
+    openComponent() {
+      this.$refs.feeDetailOwner.open({
+        ownerId: '123'
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/feeDetailReceipt.vue b/src/components/fee/feeDetailReceipt.vue
new file mode 100644
index 0000000..8aa9fce
--- /dev/null
+++ b/src/components/fee/feeDetailReceipt.vue
@@ -0,0 +1,219 @@
+<template>
+  <div>
+    <el-row class="margin-top-lg">
+      <el-col :span="12"></el-col>
+      <el-col :span="12" class="text-right">
+        <el-button
+          type="primary"
+          size="small"
+          @click="_printFeeReceipt"
+        >{{ $t('feeDetailReceipt.print') }}</el-button>
+        <el-button
+          type="primary"
+          size="small"
+          @click="_printFeeSmallReceipt"
+        >{{ $t('feeDetailReceipt.printSmall') }}</el-button>
+        <el-button
+          type="primary"
+          size="small"
+          @click="_printApplyFeeReceipt"
+        >{{ $t('feeDetailReceipt.printApply') }}</el-button>
+      </el-col>
+    </el-row>
+    
+    <div class="margin-top">
+      <el-table
+        :data="feeDetailReceiptInfo.feeReceipts"
+        border
+        style="width: 100%"
+      >
+        <el-table-column
+          width="60"
+          align="center"
+        >
+          <template #header>
+            <el-checkbox
+              v-model="feeDetailReceiptInfo.quan"
+              @change="checkAllReceipt"
+            ></el-checkbox>
+          </template>
+          <template #default="{row}">
+            <el-checkbox
+              v-model="feeDetailReceiptInfo.selectReceipts"
+              :label="row.receiptId"
+            ></el-checkbox>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="objName"
+          :label="$t('feeDetailReceipt.feeType')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="payObjName"
+          :label="$t('feeDetailReceipt.owner')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="feeName"
+          :label="$t('feeDetailReceipt.feeItem')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          :label="$t('feeDetailReceipt.feePeriod')"
+          align="center"
+        >
+          <template #default="{row}">
+            {{$dayjs(row.startTime).format('YYYY-MM-DD')}}~<br/>
+            {{$dayjs(row.endTime).format('YYYY-MM-DD')}}
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="amount"
+          :label="$t('feeDetailReceipt.totalAmount')"
+          align="center"
+        >
+          <template #default="{row}">
+            {{row.amount}}{{$t('feeDetailReceipt.yuan')}}
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="createTime"
+          :label="$t('feeDetailReceipt.paymentTime')"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="receiptId"
+          :label="$t('feeDetailReceipt.receiptId')"
+          align="center"
+        ></el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="24" class="float-right">
+          <el-pagination
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-size="pageSize"
+            layout="total, prev, pager, next, jumper"
+            :total="total"
+          ></el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryFeeReceipt, listFeePrintPage } from '@/api/fee/feeDetailReceiptApi'
+
+export default {
+  name: 'FeeDetailReceipt',
+  data() {
+    return {
+      feeDetailReceiptInfo: {
+        feeReceipts: [],
+        feeId: '',
+        total: 0,
+        records: 0,
+        selectReceipts: [],
+        quan: false,
+        printUrl: '/print.html#/pages/property/printPayFee'
+      },
+      currentPage: 1,
+      pageSize: 10
+    }
+  },
+  watch: {
+    'feeDetailReceiptInfo.selectReceipts': {
+      handler(newVal) {
+        this.feeDetailReceiptInfo.quan = newVal.length === this.feeDetailReceiptInfo.feeReceipts.length
+      },
+      deep: true
+    }
+  },
+  methods: {
+    open(params) {
+      if (!params.feeId) return
+      this.feeDetailReceiptInfo = Object.assign(this.feeDetailReceiptInfo, params)
+      this._listFeePrintPages()
+      this._listFeeDetailReceipt(this.currentPage, this.pageSize)
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._listFeeDetailReceipt(this.currentPage, this.pageSize)
+    },
+    async _listFeeDetailReceipt(page, rows) {
+      try {
+        this.feeDetailReceiptInfo.selectReceipts = []
+        this.feeDetailReceiptInfo.quan = false
+        
+        const params = {
+          page,
+          row: rows,
+          feeId: this.feeDetailReceiptInfo.feeId,
+          communityId: this.$store.getters.communityId
+        }
+        
+        const res = await queryFeeReceipt(params)
+        this.feeDetailReceiptInfo.total = res.total
+        this.feeDetailReceiptInfo.records = res.records
+        this.feeDetailReceiptInfo.feeReceipts = res.data
+      } catch (error) {
+        console.error('Failed to load receipt data:', error)
+      }
+    },
+    _printFeeReceipt() {
+      if (this.feeDetailReceiptInfo.selectReceipts.length < 1) {
+        this.$message.warning(this.$t('feeDetailReceipt.selectPrintReceipt'))
+        return
+      }
+      
+      const receiptIds = this.feeDetailReceiptInfo.selectReceipts.join(',')
+      window.open(`${this.feeDetailReceiptInfo.printUrl}?receiptIds=${receiptIds}&apply=N`)
+    },
+    _printApplyFeeReceipt() {
+      if (this.feeDetailReceiptInfo.selectReceipts.length < 1) {
+        this.$message.warning(this.$t('feeDetailReceipt.selectPrintApply'))
+        return
+      }
+      
+      const receiptIds = this.feeDetailReceiptInfo.selectReceipts.join(',')
+      window.open(`/print.html#/pages/property/printPayFee?receiptIds=${receiptIds}&apply=Y`)
+    },
+    _printFeeSmallReceipt() {
+      if (this.feeDetailReceiptInfo.selectReceipts.length < 1) {
+        this.$message.warning(this.$t('feeDetailReceipt.selectPrintReceipt'))
+        return
+      }
+      
+      const receiptIds = this.feeDetailReceiptInfo.selectReceipts.join(',')
+      window.open(`/smallPrint.html#/pages/property/printSmallPayFee?receiptIds=${receiptIds}`)
+    },
+    checkAllReceipt(e) {
+      if (e) {
+        this.feeDetailReceiptInfo.selectReceipts = this.feeDetailReceiptInfo.feeReceipts.map(item => item.receiptId)
+      } else {
+        this.feeDetailReceiptInfo.selectReceipts = []
+      }
+    },
+    async _listFeePrintPages() {
+      try {
+        const params = {
+          page: 1,
+          row: 1,
+          state: 'T',
+          communityId: this.$store.getters.communityId
+        }
+        
+        const res = await listFeePrintPage(params)
+        if (res.data && res.data.length > 0) {
+          this.feeDetailReceiptInfo.printUrl = res.data[0].url
+        }
+      } catch (error) {
+        console.error('Failed to load print pages:', error)
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/feeDetailReceiptDemo.vue b/src/components/fee/feeDetailReceiptDemo.vue
new file mode 100644
index 0000000..876366e
--- /dev/null
+++ b/src/components/fee/feeDetailReceiptDemo.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <el-button @click="openComponent">{{ $t('feeDetailReceiptDemo.openComponent') }}</el-button>
+    <fee-detail-receipt ref="feeDetailReceipt"></fee-detail-receipt>
+  </div>
+</template>
+
+<script>
+import FeeDetailReceipt from './feeDetailReceipt'
+
+export default {
+  name: 'FeeDetailReceiptDemo',
+  components: {
+    FeeDetailReceipt
+  },
+  methods: {
+    openComponent() {
+      this.$refs.feeDetailReceipt.open({
+        feeId: '123'
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/feeDetailRoom.vue b/src/components/fee/feeDetailRoom.vue
new file mode 100644
index 0000000..f813c22
--- /dev/null
+++ b/src/components/fee/feeDetailRoom.vue
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <div class="margin-top">
+      <el-table :data="feeDetailRoomInfo.rooms" style="width: 100%">
+        <el-table-column :label="$t('feeDetailRoom.roomId')" 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('feeDetailRoom.floor')" align="center"></el-table-column>
+        <el-table-column prop="roomSubTypeName" :label="$t('feeDetailRoom.type')" align="center"></el-table-column>
+        <el-table-column :label="$t('feeDetailRoom.area')" align="center">
+          <template slot-scope="scope">{{ scope.row.builtUpArea }}/{{ scope.row.roomArea }}</template>
+        </el-table-column>
+        <el-table-column prop="roomRent" :label="$t('feeDetailRoom.rent')" align="center"></el-table-column>
+        <el-table-column prop="stateName" :label="$t('feeDetailRoom.roomStatus')" align="center"></el-table-column>
+        <el-table-column :label="$t('feeDetailRoom.roomArrears')" align="center">
+          <template slot-scope="scope">{{ scope.row.roomOweFee ||
+            '0.00'}}({{ $t('feeDetailRoom.updateDaily') }})</template>
+        </el-table-column>
+        <el-table-column :label="$t('feeDetailRoom.operation')" align="center">
+          <template slot-scope="scope">
+            <el-button v-if="scope.row.state != '2002'" size="mini" @click="_toSimplifyAcceptance(scope.row)">
+              {{ $t('feeDetailRoom.businessAcceptance') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="12"></el-col>
+        <el-col :span="12">
+          <el-pagination @current-change="handleCurrentChange" :current-page="pagination.currentPage"
+            :page-size="pagination.pageSize" layout="total, prev, pager, next" :total="pagination.total">
+          </el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryRooms } from '@/api/fee/feeDetailRoomApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'FeeDetailRoom',
+  data() {
+    return {
+      feeDetailRoomInfo: {
+        rooms: [],
+        roomId: '',
+        roomNum: '',
+        allOweFeeAmount: '0'
+      },
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open(params) {
+      this.feeDetailRoomInfo.roomId = params.payerObjId
+      this._loadFeeDetailRoomData()
+    },
+    _loadFeeDetailRoomData() {
+      const params = {
+        communityId: getCommunityId(),
+        roomId: this.feeDetailRoomInfo.roomId,
+        page: this.pagination.currentPage,
+        row: this.pagination.pageSize
+      }
+
+      queryRooms(params).then(res => {
+        this.feeDetailRoomInfo.rooms = res.rooms
+        this.pagination.total = res.records
+      }).catch(error => {
+        console.error('Failed to load room details:', error)
+      })
+    },
+    handleCurrentChange(val) {
+      this.pagination.currentPage = val
+      this._loadFeeDetailRoomData()
+    },
+    _toSimplifyAcceptance(room) {
+      const date = new Date()
+      this.$store.dispatch('app/saveData', {
+        key: 'JAVA110_IS_BACK',
+        value: date.getTime()
+      })
+      this.$store.dispatch('app/saveData', {
+        key: 'simplifyAcceptanceSearch',
+        value: {
+          searchType: '1',
+          searchValue: `${room.floorNum}-${room.unitNum}-${room.roomNum}`,
+          searchPlaceholder: this.$t('feeDetailRoom.searchPlaceholder')
+        }
+      })
+      this.$router.push('/pages/property/simplifyAcceptance?tab=businessAcceptance')
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/feeDetailRoomDemo.vue b/src/components/fee/feeDetailRoomDemo.vue
new file mode 100644
index 0000000..0bec481
--- /dev/null
+++ b/src/components/fee/feeDetailRoomDemo.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <el-button @click="openComponent">{{ $t('feeDetailRoomDemo.openComponent') }}</el-button>
+    <fee-detail-room ref="feeDetailRoom"></fee-detail-room>
+  </div>
+</template>
+
+<script>
+import FeeDetailRoom from './feeDetailRoom'
+
+export default {
+  name: 'FeeDetailRoomDemo',
+  components: {
+    FeeDetailRoom
+  },
+  methods: {
+    openComponent() {
+      this.$refs.feeDetailRoom.open({
+        payerObjId: '123'
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/feeDetailRuleBill.vue b/src/components/fee/feeDetailRuleBill.vue
index d20c130..be2ff38 100644
--- a/src/components/fee/feeDetailRuleBill.vue
+++ b/src/components/fee/feeDetailRuleBill.vue
@@ -25,7 +25,7 @@
       <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">
+            <a :href="'/#/views/fee/feeDetail?feeId=' + scope.row.feeId" target="_blank">
               {{ $t('common.detail') }}
             </a>
           </el-button>
diff --git a/src/components/fee/feeDetailSub.vue b/src/components/fee/feeDetailSub.vue
new file mode 100644
index 0000000..e20da5c
--- /dev/null
+++ b/src/components/fee/feeDetailSub.vue
@@ -0,0 +1,148 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="24" class="text-right">
+        <el-button type="primary" size="small" style="margin-left: 10px"
+          v-if="hasPrivilege('502020090427190001') && feeDetailSubInfo.fee.state === '2008001'" @click="_splitPayFee">
+          {{ $t('feeDetailSub.split') }}
+        </el-button>
+      </el-col>
+    </el-row>
+
+    <el-table :data="feeDetailSubInfo.subs" border style="width: 100%" class="margin-top">
+      <el-table-column prop="preFeeId" :label="$t('feeDetailSub.parentFeeId')" align="center">
+        <template slot-scope="scope">
+          <router-link :to="`/views/fee/feeDetail?feeId=${scope.row.preFeeId}`" target="_blank">
+            {{ scope.row.preFeeId }}
+          </router-link>
+        </template>
+      </el-table-column>
+      <el-table-column prop="feeId" :label="$t('feeDetailSub.childFeeId')" align="center">
+        <template slot-scope="scope">
+          <router-link :to="`/views/fee/feeDetail?feeId=${scope.row.feeId}`" target="_blank">
+            {{ scope.row.feeId }}
+          </router-link>
+        </template>
+      </el-table-column>
+      <el-table-column prop="feeName" :label="$t('feeDetailSub.feeName')" align="center" />
+      <el-table-column prop="payerObjName" :label="$t('feeDetailSub.feeObject')" align="center" />
+      <el-table-column :label="$t('feeDetailSub.billingPeriod')" align="center">
+        <template slot-scope="scope">
+          {{ dateFormat(new Date(scope.row.endTime)) }}<br />
+          ~{{ dateFormat(new Date(scope.row.maxTime)) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" :label="$t('feeDetailSub.splitTime')" align="center" />
+      <el-table-column :label="$t('feeDetailSub.operation')" align="center">
+        <template slot-scope="scope">
+          <el-button size="mini" @click="_mergeFee(scope.row)">
+            {{ $t('feeDetailSub.restoreMerge') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-row>
+      <el-col :span="24" class="text-right">
+        <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
+          :total="feeDetailSubInfo.total" layout="total, prev, pager, next" />
+      </el-col>
+    </el-row>
+
+    <merge-fee ref="mergeFee" @merge-success="loadData" />
+    <split-fee ref="splitFee" @split-success="loadData" />
+  </div>
+</template>
+
+<script>
+import { listPayFeeSub, listFee } from '@/api/fee/feeDetailSubApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import MergeFee from './mergeFee'
+import SplitFee from './splitFee'
+import { dateFormat } from '@/utils/dateUtil'
+
+export default {
+  name: 'FeeDetailSub',
+  components: {
+    MergeFee,
+    SplitFee
+  },
+  data() {
+    return {
+      feeDetailSubInfo: {
+        subs: [],
+        feeId: '',
+        total: 0,
+        records: 0,
+        fee: {}
+      },
+      currentPage: 1,
+      pageSize: 10,
+      communityId: ''
+    }
+  },
+  methods: {
+    open(params) {
+      if (!params.feeId) return
+      Object.assign(this.feeDetailSubInfo, params)
+      this.communityId = getCommunityId()
+      this.loadData()
+    },
+    async loadData() {
+      await this._listFeeDetailSub(this.currentPage, this.pageSize)
+      await this._loadFeeDetailSubFeeInfo()
+    },
+    async _listFeeDetailSub(page, rows) {
+      try {
+        const params = {
+          page,
+          row: rows,
+          pcFeeId: this.feeDetailSubInfo.feeId,
+          communityId: this.communityId
+        }
+        const res = await listPayFeeSub(params)
+        this.feeDetailSubInfo.total = res.total
+        this.feeDetailSubInfo.records = res.records
+        this.feeDetailSubInfo.subs = res.data
+        this.currentPage = page
+      } catch (error) {
+        console.error('Failed to load fee sub list:', error)
+      }
+    },
+    async _loadFeeDetailSubFeeInfo() {
+      try {
+        const params = {
+          page: 1,
+          row: 1,
+          feeId: this.feeDetailSubInfo.feeId,
+          communityId: this.communityId
+        }
+        const res = await listFee(params)
+        this.feeDetailSubInfo.fee = res.fees[0] || {}
+      } catch (error) {
+        console.error('Failed to load fee info:', error)
+      }
+    },
+    _mergeFee(fee) {
+      this.$refs.mergeFee.open(fee)
+    },
+    _splitPayFee() {
+      this.$refs.splitFee.open(this.feeDetailSubInfo.fee)
+    },
+    handleCurrentChange(page) {
+      this._listFeeDetailSub(page, this.pageSize)
+    },
+    dateFormat
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+
+.text-right {
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/fee/feeDetailSubDemo.vue b/src/components/fee/feeDetailSubDemo.vue
new file mode 100644
index 0000000..a75b0cd
--- /dev/null
+++ b/src/components/fee/feeDetailSubDemo.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <el-button @click="openComponent">{{ $t('feeDetailSubDemo.openComponent') }}</el-button>
+    <fee-detail-sub ref="feeDetailSub"></fee-detail-sub>
+  </div>
+</template>
+
+<script>
+import FeeDetailSub from './feeDetailSub'
+
+export default {
+  name: 'FeeDetailSubDemo',
+  components: {
+    FeeDetailSub
+  },
+  methods: {
+    openComponent() {
+      this.$refs.feeDetailSub.open({
+        feeId: '123'
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/mergeFee.vue b/src/components/fee/mergeFee.vue
new file mode 100644
index 0000000..e67cd8b
--- /dev/null
+++ b/src/components/fee/mergeFee.vue
@@ -0,0 +1,64 @@
+<template>
+  <el-dialog
+    :title="$t('mergeFee.confirmOperation')"
+    :visible.sync="visible"
+    width="50%"
+    :before-close="closeMergeFeeModel"
+  >
+    <el-table :data="[]" border style="width: 100%">
+      <el-table-column align="center">
+        <template >
+          {{ $t('mergeFee.mergeDescription') }}
+        </template>
+      </el-table-column>
+    </el-table>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="closeMergeFeeModel">{{ $t('mergeFee.cancel') }}</el-button>
+      <el-button type="primary" @click="_doMergeFee">{{ $t('mergeFee.confirmMerge') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { mergePayFee } from '@/api/fee/mergeFeeApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'MergeFee',
+  data() {
+    return {
+      visible: false,
+      mergeFeeInfo: {},
+      communityId: ''
+    }
+  },
+  methods: {
+    open(params) {
+      this.mergeFeeInfo = params
+      this.communityId = getCommunityId()
+      this.visible = true
+    },
+    closeMergeFeeModel() {
+      this.visible = false
+    },
+    async _doMergeFee() {
+      try {
+        const params = {
+          feeId: this.mergeFeeInfo.feeId,
+          communityId: this.communityId
+        }
+        const res = await mergePayFee(params)
+        if (res.code === 0) {
+          this.closeMergeFeeModel()
+          this.$emit('merge-success')
+          this.$message.success(this.$t('mergeFee.mergeSuccess'))
+        } else {
+          this.$message.error(res.msg)
+        }
+      } catch (error) {
+        this.$message.error(error.message)
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/mergeFeeDemo.vue b/src/components/fee/mergeFeeDemo.vue
new file mode 100644
index 0000000..5114348
--- /dev/null
+++ b/src/components/fee/mergeFeeDemo.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <el-button @click="openComponent">{{ $t('mergeFeeDemo.openComponent') }}</el-button>
+    <merge-fee ref="mergeFee" @merge-success="handleMergeSuccess"></merge-fee>
+  </div>
+</template>
+
+<script>
+import MergeFee from './mergeFee'
+
+export default {
+  name: 'MergeFeeDemo',
+  components: {
+    MergeFee
+  },
+  methods: {
+    openComponent() {
+      this.$refs.mergeFee.open({
+        feeId: '123'
+      })
+    },
+    handleMergeSuccess() {
+      this.$message.success(this.$t('mergeFeeDemo.mergeSuccess'))
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/simplifyRoomFee.vue b/src/components/fee/simplifyRoomFee.vue
index 2fc10d8..0465615 100644
--- a/src/components/fee/simplifyRoomFee.vue
+++ b/src/components/fee/simplifyRoomFee.vue
@@ -165,7 +165,7 @@
                   {{ $t('simplifyRoomFee.feeChange') }}
                 </el-dropdown-item>
                 <el-dropdown-item>
-                  <a target="_blank" :href="'/#/pages/fee/feeDetail?feeId=' + scope.row.feeId">
+                  <a target="_blank" :href="'/#/views/fee/feeDetail?feeId=' + scope.row.feeId">
                     {{ $t('simplifyRoomFee.details') }}
                   </a>
                 </el-dropdown-item>
@@ -239,7 +239,7 @@
         </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">
+            <a target="_blank" :href="'/#/views/fee/feeDetail?feeId=' + scope.row.feeId">
               {{ $t('simplifyRoomFee.details') }}
             </a>
           </template>
diff --git a/src/components/simplify/simplifyCarFee.vue b/src/components/simplify/simplifyCarFee.vue
index 8a07d8e..2e24b88 100644
--- a/src/components/simplify/simplifyCarFee.vue
+++ b/src/components/simplify/simplifyCarFee.vue
@@ -87,7 +87,7 @@
                 {{ $t('simplifyCarFee.feeChange') }}
               </el-dropdown-item>
               <el-dropdown-item>
-                <a target="_blank" :href="'/#/pages/fee/feeDetail?feeId='+row.feeId">
+                <a target="_blank" :href="'/#/views/fee/feeDetail?feeId='+row.feeId">
                   {{ $t('simplifyCarFee.details') }}
                 </a>
               </el-dropdown-item>
diff --git a/src/i18n/feeI18n.js b/src/i18n/feeI18n.js
index 6d4da06..eb1c019 100644
--- a/src/i18n/feeI18n.js
+++ b/src/i18n/feeI18n.js
@@ -32,6 +32,7 @@ import { messages as refundDepositFeeMessages } from '../views/fee/refundDeposit
 import { messages as createFeeByComboMessages } from '../views/fee/createFeeByComboLang'
 import { messages as owePayFeeOrderMessages } from '../views/fee/owePayFeeOrderLang'
 import { messages as printOweFeeMessages } from '../views/fee/printOweFeeLang'
+import { messages as feeDetailMessages } from '../views/fee/feeDetailLang'
 
 export const messages = {
     en: {
@@ -69,6 +70,7 @@ export const messages = {
         ...createFeeByComboMessages.en,
         ...owePayFeeOrderMessages.en,
         ...printOweFeeMessages.en,
+        ...feeDetailMessages.en,
     },
     zh: {
         ...contractCreateFeeMessages.zh,
@@ -105,5 +107,6 @@ export const messages = {
         ...createFeeByComboMessages.zh,
         ...owePayFeeOrderMessages.zh,
         ...printOweFeeMessages.zh,
+        ...feeDetailMessages.zh,
     }
 }
\ No newline at end of file
diff --git a/src/router/feeRouter.js b/src/router/feeRouter.js
index 559369d..9f7c110 100644
--- a/src/router/feeRouter.js
+++ b/src/router/feeRouter.js
@@ -154,5 +154,10 @@ export default [
         name: '/views/fee/printOweFee',
         component: () => import('@/views/fee/printOweFeeList.vue')
     },
+    {
+        path: '/views/fee/feeDetail',
+        name: '/views/fee/feeDetail',
+        component: () => import('@/views/fee/feeDetail.vue')
+    },
 
 ]
\ No newline at end of file
diff --git a/src/views/fee/feeConfigManageList.vue b/src/views/fee/feeConfigManageList.vue
index 712ab9f..fd80c88 100644
--- a/src/views/fee/feeConfigManageList.vue
+++ b/src/views/fee/feeConfigManageList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="animated fadeInRight">
+  <div class="animated fadeInRight padding">
     <el-row :gutter="20">
       <el-col :span="3">
         <div class="border-radius">
diff --git a/src/views/fee/feeDetail.vue b/src/views/fee/feeDetail.vue
new file mode 100644
index 0000000..b84c85d
--- /dev/null
+++ b/src/views/fee/feeDetail.vue
@@ -0,0 +1,359 @@
+<template>
+  <div class="fee-detail-container">
+    <div class="white-bg padding-left padding-right padding-top border-radius-top">
+      <div class="flex justify-between">
+        <div class="text-title">
+          {{ $t('feeDetail.title') }}
+        </div>
+      </div>
+
+      <!-- 费用信息 -->
+      <div class="margin-top">
+        <el-row>
+          <el-col :span="24">
+            <el-row>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('feeDetail.feeId') }}
+                  </label>
+                  <label>{{ feeDetailInfo.feeId }}</label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('feeDetail.feeFlag') }}
+                  </label>
+                  <label>{{ feeDetailInfo.feeFlagName || '-' }}</label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('feeDetail.feeType') }}
+                  </label>
+                  <label>{{ feeDetailInfo.feeTypeCdName }}</label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('feeDetail.payerObj') }}
+                  </label>
+                  <label>{{ feeDetailInfo.payerObjName || '-' }}</label>
+                </div>
+              </el-col>
+            </el-row>
+
+            <el-row>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('feeDetail.feeItem') }}
+                  </label>
+                  <label>{{ feeDetailInfo.feeName }}</label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('feeDetail.feeStatus') }}
+                  </label>
+                  <label>{{ feeDetailInfo.stateName }}</label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('feeDetail.createTime') }}
+                  </label>
+                  <label>{{ feeDetailInfo.startTime }}</label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('feeDetail.batchId') }}
+                  </label>
+                  <label>{{ feeDetailInfo.batchId }}</label>
+                </div>
+              </el-col>
+            </el-row>
+
+            <el-row>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('feeDetail.startTime') }}
+                  </label>
+                  <label>{{ getEndTime(feeDetailInfo) }}</label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('feeDetail.endTime') }}
+                  </label>
+                  <label>{{ getDeadlineTime(feeDetailInfo) }}</label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('feeDetail.owedAmount') }}
+                  </label>
+                  <label>{{ feeDetailInfo.amountOwed }}</label>
+                </div>
+              </el-col>
+            </el-row>
+
+            <el-row>
+              <el-col :span="6" v-for="(item, index) in feeDetailInfo.attrs" :key="index">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ item.specCdName }}:
+                  </label>
+                  <label>{{ item.value }}</label>
+                </div>
+              </el-col>
+            </el-row>
+          </el-col>
+        </el-row>
+      </div>
+
+      <div class="vc-line-primary margin-top"></div>
+
+      <div class="margin-top-sm">
+        <el-tabs v-model="feeDetailInfo._currentTab" @tab-click="changeTab(feeDetailInfo._currentTab)">
+          <el-tab-pane :label="$t('feeDetail.paymentRecord')" name="feeDetailHisFee"></el-tab-pane>
+          <el-tab-pane :label="$t('feeDetail.monthlyView')" name="feeDetailMonthFee"></el-tab-pane>
+          <el-tab-pane v-if="feeDetailInfo.payerObjType == '3333'" :label="$t('feeDetail.relatedRoom')"
+            name="feeDetailRoom">
+          </el-tab-pane>
+          <el-tab-pane v-if="feeDetailInfo.payerObjType == '6666'" :label="$t('feeDetail.relatedCar')"
+            name="feeDetailCar">
+          </el-tab-pane>
+          <el-tab-pane v-if="feeDetailInfo.payerObjType == '7777'" :label="$t('feeDetail.relatedContract')"
+            name="feeDetailContract">
+          </el-tab-pane>
+          <el-tab-pane :label="$t('feeDetail.modificationRecord')" name="feeDetailHis"></el-tab-pane>
+          <el-tab-pane :label="$t('feeDetail.feeItem')" name="feeDetailConfig"></el-tab-pane>
+          <el-tab-pane :label="$t('feeDetail.owner')" name="feeDetailOwner"></el-tab-pane>
+          <el-tab-pane :label="$t('feeDetail.sameFeeObj')" name="feeDetailFeeObj"></el-tab-pane>
+          <el-tab-pane :label="$t('feeDetail.relatedMeter')" name="feeDetailMeter"></el-tab-pane>
+          <el-tab-pane :label="$t('feeDetail.relatedImport')" name="feeDetailImport"></el-tab-pane>
+          <el-tab-pane :label="$t('feeDetail.discountApply')" name="feeDetailDiscount"></el-tab-pane>
+          <el-tab-pane :label="$t('feeDetail.reprintReceipt')" name="feeDetailReceipt"></el-tab-pane>
+          <el-tab-pane v-if="feeDetailInfo.feeFlag != '2006012'" :label="$t('feeDetail.feeSplit')"
+            name="feeDetailSub"></el-tab-pane>
+          <el-tab-pane v-if="feeDetailInfo.feeFlag == '2006012'" :label="$t('feeDetail.billRule')"
+            name="feeDetailFeeRule"></el-tab-pane>
+          <el-tab-pane v-if="feeDetailInfo.feeFlag == '2006012'" :label="$t('feeDetail.feeBill')"
+            name="feeDetailRuleBill"></el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+
+    <div class="white-bg padding-left padding-right padding-top border-radius-bottom">
+      <component :is="feeDetailInfo._currentTab" :key="feeDetailInfo._currentTab" :ref="feeDetailInfo._currentTab"
+        :feeId="feeDetailInfo.feeId" :payerObjId="feeDetailInfo.payerObjId" :configId="feeDetailInfo.configId"
+        :state="feeDetailInfo.state" :ownerId="ownerId">
+      </component>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { getFeeDetail } from '@/api/fee/feeDetailApi'
+import FeeDetailHisFee from '@/components/fee/feeDetailHisFee'
+import FeeDetailMonthFee from '@/components/fee/feeDetailMonthFee'
+import FeeDetailRoom from '@/components/fee/feeDetailRoom'
+import FeeDetailCar from '@/components/fee/feeDetailCar'
+import FeeDetailContract from '@/components/fee/feeDetailContract'
+import FeeDetailConfig from '@/components/fee/feeDetailConfig'
+import FeeDetailHis from '@/components/fee/feeDetailHis'
+import FeeDetailOwner from '@/components/fee/feeDetailOwner'
+import FeeDetailFeeObj from '@/components/fee/FeeDetailFeeObj'
+import FeeDetailMeter from '@/components/fee/feeDetailMeter'
+import FeeDetailImport from '@/components/fee/feeDetailImport'
+import FeeDetailDiscount from '@/components/fee/feeDetailDiscount'
+import FeeDetailReceipt from '@/components/fee/feeDetailReceipt'
+import FeeDetailSub from '@/components/fee/feeDetailSub'
+import FeeDetailFeeRule from '@/components/fee/feeDetailFeeRule'
+import FeeDetailRuleBill from '@/components/fee/feeDetailRuleBill'
+
+export default {
+  name: 'FeeDetail',
+  components: {
+    FeeDetailHisFee,
+    FeeDetailMonthFee,
+    FeeDetailRoom,
+    FeeDetailCar,
+    FeeDetailContract,
+    FeeDetailConfig,
+    FeeDetailHis,
+    FeeDetailOwner,
+    FeeDetailFeeObj,
+    FeeDetailMeter,
+    FeeDetailImport,
+    FeeDetailDiscount,
+    FeeDetailReceipt,
+    FeeDetailSub,
+    FeeDetailFeeRule,
+    FeeDetailRuleBill
+  },
+  data() {
+    return {
+      feeDetailInfo: {
+        feeId: '',
+        configId: '',
+        feeFlag: '',
+        feeFlagName: '',
+        feeTypeCdName: '',
+        payerObjName: '',
+        payerObjId: '',
+        payerObjType: '',
+        feeName: '',
+        stateName: '',
+        state: '',
+        startTime: '',
+        batchId: '',
+        endTime: '',
+        deadlineTime: '',
+        amountOwed: '',
+        attrs: [],
+        _currentTab: 'feeDetailHisFee',
+        needBack: false
+      },
+      communityId: ''
+    }
+  },
+  computed: {
+    ownerId() {
+      const ownerAttr = this.feeDetailInfo.attrs.find(item => item.specCd === '390007')
+      return ownerAttr ? ownerAttr.value : ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.feeDetailInfo.feeId = this.$route.query.feeId
+    if (this.feeDetailInfo.feeId) {
+      this.loadFeeDetailInfo()
+    }
+  },
+  methods: {
+    async loadFeeDetailInfo() {
+      try {
+        const params = {
+          page: 1,
+          row: 1,
+          feeId: this.feeDetailInfo.feeId,
+          communityId: this.communityId
+        }
+        const response = await getFeeDetail(params)
+        const feeInfo = response.fees[0]
+        Object.assign(this.feeDetailInfo, feeInfo)
+        this.feeDetailInfo.attrs = feeInfo.feeAttrs || []
+        this.changeTab(this.feeDetailInfo._currentTab)
+      } catch (error) {
+        console.error('Failed to load fee detail:', error)
+      }
+    },
+    changeTab(tab) {
+      this.feeDetailInfo._currentTab = tab
+      setTimeout(() => {
+          this.$refs[tab].open({
+            feeId: this.feeDetailInfo.feeId,
+            payerObjId: this.feeDetailInfo.payerObjId,
+            configId: this.feeDetailInfo.configId,
+            state: this.feeDetailInfo.state,
+            ownerId: this.ownerId
+          })
+      },500)
+    },
+    getDeadlineTime(fee) {
+      if (fee.amountOwed == 0 && fee.endTime == fee.deadlineTime) {
+        return "-"
+      }
+      if (fee.state == '2009001') {
+        return "-"
+      }
+      return fee.deadlineTime
+    },
+    getEndTime(fee) {
+      if (fee.state == '2009001') {
+        return "-"
+      }
+      return fee.endTime
+    }
+  }
+}
+</script>
+
+<style scoped>
+.fee-detail-container {
+  background-color: #f5f5f5;
+  padding: 20px;
+}
+
+.white-bg {
+  background-color: white;
+}
+
+.padding-left {
+  padding-left: 15px;
+}
+
+.padding-right {
+  padding-right: 15px;
+}
+
+.padding-top {
+  padding-top: 15px;
+}
+
+.border-radius-top {
+  border-radius: 4px 4px 0 0;
+}
+
+.border-radius-bottom {
+  border-radius: 0 0 4px 4px;
+}
+
+.flex {
+  display: flex;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.text-title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.margin-top {
+  margin-top: 15px;
+}
+
+.margin-top-sm {
+  margin-top: 10px;
+}
+
+.form-group {
+  margin-bottom: 15px;
+  text-align: left;
+}
+
+.col-form-label {
+  margin-bottom: 5px;
+}
+
+.vc-line-primary {
+  height: 1px;
+  background-color: #e8e8e8;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/fee/feeDetailCarLang.js b/src/views/fee/feeDetailCarLang.js
new file mode 100644
index 0000000..25cf2e5
--- /dev/null
+++ b/src/views/fee/feeDetailCarLang.js
@@ -0,0 +1,36 @@
+export const messages = {
+  en: {
+    feeDetailCar: {
+      licensePlate: 'License Plate',
+      licenseType: 'License Type',
+      carType: 'Car Type',
+      color: 'Color',
+      owner: 'Owner',
+      parkingSpace: 'Parking Space',
+      validityPeriod: 'Validity Period',
+      temporaryCar: 'Temporary Car',
+      parkingLot: 'Parking Lot',
+      spaceReleased: 'Space Released'
+    },
+    feeDetailCarDemo: {
+      openComponent: 'Open Car Detail'
+    }
+  },
+  zh: {
+    feeDetailCar: {
+      licensePlate: '车牌号',
+      licenseType: '车牌类型',
+      carType: '车辆类型',
+      color: '颜色',
+      owner: '业主',
+      parkingSpace: '车位',
+      validityPeriod: '有效期',
+      temporaryCar: '临时车',
+      parkingLot: '车场',
+      spaceReleased: '车位已释放'
+    },
+    feeDetailCarDemo: {
+      openComponent: '打开车辆详情'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/feeDetailConfigLang.js b/src/views/fee/feeDetailConfigLang.js
new file mode 100644
index 0000000..2ba2c75
--- /dev/null
+++ b/src/views/fee/feeDetailConfigLang.js
@@ -0,0 +1,50 @@
+export const messages = {
+  en: {
+    feeDetailConfig: {
+      feeType: 'Fee Type',
+      feeItem: 'Fee Item',
+      feeFlag: 'Fee Flag',
+      reminderType: 'Reminder Type',
+      paymentType: 'Payment Type',
+      paymentCycle: 'Payment Cycle',
+      unit: 'Unit',
+      formula: 'Formula',
+      unitPrice: 'Unit Price',
+      additionalFee: 'Additional/Fixed Fee',
+      accountDeduction: 'Account Deduction',
+      mobilePayment: 'Mobile Payment',
+      decimalPlaces: 'Decimal Places',
+      prepaid: 'Prepaid',
+      postpaid: 'Postpaid',
+      yes: 'Yes',
+      no: 'No'
+    },
+    feeDetailConfigDemo: {
+      openComponent: 'Open Config Detail'
+    }
+  },
+  zh: {
+    feeDetailConfig: {
+      feeType: '费用类型',
+      feeItem: '收费项目',
+      feeFlag: '费用标识',
+      reminderType: '催缴类型',
+      paymentType: '付费类型',
+      paymentCycle: '缴费周期',
+      unit: '单位',
+      formula: '公式',
+      unitPrice: '计费单价',
+      additionalFee: '附加/固定费用',
+      accountDeduction: '账户抵扣',
+      mobilePayment: '手机缴费',
+      decimalPlaces: '保留小数位',
+      prepaid: '预付费',
+      postpaid: '后付费',
+      yes: '是',
+      no: '否'
+    },
+    feeDetailConfigDemo: {
+      openComponent: '打开配置详情'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/feeDetailContractLang.js b/src/views/fee/feeDetailContractLang.js
new file mode 100644
index 0000000..ba403e7
--- /dev/null
+++ b/src/views/fee/feeDetailContractLang.js
@@ -0,0 +1,36 @@
+export const messages = {
+  en: {
+    feeDetailContract: {
+      contractName: 'Contract Name',
+      contractCode: 'Contract Code',
+      parentContractCode: 'Parent Contract Code',
+      contractType: 'Contract Type',
+      operator: 'Operator',
+      contractAmount: 'Contract Amount',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      draftTime: 'Draft Time',
+      status: 'Status'
+    },
+    feeDetailContractDemo: {
+      openComponent: 'Open Contract Detail'
+    }
+  },
+  zh: {
+    feeDetailContract: {
+      contractName: '合同名称',
+      contractCode: '合同编号',
+      parentContractCode: '父合同编号',
+      contractType: '合同类型',
+      operator: '经办人',
+      contractAmount: '合同金额',
+      startTime: '开始时间',
+      endTime: '结束时间',
+      draftTime: '起草时间',
+      status: '状态'
+    },
+    feeDetailContractDemo: {
+      openComponent: '打开合同详情'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/feeDetailDiscountLang.js b/src/views/fee/feeDetailDiscountLang.js
new file mode 100644
index 0000000..15d098e
--- /dev/null
+++ b/src/views/fee/feeDetailDiscountLang.js
@@ -0,0 +1,44 @@
+export const messages = {
+  en: {
+    feeDetailDiscount: {
+      roomName: 'Room(Building-Unit-Room)',
+      discountId: 'Discount ID',
+      discountName: 'Discount Name',
+      applyType: 'Apply Type',
+      applicant: 'Applicant',
+      applicantPhone: 'Applicant Phone',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      status: 'Status',
+      createTime: 'Create Time',
+      useStatus: 'Use Status',
+      notUsed: 'Not Used',
+      used: 'Used',
+      returnType: 'Return Type',
+      accountBalance: 'Account Balance',
+      discount: 'Discount',
+      returnAmount: 'Return Amount'
+    }
+  },
+  zh: {
+    feeDetailDiscount: {
+      roomName: '房屋(楼栋-单元-房屋)',
+      discountId: '折扣ID',
+      discountName: '折扣名称',
+      applyType: '申请类型',
+      applicant: '申请人',
+      applicantPhone: '申请电话',
+      startTime: '开始时间',
+      endTime: '结束时间',
+      status: '状态',
+      createTime: '创建时间',
+      useStatus: '使用状态',
+      notUsed: '未使用',
+      used: '已使用',
+      returnType: '返还类型',
+      accountBalance: '账户余额',
+      discount: '折扣',
+      returnAmount: '返还金额'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/feeDetailHisFeeLang.js b/src/views/fee/feeDetailHisFeeLang.js
new file mode 100644
index 0000000..8e763ae
--- /dev/null
+++ b/src/views/fee/feeDetailHisFeeLang.js
@@ -0,0 +1,42 @@
+export const messages = {
+  en: {
+    feeDetailHisFee: {
+      feeName: 'Fee Item',
+      payerObjName: 'Charge Object',
+      cycles: 'Cycle (Unit: Month)',
+      amount: 'Receivable/Received (Unit: Yuan)',
+      paymentMethod: 'Payment Method',
+      paymentPeriod: 'Payment Period',
+      paymentTime: 'Payment Time',
+      cashier: 'Cashier',
+      status: 'Status',
+      remark: 'Remark',
+      operation: 'Operation',
+      detail: 'Detail',
+      accountDeduction: 'Account Deduction'
+    },
+    feeDetailHisFeeDemo: {
+      openComponent: 'Open Fee Detail History'
+    }
+  },
+  zh: {
+    feeDetailHisFee: {
+      feeName: '费用项',
+      payerObjName: '收费对象',
+      cycles: '周期(单位:月)',
+      amount: '应收/实收(单位:元)',
+      paymentMethod: '缴费方式',
+      paymentPeriod: '缴费起始段',
+      paymentTime: '缴费时间',
+      cashier: '收银员',
+      status: '状态',
+      remark: '备注',
+      operation: '操作',
+      detail: '详情',
+      accountDeduction: '账户扣款'
+    },
+    feeDetailHisFeeDemo: {
+      openComponent: '打开历史费用详情'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/feeDetailHisLang.js b/src/views/fee/feeDetailHisLang.js
new file mode 100644
index 0000000..c7c2ebb
--- /dev/null
+++ b/src/views/fee/feeDetailHisLang.js
@@ -0,0 +1,30 @@
+export const messages = {
+  en: {
+    feeDetailHis: {
+      feeName: 'Fee Item',
+      startTime: 'Account Time',
+      endTime: 'Billing Start Time',
+      operation: 'Action',
+      operator: 'Operator',
+      operationTime: 'Operation Time',
+      add: 'Add',
+      delete: 'Delete',
+      modifyNew: 'Modify(New)',
+      modifyOld: 'Modify(Old)'
+    }
+  },
+  zh: {
+    feeDetailHis: {
+      feeName: '费用项',
+      startTime: '建账时间',
+      endTime: '计费起始时间',
+      operation: '动作',
+      operator: '操作人',
+      operationTime: '操作时间',
+      add: '添加',
+      delete: '删除',
+      modifyNew: '修改(新)',
+      modifyOld: '修改(旧)'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/feeDetailImportLang.js b/src/views/fee/feeDetailImportLang.js
new file mode 100644
index 0000000..644eea8
--- /dev/null
+++ b/src/views/fee/feeDetailImportLang.js
@@ -0,0 +1,32 @@
+export const messages = {
+  en: {
+    feeDetailImport: {
+      floorNum: 'Building No.',
+      unitNum: 'Unit No.',
+      roomNum: 'Room No.',
+      feeName: 'Fee Name',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      totalAmount: 'Total Amount',
+      remark: 'Remark',
+      status: 'Status',
+      importSuccess: 'Import Success',
+      importFailed: 'Import Failed'
+    }
+  },
+  zh: {
+    feeDetailImport: {
+      floorNum: '楼栋编号',
+      unitNum: '单元编号',
+      roomNum: '房屋编号',
+      feeName: '费用名称',
+      startTime: '开始时间',
+      endTime: '结束时间',
+      totalAmount: '总金额',
+      remark: '备注',
+      status: '状态',
+      importSuccess: '导入成功',
+      importFailed: '导入失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/feeDetailLang.js b/src/views/fee/feeDetailLang.js
new file mode 100644
index 0000000..73f09e2
--- /dev/null
+++ b/src/views/fee/feeDetailLang.js
@@ -0,0 +1,493 @@
+
+export const messages = {
+  en: {
+    feeDetail: {
+      title: 'Fee Information',
+      feeId: 'Fee ID:',
+      feeFlag: 'Fee Flag:',
+      feeType: 'Fee Type:',
+      payerObj: 'Payer:',
+      feeItem: 'Fee Item:',
+      feeStatus: 'Fee Status:',
+      createTime: 'Create Time:',
+      batchId: 'Batch:',
+      startTime: 'Start Time:',
+      endTime: 'End Time:',
+      owedAmount: 'Owed Amount:',
+      paymentRecord: 'Payment Records',
+      monthlyView: 'Monthly View',
+      relatedRoom: 'Related Rooms',
+      relatedCar: 'Related Cars',
+      relatedContract: 'Related Contracts',
+      modificationRecord: 'Modification Records',
+      owner: 'Owner',
+      sameFeeObj: 'Same Fee Objects',
+      relatedMeter: 'Related Meters',
+      relatedImport: 'Related Imports',
+      discountApply: 'Discount Application',
+      reprintReceipt: 'Reprint Receipt',
+      feeSplit: 'Fee Split',
+      billRule: 'Bill Rules',
+      feeBill: 'Fee Bills'
+    },
+    feeDetailHisFee: {
+      feeName: 'Fee Item',
+      payerObjName: 'Charge Object',
+      cycles: 'Cycle (Unit: Month)',
+      amount: 'Receivable/Received (Unit: Yuan)',
+      paymentMethod: 'Payment Method',
+      paymentPeriod: 'Payment Period',
+      paymentTime: 'Payment Time',
+      cashier: 'Cashier',
+      status: 'Status',
+      remark: 'Remark',
+      operation: 'Operation',
+      detail: 'Detail',
+      accountDeduction: 'Account Deduction'
+    },
+    feeDetailHisFeeDemo: {
+      openComponent: 'Open Fee Detail History'
+    },
+    feeDetailMonthFee: {
+      feeItem: 'Fee Item',
+      feeFlag: 'Fee Flag',
+      feeType: 'Fee Type',
+      chargeYearMonth: 'Charge Year-Month',
+      receivableAmount: 'Receivable Amount',
+      description: 'Description',
+      lastDegrees: 'Last Degrees:',
+      currentDegrees: 'Current Degrees:',
+      unitPrice: 'Unit Price:',
+      additionalFee: 'Additional Fee:',
+      usage: 'Usage:',
+      algorithm: 'Algorithm:',
+      fixedFee: 'Fixed Fee:'
+    },
+    feeDetailMonthFeeDemo: {
+      openComponent: 'Open Month Fee Detail'
+    },
+    feeDetailRoom: {
+      roomId: 'Room ID',
+      floor: 'Floor',
+      type: 'Type',
+      area: 'Built-up/Indoor Area',
+      rent: 'Rent',
+      roomStatus: 'Room Status',
+      roomArrears: 'Room Arrears',
+      operation: 'Operation',
+      businessAcceptance: 'Business Acceptance',
+      updateDaily: 'Updated Daily',
+      searchPlaceholder: 'Please enter room number like 1-1-1'
+    },
+    feeDetailRoomDemo: {
+      openComponent: 'Open Room Detail'
+    },
+    feeDetailCar: {
+      licensePlate: 'License Plate',
+      licenseType: 'License Type',
+      carType: 'Car Type',
+      color: 'Color',
+      owner: 'Owner',
+      parkingSpace: 'Parking Space',
+      validityPeriod: 'Validity Period',
+      temporaryCar: 'Temporary Car',
+      parkingLot: 'Parking Lot',
+      spaceReleased: 'Space Released'
+    },
+    feeDetailCarDemo: {
+      openComponent: 'Open Car Detail'
+    },
+    feeDetailContract: {
+      contractName: 'Contract Name',
+      contractCode: 'Contract Code',
+      parentContractCode: 'Parent Contract Code',
+      contractType: 'Contract Type',
+      operator: 'Operator',
+      contractAmount: 'Contract Amount',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      draftTime: 'Draft Time',
+      status: 'Status'
+    },
+    feeDetailContractDemo: {
+      openComponent: 'Open Contract Detail'
+    },
+    feeDetailConfig: {
+      feeType: 'Fee Type',
+      feeItem: 'Fee Item',
+      feeFlag: 'Fee Flag',
+      reminderType: 'Reminder Type',
+      paymentType: 'Payment Type',
+      paymentCycle: 'Payment Cycle',
+      unit: 'Unit',
+      formula: 'Formula',
+      unitPrice: 'Unit Price',
+      additionalFee: 'Additional/Fixed Fee',
+      accountDeduction: 'Account Deduction',
+      mobilePayment: 'Mobile Payment',
+      decimalPlaces: 'Decimal Places',
+      prepaid: 'Prepaid',
+      postpaid: 'Postpaid',
+      yes: 'Yes',
+      no: 'No'
+    },
+    feeDetailConfigDemo: {
+      openComponent: 'Open Config Detail'
+    },
+    feeDetailHis: {
+      feeName: 'Fee Item',
+      startTime: 'Account Time',
+      endTime: 'Billing Start Time',
+      operation: 'Action',
+      operator: 'Operator',
+      operationTime: 'Operation Time',
+      add: 'Add',
+      delete: 'Delete',
+      modifyNew: 'Modify(New)',
+      modifyOld: 'Modify(Old)'
+    },
+    feeDetailOwner: {
+      ownerFace: 'Owner Face',
+      name: 'Name',
+      gender: 'Gender',
+      male: 'Male',
+      female: 'Female',
+      idCard: 'ID Card',
+      address: 'Address',
+      roomCount: 'Room Count',
+      memberCount: 'Member Count',
+      carCount: 'Car Count',
+      complaintCount: 'Complaint',
+      repairCount: 'Repair',
+      oweFee: 'Owe Fee',
+      contractCount: 'Contract'
+    },
+    feeDetailMeter: {
+      meterId: 'Meter ID',
+      meterType: 'Meter Type',
+      objName: 'Object Name',
+      preDegrees: 'Previous Degree',
+      curDegrees: 'Current Degree',
+      preReadingTime: 'Previous Reading Time',
+      curReadingTime: 'Current Reading Time',
+      createTime: 'Create Time'
+    },
+    feeDetailImport: {
+      floorNum: 'Building No.',
+      unitNum: 'Unit No.',
+      roomNum: 'Room No.',
+      feeName: 'Fee Name',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      totalAmount: 'Total Amount',
+      remark: 'Remark',
+      status: 'Status',
+      importSuccess: 'Import Success',
+      importFailed: 'Import Failed'
+    },
+    feeDetailDiscount: {
+      roomName: 'Room(Building-Unit-Room)',
+      discountId: 'Discount ID',
+      discountName: 'Discount Name',
+      applyType: 'Apply Type',
+      applicant: 'Applicant',
+      applicantPhone: 'Applicant Phone',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      status: 'Status',
+      createTime: 'Create Time',
+      useStatus: 'Use Status',
+      notUsed: 'Not Used',
+      used: 'Used',
+      returnType: 'Return Type',
+      accountBalance: 'Account Balance',
+      discount: 'Discount',
+      returnAmount: 'Return Amount'
+    },
+    feeDetailReceipt: {
+      print: 'Print',
+      printSmall: 'Print Small',
+      printApply: 'Print Apply',
+      feeType: 'Fee Type',
+      owner: 'Owner',
+      feeItem: 'Fee Item',
+      feePeriod: 'Fee Period',
+      totalAmount: 'Total Amount',
+      paymentTime: 'Payment Time',
+      receiptId: 'Receipt ID',
+      yuan: 'Yuan',
+      selectPrintReceipt: 'Please select receipt to print',
+      selectPrintApply: 'Please select'
+    },
+    mergeFee: {
+      confirmOperation: 'Please confirm your operation!',
+      mergeDescription: 'Merge split fees. After merging, the split fees will be ended and the original fee will be enabled',
+      cancel: 'Cancel',
+      confirmMerge: 'Confirm Merge',
+      mergeSuccess: 'Merge successful, please check the merged fee in business processing'
+    },
+    mergeFeeDemo: {
+      openComponent: 'Open Merge Fee Component',
+      mergeSuccess: 'Merge operation completed successfully'
+    },
+    feeDetailSub: {
+      split: 'Split',
+      parentFeeId: 'Parent Fee ID',
+      childFeeId: 'Child Fee ID',
+      feeName: 'Fee Name',
+      feeObject: 'Fee Object',
+      billingPeriod: 'Billing Period',
+      splitTime: 'Split Time',
+      operation: 'Operation',
+      restoreMerge: 'Restore Merge'
+    },
+    feeDetailSubDemo: {
+      openComponent: 'Open Fee Detail Sub Component'
+    }
+  },
+  zh: {
+    feeDetail: {
+      title: '费用信息',
+      feeId: '费用ID：',
+      feeFlag: '费用标识：',
+      feeType: '费用类型：',
+      payerObj: '付费对象：',
+      feeItem: '费用项：',
+      feeStatus: '费用状态：',
+      createTime: '建账时间：',
+      batchId: '批次：',
+      startTime: '应收开始时间：',
+      endTime: '应收结束时间：',
+      owedAmount: '欠费金额：',
+      paymentRecord: '缴费记录',
+      monthlyView: '按月展示',
+      relatedRoom: '关联房屋',
+      relatedCar: '关联车辆',
+      relatedContract: '关联合同',
+      modificationRecord: '修改记录',
+      owner: '业主',
+      sameFeeObj: '同费用对象',
+      relatedMeter: '关联抄表',
+      relatedImport: '关联导入',
+      discountApply: '优惠申请',
+      reprintReceipt: '补打收据',
+      feeSplit: '费用拆分',
+      billRule: '账单规则',
+      feeBill: '费用账单'
+    },
+    feeDetailHisFee: {
+      feeName: '费用项',
+      payerObjName: '收费对象',
+      cycles: '周期(单位:月)',
+      amount: '应收/实收(单位:元)',
+      paymentMethod: '缴费方式',
+      paymentPeriod: '缴费起始段',
+      paymentTime: '缴费时间',
+      cashier: '收银员',
+      status: '状态',
+      remark: '备注',
+      operation: '操作',
+      detail: '详情',
+      accountDeduction: '账户扣款'
+    },
+    feeDetailHisFeeDemo: {
+      openComponent: '打开历史费用详情'
+    },
+    feeDetailMonthFee: {
+      feeItem: '费用项目',
+      feeFlag: '费用标识',
+      feeType: '费用类型',
+      chargeYearMonth: '收费年月',
+      receivableAmount: '应收金额',
+      description: '说明',
+      lastDegrees: '上期度数：',
+      currentDegrees: '本期度数：',
+      unitPrice: '单价：',
+      additionalFee: '附加费：',
+      usage: '用量：',
+      algorithm: '算法：',
+      fixedFee: '固定费：'
+    },
+    feeDetailMonthFeeDemo: {
+      openComponent: '打开月度费用详情'
+    },
+    feeDetailRoom: {
+      roomId: '房屋ID',
+      floor: '楼层',
+      type: '类型',
+      area: '建筑/室内面积',
+      rent: '租金',
+      roomStatus: '房屋状态',
+      roomArrears: '房屋欠费',
+      operation: '操作',
+      businessAcceptance: '业务受理',
+      updateDaily: '按天更新',
+      searchPlaceholder: '请输入房屋编号 楼栋-单元-房屋 如1-1-1'
+    },
+    feeDetailRoomDemo: {
+      openComponent: '打开房屋详情'
+    },
+    feeDetailCar: {
+      licensePlate: '车牌号',
+      licenseType: '车牌类型',
+      carType: '车辆类型',
+      color: '颜色',
+      owner: '业主',
+      parkingSpace: '车位',
+      validityPeriod: '有效期',
+      temporaryCar: '临时车',
+      parkingLot: '车场',
+      spaceReleased: '车位已释放'
+    },
+    feeDetailCarDemo: {
+      openComponent: '打开车辆详情'
+    },
+    feeDetailContract: {
+      contractName: '合同名称',
+      contractCode: '合同编号',
+      parentContractCode: '父合同编号',
+      contractType: '合同类型',
+      operator: '经办人',
+      contractAmount: '合同金额',
+      startTime: '开始时间',
+      endTime: '结束时间',
+      draftTime: '起草时间',
+      status: '状态'
+    },
+    feeDetailContractDemo: {
+      openComponent: '打开合同详情'
+    },
+    feeDetailConfig: {
+      feeType: '费用类型',
+      feeItem: '收费项目',
+      feeFlag: '费用标识',
+      reminderType: '催缴类型',
+      paymentType: '付费类型',
+      paymentCycle: '缴费周期',
+      unit: '单位',
+      formula: '公式',
+      unitPrice: '计费单价',
+      additionalFee: '附加/固定费用',
+      accountDeduction: '账户抵扣',
+      mobilePayment: '手机缴费',
+      decimalPlaces: '保留小数位',
+      prepaid: '预付费',
+      postpaid: '后付费',
+      yes: '是',
+      no: '否'
+    },
+    feeDetailConfigDemo: {
+      openComponent: '打开配置详情'
+    },
+    feeDetailHis: {
+      feeName: '费用项',
+      startTime: '建账时间',
+      endTime: '计费起始时间',
+      operation: '动作',
+      operator: '操作人',
+      operationTime: '操作时间',
+      add: '添加',
+      delete: '删除',
+      modifyNew: '修改(新)',
+      modifyOld: '修改(旧)'
+    },
+    feeDetailOwner: {
+      ownerFace: '业主人脸',
+      name: '姓名',
+      gender: '性别',
+      male: '男',
+      female: '女',
+      idCard: '身份证',
+      address: '家庭住址',
+      roomCount: '房屋数',
+      memberCount: '业主成员',
+      carCount: '车辆数',
+      complaintCount: '投诉',
+      repairCount: '报修',
+      oweFee: '欠费',
+      contractCount: '业主合同'
+    },
+    feeDetailMeter: {
+      meterId: '表ID',
+      meterType: '表类型',
+      objName: '对象名称',
+      preDegrees: '上期度数',
+      curDegrees: '本期度数',
+      preReadingTime: '上期读表时间',
+      curReadingTime: '本期读表时间',
+      createTime: '创建时间'
+    },
+    feeDetailImport: {
+      floorNum: '楼栋编号',
+      unitNum: '单元编号',
+      roomNum: '房屋编号',
+      feeName: '费用名称',
+      startTime: '开始时间',
+      endTime: '结束时间',
+      totalAmount: '总金额',
+      remark: '备注',
+      status: '状态',
+      importSuccess: '导入成功',
+      importFailed: '导入失败'
+    },
+    feeDetailDiscount: {
+      roomName: '房屋(楼栋-单元-房屋)',
+      discountId: '折扣ID',
+      discountName: '折扣名称',
+      applyType: '申请类型',
+      applicant: '申请人',
+      applicantPhone: '申请电话',
+      startTime: '开始时间',
+      endTime: '结束时间',
+      status: '状态',
+      createTime: '创建时间',
+      useStatus: '使用状态',
+      notUsed: '未使用',
+      used: '已使用',
+      returnType: '返还类型',
+      accountBalance: '账户余额',
+      discount: '折扣',
+      returnAmount: '返还金额'
+    },
+    feeDetailReceipt: {
+      print: '打印',
+      printSmall: '打印小票',
+      printApply: '申请单',
+      feeType: '费用类型',
+      owner: '业主',
+      feeItem: '费用项目',
+      feePeriod: '收费时间段',
+      totalAmount: '总金额',
+      paymentTime: '缴费时间',
+      receiptId: '收据ID',
+      yuan: '元',
+      selectPrintReceipt: '请选择打印收据',
+      selectPrintApply: '请选择'
+    },
+    mergeFee: {
+      confirmOperation: '请确认您的操作!',
+      mergeDescription: '合并拆分费用，合并后，将结束拆分后的费用，启用原费用',
+      cancel: '点错了',
+      confirmMerge: '确认合并',
+      mergeSuccess: '合并成功，请到业务受理查看合并后费用'
+    },
+    mergeFeeDemo: {
+      openComponent: '打开合并费用组件',
+      mergeSuccess: '合并操作成功完成'
+    },
+    feeDetailSub: {
+      split: '拆分',
+      parentFeeId: '父费用ID',
+      childFeeId: '子费用ID',
+      feeName: '费用名称',
+      feeObject: '费用对象',
+      billingPeriod: '计费时间段',
+      splitTime: '拆分时间',
+      operation: '操作',
+      restoreMerge: '恢复合并'
+    },
+    feeDetailSubDemo: {
+      openComponent: '打开费用子详情组件'
+    }
+  }
+}
diff --git a/src/views/fee/feeDetailMeterLang.js b/src/views/fee/feeDetailMeterLang.js
new file mode 100644
index 0000000..1cf7114
--- /dev/null
+++ b/src/views/fee/feeDetailMeterLang.js
@@ -0,0 +1,26 @@
+export const messages = {
+  en: {
+    feeDetailMeter: {
+      meterId: 'Meter ID',
+      meterType: 'Meter Type',
+      objName: 'Object Name',
+      preDegrees: 'Previous Degree',
+      curDegrees: 'Current Degree',
+      preReadingTime: 'Previous Reading Time',
+      curReadingTime: 'Current Reading Time',
+      createTime: 'Create Time'
+    }
+  },
+  zh: {
+    feeDetailMeter: {
+      meterId: '表ID',
+      meterType: '表类型',
+      objName: '对象名称',
+      preDegrees: '上期度数',
+      curDegrees: '本期度数',
+      preReadingTime: '上期读表时间',
+      curReadingTime: '本期读表时间',
+      createTime: '创建时间'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/feeDetailMonthFeeLang.js b/src/views/fee/feeDetailMonthFeeLang.js
new file mode 100644
index 0000000..de2936f
--- /dev/null
+++ b/src/views/fee/feeDetailMonthFeeLang.js
@@ -0,0 +1,42 @@
+export const messages = {
+  en: {
+    feeDetailMonthFee: {
+      feeItem: 'Fee Item',
+      feeFlag: 'Fee Flag',
+      feeType: 'Fee Type',
+      chargeYearMonth: 'Charge Year-Month',
+      receivableAmount: 'Receivable Amount',
+      description: 'Description',
+      lastDegrees: 'Last Degrees:',
+      currentDegrees: 'Current Degrees:',
+      unitPrice: 'Unit Price:',
+      additionalFee: 'Additional Fee:',
+      usage: 'Usage:',
+      algorithm: 'Algorithm:',
+      fixedFee: 'Fixed Fee:'
+    },
+    feeDetailMonthFeeDemo: {
+      openComponent: 'Open Month Fee Detail'
+    }
+  },
+  zh: {
+    feeDetailMonthFee: {
+      feeItem: '费用项目',
+      feeFlag: '费用标识',
+      feeType: '费用类型',
+      chargeYearMonth: '收费年月',
+      receivableAmount: '应收金额',
+      description: '说明',
+      lastDegrees: '上期度数：',
+      currentDegrees: '本期度数：',
+      unitPrice: '单价：',
+      additionalFee: '附加费：',
+      usage: '用量：',
+      algorithm: '算法：',
+      fixedFee: '固定费：'
+    },
+    feeDetailMonthFeeDemo: {
+      openComponent: '打开月度费用详情'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/feeDetailOwnerLang.js b/src/views/fee/feeDetailOwnerLang.js
new file mode 100644
index 0000000..d35c098
--- /dev/null
+++ b/src/views/fee/feeDetailOwnerLang.js
@@ -0,0 +1,38 @@
+export const messages = {
+  en: {
+    feeDetailOwner: {
+      ownerFace: 'Owner Face',
+      name: 'Name',
+      gender: 'Gender',
+      male: 'Male',
+      female: 'Female',
+      idCard: 'ID Card',
+      address: 'Address',
+      roomCount: 'Room Count',
+      memberCount: 'Member Count',
+      carCount: 'Car Count',
+      complaintCount: 'Complaint',
+      repairCount: 'Repair',
+      oweFee: 'Owe Fee',
+      contractCount: 'Contract'
+    }
+  },
+  zh: {
+    feeDetailOwner: {
+      ownerFace: '业主人脸',
+      name: '姓名',
+      gender: '性别',
+      male: '男',
+      female: '女',
+      idCard: '身份证',
+      address: '家庭住址',
+      roomCount: '房屋数',
+      memberCount: '业主成员',
+      carCount: '车辆数',
+      complaintCount: '投诉',
+      repairCount: '报修',
+      oweFee: '欠费',
+      contractCount: '业主合同'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/feeDetailReceiptLang.js b/src/views/fee/feeDetailReceiptLang.js
new file mode 100644
index 0000000..f9a0442
--- /dev/null
+++ b/src/views/fee/feeDetailReceiptLang.js
@@ -0,0 +1,36 @@
+export const messages = {
+  en: {
+    feeDetailReceipt: {
+      print: 'Print',
+      printSmall: 'Print Small',
+      printApply: 'Print Apply',
+      feeType: 'Fee Type',
+      owner: 'Owner',
+      feeItem: 'Fee Item',
+      feePeriod: 'Fee Period',
+      totalAmount: 'Total Amount',
+      paymentTime: 'Payment Time',
+      receiptId: 'Receipt ID',
+      yuan: 'Yuan',
+      selectPrintReceipt: 'Please select receipt to print',
+      selectPrintApply: 'Please select'
+    }
+  },
+  zh: {
+    feeDetailReceipt: {
+      print: '打印',
+      printSmall: '打印小票',
+      printApply: '申请单',
+      feeType: '费用类型',
+      owner: '业主',
+      feeItem: '费用项目',
+      feePeriod: '收费时间段',
+      totalAmount: '总金额',
+      paymentTime: '缴费时间',
+      receiptId: '收据ID',
+      yuan: '元',
+      selectPrintReceipt: '请选择打印收据',
+      selectPrintApply: '请选择'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/feeDetailRoomLang.js b/src/views/fee/feeDetailRoomLang.js
new file mode 100644
index 0000000..156ddf6
--- /dev/null
+++ b/src/views/fee/feeDetailRoomLang.js
@@ -0,0 +1,38 @@
+export const messages = {
+  en: {
+    feeDetailRoom: {
+      roomId: 'Room ID',
+      floor: 'Floor',
+      type: 'Type',
+      area: 'Built-up/Indoor Area',
+      rent: 'Rent',
+      roomStatus: 'Room Status',
+      roomArrears: 'Room Arrears',
+      operation: 'Operation',
+      businessAcceptance: 'Business Acceptance',
+      updateDaily: 'Updated Daily',
+      searchPlaceholder: 'Please enter room number like 1-1-1'
+    },
+    feeDetailRoomDemo: {
+      openComponent: 'Open Room Detail'
+    }
+  },
+  zh: {
+    feeDetailRoom: {
+      roomId: '房屋ID',
+      floor: '楼层',
+      type: '类型',
+      area: '建筑/室内面积',
+      rent: '租金',
+      roomStatus: '房屋状态',
+      roomArrears: '房屋欠费',
+      operation: '操作',
+      businessAcceptance: '业务受理',
+      updateDaily: '按天更新',
+      searchPlaceholder: '请输入房屋编号 楼栋-单元-房屋 如1-1-1'
+    },
+    feeDetailRoomDemo: {
+      openComponent: '打开房屋详情'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/feeDetailSubLang.js b/src/views/fee/feeDetailSubLang.js
new file mode 100644
index 0000000..6aa27bd
--- /dev/null
+++ b/src/views/fee/feeDetailSubLang.js
@@ -0,0 +1,34 @@
+export const messages = {
+  en: {
+    feeDetailSub: {
+      split: 'Split',
+      parentFeeId: 'Parent Fee ID',
+      childFeeId: 'Child Fee ID',
+      feeName: 'Fee Name',
+      feeObject: 'Fee Object',
+      billingPeriod: 'Billing Period',
+      splitTime: 'Split Time',
+      operation: 'Operation',
+      restoreMerge: 'Restore Merge'
+    },
+    feeDetailSubDemo: {
+      openComponent: 'Open Fee Detail Sub Component'
+    }
+  },
+  zh: {
+    feeDetailSub: {
+      split: '拆分',
+      parentFeeId: '父费用ID',
+      childFeeId: '子费用ID',
+      feeName: '费用名称',
+      feeObject: '费用对象',
+      billingPeriod: '计费时间段',
+      splitTime: '拆分时间',
+      operation: '操作',
+      restoreMerge: '恢复合并'
+    },
+    feeDetailSubDemo: {
+      openComponent: '打开费用子详情组件'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/mergeFeeLang.js b/src/views/fee/mergeFeeLang.js
new file mode 100644
index 0000000..003a96a
--- /dev/null
+++ b/src/views/fee/mergeFeeLang.js
@@ -0,0 +1,28 @@
+export const messages = {
+  en: {
+    mergeFee: {
+      confirmOperation: 'Please confirm your operation!',
+      mergeDescription: 'Merge split fees. After merging, the split fees will be ended and the original fee will be enabled',
+      cancel: 'Cancel',
+      confirmMerge: 'Confirm Merge',
+      mergeSuccess: 'Merge successful, please check the merged fee in business processing'
+    },
+    mergeFeeDemo: {
+      openComponent: 'Open Merge Fee Component',
+      mergeSuccess: 'Merge operation completed successfully'
+    }
+  },
+  zh: {
+    mergeFee: {
+      confirmOperation: '请确认您的操作!',
+      mergeDescription: '合并拆分费用，合并后，将结束拆分后的费用，启用原费用',
+      cancel: '点错了',
+      confirmMerge: '确认合并',
+      mergeSuccess: '合并成功，请到业务受理查看合并后费用'
+    },
+    mergeFeeDemo: {
+      openComponent: '打开合并费用组件',
+      mergeSuccess: '合并操作成功完成'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/room/propertyRightRegistrationManageList.vue b/src/views/room/propertyRightRegistrationManageList.vue
index 05c4c4b..520e133 100644
--- a/src/views/room/propertyRightRegistrationManageList.vue
+++ b/src/views/room/propertyRightRegistrationManageList.vue
@@ -128,7 +128,7 @@
 import { getDict } from '@/api/community/communityApi'
 import { getCommunityId } from '@/api/community/communityApi'
 import { listPropertyRightRegistration } from '@/api/room/propertyRightRegistrationManageApi'
-import { queryFloors, queryUnits } from '@/api/room/roomApi'
+import { getFloors, getUnits } from '@/api/room/roomApi'
 import AddPropertyRightRegistration from '@/components/room/addPropertyRightRegistration'
 import ExaminePropertyRightRegistration from '@/components/room/examinePropertyRightRegistration'
 import EditPropertyRightRegistration from '@/components/room/editPropertyRightRegistration'
@@ -221,7 +221,7 @@ export default {
           page: 1,
           row: 50
         }
-        const data = await queryFloors(params)
+        const data = await getFloors(params)
         this.floors = data.apiFloorDataVoList || []
       } catch (error) {
         console.error('获取楼栋数据失败:', error)
@@ -235,7 +235,7 @@ export default {
           page: 1,
           row: 50
         }
-        const data = await queryUnits(params)
+        const data = await getUnits(params)
         this.units = data || []
         this.searchForm.unitId = ''
       } catch (error) {