ls-pro-common 1.0.53 → 1.0.56

package/lib/components/ImageSelector.js

@@ -0,0 +1,369 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/modal/style");
+
+var _modal = _interopRequireDefault(require("antd/es/modal"));
+
+require("antd/es/empty/style");
+
+var _empty = _interopRequireDefault(require("antd/es/empty"));
+
+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"));
+
+require("antd/es/input/style");
+
+var _input = _interopRequireDefault(require("antd/es/input"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+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", "code"];
+var fileCenter = (0, _utils.getCache)('ossPath') || '/petrel/petrel-file-center-api/lesoon/oss/file/';
+
+function ImageSelector(prop) {
+  //@ts-ignore?
+  var _useContext = (0, _react.useContext)(_lsProForm.ProFormContext),
+      formRef = _useContext.formRef;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(''),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      imgUrl = _useState4[0],
+      setImgUrl = _useState4[1];
+
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      list = _useState6[0],
+      setList = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(''),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      searchKey = _useState8[0],
+      setSearchKey = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(''),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      nextMarker = _useState10[0],
+      setNextMarker = _useState10[1];
+
+  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,
+      allowClear = 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,
+      rest = (0, _objectWithoutProperties2.default)(prop, _excluded); // 上传地址
+
+  var uploadImgApi = (0, _react.useMemo)(function () {
+    return fileCenter + 'upload/' + code + '?catalogName=' + type;
+  }, [code, type]); // 分页加载列表地址
+
+  var pageImgApi = (0, _react.useMemo)(function () {
+    return fileCenter + 'page/' + code;
+  }, [code]); // 展示地址
+
+  var showImgApi = (0, _react.useMemo)(function () {
+    return fileCenter + 'show/' + code;
+  }, [code]);
+
+  var loadData = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(keys) {
+      var _result$data, _result$data2;
+
+      var url, param, result, rows;
+      return _regenerator.default.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 (0, _http.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((0, _toConsumableArray2.default)(list), (0, _toConsumableArray2.default)(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);
+    };
+  }();
+
+  (0, _react.useEffect)(function () {
+    if (!visible) {
+      setNextMarker('');
+      setSearchKey('');
+      return;
+    }
+
+    loadData(searchKey);
+  }, [visible, searchKey]);
+  (0, _react.useEffect)(function () {
+    var val = formRef.current.getFieldsValue();
+
+    if (val && val[name]) {
+      setImgUrl(val[name]);
+    }
+  }, []); // 验证上传文件大小
+
+  var beforeUpload = function beforeUpload(file) {
+    var sizeLimit = file.size / 1024 / 1024 >= maxSize;
+
+    if (sizeLimit) {
+      (0, _utils.showError)("\u4E0A\u4F20\u7684\u6587\u4EF6\u4E0D\u80FD\u5927\u4E8E".concat(maxSize, "M"));
+    }
+
+    return !sizeLimit;
+  }; // 上传图片
+
+
+  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') {
+        (0, _utils.showSuccess)(result.flag.retMsg);
+      } 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) || '上传图片失败,请联系管理员');
+      }
+    } else if (info.file.status === 'error') {
+      (0, _utils.showError)('上传数据失败,请联系管理员');
+    }
+
+    if (!info.fileList.filter(function (o) {
+      return o.status === 'uploading';
+    }).length) {
+      loadData(searchKey);
+    }
+  };
+
+  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", {
+      style: {
+        maxWidth: 22,
+        maxHeight: 22
+      },
+      src: imgUrl,
+      onClick: function onClick() {
+        return setVisible(true);
+      }
+    }) : /*#__PURE__*/_react.default.createElement(_icons.PlusOutlined, {
+      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);
+      }
+    })
+  }, rest.fieldProps, {
+    readOnly: readonly,
+    allowClear: allowClear
+  }))), /*#__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',
+        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) {
+        setNextMarker('');
+        setTimeout(function () {
+          setSearchKey(e.target.value || '');
+        }, 1);
+      }
+    }))),
+    visible: visible,
+    width: modalWidth,
+    destroyOnClose: true,
+    onCancel: function onCancel() {
+      return setVisible(false);
+    },
+    bodyStyle: {
+      padding: 8
+    },
+    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: 20,
+      multiple: true,
+      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, {
+      onClick: function onClick() {
+        return loadData(searchKey);
+      }
+    }, nextMarker ? '加载更多' : '刷新')),
+    getContainer: function getContainer() {
+      return document.body;
+    }
+  }, modalProps), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      minHeight: '120px'
+    }
+  }, list.map(function (o) {
+    return /*#__PURE__*/_react.default.createElement(_card.default, {
+      hoverable: true,
+      style: {
+        width: '125px',
+        height: '130px',
+        display: 'inline-block',
+        margin: '10px',
+        verticalAlign: 'middle'
+      },
+      bodyStyle: {
+        padding: '15px 8px',
+        textAlign: 'center'
+      },
+      onDoubleClick: function onDoubleClick() {
+        if (!name) {
+          (0, _utils.showWarn)('选择图标组件未设置name属性');
+          return;
+        }
+
+        var formVal = formRef.current.getFieldsValue();
+        var val = (0, _objectSpread2.default)({}, formVal); //@ts-ignore
+
+        val[name] = o.url;
+        formRef.current.setFieldsValue(val);
+        setImgUrl(o.url);
+        setVisible(false);
+      },
+      key: o.path
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        height: 80
+      }
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      title: o.name,
+      style: {
+        maxWidth: '80px',
+        maxHeight: '80px'
+      },
+      src: showImgApi + '?fileName=' + o.path
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden'
+      }
+    }, o.name));
+  }), list.length === 0 && /*#__PURE__*/_react.default.createElement(_empty.default, {
+    image: _empty.default.PRESENTED_IMAGE_SIMPLE
+  }))));
+}
+
+var _default = ImageSelector;
+exports.default = _default;

