@cqsjjb/jjb-react-admin-component 3.0.29 → 3.1.0

package/FormilyDescriptions/index.mjs

@@ -1,407 +0,0 @@
-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';
-
-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(() => {
-    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);
-      }
-    });
-  }, []);
-
-  const dataSource = tools.getDynamicFormilyFields(props.schema, props.values, { regions });
-
-  return dataSource.length === 0
-    ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
-    : (
-      <DescriptionsRender dataSource={dataSource} {...props} />
-    );
-}
-
-function DescriptionsRender(props) {
-  return props.dataSource.map((item, index) => {
-    const isLast = index === props.dataSource.length - 1;
-
-    return (
-      <Descriptions
-        key={index}
-        size={props.size}
-        style={{
-          marginBottom: isLast
-            ? 0
-            : formilyItemMargin.get(props.size || 'default')
-        }}
-        items={item.fromComponentEnum === 'GRID_FORM'
-          ? item.children.map((child, childIndex) => {
-            return {
-              key: childIndex,
-              span: child.formType === 'Table'
-                ? props.column
-                : 1,
-              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={props.column}
-        labelStyle={props.labelStyle}
-        contentStyle={props.contentStyle}
-      />
-    );
-  });
-}
-
-function ItemRender(props) {
-  const [ open, setOpen ] = React.useState(false);
-  const [ previewUrl, setPreviewUrl ] = React.useState('');
-
-  const {
-    data,
-    imageWidth,
-    imageHeight,
-    imagePreview,
-    extraFileLink
-  } = props;
-
-  return (
-    <React.Fragment>
-      {/*如果数据是集合*/}
-      {tools.isArray(data.value)
-        // 如果数据是字符串集合 或 数字集合
-        ? (tools.isStringArray(data.value) || tools.isNumberArray(data.value))
-          // 直接字符串拼接
-          ? data.value.join('、')
-          // 如果是对象集合
-          : tools.isObjectArray(data.value)
-            // 如果数据表单类型是 数据表格
-            ? data.formType === 'Table'
-              // 处理数据表格
-              ? (
-                <div style={{ width: '100%' }}>
-                  <RenderTable
-                    columns={data.tableColumns}
-                    dataSource={data.value}
-                    imageWidth={imageWidth}
-                    imageHeight={imageHeight}
-                    imagePreview={imagePreview}
-                    extraFileLink={extraFileLink}
-                    onPreview={url => {
-                      setOpen(true);
-                      setPreviewUrl(url);
-                    }}
-                  />
-                </div>
-              )
-              // 否则就是文件数据
-              : (
-                <div>
-                  {data.value.map((file, index) => (
-                    <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);
-                      }}
-                    />
-                  ))}
-                </div>
-              )
-            : tools.textPlaceholder()
-        // 处理文本数据
-        : (
-          <RenderText
-            name={data.name}
-            value={data.value}
-            renderItemText={props.renderItemText}
-          />
-        )}
-      <Modal
-        destroyOnClose
-        title="查看文件"
-        open={open}
-        width={1100}
-        footer={false}
-        onCancel={() => setOpen(false)}
-      >
-        {IS_PDF_REG.test(previewUrl) && (
-          <embed
-            src={previewUrl}
-            width="100%"
-            height={600}
-          />
-        )}
-        {IS_VIDEO_REG.test(previewUrl) && (
-          <video
-            controls
-            src={previewUrl}
-            width="100%"
-            height="350"
-          />
-        )}
-      </Modal>
-    </React.Fragment>
-  );
-}
-
-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)
-    ? (
-      <div
-        style={{
-          gap: 6,
-          width: '100%',
-          display: 'flex',
-          minHeight: 22,
-          flexDirection: 'column'
-        }}
-      >
-        <Spin spinning={loading}>
-          <TreeSelect
-            treeCheckable
-            treeDefaultExpandAll
-            style={{ width: '100%' }}
-            value={text}
-            variant="borderless"
-            treeData={options}
-            showSearch={false}
-            maxTagCount={1}
-          />
-        </Spin>
-      </div>
-    )
-    : props.renderItemText
-      ? props.renderItemText({
-        text,
-        name: props.name
-      })
-      : tools.textPlaceholder(text);
-}
-
-function RenderFileItem({
-  url,
-  name,
-  isImage,
-  imageWidth,
-  imageHeight,
-  imagePreview,
-  extraFileLink,
-  onPreview
-}) {
-  if (isImage) {
-    return (
-      <RenderImage
-        url={url}
-        imageWidth={imageWidth}
-        imageHeight={imageHeight}
-        imagePreview={imagePreview}
-        extraFileLink={extraFileLink}
-      />
-    );
-  } else {
-    return (
-      <Tooltip title={url}>
-        {IS_PDF_REG.test(url) || IS_VIDEO_REG.test(url)
-          ? (
-            <RenderValidFile
-              url={url}
-              name={name}
-              onPreview={onPreview}
-            />
-          )
-          : (
-            <RenderInvalidFile
-              url={url}
-              name={name}
-            />
-          )}
-      </Tooltip>
-    );
-  }
-}
-
-function RenderImage({
-  url,
-  imageWidth,
-  imageHeight,
-  imagePreview,
-  extraFileLink
-}) {
-  return (
-    <span
-      style={{
-        display: 'inline-block',
-        marginRight: 4,
-        marginBottom: 4
-      }}
-    >
-      <Image
-        src={url}
-        width={imageWidth || 64}
-        height={imageHeight || 64}
-        preview={extraFileLink
-          ? {
-            visible: false,
-            onVisibleChange: () => {
-              window.open(url);
-            }
-          }
-          : imagePreview}
-      />
-    </span>
-  );
-}
-
-function RenderValidFile({
-  url,
-  name,
-  extraFileLink,
-  onPreview
-}) {
-  return (
-    <a
-      style={{
-        gap: 4,
-        display: 'flex',
-        alignItems: 'center'
-      }}
-      onClick={() => {
-        if (extraFileLink) {
-          window.open(url);
-        } else {
-          onPreview();
-        }
-      }}
-    >
-      <FileOutlined />
-      {name}
-    </a>
-  );
-}
-
-function RenderInvalidFile({
-  url,
-  name
-}) {
-  return (
-    <a
-      href={url}
-      style={{
-        gap: 4,
-        display: 'flex',
-        alignItems: 'center'
-      }}
-      target="_blank"
-    >
-      <LinkOutlined />
-      {name}
-    </a>
-  );
-}
-
-function RenderTable({
-  columns,
-  dataSource,
-  imageWidth,
-  imageHeight,
-  imagePreview,
-  extraFileLink,
-  onPreview
-}) {
-  return (
-    <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 (
-              <Space direction="vertical">
-                {tools.getDynamicUploadFileList(row).map((file, index) => {
-                  return (
-                    <RenderFileItem
-                      key={index}
-                      url={file.url}
-                      name={file.name}
-                      isImage={file.isImage}
-                      imageWidth={imageWidth}
-                      imageHeight={imageHeight}
-                      imagePreview={imagePreview}
-                      extraFileLink={extraFileLink}
-                      onPreview={() => {
-                        onPreview(file.url);
-                      }}
-                    />
-                  );
-                })}
-              </Space>
-            );
-          }
-          if (tools.isObject(row)) {
-            return '数据错误';
-          }
-          return row;
-        };
-        return item;
-      })}
-      dataSource={dataSource}
-    />
-  );
-}

