pms-iot-vue/src/views/pms/material/MaterialGroupTree.vue

<template>
  <div class="head-container">
    <el-input v-model="materialGroupName" class="mb-20px" clearable placeholder="请输入分类名称">
      <template #prefix>
        <Icon icon="ep:search" />
      </template>
    </el-input>
  </div>
  <div class="head-container">
    <el-tree
      ref="treeRef"
      :data="materialGroupList"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      :props="defaultProps"
      :default-expand-all="false"
      :default-expanded-keys="firstLevelKeys"
      highlight-current
      node-key="id"
      @node-click="handleNodeClick"
      @node-contextmenu="handleRightClick"
      style="height: 35em"
    />
  </div>
  <div
    v-show="menuVisible"
    class="custom-menu"
    :style="{ left: menuX + 'px', top: menuY + 'px' }"
  >
    <ul>
      <li @click="handleMenuClick('add')">新增子节点</li>
      <li @click="handleMenuClick('edit')">重命名</li>
      <li @click="handleMenuClick('delete')">删除</li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { ElTree } from 'element-plus'
import * as MaterialGroupApi from '@/api/pms/materialgroup'
import { defaultProps, handleTree } from '@/utils/tree'
import { useTreeStore } from '@/store/modules/materialGroupTreeStore'

defineOptions({ name: 'MaterialGroupTree' })

const treeStore = useTreeStore();
const materialGroupName = ref('')
const materialGroupList = ref<Tree[]>([]) // 树形结构
const treeRef = ref<InstanceType<typeof ElTree>>()
const menuVisible = ref(false);
const menuX = ref(0);
const menuY = ref(0);
let selectedNode = null;
const firstLevelKeys = ref([])

const handleRightClick = (event, { node, data }) => {
  event.preventDefault();
  menuX.value = event.clientX;
  menuY.value = event.clientY;
  selectedNode = data; // 存储当前操作的节点数据 ‌:ml-citation{ref="7" data="citationList"}
  menuVisible.value = true;
};

const handleMenuClick = (action) => {
  switch(action) {
    case 'add':
      // 调用新增节点逻辑 ‌:ml-citation{ref="4" data="citationList"}
      break;
    case 'edit':
      // 调用编辑节点逻辑 ‌:ml-citation{ref="7" data="citationList"}
      break;
    case 'delete':
      // 调用删除节点逻辑 ‌:ml-citation{ref="4" data="citationList"}
      break;
  }
  menuVisible.value = false;
};
/** 获得物料组树 */
const getTree = async () => {
  const res = await MaterialGroupApi.getSimpleMaterialGroupList()
  materialGroupList.value = []
  let device: Tree = { id: 0, name: '物料组分类', children: [] }
  device.children = handleTree(res)
  materialGroupList.value.push(device)
  // materialGroupList.value.push(...handleTree(res))
  firstLevelKeys.value = materialGroupList.value.map(node => node.id);
}

/** 基于名字过滤 */
const filterNode = (name: string, data: Tree) => {
  if (!name) return true
  return data.name.includes(name)
}

/** 处理物料组被点击 */
const handleNodeClick = async (row: { [key: string]: any }) => {
  emits('node-click', row)
  treeStore.setSelectedId(row.id);
}
const emits = defineEmits(['node-click'])

/** 监听 materialGroupName */
watch(materialGroupName, (val) => {
  treeRef.value!.filter(val)
})

/** 初始化 */
onMounted(async () => {
  await getTree()
})
</script>
<style lang="scss" scoped>
.custom-menu {
  position: fixed;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
  z-index: 1000;
}
.custom-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.custom-menu li {
  padding: 8px 20px;
  cursor: pointer;
}
.custom-menu li:hover {
  background: #f5f5f5;
}
</style>