Update 优化通用报表组件

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

@@ -1,6 +1,5 @@
 import type { Component } from "vue"
 import type { FormItemRule } from "element-plus/es/components/form/src/types"
-import type { AlertProps } from "element-plus/es/components/alert/src/alert"
 
 export interface VbFormItem {
 	id?: string | (() => string)

UI/VB.VUE/src/components/reports/VbCommonReport.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import VbDataTable from "@@@/table/VbDataTable.vue"
+import type { VbFormItem, VbFormRowItem } from "@@@/form/models"
+
 const props = withDefaults(
 	defineProps<{
 		columns: any[]
@@ -7,6 +9,9 @@ const props = withDefaults(
 		width?: string | number
 		title?: string
 		cycleStr?: string
+		searchData?: any
+		searchItems?: VbFormItem[]
+		searchFormSpan?: number
 		cycleType?: "Y" | "Q" | "M" | "D" | "W" | "ALL"
 		tableListFun: (query: any) => Promise<any>
 		genReportFun: (cycle: string) => Promise<any>
@@ -14,7 +19,8 @@ const props = withDefaults(
 	{
 		title: "",
 		cycleStr: "",
-		cycleType: "M"
+		cycleType: "M",
+		searchItems: () => []
 	}
 )
 const emits = defineEmits<{
@@ -26,18 +32,30 @@ const cycleType = "M"
 const cycle = ref()
 const cycleStr = ref()
 
-const queryParams = ref({
-	statCycle: cycle.value
-})
+const queryParams = ref(
+	Object.assign(
+		{
+			statCycle: cycle.value
+		},
+		props.searchData
+	)
+)
+
 const boxWidth = computed(() => {
 	if (typeof props.width == "number") {
 		return props.width + "px"
 	}
-	console.log("props.width", props.width)
 	return props.width || "1200px"
 })
+const searchFormSpan = computed(() => {
+	if (props.searchFormSpan) {
+		return props.searchFormSpan
+	}
+	return 24 / props.searchItems.length
+})
+
 function handleQuery(query?: any) {
-	query = query || tableRef.value?.getQueryParams() || queryParams.value
+	query = query || queryParams.value
 	query.statCycle = cycle.value
 	tableRef.value?.query(query)
 }
@@ -49,11 +67,27 @@ function genReport() {
 		message.msgSuccess("生成成功")
 	})
 }
+const formSlotSuffix = "search_"
+// form表单的插槽 需要search_开头,并去除search_传递给VbForm组件
+function formatterFormSlot(v: string | number): string | undefined {
+	v = v as string
+	if (v.search(formSlotSuffix) == 0) {
+		return v.substring(formSlotSuffix.length)
+	}
+	return undefined
+}
 function init() {
-	handleQuery()
+	queryParams.value = Object.assign(
+		{
+			statCycle: cycle.value
+		},
+		props.searchData
+	)
 }
 onMounted(() => {
-	init()
+	nextTick(() => {
+		init()
+	})
 })
 </script>
 
@@ -67,7 +101,25 @@ onMounted(() => {
 					v-model="cycle"
 					v-model:cycleStr="cycleStr"
 					:cycle-type="cycleType"></VbCycleSelect>
-				<el-button type="primary" @click="handleQuery()">查询</el-button>
+				<VbForm
+					v-if="searchItems"
+					ref="searchFormRef"
+					v-model:data="queryParams"
+					:items="searchItems as any"
+					:span="searchFormSpan">
+					<template v-for="(_, name) in $slots" #[`${formatterFormSlot(name)}`]>
+						<slot v-if="name.toString().search(formSlotSuffix) == 0" :name="name" />
+					</template>
+				</VbForm>
+				<el-form
+					v-else-if="$slots['search-form']"
+					ref="searchFormRef"
+					:inline="true"
+					:model="queryParams"
+					class="el-row mb-3">
+					<slot name="search-form" />
+				</el-form>
+				<el-button class="ms-5" type="primary" @click="handleQuery()">查询</el-button>
 				<el-button type="success" @click="genReport()">生成</el-button>
 			</div>
 			<h2 class="">{{ cycleStr }}{{ title }}</h2>
@@ -77,7 +129,7 @@ onMounted(() => {
 				:columns="columns"
 				:columns-fun="columnsFun"
 				:init-search="false"
-				:query-params="queryParams"
+				v-model:query-params="queryParams"
 				:custom-search-fun="handleQuery"
 				:remote-fun="tableListFun"
 				:has-checkbox="false"

UI/VB.VUE/src/components/table/partials/toolbar/TableSearchFrom.vue

@@ -25,7 +25,7 @@ const _searchFormItems = computed(() => {
 				field: "searchbtn",
 				component: "slot",
 				span: 1.5
-			})
+			} as any)
 		return items
 	}
 	return propOpts.searchFormItems
@@ -56,7 +56,7 @@ function resetForm() {
 		ref="searchFormRef"
 		v-model:data="queryParams"
 		:row-items="searchFormRowItems"
-		:items="_searchFormItems"
+		:items="_searchFormItems as any"
 		:span="propOpts.searchFormSpan">
 		<template v-for="(_, name) in $slots" #[`${formatterFormSlot(name)}`]>
 			<slot v-if="name.toString().search(formSlotSuffix) == 0" :name="name" />