package/FormilyRenderer/index.mjs

@@ -1,46 +0,0 @@
-import React from 'react';
-import Renderer from '@cqsjjb-formily/renderer';
-
-import { http, tools } from '@cqsjjb/jjb-common-lib';
-
-export default 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 { 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;
-        }
-      }
-    }, 1000);
-
-    props.getRef && props.getRef(form);
-  }, [ schema ]);
-
-  return (
-    <div style={props.style}>
-      <Renderer
-        ref={form}
-        schema={schema}
-      />
-    </div>
-  );
-});

package/MediaQuery/index.mjs

@@ -1,104 +0,0 @@
-import React from 'react';
-
-const MEDIA_QUERY_LIST = {
-  MAX_WIDTH_479: '(max-width: 479px)',
-  MIN_WIDTH_480_AND_MAX_WIDTH_599: '(min-width: 480px) and (max-width: 599px)',
-  MIN_WIDTH_600_AND_MAX_WIDTH_899: '(min-width: 600px) and (max-width: 899px)',
-  MIN_WIDTH_900_AND_MAX_WIDTH_1199: '(min-width: 900px) and (max-width: 1199px)',
-  MIN_WIDTH_1200_AND_MAX_WIDTH_1439: '(min-width: 1200px) and (max-width: 1439px)',
-  MIN_WIDTH_1440: '(min-width: 1440px)'
-};
-
-export default class MediaQuery extends React.Component {
-  state = {
-    media: undefined
-  };
-
-  componentDidMount () {
-    const { disabled } = this.props;
-
-    if (disabled) {
-      return;
-    }
-
-    // 超小
-    this.ultraSmall = window.matchMedia(MEDIA_QUERY_LIST.MAX_WIDTH_479);
-    // 正常小
-    this.normalSmall = window.matchMedia(MEDIA_QUERY_LIST.MIN_WIDTH_480_AND_MAX_WIDTH_599);
-    // 中等
-    this.normalMiddle = window.matchMedia(MEDIA_QUERY_LIST.MIN_WIDTH_600_AND_MAX_WIDTH_899);
-    // 正常大
-    this.normalLarge = window.matchMedia(MEDIA_QUERY_LIST.MIN_WIDTH_900_AND_MAX_WIDTH_1199);
-    // 超大
-    this.superLarge = window.matchMedia(MEDIA_QUERY_LIST.MIN_WIDTH_1200_AND_MAX_WIDTH_1439);
-    // 超宽
-    this.normalHuge = window.matchMedia(MEDIA_QUERY_LIST.MIN_WIDTH_1440);
-
-    this.handleMediaQueryChange();
-
-    this.ultraSmall.addEventListener('change', this.handleMediaQueryChange.bind(this));
-    this.normalSmall.addEventListener('change', this.handleMediaQueryChange.bind(this));
-    this.normalMiddle.addEventListener('change', this.handleMediaQueryChange.bind(this));
-    this.normalLarge.addEventListener('change', this.handleMediaQueryChange.bind(this));
-    this.superLarge.addEventListener('change', this.handleMediaQueryChange.bind(this));
-    this.normalHuge.addEventListener('change', this.handleMediaQueryChange.bind(this));
-  }
-
-  componentWillUnmount () {
-    this.ultraSmall.removeEventListener('change', this.handleMediaQueryChange.bind(this));
-    this.normalSmall.removeEventListener('change', this.handleMediaQueryChange.bind(this));
-    this.normalMiddle.removeEventListener('change', this.handleMediaQueryChange.bind(this));
-    this.normalLarge.removeEventListener('change', this.handleMediaQueryChange.bind(this));
-    this.superLarge.removeEventListener('change', this.handleMediaQueryChange.bind(this));
-    this.normalHuge.removeEventListener('change', this.handleMediaQueryChange.bind(this));
-  }
-
-  handleMediaQueryChange () {
-    const { disabled } = this.props;
-
-    if (disabled) {
-      return;
-    }
-
-    let media;
-
-    if (this.ultraSmall.matches) {
-      media = this.ultraSmall.media;
-    } else if (this.normalSmall.matches) {
-      media = this.normalSmall.media;
-    } else if (this.normalMiddle.matches) {
-      media = this.normalMiddle.media;
-    } else if (this.normalLarge.matches) {
-      media = this.normalLarge.media;
-    } else if (this.superLarge.matches) {
-      media = this.superLarge.media;
-    } else if (this.normalHuge.matches) {
-      media = this.normalHuge.media;
-    }
-
-    this.setState({ media: Object.keys(MEDIA_QUERY_LIST).find(key => media === MEDIA_QUERY_LIST[ key ]) });
-  }
-
-  get children () {
-    return this.props.children;
-  }
-
-  render () {
-    const { media } = this.state;
-    const { children } = this.props;
-
-    return (
-      <>
-        {(Array.isArray(children)
-          ? children
-          : [].concat(children)).map((item, key) => (
-          React.createElement(item.type, {
-            key,
-            ...item.props,
-            [ 'data-media-query' ]: media
-          })
-        ))}
-      </>
-    );
-  }
-}

