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";
import { ref,useAttrs } from 'vue'
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps, UploadUserFile } from 'element-plus'


const attrs = useAttrs()

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;
  },
});

/* const value = computed(() => {
  if(props.data.control.useDefaultImg){
    return props.data.control.imgUrl
  }else{
    return props.modelValue ? props.modelValue : errimg;
  }
}); */

onMounted(()=>{
  if(props.data.control.useDefaultImg){
    emits("update:modelValue", props.data.control.imgUrl);
  }else{

  }
})
//组件css部分
const configStyle = computed(() => {
  return props.data.styles || {};
});

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

//文件上传的格式与大小
const beforeAvatarUpload = (rawFile: { type: string; size: number; }) => {
  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: { data: { url: string; }; }, uploadFile: any) => {
  // 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);
  }
};

const showUpload = computed(() => {
  if(!value||value.value == ""||value.value=="/src/assets/404_images/imgNotFound.png"){
    return true
  }else{
    return false
  }
});


const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)

  let arrStr = ''
  uploadFiles.forEach((element) => {
      //console.log(element.response.data.url)
      arrStr+= element.response.data.url+","
  });

  arrStr = arrStr.slice(0, -1);

  console.log(arrStr)


  emits("update:modelValue", arrStr);
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const valueArr = computed(()=>{
  return value.value.split(',');
})



//上传成功回调
const handleAvatarSuccess1 = (response: any, uploadFile: any) => {
  // imageUrl.value = URL.createObjectURL(uploadFile.raw!)
  // console.log("上传成功回调", value);
  /* console.log(response.data.url)
  console.log(uploadFile) */

  let arrStr = ''
  props.data.control.uploadedImgs.forEach((element: { url: any; }) => {
      //console.log(element.response.data.url)
      arrStr+= element.response.data.url+","
  });

  arrStr = arrStr.slice(0, -1);

  console.log(arrStr)


  emits("update:modelValue", arrStr);
  /*imgPath.value = response.data.url;
  value.value = response.data.url; */
  imgLoading.value = false;
};

const fileUpload = ref(null);
function selectFile(){
  //fileUpload.value.$refs.input.click();
  //console.log()
  //fileUpload.handleStart();
  fileUpload.value.$el.querySelector('input[type="file"]').click();
}
</script>
<template>
  <img
      v-if="props.data.control.useDefaultImg"
      :src="value"
      class="avatar"
      :style="getFormItemInputStyle(configStyle, 2)"
    />
    <!-- <img referrerpolicy="no-referrer" :src="url" :style="styleObject" :fit="fit" :class="[boderAndShadowClassIsActive ? boderAndShadowClass : '', radiusClassIsActive ? radiusClass : '',mp, floatFlag ? floatStyle : '']"  /> -->
    <!-- <div></div> -->


  <!-- <el-upload
    v-bind="$props"
    class="upload-demo"
    :action="uploadUrl"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
    v-loading="imgLoading"
  >
    <el-icon v-if="!props.data.control.useDefaultImg" class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload> -->

  <!-- 
    
  -->
  
  <!-- <el-upload
    v-if="!props.data.control.useDefaultImg" 
    v-model:file-list="props.data.control.uploadedImgs"
    :action="uploadUrl"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :before-upload="beforeAvatarUpload"
    v-loading="imgLoading"
    :on-success="handleAvatarSuccess1"
  >
    <el-icon><Plus /></el-icon>
  </el-upload> -->
  <div v-if="!props.data.control.useDefaultImg&&attrs.type!=4&&props.data.control.onSiteShot==''" style="width: 100%; ">

    <el-button  @click="selectFile" style="color:grey;font-weight: bolder;"><el-icon style="margin-right: 7px;font-weight: bolder;"><Plus /></el-icon>添加图片</el-button>
  </div>
  <div v-if="!props.data.control.useDefaultImg&&attrs.type!=4&&props.data.control.onSiteShot&&props.data.control.onSiteShot=='1'" style="width: 100%; color:orangered">
    
    <div v-if="attrs.type==5">仅允许现场手机拍照上传</div>
    <div v-else ><el-button  @click="selectFile" style="color:grey;font-weight: bolder;"><el-icon style="margin-right: 7px;font-weight: bolder;"><Plus /></el-icon>拍照上传</el-button></div>
  </div>
  

  <el-upload
    ref="fileUpload"
    v-if="!props.data.control.useDefaultImg" 
    :auto-upload="true"
    v-model:file-list="props.data.control.uploadedImgs"
    :action="uploadUrl"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :before-upload="beforeAvatarUpload"
    v-loading="imgLoading"
    :on-success="handleAvatarSuccess1"
    style="margin-top: 10px;"
  >
      <template #trigger>
        <div style="display: none;">
          <el-button>默认选择按钮</el-button>
        </div>
      </template>
  </el-upload>

<!-- 详情页略缩图列表 -->
<div v-if ="!props.data.control.useDefaultImg&&attrs.type==4" v-for="url in valueArr"  class="demo-image__preview">
    <el-image
      style="width: 100px; height: 100px;margin: 4px;border: #DCDFE6 1px solid; border-radius: 8px;"
      :src="url"
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
      :preview-src-list="valueArr"
      show-progress
      :initial-index="4"
      fit="cover"
    />
  </div>




  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>
<style lang="scss" >
/* .upload-demo {
  img {
    min-width: 150px;
    max-width: 300px;
  }
} */
.avatar {
  width: 100%
}

.el-upload-list--picture-card {
  --el-upload-list-picture-card-size: 109px;
}

.el-upload--picture-card {
    --el-upload-picture-card-size: 0px !important;
    align-items: center;
    background-color: var(--el-fill-color-lighter);
    border: 0px dashed var(--el-border-color-darker) !important;
    border-radius: 6px;
    box-sizing: border-box;
    cursor: none !important;
    display: inline-flex;
    height: var(--el-upload-picture-card-size);
    justify-content: center;
    vertical-align: top;
    width: var(--el-upload-picture-card-size);
}
</style>