更改头部

nidapeng

2024-03-08 a127d6f905fa2a3a47e2dd872ca24db70c158dd2

 admin/src/components/common/Tree.vue

@@ -1,33 +1,18 @@
<template>
<!--    <div class="tree">-->
<!--        <div v-for="(item, index) of list" :key="index" @click.stop="clickIten(item)">-->
<!--            <div class="tree_item">-->
<!--                <i class="el-icon-caret-bottom" :class="{ 'activeColor': item[defaultProps.status] }" v-show="item[defaultProps.status] && item[defaultProps.children]"></i>-->
<!--                <i class="el-icon-caret-right color" v-show="item[defaultProps.children] && !item[defaultProps.status]"></i>-->
<!--                <div class="tree_item_label long-title-style" :title="item[defaultProps.name]" :class="{ 'activeColor': item[defaultProps.status] && !item[defaultProps.children] }">{{ item[defaultProps.name] }}</div>-->
<!--            </div>-->
<!--            <div class="tree_childern" v-show="item[defaultProps.status]">-->
<!--                <tree-->
<!--                  :list="item[defaultProps.children]"-->
<!--                  :defaultProps="defaultProps"-->
<!--                  @callback="callback"-->
<!--                />-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
    <div class="tree">
        <div v-for="(item, index) in list" :key="index" @click.stop="clickIten(item)">
        <div v-for="(item, index) of list" :key="index" @click.stop="clickIten(item)">
            <div class="tree_item">
                <i class="el-icon-caret-bottom" :class="{ 'activeColor': item.status }" v-show="item.status === 1 && item.companyDTOList.length > 0"></i>
                <i class="el-icon-caret-right color" v-show="item.companyDTOList.length > 0 && item.status === 0"></i>
                <div class="tree_item_label long-title-style" :title="item.name" :class="{ 'activeColor': item.status === 1 && item.companyDTOList.length === 0 }">{{ item.name }}</div>
                <i class="el-icon-caret-bottom" :class="{ 'activeColor': item[defaultProps.status] }" v-show="item[defaultProps.status] && item[defaultProps.children]"></i>
                <i class="el-icon-caret-right color" v-show="item[defaultProps.children] && !item[defaultProps.status]"></i>
                <div class="tree_item_label long-title-style" :title="item[defaultProps.name]" :class="{ 'activeColor': item[defaultProps.status] && !item[defaultProps.children] }">{{ item[defaultProps.name] }}</div>
            </div>
            <div class="tree_childern" v-show="item.status === 1">
            <div class="tree_childern" v-show="item[defaultProps.status]">
                <tree
                    :list="item.companyDTOList"
                    :defaultProps="defaultProps"
                    @callback="callback"
                  :list="item[defaultProps.children]"
                  :defaultProps="defaultProps"
                  @callback="callback"
                />
                 <!-- @callback="callback" -->
            </div>
        </div>
    </div>
@@ -56,7 +41,7 @@
      }
    }
  },
  data () {
  data() {
    return {
      tempItem: {
        id: null,
@@ -67,41 +52,33 @@
  methods: {
    // 点击当前项
    clickIten (item) {
      this.recursion(this.list)
      item.status === 0 ? item.status = 1 : item.status = 0
      // item[this.defaultProps.status] = !item[this.defaultProps.status]
      // this.list.forEach(subItem => {
      //   if ((subItem[this.defaultProps.id] !== item[this.defaultProps.id] && subItem[this.defaultProps.status]) || (this.list.length === 1 && subItem[this.defaultProps.status] === false)) {
      //     subItem[this.defaultProps.status] = false
      //     if (subItem[this.defaultProps.children]) {
      //       this.recursion(subItem[this.defaultProps.children])
      //     }
      //   }
      // })
      // if (this.tempItem.id === item[this.defaultProps.id]) {
      //   this.tempItem = {
      //     id: null,
      //     name: null
      //   }
      // } else {
      //   this.tempItem.id = item[this.defaultProps.id]
      //   this.tempItem.name = item[this.defaultProps.name]
      // }

      this.$emit('callback', item)
      item[this.defaultProps.status] = !item[this.defaultProps.status]
      this.list.forEach(subItem => {
        if ((subItem[this.defaultProps.id] !== item[this.defaultProps.id] && subItem[this.defaultProps.status]) || (this.list.length === 1 && subItem[this.defaultProps.status] === false)) {
          subItem[this.defaultProps.status] = false
          if (subItem[this.defaultProps.children]) {
            this.recursion(subItem[this.defaultProps.children])
          }
        }
      })
      if (this.tempItem['id'] === item[this.defaultProps.id]) {
        this.tempItem = {
          id: null,
          name: null
        }
      } else {
        this.tempItem.id = item[this.defaultProps.id]
        this.tempItem.name = item[this.defaultProps.name]
      }
    
      this.$emit('callback', this.tempItem, item)
    },
    // 递归方法
    recursion (children) {
      // children.forEach(item => {
      //   item[this.defaultProps.status] = false
      //   if (item[this.defaultProps.children]) {
      //     this.recursion(item[this.defaultProps.children])
      //   }
      // })
      children.forEach(item => {
        item.status = 0
        if (item.companyDTOList.length > 0) {
          this.recursion(item.companyDTOList)
        item[this.defaultProps.status] = false
        if (item[this.defaultProps.children]) {
          this.recursion(item[this.defaultProps.children])
        }
      })
    },