vue-cascade
/
cascadePanelTabs.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./vue/element_ui.css" />
    <script src="./vue/vue.js"></script>
    <script src="./vue/unocss.js"></script>
    <script src="./vue/element_ui.js"></script>
    <script src="./vue/http-vue-loader.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="h-100vh grid place-items-center">
        <div>
          <div class="flex items-center flex-wrap gap-20px mb-20px">
            <div
              v-for="item in warehouseList"
              @click="changeStore(item.id)"
              class="px-10px cursor-pointer w-max py-5px rounded-6px flex items-center text-14px"
              :class="[warehouse_id == item.id ? 'bg-#0FA3FF text-#fff' : 'bg-#000000/3 text-#4E5969']"
            >
              <div>{{item.name}}</div>
            </div>

            <button @click="submit">打印结构</button>
          </div>
          <div class="h-455px flex flex-col border-1px border-solid border-#eee w-885px">
            <div class="h-42px flex items-center bg-#F4F7FA pl-15px pr-25px">
              <div class="flex items-center">
                <el-checkbox v-model="checked" @change="changeAll">全选商品</el-checkbox>

                （{{getCheckAll}}/{{lastLevelTotalCount}}）
              </div>

              <div class="ml-auto flex items-center cursor-pointer" @click="changeAll(false)">
                <i class="el-icon-delete"></i>
                <div class="text-14px ml-5px">清除</div>
              </div>
            </div>

            <div class="flex-1 h-0">
              <cascade-panel :datalist="dataList">
                <template #list="slotProps">
                  <div class="min-w-120px pl-15px h-32px cursor-pointer flex items-center">
                    <el-checkbox :indeterminate="getCheckStatus(slotProps.data)" v-model="slotProps.data.isChecked" @change="(e) => getData(e, slotProps.data)"></el-checkbox>
                    <div class="ml-10px">{{ slotProps.data.label }}</div>
                    <div v-if="slotProps.data.level && slotProps.data.level == 1">（{{ getLastCheck(slotProps.index)}}）</div>
                  </div>
                </template>
              </cascade-panel>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      new Vue({
        el: '#app',
        components: {
          cascadePanel: httpVueLoader('./components/cascadePanel.vue'),
        },
        data() {
          return {
            checked: false,
            dataList: [],
            selectedItems: {
              1: ['3', '4'],
            },

            warelist: {
              1: [
                {
                  value: '1',
                  label: '指南',
                  level: 1,
                  isChecked: false,
                  children: [
                    {
                      value: '2',
                      label: '设计原则',
                      isChecked: false,
                      parent: null,
                      children: [
                        {
                          value: '3',
                          label: '一致',
                          isChecked: false,
                          parent: null,
                          children: [],
                        },
                        {
                          value: '4',
                          label: '反馈',
                          isChecked: false,
                          parent: null,
                          children: [],
                        },
                      ],
                    },
                    {
                      value: '5',
                      label: '导航',
                      isChecked: false,
                      parent: null,
                      children: [
                        {
                          value: '6',
                          label: '侧向导航',
                          isChecked: false,
                          parent: null,
                          children: [],
                        },
                      ],
                    },
                  ],
                },
              ],
              2: [
                {
                  value: '10',
                  label: '测试',
                  level: 1,
                  isChecked: false,
                  children: [
                    {
                      value: '11',
                      label: '测试11',
                      isChecked: false,
                      parent: null,
                      children: [],
                    },
                    {
                      value: '12',
                      label: '测试22',
                      isChecked: false,
                      parent: null,
                      children: [],
                    },
                  ],
                },
              ],
            },

            warehouse_id: 1,
            warehouseList: [
              {
                name: '测试1',
                id: 1,
              },
              {
                name: '测试2',
                id: 2,
              },
            ],
          }
        },
        created() {
          // 回显
          // for (let i of this.dataList) {
          // this.echoData(i)
          //   this.addParentRef(i)
          //   console.log(this.dataList, '22')
          // }
          this.dataList = this.warelist[this.warehouse_id]

          for (let i of this.dataList) {
            this.addParentRef(i)
            this.echoData(i)
          }
        },
        watch: {
          dataList: {
            deep: true,
            handler(newVal, oldVal) {
              this.selectedItems[this.warehouse_id] = []
              this.collectSelectedNodes(newVal)
              console.log(this.selectedItems, 'gouxun')
            },
          },
        },
        computed: {
          getLastCheck() {
            return (i) => {
              let total = 0

              function countLastLevelChecked(node) {
                if (node.children?.length > 0) {
                  node.children.forEach((child) => {
                    countLastLevelChecked(child)
                  })
                } else {
                  if (node.isChecked) {
                    total++
                  }
                }
              }
              // 调用递归函数计算选中数量
              countLastLevelChecked(this.dataList[i])

              return total
            }
          },
          getCheckAll() {
            let total = 0
            for (let i in this.dataList) {
              total += this.getLastCheck(i)
            }
            return total
          },
          lastLevelTotalCount() {
            let total = 0

            const countLastLevelNodes = (node, level) => {
              if (node.children?.length > 0) {
                node.children.forEach((child) => {
                  countLastLevelNodes(child, level + 1)
                })
              } else {
                total++
              }
            }

            this.dataList.forEach((node) => {
              countLastLevelNodes(node, 0)
            })

            return total
          },
        },

        methods: {
          changeStore(id) {
            this.warehouse_id = id
            this.dataList = this.warelist[id]
            for (let i of this.dataList) {
              this.addParentRef(i)
            }
          },
          getCheckStatus(tree) {
            if (tree.children && tree.children.length > 0) {
              if (!tree.children.every((child) => child.isChecked)) {
                for (const node of tree.children) {
                  if (node.isChecked) {
                    return true
                  }
                  if (node.children && node.children.length > 0) {
                    const childResult = this.getCheckStatus(node.children)
                    if (childResult) {
                      return true
                    }
                  }
                }
              } else {
                return false
              }
            }
            return false
          },

          getData(isChecked, data) {
            if (data.children?.length > 0) {
              data.isChecked = isChecked
              data.children.forEach((item) => {
                this.getData(isChecked, item)
              })
              if (data.parent) {
                this.updateParent(data)
              }
            } else {
              data.isChecked = isChecked
              if (data.parent) {
                this.updateParent(data)
              }
            }
          },
          updateParent(node) {
            if (node.parent) {
              const parent = node.parent
              if (parent.children.every((child) => child.isChecked)) {
                parent.isChecked = true
              } else {
                parent.isChecked = false
              }
              this.updateParent(parent) // 递归更新父节点的 isChecked 属性
            }
          },
          // 操作勾选的vlaue
          collectSelectedNodes(nodes) {
            nodes.forEach((node) => {
              if (node.isChecked && node.children.length === 0) {
                this.selectedItems[this.warehouse_id].push(node.value)
              }
              if (node.children && node.children.length > 0) {
                this.collectSelectedNodes(node.children)
              }
            })
          },

          // 回显
          echoData(node) {
            if (this.selectedItems[this.warehouse_id].includes(node.value)) {
              node.isChecked = true // 如果 selectedItems 包含当前节点的 value，则将 isChecked 设置为 true
            } else {
              node.isChecked = false
            }
            if (node.parent) {
              this.updateParent(node)
            }
            if (node.children && node.children.length > 0) {
              node.children.forEach((child) => this.echoData(child)) // 递归处理子节点
            }
          },

          // 添加父节点引用
          addParentRef(node, parent) {
            node.parent = parent
            if (node.children) {
              node.children.forEach((child) => this.addParentRef(child, node))
            }
          },
          submit() {
            let goods_id = []
            for (let a in this.selectedItems) {
              goods_id.push(...this.selectedItems[a])
            }
            console.log(goods_id)
          },
          // 全选
          changeAll(e) {
            for (let i of this.dataList) {
              this.getData(e, i)
            }
            if (!e) {
              this.checked = false
            }
          },
        },
      })
    </script>
  </body>
</html>