CpSearchBar 搜索组合条

对齐旧版报表页工具栏「搜索 | 模板维护 | 选择模板 | 另存模板 | 重置 | …」：统一按钮布局，内置 CpTemplateGroup 查询模板接入与条件重置。条件表单放默认插槽，导出 / 设置列等额外按钮放 buttons 插槽。

传入 model（条件对象）后自动获得：

• 重置 — 恢复到挂载时的初始条件
• 另存模板 — 默认把 model 深拷贝存入模板
• 选择模板 — 模板中与 model 同名的键自动回填

列配置等额外状态由页面通过 get-state 合并存入、在 @apply-template 中恢复。

完整用法

完整用法

条件 + 列配置整体存为模板：get-state 合并 selCols，@apply-template 恢复列后手动点搜索查询（对齐旧版：套用模板不自动查询）。

<template>
  <div class="demo-col">
    <CpSearchBar
      template-type="DemoReport"
      :model="form"
      :get-state="getState"
      @search="search"
      @reset="msg = '已重置为初始条件'"
      @apply-template="onApplyTemplate"
    >
      <template #buttons>
        <el-button :icon="Download" @click="msg = '导出（示意）'"
          >导出</el-button
        >
        <el-button :icon="Setting" @click="gridRef?.openColumnSetting()"
          >设置列</el-button
        >
      </template>

      <el-form inline label-width="70px" @submit.prevent>
        <el-form-item label="客户名称">
          <el-input v-model="form.customer" style="width: 180px" clearable />
        </el-form-item>
        <el-form-item label="分公司">
          <el-input v-model="form.office" style="width: 120px" clearable />
        </el-form-item>
        <el-form-item label="进出口">
          <el-select v-model="form.io" style="width: 100px">
            <el-option label="全部" value="" />
            <el-option label="出口" value="E" />
            <el-option label="进口" value="I" />
          </el-select>
        </el-form-item>
      </el-form>
    </CpSearchBar>

    <CpGrid
      ref="gridRef"
      :columns="columns"
      :height="260"
      @column-change="msg = '列已调整，另存模板可一并保存'"
    />
    <span class="demo-value">{{ msg }}</span>
  </div>
</template>

<script setup lang="ts">
/**
 * CpSearchBar 完整用法 — 对齐旧版报表页：
 * 工具栏（搜索 | 模板三件套 | 重置 | 导出 | 设置列）+ 条件表单 + 表格。
 * 设置列走 CpGrid 内置面板（openColumnSetting），
 * get-state 用 gridRef.getColumns() 把实际列顺序/宽度一并存入模板，
 * @apply-template 中恢复列。
 */
import { reactive, ref } from "vue";
import { Download, Setting } from "@element-plus/icons-vue";
import CpSearchBar from "../../src/components/CpSearchBar.vue";
import CpGrid, { type CpGridColumn } from "../../src/components/CpGrid.vue";
import type { CpTemplateItem } from "../../src/template";
import "./template-mock";

const DEFAULT_COLUMNS: CpGridColumn[] = [
  { dataField: "OrderNo", title: "主拼号", width: 140 },
  { dataField: "Customer", title: "客户简称", width: 140 },
  { dataField: "Office", title: "分公司", width: 90 },
  { dataField: "Qty", title: "箱子总数量", width: 100, dataAlign: "right" },
  { dataField: "Remark", title: "备注" },
];

const form = reactive({ customer: "", office: "青岛", io: "" });
const columns = reactive<CpGridColumn[]>(
  DEFAULT_COLUMNS.map((c) => ({ ...c })),
);
const gridRef = ref<InstanceType<typeof CpGrid>>();
const msg = ref("条件 + 列配置整体可存为模板");

/** 另存模板：条件 + 表格实际列顺序/宽度一起存 */
function getState() {
  const selCols = (gridRef.value?.getColumns() ?? columns).map((c) => ({
    ...c,
    format: undefined,
  }));
  return { ...JSON.parse(JSON.stringify(form)), selCols };
}

/** 套用模板：条件已由 CpSearchBar 自动回填，这里恢复列配置 */
function onApplyTemplate(value: Record<string, any>, item: CpTemplateItem) {
  if (Array.isArray(value.selCols) && value.selCols.length) {
    columns.splice(0, columns.length, ...value.selCols);
  }
  msg.value = `已套用模板「${item.name}」，点击搜索查询`;
}

function search() {
  gridRef.value?.setData(
    Array.from({ length: 30 }, (_, i) => ({
      OrderNo: `SZX260402${60 + i}`,
      Customer: form.customer || "湖南丰晟国际",
      Office: form.office || "SZX",
      Qty: (i % 4) + 1,
      Remark: `${form.io === "I" ? "进口" : "出口"}第 ${i + 1} 票`,
    })),
  );
  msg.value = `按条件查询：${JSON.stringify(form)}`;
}
</script>

显示代码 ▼

API

属性 Props

属性	说明	类型	默认值
model	查询条件对象（页面持有的 reactive 对象），用于重置与模板存取	Record	—
template-type	模板类型；不传则不显示模板三按钮	string	—
get-state	另存模板时取页面状态；默认深拷贝 model。需存列配置时传入合并函数	Function	—
api	覆盖全局 setTemplateContext 的接口	CpTemplateApi	—
user	覆盖全局 setTemplateContext 的当前用户	CpTemplateUser	—

事件 Events

事件	说明	回调参数
@search	—	—
@reset	重置完成（初始条件已回填 model）	—
@applyTemplate	模板已选中；model 同名键已回填，页面在此处理列配置等额外状态	(Record)

方法 Expose

方法（ref 调用）	说明
reloadTemplates	手动刷新模板下拉列表

插槽 Slots

插槽	说明	作用域参数
buttons	—	—
default	—	—