From 0bcab49fc0eae276a5e5eff5d9688253d40a01be Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 15 Mar 2026 16:45:58 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(mes):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=B7=A5=E5=8D=95=E7=8A=B6=E6=80=81=E5=92=8C=E6=9D=A5=E6=BA=90?=
 =?UTF-8?q?=E5=8D=95=E6=8D=AE=E5=AD=97=E6=AE=B5=EF=BC=8C=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=9F=A5=E8=AF=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mes/pro/task/ScheduleDrawer.vue | 109 ++++++++++++
 src/views/mes/pro/task/index.vue          | 202 ++++++++--------------
 2 files changed, 177 insertions(+), 134 deletions(-)
 create mode 100644 src/views/mes/pro/task/ScheduleDrawer.vue

diff --git a/src/views/mes/pro/task/ScheduleDrawer.vue b/src/views/mes/pro/task/ScheduleDrawer.vue
new file mode 100644
index 000000000..dca2a3daa
--- /dev/null
+++ b/src/views/mes/pro/task/ScheduleDrawer.vue
@@ -0,0 +1,109 @@
+<!-- MES 排产 Drawer：展示工单概要 + 工序步骤导航 + 当前工序的任务列表 -->
+<template>
+  <el-drawer v-model="visible" title="排产" size="75%" :destroy-on-close="true">
+    <div v-if="currentWorkOrder">
+      <!-- 工单概要信息 -->
+      <el-descriptions :column="3" border class="mb-15px">
+        <el-descriptions-item label="工单编码">{{ currentWorkOrder.code }}</el-descriptions-item>
+        <el-descriptions-item label="工单名称">{{ currentWorkOrder.name }}</el-descriptions-item>
+        <el-descriptions-item label="产品">{{ currentWorkOrder.productName }}</el-descriptions-item>
+        <el-descriptions-item label="数量">{{ currentWorkOrder.quantity }}</el-descriptions-item>
+        <el-descriptions-item label="客户">{{ currentWorkOrder.clientName }}</el-descriptions-item>
+        <el-descriptions-item label="需求日期">
+          {{ formatDate(currentWorkOrder.requestDate, 'YYYY-MM-DD') }}
+        </el-descriptions-item>
+      </el-descriptions>
+
+      <!-- 工序步骤导航 -->
+      <el-steps
+        v-if="routeProcessList.length"
+        :active="activeProcessStep"
+        finish-status="success"
+        class="mb-15px"
+        @change="handleStepChange"
+      >
+        <el-step
+          v-for="(rp, index) in routeProcessList"
+          :key="rp.processId"
+          :title="rp.processName"
+          :description="'第' + (index + 1) + '道工序'"
+          style="cursor: pointer"
+          @click="handleStepClick(index)"
+        />
+      </el-steps>
+      <el-empty v-else description="该产品未配置工艺路线，请先在工艺路线中维护" />
+
+      <!-- 当前工序的任务列表 -->
+      <ProTaskList
+        v-if="currentProcess"
+        :work-order-id="currentWorkOrder.id"
+        :work-order-code="currentWorkOrder.code"
+        :work-order-name="currentWorkOrder.name"
+        :route-id="currentRouteId"
+        :process-id="currentProcess.processId"
+        :item-id="currentWorkOrder.productId"
+        :unit-measure-id="currentWorkOrder.unitMeasureId"
+        :process-list="routeProcessList"
+      />
+    </div>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { formatDate } from '@/utils/formatTime'
+import { ProRouteProcessApi, ProRouteProcessVO } from '@/api/mes/pro/route/process'
+import { ProRouteProductApi } from '@/api/mes/pro/route/product'
+import ProTaskList from './ProTaskList.vue'
+
+defineOptions({ name: 'ScheduleDrawer' })
+
+// ==================== Drawer 状态 ====================
+const visible = ref(false)
+const currentWorkOrder = ref<any>(null)
+const routeProcessList = ref<ProRouteProcessVO[]>([])
+const activeProcessStep = ref(0)
+const currentRouteId = ref(0)
+
+/** 当前选中的工序 */
+const currentProcess = computed(() => {
+  return routeProcessList.value[activeProcessStep.value]
+})
+
+/**
+ * 打开排产 Drawer
+ *
+ * @param row 工单行数据（ProWorkOrderVO）
+ */
+const open = async (row: any) => {
+  currentWorkOrder.value = row
+  visible.value = true
+  activeProcessStep.value = 0
+  routeProcessList.value = []
+
+  // 通过产品查找工艺路线，再加载工序列表
+  try {
+    // 临时方案：查所有工艺路线产品，前端匹配（后续需后端提供"根据产品查询工艺路线"接口）
+    const routeProducts = await ProRouteProductApi.getRouteProductListByRoute(0)
+    const matched = routeProducts?.find((rp: any) => rp.itemId === row.productId)
+    if (matched) {
+      currentRouteId.value = matched.routeId
+      const processes = await ProRouteProcessApi.getRouteProcessListByRoute(matched.routeId)
+      routeProcessList.value = processes.sort((a: any, b: any) => a.sort - b.sort)
+    }
+  } catch (e) {
+    console.warn('加载工艺路线工序失败', e)
+  }
+}
+
+/** 工序步骤切换（el-steps @change） */
+const handleStepChange = (index: number) => {
+  activeProcessStep.value = index
+}
+
+/** 工序步骤点击 */
+const handleStepClick = (index: number) => {
+  activeProcessStep.value = index
+}
+
+defineExpose({ open })
+</script>
diff --git a/src/views/mes/pro/task/index.vue b/src/views/mes/pro/task/index.vue
index 63b86acb9..baa606351 100644
--- a/src/views/mes/pro/task/index.vue
+++ b/src/views/mes/pro/task/index.vue
@@ -27,9 +27,21 @@
           class="!w-240px"
         />
       </el-form-item>
