lsq-book/packages/pc/src/views/Stack/index.vue

<template>
  <page-pane class="stack-page">
    <div class="stack">
      <div class="stack-left">
        <sidebar @select="handleSelect" />
      </div>

      <div class="stack-main">
        <div style="padding-right: 68px; width: 100%; box-sizing: border-box">
          <el-breadcrumb
            class="stack-breadcrumb"
            :separator-icon="ArrowRight"
            style="width: 100%"
          >
            <el-breadcrumb-item v-for="item in breadcrumb" :key="item.id">{{
              item.name
            }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <el-scrollbar
          v-loading="loading"
          style="flex: 1; width: 100%; height: 0"
        >
          <ul class="stack-list">
            <li v-for="item in list" :key="item.id">
              <book-card type="row" size="large" :item="item" />
            </li>
          </ul>

          <el-empty v-if="noData" description="暂无数据" />
        </el-scrollbar>

        <el-pagination
          class="stack-page-pagination"
          hide-on-single-page
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="DEFAULT_PAGE_SIZE"
          @change="handlePage"
        />
      </div>
    </div>
  </page-pane>
</template>

<script setup>
import { ref } from "vue";
import { useRouteQuery } from "@vueuse/router";
import { ArrowRight } from "@element-plus/icons-vue";
import { DEFAULT_PAGE_SIZE, usePagination } from "@lsq/base";
import { getBookListApi, getStorageSonListApi } from "@/api";
import Sidebar from "./components/Sidebar/index.vue";
import BookCard from "@/components/BookCard/index.vue";

const breadcrumb = ref([]);
const activeTab = useRouteQuery("active", "book");
const searchKey = useRouteQuery("keyword");

const { pageNum, total, loading, list, noData, getList } = usePagination(
  async (params) => {
    const id = breadcrumb.value[breadcrumb.value.length - 1].id;

    // 查找书籍分类指定分类
    if (activeTab.value === "book" && id > -1) {
      const data = await getStorageSonListApi(id);

      // 模拟分页
      return {
        pages: 1,
        total: data.length,
        records: data.slice(
          (params.pageNum - 1) * params.pageSize,
          params.pageNum * params.pageSize
        ),
      };
    }

    const p = {
      ...params,
      searchKey: searchKey.value,
    };
    if (breadcrumb.value.length) {
      if (activeTab.value === "collection" && id > -1) {
        p.exhibitTypeId = id;
      } else if (id > -1) {
        p.storageId = id;
      }
    }
    return getBookListApi(p);
  }
);

const handlePage = (page) => {
  pageNum.value = page;
  getList();
};

const resetSearch = () => {
  pageNum.value = 1;
  getList();
};

const handleSelect = (type, data) => {
  if (type === "classify") {
    // 切换分类
    breadcrumb.value = data;
  }
  resetSearch();
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>