feat：专辑详情

src/components/Table/types.ts

 export type iTableColumn = {
   prop: string;
   label: string;
-  minWidth: string;
+  minWidth?: string;
   width?: string;
   slotName?: string;
   headerSlotName?: string;

src/router.ts

@@ -69,6 +69,12 @@ const routes = [
         component: () => import("@/views/Collection/AlbumDetail/index.vue"),
       },
       {
+        path: "/issuedAlbumDetail",
+        name: "issuedAlbumDetail",
+        component: () =>
+          import("@/views/Collection/IssuedAlbumDetail/index.vue"),
+      },
+      {
         path: "/transferRecords",
         name: "transferRecords",
         component: () => import("@/views/Collection/TransferRecords/index.vue"),

src/views/Collection/CollectionManagement/components/AlbumTable/index.vue

@@ -2,10 +2,23 @@
   <div class="h-full albumTable">
     <Table :columns="columns" :data="tableData" ref="tableRef" height="100%">
       <template #name="props">
-        {{ props.name }}
-        <syButton mode="littleBtn" class="ml-3">
-          {{ props.amount }}
-        </syButton>
+        <div
+          class="cursor-pointer"
+          @click="
+            $router.push({
+              name: 'issuedAlbumDetail',
+              query: {
+                batch_num: props.batch_num,
+                name: props.name,
+              },
+            })
+          "
+        >
+          {{ props.name }}
+          <syButton mode="littleBtn" class="ml-3">
+            {{ props.amount }}
+          </syButton>
+        </div>
       </template>
       <template #time="props">
         {{ formatTime(props.create_time) }}

src/views/Collection/IssuedAlbumDetail/components/IssuedAlbumTable/constants.ts

+import { iTableColumn } from "@/components/Table/types";
+
+export const columns = [
+  {
+    label: "缩略图",
+    prop: "img",
+    slotName: "img",
+  },
+  {
+    label: "文件名",
+    prop: "name",
+    minWidth: 600,
+    slotName: "name",
+  },
+  {
+    label: "备注",
+    width: 180,
+    slotName: "note",
+  },
+  {
+    label: "藏品编号",
+    prop: "identifier",
+    width: 300,
+  },
+] as iTableColumn[];

src/views/Collection/IssuedAlbumDetail/components/IssuedAlbumTable/index.vue

+<template>
+  <div class="h-full issuedAlbumTable">
+    <Table :columns="columns" :data="tableData" ref="tableRef" height="100%">
+      <template #img="props">
+        <img
+          style="width: 30px; height: 30px; border-radius: 8px"
+          class="object-cover"
+          :src="JSON.parse(props.file_info).file_url"
+          alt=""
+        />
+      </template>
+      <template #note="props">
+        <div class="overflow-hidden overflow-ellipsis whitespace-nowrap">
+          {{ JSON.parse(props.file_info).file_note }}
+        </div>
+      </template>
+      <template #name="props">
+        <div
+          class="overflow-hidden overflow-ellipsis whitespace-nowrap"
+          :class="{
+            'cursor-pointer': props.status === 2,
+          }"
+          @click="props.status === 2 && toProve(props)"
+        >
+          {{ props.name }}
+        </div>
+      </template>
+    </Table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import Table from "@/components/Table/index.vue";
+import TransferCollection from "@/views/Collection/PassList/TransferCollection.vue";
+import { ElMessage } from "element-plus";
+import { formatTime, GO_URLS, syButton, syCommonDialog } from "cqk-sy-ui";
+
+import { debounce } from "lodash";
+import { columns } from "./constants";
+import { globalState } from "@/store/state";
+import { useTableScrollListener } from "@/components/Table/hooks";
+import { $ajax } from "@/service";
+
+const props = defineProps<{
+  tableData: any[];
+  loading: boolean;
+}>();
+
+const curItem = ref<any>();
+const passShow = ref<boolean>();
+const tableRef = ref<InstanceType<typeof Table>>();
+
+const reIssue = debounce(async (content: any) => {
+  const res = await $ajax({
+    type: "post",
+    url: GO_URLS.reissue,
+    params: {
+      ids: [content.id],
+    },
+  });
+  if (!res) return;
+  ElMessage.success("重新发行成功");
+}, 500);
+
+useTableScrollListener(tableRef, (scrollTop) => {
+  console.log("scrollToEnd");
+  emit("scrollToEnd");
+});
+
+const emit = defineEmits(["transferExecuted", "scrollToEnd"]);
+
+const transfer = (item: any) => {
+  curItem.value = item;
+  passShow.value = true;
+};
+
+const toProve = (item: any) => {
+  window.open(
+    `${globalState.urlList.chain_browser_url}/trace_token?goods_id=${item.id}&evm_tx_hash=${item.tx_hash}&from=client`
+  );
+};
+
+const scrollTo = (...options: Parameters<typeof window.scrollTo>) => {
+  tableRef.value?.scrollTo(...options);
+};
+
+defineExpose({
+  tableRef,
+  scrollTo,
+});
+</script>
+
+<style lang="scss">
+.issuedAlbumTable {
+  .el-table__cell {
+    height: 50px;
+  }
+}
+</style>

src/views/Collection/IssuedAlbumDetail/index.vue

+<template>
+  <LayoutVue>
+    <div class="flex flex-col w-full h-full">
+      <div class="flex items-center">
+        <Search placeholder="搜索" v-model="searchStr"></Search>
+        <Avatar class="ml-7"></Avatar>
+      </div>
+      <div
+        class="flex items-center justify-between overflow-hidden flex-shrink-0"
+        style="margin-top: 26px"
+      >
+        <Title
+          :title="[
+            {
+              name: '藏品管理',
+              routerName: 'collectionManagement',
+            },
+            {
+              name: '划转记录',
+              routerName: 'transferRecords',
+            },
+            {
+              name: $route.query.name as string,
+            },
+          ]"
+        ></Title>
+      </div>
+      <div class="flex-grow overflow-hidden relative" style="margin-top: 50px">
+        <Empty
+          v-show="!loading && tableData.length === 0"
+          class="absolute top-1/3 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+        >
+          {{
+            debouncedSearchStr === ""
+              ? "没有找到匹配结果，尝试其他关键词搜索"
+              : "暂无数据"
+          }}
+        </Empty>
+        <IssuedAlbumTable
+          v-show="tableData.length !== 0"
+          ref="issuedAlbumTableRef"
+          :loading="loading"
+          :tableData="tableData"
+          @scroll-to-end="fetchNextPage"
+        ></IssuedAlbumTable>
+      </div>
+    </div>
+  </LayoutVue>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+
+import LayoutVue from "@/components/Layout.vue";
+import Search from "@/components/Search/index.vue";
+import Avatar from "@/components/Avatar/index.vue";
+import Title from "@/components/Title.vue";
+import Empty from "@/components/Empty/index.vue";
+import IssuedAlbumTable from "@/views/Collection/IssuedAlbumDetail/components/IssuedAlbumTable/index.vue";
+
+import { watchDebounced } from "@vueuse/core";
+import { useTableData } from "@/components/Table/hooks";
+import { watchStrChangeDebounceTime } from "@/config/time";
+import { $ajax } from "@/service";
+import { URLS } from "@/service/URL";
+import { useRoute } from "vue-router";
+import { ElMessage } from "element-plus";
+import { GO_URLS } from "cqk-sy-ui";
+
+const searchStr = ref("");
+const debouncedSearchStr = ref("");
+const issuedAlbumTableRef = ref<InstanceType<typeof IssuedAlbumTable> | null>(
+  null
+);
+const route = useRoute();
+
+const fetchTableData = async ({
+  page,
+  page_size,
+}: {
+  page: number;
+  page_size: number;
+}) => {
+  /* 请求所需要的参数 */
+  page;
+  page_size;
+  // 当前状态
+  const res = await $ajax({
+    url: GO_URLS.passList,
+    type: "get",
+    params: {
+      batch_num: route.query.batch_num as string,
+      page,
+      page_size,
+      name: searchStr.value,
+    },
+  });
+  return {
+    total: res!.data.total,
+    data: res!.data.results || [],
+  };
+};
+
+const {
+  fetchNextPage: fetchNextPage,
+  tableData: tableData,
+  loading: loading,
+  refetch: refetch,
+} = useTableData({
+  fetchData: fetchTableData,
+});
+
+function handleRefetch() {
+  issuedAlbumTableRef.value?.tableRef?.scrollTo(0, 0);
+  return refetch();
+}
+
+watchDebounced(
+  () => searchStr.value,
+  () => {
+    handleRefetch().then(() => {
+      debouncedSearchStr.value = searchStr.value;
+    });
+  },
+  {
+    debounce: watchStrChangeDebounceTime,
+  }
+);
+</script>
+<style lang="scss" scoped></style>

