Add VbFormItem组件添加prepend和append

UI/VAP_V3.VUE/src/components/form/VbFormItem.vue

@@ -131,11 +131,57 @@ const tipsIconClass = computed(() => {
 	str += item.value.tipsIconClass ? item.value.tipsIconClass : " text-muted ms-1"
 	return str
 })
+const hasPrepend = computed(() => {
+	return !!(item.value.prepend || item.value.prependIcon || item.value.prependClickFunc)
+})
+const hasPrependSlot = computed(() => {
+	return item.value.prepend === "slot" || item.value.prepend === "Slot"
+})
+const prependIcon = computed(() => {
+	if (item.value.prependIcon) {
+		return item.value.prependIcon
+	} else if (item.value.prepend && item.value.prepend !== "icon" && item.value.prepend !== "Icon") {
+		return ""
+	} else if (
+		item.value.prependClickFunc ||
+		item.value.prepend === "icon" ||
+		item.value.prepend === "Icon"
+	) {
+		return "bi bi-search text-primary"
+	}
+	return ""
+})
+function prependClickFunc() {
+	item.value.prependClickFunc && item.value.prependClickFunc(data.value)
+}
+
+const hasAppend = computed(() => {
+	return !!(item.value.append || item.value.appendIcon || item.value.appendClickFunc)
+})
 
+const hasAppendSlot = computed(() => {
+	return item.value.append === "slot" || item.value.append === "Slot"
+})
+const appendIcon = computed(() => {
+	if (item.value.appendIcon) {
+		return item.value.appendIcon
+	} else if (item.value.append && item.value.append !== "icon" && item.value.append !== "Icon") {
+		return ""
+	} else if (
+		item.value.appendClickFunc ||
+		item.value.append === "icon" ||
+		item.value.append === "Icon"
+	) {
+		return "bi bi-search text-primary"
+	}
+	return ""
+})
+function appendClickFunc() {
+	item.value.appendClickFunc && item.value.appendClickFunc(data.value)
+}
 function init() {
 	//
 }
-
 onMounted(() => {
 	init()
 })
@@ -183,7 +229,22 @@ onMounted(() => {
 					:disabled="isDisabled()"
 					:readonly="isReadonly()"
 					v-bind="item.props"
-					v-on="item.listeners"></el-input>
+					v-on="item.listeners">
+					<template #prepend v-if="hasPrepend">
+						<slot v-if="hasPrependSlot" :name="`${item.field}_prepend`"></slot>
+						<el-button v-else-if="prependIcon" @click="prependClickFunc">
+							<i :class="prependIcon"></i>
+						</el-button>
+						<span v-else @click="prependClickFunc">{{ item.prepend }}</span>
+					</template>
+					<template #append v-if="hasAppend">
+						<slot v-if="hasAppendSlot" :name="`${item.field}_append`"></slot>
+						<el-button v-else-if="appendIcon" @click="appendClickFunc">
+							<i :class="appendIcon"></i>
+						</el-button>
+						<span v-else @click="appendClickFunc">{{ item.append }}</span>
+					</template>
+				</el-input>
 				<el-input
 					v-else
 					v-model="data[item.field]"
@@ -197,7 +258,22 @@ onMounted(() => {
 					:disabled="isDisabled()"
 					:readonly="isReadonly()"
 					v-bind="item.props"
-					v-on="item.listeners"></el-input>
+					v-on="item.listeners">
+					<template #prepend v-if="hasPrepend">
+						<slot v-if="hasPrependSlot" :name="`${item.field}_prepend`"></slot>
+						<el-button v-else-if="prependIcon" @click="prependClickFunc">
+							<i :class="prependIcon"></i>
+						</el-button>
+						<span v-else @click="prependClickFunc">{{ item.prepend }}</span>
+					</template>
+					<template #append v-if="hasAppend">
+						<slot v-if="hasAppendSlot" :name="`${item.field}_append`"></slot>
+						<el-button v-else-if="appendIcon" @click="appendClickFunc">
+							<i :class="appendIcon"></i>
+						</el-button>
+						<span v-else @click="appendClickFunc">{{ item.append }}</span>
+					</template>
+				</el-input>
 			</template>
 			<template v-else-if="checkComponent('VS') || checkComponent('VbSelect')">
 				<vb-select

UI/VAP_V3.VUE/src/components/form/models.ts

@@ -67,6 +67,12 @@ export interface VbFormItem {
 	labelStyle?: string // label样式 tip有值生效
 	tipsIcon?: string // 默认值  bi bi-question-circle-fill
 	tipsIconClass?: string // 默认值  text-muted
+	prepend: string | "slot" | "Slot" | "icon" | "Icon"
+	prependIcon?: string // prepend 为 el-button 中 icon 时显示的图标 默认值：Search
+	prependClickFunc?: (v: any) => void
+	append: string | "slot" | "Slot" | "icon" | "Icon"
+	appendIcon?: string // append 为 el-button 中 icon 时显示的图标 默认值：Search
+	appendClickFunc?: (v: any) => void
 }
 
 export interface VbFormRowItem {