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,145 +1,141 @@
 <!-- MES 设备台账列表 -->
 <template>
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="100px"
-    >
-      <el-form-item label="设备编码" prop="code">
-        <el-input
-          v-model="queryParams.code"
-          placeholder="请输入设备编码"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="设备名称" prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="请输入设备名称"
-          clearable
-          @keyup.enter="handleQuery"
-          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"
-          placeholder="请选择所属车间"
-          clearable
-          class="!w-240px"
+  <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
+          class="-mb-15px"
+          :model="queryParams"
+          ref="queryFormRef"
+          :inline="true"
+          label-width="100px"
         >
-          <el-option
-            v-for="item in workshopList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="设备状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.MES_DV_MACHINERY_STATUS)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['mes:dv-machinery:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
-        </el-button>
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['mes:dv-machinery:export']"
-        >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
+          <el-form-item label="设备编码" prop="code">
+            <el-input
+              v-model="queryParams.code"
+              placeholder="请输入设备编码"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-240px"
+            />
+          </el-form-item>
+          <el-form-item label="设备名称" prop="name">
+            <el-input
+              v-model="queryParams.name"
+              placeholder="请输入设备名称"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-240px"
+            />
+          </el-form-item>
+          <el-form-item label="所属车间" prop="workshopId">
+            <el-select
+              v-model="queryParams.workshopId"
+              placeholder="请选择所属车间"
+              clearable
+              class="!w-240px"
+            >
+              <el-option
+                v-for="item in workshopList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="设备状态" prop="status">
+            <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.MES_DV_MACHINERY_STATUS)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+            <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+            <el-button
+              type="primary"
+              plain
+              @click="openForm('create')"
+              v-hasPermi="['mes:dv-machinery:create']"
+            >
+              <Icon icon="ep:plus" class="mr-5px" /> 新增
+            </el-button>
+            <el-button
+              type="success"
+              plain
+              @click="handleExport"
+              :loading="exportLoading"
+              v-hasPermi="['mes:dv-machinery:export']"
+            >
+              <Icon icon="ep:download" class="mr-5px" /> 导出
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </ContentWrap>
 
-  <!-- TODO @AI：左侧要是分类树；类似别的模块 -->
-
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="设备编码" align="center" prop="code" width="120" />
-      <el-table-column label="设备名称" align="center" prop="name" min-width="150" />
-      <el-table-column label="品牌" align="center" prop="brand" width="100" />
-      <el-table-column label="规格型号" align="center" prop="spec" width="120" />
-      <el-table-column label="设备类型" align="center" prop="machineryTypeName" width="120" />
-      <el-table-column label="所属车间" align="center" prop="workshopName" width="120" />
-      <el-table-column label="设备状态" align="center" prop="status" width="100">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.MES_DV_MACHINERY_STATUS" :value="scope.row.status" />
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        :formatter="dateFormatter"
-        width="180px"
-      />
-      <el-table-column label="操作" align="center" width="130">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['mes:dv-machinery:update']"
-          >
-            编辑
-          </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['mes:dv-machinery:delete']"
-          >
-            删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </ContentWrap>
+      <!-- 列表 -->
+      <ContentWrap>
+        <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+          <el-table-column label="设备编码" align="center" prop="code" width="120" />
+          <el-table-column label="设备名称" align="center" prop="name" min-width="150" />
+          <el-table-column label="品牌" align="center" prop="brand" width="100" />
+          <el-table-column label="规格型号" align="center" prop="spec" width="120" />
+          <el-table-column label="设备类型" align="center" prop="machineryTypeName" width="120" />
+          <el-table-column label="所属车间" align="center" prop="workshopName" width="120" />
+          <el-table-column label="设备状态" align="center" prop="status" width="100">
+            <template #default="scope">
+              <dict-tag :type="DICT_TYPE.MES_DV_MACHINERY_STATUS" :value="scope.row.status" />
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="创建时间"
+            align="center"
+            prop="createTime"
+            :formatter="dateFormatter"
+            width="180px"
+          />
+          <el-table-column label="操作" align="center" width="130">
+            <template #default="scope">
+              <el-button
+                link
+                type="primary"
+                @click="openForm('update', scope.row.id)"
+                v-hasPermi="['mes:dv-machinery:update']"
+              >
+                编辑
+              </el-button>
+              <el-button
+                link
+                type="danger"
+                @click="handleDelete(scope.row.id)"
+                v-hasPermi="['mes:dv-machinery:delete']"
+              >
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页 -->
+        <Pagination
+          :total="total"
+          v-model:page="queryParams.pageNo"
+          v-model:limit="queryParams.pageSize"
+          @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()
 })