ShutongInterconnectedChemicalCloudPlatform/src/components/DesignForm/public/expand/lowcodeImage.vue

<!--
@ 作者: 秦东
@ 时间: 2024-09-12 10:44:17
@ 备注: 图片
-->
<script lang="ts" setup>
import {
  AnalysisCss,
  AnalysisInputCss,
} from "@/components/DesignForm/public/form/calculate/cssInfo.ts";
import errimg from "@/assets/404_images/imgNotFound.png";
import { uploadUrl, getRequest } from "@/api/DesignForm";

const props = withDefaults(
  defineProps<{
    modelValue?: string;
    disabled?: boolean;
    tablekey?: Object;
    data?: Object;
    formTableSetUp?: Object;
    imgUrl?: string;
  }>(),
  {}
);
const emits = defineEmits<{
  (e: "update:modelValue", value: string): void;
}>();
const value = computed({
  get: () => {
    if (props.data.control.imgUrl == "") {
      return props.modelValue ? props.modelValue : errimg;
    } else {
      return props.data.control.imgUrl;
    }
  },
  set: (newVal: any) => {
    emits("update:modelValue", newVal);
    return newVal;
  },
});
//组件css部分
const configStyle = computed(() => {
  return props.data.styles || {};
});

const imgLoading = ref(false);
const imgPath = ref(errimg);

//文件上传的格式与大小
const beforeAvatarUpload = (rawFile) => {
  imgLoading.value = true;
  // console.log("文件上传的格式与大小",rawFile.type)
  let imgType = ["image/jpeg", "image/jpg", "image/png", "image/gif", "image/svg"];
  if (!imgType.includes(rawFile.type)) {
    ElMessage.error("您上传的不是图片!");
    imgLoading.value = false;
    return false;
  } else if (rawFile.size / 1024 / 1024 > 200) {
    ElMessage.error("您上传到额图片大于 200MB!");
    imgLoading.value = false;
    return false;
  }
  return true;
};
//上传成功回调
const handleAvatarSuccess = (response, uploadFile) => {
  // imageUrl.value = URL.createObjectURL(uploadFile.raw!)
  // console.log("上传成功回调", value);

  emits("update:modelValue", response.data.url);
  imgPath.value = response.data.url;
  value.value = response.data.url;
  // console.log("上传成功回调---------->", value.value);
  // 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){
  // 			// value.value = response.data.url
  // 			// item.control.link = response.data.url
  // 			value.set(response.data.url)
  // 			emits('update:modelValue', response.data.url)
  // 			console.log("上传成功回调------>",response.data.url)
  // 		}
  // 	})
  // }
  // props.setimgurl=response.data.url
  // emits("update:imgUrl",response.data.url)
  // console.log("上传成功回调------>",url.value)
  // emits("updateCont",response.data.url)

  imgLoading.value = false;
};
const getFormItemInputStyle = (ele: any, sty: number) => {
  if (ele?.inputStyle) {
    // console.log("返回栅格宽度4", AnalysisInputCss(ele?.inputStyle, sty));
    return AnalysisInputCss(ele?.inputStyle, sty);
  }
};
</script>
<template>
  <el-upload
    v-bind="$props"
    class="upload-demo"
    :action="uploadUrl"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
    v-loading="imgLoading"
  >
    <!-- <img referrerpolicy="no-referrer" :src="url" :style="styleObject" :fit="fit" :class="[boderAndShadowClassIsActive ? boderAndShadowClass : '', radiusClassIsActive ? radiusClass : '',mp, floatFlag ? floatStyle : '']"  /> -->
    <img
      v-if="value"
      :src="value"
      class="avatar"
      :style="getFormItemInputStyle(configStyle, 2)"
    />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
</template>
<style lang="scss" scoped>
.upload-demo {
  img {
    min-width: 150px;
    max-width: 300px;
  }
}
.avatar {
  width: 150px;
}
</style>