优化文章页显示

src/view/content/article/index.vue

@@ -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>