diff --git a/package.json b/package.json
index fe3c2b5..621d8de 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,9 @@
 {
   "dependencies": {
+    "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
index 6a0355f..445b3c2 100644
--- a/pc/.env.development
+++ b/pc/.env.development
@@ -1,4 +1,4 @@
 NODE_ENV = 'development'
 
 # 开发环境API地址
-VUE_APP_BASE_API = http://192.168.137.3:8080/api
\ No newline at end of file
+VUE_APP_BASE_API = http://192.168.137.38:8080
\ No newline at end of file
diff --git a/pc/src/api/finance.js b/pc/src/api/finance.js
index 3c9eccf..3a17024 100644
--- a/pc/src/api/finance.js
+++ b/pc/src/api/finance.js
@@ -90,4 +90,171 @@ export function deleteFeeType(id) {
     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'
+  })
 } 
\ 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..b42ca97
--- /dev/null
+++ b/pc/src/api/merchant.js
@@ -0,0 +1,255 @@
+import request from '@/utils/request'
+
+// 招商团队相关API
+export function getMerchantTeamList(params) {
+  return request({
+    url: '/business/team/list',
+    method: 'get',
+    params
+  })
+}
+
+export function addMerchantTeam(data) {
+  return request({
+    url: '/business/team',
+    method: 'post',
+    data
+  })
+}
+
+export function updateMerchantTeam(data) {
+  return request({
+    url: '/business/team',
+    method: 'put',
+    data
+  })
+}
+
+export function deleteMerchantTeam(id) {
+  return request({
+    url: `/business/team/${id}`,
+    method: 'delete'
+  })
+}
+
+// 招商人员相关API
+export function getMerchantPersonnelList(params) {
+  return request({
+    url: '/business/personnel/list',
+    method: 'get',
+    params
+  })
+}
+
+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: '/business/personnel',
+    method: 'post',
+    data
+  })
+}
+
+export function removeMerchantPersonnel(id) {
+  return request({
+    url: `/business/personnel/${id}`,
+    method: 'delete'
+  })
+}
+
+// 成员管理相关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
+  })
+} 
\ 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/router/index.js b/pc/src/router/index.js
index c653802..58d4b6c 100644
--- a/pc/src/router/index.js
+++ b/pc/src/router/index.js
@@ -4,6 +4,7 @@ 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)
 
@@ -30,6 +31,7 @@ const routes = [
   systemRoutes,
   projectRoutes,
   financeRoutes,
+  merchantRoutes,
   {
     path: '/asset',
     component: Layout,
diff --git a/pc/src/router/modules/finance.js b/pc/src/router/modules/finance.js
index b78ee1d..e0769ee 100644
--- a/pc/src/router/modules/finance.js
+++ b/pc/src/router/modules/finance.js
@@ -12,6 +12,12 @@ export default {
       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' }
     }
   ]
 } 
\ 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/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
index bb89bc2..29134d3 100644
--- a/pc/src/utils/request.js
+++ b/pc/src/utils/request.js
@@ -1,9 +1,10 @@
 import axios from 'axios'
 import { Message } from 'element-ui'
