From eb0f2a5ff27fde3c27661de24afeab4b88e06261 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 24 May 2026 19:04:50 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=88mes=EF=BC=89=EF=BC=9Atm=20tool=20?=
 =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E8=BF=81=E7=A7=BB=E5=AE=8C=E6=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/views/mes/tm/tool/data.ts   | 305 +++++++++++++++++
 apps/web-antd/src/views/mes/tm/tool/index.vue | 174 ++++++++++
 .../src/views/mes/tm/tool/modules/form.vue    | 126 +++++++
 .../mes/tm/tool/type/components/index.ts      |   2 +
 .../type/components/tm-tool-type-select.vue   |  55 ++++
 .../type/components/tm-tool-type-tree.vue     | 106 ++++++
 .../src/views/mes/tm/tool/type/data.ts        | 209 ++++++++++++
 .../src/views/mes/tm/tool/type/index.vue      | 153 +++++++++
 .../views/mes/tm/tool/type/modules/form.vue   | 102 ++++++
 apps/web-ele/src/views/mes/tm/tool/data.ts    | 309 ++++++++++++++++++
 apps/web-ele/src/views/mes/tm/tool/index.vue  | 172 ++++++++++
 .../src/views/mes/tm/tool/modules/form.vue    | 126 +++++++
 .../mes/tm/tool/type/components/index.ts      |   2 +
 .../type/components/tm-tool-type-select.vue   |  52 +++
 .../type/components/tm-tool-type-tree.vue     | 106 ++++++
 .../src/views/mes/tm/tool/type/data.ts        | 208 ++++++++++++
 .../src/views/mes/tm/tool/type/index.vue      | 151 +++++++++
 .../views/mes/tm/tool/type/modules/form.vue   | 102 ++++++
 18 files changed, 2460 insertions(+)
 create mode 100644 apps/web-antd/src/views/mes/tm/tool/data.ts
 create mode 100644 apps/web-antd/src/views/mes/tm/tool/index.vue
 create mode 100644 apps/web-antd/src/views/mes/tm/tool/modules/form.vue
 create mode 100644 apps/web-antd/src/views/mes/tm/tool/type/components/index.ts
 create mode 100644 apps/web-antd/src/views/mes/tm/tool/type/components/tm-tool-type-select.vue
 create mode 100644 apps/web-antd/src/views/mes/tm/tool/type/components/tm-tool-type-tree.vue
 create mode 100644 apps/web-antd/src/views/mes/tm/tool/type/data.ts
 create mode 100644 apps/web-antd/src/views/mes/tm/tool/type/index.vue
 create mode 100644 apps/web-antd/src/views/mes/tm/tool/type/modules/form.vue
 create mode 100644 apps/web-ele/src/views/mes/tm/tool/data.ts
 create mode 100644 apps/web-ele/src/views/mes/tm/tool/index.vue
 create mode 100644 apps/web-ele/src/views/mes/tm/tool/modules/form.vue
 create mode 100644 apps/web-ele/src/views/mes/tm/tool/type/components/index.ts
 create mode 100644 apps/web-ele/src/views/mes/tm/tool/type/components/tm-tool-type-select.vue
 create mode 100644 apps/web-ele/src/views/mes/tm/tool/type/components/tm-tool-type-tree.vue
 create mode 100644 apps/web-ele/src/views/mes/tm/tool/type/data.ts
 create mode 100644 apps/web-ele/src/views/mes/tm/tool/type/index.vue
 create mode 100644 apps/web-ele/src/views/mes/tm/tool/type/modules/form.vue

