From b573cfdb7f960971de8b299b0711c97d193c4ae0 Mon Sep 17 00:00:00 2001
From: zengqiyang <492393100@qq.com>
Date: Thu, 24 Apr 2025 18:29:19 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=A8=E9=83=A8=E8=B4=A6=E5=8D=95=E5=AF=B9?=
 =?UTF-8?q?=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |    1 +
 pc/package.json                               |    5 +-
 pc/src/api/finance.js                         |  270 +++-
 pc/src/components/RegionSelector.vue          |  136 ++
 pc/src/router/modules/finance.js              |    6 +
 .../finance/billList/components/AddBill.vue   |  427 +++--
 .../billList/components/BillDetail.vue        | 1410 ++++++++++++++++-
 pc/src/views/finance/billList/index.vue       |   74 +-
 .../components/TransactionDetail.vue          |  520 ++++++
 pc/src/views/finance/transaction/index.vue    |  352 ++++
 pc/src/views/project/index.vue                |   16 +-
 pc/vue.config.js                              |    2 +-
 12 files changed, 3036 insertions(+), 183 deletions(-)
 create mode 100644 pc/src/components/RegionSelector.vue
 create mode 100644 pc/src/views/finance/transaction/components/TransactionDetail.vue
 create mode 100644 pc/src/views/finance/transaction/index.vue

diff --git a/package.json b/package.json
index 621d8de..c496ed7 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "element-china-area-data": "^6.1.0",
     "html2canvas": "^1.4.1",
     "mammoth": "^1.9.0",
     "pdf-lib": "^1.17.1",
diff --git a/pc/package.json b/pc/package.json
index 491d5d5..a5c72a8 100644
--- a/pc/package.json
+++ b/pc/package.json
@@ -49,7 +49,10 @@
     "vue-router": "3.4.9",
     "vuedraggable": "^2.24.3",
     "vuex": "3.6.0",
