bi-sdk-react 0.0.56 → 0.0.57

package/package.json

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

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

@@ -24,10 +24,12 @@ 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;
@@ -70,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,
@@ -98,7 +104,10 @@ export const TableProps: React.FC<PropEditorProps<TableModel>> = ({
   return (
     <div>
       <Form labelCol={{ span: 12 }} wrapperCol={{ span: 12 }}>
-        <Form.Item label="数据键" tooltip="数据键用于指定数据来源中的数据项，例如：'data.items'">
+        <Form.Item
+          label="数据键"
+          tooltip="数据键用于指定数据来源中的数据项，例如：'data.items'"
+        >
           <Input
             size="small"
             value={model.dataKey}
@@ -178,45 +187,37 @@ export const TableProps: React.FC<PropEditorProps<TableModel>> = ({
       <Button size="small" onClick={addColumn} block>
         添加列
       </Button>
-      <Divider style={{marginTop: 10}}>样式设置</Divider>
+      <Divider style={{ marginTop: 10 }}>样式设置</Divider>
       <Form.Item label="表头单元格类名" layout="vertical">
         <Select
           mode="tags"
           size="small"
-          value={(model.headerCellClassNames || [])}
-          onChange={(e) =>
-            trigger("headerCellClassNames", e)
-          }
+          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)
-          }
+          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)
-          }
+          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)
-          }
+          value={model.paginationItemClassNames || []}
+          onChange={(e) => trigger("paginationItemClassNames", e)}
         />
       </Form.Item>
       <Modal
@@ -226,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) =>
@@ -238,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) =>
@@ -254,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) =>
@@ -272,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

@@ -42,12 +42,40 @@ export const TableRender: React.FC<TableRenderProps> = ({
   paginationRootClassNames = [],
   paginationItemClassNames = [],
 }) => {
-  const { initCallback } = useContext(PageContext);
+  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,
@@ -56,43 +84,31 @@ 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>;
           },
   }));
 
@@ -142,7 +158,16 @@ export const TableRender: React.FC<TableRenderProps> = ({
               setPage({ current, pageSize: size });
             },
           } as PaginationProps),
-    [data, page, pageSize, size, showSizeChanger, showQuickJumper, hideOnSinglePage, showTotal],
+    [
+      data,
+      page,
+      pageSize,
+      size,
+      showSizeChanger,
+      showQuickJumper,
+      hideOnSinglePage,
+      showTotal,
+    ],
   );
 
   const callback = () => {