leaf-document-web/src/views/documents/List.vue

<template>
  <div v-if="loading">
    <v-row justify="center">
      <v-col cols="12" md="4" xl="2" v-for="n in 3" :key="n">
        <v-skeleton-loader
          v-for="n in 2"
          :key="n"
          class="mx-auto border mt-3"
          max-width="300"
          type="image, article"
        ></v-skeleton-loader>
      </v-col>
    </v-row>
  </div>
  <div v-else>
    <v-row>
      <v-col cols="12" md="4" xl="2" v-for="document in documents.Data" :key="document.id">
        <v-card class="mt-3">
      <v-card-title>{{ document.Title }}</v-card-title>
      <v-card-subtitle>{{
        document.Chunked ? "分块的文档" : "还没有处理"
      }}</v-card-subtitle>
      <v-card-subtitle>
        {{ new Date(document.CreatedAt).toLocaleString() }}
      </v-card-subtitle>
      <v-card-text>{{ document.content }}</v-card-text>
      <v-card-actions>
        <v-btn text color="primary">详情</v-btn>
        <v-btn text color="secondary">编辑</v-btn>
      </v-card-actions>
    </v-card>
      </v-col>
    </v-row>
    
  </div>
  <div v-if="documents.Total == 0">
    <v-alert text="看样子你还没有创建任何文档。"></v-alert>
  </div>

  <div class="text-center">
    <v-container>
      <v-row justify="center">
        <v-col cols="8">
          <v-container class="max-width">
            <v-pagination
              v-model="page"
              class="my-4"
              :length="documents.Total"
              :disabled="loading"
              @update:model-value="load"
            ></v-pagination>
          </v-container>
        </v-col>
      </v-row>
    </v-container>
  </div>

  <v-btn class="mt-3" @click="goto_create_document">创建</v-btn>
</template>

<script setup>
import { document } from "@/plugins/api";
import router from "@/router";
import { ref } from "vue";

const libraryId = router.currentRoute.value.params.LibraryId;
const page = ref(1);
const documents = ref({});
const loading = ref(false);

function load() {
  loading.value = true;

  document
    .libraryLibraryIdDocumentsGet(page.value, libraryId)
    .then((r) => {
      documents.value = r.data;
    })
    .finally(() => {
      loading.value = false;
    });
}

load();
console.log(libraryId);

function goto_create_document() {
  router.push({
    name: "library.documents.create",
    params: {
      LibraryId: libraryId,
    },
  });
}
</script>