diff --git a/src/api/oa/complaintDetailApi.js b/src/api/oa/complaintDetailApi.js
new file mode 100644
index 0000000..1adc590
--- /dev/null
+++ b/src/api/oa/complaintDetailApi.js
@@ -0,0 +1,97 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 获取投诉详情
+export function getComplaintDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/complaint.listComplaints',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取工单流转记录
+export function listComplaintEvent(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/complaint.listComplaintEvent',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取工单评价列表
+export function listComplaintAppraise(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/complaintAppraise.listComplaintAppraise',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 回复工单评价
+export function replyComplaintAppraise(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/complaintAppraise.replyComplaintAppraise',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取工单类型列表
+export function listComplaintType(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/complaintType.listComplaintType',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/oa/uodoComplaintsApi.js b/src/api/oa/uodoComplaintsApi.js
new file mode 100644
index 0000000..d86950d
--- /dev/null
+++ b/src/api/oa/uodoComplaintsApi.js
@@ -0,0 +1,56 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 获取待办投诉单列表
+export function listAuditComplaints(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/auditUser.listAuditComplaints',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 办理投诉单
+export function auditComplaint(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/complaint.auditComplaint',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取投诉单详情
+export function getComplaintDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/complaint.getComplaint',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/components/oa/ComplaintDetailAppraise.vue b/src/components/oa/ComplaintDetailAppraise.vue
new file mode 100644
index 0000000..ec8b0c3
--- /dev/null
+++ b/src/components/oa/ComplaintDetailAppraise.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="complaint-detail-appraise">
+    <el-table
+      :data="appraises"
+      border
+      style="width: 100%"
+      v-loading="loading"
+    >
+      <el-table-column
+        prop="createUserName"
+        :label="$t('complaintDetailAppraise.userName')"
+        align="center"
+      />
+      <el-table-column
+        prop="context"
+        :label="$t('complaintDetailAppraise.content')"
+        align="center"
+      />
+      <el-table-column
+        prop="score"
+        :label="$t('complaintDetailAppraise.score')"
+        align="center"
+      />
+      <el-table-column
+        prop="state"
+        :label="$t('complaintDetailAppraise.status')"
+        align="center"
+      >
+        <template slot-scope="scope">
+          <span>{{ scope.row.state === 'W' ? $t('complaintDetailAppraise.waitReply') : $t('complaintDetailAppraise.replied') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="createTime"
+        :label="$t('complaintDetailAppraise.time')"
+        align="center"
+      />
+      <el-table-column
+        prop="replyUserName"
+        :label="$t('complaintDetailAppraise.replyUser')"
+        align="center"
+      />
+      <el-table-column
+        prop="replyContext"
+        :label="$t('complaintDetailAppraise.replyContent')"
+        align="center"
+      />
+      <el-table-column
+        :label="$t('common.operation')"
+        align="center"
+      >
+        <template slot-scope="scope">
+          <el-button
+            v-if="scope.row.state === 'W'"
+            type="text"
+            size="small"
+            @click="openReplyModal(scope.row)"
+          >
+            {{ $t('complaintDetailAppraise.reply') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <reply-complaint-appraise
+      ref="replyComplaintAppraise"
+      @success="handleSuccess"
+    />
+  </div>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { listComplaintAppraise } from '@/api/oa/complaintDetailApi'
+import ReplyComplaintAppraise from './ReplyComplaintAppraise'
+
+export default {
+  name: 'ComplaintDetailAppraise',
+  components: {
+    ReplyComplaintAppraise
+  },
+  data() {
+    return {
+      appraises: [],
+      loading: false,
+      complaintId: '',
+      communityId: ''
+    }
+  },
+  methods: {
+    async initData(params) {
+      this.communityId = getCommunityId()
+      this.complaintId = params.complaintId
+      await this.loadData()
+    },
+    async loadData() {
+      try {
+        this.loading = true
+        const params = {
+          communityId: this.communityId,
+          complaintId: this.complaintId,
+          page: 1,
+          row: 100
+        }
+        const { data } = await listComplaintAppraise(params)
+        this.appraises = data || []
+      } catch (error) {
+        console.error('获取工单评价数据失败:', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    openReplyModal(row) {
+      this.$refs.replyComplaintAppraise.open(row)
+    },
+    handleSuccess() {
+      this.loadData()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.complaint-detail-appraise {
+  margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/oa/ComplaintDetailEvent.vue b/src/components/oa/ComplaintDetailEvent.vue
new file mode 100644
index 0000000..0f05851
--- /dev/null
+++ b/src/components/oa/ComplaintDetailEvent.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="complaint-detail-event">
+    <el-table :data="events" border style="width: 100%" v-loading="loading">
+      <el-table-column prop="eventType" :label="$t('complaintDetailEvent.type')" align="center">
+        <template slot-scope="scope">
+          <span v-if="scope.row.eventType === '1000'">{{ $t('complaintDetailEvent.submit') }}</span>
+          <span v-else-if="scope.row.eventType === '1001'">{{ $t('complaintDetailEvent.process') }}</span>
+          <span v-else-if="scope.row.eventType === '2002'">{{ $t('complaintDetailEvent.evaluate') }}</span>
+          <span v-else>{{ $t('complaintDetailEvent.reply') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createUserName" :label="$t('complaintDetailEvent.operator')" align="center" />
+      <el-table-column prop="remark" :label="$t('complaintDetailEvent.remark')" align="center" />
+      <el-table-column prop="createTime" :label="$t('complaintDetailEvent.time')" align="center" />
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { listComplaintEvent } from '@/api/oa/complaintDetailApi'
+
+export default {
+  name: 'ComplaintDetailEvent',
+  data() {
+    return {
+      events: [],
+      loading: false,
+      complaintId: '',
+      communityId: ''
+    }
+  },
+  methods: {
+    async initData(params) {
+      this.communityId = getCommunityId()
+      this.complaintId = params.complaintId
+      await this.loadData()
+    },
+    async loadData() {
+      try {
+        this.loading = true
+        const params = {
+          communityId: this.communityId,
+          complaintId: this.complaintId,
+          page: 1,
+          row: 100
+        }
+        const { data } = await listComplaintEvent(params)
+        this.events = data || []
+      } catch (error) {
+        console.error('获取工单流转数据失败:', error)
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.complaint-detail-event {
+  margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/oa/ComplaintDetailType.vue b/src/components/oa/ComplaintDetailType.vue
new file mode 100644
index 0000000..a6a2979
--- /dev/null
+++ b/src/components/oa/ComplaintDetailType.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="complaint-detail-type">
+    <el-table
+      :data="complaintTypes"
+      border
+      style="width: 100%"
+      v-loading="loading"
+    >
+      <el-table-column
+        prop="typeName"
+        :label="$t('complaintDetailType.typeName')"
+        align="center"
+      />
+      <el-table-column
+        prop="notifyWay"
+        :label="$t('complaintDetailType.notifyWay')"
+        align="center"
+      >
+        <template slot-scope="scope">
+          <span>{{ scope.row.notifyWay === 'SMS' ? $t('complaintDetailType.sms') : $t('complaintDetailType.wechat') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="appraiseReply"
+        :label="$t('complaintDetailType.appraiseReply')"
+        align="center"
+      >
+        <template slot-scope="scope">
+          <span>{{ scope.row.appraiseReply === 'Y' ? $t('complaintDetailType.autoReply') : $t('complaintDetailType.manualReply') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        :label="$t('complaintDetailType.handler')"
+        align="center"
+      >
+        <template slot-scope="scope">
+          <div v-for="(item, index) in scope.row.staffs" :key="index">
+            {{ item.staffName }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="createTime"
+        :label="$t('complaintDetailType.createTime')"
+        align="center"
+      />
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { listComplaintType } from '@/api/oa/complaintDetailApi'
+
+export default {
+  name: 'ComplaintDetailType',
+  data() {
+    return {
+      complaintTypes: [],
+      loading: false,
+      typeCd: '',
+      communityId: ''
+    }
+  },
+  methods: {
+    async initData(params) {
+      this.communityId = getCommunityId()
+      this.typeCd = params.typeCd
+      await this.loadData()
+    },
+    async loadData() {
+      try {
+        this.loading = true
+        const params = {
+          communityId: this.communityId,
+          typeCd: this.typeCd,
+          page: 1,
+          row: 100
+        }
+        const { data } = await listComplaintType(params)
+        this.complaintTypes = data || []
+      } catch (error) {
+        console.error('获取工单类型数据失败:', error)
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.complaint-detail-type {
+  margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/oa/ReplyComplaintAppraise.vue b/src/components/oa/ReplyComplaintAppraise.vue
new file mode 100644
index 0000000..32dbc25
--- /dev/null
+++ b/src/components/oa/ReplyComplaintAppraise.vue
@@ -0,0 +1,82 @@
+<template>
+  <el-dialog
+    :title="$t('replyComplaintAppraise.title')"
+    :visible.sync="visible"
+    width="50%"
+    @close="resetForm"
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-form-item :label="$t('replyComplaintAppraise.content')" prop="replyContext">
+        <el-input
+          type="textarea"
+          :rows="5"
+          v-model="form.replyContext"
+          :placeholder="$t('replyComplaintAppraise.placeholder')"
+        />
+      </el-form-item>
+    </el-form>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="submitForm" :loading="submitting">
+        {{ $t('common.submit') }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { replyComplaintAppraise } from '@/api/oa/complaintDetailApi'
+
+export default {
+  name: 'ReplyComplaintAppraise',
+  data() {
+    return {
+      visible: false,
+      submitting: false,
+      form: {
+        appraiseId: '',
+        replyContext: '',
+        communityId: ''
+      },
+      rules: {
+        replyContext: [
+          { required: true, message: this.$t('replyComplaintAppraise.required'), trigger: 'blur' },
+          { max: 512, message: this.$t('replyComplaintAppraise.maxLength'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open(row) {
+      this.form.appraiseId = row.appraiseId
+      this.form.communityId = getCommunityId()
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs.form && this.$refs.form.clearValidate()
+      })
+    },
+    async submitForm() {
+      try {
+        const valid = await this.$refs.form.validate()
+        if (!valid) return
+
+        this.submitting = true
+        await replyComplaintAppraise(this.form)
+        this.$message.success(this.$t('replyComplaintAppraise.success'))
+        this.visible = false
+        this.$emit('success')
+      } catch (error) {
+        console.error('回复评价失败:', error)
+      } finally {
+        this.submitting = false
+      }
+    },
+    resetForm() {
+      this.form.replyContext = ''
+      this.$refs.form && this.$refs.form.clearValidate()
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/oa/doingComplaint.vue b/src/components/oa/doingComplaint.vue
new file mode 100644
index 0000000..6293891
--- /dev/null
+++ b/src/components/oa/doingComplaint.vue
@@ -0,0 +1,83 @@
+<template>
+  <el-dialog
+    :title="$t('doingComplaint.title')"
+    :visible.sync="visible"
+    width="60%"
+    @close="handleClose"
+  >
+    <el-form ref="form" :model="formData" label-width="120px">
+      <el-form-item
+        :label="$t('doingComplaint.description')"
+        prop="context"
+        :rules="[
+          { required: true, message: $t('doingComplaint.required'), trigger: 'blur' },
+          { max: 512, message: $t('doingComplaint.maxLength'), trigger: 'blur' }
+        ]"
+      >
+        <el-input
+          v-model="formData.context"
+          type="textarea"
+          :rows="4"
+          :placeholder="$t('doingComplaint.placeholder')"
+        />
+      </el-form-item>
+    </el-form>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ $t('doingComplaint.cancel') }}</el-button>
+      <el-button type="primary" @click="handleSubmit">{{ $t('doingComplaint.submit') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { auditComplaint } from '@/api/oa/uodoComplaintsApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'DoingComplaint',
+  data() {
+    return {
+      visible: false,
+      formData: {
+        complaintId: '',
+        context: '',
+        communityId: ''
+      }
+    }
+  },
+  methods: {
+    open(data) {
+      this.formData.complaintId = data.complaintId
+      this.formData.communityId = getCommunityId()
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs.form && this.$refs.form.resetFields()
+      })
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+    },
+    async handleSubmit() {
+      try {
+        const valid = await this.$refs.form.validate()
+        if (!valid) return
+
+        await auditComplaint(this.formData)
+        this.$emit('success')
+        this.visible = false
+        this.$message.success(this.$t('doingComplaint.success'))
+      } catch (error) {
+        console.error(error)
+        this.$message.error(this.$t('doingComplaint.error'))
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-textarea {
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/i18n/oaI18n.js b/src/i18n/oaI18n.js
index 00a5c57..a75dfb9 100644
--- a/src/i18n/oaI18n.js
+++ b/src/i18n/oaI18n.js
@@ -50,6 +50,8 @@ import { messages as newOaWorkflowMessages } from '../views/oa/newOaWorkflowLang
 import { messages as newOaWorkflowDetailMessages } from '../views/oa/newOaWorkflowDetailLang'
 import { messages as newOaWorkflowFormEditMessages } from '../views/oa/newOaWorkflowFormEditLang'
 import { messages as simplifyNotepadManageMessages } from '../views/oa/simplifyNotepadManageLang'
+import { messages as uodoComplaintsMessages } from '../views/oa/uodoComplaintsLang'
+import { messages as complaintDetailMessages } from '../views/oa/complaintDetailLang'
 
 
 export const messages ={
@@ -105,6 +107,8 @@ export const messages ={
         ...newOaWorkflowDetailMessages.en,
         ...newOaWorkflowFormEditMessages.en,
         ...simplifyNotepadManageMessages.en,
+        ...uodoComplaintsMessages.en,
+        ...complaintDetailMessages.en,
     },
     zh:{    
         ...activitiesTypeManageMessages.zh, 
@@ -158,5 +162,7 @@ export const messages ={
         ...newOaWorkflowDetailMessages.zh,
         ...newOaWorkflowFormEditMessages.zh,
         ...simplifyNotepadManageMessages.zh,
+        ...uodoComplaintsMessages.zh,
+        ...complaintDetailMessages.zh,
     }
 }
\ No newline at end of file
diff --git a/src/router/oaRouter.js b/src/router/oaRouter.js
index 3467a90..b9837c2 100644
--- a/src/router/oaRouter.js
+++ b/src/router/oaRouter.js
@@ -239,4 +239,14 @@ export default [
         name: '/pages/property/simplifyNotepadManage',
         component: () => import('@/views/oa/simplifyNotepadManageList.vue')
     },
+    {
+        path: '/pages/complaint/uodoComplaints',
+        name: '/pages/complaint/uodoComplaints',
+        component: () => import('@/views/oa/uodoComplaintsList.vue')
+    },
+    {
+        path: '/pages/complaint/complaintDetail',
+        name: '/pages/complaint/complaintDetail',
+        component: () => import('@/views/oa/complaintDetailList.vue')
+    },
 ]
\ No newline at end of file
diff --git a/src/views/oa/complaintDetailLang.js b/src/views/oa/complaintDetailLang.js
new file mode 100644
index 0000000..4710431
--- /dev/null
+++ b/src/views/oa/complaintDetailLang.js
@@ -0,0 +1,122 @@
+export const messages = {
+  en: {
+    complaintDetail: {
+      title: 'Complaint Details',
+      workflow: 'Workflow',
+      evaluation: 'Evaluation',
+      type: 'Type'
+    },
+    complaintDetailInfo: {
+      orderNo: 'Order No:',
+      type: 'Type:',
+      house: 'House:',
+      contact: 'Contact:',
+      phone: 'Phone:',
+      status: 'Status:',
+      createTime: 'Create Time:',
+      content: 'Content:'
+    },
+    complaintDetailEvent: {
+      type: 'Type',
+      operator: 'Operator',
+      remark: 'Remark',
+      time: 'Time',
+      submit: 'Submit',
+      process: 'Process',
+      evaluate: 'Evaluate',
+      reply: 'Reply'
+    },
+    complaintDetailAppraise: {
+      userName: 'User Name',
+      content: 'Content',
+      score: 'Score',
+      status: 'Status',
+      time: 'Time',
+      replyUser: 'Reply User',
+      replyContent: 'Reply Content',
+      operation: 'Operation',
+      reply: 'Reply',
+      waitReply: 'Wait Reply',
+      replied: 'Replied'
+    },
+    replyComplaintAppraise: {
+      title: 'Reply Evaluation',
+      content: 'Content',
+      placeholder: 'Required, please enter reply content',
+      required: 'Reply content is required',
+      maxLength: 'Reply content exceeds 500 characters',
+      success: 'Reply successfully'
+    },
+    complaintDetailType: {
+      typeName: 'Type Name',
+      notifyWay: 'Notify Way',
+      appraiseReply: 'Appraise Reply',
+      handler: 'Handler',
+      createTime: 'Create Time',
+      sms: 'SMS',
+      wechat: 'WeChat',
+      autoReply: 'Auto Reply',
+      manualReply: 'Manual Reply'
+    }
+  },
+  zh: {
+    complaintDetail: {
+      title: '投诉详情',
+      workflow: '工单流转',
+      evaluation: '工单评价',
+      type: '工单类型'
+    },
+    complaintDetailInfo: {
+      orderNo: '订单编号：',
+      type: '类型：',
+      house: '房屋：',
+      contact: '联系人：',
+      phone: '联系电话：',
+      status: '状态：',
+      createTime: '创建时间：',
+      content: '投诉内容：'
+    },
+    complaintDetailEvent: {
+      type: '类型',
+      operator: '操作人',
+      remark: '说明',
+      time: '时间',
+      submit: '提交',
+      process: '投诉处理',
+      evaluate: '评价',
+      reply: '评价回复'
+    },
+    complaintDetailAppraise: {
+      userName: '用户名称',
+      content: '评价内容',
+      score: '评价得分',
+      status: '评价状态',
+      time: '评价时间',
+      replyUser: '回复人',
+      replyContent: '回复内容',
+      operation: '操作',
+      reply: '回复',
+      waitReply: '待回复',
+      replied: '已回复'
+    },
+    replyComplaintAppraise: {
+      title: '回复评价',
+      content: '内容',
+      placeholder: '必填，请填写回复内容',
+      required: '回复内容不能为空',
+      maxLength: '回复内容超过500个字',
+      success: '回复成功'
+    },
+    complaintDetailType: {
+      typeName: '类型名称',
+      notifyWay: '通知方式',
+      appraiseReply: '评价回复',
+      handler: '处理人',
+      createTime: '创建时间',
+      sms: '短信',
+      wechat: '微信',
+      autoReply: '自动回复',
+      manualReply: '人工回复'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/oa/complaintDetailList.vue b/src/views/oa/complaintDetailList.vue
new file mode 100644
index 0000000..89f7861
--- /dev/null
+++ b/src/views/oa/complaintDetailList.vue
@@ -0,0 +1,226 @@
+<template>
+  <div class="complaint-detail-container">
+    <el-card class="box-card">
+      <div class="flex justify-between">
+        <div class="text-title">{{ $t('complaintDetail.title') }}</div>
+        <div>
+          <el-button type="primary" size="small" style="margin-left:10px" @click="goBack">
+            {{ $t('common.back') }}
+          </el-button>
+        </div>
+      </div>
+
+      <!-- 业主信息 -->
+      <div class="margin-top">
+        <el-row :gutter="20"  class="text-left">
+          <el-col :span="24">
+            <el-row :gutter="20">
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('complaintDetailInfo.orderNo') }}
+                  </label>
+                  <label class="">{{complaintDetailInfo.complaintId}}</label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('complaintDetailInfo.type') }}
+                  </label>
+                  <label class="">{{complaintDetailInfo.typeName}}</label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('complaintDetailInfo.house') }}
+                  </label>
+                  <label class="">
+                    {{complaintDetailInfo.roomName}}
+                  </label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('complaintDetailInfo.contact') }}
+                  </label>
+                  <label class="">{{complaintDetailInfo.complaintName}}</label>
+                </div>
+              </el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('complaintDetailInfo.phone') }}
+                  </label>
+                  <label class="">{{complaintDetailInfo.tel}}</label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('complaintDetailInfo.status') }}
+                  </label>
+                  <label class="">{{complaintDetailInfo.stateName}}</label>
+                </div>
+              </el-col>
+              <el-col :span="12">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('complaintDetailInfo.createTime') }}
+                  </label>
+                  <label class="">{{complaintDetailInfo.createTime}}</label>
+                </div>
+              </el-col>
+              <el-col :span="24">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('complaintDetailInfo.content') }}
+                  </label>
+                  <label class="">{{complaintDetailInfo.context}}</label>
+                </div>
+              </el-col>
+            </el-row>
+          </el-col>
+        </el-row>
+      </div>
+
+      <divider></divider>
+
+      <div class="margin-top-sm">
+        <el-tabs v-model="complaintDetailInfo._currentTab" @tab-click="changeTab(complaintDetailInfo._currentTab)">
+          <el-tab-pane :label="$t('complaintDetail.workflow')" name="complaintDetailEvent">
+            <complaint-detail-event v-if="complaintDetailInfo._currentTab === 'complaintDetailEvent'" 
+              ref="complaintDetailEvent" />
+          </el-tab-pane>
+          <el-tab-pane :label="$t('complaintDetail.evaluation')" name="complaintDetailAppraise">
+            <complaint-detail-appraise v-if="complaintDetailInfo._currentTab === 'complaintDetailAppraise'" 
+              ref="complaintDetailAppraise" />
+          </el-tab-pane>
+          <el-tab-pane :label="$t('complaintDetail.type')" name="complaintDetailType">
+            <complaint-detail-type v-if="complaintDetailInfo._currentTab === 'complaintDetailType'" 
+              ref="complaintDetailType" />
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import ComplaintDetailEvent from '@/components/oa/ComplaintDetailEvent'
+import ComplaintDetailAppraise from '@/components/oa/ComplaintDetailAppraise'
+import ComplaintDetailType from '@/components/oa/ComplaintDetailType'
+import { getComplaintDetail } from '@/api/oa/complaintDetailApi'
+import divider from '@/components/system/divider'
+
+export default {
+  name: 'ComplaintDetailList',
+  components: {
+    ComplaintDetailEvent,
+    ComplaintDetailAppraise,
+    ComplaintDetailType,
+    divider
+  },
+  data() {
+    return {
+      complaintDetailInfo: {
+        viewComplaintFlag: '',
+        complaintId: "",
+        typeName: '',
+        typeCd: '',
+        roomName: "",
+        complaintName: "",
+        tel: "",
+        stateName: "",
+        createTime: "",
+        context: '',
+        _currentTab: 'complaintDetailEvent',
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.complaintDetailInfo.complaintId = this.$route.query.complaintId
+    if (!this.complaintDetailInfo.complaintId) {
+      return
+    }
+    const currentTab = this.$route.query.currentTab
+    if (currentTab) {
+      this.complaintDetailInfo._currentTab = currentTab
+    }
+    this.loadComplaintInfo()
+  },
+  methods: {
+    async loadComplaintInfo() {
+      try {
+        const params = {
+          complaintId: this.complaintDetailInfo.complaintId,
+          page: 1,
+          row: 1,
+          communityId: this.communityId,
+          ownerTypeCd: '1001'
+        }
+        const { data } = await getComplaintDetail(params)
+        if (data && data.length > 0) {
+          Object.assign(this.complaintDetailInfo, data[0])
+        }
+      } catch (error) {
+        console.error('获取投诉详情失败:', error)
+      }
+    },
+    changeTab(tab) {
+      this.complaintDetailInfo._currentTab = tab
+      setTimeout(() => {
+        if (this.$refs[tab]) {
+          this.$refs[tab].initData({
+            complaintId: this.complaintDetailInfo.complaintId,
+            typeCd: this.complaintDetailInfo.typeCd
+          })
+        }
+      }, 500)
+    },
+    goBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.complaint-detail-container {
+  padding: 20px;
+
+  .box-card {
+    padding: 20px;
+  }
+
+  .text-title {
+    font-size: 18px;
+    font-weight: bold;
+    color: #333;
+  }
+
+  .margin-top {
+    margin-top: 20px;
+  }
+
+  .margin-top-sm {
+    margin-top: 10px;
+  }
+
+  .form-group {
+    margin-bottom: 15px;
+
+    .col-form-label {
+      margin-bottom: 5px;
+      color: #606266;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/oa/complaintList.vue b/src/views/oa/complaintList.vue
index 6bcfab4..43a2b8a 100644
--- a/src/views/oa/complaintList.vue
+++ b/src/views/oa/complaintList.vue
@@ -204,7 +204,7 @@ export default {
       this.$refs.deleteComplaint.open(row)
     },
     _openComplaintDetailModel(row) {
-      this.$refs.complaintDetail.open(row)
+      this.$router.push(`/pages/complaint/complaintDetail?complaintId=${row.complaintId}`)
     },
     _queryComplaintMethod() {
       this.page.current = 1
diff --git a/src/views/oa/uodoComplaintsLang.js b/src/views/oa/uodoComplaintsLang.js
new file mode 100644
index 0000000..08316fd
--- /dev/null
+++ b/src/views/oa/uodoComplaintsLang.js
@@ -0,0 +1,60 @@
+export const messages = {
+  en: {
+    uodoComplaints: {
+      title: 'Pending Complaints',
+      back: 'Back',
+      refresh: 'Refresh',
+      orderNumber: 'Order Number',
+      complaintType: 'Complaint Type',
+      house: 'House',
+      complainant: 'Complainant',
+      complaintPhone: 'Complaint Phone',
+      complaintStatus: 'Complaint Status',
+      createTime: 'Create Time',
+      operation: 'Operation',
+      process: 'Process',
+      detail: 'Detail',
+      fetchError: 'Failed to fetch complaints data'
+    },
+    doingComplaint: {
+      title: 'Process Complaint',
+      description: 'Description',
+      required: 'Required, please fill in the reply content',
+      maxLength: 'Reply content exceeds 500 characters',
+      placeholder: 'Required, please fill in the reply content',
+      cancel: 'Cancel',
+      submit: 'Submit',
+      success: 'Processed successfully',
+      error: 'Failed to process complaint'
+    }
+  },
+  zh: {
+    uodoComplaints: {
+      title: '待办投诉单',
+      back: '返回',
+      refresh: '刷新',
+      orderNumber: '订单编号',
+      complaintType: '投诉类型',
+      house: '房屋',
+      complainant: '投诉人',
+      complaintPhone: '投诉电话',
+      complaintStatus: '投诉状态',
+      createTime: '创建时间',
+      operation: '操作',
+      process: '办理',
+      detail: '详情',
+      fetchError: '获取投诉数据失败'
+    },
+    doingComplaint: {
+      title: '办理投诉',
+      description: '说明',
+      required: '必填，请填写回复内容',
+      maxLength: '回复内容超过500个字',
+      placeholder: '必填，请填写回复内容',
+      cancel: '取消',
+      submit: '提交',
+      success: '办理成功',
+      error: '办理投诉失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/oa/uodoComplaintsList.vue b/src/views/oa/uodoComplaintsList.vue
new file mode 100644
index 0000000..8d049ed
--- /dev/null
+++ b/src/views/oa/uodoComplaintsList.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="uodo-complaints-container animated fadeInRight">
+    <el-card class="box-card">
+      <div slot="header" class="flex justify-between ">
+        <span>{{ $t('uodoComplaints.title') }}</span>
+        <div class="card-header-actions">
+          <el-button size="small" @click="handleGoBack">{{ $t('uodoComplaints.back') }}</el-button>
+          <el-button type="primary" size="small" @click="handleRefresh">{{ $t('uodoComplaints.refresh') }}</el-button>
+        </div>
+      </div>
+
+      <el-table v-loading="loading" :data="tableData" border style="width: 100%">
+        <el-table-column prop="complaintId" :label="$t('uodoComplaints.orderNumber')" align="center" />
+        <el-table-column prop="typeName" :label="$t('uodoComplaints.complaintType')" align="center" />
+        <el-table-column prop="roomName" :label="$t('uodoComplaints.house')" align="center" />
+        <el-table-column prop="complaintName" :label="$t('uodoComplaints.complainant')" align="center" />
+        <el-table-column prop="tel" :label="$t('uodoComplaints.complaintPhone')" align="center" />
+        <el-table-column prop="stateName" :label="$t('uodoComplaints.complaintStatus')" align="center" />
+        <el-table-column prop="createTime" :label="$t('uodoComplaints.createTime')" align="center" />
+        <el-table-column :label="$t('uodoComplaints.operation')" align="center" width="180">
+          <template slot-scope="scope">
+            <el-button-group>
+              <el-button size="mini" @click="handleProcess(scope.row)">{{ $t('uodoComplaints.process') }}</el-button>
+              <el-button size="mini" @click="handleDetail(scope.row)">{{ $t('uodoComplaints.detail') }}</el-button>
+            </el-button-group>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination :current-page="pagination.currentPage" :page-sizes="[10, 20, 30, 50]"
+        :page-size="pagination.pageSize" :total="pagination.total" layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+    </el-card>
+
+    <doing-complaint ref="doingComplaint" @success="handleSuccess" />
+  </div>
+</template>
+
+<script>
+import { listAuditComplaints } from '@/api/oa/uodoComplaintsApi'
+import DoingComplaint from '@/components/oa/doingComplaint'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'UodoComplaintsList',
+  components: {
+    DoingComplaint
+  },
+  data() {
+    return {
+      loading: false,
+      tableData: [],
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      },
+      conditions: {
+        communityId: '',
+        userName: '',
+        auditLink: ''
+      }
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      try {
+        this.loading = true
+        const params = {
+          page: this.pagination.currentPage,
+          row: this.pagination.pageSize,
+          communityId: this.communityId,
+          ...this.conditions
+        }
+        const { data, total } = await listAuditComplaints(params)
+        this.tableData = data
+        this.pagination.total = total
+      } catch (error) {
+        this.$message.error(this.$t('uodoComplaints.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    handleGoBack() {
+      this.$router.go(-1)
+    },
+    handleRefresh() {
+      this.pagination.currentPage = 1
+      this.getList()
+    },
+    handleProcess(row) {
+      this.$refs.doingComplaint.open(row)
+    },
+    handleDetail(row) {
+      this.$router.push(`/pages/complaint/complaintDetail?complaintId=${row.complaintId}`)
+    },
+    handleSuccess() {
+      this.getList()
+    },
+    handleSizeChange(val) {
+      this.pagination.pageSize = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.pagination.currentPage = val
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.uodo-complaints-container {
+  padding: 20px;
+
+  .box-card {
+    margin-bottom: 20px;
+  }
+
+  .card-header-actions {
+    float: right;
+  }
+
+  .el-pagination {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+</style>
\ No newline at end of file