61 lines
1.5 KiB
Vue
61 lines
1.5 KiB
Vue
<template>
|
|
<sa-search-bar
|
|
ref="searchBarRef"
|
|
v-model="formData"
|
|
label-width="100px"
|
|
:showExpand="false"
|
|
@reset="handleReset"
|
|
@search="handleSearch"
|
|
>
|
|
<el-col v-bind="setSpan(8)">
|
|
<el-form-item :label="$t('page.search.tier')" prop="tier">
|
|
<el-select v-model="formData.tier" :placeholder="$t('table.searchBar.all')" clearable style="width: 100%">
|
|
<el-option label="T1" value="T1" />
|
|
<el-option label="T2" value="T2" />
|
|
<el-option label="T3" value="T3" />
|
|
<el-option label="T4" value="T4" />
|
|
<el-option label="T5" value="T5" />
|
|
<el-option :label="$t('page.search.optionBigwin')" value="BIGWIN" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</sa-search-bar>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Props {
|
|
modelValue: Record<string, any>
|
|
}
|
|
interface Emits {
|
|
(e: 'update:modelValue', value: Record<string, any>): void
|
|
(e: 'search', params: Record<string, any>): void
|
|
(e: 'reset'): void
|
|
}
|
|
const props = defineProps<Props>()
|
|
const emit = defineEmits<Emits>()
|
|
|
|
const searchBarRef = ref()
|
|
const formData = computed({
|
|
get: () => props.modelValue,
|
|
set: (val) => emit('update:modelValue', val)
|
|
})
|
|
|
|
function handleReset() {
|
|
searchBarRef.value?.ref?.resetFields?.()
|
|
emit('reset')
|
|
}
|
|
|
|
function handleSearch() {
|
|
emit('search', { ...formData.value })
|
|
}
|
|
|
|
const setSpan = (span: number) => ({
|
|
span,
|
|
xs: 24,
|
|
sm: 12,
|
|
md: 8,
|
|
lg: span,
|
|
xl: span
|
|
})
|
|
</script>
|