+import { API_SUCCESS_CODE } from './constants'
 
 // 创建axios实例
 const service = axios.create({
-  // baseURL: '/api', // 修改为相对路径，使用代理
+  // baseURL: '/', // 修改为相对路径，使用代理
   baseURL: process.env.VUE_APP_BASE_API, // 使用环境变量中的接口地址
 
   timeout: 10000 // 请求超时时间
@@ -30,8 +31,8 @@ service.interceptors.response.use(
     }
     
     const res = response.data
-    // 如果返回的状态码不是000000，则判断为错误
-    if (res.code !== '000000') {
+    // 如果返回的状态码不是成功码，则判断为错误
+    if (res.code !== API_SUCCESS_CODE) {
       Message({
         message: res.msg || res.message || '系统错误',
         type: 'error',
diff --git a/pc/src/views/finance/feeType/index.vue b/pc/src/views/finance/feeType/index.vue
index c63e33a..083e8f7 100644
--- a/pc/src/views/finance/feeType/index.vue
+++ b/pc/src/views/finance/feeType/index.vue
@@ -162,6 +162,7 @@ import {
     updateFeeType,
     deleteFeeType
 } from '@/api/finance'
+import { API_SUCCESS_CODE } from '@/utils/constants'
 
 export default {
     name: 'FeeTypeManagement',
@@ -238,7 +239,7 @@ export default {
         // 获取分类列表
         getCategoryList() {
             getAllFeeCategories().then(response => {
-                if (response.code === '000000') {
+                if (response.code === API_SUCCESS_CODE) {
                     this.categoryList = response.data
                     if (this.categoryList.length > 0 && !this.selectedCategoryId) {
                         this.handleCategorySelect(this.categoryList[0].id.toString())
@@ -253,7 +254,7 @@ export default {
             if (this.categoryQuery) {
                 const params = { categoryName: this.categoryQuery, pageNum: 1, pageSize: 100 }
                 getFeeCategories(params).then(response => {
-                    if (response.code === '000000') {
+                    if (response.code === API_SUCCESS_CODE) {
                         this.categoryList = response.data.list
                     } else {
                         this.$message.error(response.message || '查询失败')
@@ -275,7 +276,7 @@ export default {
         getTypeList() {
             this.loading = true
             getFeeTypes(this.queryParams).then(response => {
-                if (response.code === '000000') {
+                if (response.code === API_SUCCESS_CODE) {
                     this.typeList = response.data.list
                     this.total = response.data.total
                 } else {
@@ -329,7 +330,7 @@ export default {
         // 编辑分类操作
         handleEditCategory(row) {
             getFeeCategory(row.id).then(response => {
-                if (response.code === '000000') {
+                if (response.code === API_SUCCESS_CODE) {
                     const categoryData = response.data
                     // 确保保证金类型字段是字符串
                     if (categoryData.feeTpNo !== undefined) {
@@ -353,7 +354,7 @@ export default {
                 if (valid) {
                     if (this.categoryForm.id) {
                         updateFeeCategory(this.categoryForm.id, this.categoryForm).then(response => {
-                            if (response.code === '000000') {
+                            if (response.code === API_SUCCESS_CODE) {
                                 this.$message.success('修改成功')
                                 this.categoryOpen = false
                                 this.getCategoryList()
@@ -363,7 +364,7 @@ export default {
                         })
                     } else {
                         addFeeCategory(this.categoryForm).then(response => {
-                            if (response.code === '000000') {
+                            if (response.code === API_SUCCESS_CODE) {
                                 this.$message.success('新增成功')
                                 this.categoryOpen = false
                                 this.getCategoryList()
@@ -383,7 +384,7 @@ export default {
                 type: 'warning'
             }).then(() => {
                 deleteFeeCategory(row.id).then(response => {
-                    if (response.code === '000000') {
+                    if (response.code === API_SUCCESS_CODE) {
                         this.$message.success('删除成功')
                         this.getCategoryList()
                         // 如果删除的是当前选中的分类，重置选中状态
@@ -423,7 +424,7 @@ export default {
         // 修改费用类型按钮操作
         handleEditType(row) {
             getFeeType(row.id).then(response => {
-                if (response.code === '000000') {
+                if (response.code === API_SUCCESS_CODE) {
                     // 先设置数据
                     const typeData = response.data
                     // 确保所有字段都是字符串类型
@@ -461,7 +462,7 @@ export default {
 
                     if (this.typeForm.id) {
                         updateFeeType(this.typeForm.id, submitData).then(response => {
-                            if (response.code === '000000') {
+                            if (response.code === API_SUCCESS_CODE) {
                                 this.$message.success('修改成功')
                                 this.typeOpen = false
                                 this.getTypeList()
@@ -471,7 +472,7 @@ export default {
                         })
                     } else {
                         addFeeType(submitData).then(response => {
-                            if (response.code === '000000') {
+                            if (response.code === API_SUCCESS_CODE) {
                                 this.$message.success('新增成功')
                                 this.typeOpen = false
                                 this.getTypeList()
@@ -491,7 +492,7 @@ export default {
                 type: 'warning'
             }).then(() => {
                 deleteFeeType(row.id).then(response => {
-                    if (response.code === '000000') {
+                    if (response.code === API_SUCCESS_CODE) {
                         this.$message.success('删除成功')
                         this.getTypeList()
                     } else {
@@ -519,7 +520,7 @@ export default {
         // 加载完整的分类列表
         loadFullCategoryList() {
             getAllFeeCategories().then(response => {
-                if (response.code === '000000') {
+                if (response.code === API_SUCCESS_CODE) {
                     this.categoryList = response.data
                 }
             })
diff --git a/pc/src/views/finance/receiptSetting/PayeeInfo.vue b/pc/src/views/finance/receiptSetting/PayeeInfo.vue
new file mode 100644
index 0000000..41c2c02
--- /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.payeeNameUnitName" 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="payeeNameUnitName" label="收款方单位名称" />
+      <el-table-column prop="payeeName" label="收款人" />
+      <el-table-column prop="addr" label="地址" />
+      <el-table-column prop="contTel" 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="payeeNameUnitName">
+          <el-input v-model="form.payeeNameUnitName" placeholder="请输入收款方单位名称" />
+        </el-form-item>
+        <el-form-item label="收款人" prop="payeeName">
+          <el-input v-model="form.payeeName" placeholder="请输入收款人" />
+        </el-form-item>
+        <el-form-item label="地址" prop="addr">
+          <el-input v-model="form.addr" placeholder="请输入地址" />
+        </el-form-item>
+        <el-form-item label="电话" prop="contTel">
+          <el-input v-model="form.contTel" 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,
+        payeeNameUnitName: ''
+      },
+      
+      // 加载状态
+      loading: false,
+      
+      // 收款方信息列表
+      payeeList: [],
+      total: 0,
+      
+      // 收款方信息
+      payeeInfo: {
+        companyId: '',
+        payeeNameUnitName: '',
+        payeeName: '',
+        addr: '',
+        contTel: '',
+        buildingIds: []
+      },
+      
+      // 楼宇选项
+      buildingOptions: [],
+      
+      // 公司选项
+      companyOptions: [],
+      
+      // 楼宇树形数据
+      buildingTreeData: [],
+      buildingPopoverVisible: false,
+      buildingProps: {
+        label: 'label',
+        children: 'children'
+      },
+      
+      // 对话框显示状态
+      dialogVisible: false,
+      deleteDialogVisible: false,
+      
+      // 是否为编辑模式
+      isEdit: false,
+      
+      // 当前操作的ID
+      currentId: null,
+      
+      // 表单数据
+      form: {
+        companyId: '',
+        payeeNameUnitName: '',
+        payeeName: '',
+        addr: '',
+        contTel: '',
+        buildingIds: [],
+        buildingNames: ''
+      },
+      
+      // 表单校验规则
+      rules: {
+        companyId: [
+          { required: true, message: '请选择关联公司', trigger: 'change' }
+        ],
+        payeeNameUnitName: [
+          { required: true, message: '请输入收款方单位名称', trigger: 'blur' }
+        ],
+        payeeName: [
+          { required: true, message: '请输入收款人', trigger: 'blur' }
+        ],
+        contTel: [
+          { 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',
+            payeeNameUnitName: '智慧园区管理有限公司',
+            payeeName: '张三',
+            addr: '北京市海淀区中关村大街1号',
+            contTel: '13800138000',
+            buildingIds: 'BLD001,BLD002'
+          }]
+          this.total = 1
+        }
+        this.loading = false
+      }).catch(error => {
+        console.error('获取收款方信息列表失败', error)
+        this.$message.error('获取收款方信息列表失败')
+        
+        // 模拟数据
+        this.payeeList = [{
+          id: 1,
+          companyId: 'COM001',
+          payeeNameUnitName: '智慧园区管理有限公司',
+          payeeName: '张三',
+          addr: '北京市海淀区中关村大街1号',
+          contTel: '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,
+        payeeNameUnitName: ''
+      }
+      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: '',
+        payeeNameUnitName: '',
+        payeeName: '',
+        addr: '',
+        contTel: '',
+        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..1fa99d8
--- /dev/null
+++ b/pc/src/views/finance/receiptSetting/ReceiptTemplate.vue
@@ -0,0 +1,940 @@
+<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 => {
+        // 处理文件下载
+        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 => {
+        // 处理文件下载
+        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/merchant/clue-management/index.vue b/pc/src/views/merchant/clue-management/index.vue
new file mode 100644
index 0000000..ff17d85
--- /dev/null
+++ b/pc/src/views/merchant/clue-management/index.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="clue-management-container">
+    <h1>线索管理页面</h1>
+    <p>这里是线索管理的内容，根据需求继续完善</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ClueManagement',
+  data() {
+    return {
+      
+    }
+  },
+  created() {
+    
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.clue-management-container {
+  padding: 20px;
+}
+</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..53b525d
--- /dev/null
+++ b/pc/src/views/merchant/intent-customer/index.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="intent-customer-container">
+    <h1>意向客户页面</h1>
+    <p>这里是意向客户的内容，根据需求继续完善</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'IntentCustomer',
+  data() {
+    return {
+      
+    }
+  },
+  created() {
+    
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.intent-customer-container {
+  padding: 20px;
+}
+</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..5935e24
--- /dev/null
+++ b/pc/src/views/merchant/merchant-personnel/index.vue
@@ -0,0 +1,1559 @@
+<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 prop="memberName" label="招商人名称" />
+          <el-table-column prop="phone" label="招商人电话" />
+          <el-table-column prop="teamName" label="所属团队" />
+          <el-table-column prop="managerFlagDesc" label="是否经理" align="center" />
+          <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.id" :label="item.name" :value="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="managerName" label="招商经理" />
+          <el-table-column prop="memberCount" label="团队数量" align="center" />
+          <el-table-column prop="projects" label="绑定项目" />
+          <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
+      @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 }} {{ teamForm.managerPhone ? `(${teamForm.managerPhone})` : '' }}
+          </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.id" :label="item.name" :value="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.deptName}}</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,
+  getMerchantPersonnelList,
+  getPersonnelByTeamId,
+  getPersonnelDetail,
+  addMerchantPersonnel,
+  removeMerchantPersonnel,
+  getDepartmentTree,
+  getDepartmentMemberTree,
+  getManagerList,
+  getMemberList,
+  getMembersByDeptId,
+  getMemberDetail,
+  getProjectList
+} 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: []
+      },
+      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: [],
+        memberNames: []
+      },
+      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.getTeamList()
+    this.getPersonnelList()
+    this.getProjects()
+    this.initMockData() // 初始化模拟数据
+  },
+  methods: {
+    // 初始化模拟数据
+    initMockData() {
+      // 模拟项目数据
+      this.projectOptions = [
+        { id: '1', name: '高新科技园区' },
+        { id: '2', name: '软件产业园' },
+        { id: '3', name: '文创产业园' },
+        { id: '4', name: '生物医药园区' },
+        { id: '5', name: '智能制造基地' }
+      ]
+
+      // 模拟部门数据
+      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' }
+      ]
+    },
+
+    // 获取项目列表
+    async getProjects() {
+      try {
+        const res = await getProjectList()
+        if (res && res.code === '0000000000000000') {
+        this.projectOptions = res.data
+        }
+      } catch (error) {
+        console.error('获取项目列表失败', error)
+        // 使用模拟数据
+      }
+    },
+
+    // 获取团队列表
+    async getTeamList() {
+      this.teamLoading = true
+      try {
+        const res = await getMerchantTeamList(this.teamQueryParams)
+        if (res && res.code === '0000000000000000') {
+          // 确保团队数据包含完整的项目信息
+          this.teamTableList = (res.data.data || []).map(team => {
+            // 如果返回的数据中没有projectIds，但有projects字符串，则构建projectIds
+            if ((!team.projects || team.projects.length === 0) && team.projects) {
+              // 尝试构建projectIds
+              const projectNames = team.projects.split('，');
+              const projects = [];
+              projectNames.forEach(name => {
+                const project = this.projectOptions.find(p => p.name === name.trim());
+                if (project) {
+                  projects.push(project.id);
+                }
+              });
+              return { ...team, projects };
+            }
+            return team;
+          });
+          
+          this.teamTotal = res.data.total || 0
+        // 更新团队选项
+        this.teamOptions = this.teamTableList.map(item => ({
+          id: item.id,
+          teamName: item.teamName
+        }))
+        }
+      } catch (error) {
+        console.error('获取团队列表失败', error)
+        // 模拟一些数据
+        this.teamTableList = [
+          {
+            id: '1',
+            teamName: '园区招商团队A',
+            managerName: '张三',
+            memberCount: 5,
+            projects: '高新科技园区，软件产业园',
+            createTime: '2023-05-15'
+          },
+          {
+            id: '2',
+            teamName: '园区招商团队B',
+            managerName: '李四',
+            memberCount: 8,
+            projects: '文创产业园，智能制造基地',
+            createTime: '2023-06-20'
+          }
+        ]
+        this.teamTotal = 2
+        this.teamOptions = this.teamTableList.map(item => ({
+          id: item.id,
+          teamName: item.teamName
+        }))
+      } finally {
+        this.teamLoading = false
+      }
+    },
+
+    // 获取人员列表
+    async getPersonnelList() {
+      this.loading = true
+      try {
+        // 将查询参数名称从name改为memberName
+        const params = {
+          ...this.queryParams,
+          memberName: this.queryParams.memberName
+        }
+        delete params.name
+
+        const res = await getMerchantPersonnelList(params)
+        if (res && res.code === '0000000000000000') {
+          this.personnelList = res.data.data || []
+          this.total = res.data.total || 0
+        } else {
+          this.$message.error(res.message || '获取人员列表失败')
+          this.personnelList = []
+          this.total = 0
+        }
+      } catch (error) {
+        console.error('获取人员列表失败', error)
+        this.$message.error('获取人员列表失败')
+        this.personnelList = []
+        this.total = 0
+      } finally {
+        this.loading = false
+      }
+    },
+
+    // 添加团队
+    handleAddTeam() {
+      // 首先关闭可能打开的弹窗
+      this.teamDialogVisible = false
+      
+      // 重置临时选择的招商经理数据
+      this.tempSelectedMember = null
+      this.tempSelectedMemberId = null
+      this.tempSelectedMembers = []
+      
+      // 设置对话框标题和表单数据
+      this.teamDialogTitle = '新增招商团队'
+      this.teamForm = {
+        id: undefined,
+        teamName: '',
+        managerId: '',
+        managerName: '',
+        managerPhone: '',
+        projectIds: []
+      }
+      
+      // 确保在打开新增团队弹窗时重置表单验证状态
+      this.$nextTick(() => {
+        // 打开弹窗
+      this.teamDialogVisible = true
+        
+        // 重置表单
+        if (this.$refs.teamFormRef) {
+          this.$refs.teamFormRef.resetFields()
+          this.$refs.teamFormRef.clearValidate()
+        }
+      })
+    },
+
+    // 编辑团队
+    handleEditTeam(row) {
+      // 首先关闭可能打开的弹窗
+      this.teamDialogVisible = false
+      
+      // 设置对话框标题
+      this.teamDialogTitle = '编辑招商团队'
+      console.log(row);
+      
+      
+      // 设置表单数据
+      this.teamForm = {
+        id: row.id,
+        teamName: row.teamName,
+        managerId: row.managerId,
+        managerName: row.managerName,
+        managerPhone: row.managerPhone || '',
+        projectIds: row.projects || []
+      }
+      this.selectedMember = {
+        id: row.managerId,
+        name: row.managerName,
+        phone: row.managerPhone || ''
+      }
+      
+      // 解析绑定项目字段，如果projectIds为空但有projects字段，则尝试从projects中提取项目ID
+      if (!this.teamForm.projectIds || this.teamForm.projectIds.length === 0) {
+        if (row.projects) {
+          // 尝试从projects字符串中提取项目ID
+          const projectNames = row.projects.split('，');
+          const projectIds = [];
+          projectNames.forEach(name => {
+            const project = this.projectOptions.find(p => p.name === name.trim());
+            if (project) {
+              projectIds.push(project.id);
+            }
+          });
+          this.teamForm.projectIds = 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.$nextTick(() => {
+        // 打开弹窗
+      this.teamDialogVisible = true
+        
+        if (this.$refs.teamFormRef) {
+          // 清除表单校验状态
+          this.$refs.teamFormRef.clearValidate();
+          // 手动触发验证以确保状态更新
+          if (this.teamForm.managerId) {
+            this.$refs.teamFormRef.validateField('managerId');
+          }
+        }
+      });
+    },
+
+    // 开启招商经理选择对话框
+    openManagerDialog() {
+      console.log('开启招商经理选择对话框，当前teamForm:', this.teamForm);
+      
+      // 先重置所有成员的选中状态
+      this.resetMembersCheckStatus()
+      
+      // 如果已选择经理，找到对应的成员对象
+      if (this.teamForm.managerId && this.teamForm.managerName) {
+        // 在allMembers中查找对应成员
+        const manager = this.allMembers.find(m => m.id === this.teamForm.managerId);
+        
+        if (manager) {
+          console.log('找到对应成员:', 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;
+          
+          // 立即更新选中状态，确保UI更新
+          this.$set(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 {
+          console.log('未找到对应成员，使用表单数据');
+          // 如果在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 {
+        console.log('没有选择经理');
+        this.tempSelectedMemberId = null;
+        this.tempSelectedMember = null;
+        this.tempSelectedMembers = [];
+      }
+      
+      // 展开部门
+      this.expandDepartments();
+      
+      // 设置选择模式和其他参数
+      this.memberDialogVisible = true;
+      this.memberType = 'member';
+      this.memberSearchKeyword = '';
+      this.selectionMode = 'single'; // 单选模式
+    },
+    
+    // 展开部门
+    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(async valid => {
+        if (valid) {
+          try {
+            const submitData = {
+              ...this.teamForm,
+              // 保证三个数据都传给后端
+              managerId: this.teamForm.managerId,
+              managerName: this.teamForm.managerName,
+              managerPhone: this.teamForm.managerPhone
+            }
+
+            if (this.teamForm.id) {
+              // 编辑
+              const res = await updateMerchantTeam(submitData)
+              if (res && res.code === '0000000000000000') {
+              this.$message.success('编辑成功')
+              } else {
+                this.$message.error(res.message || '编辑失败')
+                return
+              }
+            } else {
+              // 新增
+              const res = await addMerchantTeam(submitData)
+              if (res && res.code === '0000000000000000') {
+              this.$message.success('新增成功')
+              } else {
+                this.$message.error(res.message || '新增失败')
+                return
+            }
+            }
+            this.handleCloseTeamDialog()
+            this.getTeamList()
+            // 更新人员列表
+            this.getPersonnelList()
+          } catch (error) {
+            console.error('提交失败', error)
+            this.$message.error('操作失败')
+          }
+        }
+      })
+    },
+
+    // 提交人员表单
+    submitPersonnelForm() {
+      if (this.selectedMembers.length === 0) {
+        this.$message.warning('请选择人员')
+        return
+      }
+
+      this.$refs.personnelFormRef.validate(async valid => {
+        if (valid) {
+          try {
+            // 批量添加人员
+            let successCount = 0
+            let failCount = 0
+            
+            for (const member of this.selectedMembers) {
+              const data = {
+                teamId: this.personnelForm.teamId,
+                memberId: member.id,
+                memberName: member.name,
+                phone: member.phone || ''
+              }
+              
+              try {
+                const res = await addMerchantPersonnel(data)
+                if (res && res.code === '0000000000000000') {
+                  successCount++
+                } else {
+                  failCount++
+                }
+              } catch (error) {
+                console.error('添加人员失败', error)
+                failCount++
+              }
+            }
+            
+            if (successCount > 0) {
+              this.$message.success(`成功添加${successCount}名人员`)
+              this.handleClosePersonnelDialog()
+            this.getPersonnelList()
+              this.getTeamList()
+            }
+            
+            if (failCount > 0) {
+              this.$message.warning(`${failCount}名人员添加失败`)
+            }
+          } catch (error) {
+            console.error('提交失败', error)
+            this.$message.error('操作失败')
+          }
+        }
+      })
+    },
+    
+    // 移除已选择的人员
+    removeMember(member) {
+      const index = this.selectedMembers.findIndex(item => item.id === member.id)
+      if (index !== -1) {
+        this.selectedMembers.splice(index, 1)
+      }
+    },
+
+    // 处理成员选择器确认
+    handleMemberSelectorConfirm(result) {
+      if (this.selectionMode === 'single') {
+        // 单选模式（招商经理）
+        // 设置团队表单中的经理信息
+        this.teamForm.managerId = result.id
+        this.teamForm.managerName = result.name
+        this.teamForm.managerPhone = result.phone || ''
+      } else {
+        // 多选模式（招商人员）
+        // 更新已选招商人员列表
+        this.selectedMembers = [...result]
+        
+        // 更新表单数据
+        this.personnelForm.memberIds = this.selectedMembers.map(member => member.id)
+        this.personnelForm.memberNames = this.selectedMembers.map(member => member.name)
+      }
+    },
+
+    // 修改 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()
+    },
+
+    // 删除团队
+    handleDeleteTeam(row) {
+      this.deleteDialogVisible = true
+      this.deleteTeamId = row.id
+    },
+
+    // 确认删除团队
+    confirmDelete() {
+      if (!this.deleteTeamId) return
+      
+      deleteMerchantTeam(this.deleteTeamId).then(res => {
+        if (res && res.code === '0000000000000000') {
+          this.$message.success('删除成功')
+          this.getTeamList()
+        } else {
+          this.$message.error(res.message || '删除失败')
+        }
+        this.deleteDialogVisible = false
+      }).catch(error => {
+        console.error('删除团队失败', error)
+        this.$message.error('删除失败')
+        this.deleteDialogVisible = false
+      })
+    },
+
+    // 移除人员
+    handleRemovePersonnel(row) {
+      this.removeDialogVisible = true
+      this.removePersonnelId = row.id
+    },
+
+    // 确认移除人员
+    confirmRemove() {
+      if (!this.removePersonnelId) return
+      
+      removeMerchantPersonnel(this.removePersonnelId).then(res => {
+        if (res && res.code === '0000000000000000') {
+        this.$message.success('移除成功')
+        this.getPersonnelList()
+          this.getTeamList()
+        } else {
+          this.$message.error(res.message || '移除失败')
+        }
+        this.removeDialogVisible = false
+      }).catch(error => {
+        console.error('移除人员失败', error)
+        this.$message.error('移除失败')
+        this.removeDialogVisible = false
+      })
+    },
+
+    // 搜索成员
+    searchMember() {
+      if (!this.memberSearchKeyword) {
+        return
+      }
+      
+      this.memberLoading = true
+      // 调用搜索成员接口
+      getMemberList({keyword: this.memberSearchKeyword}).then(res => {
+        if (res && res.code === '0000000000000000') {
+          this.memberList = res.data
+      } else {
+          this.memberList = []
+        }
+      }).catch(error => {
+        console.error('搜索成员失败', error)
+        this.memberList = []
+      }).finally(() => {
+        this.memberLoading = false
+      })
+    },
+
+    // 处理节点点击事件
+    handleNodeClick(node) {
+      if (node.type === 'member') {
+        // 选择成员
+        const selectedMember = {
+          id: node.id,
+          name: node.label,
+          deptId: node.deptId,
+          deptName: node.deptName
+        }
+        this.handleSelectMember(selectedMember)
+      } else if (node.type === 'dept') {
+        // 选择部门（用于按部门选择模式）
+        if (this.memberSelectMode === 'all') {
+          this.getMembersByDept(node.id)
+        }
+      }
+    },
+
+    // 根据部门ID获取成员
+    getMembersByDept(deptId) {
+      if (!deptId) return
+      
+      this.memberLoading = true
+      getMembersByDeptId(deptId).then(res => {
+        if (res && res.code === '0000000000000000') {
+          const members = res.data
+          // 如果按部门选择，可以一次选择多个成员
+          members.forEach(member => {
+            const exists = this.tempSelectedMembers.some(m => m.id === member.id)
+            if (!exists) {
+              this.tempSelectedMembers.push({
+                id: member.id,
+                name: member.name,
+                deptName: member.deptName
+              })
+            }
+          })
+        }
+      }).catch(error => {
+        console.error('获取部门成员失败', error)
+      }).finally(() => {
+        this.memberLoading = false
+      })
+    },
+
+    // 选择成员
+    handleSelectMember(member) {
+        if (this.currentSelectType === 'manager') {
+        // 招商经理选择（单选）
+          this.tempSelectedMembers = [{
+          id: member.id,
+          name: member.name,
+          deptName: member.deptName
+          }]
+        } else {
+        // 招商人员选择（多选）
+        const exists = this.tempSelectedMembers.some(m => m.id === member.id)
+          if (!exists) {
+            this.tempSelectedMembers.push({
+            id: member.id,
+            name: member.name,
+            deptName: member.deptName
+            })
+        }
+      }
+    },
+
+    // 移除临时选择的成员
+    removeTempMember(member) {
+      const index = this.tempSelectedMembers.findIndex(item => item.id === member.id)
+      if (index !== -1) {
+        this.tempSelectedMembers.splice(index, 1)
+      }
+    },
+
+    // 确认成员选择
+    confirmMemberSelect() {
+      if (this.currentSelectType === 'manager') {
+        // 招商经理选择
+        if (this.tempSelectedMembers.length === 0) {
+          this.$message.warning('请选择招商经理')
+          return
+        }
+        
+        const manager = this.tempSelectedMembers[0]
+        this.teamForm.managerId = manager.id
+        this.teamForm.managerName = manager.name
+      } 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.memberSelectVisible = false
+    },
+
+    // 关闭团队弹窗时重置表单
+    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.teamForm = {
+            id: undefined,
+            teamName: '',
+            managerId: '',
+            managerName: '',
+            managerPhone: '',
+            projectIds: []
+          };
+        }
+      });
+    },
+
+    // 添加招商人员
+    handleAddPersonnel() {
+      // 首先关闭可能打开的弹窗
+      this.personnelDialogVisible = false
+      
+      // 重置相关数据
+      this.selectedMembers = []
+      this.tempSelectedMembers = []
+      
+      // 重置人员表单
+      this.personnelForm = {
+        teamId: undefined,
+        memberIds: [],
+        memberNames: []
+      }
+      
+      // 确保在打开新增人员弹窗时重置表单验证状态
+      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: [],
+            memberNames: []
+          }
+        }
+      })
+    },
+
+    // 以下是保留的原有方法
+    // ...
+  }
+}
+</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;
+    }
+  }
+
+  .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..1c551ba
--- /dev/null
+++ b/pc/src/views/merchant/tag-management/index.vue
@@ -0,0 +1,844 @@
+<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"
+              @keyup.enter.native="handleGroupSearch">
+              <el-button slot="append" icon="el-icon-search" @click="handleGroupSearch"></el-button>
+            </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 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>
+      <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
+      }
+      
+      // 编辑时不需要校验自身名称
+      if (this.groupDialogType === 'edit' && this.groupForm.originalName === value) {
+        callback()
+        return
+      }
+      
+      const params = {
+        groupName: value
+      }
+      
+      if (this.groupDialogType === 'edit') {
+        params.id = this.groupForm.id
+      }
+      
+      checkTagGroupName(params).then(res => {
+        if (res.success && res.data) {
+          callback()
+        } else {
+          callback(new Error('分组名称已存在'))
+        }
+      }).catch(() => {
+        callback(new Error('校验分组名称失败'))
+      })
+    }
+    
+    // 校验标签名称是否重复
+    const validateTagName = (rule, value, callback) => {
+      if (!value || value.length === 0) {
+        callback(new Error('请输入至少一个标签名称'))
+        return
+      }
+      
+      // 多标签情况下，暂不支持前端检查
+      if (value.length > 1 || this.tagDialogType === 'add') {
+        callback()
+        return
+      }
+      
+      // 编辑时不需要校验自身名称
+      if (this.tagDialogType === 'edit' && this.tagForm.originalName === value[0]) {
+        callback()
+        return
+      }
+      
+      const params = {
+        groupId: this.tagForm.groupId,
+        tagName: value[0]
+      }
+      
+      if (this.tagDialogType === 'edit') {
+        params.id = this.tagForm.id
+      }
+      
+      checkTagName(params).then(res => {
+        if (res.success && res.data) {
+          callback()
+        } else {
+          callback(new Error('标签名称在该分组下已存在'))
+        }
+      }).catch(() => {
+        callback(new Error('校验标签名称失败'))
+      })
+    }
+    
+    return {
+      // 分组相关数据
+      groupList: [],
+      groupSearchInput: '',
+      activeGroupId: '',
+      activeGroup: null,
+      groupDialogVisible: false,
+      groupDialogType: 'add', // add或edit
+      groupForm: {
+        id: '',
+        groupName: '',
+        tagNames: [],
+        originalName: '' // 用于校验
+      },
+      groupRules: {
+        groupName: [
+          { required: true, message: '请输入分组名称', trigger: 'blur' },
+          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' },
+          { validator: validateGroupName, trigger: 'blur' }
+        ],
+        tagNames: [
+          { required: true, message: '请输入至少一个标签名称', trigger: 'change' }
+        ]
+      },
+      
+      // 标签相关数据
+      tagList: [],
+      tableLoading: false,
+      total: 0,
+      tagQueryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        tagName: undefined,
+        groupId: null
+      },
+      tagDialogVisible: false,
+      tagDialogType: 'add', // add或edit
+      tagForm: {
+        id: '',
+        groupId: '',
+        tagName: '',
+        names: [],
+        originalName: '' // 用于校验
+      },
+      tagRules: {
+        groupId: [
+          { required: true, message: '请选择分组', trigger: 'change' }
+        ],
+        names: [
+          { required: true, message: '请输入至少一个标签名称', trigger: 'change' },
+          { validator: validateTagName, trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  computed: {
+    // 过滤后的分组列表
+    filteredGroupList() {
+      if (!this.groupSearchInput) {
+        return this.groupList
+      }
+      return this.groupList.filter(group => 
+        group.groupName.toLowerCase().includes(this.groupSearchInput.toLowerCase())
+      )
+    },
+    // 分页后的标签列表
+    paginationTagList() {
+      let list = this.tagList
+      if (this.tagQueryParams.tagName) {
+        list = list.filter(tag => 
+          tag.tagName.toLowerCase().includes(this.tagQueryParams.tagName.toLowerCase())
+        )
+      }
+      this.total = list.length
+      const start = (this.tagQueryParams.pageNum - 1) * this.tagQueryParams.pageSize
+      const end = start + this.tagQueryParams.pageSize
+      return list.slice(start, end)
+    }
+  },
+  created() {
+    this.fetchGroupList()
+  },
+  methods: {
+    // 分组相关方法
+    async fetchGroupList() {
+      try {
+        const res = await getAllTagGroups()
+        if (res.success) {
+          this.groupList = res.data || []
+          if (this.groupList.length > 0 && !this.activeGroupId) {
+            this.activeGroupId = this.groupList[0].id.toString()
+            this.activeGroup = this.groupList[0]
+            this.tagQueryParams.groupId = parseInt(this.activeGroupId)
+            this.fetchTagList(this.activeGroupId)
+          }
+        } else {
+          this.$message.error(res.message || '获取分组列表失败')
+        }
+      } catch (error) {
+        console.error('获取分组列表失败', error)
+        this.$message.error('获取分组列表失败')
+      }
+    },
+    // 分组搜索
+    handleGroupSearch() {
+      // 分组搜索功能已通过计算属性filteredGroupList实现
+    },
+    handleGroupSelect(index) {
+      this.activeGroupId = index
+      this.activeGroup = this.groupList.find(group => group.id.toString() === index)
+      this.tagQueryParams.groupId = parseInt(index)
+      this.tagQueryParams.pageNum = 1
+      this.fetchTagList(index)
+    },
+    handleAddGroup() {
+      this.groupDialogType = 'add'
+      this.groupForm = {
+        id: '',
+        groupName: '',
+        tagNames: [],
+        originalName: ''
+      }
+      this.groupDialogVisible = true
+    },
+    handleEditGroup(group) {
+      this.groupDialogType = 'edit'
+      this.groupForm = {
+        id: group.id,
+        groupName: group.groupName,
+        tagNames: [],
+        originalName: group.groupName
+      }
+      this.groupDialogVisible = true
+    },
+    handleDeleteGroup(group) {
+      this.$confirm('此操作将永久删除该分组, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 判断分组下是否有标签
+        if (group.tagCount > 0) {
+          return this.$message.warning('该分组下存在标签，不能删除')
+        }
+        
+        deleteTagGroup(group.id).then(res => {
+          if (res.success) {
+            this.$message.success('删除成功')
+            this.fetchGroupList()
+            if (this.activeGroupId === group.id.toString()) {
+              this.tagList = []
+              this.total = 0
+            }
+          } else {
+            this.$message.error(res.message || '删除失败')
+          }
+        }).catch(() => {
+          this.$message.error('删除失败')
+        })
+      }).catch(() => {
+        this.$message.info('已取消删除')
+      })
+    },
+    submitGroupForm() {
+      this.$refs.groupForm.validate(async (valid) => {
+        if (valid) {
+          try {
+            const data = {
+              groupName: this.groupForm.groupName
+            }
+            
+            if (this.groupDialogType === 'add') {
+              const res = await addTagGroup(data)
+              if (res.success) {
+                this.$message.success('新增成功')
+                // 如果有标签名称，添加标签
+                if (this.groupForm.tagNames && this.groupForm.tagNames.length > 0) {
+                  // 获取新建的分组信息
+                  await this.fetchGroupList()
+                  const newGroup = this.groupList.find(g => g.groupName === this.groupForm.groupName)
+                  if (newGroup) {
+                    // 为新分组添加标签
+                    for (const tagName of this.groupForm.tagNames) {
+                      await addTag({
+                        groupId: newGroup.id,
+                        tagName: tagName
+                      })
+                    }
+                  }
+                }
+              } else {
+                this.$message.error(res.message || '新增分组失败')
+              }
+            } else {
+              data.id = this.groupForm.id
+              const res = await updateTagGroup(data)
+              if (res.success) {
+                this.$message.success('更新成功')
+              } else {
+                this.$message.error(res.message || '更新分组失败')
+              }
+            }
+            this.groupDialogVisible = false
+            await this.fetchGroupList()
+          } catch (error) {
+            console.error(this.groupDialogType === 'add' ? '新增分组失败' : '更新分组失败', error)
+            this.$message.error(this.groupDialogType === 'add' ? '新增分组失败' : '更新分组失败')
+          }
+        }
+      })
+    },
+    
+    // 标签相关方法
+    async fetchTagList(groupId) {
+      if (!groupId) return
+      
+      this.tableLoading = true
+      try {
+        const res = await getTagListByGroupId(groupId)
+        if (res.success) {
+          this.tagList = res.data || []
+          this.total = this.tagList.length
+          this.tagQueryParams.pageNum = 1
+        } else {
+          this.$message.error(res.message || '获取标签列表失败')
+          this.tagList = []
+          this.total = 0
+        }
+      } catch (error) {
+        console.error('获取标签列表失败', error)
+        this.$message.error('获取标签列表失败')
+        this.tagList = []
+        this.total = 0
+      } finally {
+        this.tableLoading = false
+      }
+    },
+    // 标签查询
+    handleTagQuery() {
+      // 如果需要服务端查询
+      if (this.tagQueryParams.tagName) {
+        this.fetchTagsByParams()
+      } else {
+        this.fetchTagList(this.activeGroupId)
+      }
+    },
+    // 服务端查询标签
+    async fetchTagsByParams() {
+      this.tableLoading = true
+      try {
+        const params = {
+          ...this.tagQueryParams,
+          pageNum: 1,
+          pageSize: 1000 // 暂时取大量数据本地分页
+        }
+        
+        const res = await getTagList(params)
+        if (res.success) {
+          this.tagList = res.data.list || []
+          this.total = res.data.total || 0
+        } else {
+          this.$message.error(res.message || '查询标签失败')
+          this.tagList = []
+          this.total = 0
+        }
+      } catch (error) {
+        console.error('查询标签失败', error)
+        this.$message.error('查询标签失败')
+        this.tagList = []
+        this.total = 0
+      } finally {
+        this.tableLoading = false
+      }
+    },
+    // 重置标签查询
+    resetTagQuery() {
+      this.tagQueryParams.tagName = undefined
+      this.tagQueryParams.pageNum = 1
+      this.fetchTagList(this.activeGroupId)
+    },
+    handleAddTag() {
+      this.tagDialogType = 'add'
+      this.tagForm = {
+        id: '',
+        groupId: this.activeGroupId,
+        tagName: '',
+        names: [],
+        originalName: ''
+      }
+      this.tagDialogVisible = true
+    },
+    handleEditTag(tag) {
+      this.tagDialogType = 'edit'
+      this.tagForm = {
+        id: tag.id,
+        groupId: tag.groupId,
+        tagName: tag.tagName,
+        names: [tag.tagName],
+        originalName: tag.tagName
+      }
+      this.tagDialogVisible = true
+    },
+    handleDeleteTag(tag) {
+      // 判断标签是否有关联的意向客户
+      if (tag.intentionCustomerCount > 0) {
+        return this.$message.warning('该标签已绑定意向客户，不能删除')
+      }
+      
+      this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteTag(tag.id).then(res => {
+          if (res.success) {
+            this.$message.success('删除成功')
+            this.fetchTagList(this.activeGroupId)
+          } else {
+            this.$message.error(res.message || '删除失败')
+          }
+        }).catch(() => {
+          this.$message.error('删除失败')
+        })
+      }).catch(() => {
+        this.$message.info('已取消删除')
+      })
+    },
+    submitTagForm() {
+      this.$refs.tagForm.validate(async (valid) => {
+        if (valid) {
+          try {
+            if (this.tagDialogType === 'add') {
+              // 多标签添加
+              if (this.tagForm.names.length > 1) {
+                let success = 0
+                let fail = 0
+                
+                for (const name of this.tagForm.names) {
+                  try {
+                    const res = await addTag({
+                      groupId: this.tagForm.groupId,
+                      tagName: name
+                    })
+                    
+                    if (res.success) {
+                      success++
+                    } else {
+                      fail++
+                    }
+                  } catch (error) {
+                    fail++
+                  }
+                }
+                
+                if (success > 0) {
+                  this.$message.success(`成功添加${success}个标签`)
+                }
+                
+                if (fail > 0) {
+                  this.$message.warning(`${fail}个标签添加失败`)
+                }
+              } else {
+                // 单标签添加
+                const res = await addTag({
+                  groupId: this.tagForm.groupId,
+                  tagName: this.tagForm.names[0]
+                })
+                
+                if (res.success) {
+                  this.$message.success('新增成功')
+                } else {
+                  this.$message.error(res.message || '新增标签失败')
+                }
+              }
+            } else {
+              // 编辑标签
+              const res = await updateTag({
+                id: this.tagForm.id,
+                groupId: this.tagForm.groupId,
+                tagName: this.tagForm.names[0]
+              })
+              
+              if (res.success) {
+                this.$message.success('更新成功')
+              } else {
+                this.$message.error(res.message || '更新标签失败')
+              }
+            }
+            
+            this.tagDialogVisible = false
+            await this.fetchTagList(this.tagForm.groupId)
+            
+            // 如果切换了分组，需要更新当前选中的分组
+            if (this.activeGroupId !== this.tagForm.groupId) {
+              this.activeGroupId = this.tagForm.groupId
+              this.activeGroup = this.groupList.find(group => group.id.toString() === this.tagForm.groupId)
+            }
+          } catch (error) {
+            console.error(this.tagDialogType === 'add' ? '新增标签失败' : '更新标签失败', error)
+            this.$message.error(this.tagDialogType === 'add' ? '新增标签失败' : '更新标签失败')
+          }
+        }
+      })
+    },
+    
+    // 分页相关方法
+    handleSizeChange(val) {
+      this.tagQueryParams.pageSize = val
+    },
+    handleCurrentChange(val) {
+      this.tagQueryParams.pageNum = val
+    }
+  }
+}
+</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/vue.config.js b/pc/vue.config.js
index d2a95fb..74ffd64 100644
--- a/pc/vue.config.js
+++ b/pc/vue.config.js
@@ -10,14 +10,14 @@ module.exports = {
       warnings: false,
       errors: true
     },
-    proxy: {
-      '/api': {
-        target: 'http://localhost:8080',
-        changeOrigin: true,
-        pathRewrite: {
-          '^/api': '/api'
-        }
-      }
-    }
+    // proxy: {
+    //   '/': {
+    //     target: 'http://192.168.137.3:8080/api',
+    //     changeOrigin: true,
+    //     pathRewrite: {
+    //       '^/api': '/api'
+    //     }
+    //   }
+    // }
   }
 } 
\ No newline at end of file
diff --git a/pc/web (2).zip b/pc/web (2).zip
deleted file mode 100644
index 8f8f1f1..0000000
Binary files a/pc/web (2).zip and /dev/null differ
diff --git a/pc/web.zip b/pc/web.zip
deleted file mode 100644
index 107e0a6..0000000
Binary files a/pc/web.zip and /dev/null differ