JS小方法判断

风兮梧桐

已于 2024-07-10 17:10:38 修改

阅读量606

点赞数 10

文章标签： javascript 前端开发语言

于 2024-01-19 15:37:35 首次发布

本文链接：https://blog.csdn.net/weixin_51263829/article/details/135699506

版权

1.一个数组中的数据是否完全包含另一个数组中的数据

2.事件总线

3.响应拦截器

4.全局组件的注册

5.响应拦截器调用自身字段响应拦截器【希望再也没有用到这个需求的一天】【1.23到底还是用上了】

6.树层结构的下拉框操作（每层都可选中，层级不定）

7.树层结构的下拉框显示（只有两层，且只有最后节点可以显示）

8.拖拽进行添加组件的时候并不会触发内部的click，需要单独写方法去手动执行add

1.一个数组中的数据是否完全包含另一个数组中的数据

component.componentProps.value.every(value => ruleList.masterFieldDependencies.includes(value)

2.事件总线

发送

this.$bus.$emit(
                  'change-data-drop',
                  ruleList.valueBelongsToTheField,
                  ruleList.mayflyKey
                )

打开

在mounted之中调用方法

    this.$bus.$on('cp-change-dimission-reason', options => {
      const { name = '' } = options
      this.name = name
      this.data.value = options
    })

注意在打开的页面销毁不然会多次调用

  destroyed() {
    this.$bus.$off('cp-change-dimission-reason')
  }

3.响应拦截器

    this.form = new Proxy(this.form, {
      set: (obj, prop, value) => {
        // 拦截templateType变更
        if ((
          prop === 'templateType' ||
          prop === 'applyFormId' ||
          prop === 'approvalFormId' ) &&
          obj[prop] !== value) {
          this.changeTemplate(value,prop)
            .then(res => {
              res && (obj[prop] = value)
            })
        } else {
          obj[prop] = value
        }
        return true
      }
    })

4.全局组件的注册

import Vue from 'vue'

// 注册组件
let components = [
  require.context('./configComponent', true, /\.vue$/),
  require.context('./baseComponent', true, /\.vue$/)
]

components.forEach(component => {
  component.keys().forEach(key => {
    Vue.component(component(key).default.name, component(key).default)
  })
})

5.响应拦截器调用自身字段响应拦截器【希望再也没有用到这个需求的一天】【1.23到底还是用上了】

    this.form = new Proxy(this.form, {
      set: (obj, prop, value) => {
        const setTemplateType = (newValue) => {
          return new Promise((resolve, reject) => {
            this.changeTemplate(newValue, 'templateType')
              .then(res => {
                if (res) {
                  obj[prop] = newValue;
                  resolve(true);
                } else {
                  reject(false);
                }
              });
          });
        };
        // 拦截templateType变更
        if ((
          prop === 'templateType' ||
          prop === 'applyFormId' ||
          prop === 'approvalFormId') &&
          obj[prop] !== value) {
          setTemplateType(value);
        } else if (prop === 'templateName' && obj[prop] !== value) {
          setTemplateType(this.templateList.find(item => item.templateName === value).key)
            .then(() => {
              obj[prop] = value;
            });
        } else {
          obj[prop] = value
        }
        return true
      }
    })

6.树层结构的下拉框操作（每层都可选中，层级不定）

树状组织结构，每层都可选，筛选出当前允许显示的数据，并且如果原有数据不在允许范围内，也显示，但是不可选中。

传入数据为树形数据cityList

当前可显示数据trueList=[[1,222,3],[1,222,4],[1,44]]

当前渲染value=[1,22,3]

    filterCityListChangeLevel(cityList, trueList, value) {
      let result = []
      let listTree = []
      let newList = []
      console.log(cityList, trueList, value)
      listTree = this.mergeData(trueList)
      result = this.filterData(cityList,listTree)
      newList = this.addValueToNewList(value, cityList,result);
      console.log(listTree,'listTree',result,'result')
      return newList
    },
    addValueToNewList(value, cityList, oldList) {
      let newList = [...oldList];
      let valueExistsInNewList = this.checkValueInList(value, newList);
      if (!valueExistsInNewList) {
        let valueData = this.findValueInList(value, cityList);
        if (valueData) {
          valueData[valueData.length - 1].disabled = true;
          newList.push(...valueData);
        }
      }
      return newList;
    },

    checkValueInList(value, list) {
      return list.some(item => {
        if (item.id === value[value.length - 1]) {
          return true;
        } else if (item.childList) {
          return this.checkValueInList(value, item.childList);
        }
        return false;
      });
    },

    findValueInList(value, list, path = []) {
      for (let item of list) {
        path.push(item);
        if (item.id === value[value.length - 1]) {
          return path;
        } else if (item.childList) {
          let found = this.findValueInList(value, item.childList, path);
          if (found) {
            return found;
          }
        }
        path.pop();
      }
      return null;
    },
    mergeData(list) {
      let map = new Map();

      list.forEach((arr) => {
        let currentMap = map;
        arr.forEach((id, index) => {
          if (!currentMap.has(id)) {
            currentMap.set(id, { id: id, childList: new Map() });
          }
          if (index !== arr.length - 1) {
            currentMap = currentMap.get(id).childList;
          }
        });
      });

      function mapToArray(map) {
        return Array.from(map.values()).map((item) => {
        const childArray = mapToArray(item.childList);
        if (childArray.length > 0) {
          item.childList = childArray;
        } else {
          delete item.childList;
        }
          return item;
        });
      }

      return mapToArray(map);
    },
    filterData(cityList, mergeData) {
      let newList = [];
      cityList.forEach(cityItem => {
        mergeData.forEach(mergeItem => {
          if (cityItem.id === mergeItem.id) {
            let newItem = { ...cityItem };
            if (mergeItem.childList && mergeItem.childList.length > 0) {
              newItem.childList = this.filterData(cityItem.childList, mergeItem.childList);
            }
            newList.push(newItem);
          }
        });
      });
      return newList;
    },

7.树层结构的下拉框显示（只有两层，且只有最后节点可以显示）

  filterCityListChange(cityList, trueList, value) {
      // console.log(cityList, trueList, value)
      const result = []
      for (const city of cityList) {
        if (trueList.includes(city.id)) {
          result.push(city);
        } else if(value === city.id){
          let cityNew = JSON.parse(JSON.stringify(city))
          cityNew.disabled=true
          result.push(cityNew)
        }else if (city.childList && city.childList.length > 0) {
          const filteredChildren = this.filterCityListChange(city.childList, trueList,value);
          if (filteredChildren.length > 0) {
            result.push({
              ...city,
              childList: filteredChildren
            });
          }
        }
      }
      return result
    },

8.拖拽进行添加组件的时候并不会触发内部的click，需要单独写方法去手动执行add

<Draggable
              class="field-list"
              :group="{ name: 'component', pull: 'clone', put: false }"
              :sort="false"
              filter=".forbid"
              :clone="cloneComponent"
              v-model="showBusinessComponent">
              <div
                class="field-item"
                v-for="(item, index) in showBusinessComponent"
                :class="{ forbid: selectedKey.includes(item.key) }"
                :data-alone="item.componentProps.alone ? '100%' : '50%'"
                @click="addComponent(item)"
                :key="index">
                <span class="field-name">{{item.name}}</span>
              </div>
            </Draggable>

9.格式化数字

formatNumberWithCommas: (number: number) => {
          const numStr = number.toString();
          const parts = numStr.split('.');
          const integerPart = parts[0];
          const formattedIntegerPart = integerPart.replace(
            /\B(?=(\d{3})+(?!\d))/g,
            ','
          );
          return `${formattedIntegerPart}${
            parts.length > 1 ? '.' + parts[1] : ''
          }`;
        },