ls-pro-common 1.0.62 → 1.0.63

package/lib/components/IconSelector.js

@@ -17,12 +17,6 @@ require("antd/es/card/style");
 
 var _card = _interopRequireDefault(require("antd/es/card"));
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
-require("antd/es/upload/style");
-
-var _upload = _interopRequireDefault(require("antd/es/upload"));
-
 require("antd/es/button/style");
 
 var _button = _interopRequireDefault(require("antd/es/button"));
@@ -33,9 +27,7 @@ var _input = _interopRequireDefault(require("antd/es/input"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
@@ -47,13 +39,8 @@ var _lsProForm = require("ls-pro-form");
 
 var _icons = require("@ant-design/icons");
 
-var _http = require("../http");
-
-var _utils = require("../utils");
-
-var _excluded = ["type", "uploadable", "readonly", "allowClear", "title", "modalWidth", "name", "maxSize", "modalProps"];
-var fileCenter = (0, _utils.getCache)('file-center-api') || '/zuul/petrel-file-center-api/';
-var pageSize = 16;
+var _excluded = ["readonly", "allowClear", "title", "modalWidth", "name", "isInput", "modalProps", "defaultValue"];
+var iconList = ['icon-Menu1', 'icon-Menu2', 'icon-Menu3', 'icon-Menu4', 'icon-Menu5', 'icon-Menu6', 'icon-Menu7', 'icon-Menu8', 'icon-Menu9', 'icon-Menu10', 'icon-Menu11', 'icon-Menu12', 'icon-Menu13', 'icon-Menu14', 'icon-Menu15', 'icon-Menu16', 'icon-Menu17', 'icon-Menu18', 'icon-Menu19', 'icon-Menu20', 'icon-Menu21', 'icon-Menu22', 'icon-Menu23', 'icon-Menu24', 'icon-Menu25', 'icon-Menu26', 'icon-Menu27', 'icon-Menu28', 'icon-Menu29', 'icon-Menu30', 'icon-Menu31', 'icon-Menu32', 'icon-Menu33', 'icon-Menu34', 'icon-Menu35', 'icon-Menu36', 'icon-Menu37', 'icon-Menu38', 'icon-Menu39', 'icon-Menu40', 'icon-Menu41', 'icon-Menu42', 'icon-Menu43', 'icon-Menu44', 'icon-Menu45', 'icon-Menu46', 'icon-Menu47'];
 
 function IconSelector(prop) {
   //@ts-ignore?
@@ -67,185 +54,123 @@ function IconSelector(prop) {
 
   var _useState3 = (0, _react.useState)(''),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      imgUrl = _useState4[0],
-      setImgUrl = _useState4[1];
+      icon = _useState4[0],
+      setIcon = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(1),
+  var _useState5 = (0, _react.useState)(''),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      page = _useState6[0],
-      setPage = _useState6[1];
-
-  var _useState7 = (0, _react.useState)(0),
-      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      total = _useState8[0],
-      setTotal = _useState8[1];
-
-  var _useState9 = (0, _react.useState)([]),
-      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      list = _useState10[0],
-      setList = _useState10[1];
-
-  var _useState11 = (0, _react.useState)(''),
-      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      searchKey = _useState12[0],
-      setSearchKey = _useState12[1];
-
-  var type = prop.type,
-      _prop$uploadable = prop.uploadable,
-      uploadable = _prop$uploadable === void 0 ? true : _prop$uploadable,
-      _prop$readonly = prop.readonly,
+      searchKey = _useState6[0],
+      setSearchKey = _useState6[1];
+
+  var inputRef = (0, _react.useRef)();
+  var list = (0, _react.useMemo)(function () {
+    if (!searchKey) return [].concat(iconList);
+    return iconList.filter(function (o) {
+      return o.includes(searchKey);
+    });
+  }, [searchKey]);
+  var _prop$readonly = prop.readonly,
       readonly = _prop$readonly === void 0 ? true : _prop$readonly,
-      allowClear = prop.allowClear,
+      _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,
+      modalWidth = _prop$modalWidth === void 0 ? '630px' : _prop$modalWidth,
       name = prop.name,
-      _prop$maxSize = prop.maxSize,
-      maxSize = _prop$maxSize === void 0 ? 2 : _prop$maxSize,
+      _prop$isInput = prop.isInput,
+      isInput = _prop$isInput === void 0 ? true : _prop$isInput,
       modalProps = prop.modalProps,
+      defaultValue = prop.defaultValue,
       rest = (0, _objectWithoutProperties2.default)(prop, _excluded);
-  var uploadImgApi = (0, _react.useMemo)(function () {
-    return (0, _utils.toGatewayUrl)(fileCenter + 'file/upload/' + type);
-  }, [type]);
-  var showImgApi = (0, _react.useMemo)(function () {
-    return fileCenter + 'file/show/' + type;
-  }, [type]);
-
-  var loadData = /*#__PURE__*/function () {
-    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(pageIndex, keys) {
-      var url, param, result, rows;
-      return _regenerator.default.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              url = "/petrel-itg-api/sysMongo/page";
-              param = {
-                "search.status": 1,
-                "search.collectName": type,
-                "page.pn": pageIndex,
-                "page.size": pageSize
-              };
-
-              if (keys) {
-                param['search.mongoName_like'] = keys;
-              }
-
-              _context.next = 5;
-              return (0, _http.httpGet)(url, param);
-
-            case 5:
-              result = _context.sent;
-              rows = result.rows || [];
-              setList(rows);
-              setTotal(result.total || 0);
-
-            case 9:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-
-    return function loadData(_x, _x2) {
-      return _ref.apply(this, arguments);
-    };
-  }();
-
-  (0, _react.useEffect)(function () {
-    if (!visible) return;
-    loadData(page, searchKey);
-  }, [visible, page, searchKey]);
-  var totalPage = (0, _react.useMemo)(function () {
-    if (total === 0) return 1;
-    return Math.ceil(total / pageSize);
-  }, [total]);
   (0, _react.useEffect)(function () {
-    var val = formRef.current.getFieldsValue();
+    var _formRef$current;
+
+    var val = (_formRef$current = formRef.current) === null || _formRef$current === void 0 ? void 0 : _formRef$current.getFieldsValue();
 
     if (val && val[name]) {
-      setImgUrl((0, _utils.toGatewayUrl)(val[name]));
+      setIcon(val[name]);
     }
-  }, []); // 验证上传文件大小
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (defaultValue) {
+      setIcon(defaultValue);
+    }
+  }, [defaultValue]);
+  (0, _react.useEffect)(function () {
+    var _rest$fieldProps;
 
-  var beforeUpload = function beforeUpload(file) {
-    var sizeLimit = file.size / 1024 / 1024 >= maxSize;
+    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;
 
-    if (sizeLimit) {
-      (0, _utils.showError)("\u4E0A\u4F20\u7684\u6587\u4EF6\u4E0D\u80FD\u5927\u4E8E".concat(maxSize, "M"));
-    }
+    try {
+      if (!inputRef.current) return;
+      var el = inputRef.current.clearableInput.containerRef.current.querySelector('.ant-input-clear-icon');
+      if (!el) return;
 
-    return !sizeLimit;
-  }; // 上传图片并调用 sysMongo 接口保存
-
-
-  var onUpload = function onUpload(info) {
-    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') {
-        var f = result.data[0];
-        var data = {
-          collectName: type,
-          mongoUrl: showImgApi + "/" + f.fileId,
-          mongoName: f.fileName || "",
-          remarks: "",
-          status: 1
-        };
-        var url = "/petrel/petrel-itg-api/sysMongo";
-        (0, _http.httpPost)(url, data, true, false).then(function (res) {
-          if (res.flag.retCode === "0") {
-            (0, _utils.showSuccess)("上传成功");
-
-            if (page !== totalPage) {
-              setPage(totalPage);
-            } else {
-              loadData(totalPage, searchKey);
-            }
-          } else {
-            (0, _utils.showSuccess)(result.flag.retMsg);
-          }
-        });
+      if (icon) {
+        el.classList.remove('ant-input-clear-icon-hidden');
       } else {
-        var _result$flag2;
-
-        (0, _utils.showError)((result === null || result === void 0 ? void 0 : (_result$flag2 = result.flag) === null || _result$flag2 === void 0 ? void 0 : _result$flag2.retMsg) || '上传图片失败,请联系管理员');
+        el.classList.add('ant-input-clear-icon-hidden');
       }
-    } else if (info.file.status === 'error') {
-      (0, _utils.showError)('上传数据失败,请联系管理员');
+    } catch (e) {}
+  }, [icon]);
+
+  var showSelector = function showSelector(flag) {
+    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;
+    setVisible(flag);
+  };
+
+  var clearValue = function clearValue(e) {
+    if (!e || !e.target.value) {
+      var _formRef$current2;
+
+      setIcon('');
+      var formValue = formRef === null || formRef === void 0 ? void 0 : (_formRef$current2 = formRef.current) === null || _formRef$current2 === void 0 ? void 0 : _formRef$current2.getFieldsValue();
+      formValue[name] = '';
+      formRef.current.setFieldsValue((0, _objectSpread2.default)({}, formValue));
     }
   };
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_lsProForm.ProFormText, (0, _extends2.default)({
     name: name
-  }, rest), /*#__PURE__*/_react.default.createElement(_input.default, (0, _extends2.default)({
-    addonAfter: imgUrl ? /*#__PURE__*/_react.default.createElement("img", {
+  }, rest), isInput ? /*#__PURE__*/_react.default.createElement(_input.default, (0, _extends2.default)({
+    addonAfter: icon ? /*#__PURE__*/_react.default.createElement("span", {
       style: {
-        maxWidth: 22,
-        maxHeight: 22
+        fontSize: '14px'
       },
-      src: imgUrl,
+      className: icon,
+      title: title,
       onClick: function onClick() {
-        return setVisible(true);
+        return showSelector(true);
       }
     }) : /*#__PURE__*/_react.default.createElement(_icons.PlusOutlined, {
+      title: title,
       onClick: function onClick() {
-        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);
+        return showSelector(true);
       }
     })
   }, rest.fieldProps, {
     readOnly: readonly,
-    allowClear: allowClear
-  }))), /*#__PURE__*/_react.default.createElement(_modal.default, (0, _extends2.default)({
+    allowClear: allowClear,
+    ref: inputRef,
+    onChange: clearValue
+  })) : icon ? /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      fontSize: '14px'
+    },
+    className: icon,
+    title: title,
+    onClick: function onClick() {
+      return showSelector(true);
+    }
+  }) : /*#__PURE__*/_react.default.createElement("a", {
+    title: title,
+    onClick: function onClick() {
+      return showSelector(true);
+    }
+  }, "\u8BF7\u9009\u62E9")), /*#__PURE__*/_react.default.createElement(_modal.default, (0, _extends2.default)({
     title: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", null, title), /*#__PURE__*/_react.default.createElement("span", {
       style: {
         display: 'inline-block',
@@ -254,9 +179,8 @@ function IconSelector(prop) {
       }
     }, /*#__PURE__*/_react.default.createElement(_input.default, {
       suffix: /*#__PURE__*/_react.default.createElement(_icons.SearchOutlined, null),
-      placeholder: "\u8F93\u5165\u56FE\u7247\u540D\u67E5\u8BE2",
+      placeholder: "\u56FE\u6807\u540D\u79F0",
       onPressEnter: function onPressEnter(e) {
-        setPage(1);
         setSearchKey(e.target.value || '');
       }
     }))),
@@ -266,49 +190,22 @@ function IconSelector(prop) {
     onCancel: function onCancel() {
       return setVisible(false);
     },
-    bodyStyle: {
-      padding: 8
+    className: "icon-selector",
+    centered: true,
+    getContainer: function getContainer() {
+      return document.body;
     },
-    footer: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-      style: {
-        display: 'inline-block',
-        marginRight: 8
-      }
-    }, /*#__PURE__*/_react.default.createElement(_upload.default, {
-      beforeUpload: beforeUpload,
-      onChange: onUpload,
-      action: uploadImgApi,
-      showUploadList: false,
-      name: "file",
-      maxCount: 1,
-      headers: {
-        token: localStorage.getItem('token') || ''
-      },
-      accept: ".png,.gif,.jpg,.jpeg,.bmp"
-    }, /*#__PURE__*/_react.default.createElement(_button.default, {
-      icon: /*#__PURE__*/_react.default.createElement(_icons.UploadOutlined, null)
-    }, "\u4E0A\u4F20\u65B0\u56FE"))), /*#__PURE__*/_react.default.createElement(_button.default, {
-      disabled: page === 1,
-      onClick: function onClick() {
-        setPage(page - 1);
-      }
-    }, "\u4E0A\u4E00\u9875"), /*#__PURE__*/_react.default.createElement("span", {
-      style: {
-        padding: 8
-      }
-    }, page, "/", totalPage), /*#__PURE__*/_react.default.createElement(_button.default, {
-      disabled: page === totalPage,
-      onClick: function onClick() {
-        setPage(page + 1);
-      }
-    }, "\u4E0B\u4E00\u9875"), /*#__PURE__*/_react.default.createElement(_button.default, {
+    footer: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_button.default, {
       onClick: function onClick() {
-        return loadData(page, searchKey);
+        var formVal = formRef.current.getFieldsValue();
+        var val = (0, _objectSpread2.default)({}, formVal); //@ts-ignore
+
+        val[name] = '';
+        formRef.current.setFieldsValue(val);
+        setIcon('');
+        setVisible(false);
       }
-    }, "\u5237\u65B0")),
-    getContainer: function getContainer() {
-      return document.body;
-    }
+    }, "\u6E05\u7A7A"))
   }, modalProps), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       minHeight: '120px'
