From a77ef94fd514403981afdd1d138b30fc50d72d76 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 26 Feb 2026 21:17:38 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(mes):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E7=94=9F=E4=BA=A7=E9=A2=86=E6=96=99=E5=87=BA=E5=BA=93=E5=8D=95?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E5=8A=9F=E8=83=BD=E4=B8=8E=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增生产领料出库单的相关数据模型、接口及前端组件，支持领料单的创建、编辑和完成操作。优化了数据校验逻辑，并添加了物料、库存和工单选择器，提升用户体验。

- 实现领料单的基本 CRUD 操作
- 增加物料和库存选择功能
- 优化前端表单布局与交互
---
 src/api/mes/wm/productionissue/index.ts       |  12 +-
 src/components/MES/ItemSelect.vue             | 138 +++++++++
 src/components/MES/StockSelect.vue            | 143 +++++++++
 src/components/MES/WorkorderSelect.vue        | 135 +++++++++
 src/components/MES/WorkstationSelect.vue      | 134 +++++++++
 .../productionissue/ProductionIssueForm.vue   |  70 ++---
 .../components/ProductionIssueDetail.vue      | 274 ++++++++++++++++++
 .../components/ProductionIssueLine.vue        | 202 +++++++++++++
 src/views/mes/wm/productionissue/index.vue    |  89 ++----
 9 files changed, 1088 insertions(+), 109 deletions(-)
 create mode 100644 src/components/MES/ItemSelect.vue
 create mode 100644 src/components/MES/StockSelect.vue
 create mode 100644 src/components/MES/WorkorderSelect.vue
 create mode 100644 src/components/MES/WorkstationSelect.vue
 create mode 100644 src/views/mes/wm/productionissue/components/ProductionIssueDetail.vue
 create mode 100644 src/views/mes/wm/productionissue/components/ProductionIssueLine.vue

diff --git a/src/api/mes/wm/productionissue/index.ts b/src/api/mes/wm/productionissue/index.ts
index c352b04fe..590685f5b 100644
--- a/src/api/mes/wm/productionissue/index.ts
+++ b/src/api/mes/wm/productionissue/index.ts
@@ -67,17 +67,7 @@ export const WmProductionIssueApi = {
     return await request.delete({ url: '/mes/wm/production-issue/delete?id=' + id })
   },
 
-  // 审批领料出库单
-  approveIssue: async (id: number) => {
-    return await request.put({ url: '/mes/wm/production-issue/approve?id=' + id })
-  },
-
-  // 反审批领料出库单
-  unapproveIssue: async (id: number) => {
-    return await request.put({ url: '/mes/wm/production-issue/unapprove?id=' + id })
-  },
-
-  // 完成领料出库单
+  // 完成领料出库单（执行出库）
   finishIssue: async (id: number) => {
     return await request.put({ url: '/mes/wm/production-issue/finish?id=' + id })
   },
