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

<template>
  <!-- 通用列表页详情 -->
  <div v-show="show" >
    <div class="content mb-2">
      <!-- 搜素栏 -->
      <div class="row mt-3 align-items-center">
        <!-- 左栏 -->
        <div class="col-sm-12 col-md-6 col-lg-6">
          <!-- 分类 -->
          <TagBar 
            :tags="tagsData || []"
            :margin="[30, 70]" 
            v-model:selectedTag="selectedTag"
          />
          <!-- 标题 -->
          <div v-if="showNav" class="nav-back-title">
            <img src="@/assets/images/BackArrow.png" alt="返回" @click="router.back()" />
            <h2>{{ title }}</h2>
          </div>
          <!-- 标题 -->
          <div v-if="showTotal" class="nav-back-title">
            共有 {{ newsLoader.total }} 个{{ title }}
          </div>
        </div>
        <!-- 右栏 -->
        <div class="col-sm-12 col-md-6 col-lg-6 d-flex flex-row justify-content-end align-items-start" style="gap:5px">
          <Dropdown
            v-for="(drop, k) in dropDownNames" :key="k" 
            :selectedValue="dropDownValues[k]"
            :options="drop.options" 
            labelKey="name"
            valueKey="id"
            style="max-width: 150px"
            @update:selectedValue="(v) => handleChangeDropDownValue(k, v)"
          />
          <SimpleInput v-if="showSearch" v-model="searchText" placeholder="请输入关键词" @enter="handleSearch">
            <template #suffix>
              <IconSearch
                class="search-icon"
                src="@/assets/images/news/IconSearch.png"
                alt="搜索" 
                @click="newsLoader.loadData(undefined, true)"
              />
            </template>
          </SimpleInput>
          <button class="tab-button" v-if="showTableSwitch" @click="tableListShow=!tableListShow">
            ▼ 清单
          </button>
        </div>
      </div>
    </div>
    <div 
      :class="[
        'content', 
        'news-list',
        rowCount === 1 ? '' : 'grid',
      ]"
    >
      <!-- 新闻列表 -->
      <SimplePageContentLoader :loader="newsLoader">
        <div v-if="tableListShow" class="table-list">
          <table>
            <thead>
              <tr>
                <th>序号</th>
                <th>{{ tableSwitchOptions.title ?? '标题'}}</th>
                <th v-for="(t, k) in newsLoader.list.value[0]?.addItems || []" :key="k">{{ t.name }}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, k) in newsLoader.list.value" :key="item.id">
                <td>{{ (newsLoader.page.value - 1) * 100 + k + 1 }}</td>
                <td>{{ item.title }}</td>
                <td v-for="(t, k) in item.addItems || []" :key="k">{{ t.text }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div v-else class="list">
          <div 
            v-for="(item, k) in newsLoader.list.value"
            :key="item.id"
            :class="'item user-select-none main-clickable row-type'+rowType"
            :style="{ width: rowWidth }"
            @click="handleShowDetail(item)"
          >
            <a class="d-none" :href="router.resolve({ path: props.detailsPage, query: { id: item.id }}).href" />
            <img
              :src="item.image || defaultImage" alt="新闻图片" 
            />
            <TitleDescBlock
              :title="item.title"
              :desc="item.desc"
            >
              <template #addon>
                <div v-if="item.bottomTags" class="tags">
                  <div
                    v-for="(tag, k) in item.bottomTags"
                    :key="k"
                    :class="tag ? '' : 'd-none'"
                  >{{ tag }}</div>
                </div>
                <div v-if="item.addItems" class="extra">
                  <div 
                    v-for="(addItem, k) in item.addItems" 
                    :key="k" 
                    class="d-flex flex-row align-items-center"
                    :class="[
                      addItem.text ? '' : 'd-none',
                    ]"
                  >
                    <span class="desc">{{ addItem.name }}:</span>
                    <span>{{ addItem.text }}</span>
                  </div>
                </div>
              </template>
            </TitleDescBlock>
          </div>
          <div 
            v-for="count of placeholderItemCount"
            :key="count"
            class="item empty"
            :style="{ width: rowWidth }"
          />
        </div>
      </SimplePageContentLoader>
    </div>
    <!-- 分页 -->
    <Pagination
      v-model:currentPage="newsLoader.page.value"
      :totalPages="newsLoader.totalPages.value"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch, type PropType } from 'vue';
