linkmore-design/es/advanced-filter/components/Complex/ComplexRender.js

🌈 🚀lm组件库。🚀

import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { useMemoizedFn } from 'ahooks';
import intersectionBy from 'lodash/intersectionBy';
import omit from 'lodash/omit';
import pick from 'lodash/pick';
import uniqBy from 'lodash/uniqBy';
import React, { useMemo, useState } from 'react';
import Button from "../../../button";
import Form from "../../../form";
import IconFont from "../../../icon-font";
import Select from "../../../select";
import { DYNAMIC_ENUM, FIELD_ENUM, initialFieldsValue } from "../../constants";
import Control from "../../controls";
import { flatDeepDeps, getFilterKeyValue, getUpdateResult } from "../../utils";
import DynamicComponent from "./DynamicComponent";
/** 头部区域 */
var ComplexHeader = function ComplexHeader(_ref) {
  var locale = _ref.locale;
  return /*#__PURE__*/React.createElement("div", {
    className: "complex_header"
  }, /*#__PURE__*/React.createElement("div", {
    className: "header_title"
  }, locale.complex), /*#__PURE__*/React.createElement("div", {
    className: "header_condition_group"
  }, /*#__PURE__*/React.createElement("span", null, locale.accordWith), /*#__PURE__*/React.createElement("div", {
    className: "condition_select"
  }, /*#__PURE__*/React.createElement(Form.Item, {
    name: [FIELD_ENUM.COMPLEX, FIELD_ENUM.RELATION],
    noStyle: true
  }, /*#__PURE__*/React.createElement(Select, {
    options: [{
      label: locale.and,
      value: 'and'
    }, {
      label: locale.or,
      value: 'or'
    }]
  }))), /*#__PURE__*/React.createElement("span", null, locale.condition)));
};

/** 手动调用获取
 * 'contains'/'in'仅存在其一, key用于唯一值
 * 结果取交集, 以组件类型获取的操作符为主
 */
