From 0a06b2d19c364a091819054e1e044dbf07848536 Mon Sep 17 00:00:00 2001
From: wuxw <928255095@qq.com>
Date: Tue, 24 Jun 2025 00:24:30 +0800
Subject: [PATCH] 开发完成投诉建议

---
 src/api/oa/addComplaintApi.js             |  66 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/api/oa/addComplaintTypeApi.js         |  61 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/api/oa/complaintApi.js                |  97 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/api/oa/complaintTypeApi.js            |  97 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/api/oa/editComplaintTypeApi.js        |  78 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/oa/complaintDetail.vue     | 145 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/oa/deleteComplaint.vue     |  56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/oa/deleteComplaintType.vue |  54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/oa/editComplaint.vue       | 149 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/staff/selectStaffsDiv.vue  | 285 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------------------------------------------------------------------------------------------------------------------
 src/i18n/oaI18n.js                        |  16 ++++++++++++++++
 src/router/oaRouter.js                    |  25 +++++++++++++++++++++++++
 src/views/oa/addComplaintLang.js          |  54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/oa/addComplaintList.vue         | 149 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/oa/addComplaintTypeLang.js      |  52 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/oa/addComplaintTypeList.vue     | 156 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/oa/complaintLang.js             | 158 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/oa/complaintList.vue            | 260 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/oa/complaintTypeLang.js         |  52 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/oa/complaintTypeList.vue        | 148 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/oa/editComplaintTypeLang.js     |  66 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/oa/editComplaintTypeList.vue    | 163 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 22 files changed, 2246 insertions(+), 141 deletions(-)
 create mode 100644 src/api/oa/addComplaintApi.js
 create mode 100644 src/api/oa/addComplaintTypeApi.js
 create mode 100644 src/api/oa/complaintApi.js
 create mode 100644 src/api/oa/complaintTypeApi.js
 create mode 100644 src/api/oa/editComplaintTypeApi.js
 create mode 100644 src/components/oa/complaintDetail.vue
 create mode 100644 src/components/oa/deleteComplaint.vue
 create mode 100644 src/components/oa/deleteComplaintType.vue
 create mode 100644 src/components/oa/editComplaint.vue
 create mode 100644 src/views/oa/addComplaintLang.js
 create mode 100644 src/views/oa/addComplaintList.vue
 create mode 100644 src/views/oa/addComplaintTypeLang.js
 create mode 100644 src/views/oa/addComplaintTypeList.vue
 create mode 100644 src/views/oa/complaintLang.js
 create mode 100644 src/views/oa/complaintList.vue
 create mode 100644 src/views/oa/complaintTypeLang.js
 create mode 100644 src/views/oa/complaintTypeList.vue
 create mode 100644 src/views/oa/editComplaintTypeLang.js
 create mode 100644 src/views/oa/editComplaintTypeList.vue

