linkmore-design/es/lm-filter/customFilter/valueDrawer.js

🌈 🚀lm组件库。🚀

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
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 _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useCallback, useEffect } from 'react';
import Form from "../../form";
import Button from "../../button";
import Radio from "../../radio";
import Space from "../../space";
import Drawer from "../../drawer";
import Controls from "../Controls";

// 第二层抽屉，弹出数据选择
var ValueDrawer = function ValueDrawer(_ref) {
  var instance = _ref.instance;
  var state = instance.state,
    dispatch = instance.dispatch,
    dataSource = instance.dataSource,
    locale = instance.locale;
  var valueDrawer = state.valueDrawer,
    customDrawer = state.customDrawer;
  var _Form$useForm = Form.useForm(),
    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
    form = _Form$useForm2[0];
  var onClose = function onClose() {
    dispatch({
      type: 'changeValueDrawer',
      valueDrawer: _objectSpread(_objectSpread({}, valueDrawer), {}, {
        visible: false
      })
    });
    form.resetFields();
  };

  /*
   * customModal.data.type === 'nested' 时,处理不同
   *
   */
  var onSave = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var _yield$form$validateF, mode, value, filterValues, currentItem, isNested, nField, nValue, _value$subValue;
      return _regeneratorRuntime.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;
            mode = _yield$form$validateF.mode;
            value = _yield$form$validateF.value;
            // 选中的筛选数据
            filterValues = _objectSpread({}, customDrawer.data); // 查找当前筛选的值
            currentItem = valueDrawer.data; // 是否嵌套筛选
            isNested = currentItem.type === 'nested'; // 嵌套筛选的键值不同
            nField = valueDrawer.data.field;
            nValue = value;
            if (isNested) {
              // 删除原有筛选
              delete filterValues[currentItem.field];
              currentItem.data.forEach(function (element) {
                delete filterValues[element.value];
              });
              // 存在子级嵌套时,改变键值
              if (value !== null && value !== void 0 && (_value$subValue = value.subValue) !== null && _value$subValue !== void 0 && _value$subValue.children) {
                nField = value.subValue.value;
              }
              nValue = (value === null || value === void 0 ? void 0 : value.value) || [];
            }

            // 判断是新增还是编辑
            Object.assign(filterValues, _defineProperty({}, nField, {
              mode: mode,
              value: nValue,
              originField: currentItem.field
            }));
            dispatch({
              type: 'changeCustomDrawer',
              customDrawer: _objectSpread(_objectSpread({}, state.customDrawer), {}, {
                data: filterValues
              })
            });
            onClose();
            _context.next = 20;
            break;
          case 17:
            _context.prev = 17;
            _context.t0 = _context["catch"](0);
            console.log('校验错误！', _context.t0);
          case 20:
          case "end":
            return _context.stop();
        }
      }, _callee, null, [[0, 17]]);
    }));
    return function onSave() {
      return _ref2.apply(this, arguments);
    };
  }();
  var onValuesChange = function onValuesChange(values) {
    if (values.field) {
      form.setFieldsValue({
        value: []
      });
    }
    if (values.value) {
      var _values$value;
      // 嵌套筛选双击触发
      if ((values === null || values === void 0 ? void 0 : (_values$value = values.value) === null || _values$value === void 0 ? void 0 : _values$value.type) === 'dbclick') {
        onSave();
      }
    }
  };

  // 动态展示选择框
  var DynamicSelect = useCallback(function (_ref3) {
    var getFieldValue = _ref3.getFieldValue;
    var field = getFieldValue('field');
    var findItem = (dataSource === null || dataSource === void 0 ? void 0 : dataSource.find(function (v) {
      return v.field === field;
    })) || {};
    var options = (findItem === null || findItem === void 0 ? void 0 : findItem.data) || [];
    if (field) {
      return /*#__PURE__*/React.createElement(Form.Item, {
        name: "value",
        label: locale.selectField,
        noStyle: true
      }, /*#__PURE__*/React.createElement(Controls, {
        item: findItem,
        options: options
      }));
    }
    return false;
  }, [dataSource]);
  var config = {
    title: valueDrawer.data.title,
    visible: valueDrawer.visible,
    onClose: onClose,
    className: 'lm_det_drawer',
    extra: /*#__PURE__*/React.createElement(Space, {
      size: 8
    }, /*#__PURE__*/React.createElement(Button, {
      key: "cancel",
      onClick: onClose,
      size: "small"
    }, locale.cancel), /*#__PURE__*/React.createElement(Button, {
      type: "primary",
      key: "back",
      onClick: onSave,
      size: "small"
    }, locale.ok))
  };

  // 初始化重置数据
  useEffect(function () {
    if (valueDrawer.visible) {
      form.setFieldsValue(valueDrawer.data);
    }
  }, [form, valueDrawer]);
  return /*#__PURE__*/React.createElement(Drawer, config, /*#__PURE__*/React.createElement(Form, {
    form: form,
    initialValues: {
      mode: 'or'
    },
    onValuesChange: onValuesChange,
    layout: "vertical",
    className: "custom_form"
  }, /*#__PURE__*/React.createElement("div", {
    className: "custom_group"
  }, /*#__PURE__*/React.createElement("div", {
    className: "custom_label"
  }, locale.queryMethods), /*#__PURE__*/React.createElement(Form.Item, {
    name: "mode",
    label: locale.queryMethods,
    noStyle: true
  }, /*#__PURE__*/React.createElement(Radio.Group, {
    direction: "column"
  }, /*#__PURE__*/React.createElement(Radio, {
    value: "and"
  }, locale.queryMethodsAnd), /*#__PURE__*/React.createElement(Radio, {
    value: "or"
  }, locale.queryMethodsOr)))), /*#__PURE__*/React.createElement("div", {
    className: "custom_group custom_full"
  }, /*#__PURE__*/React.createElement("div", {
    className: "custom_label"
  }, locale.selectField), /*#__PURE__*/React.createElement(Form.Item, {
    noStyle: true,
    shouldUpdate: function shouldUpdate(prevValues, currentValues) {
      return prevValues.field !== currentValues.field;
    }
  }, DynamicSelect))));
};
export default ValueDrawer;