@@ -329,37 +226,38 @@ function IconSelector(prop) {
       },
       onDoubleClick: function onDoubleClick() {
         if (!name) {
-          (0, _utils.showWarn)('选择图标组件未设置name属性');
+          console.log('选择图标组件未设置name属性');
           return;
         }
 
         var formVal = formRef.current.getFieldsValue();
         var val = (0, _objectSpread2.default)({}, formVal); //@ts-ignore
 
-        val[name] = o.mongoUrl;
+        val[name] = o;
         formRef.current.setFieldsValue(val);
-        setImgUrl((0, _utils.toGatewayUrl)(o.mongoUrl));
+        setIcon(o);
         setVisible(false);
       },
-      key: o.id
+      key: o
     }, /*#__PURE__*/_react.default.createElement("div", {
       style: {
         height: 80
       }
-    }, /*#__PURE__*/_react.default.createElement("img", {
-      title: o.mongoName,
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      title: o,
       style: {
-        maxWidth: '80px',
-        maxHeight: '80px'
+        paddingTop: '20px',
+        height: '80px',
+        fontSize: '20px'
       },
-      src: (0, _utils.toGatewayUrl)(o.mongoUrl)
+      className: o
     })), /*#__PURE__*/_react.default.createElement("div", {
       style: {
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis',
         overflow: 'hidden'
       }
-    }, o.mongoName));
+    }, o));
   }))));
 }
 

package/lib/components/ImageSelector.d.ts

@@ -17,6 +17,9 @@ export declare type ImageSelectorProps = ProFormItemProps<InputProps> & {
      */
     maxSize?: number;
     modalProps?: ModalProps;
+    isInput?: boolean;
+    desc?: string;
+    imageClass?: string;
 };
 declare function ImageSelector(prop: ImageSelectorProps): JSX.Element;
 export default ImageSelector;