@cqsjjb/jjb-react-admin-component 3.3.14 → 3.3.15

package/FormilyDescriptions/index.js

@@ -1,18 +1,14 @@
 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 React 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';
+import { Modal, Descriptions, Empty, Image, Tooltip, Spin, Table, Space } 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({
-  schema,
-  values,
-  ...props
-}) {
-  const [regions, setRegions] = useState([]);
-  useEffect(() => {
+export default function FormilyDescriptions(props) {
+  const [regions, setRegions] = React.useState([]);
+  React.useEffect(() => {
     fetch(`${window.process.env.app.API_HOST}/system/operation/regions`, {
       headers: {
         token: sessionStorage.token
@@ -20,49 +16,43 @@ export default function FormilyDescriptions({
     }).then(res => res.json()).then(res => {
       if (res.success) {
         setRegions(res.data);
-        props.onLoad && props.onLoad();
       }
     });
   }, []);
-  const dataSource = tools.getDynamicFormilyFields(schema, values, {
+  const dataSource = tools.getDynamicFormilyFields(props.schema, props.values, {
     regions
   });
-  if (!dataSource.length) return /*#__PURE__*/React.createElement(Empty, {
+  return dataSource.length === 0 ? /*#__PURE__*/React.createElement(Empty, {
     image: Empty.PRESENTED_IMAGE_SIMPLE
-  });
-  return /*#__PURE__*/React.createElement(DescriptionsRender, _extends({
+  }) : /*#__PURE__*/React.createElement(DescriptionsRender, _extends({
     dataSource: dataSource
   }, props));
 }
-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))
-    }];
+function DescriptionsRender(props) {
+  return props.dataSource.map((item, index) => {
+    const isLast = index === props.dataSource.length - 1;
     return /*#__PURE__*/React.createElement(Descriptions, {
       key: index,
-      size: size,
+      size: props.size,
       style: {
-        marginBottom
+        marginBottom: isLast ? 0 : formilyItemMargin.get(props.size || 'default')
       },
-      items: items,
+      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))
+      }],
       colon: props.colon,
       title: props.title,
       extra: props.extra,
@@ -73,67 +63,69 @@ export function DescriptionsRender({
     });
   });
 }
-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 = () => {
-    const systemStyle = props.systemStyle ? props.systemStyle(data.fieldCode) : {};
-    if (tools.isArray(data.value)) {
-      if (tools.isStringArray(data.value) || tools.isNumberArray(data.value)) {
-        return /*#__PURE__*/React.createElement("div", {
-          style: systemStyle
-        }, 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,
-          systemStyle: systemStyle
-        }) : 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),
-          systemStyle: systemStyle
-        }));
-      }
-      return tools.textPlaceholder();
+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%'
     }
-    return /*#__PURE__*/React.createElement(RenderText, {
-      name: data.name,
-      value: data.value,
-      maxTagCount: props.maxTagCount,
-      renderItemText: props.renderItemText,
-      systemStyle: systemStyle
-    });
-  };
-  return /*#__PURE__*/React.createElement(Fragment, null, renderContent(), /*#__PURE__*/React.createElement(Modal, {
+  }, /*#__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);
+    }
+  }))) : tools.textPlaceholder()
+  // 处理文本数据
+  : /*#__PURE__*/React.createElement(RenderText, {
+    name: data.name,
+    value: data.value,
+    renderItemText: props.renderItemText
+  }), /*#__PURE__*/React.createElement(Modal, {
     destroyOnClose: true,
     title: "\u67E5\u770B\u6587\u4EF6",
     open: open,
     width: 1100,
-    footer: null,
+    footer: false,
     onCancel: () => setOpen(false)
   }, IS_PDF_REG.test(previewUrl) && /*#__PURE__*/React.createElement("embed", {
     src: previewUrl,
@@ -143,120 +135,126 @@ export function ItemRender({
     controls: true,
     src: previewUrl,
     width: "100%",
-    height: 350
+    height: "350"
   })));
 }
-export function RenderText({
-  value,
-  name,
-  maxTagCount = 1,
-  renderItemText,
-  systemStyle
-}) {
-  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);
+function RenderText(props) {
+  const {
+    value
+  } = props;
+  const [text, setText] = React.useState();
+  const [loading, setLoading] = React.useState(false);
+  const getVal = item => item?.value ?? item?.key ?? item?.id ?? item?.code ?? item?.bizTypeCode ?? item?.classificationCode ?? '';
+  const getLab = item => item?.label ?? item?.name ?? item?.title ?? item?.bizTypeName ?? item?.classificationName ?? '';
+  const getSelectedDisplayValue = item => {
+    const val = getVal(item);
+    const lab = getLab(item);
+    return val && lab ? `${val}&${lab}` : lab || val || '';
+  };
+  const findInTree = (nodes, id) => {
+    if (!Array.isArray(nodes)) return null;
+    for (const node of nodes) {
+      const val = getVal(node);
+      if (val === id || String(val) === String(id)) return node;
+      if (node.children) {
+        const found = findInTree(node.children, id);
+        if (found) return found;
+      }
     }
-  }, [value]);
-  if (Array.isArray(text)) {
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        gap: 6,
-        width: '100%',
-        display: 'flex',
-        minHeight: 22,
-        flexDirection: 'column',
-        ...systemStyle
+    return null;
+  };
+  const toDisplayLabels = displayArr => {
+    return (displayArr || []).map(s => typeof s === 'string' && s.includes('&') ? s.split('&').pop() : s).filter(Boolean).join('、') || tools.textPlaceholder();
+  };
+  React.useEffect(() => {
+    if (value) {
+      if (value.load) {
+        setLoading(true);
+        value.load().then(res => res.json()).then(res => {
+          try {
+            if (res.success) {
+              const rawData = res.data || [];
+              let displayText = [];
+              const rawSelected = value?.selected ?? value?.value;
+              const selected = tools.isArray(rawSelected) ? rawSelected : rawSelected !== undefined && rawSelected !== null && rawSelected !== '' ? [rawSelected] : [];
+              if (selected.length > 0) {
+                const isIdArray = selected.every(s => tools.isNumber(s) || tools.isString(s));
+                if (isIdArray) {
+                  displayText = selected.map(id => {
+                    const matched = findInTree(rawData, id);
+                    return matched ? getSelectedDisplayValue(matched) : String(id);
+                  }).filter(Boolean);
+                } else {
+                  displayText = selected.map(getSelectedDisplayValue).filter(Boolean);
+                }
+              }
+              setText(displayText);
+            }
+          } finally {
+            setLoading(false);
+          }
+        }).catch(() => 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: maxTagCount
-    })));
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      ...systemStyle
     }
-  }, renderItemText ? renderItemText({
-    text,
-    name
-  }) : tools.textPlaceholder(text));
-}
-export function RenderFileItem(props) {
-  const {
-    isImage,
-    url,
-    name,
-    imageWidth,
-    imageHeight,
-    imagePreview,
-    extraFileLink,
-    onPreview,
-    systemStyle
-  } = props;
-  return isImage ? /*#__PURE__*/React.createElement(RenderImage, {
-    url: url,
-    imageWidth: imageWidth,
-    imageHeight: imageHeight,
-    imagePreview: imagePreview,
-    extraFileLink: extraFileLink,
-    systemStyle: systemStyle
-  }) : /*#__PURE__*/React.createElement(Tooltip, {
-    title: url
+  }, [props.value]);
+  return Array.isArray(text) ? /*#__PURE__*/React.createElement(Spin, {
+    spinning: loading
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      ...systemStyle
+      width: '100%',
+      wordBreak: 'break-word',
+      whiteSpace: 'normal'
     }
-  }, 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
-  })));
+  }, toDisplayLabels(text))) : props.renderItemText ? props.renderItemText({
+    text,
+    name: props.name
+  }) : tools.textPlaceholder(text);
 }
