@antdp/antdp-ui/esm/QuickForm/index.js

基于antd封装的组件

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["collapseAttributes", "panelAttributes", "visible", "type", "extra", "formDatas", "colspan", "header", "defaultFormLayout", "defaultFormItemLayout", "size", "formHide", "initialHide"],
  _excluded2 = ["label", "name", "attributes", "type", "options", "onlyimg", "defaultFormItemLayout", "full", "defaultRowColspan", "hideInForm", "descItem", "render", "isHide"],
  _excluded3 = ["value", "label"];
/* eslint-disable camelcase */
import React, { forwardRef } from 'react';
import { Form, Input, Select, Collapse, Row, Col, Cascader, InputNumber, Radio, Divider, AutoComplete, Button, Checkbox, TreeSelect, ConfigProvider, DatePicker, TimePicker } from 'antd';
import CardPro from '../CardPro';
import UploadGrid from '../UploadGrid';
import InputCount from '../InputCount';
import zhCN from 'antd/es/locale/zh_CN';
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
import { LoadingOutlined, PlusOutlined, UploadOutlined, AudioOutlined } from '@ant-design/icons';
import { colLayout_one, colLayout_two, colLayout_third, colLayout_fourth, fromItemLayout_two_row, fromItemLayout_conspan_two, fromItemLayout_conspan_third, fromItemLayout_conspan_fourth, fromItemLayout_third_row, fromItemLayout_conspan_one, formDefaultFormItemLayout } from './formLayout';
import './index.css';
import { HideContext, useHideContext } from "./Hide/context";
import useFormItemHide from "./Hide/store";
import Hide from "./Hide";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export { getChildItemFun as getChildFormItemFun } from "./utils";
var Panel = Collapse.Panel;
var FormItem = Form.Item;
var Option = Select.Option;
var {
  Search
} = Input;
var {
  RangePicker,
  MonthPicker
} = DatePicker;
var QuickForm = (props, ref) => {
  var {
      collapseAttributes,
      panelAttributes,
      visible = false,
      type = 'cardform',
      extra,
      formDatas,
      colspan = 3,
      header,
      defaultFormLayout = 'vertical',
      defaultFormItemLayout = formDefaultFormItemLayout,
      size = 'default',
      formHide,
      initialHide
    } = props,
    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
  var [hide] = useFormItemHide(formHide);
  React.useMemo(() => hide.setInitialValues(initialHide || {}, true), []);
  var HideFormItemDoM = []; // 隐藏的表单
  var FormItemDoM = [];
  var rowcolspan; // col 里的布局
  var formitemlayout; // formitem 的布局

  for (var i = 0; i < formDatas.length; i++) {
    if (formDatas[i].hideInForm) {
      HideFormItemDoM.push(formDatas[i]);
    } else {
      FormItemDoM.push(formDatas[i]);
    }
  }
  // 计算一个row里排几个表单；
  var result = [];
  for (var _i = 0, j = FormItemDoM.length; _i < j; _i++) {
    if (FormItemDoM[_i].full) {
      result.push(FormItemDoM.slice(_i, _i + 1));
    } else {
      if (FormItemDoM[_i + 1] && FormItemDoM[_i + 1].full) {
        result.push(FormItemDoM.slice(_i, _i + 1));
      } else if (FormItemDoM[_i].defaultcolspan) {
        result.push(FormItemDoM.slice(_i, _i + FormItemDoM[_i].defaultcolspan));
        _i = _i + FormItemDoM[_i].defaultcolspan - 1;
      } else {
        result.push(FormItemDoM.slice(_i, _i + colspan));
        _i = _i + colspan - 1;
      }
    }
  }
  // 渲染成表单;
  var CollapseFormDoM = (item, idx) => {
    var {
        label,
        name,
        attributes,
        type,
        options,
        onlyimg,
        full,
        render,
        // 用于判断是否需要进行隐藏显示 (在组件外层包裹一层组件用于控制item显示和隐藏)
        isHide
      } = item,
      otherts = _objectWithoutPropertiesLoose(item, _excluded2);
    var dataList = options || [];
    var optionDatas = dataList && dataList.length > 0 && dataList.map((_ref, _idx) => {
      var {
          value,
          label
        } = _ref,
        others = _objectWithoutPropertiesLoose(_ref, _excluded3);
      if (type === 'select' || type === 'Select') {
        return /*#__PURE__*/_jsx(Option, _extends({
          value: value
        }, others, {
          children: label
        }), _idx);
      } else if (type === 'radio' || type === 'Radio') {
        return /*#__PURE__*/_jsx(Radio.Button, _extends({
          value: value
        }, others, {
          children: label
        }), _idx);
      }
    });
    var selectOption = optionDatas ? optionDatas : [];
    var rowcolspan_num = [colLayout_one, colLayout_two, colLayout_third, colLayout_fourth];
    var formitemlayout_num = [fromItemLayout_conspan_one, fromItemLayout_conspan_two, fromItemLayout_conspan_third, fromItemLayout_conspan_fourth];
    if (colspan && full) {
      rowcolspan = colLayout_one;
      if (colspan === 3 || colspan === 4) {
        if (props.defaultFormItemLayout) {
          // 如果FormCollapse组件上带有defaulFormItemLayout参数
          formitemlayout = props.defaultFormItemLayout;
          // eslint-disable-next-line max-depth
          if (item.defaultFormItemLayout || item.defaultRowColspan) {
            // 如果FormCollapse组件内部的某个小组件带有defaulFormItemLayout参数
            formitemlayout = item.defaultFormItemLayout;
            rowcolspan = item.defaultRowColspan; // 单独的表单col 布局
          }
        } else if (item.defaultFormItemLayout || item.defaultRowColspan) {
          //FormCollapse组件内部只有某个小组件带了defaulFormItemLayout参数
          formitemlayout = item.defaultFormItemLayout;
          rowcolspan = item.defaultRowColspan; // 单独的表单col 布局
        } else {
          formitemlayout = fromItemLayout_third_row;
        }
      } else {
        formitemlayout = fromItemLayout_two_row;
      }
    } else {
      rowcolspan = rowcolspan_num[colspan - 1];
      if (props.defaultFormItemLayout) {
        formitemlayout = props.defaultFormItemLayout;
        if (item.defaultFormItemLayout || item.defaultRowColspan) {
          // 如果FormCollapse组件内部的某个小组件带有defaultFormItemLayout参数
          formitemlayout = item.defaultFormItemLayout;
          rowcolspan = item.defaultRowColspan; // 单独的表单col 布局
        }
      } else if (item.defaultFormItemLayout || item.defaultRowColspan) {
        formitemlayout = item.defaultFormItemLayout || formitemlayout_num[colspan - 1];
        rowcolspan = item.defaultRowColspan; // 单独的表单col 布局
      } else {
        formitemlayout = formitemlayout_num[colspan - 1];
      }
    }

    // 上传图片的按钮展示
    var uploadButtonDom = () => {
      if (item.attributes.listType === 'picture-card') {
        if (item.attributes.imageUrl && item.attributes.imageUrl !== '') {
          return /*#__PURE__*/_jsx("img", {
            src: item.attributes.imageUrl,
            alt: "avatar",
            style: {
              width: '100%'
            }
          });
        } else if (item.attributes.fileList) {
          // 上传的图片大于或等于8张时 并且 没有onlyimg参数，显示icon上传按钮
          if (item.attributes.fileList.length >= 8 && !onlyimg) {
            return /*#__PURE__*/_jsxs("div", {
              children: [item.attributes.loading === 'loading' ? /*#__PURE__*/_jsx(LoadingOutlined, {}) : /*#__PURE__*/_jsx(PlusOutlined, {}), /*#__PURE__*/_jsx("div", {
                className: "ant-upload-text",
                children: "\u4E0A\u4F20"
              })]
            });
            // 上传的图片大于或等于maxCount张时 并且 有onlyimg参数，不显示上传按钮
          } else if (item.attributes.maxCount && item.attributes.fileList.length >= item.attributes.maxCount && onlyimg) {
            return null;
          }
          return /*#__PURE__*/_jsxs("div", {
            children: [item.attributes.loading === 'loading' ? /*#__PURE__*/_jsx(LoadingOutlined, {}) : /*#__PURE__*/_jsx(PlusOutlined, {}), /*#__PURE__*/_jsx("div", {
              className: "ant-upload-text",
              children: "\u4E0A\u4F20"
            })]
          });
        }
      } else {
        return /*#__PURE__*/_jsx("div", {
          children: /*#__PURE__*/_jsxs(Button, {
            children: [/*#__PURE__*/_jsx(UploadOutlined, {}), "\u4E0A\u4F20"]
          })
        });
      }
    };
    var renderItem = /*#__PURE__*/_jsx(Col, _extends({
      style: {
        display: item.hideInForm ? 'none' : 'block',
        padding: defaultFormLayout && defaultFormLayout === 'vertical' ? '0px 12px 8px 12px' : '0'
      },
      className: defaultFormLayout && defaultFormLayout === 'vertical' ? 'antdp-FormCol' : ''
    }, rowcolspan, {
      children: /*#__PURE__*/_jsx(FormItem, _extends({
        className: "antdp-FormItem",
        colon: false,
        label: label,
        name: name
      }, defaultFormLayout && defaultFormLayout === 'vertical' ? null : formitemlayout, otherts, {
        children: name ? (() => {
          // 组件基础参数
          var componentprams = _extends({
            size: size ? size : 'small'
          }, attributes);
          if (type === 'select' || type === 'Select') {
            return /*#__PURE__*/_jsx(Select, _extends({
              dropdownMatchSelectWidth: false,
              allowClear: true,
              placeholder: attributes && attributes.disabled ? '' : "\u8BF7\u9009\u62E9" + label + " "
            }, componentprams, {
              children: selectOption
            }));
          } else if (type === 'radio' || type === 'Radio') {
            return /*#__PURE__*/_jsx(Radio.Group, _extends({
              size: size ? size : 'small'
            }, attributes, {
              children: selectOption
            }));
          } else if (type === 'datePicker' || type === 'DatePicker') {
            return /*#__PURE__*/_jsx(DatePicker, _extends({
              locale: locale,
              style: {
                width: '100%'
              },
              placeholder: attributes && attributes.disabled ? '' : "\u8BF7\u9009\u62E9" + label + " "
            }, componentprams));
          } else if (type === 'monthPicker' || type === 'MonthPicker') {
            return /*#__PURE__*/_jsx(MonthPicker, _extends({
              locale: locale,
              style: {
                width: '100%'
              },
              placeholder: attributes && attributes.disabled ? '' : "\u8BF7\u9009\u62E9" + label + " "
            }, componentprams));
          } else if (type === 'rangePicker' || type === 'RangePicker') {
            return /*#__PURE__*/_jsx(RangePicker, _extends({
              locale: locale,
              style: {
                width: '100%'
              }
            }, componentprams));
          } else if (type === 'timepicker' || type === 'timePicker' || type === 'TimePicker') {
            return /*#__PURE__*/_jsx(TimePicker, _extends({
              locale: locale,
              style: {
                width: '100%'
              },
              placeholder: attributes && attributes.disabled ? '' : "\u8BF7\u9009\u62E9" + label + " "
            }, componentprams));
          } else if (type === 'cascader' || type === 'Cascader') {
            return /*#__PURE__*/_jsx(Cascader, _extends({
              placeholder: attributes && attributes.disabled ? '' : "\u8BF7\u9009\u62E9" + label + " "
            }, componentprams));
          } else if (type === 'textarea' || type === 'TextArea') {
            return /*#__PURE__*/_jsx(Input.TextArea, _extends({
              placeholder: attributes && attributes.disabled ? '' : "\u8BF7\u8F93\u5165" + label + " "
            }, componentprams));
          } else if (type === 'inputNumber' || type === 'InputNumber') {
            return /*#__PURE__*/_jsx(InputNumber, _extends({
              placeholder: attributes && attributes.disabled ? '' : "\u8BF7\u8F93\u5165" + label + " ",
              style: {
                width: '100%'
              }
            }, componentprams));
          } else if (type === 'treeSelect' || type === 'TreeSelect') {
            return /*#__PURE__*/_jsx(TreeSelect, _extends({
              placeholder: attributes && attributes.disabled ? '' : "\u8BF7\u9009\u62E9" + label + " "
            }, componentprams));
          } else if (type === 'checkbox' || type === 'Checkbox') {
            if (item.options && item.options.length > 0 || item.option && item.option.length > 0) {
              return /*#__PURE__*/_jsx(Checkbox.Group, _extends({
                options: item.options || item.option
              }, attributes));
            }
            return /*#__PURE__*/_jsx(Checkbox, _extends({}, attributes, {
              children: label || item.checkboxLable
            }));
          } else if (type === 'UploadGrid' || type === 'uploadGrid') {
            return /*#__PURE__*/_jsx(UploadGrid, _extends({}, attributes, {
              children: uploadButtonDom()
            }));
          } else if (type === 'autoComplete' || type === 'AutoComplete') {
            return /*#__PURE__*/_jsx(AutoComplete, _extends({
              placeholder: attributes && attributes.disabled ? '' : "\u8BF7\u8F93\u5165" + label + " "
            }, componentprams));
          } else if (type === 'Password') {
            return /*#__PURE__*/_jsx(Input.Password, _extends({
              placeholder: attributes && attributes.disabled ? '' : "\u8BF7\u8F93\u5165" + label + " "
            }, componentprams));
          } else if (type === 'inputCount' || type === 'InputCount') {
            return /*#__PURE__*/_jsx(InputCount, _extends({
              placeholder: attributes && attributes.disabled ? '' : "\u8BF7\u8F93\u5165" + label + " "
            }, attributes));
          } else if (type === 'render') {
            return render && render;
          } else {
            if (attributes && attributes.type === 'Search' || type === 'InputSearch') {
              var suffix = /*#__PURE__*/_jsx(AudioOutlined, {
                style: {
                  fontSize: 16,
                  color: '#fff'
                }
              });
              return /*#__PURE__*/_jsx(Search, _extends({
                suffix: suffix,
                placeholder: attributes && attributes.disabled ? '' : "\u8BF7\u8F93\u5165" + label + " "
              }, componentprams));
            }
            return /*#__PURE__*/_jsx(Input, _extends({
              placeholder: attributes && attributes.disabled ? '' : "\u8BF7\u8F93\u5165" + label + " "
            }, componentprams));
          }
        })() : /*#__PURE__*/_jsx(Input, _extends({
          placeholder: attributes && attributes.disabled ? '' : "\u8BF7\u8F93\u5165" + label + " ",
          size: size
        }, attributes))
      }))
    }), idx);
    if (isHide && name) {
      return /*#__PURE__*/_jsx(Hide, {
        name: name,
        children: renderItem
      }, idx);
    }
    return renderItem;
  };
  // 隐藏的表单集合
  var hideCollapseForm = HideFormItemDoM.map((item, idx) => CollapseFormDoM(item, idx));
  // 表单集合
  var CollapseForm = result.map((it, indix) => {
    return /*#__PURE__*/_jsx(Row, {
      children: it.map((item, idx) => {
        return CollapseFormDoM(item, idx);
      })
    }, indix);
  });
  // Form+表单集合
  var FormDom = /*#__PURE__*/_jsx(HideContext.Provider, {
    value: hide,
    children: /*#__PURE__*/_jsx(ConfigProvider, {
      locale: zhCN,
      children: /*#__PURE__*/_jsxs(Form, _extends({
        layout: defaultFormLayout ? defaultFormLayout : 'horizontal',
        ref: ref
      }, defaultFormLayout && defaultFormLayout === 'vertical' ? null : formitemlayout, otherProps, {
        children: [/*#__PURE__*/_jsx(Row, {
          children: hideCollapseForm
        }), /*#__PURE__*/_jsx("div", {
          children: CollapseForm
        })]
      }))
    })
  });
  // type 为 modal时没有折叠，没有标题，直接显示form表单内容
  if (type === 'modal') {
    return /*#__PURE__*/_jsx("div", {
      style: {
        margin: -10
      },
      children: FormDom
    });
  }
  // type 为CardPro  带标题
  if (type === 'CardPro') {
    return /*#__PURE__*/_jsx(CardPro, {
      title: header,
      children: /*#__PURE__*/_jsx("div", {
        className: "antdp-FormBox",
        children: FormDom
      })
    });
  }
  // type 为cardform 时 显示表单，分割线 分离每个表单
  if (type === 'cardform') {
    return /*#__PURE__*/_jsxs("div", {
      children: [/*#__PURE__*/_jsx("h3", {
        className: "antdp-FormTitle",
        children: header
      }), FormDom, /*#__PURE__*/_jsx(Divider, {
        type: "horizontal",
        className: "antdp-FormDivider"
      })]
    });
  }
  return /*#__PURE__*/_jsx(Collapse, _extends({
    defaultActiveKey: !visible ? ['1'] : ''
  }, collapseAttributes, {
    className: "antdp-mb10",
    children: /*#__PURE__*/_jsx(Panel, _extends({
      header: header
    }, panelAttributes, {
      extra: extra,
      children: FormDom
    }), "1")
  }));
};
var FormForward = /*#__PURE__*/forwardRef(QuickForm);
var QForm = FormForward;
QForm.useHideContext = useHideContext;
QForm.useFormItemHide = useFormItemHide;
export default QForm;