ls-pro-common 1.1.3 → 3.0.0

package/es/components/DtlLayout.d.ts

@@ -6,15 +6,17 @@ export declare type DtlLyaoutProps = Record<string, any> & {
     onExit: (visible?: boolean) => void;
     /** 保存方法 */
     onSave?: () => void;
-    /** 自定义按钮方法 */
+    /** 自定义按钮方法,defaultBtn 默认有三个按钮，btnBack=返回，btnSave=保存，btnAudit=审核 */
     renderButton?: (defaultBtn: JSX.Element[]) => JSX.Element[];
     /** 审核方法 */
     onAudit?: () => void;
     /**按钮状态 */
     btnStatus?: (btnKey: string) => boolean | void;
-    /** 保存按钮文本 */
+    /** 保存按钮文本,默认为‘保存’,传入''时不展示 */
     btnSaveText?: string;
-    /** 返回按钮文本 */
+    /** 审核按钮文本,默认为‘审核’,传入''时不展示 */
+    btnAuditText?: string;
+    /** 返回按钮文本,默认为'返回' */
     btnExitText?: string;
     /** 标题 */
     title?: string;

package/es/components/DtlLayout.js

@@ -1,8 +1,10 @@
+import "antd/es/space/style";
+import _Space from "antd/es/space";
 import "antd/es/button/style";
 import _Button from "antd/es/button";
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
-import { LeftOutlined, SaveOutlined, AuditOutlined } from '@ant-design/icons';
+import { SaveOutlined, AuditOutlined, ArrowLeftOutlined } from '@ant-design/icons';
 import './common.less';
 import usePermission from '../hooks/usePermission';
 function DtlLayout(props) {
@@ -20,6 +22,8 @@ function DtlLayout(props) {
     btnSaveText = _props$btnSaveText === void 0 ? '保存' : _props$btnSaveText,
     _props$btnExitText = props.btnExitText,
     btnExitText = _props$btnExitText === void 0 ? '返回' : _props$btnExitText,
+    _props$btnAuditText = props.btnAuditText,
+    btnAuditText = _props$btnAuditText === void 0 ? '审核' : _props$btnAuditText,
     btnStatus = props.btnStatus,
     statusField = props.statusField,
     auditStatus = props.auditStatus,
@@ -47,18 +51,17 @@ function DtlLayout(props) {
     return isAudit();
   };
   var btns = useMemo(function () {
-    // const b = [
-    //   <Button
-    //     key="btnBack"
-    //     onClick={() => props.onExit(false)}
-    //     icon={<ArrowLeftOutlined />}>
-    //     {btnExitText}
-    //   </Button>
-    // ]
-    var b = [];
+    var back = /*#__PURE__*/React.createElement(_Button, {
+      key: "btnBack",
+      onClick: function onClick() {
+        return props.onExit(false);
+      },
+      icon: /*#__PURE__*/React.createElement(ArrowLeftOutlined, null)
+    }, btnExitText);
+    var btnList = [back];
     // 有新增或更改权限且未审核，开放出保存按钮
-    if ((checkRight(2) || checkRight(4)) && !isAudit() && !isView) {
-      b.unshift( /*#__PURE__*/React.createElement(_Button, {
+    if (btnSaveText && (checkRight(2) || checkRight(4)) && !isAudit() && !isView) {
+      btnList.unshift( /*#__PURE__*/React.createElement(_Button, {
         key: "btnSave",
         onClick: function onClick() {
           var _formRef$current;
@@ -72,8 +75,8 @@ function DtlLayout(props) {
       }, btnSaveText));
     }
     // 转入onAudit方法且有审核权限，数据未审核，开放出审核按钮
-    if (props.onAudit && checkRight(64) && !isAudit() && !isView) {
-      b.unshift( /*#__PURE__*/React.createElement(_Button, {
+    if (btnAuditText && props.onAudit && checkRight(64) && !isAudit() && !isView) {
+      btnList.unshift( /*#__PURE__*/React.createElement(_Button, {
         key: "btnAudit",
         disabled: btnDisabled('btnAudit'),
         onClick: function onClick() {
@@ -81,10 +84,16 @@ function DtlLayout(props) {
           props.onAudit();
         },
         icon: /*#__PURE__*/React.createElement(AuditOutlined, null)
-      }, "\u5BA1\u6838"));
+      }, btnAuditText));
     }
-    if (props.renderButton) return props.renderButton(b);
-    return b;
+    // 如果用户直接返回空，还是需要把返回按钮加上。
+    if (props.renderButton) {
+      btnList = props.renderButton(btnList);
+      if (!btnList || !btnList.length) {
+        btnList = [back];
+      }
+    }
+    return btnList;
   }, [props]);
   return /*#__PURE__*/React.createElement("div", {
     className: "dtl-layout"
@@ -92,16 +101,12 @@ function DtlLayout(props) {
     className: classNames('dtl-header', headerClass),
     style: headerStyle
   }, /*#__PURE__*/React.createElement("div", {
-    className: "dtl-back"
-  }, /*#__PURE__*/React.createElement(LeftOutlined, {
-    onClick: function onClick() {
-      return props.onExit(false);
-    }
-  })), /*#__PURE__*/React.createElement("div", {
     className: "dtl-title"
   }, dtlTitle), /*#__PURE__*/React.createElement("div", {
     className: "dtl-btns"
-  }, btns)), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(_Space, {
+    size: 8
+  }, btns))), /*#__PURE__*/React.createElement("div", {
     className: classNames('dtl-body', bodyClass),
     style: bodyStyle
   }, children));

package/es/components/GroupTip.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './common.less';
+export declare type GroupTitleProps = {
+    text: React.ReactNode | string;
+    className?: string;
+    style?: React.CSSProperties;
+    isInner?: boolean;
+};
+declare const GroupTip: React.FC<GroupTitleProps>;
+export default GroupTip;

package/es/components/GroupTip.js

@@ -0,0 +1,31 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React from 'react';
+import classNames from 'classnames';
+import './common.less';
+var GroupTip = function GroupTip(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    text = _ref.text,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    _ref$isInner = _ref.isInner,
+    isInner = _ref$isInner === void 0 ? true : _ref$isInner;
+  var cls = classNames('ls-group-tip', className);
+  var styles = isInner ? {} : {
+    paddingTop: '12px',
+    paddingLeft: '20px',
+    borderTopLeftRadius: '8px',
+    borderTopRightRadius: '8px'
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: cls,
+    style: _objectSpread(_objectSpread({}, styles), style)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ls-group-divider"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "ls-group-text"
+  }, text), children && /*#__PURE__*/React.createElement("div", {
+    className: "flex"
+  }, children));
+};
+export default GroupTip;

package/es/components/Permission.js

@@ -1,10 +1,13 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "rightValue"];
 import React from 'react';
 import usePermission from "../hooks/usePermission";
 var Permission = function Permission(_ref) {
   var children = _ref.children,
-    rightValue = _ref.rightValue;
+    rightValue = _ref.rightValue,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _usePermission = usePermission(),
     checkRight = _usePermission.checkRight;
-  return checkRight(rightValue) ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : null;
+  return checkRight(rightValue) ? /*#__PURE__*/React.createElement(React.Fragment, rest, children) : null;
 };
 export default Permission;

package/es/components/antd-custom.less

@@ -0,0 +1,207 @@
+.ant-timeline-item-tail {
+  border-left: 2px dotted var(--ant-primary-color);
+}
+
+.ant-timeline-item-head-blue {
+  background: var(--ant-primary-color);
+}
+
+.ant-row {
+  width: 100%;
+}
+
+.ant-popover {
+  max-width: min-content !important;
+}
+
+
+
+.ant-input-has-value:hover {
+  .ant-input-clear-icon {
+    visibility: visible;
+  }
+}
+
+.ant-modal-confirm-body {
+  .ant-modal-confirm-content {
+    max-height: 60vh;
+    overflow  : auto;
+  }
+}
+
+.ant-message-notice-content {
+  border-radius: 4px !important;
+}
+
+.ant-modal-content { 
+  border-radius: 8px !important;
+  // box-shadow   : 0px 4px 6px rgba(0, 0, 0, 0.05) !important;
+}
+
+.ant-input-number,
+.ant-input-affix-wrapper,
+.ant-picker,
+.ant-select-selector {
+  border-radius: 4px !important;
+}
+
+.ant-picker-range-separator {
+  padding: 0 2px !important;
+
+  .ant-picker-separator {
+    font-size: 14px;
+  }
+}
+
+
+.ant-btn {
+  height          : 32px;
+  background-color: #EAEEF2;
+  border-color    : transparent;
+  color           : #595959;
+  border-radius   : 4px;
+
+  &:hover,
+  &:focus {
+    background-color: #D2D6DD;
+    border-color    : transparent;
+    color           : #000;
+  }
+
+  &:active {
+    background-color: #B5BBC5;
+    border-color    : transparent;
+    color           : #141414;
+  }
+
+  &[disabled],
+  &[disabled]:hover,
+  &[disabled]:focus,
+  &[disabled]:active {
+    background-color: #D2D6DD;
+    border-color    : transparent;
+    color           : #BFBFBF;
+  }
+}
+
+.ant-btn-primary {
+  background-color: var(--ant-primary-color);
+  border-color    : transparent;
+  color           : #fff;
+
+  &:hover,
+  &:focus {
+    background-color: var(--ant-primary-color-hover);
+    border-color    : transparent;
+    color           : #fff;
+  }
+
+  &:active {
+    background-color: var(--ant-primary-color-active);
+    border-color    : transparent;
+    color           : #fff;
+  }
+
+  &[disabled],
+  &[disabled]:hover,
+  &[disabled]:focus,
+  &[disabled]:active {
+    background-color: rgba(24, 105, 237, 0.4);
+    border-color    : transparent;
+    color           : #fff;
+  }
+}
+
+.ant-btn-dangerous {
+  background-color: #FFCCC7;
+  border-color    : transparent;
+  color           : #F5222D;
+
+  &:hover,
+  &:focus {
+    background-color: #FFF1F0;
+    border-color    : transparent;
+    color           : #F5222D;
+  }
+
+  &:active {
+    background-color: #FFA39E;
+    border-color    : transparent;
+    color           : #F5222D;
+  }
+
+  &[disabled],
+  &[disabled]:hover,
+  &[disabled]:focus,
+  &[disabled]:active {
+    background-color: #FFCCC7;
+    border-color    : transparent;
+    color           : #FFA39E;
+  }
+}
+
+.ant-btn-link {
+  background-color: transparent;
+  border-color    : transparent;
+  color           : var(--ant-primary-color);
+  padding         : 4px 8px;
+
+  &[disabled],
+  &[disabled]:hover,
+  &[disabled]:focus,
+  &[disabled]:active,
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: transparent;
+    border-color    : transparent;
+  }
+
+  &:hover,
+  &:focus {
+    color: var(--ant-primary-color-hover);
+  }
+
+  &:active {
+    color: var(--ant-primary-color-active);
+  }
+
+  &[disabled],
+  &[disabled]:hover,
+  &[disabled]:focus,
+  &[disabled]:active {
+    color: #A7B5CC;
+  }
+}
+
+.ant-btn-text {
+  background-color: transparent;
+  border-color    : transparent;
+  color           : #8C8C8C;
+  padding         : 4px 8px;
+
+  &[disabled],
+  &[disabled]:hover,
+  &[disabled]:focus,
+  &[disabled]:active,
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: transparent;
+    border-color    : transparent;
+
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: var(--ant-primary-color-hover);
+  }
+
+  &[disabled],
+  &[disabled]:hover,
+  &[disabled]:focus,
+  &[disabled]:active {
+    color: #d9d9d9;
+  }
+}