✨ feat(mes): 重构工单对话框，合并排产与详情功能

src/views/mes/pro/task/ProTaskProgress.vue

@@ -1,74 +0,0 @@
-<!-- MES 生产任务进度展示 -->
-<!-- TODO @芋艿：待 review -->
-<template>
-  <div v-loading="loading">
-    <el-empty v-if="!list.length" description="暂无排产任务" />
-    <div v-else class="flex flex-wrap gap-20px p-10px">
-      <el-card
-        v-for="task in list"
-        :key="task.id"
-        class="w-240px"
-        shadow="hover"
-      >
-        <div class="text-center">
-          <el-progress
-            type="circle"
-            :percentage="getProgress(task)"
-            :width="100"
-            :color="task.colorCode || '#00AEF3'"
-          />
-          <div class="mt-10px font-bold text-14px">{{ task.name }}</div>
-          <div class="mt-5px text-12px text-gray-500">
-            {{ task.processName }} - {{ task.workstationName }}
-          </div>
-          <div class="mt-5px text-12px">
-            <dict-tag :type="DICT_TYPE.MES_PRO_TASK_STATUS" :value="task.status" />
-          </div>
-          <div class="mt-5px text-12px text-gray-400">
-            排产: {{ task.quantity }} | 已产: {{ task.producedQuantity }} | 合格: {{ task.qualifyQuantity }}
-          </div>
-        </div>
-      </el-card>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { DICT_TYPE } from '@/utils/dict'
-import { ProTaskApi, ProTaskVO } from '@/api/mes/pro/task'
-
-defineOptions({ name: 'ProTaskProgress' })
-
-const props = defineProps<{
-  workOrderId: number
-}>()
-
-const loading = ref(false)
-const list = ref<ProTaskVO[]>([])
-
-/** 计算进度百分比 */
-const getProgress = (task: ProTaskVO): number => {
-  if (!task.quantity || task.quantity === 0) return 0
-  const percent = (task.producedQuantity / task.quantity) * 100
-  return Math.min(Math.round(percent), 100)
-}
-
-/** 查询任务列表（复用 page 接口，按工单过滤） */
-const getList = async () => {
-  loading.value = true
-  try {
-    const data = await ProTaskApi.getTaskPage({
-      workOrderId: props.workOrderId,
-      pageNo: 1,
-      pageSize: 999
-    })
-    list.value = data.list
-  } finally {
-    loading.value = false
-  }
-}
-
-watch(() => props.workOrderId, () => getList())
-
-onMounted(() => getList())
-</script>

src/views/mes/pro/task/ScheduleDrawer.vue

@@ -1,109 +0,0 @@
-<!-- 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>

src/views/mes/pro/task/WorkOrderForm2.vue

