上传组件重构

src/components/DesignForm/public/expand/uploadPage.vue

@@ -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>

src/components/DesignForm/public/expand/uploadPageList.vue

@@ -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>

src/components/DesignForm/public/form/childTable.vue

@@ -10,7 +10,7 @@ import Tooltips from '@/components/DesignForm/tooltip.vue'
 import {constFormProps } from '@/api/DesignForm/utils'
 import { jsonParseStringify } from '@/utils/DesignForm'
 import LowcodeImagePage from '@/components/DesignForm/public/expand/lowcodeImage.vue'
-
+import UploadPageList from '@/components/DesignForm/public/expand/uploadPageList.vue'
 
 import LokOrgCentent from '@/widget/org/cont.vue' 
 
@@ -205,6 +205,9 @@ const timeToString = (timeVal:any,types:int) => {
 							<LowcodeImagePage :data="item" 
 								v-model="scope.row[item.name]" />
 						</div>
+						<div v-else-if="item.type=='upload'" >
+							<UploadPageList   :data="item" :img-list="scope.row[item.name]" :control="item.control" />
+						</div>
 						<div v-else-if="item.type=='datePicker'" v-html="timeToString(scope.row[item.name],item.control.type)">
 						</div>
 						<div v-else>{{ getText(scope.row[item.name],scope.row,item.name) }}</div>

src/components/DesignForm/public/form/formItem.vue

@@ -32,6 +32,10 @@ import LokOrgCentent from '@/widget/org/cont.vue'
 
 import DigitpagePage from '@/components/DesignForm/public/expand/digitpage.vue'
 import LowcodeImagePage from '@/components/DesignForm/public/expand/lowcodeImage.vue'
+import UploadPage from '@/components/DesignForm/public/expand/uploadPage.vue'
+import UploadPageList from '@/components/DesignForm/public/expand/uploadPageList.vue'
+
+
 
 import AKSelect from './select.vue'
 import { uploadUrl,getRequest } from '@/api/DesignForm'
@@ -41,6 +45,7 @@ import { useRoute } from 'vue-router'
 
 import { json2string,objToStringify,string2json,stringToObj } from '@/utils/DesignForm/form'
 
+
 import TextImg from "@/assets/image/tinymce.png"
 
 import { AnalysisCss,AnalysisInputCss } from '@/components/DesignForm/public/form/calculate/cssInfo.ts'
@@ -182,6 +187,9 @@ const currentComponent = computed(() => {
     }
 	if (props.data.type === 'lowcodeImage') {
       	return markRaw(LowcodeImagePage)
+    }
+	if (props.data.type === 'upload') {
+      	return markRaw(UploadPage)
     }
 	if (props.data.type === 'datePicker') {
 		props.data.control.valueFormat="x"
@@ -877,8 +885,22 @@ function asfValueChanged(val:any){
 	//console.log("asfValueChanged",val)
 	emits("asfValueChanged",val)
 }
-
+/**
-
+@ 作者: 秦东
+@ 时间: 2024-09-17 14:30:37
+@ 功能: 解析下载图片
+*/
+const uploadPic = (val:any) => {
+	console.log("解析下载图片-->",val)
+	if(val != ""){
+		let urlAry = string2json(val)
+		// let urlAry =  val.toString().split(",")
+		console.log("解析下载图片-2->",urlAry)
+		return urlAry
+	}else{
+		return [];
+	}
+}
 </script>
 <template>
 	<BaiduMap v-if="judgeIsShow(data.name) &&data.type === 'baidumap' && type != 4" :data="data" />
@@ -964,9 +986,10 @@ function asfValueChanged(val:any){
 			<div class="form-value" v-else-if="data.type == 'select'" v-html="selectValue(value,data.options)">
 				
 			</div>
-			<div class="form-value" v-else-if="data.type == 'upload'" v-html="value">
+			<div class="form-value" v-else-if="data.type == 'upload'" >
+				<UploadPageList :img-list="value" :control="control" :data="data"  />
 				
-			</div>
+			</div> 
 			<div class="form-value" v-else-if="data.type == 'tinymce'"  v-html="value">
 			
 			</div>
@@ -1078,43 +1101,28 @@ function asfValueChanged(val:any){
 				:transformOption="transformOption"
 				:placeholder="data.control.placeholder?data.control.placeholder:'请选择'+getLabel(data.item)"
 			/>
-			<el-upload
+			<component
-				class="upload-style"
+				v-if="['upload'].includes(data.type)"
-				v-if="data.type === 'upload'"
+				:is="currentComponent"
-				:action="uploadUrl"
+				:data="data"
 				v-bind="control"
+				:control="control"
+				:config="config"
 				:name="control.file || 'file'"
 				:disabled="judgeIsDisabled(data.name)"
-				:file-list="fileList as any"
+				:options="options"
-				:class="{limit: control.limit <= fileList.length}"
+				v-model="value"
-				:on-error="uploadError"
+			/>
-				:on-success="uploadSuccess"
+			
-				:on-remove="uploadRemove"
-			>
-				<i class="icon-plus" v-if="control?.listType=='picture-card'"></i>
-				<el-button type="primary" plain v-else-if="control?.listType=='picture'">
-						<span v-if="config?.btnText">{{ config?.btnText }} </span>
-						<span class="fa fa-plus" v-else></span>
-				</el-button>
-				<template v-else>
-					<el-button type="primary" plain v-if="config?.btnText">
-						{{ config?.btnText }} 
-					</el-button>
-					<i class="icon-plus" v-else></i>
-				</template>
-				<template #tip v-if="config?.tip">
-					<div class="el-upload__tip">
-						{{ config?.tip }}
-					</div>
-				</template>
-			</el-upload>
 			<component
 				v-if="['cascader', 'treeSelect'].includes(data.type)"
 				:is="currentComponent"
 				v-bind="control"
+				
 				:disabled="judgeIsDisabled(data.name)"
 				:options="options"
 				v-model="value"
+				
 			/>
 			<el-time-picker v-if="data.type=='timePicker'" v-model="value" value-format="x" :placeholder="data.control.placeholder?data.control.placeholder:'请选择'+getLabel(data.item)" />
 			<component
@@ -1156,7 +1164,7 @@ function asfValueChanged(val:any){
 			/>
 				
 				
-				<!--所属部门-->
+