VberAdmin-Java_V1/UI/VA.Vue_V1.0/src/components/table/table-partials/table-toolbar/TableSearchFrom.vue

<script setup lang="ts">
import type { VbFormItem, VbFormRowItem } from "@/components/form/models"
const props = withDefaults(
  defineProps<{
    searchFormRowItems?: Array<VbFormRowItem>
    searchFormItems?: Array<VbFormItem>
    searchFormSpan?: number
    queryParams: any
    resetSearchForm?: () => void
    queryTable?: () => void
    tableSearchBtnSpan?: number
  }>(),
  {
    tableSearchBtnSpan: 1.5,
    searchFormSpan: 4,
  }
)
const { queryParams } = toRefs(props)
const _searchFormItems = computed(() => {
  if (props.searchFormItems || props.searchFormRowItems) {
    const items = props.searchFormItems ?? []
    if (
      !items.find((v) => {
        return v.field == "searchbtn"
      })
    )
      items.push({
        field: "searchbtn",
        component: "slot",
        span: 1.5,
      })
    return items
  }
  return props.searchFormItems
})
const searchFormRef = ref<any>()

//form表单的插槽 需要tool-form_,并tool-form_传递给VbForm组件
function isFormSlot(v: string | number): string | undefined {
  const formSlotSuffix = "tool-form_"
  v = v as string
  if (v.search(formSlotSuffix) == 0) {
    return v.substring(formSlotSuffix.length)
  }
  return undefined
}

function customSearch() {
  props.queryTable && props.queryTable()
}
function resetForm() {
  searchFormRef.value.clearValidate()
  searchFormRef.value.resetFields()
  props.resetSearchForm && props.resetSearchForm()
  setTimeout(customSearch, 100)
}
</script>
<template>
  <template v-if="searchFormRowItems || searchFormItems">
    <VbForm
      ref="searchFormRef"
      v-model:data="queryParams"
      :row-items="searchFormRowItems"
      :items="_searchFormItems"
      :span="searchFormSpan"
    >
      <template v-for="(_, name) in $slots" #[`${isFormSlot(name)}`]>
        <slot v-if="isFormSlot(name)" :name="name" />
      </template>
      <template #searchbtn>
        <el-col :span="tableSearchBtnSpan">
          <el-button class="btn btn-primary" @click="customSearch">
            <template #icon>
              <KTIcon icon-name="magnifier" icon-type="solid"></KTIcon>
            </template>
            搜索
          </el-button>
          <el-button class="btn btn-light-primary" @click="resetForm">
            <template #icon>
              <KTIcon icon-name="arrows-loop" icon-type="solid"></KTIcon>
            </template>
            重置
          </el-button>
        </el-col>
      </template>
    </VbForm>
  </template>
  <el-form v-else ref="searchFormRef" :inline="true" :model="queryParams" class="el-row">
    <slot name="table-search-form" />
    <el-col :span="tableSearchBtnSpan">
      <el-form-item>
        <el-button class="btn btn-primary" @click="customSearch">
          <template #icon>
            <KTIcon icon-name="magnifier" icon-type="solid"></KTIcon>
          </template>
          搜索
        </el-button>
        <el-button class="btn btn-light-primary" @click="resetForm">
          <template #icon>
            <KTIcon icon-name="arrows-loop" icon-type="solid"></KTIcon>
          </template>
          重置
        </el-button>
      </el-form-item>
    </el-col>
  </el-form>
</template>