diff --git a/src/api/DesignForm/types.ts b/src/api/DesignForm/types.ts index 89c79cee5..9868ed09a 100644 --- a/src/api/DesignForm/types.ts +++ b/src/api/DesignForm/types.ts @@ -179,7 +179,7 @@ export interface VideoMsg { export interface CarsuselConfig { uploadFlag:boolean, imgId:string, - sort:number, + imgSort:number, imgUrl:string, link:string } diff --git a/src/components/DesignForm/assembly/index.ts b/src/components/DesignForm/assembly/index.ts index 006f543f5..96361afae 100644 --- a/src/components/DesignForm/assembly/index.ts +++ b/src/components/DesignForm/assembly/index.ts @@ -347,7 +347,7 @@ const selectOption: any = [ carsuselConfigArr:[{ uploadFlag:false, imgId:'', - sort:1, + imgSort:1, imgUrl: '', link: '' }] diff --git a/src/components/DesignForm/formControlAttr.vue b/src/components/DesignForm/formControlAttr.vue index 5b5731eed..71124f3ea 100644 --- a/src/components/DesignForm/formControlAttr.vue +++ b/src/components/DesignForm/formControlAttr.vue @@ -1328,6 +1328,7 @@ function videoUploadErr(error: Error, uploadFile: UploadFile, uploadFiles: Uploa import { Delete,Plus } from '@element-plus/icons-vue' import { CarsuselConfig } from '@/api/DesignForm/types' import errimg from '@/assets/404_images/untilUploadImg.png' +import { v4 as uuidv4 } from "uuid"; //轮播图设置弹窗显示控制 const dialogTableVisible = ref(false) @@ -1335,15 +1336,39 @@ const dialogTableVisible = ref(false) //图片展示显示控制 const showImagePreview = ref(false) +//最近点击的上传按钮对应的imgId +let currentUploadImgid = ""; + +//刚拖拽视频组件时,初始化imgid监听designForm.activeKey,变化时,如果controlData.value.type=='lowcodeCarsusel',就遍历轮播图数组把imgid=''的都生成uuid +watch(()=>store.activeKey, () => { + if(controlData.value.type==='lowcodeCarsusel'){ + const carsuselConfigData:CarsuselConfig[] = controlData.value.control.carsuselConfigArr + carsuselConfigData.forEach(element => { + //console.log(element) + if(element.imgId==''){ + //console.log("初始化imgid") + let onlyNumber = uuidv4().replaceAll('-','').toString(); //获取唯一编码 + element.imgId = onlyNumber; + } + }); + } +}) //轮播图图片上传成功钩子 function carouselImgUploadSuccess(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles){ - alert('轮播图图片上传成功') + const carsuselConfigData:CarsuselConfig[] = controlData.value.control.carsuselConfigArr + carsuselConfigData.forEach(element => { + if(element.imgId==currentUploadImgid){ + element.imgUrl=response.data.url + element.uploadFlag=true + } + }); + } //轮播图所有已上传的图片的url,点击略缩图展示大图用 const carouselImgUrlList = computed(() => { const list:string[] = []; - const carsuselConfigData:CarsuselConfig[] = controlData.value.control.carsuselConfigArr + const carsuselConfigData:CarsuselConfig[] = store.controlAttr.control.carsuselConfigArr carsuselConfigData.forEach(element => { if(element.uploadFlag===true){ list.push(element.imgUrl) @@ -1353,12 +1378,30 @@ const carouselImgUrlList = computed(() => { }) //轮播图设置table -function createRow(){ - //alert('新增一行') - +function createRow(clickedRow:any){ + const newRow:CarsuselConfig = { + uploadFlag:false, + imgId:'', + imgSort:1, + imgUrl: '', + link: '' + } + let onlyNumber = uuidv4().replaceAll('-','').toString(); //获取唯一编码 + newRow.imgId = onlyNumber; + const nextSort:number = clickedRow.sort+1; + newRow.imgSort = nextSort; + controlData.value.control.carsuselConfigArr.push(newRow) } -function deleteRow(){ + +function deleteRow(clickedRow:any){ //alert('删除一行') + const carsuselConfigData:CarsuselConfig[] = controlData.value.control.carsuselConfigArr + for (var i = 0; i < carsuselConfigData.length; i++) { + if(carsuselConfigData[i].imgId===clickedRow.imgId){ + carsuselConfigData.splice(i, 1); + i--; // 如果不减,将漏掉一个元素 + } + } } //关闭大图展示 @@ -1371,6 +1414,10 @@ const handlePreview = (index: number, row: any) => { showImagePreview.value = true } +const changeCurrentUploadImgid = (clickedRow:any) => { + currentUploadImgid = clickedRow.imgId +} + //liwenxuan 20240111 carousel end @@ -1959,8 +2006,8 @@ const handlePreview = (index: number, row: any) => { - - + + @@ -1996,23 +2043,12 @@ const handlePreview = (index: number, row: any) => { - diff --git a/src/store/modules/lowcodevideo.ts b/src/store/modules/lowcodevideo.ts index f820c8e73..3283f7d0d 100644 --- a/src/store/modules/lowcodevideo.ts +++ b/src/store/modules/lowcodevideo.ts @@ -16,8 +16,8 @@ let uselowcodevideoStore = defineStore('lowcodevideo', () => { const videoMsg = reactive({ CreatedAt: "", UpdatedAt: "", - fileSize: 0n, - id: 0n, + fileSize: 0, + id: 0, key: "", name: "", physicspath: "",