4 changed files with 324 additions and 33 deletions
@ -0,0 +1,174 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-09-17 10:44:30 |
|||
@ 备注: 上传组件 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { AnalysisCss,AnalysisInputCss } from '@/components/DesignForm/public/form/calculate/cssInfo' |
|||
import { uploadUrl,getRequest } from '@/api/DesignForm' |
|||
import { |
|||
formatNumber, |
|||
objectToArray, |
|||
constControlChange, |
|||
constSetFormOptions, |
|||
constFormProps, |
|||
constGetControlByName |
|||
} from '@/api/DesignForm/utils' |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
modelValue?: string |
|||
disabled?: boolean |
|||
action?: string |
|||
name?: string |
|||
fileList?: Object |
|||
control?: Object |
|||
config?: Object |
|||
data?: Object |
|||
}>(), |
|||
{} |
|||
) |
|||
const emits = defineEmits<{ |
|||
(e: 'update:modelValue', value: string): void |
|||
}>() |
|||
const value = computed({ |
|||
get: () => { |
|||
console.log("图片上传处理-112->",props.modelValue) |
|||
// if(props.modelValue != ""){ |
|||
// return props.modelValue.split(","); |
|||
// }else{ |
|||
// return props.modelValue |
|||
// } |
|||
return props.modelValue |
|||
}, |
|||
set: (newVal: any) => { |
|||
emits('update:modelValue', newVal) |
|||
return newVal |
|||
}, |
|||
}); |
|||
const formProps = inject(constFormProps, {}) as any |
|||
// ------------图片上传处理----------- |
|||
const fileList = computed<any>(() => { |
|||
// const imgVal = formProps.value.model[props.data.name] |
|||
console.log("图片上传处理-2->",value.value) |
|||
const imgVal = value.value |
|||
console.log("图片上传处理-->",imgVal) |
|||
if (imgVal && typeof imgVal === 'string') { |
|||
// console.log("图片上传处理-2->",imgVal) |
|||
const temp: any = [] |
|||
imgVal.split(',').forEach((item: string) => { |
|||
// console.log("图片上传处理-3->",item) |
|||
temp.push({ |
|||
name: item, |
|||
url: item |
|||
}) |
|||
}) |
|||
return temp |
|||
} |
|||
return imgVal || [] // 这样可支持默认值为array([name:'',url:''这种形式]) |
|||
}) |
|||
//解析指定样式 |
|||
const getFormItemInputStyle = (ele: any,sty:number) => { |
|||
if(ele?.inputStyle){ |
|||
console.log("返回栅格宽度4",AnalysisInputCss(ele?.inputStyle,sty)) |
|||
return AnalysisInputCss(ele?.inputStyle,sty) |
|||
} |
|||
} |
|||
//组件css部分 |
|||
const configStyle = computed(() => { |
|||
return props.data.styles || {} |
|||
}) |
|||
// 从列表移除 |
|||
const uploadRemove = (uploadFile: any, uploadFiles: any) => { |
|||
const oldList: any = [] |
|||
fileList.value.forEach((item: any) => { |
|||
if (item.url !== uploadFile.url) { |
|||
oldList.push(item.url) |
|||
} |
|||
}) |
|||
value.value = oldList |
|||
updateModel(oldList.join(',')) |
|||
// props.control.value.onRemove && props.control.value.onRemove(uploadFile, uploadFiles) |
|||
// todo 需从服务端删除已上传图片时，这里需要发删除请求接口 |
|||
} |
|||
// 上传错误 |
|||
const uploadError = (err: any, file: any, fileList: any) => { |
|||
// console.log('uploadError') |
|||
ElMessage.error(file.name + '上传失败') |
|||
props.control.value.onError && props.control.value.onError(err, file, fileList) |
|||
} |
|||
const changeEvent = inject(constControlChange, '') as any |
|||
const updateModel = (val: any) => { |
|||
console.log("图片上传处理-111->",val) |
|||
value.value = val |
|||
let controlAttribute = "" |
|||
if(props.data.control){ |
|||
if(props.data.control.type){ |
|||
controlAttribute = props.data.control.type |
|||
} |
|||
} |
|||
// changeEvent && |
|||
// changeEvent({ |
|||
// key: props.data.name, |
|||
// value: val, |
|||
// data: props.data, |
|||
// tProp: props.tProp, |
|||
// type: props.data.type, |
|||
// attribute: controlAttribute |
|||
// }) |
|||
} |
|||
// 上传成功时 |
|||
const uploadSuccess = (response: any, uploadFile: any, uploadFiles: any) => { |
|||
// console.log("response==>",response) |
|||
// console.log("uploadFile==>",uploadFile) |
|||
// console.log("uploadFiles==>",uploadFiles) |
|||
const oldList = [] |
|||
fileList.value.forEach((item: any) => { |
|||
oldList.push(item.url) |
|||
}) |
|||
// oldList.push(response.path) |
|||
oldList.push(response.data.url) |
|||
|
|||
updateModel(oldList.join(',')) |
|||
|
|||
// props.control.value.onSuccess && |
|||
// props.control.value.onSuccess(response, uploadFile, uploadFiles) |
|||
// console.log("uploadSuccess===>",control.value) |
|||
// console.log("uploadSuccess=fileList==>",fileList) |
|||
} |
|||
</script> |
|||
<template> |
|||
<div> |
|||
<el-upload |
|||
v-bind="props.control" |
|||
:action="uploadUrl" |
|||
:name="props.name" |
|||
:class="{limit: props.control.limit <= fileList.length}" |
|||
:file-list="fileList as any" |
|||
:style="getFormItemInputStyle(configStyle,2)" |
|||
:on-error="uploadError" |
|||
:on-success="uploadSuccess" |
|||
:on-remove="uploadRemove" |
|||
> |
|||
<i class="icon-plus" v-if="props.control?.listType=='picture-card'"></i> |
|||
<el-button type="primary" plain v-else-if="props.control?.listType=='picture'"> |
|||
<span v-if="props.config?.btnText">{{ props.config?.btnText }} </span> |
|||
<span class="fa fa-plus" v-else></span> |
|||
</el-button> |
|||
<template v-else> |
|||
<el-button type="primary" plain v-if="props.config?.btnText"> |
|||
{{ props.config?.btnText }} |
|||
</el-button> |
|||
<i class="icon-plus" v-else></i> |
|||
</template> |
|||
<template #tip v-if="props.config?.tip"> |
|||
<div class="el-upload__tip"> |
|||
{{ props.config?.tip }} |
|||
</div> |
|||
</template> |
|||
</el-upload> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,106 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-09-17 14:57:49 |
|||
@ 备注: 解析上传文件问题 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { AnalysisCss,AnalysisInputCss } from '@/components/DesignForm/public/form/calculate/cssInfo' |
|||
const props = defineProps({ |
|||
imgList:{ |
|||
type:String, |
|||
default:"" |
|||
}, |
|||
data:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
control:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
} |
|||
}) |
|||
const imgStr = ref<String>(props.imgList) |
|||
//组件css部分 |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-09-17 15:02:50 |
|||
@ 功能: 文件列表 |
|||
*/ |
|||
// const imgAry = () => { |
|||
// console.log("文件列表====>",imgStr.value) |
|||
// if(imgStr.value != ""){ |
|||
// // let zj = imgStr.value |
|||
// // let img = zj.Split(","); |
|||
// let arr = imgStr.value.match(/[^,]+/g); |
|||
// console.log("文件列表",arr) |
|||
// return arr |
|||
// }else{ |
|||
// return [] |
|||
// } |
|||
// } |
|||
const imgAry =computed({ |
|||
get: () => { |
|||
if(props.imgList != "" && props.imgList != null && props.imgList != undefined && props.imgList != "undefined"){ |
|||
// let zj = props.imgList |
|||
// let img = zj.Split(","); |
|||
let arr = props.imgList.match(/[^,]+/g); |
|||
console.log("文件列表",arr) |
|||
return arr |
|||
}else{ |
|||
return [] |
|||
} |
|||
} |
|||
}) |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
const listType = () => { |
|||
if(props.control.listType){ |
|||
return props.control.listType |
|||
}else{ |
|||
return "text" |
|||
} |
|||
} |
|||
//解析指定样式 |
|||
const getFormItemInputStyle = (ele: any,sty:number) => { |
|||
if(ele?.inputStyle){ |
|||
console.log("返回栅格宽度4",AnalysisInputCss(ele?.inputStyle,sty)) |
|||
return AnalysisInputCss(ele?.inputStyle,sty) |
|||
} |
|||
} |
|||
const configStyle = computed(() => { |
|||
return props.data.styles || {} |
|||
}) |
|||
</script> |
|||
<template> |
|||
<div> |
|||
<div v-if="props.control.listType=='picture-card'"> |
|||
<div v-for="item in imgAry"> |
|||
<el-image class="imgCss" :style="getFormItemInputStyle(configStyle,2)" :src="item" :fit="fit" :preview-src-list="imgAry" /> |
|||
</div> |
|||
</div> |
|||
<div v-else-if="props.control.listType=='picture'"> |
|||
<div v-for="item in imgAry"> |
|||
<el-image class="imgCss" :style="getFormItemInputStyle(configStyle,2)" :src="item" :fit="fit" :preview-src-list="imgAry" /> |
|||
</div> |
|||
</div> |
|||
<div v-else> |
|||
<div v-for="item in imgAry"> |
|||
<el-link :underline="false" :href="item" target="_blank">{{ item }}</el-link><br> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.imgCss{ |
|||
width: 100px; |
|||
height: 100px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue