|
@@ -1,134 +1,136 @@
|
|
|
<template>
|
|
|
<!-- 通用列表页详情 -->
|
|
|
- <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 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 v-if="showTotal" class="nav-back-title">
|
|
|
- 共有 {{ newsLoader.total }} 个{{ title }}
|
|
|
+ <!-- 右栏 -->
|
|
|
+ <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 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"
|
|
|
+ <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)"
|
|
|
>
|
|
|
- <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>
|
|
|
+ <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>
|
|
|
- </template>
|
|
|
- </TitleDescBlock>
|
|
|
+ <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>
|
|
|
- <div
|
|
|
- v-for="count of placeholderItemCount"
|
|
|
- :key="count"
|
|
|
- class="item empty"
|
|
|
- :style="{ width: rowWidth }"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </SimplePageContentLoader>
|
|
|
+ </SimplePageContentLoader>
|
|
|
+ </div>
|
|
|
+ <!-- 分页 -->
|
|
|
+ <Pagination
|
|
|
+ v-model:currentPage="newsLoader.page.value"
|
|
|
+ :totalPages="newsLoader.totalPages.value"
|
|
|
+ />
|
|
|
</div>
|
|
|
- <!-- 分页 -->
|
|
|
- <Pagination
|
|
|
- v-model:currentPage="newsLoader.page.value"
|
|
|
- :totalPages="newsLoader.totalPages.value"
|
|
|
- />
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
@@ -160,6 +162,10 @@ const props = defineProps({
|
|
|
type: String,
|
|
|
default: '',
|
|
|
},
|
|
|
+ show: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
showTableSwitch: {
|
|
|
type: Boolean,
|
|
|
default: false,
|
|
@@ -232,6 +238,10 @@ const props = defineProps({
|
|
|
type: Function as PropType<(item: any) => void>,
|
|
|
default: null,
|
|
|
},
|
|
|
+ subName: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
/**
|
|
|
* 点击详情跳转页面路径
|
|
|
*/
|
|
@@ -306,7 +316,7 @@ const selectedTag = ref(props.defaultSelectTag);
|
|
|
const pageSize = ref(props.pageSize);
|
|
|
const route = useRoute();
|
|
|
|
|
|
-const newsLoader = await useSSrSimplePagerDataLoader(route.fullPath + '/list', Number(route.query.page || 1), pageSize, (page, size) => props.load(
|
|
|
+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,
|