@hbdlzy/ui-core 0.1.2 → 0.1.4

package/src/components/BaseSearchForm/BaseSearchForm.vue

@@ -0,0 +1,267 @@
+<template>
+  <div class="base-search-form">
+    <el-form
+      class="base-search-form__form"
+      :model="innerModel"
+      :label-width="normalizedLabelWidth"
+      @submit.prevent="submit"
+    >
+      <div
+        class="base-search-form__grid"
+        :style="gridStyle"
+      >
+        <el-form-item
+          v-for="field in visibleFields"
+          :key="field.key"
+          class="base-search-form__item"
+          :label="field.label"
+          :style="getFieldStyle(field)"
+        >
+          <slot
+            v-if="field.type === 'slot'"
+            :name="field.key"
+            :field="field"
+            :model="innerModel"
+            :value="innerModel[field.key]"
+            :set-value="(value: unknown) => setFieldValue(field.key, value)"
+          />
+
+          <el-select
+            v-else-if="field.type === 'select'"
+            class="base-search-form__control"
+            :model-value="innerModel[field.key]"
+            :placeholder="field.placeholder || field.label"
+            :clearable="field.clearable !== false"
+            :disabled="field.disabled"
+            v-bind="field.props"
+            @update:model-value="(value: unknown) => handleFieldChange(field.key, value)"
+          >
+            <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-if="field.type === 'date' || field.type === 'dateRange'"
+            class="base-search-form__control"
+            :model-value="innerModel[field.key]"
+            :type="field.type === 'dateRange' ? 'daterange' : 'date'"
+            :placeholder="field.placeholder || field.label"
+            :start-placeholder="field.props?.startPlaceholder as string || '开始日期'"
+            :end-placeholder="field.props?.endPlaceholder as string || '结束日期'"
+            :clearable="field.clearable !== false"
+            :disabled="field.disabled"
+            v-bind="field.props"
+            @update:model-value="(value: unknown) => handleFieldChange(field.key, value)"
+          />
+
+          <el-input
+            v-else
+            class="base-search-form__control"
+            :model-value="innerModel[field.key]"
+            :placeholder="field.placeholder || field.label"
+            :clearable="field.clearable !== false"
+            :disabled="field.disabled"
+            v-bind="field.props"
+            @update:model-value="(value: unknown) => handleFieldChange(field.key, value)"
+            @keyup.enter="submit"
+          />
+        </el-form-item>
+
+        <div class="base-search-form__actions">
+          <slot
+            name="actions-before"
+            :model="innerModel"
+          />
+          <el-button
+            type="primary"
+            @click="submit"
+          >
+            {{ submitText }}
+          </el-button>
+          <el-button @click="reset">
+            {{ resetText }}
+          </el-button>
+          <el-button
+            v-if="showCollapse && hasCollapsedFields"
+            link
+            type="primary"
+            @click="toggleCollapsed"
+          >
+            {{ isCollapsed ? expandText : collapseText }}
+          </el-button>
+          <slot
+            name="actions-after"
+            :model="innerModel"
+          />
+        </div>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type {
+  BaseSearchFormExpose,
+  BaseSearchFormField,
+  BaseSearchFormModel,
+  BaseSearchFormProps
+} from './BaseSearchForm.types'
+import {
+  cloneSearchFormModel,
+  getVisibleSearchFields,
+  resetSearchFormModel,
+  toSearchFormCssValue
+} from './BaseSearchForm.utils'
+
+defineOptions({
+  name: 'BaseSearchForm'
+})
+
+const props = withDefaults(defineProps<BaseSearchFormProps>(), {
+  modelValue: () => ({}),
+  collapsed: true,
+  showCollapse: true,
+  columns: 4,
+  labelWidth: 80,
+  fieldWidth: undefined,
+  gutter: 16,
+  submitText: '查询',
+  resetText: '重置',
+  expandText: '展开',
+  collapseText: '收起'
+})
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: BaseSearchFormModel): void
+  (event: 'search', value: BaseSearchFormModel): void
+  (event: 'reset', value: BaseSearchFormModel): void
+  (event: 'field-change', key: string, value: unknown, model: BaseSearchFormModel): void
+}>()
+
+const innerModel = ref<BaseSearchFormModel>(cloneSearchFormModel(props.modelValue))
+const isCollapsed = ref(props.collapsed)
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    innerModel.value = cloneSearchFormModel(value)
+  },
+  { deep: true }
+)
+
+watch(
+  () => props.collapsed,
+  (value) => {
+    isCollapsed.value = value
+  }
+)
+
+const visibleFields = computed(() => getVisibleSearchFields(props.fields, isCollapsed.value))
+const hasCollapsedFields = computed(() => props.fields.some((field) => field.collapsed && !field.hidden))
+const normalizedLabelWidth = computed(() => toSearchFormCssValue(props.labelWidth))
+
+const gridStyle = computed(() => ({
+  gridTemplateColumns: `repeat(${Math.max(1, props.columns)}, minmax(0, 1fr))`,
+  gap: `${props.gutter}px`
+}))
+
+function getFieldStyle(field: BaseSearchFormField) {
+  return {
+    gridColumn: field.span ? `span ${Math.max(1, field.span)}` : undefined,
+    '--base-search-form-field-width': toSearchFormCssValue(props.fieldWidth)
+  }
+}
+
+function emitModelUpdate() {
+  emit('update:modelValue', cloneSearchFormModel(innerModel.value))
+}
+
+function handleFieldChange(key: string, value: unknown) {
+  setFieldValue(key, value)
+  emit('field-change', key, value, cloneSearchFormModel(innerModel.value))
+}
+
+function setFieldValue(key: string, value: unknown) {
+  innerModel.value = {
+    ...innerModel.value,
+    [key]: value
+  }
+  emitModelUpdate()
+}
+
+function submit() {
+  emit('search', cloneSearchFormModel(innerModel.value))
+}
+
+function reset() {
+  innerModel.value = resetSearchFormModel(props.fields)
+  emitModelUpdate()
+  emit('reset', cloneSearchFormModel(innerModel.value))
+}
+
+function toggleCollapsed() {
+  isCollapsed.value = !isCollapsed.value
+}
+
+function getModel() {
+  return cloneSearchFormModel(innerModel.value)
+}
+
+defineExpose<BaseSearchFormExpose>({
+  submit,
+  reset,
+  setFieldValue,
+  getModel
+})
+</script>
+
+<style scoped>
+.base-search-form {
+  width: 100%;
+}
+
+.base-search-form__grid {
+  display: grid;
+  align-items: start;
+}
+
+.base-search-form__item {
+  min-width: 0;
+  margin-bottom: 0;
+}
+
+.base-search-form__control {
+  width: var(--base-search-form-field-width, 100%);
+}
+
+.base-search-form__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  min-width: 0;
+}
+
+@media (max-width: 960px) {
+  .base-search-form__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+  }
+}
+
+@media (max-width: 640px) {
+  .base-search-form__grid {
+    grid-template-columns: minmax(0, 1fr) !important;
+  }
+
+  .base-search-form__actions {
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+}
+</style>

package/src/components/BaseSearchForm/README.md

@@ -0,0 +1,66 @@
+# BaseSearchForm
+
+`BaseSearchForm` 用于统一列表页查询区，内置输入框、下拉框、日期和日期范围字段，以及查询、重置、展开/收起操作。
+
+## 基础用法
+
+```vue
+<template>
+  <BaseSearchForm
+    v-model="query"
+    :fields="fields"
+    @search="loadList"
+    @reset="loadList"
+  />
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { BaseSearchForm, type BaseSearchFormField } from '@hbdlzy/ui-core'
+
+const query = reactive({})
+const fields: BaseSearchFormField[] = [
+  { key: 'keyword', label: '名称', type: 'input' },
+  {
+    key: 'status',
+    label: '状态',
+    type: 'select',
+    options: [
+      { label: '启用', value: 'enabled' },
+      { label: '停用', value: 'disabled' }
+    ]
+  },
+  { key: 'createdAt', label: '创建日期', type: 'dateRange', collapsed: true }
+]
+
+function loadList(value: Record<string, unknown>) {
+  console.log(value)
+}
+</script>
+```
+
+## Props
+
+- `modelValue`: 查询模型
+- `fields`: 字段配置
+- `collapsed`: 是否默认收起带 `collapsed` 标记的字段
+- `showCollapse`: 是否显示展开/收起按钮
+- `columns`: 每行列数
+- `labelWidth`: 表单 label 宽度
+- `fieldWidth`: 控件宽度
+- `gutter`: 栅格间距
+- `submitText`: 查询按钮文案
+- `resetText`: 重置按钮文案
+
+## Events
+
+- `update:modelValue`: 字段值变更
+- `search`: 点击查询或输入框回车
+- `reset`: 点击重置
+- `field-change`: 单个字段变更
+
+## Slots
+
+- `[field.key]`: 字段 `type` 为 `slot` 时的自定义字段内容
+- `actions-before`: 操作按钮前扩展
+- `actions-after`: 操作按钮后扩展

package/src/components/BaseSearchForm/index.ts

@@ -0,0 +1,20 @@
+import BaseSearchForm from './BaseSearchForm.vue'
+
+export default BaseSearchForm
+
+export {
+  cloneSearchFormModel,
+  getVisibleSearchFields,
+  resetSearchFormModel,
+  toSearchFormCssValue
+} from './BaseSearchForm.utils'
+export type {
+  BaseSearchFormCssValue,
+  BaseSearchFormExpose,
+  BaseSearchFormField,
+  BaseSearchFormFieldType,
+  BaseSearchFormModel,
+  BaseSearchFormOption,
+  BaseSearchFormOptionValue,
+  BaseSearchFormProps
+} from './BaseSearchForm.types'

package/src/components/BaseTable/BaseTable.types.ts

@@ -4,6 +4,14 @@ export type BaseTableColumnKind = 'text' | 'link' | 'actions' | 'image' | 'tag'
 export type BaseTableSortOrder = 'ascending' | 'descending' | null
 export type BaseTableSortDirection = string | null
 
+export interface BaseTableHeaderSearchConfig {
+  paramKey?: string
+  placeholder?: string
+  width?: BaseTableCssValue
+  searchText?: string
+  resetText?: string
+}
+
 export interface BaseTableOption {
   label: string
   value: string | number | boolean
@@ -31,6 +39,7 @@ export interface BaseTableColumn<Row = Record<string, any>> {
   fixed?: boolean | 'left' | 'right'
   sortable?: boolean | 'custom'
   sortField?: string
+  headerSearch?: boolean | BaseTableHeaderSearchConfig
   showOverflowTooltip?: boolean
   className?: string
   headerClassName?: string
@@ -96,7 +105,7 @@ export interface BaseTableNormalizedResult<Row = Record<string, any>> {
 
 export type BaseTableRequestHandler<Row = Record<string, any>> = (
   params: BaseTableRequestParams
-) => Promise<BaseTableRequestResult<Row> | Row[]>
+) => Promise<BaseTableRequestResult<Row> | Row[] | unknown>
 
 export type BaseTableResultAdapter<Row = Record<string, any>> = (
   result: unknown,
@@ -167,6 +176,9 @@ export interface BaseTableExpose<Row = Record<string, any>> {
   refresh: () => Promise<void>
   setData: (data: Row[]) => void
   resetPage: () => Promise<void>
+  setHeaderSearchValue: (key: string, value: string, shouldReload?: boolean) => Promise<void>
+  resetHeaderSearch: (key?: string) => Promise<void>
+  getHeaderSearchValues: () => Record<string, string>
   clearSelection: () => void
   toggleRowSelection: (row: Row, selected?: boolean) => void
   getSelectionRows: () => Row[]