@cqsjjb/jjb-react-admin-component 3.0.14 → 3.0.16

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,70 @@
+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: tools.isStringArray(child.value) || tools.isNumberArray(child.value) ? child.value.join('、') : tools.isObjectArray(child.value) ? /*#__PURE__*/React.createElement("div", null, child.value.map((next, nextIndex) => {
+            if (next.url) {
+              if (next.isImage) {
+                return /*#__PURE__*/React.createElement("span", {
+                  style: {
+                    display: 'inline-block',
+                    marginRight: 4,
+                    marginBottom: 4
+                  }
+                }, /*#__PURE__*/React.createElement(Image, {
+                  key: nextIndex,
+                  src: next.url,
+                  width: props.imageWidth || 64,
+                  height: props.imageHeight || 64,
+                  preview: props.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(child.value)
+        };
+      }) : [{
+        key: 1,
+        label: item.name,
+        children: tools.textPlaceholder(item.value)
+      }],
+      colon: props.colon,
+      title: props.title,
+      extra: props.extra,
+      layout: props.layout || 'vertical',
+      column: 3,
+      labelStyle: props.labelStyle,
+      contentStyle: props.contentStyle
+    });
+  }));
+}

package/FormilyDescriptions/index.mjs

@@ -0,0 +1,102 @@
+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: (tools.isStringArray(child.value) || tools.isNumberArray(child.value))
+                      ? child.value.join('、')
+                      : tools.isObjectArray(child.value)
+                        ? (
+                          <div>
+                          {child.value.map((next, nextIndex) => {
+                            if (next.url) {
+                              if (next.isImage) {
+                                return (
+                                  <span
+                                    style={{
+                                      display: 'inline-block',
+                                      marginRight: 4,
+                                      marginBottom: 4
+                                    }}
+                                  >
+                                    <Image
+                                      key={nextIndex}
+                                      src={next.url}
+                                      width={props.imageWidth || 64}
+                                      height={props.imageHeight || 64}
+                                      preview={props.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(child.value)
+                  };
+                })
+                : [
+                  {
+                    key: 1,
+                    label: item.name,
+                    children: tools.textPlaceholder(item.value)
+                  }
+                ]}
+              colon={props.colon}
+              title={props.title}
+              extra={props.extra}
+              layout={props.layout || 'vertical'}
+              column={3}
+              labelStyle={props.labelStyle}
+              contentStyle={props.contentStyle}
+            />
+          );
+        })}
+      </React.Fragment>
+    );
+}

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/TableAction/index.js

@@ -4,7 +4,7 @@ import { MoreOutlined } from '@ant-design/icons';
 import { Dropdown, Space } from 'antd';
 export default function TableAction(props) {
   const maximum = props.maximum || 3;
-  const children = tools.isArray(props.children) ? props.children : [].concat(props.children);
+  const children = (tools.isArray(props.children) ? props.children : [].concat(props.children)).filter(i => i);
   const showArray = children.slice(0, maximum);
   const hideArray = children.slice(maximum);
   return /*#__PURE__*/React.createElement(Space, {

package/TableAction/index.mjs

@@ -8,7 +8,7 @@ export default function TableAction(props) {
   const maximum = props.maximum || 3;
   const children = (tools.isArray(props.children)
     ? props.children
-    : [].concat(props.children));
+    : [].concat(props.children)).filter(i => i);
   const showArray = children.slice(0, maximum);
   const hideArray = children.slice(maximum);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cqsjjb/jjb-react-admin-component",
-  "version": "3.0.14",
+  "version": "3.0.16",
   "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"