开发完成admin 小区投诉功能

wuxw
1 parent e0196f8a
Showing 12 changed files with 956 additions and 0 deletions
src/api/complaint/adminComplaintApi.js
src/api/complaint/adminComplaintDetailApi.js
src/components/community/viewImage.vue
src/components/complaint/aComplaintDetailAppraise.vue
src/components/complaint/aComplaintDetailEvent.vue
src/components/complaint/aComplaintDetailType.vue
src/i18n/index.js
src/router/index.js
src/views/complaint/adminComplaintDetailLang.js
src/views/complaint/adminComplaintDetailList.vue
src/views/complaint/adminComplaintLang.js
src/views/complaint/adminComplaintList.vue
+import request from '@/utils/request'
+
+// 获取投诉建议列表
+export function listAdminComplaints(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/complaint.listAdminComplaints',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve({
+          data: res.data,
+          total: res.total
+        })
+      } else {
+        reject(new Error(res.msg || 'Failed to get complaint list'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取管理员小区列表
+export function listAdminCommunitys(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/community.listAdminCommunitys',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve({
+          data: res.data
+        })
+      } else {
+        reject(new Error(res.msg || 'Failed to get community list'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+// 获取投诉详情
+export function getComplaintDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/complaint.listAdminComplaints',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code == 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取投诉详情失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取投诉事件列表
+export function listComplaintEvents(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/complaint.listAdminComplaintEvent',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code == 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取投诉事件列表失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取投诉评价列表
+export function listComplaintAppraises(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/complaintAppraise.listAdminComplaintAppraise',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code == 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取投诉评价列表失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取投诉类型列表
+export function listComplaintTypes(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/complaintType.listAdminComplaintType',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code == 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取投诉类型列表失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+<template>
+  <div id="view-image" v-show="visible">
+    <div class="image-container">
+      <img :src="imageUrl" :width="imageWidth" :height="imageHeight" @error="handleImageError" />
+      <span class="el-icon-close close-icon" @click="close" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ViewImage',
+  data() {
+    return {
+      visible: false,
+      imageUrl: '',
+      imageWidth: 800,
+      imageHeight: 800
+    }
+  },
+  methods: {
+    open(url) {
+      this.imageUrl = url
+      this.visible = true
+      this.enterFullscreen()
+      const img = new Image()
+      img.src = url
+      img.onload = () => {
+        const imgScale = img.width / img.height
+        this.imageWidth = 800
+        this.imageHeight = 800 / imgScale
+      }
+    },
+    close() {
+      this.exitFullscreen()
+      this.visible = false
+    },
+    enterFullscreen() {
+      const element = document.getElementById('view-image')
+      if (element.requestFullscreen) {
+        element.requestFullscreen()
+      } else if (element.mozRequestFullScreen) {
+        element.mozRequestFullScreen()
+      } else if (element.webkitRequestFullscreen) {
+        element.webkitRequestFullscreen()
+      } else if (element.msRequestFullscreen) {
+        element.msRequestFullscreen()
+      }
+    },
+    exitFullscreen() {
+      if (document.exitFullscreen) {
+        document.exitFullscreen()
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen()
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen()
+      }
+    },
+    handleImageError(e) {
+      e.target.src = '/img/noPhoto.jpg'
+    }
+  }
+}
+</script>
+
+<style scoped>
+#view-image {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.image-container {
+  position: relative;
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 4px;
+}
+
+.close-icon {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  font-size: 20px;
+  color: red;
+  cursor: pointer;
+}
+</style>
 \ No newline at end of file
+<template>
+  <div class="appraise-container">
+    <el-table :data="appraises" border style="width: 100%">
+      <el-table-column prop="createUserName" :label="$t('complaintDetailAppraise.user')" align="center"></el-table-column>
+      <el-table-column prop="context" :label="$t('complaintDetailAppraise.content')" align="center"></el-table-column>
+      <el-table-column prop="score" :label="$t('complaintDetailAppraise.score')" align="center"></el-table-column>
+      <el-table-column prop="state" :label="$t('complaintDetailAppraise.status')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.state === 'W' ? $t('complaintDetailAppraise.pending') : $t('complaintDetailAppraise.replied') }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" :label="$t('complaintDetailAppraise.time')" align="center"></el-table-column>
+      <el-table-column prop="replyUserName" :label="$t('complaintDetailAppraise.replier')" align="center"></el-table-column>
+      <el-table-column prop="replyContext" :label="$t('complaintDetailAppraise.replyContent')" align="center"></el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { listComplaintAppraises } from '@/api/complaint/adminComplaintDetailApi'
+
+export default {
+  name: 'AComplaintDetailAppraise',
+  props: {
+    complaintId: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      appraises: []
+    }
+  },
+  methods: {
+    async loadData() {
+      try {
+        const params = {
+          complaintId: this.complaintId,
+          page: 1,
+          row: 100
+        }
+        const { data } = await listComplaintAppraises(params)
+        this.appraises = data || []
+      } catch (error) {
+        this.$message.error(this.$t('complaintDetailAppraise.fetchError'))
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.appraise-container {
+  padding: 20px 0;
+}
+</style>
 \ No newline at end of file
+<template>
+  <div class="event-container">
+    <el-table :data="events" border style="width: 100%">
+      <el-table-column prop="eventType" :label="$t('complaintDetailEvent.type')" align="center">
+        <template slot-scope="scope">
+          {{ getEventTypeName(scope.row.eventType) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="createUserName" :label="$t('complaintDetailEvent.operator')" align="center"></el-table-column>
+      <el-table-column prop="remark" :label="$t('complaintDetailEvent.remark')" align="center"></el-table-column>
+      <el-table-column prop="createTime" :label="$t('complaintDetailEvent.time')" align="center"></el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { listComplaintEvents } from '@/api/complaint/adminComplaintDetailApi'
+
+export default {
+  name: 'AComplaintDetailEvent',
+  props: {
+    complaintId: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      events: []
+    }
+  },
+  methods: {
+    async loadData() {
+      try {
+        const params = {
+          complaintId: this.complaintId,
+          page: 1,
+          row: 100
+        }
+        const { data } = await listComplaintEvents(params)
+        this.events = data || []
+      } catch (error) {
+        this.$message.error(this.$t('complaintDetailEvent.fetchError'))
+      }
+    },
+    getEventTypeName(eventType) {
+      switch (eventType) {
+        case '1000': return this.$t('complaintDetailEvent.submit')
+        case '1001': return this.$t('complaintDetailEvent.process')
+        case '2002': return this.$t('complaintDetailEvent.evaluate')
+        default: return this.$t('complaintDetailEvent.reply')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.event-container {
+  padding: 20px 0;
+}
+</style>
 \ No newline at end of file
+<template>
+  <div class="type-container">
+    <el-table :data="complaintTypes" border style="width: 100%">
+      <el-table-column prop="typeName" :label="$t('complaintDetailType.name')" align="center"></el-table-column>
+      <el-table-column prop="notifyWay" :label="$t('complaintDetailType.notifyWay')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.notifyWay === 'SMS' ? $t('complaintDetailType.sms') : $t('complaintDetailType.wechat') }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="appraiseReply" :label="$t('complaintDetailType.replyType')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.appraiseReply === 'Y' ? $t('complaintDetailType.autoReply') : $t('complaintDetailType.manualReply') }}
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('complaintDetailType.handler')" align="center">
+        <template slot-scope="scope">
+          <div v-for="(staff, index) in scope.row.staffs" :key="index">
+            {{ staff.staffName }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" :label="$t('complaintDetailType.createTime')" align="center"></el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { listComplaintTypes } from '@/api/complaint/adminComplaintDetailApi'
+
+export default {
+  name: 'AComplaintDetailType',
+  props: {
+    complaintId: {
+      type: String,
+      default: ''
+    },
+    typeCd: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      complaintTypes: []
+    }
+  },
+  methods: {
+    async loadData() {
+      try {
+        const params = {
+          typeCd: this.typeCd,
+          page: 1,
+          row: 100
+        }
+        const { data } = await listComplaintTypes( params )
+        this.complaintTypes = data || []
+      } catch (error) {
+        this.$message.error(this.$t('complaintDetailType.fetchError'))
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.type-container {
+  padding: 20px 0;
+}
+</style>
 \ No newline at end of file
@@ -72,6 +72,8 @@ import { messages as adminInspectionPlanMessages } from &#39;../views/inspection/adm
 import { messages as aInspectionPlanDetailMessages } from '../views/inspection/aInspectionPlanDetailLang'
 import { messages as adminInspectionTaskMessages } from '../views/inspection/adminInspectionTaskLang'
 import { messages as adminInspectionTaskDetailMessages } from '../views/inspection/adminInspectionTaskDetailLang'
+import { messages as adminComplaintMessages } from '../views/complaint/adminComplaintLang'
+import { messages as adminComplaintDetailMessages } from '../views/complaint/adminComplaintDetailLang'
  
 Vue.use(VueI18n)
  
@@ -148,6 +150,8 @@ const messages = {
     ...aInspectionPlanDetailMessages.en,
     ...adminInspectionTaskMessages.en,
     ...adminInspectionTaskDetailMessages.en,
+    ...adminComplaintMessages.en,
+    ...adminComplaintDetailMessages.en,
   },
   zh: {
     ...loginMessages.zh,
@@ -220,6 +224,8 @@ const messages = {
     ...aInspectionPlanDetailMessages.zh,
     ...adminInspectionTaskMessages.zh,
     ...adminInspectionTaskDetailMessages.zh,
+    ...adminComplaintMessages.zh,
+    ...adminComplaintDetailMessages.zh,
   }
 }
  
@@ -346,6 +346,16 @@ const routes = [
         name: '/views/inspection/adminInspectionTaskDetail',
         component: () => import('@/views/inspection/adminInspectionTaskDetailList.vue')
       },
+      {
+        path:'/pages/complaint/adminComplaint',
+        name:'/pages/complaint/adminComplaint',
+        component: () => import('@/views/complaint/adminComplaintList.vue')
+        },
+        {
+          path:'/views/complaint/adminComplaintDetail',
+          name:'/views/complaint/adminComplaintDetail',
+          component: () => import('@/views/complaint/adminComplaintDetailList.vue')
+          },
       // 其他子路由可以在这里添加
     ]
   },
+export const messages = {
+  en: {
+    complaintDetail: {
+      title: 'Complaint Details',
+      orderId: 'Order ID',
+      type: 'Type',
+      room: 'Room',
+      contact: 'Contact',
+      phone: 'Phone',
+      status: 'Status',
+      createTime: 'Create Time',
+      content: 'Content',
+      workflow: 'Workflow',
+      evaluation: 'Evaluation',
+      fetchError: 'Failed to fetch complaint details'
+    },
+    complaintDetailEvent: {
+      type: 'Type',
+      operator: 'Operator',
+      remark: 'Remark',
+      time: 'Time',
+      submit: 'Submit',
+      process: 'Process',
+      evaluate: 'Evaluate',
+      reply: 'Reply',
+      fetchError: 'Failed to fetch event list'
+    },
+    complaintDetailAppraise: {
+      user: 'User Name',
+      content: 'Evaluation Content',
+      score: 'Evaluation Score',
+      status: 'Evaluation Status',
+      time: 'Evaluation Time',
+      replier: 'Replier',
+      replyContent: 'Reply Content',
+      pending: 'Pending Reply',
+      replied: 'Replied',
+      fetchError: 'Failed to fetch evaluation list'
+    },
+        complaintDetailType: {
+      name: 'Type Name',
+      notifyWay: 'Notification Method',
+      replyType: 'Reply Type',
+      handler: 'Handler',
+      createTime: 'Create Time',
+      sms: 'SMS',
+      wechat: 'WeChat',
+      autoReply: 'Auto Reply',
+      manualReply: 'Manual Reply',
+      fetchError: 'Failed to fetch type list'
+    }
+  },
+  zh: {
+    complaintDetail: {
+      title: '投诉详情',
+      orderId: '订单编号',
+      type: '类型',
+      room: '房屋',
+      contact: '联系人',
+      phone: '联系电话',
+      status: '状态',
+      createTime: '创建时间',
+      content: '投诉内容',
+      workflow: '工单流转',
+      evaluation: '工单评价',
+      fetchError: '获取投诉详情失败'
+    },
+    complaintDetailEvent: {
+      type: '类型',
+      operator: '操作人',
+      remark: '说明',
+      time: '时间',
+      submit: '提交',
+      process: '投诉处理',
+      evaluate: '评价',
+      reply: '评价回复',
+      fetchError: '获取事件列表失败'
+    },
+    complaintDetailAppraise: {
+      user: '用户名称',
+      content: '评价内容',
+      score: '评价得分',
+      status: '评价状态',
+      time: '评价时间',
+      replier: '回复人',
+      replyContent: '回复内容',
+      pending: '待回复',
+      replied: '已回复',
+      fetchError: '获取评价列表失败'
+    },
+     complaintDetailType: {
+      name: '类型名称',
+      notifyWay: '通知方式',
+      replyType: '评价回复',
+      handler: '处理人',
+      createTime: '创建时间',
+      sms: '短信',
+      wechat: '微信',
+      autoReply: '自动回复',
+      manualReply: '人工回复',
+      fetchError: '获取类型列表失败'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="complaint-detail-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix flex justify-between">
+        <span>{{ $t('complaintDetail.title') }}</span>
+        <el-button type="link" size="mini" @click="goBack">
+          {{ $t('common.back') }}
+        </el-button>
+      </div>
+      <div class="card-content">
+        <el-row :gutter="20" class="info-section text-left">
+          <el-col :span="6">
+            <div class="info-item">
+              <label>{{ $t('complaintDetail.orderId') }}:</label>
+              <span>{{ complaintDetail.complaintId }}</span>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="info-item">
+              <label>{{ $t('complaintDetail.type') }}:</label>
+              <span>{{ complaintDetail.typeName }}</span>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="info-item">
+              <label>{{ $t('complaintDetail.room') }}:</label>
+              <span>{{ complaintDetail.roomName }}</span>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="info-item">
+              <label>{{ $t('complaintDetail.contact') }}:</label>
+              <span>{{ complaintDetail.complaintName }}</span>
+            </div>
+          </el-col>
+        </el-row>
+
+
+        <el-row :gutter="20" class="info-section text-left">
+          <el-col :span="6">
+            <div class="info-item">
+              <label>{{ $t('complaintDetail.phone') }}:</label>
+              <span>{{ complaintDetail.tel }}</span>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="info-item">
+              <label>{{ $t('complaintDetail.status') }}:</label>
+              <span>{{ complaintDetail.stateName }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="info-item">
+              <label>{{ $t('complaintDetail.createTime') }}:</label>
+              <span>{{ complaintDetail.createTime }}</span>
+            </div>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20" class="info-section text-left">
+          <el-col :span="24">
+            <div class="info-item">
+              <label>{{ $t('complaintDetail.content') }}:</label>
+              <span>{{ complaintDetail.context }}</span>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <divider></divider>
+
+      <el-tabs v-model="activeTab" @tab-click="handleTabClick(activeTab)">
+        <el-tab-pane :label="$t('complaintDetail.workflow')" name="aComplaintDetailEvent">
+          <a-complaint-detail-event ref="aComplaintDetailEvent"
+            :complaint-id="complaintDetail.complaintId"></a-complaint-detail-event>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('complaintDetail.evaluation')" name="aComplaintDetailAppraise">
+          <a-complaint-detail-appraise ref="aComplaintDetailAppraise"
+            :complaint-id="complaintDetail.complaintId"></a-complaint-detail-appraise>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('complaintDetail.type')" name="aComplaintDetailType">
+          <a-complaint-detail-type ref="aComplaintDetailType" :complaint-id="complaintDetail.complaintId"
+            :type-cd="complaintDetail.typeCd"></a-complaint-detail-type>
+        </el-tab-pane>
+      </el-tabs>
+
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getComplaintDetail } from '@/api/complaint/adminComplaintDetailApi'
+import AComplaintDetailEvent from '@/components/complaint/aComplaintDetailEvent'
+import AComplaintDetailAppraise from '@/components/complaint/aComplaintDetailAppraise'
+import AComplaintDetailType from '@/components/complaint/aComplaintDetailType'
+import divider from '@/components/system/divider'
+
+export default {
+  name: 'AdminComplaintDetail',
+  components: {
+    AComplaintDetailEvent,
+    AComplaintDetailAppraise,
+    AComplaintDetailType,
+    divider
+  },
+  data() {
+    return {
+      complaintDetail: {
+        complaintId: '',
+        typeName: '',
+        typeCd: '',
+        roomName: '',
+        complaintName: '',
+        tel: '',
+        stateName: '',
+        createTime: '',
+        context: ''
+      },
+      activeTab: 'aComplaintDetailEvent'
+    }
+  },
+  created() {
+    this.complaintDetail.complaintId = this.$route.query.complaintId
+    if (this.$route.query.currentTab) {
+      this.activeTab = this.$route.query.currentTab
+    }
+    this.loadComplaintDetail()
+  },
+  methods: {
+    async loadComplaintDetail() {
+      try {
+        const params = {
+          complaintId: this.complaintDetail.complaintId,
+          page: 1,
+          row: 1,
+          ownerTypeCd: '1001'
+        }
+        const { data } = await getComplaintDetail(params)
+        if (data && data.length > 0) {
+          Object.assign(this.complaintDetail, data[0])
+        }
+      } catch (error) {
+        this.$message.error(this.$t('complaintDetail.fetchError'))
+      }
+    },
+    goBack() {
+      this.$router.go(-1)
+    },
+    handleTabClick(tab) {
+      this.activeTab = tab
+      setTimeout(() => {
+        this.$refs[tab].loadData()
+      },500)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.complaint-detail-container {
+
+
+  .header-wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+
+    .title {
+      font-size: 18px;
+      font-weight: bold;
+    }
+  }
+
+  .info-section {
+    margin-bottom: 15px;
+    color: #666;
+  }
+
+  .info-item {
+    margin-bottom: 10px;
+
+    label {
+      font-weight: bold;
+      margin-right: 10px;
+    }
+  }
+}</style>
 \ No newline at end of file
+export const messages = {
+  en: {
+    adminComplaint: {
+      search: {
+        title: 'Search Conditions',
+        roomName: 'Room',
+        roomNamePlaceholder: 'Building-Unit-Room e.g. 1-1-1',
+        complaintName: 'Contact',
+        complaintNamePlaceholder: 'Please enter contact name',
+        tel: 'Contact Tel',
+        telPlaceholder: 'Please enter contact tel',
+        complaintId: 'Complaint ID',
+        complaintIdPlaceholder: 'Please enter complaint ID',
+        startTime: 'Start Time',
+        startTimePlaceholder: 'Please select start time',
+        endTime: 'End Time',
+        endTimePlaceholder: 'Please select end time'
+      },
+      list: {
+        title: 'Complaint Suggestions'
+      },
+      table: {
+        complaintId: 'Order ID',
+        type: 'Type',
+        room: 'Room',
+        contact: 'Contact',
+        contactTel: 'Contact Tel',
+        status: 'Status',
+        handler: 'Handler',
+        createTime: 'Create Time'
+      },
+      fetchError: 'Failed to fetch complaint list'
+    }
+  },
+  zh: {
+    adminComplaint: {
+      search: {
+        title: '查询条件',
+        roomName: '房屋',
+        roomNamePlaceholder: '楼栋-单元-房屋 如1-1-1',
+        complaintName: '联系人',
+        complaintNamePlaceholder: '请输入联系人',
+        tel: '联系电话',
+        telPlaceholder: '请输入联系电话',
+        complaintId: '工单编号',
+        complaintIdPlaceholder: '请输入工单编号',
+        startTime: '开始时间',
+        startTimePlaceholder: '请选择开始时间',
+        endTime: '结束时间',
+        endTimePlaceholder: '请选择结束时间'
+      },
+      list: {
+        title: '投诉建议'
+      },
+      table: {
+        complaintId: '订单编号',
+        type: '类型',
+        room: '房屋',
+        contact: '联系人',
+        contactTel: '联系电话',
+        status: '状态',
+        handler: '处理人',
+        createTime: '创建时间'
+      },
+      fetchError: '获取投诉列表失败'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="admin-complaint-container animated fadeInRight">
+    <el-row :gutter="20">
+      <el-col :span="3">
+        <select-admin-community @changeCommunity="handleCommunityChange" />
+      </el-col>
+      <el-col :span="21">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix flex justify-between">
+            <span>{{ $t('adminComplaint.search.title') }}</span>
+          </div>
+          <el-row :gutter="20">
+            <el-col :span="4">
+              <el-input v-model="searchForm.roomName" :placeholder="$t('adminComplaint.search.roomNamePlaceholder')"
+                clearable />
+            </el-col>
+            <el-col :span="4">
+              <el-input v-model="searchForm.complaintName"
+                :placeholder="$t('adminComplaint.search.complaintNamePlaceholder')" clearable />
+            </el-col>
+            <el-col :span="4">
+              <el-input v-model="searchForm.tel" :placeholder="$t('adminComplaint.search.telPlaceholder')" clearable />
+            </el-col>
+            <el-col :span="4">
+              <el-input v-model="searchForm.complaintId" :placeholder="$t('adminComplaint.search.complaintIdPlaceholder')"
+                clearable />
+            </el-col>
+            <el-col :span="4" class="flex justify-start">
+              <el-button type="primary" @click="handleSearch">{{ $t('common.search') }}</el-button>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="margin-top">
+            <el-col :span="4">
+              <el-date-picker v-model="searchForm.startTime" type="datetime"
+                :placeholder="$t('adminComplaint.search.startTimePlaceholder')" value-format="yyyy-MM-dd HH:mm:ss" />
+            </el-col>
+            <el-col :span="4">
+              <el-date-picker v-model="searchForm.endTime" type="datetime"
+                :placeholder="$t('adminComplaint.search.endTimePlaceholder')" value-format="yyyy-MM-dd HH:mm:ss" />
+            </el-col>
+
+
+          </el-row>
+        </el-card>
+
+        <el-card class="box-card margin-top-20">
+          <div slot="header" class="clearfix flex justify-between">
+            <span>{{ $t('adminComplaint.list.title') }}</span>
+          </div>
+          <el-table :data="tableData" border style="width: 100%" v-loading="loading">
+            <el-table-column prop="complaintId" :label="$t('adminComplaint.table.complaintId')" align="center" />
+            <el-table-column prop="typeName" :label="$t('adminComplaint.table.type')" align="center" />
+            <el-table-column prop="roomName" :label="$t('adminComplaint.table.room')" align="center" />
+            <el-table-column prop="complaintName" :label="$t('adminComplaint.table.contact')" align="center" />
+            <el-table-column prop="tel" :label="$t('adminComplaint.table.contactTel')" align="center" />
+            <el-table-column prop="stateName" :label="$t('adminComplaint.table.status')" align="center" />
+            <el-table-column :label="$t('adminComplaint.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('adminComplaint.table.createTime')" align="center" />
+            <el-table-column :label="$t('common.operation')" align="center" width="120">
+              <template slot-scope="scope">
+                <el-button size="mini" type="primary" @click="handleDetail(scope.row)">
+                  {{ $t('common.detail') }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-pagination class="margin-top-20" :current-page="pagination.current" :page-sizes="[10, 20, 30, 50]"
+            :page-size="pagination.size" :total="pagination.total" layout="total, sizes, prev, pager, next, jumper"
+            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+        </el-card>
+      </el-col>
+    </el-row>
+    <view-image ref="viewImage" />
+  </div>
+</template>
+
+<script>
+import { listAdminComplaints } from '@/api/complaint/adminComplaintApi'
+import SelectAdminCommunity from '@/components/community/selectAdminCommunity'
+import ViewImage from '@/components/community/viewImage'
+
+export default {
+  name: 'AdminComplaintList',
+  components: {
+    SelectAdminCommunity,
+    ViewImage
+  },
+  data() {
+    return {
+      loading: false,
+      searchForm: {
+        communityId: '',
+        complaintId: '',
+        typeCd: '',
+        complaintName: '',
+        tel: '',
+        roomName: '',
+        state: '',
+        startTime: '',
+        endTime: ''
+      },
+      tableData: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      try {
+        this.loading = true
+        const params = {
+          ...this.searchForm,
+          page: this.pagination.current,
+          row: this.pagination.size
+        }
+        const { data, total } = await listAdminComplaints(params)
+        this.tableData = data
+        this.pagination.total = total
+      } catch (error) {
+        this.$message.error(this.$t('adminComplaint.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSearch() {
+      this.pagination.current = 1
+      this.getList()
+    },
+    handleCommunityChange(community) {
+      this.searchForm.communityId = community.communityId
+      this.getList()
+    },
+    handleDetail(row) {
+      this.$router.push(`/views/complaint/adminComplaintDetail?complaintId=${row.complaintId}`)
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.admin-complaint-container {
+  padding: 20px;
+
+  .search-form {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .margin-top-20 {
+    margin-top: 20px;
+  }
+}
+</style>
 \ No newline at end of file