ShutongInterconnectedChemicalCloudPlatform/src/widget/lowcodeimage/lowcodeImage.vue

<script setup >
import errimg from '@/assets/404_images/imgNotFound.png'
import { uploadUrl,getRequest } from '@/api/DesignForm'

const props = defineProps({
	tablekey:{
		type: Object,
		default(){
			return {}
		}
	},
  data: {
    type: Object,
		default(){
			return {}
		}
  },
	formTableSetUp:{
		type: Object,
		default(){
			return {}
		}
	},
	imgUrl:{
		type:String,
		default:""
	}
})
/* 
  
*/
let styleObject = {

}


const emits = defineEmits(["updateCont"]);

const url = ref(props.data?.control.imgUrl?props.data?.control.imgUrl:props.imgUrl)
if(props.data?.control.imgUrl===''){
  url.value = errimg
}else{
  url.value = props.data?.control.imgUrl
}

const fitNum = props.data?.control.fit


let fit= ''

switch (fitNum) {
  case 1:
    fit = "fill";
    break;
  case 2:
    fit = "contain";
    break;
  case 3:
    fit = "cover";
    break;
  case 4:
    fit = "none";
    break;
  case 5:
    fit = "scale-down";
    break;
}

const showMode = props.data?.control.showMode

if (showMode==='自定义像素值') {
  const pxWidth = props.data?.control.pxWidth
  const pxHeight = props.data?.control.pxHeight
  styleObject.width = pxWidth+'px';
  styleObject.height = pxHeight+'px';
}else{
  const widthPercent = props.data?.control.widthPercent
  const heightPercent = props.data?.control.heightPercent
  styleObject.width = widthPercent+'%';
  styleObject.height = heightPercent+'%';
}

const radius = props.data?.control.radius
const radiusClass = ref('');
let radiusClassIsActive = false
let radiusNum = props.data?.control.radiusNum+'px'
if(radius === true ){
  radiusClass.value = 'radius'
  radiusClassIsActive = true
}

const mt = props.data?.control.mt+'px'
const mb = props.data?.control.mb+'px'
const ml = props.data?.control.ml+'px'
const mr = props.data?.control.mr+'px'
const pt = props.data?.control.pt+'px'
const pb = props.data?.control.pb+'px'
const pl = props.data?.control.pl+'px'
const pr = props.data?.control.pr+'px'
const mp = ref('mp')

const floatStyle = ref('floatStyle')
const floatFlag = props.data?.control.floatFlag
const floatValue = props.data?.control.floatValue

const boderAndShadowClass = ref('');
const boderAndShadow = props.data?.control.boderAndShadow
let boderAndShadowClassIsActive = false
if(boderAndShadow === true ){
  boderAndShadowClass.value = 'boderAndShadow'
  boderAndShadowClassIsActive = true
}

function handleLink(item){
  // console.log("handleLink")
  let url = "";
  let urlStart = 'http://'
  // http://  7
  //https://  8
  if (item.link.length < 7) {
    if (item.link == '') {
      alert("未配置跳转地址")
      return
    }
    url = urlStart + "" + item.link
  } else {
    const linkStartComplete1 = item.link.startsWith("http://")
    const linkStartComplete2 = item.link.startsWith("https://")
    if (linkStartComplete1 || linkStartComplete2) {
      url = item.link
    } else {
      url = urlStart + "" + item.link
    }
  }
  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>
<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>
.boderAndShadow {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.radius {
  border-radius: v-bind(radiusNum);
}
.mp {
  margin-top: v-bind(mt);
  margin-bottom: v-bind(mb);
  margin-left:v-bind(ml);
  margin-right:v-bind(mr);
  padding-top: v-bind(pt);
  padding-bottom: v-bind(pb);
  padding-left: v-bind(pl);
  padding-right: v-bind(pr);
}
.floatStyle {
  float: v-bind(floatValue);
}
</style>