YzXyh_v3/UI/XYH.APP/src/components/searchBar.vue

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    height?: string | number
    searchInputValue?: string | number
    queryType?: string | number
    searchType?: string | number
    queryTypeData?: any[]
    searchPlaceholder?: string
    searchBtnText?: string
    searchBtnIcon?: string
    searchDropdownValue?: string[] | number[]
    searchDropdownList?: any[]
    searchTabList?: any[]
  }>(),
  {
    searchPlaceholder: "请输入搜索内容",
    searchDropdownList: () => [],
    searchDropdownValue: () => [],
  }
)

const emits = defineEmits<{
  (e: "update:searchInputValue", v: string | number): void
  (e: "update:queryType", v: string | number): void
  (e: "update:searchType", v: string | number): void
  (e: "update:searchDropdownValue", v: string[] | number[]): void
  (e: "changeQueryType", v: string | number): void
  (e: "search-btn"): void
  (e: "search"): void
}>()

const { searchInputValue, queryType, searchDropdownValue } = toRefs(props)
const dropdownRef = ref<any[]>([])

const style = computed(() => {
  const style: any = {}
  if (props.height) {
    style.height = addUnit(props.height)
  } else {
    style.height = props.queryTypeData?.length ? "130px" : "95px"
  }

  return style
})

const activeTabIndex = ref(0)

const getDefaultSearchDropdownValue = () => {
  const arr = []
  for (let i = 0; i < props.searchDropdownList?.length; i++) {
    arr.push("")
  }
  return arr
}
function bindQueryChange(e: any) {
  activeTabIndex.value = 0
  emits("update:searchInputValue", "")
  emits("changeQueryType", e.detail.value)
  emits("update:queryType", e.detail.value)
  emits("update:searchType", "")
  emits("update:searchDropdownValue", getDefaultSearchDropdownValue())
  search()
}

function bindSearchBtnClick() {
  emits("search-btn")
}

function bindSearchTabClick(index: number, type?: string) {
  activeTabIndex.value = index
  if (index >= props.searchDropdownList.length) {
    dropdownRef.value.forEach((v: any) => {
      v.close()
    })
    emits("update:searchType", type || "")
    emits("update:searchDropdownValue", getDefaultSearchDropdownValue())
    search()
  } else {
    emits("update:searchType", "")
  }
}

function bindChangeDropdown(e: any, i: number) {
  searchDropdownValue.value[i] = e
  search()
}

function onSearch() {
  search()
}
function search() {
  nextTick(() => {
    emits("search")
  })
}
</script>
<template>
  <view class="bg-white px-15 pt-15" :style="style">
    <view v-if="queryTypeData && queryTypeData.length" class="d-fc mb-10">
      <uni-data-checkbox
        v-model="queryType"
        :localdata="queryTypeData"
        selectedColor="var(--vb-color)"
        selectedTextColor="var(--vb-color)"
        @change="bindQueryChange"
      ></uni-data-checkbox>
    </view>
    <view class="d-flex align-center">
      <input
        class="w-100 px-20 h-40px br-30 me-15"
        type="text"
        :placeholder="searchPlaceholder"
        v-model="searchInputValue"
        style="background: #f2f2f2"
        confirm-type="search"
        adjust-position="false"
        auto-blur="true"
        @confirm="onSearch"
      />
      <vb-button
        v-if="searchBtnIcon || searchBtnText"
        custom-class="w-90px py-12 fs-15"
        round
        :icon="searchBtnIcon"
        icon-class="me-3"
        icon-size="20"
        size="small"
        @click="bindSearchBtnClick"
      >
        {{ searchBtnText }}
      </vb-button>
    </view>
    <view class="d-flex h-30px mt-10 pb-5 align-center">
      <template v-if="searchDropdownList?.length">
        <vb-dropdown
          v-for="(v, i) in searchDropdownList"
          ref="dropdownRef"
          v-model="searchDropdownValue[i]"
          :active="activeTabIndex == i"
          :empty-title="v.emptyTitle"
          :options="v.data"
          :key="i"
          :map="v.map"
          @click="bindSearchTabClick(i)"
          @change="(e:any) => bindChangeDropdown(e, i)"
          custom-class="px-8"
        ></vb-dropdown>
      </template>

      <template v-if="searchTabList && searchTabList.length > 0">
        <template v-for="(v, i) in searchTabList" :key="i">
          <view class="text-gray-4">|</view>
          <view
            class="px-5"
            :class="{ 'text-vb font-bold': activeTabIndex == i + (searchDropdownList?.length || 0) }"
            @click="bindSearchTabClick(i + (searchDropdownList?.length || 0), v.value)"
          >
            {{ v.text }}
          </view>
        </template>
      </template>
    </view>
  </view>
</template>