@zat-design/sisyphus-react 3.0.16-beta.2 → 3.1.4

package/es/ProForm/components/combination/ProModalSelect/index.js

@@ -8,19 +8,20 @@ import _message from "antd/es/message";
 import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import "antd/es/form/style";
 import _Form from "antd/es/form";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["value", "onChange", "disabled", "labelInValue", "fieldNames", "readOnly", "addonAfter", "configOption", "title", "onFormat", "showCodeName", "optionRender", "customRender", "style", "className", "beforeOpen", "isTooltip", "otherProps", "searchForm"],
   _excluded2 = ["onOk"],
   _excluded3 = ["rowKey", "columns", "rowSelection"];
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { CloseOutlined, SearchOutlined } from '@ant-design/icons';
-import { useSetState } from 'ahooks';
-import { cloneDeep, isArray, isFunction } from 'lodash';
+import { useMount, useSetState } from 'ahooks';
+import { cloneDeep, isArray, isEqual, isFunction } from 'lodash';
 import { ReactSVG } from 'react-svg';
-import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
-import { ProForm, ProDrawerForm, ProTable, useProConfig } from 'zat-design-pro-component';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo } from 'react';
+import { ProForm, ProDrawerForm, ProTable, useProConfig } from '../../../../index';
 import Container from '../../Container';
 import viewSvg from '../../../../assets/view.svg';
 import useRequestList from './hooks/useRequestList';
@@ -48,6 +49,7 @@ var ProModalSelect = function ProModalSelect(props, ref) {
     otherProps = props.otherProps,
     searchForm = props.searchForm,
     restInputProps = _objectWithoutProperties(props, _excluded);
+  var contentForm = _Form.useFormInstance();
   if (!configOption || Object.prototype.toString.call(configOption) !== '[object Object]') {
     throw new Error('error: 请检查枚举选择弹框的配置项【configOption】');
   }
@@ -109,12 +111,14 @@ var ProModalSelect = function ProModalSelect(props, ref) {
     onOff = _useSetState2$.onOff,
     visible = _useSetState2$.visible,
     open = _useSetState2$.open,
-    selectedRows = _useSetState2$.selectedRows,
-    selectedRowKeys = _useSetState2$.selectedRowKeys,
+    _selectedRows = _useSetState2$.selectedRows,
+    _selectedRowKeys = _useSetState2$.selectedRowKeys,
     setState = _useSetState2[1];
   var _Form$useForm = _Form.useForm(searchForm),
     _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
     form = _Form$useForm2[0];
+  var selectedRows = (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRows) || _selectedRows;
+  var selectedRowKeys = (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) || _selectedRowKeys;
   var _useRequestList = useRequestList(useRequest === null || useRequest === void 0 ? void 0 : useRequest.service, {
       withPagination: withPagination,
       transformParams: transformParams,
@@ -165,6 +169,9 @@ var ProModalSelect = function ProModalSelect(props, ref) {
       }));
     })) === null || _data$map === void 0 ? void 0 : _data$map.join('，') : undefined;
   };
