Update 优化上传组件，支持formItem。

formData会在请求body里传递，params会在url上传递

UI/VAP_V3.VUE/src/components/upload/ImportModal.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import type { FormItemRule } from "element-plus/es/components/form/src/types"
+import type { VbFormItem, VbFormRowItem } from "@@@/form/models"
+
 const props = withDefaults(
 	defineProps<{
 		options?: any
@@ -8,8 +11,23 @@ const props = withDefaults(
 		isAlertError?: boolean
 		showUpdateCheckbox?: boolean // 是否显示 更新复选框
 		accept?: string
+		fileName?: string
 		headers?: any
 		title?: string
+		saveAutoClose?: boolean
+		formData?: any
+		formRowItems?: VbFormRowItem[]
+		formItems?: VbFormItem[]
+		formRules?: Record<string, FormItemRule[]>
+		formLabelWidth?: string | number // 表单label宽度
+		formSize?: "large" | "default" | "small"
+		gutter?: number
+		span?: number
+		formProps?: object
+		formListeners?: object
+		modalFormClass?: string
+		modalFormStyle?: string
+		isValidateForm?: boolean //验证表单
 		params?: object | (() => {})
 		appendToBody?: boolean
 	}>(),
@@ -24,18 +42,28 @@ const props = withDefaults(
 		accept: ".xlsx, .xls",
 		templateUrl: "",
 		templateName: "",
+		fileName: "file",
 		isAlertError: true,
 		appendToBody: true,
-		showUpdateCheckbox: false
+		showUpdateCheckbox: false,
+		isValidateForm: true,
+		saveAutoClose: true,
+		formLabelWidth: "100px",
+		formSize: "large",
+		modalFormClass: "vb-form",
+		modalFormStyle: ""
 	}
 )
 const emits = defineEmits<{
 	(e: "modelValue:value", v: string): void
+	(e: "update:formData", data: any): boolean
 	(e: "onProgress", event: any, file: any, fileList: any): void
 	(e: "onSuccess", response: any, file: any, fileList: any): void
 	(e: "onError", error: Error, file: any, fileList: any): void
 	(e: "onConfirm"): void
 }>()
+const { formData } = toRefs(props)
+const modalFormRef = ref<HTMLFormElement>()
 const uploadModalRef = ref()
 const uploadRef = ref()
 const uploadUpdateSupport = ref(false)
@@ -43,7 +71,10 @@ const isUploading = ref(false)
 const opts = ref<any>({})
 
 const url = computed(() => {
-	let queryParams = `?updateSupport=${uploadUpdateSupport.value}`
+	let queryParams = "?t=" + new Date().getTime()
+	if (opts.value.showUpdateCheckbox) {
+		queryParams += `&updateSupport=${uploadUpdateSupport.value}`
+	}
 	if (opts.value.params) {
 		const data =
 			typeof opts.value.params === "function"
@@ -57,12 +88,36 @@ const url = computed(() => {
 			}
 		}
 	}
+	// if (formData.value) {
+	// 	for (const key in formData.value) {
+	// 		if (formData.value.hasOwnProperty(key)) {
+	// 			queryParams += `&${key}=${formData.value[key]}`
+	// 		}
+	// 	}
+	// }
 	return `${opts.value.url}${queryParams}`
 })
 
 function submitUpload() {
-	uploadRef.value.submit()
-	emits("onConfirm")
+	if (modalFormRef.value && props.isValidateForm) {
+		modalFormRef.value.validate().then((valid: boolean) => {
+			if (valid) {
+				uploadRef.value.submit()
+				emits("onConfirm")
+				if (props.saveAutoClose) {
+					uploadModalRef.value.hide()
+				}
+			} else {
+				console.error("UPLOAD_FORM 验证失败")
+			}
+		})
+	} else {
+		uploadRef.value.submit()
+		emits("onConfirm")
+		if (props.saveAutoClose) {
+			uploadModalRef.value.hide()
+		}
+	}
 }
 
 /** 文件上传中处理 */
@@ -99,6 +154,20 @@ function importTemplate() {
 		`${opts.value.templateName}_TEMPLATE_${new Date().getTime()}.xlsx`
 	)
 }
+function getUploadData() {
+	return formData.value
+}
+
+//form表单的插槽 需要_form结尾,并去掉_form传递给VbForm组件
+function isFormSlot(v: string | number): string | undefined {
+	let str
+	const formSlotSuffix = "_form"
+	v = v as string
+	if (v.search(formSlotSuffix) > 0) {
+		str = v.substring(0, v.length - formSlotSuffix.length)
+	}
+	return str
+}
 function init() {
 	opts.value = props.options ? Object.assign({}, props, props.options) : props
 	if (!opts.value.url) {
@@ -115,16 +184,39 @@ defineExpose({ show })
 	<VbModal
 		v-model:modal="uploadModalRef"
 		:title="opts.title"
+		:save-auto-close="false"
 		@confirm="submitUpload"
 		:append-to-body="appendToBody"
 		v-bind="$attrs">
 		<template #body>
+			<slot name="params_form"></slot>
+			<VbForm
+				v-if="formRowItems || formItems"
+				ref="modalFormRef"
+				v-model:data="formData"
+				:row-items="formRowItems"
+				:items="formItems"
+				:label-width="formLabelWidth"
+				:rules="formRules"
+				:size="formSize"
+				:class="modalFormClass"
+				:style="modalFormStyle"
+				:span="span"
+				:gutter="gutter"
+				v-bind="formProps"
+				v-on="formListeners">
+				<template v-for="(_, name) in $slots" #[`${isFormSlot(name)}`]>
+					<slot v-if="isFormSlot(name)" :name="name" />
+				</template>
+			</VbForm>
 			<el-upload
 				ref="uploadRef"
 				:limit="1"
 				:accept="opts.accept"
 				:headers="opts.headers"
 				:action="url"
+				:name="opts.fileName"
+				:data="getUploadData"
 				:disabled="isUploading"
 				:on-progress="handleFileUploadProgress"
 				:on-success="handleFileSuccess"