feat: 完成客户端联调与通用列表组件

2026-08-01 12:17:33 +08:00
parent be7675954a
commit beb86d53e7
31 changed files with 1326 additions and 378 deletions
@@ -0,0 +1,133 @@
+<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
+  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 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">
+      <template v-for="field in fields" :key="field.key">
+        <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)"
+        />
+      </template>
+    </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(--border); background: #fff; }
+.query-toolbar__filters { display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: 10px; }
+.query-toolbar__filters :deep(.el-input), .query-toolbar__filters :deep(.el-select), .query-toolbar__filters :deep(.el-date-editor) { width: 260px; 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__filters :deep(.el-input), .query-toolbar__filters :deep(.el-select), .query-toolbar__filters :deep(.el-date-editor) { 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>