一、实现效果

实现图片的显示，大图预览；审核部分的待审核的审核功能
在这里插入图片描述

二、图片预览实现

1、参考官网

官网-图片预览

图片预览

2、图片预览插槽设置

{row,index} 插槽中获取row行信息、index索引信息(指定行图片预览需要用到)
style 设置基本样式宽width高height
src 设置图片的路径，这里就是行字段{row.coverimage}
zoom-rate 图像查看器缩放事件的缩放速率
max-scale 图像查看器缩放事件的最大缩放比例
min-scale 图像查看器缩放事件的最小缩放比例
preview-src-list 开启图片预览功能
show-progress 是否在预览图片时显示进度条
initial-index 初始预览图像索引(这就需要用到开始的index索引，使用变量)
preview-teleported image-viewer 是否插入至 body 元素上(这里设置层级)
hide-on-click-modal 遮罩层点击可是否关闭预览
fit 确定图片如何适应容器框
@show 当图片显示时执行的事件(根据指定索引显示图片)

3、设置图片预览的列表

(1)说明

这里加载完整的表格数据的全部图片，所以需要用到Table组件传递的数据(之前定义过，直接使用)
Table组件中传递给父组件的方法

(2)内容页面方法、变量定义

在Table中写入方法
在这里插入图片描述
写入预览的图片的数组变量srcList

(3)方法实现

声明预览图片的数组变量srcList
执行方法，取得父页面传递的数据data
- 通过循环map获取每一项的coverimage组成新数组
- 将新数组赋值给预览图片数组

4、预览图片索引设置

(1)方法和变量

设置预览图片的索引变量initialindex
设置图片显示执行的方法showImg(index)

(2)方法实现

声明图片的索引initialindex，默认为0
执行方法，接收视图层传递的索引，将图片的索引值设置为显示的图片的索引值

三、行审核操作

如果行内是审核状态为“待审核”那么就添加审核按钮：同意拒绝

1、添加按钮

在审核插槽中加入同意拒绝按钮
写入方法UpdateAuditStatus(行信息,审核状态)

2、写入api请求

在内容管理的api中写入签核的接口
在这里插入图片描述

3、写入签核方法

(1)同意签核

使用ElMessageBox.confirm进行一个确认提交
- 如果确定就执行请求
  - 发送请求
  - 传递行id,获取的状态status
  - 审核成功：更改当前行状态，并提示信息；审核失败：提示信息
- 如果取消就不执行请求

(2)拒绝签核

使用ElMessageBox.prompt进行一个确认提交
- 会出现一个可伸展的文本域输入拒绝原因，且必填
- 如果数据完整，进行提交就执行请求
  - 发送请求
  - 传递行id，获取的状态status，拒绝理由reason
  - 审核成功：更改当前行状态，并提示信息；审核失败：提示信息
- 如果取消就不执行请求

四、完整代码

1、内容管理

src/views/ContentView.vue

<template><Table :columns="columns" :apiUrl='apiUrl' :showPage="true" :showSearch="true" @update:tableData="updateTableData"><template #tag="{ row }"><el-tag v-for="item, index in row.tag" :key="index">{{ item }}</el-tag></template><template #audit="{ row }"><el-tag :type="row.audit == 1 ? 'success' : row.audit == 2 ? 'danger' : 'primary'">{{ auditObj[row.audit] }}</el-tag><!-- 如果是待签核，可以执行签核 -->