@cqsjjb/jjb-react-admin-component 3.0.28 → 3.0.30

package/FormilyDescriptions/index.d.ts

@@ -59,7 +59,7 @@ interface FormilyDescriptionsProps extends ComponentProps {
   /**
    * @description 是否外部预览？
    */
-  extraFileLink: boolean;
+  extraFileLink?: boolean;
 }
 
 interface FormilyDescriptionsFc extends React.FC<FormilyDescriptionsProps> {

package/FormilyDescriptions/index.js

@@ -1,9 +1,11 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from 'react';
 import { tools } from '@cqsjjb/jjb-common-lib';
-import { FilePdfOutlined, LinkOutlined, PlayCircleOutlined } from '@ant-design/icons';
-import { Modal, Descriptions, Empty, Image, Tooltip, Tag, Spin, Table } from 'antd';
+import { FileOutlined, LinkOutlined } from '@ant-design/icons';
+import { Modal, Descriptions, Empty, Image, Tooltip, Spin, Table, Space, TreeSelect } from 'antd';
 const formilyItemMargin = new Map([['small', 8], ['middle', 12], ['default', 16]]);
+const IS_PDF_REG = /\.pdf$/;
+const IS_VIDEO_REG = /\.(mp4|ogg|mkv|webm)$/;
 export default function FormilyDescriptions(props) {
   const [regions, setRegions] = React.useState([]);
   React.useEffect(() => {
@@ -26,7 +28,7 @@ export default function FormilyDescriptions(props) {
     dataSource: dataSource
   }, props));
 }
-export function DescriptionsRender(props) {
+function DescriptionsRender(props) {
   return props.dataSource.map((item, index) => {
     const isLast = index === props.dataSource.length - 1;
     return /*#__PURE__*/React.createElement(Descriptions, {
@@ -38,8 +40,8 @@ export function DescriptionsRender(props) {
       items: item.fromComponentEnum === 'GRID_FORM' ? item.children.map((child, childIndex) => {
         return {
           key: childIndex,
-          label: child.name,
           span: child.formType === 'Table' ? props.column : 1,
+          label: child.name,
           children: /*#__PURE__*/React.createElement(ItemRender, _extends({
             data: child
           }, props))
@@ -61,8 +63,7 @@ export function DescriptionsRender(props) {
     });
   });
 }
-export function ItemRender(props) {
-  const [type, setType] = React.useState(undefined);
+function ItemRender(props) {
   const [open, setOpen] = React.useState(false);
   const [previewUrl, setPreviewUrl] = React.useState('');
   const {
@@ -72,85 +73,50 @@ export function ItemRender(props) {
     imagePreview,
     extraFileLink
   } = props;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, tools.isArray(data.value) ? tools.isStringArray(data.value) || tools.isNumberArray(data.value) ? data.value.join('、') : tools.isObjectArray(data.value) ? data.formType === 'Table' ? /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, tools.isArray(data.value)
+  // 如果数据是字符串集合 或 数字集合
+  ? tools.isStringArray(data.value) || tools.isNumberArray(data.value)
+  // 直接字符串拼接
+  ? data.value.join('、')
+  // 如果是对象集合
+  : tools.isObjectArray(data.value)
+  // 如果数据表单类型是 数据表格
+  ? data.formType === 'Table'
+  // 处理数据表格
+  ? /*#__PURE__*/React.createElement("div", {
     style: {
       width: '100%'
     }
-  }, /*#__PURE__*/React.createElement(Table, {
-    columns: data.enumList,
+  }, /*#__PURE__*/React.createElement(RenderTable, {
+    columns: data.tableColumns,
     dataSource: data.value,
-    pagination: false
-  })) : /*#__PURE__*/React.createElement("div", null, data.value.map((next, nextIndex) => {
-    if (next.url) {
-      if (next.isImage) {
-        return /*#__PURE__*/React.createElement("span", {
-          key: nextIndex,
-          style: {
-            display: 'inline-block',
-            marginRight: 4,
-            marginBottom: 4
-          }
-        }, /*#__PURE__*/React.createElement(Image, {
-          src: next.url,
-          width: imageWidth || 64,
-          height: imageHeight || 64,
-          preview: extraFileLink ? {
-            visible: false,
-            onVisibleChange: e => {
-              window.open(next.url);
-            }
-          } : imagePreview
-        }));
-      } else {
-        return /*#__PURE__*/React.createElement(Tooltip, {
-          title: next.url
-        }, /\.pdf$/.test(next.url) ? /*#__PURE__*/React.createElement("a", {
-          key: nextIndex,
-          style: {
-            gap: 4,
-            display: 'flex',
-            alignItems: 'center'
-          },
-          onClick: () => {
-            if (extraFileLink) {
-              window.open(next.url);
-            } else {
-              setType('pdf');
-              setOpen(true);
-              setPreviewUrl(next.url);
-            }
-          }
-        }, /*#__PURE__*/React.createElement(FilePdfOutlined, null), "\u70B9\u51FB\u67E5\u770B") : /\.(mp4|ogg|mkv|webm)$/.test(next.url) ? /*#__PURE__*/React.createElement("a", {
-          key: nextIndex,
-          style: {
-            gap: 4,
-            display: 'flex',
-            alignItems: 'center'
-          },
-          onClick: () => {
-            if (props.extraFileLink) {
-              window.open(next.url);
-            } else {
-              setType('video');
-              setOpen(true);
-              setPreviewUrl(next.url);
-            }
-          }
-        }, /*#__PURE__*/React.createElement(PlayCircleOutlined, null), "\u70B9\u51FB\u67E5\u770B") : /*#__PURE__*/React.createElement("a", {
-          key: nextIndex,
-          href: next.url,
-          style: {
-            gap: 4,
-            display: 'flex',
-            alignItems: 'center'
-          },
-          target: "_blank"
-        }, /*#__PURE__*/React.createElement(LinkOutlined, null), "\u70B9\u51FB\u4E0B\u8F7D"));
-      }
-    } else {
-      return tools.textPlaceholder(next.name);
+    imageWidth: imageWidth,
+    imageHeight: imageHeight,
+    imagePreview: imagePreview,
+    extraFileLink: extraFileLink,
+    onPreview: url => {
+      setOpen(true);
+      setPreviewUrl(url);
     }
-  })) : tools.textPlaceholder() : /*#__PURE__*/React.createElement(RenderText, {
+  }))
+
+  // 否则就是文件数据
+  : /*#__PURE__*/React.createElement("div", null, data.value.map((file, index) => /*#__PURE__*/React.createElement(RenderFileItem, {
+    key: index,
+    url: file.url,
+    name: file.name,
+    isImage: file.isImage,
+    imageWidth: imageWidth,
+    imageHeight: imageHeight,
+    imagePreview: imagePreview,
+    extraFileLink: extraFileLink,
+    onPreview: () => {
+      setOpen(true);
+      setPreviewUrl(file.url);
+    }
+  }))) : tools.textPlaceholder()
+  // 处理文本数据
+  : /*#__PURE__*/React.createElement(RenderText, {
     name: data.name,
     value: data.value,
     renderItemText: props.renderItemText
@@ -161,38 +127,23 @@ export function ItemRender(props) {
     width: 1100,
     footer: false,
     onCancel: () => setOpen(false)
-  }, type === 'pdf' && /*#__PURE__*/React.createElement("embed", {
+  }, IS_PDF_REG.test(previewUrl) && /*#__PURE__*/React.createElement("embed", {
     src: previewUrl,
     width: "100%",
     height: 600
-  }), type === 'video' && /*#__PURE__*/React.createElement("video", {
+  }), IS_VIDEO_REG.test(previewUrl) && /*#__PURE__*/React.createElement("video", {
     controls: true,
     src: previewUrl,
     width: "100%",
     height: "350"
   })));
 }
-export function generateValue(data, prefix = []) {
-  const result = [];
-  data.forEach(item => {
-    // 当前节点的完整 name
-    const currentName = prefix.concat(item.title);
-    result.push({
-      name: currentName,
-      key: item.key
-    });
-    if (item.children && item.children.length > 0) {
-      // 递归处理子节点
-      result.push(...generateValue(item.children, currentName));
-    }
-  });
-  return result;
-}
-export function RenderText(props) {
+function RenderText(props) {
   const {
     value
   } = props;
   const [text, setText] = React.useState();
+  const [options, setOptions] = React.useState([]);
   const [loading, setLoading] = React.useState(false);
   React.useEffect(() => {
     if (value) {
@@ -200,10 +151,8 @@ export function RenderText(props) {
         setLoading(true);
         value.load().then(res => res.json()).then(res => {
           if (res.success) {
-            const data = generateValue(res.data);
-            setText(value.selected?.map(item => {
-              return data.find(i => i.key === item.key)?.name?.join('/');
-            })?.filter(i => i));
+            setOptions(res.data);
+            setText(value?.selected?.map?.(i => `${i.key}&${i.label}`));
           }
           setLoading(false);
         });
@@ -212,23 +161,165 @@ export function RenderText(props) {
       }
     }
   }, [props.value]);
-  return Array.isArray(text) ? /*#__PURE__*/React.createElement(Spin, {
-    spinning: loading
-  }, /*#__PURE__*/React.createElement("div", {
+  return Array.isArray(text) ? /*#__PURE__*/React.createElement("div", {
     style: {
       gap: 6,
+      width: '100%',
       display: 'flex',
       minHeight: 22,
       flexDirection: 'column'
     }
-  }, text.map((item, index) => /*#__PURE__*/React.createElement(Tag, {
+  }, /*#__PURE__*/React.createElement(Spin, {
+    spinning: loading
+  }, /*#__PURE__*/React.createElement(TreeSelect, {
+    treeCheckable: true,
+    treeDefaultExpandAll: true,
     style: {
-      background: '#eee'
+      width: '100%'
     },
-    index: index,
-    bordered: false
-  }, item)))) : props.renderItemText ? props.renderItemText({
+    value: text,
+    variant: "borderless",
+    treeData: options,
+    showSearch: false,
+    maxTagCount: 1
+  }))) : props.renderItemText ? props.renderItemText({
     text,
     name: props.name
-  }) : text;
+  }) : tools.textPlaceholder(text);
+}
+function RenderFileItem({
+  url,
+  name,
+  isImage,
+  imageWidth,
+  imageHeight,
+  imagePreview,
+  extraFileLink,
+  onPreview
+}) {
+  if (isImage) {
+    return /*#__PURE__*/React.createElement(RenderImage, {
+      url: url,
+      imageWidth: imageWidth,
+      imageHeight: imageHeight,
+      imagePreview: imagePreview,
+      extraFileLink: extraFileLink
+    });
+  } else {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      title: url
+    }, IS_PDF_REG.test(url) || IS_VIDEO_REG.test(url) ? /*#__PURE__*/React.createElement(RenderValidFile, {
+      url: url,
+      name: name,
+      onPreview: onPreview
+    }) : /*#__PURE__*/React.createElement(RenderInvalidFile, {
+      url: url,
+      name: name
+    }));
+  }
+}
+function RenderImage({
+  url,
+  imageWidth,
+  imageHeight,
+  imagePreview,
+  extraFileLink
+}) {
+  return /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: 'inline-block',
+      marginRight: 4,
+      marginBottom: 4
+    }
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: url,
+    width: imageWidth || 64,
+    height: imageHeight || 64,
+    preview: extraFileLink ? {
+      visible: false,
+      onVisibleChange: () => {
+        window.open(url);
+      }
+    } : imagePreview
+  }));
+}
+function RenderValidFile({
+  url,
+  name,
+  extraFileLink,
+  onPreview
+}) {
+  return /*#__PURE__*/React.createElement("a", {
+    style: {
+      gap: 4,
+      display: 'flex',
+      alignItems: 'center'
+    },
+    onClick: () => {
+      if (extraFileLink) {
+        window.open(url);
+      } else {
+        onPreview();
+      }
+    }
+  }, /*#__PURE__*/React.createElement(FileOutlined, null), name);
+}
+function RenderInvalidFile({
+  url,
+  name
+}) {
+  return /*#__PURE__*/React.createElement("a", {
+    href: url,
+    style: {
+      gap: 4,
+      display: 'flex',
+      alignItems: 'center'
+    },
+    target: "_blank"
+  }, /*#__PURE__*/React.createElement(LinkOutlined, null), name);
+}
+function RenderTable({
+  columns,
+  dataSource,
+  imageWidth,
+  imageHeight,
+  imagePreview,
+  extraFileLink,
+  onPreview
+}) {
+  return /*#__PURE__*/React.createElement(Table, {
+    rowKey: (record, index) => index,
+    columns: columns.map(item => {
+      item.render = row => {
+        if (tools.isNumberArray(row) || tools.isStringArray(row)) {
+          return row?.join(',');
+        }
+        if (tools.isUploadFileListArray(row)) {
+          return /*#__PURE__*/React.createElement(Space, {
+            direction: "vertical"
+          }, tools.getDynamicUploadFileList(row).map((file, index) => {
+            return /*#__PURE__*/React.createElement(RenderFileItem, {
+              key: index,
+              url: file.url,
+              name: file.name,
+              isImage: file.isImage,
+              imageWidth: imageWidth,
+              imageHeight: imageHeight,
+              imagePreview: imagePreview,
+              extraFileLink: extraFileLink,
+              onPreview: () => {
+                onPreview(file.url);
+              }
+            });
+          }));
+        }
+        if (tools.isObject(row)) {
+          return '数据错误';
+        }
+        return row;
+      };
+      return item;
+    }),
+    dataSource: dataSource
+  });
 }

package/FormilyDescriptions/index.mjs

@@ -1,8 +1,8 @@
 import React from 'react';
 
 import { tools } from '@cqsjjb/jjb-common-lib';
-import { FilePdfOutlined, LinkOutlined, PlayCircleOutlined } from '@ant-design/icons';
-import { Modal, Descriptions, Empty, Image, Tooltip, Tag, Spin, Table } from 'antd';
+import { FileOutlined, LinkOutlined } from '@ant-design/icons';
+import { Modal, Descriptions, Empty, Image, Tooltip, Spin, Table, Space, TreeSelect } from 'antd';
 
 const formilyItemMargin = new Map([
   [ 'small', 8 ],
@@ -10,6 +10,9 @@ const formilyItemMargin = new Map([
   [ 'default', 16 ]
 ]);
 
+const IS_PDF_REG = /\.pdf$/;
+const IS_VIDEO_REG = /\.(mp4|ogg|mkv|webm)$/;
+
 export default function FormilyDescriptions(props) {
   const [ regions, setRegions ] = React.useState([]);
 
@@ -30,7 +33,7 @@ export default function FormilyDescriptions(props) {
     );
 }
 
-export function DescriptionsRender(props) {
+function DescriptionsRender(props) {
   return props.dataSource.map((item, index) => {
     const isLast = index === props.dataSource.length - 1;
 
@@ -47,10 +50,10 @@ export function DescriptionsRender(props) {
           ? item.children.map((child, childIndex) => {
             return {
               key: childIndex,
-              label: child.name,
               span: child.formType === 'Table'
                 ? props.column
                 : 1,
+              label: child.name,
               children: (
                 <ItemRender data={child} {...props} />
               )
@@ -75,8 +78,7 @@ export function DescriptionsRender(props) {
   });
 }
 
-export function ItemRender(props) {
-  const [ type, setType ] = React.useState(undefined);
+function ItemRender(props) {
   const [ open, setOpen ] = React.useState(false);
   const [ previewUrl, setPreviewUrl ] = React.useState('');
 
@@ -90,121 +92,56 @@ export function ItemRender(props) {
 
   return (
     <React.Fragment>
+      {/*如果数据是集合*/}
       {tools.isArray(data.value)
+        // 如果数据是字符串集合 或 数字集合
         ? (tools.isStringArray(data.value) || tools.isNumberArray(data.value))
+          // 直接字符串拼接
           ? data.value.join('、')
+          // 如果是对象集合
           : tools.isObjectArray(data.value)
+            // 如果数据表单类型是 数据表格
             ? data.formType === 'Table'
+              // 处理数据表格
               ? (
                 <div style={{ width: '100%' }}>
-                  <Table
-                    columns={data.enumList}
+                  <RenderTable
+                    columns={data.tableColumns}
                     dataSource={data.value}
-                    pagination={false}
+                    imageWidth={imageWidth}
+                    imageHeight={imageHeight}
+                    imagePreview={imagePreview}
+                    extraFileLink={extraFileLink}
+                    onPreview={url => {
+                      setOpen(true);
+                      setPreviewUrl(url);
+                    }}
                   />
                 </div>
               )
+              // 否则就是文件数据
               : (
                 <div>
-                  {data.value.map((next, nextIndex) => {
-                    if (next.url) {
-                      if (next.isImage) {
-                        return (
-                          <span
-                            key={nextIndex}
-                            style={{
-                              display: 'inline-block',
-                              marginRight: 4,
-                              marginBottom: 4
-                            }}
-                          >
-                            <Image
-                              src={next.url}
-                              width={imageWidth || 64}
-                              height={imageHeight || 64}
-                              preview={extraFileLink ? {
-                                visible: false,
-                                onVisibleChange: e => {
-                                  window.open(next.url);
-                                }
-                              } : imagePreview}
-                            />
-                          </span>
-                        );
-                      } else {
-                        return (
-                          <Tooltip title={next.url}>
-                            {/\.pdf$/.test(next.url)
-                              ? (
-                                <a
-                                  key={nextIndex}
-                                  style={{
-                                    gap: 4,
-                                    display: 'flex',
-                                    alignItems: 'center'
-                                  }}
-                                  onClick={() => {
-                                    if (extraFileLink) {
-                                      window.open(next.url);
-                                    } else {
-                                      setType('pdf');
-                                      setOpen(true);
-                                      setPreviewUrl(next.url);
-                                    }
-                                  }}
-                                >
-                                  <FilePdfOutlined />
-                                  点击查看
-                                </a>
-                              )
-                              : /\.(mp4|ogg|mkv|webm)$/.test(next.url)
-                                ? (
-                                  <a
-                                    key={nextIndex}
-                                    style={{
-                                      gap: 4,
-                                      display: 'flex',
-                                      alignItems: 'center'
-                                    }}
-                                    onClick={() => {
-                                      if (props.extraFileLink) {
-                                        window.open(next.url);
-                                      } else {
-                                        setType('video');
-                                        setOpen(true);
-                                        setPreviewUrl(next.url);
-                                      }
-                                    }}
-                                  >
-                                    <PlayCircleOutlined />
-                                    点击查看
-                                  </a>
-                                )
-                                : (
-                                  <a
-                                    key={nextIndex}
-                                    href={next.url}
-                                    style={{
-                                      gap: 4,
-                                      display: 'flex',
-                                      alignItems: 'center'
-                                    }}
-                                    target="_blank"
-                                  >
-                                    <LinkOutlined />
-                                    点击下载
-                                  </a>
-                                )}
-                          </Tooltip>
-                        );
-                      }
-                    } else {
-                      return tools.textPlaceholder(next.name);
-                    }
-                  })}
+                  {data.value.map((file, index) => (
+                    <RenderFileItem
+                      key={index}
+                      url={file.url}
+                      name={file.name}
+                      isImage={file.isImage}
+                      imageWidth={imageWidth}
+                      imageHeight={imageHeight}
+                      imagePreview={imagePreview}
+                      extraFileLink={extraFileLink}
+                      onPreview={() => {
+                        setOpen(true);
+                        setPreviewUrl(file.url);
+                      }}
+                    />
+                  ))}
                 </div>
               )
             : tools.textPlaceholder()
+        // 处理文本数据
         : (
           <RenderText
             name={data.name}
@@ -220,14 +157,14 @@ export function ItemRender(props) {
         footer={false}
         onCancel={() => setOpen(false)}
       >
-        {type === 'pdf' && (
+        {IS_PDF_REG.test(previewUrl) && (
           <embed
             src={previewUrl}
             width="100%"
             height={600}
           />
         )}
-        {type === 'video' && (
+        {IS_VIDEO_REG.test(previewUrl) && (
           <video
             controls
             src={previewUrl}
@@ -240,29 +177,10 @@ export function ItemRender(props) {
   );
 }
 
-export function generateValue(data, prefix = []) {
-  const result = [];
-
-  data.forEach(item => {
-    // 当前节点的完整 name
-    const currentName = prefix.concat(item.title);
-    result.push({
-      name: currentName,
-      key: item.key
-    });
-
-    if (item.children && item.children.length > 0) {
-      // 递归处理子节点
-      result.push(...generateValue(item.children, currentName));
-    }
-  });
-
-  return result;
-}
-
-export function RenderText(props) {
+function RenderText(props) {
   const { value } = props;
   const [ text, setText ] = React.useState();
+  const [ options, setOptions ] = React.useState([]);
   const [ loading, setLoading ] = React.useState(false);
 
   React.useEffect(() => {
@@ -271,10 +189,8 @@ export function RenderText(props) {
         setLoading(true);
         value.load().then(res => res.json()).then(res => {
           if (res.success) {
-            const data = generateValue(res.data);
-            setText(value.selected?.map(item => {
-              return data.find(i => i.key === item.key)?.name?.join('/');
-            })?.filter(i => i));
+            setOptions(res.data);
+            setText(value?.selected?.map?.(i => `${i.key}&${i.label}`));
           }
           setLoading(false);
         });
@@ -286,31 +202,206 @@ export function RenderText(props) {
 
   return Array.isArray(text)
     ? (
-      <Spin spinning={loading}>
-        <div
-          style={{
-            gap: 6,
-            display: 'flex',
-            minHeight: 22,
-            flexDirection: 'column'
-          }}
-        >
-          {text.map((item, index) => (
-            <Tag
-              style={{ background: '#eee' }}
-              index={index}
-              bordered={false}
-            >
-              {item}
-            </Tag>
-          ))}
-        </div>
-      </Spin>
+      <div
+        style={{
+          gap: 6,
+          width: '100%',
+          display: 'flex',
+          minHeight: 22,
+          flexDirection: 'column'
+        }}
+      >
+        <Spin spinning={loading}>
+          <TreeSelect
+            treeCheckable
+            treeDefaultExpandAll
+            style={{ width: '100%' }}
+            value={text}
+            variant="borderless"
+            treeData={options}
+            showSearch={false}
+            maxTagCount={1}
+          />
+        </Spin>
+      </div>
     )
     : props.renderItemText
       ? props.renderItemText({
         text,
         name: props.name
       })
-      : text;
+      : tools.textPlaceholder(text);
+}
+
+function RenderFileItem({
+  url,
+  name,
+  isImage,
+  imageWidth,
+  imageHeight,
+  imagePreview,
+  extraFileLink,
+  onPreview
+}) {
+  if (isImage) {
+    return (
+      <RenderImage
+        url={url}
+        imageWidth={imageWidth}
+        imageHeight={imageHeight}
+        imagePreview={imagePreview}
+        extraFileLink={extraFileLink}
+      />
+    );
+  } else {
+    return (
+      <Tooltip title={url}>
+        {IS_PDF_REG.test(url) || IS_VIDEO_REG.test(url)
+          ? (
+            <RenderValidFile
+              url={url}
+              name={name}
+              onPreview={onPreview}
+            />
+          )
+          : (
+            <RenderInvalidFile
+              url={url}
+              name={name}
+            />
+          )}
+      </Tooltip>
+    );
+  }
+}
+
+function RenderImage({
+  url,
+  imageWidth,
+  imageHeight,
+  imagePreview,
+  extraFileLink
+}) {
+  return (
+    <span
+      style={{
+        display: 'inline-block',
+        marginRight: 4,
+        marginBottom: 4
+      }}
+    >
+      <Image
+        src={url}
+        width={imageWidth || 64}
+        height={imageHeight || 64}
+        preview={extraFileLink
+          ? {
+            visible: false,
+            onVisibleChange: () => {
+              window.open(url);
+            }
+          }
+          : imagePreview}
+      />
+    </span>
+  );
+}
+
+function RenderValidFile({
+  url,
+  name,
+  extraFileLink,
+  onPreview
+}) {
+  return (
+    <a
+      style={{
+        gap: 4,
+        display: 'flex',
+        alignItems: 'center'
+      }}
+      onClick={() => {
+        if (extraFileLink) {
+          window.open(url);
+        } else {
+          onPreview();
+        }
+      }}
+    >
+      <FileOutlined />
+      {name}
+    </a>
+  );
+}
+
+function RenderInvalidFile({
+  url,
+  name
+}) {
+  return (
+    <a
+      href={url}
+      style={{
+        gap: 4,
+        display: 'flex',
+        alignItems: 'center'
+      }}
+      target="_blank"
+    >
+      <LinkOutlined />
+      {name}
+    </a>
+  );
+}
+
+function RenderTable({
+  columns,
+  dataSource,
+  imageWidth,
+  imageHeight,
+  imagePreview,
+  extraFileLink,
+  onPreview
+}) {
+  return (
+    <Table
+      rowKey={(record, index) => index}
+      columns={columns.map(item => {
+        item.render = row => {
+          if (tools.isNumberArray(row) || tools.isStringArray(row)) {
+            return row?.join(',');
+          }
+          if (tools.isUploadFileListArray(row)) {
+            return (
+              <Space direction="vertical">
+                {tools.getDynamicUploadFileList(row).map((file, index) => {
+                  return (
+                    <RenderFileItem
+                      key={index}
+                      url={file.url}
+                      name={file.name}
+                      isImage={file.isImage}
+                      imageWidth={imageWidth}
+                      imageHeight={imageHeight}
+                      imagePreview={imagePreview}
+                      extraFileLink={extraFileLink}
+                      onPreview={() => {
+                        onPreview(file.url);
+                      }}
+                    />
+                  );
+                })}
+              </Space>
+            );
+          }
+          if (tools.isObject(row)) {
+            return '数据错误';
+          }
+          return row;
+        };
+        return item;
+      })}
+      dataSource={dataSource}
+    />
+  );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cqsjjb/jjb-react-admin-component",
-  "version": "3.0.28",
+  "version": "3.0.30",
   "description": "jjb-react-admin-组件库@new",
   "main": "index.js",
   "author": "jjb-front-team",