ls-pro-common 1.0.31 → 1.0.32

package/es/components/IconSelector.js

@@ -18,7 +18,7 @@ var _excluded = ["type", "uploadable", "readonly", "allowClear", "title", "modal
 import React from "react";
 import { useMemo, useState, useEffect, useContext } from 'react';
 import { ProFormText, ProFormContext } from 'ls-pro-form';
-import { PlusOutlined, UploadOutlined } from '@ant-design/icons';
+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/';
@@ -54,6 +54,11 @@ function IconSelector(prop) {
       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,
@@ -77,7 +82,7 @@ function IconSelector(prop) {
   }, [type]);
 
   var loadData = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(pageIndex) {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(pageIndex, keys) {
       var url, param, result, rows;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -90,16 +95,21 @@ function IconSelector(prop) {
                 "page.pn": pageIndex,
                 "page.size": pageSize
               };
-              _context.next = 4;
+
+              if (keys) {
+                param['search.mongoName_like'] = keys;
+              }
+
+              _context.next = 5;
               return httpGet(url, param);
 
-            case 4:
+            case 5:
               result = _context.sent;
               rows = result.rows || [];
               setList(rows);
               setTotal(result.total || 0);
 
-            case 8:
+            case 9:
             case "end":
               return _context.stop();
           }
@@ -107,15 +117,15 @@ function IconSelector(prop) {
       }, _callee);
     }));
 
-    return function loadData(_x) {
+    return function loadData(_x, _x2) {
       return _ref.apply(this, arguments);
     };
   }();
 
   useEffect(function () {
     if (!visible) return;
-    loadData(page);
-  }, [visible, page]);
+    loadData(page, searchKey);
+  }, [visible, page, searchKey]);
   var totalPage = useMemo(function () {
     if (total === 0) return 1;
     return Math.ceil(total / pageSize);
@@ -155,7 +165,7 @@ function IconSelector(prop) {
             if (page !== totalPage) {
               setPage(totalPage);
             } else {
-              loadData(totalPage);
+              loadData(totalPage, searchKey);
             }
           } else {
             showSuccess(result.flag.retMsg);
@@ -185,14 +195,33 @@ function IconSelector(prop) {
       }
     }) : /*#__PURE__*/React.createElement(PlusOutlined, {
       onClick: function onClick() {
-        return setVisible(true);
+        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);
       }
     })
   }, rest.fieldProps, {
     readOnly: readonly,
     allowClear: allowClear
   }))), /*#__PURE__*/React.createElement(_Modal, {
-    title: title,
+    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) {
+        setPage(1);
+        setSearchKey(e.target.value || '');
+      }
+    }))),
     visible: visible,
     width: modalWidth,
     destroyOnClose: true,
@@ -236,9 +265,13 @@ function IconSelector(prop) {
       }
     }, "\u4E0B\u4E00\u9875"), /*#__PURE__*/React.createElement(_Button, {
       onClick: function onClick() {
-        return loadData(page);
+        return loadData(page, searchKey);
       }
     }, "\u5237\u65B0"))
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      minHeight: '120px'
+    }
   }, list.map(function (o) {
     return /*#__PURE__*/React.createElement(_Card, {
       hoverable: true,
@@ -268,7 +301,8 @@ function IconSelector(prop) {
         formRef.current.setFieldsValue(val);
         setImgUrl(toGatewayUrl(o.mongoUrl));
         setVisible(false);
-      }
+      },
+      key: o.id
     }, /*#__PURE__*/React.createElement("div", {
       style: {
         height: 80
@@ -287,7 +321,7 @@ function IconSelector(prop) {
         overflow: 'hidden'
       }
     }, o.mongoName));
-  })));
+  }))));
 }
 
 export default IconSelector;

package/es/components/InputTable.d.ts

