增加广告管理

修复部分页面错误

src/api/adContent.js

@@ -0,0 +1,75 @@
+import service from '@/utils/request'
+
+// @Summary 获取列表
+// @Produce  application/json
+// @Router /cms/adContent/getList [post]
+export const getAdContentList = (data) => {
+  return service({
+    url: '/cms/adContent/getList',
+    method: 'post',
+    data
+  })
+}
+
+// @Summary 新增
+// @Produce  application/json
+// @Param menu Object
+// @Router /cms/adContent/add [post]
+export const addAdContent = (data) => {
+  return service({
+    url: '/cms/adContent/add',
+    method: 'post',
+    data
+  })
+}
+
+// @Summary 删除
+// @Produce  application/json
+// @Param ID int
+// @Router /cms/adContent/delete [delete]
+export const deleteAdContent = (data) => {
+  return service({
+    url: '/cms/adContent/delete',
+    method: 'delete',
+    data
+  })
+}
+
+// @Summary 批量删除
+// @Param data body request.IdsReq true "批量删除"
+// @Success 200 {string} string "{"success":true,"data":{},"msg":"删除成功"}"
+// @Router /cms/adContent/deleteByIds [delete]
+export const deleteAdContentByIds = (params) => {
+  return service({
+    url: '/cms/adContent/deleteByIds',
+    method: 'delete',
+    params
+  })
+}
+
+// @Summary 修改
+// @Produce  application/json
+// @Param menu Object
+// @Router /cms/adContent/update [put]
+export const updateAdContent = (data) => {
+  return service({
+    url: '/cms/adContent/update',
+    method: 'put',
+    data
+  })
+}
+
+// @Summary 根据id获取
+// @Security ApiKeyAuth
+// @accept application/json
+// @Produce application/json
+// @Param data body api.GetById true "根据id获取"
+// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
+// @Router /cms/adContent/get [get]
+export const getAdContentById = (params) => {
+  return service({
+    url: '/cms/adContent/get',
+    method: 'get',
+    params
+  })
+}

src/api/adPosition.js

@@ -0,0 +1,63 @@
+import service from '@/utils/request'
+
+// @Summary 获取列表
+// @Produce  application/json
+// @Router /cms/adPosition/getList [post]
+export const getAdPositionList = (data) => {
+  return service({
+    url: '/cms/adPosition/getList',
+    method: 'post',
+    data
+  })
+}
+
+// @Summary 新增
+// @Produce  application/json
+// @Param menu Object
+// @Router /cms/adPosition/add [post]
+export const addAdPosition = (data) => {
+  return service({
+    url: '/cms/adPosition/add',
+    method: 'post',
+    data
+  })
+}
+
+// @Summary 删除
+// @Produce  application/json
+// @Param ID int
+// @Router /cms/adPosition/delete [delete]
+export const deleteAdPosition = (data) => {
+  return service({
+    url: '/cms/adPosition/delete',
+    method: 'delete',
+    data
+  })
+}
+
+// @Summary 修改
+// @Produce  application/json
+// @Param menu Object
+// @Router /cms/adPosition/update [put]
+export const updateAdPosition = (data) => {
+  return service({
+    url: '/cms/adPosition/update',
+    method: 'put',
+    data
+  })
+}
+
+// @Summary 根据id获取
+// @Security ApiKeyAuth
+// @accept application/json
+// @Produce application/json
+// @Param data body api.GetById true "根据id获取"
+// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
+// @Router /cms/adPosition/get [get]
+export const getAdPositionById = (params) => {
+  return service({
+    url: '/cms/adPosition/get',
+    method: 'get',
+    params
+  })
+}

src/components/upload/image.vue

