linkmore-design 1.0.3

package/lib/CkFilter/components/modal.js

@@ -0,0 +1,275 @@
+"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;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+require("antd/es/radio/style");
+
+var _radio = _interopRequireDefault(require("antd/es/radio"));
+
+require("antd/es/select/style");
+
+var _select = _interopRequireDefault(require("antd/es/select"));
+
+require("antd/es/button/style");
+
+var _button = _interopRequireDefault(require("antd/es/button"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+require("antd/es/form/style");
+
+var _form = _interopRequireDefault(require("antd/es/form"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+require("antd/es/space/style");
+
+var _space = _interopRequireDefault(require("antd/es/space"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Modal = _interopRequireDefault(require("../../Modal"));
+
+var _context2 = require("../context");
+
+var _utils = require("../utils");
+
+var _excluded = ["field"];
+var EditModal = _Modal.default.EditModal;
+
+var ButtonTags = function ButtonTags(_ref) {
+  var value = _ref.value,
+      onChange = _ref.onChange,
+      options = _ref.options;
+
+  var handleClick = function handleClick(item) {
+    var oriValue = value || [];
+    var has = oriValue === null || oriValue === void 0 ? void 0 : oriValue.includes(item.value);
+    var nValue = has ? oriValue.filter(function (v) {
+      return v !== item.value;
+    }) : [].concat((0, _toConsumableArray2.default)(oriValue), [item.value]);
+    onChange === null || onChange === void 0 ? void 0 : onChange(nValue);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_space.default, {
+    size: 8,
+    wrap: true,
+    className: "auto_height"
+  }, options === null || options === void 0 ? void 0 : options.map(function (v) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: v.value,
+      className: (0, _classnames.default)('checkbox_tag', {
+        active: value === null || value === void 0 ? void 0 : value.includes(v.value)
+      }),
+      onClick: function onClick() {
+        return handleClick(v);
+      }
+    }, v.label);
+  })));
+};
+
+var ModalItem = function ModalItem() {
+  var _useStore = (0, _context2.useStore)(),
+      state = _useStore.state,
+      dispatch = _useStore.dispatch;
+
+  var customModal = state.customModal,
+      customDrawer = state.customDrawer,
+      complexDrawer = state.complexDrawer,
+      instance = state.instance;
+
+  var _Form$useForm = _form.default.useForm(),
+      _Form$useForm2 = (0, _slicedToArray2.default)(_Form$useForm, 1),
+      form = _Form$useForm2[0]; // 是否编辑
+
+
+  var isEdit = (0, _react.useMemo)(function () {
+    var type = customModal.type,
+        data = customModal.data;
+    return type === 'complex' || (0, _utils.getIsHas)(data);
+  }, [customModal]);
+
+  var onClose = function onClose() {
+    dispatch({
+      type: 'changeModal',
+      customModal: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, customModal), {}, {
+        visible: false
+      })
+    });
+    form.resetFields();
+  };
+
+  var onSave = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var _yield$form$validateF, field, values, filterValues;
+
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return form.validateFields();
+
+            case 3:
+              _yield$form$validateF = _context.sent;
+              field = _yield$form$validateF.field;
+              values = (0, _objectWithoutProperties2.default)(_yield$form$validateF, _excluded);
+              filterValues = customModal.type === 'complex' ? (0, _objectSpread2.default)({}, complexDrawer.data) : (0, _objectSpread2.default)({}, customDrawer.data.filterValues); // 判断是新增还是编辑
+
+              if (isEdit) {
+                Object.assign(filterValues, (0, _defineProperty2.default)({}, customModal.data.field, values));
+              } else {
+                Object.assign(filterValues, (0, _defineProperty2.default)({}, field, values));
+              }
+
+              if (customModal.type === 'complex') {
+                dispatch({
+                  type: 'changeComplexDrawer',
+                  complexDrawer: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, complexDrawer), {}, {
+                    data: filterValues
+                  })
+                });
+              } else {
+                dispatch({
+                  type: 'changeDrawer',
+                  customDrawer: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, customDrawer), {}, {
+                    data: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, customDrawer.data), {}, {
+                      filterValues: filterValues
+                    })
+                  })
+                });
+              }
+
+              onClose();
+              _context.next = 15;
+              break;
+
+            case 12:
+              _context.prev = 12;
+              _context.t0 = _context["catch"](0);
+              console.log('校验错误！', _context.t0);
+
+            case 15:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 12]]);
+    }));
+
+    return function onSave() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var onValuesChange = function onValuesChange(values) {
+    if (values.field) {
+      form.setFieldsValue({
+        value: []
+      });
+    }
+  }; // 动态展示选择框
+
+
+  var DynamicSelect = (0, _react.useCallback)(function (_ref3) {
+    var _instance$fullData$fi;
+
+    var getFieldValue = _ref3.getFieldValue;
+    var field = getFieldValue('field');
+    var options = ((_instance$fullData$fi = instance.fullData.find(function (v) {
+      return v.field === field;
+    })) === null || _instance$fullData$fi === void 0 ? void 0 : _instance$fullData$fi.data) || [];
+
+    if (field) {
+      return /*#__PURE__*/_react.default.createElement(_form.default.Item, {
+        name: "value",
+        label: "\u9009\u62E9\u5B57\u6BB5\u503C"
+      }, /*#__PURE__*/_react.default.createElement(ButtonTags, {
+        options: options
+      }));
+    }
+
+    return false;
+  }, [instance.fullData]);
+  var config = {
+    title: isEdit ? '编辑' : '新增查询项',
+    visible: customModal.visible,
+    onCancel: onClose,
+    bodyStyle: {
+      padding: 24
+    },
+    zIndex: 2001,
+    footer: [/*#__PURE__*/_react.default.createElement(_button.default, {
+      key: "cancel",
+      onClick: onClose,
+      size: "middle"
+    }, "\u53D6\u6D88"), /*#__PURE__*/_react.default.createElement(_button.default, {
+      type: "primary",
+      key: "back",
+      onClick: onSave,
+      size: "middle"
+    }, "\u786E\u5B9A")]
+  }; // 初始化重置数据
+
+  (0, _react.useEffect)(function () {
+    if (customModal.visible) {
+      form.setFieldsValue(customModal.data);
+    }
+  }, [form, customModal]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(EditModal, config, /*#__PURE__*/_react.default.createElement("div", {
+    className: "custom_modal"
+  }, /*#__PURE__*/_react.default.createElement(_form.default, {
+    form: form,
+    initialValues: {
+      mode: 'or'
+    },
+    onValuesChange: onValuesChange,
+    layout: "vertical",
+    size: "default"
+  }, !isEdit && /*#__PURE__*/_react.default.createElement(_form.default.Item, {
+    name: "field",
+    label: "\u9009\u62E9\u5B57\u6BB5"
+  }, /*#__PURE__*/_react.default.createElement(_select.default, null, state.instance.fullData.map(function (v) {
+    return /*#__PURE__*/_react.default.createElement(_select.default.Option, {
+      key: v.field,
+      value: v.field
+    }, v.title);
+  }))), /*#__PURE__*/_react.default.createElement(_form.default.Item, {
+    noStyle: true,
+    shouldUpdate: function shouldUpdate(prevValues, currentValues) {
+      return prevValues.field !== currentValues.field;
+    }
+  }, DynamicSelect), /*#__PURE__*/_react.default.createElement(_form.default.Item, {
+    name: "mode",
+    label: "\u67E5\u8BE2\u65B9\u5F0F"
+  }, /*#__PURE__*/_react.default.createElement(_radio.default.Group, null, /*#__PURE__*/_react.default.createElement(_space.default, {
+    direction: "vertical"
+  }, /*#__PURE__*/_react.default.createElement(_radio.default, {
+    value: "and"
+  }, "\u4E14,\u67E5\u8BE2\u540C\u65F6\u6EE1\u8DB3\u6B64\u9009\u9879\u6761\u4EF6"), /*#__PURE__*/_react.default.createElement(_radio.default, {
+    value: "or"
+  }, "\u6216,\u67E5\u8BE2\u5305\u542B\u6B64\u9009\u9879\u6761\u4EF6"))))))));
+};
+
+var _default = ModalItem;
+exports.default = _default;

