@zgfe/modules-page 1.0.8-lijingyu1538.1 → 1.0.17-zhongyuan.3

package/dist/esm/components/groupModal/index.less

@@ -1,198 +1,198 @@
-@import '~@zgfe/business-lib/es/assets/styles/inner.less';
-.group-modal {
-  &-form-input {
-    width: 336px;
-    border-color: #fafafb;
-  }
-  &-form-title {
-    color: @text-color-secondary;
-    line-height: 1;
-  }
-
-  &-item {
-    &-container {
-      display: flex;
-      margin: 12px 0;
-    }
-
-    &-handle {
-      position: relative;
-      display: flex;
-      align-items: center;
-      width: 16px;
-      margin-right: 16px;
-      &::before {
-        position: absolute;
-        top: 0;
-        left: 50%;
-        width: 1px;
-        height: 100%;
-        background-color: #ecedf0;
-        content: '';
-      }
-
-      span {
-        z-index: 10;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 16px;
-        height: 16px;
-        font-size: 12px;
-        background: #e8efff;
-        border-radius: 3px;
-      }
-    }
-
-    &-content {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-      gap: 12px;
-      &-item {
-        display: flex;
-        gap: 16px;
-        &-input.ant-input {
-          width: 120px;
-          height: 32px;
-          border-color: #fafafb;
-          &.ant-input[disabled]:hover {
-            border-color: #fafafb;
-          }
-        }
-
-        &-operator {
-          &.ant-select.ant-select-in-form-item {
-            width: 104px;
-            height: 32px;
-          }
-        }
-        &-param {
-          &.ant-select.ant-select-in-form-item {
-            width: 300px;
-          }
-          width: 300px;
-          border-color: #fafafb;
-        }
-        .ant-select {
-          border-radius: 4px;
-
-          &.ant-select-status-error {
-            border-color: @error-color;
-            &.ant-select-focused {
-              box-shadow: 0 0 0 2px rgba(251, 85, 71, 0.2) !important;
-              .ant-select-selector {
-                box-shadow: none;
-              }
-            }
-            &:hover {
-              border-color: @error-color;
-            }
-          }
-        }
-        .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
-          height: 30px;
-          border: none;
-          border-radius: 4px;
-          box-shadow: none;
-        }
-      }
-    }
-
-    &-tip {
-      color: @error-color;
-    }
-
-    &-btn-add {
-      display: flex;
-      gap: 8px;
-      align-items: center;
-      width: fit-content;
-      height: 32px;
-      margin-bottom: 12px;
-      color: @primary-color;
-      cursor: pointer;
-
-      .bsicon {
-        font-size: 16px !important;
-      }
-    }
-
-    &-btn-del {
-      margin-top: 4px;
-      color: #9aa1a9;
-      font-size: 16px !important;
-      cursor: pointer;
-      &.disabled {
-        color: @disabled-color;
-        cursor: not-allowed;
-      }
-
-      &:not(.disabled):hover {
-        color: @error-color;
-      }
-    }
-
-    &-down-icon {
-      color: @text-color-secondary;
-    }
-  }
-
-  &-form-item-filter.ant-form-item {
-    margin-bottom: 12px;
-  }
-  &-dropdown {
-    width: 300px;
-    &-handle {
-      width: 300px;
-    }
-  }
-  &-dropdown-panel {
-    .__select-panel();
-  }
-
-  .ant-input {
-    border-color: #fafafb;
-    &:not([disabled]):hover,
-    &:not([disabled]):focus {
-      border-color: @primary-color;
-    }
-    &[disabled] {
-      color: #ccd0d4;
-      background: @background-color-gray;
-    }
-  }
-  .ant-modal-content {
-    .ant-modal-body {
-      padding-top: 8px;
-      padding-bottom: 0;
-    }
-    .ant-modal-footer {
-      padding: 24px !important;
-      border-top: 1px solid #f2f3f4 !important;
-
-      .group-modal-footer-del {
-        display: flex;
-        align-items: center;
-        float: left;
-        background: #f2f3f4 !important;
-        .bsicon {
-          margin-right: 8px;
-          font-size: 16px !important;
-          line-height: 1;
-        }
-        &.ant-btn-text[disabled]:hover {
-          color: rgba(0, 0, 0, 0.25) !important;
-        }
-        &.ant-btn-text:not([disabled]):hover {
-          color: #fb5547 !important;
-          background: #f2f3f4 !important;
-        }
-        &.ant-btn-text:not([disabled]):focus {
-          color: #e24c40 !important;
-          background: #f2f3f4 !important;
-        }
-      }
-    }
-  }
-}
+@import '~@zgfe/business-lib/es/assets/styles/inner.less';
+.group-modal {
+  &-form-input {
+    width: 336px;
+    border-color: #fafafb;
+  }
+  &-form-title {
+    color: @text-color-secondary;
+    line-height: 1;
+  }
+
+  &-item {
+    &-container {
+      display: flex;
+      margin: 12px 0;
+    }
+
+    &-handle {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 16px;
+      margin-right: 16px;
+      &::before {
+        position: absolute;
+        top: 0;
+        left: 50%;
+        width: 1px;
+        height: 100%;
+        background-color: #ecedf0;
+        content: '';
+      }
+
+      span {
+        z-index: 10;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 16px;
+        height: 16px;
+        font-size: 12px;
+        background: #e8efff;
+        border-radius: 3px;
+      }
+    }
+
+    &-content {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      gap: 12px;
+      &-item {
+        display: flex;
+        gap: 16px;
+        &-input.ant-input {
+          width: 120px;
+          height: 32px;
+          border-color: #fafafb;
+          &.ant-input[disabled]:hover {
+            border-color: #fafafb;
+          }
+        }
+
+        &-operator {
+          &.ant-select.ant-select-in-form-item {
+            width: 104px;
+            height: 32px;
+          }
+        }
+        &-param {
+          &.ant-select.ant-select-in-form-item {
+            width: 300px;
+          }
+          width: 300px;
+          border-color: #fafafb;
+        }
+        .ant-select {
+          border-radius: 4px;
+
+          &.ant-select-status-error {
+            border-color: @error-color;
+            &.ant-select-focused {
+              box-shadow: 0 0 0 2px rgba(251, 85, 71, 0.2) !important;
+              .ant-select-selector {
+                box-shadow: none;
+              }
+            }
+            &:hover {
+              border-color: @error-color;
+            }
+          }
+        }
+        .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
+          height: 30px;
+          border: none;
+          border-radius: 4px;
+          box-shadow: none;
+        }
+      }
+    }
+
+    &-tip {
+      color: @error-color;
+    }
+
+    &-btn-add {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      width: fit-content;
+      height: 32px;
+      margin-bottom: 12px;
+      color: @primary-color;
+      cursor: pointer;
+
+      .bsicon {
+        font-size: 16px !important;
+      }
+    }
+
+    &-btn-del {
+      margin-top: 4px;
+      color: #9aa1a9;
+      font-size: 16px !important;
+      cursor: pointer;
+      &.disabled {
+        color: @disabled-color;
+        cursor: not-allowed;
+      }
+
+      &:not(.disabled):hover {
+        color: @error-color;
+      }
+    }
+
+    &-down-icon {
+      color: @text-color-secondary;
+    }
+  }
+
+  &-form-item-filter.ant-form-item {
+    margin-bottom: 12px;
+  }
+  &-dropdown {
+    width: 300px;
+    &-handle {
+      width: 300px;
+    }
+  }
+  &-dropdown-panel {
+    .__select-panel();
+  }
+
+  .ant-input {
+    border-color: #fafafb;
+    &:not([disabled]):hover,
+    &:not([disabled]):focus {
+      border-color: @primary-color;
+    }
+    &[disabled] {
+      color: #ccd0d4;
+      background: @background-color-gray;
+    }
+  }
+  .ant-modal-content {
+    .ant-modal-body {
+      padding-top: 8px;
+      padding-bottom: 0;
+    }
+    .ant-modal-footer {
+      padding: 24px !important;
+      border-top: 1px solid #f2f3f4 !important;
+
+      .group-modal-footer-del {
+        display: flex;
+        align-items: center;
+        float: left;
+        background: #f2f3f4 !important;
+        .bsicon {
+          margin-right: 8px;
+          font-size: 16px !important;
+          line-height: 1;
+        }
+        &.ant-btn-text[disabled]:hover {
+          color: rgba(0, 0, 0, 0.25) !important;
+        }
+        &.ant-btn-text:not([disabled]):hover {
+          color: #fb5547 !important;
+          background: #f2f3f4 !important;
+        }
+        &.ant-btn-text:not([disabled]):focus {
+          color: #e24c40 !important;
+          background: #f2f3f4 !important;
+        }
+      }
+    }
+  }
+}