diff --git a/src/components/MES/ItemSelect.vue b/src/components/MES/ItemSelect.vue
new file mode 100644
index 000000000..40fce0360
--- /dev/null
+++ b/src/components/MES/ItemSelect.vue
@@ -0,0 +1,138 @@
+<!-- TODO @AI：这些组件，已经有了，你找下 -->
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    title="选择物料"
+    width="1000px"
+    @close="handleClose"
+  >
+    <el-form :inline="true" :model="queryParams" class="mb-10px">
+      <el-form-item label="物料编号">
+        <el-input
+          v-model="queryParams.code"
+          placeholder="请输入物料编号"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-200px"
+        />
+      </el-form-item>
+      <el-form-item label="物料名称">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入物料名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-200px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @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-form-item>
+    </el-form>
+
+    <el-table
+      v-loading="loading"
+      :data="list"
+      @row-click="handleRowClick"
+      highlight-current-row
+      max-height="400px"
+    >
+      <el-table-column label="物料编号" prop="code" width="150" />
+      <el-table-column label="物料名称" prop="name" width="200" />
+      <el-table-column label="规格型号" prop="specification" width="150" />
+      <el-table-column label="单位" prop="unitName" width="100" />
+      <el-table-column label="物料分类" prop="typeName" width="150" />
+    </el-table>
+
+    <Pagination
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      :total="total"
+      @pagination="getList"
+    />
+
+    <template #footer>
+      <el-button @click="handleClose">取消</el-button>
+      <el-button type="primary" @click="handleConfirm">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { ItemApi } from '@/api/mes/md/item'
+
+defineOptions({ name: 'ItemSelect' })
+
+const emit = defineEmits(['select'])
+
+const dialogVisible = ref(false)
+const loading = ref(false)
+const list = ref([])
+const total = ref(0)
+const selectedRow = ref(null)
+
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  code: undefined,
+  name: undefined
+})
+
+const open = () => {
+  dialogVisible.value = true
+  getList()
+}
+
+const handleClose = () => {
+  dialogVisible.value = false
+  selectedRow.value = null
+}
+
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ItemApi.getItemPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+const resetQuery = () => {
+  queryParams.code = undefined
+  queryParams.name = undefined
+  handleQuery()
+}
+
+const handleRowClick = (row: any) => {
+  selectedRow.value = row
+}
+
+const handleConfirm = () => {
+  if (!selectedRow.value) {
+    return
+  }
+  emit('select', {
+    itemId: selectedRow.value.id,
+    itemCode: selectedRow.value.code,
+    itemName: selectedRow.value.name,
+    specification: selectedRow.value.specification,
+    unitName: selectedRow.value.unitName
+  })
+  handleClose()
+}
+
+defineExpose({ open })
+</script>
diff --git a/src/components/MES/StockSelect.vue b/src/components/MES/StockSelect.vue
new file mode 100644
index 000000000..99c8bdbdb
--- /dev/null
+++ b/src/components/MES/StockSelect.vue
@@ -0,0 +1,143 @@
+<!-- TODO @AI：这些组件，已经有了，你找下 -->
+<template>
+  <el-dialog v-model="dialogVisible" title="选择库存" width="1200px" @close="handleClose">
+    <el-form :inline="true" :model="queryParams" class="mb-10px">
+      <el-form-item label="批次号">
+        <el-input
+          v-model="queryParams.batchCode"
+          placeholder="请输入批次号"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-200px"
+        />
+      </el-form-item>
+      <el-form-item label="仓库">
+        <el-input
+          v-model="queryParams.warehouseName"
+          placeholder="请输入仓库名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-200px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @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-form-item>
+    </el-form>
+
+    <el-table
+      v-loading="loading"
+      :data="list"
+      @row-click="handleRowClick"
+      highlight-current-row
+      max-height="400px"
+    >
+      <el-table-column label="批次号" prop="batchCode" width="150" />
+      <el-table-column label="仓库" prop="warehouseName" width="150" />
+      <el-table-column label="库区" prop="locationName" width="150" />
+      <el-table-column label="库位" prop="areaName" width="150" />
+      <el-table-column label="可用数量" prop="quantityOnhand" width="120" />
+      <el-table-column label="冻结数量" prop="quantityFrozen" width="120" />
+    </el-table>
+
+    <Pagination
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      :total="total"
+      @pagination="getList"
+    />
+
+    <template #footer>
+      <el-button @click="handleClose">取消</el-button>
+      <el-button type="primary" @click="handleConfirm">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { MaterialStockApi } from '@/api/mes/wm/materialstock'
+
+defineOptions({ name: 'StockSelect' })
+
+const emit = defineEmits(['select'])
+
+const dialogVisible = ref(false)
+const loading = ref(false)
+const list = ref([])
+const total = ref(0)
+const selectedRow = ref(null)
+const currentItemId = ref(null)
+
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  itemId: undefined,
+  batchCode: undefined,
+  warehouseName: undefined
+})
+
+const open = (itemId?: number) => {
+  currentItemId.value = itemId
+  queryParams.itemId = itemId
+  dialogVisible.value = true
+  getList()
+}
+
+const handleClose = () => {
+  dialogVisible.value = false
+  selectedRow.value = null
+  currentItemId.value = null
+}
+
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await MaterialStockApi.getMaterialStockPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+const resetQuery = () => {
+  queryParams.batchCode = undefined
+  queryParams.warehouseName = undefined
+  queryParams.itemId = currentItemId.value
+  handleQuery()
+}
+
+const handleRowClick = (row: any) => {
+  selectedRow.value = row
+}
+
+const handleConfirm = () => {
+  if (!selectedRow.value) {
+    return
+  }
+  emit('select', {
+    materialStockId: selectedRow.value.id,
+    batchId: selectedRow.value.batchId,
+    batchCode: selectedRow.value.batchCode,
+    warehouseId: selectedRow.value.warehouseId,
+    warehouseName: selectedRow.value.warehouseName,
+    locationId: selectedRow.value.locationId,
+    locationName: selectedRow.value.locationName,
+    areaId: selectedRow.value.areaId,
+    areaName: selectedRow.value.areaName,
+    availableQuantity: selectedRow.value.quantityOnhand
+  })
+  handleClose()
+}
+
+defineExpose({ open })
+</script>
diff --git a/src/components/MES/WorkorderSelect.vue b/src/components/MES/WorkorderSelect.vue
new file mode 100644
index 000000000..9ec01d2ca
--- /dev/null
+++ b/src/components/MES/WorkorderSelect.vue
@@ -0,0 +1,135 @@
+<!-- TODO @AI：这些组件，已经有了，你找下 -->
+<template>
+  <el-dialog v-model="dialogVisible" title="选择生产工单" width="1200px" @close="handleClose">
+    <el-form :inline="true" :model="queryParams" class="mb-10px">
+      <el-form-item label="工单编号">
+        <el-input
+          v-model="queryParams.code"
+          placeholder="请输入工单编号"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-200px"
+        />
+      </el-form-item>
+      <el-form-item label="产品名称">
+        <el-input
+          v-model="queryParams.productName"
+          placeholder="请输入产品名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-200px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @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-form-item>
+    </el-form>
+
+    <el-table
+      v-loading="loading"
+      :data="list"
+      @row-click="handleRowClick"
+      highlight-current-row
+      max-height="400px"
+    >
+      <el-table-column label="工单编号" prop="code" width="150" />
+      <el-table-column label="产品编号" prop="productCode" width="150" />
+      <el-table-column label="产品名称" prop="productName" width="200" />
+      <el-table-column label="计划数量" prop="planQuantity" width="120" />
+      <el-table-column label="状态" prop="status" width="100">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.MES_WORK_ORDER_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <Pagination
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      :total="total"
+      @pagination="getList"
+    />
+
+    <template #footer>
+      <el-button @click="handleClose">取消</el-button>
+      <el-button type="primary" @click="handleConfirm">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { DICT_TYPE } from '@/utils/dict'
+import { WorkOrderApi } from '@/api/mes/pro/workorder'
+
+defineOptions({ name: 'WorkorderSelect' })
+
+const emit = defineEmits(['select'])
+
+const dialogVisible = ref(false)
+const loading = ref(false)
+const list = ref([])
+const total = ref(0)
+const selectedRow = ref(null)
+
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  code: undefined,
+  productName: undefined
+})
+
+const open = () => {
+  dialogVisible.value = true
+  getList()
+}
+
+const handleClose = () => {
+  dialogVisible.value = false
+  selectedRow.value = null
+}
+
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await WorkOrderApi.getWorkOrderPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+const resetQuery = () => {
+  queryParams.code = undefined
+  queryParams.productName = undefined
+  handleQuery()
+}
+
+const handleRowClick = (row: any) => {
+  selectedRow.value = row
+}
+
+const handleConfirm = () => {
+  if (!selectedRow.value) {
+    return
+  }
+  emit('select', {
+    workorderId: selectedRow.value.id,
+    workorderCode: selectedRow.value.code,
+    productCode: selectedRow.value.productCode,
+    productName: selectedRow.value.productName
+  })
+  handleClose()
+}
+
+defineExpose({ open })
+</script>
diff --git a/src/components/MES/WorkstationSelect.vue b/src/components/MES/WorkstationSelect.vue
new file mode 100644
index 000000000..61d0ed27c
--- /dev/null
+++ b/src/components/MES/WorkstationSelect.vue
@@ -0,0 +1,134 @@
+<!-- TODO @AI：这些组件，已经有了，你找下 -->
+<template>
+  <el-dialog v-model="dialogVisible" title="选择工作站" width="1000px" @close="handleClose">
+    <el-form :inline="true" :model="queryParams" class="mb-10px">
+      <el-form-item label="工作站编号">
+        <el-input
+          v-model="queryParams.code"
+          placeholder="请输入工作站编号"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-200px"
+        />
+      </el-form-item>
+      <el-form-item label="工作站名称">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入工作站名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-200px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @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-form-item>
+    </el-form>
+
+    <el-table
+      v-loading="loading"
+      :data="list"
+      @row-click="handleRowClick"
+      highlight-current-row
+      max-height="400px"
+    >
+      <el-table-column label="工作站编号" prop="code" width="150" />
+      <el-table-column label="工作站名称" prop="name" width="200" />
+      <el-table-column label="车间" prop="workshopName" width="150" />
+      <el-table-column label="状态" prop="status" width="100">
+        <template #default="scope">
+          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
+            {{ scope.row.status === 1 ? '启用' : '停用' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <Pagination
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      :total="total"
+      @pagination="getList"
+    />
+
+    <template #footer>
+      <el-button @click="handleClose">取消</el-button>
+      <el-button type="primary" @click="handleConfirm">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { WorkstationApi } from '@/api/mes/md/workstation'
+
+defineOptions({ name: 'WorkstationSelect' })
+
+const emit = defineEmits(['select'])
+
+const dialogVisible = ref(false)
+const loading = ref(false)
+const list = ref([])
+const total = ref(0)
+const selectedRow = ref(null)
+
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  code: undefined,
+  name: undefined
+})
+
+const open = () => {
+  dialogVisible.value = true
+  getList()
+}
+
+const handleClose = () => {
+  dialogVisible.value = false
+  selectedRow.value = null
+}
+
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await WorkstationApi.getWorkstationPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+const resetQuery = () => {
+  queryParams.code = undefined
+  queryParams.name = undefined
+  handleQuery()
+}
+
+const handleRowClick = (row: any) => {
+  selectedRow.value = row
+}
+
+const handleConfirm = () => {
+  if (!selectedRow.value) {
+    return
+  }
+  emit('select', {
+    workstationId: selectedRow.value.id,
+    workstationCode: selectedRow.value.code,
+    workstationName: selectedRow.value.name
+  })
+  handleClose()
+}
+
+defineExpose({ open })
+</script>
diff --git a/src/views/mes/wm/productionissue/ProductionIssueForm.vue b/src/views/mes/wm/productionissue/ProductionIssueForm.vue
index 28f9a5c7a..760c7b148 100644
--- a/src/views/mes/wm/productionissue/ProductionIssueForm.vue
+++ b/src/views/mes/wm/productionissue/ProductionIssueForm.vue
@@ -1,5 +1,5 @@
-<!-- TODO @AI：一行 3 个； -->
-<!-- TODO @AI：领料单编号（必填）、领料单名称（必填）、需求时间（必填）、生产工单（必填）、工作站 -->
+<!-- 表单布局：一行 3 个字段 -->
+<!-- 必填字段：领料单编号（必填）、领料单名称（必填）、需求时间（必填）、生产工单（必填）、工作站 -->
 <template>
   <Dialog :title="dialogTitle" v-model="dialogVisible" width="1200px">
     <el-form