@@ -48,7 +48,7 @@ const beforeUpload = (file) => {
   const isJPG = file.type === 'image/jpeg'
   const isPng = file.type === 'image/png'
   if (!isJPG && !isPng) {
-    ElMessage.error('上传头像图片只能是 jpg或png 格式!')
+    ElMessage.error('上传图片只能是 jpg或png 格式!')
     return false
   }
 

src/utils/image.js

@@ -96,6 +96,8 @@ export const getUrl = (url) => url && url.slice(0, 4) !== 'http' ? path + url :
 
 export const isVideoExt = (url) => url.endsWith('.mp4') || url.endsWith('.mov') || url.endsWith('.webm') || url.endsWith('.ogg');
 
-export const isVideoMime = (type) => type == 'video/mp4' || type == 'video/webm' || type == 'video/ogg';
+export const isVideoMime = (type) => type === 'video/mp4' || type === 'video/webm' || type === 'video/ogg';
 
-export const isImageMime = (type) => type == 'image/jpeg' || type == 'image/png' || type == 'image/webp' || type == 'image/svg+xml';
+export const isImageMime = (type) => type === 'image/jpeg' || type === 'image/png' || type === 'image/webp' || type === 'image/svg+xml';
+
+export const isGifMime = (type) => type === 'image/gif';

src/view/ad/content.vue

@@ -0,0 +1,439 @@
+<template>
+  <div>
+    <div class="gva-table-box">
+      <div class="gva-btn-list">
+        <el-button type="primary" icon="plus" @click="handleAdd('0')">新增广告内容</el-button>
+        <el-button icon="delete" style="margin-left: 10px;" :disabled="!multipleSelection.length"
+          @click="handleMultiDelete">删除</el-button>
+      </div>
+      <el-table ref="multipleTable" :data="tableData" 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="80" prop="ID" />
+        <el-table-column align="left" label="类型" min-width="80" prop="adType">
+          <template #default="scope">
+            {{ formatAdType(scope.row.adType) }}
+          </template>
+        </el-table-column>
+        <el-table-column align="left" label="位置" min-width="120" prop="adPositionId">
+          <template #default="scope">
+            {{ formatAdPosition(scope.row.adPositionId) }}
+          </template>
+        </el-table-column>
+        <el-table-column align="left" label="媒体地址" min-width="300" prop="mediaUrl" />
+        <el-table-column align="left" label="跳转地址" min-width="300" prop="url" />
+        <el-table-column align="left" label="有效起始日期" min-width="140" prop="validStart">
+          <template #default="scope">
+            {{ formatOnlyDate(scope.row.validStart) }}
+          </template>
+        </el-table-column>
+        <el-table-column align="left" label="有效截止日期" min-width="140" prop="validEnd">
+          <template #default="scope">
+            {{ formatOnlyDate(scope.row.validEnd) }}
+          </template>
+        </el-table-column>
+        <el-table-column align="left" fixed="right" label="操作" width="300">
+          <template #default="scope">
+            <el-button type="primary" link icon="edit" @click="handleEdit(scope.row.ID)">编辑</el-button>
+            <el-button type="primary" link icon="delete" @click="handleDelete(scope.row.ID)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="gva-pagination">
+        <el-pagination layout="total, sizes, prev, pager, next, jumper" :current-page="page" :page-size="pageSize"
+          :page-sizes="[10, 30, 50, 100]" :total="total" @current-change="handleCurrentChange"
+          @size-change="handleSizeChange" />
+      </div>
+    </div>
+
+    <el-drawer v-model="dialogFormVisible" size="600" :show-close="false" :before-close="handleCloseDialog"
+      :close-on-click-modal="false" :close-on-press-escape="false">
+      <template #header>
+        <div class="flex justify-between items-center">
+          <span class="text-lg">{{ !isEdit ? '添加' : '修改' }}广告内容</span>
+          <div>
+            <el-button type="primary" @click="handleFormSubmit">确 定</el-button>
+            <el-button @click="handleCloseDialog">取 消</el-button>
+          </div>
+        </div>
+      </template>
+      <el-form v-if="dialogFormVisible" ref="editFormRef" label-position="top" label-width="auto" :inline="true"
+        :model="editForm" :rules="rules">
+        <el-form-item label="类型" prop="adType" style="width: 88%">
+          <el-select v-model="editForm.adType" placeholder="请选择" allow-create clearable filterable style="width: 100%"
+            @change="handleChangeAdType">
+            <el-option v-for="item in adTypeOptions" :key="item.key" :label="item.label" :value="item.key" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="位置" prop="adPositionId" style="width: 88%">
+          <el-select v-model="editForm.adPositionId" placeholder="请选择" allow-create clearable filterable
+            style="width: 100%" @change="handleChangePosition">
+            <el-option v-for="item in positionOptions" :key="item.ID" :label="item.title" :value="item.ID" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="跳转地址" prop="url" style="width: 88%">
+          <el-input v-model="editForm.url" type="url" rows="3" autocomplete="off" style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="有效起始日期" prop="validStart" style="width: 88%">
+          <el-date-picker v-model="editForm.validStart" :clearable="false" style="width: 100%" :editable="false" />
+        </el-form-item>
+        <el-form-item label="有效截止日期" prop="validEnd" style="width: 88%">
+          <el-date-picker v-model="editForm.validEnd" :clearable="false" :editable="false" style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="媒体（需要先选择 “类型” 和 “位置”）" prop="mediaUrl" style="width: 88%">
+          <warning-bar v-if="editForm.adType !== '' && editForm.adPositionId !== ''"
+            :title="`文件类型为：${uploadInfo.mediaTypeInfo}, 大小不超过${uploadInfo.fileSizeInfo}, 宽*高: ${uploadInfo.mediaWidth}px*${uploadInfo.mediaHeight}px`"
+            style="display: block; width: 100%;" />
+          <div v-if="editForm.adType !== '' && editForm.adPositionId !== ''" class="flex flex-wrap gap-3">
+            <el-upload class="avatar-uploader"
+              :action="`${imgUploadPath}/cms/mediaFile/upload?noSave=0&category=ad_content_imgs`"
+              :show-file-list="false" :on-success="uploadSuccess" :on-error="uploadFailure"
+              :before-upload="beforeUpload">
+              <el-button type="success" plain icon="upload">上传</el-button>
+            </el-upload>
+          </div>
+          <div class="upload-file-box">
+            <el-image v-if="editForm.mediaUrl !== '' && uploadInfo.mediaType === 'pic'" :src="editForm.mediaUrl"
+              class="avatar" fit="cover" style="width: 100%; min-height: 178px; min-width: 178px;" />
+            <div v-else-if="editForm.mediaUrl !== '' && uploadInfo.mediaType === 'video'">
+              <video :src="editForm.mediaUrl" controls="controls" :width="uploadInfo.mediaWidth"
+                :height="uploadInfo.mediaHeight" />
+            </div>
+          </div>
+        </el-form-item>
+      </el-form>
+    </el-drawer>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { formatOnlyDate } from '@/utils/format'
+import WarningBar from '@/components/warningBar/warningBar.vue'
+import { isImageMime, isVideoMime, isGifMime } from '@/utils/image'
+import {
+  getAdContentList,
+  addAdContent,
+  updateAdContent,
+  deleteAdContent,
+  deleteAdContentByIds,
+  getAdContentById
+} from '@/api/adContent'
+import { getAdPositionList } from '@/api/adPosition'
+
+const page = ref(1)
+const total = ref(0)
+const pageSize = ref(10)
+const rules = reactive({
+  adType: [
+    { required: true, message: '请选择广告类型', trigger: 'blur' }
+  ],
+  adPositionId: [
+    { required: true, message: '请选择广告位', trigger: 'blur' }
+  ],
+  url: [
+    { required: true, message: '请输入跳转地址', trigger: 'blur' }
+  ],
+  validStart: [
+    { required: true, message: '请选择有效起始日期', trigger: 'blur' }
+  ],
+  validEnd: [
+    { required: true, message: '请选择有效截止日期', trigger: 'blur' }
+  ],
+  mediaUrl: [
+    { required: true, message: '请上传媒体信息', trigger: 'blur' }
+  ],
+})
+const adTypeOptions = ref([
+  { key: 1, label: '图文', mediaType: 'pic', mediaTypeInfo: 'jpg,png,webp,svg', fileSize: 500, fileSizeInfo: '500K' },
+  { key: 2, label: '视频', mediaType: 'video', mediaTypeInfo: 'mp4,webm', fileSize: 5000, fileSizeInfo: '5M' },
+  { key: 3, label: '动图', mediaType: 'gif', mediaTypeInfo: 'gif', fileSize: 2000, fileSizeInfo: '2M' },
+])
+const positionOptions = ref([])
+
+const formatAdType = (value) => {
+  const rowLabel = adTypeOptions.value.filter(item => item.key === value)
+  return rowLabel && rowLabel[0] && rowLabel[0].label
+}
+
+const formatAdPosition = (value) => {
+  const rowLabel = positionOptions.value.filter(item => item.ID === value)
+  return rowLabel && rowLabel[0] && rowLabel[0].title
+}
+
+const getPositionData = async () => {
+  positionOptions.value = []
+  const res = await getAdPositionList({ page: 1, pageSize: 999 })
+  if (res.code === 0) {
+    positionOptions.value = res.data.list
+  }
+}
+
+getPositionData()
+
+// 多选
+const multipleSelection = ref([])// 多选数据
+const handleSelectionChange = (val) => {
+  multipleSelection.value = val
+}
+
+const handleMultiDelete = () => {
+  ElMessageBox.confirm('确定要删除所选广告吗?', '请确认', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async () => {
+    const IDs = []
+    if (multipleSelection.value.length === 0) {
+      ElMessage({
+        type: 'warning',
+        message: '请选择要删除的数据'
+      })
+      return
+    }
+    multipleSelection.value &&
+      multipleSelection.value.map(item => {
+        IDs.push(item.ID)
+      })
+    const res = await deleteAdContentByIds({ IDs })
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: '删除成功'
+      })
+      if (tableData.value.length === IDs.length && page.value > 1) {
+        page.value--
+      }
+      getTableData()
+    }
+  })
+}
+
+// 查询
+const tableData = ref([])
+const getTableData = async () => {
+  const res = await getAdContentList({ page: page.value, pageSize: pageSize.value })
+  if (res.code === 0) {
+    tableData.value = res.data.list
+  }
+}
+
+getTableData()
+
+// 分页
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  getTableData()
+}
+
+// 修改页面容量
+const handleCurrentChange = (val) => {
+  page.value = val
+  getTableData()
+}
+
+// ----- 以下为 form 操作 -----
+const uploadInfo = ref({
+  mediaType: '',
+  mediaTypeInfo: '',
+  fileSize: 0,
+  fileSizeInfo: '',
+  mediaWidth: 0,
+  mediaHeight: 0,
+})
+const editFormRef = ref(null)
+// 提交表单
+const handleFormSubmit = async () => {
+  editFormRef.value.validate(async valid => {
+    if (!valid) {
+      return
+    }
+    let res
+    if (isEdit.value) {
+      res = await updateAdContent(editForm.value)
+    } else {
+      res = await addAdContent(editForm.value)
+    }
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: isEdit.value ? '编辑成功' : '添加成功!'
+      })
+      getTableData()
+      initForm()
+      dialogFormVisible.value = false
+    }
+  })
+}
+
+// 初始化弹窗内表格方法
+const editForm = ref({})
+const checkFlag = ref(false)
+const initForm = () => {
+  checkFlag.value = false
+  editForm.value = {
+    ID: 0,
+    adType: '',
+    adPositionId: '',
+    url: '',
+    validStart: '',
+    validEnd: '',
+    mediaUrl: '',
+  }
+}
+
+// 关闭弹窗
+const dialogFormVisible = ref(false)
+const handleCloseDialog = () => {
+  initForm()
+  dialogFormVisible.value = false
+}
+
+// 删除
+const handleDelete = (ID) => {
+  ElMessageBox.confirm('此操作将永久删除广告内容, 是否继续?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+    .then(async () => {
+      const res = await deleteAdContent({ ID })
+      if (res.code === 0) {
+        ElMessage({
+          type: 'success',
+          message: '删除成功!'
+        })
+        if (tableData.value.length === 1 && page.value > 1) {
+          page.value--
+        }
+        getTableData()
+      }
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '已取消删除'
+      })
+    })
+}
+
+const handleChangePosition = (value) => {
+  if (value === '') {
+    return
+  }
+  const posItems = positionOptions.value.filter(item => item.ID === Number(value))
+  if (posItems && posItems.length === 0) {
+    return
+  }
+  uploadInfo.value.mediaWidth = posItems[0].mediaWidth
+  uploadInfo.value.mediaHeight = posItems[0].mediaHeight
+}
+const handleChangeAdType = (value) => {
+  if (!value) {
+    return
+  }
+  const typeItems = adTypeOptions.value.filter(item => item.key === Number(value))
+  if (typeItems && typeItems.length === 0) {
+    return
+  }
+  uploadInfo.value.mediaType = typeItems[0].mediaType
+  uploadInfo.value.mediaTypeInfo = typeItems[0].mediaTypeInfo
+  uploadInfo.value.fileSize = typeItems[0].fileSize
+  uploadInfo.value.fileSizeInfo = typeItems[0].fileSizeInfo
+}
+
+const isEdit = ref(false)
+const dialogTitle = ref('新增广告内容')
+const handleAdd = (id) => {
+  dialogTitle.value = '新增广告内容'
+  initForm()
+  isEdit.value = false
+  dialogFormVisible.value = true
+}
+// 修改方法
+const handleEdit = async (ID) => {
+  dialogTitle.value = '编辑广告内容'
+  const res = await getAdContentById({ ID })
+  editForm.value = res.data.adContent
+  handleChangePosition(editForm.value.adPositionId)
+  handleChangeAdType(editForm.value.adType)
+  isEdit.value = true
+  dialogFormVisible.value = true
+}
+
+// ----- 以下为图片操作 -----
+const imgUploadPath = ref(import.meta.env.VITE_BASE_API)
+const beforeUpload = (file) => {
+  const isLtSize = file.size / 1024 < uploadInfo.value.fileSize
+  const isVideo = isVideoMime(file.type)
+  const isImage = isImageMime(file.type)
+  const isGif = isGifMime(file.type)
+
+  if (uploadInfo.value.mediaType === 'pic' && !isImage) {
+    ElMessage.error('上传文件只能是 ' + uploadInfo.value.mediaTypeInfo + ' 格式')
+    return false
+  }
+  if (uploadInfo.value.mediaType === 'video' && !isVideo) {
+    ElMessage.error('上传文件只能是 ' + uploadInfo.value.mediaTypeInfo + ' 格式')
+    return false
+  }
+  if (uploadInfo.value.mediaType === 'gif' && !isGif) {
+    ElMessage.error('上传文件只能是 ' + uploadInfo.value.mediaTypeInfo + ' 格式')
+    return false
+  }
+  if (!isLtSize) {
+    ElMessage.error('上传文件大小不能超过 ' + uploadInfo.value.fileSizeInfo)
+    return false
+  }
+
+  if (uploadInfo.value.mediaType === 'pic') {
+    const isSize = new Promise(function (resolve, reject) {
+      const width = uploadInfo.value.mediaWidth
+      const height = uploadInfo.value.mediaHeight
+      const _URL = window.URL || window.webkitURL
+      const img = new Image()
+      img.onload = function () {
+        const valid = img.width === width && img.height === height
+        valid ? resolve() : reject()
+      }
+      img.src = _URL.createObjectURL(file)
+    }).then(() => {
+      return file
+    }, () => {
+      ElMessage.error('上传文件宽X高必须为: ' + uploadInfo.value.mediaWidth + 'px X ' + uploadInfo.value.mediaHeight + 'px')
+      return Promise.reject()
+    })
+    return isSize
+  }
+
+  return true
+}
+
+const uploadSuccess = (res) => {
+  const { code, data, msg } = res
+  if (code !== 0) {
+    ElMessage({ type: 'error', message: msg })
+    return
+  }
+  if (!data.mediaFile) {
+    ElMessage({ type: 'error', message: '返回错误，上传失败' })
+    return
+  }
+  editForm.value.mediaUrl = data.mediaFile.url
+}
+
+const uploadFailure = () => {
+  ElMessage({
+    type: 'error',
+    message: '上传失败'
+  })
+}
+
+</script>
+
+<style>
+.upload-file-box {
+  display: block;
+  width: 100%;
+}
+</style>

