feat(mes)：重构 tm-tool-type-tree.vue 为 list.vue 更合理

apps/web-antd/src/views/mes/tm/tool/index.vue

@@ -13,7 +13,7 @@ import { Button, Card, message } from 'ant-design-vue';
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteTool, exportTool, getToolPage } from '#/api/mes/tm/tool';
 import { $t } from '#/locales';
-import { TmToolTypeTree } from '#/views/mes/tm/tool/type/components';
+import { TmToolTypeList } from '#/views/mes/tm/tool/type/components';
 
 import { useGridColumns, useGridFormSchema } from './data';
 import Form from './modules/form.vue';
@@ -66,8 +66,8 @@ async function handleExport() {
   downloadFileFromBlobPart({ fileName: '工具.xls', source: data });
 }
 
-/** 工具类型树点击 */
-function handleToolTypeNodeClick(row: MesTmToolTypeApi.ToolType | undefined) {
+/** 工具类型选中变化 */
+function handleToolTypeSelect(row: MesTmToolTypeApi.ToolType | undefined) {
   selectedToolTypeId.value = row?.id;
   handleRefresh();
 }
@@ -116,7 +116,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="handleRefresh" />
     <div class="flex h-full w-full">
       <Card class="mr-4 h-full w-1/6">
-        <TmToolTypeTree @node-click="handleToolTypeNodeClick" />
+        <TmToolTypeList @select="handleToolTypeSelect" />
       </Card>
       <div class="w-5/6">
         <Grid table-title="工具列表">

apps/web-antd/src/views/mes/tm/tool/type/components/index.ts

@@ -1,2 +1,2 @@
+export { default as TmToolTypeList } from './tm-tool-type-list.vue';
 export { default as TmToolTypeSelect } from './tm-tool-type-select.vue';
-export { default as TmToolTypeTree } from './tm-tool-type-tree.vue';

apps/web-antd/src/views/mes/tm/tool/type/components/tm-tool-type-list.vue

@@ -11,10 +11,10 @@ import { Input } from 'ant-design-vue';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getToolTypeSimpleList } from '#/api/mes/tm/tool/type';
 
-defineOptions({ name: 'TmToolTypeTree' });
+defineOptions({ name: 'TmToolTypeList' });
 
 const emit = defineEmits<{
-  nodeClick: [row?: MesTmToolTypeApi.ToolType];
+  select: [row?: MesTmToolTypeApi.ToolType];
 }>();
 const selectedId = ref<number>(); // 当前选中工具类型编号
 const filterText = ref(''); // 工具类型搜索关键字
@@ -47,15 +47,15 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<MesTmToolTypeApi.ToolType>,
   gridEvents: {
     cellClick: ({ row }: { row: MesTmToolTypeApi.ToolType }) => {
-      // 再次点击同一节点：取消选中
+      // 再次点击同一项：取消选中
       if (selectedId.value === row.id) {
         selectedId.value = undefined;
         gridApi.grid.clearCurrentRow();
-        emit('nodeClick', undefined);
+        emit('select', undefined);
         return;
       }
       selectedId.value = row.id;
-      emit('nodeClick', row);
+      emit('select', row);
     },
   },
 });
@@ -71,12 +71,12 @@ async function loadList() {
   refreshGridData();
 }
 
-/** 重置工具类型树 */
+/** 重置工具类型列表 */
 function reset() {
   selectedId.value = undefined;
   filterText.value = '';
   gridApi.grid.clearCurrentRow();
-  emit('nodeClick', undefined);
+  emit('select', undefined);
   refreshGridData();
 }
 

apps/web-ele/src/views/mes/tm/tool/index.vue

@@ -13,7 +13,7 @@ import { ElButton, ElCard, ElLoading, ElMessage } from 'element-plus';
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteTool, exportTool, getToolPage } from '#/api/mes/tm/tool';
 import { $t } from '#/locales';
-import { TmToolTypeTree } from '#/views/mes/tm/tool/type/components';
+import { TmToolTypeList } from '#/views/mes/tm/tool/type/components';
 
 import { useGridColumns, useGridFormSchema } from './data';
 import Form from './modules/form.vue';
@@ -63,8 +63,8 @@ async function handleExport() {
   downloadFileFromBlobPart({ fileName: '工具.xls', source: data });
 }
 
-/** 工具类型树点击 */
-function handleToolTypeNodeClick(row: MesTmToolTypeApi.ToolType | undefined) {
+/** 工具类型选中变化 */
+function handleToolTypeSelect(row: MesTmToolTypeApi.ToolType | undefined) {
   selectedToolTypeId.value = row?.id;
   handleRefresh();
 }
@@ -113,7 +113,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="handleRefresh" />
     <div class="flex h-full w-full">
       <ElCard class="mr-4 h-full w-1/6">
-        <TmToolTypeTree @node-click="handleToolTypeNodeClick" />
+        <TmToolTypeList @select="handleToolTypeSelect" />
       </ElCard>
       <div class="w-5/6">
         <Grid table-title="工具列表">

apps/web-ele/src/views/mes/tm/tool/type/components/index.ts

@@ -1,2 +1,2 @@
+export { default as TmToolTypeList } from './tm-tool-type-list.vue';
 export { default as TmToolTypeSelect } from './tm-tool-type-select.vue';
-export { default as TmToolTypeTree } from './tm-tool-type-tree.vue';

apps/web-ele/src/views/mes/tm/tool/type/components/tm-tool-type-list.vue

@@ -11,10 +11,10 @@ import { ElInput } from 'element-plus';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getToolTypeSimpleList } from '#/api/mes/tm/tool/type';
 
-defineOptions({ name: 'TmToolTypeTree' });
+defineOptions({ name: 'TmToolTypeList' });
 
 const emit = defineEmits<{
-  nodeClick: [row?: MesTmToolTypeApi.ToolType];
+  select: [row?: MesTmToolTypeApi.ToolType];
 }>();
 const selectedId = ref<number>(); // 当前选中工具类型编号
 const filterText = ref(''); // 工具类型搜索关键字
@@ -47,15 +47,15 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<MesTmToolTypeApi.ToolType>,
   gridEvents: {
     cellClick: ({ row }: { row: MesTmToolTypeApi.ToolType }) => {
-      // 再次点击同一节点：取消选中
+      // 再次点击同一项：取消选中
       if (selectedId.value === row.id) {
         selectedId.value = undefined;
         gridApi.grid.clearCurrentRow();
-        emit('nodeClick', undefined);
+        emit('select', undefined);
         return;
       }
       selectedId.value = row.id;
-      emit('nodeClick', row);
+      emit('select', row);
     },
   },
 });
@@ -71,12 +71,12 @@ async function loadList() {
   refreshGridData();
 }
 
-/** 重置工具类型树 */
+/** 重置工具类型列表 */
 function reset() {
   selectedId.value = undefined;
   filterText.value = '';
   gridApi.grid.clearCurrentRow();
-  emit('nodeClick', undefined);
+  emit('select', undefined);
   refreshGridData();
 }