From 32a770b52980a7afdb559cf64bae85fb98391088 Mon Sep 17 00:00:00 2001
From: wuxw <928255095@qq.com>
Date: Mon, 9 Jun 2025 18:29:49 +0800
Subject: [PATCH] 加入费用项明细功能

---
 src/api/fee/feeConfigDetailApi.js              | 109 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/fee/FeeConfigDetailDiscount.vue | 139 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/fee/FeeConfigDetailHis.vue      | 130 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/fee/FeeDetailFeeObj.vue         | 101 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/index/indexNotice.vue           |   1 +
 src/i18n/index.js                              |   3 +++
 src/router/index.js                            |  31 ++++++++++++++++++-------------
 src/views/fee/feeConfigDetailLang.js           | 124 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/fee/feeConfigDetailList.vue          | 230 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/fee/feeConfigManageList.vue          |  15 ++++++++++-----
 10 files changed, 865 insertions(+), 18 deletions(-)
 create mode 100644 src/api/fee/feeConfigDetailApi.js
 create mode 100644 src/components/fee/FeeConfigDetailDiscount.vue
 create mode 100644 src/components/fee/FeeConfigDetailHis.vue
 create mode 100644 src/components/fee/FeeDetailFeeObj.vue
 create mode 100644 src/views/fee/feeConfigDetailLang.js
 create mode 100644 src/views/fee/feeConfigDetailList.vue