src/view/ad/position.vue

@@ -0,0 +1,294 @@
+<template>
+  <div>
+    <div class="gva-table-box">
+      <div class="gva-btn-list">
+        <el-button type="primary" icon="plus" @click="handleAdd('0')">新增广告位</el-button>
+      </div>
+      <el-table :data="tableData" row-key="ID">
+        <el-table-column align="left" label="ID" min-width="50" prop="ID" />
+        <el-table-column align="left" label="示例图片" min-width="100" prop="position">
+          <template #default="scope">
+            <el-image :src="scope.row.imgUrl" class="file" fit="cover" :preview-src-list="[scope.row.imgUrl]"
+              preview-teleported hide-on-click-modal close-on-press-escape style="width: 100px; height: 100px" />
+          </template>
+        </el-table-column>
+        <el-table-column align="left" label="位置名称" min-width="120" prop="position" />
+        <el-table-column align="left" label="位置说明" min-width="120" prop="title" />
+        <el-table-column align="left" label="媒体宽" min-width="60" prop="mediaWidth" />
+        <el-table-column align="left" label="媒体高" min-width="60" prop="mediaHeight" />
+        <el-table-column align="left" fixed="right" label="操作" width="300">
+          <template #default="scope">
+            <el-button type="primary" link icon="edit" @click="handleEdit(scope.row.ID)">编辑</el-button>
+            <el-button type="primary" link icon="delete" @click="handleDelete(scope.row.ID)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="gva-pagination">
+        <el-pagination layout="total, sizes, prev, pager, next, jumper" :current-page="page" :page-size="pageSize"
+          :page-sizes="[10, 30, 50, 100]" :total="total" @current-change="handleCurrentChange"
+          @size-change="handleSizeChange" />
+      </div>
+    </div>
+
+    <el-drawer v-model="dialogFormVisible" size="550" :show-close="false" :before-close="handleCloseDialog"
+      :close-on-click-modal="false" :close-on-press-escape="false">
+      <template #header>
+        <div class="flex justify-between items-center">
+          <span class="text-lg">{{ !isEdit ? '添加' : '修改' }}广告位</span>
+          <div>
+            <el-button type="primary" @click="handleFormSubmit">确 定</el-button>
+            <el-button @click="handleCloseDialog">取 消</el-button>
+          </div>
+        </div>
+      </template>
+      <el-form v-if="dialogFormVisible" ref="editFormRef" label-position="top" label-width="auto" :inline="true"
+        :model="editForm" :rules="rules">
+        <el-form-item label="位置名称（代码中用）" prop="position" style="width: 88%">
+          <el-input v-model="editForm.position" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="位置说明" prop="title" style="width: 88%">
+          <el-input v-model="editForm.title" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="媒体宽" prop="mediaWidth" style="width: 41%">
+          <el-input-number v-model="editForm.mediaWidth" autocomplete="off" style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="媒体高" prop="mediaHeight" style="width: 41%">
+          <el-input-number v-model="editForm.mediaHeight" autocomplete="off" style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="位置示例图片" prop="imgUrl" style="width: 88%">
+          <el-upload class="avatar-uploader"
+            :action="`${imgUploadPath}/cms/mediaFile/upload?noSave=1&category=ad_pos_exa`" :show-file-list="false"
+            :on-success="uploadSuccess" :on-error="uploadFailure" :before-upload="beforeUpload">
+            <img v-if="editForm.imgUrl" :src="editForm.imgUrl" class="avatar" style="object-fit: cover;">
+            <el-icon v-else class="avatar-uploader-icon">
+              <Plus />
+            </el-icon>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+    </el-drawer>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import {
+  getAdPositionList,
+  addAdPosition,
+  updateAdPosition,
+  deleteAdPosition,
+  getAdPositionById
+} from '@/api/adPosition'
+import { isImageMime } from '@/utils/image'
+
+const page = ref(1)
+const total = ref(0)
+const pageSize = ref(10)
+const checkNumber = (rule, value, callback) => {
+  if (value <= 0) {
+    callback(new Error(rule.message))
+  } else {
+    callback()
+  }
+}
+const rules = reactive({
+  position: [
+    { required: true, message: '请输入广告位名称', trigger: 'blur' }
+  ],
+  title: [
+    { required: true, message: '请输入广告位标题', trigger: 'blur' }
+  ],
+  mediaWidth: [
+    { required: true, validator: checkNumber, message: '请输入 > 0 的整数', trigger: 'blur' }
+  ],
+  mediaHeight: [
+    { required: true, validator: checkNumber, message: '请输入 > 0 的整数', trigger: 'blur' }
+  ],
+})
+
+// 查询
+const tableData = ref([])
+const getTableData = async () => {
+  const res = await getAdPositionList({ page: page.value, pageSize: pageSize.value })
+  if (res.code === 0) {
+    tableData.value = res.data.list
+  }
+}
+
+getTableData()
+
+// 分页
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  getTableData()
+}
+
+// 修改页面容量
+const handleCurrentChange = (val) => {
+  page.value = val
+  getTableData()
+}
+
+// ----- 以下为 editForm 操作 -----
+
+// 提交表单
+const handleFormSubmit = async () => {
+  editFormRef.value.validate(async valid => {
+    if (!valid) {
+      return false
+    }
+    let res
+    if (isEdit.value) {
+      res = await updateAdPosition(editForm.value)
+    } else {
+      res = await addAdPosition(editForm.value)
+    }
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: isEdit.value ? '编辑成功' : '添加成功!'
+      })
+      getTableData()
+      initForm()
+      dialogFormVisible.value = false
+    }
+  })
+}
+
+// 初始化弹窗内表格方法
+const editFormRef = ref(null)
+const editForm = ref({})
+const checkFlag = ref(false)
+const initForm = () => {
+  checkFlag.value = false
+  editForm.value = {
+    ID: 0,
+    position: '',
+    title: '',
+    imgUrl: '',
+    mediaHeight: 0,
+    mediaWidth: 0
+  }
+}
+
+// 关闭弹窗
+const dialogFormVisible = ref(false)
+const handleCloseDialog = () => {
+  initForm()
+  dialogFormVisible.value = false
+}
+
+// 删除菜单
+const handleDelete = (ID) => {
+  ElMessageBox.confirm('此操作将永久删除广告位, 是否继续?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+    .then(async () => {
+      const res = await deleteAdPosition({ ID })
+      if (res.code === 0) {
+        ElMessage({
+          type: 'success',
+          message: '删除成功!'
+        })
+        if (tableData.value.length === 1 && page.value > 1) {
+          page.value--
+        }
+        getTableData()
+      }
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '已取消删除'
+      })
+    })
+}
+
+const isEdit = ref(false)
+const dialogTitle = ref('新增广告位')
+const handleAdd = (id) => {
+  dialogTitle.value = '新增广告位'
+  isEdit.value = false
+  dialogFormVisible.value = true
+}
+// 修改菜单方法
+const handleEdit = async (ID) => {
+  dialogTitle.value = '编辑广告位'
+  const res = await getAdPositionById({ ID })
+  editForm.value = res.data.adPosition
+  isEdit.value = true
+  dialogFormVisible.value = true
+}
+
+// ------- 图片操作 -------
+const imgUploadPath = ref(import.meta.env.VITE_BASE_API)
+const beforeUpload = (file) => {
+  const isLt500K = file.size / 1024 / 1024 < 0.5 // 500K, @todo 应支持在项目中设置
+  const isImage = isImageMime(file.type)
+
+  if (!isImage) {
+    ElMessage.error('上传图片只能是 jpg,png,svg,webp 格式!')
+    return false
+  }
+  if (!isLt500K && isImage) {
+    ElMessage.error('未压缩的上传图片大小不能超过 500KB，请使用压缩上传')
+    return false
+  }
+  return true
+}
+
+const uploadSuccess = (res) => {
+  const { code, data, msg } = res
+  if (code !== 0) {
+    ElMessage({ type: 'error', message: msg })
+    return
+  }
+  if (!data.mediaFile) {
+    ElMessage({ type: 'error', message: '返回错误，上传失败' })
+    return
+  }
+  editForm.value.imgUrl = data.mediaFile.url
+}
+
+const uploadFailure = () => {
+  ElMessage({
+    type: 'error',
+    message: '上传失败'
+  })
+}
+
+</script>
+
+<style scoped>
+.avatar-uploader .avatar {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+</style>
+
+<style>
+.avatar-uploader .el-upload {
+  border: 1px solid var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+}
+</style>

src/view/content/components/articleEdit.vue

@@ -141,11 +141,11 @@ import { getUrl } from '@/utils/image'
 import { reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import RichEdit from '@/components/richtext/rich-edit.vue'
-import ChooseImg from '@/components/chooseImg/index.vue'
 import { getSourceList } from '@/api/source'
 import { getCategoryTree } from '@/api/category'
 import { getChannelTree } from '@/api/channel'
 import { getTagList } from '@/api/tag'
+import ChooseImg from '@/components/chooseImg/index.vue'
 import UploadCommon from '@/components/upload/common.vue'
 import UploadImage from '@/components/upload/image.vue'
 import {
@@ -319,9 +319,9 @@ const openPage = async (params) => {
     initFormByFetcher(params.fetcherId)
   } else {
     // 新建
-  }
     fullscreenLoading.value = false
   }
+}
 
 const initFormByArticle = async (id) => {
   const res = await getArticleById({ ID: id })
@@ -346,6 +346,7 @@ const initFormByArticle = async (id) => {
     })
     showErrMessage.value = '获取数据失败'
   }
