|
|
|
@ -21,16 +21,36 @@ |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="类型:" prop="type"> |
|
|
|
<el-select v-model="form.type" placeholder="请选择" class="form-select" @change="handleTypeChange"> |
|
|
|
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" /> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="显示天数:" prop="displayDays"> |
|
|
|
<el-select v-model="form.displayDays" placeholder="请选择" class="form-select"> |
|
|
|
<el-option v-for="item in displayDaysOptions" :key="item.value" :label="item.label" :value="item.value" /> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="链接:" prop="linkUrl"> |
|
|
|
<el-form-item v-if="form.type === 1" label="链接:" prop="linkUrl"> |
|
|
|
<el-input v-model="form.linkUrl" placeholder="请输入跳转链接" class="form-input" /> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item v-else label="富文本内容:" prop="content"> |
|
|
|
<div class="editor-wrapper"> |
|
|
|
<QuillEditor |
|
|
|
ref="quillEditorRef" |
|
|
|
v-model:content="form.content" |
|
|
|
content-type="html" |
|
|
|
:toolbar="toolbarOptions" |
|
|
|
theme="snow" |
|
|
|
class="quill-editor" |
|
|
|
placeholder="请输入富文本内容" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="轮播图:" prop="imageUrl"> |
|
|
|
<div class="upload-area"> |
|
|
|
<div class="upload-row"> |
|
|
|
@ -70,6 +90,8 @@ import { getCurrentInstance, onMounted, reactive, ref } from 'vue'; |
|
|
|
import type { ComponentInternalInstance } from 'vue'; |
|
|
|
import type { FormRules, UploadRequestOptions } from 'element-plus'; |
|
|
|
import { ElForm, ElMessage } from 'element-plus'; |
|
|
|
import { QuillEditor } from '@vueup/vue-quill'; |
|
|
|
import '@vueup/vue-quill/dist/vue-quill.snow.css'; |
|
|
|
import { useRoute } from 'vue-router'; |
|
|
|
import { editCarouselBanner, getCarouselBannerDetails } from '@/api/supervision/carouselBanner'; |
|
|
|
import { getDicts } from '@/api/system/dict/data'; |
|
|
|
@ -78,6 +100,7 @@ import request from '@/utils/request'; |
|
|
|
const route = useRoute(); |
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
|
|
|
const formRef = ref<InstanceType<typeof ElForm>>(); |
|
|
|
const quillEditorRef = ref<InstanceType<typeof QuillEditor>>(); |
|
|
|
const pageLoading = ref(true); |
|
|
|
const submitting = ref(false); |
|
|
|
const recordId = ref(''); |
|
|
|
@ -96,27 +119,55 @@ const displayDaysOptions = [ |
|
|
|
{ label: '30天', value: 30 }, |
|
|
|
{ label: '永久', value: 0 } |
|
|
|
]; |
|
|
|
const typeOptions = [ |
|
|
|
{ label: '富文本', value: 0 }, |
|
|
|
{ label: '外部链接', value: 1 } |
|
|
|
]; |
|
|
|
|
|
|
|
const toolbarOptions = [ |
|
|
|
['bold', 'italic', 'underline', 'strike'], |
|
|
|
['blockquote', 'code-block'], |
|
|
|
[{ header: 1 }, { header: 2 }], |
|
|
|
[{ list: 'ordered' }, { list: 'bullet' }], |
|
|
|
[{ indent: '-1' }, { indent: '+1' }], |
|
|
|
[{ size: ['small', false, 'large', 'huge'] }], |
|
|
|
[{ header: [1, 2, 3, 4, 5, 6, false] }], |
|
|
|
[{ color: [] }, { background: [] }], |
|
|
|
[{ align: [] }], |
|
|
|
['link', 'image', 'video'], |
|
|
|
['clean'] |
|
|
|
]; |
|
|
|
|
|
|
|
const form = reactive({ |
|
|
|
title: '', |
|
|
|
targetPlatform: undefined as number | undefined, |
|
|
|
carouselPosition: undefined as number | undefined, |
|
|
|
type: undefined as number | undefined, |
|
|
|
displayDays: undefined as number | undefined, |
|
|
|
linkUrl: '', |
|
|
|
content: '', |
|
|
|
imageUrl: '', |
|
|
|
status: 2, |
|
|
|
type: 1 |
|
|
|
status: 2 |
|
|
|
}); |
|
|
|
|
|
|
|
const rules: FormRules = { |
|
|
|
title: [{ required: true, message: '请输入标题', trigger: 'blur' }], |
|
|
|
targetPlatform: [{ required: true, message: '请选择内容发布在', trigger: 'change' }], |
|
|
|
carouselPosition: [{ required: true, message: '请选择橱窗', trigger: 'change' }], |
|
|
|
type: [{ required: true, message: '请选择类型', trigger: 'change' }], |
|
|
|
displayDays: [{ required: true, message: '请选择显示天数', trigger: 'change' }], |
|
|
|
linkUrl: [{ required: true, message: '请输入链接', trigger: 'blur' }], |
|
|
|
linkUrl: [{ required: true, message: '请输入跳转链接', trigger: 'blur' }], |
|
|
|
content: [{ required: true, message: '请输入富文本内容', trigger: 'blur' }], |
|
|
|
imageUrl: [{ required: true, message: '请上传轮播图', trigger: 'change' }] |
|
|
|
}; |
|
|
|
|
|
|
|
const handleTypeChange = () => { |
|
|
|
form.linkUrl = ''; |
|
|
|
form.content = ''; |
|
|
|
formRef.value?.validateField('linkUrl'); |
|
|
|
formRef.value?.validateField('content'); |
|
|
|
}; |
|
|
|
|
|
|
|
const beforeImageUpload = (file: File) => { |
|
|
|
const isImage = ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type); |
|
|
|
const isLt5M = file.size / 1024 / 1024 < 5; |
|
|
|
@ -175,6 +226,10 @@ const submitForm = async (status: number, successMessage: string) => { |
|
|
|
const isValid = await formRef.value.validate().catch(() => false); |
|
|
|
if (!isValid) return; |
|
|
|
|
|
|
|
if (form.type === 0 && quillEditorRef.value) { |
|
|
|
form.content = quillEditorRef.value.getHTML?.() || form.content; |
|
|
|
} |
|
|
|
|
|
|
|
submitting.value = true; |
|
|
|
try { |
|
|
|
const res: any = await editCarouselBanner({ |
|
|
|
@ -182,11 +237,12 @@ const submitForm = async (status: number, successMessage: string) => { |
|
|
|
title: form.title, |
|
|
|
targetPlatform: form.targetPlatform, |
|
|
|
carouselPosition: form.carouselPosition, |
|
|
|
type: form.type, |
|
|
|
displayDays: form.displayDays, |
|
|
|
linkUrl: form.linkUrl, |
|
|
|
linkUrl: form.type === 1 ? form.linkUrl : undefined, |
|
|
|
content: form.type === 0 ? form.content : undefined, |
|
|
|
imageUrl: form.imageUrl, |
|
|
|
// status, |
|
|
|
type: form.type, |
|
|
|
// isDelete: status === 2 ? 0 : 1 |
|
|
|
}); |
|
|
|
if (res.code === 200) { |
|
|
|
@ -232,11 +288,12 @@ const loadDetail = async () => { |
|
|
|
form.title = data.title || ''; |
|
|
|
form.targetPlatform = data.targetPlatform ?? undefined; |
|
|
|
form.carouselPosition = data.carouselPosition ?? undefined; |
|
|
|
form.type = data.type ?? undefined; |
|
|
|
form.displayDays = data.displayDays ?? undefined; |
|
|
|
form.linkUrl = data.linkUrl || ''; |
|
|
|
form.content = data.content || ''; |
|
|
|
form.imageUrl = data.imageUrl || ''; |
|
|
|
form.status = data.status ?? 2; |
|
|
|
form.type = data.type ?? 1; |
|
|
|
} catch (error) { |
|
|
|
console.error('加载详情失败:', error); |
|
|
|
ElMessage.error('加载详情失败'); |
|
|
|
@ -308,6 +365,27 @@ onMounted(async () => { |
|
|
|
max-width: 500px; |
|
|
|
} |
|
|
|
|
|
|
|
.editor-wrapper { |
|
|
|
width: 100%; |
|
|
|
max-width: 900px; |
|
|
|
border: 1px solid #dcdfe6; |
|
|
|
border-radius: 4px; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.quill-editor { |
|
|
|
height: 500px; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.ql-container) { |
|
|
|
min-height: 500px; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.ql-editor) { |
|
|
|
min-height: 450px; |
|
|
|
} |
|
|
|
|
|
|
|
.upload-area { |
|
|
|
width: 100%; |
|
|
|
max-width: 620px; |
|
|
|
|
