diff --git a/src/api/owner/ownerApi.js b/src/api/owner/ownerApi.js
new file mode 100644
index 0000000..75eeea7
--- /dev/null
+++ b/src/api/owner/ownerApi.js
@@ -0,0 +1,153 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 查询业主列表
+export function queryOwners(params) {
+  return new Promise((resolve, reject) => {
+    params.communityId = getCommunityId()
+    request({
+      url: '/owner.queryOwners',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code == 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '查询业主列表失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 保存业主
+export function saveOwner(data) {
+  return new Promise((resolve, reject) => {
+    data.communityId = getCommunityId()
+    request({
+      url: '/owner.saveOwner',
+      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 editOwner(data) {
+  return new Promise((resolve, reject) => {
+    data.communityId = getCommunityId()
+    request({
+      url: '/owner.editOwner',
+      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 deleteOwner(data) {
+  return new Promise((resolve, reject) => {
+    data.communityId = getCommunityId()
+    request({
+      url: '/owner.deleteOwner',
+      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 uploadImage(data) {
+  return new Promise((resolve, reject) => {
+    const formData = new FormData()
+    formData.append('uploadFile', data.file)
+    formData.append('communityId', getCommunityId())
+    
+    request({
+      url: 'uploadImage',
+      method: 'post',
+      data: formData,
+      headers: {
+        'Content-Type': 'multipart/form-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 getAttrSpec(specCd) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/attrSpec.listAttrSpecs',
+      method: 'get',
+      params: { specCd, communityId: getCommunityId() }
+    }).then(response => {
+      const res = response.data
+      if (res.code == 0) {
+        resolve(res.data)
+      } else {
+        reject(new Error(res.msg || '获取属性规格失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取属性值
+export function getAttrValue(specCd) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/attrValue.listAttrValues',
+      method: 'get',
+      params: { specCd, communityId: getCommunityId() }
+    }).then(response => {
+      const res = response.data
+      if (res.code == 0) {
+        resolve(res.data)
+      } else {
+        reject(new Error(res.msg || '获取属性值失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/components/owner/addOwner.vue b/src/components/owner/addOwner.vue
new file mode 100644
index 0000000..09a90e3
--- /dev/null
+++ b/src/components/owner/addOwner.vue
@@ -0,0 +1,274 @@
+<template>
+  <el-dialog :title="$t('listOwner.buttons.add')" :visible.sync="visible" width="800px" @close="resetForm">
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('listOwner.columns.type')" prop="personType">
+            <el-select v-model="form.personType" style="width:100%">
+              <el-option v-for="(type, index) in personTypes" :key="index" :label="type.label" :value="type.value" />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item :label="$t('listOwner.columns.role')" prop="personRole">
+            <el-select v-model="form.personRole" style="width:100%">
+              <el-option v-for="role in personRoles" :key="role.value" :label="role.label" :value="role.value" />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item :label="$t('listOwner.columns.name')" prop="name">
+            <el-input v-model="form.name" :placeholder="$t('listOwner.placeholders.name')" />
+          </el-form-item>
+
+          <el-form-item v-if="form.personType === 'C'" :label="$t('listOwner.buttons.member')">
+            <el-input v-model="form.concactPerson" />
+          </el-form-item>
+
+          <el-form-item :label="$t('listOwner.columns.phone')" prop="link">
+            <el-input v-model="form.link" :placeholder="$t('listOwner.placeholders.phone')" />
+          </el-form-item>
+
+          <el-form-item v-if="form.personType === 'P'" :label="$t('listOwner.columns.gender')" prop="sex">
+            <el-select v-model="form.sex" style="width:100%">
+              <el-option v-for="gender in genders" :key="gender.value" :label="gender.label" :value="gender.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12" class="text-center">
+          <el-image style="width: 200px; height: 150px; border: 1px dashed #ccc;"
+            :src="form.ownerPhotoUrl || '/img/noPhoto.jpg'" fit="cover" />
+          <el-upload class="mt-10" :show-file-list="false" :before-upload="beforeUpload" :http-request="uploadImage">
+            <el-button size="small" type="primary">
+              {{ $t('common.upload') }}
+            </el-button>
+          </el-upload>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('listOwner.columns.backupPhone')">
+            <el-input v-model="form.concactLink" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item :label="$t('listOwner.columns.address')">
+            <el-input v-model="form.address" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item v-if="form.personType === 'C'" :label="$t('listOwner.columns.idCard')">
+            <el-input v-model="form.idCard" />
+          </el-form-item>
+
+          <el-form-item v-else :label="$t('listOwner.columns.idCard')">
+            <el-input v-model="form.idCard" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item :label="$t('common.remark')">
+            <el-input v-model="form.remark" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <div v-for="(item, index) in attrs" :key="index">
+        <el-row :gutter="20" v-if="index % 2 === 0">
+          <el-col :span="12">
+            <el-form-item :label="item.specName">
+              <el-input v-if="item.specType === '2233'" v-model="item.value" :placeholder="item.specHoldplace" />
+              <el-select v-else-if="item.specType === '3344'" v-model="item.value" style="width:100%">
+                <el-option v-for="val in item.values" :key="val.value" :label="val.valueName" :value="val.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12" v-if="index < attrs.length - 1">
+            <el-form-item :label="attrs[index + 1].specName">
+              <el-input v-if="attrs[index + 1].specType === '2233'" v-model="attrs[index + 1].value"
+                :placeholder="attrs[index + 1].specHoldplace" />
+              <el-select v-else-if="attrs[index + 1].specType === '3344'" v-model="attrs[index + 1].value"
+                style="width:100%">
+                <el-option v-for="val in attrs[index + 1].values" :key="val.value" :label="val.valueName"
+                  :value="val.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+    </el-form>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('listOwner.buttons.cancel') }}
+      </el-button>
+      <el-button type="primary" @click="saveOwner">
+        {{ $t('listOwner.buttons.save') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { saveOwner, getAttrValue, uploadImage } from '@/api/owner/ownerApi'
+import { getAttrSpecList } from '@/api/dev/attrSpecApi'
+
+export default {
+  name: 'AddOwner',
+  data() {
+    return {
+      visible: false,
+      form: {
+        name: '',
+        link: '',
+        address: '',
+        sex: '0',
+        remark: '',
+        ownerPhoto: '',
+        ownerPhotoUrl: '',
+        idCard: '',
+        personType: 'P',
+        personRole: '1',
+        concactPerson: '',
+        concactLink: ''
+      },
+      attrs: [],
+      personTypes: [
+        { value: 'P', label: this.$t('listOwner.personType.personal') },
+        { value: 'C', label: this.$t('listOwner.personType.company') }
+      ],
+      personRoles: [
+        { value: '1', label: this.$t('listOwner.role.owner') },
+        { value: '2', label: this.$t('listOwner.role.tenant') }
+      ],
+      genders: [
+        { value: '0', label: this.$t('listOwner.gender.male') },
+        { value: '1', label: this.$t('listOwner.gender.female') }
+      ],
+      rules: {
+        name: [
+          { required: true, message: this.$t('listOwner.rules.nameRequired'), trigger: 'blur' },
+          { min: 2, max: 64, message: this.$t('listOwner.rules.nameLength'), trigger: 'blur' }
+        ],
+        personType: [
+          { required: true, message: this.$t('listOwner.rules.typeRequired'), trigger: 'change' }
+        ],
+        personRole: [
+          { required: true, message: this.$t('listOwner.rules.roleRequired'), trigger: 'change' }
+        ],
+        link: [
+          { required: true, message: this.$t('listOwner.rules.phoneRequired'), trigger: 'blur' },
+          { pattern: /^1[3-9]\d{9}$/, message: this.$t('listOwner.rules.phoneFormat'), trigger: 'blur' }
+        ],
+        sex: [
+          { required: true, message: this.$t('listOwner.rules.genderRequired'), trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open() {
+      this.visible = true
+      this.loadAttributes()
+    },
+
+    async loadAttributes() {
+      try {
+        const data = await getAttrSpecList({ page: 1, row: 100, tableName: 'building_owner_attr' })
+        this.attrs = data.filter(item => item.specShow === 'Y')
+
+        for (const attr of this.attrs) {
+          if (attr.specType === '3344') {
+            attr.values = await getAttrValue(attr.specCd)
+            attr.value = ''
+          }
+        }
+      } catch (error) {
+        console.error('Failed to load attributes:', error)
+      }
+    },
+
+    beforeUpload(file) {
+      const isJPG = file.type === 'image/jpeg'
+      const isLt2M = file.size / 1024 / 1024 < 2
+
+      if (!isJPG) {
+        this.$message.error(this.$t('listOwner.upload.jpgOnly'))
+      }
+      if (!isLt2M) {
+        this.$message.error(this.$t('listOwner.upload.sizeLimit'))
+      }
+      return isJPG && isLt2M
+    },
+
+    async uploadImage({ file }) {
+      try {
+        const res = await uploadImage({ file })
+        this.form.ownerPhoto = res.data.fileId
+        this.form.ownerPhotoUrl = res.data.url
+      } catch (error) {
+        this.$message.error(this.$t('listOwner.upload.failed'))
+      }
+    },
+
+    async saveOwner() {
+      this.$refs.form.validate(async valid => {
+        if (!valid) return
+
+        try {
+          const params = {
+            ...this.form,
+            attrs: this.attrs.map(attr => ({
+              specCd: attr.specCd,
+              value: attr.value
+            }))
+          }
+
+          await saveOwner(params)
+          this.$message.success(this.$t('listOwner.saveSuccess'))
+          this.visible = false
+          this.$emit('success')
+        } catch (error) {
+          this.$message.error(this.$t('listOwner.saveFailed'))
+        }
+      })
+    },
+
+    resetForm() {
+      this.$refs.form.resetFields()
+      this.form = {
+        name: '',
+        link: '',
+        address: '',
+        sex: '0',
+        remark: '',
+        ownerPhoto: '',
+        ownerPhotoUrl: '',
+        idCard: '',
+        personType: 'P',
+        personRole: '1',
+        concactPerson: '',
+        concactLink: ''
+      }
+      this.attrs.forEach(attr => {
+        attr.value = ''
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.text-center {
+  text-align: center;
+}
+
+.mt-10 {
+  margin-top: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/owner/deleteOwner.vue b/src/components/owner/deleteOwner.vue
new file mode 100644
index 0000000..849a17b
--- /dev/null
+++ b/src/components/owner/deleteOwner.vue
@@ -0,0 +1,47 @@
+<template>
+  <el-dialog :title="$t('listOwner.buttons.delete')" :visible.sync="visible" width="500px">
+    <p>{{ $t('listOwner.confirmDelete') }}</p>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('listOwner.buttons.cancel') }}
+      </el-button>
+      <el-button type="primary" @click="confirmDelete">
+        {{ $t('common.confirm') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteOwner } from '@/api/owner/ownerApi'
+
+export default {
+  name: 'DeleteOwner',
+  data() {
+    return {
+      visible: false,
+      owner: {}
+    }
+  },
+  methods: {
+    open(owner) {
+      this.owner = { ...owner }
+      this.visible = true
+    },
+
+    async confirmDelete() {
+      try {
+        await deleteOwner({
+          ownerId: this.owner.ownerId
+        })
+        this.$message.success(this.$t('listOwner.deleteSuccess'))
+        this.visible = false
+        this.$emit('success')
+      } catch (error) {
+        this.$message.error(this.$t('listOwner.deleteFailed'))
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/editOwner.vue b/src/components/owner/editOwner.vue
new file mode 100644
index 0000000..08093e7
--- /dev/null
+++ b/src/components/owner/editOwner.vue
@@ -0,0 +1,280 @@
+<template>
+  <el-dialog :title="$t('listOwner.buttons.edit')" :visible.sync="visible" width="800px" @close="resetForm">
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('listOwner.columns.type')" prop="personType">
+            <el-select v-model="form.personType" style="width:100%">
+              <el-option v-for="(type,index) in personTypes" :key="index" :label="type.label" :value="type.value" />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item :label="$t('listOwner.columns.role')" prop="personRole">
+            <el-select v-model="form.personRole" style="width:100%">
+              <el-option v-for="role in personRoles" :key="role.value" :label="role.label" :value="role.value" />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item :label="$t('listOwner.columns.name')" prop="name">
+            <el-input v-model="form.name" :placeholder="$t('listOwner.placeholders.name')" />
+          </el-form-item>
+
+          <el-form-item v-if="form.personType === 'C'" :label="$t('listOwner.buttons.member')">
+            <el-input v-model="form.concactPerson" />
+          </el-form-item>
+
+          <el-form-item :label="$t('listOwner.columns.phone')" prop="link">
+            <el-input v-model="form.link" :placeholder="$t('listOwner.placeholders.phone')" />
+          </el-form-item>
+
+          <el-form-item v-if="form.personType === 'P'" :label="$t('listOwner.columns.gender')" prop="sex">
+            <el-select v-model="form.sex" style="width:100%">
+              <el-option v-for="gender in genders" :key="gender.value" :label="gender.label" :value="gender.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12" class="text-center">
+          <el-image style="width: 200px; height: 150px; border: 1px dashed #ccc;"
+            :src="form.ownerPhotoUrl || '/img/noPhoto.jpg'" fit="cover" />
+          <el-upload class="mt-10" :show-file-list="false" :before-upload="beforeUpload" :http-request="uploadImage">
+            <el-button size="small" type="primary">
+              {{ $t('common.upload') }}
+            </el-button>
+          </el-upload>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('listOwner.columns.backupPhone')">
+            <el-input v-model="form.concactLink" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item :label="$t('listOwner.columns.address')">
+            <el-input v-model="form.address" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item v-if="form.personType === 'C'" :label="$t('listOwner.columns.idCard')">
+            <el-input v-model="form.idCard" />
+          </el-form-item>
+
+          <el-form-item v-else :label="$t('listOwner.columns.idCard')">
+            <el-input v-model="form.idCard" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item :label="$t('common.remark')">
+            <el-input v-model="form.remark" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <div v-for="(item, index) in attrs" :key="index">
+        <el-row :gutter="20" v-if="index % 2 === 0">
+          <el-col :span="12">
+            <el-form-item :label="item.specName">
+              <el-input v-if="item.specType === '2233'" v-model="item.value" :placeholder="item.specHoldplace" />
+              <el-select v-else-if="item.specType === '3344'" v-model="item.value" style="width:100%">
+                <el-option v-for="val in item.values" :key="val.value" :label="val.valueName" :value="val.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12" v-if="index < attrs.length - 1">
+            <el-form-item :label="attrs[index + 1].specName">
+              <el-input v-if="attrs[index + 1].specType === '2233'" v-model="attrs[index + 1].value"
+                :placeholder="attrs[index + 1].specHoldplace" />
+              <el-select v-else-if="attrs[index + 1].specType === '3344'" v-model="attrs[index + 1].value"
+                style="width:100%">
+                <el-option v-for="val in attrs[index + 1].values" :key="val.value" :label="val.valueName"
+                  :value="val.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+    </el-form>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('listOwner.buttons.cancel') }}
+      </el-button>
+      <el-button type="primary" @click="updateOwner">
+        {{ $t('listOwner.buttons.save') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { editOwner, getAttrValue, uploadImage } from '@/api/owner/ownerApi'
+import { getAttrSpecList } from '@/api/dev/attrSpecApi'
+
+export default {
+  name: 'EditOwner',
+  data() {
+    return {
+      visible: false,
+      form: {
+        ownerId: '',
+        name: '',
+        link: '',
+        address: '',
+        sex: '',
+        remark: '',
+        ownerPhoto: '',
+        ownerPhotoUrl: '',
+        idCard: '',
+        personType: 'P',
+        personRole: '1',
+        concactPerson: '',
+        concactLink: ''
+      },
+      attrs: [],
+      personTypes: [
+        { value: 'P', label: this.$t('listOwner.personType.personal') },
+        { value: 'C', label: this.$t('listOwner.personType.company') }
+      ],
+      personRoles: [
+        { value: '1', label: this.$t('listOwner.role.owner') },
+        { value: '2', label: this.$t('listOwner.role.tenant') }
+      ],
+      genders: [
+        { value: '0', label: this.$t('listOwner.gender.male') },
+        { value: '1', label: this.$t('listOwner.gender.female') }
+      ],
+      rules: {
+        name: [
+          { required: true, message: this.$t('listOwner.rules.nameRequired'), trigger: 'blur' },
+          { min: 2, max: 64, message: this.$t('listOwner.rules.nameLength'), trigger: 'blur' }
+        ],
+        personType: [
+          { required: true, message: this.$t('listOwner.rules.typeRequired'), trigger: 'change' }
+        ],
+        personRole: [
+          { required: true, message: this.$t('listOwner.rules.roleRequired'), trigger: 'change' }
+        ],
+        link: [
+          { required: true, message: this.$t('listOwner.rules.phoneRequired'), trigger: 'blur' },
+          { pattern: /^1[3-9]\d{9}$/, message: this.$t('listOwner.rules.phoneFormat'), trigger: 'blur' }
+        ],
+        sex: [
+          { required: true, message: this.$t('listOwner.rules.genderRequired'), trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open(owner) {
+      this.form = { ...owner }
+      this.visible = true
+      this.loadAttributes()
+    },
+
+    async loadAttributes() {
+      try {
+        const data = await getAttrSpecList({ page: 1, row: 100, tableName: 'building_owner_attr'})
+        this.attrs = data.filter(item => item.specShow === 'Y')
+
+        for (const attr of this.attrs) {
+          if (attr.specType === '3344') {
+            attr.values = await getAttrValue(attr.specCd)
+          }
+
+          // 设置已有属性值
+          if (this.form.ownerAttrDtos) {
+            const attrDto = this.form.ownerAttrDtos.find(dto => dto.specCd === attr.specCd)
+            attr.value = attrDto ? attrDto.value : ''
+          }
+        }
+      } catch (error) {
+        console.error('Failed to load attributes:', error)
+      }
+    },
+
+    beforeUpload(file) {
+      const isJPG = file.type === 'image/jpeg'
+      const isLt2M = file.size / 1024 / 1024 < 2
+
+      if (!isJPG) {
+        this.$message.error(this.$t('listOwner.upload.jpgOnly'))
+      }
+      if (!isLt2M) {
+        this.$message.error(this.$t('listOwner.upload.sizeLimit'))
+      }
+      return isJPG && isLt2M
+    },
+
+    async uploadImage({ file }) {
+      try {
+        const res = await uploadImage({ file })
+        this.form.ownerPhoto = res.data.fileId
+        this.form.ownerPhotoUrl = res.data.url
+      } catch (error) {
+        this.$message.error(this.$t('listOwner.upload.failed'))
+      }
+    },
+
+    async updateOwner() {
+      this.$refs.form.validate(async valid => {
+        if (!valid) return
+
+        try {
+          const params = {
+            ...this.form,
+            attrs: this.attrs.map(attr => ({
+              specCd: attr.specCd,
+              value: attr.value
+            }))
+          }
+
+          await editOwner(params)
+          this.$message.success(this.$t('listOwner.updateSuccess'))
+          this.visible = false
+          this.$emit('success')
+        } catch (error) {
+          this.$message.error(this.$t('listOwner.updateFailed'))
+        }
+      })
+    },
+
+    resetForm() {
+      this.$refs.form.resetFields()
+      this.form = {
+        ownerId: '',
+        name: '',
+        link: '',
+        address: '',
+        sex: '',
+        remark: '',
+        ownerPhoto: '',
+        ownerPhotoUrl: '',
+        idCard: '',
+        personType: 'P',
+        personRole: '1',
+        concactPerson: '',
+        concactLink: ''
+      }
+      this.attrs = []
+    }
+  }
+}
+</script>
+
+<style scoped>
+.text-center {
+  text-align: center;
+}
+
+.mt-10 {
+  margin-top: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/room/searchRoom.vue b/src/components/room/searchRoom.vue
new file mode 100644
index 0000000..1d5cd12
--- /dev/null
+++ b/src/components/room/searchRoom.vue
@@ -0,0 +1,184 @@
+<template>
+  <el-dialog :title="$t('searchRoom.title')" :visible.sync="dialogVisible" width="70%" @close="handleClose">
+    <div class="ibox">
+      <el-row v-if="showSearchCondition">
+        <el-col :span="8">
+          <el-input :placeholder="$t('searchRoom.floorNumPlaceholder')" :readonly="floorNumInputReadonly"
+            v-model.trim="currentFloorNum" clearable />
+        </el-col>
+        <el-col :span="8" :offset="1">
+          <el-input :placeholder="$t('searchRoom.roomNumPlaceholder')" v-model.trim="currentRoomNum" clearable />
+        </el-col>
+        <el-col :span="6" :offset="1">
+          <el-button type="primary" @click="searchRooms">
+            <i class="el-icon-search"></i>
+            {{ $t('searchRoom.search') }}
+          </el-button>
+          <el-button type="primary" @click="resetRooms">
+            <i class="el-icon-refresh"></i>
+            {{ $t('searchRoom.reset') }}
+          </el-button>
+        </el-col>
+      </el-row>
+
+      <el-table :data="rooms" style="width: 100%; margin-top: 15px" border stripe>
+        <el-table-column prop="roomId" :label="$t('searchRoom.roomId')" align="center" />
+        <el-table-column prop="floorNum" :label="$t('searchRoom.floorNum')" align="center">
+          <template #default="{ row }">
+            {{ row.floorNum }}{{ $t('searchRoom.building') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="unitNum" :label="$t('searchRoom.unitNum')" align="center">
+          <template #default="{ row }">
+            {{ row.unitNum }}{{ $t('searchRoom.unit') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="roomNum" :label="$t('searchRoom.roomNum')" align="center">
+          <template #default="{ row }">
+            {{ row.roomNum }}{{ $t('searchRoom.room') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="layer" :label="$t('searchRoom.layer')" align="center">
+          <template #default="{ row }">
+            {{ row.layer }}{{ $t('searchRoom.floor') }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('searchRoom.operation')" align="center" width="120">
+          <template #default="{ row }">
+            <el-button type="primary" size="mini" @click="chooseRoom(row)">
+              {{ $t('searchRoom.choose') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+        :current-page="pagination.currentPage" :page-sizes="[10, 15, 20, 30]" :page-size="pagination.pageSize"
+        layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" style="margin-top: 15px" />
+    </div>
+  </el-dialog>
+</template>
+  
+<script>
+import { queryRooms, queryRoomsWithSell, queryRoomsWithOutSell } from '@/api/room/roomApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'SearchRoom',
+  props: {
+    roomFlag: {
+      type: String,
+      default: ''
+    },
+    showSearchCondition: {
+      type: String,
+      default: 'true'
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      rooms: [],
+      currentRoomNum: '',
+      currentFloorNum: '',
+      floorNumInputReadonly: false,
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  computed: {
+    isShowSearchCondition() {
+      return this.showSearchCondition === 'true'
+    }
+  },
+  methods: {
+    open() {
+      this.dialogVisible = true
+      this.refreshSearchRoomData()
+      this.loadAllRoomInfo()
+    },
+    handleClose() {
+      this.dialogVisible = false
+    },
+    async loadAllRoomInfo() {
+      try {
+        const params = {
+          page: this.pagination.currentPage,
+          row: this.pagination.pageSize,
+          communityId: getCommunityId(),
+          roomNum: this.currentRoomNum,
+          floorNum: this.currentFloorNum,
+          roomFlag: this.roomFlag
+        }
+
+        let response
+        if (this.roomFlag === '1') {
+          response = await queryRoomsWithSell(params)
+        } else if (this.roomFlag === '2') {
+          response = await queryRoomsWithOutSell(params)
+        } else {
+          response = await queryRooms(params)
+        }
+
+        this.rooms = response.rooms || []
+        this.pagination.total = response.records || 0
+      } catch (error) {
+        console.error('Failed to load room info:', error)
+        this.$message.error(this.$t('searchRoom.loadFailed'))
+      }
+    },
+    chooseRoom(room) {
+      this.$emit('chooseRoom', room)
+      this.$emit('load-data', { roomId: room.roomId })
+      this.dialogVisible = false
+    },
+    searchRooms() {
+      this.pagination.currentPage = 1
+      this.loadAllRoomInfo()
+    },
+    resetRooms() {
+      this.currentFloorNum = ''
+      this.currentRoomNum = ''
+      this.pagination.currentPage = 1
+      this.loadAllRoomInfo()
+    },
+    refreshSearchRoomData() {
+      this.currentRoomNum = ''
+    },
+    handleSizeChange(val) {
+      this.pagination.pageSize = val
+      this.loadAllRoomInfo()
+    },
+    handleCurrentChange(val) {
+      this.pagination.currentPage = val
+      this.loadAllRoomInfo()
+    },
+    listenerFloorInfo(floorInfo) {
+      this.currentFloorNum = floorInfo.floorNum
+      this.floorNumInputReadonly = true
+      this.searchRooms()
+    },
+    showOwnerRooms(rooms) {
+      this.dialogVisible = true
+      this.rooms = rooms
+    }
+  },
+  mounted() {
+    this.$on('listener-floor-info', this.listenerFloorInfo)
+    this.$on('show-owner-rooms', this.showOwnerRooms)
+  },
+  beforeDestroy() {
+    this.$off('listener-floor-info', this.listenerFloorInfo)
+    this.$off('show-owner-rooms', this.showOwnerRooms)
+  }
+}
+</script>
+  
+<style scoped>
+.el-input {
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/i18n/commonLang.js b/src/i18n/commonLang.js
index 47602af..26df550 100644
--- a/src/i18n/commonLang.js
+++ b/src/i18n/commonLang.js
@@ -40,6 +40,7 @@ export const messages = {
         enabled: 'Enabled',
         disabled: 'Disabled',
         import: 'Import',
+        remark: 'Remark',
       }
     },
     zh: {
@@ -83,6 +84,7 @@ export const messages = {
         enabled: '启用',
         disabled: '禁用',
         import: '导入',
+        remark: '备注',
       }
     }
   } 
\ No newline at end of file
diff --git a/src/i18n/index.js b/src/i18n/index.js
index ae90d3c..36e2aa8 100644
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -127,6 +127,7 @@ import { messages as addRoomViewMessages } from '../views/room/addRoomViewLang'
 import { messages as roomBindOwnerMessages } from '../views/owner/roomBindOwnerLang'
 import { messages as deleteOwnerRoomMessages } from '../views/owner/deleteOwnerRoomLang'
 import { messages as shopsMessages } from '../views/room/shopsLang'
+import { messages as listOwnerMessages } from '../views/owner/listOwnerLang'
 
 Vue.use(VueI18n)
 
@@ -258,6 +259,7 @@ const messages = {
     ...roomBindOwnerMessages.en,
     ...deleteOwnerRoomMessages.en,
     ...shopsMessages.en,
+    ...listOwnerMessages.en,
   },
   zh: {
     ...loginMessages.zh,
@@ -385,6 +387,7 @@ const messages = {
     ...roomBindOwnerMessages.zh,
     ...deleteOwnerRoomMessages.zh,
     ...shopsMessages.zh,
+    ...listOwnerMessages.zh,
   }
 }
 
diff --git a/src/router/index.js b/src/router/index.js
index 4ae20da..295edd5 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -621,6 +621,17 @@ const routes = [
         name: '/pages/property/shops',
         component: () => import('@/views/room/shopsList.vue')
       },
+      {
+        path: '/pages/property/listOwner',
+        name: '/pages/property/listOwner',
+        component: () => import('@/views/owner/listOwner.vue')
+      },
+      {
+        path: '/views/owner/ownerBindRoom',
+        name: '/views/owner/ownerBindRoom',
+        component: () => import('@/views/owner/ownerBindRoom.vue')
+      },
+
       // 其他子路由可以在这里添加
     ]
   },
diff --git a/src/views/owner/listOwner.vue b/src/views/owner/listOwner.vue
new file mode 100644
index 0000000..39e2b0a
--- /dev/null
+++ b/src/views/owner/listOwner.vue
@@ -0,0 +1,468 @@
+<template>
+  <div class="list-owner-container">
+    <el-row :gutter="20">
+      <el-col :span="3">
+        <el-card class="role-card">
+          <ul class="role-list">
+            <li v-for="(item, index) in personRoles" :key="index" class="role-item"
+              :class="{ 'role-item-active': conditions.personRole === item.statusCd }" @click="switchPersonRole(item)">
+              {{ item.name }}
+            </li>
+          </ul>
+        </el-card>
+      </el-col>
+
+      <el-col :span="21">
+        <el-card class="search-card">
+          <div slot="header" class="text-left">
+            <span>{{ $t('listOwner.searchTitle') }}</span>
+          </div>
+          <el-form :model="conditions" label-width="0">
+            <el-row :gutter="20">
+              <el-col :span="4">
+                <el-form-item>
+                  <el-select v-model="conditions.personType" :placeholder="$t('listOwner.personTypeName')" style="width:100%">
+                    <el-option v-for="(type,index) in personTypes" :key="index" :label="type.label" :value="type.value" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+
+              <el-col :span="4">
+                <el-form-item>
+                  <el-input v-model="conditions.name" :placeholder="$t('listOwner.placeholders.name')" />
+                </el-form-item>
+              </el-col>
+
+              <el-col :span="4">
+                <el-form-item>
+                  <el-input v-model="conditions.roomName" :placeholder="$t('listOwner.placeholders.room')" />
+                </el-form-item>
+              </el-col>
+
+              <el-col :span="4">
+                <el-form-item>
+                  <el-input v-model="conditions.link" :placeholder="$t('listOwner.placeholders.phone')" type="number" />
+                </el-form-item>
+              </el-col>
+
+              <el-col :span="4">
+                <el-form-item>
+                  <el-input v-model="conditions.idCard" :placeholder="$t('listOwner.placeholders.idCard')" />
+                </el-form-item>
+              </el-col>
+
+              <el-col :span="4">
+                <el-form-item>
+                  <el-button type="primary" @click="queryOwnerMethod">
+                    {{ $t('listOwner.buttons.search') }}
+                  </el-button>
+                  <el-button @click="resetOwnerMethod">
+                    {{ $t('listOwner.buttons.reset') }}
+                  </el-button>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </el-card>
+
+        <el-card class="owner-card">
+          <div slot="header" class="clearfix flex justify-between">
+            <span>{{ $t('listOwner.ownerInfo') }}</span>
+            <el-button type="primary" size="small" class="float-right" @click="openAddOwnerModal">
+              {{ $t('listOwner.buttons.add') }}
+            </el-button>
+          </div>
+
+          <el-table :data="owners" border v-loading="loading" style="width:100%">
+            <el-table-column :label="$t('listOwner.columns.face')" width="80" align="center">
+              <template slot-scope="scope">
+                <el-image style="width:60px;height:60px;border-radius:5px;cursor:pointer;"
+                  :src="scope.row.faceUrl || '/img/noPhoto.jpg'" :preview-src-list="[scope.row.faceUrl]" fit="cover" />
+              </template>
+            </el-table-column>
+
+            <el-table-column :label="$t('listOwner.columns.name')" align="center">
+              <template slot-scope="scope">
+                <div>{{ scope.row.name }}</div>
+                <div v-if="scope.row.personType === 'C'">{{ scope.row.concactPerson }}</div>
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="personTypeName" :label="$t('listOwner.columns.type')" align="center" />
+
+            <el-table-column prop="personRoleName" :label="$t('listOwner.columns.role')" align="center" />
+
+            <el-table-column :label="$t('listOwner.columns.gender')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.sex === 0 ? $t('listOwner.gender.male') : $t('listOwner.gender.female') }}
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="idCard" :label="$t('listOwner.columns.idCard')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.idCard || '-' }}
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="link" :label="$t('listOwner.columns.phone')" align="center" />
+
+            <el-table-column prop="concactLink" :label="$t('listOwner.columns.backupPhone')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.concactLink || '-' }}
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="address" :label="$t('listOwner.columns.address')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.address || '-' }}
+              </template>
+            </el-table-column>
+
+            <el-table-column :label="$t('listOwner.columns.rooms')" align="center">
+              <template slot-scope="scope">
+                <el-link type="primary" @click="viewOwnerRooms(scope.row)">
+                  {{ scope.row.roomCount || 0 }}
+                </el-link>
+              </template>
+            </el-table-column>
+
+            <el-table-column :label="$t('listOwner.columns.members')" align="center">
+              <template slot-scope="scope">
+                <el-link v-if="scope.row.ownerTypeCd === '1001'" type="primary" @click="viewOwnerMembers(scope.row)">
+                  {{ scope.row.memberCount || 0 }}
+                </el-link>
+                <span v-else>-</span>
+              </template>
+            </el-table-column>
+
+            <el-table-column :label="$t('listOwner.columns.cars')" align="center">
+              <template slot-scope="scope">
+                <el-link type="primary" @click="viewOwnerCars(scope.row)">
+                  {{ scope.row.carCount || 0 }}
+                </el-link>
+              </template>
+            </el-table-column>
+
+            <el-table-column :label="$t('listOwner.columns.debts')" align="center">
+              <template slot-scope="scope">
+                <el-link type="primary" @click="viewOweFees(scope.row)">
+                  {{ scope.row.oweFee || '0.00' }}
+                </el-link>
+              </template>
+            </el-table-column>
+
+            <el-table-column v-for="(item, index) in listColumns" :key="index" :label="item" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.listValues[index] || '-' }}
+              </template>
+            </el-table-column>
+
+            <el-table-column :label="$t('listOwner.columns.operation')" width="300" align="center" fixed="right">
+              <template slot-scope="scope">
+                <el-dropdown>
+                  <el-button type="primary" size="mini">
+                    {{ $t('listOwner.buttons.edit') }}
+                  </el-button>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item @click.native="openEditOwnerModal(scope.row)">
+                      {{ $t('listOwner.actions.editOwner') }}
+                    </el-dropdown-item>
+                    <el-dropdown-item @click.native="openDeleteOwnerModal(scope.row)">
+                      {{ $t('listOwner.actions.deleteOwner') }}
+                    </el-dropdown-item>
+                    <el-dropdown-item @click.native="openAddOwnerRoom(scope.row)">
+                      {{ $t('listOwner.actions.addRoom') }}
+                    </el-dropdown-item>
+                    <el-dropdown-item @click.native="openDeleteOwnerRoom(scope.row)">
+                      {{ $t('listOwner.buttons.unbindRoom') }}
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+
+                <el-button v-if="scope.row.ownerTypeCd === '1001'" type="info" size="mini"
+                  @click="openOwnerDetailMember(scope.row)">
+                  {{ $t('listOwner.buttons.member') }}
+                </el-button>
+
+                <el-button type="info" size="mini" @click="openOwnerDetail(scope.row)">
+                  {{ $t('listOwner.buttons.detail') }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <el-pagination :current-page.sync="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="pageSize"
+            :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+            @current-change="handlePageChange" />
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <add-owner ref="addOwner" @success="handleOwnerSuccess" />
+    <edit-owner ref="editOwner" @success="handleOwnerSuccess" />
+    <delete-owner ref="deleteOwner" @success="handleOwnerSuccess" />
+    <owner-rooms ref="ownerRooms" />
+    <owner-members ref="ownerMembers" />
+    <owner-cars ref="ownerCars" />
+    <owner-owe-fees ref="ownerOweFees" />
+
+  </div>
+</template>
+
+<script>
+import { queryOwners } from '@/api/owner/ownerApi'
+import AddOwner from '@/components/owner/addOwner'
+import EditOwner from '@/components/owner/editOwner'
+import DeleteOwner from '@/components/owner/deleteOwner'
+import { getAttrSpecList } from '@/api/dev/attrSpecApi'
+import OwnerRooms from '@/components/owner/ownerRooms'
+import OwnerMembers from '@/components/owner/ownerMembers'
+import OwnerCars from '@/components/owner/ownerCars'
+import OwnerOweFees from '@/components/owner/ownerOweFees'
+
+
+export default {
+  name: 'ListOwner',
+  components: {
+    AddOwner,
+    EditOwner,
+    DeleteOwner,
+    OwnerRooms,
+    OwnerMembers,
+    OwnerCars,
+    OwnerOweFees
+  },
+  data() {
+    return {
+      loading: false,
+      owners: [],
+      personRoles: [],
+      personTypes: [
+        { value: '', label: this.$t('common.select') },
+        { value: 'P', label: this.$t('listOwner.personType.personal') },
+        { value: 'C', label: this.$t('listOwner.personType.company') }
+      ],
+      conditions: {
+        personRole: '',
+        name: '',
+        roomName: '',
+        link: '',
+        idCard: '',
+        personType: ''
+      },
+      listColumns: [],
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  created() {
+    this.getPersonRoles()
+    this.getColumns()
+    this.listOwnerData()
+  },
+  methods: {
+    async getPersonRoles() {
+      this.personRoles = [
+        { statusCd: '', name: this.$t('listOwner.role.all') },
+        { statusCd: '1', name: this.$t('listOwner.role.owner') },
+        { statusCd: '2', name: this.$t('listOwner.role.tenant') }
+      ]
+    },
+
+    async getColumns() {
+      try {
+        const data = await getAttrSpecList({
+          page: 1,
+          row: 100,
+          tableName:'building_owner_attr'})
+        this.listColumns = data
+          .filter(item => item.specShow === 'Y')
+          .map(item => item.specName)
+      } catch (error) {
+        console.error('Failed to get columns:', error)
+      }
+    },
+
+    async listOwnerData() {
+      this.loading = true
+      try {
+        const params = {
+          ...this.conditions,
+          page: this.currentPage,
+          row: this.pageSize
+        }
+        const { data, records } = await queryOwners(params)
+        this.owners = data
+        this.total = records
+        this.dealOwnerAttr(data)
+      } catch (error) {
+        console.error('Failed to get owner list:', error)
+        this.$message.error(this.$t('listOwner.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+
+    dealOwnerAttr(owners) {
+      owners.forEach(owner => {
+        owner.listValues = []
+        if (!owner.ownerAttrDtos || owner.ownerAttrDtos.length === 0) return
+
+        this.listColumns.forEach(column => {
+          const attr = owner.ownerAttrDtos.find(dto => dto.specName === column)
+          owner.listValues.push(attr ? attr.valueName : '')
+        })
+      })
+    },
+
+    switchPersonRole(item) {
+      this.conditions.personRole = item.statusCd
+      this.listOwnerData()
+    },
+
+    queryOwnerMethod() {
+      this.currentPage = 1
+      this.listOwnerData()
+    },
+
+    resetOwnerMethod() {
+      this.conditions = {
+        personRole: '',
+        name: '',
+        roomName: '',
+        link: '',
+        idCard: '',
+        personType: ''
+      }
+      this.listOwnerData()
+    },
+
+    handleSizeChange(size) {
+      this.pageSize = size
+      this.listOwnerData()
+    },
+
+    handlePageChange(page) {
+      this.currentPage = page
+      this.listOwnerData()
+    },
+
+    openAddOwnerModal() {
+      this.$refs.addOwner.open()
+    },
+
+    openEditOwnerModal(owner) {
+      this.$refs.editOwner.open(owner)
+    },
+
+    openDeleteOwnerModal(owner) {
+      this.$refs.deleteOwner.open(owner)
+    },
+
+    handleOwnerSuccess() {
+      this.listOwnerData()
+    },
+
+    viewOwnerRooms(owner) {
+      console.log('View owner rooms:', owner)
+      // 实际项目中跳转到房屋页面
+      this.$refs.ownerRooms.open(owner)
+
+    },
+
+    viewOwnerMembers(owner) {
+      console.log('View owner members:', owner)
+      // 实际项目中跳转到成员页面
+      this.$refs.ownerMembers.open(owner.ownerId)
+
+    },
+
+    viewOwnerCars(owner) {
+      console.log('View owner cars:', owner)
+      // 实际项目中跳转到车辆页面
+      this.$refs.ownerCars.open(owner.ownerId)
+
+    },
+
+    viewOweFees(owner) {
+      console.log('View owe fees:', owner)
+      // 实际项目中跳转到欠费页面
+      this.$refs.ownerOweFees.open(owner.ownerId)
+
+    },
+
+    openAddOwnerRoom(owner) {
+      console.log('Add owner room:', owner)
+      // 实际项目中跳转到绑定房屋页面
+      this.$router.push(`/views/owner/ownerBindRoom?ownerId=${owner.ownerId}`)
+
+    },
+
+    openDeleteOwnerRoom(owner) {
+      console.log('Delete owner room:', owner)
+      // 实际项目中跳转到解绑房屋页面
+      this.$router.push(`/views/owner/deleteOwnerRoom?ownerId=${owner.ownerId}`)
+
+    },
+
+    openOwnerDetail(owner) {
+      console.log('Owner detail:', owner)
+      // 实际项目中跳转到详情页面
+    },
+
+    openOwnerDetailMember(owner) {
+      console.log('Owner detail member:', owner)
+      // 实际项目中跳转到成员详情页面
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+.list-owner-container {
+  padding: 20px;
+}
+
+.role-card {
+  height: 100%;
+}
+
+.role-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.role-item {
+  padding: 10px;
+  text-align: center;
+  cursor: pointer;
+  border-radius: 4px;
+  margin-bottom: 5px;
+  transition: all 0.3s;
+}
+
+.role-item:hover {
+  background-color: #f5f7fa;
+}
+
+.role-item-active {
+  background-color: #409eff;
+  color: white;
+}
+
+.search-card,
+.owner-card {
+  margin-bottom: 20px;
+}
+
+.float-right {
+  float: right;
+}
+
+.el-dropdown {
+  margin-right: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/owner/listOwnerLang.js b/src/views/owner/listOwnerLang.js
new file mode 100644
index 0000000..128a7c3
--- /dev/null
+++ b/src/views/owner/listOwnerLang.js
@@ -0,0 +1,128 @@
+export const messages = {
+  en: {
+    listOwner: {
+      title: 'Owner Management',
+      searchTitle: 'Search Conditions',
+      ownerInfo: 'Owner Information',
+      selectRoom: 'Select Room',
+      role: {
+        all: 'All',
+        owner: 'Owner',
+        tenant: 'Tenant'
+      },
+      personType: {
+        personal: 'Personal',
+        company: 'Company'
+      },
+      personTypeName:'Person Type',
+      gender: {
+        male: 'Male',
+        female: 'Female'
+      },
+      columns: {
+        face: 'Face',
+        name: 'Name',
+        type: 'Type',
+        role: 'Role',
+        gender: 'Gender',
+        idCard: 'ID Card',
+        phone: 'Phone',
+        backupPhone: 'Backup Phone',
+        address: 'Address',
+        rooms: 'Rooms',
+        members: 'Members',
+        cars: 'Cars',
+        debts: 'Debts',
+        operation: 'Operation'
+      },
+      placeholders: {
+        name: 'Please enter name',
+        room: 'Building-Unit-Room',
+        phone: 'Please enter phone',
+        idCard: 'Please enter ID card'
+      },
+      buttons: {
+        search: 'Search',
+        reset: 'Reset',
+        add: 'Add',
+        save: 'Save',
+        cancel: 'Cancel',
+        edit: 'Edit',
+        delete: 'Delete',
+        bindRoom: 'Bind Room',
+        unbindRoom: 'Unbind Room',
+        member: 'Member',
+        detail: 'Detail'
+      },
+      actions: {
+        editOwner: 'Edit Owner',
+        deleteOwner: 'Delete Owner',
+        addRoom: 'Add Room'
+      },
+      confirmDelete: 'Are you sure to delete?'
+    }
+  },
+  zh: {
+    listOwner: {
+      title: '业主管理',
+      searchTitle: '查询条件',
+      ownerInfo: '业主信息',
+      selectRoom: '选择房屋',
+      role: {
+        all: '全部',
+        owner: '业主',
+        tenant: '租客'
+      },
+      personType: {
+        personal: '个人',
+        company: '公司'
+      },
+      personTypeName:'人员类型',
+      gender: {
+        male: '男',
+        female: '女'
+      },
+      columns: {
+        face: '人脸',
+        name: '客户名称',
+        type: '人员类型',
+        role: '人员角色',
+        gender: '性别',
+        idCard: '证件号',
+        phone: '联系手机',
+        backupPhone: '备用手机',
+        address: '地址',
+        rooms: '房屋数',
+        members: '业主成员',
+        cars: '车辆数',
+        debts: '欠费',
+        operation: '操作'
+      },
+      placeholders: {
+        name: '请输入客户名称',
+        room: '楼栋-单元-房屋',
+        phone: '请输入联系方式',
+        idCard: '请输入业主身份证号'
+      },
+      buttons: {
+        search: '查询',
+        reset: '重置',
+        add: '添加',
+        save: '保存',
+        cancel: '取消',
+        edit: '修改',
+        delete: '删除',
+        bindRoom: '入住房屋',
+        unbindRoom: '房屋解绑',
+        member: '成员',
+        detail: '详情'
+      },
+      actions: {
+        editOwner: '修改业主',
+        deleteOwner: '删除业主',
+        addRoom: '入住房屋'
+      },
+      confirmDelete: '确认是否删除！'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/owner/ownerBindRoom.vue b/src/views/owner/ownerBindRoom.vue
new file mode 100644
index 0000000..8039451
--- /dev/null
+++ b/src/views/owner/ownerBindRoom.vue
@@ -0,0 +1,193 @@
+<template>
+    <div class="room-bind-owner-container">
+        <el-card class="box-card">
+            <div slot="header" class="flex justify-between">
+                <div>{{ $t('roomBindOwner.title') }}</div>
+                <div class="header-tools">
+                    <el-button type="primary" size="small" icon="el-icon-close" @click="_goBack">
+                        {{ $t('common.back') }}
+                    </el-button>
+                </div>
+            </div>
+
+            <el-row>
+                <el-col :span="24">
+                    <el-form label-width="120px">
+                        <el-form-item :label="$t('roomBindOwner.owner')">
+                            <el-input v-model.trim="roomBindOwnerInfo.ownerName"
+                                :placeholder="$t('roomBindOwner.ownerPlaceholder')" disabled />
+                        </el-form-item>
+                        <el-form-item :label="$t('roomBindOwner.room')">
+                            <el-col :span="18">
+                                <el-input v-model.trim="roomBindOwnerInfo.roomName"
+                                    :placeholder="$t('roomBindOwner.roomPlaceholder')" disabled />
+                            </el-col>
+                            <el-col :span="4" :offset="1">
+                                <el-button type="primary" size="small" icon="el-icon-plus" @click="_openChooseRoom">
+                                    {{ $t('listOwner.selectRoom') }}
+                                </el-button>
+                            </el-col>
+                        </el-form-item>
+
+
+
+                        <el-form-item :label="$t('roomBindOwner.startTime')">
+                            <el-date-picker v-model="roomBindOwnerInfo.startTime" type="date"
+                                :placeholder="$t('roomBindOwner.startTimePlaceholder')" value-format="yyyy-MM-dd"
+                                class="addStartTime" />
+                        </el-form-item>
+
+                        <el-form-item :label="$t('roomBindOwner.endTime')">
+                            <el-date-picker v-model="roomBindOwnerInfo.endTime" type="date"
+                                :placeholder="$t('roomBindOwner.endTimePlaceholder')" value-format="yyyy-MM-dd"
+                                class="addEndTime" />
+                        </el-form-item>
+                    </el-form>
+                </el-col>
+            </el-row>
+        </el-card>
+
+        <el-row>
+            <el-col :span="24" class="text-right" style="margin-top: 20px;">
+                <el-button type="primary" icon="el-icon-check" @click="saveRoomBindOwnerInfo">
+                    {{ $t('common.submit') }}
+                </el-button>
+            </el-col>
+        </el-row>
+
+        <search-room ref="searchRoomRef" :roomFlag="2" @chooseRoom="handleChooseRoom" />
+    </div>
+</template>
+  
+<script>
+import { sellRoom } from '@/api/owner/roomBindOwnerApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import searchRoom from '@/components/room/searchRoom'
+import { getDateYYYYMMDD } from '@/utils/dateUtil'
+import { queryOwners } from '@/api/owner/ownerApi'
+
+export default {
+    name: 'RoomBindOwnerList',
+    components: {
+        searchRoom
+    },
+    data() {
+        return {
+            roomBindOwnerInfo: {
+                roomId: '',
+                roomName: '',
+                ownerId: '',
+                ownerName: '',
+                state: '2001',
+                startTime: '',
+                endTime: '2099-01-01',
+            },
+            communityId: ''
+        }
+    },
+    created() {
+        this.communityId = getCommunityId()
+        this.roomBindOwnerInfo.startTime = getDateYYYYMMDD()
+        this.initData()
+    },
+    methods: {
+        initData() {
+            const ownerId = this.$route.query.ownerId
+            if (ownerId) {
+                this.roomBindOwnerInfo.ownerId = ownerId
+                this.listOwner(ownerId)
+            }
+        },
+        async listOwner(ownerId) {
+            try {
+                const params = {
+                    page: 1,
+                    row: 1,
+                    memberId: ownerId,
+                    communityId: this.communityId
+                }
+                const { data } = await queryOwners(params)
+                this.roomBindOwnerInfo.ownerName = data[0].name
+            } catch (error) {
+                this.$message.error(this.$t('roomBindOwner.fetchRoomError'))
+            }
+        },
+        handleChooseRoom(room) {
+            this.roomBindOwnerInfo.roomName = room.roomName
+            this.roomBindOwnerInfo.roomId = room.roomId
+        },
+        _openChooseRoom() {
+            this.$refs.searchRoomRef.open()
+        },
+        _goBack() {
+            this.$router.go(-1)
+        },
+        roomBindOwnerValidate() {
+            const rules = {
+                ownerId: { required: true, message: this.$t('roomBindOwner.ownerRequired') },
+                roomId: { required: true, message: this.$t('roomBindOwner.roomRequired') },
+                startTime: { required: true, message: this.$t('roomBindOwner.startTimeRequired') },
+                endTime: { required: true, message: this.$t('roomBindOwner.endTimeRequired') }
+            }
+
+            const errors = []
+            Object.keys(rules).forEach(key => {
+                if (!this.roomBindOwnerInfo[key]) {
+                    errors.push(rules[key].message)
+                }
+            })
+
+            if (errors.length > 0) {
+                this.$message.error(errors[0])
+                return false
+            }
+
+            const start = new Date(this.roomBindOwnerInfo.startTime)
+            const end = new Date(this.roomBindOwnerInfo.endTime)
+            if (start >= end) {
+                this.$message.error(this.$t('roomBindOwner.timeError'))
+                return false
+            }
+
+            return true
+        },
+        async saveRoomBindOwnerInfo() {
+            if (!this.roomBindOwnerValidate()) return
+
+            try {
+                const data = {
+                    ...this.roomBindOwnerInfo,
+                    communityId: this.communityId
+                }
+
+                const res = await sellRoom(data)
+                if (res.code === 0) {
+                    this.$message.success(this.$t('common.submitSuccess'))
+                    this._goBack()
+                } else {
+                    this.$message.error(res.msg || this.$t('common.submitFailed'))
+                }
+            } catch (error) {
+                this.$message.error(this.$t('common.requestError'))
+            }
+        }
+    }
+}
+</script>
+  
+<style scoped>
+.room-bind-owner-container {
+    padding: 20px;
+}
+
+.header-tools {}
+
+.text-right {
+    text-align: right;
+}
+
+.addStartTime,
+.addEndTime {
+    width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/owner/roomBindOwnerList.vue b/src/views/owner/roomBindOwnerList.vue
index da36285..4aa3dca 100644
--- a/src/views/owner/roomBindOwnerList.vue
+++ b/src/views/owner/roomBindOwnerList.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="room-bind-owner-container">
     <el-card class="box-card">
-      <div slot="header" class="clearfix">
-        <h5>{{ $t('roomBindOwner.title') }}</h5>
+      <div slot="header" class="flex justify-between" >
+        <div>{{ $t('roomBindOwner.title') }}</div>
         <div class="header-tools">
           <el-button type="primary" size="small" icon="el-icon-close" @click="_goBack">
             {{ $t('common.back') }}
@@ -179,9 +179,7 @@ export default {
 }
 
 .header-tools {
-  position: absolute;
-  top: 20px;
-  right: 20px;
+ 
 }
 
 .text-right {
diff --git a/src/views/room/roomLang.js b/src/views/room/roomLang.js
index 1d584bf..a91564b 100644
--- a/src/views/room/roomLang.js
+++ b/src/views/room/roomLang.js
@@ -359,6 +359,25 @@ export const messages = {
       successMessage: 'Unit deleted successfully',
       errorMessage: 'Failed to delete unit'
     },
+    searchRoom: {
+      title: 'Select Room',
+      floorNumPlaceholder: 'Enter building number',
+      roomNumPlaceholder: 'Enter room number',
+      search: 'Search',
+      reset: 'Reset',
+      roomId: 'Room ID',
+      floorNum: 'Building Number',
+      unitNum: 'Unit Number',
+      roomNum: 'Room Number',
+      layer: 'Floor',
+      operation: 'Operation',
+      choose: 'Choose',
+      building: 'Building',
+      unit: 'Unit',
+      room: 'Room',
+      floor: 'Floor',
+      loadFailed: 'Failed to load room information'
+    }
   },
   zh: {
     roomList: {
@@ -720,5 +739,24 @@ export const messages = {
       successMessage: '单元删除成功',
       errorMessage: '删除单元失败'
     },
+    searchRoom: {
+      title: '选择房屋',
+      floorNumPlaceholder: '输入小区楼编号',
+      roomNumPlaceholder: '输入房屋编号',
+      search: '查询',
+      reset: '重置',
+      roomId: '房屋ID',
+      floorNum: '楼栋编号',
+      unitNum: '单元编号',
+      roomNum: '房屋编号',
+      layer: '楼层',
+      operation: '操作',
+      choose: '选择',
+      building: '号楼',
+      unit: '单元',
+      room: '室',
+      floor: '层',
+      loadFailed: '加载房屋信息失败'
+    }
   }
 }
\ No newline at end of file