新增通知封面功能

This commit is contained in:
zjl 2024-09-24 10:41:58 +08:00
parent 83482ebbf6
commit f68e37a51b
11 changed files with 73 additions and 45 deletions

View File

@ -27,9 +27,9 @@
</el-form-item> </el-form-item>
<el-form-item label="广告封面" prop="cover" :rules="{ required: true, message: '请上传广告封面', trigger: 'change' }"> <el-form-item label="广告封面" prop="cover" :rules="{ required: true, message: '请上传广告封面', trigger: 'change' }">
<UploadImg <UploadImg
:fileType="['image/jpeg', 'image/png', 'image/jpg', 'image/gif']" name="ad" :fileSize="200" :fileType="['image/jpeg', 'image/png', 'image/jpg', 'image/gif']" name="ad" :fileSize="20"
v-model:image-url="formData.cover"> v-model:image-url="formData.cover">
<template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template> <template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过20M</template>
</UploadImg> </UploadImg>
</el-form-item> </el-form-item>
<el-form-item label="广告链接" prop="url" :rules="{ required: true, message: '请输入广告链接', trigger: 'blur' }"> <el-form-item label="广告链接" prop="url" :rules="{ required: true, message: '请输入广告链接', trigger: 'blur' }">

View File

@ -45,9 +45,9 @@
<UploadImg @changeFileName="(name)=>formData.coverImgName=name" <UploadImg @changeFileName="(name)=>formData.coverImgName=name"
:fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']" :fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
name="article" name="article"
:fileSize="200" :fileSize="20"
v-model:image-url="formData.cover"> v-model:image-url="formData.cover">
<template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template> <template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过20M</template>
</UploadImg> </UploadImg>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
@ -56,7 +56,7 @@
:rules="{ required: true,message: '请上传文章图集', trigger: 'change' }" :rules="{ required: true,message: '请上传文章图集', trigger: 'change' }"
> >
<UploadImgs @upload="fileUploads" file-type=".jpeg,.png,.jpg,.gif" name="article" <UploadImgs @upload="fileUploads" file-type=".jpeg,.png,.jpg,.gif" name="article"
:fileSize="200" :multiple="true" :fileList="formData.fileList"/> :fileSize="20" :multiple="true" :fileList="formData.fileList"/>
</el-form-item> </el-form-item>
<el-form-item label="导读" prop="intro" :rules="{ required: true, message: '请输入导读', trigger: 'blur' }"> <el-form-item label="导读" prop="intro" :rules="{ required: true, message: '请输入导读', trigger: 'blur' }">
<el-input placeholder="请输入" v-model="formData.intro" type="textarea"></el-input> <el-input placeholder="请输入" v-model="formData.intro" type="textarea"></el-input>

View File

@ -38,9 +38,9 @@
<UploadImg <UploadImg
:fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']" :fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
name="article" name="article"
:fileSize="200" :fileSize="20"
v-model:image-url="formData.image"> v-model:image-url="formData.image">
<template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template> <template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过20M</template>
</UploadImg> </UploadImg>
</el-form-item> </el-form-item>
<el-form-item label="排序" prop="sort"> <el-form-item label="排序" prop="sort">

View File

@ -56,9 +56,9 @@
<UploadImg @changeFileName="(name)=>formData.coverImgName=name" <UploadImg @changeFileName="(name)=>formData.coverImgName=name"
:fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']" :fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
name="article" name="article"
:fileSize="200" :fileSize="20"
v-model:image-url="formData.image"> v-model:image-url="formData.image">
<template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template> <template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过20M</template>
</UploadImg> </UploadImg>
</el-form-item> </el-form-item>
<el-form-item label="排序" prop="sort"> <el-form-item label="排序" prop="sort">

View File

@ -72,14 +72,14 @@
@changeFileName="(name)=>formData.fileName=name" @changeFileName="(name)=>formData.fileName=name"
:fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']" :fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
name="config" name="config"
:fileSize="200" :fileSize="20"
v-model:image-url="formData.filePath"> v-model:image-url="formData.filePath">
<template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template> <template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过20M</template>
</UploadImg> </UploadImg>
</template> </template>
<template v-else-if="formData.type == 'images'"> <template v-else-if="formData.type == 'images'">
<UploadImgs @upload="fileUploads" file-type=".jpeg,.png,.jpg,.gif" name="config" <UploadImgs @upload="fileUploads" file-type=".jpeg,.png,.jpg,.gif" name="config"
:fileSize="200" :multiple="true" :fileList="formData.fileList"/> :fileSize="20" :multiple="true" :fileList="formData.fileList"/>
</template> </template>
<template v-else-if="formData.type == 'file'"> <template v-else-if="formData.type == 'file'">
<UploadFile @upload="fileUploadFile" file-type=".xlsx.xls.doc.docx" name="config" <UploadFile @upload="fileUploadFile" file-type=".xlsx.xls.doc.docx" name="config"

View File

