linkmore-design/lib/lm-filter/complexFilter/valueDrawer.js

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _index = require("../../index");
var _Controls = _interopRequireDefault(require("../Controls"));
// 第二层抽屉，弹出数据选择
const ValueDrawer = ({
  instance
}) => {
  const {
    state,
    dispatch,
    dataSource,
    locale
  } = instance;
  const {
    valueDrawer,
    complexDrawer
  } = state;
  const [form] = _index.Form.useForm();
  const onClose = () => {
    dispatch({
      type: 'changeValueDrawer',
      valueDrawer: {
        ...valueDrawer,
        visible: false
      }
    });
    form.resetFields();
  };

  /*
   * customModal.data.type === 'nested' 时,处理不同(未增加)
   *
   */
  const onSave = async () => {
    try {
      const {
        mode,
        value
      } = await form.validateFields();

      // 选中的筛选数据
      const filterValues = {
        ...complexDrawer.data
      };

      // 查找当前筛选的值
      const currentItem = valueDrawer.data;

      // 是否嵌套筛选
      const isNested = currentItem.type === 'nested';
      // 嵌套筛选的键值不同
      let nField = valueDrawer.data.field;
      let nValue = value;
      if (isNested) {
        // 删除原有筛选
        delete filterValues[currentItem.field];
        currentItem.data.forEach(element => {
          delete filterValues[element.value];
        });
        // 存在子级嵌套时,改变键值
        if (value?.subValue?.children) {
          nField = value.subValue.value;
        }
        nValue = value?.value || [];
      }

      // 判断是新增还是编辑
      Object.assign(filterValues, {
        [nField]: {
          mode,
          value: nValue,
          originField: currentItem.field
        }
      });
      dispatch({
        type: 'changeComplexDrawer',
        complexDrawer: {
          ...complexDrawer,
          data: filterValues
        }
      });
      onClose();
    } catch (error) {
      console.log('校验错误！', error);
    }
  };
  const onValuesChange = values => {
    if (values.field) {
      form.setFieldsValue({
        value: []
      });
    }
    if (values.value) {
      // 嵌套筛选双击触发
      if (values?.value?.type === 'dbclick') {
        onSave();
      }
    }
  };

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

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