SchemaRender v1.8.0，一個庫約等於半個後臺管理系統

前言

通常，一個後臺管理系統包含的主要功能有：

資料搜尋、表格展示、編輯與刪除等常規操作。
表單的編輯、展示等處理。
其他特定業務功能。

如下圖：

SearchTable

SchemaRender v1.8.0 近期釋出，完善了 SearchTable 表格元件功能的最後一公里。

至此可以簡單高效地實現上圖的主要內容（搜尋+表格內容展示）。

程式碼示例：

import { Button, Space } from 'antd'
import { useState } from 'react'

import SearchTable from '@schema-render/search-table-react'

const searchSchema = {
  renderType: 'Root',
  properties: {
    title: {
      title: '標題',
      renderType: 'InputText',
    },
    // ...更多搜尋項定義
    publish_time: {
      title: '同步時間',
      renderType: 'DateRangePicker',
    },
  },
}

const columns = [
  { title: 'ID', dataIndex: 'id', width: 80 },
  { title: '標題', dataIndex: 'title', width: 160 },
  // ...更多表格內容定義
]

const fetchData = async (params) => {
  // 獲取後端 Http 介面資料
}

const Page = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState([])

  // 操作欄配置
  const actionItems = (record) => {
    return [
      { text: '檢視', href: `/content/view?id=${record.id}` },
      { text: '編輯', href: `/content/edit?id=${record.id}`, isShow: record.canEdit },
    ]
  }

  // 標題欄左側按鈕組
  const leftExtraContent = (
    <Space>
      <Button type="primary" onClick={() => 'xxx'}>新增內容</Button>
      <Button onClick={() => 'xxx'}>一鍵稽核</Button>
      <Button type="primary" onClick={() => 'xxx'}>關聯賬戶</Button>
    </Space>
  )

  return (
    <SearchTable
      className="custom-class-name"
      search={{ schema: searchSchema }}
      title={{
        tabs: {
          tabBarExtraContent: {
            left: leftExtraContent,
          },
        },
      }}
      // Ant Design 表格元件 API
      table={{
        columns,
        actionItems,
        rowSelection: {
          selectedRowKeys,
          onChange: (newSelectedRowKeys) => {
            setSelectedRowKeys(newSelectedRowKeys)
          },
        },
      }}
      // 介面請求
      request={async (params) => {
        const res = await fetchData(params)
        return {
          data: res.list,
          total: res.total,
        }
      }}
    />
  )
}

export default Page

SearchTable 包含的主要特性如下：

預設列寬度處理
支援表格高度自適應（一屏展示）
支援自動新增序號
支援配置式操作欄
支援常見資料型別顯示
支援前端排序：按拼音、數字、日期格式排序
支援“合計欄”，透過資料自動匹配
支援表格列顯示、隱藏、排序、寬度設定
支援表格列設定持久化儲存與自定義合併演算法

下面挑選幾個特性嘮叨嘮叨。

序號與操作列

新增 showRowNumber 屬性，可自動新增序號列。

table={{
  // 新增序號列
  showRowNumber: true
}}

效果如下，自定義序號樣式見文件。

宣告 actionItems 屬性，可新增操作列，設定 confirmAgain 屬性可增加二次確認提示，詳見文件，操作按鈕多於設定閾值會以“更多”下拉選單形式互動。

效果圖一	效果圖二

資料顯示

內建了一些常見的通用的資料渲染型別，只需要在 column 上宣告 valueType 屬性即可。

const columns = [
  {
    title: '程式碼塊(code)',
    dataIndex: 'data_code',
    valueType: 'code',
  },
  {
    title: '千分位數字(comma-number)',
    dataIndex: 'data_number',
    valueType: 'comma-number',
  },
]