@cqsjjb/jjb-react-admin-component 3.0.17 → 3.0.18

package/FormilyDescriptions/index.d.ts

@@ -42,12 +42,12 @@ interface FormilyDescriptionsProps extends ComponentProps {
    * @description 参考antd/description
    * @see https://ant.design/components/descriptions-cn#descriptions
    */
-  labelStyle?: {};
+  labelStyle?: React.CSSProperties;
   /**
    * @description 参考antd/description
    * @see https://ant.design/components/descriptions-cn#descriptions
    */
-  contentStyle?: {};
+  contentStyle?: React.CSSProperties;
 }
 
 interface FormilyDescriptionsFc extends React.FC<FormilyDescriptionsProps> {

package/FormilyDescriptions/index.js

@@ -1,8 +1,9 @@
 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 { LinkOutlined } from '@ant-design/icons';
-import { Descriptions, Empty, Image, Tooltip } from 'antd';
+import { FilePdfOutlined, LinkOutlined } from '@ant-design/icons';
+import { Modal, Descriptions, Empty, Image, Tooltip, Tag, Spin } from 'antd';
+const formilyItemMargin = new Map([['small', 8], ['middle', 12], ['default', 16]]);
 export default function FormilyDescriptions(props) {
   const dataSource = tools.getDynamicFormilyFields(props.schema, props.values);
   return dataSource.length === 0 ? /*#__PURE__*/React.createElement(Empty, {
@@ -13,7 +14,7 @@ export default function FormilyDescriptions(props) {
       key: index,
       size: props.size,
       style: {
-        marginBottom: isLast ? 0 : 16
+        marginBottom: isLast ? 0 : formilyItemMargin.get(props.size || 'default')
       },
       items: item.fromComponentEnum === 'GRID_FORM' ? item.children.map((child, childIndex) => {
         return {
@@ -41,13 +42,15 @@ export default function FormilyDescriptions(props) {
   }));
 }
 function ItemRender(props) {
+  const [open, setOpen] = React.useState(false);
+  const [previewUrl, setPreviewUrl] = React.useState('');
   const {
     data,
     imageWidth,
     imageHeight,
     imagePreview
   } = props;
-  return tools.isArray(data.value) ? tools.isStringArray(data.value) || tools.isNumberArray(data.value) ? data.value.join('、') : tools.isObjectArray(data.value) ? /*#__PURE__*/React.createElement("div", null, data.value.map((next, nextIndex) => {
+  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) ? /*#__PURE__*/React.createElement("div", null, data.value.map((next, nextIndex) => {
     if (next.url) {
       if (next.isImage) {
         return /*#__PURE__*/React.createElement("span", {
@@ -66,7 +69,18 @@ function ItemRender(props) {
       } else {
         return /*#__PURE__*/React.createElement(Tooltip, {
           title: next.url
-        }, /*#__PURE__*/React.createElement("a", {
+        }, /\.pdf$/.test(next.url) ? /*#__PURE__*/React.createElement("a", {
+          key: nextIndex,
+          style: {
+            gap: 4,
+            display: 'flex',
+            alignItems: 'center'
+          },
+          onClick: () => {
+            setOpen(true);
+            setPreviewUrl(next.url);
+          }
+        }, /*#__PURE__*/React.createElement(FilePdfOutlined, null), "\u70B9\u51FB\u67E5\u770B") : /*#__PURE__*/React.createElement("a", {
           key: nextIndex,
           href: next.url,
           style: {
@@ -80,5 +94,73 @@ function ItemRender(props) {
     } else {
       return tools.textPlaceholder(next.name);
     }
-  })) : tools.textPlaceholder() : tools.textPlaceholder(data.value);
+  })) : tools.textPlaceholder() : /*#__PURE__*/React.createElement(RenderText, {
+    value: data.value
+  }) /*tools.textPlaceholder(data.value)*/, /*#__PURE__*/React.createElement(Modal, {
+    destroyOnClose: true,
+    title: "\u67E5\u770BPDF",
+    open: open,
+    width: 1100,
+    footer: false,
+    onCancel: () => setOpen(false)
+  }, /*#__PURE__*/React.createElement("embed", {
+    src: previewUrl,
+    width: "100%",
+    height: 600
+  })));
+}
+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;
+}
+function RenderText(props) {
+  const {
+    value
+  } = props;
+  const [text, setText] = React.useState();
+  const [loading, setLoading] = React.useState(false);
+  React.useEffect(() => {
+    if (value.load) {
+      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));
+        }
+        setLoading(false);
+      });
+    } else {
+      setText(value);
+    }
+  }, []);
+  return Array.isArray(text) ? /*#__PURE__*/React.createElement(Spin, {
+    spinning: loading
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      gap: 6,
+      display: 'flex',
+      minHeight: 22,
+      flexDirection: 'column'
+    }
+  }, text.map((item, index) => /*#__PURE__*/React.createElement(Tag, {
+    style: {
+      background: '#eee'
+    },
+    index: index,
+    bordered: false
+  }, item)))) : text;
 }

package/FormilyDescriptions/index.mjs

@@ -1,8 +1,14 @@
 import React from 'react';
 
 import { tools } from '@cqsjjb/jjb-common-lib';
-import { LinkOutlined } from '@ant-design/icons';
-import { Descriptions, Empty, Image, Tooltip } from 'antd';
+import { FilePdfOutlined, LinkOutlined } from '@ant-design/icons';
+import { Modal, Descriptions, Empty, Image, Tooltip, Tag, Spin } from 'antd';
+
+const formilyItemMargin = new Map([
+  [ 'small', 8 ],
+  [ 'middle', 12 ],
+  [ 'default', 16 ]
+]);
 
 export default function FormilyDescriptions(props) {
   const dataSource = tools.getDynamicFormilyFields(props.schema, props.values);
@@ -20,7 +26,7 @@ export default function FormilyDescriptions(props) {
               style={{
                 marginBottom: isLast
                   ? 0
-                  : 16
+                  : formilyItemMargin.get(props.size || 'default')
               }}
               items={item.fromComponentEnum === 'GRID_FORM'
                 ? item.children.map((child, childIndex) => {
@@ -54,6 +60,9 @@ export default function FormilyDescriptions(props) {
 }
 
 function ItemRender(props) {
+  const [ open, setOpen ] = React.useState(false);
+  const [ previewUrl, setPreviewUrl ] = React.useState('');
+
   const {
     data,
     imageWidth,
@@ -61,57 +70,163 @@ function ItemRender(props) {
     imagePreview
   } = props;
 
-  return tools.isArray(data.value)
-    ? (tools.isStringArray(data.value) || tools.isNumberArray(data.value))
-      ? data.value.join('、')
-      : tools.isObjectArray(data.value)
-        ? (
-          <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={imagePreview}
-                      />
-                    </span>
-                  );
-                } else {
-                  return (
-                    <Tooltip title={next.url}>
-                      <a
-                        key={nextIndex}
-                        href={next.url}
-                        style={{
-                          gap: 4,
-                          display: 'flex',
-                          alignItems: 'center'
-                        }}
-                        target="_blank"
-                      >
-                        <LinkOutlined />
-                        点击下载
-                      </a>
-                    </Tooltip>
-                  );
-                }
-              } else {
-                return tools.textPlaceholder(next.name);
-              }
-            })}
-          </div>
-        )
-        : tools.textPlaceholder()
-    : tools.textPlaceholder(data.value);
+  return (
+    <React.Fragment>
+      {tools.isArray(data.value)
+        ? (tools.isStringArray(data.value) || tools.isNumberArray(data.value))
+          ? data.value.join('、')
+          : tools.isObjectArray(data.value)
+            ? (
+              <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={imagePreview}
+                          />
+                        </span>
+                      );
+                    } else {
+                      return (
+                        <Tooltip title={next.url}>
+                          {/\.pdf$/.test(next.url)
+                            ? (
+                              <a
+                                key={nextIndex}
+                                style={{
+                                  gap: 4,
+                                  display: 'flex',
+                                  alignItems: 'center'
+                                }}
+                                onClick={() => {
+                                  setOpen(true);
+                                  setPreviewUrl(next.url);
+                                }}
+                              >
+                                <FilePdfOutlined />
+                                点击查看
+                              </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);
+                  }
+                })}
+              </div>
+            )
+            : tools.textPlaceholder()
+        : <RenderText value={data.value} />/*tools.textPlaceholder(data.value)*/}
+      <Modal
+        destroyOnClose
+        title="查看PDF"
+        open={open}
+        width={1100}
+        footer={false}
+        onCancel={() => setOpen(false)}
+      >
+        <embed
+          src={previewUrl}
+          width="100%"
+          height={600}
+        />
+      </Modal>
+    </React.Fragment>
+  );
+}
+
+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;
+}
+
+function RenderText(props) {
+  const { value } = props;
+  const [ text, setText ] = React.useState();
+  const [ loading, setLoading ] = React.useState(false);
+
+  React.useEffect(() => {
+    if (value.load) {
+      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));
+        }
+        setLoading(false);
+      });
+    } else {
+      setText(value);
+    }
+  }, []);
+
+  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>
+    )
+    : text;
 }