diff --git a/src/api/fee/feeConfigDetailApi.js b/src/api/fee/feeConfigDetailApi.js
new file mode 100644
index 0000000..594a6ca
--- /dev/null
+++ b/src/api/fee/feeConfigDetailApi.js
@@ -0,0 +1,109 @@
+import request from '@/utils/request'
+
+// 获取费用项详情
+export function getFeeConfigDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feeConfig.listFeeConfigs',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+        resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询费用项历史记录
+export function queryHisFeeConfig(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.queryHisFeeConfig',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve({
+          data: res.data,
+          total: res.records,
+          records: res.total
+        })
+      } else {
+        reject(new Error(res.msg || '查询历史记录失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询费用项对象列表
+export function listConfigFeeObjs(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feeConfig.listConfigFeeObjs',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve({
+          data: res.data,
+          total: res.records,
+          records: res.total
+        })
+      } else {
+        reject(new Error(res.msg || '查询费用对象失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询费用项折扣
+export function queryPayFeeConfigDiscount(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/payFeeConfigDiscount/queryPayFeeConfigDiscount',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve({
+          data: res.data,
+          total: res.records,
+          records: res.total
+        })
+      } else {
+        reject(new Error(res.msg || '查询折扣信息失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除费用项折扣
+export function deletePayFeeConfigDiscount(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/payFeeConfigDiscount/deletePayFeeConfigDiscount',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '删除折扣失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/components/fee/FeeConfigDetailDiscount.vue b/src/components/fee/FeeConfigDetailDiscount.vue
new file mode 100644
index 0000000..4a8d9d2
--- /dev/null
+++ b/src/components/fee/FeeConfigDetailDiscount.vue
@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <el-table :data="discounts" border style="width: 100%">
+      <el-table-column prop="discountName" :label="$t('feeConfigDetail.discountName')" align="center"></el-table-column>
+      <el-table-column :label="$t('feeConfigDetail.rule')" align="center">
+        <template slot-scope="scope">
+          <div v-for="(item, index) in scope.row.feeDiscountSpecs" :key="index">
+            {{ item.specName }}：{{ item.specValue }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('feeConfigDetail.discountType')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.discountType == '1001' ? $t('feeConfigDetail.discount') : $t('feeConfigDetail.breach') }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="startTime" :label="$t('feeConfigDetail.payStartTime')" align="center"></el-table-column>
+      <el-table-column prop="endTime" :label="$t('feeConfigDetail.payEndTime')" align="center"></el-table-column>
+      <el-table-column prop="payMaxEndTime" :label="$t('feeConfigDetail.discountEndTime')" align="center"></el-table-column>
+      <el-table-column :label="$t('common.operation')" align="center">
+        <template slot-scope="scope">
+          <el-button type="danger" size="mini" @click="openDeleteModel(scope.row)">
+            {{ $t('common.delete') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    
+    <el-pagination
+      class="pagination-wrapper"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pagination.current"
+      :page-sizes="[10, 20, 30, 50]"
+      :page-size="pagination.size"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="pagination.total">
+    </el-pagination>
+    
+    <div class="tip-wrapper">
+      <p>{{ $t('feeConfigDetail.tip1') }}</p>
+      <p>{{ $t('feeConfigDetail.tip2') }}</p>
+      <p>{{ $t('feeConfigDetail.tip3') }}</p>
+      <p>{{ $t('feeConfigDetail.tip4') }}</p>
+    </div>
+    
+    <el-dialog
+      :title="$t('feeConfigDetail.confirmDelete')"
+      :visible.sync="deleteDialogVisible"
+      width="30%">
+      <span>{{ $t('feeConfigDetail.confirmDeleteDiscount') }}</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="deleteDialogVisible = false">{{ $t('common.cancel') }}</el-button>
+        <el-button type="danger" @click="confirmDelete">{{ $t('common.confirm') }}</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { queryPayFeeConfigDiscount, deletePayFeeConfigDiscount } from '@/api/fee/feeConfigDetailApi'
+
+export default {
+  name: 'FeeConfigDetailDiscount',
+  data() {
+    return {
+      discounts: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+      configId: '',
+      deleteDialogVisible: false,
+      currentDiscount: null
+    }
+  },
+  methods: {
+    switchTab(params) {
+      this.configId = params.configId
+      this.loadData()
+    },
+    async loadData() {
+      try {
+        const params = {
+          configId: this.configId,
+          page: this.pagination.current,
+          row: this.pagination.size,
+          communityId: this.getCommunityId()
+        }
+        const response = await queryPayFeeConfigDiscount(params)
+        this.discounts = response.data
+        this.pagination.total = response.total
+      } catch (error) {
+        console.error('Failed to load discounts:', error)
+      }
+    },
+    openDeleteModel(discount) {
+      this.currentDiscount = discount
+      this.deleteDialogVisible = true
+    },
+    async confirmDelete() {
+      try {
+        await deletePayFeeConfigDiscount({
+          configDiscountId: this.currentDiscount.configDiscountId,
+          communityId: this.$store.getters.communityId
+        })
+        this.$message.success(this.$t('feeConfigDetail.deleteSuccess'))
+        this.loadData()
+        this.deleteDialogVisible = false
+      } catch (error) {
+        console.error('Failed to delete discount:', error)
+        this.$message.error(this.$t('feeConfigDetail.deleteFailed'))
+      }
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.loadData()
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.loadData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pagination-wrapper {
+  margin-top: 20px;
+  text-align: right;
+}
+.tip-wrapper {
+  margin-top: 20px;
+  color: #909399;
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/fee/FeeConfigDetailHis.vue b/src/components/fee/FeeConfigDetailHis.vue
new file mode 100644
index 0000000..a525b13
--- /dev/null
+++ b/src/components/fee/FeeConfigDetailHis.vue
@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <el-table :data="feeDetails" border style="width: 100%">
+      <el-table-column prop="feeTypeCdName" :label="$t('feeConfigDetail.feeType')" align="center"></el-table-column>
+      <el-table-column prop="feeName" :label="$t('feeConfigDetail.feeItem')" align="center"></el-table-column>
+      <el-table-column prop="feeFlagName" :label="$t('feeConfigDetail.feeFlag')" align="center"></el-table-column>
+      <el-table-column prop="billTypeName" :label="$t('feeConfigDetail.billType')" align="center"></el-table-column>
+      <el-table-column :label="$t('feeConfigDetail.paymentType')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.paymentCd == '1200' ? $t('feeConfigDetail.prePayment') : $t('feeConfigDetail.postPayment') }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="paymentCycle" :label="$t('feeConfigDetail.paymentCycle')" align="center"></el-table-column>
+      <el-table-column :label="$t('feeConfigDetail.validity')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.startTime }}<br>{{ scope.row.endTime }}
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('feeConfigDetail.squarePrice')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.computingFormula == '2002' ? '-' : scope.row.squarePrice }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="additionalAmount" :label="$t('feeConfigDetail.additionalAmount')"
+        align="center"></el-table-column>
+      <el-table-column :label="$t('feeConfigDetail.deductFrom')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.deductFrom == 'Y' ? $t('common.yes') : $t('common.no') }}
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('feeConfigDetail.payOnline')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.payOnline == 'Y' ? $t('common.yes') : $t('common.no') }}
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('feeConfigDetail.scale')" align="center">
+        <template slot-scope="scope">
+          <div v-if="scope.row.scale == '1'">{{ $t('feeConfigDetail.rounding') }}</div>
+          <div v-if="scope.row.scale == '3'">{{ $t('feeConfigDetail.upRound') }}</div>
+          <div v-if="scope.row.scale == '4'">{{ $t('feeConfigDetail.downRound') }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="decimalPlace" :label="$t('feeConfigDetail.decimalPlace')" align="center"></el-table-column>
+      <el-table-column :label="$t('feeConfigDetail.action')" align="center">
+        <template slot-scope="scope">
+          {{ getHisConfigOperate(scope.row) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="userName" :label="$t('feeConfigDetail.operator')" align="center"></el-table-column>
+      <el-table-column prop="createTime" :label="$t('feeConfigDetail.operateTime')" align="center"></el-table-column>
+    </el-table>
+
+    <el-pagination class="pagination-wrapper" @size-change="handleSizeChange" @current-change="handleCurrentChange"
+      :current-page="pagination.current" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.size"
+      layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { queryHisFeeConfig } from '@/api/fee/feeConfigDetailApi'
+
+export default {
+  name: 'FeeConfigDetailHis',
+  data() {
+    return {
+      feeDetails: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+      queryParams: {
+        configId: '',
+        staffNameLike: '',
+        feeNameLike: '',
+        logStartTime: '',
+        logEndTime: ''
+      }
+    }
+  },
+  methods: {
+    switchTab(params) {
+      this.queryParams.configId = params.configId
+      this.loadData()
+    },
+    async loadData() {
+      try {
+        const params = {
+          ...this.queryParams,
+          page: this.pagination.current,
+          row: this.pagination.size,
+          communityId: this.getCommunityId()
+        }
+        const response = await queryHisFeeConfig(params)
+        this.feeDetails = response.data
+        this.pagination.total = response.total
+      } catch (error) {
+        console.error('Failed to load fee config history:', error)
+      }
+    },
+    getHisConfigOperate(fee) {
+      const feeCount = this.feeDetails.filter(item => item.bId === fee.bId).length
+      if (feeCount <= 1) {
+        if (fee.operate === 'ADD') return this.$t('feeConfigDetail.add')
+        if (fee.operate === 'DEL') return this.$t('feeConfigDetail.delete')
+        return '-'
+      }
+      if (fee.operate === 'ADD') return this.$t('feeConfigDetail.modifyNew')
+      if (fee.operate === 'DEL') return this.$t('feeConfigDetail.modifyOld')
+      return '-'
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.loadData()
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.loadData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pagination-wrapper {
+  margin-top: 20px;
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/fee/FeeDetailFeeObj.vue b/src/components/fee/FeeDetailFeeObj.vue
new file mode 100644
index 0000000..a0e1cf4
--- /dev/null
+++ b/src/components/fee/FeeDetailFeeObj.vue
@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <el-row :gutter="20" class="filter-wrapper">
+      <el-col :span="8">
+        <el-select v-model="payerObjType" :placeholder="$t('feeConfigDetail.selectFeeObject')" class="filter-item">
+          <el-option :label="$t('feeConfigDetail.house')" value="3333"></el-option>
+          <el-option :label="$t('feeConfigDetail.car')" value="6666"></el-option>
+          <el-option :label="$t('feeConfigDetail.contract')" value="7777"></el-option>
+        </el-select>
+      </el-col>
+      <el-col :span="4">
+        <el-button type="primary" @click="loadData">{{ $t('common.search') }}</el-button>
+      </el-col>
+    </el-row>
+
+    <el-table :data="feeObjs" border style="width: 100%">
+      <el-table-column prop="feeId" :label="$t('feeConfigDetail.feeId')" align="center"></el-table-column>
+      <el-table-column :label="$t('feeConfigDetail.objectType')" align="center">
+        <template slot-scope="scope">
+          <span v-if="scope.row.payerObjType === '3333'">{{ $t('feeConfigDetail.house') }}</span>
+          <span v-else-if="scope.row.payerObjType === '6666'">{{ $t('feeConfigDetail.car') }}</span>
+          <span v-else>{{ $t('feeConfigDetail.contract') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="payerObjName" :label="$t('feeConfigDetail.objectName')" align="center"></el-table-column>
+      <el-table-column prop="ownerName" :label="$t('feeConfigDetail.ownerName')" align="center"></el-table-column>
+      <el-table-column prop="ownerTel" :label="$t('feeConfigDetail.phone')" align="center"></el-table-column>
+      <el-table-column prop="createTime" :label="$t('feeConfigDetail.createTime')" align="center"></el-table-column>
+    </el-table>
+
+    <el-pagination class="pagination-wrapper" @size-change="handleSizeChange" @current-change="handleCurrentChange"
+      :current-page="pagination.current" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.size"
+      layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { listConfigFeeObjs } from '@/api/fee/feeConfigDetailApi'
+
+export default {
+  name: 'FeeDetailFeeObj',
+  data() {
+    return {
+      payerObjType: '',
+      feeObjs: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+      configId: ''
+    }
+  },
+  methods: {
+    switchTab(params) {
+      this.configId = params.configId
+      this.loadData()
+    },
+    async loadData() {
+      try {
+        const params = {
+          configId: this.configId,
+          payerObjType: this.payerObjType,
+          page: this.pagination.current,
+          row: this.pagination.size,
+          communityId: this.getCommunityId()
+        }
+        const response = await listConfigFeeObjs(params)
+        this.feeObjs = response.data
+        this.pagination.total = response.total
+      } catch (error) {
+        console.error('Failed to load fee objects:', error)
+      }
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.loadData()
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.loadData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.filter-wrapper {
+  margin-bottom: 20px;
+}
+
+.filter-item {
+  width: 100%;
+}
+
+.pagination-wrapper {
+  margin-top: 20px;
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/index/indexNotice.vue b/src/components/index/indexNotice.vue
index 5305083..db58922 100644
--- a/src/components/index/indexNotice.vue
+++ b/src/components/index/indexNotice.vue
@@ -156,6 +156,7 @@ export default {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        text-align: left;
       }
       
       .vc-index-notice-time {
diff --git a/src/i18n/index.js b/src/i18n/index.js
index 19a1472..dbfe109 100644
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -143,6 +143,7 @@ import { messages as ownerInvoiceMessages } from '../views/fee/ownerInvoiceLang'
 import { messages as invoiceApplyMessages } from '../views/fee/invoiceApplyLang'
 import { messages as ownerApplyInvoiceMessages } from '../views/fee/ownerApplyInvoiceLang'
 import { messages as invoiceApplyDetailMessages } from '../views/fee/invoiceApplyDetailLang'
+import { messages as feeConfigDetailMessages } from '../views/fee/feeConfigDetailLang'
 
 Vue.use(VueI18n)
 
@@ -290,6 +291,7 @@ const messages = {
     ...invoiceApplyMessages.en,
     ...ownerApplyInvoiceMessages.en,
     ...invoiceApplyDetailMessages.en,
+    ...feeConfigDetailMessages.en,
   },
   zh: {
     ...loginMessages.zh,
@@ -433,6 +435,7 @@ const messages = {
     ...invoiceApplyMessages.zh,
     ...ownerApplyInvoiceMessages.zh,
     ...invoiceApplyDetailMessages.zh,
+    ...feeConfigDetailMessages.zh,
   }
 }
 
diff --git a/src/router/index.js b/src/router/index.js
index 44f5d6a..d21c8ed 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -697,20 +697,25 @@ const routes = [
         component: () => import('@/views/fee/addOwnerInvoiceList.vue')
       },
       {
-        path:'/pages/fee/invoiceApply',
-        name:'/pages/fee/invoiceApply',
+        path: '/pages/fee/invoiceApply',
+        name: '/pages/fee/invoiceApply',
         component: () => import('@/views/fee/invoiceApplyList.vue')
-        },
-        {
-          path:'/views/fee/ownerApplyInvoice',
-          name:'/views/fee/ownerApplyInvoice',
-          component: () => import('@/views/fee/ownerApplyInvoiceList.vue')
-          },
-          {
-            path:'/views/fee/invoiceApplyDetail',
-            name:'/views/fee/invoiceApplyDetail',
-            component: () => import('@/views/fee/invoiceApplyDetailList.vue')
-            },
+      },
+      {
+        path: '/views/fee/ownerApplyInvoice',
+        name: '/views/fee/ownerApplyInvoice',
+        component: () => import('@/views/fee/ownerApplyInvoiceList.vue')
+      },
+      {
+        path: '/views/fee/invoiceApplyDetail',
+        name: '/views/fee/invoiceApplyDetail',
+        component: () => import('@/views/fee/invoiceApplyDetailList.vue')
+      },
+      {
+        path: '/views/fee/feeConfigDetail',
+        name: '/views/fee/feeConfigDetail',
+        component: () => import('@/views/fee/feeConfigDetailList.vue')
+      },
       // 其他子路由可以在这里添加
     ]
   },
diff --git a/src/views/fee/feeConfigDetailLang.js b/src/views/fee/feeConfigDetailLang.js
new file mode 100644
index 0000000..94fdf69
--- /dev/null
+++ b/src/views/fee/feeConfigDetailLang.js
@@ -0,0 +1,124 @@
+export const messages = {
+  en: {
+    feeConfigDetail: {
+      feeItemInfo: 'Fee Item Information',
+      feeType: 'Fee Type',
+      feeItem: 'Fee Item',
+      feeFlag: 'Fee Flag',
+      paymentCycle: 'Payment Cycle',
+      billType: 'Reminder Type',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      deductFrom: 'Account Deduction',
+      payOnline: 'Mobile Payment',
+      scale: 'Rounding Method',
+      rounding: 'Rounding',
+      upRound: 'Up Round',
+      downRound: 'Down Round',
+      decimalPlace: 'Decimal Places',
+      computingFormula: 'Calculation Formula',
+      squarePrice: 'Unit Price',
+      additionalAmount: 'Additional Fee',
+      modifyRecord: 'Modification Record',
+      createObject: 'Created Objects',
+      discount: 'Discount',
+      paymentType: 'Payment Type',
+      validity: 'Validity Period',
+      action: 'Action',
+      operator: 'Operator',
+      operateTime: 'Operate Time',
+      add: 'Add',
+      delete: 'Delete',
+      modifyNew: 'Modify (New)',
+      modifyOld: 'Modify (Old)',
+      feeId: 'Fee ID',
+      objectType: 'Object Type',
+      objectName: 'Object Name',
+      ownerName: 'Owner Name',
+      phone: 'Phone',
+      createTime: 'Create Time',
+      selectFeeObject: 'Select Fee Object',
+      house: 'House',
+      car: 'Car',
+      contract: 'Contract',
+      discountName: 'Discount Name',
+      rule: 'Rule',
+      discountType: 'Discount Type',
+      breach: 'Breach',
+      payStartTime: 'Payment Start Time',
+      payEndTime: 'Payment End Time',
+      discountEndTime: 'Discount End Time',
+      prePayment: 'Prepayment',
+      postPayment: 'Postpayment',
+      confirmDelete: 'Confirm Delete',
+      confirmDeleteDiscount: 'Are you sure to delete this discount?',
+      deleteSuccess: 'Delete successfully',
+      deleteFailed: 'Delete failed',
+      tip1: 'Payment start and end time: Constraints on payment time, i.e. the time when the cashier operates',
+      tip2: 'Discount end time: Indicates the maximum payment time',
+      tip3: 'If the current year fee cannot enjoy the discount, select the "No Arrears" rule in discount settings with arrears duration 0',
+      tip4: 'Then all arrears fees will not enjoy the discount, and the current year fee belongs to arrears so it does not enjoy the discount'
+    },
+  },
+  zh: {
+    feeConfigDetail: {
+      feeItemInfo: '费用项信息',
+      feeType: '费用类型',
+      feeItem: '费用项',
+      feeFlag: '费用标识',
+      paymentCycle: '缴费周期',
+      billType: '催缴类型',
+      startTime: '开始时间',
+      endTime: '结束时间',
+      deductFrom: '账户抵扣',
+      payOnline: '手机缴费',
+      scale: '进位方式',
+      rounding: '四舍五入',
+      upRound: '向上进位',
+      downRound: '向下进位',
+      decimalPlace: '保留小数',
+      computingFormula: '计算公式',
+      squarePrice: '计费单价',
+      additionalAmount: '附加费',
+      modifyRecord: '修改记录',
+      createObject: '创建对象',
+      discount: '优惠折扣',
+      paymentType: '付费类型',
+      validity: '有效期',
+      action: '动作',
+      operator: '操作人',
+      operateTime: '操作时间',
+      add: '添加',
+      delete: '删除',
+      modifyNew: '修改(新)',
+      modifyOld: '修改(旧)',
+      feeId: '费用编号',
+      objectType: '对象类型',
+      objectName: '对象名称',
+      ownerName: '业主名称',
+      phone: '手机号',
+      createTime: '创建时间',
+      selectFeeObject: '请选择费用对象',
+      house: '房屋',
+      car: '车辆',
+      contract: '合同',
+      discountName: '折扣名称',
+      rule: '规则',
+      discountType: '折扣类型',
+      breach: '违约',
+      payStartTime: '缴费起始时间',
+      payEndTime: '缴费结束时间',
+      discountEndTime: '折扣终止时间',
+      prePayment: '预付费',
+      postPayment: '后付费',
+      confirmDelete: '确认删除',
+      confirmDeleteDiscount: '确定要删除此折扣吗？',
+      deleteSuccess: '删除成功',
+      deleteFailed: '删除失败',
+      tip1: '缴费起始时间和缴费结束时间：这个约束缴费的时间，也就是前台收银员操作缴费的时间',
+      tip2: '折扣终止时间：这个表示最大缴费到什么时候',
+      tip3: '如果本年度费用不能享受优惠 那么在折扣设置中规则选择打折无欠费规则，并且欠费时长为0',
+      tip4: '这样所有欠费的费用则不享受优惠，本年度的费用属于欠费所以不享受优惠'
+    },
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/feeConfigDetailList.vue b/src/views/fee/feeConfigDetailList.vue
new file mode 100644
index 0000000..d217a1f
--- /dev/null
+++ b/src/views/fee/feeConfigDetailList.vue
@@ -0,0 +1,230 @@
+<template>
+  <div class="app-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <div class="flex justify-between">
+          <div class="text-title">{{ $t('feeConfigDetail.feeItemInfo') }}</div>
+        </div>
+      </div>
+
+      <div class="form-wrapper">
+        <el-row :gutter="20" class="text-left">
+          <el-col :span="8">
+            <div class="form-group">
+              <label class="col-form-label">{{ $t('feeConfigDetail.feeType') }}：</label>
+              <label>{{ feeDetailInfo.feeTypeCdName }}</label>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="form-group">
+              <label class="col-form-label">{{ $t('feeConfigDetail.feeItem') }}：</label>
+              <label>{{ feeDetailInfo.feeName }}</label>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="form-group">
+              <label class="col-form-label">{{ $t('feeConfigDetail.feeFlag') }}：</label>
+              <label>{{ feeDetailInfo.feeFlagName || '-' }}</label>
+            </div>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20" class="text-left">
+          <el-col :span="8">
+            <div class="form-group">
+              <label class="col-form-label">{{ $t('feeConfigDetail.paymentCycle') }}：</label>
+              <label>{{ feeDetailInfo.paymentCycle }}</label>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="form-group">
+              <label class="col-form-label">{{ $t('feeConfigDetail.billType') }}：</label>
+              <label>{{ feeDetailInfo.billTypeName }}</label>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="form-group">
+              <label class="col-form-label">{{ $t('feeConfigDetail.startTime') }}：</label>
+              <label>{{ feeDetailInfo.startTime }}</label>
+            </div>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20" class="text-left">
+          <el-col :span="8">
+            <div class="form-group">
+              <label class="col-form-label">{{ $t('feeConfigDetail.endTime') }}：</label>
+              <label>{{ feeDetailInfo.endTime }}</label>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="form-group">
+              <label class="col-form-label">{{ $t('feeConfigDetail.deductFrom') }}：</label>
+              <label>{{ feeDetailInfo.deductFrom == 'Y' ? $t('common.yes') : $t('common.no') }}</label>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="form-group">
+              <label class="col-form-label">{{ $t('feeConfigDetail.payOnline') }}：</label>
+              <label>{{ feeDetailInfo.payOnline == 'Y' ? $t('common.yes') : $t('common.no') }}</label>
+            </div>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20" class="text-left">
+          <el-col :span="8">
+            <div class="form-group">
+              <label class="col-form-label">{{ $t('feeConfigDetail.scale') }}：</label>
+              <label v-if="feeDetailInfo.scale == '1'">{{ $t('feeConfigDetail.rounding') }}</label>
+              <label v-if="feeDetailInfo.scale == '3'">{{ $t('feeConfigDetail.upRound') }}</label>
+              <label v-if="feeDetailInfo.scale == '4'">{{ $t('feeConfigDetail.downRound') }}</label>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="form-group">
+              <label class="col-form-label">{{ $t('feeConfigDetail.decimalPlace') }}：</label>
+              <label>{{ feeDetailInfo.decimalPlace }}</label>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="form-group">
+              <label class="col-form-label">{{ $t('feeConfigDetail.computingFormula') }}：</label>
+              <label>{{ feeDetailInfo.computingFormulaName }}</label>
+            </div>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20" class="text-left">
+          <el-col :span="8">
+            <div class="form-group">
+              <label class="col-form-label">{{ $t('feeConfigDetail.squarePrice') }}：</label>
+              <label>{{ feeDetailInfo.squarePrice }}</label>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="form-group">
+              <label class="col-form-label">{{ $t('feeConfigDetail.additionalAmount') }}：</label>
+              <label>{{ feeDetailInfo.additionalAmount }}</label>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+
+      <el-divider></el-divider>
+
+      <div class="tab-wrapper">
+        <el-tabs v-model="feeDetailInfo.currentTab" @tab-click="changeTab(feeDetailInfo.currentTab)">
+          <el-tab-pane :label="$t('feeConfigDetail.modifyRecord')" name="feeConfigDetailHis">
+            <fee-config-detail-his ref="feeConfigDetailHis"
+              v-if="feeDetailInfo.currentTab === 'feeConfigDetailHis'"></fee-config-detail-his>
+          </el-tab-pane>
+          <el-tab-pane :label="$t('feeConfigDetail.createObject')" name="feeDetailFeeObj">
+            <fee-detail-fee-obj ref="feeDetailFeeObj"
+              v-if="feeDetailInfo.currentTab === 'feeDetailFeeObj'"></fee-detail-fee-obj>
+          </el-tab-pane>
+          <el-tab-pane :label="$t('feeConfigDetail.discount')" name="feeConfigDetailDiscount">
+            <fee-config-detail-discount ref="feeConfigDetailDiscount"
+              v-if="feeDetailInfo.currentTab === 'feeConfigDetailDiscount'"></fee-config-detail-discount>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getFeeConfigDetail } from '@/api/fee/feeConfigDetailApi'
+import FeeConfigDetailHis from '@/components/fee/FeeConfigDetailHis'
+import FeeDetailFeeObj from '@/components/fee/FeeDetailFeeObj'
+import FeeConfigDetailDiscount from '@/components/fee/FeeConfigDetailDiscount'
+
+export default {
+  name: 'FeeConfigDetailList',
+  components: {
+    FeeConfigDetailHis,
+    FeeDetailFeeObj,
+    FeeConfigDetailDiscount
+  },
+  data() {
+    return {
+      feeDetailInfo: {
+        configId: '',
+        feeTypeCdName: '',
+        feeName: '',
+        feeFlagName: '',
+        startTime: '',
+        endTime: '',
+        computingFormulaName: '',
+        squarePrice: '',
+        additionalAmount: '0.00',
+        isDefault: '',
+        billTypeName: '',
+        paymentCycle: '',
+        paymentCd: '',
+        computingFormulaText: '',
+        deductFrom: '',
+        payOnline: 'Y',
+        scale: '1',
+        decimalPlace: '2',
+        units: '元',
+        currentTab: 'feeConfigDetailHis',
+        needBack: false
+      }
+    }
+  },
+  created() {
+    this.feeDetailInfo.configId = this.$route.query.configId
+    if (this.feeDetailInfo.configId) {
+      this.loadFeeDetailInfo()
+    }
+  },
+  methods: {
+    async loadFeeDetailInfo() {
+      try {
+        const params = {
+          configId: this.feeDetailInfo.configId,
+          communityId: this.getCommunityId(),
+          page: 1,
+          row: 1
+        }
+        const { feeConfigs } = await getFeeConfigDetail(params)
+        Object.assign(this.feeDetailInfo, feeConfigs[0])
+        this.changeTab(this.feeDetailInfo.currentTab)
+      } catch (error) {
+        console.error('Failed to load fee detail info:', error)
+      }
+    },
+    changeTab(tab) {
+      this.feeDetailInfo.currentTab = tab
+      setTimeout(() => {
+        this.$nextTick(() => {
+          this.$refs[tab].switchTab({
+            configId: this.feeDetailInfo.configId
+          })
+        })
+      },500)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 20px;
+}
+
+.form-wrapper {
+  margin-top: 20px;
+
+  .form-group {
+    margin-bottom: 20px;
+
+    .col-form-label {
+      margin-right: 10px;
+    }
+  }
+}
+
+.tab-wrapper {
+  margin-top: 20px;
+}</style>
\ No newline at end of file
diff --git a/src/views/fee/feeConfigManageList.vue b/src/views/fee/feeConfigManageList.vue
index 319246c..f68eba0 100644
--- a/src/views/fee/feeConfigManageList.vue
+++ b/src/views/fee/feeConfigManageList.vue
@@ -6,7 +6,8 @@
           <div class="margin-xs-r treeview">
             <ul class="list-group text-center border-radius">
               <li v-for="(item, index) in feeTypeCds" :key="index" @click="swatchFeeTypeCd(item)"
-                :class="{ 'vc-node-selected': conditions.feeTypeCd == item.statusCd }" class="list-group-item node-orgTree">
+                :class="{ 'vc-node-selected': conditions.feeTypeCd == item.statusCd }"
+                class="list-group-item node-orgTree">
                 {{ item.name }}
               </li>
             </ul>
@@ -173,7 +174,7 @@ import { listFeeConfigs } from '@/api/fee/feeConfigManageApi'
 import AddFeeConfig from '@/components/fee/addFeeConfig'
 import EditFeeConfig from '@/components/fee/editFeeConfig'
 import DeleteFeeConfig from '@/components/fee/deleteFeeConfig'
-import {getDict} from '@/api/community/communityApi'
+import { getDict } from '@/api/community/communityApi'
 
 export default {
   name: 'FeeConfigManageList',
@@ -211,8 +212,12 @@ export default {
   methods: {
     async loadDicts() {
 
-     const data = await getDict('pay_fee_config', 'fee_type_cd')
-     this.feeTypeCds = data
+      const data = await getDict('pay_fee_config', 'fee_type_cd')
+      let _feeTypeCds = {
+        name: this.$t('common.all'),
+        value: ''
+      }
+      this.feeTypeCds = [_feeTypeCds, ...data]
     },
 
     async _listFeeConfigs() {
@@ -283,7 +288,7 @@ export default {
     },
 
     _openFeeConfigDetail(feeConfig) {
-      window.open(`/#/fee/feeConfigDetail?configId=${feeConfig.configId}`)
+      window.open(`/#/views/fee/feeConfigDetail?configId=${feeConfig.configId}`)
     },
 
     handlePageChange(page) {
--
libgit2 0.21.4