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

增加广告管理 

修复部分页面错误
This commit is contained in:
jacky 2024-04-20 00:32:27 +08:00
parent 756582f45a
commit 6c990967a2
9 changed files with 891 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/api/adContent.js Normal file
View File

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

63
src/api/adPosition.js Normal file
View File

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

2
src/components/upload/image.vue
View File

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

6
src/utils/image.js
View File

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

439
src/view/ad/content.vue Normal file
View File

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

294
src/view/ad/position.vue Normal file
View File

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

6
src/view/content/components/articleEdit.vue
View File

@ -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
}
// ---- 以下为图片相关操作 ----

13
src/view/content/fetcher/article.vue
View File

@ -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="240" prop="source">
<el-table-column align="left" label="标题" min-width="300" prop="title">
<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">

2
src/view/content/mediaFile/index.vue
View File

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