diff --git a/apps/web-antd/src/views/mes/tm/tool/data.ts b/apps/web-antd/src/views/mes/tm/tool/data.ts
new file mode 100644
index 000000000..fbff2a1a3
--- /dev/null
+++ b/apps/web-antd/src/views/mes/tm/tool/data.ts
@@ -0,0 +1,305 @@
+import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesTmToolApi } from '#/api/mes/tm/tool';
+
+import { h, markRaw } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDateTime } from '@vben/utils';
+
+import { Button } from 'ant-design-vue';
+
+import { z } from '#/adapter/form';
+import { generateAutoCode } from '#/api/mes/md/autocode/record';
+import {
+  MesAutoCodeRuleCode,
+  MesMaintenTypeEnum,
+  MesToolStatusEnum,
+} from '#/views/mes/utils/constants';
+
+import { TmToolTypeSelect } from './type/components';
+
+/** 新增/修改工具的表单 */
+export function useFormSchema(formApi?: VbenFormApi): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '工具编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入工具编码',
+      },
+      dependencies: {
+        triggerFields: ['id'],
+        componentProps: (values) => ({ disabled: !!values.id }),
+      },
+      rules: 'required',
+      suffix: () =>
+        h(
+          Button,
+          {
+            type: 'default',
+            onClick: async () => {
+              const code = await generateAutoCode(MesAutoCodeRuleCode.TM_TOOL_CODE);
+              await formApi?.setFieldValue('code', code);
+            },
+          },
+          { default: () => '生成' },
+        ),
+    },
+    {
+      fieldName: 'name',
+      label: '工具名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入工具名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'toolTypeId',
+      label: '工具类型',
+      component: markRaw(TmToolTypeSelect),
+      componentProps: {
+        placeholder: '请选择工具类型',
+        onChange: async (row: any) => {
+          if (row?.codeFlag) {
+            await formApi?.setFieldValue('quantity', 1);
+            await formApi?.setFieldValue('availableQuantity', 1);
+          }
+        },
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'brand',
+      label: '品牌',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入品牌',
+      },
+    },
+    {
+      fieldName: 'specification',
+      label: '型号规格',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入型号规格',
+      },
+    },
+    {
+      fieldName: 'quantity',
+      label: '库存数量',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        min: 1,
+        onChange: async (value?: number) => {
+          const values = (await formApi?.getValues()) as MesTmToolApi.Tool | undefined;
+          if (!values?.id) {
+            await formApi?.setFieldValue('availableQuantity', value);
+          }
+        },
+        precision: 0,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'availableQuantity',
+      label: '可用数量',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        disabled: true,
+        min: 0,
+        precision: 0,
+      },
+      rules: z.number().default(1),
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        disabled: true,
+        options: getDictOptions(DICT_TYPE.MES_TM_TOOL_STATUS, 'number'),
+      },
+      rules: z.number().default(MesToolStatusEnum.STORE),
+    },
+    {
+      fieldName: 'maintenType',
+      label: '保养维护类型',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.MES_TM_MAINTEN_TYPE, 'number'),
+        placeholder: '请选择保养维护类型',
+      },
+    },
+    {
+      fieldName: 'nextMaintenDate',
+      label: '下次保养日期',
+      component: 'DatePicker',
+      componentProps: {
+        format: 'YYYY-MM-DD HH:mm:ss',
+        showTime: true,
+        valueFormat: 'x',
+      },
+      dependencies: {
+        triggerFields: ['maintenType'],
+        show: (values) => values.maintenType === MesMaintenTypeEnum.REGULAR,
+      },
+    },
+    {
+      fieldName: 'nextMaintenPeriod',
+      label: '下次保养周期',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        min: 1,
+        precision: 0,
+      },
+      dependencies: {
+        triggerFields: ['maintenType'],
+        show: (values) => values.maintenType === MesMaintenTypeEnum.USAGE,
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      formItemClass: 'col-span-3',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '工具编码',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入工具编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '工具名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入工具名称',
+      },
+    },
+    {
+      fieldName: 'brand',
+      label: '品牌',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入品牌',
+      },
+    },
+    {
+      fieldName: 'specification',
+      label: '型号规格',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入型号规格',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.MES_TM_TOOL_STATUS, 'number'),
+        placeholder: '请选择状态',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MesTmToolApi.Tool>['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '工具编码',
+      minWidth: 140,
+      slots: {
+        default: 'code',
+      },
+    },
+    { field: 'name', title: '工具名称', minWidth: 150 },
+    { field: 'toolTypeName', title: '工具类型', minWidth: 140 },
+    { field: 'brand', title: '品牌', minWidth: 120 },
+    { field: 'specification', title: '型号规格', minWidth: 140 },
+    { field: 'quantity', title: '库存数量', width: 100 },
+    { field: 'availableQuantity', title: '可用数量', width: 100 },
+    {
+      field: 'maintenType',
+      title: '保养维护类型',
+      width: 140,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_TM_MAINTEN_TYPE },
+      },
+    },
+    {
+      field: 'nextMaintenDate',
+      title: '下次保养',
+      width: 180,
+      formatter: ({ row }) => {
+        if (row.maintenType === MesMaintenTypeEnum.REGULAR) {
+          return row.nextMaintenDate ? formatDateTime(row.nextMaintenDate) : '-';
+        }
+        if (row.maintenType === MesMaintenTypeEnum.USAGE) {
+          return row.nextMaintenPeriod == null ? '-' : `${row.nextMaintenPeriod} 次`;
+        }
+        return '-';
+      },
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_TM_TOOL_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: {
+        default: 'actions',
+      },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mes/tm/tool/index.vue b/apps/web-antd/src/views/mes/tm/tool/index.vue
new file mode 100644
index 000000000..2998e3f75
--- /dev/null
+++ b/apps/web-antd/src/views/mes/tm/tool/index.vue
@@ -0,0 +1,174 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesTmToolApi } from '#/api/mes/tm/tool';
+import type { MesTmToolTypeApi } from '#/api/mes/tm/tool/type';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+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 { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const selectedToolTypeId = ref<number>(); // 当前选中的工具类型编号
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建工具 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 查看工具 */
+function handleDetail(row: MesTmToolApi.Tool) {
+  formModalApi.setData({ id: row.id, type: 'detail' }).open();
+}
+
+/** 编辑工具 */
+function handleEdit(row: MesTmToolApi.Tool) {
+  formModalApi.setData({ id: row.id, type: 'update' }).open();
+}
+
+/** 删除工具 */
+async function handleDelete(row: MesTmToolApi.Tool) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteTool(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 导出工具 */
+async function handleExport() {
+  const data = await exportTool(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '工具.xls', source: data });
+}
+
+/** 工具类型树点击 */
+function handleToolTypeNodeClick(row: MesTmToolTypeApi.ToolType | undefined) {
+  selectedToolTypeId.value = row?.id;
+  handleRefresh();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getToolPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            toolTypeId: selectedToolTypeId.value,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesTmToolApi.Tool>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【工具】工具类型、工装夹具台账"
+        url="https://doc.iocoder.cn/mes/tm/tool/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <div class="flex h-full w-full">
+      <Card class="mr-4 h-full w-1/6">
+        <TmToolTypeTree @node-click="handleToolTypeNodeClick" />
+      </Card>
+      <div class="w-5/6">
+        <Grid table-title="工具列表">
+          <template #toolbar-tools>
+            <TableAction
+              :actions="[
+                {
+                  label: $t('ui.actionTitle.create', ['工具']),
+                  type: 'primary',
+                  icon: ACTION_ICON.ADD,
+                  auth: ['mes:tm-tool:create'],
+                  onClick: handleCreate,
+                },
+                {
+                  label: $t('ui.actionTitle.export'),
+                  type: 'primary',
+                  icon: ACTION_ICON.DOWNLOAD,
+                  auth: ['mes:tm-tool:export'],
+                  onClick: handleExport,
+                },
+              ]"
+            />
+          </template>
+          <template #code="{ row }">
+            <Button type="link" @click="handleDetail(row)">{{ row.code }}</Button>
+          </template>
+          <template #actions="{ row }">
+            <TableAction
+              :actions="[
+                {
+                  label: $t('common.edit'),
+                  type: 'link',
+                  icon: ACTION_ICON.EDIT,
+                  auth: ['mes:tm-tool:update'],
+                  onClick: handleEdit.bind(null, row),
+                },
+                {
+                  label: $t('common.delete'),
+                  type: 'link',
+                  danger: true,
+                  icon: ACTION_ICON.DELETE,
+                  auth: ['mes:tm-tool:delete'],
+                  popConfirm: {
+                    title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                    confirm: handleDelete.bind(null, row),
+                  },
+                },
+              ]"
+            />
+          </template>
+        </Grid>
+      </div>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/mes/tm/tool/modules/form.vue b/apps/web-antd/src/views/mes/tm/tool/modules/form.vue
new file mode 100644
index 000000000..0e0a26942
--- /dev/null
+++ b/apps/web-antd/src/views/mes/tm/tool/modules/form.vue
@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import type { MesTmToolApi } from '#/api/mes/tm/tool';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Button, message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createTool, getTool, updateTool } from '#/api/mes/tm/tool';
+import { $t } from '#/locales';
+import { BarcodeBizTypeEnum } from '#/views/mes/utils/constants';
+import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
+
+import { useFormSchema } from '../data';
+
+type FormMode = 'create' | 'detail' | 'update';
+
+const emit = defineEmits(['success']);
+const formMode = ref<FormMode>('create'); // 表单模式
+const formData = ref<MesTmToolApi.Tool>();
+const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
+
+const isDetail = computed(() => formMode.value === 'detail'); // 是否查看模式
+const getTitle = computed(() => {
+  if (formMode.value === 'detail') {
+    return $t('ui.actionTitle.view', ['工具']);
+  }
+  return formMode.value === 'update'
+    ? $t('ui.actionTitle.edit', ['工具'])
+    : $t('ui.actionTitle.create', ['工具']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 110,
+  },
+  wrapperClass: 'grid-cols-3',
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useFormSchema(formApi) });
+
+/** 查看工具条码 */
+function handleBarcode() {
+  if (!formData.value?.id) {
+    return;
+  }
+  barcodeDetailRef.value?.openByBusiness(
+    formData.value.id,
+    BarcodeBizTypeEnum.TOOL,
+    formData.value.code,
+    formData.value.name,
+  );
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (isDetail.value) {
+      await modalApi.close();
+      return;
+    }
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MesTmToolApi.Tool;
+    try {
+      await (data.id ? updateTool(data) : createTool(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    await formApi.resetForm();
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type?: FormMode }>();
+    formMode.value = data?.type || 'create';
+    formApi.setDisabled(formMode.value === 'detail');
+    modalApi.setState({ showConfirmButton: formMode.value !== 'detail' });
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getTool(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-4/5">
+    <Form class="mx-4" />
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <Button v-if="isDetail && formData?.id" type="primary" @click="handleBarcode">
+          查看条码
+        </Button>
+      </div>
+    </template>
+    <BarcodeDetail ref="barcodeDetailRef" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/tm/tool/type/components/index.ts b/apps/web-antd/src/views/mes/tm/tool/type/components/index.ts
new file mode 100644
index 000000000..8b3fe0741
--- /dev/null
+++ b/apps/web-antd/src/views/mes/tm/tool/type/components/index.ts
@@ -0,0 +1,2 @@
+export { default as TmToolTypeSelect } from './tm-tool-type-select.vue';
+export { default as TmToolTypeTree } from './tm-tool-type-tree.vue';
diff --git a/apps/web-antd/src/views/mes/tm/tool/type/components/tm-tool-type-select.vue b/apps/web-antd/src/views/mes/tm/tool/type/components/tm-tool-type-select.vue
new file mode 100644
index 000000000..68425cf39
--- /dev/null
+++ b/apps/web-antd/src/views/mes/tm/tool/type/components/tm-tool-type-select.vue
@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import type { SelectValue } from 'ant-design-vue/es/select';
+
+import type { MesTmToolTypeApi } from '#/api/mes/tm/tool/type';
+
+import { onMounted, ref } from 'vue';
+
+import { Select } from 'ant-design-vue';
+
+import { getToolTypeSimpleList } from '#/api/mes/tm/tool/type';
+
+withDefaults(
+  defineProps<{
+    allowClear?: boolean;
+    disabled?: boolean;
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  { allowClear: true, disabled: false, modelValue: undefined, placeholder: '请选择工具类型' },
+);
+const emit = defineEmits<{
+  change: [row?: MesTmToolTypeApi.ToolType];
+  'update:modelValue': [value?: number];
+}>();
+const list = ref<MesTmToolTypeApi.ToolType[]>([]); // 工具类型列表
+
+/** 加载工具类型列表 */
+async function getList() {
+  list.value = await getToolTypeSimpleList();
+}
+
+/** 处理工具类型选择变化 */
+function handleChange(value: SelectValue) {
+  const toolTypeId = typeof value === 'number' ? value : undefined;
+  emit('update:modelValue', toolTypeId);
+  emit('change', list.value.find((item) => item.id === toolTypeId));
+}
+
+onMounted(getList);
+</script>
+
+<template>
+  <Select
+    :allow-clear="allowClear"
+    :disabled="disabled"
+    :field-names="{ label: 'name', value: 'id' }"
+    :options="list"
+    :placeholder="placeholder"
+    :value="modelValue"
+    class="w-full"
+    option-filter-prop="name"
+    show-search
+    @change="handleChange"
+  />
+</template>
diff --git a/apps/web-antd/src/views/mes/tm/tool/type/components/tm-tool-type-tree.vue b/apps/web-antd/src/views/mes/tm/tool/type/components/tm-tool-type-tree.vue
new file mode 100644
index 000000000..7fc64c91f
--- /dev/null
+++ b/apps/web-antd/src/views/mes/tm/tool/type/components/tm-tool-type-tree.vue
@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesTmToolTypeApi } from '#/api/mes/tm/tool/type';
+
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Input } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getToolTypeSimpleList } from '#/api/mes/tm/tool/type';
+
+defineOptions({ name: 'TmToolTypeTree' });
+
+const emit = defineEmits<{
+  nodeClick: [row?: MesTmToolTypeApi.ToolType];
+}>();
+const selectedId = ref<number>(); // 当前选中工具类型编号
+const filterText = ref(''); // 工具类型搜索关键字
+const toolTypeList = ref<MesTmToolTypeApi.ToolType[]>([]); // 工具类型列表
+const filteredList = computed(() =>
+  filterText.value
+    ? toolTypeList.value.filter((item) => item.name?.includes(filterText.value))
+    : toolTypeList.value,
+);
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    autoResize: true,
+    border: false,
+    columns: [{ field: 'name', title: '类型名称' }],
+    data: [],
+    height: 'auto',
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      isCurrent: true,
+      isHover: true,
+      keyField: 'id',
+    },
+    showHeader: false,
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<MesTmToolTypeApi.ToolType>,
+  gridEvents: {
+    cellClick: ({ row }: { row: MesTmToolTypeApi.ToolType }) => {
+      // 再次点击同一节点：取消选中
+      if (selectedId.value === row.id) {
+        selectedId.value = undefined;
+        gridApi.grid.clearCurrentRow();
+        emit('nodeClick', undefined);
+        return;
+      }
+      selectedId.value = row.id;
+      emit('nodeClick', row);
+    },
+  },
+});
+
+/** 刷新工具类型列表 */
+function refreshGridData() {
+  gridApi.setGridOptions({ data: filteredList.value });
+}
+
+/** 加载工具类型列表 */
+async function loadList() {
+  toolTypeList.value = await getToolTypeSimpleList();
+  refreshGridData();
+}
+
+/** 重置工具类型树 */
+function reset() {
+  selectedId.value = undefined;
+  filterText.value = '';
+  gridApi.grid.clearCurrentRow();
+  emit('nodeClick', undefined);
+  refreshGridData();
+}
+
+watch(filterText, () => {
+  refreshGridData();
+});
+
+onMounted(loadList);
+
+defineExpose({ loadList, reset });
+</script>
+
+<template>
+  <div class="h-full">
+    <Input
+      v-model:value="filterText"
+      allow-clear
+      class="mb-3 w-full"
+      placeholder="搜索工具类型"
+    >
+      <template #prefix>
+        <IconifyIcon class="size-4" icon="lucide:search" />
+      </template>
+    </Input>
+    <Grid class="h-full" />
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/mes/tm/tool/type/data.ts b/apps/web-antd/src/views/mes/tm/tool/type/data.ts
new file mode 100644
index 000000000..b3778f427
--- /dev/null
+++ b/apps/web-antd/src/views/mes/tm/tool/type/data.ts
@@ -0,0 +1,209 @@
+import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesTmToolTypeApi } from '#/api/mes/tm/tool/type';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { Button } from 'ant-design-vue';
+
+import { z } from '#/adapter/form';
+import { generateAutoCode } from '#/api/mes/md/autocode/record';
+import { MesAutoCodeRuleCode, MesMaintenTypeEnum } from '#/views/mes/utils/constants';
+
+/** 新增/修改工具类型的表单 */
+export function useFormSchema(formApi?: VbenFormApi): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '类型编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入类型编码',
+      },
+      rules: 'required',
+      suffix: () =>
+        h(
+          Button,
+          {
+            type: 'default',
+            onClick: async () => {
+              const code = await generateAutoCode(MesAutoCodeRuleCode.TM_TOOL_TYPE_CODE);
+              await formApi?.setFieldValue('code', code);
+            },
+          },
+          { default: () => '生成' },
+        ),
+    },
+    {
+      fieldName: 'name',
+      label: '类型名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入类型名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'codeFlag',
+      label: '是否编码管理',
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        optionType: 'button',
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+      },
+      rules: z.boolean().default(true),
+    },
+    {
+      fieldName: 'maintenType',
+      label: '保养维护类型',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.MES_TM_MAINTEN_TYPE, 'number'),
+        placeholder: '请选择保养维护类型',
+      },
+      dependencies: {
+        triggerFields: ['codeFlag'],
+        show: (values) => !!values.codeFlag,
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'maintenPeriod',
+      label: '保养周期',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        min: 1,
+        precision: 0,
+      },
+      dependencies: {
+        triggerFields: ['codeFlag', 'maintenType'],
+        show: (values) =>
+          !!values.codeFlag &&
+          [MesMaintenTypeEnum.REGULAR, MesMaintenTypeEnum.USAGE].includes(values.maintenType),
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      formItemClass: 'col-span-2',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '类型编码',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入类型编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '类型名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入类型名称',
+      },
+    },
+    {
+      fieldName: 'maintenType',
+      label: '保养维护类型',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.MES_TM_MAINTEN_TYPE, 'number'),
+        placeholder: '请选择保养维护类型',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MesTmToolTypeApi.ToolType>['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '类型编码',
+      minWidth: 140,
+      slots: {
+        default: 'code',
+      },
+    },
+    { field: 'name', title: '类型名称', minWidth: 150 },
+    {
+      field: 'codeFlag',
+      title: '编码管理',
+      width: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'maintenType',
+      title: '保养维护类型',
+      width: 140,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_TM_MAINTEN_TYPE },
+      },
+    },
+    {
+      field: 'maintenPeriod',
+      title: '保养周期',
+      width: 100,
+      formatter: ({ row }) => {
+        if (row.maintenPeriod == null) {
+          return '-';
+        }
+        if (row.maintenType === MesMaintenTypeEnum.REGULAR) {
+          return `${row.maintenPeriod} 天`;
+        }
+        if (row.maintenType === MesMaintenTypeEnum.USAGE) {
+          return `${row.maintenPeriod} 次`;
+        }
+        return '-';
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: {
+        default: 'actions',
+      },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mes/tm/tool/type/index.vue b/apps/web-antd/src/views/mes/tm/tool/type/index.vue
new file mode 100644
index 000000000..4ce0188fc
--- /dev/null
+++ b/apps/web-antd/src/views/mes/tm/tool/type/index.vue
@@ -0,0 +1,153 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesTmToolTypeApi } from '#/api/mes/tm/tool/type';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteToolType, exportToolType, getToolTypePage } from '#/api/mes/tm/tool/type';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建工具类型 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 查看工具类型 */
+function handleDetail(row: MesTmToolTypeApi.ToolType) {
+  formModalApi.setData({ id: row.id, type: 'detail' }).open();
+}
+
+/** 编辑工具类型 */
+function handleEdit(row: MesTmToolTypeApi.ToolType) {
+  formModalApi.setData({ id: row.id, type: 'update' }).open();
+}
+
+/** 删除工具类型 */
+async function handleDelete(row: MesTmToolTypeApi.ToolType) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteToolType(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 导出工具类型 */
+async function handleExport() {
+  const data = await exportToolType(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '工具类型.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) =>
+          await getToolTypePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          }),
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesTmToolTypeApi.ToolType>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【工具】工具类型、工装夹具台账"
+        url="https://doc.iocoder.cn/mes/tm/tool/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="工具类型列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['工具类型']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mes:tm-tool-type:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['mes:tm-tool-type:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #code="{ row }">
+        <Button type="link" @click="handleDetail(row)">{{ row.code }}</Button>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['mes:tm-tool-type:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mes:tm-tool-type:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/mes/tm/tool/type/modules/form.vue b/apps/web-antd/src/views/mes/tm/tool/type/modules/form.vue
new file mode 100644
index 000000000..9a4897340
--- /dev/null
+++ b/apps/web-antd/src/views/mes/tm/tool/type/modules/form.vue
@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import type { MesTmToolTypeApi } from '#/api/mes/tm/tool/type';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createToolType, getToolType, updateToolType } from '#/api/mes/tm/tool/type';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+type FormMode = 'create' | 'detail' | 'update';
+
+const emit = defineEmits(['success']);
+const formMode = ref<FormMode>('create'); // 表单模式
+const formData = ref<MesTmToolTypeApi.ToolType>();
+
+const isDetail = computed(() => formMode.value === 'detail'); // 是否查看模式
+const getTitle = computed(() => {
+  if (formMode.value === 'detail') {
+    return $t('ui.actionTitle.view', ['工具类型']);
+  }
+  return formMode.value === 'update'
+    ? $t('ui.actionTitle.edit', ['工具类型'])
+    : $t('ui.actionTitle.create', ['工具类型']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 120,
+  },
+  wrapperClass: 'grid-cols-2',
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useFormSchema(formApi) });
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (isDetail.value) {
+      await modalApi.close();
+      return;
+    }
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MesTmToolTypeApi.ToolType;
+    try {
+      await (data.id ? updateToolType(data) : createToolType(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    await formApi.resetForm();
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type?: FormMode }>();
+    formMode.value = data?.type || 'create';
+    formApi.setDisabled(formMode.value === 'detail');
+    modalApi.setState({ showConfirmButton: formMode.value !== 'detail' });
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getToolType(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mes/tm/tool/data.ts b/apps/web-ele/src/views/mes/tm/tool/data.ts
new file mode 100644
index 000000000..0c0e00050
--- /dev/null
+++ b/apps/web-ele/src/views/mes/tm/tool/data.ts
@@ -0,0 +1,309 @@
+import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesTmToolApi } from '#/api/mes/tm/tool';
+
+import { h, markRaw } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDateTime } from '@vben/utils';
+
+import { ElButton } from 'element-plus';
+
+import { z } from '#/adapter/form';
+import { generateAutoCode } from '#/api/mes/md/autocode/record';
+import {
+  MesAutoCodeRuleCode,
+  MesMaintenTypeEnum,
+  MesToolStatusEnum,
+} from '#/views/mes/utils/constants';
+
+import { TmToolTypeSelect } from './type/components';
+
+/** 新增/修改工具的表单 */
+export function useFormSchema(formApi?: VbenFormApi): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '工具编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入工具编码',
+      },
+      dependencies: {
+        triggerFields: ['id'],
+        componentProps: (values) => ({ disabled: !!values.id }),
+      },
+      rules: 'required',
+      suffix: () =>
+        h(
+          ElButton,
+          {
+            type: 'default',
+            onClick: async () => {
+              const code = await generateAutoCode(MesAutoCodeRuleCode.TM_TOOL_CODE);
+              await formApi?.setFieldValue('code', code);
+            },
+          },
+          { default: () => '生成' },
+        ),
+    },
+    {
+      fieldName: 'name',
+      label: '工具名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入工具名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'toolTypeId',
+      label: '工具类型',
+      component: markRaw(TmToolTypeSelect),
+      componentProps: {
+        placeholder: '请选择工具类型',
+        onChange: async (row: any) => {
+          if (row?.codeFlag) {
+            await formApi?.setFieldValue('quantity', 1);
+            await formApi?.setFieldValue('availableQuantity', 1);
+          }
+        },
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'brand',
+      label: '品牌',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入品牌',
+      },
+    },
+    {
+      fieldName: 'specification',
+      label: '型号规格',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入型号规格',
+      },
+    },
+    {
+      fieldName: 'quantity',
+      label: '库存数量',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 1,
+        onChange: async (value?: number) => {
+          const values = (await formApi?.getValues()) as MesTmToolApi.Tool | undefined;
+          if (!values?.id) {
+            await formApi?.setFieldValue('availableQuantity', value);
+          }
+        },
+        precision: 0,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'availableQuantity',
+      label: '可用数量',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        disabled: true,
+        min: 0,
+        precision: 0,
+      },
+      rules: z.number().default(1),
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        disabled: true,
+        options: getDictOptions(DICT_TYPE.MES_TM_TOOL_STATUS, 'number'),
+      },
+      rules: z.number().default(MesToolStatusEnum.STORE),
+    },
+    {
+      fieldName: 'maintenType',
+      label: '保养维护类型',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.MES_TM_MAINTEN_TYPE, 'number'),
+        placeholder: '请选择保养维护类型',
+      },
+    },
+    {
+      fieldName: 'nextMaintenDate',
+      label: '下次保养日期',
+      component: 'DatePicker',
+      componentProps: {
+        class: '!w-full',
+        format: 'YYYY-MM-DD HH:mm:ss',
+        showTime: true,
+        valueFormat: 'x',
+      },
+      dependencies: {
+        triggerFields: ['maintenType'],
+        show: (values) => values.maintenType === MesMaintenTypeEnum.REGULAR,
+      },
+    },
+    {
+      fieldName: 'nextMaintenPeriod',
+      label: '下次保养周期',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 1,
+        precision: 0,
+      },
+      dependencies: {
+        triggerFields: ['maintenType'],
+        show: (values) => values.maintenType === MesMaintenTypeEnum.USAGE,
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      formItemClass: 'col-span-3',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '工具编码',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入工具编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '工具名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入工具名称',
+      },
+    },
+    {
+      fieldName: 'brand',
+      label: '品牌',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入品牌',
+      },
+    },
+    {
+      fieldName: 'specification',
+      label: '型号规格',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入型号规格',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.MES_TM_TOOL_STATUS, 'number'),
+        placeholder: '请选择状态',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MesTmToolApi.Tool>['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '工具编码',
+      minWidth: 140,
+      slots: {
+        default: 'code',
+      },
+    },
+    { field: 'name', title: '工具名称', minWidth: 150 },
+    { field: 'toolTypeName', title: '工具类型', minWidth: 140 },
+    { field: 'brand', title: '品牌', minWidth: 120 },
+    { field: 'specification', title: '型号规格', minWidth: 140 },
+    { field: 'quantity', title: '库存数量', width: 100 },
+    { field: 'availableQuantity', title: '可用数量', width: 100 },
+    {
+      field: 'maintenType',
+      title: '保养维护类型',
+      width: 140,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_TM_MAINTEN_TYPE },
+      },
+    },
+    {
+      field: 'nextMaintenDate',
+      title: '下次保养',
+      width: 180,
+      formatter: ({ row }) => {
+        if (row.maintenType === MesMaintenTypeEnum.REGULAR) {
+          return row.nextMaintenDate ? formatDateTime(row.nextMaintenDate) : '-';
+        }
+        if (row.maintenType === MesMaintenTypeEnum.USAGE) {
+          return row.nextMaintenPeriod == null ? '-' : `${row.nextMaintenPeriod} 次`;
+        }
+        return '-';
+      },
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_TM_TOOL_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: {
+        default: 'actions',
+      },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mes/tm/tool/index.vue b/apps/web-ele/src/views/mes/tm/tool/index.vue
new file mode 100644
index 000000000..005453dd8
--- /dev/null
+++ b/apps/web-ele/src/views/mes/tm/tool/index.vue
@@ -0,0 +1,172 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesTmToolApi } from '#/api/mes/tm/tool';
+import type { MesTmToolTypeApi } from '#/api/mes/tm/tool/type';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+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 { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const selectedToolTypeId = ref<number>(); // 当前选中的工具类型编号
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建工具 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 查看工具 */
+function handleDetail(row: MesTmToolApi.Tool) {
+  formModalApi.setData({ id: row.id, type: 'detail' }).open();
+}
+
+/** 编辑工具 */
+function handleEdit(row: MesTmToolApi.Tool) {
+  formModalApi.setData({ id: row.id, type: 'update' }).open();
+}
+
+/** 删除工具 */
+async function handleDelete(row: MesTmToolApi.Tool) {
+  const hideLoading = ElLoading.service({ text: $t('ui.actionMessage.deleting', [row.name]) });
+  try {
+    await deleteTool(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    hideLoading.close();
+  }
+}
+
+/** 导出工具 */
+async function handleExport() {
+  const data = await exportTool(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '工具.xls', source: data });
+}
+
+/** 工具类型树点击 */
+function handleToolTypeNodeClick(row: MesTmToolTypeApi.ToolType | undefined) {
+  selectedToolTypeId.value = row?.id;
+  handleRefresh();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getToolPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            toolTypeId: selectedToolTypeId.value,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesTmToolApi.Tool>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【工具】工具类型、工装夹具台账"
+        url="https://doc.iocoder.cn/mes/tm/tool/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <div class="flex h-full w-full">
+      <ElCard class="mr-4 h-full w-1/6">
+        <TmToolTypeTree @node-click="handleToolTypeNodeClick" />
+      </ElCard>
+      <div class="w-5/6">
+        <Grid table-title="工具列表">
+          <template #toolbar-tools>
+            <TableAction
+              :actions="[
+                {
+                  label: $t('ui.actionTitle.create', ['工具']),
+                  type: 'primary',
+                  icon: ACTION_ICON.ADD,
+                  auth: ['mes:tm-tool:create'],
+                  onClick: handleCreate,
+                },
+                {
+                  label: $t('ui.actionTitle.export'),
+                  type: 'primary',
+                  icon: ACTION_ICON.DOWNLOAD,
+                  auth: ['mes:tm-tool:export'],
+                  onClick: handleExport,
+                },
+              ]"
+            />
+          </template>
+          <template #code="{ row }">
+            <ElButton link type="primary" @click="handleDetail(row)">{{ row.code }}</ElButton>
+          </template>
+          <template #actions="{ row }">
+            <TableAction
+              :actions="[
+                {
+                  label: $t('common.edit'),
+                  type: 'primary',
+                  link: true,
+                  icon: ACTION_ICON.EDIT,
+                  auth: ['mes:tm-tool:update'],
+                  onClick: handleEdit.bind(null, row),
+                },
+                {
+                  label: $t('common.delete'),
+                  type: 'danger',
+                  link: true,
+                  icon: ACTION_ICON.DELETE,
+                  auth: ['mes:tm-tool:delete'],
+                  popConfirm: {
+                    title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                    confirm: handleDelete.bind(null, row),
+                  },
+                },
+              ]"
+            />
+          </template>
+        </Grid>
+      </div>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mes/tm/tool/modules/form.vue b/apps/web-ele/src/views/mes/tm/tool/modules/form.vue
new file mode 100644
index 000000000..bf46e425c
--- /dev/null
+++ b/apps/web-ele/src/views/mes/tm/tool/modules/form.vue
@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import type { MesTmToolApi } from '#/api/mes/tm/tool';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElButton, ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createTool, getTool, updateTool } from '#/api/mes/tm/tool';
+import { $t } from '#/locales';
+import { BarcodeBizTypeEnum } from '#/views/mes/utils/constants';
+import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
+
+import { useFormSchema } from '../data';
+
+type FormMode = 'create' | 'detail' | 'update';
+
+const emit = defineEmits(['success']);
+const formMode = ref<FormMode>('create'); // 表单模式
+const formData = ref<MesTmToolApi.Tool>();
+const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
+
+const isDetail = computed(() => formMode.value === 'detail'); // 是否查看模式
+const getTitle = computed(() => {
+  if (formMode.value === 'detail') {
+    return $t('ui.actionTitle.view', ['工具']);
+  }
+  return formMode.value === 'update'
+    ? $t('ui.actionTitle.edit', ['工具'])
+    : $t('ui.actionTitle.create', ['工具']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 110,
+  },
+  wrapperClass: 'grid-cols-3',
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useFormSchema(formApi) });
+
+/** 查看工具条码 */
+function handleBarcode() {
+  if (!formData.value?.id) {
+    return;
+  }
+  barcodeDetailRef.value?.openByBusiness(
+    formData.value.id,
+    BarcodeBizTypeEnum.TOOL,
+    formData.value.code,
+    formData.value.name,
+  );
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (isDetail.value) {
+      await modalApi.close();
+      return;
+    }
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MesTmToolApi.Tool;
+    try {
+      await (data.id ? updateTool(data) : createTool(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    await formApi.resetForm();
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type?: FormMode }>();
+    formMode.value = data?.type || 'create';
+    formApi.setDisabled(formMode.value === 'detail');
+    modalApi.setState({ showConfirmButton: formMode.value !== 'detail' });
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getTool(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-4/5">
+    <Form class="mx-4" />
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <ElButton v-if="isDetail && formData?.id" type="primary" @click="handleBarcode">
+          查看条码
+        </ElButton>
+      </div>
+    </template>
+    <BarcodeDetail ref="barcodeDetailRef" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mes/tm/tool/type/components/index.ts b/apps/web-ele/src/views/mes/tm/tool/type/components/index.ts
new file mode 100644
index 000000000..8b3fe0741
--- /dev/null
+++ b/apps/web-ele/src/views/mes/tm/tool/type/components/index.ts
@@ -0,0 +1,2 @@
+export { default as TmToolTypeSelect } from './tm-tool-type-select.vue';
+export { default as TmToolTypeTree } from './tm-tool-type-tree.vue';
diff --git a/apps/web-ele/src/views/mes/tm/tool/type/components/tm-tool-type-select.vue b/apps/web-ele/src/views/mes/tm/tool/type/components/tm-tool-type-select.vue
new file mode 100644
index 000000000..270850bc3
--- /dev/null
+++ b/apps/web-ele/src/views/mes/tm/tool/type/components/tm-tool-type-select.vue
@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import type { MesTmToolTypeApi } from '#/api/mes/tm/tool/type';
+
+import { onMounted, ref } from 'vue';
+
+import { ElOption, ElSelect } from 'element-plus';
+
+import { getToolTypeSimpleList } from '#/api/mes/tm/tool/type';
+
+withDefaults(
+  defineProps<{
+    clearable?: boolean;
+    disabled?: boolean;
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  { clearable: true, disabled: false, modelValue: undefined, placeholder: '请选择工具类型' },
+);
+const emit = defineEmits<{
+  change: [row?: MesTmToolTypeApi.ToolType];
+  'update:modelValue': [value?: number];
+}>();
+const list = ref<MesTmToolTypeApi.ToolType[]>([]); // 工具类型列表
+
+/** 加载工具类型列表 */
+async function getList() {
+  list.value = await getToolTypeSimpleList();
+}
+
+/** 处理工具类型选择变化 */
+function handleChange(value: number | string | undefined) {
+  const toolTypeId = typeof value === 'number' ? value : undefined;
+  emit('update:modelValue', toolTypeId);
+  emit('change', list.value.find((item) => item.id === toolTypeId));
+}
+
+onMounted(getList);
+</script>
+
+<template>
+  <ElSelect
+    :clearable="clearable"
+    :disabled="disabled"
+    :model-value="modelValue"
+    :placeholder="placeholder"
+    class="w-full"
+    filterable
+    @change="handleChange"
+  >
+    <ElOption v-for="item in list" :key="item.id" :label="item.name" :value="item.id!" />
+  </ElSelect>
+</template>
diff --git a/apps/web-ele/src/views/mes/tm/tool/type/components/tm-tool-type-tree.vue b/apps/web-ele/src/views/mes/tm/tool/type/components/tm-tool-type-tree.vue
new file mode 100644
index 000000000..19010b069
--- /dev/null
+++ b/apps/web-ele/src/views/mes/tm/tool/type/components/tm-tool-type-tree.vue
@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesTmToolTypeApi } from '#/api/mes/tm/tool/type';
+
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { Search } from '@vben/icons';
+
+import { ElInput } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getToolTypeSimpleList } from '#/api/mes/tm/tool/type';
+
+defineOptions({ name: 'TmToolTypeTree' });
+
+const emit = defineEmits<{
+  nodeClick: [row?: MesTmToolTypeApi.ToolType];
+}>();
+const selectedId = ref<number>(); // 当前选中工具类型编号
+const filterText = ref(''); // 工具类型搜索关键字
+const toolTypeList = ref<MesTmToolTypeApi.ToolType[]>([]); // 工具类型列表
+const filteredList = computed(() =>
+  filterText.value
+    ? toolTypeList.value.filter((item) => item.name?.includes(filterText.value))
+    : toolTypeList.value,
+);
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    autoResize: true,
+    border: false,
+    columns: [{ field: 'name', title: '类型名称' }],
+    data: [],
+    height: 'auto',
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      isCurrent: true,
+      isHover: true,
+      keyField: 'id',
+    },
+    showHeader: false,
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<MesTmToolTypeApi.ToolType>,
+  gridEvents: {
+    cellClick: ({ row }: { row: MesTmToolTypeApi.ToolType }) => {
+      // 再次点击同一节点：取消选中
+      if (selectedId.value === row.id) {
+        selectedId.value = undefined;
+        gridApi.grid.clearCurrentRow();
+        emit('nodeClick', undefined);
+        return;
+      }
+      selectedId.value = row.id;
+      emit('nodeClick', row);
+    },
+  },
+});
+
+/** 刷新工具类型列表 */
+function refreshGridData() {
+  gridApi.setGridOptions({ data: filteredList.value });
+}
+
+/** 加载工具类型列表 */
+async function loadList() {
+  toolTypeList.value = await getToolTypeSimpleList();
+  refreshGridData();
+}
+
+/** 重置工具类型树 */
+function reset() {
+  selectedId.value = undefined;
+  filterText.value = '';
+  gridApi.grid.clearCurrentRow();
+  emit('nodeClick', undefined);
+  refreshGridData();
+}
+
+watch(filterText, () => {
+  refreshGridData();
+});
+
+onMounted(loadList);
+
+defineExpose({ loadList, reset });
+</script>
+
+<template>
+  <div class="h-full">
+    <ElInput
+      v-model="filterText"
+      class="mb-3 w-full"
+      clearable
+      placeholder="搜索工具类型"
+    >
+      <template #prefix>
+        <Search class="size-4" />
+      </template>
+    </ElInput>
+    <Grid class="h-full" />
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mes/tm/tool/type/data.ts b/apps/web-ele/src/views/mes/tm/tool/type/data.ts
new file mode 100644
index 000000000..527f4a844
--- /dev/null
+++ b/apps/web-ele/src/views/mes/tm/tool/type/data.ts
@@ -0,0 +1,208 @@
+import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesTmToolTypeApi } from '#/api/mes/tm/tool/type';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { ElButton } from 'element-plus';
+
+import { z } from '#/adapter/form';
+import { generateAutoCode } from '#/api/mes/md/autocode/record';
+import { MesAutoCodeRuleCode, MesMaintenTypeEnum } from '#/views/mes/utils/constants';
+
+/** 新增/修改工具类型的表单 */
+export function useFormSchema(formApi?: VbenFormApi): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '类型编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入类型编码',
+      },
+      rules: 'required',
+      suffix: () =>
+        h(
+          ElButton,
+          {
+            type: 'default',
+            onClick: async () => {
+              const code = await generateAutoCode(MesAutoCodeRuleCode.TM_TOOL_TYPE_CODE);
+              await formApi?.setFieldValue('code', code);
+            },
+          },
+          { default: () => '生成' },
+        ),
+    },
+    {
+      fieldName: 'name',
+      label: '类型名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入类型名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'codeFlag',
+      label: '是否编码管理',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+      },
+      rules: z.boolean().default(true),
+    },
+    {
+      fieldName: 'maintenType',
+      label: '保养维护类型',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.MES_TM_MAINTEN_TYPE, 'number'),
+        placeholder: '请选择保养维护类型',
+      },
+      dependencies: {
+        triggerFields: ['codeFlag'],
+        show: (values) => !!values.codeFlag,
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'maintenPeriod',
+      label: '保养周期',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 1,
+        precision: 0,
+      },
+      dependencies: {
+        triggerFields: ['codeFlag', 'maintenType'],
+        show: (values) =>
+          !!values.codeFlag &&
+          [MesMaintenTypeEnum.REGULAR, MesMaintenTypeEnum.USAGE].includes(values.maintenType),
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      formItemClass: 'col-span-2',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '类型编码',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入类型编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '类型名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入类型名称',
+      },
+    },
+    {
+      fieldName: 'maintenType',
+      label: '保养维护类型',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.MES_TM_MAINTEN_TYPE, 'number'),
+        placeholder: '请选择保养维护类型',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MesTmToolTypeApi.ToolType>['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '类型编码',
+      minWidth: 140,
+      slots: {
+        default: 'code',
+      },
+    },
+    { field: 'name', title: '类型名称', minWidth: 150 },
+    {
+      field: 'codeFlag',
+      title: '编码管理',
+      width: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'maintenType',
+      title: '保养维护类型',
+      width: 140,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_TM_MAINTEN_TYPE },
+      },
+    },
+    {
+      field: 'maintenPeriod',
+      title: '保养周期',
+      width: 100,
+      formatter: ({ row }) => {
+        if (row.maintenPeriod == null) {
+          return '-';
+        }
+        if (row.maintenType === MesMaintenTypeEnum.REGULAR) {
+          return `${row.maintenPeriod} 天`;
+        }
+        if (row.maintenType === MesMaintenTypeEnum.USAGE) {
+          return `${row.maintenPeriod} 次`;
+        }
+        return '-';
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: {
+        default: 'actions',
+      },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mes/tm/tool/type/index.vue b/apps/web-ele/src/views/mes/tm/tool/type/index.vue
new file mode 100644
index 000000000..3cc81e9c2
--- /dev/null
+++ b/apps/web-ele/src/views/mes/tm/tool/type/index.vue
@@ -0,0 +1,151 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesTmToolTypeApi } from '#/api/mes/tm/tool/type';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ElButton, ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteToolType, exportToolType, getToolTypePage } from '#/api/mes/tm/tool/type';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建工具类型 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 查看工具类型 */
+function handleDetail(row: MesTmToolTypeApi.ToolType) {
+  formModalApi.setData({ id: row.id, type: 'detail' }).open();
+}
+
+/** 编辑工具类型 */
+function handleEdit(row: MesTmToolTypeApi.ToolType) {
+  formModalApi.setData({ id: row.id, type: 'update' }).open();
+}
+
+/** 删除工具类型 */
+async function handleDelete(row: MesTmToolTypeApi.ToolType) {
+  const hideLoading = ElLoading.service({ text: $t('ui.actionMessage.deleting', [row.name]) });
+  try {
+    await deleteToolType(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    hideLoading.close();
+  }
+}
+
+/** 导出工具类型 */
+async function handleExport() {
+  const data = await exportToolType(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '工具类型.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) =>
+          await getToolTypePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          }),
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesTmToolTypeApi.ToolType>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【工具】工具类型、工装夹具台账"
+        url="https://doc.iocoder.cn/mes/tm/tool/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="工具类型列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['工具类型']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mes:tm-tool-type:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['mes:tm-tool-type:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #code="{ row }">
+        <ElButton link type="primary" @click="handleDetail(row)">{{ row.code }}</ElButton>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['mes:tm-tool-type:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mes:tm-tool-type:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mes/tm/tool/type/modules/form.vue b/apps/web-ele/src/views/mes/tm/tool/type/modules/form.vue
new file mode 100644
index 000000000..4588bf62b
--- /dev/null
+++ b/apps/web-ele/src/views/mes/tm/tool/type/modules/form.vue
@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import type { MesTmToolTypeApi } from '#/api/mes/tm/tool/type';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createToolType, getToolType, updateToolType } from '#/api/mes/tm/tool/type';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+type FormMode = 'create' | 'detail' | 'update';
+
+const emit = defineEmits(['success']);
+const formMode = ref<FormMode>('create'); // 表单模式
+const formData = ref<MesTmToolTypeApi.ToolType>();
+
+const isDetail = computed(() => formMode.value === 'detail'); // 是否查看模式
+const getTitle = computed(() => {
+  if (formMode.value === 'detail') {
+    return $t('ui.actionTitle.view', ['工具类型']);
+  }
+  return formMode.value === 'update'
+    ? $t('ui.actionTitle.edit', ['工具类型'])
+    : $t('ui.actionTitle.create', ['工具类型']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 120,
+  },
+  wrapperClass: 'grid-cols-2',
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useFormSchema(formApi) });
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (isDetail.value) {
+      await modalApi.close();
+      return;
+    }
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MesTmToolTypeApi.ToolType;
+    try {
+      await (data.id ? updateToolType(data) : createToolType(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    await formApi.resetForm();
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type?: FormMode }>();
+    formMode.value = data?.type || 'create';
+    formApi.setDisabled(formMode.value === 'detail');
+    modalApi.setState({ showConfirmButton: formMode.value !== 'detail' });
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getToolType(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>