+  fullscreenLoading.value = false
 }
 
 // 从爬虫数据中获取内容并填充至文章内容中
@@ -369,6 +370,7 @@ const initFormByFetcher = async (id) => {
     })
     showErrMessage.value = '获取数据失败'
   }
+  fullscreenLoading.value = false
 }
 
 // ----  以下为图片相关操作  ----

src/view/content/fetcher/article.vue

@@ -45,12 +45,19 @@
       <!-- 由于此处菜单跟左侧列表一一对应所以不需要分页 pageSize默认999 -->
       <el-table ref="multipleTable" :data="tableData" row-key="ID">
         <el-table-column align="left" label="ID" min-width="60" prop="ID" />
-        <el-table-column align="left" label="标题" min-width="300" prop="title" />
+        <el-table-column align="left" label="标题" min-width="300" prop="title">
-        <el-table-column align="left" label="来源" min-width="240" prop="source">
           <template #default="scope">
-            <a :href="scope.row.sourceUrl" target="_blank">{{ scope.row.source }}</a>
+            <span>{{ scope.row.title }}</span>
+            &nbsp;
+            <a v-if="scope.row.sourceUrl != ''" type="primary" :href="scope.row.sourceUrl" target="_blank">
+              <el-icon>
+                <Link />
+              </el-icon>
+              查看原文
+            </a>
           </template>
         </el-table-column>
+        <el-table-column align="left" label="来源" min-width="240" prop="source" />
         <el-table-column align="left" label="作者" min-width="100" prop="author" />
         <el-table-column align="left" label="采集时间" min-width="120" prop="createtime">
           <template #default="scope">

src/view/content/mediaFile/index.vue

@@ -23,7 +23,7 @@
             <div>{{ formatDate(scope.row.UpdatedAt) }}</div>
           </template>
         </el-table-column>
-        <el-table-column align="left" label="文件名/备注" prop="name" width="180">
+        <el-table-column align="left" label="文件名/备注" prop="name" width="280">
           <template #default="scope">
             <div class="name" @click="editFileNameFunc(scope.row)">{{ scope.row.name }}</div>
           </template>