优化

MrShi

2025-08-19 30e858fa504b268b9b436afca0a1259cf6e8c488

 admin/src/components/common/Tree.vue

@@ -1,24 +1,24 @@
<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.fsStatus === 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.fsDate === 1 && item.childList.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.fsStatus === 1">
                <tree
                  :list="item.childList"
                  :defaultProps="defaultProps"
                  @callback="callback"
                />
                 <!-- @callback="callback" -->
            </div>
        </div>
  <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.fsStatus === 1 }" v-show="item.fsStatus === 1 && item.childList && item.childList.length > 0"></i>
        <i class="el-icon-caret-right color" v-show="item.childList && item.childList.length > 0 && (item.fsStatus === 0 || !item.fsStatus)"></i>
        <div class="tree_item_label long-title-style" :title="item.name" :class="{ 'activeColor': item.fsDate === 1 && item.childList && item.childList.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.fsStatus === 1">
        <tree
            :list="item.childList"
            :defaultProps="defaultProps"
            @callback="callback"
        />
        <!-- @callback="callback" -->
      </div>
    </div>
  </div>
</template>

<script>
@@ -116,39 +116,39 @@

<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;
  /*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;
    }
    .activeItem {
        background: #F4F7FC;
    i {
      margin-right: 5px;
    }
    .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;
        }
    .color {
      color: #999999 !important;
    }
    .activeColor {
      color: #305ED5 !important;
    }
  }
}
</style>