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

package/FormilyDescriptions/index.d.ts

@@ -0,0 +1,57 @@
+// @ts-ignore
+import * as React from 'react';
+import { ComponentProps } from '../types';
+
+interface FormilyDescriptionsProps extends ComponentProps {
+  /**
+   * @description 表单配置
+   */
+  schema: any,
+  /**
+   * @description 表单数据
+   */
+  values: any,
+  /**
+   * @description 尺寸
+   */
+  size?: 'default' | 'middle' | 'small';
+  /**
+   * @description 图片宽度
+   */
+  imageWidth?: number;
+  /**
+   * @description 图片高度
+   */
+  imageHeight?: number;
+  /**
+   * @description 图片预览配置
+   * @see https://ant.design/components/image-cn#previewtype
+   */
+  imagePreview?: boolean | {}
+  /**
+   * @description 是否显示冒号
+   * @see https://ant.design/components/descriptions-cn#descriptions
+   */
+  colon?: boolean;
+  /**
+   * @description 显示布局
+   * @see https://ant.design/components/descriptions-cn#descriptions
+   */
+  layout?: 'vertical' | 'horizontal';
+  /**
+   * @description 参考antd/description
+   * @see https://ant.design/components/descriptions-cn#descriptions
+   */
+  labelStyle?: {};
+  /**
+   * @description 参考antd/description
+   * @see https://ant.design/components/descriptions-cn#descriptions
+   */
+  contentStyle?: {};
+}
+
+interface FormilyDescriptionsFc extends React.FC<FormilyDescriptionsProps> {
+}
+
+declare const FormilyDescriptions: FormilyDescriptionsFc;
+export default FormilyDescriptions;

package/FormilyDescriptions/index.js

@@ -0,0 +1,84 @@
+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';
+export default function FormilyDescriptions(props) {
+  const dataSource = tools.getDynamicFormilyFields(props.schema, props.values);
+  return dataSource.length === 0 ? /*#__PURE__*/React.createElement(Empty, {
+    image: Empty.PRESENTED_IMAGE_SIMPLE
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, dataSource.map((item, index) => {
+    const isLast = index === dataSource.length - 1;
+    return /*#__PURE__*/React.createElement(Descriptions, {
+      key: index,
+      size: props.size,
+      style: {
+        marginBottom: isLast ? 0 : 16
+      },
+      items: item.fromComponentEnum === 'GRID_FORM' ? item.children.map((child, childIndex) => {
+        return {
+          key: childIndex,
+          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,
+      layout: props.layout || 'vertical',
+      column: 3,
+      labelStyle: props.labelStyle,
+      contentStyle: props.contentStyle
+    });
+  }));
+}
+function ItemRender(props) {
+  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) => {
+    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: imagePreview
+        }));
+      } else {
+        return /*#__PURE__*/React.createElement(Tooltip, {
+          title: next.url
+        }, /*#__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);
+    }
+  })) : tools.textPlaceholder() : tools.textPlaceholder(data.value);
+}

package/FormilyDescriptions/index.mjs

@@ -0,0 +1,117 @@
+import React from 'react';
+
+import { tools } from '@cqsjjb/jjb-common-lib';
+import { LinkOutlined } from '@ant-design/icons';
+import { Descriptions, Empty, Image, Tooltip } from 'antd';
+
+export default function FormilyDescriptions(props) {
+  const dataSource = tools.getDynamicFormilyFields(props.schema, props.values);
+  return dataSource.length === 0
+    ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+    : (
+      <React.Fragment>
+        {dataSource.map((item, index) => {
+          const isLast = index === dataSource.length - 1;
+
+          return (
+            <Descriptions
+              key={index}
+              size={props.size}
+              style={{
+                marginBottom: isLast
+                  ? 0
+                  : 16
+              }}
+              items={item.fromComponentEnum === 'GRID_FORM'
+                ? item.children.map((child, childIndex) => {
+                  return {
+                    key: childIndex,
+                    label: child.name,
+                    children: (
+                      <ItemRender data={child} {...props} />
+                    )
+                  };
+                })
+                : [
+                  {
+                    key: 1,
+                    label: item.name,
+                    children: <ItemRender data={item} {...props} />
+                  }
+                ]}
+              colon={props.colon}
+              title={props.title}
+              extra={props.extra}
+              layout={props.layout || 'vertical'}
+              column={3}
+              labelStyle={props.labelStyle}
+              contentStyle={props.contentStyle}
+            />
+          );
+        })}
+      </React.Fragment>
+    );
+}
+
+function ItemRender(props) {
+  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)
+        ? (
+          <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);
+}

package/FormilyRenderer/index.d.ts

@@ -0,0 +1,38 @@
+// @ts-ignore
+import * as React from 'react';
+import { ComponentProps } from '../types';
+
+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?: {}
+}
+
+interface FormilyRendererFc extends React.FC<FormilyRendererProps> {
+}
+
+declare const FormilyRenderer: FormilyRendererFc;
+export default FormilyRenderer;

package/FormilyRenderer/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import Renderer from '@cqsjjb-formily/renderer';
+import { http, tools } from '@cqsjjb/jjb-common-lib';
+export default function FormilyRenderer(props) {
+  const form = React.useRef();
+  const [schema, setSchema] = React.useState({});
+  React.useEffect(() => {
+    http.Get(`/design/designs/${props.code}`).then(res => {
+      if (res.success) {
+        const {
+          config
+        } = res.data;
+        setSchema(tools.parseObject(config));
+      }
+    });
+  }, []);
+  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);
+    }
+  }, [schema]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: props.style
+  }, !tools.isEmptyObject(schema) && /*#__PURE__*/React.createElement(Renderer, {
+    ref: form,
+    schema: schema
+  }));
+}

package/FormilyRenderer/index.less

@@ -0,0 +1,6 @@
+.@{ant-prefix}-form-renderer {
+  .@{ant-prefix}-formily-grid-layout {
+    gap: 4px 30px !important;
+    grid-template-columns: repeat(3, minmax(0px, 1fr)) !important;
+  }
+}

package/FormilyRenderer/index.mjs

@@ -0,0 +1,44 @@
+import React from 'react';
+import Renderer from '@cqsjjb-formily/renderer';
+
+import { http, tools } from '@cqsjjb/jjb-common-lib';
+
+export default function FormilyRenderer (props) {
+  const form = React.useRef();
+  const [ schema, setSchema ] = React.useState({});
+
+  React.useEffect(() => {
+    http.Get(`/design/designs/${props.code}`).then(res => {
+      if (res.success) {
+        const { config } = res.data;
+        setSchema(tools.parseObject(config));
+      }
+    });
+  }, []);
+
+  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);
+    }
+  }, [ schema ]);
+
+  return (
+    <div style={props.style}>
+      {!tools.isEmptyObject(schema) && (
+        <Renderer
+          ref={form}
+          schema={schema}
+        />
+      )}
+    </div>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cqsjjb/jjb-react-admin-component",
-  "version": "3.0.15",
+  "version": "3.0.17",
   "description": "jjb-react-admin-组件库@new",
   "main": "index.js",
   "author": "jjb-front-team",
@@ -13,6 +13,7 @@
     "spark-md5": "^3.0.2",
     "classnames": "^2.5.1",
     "antd-img-crop": "latest",
+    "@cqsjjb-formily/renderer": "latest",
     "@ant-design/pro-layout": "latest",
     "use-antd-resizable-header": "latest",
     "@ant-design/pro-components": "latest"