cnhis-design-vue 2.1.116 → 2.1.119

package/packages/big-table/src/utils/headerFilter.js

@@ -0,0 +1,494 @@
+import vexutils from '@/utils/vexutils';
+let beforeSearchConvert = [];
+const filterTopOffsetMap = {
+  large: 28,
+  medium: 24,
+  small: 22,
+  extrasmall: 20
+};
+const fontSizeMap = {
+  large: 1.25,
+  medium: 1.1,
+  small: 1,
+  extrasmall: 0.9
+};
+const birthdayUnits = [
+  { title: '天', units: 1, con: 'DAY' },
+  { title: '周', units: 2, con: 'WEEK' },
+  { title: '月', units: 1, con: 'MONTH' },
+  { title: '岁', units: 1, con: 'YEAR' }
+];
+export default {
+  props: {},
+  data() {
+    return {
+      apiFilterMap: {}
+    };
+  },
+  computed: {
+    isApiTable() {
+      return this.tableDataType === 'API';
+    }
+  },
+  methods: {
+    getOffsetLocation(element, cls, offsetKey) {
+      let actualTop = element[offsetKey];
+      let current = element.offsetParent;
+      while (current && current.classList && !current.classList.contains(cls)) {
+        actualTop += current[offsetKey];
+        current = current.offsetParent;
+      }
+      return actualTop;
+    },
+    showFilterHandleLocationNew(target, tempWrapId) {
+      let resTop = this.getOffsetLocation(target, tempWrapId, 'offsetTop');
+      let resLeft = this.getOffsetLocation(target, tempWrapId, 'offsetLeft');
+      let resWidth = target.offsetWidth;
+      let resHeight = target.offsetHeight;
+      return { resTop, resLeft, resWidth, resHeight };
+    },
+    showFilter(field, columnName, event) {
+      if (this.isInlineOperating) return false;
+      let target = event.target;
+      const FILTER_BOX_WIDTH = 400;
+      let fontSize = this.styleSetting?.fontSize || 'small';
+      let scaleNum = fontSizeMap[fontSize];
+      let FILTER_BOX_TOP_OFFSET = filterTopOffsetMap[fontSize];
+      let { filterOptions } = field?.filterSettingMap || {};
+
+      let transformWrap = document.body;
+      let { left: btnRectLeft, right: btnRectRight, top: btnRectTop, width: btnWidth } = target.getBoundingClientRect();
+
+      let transformWrapWidth = transformWrap.clientWidth;
+
+      let isOverLeft = btnRectLeft + FILTER_BOX_WIDTH > transformWrapWidth;
+      let right = 0;
+
+      // 位置不够左定位
+      if (isOverLeft) {
+        let transformWrapRight = transformWrap?.getBoundingClientRect().right || 0;
+        right = transformWrapRight - btnRectRight - btnWidth / 2;
+      }
+
+      // 定位一直有问题, 最后还是相对于editTable定位, 不然弹框打开的列表会错位
+      // 如果是相对app的话, filter-wrap插入的位置可能会有问题, 因为通过micro打开的列表, app id是重复的
+      if (this.filterDomPortal && this.filterDomPortal != 'body' && this.filterDomPortal.includes('#')) {
+        let tempWrapId = this.filterDomPortal.slice(1, this.filterDomPortal.length);
+        scaleNum = 1;
+        FILTER_BOX_TOP_OFFSET = 0;
+        const { resTop = 0, resLeft = 0, resWidth = 0, resHeight = 0 } = this.showFilterHandleLocationNew(target, tempWrapId);
+        // 表格可能滚动了
+        let bigTableScrollLeft = this.$refs.xGrid?.getScroll?.()?.scrollLeft || 0;
+        btnRectTop = resTop + resHeight + 8;
+        btnWidth = resWidth;
+        btnRectLeft = resLeft - bigTableScrollLeft;
+        btnRectRight = resWidth + btnRectLeft;
+        right = document.getElementById(tempWrapId).offsetWidth - btnWidth - btnRectLeft;
+      }
+
+      field.left = 'initial';
+      field.right = 'initial';
+      field.top = 'initial';
+
+      if (isOverLeft) {
+        field.right = right / scaleNum + 'px';
+      } else {
+        const left = btnRectLeft + (this.filterLeftOffset || 0);
+        field.left = left / scaleNum + 'px';
+      }
+
+      const top = btnRectTop + FILTER_BOX_TOP_OFFSET + (this.filterTopOffset || 0);
+      field.top = top / scaleNum + 'px';
+
+      field.visible = !field.visible;
+
+      let len = this.filterFields[columnName]?.CONVERT?.length;
+      let allLen = filterOptions?.length || field.setting?.showSetting?.length;
+      field.checkAll = len === allLen;
+      field.indeterminate = !!len && len !== allLen;
+      field.searchFilterText = '';
+    },
+    handlefilterBoxClickSort(sort, field) {
+      if (field.filterSort === sort) {
+        sort = null;
+      } else {
+        this.$refs.xGrid.clearSort();
+      }
+
+      field.filterSort = sort;
+      field.visible = false;
+      this.$emit('sortChange', { prop: field.columnName, order: sort });
+    },
+    handleFilterSeach(val, field) {
+      field.searchFilterText = val;
+      let { filterOptions } = field?.filterSettingMap || {};
+      let options = filterOptions || field.setting?.showSetting;
+      let allLen = options?.length;
+      let cLen = field?.CONVERT?.length;
+
+      if (val === '') {
+        field.checkAll = cLen === allLen;
+        field.indeterminate = !!cLen && cLen !== allLen;
+        return;
+      }
+
+      field.searchFilterCONVERT = options
+        .filter(item => {
+          return field.searchFilterText === item.label && field.CONVERT.includes(item.value);
+        })
+        .map(item => item.value);
+
+      beforeSearchConvert = field.searchFilterCONVERT;
+    },
+    handleFilterChangeAll(e, field) {
+      this.reScrollFilterWrap();
+      let checked = e.target.checked;
+      field.indeterminate = false;
+      field.checkAll = checked;
+
+      let { filterOptions } = field?.filterSettingMap || {};
+      let options = filterOptions || field.setting.showSetting;
+
+      this.filterFields[field.columnName].CONVERT = checked
+        ? options.map(item => {
+            return item.value;
+          })
+        : [];
+    },
+    handleFilterChange(newValue, name, field) {
+      this.reScrollFilterWrap();
+      let value = newValue;
+      value = this.getSingleConvert(value, this.filterFields[name].CONVERT, field);
+      let { filterOptions } = field?.filterSettingMap || {};
+      let allLen = filterOptions?.length || field.setting?.showSetting?.length;
+      this.filterFields[name].CONVERT = value;
+
+      field.checkAll = value.length === allLen;
+      field.indeterminate = !!value.length && value.length !== allLen;
+    },
+    handleFilterSearchChange(value, columnName, field) {
+      this.reScrollFilterWrap();
+      /* filter-check-group value更新 触发 主check-group value同步更新 */
+      let isAdd = beforeSearchConvert.length < value.length;
+      if (isAdd) {
+        let addItems = value.filter(item => {
+          return !beforeSearchConvert.includes(item);
+        });
+        if (field.advanceOptionSetting == '0' && this.filterFields[columnName]?.CONVERT) {
+          if (Array.isArray(this.filterFields[columnName].CONVERT)) {
+            this.filterFields[columnName].CONVERT.length = 0;
+          }
+        }
+        this.filterFields[columnName].CONVERT.push(...addItems);
+      } else {
+        let removeItems = beforeSearchConvert.filter(item => {
+          return !value.includes(item);
+        });
+        this.filterFields[columnName].CONVERT = this.filterFields[columnName].CONVERT.filter(item => {
+          return !removeItems.includes(item);
+        });
+      }
+
+      let newValue = value;
+      newValue = this.getSingleConvert(newValue, field.searchFilterCONVERT, field);
+
+      field.searchFilterCONVERT = newValue;
+      beforeSearchConvert = vexutils.clone(newValue, true);
+    },
+    handleFilterClearAll(field) {
+      field.indeterminate = false;
+      field.checkAll = false;
+      this.filterFields[field.columnName].CONVERT = [];
+      if (field.searchFilterCONVERT) {
+        this.filterFields[field.columnName].searchFilterCONVERT = [];
+      }
+      this.handleFilter(field);
+    },
+    handleCancelFilter() {
+      this.hideFilterWrap();
+    },
+    handleFilter(field) {
+      let conObj = this.mergeConObjFn();
+      this.$emit('onSave', conObj, false, [], [], { isBigTable: true });
+      field.visible = false;
+    },
+    handleFilterEmpty(field, columnName) {
+      this.filterFields[columnName].CONVERT = [];
+      let conObj = this.mergeConObjFn();
+
+      this.$emit('onSave', conObj, false, [], [], { isBigTable: true });
+      field.visible = false;
+    },
+    mergeConObjFn() {
+      let fields = Object.values(this.filterFields);
+      let fieldkeys = Object.keys(this.filterFields);
+      let conObj = this.getConObj(fields);
+      let mergeConObj = [...conObj];
+      // 兼容二次开发平台逻辑
+      if (this.libSource != 'lowCode') {
+        let qqConObj = this.tableParams.qqConObj ? JSON.parse(this.tableParams.qqConObj) : [];
+
+        qqConObj.forEach(i => {
+          if (!fieldkeys.includes(i.field_key)) {
+            mergeConObj.push(i);
+          }
+        });
+      }
+
+      return mergeConObj || [];
+    },
+    // 格式化设置搜索条件参数
+    getConObj(arr) {
+      // this.quickSearch
+      if (!Array.isArray(arr)) {
+        return [];
+      }
+      let conObj = [];
+      for (let i = 0; i < arr.length; i++) {
+        let item = arr[i];
+        let value = '';
+        let limit_date = '';
+        if (item.EQ || item.CL) {
+          value = item.EQ || item.CL;
+          if (item.settingObj?.attr === 'PERCENTAGE') {
+            value = Number(value) / 100;
+          }
+          if (item.EVALUATEAttr) {
+            value = item.selecteds.join('|#|');
+          }
+        } else if (!vexutils.isEmpty(item.QUOTE)) {
+          value = item.QUOTE.join('|#|');
+        } else if (!vexutils.isEmpty(item.CONVERT)) {
+          value = this.isApiTable ? item.CONVERT : item.CONVERT.map(item => JSON.parse(item));
+        } else if (item.DATE) {
+          if (item.DATE.start_val || item.DATE.end_val) {
+            item.DATE.con = 'IN';
+          }
+          item.tempCon = item.DATE.con;
+          item.start_val = item.DATE.start_val ? item.DATE.start_val.format('YYYY-MM-DD HH:mm:ss') : '';
+          item.end_val = item.DATE.end_val ? item.DATE.end_val.format('YYYY-MM-DD HH:mm:ss') : '';
+        } else if (item.BIRTHDAY) {
+          // 生日
+          let isChange = false;
+          if (item.BIRTHDAY.limit_date.length > 0 || item.BIRTHDAY.start_val || item.BIRTHDAY.end_val) {
+            item.BIRTHDAY.con = 'IN';
+          }
+          item.tempCon = item.BIRTHDAY.con;
+          // 因为年龄下拉有个默认值, 当输入框中有值时才取下拉值
+          if (item.BIRTHDAY.start_val || item.BIRTHDAY.end_val) {
+            isChange = true;
+          } else {
+            isChange = false;
+          }
+
+          // 校验
+          if (item.BIRTHDAY.start_val) {
+            let res = vexutils.validateBirthday(item.BIRTHDAY.start_val, item.title, item.BIRTHDAY.unit);
+            if (!res) return;
+          }
+          if (item.BIRTHDAY.end_val) {
+            let res = vexutils.validateBirthday(item.BIRTHDAY.end_val, item.title, item.BIRTHDAY.unit);
+            if (!res) return;
+          }
+          if (+item.BIRTHDAY.start_val > +item.BIRTHDAY.end_val) {
+            this.$message.warning(`${item.title}请输入有效范围`, 2);
+            return;
+          }
+
+          limit_date = this.limit_date || '';
+          item.unit = isChange ? item.BIRTHDAY.unit || '' : '';
+          item.start_val = item.BIRTHDAY.start_val || '';
+          item.end_val = item.BIRTHDAY.end_val || '';
+        } else if (item.LABELAttr) {
+          let valList = [];
+          item.labelSelectList.forEach(v => {
+            valList.push(v.labelName);
+          });
+          value = valList.join('|#|');
+        } else if (item.EVALUATEAttr) {
+          value = item.selecteds.join('|#|');
+        }
+        let field_key = this.isApiTable ? item?.filterSettingMap?.headerFilterKey || item.columnName : item.columnName;
+        let temp = {
+          field_key, // 一级value
+          con: item.DATE || item.BIRTHDAY ? item.tempCon : item.con, // 二级选择项value
+          value: value, // input输入值
+          limit_date: limit_date || '', // 生日
+          start_val: item.start_val || '', // 开始时间
+          end_val: item.end_val || '', // 结束时间
+          unit: item.unit || '' // 年龄
+        };
+        conObj.push(temp);
+      }
+      // let dateCons = this.dateTeam.map(item => item.con);
+      let res = conObj.filter(
+        item => item.value || item.limit_date || item.start_val || item.end_val
+        // dateCons.includes(item.con)
+      );
+      return res;
+    },
+    reScrollFilterWrap() {
+      let filterWrapEl = document.querySelectorAll('.big-table-filter-wrap');
+      let checkboxWrapEl = filterWrapEl[filterWrapEl.length - 1].querySelector('.js-checkbox-wrap');
+
+      let tableScrollTop = checkboxWrapEl.scrollTop;
+
+      this.$nextTick(() => {
+        checkboxWrapEl.scrollTop = tableScrollTop;
+      });
+    },
+
+    /**
+     * 映射值如果配置了单选，限制只能选一个
+     */
+    getSingleConvert(value, old, field) {
+      let cValue = value;
+      if (!Array.isArray(old) || !Array.isArray(value)) return cValue;
+      // 单选
+      const { multiple } = field?.filterSettingMap || {};
+      let isSingle = (this.isApiTable && !multiple) || (!this.isApiTable && field.advanceOptionSetting == '0');
+      if (isSingle && (value?.length || 0) > 1) {
+        cValue = cValue.filter(v => !old?.includes?.(v));
+        if (cValue.length > 1) {
+          return [cValue[0]];
+        }
+      }
+      return cValue;
+    },
+    onmousedownFunc(e) {
+      this.startX = e.screenX;
+      this.maskInsert();
+    },
+    maskInsert() {
+      let mask = this.mask || this.maskCreate();
+      document.body.appendChild(mask);
+    },
+    maskCreate() {
+      if (this.mask) return this.mask;
+      const mask = document.createElement('div');
+      mask.style = 'position:fixed;top:0;bottom:0;left:0;right:0;z-index:99999;cursor:nw-resize';
+      mask.addEventListener('mousemove', this.maskMove);
+      mask.addEventListener('mouseup', this.maskUp);
+      this.mask = mask;
+      return mask;
+    },
+    maskMove(e) {
+      this.distance = parseInt(e.screenX - this.startX);
+    },
+    maskUp(e) {
+      this.filterHeight = this.filterHeight + this.distance;
+      this.filterWidth = this.filterWidth + this.distance;
+      this.distance = 0;
+      this.startX = 0;
+      const mask = this.mask;
+      if (!mask) return;
+      mask.parentNode && mask.parentNode.removeChild(mask);
+      mask.removeEventListener('mousemove', this.maskMove);
+      mask.removeEventListener('mouseup', this.maskUp);
+      this.mask = null;
+    },
+    initBirthdayParams(item) {
+      const { unit } = item;
+      const units = birthdayUnits.filter(i => i.units === 1);
+      this.$set(item, 'showBirthdayDate', false);
+      this.$set(item, 'unit', unit || 'YEAR');
+      this.$set(item, 'units', units);
+    },
+    handleFieldListFilter(item) {
+      const { fieldSetting, isMerge, notParticipatingSearch, searchFilterText, advanceOptionSetting, setting } = item || {};
+      let filterField = fieldSetting?.mapping?.type === 'manual' && isMerge != 1 && notParticipatingSearch != 1;
+      let { showSetting = [] } = setting || {};
+      let showfilterSearch = showSetting.length > 5;
+      let showSelectAll = !searchFilterText && advanceOptionSetting != '0';
+      let filterOptions = searchFilterText
+        ? showSetting.filter(v => {
+            if (!searchFilterText) return v;
+            let reg = new RegExp(searchFilterText);
+            return reg.test(v.label);
+          })
+        : showSetting;
+      return {
+        filterField,
+        showfilterSearch,
+        showSelectAll,
+        filterOptions
+      };
+    },
+    handlerInitSqlSearchItem(arr) {
+      if (!Array.isArray(arr)) return;
+      arr.forEach(el => {
+        let { setting, fieldType = '', settingObj, filterSettingMap, columnName } = el || {};
+        if (setting) {
+          // el.seting 可能是 string / object
+          setting = typeof setting == 'string' ? JSON.parse(setting) : setting;
+          this.$set(el, 'setting', setting);
+        }
+        const { showSetting, attr, labelType, wordbook } = setting || {};
+        const { filterField, headerFilterKey } = filterSettingMap || {};
+        // 处理api表头筛选映射
+        if (this.isApiTable && filterField && headerFilterKey) {
+          this.apiFilterMap[headerFilterKey] = columnName;
+        }
+        if (setting) {
+          if (!vexutils.isEmpty(wordbook)) {
+            this.$set(el, 'con', 'QUOTE');
+            this.$set(el, 'dataSource', []);
+            this.$set(el, 'QUOTE', []);
+            return;
+          } else if (showSetting?.length > 0) {
+            let con = this.isApiTable ? 'EQ' : 'CONVERT';
+            this.$set(el, 'con', con);
+            showSetting.forEach(set => {
+              this.$set(set, 'label', set.change_text);
+              this.$set(set, 'value', JSON.stringify(set.filter));
+            });
+            this.$set(el, 'CONVERT', []);
+            if (!this.isApiTable) {
+              let filterSettingMap = this.handleFieldListFilter(el);
+              this.$set(el, 'filterSettingMap', filterSettingMap);
+            }
+            return;
+          }
+        }
+
+        if (fieldType.includes('DATE')) {
+          if (settingObj?.attr == 'BIRTHDAY') {
+            this.$set(el, 'con', 'BIRTHDAY');
+            this.$set(el, 'showDate', false);
+            this.$set(el, 'marginx', 'ml');
+            this.$set(el, 'BIRTHDAY', this.initBirthdayParams(el));
+          } else {
+            this.$set(el, 'con', 'DATE');
+            this.$set(el, 'showDate', false);
+            this.$set(el, 'marginx', 'ml');
+            this.$set(el, 'DATE', {
+              con: null,
+              start_val: null,
+              end_val: null
+            });
+          }
+        } else if (fieldType == 'TEXT') {
+          this.$set(el, 'con', 'CL');
+          this.$set(el, 'CL', '');
+        } else if (fieldType == 'NUMBER') {
+          this.$set(el, 'con', 'EQ');
+          this.$set(el, 'EQ', '');
+        } else if (fieldType == 'JSONB') {
+          this.$set(el, 'con', 'EQ');
+          this.$set(el, 'EQ', '');
+        }
+        if (attr === 'LABEL') {
+          this.$set(el, 'con', 'EQ');
+          this.$set(el, 'LABELAttr', true);
+          this.$set(el, 'labelSelectList', []);
+          // this.handleSetLabelOptions(labelType, el);
+        }
+        if (attr === 'EVALUATE') {
+          this.$set(el, 'con', 'CL');
+          this.$set(el, 'selecteds', []);
+          this.$set(el, 'EVALUATEAttr', true);
+        }
+      });
+    }
+  }
+};