@cqsjjb/jjb-react-admin-component 3.1.3 → 3.2.0-beta.0

package/FormilyDescriptions/index.js

@@ -1,58 +1,66 @@
-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';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useState, useEffect, Fragment } from 'react';
 import { tools } from '@cqsjjb/jjb-common-lib';
 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(() => {
+export default function FormilyDescriptions({
+  schema,
+  values,
+  ...props
+}) {
+  const [regions, setRegions] = useState([]);
+  useEffect(() => {
     fetch(`${window.process.env.app.API_HOST}/system/operation/regions`, {
       headers: {
         token: sessionStorage.token
       }
     }).then(res => res.json()).then(res => {
-      if (res.success) {
-        setRegions(res.data);
-      }
+      if (res.success) setRegions(res.data);
     });
   }, []);
-  const dataSource = tools.getDynamicFormilyFields(props.schema, props.values, {
+  const dataSource = tools.getDynamicFormilyFields(schema, values, {
     regions
   });
-  return dataSource.length === 0 ? /*#__PURE__*/React.createElement(Empty, {
+  console.log(schema, values);
+  if (!dataSource.length) return /*#__PURE__*/React.createElement(Empty, {
     image: Empty.PRESENTED_IMAGE_SIMPLE
-  }) : /*#__PURE__*/React.createElement(DescriptionsRender, _extends({
+  });
+  return /*#__PURE__*/React.createElement(DescriptionsRender, _extends({
     dataSource: dataSource
   }, props));
 }
-function DescriptionsRender(props) {
-  return props.dataSource.map((item, index) => {
-    const isLast = index === props.dataSource.length - 1;
+export function DescriptionsRender({
+  dataSource,
+  size = 'default',
+  ...props
+}) {
+  return dataSource.map((item, index) => {
+    const isLast = index === dataSource.length - 1;
+    const marginBottom = isLast ? 0 : formilyItemMargin.get(size);
+    const items = item.fromComponentEnum === 'GRID_FORM' ? item.children.map((child, childIndex) => ({
+      key: childIndex,
+      span: child.formType === 'Table' ? props.column : 1,
+      label: child.name,
+      children: /*#__PURE__*/React.createElement(ItemRender, _extends({
+        data: child
+      }, props))
+    })) : [{
+      key: 1,
+      label: item.name,
+      children: /*#__PURE__*/React.createElement(ItemRender, _extends({
+        data: item
+      }, props))
+    }];
     return /*#__PURE__*/React.createElement(Descriptions, {
       key: index,
-      size: props.size,
+      size: size,
       style: {
-        marginBottom: isLast ? 0 : formilyItemMargin.get(props.size || 'default')
+        marginBottom
       },
-      items: item.fromComponentEnum === 'GRID_FORM' ? item.children.map((child, childIndex) => {
-        return {
-          key: childIndex,
-          span: child.formType === 'Table' ? props.column : 1,
-          label: child.name,
-          children: /*#__PURE__*/React.createElement(ItemRender, _extends({
-            data: child
-          }, props))
-        };
-      }) : [{
-        key: 1,
-        label: item.name,
-        children: /*#__PURE__*/React.createElement(ItemRender, _extends({
-          data: item
-        }, props))
-      }],
+      items: items,
       colon: props.colon,
       title: props.title,
       extra: props.extra,
@@ -63,69 +71,61 @@ function DescriptionsRender(props) {
     });
   });
 }
-function ItemRender(props) {
-  const [open, setOpen] = React.useState(false);
-  const [previewUrl, setPreviewUrl] = React.useState('');
-  const {
-    data,
-    imageWidth,
-    imageHeight,
-    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", {
-    style: {
-      width: '100%'
-    }
-  }, /*#__PURE__*/React.createElement(RenderTable, {
-    columns: data.tableColumns,
-    dataSource: data.value,
-    imageWidth: imageWidth,
-    imageHeight: imageHeight,
-    imagePreview: imagePreview,
-    extraFileLink: extraFileLink,
-    onPreview: url => {
-      setOpen(true);
-      setPreviewUrl(url);
-    }
-  }))
-
-  // 否则就是文件数据
-  : /*#__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);
+export function ItemRender({
+  data,
+  imageWidth,
+  imageHeight,
+  imagePreview,
+  extraFileLink,
+  ...props
+}) {
+  const [open, setOpen] = useState(false);
+  const [previewUrl, setPreviewUrl] = useState('');
+  const handlePreview = url => {
+    setPreviewUrl(url);
+    setOpen(true);
+  };
+  const renderContent = () => {
+    if (tools.isArray(data.value)) {
+      if (tools.isStringArray(data.value) || tools.isNumberArray(data.value)) {
+        return data.value.join('、');
+      }
+      if (tools.isObjectArray(data.value)) {
+        return data.formType === 'Table' ? /*#__PURE__*/React.createElement(RenderTable, {
+          columns: data.tableColumns,
+          dataSource: data.value,
+          imageWidth: imageWidth,
+          imageHeight: imageHeight,
+          imagePreview: imagePreview,
+          extraFileLink: extraFileLink,
+          onPreview: handlePreview
+        }) : 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: () => handlePreview(file.url)
+        }));
+      }
+      return tools.textPlaceholder();
     }
-  }))) : tools.textPlaceholder()
-  // 处理文本数据
-  : /*#__PURE__*/React.createElement(RenderText, {
-    name: data.name,
-    value: data.value,
-    renderItemText: props.renderItemText
-  }), /*#__PURE__*/React.createElement(Modal, {
+    return /*#__PURE__*/React.createElement(RenderText, {
+      name: data.name,
+      value: data.value,
+      maxTagCount: props.maxTagCount,
+      renderItemText: props.renderItemText
+    });
+  };
+  return /*#__PURE__*/React.createElement(Fragment, null, renderContent(), /*#__PURE__*/React.createElement(Modal, {
     destroyOnClose: true,
     title: "\u67E5\u770B\u6587\u4EF6",
     open: open,
     width: 1100,
-    footer: false,
+    footer: null,
     onCancel: () => setOpen(false)
   }, IS_PDF_REG.test(previewUrl) && /*#__PURE__*/React.createElement("embed", {
     src: previewUrl,
@@ -135,90 +135,92 @@ function ItemRender(props) {
     controls: true,
     src: previewUrl,
     width: "100%",
-    height: "350"
+    height: 350
   })));
 }
-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) {
-      if (value.load) {
-        setLoading(true);
-        value.load().then(res => res.json()).then(res => {
-          if (res.success) {
-            setOptions(res.data);
-            setText(value?.selected?.map?.(i => `${i.key}&${i.label}`));
-          }
-          setLoading(false);
-        });
-      } else {
-        setText(value);
-      }
-    }
-  }, [props.value]);
-  return Array.isArray(text) ? /*#__PURE__*/React.createElement("div", {
-    style: {
-      gap: 6,
-      width: '100%',
-      display: 'flex',
-      minHeight: 22,
-      flexDirection: 'column'
+export function RenderText({
+  value,
+  name,
+  maxTagCount = 1,
+  renderItemText
+}) {
+  const [text, setText] = useState();
+  const [options, setOptions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    if (!value) return;
+    if (value.load) {
+      setLoading(true);
+      value.load().then(res => res.json()).then(res => {
+        if (res.success) {
+          setOptions(res.data);
+          setText(value?.selected?.map(i => `${i.key}&${i.label}`));
+        }
+        setLoading(false);
+      });
+    } else {
+      setText(value);
     }
-  }, /*#__PURE__*/React.createElement(Spin, {
-    spinning: loading
-  }, /*#__PURE__*/React.createElement(TreeSelect, {
-    treeCheckable: true,
-    treeDefaultExpandAll: true,
-    style: {
-      width: '100%'
-    },
-    value: text,
-    variant: "borderless",
-    treeData: options,
-    showSearch: false,
-    maxTagCount: 1
-  }))) : props.renderItemText ? props.renderItemText({
+  }, [value]);
+  if (Array.isArray(text)) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        gap: 6,
+        width: '100%',
+        display: 'flex',
+        minHeight: 22,
+        flexDirection: 'column'
+      }
+    }, /*#__PURE__*/React.createElement(Spin, {
+      spinning: loading
+    }, /*#__PURE__*/React.createElement(TreeSelect, {
+      treeCheckable: true,
+      treeDefaultExpandAll: true,
+      style: {
+        width: '100%'
+      },
+      value: text,
+      variant: "borderless",
+      treeData: options,
+      showSearch: false,
+      maxTagCount: maxTagCount
+    })));
+  }
+  return renderItemText ? renderItemText({
     text,
-    name: props.name
+    name
   }) : 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
