c-admin-kit 1.0.0

package/src/components/SearchBox/index.vue

@@ -0,0 +1,582 @@
+<template>
+  <div class="search-box">
+    <el-form
+      :model="searchForm"
+      :label-width="labelWidth"
+      class="search-form"
+      @keyup="handleFormKeyup"
+    >
+      <!-- 搜索字段区域 -->
+      <el-row :gutter="16" class="search-fields">
+        <el-col
+          v-for="field in displayFields"
+          :key="field.prop"
+          :xs="24"
+          :sm="field.props?.span || 12"
+          :md="field.props?.span || colSpan"
+          :lg="field.props?.span || colSpan"
+          :xl="field.props?.span || colSpan"
+          class="field-col"
+        >
+          <el-form-item
+            :label="field.label"
+            :prop="field.prop"
+            :class="{ 'is-required': field.required }"
+          >
+            <!-- 动态组件 -->
+            <component
+              :is="field.component || field.type"
+              v-model="searchForm[field.prop]"
+              v-bind="getComponentProps(field)"
+              style="width: 100%"
+              @change="(value: any) => handleFieldChange(field.prop, value)"
+              @keydown.enter="
+                field.component === 'el-input' ? handleSearch : null
+              "
+            >
+              <!-- 选择器选项 -->
+              <template
+                v-if="
+                  field.component === 'el-select' || field.type === 'select'
+                "
+              >
+                <el-option
+                  v-for="option in getFieldOptions(field)"
+                  :key="option.value"
+                  :label="option.label"
+                  :value="option.value"
+                />
+              </template>
+
+              <!-- 单选框选项 -->
+              <template
+                v-else-if="
+                  field.component === 'el-radio-group' || field.type === 'radio'
+                "
+              >
+                <el-radio
+                  v-for="option in getFieldOptions(field)"
+                  :key="option.value"
+                  :label="option.value"
+                >
+                  {{ option.label }}
+                </el-radio>
+              </template>
+
+              <!-- 复选框选项 -->
+              <template
+                v-else-if="
+                  field.component === 'el-checkbox-group' ||
+                  field.type === 'checkbox'
+                "
+              >
+                <el-checkbox
+                  v-for="option in getFieldOptions(field)"
+                  :key="option.value"
+                  :label="option.value"
+                >
+                  {{ option.label }}
+                </el-checkbox>
+              </template>
+            </component>
+
+            <!-- 自定义插槽 -->
+            <slot
+              v-if="field.type === 'slot'"
+              :name="field.slotName"
+              :value="searchForm[field.prop]"
+              :onChange="(val: any) => (searchForm[field.prop] = val)"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 操作按钮区域 -->
+      <el-row class="action-row">
+        <el-col :span="24" class="action-col">
+          <div class="button-group">
+            <el-button type="primary" :loading="loading" @click="handleSearch">
+              {{ searchText }}
+            </el-button>
+            <el-button @click="handleReset">{{ resetText }}</el-button>
+            <el-button v-if="showExport" type="success" @click="handleExport">
+              {{ exportText }}
+            </el-button>
+            <!-- 展开/折叠按钮 -->
+            <el-button
+              v-if="canToggle"
+              type="text"
+              class="toggle-btn"
+              @click="toggleExpand"
+            >
+              {{ isExpanded ? "收起" : "展开" }}
+              <el-icon class="toggle-icon">
+                <ArrowUp v-if="isExpanded" />
+                <ArrowDown v-else />
+              </el-icon>
+            </el-button>
+          </div>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, reactive, onMounted, unref, type PropType } from "vue";
+import { ArrowUp, ArrowDown } from "@element-plus/icons-vue";
+import type { AnyRecord, SearchField } from "../../types";
+
+defineOptions({ name: "CSearchBox" });
+
+const props = defineProps({
+  fields: {
+    type: Array as PropType<SearchField[]>,
+    default: () => [],
+  },
+  searchText: {
+    type: String,
+    default: "查询",
+  },
+  resetText: {
+    type: String,
+    default: "重置",
+  },
+  exportText: {
+    type: String,
+    default: "导出",
+  },
+  showExport: {
+    type: Boolean,
+    default: false,
+  },
+  initialValues: {
+    type: Object as PropType<AnyRecord>,
+    default: () => ({}),
+  },
+  fieldsPerRow: {
+    type: Number,
+    default: 4,
+  },
+  labelWidth: {
+    type: String,
+    default: "80px",
+  },
+  defaultExpanded: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["search", "reset", "export", "field-change"]);
+
+const loading = ref(false);
+const isExpanded = ref(props.defaultExpanded);
+const optionsMap = reactive<Record<string, any[]>>({});
+
+const isFieldVisible = (field: SearchField) => {
+  if (field.visible === undefined) return true;
+  if (typeof field.visible === "function") {
+    return field.visible(searchForm.value);
+  }
+  return unref(field.visible);
+};
+
+const visibleFields = computed(() => {
+  return props.fields.filter((field) => isFieldVisible(field));
+});
+
+const colSpan = computed(() => {
+  return Math.floor(24 / props.fieldsPerRow);
+});
+
+const defaultFieldCount = computed(() => {
+  return 2 * props.fieldsPerRow;
+});
+
+const canToggle = computed(() => {
+  return visibleFields.value.length > defaultFieldCount.value;
+});
+
+const displayFields = computed(() => {
+  if (isExpanded.value || !canToggle.value) {
+    return visibleFields.value;
+  }
+  return visibleFields.value.slice(0, defaultFieldCount.value);
+});
+
+const initSearchForm = (): AnyRecord => {
+  const form: AnyRecord = {};
+  props.fields.forEach((field) => {
+    if (props.initialValues[field.prop] !== undefined) {
+      form[field.prop] = props.initialValues[field.prop];
+    } else {
+      switch (field.type) {
+        case "select":
+          form[field.prop] = field.multiple ? [] : "";
+          break;
+        case "daterange":
+          form[field.prop] = [];
+          break;
+        case "number":
+          form[field.prop] = field.defaultValue ?? null;
+          break;
+        default:
+          form[field.prop] = field.defaultValue ?? "";
+      }
+    }
+  });
+  return form;
+};
+
+const searchForm = ref<AnyRecord>(initSearchForm());
+
+const loadFieldOptions = async (field: SearchField, dependValue: any) => {
+  if (!field.relation) return;
+
+  const { getOptions } = field.relation;
+
+  if (dependValue === undefined || dependValue === "" || dependValue === null) {
+    optionsMap[field.prop] = field.defaultOptions || [];
+    return;
+  }
+
+  try {
+    let options: any[] = [];
+    if (typeof getOptions === "function") {
+      const res = getOptions(dependValue, searchForm.value);
+      options = res instanceof Promise ? await res : res;
+    } else if (typeof getOptions === "object" && (getOptions as any)[dependValue]) {
+      options = (getOptions as any)[dependValue];
+    }
+    optionsMap[field.prop] = options || [];
+  } catch (error) {
+    console.error(`加载字段 ${field.prop} 选项失败:`, error);
+    optionsMap[field.prop] = [];
+  }
+};
+
+const initOptions = () => {
+  props.fields.forEach((field) => {
+    if (field.relation) {
+      const { dependOn } = field.relation;
+      const dependValue = searchForm.value[dependOn];
+      loadFieldOptions(field, dependValue);
+    }
+  });
+};
+
+const getComponentProps = (field: SearchField) => {
+  const baseProps = {
+    clearable: field.clearable !== false,
+    placeholder:
+      field.placeholder ||
+      `请${
+        field.type === "input" || field.type === "number" ? "输入" : "选择"
+      }${field.label}`,
+  };
+
+  return {
+    ...baseProps,
+    ...field.props,
+  };
+};
+
+const getFieldOptions = (field: SearchField) => {
+  if (field.relation) {
+    return optionsMap[field.prop] || field.defaultOptions || [];
+  }
+  return field.options || [];
+};
+
+const handleFieldChange = (prop: string, value: any) => {
+  const affectedFields = props.fields.filter(
+    (field) => field.relation && field.relation.dependOn === prop
+  );
+
+  affectedFields.forEach((field) => {
+    if (field.multiple) {
+      searchForm.value[field.prop] = [];
+    } else {
+      searchForm.value[field.prop] = "";
+    }
+    loadFieldOptions(field, value);
+  });
+
+  emit("field-change", { prop, value, form: { ...searchForm.value } });
+};
+
+const toggleExpand = () => {
+  isExpanded.value = !isExpanded.value;
+};
+
+const processDateRangeFields = (formData: AnyRecord) => {
+  const params: AnyRecord = {};
+
+  props.fields.forEach((field) => {
+    if (!isFieldVisible(field)) return;
+
+    const value = formData[field.prop];
+
+    if (field.dateRange) {
+      if (Array.isArray(value) && value.length === 2 && value[0] && value[1]) {
+        const { startField, endField, format } = field.dateRange;
+        if (typeof format === "function") {
+          params[startField] = format(value[0]);
+          params[endField] = format(value[1]);
+        } else {
+          params[startField] = value[0];
+          params[endField] = value[1];
+        }
+      }
+    } else if (field.returnAllIds) {
+      const { fileIds } = field as any;
+      if (value) {
+        const valueArr = Array.isArray(value) ? value : [value];
+        fileIds?.forEach((v: string, ind: number) => {
+          const item = valueArr[ind];
+          if (item) params[v] = item;
+        });
+      }
+      const valueArr = Array.isArray(value) ? value : [value];
+      const lastItem = valueArr[valueArr.length - 1];
+      if (lastItem) {
+        params["currentKey"] = lastItem;
+        params[field.prop] = lastItem;
+      }
+    } else {
+      if (value !== "" && value !== null && value !== undefined) {
+        if (Array.isArray(value) && value.length === 0) return;
+        params[field.prop] = value;
+      }
+    }
+  });
+
+  return params;
+};
+
+const handleSearch = () => {
+  loading.value = true;
+  const params = processDateRangeFields(searchForm.value);
+  emit("search", params);
+  setTimeout(() => {
+    loading.value = false;
+  }, 300);
+};
+
+const handleReset = () => {
+  searchForm.value = initSearchForm();
+  initOptions();
+  const params = processDateRangeFields(searchForm.value);
+  emit("reset", params);
+};
+
+const handleExport = () => {
+  const params = processDateRangeFields(searchForm.value);
+  emit("export", params);
+};
+
+watch(
+  () => props.fields,
+  (newFields, oldFields) => {
+    const fieldsChanged = () => {
+      if (!oldFields || newFields.length !== oldFields.length) return true;
+      return newFields.some((newField, index) => {
+        const oldField = oldFields[index];
+        if (!oldField) return true;
+        const { options: newOptions, ...newFieldRest } = newField as AnyRecord;
+        const { options: oldOptions, ...oldFieldRest } = oldField as AnyRecord;
+        return JSON.stringify(newFieldRest) !== JSON.stringify(oldFieldRest);
+      });
+    };
+
+    if (fieldsChanged()) {
+      searchForm.value = initSearchForm();
+    }
+    initOptions();
+  },
+  { deep: true }
+);
+
+watch(
+  () => props.initialValues,
+  (newVal) => {
+    Object.keys(newVal || {}).forEach((key) => {
+      if (key in searchForm.value) {
+        searchForm.value[key] = (newVal as AnyRecord)[key];
+      }
+    });
+    initOptions();
+  },
+  { deep: true }
+);
+
+const handleFormKeyup = (event: KeyboardEvent) => {
+  if (event.key === "Enter") {
+    const target = event.target as HTMLElement | null;
+    if (!target) return;
+    const isInputElement =
+      target.tagName === "INPUT" || target.tagName === "TEXTAREA";
+    const isInsidePopper =
+      target.closest(".el-popper") || target.closest(".el-select-dropdown");
+
+    if (isInputElement && !isInsidePopper) {
+      handleSearch();
+    }
+  }
+};
+
+onMounted(() => {
+  initOptions();
+});
+
+defineExpose({
+  search: handleSearch,
+  reset: handleReset,
+  export: handleExport,
+  getParams: () => processDateRangeFields(searchForm.value),
+  getAllParams: () => ({ ...searchForm.value }),
+  setValues: (values: AnyRecord) => {
+    Object.keys(values || {}).forEach((key) => {
+      if (key in searchForm.value) {
+        searchForm.value[key] = values[key];
+      }
+    });
+    initOptions();
+  },
+  toggleExpand: () => {
+    if (canToggle.value) {
+      toggleExpand();
+    }
+  },
+});
+</script>
+
+<style scoped>
+.search-box {
+  border-radius: 4px;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+}
+
+.search-form {
+  width: 100%;
+}
+
+.search-fields {
+  width: 100%;
+}
+
+.field-col {
+  margin-bottom: 12px;
+}
+
+.action-col {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.search-form :deep(.el-form-item) {
+  margin-bottom: 0;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.search-form :deep(.el-form-item__label) {
+  flex-shrink: 0;
+  font-weight: 500;
+  color: #606266;
+  line-height: 32px;
+  min-width: v-bind(labelWidth);
+  width: v-bind(labelWidth);
+  padding-right: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.search-form :deep(.el-form-item__content) {
+  flex: 1;
+  line-height: 32px;
+  min-width: 0;
+  width: 100%;
+}
+
+.is-required :deep(.el-form-item__label::before) {
+  content: "*";
+  color: #f56c6c;
+  margin-right: 4px;
+}
+
+.button-group {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.toggle-btn {
+  padding: 8px 15px;
+  color: #409eff;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.toggle-btn:hover {
+  color: #66b1ff;
+}
+
+.toggle-icon {
+  font-size: 12px;
+  transition: transform 0.3s;
+}
+
+.search-form :deep(.el-input),
+.search-form :deep(.el-select),
+.search-form :deep(.el-date-editor),
+.search-form :deep(.el-input-number),
+.search-form :deep(.el-cascader) {
+  width: 100%;
+  flex: 1;
+}
+
+@media (max-width: 768px) {
+  .search-box {
+    padding: 16px;
+  }
+
+  .search-form :deep(.el-form-item) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .search-form :deep(.el-form-item__label) {
+    line-height: 20px;
+    margin-bottom: 8px;
+    width: 100%;
+    min-width: auto;
+    white-space: normal;
+  }
+
+  .action-col {
+    justify-content: flex-start;
+  }
+
+  .button-group {
+    width: 100%;
+    flex-direction: column;
+  }
+
+  .button-group .el-button {
+    width: 100%;
+  }
+
+  .toggle-btn {
+    width: 100%;
+    justify-content: center;
+  }
+}
+</style>