119 lines
3.5 KiB
Vue
119 lines
3.5 KiB
Vue
<template>
|
|
<sa-search-bar
|
|
ref="searchBarRef"
|
|
v-model="formData"
|
|
label-width="100px"
|
|
:showExpand="false"
|
|
@reset="handleReset"
|
|
@search="handleSearch"
|
|
@expand="handleExpand"
|
|
>
|
|
<el-col v-bind="setSpan(6)">
|
|
<el-form-item :label="$t('page.search.username')" prop="username">
|
|
<el-input v-model="formData.username" :placeholder="$t('page.search.placeholderUsername')" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col v-bind="setSpan(6)">
|
|
<el-form-item :label="$t('page.search.nickname')" prop="name">
|
|
<el-input v-model="formData.name" :placeholder="$t('page.search.placeholderNickname')" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col v-bind="setSpan(6)">
|
|
<el-form-item :label="$t('page.search.phone')" prop="phone">
|
|
<el-input v-model="formData.phone" :placeholder="$t('page.search.placeholderPhoneFuzzy')" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col v-bind="setSpan(6)">
|
|
<el-form-item :label="$t('page.search.status')" prop="status">
|
|
<el-select v-model="formData.status" :placeholder="$t('table.searchBar.all')" clearable style="width: 100%">
|
|
<el-option :label="$t('table.searchBar.enable')" :value="1" />
|
|
<el-option :label="$t('table.searchBar.disable')" :value="0" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col v-bind="setSpan(6)">
|
|
<el-form-item :label="$t('page.search.coin')" prop="coin">
|
|
<el-input-number
|
|
v-model="formData.coin"
|
|
:min="0"
|
|
:precision="2"
|
|
:placeholder="$t('page.search.exactSearch')"
|
|
controls-position="right"
|
|
style="width: 100%"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col v-bind="setSpan(6)">
|
|
<el-form-item :label="$t('page.search.lotteryPoolConfig')" prop="lottery_config_id">
|
|
<el-select
|
|
v-model="formData.lottery_config_id"
|
|
:placeholder="$t('page.search.placeholderAll')"
|
|
clearable
|
|
style="width: 100%"
|
|
>
|
|
<el-option
|
|
v-for="item in lotteryConfigOptions"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</sa-search-bar>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import api from '../../../api/player/index'
|
|
|
|
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 isExpanded = ref<boolean>(false)
|
|
const lotteryConfigOptions = ref<Array<{ id: number; name: string }>>([])
|
|
|
|
/** 从玩家控制器获取 DiceLotteryPoolConfig id/name 列表，用于 lottery_config_id 筛选 */
|
|
onMounted(async () => {
|
|
try {
|
|
lotteryConfigOptions.value = await api.getLotteryConfigOptions()
|
|
} catch {
|
|
lotteryConfigOptions.value = []
|
|
}
|
|
})
|
|
|
|
const searchBarRef = ref()
|
|
const formData = computed({
|
|
get: () => props.modelValue,
|
|
set: (val) => emit('update:modelValue', val)
|
|
})
|
|
|
|
function handleReset() {
|
|
searchBarRef.value?.ref.resetFields()
|
|
emit('reset')
|
|
}
|
|
|
|
async function handleSearch() {
|
|
emit('search', formData.value)
|
|
}
|
|
|
|
function handleExpand(expanded: boolean) {
|
|
isExpanded.value = expanded
|
|
}
|
|
|
|
const setSpan = (span: number) => ({
|
|
span,
|
|
xs: 24,
|
|
sm: span >= 12 ? span : 12,
|
|
md: span >= 8 ? span : 8,
|
|
lg: span,
|
|
xl: span
|
|
})
|
|
</script>
|