<template>
|
<!-- 搜索框入口 -->
|
<view @click="visible = true">
|
<wd-search :placeholder="placeholder" hide-cancel disabled />
|
</view>
|
|
<!-- 搜索弹窗 -->
|
<wd-popup v-model="visible" position="top" @close="visible = false">
|
<view class="yd-search-form-container" :style="{ paddingTop: `${getNavbarHeight()}px` }">
|
<view class="yd-search-form-item">
|
<view class="yd-search-form-label">
|
名字
|
</view>
|
<wd-input
|
v-model="formData.name"
|
placeholder="请输入名字"
|
clearable
|
/>
|
</view>
|
<view class="yd-search-form-item">
|
<view class="yd-search-form-label">
|
出生日期
|
</view>
|
<wd-input
|
v-model="formData.birthday"
|
placeholder="请输入出生日期"
|
clearable
|
/>
|
</view>
|
<view class="yd-search-form-item">
|
<view class="yd-search-form-label">
|
性别
|
</view>
|
<wd-radio-group v-model="formData.sex" type="button">
|
<wd-radio :value="-1">
|
全部
|
</wd-radio>
|
<wd-radio
|
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
|
:key="dict.value"
|
:value="dict.value"
|
>
|
{{ dict.label }}
|
</wd-radio>
|
</wd-radio-group>
|
</view>
|
<view class="yd-search-form-item">
|
<view class="yd-search-form-label">
|
是否有效
|
</view>
|
<wd-radio-group v-model="formData.enabled" type="button">
|
<wd-radio :value="-1">
|
全部
|
</wd-radio>
|
<wd-radio
|
v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
|
:key="dict.value"
|
:value="dict.value"
|
>
|
{{ dict.label }}
|
</wd-radio>
|
</wd-radio-group>
|
</view>
|
<yd-search-date-range v-model="formData.createTime" label="创建时间" />
|
<view class="yd-search-form-actions">
|
<wd-button class="flex-1" plain @click="handleReset">
|
重置
|
</wd-button>
|
<wd-button class="flex-1" type="primary" @click="handleSearch">
|
搜索
|
</wd-button>
|
</view>
|
</view>
|
</wd-popup>
|
</template>
|
|
<script lang="ts" setup>
|
import { computed, reactive, ref } from 'vue'
|
import { getNavbarHeight } from '@/utils'
|
import { formatDate, formatDateRange } from '@/utils/date'
|
import { getDictLabel, getIntDictOptions, getBoolDictOptions } from '@/hooks/useDict'
|
import { DICT_TYPE } from '@/utils/constants'
|
|
const emit = defineEmits<{
|
search: [data: Record<string, any>]
|
reset: []
|
}>()
|
|
const visible = ref(false) // 搜索弹窗显示状态
|
const formData = reactive({
|
name: undefined as string | undefined,
|
birthday: undefined as string | undefined,
|
sex: -1, // -1 表示全部
|
enabled: -1 as -1 | boolean, // -1 表示全部
|
createTime: [undefined, undefined] as [number | undefined, number | undefined],
|
}) // 搜索表单数据
|
|
/** 搜索条件 placeholder 拼接 */
|
const placeholder = computed(() => {
|
const conditions: string[] = []
|
if (formData.name) {
|
conditions.push(`名字:${formData.name}`)
|
}
|
if (formData.birthday) {
|
conditions.push(`出生日期:${formData.birthday}`)
|
}
|
if (formData.sex !== -1) {
|
conditions.push(`性别:${getDictLabel(DICT_TYPE.SYSTEM_USER_SEX, formData.sex)}`)
|
}
|
if (formData.enabled !== -1) {
|
conditions.push(`是否有效:${getDictLabel(DICT_TYPE.INFRA_BOOLEAN_STRING, formData.enabled)}`)
|
}
|
if (formData.createTime?.[0] && formData.createTime?.[1]) {
|
conditions.push(`创建时间:${formatDate(formData.createTime[0])}~${formatDate(formData.createTime[1])}`)
|
}
|
return conditions.length > 0 ? conditions.join(' | ') : '搜索学生'
|
})
|
|
/** 搜索按钮操作 */
|
function handleSearch() {
|
visible.value = false
|
emit('search', {
|
...formData,
|
sex: formData.sex === -1 ? undefined : formData.sex,
|
enabled: formData.enabled === -1 ? undefined : formData.enabled,
|
createTime: formatDateRange(formData.createTime),
|
})
|
}
|
|
/** 重置按钮操作 */
|
function handleReset() {
|
formData.name = undefined
|
formData.birthday = undefined
|
formData.sex = -1
|
formData.enabled = -1
|
formData.createTime = [undefined, undefined]
|
visible.value = false
|
emit('reset')
|
}
|
</script>
|
