bi-sdk-react 0.0.55 → 0.0.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bi-sdk-react",
-  "version": "0.0.55",
+  "version": "0.0.57",
   "private": false,
   "type": "module",
   "main": "dist/umd/js/bi-sdk.umd.min.js",

package/src/components/example.ts

@@ -539,22 +539,21 @@ return {
                 {
                   type: "b-table",
                   name: "数据表格",
+                  datasource: {
+                    source: "custom",
+                    custom:
+                      '[\r\n  {\r\n    "name": "汉族",\r\n    "count": 1204\r\n  },\r\n  {\r\n    "name": "少数民族",\r\n    "count": 80\r\n  }\r\n]',
+                  },
                   props: {
                     title: "民族分布",
                     size: "small",
                     bordered: true,
                     showHeader: true,
+                    showSizeChanger: true,
+                    showQuickJumper: true,
+                    hideOnSinglePage: true,
+                    showTotal: true,
                     pageSize: 10,
-                    dataSource: [
-                      {
-                        name: "汉族",
-                        count: 1204,
-                      },
-                      {
-                        name: "少数民族",
-                        count: 80,
-                      },
-                    ],
                     columns: [
                       {
                         title: "民族",

package/src/components/hooks/datasource.ts

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { PageContext } from "../context/PageContext";
 import { SchemaItemType } from "../typing";
 
@@ -7,9 +7,10 @@ export type Signal = string | number;
 type Props = {
   item: SchemaItemType;
   signal?: Signal;
+  query?: Record<string, any>;
 };
 
-export const useDatasource = ({ item, signal }: Props): any => {
+export const useDatasource = ({ item, signal, query }: Props): any => {
   const { fetch, getVars, setItemData } = useContext(PageContext);
   const [datasource, setDatasource] = useState<any>(null);
   useEffect(() => {
@@ -44,7 +45,7 @@ export const useDatasource = ({ item, signal }: Props): any => {
         }
         const vars = getVars(item.id || "");
         fetch
-          .dataset(item?.datasource.dataset.id, vars)
+          .dataset(item?.datasource.dataset.id, { ...vars, ...query })
           .then((res) => {
             setDatasource(res || null);
             setItemData?.(item.id || "", res || null);
@@ -60,7 +61,7 @@ export const useDatasource = ({ item, signal }: Props): any => {
         setItemData?.(item.id || "", null);
         break;
     }
-  }, [item?.datasource, signal]);
+  }, [item?.datasource, signal, query]);
 
   return datasource;
 };

package/src/components/plugins/@antd/index.ts

@@ -140,19 +140,17 @@ export const TablePlugin: PluginType = {
       source: "custom",
       datasourceId: null,
       scriptId: null,
-      custom: null,
+      custom: "[{\"name\":\"苹果\",\"count\":12},{\"name\":\"华为\",\"count\":803},{\"name\":\"OPPO\",\"count\":654},{\"name\":\"vivo\",\"count\":719}]",
     },
     props: {
       size: "default",
       bordered: true,
       showHeader: true,
+      showSizeChanger: true,
+      showQuickJumper: true,
+      hideOnSinglePage: true,
+      showTotal: true,
       pageSize: 10,
-      dataSource: [
-        { name: "苹果", count: 12 },
-        { name: "华为", count: 803 },
-        { name: "OPPO", count: 654 },
-        { name: "vivo", count: 719 },
-      ],
       columns: [
         { title: "品牌", dataIndex: "name" },
         { title: "日销量（件）", dataIndex: "count" },

package/src/components/plugins/@antd/item-props/TableProps.tsx

@@ -11,6 +11,7 @@ import {
   Modal,
   Input,
   type TableProps as AntTableProps,
+  Select,
 } from "antd";
 import type { PropEditorProps } from "./types";
 import {
@@ -23,14 +24,25 @@ import {
 
 export type TableColumnModel = {
   title: string;
-  dataIndex: string;
+  dataIndex: string | string[];
   width?: string;
   align?: "left" | "center" | "right";
   ellipsis?: boolean;
+  customRender?: string;
+  className?: string;
 };
 export type TableModel = {
   pageSize?: number;
   columns: TableColumnModel[];
+  dataKey?: string;
+  showSizeChanger?: boolean;
+  showQuickJumper?: boolean;
+  hideOnSinglePage?: boolean;
+  showTotal?: boolean;
+  headerCellClassNames?: string[];
+  bodyCellClassNames?: string[];
+  paginationRootClassNames?: string[];
+  paginationItemClassNames?: string[];
 } & Pick<AntTableProps, "bordered" | "showHeader" | "size">;
 
 export const TableProps: React.FC<PropEditorProps<TableModel>> = ({
@@ -60,10 +72,14 @@ export const TableProps: React.FC<PropEditorProps<TableModel>> = ({
   const editingForm =
     editingIndex != null && model.columns[editingIndex]
       ? model.columns[editingIndex]
-      : { title: "", dataIndex: "", width: "", align: "left", ellipsis: false };
+      : { title: "", dataIndex: "", width: "", align: "left", ellipsis: false, customRender: "", className: "" };
   const columns = [
     { title: "列名", dataIndex: "title" },
-    { title: "数据索引", dataIndex: "dataIndex" },
+    {
+      title: "数据索引",
+      dataIndex: "dataIndex",
+      render: (v: string | string[]) => (typeof v === "string" ? v : v.join(".")),
+    },
     {
       title: "操作",
       width: 80,
@@ -88,6 +104,16 @@ export const TableProps: React.FC<PropEditorProps<TableModel>> = ({
   return (
     <div>
       <Form labelCol={{ span: 12 }} wrapperCol={{ span: 12 }}>
+        <Form.Item
+          label="数据键"
+          tooltip="数据键用于指定数据来源中的数据项，例如：'data.items'"
+        >
+          <Input
+            size="small"
+            value={model.dataKey}
+            onChange={(e) => trigger("dataKey", e.target.value)}
+          />
+        </Form.Item>
         <Form.Item label="大小">
           <Radio.Group
             size="small"
@@ -113,6 +139,34 @@ export const TableProps: React.FC<PropEditorProps<TableModel>> = ({
             onChange={(v) => trigger("showHeader", v)}
           />
         </Form.Item>
+        <Form.Item label="显示分页大小选择器">
+          <Switch
+            size="small"
+            checked={!!model.showSizeChanger}
+            onChange={(v) => trigger("showSizeChanger", v)}
+          />
+        </Form.Item>
+        <Form.Item label="显示快速跳转">
+          <Switch
+            size="small"
+            checked={!!model.showQuickJumper}
+            onChange={(v) => trigger("showQuickJumper", v)}
+          />
+        </Form.Item>
+        <Form.Item label="隐藏单页分页">
+          <Switch
+            size="small"
+            checked={!!model.hideOnSinglePage}
+            onChange={(v) => trigger("hideOnSinglePage", v)}
+          />
+        </Form.Item>
+        <Form.Item label="显示分页总数">
+          <Switch
+            size="small"
+            checked={!!model.showTotal}
+            onChange={(v) => trigger("showTotal", v)}
+          />
+        </Form.Item>
         <Form.Item label="分页大小">
           <InputNumber
             size="small"
@@ -133,6 +187,39 @@ export const TableProps: React.FC<PropEditorProps<TableModel>> = ({
       <Button size="small" onClick={addColumn} block>
         添加列
       </Button>
+      <Divider style={{ marginTop: 10 }}>样式设置</Divider>
+      <Form.Item label="表头单元格类名" layout="vertical">
+        <Select
+          mode="tags"
+          size="small"
+          value={model.headerCellClassNames || []}
+          onChange={(e) => trigger("headerCellClassNames", e)}
+        />
+      </Form.Item>
+      <Form.Item label="表格单元格类名" layout="vertical">
+        <Select
+          mode="tags"
+          size="small"
+          value={model.bodyCellClassNames || []}
+          onChange={(e) => trigger("bodyCellClassNames", e)}
+        />
+      </Form.Item>
+      <Form.Item label="分页根类名" layout="vertical">
+        <Select
+          mode="tags"
+          size="small"
+          value={model.paginationRootClassNames || []}
+          onChange={(e) => trigger("paginationRootClassNames", e)}
+        />
+      </Form.Item>
+      <Form.Item label="分页项类名" layout="vertical">
+        <Select
+          mode="tags"
+          size="small"
+          value={model.paginationItemClassNames || []}
+          onChange={(e) => trigger("paginationItemClassNames", e)}
+        />
+      </Form.Item>
       <Modal
         title="编辑列"
         open={editVisible}
@@ -140,11 +227,11 @@ export const TableProps: React.FC<PropEditorProps<TableModel>> = ({
         width={400}
         onCancel={() => setEditVisible(false)}
       >
-        <Form layout="vertical">
+        <Form layout="vertical" size="small">
           <div
             style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}
           >
-            <Form.Item label="列名">
+            <Form.Item label="列名" style={{marginBottom: 10}}>
               <Input
                 value={editingForm.title}
                 onChange={(e) =>
@@ -152,15 +239,18 @@ export const TableProps: React.FC<PropEditorProps<TableModel>> = ({
                 }
               />
             </Form.Item>
-            <Form.Item label="数据索引">
-              <Input
-                value={editingForm.dataIndex}
-                onChange={(e) =>
-                  setColumn(editingIndex!, { dataIndex: e.target.value })
+            <Form.Item label="数据索引" style={{marginBottom: 10}}>
+              <Select
+                mode="tags"
+                value={
+                  typeof editingForm.dataIndex === "string"
+                    ? [editingForm.dataIndex]
+                    : editingForm.dataIndex
                 }
+                onChange={(e) => setColumn(editingIndex!, { dataIndex: e })}
               />
             </Form.Item>
-            <Form.Item label="宽度">
+            <Form.Item label="宽度" style={{marginBottom: 10}}>
               <Input
                 value={editingForm.width}
                 onChange={(e) =>
@@ -168,7 +258,7 @@ export const TableProps: React.FC<PropEditorProps<TableModel>> = ({
                 }
               />
             </Form.Item>
-            <Form.Item label="对齐">
+            <Form.Item label="对齐" style={{marginBottom: 10}}>
               <Radio.Group
                 value={editingForm.align}
                 onChange={(e) =>
@@ -186,12 +276,28 @@ export const TableProps: React.FC<PropEditorProps<TableModel>> = ({
                 </Radio.Button>
               </Radio.Group>
             </Form.Item>
-            <Form.Item label="省略">
+            <Form.Item label="省略" style={{marginBottom: 10}}>
               <Switch
                 checked={!!editingForm.ellipsis}
                 onChange={(v) => setColumn(editingIndex!, { ellipsis: v })}
               />
             </Form.Item>
+            <Form.Item label="自定义渲染" tooltip="支持自定义渲染，使用{{}}包裹表达式，例如：{{text}}，{{record.变量名}}，{{index}}，{{$g.变量名}}，{{$e.变量名}}" style={{gridColumn: "span 2 / span 2", marginBottom: 10}}>
+              <Input.TextArea
+                value={editingForm.customRender}
+                onChange={(e) =>
+                  setColumn(editingIndex!, { customRender: e.target.value })
+                }
+              />
+            </Form.Item>
+            <Form.Item label="类名" style={{gridColumn: "span 2 / span 2", marginBottom: 10}}>
+              <Input
+                value={editingForm.className}
+                onChange={(e) =>
+                  setColumn(editingIndex!, { className: e.target.value })
+                }
+              />
+            </Form.Item>
           </div>
         </Form>
       </Modal>

package/src/components/plugins/@antd/items/TableRender.tsx

@@ -1,45 +1,82 @@
-import { Table, type TableProps } from "antd";
-import React, { useContext, useEffect } from "react";
+import { PaginationProps, Table, type TableProps } from "antd";
+import React, { useContext, useEffect, useMemo, useState } from "react";
 import { PageContext } from "../../../context/PageContext";
 import { HtmlBaseProps } from "../../../typing";
+import { useDatasource } from "../../../hooks/datasource";
 
 export type TableRenderProps = {
-  dataSource?: any[];
   columns?: any[];
+  dataKey?: string;
   pageSize?: number;
   bordered?: boolean;
   size?: TableProps["size"];
   showHeader?: boolean;
   item: any;
+  showSizeChanger?: boolean;
+  showQuickJumper?: boolean;
+  hideOnSinglePage?: boolean;
+  showTotal?: boolean;
+  headerCellClassNames?: string[];
+  bodyCellClassNames?: string[];
+  paginationRootClassNames?: string[];
+  paginationItemClassNames?: string[];
 } & HtmlBaseProps;
 
 export const TableRender: React.FC<TableRenderProps> = ({
   id,
   item,
-  dataSource = [],
   columns = [],
+  dataKey = "",
   pageSize = 10,
   bordered = true,
   size,
   showHeader = true,
+  showSizeChanger = true,
+  showQuickJumper = true,
+  hideOnSinglePage = true,
+  showTotal = true,
   style = {},
   className,
+  headerCellClassNames = [],
+  bodyCellClassNames = [],
+  paginationRootClassNames = [],
+  paginationItemClassNames = [],
 }) => {
-  const { initCallback } = useContext(PageContext);
-  const pagination =
-    !pageSize || pageSize <= dataSource.length
-      ? false
-      : {
-          total: dataSource.length,
-          pageSize,
-          size,
-          showSizeChanger: true,
-          showQuickJumper: true,
-          hideOnSinglePage: true,
-          pageSizeOptions: ["10", "20", "30", "40"],
-          showTotal: (total: number, range: [number, number]) =>
-            `共 ${total} 条记录，显示第 ${range[0]}-${range[1]} 条`,
-        };
+  const { initCallback, globalVars, env } = useContext(PageContext);
+  const [page, setPage] = useState<{
+    current: number;
+    pageSize: number;
+  }>({ current: 1, pageSize });
+
+  const func = (path: string) =>
+    new Function(
+      "console",
+      "Math",
+      "Date",
+      "Array",
+      "Object",
+      "String",
+      "Number",
+      "Boolean",
+      "$g",
+      "$e",
+      "text",
+      "record",
+      "index",
+      `
+      "use strict";
+      const window = undefined;
+      const document = undefined;
+      const global = undefined;
+      const process = undefined;
+      const require = undefined;
+      const module = undefined;
+      const exports = undefined;
+      return ${path};
+    `,
+    );
+
+  const dataSource = useDatasource({ item, query: page });
   const realColumns = columns.map((item: any) => ({
     ...item,
     render:
@@ -47,50 +84,100 @@ export const TableRender: React.FC<TableRenderProps> = ({
       (typeof item.customRender === "string" && item.customRender.trim() === "")
         ? item.render
         : (text: any, record: any, index: number) => {
-            const safeEval = new Function(
-              "console",
-              "Math",
-              "Date",
-              "Array",
-              "Object",
-              "String",
-              "Number",
-              "Boolean",
-              "text",
-              "record",
-              "index",
-              `
-              "use strict";
-              const window = undefined;
-              const document = undefined;
-              const global = undefined;
-              const process = undefined;
-              const require = undefined;
-              const module = undefined;
-              const exports = undefined;
-              ${item.customRender}
-            `
-            );
-            return (safeEval as any)(
-              console,
-              Math,
-              Date,
-              Array,
-              Object,
-              String,
-              Number,
-              Boolean,
-              text,
-              record,
-              index
+            const html = (item.customRender || "").replace(
+              /{\s*{\s*([^}]+)\s*}\s*}/g,
+              (_match: any, p1: string) => {
+                try {
+                  return (func(p1) as any)(
+                    console,
+                    Math,
+                    Date,
+                    Array,
+                    Object,
+                    String,
+                    Number,
+                    Boolean,
+                    globalVars,
+                    env.global,
+                    text,
+                    record,
+                    index,
+                  );
+                } catch {
+                  return "";
+                }
+              },
             );
+            return <div dangerouslySetInnerHTML={{ __html: html }}></div>;
           },
   }));
 
+  const data = useMemo(() => {
+    if (!dataKey || dataKey.trim() === "") {
+      return dataSource || [];
+    }
+    const keys = dataKey.split(".");
+    let result = dataSource || [];
+    for (const key of keys) {
+      if (result[key]) {
+        result = result[key];
+      } else {
+        result = [];
+        break;
+      }
+    }
+    return result || [];
+  }, [dataKey, dataSource]);
+
+  const pagination = useMemo(
+    () =>
+      !pageSize || pageSize >= (data || []).length
+        ? false
+        : ({
+            total: (data || []).length,
+            current: page.current,
+            pageSize: page.pageSize,
+            size,
+            showSizeChanger,
+            showQuickJumper,
+            hideOnSinglePage,
+            pageSizeOptions: ["10", "20", "30", "40"],
+            showTotal: showTotal
+              ? (total: number, range: [number, number]) =>
+                  `共 ${total} 条记录，显示第 ${range[0]}-${range[1]} 条`
+              : undefined,
+            locale: {
+              items_per_page: "/ 页",
+              jump_to: "跳转至第",
+              page: "页",
+            },
+            onChange: (page: number, pageSize: number) => {
+              setPage({ current: page, pageSize });
+            },
+            onShowSizeChange: (current: number, size: number) => {
+              setPage({ current, pageSize: size });
+            },
+          } as PaginationProps),
+    [
+      data,
+      page,
+      pageSize,
+      size,
+      showSizeChanger,
+      showQuickJumper,
+      hideOnSinglePage,
+      showTotal,
+    ],
+  );
+
   const callback = () => {
     console.log("callback table");
   };
 
+  useEffect(() => {
+    setPage({ current: 1, pageSize });
+  }, [pageSize]);
+
   useEffect(() => {
     initCallback({ id: item.id, callback });
   }, []);
@@ -98,7 +185,7 @@ export const TableRender: React.FC<TableRenderProps> = ({
   return (
     <Table
       id={id}
-      dataSource={dataSource}
+      dataSource={data || []}
       columns={realColumns as any}
       pagination={pagination as any}
       bordered={bordered}
@@ -107,6 +194,18 @@ export const TableRender: React.FC<TableRenderProps> = ({
       rowKey={(_, index) => String(index)}
       style={{ padding: 1, ...style }}
       className={className}
+      classNames={{
+        header: {
+          cell: (headerCellClassNames || []).join(" "),
+        },
+        body: {
+          cell: (bodyCellClassNames || []).join(" "),
+        },
+        pagination: {
+          root: (paginationRootClassNames || []).join(" "),
+          item: (paginationItemClassNames || []).join(" "),
+        },
+      }}
     />
   );
 };