mingnan-website/src/components/content/CommonListPage.vue

<template>
  <!-- 资讯详情页 -->
  <div class="main-background">
    <div class="nav-placeholder"></div>
    <!-- 新闻 -->
    <section class="main-section main-background main-background-type0 small-h">
      <div class="content mb-2">
        <!-- 路径 -->
        <a-breadcrumb>
          <a-breadcrumb-item><a href="javascript:;" @click="navTo('/')">首页</a></a-breadcrumb-item>
          <a-breadcrumb-item v-if="prevPage"><a href="javascript:;" @click="prevPage.url ? navTo(prevPage.url) : back()">{{ prevPage.title }}</a></a-breadcrumb-item>
          <a-breadcrumb-item>{{ title }}</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <CommonListBlock v-bind="props"></CommonListBlock>
    </section>
  </div>
</template>

<script setup lang="ts">
import { type PropType } from 'vue';
import { usePageAction } from '@/composeable/PageAction';
import CommonListBlock from './CommonListBlock.vue';
import type { DropdownCommonItem, DropDownNames } from './CommonListBlock.vue';

export type { DropdownCommonItem, DropDownNames }

const { navTo, back } = usePageAction();

const props = defineProps({	
  title: {
    type: String,
    default: '',
  },
  prevPage: {
    type: Object as PropType<{
      title: string,
      url?: string,
    }>,
    default: null,
  },
  dropDownNames: {
    type: Object as PropType<DropDownNames[]>,
    default: null,
  },
  showSearch: {
    type: Boolean,
    default: true,
  },
  showTableSwitch: {
    type: Boolean,
    default: false, 
  },
  tableSwitchOptions: {
    type: Object,
    default: () => ({}), 
  },
  tagsData: {
    type: Object as PropType<{
      id: number,
      name: string,
    }[]>,
    default: null,
  },
  pageSize: {
    type: Number,
    default: 8,
  },
  rowCount: {
    type: Number,
    default: 2,
  },
  rowType: {
    type: Number,
    default: 1,
  },
  defaultSelectTag: {
    type: Number,
    default: 1,
  },
  load: {
    type: Function as PropType<(
      page: number, 
      pageSize: number,
      selectedTag: number,
      searchText: string,
      dropDownValues: number[],
    ) => Promise<{
      page: number,
      total: number,
      data: any[],
    }>>,
    required: true,
  },
  showDetail: {
    type: Function as PropType<(item: any) => void>,
    default: null,
  },
  /**
   * 点击详情跳转页面路径
   */
  detailsPage: {
    type: String,
    default: '/news/detail'
  },
  /**
   * 详情跳转页面参数
   */
  detailsParams: {
    type: Object as PropType<Record<string, any>>,
    default: () => ({})
  },
  defaultImage: {
    type: String,
    default: ''
  },
})
</script>

<style lang="scss">
@use "@/assets/scss/colors";

.search-icon {
  width: 25px;
  height: 25px;
  cursor: pointer;
  color: colors.$primary-color;
}
</style>