-    }));
-  }
+export function RenderFileItem(props) {
+  const {
+    isImage,
+    url,
+    name,
+    imageWidth,
+    imageHeight,
+    imagePreview,
+    extraFileLink,
+    onPreview
+  } = props;
+  return isImage ? /*#__PURE__*/React.createElement(RenderImage, {
+    url: url,
+    imageWidth: imageWidth,
+    imageHeight: imageHeight,
+    imagePreview: imagePreview,
+    extraFileLink: extraFileLink
+  }) : /*#__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,
+    extraFileLink: extraFileLink
+  }) : /*#__PURE__*/React.createElement(RenderInvalidFile, {
+    url: url,
+    name: name
+  }));
 }
-function RenderImage({
+export function RenderImage({
   url,
   imageWidth,
   imageHeight,
@@ -237,48 +239,41 @@ function RenderImage({
     height: imageHeight || 64,
     preview: extraFileLink ? {
       visible: false,
-      onVisibleChange: () => {
-        window.open(url);
-      }
+      onVisibleChange: () => window.open(url)
     } : imagePreview
   }));
 }
-function RenderValidFile({
+export function RenderValidFile({
   url,
   name,
   extraFileLink,
   onPreview
 }) {
+  const handleClick = () => extraFileLink ? window.open(url) : onPreview();
   return /*#__PURE__*/React.createElement("a", {
     style: {
       gap: 4,
       display: 'flex',
       alignItems: 'center'
     },
-    onClick: () => {
-      if (extraFileLink) {
-        window.open(url);
-      } else {
-        onPreview();
-      }
-    }
+    onClick: handleClick
   }, /*#__PURE__*/React.createElement(FileOutlined, null), name);
 }
-function RenderInvalidFile({
+export function RenderInvalidFile({
   url,
   name
 }) {
   return /*#__PURE__*/React.createElement("a", {
     href: url,
+    target: "_blank",
     style: {
       gap: 4,
       display: 'flex',
       alignItems: 'center'
-    },
-    target: "_blank"
+    }
   }, /*#__PURE__*/React.createElement(LinkOutlined, null), name);
 }
-function RenderTable({
+export function RenderTable({
   columns,
   dataSource,
   imageWidth,
@@ -287,39 +282,33 @@ function RenderTable({
   extraFileLink,
   onPreview
 }) {
+  const renderColumn = col => {
+    const originalRender = col.render;
+    col.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) => /*#__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 originalRender ? originalRender(row) : row;
+    };
+    return col;
+  };
   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;
-    }),
+    columns: columns.map(renderColumn),
     dataSource: dataSource
   });
 }

package/FormilyRenderer/index.d.ts

@@ -1,38 +1,21 @@
-// @ts-ignore
 import * as React from 'react';
-import { ComponentProps } from '../types';
+import { CSSProperties } from 'react';
 
-interface FormilyRendererProps extends ComponentProps {
-  /**
-   * @description 表单code
-   */
-  code: string,
-  /**
-   * @description 表单初始化值
-   */
-  initialValues?: Record<string, any>,
-  /**
-   * @description 禁用字段
-   */
-  disabledFields?: string[];
-  /**
-   * @description 获取表单示例
-   * @see https://core.formilyjs.org/api/models/form#method
-   */
-  getRef?: (form: object) => void;
-  /**
-   * @description 图片高度
-   */
-  width?: number;
-  /**
-   * @description 样式
-   * @see https://ant.design/components/image-cn#previewtype
-   */
-  style?: React.CSSProperties
+export interface FormilyRendererProps {
+  /** 设计编码，用于请求后端配置 */
+  code: string;
+  /** 初始表单值 */
+  initialValues?: Record<string, any>;
+  /** 需要禁用的字段 */
+  disabledFields?: string[] | string;
+  /** 样式 */
+  style?: CSSProperties;
+  /** 获取内部 formRef 的回调 */
+  getRef?: (ref: React.RefObject<any>) => void;
 }
 
-interface FormilyRendererFc extends React.FC<FormilyRendererProps> {
-}
+declare const FormilyRenderer: React.ForwardRefExoticComponent<
+  FormilyRendererProps & React.RefAttributes<any>
+>;
 
-declare const FormilyRenderer: FormilyRendererFc;
 export default FormilyRenderer;

package/FormilyRenderer/index.js

@@ -1,38 +1,58 @@
-import React from 'react';
+import React, { useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
 import Renderer from '@cqsjjb-formily/renderer';
 import { http, tools } from '@cqsjjb/jjb-common-lib';
-export default /*#__PURE__*/React.forwardRef((props, ref) => {
-  const form = React.useRef();
-  const [schema, setSchema] = React.useState({});
-  React.useEffect(() => {
-    http.Get(`/design/designs/${props.code}`).then(res => {
-      if (res.success) {
+const FormilyRenderer = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    code,
+    style,
+    initialValues = {},
+    disabledFields = [],
+    getRef
+  } = props;
+  const formRef = useRef(null);
+  const [schema, setSchema] = useState({});
+
+  // 暴露 formRef 给父组件
+  useImperativeHandle(ref, () => formRef.current);
+  useEffect(() => {
+    let isMounted = true;
+
+    // 获取设计配置
+    http.Get(`/design/designs/${code}`).then(res => {
+      if (isMounted && res.success) {
         const {
           config
         } = res.data;
         setSchema(tools.parseObject(config));
       }
     });
-  }, []);
-  React.useEffect(() => {
-    if (ref) {
-      ref.current = form.current;
-    }
-    form.current.setValues(props.initialValues);
-    setTimeout(() => {
-      for (const field of tools.toArray(props.disabledFields)) {
-        if (form.current.fields[field]) {
-          form.current.fields[field].required = false;
-          form.current.fields[field].disabled = true;
-        }
+    return () => {
+      isMounted = false;
+    };
+  }, [code]);
+  useEffect(() => {
+    if (!formRef.current || !Object.keys(schema).length) return;
+
+    // 设置初始值
+    formRef.current.setValues(initialValues);
+
+    // 禁用字段
+    tools.toArray(disabledFields).forEach(field => {
+      const f = formRef.current.fields[field];
+      if (f) {
+        f.required = false;
+        f.disabled = true;
       }
-    }, 1000);
-    props.getRef && props.getRef(form);
-  }, [schema]);
+    });
+
+    // 返回 formRef 给父组件
+    getRef && getRef(formRef);
+  }, [schema, initialValues, disabledFields, getRef]);
   return /*#__PURE__*/React.createElement("div", {
-    style: props.style
+    style: style
   }, /*#__PURE__*/React.createElement(Renderer, {
-    ref: form,
+    ref: formRef,
     schema: schema
   }));
-});
+});
+export default FormilyRenderer;