-      <!-- TODO @AI：来源单据 -->
-      <!-- TODO @AI：产品 xxx；参考下别的模块 -->
-      <!-- TODO @AI：客户 xxx；参考下别的模块 -->
+      <el-form-item label="来源单据" prop="orderSourceCode">
+        <el-input
+          v-model="queryParams.orderSourceCode"
+          placeholder="请输入来源单据编号"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="产品" prop="productId">
+        <MdItemSelect v-model="queryParams.productId" placeholder="请选择产品" class="!w-240px" />
+      </el-form-item>
+      <el-form-item label="客户" prop="clientId">
+        <MdClientSelect v-model="queryParams.clientId" placeholder="请选择客户" class="!w-240px" />
+      </el-form-item>
       <el-form-item label="需求日期" prop="requestDate">
         <el-date-picker
           v-model="queryParams.requestDate"
@@ -63,20 +75,34 @@
       :data="workOrderList"
       :stripe="true"
       :show-overflow-tooltip="true"
+      row-key="id"
+      default-expand-all
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
     >
-      <el-table-column label="工单编码" align="center" prop="code" width="140" />
+      <el-table-column label="工单编码" prop="code" width="220" fixed="left">
+        <template #default="scope">
+          <el-button link type="primary" @click="openWorkOrderDetail(scope.row.id)">
+            {{ scope.row.code }}
+          </el-button>
+        </template>
+      </el-table-column>
       <el-table-column label="工单名称" align="center" prop="name" min-width="150" />
-      <!-- TODO @AI：工单来源 -->
-      <!-- TODO @AI：订单编号 -->
-      <!-- TODO @AI：订单编号 -->
+      <el-table-column label="工单来源" align="center" prop="orderSourceType" width="100">
+        <template #default="scope">
+          <dict-tag
+            :type="DICT_TYPE.MES_PRO_WORK_ORDER_SOURCE_TYPE"
+            :value="scope.row.orderSourceType"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="来源单据编号" align="center" prop="orderSourceCode" width="140" />
       <el-table-column label="产品编码" align="center" prop="productCode" width="120" />
       <el-table-column label="产品名称" align="center" prop="productName" min-width="120" />
       <el-table-column label="规格型号" align="center" prop="productSpec" width="120" />
       <el-table-column label="单位" align="center" prop="unitMeasureName" width="80" />
       <el-table-column label="工单数量" align="center" prop="quantity" width="100" />
       <el-table-column label="调整数量" align="center" prop="quantityChanged" width="100" />
-      <el-table-column label="已排产" align="center" prop="quantityScheduled" width="80" />
-      <el-table-column label="已生产数量" align="center" prop="quantityProduced" width="80" />
+      <el-table-column label="已生产数量" align="center" prop="quantityProduced" width="100" />
       <el-table-column label="客户编码" align="center" prop="clientCode" width="120" />
       <el-table-column label="客户名称" align="center" prop="clientName" width="120" />
       <el-table-column
@@ -86,7 +112,7 @@
         :formatter="dateFormatter2"
         width="120"
       />
-      <el-table-column label="状态" align="center" prop="status" width="100">
+      <el-table-column label="排产状态" align="center" prop="status" width="100">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.MES_PRO_WORK_ORDER_STATUS" :value="scope.row.status" />
         </template>
@@ -101,14 +127,6 @@
           >
             排产
           </el-button>
