gitadmin/wms-elevue
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增文章图集功能

Browse Source
This commit is contained in:
zjl 2024-09-19 10:54:15 +08:00
parent 5babfa0c06
commit de381654c3
2 changed files with 55 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/views/content/article/edit.vue
View File

@ -50,6 +50,14 @@
<template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template>
</UploadImg>
</el-form-item>
<el-form-item
label="文章图集"
prop="imagesList"
:rules="{ required: true,message: '请上传文章图集', trigger: 'change' }"
>
<UploadImgs @upload="fileUploads" file-type=".jpeg,.png,.jpg,.gif" name="article"
:fileSize="200" :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>
</el-form-item>
@ -81,6 +89,7 @@ import {computed, onMounted,ref,shallowRef,reactive } from "vue";
import {FormInstance} from "element-plus";
const formRef = shallowRef<FormInstance>();
import UploadImg from "@/components/Upload/Image.vue";
import UploadImgs from '@/components/Upload/Images.vue';
import {useLockFn} from "@/utils/useLockFn";
import Editor from '@/components/Editor/tinymce.vue'
import {message,buildTree} from "@/utils/auth";
@ -116,11 +125,15 @@ const formData = reactive({
title: "",
author: "",
cover:'',
images: '',
intro:'',
content:'',
status:0,
click:'',
sort:0
sort:0,
imagesList:[],
filePath:'',
fileList:[],
});
const dialogClose = () => {
@ -135,12 +148,29 @@ const setFormData = async (row: any) => {
}
}
editorRef.value.myValue=formData.content
// 文章图集
if (formData.imagesList) {
formData.imagesList.map(item=>{
formData.fileList.push({
filePath:item
})
})
}
};
const editorRef=ref()
const fileUploads = (list: any) => {
formData.fileList = list
};
const handleSubmit = async () => {
await formRef.value?.validate();
// 文章图集处理，多个图片逗号分割
formData.images =''
formData.fileList.map((item,index)=>{
formData.images+=`${item.filePath}${index<formData.fileList.length-1?',':''}`
})
let ruleForm = JSON.parse(JSON.stringify(formData));
ruleForm.content=editorRef.value.myValue
if (!ruleForm.content) {

48
src/views/data/config/editItem.vue
View File

@ -68,30 +68,30 @@
:format="formData.type == 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'" />
</template>
<template v-else-if="formData.type == 'image'">
<UploadImg
@changeFileName="(name)=>formData.fileName=name"
:fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
name="config"
:fileSize="200"
v-model:image-url="formData.filePath">
<template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</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"/>
</template>
<template v-else-if="formData.type == 'file'">
<UploadFile @upload="fileUploadFile" file-type=".xlsx.xls.doc.docx" name="config"
:file-list="formData.filePath?[{name:formData.fileName,url:formData.filePath}]:[]"/>
</template>
<template v-else-if="formData.type == 'files'">
<UploadFile @upload="fileUploads" file-type=".xlsx.xls.doc.docx" name="config" :multiple="true"
:file-list="formData.fileList"/>
</template>
<template v-else-if="formData.type == 'ueditor'">
<Editor ref="editorRef" :height="fwbHeight" class="flex-1" name="config"/>
</template>
<UploadImg
@changeFileName="(name)=>formData.fileName=name"
:fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
name="config"
:fileSize="200"
v-model:image-url="formData.filePath">
<template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</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"/>
</template>
<template v-else-if="formData.type == 'file'">
<UploadFile @upload="fileUploadFile" file-type=".xlsx.xls.doc.docx" name="config"
:file-list="formData.filePath?[{name:formData.fileName,url:formData.filePath}]:[]"/>
</template>
<template v-else-if="formData.type == 'files'">
<UploadFile @upload="fileUploads" file-type=".xlsx.xls.doc.docx" name="config" :multiple="true"
:file-list="formData.fileList"/>
</template>
<template v-else-if="formData.type == 'ueditor'">
<Editor ref="editorRef" :height="fwbHeight" class="flex-1" name="config"/>
</template>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="formData.sort" />