var getOperatorOption = function getOperatorOption(_ref2) {
  var type = _ref2.type,
    fieldType = _ref2.fieldType,
    locale = _ref2.locale;
  // 根据组件类型获取操作符
  var actionByType = function actionByType(typeParam) {
    if (['input'].includes(typeParam)) {
      return [{
        label: locale.equal,
        value: 'equal'
      }, {
        label: locale.notEqual,
        value: 'not_equal'
      }, {
        label: locale.startsWith,
        value: 'starts_with'
      }, {
        label: locale.endsWith,
        value: 'ends_with'
      }, {
        key: 'in',
        label: locale.contains,
        value: 'contains'
      }, {
        key: 'not_in',
        label: locale.notContains,
        value: 'not_contains'
      }, {
        label: locale.empty,
        value: 'empty'
      }, {
        label: locale.notEmpty,
        value: 'not_empty'
      }];
    }
    if (['select', 'checkbox', 'cascader'].includes(typeParam)) {
      return [{
        label: locale.equal,
        value: 'equal'
      }, {
        label: locale.notEqual,
        value: 'not_equal'
      }, {
        label: locale.contains,
        value: 'in'
      }, {
        label: locale.notContains,
        value: 'not_in'
      }, {
        label: locale.empty,
        value: 'empty'
      }, {
        label: locale.notEmpty,
        value: 'not_empty'
      }];
    }
    if (['date', 'datetime', 'range', 'dateRange'].includes(typeParam)) {
      return [{
        label: locale.equal,
        value: 'equal'
      }, {
        label: locale.notEqual,
        value: 'not_equal'
      }, {
        label: locale.lessThan,
        value: 'less_than_or_equal'
      }, {
        label: locale.greaterThan,
        value: 'greater_than_or_equal'
      }, {
        label: locale.between,
        value: 'between'
      }, {
        label: locale.empty,
        value: 'empty'
      }, {
        label: locale.notEmpty,
        value: 'not_empty'
      }];
    }
    if (['number', 'numberRange'].includes(typeParam)) {
      return [{
        label: '=',
        value: 'equal'
      }, {
        label: '≠',
        value: 'not_equal'
      }, {
        label: '>',
        value: 'greater_than'
      }, {
        label: '≧',
        value: 'greater_than_or_equal'
      }, {
        label: '<',
        value: 'less_than'
      }, {
        label: '≦',
        value: 'less_than_or_equal'
      }, {
        label: locale.empty,
        value: 'empty'
      }, {
        label: locale.notEmpty,
        value: 'not_empty'
      }];
    }
    return [];
  };

  // 根据字段类型获取操作符
  var actionByFieldType = function actionByFieldType(param) {
    if (['string'].includes(param)) {
      return [{
        label: locale.equal,
        value: 'equal'
      }, {
        label: locale.notEqual,
        value: 'not_equal'
      }, {
        label: locale.startsWith,
        value: 'starts_with'
      }, {
        label: locale.endsWith,
        value: 'ends_with'
      }, {
        key: 'in',
        label: locale.contains,
        value: 'contains'
      }, {
        key: 'not_in',
        label: locale.notContains,
        value: 'not_contains'
      }, {
        label: locale.between,
        value: 'between'
      }, {
        label: locale.empty,
        value: 'empty'
      }, {
        label: locale.notEmpty,
        value: 'not_empty'
      }];
    }
    if (['integer', 'double'].includes(param)) {
      return [{
        label: '=',
        value: 'equal'
      }, {
        label: '≠',
        value: 'not_equal'
      }, {
        label: '>',
        value: 'greater_than'
      }, {
        label: '≧',
        value: 'greater_than_or_equal'
      }, {
        label: '<',
        value: 'less_than'
      }, {
        label: '≦',
        value: 'less_than_or_equal'
      }, {
        label: locale.contains,
        value: 'in'
      }, {
        label: locale.notContains,
        value: 'not_in'
      }, {
        label: locale.empty,
        value: 'empty'
      }, {
        label: locale.notEmpty,
        value: 'not_empty'
      }];
    }
    if (['guid'].includes(param)) {
      return [{
        label: locale.equal,
        value: 'equal'
      }, {
        label: locale.notEqual,
        value: 'not_equal'
      }, {
        label: locale.contains,
        value: 'in'
      }, {
        label: locale.notContains,
        value: 'not_in'
      }, {
        label: locale.between,
        value: 'between'
      }, {
        label: locale.empty,
        value: 'empty'
      }, {
        label: locale.notEmpty,
        value: 'not_empty'
      }];
    }
    if (['date', 'datetime'].includes(param)) {
      return [{
        label: locale.equal,
        value: 'equal'
      }, {
        label: locale.notEqual,
        value: 'not_equal'
      }, {
        label: locale.lessThan,
        value: 'less_than_or_equal'
      }, {
        label: locale.greaterThan,
        value: 'greater_than_or_equal'
      }, {
        label: locale.between,
        value: 'between'
      }, {
        label: locale.contains,
        value: 'in'
      }, {
        label: locale.notContains,
        value: 'not_in'
      }, {
        label: locale.empty,
        value: 'empty'
      }, {
        label: locale.notEmpty,
        value: 'not_empty'
      }];
    }
    if (['boolean'].includes(param)) {
      return [{
        label: locale.equal,
        value: 'equal'
      }, {
        label: locale.notEqual,
        value: 'not_equal'
      }, {
        label: locale.contains,
        value: 'in'
      }, {
        label: locale.notContains,
        value: 'not_in'
      }, {
        label: locale.empty,
        value: 'empty'
      }, {
        label: locale.notEmpty,
        value: 'not_empty'
      }];
    }
    if (['json'].includes(param)) {
      return [{
        label: locale.equal,
        value: 'equal'
      }, {
        label: locale.notEqual,
        value: 'not_equal'
      }, {
        label: locale.contains,
        value: 'in'
      }, {
        label: locale.notContains,
        value: 'not_in'
      }, {
        label: locale.empty,
        value: 'empty'
      }, {
        label: locale.notEmpty,
        value: 'not_empty'
      }];
    }
    return [];
  };
  var typeOptions = actionByType(type).map(function (item) {
    return _objectSpread(_objectSpread({}, item), {}, {
      key: item.key || item.value
    });
  });
  var fieldOptions = actionByFieldType(fieldType).map(function (item) {
    return _objectSpread(_objectSpread({}, item), {}, {
      key: item.key || item.value
    });
  });
  return intersectionBy(typeOptions, fieldOptions, 'key');
};

