|
|
@ -1,21 +1,30 @@ |
|
|
<template> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<img referrerpolicy="no-referrer" :src="url" :style="styleObject" :fit="fit" :class="[boderAndShadowClassIsActive ? boderAndShadowClass : '', radiusClassIsActive ? radiusClass : '',mp, floatFlag ? floatStyle : '']" @click="handleLink(props.data?.control)" /> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<script setup > |
|
|
<script setup > |
|
|
|
|
|
|
|
|
import errimg from '@/assets/404_images/imgNotFound.png' |
|
|
import errimg from '@/assets/404_images/imgNotFound.png' |
|
|
|
|
|
import { uploadUrl,getRequest } from '@/api/DesignForm' |
|
|
|
|
|
|
|
|
const props = defineProps({ |
|
|
const props = defineProps({ |
|
|
// eslint-disable-next-line vue/require-default-prop |
|
|
tablekey:{ |
|
|
|
|
|
type: Object, |
|
|
|
|
|
default(){ |
|
|
|
|
|
return {} |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
data: { |
|
|
data: { |
|
|
type: Object, |
|
|
type: Object, |
|
|
} |
|
|
default(){ |
|
|
|
|
|
return {} |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
formTableSetUp:{ |
|
|
|
|
|
type: Object, |
|
|
|
|
|
default(){ |
|
|
|
|
|
return {} |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
imgUrl:{ |
|
|
|
|
|
type:String, |
|
|
|
|
|
default:"" |
|
|
|
|
|
} |
|
|
}) |
|
|
}) |
|
|
/* |
|
|
/* |
|
|
|
|
|
|
|
|
@ -23,11 +32,15 @@ const props = defineProps({ |
|
|
let styleObject = { |
|
|
let styleObject = { |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
let url = props.data?.control.imgUrl |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const emits = defineEmits(["updateCont"]); |
|
|
|
|
|
|
|
|
|
|
|
const url = ref(props.data?.control.imgUrl?props.data?.control.imgUrl:props.imgUrl) |
|
|
if(props.data?.control.imgUrl===''){ |
|
|
if(props.data?.control.imgUrl===''){ |
|
|
url = errimg |
|
|
url.value = errimg |
|
|
}else{ |
|
|
}else{ |
|
|
url = props.data?.control.imgUrl |
|
|
url.value = props.data?.control.imgUrl |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const fitNum = props.data?.control.fit |
|
|
const fitNum = props.data?.control.fit |
|
|
@ -122,7 +135,76 @@ function handleLink(item){ |
|
|
window.open(url, '_blank') |
|
|
window.open(url, '_blank') |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//文件上传的格式与大小 |
|
|
|
|
|
const beforeAvatarUpload = (rawFile) => { |
|
|
|
|
|
// console.log("文件上传的格式与大小",rawFile.type) |
|
|
|
|
|
let imgType = ['image/jpeg','image/jpg','image/png','image/gif','image/svg'] |
|
|
|
|
|
if (!imgType.includes(rawFile.type)) { |
|
|
|
|
|
ElMessage.error('您上传的不是图片!') |
|
|
|
|
|
return false |
|
|
|
|
|
} else if (rawFile.size / 1024 / 1024 > 200) { |
|
|
|
|
|
ElMessage.error('您上传到额图片大于 200MB!') |
|
|
|
|
|
return false |
|
|
|
|
|
} |
|
|
|
|
|
return true |
|
|
|
|
|
} |
|
|
|
|
|
//上传成功回调 |
|
|
|
|
|
const handleAvatarSuccess = ( |
|
|
|
|
|
response, |
|
|
|
|
|
uploadFile |
|
|
|
|
|
) => { |
|
|
|
|
|
// imageUrl.value = URL.createObjectURL(uploadFile.raw!) |
|
|
|
|
|
// console.log("上传成功回调",response,uploadFile) |
|
|
|
|
|
url.value = response.data.url |
|
|
|
|
|
let oldFormSetUp = props.formTableSetUp |
|
|
|
|
|
if(props.formTableSetUp && props.formTableSetUp.list && props.formTableSetUp.list.length > 0){ |
|
|
|
|
|
oldFormSetUp.list.forEach((item)=>{ |
|
|
|
|
|
if(item.name && item.name == props.data.name){ |
|
|
|
|
|
item.control.imgUrl = response.data.url |
|
|
|
|
|
item.control.link = response.data.url |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
// props.setimgurl=response.data.url |
|
|
|
|
|
// emits("update:setimgurl",response.data.url) |
|
|
|
|
|
// console.log("上传成功回调------>",oldFormSetUp) |
|
|
|
|
|
emits("updateCont",response.data.url) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
watch(() =>props.imgUrl,(val)=>{ |
|
|
|
|
|
// console.log("props.imgUrl.value ",props.data.control.link && (props.data.control.link == "" || props.data.control.link == "undefined") ) |
|
|
|
|
|
if(props.imgUrl && props.imgUrl != "" && props.imgUrl != "undefined"){ |
|
|
|
|
|
url.value = props.imgUrl |
|
|
|
|
|
if((props.data.control.link == "" || props.data.control.link == "undefined") ){ |
|
|
|
|
|
props.data.control.link = props.imgUrl |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
},{ deep: true }); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
</script> |
|
|
|
|
|
<template> |
|
|
|
|
|
<div> |
|
|
|
|
|
<img v-if="url!=errimg" referrerpolicy="no-referrer" :src="url" :style="styleObject" :fit="fit" :class="[boderAndShadowClassIsActive ? boderAndShadowClass : '', radiusClassIsActive ? radiusClass : '',mp, floatFlag ? floatStyle : '']" @click="handleLink(props.data?.control)" /> |
|
|
|
|
|
<el-upload |
|
|
|
|
|
v-else |
|
|
|
|
|
class="upload-demo" |
|
|
|
|
|
:action="uploadUrl" |
|
|
|
|
|
:limit="1" |
|
|
|
|
|
:show-file-list="false" |
|
|
|
|
|
:on-success="handleAvatarSuccess" |
|
|
|
|
|
:before-upload="beforeAvatarUpload" |
|
|
|
|
|
> |
|
|
|
|
|
<img referrerpolicy="no-referrer" :src="url" :style="styleObject" :fit="fit" :class="[boderAndShadowClassIsActive ? boderAndShadowClass : '', radiusClassIsActive ? radiusClass : '',mp, floatFlag ? floatStyle : '']" /> |
|
|
|
|
|
</el-upload> |
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style> |
|
|
<style> |
|
|
.boderAndShadow { |
|
|
.boderAndShadow { |
|
|
|