ls-pro-common 1.0.61 → 1.0.63

package/es/components/IconSelector.d.ts

@@ -2,18 +2,12 @@
 import type { InputProps, ModalProps } from 'antd';
 import type { ProFormItemProps } from 'ls-pro-form';
 export declare type IconSelectorProps = ProFormItemProps<InputProps> & {
-    /** @name 图标类型 */
-    type: string;
-    /** @name 是否可上传，默认可上传 */
-    uploadable?: boolean;
     /** @name 弹框title */
     title?: string;
+    defaultValue?: string;
+    isInput?: boolean;
     /** @name 弹框宽度 */
     modalWidth?: string;
-    /**
-     * @name 最大值, 默认2M
-     */
-    maxSize?: number;
     modalProps?: ModalProps;
 };
 declare function IconSelector(prop: IconSelectorProps): JSX.Element;

package/es/components/IconSelector.js

@@ -2,27 +2,20 @@ import "antd/es/modal/style";
 import _Modal from "antd/es/modal";
 import "antd/es/card/style";
 import _Card from "antd/es/card";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import "antd/es/upload/style";
-import _Upload from "antd/es/upload";
 import "antd/es/button/style";
 import _Button from "antd/es/button";
 import "antd/es/input/style";
 import _Input from "antd/es/input";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+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 = ["type", "uploadable", "readonly", "allowClear", "title", "modalWidth", "name", "maxSize", "modalProps"];
+var _excluded = ["readonly", "allowClear", "title", "modalWidth", "name", "isInput", "modalProps", "defaultValue"];
 import React from "react";
-import { useMemo, useState, useEffect, useContext } from 'react';
+import { useMemo, useState, useContext, useEffect, useRef } from 'react';
 import { ProFormText, ProFormContext } from 'ls-pro-form';
-import { PlusOutlined, UploadOutlined, SearchOutlined } from '@ant-design/icons';
-import { httpGet, httpPost } from '../http';
-import { getCache, toGatewayUrl, showError, showWarn, showSuccess } from '../utils';
-var fileCenter = getCache('file-center-api') || '/zuul/petrel-file-center-api/';
-var pageSize = 16;
+import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
+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?
@@ -36,186 +29,125 @@ function IconSelector(prop) {
 
   var _useState3 = useState(''),
       _useState4 = _slicedToArray(_useState3, 2),
-      imgUrl = _useState4[0],
-      setImgUrl = _useState4[1];
+      icon = _useState4[0],
+      setIcon = _useState4[1];
 
-  var _useState5 = useState(1),
+  var _useState5 = useState(''),
       _useState6 = _slicedToArray(_useState5, 2),
-      page = _useState6[0],
-      setPage = _useState6[1];
-
-  var _useState7 = useState(0),
-      _useState8 = _slicedToArray(_useState7, 2),
-      total = _useState8[0],
-      setTotal = _useState8[1];
-
-  var _useState9 = useState([]),
-      _useState10 = _slicedToArray(_useState9, 2),
-      list = _useState10[0],
-      setList = _useState10[1];
-
-  var _useState11 = useState(''),
-      _useState12 = _slicedToArray(_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 = useRef();
+  var list = 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 = _objectWithoutProperties(prop, _excluded);
 
-  var uploadImgApi = useMemo(function () {
-    return toGatewayUrl(fileCenter + 'file/upload/' + type);
-  }, [type]);
-  var showImgApi = useMemo(function () {
-    return fileCenter + 'file/show/' + type;
-  }, [type]);
-
-  var loadData = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(pageIndex, keys) {
-      var url, param, result, rows;
-      return _regeneratorRuntime.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 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);
-    };
-  }();
-
   useEffect(function () {
-    if (!visible) return;
-    loadData(page, searchKey);
-  }, [visible, page, searchKey]);
-  var totalPage = useMemo(function () {
-    if (total === 0) return 1;
-    return Math.ceil(total / pageSize);
-  }, [total]);
-  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(toGatewayUrl(val[name]));
+      setIcon(val[name]);
     }
