ls-pro-common 3.0.14 → 3.0.15

package/es/components/ImageSelector.js

@@ -0,0 +1,437 @@
+import "antd/es/modal/style";
+import _Modal from "antd/es/modal";
+import "antd/es/empty/style";
+import _Empty from "antd/es/empty";
+import "antd/es/card/style";
+import _Card from "antd/es/card";
+import "antd/es/button/style";
+import _Button from "antd/es/button";
+import "antd/es/upload/style";
+import _Upload from "antd/es/upload";
+import "antd/es/input/style";
+import _Input from "antd/es/input";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["type", "uploadable", "readonly", "allowClear", "title", "modalWidth", "name", "maxSize", "modalProps", "code", "isInput", "desc", "imageClass", "maxCount"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React from "react";
+import { useMemo, useState, useEffect, useContext, useRef } from 'react';
+import { ProFormText, ProFormContext } from 'ls-pro-form';
+import { PlusOutlined, UploadOutlined, SearchOutlined, CloseOutlined } from '@ant-design/icons';
+import { httpGet } from '../http';
+import { getCache, showError, showWarn, showSuccess } from '../utils';
+var fileCenter = getCache('ossPath') || '/petrel/petrel-file-center-api/lesoon/oss/file/';
+function ImageSelector(prop) {
+  var _rest$fieldProps3;
+  //@ts-ignore?
+  var _useContext = useContext(ProFormContext),
+    formRef = _useContext.formRef;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    imgUrl = _useState4[0],
+    setImgUrl = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    list = _useState6[0],
+    setList = _useState6[1];
+  var _useState7 = useState(''),
+    _useState8 = _slicedToArray(_useState7, 2),
+    searchKey = _useState8[0],
+    setSearchKey = _useState8[1];
+  var _useState9 = useState(''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    nextMarker = _useState10[0],
+    setNextMarker = _useState10[1];
+  var inputRef = useRef();
+  var type = prop.type,
+    _prop$uploadable = prop.uploadable,
+    uploadable = _prop$uploadable === void 0 ? true : _prop$uploadable,
+    _prop$readonly = prop.readonly,
+    readonly = _prop$readonly === void 0 ? true : _prop$readonly,
+    _prop$allowClear = prop.allowClear,
+    allowClear = _prop$allowClear === void 0 ? true : _prop$allowClear,
+    _prop$title = prop.title,
+    title = _prop$title === void 0 ? "选择图标" : _prop$title,
+    _prop$modalWidth = prop.modalWidth,
+    modalWidth = _prop$modalWidth === void 0 ? '600px' : _prop$modalWidth,
+    name = prop.name,
+    _prop$maxSize = prop.maxSize,
+    maxSize = _prop$maxSize === void 0 ? 5 : _prop$maxSize,
+    modalProps = prop.modalProps,
+    _prop$code = prop.code,
+    code = _prop$code === void 0 ? 'RETAIL' : _prop$code,
+    _prop$isInput = prop.isInput,
+    isInput = _prop$isInput === void 0 ? true : _prop$isInput,
+    _prop$desc = prop.desc,
+    desc = _prop$desc === void 0 ? '支持 png | jpg | gif 格式图片' : _prop$desc,
+    _prop$imageClass = prop.imageClass,
+    imageClass = _prop$imageClass === void 0 ? '' : _prop$imageClass,
+    _prop$maxCount = prop.maxCount,
+    maxCount = _prop$maxCount === void 0 ? 1 : _prop$maxCount,
+    rest = _objectWithoutProperties(prop, _excluded);
+  // 上传地址
+  var uploadImgApi = useMemo(function () {
+    return fileCenter + 'upload/' + code + '?catalogName=' + type;
+  }, [code, type]);
+  // 分页加载列表地址
+  var pageImgApi = useMemo(function () {
+    return fileCenter + 'page/' + code;
+  }, [code]);
+  // 展示地址
+  var showImgApi = useMemo(function () {
+    return fileCenter + 'show/' + code;
+  }, [code]);
+  var _useState11 = useState([]),
+    _useState12 = _slicedToArray(_useState11, 2),
+    selectedUrl = _useState12[0],
+    setSelectedUrl = _useState12[1];
+  var loadData = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(keys) {
+      var _result$data, _result$data2;
+      var url, param, result, rows;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            url = pageImgApi;
+            param = {
+              prefix: type,
+              maxKeys: 16
+            };
+            if (keys) {
+              param.prefix = param.prefix + '/' + keys;
+            }
+            if (nextMarker) {
+              param.nextMarker = nextMarker;
+            }
+            _context.next = 6;
+            return httpGet(url, param, false);
+          case 6:
+            result = _context.sent;
+            rows = (((_result$data = result.data) === null || _result$data === void 0 ? void 0 : _result$data.objectList) || []).filter(function (o) {
+              return o.dir == false && (!nextMarker || !list.find(function (e) {
+                return e.path === o.path;
+              }));
+            });
+            rows.forEach(function (row) {
+              row.url = showImgApi + '?fileName=' + row.path;
+            });
+            if (!nextMarker) {
+              setList(rows);
+            } else {
+              setList([].concat(_toConsumableArray(list), _toConsumableArray(rows)));
+            }
+            setNextMarker((_result$data2 = result.data) === null || _result$data2 === void 0 ? void 0 : _result$data2.nextMarker);
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function loadData(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  useEffect(function () {
+    if (!visible) {
+      setNextMarker('');
+      setSearchKey('');
+      return;
+    }
+    loadData(searchKey);
+  }, [visible, searchKey]);
+  useEffect(function () {
+    var _formRef$current, _formRef$current$getF;
+    var val = (formRef === null || formRef === void 0 ? void 0 : (_formRef$current = formRef.current) === null || _formRef$current === void 0 ? void 0 : (_formRef$current$getF = _formRef$current.getFieldsValue) === null || _formRef$current$getF === void 0 ? void 0 : _formRef$current$getF.call(_formRef$current)) || {};
+    var url = val === null || val === void 0 ? void 0 : val[name];
+    if (!url) {
+      var _formRef$current2, _formRef$current2$get;
+      url = formRef === null || formRef === void 0 ? void 0 : (_formRef$current2 = formRef.current) === null || _formRef$current2 === void 0 ? void 0 : (_formRef$current2$get = _formRef$current2.getFieldValue) === null || _formRef$current2$get === void 0 ? void 0 : _formRef$current2$get.call(_formRef$current2, name);
+    }
+    if (url) {
+      var urls = url.toString().split(',');
+      setImgUrl(urls[0]);
+      setSelectedUrl(urls);
+    }
+  }, []);
+  // 验证上传文件大小
+  var beforeUpload = function beforeUpload(file) {
+    var sizeLimit = file.size / 1024 / 1024 >= maxSize;
+    if (sizeLimit) {
+      showError("\u4E0A\u4F20\u7684\u6587\u4EF6\u4E0D\u80FD\u5927\u4E8E".concat(maxSize, "M"));
+    }
+    return !sizeLimit;
+  };
+  // 上传图片
+  var onUpload = function onUpload(info) {
+    var isDirect = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (info.file.status === 'done') {
+      var _result$flag;
+      var result = info.file.response;
+      if ((result === null || result === void 0 ? void 0 : (_result$flag = result.flag) === null || _result$flag === void 0 ? void 0 : _result$flag.retCode) === '0') {
+        showSuccess(result.flag.retMsg);
+        // 直接上传
+        if (isDirect) {
+          var _result$rows$, _formRef$current3, _formRef$current3$get, _formRef$current4, _formRef$current4$set;
+          var img = showImgApi + '?fileName=' + (result === null || result === void 0 ? void 0 : (_result$rows$ = result.rows[0]) === null || _result$rows$ === void 0 ? void 0 : _result$rows$.newFileId);
+          setImgUrl(img);
+          var formVal = formRef === null || formRef === void 0 ? void 0 : (_formRef$current3 = formRef.current) === null || _formRef$current3 === void 0 ? void 0 : (_formRef$current3$get = _formRef$current3.getFieldsValue) === null || _formRef$current3$get === void 0 ? void 0 : _formRef$current3$get.call(_formRef$current3);
+          var val = _objectSpread({}, formVal);
+          //@ts-ignore
+          val[name] = img;
+          formRef === null || formRef === void 0 ? void 0 : (_formRef$current4 = formRef.current) === null || _formRef$current4 === void 0 ? void 0 : (_formRef$current4$set = _formRef$current4.setFieldsValue) === null || _formRef$current4$set === void 0 ? void 0 : _formRef$current4$set.call(_formRef$current4, val);
+        }
+      } else {
+        var _result$flag2;
+        showError((result === null || result === void 0 ? void 0 : (_result$flag2 = result.flag) === null || _result$flag2 === void 0 ? void 0 : _result$flag2.retMsg) || '上传图片失败,请联系管理员');
+      }
+    } else if (info.file.status === 'error') {
+      showError('上传数据失败,请联系管理员');
+    }
+    if (!isDirect && !info.fileList.filter(function (o) {
+      return o.status === 'uploading';
+    }).length) {
+      loadData(searchKey);
+    }
+  };
+  var showSelect = function showSelect() {
+    var _rest$fieldProps;
+    if ((rest === null || rest === void 0 ? void 0 : rest.disabled) || (rest === null || rest === void 0 ? void 0 : (_rest$fieldProps = rest.fieldProps) === null || _rest$fieldProps === void 0 ? void 0 : _rest$fieldProps.disabled)) {
+      return;
+    }
+    setVisible(true);
+  };
+  useEffect(function () {
+    var _rest$fieldProps2;
+    if ((rest === null || rest === void 0 ? void 0 : rest.disabled) || (rest === null || rest === void 0 ? void 0 : (_rest$fieldProps2 = rest.fieldProps) === null || _rest$fieldProps2 === void 0 ? void 0 : _rest$fieldProps2.disabled)) return;
+    try {
+      if (!inputRef.current) return;
+      var el = inputRef.current.input.parentNode;
+      if (!el) return;
+      if (imgUrl) {
+        el.classList.add('ant-input-has-value');
+      } else {
+        el.classList.remove('ant-input-has-value');
+      }
+    } catch (e) {}
+  }, [imgUrl]);
+  var toggleSelectImage = function toggleSelectImage(url) {
+    if (selectedUrl.includes(url)) {
+      setSelectedUrl(function (val) {
+        return val.filter(function (o) {
+          return o !== url;
+        });
+      });
+    } else if (selectedUrl.length < maxCount && maxCount > 1) {
+      setSelectedUrl([].concat(_toConsumableArray(selectedUrl), [url]));
+    } else if (maxCount === 1) {
+      setSelectedUrl([url]);
+    }
+  };
+  var confirmImage = function confirmImage() {
+    var _formRef$current5, _formRef$current5$get;
+    var formVal = formRef === null || formRef === void 0 ? void 0 : (_formRef$current5 = formRef.current) === null || _formRef$current5 === void 0 ? void 0 : (_formRef$current5$get = _formRef$current5.getFieldsValue) === null || _formRef$current5$get === void 0 ? void 0 : _formRef$current5$get.call(_formRef$current5);
+    var val = _objectSpread({}, formVal);
+    //@ts-ignore
+    val[name] = selectedUrl.join(',');
+    formRef.current.setFieldsValue(val);
+    setImgUrl(selectedUrl.join(','));
+    setVisible(false);
+  };
+  var clearValue = function clearValue(e) {
+    if (!e || !e.target.value) {
+      var _formRef$current6, _formRef$current6$get;
+      setImgUrl('');
+      var formValue = (formRef === null || formRef === void 0 ? void 0 : (_formRef$current6 = formRef.current) === null || _formRef$current6 === void 0 ? void 0 : (_formRef$current6$get = _formRef$current6.getFieldsValue) === null || _formRef$current6$get === void 0 ? void 0 : _formRef$current6$get.call(_formRef$current6)) || {};
+      formValue[name] = '';
+      formRef.current.setFieldsValue(_objectSpread({}, formValue));
+    }
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ProFormText, _extends({
+    name: name
+  }, rest), isInput ? /*#__PURE__*/React.createElement(_Input, _extends({
+    addonAfter: imgUrl ? /*#__PURE__*/React.createElement("img", {
+      style: {
+        maxWidth: 22,
+        maxHeight: 22
+      },
+      src: (imgUrl || '').split(',')[0],
+      onClick: function onClick() {
+        return showSelect();
+      }
+    }) : /*#__PURE__*/React.createElement(PlusOutlined, {
+      onClick: function onClick() {
+        return showSelect();
+      }
+    })
+  }, rest.fieldProps, {
+    readOnly: readonly,
+    allowClear: allowClear,
+    ref: inputRef,
+    onChange: clearValue
+  })) : /*#__PURE__*/React.createElement("div", {
+    className: "image-selector"
+  }, /*#__PURE__*/React.createElement(_Upload, {
+    beforeUpload: beforeUpload,
+    onChange: function onChange(info) {
+      return onUpload(info, true);
+    },
+    action: uploadImgApi,
+    showUploadList: false,
+    name: "file",
+    maxCount: 1,
+    multiple: false,
+    headers: {
+      token: localStorage.getItem('token') || ''
+    },
+    accept: ".png,.gif,.jpg,.jpeg,.bmp"
+  }, imgUrl ? /*#__PURE__*/React.createElement("div", {
+    className: "img-wrapper"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "img-preview ".concat(imageClass),
+    src: (imgUrl || '').split(',')[0]
+  }), (rest === null || rest === void 0 ? void 0 : rest.disabled) !== true && (rest === null || rest === void 0 ? void 0 : (_rest$fieldProps3 = rest.fieldProps) === null || _rest$fieldProps3 === void 0 ? void 0 : _rest$fieldProps3.disabled) !== true && /*#__PURE__*/React.createElement("div", {
+    className: "clear-btn"
+  }, /*#__PURE__*/React.createElement(CloseOutlined, {
+    title: "\u6E05\u7A7A",
+    onClick: function onClick(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      clearValue(undefined);
+    }
+  }))) : /*#__PURE__*/React.createElement("img", {
+    className: "img-upload",
+    src: "data:image/png;base64,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"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "img-choose"
+  }, /*#__PURE__*/React.createElement("a", {
+    onClick: function onClick() {
+      return showSelect();
+    }
+  }, "\u9009\u62E9\u5DF2\u6709\u56FE\u7247")), /*#__PURE__*/React.createElement("div", {
+    className: "img-desc"
+  }, desc))), /*#__PURE__*/React.createElement(_Modal, _extends({
+    title: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, title), /*#__PURE__*/React.createElement("span", {
+      style: {
+        display: 'inline-block',
+        width: 230,
+        marginLeft: 30
+      }
+    }, /*#__PURE__*/React.createElement(_Input, {
+      suffix: /*#__PURE__*/React.createElement(SearchOutlined, null),
+      placeholder: "\u8F93\u5165\u56FE\u7247\u540D\u67E5\u8BE2",
+      onPressEnter: function onPressEnter(e) {
+        setNextMarker('');
+        setTimeout(function () {
+          setSearchKey(e.target.value || '');
+        }, 1);
+      }
+    }))),
+    visible: visible,
+    width: modalWidth,
+    destroyOnClose: true,
+    onCancel: function onCancel() {
+      return setVisible(false);
+    },
+    className: "image-selector",
+    centered: true,
+    footer: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        display: 'inline-block',
+        marginRight: 8
+      }
+    }, /*#__PURE__*/React.createElement(_Upload, {
+      beforeUpload: beforeUpload,
+      onChange: function onChange(info) {
+        return onUpload(info, false);
+      },
+      action: uploadImgApi,
+      showUploadList: false,
+      name: "file",
+      maxCount: 20,
+      multiple: true,
+      headers: {
+        token: localStorage.getItem('token') || ''
+      },
+      accept: ".png,.gif,.jpg,.jpeg,.bmp"
+    }, /*#__PURE__*/React.createElement(_Button, {
+      icon: /*#__PURE__*/React.createElement(UploadOutlined, null)
+    }, "\u4E0A\u4F20\u65B0\u56FE"))), /*#__PURE__*/React.createElement(_Button, {
+      onClick: function onClick() {
+        return loadData(searchKey);
+      }
+    }, nextMarker ? '加载更多' : '刷新'), maxCount > 1 && /*#__PURE__*/React.createElement(_Button, {
+      onClick: confirmImage
+    }, "\u786E\u8BA4")),
+    getContainer: function getContainer() {
+      return document.body;
+    }
+  }, modalProps), /*#__PURE__*/React.createElement("div", {
+    style: {
+      minHeight: '120px',
+      display: 'flex',
+      marginLeft: 16,
+      gap: 16,
+      flexWrap: 'wrap'
+    }
+  }, list.map(function (o) {
+    return /*#__PURE__*/React.createElement(_Card, {
+      hoverable: true,
+      style: {
+        width: '125px',
+        height: '130px',
+        verticalAlign: 'middle',
+        background: selectedUrl.includes(o.url) ? '#efefef' : '#fff'
+      },
+      bodyStyle: {
+        padding: '15px 8px',
+        textAlign: 'center'
+      },
+      onDoubleClick: function onDoubleClick() {
+        if (!name) {
+          showWarn('选择图标组件未设置name属性');
+          return;
+        }
+        var formVal = formRef.current.getFieldsValue();
+        var val = _objectSpread({}, formVal);
+        //@ts-ignore
+        val[name] = o.url;
+        formRef.current.setFieldsValue(val);
+        setImgUrl(o.url);
+        setSelectedUrl([o.url]);
+        setVisible(false);
+      },
+      onClick: function onClick() {
+        toggleSelectImage(o.url);
+      },
+      key: o.path
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: 80
+      }
+    }, /*#__PURE__*/React.createElement("img", {
+      title: o.name,
+      style: {
+        maxWidth: '80px',
+        maxHeight: '80px'
+      },
+      src: o.url
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden'
+      }
+    }, o.name));
+  }), list.length === 0 && /*#__PURE__*/React.createElement(_Empty, {
+    image: _Empty.PRESENTED_IMAGE_SIMPLE
+  }))));
+}
+export default ImageSelector;

