sl-sfy-safety/src/views/feedback/feedback.vue

<template>
  <div class="feedback-page">
    <div class="feedback-head">
      <el-radio-group
        v-model="problemStatus"
        class="radio-button"
        text-color="#1677FF"
        fill="#1890FF26"
        @change="handleClick"
      >
        <el-radio-button v-for="item in tabContent" :label="item.name" :value="item.value" />
      </el-radio-group>
      <div class="search-input">
        <el-input
          v-model="queryDescription"
          style="width: 294px"
          placeholder="请输入搜索内容"
          :prefix-icon="Search"
        />
        <el-button type="primary" style="margin-left: 16px" @click="searchFeedback"
          >搜索</el-button
        ></div
      ></div
    >
    <div class="problem-list"
      ><singleProblem
        v-for="(item,index) in feedbackList"
        :key="index"
        :problem-data="item"
        :is-handle="item.problemStatus === STATUS.unhandled"
        style="margin-top: 22px; margin-bottom: 2px"
    /></div>

    <el-pagination
      v-model:current-page="pageNumber"
      v-model:page-size="pageSize"
      background
      layout="prev, pager, next,sizes,jumper"
      :page-sizes="[5, 10, 20, 40]"
      :total="totalRow"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      class="flex justify-end"
    />
  </div>
</template>

<script setup lang="ts">
  import { Search } from '@element-plus/icons-vue';
  import { tabContent } from './constant';
  import singleProblem from './component/singleProblem.vue';
  import useFeedback from './use-feedback.ts';
  import { STATUS } from '@/api/feedback/feedback';

  const useFeedbackList = useFeedback();
  const { feedbackList, pageNumber, pageSize, problemStatus, queryDescription, totalRow, getList } =
    useFeedbackList;

  const handleClick = () => {
    queryDescription.value = '';
    getList();
  };

  const searchFeedback = () => {
    pageNumber.value = 1;
    getList();
  };

  const handleSizeChange = () => {
    pageNumber.value = 1;
    getList();
  };
  const handleCurrentChange = () => {
    getList();
  };
</script>

<style scoped>
  .feedback-page {
    position: relative;
    height: calc(100vh - 64px - 12px);
    background-color: #ffffff;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  :deep(.el-radio-button .el-radio-button__inner) {
    width: 188px;
    background-color: #00000005;
  }

  .feedback-head {
    display: flex;
    flex-direction: column;
  }

  .search-input {
    margin-top: 24px;
  }

  .problem-list {
    height: calc(100vh - 270px);
    overflow: auto;
    margin-bottom: 4px;
    padding: 0 2px;
  }

  :deep(.el-pagination .el-select) {
    width: 92px;
  }
</style>