package/lib/components/InputMultiLine.js

@@ -72,7 +72,7 @@ var InputMultiLine = /*#__PURE__*/_react.default.forwardRef(function (prop, ref)
       allowClear = _prop$allowClear === void 0 ? true : _prop$allowClear,
       _prop$getPopupContain = prop.getPopupContainer,
       getPopupContainer = _prop$getPopupContain === void 0 ? function (triggerNode) {
-    return triggerNode.parentNode;
+    return document.body;
   } : _prop$getPopupContain,
       rest = (0, _objectWithoutProperties2.default)(prop, _excluded); // 设置初始值
 

package/lib/components/InputTable.js

@@ -108,7 +108,7 @@ var InputTable = /*#__PURE__*/_react.default.forwardRef(function (prop, ref) {
       triggerCheck = _prop$triggerCheck === void 0 ? 'entry' : _prop$triggerCheck,
       _prop$getPopupContain = prop.getPopupContainer,
       getPopupContainer = _prop$getPopupContain === void 0 ? function (triggerNode) {
-    return triggerNode.parentNode;
+    return document.body;
   } : _prop$getPopupContain,
       rest = (0, _objectWithoutProperties2.default)(prop, _excluded); //显示输入框绑定的name,如果不设置textName,设置为$name__text
 

package/lib/index.d.ts

@@ -3,6 +3,7 @@ import InputTable from './components/InputTable';
 import Page404 from './components/404';
 import Loading from './components/Loading';
 import IconSelector from './components/IconSelector';
+import ImageSelector from './components/ImageSelector';
 import InputMultiLine from './components/InputMultiLine';
 import AreaCascader from './components/AreaCascader';
 import BaseService from './service/BaseService';
@@ -16,4 +17,4 @@ import usePermission from './hooks/usePermission';
 import type { ApiResponse, TableToolbar, BaseApiType, MethodType } from './typing';
 import type { DtlLyaoutProps } from './components/DtlLayout';
 export type { ApiResponse, TableToolbar, BaseApiType, MethodType, DtlLyaoutProps };
-export { DtlLayout, InputTable, Page404, Loading, IconSelector, InputMultiLine, AreaCascader, BaseService, request, httpDelete, httpGet, httpPost, httpPut, getDict, fetchOptions, utils, useSingle, useDtl, usePermission };
+export { DtlLayout, InputTable, Page404, Loading, IconSelector, ImageSelector, InputMultiLine, AreaCascader, BaseService, request, httpDelete, httpGet, httpPost, httpPut, getDict, fetchOptions, utils, useSingle, useDtl, usePermission };

package/lib/index.js

@@ -31,6 +31,12 @@ Object.defineProperty(exports, "IconSelector", {
     return _IconSelector.default;
   }
 });
+Object.defineProperty(exports, "ImageSelector", {
+  enumerable: true,
+  get: function get() {
+    return _ImageSelector.default;
+  }
+});
 Object.defineProperty(exports, "InputMultiLine", {
   enumerable: true,
   get: function get() {
@@ -127,6 +133,8 @@ var _Loading = _interopRequireDefault(require("./components/Loading"));
 
 var _IconSelector = _interopRequireDefault(require("./components/IconSelector"));
 
+var _ImageSelector = _interopRequireDefault(require("./components/ImageSelector"));
+
 var _InputMultiLine = _interopRequireDefault(require("./components/InputMultiLine"));
 
 var _AreaCascader = _interopRequireDefault(require("./components/AreaCascader"));

package/lib/utils/index.d.ts

@@ -1,4 +1,4 @@
-export { getUrlQuery, setUrlQuery, toGatewayUrl, dateFormat, getResourceProps } from 'ls-pro-table/lib/utils';
+export { getUrlQuery, setUrlQuery, toGatewayUrl, dateFormat, getResourceProps } from 'ls-pro-table';
 /**
  * 设置文档title
  * @param {*} title

package/lib/utils/index.js

@@ -9,34 +9,34 @@ exports.dateAdd = exports.appPath = void 0;
 Object.defineProperty(exports, "dateFormat", {
   enumerable: true,
   get: function get() {
-    return _utils.dateFormat;
+    return _lsProTable.dateFormat;
   }
 });
 exports.getLoginName = exports.getCookie = exports.getCompanyId = exports.getCache = exports.formatMoney = exports.formatDate = void 0;
 Object.defineProperty(exports, "getResourceProps", {
   enumerable: true,
   get: function get() {
-    return _utils.getResourceProps;
+    return _lsProTable.getResourceProps;
   }
 });
 Object.defineProperty(exports, "getUrlQuery", {
   enumerable: true,
   get: function get() {
-    return _utils.getUrlQuery;
+    return _lsProTable.getUrlQuery;
   }
 });
 exports.setTitle = exports.setCookie = exports.setCache = exports.reLogin = exports.rangeToSearch = exports.nowAdd = exports.now = exports.isLogin = exports.isDev = exports.handleSizeCols = exports.getUserName = exports.getUserInfo = void 0;
 Object.defineProperty(exports, "setUrlQuery", {
   enumerable: true,
   get: function get() {
-    return _utils.setUrlQuery;
+    return _lsProTable.setUrlQuery;
   }
 });
 exports.statusList = exports.showWarn = exports.showSuccess = exports.showError = exports.showConfirm = void 0;
 Object.defineProperty(exports, "toGatewayUrl", {
   enumerable: true,
   get: function get() {
-    return _utils.toGatewayUrl;
+    return _lsProTable.toGatewayUrl;
   }
 });
 exports.yesnoList = exports.treeFind = exports.treeEach = exports.todayAdd = exports.today = void 0;
@@ -57,7 +57,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _icons = require("@ant-design/icons");
 
-var _utils = require("ls-pro-table/lib/utils");
+var _lsProTable = require("ls-pro-table");
 
 /**
  * 设置文档title
@@ -77,7 +77,7 @@ var setTitle = function setTitle(title) {
 
 
 exports.setTitle = setTitle;
-var formatDate = _utils.dateFormat;
+var formatDate = _lsProTable.dateFormat;
 /**
  * 返回当前日期
  * @returns YYYY-MM-DD
@@ -86,7 +86,7 @@ var formatDate = _utils.dateFormat;
 exports.formatDate = formatDate;
 
 var today = function today() {
-  return (0, _utils.dateFormat)(null, false);
+  return (0, _lsProTable.dateFormat)(null, false);
 };
 /**
  * 返回当前日期时间
@@ -97,7 +97,7 @@ var today = function today() {
 exports.today = today;
 
 var now = function now() {
-  return (0, _utils.dateFormat)(null, true);
+  return (0, _lsProTable.dateFormat)(null, true);
 };
 /**
  * 当前日期加减
@@ -163,7 +163,7 @@ var dateAdd = function dateAdd(dt, addDay) {
     dt.setFullYear(dt.getFullYear() + addYear);
   }
 
-  return (0, _utils.dateFormat)(dt, true);
+  return (0, _lsProTable.dateFormat)(dt, true);
 };
 /**
  * 千位符格式化数值

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ls-pro-common",
-  "version": "1.0.53",
+  "version": "1.0.56",
   "description": "ls-pro-common",
   "keywords": [
     "antd",  
@@ -28,8 +28,8 @@
   ],
   "dependencies": {
     "@ant-design/icons": "^4.3.0",
-    "ls-pro-table": "2.62.40",
-    "ls-pro-form": "1.52.28",
+    "ls-pro-table": "2.62.42",
+    "ls-pro-form": "1.52.29",
     "@babel/runtime": "^7.16.3",
     "classnames": "^2.2.6",
     "moment": "^2.27.0",