-          <el-button
-            link
-            type="success"
-            @click="openProgressDrawer(scope.row)"
-            v-hasPermi="['mes:pro-task:query']"
-          >
-            进度
-          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -122,113 +140,63 @@
   </ContentWrap>
 
   <!-- 排产 Drawer -->
-  <el-drawer v-model="scheduleDrawerVisible" title="排产" size="75%" :destroy-on-close="true">
-    <div v-if="currentWorkOrder">
-      <!-- 工单概要信息 -->
-      <el-descriptions :column="3" border class="mb-15px">
-        <el-descriptions-item label="工单编码">{{ currentWorkOrder.code }}</el-descriptions-item>
-        <el-descriptions-item label="工单名称">{{ currentWorkOrder.name }}</el-descriptions-item>
-        <el-descriptions-item label="产品">{{ currentWorkOrder.productName }}</el-descriptions-item>
-        <el-descriptions-item label="数量">{{ currentWorkOrder.quantity }}</el-descriptions-item>
-        <el-descriptions-item label="客户">{{ currentWorkOrder.clientName }}</el-descriptions-item>
-        <el-descriptions-item label="需求日期">
-          {{ formatDate(currentWorkOrder.requestDate, 'YYYY-MM-DD') }}
-        </el-descriptions-item>
-      </el-descriptions>
-
-      <!-- 工序步骤导航 -->
-      <el-steps
-        v-if="routeProcessList.length"
-        :active="activeProcessStep"
-        finish-status="success"
-        class="mb-15px"
-        @change="handleStepChange"
-      >
-        <el-step
-          v-for="(rp, index) in routeProcessList"
-          :key="rp.processId"
-          :title="rp.processName"
-          :description="'第' + (index + 1) + '道工序'"
-          style="cursor: pointer"
-          @click="handleStepClick(index)"
-        />
-      </el-steps>
-      <el-empty v-else description="该产品未配置工艺路线，请先在工艺路线中维护" />
-
-      <!-- 当前工序的任务列表 -->
-      <ProTaskList
-        v-if="currentProcess"
-        :work-order-id="currentWorkOrder.id"
-        :work-order-code="currentWorkOrder.code"
-        :work-order-name="currentWorkOrder.name"
-        :route-id="currentRouteId"
-        :process-id="currentProcess.processId"
-        :item-id="currentWorkOrder.productId"
-        :unit-measure-id="currentWorkOrder.unitMeasureId"
-        :process-list="routeProcessList"
-      />
-    </div>
-  </el-drawer>
-
-  <!-- 进度 Drawer -->
-  <el-drawer v-model="progressDrawerVisible" title="生产进度" size="60%" :destroy-on-close="true">
-    <ProTaskProgress v-if="currentWorkOrder" :work-order-id="currentWorkOrder.id" />
-  </el-drawer>
-
+  <ScheduleDrawer ref="scheduleDrawerRef" />
   <!-- 甘特图编辑 Dialog -->
   <GanttEdit ref="ganttEditRef" />
+  <!-- 工单详情弹窗 -->
+  <WorkOrderForm ref="workOrderFormRef" />
 </template>
 
 <script setup lang="ts">
 import { dateFormatter2 } from '@/utils/formatTime'
-import { formatDate } from '@/utils/formatTime'
+import { handleTree } from '@/utils/tree'
 import { DICT_TYPE } from '@/utils/dict'
 import { ProWorkOrderApi, ProWorkOrderVO } from '@/api/mes/pro/workorder'
 import { ProTaskApi } from '@/api/mes/pro/task'
-import { ProRouteProcessApi, ProRouteProcessVO } from '@/api/mes/pro/route/process'
-import { ProRouteProductApi } from '@/api/mes/pro/route/product'
 import { MesProWorkOrderStatusEnum, MesProWorkOrderTypeEnum } from '@/views/mes/utils/constants'
 import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
+import MdClientSelect from '@/views/mes/md/client/components/MdClientSelect.vue'
 import GanttChart from './components/GanttChart.vue'
 import GanttEdit from './GanttEdit.vue'
-import ProTaskList from './ProTaskList.vue'
-import ProTaskProgress from './ProTaskProgress.vue'
+import ScheduleDrawer from './ScheduleDrawer.vue'
+import WorkOrderForm from '@/views/mes/pro/workorder/WorkOrderForm.vue'
 
 defineOptions({ name: 'MesProTask' })
 
-const loading = ref(true)
-const workOrderList = ref<ProWorkOrderVO[]>([])
-const total = ref(0)
+const loading = ref(true) // 列表加载状态
+const workOrderList = ref<ProWorkOrderVO[]>([]) // 工单列表数据
+const total = ref(0) // 总条数
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   code: undefined,
   name: undefined,
+  orderSourceCode: undefined,
   productId: undefined,