src/views/Collection/TransferRecords/components/TransferRecordsTable/index.vue

@@ -2,13 +2,7 @@
   <div class="h-full transferTable">
     <Table :columns="columns" :data="data" ref="tableRef" height="100%">
       <template #name="props">
-        <div
-          class="flex items-center"
-          @click="toProve(props)"
-          :class="{
-            'cursor-pointer': props.pass_id && props.pass_hash,
-          }"
-        >
+        <div class="flex items-center cursor-pointer" @click="toProve(props)">
           <div class="overflow-hidden text-ellipsis whitespace-nowrap">
             {{ props.pass_name }}
           </div>
@@ -98,6 +92,7 @@ import { columns } from "./config";
 import { URLS } from "@/service/URL";
 import { eCollectionType } from "@/views/Collection/PassMaker/types";
 import { reTransfer } from "@/service/Transfer";
+import { router } from "@/router";
 
 const props = defineProps<{
   data: any[];
@@ -128,6 +123,15 @@ const toProve = (item: any) => {
     window.open(
       `${globalState.urlList.chain_browser_url}/trace_token?goods_id=${item.pass_id}&evm_tx_hash=${item.pass_hash}&from=client`
     );
+  else if (item.batch_num) {
+    router.push({
+      name: "issuedAlbumDetail",
+      query: {
+        batch_num: item.batch_num,
+        name: item.pass_name,
+      },
+    });
+  }
 };
 
 const handleClickCopy = (str: string) => {