feat(mes-dv): 设备台账列表添加左侧设备类型分类树

- 新增 MachineryTypeTree 组件，支持搜索过滤和点击/取消选择
- 列表页改为左树右表布局（4:20 比例），参考物料模块
- 移除搜索栏中的「设备类型」下拉（由左侧树代替）
- 重置时同时清空分类树选中状态

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/views/mes/dv/machinery/MachineryTypeTree.vue

@@ -0,0 +1,78 @@
+<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>

src/views/mes/dv/machinery/index.vue

@@ -1,5 +1,13 @@
 <!-- MES 设备台账列表 -->
 <template>
+  <el-row :gutter="20">
+    <!-- 左侧分类树 -->
+    <el-col :span="4" :xs="24">
+      <ContentWrap class="h-1/1">
+        <MachineryTypeTree @node-click="handleTypeNodeClick" />
+      </ContentWrap>
+    </el-col>
+    <el-col :span="20" :xs="24">
       <ContentWrap>
         <!-- 搜索工作栏 -->
         <el-form
@@ -27,18 +35,6 @@
               class="!w-240px"
             />
           </el-form-item>
-      <el-form-item label="设备类型" prop="machineryTypeId">
-        <el-tree-select
-          v-model="queryParams.machineryTypeId"
-          :data="machineryTypeTree"
-          :props="defaultProps"
-          check-strictly
-          default-expand-all
-          placeholder="请选择设备类型"
-          clearable
-          class="!w-240px"
-        />
-      </el-form-item>
           <el-form-item label="所属车间" prop="workshopId">
             <el-select
               v-model="queryParams.workshopId"
@@ -88,8 +84,6 @@
         </el-form>
       </ContentWrap>
 
-  <!-- TODO @AI：左侧要是分类树；类似别的模块 -->
-
       <!-- 列表 -->
       <ContentWrap>
         <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
@@ -140,6 +134,8 @@
           @pagination="getList"
         />
       </ContentWrap>
+    </el-col>
+  </el-row>
 
   <!-- 表单弹窗：添加/修改 -->
   <MachineryForm ref="formRef" @success="getList" />
@@ -149,10 +145,9 @@
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { DvMachineryApi, DvMachineryVO } from '@/api/mes/dv/machinery'
-import { DvMachineryTypeApi } from '@/api/mes/dv/machinery/type'
 import { MdWorkshopApi, MdWorkshopVO } from '@/api/mes/md/workstation/workshop'
-import { defaultProps, handleTree } from '@/utils/tree'
 import MachineryForm from './MachineryForm.vue'
+import MachineryTypeTree from './MachineryTypeTree.vue'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 
 defineOptions({ name: 'MesDvMachinery' })
@@ -174,7 +169,6 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
-const machineryTypeTree = ref<any[]>([]) // 设备类型树
 const workshopList = ref<MdWorkshopVO[]>([]) // 车间列表
 
 /** 查询列表 */
@@ -198,6 +192,13 @@ const handleQuery = () => {
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value.resetFields()
+  queryParams.machineryTypeId = undefined
+  handleQuery()
+}
+
+/** 处理分类树节点点击 */
+const handleTypeNodeClick = (row: any) => {
+  queryParams.machineryTypeId = row?.id
   handleQuery()
 }
 
@@ -240,9 +241,6 @@ const handleExport = async () => {
 /** 初始化 **/
 onMounted(async () => {
   await getList()
-  // 加载设备类型树
-  const typeData = await DvMachineryTypeApi.getMachineryTypeSimpleList()
-  machineryTypeTree.value = handleTree(typeData)
   // 加载车间列表
   workshopList.value = await MdWorkshopApi.getWorkshopSimpleList()
 })