feat: 盲写第一版

examples/search-table-react/001-intro.md

@@ -1,5 +1,156 @@
+---
+order: 1
+toc: content
+---
+
 # 介绍
 
-:::info{title=温馨提示}
-正在建设中
-:::
+`SearchTable` 是基于 Search + Antd Table 封装的条件搜索表格组件。
+
+特点：
+
+- 开箱即用、简单易用
+- 支持空数据占位符
+- 支持表格高度自适应（自动计算 scrollY）
+- 支持配置模式操作栏
+- 支持自动添加序号
+
+- 支持前端排序：按拼音、数字、日期排序
+- 支持后端排序
+- 支持“合计栏”，通过数据自动匹配
+
+- 支持表格列隐藏或展示、排序、宽度设置（可配置接口持久化存储）
+- 支持表格列宽度拖拽设置
+- 自动 columns key 计算
+
+- 支持表格数据前端查询（精准查询、模糊查询）
+
+## 安装
+
+```bash
+npm install @schema-render/search-table-react --save
+```
+
+如果没有安装 antd，还需安装它
+
+```bash
+npm install antd --save
+```
+
+## 使用
+
+常与表格配合用于后台管理系统数据检索与展示操作。
+
+```tsx
+/**
+ * defaultShowCode: true
+ */
+import { sleep } from '@examples/utils'
+import columns from './helpers/columns'
+import createDataSource from './helpers/createDataSource'
+import type { IFormRenderRootSchema } from '@schema-render/form-render-react'
+
+// 引入 Search
+import SearchTable from '@schema-render/search-table-react'
+
+// 定义 Schema
+const schema: IFormRenderRootSchema = {
+  renderType: 'Root',
+  properties: {
+    supplier_name: {
+      title: '供应商名称',
+      renderType: 'InputText',
+    },
+    supplier_code: {
+      title: '供应商编码',
+      renderType: 'InputText',
+    },
+    bill_no: {
+      title: '单据编号',
+      renderType: 'InputText',
+    },
+    bill_type: {
+      title: '单据类型',
+      renderType: 'Select',
+      renderOptions: {
+        options: [
+          { label: '采购单', value: 1 },
+          { label: '入库单', value: 2 },
+          { label: '退货单', value: 3 },
+        ],
+      },
+    },
+    bill_date: {
+      title: '单据日期',
+      renderType: 'DateRangePicker',
+    },
+    bill_status: {
+      title: '单据状态',
+      renderType: 'Select',
+      renderOptions: {
+        options: [
+          { label: '已提交', value: 1 },
+          { label: '待提交', value: 2 },
+          { label: '待审批', value: 3 },
+        ],
+      },
+    },
+    operator: {
+      title: '制单人',
+      renderType: 'InputText',
+    },
+    goods_name: {
+      title: '商品名称',
+      renderType: 'InputText',
+    },
+    goods_code: {
+      title: '商品编码',
+      renderType: 'InputText',
+    },
+    goods_category: {
+      title: '商品分类',
+      renderType: 'Select',
+      renderOptions: {
+        options: [
+          { label: '水果鲜花', value: 1 },
+          { label: '海鲜水产', value: 2 },
+          { label: '粮油调味', value: 3 },
+        ],
+      },
+    },
+  },
+}
+
+const Demo = () => {
+  return (
+    <SearchTable
+      style={{ marginTop: 20 }}
+      search={{
+        schema,
+      }}
+      table={{
+        columns,
+        autoScrollY: true,
+      }}
+      request={async (searchParams) => {
+        // 打印搜索条件
+        console.log('searchParams:', searchParams)
+
+        // 模拟请求接口获取表格数据
+        await sleep()
+        const data = createDataSource()
+
+        // 返回表格数据渲染
+        return {
+          // 表格数据
+          data,
+          // 数据总数，用于分页
+          total: 100,
+        }
+      }}
+    />
+  )
+}
+
+export default Demo
+```

examples/search-table-react/002-all.md

