appFormLowcode/src/components/lowCode/assistant/uploadPage.vue

<!--
@ 作者: 秦东
@ 时间: 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>