intelligent-etmf-system-applet/pages/scan/upload/components/FolderTreeItem.vue

<template>
  <view class="folder-tree-item">
    <!-- 文件夹项 -->
    <view 
      class="folder-item" 
      :style="{ paddingLeft: (level * 40 + 24) + 'rpx' }"
      @click="handleToggle"
    >
      <!-- 展开/收起图标 -->
      <view class="expand-icon" v-if="hasChildren">
        <text class="icon-text">{{ isExpanded ? '▼' : '▶' }}</text>
      </view>
      <view class="expand-icon placeholder" v-else></view>
      
      <!-- 文件夹图标 -->
      <view class="folder-icon-wrapper">
        <image 
          :src="getFolderIcon(folder.type)" 
          mode="aspectFit" 
          class="folder-icon" 
        />
      </view>
      
      <!-- 文件夹名称 -->
      <text class="folder-name">{{ folder.name }}</text>
      
      <!-- 选择按钮 -->
      <view class="select-btn" @click.stop="handleSelect">
        <text class="select-text">选择</text>
      </view>
    </view>
    
    <!-- 子文件夹 -->
    <view v-if="isExpanded && hasChildren" class="children">
      <view
        v-for="child in folder.children"
        :key="child.id"
      >
        <folder-tree-item
          :folder="child"
          :level="level + 1"
          @select="handleChildSelect"
        />
      </view>
    </view>
    
    <!-- 调试：显示展开状态 -->
    <view v-if="hasChildren" style="padding: 10rpx 24rpx; background: #e3f2fd; font-size: 20rpx; color: #1976d2;">
      展开状态: {{ isExpanded ? '已展开' : '已收起' }} | 子节点数: {{ folder.children.length }}
    </view>
  </view>
</template>

<script>
export default {
  name: 'FolderTreeItem',
  // 递归组件需要在这里注册自己
  components: {
    FolderTreeItem: () => import('./FolderTreeItem.vue')
  },
  props: {
    folder: {
      type: Object,
      required: true
    },
    level: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      isExpanded: false
    }
  },
  computed: {
    hasChildren() {
      return this.folder.children && this.folder.children.length > 0
    }
  },
  methods: {
    // 获取文件夹图标
    getFolderIcon(type) {
      switch (type) {
        case 0:
          // 普通文件夹
          return '/static/pages/scan/folderSelect/folder.svg'
        case 1:
          // 国家
          return '/static/pages/scan/folderSelect/country.svg'
        case 2:
          // 中心
          return '/static/pages/scan/folderSelect/center.svg'
        default:
          return '/static/pages/scan/folderSelect/folder.svg'
      }
    },
    
    // 切换展开/收起
    handleToggle() {
      if (this.hasChildren) {
        this.isExpanded = !this.isExpanded
        
        // 强制更新
        this.$forceUpdate()
      }
    },
    
    // 选择当前文件夹
    handleSelect() {
      this.$emit('select', this.folder)
    },
    
    // 子节点选择事件
    handleChildSelect(folder) {
      this.$emit('select', folder)
    }
  }
}
</script>

<style lang="scss" scoped>
.folder-tree-item {
  .folder-item {
    display: flex;
    align-items: center;
    padding: 20rpx 24rpx;
    border-bottom: 1rpx solid #f5f5f5;
    
    &:active {
      background: #f8f8f8;
    }
    
    .expand-icon {
      width: 40rpx;
      height: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 8rpx;
      
      &.placeholder {
        visibility: hidden;
      }
      
      .icon-text {
        font-size: 20rpx;
        color: #999999;
      }
    }
    
    .folder-icon-wrapper {
      width: 48rpx;
      height: 48rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16rpx;
      
      .folder-icon {
        width: 48rpx;
        height: 48rpx;
      }
    }
    
    .folder-name {
      flex: 1;
      font-size: 28rpx;
      color: #333333;
    }
    
    .select-btn {
      padding: 8rpx 24rpx;
      background: #1ec9c9;
      border-radius: 24rpx;
      
      &:active {
        background: #1ab8b8;
      }
      
      .select-text {
        font-size: 24rpx;
        color: #ffffff;
        font-weight: 500;
      }
    }
  }
  
  .children {
    background: #fafafa;
  }
}
</style>