admin-web/src/shared/components/QueryToolbar.vue

<script setup lang="ts">
import { Search, RotateCcw } from '@lucide/vue'

defineOptions({ inheritAttrs: false })

export type QueryFieldType = 'input' | 'select' | 'date' | 'daterange'
export type QueryValue = string | number | boolean | null | undefined | string[] | number[] | Date | Date[]
export type QueryModel = Record<string, QueryValue>

export interface QueryOption {
  label: string
  value: string | number | boolean
  disabled?: boolean
}

export interface QueryField {
  key: string
  type: QueryFieldType
  label?: string
  width?: string | number
  placeholder?: string
  options?: QueryOption[]
  props?: Record<string, unknown>
}

const props = withDefaults(defineProps<{
  ariaLabel: string
  fields: QueryField[]
  searchText?: string
  resetText?: string
  searchOnReset?: boolean
}>(), {
  searchText: '查询',
  resetText: '重置',
  searchOnReset: true,
})

const model = defineModel<QueryModel>({ required: true })
const emit = defineEmits<{
  search: [model: QueryModel]
  reset: [model: QueryModel]
}>()

function updateField(key: string, value: QueryValue) {
  model.value = { ...model.value, [key]: value }
}

function defaultPlaceholder(field: QueryField) {
  if (field.type === 'input') return '请输入关键词'
  if (field.type === 'select') return '全部'
  return field.type === 'daterange' ? '请选择日期范围' : '请选择日期'
}

function datePickerType(field: QueryField): 'date' | 'daterange' {
  return field.type === 'daterange' ? 'daterange' : 'date'
}

function fieldStyle(field: QueryField) {
  if (field.width === undefined) return undefined
  const width = typeof field.width === 'number' ? `${field.width}px` : field.width
  return { '--query-field-width': width }
}

function resetValue(field: QueryField): QueryValue {
  return field.type === 'daterange' ? [] : ''
}

function search() {
  emit('search', model.value)
}

function reset() {
  const next = { ...model.value }
  for (const field of props.fields) next[field.key] = resetValue(field)
  model.value = next
  emit('reset', next)
  if (props.searchOnReset) emit('search', next)
}

defineExpose({ search, reset })
</script>

<template>
  <section
    v-bind="$attrs"
    class="query-toolbar"
    :aria-label="ariaLabel"
  >
    <div class="query-toolbar__filters">
      <div v-for="field in fields" :key="field.key" class="query-toolbar__field" :style="fieldStyle(field)">
        <span v-if="field.label" class="query-toolbar__label">{{ field.label }}</span>
        <el-input
          v-if="field.type === 'input'"
          :model-value="model[field.key] as string"
          :placeholder="field.placeholder || defaultPlaceholder(field)"
          clearable
          v-bind="field.props"
          @update:model-value="updateField(field.key, $event)"
        >
          <template #prefix><Search :size="16" /></template>
        </el-input>
        <el-select
          v-else-if="field.type === 'select'"
          :model-value="model[field.key] as string | number | boolean | undefined"
          :placeholder="field.placeholder || defaultPlaceholder(field)"
          clearable
          v-bind="field.props"
          @update:model-value="updateField(field.key, $event)"
        >
          <el-option v-for="option in field.options || []" :key="String(option.value)" :label="option.label" :value="option.value" :disabled="option.disabled" />
        </el-select>
        <el-date-picker
          v-else
          :model-value="model[field.key] as string | string[] | undefined"
          :type="datePickerType(field)"
          :placeholder="field.placeholder || defaultPlaceholder(field)"
          clearable
          value-format="YYYY-MM-DD"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          v-bind="field.props"
          @update:model-value="updateField(field.key, $event)"
        />
      </div>
    </div>
    <div class="query-toolbar__actions">
      <el-button type="primary" @click="search"><Search :size="16" />{{ searchText }}</el-button>
      <el-button @click="reset"><RotateCcw :size="16" />{{ resetText }}</el-button>
      <slot name="actions" />
    </div>
  </section>
</template>

<style scoped>
.query-toolbar { display: flex; align-items: flex-end; justify-content: flex-start; flex-wrap: wrap; gap: 10px; padding: 16px; border: 1px solid var(--cc-border); background: #fff; }
.query-toolbar__filters { display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: 12px 16px; }
.query-toolbar__field { display: grid; width: var(--query-field-width, 260px); max-width: 100%; min-width: 0; gap: 6px; }
.query-toolbar__label { color: var(--cc-text); font-size: 12px; font-weight: 600; line-height: 1.4; }
.query-toolbar__field :deep(.el-input), .query-toolbar__field :deep(.el-select), .query-toolbar__field :deep(.el-date-editor) { width: 100%; max-width: 100%; min-width: 0; }
.query-toolbar__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.query-toolbar__actions :deep(.el-button + .el-button) { margin-left: 0; }
@media (max-width: 720px) { .query-toolbar { align-items: stretch; flex-direction: column; } .query-toolbar__filters { width: 100%; flex-direction: column; } .query-toolbar__field { width: 100%; } .query-toolbar__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); width: 100%; } .query-toolbar__actions :deep(.el-button) { min-height: 40px; margin-left: 0; } }
</style>