✨ feat(type): 新增设备类型树组件并调整导入路径
parent
65a0be187f
commit
934baa46d4
|
|
@ -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>
|
|
||||||
|
|
@ -128,7 +128,7 @@ import { DICT_TYPE } from '@/utils/dict'
|
||||||
import { dateFormatter } from '@/utils/formatTime'
|
import { dateFormatter } from '@/utils/formatTime'
|
||||||
import { DvMachineryApi, DvMachineryVO } from '@/api/mes/dv/machinery'
|
import { DvMachineryApi, DvMachineryVO } from '@/api/mes/dv/machinery'
|
||||||
import { MdWorkshopApi, MdWorkshopVO } from '@/api/mes/md/workstation/workshop'
|
import { MdWorkshopApi, MdWorkshopVO } from '@/api/mes/md/workstation/workshop'
|
||||||
import MachineryTypeTree from '../MachineryTypeTree.vue'
|
import MachineryTypeTree from '../type/components/MachineryTypeTree.vue'
|
||||||
|
|
||||||
defineOptions({ name: 'DvMachinerySelectDialog' })
|
defineOptions({ name: 'DvMachinerySelectDialog' })
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -182,7 +182,7 @@ import download from '@/utils/download'
|
||||||
import { DvMachineryApi, DvMachineryVO } from '@/api/mes/dv/machinery'
|
import { DvMachineryApi, DvMachineryVO } from '@/api/mes/dv/machinery'
|
||||||
import { MdWorkshopApi, MdWorkshopVO } from '@/api/mes/md/workstation/workshop'
|
import { MdWorkshopApi, MdWorkshopVO } from '@/api/mes/md/workstation/workshop'
|
||||||
import MachineryForm from './MachineryForm.vue'
|
import MachineryForm from './MachineryForm.vue'
|
||||||
import MachineryTypeTree from './MachineryTypeTree.vue'
|
import MachineryTypeTree from './type/components/MachineryTypeTree.vue'
|
||||||
import MachineryImportForm from './MachineryImportForm.vue'
|
import MachineryImportForm from './MachineryImportForm.vue'
|
||||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||||
import { BarcodeDetail } from '@/views/mes/wm/barcode/components'
|
import { BarcodeDetail } from '@/views/mes/wm/barcode/components'
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<!--
|
<!--
|
||||||
MES 工作站弹窗选择器(支持单选/多选)
|
MES 工作站弹窗选择器(支持单选/多选)
|
||||||
|
|
||||||
搜索字段:工作站编码、所属工序、所在车间(对齐 KTG simpletableSingle.vue)
|
搜索字段:工作站编码、所属工序、所在车间
|
||||||
表格列:工作站编码、工作站名称、工作站地点、所在车间、所属工序、备注
|
表格列:工作站编码、工作站名称、工作站地点、所在车间、所属工序、备注
|
||||||
|
|
||||||
Props:
|
Props:
|
||||||
|
|
|
||||||
|
|
@ -161,7 +161,7 @@
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</ContentWrap>
|
</ContentWrap>
|
||||||
<!-- 数据表格:对齐 KTG 展示字段 -->
|
<!-- 数据表格 -->
|
||||||
<ContentWrap>
|
<ContentWrap>
|
||||||
<el-table
|
<el-table
|
||||||
ref="tableRef"
|
ref="tableRef"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue