|
|
|
@ -10,6 +10,13 @@ import { |
|
|
|
} 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<{ |
|
|
|
@ -38,6 +45,22 @@ const value = computed({ |
|
|
|
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 || {}; |
|
|
|
@ -47,7 +70,7 @@ const imgLoading = ref(false); |
|
|
|
const imgPath = ref(errimg); |
|
|
|
|
|
|
|
//文件上传的格式与大小 |
|
|
|
const beforeAvatarUpload = (rawFile) => { |
|
|
|
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"]; |
|
|
|
@ -63,7 +86,7 @@ const beforeAvatarUpload = (rawFile) => { |
|
|
|
return true; |
|
|
|
}; |
|
|
|
//上传成功回调 |
|
|
|
const handleAvatarSuccess = (response, uploadFile) => { |
|
|
|
const handleAvatarSuccess = (response: { data: { url: string; }; }, uploadFile: any) => { |
|
|
|
// imageUrl.value = URL.createObjectURL(uploadFile.raw!) |
|
|
|
// console.log("上传成功回调", value); |
|
|
|
|
|
|
|
@ -96,9 +119,90 @@ const getFormItemInputStyle = (ele: any, sty: number) => { |
|
|
|
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> |
|
|
|
<el-upload |
|
|
|
<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" |
|
|
|
@ -107,24 +211,102 @@ 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 v-else class="avatar-uploader-icon"><Plus /></el-icon> |
|
|
|
<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" 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> |
|
|
|
|
|
|
|
|
|
|
|
<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" scoped> |
|
|
|
.upload-demo { |
|
|
|
<style lang="scss" > |
|
|
|
/* .upload-demo { |
|
|
|
img { |
|
|
|
min-width: 150px; |
|
|
|
max-width: 300px; |
|
|
|
} |
|
|
|
} |
|
|
|
} */ |
|
|
|
.avatar { |
|
|
|
width: 150px; |
|
|
|
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> |
|
|
|
|
