diff --git a/src/api/DesignForm/types.ts b/src/api/DesignForm/types.ts index 7ccc7ee43..89c79cee5 100644 --- a/src/api/DesignForm/types.ts +++ b/src/api/DesignForm/types.ts @@ -158,8 +158,8 @@ export interface PublicAtrr{ export interface VideoMsg { CreatedAt: string UpdatedAt: string - fileSize: bigint - id: bigint + fileSize: number + id: number key: string name: string physicspath: string @@ -174,4 +174,12 @@ export interface VideoMsg { attrId:string//字段标识 e.g : videoUpAndPlay1705024134559 poster?:string//视频封面url loop:boolean//是否循环播放 - } +} +//低代码轮播图单个属性对象 +export interface CarsuselConfig { + uploadFlag:boolean, + imgId:string, + sort:number, + imgUrl:string, + link:string +} diff --git a/src/assets/404_images/untilUploadImg.png b/src/assets/404_images/untilUploadImg.png new file mode 100644 index 000000000..0557f939e Binary files /dev/null and b/src/assets/404_images/untilUploadImg.png differ diff --git a/src/components/DesignForm/assembly/index.ts b/src/components/DesignForm/assembly/index.ts index eb2808c34..006f543f5 100644 --- a/src/components/DesignForm/assembly/index.ts +++ b/src/components/DesignForm/assembly/index.ts @@ -336,18 +336,25 @@ const selectOption: any = [ }] }, config: {} - }, - { + }, + { type: 'lowcodeCarsusel', label: '轮播图', icon: '', iconFont: 'fa-window-restore', control: { - modelValue: '' + modelValue: '', + carsuselConfigArr:[{ + uploadFlag:false, + imgId:'', + sort:1, + imgUrl: '', + link: '' + }] }, config: {} - } - ] + } + ] }, { title: '布局字段', diff --git a/src/components/DesignForm/formControlAttr.vue b/src/components/DesignForm/formControlAttr.vue index 558484f01..5b5731eed 100644 --- a/src/components/DesignForm/formControlAttr.vue +++ b/src/components/DesignForm/formControlAttr.vue @@ -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() + 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([{ - 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) => { - 轮播图设置 + + 轮播图设置 @@ -1529,6 +1474,8 @@ const handleClose = (done: () => void) => { /> + + @@ -2010,6 +1957,74 @@ const handleClose = (done: () => void) => { + + + + + + + + + + + + + + + + + + + + + + + +