From 9068135f2613723346c5500c1c2ceb8fb89010ca Mon Sep 17 00:00:00 2001
From: zengqiyang <492393100@qq.com>
Date: Wed, 23 Apr 2025 09:10:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=9A=E5=8A=A1=E8=B4=A2=E5=8A=A1=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E9=A1=B5=E9=9D=A2=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pc/.env.development                           |    2 +-
 pc/src/api/asset/label.js                     |    2 +-
 pc/src/api/finance.js                         |  109 +
 pc/src/router/modules/finance.js              |    6 +
 pc/src/utils/request.js                       |    4 +-
 pc/src/views/asset/classification/index.vue   |   19 +-
 .../inventory/components/AssetDetail.vue      |    7 +-
 .../asset/inventory/components/AssetForm.vue  |    1 -
 .../inventory/components/AssetLabelPrint.vue  |    3 +-
 pc/src/views/asset/inventory/index.vue        |   17 +-
 pc/src/views/asset/labelPage/index.vue        |    7 +-
 pc/src/views/asset/location/index.vue         |   21 +-
 .../finance/billList/components/AddBill.vue   |  758 +++++++
 .../billList/components/BillDetail.vue        |  256 +++
 pc/src/views/finance/billList/index.vue       |  409 ++++
 pc/src/views/finance/chargeStandard/index.vue | 1805 +++++++++++++++--
 pc/src/views/finance/feeType/index.vue        |   20 +-
 .../finance/receiptSetting/PayeeInfo.vue      |   58 +-
 pc/vue.config.js                              |   18 +-
 19 files changed, 3318 insertions(+), 204 deletions(-)
 create mode 100644 pc/src/views/finance/billList/components/AddBill.vue
 create mode 100644 pc/src/views/finance/billList/components/BillDetail.vue
 create mode 100644 pc/src/views/finance/billList/index.vue

diff --git a/pc/.env.development b/pc/.env.development
index 6a0355f..fb777cf 100644
--- a/pc/.env.development
+++ b/pc/.env.development
@@ -1,4 +1,4 @@
 NODE_ENV = 'development'
 
 # 开发环境API地址
-VUE_APP_BASE_API = http://192.168.137.3:8080/api
\ No newline at end of file
+VUE_APP_BASE_API = http://192.168.137.3:8080/api/api
\ No newline at end of file
diff --git a/pc/src/api/asset/label.js b/pc/src/api/asset/label.js
index 65fd535..25d257b 100644
--- a/pc/src/api/asset/label.js
+++ b/pc/src/api/asset/label.js
@@ -68,7 +68,7 @@ export function getLabelFields() {
   ];
   
   return Promise.resolve({
-    code: '000000',
+    code: '0000000000000000',
     msg: 'success',
     data: fieldData
   });
diff --git a/pc/src/api/finance.js b/pc/src/api/finance.js
index 877f7ec..11a2f25 100644
--- a/pc/src/api/finance.js
+++ b/pc/src/api/finance.js
@@ -337,4 +337,113 @@ export function getFeeTypeTree(params) {
     method: 'get',
     params
   })
