图片

src/components/lowCode/assistant/lowcodeImage.vue

@@ -8,6 +8,10 @@ import { AnalysisCss,AnalysisInputCss } from '@/api/common/cssInfo'
 import { uploadUrl } from '@/api/lowCode/form/fieldUnit'
 import { uploadFiledTinymce } from '@/api/common/public'
 import errimg from '@/assets/image/404_images/imgNotFound.png'
+import { ref,useAttrs,computed } from 'vue'
+import { Plus } from '@element-plus/icons-vue'
+
+import type { UploadProps, UploadUserFile } from 'element-plus'
 
 const props = withDefaults(
     defineProps<{
@@ -100,9 +104,93 @@ const getFormItemInputStyle = (ele: any,sty:number) => {
       return AnalysisInputCss(ele?.inputStyle,sty)
     }
 }
+
+
+const fileUpload = ref(null);
+// 添加capture="camera"属性
+        const addCaptureAttribute = () => {
+          if (fileUpload.value) {
+            const input = fileUpload.value.$el.querySelector('input[type="file"]');
+            if (input) {
+              input.setAttribute('capture', 'camera');
+              input.setAttribute('accept', 'image/*');
+            }
+          }
+        };
+function selectFile(){
+  
+  addCaptureAttribute()
+  fileUpload.value.$el.querySelector('input[type="file"]').click();
+}
+
+
+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 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 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 attrs = useAttrs()
+
+
+
 </script>
 <template>
-	<el-upload
+	<img
+      v-if="props.data.control.useDefaultImg"
+      :src="value"
+      class="avatar"
+      :style="getFormItemInputStyle(configStyle, 2)"
+    />
+	<!-- <el-upload
 		v-bind="$props"
 		class="upload-demo"
 		:action="uploadUrl"
@@ -111,11 +199,109 @@ const getFormItemInputStyle = (ele: any,sty:number) => {
 		: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  class="avatar-uploader-icon"><Plus /></el-icon>
-		<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+	</el-upload> -->
+
+
+
+	<div v-if="!props.data.control.useDefaultImg&&attrs.types!=3&&props.data.control.onSiteShot&&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.types!=3&&props.data.control.onSiteShot&&props.data.control.onSiteShot=='1'" style="width: 100%; color:orangered">
+		
+		<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>
+
+	<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>
+
+
+	
+
+	<el-dialog v-model="dialogVisible">
+		<img w-full :src="dialogImageUrl" alt="Preview Image" />
+	</el-dialog>
+
+	<!-- 详情页略缩图列表 -->
+<div v-if ="!props.data.control.useDefaultImg&&attrs.types==3" 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>
+
+
 </template>
-<style  lang='scss' scoped>
+<style  lang='scss' >
+
+.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);
+}
+.el-dialog {
+	--el-dialog-width: 98%;
+    --el-dialog-margin-top: 30vh;
+    --el-dialog-bg-color: var(--el-bg-color);
+    --el-dialog-box-shadow: var(--el-box-shadow);
+    --el-dialog-title-font-size: var(--el-font-size-large);
+    --el-dialog-content-font-size: 14px;
+    --el-dialog-font-line-height: var(--el-font-line-height-primary);
+    --el-dialog-padding-primary: 16px;
+    --el-dialog-border-radius: var(--el-border-radius-base);
+    background: var(--el-dialog-bg-color);
+    border-radius: var(--el-dialog-border-radius);
+    box-shadow: var(--el-dialog-box-shadow);
+    box-sizing: border-box;
+    margin: var(--el-dialog-margin-top,15vh) auto 50px;
+    overflow-wrap: break-word;
+    padding: var(--el-dialog-padding-primary);
+    position: relative;
+    width: var(--el-dialog-width,50%);
+}
 
 </style>