feat(type): 新增设备类型树组件并调整导入路径

pull/871/MERGE
YunaiV 2026-04-06 20:20:23 +08:00
parent 65a0be187f
commit 934baa46d4
6 changed files with 108 additions and 82 deletions

View File

@ -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="machineryTypeList"
: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 { DvMachineryTypeApi } from '@/api/mes/dv/machinery/type'
import { defaultProps, handleTree } from '@/utils/tree'
defineOptions({ name: 'MachineryTypeTree' })
const filterName = ref('')
const machineryTypeList = ref<Tree[]>([])
const treeRef = ref<InstanceType<typeof ElTree>>()
/** 获得分类树 */
const getTree = async () => {
const res = await DvMachineryTypeApi.getMachineryTypeSimpleList()
machineryTypeList.value = []
machineryTypeList.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>

View File

@ -128,7 +128,7 @@ import { DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import { DvMachineryApi, DvMachineryVO } from '@/api/mes/dv/machinery'
import { MdWorkshopApi, MdWorkshopVO } from '@/api/mes/md/workstation/workshop'
import MachineryTypeTree from '../MachineryTypeTree.vue'
import MachineryTypeTree from '../type/components/MachineryTypeTree.vue'
defineOptions({ name: 'DvMachinerySelectDialog' })

View File

@ -182,7 +182,7 @@ import download from '@/utils/download'
import { DvMachineryApi, DvMachineryVO } from '@/api/mes/dv/machinery'
import { MdWorkshopApi, MdWorkshopVO } from '@/api/mes/md/workstation/workshop'
import MachineryForm from './MachineryForm.vue'
import MachineryTypeTree from './MachineryTypeTree.vue'
import MachineryTypeTree from './type/components/MachineryTypeTree.vue'
import MachineryImportForm from './MachineryImportForm.vue'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { BarcodeDetail } from '@/views/mes/wm/barcode/components'

View File

@ -0,0 +1,104 @@
<!--
MES 设备类型树面板
功能加载设备类型树 + 关键字过滤 + 点击节点通知父组件
用法<MachineryTypeTree @node-click="handleTypeClick" />
说明
- 组件 mount 后自动加载数据也可通过 ref 调用 loadTree() 手动刷新
- 支持 toggle点击已选中节点会取消选中emit undefined
Events:
nodeClick(data: DvMachineryTypeVO | undefined) 点击树节点时触发取消选中时为 undefined
Expose:
loadTree() 手动刷新分类树
clearCurrent() 清除当前选中节点高亮
reset() 重置整个树状态清高亮 + 清搜索词
-->
<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 { DvMachineryTypeApi, DvMachineryTypeVO } from '@/api/mes/dv/machinery/type'
import { handleTree } from '@/utils/tree'
import { Search as iconSearch } from '@element-plus/icons-vue'
defineOptions({ name: 'MachineryTypeTree' })
const emit = defineEmits<{
nodeClick: [data: DvMachineryTypeVO | undefined]
}>()
const treeRef = ref() // Ref
const filterText = ref('') //
const treeData = ref<DvMachineryTypeVO[]>([]) //
const treeProps = { children: 'children', label: 'name' } //
let currentNodeId: number | undefined // ID toggle
/** 过滤树节点(按名称匹配) */
const filterNode = (value: string, data: DvMachineryTypeVO) => {
if (!value) {
return true
}
return data.name?.includes(value)
}
/** 监听搜索关键字变化,触发树过滤 */
watch(filterText, (val) => {
treeRef.value?.filter(val)
})
/** 点击树节点:支持 toggle再次点击同一节点取消选中 */
const handleNodeClick = (data: DvMachineryTypeVO) => {
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 DvMachineryTypeApi.getMachineryTypeSimpleList()
treeData.value = handleTree(list)
}
onMounted(() => {
loadTree()
})
/** 清除当前选中节点高亮 */
const clearCurrent = () => {
treeRef.value?.setCurrentKey(undefined)
currentNodeId = undefined
}
/** 重置整个树状态(清高亮 + 清搜索词) */
const reset = () => {
clearCurrent()
filterText.value = ''
}
defineExpose({ loadTree, clearCurrent, reset })
</script>

View File

@ -1,7 +1,7 @@
<!--
MES 工作站弹窗选择器支持单选/多选
搜索字段工作站编码所属工序所在车间对齐 KTG simpletableSingle.vue
搜索字段工作站编码所属工序所在车间
表格列工作站编码工作站名称工作站地点所在车间所属工序备注
Props:

View File

@ -161,7 +161,7 @@
</el-form-item>
</el-form>
</ContentWrap>
<!-- 数据表格对齐 KTG 展示字段 -->
<!-- 数据表格 -->
<ContentWrap>
<el-table
ref="tableRef"