@ -1,5 +1,5 @@
import { h } from 'vue'; import { h } from 'vue';
import { ElTag } from 'element-plus'; import { ElAvatar, ElTag } from 'element-plus';
export const columns = [ export const columns = [
{ {
@ -15,6 +15,19 @@ export const columns = [
prop: 'title', prop: 'title',
width: 300, width: 300,
}, },
{
label: '封面',
prop: 'cover',
render(record) {
return h(ElAvatar, {
size: 48,
src: record.row.cover,
shape: 'square',
fit: 'fill',
});
},
width: 100,
},
{ {
label: '类型', label: '类型',
prop: 'type', prop: 'type',

View File

@ -25,6 +25,19 @@
clearable clearable
/> />
</el-form-item> </el-form-item>
<el-form-item
label="通知封面"
prop="cover"
:rules="{ required: true,message: '请上传通知封面', trigger: 'change' }"
>
<UploadImg @changeFileName="(name)=>formData.imageImgName=name"
:fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
name="notice"
:fileSize="20"
v-model:image-url="formData.cover">
<template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过20M</template>
</UploadImg>
</el-form-item>
<el-form-item label="通知类型"> <el-form-item label="通知类型">
<el-select <el-select
v-model="formData.type" v-model="formData.type"
@ -65,6 +78,7 @@
import type {FormInstance} from "element-plus"; import type {FormInstance} from "element-plus";
import {getNoticeDetail,noticeAdd,noticeUpdate} from "@/api/data/notice"; import {getNoticeDetail,noticeAdd,noticeUpdate} from "@/api/data/notice";
import {onMounted, reactive, shallowRef,ref} from "vue"; import {onMounted, reactive, shallowRef,ref} from "vue";
import UploadImg from "@/components/Upload/Image.vue";
import Editor from '@/components/Editor/tinymce.vue' import Editor from '@/components/Editor/tinymce.vue'
import {message} from "@/utils/auth"; import {message} from "@/utils/auth";
import {useLockFn} from "@/utils/useLockFn"; import {useLockFn} from "@/utils/useLockFn";
@ -76,6 +90,7 @@ const formRef = shallowRef<FormInstance>();
const formData = reactive({ const formData = reactive({
id: "", id: "",
title: "", title: "",
cover: "",
status: 1, status: 1,
type: 1, type: 1,
content:'' content:''

View File

@ -42,14 +42,14 @@
<UploadImg <UploadImg
:fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']" :fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
name="setting" name="setting"
:fileSize="200" :fileSize="20"
v-model:image-url="formData[item.code]"> v-model:image-url="formData[item.code]">
<template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template> <template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过20M</template>
</UploadImg> </UploadImg>
</template> </template>
<template v-else-if="item.type == 'images'"> <template v-else-if="item.type == 'images'">
<UploadImgs @upload="fileUploadImgs" file-type=".jpeg,.png,.jpg,.gif" name="setting" <UploadImgs @upload="fileUploadImgs" file-type=".jpeg,.png,.jpg,.gif" name="setting"
:fileSize="200" :multiple="true" :fileList="item.filePath" :z-index="index"/> :fileSize="20" :multiple="true" :fileList="item.filePath" :z-index="index"/>
</template> </template>
<template v-else-if="item.type == 'file'"> <template v-else-if="item.type == 'file'">
<UploadFile @upload="fileUploadFile" file-type=".xlsx.xls.doc.docx" name="setting" <UploadFile @upload="fileUploadFile" file-type=".xlsx.xls.doc.docx" name="setting"

View File

@ -48,9 +48,9 @@
<UploadImg @changeFileName="(name)=>formData.avatarName=name" <UploadImg @changeFileName="(name)=>formData.avatarName=name"
:fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']" :fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
name="user" name="user"
:fileSize="200" :fileSize="20"
v-model:image-url="formData.avatar"> v-model:image-url="formData.avatar">
<template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template> <template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过20M</template>
</UploadImg> </UploadImg>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>

View File

@ -11,9 +11,9 @@
<UploadImg @changeFileName="(name)=>formData.imageImgName=name" <UploadImg @changeFileName="(name)=>formData.imageImgName=name"
:fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']" :fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
name="tenant" name="tenant"
:fileSize="200" :fileSize="20"
v-model:image-url="formData.image"> v-model:image-url="formData.image">
<template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template> <template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过20M</template>
</UploadImg> </UploadImg>
</el-form-item> </el-form-item>
</div> </div>

View File

@ -100,10 +100,10 @@
<!-- <UploadImg @changeFileName="(name)=>formData.avatarName=name" <!-- <UploadImg @changeFileName="(name)=>formData.avatarName=name"
:fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']" :fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
name="user" name="user"
:fileSize="200" :fileSize="20"
:cropper="true" :cropper="true"
v-model:image-url="formData.avatar"> v-model:image-url="formData.avatar">
<template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template> <template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过20M</template>
</UploadImg> --> </UploadImg> -->
<Cropper ref="cropperCircled" :src="formData.avatar" :uploadApi="upload" title="头像上传" @uploadSuccess="uploadSuccess"> <Cropper ref="cropperCircled" :src="formData.avatar" :uploadApi="upload" title="头像上传" @uploadSuccess="uploadSuccess">
<template #avatar> <template #avatar>