@uiw-admin/components/esm/ProTable/BaseForm.js

业务组件集合

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["widgetProps", "key", "widget", "label", "initialValue"];
import React, { useEffect, useMemo, useRef } from 'react';
import { Button, Input, Form, Row, Col, Checkbox, Switch, Textarea, DateInput, TimePicker, MonthPicker, SearchSelect, DateInputRange } from 'uiw';
import Select from './widgets/Select';
import FormRadio from './widgets/Radio';
import SearchTree from './widgets/SearchTree';
import { useStore } from './hooks';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var widgets = {
  input: Input,
  radio: FormRadio,
  checkbox: Checkbox,
  switch: Switch,
  select: Select,
  searchSelect: SearchSelect,
  textarea: Textarea,
  dateInput: DateInput,
  timePicker: TimePicker,
  monthPicker: MonthPicker,
  searchTree: SearchTree,
  dateInputRange: DateInputRange
  // treeChecked: TreeChecked,
};

var BaseForm = props => {
  var store = useStore();
  var formRef = useRef();
  var {
    updateStore,
    updateForm
  } = store;
  var {
    columns,
    searchBtns,
    onBeforeSearch,
    formCol = 5
  } = props;
  var getFields = (formProps, title) => {
    var {
        widgetProps,
        widget,
        label,
        initialValue
      } = formProps,
      otherProps = _objectWithoutPropertiesLoose(formProps, _excluded);
    var Widget = widgets[widget];
    return _extends({
      label: label || title,
      children: /*#__PURE__*/_jsx(Widget, _extends({}, widgetProps))
    }, otherProps, {
      initialValue
    });
  };

  // 获取表单配置
  var getFormFields = useMemo(() => {
    var fields = {};
    var helper = cols => {
      cols.forEach(col => {
        if (col.props && Object.keys(col.props).length > 0) {
          if (Array.isArray(col.props)) {
            col.props.forEach(f => {
              var name = f.key || col.key;
              fields[name] = getFields(f, col.title);
            });
          } else {
            var {
              key
            } = col.props;
            var name = key || col.key;
            fields[name] = getFields(col.props, col.title);
          }
        }
        // 多层children
        if (col.children && col.children.length > 0) {
          helper(col.children);
        }
      });
    };
    helper(columns);
    return fields;
  }, [JSON.stringify(columns)]);

  // 查询
  var onFormSearch = _ref => {
    var {
      initial,
      current
    } = _ref;
    updateStore({
      searchValues: _extends({}, initial, current)
    });
    // onSearch();
  };

  useEffect(() => {
    // 存储表单组件实例
    if (formRef.current) {
      updateForm(formRef);
    }
  }, [formRef]);

  // 表单占比
  var cent = 100 / formCol + '%';
  var itemsLength = Object.keys(getFormFields).length;
  var emptyLength = formCol - 1 - itemsLength % formCol;
  return /*#__PURE__*/_jsx(Form, {
    style: {
      background: '#fff'
    },
    className: "uiw-protable-form",
    resetOnSubmit: false,
    onSubmit: _ref2 => {
      var {
        initial,
        current
      } = _ref2;
      // 搜索前校验
      if (onBeforeSearch) {
        if (onBeforeSearch != null && onBeforeSearch({
          initial,
          current
        })) {
          onFormSearch({
            initial,
            current
          });
        }
      } else {
        onFormSearch({
          initial,
          current
        });
      }
    },
    onSubmitError: error => {
      if (error.filed) {
        return _extends({}, error.filed);
      }
      return null;
    },
    ref: formRef,
    fields: getFormFields,
    children: _ref3 => {
      var {
        fields = {},
        state,
        canSubmit,
        resetForm
      } = _ref3;
      return /*#__PURE__*/_jsx("div", {
        children: /*#__PURE__*/_jsxs(Row, {
          gutter: 12,
          children: [Object.keys(fields).map(key => /*#__PURE__*/_jsx(Col, {
            fixed: true,
            style: {
              width: cent
            },
            children: fields[key]
          }, key)), Array.from({
            length: emptyLength
          }, (_, index) => /*#__PURE__*/_jsx(Col, {
            fixed: true,
            style: {
              width: cent
            }
          }, index.toString())), /*#__PURE__*/_jsx(Col, {
            align: "bottom",
            style: {
              textAlign: 'right',
              marginBottom: 10,
              marginTop: 10
            },
            children: searchBtns && searchBtns.map((btn, idx) => btn != null && btn.render ? /*#__PURE__*/_jsx(React.Fragment, {
              children: btn.render
            }, idx.toString()) : /*#__PURE__*/_jsx(Button, _extends({
              style: {
                marginLeft: 5
              }
            }, btn, {
              children: btn.label
            }), idx.toString()))
          })]
        })
      });
    }
  });
};
export default BaseForm;