yifengyide/src/views/complaint/index.vue

<template>
  <lay-container fluid="true" style="padding: 20px">
    <lay-row :space="10">
      <!-- 搜索区域 -->
      <lay-col :md="24">
        <lay-card>
          <lay-form style="margin-top: 20px">
            <lay-row>
              <lay-col :md="5">
                <lay-form-item label="患者姓名：" label-width="80">
                  <lay-input  v-model="searchQuery.patientName" placeholder="请输入患者姓名"
                    :allow-clear="true">
                  </lay-input>
                </lay-form-item>
              </lay-col>
              <lay-col :md="5">
                <lay-form-item label="投诉类型：" label-width="80">
                  <lay-select v-model="searchQuery.complaintType" placeholder="请选择类型" :allow-clear="true">
                    <lay-select-option value="服务态度" label="服务态度"></lay-select-option>
                    <lay-select-option value="医疗质量" label="医疗质量"></lay-select-option>
                    <lay-select-option value="收费问题" label="收费问题"></lay-select-option>
                    <lay-select-option value="其他" label="其他"></lay-select-option>
                  </lay-select>
                </lay-form-item>
              </lay-col>
              <lay-col :md="5">
                <lay-form-item label="处理状态：" label-width="80">
                  <lay-select v-model="searchQuery.status" placeholder="请选择状态" :allow-clear="true">
                    <lay-select-option value="待处理" label="待处理"></lay-select-option>
                    <lay-select-option value="处理中" label="处理中"></lay-select-option>
                    <lay-select-option value="已处理" label="已处理"></lay-select-option>
                  </lay-select>
                </lay-form-item>
              </lay-col>
              <lay-col :md="4">
                <lay-form-item label-width="0">
                  <lay-button type="primary" @click="toSearch">查询</lay-button>
                  <lay-button @click="toReset" style="margin-left: 10px">重置</lay-button>
                </lay-form-item>
              </lay-col>
            </lay-row>
          </lay-form>
        </lay-card>
      </lay-col>

      <!-- 列表区域 -->
      <lay-col :md="24">
        <lay-card>
          <div style="padding: 10px">
            <span style="font-size: 18px;vertical-align: center;margin-right: 20px">投诉记录列表</span>
            <lay-button type="primary" @click="changeVisible11('新增', null)" size="sm">新增投诉</lay-button>
          </div>
          <lay-table :height="600" size="lg" :columns="columns" :data-source="dataSource" :page="page" @change="change">
            <template #status="{ row }">
              <span v-if="row.status === '待处理'" style="color: #1E9FFF">待处理</span>
              <span v-if="row.status === '处理中'" style="color: #FFB800">处理中</span>
              <span v-if="row.status === '已处理'" style="color: #009688">已处理</span>
            </template>
            <template v-slot:operator="{ row }">
              <lay-space size="lg">
                <span style="color: #00A394;cursor: pointer" @click="changeVisible11('编辑', row)">编辑</span>
                <lay-popconfirm content="确定要删除此投诉记录吗?" @confirm="confirm" @cancel="cancel">
                  <span style="color: #00A394;cursor: pointer">删除</span>
                </lay-popconfirm>
              </lay-space>
            </template>
          </lay-table>
        </lay-card>
      </lay-col>
    </lay-row>

  </lay-container>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { layer } from '@layui/layui-vue'
const searchQuery = ref({
  patientName: '',
  complaintType: '',
  status: '',
  department: ''
})
function toReset() {
  searchQuery.value = {
    patientName: '',
    complaintType: '',
    status: '',
    department: ''
  }
}

function toSearch() {
  page.current = 1
  change(page)
}

const loading = ref(false)
const page = reactive({ current: 1, limit: 10, total: 100 })
const columns = ref([
  { title: '编号', width: '90px', key: 'id' },
  { title: '患者姓名', width: '120px', key: 'patientName', align: 'center' },
  { title: '投诉类型', width: '120px', key: 'complaintType', align: 'center' },
  { title: '投诉内容', width: '300px', key: 'content', align: 'center' },
  { title: '科室', width: '120px', key: 'department', align: 'center' },
  { title: '相关医生', width: '120px', key: 'doctorName', align: 'center' },
  { title: '投诉时间', width: '160px', key: 'complaintTime', align: 'center' },
  { title: '处理状态', width: '120px', key: 'status', align: 'center', customSlot: 'status' },
  { title: '处理结果', width: '300px', key: 'result', align: 'center' },
  {
    title: '操作',
    width: '150px',
    customSlot: 'operator',
    key: 'operator',
    fixed: 'right',
    align: 'center'
  }
])
const change = (page: any) => {
  loading.value = true
  setTimeout(() => {
    dataSource.value = loadDataSource(page.current, page.limit)
    loading.value = false
  }, 1000)
}
const dataSource = ref([
  {
    id: '1',
    patientName: '张三',
    complaintType: '服务态度',
    content: '医生服务态度不好，说话很不耐烦',
    department: '内科',
    doctorName: '李医生',
    complaintTime: '2024-03-20 09:34:56',
    status: '待处理',
    result: ''
  },
  {
    id: '2',
    patientName: '李四',
    complaintType: '医疗质量',
    content: '开的药物对症状没有改善',
    department: '外科',
    doctorName: '王医生',
    complaintTime: '2024-03-19 15:24:31',
    status: '已处理',
    result: '已与患者沟通,重新进行诊断并调整用药方案'
  }
])
const loadDataSource = (page: number, pageSize: number) => {
  var response = []
  var startIndex = (page - 1) * pageSize + 1
  var endIndex = page * pageSize
  for (var i = startIndex; i <= endIndex; i++) {
    response.push({
      id: `${i}`,
      patientName: `患者${i}`,
      complaintType: '服务态度',
      content: '医生服务态度不好，说话很不耐烦',
      department: '内科',
      doctorName: '李医生',
      complaintTime: '2024-03-20 09:34:56',
      status: '待处理',
      result: ''
    })
  }
  return response
}
</script>

<style>
.layui-table-header .layui-table-cell {
  background-color: #ECF8FA !important;
}

.search-input {
  display: inline-block;
  width: 98%;
  margin-right: 10px;
}
</style>