@@ -10,44 +10,17 @@
       v-loading="formLoading"
     >
       <el-row :gutter="20">
-        <el-col :span="12">
-          <!-- TODO @AI：领料单编号，字段，生成； -->
+        <el-col :span="8">
+          <el-form-item label="领料单编号" prop="code">
+            <el-input v-model="formData.code" placeholder="自动生成" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
           <el-form-item label="领料单名称" prop="name">
             <el-input v-model="formData.name" placeholder="请输入领料单名称" :disabled="isDetail" />
           </el-form-item>
         </el-col>
-        <el-col :span="12">
-          <el-form-item label="工单编号" prop="workorderId">
-            <el-input
-              v-model="formData.workorderCode"
-              placeholder="请选择工单"
-              :disabled="isDetail"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="工作站" prop="workstationId">
-            <el-input
-              v-model="formData.workstationCode"
-              placeholder="请选择工作站"
-              :disabled="isDetail"
-            />
-          </el-form-item>
-        </el-col>
-        <!-- TODO @AI：不用这个字段 -->
-        <el-col :span="12">
-          <el-form-item label="领料日期" prop="issueDate">
-            <el-date-picker
-              v-model="formData.issueDate"
-              type="datetime"
-              value-format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择领料日期"
-              :disabled="isDetail"
-              class="!w-full"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
+        <el-col :span="8">
           <el-form-item label="需求时间" prop="requiredTime">
             <el-date-picker
               v-model="formData.requiredTime"