@@ -0,0 +1,235 @@
+<!-- MES 生产排产 - 工单排产对话框（表单布局与 WorkOrderForm 保持一致，全部 disabled） -->
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="960px">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      label-width="120px"
+      v-loading="formLoading"
+    >
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="工单编码" prop="code">
+            <el-input v-model="formData.code" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="工单名称" prop="name">
+            <el-input v-model="formData.name" disabled />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="工单来源" prop="orderSourceType">
+            <el-select v-model="formData.orderSourceType" class="!w-1/1" disabled>
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.MES_PRO_WORK_ORDER_SOURCE_TYPE)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8" v-if="formData.orderSourceType === MesProWorkOrderSourceTypeEnum.ORDER">
+          <el-form-item label="来源单据编号" prop="orderSourceCode">
+            <el-input v-model="formData.orderSourceCode" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="工单类型" prop="type">
+            <el-select v-model="formData.type" class="!w-1/1" disabled>
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.MES_PRO_WORK_ORDER_TYPE)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="产品" prop="productId">
+            <MdItemSelect v-model="formData.productId" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="工单数量" prop="quantity">
+            <el-input-number
+              v-model="formData.quantity"
+              :min="0"
+              :precision="2"
+              class="!w-1/1"
+              disabled
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="客户" prop="clientId">
+            <MdClientSelect v-model="formData.clientId" disabled />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col
+          :span="8"
+          v-if="
+            formData.type === MesProWorkOrderTypeEnum.OUTSOURCE ||
+            formData.type === MesProWorkOrderTypeEnum.PURCHASE
+          "
+        >
+          <el-form-item label="供应商" prop="vendorId">
+            <MdVendorSelect v-model="formData.vendorId" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="批次号" prop="batchCode">
+            <el-input v-model="formData.batchCode" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="需求日期" prop="requestDate">
+            <el-date-picker
+              v-model="formData.requestDate"
+              type="date"
+              value-format="x"
+              class="!w-1/1"
+              disabled
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="工单状态" prop="status">
+            <dict-tag :type="DICT_TYPE.MES_PRO_WORK_ORDER_STATUS" :value="formData.status" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="备注" prop="remark">
+            <el-input type="textarea" v-model="formData.remark" disabled />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <!-- 工序步骤导航（仅排产模式显示） -->
+    <el-steps
+      v-if="isSchedule && routeProcessList.length && formData.id"
+      :active="activeProcessStep"
+      finish-status="success"
+      align-center
+      simple
+      class="my-15px"
+    >
+      <el-step
+        v-for="(rp, index) in routeProcessList"
+        :key="rp.processId"
+        :title="rp.processName"
+        style="cursor: pointer"
+        @click="activeProcessStep = index"
+      />
+    </el-steps>
+
+    <!-- 当前工序的任务列表（仅排产模式显示） -->
+    <el-card
+      v-for="(rp, index) in routeProcessList"
+      v-show="isSchedule && activeProcessStep === index && formData.id"
+      :key="rp.processId"
+      shadow="never"
+    >
+      <ProTaskList
+        :work-order-id="formData.id!"
+        :work-order-code="formData.code!"
+        :work-order-name="formData.name!"
+        :route-id="currentRouteId"
+        :process-id="rp.processId"
+        :item-id="formData.productId!"
+        :unit-measure-id="(formData as any).unitMeasureId"
+        :process-list="routeProcessList"
+      />
+    </el-card>
+
+    <template #footer>
+      <el-button @click="dialogVisible = false">关 闭</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { ProWorkOrderApi } from '@/api/mes/pro/workorder'
+import { ProRouteProcessApi, ProRouteProcessVO } from '@/api/mes/pro/route/process'
+import { ProRouteProductApi } from '@/api/mes/pro/route/product'
+import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
+import MdClientSelect from '@/views/mes/md/client/components/MdClientSelect.vue'
+import MdVendorSelect from '@/views/mes/md/vendor/components/MdVendorSelect.vue'
+import { MesProWorkOrderSourceTypeEnum, MesProWorkOrderTypeEnum } from '@/views/mes/utils/constants'
+import ProTaskList from './ProTaskList.vue'
+
+defineOptions({ name: 'WorkOrderForm2' })
+
+const dialogVisible = ref(false)
+const dialogTitle = ref('')
+const formLoading = ref(false)
+const formType = ref('') // 'detail' - 详情；'schedule' - 排产
+const formData = ref<any>({})
+const formRef = ref()
+
+/** 是否为排产模式 */
+const isSchedule = computed(() => formType.value === 'schedule')
+
+// ==================== 工序步骤 ====================
+const routeProcessList = ref<ProRouteProcessVO[]>([])
+const activeProcessStep = ref(0)
+const currentRouteId = ref(0)
+
+/**
+ * 打开对话框
+ *
+ * @param type 'detail' - 工单详情；'schedule' - 生产排产
+ * @param id 工单 ID
+ */
+const open = async (type: string, id: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = type === 'schedule' ? '生产排产' : '工单详情'
+  formType.value = type
+  formLoading.value = true
+  formData.value = {}
+  routeProcessList.value = []
+  activeProcessStep.value = 0
+
+  try {
+    // 加载工单详情
+    formData.value = await ProWorkOrderApi.getWorkOrder(id)
+
+    // 排产模式：加载工艺路线工序列表
+    if (type === 'schedule' && formData.value.productId) {
+      await loadRouteProcesses(formData.value.productId)
+    }
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 加载工艺路线工序列表 */
+const loadRouteProcesses = async (productId: number) => {
+  try {
+    // 临时方案：查所有工艺路线产品，前端匹配（后续需后端提供"根据产品查询工艺路线"接口）
+    const routeProducts = await ProRouteProductApi.getRouteProductListByRoute(0)
+    const matched = routeProducts?.find((rp: any) => rp.itemId === 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)
+  }
+}
+
+defineExpose({ open })
+</script>

src/views/mes/pro/task/index.vue

@@ -65,7 +65,7 @@
 
   <!-- 甘特图预览 -->
   <ContentWrap title="排产甘特图">
-    <GanttChart ref="ganttPreviewRef" :tasks="ganttTasks" :readonly="true" :height="350" />
+    <GanttChart :tasks="ganttTasks" :readonly="true" :height="350" />
   </ContentWrap>
 
   <!-- 待排产工单列表 -->
@@ -81,7 +81,7 @@
     >
       <el-table-column label="工单编码" prop="code" width="220" fixed="left">
         <template #default="scope">
-          <el-button link type="primary" @click="openWorkOrderDetail(scope.row.id)">
+          <el-button link type="primary" @click="openForm('detail', scope.row.id)">
             {{ scope.row.code }}
           </el-button>
         </template>
@@ -120,9 +120,10 @@
       <el-table-column label="操作" align="center" width="160" fixed="right">
         <template #default="scope">
           <el-button
+            v-if="scope.row.status === MesProWorkOrderStatusEnum.CONFIRMED"
             link
             type="primary"
-            @click="openScheduleDrawer(scope.row)"
+            @click="openForm('schedule', scope.row.id)"
             v-hasPermi="['mes:pro-task:create']"
           >
             排产
@@ -139,12 +140,10 @@
     />
   </ContentWrap>
 
-  <!-- 排产 Drawer -->
+  <!-- 排产对话框（工单详情 + 工序步骤 + 任务列表） -->
-  <ScheduleDrawer ref="scheduleDrawerRef" />
+  <WorkOrderForm2 ref="formRef" />
   <!-- 甘特图编辑 Dialog -->
   <GanttEdit ref="ganttEditRef" />
-  <!-- 工单详情弹窗 -->
-  <WorkOrderForm ref="workOrderFormRef" />
 </template>
 
 <script setup lang="ts">
@@ -158,8 +157,7 @@ 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 ScheduleDrawer from './ScheduleDrawer.vue'
+import WorkOrderForm2 from './WorkOrderForm2.vue'
-import WorkOrderForm from '@/views/mes/pro/workorder/WorkOrderForm.vue'
 
 defineOptions({ name: 'MesProTask' })
 
@@ -181,7 +179,6 @@ const queryParams = reactive({
 const queryFormRef = ref() // 搜索表单 ref
 
 const ganttTasks = ref<any[]>([]) // 甘特图任务数据，格式与 ProTaskVO 相同，供 GanttChart 组件渲染
-const ganttPreviewRef = ref() // TODO @AI：是不是 ganttPreviewRef 可以去掉；
 
 /** 查询待排产工单列表（支持父子工单树形展示） */
 const getWorkOrderList = async () => {
@@ -223,17 +220,10 @@ const resetQuery = () => {
   handleQuery()
 }
 
-/** 打开排产 Drawer */
+/** 打开排产/详情对话框 */
-// TODO @芋艿：这里的作用，需要在看看；
+const formRef = ref()
-const scheduleDrawerRef = ref()
+const openForm = (type: string, id: number) => {
-const openScheduleDrawer = (row: any) => {
+  formRef.value.open(type, id)
-  scheduleDrawerRef.value.open(row)
-}
-
-/** 点击工单编码，查看工单详情 */
-const workOrderFormRef = ref()
-const openWorkOrderDetail = (id: number) => {
-  workOrderFormRef.value.open('detail', id)
 }
 
 // TODO @芋艿：后续可以考虑把甘特图预览和编辑合并成一个组件，统一管理甘特图数据和刷新逻辑；