package/es/components/InputMultiLine.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { InputProps } from 'antd';
+import type { TextAreaProps } from 'antd/lib/input';
+import type { ProFormItemProps } from 'ls-pro-form';
+export declare type InputMultiLineProps = ProFormItemProps<InputProps> & {
+    /**@name 表单项name, 跟 form.item 的 name一致 */
+    name: string;
+    /**@name 表单值*/
+    defaultValue?: string;
+    /**@name 弹框宽度,默认为400 */
+    popWidth?: string;
+    /**@name 弹框位置，默认为bottom */
+    placement?: string;
+    /**@name 多行文本框行数 */
+    rows?: number;
+    /** @name 最大输入行数 */
+    maxRows?: number;
+    getPopupContainer?: (triggerNode: any) => HTMLElement;
+    textAreaProps?: TextAreaProps;
+};
+declare const InputMultiLine: React.ForwardRefExoticComponent<{
+    fieldProps?: (import("ls-pro-form/lib/interface").FieldProps & InputProps) | undefined;
+    placeholder?: string | string[] | undefined;
+    secondary?: boolean | undefined;
+    allowClear?: boolean | undefined;
+    disabled?: boolean | undefined;
+    width?: number | "sm" | "md" | "xl" | "xs" | "lg" | undefined;
+    proFieldProps?: import("ls-pro-utils").ProFieldProps | undefined;
+    footerRender?: import("ls-pro-form").LightFilterFooterRender | undefined;
+} & Omit<import("ls-pro-form/lib/components/FormItem").ProFormItemProps, "valueType"> & import("ls-pro-form/lib/interface").ExtendsProps & {
+    /**@name 表单项name, 跟 form.item 的 name一致 */
+    name: string;
+    /**@name 表单值*/
+    defaultValue?: string | undefined;
+    /**@name 弹框宽度,默认为400 */
+    popWidth?: string | undefined;
+    /**@name 弹框位置，默认为bottom */
+    placement?: string | undefined;
+    /**@name 多行文本框行数 */
+    rows?: number | undefined;
+    /** @name 最大输入行数 */
+    maxRows?: number | undefined;
+    getPopupContainer?: ((triggerNode: any) => HTMLElement) | undefined;
+    textAreaProps?: TextAreaProps | undefined;
+} & React.RefAttributes<unknown>>;
+export default InputMultiLine;