/** 强依赖form获取, 仅在form组件内使用 */
var useOperatorOptions = function useOperatorOptions(_ref3) {
  var name = _ref3.name,
    locale = _ref3.locale;
  var type = Form.useWatch([FIELD_ENUM.COMPLEX, FIELD_ENUM.CONDITIONS, name, 'type']);
  var fieldType = Form.useWatch([FIELD_ENUM.COMPLEX, FIELD_ENUM.CONDITIONS, name, 'fieldType']);
  return useMemo(function () {
    return getOperatorOption({
      type: type,
      fieldType: fieldType,
      locale: locale
    });
  }, [type, fieldType]);
};

/** 表单 fieldName 字段项 */
var FieldItem = function FieldItem(_ref4) {
  var name = _ref4.name,
    options = _ref4.options;
  var form = Form.useFormInstance();
  var fieldNames = {
    label: 'title',
    value: DYNAMIC_ENUM.FIELD_NAME,
    fieldType: DYNAMIC_ENUM.FIELD_TYPE
  };

  /** 前置更新: 赋值type、fieldType、operator */
  var beforeShouldUpdate = function beforeShouldUpdate(value) {
    var prevCheckedItem = form.getFieldValue([FIELD_ENUM.COMPLEX, FIELD_ENUM.CONDITIONS, name]) || {};
    var prevType = prevCheckedItem[DYNAMIC_ENUM.TYPE];
    var prevFieldType = prevCheckedItem[DYNAMIC_ENUM.FIELD_TYPE];
    var prevOperator = prevCheckedItem[DYNAMIC_ENUM.OPERATOR];
    var option = options.find(function (option) {
      return option[fieldNames.value] === value;
    }) || {};
    var currType = option.type;
    var currFieldType = option[fieldNames.fieldType];
    var currTableObj = option[DYNAMIC_ENUM.TABLE_OBJ];
    var equalType = prevType === currType;
    var equalFieldType = prevFieldType === currFieldType;
    var isInput = equalType && currType === 'input';
    form.setFieldValue([FIELD_ENUM.COMPLEX, FIELD_ENUM.CONDITIONS, name, DYNAMIC_ENUM.TABLE_OBJ], currTableObj);
    if (!isInput) {
      form.setFieldValue([FIELD_ENUM.COMPLEX, FIELD_ENUM.CONDITIONS, name, DYNAMIC_ENUM.VALUE], undefined);
    }
    if (!equalType) {
      form.setFieldValue([FIELD_ENUM.COMPLEX, FIELD_ENUM.CONDITIONS, name, DYNAMIC_ENUM.TYPE], currType);
    }
    if (!equalType || !equalFieldType) {
      var exciting = getOperatorOption({
        type: currType,
        fieldType: currFieldType,
        locale: {}
      }).some(function (option) {
        return option.value === prevOperator;
      });
      if (!exciting) {
        form.setFieldValue([FIELD_ENUM.COMPLEX, FIELD_ENUM.CONDITIONS, name, DYNAMIC_ENUM.OPERATOR], undefined);
      }
      form.setFieldValue([FIELD_ENUM.COMPLEX, FIELD_ENUM.CONDITIONS, name, DYNAMIC_ENUM.FIELD_TYPE], currFieldType);
    }
  };

  // 在此处set防止数据更新不及时
  var normalize = function normalize(value) {
    beforeShouldUpdate(value);
    return value;
  };
  return /*#__PURE__*/React.createElement(Form.Item, {
    name: [name, 'fieldName'],
    noStyle: true,
    normalize: normalize
  }, /*#__PURE__*/React.createElement(Select, {
    showSearch: true,
    options: options,
    fieldNames: fieldNames,
    optionFilterProp: fieldNames.label
  }));
};

