|
|
|
@ -21,16 +21,26 @@ |
|
|
|
</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"> |
|
|
|
<Editor v-model="form.content" :height="400" /> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="轮播图:" prop="imageUrl"> |
|
|
|
<div class="upload-area"> |
|
|
|
<div class="upload-row"> |
|
|
|
@ -74,6 +84,7 @@ import { useRoute } from 'vue-router'; |
|
|
|
import { addCarouselBanner } from '@/api/supervision/carouselBanner'; |
|
|
|
import { getDicts } from '@/api/system/dict/data'; |
|
|
|
import request from '@/utils/request'; |
|
|
|
import Editor from '@/components/Editor/index.vue'; |
|
|
|
|
|
|
|
const route = useRoute(); |
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
|
|
|
@ -94,13 +105,19 @@ const displayDaysOptions = [ |
|
|
|
{ label: '30天', value: 30 }, |
|
|
|
{ label: '永久', value: 0 } |
|
|
|
]; |
|
|
|
const typeOptions = [ |
|
|
|
{ label: '富文本', value: 0 }, |
|
|
|
{ label: '外部链接', value: 1 } |
|
|
|
]; |
|
|
|
|
|
|
|
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: '' |
|
|
|
}); |
|
|
|
|
|
|
|
@ -108,11 +125,20 @@ 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; |
|
|
|
@ -174,11 +200,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: 1, |
|
|
|
isDelete: 0 |
|
|
|
}); |
|
|
|
if (res.code === 200) { |
|
|
|
|