From 8f5656715068fcbc1bd157c5ab1f68a2b7d082a6 Mon Sep 17 00:00:00 2001 From: liwenxuan <1298531568@qq.com> Date: Tue, 23 Jan 2024 16:23:22 +0800 Subject: [PATCH] =?UTF-8?q?=E8=BD=AE=E6=92=AD=E5=9B=BE=E6=A0=B7=E5=BC=8F,?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/DesignForm/types.ts | 14 +- src/assets/404_images/untilUploadImg.png | Bin 0 -> 3458 bytes src/components/DesignForm/assembly/index.ts | 17 +- src/components/DesignForm/formControlAttr.vue | 227 ++++++++++-------- src/views/sysworkflow/codepage/createform.vue | 2 +- src/widget/videoupload/index.vue | 7 +- 6 files changed, 146 insertions(+), 121 deletions(-) create mode 100644 src/assets/404_images/untilUploadImg.png 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 0000000000000000000000000000000000000000..0557f939e109241e0bebee01854561fe015a1c3a GIT binary patch literal 3458 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 literal 0 HcmV?d00001 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) => { + + + + + + + + + + + + + + + + + + + + + + + +