图片

src/components/lowCode/assistant/lowcodeImage.vue

@@ -8,7 +8,7 @@ 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 { ref,useAttrs,computed,onMounted } from 'vue'
 import { Plus } from '@element-plus/icons-vue'
 
 import type { UploadProps, UploadUserFile } from 'element-plus'
@@ -180,10 +180,76 @@ const handleAvatarSuccess1 = (response: any, uploadFile: any) => {
 
 const attrs = useAttrs()
 
+onMounted(()=>{
+	setTimeout(()=>{
+		if(attrs.types==2){
+			console.log(value.value)
+			props.data.control.uploadedImgs = completionImageDetails(value.value)
+		}
+	},100)
+	
+})
 
 
+function completionImageDetails(urlString:string) {
+            // 分割URL字符串
+            const urls = urlString.split(',').map(url => url.trim()).filter(url => url);
+            
+            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;
+                
+                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: "成功！"
+                    }
+                };
+            });
+        }
+
+	// 判断是否为移动设备的函数
+	const checkIsMobile = () => {
+		if (typeof navigator === 'undefined') return false
+		
+		// 匹配常见的移动设备关键词
+		const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i
+		//console.log(navigator.userAgent)
+		return mobileRegex.test(navigator.userAgent)
+	}
+
 </script>
 <template>
+	<!-- {{ checkIsMobile() }} -->
 	<img
       v-if="props.data.control.useDefaultImg"
       :src="value"
@@ -205,18 +271,20 @@ const attrs = useAttrs()
 
 
 
-	<div v-if="!props.data.control.useDefaultImg&&attrs.types!=3&&props.data.control.onSiteShot&&props.data.control.onSiteShot==''" style="width: 100%; ">
+	<div v-if="!props.data.control.useDefaultImg&&attrs.types!=3&&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>
+		<el-button  @click="selectFile" style="color:grey;font-weight: bolder;margin-top: 5px;margin-bottom: 5px;"><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>
+		<el-button v-if="attrs.types!=2&&checkIsMobile()"  @click="selectFile" style="color:grey;font-weight: bolder;"><el-icon style="margin-right: 7px;font-weight: bolder;"><Plus /></el-icon>拍照上传</el-button>
+		<div v-else style="margin-top: 1.2%;margin-left: 1.1%;" >不可修改! 仅允许现场手机拍照上传</div>
 	</div>
 
 	<el-upload
 		ref="fileUpload"
-		v-if="!props.data.control.useDefaultImg" 
+		v-if="!props.data.control.useDefaultImg&&(attrs.types!=2&&props.data.control.onSiteShot=='1')" 
+		class="upload-demo"
 		:auto-upload="true"
 		v-model:file-list="props.data.control.uploadedImgs"
 		:action="uploadUrl"
@@ -243,7 +311,7 @@ const attrs = useAttrs()
 	</el-dialog>
 
 	<!-- 详情页略缩图列表 -->
-<div v-if ="!props.data.control.useDefaultImg&&attrs.types==3" v-for="url in valueArr"  class="demo-image__preview">
+<div v-if ="!props.data.control.useDefaultImg&&attrs.types!=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"
@@ -304,4 +372,9 @@ const attrs = useAttrs()
     width: var(--el-dialog-width,50%);
 }
 
+
+.upload-demo .el-upload-list__item.is-success:focus:not(:hover){
+    display: none !important;
+}
+
 </style>