virtual-patient-web/src/views/consultation/Evaluate/InspectHistory.vue

<script setup lang="ts">
import { reactive, ref } from "vue";
import { queryHistoryList } from "@/api/inquiry";
import { onMounted } from "vue";
import CheckIcon from "@/assets/svg/consultation/check.svg?component";
import { useRoute } from "vue-router";
defineOptions({
  name: "InspectHistory"
});
const recordList = ref([]);
const route = useRoute();
const activedIndex = ref<any>("");
const selectInfo = reactive({
  question: "",
  answer: ""
});
const getHistory = async () => {
  const res: any = await queryHistoryList({
    processId: route.query.processId,
    pageSize: pagination.pageSize,
    pageNum: pagination.currentPage
  });
  pagination.total = res.data.total;
  recordList.value = res.data.records;
};
const selectItem = (item: any, index) => {
  selectInfo.question = item.question;
  selectInfo.answer = item.answer;
  activedIndex.value = index;
};
const pagination = reactive<any>({
  total: 0,
  pageSize: 15,
  currentPage: 1
});
const handleUserChange = val => {
  pagination.currentPage = val;
  getHistory();
};
onMounted(() => {
  getHistory();
});
</script>

<template>
  <div class="InspectHistory">
    <div class="record_list">
      <div
        class="record_list_item"
        :class="[activedIndex === index ? 'actived' : '']"
        v-for="(item, index) in recordList"
        :key="index"
        @click="selectItem(item, index)"
      >
        <div
          :class="[item.answerType === 'patient' ? 'check' : '']"
          class="title"
        >
          <span class="type">{{ item.commonDic?.nameZh || "系统状态" }}</span>
          <span class="name">{{ item.question }}</span>
          <CheckIcon v-show="item.answerType === 'patient'" class="icon" />
        </div>
        <div class="answer">{{ item.answer }}</div>
        <div class="time">{{ item.createTime }}</div>
      </div>
      <div v-if="recordList.length === 0">暂无数据</div>
    </div>
    <div class="page_footer">
      <el-pagination
        @current-change="handleUserChange"
        :hide-on-single-page="true"
        background
        :default-page-size="15"
        layout="prev, pager, next"
        :total="pagination.total"
        class="mt-4"
      />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.InspectHistory {
  display: flex;
  flex: 1;
  flex-direction: column;
  background: #fff;

  .record_list {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 330px);
    padding: 8px;
    overflow-y: auto;

    .record_list_item {
      position: relative;
      padding-left: 24px;
      margin: 8px 0;
      // height: 115px;
      border-bottom: 1px solid rgb(91 139 255 / 30%);

      .title {
        position: relative;
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        font-size: 14px;

        .type {
          padding: 2px 8px;
          margin-right: 8px;
          color: #fff;
          background: #4287ff;
          border-radius: 6px;
        }

        .name {
          font-size: 14px;
          font-weight: bold;
          color: #2b3f54;
        }

        .icon {
          position: absolute;
          left: -24px;
        }
      }

      .check {
        .type {
          padding: 2px 8px;
          margin-right: 8px;
          color: #fff;
          background: #00975e;
          border-radius: 6px;
        }

        .name {
          font-size: 14px;
          font-weight: bold;
          color: #00975e;
        }
      }

      .answer {
        margin-bottom: 16px;
        font-size: 14px;
        font-weight: 400;
        color: #2b3f54;
      }

      .time {
        margin-bottom: 16px;
        font-size: 10px;
        font-weight: 400;
        color: #2b3f54;
      }
    }

    .record_list_item:hover {
      color: #1890ff;
    }

    .actived {
      color: #1890ff;
    }
  }

  .page_footer {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>