/** 表单 operator 操作符字段项 */
var OperatorItem = function OperatorItem(_ref5) {
  var name = _ref5.name,
    locale = _ref5.locale;
  var form = Form.useFormInstance();
  var options = useOperatorOptions({
    name: name,
    locale: locale
  });

  // 数据保存时的格式化
  var normalize = function normalize(value, prev) {
    // 从 between 操作符切换时清空value(因为value组件不一样,值也不一样)
    var prevCheckedItem = form.getFieldValue([FIELD_ENUM.COMPLEX, FIELD_ENUM.CONDITIONS, name]) || {};

    /**
     * input、number切换条件时无需清空
     * 切换为'空'/'不为空'时, 清空value
     */
    if (!['input', 'number'].includes(prevCheckedItem[DYNAMIC_ENUM.TYPE]) || ['empty', 'not_empty'].includes(value)) {
      form.setFieldValue([FIELD_ENUM.COMPLEX, FIELD_ENUM.CONDITIONS, name, DYNAMIC_ENUM.VALUE], undefined);
    }
    return value;
  };
  return /*#__PURE__*/React.createElement(Form.Item, {
    name: [name, DYNAMIC_ENUM.OPERATOR],
    noStyle: true,
    normalize: normalize
  }, /*#__PURE__*/React.createElement(Select, {
    showSearch: true,
    optionFilterProp: "label",
    options: options
  }));
};
var DynamicValueItem = function DynamicValueItem(_ref6) {
  var name = _ref6.name,
    dataSource = _ref6.dataSource;
  var form = Form.useFormInstance();
  // 动态的字段 DYNAMIC_ENUM
  var complexItem = Form.useWatch([FIELD_ENUM.COMPLEX, FIELD_ENUM.CONDITIONS, name]) || {};

  // 从来源数据取配置参数: onOpenChange…
  var itemProps = useMemo(function () {
    var origin = complexItem;
    if (Array.isArray(dataSource)) {
      // 匹配所需要的参数 options、multiple、……
      origin = dataSource.find(function (v) {
        return v[DYNAMIC_ENUM.FIELD_NAME] === complexItem[DYNAMIC_ENUM.FIELD_NAME];
      });
    }

    // 为空、不为空时不可编辑
    var disabled = ['empty', 'not_empty'].includes(complexItem[DYNAMIC_ENUM.OPERATOR]);
    origin = _objectSpread(_objectSpread({}, origin), {}, {
      disabled: disabled
    });

    // 参数再调整, 用于改变使用组件类型
    if (['select', 'checkbox'].includes(complexItem[DYNAMIC_ENUM.TYPE])) {
      var isMultiple = ['in', 'not_in'].includes(complexItem[DYNAMIC_ENUM.OPERATOR]);
      origin[DYNAMIC_ENUM.TYPE] = isMultiple ? 'checkbox' : 'select';
    }
    if (['cascader'].includes(complexItem[DYNAMIC_ENUM.TYPE])) {
      // 特殊处理: 高级筛选级联组件为json类型的查询时重置为多选
      var isJson = ['json'].includes(complexItem[DYNAMIC_ENUM.FIELD_TYPE]);
      var _isMultiple = ['in', 'not_in'].includes(complexItem[DYNAMIC_ENUM.OPERATOR]);
      origin.multiple = isJson || _isMultiple;
    }
    if (['date', 'range', 'dateRange'].includes(complexItem[DYNAMIC_ENUM.TYPE])) {
      var isRange = complexItem[DYNAMIC_ENUM.OPERATOR] === 'between';
      origin[DYNAMIC_ENUM.TYPE] = isRange ? 'range' : 'date';
    }
    return omit(origin, [DYNAMIC_ENUM.FIELD_NAME, DYNAMIC_ENUM.FIELD_TYPE, DYNAMIC_ENUM.OPERATOR, DYNAMIC_ENUM.RELATION, DYNAMIC_ENUM.TABLE_OBJ]);
  }, [dataSource, complexItem]);
  var handleOpenChange = function handleOpenChange(open) {
    var _itemProps$onOpenChan;
    var conditions = form.getFieldValue([FIELD_ENUM.COMPLEX, FIELD_ENUM.CONDITIONS]) || [];
    var values = getFilterKeyValue(conditions);
    (_itemProps$onOpenChan = itemProps.onOpenChange) === null || _itemProps$onOpenChan === void 0 ? void 0 : _itemProps$onOpenChan.call(itemProps, open, values);
  };
  var shouldUpdate = useMemoizedFn(function () {
    var updateFields = flatDeepDeps(complexItem[DYNAMIC_ENUM.FIELD_NAME], dataSource);
    var conditions = form.getFieldValue([FIELD_ENUM.COMPLEX, FIELD_ENUM.CONDITIONS]) || [];
    var resetConditions = getUpdateResult(updateFields, conditions);
    if (resetConditions !== null && resetConditions !== void 0 && resetConditions.length) {
      form.setFieldValue([FIELD_ENUM.COMPLEX, FIELD_ENUM.CONDITIONS], resetConditions);
    }
  });
  var normalize = function normalize(value) {
    shouldUpdate();
    if (Array.isArray(value) && !value.length) return undefined;
    return value;
  };
  return /*#__PURE__*/React.createElement(Form.Item, {
    name: [name, 'value'],
    noStyle: true,
    normalize: normalize
  }, /*#__PURE__*/React.createElement(DynamicComponent, _extends({}, itemProps, {
    onOpenChange: handleOpenChange
  })));
};