+  clientId: undefined,
   requestDate: undefined,
-  // 固定筛选：已确认 + 自行生产
-  status: MesProWorkOrderStatusEnum.CONFIRMED,
-  type: MesProWorkOrderTypeEnum.SELF
+  status: MesProWorkOrderStatusEnum.CONFIRMED, // 固定筛选：只查询"已确认"的工单
+  type: MesProWorkOrderTypeEnum.SELF // 固定筛选：只查询"自制"的工单
 })
-const queryFormRef = ref()
+const queryFormRef = ref() // 搜索表单 ref
 
-// 甘特图预览数据
-const ganttTasks = ref<any[]>([])
-const ganttPreviewRef = ref()
+const ganttTasks = ref<any[]>([]) // 甘特图任务数据，格式与 ProTaskVO 相同，供 GanttChart 组件渲染
+const ganttPreviewRef = ref() // TODO @AI：是不是 ganttPreviewRef 可以去掉；
 
-/** 查询待排产工单列表 */
+/** 查询待排产工单列表（支持父子工单树形展示） */
 const getWorkOrderList = async () => {
   loading.value = true
   try {
     const data = await ProWorkOrderApi.getWorkOrderPage(queryParams)
-    workOrderList.value = data.list
+    workOrderList.value = handleTree(data.list, 'id', 'parentId')
     total.value = data.total
   } finally {
     loading.value = false
   }
 }
 
-/** 加载甘特图预览数据（复用 page 接口，传大 pageSize） */
+/** 加载甘特图预览数据（查询所有任务，供甘特图组件渲染） */
+// TODO @芋艿：后续在对齐；
 const loadGanttPreview = async () => {
   try {
     const data = await ProTaskApi.getTaskPage({ pageNo: 1, pageSize: 999 })
@@ -251,59 +219,25 @@ const resetQuery = () => {
   // 恢复固定筛选
   queryParams.status = MesProWorkOrderStatusEnum.CONFIRMED
   queryParams.type = MesProWorkOrderTypeEnum.SELF
+  // 执行搜索
   handleQuery()
 }
 
-// ==================== 排产 Drawer ====================
-const scheduleDrawerVisible = ref(false)
-const currentWorkOrder = ref<any>(null)
-const routeProcessList = ref<ProRouteProcessVO[]>([])
-const activeProcessStep = ref(0)
-const currentRouteId = ref(0)
-
-const currentProcess = computed(() => {
-  return routeProcessList.value[activeProcessStep.value]
-})
-
 /** 打开排产 Drawer */
-const openScheduleDrawer = async (row: any) => {
-  currentWorkOrder.value = row
-  scheduleDrawerVisible.value = true
-  activeProcessStep.value = 0
-  routeProcessList.value = []
-
-  // 通过产品查找工艺路线，再加载工序列表
-  try {
-    // 临时方案：查所有工艺路线产品，前端匹配（后续需后端提供"根据产品查询工艺路线"接口）
-    const routeProducts = await ProRouteProductApi.getRouteProductListByRoute(0)
-    const matched = routeProducts?.find((rp: any) => rp.itemId === row.productId)
-    if (matched) {
-      currentRouteId.value = matched.routeId
-      const processes = await ProRouteProcessApi.getRouteProcessListByRoute(matched.routeId)
-      routeProcessList.value = processes.sort((a: any, b: any) => a.sort - b.sort)
-    }
-  } catch (e) {
-    console.warn('加载工艺路线工序失败', e)
-  }
+// TODO @芋艿：这里的作用，需要在看看；
+const scheduleDrawerRef = ref()
+const openScheduleDrawer = (row: any) => {
+  scheduleDrawerRef.value.open(row)
 }
 
-/** 工序步骤切换 */
-const handleStepChange = (index: number) => {
-  activeProcessStep.value = index
-}
-const handleStepClick = (index: number) => {
-  activeProcessStep.value = index
+/** 点击工单编码，查看工单详情 */
+const workOrderFormRef = ref()
+const openWorkOrderDetail = (id: number) => {
+  workOrderFormRef.value.open('detail', id)
 }
 
-// ==================== 进度 Drawer ====================
-const progressDrawerVisible = ref(false)
-
-const openProgressDrawer = (row: any) => {
-  currentWorkOrder.value = row
-  progressDrawerVisible.value = true
-}
-
-// ==================== 甘特图编辑 ====================
+// TODO @芋艿：后续可以考虑把甘特图预览和编辑合并成一个组件，统一管理甘特图数据和刷新逻辑；
+/** 打开甘特图编辑弹窗 */
 const ganttEditRef = ref()
 const openGanttEdit = () => {
   ganttEditRef.value.open()