-  }, []); // 验证上传文件大小
-
-  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"));
+  }, []);
+  useEffect(function () {
+    if (defaultValue) {
+      setIcon(defaultValue);
     }
+  }, [defaultValue]);
+  useEffect(function () {
+    var _rest$fieldProps;
 
-    return !sizeLimit;
-  }; // 上传图片并调用 sysMongo 接口保存
+    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;
 
+    try {
+      if (!inputRef.current) return;
+      var el = inputRef.current.clearableInput.containerRef.current.querySelector('.ant-input-clear-icon');
+      if (!el) return;
 
-  var onUpload = function onUpload(info) {
-    if (info.file.status === 'done') {
-      var _result$flag;
+      if (icon) {
+        el.classList.remove('ant-input-clear-icon-hidden');
+      } else {
+        el.classList.add('ant-input-clear-icon-hidden');
+      }
+    } catch (e) {}
+  }, [icon]);
 
-      var result = info.file.response;
+  var showSelector = function showSelector(flag) {
+    var _rest$fieldProps2;
 
-      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";
-        httpPost(url, data, true, false).then(function (res) {
-          if (res.flag.retCode === "0") {
-            showSuccess("上传成功");
+    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);
+  };
 
-            if (page !== totalPage) {
-              setPage(totalPage);
-            } else {
-              loadData(totalPage, searchKey);
-            }
-          } else {
-            showSuccess(result.flag.retMsg);
-          }
-        });
-      } else {
-        var _result$flag2;
+  var clearValue = function clearValue(e) {
+    if (!e || !e.target.value) {
+      var _formRef$current2;
 
-        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('上传数据失败,请联系管理员');
+      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(_objectSpread({}, formValue));
     }
   };
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ProFormText, _extends({
     name: name
-  }, rest), /*#__PURE__*/React.createElement(_Input, _extends({
-    addonAfter: imgUrl ? /*#__PURE__*/React.createElement("img", {
+  }, rest), isInput ? /*#__PURE__*/React.createElement(_Input, _extends({
+    addonAfter: icon ? /*#__PURE__*/React.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.createElement(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.createElement(_Modal, _extends({
+    allowClear: allowClear,
+    ref: inputRef,
+    onChange: clearValue
+  })) : icon ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: '14px'
+    },
+    className: icon,
+    title: title,
+    onClick: function onClick() {
+      return showSelector(true);
+    }
+  }) : /*#__PURE__*/React.createElement("a", {
+    title: title,
+    onClick: function onClick() {
+      return showSelector(true);
+    }
+  }, "\u8BF7\u9009\u62E9")), /*#__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',
@@ -224,9 +156,8 @@ function IconSelector(prop) {
       }
     }, /*#__PURE__*/React.createElement(_Input, {
       suffix: /*#__PURE__*/React.createElement(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 || '');
       }
     }))),
@@ -236,49 +167,24 @@ 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-      style: {
-        display: 'inline-block',
-        marginRight: 8
-      }
-    }, /*#__PURE__*/React.createElement(_Upload, {
-      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.createElement(_Button, {
-      icon: /*#__PURE__*/React.createElement(UploadOutlined, null)
-    }, "\u4E0A\u4F20\u65B0\u56FE"))), /*#__PURE__*/React.createElement(_Button, {
-      disabled: page === 1,
-      onClick: function onClick() {
-        setPage(page - 1);
-      }
-    }, "\u4E0A\u4E00\u9875"), /*#__PURE__*/React.createElement("span", {
-      style: {
-        padding: 8
-      }
-    }, page, "/", totalPage), /*#__PURE__*/React.createElement(_Button, {
-      disabled: page === totalPage,
-      onClick: function onClick() {
-        setPage(page + 1);
-      }
-    }, "\u4E0B\u4E00\u9875"), /*#__PURE__*/React.createElement(_Button, {
+    footer: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Button, {
       onClick: function onClick() {
-        return loadData(page, searchKey);
+        var formVal = formRef.current.getFieldsValue();
+
+        var val = _objectSpread({}, 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.createElement("div", {
     style: {
       minHeight: '120px'
@@ -299,7 +205,7 @@ function IconSelector(prop) {
       },
       onDoubleClick: function onDoubleClick() {
         if (!name) {
-          showWarn('选择图标组件未设置name属性');
+          console.log('选择图标组件未设置name属性');
           return;
         }
 
@@ -308,30 +214,31 @@ function IconSelector(prop) {
         var val = _objectSpread({}, formVal); //@ts-ignore
 
 
-        val[name] = o.mongoUrl;
+        val[name] = o;
         formRef.current.setFieldsValue(val);
-        setImgUrl(toGatewayUrl(o.mongoUrl));
+        setIcon(o);
         setVisible(false);
       },
-      key: o.id
+      key: o
     }, /*#__PURE__*/React.createElement("div", {
       style: {
         height: 80
       }
-    }, /*#__PURE__*/React.createElement("img", {
-      title: o.mongoName,
+    }, /*#__PURE__*/React.createElement("div", {
+      title: o,
       style: {
-        maxWidth: '80px',
-        maxHeight: '80px'
+        paddingTop: '20px',
+        height: '80px',
+        fontSize: '20px'
       },
-      src: toGatewayUrl(o.mongoUrl)
+      className: o
     })), /*#__PURE__*/React.createElement("div", {
       style: {
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis',
         overflow: 'hidden'
       }
-    }, o.mongoName));
+    }, o));
   }))));
 }
 

package/es/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;