diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..f71b978
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,10 @@
+node_modules/
+.DS_Store
+.idea/
+.vscode/
+.env
+.env.local
+
+
+package-lock.json
+yarn.lock
diff --git a/h5/README.md b/h5/README.md
new file mode 100644
index 0000000..06efde7
--- /dev/null
+++ b/h5/README.md
@@ -0,0 +1,102 @@
+# H5在线缴费系统
+
+基于Vue.js和Vant UI的移动端在线缴费系统，提供账单管理、缴费支付、对账等功能。
+
+## 主要功能
+
+- 缴费账单列表查询：查询当前业户待缴费的账单
+- 预缴账单列表查询：查询当前业户未到期的预缴账单
+- 缴费支付：支持个对公和公对公两种支付方式
+- 缴费记录查询：查询历史缴费记录
+- 支付结果查询：查询支付状态
+- 其他辅助功能
+
+## 技术栈
+
+- Vue 2.6.x
+- Vuex
+- Vue Router
+- Vant UI
+- Axios
+- Sass
+- ES6+
+
+## 项目结构
+
+```
+├── public/                   # 静态资源目录
+├── src/                      # 源代码目录
+│   ├── api/                  # API接口定义
+│   ├── assets/               # 静态资源文件
+│   ├── components/           # 公共组件
+│   ├── router/               # 路由配置
+│   ├── store/                # Vuex状态管理
+│   ├── utils/                # 工具函数
+│   ├── views/                # 页面组件
+│   ├── App.vue               # 根组件
+│   └── main.js               # 入口文件
+├── .env.development          # 开发环境配置
+├── .env.production           # 生产环境配置
+├── babel.config.js           # Babel配置
+├── postcss.config.js         # PostCSS配置
+└── vue.config.js             # Vue CLI配置
+```
+
+## 快速开始
+
+### 安装依赖
+```
+npm install
+```
+
+### 开发模式
+```
+npm run dev
+```
+
+### 生产构建
+```
+npm run build
+```
+
+### 代码格式化
+```
+npm run lint
+```
+
+## 组件说明
+
+### 主要页面组件
+
+- `Index.vue`: 在线缴费首页，显示待缴费账单列表
+- `PrepayBills.vue`: 预缴账单页面，显示未到期的预缴账单
+- `Records.vue`: 缴费记录页面，显示历史缴费记录
+- `BillDetail.vue`: 账单详情页，显示账单详细信息
+- `RecordDetail.vue`: 缴费记录详情页，显示缴费记录详细信息
+- `EnterprisePay.vue`: 公对公支付页面，提供公对公支付链接
+- `PayResult.vue`: 支付结果页面，显示支付结果信息
+
+### 公共组件
+
+- `PayerSelector.vue`: 业户选择器组件，用于选择当前操作的业户
+
+## 业务规则
+
+### 缴费流程
+
+1. 用户在账单列表页选择需要缴费的账单
+2. 选择支付方式（个对公/公对公）
+3. 系统生成支付订单
+4. 用户完成支付
+5. 系统更新账单状态和缴费记录
+
+### 公对公支付
+
+1. 用户选择公对公支付方式后，系统生成支付链接
+2. 支付链接有效期为5分钟
+3. 用户复制链接后在浏览器中打开完成支付
+4. 系统自动更新支付状态
+
+## API文档
+
+详细的API接口文档请参考后端开发文档。 
\ No newline at end of file
diff --git a/h5/babel.config.js b/h5/babel.config.js
new file mode 100644
index 0000000..f707b32
--- /dev/null
+++ b/h5/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}; 
\ No newline at end of file
diff --git a/h5/package.json b/h5/package.json
new file mode 100644
index 0000000..f37ff90
--- /dev/null
+++ b/h5/package.json
@@ -0,0 +1,81 @@
+{
+  "name": "U-H5",
+  "version": "1.0.0",
+  "private": true,
+  "author": {
+    "name": "zzz"
+  },
+  "scripts": {
+    "dev": "vue-cli-service serve --mode development",
+    "build": "vue-cli-service build --mode production",
+    "lint": "vue-cli-service lint",
+    "lint-fix": "vue-cli-service lint ./src --ext .vue,.js",
+    "prepare": "husky install"
+  },
+  "dependencies": {
+    "@vant/area-data": "^1.2.1",
+    "axios": "^0.27.2",
+    "clipboard": "^2.0.11",
+    "echarts": "^5.5.1",
+    "file-saver": "^2.0.5",
+    "jszip": "^3.10.1",
+    "qrcode": "^1.5.3",
+    "qs": "^6.10.3",
+    "tui-image-editor": "^3.15.3",
+    "vant": "^2.13.1",
+    "vue": "^2.6.14",
+    "vue-draggable-resizable": "^2.3.0",
+    "vue-router": "^3.5.4",
+    "vue-wechat-title": "^2.0.7",
+    "vuedraggable": "^2.24.3",
+    "vuex": "^3.6.2",
+    "weixin-js-sdk": "^1.4.0-test"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "@vue/eslint-config-airbnb": "^5.0.2",
+    "autoprefixer": "^10.4.7",
+    "babel-plugin-import": "^1.13.3",
+    "compression-webpack-plugin": "^6.1.1",
+    "core-js": "^3.23.2",
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "eslint-plugin-vuejs-accessibility": "^1.1.0",
+    "husky": "^7.0.2",
+    "lint-staged": "^11.1.2",
+    "postcss-px-to-viewport": "^1.1.1",
+    "prettier": "^2.7.1",
+    "sass": "^1.53.0",
+    "sass-loader": "^13.0.0",
+    "style-resources-loader": "^1.5.0",
+    "vue-template-compiler": "^2.6.14",
+    "webpack-bundle-analyzer": "^4.5.0"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}
diff --git a/h5/postcss.config.js b/h5/postcss.config.js
new file mode 100644
index 0000000..5659fd4
--- /dev/null
+++ b/h5/postcss.config.js
@@ -0,0 +1,16 @@
+module.exports = {
+  plugins: {
+    'postcss-px-to-viewport': {
+      viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度
+      viewportHeight: 667, // 视窗的高度，根据750设备的宽度来指定，一般指定1334
+      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
+      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
+      selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
+      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
+      mediaQuery: false // 允许在媒体查询中转换`px`
+    },
+    'autoprefixer': {
+      browsers: ['Android >= 4.0', 'iOS >= 8']
+    }
+  }
+}; 
\ No newline at end of file
diff --git a/h5/public/index.html b/h5/public/index.html
new file mode 100644
index 0000000..acd7df0
--- /dev/null
+++ b/h5/public/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <!-- 移动端适配 -->
+    <script>
+      (function(win, doc) {
+        if (!win.addEventListener) return;
+        function setFont() {
+          var html = document.documentElement;
+          var width = html.clientWidth;
+          var fontSize = (width / 375) * 16; // 以iPhone 6/7/8为基准
+          html.style.fontSize = fontSize + 'px';
+        }
+        setFont();
+        setTimeout(function() {
+          setFont();
+        }, 300);
+        doc.addEventListener('DOMContentLoaded', setFont, false);
+        win.addEventListener('resize', setFont, false);
+        win.addEventListener('load', setFont, false);
+      })(window, document);
+    </script>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html> 
\ No newline at end of file
diff --git a/h5/src/App.vue b/h5/src/App.vue
new file mode 100644
index 0000000..f11aedf
--- /dev/null
+++ b/h5/src/App.vue
@@ -0,0 +1,23 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App',
+};
+</script>
+
+<style lang="scss">
+#app {
+  font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  width: 100%;
+  height: 100%;
+  background-color: #f5f5f5;
+  color: #333;
+}
+</style> 
\ No newline at end of file
diff --git a/h5/src/api/payment.js b/h5/src/api/payment.js
new file mode 100644
index 0000000..99f429c
--- /dev/null
+++ b/h5/src/api/payment.js
@@ -0,0 +1,50 @@
+import { request } from '@/utils/request';
+
+const api = {
+  // 查询缴费账单列表
+  getBills(params) {
+    return request.post('/payment/bills', params);
+  },
+  
+  // 查询预缴账单列表
+  getPrepayBills(params) {
+    return request.post('/payment/prepay-bills', params);
+  },
+  
+  // 查询账单详情
+  getBillDetail(billId, config = { showLoading: false }) {
+    return request.get(`/payment/bill-detail/${billId}`, null, config);
+  },
+  
+  // 查询缴费记录
+  getPaymentRecords(params) {
+    return request.post('/payment/records', params);
+  },
+  
+  // 查询缴费记录详情
+  getRecordDetail(billId, config) {
+    return request.get(`/payment/record-detail/${billId}`, null, config);
+  },
+  
+  // 创建支付订单
+  createPayOrder(data) {
+    return request.post('/payment/create-order', data);
+  },
+  
+  // 查询支付结果
+  queryPayResult(orderNo) {
+    return request.get(`/payment/order-result/${orderNo}`);
+  },
+  
+  // 取消支付订单
+  cancelOrder(orderNo) {
+    return request.post(`/payment/cancel-order/${orderNo}`);
+  },
+  
+  // 获取公对公支付链接
+  getEnterprisePayUrl(orderNo) {
+    return request.get(`/payment/enterprise-pay-url/${orderNo}`);
+  },
+};
+
+export default api; 
\ No newline at end of file
diff --git a/h5/src/api/user.js b/h5/src/api/user.js
new file mode 100644
index 0000000..9a497f4
--- /dev/null
+++ b/h5/src/api/user.js
@@ -0,0 +1,15 @@
+import { request } from '@/utils/request';
+
+const api = {
+  // 获取用户信息
+  getUserInfo() {
+    return request.get('/user/info');
+  },
+  
+  // 获取业户列表
+  getPayerList() {
+    return request.get('/user/payer-list');
+  },
+};
+
+export default api; 
\ No newline at end of file
diff --git a/h5/src/assets/styles/index.scss b/h5/src/assets/styles/index.scss
new file mode 100644
index 0000000..e6f26d8
--- /dev/null
+++ b/h5/src/assets/styles/index.scss
@@ -0,0 +1,268 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+  font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: #f5f5f5;
+  color: #333;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+/* 常用颜色 */
+:root {
+  --primary-color: #1989fa;
+  --success-color: #07c160;
+  --warning-color: #ff976a;
+  --danger-color: #ee0a24;
+  --info-color: #909399;
+  --background-color: #f5f5f5;
+  --text-color: #323233;
+  --text-color-light: #969799;
+  --border-color: #ebedf0;
+}
+
+/* 常用间距 */
+.m-0 { margin: 0; }
+.m-1 { margin: 4px; }
+.m-2 { margin: 8px; }
+.m-3 { margin: 12px; }
+.m-4 { margin: 16px; }
+.m-5 { margin: 20px; }
+
+.mt-0 { margin-top: 0; }
+.mt-1 { margin-top: 4px; }
+.mt-2 { margin-top: 8px; }
+.mt-3 { margin-top: 12px; }
+.mt-4 { margin-top: 16px; }
+.mt-5 { margin-top: 20px; }
+
+.mb-0 { margin-bottom: 0; }
+.mb-1 { margin-bottom: 4px; }
+.mb-2 { margin-bottom: 8px; }
+.mb-3 { margin-bottom: 12px; }
+.mb-4 { margin-bottom: 16px; }
+.mb-5 { margin-bottom: 20px; }
+
+.ml-0 { margin-left: 0; }
+.ml-1 { margin-left: 4px; }
+.ml-2 { margin-left: 8px; }
+.ml-3 { margin-left: 12px; }
+.ml-4 { margin-left: 16px; }
+.ml-5 { margin-left: 20px; }
+
+.mr-0 { margin-right: 0; }
+.mr-1 { margin-right: 4px; }
+.mr-2 { margin-right: 8px; }
+.mr-3 { margin-right: 12px; }
+.mr-4 { margin-right: 16px; }
+.mr-5 { margin-right: 20px; }
+
+.p-0 { padding: 0; }
+.p-1 { padding: 4px; }
+.p-2 { padding: 8px; }
+.p-3 { padding: 12px; }
+.p-4 { padding: 16px; }
+.p-5 { padding: 20px; }
+
+.pt-0 { padding-top: 0; }
+.pt-1 { padding-top: 4px; }
+.pt-2 { padding-top: 8px; }
+.pt-3 { padding-top: 12px; }
+.pt-4 { padding-top: 16px; }
+.pt-5 { padding-top: 20px; }
+
+.pb-0 { padding-bottom: 0; }
+.pb-1 { padding-bottom: 4px; }
+.pb-2 { padding-bottom: 8px; }
+.pb-3 { padding-bottom: 12px; }
+.pb-4 { padding-bottom: 16px; }
+.pb-5 { padding-bottom: 20px; }
+
+.pl-0 { padding-left: 0; }
+.pl-1 { padding-left: 4px; }
+.pl-2 { padding-left: 8px; }
+.pl-3 { padding-left: 12px; }
+.pl-4 { padding-left: 16px; }
+.pl-5 { padding-left: 20px; }
+
+.pr-0 { padding-right: 0; }
+.pr-1 { padding-right: 4px; }
+.pr-2 { padding-right: 8px; }
+.pr-3 { padding-right: 12px; }
+.pr-4 { padding-right: 16px; }
+.pr-5 { padding-right: 20px; }
+
+/* 常用布局类 */
+.flex {
+  display: flex;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+.align-start {
+  align-items: flex-start;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.align-end {
+  align-items: flex-end;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.flex-grow-0 {
+  flex-grow: 0;
+}
+
+.flex-grow-1 {
+  flex-grow: 1;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-primary {
+  color: var(--primary-color);
+}
+
+.text-success {
+  color: var(--success-color);
+}
+
+.text-warning {
+  color: var(--warning-color);
+}
+
+.text-danger {
+  color: var(--danger-color);
+}
+
+.text-info {
+  color: var(--info-color);
+}
+
+.bg-white {
+  background-color: #fff;
+}
+
+.rounded {
+  border-radius: 4px;
+}
+
+.rounded-circle {
+  border-radius: 50%;
+}
+
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.position-relative {
+  position: relative;
+}
+
+.position-absolute {
+  position: absolute;
+}
+
+.w-100 {
+  width: 100%;
+}
+
+.h-100 {
+  height: 100%;
+}
+
+.divider {
+  height: 8px;
+  background-color: var(--background-color);
+}
+
+/* 标题样式 */
+.page-title {
+  font-size: 18px;
+  font-weight: 500;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-color);
+  background-color: #fff;
+  margin: 0;
+}
+
+/* 自定义卡片样式 */
+.card {
+  background-color: #fff;
+  border-radius: 8px;
+  margin: 12px;
+  padding: 16px;
+  box-shadow: 0 2px 12px rgba(100, 101, 102, 0.08);
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: 500;
+  margin: 0 0 12px 0;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+/* 底部操作栏 */
+.footer-action-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  background-color: #fff;
+  padding: 10px 16px;
+  border-top: 1px solid var(--border-color);
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
+} 
\ No newline at end of file
diff --git a/h5/src/assets/styles/variables.scss b/h5/src/assets/styles/variables.scss
new file mode 100644
index 0000000..5b213b7
--- /dev/null
+++ b/h5/src/assets/styles/variables.scss
@@ -0,0 +1,101 @@
+// 主题颜色
+$primary-color: #1989fa;
+$success-color: #07c160;
+$warning-color: #ff976a;
+$danger-color: #ee0a24;
+$info-color: #909399;
+
+// 背景颜色
+$background-color: #f5f5f5;
+$background-color-light: #fafafa;
+
+// 文字颜色
+$text-color: #323233;
+$text-color-light: #969799;
+$text-color-disabled: #c8c9cc;
+
+// 边框颜色
+$border-color: #ebedf0;
+$border-color-dark: #dcdee0;
+
+// 字体大小
+$font-size-xs: 10px;
+$font-size-sm: 12px;
+$font-size-md: 14px;
+$font-size-lg: 16px;
+$font-size-xl: 18px;
+
+// 边距
+$padding-xs: 4px;
+$padding-sm: 8px;
+$padding-md: 12px;
+$padding-lg: 16px;
+$padding-xl: 20px;
+
+// 圆角
+$border-radius-sm: 2px;
+$border-radius-md: 4px;
+$border-radius-lg: 8px;
+$border-radius-max: 999px;
+
+// 动画
+$animation-duration-base: 0.3s;
+$animation-duration-fast: 0.2s;
+$animation-timing-function-enter: ease-out;
+$animation-timing-function-leave: ease-in;
+
+// 阴影
+$shadow-1: 0 2px 4px rgba(0, 0, 0, 0.1);
+$shadow-2: 0 4px 8px rgba(0, 0, 0, 0.1);
+$shadow-3: 0 8px 16px rgba(0, 0, 0, 0.1);
+
+// 混合器
+@mixin ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin multi-ellipsis($lines) {
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@mixin hairline-bottom($color: $border-color) {
+  position: relative;
+  
+  &::after {
+    position: absolute;
+    box-sizing: border-box;
+    content: ' ';
+    pointer-events: none;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border-bottom: 1px solid $color;
+    transform: scaleY(0.5);
+  }
+}
+
+@mixin flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@mixin flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+@mixin clearfix {
+  &::after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+} 
\ No newline at end of file
diff --git a/h5/src/components/PayerSelector.vue b/h5/src/components/PayerSelector.vue
new file mode 100644
index 0000000..3ad3d88
--- /dev/null
+++ b/h5/src/components/PayerSelector.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="payer-selector">
+    <van-field
+      v-model="payerName"
+      readonly
+      label="当前业户"
+      placeholder="请选择业户"
+      right-icon="arrow-down"
+      @click="showPopup"
+    />
+    
+    <van-popup v-model="showPicker" round position="bottom">
+      <van-picker
+        show-toolbar
+        title="选择业户"
+        :columns="payerOptions"
+        @confirm="onConfirm"
+        @cancel="onCancel"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  name: 'PayerSelector',
+  data() {
+    return {
+      showPicker: false,
+    };
+  },
+  computed: {
+    ...mapState('user', ['currentPayer', 'payerList']),
+    
+    payerName() {
+      return this.currentPayer ? this.currentPayer.name : '';
+    },
+    
+    payerOptions() {
+      return this.payerList.map(payer => ({
+        text: payer.name,
+        value: payer.id,
+      }));
+    },
+  },
+  created() {
+    // 初始化获取业户列表
+    if (this.payerList.length === 0) {
+      this.getPayerList();
+    }
+  },
+  methods: {
+    ...mapActions('user', ['getPayerList', 'selectPayer']),
+    
+    showPopup() {
+      this.showPicker = true;
+    },
+    
+    onConfirm(value) {
+      const payerId = value.value;
+      const payer = this.payerList.find(p => p.id === payerId);
+      if (payer) {
+        this.selectPayer(payer);
+      }
+      this.showPicker = false;
+    },
+    
+    onCancel() {
+      this.showPicker = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.payer-selector {
+  margin-bottom: 10px;
+}
+</style> 
\ No newline at end of file
diff --git a/h5/src/env.development.js b/h5/src/env.development.js
new file mode 100644
index 0000000..17a94f7
--- /dev/null
+++ b/h5/src/env.development.js
@@ -0,0 +1,10 @@
+// 开发环境配置
+export default {
+  NODE_ENV: 'development',
+  
+  // API 基础路径
+  BASE_API: '/api',
+  
+  // 页面标题
+  TITLE: '在线缴费系统'
+}; 
\ No newline at end of file
diff --git a/h5/src/env.production.js b/h5/src/env.production.js
new file mode 100644
index 0000000..ae5db72
--- /dev/null
+++ b/h5/src/env.production.js
@@ -0,0 +1,10 @@
+// 生产环境配置
+export default {
+  NODE_ENV: 'production',
+  
+  // API 基础路径
+  BASE_API: '/api',
+  
+  // 页面标题
+  TITLE: '在线缴费系统'
+}; 
\ No newline at end of file
diff --git a/h5/src/main.js b/h5/src/main.js
new file mode 100644
index 0000000..0f786af
--- /dev/null
+++ b/h5/src/main.js
@@ -0,0 +1,25 @@
+import Vue from 'vue';
+import App from './App.vue';
+import router from './router';
+import store from './store';
+
+// 完整引入Vant及其样式
+import Vant from 'vant';
+import 'vant/lib/index.css';
+
+Vue.use(Vant);
+
+// 导入全局样式
+import './assets/styles/index.scss';
+
+// 全局API请求
+import { request } from './utils/request';
+Vue.prototype.$http = request;
+
+Vue.config.productionTip = false;
+
+new Vue({
+  router,
+  store,
+  render: (h) => h(App),
+}).$mount('#app'); 
\ No newline at end of file
diff --git a/h5/src/router/index.js b/h5/src/router/index.js
new file mode 100644
index 0000000..f1b7245
--- /dev/null
+++ b/h5/src/router/index.js
@@ -0,0 +1,75 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import VueWechatTitle from 'vue-wechat-title';
+
+Vue.use(VueRouter);
+Vue.use(VueWechatTitle);
+
+// 路由懒加载
+const routes = [
+  {
+    path: '/',
+    redirect: '/payment',
+  },
+  {
+    path: '/payment',
+    name: 'Payment',
+    component: () => import('../views/payment/Index.vue'),
+    meta: { title: '在线缴费' },
+  },
+  {
+    path: '/payment/prepay',
+    name: 'PrepayBills',
+    component: () => import('../views/payment/PrepayBills.vue'),
+    meta: { title: '预缴账单' },
+  },
+  {
+    path: '/payment/records',
+    name: 'PaymentRecords',
+    component: () => import('../views/payment/Records.vue'),
+    meta: { title: '缴费记录' },
+  },
+  {
+    path: '/payment/bill-detail/:billId',
+    name: 'BillDetail',
+    component: () => import('../views/payment/BillDetail.vue'),
+    meta: { title: '账单详情' },
+  },
+  {
+    path: '/payment/record-detail/:billId',
+    name: 'RecordDetail',
+    component: () => import('../views/payment/RecordDetail.vue'),
+    meta: { title: '缴费详情' },
+  },
+  {
+    path: '/payment/pay-result',
+    name: 'PayResult',
+    component: () => import('../views/payment/PayResult.vue'),
+    meta: { title: '支付结果' },
+  },
+  {
+    path: '/payment/enterprise-pay',
+    name: 'EnterprisePay',
+    component: () => import('../views/payment/EnterprisePay.vue'),
+    meta: { title: '公对公支付' },
+  },
+  {
+    path: '*',
+    redirect: '/payment',
+  },
+];
+
+const router = new VueRouter({
+  routes,
+});
+
+// 全局路由守卫
+router.beforeEach((to, from, next) => {
+  // 更新页面标题
+  if (to.meta.title) {
+    document.title = to.meta.title;
+  }
+  next();
+});
+
+export default router; 
\ No newline at end of file
diff --git a/h5/src/store/index.js b/h5/src/store/index.js
new file mode 100644
index 0000000..0865de4
--- /dev/null
+++ b/h5/src/store/index.js
@@ -0,0 +1,26 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import payment from './modules/payment';
+import user from './modules/user';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+    loading: false,
+  },
+  mutations: {
+    SET_LOADING(state, loading) {
+      state.loading = loading;
+    },
+  },
+  actions: {
+    setLoading({ commit }, loading) {
+      commit('SET_LOADING', loading);
+    },
+  },
+  modules: {
+    payment,
+    user,
+  },
+}); 
\ No newline at end of file
diff --git a/h5/src/store/modules/payment.js b/h5/src/store/modules/payment.js
new file mode 100644
index 0000000..530379a
--- /dev/null
+++ b/h5/src/store/modules/payment.js
@@ -0,0 +1,217 @@
+import { Toast } from 'vant';
+import api from '@/api/payment';
+
+const state = {
+  bills: [],                  // 缴费账单列表
+  prepayBills: [],            // 预缴账单列表
+  paymentRecords: [],         // 缴费记录
+  currentBill: null,          // 当前查看的账单详情
+  selectedBills: [],          // 已选择的账单
+  totalAmount: 0,             // 总金额
+  totalCount: 0,              // 总数量
+  payerName: '',              // 缴费人姓名
+  buildingGroups: [],         // 楼宇分组
+  payType: 'personal',        // 支付类型：personal-个对公，enterprise-公对公
+};
+
+const mutations = {
+  SET_BILLS(state, data) {
+    state.bills = data.bills || [];
+    state.totalAmount = data.totalAmount || 0;
+    state.totalCount = data.totalCount || 0;
+    state.payerName = data.payerName || '';
+    state.buildingGroups = data.buildingGroups || [];
+  },
+  SET_PREPAY_BILLS(state, data) {
+    state.prepayBills = data.bills || [];
+    state.totalAmount = data.totalAmount || 0;
+    state.totalCount = data.totalCount || 0;
+    state.payerName = data.payerName || '';
+    state.buildingGroups = data.buildingGroups || [];
+  },
+  SET_PAYMENT_RECORDS(state, records) {
+    state.paymentRecords = records;
+  },
+  SET_CURRENT_BILL(state, bill) {
+    state.currentBill = bill;
+  },
+  ADD_SELECTED_BILL(state, bill) {
+    // 保留已选择的其他费用类型账单，但替换同一费用类型下的账单
+    const existingBillsFromOtherTypes = state.selectedBills.filter(item => 
+      item.feeTypeName !== bill.feeTypeName || 
+      item.buildingId !== bill.buildingId
+    );
+    
+    // 将当前账单加入到已选择的账单列表中
+    state.selectedBills = [...existingBillsFromOtherTypes, bill];
+  },
+  REMOVE_SELECTED_BILL(state, billId) {
+    state.selectedBills = state.selectedBills.filter(bill => bill.billId !== billId);
+  },
+  CLEAR_SELECTED_BILLS(state) {
+    state.selectedBills = [];
+  },
+  SET_PAY_TYPE(state, type) {
+    state.payType = type;
+  },
+};
+
+const actions = {
+  // 获取缴费账单列表
+  async getBills({ commit }, params) {
+    try {
+      const response = await api.getBills(params);
+      if (response.code === '0000000000000000') {
+        commit('SET_BILLS', response.data);
+        return response.data;
+      } else {
+        Toast.fail(response.message || '获取账单列表失败');
+        return null;
+      }
+    } catch (error) {
+      Toast.fail('获取账单列表失败');
+      return null;
+    }
+  },
+
+  // 获取预缴账单列表
+  async getPrepayBills({ commit }, params) {
+    try {
+      const response = await api.getPrepayBills(params);
+      if (response.code === '0000000000000000') {
+        commit('SET_PREPAY_BILLS', response.data);
+        return response.data;
+      } else {
+        Toast.fail(response.message || '获取预缴账单列表失败');
+        return null;
+      }
+    } catch (error) {
+      Toast.fail('获取预缴账单列表失败');
+      return null;
+    }
+  },
+
+  // 获取缴费记录
+  async getPaymentRecords({ commit }, params) {
+    try {
+      const response = await api.getPaymentRecords(params);
+      if (response.code === '0000000000000000') {
+        commit('SET_PAYMENT_RECORDS', response.data.list || []);
+        return response.data;
+      } else {
+        Toast.fail(response.message || '获取缴费记录失败');
+        return null;
+      }
+    } catch (error) {
+      Toast.fail('获取缴费记录失败');
+      return null;
+    }
+  },
+
+  // 获取账单详情
+  async getBillDetail({ commit }, billId) {
+    try {
+      const response = await api.getBillDetail(billId);
+      if (response.code === '0000000000000000') {
+        commit('SET_CURRENT_BILL', response.data);
+        return response.data;
+      } else {
+        Toast.fail(response.message || '获取账单详情失败');
+        return null;
+      }
+    } catch (error) {
+      Toast.fail('获取账单详情失败');
+      return null;
+    }
+  },
+
+  // 获取缴费记录详情
+  async getRecordDetail({ commit }, billId) {
+    try {
+      const response = await api.getRecordDetail(billId);
+      if (response.code === '0000000000000000') {
+        commit('SET_CURRENT_BILL', response.data);
+        return response.data;
+      } else {
+        Toast.fail(response.message || '获取缴费记录详情失败');
+        return null;
+      }
+    } catch (error) {
+      Toast.fail('获取缴费记录详情失败');
+      return null;
+    }
+  },
+
+  // 创建支付订单
+  async createPayOrder({ state }) {
+    if (state.selectedBills.length === 0) {
+      Toast.fail('请选择需要缴费的账单');
+      return null;
+    }
+
+    try {
+      const billIds = state.selectedBills.map(bill => bill.billId);
+      const payType = state.payType;
+      
+      const response = await api.createPayOrder({
+        billIds,
+        payType,
+      });
+      
+      if (response.code === '0000000000000000') {
+        return response.data;
+      } else {
+        Toast.fail(response.message || '创建支付订单失败');
+        return null;
+      }
+    } catch (error) {
+      Toast.fail('创建支付订单失败');
+      return null;
+    }
+  },
+  
+  // 查询支付结果
+  async queryPayResult({ commit }, orderNo) {
+    try {
+      const response = await api.queryPayResult(orderNo);
+      return response.data;
+    } catch (error) {
+      Toast.fail('查询支付结果失败');
+      return null;
+    }
+  },
+  
+  // 取消订单
+  async cancelOrder(_, orderNo) {
+    try {
+      const response = await api.cancelOrder(orderNo);
+      if (response.code === '0000000000000000') {
+        Toast.success('取消订单成功');
+        return true;
+      } else {
+        Toast.fail(response.message || '取消订单失败');
+        return false;
+      }
+    } catch (error) {
+      Toast.fail('取消订单失败');
+      return false;
+    }
+  },
+};
+
+const getters = {
+  selectedBillsTotalAmount(state) {
+    return state.selectedBills.reduce((total, bill) => total + bill.totalNeedAmount, 0);
+  },
+  selectedBillsCount(state) {
+    return state.selectedBills.length;
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters,
+}; 
\ No newline at end of file
diff --git a/h5/src/store/modules/user.js b/h5/src/store/modules/user.js
new file mode 100644
index 0000000..6d36663
--- /dev/null
+++ b/h5/src/store/modules/user.js
@@ -0,0 +1,107 @@
+import { Toast } from 'vant';
+import api from '@/api/user';
+
+const state = {
+  userInfo: null,         // 用户信息
+  currentPayer: null,     // 当前选择的业户
+  payerList: [],          // 业户列表
+};
+
+const mutations = {
+  SET_USER_INFO(state, userInfo) {
+    state.userInfo = userInfo;
+  },
+  SET_CURRENT_PAYER(state, payer) {
+    state.currentPayer = payer;
+    // 将当前选择的业户ID保存到localStorage
+    if (payer) {
+      localStorage.setItem('currentPayerId', payer.id);
+    } else {
+      localStorage.removeItem('currentPayerId');
+    }
+  },
+  SET_PAYER_LIST(state, list) {
+    state.payerList = list;
+  },
+};
+
+const actions = {
+  // 获取用户信息
+//   async getUserInfo({ commit }) {
+//     try {
+//       const response = await api.getUserInfo();
+//       if (response.code === '0000000000000000') {
+//         commit('SET_USER_INFO', response.data);
+//         return response.data;
+//       } else {
+//         Toast.fail(response.message || '获取用户信息失败');
+//         return null;
+//       }
+//     } catch (error) {
+//       Toast.fail('获取用户信息失败');
+//       return null;
+//     }
+//   },
+  
+//   // 获取业户列表
+//   async getPayerList({ commit }) {
+//     try {
+//       const response = await api.getPayerList();
+//       if (response.code === '0000000000000000') {
+//         const payerList = response.data || [];
+//         commit('SET_PAYER_LIST', payerList);
+        
+//         // 如果localStorage中有保存的业户ID，则自动选择
+//         const savedPayerId = localStorage.getItem('currentPayerId');
+//         if (savedPayerId && payerList.length > 0) {
+//           const savedPayer = payerList.find(payer => payer.id === Number(savedPayerId));
+//           if (savedPayer) {
+//             commit('SET_CURRENT_PAYER', savedPayer);
+//           } else {
+//             // 如果没找到保存的业户，则选择第一个
+//             commit('SET_CURRENT_PAYER', payerList[0]);
+//           }
+//         } else if (payerList.length > 0) {
+//           // 默认选择第一个业户
+//           commit('SET_CURRENT_PAYER', payerList[0]);
+//         }
+        
+//         return payerList;
+//       } else {
+//         Toast.fail(response.message || '获取业户列表失败');
+//         return [];
+//       }
+//     } catch (error) {
+//       Toast.fail('获取业户列表失败');
+//       return [];
+//     }
+//   },
+  
+//   // 选择业户
+//   selectPayer({ commit }, payer) {
+//     commit('SET_CURRENT_PAYER', payer);
+//   },
+};
+
+const getters = {
+  // 当前选择的业户ID
+  currentPayerId(state) {
+    return state.currentPayer ? state.currentPayer.id : null;
+  },
+  // 当前选择的业户名称
+  currentPayerName(state) {
+    return state.currentPayer ? state.currentPayer.name : '';
+  },
+  // 是否已选择业户
+  hasSelectedPayer(state) {
+    return !!state.currentPayer;
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters,
+}; 
\ No newline at end of file
diff --git a/h5/src/utils/request.js b/h5/src/utils/request.js
new file mode 100644
index 0000000..9f69d01
--- /dev/null
+++ b/h5/src/utils/request.js
@@ -0,0 +1,164 @@
+import axios from 'axios';
+import { Toast } from 'vant';
+import qs from 'qs';
+import store from '@/store';
+
+// 创建axios实例
+const service = axios.create({
+  baseURL: 'http://192.168.137.45:8080',
+  timeout: 30000,
+  headers: {
+    'Content-Type': 'application/json;charset=utf-8',
+  },
+});
+
+// 请求拦截器
+service.interceptors.request.use(
+  (config) => {
+    // 显示loading，除非请求配置中指定了不显示
+    if (config.showLoading !== false) {
+      store.dispatch('setLoading', true);
+    }
+    
+    // 获取token
+    const token = localStorage.getItem('token');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    
+    // 如果有选择业户，则在请求头中带上业户ID
+    const currentPayerId = store.getters['user/currentPayerId'];
+    if (currentPayerId) {
+      config.headers['X-Payer-Id'] = currentPayerId;
+    }
+    
+    // 处理GET请求参数
+    if (config.method === 'get' && config.params) {
+      config.paramsSerializer = (params) => {
+        return qs.stringify(params, { arrayFormat: 'repeat' });
+      };
+    }
+    
+    return config;
+  },
+  (error) => {
+    // 隐藏loading
+    store.dispatch('setLoading', false);
+    return Promise.reject(error);
+  }
+);
+
+// 响应拦截器
+service.interceptors.response.use(
+  (response) => {
+    // 隐藏loading
+    store.dispatch('setLoading', false);
+    
+    // 处理二进制数据
+    if (response.config.responseType === 'blob') {
+      return response;
+    }
+    
+    const res = response.data;
+    
+    // 判断是否成功
+    if (res.code === '0000000000000000') {
+      return res;
+    }
+    
+    // 处理业务错误
+    if (res.code === 'UNAUTHORIZED') {
+      // 未登录，跳转到登录页
+      Toast.fail('用户未登录或登录已过期');
+      localStorage.removeItem('token');
+      setTimeout(() => {
+        window.location.href = '/login';
+      }, 1500);
+    } else {
+      // 其他业务错误
+      Toast.fail(res.message || '请求失败');
+    }
+    
+    return res;
+  },
+  (error) => {
+    // 隐藏loading
+    store.dispatch('setLoading', false);
+    
+    let message = '请求失败';
+    if (error.response) {
+      switch (error.response.status) {
+        case 401:
+          message = '用户未登录或登录已过期';
+          localStorage.removeItem('token');
+          setTimeout(() => {
+            window.location.href = '/login';
+          }, 1500);
+          break;
+        case 403:
+          message = '拒绝访问';
+          break;
+        case 404:
+          message = '请求地址错误';
+          break;
+        case 500:
+          message = '服务器内部错误';
+          break;
+        default:
+          message = `请求失败(${error.response.status})`;
+      }
+    } else if (error.message.includes('timeout')) {
+      message = '请求超时';
+    }
+    
+    Toast.fail(message);
+    return Promise.reject(error);
+  }
+);
+
+// 封装请求方法
+export const request = {
+  get(url, params, config = {}) {
+    return service({
+      url,
+      method: 'get',
+      params,
+      ...config
+    });
+  },
+  post(url, data, config = {}) {
+    return service({
+      url,
+      method: 'post',
+      data,
+      ...config
+    });
+  },
+  put(url, data, config = {}) {
+    return service({
+      url,
+      method: 'put',
+      data,
+      ...config
+    });
+  },
+  delete(url, params, config = {}) {
+    return service({
+      url,
+      method: 'delete',
+      params,
+      ...config
+    });
+  },
+  download(url, params, config = {}) {
+    return service({
+      url,
+      method: 'get',
+      params,
+      responseType: 'blob',
+      ...config
+    });
+  },
+};
+
+export default service; 
\ No newline at end of file
diff --git a/h5/src/views/payment/BillDetail.vue b/h5/src/views/payment/BillDetail.vue
new file mode 100644
index 0000000..085640f
--- /dev/null
+++ b/h5/src/views/payment/BillDetail.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class="bill-detail-page">
+    <van-nav-bar
+      title="账单详情"
+      left-arrow
+      @click-left="goBack"
+    />
+    
+    <div class="no-data" v-if="!currentBill">
+      <van-loading v-if="loading" type="spinner" color="#1989fa" />
+      <van-empty v-else description="暂无数据" />
+    </div>
+    
+    <template v-if="currentBill">
+      <!-- 基本信息 -->
+      <div class="card">
+        <div class="card-title">基本信息</div>
+        <van-cell-group :border="false">
+          <van-cell title="费用类型" :value="currentBill && currentBill.feTypeName" />
+          <van-cell title="账单编号" :value="currentBill && currentBill.billNo" />
+          <van-cell title="账单状态" :value="currentBill && currentBill.billStatus" />
+          <van-cell title="结清状态" :value="currentBill && currentBill.clearStatus" />
+          <van-cell title="计费周期" :value="currentBill && currentBill.feePeriod" />
+          <van-cell title="应收金额" :value="currentBill && `¥${formatAmount(currentBill.receivableAmount)}`" />
+          <van-cell title="实收金额" :value="currentBill && `¥${formatAmount(currentBill.receivedAmount)}`" />
+          <van-cell title="需收金额" :value="currentBill && `¥${formatAmount(currentBill.needAmount)}`" />
+          <van-cell title="应收日期" :value="currentBill && currentBill.receivableDate" />
+          <van-cell title="关联合同" :value="currentBill && currentBill.contractNo" />
+          <van-cell title="跟进人" :value="currentBill && currentBill.follower" />
+          <van-cell title="关联楼宇" :value="currentBill && currentBill.buildingName" />
+          <van-cell title="关联房间" :value="currentBill && currentBill.roomNumber" />
+          <van-cell title="创建时间" :value="currentBill && currentBill.createTime" />
+          <van-cell title="账单备注" :value="currentBill && currentBill.remark" />
+        </van-cell-group>
+      </div>
+      
+      <!-- 滞纳金信息 -->
+      <div class="card">
+        <div class="card-title">滞纳金信息</div>
+        <van-cell-group :border="false">
+          <van-cell title="需收滞纳金" :value="`¥${formatAmount(currentBill.needOvdueAmt || 0)}`" />
+          <van-cell title="已收滞纳金" :value="`¥${formatAmount(currentBill.receivedOvdueAmt || 0)}`" />
+          <van-cell title="起算天数" :value="`${currentBill.ovdueStartDays || 0}天`" />
+          <van-cell title="滞纳金比例" :value="`${parseFloat((currentBill.ovdueIntRate || 0) * 100).toFixed(3)}%/天`" />
+          <van-cell title="滞纳金上限" :value="`${parseFloat((currentBill.ovdueLimitRate || 0) * 100).toFixed(0)}%`" />
+        </van-cell-group>
+      </div>
+      
+      <!-- 账单明细 -->
+      <div class="card" v-if="currentBill.billDetails && currentBill.billDetails.length > 0">
+        <div class="card-title">账单明细</div>
+        <div class="bill-detail-list">
+          <div 
+            v-for="detail in currentBill.billDetails" 
+            :key="detail.billDetailId" 
+            class="bill-detail-item"
+            @click="showBillDetailInfo(detail)"
+          >
+            <div class="bill-detail-type">
+              <van-tag :type="detail.billDetailType == '0' ? 'primary' : 'warning'">
+                {{ detail.billDetailType == '0' ? '原账单' : '滞纳金' }}
+              </van-tag>
+            </div>
+            <div class="bill-detail-name">{{ detail.feTypeName || '未知费用类型' }}</div>
+            <div class="bill-detail-amount">¥{{ formatAmount(detail.billAmount || 0) }}</div>
+            <van-icon name="arrow" />
+          </div>
+        </div>
+      </div>
+    </template>
+    
+    <!-- 账单明细详情弹窗 -->
+    <van-popup v-model="showDetailPopup" round position="bottom" style="height: 70%">
+      <div class="popup-header">
+        <div class="popup-title">明细详情</div>
+        <van-icon name="cross" @click="showDetailPopup = false" />
+      </div>
+      <div class="popup-content" v-if="selectedDetail">
+        <van-cell-group :border="false">
+          <van-cell title="费用类型" :value="selectedDetail.feTypeName || '未知'" />
+          <van-cell title="账单编号" :value="selectedDetail.totBillNo || '未知'" />
+          <van-cell title="计费周期" :value="selectedDetail.chggBgnDt + '至' + selectedDetail.chggEndDt" />
+          <van-cell title="账单金额" :value="`¥${formatAmount(selectedDetail.accblAmt || 0)}`" />
+          <van-cell title="关联合同" :value="selectedDetail.contractNo || '未知'" />
+          <van-cell title="创建时间" :value="selectedDetail.createTime || '未知'" />
+          <van-cell title="账单备注" :value="selectedDetail.remark || '无'" />
+        </van-cell-group>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import { Toast } from 'vant';
+import api from '@/api/payment';
+
+export default {
+  name: 'BillDetail',
+  data() {
+    return {
+      loading: false,
+      currentBill: null,  // 账单详情
+      showDetailPopup: false,
+      selectedDetail: null,
+    };
+  },
+  computed: {
+    billId() {
+      return this.$route.params.billId;
+    },
+  },
+  created() {
+    this.fetchBillDetail();
+  },
+  methods: {
+    // 获取账单详情
+    async fetchBillDetail() {
+      this.loading = true;
+      
+      try {
+        // 明确设置 showLoading 为 false，避免触发全局 loading
+        const response = await api.getBillDetail(this.billId, { showLoading: false });
+        
+        if (response.code === '0000000000000000') {
+          // 确保数据格式正确
+          if (!response.data) {
+            Toast.fail('账单数据格式不正确');
+            return;
+          }
+          
+          this.currentBill = response.data;
+        } else {
+          Toast.fail(response.message || '获取账单详情失败');
+        }
+      } catch (error) {
+        console.error('获取账单详情出错:', error);
+        Toast.fail('获取账单详情失败');
+      } finally {
+        // 确保在任何情况下都会关闭组件内部的 loading
+        this.loading = false;
+      }
+    },
+    
+    // 返回上一页
+    goBack() {
+      this.$router.go(-1);
+    },
+    
+    // 格式化金额
+    formatAmount(amount) {
+      if (!amount || isNaN(amount)) {
+        return '0.00';
+      }
+      return parseFloat(amount).toFixed(2);
+    },
+    
+    // 显示账单明细详情
+    showBillDetailInfo(detail) {
+      if (!detail) {
+        Toast.fail('明细数据不完整');
+        return;
+      }
+      this.selectedDetail = detail;
+      this.showDetailPopup = true;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.bill-detail-page {
+  padding-bottom: 20px;
+  background-color: #f5f5f5;
+}
+
+.no-data {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 300px;
+}
+
+.bill-detail-list {
+  padding: 0 10px;
+}
+
+.bill-detail-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid #f5f5f5;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+  
+  .bill-detail-type {
+    margin-right: 10px;
+  }
+  
+  .bill-detail-name {
+    flex: 1;
+    font-size: 14px;
+  }
+  
+  .bill-detail-amount {
+    font-size: 15px;
+    font-weight: 500;
+    margin-right: 10px;
+  }
+}
+
+.popup-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  border-bottom: 1px solid #eee;
+  
+  .popup-title {
+    font-size: 16px;
+    font-weight: 500;
+  }
+  
+  .van-icon {
+    font-size: 20px;
+    color: #999;
+  }
+}
+
+.popup-content {
+  padding: 10px 0;
+  overflow-y: auto;
+  max-height: calc(70vh - 56px);
+}
+</style> 
\ No newline at end of file
diff --git a/h5/src/views/payment/EnterprisePay.vue b/h5/src/views/payment/EnterprisePay.vue
new file mode 100644
index 0000000..97b35db
--- /dev/null
+++ b/h5/src/views/payment/EnterprisePay.vue
@@ -0,0 +1,296 @@
+<template>
+  <div class="enterprise-pay-page">
+    <van-nav-bar
+      title="公对公支付"
+      left-arrow
+      @click-left="goBack"
+    />
+    
+    <div class="card payment-info">
+      <div class="payment-header">
+        <div class="payment-title">公对公支付</div>
+        <div class="payment-subtitle">请复制链接至浏览器完成支付</div>
+      </div>
+      <div class="payment-amount">¥{{ formatAmount(amount) }}</div>
+      <div class="countdown">
+        <span>链接有效期：</span>
+        <van-count-down :time="timeRemaining" format="mm:ss" />
+      </div>
+    </div>
+    
+    <div class="card payment-link">
+      <div class="card-title">支付链接</div>
+      <div class="link-box">
+        <div class="link-content">{{ payLink }}</div>
+        <van-button 
+          type="primary" 
+          size="small"
+          :disabled="!payLink"
+          @click="copyLink"
+        >复制链接</van-button>
+      </div>
+      <div class="tips">
+        <p>温馨提示：</p>
+        <p>1. 该链接5分钟内有效，请尽快完成支付</p>
+        <p>2. 复制链接后可粘贴至浏览器地址栏打开</p>
+        <p>3. 支付成功后，系统将自动处理订单</p>
+      </div>
+    </div>
+    
+    <div class="buttons">
+      <van-button type="default" block @click="goBack">返回</van-button>
+      <van-button type="primary" block @click="checkPayStatus">查询支付结果</van-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Toast } from 'vant';
+import clipboard from 'clipboard';
+import api from '@/api/payment';
+
+export default {
+  name: 'EnterprisePay',
+  data() {
+    return {
+      orderNo: '',
+      amount: 0,
+      payLink: '',
+      timeRemaining: 5 * 60 * 1000, // 5分钟倒计时
+      timer: null,
+      loadingStatus: false,
+      clipboardInstance: null,
+    };
+  },
+  computed: {
+    // 检查链接是否过期
+    isLinkExpired() {
+      return this.timeRemaining <= 0;
+    },
+  },
+  created() {
+    // 从路由参数获取订单号和金额
+    this.orderNo = this.$route.query.orderNo;
+    this.amount = this.$route.query.amount || 0;
+    
+    if (!this.orderNo) {
+      Toast('订单信息不完整，请返回重试');
+      return;
+    }
+    
+    // 获取公对公支付链接
+    this.getEnterprisePayLink();
+    
+    // 初始化剪贴板
+    this.initClipboard();
+  },
+  beforeDestroy() {
+    // 清除定时器
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
+    
+    // 销毁剪贴板实例
+    if (this.clipboardInstance) {
+      this.clipboardInstance.destroy();
+    }
+  },
+  methods: {
+    // 初始化剪贴板
+    initClipboard() {
+      this.$nextTick(() => {
+        // 创建虚拟按钮用于clipboard.js
+        const button = document.createElement('button');
+        button.id = 'copy-btn';
+        button.style.display = 'none';
+        document.body.appendChild(button);
+        
+        this.clipboardInstance = new clipboard('#copy-btn', {
+          text: () => this.payLink
+        });
+        
+        this.clipboardInstance.on('success', () => {
+          Toast.success('链接已复制');
+        });
+        
+        this.clipboardInstance.on('error', () => {
+          Toast.fail('复制失败，请手动复制');
+        });
+      });
+    },
+    
+    // 复制链接
+    copyLink() {
+      if (!this.payLink) {
+        Toast('暂无可复制的链接');
+        return;
+      }
+      
+      // 触发剪贴板
+      document.getElementById('copy-btn').click();
+    },
+    
+    // 获取公对公支付链接
+    async getEnterprisePayLink() {
+      try {
+        // 调用API获取支付链接
+        const response = await api.getEnterprisePayUrl(this.orderNo);
+        
+        if (response.code === '0000000000000000') {
+          this.payLink = response.data.payUrl;
+          
+          // 启动倒计时
+          this.startCountdown();
+        } else {
+          Toast.fail(response.message || '获取支付链接失败');
+        }
+      } catch (error) {
+        Toast.fail('获取支付链接失败');
+      }
+    },
+    
+    // 启动倒计时
+    startCountdown() {
+      this.timer = setInterval(() => {
+        this.timeRemaining -= 1000;
+        
+        // 检查链接是否过期
+        if (this.timeRemaining <= 0) {
+          clearInterval(this.timer);
+          this.payLink = '链接已过期，请返回重新获取';
+          Toast('支付链接已过期');
+        }
+      }, 1000);
+    },
+    
+    // 格式化金额
+    formatAmount(amount) {
+      return parseFloat(amount).toFixed(2);
+    },
+    
+    // 返回上一页
+    goBack() {
+      this.$router.go(-1);
+    },
+    
+    // 查询支付结果
+    async checkPayStatus() {
+      if (this.loadingStatus) return;
+      
+      this.loadingStatus = true;
+      Toast.loading({
+        message: '查询支付结果中...',
+        forbidClick: true,
+      });
+      
+      try {
+        const response = await api.queryPayResult(this.orderNo);
+        
+        Toast.clear();
+        this.loadingStatus = false;
+        
+        if (response.code === '0000000000000000') {
+          const result = response.data;
+          
+          // 跳转到支付结果页
+          this.$router.replace({
+            path: '/payment/pay-result',
+            query: {
+              orderNo: this.orderNo,
+              status: result.status,
+              amount: this.amount,
+            },
+          });
+        } else {
+          Toast.fail(response.message || '查询支付结果失败');
+        }
+      } catch (error) {
+        Toast.clear();
+        this.loadingStatus = false;
+        Toast.fail('查询支付结果失败，请稍后再试');
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.enterprise-pay-page {
+  padding-bottom: 20px;
+  background-color: #f5f5f5;
+}
+
+.payment-info {
+  text-align: center;
+  padding: 20px 0;
+  
+  .payment-header {
+    margin-bottom: 16px;
+    
+    .payment-title {
+      font-size: 18px;
+      font-weight: 500;
+      margin-bottom: 8px;
+    }
+    
+    .payment-subtitle {
+      font-size: 14px;
+      color: #666;
+    }
+  }
+  
+  .payment-amount {
+    font-size: 28px;
+    font-weight: bold;
+    margin-bottom: 16px;
+  }
+  
+  .countdown {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+    color: #666;
+    
+    .van-count-down {
+      color: var(--danger-color);
+    }
+  }
+}
+
+.payment-link {
+  .link-box {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+    
+    .link-content {
+      flex: 1;
+      background-color: #f8f8f8;
+      padding: 12px;
+      border-radius: 4px;
+      font-size: 14px;
+      word-break: break-all;
+      margin-right: 10px;
+      color: #666;
+    }
+  }
+  
+  .tips {
+    font-size: 12px;
+    color: #999;
+    line-height: 1.6;
+    
+    p {
+      margin: 4px 0;
+    }
+  }
+}
+
+.buttons {
+  margin: 20px 12px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+</style> 
\ No newline at end of file
diff --git a/h5/src/views/payment/Index.vue b/h5/src/views/payment/Index.vue
new file mode 100644
index 0000000..4f13720
--- /dev/null
+++ b/h5/src/views/payment/Index.vue
@@ -0,0 +1,619 @@
+<template>
+  <div class="payment-page">
+    <h1 class="page-title">在线缴费</h1>
+    
+    <!-- 缴费人信息与记录按钮 -->
+    <div class="user-info-bar bg-white p-3 flex justify-between align-center">
+      <div>
+        <span>缴费人: </span>
+        <span class="text-primary">{{ payerName }}</span>
+      </div>
+      <van-button icon="records" size="small" type="info" plain @click="goToRecords">缴费记录</van-button>
+    </div>
+    
+    <div class="divider"></div>
+    
+    <!-- 账单列表 -->
+    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+      <van-list
+        v-model="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="onLoad"
+      >
+        <!-- 没有账单数据时显示的内容 -->
+        <div v-if="buildingGroups.length === 0 && !loading" class="empty-data">
+          <van-empty image="search" description="暂无账单数据" />
+        </div>
+        
+        <!-- 账单列表 (楼宇分组) -->
+        <div v-for="building in buildingGroups" :key="building.buildingId" class="bill-group">
+          <!-- 楼宇名称 (一级) -->
+          <div class="bill-group-header">
+            <!-- <div class="checkbox-wrapper" @click.stop="toggleBuildingCheck(building)">
+              <van-checkbox
+                :value="isBuildingChecked(building)"
+              />
+            </div> -->
+            <div class="header-content" @click="toggleBuilding(building.buildingId)">
+              <span class="building-name">{{ building.buildingName }}</span>
+              <span class="building-info">
+                {{ building.totalCount }}项 | ¥{{ formatAmount(building.totalAmount) }}
+              </span>
+              <van-icon :name="buildingExpanded[building.buildingId] ? 'arrow-up' : 'arrow-down'" />
+            </div>
+          </div>
+          
+          <div v-show="buildingExpanded[building.buildingId]">
+            <!-- 费用类型分组 (二级) -->
+            <div 
+              v-for="feeType in building.feeTypeGroups" 
+              :key="`${building.buildingId}_${feeType.feTypeName}`"
+              class="fee-type-group"
+            >
+              <div class="fee-type-header ml-4">
+                <!-- <div class="checkbox-wrapper ml-4" @click.stop="toggleFeeTypeCheck(building, feeType)">
+                  <van-checkbox
+                    :value="isFeeTypeChecked(building.buildingId, feeType)"
+                  />
+                </div> -->
+                <div class="header-content" @click="toggleFeeType(building.buildingId, feeType.feTypeName)">
+                  <span class="fee-type-name">{{ feeType.feTypeName }}</span>
+                  <span class="fee-type-info">
+                    {{ feeType.totalCount }}项 | ¥{{ formatAmount(feeType.totalAmount) }}
+                  </span>
+                  <van-icon :name="feeTypeExpanded[`${building.buildingId}_${feeType.feTypeName}`] ? 'arrow-up' : 'arrow-down'" />
+                </div>
+              </div>
+              
+              <div v-show="feeTypeExpanded[`${building.buildingId}_${feeType.feTypeName}`]">
+                <!-- 账单列表 (三级) -->
+                <div 
+                  v-for="bill in feeType.bills" 
+                  :key="bill.billId"
+                  class="bill-item"
+                >
+                  <div class="checkbox-wrapper ml-5" @click.stop="toggleCheck(bill)">
+                    <van-checkbox
+                      :value="isChecked(bill)"
+                    />
+                  </div>
+                  <div class="bill-content" @click="viewBillDetail(bill.billId)">
+                    <div class="bill-info">
+                      <div class="bill-remark">{{ bill.remark }}</div>
+                      <div class="bill-date">应收日期: {{ bill.pybDt }}</div>
+                    </div>
+                    <div class="bill-amount">¥{{ formatAmount(bill.totalNeedAmount) }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    
+    <!-- 底部操作栏 -->
+    <div class="footer-action-bar">
+      <div class="summary-info">
+        <div class="flex align-center">
+          <span class="ml-3">已选: {{ selectedBillsCount }}项</span>
+        </div>
+        <div class="total-amount">合计: <span class="text-danger">¥{{ formatAmount(selectedBillsTotalAmount) }}</span></div>
+      </div>
+      <div class="action-buttons">
+        <van-button 
+          type="default" 
+          size="normal" 
+          class="mr-2"
+          @click="goToPrepay"
+        >预缴费</van-button>
+        <van-button 
+          type="primary" 
+          size="normal" 
+          :disabled="selectedBillsCount === 0"
+          @click="showPaymentTypeDialog"
+        >去缴费</van-button>
+      </div>
+    </div>
+    
+    <!-- 支付方式选择 -->
+    <van-dialog
+      v-model="paymentTypeVisible"
+      title="选择支付方式"
+      :show-confirm-button="false"
+      :close-on-click-overlay="true"
+    >
+      <div class="payment-type-options">
+        <div class="payment-type-item">
+          <div class="radio-wrapper" @click.stop="selectPaymentType('personal')">
+            <van-radio :name="'personal'" v-model="paymentType">个对公缴费</van-radio>
+          </div>
+          <div class="payment-type-desc">个人对公司支付，通过微信/支付宝等方式</div>
+        </div>
+        <div class="payment-type-item">
+          <div class="radio-wrapper" @click.stop="selectPaymentType('enterprise')">
+            <van-radio :name="'enterprise'" v-model="paymentType">公对公缴费</van-radio>
+          </div>
+          <div class="payment-type-desc">公司对公司支付，通过银行转账方式</div>
+        </div>
+      </div>
+      <div class="dialog-footer">
+        <van-button type="default" block @click="cancelPaymentType">取消</van-button>
+        <van-button type="primary" block @click="confirmPaymentType">确定</van-button>
+      </div>
+    </van-dialog>
+  </div>
+</template>
+
+<script>
+import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
+import api from '@/api/payment';
+
+export default {
+  name: 'PaymentIndex',
+  data() {
+    return {
+      refreshing: false,
+      loading: false,
+      finished: false,
+      pageNum: 1,
+      pageSize: 20,
+      
+      buildingGroups: [],   // 本地保存楼宇分组数据
+      totalAmount: 0,       // 总金额
+      totalCount: 0,        // 总数量
+      payerName: '',        // 缴费人姓名
+      
+      buildingExpanded: {},  // 楼宇展开状态
+      feeTypeExpanded: {},   // 费用类型展开状态
+      
+      paymentTypeVisible: false, // 支付方式选择弹窗
+      paymentType: 'personal',   // 支付方式
+    };
+  },
+  computed: {
+    ...mapGetters('payment', [
+      'selectedBillsCount',
+      'selectedBillsTotalAmount',
+    ]),
+    ...mapState('payment', ['selectedBills']),
+  },
+  watch: {
+    // 监听选中账单数量变化
+    selectedBillsCount(newVal) {
+      // 监听但不需要执行全选相关逻辑
+    },
+  },
+  created() {
+    this.loadData();
+  },
+  methods: {
+    ...mapMutations('payment', [
+      'ADD_SELECTED_BILL',
+      'REMOVE_SELECTED_BILL',
+      'CLEAR_SELECTED_BILLS',
+      'SET_PAY_TYPE',
+    ]),
+    ...mapActions('payment', ['createPayOrder']),
+    
+    // 格式化金额
+    formatAmount(amount) {
+      return parseFloat(amount).toFixed(2);
+    },
+    
+    // 加载数据
+    async loadData() {
+      try {
+        this.loading = true;
+        const params = {
+          pageNum: this.pageNum,
+          pageSize: this.pageSize,
+          payerId: '1', // 直接使用默认业户ID
+          clearStatus: '4',  // 待收款
+        };
+        
+        const response = await api.getBills(params);
+        
+        if (response.code === '0000000000000000') {
+          const data = response.data;
+          
+          // 保存数据到本地
+          this.buildingGroups = data.buildingGroups || [];
+          this.totalAmount = data.totalAmount || 0;
+          this.totalCount = data.totalCount || 0;
+          this.payerName = data.payerName || '默认业户';
+          
+          this.pageNum++;
+          this.finished = true;  // 一次性加载所有数据
+          
+          // 默认展开所有楼宇
+          this.buildingGroups.forEach(building => {
+            this.$set(this.buildingExpanded, building.buildingId, true);
+          });
+        } else {
+          this.$toast.fail(response.message || '获取账单列表失败');
+        }
+      } catch (error) {
+        this.$toast.fail('获取账单列表失败');
+      } finally {
+        this.loading = false;
+        this.refreshing = false;
+      }
+    },
+    
+    // 下拉刷新
+    onRefresh() {
+      this.resetData();
+      this.loadData();
+    },
+    
+    // 上拉加载更多
+    onLoad() {
+      this.loadData();
+    },
+    
+    // 重置数据
+    resetData() {
+      this.pageNum = 1;
+      this.finished = false;
+      this.CLEAR_SELECTED_BILLS();
+    },
+    
+    // 切换楼宇展开状态
+    toggleBuilding(buildingId) {
+      this.$set(this.buildingExpanded, buildingId, !this.buildingExpanded[buildingId]);
+    },
+    
+    // 切换费用类型展开状态
+    toggleFeeType(buildingId, feTypeName) {
+      const key = `${buildingId}_${feTypeName}`;
+      this.$set(this.feeTypeExpanded, key, !this.feeTypeExpanded[key]);
+    },
+    
+    // 判断账单是否被选中
+    isChecked(bill) {
+      return this.selectedBills.some(item => item.billId === bill.billId);
+    },
+    
+    // 判断费用类型是否被选中（全部子账单被选中）
+    isFeeTypeChecked(buildingId, feeType) {
+      if (feeType.bills.length === 0) return false;
+      return feeType.bills.every(bill => this.isChecked(bill));
+    },
+    
+    // 判断楼宇是否被选中（全部费用类型被选中）
+    isBuildingChecked(building) {
+      if (building.feeTypeGroups.length === 0) return false;
+      return building.feeTypeGroups.every(feeType => 
+        this.isFeeTypeChecked(building.buildingId, feeType)
+      );
+    },
+    
+    // 切换费用类型选中状态
+    toggleFeeTypeCheck(building, feeType) {
+      const checked = this.isFeeTypeChecked(building.buildingId, feeType);
+      
+      if (checked) {
+        // 如果已选中，则移除该费用类型下的所有账单
+        const billIdsToRemove = feeType.bills.map(bill => bill.billId);
+        billIdsToRemove.forEach(billId => {
+          this.REMOVE_SELECTED_BILL(billId);
+        });
+      } else {
+        // 如果未选中，则选择该费用类型下的第一条账单
+        if (feeType.bills.length > 0) {
+          const bill = feeType.bills[0];
+          // 确保账单对象包含费用类型名称和楼宇ID信息
+          bill.feeTypeName = feeType.feTypeName;
+          bill.buildingId = building.buildingId;
+          this.ADD_SELECTED_BILL(bill);
+        }
+      }
+    },
+    
+    // 切换楼宇选中状态
+    toggleBuildingCheck(building) {
+      const checked = this.isBuildingChecked(building);
+      
+      if (checked) {
+        // 如果已选中，则移除该楼宇下的所有账单
+        building.feeTypeGroups.forEach(feeType => {
+          const billIdsToRemove = feeType.bills.map(bill => bill.billId);
+          billIdsToRemove.forEach(billId => {
+            this.REMOVE_SELECTED_BILL(billId);
+          });
+        });
+      } else {
+        // 如果未选中，则选择每个费用类型下的第一条账单
+        building.feeTypeGroups.forEach(feeType => {
+          if (feeType.bills.length > 0) {
+            const bill = feeType.bills[0];
+            // 确保账单对象包含费用类型名称和楼宇ID信息
+            bill.feeTypeName = feeType.feTypeName;
+            bill.buildingId = building.buildingId;
+            this.ADD_SELECTED_BILL(bill);
+          }
+        });
+      }
+    },
+    
+    // 切换账单选中状态
+    toggleCheck(bill) {
+      // 确保账单对象包含所需信息
+      const feeType = this.findFeeTypeByBill(bill);
+      const building = this.findBuildingByBill(bill);
+      
+      if (feeType && building) {
+        bill.feeTypeName = feeType.feTypeName;
+        bill.buildingId = building.buildingId;
+      }
+      
+      if (this.isChecked(bill)) {
+        this.REMOVE_SELECTED_BILL(bill.billId);
+      } else {
+        this.ADD_SELECTED_BILL(bill);
+      }
+    },
+    
+    // 查找账单所属的费用类型
+    findFeeTypeByBill(bill) {
+      for (const building of this.buildingGroups) {
+        for (const feeType of building.feeTypeGroups) {
+          if (feeType.bills.some(b => b.billId === bill.billId)) {
+            return feeType;
+          }
+        }
+      }
+      return null;
+    },
+    
+    // 查找账单所属的楼宇
+    findBuildingByBill(bill) {
+      for (const building of this.buildingGroups) {
+        for (const feeType of building.feeTypeGroups) {
+          if (feeType.bills.some(b => b.billId === bill.billId)) {
+            return building;
+          }
+        }
+      }
+      return null;
+    },
+    
+    // 查看账单详情
+    viewBillDetail(billId) {
+      this.$router.push(`/payment/bill-detail/${billId}`);
+    },
+    
+    // 跳转到缴费记录页面
+    goToRecords() {
+      this.$router.push('/payment/records');
+    },
+    
+    // 跳转到预缴费页面
+    goToPrepay() {
+      this.$router.push('/payment/prepay');
+    },
+    
+    // 显示支付方式选择弹窗
+    showPaymentTypeDialog() {
+      this.paymentTypeVisible = true;
+    },
+    
+    // 选择支付方式
+    selectPaymentType(type) {
+      this.paymentType = type;
+    },
+    
+    // 取消支付方式选择
+    cancelPaymentType() {
+      this.paymentTypeVisible = false;
+    },
+    
+    // 确认支付方式
+    confirmPaymentType() {
+      this.SET_PAY_TYPE(this.paymentType);
+      this.paymentTypeVisible = false;
+      this.goPay();
+    },
+    
+    // 去支付
+    async goPay() {
+      if (this.selectedBillsCount === 0) {
+        this.$toast('请选择需要缴费的账单');
+        return;
+      }
+      
+      // 创建支付订单
+      const orderData = await this.createPayOrder();
+      if (!orderData) return;
+      
+      // 根据支付类型处理
+      if (this.paymentType === 'personal') {
+        // 个对公支付，唤起支付
+        // 这里应该跳转到第三方支付页面，根据实际情况实现
+        window.location.href = orderData.payUrl;
+      } else {
+        // 公对公支付，展示支付链接
+        this.$router.push({
+          path: '/payment/enterprise-pay',
+          query: { 
+            orderNo: orderData.orderNo,
+            amount: orderData.amount
+          }
+        });
+      }
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.payment-page {
+  padding-bottom: 60px;
+}
+
+.user-info-bar {
+  padding: 12px 16px;
+}
+
+.bill-group {
+  margin-bottom: 8px;
+  background-color: #fff;
+}
+
+.bill-group-header {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  font-size: 16px;
+  font-weight: 500;
+  background-color: #f8f8f8;
+  
+  .header-content {
+    display: flex;
+    flex: 1;
+    align-items: center;
+  }
+  
+  .building-name {
+    flex: 1;
+    margin-left: 8px;
+  }
+  
+  .building-info {
+    margin-right: 8px;
+    font-size: 14px;
+    color: #666;
+  }
+}
+
+.fee-type-group {
+  border-bottom: 1px solid #eee;
+}
+
+.fee-type-header {
+  display: flex;
+  align-items: center;
+  padding: 10px 16px;
+  font-size: 15px;
+  
+  .header-content {
+    display: flex;
+    flex: 1;
+    align-items: center;
+  }
+  
+  .fee-type-name {
+    flex: 1;
+    margin-left: 8px;
+  }
+  
+  .fee-type-info {
+    margin-right: 8px;
+    font-size: 14px;
+    color: #666;
+  }
+}
+
+.bill-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid #f5f5f5;
+  
+  .bill-content {
+    display: flex;
+    flex: 1;
+    align-items: center;
+  }
+  
+  .bill-info {
+    flex: 1;
+    margin-left: 8px;
+  }
+  
+  .bill-remark {
+    font-size: 14px;
+    margin-bottom: 4px;
+  }
+  
+  .bill-date {
+    font-size: 12px;
+    color: #999;
+  }
+  
+  .bill-amount {
+    font-size: 15px;
+    font-weight: 500;
+    color: #ee0a24;
+  }
+}
+
+.empty-data {
+  padding: 40px 0;
+}
+
+.footer-action-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  
+  .summary-info {
+    flex: 1;
+  }
+  
+  .total-amount {
+    margin-top: 4px;
+    font-size: 15px;
+    
+    span {
+      font-weight: 500;
+      font-size: 16px;
+    }
+  }
+  
+  .action-buttons {
+    min-width: 120px;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
+.payment-type-options {
+  padding: 16px;
+  
+  .payment-type-item {
+    padding: 12px 0;
+    border-bottom: 1px solid #eee;
+    
+    &:last-child {
+      border-bottom: none;
+    }
+    
+    .payment-type-desc {
+      margin-top: 6px;
+      margin-left: 24px;
+      font-size: 12px;
+      color: #999;
+    }
+  }
+}
+
+.dialog-footer {
+  display: flex;
+  padding: 16px;
+  
+  .van-button {
+    flex: 1;
+    margin: 0 4px;
+  }
+}
+
+.checkbox-wrapper, .radio-wrapper {
+  padding: 6px;
+  margin-top: -2px;
+  margin-bottom: -2px;
+  z-index: 10;
+}
+</style> 
\ No newline at end of file
diff --git a/h5/src/views/payment/PayResult.vue b/h5/src/views/payment/PayResult.vue
new file mode 100644
index 0000000..bd03b27
--- /dev/null
+++ b/h5/src/views/payment/PayResult.vue
@@ -0,0 +1,295 @@
+<template>
+  <div class="pay-result-page">
+    <div class="result-content">
+      <!-- 支付成功 -->
+      <div v-if="payStatus === 'success'" class="result-success">
+        <van-icon name="success" />
+        <div class="result-title">支付成功</div>
+        <div class="result-amount">¥{{ formatAmount(amount) }}</div>
+        <div class="result-info">
+          <p>订单编号：{{ orderNo }}</p>
+          <p>支付时间：{{ formatDateTime() }}</p>
+        </div>
+      </div>
+      
+      <!-- 支付处理中 -->
+      <div v-else-if="payStatus === 'processing'" class="result-processing">
+        <van-loading type="spinner" color="#1989fa" size="50px" />
+        <div class="result-title">支付处理中</div>
+        <div class="result-amount">¥{{ formatAmount(amount) }}</div>
+        <div class="result-info">
+          <p>订单编号：{{ orderNo }}</p>
+          <p>请耐心等待，支付结果处理中...</p>
+        </div>
+      </div>
+      
+      <!-- 支付失败 -->
+      <div v-else-if="payStatus === 'failed'" class="result-failed">
+        <van-icon name="cross" />
+        <div class="result-title">支付失败</div>
+        <div class="result-amount">¥{{ formatAmount(amount) }}</div>
+        <div class="result-info">
+          <p>订单编号：{{ orderNo }}</p>
+          <p>支付未完成，请重新支付</p>
+        </div>
+      </div>
+      
+      <!-- 支付已关闭 -->
+      <div v-else-if="payStatus === 'closed'" class="result-closed">
+        <van-icon name="warning-o" />
+        <div class="result-title">支付已关闭</div>
+        <div class="result-amount">¥{{ formatAmount(amount) }}</div>
+        <div class="result-info">
+          <p>订单编号：{{ orderNo }}</p>
+          <p>该订单已关闭，请重新发起支付</p>
+        </div>
+      </div>
+      
+      <!-- 其他状态 -->
+      <div v-else class="result-unknown">
+        <van-icon name="question-o" />
+        <div class="result-title">状态未知</div>
+        <div class="result-amount">¥{{ formatAmount(amount) }}</div>
+        <div class="result-info">
+          <p>订单编号：{{ orderNo }}</p>
+          <p>无法获取支付状态，请稍后查询</p>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 按钮区域 -->
+    <div class="button-group">
+      <van-button 
+        v-if="payStatus === 'processing'" 
+        type="primary" 
+        block 
+        @click="checkPayStatus"
+      >刷新支付结果</van-button>
+      
+      <van-button 
+        v-if="payStatus === 'failed' || payStatus === 'closed'" 
+        type="primary" 
+        block 
+        @click="goToPaymentPage"
+      >重新支付</van-button>
+      
+      <van-button type="default" block @click="goToPaymentPage">返回缴费页面</van-button>
+      
+      <van-button 
+        v-if="payStatus === 'success'" 
+        type="primary" 
+        block 
+        @click="goToRecords"
+      >查看缴费记录</van-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Toast } from 'vant';
+import api from '@/api/payment';
+
+export default {
+  name: 'PayResult',
+  data() {
+    return {
+      orderNo: '',
+      payStatus: '',
+      amount: 0,
+      loadingStatus: false,
+      timer: null,
+    };
+  },
+  created() {
+    // 从路由参数获取支付结果信息
+    this.orderNo = this.$route.query.orderNo;
+    this.payStatus = this.$route.query.status;
+    this.amount = this.$route.query.amount || 0;
+    
+    // 判断支付状态
+    this.payStatus = this.formatPayStatus(this.payStatus);
+    
+    // 如果是处理中状态，启动自动查询
+    if (this.payStatus === 'processing') {
+      this.autoCheckStatus();
+    }
+  },
+  beforeDestroy() {
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
+  },
+  methods: {
+    // 格式化支付状态
+    formatPayStatus(status) {
+      switch (status) {
+        case 'success':
+        case '1':
+          return 'success';
+        case 'processing':
+        case '0':
+          return 'processing';
+        case 'failed':
+        case '2':
+          return 'failed';
+        case 'closed':
+        case '3':
+          return 'closed';
+        default:
+          return 'unknown';
+      }
+    },
+    
+    // 自动查询支付状态
+    autoCheckStatus() {
+      this.timer = setTimeout(() => {
+        this.checkPayStatus();
+      }, 5000); // 5秒后自动查询
+    },
+    
+    // 手动查询支付状态
+    async checkPayStatus() {
+      if (this.loadingStatus) return;
+      
+      this.loadingStatus = true;
+      Toast.loading({
+        message: '查询支付结果中...',
+        forbidClick: true,
+      });
+      
+      try {
+        const response = await api.queryPayResult(this.orderNo);
+        
+        Toast.clear();
+        this.loadingStatus = false;
+        
+        if (response.code === '0000000000000000') {
+          const result = response.data;
+          this.payStatus = this.formatPayStatus(result.status);
+          
+          // 如果仍在处理中，继续自动查询
+          if (this.payStatus === 'processing') {
+            this.autoCheckStatus();
+          }
+        } else {
+          Toast.fail(response.message || '查询支付结果失败');
+        }
+      } catch (error) {
+        Toast.clear();
+        this.loadingStatus = false;
+        Toast.fail('查询支付结果失败，请稍后再试');
+      }
+    },
+    
+    // 格式化金额
+    formatAmount(amount) {
+      return parseFloat(amount).toFixed(2);
+    },
+    
+    // 格式化当前时间
+    formatDateTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, '0');
+      const day = String(now.getDate()).padStart(2, '0');
+      const hours = String(now.getHours()).padStart(2, '0');
+      const minutes = String(now.getMinutes()).padStart(2, '0');
+      const seconds = String(now.getSeconds()).padStart(2, '0');
+      
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    },
+    
+    // 返回缴费页面
+    goToPaymentPage() {
+      this.$router.replace('/payment');
+    },
+    
+    // 跳转到缴费记录
+    goToRecords() {
+      this.$router.replace('/payment/records');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.pay-result-page {
+  min-height: 100vh;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.result-content {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 40px 20px;
+  text-align: center;
+  
+  .van-icon {
+    font-size: 60px;
+    margin-bottom: 20px;
+  }
+  
+  .van-loading {
+    margin-bottom: 20px;
+  }
+  
+  .result-title {
+    font-size: 20px;
+    font-weight: 500;
+    margin-bottom: 16px;
+  }
+  
+  .result-amount {
+    font-size: 32px;
+    font-weight: bold;
+    margin-bottom: 30px;
+  }
+  
+  .result-info {
+    color: #666;
+    font-size: 14px;
+    line-height: 1.8;
+  }
+  
+  .result-success {
+    .van-icon {
+      color: var(--success-color);
+    }
+  }
+  
+  .result-failed {
+    .van-icon {
+      color: var(--danger-color);
+    }
+  }
+  
+  .result-closed {
+    .van-icon {
+      color: var(--warning-color);
+    }
+  }
+  
+  .result-unknown {
+    .van-icon {
+      color: var(--info-color);
+    }
+  }
+}
+
+.button-group {
+  padding: 20px;
+  
+  .van-button {
+    margin-bottom: 12px;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/h5/src/views/payment/PrepayBills.vue b/h5/src/views/payment/PrepayBills.vue
new file mode 100644
index 0000000..270b43d
--- /dev/null
+++ b/h5/src/views/payment/PrepayBills.vue
@@ -0,0 +1,602 @@
+<template>
+  <div class="prepay-bills-page">
+    <van-nav-bar
+      title="预缴账单"
+      left-arrow
+      @click-left="goBack"
+    />
+    
+    <!-- 缴费人信息 -->
+    <div class="user-info-bar bg-white p-3">
+      <span>缴费人: </span>
+      <span class="text-primary">{{ payerName }}</span>
+    </div>
+    
+    <div class="divider"></div>
+    
+    <!-- 账单列表 -->
+    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+      <van-list
+        v-model="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="onLoad"
+      >
+        <!-- 没有账单数据时显示的内容 -->
+        <div v-if="buildingGroups.length === 0 && !loading" class="empty-data">
+          <van-empty image="search" description="暂无预缴账单数据" />
+        </div>
+        
+        <!-- 账单列表 (楼宇分组) -->
+        <div v-for="building in buildingGroups" :key="building.buildingId" class="bill-group">
+          <!-- 楼宇名称 (一级) -->
+          <div class="bill-group-header">
+            <!-- <div class="checkbox-wrapper" @click.stop="toggleBuildingCheck(building)">
+              <van-checkbox
+                :value="isBuildingChecked(building)"
+              />
+            </div> -->
+            <div class="header-content" @click="toggleBuilding(building.buildingId)">
+              <span class="building-name">{{ building.buildingName }}</span>
+              <span class="building-info">
+                {{ building.totalCount }}项 | ¥{{ formatAmount(building.totalAmount) }}
+              </span>
+              <van-icon :name="buildingExpanded[building.buildingId] ? 'arrow-up' : 'arrow-down'" />
+            </div>
+          </div>
+          
+          <div v-show="buildingExpanded[building.buildingId]">
+            <!-- 费用类型分组 (二级) -->
+            <div 
+              v-for="feeType in building.feeTypeGroups" 
+              :key="`${building.buildingId}_${feeType.feTypeName}`"
+              class="fee-type-group"
+            >
+              <div class="fee-type-header ml-4">
+                <!-- <div class="checkbox-wrapper ml-4" @click.stop="toggleFeeTypeCheck(building, feeType)">
+                  <van-checkbox
+                    :value="isFeeTypeChecked(building.buildingId, feeType)"
+                  />
+                </div> -->
+                <div class="header-content" @click="toggleFeeType(building.buildingId, feeType.feTypeName)">
+                  <span class="fee-type-name">{{ feeType.feTypeName }}</span>
+                  <span class="fee-type-info">
+                    {{ feeType.totalCount }}项 | ¥{{ formatAmount(feeType.totalAmount) }}
+                  </span>
+                  <van-icon :name="feeTypeExpanded[`${building.buildingId}_${feeType.feTypeName}`] ? 'arrow-up' : 'arrow-down'" />
+                </div>
+              </div>
+              
+              <div v-show="feeTypeExpanded[`${building.buildingId}_${feeType.feTypeName}`]">
+                <!-- 账单列表 (三级) -->
+                <div 
+                  v-for="bill in feeType.bills" 
+                  :key="bill.billId"
+                  class="bill-item"
+                >
+                  <div class="checkbox-wrapper ml-5" @click.stop="toggleCheck(bill)">
+                    <van-checkbox
+                      :value="isChecked(bill)"
+                    />
+                  </div>
+                  <div class="bill-content" @click="viewBillDetail(bill.billId)">
+                    <div class="bill-info">
+                      <div class="bill-remark">{{ bill.remark }}</div>
+                      <div class="bill-date">应收日期: {{ bill.pybDt }}</div>
+                    </div>
+                    <div class="bill-amount">¥{{ formatAmount(bill.totalNeedAmount) }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    
+    <!-- 底部操作栏 -->
+    <div class="footer-action-bar">
+      <div class="summary-info">
+        <div class="flex align-center">
+          <span>已选: {{ selectedBillsCount }}项</span>
+        </div>
+        <div class="total-amount">合计: <span class="text-danger">¥{{ formatAmount(selectedBillsTotalAmount) }}</span></div>
+      </div>
+      <div class="action-buttons">
+        <van-button 
+          type="primary" 
+          size="normal" 
+          :disabled="selectedBillsCount === 0"
+          @click="showPaymentTypeDialog"
+        >去缴费</van-button>
+      </div>
+    </div>
+    
+    <!-- 支付方式选择 -->
+    <van-dialog
+      v-model="paymentTypeVisible"
+      title="选择支付方式"
+      :show-confirm-button="false"
+      :close-on-click-overlay="true"
+    >
+      <div class="payment-type-options">
+        <div class="payment-type-item">
+          <div class="radio-wrapper" @click.stop="selectPaymentType('personal')">
+            <van-radio :name="'personal'" v-model="paymentType">个对公缴费</van-radio>
+          </div>
+          <div class="payment-type-desc">个人对公司支付，通过微信/支付宝等方式</div>
+        </div>
+        <div class="payment-type-item">
+          <div class="radio-wrapper" @click.stop="selectPaymentType('enterprise')">
+            <van-radio :name="'enterprise'" v-model="paymentType">公对公缴费</van-radio>
+          </div>
+          <div class="payment-type-desc">公司对公司支付，通过银行转账方式</div>
+        </div>
+      </div>
+      <div class="dialog-footer">
+        <van-button type="default" block @click="cancelPaymentType">取消</van-button>
+        <van-button type="primary" block @click="confirmPaymentType">确定</van-button>
+      </div>
+    </van-dialog>
+  </div>
+</template>
+
+<script>
+import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
+import api from '@/api/payment';
+
+export default {
+  name: 'PrepayBills',
+  data() {
+    return {
+      refreshing: false,
+      loading: false,
+      finished: false,
+      pageNum: 1,
+      pageSize: 20,
+      
+      buildingGroups: [],   // 本地保存楼宇分组数据
+      totalAmount: 0,       // 总金额
+      totalCount: 0,        // 总数量
+      payerName: '',        // 缴费人姓名
+      
+      buildingExpanded: {},  // 楼宇展开状态
+      feeTypeExpanded: {},   // 费用类型展开状态
+      
+      paymentTypeVisible: false, // 支付方式选择弹窗
+      paymentType: 'personal',   // 支付方式
+    };
+  },
+  computed: {
+    ...mapGetters('payment', [
+      'selectedBillsCount',
+      'selectedBillsTotalAmount',
+    ]),
+    ...mapState('payment', ['selectedBills']),
+  },
+  created() {
+    this.loadData();
+  },
+  methods: {
+    ...mapMutations('payment', [
+      'ADD_SELECTED_BILL',
+      'REMOVE_SELECTED_BILL',
+      'CLEAR_SELECTED_BILLS',
+      'SET_PAY_TYPE',
+    ]),
+    ...mapActions('payment', ['createPayOrder']),
+    
+    // 格式化金额
+    formatAmount(amount) {
+      return parseFloat(amount).toFixed(2);
+    },
+    
+    // 加载数据
+    async loadData() {
+      try {
+        this.loading = true;
+        const params = {
+          pageNum: this.pageNum,
+          pageSize: this.pageSize,
+          payerId: '2', // 直接使用默认业户ID
+        };
+        
+        const response = await api.getPrepayBills(params);
+        
+        if (response.code === '0000000000000000') {
+          const data = response.data;
+          
+          // 保存数据到本地
+          this.buildingGroups = data.buildingGroups || [];
+          this.totalAmount = data.totalAmount || 0;
+          this.totalCount = data.totalCount || 0;
+          this.payerName = data.payerName || '默认业户';
+          
+          this.pageNum++;
+          this.finished = true;  // 一次性加载所有数据
+          
+          // 默认展开所有楼宇
+          this.buildingGroups.forEach(building => {
+            this.$set(this.buildingExpanded, building.buildingId, true);
+          });
+        } else {
+          this.$toast.fail(response.message || '获取预缴账单列表失败');
+        }
+      } catch (error) {
+        this.$toast.fail('获取预缴账单列表失败');
+      } finally {
+        this.loading = false;
+        this.refreshing = false;
+      }
+    },
+    
+    // 下拉刷新
+    onRefresh() {
+      this.resetData();
+      this.loadData();
+    },
+    
+    // 上拉加载更多
+    onLoad() {
+      this.loadData();
+    },
+    
+    // 重置数据
+    resetData() {
+      this.pageNum = 1;
+      this.finished = false;
+      this.CLEAR_SELECTED_BILLS();
+    },
+    
+    // 切换楼宇展开状态
+    toggleBuilding(buildingId) {
+      this.$set(this.buildingExpanded, buildingId, !this.buildingExpanded[buildingId]);
+    },
+    
+    // 切换费用类型展开状态
+    toggleFeeType(buildingId, feTypeName) {
+      const key = `${buildingId}_${feTypeName}`;
+      this.$set(this.feeTypeExpanded, key, !this.feeTypeExpanded[key]);
+    },
+    
+    // 判断账单是否被选中
+    isChecked(bill) {
+      return this.selectedBills.some(item => item.billId === bill.billId);
+    },
+    
+    // 判断费用类型是否被选中（全部子账单被选中）
+    isFeeTypeChecked(buildingId, feeType) {
+      if (feeType.bills.length === 0) return false;
+      return feeType.bills.every(bill => this.isChecked(bill));
+    },
+    
+    // 判断楼宇是否被选中（全部费用类型被选中）
+    isBuildingChecked(building) {
+      if (building.feeTypeGroups.length === 0) return false;
+      return building.feeTypeGroups.every(feeType => 
+        this.isFeeTypeChecked(building.buildingId, feeType)
+      );
+    },
+    
+    // 切换费用类型选中状态
+    toggleFeeTypeCheck(building, feeType) {
+      const checked = this.isFeeTypeChecked(building.buildingId, feeType);
+      
+      if (checked) {
+        // 如果已选中，则移除该费用类型下的所有账单
+        const billIdsToRemove = feeType.bills.map(bill => bill.billId);
+        billIdsToRemove.forEach(billId => {
+          this.REMOVE_SELECTED_BILL(billId);
+        });
+      } else {
+        // 如果未选中，则选择该费用类型下的第一条账单
+        if (feeType.bills.length > 0) {
+          const bill = feeType.bills[0];
+          // 确保账单对象包含费用类型名称和楼宇ID信息
+          bill.feeTypeName = feeType.feTypeName;
+          bill.buildingId = building.buildingId;
+          this.ADD_SELECTED_BILL(bill);
+        }
+      }
+    },
+    
+    // 切换楼宇选中状态
+    toggleBuildingCheck(building) {
+      const checked = this.isBuildingChecked(building);
+      
+      if (checked) {
+        // 如果已选中，则移除该楼宇下的所有账单
+        building.feeTypeGroups.forEach(feeType => {
+          const billIdsToRemove = feeType.bills.map(bill => bill.billId);
+          billIdsToRemove.forEach(billId => {
+            this.REMOVE_SELECTED_BILL(billId);
+          });
+        });
+      } else {
+        // 如果未选中，则选择每个费用类型下的第一条账单
+        building.feeTypeGroups.forEach(feeType => {
+          if (feeType.bills.length > 0) {
+            const bill = feeType.bills[0];
+            // 确保账单对象包含费用类型名称和楼宇ID信息
+            bill.feeTypeName = feeType.feTypeName;
+            bill.buildingId = building.buildingId;
+            this.ADD_SELECTED_BILL(bill);
+          }
+        });
+      }
+    },
+    
+    // 切换账单选中状态
+    toggleCheck(bill) {
+      // 确保账单对象包含所需信息
+      const feeType = this.findFeeTypeByBill(bill);
+      const building = this.findBuildingByBill(bill);
+      
+      if (feeType && building) {
+        bill.feeTypeName = feeType.feTypeName;
+        bill.buildingId = building.buildingId;
+      }
+      
+      if (this.isChecked(bill)) {
+        this.REMOVE_SELECTED_BILL(bill.billId);
+      } else {
+        this.ADD_SELECTED_BILL(bill);
+      }
+    },
+    
+    // 查找账单所属的费用类型
+    findFeeTypeByBill(bill) {
+      for (const building of this.buildingGroups) {
+        for (const feeType of building.feeTypeGroups) {
+          if (feeType.bills.some(b => b.billId === bill.billId)) {
+            return feeType;
+          }
+        }
+      }
+      return null;
+    },
+    
+    // 查找账单所属的楼宇
+    findBuildingByBill(bill) {
+      for (const building of this.buildingGroups) {
+        for (const feeType of building.feeTypeGroups) {
+          if (feeType.bills.some(b => b.billId === bill.billId)) {
+            return building;
+          }
+        }
+      }
+      return null;
+    },
+    
+    // 查看账单详情
+    viewBillDetail(billId) {
+      this.$router.push(`/payment/bill-detail/${billId}`);
+    },
+    
+    // 返回上一页
+    goBack() {
+      this.$router.go(-1);
+    },
+    
+    // 显示支付方式选择弹窗
+    showPaymentTypeDialog() {
+      this.paymentTypeVisible = true;
+    },
+    
+    // 选择支付方式
+    selectPaymentType(type) {
+      this.paymentType = type;
+    },
+    
+    // 取消支付方式选择
+    cancelPaymentType() {
+      this.paymentTypeVisible = false;
+    },
+    
+    // 确认支付方式
+    confirmPaymentType() {
+      this.SET_PAY_TYPE(this.paymentType);
+      this.paymentTypeVisible = false;
+      this.goPay();
+    },
+    
+    // 去支付
+    async goPay() {
+      if (this.selectedBillsCount === 0) {
+        this.$toast('请选择需要缴费的账单');
+        return;
+      }
+      
+      // 创建支付订单
+      const orderData = await this.createPayOrder();
+      if (!orderData) return;
+      
+      // 根据支付类型处理
+      if (this.paymentType === 'personal') {
+        // 个对公支付，唤起支付
+        // 这里应该跳转到第三方支付页面，根据实际情况实现
+        window.location.href = orderData.payUrl;
+      } else {
+        // 公对公支付，展示支付链接
+        this.$router.push({
+          path: '/payment/enterprise-pay',
+          query: { 
+            orderNo: orderData.orderNo,
+            amount: orderData.amount
+          }
+        });
+      }
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.prepay-bills-page {
+  padding-bottom: 60px;
+}
+
+.user-info-bar {
+  padding: 12px 16px;
+}
+
+.bill-group {
+  margin-bottom: 8px;
+  background-color: #fff;
+}
+
+.bill-group-header {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  font-size: 16px;
+  font-weight: 500;
+  background-color: #f8f8f8;
+  
+  .header-content {
+    display: flex;
+    flex: 1;
+    align-items: center;
+  }
+  
+  .building-name {
+    flex: 1;
+    margin-left: 8px;
+  }
+  
+  .building-info {
+    margin-right: 8px;
+    font-size: 14px;
+    color: #666;
+  }
+}
+
+.fee-type-group {
+  border-bottom: 1px solid #eee;
+}
+
+.fee-type-header {
+  display: flex;
+  align-items: center;
+  padding: 10px 16px;
+  font-size: 15px;
+  
+  .header-content {
+    display: flex;
+    flex: 1;
+    align-items: center;
+  }
+  
+  .fee-type-name {
+    flex: 1;
+    margin-left: 8px;
+  }
+  
+  .fee-type-info {
+    margin-right: 8px;
+    font-size: 14px;
+    color: #666;
+  }
+}
+
+.bill-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid #f5f5f5;
+  
+  .bill-content {
+    display: flex;
+    flex: 1;
+    align-items: center;
+  }
+  
+  .bill-info {
+    flex: 1;
+    margin-left: 8px;
+  }
+  
+  .bill-remark {
+    font-size: 14px;
+    margin-bottom: 4px;
+  }
+  
+  .bill-date {
+    font-size: 12px;
+    color: #999;
+  }
+  
+  .bill-amount {
+    font-size: 15px;
+    font-weight: 500;
+    color: #ee0a24;
+  }
+}
+
+.empty-data {
+  padding: 40px 0;
+}
+
+.footer-action-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  
+  .summary-info {
+    flex: 1;
+  }
+  
+  .total-amount {
+    margin-top: 4px;
+    font-size: 15px;
+    
+    span {
+      font-weight: 500;
+      font-size: 16px;
+    }
+  }
+  
+  .action-buttons {
+    min-width: 120px;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
+.payment-type-options {
+  padding: 16px;
+  
+  .payment-type-item {
+    padding: 12px 0;
+    border-bottom: 1px solid #eee;
+    
+    &:last-child {
+      border-bottom: none;
+    }
+    
+    .payment-type-desc {
+      margin-top: 6px;
+      margin-left: 24px;
+      font-size: 12px;
+      color: #999;
+    }
+  }
+}
+
+.dialog-footer {
+  display: flex;
+  padding: 16px;
+  
+  .van-button {
+    flex: 1;
+    margin: 0 4px;
+  }
+}
+
+.checkbox-wrapper, .radio-wrapper {
+  padding: 6px;
+  margin-top: -2px;
+  margin-bottom: -2px;
+  z-index: 10;
+}
+</style> 
\ No newline at end of file
diff --git a/h5/src/views/payment/RecordDetail.vue b/h5/src/views/payment/RecordDetail.vue
new file mode 100644
index 0000000..4070c20
--- /dev/null
+++ b/h5/src/views/payment/RecordDetail.vue
@@ -0,0 +1,286 @@
+<template>
+  <div class="record-detail-page">
+    <van-nav-bar
+      title="缴费详情"
+      left-arrow
+      @click-left="goBack"
+    />
+    
+    <div class="no-data" v-if="!currentBill">
+      <van-loading v-if="loading" type="spinner" color="#1989fa" />
+      <van-empty v-else description="暂无数据" />
+    </div>
+    
+    <template v-if="currentBill">
+      <!-- 支付信息 -->
+      <div class="card payment-info">
+        <div class="payment-status">
+          <van-icon name="success" />
+          <span>支付成功</span>
+        </div>
+        <div class="payment-amount">¥{{ formatAmount(getPaymentAmount()) }}</div>
+      </div>
+      
+      <!-- 基本信息 -->
+      <div class="card">
+        <div class="card-title">基本信息</div>
+        <van-cell-group :border="false">
+          <van-cell title="费用类型" :value="currentBill.basicInfo && currentBill.basicInfo.feTypeName" />
+          <van-cell title="账单编号" :value="currentBill.basicInfo && currentBill.basicInfo.billNo" />
+          <van-cell title="账单状态" :value="currentBill.basicInfo && currentBill.basicInfo.billStatus" />
+          <van-cell title="结清状态" :value="currentBill.basicInfo && currentBill.basicInfo.clearStatus" />
+          <van-cell title="计费周期" :value="currentBill.basicInfo && currentBill.basicInfo.feePeriod" />
+          <van-cell title="应收金额" :value="currentBill.basicInfo && `¥${formatAmount(currentBill.basicInfo.receivableAmount)}`" />
+          <van-cell title="实收金额" :value="currentBill.basicInfo && `¥${formatAmount(currentBill.basicInfo.receivedAmount)}`" />
+          <van-cell title="需收金额" :value="currentBill.basicInfo && `¥${formatAmount(currentBill.basicInfo.needAmount)}`" />
+          <van-cell title="应收日期" :value="currentBill.basicInfo && currentBill.basicInfo.receivableDate" />
+          <van-cell title="关联合同" :value="currentBill.basicInfo && currentBill.basicInfo.contractNo" />
+          <van-cell title="跟进人" :value="currentBill.basicInfo && currentBill.basicInfo.follower" />
+          <van-cell title="关联楼宇" :value="currentBill.basicInfo && currentBill.basicInfo.buildingName" />
+          <van-cell title="关联房间" :value="currentBill.basicInfo && currentBill.basicInfo.roomNumber" />
+          <van-cell title="创建时间" :value="currentBill.basicInfo && currentBill.basicInfo.createTime" />
+          <van-cell title="账单备注" :value="currentBill.basicInfo && currentBill.basicInfo.remark" />
+        </van-cell-group>
+      </div>
+      
+      <!-- 滞纳金信息 -->
+      <div class="card" v-if="currentBill.overdueInfo">
+        <div class="card-title">滞纳金信息</div>
+        <van-cell-group :border="false">
+          <van-cell title="需收滞纳金" :value="`¥${formatAmount(currentBill.overdueInfo.needOverdueAmount || 0)}`" />
+          <van-cell title="已收滞纳金" :value="`¥${formatAmount(currentBill.overdueInfo.receivedOverdueAmount || 0)}`" />
+          <van-cell title="起算天数" :value="`${currentBill.overdueInfo.startDays || 0}天`" />
+          <van-cell title="滞纳金比例" :value="`${parseFloat((currentBill.overdueInfo.overdueRate || 0) * 100).toFixed(3)}%/天`" />
+          <van-cell title="滞纳金上限" :value="`${parseFloat((currentBill.overdueInfo.overdueLimit || 0) * 100).toFixed(0)}%`" />
+        </van-cell-group>
+      </div>
+      
+      <!-- 账单明细 -->
+      <div class="card" v-if="currentBill.billDetails && currentBill.billDetails.length > 0">
+        <div class="card-title">账单明细</div>
+        <div class="bill-detail-list">
+          <div 
+            v-for="detail in currentBill.billDetails" 
+            :key="detail.billDetailId" 
+            class="bill-detail-item"
+            @click="showBillDetailInfo(detail)"
+          >
+            <div class="bill-detail-type">
+              <van-tag :type="detail.billDetailType === '0' ? 'primary' : 'warning'">
+                {{ detail.billDetailType === '0' ? '原账单' : '滞纳金' }}
+              </van-tag>
+            </div>
+            <div class="bill-detail-name">{{ detail.feTypeName || '未知费用类型' }}</div>
+            <div class="bill-detail-amount">¥{{ formatAmount(detail.billAmount || 0) }}</div>
+            <van-icon name="arrow" />
+          </div>
+        </div>
+      </div>
+    </template>
+    
+    <!-- 账单明细详情弹窗 -->
+    <van-popup v-model="showDetailPopup" round position="bottom" style="height: 70%">
+      <div class="popup-header">
+        <div class="popup-title">明细详情</div>
+        <van-icon name="cross" @click="showDetailPopup = false" />
+      </div>
+      <div class="popup-content" v-if="selectedDetail">
+        <van-cell-group :border="false">
+          <van-cell title="费用类型" :value="selectedDetail.feTypeName || '未知'" />
+          <van-cell title="账单编号" :value="selectedDetail.billNo || '未知'" />
+          <van-cell title="计费周期" :value="selectedDetail.feePeriod || '未知'" />
+          <van-cell title="账单金额" :value="`¥${formatAmount(selectedDetail.billAmount || 0)}`" />
+          <van-cell title="关联合同" :value="selectedDetail.contractNo || '未知'" />
+          <van-cell title="创建时间" :value="selectedDetail.createTime || '未知'" />
+          <van-cell title="账单备注" :value="selectedDetail.remark || '无'" />
+        </van-cell-group>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import { Toast } from 'vant';
+import api from '@/api/payment';
+
+export default {
+  name: 'RecordDetail',
+  data() {
+    return {
+      loading: false,
+      currentBill: null,  // 账单详情
+      showDetailPopup: false,
+      selectedDetail: null,
+    };
+  },
+  computed: {
+    billId() {
+      return this.$route.params.billId;
+    },
+  },
+  created() {
+    this.fetchRecordDetail();
+  },
+  methods: {
+    // 获取缴费记录详情
+    async fetchRecordDetail() {
+      this.loading = true;
+      
+      try {
+        const response = await api.getRecordDetail(this.billId, { showLoading: false });
+        
+        if (response.code === '0000000000000000') {
+          // 确保数据格式正确
+          if (!response.data || !response.data.basicInfo) {
+            Toast.fail('账单数据格式不正确');
+            this.loading = false;
+            return;
+          }
+          
+          this.currentBill = response.data;
+        } else {
+          Toast.fail(response.message || '获取缴费记录详情失败');
+        }
+      } catch (error) {
+        console.error('获取缴费记录详情出错:', error);
+        Toast.fail('获取缴费记录详情失败');
+      } finally {
+        this.loading = false;
+      }
+    },
+    
+    // 返回上一页
+    goBack() {
+      this.$router.go(-1);
+    },
+    
+    // 格式化金额
+    formatAmount(amount) {
+      if (!amount || isNaN(amount)) {
+        return '0.00';
+      }
+      return parseFloat(amount).toFixed(2);
+    },
+    
+    // 获取支付总金额
+    getPaymentAmount() {
+      if (!this.currentBill || !this.currentBill.basicInfo) return 0;
+      
+      const basicAmount = this.currentBill.basicInfo.receivedAmount || 0;
+      const overdueAmount = this.currentBill.overdueInfo 
+        ? (this.currentBill.overdueInfo.receivedOverdueAmount || 0) 
+        : 0;
+        
+      return basicAmount + overdueAmount;
+    },
+    
+    // 显示账单明细详情
+    showBillDetailInfo(detail) {
+      if (!detail) {
+        Toast.fail('明细数据不完整');
+        return;
+      }
+      this.selectedDetail = detail;
+      this.showDetailPopup = true;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.record-detail-page {
+  padding-bottom: 20px;
+  background-color: #f5f5f5;
+}
+
+.no-data {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 300px;
+}
+
+.payment-info {
+  text-align: center;
+  padding: 20px 0;
+  background-color: #fff;
+  
+  .payment-status {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 10px;
+    
+    .van-icon {
+      color: var(--success-color);
+      font-size: 20px;
+      margin-right: 8px;
+    }
+    
+    span {
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+  
+  .payment-amount {
+    font-size: 24px;
+    font-weight: bold;
+    color: #333;
+  }
+}
+
+.bill-detail-list {
+  padding: 0 10px;
+}
+
+.bill-detail-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid #f5f5f5;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+  
+  .bill-detail-type {
+    margin-right: 10px;
+  }
+  
+  .bill-detail-name {
+    flex: 1;
+    font-size: 14px;
+  }
+  
+  .bill-detail-amount {
+    font-size: 15px;
+    font-weight: 500;
+    margin-right: 10px;
+  }
+}
+
+.popup-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  border-bottom: 1px solid #eee;
+  
+  .popup-title {
+    font-size: 16px;
+    font-weight: 500;
+  }
+  
+  .van-icon {
+    font-size: 20px;
+    color: #999;
+  }
+}
+
+.popup-content {
+  padding: 10px 0;
+  overflow-y: auto;
+  max-height: calc(70vh - 56px);
+}
+</style> 
\ No newline at end of file
diff --git a/h5/src/views/payment/Records.vue b/h5/src/views/payment/Records.vue
new file mode 100644
index 0000000..2f619ed
--- /dev/null
+++ b/h5/src/views/payment/Records.vue
@@ -0,0 +1,378 @@
+<template>
+  <div class="payment-records-page">
+    <van-nav-bar
+      title="缴费记录"
+      left-arrow
+      @click-left="goBack"
+    />
+    
+    <!-- 筛选条件 -->
+    <div class="filter-bar bg-white">
+      <van-dropdown-menu>
+        <van-dropdown-item v-model="feeTypeId" :options="feeTypeOptions" />
+        <van-dropdown-item title="日期范围" ref="dateFilter">
+          <div class="date-filter">
+            <van-cell title="开始日期" :value="startDate" @click="showStartDatePicker = true" />
+            <van-cell title="结束日期" :value="endDate" @click="showEndDatePicker = true" />
+            <div class="filter-buttons">
+              <van-button type="default" size="small" @click="resetDateFilter">重置</van-button>
+              <van-button type="primary" size="small" @click="confirmDateFilter">确定</van-button>
+            </div>
+          </div>
+        </van-dropdown-item>
+      </van-dropdown-menu>
+    </div>
+    
+    <!-- 日期选择器 -->
+    <van-popup v-model="showStartDatePicker" position="bottom">
+      <van-datetime-picker
+        type="date"
+        title="选择开始日期"
+        :value="startDateObj"
+        :max-date="new Date()"
+        @confirm="onStartDateConfirm"
+        @cancel="showStartDatePicker = false"
+      />
+    </van-popup>
+    
+    <van-popup v-model="showEndDatePicker" position="bottom">
+      <van-datetime-picker
+        type="date"
+        title="选择结束日期"
+        :value="endDateObj"
+        :min-date="startDateObj"
+        :max-date="new Date()"
+        @confirm="onEndDateConfirm"
+        @cancel="showEndDatePicker = false"
+      />
+    </van-popup>
+    
+    <!-- 缴费记录列表 -->
+    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+      <van-list
+        v-model="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="onLoad"
+      >
+        <div v-if="paymentRecords.length === 0 && !loading" class="empty-data">
+          <van-empty description="暂无缴费记录" />
+        </div>
+        
+        <div class="record-list">
+          <div 
+            v-for="record in paymentRecords" 
+            :key="record.billId"
+            class="record-item"
+            @click="viewRecordDetail(record.billId)"
+          >
+            <div class="record-header">
+              <div class="record-type">{{ record.feTypeName }}</div>
+              <div :class="['record-status', getStatusClass(record.clearStatus)]">
+                {{ getStatusText(record.clearStatus) }}
+              </div>
+            </div>
+            <div class="record-content">
+              <div class="record-info">
+                <div class="record-date">应收日期: {{ record.pybDt }}</div>
+                <div class="record-remark truncate">{{ record.remark }}</div>
+              </div>
+              <div class="record-amount">¥{{ formatAmount(record.paymentAmt) }}</div>
+            </div>
+            <div class="record-footer">
+              <div class="record-pay-time">支付时间: {{ record.payTime }}</div>
+              <div class="record-pay-method">{{ record.payModeName }}</div>
+            </div>
+          </div>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+  </div>
+</template>
+
+<script>
+import { Toast } from 'vant';
+import api from '@/api/payment';
+
+export default {
+  name: 'PaymentRecords',
+  data() {
+    return {
+      refreshing: false,
+      loading: false,
+      finished: false,
+      pageNum: 1,
+      pageSize: 10,
+      
+      paymentRecords: [],  // 本地保存缴费记录数据
+      
+      feeTypeId: 0,
+      feeTypeOptions: [
+        { text: '全部费用类型', value: 0 },
+        { text: '水费', value: 1 },
+        { text: '电费', value: 2 },
+        { text: '物业费', value: 3 },
+        { text: '停车费', value: 4 },
+      ],
+      
+      startDate: '',
+      endDate: '',
+      startDateObj: new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1),
+      endDateObj: new Date(),
+      
+      showStartDatePicker: false,
+      showEndDatePicker: false,
+    };
+  },
+  created() {
+    // 初始化日期
+    this.formatDates();
+    this.loadData();
+  },
+  methods: {
+    // 格式化日期
+    formatDates() {
+      this.startDate = this.formatDateString(this.startDateObj);
+      this.endDate = this.formatDateString(this.endDateObj);
+    },
+    
+    // 日期对象转字符串 yyyy-MM-dd
+    formatDateString(date) {
+      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}`;
+    },
+    
+    // 开始日期确认
+    onStartDateConfirm(date) {
+      this.startDateObj = date;
+      this.startDate = this.formatDateString(date);
+      this.showStartDatePicker = false;
+    },
+    
+    // 结束日期确认
+    onEndDateConfirm(date) {
+      this.endDateObj = date;
+      this.endDate = this.formatDateString(date);
+      this.showEndDatePicker = false;
+    },
+    
+    // 确认日期筛选
+    confirmDateFilter() {
+      this.$refs.dateFilter.toggle();
+      this.resetList();
+      this.loadData();
+    },
+    
+    // 重置日期筛选
+    resetDateFilter() {
+      this.startDateObj = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1);
+      this.endDateObj = new Date();
+      this.formatDates();
+    },
+    
+    // 重置列表数据
+    resetList() {
+      this.pageNum = 1;
+      this.finished = false;
+      this.paymentRecords = [];
+    },
+    
+    // 重置所有数据
+    resetData() {
+      this.resetList();
+      this.feeTypeId = 0;
+      this.resetDateFilter();
+    },
+    
+    // 加载数据
+    async loadData() {
+      try {
+        this.loading = true;
+        const params = {
+          pageNum: this.pageNum,
+          pageSize: this.pageSize,
+          payerId: '1', // 直接使用默认业户ID
+          feeTypeId: this.feeTypeId || undefined,
+          startDate: this.startDate,
+          endDate: this.endDate,
+        };
+        
+        const response = await api.getPaymentRecords(params);
+        
+        if (response.code === '0000000000000000') {
+          const data = response.data;
+          const records = data.list || [];
+          
+          // 追加记录数据
+          this.paymentRecords = [...this.paymentRecords, ...records];
+          
+          // 判断是否还有更多数据
+          if (this.pageNum * this.pageSize >= data.total) {
+            this.finished = true;
+          } else {
+            this.pageNum++;
+          }
+        } else {
+          Toast.fail(response.message || '获取缴费记录失败');
+          this.finished = true;
+        }
+      } catch (error) {
+        Toast.fail('获取缴费记录失败');
+        this.finished = true;
+      } finally {
+        this.loading = false;
+        this.refreshing = false;
+      }
+    },
+    
+    // 下拉刷新
+    onRefresh() {
+      this.resetList();
+      this.loadData();
+    },
+    
+    // 上拉加载更多
+    onLoad() {
+      this.loadData();
+    },
+    
+    // 返回上一页
+    goBack() {
+      this.$router.go(-1);
+    },
+    
+    // 查看缴费记录详情
+    viewRecordDetail(billId) {
+      this.$router.push(`/payment/record-detail/${billId}`);
+    },
+    
+    // 格式化金额
+    formatAmount(amount) {
+      return parseFloat(amount).toFixed(2);
+    },
+    
+    // 获取状态文本
+    getStatusText(status) {
+      switch (status) {
+        case '1': return '已结清';
+        case '2': return '部分结清';
+        default: return '未知状态';
+      }
+    },
+    
+    // 获取状态样式类
+    getStatusClass(status) {
+      switch (status) {
+        case '1': return 'status-success';
+        case '2': return 'status-warning';
+        default: return '';
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.payment-records-page {
+  padding-bottom: 20px;
+  background-color: #f5f5f5;
+}
+
+.filter-bar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.date-filter {
+  padding: 12px 16px;
+  
+  .filter-buttons {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 16px;
+    
+    .van-button {
+      flex: 1;
+      margin: 0 4px;
+    }
+  }
+}
+
+.empty-data {
+  padding: 40px 0;
+}
+
+.record-list {
+  margin-top: 10px;
+}
+
+.record-item {
+  margin: 0 12px 12px;
+  padding: 12px 16px;
+  background-color: #fff;
+  border-radius: 8px;
+  
+  .record-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+    
+    .record-type {
+      font-size: 16px;
+      font-weight: 500;
+    }
+    
+    .record-status {
+      font-size: 14px;
+      
+      &.status-success {
+        color: var(--success-color);
+      }
+      
+      &.status-warning {
+        color: var(--warning-color);
+      }
+    }
+  }
+  
+  .record-content {
+    display: flex;
+    margin-bottom: 8px;
+    
+    .record-info {
+      flex: 1;
+      
+      .record-date {
+        font-size: 14px;
+        color: #666;
+        margin-bottom: 4px;
+      }
+      
+      .record-remark {
+        font-size: 13px;
+        color: #999;
+        max-width: 220px;
+      }
+    }
+    
+    .record-amount {
+      font-size: 16px;
+      font-weight: 500;
+      color: #ee0a24;
+    }
+  }
+  
+  .record-footer {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    color: #999;
+    padding-top: 8px;
+    border-top: 1px solid #f5f5f5;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/h5/vue.config.js b/h5/vue.config.js
new file mode 100644
index 0000000..6398338
--- /dev/null
+++ b/h5/vue.config.js
@@ -0,0 +1,71 @@
+const { defineConfig } = require('@vue/cli-service');
+
+module.exports = defineConfig({
+  // 部署应用包时的基本 URL
+  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
+  
+  // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录
+  outputDir: 'dist',
+  
+  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
+  assetsDir: 'static',
+  
+  // 指定生成的 index.html 的输出路径 (相对于 outputDir)
+  indexPath: 'index.html',
+  
+  // 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
+  filenameHashing: true,
+  
+  // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
+  lintOnSave: process.env.NODE_ENV !== 'production',
+  
+  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
+  productionSourceMap: false,
+  
+  // 开发服务器配置
+  devServer: {
+    host: '0.0.0.0',
+    port: 8080,
+    open: true,
+    // proxy: {
+    //   // 配置跨域
+    //   '/': {
+    //     target: 'http://192.168.137.45:8080',
+    //     changeOrigin: true,
+    //     pathRewrite: {
+    //       '^/api': ''
+    //     }
+    //   }
+    // }
+  },
+  
+  // CSS相关配置
+  css: {
+    // 是否使用css分离插件 ExtractTextPlugin
+    extract: process.env.NODE_ENV === 'production',
+    // 开启 CSS source maps?
+    sourceMap: false,
+    // css预设器配置项
+    loaderOptions: {
+      sass: {
+        // 全局引入变量和 mixin
+        additionalData: `
+          @import "@/assets/styles/variables.scss";
+        `
+      }
+    }
+  },
+  
+  // webpack配置
+  configureWebpack: {
+    // 配置 webpack 压缩
+    optimization: {
+      minimize: process.env.NODE_ENV === 'production'
+    }
+  },
+  
+  // 第三方插件配置
+  pluginOptions: {
+    // ...
+  }
+}); 
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..c496ed7
--- /dev/null
+++ b/package.json
@@ -0,0 +1,10 @@
+{
+  "dependencies": {
+    "element-china-area-data": "^6.1.0",
+    "html2canvas": "^1.4.1",
+    "mammoth": "^1.9.0",
+    "pdf-lib": "^1.17.1",
+    "pdfjs-dist": "^5.1.91",
+    "qrcode.vue": "^3.6.0"
+  }
+}
diff --git a/pc/.env.development b/pc/.env.development
new file mode 100644
index 0000000..2754fd2
--- /dev/null
+++ b/pc/.env.development
@@ -0,0 +1,4 @@
+NODE_ENV = 'development'
+
+# 开发环境API地址
+VUE_APP_BASE_API = http://192.168.137.45:8080
\ No newline at end of file
diff --git a/pc/.env.production b/pc/.env.production
new file mode 100644
index 0000000..6465c6f
--- /dev/null
+++ b/pc/.env.production
@@ -0,0 +1,4 @@
+NODE_ENV = 'production'
+
+# 生产环境API地址
+VUE_APP_BASE_API = http://192.168.137.3:8080/api 
\ No newline at end of file
diff --git a/pc/.gitignore b/pc/.gitignore
new file mode 100644
index 0000000..f71b978
--- /dev/null
+++ b/pc/.gitignore
@@ -0,0 +1,10 @@
+node_modules/
+.DS_Store
+.idea/
+.vscode/
+.env
+.env.local
+
+
+package-lock.json
+yarn.lock
diff --git a/pc/package.json b/pc/package.json
new file mode 100644
index 0000000..19dea53
--- /dev/null
+++ b/pc/package.json
@@ -0,0 +1,81 @@
+{
+  "name": "yoaf-web",
+  "version": "1.1.2",
+  "description": "智慧教育平台",
+  "author": "front-end",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "build:prod": "vue-cli-service build",
+    "build:stage": "vue-cli-service build --mode staging",
+    "preview": "node build/index.js --preview"
+  },
+  "keywords": [
+    "vue",
+    "admin",
+    "dashboard",
+    "element-ui",
+    "boilerplate",
+    "admin-template",
+    "management-system"
+  ],
+  "dependencies": {
+    "@riophae/vue-treeselect": "^0.4.0",
+    "axios": "0.24.0",
+    "clipboard": "2.0.8",
+    "core-js": "3.19.1",
+    "dayjs": "^1.11.10",
+    "echarts": "4.9.0",
+    "element-ui": "^2.15.6",
+    "file-saver": "2.0.5",
+    "fuse.js": "6.4.3",
+    "highlight.js": "9.18.5",
+    "html2canvas": "^1.4.1",
+    "js-beautify": "1.13.0",
+    "js-cookie": "3.0.1",
+    "jszip": "^3.10.1",
+    "moment": "^2.30.1",
+    "nprogress": "0.2.0",
+    "qrcode": "^1.5.3",
+    "qrcode.vue": "^3.6.0",
+    "quill": "1.3.7",
+    "screenfull": "5.0.2",
+    "sm-crypto": "^0.3.12",
+    "sortablejs": "1.10.2",
+    "tui-image-editor": "^3.15.3",
+    "vue": "^2.7.14",
+    "vue-count-to": "1.0.13",
+    "vue-cropper": "0.5.5",
+    "vue-meta": "2.4.0",
+    "vue-router": "3.4.9",
+    "vuedraggable": "^2.24.3",
+    "vuex": "3.6.0",
+    "xlsx": "^0.18.5",
+    "element-china-area-data": "^6.1.0",
+    "mammoth": "^1.9.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "4.4.6",
+    "@vue/cli-service": "4.4.6",
+    "babel-loader": "^10.0.0",
+    "babel-plugin-dynamic-import-node": "2.3.3",
+    "chalk": "4.1.0",
+    "compression-webpack-plugin": "5.0.2",
+    "connect": "3.6.6",
+    "mockjs": "^1.0.1-beta3",
+    "runjs": "4.4.2",
+    "sass": "1.32.13",
+    "sass-loader": "10.1.1",
+    "script-ext-html-webpack-plugin": "2.1.5",
+    "svg-sprite-loader": "5.1.1",
+    "vue-template-compiler": "2.6.14"
+  },
+  "engines": {
+    "node": ">=8.9",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    ">1%",
+    "last 2 versions"
+  ]
+}
diff --git a/pc/public.zip b/pc/public.zip
new file mode 100644
index 0000000..028483f
Binary files /dev/null and b/pc/public.zip differ
diff --git a/pc/public/index.html b/pc/public/index.html
new file mode 100644
index 0000000..a66625c
--- /dev/null
+++ b/pc/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>智慧教育平台</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html> 
\ No newline at end of file
diff --git a/pc/src/App.vue b/pc/src/App.vue
new file mode 100644
index 0000000..4194d3c
--- /dev/null
+++ b/pc/src/App.vue
@@ -0,0 +1,20 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>
+
+<style lang="scss">
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  height: 100vh;
+}
+</style> 
\ No newline at end of file
diff --git a/pc/src/api/asset/classification.js b/pc/src/api/asset/classification.js
new file mode 100644
index 0000000..eb64c9e
--- /dev/null
+++ b/pc/src/api/asset/classification.js
@@ -0,0 +1,110 @@
+import request from '@/utils/request'
+
+// 查询资产分类列表
+export function listClassification(query) {
+  return request({
+    url: '/asset/classifications/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询资产分类详情
+export function getClassification(id) {
+  return request({
+    url: '/asset/classifications/' + id,
+    method: 'get'
+  })
+}
+
+// 新增资产分类
+export function addClassification(data) {
+  return request({
+    url: '/asset/classifications/create',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改资产分类
+export function updateClassification(data) {
+  return request({
+    url: '/asset/classifications/update/' + data.id,
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除资产分类
+export function delClassification(id, lastModUserId) {
+  return request({
+    url: '/asset/classifications/delete/' + id,
+    method: 'post',
+    params: lastModUserId ? { lastModUserId } : {}
+  })
+}
+
+// 禁用资产分类
+export function disableClassification(id, lastModUserId) {
+  return request({
+    url: '/asset/classifications/' + id + '/status/disable',
+    method: 'post',
+    params: lastModUserId ? { lastModUserId } : {}
+  })
+}
+
+// 启用资产分类
+export function enableClassification(id, lastModUserId) {
+  return request({
+    url: '/asset/classifications/' + id + '/status/enable',
+    method: 'post',
+    params: lastModUserId ? { lastModUserId } : {}
+  })
+}
+
+// 批量删除资产分类
+export function delClassificationBatch(ids, lastModUserId) {
+  return request({
+    url: '/asset/classifications/deleteBatch',
+    method: 'post',
+    data: ids,
+    params: lastModUserId ? { lastModUserId } : {}
+  })
+}
+
+// 获取资产分类树形结构
+export function getClassificationTree(query) {
+  return request({
+    url: '/asset/classifications/tree',
+    method: 'get',
+    params: query
+  })
+}
+
+// 根据父ID查询子分类
+export function getChildClassifications(parentId, query) {
+  
+  return request({
+    url: '/asset/classifications/children/' + parentId,
+    method: 'get',
+    params: query
+  })
+}
+
+// 检查分类是否被使用
+export function checkClassificationInUse(id) {
+  return request({
+    url: '/asset/classifications/' + id + '/check',
+    method: 'get'
+  })
+}
+
+// 导出资产分类
+export function exportClassification(query) {
+  
+  return request({
+    url: '/asset/classifications/export',
+    method: 'get',
+    params: query
+  })
+} 
\ No newline at end of file
diff --git a/pc/src/api/asset/inventory.js b/pc/src/api/asset/inventory.js
new file mode 100644
index 0000000..848a80d
--- /dev/null
+++ b/pc/src/api/asset/inventory.js
@@ -0,0 +1,136 @@
+import request from '@/utils/request'
+
+// 获取资产列表
+export function listAssets(query) {
+  return request({
+    url: '/asset/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 获取资产详情
+export function getAsset(assetCode) {
+  return request({
+    url: `/asset/${assetCode}`,
+    method: 'get',
+  })
+}
+
+// 新增资产
+export function addAsset(data) {
+  return request({
+    url: '/asset/create',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改资产
+export function updateAsset(data) {
+  return request({
+    url: `/asset/update/${data.assetCode}`,
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除资产
+export function deleteAsset(assetCode) {
+  return request({
+    url: '/asset/delete',
+    method: 'post',
+    params: { assetCode }
+  })
+}
+
+// 批量删除资产
+export function deleteAssets(assetCodes) {
+  return request({
+    url: '/asset/batch/delete',
+    method: 'post',
+    data: { assetCodes }
+  })
+}
+
+// 导出资产
+export function exportAsset(query) {
+  return request({
+    url: '/asset/export',
+    method: 'get',
+    params: query,
+    responseType: 'blob'
+  })
+}
+
+// 下载资产导入模板
+export function downloadTemplate() {
+  return request({
+    url: '/asset/template/download',
+    method: 'get',
+    responseType: 'blob'
+  })
+}
+
+// 获取资产位置树
+export function listAssetLocationTree() {
+  return request({
+    url: '/asset/location/tree',
+    method: 'get'
+  })
+}
+
+// 获取公司列表
+export function listCompanies() {
+  return request({
+    url: '/admin/company/getAllCompanyDetails',
+    method: 'get'
+  })
+}
+
+// 获取用户列表
+export function listUsers() {
+  return request({
+    url: '/v1/member/list',
+    method: 'get',
+  })
+}
+
+// 上传资产图片
+export function uploadAssetImage(data) {
+  return request({
+    url: '/asset/upload/image',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 批量打印资产标签
+ * @param {Array} assetCodes 资产编码数组
+ * @returns {Object} 请求结果
+ */
+export function printAssetLabels(assetCodes) {
+  return request({
+    url: '/asset/print',
+    method: 'post',
+    data: assetCodes
+  })
+}
+
+// 检查资产编码是否存在
+export function checkAssetCode(code) {
+  return request({
+    url: '/asset/check/code',
+    method: 'get',
+    params: { code }
+  })
+}
+
+// 获取标签配置
+export function getLabelConfig() {
+  return request({
+    url: '/asset/label',
+    method: 'get'
+  })
+} 
\ No newline at end of file
diff --git a/pc/src/api/asset/label.js b/pc/src/api/asset/label.js
new file mode 100644
index 0000000..0971a09
--- /dev/null
+++ b/pc/src/api/asset/label.js
@@ -0,0 +1,110 @@
+import request from '@/utils/request'
+
+// 查询资产标签列表
+export function listLabelTemplates(query) {
+  return request({
+    url: '/asset/label/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 获取标签模板详情
+export function getLabelTemplate(id) {
+  return request({
+    url: '/asset/label/template/' + id,
+    method: 'get'
+  })
+}
+
+// 新增资产标签
+export function addLabelTemplate(data) {
+  return request({
+    url: '/asset/label/create',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改资产标签
+export function updateLabelTemplate(id, data) {
+  return request({
+    url: '/asset/label/update' + id,
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除标签模板
+export function deleteLabelTemplate(id) {
+  return request({
+    url: '/asset/label/template/' + id,
+    method: 'post'
+  })
+}
+
+// 设置默认模板
+export function setDefaultTemplate(id) {
+  return request({
+    url: '/asset/label/template/default/' + id,
+    method: 'post'
+  })
+}
+
+// 获取可用的标签字段
+export function getLabelFields() {
+  const fieldData = [
+    { id: 1, name: '资产名称' },
+    { id: 2, name: '资产分类' },
+    { id: 3, name: '资产编码' },
+    { id: 4, name: '资产位置' },
+    { id: 5, name: '品牌' },
+    { id: 6, name: '型号' },
+    { id: 7, name: '设备序列号' },
+    { id: 8, name: '管理员' },
+    { id: 9, name: '保养到期时间' },
+    { id: 10, name: '保养说明' },
+    { id: 11, name: '使用部门' }
+  ];
+  
+  return Promise.resolve({
+    code: '0000000000000000',
+    msg: 'success',
+    data: fieldData
+  });
+}
+
+// 获取字段对应的示例值
+export function getFieldSampleValues() {
+  return {
+    '1': 'ThinkPad笔记本',
+    '2': '电脑/笔记本电脑',
+    '3': 'ASSET-001',
+    '4': '研发部-A区',
+    '5': 'Lenovo',
+    '6': 'X1 Carbon',
+    '7': 'SN12345678',
+    '8': '张三',
+    '9': '2024-12-31',
+    '10': '每季度保养一次',
+    '11': '研发部'
+  };
+}
+
+// 打印标签预览
+export function previewLabel(data) {
+  return request({
+    url: '/asset/label/preview',
+    method: 'post',
+    data: data
+  })
+}
+
+// 打印标签
+export function printLabel(data) {
+  return request({
+    url: '/asset/label/print',
+    method: 'post',
+    data: data
+  })
+} 
\ No newline at end of file
diff --git a/pc/src/api/asset/location.js b/pc/src/api/asset/location.js
new file mode 100644
index 0000000..d36e242
--- /dev/null
+++ b/pc/src/api/asset/location.js
@@ -0,0 +1,120 @@
+import request from '@/utils/request'
+
+// 查询资产位置列表
+export function listLocation(query) {
+  return request({
+    url: '/asset/locations/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询资产位置详情
+export function getLocation(id) {
+  return request({
+    url: '/asset/locations/' + id,
+    method: 'get'
+  })
+}
+
+// 新增资产位置
+export function addLocation(data) {
+  return request({
+    url: '/asset/locations/create',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改资产位置
+export function updateLocation(data) {
+  return request({
+    url: '/asset/locations/update/' + data.id,
+     method: 'post',
+    data: data
+  })
+}
+
+// 删除资产位置
+export function delLocation(id, lastModUserId) {
+  return request({
+    url: '/asset/locations/delete/' + id,
+     method: 'post',
+    params: lastModUserId ? { lastModUserId } : {}
+  })
+}
+
+// 禁用资产位置
+export function disableLocation(id, lastModUserId) {
+  return request({
+    url: '/asset/locations/' + id + '/status/disable',
+     method: 'post',
+    params: lastModUserId ? { lastModUserId } : {}
+  })
+}
+
+// 启用资产位置
+export function enableLocation(id, lastModUserId) {
+  return request({
+    url: '/asset/locations/' + id + '/status/enable',
+     method: 'post',
+    params: lastModUserId ? { lastModUserId } : {}
+  })
+}
+
+// 批量删除资产位置
+export function delLocationBatch(ids, lastModUserId) {
+  return request({
+    url: '/asset/locations/batch/delete',
+     method: 'post',
+    data: ids,
+    params: lastModUserId ? { lastModUserId } : {}
+  })
+}
+
+// 获取资产位置树形结构
+export function getLocationTree(query) {
+  return request({
+    url: '/asset/locations/tree',
+    method: 'get',
+    params: query
+  })
+}
+
+// 根据父ID查询子位置
+export function getChildLocations(parentId, query) {
+  return request({
+    url: '/asset/locations/children/' + parentId,
+    method: 'get',
+    params: query
+  })
+}
+
+// 检查位置是否被使用
+export function checkLocationInUse(id) {
+  return request({
+    url: '/asset/locations/' + id + '/check',
+    method: 'get'
+  })
+}
+
+// 检查编码唯一性
+export function checkLocationCode(id, locationCode) {
+  return request({
+    url: '/asset/locations/check/code',
+    method: 'get',
+    params: {
+      id: id,
+      locationCode: locationCode
+    }
+  })
+}
+
+// 导出资产位置
+export function exportLocation(query) {
+  return request({
+    url: '/asset/locations/export',
+    method: 'get',
+    params: query
+  })
+} 
\ No newline at end of file
diff --git a/pc/src/api/bak/merchant/index.js b/pc/src/api/bak/merchant/index.js
new file mode 100644
index 0000000..68df39a
--- /dev/null
+++ b/pc/src/api/bak/merchant/index.js
@@ -0,0 +1,7 @@
+// 导出所有子模块
+export * from './lead'
+
+// 未来可以添加其他子模块，如：
+// export * from './team'
+// export * from './personnel'
+// 等等 
\ No newline at end of file
diff --git a/pc/src/api/bak/merchant/lead.js b/pc/src/api/bak/merchant/lead.js
new file mode 100644
index 0000000..67f447c
--- /dev/null
+++ b/pc/src/api/bak/merchant/lead.js
@@ -0,0 +1,151 @@
+import request from '@/utils/request'
+
+// 线索状态API
+export function getLeadStatusList() {
+  return request({
+    url: '/bizLead/status/list',
+    method: 'get'
+  })
+}
+
+export function getLeadStatusDetail(id) {
+  return request({
+    url: `/bizLead/status/${id}`,
+    method: 'get'
+  })
+}
+
+export function addLeadStatus(data) {
+  return request({
+    url: '/bizLead/status',
+    method: 'post',
+    data
+  })
+}
+
+export function updateLeadStatus(data) {
+  return request({
+    url: '/bizLead/status',
+    method: 'put',
+    data
+  })
+}
+
+export function deleteLeadStatus(id, userId) {
+  return request({
+    url: `/bizLead/status/${id}`,
+    method: 'delete',
+    params: { userId }
+  })
+}
+
+export function checkLeadStatusName(statusName) {
+  return request({
+    url: '/bizLead/status/checkName',
+    method: 'get',
+    params: { statusName }
+  })
+}
+
+// 线索管理API
+export function getLeadList(params) {
+  return request({
+    url: '/bizLead/list',
+    method: 'get',
+    params
+  })
+}
+
+export function getMyLeadList(params) {
+  return request({
+    url: '/bizLead/myLeads',
+    method: 'get',
+    params
+  })
+}
+
+export function getAllLeadList(params) {
+  return request({
+    url: '/bizLead/allLeads',
+    method: 'get',
+    params
+  })
+}
+
+export function getPublicLeadList(params) {
+  return request({
+    url: '/bizLead/publicLeads',
+    method: 'get',
+    params
+  })
+}
+
+export function getLeadDetail(id) {
+  return request({
+    url: `/bizLead/${id}`,
+    method: 'get'
+  })
+}
+
+export function addLead(data) {
+  return request({
+    url: '/bizLead',
+    method: 'post',
+    data
+  })
+}
+
+export function updateLead(data) {
+  return request({
+    url: '/bizLead',
+    method: 'put',
+    data
+  })
+}
+
+export function changeLeadStatus(id, statusId, userId) {
+  return request({
+    url: `/bizLead/${id}/status`,
+    method: 'put',
+    params: { statusId, userId }
+  })
+}
+
+export function changeLeadPersonnel(id, personnelId, userId) {
+  return request({
+    url: `/bizLead/${id}/personnel`,
+    method: 'put',
+    params: { personnelId, userId }
+  })
+}
+
+export function checkLeadPhone(phone) {
+  return request({
+    url: '/bizLead/checkPhone',
+    method: 'get',
+    params: { phone }
+  })
+}
+
+export function convertLeadToIntention(id, userId) {
+  return request({
+    url: `/bizLead/${id}/convert`,
+    method: 'post',
+    params: { userId }
+  })
+}
+
+export function deleteLead(id, userId) {
+  return request({
+    url: `/bizLead/${id}`,
+    method: 'delete',
+    params: { userId }
+  })
+}
+
+export function getLeadFollowHistory(leadId) {
+  return request({
+    url: `/bizLead/${leadId}/followHistory`,
+    method: 'get'
+  })
+} 
\ No newline at end of file
diff --git a/pc/src/api/building.js b/pc/src/api/building.js
new file mode 100644
index 0000000..872224a
--- /dev/null
+++ b/pc/src/api/building.js
@@ -0,0 +1,140 @@
+import request from '@/utils/request'
+
+// 查询楼宇列表
+export function getBuildingList(query) {
+  return request({
+    url: '/room/building/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询楼宇详细
+export function getBuildingDetail(id) {
+  return request({
+    url: `/room/building/${id}`,
+    method: 'get'
+  })
+}
+
+// 新增楼宇
+export function addBuilding(data) {
+  // 处理字段名映射，确保前端驼峰命名与后端下划线命名正确对应
+  const processedData = {
+    ...data,
+    buildingTags: data.buildingTags,
+    isHot: data.isHot,
+    imageUrl: data.buildingImage,
+  }
+
+  // 删除undefined的属性
+  Object.keys(processedData).forEach(key => {
+    if (processedData[key] === undefined) {
+      delete processedData[key]
+    }
+  })
+
+  return request({
+    url: '/room/building/add',
+    method: 'post',
+    data: processedData
+  })
+}
+
+// 修改楼宇
+export function updateBuilding(data) {
+  // 处理字段名映射，确保前端驼峰命名与后端下划线命名正确对应
+  const processedData = {
+    ...data,
+    buildingTags: data.buildingTags,
+    isHot: data.isHot,
+    imageUrl: data.buildingImage
+  }
+
+  // 删除undefined的属性
+  Object.keys(processedData).forEach(key => {
+    if (processedData[key] === undefined) {
+      delete processedData[key]
+    }
+  })
+
+  return request({
+    url: '/room/building/edit',
+    method: 'post',
+    data: processedData
+  })
+}
+
+// 删除楼宇
+export function deleteBuilding(ids) {
+  return request({
+    url: `/room/building/remove/${ids}`,
+    method: 'get'
+  })
+}
+
+// 获取楼宇统计信息
+export function getBuildingStatistics(id) {
+  return request({
+    url: `/room/building/${id}/statistics`,
+    method: 'get'
+  })
+}
+
+// 查询楼层列表
+export function getFloorList(query) {
+  return request({
+    url: `/room/floor/list/${query}`,
+    method: 'get'
+  })
+}
+
+// 获取楼层详情
+export function getFloorDetail(id) {
+  return request({
+    url: `/room/floor/${id}`,
+    method: 'get'
+  })
+}
+
+// 新增楼层
+export function addFloor(data) {
+  return request({
+    url: '/room/floor/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改楼层
+export function updateFloor(data) {
+  return request({
+    url: '/room/floor/edit',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除楼层
+export function deleteFloor(ids) {
+  return request({
+    url: `/room/floor/remove/${ids}`,
+    method: 'get'
+  })
+}
+
+// 根据楼宇ID获取楼层列表
+export function getFloorListByBuilding(buildingId) {
+  return request({
+    url: `/room/floor/building/${buildingId}`,
+    method: 'get'
+  })
+} 
+
+// 收支账号管理
+export function getAllAccounts() {
+  return request({
+    url: `/admin/account/getAllAccounts`,
+    method: 'get'
+  })
+} 
\ No newline at end of file
diff --git a/pc/src/api/finance.js b/pc/src/api/finance.js
new file mode 100644
index 0000000..d180721
--- /dev/null
+++ b/pc/src/api/finance.js
@@ -0,0 +1,925 @@
+import request from '@/utils/request'
+
+// 费用分类管理接口
+export function getFeeCategories(query) {
+  return request({
+    url: '/finance/category/page',
+    method: 'get',
+    params: query
+  })
+}
+
+export function getAllFeeCategories() {
+  return request({
+    url: '/finance/category/list',
+    method: 'get'
+  })
+}
+
+export function getFeeCategory(id) {
+  return request({
+    url: `/finance/category/${id}`,
+    method: 'get'
+  })
+}
+
+export function addFeeCategory(data) {
+  return request({
+    url: '/finance/category',
+    method: 'post',
+    data
+  })
+}
+
+export function updateFeeCategory(id, data) {
+  return request({
+    url: `/finance/category/${id}`,
+    method: 'put',
+    data
+  })
+}
+
+export function deleteFeeCategory(id) {
+  return request({
+    url: `/finance/category/${id}`,
+    method: 'delete'
+  })
+}
+
+// 费用类型管理接口
+export function getFeeTypes(query) {
+  return request({
+    url: '/finance/type/page',
+    method: 'get',
+    params: query
+  })
+}
+
+export function getFeeTypesByCategory(categoryId) {
+  return request({
+    url: `/finance/type/list/${categoryId}`,
+    method: 'get'
+  })
+}
+
+export function getFeeType(id) {
+  return request({
+    url: `/finance/type/${id}`,
+    method: 'get'
+  })
+}
+
+export function addFeeType(data) {
+  return request({
+    url: '/finance/type',
+    method: 'post',
+    data
+  })
+}
+
+export function updateFeeType(id, data) {
+  return request({
+    url: `/finance/type/${id}`,
+    method: 'put',
+    data
+  })
+}
+
+export function deleteFeeType(id) {
+  return request({
+    url: `/finance/type/${id}`,
+    method: 'delete'
+  })
+}
+
+
+// 收据编号规则相关接口
+export function listReceiptRule(params) {
+  return request({
+    url: '/receipt/number-rule/page',
+    method: 'get',
+    params
+  })
+}
+
+export function addReceiptRule(data) {
+  return request({
+    url: '/receipt/number-rule',
+    method: 'post',
+    data
+  })
+}
+
+export function deleteReceiptRule(id) {
+  return request({
+    url: `/receipt/number-rule/${id}`,
+    method: 'delete'
+  })
+}
+
+export function getNextReceiptNumber(ruleId) {
+  return request({
+    url: `/receipt/number/next/${ruleId}`,
+    method: 'get'
+  })
+}
+
+export function getBatchReceiptNumbers(ruleId, count) {
+  return request({
+    url: `/receipt/numbers/${ruleId}/${count}`,
+    method: 'get'
+  })
+}
+
+// 收据模板相关接口
+export function getReceiptTemplateList(params) {
+  return request({
+    url: '/receipt/template/page',
+    method: 'get',
+    params
+  })
+}
+
+export function addReceiptTemplate(data) {
+  return request({
+    url: '/receipt/template',
+    method: 'post',
+    data
+  })
+}
+
+export function updateReceiptTemplate(id, data) {
+  return request({
+    url: `/receipt/template/${id}`,
+    method: 'put',
+    data
+  })
+}
+
+export function deleteReceiptTemplate(id) {
+  return request({
+    url: `/receipt/template/${id}`,
+    method: 'delete'
+  })
+}
+
+export function previewReceiptTemplate(id) {
+  return request({
+    url: `/receipt/template/preview/${id}`,
+    method: 'get',
+    responseType: 'blob'
+  })
+}
+
+export function downloadReceiptTemplate(id) {
+  return request({
+    url: `/receipt/template/download/${id}`,
+    method: 'get',
+    responseType: 'blob'
+  })
+}
+
+export function downloadExampleTemplate() {
+  return request({
+    url: '/receipt/template/download-example',
+    method: 'get',
+    responseType: 'blob'
+  })
+}
+
+export function getReceiptKeywords() {
+  return request({
+    url: '/receipt/template/keywords',
+    method: 'get'
+  })
+}
+
+export function checkTemplateName(params) {
+  return request({
+    url: '/receipt/template/check-name',
+    method: 'get',
+    params
+  })
+}
+
+// 收款方信息相关接口
+export function getPayeeInfo(params) {
+  if (typeof params === 'object') {
+    // 查询列表
+    return request({
+      url: '/receipt/payee/page',
+      method: 'get',
+      params
+    })
+  } else {
+    // 查询详情
+    return request({
+      url: `/receipt/payee/${params}`,
+      method: 'get'
+    })
+  }
+}
+
+export function addPayeeInfo(data) {
+  return request({
+    url: '/receipt/payee',
+    method: 'post',
+    data
+  })
+}
+
+export function updatePayeeInfo(id, data) {
+  return request({
+    url: `/receipt/payee/${id}`,
+    method: 'put',
+    data
+  })
+}
+
+export function deletePayeeInfo(id) {
+  return request({
+    url: `/receipt/payee/${id}`,
+    method: 'delete'
+  })
+}
+
+// 项目列表
+export function getProjectList() {
+  return request({
+    url: '/project/list',
+    method: 'get'
+  })
+}
+
+// 获取楼宇列表
+export function getBuildingList(projectId) {
+  return request({
+    url: `/business/building/list/${projectId}`,
+    method: 'get'
+  })
+}
+
+/* 收费标准相关接口 */
+
+// 分页查询收费标准列表
+export function getChargingStandardPage(query) {
+  return request({
+    url: '/finance/charging-standard/page',
+    method: 'get',
+    params: query
+  })
+}
+
+// 根据ID查询收费标准详情
+export function getChargingStandardById(id) {
+  return request({
+    url: `/finance/charging-standard/${id}`,
+    method: 'get'
+  })
+}
+
+// 新增收费标准
+export function addChargingStandard(data) {
+  return request({
+    url: '/finance/charging-standard',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改收费标准
+export function updateChargingStandard(data) {
+  return request({
+    url: '/finance/charging-standard',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除收费标准
+export function deleteChargingStandard(id) {
+  return request({
+    url: `/finance/charging-standard/${id}`,
+    method: 'delete'
+  })
+}
+
+// 更新收费标准状态（立即失效）
+export function updateChargingStandardStatus(id) {
+  return request({
+    url: `/finance/charging-standard/${id}/updateStatus`,
+    method: 'put'
+  })
+}
+
+// 检查收费标准名称是否存在
+export function checkChargingStandardName(standardName, id) {
+  return request({
+    url: '/finance/charging-standard/check-name',
+    method: 'get',
+    params: { standardName, id }
+  })
+}
+
+// 根据状态查询收费标准列表
+export function getChargingStandardListByStatus(status) {
+  return request({
+    url: '/finance/charging-standard/list-by-status',
+    method: 'get',
+    params: { status }
+  })
+}
+
+// 获取费用类型树
+export function getFeeTypeTree(params) {
+  return request({
+    url: '/feeForeign/categories',
+    method: 'get',
+    params
+  })
+}
+
+// 预览账单
+export function previewBill(data) {
+  return request({
+    url: '/finance/charging-standard/bill/preview',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    data
+  })
+}
+
+// 生成账单
+export function generateBill(data) {
+  return request({
+    url: '/finance/charging-standard/bill/generate',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    data
+  })
+}
+
+/**
+ * 分页查询账单-收费标准关联表数据
+ * @param {Object} data - 查询参数
+ * @returns {Promise} - 返回Promise对象
+ */
+export function getBillChargingStandardRelPage(data) {
+  return request({
+    url: '/finance/bill-charging-standard-rel/page',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 获取特定标准ID的绑定房间账单列表
+ * @param {string} standardId 收费标准ID
+ */
+export function getBillsByStandardId(standardId) {
+  return request({
+    url: `/finance/bill-charging-standard-rel/${standardId}/bills`,
+    method: 'get'
+  })
+}
+
+// 账单管理接口
+export function addBill(data) {
+  return request({
+    url: '/bill/add',
+    method: 'post',
+    data
+  })
+}
+
+export function getBillList(data) {
+  return request({
+    url: '/bill/list',
+    method: 'post',
+    data
+  })
+}
+
+export function getBillDetail(billId) {
+  return request({
+    url: `/bill/detail/${billId}`,
+    method: 'get'
+  })
+}
+
+export function uploadBillAttachment(billId, file) {
+  const formData = new FormData()
+  formData.append('billId', billId)
+  formData.append('file', file)
+  return request({
+    url: '/bill/upload-attachment',
+    method: 'post',
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+
+// 账单附件删除
+export function deleteBillAttachment(attachmentId) {
+  return request({
+    url: `/bill/attachment/delete/${attachmentId}`,
+    method: 'get'
+  })
+}
+
+export function getBillAttachmentList(billId) {
+  return request({
+    url: `/bill/attachment/list/${billId}`,
+    method: 'get'
+  })
+}
+
+export function exportBillList(data) {
+  return request({
+    url: '/bill/export',
+    method: 'post',
+    data,
+    responseType: 'blob'
+  })
+}
+
+// 收支流水相关接口
+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 getAccountCascaderOptions() {
+  return request({
+    url: '/finance/account/cascader',
+    method: 'get'
+  })
+}
+
+// 账单调整相关接口
+
+// 添加账单调整(按金额或按比例)
+export function addBillAdjustment(data) {
+  return request({
+    url: '/v1/bill-adjustments',
+    method: 'post',
+    data
+  })
+}
+
+// 调整账单滞纳金专用接口
+export function adjustLateFee(data) {
+  return request({
+    url: '/v1/late-fees/adjust',
+    method: 'post',
+    data
+  })
+}
+
+// 结算账单滞纳金接口
+export function settleLateFee(data) {
+  return request({
+    url: '/v1/late-fees/settle',
+    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'
+  })
+}
+
+// 收据记录相关接口
+export function getReceiptRecordPage(params) {
+  return request({
+    url: '/finance/receipt/page',
+    method: 'get',
+    params
+  })
+}
+
+// 获取账单关联的收支流水列表
+export function getBillTransactionList(billId, params) {
+  return request({
+    url: `/v1/bill/${billId}/transactions`,
+    method: 'get',
+    params
+  })
+}
+
+export function getReceiptRecordDetail(id) {
+  return request({
+    url: `/finance/receipt/${id}`,
+    method: 'get'
+  })
+}
+
+export function voidReceipt(id) {
+  return request({
+    url: `/finance/receipt/void/${id}`,
+    method: 'post'
+  })
+}
+
+export function generateReceipt(data) {
+  return request({
+    url: '/finance/receipt/generate',
+    method: 'post',
+    data
+  })
+}
+
+export function previewReceipt(previewId) {
+  return request({
+    url: `/finance/receipt/preview/${previewId}`,
+    method: 'get',
+    responseType: 'blob'
+  })
+}
+
+export function downloadReceipt(previewId) {
+  return request({
+    url: `/finance/receipt/download-preview/${previewId}`,
+    method: 'get',
+    responseType: 'blob'
+  })
+}
+
+export function printReceipt(previewId) {
+  return request({
+    url: `/finance/receipt/print/${previewId}`,
+    method: 'get',
+    responseType: 'blob'
+  })
+}
+
+export function downloadReceiptByFilename(receiptFileName) {
+  return request({
+    url: '/finance/receipt/download-by-filename',
+    method: 'get',
+    params: { receiptFileName },
+    responseType: 'blob'
+  })
+}
+
+export function previewReceiptByFilename(receiptFileName) {
+  return request({
+    url: '/finance/receipt/preview-by-filename',
+    method: 'get',
+    params: { receiptFileName },
+    responseType: 'blob'
+  })
+}
+
+export function printReceiptByFilename(receiptFileName) {
+  return request({
+    url: '/finance/receipt/print-by-filename',
+    method: 'get',
+    params: { receiptFileName },
+    responseType: 'blob'
+  })
+}
+
+// 关闭账单
+export function closeBill(data) {
+  return request({
+    url: '/bill/close',
+    method: 'post',
+    data
+  })
+}
+
+// 获取可开据收据明细
+export function getReceiptDetails(billId) {
+  return request({
+    url: '/receipt/details',
+    method: 'get',
+    params: { billId }
+  })
+}
+
+// 开具收据
+export function issueReceipt(data) {
+  return request({
+    url: '/receipt/issue',
+    method: 'post',
+    data
+  })
+}
+
+// 分页查询收据记录
+export function getReceiptRecords(billId, params) {
+  return request({
+    url: '/receipt/records',
+    method: 'get',
+    params: { billId, ...params }
+  })
+}
+
+// 获取收据详情
+export function getReceiptDetail(id) {
+  return request({
+    url: '/receipt/detail',
+    method: 'get',
+    params: { id }
+  })
+}
+
+// 更新收据状态为已发出
+export function updateReceiptIssueStatus(id) {
+  return request({
+    url: '/receipt/issue-status',
+    method: 'post',
+    data: { id }
+  })
+}
+
+// 作废收据
+export function voidReceiptById(id) {
+  return request({
+    url: '/receipt/void',
+    method: 'post',
+    data: { id }
+  })
+}
+
+// 获取支付方式选项
+export function getPaymentMethodOptions() {
+  return request({
+    url: '/receipt/payment-methods',
+    method: 'get'
+  })
+}
+
+// 获取收据状态选项
+export function getReceiptStatusOptions() {
+  return request({
+    url: '/receipt/status-options',
+    method: 'get'
+  })
+}
+
+// 获取下一个收据编号
+export function getNextReceiptNumberByRuleId(ruleId) {
+  return request({
+    url: `/receipt/number/next/${ruleId}`,
+    method: 'get'
+  })
+}
+
+// 批量获取收据编号
+export function getBatchReceiptNumbersByRuleId(ruleId, count) {
+  return request({
+    url: `/receipt/numbers/${ruleId}/${count}`,
+    method: 'get'
+  })
+} 
\ No newline at end of file
diff --git a/pc/src/api/inventory.js b/pc/src/api/inventory.js
new file mode 100644
index 0000000..98b1e47
--- /dev/null
+++ b/pc/src/api/inventory.js
@@ -0,0 +1,29 @@
+import request from '@/utils/request'
+
+/**
+ * 导入库存
+ * @param {Object} data 文件数据
+ * @returns {Object} 请求结果
+ */
+export function importInventory(data) {
+  return request({
+    url: '/inventory/import',
+    method: 'post',
+    data: data,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+
+/**
+ * 下载库存导入模板
+ * @returns {Object} 请求结果
+ */
+export function downloadInventoryTemplate() {
+  return request({
+    url: '/inventory/template/download',
+    method: 'get',
+    responseType: 'blob'
+  })
+} 
\ No newline at end of file
diff --git a/pc/src/api/merchant.js b/pc/src/api/merchant.js
new file mode 100644
index 0000000..bcc6bcd
--- /dev/null
+++ b/pc/src/api/merchant.js
@@ -0,0 +1,583 @@
+import request from '@/utils/request'
+
+// 招商团队相关API
+export function getMerchantTeamList(params) {
+  return request({
+    url: '/bizTeam/list',
+    method: 'get',
+    params
+  })
+}
+
+export function getMerchantTeamDetail(id) {
+  return request({
+    url: `/bizTeam/${id}`,
+    method: 'get'
+  })
+}
+// 根据项目ID获取招商团队信息
+export function getMerchantTeamByProjectId(projectId) {
+  return request({
+    url: `/bizTeam/project/${projectId}`,
+    method: 'get'
+  })
+}
+
+export function addMerchantTeam(data) {
+  return request({
+    url: '/bizTeam',
+    method: 'post',
+    data
+  })
+}
+
+export function updateMerchantTeam(data) {
+  return request({
+    url: '/bizTeam',
+    method: 'put',
+    data
+  })
+}
+
+export function deleteMerchantTeam(id, userId) {
+  return request({
+    url: `/bizTeam/${id}`,
+    method: 'delete',
+    params: { userId }
+  })
+}
+
+export function checkTeamName(params) {
+  return request({
+    url: '/bizTeam/checkName',
+    method: 'get',
+    params
+  })
+}
+
+export function getProjectsList() {
+  return request({
+    url: '/bizTeam/projects',
+    method: 'get'
+  })
+}
+
+// 招商人员相关API
+export function getMerchantPersonnelList(data) {
+  return request({
+    url: '/bizPersonnel/queryAllPersonnel',
+    method: 'post',
+    data
+  })
+}
+
+export function getPersonnelByTeamId(teamId) {
+  return request({
+    url: `/business/personnel/team/${teamId}`,
+    method: 'get'
+  })
+}
+
+export function getPersonnelDetail(id) {
+  return request({
+    url: `/business/personnel/${id}`,
+    method: 'get'
+  })
+}
+
+export function addMerchantPersonnel(data) {
+  return request({
+    url: '/bizPersonnel',
+    method: 'post',
+    data
+  })
+}
+
+export function batchAddMerchantPersonnel(data) {
+  return request({
+    url: '/bizPersonnel/batch',
+    method: 'post',
+    data
+  })
+}
+
+export function removeMerchantPersonnel(id, userId) {
+  return request({
+    url: `/bizPersonnel/${id}`,
+    method: 'delete',
+    params: { userId }
+  })
+}
+
+export function checkMemberExists(params) {
+  return request({
+    url: '/bizPersonnel/checkMember',
+    method: 'get',
+    params
+  })
+}
+
+// 成员管理相关API
+export function getDepartmentTree() {
+  return request({
+    url: '/business/member/dept/tree',
+    method: 'get'
+  })
+}
+
+export function getDepartmentMemberTree() {
+  return request({
+    url: '/business/member/tree',
+    method: 'get'
+  })
+}
+
+export function getManagerList() {
+  return request({
+    url: '/business/member/managers',
+    method: 'get'
+  })
+}
+
+export function getMemberList(params) {
+  return request({
+    url: '/business/member/list',
+    method: 'get',
+    params
+  })
+}
+
+export function getMembersByDeptId(deptId) {
+  return request({
+    url: `/business/member/dept/${deptId}`,
+    method: 'get'
+  })
+}
+
+export function getMemberDetail(memberId) {
+  return request({
+    url: `/business/member/${memberId}`,
+    method: 'get'
+  })
+}
+
+// 获取项目列表
+export function getProjectList() {
+  return request({
+    url: '/project/list',
+    method: 'get'
+  })
+}
+
+// 获取线索数量
+export function getClueCount(personnelId) {
+  return request({
+    url: `/merchant/clue/count/${personnelId}`,
+    method: 'get'
+  })
+}
+
+// 获取意向客户数量
+export function getIntentCustomerCount(personnelId) {
+  return request({
+    url: `/merchant/intent-customer/count/${personnelId}`,
+    method: 'get'
+  })
+}
+
+// 获取合同数量
+export function getContractCount(personnelId) {
+  return request({
+    url: `/merchant/contract/count/${personnelId}`,
+    method: 'get'
+  })
+}
+
+// 标签分组相关API
+export function getTagGroupList(params) {
+  return request({
+    url: '/business/tag-group/list',
+    method: 'get',
+    params
+  })
+}
+
+export function getAllTagGroups() {
+  return request({
+    url: '/business/tag-group/all',
+    method: 'get'
+  })
+}
+
+export function getTagGroupDetail(id) {
+  return request({
+    url: `/business/tag-group/${id}`,
+    method: 'get'
+  })
+}
+
+export function addTagGroup(data) {
+  return request({
+    url: '/business/tag-group',
+    method: 'post',
+    data
+  })
+}
+
+export function updateTagGroup(data) {
+  return request({
+    url: '/business/tag-group',
+    method: 'put',
+    data
+  })
+}
+
+export function deleteTagGroup(id) {
+  return request({
+    url: `/business/tag-group/${id}`,
+    method: 'delete'
+  })
+}
+
+export function checkTagGroupName(params) {
+  return request({
+    url: '/business/tag-group/check-name',
+    method: 'get',
+    params
+  })
+}
+
+// 标签相关API
+export function getTagList(params) {
+  return request({
+    url: '/business/tag/list',
+    method: 'get',
+    params
+  })
+}
+
+export function getTagListByGroupId(groupId) {
+  return request({
+    url: `/business/tag/group/${groupId}`,
+    method: 'get'
+  })
+}
+
+export function getTagDetail(id) {
+  return request({
+    url: `/business/tag/${id}`,
+    method: 'get'
+  })
+}
+
+export function addTag(data) {
+  return request({
+    url: '/business/tag',
+    method: 'post',
+    data
+  })
+}
+
+export function updateTag(data) {
+  return request({
+    url: '/business/tag',
+    method: 'put',
+    data
+  })
+}
+
+export function deleteTag(id) {
+  return request({
+    url: `/business/tag/${id}`,
+    method: 'delete'
+  })
+}
+
+export function checkTagName(params) {
+  return request({
+    url: '/business/tag/check-name',
+    method: 'get',
+    params
+  })
+}
+
+// 线索状态API
+export function getLeadStatusList() {
+  return request({
+    url: '/bizLead/status/list',
+    method: 'get'
+  })
+}
+
+export function getLeadStatusDetail(id) {
+  return request({
+    url: `/bizLead/status/${id}`,
+    method: 'get'
+  })
+}
+
+export function addLeadStatus(data) {
+  return request({
+    url: '/bizLead/status',
+    method: 'post',
+    data
+  })
+}
+
+export function updateLeadStatus(data) {
+  return request({
+    url: '/bizLead/status',
+    method: 'put',
+    data
+  })
+}
+
+export function deleteLeadStatus(id, userId) {
+  return request({
+    url: `/bizLead/status/${id}`,
+    method: 'delete',
+    params: { userId }
+  })
+}
+
+export function checkLeadStatusName(statusName) {
+  return request({
+    url: '/bizLead/status/checkName',
+    method: 'get',
+    params: { statusName }
+  })
+}
+
+// 线索管理API
+export function getLeadList(params) {
+  return request({
+    url: '/bizLead/list',
+    method: 'get',
+    params
+  })
+}
+
+export function getMyLeadList(params) {
+  return request({
+    url: '/bizLead/myLeads',
+    method: 'get',
+    params
+  })
+}
+
+export function getAllLeadList(params) {
+  return request({
+    url: '/bizLead/allLeads',
+    method: 'get',
+    params
+  })
+}
+
+export function getPublicLeadList(params) {
+  return request({
+    url: '/bizLead/publicLeads',
+    method: 'get',
+    params
+  })
+}
+
+export function getLeadDetail(id) {
+  return request({
+    url: `/bizLead/${id}`,
+    method: 'get'
+  })
+}
+
+export function addLead(data) {
+  return request({
+    url: '/bizLead',
+    method: 'post',
+    data
+  })
+}
+
+export function updateLead(data) {
+  return request({
+    url: '/bizLead',
+    method: 'put',
+    data
+  })
+}
+
+export function changeLeadStatus(id, statusId, userId) {
+  return request({
+    url: `/bizLead/${id}/status`,
+    method: 'put',
+    params: { statusId, userId }
+  })
+}
+
+export function changeLeadPersonnel(id, personnelId, userId) {
+  return request({
+    url: `/bizLead/${id}/personnel`,
+    method: 'put',
+    params: { personnelId, userId }
+  })
+}
+
+export function checkLeadPhone(phone) {
+  return request({
+    url: '/bizLead/checkPhone',
+    method: 'get',
+    params: { phone }
+  })
+}
+
+export function convertLeadToIntention(id, userId) {
+  return request({
+    url: `/bizLead/${id}/convert`,
+    method: 'post',
+    params: { userId }
+  })
+}
+
+export function deleteLead(id, userId) {
+  return request({
+    url: `/bizLead/${id}`,
+    method: 'delete',
+    params: { userId }
+  })
+}
+
+export function getLeadFollowHistory(leadId) {
+  return request({
+    url: `/bizLead/${leadId}/followHistory`,
+    method: 'get'
+  })
+}
+
+// 意向客户相关API
+export function getCustomerDetail(id) {
+  return request({
+    url: `/bizCustomer/${id}`,
+    method: 'get'
+  })
+}
+
+export function createCustomer(data) {
+  return request({
+    url: '/bizCustomer',
+    method: 'post',
+    data
+  })
+}
+
+export function updateCustomer(data) {
+  return request({
+    url: '/bizCustomer',
+    method: 'put',
+    data
+  })
+}
+
+export function deleteCustomer(id) {
+  return request({
+    url: `/bizCustomer/${id}`,
+    method: 'delete'
+  })
+}
+
+export function changeCustomerPersonnel(id, personnelId) {
+  return request({
+    url: `/bizCustomer/personnel/${id}/${personnelId}`,
+    method: 'put'
+  })
+}
+
+export function changeCustomerStatus(id, statusId) {
+  return request({
+    url: `/bizCustomer/status/${id}/${statusId}`,
+    method: 'put'
+  })
+}
+
+export function checkCustomerPhone(params) {
+  return request({
+    url: '/bizCustomer/checkPhone',
+    method: 'get',
+    params
+  })
+}
+
+export function getMyCustomerList(data) {
+  return request({
+    url: '/bizCustomer/myCustomer',
+    method: 'post',
+    data
+  })
+}
+
+export function getAllCustomerList(data) {
+  return request({
+    url: '/bizCustomer/allCustomer',
+    method: 'post',
+    data
+  })
+}
+
+export function getPublicCustomerList(data) {
+  return request({
+    url: '/bizCustomer/publicCustomer',
+    method: 'post',
+    data
+  })
+}
+
+export function followCustomer(data) {
+  return request({
+    url: '/bizCustomer/follow',
+    method: 'post',
+    data
+  })
+}
+
+export function getCustomerFollowHistory(customerId) {
+  return request({
+    url: `/bizCustomer/followHistory/${customerId}`,
+    method: 'get'
+  })
+}
+
+export function assignCustomer(id, params) {
+  return request({
+    url: `/bizCustomer/${id}/assign`,
+    method: 'post',
+    params
+  })
+}
+
+export function returnCustomerToPublic(id, userId) {
+  return request({
+    url: `/bizCustomer/returnToPublic/${id}`,
+    method: 'post',
+    params: { userId }
+  })
+}
+
+export function getCustomerTagGroups() {
+  return request({
+    url: '/bizCustomer/tags/groups',
+    method: 'get'
+  })
+}
+
+export function saveCustomerTags(data) {
+  return request({
+    url: '/bizCustomer/tags',
+    method: 'post',
+    data
+  })
+}
+
+// 获取客户状态列表
+export function getCustomerStatusList() {
+  return request({
+    url: '/bizCustomer/status/list',
+    method: 'get'
+  })
+}
diff --git a/pc/src/api/project.js b/pc/src/api/project.js
new file mode 100644
index 0000000..5878920
--- /dev/null
+++ b/pc/src/api/project.js
@@ -0,0 +1,70 @@
+import request from '@/utils/request'
+
+// 获取项目列表
+export function getProjectList(query) {
+  return request({
+    url: '/room/project/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 获取项目详情
+export function getProjectDetail(id) {
+  return request({
+    url: `/room/project/${id}`,
+    method: 'get'
+  })
+}
+
+// 新增项目
+export function addProject(data) {
+  return request({
+    url: '/room/project/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改项目
+export function updateProject(id, data) {
+  const updateData = { ...data, id }
+  return request({
+    url: '/room/project/edit',
+    method: 'post',
+    data: updateData
+  })
+}
+
+// 删除项目
+export function deleteProject(id) {
+  return request({
+    url: `/room/project/remove/${id}`,
+    method: 'post'
+  })
+}
+
+// 获取项目统计数据
+export function getProjectStatistics(id) {
+  return request({
+    url: `/room/project/${id}/statistics`,
+    method: 'get'
+  })
+}
+
+// 获取所有项目统计数据（整体概况）
+export function getAllProjectStatistics() {
+  return request({
+    url: '/room/project/statistics',
+    method: 'get'
+  })
+} 
+
+// 获取标签列表
+export function getTagByType(data) {
+  return request({
+    url: '/admin/tag/getTagsByType',
+    method: 'post',
+    data: data
+  })
+}
\ No newline at end of file
diff --git a/pc/src/api/resource.js b/pc/src/api/resource.js
new file mode 100644
index 0000000..12fb916
--- /dev/null
+++ b/pc/src/api/resource.js
@@ -0,0 +1,54 @@
+import request from '@/utils/request'
+
+/**
+ * 上传附件
+ * @param {File} file 文件对象
+ * @returns {Promise} 返回包含fileId和fileName的Promise
+ */
+export function uploadAttachment(file) {
+  const formData = new FormData()
+  formData.append('file', file)
+  return request({
+    url: '/resource/attachment/uploadAttachment',
+    method: 'post',
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+
+/**
+ * 下载附件
+ * @param {string} fileId 文件ID
+ * @returns {Promise} 返回文件流的Promise
+ */
+export function downloadAttachment(fileId) {
+  return request({
+    url: `/resource/attachment/downloadAttachment?fileId=${fileId}`,
+    method: 'get',
+    responseType: 'blob'
+  })
+}
+
+/**
+ * 批量删除附件
+ * @param {Array} fileIds 文件ID数组
+ * @returns {Promise} 返回操作结果的Promise
+ */
+export function batchDeleteAttachment(fileIds) {
+  return request({
+    url: '/resource/attachment/batchDeleteAttachment',
+    method: 'post',
+    data: fileIds
+  })
+}
+
+/**
+ * 删除单个附件
+ * @param {string} fileId 文件ID
+ * @returns {Promise} 返回操作结果的Promise
+ */
+export function deleteAttachment(fileId) {
+  return batchDeleteAttachment([fileId])
+} 
\ No newline at end of file
diff --git a/pc/src/api/room.js b/pc/src/api/room.js
new file mode 100644
index 0000000..79b20b2
--- /dev/null
+++ b/pc/src/api/room.js
@@ -0,0 +1,199 @@
+import request from '@/utils/request'
+
+// 查询房源列表
+export function listRoom(query) {
+  return request({
+    url: '/room/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询房源详细信息
+export function getRoom(id) {
+  return request({
+    url: '/room/' + id,
+    method: 'get'
+  })
+}
+
+// 新增房源
+export function addRoom(data) {
+  return request({
+    url: '/room/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改房源
+export function updateRoom(data) {
+  return request({
+    url: '/room/edit',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除房源
+export function delRoom(id) {
+  return request({
+    url: '/room/remove/' + id,
+    method: 'post'
+  })
+}
+
+// 批量删除房源
+export function delRoomBatch(ids) {
+  return request({
+    url: '/room/batch/remove/' + ids,
+    method: 'post'
+  })
+}
+
+// 导出房源
+export function exportRoom(query) {
+  return request({
+    url: '/room/template/export/batch',
+    method: 'post',
+    data: query,
+    responseType: 'blob'
+  })
+}
+
+// 下载导入模板
+export function downloadTemplate() {
+  return request({
+    url: '/room/template/download',
+    method: 'get',
+    responseType: 'blob'
+  })
+}
+
+// 导入房源数据
+export function importRoom(file) {
+  const formData = new FormData()
+  formData.append('file', file)
+  return request({
+    url: '/room/import',
+    method: 'post',
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+
+// 查询房源标签列表
+export function listRoomTags() {
+  return request({
+    url: '/room/tags',
+    method: 'get'
+  })
+}
+
+// 获取项目列表
+export function listProjects() {
+  return request({
+    url: '/project/list',
+    method: 'get'
+  })
+}
+
+// 获取楼宇列表
+export function listBuildings(projectId) {
+  return request({
+    url: '/building/list',
+    method: 'get',
+    params: { projectId }
+  })
+}
+
+// 获取楼层列表
+export function listFloors(buildingId) {
+  return request({
+    url: '/building/floors',
+    method: 'get',
+    params: { buildingId }
+  })
+}
+
+// 远程调用 - 获取业户列表
+export function listOwners(query) {
+  return request({
+    url: '/customer/owners',
+    method: 'get',
+    params: query
+  })
+}
+
+// 远程调用 - 检查房源合同状态
+export function checkRoomContractStatus(roomId) {
+  return request({
+    url: '/contract/check/room/' + roomId,
+    method: 'get'
+  })
+}
+
+// 修改房源租赁状态
+export function updateRoomLeaseStatus(id, status) {
+  return request({
+    url: '/room/lease-status',
+    method: 'post',
+    data: { id, status }
+  })
+}
+
+// 检查房号是否存在
+export function checkRoomNumberExists(params) {
+  return request({
+    url: '/room/check-number',
+    method: 'get',
+    params: params
+  })
+}
+
+// 获取房源图片列表
+export function listRoomImages(params) {
+  return request({
+    url: '/room/images',
+    method: 'get',
+    params: params
+  })
+}
+
+// 上传房源图片
+export function uploadRoomImage(roomId, imageType, file, sortOrder) {
+  const formData = new FormData()
+  formData.append('roomId', roomId)
+  formData.append('imageType', imageType)
+  formData.append('file', file)
+  if (sortOrder !== undefined) {
+    formData.append('sortOrder', sortOrder)
+  }
+  return request({
+    url: '/room/upload',
+    method: 'post',
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+
+// 删除房源图片
+export function deleteRoomImage(id) {
+  return request({
+    url: '/room/image/' + id,
+    method: 'post'
+  })
+}
+
+// 批量删除房源图片
+export function batchDeleteRoomImages(ids) {
+  return request({
+    url: '/room/images/batch',
+    method: 'post',
+    data: { ids }
+  })
+} 
\ No newline at end of file
diff --git a/pc/src/assets/images/code.png b/pc/src/assets/images/code.png
new file mode 100644
index 0000000..67f1ea1
Binary files /dev/null and b/pc/src/assets/images/code.png differ
diff --git a/pc/src/assets/images/qrcode.svg b/pc/src/assets/images/qrcode.svg
new file mode 100644
index 0000000..9a30208
--- /dev/null
+++ b/pc/src/assets/images/qrcode.svg
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0" width="200" height="200" fill="white"/>
+  <!-- QR Code pattern -->
+  <!-- Position detection patterns (corners) -->
+  <!-- Top-left -->
+  <rect x="20" y="20" width="40" height="40" fill="black"/>
+  <rect x="28" y="28" width="24" height="24" fill="white"/>
+  <rect x="36" y="36" width="8" height="8" fill="black"/>
+  
+  <!-- Top-right -->
+  <rect x="140" y="20" width="40" height="40" fill="black"/>
+  <rect x="148" y="28" width="24" height="24" fill="white"/>
+  <rect x="156" y="36" width="8" height="8" fill="black"/>
+  
+  <!-- Bottom-left -->
+  <rect x="20" y="140" width="40" height="40" fill="black"/>
+  <rect x="28" y="148" width="24" height="24" fill="white"/>
+  <rect x="36" y="156" width="8" height="8" fill="black"/>
+  
+  <!-- Timing patterns -->
+  <rect x="36" y="76" width="8" height="8" fill="black"/>
+  <rect x="52" y="76" width="8" height="8" fill="black"/>
+  <rect x="68" y="76" width="8" height="8" fill="black"/>
+  <rect x="84" y="76" width="8" height="8" fill="black"/>
+  <rect x="100" y="76" width="8" height="8" fill="black"/>
+  <rect x="116" y="76" width="8" height="8" fill="black"/>
+  <rect x="132" y="76" width="8" height="8" fill="black"/>
+  <rect x="148" y="76" width="8" height="8" fill="black"/>
+  
+  <rect x="76" y="36" width="8" height="8" fill="black"/>
+  <rect x="76" y="52" width="8" height="8" fill="black"/>
+  <rect x="76" y="68" width="8" height="8" fill="black"/>
+  <rect x="76" y="84" width="8" height="8" fill="black"/>
+  <rect x="76" y="100" width="8" height="8" fill="black"/>
+  <rect x="76" y="116" width="8" height="8" fill="black"/>
+  <rect x="76" y="132" width="8" height="8" fill="black"/>
+  <rect x="76" y="148" width="8" height="8" fill="black"/>
+  
+  <!-- Random QR code data blocks -->
+  <rect x="52" y="36" width="8" height="8" fill="black"/>
+  <rect x="68" y="52" width="8" height="8" fill="black"/>
+  <rect x="84" y="84" width="8" height="8" fill="black"/>
+  <rect x="100" y="116" width="8" height="8" fill="black"/>
+  <rect x="116" y="132" width="8" height="8" fill="black"/>
+  <rect x="132" y="148" width="8" height="8" fill="black"/>
+  <rect x="148" y="100" width="8" height="8" fill="black"/>
+  <rect x="36" y="116" width="8" height="8" fill="black"/>
+  <rect x="52" y="132" width="8" height="8" fill="black"/>
+  <rect x="116" y="36" width="8" height="8" fill="black"/>
+  <rect x="132" y="52" width="8" height="8" fill="black"/>
+  <rect x="92" y="140" width="8" height="8" fill="black"/>
+  <rect x="108" y="92" width="8" height="8" fill="black"/>
+  <rect x="124" y="108" width="8" height="8" fill="black"/>
+  <rect x="44" y="100" width="8" height="8" fill="black"/>
+  <rect x="60" y="92" width="8" height="8" fill="black"/>
+  <rect x="100" y="44" width="8" height="8" fill="black"/>
+  <rect x="92" y="60" width="8" height="8" fill="black"/>
+  <rect x="156" y="92" width="8" height="8" fill="black"/>
+  <rect x="140" y="108" width="8" height="8" fill="black"/>
+  <rect x="124" y="156" width="8" height="8" fill="black"/>
+  <rect x="108" y="140" width="8" height="8" fill="black"/>
+  <rect x="44" y="156" width="8" height="8" fill="black"/>
+  <rect x="60" y="140" width="8" height="8" fill="black"/>
+</svg> 
\ No newline at end of file
diff --git a/pc/src/assets/images/tag_01.png b/pc/src/assets/images/tag_01.png
new file mode 100644
index 0000000..feeeb61
Binary files /dev/null and b/pc/src/assets/images/tag_01.png differ
diff --git a/pc/src/assets/images/tag_02.png b/pc/src/assets/images/tag_02.png
new file mode 100644
index 0000000..01b6dff
Binary files /dev/null and b/pc/src/assets/images/tag_02.png differ
diff --git a/pc/src/assets/images/tag_03.png b/pc/src/assets/images/tag_03.png
new file mode 100644
index 0000000..53c3ccf
Binary files /dev/null and b/pc/src/assets/images/tag_03.png differ
diff --git a/pc/src/assets/images/tag_04.png b/pc/src/assets/images/tag_04.png
new file mode 100644
index 0000000..2d275c2
Binary files /dev/null and b/pc/src/assets/images/tag_04.png differ
diff --git a/pc/src/assets/styles/index.scss b/pc/src/assets/styles/index.scss
new file mode 100644
index 0000000..2856549
--- /dev/null
+++ b/pc/src/assets/styles/index.scss
@@ -0,0 +1,24 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.el-container {
+  height: 100%;
+}
+
+.el-header {
+  padding: 0;
+  height: 60px;
+}
+
+.el-main {
+  background-color: #f0f2f5;
+  padding: 20px;
+} 
\ No newline at end of file
diff --git a/pc/src/components/MemberSelector/index.vue b/pc/src/components/MemberSelector/index.vue
new file mode 100644
index 0000000..b3cdfbf
--- /dev/null
+++ b/pc/src/components/MemberSelector/index.vue
@@ -0,0 +1,655 @@
+<template>
+  <el-dialog
+    title="请选择成员"
+    :visible.sync="visible"
+    width="550px"
+    class="member-dialog"
+    append-to-body
+    @close="handleClose"
+  >
+    <div class="member-dialog-content">
+      <!-- 左侧部分 -->
+      <div class="member-list-area">
+        <div class="member-search-header">
+          <el-select v-model="memberType" placeholder="成员" class="member-type-select">
+            <el-option label="成员" value="member"></el-option>
+          </el-select>
+          <el-input
+            v-model="memberSearchKeyword"
+            placeholder="请输入姓名"
+            class="search-input"
+            prefix-icon="el-icon-search"
+            clearable
+          />
+        </div>
+     
+        
+        <div class="member-list">
+          <div class="all-select">
+            <el-checkbox 
+              v-model="selectAll" 
+              :disabled="selectionMode === 'single'"
+              @change="handleSelectAllChange"
+            >全选</el-checkbox>
+          </div>
+          
+          <div v-for="department in departmentList" :key="department.id" class="department-item">
+            <div class="department-name" @click="toggleDepartment(department)">
+              <i class="el-icon-user-solid department-icon"></i>
+              {{ department.name }}
+              <i :class="['el-icon-arrow-right department-expand-icon', {'is-expanded': department.expanded}]"></i>
+            </div>
+            
+            <div v-show="department.expanded">
+              <!-- 部门直属成员 -->
+              <template v-if="selectionMode === 'single'">
+                <div v-for="member in filteredMembers(department.id)" :key="member.id" class="member-item">
+                  <el-radio 
+                    v-model="tempSelectedMemberId" 
+                    :label="member.id"
+                    @change="handleMemberSelected(member, department)"
+                  >{{ member.name }}</el-radio>
+                </div>
+              </template>
+              <template v-else>
+                <div v-for="member in filteredMembers(department.id)" :key="member.id" class="member-item">
+                  <el-checkbox 
+                    v-model="member.checked"
+                    @change="(val) => handleMemberCheckChange(val, member, department)"
+                  >{{ member.name }}</el-checkbox>
+                </div>
+              </template>
+              
+              <!-- 子部门 -->
+              <div v-if="department.children && department.children.length">
+                <div v-for="subDept in department.children" :key="subDept.id" class="department-item sub-dept">
+                  <div class="department-name" @click.stop="toggleDepartment(subDept)">
+                    <i class="el-icon-office-building department-icon"></i>
+                    {{ subDept.name }}
+                    <i :class="['el-icon-arrow-right department-expand-icon', {'is-expanded': subDept.expanded}]"></i>
+                  </div>
+                  
+                  <div v-show="subDept.expanded">
+                    <template v-if="selectionMode === 'single'">
+                      <div v-for="member in filteredMembers(subDept.id)" :key="member.id" class="member-item">
+                        <el-radio 
+                          v-model="tempSelectedMemberId" 
+                          :label="member.id"
+                          @change="handleMemberSelected(member, subDept)"
+                        >{{ member.name }}</el-radio>
+                      </div>
+                    </template>
+                    <template v-else>
+                      <div v-for="member in filteredMembers(subDept.id)" :key="member.id" class="member-item">
+                        <el-checkbox 
+                          v-model="member.checked"
+                          @change="(val) => handleMemberCheckChange(val, member, subDept)"
+                        >{{ member.name }}</el-checkbox>
+                      </div>
+                    </template>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧已选择部分 -->
+      <div class="selected-area">
+        <div class="selected-header">
+          已选择：<span class="clear-btn" @click="clearSelectedMembers">清空</span>
+        </div>
+        <div class="selected-content">
+          <template v-if="selectionMode === 'single'">
+            <div v-if="tempSelectedMember" class="selected-item">
+              <div class="member-avatar">{{ tempSelectedMember.name.slice(-1) }}</div>
+              <span class="member-name">{{ tempSelectedMember.name }}</span>
+              <i class="el-icon-close" @click="clearSelectedMembers"></i>
+            </div>
+            <div v-else class="no-selected">未选择</div>
+          </template>
+          <template v-else>
+            <div v-if="tempSelectedMembers.length > 0">
+              <div v-for="member in tempSelectedMembers" :key="member.id" class="selected-item">
+                <div class="member-avatar">{{ member.name.slice(-1) }}</div>
+                <span class="member-name">{{ member.name }}</span>
+                <i class="el-icon-close" @click="removeTempSelectedMember(member)"></i>
+              </div>
+            </div>
+            <div v-else class="no-selected">未选择</div>
+          </template>
+        </div>
+      </div>
+    </div>
+    
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="handleCancel">取 消</el-button>
+      <el-button type="primary" @click="handleConfirm">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'MemberSelector',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    // 单选模式或多选模式
+    selectionMode: {
+      type: String,
+      default: 'single', // 'single' 或 'multiple'
+      validator: (value) => ['single', 'multiple'].includes(value)
+    },
+    // 预选成员（单选模式下为对象，多选模式下为数组）
+    selectedMember: {
+      type: Object,
+      default: () => null
+    },
+    selectedMembers: {
+      type: Array,
+      default: () => []
+    },
+    // 部门数据
+    departments: {
+      type: Array,
+      default: () => []
+    },
+    // 成员数据
+    members: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      memberType: 'member',
+      memberSearchKeyword: '',
+      selectAll: false,
+      
+      // 临时选中数据
+      tempSelectedMemberId: null,
+      tempSelectedMember: null,
+      tempSelectedMembers: [],
+      
+      // 内部使用的部门和成员数据（复制一份props数据）
+      departmentList: [],
+      allMembers: []
+    }
+  },
+  computed: {
+    // 计算是否应该显示为全选状态
+    isAllSelected() {
+      if (this.allMembers.length === 0) return false
+      return this.tempSelectedMembers.length === this.allMembers.length
+    }
+  },
+  watch: {
+    visible(val) {
+      if (val) {
+        this.initData()
+      }
+    },
+    selectedMember: {
+      handler(val) {
+        if (this.selectionMode === 'single' && val) {
+          this.tempSelectedMember = { ...val }
+          this.tempSelectedMemberId = val.id
+          
+          // 当selectedMember变化时，确保radio选中状态正确
+          this.$nextTick(() => {
+            if (val.id) {
+              // 直接设置单选框选中值
+              this.tempSelectedMemberId = val.id;
+              
+              // 打印调试信息
+              console.log('selectedMember updated:', val.name, 'ID:', val.id);
+            }
+          });
+        }
+      },
+      immediate: true,
+      deep: true
+    },
+    selectedMembers: {
+      handler(val) {
+        if (this.selectionMode === 'multiple' && val.length > 0) {
+          this.tempSelectedMembers = [...val]
+        }
+      },
+      immediate: true
+    },
+    // 监听选中状态变化，更新全选状态
+    tempSelectedMembers: {
+      handler(val) {
+        if (this.selectionMode === 'multiple') {
+          this.selectAll = this.isAllSelected
+        }
+      },
+      deep: true
+    },
+    departments: {
+      handler(val) {
+        if (val.length > 0) {
+          this.departmentList = JSON.parse(JSON.stringify(val))
+          // 默认展开所有顶级部门
+          this.departmentList.forEach(dept => {
+            this.$set(dept, 'expanded', true)
+            if (dept.children) {
+              dept.children.forEach(child => {
+                this.$set(child, 'expanded', false)
+              })
+            }
+          })
+        }
+      },
+      immediate: true
+    },
+    members: {
+      handler(val) {
+        if (val.length > 0) {
+          this.allMembers = JSON.parse(JSON.stringify(val))
+          // 为成员添加checked属性
+          this.resetMembersCheckStatus()
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    // 初始化数据
+    initData() {
+      // 重置搜索关键词
+      this.memberSearchKeyword = ''
+      console.log('MemberSelector initData called, selectedMember:', this.selectedMember)
+      
+      if (this.selectionMode === 'single') {
+        // 单选模式
+        if (this.selectedMember) {
+          this.tempSelectedMember = { ...this.selectedMember }
+          this.tempSelectedMemberId = this.selectedMember.id
+          console.log('单选模式：设置tempSelectedMemberId:', this.tempSelectedMemberId)
+          
+          // 将选中成员添加到临时选择列表，用于右侧显示
+          this.tempSelectedMembers = [{ ...this.selectedMember }]
+          
+          // 立即设置单选模式下的radio选中状态
+          this.$nextTick(() => {
+            
+            // 确保所有成员数据已经加载
+            if (this.tempSelectedMemberId && this.allMembers.length > 0) {
+              // 找到对应成员并设置选中状态
+              const member = this.allMembers.find(m => m.id == this.tempSelectedMemberId);
+              if (member) {
+                member.checked = true;
+                this.$set(member, 'checked', true);
+                console.log('单选模式已选择成员:', member.name, 'ID:', this.tempSelectedMemberId, 'checked:', member.checked);
+              }
+            }
+          });
+        } else {
+          this.tempSelectedMember = null
+          this.tempSelectedMemberId = null
+          this.tempSelectedMembers = []
+        }
+        this.selectAll = false
+      } else {
+        // 多选模式
+        this.tempSelectedMember = null
+        this.tempSelectedMemberId = null
+        this.tempSelectedMembers = [...this.selectedMembers]
+      }
+      
+      // 设置展开状态
+      this.departmentList.forEach(dept => {
+        dept.expanded = true
+        if (dept.children) {
+          dept.children.forEach(child => {
+            child.expanded = false
+          })
+        }
+      })
+      
+      // 重置选中状态
+      this.resetMembersCheckStatus()
+      
+      // 如果有已选成员，设置选中状态
+      if (this.selectionMode === 'multiple' && this.tempSelectedMembers.length > 0) {
+        this.setMembersCheckedByIds(this.tempSelectedMembers.map(m => m.id))
+        
+        // 检查是否全选
+        this.selectAll = this.tempSelectedMembers.length === this.allMembers.length
+      } else if (this.selectionMode === 'single' && this.tempSelectedMemberId) {
+        // 单选模式下，根据ID设置选中状态
+        const ids = [this.tempSelectedMemberId];
+        this.setMembersCheckedByIds(ids);
+        console.log('单选模式：设置选中状态, ids:', ids)
+      }
+    },
+    
+    // 重置所有成员的选中状态
+    resetMembersCheckStatus() {
+      this.allMembers.forEach(member => {
+        member.checked = false
+      })
+    },
+    
+    // 根据ID设置成员的选中状态
+    setMembersCheckedByIds(ids) {
+      this.allMembers.forEach(member => {
+        member.checked = ids.includes(member.id)
+      })
+    },
+    
+    // 根据部门ID筛选成员
+    filteredMembers(deptId) {
+      if (this.memberSearchKeyword) {
+        return this.allMembers.filter(member => 
+          member.deptId === deptId && 
+          member.name.includes(this.memberSearchKeyword)
+        )
+      }
+      return this.allMembers.filter(member => member.deptId === deptId)
+    },
+    
+    // 展开/收起部门
+    toggleDepartment(department) {
+      department.expanded = !department.expanded
+    },
+    
+    // 单选模式：选择成员
+    handleMemberSelected(member, department) {
+      console.log('单选成员:', member.name, 'ID:', member.id);
+      
+      // 清除其他成员的选中状态
+      this.allMembers.forEach(m => {
+        m.checked = m.id === member.id;
+      });
+      
+      // 更新临时选中成员
+      this.tempSelectedMember = {
+        id: member.id,
+        name: member.name,
+        phone: member.phone,
+        department: department.name
+      }
+      
+      // 更新右侧已选择列表
+      this.tempSelectedMembers = [this.tempSelectedMember];
+    },
+    
+    // 多选模式：处理复选框变化
+    handleMemberCheckChange(checked, member, department) {
+      if (checked) {
+        // 添加到已选列表
+        const exists = this.tempSelectedMembers.some(m => m.id === member.id)
+        if (!exists) {
+          this.tempSelectedMembers.push({
+            id: member.id,
+            name: member.name,
+            phone: member.phone,
+            department: department.name
+          })
+        }
+      } else {
+        // 从已选列表移除
+        const index = this.tempSelectedMembers.findIndex(m => m.id === member.id)
+        if (index !== -1) {
+          this.tempSelectedMembers.splice(index, 1)
+        }
+      }
+    },
+    
+    // 从已选列表中移除成员
+    removeTempSelectedMember(member) {
+      // 从已选列表移除
+      const index = this.tempSelectedMembers.findIndex(m => m.id === member.id)
+      if (index !== -1) {
+        this.tempSelectedMembers.splice(index, 1)
+      }
+      
+      // 更新复选框状态
+      const targetMember = this.allMembers.find(m => m.id === member.id)
+      if (targetMember) {
+        targetMember.checked = false
+      }
+    },
+    
+    // 清空选择的成员
+    clearSelectedMembers() {
+      this.tempSelectedMembers = []
+      this.tempSelectedMember = null
+      this.tempSelectedMemberId = null
+      
+      // 重置所有复选框
+      this.resetMembersCheckStatus()
+    },
+    
+    // 取消选择
+    handleCancel() {
+      this.$emit('update:visible', false)
+      this.$emit('cancel')
+    },
+    
+    // 关闭弹窗
+    handleClose() {
+      this.$emit('update:visible', false)
+    },
+    
+    // 确认选择
+    handleConfirm() {
+      if (this.selectionMode === 'single') {
+        // 单选模式
+        if (!this.tempSelectedMember) {
+          this.$message.warning('请选择成员')
+          return
+        }
+        this.$emit('confirm', this.tempSelectedMember)
+      } else {
+        // 多选模式
+        if (this.tempSelectedMembers.length === 0) {
+          this.$message.warning('请选择成员')
+          return
+        }
+        this.$emit('confirm', this.tempSelectedMembers)
+      }
+      
+      this.$emit('update:visible', false)
+    },
+    
+    // 处理全选变化
+    handleSelectAllChange(checked) {
+      if (this.selectionMode !== 'multiple') return
+      
+      // 更新所有复选框状态
+      this.allMembers.forEach(member => {
+        member.checked = checked
+      })
+      
+      if (checked) {
+        // 全选: 将所有成员添加到已选列表
+        this.tempSelectedMembers = this.allMembers.map(member => {
+          // 获取成员所在部门的名称
+          let departmentName = ''
+          for (const dept of this.departmentList) {
+            if (dept.id === member.deptId) {
+              departmentName = dept.name
+              break
+            }
+            
+            if (dept.children) {
+              for (const subDept of dept.children) {
+                if (subDept.id === member.deptId) {
+                  departmentName = subDept.name
+                  break
+                }
+              }
+            }
+          }
+          
+          return {
+            id: member.id,
+            name: member.name,
+            phone: member.phone || '',
+            department: departmentName
+          }
+        })
+      } else {
+        // 取消全选: 清空已选列表
+        this.tempSelectedMembers = []
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.member-dialog {
+  .member-dialog-content {
+    display: flex;
+    height: 350px;
+    
+    .member-list-area {
+      width: 65%;
+      border-right: 1px solid #EBEEF5;
+      padding-right: 15px;
+      display: flex;
+      flex-direction: column;
+      
+      .member-search-header {
+        display: flex;
+        margin-bottom: 10px;
+        
+        .member-type-select {
+          width: 90px;
+        }
+        
+        .search-input {
+          flex: 1;
+        }
+      }
+      
+      .department-nav {
+        border-bottom: 1px solid #EBEEF5;
+        margin-bottom: 10px;
+        
+        .nav-item {
+          display: inline-block;
+          padding: 8px 0;
+          cursor: pointer;
+          color: #409EFF;
+        }
+      }
+      
+      .member-list {
+        flex: 1;
+        overflow-y: auto;
+        
+        .all-select {
+          padding: 8px 0;
+        }
+        
+        .department-item {
+          margin-bottom: 5px;
+          
+          &.sub-dept {
+            padding-left: 20px;
+          }
+          
+          .department-name {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+            padding: 5px 0;
+            
+            .department-icon {
+              margin-right: 5px;
+              color: #5c6b77;
+            }
+            
+            .department-expand-icon {
+              margin-left: auto;
+              transition: transform 0.3s;
+              
+              &.is-expanded {
+                transform: rotate(90deg);
+              }
+            }
+          }
+          
+          .member-item {
+            padding: 3px 0 3px 20px;
+          }
+        }
+      }
+    }
+    
+    .selected-area {
+      width: 35%;
+      padding-left: 15px;
+      display: flex;
+      flex-direction: column;
+      
+      .selected-header {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 10px;
+        color: #606266;
+        
+        .clear-btn {
+          color: #409EFF;
+          cursor: pointer;
+          font-size: 12px;
+        }
+      }
+      
+      .selected-content {
+        flex: 1;
+        overflow-y: auto;
+        
+        .selected-item {
+          display: flex;
+          align-items: center;
+          margin-bottom: 10px;
+          
+          .member-avatar {
+            width: 28px;
+            height: 28px;
+            background-color: #409EFF;
+            color: #fff;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-right: 10px;
+            font-size: 14px;
+          }
+          
+          .member-name {
+            flex: 1;
+            color: #606266;
+          }
+          
+          .el-icon-close {
+            color: #C0C4CC;
+            cursor: pointer;
+            
+            &:hover {
+              color: #F56C6C;
+            }
+          }
+        }
+        
+        .no-selected {
+          color: #909399;
+          text-align: center;
+          margin-top: 20px;
+        }
+      }
+    }
+  }
+}
+</style> 
\ 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/layout/index.vue b/pc/src/layout/index.vue
new file mode 100644
index 0000000..18de30d
--- /dev/null
+++ b/pc/src/layout/index.vue
@@ -0,0 +1,112 @@
+<template>
+  <el-container class="app-wrapper">
+    <el-aside width="200px">
+      <el-menu
+        :default-active="$route.path"
+        class="el-menu-vertical"
+        background-color="#304156"
+        text-color="#bfcbd9"
+        active-text-color="#409EFF"
+        router
+      >
+        <template v-for="route in routes">
+          <el-submenu 
+            v-if="route.children && route.children.length > 0" 
+            :key="route.path + '-submenu'" 
+            :index="route.path"
+          >
+            <template slot="title">
+              <i :class="route.meta && route.meta.icon"></i>
+              <span>{{ route.meta && route.meta.title }}</span>
+            </template>
+            <el-menu-item 
+              v-for="child in route.children"
+              :key="child.path"
+              :index="route.path + '/' + child.path"
+            >
+              <i :class="child.meta && child.meta.icon"></i>
+              <span slot="title">{{ child.meta && child.meta.title }}</span>
+            </el-menu-item>
+          </el-submenu>
+          <el-menu-item 
+            v-else-if="!route.hidden"
+            :key="route.path + '-item'" 
+            :index="route.path"
+          >
+            <i :class="route.meta && route.meta.icon"></i>
+            <span slot="title">{{ route.meta && route.meta.title }}</span>
+          </el-menu-item>
+        </template>
+      </el-menu>
+    </el-aside>
+    <el-container>
+      <el-header>
+        <div class="header-right">
+          <el-dropdown>
+            <span class="el-dropdown-link">
+              管理员<i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>个人信息</el-dropdown-item>
+              <el-dropdown-item>退出登录</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+      </el-header>
+      <el-main>
+        <router-view />
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script>
+export default {
+  name: 'Layout',
+  computed: {
+    routes() {
+      return this.$router.options.routes.filter(route => {
+        return route.path !== '/' && !route.hidden
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-wrapper {
+  height: 100vh;
+}
+
+.el-aside {
+  background-color: #304156;
+}
+
+.el-menu {
+  border-right: none;
+}
+
+.el-header {
+  background-color: #fff;
+  color: #333;
+  line-height: 60px;
+  border-bottom: 1px solid #e6e6e6;
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 20px;
+}
+
+.header-right {
+  color: #333;
+}
+
+.el-dropdown-link {
+  cursor: pointer;
+  color: #409EFF;
+}
+
+.el-main {
+  background-color: #f0f2f5;
+  padding: 20px;
+}
+</style> 
\ No newline at end of file
diff --git a/pc/src/main.js b/pc/src/main.js
new file mode 100644
index 0000000..58a436d
--- /dev/null
+++ b/pc/src/main.js
@@ -0,0 +1,50 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import './assets/styles/index.scss'
+
+Vue.use(ElementUI)
+Vue.config.productionTip = false
+
+// 添加下载方法
+Vue.prototype.download = function(res, fileName) {
+  // 检查响应类型
+  if (res.type && (res.type === 'application/vnd.ms-excel' || 
+      res.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
+      res.type.includes('excel') || 
+      res.type === 'application/octet-stream')) {
+    // 如果已经是Blob类型且是Excel类型，直接使用
+    const blob = res
+    const link = document.createElement('a')
+    link.href = URL.createObjectURL(blob)
+    link.download = fileName
+    link.click()
+    URL.revokeObjectURL(link.href)
+  } else {
+    // 如果不是Blob类型或无法确定类型，根据文件扩展名处理
+    let blob
+    if (fileName.endsWith('.xlsx') || fileName.endsWith('.xls')) {
+      // Excel文件需要使用二进制格式
+      blob = new Blob([res], { 
+        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
+      })
+    } else {
+      // 其他类型使用默认处理
+      blob = new Blob([res])
+    }
+    const link = document.createElement('a')
+    link.href = URL.createObjectURL(blob)
+    link.download = fileName
+    link.click()
+    URL.revokeObjectURL(link.href)
+  }
+}
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app') 
\ No newline at end of file
diff --git a/pc/src/router/index.js b/pc/src/router/index.js
new file mode 100644
index 0000000..58d4b6c
--- /dev/null
+++ b/pc/src/router/index.js
@@ -0,0 +1,75 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Layout from '@/layout/index'
+import systemRoutes from './modules/system'
+import projectRoutes from './modules/project'
+import financeRoutes from './modules/finance'
+import merchantRoutes from './modules/merchant'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    component: () => import('@/layout/index'),
+    redirect: '/home',
+    hidden: true
+  },
+  {
+    path: '/home',
+    component: () => import('@/layout/index'),
+    children: [
+      {
+        path: '',
+        name: 'Home',
+        component: () => import('../views/Home.vue'),
+        meta: { title: '首页', icon: 'el-icon-s-home' }
+      }
+    ],
+    meta: { title: '首页', icon: 'el-icon-s-home' }
+  },
+  systemRoutes,
+  projectRoutes,
+  financeRoutes,
+  merchantRoutes,
+  {
+    path: '/asset',
+    component: Layout,
+    name: 'Asset',
+    meta: { title: '资产管理', icon: 'el-icon-s-management' },
+    children: [
+      {
+        path: 'location',
+        component: () => import('@/views/asset/location/index'),
+        name: 'AssetLocation',
+        meta: { title: '资产位置设置', icon: 'el-icon-location' }
+      },
+      {
+        path: 'classification',
+        component: () => import('@/views/asset/classification/index'),
+        name: 'AssetClassification',
+        meta: { title: '资产分类设置', icon: 'el-icon-folder' }
+      },
+      {
+        path: 'inventory',
+        component: () => import('@/views/asset/inventory/index'),
+        name: 'AssetInventory',
+        meta: { title: '资产清单管理', icon: 'el-icon-files' }
+      },
+      {
+        path: 'labelPage',
+        component: () => import('@/views/asset/labelPage/index'),
+        name: 'AssetLabel',
+        meta: { title: '资产标签设置', icon: 'el-icon-printer' }
+      }
+    ]
+  }
+]
+
+const router = new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes
+})
+
+export default router 
\ No newline at end of file
diff --git a/pc/src/router/modules/finance.js b/pc/src/router/modules/finance.js
new file mode 100644
index 0000000..fc11235
--- /dev/null
+++ b/pc/src/router/modules/finance.js
@@ -0,0 +1,54 @@
+import Layout from '@/layout/index'
+
+export default {
+  path: '/finance',
+  component: Layout,
+  name: 'Finance',
+  meta: { title: '业务财务', icon: 'el-icon-money' },
+  redirect: '/finance/feeType',
+  children: [
+    {
+      path: 'feeType',
+      component: () => import('@/views/finance/feeType/index.vue'),
+      name: 'FeeType',
+      meta: { title: '费用类型', icon: 'el-icon-tickets' }
+    },
+    {
+      path: 'receiptSetting',
+      component: () => import('@/views/finance/receiptSetting/index.vue'),
+      name: 'ReceiptSetting',
+      meta: { title: '收据设置', icon: 'el-icon-document' }
+    },
+    {
+      path: 'chargeStandard',
+      component: () => import('@/views/finance/chargeStandard/index.vue'),
+      name: 'ChargeStandard',
+      meta: { title: '收费标准', icon: 'el-icon-price-tag' }
+    },
+    {
+      path: 'billList',
+      component: () => import('@/views/finance/billList/index.vue'),
+      name: 'BillList',
+      meta: { title: '所有账单', icon: 'el-icon-notebook-2' }
+    },
+    {
+      path: 'transaction',
+      component: () => import('@/views/finance/transaction/index.vue'),
+      name: 'Transaction',
+      meta: { title: '收支流水', icon: 'el-icon-money' }
+    },
+    {
+      path: 'receiptRecord',
+      component: () => import('@/views/finance/receiptRecord/index.vue'),
+      name: 'ReceiptRecord',
+      meta: { title: '收据记录', icon: 'el-icon-document-copy' }
+    },
+    {
+      path: 'receipt/issue/:billId',
+      component: () => import('@/views/finance/receipt/issue.vue'),
+      name: 'IssueReceipt',
+      meta: { title: '开具收据', activeMenu: '/finance/billList' },
+      hidden: true
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/pc/src/router/modules/merchant.js b/pc/src/router/modules/merchant.js
new file mode 100644
index 0000000..c049cae
--- /dev/null
+++ b/pc/src/router/modules/merchant.js
@@ -0,0 +1,33 @@
+export default {
+  path: '/merchant',
+  component: () => import('@/layout/index'),
+  redirect: '/merchant/merchant-personnel',
+  name: 'Merchant',
+  meta: { title: '招商管理', icon: 'el-icon-user-solid' },
+  children: [
+    {
+      path: 'merchant-personnel',
+      component: () => import('@/views/merchant/merchant-personnel/index.vue'),
+      name: 'MerchantPersonnel',
+      meta: { title: '招商人员', icon: 'el-icon-user' }
+    },
+    {
+      path: 'tag-management',
+      component: () => import('@/views/merchant/tag-management/index.vue'),
+      name: 'TagManagement',
+      meta: { title: '标签管理', icon: 'el-icon-collection-tag' }
+    },
+    {
+      path: 'clue-management',
+      component: () => import('@/views/merchant/clue-management/index.vue'),
+      name: 'ClueManagement',
+      meta: { title: '线索管理', icon: 'el-icon-chat-line-square' }
+    },
+    {
+      path: 'intent-customer',
+      component: () => import('@/views/merchant/intent-customer/index.vue'),
+      name: 'IntentCustomer',
+      meta: { title: '意向客户', icon: 'el-icon-s-custom' }
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/pc/src/router/modules/project.js b/pc/src/router/modules/project.js
new file mode 100644
index 0000000..ef3de56
--- /dev/null
+++ b/pc/src/router/modules/project.js
@@ -0,0 +1,27 @@
+export default {
+  path: '/project',
+  component: () => import('@/layout/index'),
+  redirect: '/project/list',
+  name: 'Project',
+  meta: { title: '项目管理', icon: 'el-icon-office-building' },
+  children: [
+    {
+      path: 'list',
+      name: 'ProjectList',
+      component: () => import('@/views/project/index'),
+      meta: { title: '项目列表' }
+    },
+    {
+      path: 'building',
+      name: 'BuildingList',
+      component: () => import('@/views/project/building/index'),
+      meta: { title: '楼宇列表' }
+    },
+    {
+      path: 'room',
+      name: 'RoomList',
+      component: () => import('@/views/project/room/index'),
+      meta: { title: '房源列表' }
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/pc/src/router/modules/system.js b/pc/src/router/modules/system.js
new file mode 100644
index 0000000..d610e93
--- /dev/null
+++ b/pc/src/router/modules/system.js
@@ -0,0 +1,15 @@
+export default {
+  path: '/system',
+  component: () => import('@/layout/index'),
+  redirect: '/system/department-member',
+  name: 'System',
+  meta: { title: '系统管理', icon: 'el-icon-s-tools' },
+  children: [
+    {
+      path: 'department-member',
+      component: () => import('@/views/system/department-member/index'),
+      name: 'DepartmentMember',
+      meta: { title: '部门成员管理', icon: 'el-icon-office-building' }
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/pc/src/store/index.js b/pc/src/store/index.js
new file mode 100644
index 0000000..3a7f2d7
--- /dev/null
+++ b/pc/src/store/index.js
@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+}) 
\ No newline at end of file
diff --git a/pc/src/utils/auth.js b/pc/src/utils/auth.js
new file mode 100644
index 0000000..92f056a
--- /dev/null
+++ b/pc/src/utils/auth.js
@@ -0,0 +1,56 @@
+/**
+ * 用户鉴权相关工具方法
+ */
+
+/**
+ * 获取当前登录用户ID
+ * @returns {string} 用户ID
+ */
+export function getUserId() {
+  // 从本地存储中获取用户信息
+  const userInfo = localStorage.getItem('userInfo')
+  if (userInfo) {
+    try {
+      const user = JSON.parse(userInfo)
+      return user.id || user.userId || ''
+    } catch (e) {
+      console.error('解析用户信息失败', e)
+      return ''
+    }
+  }
+  return ''
+}
+
+/**
+ * 获取用户信息
+ * @returns {Object} 用户信息对象
+ */
+export function getUserInfo() {
+  const userInfo = localStorage.getItem('userInfo')
+  if (userInfo) {
+    try {
+      return JSON.parse(userInfo)
+    } catch (e) {
+      console.error('解析用户信息失败', e)
+      return {}
+    }
+  }
+  return {}
+}
+
+/**
+ * 保存用户信息到本地存储
+ * @param {Object} userInfo 用户信息对象
+ */
+export function setUserInfo(userInfo) {
+  if (userInfo) {
+    localStorage.setItem('userInfo', JSON.stringify(userInfo))
+  }
+}
+
+/**
+ * 清除用户信息
+ */
+export function clearUserInfo() {
+  localStorage.removeItem('userInfo')
+} 
\ No newline at end of file
diff --git a/pc/src/utils/constants.js b/pc/src/utils/constants.js
new file mode 100644
index 0000000..1a20e8c
--- /dev/null
+++ b/pc/src/utils/constants.js
@@ -0,0 +1,5 @@
+// API响应状态码
+export const API_SUCCESS_CODE = '0000000000000000'
+
+
+// 其他常量可以在此添加
diff --git a/pc/src/utils/request.js b/pc/src/utils/request.js
new file mode 100644
index 0000000..1efad82
--- /dev/null
+++ b/pc/src/utils/request.js
@@ -0,0 +1,57 @@
+import axios from 'axios'
+import { Message } from 'element-ui'
+import { API_SUCCESS_CODE } from './constants'
+
+// 创建axios实例
+const service = axios.create({
+  baseURL: '/', // 修改为相对路径，使用代理
+  // baseURL: process.env.VUE_APP_BASE_API, // 使用环境变量中的接口地址
+
+  timeout: 10000 // 请求超时时间
+})
+
+// 请求拦截器
+service.interceptors.request.use(
+  config => {
+    // 可以在这里添加请求头等信息
+    return config
+  },
+  error => {
+    console.log(error)
+    return Promise.reject(error)
+  }
+)
+
+// 响应拦截器
+service.interceptors.response.use(
+  response => {
+    // 如果是blob类型（文件下载），直接返回blob数据
+    if (response.config.responseType === 'blob') {
+      return response.data
+    }
+    
+    const res = response.data
+    // 如果返回的状态码不是成功码，则判断为错误
+    if (res.code !== API_SUCCESS_CODE) {
+      Message({
+        message: res.msg || res.message || '系统错误',
+        type: 'error',
+        duration: 5 * 1000
+      })
+      return Promise.reject(new Error(res.msg || res.message || '系统错误'))
+    } else {
+      return res
+    }
+  },
+  error => {
+    console.log('err' + error)
+    Message({
+      message: error.message,
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+
+export default service 
\ No newline at end of file
diff --git a/pc/src/views/Home.vue b/pc/src/views/Home.vue
new file mode 100644
index 0000000..d53bc9c
--- /dev/null
+++ b/pc/src/views/Home.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="home">
+    <el-row :gutter="20">
+      <el-col :span="6">
+        <el-card shadow="hover">
+          <div class="card-header">
+            <i class="el-icon-user"></i>
+            <span>总成员数</span>
+          </div>
+          <div class="card-body">
+            <span class="number">100</span>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover">
+          <div class="card-header">
+            <i class="el-icon-office-building"></i>
+            <span>部门数量</span>
+          </div>
+          <div class="card-body">
+            <span class="number">10</span>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover">
+          <div class="card-header">
+            <i class="el-icon-user-solid"></i>
+            <span>在职人数</span>
+          </div>
+          <div class="card-body">
+            <span class="number">95</span>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover">
+          <div class="card-header">
+            <i class="el-icon-user"></i>
+            <span>离职人数</span>
+          </div>
+          <div class="card-body">
+            <span class="number">5</span>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Home'
+}
+</script>
+
+<style scoped>
+.home {
+  padding: 20px;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.card-header i {
+  font-size: 20px;
+  margin-right: 10px;
+  color: #409EFF;
+}
+
+.card-body {
+  text-align: center;
+}
+
+.number {
+  font-size: 24px;
+  font-weight: bold;
+  color: #303133;
+}
+</style> 
\ No newline at end of file
diff --git a/pc/src/views/asset/classification/index.vue b/pc/src/views/asset/classification/index.vue
new file mode 100644
index 0000000..aea1b3e
--- /dev/null
+++ b/pc/src/views/asset/classification/index.vue
@@ -0,0 +1,772 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <!-- 左侧树形结构 -->
+      <el-col :span="6">
+        <div class="tree-container">
+          <div class="tree-header">
+            <span class="tree-title">资产分类</span>
+          </div>
+          <el-divider class="tree-divider"></el-divider>
+          <el-tree
+            ref="classTree"
+            :data="classTree"
+            :props="defaultProps"
+            node-key="id"
+            :expand-on-click-node="false"
+            highlight-current
+            @node-click="handleNodeClick"
+            :default-expanded-keys="defaultExpandedKeys">
+            <span class="custom-tree-node" slot-scope="{ node, data }">
+              <span>{{ node.label }}</span>
+              <span v-if="data.children && data.children.length > 0" class="node-count">
+                ({{ data.children.length }})
+              </span>
+            </span>
+          </el-tree>
+        </div>
+      </el-col>
+
+      <!-- 右侧列表 -->
+      <el-col :span="18">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>分类列表</span>
+            <el-button
+              style="float: right; margin-left: 10px;"
+              type="primary"
+              icon="el-icon-plus"
+              size="mini"
+              @click="handleAdd">新增分类</el-button>
+            <el-button
+              style="float: right;"
+              type="danger"
+              icon="el-icon-delete"
+              size="mini"
+              :disabled="multipleSelection.length === 0"
+              @click="handleBatchDelete">批量删除</el-button>
+          </div>
+          
+          <!-- 搜索表单 -->
+          <el-form :inline="true" :model="queryParams" class="demo-form-inline">
+            <el-form-item label="分类编码">
+              <el-input v-model="queryParams.classificationCode" placeholder="请输入分类编码" clearable size="small" />
+            </el-form-item>
+            <el-form-item label="分类名称">
+              <el-input v-model="queryParams.classificationName" placeholder="请输入分类名称" clearable size="small" />
+            </el-form-item>
+            <el-form-item label="状态">
+              <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
+                <el-option label="启用" value="1" />
+                <el-option label="禁用" value="0" />
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        
+          <el-table 
+            v-loading="loading" 
+            :data="classList" 
+            border 
+            stripe 
+            style="width: 100%" 
+            @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55" />
+            <el-table-column prop="classificationCode" label="分类编码" width="150" />
+            <el-table-column prop="classificationName" label="分类名称" width="200" />
+            <el-table-column label="上级分类" width="200">
+              <template slot-scope="scope">
+                <span>{{ getParentName(scope.row.parentId) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="status" label="状态" width="100">
+              <template slot-scope="scope">
+                <el-tag :type="scope.row.status === '1' ? 'success' : 'info'">
+                  {{ scope.row.status === '1' ? '启用' : '禁用' }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="remark" label="备注" />
+            <el-table-column label="操作" width="180" fixed="right">
+              <template slot-scope="scope">
+                <el-button size="mini" type="text" @click="handleEdit(scope.row)">修改</el-button>
+                <el-button 
+                  size="mini" 
+                  type="text" 
+                  @click="handleStatusChange(scope.row)">
+                  {{ scope.row.status === '1' ? '禁用' : '启用' }}
+                </el-button>
+                <el-button 
+                  size="mini" 
+                  type="text" 
+                  style="color: #F56C6C" 
+                  @click="handleDelete(scope.row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <!-- 分页 -->
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="queryParams.pageNum"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="queryParams.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+            class="pagination">
+          </el-pagination>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 新增/编辑对话框 -->
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="分类编码" prop="classificationCode">
+          <el-input v-model="form.classificationCode" placeholder="请输入分类编码" />
+        </el-form-item>
+        <el-form-item label="分类名称" prop="classificationName">
+          <el-input v-model="form.classificationName" placeholder="请输入分类名称" />
+        </el-form-item>
+        <el-form-item label="上级分类" prop="parentId">
+          <el-cascader
+            v-model="form.parentId"
+            :options="classTreeOptions"
+            :props="{ 
+              checkStrictly: true,
+              emitPath: false,
+              expandTrigger: 'hover',
+              value: 'id',
+              label: 'label'
+            }"
+            clearable
+            filterable
+            placeholder="请选择上级分类"
+            style="width: 100%">
+          </el-cascader>
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio label="1">启用</el-radio>
+            <el-radio label="0">禁用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listClassification, getClassification, addClassification, updateClassification, delClassification, enableClassification, disableClassification, getClassificationTree, checkClassificationInUse, getChildClassifications, delClassificationBatch } from '@/api/asset/classification'
+import { API_SUCCESS_CODE } from '@/utils/constants'
+
+export default {
+  name: 'AssetClassification',
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      // 总条数
+      total: 0,
+      // 分类列表
+      classList: [],
+      // 分类树形数据
+      classTree: [],
+      // 处理后的树形选项数据（用于级联选择器）
+      classTreeOptions: [],
+      // 默认展开的节点
+      defaultExpandedKeys: [],
+      // 树形配置（用于树组件）
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      // 弹出层标题
+      dialogTitle: '',
+      // 是否显示弹出层
+      dialogVisible: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        classificationCode: undefined,
+        classificationName: undefined,
+        status: undefined,
+        parentId: undefined
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        classificationCode: [
+          { required: true, message: '请输入分类编码', trigger: 'blur' },
+          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
+        ],
+        classificationName: [
+          { required: true, message: '请输入分类名称', trigger: 'blur' },
+          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
+        ],
+        parentId: [
+          { required: false, message: '请选择上级分类', trigger: 'change' }
+        ],
+        remark: [
+          { max: 200, message: '长度不能超过200个字符', trigger: 'blur' }
+        ]
+      },
+      // 多选选中项
+      multipleSelection: []
+    }
+  },
+  created() {
+    this.getTree()
+    this.getList()
+  },
+  methods: {
+    /** 展开所有节点 */
+    expandAll() {
+      const allKeys = this.getExpandedKeys(this.classTree)
+      this.defaultExpandedKeys = allKeys
+      this.$refs.classTree.setCheckedKeys([]) // 清空选中状态
+      this.$nextTick(() => {
+        if (this.$refs.classTree) {
+          this.$refs.classTree.$forceUpdate()
+        }
+      })
+    },
+    
+    /** 收起所有节点 */
+    collapseAll() {
+      this.defaultExpandedKeys = []
+      this.$refs.classTree.setCheckedKeys([]) // 清空选中状态
+      this.$nextTick(() => {
+        if (this.$refs.classTree) {
+          this.$refs.classTree.$forceUpdate()
+        }
+      })
+    },
+    
+    /** 获取分类树形结构 */
+    getTree() {
+      this.loading = true
+      const params = {
+        status: undefined // 获取所有状态的分类，包括启用和禁用
+      }
+      getClassificationTree(params).then(res => {
+        if (res.code === API_SUCCESS_CODE) {
+          // 处理返回的树形数据，确保字段名称正确
+          this.classTree = this.processTreeData(res.data)
+          
+          // 准备级联选择器的数据源
+          this.classTreeOptions = this.prepareTreeSelectOptions(this.classTree)
+          
+          // 如果之前已经有展开的节点，保持这些节点展开
+          // 否则只展开第一级有子节点的节点
+          if (!this.defaultExpandedKeys || this.defaultExpandedKeys.length === 0) {
+            this.defaultExpandedKeys = this.getFirstLevelKeys(this.classTree)
+          }
+          
+          // 强制刷新树组件
+          this.$nextTick(() => {
+            if (this.$refs.classTree) {
+              this.$refs.classTree.$forceUpdate()
+            }
+          })
+        } else {
+          this.$message.error(res.msg || '获取分类树失败')
+        }
+        this.loading = false
+      }).catch(error => {
+        console.error('获取分类树失败', error)
+        this.$message.error('系统错误，获取分类树失败')
+        this.loading = false
+      })
+    },
+    
+    /** 获取第一级节点的key，仅展开有子节点的 */
+    getFirstLevelKeys(tree) {
+      if (!tree || !Array.isArray(tree)) return []
+      
+      return tree
+        .filter(node => node.children && node.children.length > 0)
+        .map(node => node.id)
+    },
+    
+    /** 获取所有节点key，用于全部展开 */
+    getExpandedKeys(tree, keys = []) {
+      for (const node of tree) {
+        if (node.children && node.children.length > 0) {
+          keys.push(node.id)
+          this.getExpandedKeys(node.children, keys)
+        }
+      }
+      return keys
+    },
+    
+    /** 处理树形数据，确保字段名称正确 */
+    processTreeData(data) {
+      if (!data || !Array.isArray(data)) return []
+      
+      const processNode = (node) => {
+        // 创建一个新对象，使用驼峰命名
+        const processedNode = {
+          id: node.id,
+          // 转换label，格式为"编码-名称"
+          label: `${node.code || ''}-${node.classificationName || node.label || ''}`,
+          // 驼峰命名
+          classificationName: node.classificationName || node.label || '',
+          classificationCode: node.code || '',
+          status: node.status || '1',
+          parentId: node.parentId || null,
+          children: []
+        }
+        
+        // 递归处理子节点
+        if (node.children && Array.isArray(node.children) && node.children.length > 0) {
+          processedNode.children = node.children.map(child => processNode(child))
+        }
+        
+        return processedNode
+      }
+      
+      return data.map(item => processNode(item))
+    },
+    
+    /** 准备级联选择器的数据源 */
+    prepareTreeSelectOptions(data) {
+      if (!data || !Array.isArray(data)) return []
+      
+      // 创建一个无上级选项
+      const options = [{
+        id: '',
+        label: '无上级分类',
+        children: []
+      }]
+      
+      // 添加所有分类节点
+      const cloneData = JSON.parse(JSON.stringify(data))
+      options.push(...cloneData)
+      
+      return options
+    },
+    
+    /** 查询分类列表 */
+    getList() {
+      this.loading = true
+      listClassification(this.queryParams).then(res => {
+        if (res.code === API_SUCCESS_CODE) {
+          // 转换API返回数据结构为驼峰命名
+          this.classList = this.convertSnakeToCamel(res.data.data)
+          this.total = res.data.total
+        } else {
+          this.$message.error(res.msg || '获取分类列表失败')
+        }
+        this.loading = false
+      }).catch(error => {
+        console.error('获取分类列表失败', error)
+        this.$message.error('系统错误，获取分类列表失败')
+        this.loading = false
+      })
+    },
+    
+    /** 转换下划线命名为驼峰命名 */
+    convertSnakeToCamel(list) {
+      if (!list || !Array.isArray(list)) return []
+      
+      return list.map(item => {
+        return {
+          id: item.id,
+          classificationCode: item.classification_code || item.classificationCode || '',
+          classificationName: item.classification_name || item.classificationName || '',
+          parentId: item.parent_id || item.parentId || null,
+          status: item.status || '1',
+          remark: item.remark || '',
+          createTime: item.create_time || item.createTime || '',
+          createUserId: item.create_user_id || item.createUserId || '',
+          lastModUserId: item.last_mod_user_id || item.lastModUserId || '',
+          lastModTime: item.last_mod_time || item.lastModTime || ''
+        }
+      })
+    },
+    
+    /** 将驼峰命名转换为下划线命名(API请求前的转换) */
+    convertCamelToSnake(data) {
+      const result = {}
+      
+      Object.keys(data).forEach(key => {
+        // 将驼峰转换为下划线
+        const newKey = key.replace(/([A-Z])/g, '_$1').toLowerCase()
+        result[newKey] = data[key]
+      })
+      
+      return result
+    },
+    
+    /** 节点单击事件 */
+    handleNodeClick(data) {
+      this.queryParams.parentId = data.id
+      // 使用新的获取子分类API
+      this.loading = true
+      getChildClassifications(data.id, {
+        pageNum: this.queryParams.pageNum,
+        pageSize: this.queryParams.pageSize
+      }).then(res => {
+        if (res.code === API_SUCCESS_CODE) {
+          this.classList = this.convertSnakeToCamel(res.data.data)
+          this.total = res.data.total
+        } else {
+          this.$message.error(res.msg || '获取子分类列表失败')
+        }
+        this.loading = false
+      }).catch(error => {
+        console.error('获取子分类列表失败', error)
+        this.$message.error('系统错误，获取子分类列表失败')
+        this.loading = false
+      })
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.queryParams.parentId = undefined
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        classificationCode: undefined,
+        classificationName: undefined,
+        status: undefined,
+        parentId: undefined
+      }
+      this.getList()
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.dialogTitle = '新增分类'
+      this.form = {
+        classificationCode: '',
+        classificationName: '',
+        parentId: this.queryParams.parentId || '', // 如果当前有选中节点，则默认为父节点
+        status: '1',
+        remark: ''
+      }
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        if (this.$refs.form) {
+          this.$refs.form.clearValidate()
+        }
+      })
+    },
+    /** 修改按钮操作 */
+    handleEdit(row) {
+      const id = row.id
+      getClassification(id).then(res => {
+        if (res.code === API_SUCCESS_CODE) {
+          // 将API响应数据映射到表单字段，使用驼峰命名
+          this.form = {
+            id: res.data.id,
+            classificationCode: res.data.classificationCode,
+            classificationName: res.data.classificationName,
+            parentId: res.data.parentId || '',
+            status: res.data.status,
+            remark: res.data.remark,
+            // 添加最后修改人
+            lastModUserId: this.$store.getters.userId || ''
+          }
+          
+          this.dialogTitle = '编辑分类'
+          this.dialogVisible = true
+          // 重置表单验证
+          this.$nextTick(() => {
+            if (this.$refs.form) {
+              this.$refs.form.clearValidate()
+            }
+          })
+        } else {
+          this.$message.error(res.msg || '获取分类详情失败')
+        }
+      }).catch(error => {
+        console.error('获取分类详情失败', error)
+        this.$message.error('系统错误，获取分类详情失败')
+      })
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          // A. 构建提交数据，映射表单字段到API字段
+          const submitData = {
+            id: this.form.id,
+            classificationCode: this.form.classificationCode,
+            classificationName: this.form.classificationName,
+            parentId: this.form.parentId,
+            status: this.form.status,
+            remark: this.form.remark
+          }
+          
+          // B. 添加创建/修改用户信息
+          if (this.form.id) {
+            submitData.lastModUserId = this.form.lastModUserId || this.$store.getters.userId || ''
+          } else {
+            submitData.createUserId = this.$store.getters.userId || ''
+          }
+          
+          const method = this.form.id ? updateClassification : addClassification
+          method(submitData).then(res => {
+            if (res.code === API_SUCCESS_CODE) {
+              this.$message.success('操作成功')
+              this.dialogVisible = false
+              
+              // 重新获取树形结构，确保更新多级分类
+              this.getTree()
+              
+              // 如果是新增子分类，更新当前列表
+              if (this.queryParams.parentId && !this.form.id) {
+                this.handleNodeClick({ id: this.queryParams.parentId })
+              } else {
+                this.getList()
+              }
+            } else {
+              this.$message.error(res.msg || '操作失败')
+            }
+          }).catch(error => {
+            console.error('提交表单失败', error)
+            this.$message.error('系统错误，提交失败')
+          })
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$confirm('是否确认删除该分类?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+      // 执行删除操作
+      delClassification(row.id).then(res => {
+        if (res.code === API_SUCCESS_CODE) {
+          this.$message.success('删除成功')
+          // 重新获取树形结构，确保更新多级分类
+          this.getTree()
+          this.getList()
+        } else {
+          this.$message.error(res.msg || '删除失败')
+        }
+      }).catch(error => {
+        console.error('删除操作失败', error)
+        this.$message.error('系统错误，删除失败')
+      })
+       
+      }).catch(() => {})
+    },
+    /** 状态修改按钮操作 */
+    handleStatusChange(row) {
+      const action = row.status === '1' ? '禁用' : '启用'
+      this.$confirm(`是否确认${action}该分类?`, '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 获取当前用户ID
+        const lastModUserId = this.$store.getters.userId || ''
+        const method = row.status === '1' ? disableClassification : enableClassification
+        method(row.id, lastModUserId).then(res => {
+          if (res.code === API_SUCCESS_CODE) {
+            this.$message.success(`${action}成功`)
+            // 状态变更后，可能会影响树的显示，所以也需要刷新树
+            this.getTree()
+            this.getList()
+          } else {
+            this.$message.error(res.msg || `${action}失败`)
+          }
+        }).catch(error => {
+          console.error(`${action}操作失败`, error)
+          this.$message.error(`系统错误，${action}失败`)
+        })
+      }).catch(() => {})
+    },
+    /** 分页大小改变 */
+    handleSizeChange(val) {
+      this.queryParams.pageSize = val
+      this.getList()
+    },
+    /** 分页页码改变 */
+    handleCurrentChange(val) {
+      this.queryParams.pageNum = val
+      this.getList()
+    },
+    /** 获取上级分类名称 */
+    getParentName(parentId) {
+      if (!parentId) return '无';
+      
+      // 先在树形数据中查找
+      const findParentInTree = (tree, id) => {
+        for (const node of tree) {
+          if (node.id === id) {
+            return node.classificationCode + '-' + node.classificationName;
+          }
+          if (node.children && node.children.length > 0) {
+            const found = findParentInTree(node.children, id);
+            if (found) return found;
+          }
+        }
+        return null;
+      };
+      
+      const parentName = findParentInTree(this.classTree, parentId);
+      if (parentName) return parentName;
+      
+      // 如果在树中没找到，可能在列表数据中
+      const parent = this.classList.find(item => item.id === parentId);
+      return parent ? (parent.classificationCode + '-' + parent.classificationName) : '未知';
+    },
+    /** 多选选中项改变 */
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    /** 批量删除按钮操作 */
+    handleBatchDelete() {
+      if (this.multipleSelection.length === 0) {
+        this.$message.warning('请至少选择一个分类')
+        return
+      }
+      
+      this.$confirm('是否确认删除选中的分类?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 获取选中的分类ID列表
+        const selectedIds = this.multipleSelection.map(item => item.id)
+        // 获取当前用户ID
+        const lastModUserId = this.$store.getters.userId || ''
+        
+        // 执行批量删除操作
+        this.loading = true
+        delClassificationBatch(selectedIds, lastModUserId).then(res => {
+          if (res.code === API_SUCCESS_CODE) {
+            this.$message.success('批量删除成功')
+            // 重新获取树形结构，确保更新多级分类
+            this.getTree()
+            this.getList()
+          } else {
+            this.$message.error(res.msg || '批量删除失败')
+          }
+          this.loading = false
+        }).catch(error => {
+          console.error('批量删除操作失败', error)
+          this.$message.error('系统错误，批量删除失败')
+          this.loading = false
+        })
+      }).catch(() => {})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  .tree-container {
+    background-color: #fff;
+    padding: 15px;
+    margin-bottom: 20px;
+    border-radius: 4px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+    height: calc(100vh - 140px);
+    overflow-y: auto;
+  }
+  
+  .tree-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 5px;
+  }
+  
+  .tree-title {
+    font-size: 15px;
+    font-weight: 500;
+    color: #303133;
+  }
+  
+  .tree-actions {
+    display: flex;
+    gap: 8px;
+  }
+  
+  .tree-divider {
+    margin: 5px 0 15px;
+  }
+
+  .box-card {
+    margin-bottom: 20px;
+  }
+
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+  }
+  
+  .node-count {
+    font-size: 12px;
+    color: #909399;
+    margin-left: 5px;
+  }
+
+  .pagination {
+    margin-top: 15px;
+    text-align: right;
+  }
+
+  /* 让所有输入框和下拉框保持一致宽度 */
+  .el-input, .el-select, .el-textarea {
+    width: 100%;
+  }
+
+  /* 确保所有表单元素的高度和边距一致 */
+  ::v-deep .el-form-item {
+    margin-bottom: 18px;
+
+    .el-form-item__content {
+      line-height: 36px;
+    }
+  }
+
+  /* 确保el-select和普通输入框宽度一致 */
+  ::v-deep .el-select, ::v-deep .el-tree-select {
+    width: 100%;
+  }
+
+  /* 树形选择器样式优化 */
+  ::v-deep .el-tree-select .el-select-dropdown__item {
+    height: auto;
+    padding: 0;
+  }
+  
+  /* 树节点样式优化 */
+  ::v-deep .el-tree-node__content {
+    height: 32px;
+  }
+  
+  ::v-deep .el-tree-node__expand-icon {
+    padding: 6px;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/pc/src/views/asset/inventory/components/AssetDetail.vue b/pc/src/views/asset/inventory/components/AssetDetail.vue
new file mode 100644
index 0000000..eaaa81a
--- /dev/null
+++ b/pc/src/views/asset/inventory/components/AssetDetail.vue
@@ -0,0 +1,273 @@
+<template>
+  <div class="asset-detail-container" v-loading="loading">
+    <el-tabs v-model="activeTab">
+      <el-tab-pane label="基础信息" name="basic">
+        <el-descriptions class="margin-top" title="资产基础信息" :column="3" border>
+          <el-descriptions-item label="资产编码">{{ assetDetail.assetCode || assetDetail.code }}</el-descriptions-item>
+          <el-descriptions-item label="资产分类">{{ getClassificationName(assetDetail.classificationId) }}</el-descriptions-item>
+          <el-descriptions-item label="资产名称">{{ assetDetail.assetName || assetDetail.name }}</el-descriptions-item>
+          <el-descriptions-item label="资产状态">
+            <el-tag :type="getStatusType(assetDetail.assetStatus || assetDetail.status)">{{ getStatusText(assetDetail.assetStatus || assetDetail.status) }}</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="品牌">{{ assetDetail.brand }}</el-descriptions-item>
+          <el-descriptions-item label="型号">{{ assetDetail.model }}</el-descriptions-item>
+          <el-descriptions-item label="设备序列号">{{ assetDetail.serialNumber }}</el-descriptions-item>
+          <el-descriptions-item label="管理员">{{ assetDetail.administratorName }}</el-descriptions-item>
+          <el-descriptions-item label="所属公司">{{ assetDetail.companyName }}</el-descriptions-item>
+          <el-descriptions-item label="所在位置">{{ getLocationName(assetDetail.locationId) }}</el-descriptions-item>
+          <el-descriptions-item label="购置方式">
+            {{ assetDetail.purchaseType === '1' ? '采购' : assetDetail.purchaseType === '2' ? '租赁' : '-' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="购置金额(含税)">{{ assetDetail.purchaseAmount }}</el-descriptions-item>
+          <el-descriptions-item label="购置时间">{{ assetDetail.purchaseDate || assetDetail.purchaseTime }}</el-descriptions-item>
+          <el-descriptions-item label="入库时间">{{ assetDetail.storageDate || assetDetail.storageTime }}</el-descriptions-item>
+          <el-descriptions-item label="预计使用期限(月)">{{ assetDetail.expectedUsePeriod || assetDetail.expectedDepreciationPeriod }}</el-descriptions-item>
+          <el-descriptions-item label="预计折旧期限(月)">{{ assetDetail.expectedDepreciationPeriod }}</el-descriptions-item>
+          <el-descriptions-item label="保养到期时间">{{ assetDetail.maintenanceDueDate || assetDetail.maintenanceTime }}</el-descriptions-item>
+          <el-descriptions-item label="保养说明" :span="3">{{ assetDetail.maintenanceDescription }}</el-descriptions-item>
+          <el-descriptions-item label="备注" :span="3">{{ assetDetail.remark }}</el-descriptions-item>
+        </el-descriptions>
+
+        <div class="image-section" v-if="assetDetail.imageUrl">
+          <div class="section-title">资产照片</div>
+          <div class="image-container">
+            <el-image 
+              :src="assetDetail.imageUrl" 
+              :preview-src-list="[assetDetail.imageUrl]"
+              fit="cover"
+              style="width: 300px; height: 200px; border-radius: 4px;">
+            </el-image>
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { getAsset } from '@/api/asset/inventory'
+import { getClassificationTree } from '@/api/asset/classification'
+import { getLocationTree } from '@/api/asset/location'
+import { API_SUCCESS_CODE } from '@/utils/constants'
+
+export default {
+  name: 'AssetDetail',
+  props: {
+    assetId: {
+      type: [String, Number],
+      required: true
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      activeTab: 'basic',
+      assetDetail: {},
+      // 资产分类选项
+      classificationOptions: [],
+      // 资产位置选项
+      locationOptions: []
+    }
+  },
+  watch: {
+    assetId: {
+      handler(val) {
+        if (val) {
+          this.getAssetDetail()
+        }
+      },
+      immediate: true
+    }
+  },
+  created() {
+    this.getClassificationOptions()
+    this.getLocationOptions()
+  },
+  methods: {
+    /** 获取资产详情 */
+    getAssetDetail() {
+      if (!this.assetId) return
+      
+      this.loading = true
+      getAsset(this.assetId).then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          this.assetDetail = response.data || {}
+          console.log('资产详情数据:', this.assetDetail)
+        } else {
+          this.$message.error(response.msg || '获取资产详情失败')
+        }
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    
+    /** 获取资产状态显示文本 */
+    getStatusText(status) {
+      const statusMap = {
+        '空闲': '空闲',
+        '在用': '在用',
+        '借用': '借用',
+        '派发中': '派发中',
+        '退库中': '退库中',
+        '借出中': '借出中',
+        '归还中': '归还中',
+        '维修中': '维修中'
+      }
+      return statusMap[status] || '未知'
+    },
+    
+    /** 获取资产状态显示类型 */
+    getStatusType(status) {
+      const typeMap = {
+        '空闲': 'success',
+        '在用': 'primary',
+        '借用': 'info',
+        '派发中': 'warning',
+        '退库中': 'warning',
+        '借出中': 'warning',
+        '归还中': 'warning',
+        '维修中': 'danger'
+      }
+      return typeMap[status] || 'info'
+    },
+
+    /** 获取资产分类树形选项 */
+    getClassificationOptions() {
+      getClassificationTree({ status: '1' }).then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          this.classificationOptions = this.processClassificationTree(response.data || [])
+        }
+      })
+    },
+    
+    /** 处理分类树形数据 */
+    processClassificationTree(data) {
+      if (!data || !Array.isArray(data)) return []
+      
+      const processNode = (node) => {
+        const processedNode = {
+          id: node.id,
+          name: `${node.classificationCode || node.code || ''}-${node.classificationName || node.label || ''}`,
+          children: []
+        }
+        
+        if (node.children && Array.isArray(node.children) && node.children.length > 0) {
+          processedNode.children = node.children.map(child => processNode(child))
+        }
+        
+        return processedNode
+      }
+      
+      return data.map(item => processNode(item))
+    },
+    
+    /** 获取位置树选项 */
+    getLocationOptions() {
+      getLocationTree().then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          this.locationOptions = this.processLocationTree(response.data || [])
+        }
+      })
+    },
+    
+    processLocationTree(data) {
+      if (!data || !Array.isArray(data)) return []
+      
+      const processNode = (node) => {
+        const processedNode = {
+          id: node.id,
+          name: `${node.code || ''}-${node.locationName || node.label || ''}`,
+          children: []
+        }
+        
+        if (node.children && Array.isArray(node.children) && node.children.length > 0) {
+          processedNode.children = node.children.map(child => processNode(child))
+        }
+        
+        return processedNode
+      }
+      
+      return data.map(item => processNode(item))
+    },
+
+    /** 获取分类名称 */
+    getClassificationName(classificationId) {
+      if (!classificationId) return '未知分类'
+      
+      // 如果已有名称，直接返回
+      if (this.assetDetail.classificationName) return this.assetDetail.classificationName
+      
+      // 递归查找分类
+      const findClassification = (items) => {
+        for (const item of items) {
+          if (item.id === classificationId) {
+            return item.name
+          }
+          if (item.children && item.children.length > 0) {
+            const found = findClassification(item.children)
+            if (found) return found
+          }
+        }
+        return null
+      }
+      
+      const name = findClassification(this.classificationOptions)
+      return name || '未知分类'
+    },
+
+    /** 获取位置名称 */
+    getLocationName(locationId) {
+      if (!locationId) return '未知位置'
+      
+      // 如果已有名称，直接返回
+      if (this.assetDetail.locationName) return this.assetDetail.locationName
+      
+      // 递归查找位置
+      const findLocation = (items) => {
+        for (const item of items) {
+          if (item.id === locationId) {
+            return item.name
+          }
+          if (item.children && item.children.length > 0) {
+            const found = findLocation(item.children)
+            if (found) return found
+          }
+        }
+        return null
+      }
+      
+      const name = findLocation(this.locationOptions)
+      return name || '未知位置'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.asset-detail-container {
+  padding: 10px;
+  
+  .margin-top {
+    margin-top: 15px;
+  }
+  
+  .section-title {
+    font-size: 16px;
+    font-weight: 500;
+    margin: 20px 0 15px;
+    padding-left: 10px;
+    border-left: 3px solid #409EFF;
+  }
+  
+  .image-section {
+    margin-top: 20px;
+  }
+  
+  .image-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 15px;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/pc/src/views/asset/inventory/components/AssetForm.vue b/pc/src/views/asset/inventory/components/AssetForm.vue
new file mode 100644
index 0000000..88e0912
--- /dev/null
+++ b/pc/src/views/asset/inventory/components/AssetForm.vue
@@ -0,0 +1,593 @@
+<template>
+  <div class="asset-form-container" v-loading="loading">
+    <el-form ref="form" :model="form" :rules="rules" label-width="130px" size="small">
+      <el-tabs v-model="activeTab">
+        <!-- 基础信息 Tab -->
+        <el-tab-pane label="基础信息" name="basic">
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item label="资产分类" prop="classificationId">
+                <el-cascader
+                  v-model="form.classificationId"
+                  :options="classificationOptions"
+                  :props="{ 
+                    checkStrictly: true, 
+                    emitPath: false, 
+                    expandTrigger: 'hover',
+                    value: 'id', 
+                    label: 'name',
+                    leaf: 'leaf'
+                  }"
+                  placeholder="请选择资产分类"
+                  clearable
+                  filterable
+                  style="width: 100%"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="管理员" prop="adminUserId">
+                <el-select
+                  v-model="form.adminUserId"
+                  placeholder="请选择管理员"
+                  filterable
+                  remote
+                  :remote-method="remoteSearchAdmin"
+                  :loading="adminLoading"
+                  style="width: 100%"
+                >
+                  <el-option
+                    v-for="item in adminOptions"
+                    :key="item.id"
+                    :label="item.memberName"
+                    :value="item.id"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="所属公司" prop="companyId">
+                <el-select v-model="form.companyId" placeholder="请选择所属公司" style="width: 100%">
+                  <el-option
+                    v-for="item in companyOptions"
+                    :key="item.id"
+                    :label="item.companyName"
+                    :value="item.id"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item label="所在位置" prop="locationId">
+                <el-cascader
+                  v-model="form.locationId"
+                  :options="locationOptions"
+                  :props="{ 
+                    checkStrictly: true, 
+                    emitPath: false, 
+                    expandTrigger: 'hover',
+                    value: 'id', 
+                    label: 'name',
+                    leaf: 'leaf'
+                  }"
+                  placeholder="请选择所在位置"
+                  clearable
+                  filterable
+                  style="width: 100%"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="购置方式" prop="purchaseType">
+                <el-select v-model="form.purchaseType" placeholder="请选择购置方式" style="width: 100%">
+                  <el-option label="采购" value="1" />
+                  <el-option label="租赁" value="2" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="资产名称" prop="assetName">
+                <el-input v-model="form.assetName" placeholder="请输入资产名称" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item label="资产编码" prop="assetCode">
+                <el-input v-model="form.assetCode" placeholder="请输入资产编码" :disabled="isEdit" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="品牌" prop="brand">
+                <el-input v-model="form.brand" placeholder="请输入品牌" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="型号" prop="model">
+                <el-input v-model="form.model" placeholder="请输入型号" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item label="设备序列号" prop="serialNumber">
+                <el-input v-model="form.serialNumber" placeholder="请输入设备序列号" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="购置金额" prop="purchaseAmount">
+                <el-input-number v-model="form.purchaseAmount" :precision="2" :step="0.1" :min="0" style="width: 100%" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="预计使用期限(月)" prop="expectedDepreciationPeriod">
+                <el-input-number v-model="form.expectedDepreciationPeriod" :min="0" :step="1" style="width: 100%" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item label="购置时间" prop="purchaseDate">
+                <el-date-picker
+                  v-model="form.purchaseDate"
+                  type="date"
+                  placeholder="请选择购置时间"
+                  style="width: 100%"
+                  value-format="yyyy-MM-dd"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="入库时间" prop="storageDate">
+                <el-date-picker
+                  v-model="form.storageDate"
+                  type="date"
+                  placeholder="请选择入库时间"
+                  style="width: 100%"
+                  value-format="yyyy-MM-dd"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="保养到期时间" prop="maintenanceDueDate">
+                <el-date-picker
+                  v-model="form.maintenanceDueDate"
+                  type="date"
+                  placeholder="请选择保养到期时间"
+                  style="width: 100%"
+                  value-format="yyyy-MM-dd"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item label="预计折旧期限(月)" prop="expectedDepreciationPeriod">
+                <el-input-number v-model="form.expectedDepreciationPeriod" :min="0" :step="1" style="width: 100%" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          
+          <el-form-item label="保养说明" prop="maintenanceDescription">
+            <el-input
+              v-model="form.maintenanceDescription"
+              type="textarea"
+              placeholder="请输入保养说明"
+              maxlength="200"
+              show-word-limit
+              :rows="3"
+            />
+          </el-form-item>
+          
+          <el-form-item label="备注" prop="remark">
+            <el-input
+              v-model="form.remark"
+              type="textarea"
+              placeholder="请输入备注"
+              maxlength="200"
+              show-word-limit
+              :rows="3"
+            />
+          </el-form-item>
+          
+          <el-form-item label="资产照片" prop="imageUrl">
+            <el-upload
+              class="asset-uploader"
+              :action="uploadImageUrl"
+              :show-file-list="false"
+              :on-success="handleImageSuccess"
+              :on-error="handleImageError"
+              :before-upload="beforeImageUpload"
+            >
+              <img v-if="form.imageUrl" :src="form.imageUrl" class="asset-image">
+              <i v-else class="el-icon-plus asset-uploader-icon"></i>
+              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过2MB</div>
+            </el-upload>
+          </el-form-item>
+        </el-tab-pane>
+      </el-tabs>
+      
+      <div class="form-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { getAsset, addAsset, updateAsset, listCompanies, listUsers, uploadAssetImage, checkAssetCode } from '@/api/asset/inventory'
+import { getClassificationTree } from '@/api/asset/classification'
+import { getLocationTree } from '@/api/asset/location'
+import { API_SUCCESS_CODE } from '@/utils/constants'
+export default {
+  name: 'AssetForm',
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false
+    },
+    assetId: {
+      type: [String, Number],
+      default: null
+    }
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      // 当前激活的选项卡
+      activeTab: 'basic',
+      // 管理员搜索加载中
+      adminLoading: false,
+      // 资产分类选项
+      classificationOptions: [],
+      // 资产位置选项
+      locationOptions: [],
+      // 公司选项
+      companyOptions: [],
+      // 管理员选项
+      adminOptions: [],
+      // 上传图片地址
+      uploadImageUrl: process.env.VUE_APP_BASE_API + '/common/upload',
+      // 表单对象
+      form: {
+        id: undefined,
+        classificationId: undefined,
+        adminUserId: undefined,
+        companyId: undefined,
+        locationId: undefined,
+        purchaseType: '1',
+        assetName: '',
+        assetCode: '',
+        brand: '',
+        model: '',
+        serialNumber: '',
+        purchaseAmount: undefined,
+        expectedDepreciationPeriod: undefined,
+        remark: '',
+        purchaseDate: '',
+        storageDate: '',
+        imageUrl: '',
+        maintenanceDueDate: '',
+        maintenanceDescription: '',
+        expectedDepreciationPeriod: undefined
+      },
+      // 表单校验规则
+      rules: {
+        classificationId: [
+          { required: true, message: '请选择资产分类', trigger: 'change' }
+        ],
+        adminUserId: [
+          { required: true, message: '请选择管理员', trigger: 'change' }
+        ],
+        companyId: [
+          { required: true, message: '请选择所属公司', trigger: 'change' }
+        ],
+        locationId: [
+          { required: true, message: '请选择所在位置', trigger: 'change' }
+        ],
+        purchaseType: [
+          { required: true, message: '请选择购置方式', trigger: 'change' }
+        ],
+        assetCode: [
+          { required: true, message: '请输入资产编码', trigger: 'blur' }
+        ],
+        brand: [
+          { required: true, message: '请输入品牌', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created() {
+    this.getClassificationOptions()
+    this.getLocationOptions()
+    this.getCompanyOptions()
+    this.remoteSearchAdmin('')
+    
+    // 添加模拟数据，确保表单可以完成
+    this.addMockData()
+    
+    if (this.isEdit && this.assetId) {
+      this.getAssetDetail()
+    }
+  },
+  methods: {
+    /** 添加模拟数据 */
+    addMockData() {
+      // 模拟管理员数据
+      if (this.adminOptions.length === 0) {
+        this.adminOptions = [
+          { id: '1', name: '张三' },
+          { id: '2', name: '李四' },
+          { id: '3', name: '王五' },
+          { id: '4', name: '赵六' },
+          { id: '5', name: '钱七' }
+        ]
+      }
+      
+      // 模拟公司数据
+      if (this.companyOptions.length === 0) {
+        this.companyOptions = [
+          { id: '1', name: '总公司' },
+          { id: '2', name: '北京分公司' },
+          { id: '3', name: '上海分公司' },
+          { id: '4', name: '广州分公司' },
+          { id: '5', name: '深圳分公司' }
+        ]
+      }
+    },
+    
+    /** 获取资产详情 */
+    getAssetDetail() {
+      this.loading = true
+      getAsset(this.assetId).then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          this.form = response.data || {}
+          
+          // 如果有管理员，添加到选项中
+          if (this.form.adminUserId && this.form.administratorName) {
+            this.adminOptions = [
+              { id: this.form.adminUserId, name: this.form.administratorName }
+            ]
+          }
+        } else {
+          this.$message.error(response.msg || '获取资产详情失败')
+        }
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    
+    /** 获取资产分类树形选项 */
+    getClassificationOptions() {
+      getClassificationTree({ status: '1' }).then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          this.classificationOptions = this.processClassificationTree(response.data || [])
+        }
+      })
+    },
+    
+    /** 处理分类树形数据 */
+    processClassificationTree(data) {
+      if (!data || !Array.isArray(data)) return []
+      
+      const processNode = (node) => {
+        const processedNode = {
+          id: node.id,
+          name: `${node.classificationCode || node.code || ''}-${node.classificationName || node.label || ''}`,
+          children: []
+        }
+        
+        if (node.children && Array.isArray(node.children) && node.children.length > 0) {
+          processedNode.children = node.children.map(child => processNode(child))
+          processedNode.leaf = false
+        } else {
+          processedNode.leaf = true
+        }
+        
+        return processedNode
+      }
+      
+      return data.map(item => processNode(item))
+    },
+    
+    /** 获取位置树选项 */
+    getLocationOptions() {
+      getLocationTree().then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          this.locationOptions = this.processLocationTree(response.data || [])
+        }
+      })
+    },
+    
+    processLocationTree(data) {
+      if (!data || !Array.isArray(data)) return []
+      
+      const processNode = (node) => {
+        const processedNode = {
+          id: node.id,
+          name: `${node.code || ''}-${node.locationName || node.label || ''}`,
+          children: []
+        }
+        
+        if (node.children && Array.isArray(node.children) && node.children.length > 0) {
+          processedNode.children = node.children.map(child => processNode(child))
+          processedNode.leaf = false
+        } else {
+          processedNode.leaf = true
+        }
+        
+        return processedNode
+      }
+      
+      return data.map(item => processNode(item))
+    },
+    
+    /** 获取公司选项 */
+    getCompanyOptions() {
+      listCompanies().then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          this.companyOptions = response.data || []
+        }
+      }).catch(() => {
+        // 如果API调用失败，使用模拟数据
+        this.addMockData()
+      })
+    },
+    
+    /** 远程搜索管理员 */
+    remoteSearchAdmin(query) {
+      this.adminLoading = true
+      listUsers().then(response => {
+        this.adminLoading = false
+        if (response.code === API_SUCCESS_CODE) {
+          this.adminOptions = response.data || []
+        }
+      }).catch(() => {
+        this.adminLoading = false
+        // 如果API调用失败，使用模拟数据
+        this.addMockData()
+      })
+    },
+    
+    /** 提交表单 */
+    submitForm() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.loading = true
+          
+          const formData = { ...this.form }
+          
+          // 检查资产编码是否已存在
+          if (!this.isEdit) {
+            checkAssetCode(this.form.code).then(response => {
+              if (response.code === API_SUCCESS_CODE) {
+                if (!response.data) {
+                  this.$message.error('资产编码已存在，请更换其他编码')
+                  this.loading = false
+                  return
+                }
+                this.saveAsset(formData)
+              } else {
+                this.$message.error(response.msg || '检查资产编码失败')
+                this.loading = false
+              }
+            }).catch(() => {
+              this.loading = false
+            })
+          } else {
+            this.saveAsset(formData)
+          }
+        }
+      })
+    },
+    
+    /** 保存资产信息 */
+    saveAsset(formData) {
+      const method = this.isEdit ? updateAsset : addAsset
+      method(formData).then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          this.$message.success(this.isEdit ? '修改成功' : '新增成功')
+          this.$emit('refresh')
+          this.$emit('close')
+        } else {
+          this.$message.error(response.msg || (this.isEdit ? '修改失败' : '新增失败'))
+        }
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    
+    /** 取消按钮 */
+    cancel() {
+      this.$emit('close')
+    },
+    
+    /** 图片上传前校验 */
+    beforeImageUpload(file) {
+      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
+      const isLt2M = file.size / 1024 / 1024 < 2
+
+      if (!isJPG) {
+        this.$message.error('上传图片只能是 JPG/PNG 格式!')
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 2MB!')
+      }
+      return isJPG && isLt2M
+    },
+    
+    /** 图片上传成功回调 */
+    handleImageSuccess(response) {
+      if (response.code === API_SUCCESS_CODE) {
+        this.form.imageUrl = response.data.url
+      } else {
+        this.$message.error(response.msg || '上传图片失败')
+      }
+    },
+    
+    /** 图片上传失败回调 */
+    handleImageError() {
+      this.$message.error('上传图片失败')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.asset-form-container {
+  padding: 10px;
+  
+  .form-footer {
+    text-align: center;
+    margin-top: 20px;
+  }
+  
+  .asset-uploader {
+    ::v-deep .el-upload {
+      border: 1px dashed #d9d9d9;
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+      
+      &:hover {
+        border-color: #409EFF;
+      }
+    }
+  }
+  
+  .asset-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 150px;
+    height: 150px;
+    line-height: 150px;
+    text-align: center;
+  }
+  
+  .asset-image {
+    width: 150px;
+    height: 150px;
+    display: block;
+  }
+  
+  ::v-deep .el-input-number {
+    width: 100%;
+  }
+  
+  ::v-deep .el-input-number .el-input__inner {
+    text-align: left;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/pc/src/views/asset/inventory/components/AssetLabelPrint.vue b/pc/src/views/asset/inventory/components/AssetLabelPrint.vue
new file mode 100644
index 0000000..bf0c003
--- /dev/null
+++ b/pc/src/views/asset/inventory/components/AssetLabelPrint.vue
@@ -0,0 +1,528 @@
+<template>
+  <div class="asset-print-container" v-loading="loading">
+    <div ref="printSection" class="print-page">
+      <div class="print-content">
+        <div class="print-header">{{ currentDate }} {{ title }}</div>
+        <div class="label-grid">
+          <div v-for="(asset, index) in selectedAssets" :key="index" class="label-item">
+            <div class="label-content">
+              <div class="qrcode-section">
+                <div class="asset-icon">
+                  <!-- <i class="el-icon-s-goods"></i> 资产 -->
+                </div>
+                <div class="qrcode">
+                  <qrcode-vue :value="asset.id || asset.assetId" :size="80" level="H"></qrcode-vue>
+                </div>
+                <!-- <div class="asset-code">资产编码: {{ asset.assetCode || asset.code }}</div> -->
+              </div>
+              
+              <div class="info-section">
+                <div v-for="(field, fieldIndex) in displayFields" :key="fieldIndex" class="info-item">
+                  <span v-if="asset[field.key]">{{ field.label }}: {{ asset[field.key] }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="print-actions">
+      <el-button type="primary" icon="el-icon-printer" @click="handlePrint">打印</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getLabelConfig } from '@/api/asset/inventory'
+import QrcodeVue from 'qrcode.vue'
+import QRCode from 'qrcode'  // 导入 qrcode 包
+import { API_SUCCESS_CODE } from '@/utils/constants'
+
+export default {
+  name: 'AssetLabelPrint',
+  components: {
+    QrcodeVue
+  },
+  props: {
+    ids: {
+      type: Array,
+      required: true
+    },
+    selectedAssets: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      title: '资产标签',
+      currentDate: '',
+      labelConfig: null,
+      displayFields: [
+        { key: 'assetName', label: '资产名称' },
+        { key: 'classificationName', label: '资产分类' },
+        { key: 'locationName', label: '所在位置' },
+        { key: 'brand', label: '品牌' },
+        { key: 'model', label: '型号' },
+        { key: 'serialNumber', label: '设备序列号' },
+        { key: 'administratorName', label: '管理员' }
+      ]
+    }
+  },
+  created() {
+    // 设置当前日期
+    this.setCurrentDate()
+    
+    // 打印完整的资产对象，便于调试
+    console.log('Selected assets:', JSON.stringify(this.selectedAssets))
+    
+    // 获取标签配置
+    this.getLabelConfig()
+  },
+  methods: {
+    /** 设置当前日期 */
+    setCurrentDate() {
+      const now = new Date()
+      this.currentDate = now.getFullYear() + '/' + 
+        String(now.getMonth() + 1).padStart(2, '0') + '/' + 
+        String(now.getDate()).padStart(2, '0')
+    },
+    
+    /** 获取标签配置 */
+    getLabelConfig() {
+      this.loading = true
+      getLabelConfig().then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          this.labelConfig = response.data
+          
+          // 如果API返回了需要显示的字段，则使用API返回的字段
+          if (this.labelConfig && this.labelConfig.labelItems) {
+            // 解析labelItems字段
+            // 如果是字符串（逗号分隔的ID列表），则转换为ID数组
+            let labelItemArray = []
+            if (typeof this.labelConfig.labelItems === 'string') {
+              const itemIds = this.labelConfig.labelItems.split(',').filter(item => item.trim() !== '')
+              labelItemArray = itemIds.map(id => ({ id: parseInt(id.trim()) }))
+            } else if (Array.isArray(this.labelConfig.labelItems)) {
+              labelItemArray = this.labelConfig.labelItems
+            }
+            
+            // 如果有标签项，则映射到对应的字段
+            if (labelItemArray.length > 0) {
+              this.displayFields = this.mapLabelItemsToFields(labelItemArray)
+            }
+          }
+        }
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    
+    /** 将标签项映射到对应的字段 */
+    mapLabelItemsToFields(labelItems) {
+      // 定义字段ID与资产数据属性的映射关系
+      const fieldMappings = {
+        1: { key: 'assetName', label: '资产名称', possibleKeys: ['assetName', 'name'] },
+        2: { key: 'classificationName', label: '资产分类', possibleKeys: ['classificationName', 'className'] },
+        3: { key: 'assetCode', label: '资产编码', possibleKeys: ['assetCode', 'code'] },
+        4: { key: 'locationName', label: '资产位置', possibleKeys: ['locationName', 'location'] },
+        5: { key: 'brand', label: '品牌', possibleKeys: ['brand'] },
+        6: { key: 'model', label: '型号', possibleKeys: ['model'] },
+        7: { key: 'serialNumber', label: '设备序列号', possibleKeys: ['serialNumber', 'sn'] },
+        8: { key: 'administratorName', label: '管理员', possibleKeys: ['administratorName', 'admin', 'adminName'] },
+        9: { key: 'maintenanceDueDate', label: '保养到期时间', possibleKeys: ['maintenanceDueDate', 'maintenanceTime', 'maintDueDate', 'maintainEndDate'] },
+        10: { key: 'maintenanceDescription', label: '保养说明', possibleKeys: ['maintenanceDescription', 'maintInstructions', 'maintenanceDesc', 'maintDesc', 'maintenanceInfo'] },
+        11: { key: 'departmentName', label: '使用部门', possibleKeys: ['departmentName', 'deptName', 'department'] }
+      }
+      
+      // 打印调试信息
+      console.log('labelItems:', labelItems)
+      
+      // 根据labelItems筛选出需要显示的字段
+      return labelItems.map(item => {
+        // 支持多种可能的ID属性名
+        const id = item.id || item.fieldId
+        const mapping = fieldMappings[id]
+        
+        console.log('Processing item:', item, 'mapping:', mapping)
+        
+        if (mapping) {
+          return { 
+            key: mapping.key, 
+            label: item.name || item.fieldName || mapping.label,
+            possibleKeys: mapping.possibleKeys
+          }
+        }
+        return null
+      }).filter(item => item !== null)
+    },
+    
+    /** 获取打印内容 */
+    getPrintContent() {
+      this.handlePrint()
+      return true
+    },
+    
+    /** 执行打印 */
+    handlePrint() {
+      // 创建打印窗口并生成内容
+      const printWindow = window.open('', '_blank')
+      
+      if (!printWindow) {
+        this.$message.error('打印窗口被浏览器阻止，请允许弹出窗口')
+        return
+      }
+      
+      // 获取资产列表
+      const assetsToUse = this.selectedAssets
+      
+      // 创建样式内容
+      const styleContent = `
+        body {
+          font-family: Arial, sans-serif;
+          margin: 0;
+          padding: 20px;
+        }
+        .print-header {
+          text-align: right;
+          font-size: 14px;
+          color: #666;
+          margin-bottom: 20px;
+        }
+        .label-grid {
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          gap: 20px;
+        }
+        .label-item {
+          border: 1px solid #ddd;
+          border-radius: 5px;
+          padding: 10px;
+          background-color: #fff;
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+          page-break-inside: avoid;
+          margin-bottom: 20px;
+        }
+        .label-content {
+          display: flex;
+          gap: 10px;
+        }
+        .qrcode-section {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          width: 120px;
+          border-right: 1px dashed #ddd;
+          padding-right: 10px;
+        }
+        .asset-icon {
+          font-size: 14px;
+          color: #666;
+          margin-bottom: 5px;
+        }
+        .qrcode img {
+          width: 80px;
+          height: 80px;
+        }
+        .asset-code {
+          font-size: 12px;
+          text-align: center;
+          word-break: break-all;
+          color: #666;
+        }
+        .info-section {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        }
+        .info-item {
+          font-size: 12px;
+          margin-bottom: 5px;
+          color: #333;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        @media print {
+          body {
+            padding: 0;
+            margin: 0;
+          }
+          @page {
+            size: A4;
+            margin: 1cm;
+          }
+        }
+      `
+      
+      // 预先生成所有的二维码数据URL
+      const qrPromises = assetsToUse.map(asset => {
+        const assetId = asset.id || asset.assetId
+        return QRCode.toDataURL(assetId.toString(), {
+          errorCorrectionLevel: 'H',
+          margin: 1,
+          width: 80,
+          color: {
+            dark: '#000',
+            light: '#fff'
+          }
+        }).then(url => {
+          return { id: assetId, dataUrl: url }
+        }).catch(err => {
+          console.error('二维码生成错误:', err)
+          return { id: assetId, dataUrl: null }
+        })
+      })
+      
+      // 等待所有二维码生成完成
+      Promise.all(qrPromises).then(qrCodes => {
+        // 将二维码转换为键值对对象以便快速查找
+        const qrCodeMap = {}
+        qrCodes.forEach(qr => {
+          qrCodeMap[qr.id] = qr.dataUrl
+        })
+        
+        // 生成HTML内容
+        printWindow.document.write('<html><head><title>资产标签打印</title>')
+        printWindow.document.write('<style>' + styleContent + '</style>')
+        printWindow.document.write('</head><body>')
+        
+        // 添加标题
+        printWindow.document.write('<div class="print-header">' + this.currentDate + ' ' + this.title + '</div>')
+        printWindow.document.write('<div class="label-grid">')
+        
+        // 添加每个资产的标签
+        assetsToUse.forEach(asset => {
+          const assetId = asset.id || asset.assetId
+          const qrDataUrl = qrCodeMap[assetId]
+          
+          printWindow.document.write('<div class="label-item">')
+          printWindow.document.write('<div class="label-content">')
+          printWindow.document.write('<div class="qrcode-section">')
+          // printWindow.document.write('<div class="asset-icon">资产</div>')
+          
+          if (qrDataUrl) {
+            // 使用预生成的二维码图像
+            printWindow.document.write('<div class="qrcode"><img src="' + qrDataUrl + '" alt="资产二维码" width="80" height="80"/></div>')
+          } else {
+            // 如果生成失败，显示后备内容
+            printWindow.document.write('<div class="qrcode"><div style="width:80px;height:80px;display:flex;align-items:center;justify-content:center;border:1px solid #ddd;font-size:12px;text-align:center;">ID: ' + assetId + '</div></div>')
+          }
+          
+          // printWindow.document.write('<div class="asset-code">资产编码: ' + (asset.assetCode || asset.code) + '</div>')
+          printWindow.document.write('</div>')
+          
+          printWindow.document.write('<div class="info-section">')
+          
+          // 添加显示字段
+          this.displayFields.forEach(field => {
+            // 添加调试输出
+            console.log('Checking field:', field.key, 'in asset:', asset)
+            
+            // 尝试从资产对象中获取字段值
+            let value = asset[field.key];
+            
+            // 如果没有找到值，尝试使用可能的键名列表
+            if (!value && field.possibleKeys) {
+              for (const possibleKey of field.possibleKeys) {
+                if (asset[possibleKey] !== undefined && asset[possibleKey] !== null) {
+                  value = asset[possibleKey];
+                  console.log('Found value with alternative key:', possibleKey, value);
+                  break;
+                }
+              }
+            }
+            
+            console.log('Final value:', value);
+            
+            // 即使数据为空也显示字段名称
+            printWindow.document.write('<div class="info-item">')
+            printWindow.document.write('<span>' + field.label + ': ' + (value || '-') + '</span>')
+            printWindow.document.write('</div>')
+          })
+          
+          printWindow.document.write('</div>')
+          printWindow.document.write('</div>')
+          printWindow.document.write('</div>')
+        })
+        
+        printWindow.document.write('</div>')
+        
+        // 添加打印的脚本
+        printWindow.document.write('<script>')
+        
+        // 当页面完全加载后执行
+        printWindow.document.write('window.onload = function() {')
+        
+        // 添加自动打印代码并在打印完成后关闭窗口
+        printWindow.document.write(`
+          // 给页面一点时间渲染
+          setTimeout(function() {
+            // 监听打印事件
+            var mediaQueryList = window.matchMedia('print');
+            
+            // 打印前事件
+            mediaQueryList.addListener(function(mql) {
+              if (!mql.matches) {
+                // 打印对话框关闭后执行
+                setTimeout(function() {
+                  window.close();
+                }, 100);
+              }
+            });
+            
+            // 执行打印
+            window.print();
+            
+            // 添加取消按钮
+            var cancelBtn = document.createElement('button');
+            cancelBtn.innerText = '关闭窗口';
+            cancelBtn.style.display = 'block';
+            cancelBtn.style.margin = '20px auto';
+            cancelBtn.style.padding = '10px 20px';
+            cancelBtn.style.backgroundColor = '#409EFF';
+            cancelBtn.style.color = 'white';
+            cancelBtn.style.border = 'none';
+            cancelBtn.style.borderRadius = '4px';
+            cancelBtn.style.cursor = 'pointer';
+            cancelBtn.onclick = function() {
+              window.close();
+            };
+            document.body.appendChild(cancelBtn);
+          }, 500);
+        `)
+        
+        printWindow.document.write('}')
+        printWindow.document.write('<\/script>')
+        printWindow.document.write('</body></html>')
+        
+        printWindow.document.close()
+      }).catch(err => {
+        console.error('生成二维码时出错:', err)
+        printWindow.close()
+        this.$message.error('生成二维码时出错，请重试')
+      })
+    },
+    
+    /** 取消按钮 */
+    cancel() {
+      this.$emit('close')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.asset-print-container {
+  padding: 10px;
+}
+
+.print-page {
+  background-color: #fff;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.print-header {
+  text-align: right;
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 20px;
+}
+
+.label-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+}
+
+.label-item {
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  padding: 10px;
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  page-break-inside: avoid;
+}
+
+.label-content {
+  display: flex;
+  gap: 10px;
+}
+
+.qrcode-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 120px;
+  border-right: 1px dashed #ddd;
+  padding-right: 10px;
+}
+
+.asset-icon {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 5px;
+  i {
+    font-size: 16px;
+    color: #409EFF;
+  }
+}
+
+.qrcode {
+  margin: 5px 0;
+}
+
+.asset-code {
+  font-size: 12px;
+  text-align: center;
+  word-break: break-all;
+  color: #666;
+}
+
+.info-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.info-item {
+  font-size: 12px;
+  margin-bottom: 5px;
+  color: #333;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.print-actions {
+  text-align: center;
+  margin-top: 20px;
+}
+
+@media print {
+  .print-actions {
+    display: none;
+  }
+  
+  .print-page {
+    margin: 0;
+    padding: 0;
+  }
+  
+  .label-grid {
+    gap: 10px;
+  }
+  
+  @page {
+    size: A4;
+    margin: 1cm;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pc/src/views/asset/inventory/components/AssetLabelPrint.zip b/pc/src/views/asset/inventory/components/AssetLabelPrint.zip
new file mode 100644
index 0000000..db49963
Binary files /dev/null and b/pc/src/views/asset/inventory/components/AssetLabelPrint.zip differ
diff --git a/pc/src/views/asset/inventory/index.vue b/pc/src/views/asset/inventory/index.vue
new file mode 100644
index 0000000..5f7795d
--- /dev/null
+++ b/pc/src/views/asset/inventory/index.vue
@@ -0,0 +1,851 @@
+<template>
+  <div class="app-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>资产清单</span>
+        <el-button-group style="float: right;">
+          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增资产</el-button>
+          <el-button type="primary" icon="el-icon-upload2" size="mini" @click="handleImport">批量导入</el-button>
+          <el-button type="primary" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
+          <el-button type="primary" icon="el-icon-printer" size="mini" @click="handlePrint" :disabled="multiple">打印标签</el-button>
+        </el-button-group>
+      </div>
+      
+      <!-- 搜索条件 -->
+      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
+        <el-form-item label="资产状态" prop="assetStatus">
+          <el-select  size="small" v-model="queryParams.assetStatus" placeholder="请选择资产状态" clearable style="width: 180px">
+            <el-option v-for="dict in statusOptions" :key="dict.value" :label="dict.label" :value="dict.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="资产分类" prop="classificationId">
+          <el-cascader
+            size="small"
+            v-model="queryParams.classificationId"
+            :options="classificationOptions"
+            :props="{ checkStrictly: true, value: 'id', label: 'name', emitPath: false }"
+            clearable
+            style="width: 180px"
+          />
+        </el-form-item>
+        <el-form-item label="资产名称" prop="assetName">
+          <el-input size="small" v-model="queryParams.assetName" placeholder="请输入资产名称" clearable style="width: 180px" />
+        </el-form-item>
+        <el-form-item label="所在位置">
+          <el-cascader
+            v-model="queryParams.locationId"
+            :options="locationOptions"
+            size="small"
+            :props="{ 
+              checkStrictly: true,
+              emitPath: false,
+              expandTrigger: 'hover',
+              value: 'id',
+              label: 'name'
+            }"
+            clearable
+            filterable
+            placeholder="请选择所在位置"
+            style="width: 180px"
+          />
+        </el-form-item>
+        <el-form-item label="资产编码" prop="assetCode">
+          <el-input size="small" v-model="queryParams.assetCode" placeholder="请输入资产编码" clearable style="width: 180px" />
+        </el-form-item>
+        <el-form-item label="设备序列号" prop="serialNumber">
+          <el-input size="small" v-model="queryParams.serialNumber" placeholder="请输入设备序列号" clearable style="width: 180px" />
+        </el-form-item>
+        <el-form-item label="管理员" prop="adminUserId">
+          <el-select
+            v-model="queryParams.adminUserId"
+            placeholder="请选择管理员"
+            clearable
+            size="small"
+            filterable
+            remote
+            :remote-method="remoteSearchAdmin"
+            :loading="adminLoading"
+            style="width: 180px"
+            multiple
+          >
+            <el-option
+              v-for="item in adminOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="保养到期" prop="maintenanceExpired">
+          <el-select v-model="queryParams.maintenanceExpired" size="small"  placeholder="请选择" clearable style="width: 180px">
+            <el-option label="全部" value="" />
+            <el-option label="是" value="1" />
+            <el-option label="否" value="0" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini"  @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" style="margin-right: 10px;" size="mini"  @click="resetQuery">重置</el-button>
+          <el-popover
+            placement="bottom"
+            width="200"
+            trigger="click"
+            v-model="columnFilterVisible">
+            <el-checkbox-group v-model="selectedColumns">
+              <el-checkbox label="all" @change="handleCheckAllChange">全部</el-checkbox>
+              <el-divider></el-divider>
+              <el-checkbox v-for="(item, index) in columns" :key="index" :label="item.prop" :disabled="item.disabled">{{ item.label }}</el-checkbox>
+            </el-checkbox-group>
+            <el-button slot="reference" type="primary" size="mini" icon="el-icon-s-operation">列显示</el-button>
+          </el-popover>
+        </el-form-item>
+      </el-form>
+      
+      <!-- 列表展示区域 -->
+      <el-table
+        v-loading="loading"
+        :data="assetList"
+        border
+        @selection-change="handleSelectionChange"
+        style="width: 100%; margin-top: 15px;"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="资产编码" prop="assetCode" width="120" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            <el-link type="primary" @click="handleDetail(scope.row)">{{ scope.row.assetCode }}</el-link>
+          </template>
+        </el-table-column>
+        <el-table-column label="资产分类" width="120" v-if="isColumnVisible('classification')" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            {{ getClassificationName(scope.row.classificationId) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="资产名称" prop="assetName" width="120" v-if="isColumnVisible('assetName')" :show-overflow-tooltip="true" />
+        <el-table-column label="资产状态" prop="assetStatus" width="100" v-if="isColumnVisible('assetStatus')">
+          <template slot-scope="scope">
+            <el-tag :type="getStatusType(scope.row.assetStatus)">{{ scope.row.assetStatus }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="品牌" prop="brand" width="100" v-if="isColumnVisible('brand')" :show-overflow-tooltip="true" />
+        <el-table-column label="型号" prop="model" width="100" v-if="isColumnVisible('model')" :show-overflow-tooltip="true" />
+        <el-table-column label="设备序列号" prop="serialNumber" width="140" v-if="isColumnVisible('serialNumber')" :show-overflow-tooltip="true" />
+        <el-table-column label="管理员" prop="administratorName" width="100" v-if="isColumnVisible('administratorName')" :show-overflow-tooltip="true" />
+        <el-table-column label="所属公司" prop="companyName" width="140" v-if="isColumnVisible('companyName')" :show-overflow-tooltip="true" />
+        <el-table-column label="所在位置" width="140" v-if="isColumnVisible('location')" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            {{ getLocationName(scope.row.locationId) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="购置时间" prop="purchaseDate" width="120" v-if="isColumnVisible('purchaseDate')" />
+        <el-table-column label="购置方式" prop="purchaseType" width="100" v-if="isColumnVisible('purchaseType')">
+          <template slot-scope="scope">
+            {{ scope.row.purchaseType === '1' ? '采购' : '租赁' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="购置金额(含税)" prop="purchaseAmount" width="130" v-if="isColumnVisible('purchaseAmount')" />
+        <el-table-column label="入库时间" prop="storageDate" width="120" v-if="isColumnVisible('storageDate')" />
+        <el-table-column label="预计使用期限(月)" prop="expectedDepreciationPeriod" width="150" v-if="isColumnVisible('expectedUsePeriod')" />
+        <el-table-column label="备注" prop="remark" width="150" v-if="isColumnVisible('remark')" :show-overflow-tooltip="true" />
+        <el-table-column label="资产照片" width="100" v-if="isColumnVisible('image')" align="center">
+          <template slot-scope="scope">
+            <el-image 
+              v-if="scope.row.imageUrl" 
+              :src="scope.row.imageUrl" 
+              style="width: 50px; height: 50px"
+              :preview-src-list="[scope.row.imageUrl]">
+            </el-image>
+            <span v-else>无</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="保养到期时间" prop="maintenanceDueDate" width="130" v-if="isColumnVisible('maintenanceDueDate')" />
+        <el-table-column label="保养说明" prop="maintenanceDescription" width="150" v-if="isColumnVisible('maintenanceDescription')" :show-overflow-tooltip="true" />
+        <el-table-column label="预计折旧期限(月)" prop="expectedDepreciationPeriod" width="150" v-if="isColumnVisible('expectedDepreciationPeriod')" />
+        <el-table-column label="操作" width="150" align="center" fixed="right">
+          <template slot-scope="scope">
+            <el-button type="text" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
+            <el-button type="text" size="mini" @click="handleDelete(scope.row)" v-if="scope.row.assetStatus === '0'" style="color: #F56C6C;">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      
+      <!-- 分页 -->
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="queryParams.pageNum"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="queryParams.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        style="margin-top: 15px; text-align: right;">
+      </el-pagination>
+    </el-card>
+    
+    <!-- 导入对话框 -->
+    <el-dialog :title="importTitle" :visible.sync="upload.open" width="400px" append-to-body>
+      <el-upload
+        ref="upload"
+        :limit="1"
+        accept=".xlsx, .xls"
+        :headers="upload.headers"
+        :action="upload.url"
+        :disabled="upload.isUploading"
+        :on-progress="handleFileUploadProgress"
+        :on-success="handleFileSuccess"
+        :auto-upload="false"
+        drag>
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <div class="el-upload__tip" slot="tip">
+          <el-button type="text" @click="downloadImportTemplate">下载模板</el-button>
+          <div>只允许导入xls、xlsx格式文件。</div>
+        </div>
+      </el-upload>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitFileForm">确 定</el-button>
+        <el-button @click="upload.open = false">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 查看详情对话框 -->
+    <el-dialog :title="detailTitle" :visible.sync="detailOpen" width="900px" append-to-body>
+      <asset-detail v-if="detailOpen" :asset-id="currentAssetId" />
+    </el-dialog>
+    
+    <!-- 添加/修改资产对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
+      <asset-form
+        v-if="open"
+        :asset-id="currentAssetId"
+        :is-edit="isEdit"
+        @refresh="getList"
+        @close="open = false"
+      />
+    </el-dialog>
+    
+    <!-- 打印标签对话框 -->
+    <el-dialog title="打印资产标签" :visible.sync="printOpen" width="800px" append-to-body>
+      <asset-label-print
+        v-if="printOpen"
+        :ids="ids"
+        :selected-assets="assetsToPrint"
+        @close="printOpen = false"
+      />
+    </el-dialog>
+    
+    <!-- 隐藏的打印组件，用于生成打印内容 -->
+    <asset-label-print
+      ref="assetLabelPrint"
+      :ids="ids"
+      :selected-assets="assetsToPrint"
+      style="display: none;"
+    />
+    
+  </div>
+</template>
+
+<script>
+import { listAssets, deleteAsset, deleteAssets, listCompanies, listUsers, exportAsset, downloadTemplate, printAssetLabels, getLabelConfig } from '@/api/asset/inventory'
+import { getClassificationTree } from '@/api/asset/classification'
+import { getLocationTree } from '@/api/asset/location'
+import AssetDetail from './components/AssetDetail'
+import AssetForm from './components/AssetForm'
+import AssetLabelPrint from './components/AssetLabelPrint'
+import { API_SUCCESS_CODE } from '@/utils/constants'
+
+export default {
+  name: 'AssetInventory',
+  components: {
+    AssetDetail,
+    AssetForm,
+    AssetLabelPrint
+  },
+  data() {
+    return {
+      printOpen: false,
+      // 遮罩层
+      loading: false,
+      // 资产清单列表
+      assetList: [],
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 总条数
+      total: 0,
+      // 要打印的资产数据
+      assetsToPrint: [],
+      // 弹出层标题
+      title: '',
+      // 是否显示弹出层
+      open: false,
+      // 是否显示详情弹出层
+      detailOpen: false,
+      // 是否显示导入弹出层
+      importOpen: false,
+      // 导入标题
+      importTitle: '导入资产数据',
+      // 详情标题
+      detailTitle: '资产详情',
+      // 当前处理的资产ID
+      currentAssetId: null,
+      // 是否编辑模式
+      isEdit: false,
+      // 资产状态选项
+      statusOptions: [],
+      // 管理员选项
+      adminOptions: [],
+      // 管理员搜索加载中
+      adminLoading: false,
+      // 资产分类选项
+      classificationOptions: [],
+      // 资产位置选项
+      locationOptions: [],
+      // 公司选项
+      companyOptions: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        assetStatus: '',
+        classificationId: undefined,
+        assetName: '',
+        locationId: undefined,
+        assetCode: '',
+        serialNumber: '',
+        adminUserId: undefined,
+        maintenanceExpired: ''
+      },
+      // 上传参数
+      upload: {
+        // 是否显示弹出层
+        open: false,
+        // 是否禁用上传
+        isUploading: false,
+        // 设置上传的请求头部
+        headers: {},
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + '/asset/import'
+      },
+      // 列显示设置
+      columns: [
+        { prop: 'assetCode', label: '资产编码', visible: true, disabled: true },
+        { prop: 'tagLink', label: '标签链接', visible: true, disabled: false },
+        { prop: 'classification', label: '资产分类', visible: true, disabled: false },
+        { prop: 'assetName', label: '资产名称', visible: true, disabled: false },
+        { prop: 'assetStatus', label: '资产状态', visible: true, disabled: false },
+        { prop: 'brand', label: '品牌', visible: true, disabled: false },
+        { prop: 'model', label: '型号', visible: true, disabled: false },
+        { prop: 'serialNumber', label: '设备序列号', visible: true, disabled: false },
+        { prop: 'administratorName', label: '管理员', visible: true, disabled: false },
+        { prop: 'companyName', label: '所属公司', visible: true, disabled: false },
+        { prop: 'location', label: '所在位置', visible: true, disabled: false },
+        { prop: 'purchaseDate', label: '购置时间', visible: true, disabled: false },
+        { prop: 'purchaseType', label: '购置方式', visible: true, disabled: false },
+        { prop: 'purchaseAmount', label: '购置金额(含税)', visible: true, disabled: false },
+        { prop: 'storageDate', label: '入库时间', visible: true, disabled: false },
+        { prop: 'expectedUsePeriod', label: '预计使用期限(月)', visible: true, disabled: false },
+        { prop: 'remark', label: '备注', visible: true, disabled: false },
+        { prop: 'image', label: '资产照片', visible: true, disabled: false },
+        { prop: 'maintenanceDueDate', label: '保养到期时间', visible: true, disabled: false },
+        { prop: 'maintenanceDescription', label: '保养说明', visible: true, disabled: false },
+        { prop: 'expectedDepreciationPeriod', label: '预计折旧期限(月)', visible: true, disabled: false }
+      ],
+      columnFilterVisible: false,
+      selectedColumns: []
+    }
+  },
+  created() {
+    this.getList()
+    this.getStatusOptions()
+    this.getClassificationOptions()
+    this.getLocationOptions()
+    // this.getCompanyOptions()
+    
+    // 初始化选中的列
+    this.selectedColumns = this.columns
+      .filter(col => col.visible)
+      .map(col => col.prop)
+    
+    // 检查是否所有列都被选中，如果是，添加 'all' 选项
+    const allSelected = this.columns
+      .filter(col => !col.disabled)
+      .every(col => this.selectedColumns.includes(col.prop))
+      
+    if (allSelected) {
+      this.selectedColumns.push('all')
+    }
+  },
+  computed: {
+    // 判断列是否可见
+    isColumnVisible() {
+      return (prop) => this.selectedColumns.includes(prop)
+    },
+    // 判断是否所有可选列都被选中
+    isAllSelected() {
+      const selectableColumns = this.columns
+        .filter(col => !col.disabled)
+        .map(col => col.prop)
+      
+      return selectableColumns.every(prop => this.selectedColumns.includes(prop))
+    }
+  },
+  watch: {
+    selectedColumns: {
+      handler(newVal) {
+        // 确保必选列始终存在
+        if (!newVal.includes('assetCode')) {
+          this.selectedColumns.push('assetCode')
+        }
+        
+        // 获取所有可选列（除了必选列）
+        const selectableColumns = this.columns
+          .filter(col => !col.disabled)
+          .map(col => col.prop)
+        
+        // 检查所有可选列是否都被选中
+        const allSelected = selectableColumns.every(prop => newVal.includes(prop))
+        
+        // 更新"全部"选项的状态
+        if (allSelected && !newVal.includes('all')) {
+          this.selectedColumns.push('all')
+        } else if (!allSelected && newVal.includes('all')) {
+          // 从选择中移除"全部"选项
+          const index = this.selectedColumns.indexOf('all')
+          if (index > -1) {
+            this.selectedColumns.splice(index, 1)
+          }
+        }
+        
+        // 更新 columns 中的 visible 属性
+        this.columns.forEach(col => {
+          col.visible = this.selectedColumns.includes(col.prop)
+        })
+      },
+      deep: true
+    }
+  },
+  methods: {
+    /** 查询资产清单列表 */
+    getList() {
+      this.loading = true
+      listAssets(this.queryParams).then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          this.assetList = response.data.data || []
+          this.total = response.data.total
+        }
+        this.loading = false
+      })
+    },
+    
+    /** 获取资产状态选项 */
+    getStatusOptions() {
+      this.statusOptions = [
+        { value: '空闲', label: '空闲' },
+        { value: '在用', label: '在用' },
+        { value: '借用', label: '借用' },
+        { value: '维修中', label: '维修中' },
+        { value: '报废', label: '报废' }
+      ]
+    },
+    
+    /** 获取资产分类树形选项 */
+    getClassificationOptions() {
+      getClassificationTree({ status: '1' }).then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          this.classificationOptions = this.processClassificationTree(response.data || [])
+        }
+      })
+    },
+    
+    /** 获取资产位置树形选项 */
+    getLocationOptions() {
+      getLocationTree().then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          this.locationOptions = this.processLocationTree(response.data || [])
+        }
+      })
+    },
+    
+    processLocationTree(data) {
+      if (!data || !Array.isArray(data)) return []
+      
+      const processNode = (node) => {
+        const processedNode = {
+          id: node.id,
+          name: `${node.code || ''}-${node.locationName || node.label || ''}`,
+          children: []
+        }
+        
+        if (node.children && Array.isArray(node.children) && node.children.length > 0) {
+          processedNode.children = node.children.map(child => processNode(child))
+        }
+        
+        return processedNode
+      }
+      
+      return data.map(item => processNode(item))
+    },
+    
+    processClassificationTree(data) {
+      if (!data || !Array.isArray(data)) return []
+      
+      const processNode = (node) => {
+        const processedNode = {
+          id: node.id,
+          name: `${node.classificationCode || node.code || ''}-${node.classificationName || node.label || ''}`,
+          children: []
+        }
+        
+        if (node.children && Array.isArray(node.children) && node.children.length > 0) {
+          processedNode.children = node.children.map(child => processNode(child))
+        }
+        
+        return processedNode
+      }
+      
+      return data.map(item => processNode(item))
+    },
+    
+    /** 获取公司选项 */
+    getCompanyOptions() {
+      listCompanies().then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          this.companyOptions = response.data || []
+        }
+      })
+    },
+    
+    /** 远程搜索管理员 */
+    remoteSearchAdmin(query) {
+      if (query) {
+        this.adminLoading = true
+        listUsers({ name: query }).then(response => {
+          this.adminLoading = false
+          if (response.code === API_SUCCESS_CODE) {
+            this.adminOptions = response.data || []
+          }
+        }).catch(() => {
+          this.adminLoading = false
+        })
+      }
+    },
+    
+    /** 获取资产状态显示文本 */
+    getStatusText(assetStatus) {
+      const statusMap = {
+        '0': '空闲',
+        '1': '在用',
+        '2': '借用',
+        '3': '维修中',
+        '4': '报废'
+      }
+      return statusMap[assetStatus] || '未知'
+    },
+    
+    /** 获取资产状态显示类型 */
+    getStatusType(assetStatus) {
+      const typeMap = {
+        '空闲': 'success',
+        '在用': 'primary',
+        '借用': 'info',
+        '维修中': 'warning',
+        '报废': 'warning',
+        '5': 'warning',
+        '6': 'warning',
+        '7': 'danger'
+      }
+      return typeMap[assetStatus] || 'info'
+    },
+    
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    
+    /** 重置按钮操作 */
+    resetQuery() {
+      // 使用Element UI表单的resetFields方法重置表单
+      if (this.$refs.queryForm) {
+        this.$refs.queryForm.resetFields()
+      }
+      
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        assetStatus: '',
+        classificationId: undefined,
+        assetName: '',
+        locationId: undefined,
+        assetCode: '',
+        serialNumber: '',
+        adminUserId: undefined,
+        maintenanceExpired: ''
+      }
+      this.handleQuery()
+    },
+    
+    /** 全选/取消全选处理 */
+    handleCheckAllChange(checked) {
+      // 获取所有可选列的 prop 值（除了必选列）
+      const selectableColumns = this.columns
+        .filter(col => !col.disabled)
+        .map(col => col.prop)
+      
+      if (checked) {
+        // 如果选中"全部"，则选择所有列
+        this.selectedColumns = ['all', 'assetCode', ...selectableColumns]
+      } else {
+        // 如果取消选中"全部"，则只保留必选列
+        this.selectedColumns = ['assetCode']
+      }
+    },
+    
+    /** 多选框选中数据 */
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.multiple = !selection.length
+    },
+    
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.open = true
+      this.title = '新增资产'
+      this.isEdit = false
+      this.currentAssetId = null
+    },
+    
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.open = true
+      this.title = '修改资产'
+      this.isEdit = true
+      this.currentAssetId = row.assetCode
+    },
+    
+    /** 详情按钮操作 */
+    handleDetail(row) {
+      this.detailOpen = true
+      this.detailTitle = '资产详情'
+      this.currentAssetId = row.assetCode
+    },
+    
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$confirm('是否确认删除资产编码为"' + row.assetCode + '"的数据项?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        return deleteAsset(row.assetCode)
+      }).then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          this.$message.success('删除成功')
+          this.getList()
+        }
+      }).catch(() => {})
+    },
+    
+    /** 批量删除按钮操作 */
+    handleBatchDelete() {
+      const assetCodes = this.selectedRows.map(item => item.assetCode)
+      if (assetCodes.length === 0) {
+        this.$message.warning('请至少选择一条记录')
+        return
+      }
+
+      this.$confirm('是否确认批量删除选中的' + assetCodes.length + '条数据?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        return deleteAssets(assetCodes)
+      }).then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          this.$message.success('批量删除成功')
+          this.getList()
+        }
+      }).catch(() => {})
+    },
+    
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = { ...this.queryParams }
+      queryParams.pageNum = undefined
+      queryParams.pageSize = undefined
+
+      this.$confirm('是否确认导出所有资产数据项?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.exportLoading = true
+        return exportAsset(queryParams)
+      }).then(response => {
+        this.download(response, '资产数据.xlsx')
+        this.exportLoading = false
+      }).catch(() => {
+        this.exportLoading = false
+      })
+    },
+    
+    /** 下载模板操作 */
+    downloadImportTemplate() {
+      downloadTemplate().then(response => {
+        this.download(response, '资产导入模板.xlsx')
+      })
+    },
+    
+    /** 导入按钮操作 */
+    handleImport() {
+      this.upload.open = true
+      this.importTitle = '导入资产数据'
+    },
+    
+    /** 处理文件上传中 */
+    handleFileUploadProgress() {
+      this.upload.isUploading = true
+    },
+    
+    /** 文件上传成功处理 */
+    handleFileSuccess(response) {
+      this.upload.isUploading = false
+      this.$refs.upload.clearFiles()
+      this.upload.open = false
+      if (response.code === API_SUCCESS_CODE) {
+        this.$alert(`成功导入${response.data && response.data.successCount ? response.data.successCount : 0}条数据`, { type: 'success' })
+        this.getList()
+      } else {
+        // 如果是文件流，则下载错误文件
+        this.$alert(response.msg || '导入失败，正在下载错误文件', '导入结果', { type: 'error' })
+        this.download(response, `资产导入错误文件_${new Date().getTime()}.xlsx`)
+      }
+    },
+    
+    /** 提交上传文件 */
+    submitFileForm() {
+      this.$refs.upload.submit()
+    },
+    
+    /** 打印标签 */
+    handlePrint() {
+      if (this.ids.length === 0) {
+        this.$message.warning('请选择要打印的资产')
+        return
+      }
+      
+      // 从选中的列表项中获取相关数据
+      this.assetsToPrint = this.assetList.filter(item => this.ids.includes(item.id || item.assetId))
+      
+      // 直接调用浏览器打印功能
+      this.$nextTick(() => {
+        // const printWindow = window.open('', '_blank')
+        // if (!printWindow) {
+        //   this.$message.error('打印窗口被阻止，请允许弹出窗口')
+        //   return
+        // }
+        
+        // 获取打印内容
+        const printContent = this.$refs.assetLabelPrint.getPrintContent(this.assetsToPrint)
+        
+        // 写入打印窗口
+        printWindow.document.open()
+        printWindow.document.write(printContent)
+        printWindow.document.close()
+        
+        // 等待资源加载完成后打印
+        printWindow.onload = function() {
+          printWindow.print()
+          // 打印完成后关闭窗口
+          printWindow.close()
+        }
+      })
+    },
+    
+    /** 打印单个资产标签 */
+    handlePrintSingle(row) {
+      this.ids = [row.id || row.assetId]
+      this.assetsToPrint = [row]
+      this.handlePrint()
+    },
+    
+    /** 分页大小改变 */
+    handleSizeChange(val) {
+      this.queryParams.pageSize = val
+      this.getList()
+    },
+    
+    /** 分页页码改变 */
+    handleCurrentChange(val) {
+      this.queryParams.pageNum = val
+      this.getList()
+    },
+
+    /** 获取分类名称 */
+    getClassificationName(classificationId) {
+      if (!classificationId) return '未知分类'
+      
+      // 递归查找分类
+      const findClassification = (items) => {
+        for (const item of items) {
+          if (item.id === classificationId) {
+            return item.name
+          }
+          if (item.children && item.children.length > 0) {
+            const found = findClassification(item.children)
+            if (found) return found
+          }
+        }
+        return null
+      }
+      
+      const name = findClassification(this.classificationOptions)
+      return name || '未知分类'
+    },
+
+    /** 获取位置名称 */
+    getLocationName(locationId) {
+      if (!locationId) return '未知位置'
+      
+      // 递归查找位置
+      const findLocation = (items) => {
+        for (const item of items) {
+          if (item.id === locationId) {
+            return item.name
+          }
+          if (item.children && item.children.length > 0) {
+            const found = findLocation(item.children)
+            if (found) return found
+          }
+        }
+        return null
+      }
+      
+      const name = findLocation(this.locationOptions)
+      return name || '未知位置'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  .el-table {
+    margin-top: 15px;
+  }
+  
+  .el-form {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+  
+  .el-checkbox + .el-checkbox {
+    margin-left: 0;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pc/src/views/asset/labelPage/index.vue b/pc/src/views/asset/labelPage/index.vue
new file mode 100644
index 0000000..0f63e8a
--- /dev/null
+++ b/pc/src/views/asset/labelPage/index.vue
@@ -0,0 +1,623 @@
+<template>
+  <div class="app-container">
+    <el-card class="box-card" v-loading="loading">
+      <div slot="header" class="clearfix">
+        <span>资产标签设置</span>
+      </div>
+
+      <div class="label-container">
+        <!-- 左侧模板选择 -->
+        <div class="template-selection">
+          <div class="section-title">选择模板</div>
+          <div class="template-list">
+            <div v-for="(template, index) in templates" :key="index"
+              :class="['template-item', selectedTemplateIndex === index ? 'selected' : '']"
+              @click="selectTemplate(index)">
+              <div class="template-preview">
+                <div class="qr-preview">
+                  <img :src="template.img" alt="模板预览" class="qr-image">
+                </div>
+              </div>
+              <div class="template-name">模板{{ index + 1 }}</div>
+              <div class="template-limit">{{ getTemplateLimitText(index) }}</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 中间预览区 -->
+        <div class="preview-area">
+          <div class="preview-content" ref="previewContent">
+            <!-- 预览标签内容 -->
+            <div class="label-preview-card">
+              <div class="qr-code-container">
+                <img src="@/assets/images/qrcode.svg" alt="QR Code" class="qr-image" />
+                <div class="asset-info">
+                  <!-- <div class="asset-icon"><i class="el-icon-coin"></i> 资产</div> -->
+                  <div class="label-fields">
+                    <div v-for="(field, index) in selectedTemplateFields" :key="index" class="label-field-item">
+                      <span class="field-name">{{ field.name }}{{ index === 1 ? field.name.length > 2 ? '' : '　' : ''
+                        }}：</span>
+                      <span class="field-value">{{ field.value || 'XXXXXXXXXX' }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              
+              <div class="label-footer">预览效果：模板{{ selectedTemplateIndex + 1 }}</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 右侧编辑区 -->
+        <div class="edit-area">
+          <div class="section-title">编辑标签</div>
+
+          <div class="fields-section">
+            <div v-if="isFieldsLimitExceeded" class="limit-warning">
+              <i class="el-icon-warning"></i>
+              当前模板最多支持{{ getMaxFieldsCount() }}个字段
+            </div>
+            <div class="field-selection">
+              <el-checkbox-group v-model="selectedFields" @change="handleFieldsChange">
+                <el-checkbox v-for="field in availableFields" :key="field.id" :label="field.id">
+                  {{ field.name }}
+                </el-checkbox>
+              </el-checkbox-group>
+            </div>
+          </div>
+
+          <!-- <div class="section-title">打印设置</div>
+
+          <div class="settings-section">
+            <div class="setting-group">
+              <div class="setting-content">
+                <el-radio-group v-model="paperType" @change="handlePaperTypeChange">
+                  <el-radio :label="1">标签专用纸</el-radio>
+                  <el-radio :label="2">A4（2列)</el-radio>
+                  <el-radio :label="3">A4（3列）</el-radio>
+                </el-radio-group>
+              </div>
+            </div>
+
+            <div class="setting-group" v-if="paperType === 1">
+              <div class="setting-label">标签宽度(mm)：</div>
+              <div class="setting-content">
+                <el-input v-model="labelWidth" type="number" placeholder="请输入宽度"></el-input>
+              </div>
+            </div>
+
+            <div class="setting-group" v-if="paperType === 1">
+              <div class="setting-label">标签高度(mm)：</div>
+              <div class="setting-content">
+                <el-input v-model="labelHeight" type="number" placeholder="请输入高度"></el-input>
+              </div>
+            </div>
+          </div> -->
+
+          <div class="button-group">
+            <el-button type="primary" @click="saveTemplate">保存</el-button>
+            <el-button @click="resetTemplate">重置</el-button>
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import {
+  listLabelTemplates, addLabelTemplate, updateLabelTemplate,
+  getLabelFields, getFieldSampleValues
+} from '@/api/asset/label'
+import { API_SUCCESS_CODE } from '@/utils/constants'
+
+export default {
+  name: 'AssetLabel',
+  data() {
+    return {
+      // 模板列表
+      templates: [
+        { id: 1, name: '模板1', maxFields: 1, img: require('@/assets/images/tag_01.png') },
+        { id: 2, name: '模板2', maxFields: 2, img: require('@/assets/images/tag_02.png') },
+        { id: 3, name: '模板3', maxFields: 3, img: require('@/assets/images/tag_03.png') },
+        { id: 4, name: '模板4', maxFields: 4, img: require('@/assets/images/tag_04.png') }
+      ],
+      // 当前选中的模板索引
+      selectedTemplateIndex: 0,
+      // 可用的字段列表
+      availableFields: [],
+      // 当前选中的字段
+      selectedFields: [],
+      // 当前模板中的字段及预览值
+      selectedTemplateFields: [],
+      // 标签设置
+      paperType: 3,
+      labelWidth: 50,
+      labelHeight: 30,
+      // 字段数量超出标志
+      isFieldsLimitExceeded: false,
+      // 加载状态
+      loading: false,
+      // 资产标签记录ID
+      labelId: null
+    }
+  },
+  created() {
+    // 先获取可用字段选项，再获取标签设置
+    this.getFieldOptions().then(() => {
+      this.getLabelSettings();
+    });
+  },
+  methods: {
+    // 获取标签设置
+    async getLabelSettings() {
+      try {
+        this.loading = true;
+        const res = await listLabelTemplates();
+        if (res.code === API_SUCCESS_CODE) {
+          if (res.data) {
+            const labelData = res.data;
+            this.labelId = labelData.id;
+            
+            // 设置模板类型
+            const templateType = parseInt(labelData.templateType || '1');
+            this.selectedTemplateIndex = templateType - 1;
+            
+            // 设置选中的字段
+            if (labelData.labelItems) {
+              this.selectedFields = labelData.labelItems.split(',').map(item => parseInt(item.trim()));
+            } else {
+              this.selectedFields = [1]; // 默认选择资产名称
+            }
+            
+            // 设置纸张类型和尺寸
+            this.paperType = parseInt(labelData.paperType || '3');
+            if (this.paperType === 1) {
+              this.labelWidth = parseInt(labelData.labelWidth || '50');
+              this.labelHeight = parseInt(labelData.labelHeight || '30');
+            }
+            
+            this.updateTemplateFields();
+            
+            console.log("从接口获取的数据: ", {
+              id: this.labelId,
+              templateType,
+              selectedFields: this.selectedFields,
+              paperType: this.paperType,
+              labelWidth: this.labelWidth,
+              labelHeight: this.labelHeight
+            });
+          } else {
+            // 如果没有记录，使用默认设置
+            this.selectTemplate(0);
+          }
+        } else {
+          this.$message.error(res.msg || '获取标签设置失败');
+          // 使用默认设置
+          this.selectTemplate(0);
+        }
+        this.loading = false;
+      } catch (error) {
+        console.error('获取标签设置失败', error);
+        this.loading = false;
+        this.$message.error('获取标签设置失败');
+        // 使用默认设置
+        this.selectTemplate(0);
+      }
+    },
+
+    // 获取可用字段选项
+    async getFieldOptions() {
+      try {
+        const res = await getLabelFields();
+        if (res.code === API_SUCCESS_CODE) {
+          this.availableFields = res.data || [];
+          console.log("获取到的字段选项: ", this.availableFields);
+        } else {
+          this.$message.error(res.msg || '获取字段选项失败');
+        }
+      } catch (error) {
+        console.error('获取字段选项失败', error);
+        this.$message.error('获取字段选项失败');
+      }
+    },
+
+    // 获取模板限制文字说明
+    getTemplateLimitText(index) {
+      const maxFields = this.templates[index].maxFields;
+      return maxFields === 1 ? '支持1个字段' : `支持最多${maxFields}个字段`;
+    },
+
+    // 获取当前模板最大字段数
+    getMaxFieldsCount() {
+      return this.templates[this.selectedTemplateIndex].maxFields;
+    },
+
+    // 选择模板
+    selectTemplate(index) {
+      this.selectedTemplateIndex = index;
+
+      // 根据模板类型限制字段数
+      const maxFields = this.templates[index].maxFields;
+      if (this.selectedFields.length > maxFields) {
+        this.selectedFields = this.selectedFields.slice(0, maxFields);
+      } else if (this.selectedFields.length === 0) {
+        // 如果没有选择字段，默认选择第一个
+        this.selectedFields = [1];
+      }
+
+      // 默认纸张类型和尺寸
+      if (index === 0) {
+        this.paperType = 1;
+        this.labelWidth = 50;
+        this.labelHeight = 30;
+      } else if (index === 1) {
+        this.paperType = 1;
+        this.labelWidth = 60;
+        this.labelHeight = 40;
+      } else if (index === 2) {
+        this.paperType = 2;
+      } else {
+        this.paperType = 3;
+      }
+
+      this.updateTemplateFields();
+      this.checkFieldsLimit();
+    },
+
+    // 更新模板字段
+    updateTemplateFields() {
+      const sampleValues = getFieldSampleValues();
+      
+      this.selectedTemplateFields = this.selectedFields.map(fieldId => {
+        const field = this.availableFields.find(f => f.id === fieldId);
+        return {
+          id: fieldId,
+          name: field ? field.name : '',
+          value: sampleValues[fieldId] || 'XXXXXXXXXX'
+        };
+      });
+    },
+
+    // 检查字段数量限制
+    checkFieldsLimit() {
+      const maxFields = this.getMaxFieldsCount();
+      this.isFieldsLimitExceeded = this.selectedFields.length > maxFields;
+
+      // 如果超出限制，自动截取符合数量的字段
+      if (this.isFieldsLimitExceeded) {
+        this.selectedFields = this.selectedFields.slice(0, maxFields);
+        this.updateTemplateFields();
+        this.isFieldsLimitExceeded = false;
+        this.$message({
+          message: `当前模板最多支持${maxFields}个字段，已自动调整`,
+          type: 'warning'
+        });
+      }
+    },
+
+    // 纸张类型变更
+    handlePaperTypeChange(type) {
+      // 根据纸张类型设置默认尺寸
+      if (type === 1) {
+        this.labelWidth = 50;
+        this.labelHeight = 30;
+      }
+    },
+
+    // 字段选择变更
+    handleFieldsChange() {
+      this.checkFieldsLimit();
+      this.updateTemplateFields();
+    },
+
+    // 保存模板
+    saveTemplate() {
+      if (this.isFieldsLimitExceeded) {
+        this.$message.error(`字段数量超出限制，当前模板最多支持${this.getMaxFieldsCount()}个字段`);
+        return;
+      }
+      
+      if (this.selectedFields.length === 0) {
+        this.$message.error('请至少选择一个标签字段');
+        return;
+      }
+      
+      if (this.paperType === 1 && (!this.labelWidth || !this.labelHeight)) {
+        this.$message.error('使用标签专用纸时，请输入标签宽度和高度');
+        return;
+      }
+
+      const templateData = {
+        templateType: String(this.selectedTemplateIndex + 1),
+        labelItems: this.selectedFields.join(','),
+        paperType: String(this.paperType),
+        labelWidth: this.paperType === 1 ? String(this.labelWidth) : '',
+        labelHeight: this.paperType === 1 ? String(this.labelHeight) : ''
+      };
+
+      console.log('保存的数据: ', templateData);
+      this.loading = true;
+      
+      const savePromise = addLabelTemplate(templateData);
+      
+      savePromise.then(res => {
+        this.loading = false;
+        if (res.code === API_SUCCESS_CODE) {
+          this.$message.success('标签设置保存成功');
+          // 重新获取标签设置
+          this.getLabelSettings();
+        } else {
+          this.$message.error(res.msg || '保存失败');
+        }
+      }).catch(error => {
+        this.loading = false;
+        console.error('保存标签设置失败', error);
+        this.$message.error('保存标签设置失败');
+      });
+    },
+
+    // 重置模板
+    resetTemplate() {
+      this.getLabelSettings();
+      this.$message.info('已重置为原始设置');
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.label-container {
+  display: flex;
+  min-height: 500px;
+}
+
+.template-selection {
+  width: 220px;
+  border-right: 1px solid #ebeef5;
+  padding-right: 20px;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 500;
+  margin-bottom: 15px;
+  padding-left: 10px;
+  border-left: 3px solid #409EFF;
+}
+
+.template-list {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.template-item {
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  padding: 10px;
+  cursor: pointer;
+  transition: all 0.3s;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &:hover {
+    border-color: #c0c4cc;
+  }
+
+  &.selected {
+    border-color: #409EFF;
+    box-shadow: 0 0 5px rgba(64, 158, 255, 0.3);
+  }
+}
+
+.template-preview {
+  margin-bottom: 8px;
+  position: relative;
+
+}
+
+.template-name {
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.template-limit {
+  font-size: 12px;
+  color: #909399;
+}
+
+.preview-area {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 20px;
+}
+
+.preview-content {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.label-preview-card {
+  background-color: white;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  padding: 20px;
+  // width: 300px;
+  margin: 0 auto;
+  text-align: left;
+}
+
+.qr-code-container {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 15px;
+}
+
+.qr-image {
+  width: 120px;
+  height: 120px;
+  object-fit: contain;
+}
+
+.asset-info {
+  margin-left: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+}
+
+.asset-icon {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  color: #303133;
+  font-weight: 500;
+  margin-top: 10px;
+
+  i {
+    margin-right: 5px;
+    color: #666;
+  }
+}
+
+.label-fields {
+  margin-top: 5px;
+  
+  .label-field-item {
+    display: flex;
+    margin-bottom: 10px;
+    font-size: 14px;
+    line-height: 24px;
+
+    .field-name {
+      min-width: 80px;
+      color: #333;
+      font-weight: normal;
+    }
+
+    .field-value {
+      color: #333;
+      font-weight: normal;
+    }
+  }
+}
+
+.label-footer {
+  font-size: 12px;
+  color: #909399;
+  text-align: center;
+  margin-top: 15px;
+}
+
+.edit-area {
+  width: 300px;
+  border-left: 1px solid #ebeef5;
+  padding-left: 20px;
+}
+
+.fields-section {
+  margin-bottom: 20px;
+
+  .limit-warning {
+    color: #E6A23C;
+    font-size: 13px;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+
+    i {
+      margin-right: 5px;
+    }
+  }
+
+  .field-selection {
+    display: flex;
+    flex-wrap: wrap;
+    
+    ::v-deep .el-checkbox {
+      margin-right: 10px;
+      margin-bottom: 10px;
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+.settings-section {
+  margin-bottom: 20px;
+}
+
+.setting-group {
+  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+
+  .setting-label {
+    width: 120px;
+    color: #606266;
+  }
+
+  .setting-content {
+    flex: 1;
+  }
+}
+
+.logo-upload-group {
+  .logo-uploader {
+    width: 120px;
+    height: 120px;
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    margin-bottom: 10px;
+
+    &:hover {
+      border-color: #409EFF;
+    }
+
+    .logo-uploader-icon {
+      font-size: 28px;
+      color: #8c939d;
+    }
+
+    .logo-image {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  .upload-tip {
+    font-size: 12px;
+    color: #909399;
+    line-height: 1.5;
+  }
+}
+
+.button-group {
+  text-align: center;
+  margin-top: 30px;
+}
+.qr-preview{
+  width: 120px;
+  object-fit: contain;
+  &>img{
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pc/src/views/asset/location/index.vue b/pc/src/views/asset/location/index.vue
new file mode 100644
index 0000000..eb36953
--- /dev/null
+++ b/pc/src/views/asset/location/index.vue
@@ -0,0 +1,785 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <!-- 左侧树形结构 -->
+      <el-col :span="6">
+        <div class="tree-container">
+          <div class="tree-header">
+            <span class="tree-title">资产位置</span>
+            
+          </div>
+          <el-divider class="tree-divider"></el-divider>
+          <el-tree
+            ref="locationTree"
+            :data="locationTree"
+            :props="defaultProps"
+            node-key="id"
+            :expand-on-click-node="false"
+            highlight-current
+            @node-click="handleNodeClick"
+            :default-expanded-keys="defaultExpandedKeys">
+            <span class="custom-tree-node" slot-scope="{ node, data }">
+              <span>{{ node.label }}</span>
+              <span v-if="data.children && data.children.length > 0" class="node-count">
+                ({{ data.children.length }})
+              </span>
+            </span>
+          </el-tree>
+        </div>
+      </el-col>
+
+      <!-- 右侧列表 -->
+      <el-col :span="18">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>位置列表</span>
+            <el-button
+              style="float: right; margin-left: 10px;"
+              type="primary"
+              icon="el-icon-plus"
+              size="mini"
+              @click="handleAdd">新增位置</el-button>
+            <el-button
+              style="float: right;"
+              type="danger"
+              icon="el-icon-delete"
+              size="mini"
+              :disabled="multipleSelection.length === 0"
+              @click="handleBatchDelete">批量删除</el-button>
+          </div>
+          
+          <!-- 搜索表单 -->
+          <el-form :inline="true" :model="queryParams" class="demo-form-inline">
+            <el-form-item label="位置编码">
+              <el-input v-model="queryParams.locationCode" placeholder="请输入位置编码" clearable size="small" />
+            </el-form-item>
+            <el-form-item label="位置名称">
+              <el-input v-model="queryParams.locationName" placeholder="请输入位置名称" clearable size="small" />
+            </el-form-item>
+            <el-form-item label="状态">
+              <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
+                <el-option label="启用" value="1" />
+                <el-option label="禁用" value="0" />
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        
+          <el-table 
+            v-loading="loading" 
+            :data="locationList" 
+            border 
+            stripe 
+            style="width: 100%"
+            @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55" />
+            <el-table-column prop="locationCode" label="位置编码" width="150" />
+            <el-table-column prop="locationName" label="位置名称" width="200" />
+            <el-table-column label="上级位置" width="200">
+              <template slot-scope="scope">
+                <span>{{ getParentName(scope.row.parentId) }}</span>
+              </template>
+            </el-table-column>
+            <!-- <el-table-column prop="levelCode" label="层级编码" width="120" /> -->
+            <el-table-column prop="status" label="状态" width="100">
+              <template slot-scope="scope">
+                <el-tag :type="scope.row.status === '1' ? 'success' : 'info'">
+                  {{ scope.row.status === '1' ? '启用' : '禁用' }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="remark" label="备注" />
+            <el-table-column label="操作" width="180" fixed="right">
+              <template slot-scope="scope">
+                <el-button size="mini" type="text" @click="handleEdit(scope.row)">修改</el-button>
+                <el-button 
+                  size="mini" 
+                  type="text" 
+                  @click="handleStatusChange(scope.row)">
+                  {{ scope.row.status === '1' ? '禁用' : '启用' }}
+                </el-button>
+                <el-button 
+                  size="mini" 
+                  type="text" 
+                  style="color: #F56C6C" 
+                  @click="handleDelete(scope.row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <!-- 分页 -->
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="queryParams.pageNum"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="queryParams.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+            class="pagination">
+          </el-pagination>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 新增/编辑对话框 -->
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="位置编码" prop="locationCode">
+          <el-input v-model="form.locationCode" placeholder="请输入位置编码" />
+        </el-form-item>
+        <el-form-item label="位置名称" prop="locationName">
+          <el-input v-model="form.locationName" placeholder="请输入位置名称" />
+        </el-form-item>
+        <el-form-item label="上级位置" prop="parentId">
+          <el-cascader
+            v-model="form.parentId"
+            :options="locationTreeOptions"
+            :props="{ 
+              checkStrictly: true,
+              emitPath: false,
+              expandTrigger: 'hover',
+              value: 'id',
+              label: 'label'
+            }"
+            clearable
+            filterable
+            placeholder="请选择上级位置"
+            style="width: 100%">
+          </el-cascader>
+        </el-form-item>
+        <!-- <el-form-item label="层级编码" prop="levelCode">
+          <el-input v-model="form.levelCode" placeholder="请输入层级编码" />
+        </el-form-item> -->
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio label="1">启用</el-radio>
+            <el-radio label="0">禁用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listLocation, getLocation, addLocation, updateLocation, delLocation, enableLocation, disableLocation, getLocationTree, checkLocationInUse, getChildLocations, delLocationBatch, checkLocationCode } from '@/api/asset/location'
+import { API_SUCCESS_CODE } from '@/utils/constants'
+
+export default {
+  name: 'AssetLocation',
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      // 总条数
+      total: 0,
+      // 位置列表
+      locationList: [],
+      // 位置树形数据
+      locationTree: [],
+      // 处理后的树形选项数据（用于级联选择器）
+      locationTreeOptions: [],
+      // 默认展开的节点
+      defaultExpandedKeys: [],
+      // 树形配置
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      // 弹出层标题
+      dialogTitle: '',
+      // 是否显示弹出层
+      dialogVisible: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        locationCode: undefined,
+        locationName: undefined,
+        status: undefined,
+        parentId: undefined
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        locationCode: [
+          { required: true, message: '请输入位置编码', trigger: 'blur' },
+          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' },
+          { validator: this.validateLocationCode, trigger: 'blur' }
+        ],
+        locationName: [
+          { required: true, message: '请输入位置名称', trigger: 'blur' },
+          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
+        ],
+        parentId: [
+          { required: false, message: '请选择上级位置', trigger: 'change' }
+        ],
+        remark: [
+          { max: 200, message: '长度不能超过200个字符', trigger: 'blur' }
+        ]
+      },
+      // 多选选中项
+      multipleSelection: []
+    }
+  },
+  created() {
+    this.getTree()
+    this.getList()
+  },
+  methods: {
+    /** 检验位置编码唯一性 */
+    validateLocationCode(rule, value, callback) {
+      if (value === '') {
+        callback()
+        return
+      }
+      checkLocationCode(this.form.id, value).then(res => {
+        if (res.code === API_SUCCESS_CODE) {
+          if (!res.data) {
+            callback()
+          } else {
+            callback(new Error('该位置编码已存在'))
+          }
+        } else {
+          callback()
+        }
+      }).catch(() => {
+        callback()
+      })
+    },
+    /** 获取位置树形结构 */
+    getTree() {
+      this.loading = true
+      const params = {
+        status: undefined // 获取所有状态的位置
+      }
+      getLocationTree(params).then(res => {
+        if (res.code === API_SUCCESS_CODE) {
+          // 处理返回的树形数据，确保字段名称正确
+          this.locationTree = this.processTreeData(res.data)
+          
+          // 准备级联选择器的数据源
+          this.locationTreeOptions = this.prepareTreeSelectOptions(this.locationTree)
+          
+          // 如果之前已经有展开的节点，保持这些节点展开
+          // 否则只展开第一级有子节点的节点
+          if (!this.defaultExpandedKeys || this.defaultExpandedKeys.length === 0) {
+            this.defaultExpandedKeys = this.getFirstLevelKeys(this.locationTree)
+          }
+          
+          // 强制刷新树组件
+          this.$nextTick(() => {
+            if (this.$refs.locationTree) {
+              this.$refs.locationTree.$forceUpdate()
+            }
+          })
+        } else {
+          this.$message.error(res.msg || '获取位置树失败')
+        }
+        this.loading = false
+      }).catch(error => {
+        console.error('获取位置树失败', error)
+        this.$message.error('系统错误，获取位置树失败')
+        this.loading = false
+      })
+    },
+    
+    /** 获取第一级节点的key，仅展开有子节点的 */
+    getFirstLevelKeys(tree) {
+      if (!tree || !Array.isArray(tree)) return []
+      
+      return tree
+        .filter(node => node.children && node.children.length > 0)
+        .map(node => node.id)
+    },
+    
+    /** 获取所有节点key，用于全部展开 */
+    getExpandedKeys(tree, keys = []) {
+      for (const node of tree) {
+        if (node.children && node.children.length > 0) {
+          keys.push(node.id)
+          this.getExpandedKeys(node.children, keys)
+        }
+      }
+      return keys
+    },
+    
+    /** 处理树形数据，确保字段名称正确 */
+    processTreeData(data) {
+      if (!data || !Array.isArray(data)) return []
+      
+      const processNode = (node) => {
+        // 创建一个新对象，使用驼峰命名
+        const processedNode = {
+          id: node.id,
+          // 转换label，格式为"编码-名称"
+          label: `${node.code || ''}-${node.locationName || node.label || ''}`,
+          // 驼峰命名
+          locationName: node.locationName || node.label || '',
+          locationCode: node.code || '',
+          status: node.status || '1',
+          parentId: node.parentId || null,
+          levelCode: node.levelCode || '',
+          children: []
+        }
+        
+        // 递归处理子节点
+        if (node.children && Array.isArray(node.children) && node.children.length > 0) {
+          processedNode.children = node.children.map(child => processNode(child))
+        }
+        
+        return processedNode
+      }
+      
+      return data.map(item => processNode(item))
+    },
+    
+    /** 准备级联选择器的数据源 */
+    prepareTreeSelectOptions(data) {
+      if (!data || !Array.isArray(data)) return []
+      
+      // 创建一个无上级选项
+      const options = [{
+        id: '',
+        label: '无上级位置',
+        children: []
+      }]
+      
+      // 添加所有位置节点
+      const cloneData = JSON.parse(JSON.stringify(data))
+      options.push(...cloneData)
+      
+      return options
+    },
+    
+    /** 转换下划线命名为驼峰命名 */
+    convertSnakeToCamel(list) {
+      if (!list || !Array.isArray(list)) return []
+      
+      return list.map(item => {
+        return {
+          id: item.id,
+          locationCode: item.locationCode || '',
+          locationName: item.locationName || '',
+          parentId: item.parentId || null,
+          levelCode: item.levelCode || '',
+          status: item.status || '1',
+          remark: item.remark || '',
+          createTime:  item.createTime || '',
+          createUserId:  item.createUserId || '',
+          lastModUserId:  item.lastModUserId || '',
+          lastModTime:  item.lastModTime || ''
+        }
+      })
+    },
+    /** 查询位置列表 */
+    getList() {
+      this.loading = true
+      listLocation(this.queryParams).then(res => {
+        if (res.code === API_SUCCESS_CODE) {
+          // 转换API返回数据结构为驼峰命名
+          this.locationList = this.convertSnakeToCamel(res.data.data)
+          this.total = res.data.total
+        } else {
+          this.$message.error(res.msg || '获取位置列表失败')
+        }
+        this.loading = false
+      }).catch(error => {
+        console.error('获取位置列表失败', error)
+        this.$message.error('系统错误，获取位置列表失败')
+        this.loading = false
+      })
+    },
+    /** 节点单击事件 */
+    handleNodeClick(data) {
+      this.queryParams.parentId = data.id
+      // 使用新的获取子位置API
+      this.loading = true
+      getChildLocations(data.id, {
+        pageNum: this.queryParams.pageNum,
+        pageSize: this.queryParams.pageSize
+      }).then(res => {
+        if (res.code === API_SUCCESS_CODE) {
+          this.locationList = this.convertSnakeToCamel(res.data.data)
+          this.total = res.data.total
+        } else {
+          this.$message.error(res.msg || '获取子位置列表失败')
+        }
+        this.loading = false
+      }).catch(error => {
+        console.error('获取子位置列表失败', error)
+        this.$message.error('系统错误，获取子位置列表失败')
+        this.loading = false
+      })
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.queryParams.parentId = undefined
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        locationCode: undefined,
+        locationName: undefined,
+        status: undefined,
+        parentId: undefined
+      }
+      this.getList()
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.dialogTitle = '新增位置'
+      this.form = {
+        locationCode: '',
+        locationName: '',
+        parentId: this.queryParams.parentId || '', // 如果当前有选中节点，则默认为父节点
+        levelCode: '',
+        status: '1',
+        remark: '',
+        createUserId: this.$store.getters.userId || ''
+      }
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        if (this.$refs.form) {
+          this.$refs.form.clearValidate()
+        }
+      })
+    },
+    /** 修改按钮操作 */
+    handleEdit(row) {
+      const id = row.id
+      getLocation(id).then(res => {
+        if (res.code === API_SUCCESS_CODE) {
+          // 将API响应数据映射到表单字段，使用驼峰命名
+          this.form = {
+            id: res.data.id,
+            locationCode: res.data.locationCode,
+            locationName: res.data.locationCode,
+            parentId: res.data.parentId || '',
+            levelCode: res.data.levelCode || '',
+            status: res.data.status,
+            remark: res.data.remark,
+            // 添加最后修改人
+            lastModUserId: this.$store.getters.userId || ''
+          }
+          
+          this.dialogTitle = '编辑位置'
+          this.dialogVisible = true
+          // 重置表单验证
+          this.$nextTick(() => {
+            if (this.$refs.form) {
+              this.$refs.form.clearValidate()
+            }
+          })
+        } else {
+          this.$message.error(res.msg || '获取位置详情失败')
+        }
+      }).catch(error => {
+        console.error('获取位置详情失败', error)
+        this.$message.error('系统错误，获取位置详情失败')
+      })
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          // A. 构建提交数据，映射表单字段到API字段
+          const submitData = {
+            id: this.form.id,
+            locationCode: this.form.locationCode,
+            locationName: this.form.locationName,
+            parentId: this.form.parentId,
+            levelCode: this.form.levelCode,
+            status: this.form.status,
+            remark: this.form.remark
+          }
+          
+          // B. 添加创建/修改用户信息
+          if (this.form.id) {
+            submitData.lastModUserId = this.form.lastModUserId || this.$store.getters.userId || ''
+          } else {
+            submitData.createUserId = this.form.createUserId || this.$store.getters.userId || ''
+          }
+          
+          const method = this.form.id ? updateLocation : addLocation
+          method(submitData).then(res => {
+            if (res.code === API_SUCCESS_CODE) {
+              this.$message.success('操作成功')
+              this.dialogVisible = false
+              
+              // 重新获取树形结构，确保更新多级结构
+              this.getTree()
+              
+              // 如果是新增子位置，更新当前列表
+              if (this.queryParams.parentId && !this.form.id) {
+                this.handleNodeClick({ id: this.queryParams.parentId })
+              } else {
+                this.getList()
+              }
+            } else {
+              this.$message.error(res.msg || '操作失败')
+            }
+          }).catch(error => {
+            console.error('提交表单失败', error)
+            this.$message.error('系统错误，提交失败')
+          })
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$confirm('是否确认删除该位置?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 未被使用，执行删除操作
+        const lastModUserId = this.$store.getters.userId || ''
+        delLocation(row.id, lastModUserId).then(res => {
+          if (res.code === API_SUCCESS_CODE) {
+            this.$message.success('删除成功')
+            // 重新获取树形结构，确保更新多级结构
+            this.getTree()
+            this.getList()
+          } else {
+            this.$message.error(res.msg || '删除失败')
+          }
+        }).catch(error => {
+          console.error('删除操作失败', error)
+          this.$message.error('系统错误，删除失败')
+        })
+      }).catch(() => {})
+    },
+    /** 状态修改按钮操作 */
+    handleStatusChange(row) {
+      const action = row.status === '1' ? '禁用' : '启用'
+      this.$confirm(`是否确认${action}该位置?`, '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 获取当前用户ID
+        const lastModUserId = this.$store.getters.userId || ''
+        const method = row.status === '1' ? disableLocation : enableLocation
+        method(row.id, lastModUserId).then(res => {
+          if (res.code === API_SUCCESS_CODE) {
+            this.$message.success(`${action}成功`)
+            // 状态变更后，可能会影响树的显示，所以也需要刷新树
+            this.getTree()
+            this.getList()
+          } else {
+            this.$message.error(res.msg || `${action}失败`)
+          }
+        }).catch(error => {
+          console.error(`${action}操作失败`, error)
+          this.$message.error(`系统错误，${action}失败`)
+        })
+      }).catch(() => {})
+    },
+    /** 分页大小改变 */
+    handleSizeChange(val) {
+      this.queryParams.pageSize = val
+      this.getList()
+    },
+    /** 分页页码改变 */
+    handleCurrentChange(val) {
+      this.queryParams.pageNum = val
+      this.getList()
+    },
+    /** 获取上级位置名称 */
+    getParentName(parentId) {
+      if (!parentId) return '无';
+      
+      // 先在树形数据中查找
+      const findParentInTree = (tree, id) => {
+        for (const node of tree) {
+          if (node.id === id) {
+            return node.locationCode + '-' + node.locationName;
+          }
+          if (node.children && node.children.length > 0) {
+            const found = findParentInTree(node.children, id);
+            if (found) return found;
+          }
+        }
+        return null;
+      };
+      
+      const parentName = findParentInTree(this.locationTree, parentId);
+      if (parentName) return parentName;
+      
+      // 如果在树中没找到，可能在列表数据中
+      const parent = this.locationList.find(item => item.id === parentId);
+      return parent ? (parent.locationCode + '-' + parent.locationName) : '未知';
+    },
+    /** 多选选中项改变 */
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    /** 批量删除按钮操作 */
+    handleBatchDelete() {
+      if (this.multipleSelection.length === 0) {
+        this.$message.warning('请至少选择一个位置')
+        return
+      }
+      
+      this.$confirm('是否确认删除选中的位置?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 获取选中的位置ID列表
+        const selectedIds = this.multipleSelection.map(item => item.id)
+        // 获取当前用户ID
+        const lastModUserId = this.$store.getters.userId || ''
+        
+        // 执行批量删除操作
+        this.loading = true
+        delLocationBatch(selectedIds, lastModUserId).then(res => {
+          if (res.code === API_SUCCESS_CODE) {
+            this.$message.success('批量删除成功')
+            // 重新获取树形结构，确保更新多级结构
+            this.getTree()
+            this.getList()
+          } else {
+            this.$message.error(res.msg || '批量删除失败')
+          }
+          this.loading = false
+        }).catch(error => {
+          console.error('批量删除操作失败', error)
+          this.$message.error('系统错误，批量删除失败')
+          this.loading = false
+        })
+      }).catch(() => {})
+    },
+    /** 展开所有节点 */
+    expandAll() {
+      const allKeys = this.getExpandedKeys(this.locationTree)
+      this.defaultExpandedKeys = allKeys
+      this.$nextTick(() => {
+        if (this.$refs.locationTree) {
+          this.$refs.locationTree.$forceUpdate()
+        }
+      })
+    },
+    /** 收起所有节点 */
+    collapseAll() {
+      this.defaultExpandedKeys = []
+      this.$nextTick(() => {
+        if (this.$refs.locationTree) {
+          this.$refs.locationTree.$forceUpdate()
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  .tree-container {
+    background-color: #fff;
+    padding: 15px;
+    margin-bottom: 20px;
+    border-radius: 4px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+    height: calc(100vh - 140px);
+    overflow-y: auto;
+  }
+  
+  .tree-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 5px;
+  }
+  
+  .tree-title {
+    font-size: 15px;
+    font-weight: 500;
+    color: #303133;
+  }
+  
+  .tree-actions {
+    display: flex;
+    gap: 8px;
+  }
+  
+  .tree-divider {
+    margin: 5px 0 15px;
+  }
+
+  .box-card {
+    margin-bottom: 20px;
+  }
+
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+  }
+  
+  .node-count {
+    font-size: 12px;
+    color: #909399;
+    margin-left: 5px;
+  }
+
+  .pagination {
+    margin-top: 15px;
+    text-align: right;
+  }
+
+  /* 让所有输入框和下拉框保持一致宽度 */
+  .el-input, .el-select, .el-textarea {
+    width: 100%;
+  }
+
+  /* 确保所有表单元素的高度和边距一致 */
+  ::v-deep .el-form-item {
+    margin-bottom: 18px;
+
+    .el-form-item__content {
+      line-height: 36px;
+    }
+  }
+
+  /* 确保el-select和普通输入框宽度一致 */
+  ::v-deep .el-select, ::v-deep .el-tree-select {
+    width: 100%;
+  }
+
+  /* 树形选择器样式优化 */
+  ::v-deep .el-tree-select .el-select-dropdown__item {
+    height: auto;
+    padding: 0;
+  }
+  
+  /* 树节点样式优化 */
+  ::v-deep .el-tree-node__content {
+    height: 32px;
+  }
+  
+  ::v-deep .el-tree-node__expand-icon {
+    padding: 6px;
+  }
+}
+</style> 
\ 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
new file mode 100644
index 0000000..6ed1402
--- /dev/null
+++ b/pc/src/views/finance/billList/components/AddBill.vue
@@ -0,0 +1,977 @@
+<template>
+  <div class="add-bill-container">
+    <el-tabs v-model="activeTab">
+      <el-tab-pane label="收费模式" name="chargeMode">
+        <el-form ref="chargeModeForm" :model="billForm" :rules="chargeModeRules" label-width="120px">
+          <el-form-item label="含税规则" prop="taxInclusiveRule" required>
+            <el-radio-group v-model="billForm.taxInclusiveRule">
+              <el-radio label="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>
+            <el-input-number v-model="billForm.taxRate" :min="0" :max="100" :precision="2" style="width: 200px"></el-input-number>
+          </el-form-item>
+          <el-form-item label="特殊账单类型" prop="specialBillType" required>
+            <el-radio-group v-model="billForm.specialBillType">
+              <el-radio label="1" value="1">正常</el-radio>
+              <el-radio label="2" value="2">罚金</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <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="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="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>
+      
+      <el-tab-pane label="账单信息" name="billInfo">
+        <el-form ref="formExtension" :model="formExtension" :rules="formExtensionRules" label-width="120px" style="margin-bottom: 20px;">
+          <el-form-item label="费用类型" prop="feeTypeSelected" required>
+            <el-cascader v-model="formExtension.feeTypeSelected" :options="feeTypeOptions" :props="{
+                label: 'label',
+                value: 'id',
+                children: 'children',
+                expandTrigger: 'hover'
+              }" 
+              clearable filterable placeholder="请选择费用类型" @change="handleFeeTypeChange" style="width: 400px">
+            </el-cascader>
+          </el-form-item>
+          <el-form-item label="计费周期" prop="billingPeriod" required>
+            <el-date-picker
+              v-model="formExtension.billingPeriod"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              value-format="yyyy-MM-dd"
+              @change="handleBillingPeriodChange"
+              style="width: 400px">
+            </el-date-picker>
+          </el-form-item>
+        </el-form>
+        <el-form ref="billInfoForm" :model="billForm" :rules="billInfoRules" label-width="120px">
+          <el-form-item label="关联合同" prop="contractId">
+            <el-select v-model="billForm.contractId" placeholder="请选择关联合同" filterable remote clearable
+              :remote-method="searchContracts" style="width: 400px">
+              <el-option v-for="item in contractOptions" :key="item.contractId"
+                :label="item.contractNumber + ' - ' + item.customerName" :value="item.contractId">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="付款方" prop="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">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="币种" prop="currCode" required>
+            <el-input v-model="billForm.currCode" disabled style="width: 400px"></el-input>
+          </el-form-item>
+          <el-form-item label="应收金额" prop="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="pybDt" required>
+            <el-date-picker
+              v-model="billForm.pybDt"
+              type="date"
+              placeholder="选择日期"
+              value-format="yyyy-MM-dd"
+              style="width: 400px">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="所属公司" prop="companyId" required>
+            <el-select v-model="billForm.companyId" placeholder="请选择所属公司" filterable @change="handleCompanyChange" style="width: 400px">
+              <el-option v-for="item in companyOptions" :key="item.id"
+                :label="item.name" :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="收支账户" prop="accountId" required>
+            <el-select v-model="billForm.accountId" placeholder="请选择收支账户" filterable style="width: 400px">
+              <el-option v-for="item in accountOptions" :key="item.id"
+                :label="item.name" :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="账单备注" prop="billRemark">
+            <el-input type="textarea" v-model="billForm.billRemark" placeholder="请输入账单备注" rows="3" style="width: 400px"></el-input>
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+      
+      <el-tab-pane label="房源信息" name="roomInfo">
+        <el-tree 
+          ref="roomTree"
+          :data="roomTreeData"
+          show-checkbox
+          node-key="id"
+          :props="{ label: 'label', children: 'children' }"
+          :default-checked-keys="selectedRoomIds"
+          @check="handleRoomTreeCheck">
+        </el-tree>
+      </el-tab-pane>
+      
+      <el-tab-pane label="账单附件" name="attachment">
+        <el-upload
+          class="upload-area"
+          action="#"
+          :http-request="uploadFile"
+          :file-list="fileList"
+          :before-upload="beforeUpload"
+          multiple
+          :limit="10">
+          <el-button type="primary">添加附件</el-button>
+          <div slot="tip" class="el-upload__tip">只能上传jpg/png/pdf文件，且不超过5MB</div>
+        </el-upload>
+        
+        <el-table v-loading="attachmentLoading" :data="fileList" border style="width: 100%; margin-top: 20px">
+          <el-table-column prop="name" label="文件名" min-width="200" show-overflow-tooltip></el-table-column>
+          <el-table-column prop="operatorName" label="操作人" width="150"></el-table-column>
+          <el-table-column prop="operateTime" label="操作时间" width="180"></el-table-column>
+          <el-table-column label="操作" width="200" align="center">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" @click="previewFile(scope.row)">预览</el-button>
+              <el-button size="mini" type="text" 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, uploadBillAttachment, addBill } from '@/api/finance'
+
+export default {
+  name: 'AddBill',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      activeTab: 'chargeMode',
+      // 账单表单数据
+      billForm: {
+        contractId: '',
+        contractNumber: '',
+        paysdId: '',
+        paysdName: '',
+        payeeContact: '',
+        feeCategoryId: '',
+        feeTypeId: '',
+        feTpName: '',
+        currCode: '156', // 默认人民币
+        chggBgnDt: '',
+        chggEndDt: '',
+        accigRcvAmt: 0,
+        taxInclusiveRule: '1',
+        taxRate: 0,
+        pybDt: '',
+        specialBillType: '1',
+        ovdueStartDays: 0,
+        ovdueIntRate: 0,
+        ovdueLimitRate: 0,
+        companyId: '',
+        corNm: '',
+        accountId: '',
+        billRemark: '',
+        roomIds: []
+      },
+      // 表单验证规则
+      chargeModeRules: {
+        taxInclusiveRule: [
+          { required: true, message: '请选择含税规则', trigger: 'change' }
+        ],
+        taxRate: [
+          { required: true, message: '请输入税率', trigger: 'blur' }
+        ],
+        specialBillType: [
+          { required: true, message: '请选择特殊账单类型', trigger: 'change' }
+        ]
+      },
+      billInfoRules: {
+        paysdId: [
+          { required: true, message: '请选择付款方', trigger: 'change' }
+        ],
+        companyId: [
+          { required: true, message: '请选择所属公司', trigger: 'change' }
+        ],
+        accountId: [
+          { required: true, message: '请选择收支账户', trigger: 'change' }
+        ],
+        accigRcvAmt: [
+          { required: true, message: '请输入应收金额', trigger: 'blur' }
+        ],
+        pybDt: [
+          { required: true, message: '请选择应收日期', trigger: 'change' }
+        ]
+      },
+      // 额外表单数据和验证规则
+      formExtension: {
+        feeTypeSelected: null,
+        billingPeriod: []
+      },
+      formExtensionRules: {
+        feeTypeSelected: [
+          { required: true, message: '请选择费用类型', trigger: 'change' }
+        ],
+        billingPeriod: [
+          { type: 'array', required: true, message: '请选择计费周期', trigger: 'change' }
+        ]
+      },
+      // 选择项相关
+      contractOptions: [],
+      payeeOptions: [],
+      feeTypeOptions: [],
+      companyOptions: [],
+      accountOptions: [],
+      roomTreeData: [],
+      selectedRoomIds: [],
+      // 附件上传相关
+      fileList: [],
+      attachmentLoading: false,
+      
+      // 预览相关
+      previewDialogVisible: false,
+      previewLoading: false,
+      previewUrl: '',
+      previewBlob: null,
+      currentPreviewName: '',
+      isPdf: false,
+      isImage: false,
+    }
+  },
+  created() {
+    this.getFeeTypeOptions()
+    this.getCompanyOptions()
+    this.getRoomTreeData()
+  },
+  methods: {
+    // 获取费用类型选项
+    getFeeTypeOptions() {
+      getFeeTypeTree({ level: 2 }).then(response => {
+        if (response.code === '0000000000000000') {
+          // 数据预处理
+          this.feeTypeOptions = this.processTreeData(response.data)
+        }
+      })
+    },
+    
+    // 处理费用类型树形数据
+    processTreeData(data) {
+      if (!data || !Array.isArray(data) || data.length === 0) {
+        console.warn('无费用类型数据')
+        return []
+      }
+
+      return data.map(category => {
+        // 确保id字段存在
+        const categoryId = category.id || Math.random().toString(36).substr(2, 9)
+
+        // 处理子节点
+        let children = []
+        if (category.financeFeeTypes && Array.isArray(category.financeFeeTypes)) {
+          children = category.financeFeeTypes.map(feeType => {
+            return {
+              id: feeType.id || Math.random().toString(36).substr(2, 9),
+              label: feeType.feTpName || '未命名费用',
+              categoryId: categoryId,
+              // 存储原始数据以便后续使用
+              feTpName: feeType.feTpName || '未命名费用',
+              // 确保没有更多的子节点
+              children: null
+            }
+          })
+        }
+
+        return {
+          id: categoryId,
+          label: category.categoryName || '未命名分类',
+          categoryName: category.categoryName || '未命名分类',
+          children: children.length > 0 ? children : null
+        }
+      }).filter(item => item.children && item.children.length > 0)
+    },
+    // 获取公司选项
+    getCompanyOptions() {
+      // 模拟数据，实际应调用API
+      this.companyOptions = [
+        { id: 123, name: '智慧园区物业管理有限公司' }
+      ]
+    },
+    // 获取收支账户选项
+    getAccountOptions(companyId) {
+      // 模拟数据，实际应调用API
+      this.accountOptions = [
+        { id: 1, name: '运营账户-工商银行' },
+        { id: 2, name: '日常账户-建设银行' }
+      ]
+    },
+    // 搜索合同
+    searchContracts(query) {
+      if (query) {
+        // 实际应调用API
+        this.contractOptions = [
+          { contractId: 11, contractNumber: 'HT2023001', customerName: '张三' },
+          { contractId: 22, contractNumber: 'HT2023002', customerName: '李四' }
+        ]
+      } else {
+        this.contractOptions = []
+      }
+    },
+    // 搜索付款方
+    searchPayees(query) {
+      if (query) {
+        // 实际应调用API
+        this.payeeOptions = [
+          { id: '10001', name: '张三', contact: '13812345678' },
+          { id: '10002', name: '李四', contact: '13987654321' }
+        ]
+      } else {
+        this.payeeOptions = []
+      }
+    },
+    // 处理付款方变更
+    handlePayeeChange(paysdId) {
+      const payee = this.payeeOptions.find(item => item.id === paysdId)
+      if (payee) {
+        this.billForm.paysdName = payee.name
+        this.billForm.payeeContact = payee.contact
+        // 触发表单验证更新
+        this.$nextTick(() => {
+          this.$refs.billInfoForm.validateField('paysdId')
+        })
+      }
+    },
+    // 处理费用类型变更
+    handleFeeTypeChange(value) {
+      console.log(value);
+      
+      if (value) {
+        // 查找匹配的费用类型
+        let selectedFeeType = null;
+        let selectedCategory = null;
+        
+        // 在所有分类中查找
+        for (const category of this.feeTypeOptions) {
+          // 先检查是否选中的是分类
+          if (category.id === value) {
+            selectedCategory = category;
+            selectedFeeType = {
+              id: category.id,
+              name: category.label,
+              type: '分类'
+            };
+            break;
+          }
+          // 检查子节点
+          if (category.children && category.children.length > 0) {
+            const found = category.children.find(item => item.id === value[1]);
+            if (found) {
+              selectedCategory = category;
+              selectedFeeType = {
+                id: found.id,
+                name: found.label,
+                categoryName: category.label,
+                type: '费用类型'
+              };
+              break;
+            }
+          }
+        }
+
+        if (selectedFeeType) {
+          // 设置费用分类ID和费用类型ID
+          if (selectedFeeType.type === '分类') {
+            this.billForm.feeCategoryId = selectedFeeType.id;
+            this.billForm.feeTypeId = '';
+            this.billForm.feTpName = selectedFeeType.name;
+          } else {
+            this.billForm.feeCategoryId = selectedCategory.id;
+            this.billForm.feeTypeId = selectedFeeType.id;
+            this.billForm.feTpName = selectedFeeType.name;
+          }
+        }
+      } else {
+        // 清空选择
+        this.billForm.feeCategoryId = '';
+        this.billForm.feeTypeId = '';
+        this.billForm.feTpName = '';
+      }
+    },
+    // 处理公司变更
+    handleCompanyChange(companyId) {
+      const company = this.companyOptions.find(item => item.id === companyId)
+      if (company) {
+        this.billForm.corNm = company.name
+        // 触发表单验证更新
+        this.$nextTick(() => {
+          this.$refs.billInfoForm.validateField('companyId')
+        })
+      }
+      // 重新获取收支账户
+      this.billForm.accountId = ''
+      this.getAccountOptions(companyId)
+    },
+    // 处理计费周期变更
+    handleBillingPeriodChange(val) {
+      if (val && val.length === 2) {
+        this.billForm.chggBgnDt = val[0]
+        this.billForm.chggEndDt = val[1]
+      } else {
+        this.billForm.chggBgnDt = ''
+        this.billForm.chggEndDt = ''
+      }
+    },
+    
+    // 获取房源树形数据
+    getRoomTreeData() {
+      // 模拟房源数据，与收费标准页面相同格式
+      const roomData = [
+        {
+          "id": "3",
+          "projectName": "智慧产业园",
+          "projectType": "产业园区",
+          "buildings": []
+        },
+        {
+          "id": "8",
+          "projectName": "测试-1",
+          "projectType": "产业园区",
+          "buildings": [
+            {
+              "id": 7,
+              "buildingName": "4121",
+              "buildingCode": "1234",
+              "floors": [
+                {
+                  "id": 7,
+                  "floorName": "123",
+                  "floorNumber": 11,
+                  "rooms": [
+                    {
+                      "id": 31,
+                      "roomNumber": "504",
+                      "roomType": null,
+                      "roomStatus": "1",
+                      "buildingArea": 122.00,
+                      "rentalArea": 20.99
+                    },
+                    {
+                      "id": 30,
+                      "roomNumber": "504",
+                      "roomType": null,
+                      "roomStatus": "1",
+                      "buildingArea": 122.00,
+                      "rentalArea": 20.99
+                    },
+                    {
+                      "id": 32,
+                      "roomNumber": "505",
+                      "roomType": null,
+                      "roomStatus": "1",
+                      "buildingArea": 122.00,
+                      "rentalArea": 20.99
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ];
+
+      // 转换为树形结构
+      this.roomTreeData = roomData.map(project => {
+        return {
+          id: project.id,
+          label: project.projectName,
+          children: project.buildings.map(building => {
+            return {
+              id: building.id,
+              label: building.buildingName,
+              children: building.floors.map(floor => {
+                return {
+                  id: floor.id,
+                  label: floor.floorName,
+                  children: floor.rooms.map(room => {
+                    return {
+                      id: room.id,
+                      label: `${room.roomNumber}（${room.rentalArea}㎡）`,
+                      isRoom: true,
+                      // 保存原始数据供选择
+                      roomData: room
+                    }
+                  })
+                }
+              })
+            }
+          })
+        }
+      });
+    },
+    
+    // 处理房源树选择
+    handleRoomTreeCheck(node, data) {
+      // 只选择叶子节点（房间）
+      const checkedNodes = this.$refs.roomTree.getCheckedNodes(true)
+      // 过滤出所有房间节点
+      const roomNodes = checkedNodes.filter(node => node.isRoom)
+      
+      // 更新选中的房间ID列表
+      this.selectedRoomIds = roomNodes.map(node => node.id)
+      
+      // 创建一个Map用于收集项目信息
+      const projectMap = new Map()
+      
+      // 处理每个房间节点
+      roomNodes.forEach(roomNode => {
+        // 查找节点路径
+        let currentNode = this.$refs.roomTree.getNode(roomNode.id)
+        let roomInfo = roomNode.roomData
+        let floorNode, buildingNode, projectNode
+        
+        // 向上遍历找到楼层、楼宇和项目节点
+        while (currentNode && currentNode.parent) {
+          const parent = currentNode.parent
+          if (parent.level === 3) { // 楼层级别
+            floorNode = parent.data
+          } else if (parent.level === 2) { // 楼宇级别
+            buildingNode = parent.data
+          } else if (parent.level === 1) { // 项目级别
+            projectNode = parent.data
+          }
+          currentNode = parent
+        }
+        
+        // 只有完整路径的房间才处理
+        if (roomInfo && floorNode && buildingNode && projectNode) {
+          // 确认项目是否已在Map中
+          if (!projectMap.has(projectNode.id)) {
+            projectMap.set(projectNode.id, {
+              id: projectNode.id,
+              projectName: projectNode.label,
+              projectType: '产业园区', // 如果有projectType属性，应该使用projectNode中的值
+              buildings: []
+            })
+          }
+
+          // 获取当前项目
+          const project = projectMap.get(projectNode.id)
+
+          // 查找楼宇
+          let building = project.buildings.find(b => b.id === buildingNode.id)
+          if (!building) {
+            building = {
+              id: buildingNode.id,
+              buildingName: buildingNode.label,
+              buildingCode: '', // 如果有buildingCode属性，应该使用buildingNode中的值
+              floors: []
+            }
+            project.buildings.push(building)
+          }
+
+          // 查找楼层
+          let floor = building.floors.find(f => f.id === floorNode.id)
+          if (!floor) {
+            floor = {
+              id: floorNode.id,
+              floorName: floorNode.label,
+              floorNumber: 0, // 如果有floorNumber属性，应该使用floorNode中的值
+              rooms: []
+            }
+            building.floors.push(floor)
+          }
+
+          // 添加房间
+          const room = {
+            id: roomInfo.id,
+            roomNumber: roomInfo.roomNumber || roomNode.label.split('（')[0],
+            roomType: roomInfo.roomType || '',
+            roomStatus: roomInfo.roomStatus || '1',
+            buildingArea: roomInfo.buildingArea || 0,
+            rentalArea: roomInfo.rentalArea || 0
+          }
+
+          // 检查该房间是否已经存在
+          const roomExists = floor.rooms.some(r => r.id === room.id)
+          if (!roomExists) {
+            floor.rooms.push(room)
+          }
+        }
+      })
+
+      // 将Map转换为数组
+      this.billForm.roomIds = Array.from(projectMap.values())
+    },
+    // 上传文件前检查
+    beforeUpload(file) {
+      const isValidType = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'application/pdf'
+      const isLt5M = file.size / 1024 / 1024 < 5
+      
+      if (!isValidType) {
+        this.$message.error('只能上传JPG/PNG/PDF格式的文件!')
+      }
+      
+      if (!isLt5M) {
+        this.$message.error('文件大小不能超过5MB!')
+      }
+      
+      return isValidType && isLt5M
+    },
+    // 自定义上传文件
+    uploadFile(options) {
+      this.attachmentLoading = true
+      const file = options.file
+      
+      // 创建临时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) {
+      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) {
+      const link = document.createElement('a')
+      link.href = file.url
+      link.download = file.name
+      link.click()
+    },
+
+    // 删除文件
+    deleteFile(index) {
+      this.$confirm('确认删除该附件?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.fileList.splice(index, 1)
+        this.$message.success('删除成功')
+      }).catch(() => {})
+    },
+    // 获取表单数据
+    getFormData() {
+      // 确保billForm中包含来自formExtension的数据
+      if (this.formExtension.feeTypeSelected) {
+        // 费用类型已经在handleFeeTypeChange中设置
+      }
+      
+      if (this.formExtension.billingPeriod && this.formExtension.billingPeriod.length === 2) {
+        this.billForm.chggBgnDt = this.formExtension.billingPeriod[0]
+        this.billForm.chggEndDt = this.formExtension.billingPeriod[1]
+      }
+      
+      return this.billForm
+    },
+    // 表单验证
+    validateForm() {
+      return new Promise(resolve => {
+        // 验证收费模式表单
+        this.$refs.chargeModeForm.validate(valid1 => {
+          if (!valid1) {
+            this.activeTab = 'chargeMode'
+            resolve(false)
+            return
+          }
+          
+          // 验证费用类型和计费周期表单
+          this.$refs.formExtension.validate(valid2 => {
+            if (!valid2) {
+              this.activeTab = 'billInfo'
+              resolve(false)
+              return
+            }
+            
+            // 验证账单信息表单
+            this.$refs.billInfoForm.validate(valid3 => {
+              if (!valid3) {
+                this.activeTab = 'billInfo'
+                resolve(false)
+                return
+              }
+              
+              // 验证是否选择了房源
+              if (this.billForm.roomIds.length === 0) {
+                this.$message.warning('请至少选择一个房源')
+                this.activeTab = 'roomInfo'
+                resolve(false)
+                return
+              }
+              
+              resolve(true)
+            })
+          })
+        })
+      })
+    },
+    // 重置表单
+    resetForm() {
+      // 重置表单验证状态
+      if (this.$refs.chargeModeForm) {
+        this.$refs.chargeModeForm.resetFields()
+      }
+      if (this.$refs.billInfoForm) {
+        this.$refs.billInfoForm.resetFields()
+      }
+      if (this.$refs.formExtension) {
+        this.$refs.formExtension.resetFields()
+      }
+      
+      // 切换到第一个标签
+      this.activeTab = 'chargeMode'
+      
+      // 重置表单数据
+      this.billForm = {
+        contractId: '',
+        contractNumber: '',
+        paysdId: '',
+        paysdName: '',
+        payeeContact: '',
+        feeCategoryId: '',
+        feeTypeId: '',
+        feTpName: '',
+        currCode: '156', // 默认人民币
+        chggBgnDt: '',
+        chggEndDt: '',
+        accigRcvAmt: 0,
+        taxInclusiveRule: '1',
+        taxRate: 0,
+        pybDt: '',
+        specialBillType: '1',
+        ovdueStartDays: 0,
+        ovdueIntRate: 0,
+        ovdueLimitRate: 0,
+        companyId: '',
+        corNm: '',
+        accountId: '',
+        billRemark: '',
+        roomIds: []
+      }
+      
+      // 重置扩展表单数据
+      this.formExtension = {
+        feeTypeSelected: null,
+        billingPeriod: []
+      }
+      
+      // 重置房源选择
+      this.selectedRoomIds = []
+      if (this.$refs.roomTree) {
+        this.$refs.roomTree.setCheckedKeys([])
+      }
+      
+      // 重置文件上传列表
+      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>
+
+<style lang="scss" scoped>
+.add-bill-container {
+  padding: 20px;
+  
+  .upload-area {
+    margin: 20px 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/billList/components/BillDetail.vue b/pc/src/views/finance/billList/components/BillDetail.vue
new file mode 100644
index 0000000..12b06dc
--- /dev/null
+++ b/pc/src/views/finance/billList/components/BillDetail.vue
@@ -0,0 +1,2720 @@
+<template>
+  <div class="bill-detail-container">
+    <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>
+        <el-button 
+          type="success" 
+          @click="openSettleLateFeeDialog" 
+          :disabled="!canSettleLateFee" 
+          style="margin-left: 10px;">
+          结算滞纳金
+        </el-button>
+        <el-button 
+          type="danger" 
+          @click="openCloseBillDialog" 
+          :disabled="!canCloseBill" 
+          style="margin-left: 10px;">
+          账单关闭
+        </el-button>
+      </div>
+    </div>
+    <el-tabs v-model="activeTab" @tab-click="handleTabChange">
+      <el-tab-pane label="账单基本信息" name="basicInfo">
+        <el-descriptions :column="3" border size="medium">
+          <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.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.feTpName }}</el-descriptions-item>
+          <el-descriptions-item label="计费周期">
+            {{ billDetail.chggBgnDt }} 至 {{ billDetail.chggEndDt }}
+          </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) }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="逾期状态">
+            <el-tag :type="billDetail.overdueStatus === '1' ? 'danger' : 'success'">
+              {{ billDetail.overdueStatus === '1' ? '逾期' : '正常' }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="滞纳金状态">
+            <el-tag :type="getLateFeeStatusType(billDetail.ovdueStatus)">
+              {{ getLateFeeStatusName(billDetail.ovdueStatus) }}
+            </el-tag>
+          </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.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.paybleTaxAmount) }}</el-descriptions-item>
+          <el-descriptions-item label="含税规则">{{ billDetail.taxInclusiveRule == '1'?'含税':billDetail.taxInclusiveRule == '2'?'不含税':''  }}</el-descriptions-item>
+          <el-descriptions-item label="特殊账单类型">{{ billDetail.specialBillType == '1'? '正常' : billDetail.specialBillType == '2'? '罚金':''}}</el-descriptions-item>
+          <el-descriptions-item label="开据状态">
+            <el-tag :type="billDetail.receiptStatus === '1' ? 'success' : 'info'">
+              {{ billDetail.receiptStatus === '1' ? '已开据' : '未开据' }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="所属公司">{{ billDetail.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="billTransaction">
+        <el-table :data="transactionList" v-loading="transactionLoading" border style="width: 100%">
+          <el-table-column label="流水类型" prop="dcFlagCode" min-width="100">
+            <template slot-scope="scope">
+              <el-tag :type="scope.row.dcFlagCode === '1' ? 'success' : 'warning'">
+                {{ scope.row.dcFlagCode === '1' ? '贷(收入)' : '借(支出)' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="对方单位名称" prop="unitName" min-width="180" show-overflow-tooltip></el-table-column>
+          <el-table-column label="费用类型" prop="feeTypeName" min-width="150" show-overflow-tooltip></el-table-column>
+          <el-table-column label="入账日期" prop="inaccDate" min-width="120" align="center"></el-table-column>
+          <el-table-column label="发生额" prop="occuAmt" min-width="120" align="right">
+            <template slot-scope="scope">
+              {{ formatAmount(scope.row.occuAmt) }}
+            </template>
+          </el-table-column>
+          <el-table-column label="退款金额" prop="refundAmt" min-width="120" align="right">
+            <template slot-scope="scope">
+              {{ formatAmount(scope.row.refundAmt) }}
+            </template>
+          </el-table-column>
+          <el-table-column label="支付渠道" prop="payChannel" min-width="120">
+            <template slot-scope="scope">
+              {{ getPayChannelName(scope.row.payChannel) }}
+            </template>
+          </el-table-column>
+          <el-table-column label="账单明细类型" prop="billDetailType" min-width="120">
+            <template slot-scope="scope">
+              {{ scope.row.billDetailType === '1' ? '原账单' : '滞纳金' }}
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="120" align="center" fixed="right">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="text"
+                @click="viewTransactionAttachments(scope.row)">
+                附件详情
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        
+        <div v-if="transactionList.length === 0" class="empty-data">
+          <el-empty description="暂无收支流水记录"></el-empty>
+        </div>
+        
+        <div class="pagination-container" v-if="transactionTotal > 0">
+          <el-pagination
+            background
+            @size-change="handleTransactionSizeChange"
+            @current-change="handleTransactionCurrentChange"
+            :current-page="transactionQuery.pageNum"
+            :page-sizes="[5, 10, 20, 50]"
+            :page-size="transactionQuery.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="transactionTotal">
+          </el-pagination>
+        </div>
+      </el-tab-pane>
+      
+      <!-- 收据记录标签页 -->
+      <el-tab-pane label="收据记录" name="receiptRecords">
+        <el-table :data="receiptList" v-loading="receiptLoading" border style="width: 100%">
+          <el-table-column prop="receiptNo" label="收据编号" min-width="120" show-overflow-tooltip></el-table-column>
+          <el-table-column prop="receiptDate" label="开据日期" min-width="120" align="center"></el-table-column>
+          <el-table-column prop="paymentMethodsDesc" label="支付方式" min-width="150" show-overflow-tooltip></el-table-column>
+          <el-table-column prop="feeType" 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.receiptAmount) }}
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" min-width="100">
+            <template slot-scope="scope">
+              <el-tag :type="getClearStatusType(scope.row.receiptStatus)">
+                {{ scope.row.receiptStatusDesc }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="createBy" label="开据人" min-width="120" 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="viewReceiptDetail(scope.row)">
+                详情
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        
+        <div v-if="receiptList.length === 0" class="empty-data">
+          <el-empty description="暂无收据记录"></el-empty>
+        </div>
+        
+        <div class="pagination-container" v-if="receiptTotal > 0">
+          <el-pagination
+            background
+            @size-change="handleReceiptSizeChange"
+            @current-change="handleReceiptCurrentChange"
+            :current-page="receiptQuery.pageNum"
+            :page-sizes="[5, 10, 20, 50]"
+            :page-size="receiptQuery.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="receiptTotal">
+          </el-pagination>
+        </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>
+          <el-table-column prop="floorName" label="楼层" min-width="100"></el-table-column>
+          <el-table-column prop="buildingName" label="楼宇" min-width="120"></el-table-column>
+          <el-table-column prop="projectName" label="项目" min-width="150"></el-table-column>
+          <el-table-column prop="rentArea" label="计租面积(㎡)" min-width="120" align="right"></el-table-column>
+        </el-table>
+        <div v-if="roomList.length === 0" class="empty-data">
+          <el-empty description="暂无房源信息"></el-empty>
+        </div>
+      </el-tab-pane>
+      
+      <el-tab-pane label="附件信息" name="attachment">
+        <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>
+          <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.row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div v-if="attachmentList.length === 0" class="empty-data">
+          <el-empty description="暂无附件信息"></el-empty>
+        </div>
+      </el-tab-pane>
+      
+      <el-tab-pane label="操作记录" name="operationLog">
+        <el-table :data="operationList" border style="width: 100%">
+          <el-table-column prop="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>
+    
+    <!-- 结算滞纳金对话框 -->
+    <el-dialog title="结算滞纳金" :visible.sync="settleLateFeeDialogVisible" width="800px" append-to-body @close="resetSettleLateFeeForm">
+      <el-form ref="settleLateFeeForm" :model="settleLateFeeForm" :rules="settleLateFeeRules" label-width="120px" class="settle-fee-form">
+        <!-- 基本信息部分 -->
+        <div class="section-header">基本信息</div>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="借贷标" prop="dcFlagCode">
+              <el-input value="贷(收入)" disabled></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="币种" prop="currCode">
+              <el-input value="人民币" disabled></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="发生额" prop="occuAmt">
+              <el-input-number 
+                v-model="settleLateFeeForm.occuAmt" 
+                :min="0.01" 
+                :max="billDetail.needAmount || 0" 
+                :precision="2"
+                :step="0.01"
+                style="width: 100%">
+              </el-input-number>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="入账日期" prop="inaccDate">
+              <el-date-picker
+                v-model="settleLateFeeForm.inaccDate"
+                type="date"
+                placeholder="选择日期"
+                value-format="yyyy-MM-dd"
+                style="width: 100%">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="流水账户" prop="accountId">
+              <el-cascader
+                v-model="settleLateFeeForm.accountId"
+                :options="accountOptions"
+                :props="{
+                  expandTrigger: 'hover',
+                  checkStrictly: false,
+                  value: 'id',
+                  label: 'label',
+                  emitPath: false
+                }"
+                placeholder="请选择流水账户"
+                style="width: 100%">
+              </el-cascader>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="凭证号" prop="txVchrNo">
+              <el-input v-model="settleLateFeeForm.txVchrNo" placeholder="请输入凭证号"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        
+        <!-- 对方信息部分 -->
+        <div class="section-header">对方信息</div>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="对方单位名称" prop="unitName">
+              <el-input v-model="settleLateFeeForm.unitName" placeholder="请输入对方单位名称"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="联系人" prop="contactPerson">
+              <el-input v-model="settleLateFeeForm.contactPerson" placeholder="请输入联系人"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="支付方式" prop="payModeName">
+              <el-select v-model="settleLateFeeForm.payModeName" placeholder="请选择支付方式" style="width: 100%">
+                <el-option
+                  v-for="item in paymentMethods"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="开户银行" prop="bankName">
+              <el-input v-model="settleLateFeeForm.bankName" placeholder="请输入开户银行"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="对方账户" prop="counterpartyAccount">
+              <el-input v-model="settleLateFeeForm.counterpartyAccount" placeholder="请输入对方账户"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        
+        <!-- 备注信息部分 -->
+        <div class="section-header">备注信息</div>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="摘要" prop="summ">
+              <el-input v-model="settleLateFeeForm.summ" placeholder="请输入摘要"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model="settleLateFeeForm.remark" type="textarea" placeholder="请输入备注信息" :rows="3"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        
+        <!-- 附件信息部分 -->
+        <div class="section-header">附件信息</div>
+        <el-form-item>
+          <el-upload
+            class="upload-area"
+            action="#"
+            :http-request="uploadSettleLateFeeAttachment"
+            :file-list="settleLateFeeFileList"
+            :before-upload="beforeSettleLateFeeFileUpload"
+            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="settleLateFeeFileList.length > 0" :data="settleLateFeeFileList" 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="previewSettleLateFeeFile(scope.row)">预览</el-button>
+                <el-button size="mini" type="text" class="delete-btn" @click="deleteSettleLateFeeFile(scope.$index)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="settleLateFeeDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitSettleLateFee" :loading="settleLateFeeSubmitting">确 定</el-button>
+      </div>
+    </el-dialog>
+    
+    <!-- 交易附件详情对话框 -->
+    <el-dialog title="交易附件详情" :visible.sync="transactionAttachmentDialogVisible" width="800px" append-to-body>
+      <div class="dialog-header-actions">
+        <el-button type="primary" size="small" @click="uploadDialogVisible = true">
+          <i class="el-icon-plus"></i> 添加附件
+        </el-button>
+      </div>
+      <el-table :data="transactionAttachmentList" border style="width: 100%" v-loading="transactionAttachmentLoading">
+        <el-table-column prop="fileName" label="文件名" min-width="200" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="createUserName" 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="previewTransactionAttachment(scope.row)">预览</el-button>
+            <el-button size="mini" type="text" @click="downloadTransactionAttachment(scope.row)">下载</el-button>
+            <el-button size="mini" type="text" class="delete-btn" @click="deleteTransactionAttachment(scope.$index, scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div v-if="transactionAttachmentList.length === 0" class="empty-data">
+        <el-empty description="暂无附件信息"></el-empty>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="transactionAttachmentDialogVisible = false">关 闭</el-button>
+      </div>
+    </el-dialog>
+    
+    <!-- 附件上传对话框 -->
+    <el-dialog title="上传附件" :visible.sync="uploadDialogVisible" width="500px" append-to-body>
+      <el-upload
+        class="upload-area"
+        action="#"
+        :http-request="uploadTransactionAttachment"
+        :before-upload="beforeTransactionAttachmentUpload"
+        :file-list="uploadFileList"
+        :on-change="handleTransactionAttachmentUpload"
+        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="uploadTransactionAttachment">确 定</el-button>
+      </div>
+    </el-dialog>
+    
+    <!-- 关闭账单对话框 -->
+    <el-dialog title="关闭账单" :visible.sync="closeBillDialogVisible" width="500px" append-to-body>
+      <el-form ref="closeBillForm" :model="closeBillForm" :rules="closeBillRules" label-width="100px">
+        <el-form-item label="关闭原因" prop="closeReason">
+          <el-input 
+            type="textarea" 
+            v-model="closeBillForm.closeReason" 
+            placeholder="请输入关闭账单的原因" 
+            :rows="4"
+            maxlength="200"
+            show-word-limit>
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="closeBillDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="confirmCloseBill" :loading="closeBillSubmitting">确 定</el-button>
+      </div>
+    </el-dialog>
+    
+    <!-- 收据详情对话框 -->
+    <el-dialog title="收据详情" :visible.sync="receiptDetailDialogVisible" width="700px" append-to-body>
+      <div v-loading="receiptDetailLoading">
+        <!-- 收据信息 -->
+        <h4 class="dialog-section-title">收据信息</h4>
+        <el-descriptions :column="2" border>
+          <el-descriptions-item label="收据编号">{{ receiptDetail.receiptNo || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="编号规则">{{ receiptDetail.ruleName || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="开据日期">{{ receiptDetail.receiptDate || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="支付方式">{{ receiptDetail.paymentMethodsDesc || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="费用类型">{{ receiptDetail.feeType || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="费用名称">{{ receiptDetail.feeName || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="开据金额">{{ formatAmount(receiptDetail.receiptAmount) }}</el-descriptions-item>
+          <el-descriptions-item label="收据状态">
+            <el-tag :type="getClearStatusType(receiptDetail.receiptStatus)">
+              {{ receiptDetail.receiptStatusDesc || '-' }}
+            </el-tag>
+          </el-descriptions-item>
+        </el-descriptions>
+        
+        <!-- 交款方信息 -->
+        <h4 class="dialog-section-title">交款方信息</h4>
+        <el-descriptions :column="2" border>
+          <el-descriptions-item label="交款单位">{{ receiptDetail.payerUnit || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="交款人">{{ receiptDetail.payerName || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="地址">{{ receiptDetail.payerAddress || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="电话">{{ receiptDetail.payerPhone || '-' }}</el-descriptions-item>
+        </el-descriptions>
+        
+        <!-- 收款方信息 -->
+        <h4 class="dialog-section-title">收款方信息</h4>
+        <el-descriptions :column="2" border>
+          <el-descriptions-item label="收款单位">{{ receiptDetail.payeeUnitName || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="收款人">{{ receiptDetail.payeeName || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="地址">{{ receiptDetail.payeeAddress || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="电话">{{ receiptDetail.payeePhone || '-' }}</el-descriptions-item>
+        </el-descriptions>
+        
+        <!-- 备注信息 -->
+        <h4 class="dialog-section-title">备注信息</h4>
+        <el-descriptions :column="1" border>
+          <el-descriptions-item label="备注">{{ receiptDetail.remark || '-' }}</el-descriptions-item>
+        </el-descriptions>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="receiptDetailDialogVisible = false">关闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getBillDetail, getBillAttachmentList, deleteBillAttachment, getBillAdjustmentList, addBillAdjustment, voidBillAdjustment, uploadBillAdjustmentAttachment, uploadBillAttachment, getBillAdjustmentAttachmentList, deleteBillAdjustmentAttachment, getBillOperationRecords, submitBillPayment, uploadBillPaymentAttachment, deleteBillPaymentAttachment, adjustLateFee, settleLateFee, getAccountCascaderOptions, getBillTransactionList, getTransactionAttachments, deleteTransactionAttachment, uploadTransactionAttachment, previewAttachment, downloadAttachment, closeBill, getReceiptRecords, getReceiptDetail } from '@/api/finance'
+
+export default {
+  name: 'BillDetail',
+  props: {
+    billId: {
+      type: [Number, String],
+      required: true
+    }
+  },
+  data() {
+    return {
+      activeTab: 'basicInfo',
+      loading: false,
+      billDetail: {},
+      billDetailsList: [],
+      roomList: [],
+      attachmentList: [],
+      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: '1',
+        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: [],
+      currentAdjustingRow: null, // 当前调整的行数据
+      
+      // 预览相关
+      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, // 剩余待收金额
+      
+      // 结算滞纳金相关
+      settleLateFeeDialogVisible: false,
+      settleLateFeeSubmitting: false,
+      settleLateFeeForm: {
+        billId: '',
+        billDetailId: '',
+        dcFlagCode: '1', // 默认贷(收入)
+        currCode: '156', // 默认人民币
+        occuAmt: 0, // 发生额
+        inaccDate: new Date().toISOString().slice(0, 10), // 入账日期
+        accountId: '', // 流水账户ID
+        txVchrNo: '', // 凭证号
+        unitName: '', // 对方单位名称
+        contactPerson: '', // 联系人
+        payModeName: '', // 支付方式
+        bankName: '', // 开户银行
+        counterpartyAccount: '', // 对方账户
+        summ: '', // 摘要
+        remark: '' // 备注
+      },
+      settleLateFeeRules: {
+        occuAmt: [
+          { required: true, message: '请输入发生额', trigger: 'blur' }
+        ],
+        inaccDate: [
+          { required: true, message: '请选择入账日期', trigger: 'change' }
+        ],
+        accountId: [
+          { required: true, message: '请选择流水账户', trigger: 'change' }
+        ],
+        unitName: [
+          { required: true, message: '请输入对方单位名称', trigger: 'blur' }
+        ]
+      },
+      settleLateFeeFileList: [], // 滞纳金结算附件列表
+      accountOptions: [], // 流水账户选项
+      
+      // 收支流水相关
+      transactionList: [], // 收支流水列表
+      transactionTotal: 0, // 收支流水总数
+      transactionLoading: false, // 加载状态
+      transactionQuery: { // 查询参数
+        pageNum: 1,
+        pageSize: 10
+      },
+      transactionAttachmentDialogVisible: false,
+      transactionAttachmentLoading: false,
+      transactionAttachmentList: [],
+      currentTransactionId: '',
+      uploadDialogVisible: false,
+      uploadFileList: [],
+      
+      // 关闭账单相关
+      closeBillDialogVisible: false,
+      closeBillSubmitting: false,
+      closeBillForm: {
+        billId: '',
+        closeReason: ''
+      },
+      closeBillRules: {
+        closeReason: [
+          { required: true, message: '请输入关闭原因', trigger: 'blur' },
+          { min: 5, max: 200, message: '长度在 5 到 200 个字符', trigger: 'blur' }
+        ]
+      },
+      
+      // 收据记录相关
+      receiptList: [],
+      receiptTotal: 0,
+      receiptLoading: false,
+      receiptQuery: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      receiptDetailDialogVisible: false,
+      receiptDetailLoading: false,
+      receiptDetail: {}
+    }
+  },
+  created() {
+    console.log('BillDetail created, billId:', this.billId)
+    if (!this.billId) {
+      console.error('Error: billId is undefined or null')
+      this.$message.error('账单ID不能为空')
+      return
+    }
+    this.getBillData()
+  },
+  computed: {
+    // 判断是否可以调整账单
+    canAdjustBill() {
+      if (!this.billDetail) return false
+      // 账单状态为开启且不在支付中
+      return this.billDetail.billStatus === '2' && this.billDetail.clearStatus !== '7'
+    },
+    // 判断是否可以支付账单
+    canPayBill() {
+      if (!this.billDetail) return false
+      // 账单不能是已结清，且不能在支付中
+      return this.billDetail.clearStatus !== '2' && this.billDetail.clearStatus !== '7'  && this.billDetail.billStatus !== '2'
+    },
+    // 判断是否可以结算滞纳金
+    canSettleLateFee() {
+      if (!this.billDetail) return false
+      // 账单状态为开启且不在支付中，且需收滞纳金大于0
+      return this.billDetail.billStatus === '1' && 
+             this.billDetail.paymentLockFlag === '0' && 
+             this.billDetail.needOvdueAmt > 0
+    },
+    // 判断是否可以关闭账单
+    canCloseBill() {
+      if (!this.billDetail) return false
+      // 账单状态为开启，且未产生任何收支流水
+      return this.billDetail.billStatus === '1' && 
+             (!this.transactionList || this.transactionList.length === 0 || this.transactionTotal === 0)
+    }
+  },
+  methods: {
+    // 获取账单数据
+    getBillData() {
+      this.loading = true
+      
+      console.log('Getting bill data for ID:', this.billId)
+      
+      // 获取账单详情
+      getBillDetail(this.billId).then(response => {
+        if (response.code === '0000000000000000') {
+          this.billDetail = response.data || {}
+          
+          // 处理账单明细
+          this.processBillDetails()
+          
+          // 设置调整查询参数的账单ID
+          this.adjustmentQuery.billId = this.billId
+          // 获取账单调整记录
+          this.getAdjustmentList()
+          
+          // 模拟房源信息数据，实际应从接口获取或者账单详情中提取
+          this.roomList = this.billDetail.rooms
+          
+          this.loading = false
+        } else {
+          this.$message.error(response.message || '获取账单详情失败')
+          this.loading = false
+        }
+      }).catch((error) => {
+        console.error('Error fetching bill details:', error)
+        this.$message.error('获取账单详情失败，请检查网络连接')
+        this.loading = false
+      })
+      
+      // 获取附件列表
+      this.getAttachmentList()
+      
+      // 获取操作记录
+      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: '1' // 原账单类型
+        })
+      }
+      
+      // 添加滞纳金明细（如果存在）
+      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: '2' // 滞纳金类型
+        })
+      }
+    },
+    // 格式化日期
+    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) {
+      if (amount === undefined || amount === null) {
+        return '0.00'
+      }
+      return parseFloat(amount).toFixed(2) + ' 元'
+    },
+    // 获取账单来源名称
+    getBillSourceName(source) {
+      const sourceMap = {
+        '1': '合同账单',
+        '2': '收费标准账单',
+        '3': '自建全部账单',
+        '4': '自建关联合同账单',
+        '5': '自建未关联合同账单'
+      }
+      return sourceMap[source] || '未知来源'
+    },
+    // 获取结清状态类型
+    getClearStatusType(status) {
+      const statusMap = {
+        '1': 'info',
+        '2': 'success',
+        '3': 'warning',
+        '4': 'danger',
+        '5': 'primary',
+        '6': 'info',
+        '7': 'success'
+      }
+      return statusMap[status] || 'info'
+    },
+    // 获取结清状态名称
+    getClearStatusName(status) {
+      const statusMap = {
+        '1': '未付款',
+        '2': '已结清',
+        '3': '部分结清',
+        '4': '待退款',
+        '5': '待收款',
+        '6': '对账确认中',
+        '7': '已付款'
+      }
+      return statusMap[status] || '未知状态'
+    },
+    // 获取滞纳金状态类型
+    getLateFeeStatusType(status) {
+      const statusMap = {
+        '0': 'info',
+        '1': 'warning',
+        '2': 'success'
+      }
+      return statusMap[status] || 'info'
+    },
+    // 获取滞纳金状态名称
+    getLateFeeStatusName(status) {
+      const statusMap = {
+        '0': '无滞纳金',
+        '1': '有滞纳金',
+        '2': '滞纳金免除'
+      }
+      return statusMap[status] || '未知状态'
+    },
+    // 预览文件
+    previewFile(file) {
+      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下载
+      const link = document.createElement('a')
+      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
+        // 保存当前选中的行数据，用于计算调整后金额
+        this.currentAdjustingRow = row
+      } else {
+        this.adjustmentForm.billDetailType = '1' // 默认原账单
+        this.currentAdjustingRow = null
+      }
+      
+      // 预设调整金额为0，方便用户输入
+      this.adjustmentForm.adjAmt = 0
+      this.adjustmentForm.adjRate = 0
+      this.calculateAdjustAmount()
+    },
+    // 调整方式变更
+    handleAdjMethodChange() {
+      // 重新计算调整后金额
+      this.calculateAdjustAmount()
+    },
+    // 计算调整后金额
+    calculateAdjustAmount() {
+      // 获取原金额，根据当前选中行或账单总金额
+      let originalAmount = 0
+      if (this.currentAdjustingRow) {
+        // 使用当前选中行的金额
+        originalAmount = parseFloat(this.currentAdjustingRow.receivableAmount || 0)
+      } else {
+        // 使用账单总金额
+        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.currentAdjustingRow = null
+      this.adjustmentForm = {
+        billId: '',
+        billDetailId: '',
+        adjTpCd: '1',
+        adjDate: new Date().toISOString().slice(0, 10),
+        adjMethod: '1',
+        adjAmt: 0,
+        adjRate: 0,
+        billDetailType: '1',
+        adjSource: '账单直接调整',
+        projectId: '',
+        remark: '',
+        adjSource: '1'
+      }
+    },
+    // 提交账单调整
+    submitAdjustment() {
+      this.$refs.adjustmentForm.validate(valid => {
+        if (valid) {
+          this.adjustmentSubmitting = true
+          
+          // 构建请求数据
+          const adjustmentData = { ...this.adjustmentForm }
+          
+          // 如果是比例调整，需要计算实际调整金额
+          if (adjustmentData.adjMethod === '2') {
+            // 获取原始金额，根据当前选中行或账单总金额
+            let originalAmount = 0
+            if (this.currentAdjustingRow) {
+              originalAmount = parseFloat(this.currentAdjustingRow.receivableAmount || 0)
+            } else {
+              originalAmount = parseFloat(this.billDetail.accigRcvAmt || 0)
+            }
+            adjustmentData.adjAmt = originalAmount * parseFloat(adjustmentData.adjRate || 0) / 100
+          }
+          
+          // 检查是否是滞纳金的调整
+          if (adjustmentData.billDetailType === '2') {
+            // 使用新的滞纳金调整接口
+            adjustLateFee(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
+              })
+          } else {
+            // 使用原来的账单调整接口
+            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
+        })
+    },
+    // 打开结算滞纳金对话框
+    openSettleLateFeeDialog() {
+      // 重置表单
+      this.resetSettleLateFeeForm()
+      
+      // 设置基础数据
+      this.settleLateFeeForm.billId = this.billId
+      this.settleLateFeeForm.billDetailId = this.billDetail.billDetails && this.billDetail.billDetails.length > 0 
+        ? this.billDetail.billDetails[0].id  // 实际应该找到滞纳金类型的billDetailId
+        : ''
+      this.settleLateFeeForm.occuAmt = this.billDetail.needOvdueAmt || 0 // 设置为应收滞纳金金额
+      this.settleLateFeeForm.unitName = this.billDetail.paysdName || '' // 设置对方单位名称为账单付款方
+      
+      // 获取流水账户选项
+      this.getAccountOptions()
+      
+      // 防止接口延迟，先加载模拟数据
+      this.loadMockAccountOptions()
+      
+      // 显示对话框
+      this.settleLateFeeDialogVisible = true
+    },
+    
+    // 获取账单收支流水列表
+    getTransactionList() {
+      this.transactionLoading = true
+      
+      // 调用获取流水列表API
+      getBillTransactionList(this.billId, this.transactionQuery).then(response => {
+        if (response.code === '0000000000000000') {
+          this.transactionList = response.data.list || []
+          this.transactionTotal = response.data.total || 0
+        } else {
+          this.$message.warning('获取账单收支流水失败，使用模拟数据')
+          this.loadMockTransactionData()
+        }
+        this.transactionLoading = false
+      }).catch(() => {
+        this.$message.warning('获取账单收支流水失败，使用模拟数据')
+        this.loadMockTransactionData()
+        this.transactionLoading = false
+      })
+    },
+    
+    // 加载模拟的收支流水数据
+    loadMockTransactionData() {
+      // 创建10条模拟数据
+      const mockData = []
+      for (let i = 1; i <= 10; i++) {
+        // 随机生成一些数据
+        const isIncome = Math.random() > 0.3 // 70%概率是收入
+        const isBillDetail = Math.random() > 0.3 // 70%概率是原账单
+        const amount = Math.floor(Math.random() * 10000) / 100 // 0-100元随机金额
+        const refundAmount = isIncome ? 0 : Math.floor(Math.random() * amount * 100) / 100 // 只有支出才有可能有退款金额
+        
+        mockData.push({
+          id: i,
+          dcFlagCode: isIncome ? '1' : '2', // 1-贷(收入), 2-借(支出)
+          unitName: isIncome ? this.billDetail.paysdName || `测试客户${i}` : `供应商${i}`,
+          feeTypeName: isBillDetail ? (this.billDetail.feTpName || '房租') : '滞纳金',
+          inaccDate: this.formatDate(new Date(new Date().getTime() - i * 24 * 60 * 60 * 1000)), // 最近10天
+          occuAmt: amount,
+          refundAmt: refundAmount,
+          payChannel: ['1', '2', '3'][Math.floor(Math.random() * 3)], // 随机支付渠道
+          billDetailType: isBillDetail ? '1' : '2', // 1-原账单, 2-滞纳金
+          createTime: this.formatDateTime(new Date(new Date().getTime() - i * 24 * 60 * 60 * 1000)) // 创建时间倒序
+        })
+      }
+      
+      this.transactionList = mockData
+      this.transactionTotal = 25 // 模拟总共有25条数据
+    },
+    
+    // 账单收支流水分页大小变化处理
+    handleTransactionSizeChange(val) {
+      this.transactionQuery.pageSize = val
+      this.getTransactionList()
+    },
+    
+    // 账单收支流水页码变化处理
+    handleTransactionCurrentChange(val) {
+      this.transactionQuery.pageNum = val
+      this.getTransactionList()
+    },
+    
+    // 格式化日期时间
+    formatDateTime(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');
+      const hour = String(date.getHours()).padStart(2, '0');
+      const minute = String(date.getMinutes()).padStart(2, '0');
+      const second = String(date.getSeconds()).padStart(2, '0');
+      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
+    },
+    // 重置结算滞纳金表单
+    resetSettleLateFeeForm() {
+      if (this.$refs.settleLateFeeForm) {
+        this.$refs.settleLateFeeForm.resetFields()
+      }
+      this.settleLateFeeFileList = []
+      this.settleLateFeeForm = {
+        billId: '',
+        billDetailId: '',
+        dcFlagCode: '1', // 默认贷(收入)
+        currCode: '156', // 默认人民币
+        occuAmt: 0, // 发生额
+        inaccDate: new Date().toISOString().slice(0, 10), // 入账日期
+        accountId: '', // 流水账户ID
+        txVchrNo: '', // 凭证号
+        unitName: '', // 对方单位名称
+        contactPerson: '', // 联系人
+        payModeName: '', // 支付方式
+        bankName: '', // 开户银行
+        counterpartyAccount: '', // 对方账户
+        summ: '', // 摘要
+        remark: '' // 备注
+      }
+    },
+    // 获取流水账户选项
+    getAccountOptions() {
+      // 尝试从后端获取数据
+      getAccountCascaderOptions().then(response => {
+        if (response.code === '0000000000000000') {
+          this.accountOptions = response.data || []
+        } else {
+          // 后端获取失败，使用模拟数据
+          this.$message.warning('获取流水账户列表失败，使用模拟数据')
+          this.loadMockAccountOptions()
+        }
+      }).catch(() => {
+        // 接口报错，使用模拟数据
+        this.$message.warning('获取流水账户列表失败，使用模拟数据')
+        this.loadMockAccountOptions()
+      })
+    },
+    
+    // 加载模拟的流水账户数据
+    loadMockAccountOptions() {
+      this.accountOptions = [
+        {
+          id: '1',
+          label: '总公司',
+          children: [
+            { id: '101', label: '基本账户-工商银行' },
+            { id: '102', label: '一般账户-建设银行' },
+            { id: '103', label: '专用账户-农业银行' }
+          ]
+        },
+        {
+          id: '2',
+          label: '北京分公司',
+          children: [
+            { id: '201', label: '基本账户-中国银行' },
+            { id: '202', label: '一般账户-交通银行' }
+          ]
+        },
+        {
+          id: '3',
+          label: '上海分公司',
+          children: [
+            { id: '301', label: '基本账户-招商银行' },
+            { id: '302', label: '一般账户-浦发银行' },
+            { id: '303', label: '专用账户-民生银行' }
+          ]
+        },
+        {
+          id: '4',
+          label: '广州分公司',
+          children: [
+            { id: '401', label: '基本账户-兴业银行' },
+            { id: '402', label: '一般账户-中信银行' }
+          ]
+        },
+        {
+          id: '5',
+          label: '深圳分公司',
+          children: [
+            { id: '501', label: '基本账户-光大银行' },
+            { id: '502', label: '一般账户-平安银行' },
+            { id: '503', label: '专用账户-邮储银行' }
+          ]
+        }
+      ]
+    },
+    // 提交结算滞纳金
+    submitSettleLateFee() {
+      this.$refs.settleLateFeeForm.validate(valid => {
+        if (valid) {
+          this.settleLateFeeSubmitting = true
+          
+          // 构建请求数据
+          const settleLateFeeData = { ...this.settleLateFeeForm }
+          
+          settleLateFee(settleLateFeeData)
+            .then(response => {
+              if (response.code === '0000000000000000') {
+                // 判断是否需要上传附件
+                if (this.settleLateFeeFileList.length > 0) {
+                  this.uploadSettleLateFeeAttachments(response.data)
+                } else {
+                  this.$message.success('结算滞纳金成功')
+                  this.settleLateFeeDialogVisible = false
+                  // 重新获取账单信息
+                  this.getBillData()
+                  this.settleLateFeeSubmitting = false
+                }
+              } else {
+                this.$message.error(response.message || '结算滞纳金失败')
+                this.settleLateFeeSubmitting = false
+              }
+            })
+            .catch(error => {
+              console.error('结算滞纳金失败', error)
+              this.$message.error('结算滞纳金失败，请稍后重试')
+              this.settleLateFeeSubmitting = false
+            })
+        }
+      })
+    },
+    
+    // 上传结算滞纳金附件
+    uploadSettleLateFeeAttachments(transactionId) {
+      if (this.settleLateFeeFileList.length === 0) {
+        this.$message.success('结算滞纳金成功')
+        this.settleLateFeeDialogVisible = false
+        // 重新获取账单信息
+        this.getBillData()
+        this.settleLateFeeSubmitting = false
+        return
+      }
+      
+      // 使用bill-payments附件上传接口
+      const uploadPromises = this.settleLateFeeFileList.map(fileItem => {
+        return uploadBillPaymentAttachment(transactionId, fileItem.file)
+      })
+      
+      Promise.all(uploadPromises)
+        .then(() => {
+          this.$message.success('结算滞纳金成功')
+          this.settleLateFeeDialogVisible = false
+          // 重新获取账单信息
+          this.getBillData()
+          this.settleLateFeeSubmitting = false
+        })
+        .catch(error => {
+          console.error('附件上传失败', error)
+          this.$message.warning('结算滞纳金成功，但部分附件上传失败')
+          this.settleLateFeeDialogVisible = false
+          // 重新获取账单信息
+          this.getBillData()
+          this.settleLateFeeSubmitting = false
+        })
+    },
+    // 上传结算滞纳金附件前检查
+    beforeSettleLateFeeFileUpload(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
+    },
+    
+    // 上传结算滞纳金附件
+    uploadSettleLateFeeAttachment(options) {
+      const file = options.file
+      
+      // 创建临时URL供预览
+      const tempUrl = URL.createObjectURL(file)
+      
+      // 向上传列表中添加文件
+      this.settleLateFeeFileList.push({
+        name: file.name,
+        file: file,
+        url: tempUrl,
+        status: 'ready'
+      })
+    },
+    
+    // 预览结算滞纳金附件
+    previewSettleLateFeeFile(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
+      }
+    },
+    
+    // 删除结算滞纳金附件
+    deleteSettleLateFeeFile(index) {
+      this.settleLateFeeFileList.splice(index, 1)
+    },
+    // 获取支付渠道名称
+    getPayChannelName(channel) {
+      const channelMap = {
+        '1': '线上H5',
+        '2': '线上PC',
+        '3': '线下支付'
+      }
+      return channelMap[channel] || '未知渠道'
+    },
+    // 查看交易附件
+    viewTransactionAttachments(row) {
+      this.transactionAttachmentDialogVisible = true
+      this.transactionAttachmentLoading = true
+      this.currentTransactionId = row.id
+      this.transactionAttachmentList = []
+      
+      // 调用接口获取附件列表
+      getTransactionAttachments(row.id)
+        .then(response => {
+          if (response.code === '0000000000000000') {
+            this.transactionAttachmentList = response.data || []
+          } else {
+            this.$message.error(response.message || '获取附件失败')
+          }
+          this.transactionAttachmentLoading = false
+        })
+        .catch(error => {
+          console.error('获取附件失败', error)
+          this.$message.error('获取附件失败，请稍后重试')
+          this.transactionAttachmentLoading = false
+        })
+    },
+    
+    // 预览交易附件
+    previewTransactionAttachment(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
+      })
+    },
+    
+    // 下载交易附件
+    downloadTransactionAttachment(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('无法下载该文件')
+      })
+    },
+    
+    // 删除交易附件
+    deleteTransactionAttachment(index, file) {
+      this.$confirm('确认删除该附件?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const userId = this.$store.getters.userId || ''
+        deleteTransactionAttachment(file.fileId, userId).then(() => {
+          this.$message.success('删除成功')
+          this.transactionAttachmentList.splice(index, 1)
+        }).catch(() => {
+          this.$message.error('删除失败')
+        })
+      }).catch(() => {})
+    },
+    
+    // 上传交易附件
+    uploadTransactionAttachment() {
+      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.currentTransactionId, fileItem.file, userId, userName)
+      })
+      
+      this.transactionAttachmentLoading = true
+      Promise.all(uploadPromises)
+        .then(() => {
+          this.$message.success('附件上传成功')
+          this.uploadDialogVisible = false
+          this.uploadFileList = []
+          
+          // 重新获取附件列表
+          this.viewTransactionAttachments({ id: this.currentTransactionId })
+        })
+        .catch(() => {
+          this.$message.error('部分附件上传失败，请重试')
+          this.transactionAttachmentLoading = false
+        })
+    },
+    
+    // 上传前验证交易附件
+    beforeTransactionAttachmentUpload(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
+    },
+    
+    // 处理文件上传
+    handleTransactionAttachmentUpload(options) {
+      const file = options.file
+      
+      // 创建临时URL供预览
+      const tempUrl = URL.createObjectURL(file)
+      
+      this.uploadFileList.push({
+        name: file.name,
+        file: file,
+        url: tempUrl
+      })
+    },
+    // 监听标签页切换
+    handleTabChange(tab) {
+      console.log(tab);
+      if (tab.name === 'billTransaction') {
+        // 当切换到收支流水标签页时，加载数据
+        this.getTransactionList()
+      } else if (tab.name === 'receiptRecords') {
+        // 当切换到收据记录标签页时，加载数据
+        this.getReceiptList()
+      }
+    },
+    // 打开关闭账单对话框
+    openCloseBillDialog() {
+      if (!this.canCloseBill) {
+        this.$message.warning('当前账单不符合关闭条件')
+        return
+      }
+      
+      this.closeBillForm.billId = this.billId
+      this.closeBillForm.closeReason = ''
+      this.closeBillDialogVisible = true
+    },
+    
+    // 确认关闭账单
+    confirmCloseBill() {
+      this.$refs.closeBillForm.validate(valid => {
+        if (valid) {
+          this.$confirm('您确定要关闭该账单吗？请注意，该操作不可取消。', '警告', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            this.closeBillSubmitting = true
+            
+            closeBill(this.closeBillForm)
+              .then(response => {
+                if (response.code === '0' || response.code === '0000000000000000') {
+                  this.$message.success('账单关闭成功')
+                  this.closeBillDialogVisible = false
+                  // 重新获取账单信息
+                  this.getBillData()
+                } else {
+                  this.$message.error(response.message || '账单关闭失败')
+                }
+                this.closeBillSubmitting = false
+              })
+              .catch(error => {
+                console.error('账单关闭失败', error)
+                this.$message.error('账单关闭失败，请稍后重试')
+                this.closeBillSubmitting = false
+              })
+          }).catch(() => {
+            // 用户取消操作
+          })
+        }
+      })
+    },
+    // 查看收据详情
+    viewReceiptDetail(row) {
+      this.receiptDetailDialogVisible = true
+      this.receiptDetailLoading = true
+      getReceiptDetail(row.id).then(response => {
+        this.receiptDetail = response.data || {}
+        this.receiptDetailLoading = false
+      }).catch(() => {
+        this.receiptDetailLoading = false
+      })
+    },
+
+    // 获取收据记录列表
+    getReceiptList() {
+      this.receiptLoading = true
+      getReceiptRecords(this.billId, this.receiptQuery).then(response => {
+        if (response.code === '0000000000000000') {
+          this.receiptList = response.data.list || []
+          this.receiptTotal = response.data.total || 0
+        } else {
+          this.$message.error(response.message || '获取收据记录失败')
+        }
+        this.receiptLoading = false
+      }).catch(error => {
+        console.error('获取收据记录失败', error)
+        this.$message.error('获取收据记录失败，请检查网络连接')
+        this.receiptLoading = false
+      })
+    },
+
+    // 收据记录分页大小变化
+    handleReceiptSizeChange(size) {
+      this.receiptQuery.pageSize = size
+      this.getReceiptList()
+    },
+
+    // 收据记录页码变化
+    handleReceiptCurrentChange(page) {
+      this.receiptQuery.pageNum = page
+      this.getReceiptList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .delete-btn {
+    color: #F56C6C;
+  }
+   
+  .pagination-container {
+    margin-top: 20px;
+    text-align: right;
+  }
+  
+  .bill-detail-container {
+    padding: 0;
+    
+    .bill-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 15px;
+      
+      .bill-header-left {
+        h3 {
+          margin: 0;
+          font-size: 18px;
+        }
+      }
+    }
+    
+    .section-header {
+      font-weight: bold;
+      margin: 15px 0 10px;
+      padding-left: 8px;
+      border-left: 3px solid #409EFF;
+      line-height: 1.2;
+    }
+    
+    .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
new file mode 100644
index 0000000..9750392
--- /dev/null
+++ b/pc/src/views/finance/billList/index.vue
@@ -0,0 +1,463 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索表单 -->
+    <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form">
+      <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="paysdName">
+        <el-input v-model="queryParams.paysdName" placeholder="请输入对方名称" clearable style="width: 220px" />
+      </el-form-item>
+      <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">
+          <el-option label="开启" value="1" />
+          <el-option label="关闭" value="0" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="应收时间" prop="pybDt">
+        <el-date-picker
+          v-model="dateRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          style="width: 240px">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="结清状态" prop="clearStatus">
+        <el-select v-model="queryParams.clearStatus" placeholder="请选择结清状态" clearable multiple style="width: 220px">
+          <el-option label="未付款" value="1" />
+          <el-option label="已结清" value="2" />
+          <el-option label="部分结清" value="3" />
+          <el-option label="待退款" value="4" />
+          <el-option label="待收款" value="5" />
+          <el-option label="对账确认中" value="6" />
+          <el-option label="已付款" value="7" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="账单来源" prop="billSource">
+        <el-select v-model="queryParams.billSource" placeholder="请选择账单来源" clearable style="width: 220px">
+          <el-option label="合同账单" value="1" />
+          <el-option label="收费标准账单" value="2" />
+          <el-option label="自建全部账单" value="3" />
+          <el-option label="自建关联合同账单" value="4" />
+          <el-option label="自建未关联合同账单" value="5" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="费用类型" prop="feeType">
+        <el-cascader
+          v-model="feeTypeSelected"
+          :options="feeTypeOptions"
+          :props="{
+            label: 'label',
+            value: 'id',
+            children: 'children',
+            emitPath: false,
+            expandTrigger: 'hover'
+          }"
+          clearable
+          placeholder="请选择费用类型"
+          style="width: 220px">
+        </el-cascader>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+      <el-button type="success" icon="el-icon-plus" style="float: right;" @click="handleAdd">添加收款账单</el-button>
+      <el-button type="warning" icon="el-icon-download" style="float: right; margin-right: 10px;" @click="handleExport">导出</el-button>
+    </el-form>
+
+    <!-- 表格区域 -->
+    <el-table v-loading="loading" :data="billList" border>
+      <el-table-column label="对方名称" prop="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="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)">
+            {{ getClearStatusName(scope.row.clearStatus) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <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.accblAmt ? scope.row.accblAmt.toFixed(2) : '0.00' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="应收金额" prop="accigRcvAmt" min-width="100" align="right">
+        <template slot-scope="scope">
+          {{ scope.row.accigRcvAmt ? scope.row.accigRcvAmt.toFixed(2) : '0.00' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="实收金额" prop="atmRecvAmt" min-width="100" align="right">
+        <template slot-scope="scope">
+          {{ scope.row.atmRecvAmt ? scope.row.atmRecvAmt.toFixed(2) : '0.00' }}
+        </template>
+      </el-table-column>
+      <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="200" align="center" fixed="right">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            @click="handleDetail(scope.row)">
+            查看
+          </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            @click="handleIssueReceipt(scope.row)"
+            :disabled="!canIssueReceipt(scope.row)">
+            开具收据
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="pagination-container">
+        <!-- 分页区域 -->
+        <el-pagination
+            background
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="queryParams.pageNum"
+            :page-sizes="[10, 20, 30, 50]"
+            :page-size="queryParams.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total">
+        </el-pagination>
+    </div>
+  
+
+    <!-- 添加账单对话框 -->
+    <el-dialog title="添加收款账单" :visible.sync="dialogVisible" width="80%" append-to-body @closed="handleDialogClosed">
+      <add-bill ref="addBillForm" />
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitAddBill">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 账单详情对话框 -->
+    <el-dialog :visible.sync="detailVisible" width="80%" append-to-body title=" " :close-on-click-modal="false" :show-close="false">
+      <bill-detail v-if="detailVisible" :bill-id="currentBill.id" />
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="detailVisible = false">关 闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getFeeTypeTree, getBillList, exportBillList, addBill, getBillDetail } from '@/api/finance'
+import AddBill from './components/AddBill'
+import BillDetail from './components/BillDetail'
+
+export default {
+  name: 'BillList',
+  components: {
+    AddBill,
+    BillDetail
+  },
+  data() {
+    return {
+      // 加载标志
+      loading: false,
+      // 账单列表数据
+      billList: [],
+      // 总记录数
+      total: 0,
+      // 时间范围
+      dateRange: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        contractNo: '',
+        roomNumber: '',
+        paysdName: '',
+        totBillNo: '',
+        billStatus: [],
+        receivableDateStart: '',
+        receivableDateEnd: '',
+        clearStatus: [],
+        billSource: '',
+        feeTypeId: undefined,
+        feeCategoryId: undefined
+      },
+      // 费用类型选择
+      feeTypeSelected: undefined,
+      // 费用类型选项
+      feeTypeOptions: [],
+      // 对话框显示标志
+      dialogVisible: false,
+      detailVisible: false,
+      // 当前查看的账单详情
+      currentBill: {}
+    }
+  },
+  created() {
+    this.getList()
+    this.getFeeTypeOptions()
+  },
+  methods: {
+    // 获取账单列表
+    getList() {
+      this.loading = true
+      // 处理查询参数
+      const queryParams = { ...this.queryParams }
+      
+      // 处理日期范围
+      if (this.dateRange && this.dateRange.length > 0) {
+        queryParams.receivableDateStart = this.dateRange[0]
+        queryParams.receivableDateEnd = this.dateRange[1]
+      }
+      
+      // 处理费用类型
+      if (this.feeTypeSelected) {
+        queryParams.feeTypeId = this.feeTypeSelected
+      }
+      
+      getBillList(queryParams).then(response => {
+        this.billList = response.data.list || []
+        this.total = response.data.total
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    // 获取费用类型选项
+    getFeeTypeOptions() {
+      getFeeTypeTree({ level: 2 }).then(response => {
+        if (response.code === '0000000000000000') {
+          // 数据预处理
+          this.feeTypeOptions = this.processTreeData(response.data)
+        }
+      })
+    },
+    // 处理费用类型树形数据
+    processTreeData(data) {
+      if (!data || !Array.isArray(data) || data.length === 0) {
+        console.warn('无费用类型数据')
+        return []
+      }
+
+      return data.map(category => {
+        // 确保id字段存在
+        const categoryId = category.id || Math.random().toString(36).substr(2, 9)
+
+        // 处理子节点
+        let children = []
+        if (category.financeFeeTypes && Array.isArray(category.financeFeeTypes)) {
+          children = category.financeFeeTypes.map(feeType => {
+            return {
+              id: feeType.id || Math.random().toString(36).substr(2, 9),
+              label: feeType.feTpName || '未命名费用',
+              categoryId: categoryId,
+              // 存储原始数据以便后续使用
+              feTpName: feeType.feTpName || '未命名费用',
+              // 确保没有更多的子节点
+              children: null
+            }
+          })
+        }
+
+        return {
+          id: categoryId,
+          label: category.categoryName || '未命名分类',
+          categoryName: category.categoryName || '未命名分类',
+          children: children.length > 0 ? children : null
+        }
+      }).filter(item => item.children && item.children.length > 0)
+    },
+    // 搜索按钮操作
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    // 重置按钮操作
+    resetQuery() {
+      this.dateRange = []
+      this.feeTypeSelected = undefined
+      this.$refs.queryForm.resetFields()
+      this.handleQuery()
+    },
+    // 分页大小改变
+    handleSizeChange(val) {
+      this.queryParams.pageSize = val
+      this.getList()
+    },
+    // 分页页码改变
+    handleCurrentChange(val) {
+      this.queryParams.pageNum = val
+      this.getList()
+    },
+    // 添加账单操作
+    handleAdd() {
+      this.dialogVisible = true
+    },
+    // 关闭对话框时重置表单
+    handleDialogClosed() {
+      this.$refs.addBillForm.resetForm()
+    },
+    // 查看账单详情
+    handleDetail(row) {
+      this.currentBill = row
+      console.log('打开账单详情，ID:', row.id) // 添加日志帮助调试
+      this.detailVisible = true
+    },
+    // 导出账单操作
+    handleExport() {
+      // 处理导出参数
+      const exportParams = { ...this.queryParams }
+      delete exportParams.pageNum
+      delete exportParams.pageSize
+      
+      // 处理日期范围
+      if (this.dateRange && this.dateRange.length > 0) {
+        exportParams.receivableDateStart = this.dateRange[0]
+        exportParams.receivableDateEnd = this.dateRange[1]
+      }
+      
+      // 处理费用类型
+      if (this.feeTypeSelected) {
+        exportParams.feeTypeId = this.feeTypeSelected
+      }
+      
+      this.$confirm('是否确认导出所有数据项?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        exportBillList(exportParams).then(response => {
+          // 创建下载链接
+          const blob = new Blob([response.data])
+          const fileName = `账单列表_${new Date().getTime()}.xlsx`
+          if (window.navigator.msSaveOrOpenBlob) {
+            // IE浏览器下载
+            navigator.msSaveBlob(blob, fileName)
+          } else {
+            // 非IE浏览器下载
+            const link = document.createElement('a')
+            link.href = window.URL.createObjectURL(blob)
+            link.download = fileName
+            link.style.display = 'none'
+            document.body.appendChild(link)
+            link.click()
+            document.body.removeChild(link)
+            window.URL.revokeObjectURL(link.href)
+          }
+        })
+      })
+    },
+    // 提交添加账单
+    submitAddBill() {
+      // 先进行表单验证
+      this.$refs.addBillForm.validateForm().then(valid => {
+        if (valid) {
+          const billData = this.$refs.addBillForm.getFormData()
+          billData.billType = 1
+          billData.billSource = 3
+
+          addBill(billData).then(response => {
+            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('添加账单失败')
+          })
+        }
+      })
+    },
+    // 获取清算状态显示类型
+    getClearStatusType(status) {
+      const statusMap = {
+        '0': 'info',
+        '1': 'success',
+        '2': 'warning',
+        '3': 'danger',
+        '5': 'primary',
+        '6': 'info',
+        '7': 'success'
+      }
+      return statusMap[status] || 'info'
+    },
+    // 获取清算状态名称
+    getClearStatusName(status) {
+      const statusMap = {
+        '0': '未付款',
+        '1': '已结清',
+        '2': '部分结清',
+        '3': '待退款',
+        '5': '待收款',
+        '6': '对账确认中',
+        '7': '已付款'
+      }
+      return statusMap[status] || '未知状态'
+    },
+    // 判断是否可以开具收据
+    canIssueReceipt(row) {
+      // 按要求实现条件判断：
+      // 1. 待退款不可以开收据
+      // 2. 可开据金额大于0
+      return row.clearStatus !== '4' && // 4-待退款
+             (row.atmRecvAmt > 0 || (row.ovdueStatus === '1' && row.realOvdueAmount > 0))
+    },
+    
+    // 处理开具收据
+    handleIssueReceipt(row) {
+      // 保存当前选中的账单
+      this.currentBill = row
+      // 跳转到开具收据组件或页面
+      this.$router.push({
+        path: `/finance/receipt/issue/${row.id}`
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 20px;
+
+  .search-form {
+    margin-bottom: 20px;
+  }
+
+  .pagination-container {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+
+::v-deep .el-dialog__body {
+  padding-top: 0;
+}
+</style> 
\ No newline at end of file
diff --git a/pc/src/views/finance/chargeStandard/index.vue b/pc/src/views/finance/chargeStandard/index.vue
new file mode 100644
index 0000000..f882082
--- /dev/null
+++ b/pc/src/views/finance/chargeStandard/index.vue
@@ -0,0 +1,2672 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索区域 -->
+    <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form">
+      <el-form-item label="标准名称" prop="standardName">
+        <el-input v-model="queryParams.standardName" placeholder="请输入标准名称" clearable style="width: 240px"
+          @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width: 200px">
+          <el-option label="待生效" value="0" />
+          <el-option label="生效中" value="1" />
+          <el-option label="已失效" value="2" />
+        </el-select>
+      </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="primary" style="float: right;" icon="el-icon-plus" @click="handleAdd">新增</el-button>
+    </el-form>
+
+
+    <!-- 表格区域 -->
+    <el-table v-loading="loading" :data="standardList" border>
+      <el-table-column label="标准名称" prop="standardName" min-width="120" show-overflow-tooltip>
+        <template slot-scope="scope">
+          <el-link type="primary" @click="handleDetail(scope.row)">{{ scope.row.standardName }}</el-link>
+        </template>
+      </el-table-column>
+      <el-table-column label="收费模式" prop="chargeMode" width="120" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.chargeMode === '1' ? '周期性费用' : '一次性费用' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="单价" prop="price" width="100" align="center" />
+      <el-table-column label="单价单位" prop="priceU" width="150" align="center">
+        <template slot-scope="scope">
+          {{ formatPriceUnit(scope.row.priceU, scope.row.chargeMode) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="生效时间" prop="effectiveDate" width="120" align="center" />
+      <el-table-column label="失效时间" prop="expiryDate" width="120" align="center" />
+      <el-table-column label="状态" prop="status" width="100" align="center">
+        <template slot-scope="scope">
+          <el-tag :type="getStatusType(scope.row.status)">{{ getStatusName(scope.row.status) }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="所属项目" prop="projectName" min-width="150" show-overflow-tooltip />
+      <el-table-column label="创建时间" prop="createTime" width="160" align="center" />
+      <el-table-column label="绑定对象" prop="bindingObjectType" width="100" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.bindingObjectType === '1' ? '房间' : '车位' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="绑定列表" width="150" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" icon="el-icon-link" :disabled="scope.row.status !== '1'"
+            @click="handleBindData(scope.row)">绑定数据源+生成账单</el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="150" align="center">
+        <template slot-scope="scope">
+          <el-button v-if="scope.row.status === '0' || scope.row.status === '1'" size="mini" type="text"
+            icon="el-icon-time" @click="handleDisable(scope.row)">立即失效</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页区域 -->
+    <div class="pagination-container" v-show="total > 0">
+      <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="detailOpen" width="800px" append-to-body>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item label="标准名称">{{ detailForm.standardName }}</el-descriptions-item>
+        <el-descriptions-item label="绑定对象">
+          {{ detailForm.bindingObjectType === '1' ? '房间' : '车位' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="所属项目">{{ detailForm.projectName }}</el-descriptions-item>
+        <el-descriptions-item label="收费公司">{{ detailForm.companyName }}</el-descriptions-item>
+        <el-descriptions-item label="收费账户">{{ detailForm.accountName }}</el-descriptions-item>
+        <el-descriptions-item label="开户银行">{{ detailForm.bankName }}</el-descriptions-item>
+        <el-descriptions-item label="银行账号">{{ detailForm.bankAccountNumber }}</el-descriptions-item>
+        <el-descriptions-item label="收费模式">
+          {{ detailForm.chargeMode === '1' ? '周期性费用' : '一次性费用' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="费用类型">{{ detailForm.feTpName }}</el-descriptions-item>
+        <el-descriptions-item label="标准生效时间">{{ detailForm.effectiveDate }}</el-descriptions-item>
+        <el-descriptions-item label="标准失效时间">{{ detailForm.expiryDate }}</el-descriptions-item>
+        <el-descriptions-item label="单价">{{ detailForm.price }}</el-descriptions-item>
+        <el-descriptions-item label="单价单位">
+          {{ formatPriceUnit(detailForm.priceU, detailForm.chargeMode) }}
+        </el-descriptions-item>
+        <el-descriptions-item label="含税规则">
+          {{ detailForm.taxInclusiveRule === '1' ? '含税' : '不含税' }}
+        </el-descriptions-item>
+        <el-descriptions-item v-if="detailForm.dayPriceConversionRule" label="天单价换算规则">
+          {{ detailForm.dayPriceConversionRule === '1' ? '按自然月换算' : '按年换算' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="计算单价保留小数点">{{ detailForm.decimalPrecisionPrice }}</el-descriptions-item>
+
+        <el-descriptions-item label="应收金额精度">{{ detailForm.receivableAmountPrecision }}</el-descriptions-item>
+
+
+        <el-descriptions-item v-if="detailForm.chargeMode === '1'" label="付款时间规则">
+          {{ formatPaymentTimeRule(detailForm) }}
+        </el-descriptions-item>
+        <el-descriptions-item v-if="detailForm.chargeMode === '1'" label="计费类型">
+          {{ detailForm.billingType === '1' ? '按月计费' : '按实际天数计费' }}
+        </el-descriptions-item>
+        <el-descriptions-item v-if="detailForm.chargeMode === '1'" label="年天数">
+          {{ detailForm.chrgingUnitVal }}
+        </el-descriptions-item>
+        <el-descriptions-item v-if="detailForm.chargeMode === '1'" label="付款周期">
+          {{ detailForm.remitCycleVal }}个月一付
+        </el-descriptions-item>
+        <el-descriptions-item v-if="detailForm.chargeMode === '1'" label="账单划分方式">
+          {{ formatBillDivisionMethod(detailForm.billDivisionMethod) }}
+        </el-descriptions-item>
+
+        <el-descriptions-item v-if="detailForm.ovdueStartDays" label="滞纳金起算天数">
+          {{ detailForm.ovdueStartDays }}
+        </el-descriptions-item>
+        <el-descriptions-item v-if="detailForm.ovdueIntRate" label="滞纳金收取比例">
+          {{ formatPercentage(detailForm.ovdueIntRate) }}
+        </el-descriptions-item>
+        <el-descriptions-item v-if="detailForm.ovdueLimitRate" label="滞纳金收取上限">
+          {{ formatPercentage(detailForm.ovdueLimitRate) }}
+        </el-descriptions-item>
+        <el-descriptions-item label="状态">
+          <el-tag :type="getStatusType(detailForm.status)">{{ getStatusName(detailForm.status) }}</el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="创建时间">{{ detailForm.createTime }}</el-descriptions-item>
+      </el-descriptions>
+    </el-dialog>
+
+    <!-- 新增收费标准对话框 -->
+    <el-dialog title="新增收费标准" :visible.sync="addOpen" width="60%" append-to-body>
+      <el-form ref="addForm" :model="form" :rules="rules" label-width="140px" class="standard-form">
+        <!-- 收费设置 -->
+        <el-divider content-position="left">收费设置</el-divider>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="绑定对象" prop="bindingObjectType">
+              <el-select v-model="form.bindingObjectType" placeholder="请选择绑定对象" style="width: 240px" disabled>
+                <el-option label="房间" value="1" />
+                <el-option label="车位" value="2" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="项目名称" prop="projectId">
+              <el-select v-model="form.projectId" placeholder="请选择项目" style="width: 240px" filterable
+                @change="handleProjectChange">
+                <el-option v-for="item in projectOptions" :key="item.id" :label="item.projectName" :value="item.id">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="收费公司" prop="companyId">
+              <el-select v-model="form.companyId" placeholder="请选择收费公司" style="width: 240px" filterable>
+                <el-option v-for="item in companyOptions" :key="item.id" :label="item.companyName" :value="item.id">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="收费模式" prop="chargeMode">
+              <el-select v-model="form.chargeMode" placeholder="请选择收费模式" style="width: 240px"
+                @change="handleChargeModeChange">
+                <el-option label="周期性费用" value="1" />
+                <el-option label="一次性费用" value="2" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+        </el-row>
+        <el-row :gutter="20">
+
+          <el-col :span="12">
+            <el-form-item label="费用类型" prop="feeTypeId">
+              <el-cascader v-model="form.feeTypeId" :options="feeTypeOptions" :props="{
+                label: 'label',
+                value: 'id',
+                children: 'children',
+                expandTrigger: 'hover',
+                emitPath: false
+              }" clearable filterable @change="changeFeeType" placeholder="请选择费用类型" style="width: 240px">
+              </el-cascader>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="收费账户" prop="accountId">
+              <el-select v-model="form.accountId" placeholder="请选择收费账户" style="width: 240px" filterable
+                @change="handleAccountChange">
+                <el-option v-for="item in accountOptions" :key="item.id" :label="item.accountName" :value="item.id">
+                  <div style="display: flex; justify-content: space-between;">
+                    <span>{{ item.accountName }}</span>
+                    <span style="color: #8492a6; font-size: 13px">{{ item.companyName }}</span>
+                  </div>
+                  <div style="font-size: 12px; color: #909399">{{ item.bankAccountNumber }}</div>
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20" v-if="form.accountId">
+          <el-col :span="12">
+            <el-form-item label="收款公司">
+              <el-input v-model="selectedAccount.companyName" disabled placeholder="收款公司" style="width: 240px" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="开户银行">
+              <el-input v-model="selectedAccount.bankName" disabled placeholder="开户银行" style="width: 240px" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20" v-if="form.accountId">
+          <el-col :span="12">
+            <el-form-item label="银行账号">
+              <el-input v-model="selectedAccount.bankAccountNumber" disabled placeholder="银行账号" style="width: 240px" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <!-- 预留空间保持布局整齐 -->
+          </el-col>
+        </el-row>
+
+        <!-- 基本信息 -->
+        <el-divider content-position="left">基本信息</el-divider>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="标准名称" prop="standardName">
+              <el-input v-model="form.standardName" placeholder="请输入标准名称" @blur="checkStandardName"
+                style="width: 240px; text-align: left;" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="标准生效时间" prop="effectiveDate">
+              <el-date-picker v-model="form.effectiveDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
+                style="width: 240px">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="标准失效时间" prop="expiryDate">
+              <el-date-picker v-model="form.expiryDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
+                style="width: 240px">
+              </el-date-picker>
+              <el-button type="text" @click="setForeverEffective">永久生效</el-button>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="单价" prop="price">
+              <el-input v-model="form.price" placeholder="请输入单价" style="width: 240px">
+                <el-select slot="append" v-model="form.priceU" style="width: 120px">
+                  <el-option v-for="item in priceUnitOptions" :key="item.value" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="币种" prop="currCode" required>
+              <el-select v-model="form.currCode" style="width: 240px" disabled>
+                <el-option label="人民币" value="156" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <!-- 天单价换算规则（条件渲染） -->
+          <el-col :span="12" v-if="showDayPriceRule">
+            <el-form-item label="天单价换算规则" prop="dayPriceConversionRule">
+              <el-select v-model="form.dayPriceConversionRule" placeholder="请选择天单价换算规则" style="width: 240px">
+                <el-option label="按年换算" value="2" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="含税规则" prop="taxInclusiveRule">
+              <el-select v-model="form.taxInclusiveRule" placeholder="请选择含税规则" style="width: 240px">
+                <el-option label="含税" value="1" />
+                <el-option label="不含税" value="2" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="税率" prop="taxRate">
+              <el-input-number v-model="form.taxRate" :min="0" :max="100" :precision="2" :step="0.01"
+                style="width: 240px" class="text-left" />
+              <span class="percentage-text">%</span>
+            </el-form-item>
+          </el-col>
+
+
+
+
+          <el-col :span="12">
+            <el-form-item label="计算单价保留小数点" prop="decimalPrecisionPrice">
+              <el-input-number v-model="form.decimalPrecisionPrice" :min="0" :max="10" :precision="0"
+                style="width: 240px" class="text-left" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="应收金额精度" prop="receivableAmountPrecision">
+              <el-select v-model="form.receivableAmountPrecision" placeholder="请选择应收金额精度" style="width: 240px">
+                <el-option label="0" :value="0" />
+                <el-option label="1" :value="1" />
+                <el-option label="2" :value="2" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+
+        </el-row>
+
+        <!-- 周期性费用特有字段 -->
+        <template v-if="form.chargeMode === '1'">
+          <el-divider content-position="left">付款信息</el-divider>
+          <el-row :gutter="20">
+            <el-col :span="24">
+              <el-form-item label="付款时间规则" prop="paymentTimeRuleType" class="payment-rule">
+                <div class="payment-rule-container">
+                  <el-select v-model="form.paymentTimeRuleType" placeholder="按开始延后" style="width: 120px">
+                    <el-option label="按开始延后" value="1" />
+                    <el-option label="按结束延后" value="2" />
+                    <el-option label="按开始提前" value="3" />
+                    <el-option label="按结束提前" value="4" />
+                  </el-select>
+                  <el-input v-model="form.delayPaymDaynum" placeholder="请输入" style="width: 80px"
+                    v-if="form.paymentTimeRuleType !== '5'" />
+                  <el-select v-model="form.dateCalculationMethod" placeholder="自然日" style="width: 100px"
+                    v-if="form.paymentTimeRuleType !== '5'">
+                    <el-option label="自然日" value="1" />
+                    <el-option label="工作日" value="2" disabled />
+                  </el-select>
+                </div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="账单拆分周期" prop="remitCycleVal">
+                <el-input-number v-model="form.remitCycleVal" :min="1" :precision="0" style="width: 240px"
+                  class="text-left" />
+                <span class="unit-label">月一付</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="计费类型" prop="billingType">
+                <el-select v-model="form.billingType" placeholder="请选择计费类型" style="width: 240px">
+                  <el-option label="按月计费" value="1" />
+                  <el-option label="按实际天数计费" value="2" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="年天数" prop="chrgingUnitVal">
+                <el-input-number v-model="form.chrgingUnitVal" :min="1" :precision="0" style="width: 240px"
+                  class="text-left" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="账单划分方式" prop="billDivisionMethod">
+                <el-select v-model="form.billDivisionMethod" placeholder="请选择账单划分方式" style="width: 240px">
+                  <el-option label="按起始日划分" value="1" />
+                  <el-option label="按自然月划分（首月非整自然月划入第一期）" value="2" />
+                  <el-option label="按自然月划分（首月非整自然月算一个月）" value="3" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </template>
+
+        <!-- 滞纳金设置 -->
+        <el-divider content-position="left">滞纳金设置</el-divider>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="起算天数" prop="ovdueStartDays">
+              <el-input-number v-model="form.ovdueStartDays" :min="0" :precision="0" style="width: 240px"
+                class="text-left" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="滞纳金收取比例" prop="ovdueIntRate">
+              <el-input-number v-model="form.ovdueIntRate" :min="0" :max="1" :precision="4" :step="0.001"
+                style="width: 240px" class="text-left" />
+              <span class="percentage-text">%</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="滞纳金收取上限" prop="ovdueLimitRate">
+              <el-input-number v-model="form.ovdueLimitRate" :min="0" :max="1" :precision="2" :step="0.01"
+                style="width: 240px" class="text-left" />
+              <span class="percentage-text">%</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancelAdd">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 绑定数据源对话框 -->
+    <el-dialog title="绑定数据源列表" :visible.sync="bindDataOpen" width="1000px" append-to-body>
+      <div class="bind-data-header">
+        <el-descriptions :column="3" border>
+          <el-descriptions-item label="标准名称">{{ bindDataForm.standardName }}</el-descriptions-item>
+          <el-descriptions-item label="标准生效时间">{{ bindDataForm.effectiveDate }}</el-descriptions-item>
+          <el-descriptions-item label="单价">{{ bindDataForm.price }}</el-descriptions-item>
+          <el-descriptions-item label="单价单位">
+            {{ formatPriceUnit(bindDataForm.priceU, bindDataForm.chargeMode) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="状态">
+            <el-tag :type="getStatusType(bindDataForm.status)">{{ getStatusName(bindDataForm.status) }}</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="绑定对象">
+            {{ bindDataForm.bindingObjectType === '1' ? '房间' : '车位' }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+
+      <!-- 搜索区域 -->
+      <el-form :model="bindDataForm" ref="bindDataQueryForm" :inline="true" class="search-form">
+        <el-form-item label="费用类型" prop="feeTypeId">
+          <el-cascader v-model="bindDataForm.feeTypeId" :options="feeTypeOptions" :props="{
+            label: 'label',
+            value: 'id',
+            children: 'children',
+            expandTrigger: 'hover',
+            emitPath: false
+          }" clearable filterable placeholder="请选择费用类型" style="width: 240px">
+          </el-cascader>
+        </el-form-item>
+        <el-form-item label="项目" prop="projectId">
+          <el-select v-model="bindDataForm.projectId" placeholder="请选择项目" clearable style="width: 240px">
+            <el-option v-for="item in projectOptions" :key="item.projectId" :label="item.projectName"
+              :value="item.projectId" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="账单划分方式" prop="billDivisionMethod">
+          <el-select v-model="bindDataForm.billDivisionMethod" placeholder="请选择账单划分方式" clearable style="width: 240px">
+            <el-option label="按起始日划分" value="1" />
+            <el-option label="按自然月划分(首月非整月划入第一期)" value="2" />
+            <el-option label="按自然月划分(首月非整月算一个月)" value="3" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时间范围" prop="dateRange">
+          <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
+            end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="handleDateRangeChange" style="width: 240px">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="房间ID" prop="roomId">
+          <el-input v-model="bindDataForm.roomId" placeholder="请输入房间ID" clearable style="width: 240px" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" @click="getBindDataList">搜索</el-button>
+          <el-button icon="el-icon-refresh" @click="resetBindDataQuery">重置</el-button>
+        </el-form-item>
+        <el-button type="primary" style="float: right;" icon="el-icon-plus" @click="openGenerateBillDialog"
+          :disabled="bindDataForm.status !== '1'">生成账单+</el-button>
+      </el-form>
+
+      <!-- 表格区域 -->
+      <el-table v-loading="bindDataLoading" :data="bindDataList" border>
+        <el-table-column label="费用类型" prop="feTpName" min-width="120" show-overflow-tooltip></el-table-column>
+        <el-table-column label="账单开始日期" prop="chggBgnDt" width="120" align="center"></el-table-column>
+        <el-table-column label="账单结束日期" prop="chggEndDt" width="120" align="center"></el-table-column>
+        <el-table-column label="计费类型" prop="billingType" width="120" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.billingType === '1' ? '按月计费' : '按实际天数计费' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="单价" width="150" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.price }} {{ formatPriceUnit(scope.row.priceU, '1') }}
+          </template>
+        </el-table-column>
+        <el-table-column label="拆分周期" prop="remitCycleVal" width="100" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.remitCycleVal }}个月
+          </template>
+        </el-table-column>
+        <el-table-column label="付款时间规则" min-width="160" show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{ formatPaymentTimeRule(scope.row) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="绑定项目" prop="projectName" min-width="150" show-overflow-tooltip></el-table-column>
+        <el-table-column label="操作" width="150" align="center">
+          <template slot-scope="scope">
+            <el-button size="mini" type="text" icon="el-icon-view"
+              @click="handleViewBindRooms(scope.row)">查询绑定房间</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页区域 -->
+      <div class="pagination-container" v-show="bindDataTotal > 0">
+        <el-pagination background @size-change="handleBindDataSizeChange" @current-change="handleBindDataCurrentChange"
+          :current-page="bindDataQueryParams.pageNum" :page-sizes="[10, 20, 30, 50]"
+          :page-size="bindDataQueryParams.pageSize" layout="total, sizes, prev, pager, next, jumper"
+          :total="bindDataTotal">
+        </el-pagination>
+      </div>
+    </el-dialog>
+
+    <!-- 生成账单对话框 -->
+    <el-dialog title="生成账单" :visible.sync="generateBillOpen" width="1000px" append-to-body>
+      <!-- 收费标准信息 -->
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>收费标准信息</span>
+        </div>
+        <el-descriptions :column="3" border>
+          <el-descriptions-item label="收费标准名称">{{ billForm.standardName }}</el-descriptions-item>
+          <el-descriptions-item label="标准生效日期">{{ billForm.effectiveDate }}</el-descriptions-item>
+          <el-descriptions-item label="标准失效日期">{{ billForm.expiryDate }}</el-descriptions-item>
+          <el-descriptions-item label="状态">
+            <el-tag :type="getStatusType(billForm.status)">{{ getStatusName(billForm.status) }}</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="绑定对象">
+            {{ billForm.bindingObjectType === '1' ? '房间' : '车位' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="项目名称">{{ billForm.projectName }}</el-descriptions-item>
+          <el-descriptions-item label="收费公司">{{ billForm.companyName }}</el-descriptions-item>
+          <el-descriptions-item label="收支账户">{{ billForm.accountName }}</el-descriptions-item>
+          <el-descriptions-item label="收费模式">
+            {{ billForm.chargeMode === '1' ? '周期性费用' : '一次性费用' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="滞纳金起算天数">{{ billForm.ovdueStartDays }}</el-descriptions-item>
+          <el-descriptions-item label="滞纳金收取比例(每天)">
+            {{ formatPercentage(billForm.ovdueIntRate) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="滞纳金收取上限">
+            {{ formatPercentage(billForm.ovdueLimitRate) }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-card>
+
+      <!-- 生成账单基本信息 -->
+      <el-card class="box-card" style="margin-top: 20px;">
+        <div slot="header" class="clearfix">
+          <span>生成账单基本信息</span>
+        </div>
+        <el-form ref="billForm" :model="billForm" label-width="140px">
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="计算单价保留小数点">
+                <el-input-number v-model="billForm.decimalPrecisionPrice" :min="0" :max="10" :precision="0"
+                  style="width: 100%" @change="handleFormFieldChange" />
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="12">
+              <el-form-item label="应收金额精度">
+                <el-select v-model="billForm.receivableAmountPrecision" style="width: 100%"
+                  @change="handleFormFieldChange">
+                  <el-option label="0" :value="0" />
+                  <el-option label="1" :value="1" />
+                  <el-option label="2" :value="2" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="单价">
+                <el-input v-model="billForm.price" style="width: 100%" @input="handleFormFieldChange">
+                  <el-select slot="append" v-model="billForm.priceU" style="width: 120px"
+                    @change="handleFormFieldChange">
+                    <el-option v-for="item in priceUnitOptions" :key="item.value" :label="item.label"
+                      :value="item.value">
+                    </el-option>
+                  </el-select>
+                </el-input>
+              </el-form-item>
+            </el-col>
+
+
+            <el-col :span="12">
+              <el-form-item label="币种"  required>
+                <el-select v-model="billForm.currCode" style="width: 100%" disabled>
+                  <el-option label="人民币" value="156" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+
+
+            <el-col :span="12" v-if="showBillDayPriceRule">
+              <el-form-item label="天单价换算规则">
+                <el-select v-model="billForm.dayPriceConversionRule" style="width: 100%"
+                  @change="handleFormFieldChange">
+                  <el-option label="按年换算" value="2" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="含税规则">
+                <el-select v-model="billForm.taxInclusiveRule" style="width: 100%" @change="handleFormFieldChange">
+                  <el-option label="含税" value="1" />
+                  <el-option label="不含税" value="2" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="税率" prop="taxRate">
+                <el-input-number v-model="billForm.taxRate" :min="0" :max="100" :precision="2" :step="0.01"
+                  style="width: 240px" class="text-left" />
+                <span class="percentage-text">%</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12"></el-col>
+          </el-row>
+
+          <!-- 一次性费用特有字段 -->
+          <template v-if="billForm.chargeMode === '2'">
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="缴费时间(单次)">
+                  <el-date-picker v-model="billForm.paymentDate" type="date" placeholder="选择日期"
+                    value-format="yyyy-MM-dd" style="width: 100%" @change="handleFormFieldChange">
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="数量">
+                  <el-input-number v-model="billForm.quantity" :min="1" :precision="0" style="width: 100%"
+                    @change="handleFormFieldChange" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </template>
+
+          <!-- 周期性费用特有字段 -->
+          <template v-else>
+            <el-row :gutter="20">
+              <el-col :span="24">
+                <el-form-item label="缴费时间(周期)">
+                  <el-date-picker v-model="dateRangeValue" type="daterange" range-separator="至" start-placeholder="开始日期"
+                    end-placeholder="结束日期" value-format="yyyy-MM-dd" style="width: 100%"
+                    @change="handleDateRangeChange">
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </template>
+
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="费用类型">
+                <el-cascader v-model="billForm.feeTypeId" :options="feeTypeOptions" :props="{
+                  label: 'label',
+                  value: 'id',
+                  children: 'children',
+                  expandTrigger: 'hover',
+                  emitPath: false
+                }" clearable filterable placeholder="请选择费用类型" style="width: 100%" @change="handleFormFieldChange">
+                </el-cascader>
+              </el-form-item>
+            </el-col>
+
+            <!-- 周期性费用特有字段 -->
+            <template v-if="billForm.chargeMode === '1'">
+              <el-col :span="12">
+                <el-form-item label="付款时间规则" class="payment-rule">
+                  <div class="payment-rule-container">
+                    <el-select v-model="billForm.paymentTimeRuleType" placeholder="按开始延后" style="width: 120px"
+                      @change="handleFormFieldChange">
+                      <el-option label="按开始延后" value="1" />
+                      <el-option label="按结束延后" value="2" />
+                      <el-option label="按开始提前" value="3" />
+                      <el-option label="按结束提前" value="4" />
+                    </el-select>
+                    <el-input v-model="billForm.delayPaymDaynum" placeholder="请输入" style="width: 80px"
+                      v-if="billForm.paymentTimeRuleType !== '5'" @input="handleFormFieldChange" />
+                    <el-select v-model="billForm.dateCalculationMethod" placeholder="自然日" style="width: 100px"
+                      v-if="billForm.paymentTimeRuleType !== '5'" @change="handleFormFieldChange">
+                      <el-option label="自然日" value="1" />
+                      <el-option label="工作日" value="2" disabled />
+                    </el-select>
+                  </div>
+                </el-form-item>
+              </el-col>
+            </template>
+          </el-row>
+
+          <!-- 周期性费用特有字段 -->
+          <template v-if="billForm.chargeMode === '1'">
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="计费类型">
+                  <el-select v-model="billForm.billingType" style="width: 100%" @change="handleFormFieldChange">
+                    <el-option label="按月计费" value="1" />
+                    <el-option label="按实际天数计费" value="2" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="年天数">
+                  <el-input-number v-model="billForm.chrgingUnitVal" :min="1" :precision="0" style="width: 100%"
+                    @change="handleFormFieldChange" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="付款周期">
+                  <el-input-number v-model="billForm.remitCycleVal" :min="1" :precision="0" style="width: 100%"
+                    @change="handleFormFieldChange" />
+                  <span class="unit-label">个月一付</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="账单划分方式">
+                  <el-select v-model="billForm.billDivisionMethod" style="width: 100%" @change="handleFormFieldChange">
+                    <el-option label="按起始日划分" value="1" />
+                    <el-option label="按自然月划分（首月非整自然月划入第一期）" value="2" />
+                    <el-option label="按自然月划分（首月非整自然月算一个月）" value="3" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </template>
+
+          <el-row :gutter="20">
+            <el-col :span="24">
+              <el-form-item label="账单备注">
+                <el-input v-model="billForm.billRemark" placeholder="请输入账单备注" style="width: 100%"
+                  @input="handleFormFieldChange" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </el-card>
+
+      <!-- 房源选择 -->
+      <el-card class="box-card" style="margin-top: 20px;">
+        <div slot="header" class="clearfix">
+          <span>绑定房源</span>
+        </div>
+        <el-tree ref="roomTree" :data="roomTreeData" show-checkbox node-key="id"
+          :props="{ label: 'label', children: 'children' }" @check="handleRoomTreeCheck">
+        </el-tree>
+      </el-card>
+
+      <!-- 账单预览 -->
+      <el-card class="box-card" style="margin-top: 20px;">
+        <div slot="header" class="clearfix">
+          <span>账单预览</span>
+          <el-button style="float: right; padding: 3px 0" type="text" @click="previewBill">刷新预览</el-button>
+        </div>
+        <div class="bill-preview-container">
+          <el-table v-loading="previewBillLoading" :data="previewBillList" border>
+            <el-table-column label="账单起止时间" width="250">
+              <template slot-scope="scope">
+                {{ scope.row.chggBgnDt }} 至 {{ scope.row.chggEndDt
+                }}
+              </template>
+            </el-table-column>
+            <el-table-column label="应收时间" prop="pybDt" width="150" align="center"></el-table-column>
+            <el-table-column label="实际天数" prop="dayNum" width="100" align="center"></el-table-column>
+            <el-table-column label="费用类型" prop="feTpName" width="150"></el-table-column>
+            <el-table-column label="单价" width="150" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.price }} {{ formatPriceUnit(scope.row.priceU, billForm.chargeMode) }}
+              </template>
+            </el-table-column>
+            <el-table-column label="房源" prop="roomName" width="100">
+              <template slot-scope="scope">
+                {{ scope.row.room.roomNumber }}
+              </template>
+            </el-table-column>
+            <el-table-column label="面积" prop="area" width="80" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.room.rentalArea }}
+              </template>
+
+            </el-table-column>
+            <el-table-column label="应收金额" prop="accigRcvAmt" min-width="150" align="right">
+              <template slot-scope="scope">
+                {{ scope.row.accigRcvAmt.toFixed(2) }} 元
+              </template>
+            </el-table-column>
+          </el-table>
+          <!-- 账单预览统计 -->
+          <div class="bill-summary">
+            <span class="bill-total-label">账单总金额：</span>
+            <span class="bill-total-amount">¥ {{ previewBillTotal.toFixed(2) }}</span>
+          </div>
+        </div>
+      </el-card>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancelGenerateBill">取 消</el-button>
+        <el-button type="primary" @click="submitGenerateBill">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 绑定房间账单对话框 -->
+    <el-dialog title="绑定房间列表" :visible.sync="bindRoomDialogVisible" width="80%" append-to-body>
+      <div v-loading="roomBillsLoading">
+        <div v-for="(bills, roomId) in roomBillsData" :key="roomId" class="room-bills-container">
+          <div class="room-info">
+            <span>房间名称: {{ bills[0].roomNumber }}</span>
+            <span>楼层: {{ bills[0].floorName }}</span>
+            <span>楼栋: {{ bills[0].buildingName }}</span>
+          </div>
+
+          <el-table :data="bills" border style="width: 100%; margin-bottom: 20px">
+            <el-table-column prop="totBillNo" label="账单编号" min-width="180" show-overflow-tooltip />
+            <el-table-column label="开始时间" min-width="110" align="center">
+              <template slot-scope="scope">
+                {{ formatDateTime(scope.row.chggBgnDt) }}
+              </template>
+            </el-table-column>
+            <el-table-column label="结束时间" min-width="110" align="center">
+              <template slot-scope="scope">
+                {{ formatDateTime(scope.row.chggEndDt) }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="price" label="账单金额" min-width="80" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.accblAmt.toFixed(2) }} 元
+              </template>
+            </el-table-column>
+
+            <el-table-column label="清算状态" min-width="100" align="center">
+              <template slot-scope="scope">
+                <el-tag :type="getClearStatusType(scope.row.clearStatus)">
+                  {{ getClearStatusName(scope.row.clearStatus) }}
+                </el-tag>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+
+        <div v-if="Object.keys(roomBillsData).length === 0" class="empty-data">
+          <el-empty description="暂无绑定房间账单数据"></el-empty>
+        </div>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import {
+  getChargingStandardPage,
+  getChargingStandardById,
+  deleteChargingStandard,
+  updateChargingStandardStatus,
+  addChargingStandard,
+  checkChargingStandardName,
+  getFeeTypeTree,
+  previewBill,
+  generateBill,
+  getBillChargingStandardRelPage,
+  getBillsByStandardId
+} from '@/api/finance'
+import { getAllAccounts } from '@/api/building'
+import { API_SUCCESS_CODE } from '@/utils/constants'
+
+export default {
+  name: 'ChargeStandard',
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      // 总条数
+      total: 0,
+      // 收费标准列表
+      standardList: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        standardName: undefined,
+        status: undefined
+      },
+      // 详情对话框
+      detailOpen: false,
+      detailForm: {
+        id: undefined
+      },
+      // 新增对话框
+      addOpen: false,
+      form: {
+        bindingObjectType: '1', // 默认房间
+        projectId: undefined,
+        companyId: undefined,
+        accountId: undefined, // 添加账户ID字段
+        chargeMode: '1', // 默认周期性费用
+        feeTypeId: undefined,
+        standardName: undefined,
+        effectiveDate: undefined,
+        expiryDate: undefined,
+        price: undefined,
+        currCode: '156',
+        priceU: '1',
+        taxInclusiveRule: '1', // 默认含税
+        taxRate: 0,
+        dayPriceConversionRule: '2', // 默认按自然月换算
+        decimalPrecisionPrice: 2,
+        receivableAmountPrecision: 2,
+        paymentTimeRuleType: '1', // 默认按开始延后
+        delayPaymDaynum: 0,
+        dateCalculationMethod: '1', // 默认自然日
+        billingType: '1', // 默认按月计费
+        chrgingUnitVal: 365, // 默认年天数
+        remitCycleVal: 1, // 默认1个月一付
+        billDivisionMethod: '1', // 默认按起始日划分
+        ovdueStartDays: 0,
+        ovdueIntRate: 0,
+        ovdueLimitRate: 0
+      },
+      // 表单校验规则
+      rules: {
+        projectId: [{ required: true, message: '请选择项目', trigger: 'change' }],
+        companyId: [{ required: true, message: '请选择收费公司', trigger: 'change' }],
+        accountId: [{ required: true, message: '请选择收费账户', trigger: 'change' }], // 添加账户校验规则
+        feeTypeId: [{ required: true, message: '请选择费用类型', trigger: 'change' }],
+        standardName: [{ required: true, message: '请输入标准名称', trigger: 'blur' }],
+        effectiveDate: [{ required: true, message: '请选择标准生效时间', trigger: 'change' }],
+        expiryDate: [{ required: true, message: '请选择标准失效时间', trigger: 'change' }],
+        price: [{ required: true, message: '请输入单价', trigger: 'blur' }],
+        currCode: [{ required: true, message: '请选择币种', trigger: 'blur' }],
+        priceU: [{ required: true, message: '请选择单价单位', trigger: 'change' }],
+        paymentTimeRuleType: [{ required: true, message: '请选择付款时间计算方式', trigger: 'change' }],
+        delayPaymDaynum: [{ required: true, message: '请输入付款天数', trigger: 'blur' }],
+        dateCalculationMethod: [{ required: true, message: '请选择日期计算方式', trigger: 'change' }],
+        billingType: [{ required: true, message: '请选择计费类型', trigger: 'change' }],
+        chrgingUnitVal: [{ required: true, message: '请输入年天数', trigger: 'blur' }],
+        remitCycleVal: [{ required: true, message: '请输入付款周期', trigger: 'blur' }],
+        billDivisionMethod: [{ required: true, message: '请选择账单划分方式', trigger: 'change' }]
+      },
+      // 项目选项
+      projectOptions: [
+        { id: 1, projectName: '智慧园区示范项目' },
+        { id: 2, projectName: '创新园区项目' }
+      ],
+      // 公司选项
+      companyOptions: [
+        { id: 1, companyName: '智慧园区物业公司' },
+        { id: 2, companyName: '创新物业管理有限公司' }
+      ],
+      // 账户选项
+      accountOptions: [],
+      // 选中的账户信息
+      selectedAccount: {
+        companyName: '',
+        bankName: '',
+        bankAccountNumber: ''
+      },
+      // 费用类型选项（级联选择器的数据）
+      feeTypeOptions: [],
+      // 价格单位选项（根据收费模式动态变化）
+      priceUnitOptions: [],
+      // 绑定数据源对话框
+      bindDataOpen: false,
+      bindDataLoading: false,
+      bindDataList: [],
+      bindDataTotal: 0,
+      bindDataForm: {
+        standardId: null,
+        standardName: '',
+        effectiveDate: '',
+        expiryDate: '',
+        status: '',
+        bindingObjectType: '',
+        // 添加新字段以适配API请求
+        payerId: '',
+        projectId: '',
+        companyId: '',
+        feeTypeId: null,
+        beginDate: '',
+        endDate: '',
+        billDivisionMethod: '',
+        roomId: ''
+      },
+      bindDataQueryParams: {
+        pageNum: 1,
+        pageSize: 10
+      },
+
+      // 生成账单对话框
+      generateBillOpen: false,
+      billForm: {
+        standardId: '',
+        standardName: '',
+        effectiveDate: '',
+        expiryDate: '',
+        status: '',
+        bindingObjectType: '',
+        projectId: '',
+        projectName: '',
+        companyId: '',
+        companyName: '',
+        accountId: '',
+        accountName: '',
+        chargeMode: '',
+        ovdueStartDays: '',
+        ovdueIntRate: '',
+        ovdueLimitRate: '',
+        decimalPrecisionPrice: '',
+        receivableAmountPrecision: '',
+        price: '',
+        currCode: '156',
+        priceU: '',
+        taxInclusiveRule: '',
+        taxRate: '',
+        paymentDate: '',
+        quantity: '',
+        startDate: '',
+        endDate: '',
+        dateRange: [this.getCurrentDate(), this.calculateEndDate(this.getCurrentDate(), 1)],
+        chggBgnDt: this.getCurrentDate(), // 设置为当前日期
+        chggEndDt: this.calculateEndDate(this.getCurrentDate(), 1), // 设置为当前日期加一年
+        feeTypeId: '',
+        paymentTimeRuleType: '',
+        delayPaymDaynum: '',
+        dateCalculationMethod: '',
+        billingType: '',
+        chrgingUnitVal: '',
+        remitCycleVal: '',
+        billDivisionMethod: '',
+        billRemark: '',
+        roomIds: []
+      },
+      // 表单原始值，用于检测变更
+      originalBillForm: {},
+      roomTreeData: [],
+      previewBillList: [],
+      previewBillTotal: 0,
+      previewBillLoading: false,
+      // 记录用户是否修改过表单
+      formChanged: false,
+      dateRangeValue: [],
+      dateRange: [],
+      // 添加账单列表相关数据
+      bindRoomDialogVisible: false,
+      roomBillsLoading: false,
+      roomBillsData: {},
+      viewRoomData: null,
+    }
+  },
+  created() {
+    this.getList()
+    // 初始化价格单位选项
+    this.handleChargeModeChange(this.form.chargeMode)
+    // 获取费用类型树
+    this.getFeeTypes()
+    // 获取账户选项
+    this.getAccountOptions()
+  },
+  computed: {
+    // 是否显示天单价换算规则
+    showDayPriceRule() {
+      if (this.form.chargeMode !== '1') return false
+      return ['3', '4', '7', '8'].includes(this.form.priceU)
+    },
+    // 是否显示账单中的天单价换算规则
+    showBillDayPriceRule() {
+      if (this.billForm.chargeMode !== '1') return false
+      return ['3', '4', '7', '8'].includes(this.billForm.priceU)
+    },
+    // 处理日期范围值
+    dateRangeValue: {
+      get() {
+        // 如果两个日期都有值，返回数组
+        if (this.billForm.chggBgnDt && this.billForm.chggEndDt) {
+          return [this.billForm.chggBgnDt, this.billForm.chggEndDt]
+        }
+        return []
+      },
+      set(val) {
+        if (val && val.length === 2) {
+          this.billForm.chggBgnDt = val[0]
+          this.billForm.chggEndDt = val[1]
+          this.billForm.startDate = val[0]
+          this.billForm.endDate = val[1]
+        } else {
+          this.billForm.chggBgnDt = ''
+          this.billForm.chggEndDt = ''
+          this.billForm.startDate = ''
+          this.billForm.endDate = ''
+        }
+        // 标记表单已修改
+        this.formChanged = true
+        // 清空预览数据
+        this.clearPreviewData()
+      }
+    }
+  },
+  methods: {
+    changeFeeType(val) {
+      console.log('选择的费用类型ID:', val);
+      // 查找匹配的费用类型
+      if (val) {
+        let selectedFeeType = null;
+        // 在所有分类中查找
+        for (const category of this.feeTypeOptions) {
+          // 先检查是否选中的是分类
+          if (category.id === val) {
+            selectedFeeType = {
+              id: category.id,
+              name: category.label,
+              type: '分类'
+            };
+            break;
+          }
+          // 检查子节点
+          if (category.children && category.children.length > 0) {
+            const found = category.children.find(item => item.id === val);
+            if (found) {
+              selectedFeeType = {
+                id: found.id,
+                name: found.label,
+                categoryName: category.label,
+                type: '费用类型'
+              };
+              break;
+            }
+          }
+        }
+
+        if (selectedFeeType) {
+          console.log('找到的费用类型:', selectedFeeType);
+        } else {
+          console.warn('未找到ID对应的费用类型:', val);
+        }
+      }
+    },
+    /** 查询收费标准列表 */
+    getList() {
+      this.loading = true
+      getChargingStandardPage(this.queryParams).then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          this.standardList = response.data.list || []
+          this.total = response.data.total
+        } else {
+          this.$message.error(response.message || '获取收费标准列表失败')
+          this.standardList = []
+          this.total = 0
+        }
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    /** 获取账户选项 */
+    getAccountOptions() {
+      getAllAccounts().then(res => {
+        if (res.code === API_SUCCESS_CODE) {
+          this.accountOptions = res.data
+        } else {
+          // 出错时使用默认数据
+          this.accountOptions = [
+            { id: 1, accountName: '示例账户1', companyName: '示例收款公司1', bankName: '中国建设银行', bankAccountNumber: '6214000012345678' },
+            { id: 2, accountName: '示例账户2', companyName: '示例收款公司2', bankName: '中国工商银行', bankAccountNumber: '6217000087654321' }
+          ]
+        }
+      }).catch(() => {
+        // 出错时使用默认数据
+        this.accountOptions = [
+          { id: 1, accountName: '示例账户1', companyName: '示例收款公司1', bankName: '中国建设银行', bankAccountNumber: '6214000012345678' },
+          { id: 2, accountName: '示例账户2', companyName: '示例收款公司2', bankName: '中国工商银行', bankAccountNumber: '6217000087654321' }
+        ]
+      })
+    },
+    /** 账户选择处理 */
+    handleAccountChange() {
+      // 获取选中的账户信息
+      const selectedAccount = this.accountOptions.find(item => item.id === this.form.accountId)
+      if (selectedAccount) {
+        this.selectedAccount = {
+          companyName: selectedAccount.companyName,
+          bankName: selectedAccount.bankName,
+          bankAccountNumber: selectedAccount.bankAccountNumber
+        }
+      } else {
+        this.selectedAccount = {
+          companyName: '',
+          bankName: '',
+          bankAccountNumber: ''
+        }
+      }
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm('queryForm')
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        standardName: undefined,
+        status: undefined
+      }
+      this.handleQuery()
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.addOpen = true
+      // 重置表单数据
+      this.resetForm()
+    },
+    /** 重置表单数据 */
+    resetForm() {
+      if (this.$refs.addForm) {
+        this.$refs.addForm.resetFields()
+      }
+      this.form = {
+        bindingObjectType: '1', // 默认房间
+        projectId: undefined,
+        companyId: undefined,
+        accountId: undefined, // 重置账户ID
+        chargeMode: '1', // 默认周期性费用
+        feeTypeId: undefined,
+        standardName: undefined,
+        effectiveDate: undefined,
+        expiryDate: undefined,
+        price: undefined,
+        currCode: '156',
+        priceU: '1',
+        taxInclusiveRule: '1', // 默认含税
+        taxRate: 0,
+        dayPriceConversionRule: '2', // 默认按自然月换算
+        decimalPrecisionPrice: 2,
+        receivableAmountPrecision: 2,
+        paymentTimeRuleType: '1', // 默认按开始延后
+        delayPaymDaynum: 0,
+        dateCalculationMethod: '1', // 默认自然日
+        billingType: '1', // 默认按月计费
+        chrgingUnitVal: 365, // 默认年天数
+        remitCycleVal: 1, // 默认1个月一付
+        billDivisionMethod: '1', // 默认按起始日划分
+        ovdueStartDays: 0,
+        ovdueIntRate: 0,
+        ovdueLimitRate: 0
+      }
+      // 重置选中的账户信息
+      this.selectedAccount = {
+        companyName: '',
+        bankName: '',
+        bankAccountNumber: ''
+      }
+      // 更新单价单位选项
+      this.handleChargeModeChange(this.form.chargeMode)
+    },
+    /** 关闭新增对话框 */
+    cancelAdd() {
+      this.addOpen = false
+      this.resetForm()
+    },
+    /** 收费模式变更处理 */
+    handleChargeModeChange(val) {
+      // 根据收费模式更新单价单位选项
+      if (val === '1') {
+        // 周期性费用
+        this.priceUnitOptions = [
+          { value: '1', label: '元' },
+          { value: '2', label: '元/天' },
+          { value: '3', label: '元/月' },
+          { value: '4', label: '元/年' },
+          { value: '5', label: '元/㎡' },
+          { value: '6', label: '元/(㎡*天)' },
+          { value: '7', label: '元/(㎡*月)' },
+          { value: '8', label: '元/(㎡*年)' }
+        ]
+      } else {
+        // 一次性费用
+        this.priceUnitOptions = [
+          { value: '1', label: '元' },
+          { value: '5', label: '元/㎡' }
+        ]
+      }
+      // 清空已选择的单价单位
+      this.form.priceU = '1'
+    },
+    /** 项目变更处理 */
+    handleProjectChange(val) {
+      // 这里可以根据项目获取相关数据
+      console.log('项目变更:', val)
+    },
+    /** 设置永久生效 */
+    setForeverEffective() {
+      this.form.expiryDate = '2099-12-31'
+    },
+    /** 检查标准名称是否存在 */
+    checkStandardName() {
+      if (!this.form.standardName) return
+
+      checkChargingStandardName(this.form.standardName).then(response => {
+        if (response.code === API_SUCCESS_CODE && response.data) {
+          this.$message.warning('该标准名称已存在，请修改')
+          this.form.standardName = ''
+        }
+      })
+    },
+    /** 提交新增表单 */
+    submitForm() {
+      this.$refs.addForm.validate(valid => {
+        if (!valid) {
+          return this.$message.warning('请完善表单信息')
+        }
+
+        const loading = this.$loading({
+          lock: true,
+          text: '提交中...',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+
+        // 转换数字类型的字段
+        const formData = { ...this.form }
+        const numericFields = [
+          'decimalPrecisionPrice', 'receivableAmountPrecision',
+          'delayPaymDaynum', 'chrgingUnitVal', 'remitCycleVal', 'ovdueStartDays'
+        ]
+
+        numericFields.forEach(field => {
+          if (formData[field] !== undefined) {
+            formData[field] = Number(formData[field])
+          }
+        })
+
+        // 转换价格为数值
+        if (formData.price !== undefined) {
+          formData.price = parseFloat(formData.price)
+        }
+
+        // 提交API请求
+        addChargingStandard(formData).then(response => {
+          loading.close()
+          if (response.code === API_SUCCESS_CODE) {
+            this.$message.success('新增收费标准成功')
+            this.addOpen = false
+            this.getList()
+          } else {
+            this.$message.error(response.message || '新增收费标准失败')
+          }
+        }).catch(() => {
+          loading.close()
+        })
+      })
+    },
+    /** 详情按钮操作 */
+    handleDetail(row) {
+      this.detailOpen = true
+      this.detailForm = { ...row }
+      if (!row.id) return
+
+      getChargingStandardById(row.id).then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          this.detailForm = response.data
+        }
+      })
+    },
+    /** 绑定数据源按钮操作 */
+    handleBindData(row) {
+      this.openBindDataDialog(row)
+    },
+
+    /** 打开绑定数据源弹窗 */
+    openBindDataDialog(row) {
+      this.bindDataOpen = true
+      this.bindDataForm.standardId = row.id
+      this.bindDataForm.standardName = row.standardName
+      this.bindDataForm.effectiveDate = row.effectiveDate
+      this.bindDataForm.expiryDate = row.expiryDate
+      this.bindDataForm.price = row.price
+      this.bindDataForm.priceU = row.priceU
+      this.bindDataForm.status = row.status
+      this.bindDataForm.bindingObjectType = row.bindingObjectType
+      this.getBindDataList()
+    },
+
+    /** 获取绑定数据源列表 */
+    getBindDataList() {
+      this.bindDataLoading = true
+      // 构建完整查询参数
+      const queryParams = {
+        standardId: this.bindDataForm.standardId,
+        payerId: this.bindDataForm.payerId || undefined,
+        projectId: this.bindDataForm.projectId || undefined,
+        companyId: this.bindDataForm.companyId || undefined,
+        feeTypeId: this.bindDataForm.feeTypeId || undefined,
+        beginDate: this.bindDataForm.beginDate || undefined,
+        endDate: this.bindDataForm.endDate || undefined,
+        billDivisionMethod: this.bindDataForm.billDivisionMethod || undefined,
+        roomId: this.bindDataForm.roomId || undefined,
+        pageNum: this.bindDataQueryParams.pageNum,
+        pageSize: this.bindDataQueryParams.pageSize
+      }
+
+      // 移除空值参数
+      Object.keys(queryParams).forEach(key => {
+        if (queryParams[key] === undefined || queryParams[key] === null || queryParams[key] === '') {
+          delete queryParams[key]
+        }
+      })
+
+      getBillChargingStandardRelPage(queryParams).then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          this.bindDataList = response.data.list
+          this.bindDataTotal = response.data.total
+        } else {
+          this.$message.error('获取绑定数据列表失败')
+        }
+        this.bindDataLoading = false
+      }).catch(() => {
+        this.bindDataLoading = false
+      })
+    },
+
+    /** 查询绑定房间 */
+    handleViewBindRooms(row) {
+      this.viewRoomData = row
+      this.roomBillsLoading = true
+      this.bindRoomDialogVisible = true
+
+      // 调用API查询绑定房间账单
+      getBillsByStandardId(row.id).then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          this.roomBillsData = response.data
+          this.roomBillsLoading = false
+        } else {
+          this.$message.error('查询绑定房间账单失败')
+          this.roomBillsLoading = false
+        }
+      }).catch(() => {
+        this.$message.error('查询绑定房间账单失败')
+        this.roomBillsLoading = false
+      })
+    },
+
+    /** 打开生成账单弹窗 */
+    openGenerateBillDialog() {
+      if (this.bindDataForm.status !== '1') {
+        return this.$message.warning('只有生效中的收费标准才能生成账单')
+      }
+
+      // 清空预览数据
+      this.previewBillList = []
+      this.previewBillTotal = 0
+      this.formChanged = false
+
+      this.generateBillOpen = true
+
+      // 根据收费标准ID获取详细信息
+      getChargingStandardById(this.bindDataForm.standardId).then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          const standardData = response.data
+
+          // 设置基本信息
+          this.billForm = {
+            standardId: standardData.id,
+            standardName: standardData.standardName,
+            effectiveDate: standardData.effectiveDate,
+            expiryDate: standardData.expiryDate,
+            status: standardData.status,
+            bindingObjectType: standardData.bindingObjectType,
+            projectId: '',
+            projectName: standardData.projectName,
+            companyId: standardData.companyId,
+            companyName: standardData.companyName,
+            accountId: standardData.accountId,
+            accountName: standardData.accountName,
+            chargeMode: standardData.chargeMode,
+            ovdueStartDays: standardData.ovdueStartDays,
+            ovdueIntRate: standardData.ovdueIntRate,
+            ovdueLimitRate: standardData.ovdueLimitRate,
+
+            // 可修改的字段
+            decimalPrecisionPrice: standardData.decimalPrecisionPrice,
+            receivableAmountPrecision: standardData.receivableAmountPrecision,
+            price: standardData.price,
+            priceU: standardData.priceU,
+            currCode:'156',
+            taxInclusiveRule: standardData.taxInclusiveRule,
+            taxRate: standardData.taxRate,
+            dayPriceConversionRule: standardData.dayPriceConversionRule, // 添加天单价换算规则字段
+
+            // 一次性费用字段
+            paymentDate: standardData.effectiveDate,
+            quantity: 1,
+
+            // 周期性费用字段
+            startDate: standardData.effectiveDate,
+            endDate: this.calculateEndDate(standardData.effectiveDate, 1), // 默认一年
+            dateRange: [this.getCurrentDate(), this.calculateEndDate(this.getCurrentDate(), 1)],
+            chggBgnDt: this.getCurrentDate(), // 设置为当前日期
+            chggEndDt: this.calculateEndDate(this.getCurrentDate(), 1), // 设置为当前日期加一年
+            feeTypeId: standardData.feeTypeId,
+            paymentTimeRuleType: standardData.paymentTimeRuleType,
+            delayPaymDaynum: standardData.delayPaymDaynum,
+            dateCalculationMethod: standardData.dateCalculationMethod,
+            billingType: standardData.billingType,
+            chrgingUnitVal: standardData.chrgingUnitVal,
+            remitCycleVal: standardData.remitCycleVal,
+            billDivisionMethod: standardData.billDivisionMethod,
+
+            billRemark: '',
+            roomIds: []
+          }
+
+          // 保存表单初始值，用于检测变更
+          this.originalBillForm = JSON.parse(JSON.stringify(this.billForm))
+
+          // 设置日期范围值，使UI显示正确的日期
+          this.dateRangeValue = [this.getCurrentDate(), this.calculateEndDate(this.getCurrentDate(), 1)]
+
+          // 获取房源列表
+          this.getRoomTreeData()
+        } else {
+          this.$message.error('获取收费标准信息失败')
+        }
+      })
+    },
+
+    /** 计算结束日期 */
+    calculateEndDate(startDate, yearCount) {
+      if (!startDate) return ''
+      const date = new Date(startDate)
+      date.setFullYear(date.getFullYear() + yearCount)
+      date.setDate(date.getDate() - 1) // 减一天，例如从2023-01-01到2023-12-31
+
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+
+      return `${year}-${month}-${day}`
+    },
+
+    /** 获取房源树形数据 */
+    getRoomTreeData() {
+      // 使用静态数据
+      // 模拟房源数据
+      const roomData = [
+        {
+          "id": "3",
+          "projectName": "智慧产业园",
+          "projectType": "产业园区",
+          "buildings": []
+        },
+        {
+          "id": "2",
+          "projectName": "智慧产业园-修改",
+          "projectType": "产业园区",
+          "buildings": [
+            {
+              "id": 1,
+              "buildingName": "1号智能办公楼-测试",
+              "buildingCode": "B01",
+              "floors": [
+                {
+                  "id": 3,
+                  "floorName": "2层-1",
+                  "floorNumber": 2,
+                  "rooms": [
+                    {
+                      "id": 24,
+                      "roomNumber": "441",
+                      "roomType": "2",
+                      "roomStatus": "1",
+                      "buildingArea": 123.00,
+                      "rentalArea": 2231.00
+                    },
+                    {
+                      "id": 22,
+                      "roomNumber": "1302",
+                      "roomType": "4",
+                      "roomStatus": "1",
+                      "buildingArea": 113.00,
+                      "rentalArea": 112.00
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "id": "4",
+          "projectName": "智慧产业园-9",
+          "projectType": "产业园区",
+          "buildings": [
+            {
+              "id": 14,
+              "buildingName": "3331",
+              "buildingCode": "23",
+              "floors": []
+            }
+          ]
+        },
+        {
+          "id": "5",
+          "projectName": "测试",
+          "projectType": "产业园区",
+          "buildings": [
+            {
+              "id": 3,
+              "buildingName": "1号楼",
+              "buildingCode": "B01",
+              "floors": []
+            },
+            {
+              "id": 4,
+              "buildingName": "2号楼",
+              "buildingCode": "B02",
+              "floors": [
+                {
+                  "id": 4,
+                  "floorName": "2层-1",
+                  "floorNumber": 2,
+                  "rooms": [
+                    {
+                      "id": 23,
+                      "roomNumber": "202",
+                      "roomType": "3",
+                      "roomStatus": "2",
+                      "buildingArea": 44111.00,
+                      "rentalArea": 444233.00
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "id": 12,
+              "buildingName": "22",
+              "buildingCode": "22",
+              "floors": []
+            },
+            {
+              "id": 15,
+              "buildingName": "融入1",
+              "buildingCode": "5531",
+              "floors": []
+            }
+          ]
+        },
+        {
+          "id": "8",
+          "projectName": "测试-1",
+          "projectType": "产业园区",
+          "buildings": [
+            {
+              "id": 7,
+              "buildingName": "4121",
+              "buildingCode": "1234",
+              "floors": [
+                {
+                  "id": 7,
+                  "floorName": "123",
+                  "floorNumber": 11,
+                  "rooms": [
+                    {
+                      "id": 31,
+                      "roomNumber": "504",
+                      "roomType": null,
+                      "roomStatus": "1",
+                      "buildingArea": 122.00,
+                      "rentalArea": 20.99
+                    },
+                    {
+                      "id": 30,
+                      "roomNumber": "504",
+                      "roomType": null,
+                      "roomStatus": "1",
+                      "buildingArea": 122.00,
+                      "rentalArea": 20.99
+                    },
+                    {
+                      "id": 32,
+                      "roomNumber": "505",
+                      "roomType": null,
+                      "roomStatus": "1",
+                      "buildingArea": 122.00,
+                      "rentalArea": 20.99
+                    },
+                    {
+                      "id": 33,
+                      "roomNumber": "506",
+                      "roomType": null,
+                      "roomStatus": "1",
+                      "buildingArea": 122.00,
+                      "rentalArea": 20.99
+                    },
+                    {
+                      "id": 34,
+                      "roomNumber": "507",
+                      "roomType": null,
+                      "roomStatus": "1",
+                      "buildingArea": 122.00,
+                      "rentalArea": 20.99
+                    },
+                    {
+                      "id": 35,
+                      "roomNumber": "511",
+                      "roomType": null,
+                      "roomStatus": "1",
+                      "buildingArea": 122.00,
+                      "rentalArea": 20.99
+                    },
+                    {
+                      "id": 36,
+                      "roomNumber": "512",
+                      "roomType": null,
+                      "roomStatus": "1",
+                      "buildingArea": 122.00,
+                      "rentalArea": 20.99
+                    },
+                    {
+                      "id": 37,
+                      "roomNumber": "512",
+                      "roomType": null,
+                      "roomStatus": "1",
+                      "buildingArea": 122.00,
+                      "rentalArea": 20.99
+                    },
+                    {
+                      "id": 20,
+                      "roomNumber": "503",
+                      "roomType": "3",
+                      "roomStatus": "1",
+                      "buildingArea": 92.00,
+                      "rentalArea": 92.00
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "id": 8,
+              "buildingName": "22222",
+              "buildingCode": "22",
+              "floors": []
+            },
+            {
+              "id": 9,
+              "buildingName": "22222",
+              "buildingCode": "22",
+              "floors": []
+            },
+            {
+              "id": 10,
+              "buildingName": "22222",
+              "buildingCode": "22",
+              "floors": []
+            },
+            {
+              "id": 13,
+              "buildingName": "41",
+              "buildingCode": "23",
+              "floors": []
+            }
+          ]
+        },
+        {
+          "id": "10",
+          "projectName": "111",
+          "projectType": "产业园区",
+          "buildings": [
+            {
+              "id": 11,
+              "buildingName": "11",
+              "buildingCode": "114",
+              "floors": []
+            }
+          ]
+        },
+        {
+          "id": "13",
+          "projectName": "智慧产业园",
+          "projectType": "产业园区",
+          "buildings": []
+        },
+        {
+          "id": "14",
+          "projectName": "智慧产业园2",
+          "projectType": "产业园区",
+          "buildings": []
+        }
+      ];
+
+      // 转换为树形结构
+      this.roomTreeData = roomData.map(project => {
+        return {
+          id: project.id,
+          label: project.projectName,
+          children: project.buildings.map(building => {
+            return {
+              id: building.id,
+              label: building.buildingName,
+              children: building.floors.map(floor => {
+                return {
+                  id: floor.id,
+                  label: floor.floorName,
+                  children: floor.rooms.map(room => {
+                    return {
+                      id: room.id,
+                      label: `${room.roomNumber}（${room.rentalArea}㎡）`,
+                      isRoom: true,
+                      // 保存原始数据供选择
+                      roomData: room
+                    }
+                  })
+                }
+              })
+            }
+          })
+        }
+      });
+    },
+
+    /** 处理日期范围选择变更 */
+    handleDateRangeChange(val) {
+      if (val && val.length === 2) {
+        this.billForm.startDate = val[0]
+        this.billForm.endDate = val[1]
+        this.billForm.chggBgnDt = val[0]
+        this.billForm.chggEndDt = val[1]
+      } else {
+        this.billForm.startDate = ''
+        this.billForm.endDate = ''
+        this.billForm.chggBgnDt = ''
+        this.billForm.chggEndDt = ''
+      }
+      // 清空预览数据
+      this.clearPreviewData()
+    },
+
+    /** 处理表单字段变更 */
+    handleFormFieldChange() {
+      // 标记表单已修改
+      this.formChanged = true
+      // 清空预览数据
+      this.clearPreviewData()
+    },
+
+    /** 清空预览数据 */
+    clearPreviewData() {
+      this.previewBillList = []
+      this.previewBillTotal = 0
+    },
+
+    /** 预览账单 */
+    previewBill() {
+      if (!this.billForm.roomIds || this.billForm.roomIds.length === 0) {
+        return this.$message.warning('请选择绑定房源')
+      }
+
+      if (this.billForm.chargeMode === '1' && (!this.billForm.chggBgnDt || !this.billForm.chggEndDt)) {
+        return this.$message.warning('请选择缴费时间范围')
+      }
+
+      if (this.billForm.chargeMode === '2' && !this.billForm.paymentDate) {
+        return this.$message.warning('请选择缴费时间')
+      }
+
+      this.previewBillLoading = true
+
+      // 构建请求参数，包含收费标准的相关字段
+      const params = {
+        // 收费标准基础信息
+        standardId: this.billForm.standardId,
+        standardName: this.billForm.standardName,
+        projectId: this.billForm.projectId,
+        projectName: this.billForm.projectName,
+        companyId: this.billForm.companyId,
+        companyName: this.billForm.companyName,
+        accountId: this.billForm.accountId,
+        accountName: this.billForm.accountName,
+        bindingObjectType: this.billForm.bindingObjectType,
+        chargeMode: this.billForm.chargeMode,
+
+        // 滞纳金信息
+        ovdueStartDays: this.billForm.ovdueStartDays,
+        ovdueIntRate: this.billForm.ovdueIntRate,
+        ovdueLimitRate: this.billForm.ovdueLimitRate,
+
+        // 房间信息 - 直接使用新的树形结构数据
+        roomIds: this.billForm.roomIds,
+
+        // 根据收费模式设置不同的参数
+        ...(this.billForm.chargeMode === '1' ? {
+          chggBgnDt: this.billForm.chggBgnDt,
+          chggEndDt: this.billForm.chggEndDt
+        } : {
+          startDate: this.billForm.paymentDate,
+          endDate: this.billForm.paymentDate,
+          quantity: this.billForm.quantity
+        }),
+
+        // 可修改的计算参数
+        feeTypeId: this.billForm.feeTypeId,
+        calculationOrder: this.billForm.calculationOrder,
+        receivableAmountPrecision: this.billForm.receivableAmountPrecision,
+        taxInclusiveRule: this.billForm.taxInclusiveRule,
+        taxRate: this.billForm.taxRate,
+        decimalPrecisionPrice: this.billForm.decimalPrecisionPrice,
+        price: this.billForm.price,
+        priceU: this.billForm.priceU,
+        billRemark: this.billForm.billRemark
+      }
+
+      // 周期性费用特有参数
+      if (this.billForm.chargeMode === '1') {
+        Object.assign(params, {
+          dayPriceConversionRule: this.billForm.dayPriceConversionRule,
+          billingType: this.billForm.billingType,
+          chrgingUnitVal: this.billForm.chrgingUnitVal,
+          remitCycleVal: this.billForm.remitCycleVal,
+          billDivisionMethod: this.billForm.billDivisionMethod,
+          paymentTimeRuleType: this.billForm.paymentTimeRuleType,
+          delayPaymDaynum: this.billForm.delayPaymDaynum,
+          dateCalculationMethod: this.billForm.dateCalculationMethod
+        })
+      }
+
+      // 调用预览账单API
+      previewBill(params).then(response => {
+        this.previewBillLoading = false
+        if (response.code === API_SUCCESS_CODE) {
+          const billList = response.data
+          this.previewBillTotal = 0
+          this.previewBillList = billList || []
+          this.previewBillList.forEach(item => {
+            this.previewBillTotal += item.accigRcvAmt
+          })
+
+          // 记录表单当前状态
+          this.originalBillForm = JSON.parse(JSON.stringify(this.billForm))
+          this.formChanged = false
+
+          if (this.previewBillList.length === 0) {
+            this.$message.warning('未生成任何账单，请检查参数设置')
+          }
+        } else {
+          this.$message.error(response.message || '预览账单失败')
+        }
+      }).catch(() => {
+        this.previewBillLoading = false
+        this.$message.error('预览账单失败，请稍后重试')
+      })
+    },
+
+    /** 提交生成账单 */
+    submitGenerateBill() {
+      if (!this.previewBillList || this.previewBillList.length === 0) {
+        return this.$message.warning('请先预览账单')
+      }
+
+      // 如果表单有变动，提示用户先预览
+      if (this.formChanged) {
+        return this.$message.warning('表单已修改，请先点击"刷新预览"按钮查看最新账单')
+      }
+
+      this.$confirm('确定要生成这些账单吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const loading = this.$loading({
+          lock: true,
+          text: '生成账单中...',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+
+        // 构建请求参数，包含收费标准的相关字段
+        const params = {
+          // 收费标准基础信息
+          standardId: this.billForm.standardId,
+          standardName: this.billForm.standardName,
+          projectId: this.billForm.projectId,
+          projectName: this.billForm.projectName,
+          companyId: this.billForm.companyId,
+          companyName: this.billForm.companyName,
+          accountId: this.billForm.accountId,
+          accountName: this.billForm.accountName,
+          bindingObjectType: this.billForm.bindingObjectType,
+          chargeMode: this.billForm.chargeMode,
+
+          // 滞纳金信息
+          ovdueStartDays: this.billForm.ovdueStartDays,
+          ovdueIntRate: this.billForm.ovdueIntRate,
+          ovdueLimitRate: this.billForm.ovdueLimitRate,
+
+          // 房间信息 - 直接使用新的树形结构数据
+          roomIds: this.billForm.roomIds,
+
+          // 根据收费模式设置不同的参数
+          ...(this.billForm.chargeMode === '1' ? {
+            chggBgnDt: this.billForm.chggBgnDt,
+            chggEndDt: this.billForm.chggEndDt
+          } : {
+            startDate: this.billForm.paymentDate,
+            endDate: this.billForm.paymentDate,
+            quantity: this.billForm.quantity
+          }),
+
+          // 可修改的计算参数
+          feeTypeId: this.billForm.feeTypeId,
+          calculationOrder: this.billForm.calculationOrder,
+          receivableAmountPrecision: this.billForm.receivableAmountPrecision,
+          taxInclusiveRule: this.billForm.taxInclusiveRule,
+          taxRate: this.billForm.taxRate,
+          decimalPrecisionPrice: this.billForm.decimalPrecisionPrice,
+          price: this.billForm.price,
+          priceU: this.billForm.priceU,
+          billRemark: this.billForm.billRemark,
+          //默认账单类型写死
+          billType:'1',  //1-收款账单，2-付款账单
+          billSource:'2' //合同账单/收费标准账单/自建全部账单/自建关联合同账单/自建未关联合同账单
+
+        }
+
+        // 周期性费用特有参数
+        if (this.billForm.chargeMode === '1') {
+          Object.assign(params, {
+            dayPriceConversionRule: this.billForm.dayPriceConversionRule,
+            billingType: this.billForm.billingType,
+            chrgingUnitVal: this.billForm.chrgingUnitVal,
+            remitCycleVal: this.billForm.remitCycleVal,
+            billDivisionMethod: this.billForm.billDivisionMethod,
+            paymentTimeRuleType: this.billForm.paymentTimeRuleType,
+            delayPaymDaynum: this.billForm.delayPaymDaynum,
+            dateCalculationMethod: this.billForm.dateCalculationMethod
+          })
+        }
+
+        // 调用生成账单API
+        generateBill(params).then(response => {
+          loading.close()
+          if (response.code === API_SUCCESS_CODE) {
+            this.$message.success('账单生成成功')
+            this.generateBillOpen = false
+            // 刷新绑定数据源列表
+            this.getBindDataList()
+          } else {
+            this.$message.error(response.message || '生成账单失败')
+          }
+        }).catch(() => {
+          loading.close()
+          this.$message.error('生成账单失败，请稍后重试')
+        })
+      }).catch(() => { })
+    },
+
+    /** 关闭生成账单对话框 */
+    cancelGenerateBill() {
+      this.generateBillOpen = false
+      this.previewBillList = []
+      this.previewBillTotal = 0
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$confirm(`确定要删除收费标准 ${row.standardName} 吗？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteChargingStandard(row.id).then(response => {
+          if (response.code === API_SUCCESS_CODE) {
+            this.$message.success('删除成功')
+            this.getList()
+          } else {
+            this.$message.error(response.message || '删除失败')
+          }
+        })
+      }).catch(() => { })
+    },
+    /** 立即失效按钮操作 */
+    handleDisable(row) {
+      this.$confirm(`确定要将收费标准 ${row.standardName} 立即失效吗？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        updateChargingStandardStatus(row.id).then(response => {
+          if (response.code === API_SUCCESS_CODE) {
+            this.$message.success('操作成功')
+            this.getList()
+          } else {
+            this.$message.error(response.message || '操作失败')
+          }
+        })
+      }).catch(() => { })
+    },
+    /** 处理分页大小改变 */
+    handleSizeChange(val) {
+      this.queryParams.pageSize = val
+      this.getList()
+    },
+    /** 处理页码改变 */
+    handleCurrentChange(val) {
+      this.queryParams.pageNum = val
+      this.getList()
+    },
+    /** 格式化单价单位 */
+    formatPriceUnit(priceU, chargeMode) {
+      const oneTimeUnits = {
+        '1': '元',
+        '2': '元/㎡'
+      }
+
+      const periodicUnits = {
+        '1': '元',
+        '2': '元/天',
+        '3': '元/月',
+        '4': '元/年',
+        '5': '元/㎡',
+        '6': '元/(㎡*天)',
+        '7': '元/(㎡*月)',
+        '8': '元/(㎡*年)'
+      }
+
+      return chargeMode === '1' ? periodicUnits[priceU] : oneTimeUnits[priceU]
+    },
+    /** 格式化付款时间规则 */
+    formatPaymentTimeRule(row) {
+      const ruleTypeMap = {
+        '1': '开始日期后延迟',
+        '2': '结束日期后延迟',
+        '3': '开始日期前提前',
+        '4': '结束日期前提前'
+      }
+      const ruleType = ruleTypeMap[row.paymentTimeRuleType] || '未知规则'
+      return `${ruleType} ${row.delayPaymDaynum || 0} 天`
+    },
+    /** 获取费用类型树 */
+    getFeeTypes() {
+      getFeeTypeTree({ level: 2 }).then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          console.log('原始费用类型数据:', response.data)
+
+          // 数据预处理
+          const processedData = this.processTreeData(response.data)
+          this.feeTypeOptions = processedData
+
+          console.log('处理后的费用类型数据:', this.feeTypeOptions)
+        } else {
+          console.error('获取费用类型失败:', response.message)
+        }
+      }).catch(error => {
+        console.error('获取费用类型异常:', error)
+      })
+    },
+    /** 处理树形数据 */
+    processTreeData(data) {
+      if (!data || !Array.isArray(data) || data.length === 0) {
+        console.warn('无费用类型数据')
+        return []
+      }
+
+      return data.map(category => {
+        // 确保id字段存在
+        const categoryId = category.id || Math.random().toString(36).substr(2, 9)
+
+        // 处理子节点
+        let children = []
+        if (category.financeFeeTypes && Array.isArray(category.financeFeeTypes)) {
+          children = category.financeFeeTypes.map(feeType => {
+            return {
+              id: feeType.id || Math.random().toString(36).substr(2, 9),
+              label: feeType.feTpName || '未命名费用',
+              categoryId: categoryId,
+              // 存储原始数据以便后续使用
+              feTpName: feeType.feTpName || '未命名费用',
+              // 确保没有更多的子节点
+              children: null
+            }
+          })
+        }
+
+        return {
+          id: categoryId,
+          label: category.categoryName || '未命名分类',
+          categoryName: category.categoryName || '未命名分类',
+          children: children.length > 0 ? children : null
+        }
+      }).filter(item => item.children && item.children.length > 0)
+    },
+    /** 获取状态类型 */
+    getStatusType(status) {
+      const statusMap = {
+        '0': 'info',
+        '1': 'success',
+        '2': 'danger'
+      }
+      return statusMap[status] || 'info'
+    },
+    /** 获取状态名称 */
+    getStatusName(status) {
+      const statusMap = {
+        '0': '待生效',
+        '1': '生效中',
+        '2': '已失效'
+      }
+      return statusMap[status] || '未知状态'
+    },
+    /** 格式化账单划分方式 */
+    formatBillDivisionMethod(method) {
+      const methodMap = {
+        '1': '按起始日划分',
+        '2': '按自然月划分（首月非整自然月划入第一期）',
+        '3': '按自然月划分（首月非整自然月算一个月）'
+      }
+      return methodMap[method] || '未知账单划分方式'
+    },
+    /** 格式化百分比 */
+    formatPercentage(value) {
+      return (value * 100).toFixed(2) + '%'
+    },
+
+    /** 绑定数据源查询参数重置 */
+    resetBindDataQuery() {
+      this.bindDataQueryParams.pageNum = 1
+      // 重置额外查询字段，但保留必要的standardId等基本信息
+      this.bindDataForm.payerId = ''
+      this.bindDataForm.projectId = ''
+      this.bindDataForm.companyId = ''
+      this.bindDataForm.feeTypeId = null
+      this.bindDataForm.beginDate = ''
+      this.bindDataForm.endDate = ''
+      this.bindDataForm.billDivisionMethod = ''
+      this.bindDataForm.roomId = ''
+      this.getBindDataList()
+    },
+
+    /** 处理绑定数据源分页大小改变 */
+    handleBindDataSizeChange(val) {
+      this.bindDataQueryParams.pageSize = val
+      this.getBindDataList()
+    },
+
+    /** 处理绑定数据源页码改变 */
+    handleBindDataCurrentChange(val) {
+      this.bindDataQueryParams.pageNum = val
+      this.getBindDataList()
+    },
+
+    /** 处理日期范围选择变更 */
+    handleDateRangeChange(val) {
+      if (val && val.length === 2) {
+        this.billForm.startDate = val[0]
+        this.billForm.endDate = val[1]
+        this.billForm.chggBgnDt = val[0]
+        this.billForm.chggEndDt = val[1]
+      } else {
+        this.billForm.startDate = ''
+        this.billForm.endDate = ''
+        this.billForm.chggBgnDt = ''
+        this.billForm.chggEndDt = ''
+      }
+      // 清空预览数据
+      this.clearPreviewData()
+    },
+
+    /** 处理房源树选择 */
+    handleRoomTreeCheck(node, data) {
+      // 只选择叶子节点（房间）
+      const checkedNodes = this.$refs.roomTree.getCheckedNodes(true)
+      // 过滤出所有房间节点
+      const roomNodes = checkedNodes.filter(node => node.isRoom)
+
+      // 创建一个Map用于收集项目信息
+      const projectMap = new Map()
+
+      // 处理每个房间节点
+      roomNodes.forEach(roomNode => {
+        // 查找节点路径
+        let currentNode = this.$refs.roomTree.getNode(roomNode.id)
+        let roomInfo = roomNode.roomData
+        let floorNode, buildingNode, projectNode
+
+        // 向上遍历找到楼层、楼宇和项目节点
+        while (currentNode && currentNode.parent) {
+          const parent = currentNode.parent
+          if (parent.level === 3) { // 楼层级别
+            floorNode = parent.data
+          } else if (parent.level === 2) { // 楼宇级别
+            buildingNode = parent.data
+          } else if (parent.level === 1) { // 项目级别
+            projectNode = parent.data
+          }
+          currentNode = parent
+        }
+
+        // 只有完整路径的房间才处理
+        if (roomInfo && floorNode && buildingNode && projectNode) {
+          // 确认项目是否已在Map中
+          if (!projectMap.has(projectNode.id)) {
+            projectMap.set(projectNode.id, {
+              id: projectNode.id,
+              projectName: projectNode.label,
+              projectType: '产业园区', // 如果有projectType属性，应该使用projectNode中的值
+              buildings: []
+            })
+          }
+
+          // 获取当前项目
+          const project = projectMap.get(projectNode.id)
+
+          // 查找楼宇
+          let building = project.buildings.find(b => b.id === buildingNode.id)
+          if (!building) {
+            building = {
+              id: buildingNode.id,
+              buildingName: buildingNode.label,
+              buildingCode: '', // 如果有buildingCode属性，应该使用buildingNode中的值
+              floors: []
+            }
+            project.buildings.push(building)
+          }
+
+          // 查找楼层
+          let floor = building.floors.find(f => f.id === floorNode.id)
+          if (!floor) {
+            floor = {
+              id: floorNode.id,
+              floorName: floorNode.label,
+              floorNumber: 0, // 如果有floorNumber属性，应该使用floorNode中的值
+              rooms: []
+            }
+            building.floors.push(floor)
+          }
+
+          // 添加房间
+          const room = {
+            id: roomInfo.id,
+            roomNumber: roomInfo.roomNumber || roomNode.label.split('（')[0],
+            roomType: roomInfo.roomType || '',
+            roomStatus: roomInfo.roomStatus || '1',
+            buildingArea: roomInfo.buildingArea || 0,
+            rentalArea: roomInfo.rentalArea || 0
+          }
+
+          // 检查该房间是否已经存在
+          const roomExists = floor.rooms.some(r => r.id === room.id)
+          if (!roomExists) {
+            floor.rooms.push(room)
+          }
+        }
+      })
+
+      // 将Map转换为数组
+      this.billForm.roomIds = Array.from(projectMap.values())
+
+      // 清空预览数据
+      this.clearPreviewData()
+    },
+    getCurrentDate() {
+      return new Date().toISOString().split('T')[0];
+    },
+    /** 处理日期范围变更 */
+    handleDateRangeChange(dateRange) {
+      if (dateRange) {
+        this.bindDataForm.beginDate = dateRange[0]
+        this.bindDataForm.endDate = dateRange[1]
+      } else {
+        this.bindDataForm.beginDate = ''
+        this.bindDataForm.endDate = ''
+      }
+    },
+
+    /** 打开绑定数据查询弹窗 */
+    handleViewBindData(row) {
+      this.bindDataOpen = true
+      this.bindDataForm.standardId = row.id
+      this.bindDataForm.standardName = row.standardName
+      this.bindDataForm.effectiveDate = row.effectiveDate
+      this.bindDataForm.expiryDate = row.expiryDate
+      this.bindDataForm.status = row.status
+      this.bindDataForm.bindingObjectType = row.bindingObjectType
+      // 重置其他查询字段
+      this.bindDataForm.payerId = ''
+      this.bindDataForm.projectId = ''
+      this.bindDataForm.companyId = ''
+      this.bindDataForm.feeTypeId = null
+      this.bindDataForm.beginDate = ''
+      this.bindDataForm.endDate = ''
+      this.bindDataForm.billDivisionMethod = ''
+      this.bindDataForm.roomId = ''
+      this.dateRange = []
+
+      // 加载项目列表(如果还没有)
+      if (this.projectOptions.length === 0) {
+        this.getProjectOptions()
+      }
+
+      // 加载费用类型(如果还没有)
+      if (this.feeTypeOptions.length === 0) {
+        this.getFeeTypeOptions()
+      }
+
+      this.getBindDataList()
+    },
+
+    /** 获取项目选项 */
+    getProjectOptions() {
+      // 这里应该调用项目接口获取项目列表
+      // 示例数据
+      this.projectOptions = [
+        { projectId: 'P001', projectName: '智慧园区A区' },
+        { projectId: 'P002', projectName: '智慧园区B区' },
+        { projectId: 'P003', projectName: '智慧产业园' }
+      ]
+    },
+
+    /** 根据房间ID获取房间信息 */
+    getRoomInfoByRoomId(roomId) {
+      // 默认返回的房间信息
+      const defaultInfo = {
+        roomNumber: roomId,
+        floorName: '-',
+        buildingName: '-'
+      }
+
+      // 从房源树中查找房间信息
+      for (const project of this.roomTreeData || []) {
+        for (const building of project.buildings || []) {
+          for (const floor of building.floors || []) {
+            for (const room of floor.rooms || []) {
+              if (room.id.toString() === roomId.toString()) {
+                return {
+                  roomNumber: room.roomNumber,
+                  floorName: floor.floorName,
+                  buildingName: building.buildingName
+                }
+              }
+            }
+          }
+        }
+      }
+
+      return defaultInfo
+    },
+
+    /** 格式化日期时间 */
+    formatDateTime(dateTimeStr) {
+      if (!dateTimeStr) return '-'
+      // 处理后端返回的ISO格式日期
+      const date = new Date(dateTimeStr)
+      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
+    },
+
+    /** 获取清算状态类型 */
+    getClearStatusType(status) {
+      const statusMap = {
+        '1': 'error',  
+        '2': 'success', 
+        '3': 'success',
+        '4': 'warning',  
+        '5': 'warning',         
+        '6': 'info',
+        '7': 'success',
+      }
+      return statusMap[status] || ''
+    },
+
+    /** 获取清算状态名称 */
+    getClearStatusName(status) {
+      const statusMap = {
+        '1': '未付款',
+        '2': '已结清',
+        '3': '部分结清',
+        '4': '待退款',
+        '5': '待收款',
+        '6': '对账确认中',
+        '7': '已付款',
+      }
+      return statusMap[status] || '未知'
+    },
+  },
+  watch: {
+    'billForm.decimalPrecisionPrice': 'handleFormFieldChange',
+    'billForm.receivableAmountPrecision': 'handleFormFieldChange',
+    'billForm.price': 'handleFormFieldChange',
+    'billForm.priceU': 'handleFormFieldChange',
+    'billForm.taxInclusiveRule': 'handleFormFieldChange',
+    'billForm.taxRate': 'handleFormFieldChange',
+    'billForm.dayPriceConversionRule': 'handleFormFieldChange',
+    'billForm.paymentDate': 'handleFormFieldChange',
+    'billForm.quantity': 'handleFormFieldChange',
+    'billForm.feeTypeId': 'handleFormFieldChange',
+    'billForm.paymentTimeRuleType': 'handleFormFieldChange',
+    'billForm.delayPaymDaynum': 'handleFormFieldChange',
+    'billForm.dateCalculationMethod': 'handleFormFieldChange',
+    'billForm.billingType': 'handleFormFieldChange',
+    'billForm.chrgingUnitVal': 'handleFormFieldChange',
+    'billForm.remitCycleVal': 'handleFormFieldChange',
+    'billForm.billDivisionMethod': 'handleFormFieldChange',
+    'billForm.billRemark': 'handleFormFieldChange',
+    'billForm.chggBgnDt': 'handleFormFieldChange',
+    'billForm.chggEndDt': 'handleFormFieldChange'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pagination-container {
+  margin-top: 20px;
+  text-align: right;
+}
+
+.app-container {
+  padding: 20px;
+
+  .search-form {
+    margin-bottom: 20px;
+  }
+
+  .mb12 {
+    margin-bottom: 12px;
+  }
+
+
+
+  .el-divider {
+    margin: 24px 0;
+  }
+
+  .percentage-text {
+    margin-left: 5px;
+  }
+
+  .standard-form {
+
+    .el-input,
+    .el-select,
+    .el-cascader,
+    .el-date-picker,
+    .el-input-number {
+      text-align: left !important;
+
+      ::v-deep .el-input__inner {
+        text-align: left;
+      }
+    }
+
+    .payment-rule {
+      margin-bottom: 10px;
+
+      .payment-rule-container {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    .payment-time {
+      margin-bottom: 22px;
+    }
+
+    .unit-label {
+      margin-left: 5px;
+    }
+
+    .text-left {
+      ::v-deep .el-input__inner {
+        text-align: left;
+      }
+    }
+  }
+
+  .bind-data-header {
+    margin-bottom: 20px;
+  }
+
+  .box-card {
+    margin-bottom: 20px;
+
+    .clearfix:before,
+    .clearfix:after {
+      display: table;
+      content: "";
+    }
+
+    .clearfix:after {
+      clear: both;
+    }
+  }
+
+  .bill-preview-container {
+    .bill-summary {
+      margin-top: 20px;
+      text-align: right;
+
+      .bill-total-label {
+        font-size: 16px;
+        font-weight: bold;
+        margin-right: 10px;
+      }
+
+      .bill-total-amount {
+        font-size: 20px;
+        font-weight: bold;
+        color: #f56c6c;
+      }
+    }
+  }
+}
+
+::v-deep .el-input-number .el-input__inner {
+  text-align: left;
+}
+
+/* 绑定房间列表对话框相关样式 */
+.room-bills-container {
+  margin-bottom: 20px;
+}
+
+.room-info {
+  background-color: #f5f7fa;
+  padding: 12px 15px;
+  border-radius: 4px;
+  margin-bottom: 10px;
+  font-weight: bold;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+
+  span {
+    margin-right: 20px;
+    display: inline-flex;
+    align-items: center;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+.empty-data {
+  padding: 40px 0;
+}
+</style>
diff --git a/pc/src/views/finance/feeType/index.vue b/pc/src/views/finance/feeType/index.vue
new file mode 100644
index 0000000..9ae0efd
--- /dev/null
+++ b/pc/src/views/finance/feeType/index.vue
@@ -0,0 +1,655 @@
+<template>
+    <div class="app-container">
+        <el-row :gutter="20">
+            <!-- 左侧：费用分类 -->
+            <el-col :span="6">
+                <div class="category-container">
+                    <div class="category-header">
+                        <h3>费用分类</h3>
+                        <el-button type="primary" size="mini" icon="el-icon-plus"
+                            @click="handleAddCategory">新增</el-button>
+                    </div>
+                    <div class="category-search">
+                        <el-input v-model="categoryQuery" placeholder="请输入分类名称" clearable size="small"
+                            @keyup.enter.native="handleCategorySearch">
+                            <el-button slot="append" icon="el-icon-search" @click="handleCategorySearch"></el-button>
+                        </el-input>
+                    </div>
+                    <el-menu :default-active="selectedCategoryId ? selectedCategoryId.toString() : ''"
+                        class="category-menu" @select="handleCategorySelect">
+                        <el-menu-item v-for="item in categoryList" :key="item.id" :index="item.id.toString()"
+                            class="category-item">
+                            <span>{{ item.categoryName }}</span>
+                            <div class="category-actions">
+                                <el-tooltip content="编辑" placement="top" :disabled="item.defauVerFlag === '1'">
+                                    <el-button type="text" icon="el-icon-edit" @click.stop="handleEditCategory(item)"
+                                        :disabled="item.defauVerFlag === '1'"></el-button>
+                                </el-tooltip>
+                                <el-tooltip content="删除" placement="top" :disabled="item.defauVerFlag === '1'">
+                                    <el-button type="text" icon="el-icon-delete"
+                                        @click.stop="handleDeleteCategory(item)"
+                                        :disabled="item.defauVerFlag === '1'"></el-button>
+                                </el-tooltip>
+                            </div>
+                        </el-menu-item>
+                    </el-menu>
+                </div>
+            </el-col>
+            <!-- 右侧：费用类型 -->
+            <el-col :span="18">
+                <div class="fee-type-container">
+                    <div class="fee-type-header">
+                        <div class="header-title">
+                            <h3>费用类型</h3>
+                            <span v-if="selectedCategory">- {{ selectedCategory.categoryName }}</span>
+                        </div>
+                        <el-button type="primary" icon="el-icon-plus" @click="handleAddType"
+                            :disabled="!selectedCategoryId">新增费用类型</el-button>
+                    </div>
+                    <!-- 费用类型搜索区域 -->
+                    <div class="fee-type-search">
+                        <el-form :inline="true" :model="queryParams" class="search-form">
+                            <el-form-item label="费用名称">
+                                <el-input v-model="queryParams.feTpName" placeholder="请输入费用名称" clearable
+                                    @keyup.enter.native="handleQuery"></el-input>
+                            </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-form>
+                    </div>
+                    <!-- 费用类型表格 -->
+                    <el-table v-loading="loading" :data="typeList" border>
+                        <el-table-column type="index" width="50" align="center" label="序号"></el-table-column>
+                        <el-table-column prop="feTpName" label="费用名称" min-width="140"></el-table-column>
+                        <el-table-column label="费用分类" min-width="120" align="center">
+                            <template slot-scope="scope">
+                                {{ getCategoryNameById(scope.row.categoryId) }}
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="status" label="状态" width="100" align="center">
+                            <template slot-scope="scope">
+                                <el-tag :type="scope.row.status === '1' ? 'success' : 'info'">
+                                    {{ scope.row.status === '1' ? '开启' : '关闭' }}
+                                </el-tag>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="操作" width="150" align="center">
+                            <template slot-scope="scope">
+                                <el-button size="mini" type="text" icon="el-icon-edit"
+                                    @click="handleEditType(scope.row)">编辑</el-button>
+                                <el-button size="mini" type="text" icon="el-icon-delete"
+                                    @click="handleDeleteType(scope.row)"
+                                    :disabled="scope.row.defauVerFlag === '1'">删除</el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                    <!-- 分页区域 -->
+                    <el-pagination v-show="total > 0" @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-col>
+        </el-row>
+
+        <!-- 添加或修改费用分类对话框 -->
+        <el-dialog :title="categoryTitle" :visible.sync="categoryOpen" width="500px" append-to-body
+            @open="onCategoryDialogOpen">
+            <el-form ref="categoryForm" :model="categoryForm" :rules="categoryRules" label-width="100px">
+                <el-form-item label="分类名称" prop="categoryName">
+                    <el-input v-model="categoryForm.categoryName" placeholder="请输入分类名称" :disabled="categoryEdit"
+                        style="width: 100%"></el-input>
+                </el-form-item>
+                <el-form-item label="保证金类型" prop="feeTpNo">
+                    <el-radio-group v-model="categoryForm.feeTpNo">
+                        <el-radio label="1">是</el-radio>
+                        <el-radio label="0">否</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="categoryOpen = false">取 消</el-button>
+                <el-button type="primary" @click="submitCategoryForm">确 定</el-button>
+            </div>
+        </el-dialog>
+
+        <!-- 添加或修改费用类型对话框 -->
+        <el-dialog :title="typeTitle" :visible.sync="typeOpen" width="500px" append-to-body @open="onTypeDialogOpen">
+            <el-form ref="typeForm" :model="typeForm" :rules="typeRules" label-width="120px">
+                <el-form-item label="费用分类" prop="categoryId">
+                    <el-select v-model="typeForm.categoryId" placeholder="请选择费用分类" style="width: 100%">
+                        <el-option 
+                            v-for="item in categoryList" 
+                            :key="item.id" 
+                            :label="item.categoryName" 
+                            :value="item.id">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="费用类型名称" prop="feTpName">
+                    <el-input v-model="typeForm.feTpName" placeholder="请输入费用类型名称" :disabled="typeEdit"
+                        style="width: 100%"></el-input>
+                </el-form-item>
+                <el-form-item label="状态" prop="status">
+                    <el-radio-group v-model="typeForm.status">
+                        <el-radio label="1">开启</el-radio>
+                        <el-radio label="0">关闭</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="typeOpen = false">取 消</el-button>
+                <el-button type="primary" @click="submitTypeForm">确 定</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import {
+    getFeeCategories,
+    getAllFeeCategories,
+    getFeeCategory,
+    addFeeCategory,
+    updateFeeCategory,
+    deleteFeeCategory,
+    getFeeTypes,
+    getFeeType,
+    addFeeType,
+    updateFeeType,
+    deleteFeeType
+} from '@/api/finance'
+import { API_SUCCESS_CODE } from '@/utils/constants'
+
+export default {
+    name: 'FeeTypeManagement',
+    data() {
+        return {
+            // 遮罩层
+            loading: false,
+            // 分类列表
+            categoryList: [],
+            // 费用类型列表
+            typeList: [],
+            // 总条数
+            total: 0,
+            // 分类查询条件
+            categoryQuery: '',
+            // 选中的分类ID
+            selectedCategoryId: null,
+            // 选中的分类对象
+            selectedCategory: null,
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                feTpName: undefined,
+                categoryId: null
+            },
+
+            // 分类对话框相关
+            categoryOpen: false,
+            categoryTitle: '',
+            categoryEdit: false,
+            categoryForm: {
+                id: undefined,
+                categoryName: undefined,
+                feeTpNo: '0',
+                defauVerFlag: '0'
+            },
+            categoryRules: {
+                categoryName: [
+                    { required: true, message: '分类名称不能为空', trigger: 'blur' },
+                    { min: 2, max: 50, message: '分类名称长度必须在2-50个字符之间', trigger: 'blur' }
+                ],
+                feeTpNo: [
+                    { required: true, message: '保证金类型不能为空', trigger: 'change' }
+                ]
+            },
+
+            // 费用类型对话框相关
+            typeOpen: false,
+            typeTitle: '',
+            typeEdit: false,
+            typeForm: {
+                id: undefined,
+                feTpName: '',
+                categoryId: null,
+                status: '1',
+                defauVerFlag: '0'
+            },
+            typeRules: {
+                feTpName: [
+                    { required: true, message: '费用类型名称不能为空', trigger: 'blur' },
+                    { min: 2, max: 50, message: '费用类型名称长度必须在2-50个字符之间', trigger: 'blur' }
+                ],
+                status: [
+                    { required: true, message: '状态不能为空', trigger: 'change' }
+                ]
+            }
+        }
+    },
+    created() {
+        this.getCategoryList()
+    },
+    methods: {
+        // 获取分类列表
+        getCategoryList() {
+            getAllFeeCategories().then(response => {
+                if (response.code === API_SUCCESS_CODE) {
+                    this.categoryList = response.data
+                    if (this.categoryList.length > 0 && !this.selectedCategoryId) {
+                        this.handleCategorySelect(this.categoryList[0].id.toString())
+                    }
+                } else {
+                    this.$message.error(response.message || '获取费用分类失败')
+                }
+            })
+        },
+        // 查询分类
+        handleCategorySearch() {
+            if (this.categoryQuery) {
+                const params = { categoryName: this.categoryQuery, pageNum: 1, pageSize: 100 }
+                getFeeCategories(params).then(response => {
+                    if (response.code === API_SUCCESS_CODE) {
+                        this.categoryList = response.data.list
+                    } else {
+                        this.$message.error(response.message || '查询失败')
+                    }
+                })
+            } else {
+                this.getCategoryList()
+            }
+        },
+        // 选择分类
+        handleCategorySelect(categoryId) {
+            this.selectedCategoryId = categoryId
+            this.selectedCategory = this.categoryList.find(item => item.id.toString() === categoryId)
+            this.queryParams.categoryId = parseInt(categoryId)
+            this.queryParams.pageNum = 1
+            this.getTypeList()
+        },
+        // 获取费用类型列表
+        getTypeList() {
+            this.loading = true
+            getFeeTypes(this.queryParams).then(response => {
+                if (response.code === API_SUCCESS_CODE) {
+                    this.typeList = response.data.list
+                    this.total = response.data.total
+                } else {
+                    this.$message.error(response.message || '查询失败')
+                    this.typeList = []
+                    this.total = 0
+                }
+                this.loading = false
+            }).catch(() => {
+                this.loading = false
+            })
+        },
+        // 搜索按钮操作
+        handleQuery() {
+            this.queryParams.pageNum = 1
+            this.getTypeList()
+        },
+        // 重置查询操作
+        resetQuery() {
+            this.queryParams.feTpName = undefined
+            this.handleQuery()
+        },
+        // 每页条数改变
+        handleSizeChange(size) {
+            this.queryParams.pageSize = size
+            this.getTypeList()
+        },
+        // 当前页改变
+        handleCurrentChange(page) {
+            this.queryParams.pageNum = page
+            this.getTypeList()
+        },
+
+        // 新增分类操作
+        handleAddCategory() {
+            this.categoryForm = {
+                id: undefined,
+                categoryName: undefined,
+                feeTpNo: '0',
+                defauVerFlag: '0'
+            }
+            this.categoryTitle = '新增费用分类'
+            this.categoryEdit = false
+            this.categoryOpen = true
+            this.$nextTick(() => {
+                if (this.$refs.categoryForm) {
+                    this.$refs.categoryForm.resetFields()
+                }
+            })
+        },
+        // 编辑分类操作
+        handleEditCategory(row) {
+            getFeeCategory(row.id).then(response => {
+                if (response.code === API_SUCCESS_CODE) {
+                    const categoryData = response.data
+                    // 确保保证金类型字段是字符串
+                    if (categoryData.feeTpNo !== undefined) {
+                        categoryData.feeTpNo = categoryData.feeTpNo.toString()
+                    }
+
+                    this.categoryTitle = '修改费用分类'
+                    this.categoryEdit = true
+
+                    // 先设置数据，再打开弹窗
+                    this.categoryForm = categoryData
+                    this.categoryOpen = true
+                } else {
+                    this.$message.error(response.message || '获取详情失败')
+                }
+            })
+        },
+        // 提交分类表单
+        submitCategoryForm() {
+            this.$refs.categoryForm.validate(valid => {
+                if (valid) {
+                    if (this.categoryForm.id) {
+                        updateFeeCategory(this.categoryForm.id, this.categoryForm).then(response => {
+                            if (response.code === API_SUCCESS_CODE) {
+                                this.$message.success('修改成功')
+                                this.categoryOpen = false
+                                this.getCategoryList()
+                            } else {
+                                this.$message.error(response.message || '修改失败')
+                            }
+                        })
+                    } else {
+                        addFeeCategory(this.categoryForm).then(response => {
+                            if (response.code === API_SUCCESS_CODE) {
+                                this.$message.success('新增成功')
+                                this.categoryOpen = false
+                                this.getCategoryList()
+                            } else {
+                                this.$message.error(response.message || '新增失败')
+                            }
+                        })
+                    }
+                }
+            })
+        },
+        // 删除分类操作
+        handleDeleteCategory(row) {
+            this.$confirm('是否确认删除该费用分类?', '警告', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                deleteFeeCategory(row.id).then(response => {
+                    if (response.code === API_SUCCESS_CODE) {
+                        this.$message.success('删除成功')
+                        this.getCategoryList()
+                        // 如果删除的是当前选中的分类，重置选中状态
+                        if (this.selectedCategoryId === row.id.toString()) {
+                            this.selectedCategoryId = null
+                            this.selectedCategory = null
+                            this.typeList = []
+                        }
+                    } else {
+                        this.$message.error(response.message || '删除失败')
+                    }
+                })
+            }).catch(() => { })
+        },
+
+        // 新增费用类型按钮操作
+        handleAddType() {
+            this.typeTitle = '新增费用类型'
+            this.typeEdit = false
+            this.typeOpen = true
+
+            // 在下一个事件循环清空表单验证信息
+            this.$nextTick(() => {
+                // 重置表单数据
+                this.typeForm = {
+                    id: undefined,
+                    feTpName: '',
+                    categoryId: this.selectedCategoryId ? parseInt(this.selectedCategoryId) : null,
+                    status: '1',
+                    defauVerFlag: '0'
+                }
+                if (this.$refs.typeForm) {
+                    this.$refs.typeForm.resetFields()
+                }
+            })
+        },
+        // 修改费用类型按钮操作
+        handleEditType(row) {
+            getFeeType(row.id).then(response => {
+                if (response.code === API_SUCCESS_CODE) {
+                    // 先设置数据
+                    const typeData = response.data
+                    // 确保所有字段都是字符串类型
+                    if (typeData.status !== undefined) {
+                        typeData.status = typeData.status.toString()
+                    }
+                    // 确保 categoryId 是正确类型
+                    if (typeData.categoryId !== undefined) {
+                        // 不转换为字符串，保持原始类型，确保能和select中的value匹配
+                        typeData.categoryId = parseInt(typeData.categoryId)
+                    }
+
+                    this.typeTitle = '修改费用类型'
+                    this.typeEdit = true
+
+                    // 先设置完整数据，然后再打开弹窗
+                    this.typeForm = typeData
+                    this.typeOpen = true
+                } else {
+                    this.$message.error(response.message || '获取详情失败')
+                }
+            })
+        },
+        // 提交费用类型表单
+        submitTypeForm() {
+            this.$refs.typeForm.validate(valid => {
+                if (valid) {
+                    // 创建提交的数据对象，只包含需要的字段
+                    const submitData = {
+                        id: this.typeForm.id,
+                        feTpName: this.typeForm.feTpName,
+                        categoryId: this.typeForm.categoryId,
+                        status: this.typeForm.status
+                    }
+
+                    if (this.typeForm.id) {
+                        updateFeeType(this.typeForm.id, submitData).then(response => {
+                            if (response.code === API_SUCCESS_CODE) {
+                                this.$message.success('修改成功')
+                                this.typeOpen = false
+                                this.getTypeList()
+                            } else {
+                                this.$message.error(response.message || '修改失败')
+                            }
+                        })
+                    } else {
+                        addFeeType(submitData).then(response => {
+                            if (response.code === API_SUCCESS_CODE) {
+                                this.$message.success('新增成功')
+                                this.typeOpen = false
+                                this.getTypeList()
+                            } else {
+                                this.$message.error(response.message || '新增失败')
+                            }
+                        })
+                    }
+                }
+            })
+        },
+        // 删除费用类型按钮操作
+        handleDeleteType(row) {
+            this.$confirm('是否确认删除该费用类型?', '警告', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                deleteFeeType(row.id).then(response => {
+                    if (response.code === API_SUCCESS_CODE) {
+                        this.$message.success('删除成功')
+                        this.getTypeList()
+                    } else {
+                        this.$message.error(response.message || '删除失败')
+                    }
+                })
+            }).catch(() => { })
+        },
+        // 获取费用类型对应的分类名称
+        getCurrentTypeCategoryName() {
+            // 如果找不到分类，尝试从后端重新获取
+            if (this.typeForm.categoryId) {
+                const category = this.categoryList.find(item => item.id.toString() === this.typeForm.categoryId.toString())
+                if (category) {
+                    return category.categoryName
+                } else {
+                    // 如果typeForm中有categoryName，直接使用
+                    if (this.typeForm.categoryName) {
+                        return this.typeForm.categoryName
+                    }
+                }
+            }
+            return ''
+        },
+        // 加载完整的分类列表
+        loadFullCategoryList() {
+            getAllFeeCategories().then(response => {
+                if (response.code === API_SUCCESS_CODE) {
+                    this.categoryList = response.data
+                }
+            })
+        },
+        // 获取分类名称
+        getCategoryNameById(id) {
+            const category = this.categoryList.find(item => item.id.toString() === id.toString())
+            if (category) {
+                return category.categoryName
+            }
+            return ''
+        },
+        // 处理费用类型对话框打开事件
+        onTypeDialogOpen() {
+            // 确保加载完整的分类列表
+            this.loadFullCategoryList()
+
+            // 如果是新增且当前有选中的分类，设置默认分类
+            if (!this.typeForm.id && this.selectedCategoryId) {
+                this.typeForm.categoryId = parseInt(this.selectedCategoryId)
+                this.$nextTick(() => {
+                    if (this.$refs.typeForm) {
+                        this.$refs.typeForm.validateField('categoryId')
+                    }
+                })
+            }
+        },
+        // 处理费用分类对话框打开事件
+        onCategoryDialogOpen() {
+            // 确保加载完整的分类列表
+            this.loadFullCategoryList()
+        }
+    }
+}
+</script>
+
+<style scoped>
+.app-container {
+    padding: 20px;
+}
+
+.category-container {
+    background-color: #fff;
+    border-radius: 4px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+    height: calc(100vh - 140px);
+    display: flex;
+    flex-direction: column;
+}
+
+.category-header {
+    padding: 15px;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.category-header h3 {
+    margin: 0;
+    font-size: 16px;
+}
+
+.category-search {
+    padding: 10px 15px;
+    border-bottom: 1px solid #eee;
+}
+
+.category-menu {
+    flex: 1;
+    overflow-y: auto;
+    border-right: none;
+}
+
+.category-item {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.category-actions {
+    display: none;
+    position: absolute;
+    right: 10px;
+}
+
+.category-item:hover .category-actions {
+    display: block;
+}
+
+.fee-type-container {
+    background-color: #fff;
+    border-radius: 4px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+    padding: 15px;
+    min-height: calc(100vh - 140px);
+}
+
+.fee-type-header {
+    margin-bottom: 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.header-title {
+    display: flex;
+    align-items: center;
+}
+
+.header-title h3 {
+    margin: 0;
+    font-size: 16px;
+}
+
+.fee-type-search {
+    margin-bottom: 15px;
+}
+
+/* 确保表格不会超出容器 */
+.el-table {
+    width: 100%;
+    margin-bottom: 15px;
+}
+
+/* 分页组件样式 */
+.el-pagination {
+    padding: 10px 0;
+    text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/pc/src/views/finance/receipt/issue.vue b/pc/src/views/finance/receipt/issue.vue
new file mode 100644
index 0000000..bdd972a
--- /dev/null
+++ b/pc/src/views/finance/receipt/issue.vue
@@ -0,0 +1,563 @@
+<template>
+  <div class="issue-receipt-container">
+    <el-card>
+      <div slot="header" class="clearfix">
+        <span>开具收据</span>
+        <el-button style="float: right;" size="small" @click="goBack">返回</el-button>
+      </div>
+      
+      <div v-loading="loading">
+        <!-- 账单基本信息 -->
+        <div class="bill-info-section">
+          <h3>账单基本信息</h3>
+          <el-descriptions :column="3" border size="medium">
+            <el-descriptions-item label="账单编号">{{ billInfo.totBillNo || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="交款单位">{{ billInfo.paysdName || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="费用类型">{{ billInfo.feTpName || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="费用周期">
+              {{ billInfo.chggBgnDt || '-' }} 至 {{ billInfo.chggEndDt || '-' }}
+            </el-descriptions-item>
+            <el-descriptions-item label="应收金额">{{ formatAmount(billInfo.accigRcvAmt) }}</el-descriptions-item>
+            <el-descriptions-item label="实收金额">{{ formatAmount(billInfo.atmRecvAmt) }}</el-descriptions-item>
+          </el-descriptions>
+        </div>
+        
+        <!-- 收据明细列表 -->
+        <div class="receipt-details-section">
+          <h3>收据明细列表</h3>
+          <el-table 
+            ref="receiptDetailsTable"
+            :data="receiptDetails" 
+            border 
+            style="width: 100%"
+            @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55"></el-table-column>
+            <el-table-column prop="payerUnit" label="交款单位" min-width="150" show-overflow-tooltip></el-table-column>
+            <el-table-column label="收据编号" min-width="120">
+              <template slot-scope="scope">
+                <el-tooltip content="确定开据后会根据收据编号生成规则进行生成" placement="top">
+                  <span>-</span>
+                </el-tooltip>
+              </template>
+            </el-table-column>
+            <el-table-column label="可开据金额" min-width="120" align="right">
+              <template slot-scope="scope">
+                {{ formatAmount(scope.row.availableAmount) }}
+              </template>
+            </el-table-column>
+            <el-table-column label="申请开据金额" min-width="180">
+              <template slot-scope="scope">
+                <el-input-number 
+                  v-model="scope.row.applyAmount" 
+                  :min="0" 
+                  :max="scope.row.availableAmount" 
+                  :precision="2" 
+                  :step="1"
+                  @change="calculateTotalAmount"
+                  size="small"
+                  controls-position="right">
+                </el-input-number>
+              </template>
+            </el-table-column>
+            <el-table-column prop="feeType" label="费用类型" min-width="120" show-overflow-tooltip></el-table-column>
+            <el-table-column prop="payeeUnitName" label="收款单位" min-width="150" show-overflow-tooltip></el-table-column>
+            <el-table-column prop="remark" label="备注" min-width="120" 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="handleEdit(scope.$index, scope.row)">
+                  编辑
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        
+        <!-- 收据汇总 -->
+        <div class="receipt-summary-section">
+          <el-alert
+            title="收据汇总"
+            type="info"
+            :closable="false">
+            <template slot="title">
+              已选择 <strong>{{ selectedItems.length }}</strong> 条明细，
+              申请开据金额合计：<strong>{{ formatAmount(totalAmount) }}</strong>
+            </template>
+          </el-alert>
+        </div>
+        
+        <!-- 操作按钮 -->
+        <div class="action-buttons">
+          <el-button @click="goBack">取消</el-button>
+          <el-button type="primary" @click="confirmIssue" :disabled="selectedItems.length === 0 || totalAmount <= 0" :loading="submitting">确认开具</el-button>
+        </div>
+      </div>
+    </el-card>
+    
+    <!-- 编辑收据对话框 -->
+    <el-dialog title="编辑收据信息" :visible.sync="editDialogVisible" width="700px" append-to-body>
+      <el-form :model="editForm" :rules="editRules" ref="editForm" label-width="120px" v-loading="editLoading">
+        <!-- 收据信息 -->
+        <h4 class="dialog-section-title">收据信息</h4>
+        <el-form-item label="编号规则" prop="ruleId">
+          <el-input v-model="editForm.ruleName" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="开据日期" prop="receiptDate">
+          <el-date-picker
+            v-model="editForm.receiptDate"
+            type="date"
+            placeholder="选择日期"
+            value-format="yyyy-MM-dd"
+            style="width: 100%">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="支付方式" prop="paymentMethods">
+          <el-select 
+            v-model="editForm.paymentMethods" 
+            multiple 
+            placeholder="请选择支付方式"
+            style="width: 100%">
+            <el-option
+              v-for="item in paymentMethodOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="费用类型" prop="feeType">
+          <el-input v-model="editForm.feeType" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="费用名称" prop="feeName">
+          <el-input v-model="editForm.feeName"></el-input>
+        </el-form-item>
+        <el-form-item label="开据金额" prop="applyAmount">
+          <el-input-number 
+            v-model="editForm.applyAmount" 
+            :min="0" 
+            :max="editForm.availableAmount" 
+            :precision="2" 
+            :step="1"
+            controls-position="right"
+            style="width: 100%">
+          </el-input-number>
+        </el-form-item>
+        
+        <!-- 交款方 -->
+        <h4 class="dialog-section-title">交款方</h4>
+        <el-form-item label="交款单位" prop="payerUnit">
+          <el-input v-model="editForm.payerUnit" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="交款人" prop="payerName">
+          <el-input v-model="editForm.payerName"></el-input>
+        </el-form-item>
+        <el-form-item label="地址" prop="payerAddress">
+          <el-input v-model="editForm.payerAddress"></el-input>
+        </el-form-item>
+        <el-form-item label="电话" prop="payerPhone">
+          <el-input v-model="editForm.payerPhone"></el-input>
+        </el-form-item>
+        
+        <!-- 收款方 -->
+        <h4 class="dialog-section-title">收款方</h4>
+        <el-form-item label="收款单位" prop="payeeUnitId">
+          <el-select 
+            v-model="editForm.payeeUnitId" 
+            placeholder="请选择收款单位"
+            style="width: 100%"
+            @change="handlePayeeUnitChange">
+            <el-option
+              v-for="item in payeeUnitOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="收款人" prop="payeeName">
+          <el-input v-model="editForm.payeeName"></el-input>
+        </el-form-item>
+        <el-form-item label="地址" prop="payeeAddress">
+          <el-input v-model="editForm.payeeAddress"></el-input>
+        </el-form-item>
+        <el-form-item label="电话" prop="payeePhone">
+          <el-input v-model="editForm.payeePhone"></el-input>
+        </el-form-item>
+        
+        <!-- 备注 -->
+        <h4 class="dialog-section-title">备注</h4>
+        <el-form-item label="备注" prop="remark">
+          <el-input 
+            type="textarea" 
+            v-model="editForm.remark"
+            :rows="3"
+            placeholder="请输入备注信息">
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="editDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="saveEdit" :loading="editSubmitting">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { 
+  getBillDetail, 
+  getReceiptDetails, 
+  issueReceipt, 
+  getPaymentMethodOptions 
+} from '@/api/finance'
+
+export default {
+  name: 'IssueReceipt',
+  data() {
+    return {
+      billId: null,
+      loading: false,
+      submitting: false,
+      billInfo: {},
+      receiptDetails: [],
+      selectedItems: [],
+      totalAmount: 0,
+      
+      // 编辑相关
+      editDialogVisible: false,
+      editLoading: false,
+      editSubmitting: false,
+      editIndex: -1,
+      editForm: {
+        ruleId: '',
+        ruleName: '',
+        receiptDate: '',
+        paymentMethods: [],
+        feeType: '',
+        feeName: '',
+        applyAmount: 0,
+        availableAmount: 0,
+        payerUnit: '',
+        payerName: '',
+        payerAddress: '',
+        payerPhone: '',
+        payeeUnitId: '',
+        payeeUnitName: '',
+        payeeName: '',
+        payeeAddress: '',
+        payeePhone: '',
+        remark: ''
+      },
+      editRules: {
+        receiptDate: [
+          { required: true, message: '请选择开据日期', trigger: 'change' }
+        ],
+        paymentMethods: [
+          { required: true, message: '请选择支付方式', trigger: 'change' }
+        ],
+        applyAmount: [
+          { required: true, message: '请输入开据金额', trigger: 'blur' }
+        ],
+        payeeUnitId: [
+          { required: true, message: '请选择收款单位', trigger: 'change' }
+        ]
+      },
+      
+      // 选项数据
+      paymentMethodOptions: [
+        { 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: '线上支付' }
+      ],
+      payeeUnitOptions: []
+    }
+  },
+  created() {
+    this.billId = this.$route.params.billId
+    this.fetchData()
+    this.fetchPaymentMethodOptions()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      this.loading = true
+      
+      // 获取账单详情
+      getBillDetail(this.billId).then(response => {
+        if (response.code === '0000000000000000') {
+          this.billInfo = response.data || {}
+          
+          // 获取可开据收据明细
+          this.fetchReceiptDetails()
+        } else {
+          this.$message.error(response.message || '获取账单信息失败')
+          this.loading = false
+        }
+      }).catch(() => {
+        this.$message.error('获取账单信息失败')
+        this.loading = false
+      })
+    },
+    
+    // 获取可开据收据明细
+    fetchReceiptDetails() {
+      getReceiptDetails(this.billId).then(response => {
+        if (response.code === '0000000000000000') {
+          this.receiptDetails = (response.data || []).map(item => {
+            return {
+              ...item,
+              applyAmount: 0, // 初始为0
+              billId: this.billId,
+              availableAmount: parseFloat(item.availableAmount || 0)
+            }
+          })
+          
+          // 处理收款单位选项
+          this.payeeUnitOptions = []
+          this.receiptDetails.forEach(item => {
+            if (item.payeeUnitId && item.payeeUnitName) {
+              // 检查是否已存在
+              const exists = this.payeeUnitOptions.some(option => option.id === item.payeeUnitId)
+              if (!exists) {
+                this.payeeUnitOptions.push({
+                  id: item.payeeUnitId,
+                  name: item.payeeUnitName
+                })
+              }
+            }
+          })
+        } else {
+          this.$message.error(response.message || '获取收据明细失败')
+        }
+        this.loading = false
+      }).catch(() => {
+        this.$message.error('获取收据明细失败')
+        this.loading = false
+      })
+    },
+    
+    // 获取支付方式选项
+    fetchPaymentMethodOptions() {
+      getPaymentMethodOptions().then(response => {
+        if (response.code === '0000000000000000') {
+          this.paymentMethodOptions = response.data || []
+        }
+      }).catch(() => {
+        // 使用默认选项
+      })
+    },
+    
+    // 处理选择变化
+    handleSelectionChange(selection) {
+      this.selectedItems = selection
+      this.calculateTotalAmount()
+    },
+    
+    // 计算总金额
+    calculateTotalAmount() {
+      this.totalAmount = this.selectedItems.reduce((sum, item) => {
+        return sum + parseFloat(item.applyAmount || 0)
+      }, 0)
+    },
+    
+    // 编辑收据
+    handleEdit(index, row) {
+      this.editIndex = index
+      
+      // 处理日期格式，确保为YYYY-MM-DD格式
+      const today = new Date()
+      const formattedDate = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`
+      
+      // 使用对象扩展运算符复制数据，避免直接修改原对象
+      this.editForm = {
+        billId: this.billId,
+        billDetailId: row.billDetailId,
+        ruleId: row.ruleId || '',
+        ruleName: row.ruleName || '默认规则',
+        receiptDate: formattedDate,
+        paymentMethods: ['1'], // 默认现金
+        feeType: row.feeType || '',
+        feeName: row.feeType || '',
+        applyAmount: parseFloat(row.applyAmount || 0),
+        availableAmount: parseFloat(row.availableAmount || 0),
+        payerUnit: row.payerUnit || '',
+        payerName: '',
+        payerAddress: '',
+        payerPhone: '',
+        payeeUnitId: row.payeeUnitId || '',
+        payeeUnitName: row.payeeUnitName || '',
+        payeeName: '',
+        payeeAddress: '',
+        payeePhone: '',
+        remark: row.remark || ''
+      }
+      
+      this.editDialogVisible = true
+      
+      // 表单验证需要在DOM更新后执行
+      this.$nextTick(() => {
+        if (this.$refs.editForm) {
+          this.$refs.editForm.clearValidate()
+        }
+      })
+    },
+    
+    // 收款单位变化
+    handlePayeeUnitChange(value) {
+      const selected = this.payeeUnitOptions.find(item => item.id === value)
+      if (selected) {
+        this.editForm.payeeUnitName = selected.name
+      }
+    },
+    
+    // 保存编辑
+    saveEdit() {
+      this.$refs.editForm.validate(valid => {
+        if (valid) {
+          // 更新原始数据
+          if (this.editIndex >= 0 && this.editIndex < this.receiptDetails.length) {
+            // 构建新对象，避免直接引用
+            const updatedRow = { ...this.receiptDetails[this.editIndex] }
+            
+            // 更新数据
+            updatedRow.applyAmount = this.editForm.applyAmount
+            updatedRow.payeeUnitId = this.editForm.payeeUnitId
+            updatedRow.payeeUnitName = this.editForm.payeeUnitName
+            updatedRow.remark = this.editForm.remark
+            
+            // 更新行数据
+            this.$set(this.receiptDetails, this.editIndex, updatedRow)
+            
+            // 如果此行已被选中，更新总金额
+            if (this.selectedItems.some(item => item === this.receiptDetails[this.editIndex])) {
+              this.calculateTotalAmount()
+            }
+            
+            this.editDialogVisible = false
+            this.$message.success('更新成功')
+          }
+        }
+      })
+    },
+    
+    // 确认开具收据
+    confirmIssue() {
+      if (this.selectedItems.length === 0) {
+        this.$message.warning('请至少选择一条收据明细')
+        return
+      }
+      
+      if (this.totalAmount <= 0) {
+        this.$message.warning('申请开据金额必须大于0')
+        return
+      }
+      
+      this.$confirm('确认开具选中的收据?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.submitIssue()
+      }).catch(() => {})
+    },
+    
+    // 提交开具收据
+    submitIssue() {
+      this.submitting = true
+      
+      // 构建请求数据
+      const receiptData = {
+        billId: this.billId,
+        receiptDate: new Date().toISOString().slice(0, 10), // 当前日期
+        paymentMethods: '1', // 默认现金
+        receiptDetails: this.selectedItems.map(item => ({
+          billId: this.billId,
+          billDetailId: item.billDetailId,
+          payerUnit: item.payerUnit,
+          availableAmount: item.availableAmount,
+          applyAmount: item.applyAmount,
+          feeType: item.feeType,
+          payeeUnitId: item.payeeUnitId,
+          payeeUnitName: item.payeeUnitName,
+          remark: item.remark
+        }))
+      }
+      
+      issueReceipt(receiptData).then(response => {
+        this.submitting = false
+        if (response.code === '0000000000000000') {
+          this.$message.success('收据开具成功')
+          // 返回上一页
+          this.$router.push('/finance/billList')
+        } else {
+          this.$message.error(response.message || '收据开具失败')
+        }
+      }).catch(error => {
+        this.submitting = false
+        this.$message.error('收据开具失败: ' + (error.message || '未知错误'))
+      })
+    },
+    
+    // 格式化金额
+    formatAmount(amount) {
+      if (amount === undefined || amount === null) {
+        return '0.00 元'
+      }
+      return parseFloat(amount).toFixed(2) + ' 元'
+    },
+    
+    // 返回上一页
+    goBack() {
+      this.$router.push('/finance/billList')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.issue-receipt-container {
+  padding: 20px;
+  
+  .bill-info-section,
+  .receipt-details-section,
+  .receipt-summary-section {
+    margin-bottom: 20px;
+  }
+  
+  h3 {
+    margin: 0 0 15px;
+    padding-left: 10px;
+    border-left: 3px solid #409EFF;
+    font-size: 16px;
+    line-height: 1.2;
+  }
+  
+  .dialog-section-title {
+    margin: 15px 0 10px;
+    padding-bottom: 5px;
+    border-bottom: 1px solid #EBEEF5;
+    color: #303133;
+    font-size: 15px;
+  }
+  
+  .receipt-summary-section {
+    margin-top: 20px;
+  }
+  
+  .action-buttons {
+    margin-top: 20px;
+    text-align: center;
+    
+    .el-button {
+      min-width: 100px;
+    }
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/pc/src/views/finance/receiptRecord/components/ReceiptDetailDialog.vue b/pc/src/views/finance/receiptRecord/components/ReceiptDetailDialog.vue
new file mode 100644
index 0000000..27c48d8
--- /dev/null
+++ b/pc/src/views/finance/receiptRecord/components/ReceiptDetailDialog.vue
@@ -0,0 +1,829 @@
+<template>
+  <el-dialog
+    title="收据详情"
+    :visible.sync="dialogVisible"
+    width="80%"
+    :before-close="handleClose"
+    class="receipt-detail-dialog"
+  >
+    <el-card v-loading="loading" class="box-card">
+      <!-- 收据基本信息 -->
+      <div slot="header" class="card-header">
+        <span>收据基本信息</span>
+      </div>
+      <el-row :gutter="20" class="info-section">
+        <el-col :span="8">
+          <div class="info-item">
+            <span class="info-label">收据编号：</span>
+            <span class="info-value">{{ receiptInfo.receiptNumber }}</span>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="info-item">
+            <span class="info-label">开据日期：</span>
+            <span class="info-value">{{ receiptInfo.receiptDate }}</span>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="info-item">
+            <span class="info-label">收据金额：</span>
+            <span class="info-value">{{ formatMoney(receiptInfo.receiptAmount) }}</span>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="info-item">
+            <span class="info-label">支付方式：</span>
+            <span class="info-value">{{ receiptInfo.payModeName }}</span>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="info-item">
+            <span class="info-label">开据人：</span>
+            <span class="info-value">{{ receiptInfo.issuerName }}</span>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="info-item">
+            <span class="info-label">费用名称：</span>
+            <span class="info-value">{{ receiptInfo.feeNm }}</span>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="info-item">
+            <span class="info-label">费用类型：</span>
+            <span class="info-value">{{ receiptInfo.feeTpName }}</span>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="info-item">
+            <span class="info-label">收据模板：</span>
+            <span class="info-value">{{ receiptInfo.receiptFileName }}</span>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="info-item">
+            <span class="info-label">状态：</span>
+            <span class="info-value">
+              <el-tag :type="getStatusType(receiptInfo.receiptStatus)">{{ receiptInfo.receiptStatusName || getStatusText(receiptInfo.receiptStatus) }}</el-tag>
+            </span>
+          </div>
+        </el-col>
+        <el-col :span="24" v-if="receiptInfo.receiptFileName">
+          <div class="info-item">
+            <span class="info-label">收据文件：</span>
+            <el-dropdown>
+              <span class="el-dropdown-link file-link">
+                {{ receiptInfo.receiptFileName }}<i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item @click.native="downloadFile">下载</el-dropdown-item>
+                <el-dropdown-item @click.native="printFile">打印</el-dropdown-item>
+                <el-dropdown-item @click.native="handlePreviewFile">在线预览</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 交款方信息 -->
+      <div class="card-header section-header">
+        <span>交款方信息</span>
+      </div>
+      <el-row :gutter="20" class="info-section">
+        <el-col :span="8">
+          <div class="info-item">
+            <span class="info-label">交款单位：</span>
+            <span class="info-value">{{ receiptInfo.paymUnitName }}</span>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="info-item">
+            <span class="info-label">交款人：</span>
+            <span class="info-value">{{ receiptInfo.pymerName }}</span>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="info-item">
+            <span class="info-label">电话：</span>
+            <span class="info-value">{{ receiptInfo.pymerPhone }}</span>
+          </div>
+        </el-col>
+        <el-col :span="24">
+          <div class="info-item">
+            <span class="info-label">地址：</span>
+            <span class="info-value">{{ receiptInfo.pymerAddr }}</span>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 收款方信息 -->
+      <div class="card-header section-header">
+        <span>收款方信息</span>
+      </div>
+      <el-row :gutter="20" class="info-section">
+        <el-col :span="8">
+          <div class="info-item">
+            <span class="info-label">收款单位：</span>
+            <span class="info-value">{{ receiptInfo.payeeUnitName }}</span>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="info-item">
+            <span class="info-label">收款人：</span>
+            <span class="info-value">{{ receiptInfo.payeeName }}</span>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="info-item">
+            <span class="info-label">电话：</span>
+            <span class="info-value">{{ receiptInfo.payeePhone }}</span>
+          </div>
+        </el-col>
+        <el-col :span="24">
+          <div class="info-item">
+            <span class="info-label">地址：</span>
+            <span class="info-value">{{ receiptInfo.payeeAddr }}</span>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 款项明细 -->
+      <div class="card-header section-header">
+        <span>款项明细</span>
+      </div>
+      <el-table :data="receiptInfo.feeItems || []" border stripe class="fee-table">
+        <el-table-column label="费用类型" prop="feeTpName" min-width="150" />
+        <el-table-column label="金额" prop="amount" min-width="150">
+          <template slot-scope="{row}">
+            {{ formatMoney(row.amount) }}
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="amount-total">
+        <span class="amount-label">合计：</span>
+        <span class="amount-value">{{ formatMoney(receiptInfo.totalAmount) }}</span>
+      </div>
+
+      <!-- 开据账单 -->
+      <div class="card-header section-header">
+        <span>开据账单</span>
+      </div>
+      <el-table :data="receiptInfo.billInfos || []" border stripe>
+        <el-table-column label="账单编号" prop="billNumber" min-width="120" show-overflow-tooltip />
+        <el-table-column label="项目名称" prop="projectName" min-width="120" show-overflow-tooltip />
+        <el-table-column label="楼宇名称" prop="buildingName" min-width="120" show-overflow-tooltip />
+        <el-table-column label="房号" prop="roomNumber" min-width="80" show-overflow-tooltip />
+        <el-table-column label="租客" prop="payerName" min-width="120" show-overflow-tooltip />
+        <el-table-column label="费用类型" prop="feeTpName" min-width="120" show-overflow-tooltip />
+        <el-table-column label="应收" prop="receivableAmount" min-width="100">
+          <template slot-scope="{row}">
+            {{ formatMoney(row.receivableAmount) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="实收" prop="receivedAmount" min-width="100">
+          <template slot-scope="{row}">
+            {{ formatMoney(row.receivedAmount) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="开据金额" prop="receiptAmount" min-width="100">
+          <template slot-scope="{row}">
+            {{ formatMoney(row.receiptAmount) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="应收日期" prop="receivableDate" min-width="100" />
+      </el-table>
+
+      <!-- 备注 -->
+      <div class="card-header section-header">
+        <span>备注</span>
+      </div>
+      <div class="remark-content">
+        {{ receiptInfo.remark || '无' }}
+      </div>
+    </el-card>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="openGenerateDialog" :disabled="!canGenerate">生成收据</el-button>
+      <el-button type="danger" @click="handleVoidReceipt" :disabled="!canVoid">作废</el-button>
+      <el-button @click="handleClose">关闭</el-button>
+    </div>
+
+    <!-- 生成收据弹窗 -->
+    <el-dialog
+      title="生成收据"
+      :visible.sync="generateReceiptDialog"
+      width="500px"
+      append-to-body
+    >
+      <el-form :model="generateForm" :rules="generateRules" ref="generateForm" label-width="100px">
+        <el-form-item label="收据模板" prop="templateId">
+          <el-select v-model="generateForm.templateId" placeholder="请选择收据模板" style="width: 100%">
+            <el-option 
+              v-for="item in templateOptions" 
+              :key="item.id" 
+              :label="item.templateName" 
+              :value="item.id" 
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="generateReceiptDialog = false">取消</el-button>
+        <el-button type="primary" @click="handleGenerateReceipt">确定并下载</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 作废收据弹窗 -->
+    <el-dialog
+      title="作废收据"
+      :visible.sync="voidReceiptDialog"
+      width="500px"
+      append-to-body
+    >
+      <el-form :model="voidForm" :rules="voidRules" ref="voidForm" label-width="100px">
+        <el-form-item label="作废原因" prop="reason">
+          <el-input 
+            type="textarea" 
+            :rows="3" 
+            v-model="voidForm.reason" 
+            placeholder="请输入作废原因"
+          />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="voidReceiptDialog = false">取消</el-button>
+        <el-button type="danger" @click="confirmVoidReceipt">确定作废</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 文件预览对话框 -->
+    <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">
+          <!-- PDF文件可以直接嵌入预览 -->
+          <iframe :src="previewUrl" width="100%" height="500px" frameborder="0"></iframe>
+        </div>
+        <div v-else-if="previewUrl && isOfficeDoc" class="preview-iframe">
+          <!-- Office文档需要下载后查看 -->
+          <div class="preview-doc-info">
+            <i class="el-icon-document"></i>
+            <p>Office文档需要下载后查看，请点击下方按钮下载查看</p>
+          </div>
+        </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" :disabled="previewLoading || (!currentPreviewId && !previewUrl)">下载文件</el-button>
+          </div>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="downloadCurrentPreview" :disabled="previewLoading || (!currentPreviewId && !previewUrl)">下载Word文件(.docx)</el-button>
+        <el-button @click="previewDialogVisible = false">关 闭</el-button>
+      </div>
+    </el-dialog>
+  </el-dialog>
+</template>
+
+<script>
+import { 
+  getReceiptRecordDetail,
+  generateReceipt,
+  downloadReceipt,
+  printReceipt,
+  previewReceipt,
+  voidReceipt,
+  downloadReceiptByFilename,
+  previewReceiptByFilename,
+  printReceiptByFilename
+} from '@/api/finance'
+
+export default {
+  name: 'ReceiptDetailDialog',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    receiptId: {
+      type: [Number, String],
+      required: true
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      loading: false,
+      receiptInfo: {
+        downloadUrl: null,
+        printUrl: null,
+        previewUrl: null
+      },
+      statusMap: {
+        '0': { type: 'warning', text: '未发出' },
+        '1': { type: 'success', text: '已发出' },
+        '2': { type: 'info', text: '已回收' },
+        '3': { type: 'danger', text: '已作废' }
+      },
+      generateReceiptDialog: false,
+      generateForm: {
+        templateId: ''
+      },
+      generateRules: {
+        templateId: [{ required: true, message: '请选择收据模板', trigger: 'change' }]
+      },
+      templateOptions: [],
+      voidReceiptDialog: false,
+      voidForm: {
+        reason: ''
+      },
+      voidRules: {
+        reason: [{ required: true, message: '请输入作废原因', trigger: 'blur' }]
+      },
+      // 预览相关
+      previewDialogVisible: false,
+      previewLoading: false,
+      previewBlob: null,
+      currentPreviewName: '',
+      currentPreviewId: null,
+      isPdf: false,
+      isImage: false,
+      isOfficeDoc: false
+    }
+  },
+  computed: {
+    canGenerate() {
+      // 非已作废状态都可以生成收据
+      return this.receiptInfo.receiptStatus && this.receiptInfo.receiptStatus !== '3'
+    },
+    canVoid() {
+      // 非已作废状态的收据可以作废
+      return this.receiptInfo.receiptStatus && this.receiptInfo.receiptStatus !== '3'
+    }
+  },
+  watch: {
+    visible(val) {
+      this.dialogVisible = val
+      if (val) {
+        this.getDetail()
+      }
+    },
+    dialogVisible(val) {
+      if (!val) {
+        this.$emit('update:visible', false)
+      }
+    }
+  },
+  methods: {
+    init(row) {
+      this.dialogVisible = true
+      this.loading = true
+      this.receiptInfo = {
+        downloadUrl: null,
+        printUrl: null,
+        previewUrl: null
+      }
+      this.previewUrl = null
+      this.currentPreviewId = null
+      this.getDetail()
+    },
+    getDetail() {
+      this.loading = true
+      getReceiptRecordDetail(this.receiptId).then(response => {
+        this.receiptInfo = response.data
+        this.loading = false
+        // 获取可用的收据模板列表
+        if (response.data.templateFileNames && response.data.templateFileNames.length > 0) {
+          this.templateOptions = response.data.templateFileNames
+        } else {
+          this.getTemplateOptions()
+        }
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    getTemplateOptions() {
+      // 这里应当根据楼宇ID获取相应的收据模板列表
+      // 为了演示，这里模拟一些模板数据
+      this.templateOptions = [
+        { id: 1, templateName: '物业费收据模板' },
+        { id: 2, templateName: '租金收据模板' },
+        { id: 3, templateName: '水电费收据模板' }
+      ]
+      // 如果已有收据模板ID，默认选中
+      if (this.receiptInfo.templateId) {
+        this.generateForm.templateId = this.receiptInfo.templateId
+      }
+    },
+    formatMoney(val) {
+      if (val === null || val === undefined) return '￥0.00'
+      return '￥' + parseFloat(val).toFixed(2)
+    },
+    getStatusType(status) {
+      return this.statusMap[status] ? this.statusMap[status].type : ''
+    },
+    getStatusText(status) {
+      return this.statusMap[status] ? this.statusMap[status].text : status
+    },
+    handleClose() {
+      this.dialogVisible = false
+    },
+    downloadFile() {
+      const receiptFileName = this.receiptInfo.receiptFileName
+      if (!receiptFileName) {
+        this.$message.error('收据文件名不存在')
+        return
+      }
+      
+      downloadReceiptByFilename(receiptFileName).then(response => {
+        const blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = receiptFileName
+        link.click()
+      }).catch(error => {
+        console.error('下载收据失败', error)
+        this.$message.error('下载收据失败')
+      })
+    },
+    printFile() {
+      const receiptFileName = this.receiptInfo.receiptFileName
+      if (!receiptFileName) {
+        this.$message.error('收据文件名不存在')
+        return
+      }
+      
+      this.$message.info('正在准备打印预览，请稍候...')
+      // 先进行预览操作，获取PDF内容
+      this.previewLoading = true
+      
+      // 预览时使用PDF格式
+      previewReceiptByFilename(receiptFileName).then(response => {
+        try {
+          // 创建PDF blob对象
+          const blob = new Blob([response], { type: 'application/pdf' })
+          
+          // 创建URL用于预览并打印
+          const printUrl = URL.createObjectURL(blob)
+          
+          // 在新窗口中打开PDF进行打印
+          const printWindow = window.open('', '_blank')
+          
+          if (printWindow) {
+            // 注入HTML内容
+            const htmlContent = `
+              <!DOCTYPE html>
+              <html>
+                <head>
+                  <title>打印预览 - ${receiptFileName}</title>
+                  <style>
+                    body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; }
+                    #pdf-container { width: 100%; height: 100%; }
+                  </style>
+                </head>
+                <body>
+                  <iframe id="pdf-container" src="${printUrl}" width="100%" height="100%" frameborder="0"></iframe>
+                </body>
+              </html>
+            `;
+            
+            // 写入HTML内容
+            printWindow.document.open();
+            printWindow.document.write(htmlContent);
+            
+            // 添加脚本
+            const scriptContent = `
+              // 监听打印事件
+              window.addEventListener('afterprint', function() {
+                // 打印完成后等待1秒关闭窗口
+                setTimeout(function() { window.close(); }, 1000);
+              });
+              
+              // 在iframe加载完成后自动打开打印对话框
+              document.getElementById('pdf-container').onload = function() {
+                setTimeout(function() {
+                  window.print();
+                }, 1000);
+              };
+              
+              // 如果用户10分钟内没有操作，自动关闭窗口
+              setTimeout(function() { 
+                if(document.hasFocus()) window.close(); 
+              }, 600000);
+            `;
+            
+            // 创建并添加脚本
+            const scriptElement = printWindow.document.createElement('script');
+            scriptElement.textContent = scriptContent;
+            printWindow.document.head.appendChild(scriptElement);
+            
+            // 完成文档写入
+            printWindow.document.close();
+            
+            this.$message.success('打印预览已打开，打印完成后窗口将自动关闭')
+          } else {
+            this.$message.warning('打印窗口被阻止，请允许弹窗后重试')
+          }
+          
+          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
+      })
+    },
+    handlePreviewFile() {
+      const receiptFileName = this.receiptInfo.receiptFileName
+      if (!receiptFileName) {
+        this.$message.error('收据文件名不存在')
+        return
+      }
+      
+      this.previewLoading = true
+      this.previewDialogVisible = true
+      this.currentPreviewName = receiptFileName.replace(/\.(docx|pdf)$/i, '') // 移除扩展名
+      this.previewUrl = null
+      this.currentPreviewId = null
+      this.isPdf = false
+      this.isImage = false
+      this.isOfficeDoc = false
+      
+      // 默认使用PDF格式预览
+      previewReceiptByFilename(receiptFileName).then(response => {
+        try {
+          // 创建PDF blob对象
+          const blob = new Blob([response], { type: 'application/pdf' })
+          this.previewBlob = blob
+          this.isPdf = 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.currentPreviewId) {
+        // 使用文件ID下载 - 下载为DOCX格式
+        this.$message.info('正在准备下载Word文件，请稍候...')
+        downloadReceipt(this.currentPreviewId).then(response => {
+          // 此时response直接是blob数据
+          const blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' })
+          const link = document.createElement('a')
+          link.href = window.URL.createObjectURL(blob)
+          link.download = this.currentPreviewName ? `${this.currentPreviewName}.docx` : `收据_${new Date().toISOString().slice(0, 10)}.docx`
+          link.click()
+          this.$message.success('Word文件下载成功')
+        }).catch(error => {
+          console.error('下载收据失败', error)
+          this.$message.error('下载收据失败')
+        })
+      } else if (this.currentPreviewName) {
+        // 使用文件名下载（兼容旧逻辑）
+        this.$message.info('正在准备下载Word文件，请稍候...')
+        const fileName = this.currentPreviewName.endsWith('.docx') ? this.currentPreviewName : `${this.currentPreviewName}.docx`
+        downloadReceiptByFilename(fileName).then(response => {
+          // 此时response直接是blob数据
+          const blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' })
+          const link = document.createElement('a')
+          link.href = window.URL.createObjectURL(blob)
+          link.download = fileName
+          link.click()
+          this.$message.success('Word文件下载成功')
+        }).catch(error => {
+          console.error('下载收据失败', error)
+          this.$message.error('下载收据失败')
+        })
+      } else {
+        this.$message.error('没有可下载的文件')
+      }
+    },
+    openGenerateDialog() {
+      this.generateReceiptDialog = true
+    },
+    handleGenerateReceipt() {
+      this.$refs.generateForm.validate(valid => {
+        if (valid) {
+          const data = {
+            receiptId: this.receiptId,
+            templateId: this.generateForm.templateId
+          }
+          
+          this.generateReceiptDialog = false
+          generateReceipt(data).then(response => {
+            if (response.code === '0000000000000000') {
+              this.$message.success('收据生成成功')
+              
+              // 获取返回的文件ID - 检查返回类型
+              const outputFileId = typeof response.data === 'object' ? 
+                (response.data.outputFileId || response.data.id || response.data) : 
+                response.data
+              
+              console.log('获取到的outputFileId:', outputFileId)
+              
+              if (outputFileId) {
+                // 显示预览弹窗
+                this.previewDialogVisible = true
+                this.previewLoading = true
+                this.currentPreviewName = `收据_${this.receiptInfo.receiptNumber}_${new Date().toISOString().slice(0, 10)}`
+                this.previewUrl = null
+                this.isPdf = false
+                this.isImage = false
+                this.isOfficeDoc = false
+                this.currentPreviewId = outputFileId
+                
+                // 使用文件ID进行预览 - 预览应该是PDF格式
+                previewReceipt(outputFileId).then(response => {
+                  try {
+                    // 此时response直接是blob数据
+                    const blob = new Blob([response], { type: 'application/pdf' })
+                    this.previewBlob = blob
+                    this.previewUrl = URL.createObjectURL(blob)
+                    this.isPdf = true
+                    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
+                })
+              } else {
+                this.$message.warning('未获取到文件ID，无法预览')
+              }
+              
+              // 刷新详情数据
+              this.getDetail()
+              
+              // 通知父组件刷新列表
+              this.$emit('refresh')
+            } else {
+              this.$message.error(response.message || '生成收据失败')
+            }
+          }).catch(error => {
+            console.error('生成收据失败', error)
+            this.$message.error('生成收据失败')
+          })
+        }
+      })
+    },
+    handleVoidReceipt() {
+      this.voidReceiptDialog = true
+    },
+    confirmVoidReceipt() {
+      this.$refs.voidForm.validate(valid => {
+        if (valid) {
+          voidReceipt(this.receiptId).then(() => {
+            this.$message.success('收据已作废')
+            this.voidReceiptDialog = false
+            // 刷新详情数据
+            this.getDetail()
+            // 通知父组件刷新列表
+            this.$emit('refresh')
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.box-card {
+  margin-bottom: 20px;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.section-header {
+  border-top: 1px solid #EBEEF5;
+  padding-top: 15px;
+  margin-top: 15px;
+}
+
+.info-section {
+  padding: 10px 0;
+}
+
+.info-item {
+  margin-bottom: 10px;
+  display: flex;
+  .info-label {
+    color: #606266;
+    min-width: 80px;
+  }
+  .info-value {
+    color: #303133;
+    word-break: break-all;
+  }
+}
+
+.fee-table {
+  margin-bottom: 10px;
+}
+
+.amount-total {
+  display: flex;
+  justify-content: flex-end;
+  margin: 10px 0 20px;
+  .amount-label {
+    font-weight: bold;
+    margin-right: 10px;
+  }
+  .amount-value {
+    font-weight: bold;
+    color: #409EFF;
+    font-size: 16px;
+  }
+}
+
+.remark-content {
+  padding: 10px 0;
+  color: #606266;
+  min-height: 40px;
+}
+
+.file-link {
+  color: #409EFF;
+  cursor: pointer;
+}
+
+.preview-container {
+  min-height: 500px;
+  position: relative;
+}
+
+.preview-error {
+  text-align: center;
+  padding: 50px 0;
+  
+  i {
+    font-size: 48px;
+    color: #F56C6C;
+    margin-bottom: 20px;
+  }
+  
+  p {
+    color: #606266;
+    margin-bottom: 20px;
+  }
+}
+
+.preview-iframe {
+  width: 100%;
+  height: 500px;
+  border: 1px solid #EBEEF5;
+  border-radius: 4px;
+}
+
+.preview-image {
+  text-align: center;
+}
+
+.preview-actions {
+  margin-top: 20px;
+  text-align: right;
+}
+
+.preview-doc-info {
+  text-align: center;
+  padding: 50px 0;
+  
+  i {
+    font-size: 48px;
+    color: #409EFF;
+    margin-bottom: 20px;
+  }
+  
+  p {
+    color: #606266;
+    margin-bottom: 20px;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/pc/src/views/finance/receiptRecord/index.vue b/pc/src/views/finance/receiptRecord/index.vue
new file mode 100644
index 0000000..8318aed
--- /dev/null
+++ b/pc/src/views/finance/receiptRecord/index.vue
@@ -0,0 +1,234 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
+        <el-form-item label="创建时间">
+          <el-date-picker
+            v-model="dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+            @change="handleDateRangeChange"
+          />
+        </el-form-item>
+        <el-form-item label="交款单位">
+          <el-input
+            v-model="queryParams.paymUnitName"
+            placeholder="请输入交款单位"
+            clearable
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="收据编号">
+          <el-input
+            v-model="queryParams.receiptNumber"
+            placeholder="请输入收据编号"
+            clearable
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="收款单位">
+          <el-input
+            v-model="queryParams.payeeUnitName"
+            placeholder="请输入收款单位"
+            clearable
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="费用名称">
+          <el-input
+            v-model="queryParams.feeNm"
+            placeholder="请输入费用名称"
+            clearable
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="开据人">
+          <el-input
+            v-model="queryParams.issuerName"
+            placeholder="请输入开据人"
+            clearable
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="收据状态">
+          <el-select v-model="queryParams.receiptStatus" placeholder="请选择" clearable>
+            <el-option label="未发出" value="0" />
+            <el-option label="已发出" value="1" />
+            <el-option label="已回收" value="2" />
+            <el-option label="已作废" value="3" />
+          </el-select>
+        </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-form>
+    </div>
+
+    <el-table
+      v-loading="loading"
+      :data="receiptList"
+      border
+      stripe
+      highlight-current-row
+      @row-click="handleRowClick"
+    >
+      <el-table-column label="交款单位" prop="paymUnitName" min-width="120" show-overflow-tooltip />
+      <el-table-column label="开据日期" prop="receiptDate" min-width="100" />
+      <el-table-column label="收据编号" prop="receiptNumber" min-width="120" show-overflow-tooltip />
+      <el-table-column label="开据金额" prop="receiptAmount" min-width="100">
+        <template slot-scope="{row}">
+          {{ row.receiptAmount ? '￥' + parseFloat(row.receiptAmount).toFixed(2) : '￥0.00' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="交款人" prop="pymerName" min-width="100" show-overflow-tooltip />
+      <el-table-column label="收款单位" prop="payeeUnitName" min-width="120" show-overflow-tooltip />
+      <el-table-column label="支付方式" prop="payModeName" min-width="100" />
+      <el-table-column label="楼宇名称" prop="buildingName" min-width="120" show-overflow-tooltip />
+      <el-table-column label="收据状态" prop="receiptStatus" min-width="80">
+        <template slot-scope="{row}">
+          <el-tag :type="getStatusType(row.receiptStatus)">{{ row.receiptStatusName || getStatusText(row.receiptStatus) }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="费用名称" prop="feeNm" min-width="120" show-overflow-tooltip />
+      <el-table-column label="费用类型" prop="feeTpName" min-width="120" show-overflow-tooltip />
+      <el-table-column label="开据人" prop="issuerName" min-width="100" show-overflow-tooltip />
+    </el-table>
+
+    <!-- 直接集成分页组件 -->
+    <div class="pagination-container" v-show="total > 0">
+      <el-pagination
+        background
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page.sync="queryParams.pageNum"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size.sync="queryParams.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total">
+      </el-pagination>
+    </div>
+
+    <!-- 收据详情弹窗 -->
+    <receipt-detail-dialog
+      :visible.sync="detailDialogVisible"
+      :receipt-id="currentReceiptId"
+      @refresh="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { getReceiptRecordPage } from '@/api/finance'
+import ReceiptDetailDialog from './components/ReceiptDetailDialog'
+
+export default {
+  name: 'ReceiptRecord',
+  components: {
+    ReceiptDetailDialog
+  },
+  data() {
+    return {
+      loading: false,
+      receiptList: [],
+      total: 0,
+      dateRange: [],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        paymUnitName: undefined,
+        receiptNumber: undefined,
+        payeeUnitName: undefined,
+        feeNm: undefined,
+        issuerName: undefined,
+        receiptStatus: undefined,
+        startDate: undefined,
+        endDate: undefined
+      },
+      statusMap: {
+        '0': { type: 'warning', text: '未发出' },
+        '1': { type: 'success', text: '已发出' },
+        '2': { type: 'info', text: '已回收' },
+        '3': { type: 'danger', text: '已作废' }
+      },
+      detailDialogVisible: false,
+      currentReceiptId: null
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.loading = true
+      getReceiptRecordPage(this.queryParams).then(response => {
+        this.receiptList = response.data.data
+        this.total = response.data.total
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    handleDateRangeChange(val) {
+      if (val) {
+        this.queryParams.startDate = val[0]
+        this.queryParams.endDate = val[1]
+      } else {
+        this.queryParams.startDate = undefined
+        this.queryParams.endDate = undefined
+      }
+    },
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    resetQuery() {
+      this.dateRange = []
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        paymUnitName: undefined,
+        receiptNumber: undefined,
+        payeeUnitName: undefined,
+        feeNm: undefined,
+        issuerName: undefined,
+        receiptStatus: undefined,
+        startDate: undefined,
+        endDate: undefined
+      }
+      this.getList()
+    },
+    getStatusType(status) {
+      return this.statusMap[status] ? this.statusMap[status].type : ''
+    },
+    getStatusText(status) {
+      return this.statusMap[status] ? this.statusMap[status].text : status
+    },
+    handleRowClick(row) {
+      this.currentReceiptId = row.id
+      this.detailDialogVisible = true
+    },
+    handleSizeChange(size) {
+      this.queryParams.pageSize = size
+      this.getList()
+    },
+    handleCurrentChange(current) {
+      this.queryParams.pageNum = current
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.filter-container {
+  padding-bottom: 10px;
+}
+.pagination-container {
+  margin-top: 20px;
+  text-align: right;
+}
+</style> 
\ No newline at end of file
diff --git a/pc/src/views/finance/receiptSetting/PayeeInfo.vue b/pc/src/views/finance/receiptSetting/PayeeInfo.vue
new file mode 100644
index 0000000..262cadc
--- /dev/null
+++ b/pc/src/views/finance/receiptSetting/PayeeInfo.vue
@@ -0,0 +1,582 @@
+<template>
+  <div class="payee-info-container">
+    
+    
+    <!-- 搜索栏 -->
+    <div class="filter-container">
+      <el-input v-model="queryParams.payeeUnitName" placeholder="请输入收款方单位名称" clearable style="width: 250px;" class="filter-item" />
+      <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
+      <el-button @click="resetQuery">重置</el-button>
+      <el-button type="primary" icon="el-icon-plus"  style="float: right;" @click="handleAdd">新增收款方信息</el-button>
+    </div>
+    
+    <!-- 收款方信息列表 -->
+    <el-table v-loading="loading" :data="payeeList" border style="margin-top: 15px;">
+      <el-table-column prop="companyId" label="关联公司">
+        <template slot-scope="scope">
+          {{ formatCompanyName(scope.row.companyId) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="payeeUnitName" label="收款方单位名称" />
+      <el-table-column prop="payeeName" label="收款人" />
+      <el-table-column prop="payeeAddr" label="地址" />
+      <el-table-column prop="payeePhone" label="电话" />
+      <el-table-column prop="buildingIds" label="应用楼宇">
+        <template slot-scope="scope">
+          {{ formatBuildingNames(scope.row.buildingIds) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="150">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
+          <el-button type="text" size="small" @click="handleDelete(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.current" :page-sizes="[10, 20, 30, 50]" :page-size="queryParams.size"
+        layout="total, sizes, prev, pager, next, jumper" :total="total" />
+    </div>
+
+    <!-- 编辑收款方信息对话框 -->
+    <el-dialog :title="isEdit ? '编辑收款方信息' : '新增收款方信息'" :visible.sync="dialogVisible" width="550px" append-to-body>
+      <el-form :model="form" :rules="rules" ref="payeeFormRef" label-width="150px">
+        <el-form-item label="关联公司" prop="companyId">
+          <el-select v-model="form.companyId" placeholder="请选择关联公司" style="width: 100%;">
+            <el-option 
+              v-for="item in companyOptions" 
+              :key="item.id" 
+              :label="item.name" 
+              :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="收款方单位名称" prop="payeeUnitName">
+          <el-input v-model="form.payeeUnitName" placeholder="请输入收款方单位名称" />
+        </el-form-item>
+        <el-form-item label="收款人" prop="payeeName">
+          <el-input v-model="form.payeeName" placeholder="请输入收款人" />
+        </el-form-item>
+        <el-form-item label="地址" prop="payeeAddr">
+          <el-input v-model="form.payeeAddr" placeholder="请输入地址" />
+        </el-form-item>
+        <el-form-item label="电话" prop="payeePhone">
+          <el-input v-model="form.payeePhone" placeholder="请输入电话" />
+        </el-form-item>
+        <el-form-item label="应用楼宇" prop="buildingIds">
+          <el-popover
+            placement="bottom-start"
+            width="400"
+            trigger="click"
+            v-model="buildingPopoverVisible">
+            <el-tree
+              ref="buildingTree"
+              :data="buildingTreeData"
+              node-key="id"
+              :props="buildingProps"
+              show-checkbox
+              :default-expanded-keys="['parent_node']"
+              @check="handleBuildingCheck">
+              <span slot-scope="{ node, data }" class="custom-tree-node">
+                <i v-if="data.icon" :class="data.icon"></i>
+                <span>{{ node.label }}</span>
+              </span>
+            </el-tree>
+            <el-input
+              slot="reference"
+              v-model="form.buildingNames"
+              placeholder="请选择应用楼宇"
+              readonly
+              suffix-icon="el-icon-arrow-down">
+            </el-input>
+          </el-popover>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </div>
+    </el-dialog>
+    
+    <!-- 删除确认对话框 -->
+    <el-dialog title="提示" :visible.sync="deleteDialogVisible" width="360px" append-to-body>
+      <div class="delete-confirm">
+        <i class="el-icon-warning"></i>
+        <span>确定要删除该收款方信息吗？</span>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="deleteDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="confirmDelete">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getPayeeInfo, updatePayeeInfo, addPayeeInfo, deletePayeeInfo } from '@/api/finance'
+import { getBuildingList } from '@/api/building'
+import { API_SUCCESS_CODE } from '@/utils/constants'
+
+export default {
+  name: 'PayeeInfo',
+  data() {
+    return {
+      // 查询参数
+      queryParams: {
+        current: 1,
+        size: 10,
+        payeeUnitName: ''
+      },
+      
+      // 加载状态
+      loading: false,
+      
+      // 收款方信息列表
+      payeeList: [],
+      total: 0,
+      
+      // 收款方信息
+      payeeInfo: {
+        companyId: '',
+        payeeUnitName: '',
+        payeeName: '',
+        payeeAddr: '',
+        payeePhone: '',
+        buildingIds: []
+      },
+      
+      // 楼宇选项
+      buildingOptions: [],
+      
+      // 公司选项
+      companyOptions: [],
+      
+      // 楼宇树形数据
+      buildingTreeData: [],
+      buildingPopoverVisible: false,
+      buildingProps: {
+        label: 'label',
+        children: 'children'
+      },
+      
+      // 对话框显示状态
+      dialogVisible: false,
+      deleteDialogVisible: false,
+      
+      // 是否为编辑模式
+      isEdit: false,
+      
+      // 当前操作的ID
+      currentId: null,
+      
+      // 表单数据
+      form: {
+        companyId: '',
+        payeeUnitName: '',
+        payeeName: '',
+        payeeAddr: '',
+        payeePhone: '',
+        buildingIds: [],
+        buildingNames: ''
+      },
+      
+      // 表单校验规则
+      rules: {
+        companyId: [
+          { required: true, message: '请选择关联公司', trigger: 'change' }
+        ],
+        payeeUnitName: [
+          { required: true, message: '请输入收款方单位名称', trigger: 'blur' }
+        ],
+        payeeName: [
+          { required: true, message: '请输入收款人', trigger: 'blur' }
+        ],
+        payeePhone: [
+          { pattern: /^(\d{3,4}-\d{7,8}(-\d{1,4})?|1[3-9]\d{9})$/, message: '电话格式不正确', trigger: 'blur' }
+        ],
+        buildingIds: [
+          { required: true, message: '请选择应用楼宇', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  created() {
+    this.getPayeeList()
+    this.getBuildingOptions()
+    this.getCompanyOptions()
+  },
+  methods: {
+    // 获取收款方信息列表
+    getPayeeList() {
+      this.loading = true
+      getPayeeInfo(this.queryParams).then(res => {
+        if (res && res.code === API_SUCCESS_CODE) {
+          this.payeeList = res.data.data || []
+          this.total = res.data.total || 0
+        } else {
+          this.$message.error(res.message || '获取收款方信息列表失败')
+          
+          // 模拟数据
+          this.payeeList = [{
+            id: 1,
+            companyId: 'COM001',
+            payeeUnitName: '智慧园区管理有限公司',
+            payeeName: '张三',
+            payeeAddr: '北京市海淀区中关村大街1号',
+            payeePhone: '13800138000',
+            buildingIds: 'BLD001,BLD002'
+          }]
+          this.total = 1
+        }
+        this.loading = false
+      }).catch(error => {
+        console.error('获取收款方信息列表失败', error)
+        this.$message.error('获取收款方信息列表失败')
+        
+        // 模拟数据
+        this.payeeList = [{
+          id: 1,
+          companyId: 'COM001',
+          payeeUnitName: '智慧园区管理有限公司',
+          payeeName: '张三',
+          payeeAddr: '北京市海淀区中关村大街1号',
+          payeePhone: '13800138000',
+          buildingIds: 'BLD001,BLD002'
+        }]
+        this.total = 1
+        this.loading = false
+      })
+    },
+    
+    // 获取收款方详情
+    getPayeeDetail(id) {
+      getPayeeInfo(id).then(res => {
+        if (res && res.code === API_SUCCESS_CODE) {
+          this.payeeInfo = res.data || {}
+        } else {
+          this.$message.error(res.message || '获取收款方信息详情失败')
+        }
+      }).catch(error => {
+        console.error('获取收款方信息详情失败', error)
+        this.$message.error('获取收款方信息详情失败')
+      })
+    },
+    
+    // 获取楼宇选项
+    getBuildingOptions() {
+      getBuildingList().then(res => {
+        if (res && res.code === API_SUCCESS_CODE) {
+          this.buildingOptions = res.data || []
+          this.generateBuildingTree()
+        } else {
+          // 模拟数据
+          this.buildingOptions = [
+            { id: 'BLD001', name: 'A栋办公楼' },
+            { id: 'BLD002', name: 'B栋办公楼' },
+            { id: 'BLD003', name: 'C栋研发中心' },
+            { id: 'BLD004', name: 'D栋会议中心' },
+            { id: 'BLD005', name: 'E栋商业配套' }
+          ]
+          this.generateBuildingTree()
+        }
+      }).catch(error => {
+        console.error('获取楼宇列表失败', error)
+        // 模拟数据
+        this.buildingOptions = [
+          { id: 'BLD001', name: 'A栋办公楼' },
+          { id: 'BLD002', name: 'B栋办公楼' },
+          { id: 'BLD003', name: 'C栋研发中心' },
+          { id: 'BLD004', name: 'D栋会议中心' },
+          { id: 'BLD005', name: 'E栋商业配套' }
+        ]
+        this.generateBuildingTree()
+      })
+    },
+    
+    // 生成楼宇树形数据
+    generateBuildingTree() {
+      // 创建树形结构
+      const parentNode = {
+        id: 'parent_node',
+        label: '小红马演示园区3',
+        children: this.buildingOptions.map(item => ({
+          id: item.id,
+          label: item.name,
+          icon: 'el-icon-office-building'
+        }))
+      }
+      
+      this.buildingTreeData = [parentNode]
+    },
+    
+    // 处理楼宇选择
+    handleBuildingCheck() {
+      // 获取所有选中的叶子节点
+      const checkedNodes = this.$refs.buildingTree.getCheckedNodes(false, false)
+      const leafNodes = checkedNodes.filter(node => !node.children || node.children.length === 0)
+      
+      // 过滤掉父节点，只保留叶子节点
+      const selectedBuildings = leafNodes.filter(node => node.id !== 'parent_node')
+      
+      // 更新选中楼宇ID和名称
+      this.form.buildingIds = selectedBuildings.map(node => node.id)
+      this.form.buildingNames = selectedBuildings.map(node => node.label).join('，')
+    },
+    
+    // 获取公司选项
+    getCompanyOptions() {
+      // 模拟公司数据
+      this.companyOptions = [
+        { id: 'COM001', name: '智慧园区管理有限公司' },
+        { id: 'COM002', name: '科技创新服务有限公司' },
+        { id: 'COM003', name: '数字产业发展有限公司' },
+        { id: 'COM004', name: '绿色能源科技有限公司' },
+        { id: 'COM005', name: '城市更新建设有限公司' }
+      ]
+    },
+    
+    // 搜索
+    handleSearch() {
+      this.queryParams.current = 1
+      this.getPayeeList()
+    },
+    
+    // 重置查询
+    resetQuery() {
+      this.queryParams = {
+        current: 1,
+        size: 10,
+        payeeUnitName: ''
+      }
+      this.getPayeeList()
+    },
+    
+    // 处理分页大小变化
+    handleSizeChange(val) {
+      this.queryParams.size = val
+      this.getPayeeList()
+    },
+    
+    // 处理页码变化
+    handleCurrentChange(val) {
+      this.queryParams.current = val
+      this.getPayeeList()
+    },
+    
+    // 打开新增对话框
+    handleAdd() {
+      this.isEdit = false
+      this.currentId = null
+      this.form = {
+        companyId: '',
+        payeeUnitName: '',
+        payeeName: '',
+        payeeAddr: '',
+        payeePhone: '',
+        buildingIds: [],
+        buildingNames: ''
+      }
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        if (this.$refs.payeeFormRef) {
+          this.$refs.payeeFormRef.clearValidate()
+        }
+        // 重置树的选中状态
+        if (this.$refs.buildingTree) {
+          this.$refs.buildingTree.setCheckedKeys([])
+        }
+      })
+    },
+    
+    // 打开编辑对话框
+    handleEdit(row) {
+      this.isEdit = true
+      this.currentId = row.id
+      
+      // 如果buildingIds是字符串，将其转换为数组
+      let buildingIds = row.buildingIds
+      if (typeof buildingIds === 'string') {
+        buildingIds = buildingIds.split(',').filter(id => id)
+      } else if (!Array.isArray(buildingIds)) {
+        buildingIds = []
+      }
+      
+      // 查找楼宇名称
+      let buildingNames = ''
+      if (Array.isArray(buildingIds) && buildingIds.length > 0) {
+        const selectedBuildingNames = []
+        this.buildingTreeData.forEach(parent => {
+          if (parent.children) {
+            parent.children.forEach(building => {
+              if (buildingIds.includes(building.id)) {
+                selectedBuildingNames.push(building.label)
+              }
+            })
+          }
+        })
+        buildingNames = selectedBuildingNames.join('，')
+      }
+      
+      this.form = { 
+        ...row,
+        buildingIds: buildingIds,
+        buildingNames: buildingNames
+      }
+      
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        if (this.$refs.payeeFormRef) {
+          this.$refs.payeeFormRef.clearValidate()
+        }
+        // 设置树的默认选中状态
+        if (this.$refs.buildingTree) {
+          this.$refs.buildingTree.setCheckedKeys(buildingIds)
+        }
+      })
+    },
+    
+    // 提交表单
+    submitForm() {
+      this.$refs.payeeFormRef.validate(valid => {
+        if (valid) {
+          // 处理数据，将buildingIds数组转为逗号分隔的字符串
+          const formData = { ...this.form }
+          if (Array.isArray(formData.buildingIds)) {
+            formData.buildingIds = formData.buildingIds.join(',')
+          }
+          
+          if (this.isEdit) {
+            // 编辑模式
+            updatePayeeInfo(this.currentId, formData).then(res => {
+              if (res && res.code === API_SUCCESS_CODE) {
+                this.$message.success('更新收款方信息成功')
+                this.dialogVisible = false
+                this.getPayeeList()
+              } else {
+                this.$message.error(res.message || '更新收款方信息失败')
+              }
+            }).catch(error => {
+              console.error('更新收款方信息失败', error)
+              this.$message.error('更新收款方信息失败')
+            })
+          } else {
+            // 新增模式
+            addPayeeInfo(formData).then(res => {
+              if (res && res.code === API_SUCCESS_CODE) {
+                this.$message.success('新增收款方信息成功')
+                this.dialogVisible = false
+                this.getPayeeList()
+              } else {
+                this.$message.error(res.message || '新增收款方信息失败')
+              }
+            }).catch(error => {
+              console.error('新增收款方信息失败', error)
+              this.$message.error('新增收款方信息失败')
+            })
+          }
+        }
+      })
+    },
+    
+    // 删除
+    handleDelete(row) {
+      this.currentId = row.id
+      this.deleteDialogVisible = true
+    },
+    
+    // 确认删除
+    confirmDelete() {
+      if (!this.currentId) return
+      
+      deletePayeeInfo(this.currentId).then(res => {
+        if (res && res.code === API_SUCCESS_CODE) {
+          this.$message.success('删除成功')
+          this.getPayeeList()
+        } else {
+          this.$message.error(res.message || '删除失败')
+        }
+        this.deleteDialogVisible = false
+      }).catch(error => {
+        console.error('删除失败', error)
+        this.$message.error('删除失败')
+        this.deleteDialogVisible = false
+      })
+    },
+    
+    // 格式化公司名称
+    formatCompanyName(companyId) {
+      if (!companyId) return '-'
+      
+      const company = this.companyOptions.find(item => item.id === companyId)
+      return company ? company.name : companyId
+    },
+    
+    // 格式化楼宇名称
+    formatBuildingNames(buildingIds) {
+      if (!buildingIds) return '-'
+      
+      // 如果buildingIds是字符串，将其转换为数组
+      let buildingIdArray = buildingIds
+      if (typeof buildingIds === 'string') {
+        buildingIdArray = buildingIds.split(',').filter(id => id)
+      }
+      
+      if (!Array.isArray(buildingIdArray) || buildingIdArray.length === 0) {
+        return '-'
+      }
+      
+      const buildingNames = []
+      this.buildingTreeData.forEach(parent => {
+        if (parent.children) {
+          parent.children.forEach(building => {
+            if (buildingIdArray.includes(building.id)) {
+              buildingNames.push(building.label)
+            }
+          })
+        }
+      })
+      
+      return buildingNames.length > 0 ? buildingNames.join('，') : '-'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.payee-info-container {
+  .header-actions,
+  .filter-container {
+    margin-bottom: 15px;
+  }
+  
+  .info-card {
+    margin-bottom: 20px;
+    
+    .card-header {
+      font-weight: bold;
+    }
+    
+    .info-content {
+      padding: 10px 0;
+    }
+  }
+  
+  .pagination-container {
+    margin-top: 15px;
+    text-align: right;
+  }
+  
+  .delete-confirm {
+    display: flex;
+    align-items: center;
+
+    i {
+      font-size: 24px;
+      color: #e6a23c;
+      margin-right: 10px;
+    }
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/pc/src/views/finance/receiptSetting/ReceiptTemplate.vue b/pc/src/views/finance/receiptSetting/ReceiptTemplate.vue
new file mode 100644
index 0000000..00fd6e4
--- /dev/null
+++ b/pc/src/views/finance/receiptSetting/ReceiptTemplate.vue
@@ -0,0 +1,943 @@
+<template>
+  <div class="receipt-template-container">
+    
+    <!-- 搜索栏 -->
+    <div class="filter-container">
+      <el-input v-model="queryParams.templateName" placeholder="请输入模板名称" clearable style="width: 250px;" class="filter-item" />
+      <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
+      <el-button @click="resetQuery">重置</el-button>
+
+      <el-button style="float: right;" icon="el-icon-plus" type="primary" @click="handleUploadTemplate">新增收据模版</el-button>
+      <el-button style="float: right;" @click="handleDownloadExample">下载样例模板</el-button>
+    </div>
+    
+    <!-- 模板列表 -->
+    <el-table v-loading="loading" :data="templateList" border style="margin-top: 15px;">
+      <el-table-column prop="id" label="ID" width="80" />
+      <el-table-column prop="templateName" label="模板名称" />
+      <el-table-column label="应用楼宇">
+        <template slot-scope="scope">
+          {{ formatBuildingNames(scope.row.buildingIds) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="250">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click="handlePreviewTemplate(scope.row)">预览</el-button>
+          <el-button type="text" size="small" @click="handleDownloadTemplate(scope.row)">下载</el-button>
+          <el-button type="text" size="small" @click="handleEditTemplate(scope.row)">编辑</el-button>
+          <el-button type="text" size="small" @click="handleDeleteTemplate(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.current" :page-sizes="[10, 20, 30, 50]" :page-size="queryParams.size"
+        layout="total, sizes, prev, pager, next, jumper" :total="total" />
+    </div>
+    
+    <!-- 上传/编辑模板对话框 -->
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px" append-to-body>
+      <el-tabs v-model="activeTab">
+        <el-tab-pane label="复制关键字" name="keywords">
+          <div class="keywords-container">
+            <div class="keyword-section">
+              <h4>收据信息</h4>
+              <div class="keyword-list">
+                <div v-for="(item, index) in keywords.receiptInfo" :key="'receipt-'+index" class="keyword-item" @click="copyKeyword(item)">
+                  {{ item }}
+                </div>
+              </div>
+            </div>
+            
+            <div class="keyword-section">
+              <h4>交收款方</h4>
+              <div class="keyword-list">
+                <div v-for="(item, index) in keywords.payerInfo" :key="'payer-'+index" class="keyword-item" @click="copyKeyword(item)">
+                  {{ item }}
+                </div>
+              </div>
+            </div>
+            
+            <div class="keyword-section">
+              <h4>房源信息</h4>
+              <div class="keyword-list">
+                <div v-for="(item, index) in keywords.propertyInfo" :key="'property-'+index" class="keyword-item" @click="copyKeyword(item)">
+                  {{ item }}
+                </div>
+              </div>
+            </div>
+            
+            <div class="keyword-section">
+              <h4>账单信息</h4>
+              <div class="keyword-list">
+                <div v-for="(item, index) in keywords.billInfo" :key="'bill-'+index" class="keyword-item" @click="copyKeyword(item)">
+                  {{ item }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-tab-pane>
+        
+        <el-tab-pane label="上传收据打印模板" name="upload">
+          <el-form :model="templateForm" :rules="rules" ref="templateFormRef" label-width="120px">
+            <el-form-item label="模板名称" prop="templateName">
+              <el-input v-model="templateForm.templateName" placeholder="请输入模板名称" />
+            </el-form-item>
+            
+            <el-form-item label="模板文件" prop="file" v-if="!isEdit || uploadNewFile">
+              <el-upload
+                :action="'#'"
+                :auto-upload="false"
+                :limit="1"
+                :on-change="handleFileChange"
+                :on-remove="handleFileRemove"
+                :file-list="fileList"
+                accept=".docx">
+                <el-button size="small" type="primary">点击上传</el-button>
+                <div slot="tip" class="el-upload__tip">仅支持docx格式，大小不超过5M</div>
+              </el-upload>
+            </el-form-item>
+            
+            <el-form-item v-if="isEdit && !uploadNewFile">
+              <el-checkbox v-model="uploadNewFile">更新模板文件</el-checkbox>
+            </el-form-item>
+            
+            <el-form-item label="应用楼宇" prop="buildingIds">
+              <el-popover
+                placement="bottom-start"
+                width="400"
+                trigger="click"
+                v-model="buildingPopoverVisible">
+                <el-tree
+                  ref="buildingTree"
+                  :data="buildingTreeData"
+                  node-key="id"
+                  :props="buildingProps"
+                  show-checkbox
+                  :default-expanded-keys="['parent_node']"
+                  @check="handleBuildingCheck">
+                  <span slot-scope="{ node, data }" class="custom-tree-node">
+                    <i v-if="data.icon" :class="data.icon"></i>
+                    <span>{{ node.label }}</span>
+                  </span>
+                </el-tree>
+                <el-input
+                  slot="reference"
+                  v-model="templateForm.buildingNames"
+                  placeholder="请选择应用楼宇"
+                  readonly
+                  suffix-icon="el-icon-arrow-down">
+                </el-input>
+              </el-popover>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+      </el-tabs>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitTemplateForm" v-if="activeTab === 'upload'">确 定</el-button>
+      </div>
+    </el-dialog>
+    
+    <!-- 删除确认对话框 -->
+    <el-dialog title="提示" :visible.sync="deleteDialogVisible" width="360px" append-to-body>
+      <div class="delete-confirm">
+        <i class="el-icon-warning"></i>
+        <span>确定要删除该收据模板吗？</span>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="deleteDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="confirmDelete">确 定</el-button>
+      </div>
+    </el-dialog>
+    
+    <!-- 预览模板对话框 -->
+    <el-dialog title="收据模板预览" :visible.sync="previewDialogVisible" width="800px" append-to-body>
+      <div class="preview-container" v-loading="previewLoading">
+        <div v-if="previewUrl" class="preview-iframe">
+          <iframe :src="previewUrl" width="100%" height="500px" frameborder="0"></iframe>
+        </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 { 
+  getReceiptTemplateList, 
+  addReceiptTemplate,
+  updateReceiptTemplate,
+  deleteReceiptTemplate,
+  previewReceiptTemplate,
+  downloadReceiptTemplate,
+  downloadExampleTemplate,
+  getReceiptKeywords,
+  checkTemplateName
+} from '@/api/finance'
+import { getBuildingList } from '@/api/building'
+import { API_SUCCESS_CODE } from '@/utils/constants'
+
+export default {
+  name: 'ReceiptTemplate',
+  data() {
+    // 自定义模板名称校验器
+    const validateTemplateName = (rule, value, callback) => {
+      if (!value) {
+        return callback(new Error('请输入模板名称'))
+      }
+      
+      // 编辑时不检查当前名称
+      if (this.isEdit && value === this.originalName) {
+        return callback()
+      }
+      
+      checkTemplateName({
+        templateName: value,
+        id: this.isEdit ? this.currentId : undefined
+      }).then(res => {
+        if (res && res.code === API_SUCCESS_CODE) {
+          if (res.data) {
+            callback(new Error('模板名称已存在'))
+          } else {
+            callback()
+          }
+        } else {
+          callback()
+        }
+      }).catch(() => {
+        callback()
+      })
+    }
+    
+    // 自定义文件校验器
+    const validateFile = (rule, value, callback) => {
+      // 编辑模式且不更新文件时，不验证文件
+      if (this.isEdit && !this.uploadNewFile) {
+        return callback()
+      }
+      
+      if (this.fileList.length === 0) {
+        return callback(new Error('请上传模板文件'))
+      }
+      
+      callback()
+    }
+    
+    return {
+      // 查询参数
+      queryParams: {
+        current: 1,
+        size: 10,
+        templateName: ''
+      },
+      
+      // 当前激活的tab
+      activeTab: 'upload',
+      
+      // 原始模板名称（编辑时使用）
+      originalName: '',
+      
+      // 加载状态
+      loading: false,
+      
+      // 模板列表数据
+      templateList: [],
+      total: 0,
+      
+      // 楼宇选项
+      buildingOptions: [],
+      
+      // 楼宇树形数据
+      buildingTreeData: [],
+      buildingPopoverVisible: false,
+      buildingProps: {
+        label: 'label',
+        children: 'children'
+      },
+      
+      // 文件列表
+      fileList: [],
+      
+      // 对话框显示控制
+      dialogVisible: false,
+      deleteDialogVisible: false,
+      previewDialogVisible: false,
+      
+      // 是否为编辑模式
+      isEdit: false,
+      uploadNewFile: false,
+      
+      // 当前操作的模板ID
+      currentId: null,
+      
+      // 模板表单
+      templateForm: {
+        templateName: '',
+        buildingIds: [],
+        buildingNames: ''
+      },
+      
+      // 表单校验规则
+      rules: {
+        templateName: [
+          { required: true, message: '请输入模板名称', trigger: 'blur' },
+          { validator: validateTemplateName, trigger: 'blur' }
+        ],
+        file: [
+          { validator: validateFile, trigger: 'change' }
+        ],
+        buildingIds: [
+          { required: true, message: '请选择应用楼宇', trigger: 'change' }
+        ]
+      },
+      
+      // 关键字数据
+      keywords: {
+        receiptInfo: ['${收据编号}', '${汇款方式}', '${费用类型}', '${费用名称}', '${开据金额}', '${开据金额（大写）}', '${开据时间}', '${开据人}', '${租赁面积}'],
+        payerInfo: ['${交款单位}', '${交款人}', '${交款方电话}', '${交款方地址}', '${收款单位}', '${收款人}', '${收款方电话}', '${收款方地址}'],
+        propertyInfo: ['${项目名称}', '${项目地址}', '${楼宇名称}', '${楼层房号}'],
+        billInfo: ['${账单编号}', '${楼宇名称}']
+      },
+      
+      // 预览相关
+      previewBlob: null,
+      currentPreviewName: '',
+      previewLoading: false,
+      previewUrl: '', // PDF的URL
+    }
+  },
+  computed: {
+    dialogTitle() {
+      return this.isEdit ? '编辑收据模板' : '新增收据模板'
+    }
+  },
+  created() {
+    this.getTemplateList()
+    this.getBuildingOptions()
+    this.fetchKeywords()
+  },
+  methods: {
+    // 获取模板列表
+    getTemplateList() {
+      this.loading = true
+      getReceiptTemplateList(this.queryParams).then(res => {
+        if (res && res.code === API_SUCCESS_CODE) {
+          this.templateList = res.data.data || []
+          this.total = res.data.total || 0
+        } else {
+          this.$message.error(res.message || '获取收据模板列表失败')
+          this.templateList = []
+          this.total = 0
+        }
+        this.loading = false
+      }).catch(error => {
+        console.error('获取收据模板列表失败', error)
+        this.$message.error('获取收据模板列表失败')
+        this.templateList = []
+        this.total = 0
+        this.loading = false
+      })
+    },
+    
+    // 生成楼宇树形数据
+    generateBuildingTree() {
+      // 创建树形结构
+      const parentNode = {
+        id: 'parent_node',
+        label: '小红马演示园区3',
+        children: this.buildingOptions.map(item => ({
+          id: item.id,
+          label: item.name,
+          icon: 'el-icon-office-building'
+        }))
+      }
+      
+      this.buildingTreeData = [parentNode]
+    },
+    
+    // 处理楼宇选择
+    handleBuildingCheck() {
+      // 获取所有选中的叶子节点
+      const checkedNodes = this.$refs.buildingTree.getCheckedNodes(false, false)
+      const leafNodes = checkedNodes.filter(node => !node.children || node.children.length === 0)
+      
+      // 过滤掉父节点，只保留叶子节点
+      const selectedBuildings = leafNodes.filter(node => node.id !== 'parent_node')
+      
+      // 更新选中楼宇ID和名称
+      this.templateForm.buildingIds = selectedBuildings.map(node => node.id)
+      this.templateForm.buildingNames = selectedBuildings.map(node => node.label).join('，')
+    },
+
+    // 获取楼宇选项
+    getBuildingOptions() {
+      getBuildingList().then(res => {
+        if (res && res.code === API_SUCCESS_CODE) {
+          this.buildingOptions = res.data || []
+          this.generateBuildingTree()
+        } else {
+          // 模拟数据
+          this.buildingOptions = [
+            { id: 'BLD001', name: 'A栋办公楼' },
+            { id: 'BLD002', name: 'B栋办公楼' },
+            { id: 'BLD003', name: 'C栋研发中心' },
+            { id: 'BLD004', name: 'D栋会议中心' },
+            { id: 'BLD005', name: 'E栋商业配套' }
+          ]
+          this.generateBuildingTree()
+        }
+      }).catch(error => {
+        console.error('获取楼宇列表失败', error)
+        // 模拟数据
+        this.buildingOptions = [
+          { id: 'BLD001', name: 'A栋办公楼' },
+          { id: 'BLD002', name: 'B栋办公楼' },
+          { id: 'BLD003', name: 'C栋研发中心' },
+          { id: 'BLD004', name: 'D栋会议中心' },
+          { id: 'BLD005', name: 'E栋商业配套' }
+        ]
+        this.generateBuildingTree()
+      })
+    },
+    
+    // 搜索
+    handleSearch() {
+      this.queryParams.current = 1
+      this.getTemplateList()
+    },
+    
+    // 重置查询
+    resetQuery() {
+      this.queryParams = {
+        current: 1,
+        size: 10,
+        templateName: ''
+      }
+      this.getTemplateList()
+    },
+    
+    // 处理分页大小变化
+    handleSizeChange(val) {
+      this.queryParams.size = val
+      this.getTemplateList()
+    },
+    
+    // 处理页码变化
+    handleCurrentChange(val) {
+      this.queryParams.current = val
+      this.getTemplateList()
+    },
+    
+    // 处理文件变更
+    handleFileChange(file) {
+      // 验证文件类型
+      const isDocx = file.raw.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+      if (!isDocx) {
+        this.$message.error('请上传docx格式的文件')
+        this.fileList = []
+        return false
+      }
+      
+      // 验证文件大小
+      const isLt5M = file.size / 1024 / 1024 < 5
+      if (!isLt5M) {
+        this.$message.error('文件大小不能超过5MB')
+        this.fileList = []
+        return false
+      }
+      
+      this.fileList = [file]
+    },
+    
+    // 处理文件移除
+    handleFileRemove() {
+      this.fileList = []
+    },
+    
+    // 打开上传模板对话框
+    handleUploadTemplate() {
+      this.isEdit = false
+      this.uploadNewFile = true
+      this.currentId = null
+      this.originalName = ''
+      this.templateForm = {
+        templateName: '',
+        buildingIds: [],
+        buildingNames: ''
+      }
+      this.fileList = []
+      this.activeTab = 'upload'
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        if (this.$refs.templateFormRef) {
+          this.$refs.templateFormRef.clearValidate()
+        }
+        // 重置树的选中状态
+        if (this.$refs.buildingTree) {
+          this.$refs.buildingTree.setCheckedKeys([])
+        }
+      })
+    },
+    
+    // 编辑模板
+    handleEditTemplate(row) {
+      this.isEdit = true
+      this.uploadNewFile = false
+      this.currentId = row.id
+      this.originalName = row.templateName
+      
+      // 如果buildingIds是字符串，转换为数组
+      let buildingIds = row.buildingIds
+      if (typeof buildingIds === 'string') {
+        buildingIds = buildingIds.split(',').filter(id => id)
+      } else if (!Array.isArray(buildingIds)) {
+        buildingIds = []
+      }
+      
+      // 查找楼宇名称
+      let buildingNames = ''
+      if (Array.isArray(buildingIds) && buildingIds.length > 0) {
+        const selectedBuildingNames = []
+        this.buildingTreeData.forEach(parent => {
+          if (parent.children) {
+            parent.children.forEach(building => {
+              if (buildingIds.includes(building.id)) {
+                selectedBuildingNames.push(building.label)
+              }
+            })
+          }
+        })
+        buildingNames = selectedBuildingNames.join('，')
+      }
+      
+      this.templateForm = {
+        templateName: row.templateName,
+        buildingIds: buildingIds,
+        buildingNames: buildingNames
+      }
+      
+      this.fileList = []
+      this.activeTab = 'upload'
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        if (this.$refs.templateFormRef) {
+          this.$refs.templateFormRef.clearValidate()
+        }
+        // 设置树的默认选中状态
+        if (this.$refs.buildingTree) {
+          this.$refs.buildingTree.setCheckedKeys(buildingIds)
+        }
+      })
+    },
+    
+    // 提交模板表单
+    submitTemplateForm() {
+      this.$refs.templateFormRef.validate(valid => {
+        if (valid) {
+          // 构建FormData
+          const formData = new FormData()
+          formData.append('templateName', this.templateForm.templateName)
+          
+          // 处理buildingIds，按接口要求传递数组
+          if (Array.isArray(this.templateForm.buildingIds)) {
+            this.templateForm.buildingIds.forEach(id => {
+              formData.append('buildingIds', id)
+            })
+          }
+          
+          // 上传文件
+          if (!this.isEdit || this.uploadNewFile) {
+            formData.append('file', this.fileList[0].raw)
+          }
+          
+          if (this.isEdit) {
+            // 编辑模式
+            updateReceiptTemplate(this.currentId, formData).then(res => {
+              if (res && res.code === API_SUCCESS_CODE) {
+                this.$message.success('更新收据模板成功')
+                this.dialogVisible = false
+                this.getTemplateList()
+              } else {
+                this.$message.error(res.message || '更新收据模板失败')
+              }
+            }).catch(error => {
+              console.error('更新收据模板失败', error)
+              this.$message.error('更新收据模板失败')
+            })
+          } else {
+            // 新增模式
+            addReceiptTemplate(formData).then(res => {
+              if (res && res.code === API_SUCCESS_CODE) {
+                this.$message.success('新增收据模板成功')
+                this.dialogVisible = false
+                this.getTemplateList()
+              } else {
+                this.$message.error(res.message || '新增收据模板失败')
+              }
+            }).catch(error => {
+              console.error('新增收据模板失败', error)
+              this.$message.error('新增收据模板失败')
+            })
+          }
+        }
+      })
+    },
+    
+    // 预览模板
+    async handlePreviewTemplate(row) {
+      this.previewLoading = true
+      this.previewDialogVisible = true
+      this.currentPreviewName = row.templateName || '收据模板'
+      this.previewUrl = ''
+      
+      try {
+        // 调用预览API获取PDF内容
+        const response = await previewReceiptTemplate(row.id)
+        
+        // 处理返回的二进制数据 - 现在是PDF格式
+        const blob = new Blob([response.data], { type: 'application/pdf' })
+        this.previewBlob = blob
+        
+        // 创建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}.pdf`)
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+      URL.revokeObjectURL(url)
+    },
+    
+    // 下载模板
+    handleDownloadTemplate(row) {
+      downloadReceiptTemplate(row.id).then(response => {
+        // 处理文件下载
+        this.download(response, `${row.templateName}.docx`)
+        
+        // const blob = new Blob([response.data], { 
+        //   type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' 
+        // })
+        // const url = URL.createObjectURL(blob)
+        // const link = document.createElement('a')
+        // link.href = url
+        // link.setAttribute('download', `${row.templateName}.docx`)
+        // document.body.appendChild(link)
+        // link.click()
+        // document.body.removeChild(link)
+        // URL.revokeObjectURL(url)
+      }).catch(error => {
+        console.error('下载模板失败', error)
+        this.$message.error('下载模板失败')
+      })
+    },
+    
+    // 下载样例模板
+    handleDownloadExample() {
+      downloadExampleTemplate().then(response => {
+        // 处理文件下载
+        this.download(response, '收据模板样例.docx')
+        // const url = window.URL.createObjectURL(new Blob([response.data]))
+        // const link = document.createElement('a')
+        // link.href = url
+        // link.setAttribute('download', '收据模板样例.docx')
+        // document.body.appendChild(link)
+        // link.click()
+        // document.body.removeChild(link)
+      }).catch(error => {
+        console.error('下载样例模板失败', error)
+        this.$message.error('下载样例模板失败')
+      })
+    },
+    
+    // 删除模板
+    handleDeleteTemplate(row) {
+      this.currentId = row.id
+      this.deleteDialogVisible = true
+    },
+    
+    // 确认删除
+    confirmDelete() {
+      if (!this.currentId) return
+      
+      deleteReceiptTemplate(this.currentId).then(res => {
+        if (res && res.code === API_SUCCESS_CODE) {
+          this.$message.success('删除成功')
+          this.getTemplateList()
+        } else {
+          this.$message.error(res.message || '删除失败')
+        }
+        this.deleteDialogVisible = false
+      }).catch(error => {
+        console.error('删除失败', error)
+        this.$message.error('删除失败')
+        this.deleteDialogVisible = false
+      })
+    },
+    
+    // 获取关键字
+    fetchKeywords() {
+      getReceiptKeywords().then(res => {
+        if (res && res.code === API_SUCCESS_CODE) {
+          this.keywords = res.data
+        } else {
+          this.$message.error(res.message || '获取关键字失败')
+        }
+      }).catch(error => {
+        console.error('获取关键字失败', error)
+        this.$message.error('获取关键字失败')
+      })
+    },
+    
+    // 复制关键字
+    copyKeyword(keyword) {
+      const textarea = document.createElement('textarea')
+      textarea.value = keyword
+      document.body.appendChild(textarea)
+      textarea.select()
+      document.execCommand('copy')
+      document.body.removeChild(textarea)
+      this.$message.success('已复制到剪贴板')
+    },
+    
+    // 打开复制关键字对话框
+    handleShowKeywords() {
+      // 先获取最新的关键字
+      this.fetchKeywords()
+      
+      // 重置表单等信息
+      this.isEdit = false
+      this.uploadNewFile = true
+      this.currentId = null
+      this.originalName = ''
+      this.templateForm = {
+        templateName: '',
+        buildingIds: [],
+        buildingNames: ''
+      }
+      this.fileList = []
+      
+      // 设置active tab并打开对话框
+      this.activeTab = 'keywords'
+      this.dialogVisible = true
+    },
+    
+    // 格式化楼宇名称
+    formatBuildingNames(buildingIds) {
+      if (!buildingIds) return '-'
+      
+      // 如果buildingIds是字符串，将其转换为数组
+      let buildingIdArray = buildingIds
+      if (typeof buildingIds === 'string') {
+        buildingIdArray = buildingIds.split(',').filter(id => id)
+      }
+      
+      if (!Array.isArray(buildingIdArray) || buildingIdArray.length === 0) {
+        return '-'
+      }
+      
+      const buildingNames = []
+      this.buildingTreeData.forEach(parent => {
+        if (parent.children) {
+          parent.children.forEach(building => {
+            if (buildingIdArray.includes(building.id)) {
+              buildingNames.push(building.label)
+            }
+          })
+        }
+      })
+      
+      return buildingNames.length > 0 ? buildingNames.join('，') : '-'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.receipt-template-container {
+  .action-bar,
+  .filter-container {
+    margin-bottom: 15px;
+  }
+  
+  .pagination-container {
+    margin-top: 15px;
+    text-align: right;
+  }
+  
+  .delete-confirm {
+    display: flex;
+    align-items: center;
+
+    i {
+      font-size: 24px;
+      color: #e6a23c;
+      margin-right: 10px;
+    }
+  }
+
+}
+
+  
+.keywords-container {
+    padding: 15px;
+    
+    .keyword-section {
+      margin-bottom: 20px;
+      
+      h4 {
+        margin: 0 0 10px 0;
+        font-weight: bold;
+        padding-bottom: 8px;
+        border-bottom: 1px solid #EBEEF5;
+      }
+      
+      .keyword-list {
+        display: flex;
+        flex-wrap: wrap;
+        
+        .keyword-item {
+          margin: 5px;
+          padding: 8px 15px;
+          background-color: #f5f7fa;
+          border: 1px solid #DCDFE6;
+          border-radius: 4px;
+          cursor: pointer;
+          transition: all 0.2s;
+          font-size: 14px;
+          
+          &:hover {
+            background-color: #ecf5ff;
+            color: #409EFF;
+            border-color: #c6e2ff;
+          }
+        }
+      }
+    }
+  }
+
+/* 深度选择器 */
+:deep(.el-tree-node__content) {
+  height: 32px;
+  line-height: 32px;
+}
+
+:deep(.el-tree-node__label) {
+  font-size: 14px;
+}
+
+:deep(.custom-tree-node) {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  
+  i {
+    margin-right: 5px;
+  }
+}
+
+:deep(.el-popover) {
+  padding: 10px;
+  
+  .el-tree {
+    max-height: 300px;
+    overflow-y: auto;
+  }
+}
+
+:deep(.el-form-item__content .el-input) {
+  width: 100%;
+}
+
+.preview-container {
+  min-height: 500px;
+  max-height: 700px;
+  overflow: auto;
+  
+  .preview-content {
+    width: 100%;
+    padding: 20px;
+    background-color: #fff;
+    
+    p, h1, h2, h3, h4, h5, h6, table, ul, ol {
+      margin-bottom: 12px;
+    }
+    
+    table {
+      border-collapse: collapse;
+      width: 100%;
+      
+      th, td {
+        border: 1px solid #ddd;
+        padding: 8px;
+      }
+      
+      th {
+        background-color: #f2f2f2;
+        text-align: left;
+      }
+    }
+  }
+  
+  .preview-iframe {
+    width: 100%;
+    height: 500px;
+    border: none;
+  }
+  
+  .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;
+    }
+  }
+}
+
+.preview-mode-switch {
+  float: left;
+  margin-right: 20px;
+}
+</style> 
\ No newline at end of file
diff --git a/pc/src/views/finance/receiptSetting/index.vue b/pc/src/views/finance/receiptSetting/index.vue
new file mode 100644
index 0000000..a194589
--- /dev/null
+++ b/pc/src/views/finance/receiptSetting/index.vue
@@ -0,0 +1,474 @@
+<template>
+  <div class="receipt-setting-container">
+    <el-tabs v-model="activeTab">
+      <el-tab-pane label="收据编号" name="receiptNum">
+        <!-- 收据编号规则查询 -->
+        <div class="filter-container">
+          <el-input v-model="queryParams.ruleName" placeholder="请输入收据编号规则名称" clearable style="width: 250px;"
+            class="filter-item" />
+          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
+          <el-button @click="resetQuery">重置</el-button>
+          <el-button type="primary" icon="el-icon-plus" style="float: right;" @click="handleAddRule">新增收据编号规则</el-button>
+        </div>
+
+        <!-- 收据编号规则列表 -->
+        <el-table v-loading="loading" :data="ruleList" border>
+          <el-table-column prop="ruleName" label="收据编号规则名称" />
+          <el-table-column prop="prefix" label="收据编号前缀" />
+          <el-table-column prop="startNumber" label="开始编号" />
+          <el-table-column prop="endNumber" label="结束编号" />
+          <el-table-column prop="currentNumber" label="当前编号" />
+          <el-table-column label="应用项目">
+            <template slot-scope="scope">
+              {{ formatProjectNames(scope.row.projectList) }}
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="100">
+            <template slot-scope="scope">
+              <el-button type="text" size="small" @click="handleDeleteRule(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.current" :page-sizes="[10, 20, 30, 50]" :page-size="queryParams.size"
+            layout="total, sizes, prev, pager, next, jumper" :total="total" />
+        </div>
+      </el-tab-pane>
+      
+      <el-tab-pane label="收款方信息" name="payeeInfo">
+        <payee-info />
+      </el-tab-pane>
+      
+      <el-tab-pane label="收据模板" name="receiptTemplate">
+        <receipt-template />
+      </el-tab-pane>
+    </el-tabs>
+
+    <!-- 新增收据编号规则对话框 -->
+    <el-dialog title="新增收据编号规则" :visible.sync="ruleDialogVisible" width="500px" append-to-body>
+      <el-form :model="ruleForm" :rules="ruleRules" ref="ruleFormRef" label-width="120px">
+        <el-form-item label="收据编号名称" prop="ruleName">
+          <el-input v-model="ruleForm.ruleName" placeholder="请输入收据编号名称" />
+        </el-form-item>
+        <el-form-item label="收据编号前缀" prop="prefix">
+          <el-input v-model="ruleForm.prefix" placeholder="请输入收据编号前缀" />
+        </el-form-item>
+        <el-form-item label="开始编号" prop="startNumber">
+          <el-input v-model="ruleForm.startNumber" placeholder="请输入开始编号" type="number" />
+        </el-form-item>
+        <el-form-item label="结束编号" prop="endNumber">
+          <el-input v-model="ruleForm.endNumber" placeholder="请输入结束编号" type="number" />
+        </el-form-item>
+        <el-form-item label="应用项目" prop="projectIds">
+          <el-popover
+            placement="bottom-start"
+            width="400"
+            trigger="click"
+            v-model="projectPopoverVisible">
+            <el-tree
+              ref="projectTree"
+              :data="projectTreeData"
+              node-key="id"
+              :props="projectProps"
+              show-checkbox
+              :default-expanded-keys="['parent_node']"
+              @check="handleProjectCheck">
+              <span slot-scope="{ node, data }" class="custom-tree-node">
+                <i v-if="data.icon" :class="data.icon"></i>
+                <span>{{ node.label }}</span>
+              </span>
+            </el-tree>
+            <el-input
+              slot="reference"
+              v-model="ruleForm.projectNames"
+              placeholder="请选择应用项目"
+              readonly
+              suffix-icon="el-icon-arrow-down">
+            </el-input>
+          </el-popover>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="ruleDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitRuleForm">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 删除确认对话框 -->
+    <el-dialog title="提示" :visible.sync="deleteDialogVisible" width="360px" append-to-body>
+      <div class="delete-confirm">
+        <i class="el-icon-warning"></i>
+        <span>确定要删除该收据编号规则吗？</span>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="deleteDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="confirmDelete">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  listReceiptRule,
+  addReceiptRule,
+  deleteReceiptRule,
+  getProjectList
+} from '@/api/finance'
+import { API_SUCCESS_CODE } from '@/utils/constants'
+import PayeeInfo from './PayeeInfo.vue'
+import ReceiptTemplate from './ReceiptTemplate.vue'
+
+export default {
+  name: 'ReceiptSetting',
+  components: {
+    PayeeInfo,
+    ReceiptTemplate
+  },
+  data() {
+    // 校验结束编号
+    const validateEndNum = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error('请输入结束编号'))
+      } else if (!/^\d+$/.test(value)) {
+        callback(new Error('结束编号必须为数字'))
+      } else if (parseInt(value) <= parseInt(this.ruleForm.startNumber)) {
+        callback(new Error('结束编号必须大于开始编号'))
+      } else if (value.length !== this.ruleForm.startNumber.length) {
+        callback(new Error('结束编号和开始编号的位数必须相同'))
+      } else {
+        callback()
+      }
+    }
+
+    return {
+      // 选项卡
+      activeTab: 'receiptNum',
+      
+      // 查询参数
+      queryParams: {
+        current: 1,
+        size: 10,
+        ruleName: '',
+      },
+      
+      // 加载状态
+      loading: false,
+      
+      // 列表数据
+      ruleList: [],
+      total: 0,
+      
+      // 项目原始数据
+      projectOptions: [],
+      
+      // 项目树形数据
+      projectTreeData: [],
+      projectPopoverVisible: false,
+      projectProps: {
+        label: 'label',
+        children: 'children'
+      },
+      
+      // 对话框显示状态
+      ruleDialogVisible: false,
+      deleteDialogVisible: false,
+      
+      // 当前要删除的规则ID
+      currentRuleId: null,
+      
+      // 规则表单
+      ruleForm: {
+        ruleName: '',
+        prefix: '',
+        startNumber: '',
+        endNumber: '',
+        projectIds: [],
+        projectNames: ''
+      },
+      
+      // 表单校验规则
+      ruleRules: {
+        ruleName: [
+          { required: true, message: '请输入收据编号名称', trigger: 'blur' }
+        ],
+        startNumber: [
+          { required: true, message: '请输入开始编号', trigger: 'blur' },
+          { pattern: /^\d+$/, message: '开始编号必须为数字', trigger: 'blur' }
+        ],
+        endNumber: [
+          { required: true, validator: validateEndNum, trigger: 'blur' }
+        ],
+        projectIds: [
+          { required: true, message: '请选择应用项目', trigger: 'change' }
+        ]
+      },
+    }
+  },
+  created() {
+    this.getRuleList()
+    this.getProjects()
+  },
+  methods: {
+    // 获取收据编号规则列表
+    getRuleList() {
+      this.loading = true
+      listReceiptRule(this.queryParams).then(res => {
+        if (res && res.code === API_SUCCESS_CODE) {
+          this.ruleList = res.data.data || []
+          this.total = res.data.total || 0
+        } else {
+          this.$message.error(res.message || '获取收据编号规则列表失败')
+          this.ruleList = []
+          this.total = 0
+        }
+        this.loading = false
+      }).catch(error => {
+        console.error('获取收据编号规则列表失败', error)
+        this.$message.error('获取收据编号规则列表失败')
+        this.ruleList = []
+        this.total = 0
+        this.loading = false
+      })
+    },
+    
+    // 获取项目列表
+    getProjects() {
+      getProjectList().then(res => {
+        if (res && res.code === API_SUCCESS_CODE) {
+          this.projectOptions = res.data || []
+          this.generateProjectTree()
+        } else {
+          // 模拟一些项目数据
+          this.projectOptions = [
+            { id: '2', name: '高新科技园区' },
+            { id: '3', name: '软件产业园' },
+            { id: '4', name: '文创产业园' },
+            { id: '5', name: '生物医药园区' },
+            { id: '8', name: '智能制造基地' }
+          ]
+          this.generateProjectTree()
+        }
+      }).catch(error => {
+        console.error('获取项目列表失败', error)
+        // 模拟一些项目数据
+        this.projectOptions = [
+        { id: '2', name: '高新科技园区' },
+            { id: '3', name: '软件产业园' },
+            { id: '4', name: '文创产业园' },
+            { id: '5', name: '生物医药园区' },
+            { id: '8', name: '智能制造基地' }
+        ]
+        this.generateProjectTree()
+      })
+    },
+    
+    // 生成项目树形数据
+    generateProjectTree() {
+      // 模拟树形结构，实际开发中应该根据接口返回的数据格式来处理
+      // 这里假设有个固定的父节点"小红马演示园区3"
+      const parentNode = {
+        id: 'parent_node',
+        label: '小红马演示园区3',
+        children: this.projectOptions.map(item => ({
+          id: item.id,
+          label: item.name,
+          icon: 'el-icon-office-building'
+        }))
+      }
+      
+      this.projectTreeData = [parentNode]
+    },
+    
+    // 处理项目选择
+    handleProjectCheck() {
+      // 获取所有选中的叶子节点
+      const checkedNodes = this.$refs.projectTree.getCheckedNodes(false, false)
+      const leafNodes = checkedNodes.filter(node => !node.children || node.children.length === 0)
+      
+      // 过滤掉父节点，只保留叶子节点
+      const selectedProjects = leafNodes.filter(node => node.id !== 'parent_node')
+      
+      // 更新选中项目ID和名称
+      this.ruleForm.projectIds = selectedProjects.map(node => node.id)
+      this.ruleForm.projectNames = selectedProjects.map(node => node.label).join('，')
+    },
+    
+    // 重写打开新增规则对话框方法
+    handleAddRule() {
+      this.ruleForm = {
+        ruleName: '',
+        prefix: '',
+        startNumber: '',
+        endNumber: '',
+        projectIds: [],
+        projectNames: ''
+      }
+      this.ruleDialogVisible = true
+      this.$nextTick(() => {
+        if (this.$refs.ruleFormRef) {
+          this.$refs.ruleFormRef.clearValidate()
+        }
+        // 重置树的选中状态
+        if (this.$refs.projectTree) {
+          this.$refs.projectTree.setCheckedKeys([])
+        }
+      })
+    },
+    
+    // 提交规则表单
+    submitRuleForm() {
+      this.$refs.ruleFormRef.validate(valid => {
+        if (valid) {
+          // 准备提交数据，将projectIds转换为逗号分隔的字符串
+          const submitData = {
+            ...this.ruleForm,
+            projectIds: Array.isArray(this.ruleForm.projectIds) ? 
+              this.ruleForm.projectIds.join(',') : 
+              this.ruleForm.projectIds
+          }
+          
+          addReceiptRule(submitData).then(res => {
+            if (res && res.code === API_SUCCESS_CODE) {
+              this.$message.success('新增收据编号规则成功')
+              this.ruleDialogVisible = false
+              this.getRuleList()
+            } else {
+              this.$message.error(res.message || '新增收据编号规则失败')
+            }
+          }).catch(error => {
+            console.error('新增收据编号规则失败', error)
+            this.$message.error('新增收据编号规则失败')
+          })
+        }
+      })
+    },
+    
+    // 删除规则
+    handleDeleteRule(row) {
+      this.currentRuleId = row.id
+      this.deleteDialogVisible = true
+    },
+    
+    // 确认删除
+    confirmDelete() {
+      if (!this.currentRuleId) return
+      
+      deleteReceiptRule(this.currentRuleId).then(res => {
+        if (res && res.code === API_SUCCESS_CODE) {
+          this.$message.success('删除成功')
+          this.getRuleList()
+        } else {
+          this.$message.error(res.message || '删除失败')
+        }
+        this.deleteDialogVisible = false
+      }).catch(error => {
+        console.error('删除失败', error)
+        this.$message.error('删除失败')
+        this.deleteDialogVisible = false
+      })
+    },
+    
+    // 格式化项目名称
+    formatProjectNames(projectList) {
+      if (!projectList || !Array.isArray(projectList) || projectList.length === 0 ) {
+        return '-'
+      }
+      return projectList.map(item => item && item.projectName||'').join('，')
+    },
+    
+    // 搜索
+    handleSearch() {
+      this.queryParams.current = 1
+      this.getRuleList()
+    },
+    
+    // 重置
+    resetQuery() {
+      this.queryParams = {
+        current: 1,
+        size: 10,
+        ruleName: ''
+      }
+      this.getRuleList()
+    },
+    
+    // 处理分页大小变化
+    handleSizeChange(val) {
+      this.queryParams.size = val
+      this.getRuleList()
+    },
+    
+    // 处理页码变化
+    handleCurrentChange(val) {
+      this.queryParams.current = val
+      this.getRuleList()
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.receipt-setting-container {
+  padding: 20px;
+
+  .filter-container {
+    margin: 15px 0;
+
+    .filter-item {
+      margin-right: 10px;
+    }
+  }
+
+  .pagination-container {
+    margin-top: 15px;
+    text-align: right;
+  }
+
+  .delete-confirm {
+    display: flex;
+    align-items: center;
+
+    i {
+      font-size: 24px;
+      color: #e6a23c;
+      margin-right: 10px;
+    }
+  }
+
+  :v-deep .el-tree-node__content {
+    height: 32px;
+    line-height: 32px;
+  }
+  
+  :v-deep .el-tree-node__label {
+    font-size: 14px;
+  }
+
+  :v-deep .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    
+    i {
+      margin-right: 5px;
+    }
+  }
+  
+  :v-deep .el-popover {
+    padding: 10px;
+    
+    .el-tree {
+      max-height: 300px;
+      overflow-y: auto;
+    }
+  }
+  
+  :v-deep .el-form-item__content .el-input {
+    width: 100%;
+  }
+}
+</style> 
\ No newline at end of file
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/merchant/clue-management/index.vue b/pc/src/views/merchant/clue-management/index.vue
new file mode 100644
index 0000000..a0c836d
--- /dev/null
+++ b/pc/src/views/merchant/clue-management/index.vue
@@ -0,0 +1,1759 @@
+<template>
+  <div class="clue-management-container">
+    <!-- 导航标签 -->
+    <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
+      <el-tab-pane label="我的线索" name="my"></el-tab-pane>
+      <el-tab-pane label="全部线索" name="all"></el-tab-pane>
+      <el-tab-pane label="线索公海" name="public"></el-tab-pane>
+      <el-tab-pane label="跟进状态" name="status"></el-tab-pane>
+    </el-tabs>
+
+
+
+    <!-- 搜索条件区域 -->
+    <div v-if="activeTab !== 'status'" class="filter-container">
+      <el-form :inline="true" :model="queryParams" ref="queryForm" class="search-form">
+        <el-form-item label="客户名称">
+          <el-input v-model="queryParams.customerName" placeholder="搜索客户名称" clearable style="width: 200px;"
+            @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item label="客户电话">
+          <el-input v-model="queryParams.customerPhone" placeholder="搜索客户电话" clearable style="width: 200px;"
+            @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item label="公司名称">
+          <el-input v-model="queryParams.companyName" placeholder="搜索公司名称" clearable style="width: 200px;"
+            @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item label="意向项目">
+          <el-cascader v-model="queryParams.projectId" :options="projectOptions" placeholder="请选择意向项目" clearable
+            style="width: 200px;" :props="{ expandTrigger: 'hover', emitPath: false }"></el-cascader>
+        </el-form-item>
+        <el-form-item label="来源">
+          <el-select v-model="queryParams.source" placeholder="请选择来源" clearable style="width: 200px;">
+            <el-option v-for="item in sourceOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="线索来源" v-if="activeTab !== 'public'">
+          <el-select v-model="queryParams.leadSource" placeholder="请选择线索来源" clearable style="width: 200px;">
+            <el-option v-for="item in clueSourceOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="线索状态">
+          <el-select v-model="queryParams.statusId" placeholder="请选择线索状态" clearable style="width: 200px;">
+            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="更新日期">
+          <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
+            end-placeholder="结束日期" value-format="yyyy-MM-dd" style="width: 240px;"></el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <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-form>
+      <div class="action-buttons">
+        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增线索</el-button>
+        <!-- <template v-if="activeTab === 'all'">
+          <el-button type="success" icon="el-icon-upload2">导入线索</el-button>
+          <el-button type="info" icon="el-icon-download">导出线索</el-button>
+        </template>
+<template v-if="activeTab === 'public'">
+          <el-button type="success" icon="el-icon-s-promotion">批量指定分配</el-button>
+        </template> -->
+      </div>
+    </div>
+
+    <!-- 跟进状态管理页面 -->
+    <div v-if="activeTab === 'status'" class="status-management">
+      <div class="status-header">
+        <div class="title">跟进状态列表</div>
+        <!-- <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAddStatus">新增状态</el-button> -->
+      </div>
+      <el-table :data="leadList" border style="width: 100%">
+        <el-table-column type="index" label="排序" width="80" align="center"></el-table-column>
+        <el-table-column prop="statusName" label="跟进状态" width="180"></el-table-column>
+        <el-table-column prop="description" label="阶段描述"></el-table-column>
+        <!-- <el-table-column label="操作" width="150" align="center">
+          <template slot-scope="scope">
+            <el-button v-if="!scope.row.isSystem" type="text" @click="handleEditStatus(scope.row)">编辑</el-button>
+            <el-button v-if="!scope.row.isSystem" type="text" class="delete-btn"
+              @click="handleDeleteStatus(scope.row)">删除</el-button>
+          </template>
+        </el-table-column> -->
+      </el-table>
+    </div>
+
+    <!-- 表格展示区域 - 仅在非状态管理时显示 -->
+    <div v-else>
+      <el-table v-loading="loading" :data="leadList" border stripe :key="activeTab">
+        <el-table-column type="selection" width="55" align="center" v-if="activeTab === 'public'"></el-table-column>
+        <el-table-column prop="customerName" label="客户名称" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="customerPhone" label="客户电话" width="120" />
+        <el-table-column prop="companyName" label="公司" min-width="150" show-overflow-tooltip />
+        <el-table-column prop="statusName" label="线索状态" width="100">
+          <template slot-scope="scope">
+            <el-tag :type="getFollowStatusType(scope.row.statusId.toString())">
+              {{ scope.row.statusName }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="leadSourceDesc" label="线索来源" width="100" />
+        <el-table-column prop="companyName" label="所属渠道公司" min-width="150" show-overflow-tooltip />
+        <el-table-column prop="lastModTime" label="更新时间" width="160" />
+        <el-table-column prop="projectName" label="意向项目" min-width="150" show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{ scope.row.projectName || getProjectNameById(scope.row.projectId) || '--' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="需求面积段" width="120">
+          <template slot-scope="scope">
+            {{ formatAreaRange(scope.row) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip />
+        <el-table-column prop="personnelName" label="跟进人员" min-width="150" show-overflow-tooltip
+          v-if="activeTab === 'all'" />
+        <el-table-column label="操作" width="150" align="center">
+          <template slot-scope="scope">
+            <el-button v-if="activeTab !== 'public'" type="text" size="small"
+              @click="handleFollow(scope.row)">跟进</el-button>
+            <el-button v-if="activeTab === 'public'" type="text" size="small"
+              @click="handleAssign(scope.row)">指定分配</el-button>
+            <el-button type="text" size="small" @click="handleViewDetail(scope.row)">详情</el-button>
+            <el-button type="text" v-if="activeTab === 'my' || activeTab === 'all'" size="small" class="delete-btn"
+              @click="returnToPublic(scope.row)">退回公海</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+
+    </div>
+    <!-- 分页区域 -->
+    <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="addDialogVisible" width="700px" append-to-body
+      @close="$refs.addForm && $refs.addForm.resetFields()">
+      <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="100px">
+        <el-divider content-position="left">基础信息</el-divider>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="意向项目" prop="projectId">
+              <el-cascader v-model="addForm.projectId" :options="projectOptions" @change="getTeamOptions"
+                placeholder="请选择意向项目" clearable style="width: 100%;"
+                :props="{ expandTrigger: 'hover', emitPath: false }"></el-cascader>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="客户名称" prop="customerName">
+              <el-input v-model="addForm.customerName" placeholder="请输入客户名称" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="客户手机号" prop="customerPhone">
+              <el-input v-model="addForm.customerPhone" placeholder="请输入客户手机号" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="公司" prop="companyName">
+              <el-input v-model="addForm.companyName" placeholder="请输入公司" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="客户详情" prop="customerDetails">
+              <el-input v-model="addForm.customerDetails" placeholder="请输入客户详情" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="客户级别" prop="customerLevel">
+              <el-input v-model="addForm.customerLevel" placeholder="请输入客户级别" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="行业" prop="industry">
+              <el-select v-model="addForm.industry" placeholder="请选择行业" clearable style="width: 100%;">
+                <el-option v-for="item in industryOptions" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="年龄" prop="age">
+              <el-input-number v-model="addForm.age" :min="0" :max="150" style="width: 100%;" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="来源" prop="source">
+              <el-select v-model="addForm.source" placeholder="请选择来源" clearable style="width: 100%;">
+                <el-option v-for="item in sourceOptions" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model="addForm.remark" placeholder="请输入备注" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-divider content-position="left">需求信息</el-divider>
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="需求面积">
+              <div class="area-range">
+                <el-input-number v-model="addForm.areaMin" :min="0" placeholder="最小值" style="width: 110px;"
+                  controls-position="right" />
+                <span class="area-unit">m²</span>
+                <span style="margin: 0 10px;" class="area-separator">-</span>
+                <el-input-number v-model="addForm.areaMax" :min="0" placeholder="最大值" style="width: 110px;"
+                  controls-position="right" />
+                <span class="area-unit">m²</span>
+              </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="客户预算" prop="budget">
+              <el-input-number v-model="addForm.budget" :min="0" :step="1000" style="width: 100%;" :controls="false">
+                <template slot="append">元</template>
+              </el-input-number>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-divider content-position="left">跟进人员</el-divider>
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="跟进方式" prop="followType">
+              <el-radio-group v-model="addForm.followType" @change="handleFollowTypeChange">
+                <el-radio label="1">指定人员</el-radio>
+                <el-radio label="2">加入公海</el-radio>
+                <el-radio label="3">分配给创建人</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20" v-if="addForm.followType === '1'">
+          <el-col :span="24">
+            <el-form-item label="跟进人员" prop="personnelId">
+              <el-cascader v-model="addForm.personnelId" :options="cascaderTeamOptions" placeholder="请选择跟进人员" clearable
+                filterable :props="{
+                  expandTrigger: 'hover',
+                  lazy: true,
+                  lazyLoad: lazyLoadTeamPersonnel,
+                  value: 'value',
+                  label: 'label',
+                  emitPath: false
+                }" style="width: 100%;"></el-cascader>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="addDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitAddForm">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 跟进线索对话框 -->
+    <el-dialog title="跟进线索" :visible.sync="followDialogVisible" width="900px" append-to-body>
+      <el-tabs v-model="followActiveTab">
+        <el-tab-pane label="跟进线索" name="follow">
+          <el-form ref="followForm" :model="followForm" :rules="followRules" label-width="120px">
+            <el-form-item label="变更线索状态" prop="statusId">
+              <el-select v-model="followForm.statusId" placeholder="请选择跟进状态" style="width: 100%;">
+                <el-option v-for="dict in statusOptions" :key="dict.value" :label="dict.label" :value="dict.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="跟进内容" prop="followContent">
+              <el-input type="textarea" v-model="followForm.followContent" placeholder="请输入跟进内容" :rows="3" />
+            </el-form-item>
+            <el-form-item v-if="followForm.statusId !== '4'" label="下次跟进时间" prop="nextFollowTime">
+              <el-date-picker v-model="followForm.nextFollowTime" type="datetime" placeholder="请选择下次跟进时间"
+                value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"></el-date-picker>
+            </el-form-item>
+            <el-form-item label="跟进图片" prop="image">
+              <el-upload :action="uploadUrl" :file-list="fileList" :limit="1" :on-exceed="handleExceed"
+                :on-success="handleUploadSuccess" :on-error="handleUploadError" :before-upload="beforeUpload"
+                list-type="picture-card">
+                <i class="el-icon-plus"></i>
+              </el-upload>
+              <div class="el-upload__tip">只能上传jpg/png文件，且不超过5MB</div>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+
+        <el-tab-pane label="线索信息" name="info">
+          <el-form ref="leadInfoForm" :model="currentLead" label-width="100px">
+            <el-form-item label="意向项目">
+              <el-cascader v-model="currentLead.projectId" :options="projectOptions" placeholder="请选择意向项目" clearable
+                style="width: 100%;" :props="{ expandTrigger: 'hover', emitPath: false }"></el-cascader>
+            </el-form-item>
+            <el-form-item label="客户名称">
+              <el-input v-model="currentLead.customerName" />
+            </el-form-item>
+            <el-form-item label="客户手机号">
+              <el-input v-model="currentLead.customerPhone" />
+            </el-form-item>
+            <el-form-item label="公司">
+              <el-input v-model="currentLead.companyName" />
+            </el-form-item>
+            <el-form-item label="需求面积">
+              <el-row :gutter="10">
+                <el-col :span="5">
+                  <el-input-number v-model="currentLead.areaMin" placeholder="最小面积" :min="0" style="width: 100%;" />
+                </el-col>
+                <el-col :span="2" style="text-align: center;">-</el-col>
+                <el-col :span="5">
+                  <el-input-number v-model="currentLead.areaMax" placeholder="最大面积" :min="0" style="width: 100%;" />
+                </el-col>
+              </el-row>
+            </el-form-item>
+            <el-form-item label="备注">
+              <el-input type="textarea" v-model="currentLead.remark" :rows="3" />
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        
+        <el-tab-pane label="跟进历史" name="history">
+          <div v-if="!currentLead.followHistory || currentLead.followHistory.length === 0" class="no-data">暂无跟进记录</div>
+          <div v-else class="history-timeline">
+            <el-timeline>
+              <el-timeline-item v-for="(item, index) in currentLead.followHistory" :key="index"
+                :timestamp="item.createTime" :type="getFollowStatusType(item.statusId)">
+                <div class="timeline-content">
+                  <div class="status">
+                    <el-tag :type="getFollowStatusType(item.statusId)">{{ getFollowStatusLabel(item.statusId) }}</el-tag>
+                  </div>
+                  <div class="content">{{ item.followContent }}</div>
+                  <div class="footer">
+                    <span>跟进人: {{ item.followUserName }}</span>
+                  </div>
+                  <div v-if="item.imageUrl" class="image">
+                    <el-image :src="item.imageUrl" :preview-src-list="[item.imageUrl]"
+                      style="width: 100px; height: 100px;"></el-image>
+                  </div>
+                </div>
+              </el-timeline-item>
+            </el-timeline>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="followDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitFollowForm">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 线索详情对话框 -->
+    <el-dialog title="线索详情" :visible.sync="detailDialogVisible" width="800px" append-to-body>
+      <el-tabs value="basic">
+        <el-tab-pane label="基本信息" name="basic">
+          <el-descriptions :column="2" border>
+            <el-descriptions-item label="报备时间">{{ currentLead.createTime || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="意向项目">{{ currentLead.projectName || getProjectNameById(currentLead.projectId) || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="楼宇名称">{{ currentLead.buildingName || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="客户名称">{{ currentLead.customerName || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="客户手机号">{{ currentLead.customerPhone || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="客户所属公司">{{ currentLead.companyName || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="需求面积段">{{ formatAreaRange(currentLead) || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="备注">{{ currentLead.remark || '--' }}</el-descriptions-item>
+          </el-descriptions>
+        </el-tab-pane>
+        <el-tab-pane label="跟进信息" name="follow">
+          <el-descriptions :column="2" border>
+            <el-descriptions-item label="招商专员">{{ currentLead.personnelName || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="招商经理">{{ currentLead.teamName || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="分配方式">{{ currentLead.assignmentTypeDesc || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="线索状态">{{ currentLead.statusName || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="最后跟进时间">{{ currentLead.lastFollowTime || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="下次跟进时间">{{ currentLead.nextFollowTime || '--' }}</el-descriptions-item>
+          </el-descriptions>
+        </el-tab-pane>
+        <el-tab-pane label="其他信息" name="other">
+          <el-descriptions :column="2" border>
+            <el-descriptions-item label="行业">{{ currentLead.industry || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="年龄">{{ currentLead.age || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="客户预算">{{ currentLead.budget || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="客户详情">{{ currentLead.customerDetails || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="客户级别">{{ currentLead.customerLevel || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="客户级别描述">{{ currentLead.customerLevelDesc || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="线索来源">{{ currentLead.leadSource || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="线索来源描述">{{ currentLead.leadSourceDesc || '--' }}</el-descriptions-item>
+          </el-descriptions>
+        </el-tab-pane>
+      </el-tabs>
+    </el-dialog>
+
+    <!-- 指定分配对话框 -->
+    <el-dialog title="指定分配" :visible.sync="assignDialogVisible" width="500px" append-to-body>
+      <el-form ref="assignForm" :model="assignForm" label-width="100px">
+        <el-form-item label="客户信息">
+          <div>{{ currentLead.customerName }} {{ currentLead.customerPhone }}</div>
+        </el-form-item>
+        <el-form-item label="选择跟进人员" prop="personnelId">
+          <el-cascader v-model="assignForm.personnelId" :options="cascaderTeamOptions" placeholder="请选择跟进人员" clearable
+            filterable :props="{
+              expandTrigger: 'hover',
+              lazy: true,
+              lazyLoad: lazyLoadTeamPersonnel,
+              value: 'value',
+              label: 'label',
+              emitPath: false
+            }" style="width: 100%;"></el-cascader>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="assignDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitAssignForm">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 状态表单对话框 -->
+    <el-dialog :title="statusForm.id ? '编辑状态' : '新增状态'" :visible.sync="statusFormDialogVisible" width="500px"
+      append-to-body>
+      <el-form ref="statusForm" :model="statusForm" :rules="statusRules" label-width="100px">
+        <el-form-item label="状态名称" prop="statusName">
+          <el-input v-model="statusForm.statusName" placeholder="请输入状态名称" />
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number v-model="statusForm.sort" :min="0" :max="100" style="width: 100%;" />
+        </el-form-item>
+        <el-form-item label="阶段描述" prop="description">
+          <el-input v-model="statusForm.description" placeholder="请输入阶段描述" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="statusFormDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitStatusForm">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { API_SUCCESS_CODE } from '@/utils/constants'
+import {
+  getProjectsList,
+  getMerchantTeamList,
+  getMerchantTeamByProjectId,
+  getMerchantPersonnelList,
+  // 线索状态API
+  getLeadStatusList,
+  getLeadStatusDetail,
+  addLeadStatus,
+  updateLeadStatus,
+  deleteLeadStatus,
+  checkLeadStatusName,
+  // 线索管理API
+  getLeadList,
+  getMyLeadList,
+  getAllLeadList,
+  getPublicLeadList,
+  getLeadDetail,
+  addLead,
+  updateLead,
+  changeLeadStatus,
+  changeLeadPersonnel,
+  checkLeadPhone,
+  convertLeadToIntention,
+  deleteLead,
+  getLeadFollowHistory
+} from '@/api/merchant'
+
+import { getTagByType } from '@/api/project'
+
+export default {
+  name: 'ClueManagement',
+  data() {
+    return {
+      // 激活的标签页
+      activeTab: 'my',
+      // 跟进弹窗标签页
+      followActiveTab: 'follow',
+      // 遮罩层
+      loading: false,
+      // 统计数据
+      totalCount: 0,
+      todayNewCount: 0,
+      monthNewCount: 0,
+      invalidCount: 0,
+      convertRate: 0,
+      // 线索列表
+      leadList: [],
+      // 标签分组数据
+      tagGroups: [],
+      // 总条数
+      total: 0,
+      // 项目选项
+      projectOptions: [],
+      // 日期范围
+      dateRange: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        customerName: undefined,
+        customerPhone: undefined,
+        companyName: undefined,
+        projectId: undefined,
+        source: undefined,
+        leadSource: undefined,
+        statusId: undefined,
+        beginTime: undefined,
+        endTime: undefined
+      },
+      // 来源选项
+      sourceOptions: [
+        { value: '1', label: '自上' },
+        { value: '2', label: '公司资源' },
+        { value: '3', label: '自拓' },
+        { value: '4', label: '个人转介' },
+        { value: '5', label: '老带新' },
+        { value: '6', label: '渠道' },
+        { value: '7', label: '其他' }
+      ],
+      // 线索来源选项
+      clueSourceOptions: [
+        { value: '1', label: '自建' },
+        { value: '2', label: '导入' }
+      ],
+      // 跟进状态选项
+      statusOptions: [
+        { value: '1', label: '未联系', isSystem: true, sort: 1, description: '内置线索状态' },
+        { value: '2', label: '初步沟通', isSystem: true, sort: 1, description: '内置线索状态' },
+        { value: '3', label: '无效线索', isSystem: true, sort: null, description: '内置线索状态' },
+        { value: '4', label: '转意向客户', isSystem: true, sort: null, description: '内置线索状态' }
+      ],
+      // 状态列表（用于状态管理页面）
+      statusList: [],
+      // 当前选中的线索
+      currentLead: {
+        followHistory: [] // 默认为空数组
+      },
+
+      // 对话框显示控制
+      addDialogVisible: false,
+      followDialogVisible: false,
+      detailDialogVisible: false,
+      assignDialogVisible: false,
+      statusDialogVisible: false,
+      statusFormDialogVisible: false,
+
+      // 新增线索表单
+      addForm: {
+        // 基础信息
+        projectId: undefined,
+        buildingId: undefined,
+        customerName: '',
+        customerPhone: '',
+        companyName: '',
+        customerLevel: '',
+        industry: '',
+        source: '',
+        remark: '',
+        // 需求信息
+        areaMin: undefined,
+        areaMax: undefined,
+        budget: undefined,
+        // 跟进人员
+        followType: '1', // 1-指定人员 2-加入公海 3-分配给创建人
+        teamId: undefined,
+        personnelId: undefined,
+        customerDetails: '',
+        leadSource: 'zi',
+        statusId: undefined
+      },
+      // 新增表单校验规则
+      addRules: {
+        projectId: [{ required: true, message: '请选择意向项目', trigger: 'change' }],
+        customerName: [
+          { required: true, message: '客户名称不能为空', trigger: 'blur' },
+          { min: 2, max: 50, message: '客户名称长度必须在2-50个字符之间', trigger: 'blur' }
+        ],
+        customerPhone: [
+          { required: true, message: '客户手机号不能为空', trigger: 'blur' },
+          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
+        ],
+        customerDetails: [
+          { required: true, message: '客户详情不能为空', trigger: 'blur' }
+        ],
+        customerLevel: [
+          { required: true, message: '客户级别不能为空', trigger: 'blur' }
+        ]
+      },
+
+      // 跟进表单
+      followForm: {
+        id: undefined,
+        statusId: '',
+        followContent: '',
+        nextFollowTime: '',
+        image: null,
+      },
+      // 跟进表单校验规则
+      followRules: {
+        statusId: [
+          { required: true, message: '请选择跟进状态', trigger: 'change' }
+        ]
+      },
+
+      // 指定分配表单
+      assignForm: {
+        id: undefined,
+        teamId: undefined,
+        personnelId: undefined
+      },
+
+      // 状态表单
+      statusForm: {
+        id: undefined,
+        statusName: '',
+        sortOrder: undefined,
+        isInitial: false,
+        isFinal: false,
+        isSuccess: false,
+        statusColor: '#409EFF',
+        remark: '',
+        createUserId: undefined,
+        lastModUserId: undefined
+      },
+      // 状态表单校验规则
+      statusRules: {
+        statusName: [
+          { required: true, message: '请输入状态名称', trigger: 'blur' }
+        ],
+        sortOrder: [
+          { required: true, message: '请输入排序值', trigger: 'blur' }
+        ],
+        statusColor: [
+          { required: true, message: '请选择状态颜色', trigger: 'change' }
+        ]
+      },
+
+      // 招商团队选项
+      teamOptions: [],
+      // 级联选择器的团队选项
+      cascaderTeamOptions: [],
+      // 招商人员选项
+      personnelOptions: [],
+      // 行业选项
+      industryOptions: [],
+      // 上传接口地址
+      uploadUrl: '/api/common/upload',
+      // 上传文件列表
+      fileList: []
+    }
+  },
+  computed: {
+    // 计算属性：根据日期范围设置查询参数
+    queryDateParams() {
+      if (this.dateRange && this.dateRange.length === 2) {
+        this.queryParams.beginTime = this.dateRange[0]
+        this.queryParams.endTime = this.dateRange[1]
+      } else {
+        this.queryParams.beginTime = undefined
+        this.queryParams.endTime = undefined
+      }
+      return this.queryParams
+    },
+
+    // 计算属性：获取当前线索的面积区间文本表示
+    areaRangeText() {
+      return this.currentLead ? this.formatAreaRange(this.currentLead) : '--';
+    }
+  },
+  watch: {
+    dateRange(val) {
+      if (val) {
+        this.queryParams.beginTime = val[0]
+        this.queryParams.endTime = val[1]
+      } else {
+        this.queryParams.beginTime = undefined
+        this.queryParams.endTime = undefined
+      }
+    }
+  },
+  created() {
+    this.getProjectOptions()
+    this.getTagOptions()
+    this.getStatistics()
+    this.getList()
+  },
+  methods: {
+
+    /** 获取标签选项 */
+    getTagOptions() {
+      getTagByType({ tagType: '行业标签', tagName: '行业标签' }).then(res => {
+        this.industryOptions = res.data
+      }).catch(() => {
+        this.industryOptions = [
+          { id: '1', tagName: '标签1' },
+          { id: '2', tagName: '标签2' }
+        ]
+      })
+    },
+
+    // 获取统计数据
+    getStatistics() {
+      // 模拟数据
+      this.totalCount = 12
+      this.todayNewCount = 2
+      this.monthNewCount = 5
+      this.invalidCount = 1
+      this.convertRate = 50
+    },
+
+    // 获取跟进状态列表
+    getStatusList() {
+      this.loading = true
+      getLeadList()
+        .then(response => {
+          if (response.code === API_SUCCESS_CODE) {
+            this.statusList = response.data.list || []
+            // 将状态列表同步到状态选项中
+            this.statusOptions = this.statusList.map(item => ({
+              value: item.id.toString(),
+              label: item.statusName,
+              isSystem: item.isInitial || item.isFinal,
+              sort: item.sortOrder,
+              description: item.remark,
+              color: item.statusColor
+            }))
+          } else {
+            this.$message.error(response.msg || '获取状态列表失败')
+          }
+          this.loading = false
+        })
+        .catch(error => {
+          console.error('获取状态列表失败', error)
+          this.$message.error('系统错误，获取状态列表失败')
+          this.loading = false
+        })
+    },
+
+    // 获取项目选项
+    getProjectOptions() {
+      // 使用bizTeam/projects接口获取项目列表
+      getProjectsList().then(res => {
+        if (res.code === API_SUCCESS_CODE) {
+          // 转换数据结构为级联选择器格式
+          this.projectOptions = res.data.map(item => ({
+            value: item.projectId || item.id,
+            label: item.projectName || item.name
+          }))
+        } else {
+          this.$message.error(res.msg || '获取项目列表失败')
+          this.projectOptions = []
+        }
+      }).catch(error => {
+        console.error('获取项目列表失败', error)
+        this.$message.error('系统错误，获取项目列表失败')
+        this.projectOptions = []
+      })
+    },
+
+    // 获取招商团队选项
+    getTeamOptions() {
+      // 使用bizTeam/list接口获取团队列表
+      getMerchantTeamByProjectId(this.addForm.projectId).then(res => {
+        if (res.code === API_SUCCESS_CODE) {
+          this.teamOptions = res.data.map(team => ({
+            id: team.id,
+            value: team.id,
+            teamName: team.teamName,
+            label: team.teamName,
+            personnelList: []
+          }))
+
+          // 只构建团队层级，不预加载人员数据
+          this.cascaderTeamOptions = res.data.map(team => ({
+            value: team.id,
+            label: team.teamName,
+            leaf: false,  // 表示有子节点，但需要懒加载
+          }))
+        } else {
+          this.$message.error(res.msg || '获取团队列表失败')
+          this.teamOptions = []
+          this.cascaderTeamOptions = []
+        }
+      }).catch(error => {
+        console.error('获取团队列表失败', error)
+        // this.$message.error('系统错误，获取团队列表失败')
+        this.teamOptions = []
+        this.cascaderTeamOptions = []
+      })
+    },
+
+    // 懒加载招商团队人员
+    lazyLoadTeamPersonnel(node, resolve) {
+      // 根节点时不做操作
+      if (node.level === 0) {
+        return resolve([])
+      }
+
+      // 已经是叶子节点，不需要继续加载
+      if (node.level > 0) {
+        const teamId = node.value
+
+        const params = {
+          pageNum: 1,
+          pageSize: 100,
+          teamId: teamId
+        }
+
+        getMerchantPersonnelList(params).then(res => {
+          if (res.code === API_SUCCESS_CODE) {
+            // 将人员数据转换为叶子节点
+            const personnel = (res.data.data || []).map(item => ({
+              value: item.id,
+              label: `${item.memberName || '未知'} (${item.phone || '无电话'})`,
+              leaf: true  // 标记为叶子节点
+            }))
+
+            resolve(personnel)
+          } else {
+            this.$message.error(res.msg || '获取团队人员失败')
+            resolve([])
+          }
+        }).catch(error => {
+          console.error('获取团队人员失败', error)
+          this.$message.error('系统错误，获取团队人员失败')
+          resolve([])
+        })
+      } else {
+        resolve([])
+      }
+    },
+
+    // 处理跟进方式变更
+    handleFollowTypeChange(value) {
+      if (value === '1') { // 指定人员
+        // 重置人员选择
+        this.addForm.personnelId = undefined
+      }
+    },
+
+    // 获取线索列表
+    getList() {
+      this.loading = true
+      let params = { ...this.queryParams }
+
+      // 移除日期范围，单独设置
+      delete params.beginTime;
+      delete params.endTime;
+
+      // 处理日期范围
+      if (this.dateRange && this.dateRange.length === 2) {
+        params.beginTime = this.dateRange[0]
+        params.endTime = this.dateRange[1]
+      }
+
+      // 根据当前标签页选择对应的API
+      let apiMethod;
+      if (this.activeTab === 'my') {
+        // 默认给我的线索加一个userid
+        params.userId = 110
+
+        apiMethod = getMyLeadList;
+      } else if (this.activeTab === 'all') {
+        apiMethod = getAllLeadList;
+      } else if (this.activeTab === 'public') {
+        apiMethod = getPublicLeadList;
+      } else {
+        apiMethod = getLeadList; // 默认使用原来的API
+      }
+
+      apiMethod(params)
+        .then(response => {
+          if (response.code === API_SUCCESS_CODE) {
+            this.leadList = response.data.list || []
+            this.total = response.data.total || 0
+          } else {
+            this.$message.error(response.msg || '获取线索列表失败')
+          }
+          this.loading = false
+        })
+        .catch(error => {
+          console.error('获取线索列表失败', error)
+          this.$message.error('系统错误，获取线索列表失败')
+          this.loading = false
+        })
+    },
+
+    // 标签页点击事件
+    handleTabClick() {
+      // 清空列表数据，避免切换时数据错乱
+      this.leadList = []
+      // 重置分页参数
+      this.queryParams.pageNum = 1
+      this.queryParams.pageSize = 10
+      
+      // 如果切换到状态管理标签页
+      if (this.activeTab === 'status') {
+        this.getStatusList()
+      } else {
+        this.getList()
+      }
+    },
+
+    // 查询按钮
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+
+    // 重置按钮
+    resetQuery() {
+      this.$refs.queryForm.resetFields()
+      this.dateRange = []
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        customerName: undefined,
+        customerPhone: undefined,
+        companyName: undefined,
+        projectId: undefined,
+        source: undefined,
+        leadSource: undefined,
+        statusId: undefined,
+        beginTime: undefined,
+        endTime: undefined
+      }
+      this.getList()
+    },
+
+    // 分页大小改变
+    handleSizeChange(val) {
+      this.queryParams.pageSize = val
+      this.getList()
+    },
+
+    // 分页页码改变
+    handleCurrentChange(val) {
+      this.queryParams.pageNum = val
+      this.getList()
+    },
+
+    // 新增线索
+    handleAdd() {
+      // 获取当前用户ID
+      const userId = this.$store.getters.userId || 1
+      const initialStatus = this.statusOptions.find(item => item.isInitial)
+
+      this.addForm = {
+        customerName: '',
+        customerPhone: '',
+        companyName: '',
+        customerLevel: '',
+        industry: '',
+        source: '',
+        projectId: undefined,
+        areaMin: undefined,
+        areaMax: undefined,
+        budget: undefined,
+        customerDetails: '',
+        remark: '',
+        followType: '1', // 1-指定人员 2-加入公海 3-分配给创建人
+        teamId: undefined,
+        personnelId: undefined,
+        statusId: initialStatus ? initialStatus.value : undefined,
+        leadSource: 'zi', // zi-自建
+        createUserId: userId
+      }
+      this.addDialogVisible = true
+    },
+
+    // 编辑线索
+    handleEdit(row) {
+      // 获取当前用户ID
+      const userId = this.$store.getters.userId || 1
+
+      getLeadDetail(row.id)
+        .then(response => {
+          if (response.code === API_SUCCESS_CODE) {
+            const data = response.data
+            this.addForm = {
+              id: data.id,
+              customerName: data.customerName || '',
+              customerPhone: data.customerPhone || '',
+              companyName: data.companyName || '',
+              customerLevel: data.customerLevel || '',
+              industry: data.industry || '',
+              source: data.source || '',
+              projectId: data.projectId || undefined,
+              areaMin: data.areaMin || undefined,
+              areaMax: data.areaMax || undefined,
+              budget: data.budget || undefined,
+              customerDetails: data.customerDetails || '',
+              remark: data.remark || '',
+              assignmentType: data.assignmentType || '加入公海',
+              teamId: data.teamId || undefined,
+              personnelId: data.personnelId || undefined,
+              statusId: data.statusId ? data.statusId.toString() : undefined,
+              lastModUserId: userId
+            }
+            this.addDialogVisible = true
+          } else {
+            this.$message.error(response.msg || '获取线索详情失败')
+          }
+        })
+        .catch(error => {
+          console.error('获取线索详情失败', error)
+          this.$message.error('系统错误，获取线索详情失败')
+        })
+    },
+
+    // 查看线索详情
+    handleViewDetail(row) {
+      getLeadDetail(row.id)
+        .then(response => {
+          if (response.code === API_SUCCESS_CODE) {
+            this.currentLead = response.data;
+            // 确保followHistory字段有默认值
+            if (!this.currentLead.followHistory) {
+              this.currentLead.followHistory = [];
+            }
+            this.detailDialogVisible = true;
+          } else {
+            this.$message.error(response.msg || '获取线索详情失败')
+          }
+        })
+        .catch(error => {
+          console.error('获取线索详情失败', error)
+          this.$message.error('系统错误，获取线索详情失败')
+        })
+    },
+
+    // 跟进线索
+    handleFollow(row) {
+      getLeadDetail(row.id)
+        .then(response => {
+          if (response.code === API_SUCCESS_CODE) {
+            this.currentLead = response.data;
+            // 确保followHistory字段有默认值
+            if (!this.currentLead.followHistory) {
+              this.currentLead.followHistory = [];
+            }
+            this.followForm = {
+              id: row.id,
+              statusId: this.currentLead.statusId ? this.currentLead.statusId.toString() : '',
+              followContent: this.currentLead.followContent,
+              nextFollowTime: this.currentLead.nextFollowTime,
+              image: null
+            }
+            this.followActiveTab = 'follow';
+            this.followDialogVisible = true;
+          } else {
+            this.$message.error(response.msg || '获取线索详情失败')
+          }
+        })
+        .catch(error => {
+          console.error('获取线索详情失败', error)
+          this.$message.error('系统错误，获取线索详情失败')
+        })
+    },
+
+    // 下拉菜单命令处理
+    handleCommand(command, row) {
+      if (command === 'returnToPublic') {
+        this.returnToPublic(row)
+      }
+    },
+
+    // 退回公海
+    returnToPublic(row) {
+      // 获取当前用户ID
+      const userId = this.$store.getters.userId || 1
+
+      this.$confirm(`确认将线索 ${row.customerName} 退回公海吗？`, '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.loading = true
+        // API中没有直接退回公海的接口，使用修改跟进人员为空来实现
+        changeLeadPersonnel(row.id, 0, userId)
+          .then(response => {
+            if (response.code === API_SUCCESS_CODE) {
+              this.$message.success('已将线索退回公海')
+              this.getList()
+            } else {
+              this.$message.error(response.msg || '退回公海失败')
+            }
+            this.loading = false
+          })
+          .catch(error => {
+            console.error('退回公海失败', error)
+            this.$message.error('系统错误，退回公海失败')
+            this.loading = false
+          })
+      }).catch(() => { })
+    },
+
+    // 新增状态
+    handleAddStatus() {
+      // 获取当前用户ID
+      const userId = this.$store.getters.userId || 1
+
+      this.statusForm = {
+        id: undefined,
+        statusName: '',
+        sortOrder: this.statusList.length > 0 ? Math.max(...this.statusList.map(item => item.sortOrder)) + 1 : 1,
+        isInitial: false,
+        isFinal: false,
+        isSuccess: false,
+        statusColor: '#409EFF',
+        remark: '',
+        createUserId: userId
+      }
+      this.statusFormDialogVisible = true
+    },
+
+    // 编辑状态
+    handleEditStatus(row) {
+      // 获取当前用户ID
+      const userId = this.$store.getters.userId || 1
+
+      getLeadStatusDetail(row.id)
+        .then(response => {
+          if (response.code === API_SUCCESS_CODE) {
+            this.statusForm = {
+              ...response.data,
+              lastModUserId: userId
+            }
+            this.statusFormDialogVisible = true
+          } else {
+            this.$message.error(response.msg || '获取状态详情失败')
+          }
+        })
+        .catch(error => {
+          console.error('获取状态详情失败', error)
+          this.$message.error('系统错误，获取状态详情失败')
+        })
+    },
+
+    // 删除状态
+    handleDeleteStatus(row) {
+      // 获取当前用户ID
+      const userId = this.$store.getters.userId || 1
+
+      this.$confirm(`确认删除状态 ${row.statusName} 吗？`, '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.loading = true
+        deleteLeadStatus(row.id, userId)
+          .then(response => {
+            if (response.code === API_SUCCESS_CODE) {
+              this.$message.success('删除成功')
+              this.getStatusList()
+            } else {
+              this.$message.error(response.msg || '删除状态失败')
+            }
+            this.loading = false
+          })
+          .catch(error => {
+            console.error('删除状态失败', error)
+            this.$message.error('系统错误，删除状态失败')
+            this.loading = false
+          })
+      }).catch(() => { })
+    },
+
+    // 提交状态表单
+    submitStatusForm() {
+      this.$refs.statusForm.validate(valid => {
+        if (valid) {
+          this.loading = true
+          const method = this.statusForm.id ? updateLeadStatus : addLeadStatus
+
+          method(this.statusForm)
+            .then(response => {
+              if (response.code === API_SUCCESS_CODE) {
+                this.$message.success(this.statusForm.id ? '更新状态成功' : '新增状态成功')
+                this.statusFormDialogVisible = false
+                this.getStatusList()
+              } else {
+                this.$message.error(response.msg || (this.statusForm.id ? '更新状态失败' : '新增状态失败'))
+              }
+              this.loading = false
+            })
+            .catch(error => {
+              console.error(this.statusForm.id ? '更新状态失败' : '新增状态失败', error)
+              this.$message.error(`系统错误，${this.statusForm.id ? '更新' : '新增'}状态失败`)
+              this.loading = false
+            })
+        }
+      })
+    },
+
+    // 检查状态名称是否重复
+    checkStatusNameExist(rule, value, callback) {
+      if (value && (!this.statusForm.id || this.statusForm.statusName !== value)) {
+        checkLeadStatusName(value)
+          .then(response => {
+            if (response.code === API_SUCCESS_CODE) {
+              if (response.data) {
+                callback(new Error('状态名称已存在'))
+              } else {
+                callback()
+              }
+            } else {
+              callback()
+            }
+          })
+          .catch(() => {
+            callback()
+          })
+      } else {
+        callback()
+      }
+    },
+
+    // 格式化面积区间
+    formatAreaRange(row) {
+      if (!row.areaMin && !row.areaMax) return '--';
+      if (row.areaMin && !row.areaMax) return `${row.areaMin}m²以上`;
+      if (!row.areaMin && row.areaMax) return `${row.areaMax}m²以下`;
+      return `${row.areaMin}-${row.areaMax}m²`;
+    },
+
+    // 获取跟进状态标签类型
+    getFollowStatusType(status) {
+      const statusItem = this.statusOptions.find(item => item.value === status)
+      if (statusItem) {
+        // 基于颜色返回对应类型
+        const color = statusItem.color || '#409EFF'
+        switch (color) {
+          case '#409EFF': return 'primary'
+          case '#67C23A': return 'success'
+          case '#E6A23C': return 'warning'
+          case '#F56C6C': return 'danger'
+          default: return 'info'
+        }
+      }
+      return 'info'
+    },
+
+    // 获取跟进状态显示文本
+    getFollowStatusLabel(status) {
+      const found = this.statusOptions.find(item => item.value == status)
+      return found ? found.label : '未知状态'
+    },
+
+    // 提交跟进表单
+    submitFollowForm() {
+      this.$refs.followForm.validate(valid => {
+        if (valid) {
+          // 获取当前用户ID
+          const userId = this.$store.getters.userId || 110
+
+          // 检查是否需要转化为意向客户
+          if (this.followForm.statusId === '4') { // 假设"4"是转化为意向客户的状态ID
+            this.$confirm('确认将该线索转化为意向客户吗？', '提示', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }).then(() => {
+              this.loading = true
+              convertLeadToIntention(this.followForm.id, userId)
+                .then(response => {
+                  if (response.code === API_SUCCESS_CODE) {
+                    this.$message.success('成功将线索转化为意向客户')
+                    this.followDialogVisible = false
+                    this.getList()
+                  } else {
+                    this.$message.error(response.msg || '转化为意向客户失败')
+                  }
+                  this.loading = false
+                })
+                .catch(error => {
+                  console.error('转化为意向客户失败', error)
+                  this.$message.error('系统错误，转化为意向客户失败')
+                  this.loading = false
+                })
+            }).catch(() => { })
+          } else {
+            // 普通状态变更
+            this.loading = true
+            // 更新线索状态
+            changeLeadStatus(this.followForm.id, this.followForm.statusId, userId)
+              .then(response => {
+                if (response.code === API_SUCCESS_CODE) {
+                  this.$message.success('线索状态更新成功')
+
+                  // 同时更新线索信息
+                  const updateData = {
+                    ...this.followForm,
+                    userId,
+                    id: this.currentLead.id,
+                    customerName: this.currentLead.customerName,
+                    customerPhone: this.currentLead.customerPhone,
+                    companyName: this.currentLead.companyName,
+                    projectId: this.currentLead.projectId,
+                    areaMin: this.currentLead.areaMin,
+                    areaMax: this.currentLead.areaMax,
+                    remark: this.currentLead.remark,
+                    lastModUserId: userId
+                  }
+
+                  updateLead(updateData)
+                    .then(() => {
+                      this.followDialogVisible = false
+                      this.getList()
+                    })
+                    .catch(error => {
+                      console.error('更新线索信息失败', error)
+                      this.$message.error('状态已更新，但线索信息更新失败')
+                      this.followDialogVisible = false
+                      this.getList()
+                    })
+                } else {
+                  this.$message.error(response.msg || '更新线索状态失败')
+                  this.loading = false
+                }
+              })
+              .catch(error => {
+                console.error('更新线索状态失败', error)
+                this.$message.error('系统错误，更新线索状态失败')
+                this.loading = false
+              })
+          }
+        }
+      })
+    },
+
+    // 提交新增/编辑线索表单
+    submitAddForm() {
+      this.$refs.addForm.validate(valid => {
+        if (valid) {
+          this.loading = true
+
+          // 构造请求数据
+          const data = { ...this.addForm }
+
+          // 处理跟进方式
+          if (this.addForm.followType === '1') {
+            data.assignmentType = '指定人员'
+          } else if (this.addForm.followType === '2') {
+            data.assignmentType = '加入公海'
+          } else if (this.addForm.followType === '3') {
+            data.assignmentType = '分配给创建人'
+            data.createUserId = this.$store.getters.userId || 110
+          }
+
+          // 删除表单中不需要传递给接口的字段
+          delete data.followType;
+
+          // 获取当前用户ID
+          if (!data.createUserId) {
+            data.createUserId = this.$store.getters.userId || 1;
+          }
+
+          // 新增或更新
+          const method = data.id ? updateLead : addLead
+          data.userId = this.$store.getters.userId || 100
+          method(data)
+            .then(response => {
+              if (response.code === API_SUCCESS_CODE) {
+                this.$message.success(data.id ? '更新线索成功' : '新增线索成功')
+                this.addDialogVisible = false
+                this.getList()
+              } else {
+                this.$message.error(response.msg || (data.id ? '更新线索失败' : '新增线索失败'))
+              }
+              this.loading = false
+            })
+            .catch(error => {
+              console.error(data.id ? '更新线索失败' : '新增线索失败', error)
+              this.$message.error(`系统错误，${data.id ? '更新' : '新增'}线索失败`)
+              this.loading = false
+            })
+        }
+      })
+    },
+
+    // 指定分配线索
+    handleAssign(row) {
+      this.currentLead = row
+      this.assignForm = {
+        id: row.id,
+        teamId: undefined,
+        personnelId: undefined
+      }
+      this.assignDialogVisible = true
+      // 使用bizTeam/list接口获取团队列表
+      getMerchantTeamByProjectId(row.projectId).then(res => {
+        if (res.code === API_SUCCESS_CODE) {
+          this.teamOptions = res.data.map(team => ({
+            id: team.id,
+            value: team.id,
+            teamName: team.teamName,
+            label: team.teamName,
+            personnelList: []
+          }))
+
+          // 只构建团队层级，不预加载人员数据
+          this.cascaderTeamOptions = res.data.map(team => ({
+            value: team.id,
+            label: team.teamName,
+            leaf: false,  // 表示有子节点，但需要懒加载
+          }))
+        } else {
+          this.$message.error(res.msg || '获取团队列表失败')
+          this.teamOptions = []
+          this.cascaderTeamOptions = []
+        }
+      })
+    },
+
+    // 提交分配表单
+    submitAssignForm() {
+      if (!this.assignForm.personnelId) {
+        this.$message.warning('请选择跟进人员')
+        return
+      }
+
+      // 获取当前用户ID
+      const userId = this.$store.getters.userId || 1
+
+      this.loading = true
+      changeLeadPersonnel(this.assignForm.id, this.assignForm.personnelId, userId)
+        .then(response => {
+          if (response.code === API_SUCCESS_CODE) {
+            this.$message.success('分配成功')
+            this.assignDialogVisible = false
+            this.getList()
+          } else {
+            this.$message.error(response.msg || '分配失败')
+          }
+          this.loading = false
+        })
+        .catch(error => {
+          console.error('分配失败', error)
+          this.$message.error('系统错误，分配失败')
+          this.loading = false
+        })
+    },
+
+    // 检查手机号是否存在
+    checkPhoneExist(rule, value, callback) {
+      if (value && (!this.addForm.id || this.addForm.customerPhone !== value)) {
+        checkLeadPhone(value)
+          .then(response => {
+            if (response.code === API_SUCCESS_CODE) {
+              if (response.data) {
+                callback(new Error('该手机号已存在'))
+              } else {
+                callback()
+              }
+            } else {
+              callback()
+            }
+          })
+          .catch(() => {
+            callback()
+          })
+      } else {
+        callback()
+      }
+    },
+
+    // 文件上传前检查
+    beforeUpload(file) {
+      const isImage = file.type.startsWith('image/')
+      const isLt5M = file.size / 1024 / 1024 < 5
+
+      if (!isImage) {
+        this.$message.error('只能上传图片文件!')
+      }
+      if (!isLt5M) {
+        this.$message.error('图片大小不能超过 5MB!')
+      }
+
+      return isImage && isLt5M
+    },
+
+    // 超出上传数量限制
+    handleExceed() {
+      this.$message.warning('最多只能上传1张图片')
+    },
+
+    // 上传成功回调
+    handleUploadSuccess(response, file, fileList) {
+      if (response.code === API_SUCCESS_CODE) {
+        this.followForm.image = response.data.url
+        this.$message.success('图片上传成功')
+      } else {
+        this.$message.error(response.msg || '图片上传失败')
+        // 移除上传失败的文件
+        this.fileList = []
+      }
+    },
+
+    // 上传失败回调
+    handleUploadError() {
+      this.$message.error('图片上传失败')
+      // 移除上传失败的文件
+      this.fileList = []
+    },
+
+    // 根据团队ID获取人员列表
+    getPersonnelByTeamId(teamId) {
+      if (!teamId) return []
+      const selectedTeam = this.teamOptions.find(team =>
+        team.id === teamId || team.value === teamId
+      )
+      return selectedTeam && selectedTeam.personnelList ? selectedTeam.personnelList : []
+    },
+
+    // 根据项目ID获取项目名称
+    getProjectNameById(projectId) {
+      if (!projectId || !this.projectOptions || this.projectOptions.length === 0) {
+        return '';
+      }
+      const project = this.projectOptions.find(item => item.value === projectId);
+      return project ? project.label : '';
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.clue-management-container {
+  padding: 20px;
+
+  .statistics-container {
+    display: flex;
+    justify-content: space-between;
+    margin: 20px 0;
+    background-color: #f9f9f9;
+    padding: 20px;
+    border-radius: 4px;
+
+    .statistics-item {
+      text-align: center;
+      padding: 0 20px;
+
+      .number {
+        font-size: 24px;
+        font-weight: bold;
+        color: #409EFF;
+        margin-bottom: 5px;
+      }
+
+      .text {
+        font-size: 14px;
+        color: #606266;
+      }
+    }
+  }
+
+  .filter-container {
+    margin-bottom: 20px;
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 4px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+
+    .search-form {
+      margin-bottom: 10px;
+    }
+
+    .action-buttons {
+      display: flex;
+      justify-content: flex-end;
+      gap: 10px;
+    }
+  }
+
+  .status-management {
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 4px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+
+    .status-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+
+      .title {
+        font-size: 18px;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .pagination-container {
+    margin-top: 20px;
+    text-align: right;
+  }
+
+  .delete-btn {
+    color: #F56C6C;
+  }
+
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+
+  .area-range {
+    display: flex;
+    align-items: center;
+
+    .area-unit {
+      margin: 0 5px;
+    }
+
+    .area-separator {
+      margin: 0 10px;
+    }
+  }
+
+  .follow-panel,
+  .lead-info-panel {
+    background-color: #fff;
+    border-radius: 4px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+    padding: 20px;
+
+    .follow-header,
+    .info-header,
+    .history-header {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 20px;
+      padding-bottom: 10px;
+      border-bottom: 1px solid #EBEEF5;
+    }
+  }
+
+  .follow-history-panel {
+    margin-top: 20px;
+
+    .no-data {
+      text-align: center;
+      color: #909399;
+      padding: 20px 0;
+    }
+
+    .history-timeline {
+      max-height: 300px;
+      overflow-y: auto;
+      padding: 0 10px;
+    }
+  }
+
+  .timeline-content {
+    padding: 10px;
+    background: #F5F7FA;
+    border-radius: 4px;
+    margin-bottom: 10px;
+
+    .status {
+      margin-bottom: 10px;
+    }
+
+    .content {
+      margin: 10px 0;
+      color: #303133;
+      line-height: 1.5;
+    }
+
+    .footer {
+      display: flex;
+      justify-content: space-between;
+      color: #909399;
+      font-size: 12px;
+    }
+
+    .image {
+      margin-top: 10px;
+    }
+  }
+
+  .history-list {
+    max-height: 400px;
+    overflow-y: auto;
+    padding: 10px;
+  }
+
+  .personnel-select-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    max-height: 300px;
+    overflow-y: auto;
+    border: 1px solid #EBEEF5;
+    border-radius: 4px;
+    padding: 10px;
+
+    .personnel-team {
+      .team-name {
+        font-weight: bold;
+        margin-bottom: 8px;
+        color: #303133;
+        padding-bottom: 5px;
+        border-bottom: 1px solid #EBEEF5;
+      }
+
+      .personnel-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        margin-bottom: 5px;
+      }
+
+      .personnel-item {
+        padding: 8px 15px;
+        border: 1px solid #DCDFE6;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: all 0.3s;
+        background-color: #f5f7fa;
+
+        &:hover {
+          border-color: #409EFF;
+          color: #409EFF;
+        }
+
+        &.active {
+          background-color: #ecf5ff;
+          border-color: #409EFF;
+          color: #409EFF;
+        }
+      }
+
+      .empty-tip {
+        color: #909399;
+        font-size: 12px;
+        padding: 5px;
+      }
+    }
+  }
+}
+
+::v-deep .el-input-number .el-input__inner {
+  text-align: left;
+}
+</style>
\ No newline at end of file
diff --git a/pc/src/views/merchant/intent-customer/index.vue b/pc/src/views/merchant/intent-customer/index.vue
new file mode 100644
index 0000000..1a91a81
--- /dev/null
+++ b/pc/src/views/merchant/intent-customer/index.vue
@@ -0,0 +1,1678 @@
+<template>
+  <div class="intent-customer-container">
+    <!-- 导航标签 -->
+    <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
+      <el-tab-pane label="我的客户" name="my"></el-tab-pane>
+      <el-tab-pane label="全部客户" name="all"></el-tab-pane>
+      <el-tab-pane label="客户公海" name="public"></el-tab-pane>
+      <el-tab-pane label="客户状态" name="status"></el-tab-pane>
+    </el-tabs>
+
+    <!-- 搜索条件区域 -->
+    <div v-if="activeTab !== 'status'" class="filter-container">
+      <el-form :inline="true" :model="queryParams" ref="queryForm" class="search-form">
+        <el-form-item label="客户名称">
+          <el-input v-model="queryParams.customerName" placeholder="搜索客户名称" clearable style="width: 200px;"
+            @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item label="客户电话">
+          <el-input v-model="queryParams.customerPhone" placeholder="搜索客户电话" clearable style="width: 200px;"
+            @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item label="公司名称">
+          <el-input v-model="queryParams.companyName" placeholder="搜索公司名称" clearable style="width: 200px;"
+            @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item label="意向项目">
+          <el-cascader v-model="queryParams.projectId" :options="projectOptions" placeholder="请选择意向项目" clearable
+            style="width: 200px;" :props="{ expandTrigger: 'hover', emitPath: false }"></el-cascader>
+        </el-form-item>
+        <el-form-item label="客户状态" v-if="activeTab !== 'public'">
+          <el-select v-model="queryParams.statusId" placeholder="请选择客户状态" clearable style="width: 200px;">
+            <el-option v-for="item in statusOptions" :key="item.id" :label="item.statusName" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="标签">
+          <el-select v-model="queryParams.tagIds" multiple placeholder="请选择标签" clearable style="width: 240px;"
+            collapse-tags>
+            <el-option-group v-for="group in tagGroups" :key="group.id" :label="group.groupName">
+              <el-option v-for="tag in group.tags" :key="tag.id" :label="tag.tagName" :value="tag.id" />
+            </el-option-group>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="更新日期">
+          <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
+            end-placeholder="结束日期" value-format="yyyy-MM-dd" style="width: 240px;"></el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <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-form>
+      <div class="action-buttons">
+        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增意向客户</el-button>
+      </div>
+    </div>
+
+    <!-- 客户状态管理页面 -->
+    <div v-if="activeTab === 'status'" class="status-management">
+      <div class="status-header">
+        <div class="title">客户状态列表</div>
+      </div>
+      <el-table :data="statusList" border style="width: 100%">
+        <el-table-column type="index" label="排序" width="80" align="center"></el-table-column>
+        <el-table-column prop="statusName" label="跟进状态" width="180"></el-table-column>
+        <el-table-column prop="description" label="阶段描述"></el-table-column>
+        <el-table-column prop="isInitial" label="初始状态" width="100">
+          <template slot-scope="scope">
+            <el-tag :type="scope.row.isInitial ? 'success' : 'info'">
+              {{ scope.row.isInitial ? '是' : '否' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="isFinal" label="结束状态" width="100">
+          <template slot-scope="scope">
+            <el-tag :type="scope.row.isFinal ? 'success' : 'info'">
+              {{ scope.row.isFinal ? '是' : '否' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <!-- 表格展示区域 - 我的客户和全部客户 -->
+    <div v-else-if="activeTab === 'my' || activeTab === 'all'">
+      <el-table v-loading="loading" :data="customerList" border stripe :key="activeTab">
+        <el-table-column prop="customerName" label="客户名称" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="customerPhone" label="客户电话" width="120" />
+        <el-table-column prop="companyName" label="公司" min-width="150" show-overflow-tooltip />
+        <el-table-column prop="successRate" label="成交率" width="80">
+          <template slot-scope="scope">
+            <span>{{ scope.row.successRate }}%</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="industry" label="行业" width="100" />
+        <el-table-column prop="statusName" label="客户状态" width="100">
+          <template slot-scope="scope">
+            <el-tag :type="getStatusType(scope.row.statusId)">
+              {{ scope.row.statusName }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="customerType" label="客户类型" width="100" />
+        <el-table-column prop="lastUpdateTime" label="更新时间" width="160" />
+        <el-table-column prop="budget" label="客户预算" width="100">
+          <template slot-scope="scope">
+            <span>{{ scope.row.budget ? `${scope.row.budget}元` : '--' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="意向项目" min-width="150" show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{ getProjectNameById(scope.row.projectId) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="需求面积" width="120">
+          <template slot-scope="scope">
+            {{ formatAreaRange(scope.row) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="expectSignDate" label="预计签约时间" width="110" />
+        <el-table-column label="标签" min-width="150">
+          <template slot-scope="scope">
+            <el-tag v-for="tag in scope.row.tags" :key="tag.id" size="mini"
+              style="margin-right: 5px; margin-bottom: 5px;">
+              {{ tag.tagName }}
+            </el-tag>
+            <span v-if="!scope.row.tags || scope.row.tags.length === 0">--</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="150" align="center" fixed="right">
+          <template slot-scope="scope">
+            <el-button  v-if="activeTab === 'my'" type="text" size="small" @click="handleFollow(scope.row)">跟进</el-button>
+            <el-button type="text" size="small" @click="handleViewDetail(scope.row)">详情</el-button>
+            <el-button v-if="activeTab === 'my'" type="text" size="small" class="delete-btn"
+              @click="returnToPublic(scope.row)">退回公海</el-button>
+            <el-button v-if="activeTab === 'my'" type="text" size="small" @click="handleTag(scope.row)">打标签</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <!-- 表格展示区域 - 客户公海 -->
+    <div v-else-if="activeTab === 'public'">
+      <el-table v-loading="loading" :data="customerList" border stripe>
+        <el-table-column prop="customerName" label="客户名称" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="customerPhone" label="客户电话" width="120" />
+        <el-table-column prop="companyName" label="公司" min-width="150" show-overflow-tooltip />
+        <el-table-column prop="successRate" label="成交率" width="80">
+          <template slot-scope="scope">
+            <span>{{ scope.row.successRate }}%</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="industry" label="行业" width="100" />
+        <el-table-column prop="customerType" label="客户类型" width="100" />
+        <el-table-column prop="lastUpdateTime" label="更新时间" width="160" />
+        <el-table-column prop="budget" label="客户预算" width="100">
+          <template slot-scope="scope">
+            <span>{{ scope.row.budget ? `${scope.row.budget}元` : '--' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="意向项目" min-width="150" show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{ getProjectNameById(scope.row.projectId) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="需求面积" width="120">
+          <template slot-scope="scope">
+            {{ formatAreaRange(scope.row) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="expectSignDate" label="预计签约时间" width="110" />
+        <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip />
+        <el-table-column label="操作" width="150" align="center" fixed="right">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="handleAssign(scope.row)">指定分配</el-button>
+            <el-button type="text" size="small" @click="handleViewDetail(scope.row)">详情</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <!-- 分页区域 -->
+    <div class="pagination-container" v-if="activeTab !== 'status'">
+      <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="addDialogVisible" width="700px" append-to-body
+      @close="$refs.addForm && $refs.addForm.resetFields()">
+      <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="100px">
+        <el-divider content-position="left">基础信息</el-divider>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="客户类型" prop="customerType">
+              <el-select v-model="addForm.customerType" placeholder="请选择客户类型" style="width: 100%;">
+                <el-option label="办公" value="办公"></el-option>
+                <el-option label="商业" value="商业"></el-option>
+                <el-option label="公寓" value="公寓"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="意向项目" prop="projectId">
+              <el-cascader v-model="addForm.projectId" :options="projectOptions" @change="getTeamOptions"
+                placeholder="请选择意向项目" clearable style="width: 100%;"
+                :props="{ expandTrigger: 'hover', emitPath: false }"></el-cascader>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="客户名称" prop="customerName">
+              <el-input v-model="addForm.customerName" placeholder="请输入客户名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="客户手机号" prop="customerPhone">
+              <el-input v-model="addForm.customerPhone" placeholder="请输入客户手机号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="公司" prop="companyName">
+              <el-input v-model="addForm.companyName" placeholder="请输入公司" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="行业" prop="industry">
+              <el-select v-model="addForm.industry" placeholder="请选择行业" clearable style="width: 100%;">
+                <el-option v-for="item in industryOptions" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model="addForm.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-divider content-position="left">需求信息</el-divider>
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="需求面积">
+              <div class="area-range">
+                <el-input-number v-model="addForm.areaMin" :min="0" placeholder="最小值" style="width: 110px;"
+                  controls-position="right" />
+                <span class="area-unit">m²</span>
+                <span style="margin: 0 10px;" class="area-separator">-</span>
+                <el-input-number v-model="addForm.areaMax" :min="0" placeholder="最大值" style="width: 110px;"
+                  controls-position="right" />
+                <span class="area-unit">m²</span>
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="客户预算" prop="budget">
+              <el-input-number v-model="addForm.budget" :min="0" :step="1000" style="width: 100%;" :controls="false">
+                <template slot="append">元</template>
+              </el-input-number>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="预计签约时间" prop="expectSignDate">
+              <el-date-picker v-model="addForm.expectSignDate" type="date" placeholder="选择日期" style="width: 100%;"
+                value-format="yyyy-MM-dd"></el-date-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-divider content-position="left">跟进人员</el-divider>
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="跟进方式" prop="followType">
+              <el-radio-group v-model="addForm.followType" @change="handleFollowTypeChange">
+                <el-radio label="1">指定人员</el-radio>
+                <el-radio label="2">加入公海</el-radio>
+                <el-radio label="3">分配给创建人</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20" v-if="addForm.followType === '1'">
+          <el-col :span="24">
+            <el-form-item label="跟进人员" prop="followPersonnel">
+              <el-cascader v-model="addForm.followPersonnel" :options="cascaderTeamOptions" placeholder="请选择跟进人员"
+                style="width: 100%;" :props="{
+                  expandTrigger: 'hover',
+                  lazy: true,
+                  lazyLoad: lazyLoadTeamPersonnel,
+                  value: 'value',
+                  label: 'label',
+                  emitPath: false
+                }"></el-cascader>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="addDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitAddForm">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 客户跟进对话框 -->
+    <el-dialog title="客户跟进" :visible.sync="followDialogVisible" width="800px" append-to-body>
+      <el-tabs v-model="followActiveTab">
+        <el-tab-pane label="跟进客户" name="follow">
+          <el-form ref="followForm" :model="followForm" :rules="followRules" label-width="120px">
+            <el-form-item label="变更客户状态" prop="statusId">
+              <el-select v-model="followForm.statusId" placeholder="请选择客户状态" style="width: 100%;"
+                @change="handleStatusChange">
+                <el-option v-for="item in statusOptions" :key="item.id" :label="item.statusName" :value="item.id" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="跟进内容" prop="followContent" v-if="followForm.statusId !== '4'">
+              <el-input v-model="followForm.followContent" type="textarea" :rows="3" placeholder="请输入跟进内容" />
+            </el-form-item>
+            <el-form-item label="下次跟进时间" prop="nextFollowTime" v-if="followForm.statusId !== '4'">
+              <el-date-picker v-model="followForm.nextFollowTime" type="datetime" placeholder="选择日期时间"
+                style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss"
+                :picker-options="{ start: '08:00', step: '00:15', end: '18:00' }"></el-date-picker>
+            </el-form-item>
+            <el-form-item label="跟进图片" prop="followImage">
+              <el-upload action="#" list-type="picture-card" :limit="1" :file-list="followForm.imageList"
+                :http-request="uploadImage" :before-upload="beforeImageUpload">
+                <i class="el-icon-plus"></i>
+              </el-upload>
+            </el-form-item>
+            <!-- 成交时绑定合同 -->
+            <el-form-item label="绑定合同" prop="contractIds" v-if="followForm.statusId === '4'">
+              <el-select v-model="followForm.contractIds" multiple placeholder="请选择合同" style="width: 100%;" filterable
+                remote :remote-method="searchContracts" :loading="contractLoading">
+                <el-option v-for="item in contractOptions" :key="item.id"
+                  :label="`${item.contractNo} - ${item.customerName}`" :value="item.id">
+                  <span style="float: left">{{ item.contractNo }}</span>
+                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.customerName }}</span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+
+        <el-tab-pane label="客户信息" name="info">
+          <el-form ref="customerInfoForm" :model="customerInfo" label-width="120px">
+            <el-form-item label="意向项目" prop="projectId">
+              <el-cascader v-model="customerInfo.projectId" :options="projectOptions" placeholder="请选择意向项目" clearable
+                style="width: 100%;" :props="{ expandTrigger: 'hover', emitPath: false }"></el-cascader>
+            </el-form-item>
+            <el-form-item label="客户名称" prop="customerName">
+              <el-input v-model="customerInfo.customerName" placeholder="请输入客户名称" />
+            </el-form-item>
+            <el-form-item label="客户手机号" prop="customerPhone">
+              <el-input v-model="customerInfo.customerPhone" placeholder="请输入客户手机号" />
+            </el-form-item>
+            <el-form-item label="公司" prop="companyName">
+              <el-input v-model="customerInfo.companyName" placeholder="请输入公司" />
+            </el-form-item>
+            <el-form-item label="预计签约时间" prop="expectSignDate">
+              <el-date-picker v-model="customerInfo.expectSignDate" type="date" placeholder="选择日期"
+                style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
+            </el-form-item>
+            <el-form-item label="需求面积">
+              <div class="area-range">
+                <el-input-number v-model="customerInfo.areaMin" :min="0" placeholder="最小值" style="width: 100px;"
+                  controls-position="right" />
+                <span class="area-unit">m²</span>
+                <span style="margin: 0 10px;" class="area-separator">-</span>
+                <el-input-number v-model="customerInfo.areaMax" :min="0" placeholder="最大值" style="width: 100px;"
+                  controls-position="right" />
+                <span class="area-unit">m²</span>
+              </div>
+            </el-form-item>
+            <el-form-item label="客户预算" prop="budget">
+              <el-input-number v-model="customerInfo.budget" :min="0" :step="1000" style="width: 100%;"
+                :controls="false">
+                <template slot="append">元</template>
+              </el-input-number>
+            </el-form-item>
+            <el-form-item label="成交率" prop="successRate">
+              <el-slider v-model="customerInfo.successRate" :min="1" :max="100"
+                :format-tooltip="formatDealRate"></el-slider>
+            </el-form-item>
+            <el-form-item label="标签" prop="tagIds">
+              <el-select v-model="customerInfo.tagIds" multiple placeholder="请选择标签" clearable style="width: 100%;"
+                collapse-tags>
+                <el-option-group v-for="group in tagGroups" :key="group.id" :label="group.groupName">
+                  <el-option v-for="tag in group.tags" :key="tag.id" :label="tag.tagName" :value="tag.id" />
+                </el-option-group>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model="customerInfo.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+
+        <el-tab-pane label="跟进历史" name="history">
+          <el-timeline>
+            <el-timeline-item v-for="(history, index) in followHistoryList" :key="index" :timestamp="history.followTime"
+              :type="getTimelineItemType(history.statusId)">
+              <div class="timeline-content">
+                <div class="status">状态: {{ history.statusName }}</div>
+                <div class="follow-person" v-if="history.personnelName">跟进人: {{ history.personnelName }} ({{
+                  history.personnelPhone }})</div>
+                <div class="content" v-if="history.followContent">内容: {{ history.followContent }}</div>
+                <div class="image" v-if="history.imageUrl">
+                  <el-image :src="history.imageUrl" style="width: 80px; height: 80px"
+                    :preview-src-list="[history.imageUrl]"></el-image>
+                </div>
+                <div class="contract" v-if="history.contractNo">合同编号: {{ history.contractNo }}</div>
+              </div>
+            </el-timeline-item>
+          </el-timeline>
+          <div v-if="!followHistoryList || followHistoryList.length === 0" class="no-data">暂无跟进历史</div>
+        </el-tab-pane>
+      </el-tabs>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="followDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitFollowForm">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 指定分配对话框 -->
+    <el-dialog title="指定分配" :visible.sync="assignDialogVisible" width="500px" append-to-body>
+      <el-form ref="assignForm" :model="assignForm" :rules="assignRules" label-width="100px">
+        <el-form-item label="客户名称">
+          <span>{{ currentCustomer.customerName }}</span>
+        </el-form-item>
+        <el-form-item label="分配成员" prop="assignTo">
+          <el-cascader v-model="assignForm.assignTo" :options="cascaderTeamOptions" placeholder="请选择分配成员" style="width: 100%;"
+            :props="{ 
+              expandTrigger: 'hover', 
+              lazy: true, 
+              lazyLoad: lazyLoadTeamPersonnel,
+              value: 'value',
+              label: 'label',
+              emitPath: false
+            }"></el-cascader>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="assignDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitAssignForm">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 客户详情对话框 -->
+    <el-dialog title="客户详情" :visible.sync="detailDialogVisible" width="800px" append-to-body>
+      <el-tabs v-model="detailActiveTab">
+        <el-tab-pane label="基本信息" name="basic">
+          <el-descriptions :column="2" border>
+            <el-descriptions-item label="线索创建时间">{{ customerDetail.createTime || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="转意向客户时间">{{ customerDetail.convertTime || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="意向项目">{{ getProjectNameById(customerDetail.projectId) }}</el-descriptions-item>
+            <el-descriptions-item label="楼宇名称">{{ customerDetail.buildingName || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="客户名称">{{ customerDetail.customerName || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="客户手机号">{{ customerDetail.customerPhone || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="客户所属公司">{{ customerDetail.companyName || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="行业">{{ customerDetail.industry || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="预计签约时间">{{ customerDetail.expectSignDate || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="需求面积段">{{ formatAreaRange(customerDetail) || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="客户预算">{{ customerDetail.budget ? `${customerDetail.budget}元` : '--'
+            }}</el-descriptions-item>
+            <el-descriptions-item label="成交率">{{ customerDetail.successRate ? `${customerDetail.successRate}%` : '--'
+            }}</el-descriptions-item>
+            <el-descriptions-item label="标签" :span="2">
+              <el-tag v-for="tag in customerDetail.tags" :key="tag.id" size="mini"
+                style="margin-right: 5px; margin-bottom: 5px;">
+                {{ tag.tagName }}
+              </el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="备注" :span="2">{{ customerDetail.remark || '--' }}</el-descriptions-item>
+          </el-descriptions>
+        </el-tab-pane>
+        <el-tab-pane label="跟进信息" name="follow">
+          <el-descriptions :column="2" border>
+            <el-descriptions-item label="招商专员">{{ customerDetail.personnelName || '--' }}</el-descriptions-item>
+            <el-descriptions-item label="招商经理">{{ customerDetail.managerName || '--' }}</el-descriptions-item>
+          </el-descriptions>
+        </el-tab-pane>
+        <el-tab-pane label="合同信息" name="contract">
+          <div v-if="customerDetail.contracts && customerDetail.contracts.length > 0">
+            <el-table :data="customerDetail.contracts" border>
+              <el-table-column prop="contractNo" label="合同编号" />
+              <el-table-column prop="customerName" label="客户名称" />
+              <el-table-column prop="signDate" label="签约日期" />
+            </el-table>
+          </div>
+          <div v-else class="no-data">暂无合同信息</div>
+        </el-tab-pane>
+        <el-tab-pane label="跟进历史" name="history">
+          <el-timeline>
+            <el-timeline-item v-for="(history, index) in customerDetail.followHistory" :key="index"
+              :timestamp="history.followTime" :type="getTimelineItemType(history.statusId)">
+              <div class="timeline-content">
+                <div class="status">状态: {{ history.statusName }}</div>
+                <div class="follow-person" v-if="history.personnelName">跟进人: {{ history.personnelName }} ({{
+                  history.personnelPhone }})</div>
+                <div class="content" v-if="history.followContent">内容: {{ history.followContent }}</div>
+                <div class="image" v-if="history.imageUrl">
+                  <el-image :src="history.imageUrl" style="width: 80px; height: 80px"
+                    :preview-src-list="[history.imageUrl]"></el-image>
+                </div>
+                <div class="contract" v-if="history.contractNo">合同编号: {{ history.contractNo }}</div>
+              </div>
+            </el-timeline-item>
+          </el-timeline>
+          <div v-if="!customerDetail.followHistory || customerDetail.followHistory.length === 0" class="no-data">暂无跟进历史
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="线索跟进历史" name="clueHistory">
+          <el-timeline>
+            <el-timeline-item v-for="(history, index) in customerDetail.clueFollowHistory" :key="index"
+              :timestamp="history.followTime" :type="getTimelineItemType(history.statusId)">
+              <div class="timeline-content">
+                <div class="status">状态: {{ history.statusName }}</div>
+                <div class="follow-person" v-if="history.personnelName">跟进人: {{ history.personnelName }} ({{
+                  history.personnelPhone }})</div>
+                <div class="content" v-if="history.followContent">内容: {{ history.followContent }}</div>
+                <div class="image" v-if="history.imageUrl">
+                  <el-image :src="history.imageUrl" style="width: 80px; height: 80px"
+                    :preview-src-list="[history.imageUrl]"></el-image>
+                </div>
+              </div>
+            </el-timeline-item>
+          </el-timeline>
+          <div v-if="!customerDetail.clueFollowHistory || customerDetail.clueFollowHistory.length === 0"
+            class="no-data">
+            暂无线索跟进历史</div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-dialog>
+
+    <!-- 打标签对话框 -->
+    <el-dialog title="打标签" :visible.sync="tagDialogVisible" width="500px" append-to-body>
+      <el-form ref="tagForm" :model="tagForm" label-width="80px">
+        <el-form-item label="客户名称">
+          <span>{{ currentCustomer.customerName }}</span>
+        </el-form-item>
+        <el-form-item label="标签" prop="tagIds">
+          <el-select v-model="tagForm.tagIds" multiple placeholder="请选择标签" clearable style="width: 100%;" collapse-tags>
+            <el-option-group v-for="group in tagGroups" :key="group.id" :label="group.groupName">
+              <el-option v-for="tag in group.tags" :key="tag.id" :label="tag.tagName" :value="tag.id" />
+            </el-option-group>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="tagDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitTagForm">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getIntentCustomerCount, getAllTagGroups, getTagListByGroupId } from '@/api/merchant'
+import { getProjectsList } from '@/api/merchant'
+import { getMerchantTeamByProjectId, getMerchantPersonnelList } from '@/api/merchant'
+import {
+  getMyCustomerList,
+  getAllCustomerList,
+  getPublicCustomerList,
+  getCustomerDetail,
+  createCustomer,
+  updateCustomer,
+  followCustomer,
+  getCustomerFollowHistory,
+  assignCustomer,
+  returnCustomerToPublic,
+  getCustomerTagGroups,
+  saveCustomerTags,
+  checkCustomerPhone,
+  getCustomerStatusList
+} from '@/api/merchant'
+import { getUserId } from '@/utils/auth'
+import { API_SUCCESS_CODE } from '@/utils/constants'
+
+export default {
+  name: 'IntentCustomer',
+  data() {
+    const validatePhone = (rule, value, callback) => {
+      if (value && !/^1[3-9]\d{9}$/.test(value)) {
+        callback(new Error('请输入正确的手机号码'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      // 遮罩层
+      loading: false,
+      contractLoading: false,
+      // 激活的标签页
+      activeTab: 'my',
+      // 客户列表
+      customerList: [],
+      // 标签分组数据
+      tagGroups: [],
+      // 总条数
+      total: 0,
+      // 日期范围
+      dateRange: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        customerName: undefined,
+        customerPhone: undefined,
+        companyName: undefined,
+        projectId: undefined,
+        statusId: undefined,
+        tagIds: [],
+        startDate: undefined,
+        endDate: undefined
+      },
+      // 客户状态选项
+      statusOptions: [],
+      // 项目选项
+      projectOptions: [],
+      // 团队选项
+      teamOptions: [],
+      // 级联选择器团队选项
+      cascaderTeamOptions: [],
+      // 行业选项
+      industryOptions: [
+        { value: '互联网', label: '互联网' },
+        { value: '金融', label: '金融' },
+        { value: '教育', label: '教育' },
+        { value: '医疗', label: '医疗' },
+        { value: '制造业', label: '制造业' },
+        { value: '贸易', label: '贸易' },
+        { value: '服务业', label: '服务业' },
+        { value: '其他', label: '其他' }
+      ],
+      // 客户状态列表
+      statusList: [],
+      // 当前选中的客户
+      currentCustomer: {},
+      // 新增对话框可见性
+      addDialogVisible: false,
+      // 跟进对话框可见性
+      followDialogVisible: false,
+      // 指定分配对话框可见性
+      assignDialogVisible: false,
+      // 详情对话框可见性
+      detailDialogVisible: false,
+      // 打标签对话框可见性
+      tagDialogVisible: false,
+      // 详情对话框激活标签
+      detailActiveTab: 'basic',
+      // 跟进历史列表
+      followHistoryList: [],
+      // 合同选项
+      contractOptions: [],
+      // 新增表单
+      addForm: {
+        customerType: undefined,
+        projectId: undefined,
+        customerName: undefined,
+        customerPhone: undefined,
+        companyName: undefined,
+        industry: undefined,
+        remark: undefined,
+        areaMin: undefined,
+        areaMax: undefined,
+        budget: undefined,
+        expectSignDate: undefined,
+        followType: '2', // 默认加入公海
+        followPersonnel: undefined
+      },
+      // 跟进表单
+      followForm: {
+        id: undefined,
+        statusId: undefined,
+        content: undefined,
+        nextFollowTime: undefined,
+        imageList: [],
+        imageUrl: undefined,
+        contractIds: []
+      },
+      // 客户信息表单
+      customerInfo: {
+        id: undefined,
+        projectId: undefined,
+        customerName: undefined,
+        customerPhone: undefined,
+        companyName: undefined,
+        expectSignDate: undefined,
+        areaMin: undefined,
+        areaMax: undefined,
+        budget: undefined,
+        successRate: 50,
+        tagIds: [],
+        remark: undefined
+      },
+      // 指定分配表单
+      assignForm: {
+        id: undefined,
+        assignTo: undefined
+      },
+      // 打标签表单
+      tagForm: {
+        id: undefined,
+        tagIds: []
+      },
+      // 客户详情数据
+      customerDetail: {},
+      // 新增表单校验规则
+      addRules: {
+        customerType: [{ required: true, message: '请选择客户类型', trigger: 'change' }],
+        projectId: [{ required: true, message: '请选择意向项目', trigger: 'change' }],
+        customerName: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
+        customerPhone: [
+          { required: true, message: '请输入客户手机号', trigger: 'blur' },
+          { validator: validatePhone, trigger: 'blur' }
+        ],
+        followPersonnel: [
+          {
+            required: true, message: '请选择跟进人员', trigger: 'change',
+            validator: (rule, value, callback) => {
+              if (this.addForm.followType === '1' && !value) {
+                callback(new Error('请选择跟进人员'))
+              } else {
+                callback()
+              }
+            }
+          }
+        ]
+      },
+      // 跟进表单校验规则
+      followRules: {
+        statusId: [{ required: true, message: '请选择客户状态', trigger: 'change' }],
+        contractIds: [
+          {
+            required: true, message: '请选择合同', trigger: 'change',
+            validator: (rule, value, callback) => {
+              if (this.followForm.statusId === '4' && (!value || value.length === 0)) {
+                callback(new Error('请选择合同'))
+              } else {
+                callback()
+              }
+            }
+          }
+        ]
+      },
+      // 指定分配表单校验规则
+      assignRules: {
+        assignTo: [{ required: true, message: '请选择分配成员', trigger: 'change' }]
+      },
+      // 跟进对话框激活标签
+      followActiveTab: 'follow'
+    }
+  },
+  created() {
+    this.getCustomerList()
+    this.getProjectOptions()
+    this.getStatusOptions()
+    this.getTagGroups()
+  },
+  methods: {
+    // 获取意向客户列表
+    getCustomerList() {
+      this.loading = true
+
+      // 准备查询参数
+      const params = {
+        pageNum: this.queryParams.pageNum,
+        pageSize: this.queryParams.pageSize,
+        customerName: this.queryParams.customerName,
+        customerPhone: this.queryParams.customerPhone,
+        companyName: this.queryParams.companyName,
+        projectId: this.queryParams.projectId,
+        statusId: this.queryParams.statusId,
+        tagIds: this.queryParams.tagIds,
+        beginTime: this.queryParams.startDate,
+        endTime: this.queryParams.endDate
+      }
+
+      // 根据标签页选择对应的API
+      let apiMethod;
+      if (this.activeTab === 'my') {
+        apiMethod = getMyCustomerList
+        params.followUserId = 201
+      } else if (this.activeTab === 'all') {
+        apiMethod = getAllCustomerList
+      } else if (this.activeTab === 'public') {
+        apiMethod = getPublicCustomerList
+      }
+
+      // 调用API
+      apiMethod(params)
+        .then(response => {
+          if (response.code === API_SUCCESS_CODE) {
+            this.customerList = response.data.list || []
+            
+            // 处理标签数据，确保标签字段是数组并包含标签对象
+            this.customerList.forEach(customer => {
+              // 如果标签数据是id数组，转换为对象数组
+              if (Array.isArray(customer.tagIds) && customer.tagIds.length > 0) {
+                customer.tags = this.convertTagIdsToTags(customer.tagIds)
+              }
+              
+              // 如果没有标签数据，初始化为空数组
+              if (!customer.tags) {
+                customer.tags = []
+              }
+            })
+            
+            this.total = response.data.total || 0
+          } else {
+            this.$message.error(response.msg || '获取意向客户列表失败')
+          }
+          this.loading = false
+        })
+        .catch(error => {
+          console.error('获取意向客户列表失败', error)
+          this.$message.error('系统错误，获取意向客户列表失败')
+          this.loading = false
+        })
+    },
+    
+    // 将标签ID数组转换为标签对象数组
+    convertTagIdsToTags(tagIds) {
+      const result = []
+      if (!tagIds || !Array.isArray(tagIds)) return result
+      
+      // 遍历所有标签分组
+      if (this.tagGroups && this.tagGroups.length > 0) {
+        tagIds.forEach(tagId => {
+          // 在所有标签分组中查找匹配的标签
+          for (const group of this.tagGroups) {
+            if (group.tags && Array.isArray(group.tags)) {
+              const foundTag = group.tags.find(tag => tag.id === tagId)
+              if (foundTag) {
+                result.push({
+                  id: foundTag.id,
+                  tagName: foundTag.tagName
+                })
+                break
+              }
+            }
+          }
+        })
+      }
+      
+      return result
+    },
+
+    // 获取客户状态选项
+    getStatusOptions() {
+      // 使用API获取状态列表
+      getCustomerStatusList().then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          this.statusOptions = response.data || []
+          this.statusList = this.statusOptions
+        } else {
+          this.$message.error(response.msg || '获取客户状态列表失败')
+          this.statusOptions = []
+          this.statusList = []
+        }
+      }).catch(error => {
+        console.error('获取客户状态列表失败', error)
+        this.$message.error('系统错误，获取客户状态列表失败')
+        // 使用模拟数据作为备选
+        this.statusOptions = [
+          { id: '1', statusName: '接触', description: '初次接触阶段', isInitial: true, isFinal: false },
+          { id: '2', statusName: '带看', description: '带客户看房阶段', isInitial: false, isFinal: false },
+          { id: '3', statusName: '沟通', description: '深入沟通阶段', isInitial: false, isFinal: false },
+          { id: '4', statusName: '流失', description: '客户流失阶段', isInitial: false, isFinal: true },
+          { id: '5', statusName: '成交', description: '客户成交阶段', isInitial: false, isFinal: true },
+        ]
+        this.statusList = this.statusOptions
+      })
+    },
+
+    // 获取标签分组和标签
+    getTagGroups() {
+      getCustomerTagGroups().then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          this.tagGroups = response.data || []
+        } else {
+          this.$message.error(response.msg || '获取标签分组失败')
+          this.tagGroups = []
+        }
+      }).catch(error => {
+        console.error('获取标签分组失败', error)
+        this.$message.error('系统错误，获取标签分组失败')
+        // 使用模拟数据
+        this.tagGroups = [
+          {
+            id: 1,
+            groupName: '客户价值',
+            tags: [
+              { id: 1, tagName: '高价值' },
+              { id: 2, tagName: '中价值' },
+              { id: 3, tagName: '低价值' }
+            ]
+          },
+          {
+            id: 2,
+            groupName: '客户需求',
+            tags: [
+              { id: 4, tagName: '急需' },
+              { id: 5, tagName: '稳定客户' },
+              { id: 6, tagName: '潜在客户' }
+            ]
+          }
+        ]
+      })
+    },
+
+    // 提交新增表单
+    submitAddForm() {
+      this.$refs.addForm.validate(valid => {
+        if (valid) {
+          // 检查手机号是否已存在
+          checkCustomerPhone({ phone: this.addForm.customerPhone }).then(phoneRes => {
+            if (phoneRes.code === API_SUCCESS_CODE && phoneRes.data) {
+              this.$confirm('该手机号已存在，是否继续创建?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+              }).then(() => {
+                this.createNewCustomer()
+              }).catch(() => {
+                // 用户取消操作
+              })
+            } else {
+              // 手机号不存在，直接创建
+              this.createNewCustomer()
+            }
+          }).catch(error => {
+            console.error('检查手机号失败', error)
+            // 出错时也允许继续创建
+            this.createNewCustomer()
+          })
+        } else {
+          this.$message.error('表单校验失败，请检查填写的信息')
+          return false
+        }
+      })
+    },
+
+    // 创建新客户
+    createNewCustomer() {
+      const userId = getUserId() || '110'
+      // 准备提交的数据
+      const formData = {
+        customerType: this.addForm.customerType,
+        projectId: this.addForm.projectId,
+        customerName: this.addForm.customerName,
+        customerPhone: this.addForm.customerPhone,
+        companyName: this.addForm.companyName,
+        industry: this.addForm.industry,
+        remark: this.addForm.remark,
+        areaMin: this.addForm.areaMin,
+        areaMax: this.addForm.areaMax,
+        budget: this.addForm.budget,
+        expectSignDate: this.addForm.expectSignDate,
+        assignmentType: this.addForm.followType == 1 ? '指定人员' : this.addForm.followType == 2 ? '加入公海' : '分配给创建人',
+      }
+      if (this.addForm.followType === '3') {
+        formData.createUserId = userId
+      }
+
+      // 如果是指定人员跟进，添加相关字段
+      if (this.addForm.followType === '1' && this.addForm.followPersonnel) {
+        formData.personnelId = this.addForm.followPersonnel
+      }
+
+      // 调用创建API
+      createCustomer(formData).then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          this.$message.success('新增意向客户成功')
+          this.addDialogVisible = false
+          this.getCustomerList()
+        } else {
+          this.$message.error(response.msg || '新增意向客户失败')
+        }
+      }).catch(error => {
+        console.error('新增意向客户失败', error)
+        this.$message.error('系统错误，新增意向客户失败')
+      })
+    },
+
+    // 获取跟进历史
+    getFollowHistory(id) {
+      getCustomerFollowHistory(id).then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          this.followHistoryList = response.data || []
+        } else {
+          this.$message.error(response.msg || '获取跟进历史失败')
+          this.followHistoryList = []
+        }
+      }).catch(error => {
+        console.error('获取跟进历史失败', error)
+        this.$message.error('系统错误，获取跟进历史失败')
+        this.followHistoryList = []
+      })
+    },
+
+    // 跟进按钮
+    handleFollow(row) {
+      this.currentCustomer = row
+      this.followForm = {
+        id: row.id,
+        statusId: row.statusId,
+        followContent: row.content,
+        nextFollowTime: row.nextFollowTime,
+        imageList: [],
+        imageUrl: undefined,
+        contractIds: []
+      }
+
+      // 获取客户详情，包含跟进历史
+      getCustomerDetail(row.id).then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          const detail = response.data
+          this.followForm.followContent = detail.followHistory[0].followContent
+          this.customerInfo = {
+            id: detail.id,
+            projectId: detail.projectId,
+            customerName: detail.customerName,
+            customerPhone: detail.customerPhone,
+            companyName: detail.companyName,
+            expectSignDate: detail.expectSignDate,
+            areaMin: detail.areaMin,
+            areaMax: detail.areaMax,
+            budget: detail.budget,
+            successRate: detail.successRate || 50,
+            tagIds: detail.tags ? detail.tags.map(tag => tag.id) : [],
+            remark: detail.remark
+          }
+          this.followHistoryList = detail.followHistory || []
+          this.followDialogVisible = true
+        } else {
+          this.$message.error(response.msg || '获取客户详情失败')
+        }
+      }).catch(error => {
+        console.error('获取客户详情失败', error)
+        this.$message.error('系统错误，获取客户详情失败')
+      })
+    },
+
+    // 提交跟进表单
+    submitFollowForm() {
+      // 优先校验跟进表单
+      this.$refs.followForm.validate(valid => {
+        if (valid) {
+          // 如果跟进表单验证通过，再校验客户信息表单
+          this.$refs.customerInfoForm.validate(infoValid => {
+            if (infoValid) {
+              // 获取当前登录用户信息
+              const userId = getUserId() || '201'
+              
+              // 组装所有数据
+              const submitData = {
+                // 跟进信息
+                customerId: this.customerInfo.id,
+                statusId: this.followForm.statusId,
+                content: this.followForm.followContent,
+                nextFollowTime: this.followForm.nextFollowTime,
+                followImage: this.followForm.imageUrl,
+                contractNos: this.followForm.contractIds || [],
+                followUserId: parseInt(userId),
+                followUserName: "张三", // 这里可以替换为实际的当前用户名
+                followUserPhone: "13800138001", // 这里可以替换为实际的当前用户电话
+                // 客户信息作为单独对象，包含完整字段
+                customerInfo: {
+                  // 基本信息
+                  id: this.customerInfo.id,
+                  customerType: this.currentCustomer.customerType || "",
+                  projectId: this.customerInfo.projectId || "",
+                  buildingId: this.currentCustomer.buildingId || 0,
+                  customerName: this.customerInfo.customerName || "",
+                  customerPhone: this.customerInfo.customerPhone || "",
+                  companyName: this.customerInfo.companyName || "",
+                  industry: this.currentCustomer.industry || "",
+                  areaMin: this.customerInfo.areaMin || 0,
+                  areaMax: this.customerInfo.areaMax || 0,
+                  budget: this.customerInfo.budget || 0,
+                  expectSignDate: this.customerInfo.expectSignDate || "",
+                  successRate: this.customerInfo.successRate || 0,
+                  remark: this.customerInfo.remark || "",
+                  tagIds: this.customerInfo.tagIds,
+                  
+                  // 分配信息
+                  teamId: this.currentCustomer.teamId || 0,
+                  personnelId: this.currentCustomer.personnelId || 0,
+                  assignmentType: this.currentCustomer.assignmentType || "",
+                  statusId: this.followForm.statusId || 0,
+                  
+                  // 线索信息
+                  leadId: this.currentCustomer.leadId || 0,
+                  leadConvertTime: this.currentCustomer.leadConvertTime || "",
+                  
+                  // 跟进信息
+                  lastFollowTime: this.currentCustomer.lastFollowTime || "",
+                  nextFollowTime: this.followForm.nextFollowTime || "",
+                  
+                  // 系统信息
+                  createUserId: this.currentCustomer.createUserId || "",
+                  createUserName: this.currentCustomer.createUserName || "",
+                  createUserPhone: this.currentCustomer.createUserPhone || "",
+                  createTime: this.currentCustomer.createTime || "",
+                  delFlag: this.currentCustomer.delFlag || "0",
+                  lastModUserId: userId,
+                  lastModTime: new Date().toISOString().split('.')[0].replace('T', ' '),
+                  tenantId: this.currentCustomer.tenantId || ""
+                }
+              }
+
+              // 调用更新API
+              followCustomer(submitData).then(response => {
+                if (response.code === API_SUCCESS_CODE) {
+                  this.$message.success('客户跟进成功')
+                  this.followDialogVisible = false
+                  this.getCustomerList()
+                } else {
+                  this.$message.error(response.msg || '客户跟进失败')
+                }
+              }).catch(error => {
+                console.error('客户跟进失败', error)
+                this.$message.error('系统错误，客户跟进失败')
+              })
+            } else {
+              // 如果客户信息表单未通过验证，切换到客户信息标签页
+              this.followActiveTab = 'info'
+              this.$message.error('客户信息表单验证失败，请检查输入')
+            }
+          })
+        } else {
+          // 如果跟进表单未通过验证，切换到跟进客户标签页
+          this.followActiveTab = 'follow'
+          this.$message.error('跟进表单验证失败，请检查输入')
+        }
+      })
+    },
+
+    // 提交指定分配表单
+    submitAssignForm() {
+      this.$refs.assignForm.validate(valid => {
+        if (valid) {
+          const userId = getUserId() || '1'
+          const teamId = this.assignForm.assignTo.toString().split(',')[0] // 如果是数组，取第一个作为团队ID
+          const personnelId = this.assignForm.assignTo
+
+          assignCustomer(this.assignForm.id, {
+            teamId: teamId,
+            personnelId: personnelId,
+            userId: userId
+          }).then(response => {
+            if (response.code === API_SUCCESS_CODE) {
+              this.$message.success('指定分配成功')
+              this.assignDialogVisible = false
+              this.getCustomerList()
+            } else {
+              this.$message.error(response.msg || '指定分配失败')
+            }
+          }).catch(error => {
+            console.error('指定分配失败', error)
+            this.$message.error('系统错误，指定分配失败')
+          })
+        }
+      })
+    },
+
+    // 提交打标签表单
+    submitTagForm() {
+      saveCustomerTags({
+        customerId: this.tagForm.id,
+        tagIds: this.tagForm.tagIds
+      }).then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          this.$message.success('标签更新成功')
+          this.tagDialogVisible = false
+          this.getCustomerList()
+        } else {
+          this.$message.error(response.msg || '标签更新失败')
+        }
+      }).catch(error => {
+        console.error('标签更新失败', error)
+        this.$message.error('系统错误，标签更新失败')
+      })
+    },
+
+    // 格式化面积范围
+    formatAreaRange(row) {
+      if (!row) return '--'
+      if (row.areaMin && row.areaMax) {
+        return `${row.areaMin}-${row.areaMax}m²`
+      } else if (row.areaMin) {
+        return `≥${row.areaMin}m²`
+      } else if (row.areaMax) {
+        return `≤${row.areaMax}m²`
+      } else {
+        return '--'
+      }
+    },
+    // 格式化成交率
+    formatDealRate(val) {
+      return val + '%'
+    },
+    // 获取状态类型
+    getStatusType(statusId) {
+      switch (statusId) {
+        case '1': return 'info'
+        case '2': return 'warning'
+        case '3': return 'primary'
+        case '4': return 'success'
+        case '5': return 'danger'
+        default: return 'info'
+      }
+    },
+    // 获取时间线项目类型
+    getTimelineItemType(statusId) {
+      switch (statusId) {
+        case '1': return 'info'
+        case '2': return 'warning'
+        case '3': return 'primary'
+        case '4': return 'success'
+        case '5': return 'danger'
+        default: return ''
+      }
+    },
+    // 打开标签弹窗
+    handleTag(row) {
+      this.currentCustomer = row;
+      this.tagForm = {
+        id: row.id,
+        tagIds: row.tags ? row.tags.map(tag => tag.id) : []
+      };
+      this.tagDialogVisible = true;
+    },
+    // 标签页切换
+    handleTabClick() {
+      this.resetQuery()
+      this.getCustomerList()
+    },
+    // 查询按钮
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      if (this.dateRange && this.dateRange.length === 2) {
+        this.queryParams.startDate = this.dateRange[0]
+        this.queryParams.endDate = this.dateRange[1]
+      } else {
+        this.queryParams.startDate = undefined
+        this.queryParams.endDate = undefined
+      }
+      this.getCustomerList()
+    },
+    // 重置按钮
+    resetQuery() {
+      this.$refs.queryForm.resetFields()
+      this.dateRange = []
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        customerName: undefined,
+        customerPhone: undefined,
+        companyName: undefined,
+        projectId: undefined,
+        statusId: undefined,
+        tagIds: [],
+        startDate: undefined,
+        endDate: undefined
+      }
+      this.handleQuery()
+    },
+    // 分页大小改变
+    handleSizeChange(val) {
+      this.queryParams.pageSize = val
+      this.getCustomerList()
+    },
+    // 分页页码改变
+    handleCurrentChange(val) {
+      this.queryParams.pageNum = val
+      this.getCustomerList()
+    },
+    // 新增按钮
+    handleAdd() {
+      this.addDialogVisible = true
+    },
+    // 跟进类型变更
+    handleFollowTypeChange(value) {
+      if (value !== '1') {
+        this.addForm.followPersonnel = undefined
+      }
+    },
+    // 客户状态变更
+    handleStatusChange(value) {
+      if (value === '4') {
+        // 成交状态，清空不需要的内容
+        this.followForm.followContent = undefined
+        this.followForm.nextFollowTime = undefined
+        // 获取可绑定的合同
+        this.searchContracts('')
+      } else {
+        this.followForm.contractIds = []
+      }
+    },
+    // 搜索合同
+    searchContracts(query) {
+      this.contractLoading = true
+      // 模拟合同搜索
+      setTimeout(() => {
+        this.contractOptions = [
+          {
+            id: 1,
+            contractNo: 'HT2023001',
+            customerName: '张三',
+            signDate: '2023-06-20'
+          },
+          {
+            id: 2,
+            contractNo: 'HT2023002',
+            customerName: '李四',
+            signDate: '2023-07-15'
+          }
+        ]
+        this.contractLoading = false
+      }, 500)
+    },
+    // 图片上传前校验
+    beforeImageUpload(file) {
+      const isImage = file.type.indexOf('image/') === 0
+      const isLt5M = file.size / 1024 / 1024 < 5
+
+      if (!isImage) {
+        this.$message.error('只能上传图片文件!')
+      }
+      if (!isLt5M) {
+        this.$message.error('图片大小不能超过 5MB!')
+      }
+      return isImage && isLt5M
+    },
+    // 自定义图片上传
+    uploadImage(options) {
+      // 模拟上传
+      const file = options.file
+      const reader = new FileReader()
+      reader.readAsDataURL(file)
+      reader.onload = () => {
+        this.followForm.imageUrl = reader.result
+        this.followForm.imageList = [{
+          name: file.name,
+          url: reader.result
+        }]
+        options.onSuccess()
+      }
+    },
+    // 获取团队选项
+    getTeamOptions() {
+      // 使用bizTeam/project/:projectId接口获取团队列表
+      getMerchantTeamByProjectId(this.addForm.projectId).then(res => {
+        if (res.code === API_SUCCESS_CODE) {
+          this.teamOptions = res.data.map(team => ({
+            id: team.id,
+            value: team.id,
+            teamName: team.teamName,
+            label: team.teamName,
+            personnelList: []
+          }))
+
+          // 只构建团队层级，不预加载人员数据
+          this.cascaderTeamOptions = res.data.map(team => ({
+            value: team.id,
+            label: team.teamName,
+            leaf: false,  // 表示有子节点，但需要懒加载
+          }))
+        } else {
+          this.$message.error(res.msg || '获取团队列表失败')
+          this.teamOptions = []
+          this.cascaderTeamOptions = []
+        }
+      }).catch(error => {
+        console.error('获取团队列表失败', error)
+        // 使用模拟数据
+        this.teamOptions = [
+          {
+            value: 1,
+            label: '招商一部',
+            children: [
+              { value: 101, label: '王经理 (13812345678)' },
+              { value: 102, label: '张经理 (13823456789)' }
+            ]
+          },
+          {
+            value: 2,
+            label: '招商二部',
+            children: [
+              { value: 201, label: '赵经理 (13987654321)' },
+              { value: 202, label: '钱经理 (13976543210)' }
+            ]
+          }
+        ]
+
+        this.cascaderTeamOptions = [
+          {
+            value: 1,
+            label: '招商一部',
+            leaf: false
+          },
+          {
+            value: 2,
+            label: '招商二部',
+            leaf: false
+          }
+        ]
+      })
+    },
+    // 获取项目选项
+    getProjectOptions() {
+      // 使用与线索管理相同的接口获取项目列表
+      getProjectsList().then(res => {
+        if (res.code === API_SUCCESS_CODE) {
+          // 转换数据结构为级联选择器格式
+          this.projectOptions = res.data.map(item => ({
+            value: item.projectId || item.id,
+            label: item.projectName || item.name
+          }))
+        } else {
+          this.$message.error(res.msg || '获取项目列表失败')
+          this.projectOptions = []
+        }
+      }).catch(error => {
+        console.error('获取项目列表失败', error)
+        // 如果API调用失败，使用模拟数据
+        this.projectOptions = [
+          {
+            value: 1,
+            label: '某商业广场',
+            children: [
+              { value: 101, label: 'A座' },
+              { value: 102, label: 'B座' }
+            ]
+          },
+          {
+            value: 2,
+            label: '某办公大厦',
+            children: [
+              { value: 201, label: '1号楼' },
+              { value: 202, label: '2号楼' }
+            ]
+          }
+        ]
+      })
+    },
+    // 懒加载招商团队人员
+    lazyLoadTeamPersonnel(node, resolve) {
+      // 根节点时不做操作
+      if (node.level === 0) {
+        return resolve([])
+      }
+
+      // 已经是叶子节点，不需要继续加载
+      if (node.level > 0) {
+        const teamId = node.value
+
+        const params = {
+          pageNum: 1,
+          pageSize: 100,
+          teamId: teamId
+        }
+
+        getMerchantPersonnelList(params).then(res => {
+          if (res.code === API_SUCCESS_CODE) {
+            // 将人员数据转换为叶子节点
+            const personnel = (res.data.data || []).map(item => ({
+              value: item.id,
+              label: `${item.memberName || '未知'} (${item.phone || '无电话'})`,
+              leaf: true  // 标记为叶子节点
+            }))
+
+            resolve(personnel)
+          } else {
+            this.$message.error(res.msg || '获取团队人员失败')
+            resolve([])
+          }
+        }).catch(error => {
+          console.error('获取团队人员失败', error)
+          this.$message.error('系统错误，获取团队人员失败')
+          resolve([])
+        })
+      } else {
+        resolve([])
+      }
+    },
+    // 指定分配按钮
+    handleAssign(row) {
+      this.currentCustomer = row
+      this.assignForm = {
+        id: row.id,
+        assignTo: undefined
+      }
+      this.assignDialogVisible = true
+
+      // 获取团队和人员数据
+      getMerchantTeamByProjectId(row.projectId).then(res => {
+        if (res.code === API_SUCCESS_CODE) {
+          // 只构建团队层级，不预加载人员数据
+          this.cascaderTeamOptions = res.data.map(team => ({
+            value: team.id,
+            label: team.teamName,
+            leaf: false  // 表示有子节点，但需要懒加载
+          }))
+        } else {
+          this.$message.error(res.msg || '获取团队列表失败')
+          this.cascaderTeamOptions = []
+        }
+      }).catch(error => {
+        console.error('获取团队列表失败', error)
+        // 使用模拟数据
+        this.cascaderTeamOptions = [
+          {
+            value: 1,
+            label: '招商一部',
+            leaf: false
+          },
+          {
+            value: 2,
+            label: '招商二部',
+            leaf: false
+          }
+        ]
+      })
+    },
+    // 添加获取项目名称的方法
+    getProjectNameById(projectId) {
+      if (!projectId) return '--'
+
+      // 扁平化处理projectOptions，获取所有项目选项
+      const findProjectName = (options) => {
+        for (const option of options) {
+          if (option.value === projectId) {
+            return option.label
+          }
+          if (option.children && option.children.length > 0) {
+            const name = findProjectName(option.children)
+            if (name) return name
+          }
+        }
+        return null
+      }
+
+      const projectName = findProjectName(this.projectOptions)
+      return projectName || '--'
+    },
+    // 详情按钮
+    handleViewDetail(row) {
+      this.currentCustomer = row
+      getCustomerDetail(row.id).then(response => {
+        if (response.code === API_SUCCESS_CODE) {
+          this.customerDetail = response.data
+          this.detailDialogVisible = true
+        } else {
+          this.$message.error(response.msg || '获取客户详情失败')
+        }
+      }).catch(error => {
+        console.error('获取客户详情失败', error)
+        this.$message.error('系统错误，获取客户详情失败')
+      })
+    },
+    // 退回公海按钮
+    returnToPublic(row) {
+      const userId = this.$store.getters.userId || 201
+
+      this.currentCustomer = row
+
+      this.$confirm(`确认将客户 ${row.customerName} 退回公海吗？`, '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+
+        returnCustomerToPublic(row.id, userId).then(response => {
+          if (response.code === API_SUCCESS_CODE) {
+            this.$message.success('客户退回公海成功')
+            this.getCustomerList()
+          } else {
+            this.$message.error(response.msg || '客户退回公海失败')
+          }
+        }).catch(error => {
+        })
+        console.error('客户退回公海失败', error)
+        this.$message.error('系统错误，客户退回公海失败')
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.intent-customer-container {
+  padding: 20px;
+
+  .filter-container {
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    .search-form {
+      flex: 1;
+    }
+
+    .action-buttons {
+      margin-left: 10px;
+    }
+  }
+
+  .status-management {
+    .status-header {
+      margin-bottom: 15px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .title {
+        font-size: 16px;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .timeline-content {
+    padding: 10px;
+    background-color: #F8F8F8;
+    border-radius: 4px;
+    margin-bottom: 10px;
+
+    .status,
+    .follow-person,
+    .content,
+    .contract {
+      margin-bottom: 5px;
+    }
+
+    .image {
+      margin: 10px 0;
+    }
+  }
+
+  .area-range {
+    display: flex;
+    align-items: center;
+
+    .area-unit {
+      margin-left: 5px;
+    }
+  }
+
+  .no-data {
+    color: #909399;
+    font-size: 14px;
+    text-align: center;
+    padding: 20px 0;
+  }
+
+  .pagination-container {
+    margin-top: 20px;
+    text-align: right;
+  }
+
+  .delete-btn {
+    color: #F56C6C;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pc/src/views/merchant/merchant-personnel/index.vue b/pc/src/views/merchant/merchant-personnel/index.vue
new file mode 100644
index 0000000..0dd6442
--- /dev/null
+++ b/pc/src/views/merchant/merchant-personnel/index.vue
@@ -0,0 +1,1456 @@
+<template>
+  <div class="merchant-personnel-container">
+    <el-tabs v-model="activeTab">
+      <el-tab-pane label="人员管理" name="personnel">
+        <!-- 提示信息 -->
+        <el-alert type="warning" :closable="false" show-icon>
+          <div>1. 招商团队可按照区域或其他方式进行分类，主要用作招商人员分组管理；</div>
+          <div>2. 可以批量添加部门或个人为招商人员；若批量添加部门，则该部门下所有成员都会被设为招商人员；</div>
+          <div>3. 等权限设置好，会自动按照上级管理流程。</div>
+        </el-alert>
+
+        <!-- 查询区域 -->
+        <div class="filter-container">
+          <el-input v-model="queryParams.memberName" placeholder="请输入招商人名称" clearable style="width: 200px;"
+            class="filter-item" />
+          <el-input v-model="queryParams.phone" placeholder="请输入招商人电话" clearable style="width: 200px;"
+            class="filter-item" />
+          <el-select v-model="queryParams.teamId" placeholder="请选择团队" clearable style="width: 200px;"
+            class="filter-item">
+            <el-option v-for="item in teamOptions" :key="item.id" :label="item.teamName" :value="item.id" />
+          </el-select>
+          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
+          <el-button @click="resetQuery">重置</el-button>
+          <el-button type="primary" icon="el-icon-plus" style="float: right;" @click="handleAddPersonnel">新增招商人员</el-button>
+        </div>
+
+        <!-- 列表区域 -->
+        <el-table v-loading="loading" :data="personnelList" row-key="id" border>
+          <el-table-column label="招商人名称">
+            <template slot-scope="scope">
+              {{ scope.row.memberName }}
+              <el-tag v-if="scope.row.managerFlag === '1'" size="mini" type="primary">招商经理</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="phone" label="招商人电话" />
+          <el-table-column prop="teamName" label="所属团队" />
+          <el-table-column prop="clueCount" label="线索数量" align="center" />
+          <el-table-column prop="intentionCustomerCount" label="意向客户数量" align="center" />
+          <el-table-column prop="contractCount" label="合同数量" align="center" />
+          <el-table-column label="操作" align="center" width="150">
+            <template slot-scope="scope">
+              <el-button v-if="scope.row.managerFlag !== '1'" type="text" size="small"
+                @click.stop="handleRemovePersonnel(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" />
+        </div>
+      </el-tab-pane>
+
+      <el-tab-pane label="招商团队" name="team">
+        <!-- 查询区域 -->
+        <div class="filter-container">
+          <el-input v-model="teamQueryParams.teamName" placeholder="请输入团队名称" clearable style="width: 200px;"
+            class="filter-item" />
+          <el-input v-model="teamQueryParams.managerName" placeholder="请输入招商经理" clearable style="width: 200px;"
+            class="filter-item" />
+          <el-select v-model="teamQueryParams.projectId" placeholder="请选择项目" clearable style="width: 200px;"
+            class="filter-item">
+            <el-option 
+              v-for="item in projectOptions" 
+              :key="item.projectId || item.id" 
+              :label="item.projectName || item.name" 
+              :value="item.projectId || item.id" 
+            />
+          </el-select>
+          <el-button type="primary" icon="el-icon-search" @click="handleTeamSearch">搜索</el-button>
+          <el-button @click="resetTeamQuery">重置</el-button>
+          <el-button type="primary" icon="el-icon-plus" style="float: right;" @click="handleAddTeam">新增团队</el-button>
+        </div>
+
+        <!-- 团队列表 -->
+        <el-table v-loading="teamLoading" :data="teamTableList" border>
+          <el-table-column prop="teamName" label="团队名称" />
+          <el-table-column prop="memberName" label="招商经理" />
+          <el-table-column prop="teamSize" label="团队数量" align="center" />
+          <el-table-column label="绑定项目">
+            <template slot-scope="scope">
+              {{ formatProjectNames(scope.row.projectIds) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="createTime" label="创建时间" />
+          <el-table-column label="操作" align="center" width="150">
+            <template slot-scope="scope">
+              <el-button type="text" size="small" @click="handleEditTeam(scope.row)">编辑</el-button>
+              <el-button type="text" size="small" @click="handleDeleteTeam(scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <!-- 分页 -->
+        <div class="pagination-container">
+          <el-pagination background @size-change="handleTeamSizeChange" @current-change="handleTeamCurrentChange"
+            :current-page="teamQueryParams.pageNum" :page-sizes="[10, 20, 30, 50]" :page-size="teamQueryParams.pageSize"
+            layout="total, sizes, prev, pager, next, jumper" :total="teamTotal" />
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+
+    <!-- 新增/编辑招商团队对话框 -->
+    <el-dialog 
+      :title="teamDialogTitle" 
+      :visible.sync="teamDialogVisible" 
+      width="500px" 
+      append-to-body
+      @open="handleOpenTeamDialog"
+      @closed="handleCloseTeamDialog"
+    >
+      <el-form :model="teamForm" :rules="teamRules" ref="teamFormRef" label-width="100px">
+        <el-form-item label="团队名称" prop="teamName">
+          <el-input v-model="teamForm.teamName" placeholder="请输入团队名称" />
+        </el-form-item>
+        <el-form-item label="招商经理" prop="managerId">
+          <el-button @click="openManagerDialog">选择</el-button>
+          <span class="selected-manager" v-if="teamForm.managerName">
+            {{ teamForm.managerName }} <span v-if="teamForm.managerPhone">({{ teamForm.managerPhone }})</span>
+          </span>
+        </el-form-item>
+        <el-form-item label="绑定项目" prop="projectIds">
+          <el-select v-model="teamForm.projectIds" multiple placeholder="请选择项目" style="width: 100%;">
+            <el-option 
+              v-for="item in projectOptions" 
+              :key="item.projectId || item.id" 
+              :label="item.projectName || item.name" 
+              :value="item.projectId || item.id" 
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="handleCloseTeamDialog">取 消</el-button>
+        <el-button type="primary" @click="submitTeamForm">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 新增招商人员对话框 -->
+    <el-dialog 
+      title="新增招商人员" 
+      :visible.sync="personnelDialogVisible" 
+      width="500px" 
+      append-to-body
+      @closed="handleClosePersonnelDialog"
+    >
+      <el-form :model="personnelForm" :rules="personnelRules" ref="personnelFormRef" label-width="100px">
+        <el-form-item label="选择团队" prop="teamId">
+          <el-select v-model="personnelForm.teamId" placeholder="请选择团队" style="width: 100%;">
+            <el-option v-for="item in teamOptions" :key="item.id" :label="item.teamName" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="人员信息" prop="memberIds">
+          <el-button @click="showMemberSelect('personnel')">添加</el-button>
+          <div class="selected-members">
+            <el-tag v-for="member in selectedMembers" :key="member.id" closable @close="removeMember(member)">
+              {{ member.name }}
+            </el-tag>
+          </div>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="handleClosePersonnelDialog">取 消</el-button>
+        <el-button type="primary" @click="submitPersonnelForm">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 成员选择弹窗组件（用于招商经理选择和招商人员选择） -->
+    <member-selector
+      :visible.sync="memberDialogVisible"
+      :selection-mode="selectionMode"
+      :selected-member="tempSelectedMember"
+      :selected-members="tempSelectedMembers"
+      :departments="departmentList"
+      :members="allMembers"
+      @confirm="handleMemberSelectorConfirm"
+      @cancel="memberDialogVisible = false"
+    />
+
+    <!-- 普通成员选择对话框（旧版，可以删除，改为上面的复用组件） -->
+    <el-dialog title="请选择成员" :visible.sync="memberSelectVisible" width="600px" append-to-body>
+      <div class="member-select-container">
+        <div class="member-select-header">
+          <el-radio-group v-model="memberSelectMode">
+            <el-radio label="member">按成员选择</el-radio>
+            <el-radio label="all">按部门选择</el-radio>
+          </el-radio-group>
+          <el-input
+            v-model="memberSearchKeyword"
+            placeholder="请输入人员名称或手机号"
+            prefix-icon="el-icon-search"
+            @keyup.enter.native="searchMember"
+            clearable
+          >
+            <el-button slot="append" icon="el-icon-search" @click="searchMember"></el-button>
+          </el-input>
+        </div>
+        <div class="member-select-body">
+          <div class="member-tree-container">
+            <template v-if="memberSearchKeyword && memberList.length > 0">
+              <div class="search-result-container">
+                <div class="search-result-title">搜索结果</div>
+                <div class="search-result-list">
+                  <div 
+                    v-for="item in memberList" 
+                    :key="item.memberId" 
+                    class="search-result-item"
+                    @click="handleSelectMember(item)"
+                  >
+                    <span>{{item.memberName}}</span>
+                    <span class="member-dept">{{item.teamName}}</span>
+                  </div>
+                </div>
+              </div>
+            </template>
+            <template v-else>
+            <el-tree
+              ref="memberTree"
+                :data="memberSelectMode === 'member' ? departmentMemberTree : departmentTree"
+              node-key="id"
+              default-expand-all
+              :props="{
+                children: 'children',
+                  label: 'label'
+              }"
+              @node-click="handleNodeClick"
+            />
+            </template>
+          </div>
+          <div class="selected-members-container">
+            <div class="selected-header">
+              <span>已选择：</span>
+              <el-button type="text" @click="clearSelectedMembers">清空</el-button>
+            </div>
+            <div class="selected-list">
+              <div v-for="member in tempSelectedMembers" :key="member.id" class="selected-item">
+                <span>{{ member.name }}</span>
+                <el-button type="text" icon="el-icon-close" @click="removeTempMember(member)" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="memberSelectVisible = false">取 消</el-button>
+        <el-button type="primary" @click="confirmMemberSelect">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 删除确认对话框 -->
+    <el-dialog title="提示" :visible.sync="deleteDialogVisible" width="360px" append-to-body>
+      <div class="delete-confirm">
+        <i class="el-icon-warning"></i>
+        <span>确定要删除该招商团队吗？</span>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="deleteDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="confirmDelete">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 移除人员确认对话框 -->
+    <el-dialog title="提示" :visible.sync="removeDialogVisible" width="360px" append-to-body>
+      <div class="delete-confirm">
+        <i class="el-icon-warning"></i>
+        <span>确定要移除该招商人员吗？</span>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="removeDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="confirmRemove">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getMerchantTeamList,
+  addMerchantTeam,
+  updateMerchantTeam,
+  deleteMerchantTeam,
+  checkTeamName,
+  getProjectsList,
+  getMerchantPersonnelList,
+  addMerchantPersonnel,
+  batchAddMerchantPersonnel,
+  removeMerchantPersonnel,
+  checkMemberExists,
+  getManagerList,
+  getMemberList,
+  getMembersByDeptId,
+  getDepartmentTree
+} from '@/api/merchant'
+import MemberSelector from '@/components/MemberSelector'
+
+export default {
+  name: 'MerchantPersonnel',
+  components: {
+    MemberSelector
+  },
+  data() {
+    return {
+      selectedMember:{},
+      // 选项卡激活值
+      activeTab: 'personnel',
+      
+      // 人员管理相关数据
+      loading: false,
+      personnelList: [],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        memberName: '',
+        phone: '',
+        teamId: undefined
+      },
+      total: 0,
+
+      // 招商团队相关数据
+      teamLoading: false,
+      teamTableList: [],
+      teamQueryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        teamName: '',
+        managerName: '',
+        projectId: undefined
+      },
+      teamTotal: 0,
+      projectOptions: [],
+
+      // 招商团队对话框
+      teamDialogVisible: false,
+      teamDialogTitle: '',
+      teamForm: {
+        id: undefined,
+        teamName: '',
+        managerId: '',
+        managerName: '',
+        managerPhone: '',
+        projectIds: [],
+        createUserId: this.$store.getters.userId,
+        tenantId: this.$store.getters.tenantId
+      },
+      teamRules: {
+        teamName: [{ required: true, message: '请输入团队名称', trigger: 'blur' }],
+        managerId: [{ 
+          required: true, 
+          message: '请选择招商经理', 
+          trigger: 'change',
+          validator: (rule, value, callback) => {
+            // 检查是否有managerId和managerName
+            if (value && this.teamForm.managerName) {
+              callback(); // 验证通过
+            } else {
+              callback(new Error('请选择招商经理'));
+            }
+          }
+        }],
+        projectIds: [{ required: true, message: '请选择绑定项目', trigger: 'change' }]
+      },
+
+      // 招商人员对话框
+      personnelDialogVisible: false,
+      personnelForm: {
+        teamId: undefined,
+        memberIds: [],
+        createUserId: this.$store.getters.userId,
+        tenantId: this.$store.getters.tenantId
+      },
+      personnelRules: {
+        teamId: [{ required: true, message: '请选择团队', trigger: 'change' }],
+        memberIds: [{ required: true, message: '请选择人员', trigger: 'change' }]
+      },
+      teamOptions: [],
+      selectedMembers: [],
+
+      // 新招商经理选择对话框
+      memberDialogVisible: false,
+      memberType: 'member',
+      memberSearchKeyword: '',
+      memberLoading: false,
+      departmentList: [],
+      allMembers: [],
+      tempSelectedMemberId: null,
+      tempSelectedMember: null,
+      selectAll: false,
+      selectedDepartmentPath: [],
+
+      // 成员选择对话框（旧版，保留用于普通人员选择）
+      memberSelectVisible: false,
+      memberSelectMode: 'member',
+      departmentTree: [],
+      departmentMemberTree: [],
+      memberList: [],
+      tempSelectedMembers: [],
+      currentSelectType: '', // 'manager' 或 'personnel'
+
+      // 删除对话框
+      deleteDialogVisible: false,
+      deleteTeamId: null,
+
+      // 移除人员对话框
+      removeDialogVisible: false,
+      removePersonnelId: null,
+
+      // 新增的 selectionMode 和 tempSelectedMembers 属性
+      selectionMode: 'single',
+      tempSelectedMembers: []
+    }
+  },
+  computed: {
+    hasMembers() {
+      return this.departmentList && this.departmentList.length > 0
+    }
+  },
+  created() {
+    this.loadProjects()
+    this.initMockData() // 初始化模拟数据
+  },
+  methods: {
+    // 初始化模拟数据
+    initMockData() {
+      // 模拟部门数据
+      this.departmentList = [
+        {
+          id: '1',
+          name: '销售部',
+          expanded: true,
+          children: [
+            { id: '1-1', name: '销售一组', expanded: false },
+            { id: '1-2', name: '销售二组', expanded: false }
+          ]
+        },
+        {
+          id: '2',
+          name: '市场部',
+          expanded: true,
+          children: [
+            { id: '2-1', name: '市场推广组', expanded: false },
+            { id: '2-2', name: '品牌推广组', expanded: false }
+          ]
+        },
+        {
+          id: '3',
+          name: '客户服务部',
+          expanded: true,
+          children: []
+        }
+      ]
+
+      // 模拟成员数据
+      this.allMembers = [
+        { id: '101', name: '张三', phone: '13812345678', deptId: '1' },
+        { id: '102', name: '李四', phone: '13912345678', deptId: '1' },
+        { id: '103', name: '王五', phone: '13712345678', deptId: '1-1' },
+        { id: '104', name: '赵六', phone: '13612345678', deptId: '1-1' },
+        { id: '105', name: '钱七', phone: '13512345678', deptId: '1-2' },
+        { id: '106', name: '孙八', phone: '13412345678', deptId: '1-2' },
+        { id: '107', name: '周九', phone: '13312345678', deptId: '2' },
+        { id: '108', name: '吴十', phone: '13212345678', deptId: '2-1' },
+        { id: '109', name: '郑十一', phone: '13112345678', deptId: '2-1' },
+        { id: '110', name: '王十二', phone: '13012345678', deptId: '2-2' },
+        { id: '111', name: '刘十三', phone: '13612345679', deptId: '3' },
+        { id: '112', name: '陈十四', phone: '13712345679', deptId: '3' }
+      ]
+    },
+
+    // 获取项目列表
+    loadProjects() {
+      getProjectsList().then(res => {
+        if (res.code === '0000000000000000') {
+          this.projectOptions = res.data
+          
+          // 项目列表加载完成后加载团队和人员列表
+          this.getTeamList()
+          this.getPersonnelList()
+        } else {
+          // 如果加载失败，仍然尝试加载团队和人员列表
+          this.getTeamList()
+          this.getPersonnelList()
+        }
+      }).catch(() => {
+        // 发生错误时仍然尝试加载团队和人员列表
+        this.getTeamList()
+        this.getPersonnelList()
+      })
+    },
+
+    // 获取团队列表
+    getTeamList() {
+      this.teamLoading = true
+      getMerchantTeamList(this.teamQueryParams).then(res => {
+        if (res.code === '0000000000000000') {
+          this.teamTableList = res.data.list
+          this.teamTotal = res.data.total
+          
+          // 更新团队选项
+          this.teamOptions = res.data.list.map(item => ({
+            id: item.id,
+            teamName: item.teamName
+          }))
+        }
+        this.teamLoading = false
+      }).catch(() => {
+        this.teamLoading = false
+      })
+    },
+
+    // 获取人员列表
+    getPersonnelList() {
+      this.loading = true
+      getMerchantPersonnelList(this.queryParams).then(res => {
+        if (res.code === '0000000000000000') {
+          // 确保数据中有managerFlag字段
+          this.personnelList = res.data.data || []
+          this.personnelList.forEach(item => {
+            // 如果返回数据中没有managerFlag字段但有managerFlagDesc，则尝试推断
+            if (item.managerFlagDesc && !item.managerFlag) {
+              item.managerFlag = item.managerFlagDesc === '是' ? '1' : '0'
+            }
+          })
+          this.total = res.data.total || 0
+        } else {
+          this.personnelList = []
+          this.total = 0
+        }
+        this.loading = false
+      }).catch(() => {
+        this.personnelList = []
+        this.total = 0
+        this.loading = false
+      })
+    },
+
+    // 添加团队
+    handleAddTeam() {
+      // 重置临时选择的招商经理数据
+      this.tempSelectedMember = null
+      this.tempSelectedMemberId = null
+      this.tempSelectedMembers = []
+      
+      // 设置对话框标题和表单数据
+      this.teamDialogTitle = '新增招商团队'
+      
+      // 先重置表单数据
+      this.teamForm = {
+        id: undefined,
+        teamName: '',
+        managerId: '',
+        managerName: '',
+        managerPhone: '',
+        projectIds: [],
+        createUserId: this.$store.getters.userId,
+        tenantId: this.$store.getters.tenantId
+      }
+      
+      // 然后打开弹窗
+      this.teamDialogVisible = true
+    },
+
+    // 编辑团队
+    handleEditTeam(row) {
+      // 设置对话框标题
+      this.teamDialogTitle = '编辑招商团队'
+      
+      // 输出调试信息，查看原始数据
+      console.log('编辑团队原始数据:', row)
+      
+      // 先设置表单数据
+      this.teamForm = {
+        id: row.id,
+        teamName: row.teamName,
+        managerId: row.memberId, // 使用memberId字段
+        managerName: row.memberName, // 使用memberName字段
+        managerPhone: row.phone || '', // 使用phone字段
+        projectIds: [],
+        createUserId: this.$store.getters.userId,
+        tenantId: this.$store.getters.tenantId
+      }
+      
+      // 设置选中的经理
+      this.selectedMember = {
+        id: row.memberId, // 使用memberId字段
+        name: row.memberName, // 使用memberName字段
+        phone: row.phone || ''
+      }
+      
+      // 解析绑定项目字段
+      if (row.projectIds) {
+        // 如果返回的是字符串，转为数组
+        if (typeof row.projectIds === 'string') {
+          this.teamForm.projectIds = row.projectIds.split(',');
+        } else if (Array.isArray(row.projectIds)) {
+          this.teamForm.projectIds = [...row.projectIds];
+        }
+      }
+      
+      // 设置招商经理相关临时数据，用于成员选择器
+      if (this.teamForm.managerId && this.teamForm.managerName) {
+        this.tempSelectedMemberId = this.teamForm.managerId
+        this.tempSelectedMember = {
+          id: this.teamForm.managerId,
+          name: this.teamForm.managerName,
+          phone: this.teamForm.managerPhone || ''
+        }
+      } else {
+        this.tempSelectedMemberId = null
+        this.tempSelectedMember = null
+      }
+      
+      // 然后打开弹窗
+      this.teamDialogVisible = true
+    },
+
+    // 开启招商经理选择对话框
+    openManagerDialog() {
+      // 先重置所有成员的选中状态
+      this.resetMembersCheckStatus()
+      
+      // 设置单选模式
+      this.selectionMode = 'single'
+      
+      // 如果已选择经理，找到对应的成员对象
+      if (this.teamForm.managerId && this.teamForm.managerName) {
+        // 在allMembers中查找对应成员
+        const manager = this.allMembers.find(m => m.id === this.teamForm.managerId);
+        
+        if (manager) {
+          // 设置单选模式下的选中值
+          this.tempSelectedMemberId = manager.id;
+          
+          // 创建完整的选中成员对象
+          this.tempSelectedMember = {
+            id: manager.id,
+            name: manager.name,
+            phone: manager.phone || '',
+            department: this.getDepartmentNameById(manager.deptId)
+          };
+          
+          // 确保成员的checked属性设置正确（对单选模式的radio按钮）
+          manager.checked = true;
+          
+          // 展开包含该成员的部门
+          this.expandManagerDepartment(manager.deptId);
+          
+          // 添加到tempSelectedMembers以便在右侧显示
+          this.tempSelectedMembers = [{
+            id: manager.id,
+            name: manager.name,
+            phone: manager.phone || '',
+            department: this.getDepartmentNameById(manager.deptId)
+          }];
+        } else {
+          // 如果在allMembers中找不到，则使用表单中的信息
+          this.tempSelectedMemberId = this.teamForm.managerId;
+          this.tempSelectedMember = {
+            id: this.teamForm.managerId,
+            name: this.teamForm.managerName,
+            phone: this.teamForm.managerPhone || ''
+          };
+          
+          // 添加到tempSelectedMembers
+          this.tempSelectedMembers = [this.tempSelectedMember];
+        }
+      } else {
+        this.tempSelectedMemberId = null;
+        this.tempSelectedMember = null;
+        this.tempSelectedMembers = [];
+      }
+      
+      // 展开部门
+      this.expandDepartments();
+      
+      // 设置其他参数并打开对话框
+      this.memberDialogVisible = true;
+      this.memberType = 'member';
+      this.memberSearchKeyword = '';
+    },
+    
+    // 展开部门
+    expandDepartments() {
+      // 默认展开所有顶级部门
+      this.departmentList.forEach(dept => {
+        dept.expanded = true
+        if (dept.children) {
+          dept.children.forEach(child => {
+            child.expanded = false
+          })
+        }
+      })
+    },
+    
+    // 展开经理所在的部门
+    expandManagerDepartment(deptId) {
+      if (!deptId) return;
+      
+      // 检查是否是子部门
+      for (const parent of this.departmentList) {
+        if (parent.children) {
+          const isChildDept = parent.children.some(child => child.id === deptId);
+          if (isChildDept) {
+            // 找到了经理所在的父部门，确保展开
+            parent.expanded = true;
+            
+            // 找到对应的子部门并展开
+            const childDept = parent.children.find(child => child.id === deptId);
+            if (childDept) {
+              childDept.expanded = true;
+            }
+            
+            return;
+          }
+        }
+      }
+      
+      // 如果是顶级部门，直接展开
+      const dept = this.departmentList.find(d => d.id === deptId);
+      if (dept) {
+        dept.expanded = true;
+      }
+    },
+    
+    // 根据部门ID获取部门名称
+    getDepartmentNameById(deptId) {
+      if (!deptId) return '';
+      
+      // 检查顶级部门
+      const dept = this.departmentList.find(d => d.id === deptId);
+      if (dept) return dept.name;
+      
+      // 检查子部门
+      for (const parent of this.departmentList) {
+        if (parent.children) {
+          const child = parent.children.find(c => c.id === deptId);
+          if (child) return child.name;
+        }
+      }
+      
+      return '';
+    },
+    
+    // 打开招商人员选择对话框
+    showMemberSelect(type) {
+      if (type === 'personnel') {
+        // 使用新的成员选择弹窗
+        this.memberDialogVisible = true
+        this.memberType = 'member'
+        this.memberSearchKeyword = ''
+        this.selectionMode = 'multiple' // 多选模式
+        this.tempSelectedMemberId = null
+        this.tempSelectedMember = null
+        
+        // 从已选成员初始化临时选择列表
+        this.tempSelectedMembers = [...this.selectedMembers]
+        
+        // 展开部门
+        this.expandDepartments()
+        
+        // 根据已选成员设置复选框状态
+        this.resetMembersCheckStatus()
+        if (this.tempSelectedMembers.length > 0) {
+          this.setMembersCheckedByIds(this.tempSelectedMembers.map(m => m.id))
+        }
+        } else {
+        // 旧版逻辑（可以删除）
+        this.currentSelectType = type
+        this.memberSelectVisible = true
+        this.memberSelectMode = 'member'
+        this.memberSearchKeyword = ''
+        
+        if (type === 'manager') {
+          this.tempSelectedMembers = this.teamForm.managerId ? [{
+            id: this.teamForm.managerId,
+            name: this.teamForm.managerName
+          }] : []
+        } else {
+          this.tempSelectedMembers = [...this.selectedMembers]
+        }
+      }
+    },
+    
+    // 设置成员的选中状态
+    resetMembersCheckStatus() {
+      // 添加 checked 属性并初始化为 false
+      this.allMembers.forEach(member => {
+        this.$set(member, 'checked', false)
+      })
+    },
+    
+    // 根据ID数组设置成员的选中状态
+    setMembersCheckedByIds(ids) {
+      this.allMembers.forEach(member => {
+        if (ids.includes(member.id)) {
+          member.checked = true
+        }
+      })
+    },
+    
+    // 根据部门ID筛选成员
+    filteredMembers(deptId) {
+      if (this.memberSearchKeyword) {
+        return this.allMembers.filter(member => 
+          member.deptId === deptId && 
+          member.name.includes(this.memberSearchKeyword)
+        )
+      }
+      return this.allMembers.filter(member => member.deptId === deptId)
+    },
+    
+    // 展开/收起部门
+    toggleDepartment(department) {
+      department.expanded = !department.expanded
+    },
+    
+    // 单选模式：选择成员
+    handleMemberSelected(member, department) {
+      // 先重置所有成员选中状态
+      this.allMembers.forEach(m => {
+        m.checked = false;
+      });
+      
+      // 设置当前成员为选中
+      const targetMember = this.allMembers.find(m => m.id === member.id);
+      if (targetMember) {
+        targetMember.checked = true;
+      }
+      
+      // 更新临时选中成员
+      this.tempSelectedMember = {
+        id: member.id,
+        name: member.name,
+        phone: member.phone,
+        department: department.name
+      }
+    },
+    
+    // 多选模式：处理复选框变化
+    handleMemberCheckChange(checked, member, department) {
+      if (checked) {
+        // 添加到已选列表
+        const exists = this.tempSelectedMembers.some(m => m.id === member.id)
+        if (!exists) {
+          this.tempSelectedMembers.push({
+            id: member.id,
+            name: member.name,
+            phone: member.phone,
+            department: department.name
+          })
+        }
+      } else {
+        // 从已选列表移除
+        const index = this.tempSelectedMembers.findIndex(m => m.id === member.id)
+        if (index !== -1) {
+          this.tempSelectedMembers.splice(index, 1)
+        }
+      }
+    },
+    
+    // 从已选列表中移除成员
+    removeTempSelectedMember(member) {
+      // 从已选列表移除
+      const index = this.tempSelectedMembers.findIndex(m => m.id === member.id)
+      if (index !== -1) {
+        this.tempSelectedMembers.splice(index, 1)
+      }
+      
+      // 更新复选框状态
+      const targetMember = this.allMembers.find(m => m.id === member.id)
+      if (targetMember) {
+        targetMember.checked = false
+      }
+    },
+    
+    // 清空选择的成员
+    clearSelectedMembers() {
+      this.tempSelectedMembers = []
+      this.tempSelectedMember = null
+      this.tempSelectedMemberId = null
+      
+      // 重置所有复选框
+      this.resetMembersCheckStatus()
+    },
+    
+    // 确认选择成员
+    confirmSelectMembers() {
+      if (this.selectionMode === 'single') {
+        // 单选模式（招商经理）
+        if (!this.tempSelectedMember) {
+          this.$message.warning('请选择招商经理')
+          return
+        }
+        
+        // 设置团队表单中的经理信息
+        this.teamForm.managerId = this.tempSelectedMember.id
+        this.teamForm.managerName = this.tempSelectedMember.name
+        this.teamForm.managerPhone = this.tempSelectedMember.phone || ''
+      } else {
+        // 多选模式（招商人员）
+        if (this.tempSelectedMembers.length === 0) {
+          this.$message.warning('请选择招商人员')
+          return
+        }
+        
+        // 更新已选招商人员列表
+        this.selectedMembers = [...this.tempSelectedMembers]
+        
+        // 更新表单数据
+        this.personnelForm.memberIds = this.selectedMembers.map(member => member.id)
+        this.personnelForm.memberNames = this.selectedMembers.map(member => member.name)
+      }
+      
+      this.memberDialogVisible = false
+    },
+
+    // 提交团队表单
+    submitTeamForm() {
+      this.$refs.teamFormRef.validate(valid => {
+        if (valid) {
+          const method = this.teamForm.id ? updateMerchantTeam : addMerchantTeam
+          const message = this.teamForm.id ? '更新成功' : '新增成功'
+          
+          // 克隆表单数据
+          const formData = { ...this.teamForm }
+          
+          // 重命名字段以匹配后端要求
+          formData.memberId = formData.managerId
+          formData.memberName = formData.managerName
+          formData.phone = formData.managerPhone // 设置电话字段
+          
+          // 确保有电话信息
+          console.log('提交的表单数据:', formData);
+          
+          // 处理项目ID格式
+          if (Array.isArray(formData.projectIds)) {
+            formData.projectIds = formData.projectIds.join(',')
+          }
+          
+          method(formData).then(res => {
+            if (res.code === '0000000000000000') {
+              this.$message.success(message)
+              this.teamDialogVisible = false
+              this.getTeamList()
+            }
+          })
+        }
+      })
+    },
+
+    // 检查团队名称是否存在
+    checkTeamNameExists(rule, value, callback) {
+      if (!value) {
+        callback(new Error('团队名称不能为空'))
+        return
+      }
+      
+      const params = {
+        teamName: value
+      }
+      
+      if (this.teamForm.id) {
+        params.excludeId = this.teamForm.id
+      }
+      
+      checkTeamName(params).then(res => {
+        if (res.code === '0000000000000000') {
+          if (res.data) {
+            callback(new Error('团队名称已存在'))
+          } else {
+            callback()
+          }
+        }
+      })
+    },
+
+    // 删除团队
+    handleDeleteTeam(row) {
+      this.$confirm('确认删除该团队?', '警告', {
+        type: 'warning'
+      }).then(() => {
+        deleteMerchantTeam(row.id, this.$store.getters.userId).then(res => {
+          if (res.code === '0000000000000000') {
+            this.$message.success('删除成功')
+            this.getTeamList()
+          }
+        })
+      }).catch(() => {})
+    },
+
+    // 提交人员表单
+    submitPersonnelForm() {
+      this.$refs.personnelFormRef.validate(valid => {
+        if (valid) {
+          if (this.selectedMembers.length === 0) {
+            this.$message.warning('请选择招商人员')
+            return
+          }
+          
+          // 构建提交数据
+          const personnelList = this.selectedMembers.map(member => ({
+            teamId: this.personnelForm.teamId,
+            memberId: member.id,
+            memberName: member.name,
+            memberPhone: member.phone || '',
+            isManager: '0',
+            createUserId: this.personnelForm.createUserId,
+            tenantId: this.personnelForm.tenantId
+          }))
+          
+          if (personnelList.length === 1) {
+            // 单个添加
+            addMerchantPersonnel(personnelList[0]).then(res => {
+              if (res.code === '0000000000000000') {
+                this.$message.success('添加成功')
+                this.personnelDialogVisible = false
+                this.getPersonnelList()
+              }
+            })
+          } else {
+            // 批量添加
+            batchAddMerchantPersonnel(personnelList).then(res => {
+              if (res.code === '0000000000000000') {
+                this.$message.success('批量添加成功')
+                this.personnelDialogVisible = false
+                this.getPersonnelList()
+              }
+            })
+          }
+        }
+      })
+    },
+    
+    // 检查成员是否已存在
+    checkPersonnelExists(memberId, teamId) {
+      return new Promise((resolve) => {
+        const params = {
+          teamId,
+          memberId
+        }
+        
+        checkMemberExists(params).then(res => {
+          if (res.code === '0000000000000000') {
+            resolve(res.data)
+          } else {
+            resolve(false)
+          }
+        }).catch(() => {
+          resolve(false)
+        })
+      })
+    },
+    
+    // 移除招商人员
+    handleRemovePersonnel(row) {
+      this.$confirm('确认移除该人员?', '警告', {
+        type: 'warning'
+      }).then(() => {
+        removeMerchantPersonnel(row.id, this.$store.getters.userId).then(res => {
+          if (res.code === '0000000000000000') {
+            this.$message.success('移除成功')
+            this.getPersonnelList()
+          }
+        })
+      }).catch(() => {})
+    },
+
+    // 处理成员选择器确认
+    handleMemberSelectorConfirm(result) {
+      if (this.selectionMode === 'single') {
+        // 单选模式（招商经理）
+        // 设置团队表单中的经理信息
+        if (!result) return;
+        
+        console.log('选择的招商经理:', result);
+        
+        // 设置团队表单中的经理数据
+        this.teamForm.managerId = result.id;
+        this.teamForm.managerName = result.name;
+        this.teamForm.managerPhone = result.phone || '';
+        
+        // 确保成员选择器关闭
+        this.memberDialogVisible = false;
+        
+        // 手动触发验证经理字段
+        this.$nextTick(() => {
+          if (this.$refs.teamFormRef) {
+            this.$refs.teamFormRef.validateField('managerId');
+          }
+        });
+      } else {
+        // 多选模式（招商人员）
+        // 更新已选招商人员列表
+        this.selectedMembers = [...result]
+        
+        // 更新表单数据
+        this.personnelForm.memberIds = this.selectedMembers.map(member => member.id)
+        
+        // 确保成员选择器关闭
+        this.memberDialogVisible = false;
+      }
+    },
+
+    // 修改 MemberSelector 组件使用方式
+    updateMemberSelector() {
+      // 在组件卸载重建时，确保数据正确
+      if (this.memberDialogVisible && this.selectionMode === 'single' && this.teamForm.managerId) {
+        // 找到对应的成员
+        const manager = this.allMembers.find(m => m.id === this.teamForm.managerId);
+        if (manager) {
+          // 设置选中状态
+          this.$nextTick(() => {
+            this.tempSelectedMemberId = this.teamForm.managerId;
+            this.tempSelectedMember = {
+              id: this.teamForm.managerId,
+              name: this.teamForm.managerName,
+              phone: this.teamForm.managerPhone || ''
+            };
+          });
+        }
+      }
+    },
+
+    // 搜索人员列表
+    handleSearch() {
+      this.queryParams.pageNum = 1
+      this.getPersonnelList()
+    },
+
+    // 重置人员搜索条件
+    resetQuery() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        memberName: '',
+        phone: '',
+        teamId: undefined
+      }
+      this.getPersonnelList()
+    },
+
+    // 搜索团队列表
+    handleTeamSearch() {
+      this.teamQueryParams.pageNum = 1
+      this.getTeamList()
+    },
+
+    // 重置团队搜索条件
+    resetTeamQuery() {
+      this.teamQueryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        teamName: '',
+        managerName: '',
+        projectId: undefined
+      }
+      this.getTeamList()
+    },
+
+    // 处理分页大小变化
+    handleSizeChange(val) {
+      this.queryParams.pageSize = val
+      this.getPersonnelList()
+    },
+
+    // 处理页码变化
+    handleCurrentChange(val) {
+      this.queryParams.pageNum = val
+      this.getPersonnelList()
+    },
+
+    // 处理团队分页大小变化
+    handleTeamSizeChange(val) {
+      this.teamQueryParams.pageSize = val
+      this.getTeamList()
+    },
+
+    // 处理团队页码变化
+    handleTeamCurrentChange(val) {
+      this.teamQueryParams.pageNum = val
+      this.getTeamList()
+    },
+
+    // 打开团队对话框时初始化
+    handleOpenTeamDialog() {
+      console.log('对话框打开，当前表单状态:', this.teamForm);
+      
+      // 编辑模式下触发经理字段验证
+      if (this.teamForm.id) {
+        this.$nextTick(() => {
+          if (this.$refs.teamFormRef) {
+            this.$refs.teamFormRef.clearValidate();
+            if (this.teamForm.managerId) {
+              this.$refs.teamFormRef.validateField('managerId');
+            }
+          }
+        });
+        return;
+      }
+      
+      // 如果是新增模式，确保表单被重置
+      this.$nextTick(() => {
+        if (this.$refs.teamFormRef) {
+          this.$refs.teamFormRef.resetFields();
+          this.$refs.teamFormRef.clearValidate();
+          
+          // 确保表单值被正确初始化为默认值
+          this.$set(this, 'teamForm', {
+            id: undefined,
+            teamName: '',
+            managerId: '',
+            managerName: '',
+            managerPhone: '',
+            projectIds: [],
+            createUserId: this.$store.getters.userId,
+            tenantId: this.$store.getters.tenantId
+          });
+        }
+      });
+    },
+
+    // 关闭团队弹窗时重置表单
+    handleCloseTeamDialog() {
+      this.teamDialogVisible = false;
+      
+      // 重置相关数据
+      this.tempSelectedMember = null;
+      this.tempSelectedMemberId = null; 
+      this.tempSelectedMembers = [];
+      
+      // 重置表单，避免状态残留
+      this.$nextTick(() => {
+        if (this.$refs.teamFormRef) {
+          this.$refs.teamFormRef.resetFields();
+          this.$refs.teamFormRef.clearValidate();
+          
+          // 重置表单数据，确保下次打开时不会有残留
+          this.$set(this, 'teamForm', {
+            id: undefined,
+            teamName: '',
+            managerId: '',
+            managerName: '',
+            managerPhone: '',
+            projectIds: [],
+            createUserId: this.$store.getters.userId,
+            tenantId: this.$store.getters.tenantId
+          });
+        }
+      });
+    },
+
+    // 添加招商人员
+    handleAddPersonnel() {
+      // 首先关闭可能打开的弹窗
+      this.personnelDialogVisible = false
+      
+      // 重置相关数据
+      this.selectedMembers = []
+      this.tempSelectedMembers = []
+      
+      // 重置人员表单
+      this.personnelForm = {
+        teamId: undefined,
+        memberIds: [],
+        createUserId: this.$store.getters.userId,
+        tenantId: this.$store.getters.tenantId
+      }
+      
+      // 确保在打开新增人员弹窗时重置表单验证状态
+      this.$nextTick(() => {
+        // 打开弹窗
+        this.personnelDialogVisible = true
+        
+        if (this.$refs.personnelFormRef) {
+          this.$refs.personnelFormRef.resetFields()
+          this.$refs.personnelFormRef.clearValidate()
+        }
+      })
+    },
+    
+    // 关闭人员弹窗时重置表单
+    handleClosePersonnelDialog() {
+      this.personnelDialogVisible = false
+      
+      // 重置相关数据
+      this.selectedMembers = []
+      this.tempSelectedMembers = []
+      
+      // 重置表单，避免状态残留
+      this.$nextTick(() => {
+        if (this.$refs.personnelFormRef) {
+          this.$refs.personnelFormRef.resetFields()
+          this.$refs.personnelFormRef.clearValidate()
+          
+          // 重置表单数据
+          this.personnelForm = {
+            teamId: undefined,
+            memberIds: [],
+            createUserId: this.$store.getters.userId,
+            tenantId: this.$store.getters.tenantId
+          }
+        }
+      })
+    },
+
+    // 格式化项目IDs为项目名称
+    formatProjectNames(projectIds) {
+      if (!projectIds) return '-';
+      
+      // 如果是字符串，转为数组
+      const projectIdArray = typeof projectIds === 'string' 
+        ? projectIds.split(',') 
+        : projectIds;
+      
+      if (!projectIdArray.length) return '-';
+      
+      // 匹配项目名称
+      const projectNames = projectIdArray.map(id => {
+        const project = this.projectOptions.find(p => p.projectId && p.projectId.toString() === id.toString());
+        return project ? project.projectName : id;
+      });
+      
+      return projectNames.join('，');
+    },
+
+    // 以下是保留的原有方法
+    // ...
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.merchant-personnel-container {
+  padding: 20px;
+
+  .filter-container {
+    margin: 15px 0;
+
+    .filter-item {
+      margin-right: 10px;
+    }
+  }
+
+  .pagination-container {
+    margin-top: 15px;
+    text-align: right;
+  }
+
+  .selected-manager {
+    margin-left: 10px;
+  }
+
+  .selected-members {
+    margin-top: 10px;
+
+    .el-tag {
+      margin-right: 5px;
+      margin-bottom: 5px;
+    }
+  }
+  
+  // 招商经理标签样式
+  .el-tag--mini {
+    margin-left: 5px;
+    padding: 0 5px;
+    height: 20px;
+    line-height: 19px;
+    font-size: 12px;
+  }
+
+  .member-select-container {
+    .member-select-header {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 15px;
+    }
+
+    .member-select-body {
+      display: flex;
+      height: 350px;
+      border: 1px solid #dcdfe6;
+      
+      .member-tree-container {
+        flex: 1;
+        padding: 10px;
+        overflow: auto;
+        border-right: 1px solid #dcdfe6;
+
+        .search-result-container {
+          .search-result-title {
+            font-weight: bold;
+            padding-bottom: 8px;
+            border-bottom: 1px solid #ebeef5;
+            margin-bottom: 10px;
+          }
+
+          .search-result-list {
+            .search-result-item {
+              padding: 8px;
+              cursor: pointer;
+              display: flex;
+              justify-content: space-between;
+
+              &:hover {
+                background-color: #f5f7fa;
+              }
+
+              .member-dept {
+                color: #909399;
+                font-size: 12px;
+              }
+            }
+          }
+        }
+      }
+
+      .selected-members-container {
+        width: 200px;
+        
+        .selected-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 10px;
+          border-bottom: 1px solid #dcdfe6;
+        }
+
+        .selected-list {
+          padding: 10px;
+          height: calc(100% - 41px);
+          overflow: auto;
+
+          .selected-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 5px;
+          }
+        }
+      }
+    }
+  }
+
+  .delete-confirm {
+    display: flex;
+    align-items: center;
+    
+    i {
+      font-size: 24px;
+      color: #e6a23c;
+      margin-right: 10px;
+    }
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/pc/src/views/merchant/tag-management/index.vue b/pc/src/views/merchant/tag-management/index.vue
new file mode 100644
index 0000000..f190844
--- /dev/null
+++ b/pc/src/views/merchant/tag-management/index.vue
@@ -0,0 +1,776 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <!-- 左侧分组区域 -->
+      <el-col :span="6">
+        <div class="group-container">
+          <div class="group-header">
+            <h3>分组管理</h3>
+            <el-button 
+              type="primary" 
+              size="mini" 
+              icon="el-icon-plus"
+              @click="handleAddGroup">
+              新增
+            </el-button>
+          </div>
+          <div class="group-search">
+            <el-input 
+              v-model="groupSearchInput" 
+              placeholder="请输入分组名称" 
+              clearable 
+              size="small"
+              >
+              
+            </el-input>
+          </div>
+          <div class="group-menu">
+            <el-menu 
+              :default-active="activeGroupId" 
+              class="el-menu-vertical-demo" 
+              @select="handleGroupSelect">
+              <el-menu-item 
+                v-for="group in filteredGroupList" 
+                :key="group.id" 
+                :index="group.id.toString()"
+                class="group-item">
+                <span>{{ group.groupName }}</span>
+                <div class="group-actions">
+                  <el-tooltip content="编辑" placement="top">
+                    <i class="el-icon-edit" @click.stop="handleEditGroup(group)"></i>
+                  </el-tooltip>
+                  <el-tooltip content="删除" placement="top">
+                    <i class="el-icon-delete" @click.stop="handleDeleteGroup(group)"></i>
+                  </el-tooltip>
+                </div>
+              </el-menu-item>
+            </el-menu>
+          </div>
+        </div>
+      </el-col>
+      
+      <!-- 右侧标签区域 -->
+      <el-col :span="18">
+        <div class="tag-container">
+          <div class="tag-header">
+            <div class="header-title">
+              <h3>标签管理</h3>
+              <span v-if="activeGroup">- {{ activeGroup.groupName }}</span>
+            </div>
+            <el-button 
+              type="primary" 
+              icon="el-icon-plus"
+              @click="handleAddTag"
+              :disabled="!activeGroupId">
+              新增标签
+            </el-button>
+          </div>
+          
+          <!-- 标签搜索区域 -->
+          <div class="tag-search">
+            <el-form :inline="true" :model="tagQueryParams" class="search-form">
+              <el-form-item label="标签名称">
+                <el-input 
+                  v-model="tagQueryParams.tagName" 
+                  placeholder="请输入标签名称" 
+                  clearable
+                  @keyup.enter.native="handleTagQuery">
+                </el-input>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-search" @click="handleTagQuery">查询</el-button>
+                <el-button icon="el-icon-refresh" @click="resetTagQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+          
+          <!-- 标签表格 -->
+          <el-table
+            v-loading="tableLoading"
+            :data="paginationTagList"
+            style="width: 100%"
+            border>
+            <el-table-column
+              type="selection"
+              width="55">
+            </el-table-column>
+            <el-table-column
+              prop="tagName"
+              label="标签名称">
+            </el-table-column>
+            <el-table-column
+              prop="intentionCustomerCount"
+              label="意向客户数量"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              label="操作"
+              width="150">
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  type="text"
+                  @click="handleEditTag(scope.row)">
+                  <i class="el-icon-edit"></i> 编辑
+                </el-button>
+                <el-button
+                  size="mini"
+                  type="text"
+                  class="delete-btn"
+                  @click="handleDeleteTag(scope.row)">
+                  <i class="el-icon-delete"></i> 删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          
+          <!-- 分页组件 -->
+          <div class="pagination-container">
+            <el-pagination
+              v-show="total > 0"
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="tagQueryParams.pageNum"
+              :page-sizes="[10, 20, 30, 50]"
+              :page-size="tagQueryParams.pageSize"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="total">
+            </el-pagination>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    
+    <!-- 分组弹窗 -->
+    <el-dialog :title="groupDialogType === 'add' ? '新增分组' : '编辑分组'" :visible.sync="groupDialogVisible" width="500px" append-to-body>
+      <el-form :model="groupForm" :rules="groupRules" ref="groupForm" label-width="100px">
+        <el-form-item label="分组名称" prop="groupName">
+          <el-input v-model="groupForm.groupName" placeholder="请输入分组名称" style="width: 100%"></el-input>
+        </el-form-item>
+        <el-form-item v-if="groupDialogType === 'add'" label="标签名称" prop="tagNames">
+          <el-select
+            v-model="groupForm.tagNames"
+            multiple
+            allow-create
+            filterable
+            default-first-option
+            placeholder="请输入标签名称，按回车确认"
+            style="width: 100%">
+          </el-select>
+          <div class="el-form-item-tip">按回车键可输入多个标签名称</div>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="groupDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitGroupForm">确 定</el-button>
+      </div>
+    </el-dialog>
+    
+    <!-- 标签弹窗 -->
+    <el-dialog :title="tagDialogType === 'add' ? '新增标签' : '编辑标签'" :visible.sync="tagDialogVisible" width="500px" append-to-body>
+      <el-form :model="tagForm" :rules="tagRules" ref="tagForm" label-width="100px">
+        <el-form-item label="选择分组" prop="groupId">
+          <el-select v-model="tagForm.groupId" placeholder="请选择分组" style="width: 100%">
+            <el-option
+              v-for="group in groupList"
+              :key="group.id"
+              :label="group.groupName"
+              :value="group.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="tagDialogType === 'add'" label="标签名称" prop="names">
+          <el-select
+            v-model="tagForm.names"
+            multiple
+            allow-create
+            filterable
+            default-first-option
+            placeholder="请输入标签名称，按回车确认"
+            style="width: 100%">
+          </el-select>
+          <div class="el-form-item-tip">按回车键可输入多个标签名称</div>
+        </el-form-item>
+        <el-form-item v-else label="标签名称" prop="tagName">
+          <el-input v-model="tagForm.tagName" placeholder="请输入标签名称" style="width: 100%"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="tagDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitTagForm">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getTagGroupList,
+  getAllTagGroups,
+  getTagGroupDetail,
+  addTagGroup,
+  updateTagGroup,
+  deleteTagGroup,
+  checkTagGroupName,
+  getTagList,
+  getTagListByGroupId,
+  getTagDetail,
+  addTag,
+  updateTag,
+  deleteTag,
+  checkTagName
+} from '@/api/merchant'
+
+export default {
+  name: 'TagManagement',
+  data() {
+    // 校验分组名称
+    const validateGroupName = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error('请输入分组名称'))
+        return
+      }
+      
+      const params = {
+        groupName: value
+      }
+      
+      if (this.groupForm.id) {
+        params.id = this.groupForm.id
+      }
+      
+      checkTagGroupName(params).then(res => {
+        if (res.code === '0000000000000000') {
+          if (res.data) {
+            callback(new Error('分组名称已存在'))
+          } else {
+            callback()
+          }
+        } else {
+          callback(new Error('验证失败，请重试'))
+        }
+      }).catch(() => {
+        callback(new Error('验证失败，请重试'))
+      })
+    }
+    
+    // 校验标签名称
+    const validateTagName = (rule, value, callback) => {
+      if (!value || value.length === 0) {
+        callback(new Error('请输入标签名称'))
+        return
+      }
+      
+      // 批量添加标签时，只检查第一个标签名称
+      const firstTagName = value[0]
+      const params = {
+        groupId: this.tagForm.groupId,
+        tagName: firstTagName
+      }
+      
+      if (this.tagForm.id) {
+        params.id = this.tagForm.id
+      }
+      
+      checkTagName(params).then(res => {
+        if (res.code === '0000000000000000') {
+          if (res.data) {
+            callback(new Error(`标签名称"${firstTagName}"已存在`))
+          } else {
+            callback()
+          }
+        } else {
+          callback(new Error('验证失败，请重试'))
+        }
+      }).catch(() => {
+        callback(new Error('验证失败，请重试'))
+      })
+    }
+    
+    // 校验单个标签名称
+    const validateSingleTagName = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error('请输入标签名称'))
+        return
+      }
+      
+      const params = {
+        groupId: this.tagForm.groupId,
+        tagName: value
+      }
+      
+      if (this.tagForm.id) {
+        params.id = this.tagForm.id
+      }
+      
+      checkTagName(params).then(res => {
+        if (res.code === '0000000000000000') {
+          if (res.data) {
+            callback(new Error(`标签名称"${value}"已存在`))
+          } else {
+            callback()
+          }
+        } else {
+          callback(new Error('验证失败，请重试'))
+        }
+      }).catch(() => {
+        callback(new Error('验证失败，请重试'))
+      })
+    }
+    
+    return {
+      // 分组相关
+      groupList: [],
+      groupSearchInput: '',
+      activeGroupId: '',
+      activeGroup: null,
+      
+      // 标签相关
+      tagList: [],
+      tagQueryParams: {
+        groupId: '',
+        tagName: '',
+        pageNum: 1,
+        pageSize: 10
+      },
+      total: 0,
+      tableLoading: false,
+      
+      // 分组弹窗
+      groupDialogVisible: false,
+      groupDialogType: 'add', // add 或 edit
+      groupForm: {
+        id: undefined,
+        groupName: '',
+        tagNames: [],
+        operatorId: this.$store.getters.userId,
+        tenantId: this.$store.getters.tenantId
+      },
+      groupRules: {
+        groupName: [
+          { required: true, message: '请输入分组名称', trigger: 'blur' },
+          { validator: validateGroupName, trigger: 'blur' }
+        ]
+      },
+      
+      // 标签弹窗
+      tagDialogVisible: false,
+      tagDialogType: 'add', // add 或 edit
+      tagForm: {
+        id: undefined,
+        groupId: '',
+        names: [],
+        tagName: '',
+        tagColor: '#1890FF',
+        operatorId: this.$store.getters.userId,
+        tenantId: this.$store.getters.tenantId
+      },
+      tagRules: {
+        groupId: [
+          { required: true, message: '请选择分组', trigger: 'change' }
+        ],
+        names: [
+          { required: true, message: '请输入标签名称', trigger: 'change' },
+          { validator: validateTagName, trigger: 'change' }
+        ],
+        tagName: [
+          { required: true, message: '请输入标签名称', trigger: 'blur' },
+          { validator: validateSingleTagName, trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  computed: {
+    // 过滤后的分组列表
+    filteredGroupList() {
+      if (!this.groupSearchInput) {
+        return this.groupList
+      }
+      return this.groupList.filter(group => 
+        group.groupName.toLowerCase().includes(this.groupSearchInput.toLowerCase())
+      )
+    },
+    
+    // 分页后的标签列表
+    paginationTagList() {
+      return this.tagList
+    }
+  },
+  methods: {
+    // 加载分组列表
+    loadGroupList() {
+      getAllTagGroups().then(res => {
+        if (res.code === '0000000000000000') {
+          this.groupList = res.data
+          
+          // 如果存在分组，默认选中第一个
+          if (this.groupList.length > 0 && !this.activeGroupId) {
+            this.handleGroupSelect(this.groupList[0].id.toString())
+          }
+        }
+      })
+    },
+    
+    // 加载标签列表
+    loadTagList() {
+      if (!this.activeGroupId) {
+        this.tagList = []
+        this.total = 0
+        return
+      }
+      
+      this.tableLoading = true
+      this.tagQueryParams.groupId = this.activeGroupId
+      
+      getTagList(this.tagQueryParams).then(res => {
+        if (res.code === '0000000000000000') {
+          this.tagList = res.data.data
+          this.total = res.data.total
+        } else {
+          this.tagList = []
+          this.total = 0
+        }
+        this.tableLoading = false
+      }).catch(() => {
+        this.tagList = []
+        this.total = 0
+        this.tableLoading = false
+      })
+    },
+    
+    // 处理分组搜索
+    handleGroupSearch() {
+      // 通过计算属性过滤
+    },
+    
+    // 处理标签查询
+    handleTagQuery() {
+      this.tagQueryParams.pageNum = 1
+      this.loadTagList()
+    },
+    
+    // 重置标签查询
+    resetTagQuery() {
+      this.tagQueryParams.tagName = ''
+      this.tagQueryParams.pageNum = 1
+      this.loadTagList()
+    },
+    
+    // 处理分组选择
+    handleGroupSelect(groupId) {
+      this.activeGroupId = Number(groupId)
+      this.activeGroup = this.groupList.find(item => item.id.toString() === groupId)
+      
+      // 重置标签查询参数
+      this.tagQueryParams.tagName = ''
+      this.tagQueryParams.pageNum = 1
+      
+      // 加载该分组下的标签
+      this.loadTagList()
+    },
+    
+    // 处理分页大小变化
+    handleSizeChange(val) {
+      this.tagQueryParams.pageSize = val
+      this.loadTagList()
+    },
+    
+    // 处理当前页变化
+    handleCurrentChange(val) {
+      this.tagQueryParams.pageNum = val
+      this.loadTagList()
+    },
+    
+    // 打开新增分组弹窗
+    handleAddGroup() {
+      this.groupDialogType = 'add'
+      this.groupForm = {
+        id: undefined,
+        groupName: '',
+        tagNames: [],
+        operatorId: this.$store.getters.userId,
+        tenantId: this.$store.getters.tenantId
+      }
+      this.groupDialogVisible = true
+    },
+    
+    // 打开编辑分组弹窗
+    handleEditGroup(group) {
+      this.groupDialogType = 'edit'
+      this.groupForm = {
+        id: group.id,
+        groupName: group.groupName,
+        operatorId: this.$store.getters.userId,
+        tenantId: this.$store.getters.tenantId
+      }
+      this.groupDialogVisible = true
+    },
+    
+    // 提交分组表单
+    submitGroupForm() {
+      this.$refs.groupForm.validate(valid => {
+        if (valid) {
+          const method = this.groupForm.id ? updateTagGroup : addTagGroup
+          const message = this.groupForm.id ? '更新成功' : '新增成功'
+          
+          method(this.groupForm).then(res => {
+            if (res.code === '0000000000000000') {
+              this.$message.success(message)
+              this.groupDialogVisible = false
+              this.loadGroupList()
+            }
+          })
+        }
+      })
+    },
+    
+    // 删除分组
+    handleDeleteGroup(group) {
+      this.$confirm(`确认删除分组"${group.groupName}"吗？该操作将删除该分组下所有标签`, '警告', {
+        type: 'warning'
+      }).then(() => {
+        deleteTagGroup(group.id).then(res => {
+          if (res.code === '0000000000000000') {
+            this.$message.success('删除成功')
+            
+            // 如果删除的是当前激活的分组，重置激活状态
+            if (this.activeGroupId === group.id.toString()) {
+              this.activeGroupId = ''
+              this.activeGroup = null
+              this.tagList = []
+              this.total = 0
+            }
+            
+            this.loadGroupList()
+          }
+        })
+      }).catch(() => {})
+    },
+    
+    // 打开新增标签弹窗
+    handleAddTag() {
+      this.tagDialogType = 'add'
+      this.tagForm = {
+        id: undefined,
+        groupId: this.activeGroupId,
+        names: [],
+        tagColor: '#1890FF',
+        operatorId: this.$store.getters.userId,
+        tenantId: this.$store.getters.tenantId
+      }
+      this.tagDialogVisible = true
+    },
+    
+    // 打开编辑标签弹窗
+    handleEditTag(tag) {
+      this.tagDialogType = 'edit'
+      this.tagForm = {
+        id: tag.id,
+        groupId: tag.groupId,
+        tagName: tag.tagName,
+        tagColor: tag.tagColor || '#1890FF',
+        operatorId: this.$store.getters.userId,
+        tenantId: this.$store.getters.tenantId
+      }
+      this.tagDialogVisible = true
+    },
+    
+    // 提交标签表单
+    submitTagForm() {
+      this.$refs.tagForm.validate(valid => {
+        if (valid) {
+          if (this.tagDialogType === 'edit') {
+            // 编辑标签
+            const data = {
+              id: this.tagForm.id,
+              groupId: this.tagForm.groupId,
+              tagName: this.tagForm.tagName,
+              tagColor: this.tagForm.tagColor,
+              operatorId: this.tagForm.operatorId,
+              tenantId: this.tagForm.tenantId
+            }
+            
+            updateTag(data).then(res => {
+              if (res.code === '0000000000000000') {
+                this.$message.success('更新成功')
+                this.tagDialogVisible = false
+                this.loadTagList()
+              }
+            })
+          } else {
+            // 批量添加标签
+            const promises = this.tagForm.names.map(name => {
+              const data = {
+                groupId: this.tagForm.groupId,
+                tagName: name,
+                tagColor: this.tagForm.tagColor,
+                operatorId: this.tagForm.operatorId,
+                tenantId: this.tagForm.tenantId
+              }
+              return addTag(data)
+            })
+            
+            Promise.all(promises).then(() => {
+              this.$message.success('新增成功')
+              this.tagDialogVisible = false
+              this.loadTagList()
+            })
+          }
+        }
+      })
+    },
+    
+    // 删除标签
+    handleDeleteTag(tag) {
+      this.$confirm(`确认删除标签"${tag.tagName}"吗？`, '警告', {
+        type: 'warning'
+      }).then(() => {
+        deleteTag(tag.id).then(res => {
+          if (res.code === '0000000000000000') {
+            this.$message.success('删除成功')
+            this.loadTagList()
+          }
+        })
+      }).catch(() => {})
+    }
+  },
+  created() {
+    this.loadGroupList()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 20px;
+}
+
+.group-container {
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  height: calc(100vh - 140px);
+  display: flex;
+  flex-direction: column;
+}
+
+.group-header {
+  padding: 15px;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.group-header h3 {
+  margin: 0;
+  font-size: 16px;
+}
+
+.group-search {
+  padding: 10px 15px;
+  border-bottom: 1px solid #eee;
+}
+
+.group-menu {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.group-item {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.group-actions {
+  display: none;
+  position: absolute;
+  right: 10px;
+}
+
+.group-item:hover .group-actions {
+  display: block;
+}
+
+.group-actions i {
+  margin-left: 8px;
+  font-size: 16px;
+  cursor: pointer;
+  color: #606266;
+}
+
+.group-actions i:hover {
+  color: #409EFF;
+}
+
+.group-actions .el-icon-delete:hover {
+  color: #F56C6C;
+}
+
+.tag-container {
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  padding: 15px;
+  min-height: calc(100vh - 140px);
+}
+
+.tag-header {
+  margin-bottom: 15px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-title {
+  display: flex;
+  align-items: center;
+}
+
+.header-title h3 {
+  margin: 0;
+  font-size: 16px;
+  margin-right: 10px;
+}
+
+.tag-search {
+  margin-bottom: 15px;
+}
+
+.search-form {
+  display: flex;
+  align-items: center;
+}
+
+.el-table {
+  margin-bottom: 15px;
+}
+
+.pagination-container {
+  margin-top: 15px;
+  text-align: right;
+}
+
+.delete-btn {
+  color: #F56C6C;
+}
+
+.el-form-item-tip {
+  font-size: 12px;
+  color: #909399;
+  line-height: 1;
+  padding-top: 4px;
+}
+
+/* 确保弹窗样式一致 */
+.el-dialog {
+  border-radius: 4px;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style> 
\ No newline at end of file
diff --git a/pc/src/views/project/building/index.vue b/pc/src/views/project/building/index.vue
new file mode 100644
index 0000000..56cf8c6
--- /dev/null
+++ b/pc/src/views/project/building/index.vue
@@ -0,0 +1,2007 @@
+<template>
+  <div class="app-container">
+    <!-- 统计数据展示区域 -->
+    <!-- <el-row :gutter="20" class="statistics-row">
+      <el-col :span="4">
+        <div class="stat-card">
+          <div class="stat-label">楼宇数量</div>
+          <div class="stat-value">{{ statistics.buildingCount }} 栋</div>
+        </div>
+      </el-col>
+      <el-col :span="4">
+        <div class="stat-card">
+          <div class="stat-label">管理面积</div>
+          <div class="stat-value">{{ statistics.manageArea }} m²</div>
+        </div>
+      </el-col>
+      <el-col :span="4">
+        <div class="stat-card">
+          <div class="stat-label">在租面积</div>
+          <div class="stat-value">{{ statistics.rentedArea }} m²</div>
+        </div>
+      </el-col>
+      <el-col :span="4">
+        <div class="stat-card">
+          <div class="stat-label">在租合同数</div>
+          <div class="stat-value">{{ statistics.rentedContracts }} 份</div>
+        </div>
+      </el-col>
+      <el-col :span="4">
+        <div class="stat-card">
+          <div class="stat-label">待租面积</div>
+          <div class="stat-value">{{ statistics.rentableArea }} m²</div>
+        </div>
+      </el-col>
+      <el-col :span="4">
+        <div class="stat-card">
+          <div class="stat-label">本年营收目标</div>
+          <div class="stat-value">{{ statistics.yearTarget }} 万元</div>
+        </div>
+      </el-col>
+    </el-row> -->
+
+    <!-- 搜索和工具栏 -->
+    <div class="filter-container">
+      <!-- 现有的搜索表单 -->
+    </div>
+
+    <!-- 搜索区域 -->
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>楼宇列表</span>
+        <el-button 
+          style="float: right;" 
+          type="primary" 
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd">新增楼宇</el-button>
+       
+      </div>
+      
+      <!-- 搜索表单 -->
+      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
+        <el-form-item label="所属项目">
+          <el-select v-model="queryParams.projectId" placeholder="请选择所属项目" clearable size="small">
+            <el-option
+              v-for="item in projectOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="楼宇名称">
+          <el-input v-model="queryParams.buildingName" placeholder="请输入楼宇名称" clearable size="small" />
+        </el-form-item>
+        <el-form-item label="楼宇编号">
+          <el-input v-model="queryParams.buildingCode" placeholder="请输入楼宇编号" clearable size="small" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          <el-popover
+          placement="bottom"
+          width="200"
+          trigger="click"
+          v-model="columnFilterVisible"
+          style="float: right; margin: 0 0 0 10px;">
+          <el-checkbox-group v-model="selectedColumns">
+            <el-checkbox label="all" @change="handleCheckAllChange">全部</el-checkbox>
+            <el-divider></el-divider>
+            <el-checkbox label="buildingCode">楼宇编号</el-checkbox>
+            <el-checkbox label="buildingName" disabled>楼宇名称</el-checkbox>
+            <el-checkbox label="projectName" disabled>所属项目</el-checkbox>
+            <el-checkbox label="buildingTags">楼宇标签</el-checkbox>
+            <el-checkbox label="region">所属地区</el-checkbox>
+            <el-checkbox label="address">楼宇地址</el-checkbox>
+            <el-checkbox label="propertyNature">产权性质</el-checkbox>
+            <el-checkbox label="standardHeight">标准层高(m)</el-checkbox>
+            <el-checkbox label="buildingArea">建筑面积(m²)</el-checkbox>
+            <el-checkbox label="propertyArea">产权面积(m²)</el-checkbox>
+            <el-checkbox label="rentableArea">可租面积(m²)</el-checkbox>
+            <el-checkbox label="selfUseArea">自用面积(m²)</el-checkbox>
+            <el-checkbox label="supportingArea">配套面积(m²)</el-checkbox>
+            <el-checkbox label="parkingArea">车位面积(m²)</el-checkbox>
+            <el-checkbox label="manageArea">管理面积(m²)</el-checkbox>
+            <el-checkbox label="totalRooms">房间总数(间)</el-checkbox>
+            <el-checkbox label="rentalRate">出租率(%)</el-checkbox>
+            <el-checkbox label="rentedArea">在租面积(m²)</el-checkbox>
+            <el-checkbox label="rentedContracts">在租合同数</el-checkbox>
+            <!-- <el-checkbox label="yearTarget">本年营收目标(万元)</el-checkbox> -->
+            <el-checkbox label="availableRentArea">待租面积(m²)</el-checkbox>
+            <el-checkbox label="waitingRooms">待租房间数</el-checkbox>
+          </el-checkbox-group>
+          <el-button slot="reference" type="primary" size="mini" icon="el-icon-s-operation">列显示</el-button>
+        </el-popover>
+        </el-form-item>
+      </el-form>
+
+      <!-- 表格区域 -->
+      <el-table v-loading="loading" :data="buildingList" border style="width: 100%">
+        <!-- 固定楼宇名称列 -->
+        <el-table-column
+          prop="buildingName"
+          label="楼宇名称"
+          fixed="left"
+          min-width="150"
+          align="center"
+        />
+        <el-table-column
+          v-for="col in filteredColumns.filter(col => col.prop !== 'buildingName')"
+          :key="col.prop"
+          :label="col.label"
+          :prop="col.prop"
+          :min-width="col.width"
+          align="center">
+          <template slot-scope="scope">
+            <!-- 特殊处理buildingTags列 -->
+            <template v-if="col.prop === 'buildingTags'">
+              <span v-if="scope.row.buildingTags">
+                <el-tag
+                  v-for="tagId in (typeof scope.row.buildingTags === 'string' ? 
+                    scope.row.buildingTags.split(',').filter(id => id && id.trim() !== '') : 
+                    Array.isArray(scope.row.buildingTags) ? 
+                      scope.row.buildingTags.map(id => String(id)) : 
+                      [String(scope.row.buildingTags)])"
+                  :key="tagId"
+                  size="mini"
+                  style="margin-right: 5px">
+                  {{ getTagNameById(tagId) }}
+                </el-tag>
+              </span>
+            </template>
+            <!-- 特殊处理isHot列 -->
+            <template v-else-if="col.prop === 'isHot'">
+              <!-- isHot的特殊渲染逻辑 -->
+            </template>
+            <!-- 其他列使用默认渲染 -->
+            <template v-else>
+              {{ formatColumnValue(scope.row[col.prop], col.prop) }}
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200" fixed="right">
+          <template slot-scope="scope">
+            <!-- <el-button size="mini" type="text" @click="handleDetail(scope.row)">详情</el-button> -->
+            <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
+            <el-button size="mini" type="text" @click="handleFloorManage(scope.row)">楼层管理</el-button>
+            <el-button size="mini" type="text" style="color: #F56C6C" @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页区域 -->
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="queryParams.pageNum"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="queryParams.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        class="pagination">
+      </el-pagination>
+    </el-card>
+
+    <!-- 新增/编辑对话框 -->
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%" @open="onDialogOpen" @close="onDialogClose">
+      <el-tabs v-model="activeTab">
+        <el-tab-pane label="基础配置" name="base">
+          <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+            <!-- 基础信息 -->
+            <div class="form-section-title">基础信息</div>
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="所属项目" prop="projectId">
+                  <el-select v-model="form.projectId" placeholder="请选择所属项目" :disabled="form.id !== undefined">
+                    <el-option 
+                      v-for="item in projectOptions" 
+                      :key="item.id" 
+                      :label="item.name"
+                      :value="item.id">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="楼宇编号" prop="buildingCode">
+                  <el-input v-model="form.buildingCode" placeholder="请输入楼宇编号" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="楼宇名称" prop="buildingName">
+                  <el-input v-model="form.buildingName" placeholder="请输入楼宇名称" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="所属地区" prop="region">
+                  <region-selector v-model="form.region" placeholder="请选择所属地区" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="产权性质" prop="propertyNature">
+                  <el-select v-model="form.propertyNature" placeholder="请选择产权性质">
+                    <el-option label="自持" value="自持" />
+                    <el-option label="承租" value="承租" />
+                    <el-option label="自持+承租" value="自持+承租" />
+                    <el-option label="政府免费使用" value="政府免费使用" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="排序值" prop="sortOrder">
+                  <el-input-number v-model="form.sortOrder" :min="0" placeholder="请输入排序值（非必填）" controls-position="right" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            
+            <el-form-item label="楼宇地址" prop="address">
+              <el-input v-model="form.address" type="textarea" placeholder="请输入楼宇地址" />
+            </el-form-item>
+            
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="不动产证编号" prop="propertyCertNo">
+                  <el-input v-model="form.propertyCertNo" placeholder="请输入不动产证编号（非必填）" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="产权编号" prop="propertyNo">
+                  <el-input v-model="form.propertyNo" placeholder="请输入产权编号（非必填）" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="土地编号" prop="landNo">
+                  <el-input v-model="form.landNo" placeholder="请输入土地编号（非必填）" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <!-- 预留空间保持布局整齐 -->
+              </el-col>
+            </el-row>
+            
+            <!-- 楼宇面积 -->
+            <div class="form-section-title">楼宇面积</div>
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="建筑面积" prop="buildingArea">
+                  <el-input-number v-model="form.buildingArea" :min="0" :precision="2" placeholder="请输入建筑面积" controls-position="right" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="产权面积" prop="propertyArea">
+                  <el-input-number v-model="form.propertyArea" :min="0" :precision="2" placeholder="请输入产权面积" controls-position="right" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="可租面积" prop="rentableArea">
+                  <el-input-number v-model="form.rentableArea" :min="0" :precision="2" placeholder="请输入可租面积（非必填）" controls-position="right" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="自用面积" prop="selfUseArea">
+                  <el-input-number v-model="form.selfUseArea" :min="0" :precision="2" placeholder="请输入自用面积（非必填）" controls-position="right" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="配套面积" prop="supportingArea">
+                  <el-input-number v-model="form.supportingArea" :min="0" :precision="2" placeholder="请输入配套面积（非必填）" controls-position="right" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="车位面积" prop="parkingArea">
+                  <el-input-number v-model="form.parkingArea" :min="0" :precision="2" placeholder="请输入车位面积（非必填）" controls-position="right" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            
+            <!-- 收支账户 -->
+            <div class="form-section-title">默认收支账户</div>
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="选择账户" prop="accountId">
+                  <el-select v-model="form.accountId" placeholder="请选择默认收支账户（必填）" clearable @change="handleAccountChange">
+                    <el-option
+                      v-for="item in accountOptions"
+                      :key="item.id"
+                      :label="item.accountName"
+                      :value="item.id">
+                      <div style="display: flex; justify-content: space-between;">
+                        <span>{{ item.accountName }}</span>
+                        <span style="color: #8492a6; font-size: 13px">{{ item.companyName }}</span>
+                      </div>
+                      <div style="font-size: 12px; color: #909399">{{ item.bankAccountNumber }}</div>
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <!-- 预留空间保持布局整齐 -->
+              </el-col>
+            </el-row>
+            
+            <el-row :gutter="20" v-if="form.accountId">
+              <el-col :span="12">
+                <el-form-item label="收款公司">
+                  <el-input v-model="selectedAccount.companyName" disabled placeholder="收款公司" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="开户银行">
+                  <el-input v-model="selectedAccount.bankName" disabled placeholder="开户银行" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            
+            <el-row :gutter="20" v-if="form.accountId">
+              <el-col :span="12">
+                <el-form-item label="银行账号">
+                  <el-input v-model="selectedAccount.bankAccountNumber" disabled placeholder="银行账号" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <!-- 预留空间保持布局整齐 -->
+              </el-col>
+            </el-row>
+          </el-form>
+        </el-tab-pane>
+        
+        <el-tab-pane label="拓展信息" name="extension">
+          <el-form ref="extensionForm" :model="form" label-width="100px">
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="楼宇标签" prop="buildingTags">
+                  <el-select 
+                    v-model="form.buildingTags" 
+                    multiple 
+                    placeholder="请选择楼宇标签"
+                    :popper-append-to-body="false"
+                    @visible-change="onTagSelectorVisibleChange"
+                  >
+                    <el-option 
+                      v-for="item in tagOptions" 
+                      :key="item.id" 
+                      :label="item.tagName" 
+                      :value="item.id" 
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="总楼层" prop="totalFloors">
+                  <el-input v-model="form.totalFloors" placeholder="例：地上18层"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            
+            <el-form-item label="热门楼宇">
+              <el-switch v-model="form.isHot" />
+            </el-form-item>
+            
+            <el-form-item label="楼宇图片" prop="buildingImage">
+              <el-upload
+                class="avatar-uploader"
+                action="/api/upload"
+                :show-file-list="false"
+                :on-success="handleImageSuccess"
+                :before-upload="beforeImageUpload">
+                <img v-if="form.buildingImage" :src="form.buildingImage" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload>
+            </el-form-item>
+            
+            <el-form-item label="设施支持">
+              <el-checkbox-group v-model="form.facilities">
+                <el-checkbox label="中央空调"></el-checkbox>
+                <el-checkbox label="电梯"></el-checkbox>
+                <el-checkbox label="集中供暖"></el-checkbox>
+                <el-checkbox label="安全监控"></el-checkbox>
+                <el-checkbox label="员工餐厅"></el-checkbox>
+                <el-checkbox label="停车场"></el-checkbox>
+                <el-checkbox label="免费会议室"></el-checkbox>
+                <el-checkbox label="门禁系统"></el-checkbox>
+                <el-checkbox label="高速宽带"></el-checkbox>
+              </el-checkbox-group>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+      </el-tabs>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 楼层管理对话框 -->
+    <el-dialog title="楼层管理" :visible.sync="floorDialogVisible" width="80%" append-to-body>
+      <div class="floor-header">
+        <el-button type="primary" size="mini" @click="handleAddFloor">新增楼层</el-button>
+      </div>
+      <el-table v-loading="floorLoading" :data="floorList" border style="width: 100%">
+        <el-table-column prop="floorNumber" label="楼层编号" />
+        <el-table-column prop="floorName" label="楼层名称" />
+        <el-table-column prop="remark" label="备注" />
+        <el-table-column label="操作" width="150">
+          <template slot-scope="scope">
+            <el-button size="mini" type="text" @click="handleEditFloor(scope.row)">编辑</el-button>
+            <el-button size="mini" type="text" style="color: #F56C6C" @click="handleDeleteFloor(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+
+    <!-- 楼层新增/编辑对话框 -->
+    <el-dialog :title="floorDialogTitle" :visible.sync="floorFormVisible" width="30%">
+      <el-form ref="floorForm" :model="floorForm" :rules="floorRules" label-width="100px">
+        <el-form-item label="楼层编号" prop="floorNumber">
+          <el-input-number v-model="floorForm.floorNumber" :min="-100" :max="100" placeholder="请输入楼层编号" controls-position="right" />
+        </el-form-item>
+        <el-form-item label="楼层名称" prop="floorName">
+          <el-input v-model="floorForm.floorName" placeholder="请输入楼层名称" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="floorForm.remark" type="textarea" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="floorFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitFloorForm">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 详情对话框 -->
+    <el-dialog title="楼宇详情" :visible.sync="detailVisible" width="60%" @open="onDetailDialogOpen">
+      <el-tabs v-model="detailActiveTab">
+        <el-tab-pane label="基础配置" name="base">
+          <el-form ref="detailForm" :model="detail" label-width="120px" class="detail-form">
+            <!-- 基础信息 -->
+            <div class="form-section-title">基础信息</div>
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="所属项目">
+                  <el-input v-model="detail.projectName" disabled />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="楼宇编号">
+                  <el-input v-model="detail.buildingCode" disabled />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="楼宇名称">
+                  <el-input v-model="detail.buildingName" disabled />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="所属地区">
+                  <el-input v-model="detail.region" disabled />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="产权性质">
+                  <el-input v-model="detail.propertyNature" disabled />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="排序值">
+                  <el-input v-model="detail.sortOrder" disabled />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            
+            <el-form-item label="楼宇地址">
+              <el-input v-model="detail.address" type="textarea" disabled />
+            </el-form-item>
+            
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="不动产证编号">
+                  <el-input v-model="detail.propertyCertNo" disabled />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="产权编号">
+                  <el-input v-model="detail.propertyNo" disabled />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="土地编号">
+                  <el-input v-model="detail.landNo" disabled />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <!-- 预留空间保持布局整齐 -->
+              </el-col>
+            </el-row>
+            
+            <!-- 楼宇面积 -->
+            <div class="form-section-title">楼宇面积</div>
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="建筑面积">
+                  <el-input v-model="detail.buildingArea" disabled />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="产权面积">
+                  <el-input v-model="detail.propertyArea" disabled />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="可租面积">
+                  <el-input v-model="detail.rentableArea" disabled />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="自用面积">
+                  <el-input v-model="detail.selfUseArea" disabled />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="配套面积">
+                  <el-input v-model="detail.supportingArea" disabled />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="车位面积">
+                  <el-input v-model="detail.parkingArea" disabled />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            
+            <!-- 收支账户 -->
+            <div class="form-section-title">默认收支账户</div>
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="收款公司">
+                  <el-input v-model="detail.companyName" disabled />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="开户银行">
+                  <el-input v-model="detail.bankName" disabled />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="银行账号">
+                  <el-input v-model="detail.bankAccountNumber" disabled />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <!-- 预留空间保持布局整齐 -->
+              </el-col>
+            </el-row>
+
+            <!-- 统计信息 -->
+            <div class="form-section-title">统计信息</div>
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="房间总数">
+                  <el-input v-model="detail.totalRooms" disabled />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="出租率">
+                  <el-input v-model="detail.rentalRate" disabled />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="在租面积">
+                  <el-input v-model="detail.rentedArea" disabled />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="在租合同数">
+                  <el-input v-model="detail.rentedContracts" disabled />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="待租面积">
+                  <el-input v-model="detail.rentedContracts" disabled />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="待租房间数">
+                  <el-input v-model="detail.waitingRooms" disabled />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </el-tab-pane>
+        
+        <el-tab-pane label="拓展信息" name="extension">
+          <el-form label-width="100px" class="detail-form">
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="楼宇标签">
+                  <el-input v-model="detail.buildingTagsText" disabled />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="总楼层">
+                  <el-input v-model="detail.totalFloors" disabled />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            
+            <el-form-item label="热门楼宇">
+              <el-switch v-model="detail.isHot" disabled />
+            </el-form-item>
+            
+            <el-form-item label="楼宇图片" v-if="detail.buildingImage">
+              <img :src="detail.buildingImage" class="detail-avatar" />
+            </el-form-item>
+            
+            <el-form-item label="设施支持">
+              <div class="facilities-list">
+                <el-tag
+                  v-for="item in detail.facilitiesArray"
+                  :key="item"
+                  size="medium"
+                  effect="plain"
+                  style="margin-right: 10px; margin-bottom: 10px;">
+                  {{ item }}
+                </el-tag>
+              </div>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+      </el-tabs>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="detailVisible = false">关 闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getBuildingList, getBuildingDetail, addBuilding, updateBuilding, deleteBuilding, getBuildingStatistics } from '@/api/building'
+import { getFloorList, addFloor, updateFloor, deleteFloor, getFloorListByBuilding,getAllAccounts } from '@/api/building'
+import { getProjectList,getTagByType } from '@/api/project'
+import { getAccountList } from '@/api/finance'
+import { API_SUCCESS_CODE } from '@/utils/constants'
+import RegionSelector from '@/components/RegionSelector'
+
+export default {
+  name: 'BuildingList',
+  components: {
+    RegionSelector
+  },
+  data() {
+    // 楼宇名称唯一性验证
+    const validateBuildingName = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error('请输入楼宇名称'))
+        return
+      }
+      // 如果是编辑状态且名称没有改变，则通过验证
+      if (this.form.id && this.originalBuildingName === value) {
+        callback()
+        return
+      }
+      // 模拟后端验证，实际应调用API检查
+      const existingNames = this.buildingList.map(item => item.buildingName)
+      if (existingNames.includes(value)) {
+        callback(new Error('楼宇名称已存在，请更换'))
+      } else {
+        callback()
+      }
+    }
+    
+    return {
+      // 遮罩层
+      loading: false,
+      // 总条数
+      total: 0,
+      // 楼宇列表
+      buildingList: [],
+      // 楼层列表
+      floorList: [],
+      // 弹出层标题
+      dialogTitle: '',
+      // 是否显示弹出层
+      dialogVisible: false,
+      // 是否显示楼层管理弹出层
+      floorDialogVisible: false,
+      // 是否显示楼层表单弹出层
+      floorFormVisible: false,
+      // 楼层表单弹出层标题
+      floorDialogTitle: '',
+      // 是否显示详情弹出层
+      detailVisible: false,
+      // 详情数据
+      detail: {},
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        projectId: undefined,
+        buildingName: undefined,
+        buildingCode: undefined,
+        region: undefined
+      },
+      // 表单参数
+      form: {},
+      // 楼层表单参数
+      floorForm: {
+        buildingId: '',
+        floorNumber: null,
+        floorName: '',
+        remark: ''
+      },
+      // 项目选项
+      projectOptions: [],
+      // 账户选项
+      accountOptions: [],
+      tagOptions: [], // 楼宇标签选项
+      // 选中的账户信息
+      selectedAccount: {
+        companyName: '',
+        bankName: '',
+        bankAccountNumber: ''
+      },
+      // 表单校验
+      rules: {
+        projectId: [
+          { required: true, message: '请选择所属项目', trigger: 'change' }
+        ],
+        buildingCode: [
+          { required: true, message: '请输入楼宇编号', trigger: 'blur' },
+          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
+        ],
+        buildingName: [
+          { required: true, message: '请输入楼宇名称', trigger: 'blur' },
+          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' },
+          { validator: validateBuildingName, trigger: 'blur' }
+        ],
+        region: [
+          { required: false, message: '请输入所属地区', trigger: 'blur' }
+        ],
+        address: [
+          { required: false, message: '请输入楼宇地址', trigger: 'blur' },
+          { max: 200, message: '长度不能超过200个字符', trigger: 'blur' }
+        ],
+        propertyNature: [
+          { required: true, message: '请选择产权性质', trigger: 'change' }
+        ],
+        propertyCertNo: [
+          { pattern: /^[A-Za-z0-9-]+$/, message: '不动产证编号只能包含字母、数字和横线', trigger: 'blur' }
+        ],
+        propertyNo: [
+          { pattern: /^[A-Za-z0-9-]+$/, message: '产权编号只能包含字母、数字和横线', trigger: 'blur' }
+        ],
+        landNo: [
+          { pattern: /^[A-Za-z0-9-]+$/, message: '土地编号只能包含字母、数字和横线', trigger: 'blur' }
+        ],
+        buildingArea: [
+          { required: true, message: '请输入建筑面积', trigger: 'blur' },
+          { type: 'number', message: '建筑面积必须为数字', trigger: 'blur' }
+        ],
+        propertyArea: [
+          { required: true, message: '请输入产权面积', trigger: 'blur' },
+          { type: 'number', message: '产权面积必须为数字', trigger: 'blur' }
+        ],
+        rentableArea: [
+          { type: 'number', message: '可租面积必须为数字', trigger: 'blur' }
+        ],
+        selfUseArea: [
+          { type: 'number', message: '自用面积必须为数字', trigger: 'blur' }
+        ],
+        supportingArea: [
+          { type: 'number', message: '配套面积必须为数字', trigger: 'blur' }
+        ],
+        parkingArea: [
+          { type: 'number', message: '车位面积必须为数字', trigger: 'blur' }
+        ],
+        accountId: [
+          { required: true, message: '请选择默认收支账户', trigger: 'blur' },
+        ]
+      },
+      // 楼层表单校验
+      floorRules: {
+        floorNumber: [
+          { required: true, message: '请输入楼层编号', trigger: 'blur' },
+          { type: 'number', message: '楼层编号必须为数字', trigger: 'blur' }
+        ],
+        floorName: [
+          { required: true, message: '请输入楼层名称', trigger: 'blur' },
+          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
+        ],
+        remark: [
+          { max: 200, message: '长度不能超过200个字符', trigger: 'blur' }
+        ]
+      },
+      // 统计数据
+      statistics: {
+        buildingCount: 15,
+        manageArea: '37,385.14',
+        rentedArea: '12,487.68',
+        rentedContracts: 58,
+        rentableArea: '24,897.46',
+        yearTarget: '200'
+      },
+
+      // 列筛选相关
+      columnFilterVisible: false,
+      selectedColumns: ['buildingName', 'projectName', 'buildingCode', 'buildingTags', 
+        'region', 'address', 'propertyNature', 'buildingArea', 'rentableArea'],
+      
+      // 所有可用列的定义
+      allColumns: [
+        { prop: 'buildingCode', label: '楼宇编号', width: '120' },
+        { prop: 'buildingName', label: '楼宇名称', width: '150' },
+        { prop: 'projectName', label: '所属项目', width: '150' },
+        { prop: 'buildingTags', label: '楼宇标签', width: '120' },
+        { prop: 'region', label: '所属地区', width: '120' },
+        { prop: 'address', label: '楼宇地址', width: '200' },
+        { prop: 'propertyNature', label: '产权性质', width: '120' },
+        { prop: 'standardHeight', label: '标准层高(m)', width: '120' },
+        { prop: 'buildingArea', label: '建筑面积(m²)', width: '120' },
+        { prop: 'propertyArea', label: '产权面积(m²)', width: '120' },
+        { prop: 'rentableArea', label: '可租面积(m²)', width: '120' },
+        { prop: 'selfUseArea', label: '自用面积(m²)', width: '120' },
+        { prop: 'supportingArea', label: '配套面积(m²)', width: '120' },
+        { prop: 'parkingArea', label: '车位面积(m²)', width: '120' },
+        { prop: 'manageArea', label: '管理面积(m²)', width: '120' },
+        { prop: 'totalRooms', label: '房间总数(间)', width: '120' },
+        { prop: 'rentalRate', label: '出租率(%)', width: '120' },
+        { prop: 'rentedArea', label: '在租面积(m²)', width: '120' },
+        { prop: 'rentedContracts', label: '在租合同数', width: '120' },
+        // { prop: 'yearTarget', label: '本年营收目标(万元)', width: '150' },
+        { prop: 'availableRentArea', label: '待租面积(m²)', width: '120' },
+        { prop: 'waitingRooms', label: '待租房间数', width: '120' }
+      ],
+      // 保存原始楼宇名称，用于编辑时的对比
+      originalBuildingName: '',
+      // 楼层管理相关
+      currentBuilding: null,
+      floorManageVisible: false,
+      floorLoading: false,
+      activeTab: 'base',
+      detailActiveTab: 'base'
+    }
+  },
+  computed: {
+    filteredColumns() {
+      // 过滤出已选择的列，但排除 'all' 选项
+      return this.allColumns.filter(col => 
+        this.selectedColumns.includes(col.prop) && col.prop !== 'all'
+      )
+    },
+    isAllSelected() {
+      if (!this.allColumns.length) return false
+      // 判断是否所有列都被选中
+      return this.allColumns.every(col => this.selectedColumns.includes(col.prop))
+    },
+    // 标签ID到名称的映射
+    tagIdToName() {
+      const map = {}
+      this.tagOptions.forEach(tag => {
+        map[tag.id] = tag.tagName
+      })
+      return map
+    }
+  },
+  watch: {
+    selectedColumns: {
+      handler(newVal) {
+        // 确保必选列始终存在
+        if (!newVal.includes('buildingName')) {
+          this.selectedColumns.push('buildingName')
+        }
+        if (!newVal.includes('projectName')) {
+          this.selectedColumns.push('projectName')
+        }
+        
+        // 获取所有可选列（除了必选列）
+        const selectableColumns = this.allColumns
+          .filter(col => col.prop !== 'buildingName' && col.prop !== 'projectName')
+          .map(col => col.prop)
+        
+        // 检查所有可选列是否都被选中
+        const allSelected = selectableColumns.every(prop => newVal.includes(prop))
+        
+        // 更新"全部"选项的状态
+        if (allSelected && !newVal.includes('all')) {
+          this.selectedColumns.push('all')
+        } else if (!allSelected && newVal.includes('all')) {
+          // 从选择中移除"全部"选项
+          const index = this.selectedColumns.indexOf('all')
+          if (index > -1) {
+            this.selectedColumns.splice(index, 1)
+          }
+        }
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.getList()
+    this.getProjectOptions()
+    this.getAccountOptions()
+    this.getTagOptions() // 获取楼宇标签选项
+    this.fetchStatistics()
+  },
+  methods: {
+    /** 查询楼宇列表 */
+    getList() {
+      this.loading = true
+      const params = {
+        pageNum: this.queryParams.pageNum,
+        pageSize: this.queryParams.pageSize,
+        projectId: this.queryParams.projectId,
+        buildingName: this.queryParams.buildingName,
+        buildingCode: this.queryParams.buildingCode,
+        region: this.queryParams.region,
+        propertyNature: this.queryParams.propertyNature,
+        buildingTags: this.queryParams.buildingTags
+      }
+      
+      getBuildingList(params).then(res => {
+        if (res.code === API_SUCCESS_CODE) {
+          // 添加调试代码
+          console.log('API返回的原始楼宇数据:', JSON.stringify(res.data))
+          
+          // 处理后端返回的数据，确保字段名映射正确
+          const listData = res.data.rows || res.data.list || []
+          console.log('列表数据项示例:', listData.length > 0 ? listData[0] : '无数据')
+          
+          this.buildingList = listData.map(item => {
+            // 创建一个新的对象，避免直接修改原始数据
+            let newItem = {...item}
+            
+            // 处理拓展信息字段
+            if (newItem.buildingTags !== undefined) {
+              // 确保buildingTags始终是字符串格式
+              if (Array.isArray(newItem.buildingTags)) {
+                newItem.buildingTags = newItem.buildingTags.join(',')
+              } else if (typeof newItem.buildingTags === 'object' && newItem.buildingTags !== null) {
+                newItem.buildingTags = Object.values(newItem.buildingTags).join(',')
+              } else if (newItem.buildingTags === null) {
+                newItem.buildingTags = ''
+              }
+            } else {
+              newItem.buildingTags = ''
+            }
+            
+            // 转换热门楼宇标记
+            if (newItem.isHot !== undefined) {
+              newItem.isHot = newItem.isHot === '1' || newItem.isHot === true
+            }
+            
+            // 处理图片URL
+            if (newItem.imageUrl !== undefined) {
+              newItem.buildingImage = newItem.imageUrl
+            }
+            
+            // 确保所有数值型字段都有默认值
+            const numericFields = ['buildingArea', 'propertyArea', 'rentableArea', 'selfUseArea', 
+                                  'supportingArea', 'parkingArea', 'standardHeight', 'manageArea',
+                                  'totalRooms', 'rentalRate', 'rentedArea', 'rentedContracts',
+                                  'availableRentArea', 'waitingRooms']
+            numericFields.forEach(field => {
+              if (newItem[field] === undefined || newItem[field] === null) {
+                newItem[field] = 0
+              }
+            })
+            
+            // 确保所有文本字段至少有空字符串
+            const textFields = ['projectName', 'region', 'address', 'propertyNature']
+            textFields.forEach(field => {
+              if (newItem[field] === undefined || newItem[field] === null) {
+                newItem[field] = ''
+              }
+            })
+            
+            return newItem
+          })
+          this.total = res.data.total
+        } else {
+          this.$message.error(res.msg || '获取楼宇列表失败')
+        }
+        this.loading = false
+      }).catch(err => {
+        console.error("获取楼宇列表错误:", err)
+        this.loading = false
+        this.$message.error('获取楼宇列表失败')
+      })
+    },
+    /** 获取项目选项 */
+    getProjectOptions() {
+      // 调用项目列表接口获取项目选项
+      getProjectList({ pageSize: 100 }).then(res => {
+        if (res.code === API_SUCCESS_CODE) {
+          this.projectOptions = res.data.list.map(item => {
+            return { id: item.id, name: item.projectName }
+          })
+        }
+      })
+    },
+    /** 获取账户选项 */
+    getAccountOptions() {
+      getAllAccounts().then(res => {
+        if (res.code === API_SUCCESS_CODE) {
+          this.accountOptions = res.data
+        }
+      }).catch(() => {
+        this.accountOptions = [
+          { id: '1', accountName: '示例账户1', company: '示例收款公司1', bankName: '中国建设银行', bankAccountNumber: '6214000012345678' },
+          { id: '2', accountName: '示例账户2', company: '示例收款公司2', bankName: '中国工商银行', bankAccountNumber: '6217000087654321' }
+        ]
+      })
+    },
+    /** 查询楼层列表 */
+    getFloorList(buildingId) {
+      if (!buildingId) {
+        this.$message.error('楼宇ID不能为空')
+        return
+      }
+      
+      this.floorLoading = true
+      getFloorListByBuilding(buildingId).then(res => {
+        if (res.code === API_SUCCESS_CODE) {
+          this.floorList = res.data
+        } else {
+          this.$message.error(res.msg || '获取楼层列表失败')
+        }
+        this.floorLoading = false
+      }).catch(() => {
+        this.floorLoading = false
+        this.$message.error('获取楼层列表失败')
+      })
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        projectId: undefined,
+        buildingName: undefined,
+        buildingCode: undefined,
+        region: undefined
+      }
+      this.getList()
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.resetForm()
+      this.dialogTitle = '新增楼宇'
+      this.dialogVisible = true
+      this.form = {
+        projectId: undefined,
+        buildingCode: '',
+        buildingName: '',
+        region: '',
+        address: '',
+        propertyNature: '自持',
+        propertyCertNo: '',
+        propertyNo: '',
+        landNo: '',
+        buildingArea: undefined,
+        propertyArea: undefined,
+        rentableArea: undefined,
+        selfUseArea: undefined,
+        supportingArea: undefined,
+        parkingArea: undefined,
+        sortOrder: 0,
+        // 拓展信息
+        buildingTags: [],
+        totalFloors: '',
+        isHot: false,
+        buildingImage: '',
+        facilities: []
+      }
+    },
+    /** 修改按钮操作 */
+    handleEdit(row) {
+      this.dialogTitle = '编辑楼宇'
+      const id = row.id
+      getBuildingDetail(id).then(res => {
+        if (res.code === API_SUCCESS_CODE) {
+          // 保存原始楼宇名称用于验证
+          this.originalBuildingName = res.data.buildingName
+          // 将API返回的数据转换为数值类型
+          const data = res.data
+          if (data.buildingArea) data.buildingArea = Number(data.buildingArea)
+          if (data.propertyArea) data.propertyArea = Number(data.propertyArea)
+          if (data.rentableArea) data.rentableArea = Number(data.rentableArea)
+          if (data.selfUseArea) data.selfUseArea = Number(data.selfUseArea)
+          if (data.supportingArea) data.supportingArea = Number(data.supportingArea)
+          if (data.parkingArea) data.parkingArea = Number(data.parkingArea)
+          if (data.sortOrder) data.sortOrder = Number(data.sortOrder)
+          
+          // 确保totalFloors是字符串类型
+          if (data.totalFloors && typeof data.totalFloors !== 'string') {
+            data.totalFloors = String(data.totalFloors)
+          }
+          
+          // 处理扩展信息字段 - 处理后端命名与前端命名的映射
+          // 处理楼宇标签
+          try {
+            if (data.buildingTags) {
+              if (typeof data.buildingTags === 'string') {
+                if (data.buildingTags.trim() === '') {
+                  data.buildingTags = []
+                } else {
+                  // 尝试解析JSON字符串
+                  try {
+                    let parsed = JSON.parse(data.buildingTags)
+                    data.buildingTags = Array.isArray(parsed) ? parsed.map(id => String(id)) : [String(parsed)]
+                  } catch (e) {
+                    // 如果不是JSON格式，按逗号分隔处理
+                    data.buildingTags = data.buildingTags.split(',').filter(id => id && id.trim() !== '')
+                  }
+                }
+              } else if (Array.isArray(data.buildingTags)) {
+                // 已经是数组，确保每项都是字符串
+                data.buildingTags = data.buildingTags.map(id => String(id)).filter(id => id)
+              } else if (data.buildingTags === null || data.buildingTags === undefined) {
+                data.buildingTags = []
+              } else if (typeof data.buildingTags === 'object') {
+                // 如果是对象，尝试提取值
+                data.buildingTags = Object.values(data.buildingTags).map(id => String(id)).filter(id => id)
+              } else {
+                // 如果是其他类型（如数字），转成字符串数组
+                data.buildingTags = [String(data.buildingTags)]
+              }
+            } else {
+              data.buildingTags = []
+            }
+            console.log('处理后的标签数据:', data.buildingTags)
+          } catch (err) {
+            console.error('处理楼宇标签出错:', err)
+            data.buildingTags = []
+          }
+          
+          // 处理设施
+          if (!data.facilities) data.facilities = []
+          else if (typeof data.facilities === 'string') {
+            try {
+              data.facilities = JSON.parse(data.facilities)
+            } catch (e) {
+              data.facilities = data.facilities.split(',')
+            }
+          }
+          
+          // 处理热门楼宇
+          if (data.isHot !== undefined) {
+            data.isHot = data.isHot === '1' || data.isHot === true
+          } else {
+            data.isHot = data.isHot === '1' || data.isHot === true
+          }
+          
+          // 处理楼宇图片
+          if (data.imageUrl) {
+            data.buildingImage = data.imageUrl
+          }
+          
+          this.form = data
+          this.dialogVisible = true
+          // 重置表单验证
+          this.$nextTick(() => {
+            if (this.$refs.form) {
+              this.$refs.form.clearValidate()
+            }
+          })
+        }
+      })
+    },
+    /** 楼层管理按钮操作 */
+    handleFloorManage(row) {
+      if (!row || !row.id) {
+        this.$message.error('楼宇信息不完整')
+        return
+      }
+      
+      this.currentBuilding = row
+      this.floorDialogVisible = true
+      this.getFloorList(row.id)
+    },
+    /** 新增楼层按钮操作 */
+    handleAddFloor() {
+      if (!this.currentBuilding || !this.currentBuilding.id) {
+        this.$message.error('请先选择楼宇')
+        return
+      }
+      
+      this.floorDialogTitle = '新增楼层'
+      this.floorForm = {
+        buildingId: this.currentBuilding.id,
+        floorNumber: null,
+        floorName: '',
+        remark: ''
+      }
+      this.floorFormVisible = true
+    },
+    /** 修改楼层按钮操作 */
+    handleEditFloor(row) {
+      if (!row || !row.id) {
+        this.$message.error('楼层信息不完整')
+        return
+      }
+      
+      this.floorDialogTitle = '编辑楼层'
+      this.floorForm = {
+        id: row.id,
+        floorNumber: row.floorNumber,
+        floorName: row.floorName,
+        remark: row.remark
+      }
+      this.floorFormVisible = true
+    },
+    /** 删除楼层按钮操作 */
+    handleDeleteFloor(row) {
+      if (!row || !row.id) {
+        this.$message.error('楼层信息不完整')
+        return
+      }
+      
+      this.$confirm('是否确认删除该楼层?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteFloor(row.id).then(res => {
+          if (res.code === API_SUCCESS_CODE) {
+            this.$message.success('删除成功')
+            this.getFloorList(this.currentBuilding.id)
+          } else {
+            this.$message.error(res.msg || '删除失败')
+          }
+        }).catch(error => {
+          if (error.response && error.response.data && error.response.data.msg) {
+            this.$message.error(error.response.data.msg)
+          } else {
+            this.$message.error('删除失败')
+          }
+        })
+      }).catch(() => {})
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$confirm('是否确认删除该楼宇?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteBuilding(row.id).then(res => {
+          if (res.code === API_SUCCESS_CODE) {
+            this.$message.success('删除成功')
+            this.getList()
+          } else {
+            this.$message.error(res.msg || '删除失败')
+          }
+        }).catch(error => {
+          this.$message.error('删除失败：' + (error.message || '未知错误'))
+        })
+      }).catch(() => {})
+    },
+    /** 对话框打开时的处理 */
+    onDialogOpen() {
+      // 确保标签选项已经加载
+      if (this.tagOptions.length === 0) {
+        this.getTagOptions()
+      }
+      
+      console.log('编辑表单当前标签数据:', this.form.buildingTags)
+      console.log('可用标签选项:', this.tagOptions)
+      
+      // 等待DOM更新后重置验证
+      this.$nextTick(() => {
+        if (this.$refs.form) {
+          // 重置表单验证
+          this.$refs.form.clearValidate()
+          
+          // 确保数值字段为数字类型
+          const numericFields = ['sortOrder', 'buildingArea', 'propertyArea', 'rentableArea', 
+                                'selfUseArea', 'supportingArea', 'parkingArea']
+          numericFields.forEach(field => {
+            if (this.form[field] !== undefined) {
+              // 确保数据类型是数字
+              this.form[field] = Number(this.form[field])
+            }
+          })
+        }
+      })
+    },
+    
+    /** 表单提交 */
+    submitForm() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          // 处理数据
+          const formData = JSON.parse(JSON.stringify(this.form))
+          
+          // 处理数组和对象类型数据
+          console.log('提交前的标签数据:', formData.buildingTags)
+          
+          if (Array.isArray(formData.buildingTags)) {
+            // 确保每个ID都是字符串类型
+            formData.buildingTags = formData.buildingTags.map(id => String(id)).join(',')
+          } else if (formData.buildingTags === undefined || formData.buildingTags === null) {
+            formData.buildingTags = ""
+          } else if (typeof formData.buildingTags === 'number' || typeof formData.buildingTags === 'boolean') {
+            // 如果是数字或布尔值，转成字符串
+            formData.buildingTags = String(formData.buildingTags)
+          }
+          
+          if (Array.isArray(formData.facilities)) {
+            formData.facilities = formData.facilities.join(',')
+          }
+          
+          // 处理布尔值
+          formData.isHot = formData.isHot ? '1' : '0'
+          
+          // 控制台打印提交数据，用于调试
+          console.log("提交的表单数据:", formData)
+          
+          // 判断是新增还是修改
+          const action = formData.id ? updateBuilding : addBuilding
+          const successMsg = formData.id ? '修改成功' : '新增成功'
+          
+          action(formData).then(res => {
+            console.log("API响应:", res)
+            if (res.code === API_SUCCESS_CODE) {
+              this.$message.success(successMsg)
+              this.dialogVisible = false
+              this.getList()
+            } else {
+              this.$message.error(res.msg || '操作失败')
+            }
+          }).catch(err => {
+            console.error("API错误:", err)
+            this.$message.error('操作失败：' + err.message)
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    /** 楼层表单提交 */
+    submitFloorForm() {
+      // 确保楼层编号是数字类型
+      if (this.floorForm.floorNumber !== undefined) {
+        this.floorForm.floorNumber = Number(this.floorForm.floorNumber)
+      }
+      
+      // 进行表单验证
+      this.$nextTick(() => {
+        this.$refs['floorForm'].validate(valid => {
+          if (valid) {
+            // 如果表单有ID则为编辑操作，否则为新增操作
+            const isEdit = this.floorForm.id !== undefined
+            const action = isEdit ? updateFloor : addFloor
+            
+            action(this.floorForm).then(res => {
+              if (res.code === API_SUCCESS_CODE) {
+                this.$message.success(isEdit ? '编辑成功' : '新增成功')
+                this.floorFormVisible = false
+                this.getFloorList(this.currentBuilding.id)
+              } else {
+                this.$message.error(res.msg || (isEdit ? '编辑失败' : '新增失败'))
+              }
+            }).catch(error => {
+              if (error.response && error.response.data && error.response.data.msg) {
+                this.$message.error(error.response.data.msg)
+              } else {
+                this.$message.error(isEdit ? '编辑失败' : '新增失败')
+              }
+            })
+          }
+        })
+      })
+    },
+    /** 分页大小改变 */
+    handleSizeChange(val) {
+      this.queryParams.pageSize = val
+      this.getList()
+    },
+    /** 分页页码改变 */
+    handleCurrentChange(val) {
+      this.queryParams.pageNum = val
+      this.getList()
+    },
+    /** 获取统计数据 */
+    async fetchStatistics() {
+      try {
+        // 获取所有楼宇的统计数据
+        const res = await getBuildingList({
+          pageSize: 1,
+          pageNum: 1
+        })
+        
+        if (res.code === API_SUCCESS_CODE) {
+          // 计算总统计数据
+          const totalStats = {
+            buildingCount: res.data.total || 0,
+            manageArea: 0,
+            rentedArea: 0,
+            rentedContracts: 0,
+            rentableArea: 0,
+            yearTarget: 0
+          }
+          
+          // 更新统计数据显示
+          this.statistics = {
+            buildingCount: totalStats.buildingCount.toString(),
+            manageArea: totalStats.manageArea.toFixed(2),
+            rentedArea: totalStats.rentedArea.toFixed(2),
+            rentedContracts: totalStats.rentedContracts.toString(),
+            rentableArea: totalStats.rentableArea.toFixed(2),
+            yearTarget: totalStats.yearTarget.toString()
+          }
+        } else {
+          this.$message.error(res.msg || '获取统计数据失败')
+          // 使用默认数据
+          this.setDefaultStatistics()
+        }
+      } catch (error) {
+        console.error('获取统计数据失败:', error)
+        this.setDefaultStatistics()
+      }
+    },
+    
+    setDefaultStatistics() {
+      // 使用默认数据
+      this.statistics = {
+        buildingCount: '0',
+        manageArea: '0.00',
+        rentedArea: '0.00',
+        rentedContracts: '0',
+        rentableArea: '0.00',
+        yearTarget: '0'
+      }
+    },
+    /** 详情按钮操作 */
+    handleDetail(row) {
+      getBuildingDetail(row.id).then(res => {
+        if (res.code === API_SUCCESS_CODE) {
+          const buildingData = res.data
+          
+          // 获取楼宇统计信息
+          getBuildingStatistics(row.id).then(statsRes => {
+            if (statsRes.code === API_SUCCESS_CODE) {
+              // 合并基本信息和统计信息
+              const detailData = {
+                ...buildingData,
+                ...statsRes.data
+              }
+              
+              // 处理拓展信息字段 - 处理后端命名与前端命名的映射
+              // 处理楼宇标签
+              if (detailData.buildingTags) {
+                detailData.buildingTags = detailData.buildingTags
+              }
+              
+              // 转换buildingTags为数组并创建文本展示
+              if (!detailData.buildingTags) {
+                detailData.buildingTags = []
+                detailData.buildingTagsText = ''
+              } else if (typeof detailData.buildingTags === 'string') {
+                try {
+                  detailData.buildingTags = JSON.parse(detailData.buildingTags)
+                } catch (e) {
+                  detailData.buildingTags = detailData.buildingTags.split(',')
+                }
+                detailData.buildingTagsText = detailData.buildingTags.join('、')
+              } else if (Array.isArray(detailData.buildingTags)) {
+                detailData.buildingTagsText = detailData.buildingTags.join('、')
+              }
+              
+              // 处理设施字段
+              if (!detailData.facilities) {
+                detailData.facilities = []
+                detailData.facilitiesArray = []
+              } else if (typeof detailData.facilities === 'string') {
+                try {
+                  detailData.facilitiesArray = JSON.parse(detailData.facilities)
+                } catch (e) {
+                  detailData.facilitiesArray = detailData.facilities.split(',')
+                }
+              } else if (Array.isArray(detailData.facilities)) {
+                detailData.facilitiesArray = detailData.facilities
+              }
+              
+              // 处理热门楼宇状态
+              if (detailData.isHot !== undefined) {
+                detailData.isHot = detailData.isHot === '1' || detailData.isHot === true
+              } else {
+                detailData.isHot = detailData.isHot === '1' || detailData.isHot === true
+              }
+              
+              // 处理楼宇图片
+              if (detailData.imageUrl) {
+                detailData.buildingImage = detailData.imageUrl
+              }
+              
+              console.log("详情数据:", detailData)
+              
+              this.detail = detailData
+              this.detailVisible = true
+              this.detailActiveTab = 'base'
+            } else {
+              this.$message.error(statsRes.msg || '获取楼宇统计信息失败')
+            }
+          }).catch(err => {
+            console.error("获取楼宇统计信息错误:", err)
+            this.$message.error('获取楼宇统计信息失败')
+          })
+        } else {
+          this.$message.error(res.msg || '获取楼宇详情失败')
+        }
+      }).catch(err => {
+        console.error("获取楼宇详情错误:", err)
+        this.$message.error('获取楼宇详情失败')
+      })
+    },
+    
+    /** 禁用表单编辑 */
+    disableFormEditing() {
+      if (this.$refs.form) {
+        const formItems = this.$refs.form.$el.querySelectorAll('.el-form-item')
+        formItems.forEach(item => {
+          const input = item.querySelector('.el-input__inner')
+          if (input) {
+            input.setAttribute('disabled', 'disabled')
+          }
+          const textarea = item.querySelector('.el-textarea__inner')
+          if (textarea) {
+            textarea.setAttribute('disabled', 'disabled')
+          }
+          const select = item.querySelector('.el-select')
+          if (select) {
+            select.setAttribute('disabled', 'disabled')
+          }
+          
+          // 完全禁用数字输入框控件
+          const inputNumber = item.querySelector('.el-input-number')
+          if (inputNumber) {
+            // 设置整个控件为禁用状态
+            inputNumber.classList.add('is-disabled')
+            
+            // 禁用内部输入框
+            const innerInput = inputNumber.querySelector('.el-input__inner')
+            if (innerInput) {
+              innerInput.setAttribute('disabled', 'disabled')
+            }
+            
+            // 禁用加减按钮
+            const decreaseBtn = inputNumber.querySelector('.el-input-number__decrease')
+            const increaseBtn = inputNumber.querySelector('.el-input-number__increase')
+            
+            if (decreaseBtn) {
+              decreaseBtn.setAttribute('disabled', 'disabled')
+              decreaseBtn.style.pointerEvents = 'none'
+            }
+            
+            if (increaseBtn) {
+              increaseBtn.setAttribute('disabled', 'disabled')
+              increaseBtn.style.pointerEvents = 'none'
+            }
+          }
+        })
+      }
+    },
+    
+    /** 启用表单编辑 */
+    enableFormEditing() {
+      if (this.$refs.form) {
+        const formItems = this.$refs.form.$el.querySelectorAll('.el-form-item')
+        formItems.forEach(item => {
+          const input = item.querySelector('.el-input__inner')
+          if (input) {
+            input.removeAttribute('disabled')
+          }
+          const textarea = item.querySelector('.el-textarea__inner')
+          if (textarea) {
+            textarea.removeAttribute('disabled')
+          }
+          const select = item.querySelector('.el-select')
+          if (select) {
+            select.removeAttribute('disabled')
+          }
+          
+          // 完全启用数字输入框控件
+          const inputNumber = item.querySelector('.el-input-number')
+          if (inputNumber) {
+            // 移除禁用状态
+            inputNumber.classList.remove('is-disabled')
+            
+            // 启用内部输入框
+            const innerInput = inputNumber.querySelector('.el-input__inner')
+            if (innerInput) {
+              innerInput.removeAttribute('disabled')
+            }
+            
+            // 启用加减按钮
+            const decreaseBtn = inputNumber.querySelector('.el-input-number__decrease')
+            const increaseBtn = inputNumber.querySelector('.el-input-number__increase')
+            
+            if (decreaseBtn) {
+              decreaseBtn.removeAttribute('disabled')
+              decreaseBtn.style.pointerEvents = ''
+            }
+            
+            if (increaseBtn) {
+              increaseBtn.removeAttribute('disabled')
+              increaseBtn.style.pointerEvents = ''
+            }
+          }
+        })
+      }
+    },
+    /** 全选/取消全选处理 */
+    handleCheckAllChange(checked) {
+      // 获取所有可选列的 prop 值（除了 "all"、"buildingName"和"projectName"）
+      const selectableColumns = this.allColumns
+        .filter(col => col.prop !== 'buildingName' && col.prop !== 'projectName')
+        .map(col => col.prop)
+      
+      if (checked) {
+        // 如果选中"全部"，则选择所有列
+        this.selectedColumns = ['all', 'buildingName', 'projectName', ...selectableColumns]
+      } else {
+        // 如果取消选中"全部"，则只保留必选列
+        this.selectedColumns = ['buildingName', 'projectName']
+      }
+    },
+    
+    // 检查是否所有列都被选中
+    checkAllSelected() {
+      // 获取所有可选列的 prop 值（除了不可编辑的列）
+      const selectableColumns = this.allColumns
+        .filter(col => col.prop !== 'buildingName' && col.prop !== 'projectName')
+        .map(col => col.prop)
+      
+      // 检查所有可选列是否都被选中
+      const allSelected = selectableColumns.every(prop => this.selectedColumns.includes(prop))
+      
+      // 更新"全部"选项的状态
+      if (allSelected && !this.selectedColumns.includes('all')) {
+        this.selectedColumns.push('all')
+      } else if (!allSelected && this.selectedColumns.includes('all')) {
+        this.selectedColumns = this.selectedColumns.filter(col => col !== 'all')
+      }
+    },
+    /** 账户选择处理 */
+    handleAccountChange() {
+      // 获取选中的账户信息
+      const selectedAccount = this.accountOptions.find(item => item.id === this.form.accountId)
+      if (selectedAccount) {
+        this.selectedAccount = {
+          companyName: selectedAccount.companyName,
+          bankName: selectedAccount.bankName,
+          bankAccountNumber: selectedAccount.bankAccountNumber
+        }
+      }
+    },
+    /** 详情对话框打开时的处理 */
+    onDetailDialogOpen() {
+      // 等待DOM更新后重置验证
+      this.$nextTick(() => {
+        if (this.$refs.detailForm) {
+          // 重置表单验证
+          this.$refs.detailForm.clearValidate()
+          
+          // 确保数值字段为数字类型
+          const numericFields = ['rentedArea', 'rentedContracts', 'rentedContracts', 'waitingRooms']
+          numericFields.forEach(field => {
+            if (this.detail[field] !== undefined) {
+              this.detail[field] = Number(this.detail[field])
+            }
+          })
+        }
+      })
+    },
+    onDialogClose() {
+      // 重置表单验证
+      if (this.$refs.form) {
+        this.$refs.form.clearValidate()
+      }
+    },
+    handleImageSuccess(response, file) {
+      // 处理图片上传成功后的逻辑
+      this.form.buildingImage = response.url
+    },
+    beforeImageUpload(file) {
+      // 处理图片上传前的逻辑
+      const isJPG = file.type === 'image/jpeg'
+      const isPNG = file.type === 'image/png'
+      const isLt2M = file.size / 1024 / 1024 < 2
+      if (!isJPG && !isPNG) {
+        this.$message.error('上传图片必须是 JPG 或 PNG 格式!')
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 2MB!')
+      }
+      return isJPG && isPNG && isLt2M
+    },
+    resetForm() {
+      // 重置表单
+      this.form = {
+        projectId: undefined,
+        buildingCode: '',
+        buildingName: '',
+        region: '',
+        address: '',
+        propertyNature: '自持',
+        propertyCertNo: '',
+        propertyNo: '',
+        landNo: '',
+        buildingArea: undefined,
+        propertyArea: undefined,
+        rentableArea: undefined,
+        selfUseArea: undefined,
+        supportingArea: undefined,
+        parkingArea: undefined,
+        sortOrder: 0,
+        // 拓展信息
+        buildingTags: [],
+        totalFloors: '',
+        isHot: false,
+        buildingImage: '',
+        facilities: []
+      }
+    },
+    // 获取楼宇标签选项
+    getTagOptions() {
+      getTagByType({ tagType: "楼宇标签", tagName: "楼宇标签" }).then(res => {
+        if (res.code === API_SUCCESS_CODE && Array.isArray(res.data)) {
+          this.tagOptions = res.data
+          console.log('标签选项:', this.tagOptions)
+        } else {
+          console.warn('获取标签选项失败或格式错误:', res)
+          this.tagOptions = [
+            { id: '1', tagName: '标签1' },
+            { id: '2', tagName: '标签2' }
+          ]
+        }
+      }).catch((err) => {
+        console.error('获取标签选项异常:', err)
+        this.tagOptions = [
+          { id: '1', tagName: '标签1' },
+          { id: '2', tagName: '标签2' }
+        ]
+      })
+    },
+    
+    // 标签选择器可见性变化处理
+    onTagSelectorVisibleChange(visible) {
+      if (visible && (!this.tagOptions || this.tagOptions.length === 0)) {
+        this.getTagOptions()
+      }
+    },
+    getTagNameById(tagId) {
+      if (!tagId) return '';
+      return this.tagIdToName[tagId] || tagId
+    },
+    formatColumnValue(value, prop) {
+      // 先检查值是否为数字或可转换为数字
+      const isNumericProp = [
+        'rentableArea', 'selfUseArea', 'supportingArea', 'parkingArea', 
+        'manageArea', 'totalRooms', 'rentedArea', 'rentedContracts',
+        'availableRentArea', 'waitingRooms', 'rentalRate', 'standardHeight',
+        'buildingArea', 'propertyArea'
+      ].includes(prop)
+      
+      // 如果属性应该是数字但值不是数字，尝试转换
+      if (isNumericProp) {
+        if (typeof value !== 'number') {
+          // 尝试转换为数字
+          const numValue = parseFloat(value)
+          if (isNaN(numValue)) {
+            return value || '0'; // 如果转换失败，返回原值或0
+          }
+          value = numValue;
+        }
+        
+        switch (prop) {
+          case 'rentableArea':
+          case 'selfUseArea':
+          case 'supportingArea':
+          case 'parkingArea':
+          case 'manageArea':
+          case 'buildingArea':
+          case 'propertyArea':
+          case 'rentedArea':
+          case 'availableRentArea':
+            return value.toFixed(2)
+          case 'totalRooms':
+          case 'rentedContracts':
+          case 'waitingRooms':
+            return Math.round(value)
+          case 'rentalRate':
+            return value.toFixed(2) 
+          case 'standardHeight':
+            return value.toFixed(2) 
+          default:
+            return value
+        }
+      }
+      
+      return value
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  .operation-buttons {
+    margin-bottom: 20px;
+    
+    .el-button {
+      margin-left: 10px;
+    }
+  }
+  
+  .el-table {
+    margin-top: 15px;
+  }
+  
+  .floor-list-table {
+    margin-top: 10px;
+  }
+  
+  .form-section-title {
+    font-size: 16px;
+    font-weight: bold;
+    margin: 20px 0 10px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #eee;
+  }
+  
+  .pagination {
+    margin-top: 15px;
+    text-align: right;
+  }
+  
+  /* 上传图片组件样式 */
+  .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
+  
+  /* Checkbox组样式 */
+  .el-checkbox-group {
+    display: flex;
+    flex-wrap: wrap;
+    
+    .el-checkbox {
+      margin-right: 20px;
+      margin-bottom: 10px;
+    }
+  }
+
+  /* 让所有输入框和下拉框保持一致宽度 */
+  .el-input, .el-select, .el-textarea, .el-input-number {
+    width: 100%;
+  }
+
+  /* 确保所有表单元素的高度和边距一致 */
+  ::v-deep .el-form-item {
+    margin-bottom: 18px;
+
+    .el-form-item__content {
+      line-height: 36px;
+    }
+  }
+
+  /* 数字输入框内容左对齐 */
+  ::v-deep .el-input-number .el-input__inner {
+    text-align: left;
+    padding-left: 15px;
+  }
+
+  /* 确保el-select和普通输入框宽度一致 */
+  ::v-deep .el-select {
+    width: 100%;
+  }
+  
+  /* 确保数字输入框占满容器并保持左对齐 */
+  ::v-deep .el-input-number {
+    width: 100%;
+    
+    .el-input__inner {
+      text-align: left;
+    }
+    
+    .el-input-number__decrease,
+    .el-input-number__increase {
+      background-color: #f5f7fa;
+      border-radius: 0;
+      top: 1px;
+    }
+  }
+  
+  /* 确保对话框中的表单元素水平对齐 */
+  ::v-deep .el-dialog {
+    .el-form-item__label {
+      padding-right: 12px;
+      box-sizing: border-box;
+    }
+  }
+  
+  /* 详情页面图片样式 */
+  .detail-avatar {
+    width: 180px;
+    height: 180px;
+    border-radius: 4px;
+    border: 1px solid #eee;
+    object-fit: cover;
+  }
+  
+  /* 设施列表样式 */
+  .facilities-list {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+.pagination {
+    margin-top: 15px;
+    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
new file mode 100644
index 0000000..408e560
--- /dev/null
+++ b/pc/src/views/project/index.vue
@@ -0,0 +1,594 @@
+<template>
+  <div class="app-container">
+    <!-- 统计数据展示区域 -->
+    <!-- <el-row :gutter="20" class="statistics-row">
+      <el-col :span="4">
+        <div class="stat-card">
+          <div class="stat-label">管理面积</div>
+          <div class="stat-value">{{ statistics.managementArea }} m²</div>
+        </div>
+      </el-col>
+      <el-col :span="4">
+        <div class="stat-card">
+          <div class="stat-label">可招商面积</div>
+          <div class="stat-value">{{ statistics.availableArea }} m²</div>
+        </div>
+      </el-col>
+      <el-col :span="4">
+        <div class="stat-card">
+          <div class="stat-label">可招商占比</div>
+          <div class="stat-value">{{ statistics.availableRatio }}%</div>
+        </div>
+      </el-col>
+      <el-col :span="4">
+        <div class="stat-card">
+          <div class="stat-label">总房源数量</div>
+          <div class="stat-value">{{ statistics.totalRooms }} 间</div>
+        </div>
+      </el-col>
+      <el-col :span="4">
+        <div class="stat-card">
+          <div class="stat-label">可招商房源数量</div>
+          <div class="stat-value">{{ statistics.availableRooms }} 间</div>
+        </div>
+      </el-col>
+    </el-row> ..>
+
+    <!-- 搜索区域 -->
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>项目列表</span>
+        <el-button 
+          style="float: right;" 
+          type="primary" 
+          icon="el-icon-plus" 
+          size="mini" 
+          @click="handleAdd">新增项目</el-button>
+      </div>
+      
+      <!-- 搜索表单 -->
+      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
+        <el-form-item label="项目名称">
+          <el-input v-model="queryParams.projectName" placeholder="请输入项目名称" clearable size="small" />
+        </el-form-item>
+        <el-form-item label="项目类型">
+          <el-select v-model="queryParams.projectType" placeholder="请选择项目类型" clearable size="small">
+            <el-option label="写字楼" value="写字楼" />
+            <el-option label="产业园区" value="产业园区" />
+            <el-option label="商场" value="商场" />
+            <el-option label="联合办公" value="联合办公" />
+            <el-option label="公寓" value="公寓" />
+            <el-option label="小区" value="小区" />
+            <el-option label="社区养老" value="社区养老" />
+          </el-select>
+        </el-form-item>
+        <!-- <el-form-item label="所属地区">
+          <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>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+
+      <!-- 表格区域 -->
+      <el-table v-loading="loading" :data="projectList" border style="width: 100%">
+        <el-table-column prop="projectName" label="项目名称" />
+        <el-table-column prop="projectType" label="项目类型" />
+        <el-table-column prop="region" label="所属地区" />
+        <el-table-column prop="manageArea" label="管理面积(㎡)" />
+        <el-table-column prop="availableArea" label="可招商面积(㎡)" />
+        <el-table-column prop="totalRooms" label="总房源数量" />
+        <el-table-column prop="availableRooms" label="可招商房源数量" />
+        <el-table-column label="操作" width="200">
+          <template slot-scope="scope">
+            <el-button size="mini" type="text" @click="handleDetail(scope.row)">详情</el-button>
+            <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
+            <el-button size="mini" type="text" style="color: #F56C6C" @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页区域 -->
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="queryParams.pageNum"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="queryParams.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        class="pagination">
+      </el-pagination>
+    </el-card>
+
+    <!-- 新增/编辑对话框 -->
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%" @open="onDialogOpen" @close="onDialogClose">
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="项目类型" prop="projectType">
+              <el-select v-model="form.projectType" placeholder="请选择项目类型" :disabled="form.id !== undefined">
+                <el-option label="写字楼" value="写字楼" />
+                <el-option label="产业园区" value="产业园区" />
+                <el-option label="商场" value="商场" />
+                <el-option label="联合办公" value="联合办公" />
+                <el-option label="公寓" value="公寓" />
+                <el-option label="小区" value="小区" />
+                <el-option label="社区养老" value="社区养老" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="项目名称" prop="projectName">
+              <el-input v-model="form.projectName" placeholder="请输入项目名称" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="项目简称" prop="projectShortName">
+              <el-input v-model="form.projectShortName" placeholder="请输入项目简称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="所属地区" prop="region">
+              <region-selector v-model="form.region" placeholder="请选择所属地区" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        
+        <el-form-item label="详细地址" prop="address">
+          <el-input v-model="form.address" type="textarea" placeholder="请输入详细地址" />
+        </el-form-item>
+        
+        <el-form-item label="项目标签" prop="projectTags">
+          <el-select v-model="form.projectTags" multiple placeholder="请选择项目标签">
+            <el-option
+              v-for="tag in tagOptions"
+              :key="tag.id"
+              :label="tag.tagName"
+              :value="tag.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        
+        <el-form-item label="项目简介" prop="projectDesc">
+          <el-input v-model="form.projectDesc" type="textarea" :rows="4" placeholder="请输入项目简介" />
+        </el-form-item>
+        
+        <el-form-item label="项目图片" prop="projectImage">
+          <el-upload
+            class="avatar-uploader"
+            action="/api/upload"
+            :show-file-list="false"
+            :on-success="handleImageSuccess"
+            :before-upload="beforeImageUpload">
+            <img v-if="form.projectImage" :src="form.projectImage" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 详情对话框 -->
+    <el-dialog title="项目详情" :visible.sync="detailVisible" width="50%">
+      <el-descriptions :column="2" border>
+        <el-descriptions-item label="项目名称">{{ detail.projectName }}</el-descriptions-item>
+        <el-descriptions-item label="项目简称">{{ detail.projectShortName }}</el-descriptions-item>
+        <el-descriptions-item label="项目类型">{{ detail.projectType }}</el-descriptions-item>
+        <el-descriptions-item label="所属地区">{{ detail.region }}</el-descriptions-item>
+        <el-descriptions-item label="详细地址">{{ detail.address }}</el-descriptions-item>
+        <el-descriptions-item label="管理面积">{{ detail.manageArea }}㎡</el-descriptions-item>
+        <el-descriptions-item label="可招商面积">{{ detail.availableArea }}㎡</el-descriptions-item>
+        <el-descriptions-item label="总房源数量">{{ detail.totalRooms }}</el-descriptions-item>
+        <el-descriptions-item label="可招商房源数量">{{ detail.availableRooms }}</el-descriptions-item>
+        <el-descriptions-item label="项目标签" :span="2">
+          <el-tag 
+            v-for="tag in projectTagList" 
+            :key="tag.id" 
+            type="success" 
+            size="medium" 
+            style="margin-right: 8px; margin-bottom: 5px;">
+            {{ tag.tagName }}
+          </el-tag>
+          <span v-if="!projectTagList || projectTagList.length === 0">暂无标签</span>
+        </el-descriptions-item>
+        <!-- <el-descriptions-item label="排序值">{{ detail.sort }}</el-descriptions-item> -->
+        <!-- <el-descriptions-item label="竣工时间">{{ detail.completionTime }}</el-descriptions-item> -->
+        <!-- <el-descriptions-item label="标准层高">{{ detail.standardHeight }}m</el-descriptions-item> -->
+        <!-- <el-descriptions-item label="物业">{{ detail.property }}</el-descriptions-item> -->
+        <!-- <el-descriptions-item label="物业费">{{ detail.propertyFee }}元/㎡·月</el-descriptions-item> -->
+        <!-- <el-descriptions-item label="车位数量">{{ detail.parkingSpaces }}</el-descriptions-item> -->
+        <!-- <el-descriptions-item label="车位月租金">{{ detail.parkingFee }}元/月</el-descriptions-item> -->
+        <!-- <el-descriptions-item label="空调">{{ detail.airConditioning }}</el-descriptions-item> -->
+        <!-- <el-descriptions-item label="空调费">{{ detail.airConditioningFee }}元/㎡·月</el-descriptions-item> -->
+        <!-- <el-descriptions-item label="空调开放时间">{{ detail.airConditioningTime }}</el-descriptions-item> -->
+        <!-- <el-descriptions-item label="电梯">{{ detail.elevator }}</el-descriptions-item> -->
+        <!-- <el-descriptions-item label="网络">{{ detail.network }}</el-descriptions-item> -->
+        <!-- <el-descriptions-item label="入驻企业">{{ detail.enterprises }}</el-descriptions-item> -->
+        <!-- <el-descriptions-item label="招商岗位">{{ detail.recruitmentPosition }}</el-descriptions-item> -->
+        <!-- <el-descriptions-item label="招商部门">{{ detail.recruitmentDepartment }}</el-descriptions-item> -->
+        <!-- <el-descriptions-item label="VR链接">{{ detail.vrLink }}</el-descriptions-item> -->
+        <!-- <el-descriptions-item label="招商时间">{{ detail.recruitmentTime }}</el-descriptions-item> -->
+        <el-descriptions-item label="项目图片" :span="2">
+          <el-image 
+            v-if="detail.projectImage"
+            :src="detail.projectImage"
+            :preview-src-list="[detail.projectImage]"
+            fit="cover"
+            style="width: 200px; height: 200px">
+          </el-image>
+        </el-descriptions-item>
+      </el-descriptions>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="detailVisible = false">关 闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<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 {
+      // 遮罩层
+      loading: false,
+      // 总条数
+      total: 0,
+      // 项目列表
+      projectList: [],
+      // 弹出层标题
+      dialogTitle: '',
+      // 是否显示弹出层
+      dialogVisible: false,
+      // 是否显示详情弹出层
+      detailVisible: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        projectName: undefined,
+        projectType: undefined,
+        region: undefined
+      },
+      // 表单参数
+      form: {},
+      // 详情数据
+      detail: {},
+      // 标签选项
+      tagOptions: [],
+      // 表单校验
+      rules: {
+        projectType: [
+          { required: true, message: '请选择项目类型', trigger: 'change' }
+        ],
+        projectName: [
+          { required: true, message: '请输入项目名称', trigger: 'blur' }
+        ],
+        projectShortName: [
+          { required: true, message: '请输入项目简称', trigger: 'blur' }
+        ],
+        region: [
+          { required: true, message: '请输入所属地区', trigger: 'blur' }
+        ],
+        address: [
+          { required: true, message: '请输入详细地址', trigger: 'blur' }
+        ]
+      },
+      // 统计数据
+      statistics: {
+        managementArea: '37,234.52',
+        availableArea: '20,916.2',
+        availableRatio: '56.17',
+        totalRooms: '637',
+        availableRooms: '51'
+      }
+    }
+  },
+  computed: {
+    // 项目标签列表，用于在详情页展示
+    projectTagList() {
+      if (!this.detail.projectTags || !this.tagOptions || this.tagOptions.length === 0) {
+        return [];
+      }
+      
+      // 将逗号分隔的标签ID字符串转为数组
+      const tagIds = typeof this.detail.projectTags === 'string' 
+        ? this.detail.projectTags.split(',') 
+        : this.detail.projectTags;
+      
+      // 根据ID查找标签对象
+      return tagIds.map(tagId => {
+        const tag = this.tagOptions.find(t => t.id === tagId);
+        return tag || { id: tagId, tagName: `标签${tagId}` };
+      });
+    }
+  },
+  created() {
+    this.getList()
+    this.getTagOptions()
+    this.fetchStatistics()
+  },
+  methods: {
+    /** 查询项目列表 */
+    getList() {
+      this.loading = true
+      const params = {
+        pageNum: this.queryParams.pageNum,
+        pageSize: this.queryParams.pageSize,
+        projectName: this.queryParams.projectName,
+        projectType: this.queryParams.projectType,
+        region: this.queryParams.region
+      }
+      
+      getProjectList(params).then(res => {
+        this.projectList = res.data.list
+        this.total = res.data.total
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    /** 获取标签选项 */
+    getTagOptions() {
+      return new Promise((resolve) => {
+        getTagByType({ tagType: '项目标签',tagName: '项目标签' }).then(res => {
+          this.tagOptions = res.data || [];
+          resolve(this.tagOptions);
+        }).catch(() => {
+          this.tagOptions = [
+            { id: '1', tagName: '标签1' },
+            { id: '2', tagName: '标签2' }
+          ];
+          resolve(this.tagOptions);
+        });
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        projectName: undefined,
+        projectType: undefined,
+        region: undefined
+      }
+      this.handleQuery()
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.dialogTitle = '新增项目'
+      // 完全重置表单数据
+      this.form = {
+        region: '' // 初始化region为空字符串以确保组件正确绑定
+      }
+      this.dialogVisible = true
+    },
+    /** 修改按钮操作 */
+    handleEdit(row) {
+      this.dialogTitle = '编辑项目'
+      getProjectDetail(row.id).then(res => {
+        // 处理从后端返回的项目标签，将逗号分隔的字符串转为数组
+        const projectData = { ...res.data };
+        
+        if (typeof projectData.projectTags === 'string' && projectData.projectTags) {
+          projectData.projectTags = projectData.projectTags.split(',');
+        } else if (!projectData.projectTags) {
+          projectData.projectTags = [];
+        }
+        
+        this.form = projectData;
+        this.dialogVisible = true;
+      })
+    },
+    /** 详情按钮操作 */
+    async handleDetail(row) {
+      // 确保标签选项已加载
+      if (this.tagOptions.length === 0) {
+        await this.getTagOptions();
+      }
+      
+      getProjectDetail(row.id).then(res => {
+        // 处理项目详情数据，确保标签显示友好
+        const detailData = { ...res.data };
+        
+        // 如果标签是字符串，则保持原样，用于显示
+        if (typeof detailData.projectTags === 'string' && detailData.projectTags) {
+          // 可以在这里处理标签的显示格式，如果需要的话
+        } else if (Array.isArray(detailData.projectTags)) {
+          // 如果是数组，转为逗号分隔的字符串
+          detailData.projectTags = detailData.projectTags.join(',');
+        }
+        
+        this.detail = detailData;
+        this.detailVisible = true;
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$confirm('是否确认删除该项目?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteProject(row.id).then(() => {
+          this.getList()
+        })
+      }).catch(() => {})
+    },
+    /** 表单提交 */
+    submitForm() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          // 处理项目标签，将数组转为逗号分隔的字符串
+          const formData = { ...this.form };
+          if (Array.isArray(formData.projectTags)) {
+            formData.projectTags = formData.projectTags.join(',');
+          }
+          
+          // 如果表单有ID则为编辑操作，否则为新增操作
+          const isEdit = formData.id !== undefined;
+          const method = isEdit ? updateProject(formData.id, formData) : addProject(formData);
+          
+          method.then(() => {
+            this.dialogVisible = false;
+            this.getList();
+          });
+        }
+      });
+    },
+    /** 图片上传成功处理 */
+    handleImageSuccess(res, file) {
+      // 假设后端返回了图片URL
+      this.form.projectImage = res.data
+    },
+    /** 图片上传前处理 */
+    beforeImageUpload(file) {
+      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
+      const isLt2M = file.size / 1024 / 1024 < 2
+
+      if (!isJPG) {
+        this.$message.error('上传图片只能是 JPG/PNG 格式!')
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 2MB!')
+      }
+      return isJPG && isLt2M
+    },
+    /** 分页大小改变 */
+    handleSizeChange(val) {
+      this.queryParams.pageSize = val
+      this.getList()
+    },
+    /** 分页页码改变 */
+    handleCurrentChange(val) {
+      this.queryParams.pageNum = val
+      this.getList()
+    },
+    /** 获取统计数据 */
+    async fetchStatistics() {
+      try {
+        const res = await getAllProjectStatistics()
+        this.statistics = {
+          managementArea: res.data.manageArea || '0',
+          availableArea: res.data.availableArea || '0',
+          availableRatio: res.data.availableArea && res.data.manageArea 
+            ? ((res.data.availableArea / res.data.manageArea) * 100).toFixed(2) 
+            : '0',
+          totalRooms: res.data.totalRooms || '0',
+          availableRooms: res.data.availableRooms || '0'
+        }
+      } catch (error) {
+        console.error('获取统计数据失败:', error)
+        // 使用默认数据
+        this.statistics = {
+          managementArea: '37,234.52',
+          availableArea: '20,916.2',
+          availableRatio: '56.17',
+          totalRooms: '637',
+          availableRooms: '51'
+        }
+      }
+    },
+    /** 对话框打开时处理 */
+    onDialogOpen() {
+      // 只重置校验状态，不清空表单数据
+      this.$nextTick(() => {
+        this.$refs['form'] && this.$refs['form'].clearValidate()
+      })
+    },
+    /** 对话框关闭时处理 */
+    onDialogClose() {
+      // 重置表单和校验状态
+      this.form = {}
+      this.$refs['form'].clearValidate()
+    },
+    handleRegionChange(regionText) {
+      
+      this.queryParams.region = regionText
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.statistics-row {
+  margin-bottom: 20px;
+  
+  .stat-card {
+    background: #fff;
+    padding: 20px;
+    border-radius: 4px;
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+    text-align: center;
+
+    .stat-label {
+      color: #606266;
+      font-size: 14px;
+      margin-bottom: 10px;
+    }
+
+    .stat-value {
+      color: #303133;
+      font-size: 20px;
+      font-weight: bold;
+    }
+  }
+}
+
+/* 确保下拉框和输入框宽度一致 */
+::v-deep .el-form-item {
+  .el-select {
+    width: 100%;
+  }
+  .el-input {
+    width: 100%;
+  }
+}
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+.pagination {
+    margin-top: 15px;
+    text-align: right;
+  }
+</style> 
\ No newline at end of file
diff --git a/pc/src/views/project/room/components/DetailView.vue b/pc/src/views/project/room/components/DetailView.vue
new file mode 100644
index 0000000..c294a46
--- /dev/null
+++ b/pc/src/views/project/room/components/DetailView.vue
@@ -0,0 +1,353 @@
+<template>
+  <div class="detail-container" v-loading="loading">
+    <el-tabs v-model="activeTab">
+      <el-tab-pane label="基础信息" name="basic">
+        <el-descriptions class="margin-top" title="房源基础信息" :column="3" border>
+          <el-descriptions-item label="项目名称">{{ roomDetail.projectName }}</el-descriptions-item>
+          <el-descriptions-item label="楼宇">{{ roomDetail.buildingName }}</el-descriptions-item>
+          <el-descriptions-item label="楼层">{{ roomDetail.floorName }}</el-descriptions-item>
+          <el-descriptions-item label="房号">{{ roomDetail.roomNumber }}</el-descriptions-item>
+          <el-descriptions-item label="房间数字编号">{{ roomDetail.roomDigitalNumber }}</el-descriptions-item>
+          <el-descriptions-item label="房源管理编号">{{ roomDetail.roomManageNumber }}</el-descriptions-item>
+          <el-descriptions-item label="建筑面积">{{ roomDetail.buildingArea }} m²</el-descriptions-item>
+          <el-descriptions-item label="计租面积">{{ roomDetail.rentalArea }} m²</el-descriptions-item>
+          <el-descriptions-item label="计费面积">{{ roomDetail.billingArea }} m²</el-descriptions-item>
+          <el-descriptions-item label="套内面积">{{ roomDetail.innerArea }} m²</el-descriptions-item>
+          <el-descriptions-item label="虚拟房源">{{ roomDetail.isVirtual === '1' ? '是' : '否' }}</el-descriptions-item>
+          <el-descriptions-item label="房源交付时间">{{ roomDetail.deliveryTime }}</el-descriptions-item>
+          <el-descriptions-item label="绑定业主">{{ roomDetail.ownerName }}</el-descriptions-item>
+        </el-descriptions>
+      </el-tab-pane>
+
+      <el-tab-pane label="招商信息" name="merchant">
+        <el-descriptions class="margin-top" title="招商信息" :column="3" border>
+          <el-descriptions-item label="产权性质">
+            <el-tag :type="roomPropertyTypeTagType">{{ roomPropertyTypeText }}</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="租赁状态">
+            <el-tag :type="leaseStatusTagType">{{ leaseStatusText }}</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="房源状态">{{ roomStatusText }}</el-descriptions-item>
+          <el-descriptions-item label="房源类型">{{ roomTypeText }}</el-descriptions-item>
+          <el-descriptions-item label="房源备案号">{{ roomDetail.roomRecordNumber }}</el-descriptions-item>
+          <el-descriptions-item label="层高">{{ roomDetail.height }} m</el-descriptions-item>
+          <el-descriptions-item label="荷载值">{{ roomDetail.loadValue }}</el-descriptions-item>
+          <el-descriptions-item label="装修情况">{{ decorationStatusText }}</el-descriptions-item>
+          <el-descriptions-item label="标签">
+            <el-tag v-for="tag in roomDetail.tagList" :key="tag.id" size="mini" style="margin-right: 5px">
+              {{ tag.tagName }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="招商状态">
+            <el-tag :type="roomDetail.businessStatus === '1' ? 'primary' : 'info'">
+              {{ roomDetail.businessStatus === '1' ? '招商' : '不招商' }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="可租日期">{{ roomDetail.availableDate }}</el-descriptions-item>
+          <el-descriptions-item label="报价">
+            {{ roomDetail.price }} {{ priceUnitText }}
+          </el-descriptions-item>
+          <el-descriptions-item label="底价">
+            {{ roomDetail.floorPrice }} {{ floorPriceUnitText }}
+          </el-descriptions-item>
+          <el-descriptions-item label="房源招商编号">{{ roomDetail.businessNumber }}</el-descriptions-item>
+          <el-descriptions-item label="招商条件">{{ roomDetail.businessCondition || '-' }}</el-descriptions-item>
+          
+        </el-descriptions>
+
+        <div class="image-section" v-if="roomImageUrls && roomImageUrls.length > 0">
+          <div class="section-title">房源图片</div>
+          <el-carousel :interval="4000" type="card" height="200px">
+            <el-carousel-item v-for="(item, index) in roomImageUrls" :key="index">
+              <img :src="item" class="carousel-image" @click="previewImage(item)" />
+            </el-carousel-item>
+          </el-carousel>
+        </div>
+      </el-tab-pane>
+
+      <el-tab-pane label="拓展信息" name="extension">
+        <el-descriptions class="margin-top" title="拓展信息" :column="3" border>
+          <el-descriptions-item label="使用率">{{ roomDetail.usageRate || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="办公格局">{{ roomDetail.officeLayout || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="窗面朝向">{{ roomDetail.windowOrientation || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="免租期">{{ roomDetail.rentFreePeriod || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="最短租期">{{ roomDetail.minLeaseTerm || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="工位数量">{{ workstationCountRange }}</el-descriptions-item>
+        </el-descriptions>
+
+        <div class="image-section" v-if="floorPlanImageUrls && floorPlanImageUrls.length > 0">
+          <div class="section-title">户型图</div>
+          <el-carousel :interval="4000" type="card" height="200px">
+            <el-carousel-item v-for="(item, index) in floorPlanImageUrls" :key="index">
+              <img :src="item" class="carousel-image" @click="previewImage(item)" />
+            </el-carousel-item>
+          </el-carousel>
+          <div class="floor-plan-description" v-if="roomDetail.floorPlanDesc">
+            <div class="section-title">户型图说明</div>
+            <p>{{ roomDetail.floorPlanDesc }}</p>
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+
+    <!-- 图片预览弹窗 -->
+    <el-dialog :visible.sync="previewVisible" append-to-body>
+      <img width="100%" :src="previewUrl" alt="预览图片">
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getRoom } from '@/api/room'
+import { getTagByType } from '@/api/project'
+import { downloadAttachment } from '@/api/resource'
+
+export default {
+  name: 'DetailView',
+  props: {
+    roomId: {
+      type: [String, Number],
+      required: true
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      activeTab: 'basic',
+      roomDetail: {},
+      tagOptions: [],
+      roomImageUrls: [],
+      floorPlanImageUrls: [],
+      previewVisible: false,
+      previewUrl: ''
+    }
+  },
+  computed: {
+    roomPropertyTypeText() {
+      const typeMap = {
+        '1': '自持',
+        '2': '承租',
+        '3': '自持+承租'
+      }
+      return typeMap[this.roomDetail.propertyNature] || '-'
+    },
+    roomPropertyTypeTagType() {
+      const typeMap = {
+        '1': 'success',
+        '2': 'primary',
+        '3': 'warning'
+      }
+      return typeMap[this.roomDetail.propertyNature] || 'info'
+    },
+    leaseStatusText() {
+      const statusMap = {
+        '1': '待租',
+        '2': '已租',
+        '3': '已锁定'
+      }
+      return statusMap[this.roomDetail.rentalStatus] || '-'
+    },
+    leaseStatusTagType() {
+      const statusMap = {
+        '1': 'warning',
+        '2': 'success',
+        '3': 'warning'
+      }
+      return statusMap[this.roomDetail.rentalStatus] || 'info'
+    },
+    decorationStatusText() {
+      const statusMap = {
+        '1': '精装',
+        '2': '简装',
+        '3': '毛坯',
+        '4': '标准交付',
+        '5': '豪装'
+      }
+      return statusMap[this.roomDetail.decorationStatus] || '-'
+    },
+    roomStatusText() {
+      const statusMap = {
+        '1': '公开',
+        '2': '关闭',
+        '3': '私密'
+      }
+      return statusMap[this.roomDetail.roomStatus] || '-'
+    },
+    roomTypeText() {
+      const typeMap = {
+        '1': '办公',
+        '2': '商业',
+        '3': '仓储',
+        '4': '厂房',
+        '5': '多经',
+        '6': '公寓',
+        '7': '住宅',
+        '8': '其它'
+      }
+      return typeMap[this.roomDetail.roomType] || '-'
+    },
+    priceUnitText() {
+      const unitMap = {
+        '1': '元/㎡·天',
+        '2': '元/㎡·月',
+        '3': '元/月',
+        '4': '元/天',
+        '5': '元/年'
+      }
+      return unitMap[this.roomDetail.priceUnit] || ''
+    },
+    floorPriceUnitText() {
+      const unitMap = {
+        '1': '元/㎡·天',
+        '2': '元/㎡·月',
+        '3': '元/月',
+        '4': '元/天',
+        '5': '元/年'
+      }
+      return unitMap[this.roomDetail.floorPriceUnit] || ''
+    },
+    workstationCountRange() {
+      if (!this.roomDetail.workstationMin && !this.roomDetail.workstationMax) {
+        return '-'
+      }
+      if (this.roomDetail.workstationMin && !this.roomDetail.workstationMax) {
+        return this.roomDetail.workstationMin + '个'
+      }
+      if (!this.roomDetail.workstationMin && this.roomDetail.workstationMax) {
+        return '不超过' + this.roomDetail.workstationMax + '个'
+      }
+      return this.roomDetail.workstationMin + '~' + this.roomDetail.workstationMax + '个'
+    }
+  },
+  mounted() {
+    this.getTagOptions()
+    this.getRoomDetail()
+  },
+  methods: {
+    /** 获取房源标签选项 */
+    getTagOptions() {
+      getTagByType({ tagType: "房源标签", tagName: "房源标签" }).then(res => {
+        if (res.code === '0000000000000000' && res.data) {
+          this.tagOptions = res.data
+          // 如果房源详情已加载，则更新标签显示
+          if (this.roomDetail.id) {
+            this.updateRoomTags()
+          }
+        }
+      }).catch(() => {
+        this.tagOptions = [
+          { id: '1', tagName: '标签1' },
+          { id: '2', tagName: '标签2' }
+        ]
+      })
+    },
+    
+    /** 更新房源标签显示 */
+    updateRoomTags() {
+      if (this.roomDetail.tags) {
+        const tagIds = this.roomDetail.tags.split(',')
+        this.roomDetail.tagList = tagIds.map(tagId => {
+          const tag = this.tagOptions.find(t => t.id === tagId)
+          return tag || { id: tagId, tagName: `标签${tagId}` }
+        })
+      } else {
+        this.roomDetail.tagList = []
+      }
+    },
+    
+    /** 预览图片 */
+    previewImage(url) {
+      this.previewUrl = url
+      this.previewVisible = true
+    },
+    
+    getRoomDetail() {
+      if (!this.roomId) return
+      
+      this.loading = true
+      getRoom(this.roomId).then(response => {
+        if (response.code === '0000000000000000') {
+          this.roomDetail = response.data
+          
+          // 处理业务信息
+          if (response.data.businessInfo) {
+            Object.assign(this.roomDetail, response.data.businessInfo)
+          }
+          
+          // 处理扩展信息
+          if (response.data.extendInfo) {
+            Object.assign(this.roomDetail, response.data.extendInfo)
+          }
+          
+          // 处理房源图片
+          this.roomImageUrls = []
+          if (response.data.roomImages && Array.isArray(response.data.roomImages)) {
+            response.data.roomImages.forEach(item => {
+              if (item.fileId) {
+                this.roomImageUrls.push(`/resource/attachment/downloadAttachment?fileId=${item.fileId}`)
+              }
+            })
+          }
+          
+          // 处理户型图
+          this.floorPlanImageUrls = []
+          if (response.data.floorPlanImages && Array.isArray(response.data.floorPlanImages)) {
+            response.data.floorPlanImages.forEach(item => {
+              if (item.fileId) {
+                this.floorPlanImageUrls.push(`/resource/attachment/downloadAttachment?fileId=${item.fileId}`)
+              }
+            })
+          }
+          
+          // 处理标签
+          this.updateRoomTags()
+        } else {
+          this.$message.error(response.msg || '获取房源详情失败')
+        }
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.detail-container {
+  padding: 10px;
+  
+  .margin-top {
+    margin-top: 15px;
+  }
+  
+  .section-title {
+    font-size: 16px;
+    font-weight: 500;
+    margin: 20px 0 15px;
+    padding-left: 10px;
+    border-left: 3px solid #409EFF;
+  }
+  
+  .image-section {
+    margin-top: 20px;
+  }
+  
+  .carousel-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    cursor: pointer;
+  }
+  
+  .floor-plan-description {
+    margin-top: 20px;
+    
+    p {
+      padding: 0 15px;
+      line-height: 1.6;
+      color: #606266;
+    }
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/pc/src/views/project/room/components/RoomForm.vue b/pc/src/views/project/room/components/RoomForm.vue
new file mode 100644
index 0000000..ed2bc10
--- /dev/null
+++ b/pc/src/views/project/room/components/RoomForm.vue
@@ -0,0 +1,1052 @@
+<template>
+  <div class="room-form-container" v-loading="loading">
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px" size="small">
+      <el-tabs v-model="activeTab">
+        <!-- 基础信息 Tab -->
+        <el-tab-pane label="基础信息" name="basic">
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item label="项目" prop="projectId">
+                <el-select v-model="form.projectId" placeholder="请选择项目" style="width: 100%" :disabled="isEdit"
+                  @change="handleProjectChange">
+                  <el-option v-for="item in projectOptions" :key="item.id" :label="item.projectName" :value="item.id" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="楼宇" prop="buildingId">
+                <el-select v-model="form.buildingId" placeholder="请选择楼宇" style="width: 100%" :disabled="isEdit"
+                  @change="handleBuildingChange">
+                  <el-option v-for="item in buildingOptions" :key="item.id" :label="item.buildingName"
+                    :value="item.id" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="楼层" prop="floorId">
+                <el-select v-model="form.floorId" placeholder="请选择楼层" style="width: 100%" :disabled="isEdit">
+                  <el-option v-for="item in floorOptions" :key="item.id" :label="item.floorName" :value="item.id" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item label="房号" prop="roomNumber">
+                <el-input v-model="form.roomNumber" placeholder="请输入房号" :disabled="isEdit" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="房间数字编号" prop="roomDigitalNumber">
+                <el-input v-model="form.roomDigitalNumber" placeholder="请输入房间数字编号" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="房源管理编号" prop="roomManageNumber">
+                <el-input v-model="form.roomManageNumber" placeholder="请输入房源管理编号" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item label="建筑面积" prop="buildingArea">
+                <el-input v-model="form.buildingArea" placeholder="请输入建筑面积">
+                  <template slot="append">m²</template>
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="计租面积" prop="rentalArea">
+                <el-input v-model="form.rentalArea" placeholder="请输入计租面积">
+                  <template slot="append">m²</template>
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="计费面积" prop="billingArea">
+                <el-input v-model="form.billingArea" placeholder="请输入计费面积">
+                  <template slot="append">m²</template>
+                </el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item label="套内面积" prop="innerArea">
+                <el-input v-model="form.innerArea" placeholder="请输入套内面积">
+                  <template slot="append">m²</template>
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="虚拟房源" prop="isVirtual">
+                <el-radio-group v-model="form.isVirtual">
+                  <el-radio label="1">是</el-radio>
+                  <el-radio label="0">否</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="房源交付时间" prop="deliveryTime">
+                <el-date-picker v-model="form.deliveryTime" type="date" placeholder="请选择房源交付时间" style="width: 100%" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item label="绑定业主" prop="ownerId">
+                <el-select v-model="form.ownerId" placeholder="请选择业主" filterable remote reserve-keyword
+                  :remote-method="remoteSearchOwner" :loading="ownerLoading" style="width: 100%">
+                  <el-option v-for="item in ownerOptions" :key="item.id" :label="item.ownerName" :value="item.id">
+                    <span style="float: left">{{ item.ownerName }}</span>
+                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.phone }}</span>
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+
+          </el-row>
+
+        </el-tab-pane>
+
+        <!-- 招商信息 Tab -->
+        <el-tab-pane label="招商信息" name="merchant">
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item label="产权性质" prop="propertyNature">
+                <el-select v-model="form.propertyNature" placeholder="请选择产权性质" style="width: 100%"
+                  @change="handleInputChange">
+                  <el-option label="自持" value="1" />
+                  <el-option label="承租" value="2" />
+                  <el-option label="自持+承租" value="3" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="租赁状态" prop="rentalStatus">
+                <el-select v-model="form.rentalStatus" placeholder="请选择租赁状态" style="width: 100%" disabled
+                  @change="handleInputChange">
+                  <el-option label="待租" value="1" />
+                  <el-option label="已租" value="2" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="房源状态" prop="roomStatus">
+                <el-select v-model="form.roomStatus" placeholder="请选择房源状态" style="width: 100%"
+                  @change="handleInputChange">
+                  <el-option label="公开" value="1" />
+                  <el-option label="关闭" value="2" />
+                  <el-option label="私密" value="3" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="房源类型" prop="roomType">
+                <el-select v-model="form.roomType" placeholder="请选择房源类型" style="width: 100%"
+                  @change="handleInputChange">
+                  <el-option label="办公" value="1" />
+                  <el-option label="商业" value="2" />
+                  <el-option label="仓储" value="3" />
+                  <el-option label="厂房" value="4" />
+                  <el-option label="多经" value="5" />
+                  <el-option label="公寓" value="6" />
+                  <el-option label="住宅" value="7" />
+                  <el-option label="其它" value="8" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="房源备案号" prop="roomRecordNumber">
+                <el-input v-model="form.roomRecordNumber" placeholder="请输入房源备案号" @input="handleInputChange" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="层高" prop="height">
+                <el-input v-model="form.height" placeholder="请输入层高" @input="handleInputChange">
+                  <template slot="append">m</template>
+                </el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item label="房源标签" prop="tagIds">
+                <el-select v-model="form.tagIds" placeholder="请选择房源标签" multiple style="width: 100%"
+                  @change="handleInputChange">
+                  <el-option v-for="tag in tagOptions" :key="tag.id" :label="tag.tagName" :value="tag.id" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="招商状态" prop="businessStatus">
+                <el-select v-model="form.businessStatus" placeholder="请选择招商状态" style="width: 100%"
+                  @change="handleInputChange">
+                  <el-option label="招商" value="1" />
+                  <el-option label="不招商" value="2" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="可租日期" prop="availableDate">
+                <el-date-picker v-model="form.availableDate" type="date" placeholder="请选择可租日期" style="width: 100%"
+                  @change="handleInputChange" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="装修情况" prop="decorationStatus">
+              <el-select v-model="form.decorationStatus" placeholder="请选择装修情况" style="width: 100%"
+                @change="handleInputChange">
+                <el-option label="精装" value="1" />
+                <el-option label="简装" value="2" />
+                <el-option label="毛坯" value="3" />
+                <el-option label="标准交付" value="4" />
+                <el-option label="豪装" value="5" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="8">
+            <el-form-item label="报价" prop="price">
+              <el-input v-model="form.price" placeholder="请输入报价" @input="handleInputChange">
+                <el-select slot="append" v-model="form.priceUnit" style="width: 100px" @change="handleInputChange">
+                  <el-option label="元/㎡·天" value="1" />
+                  <el-option label="元/㎡·月" value="2" />
+                  <el-option label="元/月" value="3" />
+                  <el-option label="元/天" value="4" />
+                  <el-option label="元/年" value="5" />
+                </el-select>
+              </el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="8">
+            <el-form-item label="底价" prop="floorPrice">
+              <el-input v-model="form.floorPrice" placeholder="请输入底价" @input="handleInputChange">
+                <el-select slot="append" v-model="form.floorPriceUnit" style="width: 100px" @change="handleInputChange">
+                  <el-option label="元/㎡·天" value="1" />
+                  <el-option label="元/㎡·月" value="2" />
+                  <el-option label="元/月" value="3" />
+                  <el-option label="元/天" value="4" />
+                  <el-option label="元/年" value="5" />
+                </el-select>
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="荷载值" prop="loadValue">
+              <el-input v-model="form.loadValue" placeholder="请输入荷载值" @input="handleInputChange" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="8">
+            <el-form-item label="房源招商编号" prop="businessNumber">
+              <el-input v-model="form.businessNumber" placeholder="请输入房源招商编号" @input="handleInputChange" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="招商条件" prop="businessCondition">
+              <el-input v-model="form.businessCondition" placeholder="请输入招商条件" @input="handleInputChange" />
+            </el-form-item>
+          </el-col>
+
+
+          </el-row>
+          <el-form-item label="房源图片" prop="imageFiles">
+            <div class="image-upload-tip" v-if="imageList.length >= 6">最多上传6张房源图片</div>
+            <el-upload 
+              action="#" 
+              list-type="picture-card" 
+              :file-list="imageList"
+              :on-preview="handlePictureCardPreview" 
+              :on-remove="handleImageRemove"
+              :before-upload="handleBeforeImageUpload"
+              :on-change="handleImageChange"
+              :auto-upload="false"
+              :limit="6"
+              ref="imageUpload"
+              multiple>
+              <i v-if="imageList.length < 6" class="el-icon-plus"></i>
+            </el-upload>
+            <el-dialog :visible.sync="dialogVisible">
+              <img width="100%" :src="dialogImageUrl" alt="">
+            </el-dialog>
+          </el-form-item>
+        </el-tab-pane>
+
+        <!-- 拓展信息 Tab -->
+        <el-tab-pane label="拓展信息" name="extension">
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item label="使用率" prop="usageRate">
+                <el-input v-model="form.usageRate" placeholder="例如：2+1" @input="handleInputChange" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="办公格局" prop="officeLayout">
+                <el-input v-model="form.officeLayout" placeholder="请输入办公格局" @input="handleInputChange" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="窗面朝向" prop="windowOrientation">
+                <el-input v-model="form.windowOrientation" placeholder="例如：南" @input="handleInputChange" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="免租期" prop="rentFreePeriod">
+                <el-input v-model="form.rentFreePeriod" placeholder="例如：前2个月" @input="handleInputChange" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="最短租期" prop="minLeaseTerm">
+                <el-input v-model="form.minLeaseTerm" placeholder="例如：12个月" @input="handleInputChange" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item label="工位数量下限" prop="workstationMin">
+                <el-input-number v-model="form.workstationMin" :min="0" :controls="false" placeholder="请输入最少工位数量"
+                  @change="handleInputChange" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="工位数量上限" prop="workstationMax">
+                <el-input-number v-model="form.workstationMax" :min="0" :controls="false" placeholder="请输入最多工位数量"
+                  @change="handleInputChange" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-form-item label="户型图说明" prop="floorPlanDesc">
+            <el-input v-model="form.floorPlanDesc" type="textarea" :rows="3" placeholder="请输入户型图说明"
+              @input="handleInputChange" />
+          </el-form-item>
+
+          <el-form-item label="户型图" prop="floorPlanImageFiles">
+            <div class="image-upload-tip" v-if="floorPlanImageList.length >= 1">最多上传1张户型图</div>
+            <el-upload 
+              action="#" 
+              list-type="picture-card" 
+              :file-list="floorPlanImageList"
+              :on-preview="handlePictureCardPreview" 
+              :on-remove="handleFloorPlanImageRemove"
+              :before-upload="handleBeforeFloorPlanUpload"
+              :on-change="handleFloorPlanChange"
+              :auto-upload="false"
+              :limit="1"
+              ref="floorPlanUpload">
+              <i v-if="floorPlanImageList.length < 1" class="el-icon-plus"></i>
+            </el-upload>
+            <el-dialog :visible.sync="dialogVisible">
+              <img width="100%" :src="dialogImageUrl" alt="">
+            </el-dialog>
+          </el-form-item>
+        </el-tab-pane>
+      </el-tabs>
+
+      <div class="form-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { getRoom, addRoom, updateRoom, listProjects, listBuildings, listFloors, listRoomTags, listOwners } from '@/api/room'
+import { getProjectList,getTagByType } from '@/api/project'
+import { getBuildingList, getFloorList,getFloorListByBuilding} from '@/api/building'
+import { uploadAttachment, downloadAttachment, deleteAttachment } from '@/api/resource'
+export default {
+  name: 'RoomForm',
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false
+    },
+    roomId: {
+      type: [String, Number],
+      default: null
+    }
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      // 当前激活的选项卡
+      activeTab: 'basic',
+      // 业主搜索加载中
+      ownerLoading: false,
+      // 对话框图片URL
+      dialogImageUrl: '',
+      // 图片预览对话框
+      dialogVisible: false,
+      // 项目选项
+      projectOptions: [],
+      // 楼宇选项
+      buildingOptions: [],
+      // 楼层选项
+      floorOptions: [],
+      // 标签选项
+      tagOptions: [],
+      // 业主选项
+      ownerOptions: [],
+      // 房源图片列表
+      imageList: [],
+      // 房源图片文件列表
+      imageFiles: [],
+      // 房源图片IDs
+      imageFileIds: [],
+      // 户型图列表
+      floorPlanImageList: [],
+      // 户型图文件列表
+      floorPlanFiles: [],
+      // 户型图IDs
+      floorPlanFileIds: [],
+      // 上传URL
+      uploadUrl: process.env.VUE_APP_BASE_API + '/room/upload',
+      // 上传请求头
+      uploadHeaders: {},
+      // 表单对象
+      form: {
+        projectId: undefined,
+        buildingId: undefined,
+        floorId: undefined,
+        roomNumber: '',
+        roomDigitalNumber: '',
+        roomManageNumber: '',
+        buildingArea: '',
+        rentalArea: '',
+        billingArea: '',
+        innerArea: '',
+        isVirtual: '0',
+        deliveryTime: '',
+        ownerId: undefined,
+        propertyNature: '1',
+        rentalStatus: '1',  // 默认待租
+        roomStatus: '1',   // 默认公开
+        roomType: '',
+        roomRecordNumber: '',
+        height: '',
+        loadValue: '',
+        tagIds: [],
+        imageUrls: [],
+        imageFileIds: [],
+        businessStatus: '1', // 默认招商
+        availableDate: '',
+        decorationStatus: '4', // 默认标准交付
+        price: '',
+        priceUnit: '2',  // 默认元/㎡·月
+        floorPrice: '',
+        floorPriceUnit: '2',  // 默认元/㎡·月
+        businessNumber: '',
+        businessCondition: '',
+        rentFreePeriod: '',
+        minLeaseTerm: '',
+        usageRate: '',
+        officeLayout: '',
+        windowOrientation: '',
+        workstationMin: null,
+        workstationMax: null,
+        floorPlanDesc: '',
+        floorPlanImageUrls: [],
+        floorPlanFileIds: []
+      },
+      // 表单校验规则
+      rules: {
+        projectId: [{ required: true, message: '请选择项目', trigger: 'change' }],
+        buildingId: [{ required: true, message: '请选择楼宇', trigger: 'change' }],
+        floorId: [{ required: true, message: '请选择楼层', trigger: 'change' }],
+        roomNumber: [{ required: true, message: '请输入房号', trigger: 'blur' }],
+        roomDigitalNumber: [{ required: true, message: '请输入房间数字编号', trigger: 'blur' }],
+        rentalArea: [{ required: true, message: '请输入计租面积', trigger: 'blur' }]
+      }
+    }
+  },
+  created() {
+    this.getProjectOptions()
+    this.getTagOptions()
+    if (this.isEdit && this.roomId) {
+      this.getRoomDetail()
+    }
+  },
+  watch: {
+    // 监听activeTab变化，切换tab时强制更新组件
+    activeTab() {
+      this.$nextTick(() => {
+        // 强制更新表单，确保数据同步
+        this.$forceUpdate()
+      })
+    }
+  },
+  methods: {
+    /** 获取房源详情 */
+    getRoomDetail() {
+      this.loading = true
+      getRoom(this.roomId).then(response => {
+        if (response.code === '0000000000000000') {
+          this.form = { ...response.data }
+
+          // 处理业务信息字段
+          if (response.data.businessInfo) {
+            this.form.rentalStatus = response.data.businessInfo.rentalStatus
+            this.form.businessStatus = response.data.businessInfo.businessStatus
+            this.form.availableDate = response.data.businessInfo.availableDate
+            this.form.decorationStatus = response.data.businessInfo.decorationStatus
+            this.form.price = response.data.businessInfo.price
+            this.form.priceUnit = response.data.businessInfo.priceUnit
+            this.form.floorPrice = response.data.businessInfo.floorPrice
+            this.form.floorPriceUnit = response.data.businessInfo.floorPriceUnit
+            this.form.businessNumber = response.data.businessInfo.businessNumber
+            this.form.businessCondition = response.data.businessInfo.businessCondition
+          }
+
+          // 处理扩展信息字段
+          if (response.data.extendInfo) {
+            this.form.roomRecordNumber = response.data.extendInfo.roomRecordNumber
+            this.form.usageRate = response.data.extendInfo.usageRate
+            this.form.officeLayout = response.data.extendInfo.officeLayout
+            this.form.windowOrientation = response.data.extendInfo.windowOrientation
+            this.form.rentFreePeriod = response.data.extendInfo.rentFreePeriod
+            this.form.minLeaseTerm = response.data.extendInfo.minLeaseTerm
+            this.form.workstationMin = response.data.extendInfo.workstationMin
+            this.form.workstationMax = response.data.extendInfo.workstationMax
+            this.form.floorPlanDesc = response.data.extendInfo.floorPlanDesc
+            if (response.data.extendInfo.tags) {
+              this.form.tagIds = response.data.extendInfo.tags.split(',')
+            }
+          }
+
+          // 处理图片数据
+          this.form.imageUrls = []
+          this.form.imageFileIds = []
+          this.imageList = []
+          this.imageFiles = []
+          this.imageFileIds = []
+          if (response.data.roomImages && Array.isArray(response.data.roomImages) && response.data.roomImages.length > 0) {
+            response.data.roomImages.forEach((item, index) => {
+              if (item.fileId) {
+                this.form.imageFileIds.push(item.fileId)
+                this.imageFileIds.push(item.fileId)
+                this.imageList.push({
+                  name: '图片' + (index + 1),
+                  url: `/resource/attachment/downloadAttachment?fileId=${item.fileId}`,
+                  fileId: item.fileId
+                })
+              }
+            })
+          }
+
+          // 处理户型图数据
+          this.form.floorPlanImageUrls = []
+          this.form.floorPlanFileIds = []
+          this.floorPlanImageList = []
+          this.floorPlanFiles = []
+          this.floorPlanFileIds = []
+          if (response.data.floorPlanImages && Array.isArray(response.data.floorPlanImages) && response.data.floorPlanImages.length > 0) {
+            response.data.floorPlanImages.forEach((item, index) => {
+              if (item.fileId) {
+                this.form.floorPlanFileIds.push(item.fileId)
+                this.floorPlanFileIds.push(item.fileId)
+                this.floorPlanImageList.push({
+                  name: '户型图' + (index + 1),
+                  url: `/resource/attachment/downloadAttachment?fileId=${item.fileId}`,
+                  fileId: item.fileId
+                })
+              }
+            })
+          }
+
+          // 加载关联数据
+          this.getProjectOptions().then(() => {
+            if (this.form.projectId) {
+              this.getBuildingOptions(this.form.projectId).then(() => {
+                if (this.form.buildingId) {
+                  this.getFloorOptions(this.form.buildingId)
+                }
+              })
+            }
+          })
+
+          // 如果有业主ID，获取业主详情
+          if (this.form.ownerId) {
+            this.getOwnerDetail(this.form.ownerId)
+          }
+        } else {
+          this.$message.error(response.msg || '获取房源详情失败')
+        }
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+
+    /** 获取项目选项 */
+    getProjectOptions() {
+      getProjectList({ pageSize: 100 }).then(res => {
+        if (res.code === '0000000000000000') {
+          this.projectOptions = res.data.list.map(item => {
+            return { id: item.id, projectName: item.projectName }
+          })
+        }
+      })
+    },
+
+    /** 获取楼宇选项 */
+    getBuildingOptions(projectId) {
+      if (!projectId) {
+        this.buildingOptions = []
+        this.form.buildingId = undefined
+        this.floorOptions = []
+        this.form.floorId = undefined
+        return
+      }
+      const params = {
+        projectId: projectId,
+        pageNum: 1,
+        pageSize: 100,
+      }
+      getBuildingList(params).then(response => {
+        if (response.code === '0000000000000000') {
+          this.buildingOptions = response.data.list || []
+        } else {
+          this.$message.error(response.msg || '获取楼宇列表失败')
+        }
+      })
+    },
+
+    /** 获取楼层选项 */
+    getFloorOptions(buildingId) {
+      if (!buildingId) {
+        this.floorOptions = []
+        this.form.floorId = undefined
+        return
+      }
+      return listFloors(buildingId).then(response => {
+        if (response.code === '0000000000000000') {
+          this.floorOptions = response.data || []
+        } else {
+          this.$message.error(response.msg || '获取楼层列表失败')
+        }
+      })
+    },
+
+    /** 获取房源标签选项 */
+    getTagOptions() {
+      getTagByType({ tagType: "房源标签", tagName: "房源标签" }).then(res => {
+        this.tagOptions = res.data
+      }).catch(() => {
+        this.tagOptions = [
+          { id: '1', tagName: '标签1' },
+          { id: '2', tagName: '标签2' }
+        ]
+      })
+    },
+
+    /** 获取业主详情 */
+    getOwnerDetail(ownerId) {
+      listOwners({ id: ownerId }).then(response => {
+        if (response.code === '0000000000000000' && response.data && response.data.length > 0) {
+          this.ownerOptions = response.data
+        }
+      })
+    },
+
+    /** 远程搜索业主 */
+    remoteSearchOwner(query) {
+      if (query) {
+        this.ownerLoading = true
+        listOwners({ keyword: query }).then(response => {
+          this.ownerLoading = false
+          if (response.code === '0000000000000000') {
+            this.ownerOptions = response.data
+          } else {
+            this.ownerOptions = []
+          }
+        }).catch(() => {
+          this.ownerLoading = false
+        })
+      } else {
+        this.ownerOptions = []
+      }
+    },
+
+    /** 项目选择改变事件 */
+    handleProjectChange(projectId) {
+      // 清空楼宇和楼层的选择
+      this.form.buildingId = undefined
+      this.form.floorId = undefined
+      this.buildingOptions = []
+      this.floorOptions = []
+
+      if (projectId) {
+        this.getBuildingOptions(projectId)
+      }
+    },
+
+    /** 楼宇选择改变事件 */
+    handleBuildingChange(buildingId) {
+      // 清空楼层的选择
+      this.form.floorId = undefined
+      this.floorOptions = []
+
+
+      if (buildingId) {
+        getFloorListByBuilding(buildingId).then(response => {
+          if (response.code === '0000000000000000') {
+            this.floorOptions = response.data || []
+          } else {
+            this.$message.error(response.msg || '获取楼层列表失败')
+          }
+        })
+      }
+    },
+
+    /** 图片预览 */
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+
+    /** 房源图片上传前检查 */
+    handleBeforeImageUpload(file) {
+      const isImage = file.type.indexOf('image/') === 0
+      const isLt5M = file.size / 1024 / 1024 < 5
+
+      if (!isImage) {
+        this.$message.error('上传图片只能是图片格式!')
+        return false
+      }
+      if (!isLt5M) {
+        this.$message.error('上传图片大小不能超过 5MB!')
+        return false
+      }
+      
+      if (this.imageList.length >= 6) {
+        this.$message.error('最多上传6张房源图片!')
+        return false
+      }
+      
+      return true
+    },
+
+    /** 房源图片变化 */
+    handleImageChange(file, fileList) {
+      this.imageFiles = fileList.filter(item => !item.fileId && item.raw)
+      this.imageList = fileList.map(item => {
+        if (item.response) {
+          return {
+            name: item.name, 
+            url: `/resource/attachment/downloadAttachment?fileId=${item.response.data.fileId}`,
+            fileId: item.response.data.fileId
+          }
+        } else {
+          return item
+        }
+      })
+    },
+
+    /** 房源图片删除 */
+    handleImageRemove(file, fileList) {
+      // 如果是已上传的图片，需要从服务器删除
+      if (file.fileId) {
+        this.imageFileIds = this.imageFileIds.filter(id => id !== file.fileId)
+        deleteAttachment(file.fileId).catch(() => {
+          this.$message.error('删除图片失败')
+        })
+      }
+      // 更新文件列表
+      this.imageFiles = this.imageFiles.filter(item => item.uid !== file.uid)
+      this.imageList = fileList
+    },
+
+    /** 户型图上传前检查 */
+    handleBeforeFloorPlanUpload(file) {
+      const isImage = file.type.indexOf('image/') === 0
+      const isLt5M = file.size / 1024 / 1024 < 5
+
+      if (!isImage) {
+        this.$message.error('上传户型图只能是图片格式!')
+        return false
+      }
+      if (!isLt5M) {
+        this.$message.error('上传户型图大小不能超过 5MB!')
+        return false
+      }
+      
+      if (this.floorPlanImageList.length >= 1) {
+        this.$message.error('最多上传1张户型图!')
+        return false
+      }
+      
+      return true
+    },
+
+    /** 户型图变化 */
+    handleFloorPlanChange(file, fileList) {
+      this.floorPlanFiles = fileList.filter(item => !item.fileId && item.raw)
+      this.floorPlanImageList = fileList.map(item => {
+        if (item.response) {
+          return {
+            name: item.name, 
+            url: `/resource/attachment/downloadAttachment?fileId=${item.response.data.fileId}`,
+            fileId: item.response.data.fileId
+          }
+        } else {
+          return item
+        }
+      })
+    },
+
+    /** 户型图删除 */
+    handleFloorPlanImageRemove(file, fileList) {
+      // 如果是已上传的图片，需要从服务器删除
+      if (file.fileId) {
+        this.floorPlanFileIds = this.floorPlanFileIds.filter(id => id !== file.fileId)
+        deleteAttachment(file.fileId).catch(() => {
+          this.$message.error('删除户型图失败')
+        })
+      }
+      // 更新文件列表
+      this.floorPlanFiles = this.floorPlanFiles.filter(item => item.uid !== file.uid)
+      this.floorPlanImageList = fileList
+    },
+
+    /** 上传图片文件 */
+    async uploadImages() {
+      try {
+        // 修改为串行上传图片，而不是并行上传
+        // 先上传房源图片
+        for (const file of this.imageFiles) {
+          if (file.raw) {
+            try {
+              const response = await uploadAttachment(file.raw)
+              if (response.code === '0000000000000000') {
+                this.imageFileIds.push(response.data.fileId)
+              } else {
+                this.$message.error(`房源图片 ${file.name} 上传失败`)
+              }
+            } catch (error) {
+              console.error('上传房源图片失败:', error)
+              this.$message.error(`房源图片 ${file.name} 上传失败`)
+            }
+          }
+        }
+        
+        // 再上传户型图
+        for (const file of this.floorPlanFiles) {
+          if (file.raw) {
+            try {
+              const response = await uploadAttachment(file.raw)
+              if (response.code === '0000000000000000') {
+                this.floorPlanFileIds.push(response.data.fileId)
+              } else {
+                this.$message.error(`户型图 ${file.name} 上传失败`)
+              }
+            } catch (error) {
+              console.error('上传户型图失败:', error)
+              this.$message.error(`户型图 ${file.name} 上传失败`)
+            }
+          }
+        }
+        
+        return true
+      } catch (error) {
+        console.error('上传图片过程中出错:', error)
+        this.$message.error('上传图片过程中出错，请重试')
+        return false
+      }
+    },
+
+    /** 提交表单 */
+    submitForm() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          this.loading = true
+          
+          try {
+            // 先上传所有图片文件
+            await this.uploadImages()
+            
+            // 准备提交数据
+            const formData = {
+              id: this.form.id,
+              projectId: this.form.projectId,
+              buildingId: this.form.buildingId,
+              floorId: this.form.floorId,
+              roomNumber: this.form.roomNumber,
+              roomDigitalNumber: this.form.roomDigitalNumber,
+              roomManageNumber: this.form.roomManageNumber,
+              buildingArea: this.form.buildingArea,
+              rentalArea: this.form.rentalArea,
+              billingArea: this.form.billingArea,
+              innerArea: this.form.innerArea,
+              isVirtual: this.form.isVirtual,
+              deliveryTime: this.formatDate(this.form.deliveryTime),
+              ownerId: this.form.ownerId,
+              propertyNature: this.form.propertyNature,
+              height: this.form.height,
+              loadValue: this.form.loadValue,
+              roomStatus: this.form.roomStatus,
+              roomType: this.form.roomType,
+              remark: this.form.remark,
+
+              // 业务信息
+              businessInfo: {
+                rentalStatus: this.form.rentalStatus,
+                businessStatus: this.form.businessStatus,
+                availableDate: this.formatDate(this.form.availableDate),
+                decorationStatus: this.form.decorationStatus,
+                price: this.form.price,
+                priceUnit: this.form.priceUnit,
+                floorPrice: this.form.floorPrice,
+                floorPriceUnit: this.form.floorPriceUnit,
+                businessNumber: this.form.businessNumber,
+                businessCondition: this.form.businessCondition
+              },
+
+              // 扩展信息
+              extendInfo: {
+                roomRecordNumber: this.form.roomRecordNumber,
+                usageRate: this.form.usageRate,
+                officeLayout: this.form.officeLayout,
+                windowOrientation: this.form.windowOrientation,
+                rentFreePeriod: this.form.rentFreePeriod,
+                minLeaseTerm: this.form.minLeaseTerm,
+                workstationMin: this.form.workstationMin,
+                workstationMax: this.form.workstationMax,
+                floorPlanDesc: this.form.floorPlanDesc,
+                tags: this.form.tagIds ? this.form.tagIds.join(',') : ''
+              },
+
+              // 图片信息 - 使用上传后获取的fileId
+              roomImages: this.imageFileIds.map((fileId, index) => {
+                return {
+                  fileId: fileId,
+                  imageType: '房源图片',
+                  sortOrder: index
+                }
+              }),
+
+              // 户型图信息 - 使用上传后获取的fileId
+              floorPlanImages: this.floorPlanFileIds.map((fileId, index) => {
+                return {
+                  fileId: fileId,
+                  imageType: '户型图',
+                  sortOrder: index
+                }
+              })
+            }
+
+            const method = this.isEdit ? updateRoom : addRoom
+            const response = await method(formData)
+            
+            if (response.code === '0000000000000000') {
+              this.$message.success(this.isEdit ? '修改成功' : '新增成功')
+              this.$emit('refreshList')
+              this.$emit('close')
+            } else {
+              this.$message.error(response.msg || (this.isEdit ? '修改失败' : '新增失败'))
+            }
+          } catch (error) {
+            console.error('提交表单失败', error)
+            this.$message.error(this.isEdit ? '修改失败' : '新增失败')
+          } finally {
+            this.loading = false
+          }
+        }
+      })
+    },
+
+    /** 取消按钮 */
+    cancel() {
+      this.$emit('close')
+    },
+
+    /** 格式化日期为 YYYY-MM-DD */
+    formatDate(date) {
+      if (!date) return ''
+      const d = new Date(date)
+      const year = d.getFullYear()
+      const month = (d.getMonth() + 1).toString().padStart(2, '0')
+      const day = d.getDate().toString().padStart(2, '0')
+      return `${year}-${month}-${day}`
+    },
+
+    /** 处理输入变化 */
+    handleInputChange() {
+      this.$forceUpdate()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.room-form-container {
+  padding: 10px;
+
+  .el-form {
+    margin-top: 10px;
+  }
+
+  .form-footer {
+    text-align: center;
+    margin-top: 20px;
+  }
+
+  ::v-deep .el-form-item__label {
+    width: 120px !important;
+    text-align: right;
+  }
+
+  ::v-deep .el-select .el-input.is-focus .el-input__inner {
+    border-color: #409EFF;
+  }
+
+  ::v-deep .el-input-group__append {
+    padding: 0;
+
+    .el-select {
+      margin: 0;
+    }
+
+    .el-select .el-input__inner {
+      border: none;
+      background-color: #f5f7fa;
+    }
+  }
+
+  ::v-deep .el-upload-list--picture-card .el-upload-list__item {
+    width: 120px;
+    height: 120px;
+  }
+
+  ::v-deep .el-upload--picture-card {
+    width: 120px;
+    height: 120px;
+    line-height: 120px;
+  }
+
+  ::v-deep .el-input-number {
+    width: 100%;
+  }
+
+  ::v-deep .el-input-number .el-input__inner {
+    text-align: left;
+  }
+  
+  .image-upload-tip {
+    font-size: 12px;
+    color: #909399;
+    margin-bottom: 5px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pc/src/views/project/room/index.vue b/pc/src/views/project/room/index.vue
new file mode 100644
index 0000000..b551603
--- /dev/null
+++ b/pc/src/views/project/room/index.vue
@@ -0,0 +1,776 @@
+<template>
+  <div class="app-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>房源列表</span>
+        <el-button-group style="float: right;">
+          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增房源</el-button>
+          <el-button type="primary" icon="el-icon-upload2" size="mini" @click="handleImport">批量导入</el-button>
+          <el-button type="primary" icon="el-icon-download" size="mini" @click="handleExport">批量导出</el-button>
+        </el-button-group>
+      </div>
+      
+      <!-- 标签页切换 -->
+      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
+        <el-tab-pane label="全部房源" name="all"></el-tab-pane>
+        <el-tab-pane label="招商房源" name="commercial"></el-tab-pane>
+      </el-tabs>
+      
+      <!-- 搜索条件 -->
+      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="70px">
+        <el-form-item label="项目" prop="projectId">
+          <el-select v-model="queryParams.projectId" placeholder="请选择项目" clearable 
+                    @change="handleProjectChange" style="width: 240px;">
+            <el-option v-for="item in projectOptions" :key="item.id" :label="item.projectName" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="楼宇" prop="buildingId">
+          <el-select v-model="queryParams.buildingId" placeholder="请选择楼宇" clearable 
+                    @change="handleBuildingChange" style="width: 240px;">
+            <el-option v-for="item in buildingOptions" :key="item.id" :label="item.buildingName" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="楼层" prop="floorId">
+          <el-select v-model="queryParams.floorId" placeholder="请选择楼层" clearable style="width: 240px;">
+            <el-option v-for="item in floorOptions" :key="item.id" :label="item.floorName" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="房号" prop="roomNumber">
+          <el-input v-model="queryParams.roomNumber" placeholder="请输入房号" clearable style="width: 240px;" />
+        </el-form-item>
+        <el-form-item label="标签" prop="tags">
+          <el-select v-model="queryParams.tags" placeholder="请选择房源标签" clearable style="width: 240px;">
+            <el-option v-for="tag in tagOptions" :key="tag.id" :label="tag.tagName" :value="tag.id" />
+          </el-select>
+        </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-button @click="toggleAdvanced" type="text">
+            {{ advanced ? '收起' : '展开' }}
+            <i :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
+          </el-button>
+        </el-form-item>
+      </el-form>
+      
+      <!-- 高级搜索条件，展开时显示 -->
+      <el-form v-show="advanced" :model="queryParams" ref="advancedQueryForm" :inline="true" label-width="100px">
+        <el-form-item label="租赁状态" prop="rentalStatus">
+          <el-select v-model="queryParams.rentalStatus" placeholder="请选择租赁状态" clearable style="width: 240px;">
+            <el-option label="待租" value="1" />
+            <el-option label="已租" value="2" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="activeTab === 'all'" label="招商状态" prop="businessStatus">
+          <el-select v-model="queryParams.businessStatus" placeholder="请选择招商状态" clearable style="width: 240px;">
+            <el-option label="招商" value="1" />
+            <el-option label="不招商" value="2" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="装修情况" prop="decorationStatus">
+          <el-select v-model="queryParams.decorationStatus" placeholder="请选择装修情况" clearable style="width: 240px;">
+            <el-option label="精装" value="1" />
+            <el-option label="简装" value="2" />
+            <el-option label="毛坯" value="3" />
+            <el-option label="标准交付" value="4" />
+            <el-option label="豪装" value="5" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="创建时间">
+          <el-date-picker
+            v-model="dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            style="width: 240px;"
+          />
+        </el-form-item>
+      </el-form>
+      
+      <!-- 列表展示区域 -->
+      <el-table v-loading="loading" :data="roomList" border style="width: 100%; margin-top: 15px;"
+                @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="项目名称" prop="projectName" min-width="140" show-overflow-tooltip />
+        <el-table-column label="楼宇名称" prop="buildingName" min-width="120" show-overflow-tooltip />
+        <el-table-column label="楼层" prop="floorName" min-width="80" />
+        <el-table-column label="房号" prop="roomNumber" min-width="100" />
+        <el-table-column label="计租面积(㎡)" prop="rentalArea" min-width="110" />
+        <el-table-column label="报价" align="center" prop="price" width="150">
+        </el-table-column>
+        <el-table-column label="租赁状态" min-width="100">
+          <template slot-scope="scope">
+            <el-tag :type="scope.row.rentalStatus === '1' ? 'warning' : scope.row.rentalStatus === '2' ? 'success' : 'warning'">
+              {{ scope.row.rentalStatus === '1' ? '待租' : scope.row.rentalStatus === '2' ? '已租' : '暂无' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="装修情况" min-width="100">
+          <template slot-scope="scope">
+            {{ scope.row.decorationStatus === '1' ? '精装' : 
+               scope.row.decorationStatus === '2' ? '简装' : 
+               scope.row.decorationStatus === '3' ? '毛坯' : 
+               scope.row.decorationStatus === '4' ? '标准交付' : 
+               scope.row.decorationStatus === '5' ? '豪装' : '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="交付时间" prop="deliveryTime" min-width="110" />
+        <el-table-column label="可租日期" prop="availableDate" min-width="110" />
+        <el-table-column label="房源标签" min-width="120">
+          <template slot-scope="scope">
+            <el-tag v-for="tag in scope.row.tagList" :key="tag.id" type="info" size="mini" style="margin-right: 4px">
+              {{ tag.tagName }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="虚拟房源" min-width="90">
+          <template slot-scope="scope">
+            {{ scope.row.isVirtual === '1' ? '是' : '否' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="招商状态" min-width="90">
+          <template slot-scope="scope">
+            <el-tag :type="scope.row.businessStatus === '1' ? 'primary' : 'info'">
+              {{ scope.row.businessStatus === '1' ? '招商' : '不招商' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" prop="createTime" min-width="150" />
+        <el-table-column label="操作" width="200" fixed="right">
+          <template slot-scope="scope">
+            <el-button type="text" size="mini" @click="handleDetail(scope.row)">详情</el-button>
+            <el-button type="text" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
+            <el-button type="text" size="mini" @click="handleDelete(scope.row)" style="color: #F56C6C;">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      
+      <!-- 分页 -->
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="queryParams.pageNum"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="queryParams.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        class="pagination">
+      </el-pagination>
+    </el-card>
+    
+    <!-- 导入对话框 -->
+    <el-dialog :title="importTitle" :visible.sync="importOpen" width="400px" append-to-body>
+      <el-upload
+        ref="upload"
+        :limit="1"
+        accept=".xlsx, .xls"
+        :headers="upload.headers"
+        :action="upload.url"
+        :disabled="upload.isUploading"
+        :on-progress="handleFileUploadProgress"
+        :on-success="handleFileSuccess"
+        :auto-upload="false"
+        :http-request="customUploadRequest"
+        drag>
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <div class="el-upload__tip" slot="tip">
+          <el-button type="text" @click="downloadImportTemplate">下载模板</el-button>
+          <div>只允许导入xls、xlsx格式文件。</div>
+        </div>
+      </el-upload>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitFileForm">确 定</el-button>
+        <el-button @click="importOpen = false">取 消</el-button>
+      </div>
+    </el-dialog>
+    
+    <!-- 查看详情对话框 -->
+    <el-dialog :title="viewTitle" :visible.sync="viewOpen" width="900px" append-to-body>
+      <detail-view v-if="viewOpen" :roomId="currentRoomId" />
+    </el-dialog>
+    
+    <!-- 添加/修改房源对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="1100px" append-to-body :close-on-click-modal="false">
+      <room-form 
+        v-if="open" 
+        ref="roomForm" 
+        :roomId="currentRoomId" 
+        :isEdit="isEdit" 
+        @refreshList="getList" 
+        @close="open = false" />
+    </el-dialog>
+    
+  </div>
+</template>
+
+<script>
+import { listRoom, exportRoom, downloadTemplate, importRoom, listRoomTags, listProjects, listBuildings, listFloors, delRoom } from '@/api/room'
+import { getProjectList,getTagByType } from '@/api/project'
+import { getBuildingList,getFloorList,getFloorListByBuilding } from '@/api/building'
+import axios from 'axios'
+
+import DetailView from './components/DetailView'
+import RoomForm from './components/RoomForm'
+
+export default {
+  name: 'ProjectRoom',
+  components: {
+    DetailView,
+    RoomForm
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      advanced: false,
+      // 总条数
+      total: 0,
+      // 房源表格数据
+      roomList: [],
+      // 弹出层标题
+      title: '',
+      // 是否显示弹出层
+      open: false,
+      // 是否显示详情弹出层
+      viewOpen: false,
+      // 是否显示导入弹出层
+      importOpen: false,
+      // 导入标题
+      importTitle: '导入房源数据',
+      // 详情标题
+      viewTitle: '房源详情',
+      // 日期范围
+      dateRange: [],
+      // 当前处理的房源ID
+      currentRoomId: null,
+      // 是否编辑模式
+      isEdit: false,
+      // 当前激活的Tab页
+      activeTab: 'all',
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        projectId: undefined,
+        buildingId: undefined,
+        floorId: undefined,
+        roomNumber: undefined,
+        tags: undefined,
+        rentalStatus: undefined,
+        businessStatus: undefined,
+        decorationStatus: undefined
+      },
+      // 项目选项
+      projectOptions: [],
+      // 楼宇选项
+      buildingOptions: [],
+      // 楼层选项
+      floorOptions: [],
+      // 标签选项
+      tagOptions: [],
+      // 上传参数
+      upload: {
+        // 是否禁用上传
+        isUploading: false,
+        // 设置上传的请求头部
+        headers: { },
+        // 上传的URL
+        url: process.env.VUE_APP_BASE_API + '/room/template/import'
+      }
+    }
+  },
+  created() {
+    this.getList()
+    this.getProjectOptions()
+    this.getTagOptions()
+  },
+  methods: {
+    /** 处理Tab切换 */
+    handleTabClick() {
+      // 重置页码
+      this.queryParams.pageNum = 1
+      
+      if (this.activeTab === 'all') {
+        // 全部房源，清除businessStatus的查询条件
+        this.queryParams.businessStatus = undefined
+      } else if (this.activeTab === 'commercial') {
+        // 招商房源，设置businessStatus为1
+        this.queryParams.businessStatus = '1'
+      }
+      
+      // 重新加载列表
+      this.getList()
+    },
+    
+    /** 获取房源列表 */
+    getList() {
+      this.loading = true
+      
+      // 添加日期范围参数
+      const params = {...this.queryParams}
+      if (this.dateRange && this.dateRange.length > 0) {
+        params.beginTime = this.dateRange[0]
+        params.endTime = this.dateRange[1]
+      }
+      
+      listRoom(params).then(response => {
+        if (response.code === '0000000000000000') {
+          this.roomList = response.data.list || []
+          
+          // 处理房源标签回显
+          this.updateRoomTagsList()
+          
+          this.total = response.data.total
+        } else {
+          this.$message.error(response.msg || '获取房源列表失败')
+          this.roomList = []
+          this.total = 0
+        }
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    
+    /** 获取项目选项 */
+    getProjectOptions() {
+        // 调用项目列表接口获取项目选项
+      getProjectList({ pageSize: 100 }).then(res => {
+        if (res.code === '0000000000000000') {
+          this.projectOptions = res.data.list.map(item => {
+            return { id: item.id, projectName: item.projectName }
+          })
+        }
+      })
+    },
+    
+    /** 获取楼宇选项 */
+    getBuildingOptions(projectId) {
+      if (!projectId) {
+        this.buildingOptions = []
+        this.queryParams.buildingId = undefined
+        this.floorOptions = []
+        this.queryParams.floorId = undefined
+        return
+      }
+      const params = {
+        projectId: projectId,
+        pageNum: 1,
+        pageSize: 100,
+      }
+      getBuildingList(params).then(response => {
+        if (response.code === '0000000000000000') {
+          this.buildingOptions = response.data.list || []
+        } else {
+          this.$message.error(response.msg || '获取楼宇列表失败')
+        }
+      })
+    },
+    
+    /** 获取楼层选项 */
+    getFloorOptions(buildingId) {
+      if (!buildingId) {
+        this.floorOptions = []
+        this.queryParams.floorId = undefined
+        return
+      }
+      
+      listFloors(buildingId).then(response => {
+        if (response.code === '0000000000000000') {
+          this.floorOptions = response.data || []
+        } else {
+          this.$message.error(response.msg || '获取楼层列表失败')
+        }
+      })
+    },
+    
+    /** 获取房源标签选项 */
+    getTagOptions() {
+      getTagByType({ tagType: "房源标签", tagName: "房源标签" }).then(res => {
+        if (res.code === '0000000000000000' && res.data) {
+          this.tagOptions = res.data
+        } else {
+          this.$message.warning('获取房源标签失败，将使用默认标签')
+          this.tagOptions = [
+            { id: '1', tagName: '标签1' },
+            { id: '2', tagName: '标签2' }
+          ]
+        }
+        // 标签加载完成后刷新列表以正确显示标签
+        if (this.roomList.length > 0) {
+          this.updateRoomTagsList()
+        }
+      }).catch(() => {
+        this.$message.warning('获取房源标签失败，将使用默认标签')
+        this.tagOptions = [
+          { id: '1', tagName: '标签1' },
+          { id: '2', tagName: '标签2' }
+        ]
+      })
+    },
+    
+    /** 更新房源列表的标签显示 */
+    updateRoomTagsList() {
+      this.roomList.forEach(room => {
+        if (room.tags) {
+          const tagIds = room.tags.split(',');
+          room.tagList = tagIds.map(tagId => {
+            const tag = this.tagOptions.find(t => t.id === tagId);
+            return tag || { id: tagId, tagName: `标签${tagId}` };
+          });
+        } else {
+          room.tagList = [];
+        }
+      });
+    },
+    
+    /** 项目选择改变事件 */
+    handleProjectChange(projectId) {
+      // 清空楼宇和楼层的选择
+      this.queryParams.buildingId = undefined
+      this.queryParams.floorId = undefined
+      this.buildingOptions = []
+      this.floorOptions = []
+      
+      if (projectId) {
+        this.getBuildingOptions(projectId)
+      }
+    },
+    
+    /** 楼宇选择改变事件 */
+    handleBuildingChange(buildingId) {
+      // 清空楼层的选择
+      this.queryParams.floorId = undefined
+      this.floorOptions = []
+      
+      if (buildingId) {
+        getFloorListByBuilding(buildingId).then(response => {
+          if (response.code === '0000000000000000') {
+            this.floorOptions = response.data || []
+          } else {
+            this.$message.error(response.msg || '获取楼层列表失败')
+          }
+        })
+      }
+    },
+    
+    /** 查询房源列表 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    
+    /** 重置查询条件 */
+    resetQuery() {
+      this.dateRange = []
+      
+      // 使用Element UI表单的resetFields方法重置表单
+      if (this.$refs.queryForm) {
+        this.$refs.queryForm.resetFields()
+      }
+      
+      if (this.$refs.advancedQueryForm) {
+        this.$refs.advancedQueryForm.resetFields()
+      }
+      
+      // 保持当前Tab的状态
+      const tabBusinessStatus = this.activeTab === 'commercial' ? '1' : undefined
+      
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        projectId: undefined,
+        buildingId: undefined,
+        floorId: undefined,
+        roomNumber: undefined,
+        tags: undefined,
+        rentalStatus: undefined,
+        businessStatus: tabBusinessStatus,
+        decorationStatus: undefined
+      }
+      
+      this.buildingOptions = []
+      this.floorOptions = []
+      this.handleQuery()
+    },
+    
+    /** 切换高级搜索 */
+    toggleAdvanced() {
+      this.advanced = !this.advanced
+    },
+    
+    /** 多选框选中数据 */
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    
+    /** 导出房源数据 */
+    handleExport() {
+      const params = {...this.queryParams}
+      if (this.dateRange && this.dateRange.length > 0) {
+        params.beginTime = this.dateRange[0]
+        params.endTime = this.dateRange[1]
+      }
+      
+      this.$confirm('是否确认导出查询房源数据?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.loading = true
+        exportRoom(params).then(response => {
+          this.download(response, '房源信息.xlsx')
+          this.loading = false
+        }).catch(() => {
+          this.loading = false
+        })
+      })
+    },
+    
+    /** 下载导入模板 */
+    downloadImportTemplate() {
+      downloadTemplate().then(response => {
+        this.download(response, 'room_import.xlsx')
+      })
+    },
+    
+    /** 导入按钮操作 */
+    handleImport() {
+      this.importOpen = true
+    },
+    
+    /** 文件上传中处理 */
+    handleFileUploadProgress() {
+      this.upload.isUploading = true
+    },
+    
+    /** 文件上传成功处理 */
+    handleFileSuccess(response) {
+      this.upload.isUploading = false
+      this.$refs.upload.clearFiles()
+      this.importOpen = false
+      
+      // 检查响应是否为Blob类型（文件流）
+      if (response instanceof Blob) {
+        // 是文件流，直接下载错误文件
+        this.$alert('导入失败，正在下载错误文件', '导入结果', { type: 'error' })
+        this.download(response, `房源导入错误文件_${new Date().getTime()}.xlsx`)
+        return
+      }
+      
+      // 检查响应码
+      if (response.code === '0000000000000000') {
+        this.$alert(response.data.message || '导入成功', '导入结果', { type: 'success' })
+        this.getList()
+      } else {
+        // 如果是普通错误响应
+        this.$alert(response.msg || '导入失败', '导入结果', { type: 'error' })
+        // 如果有错误文件，下载错误文件
+        if (response.data && response.data.errorFile) {
+          this.download(response.data.errorFile, `房源导入错误文件_${new Date().getTime()}.xlsx`)
+        }
+      }
+    },
+    
+    /** 提交上传文件 */
+    submitFileForm() {
+      this.$refs.upload.submit()
+    },
+    
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.currentRoomId = null
+      this.isEdit = false
+      this.title = '新增房源'
+      this.open = true
+    },
+    
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.currentRoomId = row.id
+      this.isEdit = true
+      this.title = '修改房源'
+      this.open = true
+    },
+    
+    /** 查看详情按钮操作 */
+    handleDetail(row) {
+      this.currentRoomId = row.id
+      this.viewTitle = '房源详情'
+      this.viewOpen = true
+    },
+    
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const roomId = row.id
+      this.$confirm('是否确认删除该房源？删除后所有相关信息将被清除', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        delRoom(roomId).then(response => {
+          if (response.code === '0000000000000000') {
+            this.$message.success('删除成功')
+            this.getList()
+          } else {
+            this.$message.error(response.msg || '删除失败')
+          }
+        })
+      }).catch(() => {})
+    },
+    
+    /** 分页大小改变 */
+    handleSizeChange(val) {
+      this.queryParams.pageSize = val
+      this.getList()
+    },
+    
+    /** 分页页码改变 */
+    handleCurrentChange(val) {
+      this.queryParams.pageNum = val
+      this.getList()
+    },
+    
+    /** 获取价格单位文本 */
+    getPriceUnitText(unitType) {
+      if (!unitType) return '';
+      const unitMap = {
+        '1': '元/㎡·天',
+        '2': '元/㎡·月',
+        '3': '元/月',
+        '4': '元/天',
+        '5': '元/年'
+      };
+      return unitMap[unitType] || '';
+    },
+    
+    /** 自定义上传请求 */
+    customUploadRequest(options) {
+      this.upload.isUploading = true
+      const { file, onSuccess, onError, onProgress } = options
+      
+      // 创建FormData
+      const formData = new FormData()
+      formData.append('file', file)
+      
+      // 使用axios发送请求，设置responseType为blob
+      axios.post(this.upload.url, formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+          ...this.upload.headers
+        },
+        responseType: 'blob', // 指定响应类型为blob
+        onUploadProgress: (progressEvent) => {
+          onProgress({
+            percent: (progressEvent.loaded / progressEvent.total * 100).toFixed(2)
+          })
+        }
+      }).then(response => {
+        // 检查响应头，判断是否为Excel文件
+        const contentType = response.headers['content-type']
+        const contentDisposition = response.headers['content-disposition']
+        
+        // 如果是Excel文件，表示导入失败，返回错误文件
+        if (contentType && (
+            contentType.includes('excel') || 
+            contentType.includes('spreadsheetml') ||
+            contentType === 'application/octet-stream')) {
+          // 返回Blob对象
+          onSuccess(response.data)
+        } else {
+          // 是JSON响应，需要解析
+          const reader = new FileReader()
+          reader.onload = () => {
+            try {
+              const jsonResponse = JSON.parse(reader.result)
+              onSuccess(jsonResponse)
+            } catch (error) {
+              // 如果无法解析为JSON，则视为二进制文件
+              onSuccess(response.data)
+            }
+          }
+          reader.onerror = () => {
+            onError(new Error('解析响应失败'))
+          }
+          reader.readAsText(response.data)
+        }
+      }).catch(error => {
+        onError(error)
+        this.upload.isUploading = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  .el-card {
+    margin-bottom: 20px;
+  }
+  
+  .el-table {
+    margin-top: 15px;
+  }
+  
+  .el-tag + .el-tag {
+    margin-left: 3px;
+  }
+  
+  .pagination {
+    margin-top: 15px;
+    text-align: right;
+  }
+  
+  .el-form {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+  
+  ::v-deep .el-upload-dragger {
+    width: 100%;
+  }
+  
+  ::v-deep .el-upload {
+    width: 100%;
+  }
+  
+  .el-select {
+    display: block;
+  }
+  
+  ::v-deep .el-input__inner {
+    height: 32px;
+    line-height: 32px;
+  }
+  
+  ::v-deep .el-input--suffix .el-input__inner {
+    padding-right: 30px;
+  }
+  
+  /* 确保表格内容垂直居中 */
+  ::v-deep .el-table td, ::v-deep .el-table th {
+    padding: 8px 0;
+  }
+}
+::v-deep .el-range-separator {
+  width: 30px !important;  /* 增加分隔符宽度 */
+  padding: 0 5px !important;
+  line-height: 25px !important;
+}
+::v-deep .el-date-editor .el-range__icon {
+  line-height: 25px !important;
+}
+</style> 
\ No newline at end of file
diff --git a/pc/src/views/system/department-member/index.vue b/pc/src/views/system/department-member/index.vue
new file mode 100644
index 0000000..9f843fb
--- /dev/null
+++ b/pc/src/views/system/department-member/index.vue
@@ -0,0 +1,946 @@
+<template>
+  <div class="app-container">
+    <el-tabs v-model="activeTab" type="border-card">
+      <!-- 部门管理 tab -->
+      <el-tab-pane label="部门管理" name="department">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>部门管理</span>
+            <el-button style="float: right; padding: 3px 0" type="text" @click="handleAddDepartment">新增部门</el-button>
+          </div>
+          
+          <el-table
+            v-loading="departmentLoading"
+            :data="departmentList"
+            row-key="id"
+            border
+            default-expand-all
+            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+          >
+            <el-table-column type="selection" width="55" />
+            <el-table-column prop="name" label="部门名称" />
+            <el-table-column prop="level" label="部门层级" />
+            <el-table-column prop="memberCount" label="部门人数" sortable />
+            <el-table-column prop="leader" label="部门负责人" />
+            <el-table-column label="操作" width="220">
+              <template slot-scope="scope">
+                <el-button type="text" @click="handleEditDepartment(scope.row)">编辑</el-button>
+                <el-button type="text" @click="handleAddSubDepartment(scope.row)">添加子部门</el-button>
+                <el-button type="text" class="delete-btn" @click="handleDeleteDepartment(scope.row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </el-tab-pane>
+
+      <!-- 成员管理 tab -->
+      <el-tab-pane label="成员管理" name="member">
+        <el-card class="box-card">
+          <div class="member-container">
+            <!-- 左侧部门树 -->
+            <div class="department-tree">
+              <div class="tree-header">
+                <el-input
+                  v-model="deptSearchValue"
+                  placeholder="搜索部门"
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  clearable
+                />
+              </div>
+              <div class="tree-content">
+                <el-tree
+                  ref="deptTree"
+                  :data="departmentList"
+                  :props="{ label: 'name', children: 'children' }"
+                  node-key="id"
+                  highlight-current
+                  :filter-node-method="filterNode"
+                  @node-click="handleNodeClick"
+                >
+                  <span slot-scope="{ node, data }" class="custom-tree-node">
+                    <span>{{ node.label }}</span>
+                    <span class="member-count">({{ data.memberCount || 0 }})</span>
+                  </span>
+                </el-tree>
+              </div>
+            </div>
+
+            <!-- 右侧成员列表 -->
+            <div class="member-list">
+              <div class="member-header">
+                <div class="header-title">
+                  <span>{{ selectedDeptName || '全部' }}</span>
+                  <span class="member-count">{{ total }}人</span>
+                </div>
+                <div class="header-actions">
+                  <el-button type="primary" size="small" @click="handleAddMember">添加成员</el-button>
+                  <el-button type="primary" plain size="small" @click="handleImportMember">申请入列表</el-button>
+                  <el-dropdown>
+                    <el-button type="text" size="small">
+                      更多<i class="el-icon-arrow-down el-icon--right"></i>
+                    </el-button>
+                    <el-dropdown-menu slot="dropdown">
+                      <el-dropdown-item>导出Excel</el-dropdown-item>
+                      <el-dropdown-item>打印</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                </div>
+              </div>
+
+              <div class="member-filter">
+                <el-radio-group v-model="queryParams.status" size="small" @change="handleStatusChange">
+                  <el-radio-button label="">全部</el-radio-button>
+                  <el-radio-button label="1">正常</el-radio-button>
+                  <el-radio-button label="0">未激活</el-radio-button>
+                </el-radio-group>
+              </div>
+
+              <el-table
+                v-loading="memberLoading"
+                :data="memberList"
+                row-key="id"
+                border
+              >
+                <el-table-column type="selection" width="55" />
+                <el-table-column prop="name" label="姓名" width="120" />
+                <el-table-column prop="status" label="账号状态" width="100">
+                  <template #default="scope">
+                    <el-tag :type="scope.row.status === '1' ? 'success' : 'danger'">
+                      {{ scope.row.status === '1' ? '正常' : '禁用' }}
+                    </el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="employeeId" label="工号" width="100" />
+                <el-table-column prop="position" label="职位" width="120" />
+                <el-table-column prop="phone" label="手机" width="120" />
+                <el-table-column prop="deptName" label="部门" width="120" />
+                <el-table-column prop="gender" label="性别" width="80">
+                  <template #default="scope">
+                    {{ scope.row.gender === '1' ? '男' : '女' }}
+                  </template>
+                </el-table-column>
+                <el-table-column prop="entryDate" label="入职时间" width="120" />
+                <el-table-column label="操作" width="180">
+                  <template #default="scope">
+                    <el-button type="primary" size="small" @click="handleEditMember(scope.row)">编辑</el-button>
+                    <el-button type="danger" size="small" @click="handleDeleteMember(scope.row)">删除</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+
+              <el-pagination
+                :current-page="queryParams.pageNum"
+                :page-sizes="[10, 20, 30, 40]"
+                :page-size="queryParams.pageSize"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="total"
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+              />
+            </div>
+          </div>
+        </el-card>
+      </el-tab-pane>
+    </el-tabs>
+
+    <!-- 部门对话框 -->
+    <el-dialog :title="departmentTitle" :visible.sync="departmentOpen" width="500px" append-to-body>
+      <el-form ref="departmentForm" :model="departmentForm" :rules="departmentRules" label-width="80px">
+        <el-form-item label="上级部门" prop="parentId">
+          <treeselect
+            v-model="departmentForm.parentId"
+            :options="departmentOptions"
+            :normalizer="normalizer"
+            placeholder="选择上级部门"
+          />
+        </el-form-item>
+        <el-form-item label="部门名称" prop="name">
+          <el-input v-model="departmentForm.name" placeholder="请输入部门名称" />
+        </el-form-item>
+        <el-form-item label="部门层级" prop="level">
+          <el-input v-model="departmentForm.level" placeholder="请输入部门层级" disabled />
+        </el-form-item>
+        <el-form-item label="负责人" prop="leader">
+          <el-input v-model="departmentForm.leader" placeholder="请输入负责人" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitDepartmentForm">确 定</el-button>
+        <el-button @click="cancelDepartment">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 成员对话框 -->
+    <el-dialog :title="memberTitle" :visible.sync="memberOpen" width="500px" append-to-body>
+      <el-form ref="memberForm" :model="memberForm" :rules="memberRules" label-width="80px">
+        <el-form-item label="姓名" prop="name">
+          <el-input v-model="memberForm.name" placeholder="请输入姓名" />
+        </el-form-item>
+        <el-form-item label="所属部门" prop="deptId">
+          <treeselect
+            v-model="memberForm.deptId"
+            :options="departmentOptions"
+            :normalizer="normalizer"
+            placeholder="选择部门"
+          />
+        </el-form-item>
+        <el-form-item label="职位" prop="position">
+          <el-input v-model="memberForm.position" placeholder="请输入职位" />
+        </el-form-item>
+        <el-form-item label="联系电话" prop="phone">
+          <el-input v-model="memberForm.phone" placeholder="请输入联系电话" />
+        </el-form-item>
+        <el-form-item label="邮箱" prop="email">
+          <el-input v-model="memberForm.email" placeholder="请输入邮箱" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="memberForm.status">
+            <el-radio label="1">在职</el-radio>
+            <el-radio label="0">离职</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitMemberForm">确 定</el-button>
+        <el-button @click="cancelMember">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+
+export default {
+  name: 'DepartmentMember',
+  components: { Treeselect },
+  data() {
+    return {
+      // 当前激活的 tab
+      activeTab: 'department',
+      // 部门相关数据
+      departmentLoading: true,
+      departmentList: [],
+      departmentOptions: [],
+      departmentTitle: '',
+      departmentOpen: false,
+      departmentForm: {},
+      departmentRules: {
+        name: [
+          { required: true, message: '部门名称不能为空', trigger: 'blur' }
+        ],
+        leader: [
+          { required: true, message: '负责人不能为空', trigger: 'blur' }
+        ]
+      },
+      // 成员相关数据
+      memberLoading: true,
+      memberList: [],
+      total: 0,
+      memberTitle: '',
+      memberOpen: false,
+      memberForm: {},
+      memberRules: {
+        name: [
+          { required: true, message: '姓名不能为空', trigger: 'blur' }
+        ],
+        deptId: [
+          { required: true, message: '所属部门不能为空', trigger: 'change' }
+        ]
+      },
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: undefined,
+        deptId: undefined
+      },
+      deptSearchValue: '',
+      selectedDeptName: ''
+    }
+  },
+  mounted() {
+    this.getDepartmentList()
+    this.getMemberList()
+  },
+  methods: {
+    /** 获取部门列表 */
+    getDepartmentList() {
+      this.departmentLoading = true
+      // 这里添加获取部门列表的API调用
+      setTimeout(() => {
+        this.departmentList = [
+          {
+            id: 1,
+            name: '小红马演示园区',
+            level: '分公司',
+            memberCount: 19,
+            leader: '张三',
+            children: [
+              {
+                id: 2,
+                name: '技术部',
+                level: '分公司',
+                memberCount: 8,
+                leader: '李四',
+                children: [
+                  {
+                    id: 21,
+                    name: '技术1组',
+                    level: '分公司',
+                    memberCount: 4,
+                    leader: '王五'
+                  },
+                  {
+                    id: 22,
+                    name: '技术2组',
+                    level: '分公司',
+                    memberCount: 4,
+                    leader: '赵六'
+                  }
+                ]
+              },
+              {
+                id: 3,
+                name: '成都分公司',
+                level: '分公司',
+                memberCount: 5,
+                leader: '王七',
+                children: [
+                  {
+                    id: 31,
+                    name: '管理部门',
+                    level: '分公司',
+                    memberCount: 5,
+                    leader: '刘八'
+                  }
+                ]
+              },
+              {
+                id: 4,
+                name: '安防部',
+                level: '分公司',
+                memberCount: 3,
+                leader: '钱九',
+                children: [
+                  {
+                    id: 41,
+                    name: '保安',
+                    level: '分公司',
+                    memberCount: 3,
+                    leader: '孙十'
+                  }
+                ]
+              },
+              {
+                id: 5,
+                name: '保洁部',
+                level: '分公司',
+                memberCount: 2,
+                leader: '周十一',
+                children: [
+                  {
+                    id: 51,
+                    name: '电梯保洁',
+                    level: '分公司',
+                    memberCount: 1,
+                    leader: '吴十二'
+                  },
+                  {
+                    id: 52,
+                    name: '楼道保洁',
+                    level: '分公司',
+                    memberCount: 1,
+                    leader: '郑十三'
+                  }
+                ]
+              },
+              {
+                id: 6,
+                name: '巡检部门',
+                level: '分公司',
+                memberCount: 1,
+                leader: '冯十四'
+              },
+              {
+                id: 7,
+                name: '客服部',
+                level: '分公司',
+                memberCount: 1,
+                leader: '陈十五'
+              },
+              {
+                id: 8,
+                name: '维修部',
+                level: '分公司',
+                memberCount: 1,
+                leader: '褚十六'
+              }
+            ]
+          }
+        ]
+        this.departmentOptions = this.departmentList
+        this.departmentLoading = false
+      }, 500)
+    },
+    /** 获取成员列表 */
+    getMemberList() {
+      this.memberLoading = true
+      // 这里添加获取成员列表的API调用
+      setTimeout(() => {
+        // 根据部门ID筛选成员
+        let filteredList = [
+          {
+            id: 1,
+            name: '小马',
+            deptId: 21,
+            deptName: '技术1组',
+            status: '1',
+            phone: '13800138001',
+            gender: '1',
+            employeeId: 'EMP001',
+            position: '高级工程师',
+            entryDate: '2023-01-15'
+          },
+          {
+            id: 2,
+            name: '罗卜',
+            deptId: 21,
+            deptName: '技术1组',
+            status: '1',
+            phone: '13800138002',
+            gender: '2',
+            employeeId: 'EMP002',
+            position: '前端工程师',
+            entryDate: '2023-02-20'
+          },
+          {
+            id: 3,
+            name: '车轮',
+            deptId: 21,
+            deptName: '技术1组',
+            status: '1',
+            phone: '13800138003',
+            gender: '1',
+            employeeId: 'EMP003',
+            position: '后端工程师',
+            entryDate: '2023-03-10'
+          },
+          {
+            id: 4,
+            name: '刘斌',
+            deptId: 21,
+            deptName: '技术1组',
+            status: '1',
+            phone: '13800138004',
+            gender: '1',
+            employeeId: 'EMP004',
+            position: '测试工程师',
+            entryDate: '2023-04-05'
+          },
+          {
+            id: 5,
+            name: '王师傅',
+            deptId: 22,
+            deptName: '技术2组',
+            status: '1',
+            phone: '13800138005',
+            gender: '1',
+            employeeId: 'EMP005',
+            position: '技术主管',
+            entryDate: '2023-01-01'
+          },
+          {
+            id: 6,
+            name: '王鹏飞',
+            deptId: 22,
+            deptName: '技术2组',
+            status: '1',
+            phone: '13800138006',
+            gender: '1',
+            employeeId: 'EMP006',
+            position: '高级工程师',
+            entryDate: '2023-02-15'
+          },
+          {
+            id: 7,
+            name: '正容',
+            deptId: 22,
+            deptName: '技术2组',
+            status: '1',
+            phone: '13800138007',
+            gender: '2',
+            employeeId: 'EMP007',
+            position: 'UI设计师',
+            entryDate: '2023-03-20'
+          },
+          {
+            id: 8,
+            name: '王小二',
+            deptId: 22,
+            deptName: '技术2组',
+            status: '1',
+            phone: '13800138008',
+            gender: '1',
+            employeeId: 'EMP008',
+            position: '运维工程师',
+            entryDate: '2023-04-10'
+          },
+          {
+            id: 9,
+            name: '张三',
+            deptId: 31,
+            deptName: '管理部门',
+            status: '1',
+            phone: '13800138009',
+            gender: '1',
+            employeeId: 'EMP009',
+            position: '部门经理',
+            entryDate: '2023-01-05'
+          },
+          {
+            id: 10,
+            name: '李四',
+            deptId: 31,
+            deptName: '管理部门',
+            status: '1',
+            phone: '13800138010',
+            gender: '1',
+            employeeId: 'EMP010',
+            position: '行政主管',
+            entryDate: '2023-02-01'
+          },
+          {
+            id: 11,
+            name: '王五',
+            deptId: 31,
+            deptName: '管理部门',
+            status: '1',
+            phone: '13800138011',
+            gender: '1',
+            employeeId: 'EMP011',
+            position: '人力资源',
+            entryDate: '2023-03-15'
+          },
+          {
+            id: 12,
+            name: '赵六',
+            deptId: 31,
+            deptName: '管理部门',
+            status: '1',
+            phone: '13800138012',
+            gender: '2',
+            employeeId: 'EMP012',
+            position: '财务主管',
+            entryDate: '2023-04-01'
+          },
+          {
+            id: 13,
+            name: '钱七',
+            deptId: 31,
+            deptName: '管理部门',
+            status: '1',
+            phone: '13800138013',
+            gender: '2',
+            employeeId: 'EMP013',
+            position: '会计',
+            entryDate: '2023-05-10'
+          },
+          {
+            id: 14,
+            name: '孙八',
+            deptId: 41,
+            deptName: '保安',
+            status: '1',
+            phone: '13800138014',
+            gender: '1',
+            employeeId: 'EMP014',
+            position: '保安队长',
+            entryDate: '2023-01-10'
+          },
+          {
+            id: 15,
+            name: '周九',
+            deptId: 41,
+            deptName: '保安',
+            status: '1',
+            phone: '13800138015',
+            gender: '1',
+            employeeId: 'EMP015',
+            position: '保安',
+            entryDate: '2023-02-15'
+          },
+          {
+            id: 16,
+            name: '吴十',
+            deptId: 41,
+            deptName: '保安',
+            status: '1',
+            phone: '13800138016',
+            gender: '1',
+            employeeId: 'EMP016',
+            position: '保安',
+            entryDate: '2023-03-20'
+          },
+          {
+            id: 17,
+            name: '郑十一',
+            deptId: 51,
+            deptName: '电梯保洁',
+            status: '1',
+            phone: '13800138017',
+            gender: '2',
+            employeeId: 'EMP017',
+            position: '保洁员',
+            entryDate: '2023-01-20'
+          },
+          {
+            id: 18,
+            name: '王十二',
+            deptId: 52,
+            deptName: '楼道保洁',
+            status: '1',
+            phone: '13800138018',
+            gender: '2',
+            employeeId: 'EMP018',
+            position: '保洁员',
+            entryDate: '2023-02-25'
+          },
+          {
+            id: 19,
+            name: '冯十三',
+            deptId: 6,
+            deptName: '巡检部门',
+            status: '0',
+            phone: '13800138019',
+            gender: '1',
+            employeeId: 'EMP019',
+            position: '巡检员',
+            entryDate: '2023-03-30'
+          }
+        ]
+
+        // 如果有部门ID筛选，则过滤数据（包含子部门）
+        if (this.queryParams.deptId) {
+          // 获取所选部门及其所有子部门的ID
+          const deptIds = this.getChildDeptIds(this.queryParams.deptId)
+          filteredList = filteredList.filter(item => deptIds.includes(item.deptId))
+        }
+
+        // 如果有状态筛选，则过滤数据
+        if (this.queryParams.status) {
+          filteredList = filteredList.filter(item => item.status === this.queryParams.status)
+        }
+
+        this.memberList = filteredList
+        this.total = filteredList.length
+        this.memberLoading = false
+      }, 500)
+    },
+    /** 获取部门及其所有子部门的ID */
+    getChildDeptIds(deptId) {
+      const ids = []
+      
+      const collectIds = (dept) => {
+        ids.push(dept.id)
+        if (dept.children) {
+          dept.children.forEach(child => {
+            collectIds(child)
+          })
+        }
+      }
+
+      const findDepartment = (deptList) => {
+        for (const dept of deptList) {
+          if (dept.id === deptId) {
+            collectIds(dept)
+            return true
+          }
+          if (dept.children && findDepartment(dept.children)) {
+            return true
+          }
+        }
+        return false
+      }
+
+      findDepartment(this.departmentList)
+      return ids
+    },
+    /** 转换部门数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children
+      }
+      return {
+        id: node.id,
+        label: node.name,
+        children: node.children
+      }
+    },
+    // 部门相关方法
+    handleAddDepartment() {
+      this.departmentForm = {
+        id: undefined,
+        parentId: undefined,
+        name: undefined,
+        level: undefined,
+        leader: undefined
+      }
+      this.departmentTitle = '添加部门'
+      this.departmentOpen = true
+    },
+    handleEditDepartment(row) {
+      this.departmentForm = row
+      this.departmentTitle = '修改部门'
+      this.departmentOpen = true
+    },
+    handleDeleteDepartment(row) {
+      this.$confirm('是否确认删除名称为"' + row.name + '"的数据项?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 这里添加删除部门的API调用
+        this.$message.success('删除成功')
+        this.getDepartmentList()
+      })
+    },
+    submitDepartmentForm() {
+      this.$refs['departmentForm'].validate(valid => {
+        if (valid) {
+          // 这里添加新增或修改部门的API调用
+          this.$message.success('操作成功')
+          this.departmentOpen = false
+          this.getDepartmentList()
+        }
+      })
+    },
+    cancelDepartment() {
+      this.departmentOpen = false
+      this.$refs['departmentForm'].resetFields()
+    },
+    handleAddSubDepartment(row) {
+      this.departmentForm = {
+        id: undefined,
+        parentId: row.id,
+        name: undefined,
+        level: row.level + 1,
+        leader: undefined
+      }
+      this.departmentTitle = '添加子部门'
+      this.departmentOpen = true
+    },
+    // 成员相关方法
+    handleAddMember() {
+      this.memberForm = {
+        id: undefined,
+        name: undefined,
+        deptId: undefined,
+        position: undefined,
+        phone: undefined,
+        email: undefined,
+        status: '1'
+      }
+      this.memberTitle = '添加成员'
+      this.memberOpen = true
+    },
+    handleEditMember(row) {
+      this.memberForm = row
+      this.memberTitle = '修改成员'
+      this.memberOpen = true
+    },
+    handleDeleteMember(row) {
+      this.$confirm('是否确认删除姓名为"' + row.name + '"的数据项?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 这里添加删除成员的API调用
+        this.$message.success('删除成功')
+        this.getMemberList()
+      })
+    },
+    submitMemberForm() {
+      this.$refs['memberForm'].validate(valid => {
+        if (valid) {
+          // 这里添加新增或修改成员的API调用
+          this.$message.success('操作成功')
+          this.memberOpen = false
+          this.getMemberList()
+        }
+      })
+    },
+    cancelMember() {
+      this.memberOpen = false
+      this.$refs['memberForm'].resetFields()
+    },
+    // 查询相关方法
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getMemberList()
+    },
+    resetQuery() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        name: undefined,
+        deptId: undefined
+      }
+      this.getMemberList()
+    },
+    handleSizeChange(val) {
+      this.queryParams.pageSize = val
+      this.getMemberList()
+    },
+    handleCurrentChange(val) {
+      this.queryParams.pageNum = val
+      this.getMemberList()
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.name.indexOf(value) !== -1;
+    },
+    handleNodeClick(node) {
+      this.selectedDeptName = node.label;
+      this.queryParams.deptId = node.id;
+      this.getMemberList();
+    },
+    handleStatusChange() {
+      this.getMemberList();
+    },
+    handleDetail(row) {
+      // 实现详情功能
+    },
+    handleImportMember() {
+      // 实现申请入列表功能
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-container {
+  padding: 20px;
+  height: 100%;
+}
+
+.el-tabs {
+  margin-bottom: 20px;
+  height: calc(100vh - 60px);
+  display: flex;
+  flex-direction: column;
+}
+
+.el-tabs ::v-deep .el-tabs__content {
+  flex: 1;
+  overflow: hidden;
+}
+
+.el-tabs ::v-deep .el-tab-pane {
+  height: 100%;
+}
+
+.el-card {
+  height: 100%;
+}
+
+.delete-btn {
+  color: #F56C6C;
+}
+
+.el-button + .el-button {
+  margin-left: 6px;
+}
+
+.member-container {
+  display: flex;
+  height: calc(100vh - 180px);
+  min-height: 500px;
+}
+
+.department-tree {
+  width: 280px;
+  border-right: 1px solid #e6e6e6;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.tree-header {
+  padding: 10px;
+  border-bottom: 1px solid #e6e6e6;
+}
+
+.tree-content {
+  flex: 1;
+  overflow: auto;
+  padding: 10px;
+}
+
+.member-list {
+  flex: 1;
+  padding: 0 20px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.member-header {
+  padding: 16px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-title {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.header-title .member-count {
+  font-size: 14px;
+  color: #909399;
+  margin-left: 8px;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.member-filter {
+  margin-bottom: 16px;
+}
+
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+
+.custom-tree-node .member-count {
+  font-size: 12px;
+  color: #909399;
+}
+
+.el-table {
+  flex: 1;
+  overflow: hidden;
+}
+
+.el-table ::v-deep .el-table__body-wrapper {
+  overflow-y: auto;
+  height: calc(100% - 40px);
+}
+
+.el-pagination {
+  margin-top: 20px;
+  padding: 10px 0;
+}
+</style> 
\ No newline at end of file
diff --git a/pc/src/views/system/department/index.vue b/pc/src/views/system/department/index.vue
new file mode 100644
index 0000000..c9d8699
--- /dev/null
+++ b/pc/src/views/system/department/index.vue
@@ -0,0 +1,203 @@
+<template>
+  <div class="app-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>部门管理</span>
+        <el-button style="float: right; padding: 3px 0" type="text" @click="handleAdd">新增部门</el-button>
+      </div>
+      
+      <el-table
+        v-loading="loading"
+        :data="departmentList"
+        row-key="id"
+        border
+        default-expand-all
+        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+      >
+        <el-table-column prop="name" label="部门名称" />
+        <el-table-column prop="code" label="部门编码" />
+        <el-table-column prop="leader" label="负责人" />
+        <el-table-column prop="phone" label="联系电话" />
+        <el-table-column prop="email" label="邮箱" />
+        <el-table-column label="操作" width="200">
+          <template slot-scope="scope">
+            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
+            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <!-- 添加或修改部门对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="上级部门" prop="parentId">
+          <treeselect
+            v-model="form.parentId"
+            :options="departmentOptions"
+            :normalizer="normalizer"
+            placeholder="选择上级部门"
+          />
+        </el-form-item>
+        <el-form-item label="部门名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入部门名称" />
+        </el-form-item>
+        <el-form-item label="部门编码" prop="code">
+          <el-input v-model="form.code" placeholder="请输入部门编码" />
+        </el-form-item>
+        <el-form-item label="负责人" prop="leader">
+          <el-input v-model="form.leader" placeholder="请输入负责人" />
+        </el-form-item>
+        <el-form-item label="联系电话" prop="phone">
+          <el-input v-model="form.phone" placeholder="请输入联系电话" />
+        </el-form-item>
+        <el-form-item label="邮箱" prop="email">
+          <el-input v-model="form.email" placeholder="请输入邮箱" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+
+export default {
+  name: 'Department',
+  components: { Treeselect },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 部门表格数据
+      departmentList: [],
+      // 部门树选项
+      departmentOptions: [],
+      // 弹出层标题
+      title: '',
+      // 是否显示弹出层
+      open: false,
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        name: [
+          { required: true, message: '部门名称不能为空', trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: '部门编码不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    /** 查询部门列表 */
+    getList() {
+      this.loading = true
+      // 这里添加获取部门列表的API调用
+      setTimeout(() => {
+        this.departmentList = [
+          {
+            id: 1,
+            name: '总公司',
+            code: 'HQ',
+            leader: '张三',
+            phone: '13800138000',
+            email: 'zhangsan@example.com',
+            children: [
+              {
+                id: 2,
+                name: '技术部',
+                code: 'TECH',
+                leader: '李四',
+                phone: '13800138001',
+                email: 'lisi@example.com'
+              }
+            ]
+          }
+        ]
+        this.loading = false
+      }, 500)
+    },
+    /** 转换部门数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children
+      }
+      return {
+        id: node.id,
+        label: node.name,
+        children: node.children
+      }
+    },
+    /** 取消按钮 */
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    /** 表单重置 */
+    reset() {
+      this.form = {
+        id: undefined,
+        parentId: undefined,
+        name: undefined,
+        code: undefined,
+        leader: undefined,
+        phone: undefined,
+        email: undefined
+      }
+      this.resetForm('form')
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+      this.open = true
+      this.title = '添加部门'
+    },
+    /** 修改按钮操作 */
+    handleEdit(row) {
+      this.reset()
+      this.form = row
+      this.open = true
+      this.title = '修改部门'
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$confirm('是否确认删除名称为"' + row.name + '"的数据项?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 这里添加删除部门的API调用
+        this.$message.success('删除成功')
+        this.getList()
+      })
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          // 这里添加新增或修改部门的API调用
+          this.$message.success('操作成功')
+          this.open = false
+          this.getList()
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-container {
+  padding: 20px;
+}
+</style> 
\ No newline at end of file
diff --git a/pc/src/views/system/index.vue b/pc/src/views/system/index.vue
new file mode 100644
index 0000000..0519ecb
--- /dev/null
+++ b/pc/src/views/system/index.vue
@@ -0,0 +1 @@
+ 
\ No newline at end of file
diff --git a/pc/src/views/system/member/index.vue b/pc/src/views/system/member/index.vue
new file mode 100644
index 0000000..a9ded78
--- /dev/null
+++ b/pc/src/views/system/member/index.vue
@@ -0,0 +1,285 @@
+<template>
+  <div class="app-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>成员管理</span>
+        <el-button style="float: right; padding: 3px 0" type="text" @click="handleAdd">新增成员</el-button>
+      </div>
+
+      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
+        <el-form-item label="部门">
+          <treeselect
+            v-model="queryParams.deptId"
+            :options="departmentOptions"
+            :normalizer="normalizer"
+            placeholder="选择部门"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="姓名">
+          <el-input
+            v-model="queryParams.name"
+            placeholder="请输入姓名"
+            clearable
+            size="small"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="mini" @click="handleQuery">查询</el-button>
+          <el-button size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+
+      <el-table
+        v-loading="loading"
+        :data="memberList"
+        row-key="id"
+        border
+      >
+        <el-table-column type="index" label="序号" width="50" />
+        <el-table-column prop="name" label="姓名" />
+        <el-table-column prop="deptName" label="所属部门" />
+        <el-table-column prop="position" label="职位" />
+        <el-table-column prop="phone" label="联系电话" />
+        <el-table-column prop="email" label="邮箱" />
+        <el-table-column prop="status" label="状态">
+          <template slot-scope="scope">
+            <el-tag :type="scope.row.status === '1' ? 'success' : 'info'">
+              {{ scope.row.status === '1' ? '在职' : '离职' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200">
+          <template slot-scope="scope">
+            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
+            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+        :current-page="queryParams.pageNum"
+        :page-sizes="[10, 20, 30, 40]"
+        :page-size="queryParams.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </el-card>
+
+    <!-- 添加或修改成员对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="姓名" prop="name">
+          <el-input v-model="form.name" placeholder="请输入姓名" />
+        </el-form-item>
+        <el-form-item label="所属部门" prop="deptId">
+          <treeselect
+            v-model="form.deptId"
+            :options="departmentOptions"
+            :normalizer="normalizer"
+            placeholder="选择部门"
+          />
+        </el-form-item>
+        <el-form-item label="职位" prop="position">
+          <el-input v-model="form.position" placeholder="请输入职位" />
+        </el-form-item>
+        <el-form-item label="联系电话" prop="phone">
+          <el-input v-model="form.phone" placeholder="请输入联系电话" />
+        </el-form-item>
+        <el-form-item label="邮箱" prop="email">
+          <el-input v-model="form.email" placeholder="请输入邮箱" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio label="1">在职</el-radio>
+            <el-radio label="0">离职</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+
+export default {
+  name: 'Member',
+  components: { Treeselect },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 总条数
+      total: 0,
+      // 成员表格数据
+      memberList: [],
+      // 部门树选项
+      departmentOptions: [],
+      // 弹出层标题
+      title: '',
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: undefined,
+        deptId: undefined
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        name: [
+          { required: true, message: '姓名不能为空', trigger: 'blur' }
+        ],
+        deptId: [
+          { required: true, message: '所属部门不能为空', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  mounted() {
+    this.getList()
+    this.getDepartmentOptions()
+  },
+  methods: {
+    /** 查询成员列表 */
+    getList() {
+      this.loading = true
+      // 这里添加获取成员列表的API调用
+      setTimeout(() => {
+        this.memberList = [
+          {
+            id: 1,
+            name: '张三',
+            deptName: '技术部',
+            position: '工程师',
+            phone: '13800138000',
+            email: 'zhangsan@example.com',
+            status: '1'
+          }
+        ]
+        this.total = 1
+        this.loading = false
+      }, 500)
+    },
+    /** 获取部门选项 */
+    getDepartmentOptions() {
+      // 这里添加获取部门选项的API调用
+      this.departmentOptions = [
+        {
+          id: 1,
+          name: '总公司',
+          children: [
+            {
+              id: 2,
+              name: '技术部'
+            }
+          ]
+        }
+      ]
+    },
+    /** 转换部门数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children
+      }
+      return {
+        id: node.id,
+        label: node.name,
+        children: node.children
+      }
+    },
+    /** 取消按钮 */
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    /** 表单重置 */
+    reset() {
+      this.form = {
+        id: undefined,
+        name: undefined,
+        deptId: undefined,
+        position: undefined,
+        phone: undefined,
+        email: undefined,
+        status: '1'
+      }
+      this.resetForm('form')
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm('queryForm')
+      this.handleQuery()
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+      this.open = true
+      this.title = '添加成员'
+    },
+    /** 修改按钮操作 */
+    handleEdit(row) {
+      this.reset()
+      this.form = row
+      this.open = true
+      this.title = '修改成员'
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$confirm('是否确认删除姓名为"' + row.name + '"的数据项?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 这里添加删除成员的API调用
+        this.$message.success('删除成功')
+        this.getList()
+      })
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          // 这里添加新增或修改成员的API调用
+          this.$message.success('操作成功')
+          this.open = false
+          this.getList()
+        }
+      })
+    },
+    /** 分页大小改变 */
+    handleSizeChange(val) {
+      this.queryParams.pageSize = val
+      this.getList()
+    },
+    /** 分页页码改变 */
+    handleCurrentChange(val) {
+      this.queryParams.pageNum = val
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-container {
+  padding: 20px;
+}
+</style> 
\ No newline at end of file
diff --git a/pc/vue.config.js b/pc/vue.config.js
new file mode 100644
index 0000000..63e0e94
--- /dev/null
+++ b/pc/vue.config.js
@@ -0,0 +1,24 @@
+module.exports = {
+  publicPath: '/',
+  outputDir: 'dist',
+  assetsDir: 'static',
+  productionSourceMap: false,
+  devServer: {
+    port: 8080,
+    open: true,
+    overlay: {
+      warnings: false,
+      errors: true
+    },
+    proxy: {
+      '/': {
+        target: 'http://192.168.137.3:8080/api/api',
+        // target: 'http://192.168.137.45:8080',
+        changeOrigin: true,
+        pathRewrite: {
+          '^/api': '/api'
+        }
+      }
+    }
+  }
+} 
\ No newline at end of file
diff --git a/园区前端.zip b/园区前端.zip
new file mode 100644
index 0000000..def265b
Binary files /dev/null and b/园区前端.zip differ
diff --git a/园区前端/h5.zip b/园区前端/h5.zip
new file mode 100644
index 0000000..4707fef
Binary files /dev/null and b/园区前端/h5.zip differ
diff --git a/园区前端/pc.zip b/园区前端/pc.zip
new file mode 100644
index 0000000..3e9b0d1
Binary files /dev/null and b/园区前端/pc.zip differ