import { useSSrSimplePagerDataLoader } from '@/composeable/SimplePagerDataLoader';
import DateUtils from '@/common/utils/DateUtils';
import TagBar from '../content/TagBar.vue';
import Dropdown from '../controls/Dropdown.vue';
import SimpleInput from '../controls/SimpleInput.vue';
import SimplePageContentLoader from '@/components/content/SimplePageContentLoader.vue';
import Pagination from '../controls/Pagination.vue';
import TitleDescBlock from '../parts/TitleDescBlock.vue';
import IconSearch from '../icons/IconSearch.vue';

export interface DropdownCommonItem {
  id: number; 
  name: string;
}
export interface DropDownNames {
  options: (string|DropdownCommonItem)[],
  label?: string,
  defaultSelectedValue: number|string,
}

const tableListShow = ref(false);

const props = defineProps({	
  title: {
    type: String,
    default: '',
  },
  show: {
    type: Boolean,
    default: true,
  },
  showTableSwitch: {
    type: Boolean,
    default: false,
  },
  tableSwitchOptions: {
    type: Object,
    default: () => ({}), 
  },
  showNav: {
    type: Boolean,
    default: false,
  },
  showTotal: {
    type: Boolean,
    default: false, 
  },
  prevPage: {
    type: Object as PropType<{
      title: string,
      url?: string,
    }>,
    default: null,
  },
  dropDownNames: {
    type: Object as PropType<DropDownNames[]>,
    default: null,
  },
  showSearch: {
    type: Boolean,
    default: true,
  },
  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,
  },
  subName: {
    type: String,
    default: '',
  },
  /**
   * 点击详情跳转页面路径
   */
  detailsPage: {
    type: String,
    default: '/news/detail'
  },
  /**
   * 详情跳转页面参数
   */
  detailsParams: {
    type: Object as PropType<Record<string, any>>,
    default: () => ({})
  },
  defaultImage: {
    type: String,
    default: 'https://mncdn.wenlvti.net/app_static/minnan/EmptyImage.png'
  },
})

const router = useRouter();

const realRowCount = computed(() => {
  if (import.meta.client)
    if (window.innerWidth < 768) 
      return 1;
  return props.rowCount;
});
const rowWidth = computed(() => {
  switch (realRowCount.value) {
    case 2:
      return `calc(50% - 25px)`;
    case 3:
      return `calc(33% - 25px)`;
    case 4:
      return `calc(25% - 25px)`;
  }
});
const placeholderItemCount = computed(() => {
  switch (realRowCount.value) {
    case 2:
    case 3:
    case 4:
      return newsLoader.list.value.length % realRowCount.value;
  }
  return 0;
});
const searchText = ref('');
const dropDownValues = ref<any>([]);

function handleSearch() {
  newsLoader.loadData(undefined, true);
}
function handleChangeDropDownValue(index: number, value: number) {
  dropDownValues.value[index] = value;
  newsLoader.loadData(undefined, true);
}
function handleShowDetail(item: any) {
  if (props.showDetail)
    return props.showDetail(item);
  router.push({ 
    path: props.detailsPage,
    query: {
      id: item.id,
    }
  });
}


//子分类
const selectedTag = ref(props.defaultSelectTag);
const pageSize = ref(props.pageSize);
const route = useRoute();

const newsLoader = await useSSrSimplePagerDataLoader(route.fullPath + '/list' + props.subName, Number(route.query.page || 1), pageSize, (page, size) => props.load(
  page, size, 
  selectedTag.value, 
  searchText.value,
  dropDownValues.value,
));

watch(() => props.defaultSelectTag, (v) => {
  selectedTag.value = v;
})
watch(() => props.dropDownNames, () => {
  loadDropValues();
})
watch(selectedTag, () => {
  newsLoader.loadData(undefined, true);
})
watch(tableListShow, (v) => {
  pageSize.value = v ? 100 : props.pageSize;
  newsLoader.loadData(undefined, true);
})

function loadDropValues() {
  dropDownValues.value = [];
  if (props.dropDownNames)
    for (const element of props.dropDownNames)
      dropDownValues.value.push(element.defaultSelectedValue);
  newsLoader.loadData(undefined, true);
}

onMounted(() => {
  setTimeout(() => {
    loadDropValues();
  }, 600);
})
watch(route, () => {
  loadDropValues();
})

defineExpose({
  reload() {
    newsLoader.loadData(undefined, true);
  }
})
</script>

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

.nav-back-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;

  h2 {
    font-size: 20px;
    font-family: SourceHanSerifCNBold;
    margin: 0;
  }
  img { 
    width: 25px;
    height: 25px;
    cursor: pointer;
    margin-right: 10px;
  }
}
.search-icon {
  width: 25px;
  height: 25px;
  cursor: pointer;
  color: colors.$primary-color;
}
</style>