schema-page v0.4.17

schema-page

Usage

yarn add schema-page

使用 SchemaPage 快速构建一个 CRUD 的页面

一、定义组件

import React from 'react';
import schema from '@/pages/ArticleSite/schema';
import {
  AddArticleSite,
  DeleteArticleSite,
  queryArticleSite,
  UpdateArticleSite,
} from '@/services/article';
import SchemaPage from 'schema-page';
import { API } from '@/services/API';
import { Button } from 'antd';

// 自定义表单组件
const CustomComponent = (props) => {
  return <input value={props.value || ''} onChange={(e) => props.onChange(e.target.value)} />;
};


const ArticleSite = () => {
  return (
    <SchemaPage<API.ArticleSite, API.SiteQuery, API.ArticleSiteAddParams>
      expressionScope={{        
        request: (params) => queryArticleSite({ ...params }),
        handleAdd: async (formValue) => AddArticleSite(formValue),
        handleUpdate: async ({ id, status, title }) => UpdateArticleSite({ id, status, title }),
        handleDelete: async (record) => DeleteArticleSite(record),
        handleDetail: async () => {},
        formProps: {
          schema: formSchema,
          // 注册自定义的表单组件
          components: {
             CustomComponent,
          },
        },
        // 自定义操作栏的按钮
        customOtherOperation: (record, { actionRef }) => (
          <Button key="customOtherOperation" type="link" onClick={() => actionRef.current?.reload()}>
              其他
          </Button>
        ),
      }}
      schema={schema}
    />
  );
};

export default ArticleSite;

二、定义表格 schema

目前暂时由前端静态维护，后期由后端根据数据表或者 ProtoBuf 自动生成

const schema = {
  type: 'object',
  properties: {
    NO_NAME_FIELD_$0: {
      name: 'NO_NAME_FIELD_$0',
      type: 'object',
      'x-component': 'schemaTable',
      'x-component-props': {        
        request: '{{request}}',
        handleAdd: '{{handleAdd}}',
        handleUpdate: '{{handleUpdate}}',
        handleDelete: '{{handleDelete}}',
        handleDetail: '{{handleDetail}}',
        // 自定义操作栏的按钮      
        operationProps: {
          operations: [              
            '{{customOtherOperation}}',
          ],
        },          
        // 表单参数
        formProps: '{{formProps}}',
        rowKey: 'id',
        columns: [
          {
            title: '编号',
            dataIndex: 'id',
            key: 'id',            
            sorter: true,
          },
          {
            title: '站点名称',
            dataIndex: 'title',
            key: 'title',
          },
          {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
          },
        ],
      },
    },
  },
};

export default schema;

三、定义表单的 schema

可以使用 在线表单编辑器 来可视化创建表单schema

import { ISchema } from 'schema-page';

const formSchema: ISchema = {
  type: 'object',
  properties: {
    title: {      
      title: '站点名称',
      'x-component': 'input',
    },
    status: {     
      title: '状态',
      'x-component': 'switch',
    },    
    test: {
      title: 'test',
      // 写入自定义组件名即可
      'x-component': 'CustomComponent',
    },
  },
};

export default formSchema;