listquestions.vue 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <template>
  2. <div style="height: 100%;">
  3. <van-pull-refresh class="inspect-object-question-wrapper" v-model="loading" @refresh="getData()">
  4. <!-- 使用 v-for 指令遍历 list 数组 -->
  5. <card01 v-for="item in list" :key="item.id" :title="item.ojbNm + ''" icon="notes"
  6. :description="renderData(item, objectConfig.description)"
  7. @click="jumpPage(`/inspect/${item.plnaId}/object/${item.id}/question/`)" />
  8. </van-pull-refresh>
  9. </div>
  10. </template>
  11. <script setup>
  12. import { renderData } from "@/utils/template";
  13. import { jumpPage } from "@/utils/page";
  14. import { getTacQuestionList } from "@/api/questions";
  15. import { onMounted, ref } from "vue";
  16. // 使用 ref 定义响应式变量 list 和 loading
  17. const list = ref([]);
  18. const loading = ref(false);
  19. // 定义 objectConfig 变量
  20. const objectConfig = ref({
  21. description: '这里是默认描述信息' // 你可以根据实际情况修改默认描述内容
  22. });
  23. // 定义 getData 函数,用于获取数据
  24. function getData() {
  25. // 设置 loading 为 true,表示正在加载数据
  26. loading.value = true;
  27. // 调用 getTacQuestionList 接口获取数据
  28. getTacQuestionList().then(res => {
  29. // 将接口返回的数据赋值给 list
  30. list.value = res.data;
  31. // 设置 loading 为 false,表示数据加载完成
  32. loading.value = false;
  33. })
  34. }
  35. // 在组件挂载后调用 getData 函数获取数据
  36. onMounted(() => {
  37. getData();
  38. })
  39. </script>
  40. <style lang="scss" scoped>
  41. .inspect-object-wrapper {
  42. width: 100%;
  43. height: 100%;
  44. overflow: auto;
  45. }
  46. </style>