✨ feat(mes): 新增物料产品选择器 V2 组件
YunaiV
parent
9f9ac51edf
commit
1f9380ba90
|
|
@ -1,78 +0,0 @@
|
|||
<template>
|
||||
<div class="head-container">
|
||||
<el-input v-model="filterName" class="mb-20px" clearable placeholder="请输入分类名称">
|
||||
<template #prefix>
|
||||
<Icon icon="ep:search" />
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
:data="itemTypeList"
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
highlight-current
|
||||
node-key="id"
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ElTree } from 'element-plus'
|
||||
import { MdItemTypeApi } from '@/api/mes/md/item/type'
|
||||
import { defaultProps, handleTree } from '@/utils/tree'
|
||||
|
||||
defineOptions({ name: 'MesItemTypeTree' })
|
||||
|
||||
const filterName = ref('')
|
||||
const itemTypeList = ref<Tree[]>([])
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>()
|
||||
|
||||
/** 获得分类树 */
|
||||
const getTree = async () => {
|
||||
const res = await MdItemTypeApi.getItemTypeSimpleList()
|
||||
itemTypeList.value = []
|
||||
itemTypeList.value.push(...handleTree(res))
|
||||
}
|
||||
|
||||
/** 基于名字过滤 */
|
||||
const filterNode = (name: string, data: Tree) => {
|
||||
if (!name) {
|
||||
return true
|
||||
}
|
||||
return data.name.includes(name)
|
||||
}
|
||||
|
||||
/** 处理分类被点击 */
|
||||
let currentNode: any = {}
|
||||
const handleNodeClick = async (row: { [key: string]: any }, treeNode: any) => {
|
||||
if (currentNode && currentNode.name === row.name) {
|
||||
treeNode.checked = !treeNode.checked
|
||||
} else {
|
||||
treeNode.checked = true
|
||||
}
|
||||
if (treeNode.checked) {
|
||||
currentNode = row
|
||||
emits('node-click', row)
|
||||
} else {
|
||||
treeRef.value!.setCurrentKey(undefined)
|
||||
emits('node-click', undefined)
|
||||
currentNode = null
|
||||
}
|
||||
}
|
||||
const emits = defineEmits(['node-click'])
|
||||
|
||||
/** 监听过滤名称 */
|
||||
watch(filterName, (val) => {
|
||||
treeRef.value!.filter(val)
|
||||
})
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(async () => {
|
||||
await getTree()
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!--
|
||||
MES 物料分类树面板
|
||||
|
||||
功能：加载物料分类树 + 关键字过滤 + 点击节点通知父组件
|
||||
用法：<MdItemTypeTree @node-click="handleTypeClick" />
|
||||
说明：
|
||||
- 组件 mount 后自动加载数据，也可通过 ref 调用 loadTree() 手动刷新
|
||||
- 支持 toggle：点击已选中节点会取消选中（emit undefined）
|
||||
Events:
|
||||
nodeClick(data: MdItemTypeVO | undefined) — 点击树节点时触发；取消选中时为 undefined
|
||||
Expose:
|
||||
loadTree() — 手动刷新分类树
|
||||
clearCurrent() — 清除当前选中节点高亮
|
||||
-->
|
||||
<template>
|
||||
<el-input
|
||||
v-model="filterText"
|
||||
placeholder="搜索分类"
|
||||
clearable
|
||||
class="mb-12px"
|
||||
:prefix-icon="iconSearch"
|
||||
/>
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
:data="treeData"
|
||||
:props="treeProps"
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
default-expand-all
|
||||
highlight-current
|
||||
node-key="id"
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { MdItemTypeApi, MdItemTypeVO } from '@/api/mes/md/item/type'
|
||||
import { handleTree } from '@/utils/tree'
|
||||
import { Search as iconSearch } from '@element-plus/icons-vue'
|
||||
|
||||
defineOptions({ name: 'MdItemTypeTree' })
|
||||
|
||||
const emit = defineEmits<{
|
||||
nodeClick: [data: MdItemTypeVO | undefined]
|
||||
}>()
|
||||
|
||||
const treeRef = ref() // 树组件 Ref
|
||||
const filterText = ref('') // 搜索关键字
|
||||
const treeData = ref<MdItemTypeVO[]>([]) // 树形数据
|
||||
const treeProps = { children: 'children', label: 'name' } // 树属性映射
|
||||
let currentNodeId: number | undefined // 当前选中节点 ID（用于 toggle 判断）
|
||||
|
||||
/** 过滤树节点（按名称匹配） */
|
||||
const filterNode = (value: string, data: MdItemTypeVO) => {
|
||||
if (!value) {
|
||||
return true
|
||||
}
|
||||
return data.name?.includes(value)
|
||||
}
|
||||
|
||||
/** 监听搜索关键字变化，触发树过滤 */
|
||||
watch(filterText, (val) => {
|
||||
treeRef.value?.filter(val)
|
||||
})
|
||||
|
||||
/** 点击树节点：支持 toggle（再次点击同一节点取消选中） */
|
||||
const handleNodeClick = (data: MdItemTypeVO) => {
|
||||
if (currentNodeId === data.id) {
|
||||
// 再次点击同一节点：取消选中
|
||||
treeRef.value?.setCurrentKey(undefined)
|
||||
currentNodeId = undefined
|
||||
emit('nodeClick', undefined)
|
||||
} else {
|
||||
// 选中新节点
|
||||
currentNodeId = data.id
|
||||
emit('nodeClick', data)
|
||||
}
|
||||
}
|
||||
|
||||
/** 加载分类树数据 */
|
||||
const loadTree = async () => {
|
||||
const list = await MdItemTypeApi.getItemTypeSimpleList()
|
||||
treeData.value = handleTree(list)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadTree()
|
||||
})
|
||||
|
||||
/** 清除当前选中节点高亮 */
|
||||
const clearCurrent = () => {
|
||||
treeRef.value?.setCurrentKey(undefined)
|
||||
currentNodeId = undefined
|
||||
}
|
||||
|
||||
defineExpose({ loadTree, clearCurrent })
|
||||
</script>
|
||||
Loading…
Reference in New Issue