+  var viewText = useMemo(function () {
+    return formatValue(labelInValue ? value : _value);
+  }, [value, _value]);
   /**
    * 获取表格的rowKey，支持函数、字符串
    * @date 2023-02-16
@@ -272,48 +279,57 @@ var ProModalSelect = function ProModalSelect(props, ref) {
   };
   var handleFinish = /*#__PURE__*/function () {
     var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-      var data, flag, res;
+      var _data, flag, res;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            if (selectedRows.length) {
-              _context2.next = 3;
+            _context2.prev = 0;
+            if (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) {
+              _context2.next = 4;
               break;
             }
             _message.error('请先勾选');
             return _context2.abrupt("return", false);
-          case 3:
-            data = isMultiple ? selectedRows : selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows[0]; // @ts-ignore
-            data.value = data[valueKey];
-            // @ts-ignore
-            data.label = data[labelKey];
+          case 4:
+            _data = isMultiple ? selectedRows : selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows[0];
+            if (!isMultiple) {
+              // @ts-ignore
+              _data.value = _data[valueKey];
+              // @ts-ignore
+              _data.label = _data[labelKey];
+            }
             flag = true;
             if (!onOk) {
               _context2.next = 12;
               break;
             }
             _context2.next = 10;
-            return onOk(data);
+            return onOk(_data);
           case 10:
             res = _context2.sent;
             if (res !== null && res !== undefined) {
+              // @ts-ignore
               flag = res;
             }
           case 12:
             if (flag) {
-              onChange === null || onChange === void 0 ? void 0 : onChange(labelInValue ? data : getNextValues(data), data);
+              onChange === null || onChange === void 0 ? void 0 : onChange(labelInValue ? _data : getNextValues(_data), _data);
               // 更新内部展示值
               setState({
-                _value: data
+                _value: _data
               });
               handleClose();
             }
             return _context2.abrupt("return", flag);
-          case 14:
+          case 16:
+            _context2.prev = 16;
+            _context2.t0 = _context2["catch"](0);
+            console.log('error', _context2.t0);
+          case 19:
           case "end":
             return _context2.stop();
         }
-      }, _callee2);
+      }, _callee2, null, [[0, 16]]);
     }));
     return function handleFinish() {
       return _ref7.apply(this, arguments);
@@ -344,7 +360,6 @@ var ProModalSelect = function ProModalSelect(props, ref) {
   }();
   var _rowSelection = _objectSpread({
     type: type,
-    selectedRowKeys: selectedRowKeys,
     onChange: function onChange(rowKeys, rows) {
       setState({
         selectedRowKeys: rowKeys,
@@ -355,7 +370,9 @@ var ProModalSelect = function ProModalSelect(props, ref) {
       return {
         disabled: record === null || record === void 0 ? void 0 : record.disabled
       };
-    }
+    },
+    selectedRowKeys: selectedRowKeys,
+    selectedRows: selectedRows
   }, rowSelection);
   // 点击行进行勾选
   var handleClickRow = function handleClickRow(record) {
@@ -393,12 +410,12 @@ var ProModalSelect = function ProModalSelect(props, ref) {
   // 初始化回显，当传入initParams时，前端用来回险
   var getInitValues = /*#__PURE__*/function () {
     var _ref9 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
-      var _useRequest$options2, _useRequest$options3, queryBean, page, params, res, _list, list, _res$data, _data, nextSelectRowKeys;
+      var _useRequest$options2, _useRequest$options3, queryBean, page, params, res, _list, list, _res$data, _data2, nextSelectRowKeys;
       return _regeneratorRuntime().wrap(function _callee4$(_context4) {
         while (1) switch (_context4.prev = _context4.next) {
           case 0:
             if (typeof (useRequest === null || useRequest === void 0 ? void 0 : useRequest.initParams) === 'function') {
-              useRequest.initParams = useRequest === null || useRequest === void 0 ? void 0 : useRequest.initParams(value);
+              useRequest.initParams = useRequest === null || useRequest === void 0 ? void 0 : useRequest.initParams(value, contentForm.getFieldsValue());
             }
             if (!(useRequest === null || useRequest === void 0 ? void 0 : useRequest.initParams)) {
               _context4.next = 13;
@@ -434,10 +451,14 @@ var ProModalSelect = function ProModalSelect(props, ref) {
               } else {
                 list = withPagination ? res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.list : res === null || res === void 0 ? void 0 : res.data;
               }
-              _data = isMultiple ? list : (_list = list) === null || _list === void 0 ? void 0 : _list[0];
-              nextSelectRowKeys = isMultiple ? value : [value]; // 更新内部展示值
+              _data2 = isMultiple ? list : (_list = list) === null || _list === void 0 ? void 0 : _list[0];
+              nextSelectRowKeys = isMultiple ? value : [value];
+              if (labelInValue) {
+                onChange(_data2);
+              }
+              // 更新内部展示值
               setState({
-                _value: _data,
+                _value: _data2,
                 isInit: false,
                 selectedRows: list,
                 selectedRowKeys: nextSelectRowKeys
@@ -459,13 +480,19 @@ var ProModalSelect = function ProModalSelect(props, ref) {
       handleSearch: handleSearch
     };
   });
-  useEffect(function () {
+  useMount(function () {
     if (!value) {
       setState({
-        selectedRowKeys: [],
-        selectedRows: [],
+        selectedRowKeys: (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) || [],
+        selectedRows: (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRows) || [],
         _value: undefined
       });
+    } else if (Object.prototype.toString.call(value) === '[object Array]') {
+      setState({
+        selectedRowKeys: (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) || value,
+        selectedRows: (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRows) || value,
+        _value: value
+      });
     } else if (Object.prototype.toString.call(value) === '[object Object]') {
       var _initialValue;
       var initialValue = (_initialValue = {}, _defineProperty(_initialValue, valueKey, value[valueKey]), _defineProperty(_initialValue, labelKey, value[labelKey]), _initialValue);
@@ -475,6 +502,8 @@ var ProModalSelect = function ProModalSelect(props, ref) {
         _value: initialValue
       });
     }
+  });
+  useEffect(function () {
     if (onOff && !visible) {
       var _useRequest$options4;
       if ((useRequest === null || useRequest === void 0 ? void 0 : (_useRequest$options4 = useRequest.options) === null || _useRequest$options4 === void 0 ? void 0 : _useRequest$options4.manual) !== true) {
@@ -507,46 +536,76 @@ var ProModalSelect = function ProModalSelect(props, ref) {
       getInitValues();
     }
   }, [value, visible, isInit]);
-  var defaultAddonAfter = /*#__PURE__*/React.createElement("div", {
-    className: "pro-enum-input-addonAfter"
-  }, value && !disabled && /*#__PURE__*/React.createElement("span", {
-    className: "close-icon"
-  }, /*#__PURE__*/React.createElement(CloseOutlined, {
-    onClick: handleClearValue
-  })), /*#__PURE__*/React.createElement(ReactSVG, {
-    className: "viewSvg",
-    src: viewSvg,
-    onClick: handleClick
-  }));
+  useEffect(function () {
+    if (!value) {
+      setState({
+        _value: undefined,
+        selectedRowKeys: [],
+        selectedRows: []
+      });
+    }
+    if (labelInValue && _value && !isEqual(value, _value)) {
+      setState({
+        _value: value,
+        selectedRowKeys: [],
+        selectedRows: []
+      });
+    }
+    if (!labelInValue && (_value === null || _value === void 0 ? void 0 : _value[valueKey]) && !isEqual(value, _value === null || _value === void 0 ? void 0 : _value[valueKey])) {
+      setState({
+        _value: value,
+        selectedRowKeys: [],
+        selectedRows: []
+      });
+    }
+  }, [value, _value]);
+  var defaultAddonAfter = _jsxs("div", {
+    className: "pro-enum-input-addonAfter",
+    children: [value && !disabled && _jsx("span", {
+      className: "close-icon",
+      children: _jsx(CloseOutlined, {
+        onClick: handleClearValue
+      })
+    }), _jsx(ReactSVG, {
+      className: "viewSvg",
+      src: viewSvg,
+      onClick: handleClick
+    })]
+  });
   var forceAddonAfterRender = function forceAddonAfterRender() {
     if (isView || disabled) {
       return;
     }
     if (addonAfter) {
-      return /*#__PURE__*/React.createElement("div", {
-        onClick: handleClick
-      }, addonAfter);
+      return _jsx("div", {
+        onClick: handleClick,
+        children: addonAfter
+      });
     }
     return defaultAddonAfter;
   };
   // 加个中间状态Input
-  var initRender = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Input, _objectSpread({
-    value: formatValue(labelInValue ? value : _value),
-    readOnly: readOnly,
-    onClick: readOnly ? handleClick : undefined,
-    onChange: handleChangeValue,
-    disabled: disabled,
-    addonAfter: forceAddonAfterRender(),
-    placeholder: "\u8BF7\u9009\u62E9"
-  }, restInputProps)), /*#__PURE__*/React.createElement(_Input, {
-    type: "hidden",
-    value: value
-  }));
+  var initRender = _jsxs(_Fragment, {
+    children: [_jsx(_Input, _objectSpread({
+      value: viewText,
+      readOnly: readOnly,
+      onClick: readOnly ? handleClick : undefined,
+      onChange: handleChangeValue,
+      disabled: disabled,
+      addonAfter: forceAddonAfterRender(),
+      placeholder: "\u8BF7\u9009\u62E9",
+      autoComplete: "off"
+    }, restInputProps)), _jsx(_Input, {
+      type: "hidden",
+      value: value
+    })]
+  });
   if (customRender && /*#__PURE__*/React.isValidElement(customRender)) {
-    initRender = /*#__PURE__*/React.createElement("div", {
+    initRender = _jsx("div", {
       className: "pro-modal-select-init",
-      onClick: handleClick
-    }, customRender);
+      onClick: handleClick,
+      children: customRender
+    });
   }
   useEffect(function () {
     if (isTooltip && value) {
@@ -590,56 +649,60 @@ var ProModalSelect = function ProModalSelect(props, ref) {
       formColumns[0].fieldProps = {};
     }
     if (!isFunction(formColumns[0].fieldProps) && !(formColumns === null || formColumns === void 0 ? void 0 : (_formColumns$3 = formColumns[0]) === null || _formColumns$3 === void 0 ? void 0 : (_formColumns$3$fieldP = _formColumns$3.fieldProps) === null || _formColumns$3$fieldP === void 0 ? void 0 : _formColumns$3$fieldP.suffix)) {
-      formColumns[0].fieldProps.suffix = /*#__PURE__*/React.createElement(SearchOutlined, {
+      formColumns[0].fieldProps.suffix = _jsx(SearchOutlined, {
         onClick: handleSearch
       });
     }
   }
   if (isView) {
     if (!value) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, viewEmpty);
+      return _jsx(_Fragment, {
+        children: viewEmpty
+      });
     }
-    return /*#__PURE__*/React.createElement(Container, {
-      viewEmpty: viewEmpty
-    }, "".concat(formatValue(labelInValue ? value : _value || '')));
+    return _jsx(Container, {
+      viewEmpty: viewEmpty,
+      children: "".concat(viewText)
+    });
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return _jsxs("div", {
     id: uuid,
     className: "pro-modal-select ".concat(className !== null && className !== void 0 ? className : ''),
-    style: style
-  }, isTooltip && value ? /*#__PURE__*/React.createElement(_Tooltip, {
-    placement: "topLeft",
-    open: open,
-    title: formatValue(labelInValue ? value : _value)
-  }, initRender) : initRender, /*#__PURE__*/React.createElement(ProDrawerForm, _objectSpread({
-    showType: "Modal",
-    title: title,
-    width: "50%",
-    onOk: handleFinish,
-    onCancel: handleClose,
-    visible: visible
-  }, restModalProps), /*#__PURE__*/React.createElement(ProForm, {
-    form: form,
-    columns: formColumns,
-    onFinish: handleSearch,
-    footer: (formColumns === null || formColumns === void 0 ? void 0 : formColumns.length) > 1
-  }), /*#__PURE__*/React.createElement(ProTable, _objectSpread({
-    onRow: function onRow(record) {
-      return {
-        onClick: function onClick() {
-          return handleClickRow(record);
-        }
-      };
-    },
-    rowKey: rowKey,
-    loading: loading,
-    scroll: {
-      y: '250px'
-    },
-    rowSelection: _rowSelection,
-    columns: columns,
-    dataSource: data,
-    pagination: withPagination ? pagination : false
-  }, restTableProps))));
+    style: style,
+    children: [isTooltip && viewText ? _jsx(_Tooltip, {
+      placement: "topLeft",
+      open: open,
+      title: viewText,
+      children: initRender
+    }) : initRender, _jsxs(ProDrawerForm, _objectSpread(_objectSpread({
+      showType: "Modal",
+      title: title,
+      onOk: handleFinish,
+      // @ts-ignore
+      onCancel: handleClose,
+      visible: visible
+    }, restModalProps), {}, {
+      children: [_jsx(ProForm, {
+        form: form,
+        columns: formColumns,
+        onFinish: handleSearch,
+        footer: (formColumns === null || formColumns === void 0 ? void 0 : formColumns.length) > 1
+      }), _jsx(ProTable, _objectSpread({
+        onRow: function onRow(record) {
+          return {
+            onClick: function onClick() {
+              return handleClickRow(record);
+            }
+          };
+        },
+        rowKey: rowKey,
+        loading: loading,
+        rowSelection: _rowSelection,
+        columns: columns,
+        dataSource: data,
+        pagination: withPagination ? pagination : false
+      }, restTableProps))]
+    }))]
+  });
 };
 export default /*#__PURE__*/forwardRef(ProModalSelect);

package/es/ProForm/components/combination/ProModalSelect/propsType.d.ts

@@ -3,10 +3,10 @@ import { Service, Options } from 'ahooks/lib/useRequest/src/types';
 import React from 'react';
 import { ProColumnProps } from '../../render/propsType';
 import { ProFormOtherProps } from '../../../propsType';
-type OnOkFunction = (list: Record<string, any>[]) => boolean;
+type OnOkFunction = (list?: Record<string, any>[]) => boolean | void | Promise<boolean | void>;
 interface ConfigOption {
     useRequest?: {
-        service: Service<any, any>;
+        service?: Service<any, any>;
         options?: Options<any, any> & {
             page?: any;
             defaultParams?: any;

package/es/ProForm/components/combination/ProModalSelect/style/index.less

@@ -5,41 +5,60 @@
       display: none;
     }
     &:hover .close-icon {
-      display: block;
       position: relative;
-      z-index: 3;
+      z-index: 101;
+      display: block;
       display: flex;
       align-items: center;
       justify-content: center;
       width: 12px;
       height: 12px;
-      margin-right: var(--zaui-space-size-md, 14px);
+      margin-right: var(--zaui-space-size-md, 16px);
       margin-left: -28px;
       color: #ffffff;
       background-color: rgba(0, 0, 0, 0.25);
       border: none;
       border-radius: 50%;
-  
+
       > span {
         position: relative;
-        font-size: 8px;
+        font-size: var(--zaui-font-size-sm, 12px );
         border: none;
         border-radius: 50%;
       }
-  
+
       &:hover {
         background-color: rgba(0, 0, 0, 0.5);
       }
     }
     &:hover {
-      .ant-input, .ant-input-group-addon {
+      .ant-input,
+      .ant-input-group-addon {
         border-color: var(--zaui-brand-hover, #3387ff);
       }
     }
   }
+
+  .ant-input-group-wrapper-status-error {
+    &:hover {
+      .ant-input,
+      .ant-input-group-addon {
+        border-color: var(--ant-error-color, #ff4d4f);
+      }
+    }
+  }
   .ant-input-group {
     .ant-input {
-      padding-right: 25px;
+      padding-right: 26px;
+    }
+  }
+
+  .trigger-no-hover {
+    &:hover {
+      .ant-input,
+      .ant-input-group-addon {
+        border-color: #d9d9d9;
+      }
     }
   }
 
@@ -54,7 +73,7 @@
   }
 
   .ant-input-group-addon {
-    padding: 0px 8px;
+    padding: 0px var(--zaui-space-size-md, 8px);
     background-color: var(--zaui-base-bg, #ffffff);
     cursor: pointer;
 

package/es/ProForm/components/combination/ProNumberRange/index.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ProNumberRangeProps } from './propsType';
-declare const ProNumberRange: (props: ProNumberRangeProps) => React.ReactNode;
+declare const ProNumberRange: (props: ProNumberRangeProps) => import("react").ReactNode;
 export default ProNumberRange;