@ -14,6 +14,36 @@ 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 ;
}
/ / 检 查 数 组 中 是 否 包 含 " E L C a r d "
return ancestors . includes ( "ElCard" ) ;
}
/ / 获 取 路 由 对 象
const route = useRoute ( ) ;
/ / c o n s t a t t r s = u s e A t t r s ( )
@ -54,14 +84,77 @@ const value = computed({
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' ) {
/ * i f ( p r o p s . d a t a . c o n t r o l . u s e D e f a u l t I m g ) {
emits ( "update:modelValue" , props . data . control . imgUrl ) ;
} * /
} else {
if ( props . type == 2 && hasELCard ( ancestors ) ) {
props . data . control . uploadedImgs = completionImageDetails ( value . value )
if ( props . data . control . useDefaultImg == false && props . data . control . onSiteShot == "" ) {
toShow . value = true
}
}
}
} , 1000 )
} )
function completionImageDetails ( urlString : string ) {
/ / 分 割 U R L 字 符 串
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 ( ) ) ) ;
/ / 生 成 1 8 位 随 机 数 字 I D
const randomId = Math . floor ( Math . random ( ) * 9 e17 ) + 1 e17 ;
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 : "成功!"
}
} ;
} ) ;
}
/ / 组 件 c s s 部 分
const configStyle = computed ( ( ) => {
return props . data . styles || { } ;
@ -193,6 +286,7 @@ function selectFile(){
}
< / script >
< template >
< el -upload
v - bind = "$props"
class = "upload-demo"
@ -248,7 +342,7 @@ function selectFile(){
< / 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" >
< div v-if ="props.type!=5" > 仅允许现场手机拍照上传 < / div >
< 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 / > < / e l - i c o n > 拍 照 上 传 < / e l - b u t t o n > < / d i v >
< / div >
@ -256,7 +350,7 @@ function selectFile(){
< el -upload
ref = "fileUpload"
class = "upload-demo"
v - if = "!props.data.control.useDefaultImg"
v - if = "( !props.data.control.useDefaultImg)&&props.data.control.onSiteShot=='' "
: auto - upload = "true"
v - model : file - list = "props.data.control.uploadedImgs"
: action = "uploadUrl"
@ -276,7 +370,7 @@ function selectFile(){
< / e l - u p l o a d >
<!-- 详情页略缩图列表 -- >
< div v -if = " ! props.data.control.useDefaultImg & & props.type = = 4 " v-for ="url in valueArr" class="demo-image__preview" >
< 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"
@ -291,6 +385,22 @@ function selectFile(){
< / 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" >