fara-fe-admin/src/views/voice-management/components/SearchForm.vue

<script setup lang="ts">
import { Refresh, Search } from '@element-plus/icons-vue'
import { ElButton, ElCol, ElForm, ElFormItem, ElInput, ElOption, ElRow, ElSelect } from 'element-plus'
import { ref } from 'vue'
export type TSearchParams = {
  name: string,
  type: number
  gender: number|null
}
interface Props {
  modelValue: TSearchParams
  loading?: boolean
}

interface Emits {
  (e: 'update:modelValue', value: TSearchParams): void
  (e: 'search'): void
  (e: 'reset'): void
}

const props = withDefaults(defineProps<Props>(), {
  loading: false,
})

const emit = defineEmits<Emits>()


const formRef = ref()

const searchParams = computed({
  get: () => props.modelValue,
  set: value => emit('update:modelValue', value),
})

/**
 * 搜索
 */
function handleSearch() {
  emit('search')
}

/**
 * 重置
 */
function handleReset() {
  formRef.value?.resetFields()
  emit('reset')
}

function handleClear() {
  // 清空后自动触发搜索
  handleSearch()
}
</script>

<template>
  <ElForm ref="formRef" :model="searchParams" inline label-width="80px">
      <ElFormItem label="名称" prop="name" label-width="120" >
            <ElInput v-model="searchParams.name" placeholder="请输入" clearable @clear="handleClear" style="width: 120px;" />
          </ElFormItem>
          <ElFormItem label="性别" prop="gender" label-width="120" >
            <ElSelect v-model="searchParams.gender" style="width: 120px;">
              <ElOption :value="-1" label="全部">全部</ElOption>
              <ElOption :value="1" label="女">女</ElOption>
              <ElOption :value="2" label="男">男</ElOption>
            </ElSelect>
          </ElFormItem>
          <ElFormItem label="类型" prop="type" label-width="120" >
            <ElSelect v-model="searchParams.type" style="width: 120px;">
              <ElOption :value="1" label="系统">系统</ElOption>
              <ElOption :value="2" label="系统克隆">系统克隆</ElOption>
              <ElOption :value="3" label="用户">用户</ElOption>
            </ElSelect>
          </ElFormItem>
          <ElFormItem >
            <ElButton type="primary" :icon="Search" :loading="loading" @click="handleSearch">
              查询
            </ElButton>
            <ElButton :icon="Refresh" @click="handleReset">
              重置
            </ElButton>
          </ElFormItem>
    </ElForm>
</template>