@@ -2,21 +2,43 @@
 import type { InputProps } from 'antd';
 import type { ProFormItemProps } from 'ls-pro-form';
 export declare type InputTableProps = ProFormItemProps<InputProps> & {
+    /**@name 弹框选择表格列配置 */
     columns: any[];
+    /**@name 调用后端API地址 */
     url: string;
+    /**@name 弹框表格高度，默认400 */
     tableHeight?: number;
+    /**@name 弹框表格宽度，默认650*/
     tableWidth?: number;
+    /**@name 是否支持多选 */
     multiple?: boolean;
+    /**@name 表单项name, 跟 form.item 的 name一致 */
     name: string;
+    /**@name 返回的值字段，表格中valueField配置的字段时返回给name */
     valueField: string;
+    /**@name 返回输入框显示的字段，textField字段值返回给textName */
     textField?: string;
+    /**@name 用于接收textField返回的值 */
     textName?: string;
+    /** @name 表格的其它配置 */
     tableConfig?: any;
+    /**@name 表单label宽度，默认70 */
     labelWidth?: number;
+    /**@name 是否2.0接口  */
     isV2?: boolean;
+    /**@name 是否支持跨页选择 */
     keepSelect?: boolean;
-    onSelectChange?: (item: any) => void;
+    /**@name 回车事件查询关键字 */
+    searchField?: string;
+    /**@name 填充其它表单项目配置 */
+    fillMap?: Record<string, string>;
+    /**@name 输入后检查数据的触发方式，默认为entry回车触发 */
+    triggerCheck?: 'entry' | 'blur';
+    /**@name 选择行事件 */
+    onSelectChange?: (item: any, formRef?: any) => void;
+    /**@name 加载之前事件,param为查询条件对象,可以通过此方法调整 */
     beforeLoad?: (param: any) => void;
+    /**@name 加载之后事件,row为接口返回数据，可以通过此方法调整 */
     afterLoad?: (rows: any[]) => void;
 };
 declare function InputTable(prop: InputTableProps): JSX.Element;

package/es/components/InputTable.js

@@ -10,14 +10,15 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 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 = ["columns", "url", "textName", "name", "tableConfig", "tableHeight", "tableWidth", "readonly", "multiple", "valueField", "labelWidth", "textField", "onSelectChange", "beforeLoad", "afterLoad", "isV2", "allowClear", "keepSelect", "fieldProps"],
+var _excluded = ["columns", "url", "textName", "name", "tableConfig", "tableHeight", "tableWidth", "readonly", "multiple", "valueField", "labelWidth", "textField", "onSelectChange", "beforeLoad", "afterLoad", "isV2", "allowClear", "keepSelect", "fieldProps", "searchField", "fillMap", "triggerCheck"],
     _excluded2 = ["current", "pageSize"];
 import React from "react";
-import { useRef, useState, useEffect, useContext } from 'react';
+import { useRef, useState, useEffect, useContext, useMemo } from 'react';
 import ProTable from 'ls-pro-table';
 import { ProFormText, ProFormContext } from 'ls-pro-form';
 import { MoreOutlined } from '@ant-design/icons';
 import { httpGet } from '../http';
