sl-sfy-safety/src/views/production-safety/productionSafetySystem/safetyOrganizationSystemManagement/components/collapseItem.vue

<template>
  <div v-if="level <= 10">
    <el-collapse-item :name="String(data.orgId)">
      <!-- 标题 -->
      <template #title>
        <div class="node" :style="{ marginLeft: (level - 1) * 2 + 'px' }">
            <div @click.stop="handleClick" class="cursor-pointer">
            {{ data?.orgName }}
            </div>
            <el-popconfirm hide-icon  popper-class="node-popconfirm">
                <template #reference>
                    <el-button size="small" class="handle" :icon="MoreFilled" @click.stop />
                </template>
                <template #actions="{ confirm, cancel }">
                    <ul>
                        <li><el-button type="primary" link :icon="Plus" @click.stop="bindingEvents('create', 'children', data)">新增</el-button></li>
                        <li><el-button type="primary" link :icon="Edit" @click.stop="bindingEvents('edit', 'children', data)">编辑</el-button></li>
                        <li><el-button type="primary" link :icon="Delete" @click.stop="bindingEvents('delate', 'children', data)">删除</el-button></li>
                    </ul>
                </template>
            </el-popconfirm>
        </div>
      </template>

      <!-- 子级递归 -->
      <div
        v-if="data.children && data.children.length && level < 10"
        class="ml-4">
        <el-collapse  accordion>
          <CollapseItem
            v-for="child in data.children"
            :key="child.id"
            :data="child"
            :level="level + 1"
            @click-node="handleClickItem"
            @create-node="(type, item) => emit('create-node', type, item)"
            @edit-node="(type, item) => emit('edit-node', type, item)"
            @delete-node="(type, item) => emit('delete-node', type, item)"
          />
        </el-collapse>
      </div>
      <div v-else>
        <el-empty description="未添加子组织" :image-size="40" />
      </div>
    </el-collapse-item>
  </div>
</template>

<script setup>
  import { defineProps, defineEmits, defineOptions, ref, inject } from 'vue'
  import {
  Delete,
  Edit,
  Plus,
  MoreFilled
} from '@element-plus/icons-vue'
// 必须给组件命名，才能递归
defineOptions({
  name: 'CollapseItem'
})
const childrenActiveName = ref('')
// const activeName = inject('activeName')
// 定义 props
const props = defineProps({
  data: {
    type: Object,
    required: true
  },
  level: {
    type: Number,
    default: 1
  }
})

// 定义事件
const emit = defineEmits(['click-node', 'create-node', 'edit-node', 'delete-node'])
// 新增、编辑、删除事件
const bindingEvents = (state, type, item)=>{
    switch(state){
        case 'create':
            emit('create-node',type, item)
            break;
        case 'edit':
            emit('edit-node',type, item)
            break;
        case 'delate':
            emit('delete-node',type, item)
            break;
        default:
            emit('create-node',type, item)
    }
}
// 点击当前项
const handleClick = () => {
  emit('click-node', props.data)
//   activeName.value = String(props.data.orgId)
}

// 接收子组件点击
const handleClickItem = (item) => {
  emit('click-node', item)
//   activeName.value = String(item.orgId)
}
</script>

<style scoped>
.ml-4 {
  margin-left: 16px;
}
.cursor-pointer {
  cursor: pointer;
}
.node {
  display:flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.handle {
    margin-right: 8px;
}
li{
    list-style: none;
    width:100%;
    text-align: center;
    padding:4px 0;
    margin: 4px 0;
    cursor: pointer;
}
/* 全局生效 /deep/ 穿透 */
/* :deep(.el-collapse-item__header) {
  border-left: 3px solid transparent;
  transition: all 0.2s;
} */

/* 选中展开的项 → 高亮 */
/* :deep(.el-collapse-item__header.is-active) {
  background-color: #f5f7fa !important;
  border-left: 3px solid #1677ff;
} */

/* 选中的标题文字高亮 */
/* :deep(.el-collapse-item__header.is-active .node) {
  color: #1677ff !important;
} */

/* hover 效果 */
/* :deep(.el-collapse-item__header:hover) {
  background: #fafafa;
} */
</style>