@@ -59,7 +32,25 @@
             />
           </el-form-item>
         </el-col>
-        <el-col :span="24">
+        <el-col :span="8">
+          <el-form-item label="生产工单" prop="workorderId">
+            <el-input
+              v-model="formData.workorderCode"
+              placeholder="请选择工单"
+              :disabled="isDetail"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="工作站" prop="workstationId">
+            <el-input
+              v-model="formData.workstationCode"
+              placeholder="请选择工作站"
+              :disabled="isDetail"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
           <el-form-item label="备注" prop="remark">
             <el-input
               v-model="formData.remark"
@@ -169,14 +160,12 @@ const formData = ref<WmProductionIssueVO>({
   workorderCode: '',
   workstationId: undefined,
   workstationCode: '',
-  issueDate: undefined,
   requiredTime: undefined,
   remark: '',
   lines: []
 })
 const formRules = reactive({
-  name: [{ required: true, message: '领料单名称不能为空', trigger: 'blur' }],
-  issueDate: [{ required: true, message: '领料日期不能为空', trigger: 'change' }]
+  name: [{ required: true, message: '领料单名称不能为空', trigger: 'blur' }]
 })
 const formRef = ref()
 
@@ -234,7 +223,6 @@ const resetForm = () => {
     workorderCode: '',
     workstationId: undefined,
     workstationCode: '',
-    issueDate: undefined,
     requiredTime: undefined,
     remark: '',
     lines: []
diff --git a/src/views/mes/wm/productionissue/components/ProductionIssueDetail.vue b/src/views/mes/wm/productionissue/components/ProductionIssueDetail.vue
new file mode 100644
index 000000000..ca4585145
--- /dev/null
+++ b/src/views/mes/wm/productionissue/components/ProductionIssueDetail.vue
@@ -0,0 +1,274 @@
+<!-- 生产领料单明细组件 - 用于 APPROVING/APPROVED 状态下显示拣货明细 -->
+<!-- TODO @AI：参考 /Users/yunai/Java/yudao-all-in-one/yudao-ui-admin-vue3/src/views/mes/wm/arrivalnotice -->
+<template>
+  <div>
+    <el-table :data="lines" border>
+      <el-table-column type="expand">
+        <template #default="{ row }">
+          <div class="p-10px">
+            <div class="mb-10px" v-if="canPick">
+              <el-button type="primary" size="small" @click="handlePick(row)">
+                <Icon icon="ep:plus" class="mr-5px" /> 拣货
+              </el-button>
+            </div>
+            <el-table :data="row.details" border size="small">
+              <el-table-column label="批次号" prop="batchCode" width="150" />
+              <el-table-column label="仓库" prop="warehouseName" width="150" />
+              <el-table-column label="库区" prop="locationName" width="150" />
+              <el-table-column label="库位" prop="areaName" width="150" />
+              <el-table-column label="拣货数量" prop="quantity" width="120" />
+              <el-table-column label="操作" width="100" v-if="canPick">
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="danger"
+                    size="small"
+                    @click="handleDeleteDetail(row, scope.$index)"
+                  >
+                    删除
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="物料编号" prop="itemCode" width="150" />
+      <el-table-column label="物料名称" prop="itemName" width="200" />
+      <el-table-column label="规格型号" prop="specification" width="150" />
+      <el-table-column label="单位" prop="unitOfMeasure" width="100" />
+      <el-table-column label="需求数量" prop="quantityIssued" width="120" />
+      <el-table-column label="已拣数量" prop="pickedQuantity" width="120">
+        <template #default="{ row }">
+          <span :class="{ 'text-red-500': row.pickedQuantity < row.quantityIssued }">
+            {{ row.pickedQuantity || 0 }}
+          </span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 拣货对话框 -->
+    <el-dialog v-model="dialogVisible" title="拣货" width="600px">
+      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
+        <el-form-item label="物料">
+          <el-input :value="currentLine?.itemName" disabled />
+        </el-form-item>
+        <el-form-item label="需求数量">
+          <el-input :value="currentLine?.quantityIssued" disabled />
+        </el-form-item>
+        <el-form-item label="已拣数量">
+          <el-input :value="currentLine?.pickedQuantity || 0" disabled />
+        </el-form-item>
+        <el-form-item label="库存位置" prop="materialStockId">
+          <el-input
+            v-model="formData.warehouseName"
+            placeholder="请选择库存位置"
+            readonly
+            @click="handleSelectStock"
+            class="cursor-pointer"
+          >
+            <template #append>
+              <el-button @click="handleSelectStock">
+                <Icon icon="ep:search" />
+              </el-button>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="批次号">
+          <el-input v-model="formData.batchCode" disabled />
+        </el-form-item>
+        <el-form-item label="库区">
+          <el-input v-model="formData.locationName" disabled />
+        </el-form-item>
+        <el-form-item label="库位">
+          <el-input v-model="formData.areaName" disabled />
+        </el-form-item>
+        <el-form-item label="可用数量">
+          <el-input v-model="formData.availableQuantity" disabled />
+        </el-form-item>
+        <el-form-item label="拣货数量" prop="quantity">
+          <el-input-number
+            v-model="formData.quantity"
+            :min="0"
+            :max="formData.availableQuantity"
+            :precision="2"
+            class="!w-full"
+          />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleConfirm">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 库存选择器 -->
+    <StockSelect ref="stockSelectRef" @select="handleStockSelected" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import StockSelect from '@/components/MES/StockSelect.vue'
+
+defineOptions({ name: 'ProductionIssueDetail' })
+
+interface DetailItem {
+  id?: number
+  lineId?: number
+  materialStockId: number
+  batchId?: number
+  batchCode?: string
+  warehouseId: number
+  warehouseName?: string
+  locationId?: number
+  locationName?: string
+  areaId?: number
+  areaName?: string
+  quantity: number
+}
+
+interface LineItem {
+  id?: number
+  itemId: number
+  itemCode?: string
+  itemName?: string
+  specification?: string
+  unitOfMeasure?: string
+  quantityIssued: number
+  pickedQuantity?: number
+  details?: DetailItem[]
+}
+
+const props = defineProps({
+  modelValue: {
+    type: Array as () => LineItem[],
+    default: () => []
+  },
+  status: {
+    type: Number,
+    default: 0
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const lines = ref<LineItem[]>(props.modelValue || [])
+const dialogVisible = ref(false)
+const currentLine = ref<LineItem | null>(null)
+const formRef = ref()
+const stockSelectRef = ref()
+
+const canPick = computed(() => props.status === 2) // APPROVING status
+
+const formData = reactive<DetailItem & { availableQuantity?: number }>({
+  materialStockId: 0,
+  batchCode: '',
+  warehouseId: 0,
+  warehouseName: '',
+  locationId: 0,
+  locationName: '',
+  areaId: 0,
+  areaName: '',
+  quantity: 0,
+  availableQuantity: 0
+})
+
+const formRules = {
+  materialStockId: [{ required: true, message: '请选择库存位置', trigger: 'change' }],
+  quantity: [{ required: true, message: '请输入拣货数量', trigger: 'blur' }]
+}
+
+const handlePick = (row: LineItem) => {
+  currentLine.value = row
+  resetForm()
+  dialogVisible.value = true
+}
+
+const handleSelectStock = () => {
+  if (!currentLine.value) return
+  stockSelectRef.value.open(currentLine.value.itemId)
+}
+
+const handleStockSelected = (stock: any) => {
+  formData.materialStockId = stock.materialStockId
+  formData.batchId = stock.batchId
+  formData.batchCode = stock.batchCode
+  formData.warehouseId = stock.warehouseId
+  formData.warehouseName = stock.warehouseName
+  formData.locationId = stock.locationId
+  formData.locationName = stock.locationName
+  formData.areaId = stock.areaId
+  formData.areaName = stock.areaName
+  formData.availableQuantity = stock.availableQuantity
+}
+
+const handleConfirm = async () => {
+  await formRef.value.validate()
+
+  if (!currentLine.value) return
+
+  if (!currentLine.value.details) {
+    currentLine.value.details = []
+  }
+
+  const detailData: DetailItem = {
+    lineId: currentLine.value.id,
+    materialStockId: formData.materialStockId,
+    batchId: formData.batchId,
+    batchCode: formData.batchCode,
+    warehouseId: formData.warehouseId,
+    warehouseName: formData.warehouseName,
+    locationId: formData.locationId,
+    locationName: formData.locationName,
+    areaId: formData.areaId,
+    areaName: formData.areaName,
+    quantity: formData.quantity
+  }
+
+  currentLine.value.details.push(detailData)
+
+  // 更新已拣数量
+  currentLine.value.pickedQuantity = currentLine.value.details.reduce(
+    (sum, detail) => sum + detail.quantity,
+    0
+  )
+
+  emit('update:modelValue', lines.value)
+  dialogVisible.value = false
+}
+
+const handleDeleteDetail = (row: LineItem, index: number) => {
+  if (!row.details) return
+
+  row.details.splice(index, 1)
+
+  // 更新已拣数量
+  row.pickedQuantity = row.details.reduce((sum, detail) => sum + detail.quantity, 0)
+
+  emit('update:modelValue', lines.value)
+}
+
+const resetForm = () => {
+  Object.assign(formData, {
+    materialStockId: 0,
+    batchCode: '',
+    warehouseId: 0,
+    warehouseName: '',
+    locationId: 0,
+    locationName: '',
+    areaId: 0,
+    areaName: '',
+    quantity: 0,
+    availableQuantity: 0
+  })
+  formRef.value?.clearValidate()
+}
+</script>
+
+<style scoped>
+.cursor-pointer {
+  cursor: pointer;
+}
+</style>
diff --git a/src/views/mes/wm/productionissue/components/ProductionIssueLine.vue b/src/views/mes/wm/productionissue/components/ProductionIssueLine.vue
new file mode 100644
index 000000000..3221e3966
--- /dev/null
+++ b/src/views/mes/wm/productionissue/components/ProductionIssueLine.vue
@@ -0,0 +1,202 @@
+<!-- 生产领料单行项目组件 - 用于 PREPARE 状态下编辑行项目 -->
+<!-- TODO @AI：参考 /Users/yunai/Java/yudao-all-in-one/yudao-ui-admin-vue3/src/views/mes/wm/arrivalnotice -->
+<template>
+  <div>
+    <el-button type="primary" @click="handleAdd" class="mb-10px" v-if="!readonly">
+      <Icon icon="ep:plus" class="mr-5px" /> 添加物料
+    </el-button>
+
+    <el-table :data="lines" border>
+      <el-table-column label="物料编号" prop="itemCode" width="150" />
+      <el-table-column label="物料名称" prop="itemName" width="200" />
+      <el-table-column label="规格型号" prop="specification" width="150" />
+      <el-table-column label="单位" prop="unitOfMeasure" width="100" />
+      <el-table-column label="领料数量" prop="quantityIssued" width="120" />
+      <el-table-column label="批次号" prop="batchCode" width="150" />
+      <el-table-column label="备注" prop="remark" min-width="150" />
+      <el-table-column label="操作" width="150" fixed="right" v-if="!readonly">
+        <template #default="scope">
+          <el-button link type="primary" @click="handleEdit(scope.row, scope.$index)">
+            编辑
+          </el-button>
+          <el-button link type="danger" @click="handleDelete(scope.$index)"> 删除 </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加/编辑对话框 -->
+    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px">
+      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
+        <el-form-item label="物料" prop="itemId">
+          <el-input
+            v-model="formData.itemCode"
+            placeholder="请选择物料"
+            readonly
+            @click="handleSelectItem"
+            class="cursor-pointer"
+          >
+            <template #append>
+              <el-button @click="handleSelectItem">
+                <Icon icon="ep:search" />
+              </el-button>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="物料名称">
+          <el-input v-model="formData.itemName" disabled />
+        </el-form-item>
+        <el-form-item label="规格型号">
+          <el-input v-model="formData.specification" disabled />
+        </el-form-item>
+        <el-form-item label="单位">
+          <el-input v-model="formData.unitOfMeasure" disabled />
+        </el-form-item>
+        <el-form-item label="领料数量" prop="quantityIssued">
+          <el-input-number
+            v-model="formData.quantityIssued"
+            :min="0"
+            :precision="2"
+            class="!w-full"
+          />
+        </el-form-item>
+        <el-form-item label="批次号">
+          <el-input v-model="formData.batchCode" placeholder="请输入批次号" />
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleConfirm">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 物料选择器 -->
+    <ItemSelect ref="itemSelectRef" @select="handleItemSelected" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import ItemSelect from '@/components/MES/ItemSelect.vue'
+
+defineOptions({ name: 'ProductionIssueLine' })
+
+interface LineItem {
+  id?: number
+  issueId?: number
+  itemId: number
+  itemCode?: string
+  itemName?: string
+  specification?: string
+  unitOfMeasure?: string
+  quantityIssued: number
+  batchId?: number
+  batchCode?: string
+  remark?: string
+}
+
+const props = defineProps({
+  modelValue: {
+    type: Array as () => LineItem[],
+    default: () => []
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const lines = ref<LineItem[]>(props.modelValue || [])
+const dialogVisible = ref(false)
+const dialogTitle = ref('')
+const editIndex = ref(-1)
+const formRef = ref()
+const itemSelectRef = ref()
+
+const formData = reactive<LineItem>({
+  itemId: 0,
+  itemCode: '',
+  itemName: '',
+  specification: '',
+  unitOfMeasure: '',
+  quantityIssued: 0,
+  batchCode: '',
+  remark: ''
+})
+
+const formRules = {
+  itemId: [{ required: true, message: '请选择物料', trigger: 'change' }],
+  quantityIssued: [{ required: true, message: '请输入领料数量', trigger: 'blur' }]
+}
+
+const handleAdd = () => {
+  dialogTitle.value = '添加物料'
+  editIndex.value = -1
+  resetForm()
+  dialogVisible.value = true
+}
+
+const handleEdit = (row: LineItem, index: number) => {
+  dialogTitle.value = '编辑物料'
+  editIndex.value = index
+  Object.assign(formData, row)
+  dialogVisible.value = true
+}
+
+const handleDelete = (index: number) => {
+  lines.value.splice(index, 1)
+  emit('update:modelValue', lines.value)
+}
+
+const handleSelectItem = () => {
+  itemSelectRef.value.open()
+}
+
+const handleItemSelected = (item: any) => {
+  formData.itemId = item.itemId
+  formData.itemCode = item.itemCode
+  formData.itemName = item.itemName
+  formData.specification = item.specification
+  formData.unitOfMeasure = item.unitName
+}
+
+const handleConfirm = async () => {
+  await formRef.value.validate()
+
+  const lineData = { ...formData }
+
+  if (editIndex.value >= 0) {
+    lines.value[editIndex.value] = lineData
+  } else {
+    lines.value.push(lineData)
+  }
+
+  emit('update:modelValue', lines.value)
+  dialogVisible.value = false
+}
+
+const resetForm = () => {
+  Object.assign(formData, {
+    itemId: 0,
+    itemCode: '',
+    itemName: '',
+    specification: '',
+    unitOfMeasure: '',
+    quantityIssued: 0,
+    batchCode: '',
+    remark: ''
+  })
+  formRef.value?.clearValidate()
+}
+</script>
+
+<style scoped>
+.cursor-pointer {
+  cursor: pointer;
+}
+</style>
diff --git a/src/views/mes/wm/productionissue/index.vue b/src/views/mes/wm/productionissue/index.vue
index a9dea5113..a45963202 100644
--- a/src/views/mes/wm/productionissue/index.vue
+++ b/src/views/mes/wm/productionissue/index.vue
@@ -36,7 +36,17 @@
           class="!w-240px"
         />
       </el-form-item>
-      <!-- TODO @AI：单据状态 -->
+      <el-form-item label="单据状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择单据状态"
+          clearable
+          class="!w-240px"
+        >
+          <el-option label="草稿" :value="0" />
+          <el-option label="已完成" :value="4" />
+        </el-select>
+      </el-form-item>
       <el-form-item>
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
@@ -63,18 +73,22 @@
 
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <!-- TODO @AI：点击后，跳转详情 -->
-      <el-table-column label="领料单编号" align="center" prop="code" min-width="160" />
+      <el-table-column label="领料单编号" align="center" prop="code" min-width="160">
+        <template #default="scope">
+          <el-button link type="primary" @click="openForm('detail', scope.row.id)">
+            {{ scope.row.code }}
+          </el-button>
+        </template>
+      </el-table-column>
       <el-table-column label="领料单名称" align="center" prop="name" min-width="150" />
       <el-table-column label="生产工单" align="center" prop="workorderCode" min-width="140" />
-      <!-- TODO @AI：工作站、workstationName -->
-      <!-- TODO @AI：客户编号、客户名称 -->
-      <!-- TODO @AI：需求日期 -->
-      <!-- TODO @AI：移除“领料日期” -->
+      <el-table-column label="工作站" align="center" prop="workstationName" min-width="120" />
+      <el-table-column label="客户编号" align="center" prop="clientCode" min-width="120" />
+      <el-table-column label="客户名称" align="center" prop="clientName" min-width="150" />
       <el-table-column
-        label="领料日期"
+        label="需求时间"
         align="center"
-        prop="issueDate"
+        prop="requiredTime"
         :formatter="dateFormatter2"
         width="180px"
       />
@@ -85,55 +99,35 @@
       </el-table-column>
       <el-table-column label="操作" align="center" width="240" fixed="right">
         <template #default="scope">
-          <!-- TODO @AI：操作和 /Users/yunai/Java/yudao-all-in-one/yudao-ui-admin-vue3/src/views/mes/wm/itemreceipt/index.vue 对齐下； -->
-          <!-- TODO @AI：应该是：执行领出、修改、删除； -->
-          <!-- 准备中：编辑、审批、删除 -->
+          <!-- 草稿(0)：编辑、完成、删除 -->
           <el-button
             link
             type="primary"
             @click="openForm('update', scope.row.id)"
             v-hasPermi="['mes:wm-production-issue:update']"
-            v-if="scope.row.status === 10"
+            v-if="scope.row.status === 0"
           >
             编辑
           </el-button>
           <el-button
             link
             type="success"
-            @click="handleApprove(scope.row.id)"
+            @click="handleFinish(scope.row.id)"
             v-hasPermi="['mes:wm-production-issue:update-status']"
-            v-if="scope.row.status === 10"
+            v-if="scope.row.status === 0"
           >
-            审批
+            完成
           </el-button>
           <el-button
             link
             type="danger"
             @click="handleDelete(scope.row.id)"
             v-hasPermi="['mes:wm-production-issue:delete']"
-            v-if="scope.row.status === 10"
+            v-if="scope.row.status === 0"
           >
             删除
           </el-button>
-          <!-- 已审批：反审批、完成 -->
-          <el-button
-            link
-            type="warning"
-            @click="handleUnapprove(scope.row.id)"
-            v-hasPermi="['mes:wm-production-issue:update-status']"
-            v-if="scope.row.status === 20"
-          >
-            反审批
-          </el-button>
-          <el-button
-            link
-            type="primary"
-            @click="handleFinish(scope.row.id)"
-            v-hasPermi="['mes:wm-production-issue:update-status']"
-            v-if="scope.row.status === 20"
-          >
-            完成
-          </el-button>
+          <!-- 所有状态：详情 -->
           <el-button link type="info" @click="openForm('detail', scope.row.id)"> 详情 </el-button>
         </template>
       </el-table-column>
@@ -170,6 +164,7 @@ const queryParams = reactive({
   pageSize: 10,
   code: undefined,
   name: undefined,
+  status: undefined,
   issueDate: undefined
 })
 const queryFormRef = ref()
@@ -214,30 +209,10 @@ const handleDelete = async (id: number) => {
   } catch {}
 }
 
-/** 审批按钮操作 */
-const handleApprove = async (id: number) => {
-  try {
-    await message.confirm('确认审批该领料单吗？')
-    await WmProductionIssueApi.approveIssue(id)
-    message.success('审批成功')
-    await getList()
-  } catch {}
-}
-
-/** 反审批按钮操作 */
-const handleUnapprove = async (id: number) => {
-  try {
-    await message.confirm('确认反审批该领料单吗？')
-    await WmProductionIssueApi.unapproveIssue(id)
-    message.success('反审批成功')
-    await getList()
-  } catch {}
-}
-
 /** 完成按钮操作 */
 const handleFinish = async (id: number) => {
   try {
-    await message.confirm('确认完成该领料单吗？')
+    await message.confirm('确认完成该领料单并执行出库吗？')
     await WmProductionIssueApi.finishIssue(id)
     message.success('完成成功')
     await getList()