资源购买页tree组件勾选联通上下级功能完善

闫增涛

2024-04-10 bd3c5bd24f0d5c5b8669bb034a75d46d7a10599d

资源购买页tree组件勾选联通上下级功能完善

 packageBookService/pages/bookServices/detail/buyResource/index.js

@@ -455,4 +455,58 @@
        });
    }
  },

  // 章节勾选方法
  findAndUpdateItemsByIds(tree, ids, state) {
    function findAndUpdate(node) {
      if (ids.includes(node.id)) {
        // console.log(node, 'node');
        node.checked = state; // 将目标项的 check 属性设置为 true
      }
      if (node.children && node.children.length > 0) {
        for (let child of node.children) {
          findAndUpdate(child); // 递归处理子节点
        }
      }
    }
    for (let node of tree) {
      findAndUpdate(node); // 对每个顶层节点执行查找和更新操作
    }
    // console.log(tree, 'tree345');
    return tree; // 返回修改后的完整数组
  },
  // 单个勾选方法
  checkResoucrceInfo(tree, id) {
    function findAndUpdate(node) {
      if (node.sysType == "CmsFolder" && node.children.length > 0) {
        for (let index = 0; index < node.children.length; index++) {
          const element = node.children[index];
          findAndUpdate(element);
        }
      } else if (id == node.id && node.sysType == "CmsItem") {
        node.checked = !node.checked; // 将目标项的 check 属性设置为 true
      }
    }
    for (let node of tree) {
      findAndUpdate(node); // 对每个顶层节点执行查找和更新操作
    }
    return tree; // 返回修改后的完整数组
  },
  // 章节勾选事件
  changeListChecked(e) {
    const ids = e.detail.ids
    const state = e.detail.flag
    const updated = this.findAndUpdateItemsByIds(this.data.learn, ids, state)
    this.setData({
      learn: updated
    })
  },
  // 单个勾选事件
  changeResourceChecked(e) {
    const id = e.detail.id
    const updated = this.checkResoucrceInfo(this.data.learn, id)
    this.setData({
      learn: updated
    })
  }
});

 packageBookService/pages/bookServices/detail/buyResource/index.wxml

@@ -24,11 +24,14 @@
    paymentPage="{{paymentPage}}"
    superior="{{superior}}"
    treeList="{{learn}}"
    learnList="{{learn}}"
    tab="{{'jsek_cloudLearning'}}"
    isShowCheck="{{true}}"
    openIds="{{openLearnids}}"
    checkAllState="{{checkAllState}}"
    bind:changeCheckAll="changeCheckAll"
    bind:changeListChecked="changeListChecked"
    bind:changeResourceChecked="changeResourceChecked"
  />
</view>


 packageBookService/pages/bookServices/detail/components/tree/index.js

