diff --git a/src/api/fee/addOwnerInvoiceApi.js b/src/api/fee/addOwnerInvoiceApi.js
new file mode 100644
index 0000000..adbc608
--- /dev/null
+++ b/src/api/fee/addOwnerInvoiceApi.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 保存业主发票信息
+export function saveOwnerInvoice(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/invoice.saveOwnerInvoice',
+      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 queryOwners(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/owner.queryOwners',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve({
+          data: res.data,
+          total: res.records
+        })
+      } else {
+        reject(new Error(res.msg || '查询业主失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/fee/invoiceApplyApi.js b/src/api/fee/invoiceApplyApi.js
new file mode 100644
index 0000000..e8c999b
--- /dev/null
+++ b/src/api/fee/invoiceApplyApi.js
@@ -0,0 +1,148 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 获取发票申请列表
+export function listInvoiceApply(params) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/invoice.listInvoiceApply',
+      method: 'get',
+      params: {
+        ...params,
+        communityId
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取发票申请列表失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 审核发票申请
+export function auditInvoiceApply(data) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/invoice.auditInvoiceApply',
+      method: 'post',
+      data: {
+        ...data,
+        communityId
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '审核发票申请失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除发票申请
+export function deleteInvoiceApply(data) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/invoice.deleteInvoiceApply',
+      method: 'post',
+      data: {
+        ...data,
+        communityId
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '删除发票申请失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 上传发票照片
+export function uploadInvoicePhoto(data) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/invoice.uploadInvoicePhoto',
+      method: 'post',
+      data: {
+        ...data,
+        communityId
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '上传发票照片失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 写入发票事件
+export function writeInvoiceEvent(data) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/invoice.writeInvoiceApply',
+      method: 'post',
+      data: {
+        ...data,
+        communityId
+      }
+    }).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(formData) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    formData.append('communityId', communityId)
+    
+    request({
+      url: 'uploadFile/uploadImage',
+      method: 'post',
+      data: formData,
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    }).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/api/fee/invoiceApplyDetailApi.js b/src/api/fee/invoiceApplyDetailApi.js
new file mode 100644
index 0000000..070e3c3
--- /dev/null
+++ b/src/api/fee/invoiceApplyDetailApi.js
@@ -0,0 +1,77 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+/**
+ * 获取发票申请详情
+ * @param {Object} params 
+ * @returns 
+ */
+export function getInvoiceApplyDetail(params) {
+  return new Promise((resolve, reject) => {
+    params.communityId = getCommunityId()
+    request({
+      url: '/invoice.listInvoiceApply',
+      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)
+    })
+  })
+}
+
+/**
+ * 获取发票申请费用明细
+ * @param {Object} params 
+ * @returns 
+ */
+export function getInvoiceApplyItemList(params) {
+  return new Promise((resolve, reject) => {
+    params.communityId = getCommunityId()
+    request({
+      url: '/invoice.listInvoiceApplyItem',
+      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)
+    })
+  })
+}
+
+/**
+ * 获取发票申请审核记录
+ * @param {Object} params 
+ * @returns 
+ */
+export function getInvoiceEventList(params) {
+  return new Promise((resolve, reject) => {
+    params.communityId = getCommunityId()
+    request({
+      url: '/invoice.listInvoiceEvent',
+      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)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/fee/ownerApplyInvoiceApi.js b/src/api/fee/ownerApplyInvoiceApi.js
new file mode 100644
index 0000000..597f272
--- /dev/null
+++ b/src/api/fee/ownerApplyInvoiceApi.js
@@ -0,0 +1,89 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 获取业主发票信息列表
+export function listOwnerInvoice(params) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/invoice.listOwnerInvoice',
+      method: 'get',
+      params: {
+        ...params,
+        communityId
+      }
+    }).then(response => {
+      const res = response.data
+
+        resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询费用明细
+export function queryFeeDetail(params) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/fee.queryFeeDetail',
+      method: 'get',
+      params: {
+        ...params,
+        communityId
+      }
+    }).then(response => {
+      const res = response.data
+
+        resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询账户预存明细
+export function listAccountReceipt(params) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/receipt.listAccountReceipt',
+      method: 'get',
+      params: {
+        ...params,
+        communityId
+      }
+    }).then(response => {
+      const res = response.data
+
+        resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 保存发票申请
+export function saveInvoiceApply(data) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/invoice.saveInvoiceApply',
+      method: 'post',
+      data: {
+        ...data,
+        communityId
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '保存发票申请失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/fee/ownerInvoiceApi.js b/src/api/fee/ownerInvoiceApi.js
new file mode 100644
index 0000000..a8184d8
--- /dev/null
+++ b/src/api/fee/ownerInvoiceApi.js
@@ -0,0 +1,65 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 查询业主发票列表
+export function listOwnerInvoice(params) {
+  return new Promise((resolve, reject) => {
+    params.communityId = getCommunityId()
+    request({
+      url: '/invoice.listOwnerInvoice',
+      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 updateOwnerInvoice(data) {
+  return new Promise((resolve, reject) => {
+    data.communityId = getCommunityId()
+    request({
+      url: '/invoice.updateOwnerInvoice',
+      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 deleteOwnerInvoice(data) {
+  return new Promise((resolve, reject) => {
+    data.communityId = getCommunityId()
+    request({
+      url: '/invoice.deleteOwnerInvoice',
+      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)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/components/fee/audit.vue b/src/components/fee/audit.vue
new file mode 100644
index 0000000..4bfc303
--- /dev/null
+++ b/src/components/fee/audit.vue
@@ -0,0 +1,90 @@
+<template>
+  <el-dialog
+    :title="$t('audit.title')"
+    :visible.sync="visible"
+    width="50%"
+    @close="closeDialog"
+  >
+    <el-form label-width="120px">
+      <el-form-item :label="$t('audit.status')">
+        <el-select
+          v-model="form.state"
+          :placeholder="$t('audit.statusRequired')"
+          style="width: 100%"
+        >
+          <el-option
+            :label="$t('audit.approve')"
+            value="1100"
+          />
+          <el-option
+            :label="$t('audit.reject')"
+            value="1200"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('audit.reason')">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          :rows="3"
+          :placeholder="$t('audit.reasonRequired')"
+        />
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <el-button @click="closeDialog">{{ $t('common.cancel') }}</el-button>
+      <el-button
+        type="primary"
+        @click="submitAudit"
+      >{{ $t('common.submit') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'AuditDialog',
+  data() {
+    return {
+      visible: false,
+      form: {
+        state: '',
+        remark: ''
+      }
+    }
+  },
+  watch: {
+    'form.state'(val) {
+      if (val === '1100') {
+        this.form.remark = this.$t('audit.approve')
+      } else if (val === '1200') {
+        this.form.remark = this.$t('audit.reject') + ': '
+      }
+    }
+  },
+  methods: {
+    open() {
+      this.form = {
+        state: '',
+        remark: ''
+      }
+      this.visible = true
+    },
+    closeDialog() {
+      this.visible = false
+    },
+    submitAudit() {
+      if (!this.form.state) {
+        this.$message.warning(this.$t('audit.statusRequired'))
+        return
+      }
+      if (!this.form.remark) {
+        this.$message.warning(this.$t('audit.reasonRequired'))
+        return
+      }
+      this.$emit('success', this.form)
+      this.closeDialog()
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/deleteInvoiceApply.vue b/src/components/fee/deleteInvoiceApply.vue
new file mode 100644
index 0000000..7b5974f
--- /dev/null
+++ b/src/components/fee/deleteInvoiceApply.vue
@@ -0,0 +1,57 @@
+<template>
+  <el-dialog
+    :title="$t('deleteInvoiceApply.title')"
+    :visible.sync="visible"
+    width="30%"
+    @close="closeDialog"
+  >
+    <div align="center">
+      <p>{{ $t('deleteInvoiceApply.confirmMessage') }}</p>
+    </div>
+    <div slot="footer">
+      <el-button @click="closeDialog">{{ $t('common.cancel') }}</el-button>
+      <el-button
+        type="primary"
+        @click="deleteInvoiceApply"
+      >{{ $t('common.confirmDelete') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteInvoiceApply as deleteApi } from '@/api/fee/invoiceApplyApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'DeleteInvoiceApply',
+  data() {
+    return {
+      visible: false,
+      applyData: {}
+    }
+  },
+  methods: {
+    open(row) {
+      this.applyData = { ...row }
+      this.visible = true
+    },
+    closeDialog() {
+      this.visible = false
+    },
+    async deleteInvoiceApply() {
+      try {
+        const params = {
+          ...this.applyData,
+          communityId: getCommunityId()
+        }
+        await deleteApi(params)
+        this.$emit('success')
+        this.$message.success(this.$t('common.deleteSuccess'))
+        this.closeDialog()
+      } catch (error) {
+        this.$message.error(error.message)
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/deleteOwnerInvoice.vue b/src/components/fee/deleteOwnerInvoice.vue
new file mode 100644
index 0000000..3ab5775
--- /dev/null
+++ b/src/components/fee/deleteOwnerInvoice.vue
@@ -0,0 +1,43 @@
+<template>
+  <el-dialog
+    :title="$t('confirmDeleteTitle')"
+    :visible.sync="visible"
+    width="30%"
+  >
+    <p>{{ $t('confirmDeleteContent') }}</p>
+    <div slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button type="danger" @click="handleDelete">{{ $t('confirmDelete') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteOwnerInvoice } from '@/api/fee/ownerInvoiceApi'
+
+export default {
+  name: 'DeleteOwnerInvoice',
+  data() {
+    return {
+      visible: false,
+      currentData: null
+    }
+  },
+  methods: {
+    open(data) {
+      this.currentData = data
+      this.visible = true
+    },
+    async handleDelete() {
+      try {
+        await deleteOwnerInvoice({ oiId: this.currentData.oiId })
+        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>
\ No newline at end of file
diff --git a/src/components/fee/editOwnerInvoice.vue b/src/components/fee/editOwnerInvoice.vue
new file mode 100644
index 0000000..cc32180
--- /dev/null
+++ b/src/components/fee/editOwnerInvoice.vue
@@ -0,0 +1,116 @@
+<template>
+  <el-dialog
+    :title="$t('editTitle')"
+    :visible.sync="visible"
+    width="50%"
+    @close="resetForm"
+  >
+    <el-form ref="form" :model="formData" label-width="150px">
+      <el-form-item :label="$t('invoiceType')" prop="invoiceType" required>
+        <el-select 
+          v-model="formData.invoiceType" 
+          :placeholder="$t('requiredInvoiceType')"
+          style="width: 100%"
+        >
+          <el-option value="1001" :label="$t('personal')" />
+          <el-option value="2002" :label="$t('enterprise')" />
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item :label="$t('invoiceHeader')" prop="invoiceName" required>
+        <el-input 
+          v-model="formData.invoiceName" 
+          :placeholder="$t('requiredInvoiceHeader')" 
+        />
+      </el-form-item>
+      
+      <el-form-item :label="$t('taxpayerId')" prop="invoiceNum" required>
+        <el-input 
+          v-model="formData.invoiceNum" 
+          :placeholder="$t('requiredTaxpayerId')" 
+        />
+      </el-form-item>
+      
+      <el-form-item :label="$t('address')" prop="invoiceAddress" required>
+        <el-input 
+          v-model="formData.invoiceAddress" 
+          :placeholder="$t('requiredAddress')" 
+        />
+      </el-form-item>
+      
+      <el-form-item :label="$t('phone')" prop="invoiceLink" required>
+        <el-input 
+          v-model="formData.invoiceLink" 
+          :placeholder="$t('requiredPhone')" 
+        />
+      </el-form-item>
+      
+      <el-form-item :label="$t('bankAccount')" prop="invoiceAccount" required>
+        <el-input 
+          v-model="formData.invoiceAccount" 
+          :placeholder="$t('requiredBankAccount')" 
+        />
+      </el-form-item>
+      
+      <el-form-item :label="$t('remark')" prop="remark">
+        <el-input 
+          v-model="formData.remark" 
+          type="textarea" 
+          :placeholder="$t('optionalRemark')" 
+        />
+      </el-form-item>
+    </el-form>
+    
+    <div slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button type="primary" @click="handleSave">{{ $t('save') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { updateOwnerInvoice } from '@/api/fee/ownerInvoiceApi'
+
+export default {
+  name: 'EditOwnerInvoice',
+  data() {
+    return {
+      visible: false,
+      formData: {
+        oiId: '',
+        ownerId: '',
+        ownerName: '',
+        invoiceType: '',
+        invoiceName: '',
+        invoiceNum: '',
+        invoiceAddress: '',
+        invoiceLink: '',
+        invoiceAccount: '',
+        remark: ''
+      }
+    }
+  },
+  methods: {
+    open(data) {
+      Object.assign(this.formData, data)
+      this.visible = true
+    },
+    resetForm() {
+      this.$refs.form.resetFields()
+      Object.keys(this.formData).forEach(key => {
+        this.formData[key] = ''
+      })
+    },
+    async handleSave() {
+      try {
+        await updateOwnerInvoice(this.formData)
+        this.$message.success(this.$t('common.saveSuccess'))
+        this.visible = false
+        this.$emit('success')
+      } catch (error) {
+        this.$message.error(error.message || this.$t('common.saveFailed'))
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/invoiceApplyDetailEvent.vue b/src/components/fee/invoiceApplyDetailEvent.vue
new file mode 100644
index 0000000..d8160a6
--- /dev/null
+++ b/src/components/fee/invoiceApplyDetailEvent.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="invoice-apply-detail-event">
+    <el-table :data="events" border style="width: 100%">
+      <el-table-column prop="eventTypeName" :label="$t('invoiceApplyDetailEvent.type')" align="center"></el-table-column>
+      <el-table-column prop="createUserName" :label="$t('invoiceApplyDetailEvent.operator')" align="center"></el-table-column>
+      <el-table-column prop="remark" :label="$t('invoiceApplyDetailEvent.remark')" align="center"></el-table-column>
+      <el-table-column prop="createTime" :label="$t('invoiceApplyDetailEvent.time')" align="center"></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">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { getInvoiceEventList } from '@/api/fee/invoiceApplyDetailApi'
+
+export default {
+  name: 'InvoiceApplyDetailEvent',
+  props: {
+    applyId: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      events: [],
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  watch: {
+    applyId: {
+      immediate: true,
+      handler() {
+        if (this.applyId) {
+          this.loadData()
+        }
+      }
+    }
+  },
+  methods: {
+    async loadData() {
+      try {
+        const params = {
+          page: this.page.current,
+          row: this.page.size,
+          applyId: this.applyId
+        }
+        const res = await getInvoiceEventList(params)
+        if (res.code === 0) {
+          this.events = res.data
+          this.page.total = res.total
+        }
+      } catch (error) {
+        this.$message.error(this.$t('invoiceApplyDetailEvent.fetchError'))
+      }
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this.loadData()
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this.loadData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.invoice-apply-detail-event {
+  margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/fee/invoiceApplyDetailFee.vue b/src/components/fee/invoiceApplyDetailFee.vue
new file mode 100644
index 0000000..36a3fbb
--- /dev/null
+++ b/src/components/fee/invoiceApplyDetailFee.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="invoice-apply-detail-fee">
+    <el-table :data="fees" border style="width: 100%">
+      <el-table-column prop="itemTypeName" :label="$t('invoiceApplyDetailFee.type')" align="center"></el-table-column>
+      <el-table-column prop="itemName" :label="$t('invoiceApplyDetailFee.name')" align="center"></el-table-column>
+      <el-table-column prop="itemAmount" :label="$t('invoiceApplyDetailFee.amount')" align="center"></el-table-column>
+      <el-table-column prop="payTime" :label="$t('invoiceApplyDetailFee.payTime')" align="center"></el-table-column>
+      <el-table-column prop="remark" :label="$t('invoiceApplyDetailFee.remark')" align="center"></el-table-column>
+      <el-table-column :label="$t('invoiceApplyDetailFee.paymentId')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.itemObjId }}
+          （<a href="javascript:void(0)" v-if="scope.row.itemType === '2002'" @click="viewFeeDetail(scope.row)">{{ $t('common.view') }}</a>
+          <a href="javascript:void(0)" v-else @click="viewAcctDetail(scope.row)">{{ $t('common.view') }}</a>）
+        </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">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { getInvoiceApplyItemList } from '@/api/fee/invoiceApplyDetailApi'
+
+export default {
+  name: 'InvoiceApplyDetailFee',
+  props: {
+    applyId: {
+      type: String,
+      required: true
+    },
+    ownerId: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      fees: [],
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  watch: {
+    applyId: {
+      immediate: true,
+      handler() {
+        if (this.applyId) {
+          this.loadData()
+        }
+      }
+    }
+  },
+  methods: {
+    async loadData() {
+      try {
+        const params = {
+          page: this.page.current,
+          row: this.page.size,
+          applyId: this.applyId
+        }
+        const res = await getInvoiceApplyItemList(params)
+        if (res.code === 0) {
+          this.fees = res.data.map(item => ({
+            ...item,
+            itemTypeName: item.itemType === '2002' ? this.$t('invoiceApplyDetailFee.feeType') : this.$t('invoiceApplyDetailFee.accountType')
+          }))
+          this.page.total = res.total
+        }
+      } catch (error) {
+        this.$message.error(this.$t('invoiceApplyDetailFee.fetchError'))
+      }
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this.loadData()
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this.loadData()
+    },
+    viewFeeDetail(fee) {
+      this.$router.push({ path: '/fee/feeDetail', query: { detailId: fee.itemObjId }})
+    },
+    viewAcctDetail(fee) {
+      this.$router.push({ path: '/owner/ownerDetail', query: { ownerId: fee.ownerId, currentTab: 'ownerDetailAccountReceipt' }})
+    }
+  }
+}
+</script>
+
+<style scoped>
+.invoice-apply-detail-fee {
+  margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/fee/searchOwnerInvoice.vue b/src/components/fee/searchOwnerInvoice.vue
new file mode 100644
index 0000000..93e34ff
--- /dev/null
+++ b/src/components/fee/searchOwnerInvoice.vue
@@ -0,0 +1,124 @@
+<template>
+  <el-dialog :title="$t('searchOwnerInvoice.title')" :visible.sync="visible" width="80%" @close="handleClose">
+    <div>
+      <el-row :gutter="20">
+        <el-col :span="9">
+          <el-input v-model="searchForm.roomName" :placeholder="$t('searchOwnerInvoice.placeholderRoom')" clearable
+            @keyup.enter.native="handleSearch" />
+        </el-col>
+        <el-col :span="9">
+          <el-input v-model="searchForm.ownerNameLike" :placeholder="$t('searchOwnerInvoice.placeholderOwner')" clearable
+            @keyup.enter.native="handleSearch" />
+        </el-col>
+        <el-col :span="6">
+          <el-button type="primary" @click="handleSearch">
+            {{ $t('searchOwnerInvoice.search') }}
+          </el-button>
+        </el-col>
+      </el-row>
+
+      <el-table v-loading="loading" :data="ownerInvoices" border style="width: 100%; margin-top: 20px">
+        <el-table-column prop="ownerName" :label="$t('searchOwnerInvoice.ownerName')" align="center" />
+        <el-table-column prop="invoiceType" :label="$t('searchOwnerInvoice.invoiceType')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.invoiceType === '1001' ? $t('searchOwnerInvoice.personal') : $t('searchOwnerInvoice.company') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="invoiceName" :label="$t('searchOwnerInvoice.invoiceTitle')" align="center" />
+        <el-table-column prop="invoiceNum" :label="$t('searchOwnerInvoice.taxpayerId')" align="center" />
+        <el-table-column prop="invoiceAddress" :label="$t('searchOwnerInvoice.addressPhone')" align="center" />
+        <el-table-column :label="$t('searchOwnerInvoice.operation')" align="center">
+          <template slot-scope="scope">
+            <el-button type="primary" size="small" @click="handleSelect(scope.row)">
+              {{ $t('searchOwnerInvoice.select') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination :current-page="pagination.current" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.size"
+        layout="total, sizes, prev, pager, next" :total="pagination.total" @size-change="handleSizeChange"
+        @current-change="handlePageChange" />
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { listOwnerInvoice } from '@/api/fee/ownerApplyInvoiceApi'
+
+export default {
+  name: 'SearchOwnerInvoice',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      searchForm: {
+        roomName: '',
+        ownerNameLike: ''
+      },
+      ownerInvoices: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open() {
+      this.visible = true
+      this.loadData()
+    },
+    handleClose() {
+      this.$emit('update:visible', false)
+    },
+    async loadData() {
+      this.loading = true
+      try {
+        const params = {
+          page: this.pagination.current,
+          row: this.pagination.size,
+          ownerNameLike: this.searchForm.ownerNameLike,
+          roomName: this.searchForm.roomName
+        }
+
+        const res = await listOwnerInvoice(params)
+        this.ownerInvoices = res.data
+        this.pagination.total = res.records
+      } catch (error) {
+        console.error('Failed to load owner invoices:', error)
+        this.$message.error(this.$t('common.loadFailed'))
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSearch() {
+      this.pagination.current = 1
+      this.loadData()
+    },
+    handleSizeChange(size) {
+      this.pagination.size = size
+      this.loadData()
+    },
+    handlePageChange(page) {
+      this.pagination.current = page
+      this.loadData()
+    },
+    handleSelect(owner) {
+      this.$emit('select', owner)
+      this.handleClose()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-row {
+  margin-bottom: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/fee/uploadInvoicePhoto.vue b/src/components/fee/uploadInvoicePhoto.vue
new file mode 100644
index 0000000..f8597af
--- /dev/null
+++ b/src/components/fee/uploadInvoicePhoto.vue
@@ -0,0 +1,93 @@
+<template>
+  <el-dialog
+    :title="$t('uploadInvoicePhoto.title')"
+    :visible.sync="visible"
+    width="50%"
+    @close="closeDialog"
+  >
+    <el-form label-width="120px">
+      <el-form-item :label="$t('uploadInvoicePhoto.invoiceCode')">
+        <el-input
+          v-model="form.invoiceCode"
+          :placeholder="$t('uploadInvoicePhoto.codeRequired')"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('uploadInvoicePhoto.invoice')">
+        <upload-image-url
+          ref="uploadImage"
+          @notifyUploadCoverImage="handleImageUpload"
+        />
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <el-button @click="closeDialog">{{ $t('common.cancel') }}</el-button>
+      <el-button
+        type="primary"
+        @click="saveUploadInvoicePhoto"
+      >{{ $t('common.save') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { uploadInvoicePhoto } from '@/api/fee/invoiceApplyApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import UploadImageUrl from '@/components/upload/UploadImageUrl'
+
+export default {
+  name: 'UploadInvoicePhoto',
+  components: {
+    UploadImageUrl
+  },
+  data() {
+    return {
+      visible: false,
+      form: {
+        applyId: '',
+        invoiceCode: '',
+        photos: []
+      }
+    }
+  },
+  methods: {
+    open(row) {
+      this.form = {
+        applyId: row.applyId,
+        invoiceCode: '',
+        photos: []
+      }
+      this.$refs.uploadImage.clearImages()
+      this.visible = true
+    },
+    closeDialog() {
+      this.visible = false
+    },
+    handleImageUpload(photos) {
+      this.form.photos = photos
+    },
+    async saveUploadInvoicePhoto() {
+      if (!this.form.invoiceCode) {
+        this.$message.warning(this.$t('uploadInvoicePhoto.codeRequired'))
+        return
+      }
+      if (this.form.photos.length === 0) {
+        this.$message.warning(this.$t('uploadInvoicePhoto.photoRequired'))
+        return
+      }
+      
+      try {
+        const params = {
+          ...this.form,
+          communityId: getCommunityId()
+        }
+        await uploadInvoicePhoto(params)
+        this.$emit('success')
+        this.$message.success(this.$t('common.saveSuccess'))
+        this.closeDialog()
+      } catch (error) {
+        this.$message.error(error.message)
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/wirteInvoiceEvent.vue b/src/components/fee/wirteInvoiceEvent.vue
new file mode 100644
index 0000000..674a6b2
--- /dev/null
+++ b/src/components/fee/wirteInvoiceEvent.vue
@@ -0,0 +1,97 @@
+<template>
+  <el-dialog
+    :title="$t('wirteInvoiceEvent.title')"
+    :visible.sync="visible"
+    width="50%"
+    @close="closeDialog"
+  >
+    <el-form label-width="120px">
+      <el-form-item :label="$t('wirteInvoiceEvent.type')">
+        <el-select
+          v-model="form.eventType"
+          :placeholder="$t('wirteInvoiceEvent.typeRequired')"
+          style="width: 100%"
+        >
+          <el-option
+            :label="$t('wirteInvoiceEvent.receive')"
+            value="4004"
+          />
+          <el-option
+            :label="$t('wirteInvoiceEvent.register')"
+            value="5005"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('wirteInvoiceEvent.remark')">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          :rows="3"
+          :placeholder="$t('wirteInvoiceEvent.remarkRequired')"
+        />
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <el-button @click="closeDialog">{{ $t('common.cancel') }}</el-button>
+      <el-button
+        type="primary"
+        @click="saveEvent"
+      >{{ $t('common.save') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { writeInvoiceEvent } from '@/api/fee/invoiceApplyApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'WirteInvoiceEvent',
+  data() {
+    return {
+      visible: false,
+      form: {
+        applyId: '',
+        eventType: '',
+        remark: ''
+      }
+    }
+  },
+  methods: {
+    open(row) {
+      this.form = {
+        applyId: row.applyId,
+        eventType: '',
+        remark: ''
+      }
+      this.visible = true
+    },
+    closeDialog() {
+      this.visible = false
+    },
+    async saveEvent() {
+      if (!this.form.eventType) {
+        this.$message.warning(this.$t('wirteInvoiceEvent.typeRequired'))
+        return
+      }
+      if (!this.form.remark) {
+        this.$message.warning(this.$t('wirteInvoiceEvent.remarkRequired'))
+        return
+      }
+      
+      try {
+        const params = {
+          ...this.form,
+          communityId: getCommunityId()
+        }
+        await writeInvoiceEvent(params)
+        this.$emit('success')
+        this.$message.success(this.$t('common.saveSuccess'))
+        this.closeDialog()
+      } catch (error) {
+        this.$message.error(error.message)
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/i18n/index.js b/src/i18n/index.js
index 058bad5..19a1472 100644
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -139,6 +139,10 @@ import { messages as ownerCommitteeManageMessages } from '../views/owner/ownerCo
 import { messages as addOwnerCommitteeMessages } from '../views/owner/addOwnerCommitteeLang'
 import { messages as editOwnerCommitteeMessages } from '../views/owner/editOwnerCommitteeLang'
 import { messages as ownerCommitteeDetailMessages } from '../views/owner/ownerCommitteeDetailLang'
+import { messages as ownerInvoiceMessages } from '../views/fee/ownerInvoiceLang'
+import { messages as invoiceApplyMessages } from '../views/fee/invoiceApplyLang'
+import { messages as ownerApplyInvoiceMessages } from '../views/fee/ownerApplyInvoiceLang'
+import { messages as invoiceApplyDetailMessages } from '../views/fee/invoiceApplyDetailLang'
 
 Vue.use(VueI18n)
 
@@ -282,6 +286,10 @@ const messages = {
     ...addOwnerCommitteeMessages.en,
     ...editOwnerCommitteeMessages.en,
     ...ownerCommitteeDetailMessages.en,
+    ...ownerInvoiceMessages.en,
+    ...invoiceApplyMessages.en,
+    ...ownerApplyInvoiceMessages.en,
+    ...invoiceApplyDetailMessages.en,
   },
   zh: {
     ...loginMessages.zh,
@@ -421,6 +429,10 @@ const messages = {
     ...addOwnerCommitteeMessages.zh,
     ...editOwnerCommitteeMessages.zh,
     ...ownerCommitteeDetailMessages.zh,
+    ...ownerInvoiceMessages.zh,
+    ...invoiceApplyMessages.zh,
+    ...ownerApplyInvoiceMessages.zh,
+    ...invoiceApplyDetailMessages.zh,
   }
 }
 
diff --git a/src/router/index.js b/src/router/index.js
index 7a31965..44f5d6a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -682,10 +682,35 @@ const routes = [
         component: () => import('@/views/owner/editOwnerCommitteeList.vue')
       },
       {
-        path:'/views/owner/ownerCommitteeDetail',
-        name:'/views/owner/ownerCommitteeDetail',
+        path: '/views/owner/ownerCommitteeDetail',
+        name: '/views/owner/ownerCommitteeDetail',
         component: () => import('@/views/owner/ownerCommitteeDetailList.vue')
+      },
+      {
+        path: '/pages/fee/ownerInvoice',
+        name: '/pages/fee/ownerInvoice',
+        component: () => import('@/views/fee/ownerInvoiceList.vue')
+      },
+      {
+        path: '/views/fee/addOwnerInvoice',
+        name: '/views/fee/addOwnerInvoice',
+        component: () => import('@/views/fee/addOwnerInvoiceList.vue')
+      },
+      {
+        path:'/pages/fee/invoiceApply',
+        name:'/pages/fee/invoiceApply',
+        component: () => import('@/views/fee/invoiceApplyList.vue')
         },
+        {
+          path:'/views/fee/ownerApplyInvoice',
+          name:'/views/fee/ownerApplyInvoice',
+          component: () => import('@/views/fee/ownerApplyInvoiceList.vue')
+          },
+          {
+            path:'/views/fee/invoiceApplyDetail',
+            name:'/views/fee/invoiceApplyDetail',
+            component: () => import('@/views/fee/invoiceApplyDetailList.vue')
+            },
       // 其他子路由可以在这里添加
     ]
   },
diff --git a/src/views/fee/addOwnerInvoiceList.vue b/src/views/fee/addOwnerInvoiceList.vue
new file mode 100644
index 0000000..7da7eec
--- /dev/null
+++ b/src/views/fee/addOwnerInvoiceList.vue
@@ -0,0 +1,169 @@
+<template>
+  <div class="app-container">
+    <el-card shadow="never">
+      <div slot="header" class="clearfix">
+        <span>{{ $t('addOwnerInvoice.title') }}</span>
+        <el-button class="float-right" type="text" @click="$router.go(-1)">
+          {{ $t('addOwnerInvoice.back') }}
+        </el-button>
+      </div>
+
+      <el-form ref="form" :model="formData" :rules="rules" label-width="150px" label-position="right">
+        <el-form-item :label="$t('addOwnerInvoice.owner')" prop="ownerName">
+          <el-input v-model="formData.ownerName" :placeholder="$t('addOwnerInvoice.placeholder.owner')" disabled
+            style="width: 70%" />
+          <el-button type="primary" style="margin-left: 10px" @click="openOwnerDialog">
+            {{ $t('addOwnerInvoice.selectOwner') }}
+          </el-button>
+        </el-form-item>
+
+        <el-form-item :label="$t('addOwnerInvoice.invoiceType')" prop="invoiceType">
+          <el-select v-model="formData.invoiceType" :placeholder="$t('addOwnerInvoice.placeholder.invoiceType')"
+            style="width: 100%">
+            <el-option v-for="item in invoiceTypes" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item :label="$t('addOwnerInvoice.invoiceTitle')" prop="invoiceName">
+          <el-input v-model="formData.invoiceName" :placeholder="$t('addOwnerInvoice.placeholder.invoiceTitle')"
+            style="width: 100%" />
+        </el-form-item>
+
+        <el-form-item :label="$t('addOwnerInvoice.taxNumber')" prop="invoiceNum">
+          <el-input v-model="formData.invoiceNum" :placeholder="$t('addOwnerInvoice.placeholder.taxNumber')"
+            style="width: 100%" />
+        </el-form-item>
+
+        <el-form-item :label="$t('addOwnerInvoice.address')" prop="invoiceAddress">
+          <el-input v-model="formData.invoiceAddress" :placeholder="$t('addOwnerInvoice.placeholder.address')"
+            style="width: 100%" />
+        </el-form-item>
+
+        <el-form-item :label="$t('addOwnerInvoice.phone')" prop="invoiceLink">
+          <el-input v-model="formData.invoiceLink" :placeholder="$t('addOwnerInvoice.placeholder.phone')"
+            style="width: 100%" />
+        </el-form-item>
+
+        <el-form-item :label="$t('addOwnerInvoice.bankAccount')" prop="invoiceAccount">
+          <el-input v-model="formData.invoiceAccount" :placeholder="$t('addOwnerInvoice.placeholder.bankAccount')"
+            style="width: 100%" />
+        </el-form-item>
+
+        <el-form-item :label="$t('addOwnerInvoice.remarks')">
+          <el-input v-model="formData.remark" type="textarea" :rows="3"
+            :placeholder="$t('addOwnerInvoice.placeholder.remarks')" style="width: 100%" />
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" @click="submitForm">
+            {{ $t('addOwnerInvoice.save') }}
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <search-owner ref="searchOwner" :visible.sync="showOwnerDialog" @chooseOwner="handleOwnerSelect" />
+  </div>
+</template>
+
+<script>
+import { saveOwnerInvoice } from '@/api/fee/addOwnerInvoiceApi'
+import SearchOwner from '@/components/owner/SearchOwner'
+
+export default {
+  name: 'AddOwnerInvoice',
+  components: { SearchOwner },
+  data() {
+    return {
+      showOwnerDialog: false,
+      formData: {
+        oiId: '',
+        ownerId: '',
+        ownerName: '',
+        invoiceType: '',
+        invoiceName: '',
+        invoiceNum: '',
+        invoiceAddress: '',
+        invoiceLink: '',
+        invoiceAccount: '',
+        remark: ''
+      },
+      invoiceTypes: [
+        { value: '1001', label: this.$t('addOwnerInvoice.personal') },
+        { value: '2002', label: this.$t('addOwnerInvoice.enterprise') }
+      ],
+      rules: {
+        ownerName: [
+          { required: true, message: this.$t('addOwnerInvoice.validation.ownerRequired'), trigger: 'blur' }
+        ],
+        invoiceType: [
+          { required: true, message: this.$t('addOwnerInvoice.validation.typeRequired'), trigger: 'change' }
+        ],
+        invoiceName: [
+          { required: true, message: this.$t('addOwnerInvoice.validation.titleRequired'), trigger: 'blur' }
+        ],
+        invoiceNum: [
+          { required: true, message: this.$t('addOwnerInvoice.validation.taxNumberRequired'), trigger: 'blur' }
+        ],
+        invoiceAddress: [
+          { required: true, message: this.$t('addOwnerInvoice.validation.addressRequired'), trigger: 'blur' }
+        ],
+        invoiceLink: [
+          { required: true, message: this.$t('addOwnerInvoice.validation.phoneRequired'), trigger: 'blur' }
+        ],
+        invoiceAccount: [
+          { required: true, message: this.$t('addOwnerInvoice.validation.bankAccountRequired'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    openOwnerDialog() {
+      this.$refs.searchOwner.open()
+    },
+    handleOwnerSelect(owner) {
+      this.formData.ownerId = owner.ownerId
+      this.formData.ownerName = owner.name
+    },
+    submitForm() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            const payload = {
+              ...this.formData,
+              communityId: this.getCommunityId()
+            }
+
+            await saveOwnerInvoice(payload)
+            this.$message.success(this.$t('common.saveSuccess'))
+            this.$router.go(-1)
+          } catch (error) {
+            console.error('保存失败:', error)
+            this.$message.error(error.message || this.$t('common.saveFailed'))
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 20px;
+}
+
+.float-right {
+  float: right;
+}
+
+.el-form {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.el-select,
+.el-input {
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/fee/invoiceApplyDetailLang.js b/src/views/fee/invoiceApplyDetailLang.js
new file mode 100644
index 0000000..29ca341
--- /dev/null
+++ b/src/views/fee/invoiceApplyDetailLang.js
@@ -0,0 +1,90 @@
+export const messages = {
+  en: {
+    invoiceApplyDetail: {
+      title: 'Invoice Details',
+      back: 'Back',
+      applyId: 'Apply ID:',
+      invoiceType: 'Invoice Type:',
+      personal: 'Personal',
+      company: 'Company',
+      ownerName: 'Owner Name:',
+      createUserName: 'Applicant:',
+      invoiceName: 'Invoice Title:',
+      invoiceNum: 'Taxpayer ID:',
+      invoiceAddress: 'Address/Phone:',
+      invoiceAmount: 'Apply Amount:',
+      stateName: 'Status:',
+      createTime: 'Apply Time:',
+      invoiceCode: 'Invoice Code:',
+      feeTab: 'Fee Details',
+      eventTab: 'Audit Records',
+      imageTab: 'View Invoice',
+      notUploaded: 'Not uploaded',
+      noInvoice: 'No Invoice',
+      downloadInvoice: 'Download Invoice',
+      fetchError: 'Failed to fetch invoice details'
+    },
+    invoiceApplyDetailFee: {
+      type: 'Type',
+      name: 'Name',
+      amount: 'Amount',
+      payTime: 'Pay Time',
+      remark: 'Remark',
+      paymentId: 'Payment ID',
+      feeType: 'Fee',
+      accountType: 'Account',
+      fetchError: 'Failed to fetch fee details'
+    },
+    invoiceApplyDetailEvent: {
+      type: 'Type',
+      operator: 'Operator',
+      remark: 'Remark',
+      time: 'Time',
+      fetchError: 'Failed to fetch audit records'
+    },
+  },
+  zh: {
+    invoiceApplyDetail: {
+      title: '发票详情',
+      back: '返回',
+      applyId: '编号：',
+      invoiceType: '发票类型：',
+      personal: '个人',
+      company: '企业',
+      ownerName: '业主名称：',
+      createUserName: '申请人：',
+      invoiceName: '发票名头：',
+      invoiceNum: '纳税人识别号：',
+      invoiceAddress: '地址、电话：',
+      invoiceAmount: '申请金额：',
+      stateName: '审核状态：',
+      createTime: '申请时间：',
+      invoiceCode: '发票编号：',
+      feeTab: '开票明细',
+      eventTab: '审核记录',
+      imageTab: '查看发票',
+      notUploaded: '未上传',
+      noInvoice: '没有发票',
+      downloadInvoice: '下载发票',
+      fetchError: '获取发票详情失败'
+    },
+    invoiceApplyDetailFee: {
+      type: '类型',
+      name: '名称',
+      amount: '金额',
+      payTime: '缴费时间',
+      remark: '备注',
+      paymentId: '缴费ID',
+      feeType: '费用',
+      accountType: '账户',
+      fetchError: '获取费用明细失败'
+    },
+    invoiceApplyDetailEvent: {
+      type: '类型',
+      operator: '操作人',
+      remark: '说明',
+      time: '时间',
+      fetchError: '获取审核记录失败'
+    },
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/invoiceApplyDetailList.vue b/src/views/fee/invoiceApplyDetailList.vue
new file mode 100644
index 0000000..1b7298f
--- /dev/null
+++ b/src/views/fee/invoiceApplyDetailList.vue
@@ -0,0 +1,212 @@
+<template>
+  <div class="invoice-apply-detail">
+    <el-card class="box-card">
+      <div class="card-header">
+        <div class="text-title">{{ $t('invoiceApplyDetail.title') }}</div>
+        <div>
+          <el-button type="primary" size="small" style="margin-left:10px" @click="goBack">
+            {{ $t('invoiceApplyDetail.back') }}
+          </el-button>
+        </div>
+      </div>
+
+      <!-- 业主信息 -->
+      <div class="margin-top">
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-row :gutter="20">
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">{{ $t('invoiceApplyDetail.applyId') }}</label>
+                  <label>{{ invoiceApplyDetailInfo.applyId }}</label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">{{ $t('invoiceApplyDetail.invoiceType') }}</label>
+                  <label>{{ invoiceApplyDetailInfo.invoiceType === '1001' ? $t('invoiceApplyDetail.personal') :
+                    $t('invoiceApplyDetail.company') }}</label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">{{ $t('invoiceApplyDetail.ownerName') }}</label>
+                  <label>{{ invoiceApplyDetailInfo.ownerName }}</label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">{{ $t('invoiceApplyDetail.createUserName') }}</label>
+                  <label>{{ invoiceApplyDetailInfo.createUserName }}({{ invoiceApplyDetailInfo.applyTel }})</label>
+                </div>
+              </el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">{{ $t('invoiceApplyDetail.invoiceName') }}</label>
+                  <label>{{ invoiceApplyDetailInfo.invoiceName }}</label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">{{ $t('invoiceApplyDetail.invoiceNum') }}</label>
+                  <label>{{ invoiceApplyDetailInfo.invoiceNum }}</label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">{{ $t('invoiceApplyDetail.invoiceAddress') }}</label>
+                  <label>{{ invoiceApplyDetailInfo.invoiceAddress }}</label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">{{ $t('invoiceApplyDetail.invoiceAmount') }}</label>
+                  <label>{{ invoiceApplyDetailInfo.invoiceAmount }}</label>
+                </div>
+              </el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">{{ $t('invoiceApplyDetail.stateName') }}</label>
+                  <label>{{ invoiceApplyDetailInfo.stateName }}</label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">{{ $t('invoiceApplyDetail.createTime') }}</label>
+                  <label>{{ invoiceApplyDetailInfo.createTime }}</label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">{{ $t('invoiceApplyDetail.invoiceCode') }}</label>
+                  <label>{{ invoiceApplyDetailInfo.invoiceCode || $t('invoiceApplyDetail.notUploaded') }}</label>
+                </div>
+              </el-col>
+            </el-row>
+          </el-col>
+        </el-row>
+      </div>
+      <el-divider></el-divider>
+
+      <el-tabs v-model="invoiceApplyDetailInfo._currentTab" @tab-click="handleTabClick">
+        <el-tab-pane :label="$t('invoiceApplyDetail.feeTab')" name="invoiceApplyDetailFee">
+          <invoice-apply-detail-fee v-if="invoiceApplyDetailInfo._currentTab === 'invoiceApplyDetailFee'"
+            :apply-id="invoiceApplyDetailInfo.applyId"
+            :owner-id="invoiceApplyDetailInfo.ownerId"></invoice-apply-detail-fee>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('invoiceApplyDetail.eventTab')" name="invoiceApplyDetailEvent">
+          <invoice-apply-detail-event v-if="invoiceApplyDetailInfo._currentTab === 'invoiceApplyDetailEvent'"
+            :apply-id="invoiceApplyDetailInfo.applyId"></invoice-apply-detail-event>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('invoiceApplyDetail.imageTab')" name="invoiceApplyDetailJpg">
+          <div v-if="invoiceApplyDetailInfo.urls && invoiceApplyDetailInfo.urls.length > 0">
+            <div v-for="(item, index) in invoiceApplyDetailInfo.urls" :key="index">
+              <a target="_blank" :href="item">{{ $t('invoiceApplyDetail.downloadInvoice') }}</a>
+            </div>
+          </div>
+          <div class="padding" v-else>
+            {{ $t('invoiceApplyDetail.noInvoice') }}
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getInvoiceApplyDetail } from '@/api/fee/invoiceApplyDetailApi'
+import InvoiceApplyDetailFee from '@/components/fee/invoiceApplyDetailFee'
+import InvoiceApplyDetailEvent from '@/components/fee/invoiceApplyDetailEvent'
+
+export default {
+  name: 'InvoiceApplyDetailList',
+  components: {
+    InvoiceApplyDetailFee,
+    InvoiceApplyDetailEvent
+  },
+  data() {
+    return {
+      invoiceApplyDetailInfo: {
+        applyId: '',
+        invoiceType: '',
+        ownerName: '',
+        createUserName: '',
+        invoiceName: '',
+        invoiceNum: '',
+        invoiceAddress: '',
+        invoiceAmount: '',
+        stateName: '',
+        createTime: '',
+        invoiceCode: '',
+        urls: [],
+        _currentTab: 'invoiceApplyDetailFee'
+      }
+    }
+  },
+  created() {
+    this.invoiceApplyDetailInfo.applyId = this.$route.query.applyId
+    if (this.invoiceApplyDetailInfo.applyId) {
+      this.loadInvoiceApplyInfo()
+    }
+  },
+  methods: {
+    async loadInvoiceApplyInfo() {
+      try {
+        const params = {
+          page: 1,
+          row: 1,
+          applyId: this.invoiceApplyDetailInfo.applyId
+        }
+        const res = await getInvoiceApplyDetail(params)
+        if (res.code === 0 && res.data && res.data.length > 0) {
+          Object.assign(this.invoiceApplyDetailInfo, res.data[0])
+        }
+      } catch (error) {
+        this.$message.error(this.$t('invoiceApplyDetail.fetchError'))
+      }
+    },
+    handleTabClick(tab) {
+      this.invoiceApplyDetailInfo._currentTab = tab.name
+    },
+    goBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.invoice-apply-detail {
+  padding: 20px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.text-title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.margin-top {
+  margin-top: 20px;
+}
+
+.padding {
+  padding: 20px;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+.col-form-label {
+  margin-right: 10px;
+}</style>
\ No newline at end of file
diff --git a/src/views/fee/invoiceApplyLang.js b/src/views/fee/invoiceApplyLang.js
new file mode 100644
index 0000000..5ba83c0
--- /dev/null
+++ b/src/views/fee/invoiceApplyLang.js
@@ -0,0 +1,150 @@
+export const messages = {
+  en: {
+    invoiceApply: {
+      searchTitle: 'Search Conditions',
+      title: 'Invoice Application',
+      apply: 'Apply',
+      table: {
+        id: 'ID',
+        invoiceType: 'Invoice Type',
+        ownerName: 'Owner Name',
+        applicant: 'Applicant',
+        invoiceName: 'Invoice Title',
+        taxNumber: 'Taxpayer ID',
+        addressPhone: 'Address & Phone',
+        amount: 'Amount',
+        invoiceCode: 'Invoice Code',
+        status: 'Status',
+        applyTime: 'Apply Time'
+      },
+      states: {
+        all: 'All',
+        pendingReview: 'Pending Review',
+        pendingUpload: 'Pending Upload',
+        reviewFailed: 'Review Failed',
+        pendingReceive: 'Pending Receive',
+        received: 'Received'
+      },
+      personal: 'Personal',
+      company: 'Company',
+      notUploaded: 'Not Uploaded',
+      openInvoice: 'Open Invoice',
+      uploadInvoice: 'Upload Invoice',
+      reUpload: 'Re-upload',
+      verify: 'Verify',
+      register: 'Register',
+      auditSuccess: 'Audit successful',
+      invoiceCodePlaceholder: 'Please enter invoice number',
+      invoiceTypePlaceholder: 'Please select invoice type',
+      ownerNamePlaceholder: 'Please enter owner name',
+      applicantPlaceholder: 'Please enter applicant',
+      phonePlaceholder: 'Please enter applicant phone'
+    },
+    deleteInvoiceApply: {
+      title: 'Confirm Operation',
+      confirmMessage: 'Confirm to delete this invoice application?'
+    },
+    uploadInvoicePhoto: {
+      title: 'Upload Invoice',
+      invoiceCode: 'Invoice Code',
+      invoice: 'Invoice',
+      codeRequired: 'Required, please enter invoice code',
+      photoRequired: 'Please select invoice photo'
+    },
+    wirteInvoiceEvent: {
+      title: 'Register/Verify',
+      type: 'Type',
+      remark: 'Remark',
+      typeRequired: 'Required, please select type',
+      remarkRequired: 'Required, please enter remark',
+      receive: 'Receive',
+      register: 'Register'
+    },
+    audit: {
+      title: 'Audit Information',
+      status: 'Audit Status',
+      reason: 'Reason',
+      statusRequired: 'Please select audit status',
+      reasonRequired: 'Required, please enter reason',
+      approve: 'Approve',
+      reject: 'Reject'
+    },
+    uploadImage: {
+      sizeLimit: 'Image size cannot exceed 2MB'
+    }
+  },
+  zh: {
+    invoiceApply: {
+      searchTitle: '查询条件',
+      title: '申请发票',
+      apply: '申请',
+      table: {
+        id: '编号',
+        invoiceType: '发票类型',
+        ownerName: '业主名称',
+        applicant: '申请人',
+        invoiceName: '发票名头',
+        taxNumber: '纳税人识别号',
+        addressPhone: '地址、电话',
+        amount: '申请金额',
+        invoiceCode: '发票号',
+        status: '审核状态',
+        applyTime: '申请时间'
+      },
+      states: {
+        all: '全部',
+        pendingReview: '待审核',
+        pendingUpload: '待上传',
+        reviewFailed: '审核失败',
+        pendingReceive: '带领用',
+        received: '已领用'
+      },
+      personal: '个人',
+      company: '企业',
+      notUploaded: '未上传',
+      openInvoice: '开票',
+      uploadInvoice: '上传发票',
+      reUpload: '重新上传',
+      verify: '核销',
+      register: '登记',
+      auditSuccess: '审核成功',
+      invoiceCodePlaceholder: '请填写发票号',
+      invoiceTypePlaceholder: '请选择发票类型',
+      ownerNamePlaceholder: '请填写业主名称',
+      applicantPlaceholder: '请填写申请人',
+      phonePlaceholder: '请填写申请人电话'
+    },
+    deleteInvoiceApply: {
+      title: '请确认您的操作',
+      confirmMessage: '确定删除申请发票'
+    },
+    uploadInvoicePhoto: {
+      title: '上传发票',
+      invoiceCode: '发票编号',
+      invoice: '发票',
+      codeRequired: '必填，请填写发票编号',
+      photoRequired: '请选择发票'
+    },
+    wirteInvoiceEvent: {
+      title: '登记核销',
+      type: '类型',
+      remark: '说明',
+      typeRequired: '必填，请选择类型',
+      remarkRequired: '必填，请填写说明',
+      receive: '领用',
+      register: '登记'
+    },
+    audit: {
+      title: '审核信息',
+      status: '审核状态',
+      reason: '原因',
+      statusRequired: '请审核',
+      reasonRequired: '必填，请填写原因',
+      approve: '同意',
+      reject: '拒绝'
+    },
+    uploadImage: {
+      sizeLimit: '图片大小不能超过 2MB'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/invoiceApplyList.vue b/src/views/fee/invoiceApplyList.vue
new file mode 100644
index 0000000..18bd169
--- /dev/null
+++ b/src/views/fee/invoiceApplyList.vue
@@ -0,0 +1,295 @@
+<template>
+  <div>
+    <el-row :gutter="20">
+      <el-col :span="4">
+        <el-card class="border-radius">
+          <div class="treeview attendance-staff">
+            <ul class="list-group text-center border-radius">
+              <li v-for="(item, index) in states" :key="index" @click="swatchState(item)" :class="{
+                'vc-node-selected': conditions.state === item.state
+              }" class="list-group-item node-orgTree">
+                {{ $t(`invoiceApply.states.${item.stateName}`) }}
+              </li>
+            </ul>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="20">
+        <el-row>
+          <el-col :span="24">
+            <el-card>
+              <div slot="header" class="text-left">
+                <span>{{ $t('invoiceApply.searchTitle') }}</span>
+              </div>
+              <el-row :gutter="20">
+                <el-col :span="4">
+                  <el-input v-model="conditions.invoiceCode" :placeholder="$t('invoiceApply.invoiceCodePlaceholder')" />
+                </el-col>
+                <el-col :span="4">
+                  <el-select v-model="conditions.invoiceType" :placeholder="$t('invoiceApply.invoiceTypePlaceholder')">
+                    <el-option label="请选择发票类型" value="" />
+                    <el-option label="个人" value="1001" />
+                    <el-option label="企业" value="2002" />
+                  </el-select>
+                </el-col>
+                <el-col :span="4">
+                  <el-input v-model="conditions.ownerName" :placeholder="$t('invoiceApply.ownerNamePlaceholder')" />
+                </el-col>
+                <el-col :span="4">
+                  <el-input v-model="conditions.createUserName" :placeholder="$t('invoiceApply.applicantPlaceholder')" />
+                </el-col>
+                <el-col :span="4">
+                  <el-input v-model="conditions.applyTel" :placeholder="$t('invoiceApply.phonePlaceholder')" />
+                </el-col>
+                <el-col :span="4">
+                  <el-button type="primary" @click="_queryInvoiceApplyMethod">
+                    <i class="el-icon-search" />
+                    <span>{{ $t('common.search') }}</span>
+                  </el-button>
+                </el-col>
+              </el-row>
+            </el-card>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-card>
+              <div slot="header" class="flex justify-between">
+                <span>{{ $t('invoiceApply.title') }}</span>
+                <el-button type="primary" size="small" class="float-right" @click="_invoiceApply">
+                  {{ $t('invoiceApply.apply') }}
+                </el-button>
+              </div>
+              <el-table :data="invoiceApplys" border style="width: 100%">
+                <el-table-column prop="applyId" :label="$t('invoiceApply.table.id')" align="center" />
+                <el-table-column prop="invoiceType" :label="$t('invoiceApply.table.invoiceType')" align="center">
+                  <template slot-scope="scope">
+                    {{ scope.row.invoiceType === '1001' ? $t('invoiceApply.personal') : $t('invoiceApply.company') }}
+                  </template>
+                </el-table-column>
+                <el-table-column prop="ownerName" :label="$t('invoiceApply.table.ownerName')" align="center" />
+                <el-table-column :label="$t('invoiceApply.table.applicant')" align="center">
+                  <template slot-scope="scope">
+                    {{ scope.row.createUserName }}({{ scope.row.applyTel }})
+                  </template>
+                </el-table-column>
+                <el-table-column prop="invoiceName" :label="$t('invoiceApply.table.invoiceName')" align="center" />
+                <el-table-column prop="invoiceNum" :label="$t('invoiceApply.table.taxNumber')" align="center" />
+                <el-table-column prop="invoiceAddress" :label="$t('invoiceApply.table.addressPhone')" align="center" />
+                <el-table-column prop="invoiceAmount" :label="$t('invoiceApply.table.amount')" align="center" />
+                <el-table-column prop="invoiceCode" :label="$t('invoiceApply.table.invoiceCode')" align="center">
+                  <template slot-scope="scope">
+                    {{ scope.row.invoiceCode || $t('invoiceApply.notUploaded') }}
+                  </template>
+                </el-table-column>
+                <el-table-column prop="stateName" :label="$t('invoiceApply.table.status')" align="center" />
+                <el-table-column prop="createTime" :label="$t('invoiceApply.table.applyTime')" align="center" />
+                <el-table-column :label="$t('common.operation')" align="center" width="220">
+                  <template slot-scope="scope">
+                    <el-button v-if="scope.row.state === 'W'" size="mini" @click="_openInvoiceAuditModel(scope.row)">
+                      {{ $t('common.audit') }}
+                    </el-button>
+                    <template v-else>
+                      <el-button v-if="hasPlugin('invoice') && scope.row.state !== 'W'" size="mini"
+                        @click="_toOpenInvoicePlugin(scope.row)">
+                        {{ $t('invoiceApply.openInvoice') }}
+                      </el-button>
+                      <div v-else>
+                        <el-button v-if="['U', 'G', 'C'].includes(scope.row.state)" size="mini"
+                          @click="_openUploadInvoicePhoto(scope.row)">
+                          {{ scope.row.state === 'U' ? $t('invoiceApply.uploadInvoice') : $t('invoiceApply.reUpload') }}
+                        </el-button>
+                        <el-button v-if="['U', 'G', 'C'].includes(scope.row.state)" size="mini"
+                          @click="_openUserGetInvoice(scope.row)">
+                          {{ scope.row.state === 'G' ? $t('invoiceApply.verify') : $t('invoiceApply.register') }}
+                        </el-button>
+                      </div>
+                    </template>
+                    <el-button size="mini" type="danger" @click="_openDeleteInvoiceApplyModel(scope.row)">
+                      {{ $t('common.delete') }}
+                    </el-button>
+                    <el-button size="mini" @click="_openInvoiceApplyDetail(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" />
+            </el-card>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+
+    <delete-invoice-apply ref="deleteDialog" @success="listInvoiceApplys" />
+    <upload-invoice-photo ref="uploadPhotoDialog" @success="listInvoiceApplys" />
+    <wirte-invoice-event ref="writeEventDialog" @success="listInvoiceApplys" />
+    <audit-dialog ref="auditDialog" @success="notifyAuditInfo" />
+  </div>
+</template>
+
+<script>
+import { listInvoiceApply, auditInvoiceApply } from '@/api/fee/invoiceApplyApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import DeleteInvoiceApply from '@/components/fee/deleteInvoiceApply'
+import UploadInvoicePhoto from '@/components/fee/uploadInvoicePhoto'
+import WirteInvoiceEvent from '@/components/fee/wirteInvoiceEvent'
+import AuditDialog from '@/components/fee/audit'
+
+export default {
+  name: 'InvoiceApplyList',
+  components: {
+    DeleteInvoiceApply,
+    UploadInvoicePhoto,
+    WirteInvoiceEvent,
+    AuditDialog
+  },
+  data() {
+    return {
+      states: [
+        { stateName: 'all', state: '' },
+        { stateName: 'pendingReview', state: 'W' },
+        { stateName: 'pendingUpload', state: 'U' },
+        { stateName: 'reviewFailed', state: 'F' },
+        { stateName: 'pendingReceive', state: 'G' },
+        { stateName: 'received', state: 'C' }
+      ],
+      conditions: {
+        invoiceCode: '',
+        invoiceType: '',
+        ownerName: '',
+        applyTel: '',
+        createUserName: '',
+        state: ''
+      },
+      invoiceApplys: [],
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+      auditData: {}
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.listInvoiceApplys()
+  },
+  methods: {
+    async listInvoiceApplys() {
+      try {
+        const params = {
+          ...this.conditions,
+          page: this.page.current,
+          row: this.page.size,
+          communityId: this.communityId
+        }
+        const res = await listInvoiceApply(params)
+        this.invoiceApplys = res.data
+        this.page.total = res.total
+      } catch (error) {
+        this.$message.error(this.$t('common.fetchError'))
+      }
+    },
+    handleSizeChange(size) {
+      this.page.size = size
+      this.listInvoiceApplys()
+    },
+    handleCurrentChange(current) {
+      this.page.current = current
+      this.listInvoiceApplys()
+    },
+    swatchState(item) {
+      this.conditions.state = item.state
+      this.listInvoiceApplys()
+    },
+    _queryInvoiceApplyMethod() {
+      this.page.current = 1
+      this.listInvoiceApplys()
+    },
+    _invoiceApply() {
+      this.$router.push('/views/fee/ownerApplyInvoice')
+    },
+    _openInvoiceApplyDetail(row) {
+      this.$router.push(`/views/fee/invoiceApplyDetail?applyId=${row.applyId}`)
+    },
+    _openInvoiceAuditModel(row) {
+      this.auditData = { ...row }
+      this.$refs.auditDialog.open()
+    },
+    async notifyAuditInfo(auditInfo) {
+      try {
+        const params = {
+          ...this.auditData,
+          state: auditInfo.state,
+          remark: auditInfo.remark,
+          communityId: this.communityId
+        }
+        await auditInvoiceApply(params)
+        this.$message.success(this.$t('invoiceApply.auditSuccess'))
+        this.listInvoiceApplys()
+      } catch (error) {
+        this.$message.error(error.message)
+      }
+    },
+    _openUploadInvoicePhoto(row) {
+      this.$refs.uploadPhotoDialog.open(row)
+    },
+    _openUserGetInvoice(row) {
+      this.$refs.writeEventDialog.open(row)
+    },
+    _toOpenInvoicePlugin(row) {
+      const userInfo = this.$store.getters.userInfo
+      this.$router.push({
+        path: '/plugin',
+        query: {
+          pluginType: 'invoice',
+          orderNo: row.applyId,
+          staffName: userInfo.name,
+          communityId: this.communityId
+        }
+      })
+    },
+    _openDeleteInvoiceApplyModel(row) {
+      this.$refs.deleteDialog.open(row)
+    },
+    hasPlugin(pluginName) {
+      // 实际项目中需要根据业务逻辑实现
+      console.log(pluginName)
+      return true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.border-radius {
+  border-radius: 4px;
+}
+
+.list-group {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.list-group-item {
+  padding: 10px 15px;
+  margin-bottom: -1px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  cursor: pointer;
+}
+
+.list-group-item:hover,
+.vc-node-selected {
+  background-color: #f5f7fa;
+  color: #409EFF;
+}
+
+.float-right {
+  float: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/fee/ownerApplyInvoiceLang.js b/src/views/fee/ownerApplyInvoiceLang.js
new file mode 100644
index 0000000..44568ae
--- /dev/null
+++ b/src/views/fee/ownerApplyInvoiceLang.js
@@ -0,0 +1,114 @@
+export const messages = {
+  en: {
+    ownerApplyInvoice: {
+      title: 'Invoice Application',
+      invoiceTitle: 'Invoice Title',
+      taxpayerId: 'Taxpayer ID',
+      invoiceType: 'Invoice Type',
+      addressPhone: 'Address & Phone',
+      owner: 'Owner',
+      content: 'Content',
+      personal: 'Personal',
+      enterprise: 'Enterprise',
+      paidFees: 'Paid Fees',
+      accountDeposit: 'Account Deposit',
+      feeName: 'Fee Item',
+      payer: 'Payer',
+      receivablePaid: 'Receivable/Paid',
+      paymentMethod: 'Payment Method',
+      paymentPeriod: 'Payment Period',
+      paymentTime: 'Payment Time',
+      cashier: 'Cashier',
+      status: 'Status',
+      remark: 'Remark',
+      accountName: 'Account Name',
+      accountType: 'Account Type',
+      depositAmount: 'Deposit Amount',
+      depositMethod: 'Deposit Method',
+      totalAmount: 'Total Amount',
+      depositTime: 'Deposit Time',
+      back: 'Back',
+      select: 'Select',
+      submit: 'Submit',
+      required: 'Required',
+      chooseInvoiceTitle: 'Please select invoice title',
+      chooseTaxId: 'Please select taxpayer ID',
+      chooseInvoiceType: 'Please select invoice type',
+      chooseAddressPhone: 'Please enter address and phone',
+      chooseContent: 'Please select content',
+      noFeeSelected: 'No paid fees selected',
+      noDepositSelected: 'No account deposit selected'
+    },
+    searchOwnerInvoice: {
+      title: 'Select Owner',
+      ownerName: 'Owner Name',
+      invoiceType: 'Invoice Type',
+      invoiceTitle: 'Invoice Title',
+      taxpayerId: 'Taxpayer ID',
+      addressPhone: 'Address & Phone',
+      operation: 'Operation',
+      search: 'Search',
+      placeholderRoom: 'Enter room number (building-unit-room)',
+      placeholderOwner: 'Enter owner name',
+      select: 'Select',
+      personal: 'Personal',
+      company: 'Company'
+    }
+  },
+  zh: {
+    ownerApplyInvoice: {
+      title: '发票申请',
+      invoiceTitle: '发票抬头',
+      taxpayerId: '纳税人识别号',
+      invoiceType: '发票类型',
+      addressPhone: '地址、电话',
+      owner: '业主',
+      content: '开票内容',
+      personal: '个人',
+      enterprise: '企业',
+      paidFees: '已缴费费用',
+      accountDeposit: '账户预存',
+      feeName: '费用项',
+      payer: '收费对象',
+      receivablePaid: '应收/实收',
+      paymentMethod: '缴费方式',
+      paymentPeriod: '缴费起始段',
+      paymentTime: '缴费时间',
+      cashier: '收银员',
+      status: '状态',
+      remark: '备注',
+      accountName: '账户名称',
+      accountType: '账户类型',
+      depositAmount: '预存金额',
+      depositMethod: '预存方式',
+      totalAmount: '总金额',
+      depositTime: '预存时间',
+      back: '返回',
+      select: '选择',
+      submit: '提交',
+      required: '必填',
+      chooseInvoiceTitle: '请选择发票抬头',
+      chooseTaxId: '请选择纳税人识别号',
+      chooseInvoiceType: '请选择发票类型',
+      chooseAddressPhone: '请输入地址、电话',
+      chooseContent: '请选择开票内容',
+      noFeeSelected: '未选择已缴费费用',
+      noDepositSelected: '未选择账户预存'
+    },
+    searchOwnerInvoice: {
+      title: '选择业主',
+      ownerName: '业主名称',
+      invoiceType: '发票类型',
+      invoiceTitle: '发票名头',
+      taxpayerId: '纳税人识别号',
+      addressPhone: '地址、电话',
+      operation: '操作',
+      search: '查询',
+      placeholderRoom: '输入房屋编号楼栋-单元-房屋',
+      placeholderOwner: '输入业主名称',
+      select: '选择',
+      personal: '个人',
+      company: '公司'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/ownerApplyInvoiceList.vue b/src/views/fee/ownerApplyInvoiceList.vue
new file mode 100644
index 0000000..c6190b1
--- /dev/null
+++ b/src/views/fee/ownerApplyInvoiceList.vue
@@ -0,0 +1,296 @@
+<template>
+  <div class="owner-apply-invoice-container">
+    <el-card>
+      <div slot="header" class="clearfix flex justify-between">
+        <h3>{{ $t('ownerApplyInvoice.title') }}</h3>
+        <div class="header-actions">
+          <el-button type="primary" size="small" @click="goBack">
+            {{ $t('ownerApplyInvoice.back') }}
+          </el-button>
+        </div>
+      </div>
+
+      <el-form ref="form" :model="formData" label-width="150px">
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item :label="$t('ownerApplyInvoice.invoiceTitle')" required>
+              <el-input v-model="formData.invoiceName" :placeholder="$t('ownerApplyInvoice.chooseInvoiceTitle')"
+                disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="4" class="text-left">
+            <el-button type="primary" size="small" style="margin-left: 150px; margin-bottom: 20px"
+              @click="openSelectOwner">
+              {{ $t('ownerApplyInvoice.select') }}
+            </el-button></el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('ownerApplyInvoice.taxpayerId')" required>
+              <el-input v-model="formData.invoiceNum" :placeholder="$t('ownerApplyInvoice.chooseTaxId')" disabled />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item :label="$t('ownerApplyInvoice.invoiceType')" required>
+              <el-select v-model="formData.invoiceType" :placeholder="$t('ownerApplyInvoice.chooseInvoiceType')"
+                style="width:100%">
+                <el-option :label="$t('ownerApplyInvoice.personal')" value="1001" />
+                <el-option :label="$t('ownerApplyInvoice.enterprise')" value="2002" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('ownerApplyInvoice.addressPhone')" required>
+              <el-input v-model="formData.invoiceAddress" :placeholder="$t('ownerApplyInvoice.chooseAddressPhone')" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item :label="$t('ownerApplyInvoice.owner')" required>
+              <el-input v-model="formData.ownerName" :placeholder="$t('ownerApplyInvoice.chooseContent')" disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('ownerApplyInvoice.content')" required>
+              <el-select v-model="formData.invoiceFlag" :placeholder="$t('ownerApplyInvoice.chooseContent')"
+                style="width:100%" @change="handleContentChange">
+                <el-option :label="$t('ownerApplyInvoice.paidFees')" value="FEE" />
+                <el-option :label="$t('ownerApplyInvoice.accountDeposit')" value="ACCT" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+
+
+    </el-card>
+
+    <!-- 已缴费费用 -->
+    <el-card v-if="formData.invoiceFlag === 'FEE'" class="mt-20">
+      <div slot="header" class="flex justify-between">
+        <h3>{{ $t('ownerApplyInvoice.paidFees') }}</h3>
+      </div>
+
+      <el-table :data="feeDetails" border style="width: 100%">
+        <el-table-column type="selection" width="55" align="center" @select-all="handleFeeSelectAll" />
+        <el-table-column prop="feeName" :label="$t('ownerApplyInvoice.feeName')" align="center" />
+        <el-table-column prop="payerObjName" :label="$t('ownerApplyInvoice.payer')" align="center" />
+        <el-table-column :label="$t('ownerApplyInvoice.receivablePaid')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.receivableAmount }}/{{ scope.row.receivedAmount }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="primeRateName" :label="$t('ownerApplyInvoice.paymentMethod')" align="center" />
+        <el-table-column :label="$t('ownerApplyInvoice.paymentPeriod')" align="center">
+          <template slot-scope="scope">
+            {{ formatDate(scope.row.startTime) }}~<br>
+            {{ formatDate(scope.row.endTime) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" :label="$t('ownerApplyInvoice.paymentTime')" align="center" />
+        <el-table-column prop="cashierName" :label="$t('ownerApplyInvoice.cashier')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.cashierName || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="stateName" :label="$t('ownerApplyInvoice.status')" align="center" />
+        <el-table-column prop="remark" :label="$t('ownerApplyInvoice.remark')" align="center" />
+      </el-table>
+    </el-card>
+
+    <!-- 账户预存 -->
+    <el-card v-if="formData.invoiceFlag === 'ACCT'" class="mt-20">
+      <div slot="" class="flex justify-between">
+        <h3>{{ $t('ownerApplyInvoice.accountDeposit') }}</h3>
+      </div>
+
+      <el-table :data="acctDetails" border style="width: 100%">
+        <el-table-column type="selection" width="55" align="center" @select-all="handleAcctSelectAll" />
+        <el-table-column prop="acctName" :label="$t('ownerApplyInvoice.accountName')" align="center" />
+        <el-table-column prop="acctTypeName" :label="$t('ownerApplyInvoice.accountType')" align="center" />
+        <el-table-column prop="ownerName" :label="$t('ownerApplyInvoice.owner')" align="center" />
+        <el-table-column prop="receivedAmount" :label="$t('ownerApplyInvoice.depositAmount')" align="center" />
+        <el-table-column prop="primeRateName" :label="$t('ownerApplyInvoice.depositMethod')" align="center" />
+        <el-table-column prop="amount" :label="$t('ownerApplyInvoice.totalAmount')" align="center" />
+        <el-table-column prop="createTime" :label="$t('ownerApplyInvoice.depositTime')" align="center" />
+      </el-table>
+    </el-card>
+
+    <div class="mt-20 text-right">
+      <el-button type="primary" @click="handleSubmit">
+        {{ $t('ownerApplyInvoice.submit') }}
+      </el-button>
+    </div>
+
+    <search-owner-invoice ref="searchOwnerInvoice" :visible.sync="showSearchDialog" @select="handleOwnerSelect" />
+  </div>
+</template>
+
+<script>
+import { queryFeeDetail, listAccountReceipt, saveInvoiceApply } from '@/api/fee/ownerApplyInvoiceApi'
+import SearchOwnerInvoice from '@/components/fee/searchOwnerInvoice'
+import { formatDate } from '@/utils/dateUtil'
+
+export default {
+  name: 'OwnerApplyInvoiceList',
+  components: {
+    SearchOwnerInvoice
+  },
+  data() {
+    return {
+      showSearchDialog: false,
+      formData: {
+        oiId: '',
+        ownerId: '',
+        ownerName: '',
+        invoiceType: '',
+        invoiceName: '',
+        invoiceAddress: '',
+        invoiceNum: '',
+        detailIds: [],
+        feeDetails: [],
+        invoiceFlag: 'FEE',
+        arIds: [],
+        acctDetails: []
+      },
+      feeDetails: [],
+      acctDetails: []
+    }
+  },
+  methods: {
+    formatDate,
+    goBack() {
+      this.$router.go(-1)
+    },
+    openSelectOwner() {
+      this.showSearchDialog = true
+      this.$nextTick(() => {
+        this.$refs.searchOwnerInvoice.open()
+      })
+    },
+    handleOwnerSelect(owner) {
+      Object.assign(this.formData, owner)
+      this.formData.detailIds = []
+      this.formData.arIds = []
+
+      if (this.formData.invoiceFlag === 'FEE') {
+        this.loadFeeDetails()
+      } else {
+        this.loadAcctDetails()
+      }
+    },
+    async loadFeeDetails() {
+      try {
+        const params = {
+          page: 1,
+          row: 50,
+          ownerId: this.formData.ownerId,
+          openInvoice: 'N'
+        }
+
+        const res = await queryFeeDetail(params)
+        this.feeDetails = res.feeDetails || []
+
+        // 默认全选
+        this.formData.detailIds = this.feeDetails.map(item => item.detailId)
+      } catch (error) {
+        console.error('Failed to load fee details:', error)
+        this.$message.error(this.$t('common.loadFailed'))
+      }
+    },
+    async loadAcctDetails() {
+      try {
+        const params = {
+          page: 1,
+          row: 50,
+          ownerId: this.formData.ownerId
+        }
+
+        const res = await listAccountReceipt(params)
+        this.acctDetails = res.data || []
+
+        // 默认全选
+        this.formData.arIds = this.acctDetails.map(item => item.arId)
+      } catch (error) {
+        console.error('Failed to load account details:', error)
+        this.$message.error(this.$t('common.loadFailed'))
+      }
+    },
+    handleContentChange() {
+      if (!this.formData.ownerId) return
+
+      this.formData.detailIds = []
+      this.formData.arIds = []
+
+      if (this.formData.invoiceFlag === 'FEE') {
+        this.loadFeeDetails()
+      } else {
+        this.loadAcctDetails()
+      }
+    },
+    handleFeeSelectAll(selection) {
+      this.formData.detailIds = selection.length
+        ? this.feeDetails.map(item => item.detailId)
+        : []
+    },
+    handleAcctSelectAll(selection) {
+      this.formData.arIds = selection.length
+        ? this.acctDetails.map(item => item.arId)
+        : []
+    },
+    async handleSubmit() {
+      try {
+        // 验证表单
+        if (!this.formData.ownerId) {
+          this.$message.warning(this.$t('ownerApplyInvoice.chooseContent'))
+          return
+        }
+
+        if (this.formData.invoiceFlag === 'FEE' && !this.formData.detailIds.length) {
+          this.$message.warning(this.$t('ownerApplyInvoice.noFeeSelected'))
+          return
+        }
+
+        if (this.formData.invoiceFlag === 'ACCT' && !this.formData.arIds.length) {
+          this.$message.warning(this.$t('ownerApplyInvoice.noDepositSelected'))
+          return
+        }
+
+        // 准备提交数据
+        const submitData = {
+          ...this.formData,
+          detailIds: this.formData.invoiceFlag === 'FEE' ? this.formData.detailIds : [],
+          arIds: this.formData.invoiceFlag === 'ACCT' ? this.formData.arIds : []
+        }
+
+        // 调用API
+        await saveInvoiceApply(submitData)
+        this.$message.success(this.$t('common.submitSuccess'))
+        this.goBack()
+      } catch (error) {
+        console.error('Failed to submit invoice application:', error)
+        this.$message.error(error.message || this.$t('common.submitFailed'))
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.owner-apply-invoice-container {
+  padding: 20px;
+}
+
+.mt-20 {
+  margin-top: 20px;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.header-actions {}
+</style>
\ No newline at end of file
diff --git a/src/views/fee/ownerInvoiceLang.js b/src/views/fee/ownerInvoiceLang.js
new file mode 100644
index 0000000..4dbba76
--- /dev/null
+++ b/src/views/fee/ownerInvoiceLang.js
@@ -0,0 +1,144 @@
+export const messages = {
+  en: {
+    searchCondition: 'Search Conditions',
+    ownerNamePlaceholder: 'Enter owner name',
+    invoiceTypePlaceholder: 'Select invoice type',
+    personal: 'Personal',
+    enterprise: 'Enterprise',
+    invoiceHeaderPlaceholder: 'Enter invoice header',
+    search: 'Search',
+    invoiceHeader: 'Invoice Header',
+    add: 'Add',
+    serialNumber: 'Serial Number',
+    ownerName: 'Owner Name',
+    invoiceType: 'Invoice Type',
+    taxpayerId: 'Taxpayer ID',
+    address: 'Address',
+    phone: 'Phone',
+    bankAccount: 'Bank Account',
+    remark: 'Remark',
+    operation: 'Operation',
+    modify: 'Modify',
+    delete: 'Delete',
+    confirmDeleteTitle: 'Confirm Deletion',
+    confirmDeleteContent: 'Are you sure to delete this invoice header?',
+    cancel: 'Cancel',
+    confirmDelete: 'Confirm Delete',
+    editTitle: 'Edit',
+    requiredInvoiceType: 'Invoice type is required',
+    requiredInvoiceHeader: 'Invoice header is required',
+    requiredTaxpayerId: 'Taxpayer ID is required',
+    requiredAddress: 'Address is required',
+    requiredPhone: 'Phone is required',
+    requiredBankAccount: 'Bank account is required',
+    optionalRemark: 'Remark (optional)',
+    save: 'Save',
+    addOwnerInvoice: {
+      title: 'Add Invoice',
+      back: 'Back',
+      owner: 'Owner',
+      selectOwner: 'Select Owner',
+      invoiceType: 'Invoice Type',
+      invoiceTitle: 'Invoice Title',
+      taxNumber: 'Taxpayer ID',
+      address: 'Address',
+      phone: 'Phone',
+      bankAccount: 'Bank Account',
+      remarks: 'Remarks',
+      save: 'Save',
+      required: 'Required',
+      personal: 'Personal',
+      enterprise: 'Enterprise',
+      placeholder: {
+        owner: 'Please select owner',
+        invoiceType: 'Please select invoice type',
+        invoiceTitle: 'Please enter invoice title',
+        taxNumber: 'Please enter taxpayer ID',
+        address: 'Please enter address',
+        phone: 'Please enter phone number',
+        bankAccount: 'Please enter bank account',
+        remarks: 'Optional remarks'
+      },
+      validation: {
+        ownerRequired: 'Owner is required',
+        typeRequired: 'Invoice type is required',
+        titleRequired: 'Invoice title is required',
+        taxNumberRequired: 'Taxpayer ID is required',
+        addressRequired: 'Address is required',
+        phoneRequired: 'Phone is required',
+        bankAccountRequired: 'Bank account is required'
+      }
+    },
+  },
+  zh: {
+    searchCondition: '查询条件',
+    ownerNamePlaceholder: '请输入业主名称',
+    invoiceTypePlaceholder: '请选择发票类型',
+    personal: '个人',
+    enterprise: '企业',
+    invoiceHeaderPlaceholder: '请输入发票名头',
+    search: '查询',
+    invoiceHeader: '发票抬头',
+    add: '添加',
+    serialNumber: '编号',
+    ownerName: '业主名称',
+    invoiceType: '发票类型',
+    taxpayerId: '纳税人识别号',
+    address: '地址',
+    phone: '电话',
+    bankAccount: '开户行及账号',
+    remark: '备注',
+    operation: '操作',
+    modify: '修改',
+    delete: '删除',
+    confirmDeleteTitle: '请确认您的操作',
+    confirmDeleteContent: '确定删除发票抬头',
+    cancel: '点错了',
+    confirmDelete: '确认删除',
+    editTitle: '修改',
+    requiredInvoiceType: '必填，请选择发票类型',
+    requiredInvoiceHeader: '必填，请填写发票名头',
+    requiredTaxpayerId: '必填，请填写纳税人识别号',
+    requiredAddress: '必填，请填写地址',
+    requiredPhone: '必填，请填写电话',
+    requiredBankAccount: '必填，请填写开户行及账号',
+    optionalRemark: '选填，请填写备注',
+    save: '保存',
+    addOwnerInvoice: {
+      title: '添加发票抬头',
+      back: '返回',
+      owner: '业主',
+      selectOwner: '选择业主',
+      invoiceType: '发票类型',
+      invoiceTitle: '发票名头',
+      taxNumber: '纳税人识别号',
+      address: '地址',
+      phone: '电话',
+      bankAccount: '开户行及账号',
+      remarks: '备注',
+      save: '保存',
+      required: '必填',
+      personal: '个人',
+      enterprise: '企业',
+      placeholder: {
+        owner: '请选择业主',
+        invoiceType: '请选择发票类型',
+        invoiceTitle: '请填写发票名头',
+        taxNumber: '请填写纳税人识别号',
+        address: '请填写地址',
+        phone: '请填写电话',
+        bankAccount: '请填写开户行及账号',
+        remarks: '选填备注'
+      },
+      validation: {
+        ownerRequired: '业主不能为空',
+        typeRequired: '发票类型不能为空',
+        titleRequired: '发票名头不能为空',
+        taxNumberRequired: '纳税人识别号不能为空',
+        addressRequired: '地址不能为空',
+        phoneRequired: '电话不能为空',
+        bankAccountRequired: '开户行及账号不能为空'
+      }
+    },
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/ownerInvoiceList.vue b/src/views/fee/ownerInvoiceList.vue
new file mode 100644
index 0000000..7e27e3e
--- /dev/null
+++ b/src/views/fee/ownerInvoiceList.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="owner-invoice-container">
+    <!-- 查询条件 -->
+    <el-card class="search-card">
+      <div slot="header" class="clearfix">
+        <span>{{ $t('searchCondition') }}</span>
+      </div>
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-input v-model="searchForm.ownerName" :placeholder="$t('ownerNamePlaceholder')" />
+        </el-col>
+
+        <el-col :span="6">
+          <el-select v-model="searchForm.invoiceType" :placeholder="$t('invoiceTypePlaceholder')" style="width: 100%">
+            <el-option value="" :label="$t('invoiceTypePlaceholder')" />
+            <el-option value="1001" :label="$t('personal')" />
+            <el-option value="2002" :label="$t('enterprise')" />
+          </el-select>
+        </el-col>
+
+        <el-col :span="6">
+          <el-input v-model="searchForm.invoiceName" :placeholder="$t('invoiceHeaderPlaceholder')" />
+        </el-col>
+
+        <el-col :span="6">
+          <el-button type="primary" @click="fetchData">{{ $t('search') }}</el-button>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <!-- 发票抬头列表 -->
+    <el-card class="list-card">
+      <div slot="header" class="clearfix">
+        <span>{{ $t('invoiceHeader') }}</span>
+        <el-button type="primary" size="small" style="float: right" @click="handleAdd">
+          {{ $t('add') }}
+        </el-button>
+      </div>
+
+      <el-table :data="tableData" border style="width: 100%" v-loading="loading">
+        <el-table-column prop="oiId" :label="$t('serialNumber')" align="center" min-width="80" />
+
+        <el-table-column prop="ownerName" :label="$t('ownerName')" align="center" min-width="120" />
+
+        <el-table-column prop="invoiceType" :label="$t('invoiceType')" align="center" min-width="100">
+          <template slot-scope="scope">
+            {{ scope.row.invoiceType === '1001' ? $t('personal') : $t('enterprise') }}
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="invoiceName" :label="$t('invoiceHeader')" align="center" min-width="150" />
+
+        <el-table-column prop="invoiceNum" :label="$t('taxpayerId')" align="center" min-width="150" />
+
+        <el-table-column prop="invoiceAddress" :label="$t('address')" align="center" min-width="150" />
+
+        <el-table-column prop="invoiceLink" :label="$t('phone')" align="center" min-width="120" />
+
+        <el-table-column prop="invoiceAccount" :label="$t('bankAccount')" align="center" min-width="200" />
+
+        <el-table-column prop="remark" :label="$t('remark')" align="center" min-width="150" />
+
+        <el-table-column :label="$t('operation')" align="center" fixed="right" width="180">
+          <template slot-scope="scope">
+            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">
+              {{ $t('modify') }}
+            </el-button>
+            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
+              {{ $t('delete') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <el-pagination background layout="total, sizes, prev, pager, next" :current-page="pagination.current"
+        :page-size="pagination.size" :total="pagination.total" @size-change="handleSizeChange"
+        @current-change="handlePageChange" style="margin-top: 20px; text-align: right;" />
+    </el-card>
+
+    <!-- 编辑组件 -->
+    <edit-owner-invoice ref="editDialog" @success="fetchData" />
+
+    <!-- 删除组件 -->
+    <delete-owner-invoice ref="deleteDialog" @success="fetchData" />
+  </div>
+</template>
+
+<script>
+import { listOwnerInvoice } from '@/api/fee/ownerInvoiceApi'
+import EditOwnerInvoice from '@/components/fee/editOwnerInvoice'
+import DeleteOwnerInvoice from '@/components/fee/deleteOwnerInvoice'
+
+export default {
+  name: 'OwnerInvoiceList',
+  components: {
+    EditOwnerInvoice,
+    DeleteOwnerInvoice
+  },
+  data() {
+    return {
+      loading: false,
+      searchForm: {
+        ownerName: '',
+        invoiceType: '',
+        invoiceName: ''
+      },
+      tableData: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    async fetchData() {
+      this.loading = true
+      try {
+        const params = {
+          ...this.searchForm,
+          page: this.pagination.current,
+          row: this.pagination.size
+        }
+
+        const response = await listOwnerInvoice(params)
+        this.tableData = response.data
+        this.pagination.total = response.total
+      } catch (error) {
+        this.$message.error(error.message || this.$t('common.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+
+    handleAdd() {
+      this.$router.push('/views/fee/addOwnerInvoice')
+    },
+
+    handleEdit(row) {
+      this.$refs.editDialog.open({ ...row })
+    },
+
+    handleDelete(row) {
+      this.$refs.deleteDialog.open(row)
+    },
+
+    handlePageChange(page) {
+      this.pagination.current = page
+      this.fetchData()
+    },
+
+    handleSizeChange(size) {
+      this.pagination.size = size
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.owner-invoice-container {
+  padding: 20px;
+
+  .search-card,
+  .list-card {
+    margin-bottom: 20px;
+  }
+
+  .clearfix {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+</style>
\ No newline at end of file