fx-form-widget/es/packages/select/index.js

动态表单组件库

import _extends from "@babel/runtime/helpers/extends";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _Select from "antd/es/select";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useState, useEffect } from 'react';
import useVariants from 'antd/es/form/hooks/useVariants';
import { getUrlData } from './request';
import { parseQueryString, isNotNullValue } from './tools';
import DropdownAction from './DropdownAction';
import './index.less';
var Option = _Select.Option;
var SE = function SE(_ref) {
  var _ref$schema = _ref.schema,
    schema = _ref$schema === void 0 ? {} : _ref$schema,
    _ref$onChange = _ref.onChange,
    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
    _ref$isInit = _ref.isInit,
    isInit = _ref$isInit === void 0 ? false : _ref$isInit,
    _ref$value = _ref.value,
    value = _ref$value === void 0 ? isNotNullValue(schema.data) ? schema.data : undefined : _ref$value;
  var _schema$readonly = schema.readonly,
    readonly = _schema$readonly === void 0 ? false : _schema$readonly,
    _schema$required = schema.required,
    required = _schema$required === void 0 ? false : _schema$required,
    _schema$enumKeys = schema.enumKeys,
    enumKeys = _schema$enumKeys === void 0 ? [] : _schema$enumKeys,
    _schema$enumNames = schema.enumNames,
    enumNames = _schema$enumNames === void 0 ? [] : _schema$enumNames,
    _schema$placeholder = schema.placeholder,
    placeholder = _schema$placeholder === void 0 ? '请选择' : _schema$placeholder,
    _schema$allowClear = schema.allowClear,
    allowClear = _schema$allowClear === void 0 ? false : _schema$allowClear,
    _schema$hasAdd = schema.hasAdd,
    hasAdd = _schema$hasAdd === void 0 ? undefined : _schema$hasAdd,
    _schema$hasRefresh = schema.hasRefresh,
    hasRefresh = _schema$hasRefresh === void 0 ? false : _schema$hasRefresh,
    _schema$dataUrl = schema.dataUrl,
    dataUrl = _schema$dataUrl === void 0 ? undefined : _schema$dataUrl,
    _schema$fieldName = schema.fieldName,
    fieldName = _schema$fieldName === void 0 ? undefined : _schema$fieldName;
  var _useState = useState(enumKeys),
    keys = _useState[0],
    setKeys = _useState[1];
  var _useState2 = useState(enumNames),
    values = _useState2[0],
    setValues = _useState2[1];
  var _useVariants = useVariants(undefined),
    variant = _useVariants[0];
  var defaultOptions = {};
  if (schema['ui_options']) {
    Object.keys(schema['ui_options']).forEach(function (key) {
      defaultOptions[key] = schema['ui_options'][key];
    });
  }
  useEffect(function () {
    if (isInit && dataUrl && fieldName) {
      // 请求参数
      fetchData(dataUrl);
    }
  }, [isInit, dataUrl, fieldName]);
  useEffect(function () {
    if (!(dataUrl && fieldName)) {
      setKeys(enumKeys);
      setValues(enumNames);
    }
  }, [enumKeys, enumNames, dataUrl, fieldName]);
  var fetchData = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(dataUrl) {
      var queryObj, data, tempKeys, tempValues;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            if (dataUrl) {
              _context.next = 2;
              break;
            }
            return _context.abrupt("return");
          case 2:
            queryObj = parseQueryString(dataUrl);
            if (!queryObj) {
              _context.next = 8;
              break;
            }
            _context.next = 6;
            return getUrlData(dataUrl, queryObj);
          case 6:
            data = _context.sent;
            if (data.success) {
              tempKeys = [];
              tempValues = [];
              if (data.data.length) {
                data.data.forEach(function (optionItem) {
                  tempKeys.push(optionItem.id);
                  tempValues.push(optionItem.name);
                });
              }
              setKeys(tempKeys);
              setValues(tempValues);
            }
          case 8:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));
    return function fetchData(_x) {
      return _ref2.apply(this, arguments);
    };
  }();
  var options = _extends({
    disabled: readonly,
    required: required,
    placeholder: placeholder,
    allowClear: allowClear
  }, defaultOptions);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Select, _extends({
    showSearch: true,
    className: hasAdd || hasRefresh ? 'select-with-action' : '',
    style: {
      width: hasAdd || hasRefresh ? 'calc(100% - 30px)' : '100%'
    }
  }, options, {
    value: value,
    onChange: onChange,
    optionFilterProp: "children",
    filterOption: function filterOption(input, option) {
      return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    }
  }), (keys || []).map(function (keyValue, index) {
    var option = values ? values[index] : keyValue;
    return /*#__PURE__*/React.createElement(Option, {
      value: keyValue,
      key: keyValue
    }, option);
  })), hasAdd || hasRefresh ? /*#__PURE__*/React.createElement(DropdownAction, {
    variant: variant,
    addRoute: hasAdd,
    handleRefresh: function handleRefresh() {
      return dataUrl && fetchData(dataUrl);
    }
  }) : null);
};
export default SE;