|
|
|
@ -1278,109 +1278,21 @@ import { VideoMsg } from '@/api/DesignForm/types' |
|
|
|
import { genFileId } from 'element-plus' |
|
|
|
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus' |
|
|
|
|
|
|
|
//更改已上传的视频:el-upload中设置 limit 和 on-exceed 可以在选中时自动替换上一个文件。 |
|
|
|
const upload = ref<UploadInstance>() |
|
|
|
|
|
|
|
const handleExceed: UploadProps['onExceed'] = (files) => { |
|
|
|
upload.value!.clearFiles() |
|
|
|
const file = files[0] as UploadRawFile |
|
|
|
file.uid = genFileId() |
|
|
|
upload.value!.handleStart(file) |
|
|
|
} |
|
|
|
|
|
|
|
//每个视频上传控件对应一个videoMsg[videoIndex] |
|
|
|
const videoIndex = ref(0); |
|
|
|
const videoMsgArr:VideoMsg[] = reactive<VideoMsg[]>([{ |
|
|
|
CreatedAt: '', |
|
|
|
UpdatedAt: '', |
|
|
|
fileSize: 0n, |
|
|
|
id: 0n, |
|
|
|
key: '', |
|
|
|
name: '', |
|
|
|
physicspath: '', |
|
|
|
size: '', |
|
|
|
tag: '', |
|
|
|
type: 0, |
|
|
|
url: '', |
|
|
|
videoReady: false, |
|
|
|
videoHeight:400, |
|
|
|
videoWidth:700, |
|
|
|
videoAutoPlay: false, |
|
|
|
attrId: '', |
|
|
|
poster:'', |
|
|
|
loop: false |
|
|
|
}]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* //监听当前操作视频的变化 |
|
|
|
watch(videoMsgArr[videoIndex.value], () => { |
|
|
|
// 在嵌套的属性变更时触发 |
|
|
|
// 注意：`newValue` 此处和 `oldValue` 是相等的 |
|
|
|
// 因为它们是同一个对象！ |
|
|
|
emits('videoMsgChange',videoMsgArr[videoIndex.value]); |
|
|
|
|
|
|
|
},{deep:true}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function setVideoIndex(newValue:any,oldValue:any){ |
|
|
|
//alert(videoIndex.value) |
|
|
|
|
|
|
|
const result = videoMsgArr.findIndex(function(item) { |
|
|
|
item.attrId === newValue.activeKey; |
|
|
|
|
|
|
|
}); |
|
|
|
if(result!=-1){ |
|
|
|
videoIndex.value = result; |
|
|
|
} |
|
|
|
//alert(videoIndex.value) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
*/ |
|
|
|
|
|
|
|
/* const LastEdit = { |
|
|
|
oldKey:'', |
|
|
|
oldType:'', |
|
|
|
} |
|
|
|
//监听当前操作组件的变化,当新点击的组件是视频组件时,更新videoIndex |
|
|
|
watch( |
|
|
|
() => store, (newValue, oldValue) => { |
|
|
|
//alert("newValue:"+newValue+",oldValue:"+oldValue) |
|
|
|
let newKey = newValue.activeKey; |
|
|
|
//alert("newKey==="+newKey+"|||oldKey==="+LastEdit.oldKey) |
|
|
|
|
|
|
|
if(oldValue==undefined){ |
|
|
|
//alert('刚进入编辑页面') |
|
|
|
|
|
|
|
}else{ |
|
|
|
|
|
|
|
// if(LastEdit.oldKey===''){ |
|
|
|
// alert("首次选择控件") |
|
|
|
//}else{ |
|
|
|
// if(newKey===''){ |
|
|
|
// alert('离开编辑页面') |
|
|
|
// }else{ |
|
|
|
// alert("非首次选择控件") |
|
|
|
// } |
|
|
|
//} |
|
|
|
//以下两行必须在本else的最后 |
|
|
|
LastEdit.oldKey = newKey |
|
|
|
LastEdit.oldType = newValue.controlAttr.type |
|
|
|
} |
|
|
|
|
|
|
|
if(newValue.controlAttr.type==='videoUpAndPlay'){ |
|
|
|
console.log('是视频') |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},{deep:true} |
|
|
|
) */ |
|
|
|
|
|
|
|
|
|
|
|
//上传成功钩子 |
|
|
|
function videoUploadOk(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) { |
|
|
|
const { control = {} } : { control: any } = controlData.value |
|
|
|
|
|
|
|
control.videoMsg[videoIndex.value].url = response.data.url; |
|
|
|
control.videoMsg[videoIndex.value].videoReady = true; |
|
|
|
control.videoMsg[videoIndex.value].CreatedAt = response.data.CreatedAt; |
|
|
|
@ -1393,10 +1305,6 @@ function videoUploadOk(response: any, uploadFile: UploadFile, uploadFiles: Uploa |
|
|
|
control.videoMsg[videoIndex.value].size = response.data.size; |
|
|
|
control.videoMsg[videoIndex.value].tag = response.data.tag; |
|
|
|
control.videoMsg[videoIndex.value].type = response.data.type; |
|
|
|
|
|
|
|
// controlData.value.control.videoMsg = [videoMsgArr] |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
//删除钩子 禁止删除 |
|
|
|
@ -1416,17 +1324,53 @@ function videoUploadErr(error: Error, uploadFile: UploadFile, uploadFiles: Uploa |
|
|
|
|
|
|
|
|
|
|
|
//liwenxuan 20240111 carousel start |
|
|
|
const direction = ref('ltr') |
|
|
|
const drawer = ref(false) |
|
|
|
const handleClose = (done: () => void) => { |
|
|
|
ElMessageBox.confirm('Are you sure you want to close this?') |
|
|
|
.then(() => { |
|
|
|
done() |
|
|
|
}) |
|
|
|
.catch(() => { |
|
|
|
// catch error |
|
|
|
}) |
|
|
|
|
|
|
|
import { Delete,Plus } from '@element-plus/icons-vue' |
|
|
|
import { CarsuselConfig } from '@/api/DesignForm/types' |
|
|
|
import errimg from '@/assets/404_images/untilUploadImg.png' |
|
|
|
|
|
|
|
//轮播图设置弹窗显示控制 |
|
|
|
const dialogTableVisible = ref(false) |
|
|
|
|
|
|
|
//图片展示显示控制 |
|
|
|
const showImagePreview = ref(false) |
|
|
|
|
|
|
|
//轮播图图片上传成功钩子 |
|
|
|
function carouselImgUploadSuccess(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles){ |
|
|
|
alert('轮播图图片上传成功') |
|
|
|
} |
|
|
|
|
|
|
|
//轮播图所有已上传的图片的url,点击略缩图展示大图用 |
|
|
|
const carouselImgUrlList = computed(() => { |
|
|
|
const list:string[] = []; |
|
|
|
const carsuselConfigData:CarsuselConfig[] = controlData.value.control.carsuselConfigArr |
|
|
|
carsuselConfigData.forEach(element => { |
|
|
|
if(element.uploadFlag===true){ |
|
|
|
list.push(element.imgUrl) |
|
|
|
} |
|
|
|
}); |
|
|
|
return list; |
|
|
|
}) |
|
|
|
|
|
|
|
//轮播图设置table |
|
|
|
function createRow(){ |
|
|
|
//alert('新增一行') |
|
|
|
|
|
|
|
} |
|
|
|
function deleteRow(){ |
|
|
|
//alert('删除一行') |
|
|
|
} |
|
|
|
|
|
|
|
//关闭大图展示 |
|
|
|
const closePreview = () => { |
|
|
|
showImagePreview.value = false |
|
|
|
} |
|
|
|
|
|
|
|
//开启大图展示 |
|
|
|
const handlePreview = (index: number, row: any) => { |
|
|
|
showImagePreview.value = true |
|
|
|
} |
|
|
|
|
|
|
|
//liwenxuan 20240111 carousel end |
|
|
|
|
|
|
|
|
|
|
|
@ -1515,7 +1459,8 @@ const handleClose = (done: () => void) => { |
|
|
|
</el-row> |
|
|
|
|
|
|
|
<el-row v-else-if="item.type === 'carousel'"> |
|
|
|
<el-button type="primary" append-to-body="true" modal="true" @click="drawer = true" >轮播图设置</el-button> |
|
|
|
|
|
|
|
<el-button type="primary" append-to-body="true" modal="true" @click="dialogTableVisible = true" >轮播图设置</el-button> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
|
|
|
|
@ -1530,6 +1475,8 @@ const handleClose = (done: () => void) => { |
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
<template v-if="controlData.config"> |
|
|
|
@ -2010,6 +1957,74 @@ const handleClose = (done: () => void) => { |
|
|
|
</el-tab-pane> |
|
|
|
</el-tabs> |
|
|
|
</div> |
|
|
|
<!-- 轮播图设置弹窗 20240122 start --> |
|
|
|
|
|
|
|
<el-dialog v-model="dialogTableVisible" title="轮播图设置" style="width:60%"> |
|
|
|
<el-table :data="controlData.control.carsuselConfigArr" border style="width: 100%" row-key="imgId"> |
|
|
|
<el-table-column label="设置图片" width="180" > |
|
|
|
<template #default="propFlag"> |
|
|
|
<el-upload |
|
|
|
:action="uploadUrl" :before-remove="beforeRemove" |
|
|
|
:on-success="carouselImgUploadSuccess" |
|
|
|
:on-error="videoUploadErr" |
|
|
|
:limit="1" |
|
|
|
accept=".jpg,.jpeg,.png,.tif,.tga,.bmp,.dds,.svg,.eps,.pdf,.hdr,.raw,.exr,.psd,.afphoto,.afdesign"> |
|
|
|
<el-button v-if="!propFlag.row.uploadFlag" type="primary">点此上传</el-button> |
|
|
|
<el-button v-if="propFlag.row.uploadFlag" type="primary">已上传,点击修改</el-button> |
|
|
|
</el-upload> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="imgUrl" label="查看图片" width="180"> |
|
|
|
<template #default="imgScope"> |
|
|
|
<!-- {{ imgScope.row.imgUrl }} --> |
|
|
|
|
|
|
|
<el-image style="width: 100px; height: 100px;cursor:pointer;" :src="imgScope.row.imgUrl" fit="contain" alt="暂未上传" @click="handlePreview(imgScope.$index, imgScope.row)" > |
|
|
|
<template #error> |
|
|
|
<div class="image-slot"> |
|
|
|
<el-image style="width: 100px; height: 100px;" :src="errimg" fit="contain" ></el-image> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-image> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="link" label="链接地址"> |
|
|
|
<template #default="linkScope"> |
|
|
|
|
|
|
|
<el-input v-model="linkScope.row.link" placeholder="输入图片的链接地址" /> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column fixed="right" label="操作" width="120" > |
|
|
|
|
|
|
|
<template #default="scope"> |
|
|
|
<el-tooltip |
|
|
|
class="box-item" |
|
|
|
content="删除本行" |
|
|
|
placement="top-start"> |
|
|
|
<el-button v-if="controlData.control.carsuselConfigArr.length>1" type="danger" :icon="Delete" circle @click="deleteRow"/> |
|
|
|
</el-tooltip> |
|
|
|
<!-- {{ tableData[tableDataLength-1] }} --> |
|
|
|
<!-- {{ scope.row }} --> |
|
|
|
<el-tooltip |
|
|
|
class="box-item" |
|
|
|
content="新增一行" |
|
|
|
placement="top-start"> |
|
|
|
<el-button v-if="controlData.control.carsuselConfigArr[controlData.control.carsuselConfigArr.length-1].imgId == scope.row.imgId" type="success" :icon="Plus" circle @click="createRow" /> |
|
|
|
</el-tooltip> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</el-dialog> |
|
|
|
<!-- 图片预览 --> |
|
|
|
<el-image-viewer |
|
|
|
v-if="showImagePreview" |
|
|
|
:zoom-rate="1.2" |
|
|
|
:url-list="carouselImgUrlList" |
|
|
|
@close="closePreview" |
|
|
|
/> |
|
|
|
|
|
|
|
<!-- 轮播图设置弹窗 liwenxuan 20240122 end --> |
|
|
|
</template> |
|
|
|
<style lang='scss' scoped> |
|
|
|
|
|
|
|
|
