gva
/
web-admin
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化文章页显示

This commit is contained in:
jacky 2024-05-18 14:26:32 +08:00
parent 300da484f8
commit dc1a5bce85
1 changed files with 57 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/view/content/article/index.vue
View File

@ -45,9 +45,50 @@
:disabled="!multipleSelection.length" @click="handleMultiDelete">删除</el-button>
</div>
<!-- 由于此处菜单跟左侧列表一一对应所以不需要分页 pageSize默认999 -->
<el-table ref="multipleTable" :data="tableData" row-key="ID" @selection-change="handleSelectionChange">
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" row-key="ID"
@selection-change="handleSelectionChange">
<el-table-column fixed type="selection" width="40" align="center" />
<el-table-column align="left" label="ID" min-width="60" prop="ID" />
<el-table-column fixed align="left" label="ID" min-width="60" prop="ID" />
<el-table-column type="expand">
<template #default="scope">
<div style="max-width: 1200px; width: 80%; margin-left: 120px">
<div class="gva-table-expand">
<el-text tag="b">摘要</el-text>
</div>
<div class="gva-table-expand">
<div>{{ scope.row.desc || '无' }}</div>
</div>
<div class="gva-table-expand">
<el-text tag="b">来源</el-text>
</div>
<div class="gva-table-expand">
<div>{{ scope.row.source || '无' }}</div>
</div>
<div class="gva-table-expand">
<el-text tag="b">跳转链接</el-text>
</div>
<div class="gva-table-expand">
<div>{{ scope.row.url || '无' }}</div>
</div>
<div class="gva-table-expand">
<el-text tag="b">内容</el-text>
</div>
<div class="gva-table-expand">
<rich-view v-model="scope.row.content" style="width: 100%; height: 300px;" />
</div>
</div>
</template>
</el-table-column>
<el-table-column align="left" label="主图" min-width="160" prop="mediaUrl">
<template #default="scope">
<el-image :src="scope.row.mainImg" class="gva-image" fit="contain" :preview-src-list="[scope.row.mainImg]"
preview-teleported hide-on-click-modal close-on-press-escape style="width: 120px; height: 100px">
<template #error>
<div class="image-slot">无</div>
</template>
</el-image>
</template>
</el-table-column>
<el-table-column align="left" label="标题/副标题" min-width="400" prop="title">
<template #default="scope">
<p>
@ -59,7 +100,6 @@
<p><el-text :line-clamp="2" size="small">{{ scope.row.subtitle }}</el-text></p>
</template>
</el-table-column>
<el-table-column align="left" label="摘要" min-width="400" prop="desc" class-name="gva-text-truncate" />
<el-table-column align="left" label="标签" min-width="150" prop="tags">
<template #default="scope">
<el-tag v-for="(item, index) in formatTags(scope.row.tags)" :key="index" size="small"
@ -70,6 +110,7 @@
</el-table-column>
<el-table-column align="left" label="时间" width="280">
<template #default="scope">
<p><b>创建时间：</b>{{ formatDate(scope.row.CreatedAt) }}</p>
<p><b>发布时间：</b>{{ formatDate(scope.row.publishDate) }}</p>
<p><b>最后更新：</b>{{ formatDate(scope.row.UpdatedAt) }}</p>
</template>
@ -148,6 +189,7 @@ import { formatDate, getArticlePreviewPath } from '@/utils/format'
import { getCategoryTree } from '@/api/category'
import { getChannelTree } from '@/api/channel'
import { formatTimeToStr } from '@/utils/date'
import RichView from '@/components/richtext/rich-view.vue'
import { equalArr } from '@/utils/arr'
import {
getArticleList,
@ -512,8 +554,19 @@ getTableData()
</script>
<style type="scss">
<style scoped type="scss">
.cell button {
line-height: 22px;
}
.image-slot {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: var(--el-fill-color-light);
color: var(--el-text-color-disabled);
font-size: 14px;
}
</style>