package/lib/CkFilter/context.js

@@ -0,0 +1,152 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStore = exports.useContent = exports.Context = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _react = require("react");
+
+// store.js
+// 配合Context 进行状态管理
+var initialState = {
+  originProps: {
+    data: []
+  },
+  // 原始数据
+  instance: {
+    data: [],
+    fullData: [],
+    filterValues: {},
+    placeholder: '请输入',
+    custom: false,
+    levelGroup: false,
+    search: true,
+    searchKey: 'search',
+    levelGroupKey: 'levGroup',
+    filter: true,
+    complex: true
+  },
+  // 初始化数据
+  visibleFields: [],
+  // 显示的字段
+  orderFields: [],
+  // 排序的字段
+  isMore: false,
+  // 是否展示更多筛选项, 数量大于5时展示
+  filterValues: {},
+  // 当前过滤的数据的键值对(二级筛选)
+  customFilterValues: {},
+  // 一级筛选过滤的内容
+  complexFilterValues: {},
+  // 高级筛选过滤的内容
+  customDrawer: {
+    visible: false,
+    data: {}
+  },
+  // 抽屉数据
+  customModal: {
+    visible: false,
+    type: 'custom',
+    data: {}
+  },
+  // 弹窗数据
+  complexDrawer: {
+    visible: false,
+    data: {}
+  } // 高级筛选弹窗数据
+
+};
+
+var reducer = function reducer(state, action) {
+  var options = action.options,
+      instance = action.instance,
+      filterValues = action.filterValues,
+      visibleFields = action.visibleFields,
+      orderFields = action.orderFields,
+      customDrawer = action.customDrawer,
+      customModal = action.customModal,
+      complexDrawer = action.complexDrawer,
+      customFilterValues = action.customFilterValues,
+      complexFilterValues = action.complexFilterValues;
+
+  switch (action.type) {
+    // 仅在初始化时触发
+    case 'initOptions':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), options);
+
+    case 'initInstance':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        originProps: instance,
+        instance: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state.instance), instance)
+      });
+
+    case 'changeInstance':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        instance: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state.instance), instance)
+      });
+
+    case 'changeFilterValues':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        filterValues: filterValues
+      });
+
+    case 'changeVisibleFields':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        visibleFields: visibleFields
+      });
+
+    case 'changeOrderFields':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        orderFields: orderFields
+      });
+    // 自定义筛选事件
+
+    case 'changeDrawer':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        customDrawer: customDrawer
+      });
+
+    case 'changeModal':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        customModal: customModal
+      });
+
+    case 'changeCustomFilterValues':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        customFilterValues: customFilterValues
+      });
+    // 高级筛选事件
+
+    case 'changeComplexDrawer':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        complexDrawer: complexDrawer
+      });
+
+    case 'changeComplexFilterValues':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        complexFilterValues: complexFilterValues
+      });
+
+    default:
+      throw new Error();
+  }
+};
+
+var useContent = function useContent() {
+  return (0, _react.useReducer)(reducer, initialState);
+};
+
+exports.useContent = useContent;
+var Context = /*#__PURE__*/(0, _react.createContext)();
+exports.Context = Context;
+
+var useStore = function useStore() {
+  return (0, _react.useContext)(Context);
+};
+
+exports.useStore = useStore;