package/es/components/InputMultiLine.js

@@ -0,0 +1,139 @@
+import "antd/es/popover/style";
+import _Popover from "antd/es/popover";
+import "antd/es/input/style";
+import _Input from "antd/es/input";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["name", "rows", "maxRows", "placement", "popWidth", "fieldProps", "defaultValue", "allowClear", "getPopupContainer", "textAreaProps"];
+import React, { useRef, useState, useEffect, useContext, useMemo, useImperativeHandle } from 'react';
+import { ProFormText, ProFormContext } from 'ls-pro-form';
+import { UnorderedListOutlined } from '@ant-design/icons';
+var InputMultiLine = /*#__PURE__*/React.forwardRef(function (prop, ref) {
+  //@ts-ignore
+  var _useContext = useContext(ProFormContext),
+    formRef = _useContext.formRef;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    text = _useState2[0],
+    setText = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    lineText = _useState4[0],
+    setLineText = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    visible = _useState6[0],
+    setVisible = _useState6[1];
+  var inputRef = useRef();
+  useImperativeHandle(ref, function () {
+    return inputRef.current;
+  });
+  var name = prop.name,
+    _prop$rows = prop.rows,
+    rows = _prop$rows === void 0 ? 12 : _prop$rows,
+    _prop$maxRows = prop.maxRows,
+    maxRows = _prop$maxRows === void 0 ? 20 : _prop$maxRows,
+    _prop$placement = prop.placement,
+    placement = _prop$placement === void 0 ? 'bottom' : _prop$placement,
+    _prop$popWidth = prop.popWidth,
+    popWidth = _prop$popWidth === void 0 ? '400px' : _prop$popWidth,
+    fieldProps = prop.fieldProps,
+    defaultValue = prop.defaultValue,
+    _prop$allowClear = prop.allowClear,
+    allowClear = _prop$allowClear === void 0 ? true : _prop$allowClear,
+    _prop$getPopupContain = prop.getPopupContainer,
+    getPopupContainer = _prop$getPopupContain === void 0 ? function (triggerNode) {
+      return triggerNode.parentNode.parentNode.parentNode.parentNode;
+    } : _prop$getPopupContain,
+    textAreaProps = prop.textAreaProps,
+    rest = _objectWithoutProperties(prop, _excluded);
+  // 设置初始值
+  useEffect(function () {
+    if (defaultValue) {
+      setText(defaultValue);
+    } else if (name && (formRef === null || formRef === void 0 ? void 0 : formRef.current)) {
+      var _formRef$current, _formRef$current$getF;
+      var formValue = formRef === null || formRef === void 0 ? void 0 : (_formRef$current = formRef.current) === null || _formRef$current === void 0 ? void 0 : (_formRef$current$getF = _formRef$current.getFieldValue) === null || _formRef$current$getF === void 0 ? void 0 : _formRef$current$getF.call(_formRef$current, name);
+      setText(formValue);
+    }
+  }, []);
+  // 显示多行输入时，赋值给多行文本框
+  useEffect(function () {
+    if (!visible) return;
+    var line = (text || '').split(',').join('\n');
+    setLineText(line);
+  }, [visible, text]);
+  // 输入框值变化时，赋值给表单项
+  useEffect(function () {
+    var _formRef$current2, _formRef$current2$get, _formRef$current3, _formRef$current3$set;
+    var formValue = (formRef === null || formRef === void 0 ? void 0 : (_formRef$current2 = formRef.current) === null || _formRef$current2 === void 0 ? void 0 : (_formRef$current2$get = _formRef$current2.getFieldsValue) === null || _formRef$current2$get === void 0 ? void 0 : _formRef$current2$get.call(_formRef$current2)) || {};
+    formValue[name] = text;
+    formRef === null || formRef === void 0 ? void 0 : (_formRef$current3 = formRef.current) === null || _formRef$current3 === void 0 ? void 0 : (_formRef$current3$set = _formRef$current3.setFieldsValue) === null || _formRef$current3$set === void 0 ? void 0 : _formRef$current3$set.call(_formRef$current3, _objectSpread({}, formValue));
+  }, [text]);
+  var lineInput = function lineInput(e) {
+    var line = (e.target.value || '').split('\n').filter(function (o, i) {
+      return i <= (maxRows < 1 ? 1000 : maxRows);
+    }).join('\n');
+    var txt = line.split('\n').join(',');
+    setLineText(line);
+    setText(txt);
+  };
+  var textInput = function textInput(e) {
+    setText(e.target.value);
+  };
+  var clearValue = function clearValue(e) {
+    if (!e.target.value) {
+      setText('');
+      setLineText('');
+    }
+  };
+  var PopoverDom = useMemo(function () {
+    return /*#__PURE__*/React.createElement(_Popover, {
+      content: /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: popWidth
+        }
+      }, /*#__PURE__*/React.createElement(_Input.TextArea, _extends({
+        placeholder: "\u8BF7\u8F93\u5165"
+      }, textAreaProps, {
+        rows: rows,
+        value: lineText,
+        onInput: lineInput,
+        onKeyPress: function onKeyPress(e) {
+          if (e.key === 'Enter') e.stopPropagation();
+        }
+      }))),
+      trigger: "click",
+      visible: rest.disabled || (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.disabled) ? false : visible,
+      onVisibleChange: setVisible,
+      getPopupContainer: getPopupContainer
+    }, /*#__PURE__*/React.createElement(UnorderedListOutlined, {
+      onClick: function onClick(e) {
+        setVisible(true);
+      }
+    }));
+  }, [visible, popWidth, lineText, rest]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, rest.label && name ? /*#__PURE__*/React.createElement(ProFormText, _extends({
+    name: name
+  }, rest), /*#__PURE__*/React.createElement(_Input, _extends({
+    suffix: PopoverDom,
+    placeholder: "\u8BF7\u8F93\u5165"
+  }, fieldProps, {
+    onChange: clearValue,
+    onInput: textInput,
+    allowClear: allowClear,
+    ref: inputRef
+  }))) : /*#__PURE__*/React.createElement(_Input, _extends({
+    suffix: PopoverDom,
+    placeholder: "\u8BF7\u8F93\u5165",
+    allowClear: allowClear
+  }, fieldProps, {
+    onChange: clearValue,
+    onInput: textInput,
+    value: text,
+    ref: inputRef
+  })));
+});
+export default InputMultiLine;