-    "xlsx": "^0.18.5"
+    "xlsx": "^0.18.5",
+    "element-china-area-data": "^6.1.0",
+    "mammoth": "^1.9.0",
+    "qrcode.vue": "^3.6.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",
diff --git a/pc/src/api/finance.js b/pc/src/api/finance.js
index 11a2f25..cd2ab71 100644
--- a/pc/src/api/finance.js
+++ b/pc/src/api/finance.js
@@ -416,7 +416,7 @@ export function uploadBillAttachment(billId, file) {
   formData.append('billId', billId)
   formData.append('file', file)
   return request({
-    url: '/bill/attachment/upload',
+    url: '/bill/upload-attachment',
     method: 'post',
     data: formData,
     headers: {
@@ -425,10 +425,11 @@ export function uploadBillAttachment(billId, file) {
   })
 }
 
+// 账单附件删除
 export function deleteBillAttachment(attachmentId) {
   return request({
-    url: `/bill/attachment/${attachmentId}`,
-    method: 'delete'
+    url: `/bill/attachment/delete/${attachmentId}`,
+    method: 'get'
   })
 }
 
@@ -446,4 +447,267 @@ export function exportBillList(data) {
     data,
     responseType: 'blob'
   })
+}
+
+// 收支流水相关接口
+export function getTransactionList(params) {
+  return request({
+    url: '/finance/transaction/page',
+    method: 'get',
+    params
+  })
+}
+
+export function getTransactionDetail(id) {
+  return request({
+    url: `/finance/transaction/${id}`,
+    method: 'get'
+  })
+}
+
+export function addTransaction(data) {
+  return request({
+    url: '/finance/transaction',
+    method: 'post',
+    data
+  })
+}
+
+export function updateTransaction(data) {
+  return request({
+    url: '/finance/transaction',
+    method: 'put',
+    data
+  })
+}
+
+export function exportTransactionList(params) {
+  return request({
+    url: '/finance/transaction/export',
+    method: 'get',
+    params,
+    responseType: 'blob'
+  })
+}
+
+export function getTransactionAttachments(transactionId) {
+  return request({
+    url: `/finance/transaction/${transactionId}`,
+    method: 'get'
+  })
+}
+
+export function uploadTransactionAttachment(transactionId, file) {
+  const formData = new FormData()
+  formData.append('transactionId', transactionId)
+  formData.append('userId', localStorage.getItem('userId') || '')
+  formData.append('userName', localStorage.getItem('userName') || '')
+  formData.append('file', file)
+  
+  return request({
+    url: '/finance/transaction/attachment',
+    method: 'post',
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+
+export function deleteTransactionAttachment(attachmentId) {
+  return request({
+    url: `/finance/transaction/attachment/file/${attachmentId}`,
+    method: 'delete'
+  })
+}
+
+export function previewAttachment(attachmentId) {
+  return request({
+    url: `/finance/transaction/attachment/preview/file/${attachmentId}`,
+    method: 'get',
+    responseType: 'blob'
+  })
+}
+
+export function previewAttachmentByFileId(fileId) {
+  return request({
+    url: `/finance/transaction/attachment/preview/file/${fileId}`,
+    method: 'get',
+    responseType: 'blob'
+  })
+}
+
+export function downloadAttachment(fileId, fileName) {
+  return request({
+    url: `/finance/transaction/attachment/download/${fileId}`,
+    method: 'get',
+    params: { fileName },
+    responseType: 'blob'
+  })
+}
+
+export function deleteAttachmentByFileId(fileId) {
+  return request({
+    url: `/finance/transaction/attachment/file/${fileId}`,
+    method: 'delete',
+    params: {
+      userId: localStorage.getItem('userId') || ''
+    }
+  })
+}
+
+export function addTransactionOperation(data) {
+  return request({
+    url: '/finance/transaction/operation',
+    method: 'post',
+    data
+  })
+}
+
+export function getTransactionOperationLogs(transactionId, query) {
+  return request({
+    url: `/finance/transaction/${transactionId}`,
+    method: 'get'
+  })
+}
+
+// 获取所有收支账户
+export function getAllFinanceAccounts() {
+  return request({
+    url: '/finance/account/list',
+    method: 'get'
+  })
+}
+
+// 账单调整相关接口
+
+// 添加账单调整(按金额或按比例)
+export function addBillAdjustment(data) {
+  return request({
+    url: '/v1/bill-adjustments',
+    method: 'post',
+    data
+  })
+}
+
+// 作废账单调整
+export function voidBillAdjustment(data) {
+  return request({
+    url: '/v1/bill-adjustments/void',
+    method: 'put',
+    data
+  })
+}
+
+// 分页查询账单调整记录
+export function getBillAdjustmentList(params) {
+  return request({
+    url: '/v1/bill-adjustments',
+    method: 'get',
+    params
+  })
+}
+
+// 获取账单调整详情
+export function getBillAdjustmentDetail(id) {
+  return request({
+    url: `/v1/bill-adjustments/${id}`,
+    method: 'get'
+  })
+}
+
+// 上传账单调整附件
+export function uploadBillAdjustmentAttachment(id, file) {
+  const formData = new FormData()
+  formData.append('file', file)
+  return request({
+    url: `/v1/bill-adjustments/${id}/attachments`,
+    method: 'post',
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+
+// 删除账单调整附件
+export function deleteBillAdjustmentAttachment(attachmentId) {
+  return request({
+    url: `/v1/bill-adjustments/attachments/${attachmentId}`,
+    method: 'delete'
+  })
+}
+
+// 获取账单明细
+export function getBillDetailById(detailId) {
+  return request({
+    url: `/v1/bill-details/${detailId}`,
+    method: 'get'
+  })
+}
+
+// 获取账单调整附件列表
+export function getBillAdjustmentAttachmentList(adjustmentId) {
+  return request({
+    url: `/v1/bill-adjustments/attachments/view/${adjustmentId}`,
+    method: 'get'
+  })
+}
+
+// 获取账单操作记录
+export function getBillOperationRecords(billId, params) {
+  return request({
+    url: `/v1/operation-records/list/${billId}`,
+    method: 'get',
+    params
+  })
+}
+
+// 账单支付相关接口
+// 提交账单支付
+export function submitBillPayment(data) {
+  return request({
+    url: '/v1/bill-payments',
+    method: 'post',
+    data
+  })
+}
+
+// 分页查询支付记录
+export function getBillPaymentRecords(params) {
+  return request({
+    url: '/v1/bill-payments',
+    method: 'get',
+    params
+  })
+}
+
+// 获取支付详情
+export function getBillPaymentDetail(id) {
+  return request({
+    url: `/v1/bill-payments/${id}`,
+    method: 'get'
+  })
+}
+
+// 上传支付附件
+export function uploadBillPaymentAttachment(id, file) {
+  const formData = new FormData()
+  formData.append('file', file)
+  return request({
+    url: `/v1/bill-payments/${id}/attachments`,
+    method: 'post',
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+
+// 删除支付附件
+export function deleteBillPaymentAttachment(attachmentId) {
+  return request({
+    url: `/v1/bill-payments/attachments/${attachmentId}`,
+    method: 'delete'
+  })
 } 
\ No newline at end of file
diff --git a/pc/src/components/RegionSelector.vue b/pc/src/components/RegionSelector.vue
new file mode 100644
index 0000000..2713270
--- /dev/null
+++ b/pc/src/components/RegionSelector.vue
@@ -0,0 +1,136 @@
+<template>
+  <el-cascader
+    v-model="selectedRegion"
+    :options="regionOptions"
+    :props="{ expandTrigger: 'hover', value: 'value', label: 'label' }"
+    :placeholder="placeholder"
+    filterable
+    clearable
+    @change="handleChange"
+    style="width: 100%"
+  />
+</template>
+
+<script>
+import { regionData, pcaTextArr } from 'element-china-area-data'
+
+export default {
+  name: 'RegionSelector',
+  props: {
+    value: {
+      type: [Array, String],
+      default: () => []
+    },
+    placeholder: {
+      type: String,
+      default: '请选择省/市/区'
+    },
+    // 是否使用纯文本数据
+    useTextData: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      regionOptions: this.useTextData ? pcaTextArr : regionData,
+      selectedRegion: []
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val) {
+          // 处理传入的值，适配组件
+          if (typeof val === 'string') {
+            // 如果是字符串，按空格分割为数组
+            const parts = val.split(' ').filter(item => item);
+            
+            if (parts.length > 0) {
+              if (this.useTextData) {
+                // 如果使用纯文本数据，直接设置
+                this.selectedRegion = parts;
+              } else {
+                // 如果使用编码数据，需要转换成编码
+                this.convertTextToCode(parts);
+              }
+            } else {
+              this.selectedRegion = [];
+            }
+          } else if (Array.isArray(val)) {
+            // 已经是数组，直接使用
+            this.selectedRegion = val;
+          } else {
+            this.selectedRegion = [];
+          }
+        } else {
+          this.selectedRegion = [];
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    // 将文本转换为区域代码
+    convertTextToCode(textArray) {
+      // 由于没有TextToCode对象，我们需要手动查找
+      const findValueByLabel = (options, label, level = 0) => {
+        for (const option of options) {
+          if (option.label === label) {
+            return level === textArray.length - 1 ? option.value : 
+              findValueByLabel(option.children || [], textArray[level + 1], level + 1);
+          }
+        }
+        return null;
+      };
+      
+      const value = findValueByLabel(this.regionOptions, textArray[0], 0);
+      if (value) {
+        this.selectedRegion = value.split(',');
+      } else {
+        this.selectedRegion = [];
+      }
+    },
+    
+    handleChange(value) {
+        
+      // 选择值改变时，转换为可读字符串并发送事件
+      if (value && value.length > 0) {
+        const labels = this.getSelectedLabels(value);
+        const regionText = labels.join(' ');
+        this.$emit('input', regionText);
+        this.$emit('change', regionText, value, labels);
+
+      } else {
+        this.$emit('input', '');
+        this.$emit('change', '', [], []);
+      }
+
+    },
+    
+    getSelectedLabels(codes) {
+      // 根据选中的代码值获取对应的文本标签
+      const labels = [];
+      let options = this.regionOptions;
+      
+      for (let i = 0; i < codes.length; i++) {
+        const code = codes[i];
+        const option = options.find(item => item.value === code);
+        
+        if (option) {
+          labels.push(option.label);
+          options = option.children || [];
+        }
+      }
+      
+      return labels;
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-cascader {
+  width: 100%;
+}
+</style> 
\ No newline at end of file
diff --git a/pc/src/router/modules/finance.js b/pc/src/router/modules/finance.js
index c20f28b..af16121 100644
--- a/pc/src/router/modules/finance.js
+++ b/pc/src/router/modules/finance.js
@@ -30,6 +30,12 @@ export default {
       component: () => import('@/views/finance/billList/index.vue'),
       name: 'BillList',
       meta: { title: '所有账单', icon: 'el-icon-notebook-2' }
+    },
+    {
+      path: 'transaction',
+      component: () => import('@/views/finance/transaction/index.vue'),
+      name: 'Transaction',
+      meta: { title: '收支流水', icon: 'el-icon-money' }
     }
   ]
 } 
\ No newline at end of file
diff --git a/pc/src/views/finance/billList/components/AddBill.vue b/pc/src/views/finance/billList/components/AddBill.vue
index 8371e23..6ed1402 100644
--- a/pc/src/views/finance/billList/components/AddBill.vue
+++ b/pc/src/views/finance/billList/components/AddBill.vue
@@ -5,8 +5,8 @@
         <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 label="1" value="1">含税</el-radio>
+              <el-radio label="2" value="2">不含税</el-radio>
             </el-radio-group>
           </el-form-item>
           <el-form-item label="税率(%)" prop="taxRate" required>
@@ -14,18 +14,18 @@
           </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 label="1" value="1">正常</el-radio>
+              <el-radio label="2" value="2">罚金</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 label="滞纳金起算天数" prop="ovdueStartDays">
+            <el-input-number v-model="billForm.ovdueStartDays" :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 label="滞纳金比例(%/天)" prop="ovdueIntRate">
+            <el-input-number v-model="billForm.ovdueIntRate" :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 label="滞纳金上限(%)" prop="ovdueLimitRate">
+            <el-input-number v-model="billForm.ovdueLimitRate" :min="0" :max="100" :precision="10" style="width: 200px"></el-input-number>
           </el-form-item>
         </el-form>
       </el-tab-pane>
@@ -64,8 +64,8 @@
               </el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="付款方" prop="payeeId" required>
-            <el-select v-model="billForm.payeeId" placeholder="请选择付款方" filterable remote clearable
+          <el-form-item label="付款方" prop="paysdId" required>
+            <el-select v-model="billForm.paysdId" 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">
@@ -75,12 +75,12 @@
           <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 label="应收金额" prop="accigRcvAmt" required>
+            <el-input-number v-model="billForm.accigRcvAmt" :min="0" :precision="2" style="width: 400px"></el-input-number>
           </el-form-item>
-          <el-form-item label="应收日期" prop="receivableDate" required>
+          <el-form-item label="应收日期" prop="pybDt" required>
             <el-date-picker
-              v-model="billForm.receivableDate"
+              v-model="billForm.pybDt"
               type="date"
               placeholder="选择日期"
               value-format="yyyy-MM-dd"
@@ -139,18 +139,39 @@
           <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>
+    
+    <!-- 文件预览对话框 -->
+    <el-dialog title="附件预览" :visible.sync="previewDialogVisible" width="800px" append-to-body>
+      <div class="preview-container" v-loading="previewLoading">
+        <div v-if="previewUrl && isPdf" class="preview-iframe">
+          <iframe :src="previewUrl" width="100%" height="500px" frameborder="0"></iframe>
+        </div>
+        <div v-else-if="previewUrl && isImage" class="preview-image">
+          <img :src="previewUrl" style="max-width: 100%;" />
+        </div>
+        <div v-else-if="!previewLoading" class="preview-error">
+          <i class="el-icon-warning"></i>
+          <p>预览加载失败，请尝试下载后查看</p>
+          <div class="preview-actions">
+            <el-button type="primary" @click="downloadCurrentPreview">下载文件</el-button>
+          </div>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="previewDialogVisible = false">关 闭</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getFeeTypeTree } from '@/api/finance'
+import { getFeeTypeTree, uploadBillAttachment, addBill } from '@/api/finance'
 
 export default {
   name: 'AddBill',
@@ -167,30 +188,28 @@ export default {
       billForm: {
         contractId: '',
         contractNumber: '',
-        payeeId: '',
-        payeeName: '',
+        paysdId: '',
+        paysdName: '',
         payeeContact: '',
         feeCategoryId: '',
         feeTypeId: '',
-        feeTypeName: '',
+        feTpName: '',
         currCode: '156', // 默认人民币
-        billingStartDate: '',
-        billingEndDate: '',
-        receivableAmount: 0,
-        price: 0,
-        priceU: '元/月',
-        taxInclusiveRule: '含税',
+        chggBgnDt: '',
+        chggEndDt: '',
+        accigRcvAmt: 0,
+        taxInclusiveRule: '1',
         taxRate: 0,
-        receivableDate: '',
-        specialBillType: '正常',
-        lateFeeStartDays: 0,
-        lateFeeRate: 0,
-        lateFeeLimit: 0,
+        pybDt: '',
+        specialBillType: '1',
+        ovdueStartDays: 0,
+        ovdueIntRate: 0,
+        ovdueLimitRate: 0,
         companyId: '',
-        companyName: '',
+        corNm: '',
         accountId: '',
         billRemark: '',
-        roomInfoList: []
+        roomIds: []
       },
       // 表单验证规则
       chargeModeRules: {
@@ -205,7 +224,7 @@ export default {
         ]
       },
       billInfoRules: {
-        payeeId: [
+        paysdId: [
           { required: true, message: '请选择付款方', trigger: 'change' }
         ],
         companyId: [
@@ -214,10 +233,10 @@ export default {
         accountId: [
           { required: true, message: '请选择收支账户', trigger: 'change' }
         ],
-        receivableAmount: [
+        accigRcvAmt: [
           { required: true, message: '请输入应收金额', trigger: 'blur' }
         ],
-        receivableDate: [
+        pybDt: [
           { required: true, message: '请选择应收日期', trigger: 'change' }
         ]
       },
@@ -244,7 +263,16 @@ export default {
       selectedRoomIds: [],
       // 附件上传相关
       fileList: [],
-      attachmentLoading: false
+      attachmentLoading: false,
+      
+      // 预览相关
+      previewDialogVisible: false,
+      previewLoading: false,
+      previewUrl: '',
+      previewBlob: null,
+      currentPreviewName: '',
+      isPdf: false,
+      isImage: false,
     }
   },
   created() {
@@ -280,10 +308,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
             }
@@ -302,7 +330,7 @@ export default {
     getCompanyOptions() {
       // 模拟数据，实际应调用API
       this.companyOptions = [
-        { id: 'C001', name: '智慧园区物业管理有限公司' }
+        { id: 123, name: '智慧园区物业管理有限公司' }
       ]
     },
     // 获取收支账户选项
@@ -318,8 +346,8 @@ export default {
       if (query) {
         // 实际应调用API
         this.contractOptions = [
-          { contractId: 'CT001', contractNumber: 'HT2023001', customerName: '张三' },
-          { contractId: 'CT002', contractNumber: 'HT2023002', customerName: '李四' }
+          { contractId: 11, contractNumber: 'HT2023001', customerName: '张三' },
+          { contractId: 22, contractNumber: 'HT2023002', customerName: '李四' }
         ]
       } else {
         this.contractOptions = []
@@ -338,19 +366,21 @@ export default {
       }
     },
     // 处理付款方变更
-    handlePayeeChange(payeeId) {
-      const payee = this.payeeOptions.find(item => item.id === payeeId)
+    handlePayeeChange(paysdId) {
+      const payee = this.payeeOptions.find(item => item.id === paysdId)
       if (payee) {
-        this.billForm.payeeName = payee.name
+        this.billForm.paysdName = payee.name
         this.billForm.payeeContact = payee.contact
         // 触发表单验证更新
         this.$nextTick(() => {
-          this.$refs.billInfoForm.validateField('payeeId')
+          this.$refs.billInfoForm.validateField('paysdId')
         })
       }
     },
     // 处理费用类型变更
     handleFeeTypeChange(value) {
+      console.log(value);
+      
       if (value) {
         // 查找匹配的费用类型
         let selectedFeeType = null;
@@ -370,7 +400,7 @@ export default {
           }
           // 检查子节点
           if (category.children && category.children.length > 0) {
-            const found = category.children.find(item => item.id === value);
+            const found = category.children.find(item => item.id === value[1]);
             if (found) {
               selectedCategory = category;
               selectedFeeType = {
@@ -389,25 +419,25 @@ export default {
           if (selectedFeeType.type === '分类') {
             this.billForm.feeCategoryId = selectedFeeType.id;
             this.billForm.feeTypeId = '';
-            this.billForm.feeTypeName = selectedFeeType.name;
+            this.billForm.feTpName = selectedFeeType.name;
           } else {
             this.billForm.feeCategoryId = selectedCategory.id;
             this.billForm.feeTypeId = selectedFeeType.id;
-            this.billForm.feeTypeName = selectedFeeType.name;
+            this.billForm.feTpName = selectedFeeType.name;
           }
         }
       } else {
         // 清空选择
         this.billForm.feeCategoryId = '';
         this.billForm.feeTypeId = '';
-        this.billForm.feeTypeName = '';
+        this.billForm.feTpName = '';
       }
     },
     // 处理公司变更
     handleCompanyChange(companyId) {
       const company = this.companyOptions.find(item => item.id === companyId)
       if (company) {
-        this.billForm.companyName = company.name
+        this.billForm.corNm = company.name
         // 触发表单验证更新
         this.$nextTick(() => {
           this.$refs.billInfoForm.validateField('companyId')
@@ -420,11 +450,11 @@ export default {
     // 处理计费周期变更
     handleBillingPeriodChange(val) {
       if (val && val.length === 2) {
-        this.billForm.billingStartDate = val[0]
-        this.billForm.billingEndDate = val[1]
+        this.billForm.chggBgnDt = val[0]
+        this.billForm.chggEndDt = val[1]
       } else {
-        this.billForm.billingStartDate = ''
-        this.billForm.billingEndDate = ''
+        this.billForm.chggBgnDt = ''
+        this.billForm.chggEndDt = ''
       }
     },
     
@@ -525,9 +555,6 @@ export default {
       // 更新选中的房间ID列表
       this.selectedRoomIds = roomNodes.map(node => node.id)
       
-      // 重置房源信息列表
-      this.billForm.roomInfoList = []
-      
       // 创建一个Map用于收集项目信息
       const projectMap = new Map()
       
@@ -553,20 +580,63 @@ export default {
         
         // 只有完整路径的房间才处理
         if (roomInfo && floorNode && buildingNode && projectNode) {
-          // 更新房源信息列表
-          this.billForm.roomInfoList.push({
-            roomId: roomNode.id,
+          // 确认项目是否已在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],
-            buildingId: buildingNode.id,
-            buildingName: buildingNode.label,
-            floorId: floorNode.id,
-            floorName: floorNode.label,
-            projectId: projectNode.id,
-            projectName: projectNode.label,
-            rentArea: roomInfo.rentalArea || 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())
     },
     // 上传文件前检查
     beforeUpload(file) {
@@ -586,32 +656,87 @@ export default {
     // 自定义上传文件
     uploadFile(options) {
       this.attachmentLoading = true
+      const file = options.file
       
-      // 此处模拟上传，实际应调用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)
+      // 创建临时URL供预览
+      const tempUrl = URL.createObjectURL(file)
+      const fileName = file.name
+      
+      // 向上传列表中添加文件
+      const currentUser = this.$store.getters.name || '当前用户'
+      
+      this.fileList.push({
+        name: fileName,
+        file: file,
+        url: tempUrl,
+        operatorName: currentUser,
+        operateTime: new Date().toLocaleString()
+      })
+      
+      this.attachmentLoading = false
+      this.$message.success('上传成功')
+
+      console.log(this.fileList);
+
     },
+    
     // 预览文件
     previewFile(file) {
-      window.open(file.url)
+      this.previewLoading = true
+      this.previewDialogVisible = true
+      this.currentPreviewName = file.name || '附件'
+      this.previewUrl = ''
+      this.isPdf = false
+      this.isImage = false
+      
+      // 根据文件名后缀判断文件类型
+      const fileExt = file.name ? file.name.split('.').pop().toLowerCase() : ''
+      
+      try {
+        // 获取文件内容进行预览
+        const blob = file.file ? file.file : new Blob()
+        this.previewBlob = blob
+        
+        // 设置文件类型标志
+        if (fileExt === 'pdf') {
+          this.isPdf = true
+        } else if (['jpg', 'jpeg', 'png', 'gif'].includes(fileExt)) {
+          this.isImage = true
+        }
+        
+        // 创建URL用于预览
+        this.previewUrl = file.url || URL.createObjectURL(blob)
+        this.previewLoading = false
+      } catch (error) {
+        console.error('预览失败', error)
+        this.$message.error('获取预览数据失败')
+        this.previewLoading = false
+      }
     },
+    
+    // 下载当前预览的文件
+    downloadCurrentPreview() {
+      if (!this.previewUrl) {
+        this.$message.error('没有可下载的文件')
+        return
+      }
+      
+      const link = document.createElement('a')
+      link.href = this.previewUrl
+      link.setAttribute('download', this.currentPreviewName)
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+    },
+    
     // 下载文件
     downloadFile(file) {
-      // 实际应调用API下载
       const link = document.createElement('a')
       link.href = file.url
       link.download = file.name
       link.click()
     },
+
     // 删除文件
     deleteFile(index) {
       this.$confirm('确认删除该附件?', '提示', {
@@ -631,8 +756,8 @@ export default {
       }
       
       if (this.formExtension.billingPeriod && this.formExtension.billingPeriod.length === 2) {
-        this.billForm.billingStartDate = this.formExtension.billingPeriod[0]
-        this.billForm.billingEndDate = this.formExtension.billingPeriod[1]
+        this.billForm.chggBgnDt = this.formExtension.billingPeriod[0]
+        this.billForm.chggEndDt = this.formExtension.billingPeriod[1]
       }
       
       return this.billForm
@@ -665,7 +790,7 @@ export default {
               }
               
               // 验证是否选择了房源
-              if (this.billForm.roomInfoList.length === 0) {
+              if (this.billForm.roomIds.length === 0) {
                 this.$message.warning('请至少选择一个房源')
                 this.activeTab = 'roomInfo'
                 resolve(false)
@@ -698,30 +823,28 @@ export default {
       this.billForm = {
         contractId: '',
         contractNumber: '',
-        payeeId: '',
-        payeeName: '',
+        paysdId: '',
+        paysdName: '',
         payeeContact: '',
         feeCategoryId: '',
         feeTypeId: '',
-        feeTypeName: '',
+        feTpName: '',
         currCode: '156', // 默认人民币
-        billingStartDate: '',
-        billingEndDate: '',
-        receivableAmount: 0,
-        price: 0,
-        priceU: '元/月',
-        taxInclusiveRule: '含税',
+        chggBgnDt: '',
+        chggEndDt: '',
+        accigRcvAmt: 0,
+        taxInclusiveRule: '1',
         taxRate: 0,
-        receivableDate: '',
-        specialBillType: '正常',
-        lateFeeStartDays: 0,
-        lateFeeRate: 0,
-        lateFeeLimit: 0,
+        pybDt: '',
+        specialBillType: '1',
+        ovdueStartDays: 0,
+        ovdueIntRate: 0,
+        ovdueLimitRate: 0,
         companyId: '',
-        companyName: '',
+        corNm: '',
         accountId: '',
         billRemark: '',
-        roomInfoList: []
+        roomIds: []
       }
       
       // 重置扩展表单数据
@@ -738,7 +861,62 @@ export default {
       
       // 重置文件上传列表
       this.fileList = []
-    }
+    },
+    // 表单提交
+    submitForm() {
+      this.validateForm().then(valid => {
+        if (valid) {
+          const formData = this.getFormData()
+          
+          this.loading = true
+          addBill(formData)
+            .then(response => {
+              if (response.code === '0000000000000000') {
+                this.$message.success('添加账单成功')
+                
+                // 如果有附件，上传附件
+                if (this.fileList.length > 0) {
+                  
+                  this.uploadAttachments(response.data)
+                } else {
+                  this.$emit('success')
+                  this.resetForm()
+                }
+              } else {
+                this.$message.error(response.message || '添加账单失败')
+                this.loading = false
+              }
+            })
+            .catch(error => {
+              console.error('添加账单失败', error)
+              this.$message.error('添加账单失败，请检查表单数据')
+              this.loading = false
+            })
+        }
+      })
+    },
+    
+    // 上传附件
+    uploadAttachments(billId) {
+      const uploadPromises = this.fileList.map(fileItem => {
+        return uploadBillAttachment(billId, fileItem.file)
+      })
+      
+      Promise.all(uploadPromises)
+        .then(() => {
+          this.$message.success('附件上传成功')
+          this.$emit('success')
+          this.resetForm()
+          this.loading = false
+        })
+        .catch(error => {
+          console.error('附件上传失败', error)
+          this.$message.warning('账单创建成功，但部分附件上传失败')
+          this.$emit('success')
+          this.resetForm()
+          this.loading = false
+        })
+    },
   }
 }
 </script>
@@ -755,4 +933,45 @@ export default {
     color: #F56C6C;
   }
 }
+
+.preview-container {
+  min-height: 500px;
+  max-height: 700px;
+  overflow: auto;
+  
+  .preview-iframe {
+    width: 100%;
+    height: 500px;
+    border: none;
+  }
+  
+  .preview-image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 300px;
+  }
+  
+  .preview-error {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 300px;
+    color: #909399;
+    
+    i {
+      font-size: 48px;
+      margin-bottom: 20px;
+    }
+    
+    p {
+      font-size: 16px;
+    }
+    
+    .preview-actions {
+      margin-top: 20px;
+    }
+  }
+}
 </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
index cc56d22..06b5ee4 100644
--- a/pc/src/views/finance/billList/components/BillDetail.vue
+++ b/pc/src/views/finance/billList/components/BillDetail.vue
@@ -2,22 +2,35 @@
   <div class="bill-detail-container">
     <el-tabs v-model="activeTab">
       <el-tab-pane label="账单基本信息" name="basicInfo">
+        <div class="bill-header">
+          <div class="bill-header-left">
+            <h3>账单信息</h3>
+          </div>
+          <div class="bill-header-right">
+            <el-button 
+              type="primary" 
+              @click="openPaymentDialog" 
+              :disabled="!canPayBill">
+              账单支付
+            </el-button>
+          </div>
+        </div>
         <el-descriptions :column="3" border size="medium">
-          <el-descriptions-item label="账单编号">{{ billDetail.billNumber }}</el-descriptions-item>
+          <el-descriptions-item label="账单编号">{{ billDetail.totBillNo }}</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.paysdName }}</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.feTpName }}</el-descriptions-item>
           <el-descriptions-item label="计费周期">
-            {{ billDetail.billingStartDate }} 至 {{ billDetail.billingEndDate }}
+            {{ billDetail.chggBgnDt }} 至 {{ billDetail.chggEndDt }}
           </el-descriptions-item>
-          <el-descriptions-item label="应收日期">{{ billDetail.receivableDate }}</el-descriptions-item>
+          <el-descriptions-item label="应收日期">{{ billDetail.pybDt }}</el-descriptions-item>
           <el-descriptions-item label="结清状态">
             <el-tag :type="getClearStatusType(billDetail.clearStatus)">
               {{ getClearStatusName(billDetail.clearStatus) }}
@@ -29,18 +42,18 @@
             </el-tag>
           </el-descriptions-item>
           <el-descriptions-item label="滞纳金状态">
-            <el-tag :type="getLateFeeStatusType(billDetail.lateFeeStatus)">
-              {{ getLateFeeStatusName(billDetail.lateFeeStatus) }}
+            <el-tag :type="getLateFeeStatusType(billDetail.ovdueStatus)">
+              {{ getLateFeeStatusName(billDetail.ovdueStatus) }}
             </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.accblAmt) }}</el-descriptions-item>
+          <el-descriptions-item label="应收金额">{{ formatAmount(billDetail.accigRcvAmt) }}</el-descriptions-item>
+          <el-descriptions-item label="实收金额">{{ formatAmount(billDetail.atmRecvAmt) }}</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="调整金额">{{ formatAmount(billDetail.adjAmt) }}</el-descriptions-item>
+          <el-descriptions-item label="应收滞纳金">{{ formatAmount(billDetail.receivableOvdueAmt) }}</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="税额">{{ formatAmount(billDetail.paybleTaxAmount) }}</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="开据状态">
@@ -48,13 +61,121 @@
               {{ billDetail.receiptStatus === '1' ? '已开据' : '未开据' }}
             </el-tag>
           </el-descriptions-item>
-          <el-descriptions-item label="所属公司">{{ billDetail.companyName }}</el-descriptions-item>
+          <el-descriptions-item label="所属公司">{{ billDetail.corNm }}</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="billDetails">
+        <el-table :data="billDetailsList" border style="width: 100%">
+          <el-table-column prop="feeTypeName" label="费用类型" min-width="120" show-overflow-tooltip></el-table-column>
+          <el-table-column label="应收金额" min-width="120" align="right">
+            <template slot-scope="scope">
+              {{ formatAmount(scope.row.receivableAmount) }}
+            </template>
+          </el-table-column>
+          <el-table-column label="税率" min-width="80" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.taxRate }}%
+            </template>
+          </el-table-column>
+          <el-table-column label="税额" min-width="120" align="right">
+            <template slot-scope="scope">
+              {{ formatAmount(scope.row.taxAmount) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="startDate" label="开始日期" min-width="120" align="center"></el-table-column>
+          <el-table-column prop="endDate" label="结束日期" min-width="120" align="center"></el-table-column>
+          <el-table-column prop="remark" label="账单备注" min-width="200" show-overflow-tooltip></el-table-column>
+          <el-table-column label="操作" width="120" align="center" fixed="right">
+            <template slot-scope="scope">
+              <el-button 
+                size="mini" 
+                type="text" 
+                @click="handleAdjustment(scope.row)" 
+                :disabled="!canAdjustBill">
+                调整
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div v-if="billDetailsList.length === 0" class="empty-data">
+          <el-empty description="暂无账单明细"></el-empty>
+        </div>
+      </el-tab-pane>
+      
+      <el-tab-pane label="账单调整" name="billAdjustment">
+        <div class="bill-adjustment-container">
+          <div class="adjustment-list">
+            <el-table :data="adjustmentList" border style="width: 100%; margin-top: 15px">
+              <el-table-column prop="adjTpCd" label="调整类型" min-width="100">
+                <template slot-scope="scope">
+                  {{ scope.row.adjTpCd === '1' ? '调增' : '调减' }}
+                </template>
+              </el-table-column>
+              <el-table-column prop="adjDate" label="调整日期" min-width="120" align="center"></el-table-column>
+              <el-table-column prop="adjMethod" label="调整方式" min-width="120">
+                <template slot-scope="scope">
+                  {{ scope.row.adjMethod === '1' ? '按金额调整' : '按比例调整' }}
+                </template>
+              </el-table-column>
+              <el-table-column label="调整金额" min-width="120" align="right">
+                <template slot-scope="scope">
+                  {{ formatAmount(scope.row.adjAmt) }}
+                </template>
+              </el-table-column>
+              <el-table-column label="调整比例" min-width="100" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.adjRate ? scope.row.adjRate + '%' : '-' }}
+                </template>
+              </el-table-column>
+              <el-table-column prop="adjStatus" label="调整状态" min-width="100">
+                <template slot-scope="scope">
+                  <el-tag :type="scope.row.adjStatus === '1' ? 'success' : 'info'">
+                    {{ scope.row.adjStatus === '1' ? '正常' : '作废' }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column prop="billDetailType" label="账单明细类型" min-width="120">
+                <template slot-scope="scope">
+                  {{ scope.row.billDetailType === '1' ? '滞纳金' : '原账单' }}
+                </template>
+              </el-table-column>
+              <el-table-column prop="adjSource" label="调整来源" min-width="120">
+                <template slot-scope="scope">
+                  {{ scope.row.adjSource === '1' ? '账单直接调整' : '合同调整' }}
+                </template>
+              </el-table-column>
+              <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip></el-table-column>
+              <el-table-column prop="createTime" label="创建时间" min-width="150" align="center"></el-table-column>
+              <el-table-column label="操作" width="120" align="center" fixed="right">
+                <template slot-scope="scope">
+                  <el-button size="mini" type="text" @click="viewAdjustmentDetail(scope.row)" v-if="scope.row.adjStatus === '1'">附件详情</el-button>
+                  <el-button size="mini" type="text" class="delete-btn" @click="voidAdjustment(scope.row)" v-if="scope.row.adjStatus === '1'">作废</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div v-if="adjustmentList.length === 0" class="empty-data">
+              <el-empty description="暂无账单调整记录"></el-empty>
+            </div>
+            <div class="pagination-container" v-if="adjustmentList.length > 0">
+              <el-pagination
+                background
+                @size-change="handleAdjustmentSizeChange"
+                @current-change="handleAdjustmentCurrentChange"
+                :current-page="adjustmentQuery.pageNum"
+                :page-sizes="[5, 10, 20, 50]"
+                :page-size="adjustmentQuery.pageSize"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="adjustmentTotal">
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+      </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>
@@ -69,7 +190,19 @@
       </el-tab-pane>
       
       <el-tab-pane label="附件信息" name="attachment">
-        <el-table :data="attachmentList" border style="width: 100%">
+        <div class="attachment-header">
+          <el-upload
+            class="upload-area"
+            action="#"
+            :http-request="uploadFile"
+            :before-upload="beforeFileUpload"
+            multiple
+            :limit="10">
+            <el-button type="primary" icon="el-icon-plus">添加附件</el-button>
+            <div slot="tip" class="el-upload__tip">只能上传jpg/png/pdf文件，且不超过5MB</div>
+          </el-upload>
+        </div>
+        <el-table :data="attachmentList" border style="width: 100%; margin-top: 15px">
           <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>
@@ -77,6 +210,7 @@
             <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.row)">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -87,21 +221,289 @@
       
       <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-column prop="oprContent" label="操作内容" min-width="300" show-overflow-tooltip></el-table-column>
+          <el-table-column prop="oprPersonNm" label="操作人" width="150"></el-table-column>
+          <el-table-column prop="oprTime" label="操作时间" width="180"></el-table-column>
         </el-table>
         <div v-if="operationList.length === 0" class="empty-data">
           <el-empty description="暂无操作记录"></el-empty>
         </div>
+        <div class="pagination-container" v-if="operationTotal > 0">
+          <el-pagination
+            background
+            @size-change="handleOperationSizeChange"
+            @current-change="handleOperationCurrentChange"
+            :current-page="operationQuery.pageNum"
+            :page-sizes="[5, 10, 20, 50]"
+            :page-size="operationQuery.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="operationTotal">
+          </el-pagination>
+        </div>
       </el-tab-pane>
     </el-tabs>
+
+    <!-- 文件预览对话框 -->
+    <el-dialog title="附件预览" :visible.sync="previewDialogVisible" width="800px" append-to-body>
+      <div class="preview-container" v-loading="previewLoading">
+        <div v-if="previewUrl && isPdf" class="preview-iframe">
+          <iframe :src="previewUrl" width="100%" height="500px" frameborder="0"></iframe>
+        </div>
+        <div v-else-if="previewUrl && isImage" class="preview-image">
+          <img :src="previewUrl" style="max-width: 100%;" />
+        </div>
+        <div v-else-if="!previewLoading" class="preview-error">
+          <i class="el-icon-warning"></i>
+          <p>预览加载失败，请尝试下载后查看</p>
+          <div class="preview-actions">
+            <el-button type="primary" @click="downloadCurrentPreview">下载文件</el-button>
+          </div>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="previewDialogVisible = false">关 闭</el-button>
+      </div>
+    </el-dialog>
+    
+    <!-- 账单调整对话框 -->
+    <el-dialog title="账单调整" :visible.sync="adjustmentDialogVisible" width="700px" append-to-body @close="resetAdjustmentForm">
+      <el-form ref="adjustmentForm" :model="adjustmentForm" :rules="adjustmentRules" label-width="120px">
+        <el-form-item label="调整类型" prop="adjTpCd" required>
+          <el-radio-group v-model="adjustmentForm.adjTpCd">
+            <el-radio label="1">调增</el-radio>
+            <el-radio label="2">调减</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        
+        <el-form-item label="调整日期" prop="adjDate" required>
+          <el-date-picker
+            v-model="adjustmentForm.adjDate"
+            type="date"
+            placeholder="选择日期"
+            value-format="yyyy-MM-dd"
+            style="width: 220px">
+          </el-date-picker>
+        </el-form-item>
+        
+        <el-form-item label="调整方式" prop="adjMethod" required>
+          <el-radio-group v-model="adjustmentForm.adjMethod" @change="handleAdjMethodChange">
+            <el-radio label="1">按金额调整</el-radio>
+            <el-radio label="2">按比例调整</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        
+        <el-form-item label="调整金额" prop="adjAmt" required v-if="adjustmentForm.adjMethod == '1'">
+          <el-input-number 
+            v-model="adjustmentForm.adjAmt" 
+            :min="0" 
+            :precision="2" 
+            :max="adjustmentForm.adjTpCd === '2' ? billDetail.accigRcvAmt : undefined"
+            @change="calculateAdjustAmount"
+            style="width: 220px">
+          </el-input-number>
+          <span class="form-hint">调整后金额: {{ formatAmount(adjustedAmount) }}</span>
+        </el-form-item>
+        
+        <el-form-item label="调整比例(%)" prop="adjRate" required v-if="adjustmentForm.adjMethod == '2'">
+          <el-input-number 
+            v-model="adjustmentForm.adjRate" 
+            :min="0" 
+            :max="adjustmentForm.adjTpCd === '2' ? 100 : undefined" 
+            :precision="2"
+            @change="calculateAdjustAmount"
+            style="width: 220px">
+          </el-input-number>
+          <span class="form-hint">调整后金额: {{ formatAmount(adjustedAmount) }}</span>
+        </el-form-item>
+        
+        <el-form-item label="备注" prop="remark">
+          <el-input
+            type="textarea"
+            v-model="adjustmentForm.remark"
+            placeholder="请输入调整原因或其他备注信息"
+            :rows="3"
+            style="width: 400px">
+          </el-input>
+        </el-form-item>
+        
+        <el-form-item label="附件">
+          <el-upload
+            class="upload-area"
+            action="#"
+            :http-request="uploadAdjustmentAttachment"
+            :file-list="adjustmentFileList"
+            :before-upload="beforeAdjustmentUpload"
+            multiple
+            :limit="10">
+            <el-button size="small" type="primary">添加附件</el-button>
+            <div slot="tip" class="el-upload__tip">只能上传jpg/png/pdf文件，且不超过5MB</div>
+          </el-upload>
+          
+          <el-table v-if="adjustmentFileList.length > 0" :data="adjustmentFileList" border style="width: 100%; margin-top: 15px">
+            <el-table-column prop="name" label="文件名" min-width="200" show-overflow-tooltip></el-table-column>
+            <el-table-column label="操作" width="150" align="center">
+              <template slot-scope="scope">
+                <el-button size="mini" type="text" @click="previewAdjustmentFile(scope.row)">预览</el-button>
+                <el-button size="mini" type="text" class="delete-btn" @click="deleteAdjustmentFile(scope.$index)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="adjustmentDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitAdjustment" :loading="adjustmentSubmitting">确 定</el-button>
+      </div>
+    </el-dialog>
+    
+    <!-- 账单调整附件详情弹窗 -->
+    <el-dialog title="账单调整附件详情" :visible.sync="adjustmentAttachmentDialogVisible" width="800px" append-to-body>
+      <el-table :data="adjustmentAttachmentList" border style="width: 100%">
+        <el-table-column prop="fileName" label="文件名" min-width="200" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="createUserId" label="操作人" width="150"></el-table-column>
+        <el-table-column prop="createTime" 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="deleteAdjustmentAttachment(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div v-if="adjustmentAttachmentList.length === 0" class="empty-data">
+        <el-empty description="暂无附件信息"></el-empty>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="adjustmentAttachmentDialogVisible = false">关 闭</el-button>
+      </div>
+    </el-dialog>
+    
+    <!-- 账单支付对话框 -->
+    <el-dialog title="账单支付" :visible.sync="paymentDialogVisible" width="800px" append-to-body @close="resetPaymentForm">
+      <el-form ref="paymentForm" :model="paymentForm" :rules="paymentRules" label-width="120px" class="payment-form">
+        <!-- 第一部分：结清状态 -->
+        <div class="payment-section">
+          <h4>账单状态</h4>
+          <el-descriptions :column="1" border size="medium">
+            <el-descriptions-item label="结清状态">
+              <el-tag :type="getClearStatusType(billDetail.clearStatus)">
+                {{ getClearStatusName(billDetail.clearStatus) }}
+              </el-tag>
+            </el-descriptions-item>
+          </el-descriptions>
+        </div>
+        
+        <!-- 第二部分：可编辑费用列表 -->
+        <div class="payment-section">
+          <h4>费用信息</h4>
+          <el-descriptions :column="2" border size="medium">
+            <el-descriptions-item label="费用类型">{{ billDetail.feTpName }}</el-descriptions-item>
+            <el-descriptions-item label="应收金额">{{ formatAmount(billDetail.accigRcvAmt) }}</el-descriptions-item>
+            <el-descriptions-item label="实收金额">{{ formatAmount(billDetail.atmRecvAmt) }}</el-descriptions-item>
+            <el-descriptions-item label="需收金额">{{ formatAmount(billDetail.needAmount) }}</el-descriptions-item>
+          </el-descriptions>
+          
+          <el-form-item style="margin-top: 20px;" label="本次收款" prop="occuAmt" required>
+            <div class="amount-input-wrapper">
+              <el-input-number 
+                v-model="paymentForm.occuAmt" 
+                :min="0.01" 
+                :max="billDetail.needAmount || 0" 
+                :precision="2"
+                :step="0.01"
+                @change="calculateRemainingAmount"
+                style="width: 300px;margin-right: 10px;">
+              </el-input-number>
+              <el-button size="small" type="primary" @click="fillFullAmount" class="fill-btn">收完</el-button>
+            </div>
+          </el-form-item>
+          
+          <el-form-item label="剩余待收">
+            <span>{{ formatAmount(remainingAmount) }}</span>
+          </el-form-item>
+          
+          <el-form-item label="入账时间" prop="inaccDate" required>
+            <el-date-picker
+              v-model="paymentForm.inaccDate"
+              type="date"
+              placeholder="选择日期"
+              value-format="yyyy-MM-dd"
+              style="width: 300px">
+            </el-date-picker>
+          </el-form-item>
+        </div>
+        
+        <!-- 第三部分：支付方式 -->
+        <div class="payment-section">
+          <h4>支付方式</h4>
+          <el-form-item label="支付方式" prop="payModeName" required>
+            <el-select v-model="paymentForm.payModeName" placeholder="请选择支付方式" style="width: 300px">
+              <el-option
+                v-for="item in paymentMethods"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          
+          <el-form-item label="凭证号">
+            <el-input v-model="paymentForm.txVchrNo" placeholder="请输入凭证号" style="width: 300px"></el-input>
+          </el-form-item>
+          
+          <el-form-item label="摘要">
+            <el-input v-model="paymentForm.summ" placeholder="请输入摘要" style="width: 300px"></el-input>
+          </el-form-item>
+          
+          <el-form-item label="备注">
+            <el-input 
+              type="textarea" 
+              v-model="paymentForm.remark" 
+              placeholder="请输入备注信息" 
+              :rows="3"
+              style="width: 300px">
+            </el-input>
+          </el-form-item>
+        </div>
+        
+        <!-- 第四部分：附件信息 -->
+        <div class="payment-section">
+          <h4>附件信息</h4>
+          <div class="upload-wrapper">
+            <el-upload
+              class="upload-area"
+              action="#"
+              :http-request="uploadPaymentAttachment"
+              :file-list="paymentFileList"
+              :before-upload="beforePaymentUpload"
+              multiple
+              :limit="10">
+              <el-button size="small" type="primary">添加附件</el-button>
+              <div slot="tip" class="el-upload__tip">只能上传jpg/png/pdf文件，且不超过5MB</div>
+            </el-upload>
+          </div>
+          
+          <el-table v-if="paymentFileList.length > 0" :data="paymentFileList" border style="width: 100%; margin-top: 15px">
+            <el-table-column prop="name" label="文件名" min-width="200" show-overflow-tooltip></el-table-column>
+            <el-table-column label="操作" width="150" align="center">
+              <template slot-scope="scope">
+                <el-button size="mini" type="text" @click="previewPaymentFile(scope.row)">预览</el-button>
+                <el-button size="mini" type="text" class="delete-btn" @click="deletePaymentFile(scope.$index)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="paymentDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitPayment" :loading="paymentSubmitting">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getBillDetail, getBillAttachmentList } from '@/api/finance'
+import { getBillDetail, getBillAttachmentList, deleteBillAttachment, getBillAdjustmentList, addBillAdjustment, voidBillAdjustment, uploadBillAdjustmentAttachment, uploadBillAttachment, getBillAdjustmentAttachmentList, deleteBillAdjustmentAttachment, getBillOperationRecords, submitBillPayment, uploadBillPaymentAttachment, deleteBillPaymentAttachment } from '@/api/finance'
 
 export default {
   name: 'BillDetail',
@@ -116,14 +518,132 @@ export default {
       activeTab: 'basicInfo',
       loading: false,
       billDetail: {},
+      billDetailsList: [],
       roomList: [],
       attachmentList: [],
-      operationList: []
+      operationList: [],
+      
+      // 账单调整相关
+      adjustmentList: [],
+      adjustmentTotal: 0,
+      adjustmentQuery: {
+        pageNum: 1,
+        pageSize: 10,
+        billId: ''
+      },
+      adjustmentLoading: false,
+      adjustmentDialogVisible: false,
+      adjustmentSubmitting: false,
+      adjustedAmount: 0,
+      adjustmentForm: {
+        billId: '',
+        billDetailId: '',
+        adjTpCd: '1', // 默认调增
+        adjDate: new Date().toISOString().slice(0, 10), // 默认今天
+        adjMethod: '1', // 默认按金额调整
+        adjAmt: 0,
+        adjRate: 0,
+        billDetailType: '原账单',
+        adjSource: '账单直接调整',
+        projectId: '',
+        remark: '',
+        adjSource: '1' // 默认 账单直接调整
+      },
+      adjustmentRules: {
+        adjTpCd: [
+          { required: true, message: '请选择调整类型', trigger: 'change' }
+        ],
+        adjDate: [
+          { required: true, message: '请选择调整日期', trigger: 'change' }
+        ],
+        adjMethod: [
+          { required: true, message: '请选择调整方式', trigger: 'change' }
+        ],
+        adjAmt: [
+          { required: true, message: '请输入调整金额', trigger: 'blur' }
+        ],
+        adjRate: [
+          { required: true, message: '请输入调整比例', trigger: 'blur' }
+        ]
+      },
+      adjustmentFileList: [],
+      
+      // 预览相关
+      previewDialogVisible: false,
+      previewLoading: false,
+      previewUrl: '',
+      previewBlob: null,
+      currentPreviewName: '',
+      isPdf: false,
+      isImage: false,
+      
+      // 调整附件相关
+      adjustmentAttachmentDialogVisible: false,
+      adjustmentAttachmentList: [],
+      currentAdjustmentId: '',
+      
+      // 操作记录相关
+      operationTotal: 0,
+      operationQuery: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      
+      // 支付相关
+      paymentDialogVisible: false,
+      paymentSubmitting: false,
+      paymentForm: {
+        billId: '',
+        billDetailId: '',
+        occuAmt: 0,
+        inaccDate: new Date().toISOString().slice(0, 10),
+        payModeName: '1',
+        txVchrNo: '',
+        summ: '',
+        remark: ''
+      },
+      paymentRules: {
+        occuAmt: [
+          { required: true, message: '请输入本次收款金额', trigger: 'blur' }
+        ],
+        inaccDate: [
+          { required: true, message: '请选择入账时间', trigger: 'change' }
+        ],
+        payModeName: [
+          { required: true, message: '请选择支付方式', trigger: 'change' }
+        ]
+      },
+      paymentFileList: [],
+      paymentMethods: [
+        { value: '1', label: '现金' },
+        { value: '2', label: '网银转账' },
+        { value: '3', label: 'POS机' },
+        { value: '4', label: '支付宝' },
+        { value: '5', label: '微信' },
+        { value: '6', label: '转账支票' },
+        { value: '7', label: '其他方式' },
+        { value: '8', label: '线上支付' }
+      ],
+      remainingAmount: 0, // 剩余待收金额
     }
   },
   created() {
     this.getBillData()
   },
+  computed: {
+    // 判断是否可以调整账单
+    canAdjustBill() {
+      if (!this.billDetail) return false
+      // 账单状态为开启且不在支付中
+      return this.billDetail.billStatus === '1' && this.billDetail.clearStatus !== '6'
+    },
+    // 判断是否可以支付账单
+    canPayBill() {
+      if (!this.billDetail) return false
+      // 账单不能是已结清，且不能在支付中
+      return this.billDetail.clearStatus !== '1' && this.billDetail.clearStatus !== '6'
+    }
+  },
   methods: {
     // 获取账单数据
     getBillData() {
@@ -133,6 +653,14 @@ export default {
       getBillDetail(this.billId).then(response => {
         this.billDetail = response.data || {}
         
+        // 处理账单明细
+        this.processBillDetails()
+        
+        // 设置调整查询参数的账单ID
+        this.adjustmentQuery.billId = this.billId
+        // 获取账单调整记录
+        this.getAdjustmentList()
+        
         // 模拟房源信息数据，实际应从接口获取或者账单详情中提取
         this.roomList = [
           {
@@ -151,19 +679,50 @@ export default {
       })
       
       // 获取附件列表
-      getBillAttachmentList(this.billId).then(response => {
-        this.attachmentList = response.data || []
-      })
+      this.getAttachmentList()
       
-      // 模拟操作记录数据，实际应从接口获取
-      this.operationList = [
-        {
-          operationType: '创建账单',
-          operatorName: '系统管理员',
-          operateTime: '2023-06-20 10:30:00',
-          remark: '创建新账单'
-        }
-      ]
+      // 获取操作记录
+      this.getOperationList()
+    },
+    // 处理账单明细数据
+    processBillDetails() {
+      this.billDetailsList = []
+      
+      // 添加原始账单明细
+      if (this.billDetail) {
+        this.billDetailsList.push({
+          feeTypeName: this.billDetail.feTpName || '-',
+          receivableAmount: this.billDetail.accigRcvAmt,
+          taxRate: this.billDetail.taxRate || 0,
+          taxAmount: this.billDetail.paybleTaxAmount || 0,
+          startDate: this.billDetail.chggBgnDt || '-',
+          endDate: this.billDetail.chggEndDt || '-',
+          remark: this.billDetail.billRemark || '-',
+          billDetailType: '0' // 原账单类型
+        })
+      }
+      
+      // 添加滞纳金明细（如果存在）
+      if (this.billDetail.ovdueStatus === '1' && this.billDetail.receivableOvdueAmt > 0) {
+        this.billDetailsList.push({
+          feeTypeName: '滞纳金',
+          receivableAmount: this.billDetail.receivableOvdueAmt || 0,
+          taxRate: 0,
+          taxAmount: 0,
+          startDate: this.billDetail.pybDt || '-', // 滞纳金产生日期，使用应收日期
+          endDate: this.formatDate(new Date()) || '-', // 滞纳金产生的结束日期，使用当前日期
+          remark: '滞纳金',
+          billDetailType: '1' // 滞纳金类型
+        })
+      }
+    },
+    // 格式化日期
+    formatDate(date) {
+      if (!(date instanceof Date)) return '';
+      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}`;
     },
     // 格式化金额
     formatAmount(amount) {
@@ -229,8 +788,65 @@ export default {
     },
     // 预览文件
     previewFile(file) {
-      window.open(file.storePath)
+      this.previewLoading = true
+      this.previewDialogVisible = true
+      this.currentPreviewName = file.fileName || '附件'
+      this.previewUrl = ''
+      this.isPdf = false
+      this.isImage = false
+      
+      // 根据文件名后缀判断文件类型
+      const fileExt = file.fileName ? file.fileName.split('.').pop().toLowerCase() : ''
+      
+      try {
+        // 创建blob对象 - 实际项目中应该调用预览API获取文件数据
+        fetch(file.storePath)
+          .then(response => response.blob())
+          .then(blob => {
+            this.previewBlob = blob
+            
+            // 判断文件类型
+            if (fileExt === 'pdf') {
+              this.isPdf = true
+              this.isImage = false
+            } else if (['jpg', 'jpeg', 'png', 'gif'].includes(fileExt)) {
+              this.isPdf = false
+              this.isImage = true
+            }
+            
+            // 创建URL用于预览
+            this.previewUrl = URL.createObjectURL(blob)
+            this.previewLoading = false
+          })
+          .catch(error => {
+            console.error('预览失败', error)
+            this.$message.error('获取预览数据失败')
+            this.previewLoading = false
+          })
+      } catch (error) {
+        console.error('预览失败', error)
+        this.$message.error('获取预览数据失败')
+        this.previewLoading = false
+      }
     },
+    
+    // 下载当前预览的文件
+    downloadCurrentPreview() {
+      if (!this.previewBlob) {
+        this.$message.error('没有可下载的文件')
+        return
+      }
+      
+      const url = URL.createObjectURL(this.previewBlob)
+      const link = document.createElement('a')
+      link.href = url
+      link.setAttribute('download', this.currentPreviewName)
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+      URL.revokeObjectURL(url)
+    },
+    
     // 下载文件
     downloadFile(file) {
       // 实际应调用API下载
@@ -238,19 +854,729 @@ export default {
       link.href = file.storePath
       link.download = file.fileName
       link.click()
+    },
+    
+    // 删除附件
+    deleteFile(file) {
+      this.$confirm('确认删除该附件?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteBillAttachment(file.id).then(response => {
+          if (response.code === '0000000000000000') {
+            this.$message.success('删除成功')
+            // 重新获取附件列表
+            this.getAttachmentList()
+          } else {
+            this.$message.error(response.message || '删除失败')
+          }
+        }).catch(() => {
+          this.$message.error('删除失败')
+        })
+      }).catch(() => {})
+    },
+    
+    // 获取附件列表
+    getAttachmentList() {
+      getBillAttachmentList(this.billId).then(response => {
+        this.attachmentList = response.data || []
+      })
+    },
+    // 获取账单调整记录
+    getAdjustmentList() {
+      this.adjustmentLoading = true
+      getBillAdjustmentList({
+        ...this.adjustmentQuery,
+        billId: this.billId
+      }).then(response => {
+        if (response.code === '0000000000000000') {
+          this.adjustmentList = response.data.list || []
+          this.adjustmentTotal = response.data.total || 0
+        } else {
+          this.$message.error(response.message || '获取账单调整记录失败')
+          this.adjustmentList = []
+          this.adjustmentTotal = 0
+        }
+        this.adjustmentLoading = false
+      }).catch(() => {
+        this.adjustmentList = []
+        this.adjustmentTotal = 0
+        this.adjustmentLoading = false
+      })
+    },
+    // 账单调整分页大小变化
+    handleAdjustmentSizeChange(val) {
+      this.adjustmentQuery.pageSize = val
+      this.getAdjustmentList()
+    },
+    // 账单调整页码变化
+    handleAdjustmentCurrentChange(val) {
+      this.adjustmentQuery.pageNum = val
+      this.getAdjustmentList()
+    },
+    // 查看账单调整详情
+    viewAdjustmentDetail(row) {
+      this.adjustmentAttachmentDialogVisible = true
+      this.adjustmentAttachmentList = []
+      this.currentAdjustmentId = row.id
+      this.getAdjustmentAttachmentList()
+    },
+    // 进行账单调整
+    handleAdjustment(row = null) {
+      this.adjustmentDialogVisible = true
+      this.adjustmentForm.billId = this.billId
+      this.adjustmentForm.billDetailId = this.billDetail.billDetails && this.billDetail.billDetails.length > 0 
+        ? this.billDetail.billDetails[0].id 
+        : ''
+      this.adjustmentForm.projectId = this.billDetail.projectId || ''
+      
+      // 设置账单明细类型
+      if (row && row.billDetailType) {
+        this.adjustmentForm.billDetailType = row.billDetailType
+      } else {
+        this.adjustmentForm.billDetailType = '0' // 默认原账单
+      }
+      
+      // 预设调整金额为0，方便用户输入
+      this.adjustmentForm.adjAmt = 0
+      this.adjustmentForm.adjRate = 0
+      this.calculateAdjustAmount()
+    },
+    // 调整方式变更
+    handleAdjMethodChange() {
+      // 重新计算调整后金额
+      this.calculateAdjustAmount()
+    },
+    // 计算调整后金额
+    calculateAdjustAmount() {
+      const originalAmount = parseFloat(this.billDetail.accigRcvAmt || 0)
+      let adjustmentValue = 0
+      
+      if (this.adjustmentForm.adjMethod === '1') {
+        adjustmentValue = parseFloat(this.adjustmentForm.adjAmt || 0)
+      } else if (this.adjustmentForm.adjMethod === '2') {
+        // 按比例计算调整金额
+        adjustmentValue = originalAmount * parseFloat(this.adjustmentForm.adjRate || 0) / 100
+      }
+      
+      // 根据调整类型计算最终金额
+      if (this.adjustmentForm.adjTpCd === '1') { // 调增
+        this.adjustedAmount = originalAmount + adjustmentValue
+      } else { // 调减
+        this.adjustedAmount = Math.max(0, originalAmount - adjustmentValue)
+      }
+    },
+    // 上传附件前检查
+    beforeAdjustmentUpload(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
+    },
+    // 上传调整附件
+    uploadAdjustmentAttachment(options) {
+      const file = options.file
+      
+      // 创建临时URL供预览
+      const tempUrl = URL.createObjectURL(file)
+      
+      // 向上传列表中添加文件
+      this.adjustmentFileList.push({
+        name: file.name,
+        file: file,
+        url: tempUrl,
+        status: 'ready'
+      })
+    },
+    // 预览调整附件
+    previewAdjustmentFile(file) {
+      this.previewLoading = true
+      this.previewDialogVisible = true
+      this.currentPreviewName = file.name || '附件'
+      this.previewUrl = ''
+      this.isPdf = false
+      this.isImage = false
+      
+      // 根据文件名后缀判断文件类型
+      const fileExt = file.name ? file.name.split('.').pop().toLowerCase() : ''
+      
+      try {
+        // 获取文件内容
+        const blob = file.file ? file.file : new Blob()
+        this.previewBlob = blob
+        
+        // 设置文件类型标志
+        if (fileExt === 'pdf') {
+          this.isPdf = true
+        } else if (['jpg', 'jpeg', 'png', 'gif'].includes(fileExt)) {
+          this.isImage = true
+        }
+        
+        // 创建URL用于预览
+        this.previewUrl = file.url
+        this.previewLoading = false
+      } catch (error) {
+        console.error('预览失败', error)
+        this.$message.error('获取预览数据失败')
+        this.previewLoading = false
+      }
+    },
+    // 删除调整附件
+    deleteAdjustmentFile(index) {
+      this.adjustmentFileList.splice(index, 1)
+    },
+    // 重置调整表单
+    resetAdjustmentForm() {
+      if (this.$refs.adjustmentForm) {
+        this.$refs.adjustmentForm.resetFields()
+      }
+      this.adjustmentFileList = []
+      this.adjustedAmount = 0
+      this.adjustmentForm = {
+        billId: '',
+        billDetailId: '',
+        adjTpCd: '1',
+        adjDate: new Date().toISOString().slice(0, 10),
+        adjMethod: '1',
+        adjAmt: 0,
+        adjRate: 0,
+        billDetailType: '原账单',
+        adjSource: '账单直接调整',
+        projectId: '',
+        remark: '',
+        adjSource: '1'
+      }
+    },
+    // 提交账单调整
+    submitAdjustment() {
+      this.$refs.adjustmentForm.validate(valid => {
+        if (valid) {
+          this.adjustmentSubmitting = true
+          
+          // 构建请求数据
+          const adjustmentData = { ...this.adjustmentForm }
+          
+          // 如果是比例调整，需要计算实际调整金额
+          if (adjustmentData.adjMethod === '2') {
+            const originalAmount = parseFloat(this.billDetail.accigRcvAmt || 0)
+            adjustmentData.adjAmt = originalAmount * parseFloat(adjustmentData.adjRate || 0) / 100
+          }
+          
+          // 提交调整
+          addBillAdjustment(adjustmentData)
+            .then(response => {
+              if (response.code === '0000000000000000') {
+                // 上传附件
+                if (this.adjustmentFileList.length > 0) {
+                  this.uploadAdjustmentAttachments(response.data)
+                } else {
+                  this.$message.success('账单调整成功')
+                  this.adjustmentDialogVisible = false
+                  // 重新获取账单信息和调整记录
+                  this.getBillData()
+                  this.adjustmentSubmitting = false
+                }
+              } else {
+                this.$message.error(response.message || '账单调整失败')
+                this.adjustmentSubmitting = false
+              }
+            })
+            .catch(error => {
+              console.error('账单调整失败', error)
+              this.$message.error('账单调整失败，请稍后重试')
+              this.adjustmentSubmitting = false
+            })
+        }
+      })
+    },
+    // 上传调整附件
+    uploadAdjustmentAttachments(adjustmentId) {
+      const uploadPromises = this.adjustmentFileList.map(fileItem => {
+        return uploadBillAdjustmentAttachment(adjustmentId, fileItem.file)
+      })
+      
+      Promise.all(uploadPromises)
+        .then(() => {
+          this.$message.success('账单调整成功')
+          this.adjustmentDialogVisible = false
+          // 重新获取账单信息和调整记录
+          this.getBillData()
+          this.adjustmentSubmitting = false
+        })
+        .catch(error => {
+          console.error('附件上传失败', error)
+          this.$message.warning('账单调整成功，但部分附件上传失败')
+          this.adjustmentDialogVisible = false
+          // 重新获取账单信息和调整记录
+          this.getBillData()
+          this.adjustmentSubmitting = false
+        })
+    },
+    // 作废调整记录
+    voidAdjustment(row) {
+      this.$confirm('确定要作废此账单调整吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        voidBillAdjustment({
+          adjustmentId: row.id,
+          canceledDate: new Date().toISOString().slice(0, 10),
+          remark: '用户手动作废'
+        }).then(response => {
+          if (response.code === '0000000000000000') {
+            this.$message.success('作废成功')
+            // 重新获取账单信息和调整记录
+            this.getBillData()
+          } else {
+            this.$message.error(response.message || '作废失败')
+          }
+        }).catch(() => {
+          this.$message.error('作废失败')
+        })
+      }).catch(() => {})
+    },
+    // 上传前检查文件
+    beforeFileUpload(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) {
+      const file = options.file
+      this.$confirm('确认上传该文件?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'info'
+      }).then(() => {
+        this.$message.info('开始上传附件，请稍候...')
+        // 调用上传附件API
+        uploadBillAttachment(this.billDetail.id, file).then(response => {
+          if (response.code === '0000000000000000') {
+            this.$message.success('上传成功')
+            // 重新获取附件列表
+            this.getAttachmentList()
+          } else {
+            this.$message.error(response.message || '上传失败')
+          }
+        }).catch(() => {
+          this.$message.error('上传失败')
+        })
+      }).catch(() => {
+        // 取消上传
+      })
+    },
+    // 获取调整附件列表
+    getAdjustmentAttachmentList() {
+      getBillAdjustmentAttachmentList(this.currentAdjustmentId).then(response => {
+        if (response.code === '0000000000000000') {
+          this.adjustmentAttachmentList = response.data || []
+        } else {
+          this.$message.error(response.message || '获取附件列表失败')
+          this.adjustmentAttachmentList = []
+        }
+      }).catch(() => {
+        this.$message.error('获取附件列表失败')
+        this.adjustmentAttachmentList = []
+      })
+    },
+    // 删除账单调整附件
+    deleteAdjustmentAttachment(file) {
+      this.$confirm('确认删除该附件?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteBillAdjustmentAttachment(file.id).then(response => {
+          if (response.code === '0000000000000000') {
+            this.$message.success('删除成功')
+            // 重新获取附件列表
+            this.getAdjustmentAttachmentList()
+          } else {
+            this.$message.error(response.message || '删除失败')
+          }
+        }).catch(() => {
+          this.$message.error('删除失败')
+        })
+      }).catch(() => {})
+    },
+    // 操作记录分页大小变化
+    handleOperationSizeChange(val) {
+      this.operationQuery.pageSize = val
+      this.getOperationList()
+    },
+    // 操作记录页码变化
+    handleOperationCurrentChange(val) {
+      this.operationQuery.pageNum = val
+      this.getOperationList()
+    },
+    // 获取操作记录列表
+    getOperationList() {
+      getBillOperationRecords(this.billId, this.operationQuery).then(response => {
+        if (response.code === '0000000000000000') {
+          this.operationList = response.data.list || []
+          this.operationTotal = response.data.total || 0
+        } else {
+          this.$message.error(response.message || '获取操作记录失败')
+          this.operationList = []
+          this.operationTotal = 0
+        }
+      }).catch(() => {
+        this.$message.error('获取操作记录失败')
+        this.operationList = []
+        this.operationTotal = 0
+      })
+    },
+    // 打开支付对话框
+    openPaymentDialog() {
+      // 重置表单
+      this.resetPaymentForm()
+      
+      this.paymentDialogVisible = true
+      this.paymentForm.billId = this.billId
+      this.paymentForm.billDetailId = this.billDetail.billDetails && this.billDetail.billDetails.length > 0 
+        ? this.billDetail.billDetails[0].id 
+        : ''
+      this.paymentForm.occuAmt = 0
+      this.calculateRemainingAmount()
+    },
+    // 计算剩余待收金额
+    calculateRemainingAmount() {
+      const needAmount = parseFloat(this.billDetail.needAmount || 0)
+      const paymentAmount = parseFloat(this.paymentForm.occuAmt || 0)
+      this.remainingAmount = Math.max(0, needAmount - paymentAmount)
+    },
+    // 填充全额
+    fillFullAmount() {
+      this.paymentForm.occuAmt = parseFloat(this.billDetail.needAmount || 0)
+      this.calculateRemainingAmount()
+    },
+    // 重置支付表单
+    resetPaymentForm() {
+      if (this.$refs.paymentForm) {
+        this.$refs.paymentForm.resetFields()
+      }
+      this.paymentFileList = []
+      this.remainingAmount = 0
+      this.paymentForm = {
+        billId: '',
+        billDetailId: '',
+        occuAmt: 0,
+        inaccDate: new Date().toISOString().slice(0, 10),
+        payModeName: '1',
+        txVchrNo: '',
+        summ: '',
+        remark: ''
+      }
+    },
+    // 上传前检查支付附件
+    beforePaymentUpload(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格式的文件!')
+        return false
+      }
+      
+      if (!isLt5M) {
+        this.$message.error('文件大小不能超过5MB!')
+        return false
+      }
+      
+      return isValidType && isLt5M
+    },
+    // 上传支付附件
+    uploadPaymentAttachment(options) {
+      const file = options.file
+      
+      // 创建临时URL供预览
+      const tempUrl = URL.createObjectURL(file)
+      
+      // 向上传列表中添加文件
+      this.paymentFileList.push({
+        name: file.name,
+        file: file,
+        url: tempUrl,
+        status: 'ready'
+      })
+    },
+    // 预览支付附件
+    previewPaymentFile(file) {
+      this.previewLoading = true
+      this.previewDialogVisible = true
+      this.currentPreviewName = file.name || '附件'
+      this.previewUrl = ''
+      this.isPdf = false
+      this.isImage = false
+      
+      // 根据文件名后缀判断文件类型
+      const fileExt = file.name ? file.name.split('.').pop().toLowerCase() : ''
+      
+      try {
+        // 获取文件内容
+        const blob = file.file ? file.file : new Blob()
+        this.previewBlob = blob
+        
+        // 设置文件类型标志
+        if (fileExt === 'pdf') {
+          this.isPdf = true
+        } else if (['jpg', 'jpeg', 'png', 'gif'].includes(fileExt)) {
+          this.isImage = true
+        }
+        
+        // 创建URL用于预览
+        this.previewUrl = file.url
+        this.previewLoading = false
+      } catch (error) {
+        console.error('预览失败', error)
+        this.$message.error('获取预览数据失败')
+        this.previewLoading = false
+      }
+    },
+    // 删除支付附件
+    deletePaymentFile(index) {
+      this.paymentFileList.splice(index, 1)
+    },
+    // 提交支付
+    submitPayment() {
+      this.$refs.paymentForm.validate(valid => {
+        if (valid) {
+          // 验证支付金额
+          if (this.paymentForm.occuAmt <= 0) {
+            this.$message.error('支付金额必须大于0')
+            return
+          }
+          
+          if (this.paymentForm.occuAmt > this.billDetail.needAmount) {
+            this.$message.error('支付金额不能超过需收金额')
+            return
+          }
+          
+          this.paymentSubmitting = true
+          
+          // 准备表单数据
+          const paymentData = {...this.paymentForm}
+          
+          // 如果有附件，需要转换日期格式，后端接收Date类型
+          if (paymentData.inaccDate) {
+            // 保持字符串格式，后端会处理
+          }
+          
+          submitBillPayment(paymentData)
+            .then(response => {
+              if (response.code === '0000000000000000') {
+                // 上传附件
+                if (this.paymentFileList.length > 0) {
+                  this.uploadPaymentAttachments(response.data.id)
+                } else {
+                  this.$message.success('账单支付成功')
+                  this.paymentDialogVisible = false
+                  // 重新获取账单信息
+                  this.getBillData()
+                  this.paymentSubmitting = false
+                }
+              } else {
+                this.$message.error(response.message || '账单支付失败')
+                this.paymentSubmitting = false
+              }
+            })
+            .catch(error => {
+              console.error('账单支付失败', error)
+              this.$message.error('账单支付失败，请稍后重试')
+              this.paymentSubmitting = false
+            })
+        }
+      })
+    },
+    // 上传支付附件
+    uploadPaymentAttachments(transactionId) {
+      if (this.paymentFileList.length === 0) {
+        this.$message.success('账单支付成功')
+        this.paymentDialogVisible = false
+        // 重新获取账单信息
+        this.getBillData()
+        this.paymentSubmitting = false
+        return
+      }
+      
+      const uploadPromises = this.paymentFileList.map(fileItem => {
+        return uploadBillPaymentAttachment(transactionId, fileItem.file)
+      })
+      
+      Promise.all(uploadPromises)
+        .then(() => {
+          this.$message.success('账单支付成功')
+          this.paymentDialogVisible = false
+          // 重新获取账单信息
+          this.getBillData()
+          this.paymentSubmitting = false
+        })
+        .catch(error => {
+          console.error('附件上传失败', error)
+          this.$message.warning('账单支付成功，但部分附件上传失败')
+          this.paymentDialogVisible = false
+          // 重新获取账单信息
+          this.getBillData()
+          this.paymentSubmitting = false
+        })
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.bill-detail-container {
-  padding: 10px;
-  
-  .empty-data {
-    margin: 20px 0;
-    display: flex;
-    justify-content: center;
+  .delete-btn {
+    color: #F56C6C;
+  }
+   
+  .pagination-container {
+    margin-top: 20px;
+    text-align: right;
+  }
+  
+  .bill-detail-container {
+    padding: 10px;
+    
+    .bill-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 15px;
+      
+      .bill-header-left {
+        h3 {
+          margin: 0;
+        }
+      }
+    }
+    
+    .payment-form {
+      .el-form-item {
+        margin-bottom: 18px;
+      }
+      
+      .amount-input-wrapper {
+        display: flex;
+        align-items: center;
+        
+        .fill-btn {
+          margin-left: 10px;
+          height: 32px;
+          padding: 8px 15px;
+        }
+      }
+    }
+    
+    .payment-section {
+      margin-bottom: 25px;
+      
+      h4 {
+        margin: 15px 0 10px;
+        padding-left: 8px;
+        border-left: 3px solid #409EFF;
+        font-size: 16px;
+        color: #303133;
+      }
+      
+      .el-descriptions {
+        margin-bottom: 15px;
+      }
+      
+      .upload-wrapper {
+        margin-bottom: 10px;
+        padding: 10px;
+        background-color: #f9f9f9;
+        border-radius: 4px;
+      }
+    }
+    
+    .empty-data {
+      margin: 20px 0;
+      display: flex;
+      justify-content: center;
+    }
+  
+    .bill-adjustment-container {
+      .operation-bar {
+        display: flex;
+        justify-content: flex-end;
+        margin-bottom: 15px;
+      }
+    }
+    
+    .form-hint {
+      margin-left: 10px;
+      color: #909399;
+      font-size: 13px;
+    }
+    
+    .upload-area {
+      margin-bottom: 15px;
+    }
+    
+    .preview-container {
+      min-height: 500px;
+      max-height: 700px;
+      overflow: auto;
+      
+      .preview-iframe {
+        width: 100%;
+        height: 500px;
+        border: none;
+      }
+      
+      .preview-image {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 300px;
+      }
+      
+      .preview-error {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        min-height: 300px;
+        color: #909399;
+        
+        i {
+          font-size: 48px;
+          margin-bottom: 20px;
+        }
+        
+        p {
+          font-size: 16px;
+        }
+        
+        .preview-actions {
+          margin-top: 20px;
+        }
+      }
+    }
+    
+    .attachment-header {
+      margin-bottom: 15px;
+    }
   }
-}
 </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
index 4a9bbef..9eb4dba 100644
--- a/pc/src/views/finance/billList/index.vue
+++ b/pc/src/views/finance/billList/index.vue
@@ -2,17 +2,17 @@
   <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 label="合同编号" prop="contractNo">
+        <el-input v-model="queryParams.contractNo" 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 label="对方名称" prop="paysdName">
+        <el-input v-model="queryParams.paysdName" 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 label="账单编号" prop="totBillNo">
+        <el-input v-model="queryParams.totBillNo" 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">
@@ -20,7 +20,7 @@
           <el-option label="关闭" value="0" />
         </el-select>
       </el-form-item>
-      <el-form-item label="应收时间" prop="receivableDate">
+      <el-form-item label="应收时间" prop="pybDt">
         <el-date-picker
           v-model="dateRange"
           type="daterange"
@@ -77,11 +77,11 @@
 
     <!-- 表格区域 -->
     <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="paysdName" 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="账单编号" prop="totBillNo" min-width="150" show-overflow-tooltip />
+      <el-table-column label="合同编号" prop="contractNo" 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)">
@@ -89,25 +89,25 @@
           </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">
+      <el-table-column label="费用类型" prop="feTpName" min-width="120" show-overflow-tooltip />
+      <el-table-column label="账单金额" prop="accblAmt" min-width="100" align="right">
         <template slot-scope="scope">
-          {{ scope.row.billAmount ? scope.row.billAmount.toFixed(2) : '0.00' }}
+          {{ scope.row.accblAmt ? scope.row.accblAmt.toFixed(2) : '0.00' }}
         </template>
       </el-table-column>
-      <el-table-column label="应收金额" prop="receivableAmount" min-width="100" align="right">
+      <el-table-column label="应收金额" prop="accigRcvAmt" min-width="100" align="right">
         <template slot-scope="scope">
-          {{ scope.row.receivableAmount ? scope.row.receivableAmount.toFixed(2) : '0.00' }}
+          {{ scope.row.accigRcvAmt ? scope.row.accigRcvAmt.toFixed(2) : '0.00' }}
         </template>
       </el-table-column>
-      <el-table-column label="实收金额" prop="receivedAmount" min-width="100" align="right">
+      <el-table-column label="实收金额" prop="atmRecvAmt" min-width="100" align="right">
         <template slot-scope="scope">
-          {{ scope.row.receivedAmount ? scope.row.receivedAmount.toFixed(2) : '0.00' }}
+          {{ scope.row.atmRecvAmt ? scope.row.atmRecvAmt.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="开始日期" prop="chggBgnDt" min-width="120" align="center" />
+      <el-table-column label="结束日期" prop="chggEndDt" min-width="120" align="center" />
+      <el-table-column label="应收日期" prop="pybDt" 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>
@@ -171,10 +171,10 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        contractNumber: '',
+        contractNo: '',
         roomNumber: '',
-        payeeName: '',
-        billNumber: '',
+        paysdName: '',
+        totBillNo: '',
         billStatus: [],
         receivableDateStart: '',
         receivableDateEnd: '',
@@ -217,7 +217,7 @@ export default {
       }
       
       getBillList(queryParams).then(response => {
-        this.billList = response.data.data || []
+        this.billList = response.data.list || []
         this.total = response.data.total
         this.loading = false
       }).catch(() => {
@@ -250,10 +250,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
             }
@@ -353,12 +353,28 @@ export default {
       this.$refs.addBillForm.validateForm().then(valid => {
         if (valid) {
           const billData = this.$refs.addBillForm.getFormData()
+          billData.billType = 1
+          billData.billSource = 3
+
           addBill(billData).then(response => {
-            this.$message.success('添加账单成功')
-            this.dialogVisible = false
-            this.getList()
+            if (response.code === '0000000000000000') {
+              this.$message.success('添加账单成功')
+              
+              // 如果有附件，上传附件
+              const fileList = this.$refs.addBillForm.fileList
+              if (fileList && fileList.length > 0) {
+                this.$refs.addBillForm.uploadAttachments(response.data)
+                // 上传附件由组件内部处理后续流程，不需要在这里关闭弹窗
+              } else {
+                this.dialogVisible = false
+                this.getList()
+              }
+            } else {
+              this.$message.error(response.message || '添加账单失败')
+            }
           }).catch(() => {
             // 错误处理
+            this.$message.error('添加账单失败')
           })
         }
       })
diff --git a/pc/src/views/finance/transaction/components/TransactionDetail.vue b/pc/src/views/finance/transaction/components/TransactionDetail.vue
new file mode 100644
index 0000000..ac342a0
--- /dev/null
+++ b/pc/src/views/finance/transaction/components/TransactionDetail.vue
@@ -0,0 +1,520 @@
+<template>
+  <div class="transaction-detail-container" v-loading="loading">
+    <!-- 详情主体 -->
+    <el-tabs v-model="activeTab">
+      <!-- 总体信息 -->
+      <el-tab-pane label="总体信息" name="overall">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>总体信息</span>
+          </div>
+          <el-descriptions :column="2" border>
+            <el-descriptions-item label="对方单位名称">{{ detailData.totalInfo && detailData.totalInfo.unitName || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="总金额">
+              <span class="amount">{{ formatAmount(detailData.totalInfo && detailData.totalInfo.totalAmount) }}</span>
+            </el-descriptions-item>
+            <el-descriptions-item label="已匹配金额">
+              <span class="amount matched">{{ formatAmount(detailData.totalInfo && detailData.totalInfo.matchedAmount) }}</span>
+            </el-descriptions-item>
+            <el-descriptions-item label="未匹配金额">
+              <span class="amount unmatched">{{ formatAmount(detailData.totalInfo && detailData.totalInfo.unmatchedAmount) }}</span>
+            </el-descriptions-item>
+          </el-descriptions>
+        </el-card>
+      </el-tab-pane>
+
+      <!-- 流水信息 -->
+      <el-tab-pane label="流水信息" name="transaction">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>流水信息</span>
+          </div>
+          <el-descriptions :column="2" border>
+            <el-descriptions-item label="借贷标">
+              <el-tag :type="(detailData.transaction && detailData.transaction.dcFlagCode === '0') ? 'danger' : 'success'">
+                {{ (detailData.transaction && detailData.transaction.dcFlagCode === '0') ? '借（支出）' : '贷（收入）' }}
+              </el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="发生额">
+              <span class="amount">{{ formatAmount(detailData.transaction && detailData.transaction.occuAmt) }}</span>
+            </el-descriptions-item>
+            <el-descriptions-item label="入账日期">{{ detailData.transaction && detailData.transaction.inaccDate || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="对方单位名称">{{ detailData.transaction && detailData.transaction.unitName || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="支付方式">{{ getPaymentModeName(detailData.transaction && detailData.transaction.payModeName) }}</el-descriptions-item>
+            <el-descriptions-item label="对方账号">{{ detailData.transaction && detailData.transaction.opsAccname || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="凭证号">{{ detailData.transaction && detailData.transaction.txVchrNo || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="收据编号">{{ detailData.transaction && detailData.transaction.receiptNo || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="联系人">{{ detailData.transaction && detailData.transaction.conterName || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="流水账户">{{ detailData.transaction && detailData.transaction.openaccBankName || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="摘要">{{ detailData.transaction && detailData.transaction.summ || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="备注">{{ detailData.transaction && detailData.transaction.remark || '-' }}</el-descriptions-item>
+          </el-descriptions>
+        </el-card>
+      </el-tab-pane>
+
+      <!-- 匹配账单（新增的独立标签页） -->
+      <el-tab-pane label="匹配账单" name="matchBills">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>匹配账单</span>
+          </div>
+          <el-table :data="detailData.relatedBills || []" border style="width: 100%">
+            <el-table-column prop="unitName" label="对方名称" min-width="120" show-overflow-tooltip />
+            <el-table-column prop="feeTypeName" label="费用类型" min-width="120" show-overflow-tooltip />
+            <el-table-column label="费用周期" min-width="200">
+              <template slot-scope="scope">
+                {{ scope.row.billingStartDate || '-' }} 至 {{ scope.row.billingEndDate || '-' }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="receivableAmount" label="应收金额" min-width="120" align="right">
+              <template slot-scope="scope">
+                {{ formatAmount(scope.row.receivableAmount) }}
+              </template>
+            </el-table-column>
+          </el-table>
+          <div v-if="!detailData.relatedBills || detailData.relatedBills.length === 0" class="empty-data">
+            暂无匹配账单
+          </div>
+        </el-card>
+      </el-tab-pane>
+
+      <!-- 附件信息 -->
+      <el-tab-pane label="附件信息" name="attachment">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>附件信息</span>
+            <el-button style="float: right;" type="primary" size="small" @click="handleAddAttachment">
+              <i class="el-icon-plus"></i> 添加附件
+            </el-button>
+          </div>
+          <el-table :data="detailData.attachments || []" border style="width: 100%">
+            <el-table-column prop="fileName" label="文件名" min-width="250" show-overflow-tooltip />
+            <el-table-column prop="createUserName" label="操作人" width="150" />
+            <el-table-column prop="createTime" label="操作时间" width="180" />
+            <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, scope.row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div v-if="!detailData.attachments || detailData.attachments.length === 0" class="empty-data">
+            暂无附件
+          </div>
+        </el-card>
+
+        <!-- 文件上传对话框 -->
+        <el-dialog title="上传附件" :visible.sync="uploadDialogVisible" width="500px" append-to-body>
+          <el-upload
+            class="upload-area"
+            action="#"
+            :http-request="uploadFile"
+            :file-list="uploadFileList"
+            :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>
+          <div slot="footer" class="dialog-footer">
+            <el-button @click="uploadDialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="confirmUpload">确 定</el-button>
+          </div>
+        </el-dialog>
+      </el-tab-pane>
+
+      <!-- 操作记录 -->
+      <el-tab-pane label="操作记录" name="logs">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>操作记录</span>
+          </div>
+          <el-table :data="detailData.operationRecords || []" border style="width: 100%" v-loading="logsLoading">
+            <el-table-column prop="oprPersonNm" label="操作人" width="150" />
+            <el-table-column prop="oprContent" label="操作内容" min-width="250" show-overflow-tooltip />
+            <el-table-column prop="createTime" label="操作时间" width="180" />
+          </el-table>
+          <div v-if="!detailData.operationRecords || detailData.operationRecords.length === 0" class="empty-data">
+            暂无操作记录
+          </div>
+          
+         
+        </el-card>
+      </el-tab-pane>
+    </el-tabs>
+
+    <!-- 文件预览对话框 -->
+    <el-dialog title="附件预览" :visible.sync="previewDialogVisible" width="800px" append-to-body>
+      <div class="preview-container" v-loading="previewLoading">
+        <div v-if="previewUrl && isPdf" class="preview-iframe">
+          <iframe :src="previewUrl" width="100%" height="500px" frameborder="0"></iframe>
+        </div>
+        <div v-else-if="previewUrl && isImage" class="preview-image">
+          <img :src="previewUrl" style="max-width: 100%;" />
+        </div>
+        <div v-else-if="!previewLoading" class="preview-error">
+          <i class="el-icon-warning"></i>
+          <p>预览加载失败，请尝试下载后查看</p>
+          <div class="preview-actions">
+            <el-button type="primary" @click="downloadCurrentPreview">下载文件</el-button>
+          </div>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="previewDialogVisible = false">关 闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { 
+  getTransactionDetail, 
+  uploadTransactionAttachment, 
+  deleteTransactionAttachment,
+  getTransactionOperationLogs,
+  previewAttachment,
+  downloadAttachment,
+  addTransactionOperation
+} from '@/api/finance'
+
+export default {
+  name: 'TransactionDetail',
+  props: {
+    transactionId: {
+      type: [String, Number],
+      required: true
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      activeTab: 'overall',
+      detailData: {},
+      
+      // 附件相关
+      uploadDialogVisible: false,
+      uploadFileList: [],
+      
+      // 预览相关
+      previewDialogVisible: false,
+      previewLoading: false,
+      previewUrl: '',
+      previewBlob: null,
+      currentPreviewName: '',
+      isPdf: false,
+      isImage: false,
+      
+      // 操作记录相关
+      logsLoading: false,
+      logsTotal: 0,
+      logsQuery: {
+        pageNum: 1,
+        pageSize: 10,
+        transactionId: undefined
+      }
+    }
+  },
+  created() {
+    this.getDetail()
+  },
+  methods: {
+    // 获取流水详情
+    getDetail() {
+      this.loading = true
+      getTransactionDetail(this.transactionId).then(response => {
+        this.detailData = response.data || {}
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    
+    // 获取操作记录
+    getOperationLogs() {
+      this.logsLoading = true
+      this.logsQuery.transactionId = this.transactionId
+      getTransactionOperationLogs(this.logsQuery).then(response => {
+        if (this.detailData.operationRecords) {
+          this.detailData.operationRecords = response.data.data || []
+        }
+        this.logsTotal = response.data.total
+        this.logsLoading = false
+      }).catch(() => {
+        this.logsLoading = false
+      })
+    },
+    
+    // 操作记录分页大小改变
+    handleLogsSizeChange(val) {
+      this.logsQuery.pageSize = val
+      this.getOperationLogs()
+    },
+    
+    // 操作记录分页页码改变
+    handleLogsCurrentChange(val) {
+      this.logsQuery.pageNum = val
+      this.getOperationLogs()
+    },
+    
+    // 格式化金额
+    formatAmount(amount) {
+      if (amount === undefined || amount === null) {
+        return '0.00'
+      }
+      return parseFloat(amount).toFixed(2)
+    },
+    
+    // 处理添加附件
+    handleAddAttachment() {
+      this.uploadDialogVisible = true
+      this.uploadFileList = []
+    },
+    
+    // 上传前检查
+    beforeUpload(file) {
+      const isValidType = ['image/jpeg', 'image/png', 'application/pdf'].includes(file.type)
+      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) {
+      // 先将文件加入上传列表，等确认后再统一上传
+      const file = options.file
+      
+      // 创建临时URL供预览
+      const tempUrl = URL.createObjectURL(file)
+      
+      // 向上传列表中添加文件
+      this.uploadFileList.push({
+        name: file.name,
+        file: file,
+        url: tempUrl
+      })
+    },
+    
+    // 确认上传
+    confirmUpload() {
+      if (this.uploadFileList.length === 0) {
+        this.$message.warning('请选择要上传的文件')
+        return
+      }
+      
+      const userId = this.$store.getters.userId || ''
+      const userName = this.$store.getters.name || ''
+      
+      const uploadPromises = this.uploadFileList.map(fileItem => {
+        return uploadTransactionAttachment(this.transactionId, fileItem.file, userId, userName)
+      })
+      
+      this.loading = true
+      Promise.all(uploadPromises)
+        .then(() => {
+          this.$message.success('附件上传成功')
+          this.uploadDialogVisible = false
+          
+          
+          // 重新获取详情以更新附件列表
+          this.getDetail()
+          this.loading = false
+        })
+        .catch(() => {
+          this.$message.error('部分附件上传失败，请重试')
+          this.loading = false
+        })
+    },
+    
+    // 预览文件
+    previewFile(file) {
+      this.previewLoading = true
+      this.previewDialogVisible = true
+      this.currentPreviewName = file.fileName || '附件'
+      this.previewUrl = ''
+      this.isPdf = false
+      this.isImage = false
+      
+      previewAttachment(file.fileId).then(response => {
+        // 判断文件类型
+        const contentType = response.headers['content-type']
+        
+        // 创建blob对象
+        const blob = new Blob([response.data], { type: contentType })
+        this.previewBlob = blob
+        
+        // 判断文件类型并设置标志
+        this.isPdf = contentType === 'application/pdf'
+        this.isImage = contentType.startsWith('image/')
+        
+        // 创建URL用于预览
+        this.previewUrl = URL.createObjectURL(blob)
+        this.previewLoading = false
+      }).catch(error => {
+        console.error('预览失败', error)
+        this.$message.error('获取预览数据失败')
+        this.previewLoading = false
+      })
+    },
+    
+    // 下载当前预览的文件
+    downloadCurrentPreview() {
+      if (!this.previewBlob) {
+        this.$message.error('没有可下载的文件')
+        return
+      }
+      
+      const url = URL.createObjectURL(this.previewBlob)
+      const link = document.createElement('a')
+      link.href = url
+      link.setAttribute('download', this.currentPreviewName)
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+      URL.revokeObjectURL(url)
+    },
+    
+    // 下载文件
+    downloadFile(file) {
+      downloadAttachment(file.fileId, file.fileName).then(response => {
+        // 创建下载链接
+        const blob = new Blob([response.data])
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = file.fileName
+        link.style.display = 'none'
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+        window.URL.revokeObjectURL(link.href)
+      }).catch(() => {
+        this.$message.warning('无法下载该文件')
+      })
+    },
+    
+    // 删除文件
+    deleteFile(index, file) {
+      this.$confirm('确认删除该附件?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const userId = this.$store.getters.userId || ''
+        deleteTransactionAttachment(file.fileId, userId).then(() => {
+          this.$message.success('删除成功')
+          if (this.detailData.attachments) {
+            this.detailData.attachments.splice(index, 1)
+          }
+           // 重新获取详情以更新附件列表
+           this.getDetail()
+        })
+      }).catch(() => {})
+    },
+    
+
+    
+    // 添加支付方式显示方法
+    getPaymentModeName(code) {
+      const paymentModeMap = {
+        '1': '现金',
+        '2': '网银转账',
+        '3': 'POS机',
+        '4': '支付宝',
+        '5': '微信',
+        '6': '转账支票',
+        '7': '其他方式',
+        '8': '线上支付'
+      }
+      return paymentModeMap[code] || code || '-'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.transaction-detail-container {
+  padding: 0 20px;
+  
+  .amount {
+    font-weight: bold;
+    color: #409EFF;
+    
+    &.matched {
+      color: #67C23A;
+    }
+    
+    &.unmatched {
+      color: #E6A23C;
+    }
+  }
+  
+  .box-card {
+    margin-bottom: 20px;
+  }
+  
+  .upload-area {
+    text-align: center;
+    padding: 20px 0;
+  }
+  
+  .empty-data {
+    color: #909399;
+    text-align: center;
+    padding: 30px 0;
+  }
+  
+  .delete-btn {
+    color: #F56C6C;
+  }
+
+  .preview-container {
+    min-height: 500px;
+    max-height: 700px;
+    overflow: auto;
+    
+    .preview-iframe {
+      width: 100%;
+      height: 500px;
+      border: none;
+    }
+    
+    .preview-image {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 300px;
+    }
+    
+    .preview-error {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      min-height: 300px;
+      color: #909399;
+      
+      i {
+        font-size: 48px;
+        margin-bottom: 20px;
+      }
+      
+      p {
+        font-size: 16px;
+      }
+      
+      .preview-actions {
+        margin-top: 20px;
+      }
+    }
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/pc/src/views/finance/transaction/index.vue b/pc/src/views/finance/transaction/index.vue
new file mode 100644
index 0000000..7b19f8a
--- /dev/null
+++ b/pc/src/views/finance/transaction/index.vue
@@ -0,0 +1,352 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索表单 -->
+    <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form">
+      <el-form-item label="借贷标" prop="dcFlagCode">
+        <el-select v-model="queryParams.dcFlagCode" placeholder="请选择借贷标" clearable style="width: 200px">
+          <el-option label="借（支出）" value="0" />
+          <el-option label="贷（收入）" value="1" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="支付方式" prop="payModeName">
+        <el-select v-model="queryParams.payModeCode" placeholder="请选择支付方式" clearable style="width: 200px">
+          <el-option label="现金" value="1" />
+          <el-option label="网银转账" value="2" />
+          <el-option label="POS机" value="3" />
+          <el-option label="支付宝" value="4" />
+          <el-option label="微信" value="5" />
+          <el-option label="转账支票" value="6" />
+          <el-option label="其他方式" value="7" />
+          <el-option label="线上支付" value="8" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="流水账户" prop="accountId">
+        <el-select v-model="queryParams.accountId" placeholder="请选择流水账户" clearable filterable style="width: 200px">
+          <el-option v-for="item in accountOptions" :key="item.id" :label="item.accountName" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建人员" prop="createUserName">
+        <el-input v-model="queryParams.createUserName" placeholder="请输入创建人员" clearable style="width: 200px" />
+      </el-form-item>
+      <el-form-item label="入账时间" prop="inaccDate">
+        <el-date-picker
+          v-model="accountDateRange"
+          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="createDate">
+        <el-date-picker
+          v-model="createDateRange"
+          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="occuAmt">
+        <el-input-number v-model="queryParams.occuAmtMin" placeholder="最小值" :min="0" :precision="2" style="width: 110px" controls-position="right" />
+        <span style="margin: 0 5px;">-</span>
+        <el-input-number v-model="queryParams.occuAmtMax" placeholder="最大值" :min="0" :precision="2" style="width: 110px" controls-position="right" />
+      </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="warning" icon="el-icon-download" style="float: right;" @click="handleExport">导出</el-button>
+    </el-form>
+
+    <!-- 表格区域 -->
+    <el-table v-loading="loading" :data="transactionList" border>
+      <el-table-column label="项目楼宇名称" prop="projectName" min-width="120" show-overflow-tooltip>
+        <template slot-scope="scope">
+          {{ scope.row.projectName }} - {{ scope.row.buildingName }}
+        </template>
+      </el-table-column>
+      <el-table-column label="房号" prop="roomNo" min-width="100" show-overflow-tooltip />
+      <el-table-column label="对方账号" prop="opsAccname" min-width="150" show-overflow-tooltip />
+      <el-table-column label="入账日期" prop="inaccDate" min-width="120" align="center" />
+      <el-table-column label="对方名称" prop="unitName" min-width="120" show-overflow-tooltip />
+      <el-table-column label="借贷标" min-width="100" align="center">
+        <template slot-scope="scope">
+          <el-tag :type="scope.row.dcFlagCode === '0' ? 'danger' : 'success'">
+            {{ scope.row.dcFlagCode === '0' ? '借（支出）' : '贷（收入）' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="发生额" prop="occuAmt" min-width="100" align="right">
+        <template slot-scope="scope">
+          {{ scope.row.occuAmt ? parseFloat(scope.row.occuAmt).toFixed(2) : '0.00' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="币种（单位）" prop="currCode" min-width="100" align="center">
+        <template slot-scope="scope">
+          {{ getCurrencyName(scope.row.currCode) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="支付方式" prop="payModeName" min-width="100" align="center">
+        <template slot-scope="scope">
+          {{ getPaymentModeName(scope.row.payModeName) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="创建人" prop="createUserId" min-width="100" show-overflow-tooltip />
+      <el-table-column label="状态" prop="transactionStatus" min-width="100" align="center">
+        <template slot-scope="scope">
+          <el-tag :type="getStatusType(scope.row.transactionStatus)">
+            {{ getStatusName(scope.row.transactionStatus) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建日期" prop="createTime" min-width="120" align="center" />
+      <el-table-column label="操作" width="100" 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="detailVisible" width="80%" append-to-body>
+      <transaction-detail v-if="detailVisible" :transactionId="currentTransaction.id" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getTransactionList, exportTransactionList, getAllFinanceAccounts } from '@/api/finance'
+import TransactionDetail from './components/TransactionDetail'
+
+export default {
+  name: 'Transaction',
+  components: {
+    TransactionDetail
+  },
+  data() {
+    return {
+      // 加载标志
+      loading: false,
+      // 收支流水列表数据
+      transactionList: [],
+      // 总记录数
+      total: 0,
+      // 入账时间范围
+      accountDateRange: [],
+      // 创建时间范围
+      createDateRange: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        dcFlagCode: undefined,
+        payModeCode: undefined,
+        accountId: undefined,
+        createUserName: undefined,
+        inaccDateStart: undefined,
+        inaccDateEnd: undefined,
+        createDateStart: undefined,
+        createDateEnd: undefined,
+        occuAmtMin: undefined,
+        occuAmtMax: undefined
+      },
+      // 收支账户选项
+      accountOptions: [],
+      // 详情对话框显示标志
+      detailVisible: false,
+      // 当前查看的流水详情
+      currentTransaction: {}
+    }
+  },
+  created() {
+    this.getList()
+    // this.getAccountOptions()
+  },
+  methods: {
+    // 获取收支流水列表
+    getList() {
+      this.loading = true
+      // 处理查询参数
+      const queryParams = { ...this.queryParams }
+      
+      // 处理入账时间范围
+      if (this.accountDateRange && this.accountDateRange.length > 0) {
+        queryParams.inaccDateStart = this.accountDateRange[0]
+        queryParams.inaccDateEnd = this.accountDateRange[1]
+      }
+      
+      // 处理创建时间范围
+      if (this.createDateRange && this.createDateRange.length > 0) {
+        queryParams.createDateStart = this.createDateRange[0]
+        queryParams.createDateEnd = this.createDateRange[1]
+      }
+      
+      // 转换支付方式编码为后端参数
+      if (queryParams.payModeCode) {
+        queryParams.payModeName = queryParams.payModeCode
+        delete queryParams.payModeCode
+      }
+      
+      getTransactionList(queryParams).then(response => {
+        this.transactionList = response.data.data || []
+        this.total = response.data.total
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    // 获取收支账户选项
+    getAccountOptions() {
+      getAllFinanceAccounts().then(response => {
+        this.accountOptions = response.data || []
+      })
+    },
+    // 搜索按钮操作
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    // 重置按钮操作
+    resetQuery() {
+      this.accountDateRange = []
+      this.createDateRange = []
+      this.$refs.queryForm.resetFields()
+      this.handleQuery()
+    },
+    // 分页大小改变
+    handleSizeChange(val) {
+      this.queryParams.pageSize = val
+      this.getList()
+    },
+    // 分页页码改变
+    handleCurrentChange(val) {
+      this.queryParams.pageNum = val
+      this.getList()
+    },
+    // 查看流水详情
+    handleViewDetail(row) {
+      this.currentTransaction = row
+      this.detailVisible = true
+    },
+    // 导出收支流水
+    handleExport() {
+      // 处理导出参数
+      const exportParams = { ...this.queryParams }
+      delete exportParams.pageNum
+      delete exportParams.pageSize
+      
+      // 处理入账时间范围
+      if (this.accountDateRange && this.accountDateRange.length > 0) {
+        exportParams.inaccDateStart = this.accountDateRange[0]
+        exportParams.inaccDateEnd = this.accountDateRange[1]
+      }
+      
+      // 处理创建时间范围
+      if (this.createDateRange && this.createDateRange.length > 0) {
+        exportParams.createDateStart = this.createDateRange[0]
+        exportParams.createDateEnd = this.createDateRange[1]
+      }
+      
+      this.$confirm('是否确认导出所有数据项?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        exportTransactionList(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)
+          }
+        })
+      })
+    },
+    // 获取币种名称
+    getCurrencyName(currency) {
+      const currencyMap = {
+        '156': '人民币',
+        '840': '美元',
+        '978': '欧元',
+        '826': '英镑',
+        '392': '日元'
+      }
+      return currencyMap[currency] || currency || '人民币'
+    },
+    // 获取状态类型
+    getStatusType(status) {
+      const statusMap = {
+        '0': 'info',
+        '1': 'success'
+      }
+      return statusMap[status] || 'info'
+    },
+    // 获取状态名称
+    getStatusName(status) {
+      const statusMap = {
+        '0': '处理中',
+        '1': '已完成'
+      }
+      return statusMap[status] || '未知状态'
+    },
+    // 获取支付方式名称
+    getPaymentModeName(code) {
+      const paymentModeMap = {
+        '1': '现金',
+        '2': '网银转账',
+        '3': 'POS机',
+        '4': '支付宝',
+        '5': '微信',
+        '6': '转账支票',
+        '7': '其他方式',
+        '8': '线上支付'
+      }
+      return paymentModeMap[code] || code || '-'
+    }
+  }
+}
+</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/project/index.vue b/pc/src/views/project/index.vue
index e66e3bf..5cd2590 100644
--- a/pc/src/views/project/index.vue
+++ b/pc/src/views/project/index.vue
@@ -63,7 +63,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="所属地区">
-          <el-input v-model="queryParams.region" placeholder="请输入所属地区" clearable size="small" />
+          <region-selector v-model="queryParams.region" :value="queryParams.region" placeholder="请选择所属地区" size="small" @change="handleRegionChange" />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -133,7 +133,7 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="所属地区" prop="region">
-              <el-input v-model="form.region" placeholder="请输入所属地区" />
+              <region-selector v-model="form.region" placeholder="请选择所属地区" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -223,9 +223,13 @@
 
 <script>
 import { getProjectList, getProjectDetail, addProject, updateProject, deleteProject, getAllProjectStatistics, getTagByType } from '@/api/project'
+import RegionSelector from '@/components/RegionSelector'
 
 export default {
   name: 'ProjectList',
+  components: {
+    RegionSelector
+  },
   data() {
     return {
       // 遮罩层
@@ -338,7 +342,9 @@ export default {
     handleAdd() {
       this.dialogTitle = '新增项目'
       // 完全重置表单数据
-      this.form = {}
+      this.form = {
+        region: '' // 初始化region为空字符串以确保组件正确绑定
+      }
       this.dialogVisible = true
     },
     /** 修改按钮操作 */
@@ -474,6 +480,10 @@ export default {
       // 重置表单和校验状态
       this.form = {}
       this.$refs['form'].clearValidate()
+    },
+    handleRegionChange(regionText) {
+      
+      this.queryParams.region = regionText
     }
   }
 }
diff --git a/pc/vue.config.js b/pc/vue.config.js
index 6751f82..318111a 100644
--- a/pc/vue.config.js
+++ b/pc/vue.config.js
@@ -12,7 +12,7 @@ module.exports = {
     },
     // proxy: {
     //   '/': {
-    //     target: 'http://192.168.137.214:8082',
+    //     target: 'http://192.168.137.214:8080',
     //     changeOrigin: true,
     //     pathRewrite: {
     //       '^/api': '/api'