diff --git a/src/api/mes/wm/batch/index.ts b/src/api/mes/wm/batch/index.ts
index e6aceb6cf..c5f1d438c 100644
--- a/src/api/mes/wm/batch/index.ts
+++ b/src/api/mes/wm/batch/index.ts
@@ -34,6 +34,11 @@ export interface BatchVO {
 
 // 批次追溯 API
 export const BatchApi = {
+  // 获取批次分页
+  getBatchPage: async (params: PageParam) => {
+    return await request.get({ url: `/mes/wm/batch/page`, params })
+  },
+
   // 向前追溯
   getForwardList: async (code: string) => {
     return await request.get({ url: `/mes/wm/batch/forward-list`, params: { code } })
diff --git a/src/views/mes/qc/batchtrace/BatchTraceDetail.vue b/src/views/mes/qc/batchtrace/BatchTraceDetail.vue
new file mode 100644
index 000000000..0fed19c27
--- /dev/null
+++ b/src/views/mes/qc/batchtrace/BatchTraceDetail.vue
@@ -0,0 +1,78 @@
+<template>
+  <Dialog v-model="dialogVisible" title="批次追溯" width="960">
+    <el-descriptions :column="3" border>
+      <el-descriptions-item label="批次编号">
+        {{ detailData.code }}
+      </el-descriptions-item>
+      <el-descriptions-item label="物资编码">
+        {{ detailData.itemCode }}
+      </el-descriptions-item>
+      <el-descriptions-item label="物资名称">
+        {{ detailData.itemName }}
+      </el-descriptions-item>
+      <el-descriptions-item label="规格型号" :span="3">
+        {{ detailData.itemSpecification }}
+      </el-descriptions-item>
+      <el-descriptions-item label="采购订单编号">
+        {{ detailData.purchaseOrderCode }}
+      </el-descriptions-item>
+      <el-descriptions-item label="供应商编码">
+        {{ detailData.vendorCode }}
+      </el-descriptions-item>
+      <el-descriptions-item label="供应商名称">
+        {{ detailData.vendorName }}
+      </el-descriptions-item>
+      <el-descriptions-item label="销售订单编号">
+        {{ detailData.salesOrderCode }}
+      </el-descriptions-item>
+      <el-descriptions-item label="客户编码">
+        {{ detailData.clientCode }}
+      </el-descriptions-item>
+      <el-descriptions-item label="客户名称">
+        {{ detailData.clientName }}
+      </el-descriptions-item>
+      <el-descriptions-item label="生产批号">
+        {{ detailData.lotNumber }}
+      </el-descriptions-item>
+      <el-descriptions-item label="生产工单">
+        {{ detailData.workOrderCode }}
+      </el-descriptions-item>
+      <el-descriptions-item label="工作站编码">
+        {{ detailData.workstationCode }}
+      </el-descriptions-item>
+    </el-descriptions>
+    <el-tabs type="border-card" class="mt-10px">
+      <el-tab-pane label="向前追溯">
+        <BatchTraceDetailTab
+          :batchId="detailData.id"
+          :batchCode="detailData.code"
+          direction="forward"
+        />
+      </el-tab-pane>
+      <el-tab-pane label="向后追溯">
+        <BatchTraceDetailTab
+          :batchId="detailData.id"
+          :batchCode="detailData.code"
+          direction="backward"
+        />
+      </el-tab-pane>
+    </el-tabs>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { BatchVO } from '@/api/mes/wm/batch'
+import BatchTraceDetailTab from './BatchTraceDetailTab.vue'
+
+defineOptions({ name: 'BatchTraceDetail' })
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const detailData = ref<BatchVO>({} as BatchVO) // 详情数据
+
+/** 打开弹窗 */
+const open = async (data: BatchVO) => {
+  dialogVisible.value = true
+  detailData.value = data
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
diff --git a/src/views/mes/qc/batchtrace/BatchTraceDetailTab.vue b/src/views/mes/qc/batchtrace/BatchTraceDetailTab.vue
new file mode 100644
index 000000000..4578041a9
--- /dev/null
+++ b/src/views/mes/qc/batchtrace/BatchTraceDetailTab.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="app-container">
+    <el-table v-loading="loading" :data="batchList">
+      <el-table-column label="生产工单号" width="150px" align="center" prop="workOrderCode" />
+      <el-table-column label="批次编号" align="center" prop="code" />
+      <el-table-column label="产品物料编码" align="center" prop="itemCode" />
+      <el-table-column label="产品物料名称" align="center" prop="itemName" />
+      <el-table-column label="规格型号" align="center" prop="itemSpecification" />
+      <el-table-column label="单位" align="center" prop="unitName" />
+    </el-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { BatchApi, BatchVO } from '@/api/mes/wm/batch'
+
+defineOptions({ name: 'BatchTraceDetailTab' })
+
+const props = defineProps<{
+  batchId?: number
+  batchCode?: string
+  direction: 'forward' | 'backward' // 追溯方向：forward=向前追溯，backward=向后追溯
+}>()
+
+const loading = ref(true) // 列表的加载中
+const batchList = ref<BatchVO[]>([]) // 列表的数据
+
+watch(
+  () => props.batchCode,
+  (val) => {
+    if (val) {
+      getList()
+    }
+  }
+)
+/** 查询列表 */
+const getList = async () => {
+  if (!props.batchCode) {
+    return
+  }
+  loading.value = true
+  try {
+    batchList.value =
+      props.direction === 'forward'
+        ? await BatchApi.getForwardList(props.batchCode)
+        : await BatchApi.getBackwardList(props.batchCode)
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 初始化 */
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/src/views/mes/qc/batchtrace/backward.vue b/src/views/mes/qc/batchtrace/backward.vue
deleted file mode 100644
index 2e9d1062b..000000000
--- a/src/views/mes/qc/batchtrace/backward.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-button icon="Refresh" size="small" @click="resetQuery">刷新</el-button>
-    <el-table v-loading="loading" :data="batchList">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="生产工单号" width="150px" align="center" prop="workOrderCode" />
-      <el-table-column label="批次编号" align="center" prop="code" />
-      <el-table-column label="物资编码" align="center" prop="itemCode" />
-      <el-table-column label="物资名称" align="center" prop="itemName" />
-      <el-table-column label="规格型号" align="center" prop="itemSpecification" />
-      <el-table-column label="单位" align="center" prop="unitName" />
-    </el-table>
-
-    <Pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-// TODO @AI：代码风格，对齐：/Users/yunai/Java/yudao-all-in-one/yudao-ui-admin-vue3/src/views/system/user/index.vue
-
-import { ref, watch } from 'vue'
-import { BatchApi, BatchVO } from '@/api/mes/wm/batch'
-
-const props = defineProps({
-  batchId: {
-    type: Number,
-    default: null
-  },
-  batchCode: {
-    type: String,
-    default: null
-  }
-})
-
-const loading = ref(true)
-const total = ref(0)
-const batchList = ref<BatchVO[]>([])
-const queryParams = ref({
-  pageNo: 1,
-  pageSize: 10,
-  batchCode: props.batchCode
-})
-
-watch(
-  () => props.batchId,
-  (val) => {
-    if (val) {
-      getList()
-    }
-  }
-)
-
-watch(
-  () => props.batchCode,
-  (val) => {
-    if (val) {
-      queryParams.value.batchCode = val
-      getList()
-    }
-  }
-)
-
-const getList = async () => {
-  if (!queryParams.value.batchCode) {
-    return
-  }
-  loading.value = true
-  try {
-    const data = await BatchApi.getBackwardList(queryParams.value.batchCode)
-    batchList.value = data
-    total.value = data.length
-  } finally {
-    loading.value = false
-  }
-}
-
-const resetQuery = () => {
-  getList()
-}
-
-// 初始加载
-getList()
-</script>
diff --git a/src/views/mes/qc/batchtrace/forward.vue b/src/views/mes/qc/batchtrace/forward.vue
deleted file mode 100644
index 65121e6a9..000000000
--- a/src/views/mes/qc/batchtrace/forward.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-button icon="Refresh" size="small" @click="resetQuery">刷新</el-button>
-    <el-table v-loading="loading" :data="batchList">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="生产工单号" width="150px" align="center" prop="workOrderCode" />
-      <el-table-column label="批次编号" align="center" prop="code" />
-      <el-table-column label="产品物料编码" align="center" prop="itemCode" />
-      <el-table-column label="产品物料名称" align="center" prop="itemName" />
-      <el-table-column label="规格型号" align="center" prop="itemSpecification" />
-      <el-table-column label="单位" align="center" prop="unitName" />
-    </el-table>
-
-    <Pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-// TODO @AI：代码风格，对齐：/Users/yunai/Java/yudao-all-in-one/yudao-ui-admin-vue3/src/views/system/user/index.vue
-import { ref, watch } from 'vue'
-import { BatchApi, BatchVO } from '@/api/mes/wm/batch'
-
-const props = defineProps({
-  batchId: {
-    type: Number,
-    default: null
-  },
-  batchCode: {
-    type: String,
-    default: null
-  }
-})
-
-const loading = ref(true)
-const total = ref(0)
-const batchList = ref<BatchVO[]>([])
-const queryParams = ref({
-  pageNo: 1,
-  pageSize: 10,
-  batchCode: props.batchCode
-})
-
-watch(
-  () => props.batchId,
-  (val) => {
-    if (val) {
-      getList()
-    }
-  }
-)
-
-watch(
-  () => props.batchCode,
-  (val) => {
-    if (val) {
-      queryParams.value.batchCode = val
-      getList()
-    }
-  }
-)
-
-const getList = async () => {
-  if (!queryParams.value.batchCode) {
-    return
-  }
-  loading.value = true
-  try {
-    const data = await BatchApi.getForwardList(queryParams.value.batchCode)
-    batchList.value = data
-    total.value = data.length
-  } finally {
-    loading.value = false
-  }
-}
-
-const resetQuery = () => {
-  getList()
-}
-
-// 初始加载
-getList()
-</script>
diff --git a/src/views/mes/qc/batchtrace/index.vue b/src/views/mes/qc/batchtrace/index.vue
index 83d912496..84befd1a9 100644
--- a/src/views/mes/qc/batchtrace/index.vue
+++ b/src/views/mes/qc/batchtrace/index.vue
@@ -17,59 +17,14 @@
           class="!w-240px"
         />
       </el-form-item>
-      <el-form-item label="产品物料编码" prop="itemCode">
-        <el-input
-          v-model="queryParams.itemCode"
-          placeholder="请输入产品物料编码"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
+      <el-form-item label="产品物料" prop="itemId">
+        <MdItemSelect v-model="queryParams.itemId" class="!w-240px" />
       </el-form-item>
-      <el-form-item label="产品物料名称" prop="itemName">
-        <el-input
-          v-model="queryParams.itemName"
-          placeholder="请输入产品物料名称"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
+      <el-form-item label="供应商" prop="vendorId">
+        <MdVendorSelect v-model="queryParams.vendorId" class="!w-240px" />
       </el-form-item>
-      <el-form-item label="供应商编码" prop="vendorCode">
-        <el-input
-          v-model="queryParams.vendorCode"
-          placeholder="请输入供应商编码"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="供应商名称" prop="vendorName">
-        <el-input
-          v-model="queryParams.vendorName"
-          placeholder="请输入供应商名称"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="客户编码" prop="clientCode">
-        <el-input
-          v-model="queryParams.clientCode"
-          placeholder="请输入客户编码"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="客户名称" prop="clientName">
-        <el-input
-          v-model="queryParams.clientName"
-          placeholder="请输入客户名称"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
+      <el-form-item label="客户" prop="clientId">
+        <MdClientSelect v-model="queryParams.clientId" class="!w-240px" />
       </el-form-item>
       <el-form-item label="销售订单编号" prop="salesOrderCode">
         <el-input
@@ -90,8 +45,8 @@
         />
       </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 @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
@@ -99,7 +54,6 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list">
-      <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="批次编号" align="center" prop="code" />
       <el-table-column label="产品物料编码" align="center" prop="itemCode" />
       <el-table-column label="产品物料名称" align="center" prop="itemName" />
@@ -116,7 +70,7 @@
           <el-button
             link
             type="primary"
-            @click="handleTrace(scope.row)"
+            @click="openDetail(scope.row)"
             v-hasPermi="['mes:wm-batch:query']"
           >
             批次追溯
@@ -133,162 +87,66 @@
     />
   </ContentWrap>
 
-  <!-- 批次追溯对话框 -->
-  <el-dialog :title="title" v-model="open" width="960px" append-to-body>
-    <el-form ref="formRef" :model="form" label-width="100px">
-      <el-row>
-        <el-col :span="8">
-          <el-form-item label="批次编号" prop="code">
-            <el-input v-model="form.code" readonly />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item label="物资编码" prop="itemCode">
-            <el-input v-model="form.itemCode" readonly />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item label="物资名称" prop="itemName">
-            <el-input v-model="form.itemName" readonly />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="规格型号" prop="itemSpecification">
-            <el-input v-model="form.itemSpecification" type="textarea" readonly />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="8">
-          <el-form-item label="采购订单编号" prop="purchaseOrderCode">
-            <el-input v-model="form.purchaseOrderCode" readonly />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item label="供应商编码" prop="vendorCode">
-            <el-input v-model="form.vendorCode" readonly />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item label="供应商名称" prop="vendorName">
-            <el-input v-model="form.vendorName" readonly />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="8">
-          <el-form-item label="销售订单编号" prop="salesOrderCode">
-            <el-input v-model="form.salesOrderCode" readonly />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item label="客户编码" prop="clientCode">
-            <el-input v-model="form.clientCode" readonly />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item label="客户名称" prop="clientName">
-            <el-input v-model="form.clientName" readonly />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="8">
-          <el-form-item label="生产批号" prop="lotNumber">
-            <el-input v-model="form.lotNumber" readonly />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item label="生产工单" prop="workOrderCode">
-            <el-input v-model="form.workOrderCode" readonly />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item label="工作站编码" prop="workstationCode">
-            <el-input v-model="form.workstationCode" readonly />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <el-tabs type="border-card">
-      <el-tab-pane label="向前追溯">
-        <Forward :batchId="form.id" :batchCode="form.code" />
-      </el-tab-pane>
-      <el-tab-pane label="向后追溯">
-        <Backward :batchId="form.id" :batchCode="form.code" />
-      </el-tab-pane>
-    </el-tabs>
-    <template #footer>
-      <el-button @click="cancel">关 闭</el-button>
-    </template>
-  </el-dialog>
+  <!-- 批次追溯详情 -->
+  <BatchTraceDetail ref="detailRef" />
 </template>
 
-<script setup lang="ts" name="BatchTrace">
-// TODO @AI：代码风格，对齐 /Users/yunai/Java/yudao-all-in-one/yudao-ui-admin-vue3/src/views/system/user/index.vue
+<script lang="ts" setup>
+import { BatchApi, BatchVO } from '@/api/mes/wm/batch'
+import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
+import MdVendorSelect from '@/views/mes/md/vendor/components/MdVendorSelect.vue'
+import MdClientSelect from '@/views/mes/md/client/components/MdClientSelect.vue'
+import BatchTraceDetail from './BatchTraceDetail.vue'
 
-import { ref } from 'vue'
-import { BatchVO } from '@/api/mes/wm/batch'
-import Forward from './forward.vue'
-import Backward from './backward.vue'
+defineOptions({ name: 'BatchTrace' })
 
-// TODO @AI：需要实现批次列表查询 API
-const loading = ref(true)
-const total = ref(0)
-const list = ref<BatchVO[]>([])
-const open = ref(false)
-const title = ref('')
-const form = ref<BatchVO>({} as BatchVO)
-const queryFormRef = ref()
-
-const queryParams = ref({
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref<BatchVO[]>([]) // 列表的数据
+const queryFormRef = ref() // 搜索的表单
+const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   code: undefined,
-  itemCode: undefined,
-  itemName: undefined,
-  vendorCode: undefined,
-  vendorName: undefined,
-  clientCode: undefined,
-  clientName: undefined,
+  itemId: undefined,
+  vendorId: undefined,
+  clientId: undefined,
   salesOrderCode: undefined,
   purchaseOrderCode: undefined
 })
 
+/** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
-    // TODO @AI：调用批次列表查询 API
-    list.value = []
-    total.value = 0
+    const data = await BatchApi.getBatchPage(queryParams)
+    list.value = data.list
+    total.value = data.total
   } finally {
     loading.value = false
   }
 }
 
+/** 搜索按钮操作 */
 const handleQuery = () => {
-  queryParams.value.pageNo = 1
+  queryParams.pageNo = 1
   getList()
 }
 
+/** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value?.resetFields()
   handleQuery()
 }
 
-const handleTrace = (row: BatchVO) => {
-  form.value = { ...row }
-  open.value = true
-  title.value = '批次追溯'
+/** 批次追溯按钮操作 */
+const detailRef = ref()
+const openDetail = (row: BatchVO) => {
+  detailRef.value.open(row)
 }
 
-const cancel = () => {
-  open.value = false
-  form.value = {} as BatchVO
-}
-
-// 初始加载
-getList()
+/** 初始化 */
+onMounted(() => {
+  getList()
+})
 </script>