package/SearchForm/index.mjs

@@ -1,165 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Form, Button, Space, Row, Col } from 'antd';
-import { SearchOutlined, DoubleRightOutlined, UndoOutlined } from '@ant-design/icons';
-import './index.less';
-
-class searchForm extends React.Component {
-  form = React.createRef();
-  state = {
-    isOpen: false
-  };
-
-  getButtons () {
-    const {
-      form,
-      expand,
-      formLine,
-      colSize,
-      loading,
-      onReset
-    } = this.props;
-    return (
-      <Space>
-        <Button
-          type="primary"
-          icon={<SearchOutlined />}
-          htmlType="submit"
-          loading={loading}
-        >
-          查询
-        </Button>
-        <Button
-          icon={<UndoOutlined />}
-          loading={loading}
-          onClick={() => {
-            form
-              ? form.current.resetFields()
-              : this.form.current.resetFields();
-            onReset(form
-              ? form.current.getFieldsValue()
-              : this.form.current.getFieldsValue());
-          }}
-        >
-          重置
-        </Button>
-        {expand && formLine.length / colSize > 1 && (
-          <Button
-            icon={(
-              <DoubleRightOutlined
-                style={{
-                  transform: this.state.isOpen
-                    ? 'rotate(-90deg)'
-                    : 'rotate(90deg)'
-                }}
-              />
-            )}
-            onClick={() => this.setState({ isOpen: !this.state.isOpen })}
-          >
-            {this.state.isOpen
-              ? '收起'
-              : '展开'}
-          </Button>
-        )}
-      </Space>
-    );
-  }
-
-  groupsList () {
-    const arr = [];
-    this.props.formLine.forEach(i => {
-      arr.push({
-        show: true,
-        node: i
-      });
-    });
-    if (this.props.expand && this.state.isOpen) {
-      return arr;
-    }
-    if (!this.props.expand && arr.length > 3) {
-      return arr;
-    }
-    arr.forEach((i, index) => {
-      if (index > 2) {
-        i.show = false;
-      }
-    });
-    return arr;
-  }
-
-  componentDidMount () {
-    if (this.props.onRef) {
-      this.props.onRef(this.form);
-    }
-  }
-
-  render () {
-    const {
-      form,
-      style,
-      colSize,
-      initialValues,
-      onFinish
-    } = this.props;
-    const formItemList = this.groupsList();
-    return formItemList.length > 0
-      ? (
-        <Form
-          ref={form || this.form}
-          style={style}
-          initialValues={initialValues}
-          onFinish={values => onFinish(values)}
-        >
-          <Row gutter={[ 16, 16 ]}>
-            {formItemList.map((item, index) => (
-              <Col
-                style={{
-                  display: item.show
-                    ? 'block'
-                    : 'none'
-                }}
-                key={index}
-                span={24 / colSize}
-              >
-                {item.node}
-              </Col>
-            ))}
-            <Col span={24 / colSize}>
-              <Form.Item noStyle>
-                {this.getButtons()}
-              </Form.Item>
-            </Col>
-          </Row>
-        </Form>
-      )
-      : <></>;
-  }
-}
-
-searchForm.defaultProps = {
-  style: {},
-  expand: false,
-  colSize: 3,
-  loading: false,
-  formLine: [],
-  initialValues: {},
-  onRef: () => {
-  },
-  onReset: () => {
-  },
-  onFinish: () => {
-  }
-};
-searchForm.propTypes = {
-  form: PropTypes.object,
-  style: PropTypes.object,
-  expand: PropTypes.bool,
-  colSize: PropTypes.number,
-  loading: PropTypes.bool,
-  formLine: PropTypes.array,
-  initialValues: PropTypes.object,
-  onRef: PropTypes.func,
-  onReset: PropTypes.func,
-  onFinish: PropTypes.func
-};
-export default searchForm;