ss

jiangping

2025-07-10 e6df0c0786cf335060e0b24d141844c392c4e2b4

 admin/src/components/common/Tree.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,145 @@
<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.actived === 1 }" v-show="item.fsStatus === 1 && item.childList.length > 0"></i>
                <i class="el-icon-caret-right color" v-show="item.childList.length > 0 && (item.fsStatus === 0 || !item.fsStatus)"></i>
                <div class="tree_item_label long-title-style" :title="item.name" :class="{ 'activeColor':  item.actived === 1 }">{{ item.name }}</div>
            </div>
            <div class="tree_childern" v-show="item.fsStatus === 1">
                <tree
                  :list="item.childList"
                  :alllist="alllist"
                  :defaultProps="defaultProps"
                  @callback="callback"
                />
                 <!-- @callback="callback" -->
            </div>
        </div>
    </div>
</template>

<script>
// import Bus from '@/utils/eventBus'
export default {
  name: 'tree',
  props: {
    list: {
      type: Array,
      required: false,
      default: () => []
    },
    alllist: {
      type: Array,
      required: false,
      default: () => []
    },
    defaultProps: {
      type: Object,
      require: false,
      default: () => {
        return {
          name: 'name',
          status: 'status',
          children: 'children',
          id: 'id',
          erpId: 'erpId'
        }
      }
    }
  },
  data() {
    return {
      tempItem: {
        id: null,
        name: null,
        erpId: null
      }
    }
  },
  methods: {
    listForList(){
      // console.log('===============================',this.alllist)
    },
    // ç‚¹å‡»å½“前项
    clickIten (item) {
      // this.listForList()
      const fsDate = item.fsDate === 0 || !item.fsDate ? 1 : 0
      this.alllist.forEach(i => {
        i.fsDate = 0
        i.actived = 0
        this.recursion1(i.childList)
      })
      item.fsDate = fsDate
      item.actived = 1
      if (item.childList.length > 0) {
        item.fsStatus === 0 || !item.fsStatus ? item.fsStatus = 1 : item.fsStatus = 0
      }
      this.$emit('callback', item, item)
    },
    recursion1 (children) {
      if (!children || children.length === 0){
        return
      }
      children.forEach(item => {
        item.actived = 0
        if (item.childList && item.childList.length > 0) {
          this.recursion1(item.childList)
        }
        // item[this.defaultProps.status] = false
        // if (item[this.defaultProps.children]) {
        //   this.recursion(item[this.defaultProps.children])
        // }
      })
    },
    callback (data, item) {
      if (this.tempItem.id === data.id) {
        this.tempItem = {}
      } else {
        this.tempItem.id = data.id
        this.tempItem.name = data.name
      }
      this.$emit('callback', data, item)
    }
  }
}
</script>

<style lang="scss" scoped>
.tree {
    /*width: 100%;*/
    /*height: auto;*/
    /*border-radius: 5px;*/
    /*overflow: hidden;*/
    /*border: 1px solid #eeeeee;*/
    /*box-sizing: border-box;*/
    .tree_childern {
        margin-left: 20px;
    }
    .activeItem {
        background: #F4F7FC;
    }
    .tree_item {
        display: flex;
        align-items: center;
        height: 48px;
        cursor: pointer;
        padding-left: 10px;
        .tree_item_label {
            font-size: 14px;
            font-weight: 400;
            color: #333333;
            white-space: nowrap;
        }
        i {
            margin-right: 5px;
        }
        .color {
            color: #999999 !important;
        }
        .activeColor {
            color: #305ED5 !important;
        }
    }
}
</style>