From b8d6b779455c67cad00e19e124d8e3fc39ea9bca Mon Sep 17 00:00:00 2001 From: liwenxuan <1298531568@qq.com> Date: Fri, 19 Jan 2024 15:50:43 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E7=BB=84=E4=BB=B6=E5=AE=8C?= =?UTF-8?q?=E6=95=B4=E6=95=88=E6=9E=9C=E5=AE=9E=E7=8E=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/DesignForm/types.ts | 2 +- src/components/DesignForm/assembly/index.ts | 22 +- src/components/DesignForm/formControlAttr.vue | 232 ++++++++++++------ .../DesignForm/public/form/form.vue | 1 + src/main.ts | 3 +- src/store/modules/lowcodevideo.ts | 25 +- src/views/sysworkflow/codepage/createform.vue | 2 +- src/widget/videoupload/index.vue | 2 +- src/widget/videoupload/videoUploadPlay.vue | 26 +- 9 files changed, 220 insertions(+), 95 deletions(-) diff --git a/src/api/DesignForm/types.ts b/src/api/DesignForm/types.ts index 0d5a359f1..7ccc7ee43 100644 --- a/src/api/DesignForm/types.ts +++ b/src/api/DesignForm/types.ts @@ -172,6 +172,6 @@ export interface VideoMsg { videoWidth?:number//视频宽 videoAutoPlay:boolean//是否自动播放 attrId:string//字段标识 e.g : videoUpAndPlay1705024134559 - poster?:string//海报帧url + poster?:string//视频封面url loop:boolean//是否循环播放 } diff --git a/src/components/DesignForm/assembly/index.ts b/src/components/DesignForm/assembly/index.ts index f6cd8d7f2..eb2808c34 100644 --- a/src/components/DesignForm/assembly/index.ts +++ b/src/components/DesignForm/assembly/index.ts @@ -313,7 +313,27 @@ const selectOption: any = [ icon: '', iconFont: 'fa-play-circle', control: { - modelValue: '' + modelValue: '', + 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 + }] }, config: {} }, diff --git a/src/components/DesignForm/formControlAttr.vue b/src/components/DesignForm/formControlAttr.vue index cb103066a..62821410c 100644 --- a/src/components/DesignForm/formControlAttr.vue +++ b/src/components/DesignForm/formControlAttr.vue @@ -39,6 +39,7 @@ const props = withDefaults( //接收父级参数 const emits = defineEmits<{ (e: 'openDialog', data: any): void (e: 'update:formOtherData', data: any): void + (e: 'videoMsgChange', data: VideoMsg): void //(e: 'update:formData', data: any): void //(e: 'update:formConfig', data: any): void }>() @@ -188,6 +189,7 @@ const attrList = computed(() => { columnIndex = list[0].type === 'index' } } + const temp =reactive([ { label: '自定义Class', @@ -604,16 +606,24 @@ const attrList = computed(() => { vIf: state.isSearch, vShow: ['videoUpAndPlay'] }, + /* { + label: '上传视频封面', + value: config.uploadvideo, + path: 'config.uploadvideo', + type: 'uploadvideo_poster', + vIf: state.isSearch, + vShow: ['videoUpAndPlay'] + }, */ { - label: '视频自动播放', + label: '视频宽度(像素)', value: config.uploadvideo, path: 'config.uploadvideo', - type: 'uploadvideo_autoPlay', + type: 'uploadvideo_width', vIf: state.isSearch, vShow: ['videoUpAndPlay'] }, { - label: '视频高度', + label: '视频高度(像素)', value: config.uploadvideo, path: 'config.uploadvideo', type: 'uploadvideo_height', @@ -621,13 +631,23 @@ const attrList = computed(() => { vShow: ['videoUpAndPlay'] }, { - label: '视频宽度', + label: '视频自动播放', value: config.uploadvideo, path: 'config.uploadvideo', - type: 'uploadvideo_width', + type: 'uploadvideo_autoPlay', vIf: state.isSearch, vShow: ['videoUpAndPlay'] }, + { + label: '视频循环播放', + value: config.uploadvideo, + path: 'config.uploadvideo', + type: 'uploadvideo_loopPlay', + vIf: state.isSearch, + vShow: ['videoUpAndPlay'] + }, + + { label: '上传地址', value: control.action, @@ -817,6 +837,7 @@ watch( } } ) + const fileSignAry = reactive([]) const controlChange = (obj: any, val: any) => { console.log("字段编辑----》",obj,val,controlData.value) @@ -1252,17 +1273,10 @@ const isNotWrite = (val:any) =>{ } //liwenxuan 20240108 vidioupload start -import uselowcodevideoStore from '@/store/modules/lowcodevideo' + import { VideoMsg } from '@/api/DesignForm/types' -const lowcodevideoStore = uselowcodevideoStore(); -const videoAutoPlay = ref(false); -const videoHeight = ref(400); -const videoWidth = ref(700); -//const emits = defineEmits(["addedVideo"]); -//上传成功钩子 -function videoUploadOk(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) { - //当上传成功时,封装一个videoMsg对象 - const videoMsg:VideoMsg = { +const videoIndex = ref(0); +const videoMsgArr:VideoMsg[] = reactive([{ CreatedAt: '', UpdatedAt: '', fileSize: 0n, @@ -1274,81 +1288,129 @@ function videoUploadOk(response: any, uploadFile: UploadFile, uploadFiles: Uploa tag: '', type: 0, url: '', - videoAutoPlay: false, videoReady: false, + videoHeight:400, + videoWidth:700, + videoAutoPlay: false, attrId: '', + poster:'', loop: false - } - videoMsg.url = response.data.url; - videoMsg.videoReady = true; - console.log(response) - console.log(lowcodevideoStore); - videoMsg.CreatedAt = response.data.CreatedAt; - videoMsg.UpdatedAt = response.data.UpdatedAt; - videoMsg.fileSize = response.data.fileSize; - videoMsg.id = response.data.id; - videoMsg.key = response.data.key; - videoMsg.name = response.data.name; - videoMsg.physicspath = response.data.physicspath; - videoMsg.size = response.data.size; - videoMsg.tag = response.data.tag; - videoMsg.type = response.data.type; +}]); + + - //emits("addedVideo",videoArr)'' - console.log("response.data.url----2------>",response.data.url) - //formConfig.value["hjk"] = 250 - console.log("formConfig----3------>",formConfig.value) - console.log("attrList----1------>",attrList.value) +/* //监听当前操作视频的变化 +watch(videoMsgArr[videoIndex.value], () => { + // 在嵌套的属性变更时触发 + // 注意：`newValue` 此处和 `oldValue` 是相等的 + // 因为它们是同一个对象！ + emits('videoMsgChange',videoMsgArr[videoIndex.value]); + +},{deep:true}) - if(attrList.value.length > 0){ - attrList.value.forEach((item:any)=>{ - // console.log("attrList---item-1------>",item.type) - console.log("attrList---item-1------>",item) - if(item.type === "uploadvideo_url"){ - item.config={ - videoConfig:[ - { - videoUrl:response.data.url, - videoAutoPlay:videoAutoPlay, - videoHeight:videoHeight, - videoWidth:videoWidth - } - ] - } - } - }); + + +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; } - console.log("attrList---item-2------>",attrList.value) + //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; + control.videoMsg[videoIndex.value].UpdatedAt = response.data.UpdatedAt; + control.videoMsg[videoIndex.value].fileSize = response.data.fileSize; + control.videoMsg[videoIndex.value].id = response.data.id; + control.videoMsg[videoIndex.value].key = response.data.key; + control.videoMsg[videoIndex.value].name = response.data.name; + control.videoMsg[videoIndex.value].physicspath = response.data.physicspath; + 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] + + } //删除钩子 禁止删除 function beforeRemove(){ - return false; + return false; } //上传失败钩子 function videoUploadErr(error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles){ - alert("上传失败,请重试") - console.log("上传失败"+error); - + alert("上传失败,请重试") + console.log("上传失败"+error); } -//点击文件列表中已上传的文件时的钩子,点击即替换video标签的src -/* function selectVideo(uploadFile: UploadFile){ - - const res:any = uploadFile.response; - const resd = res.data; - const resdurl = resd.url; - lowcodevideoStore.videoResource = resdurl; -} */ + //liwenxuan 20240108 vidioupload end + + + //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?') + ElMessageBox.confirm('Are you sure you want to close this?') .then(() => { - done() + done() }) .catch(() => { // catch error @@ -1393,8 +1455,9 @@ const handleClose = (done: () => void) => { /> + void) => { accept=".mp4,.MOV,.WMV,.FLV,.AVI,.AVCHD,.WebM,.MKV,.rmvb"> 点此上传 - 已上传,点击修改 + 已上传 + - + + + + - + - + diff --git a/src/components/DesignForm/public/form/form.vue b/src/components/DesignForm/public/form/form.vue index 0d7f7c493..5f5958a91 100644 --- a/src/components/DesignForm/public/form/form.vue +++ b/src/components/DesignForm/public/form/form.vue @@ -1006,6 +1006,7 @@ defineExpose({ 'detail-form': type === 3 || type === 4 }" > + diff --git a/src/main.ts b/src/main.ts index 07f9c276a..d78a42f2d 100644 --- a/src/main.ts +++ b/src/main.ts @@ -26,6 +26,7 @@ import '@/styles/workflowcss/override-element-ui.scss' import ComComponents from '@/components/DesignForm/index' import ComWidget from '@/widget/index' import AKDesign from '@/views/sysworkflow/codepage/index' +import * as pinia from './store/index' const app = createApp(App); // 全局注册 自定义指令(directive) @@ -45,6 +46,6 @@ app.directive('focus', { app.use(router).use(i18n).use(ComComponents).use(ComWidget).use(ElementPlus, { locale: zhCn -}).use(AKDesign).mount('#app'); +}).use(AKDesign).use(pinia.store).mount('#app'); diff --git a/src/store/modules/lowcodevideo.ts b/src/store/modules/lowcodevideo.ts index b303c3bbe..f820c8e73 100644 --- a/src/store/modules/lowcodevideo.ts +++ b/src/store/modules/lowcodevideo.ts @@ -14,22 +14,21 @@ let uselowcodevideoStore = defineStore('lowcodevideo', () => { //const videoReady = ref(false); //成功后接受的视频详细信息 const videoMsg = reactive({ - CreatedAt: '', - UpdatedAt: '', + CreatedAt: "", + UpdatedAt: "", fileSize: 0n, id: 0n, - key: '', - name: '', - physicspath: '', - size: '', - tag: '', + key: "", + name: "", + physicspath: "", + size: "", + tag: "", type: 0, - url: '', - videoAutoPlay:false, - videoHeight:400, - videoWidth:700, - videoReady:false, - attrId:'',//字段标识 e.g : videoUpAndPlay1705024134559 + url: "", + videoReady: false, + videoAutoPlay: false, + attrId: "", + loop: false }); const videoMsgUse = reactive([]) const videoOnShowIndex = ref(0);//当当前表单有多个视频控件时,字段配置栏目前所展示的视频属性在pinia数组中的索引,用来在formControlAttr.vue中的dom属性上绑定显示数据 diff --git a/src/views/sysworkflow/codepage/createform.vue b/src/views/sysworkflow/codepage/createform.vue index ff377d0e3..dd3308814 100644 --- a/src/views/sysworkflow/codepage/createform.vue +++ b/src/views/sysworkflow/codepage/createform.vue @@ -32,7 +32,7 @@ import AceDrawer from '@/components/DesignForm/aceDrawer.vue' import { ref, reactive, provide, onMounted } from 'vue' import { ElMessage } from 'element-plus' import { useLayoutStore } from '@/store/DesignForm/layout' -import { FormData,formStruct,DrawerStruct } from '@/api/DesignForm/types' +import { FormData,formStruct,DrawerStruct, VideoMsg } from '@/api/DesignForm/types' import { customerFormVersionCont } from '@/api/DesignForm/type' import { saveProductionForm,getOneProductionForm,haveCustomerFormVersion,editCustomerFormInfo,saveAsNewVersion,enableVersion,judgeSubmitCancel } from '@/api/DesignForm/requestapi' diff --git a/src/widget/videoupload/index.vue b/src/widget/videoupload/index.vue index 3e6d0c451..843d4d233 100644 --- a/src/widget/videoupload/index.vue +++ b/src/widget/videoupload/index.vue @@ -14,7 +14,7 @@ - +