package/dist/esm/components/pageSelect/index.js

@@ -10,12 +10,14 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { BizSelect, IconFont } from '@zgfe/business-lib';
+import { BizSearchInput, BizSelect, IconFont } from '@zgfe/business-lib';
 import { pageTypes } from "../../constants";
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 import "./index.less";
 import { ModulesPageContext } from "../../modules/home/types";
-import { Tooltip } from 'antd';
+import { Dropdown, Tooltip } from 'antd';
+import VirtualList from 'rc-virtual-list';
+import _ from 'lodash';
 var PageSelect = function PageSelect(props) {
   // 当前类型
   var _useState = useState(pageTypes[0]),
@@ -37,6 +39,19 @@ var PageSelect = function PageSelect(props) {
     pageList = _useContext.pageList,
     pageGroupList = _useContext.pageGroupList,
     currentClickPage = _useContext.currentClickPage;
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    open = _useState8[0],
+    setOpen = _useState8[1];
+  var _useState9 = useState(),
+    _useState10 = _slicedToArray(_useState9, 2),
+    search = _useState10[0],
+    setSearch = _useState10[1];
+  var showList = useMemo(function () {
+    return pageList.filter(function (item) {
+      return !search || new RegExp(_.escapeRegExp(search), 'i').test(item.pageTitle || '');
+    });
+  }, [search, pageList]);
   useEffect(function () {
     var _props$value, _props$value2;
     var type = (_props$value = props.value) !== null && _props$value !== void 0 && _props$value.pageGroup || ((_props$value2 = props.value) === null || _props$value2 === void 0 ? void 0 : _props$value2.pageGroup) === 0 ? 1 : 0;
@@ -117,7 +132,59 @@ var PageSelect = function PageSelect(props) {
     onChange: function onChange(data) {
       return setCurrentType(data);
     }
-  }), /*#__PURE__*/React.createElement(BizSelect, {
+  }), currentType.value === 'page' ? /*#__PURE__*/React.createElement(Dropdown, {
+    trigger: ['click'],
+    open: open,
+    onOpenChange: function onOpenChange(status) {
+      setOpen(status);
+      if (!status) {
+        setSearch('');
+      }
+    },
+    dropdownRender: function dropdownRender() {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "".concat(classPrefix, "-overlay")
+      }, /*#__PURE__*/React.createElement(BizSearchInput, {
+        placeholder: "\u8BF7\u8F93\u5165",
+        className: "".concat(classPrefix, "-search"),
+        onChange: setSearch
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(classPrefix, "-opt-panel")
+      }, /*#__PURE__*/React.createElement(VirtualList, {
+        data: showList,
+        height: 408,
+        itemHeight: 48,
+        itemKey: "pageUrl"
+      }, function (item) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "".concat(classPrefix, "-opt ").concat((currentValue === null || currentValue === void 0 ? void 0 : currentValue.pageUrl) === (item === null || item === void 0 ? void 0 : item.pageUrl) ? 'active' : ''),
+          title: item === null || item === void 0 ? void 0 : item.pageTitle,
+          onClick: function onClick() {
+            setCurrentValue(item);
+            setOpen(false);
+            setSearch('');
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "".concat(classPrefix, "-tle"),
+          style: item.pageUrl ? undefined : {
+            height: '36px',
+            lineHeight: '36px'
+          }
+        }, item.pageTitle), item.pageUrl ? /*#__PURE__*/React.createElement("div", {
+          className: "".concat(classPrefix, "-url")
+        }, item.pageUrl) : null);
+      })));
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-handle")
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: currentValue === null || currentValue === void 0 ? void 0 : currentValue.pageTitle
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-val")
+  }, currentValue === null || currentValue === void 0 ? void 0 : currentValue.pageTitle)), /*#__PURE__*/React.createElement(IconFont, {
+    type: "xiangxia",
+    className: "".concat(classPrefix, "-icon")
+  }))) : /*#__PURE__*/React.createElement(BizSelect, {
     value: currentValue,
     className: "".concat(classPrefix, "-panel-page"),
     options: currentType.value === 'page' ? pageList : pageGroupList,

package/dist/esm/components/pageSelect/index.less

@@ -1,57 +1,109 @@
-@import '~@zgfe/business-lib/es/assets/styles/inner.less';
-
-.page-select {
-  &-panel {
-    display: flex;
-    align-items: center;
-    padding: 4px 24px;
-
-    &:hover {
-      background: #e8efff;
-    }
-    &-type {
-      width: 184px;
-      margin-right: 16px;
-    }
-
-    &-page {
-      min-width: 184px;
-      margin-right: 16px;
-    }
-
-    &-icon {
-      font-size: 20px !important;
-      .__icon();
-    }
-  }
-  .biz-attr-condition-group {
-    margin-top: 12px;
-  }
-  .biz-select-option {
-    height: auto;
-    &.active {
-      .page-select-select-option-content {
-        color: #fff;
-      }
-    }
-  }
-  &-select-option {
-    width: 100%;
-    padding: 6px 0;
-
-    &:hover .page-select-select-option-content {
-      color: @primary-color;
-    }
-    &-title {
-      line-height: 20px;
-      .__default-overflow();
-    }
-
-    &-content {
-      color: #67727f;
-      font-size: 12px;
-      line-height: 16px;
-      .__default-overflow();
-    }
-  }
-}
+@import '~@zgfe/business-lib/es/assets/styles/inner.less';
+
+.page-select {
+  &-panel {
+    display: flex;
+    align-items: center;
+    padding: 4px 24px;
+
+    &:hover {
+      background: #e8efff;
+    }
+    &-type {
+      width: 184px;
+      margin-right: 16px;
+    }
+
+    &-page {
+      min-width: 184px;
+      margin-right: 16px;
+    }
+
+    &-icon {
+      font-size: 20px !important;
+      .__icon();
+    }
+  }
+  .biz-attr-condition-group {
+    margin-top: 12px;
+  }
+  .biz-select-option {
+    height: auto;
+    &.active {
+      .page-select-select-option-content {
+        color: #fff;
+      }
+    }
+  }
+  &-select-option {
+    width: 100%;
+    padding: 6px 0;
+
+    &:hover .page-select-select-option-content {
+      color: @primary-color;
+    }
+    &-title {
+      line-height: 20px;
+      .__default-overflow();
+    }
+
+    &-content {
+      color: #67727f;
+      font-size: 12px;
+      line-height: 16px;
+      .__default-overflow();
+    }
+  }
+
+  &-handle {
+    display: flex;
+    flex-direction: row;
+    width: 184px;
+    height: 32px;
+    margin-right: @margin-md;
+    padding: 0 @padding-xs;
+    line-height: 32px;
+    .__select-handle();
+  }
+  &-val {
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  &-icon {
+    flex: none;
+    color: #5f6085;
+  }
+  &-overlay {
+    .__select-panel();
+    width: 400px;
+  }
+  &-search {
+    margin-bottom: @margin-xs;
+  }
+  &-opt {
+    .__select-option();
+    height: 48px;
+    padding: 6px @padding-xs;
+    line-height: normal;
+    &.active {
+      .page-select-url {
+        color: #fff;
+      }
+    }
+  }
+  &-tle {
+    line-height: 20px;
+  }
+  &-url {
+    color: #67727f;
+    font-size: 12px;
+    line-height: 16px;
+  }
+  &-tle,
+  &-url {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

package/dist/esm/components/searchPanel/index.js

@@ -42,11 +42,11 @@ var SearchPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }, 0);
   }, []);
 
-  /**
-   * 筛选值发生改变
-   * @param _changedValues 当前表单项改变后的值
-   * @param allValues 当前表单值
-   * @returns
+  /**
+   * 筛选值发生改变
+   * @param _changedValues 当前表单项改变后的值
+   * @param allValues 当前表单值
+   * @returns
    */
   var onChange = function onChange(_changedValues, allValues) {
     setFormData(allValues);