@ctzy-web-client/data-model 1.0.0

package/src/abstract/FilterPanel.js

@@ -0,0 +1,678 @@
+import { cloneDeep, isEqual, unset, set, get } from 'lodash';
+import { EventDispatcher, aesEncrypt } from '@ctzy-web-client/support';
+import FilterColumn from './FilterColumn';
+import { Where } from './where/Where';
+import { sortColumn } from '../utils';
+
+export class FilterPanel extends EventDispatcher {
+  /** @type {FilterColumn[]} */
+  _filterColumns = [];
+
+  /** @type {string[]} */
+  _selectedColumnAttrNames = [];
+
+  _searchValue = '';
+
+  _searchAttr = '';
+
+  fieldSearchValue = '';
+
+  _filterParams = {};
+
+  existComponent = false;
+
+  _inited = false;
+
+  _ready = false;
+
+  _isChange = false;
+
+  _allowTriggerParamsChange = 0;
+
+  _searchFields = [];
+
+  whereForFilter = false;
+
+  whereParamName = '';
+
+  encryptCondition = true;
+
+  get isInited() {
+    return this._inited;
+  }
+
+  get ready() {
+    if (!this._inited) {
+      return false;
+    }
+
+    return this.existComponent ? this._ready : true;
+  }
+
+  set ready(value) {
+    if (!this._inited) {
+      return;
+    }
+
+    if (this.ready || this._ready === value) {
+      return;
+    }
+
+    this._ready = value;
+
+    this.emit('ready');
+  }
+
+  /**
+   * @memberof FilterPanel
+   */
+  constructor(dataTable) {
+    super();
+
+    this.dataTable = dataTable;
+    this.originFilterParams = {};
+    this.originSearchValue = '';
+  }
+
+  _formatFilterColumn(extendFieldInfo) {
+    const baseFilterColumnConfig = {
+      name: extendFieldInfo.name,
+      attrName: extendFieldInfo.name,
+      isExtend: true,
+      default: extendFieldInfo.defaultValue,
+      formComponent: extendFieldInfo.component,
+      closable: true,
+      title: extendFieldInfo.title,
+      fullAttrName: `${this.dataTable.extendField}.${extendFieldInfo.name}`,
+    };
+
+      if (['BwaSelect'].includes(extendFieldInfo.component)) {
+          baseFilterColumnConfig.component = 'BwaSingleMenuCondition';
+          baseFilterColumnConfig.componentProps = extendFieldInfo.extendInfo;
+      }
+
+    if (['BwaMultiSelect'].includes(extendFieldInfo.component)) {
+      baseFilterColumnConfig.component = 'BwaMultipleMenuCondition';
+      baseFilterColumnConfig.componentProps = extendFieldInfo.extendInfo;
+    }
+
+    if (
+      ['BwaUserSelect'].includes(
+        extendFieldInfo.component
+      )
+    ) {
+      baseFilterColumnConfig.component = 'BwaSingleUserCondition';
+    }
+
+      if (
+          ['BwaUserMultiSelect'].includes(
+              extendFieldInfo.component
+          )
+      ) {
+          baseFilterColumnConfig.component = 'BwaMultiUserCondition';
+      }
+
+    return baseFilterColumnConfig;
+  }
+
+  _parseFilterColumns(extendFieldInfos, filterColumnConfigs) {
+    const allowComponents = [
+      'BwaSelect',
+      'BwaMultiSelect',
+      'BwaUserSelect',
+      'BwaUserMultiSelect',
+    ];
+    extendFieldInfos = extendFieldInfos
+      .filter((extendFieldInfo) => extendFieldInfo.type != 1)
+      .filter((extendFieldInfo) =>
+        allowComponents.includes(extendFieldInfo.component)
+      );
+
+    const attrNames = Array.from(
+      new Set(filterColumnConfigs.map((config) => config.attrName))
+    );
+
+    extendFieldInfos = extendFieldInfos.filter(
+      (extendFieldInfo) => !attrNames.includes(extendFieldInfo.name)
+    );
+
+    const formatedExtendColumnConfigs = extendFieldInfos.map((item) =>
+      this._formatFilterColumn(item)
+    );
+
+    return [...filterColumnConfigs, ...formatedExtendColumnConfigs];
+  }
+
+  init(extendFieldInfos, filterColumnConfigs, filterColumnsOrder) {
+
+    if (this._inited) {
+      return;
+    }
+
+    this._inited = true;
+
+    filterColumnConfigs = this._parseFilterColumns(
+      extendFieldInfos,
+      filterColumnConfigs
+    );
+
+    const filterColumns = sortColumn(
+      (filterColumnConfigs || []).map(
+        (filterColumnConfig) => new FilterColumn(this, filterColumnConfig)
+      ),
+      filterColumnsOrder
+    );
+
+    this.setColumns(filterColumns);
+
+    this._selectedColumnAttrNames = this.getAppliedColumns().map(
+      (column) => column.fullAttrName
+    );
+
+    this._filterParams = {
+      ...this._getDefaultParams(),
+      ...this._filterParams,
+    };
+
+    this.changeOriginFilterParams();
+
+    this._inited = true;
+
+    this.emit('initCompleted');
+  }
+
+  setSearchFields(searchFields) {
+    this._searchFields = searchFields.slice();
+  }
+
+  getSearchFields() {
+    return this._searchFields.slice();
+  }
+
+  changeOriginFilterParams(originFilterParams = this.getFilterParams()) {
+    this.originFilterParams = cloneDeep(originFilterParams);
+
+    this._checkChange();
+  }
+
+  changeOriginSearchValue(originSearchValue = this.getSearchValue()) {
+    this.originSearchValue = originSearchValue;
+
+    this._checkChange();
+  }
+
+  isChange() {
+    return this._isChange;
+  }
+
+  setIsChange(isChange) {
+    if (this._isChange === isChange) {
+      return;
+    }
+
+    this._isChange = isChange;
+  }
+
+  _checkChange() {
+    this.setIsChange(
+      !isEqual(this.originFilterParams, this.getFilterParams()) ||
+        this.originSearchValue !== this.getSearchValue()
+    );
+  }
+
+  noTriggerParamsChange(callback) {
+    this._allowTriggerParamsChange++;
+
+    callback?.();
+
+    this._allowTriggerParamsChange--;
+  }
+
+  getSearchValue() {
+    return this._searchValue;
+  }
+
+  _triggerParamsChange() {
+    if (this._allowTriggerParamsChange > 0) {
+      return;
+    }
+
+    this.emit('params-change');
+  }
+
+  setSeachValue(value, isSearch = false) {
+    this._searchValue = value;
+
+    this._checkChange();
+
+      if (!isSearch) {
+          this._triggerParamsChange();
+      }
+  }
+
+  setFilterParam(column, value, isSearch = false) {
+    if (this.getFilterParam(column) === value) {
+      return;
+    }
+
+    // const filterParams = this.getFilterParams();
+
+    set(this._filterParams, column.fullAttrName, value);
+
+    this._checkChange();
+
+    if (!isSearch) {
+        this._triggerParamsChange();
+    }
+
+    // this._setFilterParams(filterParams);
+
+    this.emit('change-search-value');
+  }
+
+  getFilterParam(column) {
+    return get(this._filterParams, column.fullAttrName);
+  }
+
+  setSearchAttr(searchAttr) {
+    this._searchAttr = searchAttr;
+  }
+
+  getSearchAttr() {
+    return this._searchAttr;
+  }
+
+  _setFilterParams(filterParams, ignoreEmit = false) {
+    this._filterParams = cloneDeep(filterParams);
+
+    this._checkChange();
+
+    if (!ignoreEmit) {
+      this._triggerParamsChange();
+    }
+  }
+
+  getFilterParams() {
+    return this._filterParams;
+  }
+
+  /**
+   * @param {FilterColumn} filterColumn
+   * @memberof FilterPanel
+   */
+  appliedColumn(filterColumn) {
+    this._setFilterParams(
+      {
+        ...this._getDefaultParams(),
+        ...this.getFilterParams(),
+      },
+      true
+    );
+  }
+
+  /**
+   * @param {FilterColumn} filterColumn
+   * @memberof FilterPanel
+   */
+  cancelAppliedColumn(filterColumn) {
+    const filterParams = {
+      ...this._getDefaultParams(),
+      ...this.getFilterParams(),
+    };
+
+    unset(filterParams, filterColumn.fullAttrName);
+
+    this._setFilterParams(filterParams, true);
+  }
+
+  _getDefaultParams() {
+    const filterParams = {};
+
+    for (const filterColumn of this.getVisibelColumns()) {
+      set(
+        filterParams,
+        filterColumn.fullAttrName,
+        typeof filterColumn.default === 'function'
+          ? filterColumn.default()
+          : filterColumn.default
+      );
+    }
+
+    return filterParams;
+  }
+
+  resetFilterParams() {
+    this.noTriggerParamsChange(() => {
+      this._setFilterParams(this.originFilterParams);
+      this.setSeachValue('');
+    });
+
+    this._triggerParamsChange();
+  }
+
+  /**
+   * @param {FilterColumn} filterColumn
+   * @memberof FilterPanel
+   */
+  addColumn(filterColumn) {
+    if (this.getColumn(filterColumn.fullAttrName)) {
+      throw new Error(
+        '无法添加两个字段名称一样的字段:' + filterColumn.fullAttrName
+      );
+    }
+
+    this._filterColumns.push(filterColumn);
+  }
+
+  /**
+   *
+   * @param {FilterColumn} filterColumn
+   * @memberof FilterPanel
+   */
+  removeColumn(filterColumn) {
+    this._filterColumns = this._filterColumns.filter(
+      (column) => column.attrName !== filterColumn.attrName
+    );
+  }
+
+  /**
+   * @param {string} name
+   * @memberof FilterPanel
+   */
+  getColumn(name) {
+    return (
+      this.getColumns().find((column) => column.fullAttrName === name) ?? null
+    );
+  }
+
+  /**
+   * @param {FilterColumn[]} fillterColumns
+   * @memberof FilterPanel
+   */
+  setColumns(fillterColumns) {
+    this._filterColumns = [];
+    for (let filterColumn of fillterColumns) {
+      this.addColumn(filterColumn);
+    }
+  }
+
+  getColumns() {
+    return this._filterColumns.slice();
+  }
+
+  getVisibelColumns() {
+    return this.getColumns().filter((column) => column.visible);
+  }
+
+  getFxiedColumns() {
+    return this.getVisibelColumns().filter((column) => !column.closable);
+  }
+
+  getClosableColumns() {
+    return this.getColumns().filter((column) => column.closable);
+  }
+
+  getSearchClosableColumns() {
+    const closableColumns = this.getClosableColumns();
+
+    return closableColumns.filter((column) => {
+      return (
+        column.title.includes(this.fieldSearchValue) ||
+        column.fullAttrName.toLocaleLowerCase().includes(this.fieldSearchValue)
+      );
+    });
+  }
+
+  getSelectedColumnAttrNames() {
+    return this._selectedColumnAttrNames.slice();
+  }
+
+  setSelectedColumnAttrNames(v) {
+    this._selectedColumnAttrNames = v;
+
+    for (let column of this.getClosableColumns()) {
+      column.visible = this._selectedColumnAttrNames.includes(
+        column.fullAttrName
+      );
+    }
+
+    this.emit('selected-column-change');
+  }
+
+  closeColumn(column) {
+    const selectedColumnAttrNames = this.getSelectedColumnAttrNames().filter(
+      (name) => name !== column.fullAttrName
+    );
+
+    this.setSelectedColumnAttrNames(selectedColumnAttrNames);
+  }
+
+  getSelectedColumns() {
+    return this._selectedColumnAttrNames
+      .map((attrName) => this.getColumn(attrName))
+      .filter(Boolean)
+      .filter((column) => column.closable);
+  }
+
+  getAppliedColumns() {
+    return this.getFxiedColumns()
+      .concat(this.getSelectedColumns())
+      .filter((column) => column.visible);
+  }
+
+  _parseWhereAttrMapping(where, column, params) {
+    const keys = Object.keys(column.attrMapping || {});
+
+    if (!keys.length) {
+      return;
+    }
+
+    let group = null;
+
+    if (column.twoFieldsDatePicker) {
+      const startInfo = column.attrMapping?.start;
+      const endInfo = column.attrMapping?.end;
+
+      if (!startInfo || !endInfo) {
+        return;
+      }
+
+      const startName = startInfo.name
+        .replace('${name}', column.name)
+        .replace('${key}', 'start');
+
+      const endName = endInfo.name
+        .replace('${name}', column.name)
+        .replace('${key}', 'end');
+
+      const object = get(
+        params,
+        this._formatFilterParamName(column.fullAttrName)
+      );
+
+      const start = get(object || {}, 'start');
+      const end = get(object || {}, 'end');
+
+      if (start && end) {
+        const group = where.addGroup();
+
+        const startGroup = group.addOrGroup();
+
+        const endGroup = group.addOrGroup();
+
+        startGroup.addCondition(startName, '>=', start);
+        startGroup.addCondition(startName, '<=', end);
+
+        endGroup.addCondition(endName, '>=', start);
+        endGroup.addCondition(endName, '<=', end);
+      }
+
+      return;
+    }
+
+    for (const key of keys) {
+      const info = column.attrMapping[key];
+
+      if (!info || typeof info !== 'object') {
+        continue;
+      }
+
+      const name = info.name
+        .replace('${name}', column.name)
+        .replace('${key}', key);
+
+      const object = get(
+        params,
+        this._formatFilterParamName(column.fullAttrName)
+      );
+      const value = get(object || {}, key);
+
+      if (value) {
+        group = group || where.addGroup();
+
+        switch (column.conditionOper) {
+          case 'OR':
+            group.addOrCondition(name, info.op, value);
+            break;
+          case 'AND':
+          default:
+            group.addCondition(name, info.op, value);
+        }
+      }
+    }
+  }
+
+  /**
+   * 获取where条件
+   * @param {Object} params 参数
+   * @returns {Where} where条件
+   */
+  _getWhere(params) {
+    const where = new Where();
+
+    const columns = this.getAppliedColumns();
+
+    for (const column of columns) {
+      const key = this._formatFilterParamName(column.fullAttrName);
+      const value = get(params, key);
+
+      if (Array.isArray(value)) {
+        if (value.length === 0) {
+          continue;
+        }
+
+        const isMultipleColumn = [
+          'BwaMultiSelect',
+          'BwaUserMultiSelect',
+        ].includes(column.formComponent);
+
+        where.addCondition(
+          key,
+          isMultipleColumn ? 'json_contains' : 'in',
+          value
+        );
+        continue;
+      }
+
+      if (typeof value === 'object') {
+        if (!value) {
+          continue;
+        }
+
+        this._parseWhereAttrMapping(where, column, params);
+
+        continue;
+      }
+
+      if (value) {
+        where.addCondition(key, '=', value);
+      }
+    }
+
+    if (this.getSearchFields().length) {
+      if (this.getSearchValue()) {
+        const group = where.addGroup();
+
+        for (let field of this.getSearchFields()) {
+          group.addOrCondition(field, 'like', `%${this.getSearchValue()}%`);
+        }
+      }
+    }
+
+    return this.encryptCondition
+      ? aesEncrypt(JSON.stringify(where), 'bwa-mkbl')
+      : JSON.stringify(where);
+  }
+
+  _formatFilterParamName(paramName) {
+    const column = this.getColumn(paramName);
+
+    if (!column) {
+      return paramName;
+    }
+
+    let segments = column.fullAttrName.split('.');
+    segments.pop();
+
+    return [...segments, column.name].join('.');
+  }
+
+  _formatFilterParam(params, column, value) {
+    const key = this._formatFilterParamName(column.fullAttrName);
+
+    if (
+      value &&
+      !Array.isArray(value) &&
+      typeof value === 'object' &&
+      column.attrMapping &&
+      typeof column.attrMapping === 'object' &&
+      Object.values(column.attrMapping).every(
+        (value) => typeof value === 'string'
+      )
+    ) {
+      for (const key of Reflect.ownKeys(column.attrMapping)) {
+        set(params, column.attrMapping[key], value[key]);
+      }
+      return;
+    }
+
+    set(params, key, value);
+  }
+
+  _getAjaxFilterParams() {
+    const filterParams = this.getFilterParams();
+
+    const columns = this.getColumns();
+
+    const params = {};
+
+    for (const column of columns) {
+      this._formatFilterParam(
+        params,
+        column,
+        get(filterParams, column.fullAttrName)
+      );
+    }
+
+    return params;
+  }
+
+  getAjaxParams() {
+    let ajaxFilterParams = this._getAjaxFilterParams();
+
+    if (this.whereForFilter) {
+      return {
+        [this.whereParamName]: this._getWhere(ajaxFilterParams),
+      };
+    }
+
+    if (this.getSearchAttr()) {
+      ajaxFilterParams = {
+        [this.getSearchAttr()]: this.getSearchValue(),
+        ...ajaxFilterParams,
+      };
+    }
+
+    return ajaxFilterParams;
+  }
+}