@@ -4,12 +4,14 @@
} from "../../../../../../assets/js/login";
const app = getApp();
Component({
  // checked: false,

  properties: {
    treeList: {
      type: Array,
      value: [],
    },
    learnList: {
      type: Array,
      value: []
    },
    bookInfo: {
      type: Object,
@@ -63,10 +65,6 @@
    this.setData({
      sonPurchaseSaleMethodId: [],
    });
    console.log(
      this.data.sonPurchaseSaleMethodId,
      "sonPurchaseSaleMethodId789"
    );
  },
  observers: {
    treeList: function (newValue) {
@@ -311,20 +309,30 @@
      // const flag =
      //   list.findIndex((item) => item.checked == false) > -1 ? true : false;
      const flag = this.properties.checkAllState;
      const updataList = this.findAndUpdateItemsByIds(
        this.properties.treeList,
      // const updataList = this.findAndUpdateItemsByIds(
      //   this.properties.treeList,
      //   ids,
      //   flag
      // );
      // this.setData({
      //   treeList: updataList,
      // });

      var myEventDetail = {
        ids,
        flag
      );
      console.log(checked, "list");
        flag,
      }; // detail对象，提供给事件监听函数
      var myEventOption = {
        bubbles: true,
        composed: true,
      }; // 触发事件的选项
      this.triggerEvent("changeListChecked", myEventDetail, myEventOption);

      if (!checked) {
        this.setData({
          selectAll: list,
        });
      }
      this.setData({
        treeList: updataList,
      });
      var myEventDetail = {
        value: !flag,
      }; // detail对象，提供给事件监听函数
@@ -341,27 +349,43 @@
      // 这个时候checked的值是fals
      let checkResourceTitleList = [];
      const item = e.currentTarget.dataset.item;
      //
      const parent = this.findParentById(this.properties.learnList, item.id)
      let childrenList
      let flagNum
      if (parent) childrenList = parent.children.filter(citem => citem.id !== item.id)
      if (childrenList) flagNum = childrenList.findIndex(item => item.checked == false)
      let list = this.flattenTree([item]);
      let ids = [];
      list.forEach((item) => {
        ids.push(item.id);
        if (item.sysType == 'CmsFolder' || (item.sysType == 'CmsItem' && item.saleMethod.length))
          ids.push(item.id);
      });
      const updatedTreeList = this.findAndUpdateItemsByIds(
        this.properties.treeList,
      var myEventDetail = {
        ids,
        flag
      );
      this.setData({
        treeList: updatedTreeList, // 更新 treeList 数据
      });
      console.log(list, "list.checked");
        flag,
      }; // detail对象，提供给事件监听函数
      var myEventOption = {
        bubbles: true,
        composed: true,
      }; // 触发事件的选项
      this.triggerEvent("changeListChecked", myEventDetail, myEventOption);
      if (flagNum == -1) {
        let checkedState
        var myEventDetail = {
          ids: [parent.id],
          flag,
        }; // detail对象，提供给事件监听函数
        var myEventOption = {
          bubbles: true,
          composed: true,
        }; // 触发事件的选项
        this.triggerEvent("changeListChecked", myEventDetail, myEventOption);
      }
      if (!list.checked) {
        this.setData({
          superiorPurchaseSaleMethodId: list,
        });
      }
      // console.log(this.data.superiorPurchaseSaleMethodId, 'superiorPurchaseSaleMethodId');
      list.forEach((items) => {
        console.log(items.checked, "itesasd");
        if (!items.checked) {
@@ -378,17 +402,60 @@
    checkResource(e) {
      const citem = e.currentTarget.dataset.item;
      const parent = e.currentTarget.dataset.parent
      const childrenList = parent.children.filter(item => item.id !== citem.id)
      let outermost
      if (parent) outermost = this.findParentById(this.properties.learnList, parent.id)
      const childrenList = parent.children.filter(item => item.id !== citem.id && item.saleMethod.length)
      const flag = childrenList.findIndex(item => item.checked == false)
      const updataList = this.checkResoucrceInfo(
        this.properties.treeList,
        citem.id
      );
      // 改变该项checked
      var myEventDetail = {
        id: citem.id
      };
      var myEventOption = {
        bubbles: true,
        composed: true,
      };
      this.triggerEvent("changeResourceChecked", myEventDetail, myEventOption);
      // 通过判断,联通父级checked
      if (flag == -1) {
        if (citem.checked == false) {
          this.findAndUpdateItemsByIds(this.properties.treeList, [parent.id], true)
        } else {
          this.findAndUpdateItemsByIds(this.properties.treeList, [parent.id], false)
        let checkedState
        citem.checked == false ? checkedState = true : checkedState = false
        var myEventDetail = {
          ids: [parent.id],
          flag: checkedState,
        };
        var myEventOption = {
          bubbles: true,
          composed: true,
        };
        this.triggerEvent("changeListChecked", myEventDetail, myEventOption);
      }
      // 联通最外层级checked ,如果有一个取消勾选,且当前最外层勾选,则取消最外层的勾选
      if (citem.checked && outermost && outermost.checked) {
        var myEventDetail = {
          ids: [outermost.id],
          flag: false,
        };
        var myEventOption = {
          bubbles: true,
          composed: true,
        };
        this.triggerEvent("changeListChecked", myEventDetail, myEventOption);
      }
      // 联通最外层级checked, 如果所有子项勾选, 且当前最外层未勾选, 则加上最外层的勾选
      if (!citem.checked && outermost) {
        let allchildren = this.flattenTree([outermost])
        allchildren = allchildren.filter(item => item.sysType == 'CmsItem' && item.id !== citem.id && item.saleMethod.length)
        const satate = allchildren.findIndex(item => item.checked == false)
        if (satate == -1) {
          var myEventDetail = {
            ids: [outermost.id],
            flag: true,
          };
          var myEventOption = {
            bubbles: true,
            composed: true,
          };
          this.triggerEvent("changeListChecked", myEventDetail, myEventOption);
        }
      }
      if (!citem.checked) {
@@ -404,13 +471,9 @@
        this.setData({
          sonPurchaseSaleMethodId: sonPurchaseSaleMethodId,
        });
        console.log(this.data.sonPurchaseSaleMethodId);
      } else {
        // 取消选中的时候删除id
      }
      this.setData({
        treeList: updataList,
      });
    },
    // 加入购物车
    async onCloudShoppingCart(e) {
@@ -459,9 +522,45 @@
    sadd() {
      this.triggerEvent("updateShoppingCartHidden");
      this.triggerEvent("updateCloudLearning");
      console.log(789);
    },
  },
    findParentById(arr, id) {
      for (let i = 0; i < arr.length; i++) {
        const item = arr[i];
        // 检查当前项是否匹配（即它是不是我们要找的项）  
        if (item.id === id) {
          // 如果当前项就是我们要找的项，则它没有父级，返回 null  
          return null;
        }
        // 递归查找当前项的子项  
        const child = this.findChildById(item.children, id);
        if (child) {
          // 如果在子项中找到匹配的项，返回当前项作为父级  
          return item;
        }
      }
      // 如果没有找到匹配的父项，返回 null  
      return null;
    },

  catchtap() {},
    // 辅助函数，用于递归查找子项  
    findChildById(children, id) {
      if (!children) {
        return null;
      }
      for (let i = 0; i < children.length; i++) {
        const child = children[i];
        if (child.id === id) {
          // 如果找到匹配的项，返回它  
          return child;
        }
        // 递归检查子项的子项  
        const subChild = this.findChildById(child.children, id);
        if (subChild) {
          return subChild;
        }
      }
      // 如果没有找到匹配的项，返回 null  
      return null;
    }
  },
});

 packageBookService/pages/bookServices/detail/components/tree/index.wxml

@@ -167,6 +167,7 @@
          isShowCheck="{{isShowCheck}}"
          bookInfo="{{bookInfo}}"
          treeList="{{[citem]}}"
          learnList="{{learnList}}"
          itemId="{{itemId}}"
          tab="{{tab}}"
          buyIds="{{buyIds}}"