You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
251 lines
6.9 KiB
251 lines
6.9 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-13 16:51:33
|
|
@ 备注: 上传文件
|
|
-->
|
|
<script lang='ts' setup>
|
|
import { AnalysisCss,AnalysisInputCss } from '@/api/common/cssInfo'
|
|
import { uploadUrl } from '@/api/lowCode/form/fieldUnit'
|
|
import {
|
|
formatNumber,
|
|
objectToArray,
|
|
constControlChange,
|
|
constSetFormOptions,
|
|
constFormProps,
|
|
constGetControlByName
|
|
} from '@/api/lowCode/utils';
|
|
|
|
import { computed } from 'vue';
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
modelValue?: string
|
|
disabled?: boolean
|
|
action?: string
|
|
name?: string
|
|
fileList?: Object
|
|
control?: Object
|
|
config?: Object
|
|
data?: Object
|
|
types?:number
|
|
}>(),
|
|
{}
|
|
)
|
|
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)
|
|
}
|
|
|
|
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 [];
|
|
}
|
|
},
|
|
});
|
|
|
|
function openUrl1(url:string) {
|
|
|
|
window.open(url, '_blank')
|
|
|
|
}
|
|
</script>
|
|
<template><!-- {'{types}} -->
|
|
<div style="width: 100%;
|
|
display: inline;">
|
|
<el-upload
|
|
v-if="props.types!=3"
|
|
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 class="fa fa-paperclip"></i>
|
|
</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-paperclip" v-else></span>
|
|
</el-button>
|
|
<template v-else>
|
|
<el-button type="primary" plain v-if="props.config?.btnText">
|
|
{{ props.config?.btnText }}
|
|
</el-button>
|
|
<!-- <i v-else class="icon-plus"><i class="fa fa-paperclip" ></i></i> -->
|
|
<el-button v-else style="color:grey;font-weight: bolder;"><el-icon style="margin-right: 7px;font-weight: bolder;"><Plus /></el-icon>上传文件</el-button>
|
|
</template>
|
|
<template #tip v-if="props.config?.tip">
|
|
<div class="el-upload__tip">
|
|
{{ props.config?.tip }}
|
|
</div>
|
|
</template>
|
|
</el-upload>
|
|
<div v-else>
|
|
<span v-if="fileList.length==0">无</span>
|
|
<div v-for="item in fileList">
|
|
<!-- <el-link :underline="false" :href="item.url" target="_blank" style="color: blue;">{{ item.url }}</el-link> -->
|
|
<!-- <br /> -->
|
|
|
|
<div v-if="types==3" class="url-container" @click="openUrl1(item.url)">
|
|
<span class="url-content">
|
|
{{ item.url }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang='scss' >
|
|
.el-upload-list__item {
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
color: var(--el-text-color-regular);
|
|
font-size: 14px;
|
|
margin-bottom: 5px;
|
|
position: relative;
|
|
transition: all .5s cubic-bezier(.55,0,.1,1);
|
|
|
|
}
|
|
|
|
|
|
.url-container {
|
|
/* 容器样式（保持点击和下划线等特性） */
|
|
cursor: pointer;
|
|
color: #0000EE;
|
|
text-decoration: underline;
|
|
/* 可选：限制容器最大宽度，避免span无限拉伸 */
|
|
max-width: 100%;
|
|
}
|
|
|
|
.url-content {
|
|
/* 1. 自定义触发溢出的宽度（例如300px） */
|
|
width: 100%;
|
|
/* 2. 块级显示，确保width生效 */
|
|
display: inline-block;
|
|
/* 3. 超出宽度后自动换行（默认行为，可省略） */
|
|
white-space: normal;
|
|
/* 4. 处理长英文/数字不换行问题（可选） */
|
|
word-wrap: break-word;
|
|
text-decoration:underline;
|
|
}
|
|
</style>
|