diff --git a/src/api/oa/addComplaintApi.js b/src/api/oa/addComplaintApi.js
new file mode 100644
index 0000000..428ba2b
--- /dev/null
+++ b/src/api/oa/addComplaintApi.js
@@ -0,0 +1,66 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 获取投诉类型列表
+export function listComplaintTypes(params) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/complaintType.listComplaintType',
+      method: 'get',
+      params: {
+        ...params,
+        communityId
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 保存投诉信息
+export function saveComplaint(data) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/complaint.saveComplaint',
+      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 queryRooms(params) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/room.queryRooms',
+      method: 'get',
+      params: {
+        ...params,
+        communityId
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/oa/addComplaintTypeApi.js b/src/api/oa/addComplaintTypeApi.js
new file mode 100644
index 0000000..1120e33
--- /dev/null
+++ b/src/api/oa/addComplaintTypeApi.js
@@ -0,0 +1,61 @@
+import request from '@/utils/request'
+
+/**
+ * 获取组织树
+ * @param {Object} params 
+ * @returns {Promise}
+ */
+export function listOrgTree(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/org.listOrgTree',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 查询员工信息
+ * @param {Object} params 
+ * @returns {Promise}
+ */
+export function getStaffInfos(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/query.staff.infos',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 保存投诉类型
+ * @param {Object} data 
+ * @returns {Promise}
+ */
+export function saveComplaintType(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/complaintType.saveComplaintType',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/oa/complaintApi.js b/src/api/oa/complaintApi.js
new file mode 100644
index 0000000..53dde41
--- /dev/null
+++ b/src/api/oa/complaintApi.js
@@ -0,0 +1,97 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 获取投诉列表
+export function listComplaints(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 listComplaintTypes(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)
+    })
+  })
+}
+
+// 更新投诉信息
+export function updateComplaint(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/complaint.updateComplaint',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除投诉
+export function deleteComplaint(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/complaint.deleteComplaint',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取工作流审核信息
+export function listWorkflowAuditInfo(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/workflow.listWorkflowAuditInfo',
+      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/complaintTypeApi.js b/src/api/oa/complaintTypeApi.js
new file mode 100644
index 0000000..67ed5ba
--- /dev/null
+++ b/src/api/oa/complaintTypeApi.js
@@ -0,0 +1,97 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 获取投诉类型列表
+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)
+    })
+  })
+}
+
+// 删除投诉类型
+export function deleteComplaintType(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/complaintType.deleteComplaintType',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 添加投诉类型
+export function addComplaintType(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/complaintType.saveComplaintType',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 更新投诉类型
+export function updateComplaintType(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/complaintType.updateComplaintType',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取单个投诉类型详情
+export function getComplaintTypeDetail(typeCd) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/complaintType.getComplaintType',
+      method: 'get',
+      params: {
+        typeCd,
+        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/editComplaintTypeApi.js b/src/api/oa/editComplaintTypeApi.js
new file mode 100644
index 0000000..ef12b9a
--- /dev/null
+++ b/src/api/oa/editComplaintTypeApi.js
@@ -0,0 +1,78 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 获取投诉类型详情
+export function getComplaintTypeDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/complaintType.listComplaintType',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: params.communityId || getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 更新投诉类型
+export function updateComplaintType(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/complaintType.updateComplaintType',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: data.communityId || getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取组织树
+export function listOrgTree(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/org.listOrgTree',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: params.communityId || getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取员工信息
+export function getStaffInfos(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/query.staff.infos',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: 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/components/oa/complaintDetail.vue b/src/components/oa/complaintDetail.vue
new file mode 100644
index 0000000..a7a2171
--- /dev/null
+++ b/src/components/oa/complaintDetail.vue
@@ -0,0 +1,145 @@
+<template>
+  <el-dialog :title="`${form.typeCdName} ${$t('complaint.detail.title')}`" :visible.sync="visible" width="70%" top="5vh">
+    <el-form label-width="120px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('complaint.detail.room')">
+            <el-input v-model="form.roomName" readonly />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('complaint.detail.id')">
+            <el-input v-model="form.complaintId" readonly />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('complaint.detail.type')">
+            <el-input v-model="form.typeCdName" readonly />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('complaint.detail.status')">
+            <el-input v-model="form.stateName" readonly />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('complaint.detail.contact')">
+            <el-input v-model="form.complaintName" readonly />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('complaint.detail.phone')">
+            <el-input v-model="form.tel" readonly />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <template v-if="form.showCurrentUser">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item :label="$t('complaint.detail.handler')">
+              <el-input v-model="form.currentUserName" readonly />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('complaint.detail.handlerPhone')">
+              <el-input v-model="form.currentUserTel" readonly />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item :label="$t('complaint.detail.handlerId')">
+          <el-input v-model="form.currentUserId" readonly />
+        </el-form-item>
+      </template>
+
+      <el-form-item :label="`${form.typeCdName}${$t('complaint.detail.content')}`">
+        <el-input type="textarea" :rows="4" v-model="form.context" readonly />
+      </el-form-item>
+
+      <el-form-item :label="$t('complaint.detail.photos')" v-if="form.photosShow.length > 0">
+        <div style="display:flex;flex-wrap:wrap;gap:10px">
+          <el-image v-for="(photo, index) in form.photosShow" :key="index" style="width:100px;height:100px"
+            :src="photo.url" :preview-src-list="form.photosShow.map(p => p.url)" fit="cover" />
+        </div>
+      </el-form-item>
+    </el-form>
+
+    <el-table :data="form.comments" border style="width:100%;margin-top:20px">
+      <el-table-column prop="index" :label="$t('complaint.detail.serial')" width="80" align="center">
+        <template slot-scope="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="auditName" :label="$t('complaint.detail.handler')" align="center" />
+      <el-table-column prop="stateName" :label="$t('complaint.detail.status')" align="center" />
+      <el-table-column prop="auditTime" :label="$t('complaint.detail.handleTime')" align="center" />
+      <el-table-column prop="duration" :label="$t('complaint.detail.duration')" align="center" />
+      <el-table-column prop="message" :label="$t('complaint.detail.comment')" align="center" />
+    </el-table>
+  </el-dialog>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { listWorkflowAuditInfo } from '@/api/oa/complaintApi'
+
+export default {
+  name: 'ComplaintDetail',
+  data() {
+    return {
+      visible: false,
+      form: {
+        complaintId: '',
+        typeCd: '',
+        complaintName: '',
+        tel: '',
+        context: '',
+        typeCdName: '',
+        stateName: '',
+        roomName: '',
+        currentUserName: '',
+        currentUserTel: '',
+        currentUserId: '',
+        showCurrentUser: true,
+        photos: [],
+        photosShow: [],
+        comments: []
+      }
+    }
+  },
+  methods: {
+    open(row) {
+      this.visible = true
+      this.form = {
+        ...row,
+        photosShow: row.photos.map(photo => ({
+          url: `/callComponent/download/getFile/file?fileId=${photo.url}&communityId=-1&time=${new Date()}`
+        })),
+        showCurrentUser: row['currentUserName'],
+        currentUserName: row.currentUserName || this.$t('common.none'),
+        currentUserTel: row.currentUserTel || this.$t('common.none'),
+        currentUserId: row.currentUserId || this.$t('common.none')
+      }
+      this.loadComments()
+    },
+    async loadComments() {
+      try {
+        const params = {
+          communityId: getCommunityId(),
+          businessKey: this.form.complaintId
+        }
+        const { data } = await listWorkflowAuditInfo(params)
+        this.form.comments = data
+      } catch (error) {
+        console.error('获取处理记录失败:', error)
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/oa/deleteComplaint.vue b/src/components/oa/deleteComplaint.vue
new file mode 100644
index 0000000..025229f
--- /dev/null
+++ b/src/components/oa/deleteComplaint.vue
@@ -0,0 +1,56 @@
+<template>
+  <el-dialog
+    :title="$t('complaint.delete.title')"
+    :visible.sync="visible"
+    width="30%"
+    center
+  >
+    <div style="text-align:center">
+      <p>{{ $t('complaint.delete.confirm') }}</p>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleDelete" :loading="loading">{{ $t('common.confirm') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteComplaint } from '@/api/oa/complaintApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'DeleteComplaint',
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      complaintId: '',
+      communityId: ''
+    }
+  },
+  methods: {
+    open(row) {
+      this.communityId = getCommunityId()
+      this.complaintId = row.complaintId
+      this.visible = true
+    },
+    async handleDelete() {
+      try {
+        this.loading = true
+        await deleteComplaint({
+          complaintId: this.complaintId,
+          communityId: this.communityId
+        })
+        this.$message.success(this.$t('complaint.delete.success'))
+        this.$emit('success')
+        this.visible = false
+      } catch (error) {
+        console.error('删除投诉失败:', error)
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/oa/deleteComplaintType.vue b/src/components/oa/deleteComplaintType.vue
new file mode 100644
index 0000000..c07999c
--- /dev/null
+++ b/src/components/oa/deleteComplaintType.vue
@@ -0,0 +1,54 @@
+<template>
+  <el-dialog
+    :title="$t('deleteComplaintType.confirmTitle')"
+    :visible.sync="visible"
+    width="30%"
+    @close="handleClose"
+  >
+    <div style="text-align: center;">
+      <p>{{ $t('deleteComplaintType.confirmText') }}</p>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('deleteComplaintType.cancel') }}</el-button>
+      <el-button type="primary" @click="deleteComplaintType">{{ $t('deleteComplaintType.confirm') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteComplaintType } from '@/api/oa/complaintTypeApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'DeleteComplaintType',
+  data() {
+    return {
+      visible: false,
+      currentComplaintType: null
+    }
+  },
+  methods: {
+    open(complaintType) {
+      this.currentComplaintType = complaintType
+      this.visible = true
+    },
+    async deleteComplaintType() {
+      try {
+        const params = {
+          ...this.currentComplaintType,
+          communityId: getCommunityId()
+        }
+        await deleteComplaintType(params)
+        this.$emit('success')
+        this.visible = false
+        this.$message.success(this.$t('deleteComplaintType.success'))
+      } catch (error) {
+        this.$message.error(this.$t('deleteComplaintType.error'))
+      }
+    },
+    handleClose() {
+      this.visible = false
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/oa/editComplaint.vue b/src/components/oa/editComplaint.vue
new file mode 100644
index 0000000..2029ab9
--- /dev/null
+++ b/src/components/oa/editComplaint.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-dialog
+    :title="$t('complaint.edit.title')"
+    :visible.sync="visible"
+    width="50%"
+    @close="handleClose"
+  >
+    <el-form 
+      ref="form" 
+      :model="form" 
+      label-width="120px"
+      :rules="rules"
+    >
+      <el-form-item 
+        :label="$t('complaint.edit.type')" 
+        prop="typeCd"
+      >
+        <el-select 
+          v-model="form.typeCd" 
+          style="width:100%"
+          :placeholder="$t('complaint.edit.typePlaceholder')"
+        >
+          <el-option 
+            v-for="item in complaintTypes" 
+            :key="item.typeCd"
+            :label="item.typeName"
+            :value="item.typeCd"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item 
+        :label="$t('complaint.edit.contact')" 
+        prop="complaintName"
+      >
+        <el-input 
+          v-model="form.complaintName" 
+          :placeholder="$t('complaint.edit.contactPlaceholder')"
+        />
+      </el-form-item>
+      <el-form-item 
+        :label="$t('complaint.edit.phone')" 
+        prop="tel"
+      >
+        <el-input 
+          v-model="form.tel" 
+          :placeholder="$t('complaint.edit.phonePlaceholder')"
+        />
+      </el-form-item>
+      <el-form-item 
+        :label="$t('complaint.edit.content')" 
+        prop="context"
+      >
+        <el-input
+          type="textarea"
+          :rows="4"
+          v-model="form.context"
+          :placeholder="$t('complaint.edit.contentPlaceholder')"
+        />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { updateComplaint } from '@/api/oa/complaintApi'
+import { listComplaintTypes } from '@/api/oa/complaintApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'EditComplaint',
+  data() {
+    return {
+      visible: false,
+      communityId: '',
+      complaintTypes: [],
+      form: {
+        complaintId: '',
+        typeCd: '',
+        complaintName: '',
+        tel: '',
+        context: '',
+        communityId: ''
+      },
+      rules: {
+        typeCd: [
+          { required: true, message: this.$t('complaint.validate.type'), trigger: 'blur' }
+        ],
+        complaintName: [
+          { required: true, message: this.$t('complaint.validate.contact'), trigger: 'blur' },
+          { max: 200, message: this.$t('complaint.validate.contactMax'), trigger: 'blur' }
+        ],
+        tel: [
+          { required: true, message: this.$t('complaint.validate.phone'), trigger: 'blur' },
+          { pattern: /^1[3-9]\d{9}$/, message: this.$t('complaint.validate.phoneFormat'), trigger: 'blur' }
+        ],
+        context: [
+          { required: true, message: this.$t('complaint.validate.content'), trigger: 'blur' },
+          { max: 4000, message: this.$t('complaint.validate.contentMax'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open(row) {
+      this.communityId = getCommunityId()
+      this.form = {
+        ...row,
+        communityId: this.communityId
+      }
+      this.getComplaintTypes()
+      this.visible = true
+    },
+    async getComplaintTypes() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          communityId: this.communityId
+        }
+        const { data } = await listComplaintTypes(params)
+        this.complaintTypes = data
+      } catch (error) {
+        console.error('获取投诉类型失败:', error)
+      }
+    },
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            await updateComplaint(this.form)
+            this.$message.success(this.$t('complaint.edit.success'))
+            this.$emit('success')
+            this.visible = false
+          } catch (error) {
+            console.error('更新投诉失败:', error)
+          }
+        }
+      })
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/staff/selectStaffsDiv.vue b/src/components/staff/selectStaffsDiv.vue
index 9c4dd83..cfdf68d 100644
--- a/src/components/staff/selectStaffsDiv.vue
+++ b/src/components/staff/selectStaffsDiv.vue
@@ -1,152 +1,155 @@
 <template>
-    <el-row :gutter="20">
-      <el-col :span="6" class="border-right">
-        <div class="text-center">
-          <h4>{{ $t('selectStaff.orgInfo') }}</h4>
+  <el-row :gutter="20">
+    <el-col :span="6" class="border-right">
+      <div class="text-center">
+        <h4>{{ $t('selectStaff.orgInfo') }}</h4>
+      </div>
+      <div class="tree-container">
+        <org-tree-show @org-selected="handleNodeClick" />
+      </div>
+    </el-col>
+
+    <el-col :span="6" class="border-right">
+      <div class="text-center">
+        <h4>{{ $t('selectStaff.staffInfo') }}</h4>
+      </div>
+      <div class="staff-list">
+        <div v-for="staff in staffList" :key="staff.staffId" class="staff-item"
+          :class="{ selected: currentStaffId === staff.userId }" @click="selectStaff(staff)">
+          <i class="el-icon-user"></i>
+          <span>{{ staff.name }}</span>
+          <div>{{ staff.tel }}</div>
         </div>
-        <div class="tree-container">
-          <org-tree-show @org-selected="handleNodeClick" />
+      </div>
+    </el-col>
+
+    <el-col :span="6">
+      <div class="text-center">
+        <h4>{{ $t('selectStaff.selectedStaff') }}</h4>
+      </div>
+      <div class="selected-staff">
+        <div v-for="staff in selectedStaffs" :key="staff.userId" class="selected-item">
+          <span>{{ staff.name }}</span>
+          <i class="el-icon-close remove-icon" @click="removeStaff(staff)"></i>
         </div>
-      </el-col>
-      
-      <el-col :span="6" class="border-right">
-        <div class="text-center">
-          <h4>{{ $t('selectStaff.staffInfo') }}</h4>
-        </div>
-        <div class="staff-list">
-          <div
-            v-for="staff in staffList"
-            :key="staff.staffId"
-            class="staff-item"
-            :class="{ selected: currentStaffId === staff.userId }"
-            @click="selectStaff(staff)"
-          >
-            <i class="el-icon-user"></i>
-            <span>{{ staff.name }}</span>
-            <div>{{ staff.tel }}</div>
-          </div>
-        </div>
-      </el-col>
-      
-      <el-col :span="6">
-        <div class="text-center">
-          <h4>{{ $t('selectStaff.selectedStaff') }}</h4>
-        </div>
-        <div class="selected-staff">
-          <div v-for="staff in selectedStaffs" :key="staff.userId" class="selected-item">
-            <span>{{ staff.name }}</span>
-            <i class="el-icon-close remove-icon" @click="removeStaff(staff)"></i>
-          </div>
-        </div>
-      </el-col>
-    </el-row>
-  </template>
-  
-  <script>
-  import { listStaffsByOrgId } from '@/api/inspection/inspectionPlanApi'
-  import OrgTreeShow from '@/components/org/OrgTreeShow'
+      </div>
+    </el-col>
+  </el-row>
+</template>
   
-  export default {
-    name: 'SelectStaffs',
-    components: {
-      OrgTreeShow
+<script>
+import { listStaffsByOrgId } from '@/api/inspection/inspectionPlanApi'
+import OrgTreeShow from '@/components/org/OrgTreeShow'
+
+export default {
+  name: 'SelectStaffs',
+  components: {
+    OrgTreeShow
+  },
+  data() {
+    return {
+      staffList: [],
+      selectedStaffs: [],
+      currentStaffId: null,
+      currentOrgId: null
+    }
+  },
+  methods: {
+    setStaffs(staffs) {
+      this.selectedStaffs = [...staffs]
+    },
+
+    getSelectedStaffs() {
+      return this.selectedStaffs
     },
-    data() {
-      return {
-        staffList: [],
-        selectedStaffs: [],
-        currentStaffId: null,
-        currentOrgId: null
+
+    async handleNodeClick(node) {
+      this.currentOrgId = node.id
+      try {
+        const { staffs } = await listStaffsByOrgId({
+          orgId: node.id,
+          page: 1,
+          row: 100
+        })
+        this.staffList = staffs
+      } catch (error) {
+        console.error('Failed to load staffs:', error)
       }
     },
-    methods: {
-      setStaffs(staffs) {
-        this.selectedStaffs = [...staffs]
-      },
-      
-      getSelectedStaffs() {
-        return this.selectedStaffs
-      },
-      
-      async handleNodeClick(node) {
-        this.currentOrgId = node.id
-        try {
-          const { staffs } = await listStaffsByOrgId({ 
-            orgId: node.id,
-            page: 1,
-            row: 100
-          })
-          this.staffList = staffs
-        } catch (error) {
-          console.error('Failed to load staffs:', error)
-        }
-      },
-      
-      selectStaff(staff) {
-        this.currentStaffId = staff.userId
-        // 检查是否已选择
-        const isSelected = this.selectedStaffs.some(s => s.userId === staff.userId)
-        if (!isSelected) {
-          this.selectedStaffs.push({
-            userId: staff.userId,
-            name: staff.userName
-          })
-        }
-        this.$emit('selectStaffs', this.selectedStaffs)
-      },
-      
-      removeStaff(staff) {
-        this.selectedStaffs = this.selectedStaffs.filter(s => s.staffId !== staff.staffId)
+
+    selectStaff(staff) {
+      this.currentStaffId = staff.userId
+      // 检查是否已选择
+      const isSelected = this.selectedStaffs.some(s => s.userId === staff.userId)
+      if (!isSelected) {
+        this.selectedStaffs.push({
+          userId: staff.userId,
+          name: staff.userName
+        })
       }
+      this.$emit('selectStaffs', this.selectedStaffs)
+    },
+
+    removeStaff(staff) {
+      this.selectedStaffs = this.selectedStaffs.filter(s => s.staffId !== staff.staffId)
     }
   }
-  </script>
+}
+</script>
   
-  <style scoped>
-  .border-right {
-    border-right: 1px solid #eee;
-  }
-  .tree-container {
-    height: 300px;
-    overflow: auto;
-    padding: 10px;
-  }
-  .staff-list {
-    height: 300px;
-    overflow: auto;
-    padding: 10px;
-  }
-  .staff-item {
-    padding: 10px;
-    cursor: pointer;
-    border-bottom: 1px solid #eee;
-  }
-  .staff-item:hover {
-    background-color: #f5f7fa;
-  }
-  .staff-item.selected {
-    background-color: #ecf5ff;
-  }
-  .selected-staff {
-    height: 300px;
-    overflow: auto;
-    padding: 10px;
-  }
-  .selected-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 8px;
-    margin-bottom: 5px;
-    border: 1px solid #ebeef5;
-    border-radius: 4px;
-  }
-  .remove-icon {
-    cursor: pointer;
-    color: #f56c6c;
-  }
-  .text-center {
-    text-align: center;
-    padding: 10px 0;
-  }
-  </style>
\ No newline at end of file
+<style scoped>
+.border-right {
+  border-right: 1px solid #eee;
+}
+
+.tree-container {
+  height: 300px;
+  overflow: auto;
+  padding: 10px;
+}
+
+.staff-list {
+  height: 300px;
+  overflow: auto;
+  padding: 10px;
+}
+
+.staff-item {
+  padding: 10px;
+  cursor: pointer;
+  border-bottom: 1px solid #eee;
+}
+
+.staff-item:hover {
+  background-color: #f5f7fa;
+}
+
+.staff-item.selected {
+  background-color: #ecf5ff;
+}
+
+.selected-staff {
+  height: 300px;
+  overflow: auto;
+  padding: 10px;
+}
+
+.selected-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+  margin-bottom: 5px;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+}
+
+.remove-icon {
+  cursor: pointer;
+  color: #f56c6c;
+}
+
+.text-center {
+  text-align: center;
+  padding: 10px 0;
+}</style>
\ No newline at end of file
diff --git a/src/i18n/oaI18n.js b/src/i18n/oaI18n.js
index f79efd9..c2ec8bb 100644
--- a/src/i18n/oaI18n.js
+++ b/src/i18n/oaI18n.js
@@ -4,6 +4,12 @@ import { messages as noticeManageMessages } from '../views/oa/noticeManageLang'
 import { messages as addNoticeViewMessages } from '../views/oa/addNoticeViewLang'
 import { messages as editNoticeViewMessages } from '../views/oa/editNoticeViewLang'
 import { messages as noticeDetailMessages } from '../views/oa/noticeDetailLang'
+import { messages as complaintTypeMessages } from '../views/oa/complaintTypeLang'
+import { messages as addComplaintTypeMessages } from '../views/oa/addComplaintTypeLang'
+import { messages as editComplaintTypeMessages } from '../views/oa/editComplaintTypeLang'
+import { messages as addComplaintMessages } from '../views/oa/addComplaintLang'
+import { messages as complaintMessages } from '../views/oa/complaintLang'
+
 export const messages ={
     en:{
         ...activitiesTypeManageMessages.en,
@@ -12,6 +18,11 @@ export const messages ={
         ...addNoticeViewMessages.en,
         ...editNoticeViewMessages.en,
         ...noticeDetailMessages.en,
+        ...complaintTypeMessages.en,
+        ...addComplaintTypeMessages.en,
+        ...editComplaintTypeMessages.en,
+        ...addComplaintMessages.en,
+        ...complaintMessages.en,
     },
     zh:{    
         ...activitiesTypeManageMessages.zh, 
@@ -20,5 +31,10 @@ export const messages ={
         ...addNoticeViewMessages.zh,
         ...editNoticeViewMessages.zh,
         ...noticeDetailMessages.zh,
+        ...complaintTypeMessages.zh,
+        ...addComplaintTypeMessages.zh,
+        ...editComplaintTypeMessages.zh,
+        ...addComplaintMessages.zh,
+        ...complaintMessages.zh,
     }
 }
\ No newline at end of file
diff --git a/src/router/oaRouter.js b/src/router/oaRouter.js
index 1777b6a..26b3edd 100644
--- a/src/router/oaRouter.js
+++ b/src/router/oaRouter.js
@@ -29,4 +29,29 @@ export default [
         name: '/views/oa/noticeDetail',
         component: () => import('@/views/oa/noticeDetailList.vue')
     },
+    {
+        path: '/pages/complaint/complaintType',
+        name: '/pages/complaint/complaintType',
+        component: () => import('@/views/oa/complaintTypeList.vue')
+    },
+    {
+        path: '/views/oa/addComplaintType',
+        name: '/views/oa/addComplaintType',
+        component: () => import('@/views/oa/addComplaintTypeList.vue')
+    },
+    {
+        path: '/views/oa/editComplaintType',
+        name: '/views/oa/editComplaintType',
+        component: () => import('@/views/oa/editComplaintTypeList.vue')
+    },
+    {
+        path: '/views/oa/addComplaint',
+        name: '/views/oa/addComplaint',
+        component: () => import('@/views/oa/addComplaintList.vue')
+    },
+    {
+        path: '/pages/complaint/complaint',
+        name: '/pages/complaint/complaint',
+        component: () => import('@/views/oa/complaintList.vue')
+    },
 ]
\ No newline at end of file
diff --git a/src/views/oa/addComplaintLang.js b/src/views/oa/addComplaintLang.js
new file mode 100644
index 0000000..04268cb
--- /dev/null
+++ b/src/views/oa/addComplaintLang.js
@@ -0,0 +1,54 @@
+export const messages = {
+  en: {
+    addComplaint: {
+      title: 'Register Complaint',
+      type: 'Type',
+      typePlaceholder: 'Required, please select type',
+      room: 'Room',
+      roomPlaceholder: 'Required, please select room',
+      contact: 'Contact Person',
+      contactPlaceholder: 'Required, please enter contact person',
+      phone: 'Phone Number',
+      phonePlaceholder: 'Required, please enter phone number',
+      content: 'Content',
+      contentPlaceholder: 'Required, please enter content',
+      register: 'Register',
+      typeRequired: 'Complaint type is required',
+      contactRequired: 'Contact person is required',
+      contactMaxLength: 'Contact person cannot exceed 200 characters',
+      phoneRequired: 'Phone number is required',
+      phoneFormat: 'Invalid phone number format',
+      contentRequired: 'Content is required',
+      contentMaxLength: 'Content cannot exceed 4000 characters',
+      saveSuccess: 'Complaint registered successfully',
+      saveError: 'Failed to register complaint',
+      fetchTypesError: 'Failed to fetch complaint types'
+    }
+  },
+  zh: {
+    addComplaint: {
+      title: '登记投诉',
+      type: '类型',
+      typePlaceholder: '必填，请选择类型',
+      room: '房屋',
+      roomPlaceholder: '必填，请选择房屋',
+      contact: '联系人',
+      contactPlaceholder: '必填，请填写联系人',
+      phone: '联系电话',
+      phonePlaceholder: '必填，请填写联系电话',
+      content: '内容',
+      contentPlaceholder: '必填，请填写内容',
+      register: '登记',
+      typeRequired: '投诉类型不能为空',
+      contactRequired: '联系人不能为空',
+      contactMaxLength: '联系人不能大于200位',
+      phoneRequired: '联系电话不能为空',
+      phoneFormat: '联系电话格式错误',
+      contentRequired: '内容不能为空',
+      contentMaxLength: '内容超过4000位',
+      saveSuccess: '添加成功',
+      saveError: '添加失败',
+      fetchTypesError: '获取投诉类型失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/oa/addComplaintList.vue b/src/views/oa/addComplaintList.vue
new file mode 100644
index 0000000..4f7f8ca
--- /dev/null
+++ b/src/views/oa/addComplaintList.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="add-complaint-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>{{ $t('addComplaint.title') }}</span>
+      </div>
+      <el-form ref="form" :model="addComplaintInfo" :rules="rules" label-width="120px">
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item :label="$t('addComplaint.type')" prop="typeCd">
+              <el-select v-model="addComplaintInfo.typeCd" :placeholder="$t('addComplaint.typePlaceholder')"
+                style="width:100%">
+                <el-option v-for="item in addComplaintInfo.complaintTypes" :key="item.typeCd" :label="item.typeName"
+                  :value="item.typeCd" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item :label="$t('addComplaint.room')" prop="roomName">
+              <el-input v-model="addComplaintInfo.roomName" :placeholder="$t('addComplaint.roomPlaceholder')" disabled />
+              <el-button type="primary" @click="selectComplaintRoom" style="margin-left:10px">
+                {{ $t('addComplaint.register') }}
+              </el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item :label="$t('addComplaint.contact')" prop="complaintName">
+              <el-input v-model="addComplaintInfo.complaintName" :placeholder="$t('addComplaint.contactPlaceholder')" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('addComplaint.phone')" prop="tel">
+              <el-input v-model="addComplaintInfo.tel" :placeholder="$t('addComplaint.phonePlaceholder')" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item :label="$t('addComplaint.content')" prop="context">
+              <el-input type="textarea" :rows="4" v-model="addComplaintInfo.context"
+                :placeholder="$t('addComplaint.contentPlaceholder')" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="24" style="text-align:right">
+            <el-button type="warning" @click="goBack">{{ $t('common.back') }}</el-button>
+            <el-button type="primary" @click="saveComplaint">{{ $t('addComplaint.register') }}</el-button>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { listComplaintTypes, saveComplaint } from '@/api/oa/addComplaintApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'AddComplaintList',
+  data() {
+    return {
+      addComplaintInfo: {
+        complaintTypes: [],
+        typeCd: '',
+        complaintName: '',
+        tel: '',
+        context: '',
+        communityId: '',
+        roomId: '',
+        roomName: '',
+        ownerId: '',
+        ownerName: ''
+      },
+      rules: {
+        typeCd: [{ required: true, message: this.$t('addComplaint.typeRequired'), trigger: 'blur' }],
+        complaintName: [
+          { required: true, message: this.$t('addComplaint.contactRequired'), trigger: 'blur' },
+          { max: 200, message: this.$t('addComplaint.contactMaxLength'), trigger: 'blur' }
+        ],
+        tel: [
+          { required: true, message: this.$t('addComplaint.phoneRequired'), trigger: 'blur' },
+          { pattern: /^1[3-9]\d{9}$/, message: this.$t('addComplaint.phoneFormat'), trigger: 'blur' }
+        ],
+        context: [
+          { required: true, message: this.$t('addComplaint.contentRequired'), trigger: 'blur' },
+          { max: 4000, message: this.$t('addComplaint.contentMaxLength'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.listComplaintTypes()
+  },
+  methods: {
+    async listComplaintTypes() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          communityId: this.communityId
+        }
+        const { data } = await listComplaintTypes(params)
+        this.addComplaintInfo.complaintTypes = data
+      } catch (error) {
+        this.$message.error(this.$t('addComplaint.fetchTypesError'))
+      }
+    },
+    selectComplaintRoom() {
+      this.$emit('selectRoom')
+    },
+    async saveComplaint() {
+      await this.$refs.form.validate()
+
+      try {
+        this.addComplaintInfo.communityId = this.communityId
+        await saveComplaint(this.addComplaintInfo)
+        this.$message.success(this.$t('addComplaint.saveSuccess'))
+        this.goBack()
+      } catch (error) {
+        this.$message.error(error.message || this.$t('addComplaint.saveError'))
+      }
+    },
+    goBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.add-complaint-container {
+  padding: 20px;
+}
+
+.box-card {
+  margin-bottom: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/oa/addComplaintTypeLang.js b/src/views/oa/addComplaintTypeLang.js
new file mode 100644
index 0000000..f553580
--- /dev/null
+++ b/src/views/oa/addComplaintTypeLang.js
@@ -0,0 +1,52 @@
+export const messages = {
+  en: {
+    addComplaintType: {
+      title: 'Add Complaint Type',
+      typeName: 'Type Name',
+      typeNamePlaceholder: 'Required, please enter type name',
+      notifyWay: 'Notification Method',
+      notifyWayPlaceholder: 'Required, please select notification method',
+      appraiseReply: 'Evaluation Reply',
+      appraiseReplyPlaceholder: 'Required, please select evaluation reply',
+      remark: 'Remark',
+      remarkPlaceholder: 'Optional, please enter remark',
+      selectStaff: 'Select Staff',
+      sms: 'SMS',
+      wechat: 'WeChat',
+      workLicense: 'WeChat + Work License',
+      autoReply: 'Auto Reply',
+      manualReply: 'Manual Reply'
+    },
+    selectStaff: {
+      orgInfo: 'Organization Info',
+      staffInfo: 'Staff Info',
+      selectedStaff: 'Selected Staff',
+      noRepeatSelect: 'Do not select repeatedly'
+    }
+  },
+  zh: {
+    addComplaintType: {
+      title: '添加投诉类型',
+      typeName: '类型名称',
+      typeNamePlaceholder: '必填，请填写类型名称',
+      notifyWay: '通知方式',
+      notifyWayPlaceholder: '必填，请选择通知方式',
+      appraiseReply: '评价回复',
+      appraiseReplyPlaceholder: '必填，请选择评价回复',
+      remark: '备注',
+      remarkPlaceholder: '选填，请填写备注',
+      selectStaff: '选择员工',
+      sms: '短信',
+      wechat: '微信',
+      workLicense: '微信+员工工牌',
+      autoReply: '自动回复',
+      manualReply: '人工回复'
+    },
+    selectStaff: {
+      orgInfo: '组织信息',
+      staffInfo: '员工信息',
+      selectedStaff: '已选员工',
+      noRepeatSelect: '请勿重复选择'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/oa/addComplaintTypeList.vue b/src/views/oa/addComplaintTypeList.vue
new file mode 100644
index 0000000..ff0cfc2
--- /dev/null
+++ b/src/views/oa/addComplaintTypeList.vue
@@ -0,0 +1,156 @@
+<template>
+  <el-card class="complaint-type-container">
+    <div class="header-wrapper">
+      <h3>{{ $t('addComplaintType.title') }}</h3>
+    </div>
+
+    <el-form ref="form" :model="addComplaintTypeInfo" label-width="120px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('addComplaintType.typeName')" prop="typeName">
+            <el-input v-model="addComplaintTypeInfo.typeName" :placeholder="$t('addComplaintType.typeNamePlaceholder')"
+              clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('addComplaintType.notifyWay')" prop="notifyWay">
+            <el-select v-model="addComplaintTypeInfo.notifyWay" :placeholder="$t('addComplaintType.notifyWayPlaceholder')"
+              style="width:100%">
+              <el-option v-for="item in notifyWayOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('addComplaintType.appraiseReply')" prop="appraiseReply">
+            <el-select v-model="addComplaintTypeInfo.appraiseReply"
+              :placeholder="$t('addComplaintType.appraiseReplyPlaceholder')" style="width:100%">
+              <el-option v-for="item in appraiseReplyOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('addComplaintType.remark')" prop="remark">
+            <el-input v-model="addComplaintTypeInfo.remark" type="textarea"
+              :placeholder="$t('addComplaintType.remarkPlaceholder')" :rows="2" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="24">
+          <el-form-item :label="$t('addComplaintType.selectStaff')">
+            <select-staffs ref="selectStaffs" @selectStaffs="handleStaffSelected" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="24" class="button-group">
+          <el-button type="primary" @click="saveComplaintTypeInfo">
+            {{ $t('common.save') }}
+          </el-button>
+          <el-button @click="goBack">
+            {{ $t('common.back') }}
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+  </el-card>
+</template>
+
+<script>
+import SelectStaffs from '@/components/staff/selectStaffsDiv'
+import { saveComplaintType } from '@/api/oa/addComplaintTypeApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'AddComplaintTypeList',
+  components: {
+    SelectStaffs
+  },
+  data() {
+    return {
+      addComplaintTypeInfo: {
+        typeName: '',
+        notifyWay: '',
+        appraiseReply: '',
+        remark: '',
+        staffs: []
+      },
+      notifyWayOptions: [
+        { value: 'SMS', label: this.$t('addComplaintType.sms') },
+        { value: 'WECHAT', label: this.$t('addComplaintType.wechat') },
+        { value: 'WORK_LICENSE', label: this.$t('addComplaintType.workLicense') }
+      ],
+      appraiseReplyOptions: [
+        { value: 'Y', label: this.$t('addComplaintType.autoReply') },
+        { value: 'N', label: this.$t('addComplaintType.manualReply') }
+      ]
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    validateForm() {
+      return this.$refs.form.validate()
+    },
+    handleStaffSelected(staffs) {
+      this.addComplaintTypeInfo.staffs = staffs
+    },
+    async saveComplaintTypeInfo() {
+      try {
+        const isValid = await this.validateForm()
+        if (!isValid) return
+
+        // 获取选择的员工
+        this.addComplaintTypeInfo.staffs = this.$refs.selectStaffs.getSelectedStaffs()
+
+        const params = {
+          ...this.addComplaintTypeInfo,
+          communityId: this.communityId
+        }
+
+        const res = await saveComplaintType(params)
+        if (res.code === 0) {
+          this.$message.success(this.$t('common.saveSuccess'))
+          this.goBack()
+        } else {
+          this.$message.error(res.msg)
+        }
+      } catch (error) {
+        console.error('保存投诉类型失败:', error)
+        this.$message.error(this.$t('common.saveFailed'))
+      }
+    },
+    goBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.complaint-type-container {
+  .header-wrapper {
+    margin-bottom: 20px;
+
+    h3 {
+      font-size: 18px;
+      font-weight: bold;
+    }
+  }
+
+  .button-group {
+    text-align: right;
+    margin-top: 20px;
+
+    .el-button {
+      margin-left: 10px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/oa/complaintLang.js b/src/views/oa/complaintLang.js
new file mode 100644
index 0000000..e806bfd
--- /dev/null
+++ b/src/views/oa/complaintLang.js
@@ -0,0 +1,158 @@
+export const messages = {
+  en: {
+    complaint: {
+      search: {
+        title: 'Search Conditions',
+        type: 'Select Type',
+        room: 'Building-Unit-Room e.g. 1-1-1',
+        contact: 'Contact Person',
+        phone: 'Contact Phone',
+        id: 'Complaint ID',
+        startTime: 'Start Time',
+        endTime: 'End Time'
+      },
+      list: {
+        title: 'Complaints & Suggestions',
+        add: 'Add Complaint'
+      },
+      status: {
+        all: 'All',
+        processing: 'Processing',
+        completed: 'Completed'
+      },
+      table: {
+        id: 'ID',
+        type: 'Type',
+        room: 'Room',
+        contact: 'Contact',
+        phone: 'Phone',
+        status: 'Status',
+        handler: 'Handler',
+        createTime: 'Create Time'
+      },
+      edit: {
+        title: 'Edit Information',
+        type: 'Type',
+        contact: 'Contact',
+        phone: 'Phone',
+        content: 'Content',
+        typePlaceholder: 'Required, please select type',
+        contactPlaceholder: 'Required, please enter contact',
+        phonePlaceholder: 'Required, please enter phone',
+        contentPlaceholder: 'Required, please enter content',
+        success: 'Edit successful'
+      },
+      delete: {
+        title: 'Confirm Operation',
+        confirm: 'Are you sure to delete this complaint?',
+        success: 'Delete successful'
+      },
+      detail: {
+        title: 'Details',
+        room: 'Room',
+        id: 'ID',
+        type: 'Type',
+        contact: 'Contact',
+        phone: 'Phone',
+        status: 'Status',
+        handler: 'Handler',
+        handlerPhone: 'Handler Phone',
+        handlerId: 'Handler ID',
+        content: 'Content',
+        photos: 'Photos',
+        serial: 'No.',
+        handleTime: 'Handle Time',
+        duration: 'Duration',
+        comment: 'Comment'
+      },
+      validate: {
+        type: 'Type is required',
+        contact: 'Contact is required',
+        contactMax: 'Contact cannot exceed 200 characters',
+        phone: 'Phone is required',
+        phoneFormat: 'Invalid phone format',
+        content: 'Content is required',
+        contentMax: 'Content cannot exceed 4000 characters'
+      },
+      fetchError: 'Failed to fetch complaints data'
+    }
+  },
+  zh: {
+    complaint: {
+      search: {
+        title: '查询条件',
+        type: '请选择类型',
+        room: '楼栋-单元-房屋 如1-1-1',
+        contact: '请输入联系人',
+        phone: '请输入联系电话',
+        id: '请输入工单编号',
+        startTime: '请选择开始时间',
+        endTime: '请选择结束时间'
+      },
+      list: {
+        title: '投诉建议',
+        add: '投诉'
+      },
+      status: {
+        all: '全部',
+        processing: '处理中',
+        completed: '处理完成'
+      },
+      table: {
+        id: '订单编号',
+        type: '类型',
+        room: '房屋',
+        contact: '联系人',
+        phone: '联系电话',
+        status: '状态',
+        handler: '处理人',
+        createTime: '创建时间'
+      },
+      edit: {
+        title: '修改信息',
+        type: '类型',
+        contact: '联系人',
+        phone: '联系电话',
+        content: '内容',
+        typePlaceholder: '必填，请选择类型',
+        contactPlaceholder: '必填，请填写联系人',
+        phonePlaceholder: '必填，请填写联系电话',
+        contentPlaceholder: '必填，请填写内容',
+        success: '修改成功'
+      },
+      delete: {
+        title: '请确认您的操作',
+        confirm: '确定删除投诉建议吗？',
+        success: '删除成功'
+      },
+      detail: {
+        title: '详情',
+        room: '房屋',
+        id: 'ID',
+        type: '类型',
+        contact: '联系人',
+        phone: '联系电话',
+        status: '状态',
+        handler: '处理人',
+        handlerPhone: '处理人电话',
+        handlerId: '处理人编号',
+        content: '内容',
+        photos: '图片',
+        serial: '序号',
+        handleTime: '处理时间',
+        duration: '耗时',
+        comment: '意见'
+      },
+      validate: {
+        type: '投诉类型不能为空',
+        contact: '投诉人不能为空',
+        contactMax: '投诉人不能大于200位',
+        phone: '投诉电话不能为空',
+        phoneFormat: '投诉电话格式错误',
+        content: '投诉内容不能为空',
+        contentMax: '投诉状态超过4000位'
+      },
+      fetchError: '获取投诉数据失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/oa/complaintList.vue b/src/views/oa/complaintList.vue
new file mode 100644
index 0000000..9dbea57
--- /dev/null
+++ b/src/views/oa/complaintList.vue
@@ -0,0 +1,260 @@
+<template>
+  <div class="complaint-container animated fadeInRight">
+    <el-row :gutter="20">
+      <el-col :span="4">
+        <el-card class="border-radius">
+          <div class="treeview">
+            <ul class="list-group text-center border-radius">
+              <li v-for="(item, index) in complaintInfo.states" :key="index" @click="swatchComplaintState(item)"
+                :class="{ 'vc-node-selected': complaintInfo.conditions.state == item.statusCd }"
+                class="list-group-item node-orgTree">
+                {{ item.name }}
+              </li>
+            </ul>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="20">
+        <el-card>
+          <div slot="header" class="flex justify-between">
+            <span>{{ $t('complaint.search.title') }}</span>
+          </div>
+          <el-row :gutter="20">
+            <el-col :span="4">
+              <el-select v-model="complaintInfo.conditions.typeCd" :placeholder="$t('complaint.search.type')"
+                style="width:100%">
+                <el-option v-for="item in complaintInfo.complaintTypes" :key="item.typeCd" :label="item.typeName"
+                  :value="item.typeCd" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-input v-model="complaintInfo.conditions.roomName" :placeholder="$t('complaint.search.room')" />
+            </el-col>
+            <el-col :span="4">
+              <el-input v-model="complaintInfo.conditions.complaintName" :placeholder="$t('complaint.search.contact')" />
+            </el-col>
+            <el-col :span="4">
+              <el-input v-model="complaintInfo.conditions.tel" :placeholder="$t('complaint.search.phone')" />
+            </el-col>
+            <el-col :span="4">
+              <el-input v-model="complaintInfo.conditions.complaintId" :placeholder="$t('complaint.search.id')" />
+            </el-col>
+            <el-col :span="4">
+              <el-button type="primary" @click="_queryComplaintMethod()">
+                {{ $t('common.search') }}
+              </el-button>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" style="margin-top:15px">
+            <el-col :span="4">
+              <el-date-picker v-model="complaintInfo.conditions.startTime" type="datetime"
+                :placeholder="$t('complaint.search.startTime')" style="width:100%" />
+            </el-col>
+            <el-col :span="4">
+              <el-date-picker v-model="complaintInfo.conditions.endTime" type="datetime"
+                :placeholder="$t('complaint.search.endTime')" style="width:100%" />
+            </el-col>
+          </el-row>
+        </el-card>
+
+        <el-card style="margin-top:20px">
+          <div slot="header" class="flex justify-between">
+            <span>{{ $t('complaint.list.title') }}</span>
+            <el-button type="primary" size="small" style="float:right" @click="_openAddComplaintModal()">
+              <i class="el-icon-plus"></i>{{ $t('complaint.list.add') }}
+            </el-button>
+          </div>
+          <el-table :data="complaintInfo.complaints" border style="width:100%" v-loading="loading">
+            <el-table-column prop="complaintId" :label="$t('complaint.table.id')" align="center" />
+            <el-table-column prop="typeName" :label="$t('complaint.table.type')" align="center" />
+            <el-table-column prop="roomName" :label="$t('complaint.table.room')" align="center" />
+            <el-table-column prop="complaintName" :label="$t('complaint.table.contact')" align="center" />
+            <el-table-column prop="tel" :label="$t('complaint.table.phone')" align="center" />
+            <el-table-column prop="stateName" :label="$t('complaint.table.status')" align="center" />
+            <el-table-column :label="$t('complaint.table.handler')" align="center">
+              <template slot-scope="scope">
+                <span v-for="(item, index) in scope.row.staffs" :key="index">{{ item.staffName }}<br /></span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="createTime" :label="$t('complaint.table.createTime')" align="center" />
+            <el-table-column :label="$t('common.operation')" align="center" width="220">
+              <template slot-scope="scope">
+                <el-button-group>
+                  <el-button size="mini" @click="_openComplaintDetailModel(scope.row)">
+                    {{ $t('common.detail') }}
+                  </el-button>
+                  <el-button size="mini" @click="_openEditComplaintModel(scope.row)">
+                    {{ $t('common.edit') }}
+                  </el-button>
+                  <el-button size="mini" type="danger" @click="_openDeleteComplaintModel(scope.row)">
+                    {{ $t('common.delete') }}
+                  </el-button>
+                </el-button-group>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-pagination style="margin-top:15px" @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-card>
+      </el-col>
+    </el-row>
+
+    <view-image ref="viewImage" />
+    <edit-complaint ref="editComplaint" @success="handleSuccess" />
+    <delete-complaint ref="deleteComplaint" @success="handleSuccess" />
+    <complaint-detail ref="complaintDetail" />
+  </div>
+</template>
+
+<script>
+import { listComplaints, listComplaintTypes } from '@/api/oa/complaintApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import ViewImage from '@/components/system/viewImage'
+import EditComplaint from '@/components/oa/editComplaint'
+import DeleteComplaint from '@/components/oa/deleteComplaint'
+import ComplaintDetail from '@/components/oa/complaintDetail'
+
+export default {
+  name: 'ComplaintList',
+  components: {
+    ViewImage,
+    EditComplaint,
+    DeleteComplaint,
+    ComplaintDetail
+  },
+  data() {
+    return {
+      loading: false,
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+      complaintInfo: {
+        complaints: [],
+        states: [
+          { statusCd: '', name: this.$t('complaint.status.all') },
+          { statusCd: 'W', name: this.$t('complaint.status.processing') },
+          { statusCd: 'C', name: this.$t('complaint.status.completed') }
+        ],
+        complaintTypes: [],
+        conditions: {
+          complaintId: '',
+          typeCd: '',
+          complaintName: '',
+          tel: '',
+          roomName: '',
+          state: '',
+          startTime: '',
+          endTime: '',
+          communityId: ''
+        }
+      }
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.complaintInfo.conditions.communityId = this.communityId
+    this._listComplaintTypes()
+    this._listComplaints()
+  },
+  methods: {
+    async _listComplaints() {
+      try {
+        this.loading = true
+        const params = {
+          ...this.complaintInfo.conditions,
+          page: this.page.current,
+          row: this.page.size
+        }
+        const { data, total } = await listComplaints(params)
+        this.complaintInfo.complaints = data
+        this.page.total = total
+      } catch (error) {
+        this.$message.error(this.$t('complaint.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    async _listComplaintTypes() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          communityId: this.communityId
+        }
+        const { data } = await listComplaintTypes(params)
+        this.complaintInfo.complaintTypes = data
+      } catch (error) {
+        console.error('获取投诉类型失败:', error)
+      }
+    },
+    swatchComplaintState(item) {
+      this.complaintInfo.conditions.state = item.statusCd
+      this._listComplaints()
+    },
+    _openAddComplaintModal() {
+      this.$router.push('/views/oa/addComplaint')
+    },
+    _openEditComplaintModel(row) {
+      this.$refs.editComplaint.open(row)
+    },
+    _openDeleteComplaintModel(row) {
+      this.$refs.deleteComplaint.open(row)
+    },
+    _openComplaintDetailModel(row) {
+      this.$refs.complaintDetail.open(row)
+    },
+    _queryComplaintMethod() {
+      this.page.current = 1
+      this._listComplaints()
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this._listComplaints()
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this._listComplaints()
+    },
+    handleSuccess() {
+      this._listComplaints()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.complaint-container {
+  padding: 20px;
+
+  .border-radius {
+    border-radius: 4px;
+  }
+
+  .treeview {
+    .list-group {
+      padding: 0;
+      margin: 0;
+      list-style: none;
+
+      .list-group-item {
+        padding: 10px 15px;
+        margin-bottom: -1px;
+        border: 1px solid #ddd;
+        cursor: pointer;
+
+        &:hover {
+          background-color: #f5f5f5;
+        }
+
+        &.vc-node-selected {
+          background-color: #409EFF;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/oa/complaintTypeLang.js b/src/views/oa/complaintTypeLang.js
new file mode 100644
index 0000000..040a46c
--- /dev/null
+++ b/src/views/oa/complaintTypeLang.js
@@ -0,0 +1,52 @@
+export const messages = {
+  en: {
+    complaintType: {
+      title: 'Complaint Type',
+      add: 'Add',
+      typeName: 'Type Name',
+      notifyWay: 'Notification Method',
+      sms: 'SMS',
+      wechat: 'WeChat',
+      wechatWorkLicense: 'WeChat + Work License',
+      appraiseReply: 'Evaluation Reply',
+      autoReply: 'Auto Reply',
+      manualReply: 'Manual Reply',
+      handler: 'Handler',
+      createTime: 'Create Time',
+      fetchError: 'Failed to fetch complaint types'
+    },
+    deleteComplaintType: {
+      confirmTitle: 'Confirm Operation',
+      confirmText: 'Are you sure to delete this complaint type?',
+      confirm: 'Confirm Delete',
+      cancel: 'Cancel',
+      success: 'Delete successfully',
+      error: 'Delete failed'
+    }
+  },
+  zh: {
+    complaintType: {
+      title: '投诉类型',
+      add: '添加',
+      typeName: '类型名称',
+      notifyWay: '通知方式',
+      sms: '短信',
+      wechat: '微信',
+      wechatWorkLicense: '微信+员工工牌',
+      appraiseReply: '评价回复',
+      autoReply: '自动回复',
+      manualReply: '人工回复',
+      handler: '处理人',
+      createTime: '创建时间',
+      fetchError: '获取投诉类型失败'
+    },
+    deleteComplaintType: {
+      confirmTitle: '请确认您的操作',
+      confirmText: '确定删除投诉类型',
+      confirm: '确认删除',
+      cancel: '点错了',
+      success: '删除成功',
+      error: '删除失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/oa/complaintTypeList.vue b/src/views/oa/complaintTypeList.vue
new file mode 100644
index 0000000..f068b3a
--- /dev/null
+++ b/src/views/oa/complaintTypeList.vue
@@ -0,0 +1,148 @@
+<template>
+  <div class="complaint-type-container">
+    <el-card class="box-card">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('complaintType.title') }}</span>
+        <el-button type="primary" size="small" style="float: right;" @click="_openAddComplaintTypeModal">
+          {{ $t('complaintType.add') }}
+        </el-button>
+      </div>
+
+      <el-table :data="complaintTypeInfo.complaintTypes" border style="width: 100%" v-loading="loading">
+        <el-table-column prop="typeName" :label="$t('complaintType.typeName')" align="center" />
+        <el-table-column prop="notifyWay" :label="$t('complaintType.notifyWay')" align="center">
+          <template slot-scope="scope">
+            <span v-if="scope.row.notifyWay === 'SMS'">
+              {{ $t('complaintType.sms') }}
+            </span>
+            <span v-else-if="scope.row.notifyWay === 'WORK_LICENSE'">
+              {{ $t('complaintType.wechatWorkLicense') }}
+            </span>
+            <span v-else>
+              {{ $t('complaintType.wechat') }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="appraiseReply" :label="$t('complaintType.appraiseReply')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.appraiseReply === 'Y' ? $t('complaintType.autoReply') : $t('complaintType.manualReply') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="staffs" :label="$t('complaintType.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('complaintType.createTime')" align="center" />
+        <el-table-column :label="$t('common.operation')" align="center" width="200">
+          <template slot-scope="scope">
+            <el-button size="mini" type="primary" @click="_openEditComplaintTypeModel(scope.row)">
+              {{ $t('common.edit') }}
+            </el-button>
+            <el-button size="mini" type="danger" @click="_openDeleteComplaintTypeModel(scope.row)">
+              {{ $t('common.delete') }}
+            </el-button>
+          </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="complaintTypeInfo.total" style="margin-top: 20px;" />
+    </el-card>
+
+    <delete-complaint-type ref="deleteComplaintType" @success="handleSuccess" />
+  </div>
+</template>
+
+<script>
+import { listComplaintType } from '@/api/oa/complaintTypeApi'
+import DeleteComplaintType from '@/components/oa/deleteComplaintType'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'ComplaintTypeList',
+  components: {
+    DeleteComplaintType
+  },
+  data() {
+    return {
+      loading: false,
+      complaintTypeInfo: {
+        complaintTypes: [],
+        total: 0,
+        conditions: {
+          typeCd: '',
+          typeName: '',
+          notifyWay: ''
+        }
+      },
+      page: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this._listComplaintTypes()
+  },
+  methods: {
+    async _listComplaintTypes() {
+      try {
+        this.loading = true
+        const params = {
+          page: this.page.current,
+          row: this.page.size,
+          communityId: this.communityId,
+          ...this.complaintTypeInfo.conditions
+        }
+        const { data, total } = await listComplaintType(params)
+        this.complaintTypeInfo.complaintTypes = data
+        this.complaintTypeInfo.total = total
+      } catch (error) {
+        this.$message.error(this.$t('complaintType.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    _openAddComplaintTypeModal() {
+      this.$router.push('/views/oa/addComplaintType')
+    },
+    _openEditComplaintTypeModel(complaintType) {
+      this.$router.push(`/views/oa/editComplaintType?typeCd=${complaintType.typeCd}`)
+    },
+    _openDeleteComplaintTypeModel(complaintType) {
+      this.$refs.deleteComplaintType.open(complaintType)
+    },
+    handleSuccess() {
+      this._listComplaintTypes()
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this._listComplaintTypes()
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this._listComplaintTypes()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.complaint-type-container {
+  padding: 20px;
+
+  .box-card {
+    margin-bottom: 20px;
+  }
+
+  .el-pagination {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/oa/editComplaintTypeLang.js b/src/views/oa/editComplaintTypeLang.js
new file mode 100644
index 0000000..55fa180
--- /dev/null
+++ b/src/views/oa/editComplaintTypeLang.js
@@ -0,0 +1,66 @@
+export const messages = {
+  en: {
+    editComplaintType: {
+      title: 'Edit Complaint Type',
+      typeName: 'Type Name',
+      typeNamePlaceholder: 'Required, please enter type name',
+      notifyWay: 'Notification Method',
+      notifyWayPlaceholder: 'Required, please select notification method',
+      sms: 'SMS',
+      wechat: 'WeChat',
+      workLicense: 'WeChat + Work License',
+      appraiseReply: 'Evaluation Reply',
+      appraiseReplyPlaceholder: 'Required, please select evaluation reply',
+      autoReply: 'Auto Reply',
+      manualReply: 'Manual Reply',
+      remark: 'Remark',
+      remarkPlaceholder: 'Optional, please enter remark',
+      selectStaff: 'Select Staff',
+      saveSuccess: 'Save successfully',
+      saveError: 'Save failed',
+      loadError: 'Failed to load complaint type details'
+    },
+    selectStaff: {
+      orgInfo: 'Organization Information',
+      staffInfo: 'Staff Information',
+      selectedStaff: 'Selected Staff',
+      staffAlreadySelected: 'Staff already selected',
+      loadStaffError: 'Failed to load staff information'
+    },
+    orgTree: {
+      loadError: 'Failed to load organization tree'
+    }
+  },
+  zh: {
+    editComplaintType: {
+      title: '修改投诉类型',
+      typeName: '类型名称',
+      typeNamePlaceholder: '必填，请填写类型名称',
+      notifyWay: '通知方式',
+      notifyWayPlaceholder: '必填，请选择通知方式',
+      sms: '短信',
+      wechat: '微信',
+      workLicense: '微信+员工工牌',
+      appraiseReply: '评价回复',
+      appraiseReplyPlaceholder: '必填，请选择评价回复',
+      autoReply: '自动回复',
+      manualReply: '人工回复',
+      remark: '备注',
+      remarkPlaceholder: '选填，请填写备注',
+      selectStaff: '选择员工',
+      saveSuccess: '保存成功',
+      saveError: '保存失败',
+      loadError: '加载投诉类型详情失败'
+    },
+    selectStaff: {
+      orgInfo: '组织信息',
+      staffInfo: '员工信息',
+      selectedStaff: '已选员工',
+      staffAlreadySelected: '请勿重复选择',
+      loadStaffError: '加载员工信息失败'
+    },
+    orgTree: {
+      loadError: '加载组织树失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/oa/editComplaintTypeList.vue b/src/views/oa/editComplaintTypeList.vue
new file mode 100644
index 0000000..02d79a2
--- /dev/null
+++ b/src/views/oa/editComplaintTypeList.vue
@@ -0,0 +1,163 @@
+<template>
+  <el-card class="edit-complaint-type-container">
+    <div slot="header" class="clearfix">
+      <span>{{ $t('editComplaintType.title') }}</span>
+    </div>
+
+    <el-form ref="form" :model="editComplaintTypeInfo" label-width="120px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('editComplaintType.typeName')" prop="typeName">
+            <el-input v-model="editComplaintTypeInfo.typeName"
+              :placeholder="$t('editComplaintType.typeNamePlaceholder')" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('editComplaintType.notifyWay')" prop="notifyWay">
+            <el-select v-model="editComplaintTypeInfo.notifyWay"
+              :placeholder="$t('editComplaintType.notifyWayPlaceholder')" style="width:100%">
+              <el-option v-for="item in notifyWayOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('editComplaintType.appraiseReply')" prop="appraiseReply">
+            <el-select v-model="editComplaintTypeInfo.appraiseReply"
+              :placeholder="$t('editComplaintType.appraiseReplyPlaceholder')" style="width:100%">
+              <el-option v-for="item in appraiseReplyOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('editComplaintType.remark')" prop="remark">
+            <el-input v-model="editComplaintTypeInfo.remark" type="textarea"
+              :placeholder="$t('editComplaintType.remarkPlaceholder')" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="24">
+          <el-form-item :label="$t('editComplaintType.selectStaff')">
+            <select-staffs ref="selectStaffs"  @selectStaffs="handleStaffSelected"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="24" class="text-right">
+          <el-button type="warning" @click="handleBack">
+            <i class="el-icon-close"></i>
+            {{ $t('common.back') }}
+          </el-button>
+          <el-button type="primary" @click="handleSave">
+            <i class="el-icon-check"></i>
+            {{ $t('common.save') }}
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+  </el-card>
+</template>
+
+<script>
+import { updateComplaintType, getComplaintTypeDetail } from '@/api/oa/editComplaintTypeApi'
+import SelectStaffs from '@/components/staff/selectStaffsDiv'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'EditComplaintTypeList',
+  components: {
+    SelectStaffs
+  },
+  data() {
+    return {
+      editComplaintTypeInfo: {
+        typeCd: '',
+        typeName: '',
+        notifyWay: '',
+        appraiseReply: '',
+        remark: '',
+        staffs: [],
+        communityId: ''
+      },
+      notifyWayOptions: [
+        { value: 'SMS', label: this.$t('editComplaintType.sms') },
+        { value: 'WECHAT', label: this.$t('editComplaintType.wechat') },
+        { value: 'WORK_LICENSE', label: this.$t('editComplaintType.workLicense') }
+      ],
+      appraiseReplyOptions: [
+        { value: 'Y', label: this.$t('editComplaintType.autoReply') },
+        { value: 'N', label: this.$t('editComplaintType.manualReply') }
+      ]
+    }
+  },
+  created() {
+    this.editComplaintTypeInfo.communityId = getCommunityId()
+    this.editComplaintTypeInfo.typeCd = this.$route.query.typeCd
+    this.loadComplaintTypeDetail()
+  },
+  methods: {
+    handleStaffSelected(staffs) {
+      this.editComplaintTypeInfo.staffs = staffs
+    },
+    async loadComplaintTypeDetail() {
+      try {
+        const params = {
+          typeCd: this.editComplaintTypeInfo.typeCd,
+          communityId: this.editComplaintTypeInfo.communityId,
+          page: 1,
+          row: 1
+        }
+        const { data } = await getComplaintTypeDetail(params)
+        if (data && data.length > 0) {
+          this.editComplaintTypeInfo = { ...data[0] }
+          let _staffs = []
+          data[0].staffs.forEach(staff => {
+            _staffs.push({ userId: staff.staffId, name: staff.staffName })
+          });
+          this.$refs.selectStaffs.setStaffs(_staffs || [])
+        }
+      } catch (error) {
+        this.$message.error(this.$t('editComplaintType.loadError'))
+      }
+    },
+    validateForm() {
+      return this.$refs.form.validate()
+    },
+    async handleSave() {
+      try {
+        const isValid = await this.validateForm()
+        if (!isValid) return
+
+        this.editComplaintTypeInfo.staffs = this.$refs.selectStaffs.getSelectedStaffs()
+        await updateComplaintType(this.editComplaintTypeInfo)
+        this.$message.success(this.$t('editComplaintType.saveSuccess'))
+        this.handleBack()
+      } catch (error) {
+        this.$message.error(error.message || this.$t('editComplaintType.saveError'))
+      }
+    },
+    handleBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.edit-complaint-type-container {
+  margin: 20px;
+
+  .text-right {
+    text-align: right;
+  }
+
+  .el-form-item {
+    margin-bottom: 22px;
+  }
+}
+</style>
\ No newline at end of file
--
libgit2 0.21.4