新增通知封面功能

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 label="广告封面" prop="cover" :rules="{ required: true, message: '请上传广告封面', trigger: 'change' }">
<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">
<template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template>
<template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过20M</template>
</UploadImg>
</el-form-item>
<el-form-item label="广告链接" prop="url" :rules="{ required: true, message: '请输入广告链接', trigger: 'blur' }">

View File

@ -45,9 +45,9 @@
<UploadImg @changeFileName="(name)=>formData.coverImgName=name"
:fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
name="article"
:fileSize="200"
:fileSize="20"
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>
</el-form-item>
<el-form-item
@ -56,7 +56,7 @@
:rules="{ required: true,message: '请上传文章图集', trigger: 'change' }"
>
<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 label="导读" prop="intro" :rules="{ required: true, message: '请输入导读', trigger: 'blur' }">
<el-input placeholder="请输入" v-model="formData.intro" type="textarea"></el-input>

View File

@ -38,9 +38,9 @@
<UploadImg
:fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
name="article"
:fileSize="200"
:fileSize="20"
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>
</el-form-item>
<el-form-item label="排序" prop="sort">

View File

@ -56,9 +56,9 @@
<UploadImg @changeFileName="(name)=>formData.coverImgName=name"
:fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
name="article"
:fileSize="200"
:fileSize="20"
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>
</el-form-item>
<el-form-item label="排序" prop="sort">

View File

@ -72,14 +72,14 @@
@changeFileName="(name)=>formData.fileName=name"
:fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
name="config"
:fileSize="200"
:fileSize="20"
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>
</template>
<template v-else-if="formData.type == 'images'">
<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 v-else-if="formData.type == 'file'">
<UploadFile @upload="fileUploadFile" file-type=".xlsx.xls.doc.docx" name="config"

View File

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

View File

@ -25,30 +25,43 @@
clearable
/>
</el-form-item>
<el-form-item label="通知类型">
<el-select
v-model="formData.type"
placeholder="请选择通知类型"
>
<el-option label="通知" :value="1"></el-option>
<el-option label="公告" :value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="通知状态" prop="status">
<el-radio-group v-model="formData.status" name="status">
<el-radio :value="1">正常</el-radio>
<el-radio :value="2">关闭</el-radio>
</el-radio-group>
</el-form-item>
<div class="flex">
<el-form-item
class="flex-1"
label="内容"
prop="content"
:rules="{ required: true, message: '请输入通知内容', trigger: 'blur' }"
<el-form-item
label="通知封面"
prop="cover"
:rules="{ required: true,message: '请上传通知封面', trigger: 'change' }"
>
<Editor ref="editorRef" :height="fwbHeight" class="flex-1" name="data"/>
</el-form-item>
<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-select
v-model="formData.type"
placeholder="请选择通知类型"
>
<el-option label="通知" :value="1"></el-option>
<el-option label="公告" :value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="通知状态" prop="status">
<el-radio-group v-model="formData.status" name="status">
<el-radio :value="1">正常</el-radio>
<el-radio :value="2">关闭</el-radio>
</el-radio-group>
</el-form-item>
<div class="flex">
<el-form-item
class="flex-1"
label="内容"
prop="content"
:rules="{ required: true, message: '请输入通知内容', trigger: 'blur' }"
>
<Editor ref="editorRef" :height="fwbHeight" class="flex-1" name="data"/>
</el-form-item>
</div>
</el-form>
<template #footer>
@ -65,6 +78,7 @@
import type {FormInstance} from "element-plus";
import {getNoticeDetail,noticeAdd,noticeUpdate} from "@/api/data/notice";
import {onMounted, reactive, shallowRef,ref} from "vue";
import UploadImg from "@/components/Upload/Image.vue";
import Editor from '@/components/Editor/tinymce.vue'
import {message} from "@/utils/auth";
import {useLockFn} from "@/utils/useLockFn";
@ -76,6 +90,7 @@ const formRef = shallowRef<FormInstance>();
const formData = reactive({
id: "",
title: "",
cover: "",
status: 1,
type: 1,
content:''

View File

@ -42,14 +42,14 @@
<UploadImg
:fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
name="setting"
:fileSize="200"
:fileSize="20"
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>
</template>
<template v-else-if="item.type == 'images'">
<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 v-else-if="item.type == 'file'">
<UploadFile @upload="fileUploadFile" file-type=".xlsx.xls.doc.docx" name="setting"

View File

@ -48,9 +48,9 @@
<UploadImg @changeFileName="(name)=>formData.avatarName=name"
:fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
name="user"
:fileSize="200"
:fileSize="20"
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>
</el-form-item>
<el-form-item>

View File

@ -11,9 +11,9 @@
<UploadImg @changeFileName="(name)=>formData.imageImgName=name"
:fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
name="tenant"
:fileSize="200"
:fileSize="20"
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>
</el-form-item>
</div>

View File

@ -100,10 +100,10 @@
<!-- <UploadImg @changeFileName="(name)=>formData.avatarName=name"
:fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
name="user"
:fileSize="200"
:fileSize="20"
:cropper="true"
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> -->
<Cropper ref="cropperCircled" :src="formData.avatar" :uploadApi="upload" title="头像上传" @uploadSuccess="uploadSuccess">
<template #avatar>