package/FormilyRenderer/index.d.ts

@@ -28,7 +28,7 @@ interface FormilyRendererProps extends ComponentProps {
    * @description 样式
    * @see https://ant.design/components/image-cn#previewtype
    */
-  style?: {}
+  style?: React.CSSProperties
 }
 
 interface FormilyRendererFc extends React.FC<FormilyRendererProps> {

package/FormilyRenderer/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Renderer from '@cqsjjb-formily/renderer';
 import { http, tools } from '@cqsjjb/jjb-common-lib';
-export default function FormilyRenderer(props) {
+export default /*#__PURE__*/React.forwardRef((props, ref) => {
   const form = React.useRef();
   const [schema, setSchema] = React.useState({});
   React.useEffect(() => {
@@ -15,23 +15,24 @@ export default function FormilyRenderer(props) {
     });
   }, []);
   React.useEffect(() => {
-    if (!tools.isEmptyObject(schema)) {
-      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;
-          }
-        }
-      }, 1000);
-      props.getRef && props.getRef(form);
+    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;
+        }
+      }
+    }, 1000);
+    props.getRef && props.getRef(form);
   }, [schema]);
   return /*#__PURE__*/React.createElement("div", {
     style: props.style
-  }, !tools.isEmptyObject(schema) && /*#__PURE__*/React.createElement(Renderer, {
+  }, /*#__PURE__*/React.createElement(Renderer, {
     ref: form,
     schema: schema
   }));
-}
+});

package/FormilyRenderer/index.mjs

@@ -3,7 +3,7 @@ import Renderer from '@cqsjjb-formily/renderer';
 
 import { http, tools } from '@cqsjjb/jjb-common-lib';
 
-export default function FormilyRenderer (props) {
+export default React.forwardRef((props, ref) => {
   const form = React.useRef();
   const [ schema, setSchema ] = React.useState({});
 
@@ -17,28 +17,30 @@ export default function FormilyRenderer (props) {
   }, []);
 
   React.useEffect(() => {
-    if (!tools.isEmptyObject(schema)) {
-      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;
-          }
-        }
-      }, 1000);
-      props.getRef && props.getRef(form);
+    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;
+        }
+      }
+    }, 1000);
+
+    props.getRef && props.getRef(form);
   }, [ schema ]);
 
   return (
     <div style={props.style}>
-      {!tools.isEmptyObject(schema) && (
-        <Renderer
-          ref={form}
-          schema={schema}
-        />
-      )}
+      <Renderer
+        ref={form}
+        schema={schema}
+      />
     </div>
   );
-}
+});

package/package.json

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