/** 主体区域 */
var ComplexBody = function ComplexBody(props) {
  var dataSource = props.dataSource,
    locale = props.locale;
  var fieldOptions = useMemo(function () {
    var uniqDataSource = uniqBy(dataSource, DYNAMIC_ENUM.FIELD_NAME);
    return uniqDataSource.map(function (item) {
      return pick(item, ['title', DYNAMIC_ENUM.FIELD_NAME, DYNAMIC_ENUM.TYPE, DYNAMIC_ENUM.FIELD_TYPE, DYNAMIC_ENUM.TABLE_OBJ]);
    });
  }, [dataSource]);
  return /*#__PURE__*/React.createElement("div", {
    className: "complex_body"
  }, /*#__PURE__*/React.createElement(Form.List, {
    name: [FIELD_ENUM.COMPLEX, FIELD_ENUM.CONDITIONS],
    initialValue: [{}]
  }, function (fields, _ref7) {
    var add = _ref7.add,
      remove = _ref7.remove;
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
      className: "complex_list"
    }, fields.map(function (_ref8) {
      var key = _ref8.key,
        name = _ref8.name;
      return /*#__PURE__*/React.createElement("div", {
        key: key,
        className: "complex_list_item"
      }, /*#__PURE__*/React.createElement(FieldItem, {
        name: name,
        options: fieldOptions
      }), /*#__PURE__*/React.createElement(Form.Item, {
        name: [name, DYNAMIC_ENUM.FIELD_TYPE],
        noStyle: true
      }), /*#__PURE__*/React.createElement(Form.Item, {
        name: [name, DYNAMIC_ENUM.RELATION],
        noStyle: true
      }), /*#__PURE__*/React.createElement(Form.Item, {
        name: [name, DYNAMIC_ENUM.TABLE_OBJ],
        noStyle: true
      }), /*#__PURE__*/React.createElement(OperatorItem, {
        name: name,
        locale: locale
      }), /*#__PURE__*/React.createElement(Form.Item, {
        name: [name, 'type'],
        noStyle: true
      }), /*#__PURE__*/React.createElement(DynamicValueItem, {
        name: name,
        dataSource: dataSource
      }), /*#__PURE__*/React.createElement(Button, {
        type: "text",
        danger: true,
        icon: /*#__PURE__*/React.createElement(IconFont, {
          type: "icon-a-shidia1qingchu"
        }),
        onClick: function onClick() {
          return remove(name);
        }
      }));
    })), /*#__PURE__*/React.createElement(Control, {
      type: "select",
      options: fieldOptions,
      fieldNames: {
        label: 'title',
        value: DYNAMIC_ENUM.FIELD_NAME
      },
      onChange: function onChange(fieldName, option) {
        var _add;
        return add((_add = {}, _defineProperty(_add, DYNAMIC_ENUM.FIELD_NAME, option[DYNAMIC_ENUM.FIELD_NAME]), _defineProperty(_add, DYNAMIC_ENUM.TYPE, option[DYNAMIC_ENUM.TYPE]), _defineProperty(_add, DYNAMIC_ENUM.FIELD_TYPE, option[DYNAMIC_ENUM.FIELD_TYPE] || initialFieldsValue[DYNAMIC_ENUM.FIELD_TYPE]), _defineProperty(_add, DYNAMIC_ENUM.OPERATOR, option[DYNAMIC_ENUM.OPERATOR] || initialFieldsValue[DYNAMIC_ENUM.OPERATOR]), _defineProperty(_add, DYNAMIC_ENUM.RELATION, option[DYNAMIC_ENUM.RELATION] || initialFieldsValue[DYNAMIC_ENUM.RELATION]), _add));
      },
      showSearch: false
    }, /*#__PURE__*/React.createElement(Button, {
      type: "dashed",
      icon: /*#__PURE__*/React.createElement(IconFont, {
        type: "icon-a-tongyonga0xinzeng"
      })
    }, locale.incrementQuery)));
  }));
};

