开发完成合同功能

wuxw
1 parent a99eb7a5
Showing 57 changed files with 8009 additions and 3 deletions
src/api/contract/addContractApi.js
src/api/contract/contractChangeDetailApi.js
src/api/contract/contractChangeManageApi.js
src/api/contract/contractManageApi.js
src/api/contract/contractPartyaManageApi.js
src/api/contract/contractTypeManageApi.js
src/api/contract/contractTypeSpecManageApi.js
src/api/contract/expirationContractManageApi.js
src/api/contract/newContractManageApi.js
src/api/contract/printContractApi.js
src/components/contract/ChooseContract.vue
src/components/contract/ContractChangeAssets.vue
src/components/contract/ContractChangeLease.vue
src/components/contract/ContractChangeMainBody.vue
src/components/contract/StopContract.vue
src/components/contract/addContractPartya.vue
src/components/contract/addContractType.vue
src/components/contract/addContractTypeSpec.vue
src/components/contract/addTemplateView.vue
src/components/contract/deleteContract.vue
+import request from '@/utils/request'
+
+// 保存合同信息
+export function saveContract(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/saveContract',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询合同类型
+export function queryContractType(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/queryContractType',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询合同甲方信息
+export function queryContractPartya(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contractPartya/queryContractPartya',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询合同类型规格
+export function queryContractTypeSpec(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/queryContractTypeSpec',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询合同关联房屋
+export function queryContractRoom(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/queryContractRoom',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取第一个审批人
+export function getFirstStaff(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/workflow/getFirstStaff',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询员工信息
+export function queryStaffInfos(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/query.staff.infos',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询组织树
+export function listOrgTree(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/org.listOrgTree',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询房屋信息
+export function queryRooms(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/room.queryRooms',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询已售房屋
+export function queryRoomsWithSell(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/room.queryRoomsWithSell',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询未售房屋
+export function queryRoomsWithOutSell(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/room.queryRoomsWithOutSell',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询业主信息
+export function queryOwners(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/owner.queryOwners',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 查询合同列表
+export function queryContract(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/queryContract',
+      method: 'get',
+      params
+    }).then(response => {
+      resolve(response.data)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询房间信息
+export function queryRooms(params, url = '/room.queryRooms') {
+  params.communityId = getCommunityId()
+  return new Promise((resolve, reject) => {
+    request({
+      url: url,
+      method: 'get',
+      params
+    }).then(response => {
+      resolve(response.data)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询合同关联房间
+export function queryContractRoom(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/queryContractRoom',
+      method: 'get',
+      params
+    }).then(response => {
+      resolve(response.data)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询组织树
+export function listOrgTree(params) {
+  params.communityId = getCommunityId()
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/org.listOrgTree',
+      method: 'get',
+      params
+    }).then(response => {
+      resolve(response.data)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询员工信息
+export function queryStaffInfos(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/query.staff.infos',
+      method: 'get',
+      params
+    }).then(response => {
+      resolve(response.data)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取审批人
+export function getFirstStaff(params) {
+  params.communityId = getCommunityId()
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/workflow/getFirstStaff',
+      method: 'get',
+      params
+    }).then(response => {
+      resolve(response.data)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 保存合同变更计划
+export function saveContractChangePlan(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/saveContractChangePlan',
+      method: 'post',
+      data
+    }).then(response => {
+      resolve(response.data)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+/**
+ * 查询合同变更计划列表
+ * @param {Object} params 查询参数
+ * @returns {Promise} 返回Promise对象
+ */
+export function queryContractChangePlan(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/queryContractChangePlan',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 查询合同类型列表
+ * @param {Object} params 查询参数
+ * @returns {Promise} 返回Promise对象
+ */
+export function queryContractType(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/queryContractType',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 删除合同变更计划
+ * @param {Object} data 删除数据
+ * @returns {Promise} 返回Promise对象
+ */
+export function deleteContractChangePlan(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/deleteContractChangePlan',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+// 查询合同列表
+export function queryContract(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/queryContract',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve({
+        data: res.data,
+        total: res.total
+      })
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询合同类型
+export function queryContractType(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/queryContractType',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve({
+        data: res.data
+      })
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询合同类型规格
+export function queryContractTypeSpec(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/queryContractTypeSpec',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve({
+        data: res.data
+      })
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询合同文件
+export function queryContractFile(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contractFile/queryContractFile',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve({
+        data: res.data
+      })
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 更新合同
+export function updateContract(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/updateContract',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除合同
+export function deleteContract(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/deleteContract',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 上传合同文件
+export function uploadContactFile(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/uploadContactFile',
+      method: 'post',
+      data,
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 查询合同甲方列表
+export function queryContractPartya(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contractPartya/queryContractPartya',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 添加合同甲方
+export function saveContractPartya(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contractPartya/saveContractPartya',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 修改合同甲方
+export function updateContractPartya(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contractPartya/updateContractPartya',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除合同甲方
+export function deleteContractPartya(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contractPartya/deleteContractPartya',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+// 查询合同类型列表
+export function queryContractType(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/queryContractType',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 添加合同类型
+export function saveContractType(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/saveContractType',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 修改合同类型
+export function updateContractType(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/updateContractType',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除合同类型
+export function deleteContractType(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/deleteContractType',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询合同类型模板
+export function queryContractTypeTemplate(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/queryContractTypeTemplate',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 保存合同类型模板
+export function saveContractTypeTemplate(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/saveContractTypeTemplate',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 更新合同类型模板
+export function updateContractTypeTemplate(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/updateContractTypeTemplate',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 打印合同模板
+export function printContractTemplate(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/printContractTemplate',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 查询合同类型规格列表
+export function queryContractTypeSpec(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/queryContractTypeSpec',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 添加合同类型规格
+export function saveContractTypeSpec(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/saveContractTypeSpec',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 修改合同类型规格
+export function updateContractTypeSpec(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/updateContractTypeSpec',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除合同类型规格
+export function deleteContractTypeSpec(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/deleteContractTypeSpec',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+// 查询合同列表
+export function queryContract(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/queryContract',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询合同类型
+export function queryContractType(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/queryContractType',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 终止合同
+export function stopContract(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/stopContract',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+// 查询合同列表
+export function getContractList(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/queryContract',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询合同类型列表
+export function getContractTypeList(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/queryContractType',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询合同规格
+export function getContractTypeSpec(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/queryContractTypeSpec',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 更新合同信息
+export function updateContract(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/updateContract',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除合同
+export function deleteContract(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/deleteContract',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 上传合同文件
+export function uploadContractFile(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contractFile/uploadContactFile',
+      method: 'post',
+      data,
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+/**
+ * 获取合同打印模板
+ * @param {Object} params 请求参数
+ * @returns {Promise} Promise对象
+ */
+export function getPrintContractTemplate(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/printContractTemplate',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+<template>
+  <el-dialog :title="$t('chooseContract.title')" :visible.sync="dialogVisible" width="80%">
+    <div class="search-wrapper">
+      <el-input v-model="chooseContractInfo._currentContractName" :placeholder="$t('chooseContract.searchPlaceholder')"
+        class="search-input" clearable>
+        <el-button slot="append" type="primary" @click="queryContracts">
+          <i class="el-icon-search"></i>
+          {{ $t('common.search') }}
+        </el-button>
+      </el-input>
+    </div>
+
+    <el-table :data="chooseContractInfo.contracts" border style="width: 100%">
+      <el-table-column prop="contractName" :label="$t('chooseContract.contractName')" align="center" />
+      <el-table-column prop="contractCode" :label="$t('chooseContract.contractCode')" align="center" />
+      <el-table-column prop="contractTypeName" :label="$t('chooseContract.contractType')" align="center" />
+      <el-table-column prop="partyA" :label="$t('chooseContract.partyA')" align="center" />
+      <el-table-column prop="partyB" :label="$t('chooseContract.partyB')" align="center" />
+      <el-table-column prop="signingTime" :label="$t('chooseContract.signingTime')" align="center" />
+      <el-table-column :label="$t('common.operation')" align="center" width="120">
+        <template slot-scope="scope">
+          <el-button type="primary" size="mini" @click="chooseContract(scope.row)">
+            {{ $t('common.select') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="pagination-wrapper">
+      <el-pagination :current-page.sync="pagination.current" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.size"
+        :total="pagination.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" />
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { queryContract } from '@/api/contract/contractChangeDetailApi'
+
+export default {
+  name: 'ChooseContract',
+  props: {
+    emitChooseContract: {
+      type: String,
+      default: ''
+    },
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      chooseContractInfo: {
+        contracts: [],
+        _currentContractName: ''
+      },
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open() {
+      this.dialogVisible = true
+      this.refreshChooseContractInfo()
+      this.loadAllContractInfo(1, 10, '')
+    },
+    chooseContract(contract) {
+      if (contract['name']) {
+        contract.contractName = contract.name
+      }
+      this.$emit('chooseContract', contract)
+      this.$emit('listContractData', {
+        contractId: contract.contractId
+      })
+      this.dialogVisible = false
+    },
+    queryContracts() {
+      this.loadAllContractInfo(1, 10, this.chooseContractInfo._currentContractName)
+    },
+    refreshChooseContractInfo() {
+      this.chooseContractInfo._currentContractName = ''
+    },
+    loadAllContractInfo(page, row, name) {
+      const param = {
+        page,
+        row,
+        contractNameLike: name
+      }
+
+      queryContract(param)
+        .then(response => {
+          const contractInfo = response
+          this.chooseContractInfo.contracts = contractInfo.data
+          this.pagination.total = contractInfo.total
+        })
+        .catch(error => {
+          console.error('请求失败:', error)
+        })
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.loadAllContractInfo(this.pagination.current, val)
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.loadAllContractInfo(val, this.pagination.size)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.search-wrapper {
+  margin-bottom: 20px;
+}
+
+.search-input {
+  width: 400px;
+}
+
+.pagination-wrapper {
+  margin-top: 20px;
+  text-align: right;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-card class="box-card">
+    <div slot="header" class="flex justify-between">
+      <span>{{ $t('contractChangeAssets.title') }}</span>
+      <el-button type="primary" size="small" style="float: right" @click="selectRoom">
+        <i class="el-icon-plus"></i>
+        {{ $t('common.add') }}
+      </el-button>
+    </div>
+
+    <el-table :data="contractChangeAssetsInfo.rooms" border style="width: 100%">
+      <el-table-column prop="roomNum" :label="$t('contractChangeAssets.room')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.floorNum }}-{{ scope.row.unitNum }}-{{ scope.row.roomNum }}
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="ownerName" :label="$t('contractChangeAssets.owner')" align="center" />
+
+      <el-table-column prop="link" :label="$t('contractChangeAssets.phone')" align="center" />
+
+      <el-table-column prop="builtUpArea" :label="$t('contractChangeAssets.area')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.builtUpArea }} {{ $t('contractChangeAssets.squareMeters') }}
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="stateName" :label="$t('contractChangeAssets.status')" align="center" />
+
+      <el-table-column :label="$t('common.operation')" align="center" width="120">
+        <template slot-scope="scope">
+          <el-button type="danger" size="mini" @click="openDelRoomModel(scope.row)">
+            {{ $t('common.delete') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'ContractChangeAssets',
+
+  data() {
+    return {
+      contractChangeAssetsInfo: {
+        rooms: [],
+        contractId: '',
+        planType: '3003'
+      }
+    }
+  },
+  watch: {
+    contractChangeAssetsInfo: {
+      deep: true,
+      handler(newVal) {
+        this.$emit('changeNotify', newVal)
+      }
+    }
+  },
+  methods: {
+    selectRoom() {
+      this.$emit('openSearchRoom')
+    },
+    openDelRoomModel(room) {
+      this.$confirm(
+        this.$t('contractChangeAssets.confirmDelete'),
+        this.$t('common.tip'),
+        {
+          confirmButtonText: this.$t('common.confirm'),
+          cancelButtonText: this.$t('common.cancel'),
+          type: 'warning'
+        }
+      ).then(() => {
+        this.removeRoom(room)
+      })
+    },
+    removeRoom(room) {
+      this.contractChangeAssetsInfo.rooms = this.contractChangeAssetsInfo.rooms.filter(
+        item => item.roomId !== room.roomId
+      )
+    },
+    loadContractRooms() {
+      // 这里应该调用API加载合同关联的房间数据
+      // 示例代码：
+      /*
+      getContractRooms({ contractId: this.contractChangeAssetsInfo.contractId })
+        .then(response => {
+          this.contractChangeAssetsInfo.rooms = response.data
+        })
+      */
+    }
+  },
+  created() {
+    this.$on('chooseRoom', room => {
+      // 检查是否已存在相同房间
+      const exists = this.contractChangeAssetsInfo.rooms.some(
+        item => item.roomId === room.roomId
+      )
+      if (!exists) {
+        this.contractChangeAssetsInfo.rooms.push(room)
+      }
+    })
+
+    this.$on('contractInfo', param => {
+      this.contractChangeAssetsInfo.contractId = param.contractId
+      this.loadContractRooms()
+    })
+  }
+}
+</script>
+
+<style scoped>
+.box-card {
+  margin-bottom: 20px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-card class="box-card">
+    <div slot="header" class="flex justify-between">
+      <span>{{ $t('contractChangeLease.title') }}</span>
+    </div>
+    <el-form label-width="120px">
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item :label="$t('contractChangeLease.startTime')" required>
+            <el-date-picker v-model="contractChangeLeaseInfo.startTime" type="datetime"
+              :placeholder="$t('contractChangeLease.startTimePlaceholder')" style="width: 100%"></el-date-picker>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item :label="$t('contractChangeLease.endTime')" required>
+            <el-date-picker v-model="contractChangeLeaseInfo.endTime" type="datetime"
+              :placeholder="$t('contractChangeLease.endTimePlaceholder')" style="width: 100%"></el-date-picker>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'ContractChangeLease',
+  data() {
+    return {
+      contractChangeLeaseInfo: {
+        startTime: '',
+        endTime: '',
+        planType: '2002'
+      }
+    }
+  },
+  watch: {
+    contractChangeLeaseInfo: {
+      deep: true,
+      handler(newVal) {
+        this.$emit('changeNotify', newVal)
+      }
+    }
+  },
+  methods: {
+    clear() {
+      this.contractChangeLeaseInfo = {
+        startTime: '',
+        endTime: '',
+        planType: '2002'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.box-card {
+  margin-bottom: 20px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-card class="box-card">
+    <div slot="header" class="clearfix">
+      <span>{{ $t('contractChangeMainBody.title') }}</span>
+    </div>
+    <el-form label-width="120px">
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item :label="$t('contractChangeMainBody.contractName')" required>
+            <el-input v-model="contractChangeMainBodyInfo.contractName"
+              :placeholder="$t('contractChangeMainBody.contractNamePlaceholder')"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item :label="$t('contractChangeMainBody.partyA')" required>
+            <el-input v-model="contractChangeMainBodyInfo.partyA"
+              :placeholder="$t('contractChangeMainBody.partyAPlaceholder')"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item :label="$t('contractChangeMainBody.aContacts')" required>
+            <el-input v-model="contractChangeMainBodyInfo.aContacts"
+              :placeholder="$t('contractChangeMainBody.aContactsPlaceholder')"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item :label="$t('contractChangeMainBody.aLink')" required>
+            <el-input v-model="contractChangeMainBodyInfo.aLink"
+              :placeholder="$t('contractChangeMainBody.aLinkPlaceholder')"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item :label="$t('contractChangeMainBody.partyB')" required>
+            <el-input v-model="contractChangeMainBodyInfo.partyB"
+              :placeholder="$t('contractChangeMainBody.partyBPlaceholder')"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item :label="$t('contractChangeMainBody.bContacts')" required>
+            <el-input v-model="contractChangeMainBodyInfo.bContacts"
+              :placeholder="$t('contractChangeMainBody.bContactsPlaceholder')"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item :label="$t('contractChangeMainBody.bLink')" required>
+            <el-input v-model="contractChangeMainBodyInfo.bLink"
+              :placeholder="$t('contractChangeMainBody.bLinkPlaceholder')"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'ContractChangeMainBody',
+
+  data() {
+    return {
+      contractChangeMainBodyInfo: {
+        contractName: '',
+        partyA: '',
+        aContacts: '',
+        aLink: '',
+        partyB: '',
+        bContacts: '',
+        bLink: '',
+        planType: '1001'
+      }
+    }
+  },
+  watch: {
+    contractChangeMainBodyInfo: {
+      deep: true,
+      handler(newVal) {
+        this.$emit('changeMainBody', newVal)
+      }
+    }
+  },
+  methods: {
+    clear() {
+      this.contractChangeMainBodyInfo = {
+        contractName: '',
+        partyA: '',
+        aContacts: '',
+        aLink: '',
+        partyB: '',
+        bContacts: '',
+        bLink: '',
+        planType: '1001'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.box-card {
+  margin-bottom: 20px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('stopContract.dialog.title')"
+    :visible.sync="visible"
+    width="30%"
+    :before-close="handleClose"
+  >
+    <div class="dialog-body">
+      <p>{{ $t('stopContract.dialog.content') }}</p>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('stopContract.button.cancel') }}</el-button>
+      <el-button type="primary" @click="handleConfirm">{{ $t('stopContract.button.confirm') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { stopContract } from '@/api/contract/expirationContractManageApi'
+
+export default {
+  name: 'StopContract',
+  data() {
+    return {
+      visible: false,
+      currentContract: null
+    }
+  },
+  methods: {
+    open(contract) {
+      this.currentContract = contract
+      this.visible = true
+    },
+    handleClose() {
+      this.visible = false
+      this.currentContract = null
+    },
+    async handleConfirm() {
+      try {
+        await stopContract(this.currentContract)
+        this.$message.success(this.$t('stopContract.message.success'))
+        this.$emit('success')
+        this.handleClose()
+      } catch (error) {
+        this.$message.error(this.$t('stopContract.message.error'))
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dialog-body {
+  text-align: center;
+  padding: 20px 0;
+  font-size: 16px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('contractPartyaManage.add.title')"
+    :visible.sync="visible"
+    width="50%"
+    @close="handleClose"
+  >
+    <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
+      <el-form-item
+        :label="$t('contractPartyaManage.form.partyA')"
+        prop="partyA"
+      >
+        <el-input
+          v-model="formData.partyA"
+          :placeholder="$t('contractPartyaManage.form.partyAPlaceholder')"
+        />
+      </el-form-item>
+      <el-form-item
+        :label="$t('contractPartyaManage.form.aContacts')"
+        prop="aContacts"
+      >
+        <el-input
+          v-model="formData.aContacts"
+          :placeholder="$t('contractPartyaManage.form.aContactsPlaceholder')"
+        />
+      </el-form-item>
+      <el-form-item
+        :label="$t('contractPartyaManage.form.aLink')"
+        prop="aLink"
+      >
+        <el-input
+          v-model="formData.aLink"
+          :placeholder="$t('contractPartyaManage.form.aLinkPlaceholder')"
+        />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('common.cancel') }}
+      </el-button>
+      <el-button type="primary" @click="handleSubmit">
+        {{ $t('common.confirm') }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { saveContractPartya } from '@/api/contract/contractPartyaManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'AddContractPartya',
+  data() {
+    return {
+      visible: false,
+      formData: {
+        partyA: '',
+        aContacts: '',
+        aLink: '',
+        communityId: ''
+      },
+      rules: {
+        partyA: [
+          {
+            required: true,
+            message: this.$t('contractPartyaManage.validate.partyARequired'),
+            trigger: 'blur'
+          },
+          {
+            max: 200,
+            message: this.$t('contractPartyaManage.validate.partyAMaxLength'),
+            trigger: 'blur'
+          }
+        ],
+        aContacts: [
+          {
+            required: true,
+            message: this.$t('contractPartyaManage.validate.aContactsRequired'),
+            trigger: 'blur'
+          },
+          {
+            max: 64,
+            message: this.$t('contractPartyaManage.validate.aContactsMaxLength'),
+            trigger: 'blur'
+          }
+        ],
+        aLink: [
+          {
+            required: true,
+            message: this.$t('contractPartyaManage.validate.aLinkRequired'),
+            trigger: 'blur'
+          },
+          {
+            pattern: /^1[3-9]\d{9}$/,
+            message: this.$t('contractPartyaManage.validate.aLinkFormat'),
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    open() {
+      this.visible = true
+      this.formData.communityId = getCommunityId()
+      this.$nextTick(() => {
+        this.$refs.form && this.$refs.form.resetFields()
+      })
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+    },
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            await saveContractPartya(this.formData)
+            this.$message.success(this.$t('common.addSuccess'))
+            this.visible = false
+            this.$emit('success')
+          } catch (error) {
+            this.$message.error(error.message || this.$t('common.addFailed'))
+          }
+        }
+      })
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('contractTypeManage.add.title')"
+    :visible.sync="visible"
+    width="50%"
+    @close="handleClose"
+  >
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="rules"
+      label-width="120px"
+    >
+      <el-form-item
+        :label="$t('contractTypeManage.add.typeName')"
+        prop="typeName"
+      >
+        <el-input
+          v-model="form.typeName"
+          :placeholder="$t('contractTypeManage.add.typeNamePlaceholder')"
+        />
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('contractTypeManage.add.audit')"
+        prop="audit"
+      >
+        <el-select
+          v-model="form.audit"
+          :placeholder="$t('contractTypeManage.add.auditPlaceholder')"
+          style="width:100%"
+        >
+          <el-option
+            v-for="item in audits"
+            :key="item.statusCd"
+            :label="item.name"
+            :value="item.statusCd"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('contractTypeManage.add.remark')"
+        prop="remark"
+      >
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          :rows="3"
+          :placeholder="$t('contractTypeManage.add.remarkPlaceholder')"
+        />
+      </el-form-item>
+    </el-form>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('common.cancel') }}
+      </el-button>
+      <el-button type="primary" @click="saveContractTypeInfo">
+        {{ $t('common.save') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getDict } from '@/api/community/communityApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import { saveContractType } from '@/api/contract/contractTypeManageApi'
+
+export default {
+  name: 'AddContractType',
+  data() {
+    return {
+      visible: false,
+      form: {
+        typeName: '',
+        audit: '',
+        remark: '',
+        communityId: ''
+      },
+      audits: [],
+      rules: {
+        typeName: [
+          { required: true, message: this.$t('contractTypeManage.validate.typeNameRequired'), trigger: 'blur' },
+          { max: 64, message: this.$t('contractTypeManage.validate.typeNameMaxLength'), trigger: 'blur' }
+        ],
+        audit: [
+          { required: true, message: this.$t('contractTypeManage.validate.auditRequired'), trigger: 'change' }
+        ],
+        remark: [
+          { max: 200, message: this.$t('contractTypeManage.validate.remarkMaxLength'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open() {
+      this.visible = true
+      this.getAuditOptions()
+    },
+    async getAuditOptions() {
+      try {
+        const data = await getDict('contract_type', 'audit')
+        this.audits = data
+      } catch (error) {
+        console.error('获取审核选项失败:', error)
+      }
+    },
+    async saveContractTypeInfo() {
+      this.$refs.form.validate(async valid => {
+        if (!valid) return
+
+        try {
+          this.form.communityId = getCommunityId()
+          const res = await saveContractType(this.form)
+          
+          if (res.code === 0) {
+            this.$message.success(this.$t('common.operateSuccess'))
+            this.visible = false
+            this.$emit('success')
+          } else {
+            this.$message.error(res.msg)
+          }
+        } catch (error) {
+          this.$message.error(this.$t('common.operateFailed'))
+        }
+      })
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+      this.form = {
+        typeName: '',
+        audit: '',
+        remark: '',
+        communityId: ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-select {
+  width: 100%;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('contractTypeSpecManage.add.title')"
+    :visible.sync="visible"
+    width="50%"
+    @close="handleClose"
+  >
+    <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
+      <el-form-item
+        :label="$t('contractTypeSpecManage.add.specName')"
+        prop="specName"
+      >
+        <el-input
+          v-model="formData.specName"
+          :placeholder="$t('contractTypeSpecManage.add.specNamePlaceholder')"
+        />
+      </el-form-item>
+      <el-form-item
+        :label="$t('contractTypeSpecManage.add.specHoldplace')"
+        prop="specHoldplace"
+      >
+        <el-input
+          v-model="formData.specHoldplace"
+          :placeholder="$t('contractTypeSpecManage.add.specHoldplacePlaceholder')"
+        />
+      </el-form-item>
+      <el-form-item
+        :label="$t('contractTypeSpecManage.add.required')"
+        prop="required"
+      >
+        <el-select
+          v-model="formData.required"
+          :placeholder="$t('contractTypeSpecManage.add.requiredPlaceholder')"
+          style="width:100%"
+        >
+          <el-option
+            :label="$t('common.yes')"
+            value="Y"
+          />
+          <el-option
+            :label="$t('common.no')"
+            value="N"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        :label="$t('contractTypeSpecManage.add.specShow')"
+        prop="specShow"
+      >
+        <el-select
+          v-model="formData.specShow"
+          :placeholder="$t('contractTypeSpecManage.add.specShowPlaceholder')"
+          style="width:100%"
+        >
+          <el-option
+            :label="$t('common.yes')"
+            value="Y"
+          />
+          <el-option
+            :label="$t('common.no')"
+            value="N"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        :label="$t('contractTypeSpecManage.add.specValueType')"
+        prop="specValueType"
+      >
+        <el-select
+          v-model="formData.specValueType"
+          :placeholder="$t('contractTypeSpecManage.add.specValueTypePlaceholder')"
+          style="width:100%"
+        >
+          <el-option
+            :label="$t('contractTypeSpecManage.specValueType.string')"
+            value="1001"
+          />
+          <el-option
+            :label="$t('contractTypeSpecManage.specValueType.integer')"
+            value="2002"
+          />
+          <el-option
+            :label="$t('contractTypeSpecManage.specValueType.amount')"
+            value="3003"
+          />
+          <el-option
+            :label="$t('contractTypeSpecManage.specValueType.date')"
+            value="4004"
+          />
+          <el-option
+            :label="$t('contractTypeSpecManage.specValueType.time')"
+            value="5005"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        :label="$t('contractTypeSpecManage.add.specType')"
+        prop="specType"
+      >
+        <el-select
+          v-model="formData.specType"
+          :placeholder="$t('contractTypeSpecManage.add.specTypePlaceholder')"
+          style="width:100%"
+        >
+          <el-option
+            :label="$t('contractTypeSpecManage.specType.input')"
+            value="2233"
+          />
+          <el-option
+            :label="$t('contractTypeSpecManage.specType.select')"
+            value="3344"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        :label="$t('contractTypeSpecManage.add.listShow')"
+        prop="listShow"
+      >
+        <el-select
+          v-model="formData.listShow"
+          :placeholder="$t('contractTypeSpecManage.add.listShowPlaceholder')"
+          style="width:100%"
+        >
+          <el-option
+            :label="$t('common.yes')"
+            value="Y"
+          />
+          <el-option
+            :label="$t('common.no')"
+            value="N"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('common.cancel') }}
+      </el-button>
+      <el-button type="primary" @click="handleSubmit">
+        {{ $t('common.confirm') }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { saveContractTypeSpec } from '@/api/contract/contractTypeSpecManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'AddContractTypeSpec',
+  data() {
+    return {
+      visible: false,
+      formData: {
+        specName: '',
+        specHoldplace: '',
+        required: '',
+        specShow: '',
+        specValueType: '',
+        specType: '',
+        listShow: '',
+        contractTypeId: '',
+        communityId: ''
+      },
+      rules: {
+        specName: [
+          { required: true, message: this.$t('contractTypeSpecManage.validate.specNameRequired'), trigger: 'blur' },
+          { max: 64, message: this.$t('contractTypeSpecManage.validate.specNameMaxLength'), trigger: 'blur' }
+        ],
+        specHoldplace: [
+          { max: 200, message: this.$t('contractTypeSpecManage.validate.specHoldplaceMaxLength'), trigger: 'blur' }
+        ],
+        required: [
+          { required: true, message: this.$t('contractTypeSpecManage.validate.requiredRequired'), trigger: 'change' }
+        ],
+        specShow: [
+          { required: true, message: this.$t('contractTypeSpecManage.validate.specShowRequired'), trigger: 'change' }
+        ],
+        specValueType: [
+          { required: true, message: this.$t('contractTypeSpecManage.validate.specValueTypeRequired'), trigger: 'change' }
+        ],
+        specType: [
+          { required: true, message: this.$t('contractTypeSpecManage.validate.specTypeRequired'), trigger: 'change' }
+        ],
+        listShow: [
+          { required: true, message: this.$t('contractTypeSpecManage.validate.listShowRequired'), trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open(data) {
+      this.formData.contractTypeId = data.contractTypeId
+      this.formData.communityId = getCommunityId()
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs.form.clearValidate()
+      })
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+    },
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            await saveContractTypeSpec(this.formData)
+            this.$message.success(this.$t('contractTypeSpecManage.add.success'))
+            this.visible = false
+            this.$emit('success')
+          } catch (error) {
+            this.$message.error(error.message || this.$t('contractTypeSpecManage.add.error'))
+          }
+        }
+      })
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-dialog :title="$t('contractTypeManage.template.title')" :visible.sync="visible" width="80%" @close="handleClose">
+    <el-card>
+      <div class="attr-buttons">
+        <el-button v-for="(item, index) in contractTypeAttrs" :key="index" type="primary" size="small"
+          @click="insertAttrs(item)">
+          {{ item }}
+        </el-button>
+      </div>
+
+      <el-form label-width="120px">
+        <el-form-item :label="$t('contractTypeManage.template.content')">
+          <div class="editor-container">
+            <el-input type="textarea" :rows="15" v-model="context"
+              :placeholder="$t('contractTypeManage.template.placeholder')" />
+          </div>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('common.cancel') }}
+      </el-button>
+      <el-button type="primary" @click="saveTemplateInfo">
+        {{ $t('common.submit') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { saveContractTypeTemplate, updateContractTypeTemplate, queryContractTypeTemplate,printContractTemplate } from '@/api/contract/contractTypeManageApi'
+
+export default {
+  name: 'AddTemplateView',
+  data() {
+    return {
+      visible: false,
+      contractTypeId: '',
+      context: '',
+      templateId: '',
+      contractTypeAttrs: [],
+      contractTypeSpec:[]
+    }
+  },
+  methods: {
+    open(contractType) {
+      this.contractTypeId = contractType.contractTypeId
+      this.visible = true
+      this._loadContractAttrs(contractType.contractTypeId)
+
+      this._loadTemplate()
+    },
+    async _loadContractAttrs(contractTypeId) {
+      try {
+        const params = {
+          page: 1,
+          row: 1,
+          contractTypeId
+        }
+        const { data } = await printContractTemplate(params)
+        this.contractTypeAttrs = []
+        this.contractTypeSpec = data.contractTypeSpec
+        this.contractTypeSpec.forEach(e => {
+          const rname = e.specName
+          const reg = `#${rname}#`
+          this.contractTypeAttrs.push(reg)
+        })
+      } catch (error) {
+        console.error('加载合同属性失败:', error)
+      }
+    },
+    insertAttrs(attr) {
+      this.context += attr
+    },
+    async saveTemplateInfo() {
+      if (!this.addTemplateValidate()) {
+        return
+      }
+
+      try {
+        // const url = this.templateId ? '/contract/updateContractTypeTemplate' : '/contract/saveContractTypeTemplate'
+        const data = {
+          contractTypeId: this.contractTypeId,
+          context: this.context,
+          templateId: this.templateId
+        }
+
+        const res = this.templateId
+          ? await updateContractTypeTemplate(data)
+          : await saveContractTypeTemplate(data)
+
+        if (res.code === 0) {
+          this.$message.success(this.$t('common.operateSuccess'))
+          this.visible = false
+          this.$emit('success')
+        } else {
+          this.$message.error(res.msg)
+        }
+      } catch (error) {
+        this.$message.error(this.$t('common.operateFailed'))
+      }
+    },
+    addTemplateValidate() {
+      if (!this.contractTypeId) {
+        this.$message.error(this.$t('contractTypeManage.validate.contractTypeRequired'))
+        return false
+      }
+      if (!this.context) {
+        this.$message.error(this.$t('contractTypeManage.validate.contentRequired'))
+        return false
+      }
+      return true
+    },
+    async _loadTemplate() {
+      try {
+        const params = {
+          page: 1,
+          row: 1,
+          contractTypeId: this.contractTypeId
+        }
+        const { data } = await queryContractTypeTemplate(params)
+        if (data.length > 0) {
+          this.templateId = data[0].templateId
+          this.context = data[0].context
+        } else {
+          this.templateId = ''
+          this.context = ''
+        }
+      } catch (error) {
+        console.error('加载模板失败:', error)
+      }
+    },
+    handleClose() {
+      this.contractTypeId = ''
+      this.context = ''
+      this.templateId = ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.attr-buttons {
+  margin-bottom: 20px;
+
+  .el-button {
+    margin-right: 10px;
+    margin-bottom: 10px;
+  }
+}
+
+.editor-container {
+  ::v-deep .el-textarea__inner {
+    min-height: 300px;
+  }
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('contractManage.delete.title')"
+    :visible.sync="visible"
+    width="30%"
+    :before-close="handleClose"
+  >
+    <div style="text-align:center">
+      <p>{{ $t('contractManage.delete.confirmMessage') }}</p>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('contractManage.delete.cancel') }}</el-button>
+      <el-button type="primary" @click="deleteContract">{{ $t('contractManage.delete.confirm') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteContract } from '@/api/contract/contractManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'DeleteContract',
+  data() {
+    return {
+      visible: false,
+      contract: {}
+    }
+  },
+  methods: {
+    open(contract) {
+      this.contract = { ...contract }
+      this.visible = true
+    },
+    handleClose() {
+      this.visible = false
+    },
+    async deleteContract() {
+      try {
+        const params = {
+          ...this.contract,
+          communityId: getCommunityId()
+        }
+        await deleteContract(params)
+        this.$message.success(this.$t('contractManage.delete.success'))
+        this.$emit('success')
+        this.handleClose()
+      } catch (error) {
+        console.error('删除合同失败:', error)
+        this.$message.error(error.message || this.$t('contractManage.delete.error'))
+      }
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('deleteContractChangePlan.title')"
+    :visible.sync="visible"
+    width="500px"
+    @close="handleClose"
+  >
+    <div class="dialog-content">
+      <p>{{ $t('deleteContractChangePlan.confirmText') }}</p>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">
+        {{ $t('common.cancel') }}
+      </el-button>
+      <el-button type="primary" @click="handleConfirm">
+        {{ $t('common.confirm') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteContractChangePlan } from '@/api/contract/contractChangeManageApi'
+
+export default {
+  name: 'DeleteContractChangePlan',
+  data() {
+    return {
+      visible: false,
+      currentData: null
+    }
+  },
+  methods: {
+    open(data) {
+      this.currentData = data
+      this.visible = true
+    },
+    async handleConfirm() {
+      try {
+        await deleteContractChangePlan(this.currentData)
+        this.$message.success(this.$t('deleteContractChangePlan.deleteSuccess'))
+        this.$emit('success')
+        this.handleClose()
+      } catch (error) {
+        this.$message.error(error.message || this.$t('deleteContractChangePlan.deleteError'))
+      }
+    },
+    handleClose() {
+      this.visible = false
+      this.currentData = null
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dialog-content {
+  text-align: center;
+  padding: 20px 0;
+  
+  p {
+    font-size: 16px;
+    color: #606266;
+  }
+}
+
+.dialog-footer {
+  text-align: right;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('contractPartyaManage.delete.title')"
+    :visible.sync="visible"
+    width="30%"
+    @close="handleClose"
+  >
+    <div class="delete-content">
+      <p>{{ $t('contractPartyaManage.delete.confirmText') }}</p>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('common.cancel') }}
+      </el-button>
+      <el-button type="primary" @click="handleConfirm">
+        {{ $t('common.confirm') }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteContractPartya } from '@/api/contract/contractPartyaManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'DeleteContractPartya',
+  data() {
+    return {
+      visible: false,
+      deleteData: {
+        partyaId: '',
+        communityId: ''
+      }
+    }
+  },
+  methods: {
+    open(data) {
+      this.visible = true
+      this.deleteData = {
+        partyaId: data.partyaId,
+        communityId: getCommunityId()
+      }
+    },
+    handleClose() {
+      this.deleteData = {
+        partyaId: '',
+        communityId: ''
+      }
+    },
+    async handleConfirm() {
+      try {
+        await deleteContractPartya(this.deleteData)
+        this.$message.success(this.$t('common.deleteSuccess'))
+        this.visible = false
+        this.$emit('success')
+      } catch (error) {
+        this.$message.error(error.message || this.$t('common.deleteFailed'))
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.delete-content {
+  text-align: center;
+  font-size: 16px;
+  padding: 20px 0;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('contractTypeManage.delete.title')"
+    :visible.sync="visible"
+    width="30%"
+    @close="handleClose"
+  >
+    <div class="delete-content">
+      <el-alert
+        type="warning"
+        :closable="false"
+        show-icon
+      >
+        {{ $t('contractTypeManage.delete.confirmText') }}
+      </el-alert>
+    </div>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('common.cancel') }}
+      </el-button>
+      <el-button type="danger" @click="deleteContractType">
+        {{ $t('common.confirmDelete') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { deleteContractType } from '@/api/contract/contractTypeManageApi'
+
+export default {
+  name: 'DeleteContractType',
+  data() {
+    return {
+      visible: false,
+      form: {
+        contractTypeId: '',
+        communityId: ''
+      }
+    }
+  },
+  methods: {
+    open(row) {
+      this.form = {
+        contractTypeId: row.contractTypeId,
+        communityId: getCommunityId()
+      }
+      this.visible = true
+    },
+    async deleteContractType() {
+      try {
+        const res = await deleteContractType(this.form)
+        
+        if (res.code === 0) {
+          this.$message.success(this.$t('common.operateSuccess'))
+          this.visible = false
+          this.$emit('success')
+        } else {
+          this.$message.error(res.msg)
+        }
+      } catch (error) {
+        this.$message.error(this.$t('common.operateFailed'))
+      }
+    },
+    handleClose() {
+      this.form = {
+        contractTypeId: '',
+        communityId: ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.delete-content {
+  margin-bottom: 20px;
+  
+  .el-alert {
+    padding: 15px;
+  }
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('contractTypeSpecManage.delete.title')"
+    :visible.sync="visible"
+    width="30%"
+    @close="handleClose"
+  >
+    <div class="text-center">
+      <p>{{ $t('contractTypeSpecManage.delete.confirmText') }}</p>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('common.cancel') }}
+      </el-button>
+      <el-button type="primary" @click="handleConfirm">
+        {{ $t('common.confirm') }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteContractTypeSpec } from '@/api/contract/contractTypeSpecManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'DeleteContractTypeSpec',
+  data() {
+    return {
+      visible: false,
+      formData: {
+        specCd: '',
+        communityId: ''
+      }
+    }
+  },
+  methods: {
+    open(data) {
+      this.formData = {
+        specCd: data.specCd,
+        communityId: getCommunityId()
+      }
+      this.visible = true
+    },
+    handleClose() {
+      this.formData = {
+        specCd: '',
+        communityId: ''
+      }
+    },
+    async handleConfirm() {
+      try {
+        await deleteContractTypeSpec(this.formData)
+        this.$message.success(this.$t('contractTypeSpecManage.delete.success'))
+        this.visible = false
+        this.$emit('success')
+      } catch (error) {
+        this.$message.error(error.message || this.$t('contractTypeSpecManage.delete.error'))
+      }
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('contractManage.edit.title')"
+    :visible.sync="visible"
+    width="70%"
+    :before-close="handleClose"
+  >
+    <el-form :model="editContractInfo" label-width="120px" ref="editForm">
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <el-form-item :label="$t('contractManage.edit.contractName')" prop="contractName" required>
+            <el-input
+              v-model="editContractInfo.contractName"
+              :placeholder="$t('contractManage.edit.contractNamePlaceholder')"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('contractManage.edit.contractCode')" prop="contractCode" required>
+            <el-input
+              v-model="editContractInfo.contractCode"
+              :placeholder="$t('contractManage.edit.contractCodePlaceholder')"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('contractManage.edit.contractType')" prop="contractType" required>
+            <el-select 
+              v-model="editContractInfo.contractType" 
+              :placeholder="$t('contractManage.edit.contractTypePlaceholder')"
+              style="width:100%"
+              disabled
+            >
+              <el-option
+                v-for="item in editContractInfo.contractTypes"
+                :key="item.contractTypeId"
+                :label="item.typeName"
+                :value="item.contractTypeId"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <el-form-item :label="$t('contractManage.edit.partyA')" prop="partyA" required>
+            <el-input
+              v-model="editContractInfo.partyA"
+              :placeholder="$t('contractManage.edit.partyAPlaceholder')"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('contractManage.edit.aContacts')" prop="aContacts" required>
+            <el-input
+              v-model="editContractInfo.aContacts"
+              :placeholder="$t('contractManage.edit.aContactsPlaceholder')"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('contractManage.edit.aLink')" prop="aLink" required>
+            <el-input
+              v-model="editContractInfo.aLink"
+              :placeholder="$t('contractManage.edit.aLinkPlaceholder')"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <el-form-item :label="$t('contractManage.edit.partyB')" prop="partyB" required>
+            <el-input
+              v-model="editContractInfo.partyB"
+              :placeholder="$t('contractManage.edit.partyBPlaceholder')"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('contractManage.edit.bContacts')" prop="bContacts" required>
+            <el-input
+              v-model="editContractInfo.bContacts"
+              :placeholder="$t('contractManage.edit.bContactsPlaceholder')"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('contractManage.edit.bLink')" prop="bLink" required>
+            <el-input
+              v-model="editContractInfo.bLink"
+              :placeholder="$t('contractManage.edit.bLinkPlaceholder')"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <el-form-item :label="$t('contractManage.edit.operator')" prop="operator" required>
+            <el-input
+              v-model="editContractInfo.operator"
+              :placeholder="$t('contractManage.edit.operatorPlaceholder')"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('contractManage.edit.operatorLink')" prop="operatorLink" required>
+            <el-input
+              v-model="editContractInfo.operatorLink"
+              :placeholder="$t('contractManage.edit.operatorLinkPlaceholder')"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('contractManage.edit.amount')" prop="amount">
+            <el-input
+              v-model="editContractInfo.amount"
+              :placeholder="$t('contractManage.edit.amountPlaceholder')"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <el-form-item :label="$t('contractManage.edit.startTime')" prop="startTime" required>
+            <el-date-picker
+              v-model="editContractInfo.startTime"
+              type="datetime"
+              :placeholder="$t('contractManage.edit.startTimePlaceholder')"
+              style="width:100%"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('contractManage.edit.endTime')" prop="endTime" required>
+            <el-date-picker
+              v-model="editContractInfo.endTime"
+              type="datetime"
+              :placeholder="$t('contractManage.edit.endTimePlaceholder')"
+              style="width:100%"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item :label="$t('contractManage.edit.signingTime')" prop="signingTime" required>
+            <el-date-picker
+              v-model="editContractInfo.signingTime"
+              type="datetime"
+              :placeholder="$t('contractManage.edit.signingTimePlaceholder')"
+              style="width:100%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 合同类型规格 -->
+      <div v-for="(item,index) in editContractInfo.contractTypeSpecs" :key="index">
+        <el-row :gutter="20" v-if="index % 3 === 0">
+          <el-col :span="8" v-for="i in 3" :key="i">
+            <div v-if="editContractInfo.contractTypeSpecs[index + i - 1]">
+              <el-form-item :label="editContractInfo.contractTypeSpecs[index + i - 1].specName">
+                <el-input
+                  v-model="editContractInfo.contractTypeSpecs[index + i - 1].value"
+                  :placeholder="editContractInfo.contractTypeSpecs[index + i - 1].specHoldplace"
+                />
+              </el-form-item>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+
+      <!-- 合同附件 -->
+      <el-form-item :label="$t('contractManage.edit.contractFiles')">
+        <el-button type="primary" @click="addFileStep">
+          {{ $t('contractManage.edit.addFile') }}
+        </el-button>
+        <div v-for="(item,index) in editContractInfo.contractFilePo" :key="index" style="margin-top:10px">
+          <el-row :gutter="10">
+            <el-col :span="2">
+              <span>{{ $t('contractManage.edit.fileIndex', {index: index+1}) }}</span>
+            </el-col>
+            <el-col :span="10">
+              <input
+                type="file"
+                style="display:inline-block;width:100%"
+                @change="getFile($event,index)"
+                accept=".png,.pdf,.jpg"
+              />
+            </el-col>
+            <el-col :span="6">
+              <span>{{ item.fileRealName }}</span>
+            </el-col>
+            <el-col :span="4">
+              <el-button type="text" @click="deleteStep(item)">
+                {{ $t('contractManage.edit.deleteFile') }}
+              </el-button>
+            </el-col>
+          </el-row>
+        </div>
+      </el-form-item>
+    </el-form>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('contractManage.edit.cancel') }}</el-button>
+      <el-button type="primary" @click="editContract">{{ $t('contractManage.edit.save') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { updateContract, queryContractTypeSpec, queryContractFile, uploadContactFile } from '@/api/contract/contractManageApi'
+
+export default {
+  name: 'EditContract',
+  data() {
+    return {
+      visible: false,
+      editContractInfo: {
+        contractId: '',
+        contractName: '',
+        contractCode: '',
+        contractType: '',
+        partyA: '',
+        partyB: '',
+        aContacts: '',
+        bContacts: '',
+        aLink: '',
+        bLink: '',
+        operator: '',
+        operatorLink: '',
+        amount: '',
+        startTime: '',
+        endTime: '',
+        signingTime: '',
+        contractTypes: [],
+        contractTypeSpecs: [],
+        tempfile: null,
+        contractFilePo: []
+      }
+    }
+  },
+  methods: {
+    open(contract) {
+      this.resetForm()
+      this.editContractInfo = {
+        ...this.editContractInfo,
+        ...contract,
+        contractTypes: this.editContractInfo.contractTypes
+      }
+      this.loadContractType(contract)
+      this.loadFiles()
+      this.visible = true
+    },
+    handleClose() {
+      this.visible = false
+    },
+    resetForm() {
+      this.editContractInfo = {
+        contractId: '',
+        contractName: '',
+        contractCode: '',
+        contractType: '',
+        partyA: '',
+        partyB: '',
+        aContacts: '',
+        bContacts: '',
+        aLink: '',
+        bLink: '',
+        operator: '',
+        operatorLink: '',
+        amount: '',
+        startTime: '',
+        endTime: '',
+        signingTime: '',
+        contractTypes: this.editContractInfo.contractTypes,
+        contractTypeSpecs: [],
+        tempfile: null,
+        contractFilePo: []
+      }
+    },
+    async loadContractType(contract) {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          contractTypeId: contract.contractType
+        }
+        const { data } = await queryContractTypeSpec(params)
+        this.editContractInfo.contractTypeSpecs = data.map(item => {
+          const attr = contract.attrs.find(attr => attr.specCd === item.specCd) || {}
+          return {
+            ...item,
+            value: attr.value || ''
+          }
+        }).filter(item => item.specShow === 'Y')
+      } catch (error) {
+        console.error('加载合同类型规格失败:', error)
+      }
+    },
+    async loadFiles() {
+      try {
+        const params = {
+          contractId: this.editContractInfo.contractId,
+          page: 1,
+          row: 100
+        }
+        const { data } = await queryContractFile(params)
+        this.editContractInfo.contractFilePo = data.map((file, index) => ({
+          seq: index,
+          fileSaveName: file.fileSaveName,
+          fileRealName: file.fileRealName
+        }))
+      } catch (error) {
+        console.error('加载合同文件失败:', error)
+      }
+    },
+    addFileStep() {
+      const newFile = {
+        seq: this.editContractInfo.contractFilePo.length,
+        fileSaveName: '',
+        fileRealName: ''
+      }
+      this.editContractInfo.contractFilePo.push(newFile)
+    },
+    deleteStep(step) {
+      this.editContractInfo.contractFilePo = this.editContractInfo.contractFilePo.filter(
+        item => item.seq !== step.seq
+      )
+    },
+    getFile(event, index) {
+      const file = event.target.files[0]
+      if (!file) return
+
+      if (!this.checkFileType(file.name.split('.').pop())) {
+        this.$message.error(this.$t('contractManage.edit.fileTypeError'))
+        return
+      }
+
+      this.editContractInfo.tempfile = file
+      this.editContractInfo.contractFilePo[index].fileRealName = file.name
+      this.uploadFile(index)
+    },
+    checkFileType(fileType) {
+      const acceptTypes = ['png', 'pdf', 'jpg']
+      return acceptTypes.includes(fileType.toLowerCase())
+    },
+    async uploadFile(index) {
+      try {
+        const formData = new FormData()
+        formData.append('uploadFile', this.editContractInfo.tempfile)
+
+        const fileSaveName = await uploadContactFile(formData)
+        this.editContractInfo.contractFilePo[index].fileSaveName = fileSaveName
+        this.$message.success(this.$t('contractManage.edit.uploadSuccess'))
+      } catch (error) {
+        console.error('上传文件失败:', error)
+        this.$message.error(this.$t('contractManage.edit.uploadError'))
+      }
+    },
+    async editContract() {
+      try {
+        await updateContract(this.editContractInfo)
+        this.$message.success(this.$t('contractManage.edit.saveSuccess'))
+        this.$emit('success')
+        this.handleClose()
+      } catch (error) {
+        console.error('保存合同失败:', error)
+        this.$message.error(error.message || this.$t('contractManage.edit.saveError'))
+      }
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('contractPartyaManage.edit.title')"
+    :visible.sync="visible"
+    width="50%"
+    @close="handleClose"
+  >
+    <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
+      <el-form-item
+        :label="$t('contractPartyaManage.form.partyA')"
+        prop="partyA"
+      >
+        <el-input
+          v-model="formData.partyA"
+          :placeholder="$t('contractPartyaManage.form.partyAPlaceholder')"
+        />
+      </el-form-item>
+      <el-form-item
+        :label="$t('contractPartyaManage.form.aContacts')"
+        prop="aContacts"
+      >
+        <el-input
+          v-model="formData.aContacts"
+          :placeholder="$t('contractPartyaManage.form.aContactsPlaceholder')"
+        />
+      </el-form-item>
+      <el-form-item
+        :label="$t('contractPartyaManage.form.aLink')"
+        prop="aLink"
+      >
+        <el-input
+          v-model="formData.aLink"
+          :placeholder="$t('contractPartyaManage.form.aLinkPlaceholder')"
+        />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('common.cancel') }}
+      </el-button>
+      <el-button type="primary" @click="handleSubmit">
+        {{ $t('common.confirm') }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { updateContractPartya } from '@/api/contract/contractPartyaManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'EditContractPartya',
+  data() {
+    return {
+      visible: false,
+      formData: {
+        partyaId: '',
+        partyA: '',
+        aContacts: '',
+        aLink: '',
+        communityId: ''
+      },
+      rules: {
+        partyA: [
+          {
+            required: true,
+            message: this.$t('contractPartyaManage.validate.partyARequired'),
+            trigger: 'blur'
+          },
+          {
+            max: 200,
+            message: this.$t('contractPartyaManage.validate.partyAMaxLength'),
+            trigger: 'blur'
+          }
+        ],
+        aContacts: [
+          {
+            required: true,
+            message: this.$t('contractPartyaManage.validate.aContactsRequired'),
+            trigger: 'blur'
+          },
+          {
+            max: 64,
+            message: this.$t('contractPartyaManage.validate.aContactsMaxLength'),
+            trigger: 'blur'
+          }
+        ],
+        aLink: [
+          {
+            required: true,
+            message: this.$t('contractPartyaManage.validate.aLinkRequired'),
+            trigger: 'blur'
+          },
+          {
+            pattern: /^1[3-9]\d{9}$/,
+            message: this.$t('contractPartyaManage.validate.aLinkFormat'),
+            trigger: 'blur'
+          }
+        ],
+        partyaId: [
+          {
+            required: true,
+            message: this.$t('contractPartyaManage.validate.partyaIdRequired'),
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    open(data) {
+      this.visible = true
+      this.formData = {
+        ...data,
+        communityId: getCommunityId()
+      }
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+    },
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            await updateContractPartya(this.formData)
+            this.$message.success(this.$t('common.editSuccess'))
+            this.visible = false
+            this.$emit('success')
+          } catch (error) {
+            this.$message.error(error.message || this.$t('common.editFailed'))
+          }
+        }
+      })
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('contractTypeManage.edit.title')"
+    :visible.sync="visible"
+    width="50%"
+    @close="handleClose"
+  >
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="rules"
+      label-width="120px"
+    >
+      <el-form-item
+        :label="$t('contractTypeManage.edit.typeName')"
+        prop="typeName"
+      >
+        <el-input
+          v-model="form.typeName"
+          :placeholder="$t('contractTypeManage.edit.typeNamePlaceholder')"
+        />
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('contractTypeManage.edit.audit')"
+        prop="audit"
+      >
+        <el-select
+          v-model="form.audit"
+          :placeholder="$t('contractTypeManage.edit.auditPlaceholder')"
+          style="width:100%"
+        >
+          <el-option
+            v-for="item in audits"
+            :key="item.statusCd"
+            :label="item.name"
+            :value="item.statusCd"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('contractTypeManage.edit.remark')"
+        prop="remark"
+      >
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          :rows="3"
+          :placeholder="$t('contractTypeManage.edit.remarkPlaceholder')"
+        />
+      </el-form-item>
+    </el-form>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('common.cancel') }}
+      </el-button>
+      <el-button type="primary" @click="editContractType">
+        {{ $t('common.save') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getDict } from '@/api/community/communityApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import { updateContractType } from '@/api/contract/contractTypeManageApi'
+
+export default {
+  name: 'EditContractType',
+  data() {
+    return {
+      visible: false,
+      form: {
+        contractTypeId: '',
+        typeName: '',
+        audit: '',
+        remark: '',
+        communityId: ''
+      },
+      audits: [],
+      rules: {
+        contractTypeId: [
+          { required: true, message: this.$t('contractTypeManage.validate.contractTypeIdRequired'), trigger: 'blur' }
+        ],
+        typeName: [
+          { required: true, message: this.$t('contractTypeManage.validate.typeNameRequired'), trigger: 'blur' },
+          { max: 64, message: this.$t('contractTypeManage.validate.typeNameMaxLength'), trigger: 'blur' }
+        ],
+        audit: [
+          { required: true, message: this.$t('contractTypeManage.validate.auditRequired'), trigger: 'change' }
+        ],
+        remark: [
+          { max: 200, message: this.$t('contractTypeManage.validate.remarkMaxLength'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open(row) {
+      this.form = {
+        contractTypeId: row.contractTypeId,
+        typeName: row.typeName,
+        audit: row.audit,
+        remark: row.remark,
+        communityId: getCommunityId()
+      }
+      this.getAuditOptions()
+      this.visible = true
+    },
+    async getAuditOptions() {
+      try {
+        const data = await getDict('contract_type', 'audit')
+        this.audits = data
+      } catch (error) {
+        console.error('获取审核选项失败:', error)
+      }
+    },
+    async editContractType() {
+      this.$refs.form.validate(async valid => {
+        if (!valid) return
+
+        try {
+          const res = await updateContractType(this.form)
+          
+          if (res.code === 0) {
+            this.$message.success(this.$t('common.operateSuccess'))
+            this.visible = false
+            this.$emit('success')
+          } else {
+            this.$message.error(res.msg)
+          }
+        } catch (error) {
+          this.$message.error(this.$t('common.operateFailed'))
+        }
+      })
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+      this.form = {
+        contractTypeId: '',
+        typeName: '',
+        audit: '',
+        remark: '',
+        communityId: ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-select {
+  width: 100%;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('contractTypeSpecManage.edit.title')"
+    :visible.sync="visible"
+    width="50%"
+    @close="handleClose"
+  >
+    <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
+      <el-form-item
+        :label="$t('contractTypeSpecManage.edit.specName')"
+        prop="specName"
+      >
+        <el-input
+          v-model="formData.specName"
+          :placeholder="$t('contractTypeSpecManage.edit.specNamePlaceholder')"
+        />
+      </el-form-item>
+      <el-form-item
+        :label="$t('contractTypeSpecManage.edit.specHoldplace')"
+        prop="specHoldplace"
+      >
+        <el-input
+          v-model="formData.specHoldplace"
+          :placeholder="$t('contractTypeSpecManage.edit.specHoldplacePlaceholder')"
+        />
+      </el-form-item>
+      <el-form-item
+        :label="$t('contractTypeSpecManage.edit.required')"
+        prop="required"
+      >
+        <el-select
+          v-model="formData.required"
+          :placeholder="$t('contractTypeSpecManage.edit.requiredPlaceholder')"
+          style="width:100%"
+        >
+          <el-option
+            :label="$t('common.yes')"
+            value="Y"
+          />
+          <el-option
+            :label="$t('common.no')"
+            value="N"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        :label="$t('contractTypeSpecManage.edit.specShow')"
+        prop="specShow"
+      >
+        <el-select
+          v-model="formData.specShow"
+          :placeholder="$t('contractTypeSpecManage.edit.specShowPlaceholder')"
+          style="width:100%"
+        >
+          <el-option
+            :label="$t('common.yes')"
+            value="Y"
+          />
+          <el-option
+            :label="$t('common.no')"
+            value="N"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        :label="$t('contractTypeSpecManage.edit.specValueType')"
+        prop="specValueType"
+      >
+        <el-select
+          v-model="formData.specValueType"
+          :placeholder="$t('contractTypeSpecManage.edit.specValueTypePlaceholder')"
+          style="width:100%"
+        >
+          <el-option
+            :label="$t('contractTypeSpecManage.specValueType.string')"
+            value="1001"
+          />
+          <el-option
+            :label="$t('contractTypeSpecManage.specValueType.integer')"
+            value="2002"
+          />
+          <el-option
+            :label="$t('contractTypeSpecManage.specValueType.amount')"
+            value="3003"
+          />
+          <el-option
+            :label="$t('contractTypeSpecManage.specValueType.date')"
+            value="4004"
+          />
+          <el-option
+            :label="$t('contractTypeSpecManage.specValueType.time')"
+            value="5005"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        :label="$t('contractTypeSpecManage.edit.specType')"
+        prop="specType"
+      >
+        <el-select
+          v-model="formData.specType"
+          :placeholder="$t('contractTypeSpecManage.edit.specTypePlaceholder')"
+          style="width:100%"
+        >
+          <el-option
+            :label="$t('contractTypeSpecManage.specType.input')"
+            value="2233"
+          />
+          <el-option
+            :label="$t('contractTypeSpecManage.specType.select')"
+            value="3344"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        :label="$t('contractTypeSpecManage.edit.listShow')"
+        prop="listShow"
+      >
+        <el-select
+          v-model="formData.listShow"
+          :placeholder="$t('contractTypeSpecManage.edit.listShowPlaceholder')"
+          style="width:100%"
+        >
+          <el-option
+            :label="$t('common.yes')"
+            value="Y"
+          />
+          <el-option
+            :label="$t('common.no')"
+            value="N"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('common.cancel') }}
+      </el-button>
+      <el-button type="primary" @click="handleSubmit">
+        {{ $t('common.confirm') }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { updateContractTypeSpec } from '@/api/contract/contractTypeSpecManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'EditContractTypeSpec',
+  data() {
+    return {
+      visible: false,
+      formData: {
+        specCd: '',
+        specName: '',
+        specHoldplace: '',
+        required: '',
+        specShow: '',
+        specValueType: '',
+        specType: '',
+        listShow: '',
+        contractTypeId: '',
+        communityId: ''
+      },
+      rules: {
+        specName: [
+          { required: true, message: this.$t('contractTypeSpecManage.validate.specNameRequired'), trigger: 'blur' },
+          { max: 64, message: this.$t('contractTypeSpecManage.validate.specNameMaxLength'), trigger: 'blur' }
+        ],
+        specHoldplace: [
+          { max: 200, message: this.$t('contractTypeSpecManage.validate.specHoldplaceMaxLength'), trigger: 'blur' }
+        ],
+        required: [
+          { required: true, message: this.$t('contractTypeSpecManage.validate.requiredRequired'), trigger: 'change' }
+        ],
+        specShow: [
+          { required: true, message: this.$t('contractTypeSpecManage.validate.specShowRequired'), trigger: 'change' }
+        ],
+        specValueType: [
+          { required: true, message: this.$t('contractTypeSpecManage.validate.specValueTypeRequired'), trigger: 'change' }
+        ],
+        specType: [
+          { required: true, message: this.$t('contractTypeSpecManage.validate.specTypeRequired'), trigger: 'change' }
+        ],
+        listShow: [
+          { required: true, message: this.$t('contractTypeSpecManage.validate.listShowRequired'), trigger: 'change' }
+        ],
+        specCd: [
+          { required: true, message: this.$t('contractTypeSpecManage.validate.specCdRequired'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open(data) {
+      this.formData = { ...data, communityId: getCommunityId() }
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs.form.clearValidate()
+      })
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+    },
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            await updateContractTypeSpec(this.formData)
+            this.$message.success(this.$t('contractTypeSpecManage.edit.success'))
+            this.visible = false
+            this.$emit('success')
+          } catch (error) {
+            this.$message.error(error.message || this.$t('contractTypeSpecManage.edit.error'))
+          }
+        }
+      })
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div class="org-tree-container">
+    <el-tree
+      ref="orgTree"
+      :data="orgTreeShowInfo.orgs"
+      :props="defaultProps"
+      node-key="id"
+      default-expand-all
+      highlight-current
+      @node-click="handleNodeClick"
+    ></el-tree>
+  </div>
+</template>
+
+<script>
+import { listOrgTree } from '@/api/contract/contractChangeDetailApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'OrgTreeShow',
+  props: {
+    callBackListener: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      orgTreeShowInfo: {
+        orgs: [],
+        orgId: '',
+        curOrg: {}
+      },
+      defaultProps: {
+        children: 'children',
+        label: 'text'
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    loadOrgsShow() {
+      const param = {
+        communityId: this.communityId
+      }
+
+      listOrgTree(param)
+        .then(response => {
+          const orgs = response.data
+          this.orgTreeShowInfo.orgs = orgs
+        })
+        .catch(error => {
+          console.error('请求失败:', error)
+        })
+    },
+    handleNodeClick(data) {
+      this.orgTreeShowInfo.curOrg = data
+      this.orgTreeShowInfo.curOrg.orgId = data.id
+      this.$emit(this.callBackListener, 'switchOrg', {
+        orgId: data.id,
+        orgName: data.text
+      })
+    },
+    refreshTree() {
+      this.loadOrgsShow()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.org-tree-container {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.el-tree {
+  min-height: 400px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-card class="box-card">
+    <div slot="header" class="clearfix">
+      <span>{{ $t('purchaseApprovers.title') }}</span>
+    </div>
+
+    <div v-if="purchaseApproversInfo.orgName">
+      <el-form label-width="120px">
+        <el-form-item :label="$t('purchaseApprovers.orgName')">
+          <el-input v-model="purchaseApproversInfo.orgName" :placeholder="$t('purchaseApprovers.orgPlaceholder')"
+            readonly></el-input>
+        </el-form-item>
+
+        <el-form-item :label="$t('purchaseApprovers.staffName')">
+          <el-input v-model="purchaseApproversInfo.staffName" :placeholder="$t('purchaseApprovers.staffPlaceholder')"
+            readonly></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div v-else>
+      <el-form label-width="120px">
+        <el-form-item :label="$t('purchaseApprovers.staffName')">
+          <el-col :span="18">
+            <el-input v-model="purchaseApproversInfo.staffName" :placeholder="$t('purchaseApprovers.staffPlaceholder')"
+              disabled></el-input>
+          </el-col>
+          <el-col :span="6">
+            <el-button type="primary" @click="chooseStaff">
+              <i class="el-icon-search"></i>
+              {{ $t('common.select') }}
+            </el-button>
+          </el-col>
+        </el-form-item>
+      </el-form>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import { getFirstStaff } from '@/api/contract/contractChangeDetailApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'PurchaseApprovers',
+  props: {
+    callBackListener: {
+      type: String,
+      default: ''
+    },
+    callBackFunction: {
+      type: String,
+      default: ''
+    },
+    flowType: {
+      type: String,
+      default: '60006'
+    }
+  },
+  data() {
+    return {
+      purchaseApproversInfo: {
+        flowComponent: 'purchaseApprovers',
+        staffId: '',
+        staffName: '',
+        orgName: '',
+        companyId: ''
+      },
+      communityId: ''
+    }
+  },
+  watch: {
+    purchaseApproversInfo: {
+      deep: true,
+      handler(newVal) {
+        console.log('purchaseApproversInfo:', newVal)
+        this.savePurchaseApprovers()
+      }
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.loadStaffOrg()
+  },
+  methods: {
+    loadStaffOrg() {
+      const param = {
+        communityId: this.communityId,
+        flowType: this.flowType
+      }
+
+      getFirstStaff(param)
+        .then(response => {
+          if (response.code === 0) {
+            const data = response.data
+            Object.assign(this.purchaseApproversInfo, data)
+            this.purchaseApproversInfo.orgName = data.orgName
+          }
+        })
+        .catch(error => {
+          console.error('请求失败:', error)
+        })
+    },
+    purchaseApproversValidate() {
+      if (!this.purchaseApproversInfo.staffId) {
+        this.$message.error(this.$t('purchaseApprovers.staffRequired'))
+        return false
+      }
+      if (!this.purchaseApproversInfo.staffName) {
+        this.$message.error(this.$t('purchaseApprovers.staffNameRequired'))
+        return false
+      }
+      return true
+    },
+    savePurchaseApprovers() {
+      if (this.purchaseApproversValidate()) {
+        this.$emit(this.callBackListener, this.callBackFunction, this.purchaseApproversInfo)
+      }
+    },
+    chooseStaff() {
+      this.$emit('openSelectStaff', this.purchaseApproversInfo)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.box-card {
+  margin-bottom: 20px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('contract.selectOwner')"
+    :visible.sync="visible"
+    width="80%"
+    :before-close="handleClose">
+    
+    <div class="search-wrapper">
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <el-input
+            v-model="searchOwnerInfo.roomName"
+            :placeholder="$t('contract.inputRoomFullNum')">
+          </el-input>
+        </el-col>
+        <el-col :span="8">
+          <el-input
+            v-model="searchOwnerInfo._currentOwnerName"
+            :placeholder="$t('contract.inputOwnerName')">
+          </el-input>
+        </el-col>
+        <el-col :span="8">
+          <el-button type="primary" @click="searchOwners">
+            <i class="el-icon-search"></i>{{ $t('common.search') }}
+          </el-button>
+          <el-button @click="resetOwners">{{ $t('common.reset') }}</el-button>
+        </el-col>
+      </el-row>
+    </div>
+    
+    <el-table
+      :data="searchOwnerInfo.owners"
+      border
+      style="width: 100%"
+      height="400">
+      <el-table-column
+        prop="memberId"
+        :label="$t('contract.ownerId')"
+        align="center">
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        :label="$t('contract.name')"
+        align="center">
+      </el-table-column>
+      <el-table-column
+        prop="personTypeName"
+        :label="$t('contract.personType')"
+        align="center">
+      </el-table-column>
+      <el-table-column
+        prop="personRoleName"
+        :label="$t('contract.personRole')"
+        align="center">
+      </el-table-column>
+      <el-table-column
+        prop="idCard"
+        :label="$t('contract.idCard')"
+        align="center">
+      </el-table-column>
+      <el-table-column
+        prop="link"
+        :label="$t('contract.contact')"
+        align="center">
+      </el-table-column>
+      <el-table-column
+        :label="$t('common.operation')"
+        align="center"
+        width="120">
+        <template slot-scope="scope">
+          <el-button
+            type="primary"
+            size="mini"
+            @click="chooseOwner(scope.row)">
+            {{ $t('contract.select') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    
+    <div class="pagination-wrapper">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="page.current"
+        :page-sizes="[10, 20, 30, 50]"
+        :page-size="page.size"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="page.total">
+      </el-pagination>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { queryOwners } from '@/api/contract/addContractApi'
+
+export default {
+  name: 'SearchOwner',
+  props: {
+    emitChooseOwner: String,
+    emitLoadData: String
+  },
+  data() {
+    return {
+      visible: false,
+      searchOwnerInfo: {
+        owners: [],
+        _currentOwnerName: '',
+        roomName: '',
+        ownerTypeCd: '1001'
+      },
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open(params = {}) {
+      this.visible = true
+      this._refreshSearchOwnerData()
+      if (params.hasOwnProperty('ownerTypeCd')) {
+        this.searchOwnerInfo.ownerTypeCd = params.ownerTypeCd
+      }
+      this._loadAllOwnerInfo(1, 10)
+    },
+    handleClose() {
+      this.visible = false
+    },
+    _loadAllOwnerInfo(_page, _row) {
+      const params = {
+        page: _page,
+        row: _row,
+        communityId: this.$store.getters.communityId,
+        name: this.searchOwnerInfo._currentOwnerName.trim(),
+        roomName: this.searchOwnerInfo.roomName.trim(),
+        ownerTypeCd: this.searchOwnerInfo.ownerTypeCd
+      }
+      
+      queryOwners(params).then(response => {
+        this.searchOwnerInfo.owners = response.data
+        this.page.total = response.records
+        this.page.current = _page
+        this.page.size = _row
+      })
+    },
+    chooseOwner(owner) {
+      this.$emit('chooseOwner', owner)
+      this.$emit(this.emitLoadData, 'listOwnerData', {
+        ownerId: owner.ownerId
+      })
+      this.visible = false
+    },
+    searchOwners() {
+      this._loadAllOwnerInfo(1, 10)
+    },
+    resetOwners() {
+      this.searchOwnerInfo.roomName = ""
+      this.searchOwnerInfo._currentOwnerName = ""
+      this._loadAllOwnerInfo(1, 10)
+    },
+    _refreshSearchOwnerData() {
+      this.searchOwnerInfo = {
+        owners: [],
+        _currentOwnerName: '',
+        roomName: '',
+        ownerTypeCd: '1001'
+      }
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this._loadAllOwnerInfo(this.page.current, val)
+    },
+    handleCurrentChange(val) {
+      this._loadAllOwnerInfo(val, this.page.size)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.search-wrapper {
+  margin-bottom: 20px;
+}
+
+.pagination-wrapper {
+  margin-top: 20px;
+  text-align: right;
+}
+
+.el-button + .el-button {
+  margin-left: 10px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('searchRoom.title')"
+    :visible.sync="dialogVisible"
+    width="80%"
+    @close="handleClose"
+  >
+    <el-form v-if="searchRoomInfo.showSearchCondition" inline>
+      <el-form-item :label="$t('searchRoom.buildingNo')">
+        <el-input
+          v-model="searchRoomInfo._currentFloorNum"
+          :placeholder="$t('searchRoom.buildingNoPlaceholder')"
+          :readonly="searchRoomInfo.floorNumInputReadonly"
+        ></el-input>
+      </el-form-item>
+      
+      <el-form-item :label="$t('searchRoom.roomNo')">
+        <el-input
+          v-model="searchRoomInfo._currentRoomNum"
+          :placeholder="$t('searchRoom.roomNoPlaceholder')"
+        ></el-input>
+      </el-form-item>
+      
+      <el-form-item>
+        <el-button type="primary" @click="searchRooms">
+          <i class="el-icon-search"></i>
+          {{ $t('common.search') }}
+        </el-button>
+        <el-button @click="resetRooms">
+          <i class="el-icon-refresh"></i>
+          {{ $t('common.reset') }}
+        </el-button>
+      </el-form-item>
+    </el-form>
+    
+    <el-table :data="searchRoomInfo.rooms" border>
+      <el-table-column
+        prop="roomId"
+        :label="$t('searchRoom.roomId')"
+        align="center"
+      />
+      
+      <el-table-column
+        prop="floorNum"
+        :label="$t('searchRoom.buildingNo')"
+        align="center"
+      >
+        <template slot-scope="scope">
+          {{ scope.row.floorNum }}{{ $t('searchRoom.building') }}
+        </template>
+      </el-table-column>
+      
+      <el-table-column
+        prop="unitNum"
+        :label="$t('searchRoom.unitNo')"
+        align="center"
+      >
+        <template slot-scope="scope">
+          {{ scope.row.unitNum }}{{ $t('searchRoom.unit') }}
+        </template>
+      </el-table-column>
+      
+      <el-table-column
+        prop="roomNum"
+        :label="$t('searchRoom.roomNo')"
+        align="center"
+      >
+        <template slot-scope="scope">
+          {{ scope.row.roomNum }}{{ $t('searchRoom.room') }}
+        </template>
+      </el-table-column>
+      
+      <el-table-column
+        prop="layer"
+        :label="$t('searchRoom.floor')"
+        align="center"
+      >
+        <template slot-scope="scope">
+          {{ scope.row.layer }}{{ $t('searchRoom.floorUnit') }}
+        </template>
+      </el-table-column>
+      
+      <el-table-column
+        :label="$t('common.operation')"
+        align="center"
+        width="120"
+      >
+        <template slot-scope="scope">
+          <el-button
+            type="primary"
+            size="mini"
+            @click="chooseRoom(scope.row)"
+          >
+            {{ $t('common.select') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    
+    <div class="pagination-wrapper">
+      <el-pagination
+        :current-page="pagination.current"
+        :page-sizes="[10, 20, 30, 50]"
+        :page-size="pagination.size"
+        :total="pagination.total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { queryRooms } from '@/api/contract/contractChangeDetailApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'SearchRoom',
+  props: {
+    emitChooseRoom: {
+      type: String,
+      default: ''
+    },
+    emitLoadData: {
+      type: String,
+      default: ''
+    },
+    roomFlag: {
+      type: String,
+      default: ''
+    },
+    showSearchCondition: {
+      type: String,
+      default: 'true'
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      searchRoomInfo: {
+        rooms: [],
+        _currentRoomNum: '',
+        _currentFloorNum: '',
+        floorNumInputReadonly: false,
+        showSearchCondition: this.showSearchCondition === 'true'
+      },
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    open() {
+      this.dialogVisible = true
+      this.refreshSearchRoomData()
+      this.loadAllRoomInfo(1, 10)
+    },
+    chooseRoom(room) {
+      this.$emit(this.emitChooseRoom, 'chooseRoom', room)
+      this.$emit(this.emitLoadData, 'listRoomData', {
+        roomId: room.roomId
+      })
+      this.dialogVisible = false
+    },
+    searchRooms() {
+      this.loadAllRoomInfo(1, 15, this.searchRoomInfo._currentRoomNum)
+    },
+    resetRooms() {
+      this.searchRoomInfo._currentFloorNum = ''
+      this.searchRoomInfo._currentRoomNum = ''
+      this.loadAllRoomInfo(1, 15)
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.loadAllRoomInfo(this.pagination.current, val)
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.loadAllRoomInfo(val, this.pagination.size)
+    },
+    handleClose() {
+      this.searchRoomInfo._currentRoomNum = ''
+    },
+    refreshSearchRoomData() {
+      this.searchRoomInfo._currentRoomNum = ''
+    },
+    loadAllRoomInfo(page, row, roomNum) {
+      const params = {
+        page,
+        row,
+        communityId: this.communityId,
+        roomNum,
+        floorNum: this.searchRoomInfo._currentFloorNum,
+        roomFlag: this.roomFlag
+      }
+
+      let url = '/room.queryRooms'
+      if (this.roomFlag === '1') {
+        url = '/room.queryRoomsWithSell'
+      } else if (this.roomFlag === '2') {
+        url = '/room.queryRoomsWithOutSell'
+      }
+
+      queryRooms(params, url)
+        .then(response => {
+          const roomInfo = response.data
+          this.searchRoomInfo.rooms = roomInfo.rooms
+          this.pagination.total = roomInfo.records
+        })
+        .catch(error => {
+          console.error('请求失败:', error)
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pagination-wrapper {
+  margin-top: 20px;
+  text-align: right;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('selectStaff.title')"
+    :visible.sync="dialogVisible"
+    width="80%"
+  >
+    <el-row>
+      <el-col :span="12" class="border-right">
+        <div class="text-center">
+          <h4>{{ $t('selectStaff.orgInfo') }}</h4>
+        </div>
+        <div class="tree-container">
+          <org-tree-show
+            ref="orgTreeShow"
+            :call-back-listener="callBackListener"
+          />
+        </div>
+      </el-col>
+      
+      <el-col :span="12">
+        <div class="text-center">
+          <h4>{{ $t('selectStaff.staffInfo') }}</h4>
+        </div>
+        <div class="staff-list">
+          <div
+            v-for="(item, index) in selectStaffInfo.staffs"
+            :key="index"
+            class="staff-item"
+            :class="{ 'selected': selectStaffInfo.curStaffId === item.staffId }"
+            @click="changeStaff(item)"
+          >
+            <div>
+              <i class="el-icon-user"></i>
+              {{ item.name }}
+            </div>
+            <div>{{ item.tel }}</div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    
+    <div
+      v-if="selectStaffInfo.staff.from === 'bpmn' || 
+            selectStaffInfo.staff.from === 'purchase' || 
+            selectStaffInfo.staff.from === 'contract'"
+      slot="footer"
+      class="dialog-footer"
+    >
+      <el-button @click="firstUser">
+        {{ $t('selectStaff.submitter') }}
+      </el-button>
+      <el-button type="primary" @click="customUser">
+        {{ $t('selectStaff.dynamicAssign') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { queryStaffInfos } from '@/api/contract/contractChangeDetailApi'
+import OrgTreeShow from '@/components/contract/OrgTreeShow'
+
+export default {
+  name: 'SelectStaff',
+  components: {
+    OrgTreeShow
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      selectStaffInfo: {
+        staffs: [],
+        curStaffId: '',
+        curStaffName: '',
+        staff: {}
+      },
+      callBackListener: 'selectStaff'
+    }
+  },
+  methods: {
+    open(staff) {
+      this.selectStaffInfo.staff = staff
+      this.dialogVisible = true
+      this.$refs.orgTreeShow.loadOrgsShow()
+    },
+    changeStaff(item) {
+      this.selectStaffInfo.curStaffId = item.staffId
+      this.selectStaffInfo.curStaffName = item.name
+      
+      if (this.selectStaffInfo.staff) {
+        this.selectStaffInfo.staff.staffId = item.userId
+        this.selectStaffInfo.staff.staffName = item.userName
+        this.selectStaffInfo.staff.staffTel = item.tel
+        
+        if (this.selectStaffInfo.staff.call) {
+          this.selectStaffInfo.staff.call(this.selectStaffInfo.staff)
+        }
+      }
+      
+      this.dialogVisible = false
+    },
+    loadStaff(org) {
+      const param = {
+        page: 1,
+        rows: 50,
+        orgId: org.orgId
+      }
+
+      queryStaffInfos(param)
+        .then(response => {
+          const staffInfo = response.data
+          this.selectStaffInfo.staffs = staffInfo.staffs
+          if (staffInfo.staffs.length > 0) {
+            this.selectStaffInfo.curStaffId = staffInfo.staffs[0].orgId
+          }
+        })
+        .catch(error => {
+          console.error('请求失败:', error)
+        })
+    },
+    firstUser() {
+      if (this.selectStaffInfo.staff) {
+        this.selectStaffInfo.staff.staffId = '${startUserId}'
+        this.selectStaffInfo.staff.staffName = this.$t('selectStaff.submitter')
+        
+        if (this.selectStaffInfo.staff.call) {
+          this.selectStaffInfo.staff.call(this.selectStaffInfo.staff)
+        }
+      }
+      this.dialogVisible = false
+    },
+    customUser() {
+      if (this.selectStaffInfo.staff) {
+        this.selectStaffInfo.staff.staffId = '${nextUserId}'
+        this.selectStaffInfo.staff.staffName = this.$t('selectStaff.dynamicAssign')
+        
+        if (this.selectStaffInfo.staff.call) {
+          this.selectStaffInfo.staff.call(this.selectStaffInfo.staff)
+        }
+      }
+      this.dialogVisible = false
+    }
+  },
+  created() {
+    this.$on('switchOrg', param => {
+      this.loadStaff(param)
+    })
+  }
+}
+</script>
+
+<style scoped>
+.border-right {
+  border-right: 1px solid #eee;
+  padding-right: 20px;
+}
+
+.tree-container {
+  height: 400px;
+  overflow-y: auto;
+}
+
+.staff-list {
+  height: 400px;
+  overflow-y: auto;
+  padding-left: 20px;
+}
+
+.staff-item {
+  padding: 10px;
+  margin-bottom: 5px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.staff-item:hover {
+  background-color: #f5f7fa;
+}
+
+.staff-item.selected {
+  background-color: #ecf5ff;
+  color: #409eff;
+}
+
+.text-center {
+  text-align: center;
+  margin-bottom: 15px;
+}
+
+.dialog-footer {
+  text-align: right;
+}
+</style>
 \ No newline at end of file
+import { messages as contractTypeManageMessages } from '../views/contract/contractTypeManageLang'
+import { messages as contractTypeSpecManageMessages } from '../views/contract/contractTypeSpecManageLang'
+import { messages as contractPartyaManageMessages } from '../views/contract/contractPartyaManageLang'
+import { messages as newContractManageMessages } from '../views/contract/newContractManageLang'
+import { messages as printContractMessages } from '../views/contract/printContractLang'
+import { messages as addContractMessages } from '../views/contract/addContractLang'
+import { messages as contractManageMessages } from '../views/contract/contractManageLang'
+import { messages as contractChangeManageMessages } from '../views/contract/contractChangeManageLang'
+import { messages as contractChangeDetailMessages } from '../views/contract/contractChangeDetailLang'
+import { messages as expirationContractManageMessages } from '../views/contract/expirationContractManageLang'
+
+export const messages ={
+    en:{
+        ...contractTypeManageMessages.en,
+        ...contractTypeSpecManageMessages.en,
+        ...contractPartyaManageMessages.en,
+        ...newContractManageMessages.en,
+        ...printContractMessages.en,
+        ...addContractMessages.en,
+        ...contractManageMessages.en,
+        ...contractChangeManageMessages.en,
+        ...contractChangeDetailMessages.en,
+        ...expirationContractManageMessages.en,
+    },
+    zh:{    
+        ...contractTypeManageMessages.zh, 
+        ...contractTypeSpecManageMessages.zh,
+        ...contractPartyaManageMessages.zh,
+        ...newContractManageMessages.zh,
+        ...printContractMessages.zh,
+        ...addContractMessages.zh,
+        ...contractManageMessages.zh,
+        ...contractChangeManageMessages.zh,
+        ...contractChangeDetailMessages.zh,
+        ...expirationContractManageMessages.zh,
+    }
+}
 \ No newline at end of file
@@ -207,6 +207,7 @@ import { messages as printEquipmentAccountLabelMessages } from &#39;../views/resourc
 import {messages as inspectioni18n} from './inspectionI18n'
 import {messages as machineI18n} from './machineI18n'
 import {messages as oaI18n} from './oaI18n'
+import {messages as contractI18n} from './contractI18n'
  
 Vue.use(VueI18n)
  
@@ -418,6 +419,7 @@ const messages = {
     ...inspectioni18n.en,
     ...machineI18n.en,
     ...oaI18n.en,
+    ...contractI18n.en,
   },
   zh: {
     ...loginMessages.zh,
@@ -625,6 +627,7 @@ const messages = {
      ...inspectioni18n.zh,
      ...machineI18n.zh,
      ...oaI18n.zh,
+     ...contractI18n.zh,
   }
 }
  
+export default [
+    {
+        path: '/pages/admin/contractTypeManage',
+        name: '/pages/admin/contractTypeManage',
+        component: () => import('@/views/contract/contractTypeManageList.vue')
+    },
+    {
+        path: '/views/contract/contractTypeSpecManage',
+        name: '/views/contract/contractTypeSpecManage',
+        component: () => import('@/views/contract/contractTypeSpecManageList.vue')
+    },
+    {
+        path: '/pages/admin/contractPartyaManage',
+        name: '/pages/admin/contractPartyaManage',
+        component: () => import('@/views/contract/contractPartyaManageList.vue')
+    },
+    {
+        path: '/pages/admin/newContractManage',
+        name: '/pages/admin/newContractManage',
+        component: () => import('@/views/contract/newContractManageList.vue')
+    },
+    {
+        path: '/views/contract/addContract',
+        name: '/views/contract/addContract',
+        component: () => import('@/views/contract/addContractList.vue')
+    },
+    {
+        path: '/pages/admin/contractManage',
+        name: '/pages/admin/contractManage',
+        component: () => import('@/views/contract/contractManageList.vue')
+    },
+    {
+        path: '/pages/admin/contractChangeManage',
+        name: '/pages/admin/contractChangeManage',
+        component: () => import('@/views/contract/contractChangeManageList.vue')
+    },
+    {
+        path: '/views/contract/contractChangeDetail',
+        name: '/views/contract/contractChangeDetail',
+        component: () => import('@/views/contract/contractChangeDetailList.vue')
+    },
+    {
+        path: '/pages/admin/expirationContractManage',
+        name: '/pages/admin/expirationContractManage',
+        component: () => import('@/views/contract/expirationContractManageList.vue')
+    },
+]
 \ No newline at end of file
@@ -6,6 +6,7 @@ import printEquipmentAccountLabel from &#39;@/views/resource/printEquipmentAccountLa
 import inspectionRouter from './inspectionRouter'
 import machineRouter from './machineRouter'
 import oaRouter from './oaRouter'
+import contractRouter from './contractRouter'
  
 Vue.use(VueRouter)
  
@@ -928,6 +929,7 @@ const routes = [
       ...inspectionRouter,
       ...machineRouter,
       ...oaRouter,
+      ...contractRouter,
       // 其他子路由可以在这里添加
     ]
   },
@@ -956,10 +958,15 @@ const routes = [
     component: () => import('@/views/oa/printQuestionAnswerDetailList.vue')
   },
   {
-    path:'/views/oa/printOwnerVoting',
-    name:'/views/oa/printOwnerVoting',
+    path: '/views/oa/printOwnerVoting',
+    name: '/views/oa/printOwnerVoting',
     component: () => import('@/views/oa/printOwnerVotingList.vue')
-    },
+  },
+  {
+    path: '/views/contract/printContract',
+    name: '/views/contract/printContract',
+    component: () => import('@/views/contract/printContractList.vue')
+  },
 ]
  
 const router = new VueRouter({
+export const messages = {
+  en: {
+    contract: {
+      renewContract: 'Renew Contract',
+      draftContract: 'Draft Contract',
+      parentContractName: 'Parent Contract Name',
+      parentContractCode: 'Parent Contract Code',
+      parentContractStatus: 'Parent Contract Status',
+      contractName: 'Contract Name',
+      requiredContractName: 'Required, please fill in contract name',
+      contractCode: 'Contract Code',
+      requiredContractCode: 'Required, please fill in contract code',
+      contractType: 'Contract Type',
+      requiredContractType: 'Required, please select contract type',
+      partyA: 'Party A',
+      requiredPartyA: 'Required, please select Party A',
+      partyAContact: 'Party A Contact',
+      partyAPhone: 'Party A Phone',
+      partyB: 'Party B',
+      partyBContact: 'Party B Contact',
+      partyBPhone: 'Party B Phone',
+      operator: 'Operator',
+      operatorPhone: 'Operator Phone',
+      contractAmount: 'Contract Amount',
+      startTime: 'Start Time',
+      requiredStartTime: 'Required, please fill in start time',
+      endTime: 'End Time',
+      requiredEndTime: 'Required, please fill in end time',
+      signingTime: 'Signing Time',
+      requiredSigningTime: 'Required, please fill in signing time',
+      contractAttachments: 'Contract Attachments',
+      addAttachment: 'Add Attachment',
+      attachment: 'Attachment',
+      deleteAttachment: 'Delete Attachment',
+      relatedRooms: 'Related Rooms',
+      add: 'Add',
+      room: 'Room',
+      owner: 'Owner',
+      phone: 'Phone',
+      builtUpArea: 'Built-up Area',
+      squareMeter: 'Square Meter',
+      roomStatus: 'Room Status',
+      select: 'Select',
+      approverInfo: 'Approver Information',
+      organization: 'Organization',
+      requiredOrganization: 'Required, please fill in organization',
+      staff: 'Staff',
+      requiredStaff: 'Required, please fill in staff',
+      requiredNextHandler: 'Required, please select next handler',
+      selectStaff: 'Select Staff',
+      orgInfo: 'Organization Information',
+      staffInfo: 'Staff Information',
+      submitter: 'Submitter',
+      dynamicAssign: 'Dynamic Assign',
+      selectRoom: 'Select Room',
+      inputBuildingNum: 'Input building number',
+      inputRoomNum: 'Input room number',
+      roomId: 'Room ID',
+      buildingNum: 'Building Number',
+      building: 'Building',
+      unitNum: 'Unit Number',
+      unit: 'Unit',
+      roomNum: 'Room Number',
+      floor: 'Floor',
+      floorUnit: 'Floor',
+      selectOwner: 'Select Owner',
+      inputRoomFullNum: 'Input room full number (Building-Unit-Room)',
+      inputOwnerName: 'Input owner name',
+      ownerId: 'Owner ID',
+      name: 'Name',
+      personType: 'Person Type',
+      personRole: 'Person Role',
+      idCard: 'ID Card',
+      contact: 'Contact',
+      submitSuccess: 'Submit successfully',
+      invalidFileType: 'Operation failed, please upload image or PDF format files',
+      required: 'Required'
+    }
+  },
+  zh: {
+    contract: {
+      renewContract: '续签合同',
+      draftContract: '起草合同',
+      parentContractName: '父合同名称',
+      parentContractCode: '父合同编号',
+      parentContractStatus: '父合同状态',
+      contractName: '合同名称',
+      requiredContractName: '必填，请填写合同名称',
+      contractCode: '合同编号',
+      requiredContractCode: '必填，请填写合同编号',
+      contractType: '合同类型',
+      requiredContractType: '必填，请选择合同类型',
+      partyA: '甲方',
+      requiredPartyA: '必填，请选择甲方',
+      partyAContact: '甲方联系人',
+      partyAPhone: '甲方联系电话',
+      partyB: '乙方',
+      partyBContact: '乙方联系人',
+      partyBPhone: '乙方联系电话',
+      operator: '经办人',
+      operatorPhone: '联系电话',
+      contractAmount: '合同金额',
+      startTime: '开始时间',
+      requiredStartTime: '必填，请填写开始时间',
+      endTime: '结束时间',
+      requiredEndTime: '必填，请填写结束时间',
+      signingTime: '签订时间',
+      requiredSigningTime: '必填，请填写签订时间',
+      contractAttachments: '合同附件',
+      addAttachment: '添加附件',
+      attachment: '附件',
+      deleteAttachment: '删除附件',
+      relatedRooms: '关联房屋',
+      add: '添加',
+      room: '房屋',
+      owner: '业主',
+      phone: '电话',
+      builtUpArea: '建筑面积',
+      squareMeter: '平方米',
+      roomStatus: '房屋状态',
+      select: '选择',
+      approverInfo: '审批人信息',
+      organization: '所属组织',
+      requiredOrganization: '必填，请填写所属组织',
+      staff: '员工',
+      requiredStaff: '必填，请填写所属员工',
+      requiredNextHandler: '必填，请选择下一处理人',
+      selectStaff: '选择员工',
+      orgInfo: '组织信息',
+      staffInfo: '员工信息',
+      submitter: '提交者',
+      dynamicAssign: '动态指定',
+      selectRoom: '选择房屋',
+      inputBuildingNum: '输入小区楼编号',
+      inputRoomNum: '输入房屋编号',
+      roomId: '房屋ID',
+      buildingNum: '楼栋编号',
+      building: '号楼',
+      unitNum: '单元编号',
+      unit: '单元',
+      roomNum: '房屋编号',
+      floor: '楼层',
+      floorUnit: '层',
+      selectOwner: '选择业主',
+      inputRoomFullNum: '输入房屋编号(楼栋-单元-房屋)',
+      inputOwnerName: '输入业主名称',
+      ownerId: '业主编号',
+      name: '名称',
+      personType: '人员类型',
+      personRole: '人员角色',
+      idCard: '证件号',
+      contact: '联系方式',
+      submitSuccess: '提交成功',
+      invalidFileType: '操作失败，请上传图片、PDF格式的文件',
+      required: '必填'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="add-contract-container">
+    <el-card class="box-card">
+      <div slot="header" class="flex justify-between">
+        <span>{{ addContractInfo.parentContractCode ? $t('contract.renewContract') : $t('contract.draftContract')
+        }}</span>
+        <el-button style="float: right; padding: 3px 0" type="text" @click="_goBack">
+          <i class="el-icon-close"></i>{{ $t('common.back') }}
+        </el-button>
+      </div>
+
+      <el-form ref="form" :model="addContractInfo" label-width="120px">
+        <!-- Parent Contract Info -->
+        <el-row v-if="addContractInfo.parentContractCode" :gutter="20">
+          <el-col :span="8">
+            <el-form-item :label="$t('contract.parentContractName')">
+              <el-input v-model="addContractInfo.parentContractName" disabled></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('contract.parentContractCode')">
+              <el-input v-model="addContractInfo.parentContractCode" disabled></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('contract.parentContractStatus')">
+              <el-input v-model="addContractInfo.parentStateName" disabled></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- Basic Contract Info -->
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item :label="$t('contract.contractName')" prop="contractName" required>
+              <el-input v-model="addContractInfo.contractName"
+                :placeholder="$t('contract.requiredContractName')"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('contract.contractCode')" prop="contractCode" required>
+              <el-input v-model="addContractInfo.contractCode"
+                :placeholder="$t('contract.requiredContractCode')"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('contract.contractType')" prop="contractType" required>
+              <el-select v-model="addContractInfo.contractType" :placeholder="$t('contract.requiredContractType')"
+                style="width:100%" @change="_changeContractType">
+                <el-option v-for="item in addContractInfo.contractTypes" :key="item.contractTypeId" :label="item.typeName"
+                  :value="item.contractTypeId">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- Party A Info -->
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item :label="$t('contract.partyA')" prop="partyA" required>
+              <el-select v-model="addContractInfo.partyA" :placeholder="$t('contract.requiredPartyA')" style="width:100%"
+                @change="_changeContractPartyA">
+                <el-option v-for="item in addContractInfo.contractPartyAs" :key="item.partyA" :label="item.partyA"
+                  :value="item.partyA">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('contract.partyAContact')" prop="aContacts" required>
+              <el-input v-model="addContractInfo.aContacts" disabled></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('contract.partyAPhone')" prop="aLink" required>
+              <el-input v-model="addContractInfo.aLink" disabled></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- Party B Info -->
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item :label="$t('contract.partyB')" prop="partyB" required>
+              <el-input v-model="addContractInfo.partyB" disabled style="width:70%"></el-input>
+              <el-button type="primary" size="small" @click="_searchOwner">{{ $t('contract.select') }}</el-button>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('contract.partyBContact')" prop="bContacts" required>
+              <el-input v-model="addContractInfo.bContacts" disabled></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('contract.partyBPhone')" prop="bLink" required>
+              <el-input v-model="addContractInfo.bLink" disabled></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- Operator Info -->
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item :label="$t('contract.operator')" prop="operator" required>
+              <el-input v-model="addContractInfo.operator"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('contract.operatorPhone')" prop="operatorLink" required>
+              <el-input v-model="addContractInfo.operatorLink"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('contract.contractAmount')">
+              <el-input v-model="addContractInfo.amount"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- Time Info -->
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item :label="$t('contract.startTime')" prop="startTime" required>
+              <el-date-picker v-model="addContractInfo.startTime" type="date" value-format="yyyy-MM-dd" style="width:100%"
+                :placeholder="$t('contract.requiredStartTime')">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('contract.endTime')" prop="endTime" required>
+              <el-date-picker v-model="addContractInfo.endTime" type="date" value-format="yyyy-MM-dd" style="width:100%"
+                :placeholder="$t('contract.requiredEndTime')">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('contract.signingTime')" prop="signingTime" required>
+              <el-date-picker v-model="addContractInfo.signingTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" style="width:100%"
+                :placeholder="$t('contract.requiredSigningTime')">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- Contract Specs -->
+        <div v-for="(item, index) in addContractInfo.contractTypeSpecs" :key="index">
+          <el-row :gutter="20" v-if="index % 3 == 0">
+            <el-col :span="8" v-for="i in 3" :key="i">
+              <el-form-item :label="addContractInfo.contractTypeSpecs[index + i - 1].specName"
+                v-if="index + i - 1 < addContractInfo.contractTypeSpecs.length">
+                <el-input v-model="addContractInfo.contractTypeSpecs[index + i - 1].value"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </div>
+
+        <!-- Contract Attachments -->
+        <el-form-item :label="$t('contract.contractAttachments')">
+          <el-button type="primary" @click="addFileStep">
+            <i class="el-icon-plus"></i>{{ $t('contract.addAttachment') }}
+          </el-button>
+          <div v-for="(item, index) in addContractInfo.contractFilePo" :key="index" style="margin-top:10px">
+            <el-row>
+              <el-col :span="2">
+                <span>{{ $t('contract.attachment') }}{{ index + 1 }}</span>
+              </el-col>
+              <el-col :span="10">
+                <input type="file" @change="getFile($event, index)" accept=".png,.pdf,.jpg">
+              </el-col>
+              <el-col :span="10">
+                <span>{{ item.fileRealName }}</span>
+              </el-col>
+              <el-col :span="2">
+                <el-button type="text" @click="deleteStep(item)">{{ $t('contract.deleteAttachment') }}</el-button>
+              </el-col>
+            </el-row>
+          </div>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- Related Rooms -->
+    <el-card class="box-card" style="margin-top:20px">
+      <div slot="header" class="clearfix">
+        <span>{{ $t('contract.relatedRooms') }}</span>
+        <el-button style="float: right; padding: 3px 0" type="text" @click="_selectRoom">
+          <i class="el-icon-plus"></i>{{ $t('contract.add') }}
+        </el-button>
+      </div>
+
+      <el-table :data="addContractInfo.rooms" border style="width:100%">
+        <el-table-column prop="floorNum" :label="$t('contract.room')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.floorNum }}-{{ scope.row.unitNum }}-{{ scope.row.roomNum }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="ownerName" :label="$t('contract.owner')" align="center"></el-table-column>
+        <el-table-column prop="link" :label="$t('contract.phone')" align="center"></el-table-column>
+        <el-table-column prop="builtUpArea" :label="$t('contract.builtUpArea')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.builtUpArea }}{{ $t('contract.squareMeter') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="stateName" :label="$t('contract.roomStatus')" align="center"></el-table-column>
+        <el-table-column :label="$t('common.operation')" align="center" width="120">
+          <template slot-scope="scope">
+            <el-button size="mini" type="danger" @click="_openDelRoomModel(scope.row)">{{ $t('common.delete')
+            }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <!-- Approvers -->
+    <div v-show="addContractInfo.audit == '1001'">
+      <purchase-approvers ref="purchaseApprovers" :flow-type="50005" @notify3="handleNotify"></purchase-approvers>
+    </div>
+
+    <!-- Buttons -->
+    <div class="text-right" style="margin-top:20px">
+      <el-button @click="_goBack" style="margin-right:20px">{{ $t('common.back') }}</el-button>
+      <el-button type="primary" @click="saveContractInfo">{{ $t('common.submit') }}</el-button>
+    </div>
+
+    <!-- Modals -->
+    <search-room ref="searchRoom" @chooseRoom="handleChooseRoom"></search-room>
+    <search-owner ref="searchOwner" @chooseOwner="handleChooseOwner"></search-owner>
+  </div>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { saveContract, queryContractType, queryContractPartya, queryContractTypeSpec, queryContractRoom } from '@/api/contract/addContractApi'
+import PurchaseApprovers from '@/components/contract/purchaseApprovers'
+import SearchRoom from '@/components/room/searchRoom'
+import SearchOwner from '@/components/owner/SearchOwner'
+
+export default {
+  name: 'AddContractList',
+  components: {
+    PurchaseApprovers,
+    SearchRoom,
+    SearchOwner
+  },
+  data() {
+    return {
+      addContractInfo: {
+        contractId: '',
+        contractName: '',
+        contractCode: '',
+        contractType: '',
+        partyA: '',
+        partyB: '',
+        aContacts: '',
+        bContacts: '',
+        aLink: '',
+        bLink: '',
+        operator: '',
+        operatorLink: '',
+        amount: '',
+        startTime: '',
+        endTime: '',
+        signingTime: '',
+        contractTypes: [],
+        contractTypeSpecs: [],
+        objType: '1111',
+        objId: '-1',
+        contractParentId: '',
+        parentContractCode: '',
+        parentContractName: '',
+        parentStateName: '',
+        rooms: [],
+        contractFilePo: [],
+        tempfile: '',
+        contractPartyAs: [],
+        audit: '',
+        staffName: '',
+        nextUserId: ''
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this._loadAddContractType()
+    this._loadAddContractParkA()
+    if (this.$route.query.contractId) {
+      this.addContractInfo.contractParentId = this.$route.query.contractId
+      this.addContractInfo.parentContractCode = this.$route.query.contractCode
+      this.addContractInfo.parentContractName = this.$route.query.contractName
+      this.addContractInfo.parentStateName = this.$route.query.stateName
+      this._queryRoom()
+      this._listContracts()
+    }
+  },
+  methods: {
+    _loadAddContractType() {
+      queryContractType({ page: 1, row: 100 }).then(response => {
+        this.addContractInfo.contractTypes = response.data
+      })
+    },
+    _loadAddContractParkA() {
+      queryContractPartya({ page: 1, row: 100 }).then(response => {
+        this.addContractInfo.contractPartyAs = response.data
+      })
+    },
+    _changeContractType() {
+      this.addContractInfo.contractTypes.forEach(item => {
+        if (this.addContractInfo.contractType == item.contractTypeId) {
+          this.addContractInfo.audit = item.audit
+        }
+      })
+
+      this.addContractInfo.contractTypeSpecs = []
+      queryContractTypeSpec({
+        page: 1,
+        row: 100,
+        contractTypeId: this.addContractInfo.contractType
+      }).then(response => {
+        response.data.forEach(item => {
+          item.value = ''
+          if (item.specShow == 'Y') {
+            item.values = []
+            this.addContractInfo.contractTypeSpecs.push(item)
+          }
+        })
+      })
+    },
+    _queryRoom() {
+      queryContractRoom({
+        contractId: this.$route.query.contractId,
+        page: 1,
+        row: 100
+      }).then(response => {
+        this.addContractInfo.rooms = response.data
+      })
+    },
+    _selectRoom() {
+      this.$refs.searchRoom.open()
+    },
+    _searchOwner() {
+      this.$refs.searchOwner.open()
+    },
+    handleChooseRoom(room) {
+      this.addContractInfo.rooms.push(room)
+    },
+    handleChooseOwner(owner) {
+      this.addContractInfo.partyB = owner.name
+      this.addContractInfo.bContacts = owner.name
+      this.addContractInfo.bLink = owner.link
+      this.addContractInfo.objId = owner.ownerId
+    },
+    handleNotify(info) {
+      this.addContractInfo.nextUserId = info.staffId
+      this.addContractInfo.staffName = info.staffName
+    },
+    _openDelRoomModel(room) {
+      this.addContractInfo.rooms = this.addContractInfo.rooms.filter(item => item.roomId != room.roomId)
+    },
+    addFileStep() {
+      this.addContractInfo.contractFilePo.push({
+        seq: this.addContractInfo.contractFilePo.length,
+        fileSaveName: '',
+        fileRealName: ''
+      })
+    },
+    deleteStep(step) {
+      this.addContractInfo.contractFilePo = this.addContractInfo.contractFilePo.filter(item => item.seq != step.seq)
+    },
+    getFile(e, index) {
+      this.addContractInfo.tempfile = e.target.files[0]
+      this.addContractInfo.contractFilePo[index].fileRealName = this.addContractInfo.tempfile.name
+      this._importData(index)
+    },
+    _importData(index) {
+      console.log(index)
+      const _fileName = this.addContractInfo.tempfile.name
+      const _suffix = _fileName.substring(_fileName.lastIndexOf('.') + 1)
+      if (!this.checkFileType(_suffix.toLowerCase())) {
+        this.$message.error(this.$t('contract.invalidFileType'))
+        return
+      }
+
+      const formData = new FormData()
+      formData.append("uploadFile", this.addContractInfo.tempfile)
+
+      // 这里需要实现文件上传逻辑
+      // uploadContactFile(formData).then(response => {
+      //   this.addContractInfo.contractFilePo[index].fileSaveName = response.data
+      //   this.$message.success(this.$t('contract.uploadSuccess'))
+      // })
+    },
+    checkFileType(fileType) {
+      return ['png', 'pdf', 'jpg'].includes(fileType)
+    },
+    _changeContractPartyA() {
+      const partyA = this.addContractInfo.partyA
+      this.addContractInfo.contractPartyAs.forEach(item => {
+        if (partyA == item.partyA) {
+          this.addContractInfo.aLink = item.aLink
+          this.addContractInfo.aContacts = item.aContacts
+        }
+      })
+    },
+    _listContracts() {
+      // 需要实现查询合同详情逻辑
+    },
+    saveContractInfo() {
+      if (!this.validateForm()) {
+        return
+      }
+
+      this.addContractInfo.communityId = this.communityId
+      saveContract(this.addContractInfo).then(response => {
+        if (response.code === 0) {
+          this.$message.success(this.$t('contract.submitSuccess'))
+          this._goBack()
+        } else {
+          this.$message.error(response.msg)
+        }
+      })
+    },
+    validateForm() {
+      // 实现表单验证逻辑
+      return true
+    },
+    _goBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.add-contract-container {
+  padding: 20px;
+}
+
+.box-card {
+  margin-bottom: 20px;
+}
+
+.text-right {
+  text-align: right;
+}
+</style>
 \ No newline at end of file
+export const messages = {
+  en: {
+    contractChangeDetail: {
+      contractInfo: 'Contract Information',
+      selectContract: 'Select Contract',
+      contractName: 'Contract Name',
+      contractCode: 'Contract Code',
+      contractType: 'Contract Type',
+      partyA: 'Party A',
+      partyB: 'Party B',
+      aContacts: 'Party A Contact',
+      bContacts: 'Party B Contact',
+      aLink: 'Party A Phone',
+      bLink: 'Party B Phone',
+      operator: 'Operator',
+      operatorLink: 'Operator Phone',
+      amount: 'Amount',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      signingTime: 'Signing Time',
+      changeRemark: 'Change Remark',
+      changeRemarkPlaceholder: 'Required, please fill in the change remark',
+      changeRemarkRequired: 'Change remark is required'
+    },
+    contractChangeMainBody: {
+      title: 'Main Body Change',
+      contractName: 'Contract Name',
+      contractNamePlaceholder: 'Required, please fill in contract name',
+      partyA: 'Party A',
+      partyAPlaceholder: 'Required, please fill in Party A',
+      aContacts: 'Party A Contact',
+      aContactsPlaceholder: 'Required, please fill in Party A contact',
+      aLink: 'Party A Phone',
+      aLinkPlaceholder: 'Required, please fill in Party A phone',
+      partyB: 'Party B',
+      partyBPlaceholder: 'Required, please fill in Party B',
+      bContacts: 'Party B Contact',
+      bContactsPlaceholder: 'Required, please fill in Party B contact',
+      bLink: 'Party B Phone',
+      bLinkPlaceholder: 'Required, please fill in Party B phone'
+    },
+    contractChangeLease: {
+      title: 'Lease Adjustment',
+      startTime: 'Start Time',
+      startTimePlaceholder: 'Required, please select start time',
+      endTime: 'End Time',
+      endTimePlaceholder: 'Required, please select end time'
+    },
+    contractChangeAssets: {
+      title: 'Related Rooms',
+      room: 'Room',
+      owner: 'Owner',
+      phone: 'Phone',
+      area: 'Area',
+      status: 'Status',
+      squareMeters: 'Square Meters',
+      confirmDelete: 'Are you sure to delete this room?'
+    },
+    searchRoom: {
+      title: 'Select Room',
+      buildingNo: 'Building No',
+      buildingNoPlaceholder: 'Input building number',
+      roomNo: 'Room No',
+      roomNoPlaceholder: 'Input room number',
+      roomId: 'Room ID',
+      building: 'Building',
+      unit: 'Unit',
+      room: 'Room',
+      floorUnit: 'Floor'
+    },
+    purchaseApprovers: {
+      title: 'Approver Information',
+      orgName: 'Organization',
+      staffName: 'Staff',
+      orgPlaceholder: 'Required, please fill in organization',
+      staffPlaceholder: 'Required, please select staff',
+      staffRequired: 'Staff is required',
+      staffNameRequired: 'Staff name is required'
+    },
+    selectStaff: {
+      title: 'Select Staff',
+      orgInfo: 'Organization Information',
+      staffInfo: 'Staff Information',
+      submitter: 'Submitter',
+      dynamicAssign: 'Dynamic Assignment'
+    },
+    chooseContract: {
+      title: 'Select Contract',
+      searchPlaceholder: 'Input contract name',
+      contractName: 'Contract Name',
+      contractCode: 'Contract Code',
+      contractType: 'Contract Type',
+      partyA: 'Party A',
+      partyB: 'Party B',
+      signingTime: 'Signing Time'
+    }
+  },
+  zh: {
+    contractChangeDetail: {
+      contractInfo: '合同信息',
+      selectContract: '选择合同',
+      contractName: '合同名称',
+      contractCode: '合同编号',
+      contractType: '合同类型',
+      partyA: '甲方',
+      partyB: '乙方',
+      aContacts: '甲方联系人',
+      bContacts: '乙方联系人',
+      aLink: '甲方联系电话',
+      bLink: '乙方联系电话',
+      operator: '经办人',
+      operatorLink: '联系电话',
+      amount: '合同金额',
+      startTime: '开始时间',
+      endTime: '结束时间',
+      signingTime: '签订时间',
+      changeRemark: '变更说明',
+      changeRemarkPlaceholder: '必填，请填写变更说明',
+      changeRemarkRequired: '变更说明不能为空'
+    },
+    contractChangeMainBody: {
+      title: '主体变更',
+      contractName: '合同名称',
+      contractNamePlaceholder: '必填，请填写合同名称',
+      partyA: '甲方',
+      partyAPlaceholder: '必填，请填写甲方',
+      aContacts: '甲方联系人',
+      aContactsPlaceholder: '必填，请填写甲方联系人',
+      aLink: '甲方联系电话',
+      aLinkPlaceholder: '必填，请填写甲方联系电话',
+      partyB: '乙方',
+      partyBPlaceholder: '必填，请填写乙方',
+      bContacts: '乙方联系人',
+      bContactsPlaceholder: '必填，请填写乙方联系人',
+      bLink: '乙方联系电话',
+      bLinkPlaceholder: '必填，请填写乙方联系电话'
+    },
+    contractChangeLease: {
+      title: '租期调整',
+      startTime: '开始时间',
+      startTimePlaceholder: '必填，请选择开始时间',
+      endTime: '结束时间',
+      endTimePlaceholder: '必填，请选择结束时间'
+    },
+    contractChangeAssets: {
+      title: '关联房屋',
+      room: '房屋',
+      owner: '业主',
+      phone: '电话',
+      area: '建筑面积',
+      status: '房屋状态',
+      squareMeters: '平方米',
+      confirmDelete: '确定删除该房屋吗？'
+    },
+    searchRoom: {
+      title: '选择房屋',
+      buildingNo: '楼栋编号',
+      buildingNoPlaceholder: '输入楼栋编号',
+      roomNo: '房屋编号',
+      roomNoPlaceholder: '输入房屋编号',
+      roomId: '房屋ID',
+      building: '号楼',
+      unit: '单元',
+      room: '室',
+      floorUnit: '层'
+    },
+    purchaseApprovers: {
+      title: '审批人信息',
+      orgName: '所属组织',
+      staffName: '员工',
+      orgPlaceholder: '必填，请填写所属组织',
+      staffPlaceholder: '必填，请选择员工',
+      staffRequired: '员工不能为空',
+      staffNameRequired: '员工名称不能为空'
+    },
+    selectStaff: {
+      title: '选择员工',
+      orgInfo: '组织信息',
+      staffInfo: '员工信息',
+      submitter: '提交者',
+      dynamicAssign: '动态指定'
+    },
+    chooseContract: {
+      title: '选择合同信息',
+      searchPlaceholder: '输入合同信息名称',
+      contractName: '合同名称',
+      contractCode: '合同编号',
+      contractType: '合同类型',
+      partyA: '甲方',
+      partyB: '乙方',
+      signingTime: '签订时间'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="contract-change-detail-container">
+    <el-card class="box-card">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('contractChangeDetail.contractInfo') }}</span>
+        <div class="card-header-actions">
+          <el-button type="primary" size="small" @click="openSelectContractInfoModel">
+            <i class="el-icon-search"></i>
+            {{ $t('contractChangeDetail.selectContract') }}
+          </el-button>
+          <el-button type="primary" size="small" @click="goBack">
+            <i class="el-icon-close"></i>
+            {{ $t('common.back') }}
+          </el-button>
+        </div>
+      </div>
+      <el-form>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item :label="$t('contractChangeDetail.contractName')">
+              <span>{{ contractChangeDetailInfo.contractName }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('contractChangeDetail.contractCode')">
+              <span>{{ contractChangeDetailInfo.contractCode }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('contractChangeDetail.contractType')">
+              <span>{{ contractChangeDetailInfo.contractTypeName }}</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item :label="$t('contractChangeDetail.partyA')">
+              <span>{{ contractChangeDetailInfo.partyA }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('contractChangeDetail.aContacts')">
+              <span>{{ contractChangeDetailInfo.aContacts }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('contractChangeDetail.aLink')">
+              <span>{{ contractChangeDetailInfo.aLink }}</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item :label="$t('contractChangeDetail.partyB')">
+              <span>{{ contractChangeDetailInfo.partyB }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('contractChangeDetail.bContacts')">
+              <span>{{ contractChangeDetailInfo.bContacts }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('contractChangeDetail.bLink')">
+              <span>{{ contractChangeDetailInfo.bLink }}</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item :label="$t('contractChangeDetail.operator')">
+              <span>{{ contractChangeDetailInfo.operator }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('contractChangeDetail.operatorLink')">
+              <span>{{ contractChangeDetailInfo.operatorLink }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('contractChangeDetail.amount')">
+              <span>{{ contractChangeDetailInfo.amount }}</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item :label="$t('contractChangeDetail.startTime')">
+              <span>{{ contractChangeDetailInfo.startTime }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('contractChangeDetail.endTime')">
+              <span>{{ contractChangeDetailInfo.endTime }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="$t('contractChangeDetail.signingTime')">
+              <span>{{ contractChangeDetailInfo.signingTime }}</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+
+    <!-- 主体变更 -->
+    <contract-change-main-body v-if="contractChangeDetailInfo.param === 'contractChangeMainBody'"
+      ref="contractChangeMainBody" @changeMainBody="handlerMainBody" />
+
+    <!-- 租期调整 -->
+    <contract-change-lease v-show="contractChangeDetailInfo.param === 'contractChangeLease'" ref="contractChangeLease"
+    @changeNotify="handlerMainBody" />
+
+    <!-- 资产调整 -->
+    <contract-change-assets v-show="contractChangeDetailInfo.param === 'contractChangeAssets'" ref="contractChangeAssets"
+    @changeNotify="handlerMainBody" />
+
+    <el-card class="box-card">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('contractChangeDetail.changeRemark') }}</span>
+      </div>
+      <el-form>
+        <el-form-item :label="$t('contractChangeDetail.changeRemark')">
+          <el-input v-model="newContract.changeRemark" type="textarea" :rows="5"
+            :placeholder="$t('contractChangeDetail.changeRemarkPlaceholder')"></el-input>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <purchase-approvers v-if="contractChangeDetailInfo.audit === '1001'" ref="purchaseApprovers"
+      :call-back-listener="contractChangeDetail" :call-back-function="notify3" flow-type="60006" />
+
+    <el-row>
+      <el-col :span="22">
+        <div class="submit-btn-wrapper">
+          <el-button type="primary" @click="submitChangeContract">
+            {{ $t('common.submit') }}
+          </el-button>
+        </div>
+      </el-col>
+    </el-row>
+
+    <choose-contract ref="chooseContract" :emitChooseContract="contractChangeDetailInfo"
+      @chooseContract="chooseContract" />
+  </div>
+</template>
+
+<script>
+import { saveContractChangePlan } from '@/api/contract/contractChangeDetailApi'
+import ContractChangeMainBody from '@/components/contract/ContractChangeMainBody'
+import ContractChangeLease from '@/components/contract/ContractChangeLease'
+import ContractChangeAssets from '@/components/contract/ContractChangeAssets'
+import PurchaseApprovers from '@/components/contract/purchaseApprovers'
+import ChooseContract from '@/components/contract/ChooseContract'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'ContractChangeDetailList',
+  components: {
+    ContractChangeMainBody,
+    ContractChangeLease,
+    ContractChangeAssets,
+    PurchaseApprovers,
+    ChooseContract
+  },
+  data() {
+    return {
+      contractChangeDetailInfo: {
+        contractId: '',
+        contractName: '',
+        contractCode: '',
+        contractType: '',
+        contractTypeName: '',
+        partyA: '',
+        partyB: '',
+        aContacts: '',
+        bContacts: '',
+        aLink: '',
+        bLink: '',
+        operator: '',
+        operatorLink: '',
+        amount: '',
+        startTime: '',
+        endTime: '',
+        signingTime: '',
+        param: '',
+        planType: '',
+        rooms: [],
+        audit: '',
+        staffName: '',
+        nextUserId: ''
+      },
+      newContract: {
+        changeRemark: ''
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    const param = this.$route.query.param
+    this.contractChangeDetailInfo.param = param
+  },
+  methods: {
+    openSelectContractInfoModel() {
+      this.$refs.chooseContract.open()
+    },
+    submitChangeContract() {
+      if (!this.validateForm()) {
+        return
+      }
+
+      this.newContract.nextUserId = this.contractChangeDetailInfo.nextUserId
+      this.newContract.staffName = this.contractChangeDetailInfo.staffName
+
+      saveContractChangePlan(this.newContract)
+        .then(response => {
+          if (response.code === 0) {
+            this.$message.success(this.$t('common.submitSuccess'))
+            this.goBack()
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+        .catch(error => {
+          console.error('Error submitting contract change:', error)
+          this.$message.error(this.$t('common.submitFailed'))
+        })
+    },
+    validateForm() {
+      // 这里添加表单验证逻辑
+      if (!this.newContract.changeRemark) {
+        this.$message.error(this.$t('contractChangeDetail.changeRemarkRequired'))
+        return false
+      }
+      return true
+    },
+    goBack() {
+      this.$router.go(-1)
+    },
+    handlerMainBody(item) {
+      const changeRemark = this.newContract.changeRemark
+      this.newContract = JSON.parse(JSON.stringify(this.contractChangeDetailInfo))
+      this.newContract.changeRemark = changeRemark
+      if (item['rooms']) {
+        this.newContract.rooms = item.rooms
+      }
+      Object.assign(this.newContract, item)
+    },
+    notify3(info) {
+      this.contractChangeDetailInfo.nextUserId = info.staffId
+      this.contractChangeDetailInfo.staffName = info.staffName
+    },
+    chooseContract(contract) {
+      this.contractChangeDetailInfo.contractId = contract.contractId
+      this.contractChangeDetailInfo.contractName = contract.contractName
+      this.contractChangeDetailInfo.contractCode = contract.contractCode
+      this.contractChangeDetailInfo.contractType = contract.contractType
+      this.contractChangeDetailInfo.contractTypeName = contract.contractTypeName
+      this.contractChangeDetailInfo.partyA = contract.partyA
+      this.contractChangeDetailInfo.partyB = contract.partyB
+      this.contractChangeDetailInfo.aContacts = contract.aContacts
+      this.contractChangeDetailInfo.bContacts = contract.bContacts
+      this.contractChangeDetailInfo.aLink = contract.aLink
+      this.contractChangeDetailInfo.bLink = contract.bLink
+      this.contractChangeDetailInfo.operator = contract.operator
+      this.contractChangeDetailInfo.operatorLink = contract.operatorLink
+      this.contractChangeDetailInfo.amount = contract.amount
+      this.contractChangeDetailInfo.startTime = contract.startTime
+      this.contractChangeDetailInfo.endTime = contract.endTime
+      this.contractChangeDetailInfo.signingTime = contract.signingTime
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.contract-change-detail-container {
+  padding: 20px;
+
+  .box-card {
+    margin-bottom: 20px;
+  }
+
+  .card-header-actions {
+    float: right;
+  }
+
+  .submit-btn-wrapper {
+    text-align: right;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+
+  .el-form-item {
+    margin-bottom: 0;
+  }
+}
+</style>
 \ No newline at end of file
+export const messages = {
+  en: {
+    contractChangeManage: {
+      search: {
+        title: 'Search Conditions',
+        contractName: 'Please enter contract name',
+        contractCode: 'Please enter contract code',
+        contractType: 'Please select contract type'
+      },
+      list: {
+        title: 'Contract Change Information',
+        mainBodyChange: 'Main Body Change',
+        leaseAdjustment: 'Lease Adjustment',
+        assetsChange: 'Assets Change'
+      },
+      table: {
+        contractName: 'Contract Name',
+        contractCode: 'Contract Code',
+        contractType: 'Contract Type',
+        partyA: 'Party A',
+        partyB: 'Party B',
+        changeType: 'Change Type',
+        changePerson: 'Change Person',
+        applyTime: 'Apply Time',
+        remark: 'Remark',
+        state: 'State'
+      },
+      note: 'Note: Please set up the contract change process in System Management > Process Management before using this function',
+      fetchError: 'Failed to get contract change list'
+    },
+    deleteContractChangePlan: {
+      title: 'Confirm Operation',
+      confirmText: 'Are you sure to delete the contract change information?',
+      deleteSuccess: 'Delete successfully',
+      deleteError: 'Failed to delete contract change'
+    }
+  },
+  zh: {
+    contractChangeManage: {
+      search: {
+        title: '查询条件',
+        contractName: '请输入合同名称',
+        contractCode: '请输入合同编号',
+        contractType: '请选择合同类型'
+      },
+      list: {
+        title: '合同变更信息',
+        mainBodyChange: '主体变更',
+        leaseAdjustment: '租期调整',
+        assetsChange: '资产变更'
+      },
+      table: {
+        contractName: '合同名称',
+        contractCode: '合同编号',
+        contractType: '合同类型',
+        partyA: '甲方',
+        partyB: '乙方',
+        changeType: '变更类型',
+        changePerson: '变更人',
+        applyTime: '申请时间',
+        remark: '说明',
+        state: '状态'
+      },
+      note: '注意：此功能使用前请先到系统管理>流程管理中设置合同变更流程',
+      fetchError: '获取合同变更列表失败'
+    },
+    deleteContractChangePlan: {
+      title: '请确认您的操作',
+      confirmText: '确定删除合同变更信息？',
+      deleteSuccess: '删除成功',
+      deleteError: '删除合同变更失败'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="contract-change-manage-container">
+    <!-- 查询条件 -->
+    <el-card class="search-wrapper">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('contractChangeManage.search.title') }}</span>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-input v-model="searchForm.contractName" :placeholder="$t('contractChangeManage.search.contractName')"
+            clearable @keyup.enter.native="handleSearch" />
+        </el-col>
+        <el-col :span="6">
+          <el-input v-model="searchForm.contractCode" :placeholder="$t('contractChangeManage.search.contractCode')"
+            clearable @keyup.enter.native="handleSearch" />
+        </el-col>
+        <el-col :span="6">
+          <el-select v-model="searchForm.contractType" :placeholder="$t('contractChangeManage.search.contractType')"
+            style="width:100%" clearable>
+            <el-option v-for="item in contractTypes" :key="item.contractTypeId" :label="item.typeName"
+              :value="item.contractTypeId" />
+          </el-select>
+        </el-col>
+        <el-col :span="6">
+          <el-button type="primary" @click="handleSearch">
+            {{ $t('common.search') }}
+          </el-button>
+          <el-button @click="handleReset">
+            {{ $t('common.reset') }}
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <!-- 合同变更信息 -->
+    <el-card class="list-wrapper">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('contractChangeManage.list.title') }}</span>
+        <div style="float: right;">
+          <el-button type="primary" size="small" @click="handleToChangePage('contractChangeMainBody')">
+            <i class="el-icon-plus"></i>
+            {{ $t('contractChangeManage.list.mainBodyChange') }}
+          </el-button>
+          <el-button type="primary" size="small" @click="handleToChangePage('contractChangeLease')">
+            <i class="el-icon-plus"></i>
+            {{ $t('contractChangeManage.list.leaseAdjustment') }}
+          </el-button>
+          <el-button type="primary" size="small" @click="handleToChangePage('contractChangeAssets')">
+            <i class="el-icon-plus"></i>
+            {{ $t('contractChangeManage.list.assetsChange') }}
+          </el-button>
+        </div>
+      </div>
+
+      <el-table v-loading="loading" :data="tableData" border style="width: 100%">
+        <el-table-column prop="contractName" :label="$t('contractChangeManage.table.contractName')" align="center" />
+        <el-table-column prop="contractCode" :label="$t('contractChangeManage.table.contractCode')" align="center" />
+        <el-table-column prop="contractTypeName" :label="$t('contractChangeManage.table.contractType')" align="center" />
+        <el-table-column prop="partyA" :label="$t('contractChangeManage.table.partyA')" align="center" />
+        <el-table-column prop="partyB" :label="$t('contractChangeManage.table.partyB')" align="center" />
+        <el-table-column prop="planTypeName" :label="$t('contractChangeManage.table.changeType')" align="center" />
+        <el-table-column prop="changePersonName" :label="$t('contractChangeManage.table.changePerson')" align="center" />
+        <el-table-column prop="createTime" :label="$t('contractChangeManage.table.applyTime')" align="center" />
+        <el-table-column prop="remark" :label="$t('contractChangeManage.table.remark')" align="center" />
+        <el-table-column prop="stateName" :label="$t('contractChangeManage.table.state')" align="center" />
+        <el-table-column :label="$t('common.operation')" align="center" width="180">
+          <template slot-scope="scope">
+            <el-button v-if="scope.row.state === '11'" type="text" size="small"
+              @click="handleOpenDeleteDialog(scope.row)">
+              {{ $t('common.cancel') }}
+            </el-button>
+            <el-button type="text" size="small" @click="handleToDetails(scope.row)">
+              {{ $t('common.detail') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination :current-page="page.current" :page-sizes="[10, 20, 30, 50]" :page-size="page.size"
+        :total="page.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" />
+
+      <div class="note">
+        {{ $t('contractChangeManage.note') }}
+      </div>
+    </el-card>
+
+    <!-- 删除确认对话框 -->
+    <delete-contract-change-plan ref="deleteDialog" @success="handleSuccess" />
+  </div>
+</template>
+
+<script>
+import { queryContractChangePlan, queryContractType } from '@/api/contract/contractChangeManageApi'
+import DeleteContractChangePlan from '@/components/contract/deleteContractChangePlan'
+
+export default {
+  name: 'ContractChangeManageList',
+  components: {
+    DeleteContractChangePlan
+  },
+  data() {
+    return {
+      loading: false,
+      searchForm: {
+        contractName: '',
+        contractCode: '',
+        contractType: ''
+      },
+      tableData: [],
+      contractTypes: [],
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.getList()
+    this.getContractTypes()
+  },
+  methods: {
+    async getList() {
+      try {
+        this.loading = true
+        const params = {
+          page: this.page.current,
+          row: this.page.size,
+          ...this.searchForm
+        }
+        const { data, total } = await queryContractChangePlan(params)
+        this.tableData = data
+        this.page.total = total
+      } catch (error) {
+        this.$message.error(this.$t('contractChangeManage.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    async getContractTypes() {
+      try {
+        const params = {
+          page: 1,
+          row: 50
+        }
+        const { data } = await queryContractType(params)
+        this.contractTypes = data
+      } catch (error) {
+        console.error('获取合同类型失败:', error)
+      }
+    },
+    handleSearch() {
+      this.page.current = 1
+      this.getList()
+    },
+    handleReset() {
+      this.searchForm = {
+        contractName: '',
+        contractCode: '',
+        contractType: ''
+      }
+      this.handleSearch()
+    },
+    handleToChangePage(type) {
+      this.$router.push(`/views/contract/contractChangeDetail?param=${type}`)
+    },
+    handleToDetails(row) {
+      this.$router.push(`/views/contract/contractChangeDetail?planId=${row.planId}`)
+    },
+    handleOpenDeleteDialog(row) {
+      this.$refs.deleteDialog.open(row)
+    },
+    handleSuccess() {
+      this.getList()
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.contract-change-manage-container {
+  padding: 20px;
+
+  .search-wrapper {
+    margin-bottom: 20px;
+  }
+
+  .list-wrapper {
+    margin-bottom: 20px;
+
+    .note {
+      margin-top: 20px;
+      color: #909399;
+      font-size: 14px;
+    }
+  }
+
+  .el-pagination {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+</style>
 \ No newline at end of file
+export const messages = {
+  en: {
+    contractManage: {
+      search: {
+        title: 'Search Conditions',
+        hide: 'Hide',
+        more: 'More',
+        search: 'Search',
+        reset: 'Reset'
+      },
+      list: {
+        title: 'Contract Information'
+      },
+      contractNamePlaceholder: 'Please enter contract name',
+      contractCodePlaceholder: 'Please enter contract number',
+      contractTypePlaceholder: 'Please select contract type',
+      partyBPlaceholder: 'Please enter party B',
+      startTimePlaceholder: 'Please enter start time',
+      endTimePlaceholder: 'Please enter end time',
+      parentContractCodePlaceholder: 'Please enter parent contract number',
+      fetchError: 'Failed to fetch contract data',
+      table: {
+        contractName: 'Contract Name',
+        contractCode: 'Contract Number',
+        parentContractCode: 'Parent Contract Number',
+        contractType: 'Contract Type',
+        operator: 'Operator',
+        amount: 'Contract Amount',
+        partyB: 'Party B',
+        validityPeriod: 'Validity Period',
+        createTime: 'Creation Time',
+        status: 'Status',
+        operation: 'Operation'
+      },
+      operation: {
+        fee: 'Fee',
+        view: 'View',
+        print: 'Print',
+        delete: 'Delete'
+      },
+      edit: {
+        title: 'Edit Contract',
+        contractName: 'Contract Name',
+        contractNamePlaceholder: 'Required, please enter contract name',
+        contractCode: 'Contract Number',
+        contractCodePlaceholder: 'Required, please enter contract number',
+        contractType: 'Contract Type',
+        contractTypePlaceholder: 'Required, please select contract type',
+        partyA: 'Party A',
+        partyAPlaceholder: 'Required, please enter party A',
+        aContacts: 'Party A Contact',
+        aContactsPlaceholder: 'Required, please enter party A contact',
+        aLink: 'Party A Contact Phone',
+        aLinkPlaceholder: 'Required, please enter party A contact phone',
+        partyB: 'Party B',
+        partyBPlaceholder: 'Required, please enter party B',
+        bContacts: 'Party B Contact',
+        bContactsPlaceholder: 'Required, please enter party B contact',
+        bLink: 'Party B Contact Phone',
+        bLinkPlaceholder: 'Required, please enter party B contact phone',
+        operator: 'Operator',
+        operatorPlaceholder: 'Required, please enter operator',
+        operatorLink: 'Contact Phone',
+        operatorLinkPlaceholder: 'Required, please enter contact phone',
+        amount: 'Contract Amount',
+        amountPlaceholder: 'Optional, please enter contract amount',
+        startTime: 'Start Time',
+        startTimePlaceholder: 'Required, please enter start time',
+        endTime: 'End Time',
+        endTimePlaceholder: 'Required, please enter end time',
+        signingTime: 'Signing Time',
+        signingTimePlaceholder: 'Required, please enter signing time',
+        contractFiles: 'Contract Attachments',
+        addFile: 'Add Attachment',
+        fileIndex: 'No.{index}',
+        deleteFile: 'Delete Attachment',
+        cancel: 'Cancel',
+        save: 'Save',
+        saveSuccess: 'Contract saved successfully',
+        saveError: 'Failed to save contract',
+        fileTypeError: 'Only PNG, PDF, JPG files are allowed',
+        uploadSuccess: 'File uploaded successfully',
+        uploadError: 'Failed to upload file'
+      },
+      delete: {
+        title: 'Confirm Operation',
+        confirmMessage: 'Are you sure to delete this contract?',
+        cancel: 'Cancel',
+        confirm: 'Confirm',
+        success: 'Contract deleted successfully',
+        error: 'Failed to delete contract'
+      }
+    }
+  },
+  zh: {
+    contractManage: {
+      search: {
+        title: '查询条件',
+        hide: '隐藏',
+        more: '更多',
+        search: '查询',
+        reset: '重置'
+      },
+      list: {
+        title: '合同信息'
+      },
+      contractNamePlaceholder: '请输入合同名称',
+      contractCodePlaceholder: '请输入合同编号',
+      contractTypePlaceholder: '请选择合同类型',
+      partyBPlaceholder: '请输入合同乙方',
+      startTimePlaceholder: '请输入起草开始时间',
+      endTimePlaceholder: '请输入起草结束时间',
+      parentContractCodePlaceholder: '请输入父合同编号',
+      fetchError: '获取合同数据失败',
+      table: {
+        contractName: '合同名称',
+        contractCode: '合同编号',
+        parentContractCode: '父合同编号',
+        contractType: '合同类型',
+        operator: '经办人',
+        amount: '合同金额',
+        partyB: '合同乙方',
+        validityPeriod: '有效期',
+        createTime: '起草时间',
+        status: '状态',
+        operation: '操作'
+      },
+      operation: {
+        fee: '费用',
+        view: '查看',
+        print: '打印',
+        delete: '删除'
+      },
+      edit: {
+        title: '编辑合同',
+        contractName: '合同名称',
+        contractNamePlaceholder: '必填，请填写合同名称',
+        contractCode: '合同编号',
+        contractCodePlaceholder: '必填，请填写合同编号',
+        contractType: '合同类型',
+        contractTypePlaceholder: '必填，请选择合同类型',
+        partyA: '甲方',
+        partyAPlaceholder: '必填，请填写甲方',
+        aContacts: '甲方联系人',
+        aContactsPlaceholder: '必填，请填写甲方联系人',
+        aLink: '甲方联系电话',
+        aLinkPlaceholder: '必填，请填写甲方联系电话',
+        partyB: '乙方',
+        partyBPlaceholder: '必填，请填写乙方',
+        bContacts: '乙方联系人',
+        bContactsPlaceholder: '必填，请填写乙方联系人',
+        bLink: '乙方联系电话',
+        bLinkPlaceholder: '必填，请填写乙方联系电话',
+        operator: '经办人',
+        operatorPlaceholder: '必填，请填写经办人',
+        operatorLink: '联系电话',
+        operatorLinkPlaceholder: '必填，请填写联系电话',
+        amount: '合同金额',
+        amountPlaceholder: '选填，请填写合同金额',
+        startTime: '开始时间',
+        startTimePlaceholder: '必填，请填写开始时间',
+        endTime: '结束时间',
+        endTimePlaceholder: '必填，请填写结束时间',
+        signingTime: '签订时间',
+        signingTimePlaceholder: '必填，请填写签订时间',
+        contractFiles: '合同附件',
+        addFile: '添加附件',
+        fileIndex: '第{index}个',
+        deleteFile: '删除附件',
+        cancel: '取消',
+        save: '保存',
+        saveSuccess: '合同保存成功',
+        saveError: '合同保存失败',
+        fileTypeError: '仅支持PNG、PDF、JPG格式文件',
+        uploadSuccess: '文件上传成功',
+        uploadError: '文件上传失败'
+      },
+      delete: {
+        title: '请确认您的操作',
+        confirmMessage: '确定删除合同信息',
+        cancel: '点错了',
+        confirm: '确认删除',
+        success: '合同删除成功',
+        error: '合同删除失败'
+      }
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="contract-manage-container">
+    <!-- 查询条件 -->
+    <el-card class="search-card">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('contractManage.search.title') }}</span>
+        <el-button type="text" style="float: right; padding: 3px 0" @click="toggleMoreCondition">
+          {{ contractManageInfo.moreCondition ? $t('common.hide') : $t('common.more') }}
+        </el-button>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-input v-model="contractManageInfo.conditions.contractNameLike"
+            :placeholder="$t('contractManage.contractNamePlaceholder')" clearable />
+        </el-col>
+        <el-col :span="8">
+          <el-input v-model="contractManageInfo.conditions.contractCodeLike"
+            :placeholder="$t('contractManage.contractCodePlaceholder')" clearable />
+        </el-col>
+        <el-col :span="6">
+          <el-select v-model="contractManageInfo.conditions.contractType"
+            :placeholder="$t('contractManage.contractTypePlaceholder')" style="width:100%">
+            <el-option v-for="item in contractManageInfo.contractTypes" :key="item.contractTypeId" :label="item.typeName"
+              :value="item.contractTypeId" />
+          </el-select>
+        </el-col>
+        <el-col :span="4">
+          <el-button type="primary" @click="queryContractMethod">
+            <i class="el-icon-search"></i>
+            {{ $t('common.search') }}
+          </el-button>
+          <el-button @click="resetContractMethod">
+            <i class="el-icon-refresh"></i>
+            {{ $t('common.reset') }}
+          </el-button>
+        </el-col>
+      </el-row>
+
+      <el-row v-show="contractManageInfo.moreCondition" :gutter="20" style="margin-top:20px">
+        <el-col :span="6">
+          <el-input v-model="contractManageInfo.conditions.partyBLike"
+            :placeholder="$t('contractManage.partyBPlaceholder')" clearable />
+        </el-col>
+        <el-col :span="8">
+          <el-date-picker v-model="contractManageInfo.conditions.queryStartTime" type="datetime"
+            :placeholder="$t('contractManage.startTimePlaceholder')" style="width:100%" />
+        </el-col>
+        <el-col :span="6">
+          <el-date-picker v-model="contractManageInfo.conditions.queryEndTime" type="datetime"
+            :placeholder="$t('contractManage.endTimePlaceholder')" style="width:100%" />
+        </el-col>
+      </el-row>
+
+      <el-row v-show="contractManageInfo.moreCondition" :gutter="20" style="margin-top:20px">
+        <el-col :span="6">
+          <el-input v-model="contractManageInfo.conditions.parentContractCodeLike"
+            :placeholder="$t('contractManage.parentContractCodePlaceholder')" clearable />
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <!-- 合同列表 -->
+    <el-card class="list-card">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('contractManage.list.title') }}</span>
+      </div>
+
+      <el-table :data="contractManageInfo.contracts" border style="width: 100%" v-loading="loading">
+        <el-table-column prop="contractName" :label="$t('contractManage.table.contractName')" align="center" />
+        <el-table-column prop="contractCode" :label="$t('contractManage.table.contractCode')" align="center" />
+        <el-table-column prop="parentContractCode" :label="$t('contractManage.table.parentContractCode')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.parentContractCode || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="contractTypeName" :label="$t('contractManage.table.contractType')" align="center" />
+        <el-table-column prop="operator" :label="$t('contractManage.table.operator')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.operator }}({{ scope.row.operatorLink }})
+          </template>
+        </el-table-column>
+        <el-table-column prop="amount" :label="$t('contractManage.table.amount')" align="center" />
+        <el-table-column prop="partyB" :label="$t('contractManage.table.partyB')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.partyB }}({{ scope.row.bLink }})
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('contractManage.table.validityPeriod')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.startTime }}<br />~{{ scope.row.endTime }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" :label="$t('contractManage.table.createTime')" align="center" />
+        <el-table-column prop="stateName" :label="$t('contractManage.table.status')" align="center" />
+        <el-table-column :label="$t('contractManage.table.operation')" align="center" width="220">
+          <template slot-scope="scope">
+            <el-button-group>
+              <el-button size="mini" @click="openContractFee(scope.row)">
+                {{ $t('contractManage.operation.fee') }}
+              </el-button>
+              <el-button size="mini" @click="viewContract(scope.row)">
+                {{ $t('contractManage.operation.view') }}
+              </el-button>
+              <el-button size="mini" @click="printContract(scope.row)">
+                {{ $t('contractManage.operation.print') }}
+              </el-button>
+              <el-button size="mini" type="danger" @click="openDeleteContractModel(scope.row)">
+                {{ $t('contractManage.operation.delete') }}
+              </el-button>
+            </el-button-group>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.current"
+        :page-sizes="[10, 20, 30, 50]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper"
+        :total="page.total" style="margin-top:20px;text-align:right" />
+    </el-card>
+
+    <!-- 子组件 -->
+    <edit-contract ref="editContract" @success="handleSuccess" />
+    <delete-contract ref="deleteContract" @success="handleSuccess" />
+  </div>
+</template>
+
+<script>
+import { queryContract, queryContractType } from '@/api/contract/contractManageApi'
+import EditContract from '@/components/contract/editContract'
+import DeleteContract from '@/components/contract/deleteContract'
+
+export default {
+  name: 'ContractManageList',
+  components: {
+    EditContract,
+    DeleteContract
+  },
+  data() {
+    return {
+      loading: false,
+      contractManageInfo: {
+        contracts: [],
+        moreCondition: false,
+        conditions: {
+          contractNameLike: '',
+          contractCodeLike: '',
+          contractType: '',
+          partyBLike: '',
+          queryStartTime: '',
+          queryEndTime: '',
+          parentContractCodeLike: ''
+        },
+        contractTypes: []
+      },
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.listContracts()
+    this.listContractTypes()
+  },
+  methods: {
+    async listContracts() {
+      try {
+        this.loading = true
+        const params = {
+          page: this.page.current,
+          row: this.page.size,
+          ...this.contractManageInfo.conditions
+        }
+        const { data, total } = await queryContract(params)
+        this.contractManageInfo.contracts = data
+        this.page.total = total
+      } catch (error) {
+        this.$message.error(this.$t('contractManage.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    async listContractTypes() {
+      try {
+        const params = {
+          page: 1,
+          row: 50
+        }
+        const { data } = await queryContractType(params)
+        this.contractManageInfo.contractTypes = data
+      } catch (error) {
+        console.error('获取合同类型失败:', error)
+      }
+    },
+    toggleMoreCondition() {
+      this.contractManageInfo.moreCondition = !this.contractManageInfo.moreCondition
+    },
+    queryContractMethod() {
+      this.page.current = 1
+      this.listContracts()
+    },
+    resetContractMethod() {
+      this.contractManageInfo.conditions = {
+        contractNameLike: '',
+        contractCodeLike: '',
+        contractType: '',
+        partyBLike: '',
+        queryStartTime: '',
+        queryEndTime: '',
+        parentContractCodeLike: ''
+      }
+      this.listContracts()
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this.listContracts()
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this.listContracts()
+    },
+    openContractFee(contract) {
+      this.$router.push({
+        path: '/property/listContractFee',
+        query: {
+          contractId: contract.contractId,
+          contractCode: contract.contractCode
+        }
+      })
+    },
+    viewContract(contract) {
+      this.$router.push({
+        path: '/contract/contractDetail',
+        query: {
+          contractId: contract.contractId
+        }
+      })
+    },
+    printContract(contract) {
+      window.open(`/#/views/contract/printContract?contractTypeId=${contract.contractType}&contractId=${contract.contractId}`)
+    },
+    openDeleteContractModel(contract) {
+      this.$refs.deleteContract.open(contract)
+    },
+    handleSuccess() {
+      this.listContracts()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.contract-manage-container {
+  padding: 20px;
+
+  .search-card {
+    margin-bottom: 20px;
+  }
+
+  .list-card {
+    margin-bottom: 20px;
+  }
+}
+</style>
 \ No newline at end of file
+export const messages = {
+  en: {
+    contractPartyaManage: {
+      search: {
+        title: 'Search Conditions',
+        partyA: 'Party A',
+        aContacts: 'Party A Contact',
+        aLink: 'Contact Phone'
+      },
+      list: {
+        title: 'Contract Party A'
+      },
+      table: {
+        partyA: 'Party A',
+        aContacts: 'Party A Contact',
+        aLink: 'Contact Phone'
+      },
+      form: {
+        partyA: 'Party A',
+        partyAPlaceholder: 'Please enter Party A',
+        aContacts: 'Party A Contact',
+        aContactsPlaceholder: 'Please enter Party A Contact',
+        aLink: 'Contact Phone',
+        aLinkPlaceholder: 'Please enter Contact Phone'
+      },
+      validate: {
+        partyARequired: 'Party A is required',
+        partyAMaxLength: 'Party A is too long',
+        aContactsRequired: 'Party A Contact is required',
+        aContactsMaxLength: 'Party A Contact cannot exceed 64 characters',
+        aLinkRequired: 'Contact Phone is required',
+        aLinkFormat: 'Invalid Contact Phone format',
+        partyaIdRequired: 'Party A ID is required'
+      },
+      add: {
+        title: 'Add Party A'
+      },
+      edit: {
+        title: 'Edit Party A'
+      },
+      delete: {
+        title: 'Confirm Operation',
+        confirmText: 'Are you sure to delete this Party A?'
+      },
+      fetchError: 'Failed to fetch Party A data'
+    }
+  },
+  zh: {
+    contractPartyaManage: {
+      search: {
+        title: '查询条件',
+        partyA: '甲方',
+        aContacts: '甲方联系人',
+        aLink: '联系电话'
+      },
+      list: {
+        title: '合同甲方'
+      },
+      table: {
+        partyA: '甲方',
+        aContacts: '甲方联系人',
+        aLink: '联系电话'
+      },
+      form: {
+        partyA: '甲方',
+        partyAPlaceholder: '请输入甲方',
+        aContacts: '甲方联系人',
+        aContactsPlaceholder: '请输入甲方联系人',
+        aLink: '联系电话',
+        aLinkPlaceholder: '请输入联系电话'
+      },
+      validate: {
+        partyARequired: '甲方不能为空',
+        partyAMaxLength: '甲方太长',
+        aContactsRequired: '甲方联系人不能为空',
+        aContactsMaxLength: '甲方联系人不能超过64个字符',
+        aLinkRequired: '联系电话不能为空',
+        aLinkFormat: '联系电话格式错误',
+        partyaIdRequired: '甲方编号不能为空'
+      },
+      add: {
+        title: '添加甲方'
+      },
+      edit: {
+        title: '修改甲方'
+      },
+      delete: {
+        title: '请确认您的操作',
+        confirmText: '确定删除合同甲方吗?'
+      },
+      fetchError: '获取甲方数据失败'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="contract-partya-manage-container">
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <el-card>
+          <div slot="header" class="flex justify-between">
+            <span>{{ $t('contractPartyaManage.search.title') }}</span>
+          </div>
+          <el-form :inline="true" :model="searchForm" class="search-form text-left">
+            <el-form-item>
+              <el-input v-model="searchForm.partyA" :placeholder="$t('contractPartyaManage.search.partyA')" clearable />
+            </el-form-item>
+            <el-form-item>
+              <el-input v-model="searchForm.aContacts" :placeholder="$t('contractPartyaManage.search.aContacts')"
+                clearable />
+            </el-form-item>
+            <el-form-item>
+              <el-input v-model="searchForm.aLink" :placeholder="$t('contractPartyaManage.search.aLink')" clearable />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleSearch">
+                {{ $t('common.search') }}
+              </el-button>
+              <el-button @click="handleReset">
+                {{ $t('common.reset') }}
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" >
+      <el-col :span="24">
+        <el-card>
+          <div slot="header" class="flex justify-between">
+            <span>{{ $t('contractPartyaManage.list.title') }}</span>
+            <el-button type="primary" size="small" style="float: right;" @click="handleAdd">
+              {{ $t('common.add') }}
+            </el-button>
+          </div>
+          <el-table v-loading="loading" :data="tableData" border style="width: 100%">
+            <el-table-column prop="partyA" :label="$t('contractPartyaManage.table.partyA')" align="center" />
+            <el-table-column prop="aContacts" :label="$t('contractPartyaManage.table.aContacts')" align="center" />
+            <el-table-column prop="aLink" :label="$t('contractPartyaManage.table.aLink')" align="center" />
+            <el-table-column :label="$t('common.operation')" align="center" width="200">
+              <template slot-scope="scope">
+                <el-button size="mini" type="primary" @click="handleEdit(scope.row)">
+                  {{ $t('common.edit') }}
+                </el-button>
+                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
+                  {{ $t('common.delete') }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-pagination :current-page.sync="page.current" :page-sizes="[10, 20, 30, 50]" :page-size="page.size"
+            :total="page.total" layout="total, sizes, prev, pager, next, jumper" style="margin-top: 20px;"
+            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <add-contract-partya ref="addContractPartya" @success="handleSuccess" />
+    <edit-contract-partya ref="editContractPartya" @success="handleSuccess" />
+    <delete-contract-partya ref="deleteContractPartya" @success="handleSuccess" />
+  </div>
+</template>
+
+<script>
+import { queryContractPartya } from '@/api/contract/contractPartyaManageApi'
+import AddContractPartya from '@/components/contract/addContractPartya'
+import EditContractPartya from '@/components/contract/editContractPartya'
+import DeleteContractPartya from '@/components/contract/deleteContractPartya'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'ContractPartyaManageList',
+  components: {
+    AddContractPartya,
+    EditContractPartya,
+    DeleteContractPartya
+  },
+  data() {
+    return {
+      loading: false,
+      searchForm: {
+        partyA: '',
+        aContacts: '',
+        aLink: ''
+      },
+      tableData: [],
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      try {
+        this.loading = true
+        const params = {
+          page: this.page.current,
+          row: this.page.size,
+          partyA: this.searchForm.partyA,
+          aContacts: this.searchForm.aContacts,
+          aLink: this.searchForm.aLink,
+          communityId: this.communityId
+        }
+        const { data, total } = await queryContractPartya(params)
+        this.tableData = data
+        this.page.total = total
+      } catch (error) {
+        this.$message.error(this.$t('contractPartyaManage.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSearch() {
+      this.page.current = 1
+      this.getList()
+    },
+    handleReset() {
+      this.searchForm = {
+        partyA: '',
+        aContacts: '',
+        aLink: ''
+      }
+      this.handleSearch()
+    },
+    handleAdd() {
+      this.$refs.addContractPartya.open()
+    },
+    handleEdit(row) {
+      this.$refs.editContractPartya.open(row)
+    },
+    handleDelete(row) {
+      this.$refs.deleteContractPartya.open(row)
+    },
+    handleSuccess() {
+      this.getList()
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.contract-partya-manage-container {
+  padding: 20px;
+
+  .search-form {
+    .el-form-item {
+      margin-bottom: 0;
+    }
+  }
+
+  .el-card {
+    margin-bottom: 20px;
+  }
+}
+</style>
 \ No newline at end of file
+export const messages = {
+  en: {
+    contractTypeManage: {
+      search: {
+        title: 'Search Conditions',
+        typeNamePlaceholder: 'Please enter type name',
+        auditPlaceholder: 'Please select audit status'
+      },
+      list: {
+        title: 'Contract Types',
+        setAudit: 'Set Auditor'
+      },
+      table: {
+        typeName: 'Type Name',
+        audit: 'Audit Status',
+        remark: 'Description',
+        createTime: 'Create Time',
+        specInfo: 'Spec Info',
+        template: 'Template'
+      },
+      add: {
+        title: 'Add Contract Type',
+        typeName: 'Type Name',
+        typeNamePlaceholder: 'Required, please enter type name',
+        audit: 'Audit Status',
+        auditPlaceholder: 'Please select audit status',
+        remark: 'Description',
+        remarkPlaceholder: 'Optional, please enter description'
+      },
+      edit: {
+        title: 'Edit Contract Type',
+        typeName: 'Type Name',
+        typeNamePlaceholder: 'Required, please enter type name',
+        audit: 'Audit Status',
+        auditPlaceholder: 'Please select audit status',
+        remark: 'Description',
+        remarkPlaceholder: 'Optional, please enter description'
+      },
+      delete: {
+        title: 'Confirm Operation',
+        confirmText: 'Are you sure to delete this contract type?'
+      },
+      template: {
+        title: 'Contract Template',
+        content: 'Template Content',
+        placeholder: 'Required, please enter contract template'
+      },
+      validate: {
+        contractTypeIdRequired: 'Contract type ID is required',
+        typeNameRequired: 'Type name is required',
+        typeNameMaxLength: 'Type name cannot exceed 64 characters',
+        auditRequired: 'Audit status is required',
+        remarkMaxLength: 'Description cannot exceed 200 characters',
+        contentRequired: 'Template content is required',
+        contractTypeRequired: 'Contract type is required'
+      },
+      fetchError: 'Failed to fetch contract types'
+    }
+  },
+  zh: {
+    contractTypeManage: {
+      search: {
+        title: '查询条件',
+        typeNamePlaceholder: '请输入类型名称',
+        auditPlaceholder: '请选择审核状态'
+      },
+      list: {
+        title: '合同类型',
+        setAudit: '设置审核人员'
+      },
+      table: {
+        typeName: '类型名称',
+        audit: '是否审核',
+        remark: '描述',
+        createTime: '创建时间',
+        specInfo: '扩展信息',
+        template: '合同模板'
+      },
+      add: {
+        title: '添加合同类型',
+        typeName: '类型名称',
+        typeNamePlaceholder: '必填，请填写类型名称',
+        audit: '是否审核',
+        auditPlaceholder: '请选择审核状态',
+        remark: '描述',
+        remarkPlaceholder: '选填，请填写描述'
+      },
+      edit: {
+        title: '修改合同类型',
+        typeName: '类型名称',
+        typeNamePlaceholder: '必填，请填写类型名称',
+        audit: '是否审核',
+        auditPlaceholder: '请选择审核状态',
+        remark: '描述',
+        remarkPlaceholder: '选填，请填写描述'
+      },
+      delete: {
+        title: '请确认您的操作',
+        confirmText: '确定删除该合同类型吗？'
+      },
+      template: {
+        title: '合同模板',
+        content: '模板内容',
+        placeholder: '必填，请输入合同模板'
+      },
+      validate: {
+        contractTypeIdRequired: '合同类型ID不能为空',
+        typeNameRequired: '类型名称不能为空',
+        typeNameMaxLength: '类型名称不能超过64个字符',
+        auditRequired: '审核状态不能为空',
+        remarkMaxLength: '描述不能超过200个字符',
+        contentRequired: '模板内容必填',
+        contractTypeRequired: '合同类型不能为空'
+      },
+      fetchError: '获取合同类型失败'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="contract-type-manage-container">
+    <!-- 查询条件 -->
+    <el-card  class="search-card">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('contractTypeManage.search.title') }}</span>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-input v-model="conditions.typeName" :placeholder="$t('contractTypeManage.search.typeNamePlaceholder')"
+            clearable />
+        </el-col>
+        <el-col :span="6">
+          <el-select v-model="conditions.audit" :placeholder="$t('contractTypeManage.search.auditPlaceholder')"
+            style="width:100%">
+            <el-option v-for="item in audits" :key="item.statusCd" :label="item.name" :value="item.statusCd" />
+          </el-select>
+        </el-col>
+        <el-col :span="4">
+          <el-button type="primary" @click="_queryContractTypeMethod">
+            <i class="el-icon-search"></i>
+            {{ $t('common.search') }}
+          </el-button>
+          <el-button @click="_resetContractTypeMethod">
+            <i class="el-icon-refresh"></i>
+            {{ $t('common.reset') }}
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <!-- 合同类型列表 -->
+    <el-card  class="list-card">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('contractTypeManage.list.title') }}</span>
+        <div style="float: right;">
+          <el-button v-if="hasPrivilege('502020061767630003')" type="primary" size="small" @click="_toAuditPage">
+            <i class="el-icon-setting"></i>
+            {{ $t('contractTypeManage.list.setAudit') }}
+          </el-button>
+          <el-button type="primary" size="small" @click="_openAddContractTypeModal">
+            <i class="el-icon-plus"></i>
+            {{ $t('common.add') }}
+          </el-button>
+        </div>
+      </div>
+
+      <el-table :data="contractTypes" border style="width: 100%">
+        <el-table-column prop="typeName" :label="$t('contractTypeManage.table.typeName')" align="center" />
+        <el-table-column prop="auditName" :label="$t('contractTypeManage.table.audit')" align="center" />
+        <el-table-column prop="remark" :label="$t('contractTypeManage.table.remark')" align="center" />
+        <el-table-column prop="createTime" :label="$t('contractTypeManage.table.createTime')" align="center" />
+        <el-table-column :label="$t('common.operation')" align="center" width="300">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="_openContractTypeSpecModel(scope.row)">
+              {{ $t('contractTypeManage.table.specInfo') }}
+            </el-button>
+            <el-button size="mini" @click="_openContractTemplate(scope.row)">
+              {{ $t('contractTypeManage.table.template') }}
+            </el-button>
+            <el-button size="mini" type="primary" @click="_openEditContractTypeModel(scope.row)">
+              {{ $t('common.edit') }}
+            </el-button>
+            <el-button size="mini" type="danger" @click="_openDeleteContractTypeModel(scope.row)">
+              {{ $t('common.delete') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination :current-page.sync="page.current" :page-sizes="[10, 20, 30, 50]" :page-size="page.size"
+        :total="page.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" />
+    </el-card>
+
+    <!-- 子组件 -->
+    <add-template-view ref="addTemplateView" @success="handleSuccess" />
+    <add-contract-type ref="addContractType" @success="handleSuccess" />
+    <edit-contract-type ref="editContractType" @success="handleSuccess" />
+    <delete-contract-type ref="deleteContractType" @success="handleSuccess" />
+  </div>
+</template>
+
+<script>
+import { getDict } from '@/api/community/communityApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import {
+  queryContractType,
+  //queryContractTypeTemplate,
+  
+} from '@/api/contract/contractTypeManageApi'
+import AddTemplateView from '@/components/contract/addTemplateView'
+import AddContractType from '@/components/contract/addContractType'
+import EditContractType from '@/components/contract/editContractType'
+import DeleteContractType from '@/components/contract/deleteContractType'
+
+export default {
+  name: 'ContractTypeManageList',
+  components: {
+    AddTemplateView,
+    AddContractType,
+    EditContractType,
+    DeleteContractType
+  },
+  data() {
+    return {
+      componentShow: 'contractTypeList',
+      contractTypes: [],
+      contractTypeAttrs: [],
+      contractTypeSpec: '',
+      templatecontent: '',
+      audits: [],
+      conditions: {
+        typeName: '',
+        audit: '',
+        contractTypeId: ''
+      },
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this._initData()
+  },
+  methods: {
+    async _initData() {
+      try {
+        const auditData = await getDict('contract_type', 'audit')
+        this.audits = auditData
+        this._listContractTypes(this.page.current, this.page.size)
+      } catch (error) {
+        console.error('初始化数据失败:', error)
+      }
+    },
+    async _listContractTypes(page, size) {
+      try {
+        const params = {
+          page,
+          row: size,
+          typeName: this.conditions.typeName.trim(),
+          audit: this.conditions.audit.trim(),
+          communityId: this.communityId
+        }
+        const { data, total } = await queryContractType(params)
+        this.contractTypes = data
+        this.page.total = total
+      } catch (error) {
+        this.$message.error(this.$t('contractTypeManage.fetchError'))
+      }
+    },
+    _queryContractTypeMethod() {
+      this.page.current = 1
+      this._listContractTypes(this.page.current, this.page.size)
+    },
+    _resetContractTypeMethod() {
+      this.conditions = {
+        typeName: '',
+        audit: '',
+        contractTypeId: ''
+      }
+      this._listContractTypes(this.page.current, this.page.size)
+    },
+    _openAddContractTypeModal() {
+
+      this.$refs.addContractType.open()
+    },
+    _openEditContractTypeModel(row) {
+      this.$refs.editContractType.open(row)
+    },
+    _openDeleteContractTypeModel(row) {
+      this.$refs.deleteContractType.open(row)
+    },
+    _openContractTypeSpecModel(row) {
+      this.$router.push(`/views/contract/contractTypeSpecManage?contractTypeId=${row.contractTypeId}`)
+    },
+    _toAuditPage() {
+      this.$router.push('/admin/workflowManage?tab=流程管理')
+    },
+   
+    _openContractTemplate(row) {
+      this.componentShow = ''
+        this.$refs.addTemplateView.open(row)
+
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this._listContractTypes(this.page.current, this.page.size)
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this._listContractTypes(this.page.current, this.page.size)
+    },
+    handleSuccess() {
+      this._listContractTypes(this.page.current, this.page.size)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.contract-type-manage-container {
+  padding: 20px;
+
+  .search-card {
+    margin-bottom: 20px;
+  }
+
+  .list-card {
+    margin-bottom: 20px;
+  }
+
+  .el-pagination {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+</style>
 \ No newline at end of file
+export const messages = {
+  en: {
+    contractTypeSpecManage: {
+      search: {
+        title: 'Search Conditions',
+        specCd: 'Spec ID',
+        specName: 'Spec Name',
+        specShow: 'Spec Display',
+        all: 'All',
+        yes: 'Yes',
+        no: 'No'
+      },
+      table: {
+        title: 'Contract Extension Information',
+        specCd: 'Spec ID',
+        specName: 'Spec Name',
+        required: 'Required',
+        specShow: 'Display',
+        specValueType: 'Value Type',
+        specType: 'Spec Type',
+        listShow: 'Query Display',
+        operation: 'Operation'
+      },
+      add: {
+        title: 'Add',
+        specName: 'Spec Name',
+        specNamePlaceholder: 'Required, please enter spec name',
+        specHoldplace: 'Description',
+        specHoldplacePlaceholder: 'Optional, please enter description',
+        required: 'Required',
+        requiredPlaceholder: 'Required, please select required',
+        specShow: 'Display',
+        specShowPlaceholder: 'Required, please select display',
+        specValueType: 'Value Type',
+        specValueTypePlaceholder: 'Required, please select value type',
+        specType: 'Spec Type',
+        specTypePlaceholder: 'Required, please select spec type',
+        listShow: 'Query Display',
+        listShowPlaceholder: 'Required, please select query display',
+        success: 'Add successfully',
+        error: 'Add failed'
+      },
+      edit: {
+        title: 'Edit',
+        specName: 'Spec Name',
+        specNamePlaceholder: 'Required, please enter spec name',
+        specHoldplace: 'Description',
+        specHoldplacePlaceholder: 'Optional, please enter description',
+        required: 'Required',
+        requiredPlaceholder: 'Required, please select required',
+        specShow: 'Display',
+        specShowPlaceholder: 'Required, please select display',
+        specValueType: 'Value Type',
+        specValueTypePlaceholder: 'Required, please select value type',
+        specType: 'Spec Type',
+        specTypePlaceholder: 'Required, please select spec type',
+        listShow: 'Query Display',
+        listShowPlaceholder: 'Required, please select query display',
+        success: 'Edit successfully',
+        error: 'Edit failed'
+      },
+      delete: {
+        title: 'Confirm Operation',
+        confirmText: 'Are you sure to delete this contract type spec?',
+        success: 'Delete successfully',
+        error: 'Delete failed'
+      },
+      specValueType: {
+        string: 'String',
+        integer: 'Integer',
+        amount: 'Amount',
+        date: 'Date',
+        time: 'Time'
+      },
+      specType: {
+        input: 'Input',
+        select: 'Select'
+      },
+      validate: {
+        specNameRequired: 'Spec name is required',
+        specNameMaxLength: 'Spec name is too long',
+        specHoldplaceMaxLength: 'Description is too long',
+        requiredRequired: 'Required is required',
+        specShowRequired: 'Display is required',
+        specValueTypeRequired: 'Value type is required',
+        specTypeRequired: 'Spec type is required',
+        listShowRequired: 'Query display is required',
+        specCdRequired: 'Spec is required'
+      },
+      fetchError: 'Failed to fetch data'
+    }
+  },
+  zh: {
+    contractTypeSpecManage: {
+      search: {
+        title: '查询条件',
+        specCd: '规格ID',
+        specName: '规格名称',
+        specShow: '规格是否显示',
+        all: '全部',
+        yes: '是',
+        no: '否'
+      },
+      table: {
+        title: '合同扩展信息',
+        specCd: '规格ID',
+        specName: '规格名称',
+        required: '必填',
+        specShow: '规格是否展示',
+        specValueType: '值类型',
+        specType: '规格类型',
+        listShow: '查询显示',
+        operation: '操作'
+      },
+      add: {
+        title: '添加',
+        specName: '规格名称',
+        specNamePlaceholder: '必填，请填写规格名称',
+        specHoldplace: '说明',
+        specHoldplacePlaceholder: '选填，请填写说明',
+        required: '必填',
+        requiredPlaceholder: '必填，请选择必填',
+        specShow: '展示',
+        specShowPlaceholder: '必填，请选择展示',
+        specValueType: '值类型',
+        specValueTypePlaceholder: '必填，请选择值类型',
+        specType: '规格类型',
+        specTypePlaceholder: '必填，请选择规格类型',
+        listShow: '查询显示',
+        listShowPlaceholder: '必填，请选择查询显示',
+        success: '添加成功',
+        error: '添加失败'
+      },
+      edit: {
+        title: '修改',
+        specName: '规格名称',
+        specNamePlaceholder: '必填，请填写规格名称',
+        specHoldplace: '说明',
+        specHoldplacePlaceholder: '选填，请填写说明',
+        required: '必填',
+        requiredPlaceholder: '必填，请选择必填',
+        specShow: '展示',
+        specShowPlaceholder: '必填，请选择展示',
+        specValueType: '值类型',
+        specValueTypePlaceholder: '必填，请选择值类型',
+        specType: '规格类型',
+        specTypePlaceholder: '必填，请选择规格类型',
+        listShow: '查询显示',
+        listShowPlaceholder: '必填，请选择查询显示',
+        success: '修改成功',
+        error: '修改失败'
+      },
+      delete: {
+        title: '请确认您的操作',
+        confirmText: '确定删除合同类型属性?',
+        success: '删除成功',
+        error: '删除失败'
+      },
+      specValueType: {
+        string: '字符串',
+        integer: '整数',
+        amount: '金额',
+        date: '日期',
+        time: '时间'
+      },
+      specType: {
+        input: '文本框',
+        select: '选择框'
+      },
+      validate: {
+        specNameRequired: '规格名称不能为空',
+        specNameMaxLength: '规格名称太长',
+        specHoldplaceMaxLength: '说明不能超过500位',
+        requiredRequired: '必填不能为空',
+        specShowRequired: '展示不能为空',
+        specValueTypeRequired: '值类型不能为空',
+        specTypeRequired: '规格类型不能为空',
+        listShowRequired: '查询显示不能为空',
+        specCdRequired: '规格不能为空'
+      },
+      fetchError: '获取数据失败'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="contract-type-spec-manage-container">
+    <el-card class="search-card">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('contractTypeSpecManage.search.title') }}</span>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-input v-model="searchForm.specCd" :placeholder="$t('contractTypeSpecManage.search.specCd')" clearable />
+        </el-col>
+        <el-col :span="6">
+          <el-input v-model="searchForm.specName" :placeholder="$t('contractTypeSpecManage.search.specName')" clearable />
+        </el-col>
+        <el-col :span="6">
+          <el-select v-model="searchForm.specShow" :placeholder="$t('contractTypeSpecManage.search.specShow')"
+            style="width:100%">
+            <el-option :label="$t('contractTypeSpecManage.search.all')" value="" />
+            <el-option :label="$t('contractTypeSpecManage.search.yes')" value="Y" />
+            <el-option :label="$t('contractTypeSpecManage.search.no')" value="N" />
+          </el-select>
+        </el-col>
+        <el-col :span="6">
+          <el-button type="primary" @click="handleSearch">
+            {{ $t('common.search') }}
+          </el-button>
+          <el-button @click="handleReset">
+            {{ $t('common.reset') }}
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <el-card class="table-card">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('contractTypeSpecManage.table.title') }}</span>
+        <div style="float:right">
+          <el-button type="primary" size="small" @click="handleGoBack">
+            {{ $t('common.back') }}
+          </el-button>
+          <el-button type="primary" size="small" @click="handleAdd">
+            {{ $t('common.add') }}
+          </el-button>
+        </div>
+      </div>
+      <el-table v-loading="loading" :data="tableData" border style="width:100%">
+        <el-table-column prop="specCd" :label="$t('contractTypeSpecManage.table.specCd')" align="center" />
+        <el-table-column prop="specName" :label="$t('contractTypeSpecManage.table.specName')" align="center" />
+        <el-table-column prop="required" :label="$t('contractTypeSpecManage.table.required')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.required === 'Y' ? $t('common.yes') : $t('common.no') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="specShow" :label="$t('contractTypeSpecManage.table.specShow')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.specShow === 'Y' ? $t('common.yes') : $t('common.no') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="specValueType" :label="$t('contractTypeSpecManage.table.specValueType')" align="center">
+          <template slot-scope="scope">
+            {{ formatSpecValueType(scope.row.specValueType) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="specType" :label="$t('contractTypeSpecManage.table.specType')" align="center">
+          <template slot-scope="scope">
+            {{ formatSpecType(scope.row.specType) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="listShow" :label="$t('contractTypeSpecManage.table.listShow')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.listShow === 'Y' ? $t('common.yes') : $t('common.no') }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('common.operation')" align="center" width="200">
+          <template slot-scope="scope">
+            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">
+              {{ $t('common.edit') }}
+            </el-button>
+            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
+              {{ $t('common.delete') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination :current-page="pagination.current" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.size"
+        :total="pagination.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" />
+    </el-card>
+
+    <add-contract-type-spec ref="addDialog" @success="handleSuccess" />
+    <edit-contract-type-spec ref="editDialog" @success="handleSuccess" />
+    <delete-contract-type-spec ref="deleteDialog" @success="handleSuccess" />
+  </div>
+</template>
+
+<script>
+import { queryContractTypeSpec } from '@/api/contract/contractTypeSpecManageApi'
+import AddContractTypeSpec from '@/components/contract/addContractTypeSpec'
+import EditContractTypeSpec from '@/components/contract/editContractTypeSpec'
+import DeleteContractTypeSpec from '@/components/contract/deleteContractTypeSpec'
+
+export default {
+  name: 'ContractTypeSpecManageList',
+  components: {
+    AddContractTypeSpec,
+    EditContractTypeSpec,
+    DeleteContractTypeSpec
+  },
+  data() {
+    return {
+      loading: false,
+      searchForm: {
+        specCd: '',
+        specName: '',
+        specShow: '',
+        contractTypeId: this.$route.query.contractTypeId || ''
+      },
+      tableData: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+      typeName: this.$route.query.typeName || ''
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      try {
+        this.loading = true
+        const params = {
+          ...this.searchForm,
+          page: this.pagination.current,
+          row: this.pagination.size
+        }
+        const { data, total } = await queryContractTypeSpec(params)
+        this.tableData = data
+        this.pagination.total = total
+      } catch (error) {
+        this.$message.error(this.$t('contractTypeSpecManage.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSearch() {
+      this.pagination.current = 1
+      this.getList()
+    },
+    handleReset() {
+      this.searchForm = {
+        specCd: '',
+        specName: '',
+        specShow: '',
+        contractTypeId: this.$route.query.contractTypeId || ''
+      }
+      this.handleSearch()
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.getList()
+    },
+    handleAdd() {
+      this.$refs.addDialog.open({
+        contractTypeId: this.searchForm.contractTypeId
+      })
+    },
+    handleEdit(row) {
+      this.$refs.editDialog.open(row)
+    },
+    handleDelete(row) {
+      this.$refs.deleteDialog.open(row)
+    },
+    handleGoBack() {
+      this.$router.go(-1)
+    },
+    handleSuccess() {
+      this.getList()
+    },
+    formatSpecValueType(type) {
+      const map = {
+        '1001': this.$t('contractTypeSpecManage.specValueType.string'),
+        '2002': this.$t('contractTypeSpecManage.specValueType.integer'),
+        '3003': this.$t('contractTypeSpecManage.specValueType.amount'),
+        '4004': this.$t('contractTypeSpecManage.specValueType.date'),
+        '5005': this.$t('contractTypeSpecManage.specValueType.time')
+      }
+      return map[type] || type
+    },
+    formatSpecType(type) {
+      const map = {
+        '2233': this.$t('contractTypeSpecManage.specType.input'),
+        '3344': this.$t('contractTypeSpecManage.specType.select')
+      }
+      return map[type] || type
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.contract-type-spec-manage-container {
+  padding: 20px;
+
+  .search-card {
+    margin-bottom: 20px;
+  }
+
+  .table-card {
+    margin-bottom: 20px;
+  }
+
+  .el-pagination {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+</style>
 \ No newline at end of file
+export const messages = {
+  en: {
+    expirationContractManage: {
+      search: {
+        title: 'Search Conditions',
+        contractNameLike: 'Please enter contract name',
+        contractCode: 'Please enter contract code',
+        contractType: 'Please select contract type'
+      },
+      list: {
+        title: 'Expiration Contracts'
+      },
+      table: {
+        contractName: 'Contract Name',
+        contractCode: 'Contract Code',
+        contractType: 'Contract Type',
+        partyA: 'Party A',
+        partyB: 'Party B',
+        operator: 'Operator',
+        amount: 'Amount',
+        startTime: 'Start Time',
+        endTime: 'End Time',
+        status: 'Status'
+      },
+      button: {
+        renew: 'Renew',
+        stop: 'Stop'
+      },
+      fetchError: 'Failed to fetch contract data'
+    },
+    stopContract: {
+      dialog: {
+        title: 'Confirm Operation',
+        content: 'Are you sure to stop this contract? It cannot be restarted after stopping!'
+      },
+      button: {
+        cancel: 'Cancel',
+        confirm: 'Confirm Stop'
+      },
+      message: {
+        success: 'Contract stopped successfully',
+        error: 'Failed to stop contract'
+      }
+    }
+  },
+  zh: {
+    expirationContractManage: {
+      search: {
+        title: '查询条件',
+        contractNameLike: '请输入合同名称',
+        contractCode: '请输入合同编号',
+        contractType: '请选择合同类型'
+      },
+      list: {
+        title: '到期合同'
+      },
+      table: {
+        contractName: '合同名称',
+        contractCode: '合同编号',
+        contractType: '合同类型',
+        partyA: '甲方',
+        partyB: '乙方',
+        operator: '经办人',
+        amount: '合同金额',
+        startTime: '开始时间',
+        endTime: '结束时间',
+        status: '状态'
+      },
+      button: {
+        renew: '续签',
+        stop: '终止'
+      },
+      fetchError: '获取合同数据失败'
+    },
+    stopContract: {
+      dialog: {
+        title: '确认操作',
+        content: '确定要终止此合同吗？终止后将无法重新启动！'
+      },
+      button: {
+        cancel: '取消',
+        confirm: '确认终止'
+      },
+      message: {
+        success: '合同终止成功',
+        error: '合同终止失败'
+      }
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="expiration-contract-manage-container">
+    <!-- 查询条件 -->
+    <el-card class="search-wrapper">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('expirationContractManage.search.title') }}</span>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-input v-model.trim="searchForm.contractNameLike"
+            :placeholder="$t('expirationContractManage.search.contractNameLike')" clearable />
+        </el-col>
+        <el-col :span="6">
+          <el-input v-model.trim="searchForm.contractCode"
+            :placeholder="$t('expirationContractManage.search.contractCode')" clearable />
+        </el-col>
+        <el-col :span="6">
+          <el-select v-model="searchForm.contractType" :placeholder="$t('expirationContractManage.search.contractType')"
+            style="width:100%">
+            <el-option v-for="item in contractTypes" :key="item.contractTypeId" :label="item.typeName"
+              :value="item.contractTypeId" />
+          </el-select>
+        </el-col>
+        <el-col :span="6">
+          <el-button type="primary" @click="handleSearch">
+            <i class="el-icon-search"></i>
+            {{ $t('common.search') }}
+          </el-button>
+          <el-button @click="handleReset">
+            <i class="el-icon-refresh"></i>
+            {{ $t('common.reset') }}
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <!-- 到期合同列表 -->
+    <el-card class="list-wrapper">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('expirationContractManage.list.title') }}</span>
+      </div>
+      <el-table v-loading="loading" :data="tableData" border style="width: 100%">
+        <el-table-column prop="contractName" :label="$t('expirationContractManage.table.contractName')" align="center" />
+        <el-table-column prop="contractCode" :label="$t('expirationContractManage.table.contractCode')" align="center" />
+        <el-table-column prop="contractTypeName" :label="$t('expirationContractManage.table.contractType')"
+          align="center" />
+        <el-table-column prop="partyA" :label="$t('expirationContractManage.table.partyA')" align="center" />
+        <el-table-column prop="partyB" :label="$t('expirationContractManage.table.partyB')" align="center" />
+        <el-table-column prop="operator" :label="$t('expirationContractManage.table.operator')" align="center" />
+        <el-table-column prop="amount" :label="$t('expirationContractManage.table.amount')" align="center" />
+        <el-table-column prop="startTime" :label="$t('expirationContractManage.table.startTime')" align="center" />
+        <el-table-column prop="endTime" :label="$t('expirationContractManage.table.endTime')" align="center" />
+        <el-table-column prop="stateName" :label="$t('expirationContractManage.table.status')" align="center" />
+        <el-table-column :label="$t('common.operation')" align="center" width="200">
+          <template slot-scope="scope">
+            <el-button size="mini" type="primary" @click="handleRenew(scope.row)">
+              {{ $t('expirationContractManage.button.renew') }}
+            </el-button>
+            <el-button size="mini" type="danger" @click="handleStop(scope.row)">
+              {{ $t('expirationContractManage.button.stop') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination :current-page.sync="pagination.current" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.size"
+        :total="pagination.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" />
+    </el-card>
+
+    <!-- 终止合同弹窗 -->
+    <stop-contract ref="stopContractDialog" @success="handleSuccess" />
+  </div>
+</template>
+
+<script>
+import { queryContract, queryContractType } from '@/api/contract/expirationContractManageApi'
+import StopContract from '@/components/contract/StopContract'
+
+export default {
+  name: 'ExpirationContractManageList',
+  components: {
+    StopContract
+  },
+  data() {
+    return {
+      loading: false,
+      searchForm: {
+        contractNameLike: '',
+        contractCode: '',
+        contractType: '',
+        expiration: '1'
+      },
+      tableData: [],
+      contractTypes: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.getList()
+    this.getContractTypes()
+  },
+  methods: {
+    async getList() {
+      try {
+        this.loading = true
+        const params = {
+          page: this.pagination.current,
+          row: this.pagination.size,
+          ...this.searchForm
+        }
+        const { data, total } = await queryContract(params)
+        this.tableData = data
+        this.pagination.total = total
+      } catch (error) {
+        this.$message.error(this.$t('expirationContractManage.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    async getContractTypes() {
+      try {
+        const { data } = await queryContractType({
+          page: 1,
+          row: 50
+        })
+        this.contractTypes = data
+      } catch (error) {
+        console.error('获取合同类型失败:', error)
+      }
+    },
+    handleSearch() {
+      this.pagination.current = 1
+      this.getList()
+    },
+    handleReset() {
+      this.searchForm = {
+        contractNameLike: '',
+        contractCode: '',
+        contractType: '',
+        expiration: '1'
+      }
+      this.handleSearch()
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.getList()
+    },
+    handleRenew(row) {
+      this.$router.push({
+        path: '/pages/admin/addContract',
+        query: {
+          contractId: row.contractId,
+          contractCode: row.contractCode,
+          contractName: row.contractName,
+          stateName: row.stateName
+        }
+      })
+    },
+    handleStop(row) {
+      this.$refs.stopContractDialog.open(row)
+    },
+    handleSuccess() {
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.expiration-contract-manage-container {
+  padding: 20px;
+
+  .search-wrapper {
+    margin-bottom: 20px;
+
+    .el-row {
+      margin-bottom: 0;
+    }
+  }
+
+  .list-wrapper {
+    .el-pagination {
+      margin-top: 20px;
+      text-align: right;
+    }
+  }
+}
+</style>
 \ No newline at end of file
+export const messages = {
+  en: {
+    newContractManage: {
+      search: {
+        title: 'Search Conditions',
+        contractNamePlaceholder: 'Please enter contract name',
+        contractCodePlaceholder: 'Please enter contract code',
+        contractTypePlaceholder: 'Please select contract type'
+      },
+      list: {
+        title: 'Draft Contract Information',
+        draft: 'Draft',
+        note: 'Note: Please go to System Management > Process Management to set up contract application renewal before using this function'
+      },
+      table: {
+        contractName: 'Contract Name',
+        contractCode: 'Contract Code',
+        parentContractCode: 'Parent Contract Code',
+        contractType: 'Contract Type',
+        operator: 'Operator',
+        amount: 'Contract Amount',
+        startTime: 'Start Time',
+        endTime: 'End Time',
+        state: 'Status'
+      },
+      edit: {
+        title: 'Edit Contract',
+        contractName: 'Contract Name',
+        contractNamePlaceholder: 'Required, please fill in contract name',
+        contractCode: 'Contract Code',
+        contractCodePlaceholder: 'Required, please fill in contract code',
+        contractType: 'Contract Type',
+        contractTypePlaceholder: 'Required, please select contract type',
+        partyA: 'Party A',
+        partyAPlaceholder: 'Required, please fill in Party A',
+        partyB: 'Party B',
+        partyBPlaceholder: 'Required, please fill in Party B',
+        aContacts: 'Party A Contact',
+        aContactsPlaceholder: 'Required, please fill in Party A contact',
+        bContacts: 'Party B Contact',
+        bContactsPlaceholder: 'Required, please fill in Party B contact',
+        aLink: 'Party A Phone',
+        aLinkPlaceholder: 'Required, please fill in Party A phone',
+        bLink: 'Party B Phone',
+        bLinkPlaceholder: 'Required, please fill in Party B phone',
+        operator: 'Operator',
+        operatorPlaceholder: 'Required, please fill in operator',
+        operatorLink: 'Operator Phone',
+        operatorLinkPlaceholder: 'Required, please fill in operator phone',
+        amount: 'Contract Amount',
+        amountPlaceholder: 'Optional, please fill in contract amount',
+        startTime: 'Start Time',
+        startTimePlaceholder: 'Required, please fill in start time',
+        endTime: 'End Time',
+        endTimePlaceholder: 'Required, please fill in end time',
+        signingTime: 'Signing Time',
+        signingTimePlaceholder: 'Required, please fill in signing time',
+        contractFile: 'Contract Attachment',
+        addFile: 'Add Attachment',
+        upload: 'Upload',
+        deleteFile: 'Delete',
+        fileIndex: 'No.{index}'
+      },
+      delete: {
+        title: 'Confirm Operation',
+        confirmText: 'Are you sure to delete the contract information?',
+        success: 'Delete successfully',
+        error: 'Delete failed'
+      },
+      validate: {
+        contractNameRequired: 'Contract name cannot be empty',
+        contractNameMaxLength: 'Contract name cannot exceed 200 characters',
+        contractCodeRequired: 'Contract code cannot be empty',
+        contractCodeMaxLength: 'Contract code cannot exceed 30 characters',
+        contractTypeRequired: 'Contract type cannot be empty',
+        partyARequired: 'Party A cannot be empty',
+        partyAMaxLength: 'Party A name is too long',
+        partyBRequired: 'Party B cannot be empty',
+        partyBMaxLength: 'Party B name is too long',
+        aContactsRequired: 'Party A contact cannot be empty',
+        aContactsMaxLength: 'Party A contact length exceeds 64 characters',
+        bContactsRequired: 'Party B contact cannot be empty',
+        bContactsMaxLength: 'Party B contact length exceeds 64 characters',
+        aLinkRequired: 'Party A phone cannot be empty',
+        bLinkRequired: 'Party B phone cannot be empty',
+        operatorRequired: 'Operator cannot be empty',
+        operatorMaxLength: 'Operator exceeds 64 characters',
+        operatorLinkRequired: 'Operator phone cannot be empty',
+        amountFormat: 'Contract amount format error, such as 1.50',
+        startTimeRequired: 'Start time cannot be empty',
+        endTimeRequired: 'End time cannot be empty',
+        signingTimeRequired: 'Signing time cannot be empty',
+        fileTypeError: 'Operation failed, please upload image or PDF format file'
+      },
+      uploadSuccess: 'Upload successfully',
+      uploadError: 'Upload failed',
+      updateSuccess: 'Update successfully',
+      updateError: 'Update failed',
+      fetchError: 'Failed to fetch contract data'
+    }
+  },
+  zh: {
+    newContractManage: {
+      search: {
+        title: '查询条件',
+        contractNamePlaceholder: '请输入合同名称',
+        contractCodePlaceholder: '请输入合同编号',
+        contractTypePlaceholder: '请选择合同类型'
+      },
+      list: {
+        title: '起草合同信息',
+        draft: '起草',
+        note: '注意：此功能使用前请先到系统管理>流程管理中设置合同申请续签'
+      },
+      table: {
+        contractName: '合同名称',
+        contractCode: '合同编号',
+        parentContractCode: '父合同编号',
+        contractType: '合同类型',
+        operator: '经办人',
+        amount: '合同金额',
+        startTime: '开始时间',
+        endTime: '结束时间',
+        state: '状态'
+      },
+      edit: {
+        title: '编辑合同',
+        contractName: '合同名称',
+        contractNamePlaceholder: '必填，请填写合同名称',
+        contractCode: '合同编号',
+        contractCodePlaceholder: '必填，请填写合同编号',
+        contractType: '合同类型',
+        contractTypePlaceholder: '必填，请选择合同类型',
+        partyA: '甲方',
+        partyAPlaceholder: '必填，请填写甲方',
+        partyB: '乙方',
+        partyBPlaceholder: '必填，请填写乙方',
+        aContacts: '甲方联系人',
+        aContactsPlaceholder: '必填，请填写甲方联系人',
+        bContacts: '乙方联系人',
+        bContactsPlaceholder: '必填，请填写乙方联系人',
+        aLink: '甲方联系电话',
+        aLinkPlaceholder: '必填，请填写甲方联系电话',
+        bLink: '乙方联系电话',
+        bLinkPlaceholder: '必填，请填写乙方联系电话',
+        operator: '经办人',
+        operatorPlaceholder: '必填，请填写经办人',
+        operatorLink: '联系电话',
+        operatorLinkPlaceholder: '必填，请填写联系电话',
+        amount: '合同金额',
+        amountPlaceholder: '选填，请填写合同金额',
+        startTime: '开始时间',
+        startTimePlaceholder: '必填，请填写开始时间',
+        endTime: '结束时间',
+        endTimePlaceholder: '必填，请填写结束时间',
+        signingTime: '签订时间',
+        signingTimePlaceholder: '必填，请填写签订时间',
+        contractFile: '合同附件',
+        addFile: '添加附件',
+        upload: '上传',
+        deleteFile: '删除',
+        fileIndex: '第{index}个'
+      },
+      delete: {
+        title: '请确认您的操作',
+        confirmText: '确定删除合同信息',
+        success: '删除成功',
+        error: '删除失败'
+      },
+      validate: {
+        contractNameRequired: '合同名称不能为空',
+        contractNameMaxLength: '合同名称不能超过200位',
+        contractCodeRequired: '合同编号不能为空',
+        contractCodeMaxLength: '合同编号错误',
+        contractTypeRequired: '合同类型不能为空',
+        partyARequired: '甲方不能为空',
+        partyAMaxLength: '甲方名称太长',
+        partyBRequired: '乙方不能为空',
+        partyBMaxLength: '乙方名称太长',
+        aContactsRequired: '甲方联系人不能为空',
+        aContactsMaxLength: '甲方联系人长度超过64位',
+        bContactsRequired: '乙方联系人不能为空',
+        bContactsMaxLength: '乙方联系人长度超过64位',
+        aLinkRequired: '甲方联系电话不能为空',
+        bLinkRequired: '乙方联系电话不能为空',
+        operatorRequired: '经办人不能为空',
+        operatorMaxLength: '经办人超过64位',
+        operatorLinkRequired: '联系电话不能为空',
+        amountFormat: '合同金额格式错误，如1.50',
+        startTimeRequired: '开始时间不能为空',
+        endTimeRequired: '结束时间不能为空',
+        signingTimeRequired: '签订时间不能为空',
+        fileTypeError: '操作失败，请上传图片、PDF格式的文件'
+      },
+      uploadSuccess: '上传成功',
+      uploadError: '上传失败',
+      updateSuccess: '修改成功',
+      updateError: '修改失败',
+      fetchError: '获取合同数据失败'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="new-contract-manage-container">
+    <!-- 查询条件 -->
+    <el-card class="search-card">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('newContractManage.search.title') }}</span>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-input v-model.trim="searchForm.contractNameLike"
+            :placeholder="$t('newContractManage.search.contractNamePlaceholder')" clearable />
+        </el-col>
+        <el-col :span="6">
+          <el-input v-model.trim="searchForm.contractCode"
+            :placeholder="$t('newContractManage.search.contractCodePlaceholder')" clearable />
+        </el-col>
+        <el-col :span="6">
+          <el-select v-model="searchForm.contractType"
+            :placeholder="$t('newContractManage.search.contractTypePlaceholder')" style="width:100%">
+            <el-option v-for="item in contractTypes" :key="item.contractTypeId" :label="item.typeName"
+              :value="item.contractTypeId" />
+          </el-select>
+        </el-col>
+        <el-col :span="6">
+          <el-button type="primary" @click="handleSearch">
+            <i class="el-icon-search"></i>
+            {{ $t('common.search') }}
+          </el-button>
+          <el-button @click="handleReset">
+            <i class="el-icon-refresh"></i>
+            {{ $t('common.reset') }}
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <!-- 合同列表 -->
+    <el-card class="table-card">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('newContractManage.list.title') }}</span>
+        <el-button type="primary" size="small"  @click="handleAdd">
+          <i class="el-icon-plus"></i>
+          {{ $t('newContractManage.list.draft') }}
+        </el-button>
+      </div>
+
+      <el-table v-loading="loading" :data="tableData" border style="width:100%">
+        <el-table-column prop="contractName" :label="$t('newContractManage.table.contractName')" align="center" />
+        <el-table-column prop="contractCode" :label="$t('newContractManage.table.contractCode')" align="center" />
+        <el-table-column prop="parentContractCode" :label="$t('newContractManage.table.parentContractCode')"
+          align="center">
+          <template slot-scope="scope">
+            {{ scope.row.parentContractCode || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="contractTypeName" :label="$t('newContractManage.table.contractType')" align="center" />
+        <el-table-column prop="operator" :label="$t('newContractManage.table.operator')" align="center" />
+        <el-table-column prop="amount" :label="$t('newContractManage.table.amount')" align="center" />
+        <el-table-column prop="startTime" :label="$t('newContractManage.table.startTime')" align="center" />
+        <el-table-column prop="endTime" :label="$t('newContractManage.table.endTime')" align="center" />
+        <el-table-column prop="stateName" :label="$t('newContractManage.table.state')" align="center" />
+        <el-table-column :label="$t('common.operation')" align="center" width="220">
+          <template slot-scope="scope">
+            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">
+              {{ $t('common.edit') }}
+            </el-button>
+            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
+              {{ $t('common.delete') }}
+            </el-button>
+            <el-button size="mini" @click="handlePrint(scope.row)">
+              {{ $t('common.print') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="note-text">
+        {{ $t('newContractManage.list.note') }}
+      </div>
+
+      <el-pagination :current-page="pagination.current" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.size"
+        :total="pagination.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" />
+    </el-card>
+
+    <!-- 编辑合同组件 -->
+    <edit-contract ref="editContract" @success="fetchData" />
+
+    <!-- 删除合同组件 -->
+    <delete-contract ref="deleteContract" @success="fetchData" />
+  </div>
+</template>
+
+<script>
+import { getContractList, getContractTypeList } from '@/api/contract/newContractManageApi'
+import EditContract from '@/components/contract/editContract'
+import DeleteContract from '@/components/contract/deleteContract'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'NewContractManageList',
+  components: {
+    EditContract,
+    DeleteContract
+  },
+  data() {
+    return {
+      loading: false,
+      searchForm: {
+        contractNameLike: '',
+        contractCode: '',
+        contractType: '',
+        state: ''
+      },
+      tableData: [],
+      contractTypes: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.fetchData()
+    this.fetchContractTypes()
+  },
+  methods: {
+    async fetchData() {
+      try {
+        this.loading = true
+        const params = {
+          page: this.pagination.current,
+          row: this.pagination.size,
+          ...this.searchForm,
+          communityId: this.communityId
+        }
+        const { data, total } = await getContractList(params)
+        this.tableData = data
+        this.pagination.total = total
+      } catch (error) {
+        this.$message.error(this.$t('newContractManage.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    async fetchContractTypes() {
+      try {
+        const params = {
+          page: 1,
+          row: 100
+        }
+        const { data } = await getContractTypeList(params)
+        this.contractTypes = data
+      } catch (error) {
+        console.error('获取合同类型失败:', error)
+      }
+    },
+    handleSearch() {
+      this.pagination.current = 1
+      this.fetchData()
+    },
+    handleReset() {
+      this.searchForm = {
+        contractNameLike: '',
+        contractCode: '',
+        contractType: '',
+        state: ''
+      }
+      this.handleSearch()
+    },
+    handleAdd() {
+      this.$router.push('/views/contract/addContract')
+    },
+    handleEdit(row) {
+      this.$refs.editContract.open(row)
+    },
+    handleDelete(row) {
+      this.$refs.deleteContract.open(row)
+    },
+    handlePrint(row) {
+      window.open(`/#/views/contract/printContract?contractTypeId=${row.contractType}&contractId=${row.contractId}`)
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.fetchData()
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.new-contract-manage-container {
+  padding: 20px;
+
+  .search-card {
+    margin-bottom: 20px;
+  }
+
+  .table-card {
+    margin-bottom: 20px;
+  }
+
+  .note-text {
+    margin: 15px 0;
+    color: #999;
+    font-size: 14px;
+  }
+
+  .el-pagination {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+</style>
 \ No newline at end of file
+export const messages = {
+  en: {
+    printContract: {
+      title: 'Contract Print',
+      print: 'Print',
+      close: 'Close',
+      noTemplate: 'This contract does not have a template set, please set it in the contract template under the contract type'
+    }
+  },
+  zh: {
+    printContract: {
+      title: '合同打印',
+      print: '打印',
+      close: '关闭',
+      noTemplate: '此合同未设置合同模板，请到合同类型下的合同模板中设置'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="print-contract-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <h2>{{ $t('printContract.title') }}</h2>
+      </div>
+
+      <el-row v-if="printContractInfo.context" class="margin-top">
+        <el-col :span="24">
+          <div v-html="printContractInfo.context"></div>
+        </el-col>
+      </el-row>
+
+      <el-row v-else class="margin-top">
+        <el-col :span="24" class="text-center">
+          <div>{{ $t('printContract.noTemplate') }}</div>
+        </el-col>
+      </el-row>
+
+      <div id="print-btn" class="button-group">
+        <el-button 
+          type="primary" 
+          class="float-right" 
+          @click="_printContractDiv"
+        >
+          <i class="el-icon-printer"></i>&nbsp;{{ $t('printContract.print') }}
+        </el-button>
+        <el-button 
+          type="warning" 
+          class="float-right" 
+          style="margin-right:20px;" 
+          @click="_closePage"
+        >
+          {{ $t('printContract.close') }}
+        </el-button>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getPrintContractTemplate } from '@/api/contract/printContractApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'PrintContractList',
+  data() {
+    return {
+      templatecontent: '',
+      contractdata: '',
+      contractTypeSpec: '',
+      baseRepalce: [],
+      attrs: [],
+      printContractInfo: {
+        contractId: '',
+        contractTypeId: '',
+        context: ''
+      },
+      printFlag: '0',
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.printContractInfo.contractTypeId = this.$route.query.contractTypeId
+    this.printContractInfo.contractId = this.$route.query.contractId
+    this._loadContract()
+  },
+  methods: {
+    _loadContract() {
+      const param = {
+        page: 1,
+        row: 1,
+        contractId: this.printContractInfo.contractId,
+        contractTypeId: this.printContractInfo.contractTypeId,
+        communityId: this.communityId
+      }
+
+      getPrintContractTemplate(param)
+        .then(res => {
+          const _data = res.data
+          this.templatecontent = _data.contractTypeTemplate[0].context
+          this.contractdata = _data.contract[0]
+          this.attrs = _data.contract[0].attrs
+          this.contractTypeSpec = _data.contractTypeSpec
+
+          this.contractTypeSpec.forEach(e => {
+            const rname = e.specName
+            const rspecCd = e.specCd
+            this.attrs.forEach(ea => {
+              if (rspecCd === ea.specCd) {
+                const reg = new RegExp('#' + rname + '#', 'g')
+                this.templatecontent = this.templatecontent.replace(reg, ea.value)
+              }
+            })
+          })
+
+          this.baseRepalce = _data.baseRepalce
+          if (this.baseRepalce) {
+            this.baseRepalce.forEach(e => {
+              const rname = e.name
+              const rkey = e.key
+              const contractarr = Object.keys(this.contractdata)
+              for (const a in contractarr) {
+                if (rkey === contractarr[a]) {
+                  const reg = new RegExp('#' + rname + '#', 'g')
+                  this.templatecontent = this.templatecontent.replace(reg, this.contractdata[contractarr[a]])
+                }
+              }
+            })
+          }
+
+          this.printContractInfo.context = this.templatecontent
+        })
+        .catch(error => {
+          console.error('请求失败:', error)
+        })
+    },
+
+    _printContractDiv() {
+      this.printFlag = '1'
+      document.getElementById('print-btn').style.display = 'none'
+      window.print()
+      window.opener = null
+      window.close()
+    },
+
+    _closePage() {
+      window.opener = null
+      window.close()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.print-contract-container {
+  padding: 20px;
+
+  .box-card {
+    margin-bottom: 20px;
+  }
+
+  .margin-top {
+    margin-top: 20px;
+  }
+
+  .text-center {
+    text-align: center;
+  }
+
+  .float-right {
+    float: right;
+  }
+
+  .button-group {
+    margin-top: 20px;
+    overflow: hidden;
+  }
+}
+</style>
 \ No newline at end of file