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'
import { useRoute } from 'vue-router';

import { getCurrentInstance } from 'vue';

const getAncestorComponentNames = () => {
  const ancestorNames = [];
  let currentInstance = getCurrentInstance();
  
  while (currentInstance?.parent) {
    currentInstance = currentInstance.parent;
    ancestorNames.push(currentInstance.type.name || 'UnknownComponent');
  }
  
  return ancestorNames;
};
const ancestors = getAncestorComponentNames();

function hasELCard(ancestors:any) {
  // 先判断入参是否为数组，避免非数组参数导致错误
  if (!Array.isArray(ancestors)) {
    return false;
  }
  
  // 检查数组中是否包含"ELCard"
  return ancestors.includes("ElCard");
}

// 获取路由对象
const route = useRoute();



//const attrs = useAttrs()

const props = withDefaults(
  defineProps<{
    modelValue?: string;
    disabled?: boolean;
    tablekey?: Object;
    data?: Object;
    formTableSetUp?: Object;
    imgUrl?: string;
    type: 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;
      //return props.modelValue ? props.modelValue : '';
    } 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;
  }
}); */
const toShow = ref(false)
onMounted(()=>{
  if(props.data.control.useDefaultImg){
    emits("update:modelValue", props.data.control.imgUrl);
  }else{

  }

  setTimeout(()=>{
    if(props.type=='1'){
      /* if(props.data.control.useDefaultImg){
        emits("update:modelValue", props.data.control.imgUrl);
      } */
    }else{
      if(props.type==2&&hasELCard(ancestors)){
        if(value.value=="/src/assets/404_images/imgNotFound.png"){
          
        }else{
          props.data.control.uploadedImgs = completionImageDetails(value.value)
          if(props.data.control.useDefaultImg==false&&props.data.control.onSiteShot==""){
            toShow.value = true
          }
        }
        
      }
    }
  },100)
})

function completionImageDetails(urlString:string) {
            // 分割URL字符串
            const urls = urlString.split(',').map(url => url.trim()).filter(url => url);
            //console.log(urls)
            if (urls.length === 0) {
                /* throw new Error('未提供有效的图片URL'); */
                
                return {}
            }
            
            return urls.map(url => {
                // 提取文件名
                const fileName = url.substring(url.lastIndexOf('/') + 1);
                
                // 提取文件扩展名
                const fileExtension = fileName.substring(fileName.lastIndexOf('.'));
                
                // 生成本年的毫秒级时间戳
                const now = new Date();
                const startOfYear = new Date(now.getFullYear(), 0, 1);
                const timestamp = startOfYear.getTime() + Math.floor(Math.random() * (now.getTime() - startOfYear.getTime()));
                
                // 生成18位随机数字ID
                const randomId = Math.floor(Math.random() * 9e17) + 1e17;
                if(url=="/src/assets/404_images/imgNotFound.png"){
                  return {}
                }else{
                    return {
                        name: fileName,
                        percentage: 100,
                        status: "success",
                        uid: timestamp,
                        url: url,
                        response: {
                            code: 0,
                            data: {
                                id: randomId,
                                key: "",
                                name: fileName,
                                tag: fileExtension,
                                url: url,
                                type: 1
                            },
                            msg: "成功！"
                        }
                    };
                }
                
                
                
            });
        }


//组件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="(!hasELCard(ancestors))&&props.data.control.useDefaultImg&&props.type==5"
        :src="value"
        class="avatar"
        :style="getFormItemInputStyle(configStyle, 2)"
      />
    

  <img
        v-if="props.data.control.useDefaultImg&&props.type==4"
        :src="props.modelValue"
        class="avatar"
        :style="getFormItemInputStyle(configStyle, 2)"
      />
  
  <el-upload
    v-if="props.type!=4&&props.type!=5"
    v-bind="$props"
    class="upload-demo"
    :action="uploadUrl"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
    v-loading="imgLoading"
  >
    <img
        v-if="props.data.control.useDefaultImg"
        :src="props.modelValue"
        class="avatar"
        :style="getFormItemInputStyle(configStyle, 2)"
      />
  </el-upload>
    <!-- <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&&props.type!=4&&props.data.control.onSiteShot==''" style="width: 100%; padding-bottom: 2px;">

    <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&&props.type!=4&&props.data.control.onSiteShot&&props.data.control.onSiteShot=='1'" style="width: 100%; color:orangered;padding-top: 4px !important;padding-bottom: 5px;">
    
    <div v-if="props.type!=5&&hasELCard(ancestors)"><span v-if="props.type==2">不可修改 </span>仅允许现场手机拍照上传</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"
    class="upload-demo"
    v-if="(!props.data.control.useDefaultImg)&&props.data.control.onSiteShot==''" 
    :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)&&((props.type==2&&props.data.control.onSiteShot=='1')||props.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>


  <!-- 详情页略缩图列表 -->
<!-- <div v-if ="(!props.data.control.useDefaultImg)&&props.data.control.onSiteShot=='1'&&props.type==undefined&&hasELCard(ancestors)&&props.type!=1" 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" style="width:90%">
    <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);
}

.upload-demo .el-upload-list__item.is-success:focus:not(:hover){
    display: none !important;
}

</style>