/** 底部区域 */
var ComplexFooter = function ComplexFooter(props) {
  var onCancel = props.onCancel,
    onOk = props.onOk,
    locale = props.locale;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    loading = _useState2[0],
    setLoading = _useState2[1];
  var handleOk = /*#__PURE__*/function () {
    var _ref9 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            setLoading(true);
            _context.prev = 1;
            _context.next = 4;
            return onOk();
          case 4:
            _context.prev = 4;
            setLoading(false);
            return _context.finish(4);
          case 7:
          case "end":
            return _context.stop();
        }
      }, _callee, null, [[1,, 4, 7]]);
    }));
    return function handleOk() {
      return _ref9.apply(this, arguments);
    };
  }();
  return /*#__PURE__*/React.createElement("div", {
    className: "complex_footer"
  }, /*#__PURE__*/React.createElement(Button, {
    onClick: onCancel
  }, locale.cancel), /*#__PURE__*/React.createElement(Button, {
    type: "primary",
    icon: /*#__PURE__*/React.createElement(IconFont, {
      type: "icon-sousuo"
    }),
    onClick: handleOk,
    loading: loading
  }, locale.query));
};
var ComplexRender = function ComplexRender(props) {
  return /*#__PURE__*/React.createElement("div", {
    className: "filter_dropdown_complex complex_container"
  }, /*#__PURE__*/React.createElement(ComplexHeader, {
    locale: props.locale
  }), /*#__PURE__*/React.createElement(ComplexBody, props), /*#__PURE__*/React.createElement(ComplexFooter, props));
};
export default ComplexRender;