kyj-yanglao-web-new/src/views/system/safety/complaint-management/index.vue

<template>
  <!-- 搜索 -->
  <ContentWrap>
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="80px"
    >
      <el-form-item label="内容摘要" prop="summary">
        <el-input
          @keyup.enter="handleQuery"
          v-model="queryParams.summary"
          placeholder="请输入工单内容摘要"
          class="!w-240px"
          clearable
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择状态"
          clearable
          style="width: 160px"
        >
          <el-option v-for="s in statusOptions" :key="s" :label="s" :value="s" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px" /> 搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px" /> 重置
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <Table2
      v-loading="loading"
      :data="list"
      :columns="ComplaintManagementColumns"
      :queryParams="queryParams"
      :op-width="110"
      :show-edit-condition="() => false"
      :show-detail-condition="() => false"
      :show-delete-condition="() => false"
    >
      <template #next="{ scope }">
        <el-button link type="primary" @click="handleDetail(scope)">详情</el-button>
      </template>
    </Table2>

    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>
</template>

<script lang="ts" setup>
import { ComplaintManagementColumns } from './columns'

defineOptions({ name: 'SystemComplaintManagement' })

const message = useMessage()

const loading = ref(true)
const total = ref(0)
const list = ref<any[]>([])

const statusOptions = ['已解决', '处理中', '撤销工单']

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  summary: undefined as string | undefined,
  status: undefined as string | undefined
})
const queryFormRef = ref()

/** 写死的投诉管理数据（暂未对接接口） */
const allList: any[] = [
  {
    date: '2026-04-10',
    source: '12345',
    category: '服务流程',
    summary: '家属反映院内蚊虫较多，要求加强灭蚊工作',
    relatedParty: '院内长者家属',
    status: '已解决'
  },
  {
    date: '2026-03-31',
    source: '12345',
    category: '服务流程',
    summary: '周边居民反映清晨6-8点有广播体操噪音扰民',
    relatedParty: '周边居民',
    status: '已解决'
  },
  {
    date: '2026-03-18',
    source: '12345',
    category: '服务流程',
    summary: '居民投诉厨房排风系统不定时发出巨大噪音',
    relatedParty: '周边居民',
    status: '已解决'
  },
  {
    date: '2026-03-17',
    source: '12345',
    category: '服务流程',
    summary: '长者外出就医期间，除床位费外仍收取护理费',
    relatedParty: '董卫红',
    status: '撤销工单'
  },
  {
    date: '2026-03-02',
    source: '12345',
    category: '服务流程',
    summary: '再次投诉午休12-14时仍听到洗衣房噪音',
    relatedParty: '周边居民',
    status: '已解决'
  },
  {
    date: '2026-02-21',
    source: '12345',
    category: '服务流程',
    summary: '投诉建筑背面排风机转动噪音，每日多个时段频发',
    relatedParty: '周边居民',
    status: '已解决'
  },
  {
    date: '2026-02-13',
    source: '12345',
    category: '服务流程',
    summary: '投诉4楼洗衣房洗衣机不定时发出噪音扰民',
    relatedParty: '周边居民',
    status: '已解决'
  },
  {
    date: '2026-02-13',
    source: '12345',
    category: '服务流程',
    summary: '家属投诉机构老人探视流程及时间安排问题',
    relatedParty: '宁迎明',
    status: '已解决'
  },
  {
    date: '2025-12-28',
    source: '12345',
    category: '环境卫生',
    summary: '家属反映老人房间卫生间渗水，地面长期湿滑存在安全隐患',
    relatedParty: '院内长者家属',
    status: '已解决'
  },
  {
    date: '2025-12-15',
    source: '12345',
    category: '设施设备',
    summary: '长者反映楼道照明灯损坏多日未维修，夜间出行不便',
    relatedParty: '院内长者',
    status: '已解决'
  },
  {
    date: '2025-12-03',
    source: '12345',
    category: '服务态度',
    summary: '家属投诉护理人员沟通态度生硬，缺乏耐心',
    relatedParty: '院内长者家属',
    status: '已解决'
  },
  {
    date: '2025-11-20',
    source: '12345',
    category: '餐饮照护',
    summary: '长者反映午餐菜品温度偏低，老年人肠胃不适应',
    relatedParty: '院内长者',
    status: '已解决'
  }
]

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const kw = (queryParams.summary || '').trim()
    const st = queryParams.status
    const filtered = allList.filter((item) => {
      if (kw && !item.summary.includes(kw)) return false
      if (st && item.status !== st) return false
      return true
    })
    total.value = filtered.length
    const start = (queryParams.pageNo - 1) * queryParams.pageSize
    list.value = filtered.slice(start, start + queryParams.pageSize)
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  queryParams.pageNo = 1
  getList()
}

/** 详情（暂无详情数据，仅占位） */
const handleDetail = (row: any) => {
  message.info('详情功能开发中')
}

getList()
</script>