@@ -0,0 +1,170 @@
+---
+order: 1
+toc: content
+---
+
+# 介绍
+
+`SearchTable` 是基于 Search + Antd Table 封装的条件搜索表格组件。
+
+特点：
+
+- 开箱即用、简单易用
+- 支持空数据占位符
+- 支持表格高度自适应（自动计算 scrollY）
+- 支持配置模式操作栏
+- 支持自动添加序号
+
+- 支持前端排序：按拼音、数字、日期排序
+- 支持后端排序
+- 支持“合计栏”，通过数据自动匹配
+
+- 支持表格列隐藏或展示、排序、宽度设置（可配置接口持久化存储）
+- 支持表格列宽度拖拽设置
+- 自动 columns key 计算
+
+- 支持表格数据前端查询（精准查询、模糊查询）
+
+## 安装
+
+```bash
+npm install @schema-render/search-table-react --save
+```
+
+如果没有安装 antd，还需安装它
+
+```bash
+npm install antd --save
+```
+
+## 使用
+
+常与表格配合用于后台管理系统数据检索与展示操作。
+
+```tsx
+/**
+ * defaultShowCode: true
+ */
+import { sleep } from '@examples/utils'
+import columns from './helpers/columns'
+import createDataSource from './helpers/createDataSource'
+import type { IFormRenderRootSchema } from '@schema-render/form-render-react'
+
+// 引入 Search
+import SearchTable from '@schema-render/search-table-react'
+
+// 定义 Schema
+const schema: IFormRenderRootSchema = {
+  renderType: 'Root',
+  properties: {
+    supplier_name: {
+      title: '供应商名称',
+      renderType: 'InputText',
+    },
+    supplier_code: {
+      title: '供应商编码',
+      renderType: 'InputText',
+    },
+    bill_no: {
+      title: '单据编号',
+      renderType: 'InputText',
+    },
+    bill_type: {
+      title: '单据类型',
+      renderType: 'Select',
+      renderOptions: {
+        options: [
+          { label: '采购单', value: 1 },
+          { label: '入库单', value: 2 },
+          { label: '退货单', value: 3 },
+        ],
+      },
+    },
+    bill_date: {
+      title: '单据日期',
+      renderType: 'DateRangePicker',
+    },
+    bill_status: {
+      title: '单据状态',
+      renderType: 'Select',
+      renderOptions: {
+        options: [
+          { label: '已提交', value: 1 },
+          { label: '待提交', value: 2 },
+          { label: '待审批', value: 3 },
+        ],
+      },
+    },
+    operator: {
+      title: '制单人',
+      renderType: 'InputText',
+    },
+    goods_name: {
+      title: '商品名称',
+      renderType: 'InputText',
+    },
+    goods_code: {
+      title: '商品编码',
+      renderType: 'InputText',
+    },
+    goods_category: {
+      title: '商品分类',
+      renderType: 'Select',
+      renderOptions: {
+        options: [
+          { label: '水果鲜花', value: 1 },
+          { label: '海鲜水产', value: 2 },
+          { label: '粮油调味', value: 3 },
+        ],
+      },
+    },
+  },
+}
+
+const Demo = () => {
+  // 处理搜索
+  const fetchTableData = async (searchParams) => {
+    // 打印搜索条件
+    console.log('searchParams:', searchParams)
+
+    // 模拟请求接口并重新设置表格数据
+    await sleep()
+
+    return {
+      dataSource: createDataSource(),
+      total: 100,
+    }
+  }
+
+  return (
+    <SearchTable
+      style={{ marginTop: 20 }}
+      header={() => <h3>Header</h3>}
+      search={{
+        schema,
+      }}
+      beforeTitle={() => <h3>before title</h3>}
+      title={{
+        tabs: {
+          items: [
+            { key: '1', label: '商品销量Top10' },
+            { key: '2', label: '商品销售Top30' },
+          ],
+          activeKey: '1',
+          // onChange: setActiveTabKey,
+        },
+        tabsRightContent: () => <h3>tab right Content</h3>,
+        extraRightContent: () => <h3>extraRightContent</h3>,
+      }}
+      afterTitle={() => <h3>after title</h3>}
+      table={{
+        columns,
+      }}
+      footer={() => <h3>Footer</h3>}
+      request={fetchTableData}
+    />
+  )
+}
+
+export default Demo
+```

examples/search-table-react/helpers/columns.ts

@@ -0,0 +1,61 @@
+import type { TableProps } from 'antd'
+
+const columns: TableProps<object>['columns'] = [
+  {
+    title: '供应商名称',
+    dataIndex: 'supplier_name',
+    align: 'center',
+  },
+  {
+    title: '供应商编码',
+    dataIndex: 'supplier_code',
+    align: 'center',
+  },
+  {
+    title: '单据编号',
+    dataIndex: 'bill_no',
+    align: 'center',
+  },
+  {
+    title: '单据类型',
+    dataIndex: 'bill_type',
+    align: 'center',
+  },
+  {
+    title: '单据日期',
+    dataIndex: 'bill_date',
+    align: 'center',
+  },
+  {
+    title: '单据状态',
+    dataIndex: 'bill_status',
+    align: 'center',
+  },
+  {
+    title: '制单人',
+    dataIndex: 'operator',
+    align: 'center',
+  },
+  {
+    title: '商品名称',
+    dataIndex: 'goods_name',
+    align: 'center',
+  },
+  {
+    title: '商品编码',
+    dataIndex: 'goods_code',
+    align: 'center',
+  },
+  {
+    title: '商品分类',
+    dataIndex: 'goods_category',
+    align: 'center',
+  },
+  {
+    title: '商品日期',
+    dataIndex: 'goods_date',
+    align: 'center',
+  },
+]
+
+export default columns