-export function RenderImage({
+function RenderFileItem({
   url,
+  name,
+  isImage,
   imageWidth,
   imageHeight,
   imagePreview,
   extraFileLink,
-  systemStyle
+  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,
-      ...(systemStyle ? {
-        ...systemStyle,
-        border: `1px solid ${systemStyle?.color || '#d9d9d9'}`
-      } : {})
+      marginBottom: 4
     }
   }, /*#__PURE__*/React.createElement(Image, {
     src: url,
@@ -264,83 +262,89 @@ export function RenderImage({
     height: imageHeight || 64,
     preview: extraFileLink ? {
       visible: false,
-      onVisibleChange: () => window.open(url)
+      onVisibleChange: () => {
+        window.open(url);
+      }
     } : imagePreview
   }));
 }
-export function RenderValidFile({
+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: handleClick
+    onClick: () => {
+      if (extraFileLink) {
+        window.open(url);
+      } else {
+        onPreview();
+      }
+    }
   }, /*#__PURE__*/React.createElement(FileOutlined, null), name);
 }
-export function RenderInvalidFile({
+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);
 }
-export function RenderTable({
+function RenderTable({
   columns,
   dataSource,
   imageWidth,
   imageHeight,
   imagePreview,
   extraFileLink,
-  onPreview,
-  systemStyle
+  onPreview
 }) {
-  const renderColumn = col => {
-    const originalRender = col.render;
-    col.render = row => {
-      if (tools.isNumberArray(row) || tools.isStringArray(row)) {
-        return /*#__PURE__*/React.createElement("div", {
-          style: systemStyle
-        }, 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),
-          systemStyle: systemStyle
-        })));
-      }
-      if (tools.isObject(row)) return '数据错误';
-      return originalRender ? originalRender(row) : row;
-    };
-    return col;
-  };
   return /*#__PURE__*/React.createElement(Table, {
     rowKey: (record, index) => index,
-    columns: columns.map(renderColumn),
-    dataSource: dataSource,
-    style: systemStyle
+    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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cqsjjb/jjb-react-admin-component",
-  "version": "3.3.14",
+  "version": "3.3.15",
   "description": "jjb-react-admin-组件库-稳定版",
   "main": "index.js",
   "author": "jjb-front-team",