+import { showWarn } from '../utils';
 
 function InputTable(prop) {
   //@ts-ignore
@@ -67,9 +68,37 @@ function InputTable(prop) {
       _prop$keepSelect = prop.keepSelect,
       keepSelect = _prop$keepSelect === void 0 ? false : _prop$keepSelect,
       fieldProps = prop.fieldProps,
-      rest = _objectWithoutProperties(prop, _excluded);
+      searchField = prop.searchField,
+      fillMap = prop.fillMap,
+      _prop$triggerCheck = prop.triggerCheck,
+      triggerCheck = _prop$triggerCheck === void 0 ? 'entry' : _prop$triggerCheck,
+      rest = _objectWithoutProperties(prop, _excluded); //显示输入框绑定的name,如果不设置textName,设置为$name__text
 
-  var textNameProp = textName || name + '__text';
+
+  var textNameProp = useMemo(function () {
+    return textName || name + '__text';
+  }, [textName, name]); // 输入框回车时，调用查询参数字段
+
+  var searchKey = useMemo(function () {
+    if (searchField) return searchField;
+    var col; //先取显示字段
+
+    if (textField) {
+      col = columns.find(function (o) {
+        return o.dataIndex === textField || o.key === textField;
+      });
+    } //取不到时取值字段
+
+
+    if (!col) {
+      col = columns.find(function (o) {
+        return o.dataIndex === valueField || o.key === valueField;
+      });
+    }
+
+    if (col) return col.searchField || col.dataIndex;
+    return textField || valueField;
+  }, [columns, searchField, valueField, textField]);
 
   var loadData = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(param) {
@@ -119,7 +148,7 @@ function InputTable(prop) {
 
               return _context.abrupt("return", {
                 data: rows,
-                total: result.total || 0,
+                total: Number(result.total || 0),
                 success: true
               });
 
@@ -145,7 +174,112 @@ function InputTable(prop) {
       formValue[textNameProp] = formValue[name];
       formRef === null || formRef === void 0 ? void 0 : formRef.current.setFieldsValue(_objectSpread({}, formValue));
     }
-  }, []);
+  }, []); // 处理返回数据
+
+  var handleValue = function handleValue(row) {
+    var _formRef$current2, _formRef$current3;
+
+    var formValue = formRef === null || formRef === void 0 ? void 0 : (_formRef$current2 = formRef.current) === null || _formRef$current2 === void 0 ? void 0 : _formRef$current2.getFieldsValue();
+    var txt; //支持多选
+
+    if (Array.isArray(row)) {
+      //返回值
+      formValue[name] = row.map(function (o) {
+        return o[valueField];
+      }).join(','); //显示值
+
+      txt = row.map(function (o) {
+        return o[textField || valueField];
+      }).join(','); //处理填充其它字段
+
+      if (fillMap) {
+        var _loop = function _loop(key) {
+          formValue[key] = row.map(function (o) {
+            return o[fillMap[key]];
+          }).join(',');
+        };
+
+        for (var key in fillMap) {
+          _loop(key);
+        }
+      }
+    } else {
+      formValue[name] = row[valueField] || '';
+      txt = row[textField || valueField] || '';
+
+      if (fillMap) {
+        for (var _key in fillMap) {
+          formValue[_key] = row[fillMap[_key]] || '';
+        }
+      }
+    }
+
+    formValue[textNameProp] = txt;
+    setText(txt);
+    setVisible(false);
+    (_formRef$current3 = formRef.current) === null || _formRef$current3 === void 0 ? void 0 : _formRef$current3.setFieldsValue(_objectSpread({}, formValue));
+    onSelectChange === null || onSelectChange === void 0 ? void 0 : onSelectChange(row, formRef);
+  }; // 可输入时,回车或失去焦点调接口查询数据
+
+
+  var onQuery = function onQuery(e) {
+    if (rest.disabled || (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.disabled) || readonly) return;
+    var val = e.target.value;
+
+    if (val) {
+      var param = {
+        current: 1,
+        pageSize: 10
+      };
+      param[searchKey] = val;
+      loadData(param).then(function (result) {
+        var rows = result.data || [];
+
+        if (!rows.length) {
+          handleValue({});
+          showWarn("".concat(val, "\u67E5\u627E\u4E0D\u5230\u5BF9\u5E94\u7684\u8BB0\u5F55\uFF01"));
+        } else if (multiple) {
+          handleValue(rows);
+        } else {
+          handleValue(rows[0]);
+        }
+      });
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  }; //直接输入不回车,value 和 text 为同一个值
+
+
+  var onInput = function onInput(e) {
+    var _formRef$current4;
+
+    var formValue = formRef === null || formRef === void 0 ? void 0 : (_formRef$current4 = formRef.current) === null || _formRef$current4 === void 0 ? void 0 : _formRef$current4.getFieldsValue();
+    var val = e.target.value;
+    formValue[name] = val;
+    formValue[textNameProp] = val;
+    setText(val);
+    formRef.current.setFieldsValue(_objectSpread({}, formValue));
+  }; // 当表单重置或点clear时,处理值
+
+
+  var clearValue = function clearValue(e) {
+    if (!e.target.value) {
+      var _formRef$current5;
+
+      setText('');
+      var formValue = formRef === null || formRef === void 0 ? void 0 : (_formRef$current5 = formRef.current) === null || _formRef$current5 === void 0 ? void 0 : _formRef$current5.getFieldsValue();
+      formValue[name] = '';
+      formValue[textNameProp] = ''; // 不处理，其它表单自己清空
+      // if (fillMap) {
+      //     for (let key in fillMap) {
+      //         formValue[key] = '';
+      //     }
+      // }
+
+      formRef.current.setFieldsValue(_objectSpread({}, formValue));
+    }
+  };
+
   var tableDom = /*#__PURE__*/React.createElement(ProTable, _extends({
     columns: columns,
     request: loadData,
@@ -176,36 +310,14 @@ function InputTable(prop) {
     onRow: function onRow(record) {
       return {
         onDoubleClick: function onDoubleClick() {
-          var _formRef$current2, _formRef$current3;
-
-          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] = record[valueField];
-          var txt = record[textField || valueField];
-          formValue[textNameProp] = txt;
-          setText(txt);
-          (_formRef$current3 = formRef.current) === null || _formRef$current3 === void 0 ? void 0 : _formRef$current3.setFieldsValue(_objectSpread({}, formValue));
-          setVisible(false);
-          onSelectChange === null || onSelectChange === void 0 ? void 0 : onSelectChange(record);
+          handleValue(record);
         }
       };
     },
     toolBarRender: function toolBarRender() {
       return [/*#__PURE__*/React.createElement(_Button, {
         onClick: function onClick() {
-          var _formRef$current4, _formRef$current5;
-
-          var formValue = formRef === null || formRef === void 0 ? void 0 : (_formRef$current4 = formRef.current) === null || _formRef$current4 === void 0 ? void 0 : _formRef$current4.getFieldsValue();
-          formValue[name] = selectedRows.map(function (o) {
-            return o[valueField];
-          }).join(',');
-          var txt = selectedRows.map(function (o) {
-            return o[textField || valueField];
-          }).join(',');
-          formValue[textNameProp] = txt;
-          setText(txt);
-          (_formRef$current5 = formRef.current) === null || _formRef$current5 === void 0 ? void 0 : _formRef$current5.setFieldsValue(_objectSpread({}, formValue));
-          onSelectChange === null || onSelectChange === void 0 ? void 0 : onSelectChange(selectedRows);
-          setVisible(false);
+          handleValue(selectedRows);
         }
       }, "\u786E\u8BA4")];
     },
@@ -234,31 +346,25 @@ function InputTable(prop) {
       onVisibleChange: setVisible
     }, /*#__PURE__*/React.createElement(MoreOutlined, {
       onClick: function onClick(e) {
+        if (rest.disabled || (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.disabled)) return;
         setVisible(true);
         e.stopPropagation && e.stopPropagation();
       }
     })),
     onClick: function onClick() {
-      if (readonly) return;
+      if (!readonly) return;
       setVisible(true);
     },
-    onInput: function onInput(e) {
-      var _formRef$current6;
-
-      var formValue = formRef === null || formRef === void 0 ? void 0 : (_formRef$current6 = formRef.current) === null || _formRef$current6 === void 0 ? void 0 : _formRef$current6.getFieldsValue();
-      var val = e.target.value;
-      formValue[name] = val;
-      formValue[textNameProp] = val;
-      formRef.current.setFieldsValue(_objectSpread({}, formValue));
+    onInput: onInput,
+    onChange: clearValue,
+    onPressEnter: function onPressEnter(e) {
+      if (triggerCheck === 'entry') {
+        onQuery(e);
+      }
     },
-    onChange: function onChange(e) {
-      if (!e.target.value) {
-        var _formRef$current7;
-
-        var formValue = formRef === null || formRef === void 0 ? void 0 : (_formRef$current7 = formRef.current) === null || _formRef$current7 === void 0 ? void 0 : _formRef$current7.getFieldsValue();
-        formValue[name] = '';
-        formValue[textNameProp] = '';
-        formRef.current.setFieldsValue(_objectSpread({}, formValue));
+    onBlur: function onBlur(e) {
+      if (triggerCheck === 'blur') {
+        onQuery(e);
       }
     },
     readOnly: readonly,
@@ -278,36 +384,26 @@ function InputTable(prop) {
       onVisibleChange: setVisible
     }, /*#__PURE__*/React.createElement(MoreOutlined, {
       onClick: function onClick(e) {
+        if (rest.disabled || (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.disabled)) return;
         setVisible(true);
-        e.stopPropagation && e.stopPropagation();
       }
     })),
     onClick: function onClick() {
-      if (readonly) return;
+      if (!readonly) return;
       setVisible(true);
     },
-    onInput: function onInput(e) {
-      var _formRef$current8;
-
-      var formValue = formRef === null || formRef === void 0 ? void 0 : (_formRef$current8 = formRef.current) === null || _formRef$current8 === void 0 ? void 0 : _formRef$current8.getFieldsValue();
-      var val = e.target.value;
-      formValue[name] = val;
-      formValue[textNameProp] = val;
-      setText(val);
-      formRef.current.setFieldsValue(_objectSpread({}, formValue));
+    onInput: onInput,
+    onPressEnter: function onPressEnter(e) {
+      if (triggerCheck === 'entry') {
+        onQuery(e);
+      }
     },
-    onChange: function onChange(e) {
-      //用于清除当前组件值
-      if (!e.target.value) {
-        var _formRef$current9;
-
-        setText('');
-        var formValue = formRef === null || formRef === void 0 ? void 0 : (_formRef$current9 = formRef.current) === null || _formRef$current9 === void 0 ? void 0 : _formRef$current9.getFieldsValue();
-        formValue[name] = '';
-        formValue[textNameProp] = '';
-        formRef.current.setFieldsValue(_objectSpread({}, formValue));
+    onBlur: function onBlur(e) {
+      if (triggerCheck === 'blur') {
+        onQuery(e);
       }
     },
+    onChange: clearValue,
     readOnly: readonly,
     value: text,
     allowClear: allowClear

package/lib/components/IconSelector.js

@@ -85,6 +85,11 @@ function IconSelector(prop) {
       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,
@@ -107,7 +112,7 @@ function IconSelector(prop) {
   }, [type]);
 
   var loadData = /*#__PURE__*/function () {
-    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(pageIndex) {
+    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) {
@@ -120,16 +125,21 @@ function IconSelector(prop) {
                 "page.pn": pageIndex,
                 "page.size": pageSize
               };
-              _context.next = 4;
+
+              if (keys) {
+                param['search.mongoName_like'] = keys;
+              }
+
+              _context.next = 5;
               return (0, _http.httpGet)(url, param);
 
-            case 4:
+            case 5:
               result = _context.sent;
               rows = result.rows || [];
               setList(rows);
               setTotal(result.total || 0);
 
-            case 8:
+            case 9:
             case "end":
               return _context.stop();
           }
@@ -137,15 +147,15 @@ function IconSelector(prop) {
       }, _callee);
     }));
 
-    return function loadData(_x) {
+    return function loadData(_x, _x2) {
       return _ref.apply(this, arguments);
     };
   }();
 
   (0, _react.useEffect)(function () {
     if (!visible) return;
-    loadData(page);
-  }, [visible, page]);
+    loadData(page, searchKey);
+  }, [visible, page, searchKey]);
   var totalPage = (0, _react.useMemo)(function () {
     if (total === 0) return 1;
     return Math.ceil(total / pageSize);
@@ -185,7 +195,7 @@ function IconSelector(prop) {
             if (page !== totalPage) {
               setPage(totalPage);
             } else {
-              loadData(totalPage);
+              loadData(totalPage, searchKey);
             }
           } else {
             (0, _utils.showSuccess)(result.flag.retMsg);
@@ -215,14 +225,33 @@ function IconSelector(prop) {
       }
     }) : /*#__PURE__*/_react.default.createElement(_icons.PlusOutlined, {
       onClick: function onClick() {
-        return setVisible(true);
+        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);
       }
     })
   }, rest.fieldProps, {
     readOnly: readonly,
     allowClear: allowClear
   }))), /*#__PURE__*/_react.default.createElement(_modal.default, {
-    title: title,
+    title: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", null, title), /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        display: 'inline-block',
+        width: 230,
+        marginLeft: 30
+      }
+    }, /*#__PURE__*/_react.default.createElement(_input.default, {
+      suffix: /*#__PURE__*/_react.default.createElement(_icons.SearchOutlined, null),
+      placeholder: "\u8F93\u5165\u56FE\u7247\u540D\u67E5\u8BE2",
+      onPressEnter: function onPressEnter(e) {
+        setPage(1);
+        setSearchKey(e.target.value || '');
+      }
+    }))),
     visible: visible,
     width: modalWidth,
     destroyOnClose: true,
@@ -266,9 +295,13 @@ function IconSelector(prop) {
       }
     }, "\u4E0B\u4E00\u9875"), /*#__PURE__*/_react.default.createElement(_button.default, {
       onClick: function onClick() {
-        return loadData(page);
+        return loadData(page, searchKey);
       }
     }, "\u5237\u65B0"))
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      minHeight: '120px'
+    }
   }, list.map(function (o) {
     return /*#__PURE__*/_react.default.createElement(_card.default, {
       hoverable: true,
@@ -296,7 +329,8 @@ function IconSelector(prop) {
         formRef.current.setFieldsValue(val);
         setImgUrl((0, _utils.toGatewayUrl)(o.mongoUrl));
         setVisible(false);
-      }
+      },
+      key: o.id
     }, /*#__PURE__*/_react.default.createElement("div", {
       style: {
         height: 80
@@ -315,7 +349,7 @@ function IconSelector(prop) {
         overflow: 'hidden'
       }
     }, o.mongoName));
-  })));
+  }))));
 }
 
 var _default = IconSelector;