|
|
|
@ -5,11 +5,20 @@ |
|
|
|
--> |
|
|
|
<script lang='ts' setup> |
|
|
|
import { AnalysisCss,AnalysisInputCss } from '@/api/common/cssInfo' |
|
|
|
import request from '@/utils/axios/index' |
|
|
|
import { ref, computed } from 'vue' |
|
|
|
import { uploadUrl } from '@/api/lowCode/form/fieldUnit' |
|
|
|
import { useDesignFormStore } from '@/utils/pinia/stores/lowCode/designForm' |
|
|
|
import SvgIcon from '@/components/svgIcon/index.vue' |
|
|
|
import { useAttrs } from 'vue'; |
|
|
|
const props = defineProps({ |
|
|
|
// eslint-disable-next-line vue/require-default-prop |
|
|
|
data: { |
|
|
|
type: Object, |
|
|
|
}, |
|
|
|
pageType: { |
|
|
|
type: Number, |
|
|
|
}, |
|
|
|
valInfo: { |
|
|
|
type: String, |
|
|
|
}, |
|
|
|
@ -51,25 +60,92 @@ const openVideo = () => { |
|
|
|
console.log("单机播放") |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const emits = defineEmits(["updateVideoUrl"]); |
|
|
|
|
|
|
|
const imgUrl = computed({ |
|
|
|
get() { |
|
|
|
if (props.modelValue != "") { |
|
|
|
return props.modelValue; |
|
|
|
} else if (props.valInfo != "") { |
|
|
|
} else if (props.valInfo&&props.valInfo != "") { |
|
|
|
return props.valInfo; |
|
|
|
} else { |
|
|
|
return props.data?.control.videoMsg[0].url; |
|
|
|
} |
|
|
|
}, |
|
|
|
set(val: any) { |
|
|
|
emits("update:valInfo", val); |
|
|
|
console.log(val) |
|
|
|
emits("updateVideoUrl", val); |
|
|
|
}, |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
const beforeRemove = () => { |
|
|
|
return false; |
|
|
|
}; |
|
|
|
|
|
|
|
const store = useDesignFormStore() as any; |
|
|
|
|
|
|
|
const controlData = computed(() => { |
|
|
|
// console.log("注册自定义事件----------------->",props.formInfo) |
|
|
|
// console.log("注册自定义事件--------1--------->", store.controlAttr); |
|
|
|
// console.log("注册自定义事件---------3-------->", controlData.value.customRules); |
|
|
|
return store.controlAttr; |
|
|
|
}); |
|
|
|
const videoIndex = ref(0); |
|
|
|
//上传成功钩子 |
|
|
|
const videoUploadOk = ( |
|
|
|
response: any, |
|
|
|
uploadFile: UploadFile, |
|
|
|
uploadFiles: UploadFiles |
|
|
|
) => { |
|
|
|
const { control = {} }: { control: any } = controlData.value; |
|
|
|
|
|
|
|
console.log("上传成功钩子", controlData.value); |
|
|
|
|
|
|
|
console.log("上传成功钩子--------->", props.data?.control.videoMsg); |
|
|
|
// imgUrl.value = response.data.url; |
|
|
|
console.log("上传成功钩子----1----->", imgUrl.value, response.data.url); |
|
|
|
emits("updateVideoUrl", response.data.url); |
|
|
|
props.data.control.videoMsg[videoIndex.value].url = response.data.url; |
|
|
|
props.data.control.videoMsg[videoIndex.value].videoReady = true; |
|
|
|
props.data.control.videoMsg[videoIndex.value].CreatedAt = response.data.CreatedAt; |
|
|
|
props.data.control.videoMsg[videoIndex.value].UpdatedAt = response.data.UpdatedAt; |
|
|
|
props.data.control.videoMsg[videoIndex.value].fileSize = response.data.fileSize; |
|
|
|
props.data.control.videoMsg[videoIndex.value].id = response.data.id; |
|
|
|
props.data.control.videoMsg[videoIndex.value].key = response.data.key; |
|
|
|
props.data.control.videoMsg[videoIndex.value].name = response.data.name; |
|
|
|
props.data.control.videoMsg[videoIndex.value].physicspath = response.data.physicspath; |
|
|
|
props.data.control.videoMsg[videoIndex.value].size = response.data.size; |
|
|
|
props.data.control.videoMsg[videoIndex.value].tag = response.data.tag; |
|
|
|
props.data.control.videoMsg[videoIndex.value].type = response.data.type; |
|
|
|
//props.modelValue = response.data.url; |
|
|
|
}; |
|
|
|
//上传失败钩子 |
|
|
|
const videoUploadErr = ( |
|
|
|
error: Error, |
|
|
|
uploadFile: UploadFile, |
|
|
|
uploadFiles: UploadFiles |
|
|
|
) => { |
|
|
|
alert("上传失败,请重试"); |
|
|
|
// console.log("上传失败"+error); |
|
|
|
}; |
|
|
|
|
|
|
|
const handleExceed: UploadProps["onExceed"] = (files) => { |
|
|
|
upload.value!.clearFiles(); |
|
|
|
const file = files[0] as UploadRawFile; |
|
|
|
file.uid = genFileId(); |
|
|
|
upload.value!.handleStart(file); |
|
|
|
}; |
|
|
|
|
|
|
|
const attrs = useAttrs(); |
|
|
|
const types = attrs.types; |
|
|
|
|
|
|
|
</script> |
|
|
|
<template> |
|
|
|
<div class="butBox" @click="openVideo">按钮</div> |
|
|
|
<div> |
|
|
|
<video |
|
|
|
<!-- <video |
|
|
|
|
|
|
|
:loop="data?.control.videoMsg[0].loop" |
|
|
|
:autoplay="data?.control.videoMsg[0].videoAutoPlay" |
|
|
|
@ -80,7 +156,29 @@ const imgUrl = computed({ |
|
|
|
<source :src="imgUrl" type="video/mp4"> |
|
|
|
|
|
|
|
您的浏览器不支持 HTML5 标签 |
|
|
|
</video> |
|
|
|
</video> --> |
|
|
|
<video |
|
|
|
:src="imgUrl" |
|
|
|
:loop="data?.control.videoMsg[0].loop" |
|
|
|
:autoplay="data?.control.videoMsg[0].videoAutoPlay" |
|
|
|
:style="getFormItemInputStyle(configStyle, 2)" |
|
|
|
controls |
|
|
|
></video> |
|
|
|
|
|
|
|
<el-upload |
|
|
|
v-if="types!=3" |
|
|
|
class="avatar-uploader" |
|
|
|
:action="uploadUrl" |
|
|
|
:before-remove="beforeRemove" |
|
|
|
:on-success="videoUploadOk" |
|
|
|
:show-file-list="false" |
|
|
|
:on-error="videoUploadErr" |
|
|
|
:on-exceed="handleExceed" |
|
|
|
accept=".mp4,.MOV,.WMV,.FLV,.AVI,.AVCHD,.WebM,.MKV,.rmvb" |
|
|
|
> |
|
|
|
<!-- <el-icon class="avatar-uploader-icon" ><Plus /></el-icon> --> |
|
|
|
<div style="display: flex; justify-content: center; max-width: 40px; font-weight: 600;"><SvgIcon icon-class="videoupload" :size="'40px'" /></div> |
|
|
|
</el-upload> |
|
|
|
|
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|