+}
+
+// 预览账单
+export function previewBill(data) {
+  return request({
+    url: '/finance/charging-standard/bill/preview',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    data
+  })
+}
+
+// 生成账单
+export function generateBill(data) {
+  return request({
+    url: '/finance/charging-standard/bill/generate',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    data
+  })
+}
+
+/**
+ * 分页查询账单-收费标准关联表数据
+ * @param {Object} data - 查询参数
+ * @returns {Promise} - 返回Promise对象
+ */
+export function getBillChargingStandardRelPage(data) {
+  return request({
+    url: '/finance/bill-charging-standard-rel/page',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 获取特定标准ID的绑定房间账单列表
+ * @param {string} standardId 收费标准ID
+ */
+export function getBillsByStandardId(standardId) {
+  return request({
+    url: `/finance/bill-charging-standard-rel/${standardId}/bills`,
+    method: 'get'
+  })
+}
+
+// 账单管理接口
+export function addBill(data) {
+  return request({
+    url: '/bill/add',
+    method: 'post',
+    data
+  })
+}
+
+export function getBillList(data) {
+  return request({
+    url: '/bill/list',
+    method: 'post',
+    data
+  })
+}
+
+export function getBillDetail(billId) {
+  return request({
+    url: `/bill/detail/${billId}`,
+    method: 'get'
+  })
+}
+
+export function uploadBillAttachment(billId, file) {
+  const formData = new FormData()
+  formData.append('billId', billId)
+  formData.append('file', file)
+  return request({
+    url: '/bill/attachment/upload',
+    method: 'post',
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+
+export function deleteBillAttachment(attachmentId) {
+  return request({
+    url: `/bill/attachment/${attachmentId}`,
+    method: 'delete'
+  })
+}
+
+export function getBillAttachmentList(billId) {
+  return request({
+    url: `/bill/attachment/list/${billId}`,
+    method: 'get'
+  })
+}
+
+export function exportBillList(data) {
+  return request({
+    url: '/bill/export',
+    method: 'post',
+    data,
+    responseType: 'blob'
+  })
 } 
\ No newline at end of file
diff --git a/pc/src/router/modules/finance.js b/pc/src/router/modules/finance.js
index 7b569d3..c20f28b 100644
--- a/pc/src/router/modules/finance.js
+++ b/pc/src/router/modules/finance.js
@@ -24,6 +24,12 @@ export default {
       component: () => import('@/views/finance/chargeStandard/index.vue'),
       name: 'ChargeStandard',
       meta: { title: '收费标准', icon: 'el-icon-price-tag' }
+    },
+    {
+      path: 'billList',
+      component: () => import('@/views/finance/billList/index.vue'),
+      name: 'BillList',
+      meta: { title: '所有账单', icon: 'el-icon-notebook-2' }
     }
   ]
 } 
\ No newline at end of file
diff --git a/pc/src/utils/request.js b/pc/src/utils/request.js
index 654f76d..29134d3 100644
--- a/pc/src/utils/request.js
+++ b/pc/src/utils/request.js
@@ -4,8 +4,8 @@ import { API_SUCCESS_CODE } from './constants'
 
 // 创建axios实例
 const service = axios.create({
-  baseURL: '/', // 修改为相对路径，使用代理
-  // baseURL: process.env.VUE_APP_BASE_API, // 使用环境变量中的接口地址
+  // baseURL: '/', // 修改为相对路径，使用代理
+  baseURL: process.env.VUE_APP_BASE_API, // 使用环境变量中的接口地址
 
   timeout: 10000 // 请求超时时间
 })
diff --git a/pc/src/views/asset/classification/index.vue b/pc/src/views/asset/classification/index.vue
index fbc49c6..091e931 100644
--- a/pc/src/views/asset/classification/index.vue
+++ b/pc/src/views/asset/classification/index.vue
@@ -169,6 +169,7 @@
 
 <script>
 import { listClassification, getClassification, addClassification, updateClassification, delClassification, enableClassification, disableClassification, getClassificationTree, checkClassificationInUse, getChildClassifications, delClassificationBatch } from '@/api/asset/classification'
+import { API_SUCCESS_CODE } from '@/utils/constants'
 
 export default {
   name: 'AssetClassification',
@@ -262,7 +263,7 @@ export default {
         status: undefined // 获取所有状态的分类，包括启用和禁用
       }
       getClassificationTree(params).then(res => {
-        if (res.code === '000000') {
+        if (res.code === API_SUCCESS_CODE) {
           // 处理返回的树形数据，确保字段名称正确
           this.classTree = this.processTreeData(res.data)
           
@@ -363,7 +364,7 @@ export default {
     getList() {
       this.loading = true
       listClassification(this.queryParams).then(res => {
-        if (res.code === '000000') {
+        if (res.code === API_SUCCESS_CODE) {
           // 转换API返回数据结构为驼峰命名
           this.classList = this.convertSnakeToCamel(res.data.list)
           this.total = res.data.total
@@ -420,7 +421,7 @@ export default {
         pageNum: this.queryParams.pageNum,
         pageSize: this.queryParams.pageSize
       }).then(res => {
-        if (res.code === '000000') {
+        if (res.code === API_SUCCESS_CODE) {
           this.classList = this.convertSnakeToCamel(res.data.list)
           this.total = res.data.total
         } else {
@@ -472,7 +473,7 @@ export default {
     handleEdit(row) {
       const id = row.id
       getClassification(id).then(res => {
-        if (res.code === '000000') {
+        if (res.code === API_SUCCESS_CODE) {
           // 将API响应数据映射到表单字段，使用驼峰命名
           this.form = {
             id: res.data.id,
@@ -524,7 +525,7 @@ export default {
           
           const method = this.form.id ? updateClassification : addClassification
           method(submitData).then(res => {
-            if (res.code === '000000') {
+            if (res.code === API_SUCCESS_CODE) {
               this.$message.success('操作成功')
               this.dialogVisible = false
               
@@ -556,14 +557,14 @@ export default {
       }).then(() => {
         // 先检查分类是否被使用
         checkClassificationInUse(row.id).then(res => {
-          if (res.code === '000000' && res.data) {
+          if (res.code === API_SUCCESS_CODE && res.data) {
             this.$message.error('该分类已被使用，无法删除')
             return
           }
           // 未被使用，执行删除操作
           const lastModUserId = this.$store.getters.userId || ''
           delClassification(row.id, lastModUserId).then(res => {
-            if (res.code === '000000') {
+            if (res.code === API_SUCCESS_CODE) {
               this.$message.success('删除成功')
               // 重新获取树形结构，确保更新多级分类
               this.getTree()
@@ -590,7 +591,7 @@ export default {
         const lastModUserId = this.$store.getters.userId || ''
         const method = row.status === '1' ? disableClassification : enableClassification
         method(row.id, lastModUserId).then(res => {
-          if (res.code === '000000') {
+          if (res.code === API_SUCCESS_CODE) {
             this.$message.success(`${action}成功`)
             // 状态变更后，可能会影响树的显示，所以也需要刷新树
             this.getTree()
@@ -663,7 +664,7 @@ export default {
         // 执行批量删除操作
         this.loading = true
         delClassificationBatch(selectedIds, lastModUserId).then(res => {
-          if (res.code === '000000') {
+          if (res.code === API_SUCCESS_CODE) {
             this.$message.success('批量删除成功')
             // 重新获取树形结构，确保更新多级分类
             this.getTree()
diff --git a/pc/src/views/asset/inventory/components/AssetDetail.vue b/pc/src/views/asset/inventory/components/AssetDetail.vue
index 220ec70..eaaa81a 100644
--- a/pc/src/views/asset/inventory/components/AssetDetail.vue
+++ b/pc/src/views/asset/inventory/components/AssetDetail.vue
@@ -48,6 +48,7 @@
 import { getAsset } from '@/api/asset/inventory'
 import { getClassificationTree } from '@/api/asset/classification'
 import { getLocationTree } from '@/api/asset/location'
+import { API_SUCCESS_CODE } from '@/utils/constants'
 
 export default {
   name: 'AssetDetail',
@@ -89,7 +90,7 @@ export default {
       
       this.loading = true
       getAsset(this.assetId).then(response => {
-        if (response.code === '000000') {
+        if (response.code === API_SUCCESS_CODE) {
           this.assetDetail = response.data || {}
           console.log('资产详情数据:', this.assetDetail)
         } else {
@@ -134,7 +135,7 @@ export default {
     /** 获取资产分类树形选项 */
     getClassificationOptions() {
       getClassificationTree({ status: '1' }).then(response => {
-        if (response.code === '000000') {
+        if (response.code === API_SUCCESS_CODE) {
           this.classificationOptions = this.processClassificationTree(response.data || [])
         }
       })
@@ -164,7 +165,7 @@ export default {
     /** 获取位置树选项 */
     getLocationOptions() {
       getLocationTree().then(response => {
-        if (response.code === '000000') {
+        if (response.code === API_SUCCESS_CODE) {
           this.locationOptions = this.processLocationTree(response.data || [])
         }
       })
diff --git a/pc/src/views/asset/inventory/components/AssetForm.vue b/pc/src/views/asset/inventory/components/AssetForm.vue
index 2e56abb..88e0912 100644
--- a/pc/src/views/asset/inventory/components/AssetForm.vue
+++ b/pc/src/views/asset/inventory/components/AssetForm.vue
@@ -227,7 +227,6 @@ import { getAsset, addAsset, updateAsset, listCompanies, listUsers, uploadAssetI
 import { getClassificationTree } from '@/api/asset/classification'
 import { getLocationTree } from '@/api/asset/location'
 import { API_SUCCESS_CODE } from '@/utils/constants'
-
 export default {
   name: 'AssetForm',
   props: {
diff --git a/pc/src/views/asset/inventory/components/AssetLabelPrint.vue b/pc/src/views/asset/inventory/components/AssetLabelPrint.vue
index 4c174eb..97bb79d 100644
--- a/pc/src/views/asset/inventory/components/AssetLabelPrint.vue
+++ b/pc/src/views/asset/inventory/components/AssetLabelPrint.vue
@@ -37,6 +37,7 @@
 <script>
 import { getLabelConfig } from '@/api/asset/inventory'
 import QrcodeVue from 'qrcode.vue'
+import { API_SUCCESS_CODE } from '@/utils/constants'
 
 export default {
   name: 'AssetLabelPrint',
@@ -93,7 +94,7 @@ export default {
     getLabelConfig() {
       this.loading = true
       getLabelConfig().then(response => {
-        if (response.code === '000000') {
+        if (response.code === API_SUCCESS_CODE) {
           this.labelConfig = response.data
           
           // 如果API返回了需要显示的字段，则使用API返回的字段
diff --git a/pc/src/views/asset/inventory/index.vue b/pc/src/views/asset/inventory/index.vue
index f0c8d3f..c83f76d 100644
--- a/pc/src/views/asset/inventory/index.vue
+++ b/pc/src/views/asset/inventory/index.vue
@@ -267,6 +267,7 @@ import { getLocationTree } from '@/api/asset/location'
 import AssetDetail from './components/AssetDetail'
 import AssetForm from './components/AssetForm'
 import AssetLabelPrint from './components/AssetLabelPrint'
+import { API_SUCCESS_CODE } from '@/utils/constants'
 
 export default {
   name: 'AssetInventory',
@@ -449,7 +450,7 @@ export default {
     getList() {
       this.loading = true
       listAssets(this.queryParams).then(response => {
-        if (response.code === '000000') {
+        if (response.code === API_SUCCESS_CODE) {
           this.assetList = response.data.list || []
           this.total = response.data.total
         }
@@ -471,7 +472,7 @@ export default {
     /** 获取资产分类树形选项 */
     getClassificationOptions() {
       getClassificationTree({ status: '1' }).then(response => {
-        if (response.code === '000000') {
+        if (response.code === API_SUCCESS_CODE) {
           this.classificationOptions = this.processClassificationTree(response.data || [])
         }
       })
@@ -480,7 +481,7 @@ export default {
     /** 获取资产位置树形选项 */
     getLocationOptions() {
       getLocationTree().then(response => {
-        if (response.code === '000000') {
+        if (response.code === API_SUCCESS_CODE) {
           this.locationOptions = this.processLocationTree(response.data || [])
         }
       })
@@ -529,7 +530,7 @@ export default {
     /** 获取公司选项 */
     getCompanyOptions() {
       listCompanies().then(response => {
-        if (response.code === '000000') {
+        if (response.code === API_SUCCESS_CODE) {
           this.companyOptions = response.data || []
         }
       })
@@ -541,7 +542,7 @@ export default {
         this.adminLoading = true
         listUsers({ name: query }).then(response => {
           this.adminLoading = false
-          if (response.code === '000000') {
+          if (response.code === API_SUCCESS_CODE) {
             this.adminOptions = response.data || []
           }
         }).catch(() => {
@@ -672,7 +673,7 @@ export default {
       }).then(() => {
         return deleteAsset(row.assetCode)
       }).then(response => {
-        if (response.code === '000000') {
+        if (response.code === API_SUCCESS_CODE) {
           this.$message.success('删除成功')
           this.getList()
         }
@@ -694,7 +695,7 @@ export default {
       }).then(() => {
         return deleteAssets(assetCodes)
       }).then(response => {
-        if (response.code === '000000') {
+        if (response.code === API_SUCCESS_CODE) {
           this.$message.success('批量删除成功')
           this.getList()
         }
@@ -745,7 +746,7 @@ export default {
       this.upload.isUploading = false
       this.$refs.upload.clearFiles()
       this.upload.open = false
-      if (response.code === '000000') {
+      if (response.code === API_SUCCESS_CODE) {
         this.$message.success('导入成功' + (response.data && response.data.successCount ? response.data.successCount : 0) + '条数据')
         this.getList()
       }
diff --git a/pc/src/views/asset/labelPage/index.vue b/pc/src/views/asset/labelPage/index.vue
index 83f4349..0f63e8a 100644
--- a/pc/src/views/asset/labelPage/index.vue
+++ b/pc/src/views/asset/labelPage/index.vue
@@ -109,6 +109,7 @@ import {
   listLabelTemplates, addLabelTemplate, updateLabelTemplate,
   getLabelFields, getFieldSampleValues
 } from '@/api/asset/label'
+import { API_SUCCESS_CODE } from '@/utils/constants'
 
 export default {
   name: 'AssetLabel',
@@ -153,7 +154,7 @@ export default {
       try {
         this.loading = true;
         const res = await listLabelTemplates();
-        if (res.code === '000000') {
+        if (res.code === API_SUCCESS_CODE) {
           if (res.data) {
             const labelData = res.data;
             this.labelId = labelData.id;
@@ -209,7 +210,7 @@ export default {
     async getFieldOptions() {
       try {
         const res = await getLabelFields();
-        if (res.code === '000000') {
+        if (res.code === API_SUCCESS_CODE) {
           this.availableFields = res.data || [];
           console.log("获取到的字段选项: ", this.availableFields);
         } else {
@@ -342,7 +343,7 @@ export default {
       
       savePromise.then(res => {
         this.loading = false;
-        if (res.code === '000000') {
+        if (res.code === API_SUCCESS_CODE) {
           this.$message.success('标签设置保存成功');
           // 重新获取标签设置
           this.getLabelSettings();
diff --git a/pc/src/views/asset/location/index.vue b/pc/src/views/asset/location/index.vue
index ac33dab..4a16da7 100644
--- a/pc/src/views/asset/location/index.vue
+++ b/pc/src/views/asset/location/index.vue
@@ -174,6 +174,7 @@
 
 <script>
 import { listLocation, getLocation, addLocation, updateLocation, delLocation, enableLocation, disableLocation, getLocationTree, checkLocationInUse, getChildLocations, delLocationBatch, checkLocationCode } from '@/api/asset/location'
+import { API_SUCCESS_CODE } from '@/utils/constants'
 
 export default {
   name: 'AssetLocation',
@@ -245,7 +246,7 @@ export default {
         return
       }
       checkLocationCode(this.form.id, value).then(res => {
-        if (res.code === '000000') {
+        if (res.code === API_SUCCESS_CODE) {
           if (res.data) {
             callback()
           } else {
@@ -265,7 +266,7 @@ export default {
         status: undefined // 获取所有状态的位置
       }
       getLocationTree(params).then(res => {
-        if (res.code === '000000') {
+        if (res.code === API_SUCCESS_CODE) {
           // 处理返回的树形数据，确保字段名称正确
           this.locationTree = this.processTreeData(res.data)
           
@@ -387,7 +388,7 @@ export default {
     getList() {
       this.loading = true
       listLocation(this.queryParams).then(res => {
-        if (res.code === '000000') {
+        if (res.code === API_SUCCESS_CODE) {
           // 转换API返回数据结构为驼峰命名
           this.locationList = this.convertSnakeToCamel(res.data.list)
           this.total = res.data.total
@@ -410,7 +411,7 @@ export default {
         pageNum: this.queryParams.pageNum,
         pageSize: this.queryParams.pageSize
       }).then(res => {
-        if (res.code === '000000') {
+        if (res.code === API_SUCCESS_CODE) {
           this.locationList = this.convertSnakeToCamel(res.data.list)
           this.total = res.data.total
         } else {
@@ -464,7 +465,7 @@ export default {
     handleEdit(row) {
       const id = row.id
       getLocation(id).then(res => {
-        if (res.code === '000000') {
+        if (res.code === API_SUCCESS_CODE) {
           // 将API响应数据映射到表单字段，使用驼峰命名
           this.form = {
             id: res.data.id,
@@ -518,7 +519,7 @@ export default {
           
           const method = this.form.id ? updateLocation : addLocation
           method(submitData).then(res => {
-            if (res.code === '000000') {
+            if (res.code === API_SUCCESS_CODE) {
               this.$message.success('操作成功')
               this.dialogVisible = false
               
@@ -550,14 +551,14 @@ export default {
       }).then(() => {
         // 先检查位置是否被使用
         checkLocationInUse(row.id).then(res => {
-          if (res.code === '000000' && res.data) {
+          if (res.code === API_SUCCESS_CODE && res.data) {
             this.$message.error('该位置已被使用，无法删除')
             return
           }
           // 未被使用，执行删除操作
           const lastModUserId = this.$store.getters.userId || ''
           delLocation(row.id, lastModUserId).then(res => {
-            if (res.code === '000000') {
+            if (res.code === API_SUCCESS_CODE) {
               this.$message.success('删除成功')
               // 重新获取树形结构，确保更新多级结构
               this.getTree()
@@ -584,7 +585,7 @@ export default {
         const lastModUserId = this.$store.getters.userId || ''
         const method = row.status === '1' ? disableLocation : enableLocation
         method(row.id, lastModUserId).then(res => {
-          if (res.code === '000000') {
+          if (res.code === API_SUCCESS_CODE) {
             this.$message.success(`${action}成功`)
             // 状态变更后，可能会影响树的显示，所以也需要刷新树
             this.getTree()
@@ -657,7 +658,7 @@ export default {
         // 执行批量删除操作
         this.loading = true
         delLocationBatch(selectedIds, lastModUserId).then(res => {
-          if (res.code === '000000') {
+          if (res.code === API_SUCCESS_CODE) {
             this.$message.success('批量删除成功')
             // 重新获取树形结构，确保更新多级结构
             this.getTree()
diff --git a/pc/src/views/finance/billList/components/AddBill.vue b/pc/src/views/finance/billList/components/AddBill.vue
new file mode 100644
index 0000000..8371e23
--- /dev/null
+++ b/pc/src/views/finance/billList/components/AddBill.vue
@@ -0,0 +1,758 @@
+<template>
+  <div class="add-bill-container">
+    <el-tabs v-model="activeTab">
+      <el-tab-pane label="收费模式" name="chargeMode">
+        <el-form ref="chargeModeForm" :model="billForm" :rules="chargeModeRules" label-width="120px">
+          <el-form-item label="含税规则" prop="taxInclusiveRule" required>
+            <el-radio-group v-model="billForm.taxInclusiveRule">
+              <el-radio label="含税">含税</el-radio>
+              <el-radio label="不含税">不含税</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="税率(%)" prop="taxRate" required>
+            <el-input-number v-model="billForm.taxRate" :min="0" :max="100" :precision="2" style="width: 200px"></el-input-number>
+          </el-form-item>
+          <el-form-item label="特殊账单类型" prop="specialBillType" required>
+            <el-radio-group v-model="billForm.specialBillType">
+              <el-radio label="正常">正常</el-radio>
+              <el-radio label="罚金">罚金</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="滞纳金起算天数" prop="lateFeeStartDays">
+            <el-input-number v-model="billForm.lateFeeStartDays" :min="0" :precision="0" style="width: 200px"></el-input-number>
+          </el-form-item>
+          <el-form-item label="滞纳金比例(%/天)" prop="lateFeeRate">
+            <el-input-number v-model="billForm.lateFeeRate" :min="0" :max="100" :precision="10" style="width: 200px"></el-input-number>
+          </el-form-item>
+          <el-form-item label="滞纳金上限(%)" prop="lateFeeLimit">
+            <el-input-number v-model="billForm.lateFeeLimit" :min="0" :max="100" :precision="10" style="width: 200px"></el-input-number>
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+      
+      <el-tab-pane label="账单信息" name="billInfo">
+        <el-form ref="formExtension" :model="formExtension" :rules="formExtensionRules" label-width="120px" style="margin-bottom: 20px;">
+          <el-form-item label="费用类型" prop="feeTypeSelected" required>
+            <el-cascader v-model="formExtension.feeTypeSelected" :options="feeTypeOptions" :props="{
+                label: 'label',
+                value: 'id',
+                children: 'children',
+                expandTrigger: 'hover'
+              }" 
+              clearable filterable placeholder="请选择费用类型" @change="handleFeeTypeChange" style="width: 400px">
+            </el-cascader>
+          </el-form-item>
+          <el-form-item label="计费周期" prop="billingPeriod" required>
+            <el-date-picker
+              v-model="formExtension.billingPeriod"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              value-format="yyyy-MM-dd"
+              @change="handleBillingPeriodChange"
+              style="width: 400px">
+            </el-date-picker>
+          </el-form-item>
+        </el-form>
+        <el-form ref="billInfoForm" :model="billForm" :rules="billInfoRules" label-width="120px">
+          <el-form-item label="关联合同" prop="contractId">
+            <el-select v-model="billForm.contractId" placeholder="请选择关联合同" filterable remote clearable
+              :remote-method="searchContracts" style="width: 400px">
+              <el-option v-for="item in contractOptions" :key="item.contractId"
+                :label="item.contractNumber + ' - ' + item.customerName" :value="item.contractId">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="付款方" prop="payeeId" required>
+            <el-select v-model="billForm.payeeId" placeholder="请选择付款方" filterable remote clearable
+              :remote-method="searchPayees" @change="handlePayeeChange" style="width: 400px">
+              <el-option v-for="item in payeeOptions" :key="item.id"
+                :label="item.name" :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="币种" prop="currCode" required>
+            <el-input v-model="billForm.currCode" disabled style="width: 400px"></el-input>
+          </el-form-item>
+          <el-form-item label="应收金额" prop="receivableAmount" required>
+            <el-input-number v-model="billForm.receivableAmount" :min="0" :precision="2" style="width: 400px"></el-input-number>
+          </el-form-item>
+          <el-form-item label="应收日期" prop="receivableDate" required>
+            <el-date-picker
+              v-model="billForm.receivableDate"
+              type="date"
+              placeholder="选择日期"
+              value-format="yyyy-MM-dd"
+              style="width: 400px">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="所属公司" prop="companyId" required>
+            <el-select v-model="billForm.companyId" placeholder="请选择所属公司" filterable @change="handleCompanyChange" style="width: 400px">
+              <el-option v-for="item in companyOptions" :key="item.id"
+                :label="item.name" :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="收支账户" prop="accountId" required>
+            <el-select v-model="billForm.accountId" placeholder="请选择收支账户" filterable style="width: 400px">
+              <el-option v-for="item in accountOptions" :key="item.id"
+                :label="item.name" :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="账单备注" prop="billRemark">
+            <el-input type="textarea" v-model="billForm.billRemark" placeholder="请输入账单备注" rows="3" style="width: 400px"></el-input>
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+      
+      <el-tab-pane label="房源信息" name="roomInfo">
+        <el-tree 
+          ref="roomTree"
+          :data="roomTreeData"
+          show-checkbox
+          node-key="id"
+          :props="{ label: 'label', children: 'children' }"
+          :default-checked-keys="selectedRoomIds"
+          @check="handleRoomTreeCheck">
+        </el-tree>
+      </el-tab-pane>
+      
+      <el-tab-pane label="账单附件" name="attachment">
+        <el-upload
+          class="upload-area"
+          action="#"
+          :http-request="uploadFile"
+          :file-list="fileList"
+          :before-upload="beforeUpload"
+          multiple
+          :limit="10">
+          <el-button type="primary">添加附件</el-button>
+          <div slot="tip" class="el-upload__tip">只能上传jpg/png/pdf文件，且不超过5MB</div>
+        </el-upload>
+        
+        <el-table v-loading="attachmentLoading" :data="fileList" border style="width: 100%; margin-top: 20px">
+          <el-table-column prop="name" label="文件名" min-width="200" show-overflow-tooltip></el-table-column>
+          <el-table-column prop="operatorName" label="操作人" width="150"></el-table-column>
+          <el-table-column prop="operateTime" label="操作时间" width="180"></el-table-column>
+          <el-table-column label="操作" width="200" align="center">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" @click="previewFile(scope.row)">预览</el-button>
+              <el-button size="mini" type="text" @click="downloadFile(scope.row)">下载</el-button>
+              <el-button size="mini" type="text" class="delete-btn" @click="deleteFile(scope.$index)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { getFeeTypeTree } from '@/api/finance'
+
+export default {
+  name: 'AddBill',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      activeTab: 'chargeMode',
+      // 账单表单数据
+      billForm: {
+        contractId: '',
+        contractNumber: '',
+        payeeId: '',
+        payeeName: '',
+        payeeContact: '',
+        feeCategoryId: '',
+        feeTypeId: '',
+        feeTypeName: '',
+        currCode: '156', // 默认人民币
+        billingStartDate: '',
+        billingEndDate: '',
+        receivableAmount: 0,
+        price: 0,
+        priceU: '元/月',
+        taxInclusiveRule: '含税',
+        taxRate: 0,
+        receivableDate: '',
+        specialBillType: '正常',
+        lateFeeStartDays: 0,
+        lateFeeRate: 0,
+        lateFeeLimit: 0,
+        companyId: '',
+        companyName: '',
+        accountId: '',
+        billRemark: '',
+        roomInfoList: []
+      },
+      // 表单验证规则
+      chargeModeRules: {
+        taxInclusiveRule: [
+          { required: true, message: '请选择含税规则', trigger: 'change' }
+        ],
+        taxRate: [
+          { required: true, message: '请输入税率', trigger: 'blur' }
+        ],
+        specialBillType: [
+          { required: true, message: '请选择特殊账单类型', trigger: 'change' }
+        ]
+      },
+      billInfoRules: {
+        payeeId: [
+          { required: true, message: '请选择付款方', trigger: 'change' }
+        ],
+        companyId: [
+          { required: true, message: '请选择所属公司', trigger: 'change' }
+        ],
+        accountId: [
+          { required: true, message: '请选择收支账户', trigger: 'change' }
+        ],
+        receivableAmount: [
+          { required: true, message: '请输入应收金额', trigger: 'blur' }
+        ],
+        receivableDate: [
+          { required: true, message: '请选择应收日期', trigger: 'change' }
+        ]
+      },
+      // 额外表单数据和验证规则
+      formExtension: {
+        feeTypeSelected: null,
+        billingPeriod: []
+      },
+      formExtensionRules: {
+        feeTypeSelected: [
+          { required: true, message: '请选择费用类型', trigger: 'change' }
+        ],
+        billingPeriod: [
+          { type: 'array', required: true, message: '请选择计费周期', trigger: 'change' }
+        ]
+      },
+      // 选择项相关
+      contractOptions: [],
+      payeeOptions: [],
+      feeTypeOptions: [],
+      companyOptions: [],
+      accountOptions: [],
+      roomTreeData: [],
+      selectedRoomIds: [],
+      // 附件上传相关
+      fileList: [],
+      attachmentLoading: false
+    }
+  },
+  created() {
+    this.getFeeTypeOptions()
+    this.getCompanyOptions()
+    this.getRoomTreeData()
+  },
+  methods: {
+    // 获取费用类型选项
+    getFeeTypeOptions() {
+      getFeeTypeTree({ level: 2 }).then(response => {
+        if (response.code === '0000000000000000') {
+          // 数据预处理
+          this.feeTypeOptions = this.processTreeData(response.data)
+        }
+      })
+    },
+    
+    // 处理费用类型树形数据
+    processTreeData(data) {
+      if (!data || !Array.isArray(data) || data.length === 0) {
+        console.warn('无费用类型数据')
+        return []
+      }
+
+      return data.map(category => {
+        // 确保id字段存在
+        const categoryId = category.id || Math.random().toString(36).substr(2, 9)
+
+        // 处理子节点
+        let children = []
+        if (category.financeFeeTypes && Array.isArray(category.financeFeeTypes)) {
+          children = category.financeFeeTypes.map(feeType => {
+            return {
+              id: feeType.id || Math.random().toString(36).substr(2, 9),
+              label: feeType.feeTypeName || '未命名费用',
+              categoryId: categoryId,
+              // 存储原始数据以便后续使用
+              feeTypeName: feeType.feeTypeName || '未命名费用',
+              // 确保没有更多的子节点
+              children: null
+            }
+          })
+        }
+
+        return {
+          id: categoryId,
+          label: category.categoryName || '未命名分类',
+          categoryName: category.categoryName || '未命名分类',
+          children: children.length > 0 ? children : null
+        }
+      }).filter(item => item.children && item.children.length > 0)
+    },
+    // 获取公司选项
+    getCompanyOptions() {
+      // 模拟数据，实际应调用API
+      this.companyOptions = [
+        { id: 'C001', name: '智慧园区物业管理有限公司' }
+      ]
+    },
+    // 获取收支账户选项
+    getAccountOptions(companyId) {
+      // 模拟数据，实际应调用API
+      this.accountOptions = [
+        { id: 1, name: '运营账户-工商银行' },
+        { id: 2, name: '日常账户-建设银行' }
+      ]
+    },
+    // 搜索合同
+    searchContracts(query) {
+      if (query) {
+        // 实际应调用API
+        this.contractOptions = [
+          { contractId: 'CT001', contractNumber: 'HT2023001', customerName: '张三' },
+          { contractId: 'CT002', contractNumber: 'HT2023002', customerName: '李四' }
+        ]
+      } else {
+        this.contractOptions = []
+      }
+    },
+    // 搜索付款方
+    searchPayees(query) {
+      if (query) {
+        // 实际应调用API
+        this.payeeOptions = [
+          { id: '10001', name: '张三', contact: '13812345678' },
+          { id: '10002', name: '李四', contact: '13987654321' }
+        ]
+      } else {
+        this.payeeOptions = []
+      }
+    },
+    // 处理付款方变更
+    handlePayeeChange(payeeId) {
+      const payee = this.payeeOptions.find(item => item.id === payeeId)
+      if (payee) {
+        this.billForm.payeeName = payee.name
+        this.billForm.payeeContact = payee.contact
+        // 触发表单验证更新
+        this.$nextTick(() => {
+          this.$refs.billInfoForm.validateField('payeeId')
+        })
+      }
+    },
+    // 处理费用类型变更
+    handleFeeTypeChange(value) {
+      if (value) {
+        // 查找匹配的费用类型
+        let selectedFeeType = null;
+        let selectedCategory = null;
+        
+        // 在所有分类中查找
+        for (const category of this.feeTypeOptions) {
+          // 先检查是否选中的是分类
+          if (category.id === value) {
+            selectedCategory = category;
+            selectedFeeType = {
+              id: category.id,
+              name: category.label,
+              type: '分类'
+            };
+            break;
+          }
+          // 检查子节点
+          if (category.children && category.children.length > 0) {
+            const found = category.children.find(item => item.id === value);
+            if (found) {
+              selectedCategory = category;
+              selectedFeeType = {
+                id: found.id,
+                name: found.label,
+                categoryName: category.label,
+                type: '费用类型'
+              };
+              break;
+            }
+          }
+        }
+
+        if (selectedFeeType) {
+          // 设置费用分类ID和费用类型ID
+          if (selectedFeeType.type === '分类') {
+            this.billForm.feeCategoryId = selectedFeeType.id;
+            this.billForm.feeTypeId = '';
+            this.billForm.feeTypeName = selectedFeeType.name;
+          } else {
+            this.billForm.feeCategoryId = selectedCategory.id;
+            this.billForm.feeTypeId = selectedFeeType.id;
+            this.billForm.feeTypeName = selectedFeeType.name;
+          }
+        }
+      } else {
+        // 清空选择
+        this.billForm.feeCategoryId = '';
+        this.billForm.feeTypeId = '';
+        this.billForm.feeTypeName = '';
+      }
+    },
+    // 处理公司变更
+    handleCompanyChange(companyId) {
+      const company = this.companyOptions.find(item => item.id === companyId)
+      if (company) {
+        this.billForm.companyName = company.name
+        // 触发表单验证更新
+        this.$nextTick(() => {
+          this.$refs.billInfoForm.validateField('companyId')
+        })
+      }
+      // 重新获取收支账户
+      this.billForm.accountId = ''
+      this.getAccountOptions(companyId)
+    },
+    // 处理计费周期变更
+    handleBillingPeriodChange(val) {
+      if (val && val.length === 2) {
+        this.billForm.billingStartDate = val[0]
+        this.billForm.billingEndDate = val[1]
+      } else {
+        this.billForm.billingStartDate = ''
+        this.billForm.billingEndDate = ''
+      }
+    },
+    
+    // 获取房源树形数据
+    getRoomTreeData() {
+      // 模拟房源数据，与收费标准页面相同格式
+      const roomData = [
+        {
+          "id": "3",
+          "projectName": "智慧产业园",
+          "projectType": "产业园区",
+          "buildings": []
+        },
+        {
+          "id": "8",
+          "projectName": "测试-1",
+          "projectType": "产业园区",
+          "buildings": [
+            {
+              "id": 7,
+              "buildingName": "4121",
+              "buildingCode": "1234",
+              "floors": [
+                {
+                  "id": 7,
+                  "floorName": "123",
+                  "floorNumber": 11,
+                  "rooms": [
+                    {
+                      "id": 31,
+                      "roomNumber": "504",
+                      "roomType": null,
+                      "roomStatus": "1",
+                      "buildingArea": 122.00,
+                      "rentalArea": 20.99
+                    },
+                    {
+                      "id": 30,
+                      "roomNumber": "504",
+                      "roomType": null,
+                      "roomStatus": "1",
+                      "buildingArea": 122.00,
+                      "rentalArea": 20.99
+                    },
+                    {
+                      "id": 32,
+                      "roomNumber": "505",
+                      "roomType": null,
+                      "roomStatus": "1",
+                      "buildingArea": 122.00,
+                      "rentalArea": 20.99
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ];
+
+      // 转换为树形结构
+      this.roomTreeData = roomData.map(project => {
+        return {
+          id: project.id,
+          label: project.projectName,
+          children: project.buildings.map(building => {
+            return {
+              id: building.id,
+              label: building.buildingName,
+              children: building.floors.map(floor => {
+                return {
+                  id: floor.id,
+                  label: floor.floorName,
+                  children: floor.rooms.map(room => {
+                    return {
+                      id: room.id,
+                      label: `${room.roomNumber}（${room.rentalArea}㎡）`,
+                      isRoom: true,
+                      // 保存原始数据供选择
+                      roomData: room
+                    }
+                  })
+                }
+              })
+            }
+          })
+        }
+      });
+    },
+    
+    // 处理房源树选择
+    handleRoomTreeCheck(node, data) {
+      // 只选择叶子节点（房间）
+      const checkedNodes = this.$refs.roomTree.getCheckedNodes(true)
+      // 过滤出所有房间节点
+      const roomNodes = checkedNodes.filter(node => node.isRoom)
+      
+      // 更新选中的房间ID列表
+      this.selectedRoomIds = roomNodes.map(node => node.id)
+      
+      // 重置房源信息列表
+      this.billForm.roomInfoList = []
+      
+      // 创建一个Map用于收集项目信息
+      const projectMap = new Map()
+      
+      // 处理每个房间节点
+      roomNodes.forEach(roomNode => {
+        // 查找节点路径
+        let currentNode = this.$refs.roomTree.getNode(roomNode.id)
+        let roomInfo = roomNode.roomData
+        let floorNode, buildingNode, projectNode
+        
+        // 向上遍历找到楼层、楼宇和项目节点
+        while (currentNode && currentNode.parent) {
+          const parent = currentNode.parent
+          if (parent.level === 3) { // 楼层级别
+            floorNode = parent.data
+          } else if (parent.level === 2) { // 楼宇级别
+            buildingNode = parent.data
+          } else if (parent.level === 1) { // 项目级别
+            projectNode = parent.data
+          }
+          currentNode = parent
+        }
+        
+        // 只有完整路径的房间才处理
+        if (roomInfo && floorNode && buildingNode && projectNode) {
+          // 更新房源信息列表
+          this.billForm.roomInfoList.push({
+            roomId: roomNode.id,
+            roomNumber: roomInfo.roomNumber || roomNode.label.split('（')[0],
+            buildingId: buildingNode.id,
+            buildingName: buildingNode.label,
+            floorId: floorNode.id,
+            floorName: floorNode.label,
+            projectId: projectNode.id,
+            projectName: projectNode.label,
+            rentArea: roomInfo.rentalArea || 0
+          })
+        }
+      })
+    },
+    // 上传文件前检查
+    beforeUpload(file) {
+      const isValidType = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'application/pdf'
+      const isLt5M = file.size / 1024 / 1024 < 5
+      
+      if (!isValidType) {
+        this.$message.error('只能上传JPG/PNG/PDF格式的文件!')
+      }
+      
+      if (!isLt5M) {
+        this.$message.error('文件大小不能超过5MB!')
+      }
+      
+      return isValidType && isLt5M
+    },
+    // 自定义上传文件
+    uploadFile(options) {
+      this.attachmentLoading = true
+      
+      // 此处模拟上传，实际应调用API
+      setTimeout(() => {
+        this.fileList.push({
+          name: options.file.name,
+          url: URL.createObjectURL(options.file),
+          operatorName: '当前用户',
+          operateTime: new Date().toLocaleString()
+        })
+        
+        this.attachmentLoading = false
+        this.$message.success('上传成功')
+      }, 1000)
+    },
+    // 预览文件
+    previewFile(file) {
+      window.open(file.url)
+    },
+    // 下载文件
+    downloadFile(file) {
+      // 实际应调用API下载
+      const link = document.createElement('a')
+      link.href = file.url
+      link.download = file.name
+      link.click()
+    },
+    // 删除文件
+    deleteFile(index) {
+      this.$confirm('确认删除该附件?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.fileList.splice(index, 1)
+        this.$message.success('删除成功')
+      }).catch(() => {})
+    },
+    // 获取表单数据
+    getFormData() {
+      // 确保billForm中包含来自formExtension的数据
+      if (this.formExtension.feeTypeSelected) {
+        // 费用类型已经在handleFeeTypeChange中设置
+      }
+      
+      if (this.formExtension.billingPeriod && this.formExtension.billingPeriod.length === 2) {
+        this.billForm.billingStartDate = this.formExtension.billingPeriod[0]
+        this.billForm.billingEndDate = this.formExtension.billingPeriod[1]
+      }
+      
+      return this.billForm
+    },
+    // 表单验证
+    validateForm() {
+      return new Promise(resolve => {
+        // 验证收费模式表单
+        this.$refs.chargeModeForm.validate(valid1 => {
+          if (!valid1) {
+            this.activeTab = 'chargeMode'
+            resolve(false)
+            return
+          }
+          
+          // 验证费用类型和计费周期表单
+          this.$refs.formExtension.validate(valid2 => {
+            if (!valid2) {
+              this.activeTab = 'billInfo'
+              resolve(false)
+              return
+            }
+            
+            // 验证账单信息表单
+            this.$refs.billInfoForm.validate(valid3 => {
+              if (!valid3) {
+                this.activeTab = 'billInfo'
+                resolve(false)
+                return
+              }
+              
+              // 验证是否选择了房源
+              if (this.billForm.roomInfoList.length === 0) {
+                this.$message.warning('请至少选择一个房源')
+                this.activeTab = 'roomInfo'
+                resolve(false)
+                return
+              }
+              
+              resolve(true)
+            })
+          })
+        })
+      })
+    },
+    // 重置表单
+    resetForm() {
+      // 重置表单验证状态
+      if (this.$refs.chargeModeForm) {
+        this.$refs.chargeModeForm.resetFields()
+      }
+      if (this.$refs.billInfoForm) {
+        this.$refs.billInfoForm.resetFields()
+      }
+      if (this.$refs.formExtension) {
+        this.$refs.formExtension.resetFields()
+      }
+      
+      // 切换到第一个标签
+      this.activeTab = 'chargeMode'
+      
+      // 重置表单数据
+      this.billForm = {
+        contractId: '',
+        contractNumber: '',
+        payeeId: '',
+        payeeName: '',
+        payeeContact: '',
+        feeCategoryId: '',
+        feeTypeId: '',
+        feeTypeName: '',
+        currCode: '156', // 默认人民币
+        billingStartDate: '',
+        billingEndDate: '',
+        receivableAmount: 0,
+        price: 0,
+        priceU: '元/月',
+        taxInclusiveRule: '含税',
+        taxRate: 0,
+        receivableDate: '',
+        specialBillType: '正常',
+        lateFeeStartDays: 0,
+        lateFeeRate: 0,
+        lateFeeLimit: 0,
+        companyId: '',
+        companyName: '',
+        accountId: '',
+        billRemark: '',
+        roomInfoList: []
+      }
+      
+      // 重置扩展表单数据
+      this.formExtension = {
+        feeTypeSelected: null,
+        billingPeriod: []
+      }
+      
+      // 重置房源选择
+      this.selectedRoomIds = []
+      if (this.$refs.roomTree) {
+        this.$refs.roomTree.setCheckedKeys([])
+      }
+      
+      // 重置文件上传列表
+      this.fileList = []
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.add-bill-container {
+  padding: 20px;
+  
+  .upload-area {
+    margin: 20px 0;
+  }
+  
+  .delete-btn {
+    color: #F56C6C;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/pc/src/views/finance/billList/components/BillDetail.vue b/pc/src/views/finance/billList/components/BillDetail.vue
new file mode 100644
index 0000000..cc56d22
--- /dev/null
+++ b/pc/src/views/finance/billList/components/BillDetail.vue
@@ -0,0 +1,256 @@
+<template>
+  <div class="bill-detail-container">
+    <el-tabs v-model="activeTab">
+      <el-tab-pane label="账单基本信息" name="basicInfo">
+        <el-descriptions :column="3" border size="medium">
+          <el-descriptions-item label="账单编号">{{ billDetail.billNumber }}</el-descriptions-item>
+          <el-descriptions-item label="账单来源">{{ getBillSourceName(billDetail.billSource) }}</el-descriptions-item>
+          <el-descriptions-item label="账单状态">
+            <el-tag :type="billDetail.billStatus === '1' ? 'success' : 'info'">
+              {{ billDetail.billStatus === '1' ? '开启' : '关闭' }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="对方名称">{{ billDetail.payeeName }}</el-descriptions-item>
+          <el-descriptions-item label="支付联系方式">{{ billDetail.payeeContact }}</el-descriptions-item>
+          <el-descriptions-item label="关联合同">{{ billDetail.contractNumber || '无' }}</el-descriptions-item>
+          <el-descriptions-item label="费用类型">{{ billDetail.feeTypeName }}</el-descriptions-item>
+          <el-descriptions-item label="计费周期">
+            {{ billDetail.billingStartDate }} 至 {{ billDetail.billingEndDate }}
+          </el-descriptions-item>
+          <el-descriptions-item label="应收日期">{{ billDetail.receivableDate }}</el-descriptions-item>
+          <el-descriptions-item label="结清状态">
+            <el-tag :type="getClearStatusType(billDetail.clearStatus)">
+              {{ getClearStatusName(billDetail.clearStatus) }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="逾期状态">
+            <el-tag :type="billDetail.overdueStatus === '1' ? 'danger' : 'success'">
+              {{ billDetail.overdueStatus === '1' ? '逾期' : '正常' }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="滞纳金状态">
+            <el-tag :type="getLateFeeStatusType(billDetail.lateFeeStatus)">
+              {{ getLateFeeStatusName(billDetail.lateFeeStatus) }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="账单金额">{{ formatAmount(billDetail.billAmount) }}</el-descriptions-item>
+          <el-descriptions-item label="应收金额">{{ formatAmount(billDetail.receivableAmount) }}</el-descriptions-item>
+          <el-descriptions-item label="实收金额">{{ formatAmount(billDetail.receivedAmount) }}</el-descriptions-item>
+          <el-descriptions-item label="需收金额">{{ formatAmount(billDetail.needAmount) }}</el-descriptions-item>
+          <el-descriptions-item label="调整金额">{{ formatAmount(billDetail.adjustAmount) }}</el-descriptions-item>
+          <el-descriptions-item label="应收滞纳金">{{ formatAmount(billDetail.receivableLateFee) }}</el-descriptions-item>
+          <el-descriptions-item label="税率">{{ billDetail.taxRate }}%</el-descriptions-item>
+          <el-descriptions-item label="税额">{{ formatAmount(billDetail.taxAmount) }}</el-descriptions-item>
+          <el-descriptions-item label="含税规则">{{ billDetail.taxInclusiveRule }}</el-descriptions-item>
+          <el-descriptions-item label="特殊账单类型">{{ billDetail.specialBillType }}</el-descriptions-item>
+          <el-descriptions-item label="开据状态">
+            <el-tag :type="billDetail.receiptStatus === '1' ? 'success' : 'info'">
+              {{ billDetail.receiptStatus === '1' ? '已开据' : '未开据' }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="所属公司">{{ billDetail.companyName }}</el-descriptions-item>
+          <el-descriptions-item label="租赁数(计租面积)">{{ billDetail.rentArea }} ㎡</el-descriptions-item>
+          <el-descriptions-item label="项目名称">{{ billDetail.projectName }}</el-descriptions-item>
+          <el-descriptions-item label="账单备注" :span="3">{{ billDetail.billRemark || '无' }}</el-descriptions-item>
+        </el-descriptions>
+      </el-tab-pane>
+      
+      <el-tab-pane label="房源信息" name="roomInfo">
+        <el-table :data="roomList" border style="width: 100%">
+          <el-table-column prop="roomNumber" label="房号" min-width="100"></el-table-column>
+          <el-table-column prop="floorName" label="楼层" min-width="100"></el-table-column>
+          <el-table-column prop="buildingName" label="楼宇" min-width="120"></el-table-column>
+          <el-table-column prop="projectName" label="项目" min-width="150"></el-table-column>
+          <el-table-column prop="rentArea" label="计租面积(㎡)" min-width="120" align="right"></el-table-column>
+        </el-table>
+        <div v-if="roomList.length === 0" class="empty-data">
+          <el-empty description="暂无房源信息"></el-empty>
+        </div>
+      </el-tab-pane>
+      
+      <el-tab-pane label="附件信息" name="attachment">
+        <el-table :data="attachmentList" border style="width: 100%">
+          <el-table-column prop="fileName" label="文件名" min-width="200" show-overflow-tooltip></el-table-column>
+          <el-table-column prop="operatorName" label="操作人" width="150"></el-table-column>
+          <el-table-column prop="operateTime" label="操作时间" width="180"></el-table-column>
+          <el-table-column label="操作" width="200" align="center">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" @click="previewFile(scope.row)">预览</el-button>
+              <el-button size="mini" type="text" @click="downloadFile(scope.row)">下载</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div v-if="attachmentList.length === 0" class="empty-data">
+          <el-empty description="暂无附件信息"></el-empty>
+        </div>
+      </el-tab-pane>
+      
+      <el-tab-pane label="操作记录" name="operationLog">
+        <el-table :data="operationList" border style="width: 100%">
+          <el-table-column prop="operationType" label="操作类型" width="150"></el-table-column>
+          <el-table-column prop="operatorName" label="操作人" width="150"></el-table-column>
+          <el-table-column prop="operateTime" label="操作时间" width="180"></el-table-column>
+          <el-table-column prop="remark" label="备注" min-width="300" show-overflow-tooltip></el-table-column>
+        </el-table>
+        <div v-if="operationList.length === 0" class="empty-data">
+          <el-empty description="暂无操作记录"></el-empty>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { getBillDetail, getBillAttachmentList } from '@/api/finance'
+
+export default {
+  name: 'BillDetail',
+  props: {
+    billId: {
+      type: [Number, String],
+      required: true
+    }
+  },
+  data() {
+    return {
+      activeTab: 'basicInfo',
+      loading: false,
+      billDetail: {},
+      roomList: [],
+      attachmentList: [],
+      operationList: []
+    }
+  },
+  created() {
+    this.getBillData()
+  },
+  methods: {
+    // 获取账单数据
+    getBillData() {
+      this.loading = true
+      
+      // 获取账单详情
+      getBillDetail(this.billId).then(response => {
+        this.billDetail = response.data || {}
+        
+        // 模拟房源信息数据，实际应从接口获取或者账单详情中提取
+        this.roomList = [
+          {
+            roomId: 'R001',
+            roomNumber: this.billDetail.roomNumber || '',
+            floorName: '1层',
+            buildingName: '智慧园区A栋',
+            projectName: this.billDetail.projectName || '',
+            rentArea: this.billDetail.rentArea || 0
+          }
+        ]
+        
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+      
+      // 获取附件列表
+      getBillAttachmentList(this.billId).then(response => {
+        this.attachmentList = response.data || []
+      })
+      
+      // 模拟操作记录数据，实际应从接口获取
+      this.operationList = [
+        {
+          operationType: '创建账单',
+          operatorName: '系统管理员',
+          operateTime: '2023-06-20 10:30:00',
+          remark: '创建新账单'
+        }
+      ]
+    },
+    // 格式化金额
+    formatAmount(amount) {
+      if (amount === undefined || amount === null) {
+        return '0.00'
+      }
+      return parseFloat(amount).toFixed(2) + ' 元'
+    },
+    // 获取账单来源名称
+    getBillSourceName(source) {
+      const sourceMap = {
+        '1': '合同账单',
+        '2': '收费标准账单',
+        '3': '自建全部账单',
+        '4': '自建关联合同账单',
+        '5': '自建未关联合同账单'
+      }
+      return sourceMap[source] || '未知来源'
+    },
+    // 获取结清状态类型
+    getClearStatusType(status) {
+      const statusMap = {
+        '0': 'info',
+        '1': 'success',
+        '2': 'warning',
+        '3': 'danger',
+        '5': 'primary',
+        '6': 'info',
+        '7': 'success'
+      }
+      return statusMap[status] || 'info'
+    },
+    // 获取结清状态名称
+    getClearStatusName(status) {
+      const statusMap = {
+        '0': '未付款',
+        '1': '已结清',
+        '2': '部分结清',
+        '3': '待退款',
+        '5': '待收款',
+        '6': '对账确认中',
+        '7': '已付款'
+      }
+      return statusMap[status] || '未知状态'
+    },
+    // 获取滞纳金状态类型
+    getLateFeeStatusType(status) {
+      const statusMap = {
+        '0': 'info',
+        '1': 'warning',
+        '2': 'success'
+      }
+      return statusMap[status] || 'info'
+    },
+    // 获取滞纳金状态名称
+    getLateFeeStatusName(status) {
+      const statusMap = {
+        '0': '无滞纳金',
+        '1': '有滞纳金',
+        '2': '滞纳金免除'
+      }
+      return statusMap[status] || '未知状态'
+    },
+    // 预览文件
+    previewFile(file) {
+      window.open(file.storePath)
+    },
+    // 下载文件
+    downloadFile(file) {
+      // 实际应调用API下载
+      const link = document.createElement('a')
+      link.href = file.storePath
+      link.download = file.fileName
+      link.click()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bill-detail-container {
+  padding: 10px;
+  
+  .empty-data {
+    margin: 20px 0;
+    display: flex;
+    justify-content: center;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/pc/src/views/finance/billList/index.vue b/pc/src/views/finance/billList/index.vue
new file mode 100644
index 0000000..4a9bbef
--- /dev/null
+++ b/pc/src/views/finance/billList/index.vue
@@ -0,0 +1,409 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索表单 -->
+    <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form">
+      <el-form-item label="合同编号" prop="contractNumber">
+        <el-input v-model="queryParams.contractNumber" placeholder="请输入合同编号" clearable style="width: 220px" />
+      </el-form-item>
+      <el-form-item label="房号" prop="roomNumber">
+        <el-input v-model="queryParams.roomNumber" placeholder="请输入房号" clearable style="width: 220px" />
+      </el-form-item>
+      <el-form-item label="对方名称" prop="payeeName">
+        <el-input v-model="queryParams.payeeName" placeholder="请输入对方名称" clearable style="width: 220px" />
+      </el-form-item>
+      <el-form-item label="账单编号" prop="billNumber">
+        <el-input v-model="queryParams.billNumber" placeholder="请输入账单编号" clearable style="width: 220px" />
+      </el-form-item>
+      <el-form-item label="账单状态" prop="billStatus">
+        <el-select v-model="queryParams.billStatus" placeholder="请选择账单状态" clearable multiple style="width: 220px">
+          <el-option label="开启" value="1" />
+          <el-option label="关闭" value="0" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="应收时间" prop="receivableDate">
+        <el-date-picker
+          v-model="dateRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          style="width: 240px">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="结清状态" prop="clearStatus">
+        <el-select v-model="queryParams.clearStatus" placeholder="请选择结清状态" clearable multiple style="width: 220px">
+          <el-option label="未付款" value="0" />
+          <el-option label="已结清" value="1" />
+          <el-option label="部分结清" value="2" />
+          <el-option label="待退款" value="3" />
+          <el-option label="待收款" value="5" />
+          <el-option label="对账确认中" value="6" />
+          <el-option label="已付款" value="7" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="账单来源" prop="billSource">
+        <el-select v-model="queryParams.billSource" placeholder="请选择账单来源" clearable style="width: 220px">
+          <el-option label="合同账单" value="1" />
+          <el-option label="收费标准账单" value="2" />
+          <el-option label="自建全部账单" value="3" />
+          <el-option label="自建关联合同账单" value="4" />
+          <el-option label="自建未关联合同账单" value="5" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="费用类型" prop="feeType">
+        <el-cascader
+          v-model="feeTypeSelected"
+          :options="feeTypeOptions"
+          :props="{
+            label: 'label',
+            value: 'id',
+            children: 'children',
+            emitPath: false,
+            expandTrigger: 'hover'
+          }"
+          clearable
+          placeholder="请选择费用类型"
+          style="width: 220px">
+        </el-cascader>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+      <el-button type="success" icon="el-icon-plus" style="float: right;" @click="handleAdd">添加收款账单</el-button>
+      <el-button type="warning" icon="el-icon-download" style="float: right; margin-right: 10px;" @click="handleExport">导出</el-button>
+    </el-form>
+
+    <!-- 表格区域 -->
+    <el-table v-loading="loading" :data="billList" border>
+      <el-table-column label="对方名称" prop="payeeName" min-width="120" show-overflow-tooltip />
+      <el-table-column label="项目楼宇名称" prop="projectName" min-width="120" show-overflow-tooltip />
+      <el-table-column label="房号" prop="roomNumber" min-width="100" show-overflow-tooltip />
+      <el-table-column label="账单编号" prop="billNumber" min-width="150" show-overflow-tooltip />
+      <el-table-column label="合同编号" prop="contractNumber" min-width="150" show-overflow-tooltip />
+      <el-table-column label="结清状态" min-width="100" align="center">
+        <template slot-scope="scope">
+          <el-tag :type="getClearStatusType(scope.row.clearStatus)">
+            {{ getClearStatusName(scope.row.clearStatus) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="费用类型" prop="feeTypeName" min-width="120" show-overflow-tooltip />
+      <el-table-column label="账单金额" prop="billAmount" min-width="100" align="right">
+        <template slot-scope="scope">
+          {{ scope.row.billAmount ? scope.row.billAmount.toFixed(2) : '0.00' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="应收金额" prop="receivableAmount" min-width="100" align="right">
+        <template slot-scope="scope">
+          {{ scope.row.receivableAmount ? scope.row.receivableAmount.toFixed(2) : '0.00' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="实收金额" prop="receivedAmount" min-width="100" align="right">
+        <template slot-scope="scope">
+          {{ scope.row.receivedAmount ? scope.row.receivedAmount.toFixed(2) : '0.00' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="开始日期" prop="billingStartDate" min-width="120" align="center" />
+      <el-table-column label="结束日期" prop="billingEndDate" min-width="120" align="center" />
+      <el-table-column label="应收日期" prop="receivableDate" min-width="120" align="center" />
+      <el-table-column label="操作" width="150" align="center" fixed="right">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" icon="el-icon-view" @click="handleViewDetail(scope.row)">查看</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="pagination-container">
+        <!-- 分页区域 -->
+        <el-pagination
+            background
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="queryParams.pageNum"
+            :page-sizes="[10, 20, 30, 50]"
+            :page-size="queryParams.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total">
+        </el-pagination>
+    </div>
+  
+
+    <!-- 添加账单对话框 -->
+    <el-dialog title="添加收款账单" :visible.sync="dialogVisible" width="80%" append-to-body @closed="handleDialogClosed">
+      <add-bill ref="addBillForm" />
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitAddBill">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 账单详情对话框 -->
+    <el-dialog title="账单详情" :visible.sync="detailVisible" width="80%" append-to-body>
+      <bill-detail v-if="detailVisible" :bill-id="currentBill.id" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getFeeTypeTree, getBillList, exportBillList, addBill, getBillDetail } from '@/api/finance'
+import AddBill from './components/AddBill'
+import BillDetail from './components/BillDetail'
+
+export default {
+  name: 'BillList',
+  components: {
+    AddBill,
+    BillDetail
+  },
+  data() {
+    return {
+      // 加载标志
+      loading: false,
+      // 账单列表数据
+      billList: [],
+      // 总记录数
+      total: 0,
+      // 时间范围
+      dateRange: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        contractNumber: '',
+        roomNumber: '',
+        payeeName: '',
+        billNumber: '',
+        billStatus: [],
+        receivableDateStart: '',
+        receivableDateEnd: '',
+        clearStatus: [],
+        billSource: '',
+        feeTypeId: undefined,
+        feeCategoryId: undefined
+      },
+      // 费用类型选择
+      feeTypeSelected: undefined,
+      // 费用类型选项
+      feeTypeOptions: [],
+      // 对话框显示标志
+      dialogVisible: false,
+      detailVisible: false,
+      // 当前查看的账单详情
+      currentBill: {}
+    }
+  },
+  created() {
+    this.getList()
+    this.getFeeTypeOptions()
+  },
+  methods: {
+    // 获取账单列表
+    getList() {
+      this.loading = true
+      // 处理查询参数
+      const queryParams = { ...this.queryParams }
+      
+      // 处理日期范围
+      if (this.dateRange && this.dateRange.length > 0) {
+        queryParams.receivableDateStart = this.dateRange[0]
+        queryParams.receivableDateEnd = this.dateRange[1]
+      }
+      
+      // 处理费用类型
+      if (this.feeTypeSelected) {
+        queryParams.feeTypeId = this.feeTypeSelected
+      }
+      
+      getBillList(queryParams).then(response => {
+        this.billList = response.data.data || []
+        this.total = response.data.total
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    // 获取费用类型选项
+    getFeeTypeOptions() {
+      getFeeTypeTree({ level: 2 }).then(response => {
+        if (response.code === '0000000000000000') {
+          // 数据预处理
+          this.feeTypeOptions = this.processTreeData(response.data)
+        }
+      })
+    },
+    // 处理费用类型树形数据
+    processTreeData(data) {
+      if (!data || !Array.isArray(data) || data.length === 0) {
+        console.warn('无费用类型数据')
+        return []
+      }
+
+      return data.map(category => {
+        // 确保id字段存在
+        const categoryId = category.id || Math.random().toString(36).substr(2, 9)
+
+        // 处理子节点
+        let children = []
+        if (category.financeFeeTypes && Array.isArray(category.financeFeeTypes)) {
+          children = category.financeFeeTypes.map(feeType => {
+            return {
+              id: feeType.id || Math.random().toString(36).substr(2, 9),
+              label: feeType.feeTypeName || '未命名费用',
+              categoryId: categoryId,
+              // 存储原始数据以便后续使用
+              feeTypeName: feeType.feeTypeName || '未命名费用',
+              // 确保没有更多的子节点
+              children: null
+            }
+          })
+        }
+
+        return {
+          id: categoryId,
+          label: category.categoryName || '未命名分类',
+          categoryName: category.categoryName || '未命名分类',
+          children: children.length > 0 ? children : null
+        }
+      }).filter(item => item.children && item.children.length > 0)
+    },
+    // 搜索按钮操作
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    // 重置按钮操作
+    resetQuery() {
+      this.dateRange = []
+      this.feeTypeSelected = undefined
+      this.$refs.queryForm.resetFields()
+      this.handleQuery()
+    },
+    // 分页大小改变
+    handleSizeChange(val) {
+      this.queryParams.pageSize = val
+      this.getList()
+    },
+    // 分页页码改变
+    handleCurrentChange(val) {
+      this.queryParams.pageNum = val
+      this.getList()
+    },
+    // 添加账单操作
+    handleAdd() {
+      this.dialogVisible = true
+    },
+    // 关闭对话框时重置表单
+    handleDialogClosed() {
+      this.$refs.addBillForm.resetForm()
+    },
+    // 查看账单详情
+    handleViewDetail(row) {
+      this.currentBill = row
+      this.detailVisible = true
+    },
+    // 导出账单操作
+    handleExport() {
+      // 处理导出参数
+      const exportParams = { ...this.queryParams }
+      delete exportParams.pageNum
+      delete exportParams.pageSize
+      
+      // 处理日期范围
+      if (this.dateRange && this.dateRange.length > 0) {
+        exportParams.receivableDateStart = this.dateRange[0]
+        exportParams.receivableDateEnd = this.dateRange[1]
+      }
+      
+      // 处理费用类型
+      if (this.feeTypeSelected) {
+        exportParams.feeTypeId = this.feeTypeSelected
+      }
+      
+      this.$confirm('是否确认导出所有数据项?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        exportBillList(exportParams).then(response => {
+          // 创建下载链接
+          const blob = new Blob([response.data])
+          const fileName = `账单列表_${new Date().getTime()}.xlsx`
+          if (window.navigator.msSaveOrOpenBlob) {
+            // IE浏览器下载
+            navigator.msSaveBlob(blob, fileName)
+          } else {
+            // 非IE浏览器下载
+            const link = document.createElement('a')
+            link.href = window.URL.createObjectURL(blob)
+            link.download = fileName
+            link.style.display = 'none'
+            document.body.appendChild(link)
+            link.click()
+            document.body.removeChild(link)
+            window.URL.revokeObjectURL(link.href)
+          }
+        })
+      })
+    },
+    // 提交添加账单
+    submitAddBill() {
+      // 先进行表单验证
+      this.$refs.addBillForm.validateForm().then(valid => {
+        if (valid) {
+          const billData = this.$refs.addBillForm.getFormData()
+          addBill(billData).then(response => {
+            this.$message.success('添加账单成功')
+            this.dialogVisible = false
+            this.getList()
+          }).catch(() => {
+            // 错误处理
+          })
+        }
+      })
+    },
+    // 获取清算状态显示类型
+    getClearStatusType(status) {
+      const statusMap = {
+        '0': 'info',
+        '1': 'success',
+        '2': 'warning',
+        '3': 'danger',
+        '5': 'primary',
+        '6': 'info',
+        '7': 'success'
+      }
+      return statusMap[status] || 'info'
+    },
+    // 获取清算状态名称
+    getClearStatusName(status) {
+      const statusMap = {
+        '0': '未付款',
+        '1': '已结清',
+        '2': '部分结清',
+        '3': '待退款',
+        '5': '待收款',
+        '6': '对账确认中',
+        '7': '已付款'
+      }
+      return statusMap[status] || '未知状态'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 20px;
+
+  .search-form {
+    margin-bottom: 20px;
+  }
+
+  .pagination-container {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/pc/src/views/finance/chargeStandard/index.vue b/pc/src/views/finance/chargeStandard/index.vue
index 487f0cb..ddfc255 100644
--- a/pc/src/views/finance/chargeStandard/index.vue
+++ b/pc/src/views/finance/chargeStandard/index.vue
@@ -16,15 +16,11 @@
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+
       </el-form-item>
+      <el-button type="primary" style="float: right;" icon="el-icon-plus" @click="handleAdd">新增</el-button>
     </el-form>
 
-    <!-- 操作按钮区域 -->
-    <el-row :gutter="10" class="mb12">
-      <el-col :span="1.5">
-        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
-      </el-col>
-    </el-row>
 
     <!-- 表格区域 -->
     <el-table v-loading="loading" :data="standardList" border>
@@ -96,7 +92,7 @@
         <el-descriptions-item label="收费模式">
           {{ detailForm.chargeMode === '1' ? '周期性费用' : '一次性费用' }}
         </el-descriptions-item>
-        <el-descriptions-item label="费用类型">{{ detailForm.feeTypeName }}</el-descriptions-item>
+        <el-descriptions-item label="费用类型">{{ detailForm.feTpName }}</el-descriptions-item>
         <el-descriptions-item label="标准生效时间">{{ detailForm.effectiveDate }}</el-descriptions-item>
         <el-descriptions-item label="标准失效时间">{{ detailForm.expiryDate }}</el-descriptions-item>
         <el-descriptions-item label="单价">{{ detailForm.price }}</el-descriptions-item>
@@ -110,14 +106,9 @@
           {{ detailForm.dayPriceConversionRule === '1' ? '按自然月换算' : '按年换算' }}
         </el-descriptions-item>
         <el-descriptions-item label="计算单价保留小数点">{{ detailForm.decimalPrecisionPrice }}</el-descriptions-item>
-        <el-descriptions-item label="计算精度">{{ detailForm.calculationPrecision }}</el-descriptions-item>
-        <el-descriptions-item label="计算精度方式">
-          {{ detailForm.calculationPrecisionMethod === '1' ? '每步计算结果按计算精度保留' : '最终计算结果按照计算精度保留' }}
-        </el-descriptions-item>
+
         <el-descriptions-item label="应收金额精度">{{ detailForm.receivableAmountPrecision }}</el-descriptions-item>
-        <el-descriptions-item label="计算顺序">
-          {{ detailForm.calculationOrder === '1' ? '单价*面积*时间' : '单价*时间*面积' }}
-        </el-descriptions-item>
+
 
         <el-descriptions-item v-if="detailForm.chargeMode === '1'" label="付款时间规则">
           {{ formatPaymentTimeRule(detailForm) }}
@@ -135,14 +126,14 @@
           {{ formatBillDivisionMethod(detailForm.billDivisionMethod) }}
         </el-descriptions-item>
 
-        <el-descriptions-item v-if="detailForm.lateFeeStartDays" label="滞纳金起算天数">
-          {{ detailForm.lateFeeStartDays }}
+        <el-descriptions-item v-if="detailForm.ovdueStartDays" label="滞纳金起算天数">
+          {{ detailForm.ovdueStartDays }}
         </el-descriptions-item>
-        <el-descriptions-item v-if="detailForm.ovdueFeeRate" label="滞纳金收取比例">
-          {{ formatPercentage(detailForm.ovdueFeeRate) }}
+        <el-descriptions-item v-if="detailForm.ovdueIntRate" label="滞纳金收取比例">
+          {{ formatPercentage(detailForm.ovdueIntRate) }}
         </el-descriptions-item>
-        <el-descriptions-item v-if="detailForm.lateFeeUpperLimit" label="滞纳金收取上限">
-          {{ formatPercentage(detailForm.lateFeeUpperLimit) }}
+        <el-descriptions-item v-if="detailForm.ovdueLimitRate" label="滞纳金收取上限">
+          {{ formatPercentage(detailForm.ovdueLimitRate) }}
         </el-descriptions-item>
         <el-descriptions-item label="状态">
           <el-tag :type="getStatusType(detailForm.status)">{{ getStatusName(detailForm.status) }}</el-tag>
@@ -196,7 +187,7 @@
 
         </el-row>
         <el-row :gutter="20">
-          
+
           <el-col :span="12">
             <el-form-item label="费用类型" prop="feeTypeId">
               <el-cascader v-model="form.feeTypeId" :options="feeTypeOptions" :props="{
@@ -224,7 +215,7 @@
             </el-form-item>
           </el-col>
         </el-row>
-        
+
         <el-row :gutter="20" v-if="form.accountId">
           <el-col :span="12">
             <el-form-item label="收款公司">
@@ -285,6 +276,21 @@
               </el-input>
             </el-form-item>
           </el-col>
+          <el-col :span="12">
+            <el-form-item label="币种" prop="currCode" required>
+              <el-select v-model="form.currCode" style="width: 240px" disabled>
+                <el-option label="人民币" value="156" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <!-- 天单价换算规则（条件渲染） -->
+          <el-col :span="12" v-if="showDayPriceRule">
+            <el-form-item label="天单价换算规则" prop="dayPriceConversionRule">
+              <el-select v-model="form.dayPriceConversionRule" placeholder="请选择天单价换算规则" style="width: 240px">
+                <el-option label="按年换算" value="2" />
+              </el-select>
+            </el-form-item>
+          </el-col>
         </el-row>
         <el-row :gutter="20">
           <el-col :span="12">
@@ -295,42 +301,23 @@
               </el-select>
             </el-form-item>
           </el-col>
-          <!-- 天单价换算规则（条件渲染） -->
-          <el-col :span="12" v-if="showDayPriceRule">
-            <el-form-item label="天单价换算规则" prop="dayPriceConversionRule">
-              <el-select v-model="form.dayPriceConversionRule" placeholder="请选择天单价换算规则" style="width: 240px">
-                <el-option label="按自然月换算" value="1" />
-                <el-option label="按年换算" value="2" />
-              </el-select>
+          <el-col :span="12">
+            <el-form-item label="税率" prop="taxRate">
+              <el-input-number v-model="form.taxRate" :min="0" :max="100" :precision="2" :step="0.01"
+                style="width: 240px" class="text-left" />
+              <span class="percentage-text">%</span>
             </el-form-item>
           </el-col>
 
 
 
+
           <el-col :span="12">
             <el-form-item label="计算单价保留小数点" prop="decimalPrecisionPrice">
               <el-input-number v-model="form.decimalPrecisionPrice" :min="0" :max="10" :precision="0"
                 style="width: 240px" class="text-left" />
             </el-form-item>
           </el-col>
-          <el-col :span="12">
-            <el-form-item label="计算精度" prop="calculationPrecision">
-              <el-select v-model="form.calculationPrecision" placeholder="请选择计算精度" style="width: 240px">
-                <el-option label="0" :value="0" />
-                <el-option label="1" :value="1" />
-                <el-option label="2" :value="2" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-
-          <el-col :span="12">
-            <el-form-item label="计算精度方式" prop="calculationPrecisionMethod">
-              <el-select v-model="form.calculationPrecisionMethod" placeholder="请选择计算精度方式" style="width: 240px">
-                <el-option label="每步计算结果按计算精度保留" value="1" />
-                <el-option label="最终计算结果按照计算精度保留" value="2" />
-              </el-select>
-            </el-form-item>
-          </el-col>
           <el-col :span="12">
             <el-form-item label="应收金额精度" prop="receivableAmountPrecision">
               <el-select v-model="form.receivableAmountPrecision" placeholder="请选择应收金额精度" style="width: 240px">
@@ -341,14 +328,7 @@
             </el-form-item>
           </el-col>
 
-          <el-col :span="12">
-            <el-form-item label="计算顺序" prop="calculationOrder">
-              <el-select v-model="form.calculationOrder" placeholder="请选择计算顺序" style="width: 240px">
-                <el-option label="单价*面积*时间" value="1" />
-                <el-option label="单价*时间*面积" value="2" />
-              </el-select>
-            </el-form-item>
-          </el-col>
+
         </el-row>
 
         <!-- 周期性费用特有字段 -->
@@ -363,7 +343,6 @@
                     <el-option label="按结束延后" value="2" />
                     <el-option label="按开始提前" value="3" />
                     <el-option label="按结束提前" value="4" />
-                    <el-option label="指定日期" value="5" />
                   </el-select>
                   <el-input v-model="form.delayPaymDaynum" placeholder="请输入" style="width: 80px"
                     v-if="form.paymentTimeRuleType !== '5'" />
@@ -418,21 +397,21 @@
         <el-divider content-position="left">滞纳金设置</el-divider>
         <el-row :gutter="20">
           <el-col :span="12">
-            <el-form-item label="起算天数" prop="lateFeeStartDays">
-              <el-input-number v-model="form.lateFeeStartDays" :min="0" :precision="0" style="width: 240px"
+            <el-form-item label="起算天数" prop="ovdueStartDays">
+              <el-input-number v-model="form.ovdueStartDays" :min="0" :precision="0" style="width: 240px"
                 class="text-left" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="滞纳金收取比例" prop="ovdueFeeRate">
-              <el-input-number v-model="form.ovdueFeeRate" :min="0" :max="1" :precision="4" :step="0.001"
+            <el-form-item label="滞纳金收取比例" prop="ovdueIntRate">
+              <el-input-number v-model="form.ovdueIntRate" :min="0" :max="1" :precision="4" :step="0.001"
                 style="width: 240px" class="text-left" />
               <span class="percentage-text">%</span>
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="滞纳金收取上限" prop="lateFeeUpperLimit">
-              <el-input-number v-model="form.lateFeeUpperLimit" :min="0" :max="1" :precision="2" :step="0.01"
+            <el-form-item label="滞纳金收取上限" prop="ovdueLimitRate">
+              <el-input-number v-model="form.ovdueLimitRate" :min="0" :max="1" :precision="2" :step="0.01"
                 style="width: 240px" class="text-left" />
               <span class="percentage-text">%</span>
             </el-form-item>
@@ -446,6 +425,451 @@
       </div>
     </el-dialog>
 
+    <!-- 绑定数据源对话框 -->
+    <el-dialog title="绑定数据源列表" :visible.sync="bindDataOpen" width="1000px" append-to-body>
+      <div class="bind-data-header">
+        <el-descriptions :column="3" border>
+          <el-descriptions-item label="标准名称">{{ bindDataForm.standardName }}</el-descriptions-item>
+          <el-descriptions-item label="标准生效时间">{{ bindDataForm.effectiveDate }}</el-descriptions-item>
+          <el-descriptions-item label="单价">{{ bindDataForm.price }}</el-descriptions-item>
+          <el-descriptions-item label="单价单位">
+            {{ formatPriceUnit(bindDataForm.priceU, bindDataForm.chargeMode) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="状态">
+            <el-tag :type="getStatusType(bindDataForm.status)">{{ getStatusName(bindDataForm.status) }}</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="绑定对象">
+            {{ bindDataForm.bindingObjectType === '1' ? '房间' : '车位' }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+
+      <!-- 搜索区域 -->
+      <el-form :model="bindDataForm" ref="bindDataQueryForm" :inline="true" class="search-form">
+        <el-form-item label="费用类型" prop="feeTypeId">
+          <el-cascader v-model="bindDataForm.feeTypeId" :options="feeTypeOptions" :props="{
+            label: 'label',
+            value: 'id',
+            children: 'children',
+            expandTrigger: 'hover',
+            emitPath: false
+          }" clearable filterable placeholder="请选择费用类型" style="width: 240px">
+          </el-cascader>
+        </el-form-item>
+        <el-form-item label="项目" prop="projectId">
+          <el-select v-model="bindDataForm.projectId" placeholder="请选择项目" clearable style="width: 240px">
+            <el-option v-for="item in projectOptions" :key="item.projectId" :label="item.projectName"
+              :value="item.projectId" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="账单划分方式" prop="billDivisionMethod">
+          <el-select v-model="bindDataForm.billDivisionMethod" placeholder="请选择账单划分方式" clearable style="width: 240px">
+            <el-option label="按起始日划分" value="1" />
+            <el-option label="按自然月划分(首月非整月划入第一期)" value="2" />
+            <el-option label="按自然月划分(首月非整月算一个月)" value="3" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时间范围" prop="dateRange">
+          <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
+            end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="handleDateRangeChange" style="width: 240px">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="房间ID" prop="roomId">
+          <el-input v-model="bindDataForm.roomId" placeholder="请输入房间ID" clearable style="width: 240px" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" @click="getBindDataList">搜索</el-button>
+          <el-button icon="el-icon-refresh" @click="resetBindDataQuery">重置</el-button>
+        </el-form-item>
+        <el-button type="primary" style="float: right;" icon="el-icon-plus" @click="openGenerateBillDialog"
+          :disabled="bindDataForm.status !== '1'">生成账单+</el-button>
+      </el-form>
+
+      <!-- 表格区域 -->
+      <el-table v-loading="bindDataLoading" :data="bindDataList" border>
+        <el-table-column label="费用类型" prop="feTpName" min-width="120" show-overflow-tooltip></el-table-column>
+        <el-table-column label="账单开始日期" prop="chggBgnDt" width="120" align="center"></el-table-column>
+        <el-table-column label="账单结束日期" prop="chggEndDt" width="120" align="center"></el-table-column>
+        <el-table-column label="计费类型" prop="billingType" width="120" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.billingType === '1' ? '按月计费' : '按实际天数计费' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="单价" width="150" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.price }} {{ formatPriceUnit(scope.row.priceU, '1') }}
+          </template>
+        </el-table-column>
+        <el-table-column label="拆分周期" prop="remitCycleVal" width="100" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.remitCycleVal }}个月
+          </template>
+        </el-table-column>
+        <el-table-column label="付款时间规则" min-width="160" show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{ formatPaymentTimeRule(scope.row) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="绑定项目" prop="projectName" min-width="150" show-overflow-tooltip></el-table-column>
+        <el-table-column label="操作" width="150" align="center">
+          <template slot-scope="scope">
+            <el-button size="mini" type="text" icon="el-icon-view"
+              @click="handleViewBindRooms(scope.row)">查询绑定房间</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页区域 -->
+      <div class="pagination-container" v-show="bindDataTotal > 0">
+        <el-pagination background @size-change="handleBindDataSizeChange" @current-change="handleBindDataCurrentChange"
+          :current-page="bindDataQueryParams.pageNum" :page-sizes="[10, 20, 30, 50]"
+          :page-size="bindDataQueryParams.pageSize" layout="total, sizes, prev, pager, next, jumper"
+          :total="bindDataTotal">
+        </el-pagination>
+      </div>
+    </el-dialog>
+
+    <!-- 生成账单对话框 -->
+    <el-dialog title="生成账单" :visible.sync="generateBillOpen" width="1000px" append-to-body>
+      <!-- 收费标准信息 -->
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>收费标准信息</span>
+        </div>
+        <el-descriptions :column="3" border>
+          <el-descriptions-item label="收费标准名称">{{ billForm.standardName }}</el-descriptions-item>
+          <el-descriptions-item label="标准生效日期">{{ billForm.effectiveDate }}</el-descriptions-item>
+          <el-descriptions-item label="标准失效日期">{{ billForm.expiryDate }}</el-descriptions-item>
+          <el-descriptions-item label="状态">
+            <el-tag :type="getStatusType(billForm.status)">{{ getStatusName(billForm.status) }}</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="绑定对象">
+            {{ billForm.bindingObjectType === '1' ? '房间' : '车位' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="项目名称">{{ billForm.projectName }}</el-descriptions-item>
+          <el-descriptions-item label="收费公司">{{ billForm.companyName }}</el-descriptions-item>
+          <el-descriptions-item label="收支账户">{{ billForm.accountName }}</el-descriptions-item>
+          <el-descriptions-item label="收费模式">
+            {{ billForm.chargeMode === '1' ? '周期性费用' : '一次性费用' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="滞纳金起算天数">{{ billForm.ovdueStartDays }}</el-descriptions-item>
+          <el-descriptions-item label="滞纳金收取比例(每天)">
+            {{ formatPercentage(billForm.ovdueIntRate) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="滞纳金收取上限">
+            {{ formatPercentage(billForm.ovdueLimitRate) }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-card>
+
+      <!-- 生成账单基本信息 -->
+      <el-card class="box-card" style="margin-top: 20px;">
+        <div slot="header" class="clearfix">
+          <span>生成账单基本信息</span>
+        </div>
+        <el-form ref="billForm" :model="billForm" label-width="140px">
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="计算单价保留小数点">
+                <el-input-number v-model="billForm.decimalPrecisionPrice" :min="0" :max="10" :precision="0"
+                  style="width: 100%" @change="handleFormFieldChange" />
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="12">
+              <el-form-item label="应收金额精度">
+                <el-select v-model="billForm.receivableAmountPrecision" style="width: 100%"
+                  @change="handleFormFieldChange">
+                  <el-option label="0" :value="0" />
+                  <el-option label="1" :value="1" />
+                  <el-option label="2" :value="2" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="单价">
+                <el-input v-model="billForm.price" style="width: 100%" @input="handleFormFieldChange">
+                  <el-select slot="append" v-model="billForm.priceU" style="width: 120px"
+                    @change="handleFormFieldChange">
+                    <el-option v-for="item in priceUnitOptions" :key="item.value" :label="item.label"
+                      :value="item.value">
+                    </el-option>
+                  </el-select>
+                </el-input>
+              </el-form-item>
+            </el-col>
+
+
+            <el-col :span="12">
+              <el-form-item label="币种"  required>
+                <el-select v-model="billForm.currCode" style="width: 100%" disabled>
+                  <el-option label="人民币" value="156" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+
+
+            <el-col :span="12" v-if="showBillDayPriceRule">
+              <el-form-item label="天单价换算规则">
+                <el-select v-model="billForm.dayPriceConversionRule" style="width: 100%"
+                  @change="handleFormFieldChange">
+                  <el-option label="按年换算" value="2" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="含税规则">
+                <el-select v-model="billForm.taxInclusiveRule" style="width: 100%" @change="handleFormFieldChange">
+                  <el-option label="含税" value="1" />
+                  <el-option label="不含税" value="2" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="税率" prop="taxRate">
+                <el-input-number v-model="billForm.taxRate" :min="0" :max="100" :precision="2" :step="0.01"
+                  style="width: 240px" class="text-left" />
+                <span class="percentage-text">%</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12"></el-col>
+          </el-row>
+
+          <!-- 一次性费用特有字段 -->
+          <template v-if="billForm.chargeMode === '2'">
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="缴费时间(单次)">
+                  <el-date-picker v-model="billForm.paymentDate" type="date" placeholder="选择日期"
+                    value-format="yyyy-MM-dd" style="width: 100%" @change="handleFormFieldChange">
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="数量">
+                  <el-input-number v-model="billForm.quantity" :min="1" :precision="0" style="width: 100%"
+                    @change="handleFormFieldChange" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </template>
+
+          <!-- 周期性费用特有字段 -->
+          <template v-else>
+            <el-row :gutter="20">
+              <el-col :span="24">
+                <el-form-item label="缴费时间(周期)">
+                  <el-date-picker v-model="dateRangeValue" type="daterange" range-separator="至" start-placeholder="开始日期"
+                    end-placeholder="结束日期" value-format="yyyy-MM-dd" style="width: 100%"
+                    @change="handleDateRangeChange">
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </template>
+
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="费用类型">
+                <el-cascader v-model="billForm.feeTypeId" :options="feeTypeOptions" :props="{
+                  label: 'label',
+                  value: 'id',
+                  children: 'children',
+                  expandTrigger: 'hover',
+                  emitPath: false
+                }" clearable filterable placeholder="请选择费用类型" style="width: 100%" @change="handleFormFieldChange">
+                </el-cascader>
+              </el-form-item>
+            </el-col>
+
+            <!-- 周期性费用特有字段 -->
+            <template v-if="billForm.chargeMode === '1'">
+              <el-col :span="12">
+                <el-form-item label="付款时间规则" class="payment-rule">
+                  <div class="payment-rule-container">
+                    <el-select v-model="billForm.paymentTimeRuleType" placeholder="按开始延后" style="width: 120px"
+                      @change="handleFormFieldChange">
+                      <el-option label="按开始延后" value="1" />
+                      <el-option label="按结束延后" value="2" />
+                      <el-option label="按开始提前" value="3" />
+                      <el-option label="按结束提前" value="4" />
+                    </el-select>
+                    <el-input v-model="billForm.delayPaymDaynum" placeholder="请输入" style="width: 80px"
+                      v-if="billForm.paymentTimeRuleType !== '5'" @input="handleFormFieldChange" />
+                    <el-select v-model="billForm.dateCalculationMethod" placeholder="自然日" style="width: 100px"
+                      v-if="billForm.paymentTimeRuleType !== '5'" @change="handleFormFieldChange">
+                      <el-option label="自然日" value="1" />
+                      <el-option label="工作日" value="2" disabled />
+                    </el-select>
+                  </div>
+                </el-form-item>
+              </el-col>
+            </template>
+          </el-row>
+
+          <!-- 周期性费用特有字段 -->
+          <template v-if="billForm.chargeMode === '1'">
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="计费类型">
+                  <el-select v-model="billForm.billingType" style="width: 100%" @change="handleFormFieldChange">
+                    <el-option label="按月计费" value="1" />
+                    <el-option label="按实际天数计费" value="2" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="年天数">
+                  <el-input-number v-model="billForm.chrgingUnitVal" :min="1" :precision="0" style="width: 100%"
+                    @change="handleFormFieldChange" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="付款周期">
+                  <el-input-number v-model="billForm.remitCycleVal" :min="1" :precision="0" style="width: 100%"
+                    @change="handleFormFieldChange" />
+                  <span class="unit-label">个月一付</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="账单划分方式">
+                  <el-select v-model="billForm.billDivisionMethod" style="width: 100%" @change="handleFormFieldChange">
+                    <el-option label="按起始日划分" value="1" />
+                    <el-option label="按自然月划分（首月非整自然月划入第一期）" value="2" />
+                    <el-option label="按自然月划分（首月非整自然月算一个月）" value="3" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </template>
+
+          <el-row :gutter="20">
+            <el-col :span="24">
+              <el-form-item label="账单备注">
+                <el-input v-model="billForm.billRemark" placeholder="请输入账单备注" style="width: 100%"
+                  @input="handleFormFieldChange" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </el-card>
+
+      <!-- 房源选择 -->
+      <el-card class="box-card" style="margin-top: 20px;">
+        <div slot="header" class="clearfix">
+          <span>绑定房源</span>
+        </div>
+        <el-tree ref="roomTree" :data="roomTreeData" show-checkbox node-key="id"
+          :props="{ label: 'label', children: 'children' }" @check="handleRoomTreeCheck">
+        </el-tree>
+      </el-card>
+
+      <!-- 账单预览 -->
+      <el-card class="box-card" style="margin-top: 20px;">
+        <div slot="header" class="clearfix">
+          <span>账单预览</span>
+          <el-button style="float: right; padding: 3px 0" type="text" @click="previewBill">刷新预览</el-button>
+        </div>
+        <div class="bill-preview-container">
+          <el-table v-loading="previewBillLoading" :data="previewBillList" border>
+            <el-table-column label="账单起止时间" width="250">
+              <template slot-scope="scope">
+                {{ scope.row.chggBgnDt }} 至 {{ scope.row.chggEndDt
+                }}
+              </template>
+            </el-table-column>
+            <el-table-column label="应收时间" prop="pybDt" width="150" align="center"></el-table-column>
+            <el-table-column label="实际天数" prop="dayNum" width="100" align="center"></el-table-column>
+            <el-table-column label="费用类型" prop="feTpName" width="150"></el-table-column>
+            <el-table-column label="单价" width="150" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.price }} {{ formatPriceUnit(scope.row.priceU, billForm.chargeMode) }}
+              </template>
+            </el-table-column>
+            <el-table-column label="房源" prop="roomName" width="100">
+              <template slot-scope="scope">
+                {{ scope.row.room.roomNumber }}
+              </template>
+            </el-table-column>
+            <el-table-column label="面积" prop="area" width="80" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.room.rentalArea }}
+              </template>
+
+            </el-table-column>
+            <el-table-column label="应收金额" prop="accigRcvAmt" min-width="150" align="right">
+              <template slot-scope="scope">
+                {{ scope.row.accigRcvAmt.toFixed(2) }} 元
+              </template>
+            </el-table-column>
+          </el-table>
+          <!-- 账单预览统计 -->
+          <div class="bill-summary">
+            <span class="bill-total-label">账单总金额：</span>
+            <span class="bill-total-amount">¥ {{ previewBillTotal.toFixed(2) }}</span>
+          </div>
+        </div>
+      </el-card>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancelGenerateBill">取 消</el-button>
+        <el-button type="primary" @click="submitGenerateBill">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 绑定房间账单对话框 -->
+    <el-dialog title="绑定房间列表" :visible.sync="bindRoomDialogVisible" width="80%" append-to-body>
+      <div v-loading="roomBillsLoading">
+        <div v-for="(bills, roomId) in roomBillsData" :key="roomId" class="room-bills-container">
+          <div class="room-info">
+            <span>房间名称: {{ bills[0].roomNumber }}</span>
+            <span>楼层: {{ bills[0].floorName }}</span>
+            <span>楼栋: {{ bills[0].buildingName }}</span>
+          </div>
+
+          <el-table :data="bills" border style="width: 100%; margin-bottom: 20px">
+            <el-table-column prop="totBillNo" label="账单编号" min-width="180" show-overflow-tooltip />
+            <el-table-column label="开始时间" min-width="110" align="center">
+              <template slot-scope="scope">
+                {{ formatDateTime(scope.row.chggBgnDt) }}
+              </template>
+            </el-table-column>
+            <el-table-column label="结束时间" min-width="110" align="center">
+              <template slot-scope="scope">
+                {{ formatDateTime(scope.row.chggEndDt) }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="price" label="账单金额" min-width="80" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.price.toFixed(2) }} 元
+              </template>
+            </el-table-column>
+
+            <el-table-column label="清算状态" min-width="100" align="center">
+              <template slot-scope="scope">
+                <el-tag :type="getClearStatusType(scope.row.clearStatus)">
+                  {{ getClearStatusName(scope.row.clearStatus) }}
+                </el-tag>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+
+        <div v-if="Object.keys(roomBillsData).length === 0" class="empty-data">
+          <el-empty description="暂无绑定房间账单数据"></el-empty>
+        </div>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -457,7 +881,11 @@ import {
   updateChargingStandardStatus,
   addChargingStandard,
   checkChargingStandardName,
-  getFeeTypeTree
+  getFeeTypeTree,
+  previewBill,
+  generateBill,
+  getBillChargingStandardRelPage,
+  getBillsByStandardId
 } from '@/api/finance'
 import { getAllAccounts } from '@/api/building'
 import { API_SUCCESS_CODE } from '@/utils/constants'
@@ -497,14 +925,13 @@ export default {
         effectiveDate: undefined,
         expiryDate: undefined,
         price: undefined,
+        currCode: '156',
         priceU: '1',
         taxInclusiveRule: '1', // 默认含税
-        dayPriceConversionRule: '1', // 默认按自然月换算
+        taxRate: 0,
+        dayPriceConversionRule: '2', // 默认按自然月换算
         decimalPrecisionPrice: 2,
-        calculationPrecision: 2,
-        calculationPrecisionMethod: '1', // 默认每步计算结果按计算精度保留
         receivableAmountPrecision: 2,
-        calculationOrder: '1', // 默认单价*面积*时间
         paymentTimeRuleType: '1', // 默认按开始延后
         delayPaymDaynum: 0,
         dateCalculationMethod: '1', // 默认自然日
@@ -512,9 +939,9 @@ export default {
         chrgingUnitVal: 365, // 默认年天数
         remitCycleVal: 1, // 默认1个月一付
         billDivisionMethod: '1', // 默认按起始日划分
-        lateFeeStartDays: 0,
-        ovdueFeeRate: 0,
-        lateFeeUpperLimit: 0
+        ovdueStartDays: 0,
+        ovdueIntRate: 0,
+        ovdueLimitRate: 0
       },
       // 表单校验规则
       rules: {
@@ -526,6 +953,7 @@ export default {
         effectiveDate: [{ required: true, message: '请选择标准生效时间', trigger: 'change' }],
         expiryDate: [{ required: true, message: '请选择标准失效时间', trigger: 'change' }],
         price: [{ required: true, message: '请输入单价', trigger: 'blur' }],
+        currCode: [{ required: true, message: '请选择币种', trigger: 'blur' }],
         priceU: [{ required: true, message: '请选择单价单位', trigger: 'change' }],
         paymentTimeRuleType: [{ required: true, message: '请选择付款时间计算方式', trigger: 'change' }],
         delayPaymDaynum: [{ required: true, message: '请输入付款天数', trigger: 'blur' }],
@@ -537,13 +965,13 @@ export default {
       },
       // 项目选项
       projectOptions: [
-        { id: 'P001', projectName: '智慧园区示范项目' },
-        { id: 'P002', projectName: '创新园区项目' }
+        { id: 1, projectName: '智慧园区示范项目' },
+        { id: 2, projectName: '创新园区项目' }
       ],
       // 公司选项
       companyOptions: [
-        { id: 'C001', companyName: '智慧园区物业公司' },
-        { id: 'C002', companyName: '创新物业管理有限公司' }
+        { id: 1, companyName: '智慧园区物业公司' },
+        { id: 2, companyName: '创新物业管理有限公司' }
       ],
       // 账户选项
       accountOptions: [],
@@ -556,7 +984,93 @@ export default {
       // 费用类型选项（级联选择器的数据）
       feeTypeOptions: [],
       // 价格单位选项（根据收费模式动态变化）
-      priceUnitOptions: []
+      priceUnitOptions: [],
+      // 绑定数据源对话框
+      bindDataOpen: false,
+      bindDataLoading: false,
+      bindDataList: [],
+      bindDataTotal: 0,
+      bindDataForm: {
+        standardId: null,
+        standardName: '',
+        effectiveDate: '',
+        expiryDate: '',
+        status: '',
+        bindingObjectType: '',
+        // 添加新字段以适配API请求
+        payerId: '',
+        projectId: '',
+        companyId: '',
+        feeTypeId: null,
+        beginDate: '',
+        endDate: '',
+        billDivisionMethod: '',
+        roomId: ''
+      },
+      bindDataQueryParams: {
+        pageNum: 1,
+        pageSize: 10
+      },
+
+      // 生成账单对话框
+      generateBillOpen: false,
+      billForm: {
+        standardId: '',
+        standardName: '',
+        effectiveDate: '',
+        expiryDate: '',
+        status: '',
+        bindingObjectType: '',
+        projectId: '',
+        projectName: '',
+        companyId: '',
+        companyName: '',
+        accountId: '',
+        accountName: '',
+        chargeMode: '',
+        ovdueStartDays: '',
+        ovdueIntRate: '',
+        ovdueLimitRate: '',
+        decimalPrecisionPrice: '',
+        receivableAmountPrecision: '',
+        price: '',
+        currCode: '156',
+        priceU: '',
+        taxInclusiveRule: '',
+        taxRate: '',
+        paymentDate: '',
+        quantity: '',
+        startDate: '',
+        endDate: '',
+        dateRange: [this.getCurrentDate(), this.calculateEndDate(this.getCurrentDate(), 1)],
+        chggBgnDt: this.getCurrentDate(), // 设置为当前日期
+        chggEndDt: this.calculateEndDate(this.getCurrentDate(), 1), // 设置为当前日期加一年
+        feeTypeId: '',
+        paymentTimeRuleType: '',
+        delayPaymDaynum: '',
+        dateCalculationMethod: '',
+        billingType: '',
+        chrgingUnitVal: '',
+        remitCycleVal: '',
+        billDivisionMethod: '',
+        billRemark: '',
+        roomIds: []
+      },
+      // 表单原始值，用于检测变更
+      originalBillForm: {},
+      roomTreeData: [],
+      previewBillList: [],
+      previewBillTotal: 0,
+      previewBillLoading: false,
+      // 记录用户是否修改过表单
+      formChanged: false,
+      dateRangeValue: [],
+      dateRange: [],
+      // 添加账单列表相关数据
+      bindRoomDialogVisible: false,
+      roomBillsLoading: false,
+      roomBillsData: {},
+      viewRoomData: null,
     }
   },
   created() {
@@ -573,6 +1087,38 @@ export default {
     showDayPriceRule() {
       if (this.form.chargeMode !== '1') return false
       return ['3', '4', '7', '8'].includes(this.form.priceU)
+    },
+    // 是否显示账单中的天单价换算规则
+    showBillDayPriceRule() {
+      if (this.billForm.chargeMode !== '1') return false
+      return ['3', '4', '7', '8'].includes(this.billForm.priceU)
+    },
+    // 处理日期范围值
+    dateRangeValue: {
+      get() {
+        // 如果两个日期都有值，返回数组
+        if (this.billForm.chggBgnDt && this.billForm.chggEndDt) {
+          return [this.billForm.chggBgnDt, this.billForm.chggEndDt]
+        }
+        return []
+      },
+      set(val) {
+        if (val && val.length === 2) {
+          this.billForm.chggBgnDt = val[0]
+          this.billForm.chggEndDt = val[1]
+          this.billForm.startDate = val[0]
+          this.billForm.endDate = val[1]
+        } else {
+          this.billForm.chggBgnDt = ''
+          this.billForm.chggEndDt = ''
+          this.billForm.startDate = ''
+          this.billForm.endDate = ''
+        }
+        // 标记表单已修改
+        this.formChanged = true
+        // 清空预览数据
+        this.clearPreviewData()
+      }
     }
   },
   methods: {
@@ -707,14 +1253,13 @@ export default {
         effectiveDate: undefined,
         expiryDate: undefined,
         price: undefined,
+        currCode: '156',
         priceU: '1',
         taxInclusiveRule: '1', // 默认含税
-        dayPriceConversionRule: '1', // 默认按自然月换算
+        taxRate: 0,
+        dayPriceConversionRule: '2', // 默认按自然月换算
         decimalPrecisionPrice: 2,
-        calculationPrecision: 2,
-        calculationPrecisionMethod: '1', // 默认每步计算结果按计算精度保留
         receivableAmountPrecision: 2,
-        calculationOrder: '1', // 默认单价*面积*时间
         paymentTimeRuleType: '1', // 默认按开始延后
         delayPaymDaynum: 0,
         dateCalculationMethod: '1', // 默认自然日
@@ -722,9 +1267,9 @@ export default {
         chrgingUnitVal: 365, // 默认年天数
         remitCycleVal: 1, // 默认1个月一付
         billDivisionMethod: '1', // 默认按起始日划分
-        lateFeeStartDays: 0,
-        ovdueFeeRate: 0,
-        lateFeeUpperLimit: 0
+        ovdueStartDays: 0,
+        ovdueIntRate: 0,
+        ovdueLimitRate: 0
       }
       // 重置选中的账户信息
       this.selectedAccount = {
@@ -759,7 +1304,7 @@ export default {
         // 一次性费用
         this.priceUnitOptions = [
           { value: '1', label: '元' },
-          { value: '2', label: '元/㎡' }
+          { value: '5', label: '元/㎡' }
         ]
       }
       // 清空已选择的单价单位
@@ -802,8 +1347,8 @@ export default {
         // 转换数字类型的字段
         const formData = { ...this.form }
         const numericFields = [
-          'decimalPrecisionPrice', 'calculationPrecision', 'receivableAmountPrecision',
-          'delayPaymDaynum', 'chrgingUnitVal', 'remitCycleVal', 'lateFeeStartDays'
+          'decimalPrecisionPrice', 'receivableAmountPrecision',
+          'delayPaymDaynum', 'chrgingUnitVal', 'remitCycleVal', 'ovdueStartDays'
         ]
 
         numericFields.forEach(field => {
@@ -846,10 +1391,702 @@ export default {
     },
     /** 绑定数据源按钮操作 */
     handleBindData(row) {
-      this.$router.push({
-        path: '/finance/chargeStandard/bindData',
-        query: { id: row.id }
+      this.openBindDataDialog(row)
+    },
+
+    /** 打开绑定数据源弹窗 */
+    openBindDataDialog(row) {
+      this.bindDataOpen = true
+      this.bindDataForm.standardId = row.id
+      this.bindDataForm.standardName = row.standardName
+      this.bindDataForm.effectiveDate = row.effectiveDate
+      this.bindDataForm.expiryDate = row.expiryDate
+      this.bindDataForm.price = row.price
+      this.bindDataForm.priceU = row.priceU
+      this.bindDataForm.status = row.status
+      this.bindDataForm.bindingObjectType = row.bindingObjectType
+      this.getBindDataList()
+    },
+
+    /** 获取绑定数据源列表 */
+    getBindDataList() {
+      this.bindDataLoading = true
+      // 构建完整查询参数
+      const queryParams = {
+        standardId: this.bindDataForm.standardId,
+        payerId: this.bindDataForm.payerId || undefined,
+        projectId: this.bindDataForm.projectId || undefined,
+        companyId: this.bindDataForm.companyId || undefined,
+        feeTypeId: this.bindDataForm.feeTypeId || undefined,
+        beginDate: this.bindDataForm.beginDate || undefined,
+        endDate: this.bindDataForm.endDate || undefined,
+        billDivisionMethod: this.bindDataForm.billDivisionMethod || undefined,
+        roomId: this.bindDataForm.roomId || undefined,
+        pageNum: this.bindDataQueryParams.pageNum,
+        pageSize: this.bindDataQueryParams.pageSize
+      }
+
+      // 移除空值参数
+      Object.keys(queryParams).forEach(key => {
+        if (queryParams[key] === undefined || queryParams[key] === null || queryParams[key] === '') {
+          delete queryParams[key]
+        }
       })
+
+      getBillChargingStandardRelPage(queryParams).then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          this.bindDataList = response.data.list
+          this.bindDataTotal = response.data.total
+        } else {
+          this.$message.error('获取绑定数据列表失败')
+        }
+        this.bindDataLoading = false
+      }).catch(() => {
+        this.bindDataLoading = false
+      })
+    },
+
+    /** 查询绑定房间 */
+    handleViewBindRooms(row) {
+      this.viewRoomData = row
+      this.roomBillsLoading = true
+      this.bindRoomDialogVisible = true
+
+      // 调用API查询绑定房间账单
+      getBillsByStandardId(row.id).then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          this.roomBillsData = response.data
+          this.roomBillsLoading = false
+        } else {
+          this.$message.error('查询绑定房间账单失败')
+          this.roomBillsLoading = false
+        }
+      }).catch(() => {
+        this.$message.error('查询绑定房间账单失败')
+        this.roomBillsLoading = false
+      })
+    },
+
+    /** 打开生成账单弹窗 */
+    openGenerateBillDialog() {
+      if (this.bindDataForm.status !== '1') {
+        return this.$message.warning('只有生效中的收费标准才能生成账单')
+      }
+
+      // 清空预览数据
+      this.previewBillList = []
+      this.previewBillTotal = 0
+      this.formChanged = false
+
+      this.generateBillOpen = true
+
+      // 根据收费标准ID获取详细信息
+      getChargingStandardById(this.bindDataForm.standardId).then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          const standardData = response.data
+
+          // 设置基本信息
+          this.billForm = {
+            standardId: standardData.id,
+            standardName: standardData.standardName,
+            effectiveDate: standardData.effectiveDate,
+            expiryDate: standardData.expiryDate,
+            status: standardData.status,
+            bindingObjectType: standardData.bindingObjectType,
+            projectId: '',
+            projectName: standardData.projectName,
+            companyId: standardData.companyId,
+            companyName: standardData.companyName,
+            accountId: standardData.accountId,
+            accountName: standardData.accountName,
+            chargeMode: standardData.chargeMode,
+            ovdueStartDays: standardData.ovdueStartDays,
+            ovdueIntRate: standardData.ovdueIntRate,
+            ovdueLimitRate: standardData.ovdueLimitRate,
+
+            // 可修改的字段
+            decimalPrecisionPrice: standardData.decimalPrecisionPrice,
+            receivableAmountPrecision: standardData.receivableAmountPrecision,
+            price: standardData.price,
+            priceU: standardData.priceU,
+            currCode:'156',
+            taxInclusiveRule: standardData.taxInclusiveRule,
+            taxRate: standardData.taxRate,
+            dayPriceConversionRule: standardData.dayPriceConversionRule, // 添加天单价换算规则字段
+
+            // 一次性费用字段
+            paymentDate: standardData.effectiveDate,
+            quantity: 1,
+
+            // 周期性费用字段
+            startDate: standardData.effectiveDate,
+            endDate: this.calculateEndDate(standardData.effectiveDate, 1), // 默认一年
+            dateRange: [this.getCurrentDate(), this.calculateEndDate(this.getCurrentDate(), 1)],
+            chggBgnDt: this.getCurrentDate(), // 设置为当前日期
+            chggEndDt: this.calculateEndDate(this.getCurrentDate(), 1), // 设置为当前日期加一年
+            feeTypeId: standardData.feeTypeId,
+            paymentTimeRuleType: standardData.paymentTimeRuleType,
+            delayPaymDaynum: standardData.delayPaymDaynum,
+            dateCalculationMethod: standardData.dateCalculationMethod,
+            billingType: standardData.billingType,
+            chrgingUnitVal: standardData.chrgingUnitVal,
+            remitCycleVal: standardData.remitCycleVal,
+            billDivisionMethod: standardData.billDivisionMethod,
+
+            billRemark: '',
+            roomIds: []
+          }
+
+          // 保存表单初始值，用于检测变更
+          this.originalBillForm = JSON.parse(JSON.stringify(this.billForm))
+
+          // 设置日期范围值，使UI显示正确的日期
+          this.dateRangeValue = [this.getCurrentDate(), this.calculateEndDate(this.getCurrentDate(), 1)]
+
+          // 获取房源列表
+          this.getRoomTreeData()
+        } else {
+          this.$message.error('获取收费标准信息失败')
+        }
+      })
+    },
+
+    /** 计算结束日期 */
+    calculateEndDate(startDate, yearCount) {
+      if (!startDate) return ''
+      const date = new Date(startDate)
+      date.setFullYear(date.getFullYear() + yearCount)
+      date.setDate(date.getDate() - 1) // 减一天，例如从2023-01-01到2023-12-31
+
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+
+      return `${year}-${month}-${day}`
+    },
+
+    /** 获取房源树形数据 */
+    getRoomTreeData() {
+      // 使用静态数据
+      // 模拟房源数据
+      const roomData = [
+        {
+          "id": "3",
+          "projectName": "智慧产业园",
+          "projectType": "产业园区",
+          "buildings": []
+        },
+        {
+          "id": "2",
+          "projectName": "智慧产业园-修改",
+          "projectType": "产业园区",
+          "buildings": [
+            {
+              "id": 1,
+              "buildingName": "1号智能办公楼-测试",
+              "buildingCode": "B01",
+              "floors": [
+                {
+                  "id": 3,
+                  "floorName": "2层-1",
+                  "floorNumber": 2,
+                  "rooms": [
+                    {
+                      "id": 24,
+                      "roomNumber": "441",
+                      "roomType": "2",
+                      "roomStatus": "1",
+                      "buildingArea": 123.00,
+                      "rentalArea": 2231.00
+                    },
+                    {
+                      "id": 22,
+                      "roomNumber": "1302",
+                      "roomType": "4",
+                      "roomStatus": "1",
+                      "buildingArea": 113.00,
+                      "rentalArea": 112.00
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "id": "4",
+          "projectName": "智慧产业园-9",
+          "projectType": "产业园区",
+          "buildings": [
+            {
+              "id": 14,
+              "buildingName": "3331",
+              "buildingCode": "23",
+              "floors": []
+            }
+          ]
+        },
+        {
+          "id": "5",
+          "projectName": "测试",
+          "projectType": "产业园区",
+          "buildings": [
+            {
+              "id": 3,
+              "buildingName": "1号楼",
+              "buildingCode": "B01",
+              "floors": []
+            },
+            {
+              "id": 4,
+              "buildingName": "2号楼",
+              "buildingCode": "B02",
+              "floors": [
+                {
+                  "id": 4,
+                  "floorName": "2层-1",
+                  "floorNumber": 2,
+                  "rooms": [
+                    {
+                      "id": 23,
+                      "roomNumber": "202",
+                      "roomType": "3",
+                      "roomStatus": "2",
+                      "buildingArea": 44111.00,
+                      "rentalArea": 444233.00
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "id": 12,
+              "buildingName": "22",
+              "buildingCode": "22",
+              "floors": []
+            },
+            {
+              "id": 15,
+              "buildingName": "融入1",
+              "buildingCode": "5531",
+              "floors": []
+            }
+          ]
+        },
+        {
+          "id": "8",
+          "projectName": "测试-1",
+          "projectType": "产业园区",
+          "buildings": [
+            {
+              "id": 7,
+              "buildingName": "4121",
+              "buildingCode": "1234",
+              "floors": [
+                {
+                  "id": 7,
+                  "floorName": "123",
+                  "floorNumber": 11,
+                  "rooms": [
+                    {
+                      "id": 31,
+                      "roomNumber": "504",
+                      "roomType": null,
+                      "roomStatus": "1",
+                      "buildingArea": 122.00,
+                      "rentalArea": 20.99
+                    },
+                    {
+                      "id": 30,
+                      "roomNumber": "504",
+                      "roomType": null,
+                      "roomStatus": "1",
+                      "buildingArea": 122.00,
+                      "rentalArea": 20.99
+                    },
+                    {
+                      "id": 32,
+                      "roomNumber": "505",
+                      "roomType": null,
+                      "roomStatus": "1",
+                      "buildingArea": 122.00,
+                      "rentalArea": 20.99
+                    },
+                    {
+                      "id": 33,
+                      "roomNumber": "506",
+                      "roomType": null,
+                      "roomStatus": "1",
+                      "buildingArea": 122.00,
+                      "rentalArea": 20.99
+                    },
+                    {
+                      "id": 34,
+                      "roomNumber": "507",
+                      "roomType": null,
+                      "roomStatus": "1",
+                      "buildingArea": 122.00,
+                      "rentalArea": 20.99
+                    },
+                    {
+                      "id": 35,
+                      "roomNumber": "511",
+                      "roomType": null,
+                      "roomStatus": "1",
+                      "buildingArea": 122.00,
+                      "rentalArea": 20.99
+                    },
+                    {
+                      "id": 36,
+                      "roomNumber": "512",
+                      "roomType": null,
+                      "roomStatus": "1",
+                      "buildingArea": 122.00,
+                      "rentalArea": 20.99
+                    },
+                    {
+                      "id": 37,
+                      "roomNumber": "512",
+                      "roomType": null,
+                      "roomStatus": "1",
+                      "buildingArea": 122.00,
+                      "rentalArea": 20.99
+                    },
+                    {
+                      "id": 20,
+                      "roomNumber": "503",
+                      "roomType": "3",
+                      "roomStatus": "1",
+                      "buildingArea": 92.00,
+                      "rentalArea": 92.00
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "id": 8,
+              "buildingName": "22222",
+              "buildingCode": "22",
+              "floors": []
+            },
+            {
+              "id": 9,
+              "buildingName": "22222",
+              "buildingCode": "22",
+              "floors": []
+            },
+            {
+              "id": 10,
+              "buildingName": "22222",
+              "buildingCode": "22",
+              "floors": []
+            },
+            {
+              "id": 13,
+              "buildingName": "41",
+              "buildingCode": "23",
+              "floors": []
+            }
+          ]
+        },
+        {
+          "id": "10",
+          "projectName": "111",
+          "projectType": "产业园区",
+          "buildings": [
+            {
+              "id": 11,
+              "buildingName": "11",
+              "buildingCode": "114",
+              "floors": []
+            }
+          ]
+        },
+        {
+          "id": "13",
+          "projectName": "智慧产业园",
+          "projectType": "产业园区",
+          "buildings": []
+        },
+        {
+          "id": "14",
+          "projectName": "智慧产业园2",
+          "projectType": "产业园区",
+          "buildings": []
+        }
+      ];
+
+      // 转换为树形结构
+      this.roomTreeData = roomData.map(project => {
+        return {
+          id: project.id,
+          label: project.projectName,
+          children: project.buildings.map(building => {
+            return {
+              id: building.id,
+              label: building.buildingName,
+              children: building.floors.map(floor => {
+                return {
+                  id: floor.id,
+                  label: floor.floorName,
+                  children: floor.rooms.map(room => {
+                    return {
+                      id: room.id,
+                      label: `${room.roomNumber}（${room.rentalArea}㎡）`,
+                      isRoom: true,
+                      // 保存原始数据供选择
+                      roomData: room
+                    }
+                  })
+                }
+              })
+            }
+          })
+        }
+      });
+    },
+
+    /** 处理日期范围选择变更 */
+    handleDateRangeChange(val) {
+      if (val && val.length === 2) {
+        this.billForm.startDate = val[0]
+        this.billForm.endDate = val[1]
+        this.billForm.chggBgnDt = val[0]
+        this.billForm.chggEndDt = val[1]
+      } else {
+        this.billForm.startDate = ''
+        this.billForm.endDate = ''
+        this.billForm.chggBgnDt = ''
+        this.billForm.chggEndDt = ''
+      }
+      // 清空预览数据
+      this.clearPreviewData()
+    },
+
+    /** 处理表单字段变更 */
+    handleFormFieldChange() {
+      // 标记表单已修改
+      this.formChanged = true
+      // 清空预览数据
+      this.clearPreviewData()
+    },
+
+    /** 清空预览数据 */
+    clearPreviewData() {
+      this.previewBillList = []
+      this.previewBillTotal = 0
+    },
+
+    /** 预览账单 */
+    previewBill() {
+      if (!this.billForm.roomIds || this.billForm.roomIds.length === 0) {
+        return this.$message.warning('请选择绑定房源')
+      }
+
+      if (this.billForm.chargeMode === '1' && (!this.billForm.chggBgnDt || !this.billForm.chggEndDt)) {
+        return this.$message.warning('请选择缴费时间范围')
+      }
+
+      if (this.billForm.chargeMode === '2' && !this.billForm.paymentDate) {
+        return this.$message.warning('请选择缴费时间')
+      }
+
+      this.previewBillLoading = true
+
+      // 构建请求参数，包含收费标准的相关字段
+      const params = {
+        // 收费标准基础信息
+        standardId: this.billForm.standardId,
+        standardName: this.billForm.standardName,
+        projectId: this.billForm.projectId,
+        projectName: this.billForm.projectName,
+        companyId: this.billForm.companyId,
+        companyName: this.billForm.companyName,
+        accountId: this.billForm.accountId,
+        accountName: this.billForm.accountName,
+        bindingObjectType: this.billForm.bindingObjectType,
+        chargeMode: this.billForm.chargeMode,
+
+        // 滞纳金信息
+        ovdueStartDays: this.billForm.ovdueStartDays,
+        ovdueIntRate: this.billForm.ovdueIntRate,
+        ovdueLimitRate: this.billForm.ovdueLimitRate,
+
+        // 房间信息 - 直接使用新的树形结构数据
+        roomIds: this.billForm.roomIds,
+
+        // 根据收费模式设置不同的参数
+        ...(this.billForm.chargeMode === '1' ? {
+          chggBgnDt: this.billForm.chggBgnDt,
+          chggEndDt: this.billForm.chggEndDt
+        } : {
+          startDate: this.billForm.paymentDate,
+          endDate: this.billForm.paymentDate,
+          quantity: this.billForm.quantity
+        }),
+
+        // 可修改的计算参数
+        feeTypeId: this.billForm.feeTypeId,
+        calculationOrder: this.billForm.calculationOrder,
+        receivableAmountPrecision: this.billForm.receivableAmountPrecision,
+        taxInclusiveRule: this.billForm.taxInclusiveRule,
+        taxRate: this.billForm.taxRate,
+        decimalPrecisionPrice: this.billForm.decimalPrecisionPrice,
+        price: this.billForm.price,
+        priceU: this.billForm.priceU,
+        billRemark: this.billForm.billRemark
+      }
+
+      // 周期性费用特有参数
+      if (this.billForm.chargeMode === '1') {
+        Object.assign(params, {
+          dayPriceConversionRule: this.billForm.dayPriceConversionRule,
+          billingType: this.billForm.billingType,
+          chrgingUnitVal: this.billForm.chrgingUnitVal,
+          remitCycleVal: this.billForm.remitCycleVal,
+          billDivisionMethod: this.billForm.billDivisionMethod,
+          paymentTimeRuleType: this.billForm.paymentTimeRuleType,
+          delayPaymDaynum: this.billForm.delayPaymDaynum,
+          dateCalculationMethod: this.billForm.dateCalculationMethod
+        })
+      }
+
+      // 调用预览账单API
+      previewBill(params).then(response => {
+        this.previewBillLoading = false
+        if (response.code === API_SUCCESS_CODE) {
+          const billList = response.data
+          this.previewBillTotal = 0
+          this.previewBillList = billList || []
+          this.previewBillList.forEach(item => {
+            this.previewBillTotal += item.accigRcvAmt
+          })
+
+          // 记录表单当前状态
+          this.originalBillForm = JSON.parse(JSON.stringify(this.billForm))
+          this.formChanged = false
+
+          if (this.previewBillList.length === 0) {
+            this.$message.warning('未生成任何账单，请检查参数设置')
+          }
+        } else {
+          this.$message.error(response.message || '预览账单失败')
+        }
+      }).catch(() => {
+        this.previewBillLoading = false
+        this.$message.error('预览账单失败，请稍后重试')
+      })
+    },
+
+    /** 提交生成账单 */
+    submitGenerateBill() {
+      if (!this.previewBillList || this.previewBillList.length === 0) {
+        return this.$message.warning('请先预览账单')
+      }
+
+      // 如果表单有变动，提示用户先预览
+      if (this.formChanged) {
+        return this.$message.warning('表单已修改，请先点击"刷新预览"按钮查看最新账单')
+      }
+
+      this.$confirm('确定要生成这些账单吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const loading = this.$loading({
+          lock: true,
+          text: '生成账单中...',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+
+        // 构建请求参数，包含收费标准的相关字段
+        const params = {
+          // 收费标准基础信息
+          standardId: this.billForm.standardId,
+          standardName: this.billForm.standardName,
+          projectId: this.billForm.projectId,
+          projectName: this.billForm.projectName,
+          companyId: this.billForm.companyId,
+          companyName: this.billForm.companyName,
+          accountId: this.billForm.accountId,
+          accountName: this.billForm.accountName,
+          bindingObjectType: this.billForm.bindingObjectType,
+          chargeMode: this.billForm.chargeMode,
+
+          // 滞纳金信息
+          ovdueStartDays: this.billForm.ovdueStartDays,
+          ovdueIntRate: this.billForm.ovdueIntRate,
+          ovdueLimitRate: this.billForm.ovdueLimitRate,
+
+          // 房间信息 - 直接使用新的树形结构数据
+          roomIds: this.billForm.roomIds,
+
+          // 根据收费模式设置不同的参数
+          ...(this.billForm.chargeMode === '1' ? {
+            chggBgnDt: this.billForm.chggBgnDt,
+            chggEndDt: this.billForm.chggEndDt
+          } : {
+            startDate: this.billForm.paymentDate,
+            endDate: this.billForm.paymentDate,
+            quantity: this.billForm.quantity
+          }),
+
+          // 可修改的计算参数
+          feeTypeId: this.billForm.feeTypeId,
+          calculationOrder: this.billForm.calculationOrder,
+          receivableAmountPrecision: this.billForm.receivableAmountPrecision,
+          taxInclusiveRule: this.billForm.taxInclusiveRule,
+          taxRate: this.billForm.taxRate,
+          decimalPrecisionPrice: this.billForm.decimalPrecisionPrice,
+          price: this.billForm.price,
+          priceU: this.billForm.priceU,
+          billRemark: this.billForm.billRemark,
+          //默认账单类型写死
+          billType:'1',  //1-收款账单，2-付款账单
+          billSource:'2' //合同账单/收费标准账单/自建全部账单/自建关联合同账单/自建未关联合同账单
+
+        }
+
+        // 周期性费用特有参数
+        if (this.billForm.chargeMode === '1') {
+          Object.assign(params, {
+            dayPriceConversionRule: this.billForm.dayPriceConversionRule,
+            billingType: this.billForm.billingType,
+            chrgingUnitVal: this.billForm.chrgingUnitVal,
+            remitCycleVal: this.billForm.remitCycleVal,
+            billDivisionMethod: this.billForm.billDivisionMethod,
+            paymentTimeRuleType: this.billForm.paymentTimeRuleType,
+            delayPaymDaynum: this.billForm.delayPaymDaynum,
+            dateCalculationMethod: this.billForm.dateCalculationMethod
+          })
+        }
+
+        // 调用生成账单API
+        generateBill(params).then(response => {
+          loading.close()
+          if (response.code === API_SUCCESS_CODE) {
+            this.$message.success('账单生成成功')
+            this.generateBillOpen = false
+            // 刷新绑定数据源列表
+            this.getBindDataList()
+          } else {
+            this.$message.error(response.message || '生成账单失败')
+          }
+        }).catch(() => {
+          loading.close()
+          this.$message.error('生成账单失败，请稍后重试')
+        })
+      }).catch(() => { })
+    },
+
+    /** 关闭生成账单对话框 */
+    cancelGenerateBill() {
+      this.generateBillOpen = false
+      this.previewBillList = []
+      this.previewBillTotal = 0
     },
     /** 删除按钮操作 */
     handleDelete(row) {
@@ -916,28 +2153,15 @@ export default {
       return chargeMode === '1' ? periodicUnits[priceU] : oneTimeUnits[priceU]
     },
     /** 格式化付款时间规则 */
-    formatPaymentTimeRule(data) {
-      if (!data.paymentTimeRuleType) return ''
-
-      const typeMap = {
-        '1': '按开始延后',
-        '2': '按结束延后',
-        '3': '按开始提前',
-        '4': '按结束提前',
-        '5': '指定日期'
+    formatPaymentTimeRule(row) {
+      const ruleTypeMap = {
+        '1': '开始日期后延迟',
+        '2': '结束日期后延迟',
+        '3': '开始日期前提前',
+        '4': '结束日期前提前'
       }
-
-      const methodMap = {
-        '1': '自然日',
-        '2': '工作日'
-      }
-
-      let result = typeMap[data.paymentTimeRuleType]
-      if (['1', '2', '3', '4'].includes(data.paymentTimeRuleType)) {
-        result += ` ${data.delayPaymDaynum} 个${methodMap[data.dateCalculationMethod]}`
-      }
-
-      return result
+      const ruleType = ruleTypeMap[row.paymentTimeRuleType] || '未知规则'
+      return `${ruleType} ${row.delayPaymDaynum || 0} 天`
     },
     /** 获取费用类型树 */
     getFeeTypes() {
@@ -974,10 +2198,10 @@ export default {
           children = category.financeFeeTypes.map(feeType => {
             return {
               id: feeType.id || Math.random().toString(36).substr(2, 9),
-              label: feeType.feeTypeName || '未命名费用',
+              label: feeType.feTpName || '未命名费用',
               categoryId: categoryId,
               // 存储原始数据以便后续使用
-              feeTypeName: feeType.feeTypeName || '未命名费用',
+              feTpName: feeType.feTpName || '未命名费用',
               // 确保没有更多的子节点
               children: null
             }
@@ -1022,12 +2246,295 @@ export default {
     /** 格式化百分比 */
     formatPercentage(value) {
       return (value * 100).toFixed(2) + '%'
-    }
+    },
+
+    /** 绑定数据源查询参数重置 */
+    resetBindDataQuery() {
+      this.bindDataQueryParams.pageNum = 1
+      // 重置额外查询字段，但保留必要的standardId等基本信息
+      this.bindDataForm.payerId = ''
+      this.bindDataForm.projectId = ''
+      this.bindDataForm.companyId = ''
+      this.bindDataForm.feeTypeId = null
+      this.bindDataForm.beginDate = ''
+      this.bindDataForm.endDate = ''
+      this.bindDataForm.billDivisionMethod = ''
+      this.bindDataForm.roomId = ''
+      this.getBindDataList()
+    },
+
+    /** 处理绑定数据源分页大小改变 */
+    handleBindDataSizeChange(val) {
+      this.bindDataQueryParams.pageSize = val
+      this.getBindDataList()
+    },
+
+    /** 处理绑定数据源页码改变 */
+    handleBindDataCurrentChange(val) {
+      this.bindDataQueryParams.pageNum = val
+      this.getBindDataList()
+    },
+
+    /** 处理日期范围选择变更 */
+    handleDateRangeChange(val) {
+      if (val && val.length === 2) {
+        this.billForm.startDate = val[0]
+        this.billForm.endDate = val[1]
+        this.billForm.chggBgnDt = val[0]
+        this.billForm.chggEndDt = val[1]
+      } else {
+        this.billForm.startDate = ''
+        this.billForm.endDate = ''
+        this.billForm.chggBgnDt = ''
+        this.billForm.chggEndDt = ''
+      }
+      // 清空预览数据
+      this.clearPreviewData()
+    },
+
+    /** 处理房源树选择 */
+    handleRoomTreeCheck(node, data) {
+      // 只选择叶子节点（房间）
+      const checkedNodes = this.$refs.roomTree.getCheckedNodes(true)
+      // 过滤出所有房间节点
+      const roomNodes = checkedNodes.filter(node => node.isRoom)
+
+      // 创建一个Map用于收集项目信息
+      const projectMap = new Map()
+
+      // 处理每个房间节点
+      roomNodes.forEach(roomNode => {
+        // 查找节点路径
+        let currentNode = this.$refs.roomTree.getNode(roomNode.id)
+        let roomInfo = roomNode.roomData
+        let floorNode, buildingNode, projectNode
+
+        // 向上遍历找到楼层、楼宇和项目节点
+        while (currentNode && currentNode.parent) {
+          const parent = currentNode.parent
+          if (parent.level === 3) { // 楼层级别
+            floorNode = parent.data
+          } else if (parent.level === 2) { // 楼宇级别
+            buildingNode = parent.data
+          } else if (parent.level === 1) { // 项目级别
+            projectNode = parent.data
+          }
+          currentNode = parent
+        }
+
+        // 只有完整路径的房间才处理
+        if (roomInfo && floorNode && buildingNode && projectNode) {
+          // 确认项目是否已在Map中
+          if (!projectMap.has(projectNode.id)) {
+            projectMap.set(projectNode.id, {
+              id: projectNode.id,
+              projectName: projectNode.label,
+              projectType: '产业园区', // 如果有projectType属性，应该使用projectNode中的值
+              buildings: []
+            })
+          }
+
+          // 获取当前项目
+          const project = projectMap.get(projectNode.id)
+
+          // 查找楼宇
+          let building = project.buildings.find(b => b.id === buildingNode.id)
+          if (!building) {
+            building = {
+              id: buildingNode.id,
+              buildingName: buildingNode.label,
+              buildingCode: '', // 如果有buildingCode属性，应该使用buildingNode中的值
+              floors: []
+            }
+            project.buildings.push(building)
+          }
+
+          // 查找楼层
+          let floor = building.floors.find(f => f.id === floorNode.id)
+          if (!floor) {
+            floor = {
+              id: floorNode.id,
+              floorName: floorNode.label,
+              floorNumber: 0, // 如果有floorNumber属性，应该使用floorNode中的值
+              rooms: []
+            }
+            building.floors.push(floor)
+          }
+
+          // 添加房间
+          const room = {
+            id: roomInfo.id,
+            roomNumber: roomInfo.roomNumber || roomNode.label.split('（')[0],
+            roomType: roomInfo.roomType || '',
+            roomStatus: roomInfo.roomStatus || '1',
+            buildingArea: roomInfo.buildingArea || 0,
+            rentalArea: roomInfo.rentalArea || 0
+          }
+
+          // 检查该房间是否已经存在
+          const roomExists = floor.rooms.some(r => r.id === room.id)
+          if (!roomExists) {
+            floor.rooms.push(room)
+          }
+        }
+      })
+
+      // 将Map转换为数组
+      this.billForm.roomIds = Array.from(projectMap.values())
+
+      // 清空预览数据
+      this.clearPreviewData()
+    },
+    getCurrentDate() {
+      return new Date().toISOString().split('T')[0];
+    },
+    /** 处理日期范围变更 */
+    handleDateRangeChange(dateRange) {
+      if (dateRange) {
+        this.bindDataForm.beginDate = dateRange[0]
+        this.bindDataForm.endDate = dateRange[1]
+      } else {
+        this.bindDataForm.beginDate = ''
+        this.bindDataForm.endDate = ''
+      }
+    },
+
+    /** 打开绑定数据查询弹窗 */
+    handleViewBindData(row) {
+      this.bindDataOpen = true
+      this.bindDataForm.standardId = row.id
+      this.bindDataForm.standardName = row.standardName
+      this.bindDataForm.effectiveDate = row.effectiveDate
+      this.bindDataForm.expiryDate = row.expiryDate
+      this.bindDataForm.status = row.status
+      this.bindDataForm.bindingObjectType = row.bindingObjectType
+      // 重置其他查询字段
+      this.bindDataForm.payerId = ''
+      this.bindDataForm.projectId = ''
+      this.bindDataForm.companyId = ''
+      this.bindDataForm.feeTypeId = null
+      this.bindDataForm.beginDate = ''
+      this.bindDataForm.endDate = ''
+      this.bindDataForm.billDivisionMethod = ''
+      this.bindDataForm.roomId = ''
+      this.dateRange = []
+
+      // 加载项目列表(如果还没有)
+      if (this.projectOptions.length === 0) {
+        this.getProjectOptions()
+      }
+
+      // 加载费用类型(如果还没有)
+      if (this.feeTypeOptions.length === 0) {
+        this.getFeeTypeOptions()
+      }
+
+      this.getBindDataList()
+    },
+
+    /** 获取项目选项 */
+    getProjectOptions() {
+      // 这里应该调用项目接口获取项目列表
+      // 示例数据
+      this.projectOptions = [
+        { projectId: 'P001', projectName: '智慧园区A区' },
+        { projectId: 'P002', projectName: '智慧园区B区' },
+        { projectId: 'P003', projectName: '智慧产业园' }
+      ]
+    },
+
+    /** 根据房间ID获取房间信息 */
+    getRoomInfoByRoomId(roomId) {
+      // 默认返回的房间信息
+      const defaultInfo = {
+        roomNumber: roomId,
+        floorName: '-',
+        buildingName: '-'
+      }
+
+      // 从房源树中查找房间信息
+      for (const project of this.roomTreeData || []) {
+        for (const building of project.buildings || []) {
+          for (const floor of building.floors || []) {
+            for (const room of floor.rooms || []) {
+              if (room.id.toString() === roomId.toString()) {
+                return {
+                  roomNumber: room.roomNumber,
+                  floorName: floor.floorName,
+                  buildingName: building.buildingName
+                }
+              }
+            }
+          }
+        }
+      }
+
+      return defaultInfo
+    },
+
+    /** 格式化日期时间 */
+    formatDateTime(dateTimeStr) {
+      if (!dateTimeStr) return '-'
+      // 处理后端返回的ISO格式日期
+      const date = new Date(dateTimeStr)
+      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
+    },
+
+    /** 获取清算状态类型 */
+    getClearStatusType(status) {
+      const statusMap = {
+        '1': 'info',    // 未开始
+        '2': 'warning', // 进行中
+        '3': 'success', // 已完成
+        '4': 'danger',  // 已逾期
+        '5': ''         // 默认
+      }
+      return statusMap[status] || ''
+    },
+
+    /** 获取清算状态名称 */
+    getClearStatusName(status) {
+      const statusMap = {
+        '1': '未开始',
+        '2': '进行中',
+        '3': '已完成',
+        '4': '已逾期',
+        '5': '待处理'
+      }
+      return statusMap[status] || '未知'
+    },
+  },
+  watch: {
+    'billForm.decimalPrecisionPrice': 'handleFormFieldChange',
+    'billForm.receivableAmountPrecision': 'handleFormFieldChange',
+    'billForm.price': 'handleFormFieldChange',
+    'billForm.priceU': 'handleFormFieldChange',
+    'billForm.taxInclusiveRule': 'handleFormFieldChange',
+    'billForm.taxRate': 'handleFormFieldChange',
+    'billForm.dayPriceConversionRule': 'handleFormFieldChange',
+    'billForm.paymentDate': 'handleFormFieldChange',
+    'billForm.quantity': 'handleFormFieldChange',
+    'billForm.feeTypeId': 'handleFormFieldChange',
+    'billForm.paymentTimeRuleType': 'handleFormFieldChange',
+    'billForm.delayPaymDaynum': 'handleFormFieldChange',
+    'billForm.dateCalculationMethod': 'handleFormFieldChange',
+    'billForm.billingType': 'handleFormFieldChange',
+    'billForm.chrgingUnitVal': 'handleFormFieldChange',
+    'billForm.remitCycleVal': 'handleFormFieldChange',
+    'billForm.billDivisionMethod': 'handleFormFieldChange',
+    'billForm.billRemark': 'handleFormFieldChange',
+    'billForm.chggBgnDt': 'handleFormFieldChange',
+    'billForm.chggEndDt': 'handleFormFieldChange'
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.pagination-container {
+  margin-top: 20px;
+  text-align: right;
+}
+
 .app-container {
   padding: 20px;
 
@@ -1039,10 +2546,7 @@ export default {
     margin-bottom: 12px;
   }
 
-  .pagination-container {
-    margin-top: 20px;
-    text-align: right;
-  }
+
 
   .el-divider {
     margin: 24px 0;
@@ -1089,9 +2593,76 @@ export default {
       }
     }
   }
+
+  .bind-data-header {
+    margin-bottom: 20px;
+  }
+
+  .box-card {
+    margin-bottom: 20px;
+
+    .clearfix:before,
+    .clearfix:after {
+      display: table;
+      content: "";
+    }
+
+    .clearfix:after {
+      clear: both;
+    }
+  }
+
+  .bill-preview-container {
+    .bill-summary {
+      margin-top: 20px;
+      text-align: right;
+
+      .bill-total-label {
+        font-size: 16px;
+        font-weight: bold;
+        margin-right: 10px;
+      }
+
+      .bill-total-amount {
+        font-size: 20px;
+        font-weight: bold;
+        color: #f56c6c;
+      }
+    }
+  }
 }
 
 ::v-deep .el-input-number .el-input__inner {
   text-align: left;
 }
-</style>
\ No newline at end of file
+
+/* 绑定房间列表对话框相关样式 */
+.room-bills-container {
+  margin-bottom: 20px;
+}
+
+.room-info {
+  background-color: #f5f7fa;
+  padding: 12px 15px;
+  border-radius: 4px;
+  margin-bottom: 10px;
+  font-weight: bold;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+
+  span {
+    margin-right: 20px;
+    display: inline-flex;
+    align-items: center;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+.empty-data {
+  padding: 40px 0;
+}
+</style>
diff --git a/pc/src/views/finance/feeType/index.vue b/pc/src/views/finance/feeType/index.vue
index 083e8f7..9ae0efd 100644
--- a/pc/src/views/finance/feeType/index.vue
+++ b/pc/src/views/finance/feeType/index.vue
@@ -50,7 +50,7 @@
                     <div class="fee-type-search">
                         <el-form :inline="true" :model="queryParams" class="search-form">
                             <el-form-item label="费用名称">
-                                <el-input v-model="queryParams.feeTypeName" placeholder="请输入费用名称" clearable
+                                <el-input v-model="queryParams.feTpName" placeholder="请输入费用名称" clearable
                                     @keyup.enter.native="handleQuery"></el-input>
                             </el-form-item>
                             <el-form-item>
@@ -62,7 +62,7 @@
                     <!-- 费用类型表格 -->
                     <el-table v-loading="loading" :data="typeList" border>
                         <el-table-column type="index" width="50" align="center" label="序号"></el-table-column>
-                        <el-table-column prop="feeTypeName" label="费用名称" min-width="140"></el-table-column>
+                        <el-table-column prop="feTpName" label="费用名称" min-width="140"></el-table-column>
                         <el-table-column label="费用分类" min-width="120" align="center">
                             <template slot-scope="scope">
                                 {{ getCategoryNameById(scope.row.categoryId) }}
@@ -129,8 +129,8 @@
                         </el-option>
                     </el-select>
                 </el-form-item>
-                <el-form-item label="费用类型名称" prop="feeTypeName">
-                    <el-input v-model="typeForm.feeTypeName" placeholder="请输入费用类型名称" :disabled="typeEdit"
+                <el-form-item label="费用类型名称" prop="feTpName">
+                    <el-input v-model="typeForm.feTpName" placeholder="请输入费用类型名称" :disabled="typeEdit"
                         style="width: 100%"></el-input>
                 </el-form-item>
                 <el-form-item label="状态" prop="status">
@@ -186,7 +186,7 @@ export default {
             queryParams: {
                 pageNum: 1,
                 pageSize: 10,
-                feeTypeName: undefined,
+                feTpName: undefined,
                 categoryId: null
             },
 
@@ -216,13 +216,13 @@ export default {
             typeEdit: false,
             typeForm: {
                 id: undefined,
-                feeTypeName: '',
+                feTpName: '',
                 categoryId: null,
                 status: '1',
                 defauVerFlag: '0'
             },
             typeRules: {
-                feeTypeName: [
+                feTpName: [
                     { required: true, message: '费用类型名称不能为空', trigger: 'blur' },
                     { min: 2, max: 50, message: '费用类型名称长度必须在2-50个字符之间', trigger: 'blur' }
                 ],
@@ -296,7 +296,7 @@ export default {
         },
         // 重置查询操作
         resetQuery() {
-            this.queryParams.feeTypeName = undefined
+            this.queryParams.feTpName = undefined
             this.handleQuery()
         },
         // 每页条数改变
@@ -411,7 +411,7 @@ export default {
                 // 重置表单数据
                 this.typeForm = {
                     id: undefined,
-                    feeTypeName: '',
+                    feTpName: '',
                     categoryId: this.selectedCategoryId ? parseInt(this.selectedCategoryId) : null,
                     status: '1',
                     defauVerFlag: '0'
@@ -455,7 +455,7 @@ export default {
                     // 创建提交的数据对象，只包含需要的字段
                     const submitData = {
                         id: this.typeForm.id,
-                        feeTypeName: this.typeForm.feeTypeName,
+                        feTpName: this.typeForm.feTpName,
                         categoryId: this.typeForm.categoryId,
                         status: this.typeForm.status
                     }
diff --git a/pc/src/views/finance/receiptSetting/PayeeInfo.vue b/pc/src/views/finance/receiptSetting/PayeeInfo.vue
index 41c2c02..262cadc 100644
--- a/pc/src/views/finance/receiptSetting/PayeeInfo.vue
+++ b/pc/src/views/finance/receiptSetting/PayeeInfo.vue
@@ -4,7 +4,7 @@
     
     <!-- 搜索栏 -->
     <div class="filter-container">
-      <el-input v-model="queryParams.payeeNameUnitName" placeholder="请输入收款方单位名称" clearable style="width: 250px;" class="filter-item" />
+      <el-input v-model="queryParams.payeeUnitName" placeholder="请输入收款方单位名称" clearable style="width: 250px;" class="filter-item" />
       <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
       <el-button @click="resetQuery">重置</el-button>
       <el-button type="primary" icon="el-icon-plus"  style="float: right;" @click="handleAdd">新增收款方信息</el-button>
@@ -17,10 +17,10 @@
           {{ formatCompanyName(scope.row.companyId) }}
         </template>
       </el-table-column>
-      <el-table-column prop="payeeNameUnitName" label="收款方单位名称" />
+      <el-table-column prop="payeeUnitName" label="收款方单位名称" />
       <el-table-column prop="payeeName" label="收款人" />
-      <el-table-column prop="addr" label="地址" />
-      <el-table-column prop="contTel" label="电话" />
+      <el-table-column prop="payeeAddr" label="地址" />
+      <el-table-column prop="payeePhone" label="电话" />
       <el-table-column prop="buildingIds" label="应用楼宇">
         <template slot-scope="scope">
           {{ formatBuildingNames(scope.row.buildingIds) }}
@@ -53,17 +53,17 @@
               :value="item.id" />
           </el-select>
         </el-form-item>
-        <el-form-item label="收款方单位名称" prop="payeeNameUnitName">
-          <el-input v-model="form.payeeNameUnitName" placeholder="请输入收款方单位名称" />
+        <el-form-item label="收款方单位名称" prop="payeeUnitName">
+          <el-input v-model="form.payeeUnitName" placeholder="请输入收款方单位名称" />
         </el-form-item>
         <el-form-item label="收款人" prop="payeeName">
           <el-input v-model="form.payeeName" placeholder="请输入收款人" />
         </el-form-item>
-        <el-form-item label="地址" prop="addr">
-          <el-input v-model="form.addr" placeholder="请输入地址" />
+        <el-form-item label="地址" prop="payeeAddr">
+          <el-input v-model="form.payeeAddr" placeholder="请输入地址" />
         </el-form-item>
-        <el-form-item label="电话" prop="contTel">
-          <el-input v-model="form.contTel" placeholder="请输入电话" />
+        <el-form-item label="电话" prop="payeePhone">
+          <el-input v-model="form.payeePhone" placeholder="请输入电话" />
         </el-form-item>
         <el-form-item label="应用楼宇" prop="buildingIds">
           <el-popover
@@ -127,7 +127,7 @@ export default {
       queryParams: {
         current: 1,
         size: 10,
-        payeeNameUnitName: ''
+        payeeUnitName: ''
       },
       
       // 加载状态
@@ -140,10 +140,10 @@ export default {
       // 收款方信息
       payeeInfo: {
         companyId: '',
-        payeeNameUnitName: '',
+        payeeUnitName: '',
         payeeName: '',
-        addr: '',
-        contTel: '',
+        payeeAddr: '',
+        payeePhone: '',
         buildingIds: []
       },
       
@@ -174,10 +174,10 @@ export default {
       // 表单数据
       form: {
         companyId: '',
-        payeeNameUnitName: '',
+        payeeUnitName: '',
         payeeName: '',
-        addr: '',
-        contTel: '',
+        payeeAddr: '',
+        payeePhone: '',
         buildingIds: [],
         buildingNames: ''
       },
@@ -187,13 +187,13 @@ export default {
         companyId: [
           { required: true, message: '请选择关联公司', trigger: 'change' }
         ],
-        payeeNameUnitName: [
+        payeeUnitName: [
           { required: true, message: '请输入收款方单位名称', trigger: 'blur' }
         ],
         payeeName: [
           { required: true, message: '请输入收款人', trigger: 'blur' }
         ],
-        contTel: [
+        payeePhone: [
           { pattern: /^(\d{3,4}-\d{7,8}(-\d{1,4})?|1[3-9]\d{9})$/, message: '电话格式不正确', trigger: 'blur' }
         ],
         buildingIds: [
@@ -222,10 +222,10 @@ export default {
           this.payeeList = [{
             id: 1,
             companyId: 'COM001',
-            payeeNameUnitName: '智慧园区管理有限公司',
+            payeeUnitName: '智慧园区管理有限公司',
             payeeName: '张三',
-            addr: '北京市海淀区中关村大街1号',
-            contTel: '13800138000',
+            payeeAddr: '北京市海淀区中关村大街1号',
+            payeePhone: '13800138000',
             buildingIds: 'BLD001,BLD002'
           }]
           this.total = 1
@@ -239,10 +239,10 @@ export default {
         this.payeeList = [{
           id: 1,
           companyId: 'COM001',
-          payeeNameUnitName: '智慧园区管理有限公司',
+          payeeUnitName: '智慧园区管理有限公司',
           payeeName: '张三',
-          addr: '北京市海淀区中关村大街1号',
-          contTel: '13800138000',
+          payeeAddr: '北京市海淀区中关村大街1号',
+          payeePhone: '13800138000',
           buildingIds: 'BLD001,BLD002'
         }]
         this.total = 1
@@ -348,7 +348,7 @@ export default {
       this.queryParams = {
         current: 1,
         size: 10,
-        payeeNameUnitName: ''
+        payeeUnitName: ''
       }
       this.getPayeeList()
     },
@@ -371,10 +371,10 @@ export default {
       this.currentId = null
       this.form = {
         companyId: '',
-        payeeNameUnitName: '',
+        payeeUnitName: '',
         payeeName: '',
-        addr: '',
-        contTel: '',
+        payeeAddr: '',
+        payeePhone: '',
         buildingIds: [],
         buildingNames: ''
       }
diff --git a/pc/vue.config.js b/pc/vue.config.js
index 359c310..6751f82 100644
--- a/pc/vue.config.js
+++ b/pc/vue.config.js
@@ -10,14 +10,14 @@ module.exports = {
       warnings: false,
       errors: true
     },
-    proxy: {
-      '/': {
-        target: 'http://192.168.137.214:8082/api',
-        changeOrigin: true,
-        pathRewrite: {
-          '^/api': '/api'
-        }
-      }
-    }
+    // proxy: {
+    //   '/': {
+    //     target: 'http://192.168.137.214:8082',
+    //     changeOrigin: true,
+    //     pathRewrite: {
+    //       '^/api': '/api'
+    //     }
+    //   }
+    // }
   }
 } 
\ No newline at end of file