From 85bb04eb4dada7f88cc8dc90415b18a140b400c4 Mon Sep 17 00:00:00 2001
From: xs <xins@mesnac.com>
Date: Thu, 22 May 2025 13:29:47 +0800
Subject: [PATCH] =?UTF-8?q?1.3.8=20=E5=89=8D=E7=AB=AF=EF=BC=9A=E7=94=9F?=
 =?UTF-8?q?=E4=BA=A7=E8=AE=A2=E5=8D=95=E9=BB=98=E8=AE=A4=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E5=85=A8=E9=83=A8=E6=95=B0=E6=8D=AE=EF=BC=8C=E5=B9=B6=E5=85=A8?=
 =?UTF-8?q?=E9=83=A8=E5=B1=95=E5=BC=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mes/orderInfo/orderTable.vue | 1044 ++++++++++++++++++++++++
 1 file changed, 1044 insertions(+)
 create mode 100644 src/views/mes/orderInfo/orderTable.vue

diff --git a/src/views/mes/orderInfo/orderTable.vue b/src/views/mes/orderInfo/orderTable.vue
new file mode 100644
index 0000000..a82eab7
--- /dev/null
+++ b/src/views/mes/orderInfo/orderTable.vue
@@ -0,0 +1,1044 @@
+<template>
+  <div class="p-2">
+    <!-- 生产订单主表 -->
+    <el-card shadow="never">
+      <template #header>
+        <el-row :gutter='10' class='mb8'>
+          <el-col :span='1.5'>
+            <el-button type='primary' plain icon='Plus' @click='handleEditProductOrder' v-hasPermi="['mes:orderInfo:add']">新增生产订单
+            </el-button>
+          </el-col>
+          <el-col :span='1.5'>
+            <el-button type='success' plain icon='Edit' :disabled='single' @click='handleUpdate()'
+                       v-hasPermi="['mes:orderInfo:edit']">修改
+            </el-button>
+          </el-col>
+          <el-col :span='1.5'>
+            <el-button type='danger' plain icon='Delete' :disabled='multiple' @click='handleDelete()'
+                       v-hasPermi="['mes:orderInfo:remove']">撤回
+            </el-button>
+          </el-col>
+          <el-col :span='1.5'>
+            <el-button type='warning' plain icon='Download' @click='handleExport' v-hasPermi="['mes:orderInfo:export']">
+              导出
+            </el-button>
+          </el-col>
+          <right-toolbar v-model:showSearch='showSearch' :columns='columns' :search='true'
+                         @queryTable='getList'></right-toolbar>
+        </el-row>
+      </template>
+
+
+      <el-table
+        :data="productionOrders"
+        border
+        class="order-table"
+        style="width: 100%"
+        :header-cell-style="{ background: '#e6f7ff', color: '#409EFF', fontWeight: 'bold' }"
+        row-key="orderNo"
+        :expand-row-keys="expandedRows"
+        @expand-change="handleExpandChange"
+      >
+        <el-table-column type="expand">
+          <template #default="{ row }">
+            <div class="process-flow-container">
+              <div class="process-flow">
+                <div
+                  v-for="(process, index) in row.processes"
+                  :key="process.id"
+                  class="process-node"
+                  :class="[getProcessStatusClass(process.status), {'status-overdue': isProcessOverdue(process)} ]"
+                  v-el-tooltip="{
+                    content: getProcessTooltipContent(process),
+                    placement: 'top',
+                    effect: 'dark',
+                    enterable: true,
+                    showAfter: 200,
+                    popperClass: 'process-tooltip-popper'
+                  }"
+                >
+                  <div class="process-name">{{ process.name }}</div>
+                  <div class="process-progress" style="position: relative; z-index: 10;">
+                    <el-progress
+                      :percentage="process.progress"
+                      :status="getProgressStatus(process.status)"
+                      :format="format"
+                      :stroke-width="12"
+                      :show-text="true"
+                    />
+                  </div>
+                  <div class="process-time">
+                    <p>计划开始: {{ process.planStartTime }}</p>
+                    <p>计划结束: {{ process.planEndTime }}</p>
+                  </div>
+                  <div class="process-status">{{ getStatusText(process.status) }}</div>
+                </div>
+              </div>
+
+              <div class="process-flow">
+                <div
+                  v-for="(process, index) in row.processes"
+                  :key="process.id"
+                  class="process-node"
+                  :class="[getProcessStatusClass(process.status), {'status-overdue': isProcessOverdue(process)} ]"
+                  v-el-tooltip="{
+                    content: getProcessTooltipContent(process),
+                    placement: 'top',
+                    effect: 'dark',
+                    enterable: true,
+                    showAfter: 200,
+                    popperClass: 'process-tooltip-popper'
+                  }"
+                >
+                  <div class="process-name">{{ process.name }}</div>
+                  <div class="process-progress" style="position: relative; z-index: 10;">
+                    <el-progress
+                      :percentage="process.progress"
+                      :status="getProgressStatus(process.status)"
+                      :format="format"
+                      :stroke-width="12"
+                      :show-text="true"
+                    />
+                  </div>
+                  <div class="process-time">
+                    <p>计划开始: {{ process.planStartTime }}</p>
+                    <p>计划结束: {{ process.planEndTime }}</p>
+                  </div>
+                  <div class="process-status">{{ getStatusText(process.status) }}</div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="orderNo" label="生产订单号" min-width="140" />
+        <el-table-column prop="orderName" label="生产订单名称" min-width="160" />
+        <el-table-column prop="productionType" label="生产类型" min-width="100" />
+        <el-table-column prop="salesOrderNo" label="销售订单号" min-width="140" />
+        <el-table-column prop="productType" label="产品类型" min-width="100" />
+        <el-table-column prop="productCode" label="产品编号" min-width="120" />
+        <el-table-column prop="productName" label="产品名称" min-width="160" />
+        <el-table-column prop="productSpec" label="产品规格" min-width="120" />
+        <el-table-column prop="bomVersion" label="产品BOM" min-width="100" />
+        <el-table-column prop="salesQuantity" label="销售数量" min-width="100" align="right" />
+        <el-table-column prop="planQuantity" label="计划数量" min-width="100" align="right" />
+        <el-table-column prop="unit" label="单位" min-width="80" />
+        <el-table-column prop="assignedQuantity" label="已派工数量" min-width="100" align="right" />
+        <el-table-column prop="completedQuantity" label="完成数量" min-width="100" align="right" />
+        <el-table-column prop="status" label="状态" min-width="100">
+          <template #default="{ row }">
+            <el-tag :type="getOrderStatusType(row.status)">
+              {{ getOrderStatusText(row.status) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="planStartTime" label="计划开始时间" min-width="160" />
+        <el-table-column prop="planEndTime" label="计划结束时间" min-width="160" />
+        <el-table-column prop="publishTime" label="发布时间" min-width="160" />
+        <el-table-column prop="deliveryDate" label="计划交货日期" min-width="160" />
+        <el-table-column prop="actualStartTime" label="实际开始时间" min-width="160" />
+        <el-table-column prop="actualEndTime" label="实际结束时间" min-width="160" />
+        <el-table-column prop="creator" label="创建人" min-width="100" />
+        <el-table-column prop="createTime" label="创建时间" min-width="160" />
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+
+// 分页相关
+const currentPage = ref(1)
+const pageSize = ref(10)
+const total = ref(100)
+const expandedRows = ref([])
+
+// 处理分页
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  fetchOrders()
+}
+
+const handleCurrentChange = (val) => {
+  currentPage.value = val
+  fetchOrders()
+}
+
+// 处理展开行
+const handleExpandChange = (row, expanded) => {
+  if (expanded) {
+    expandedRows.value = [row.orderNo]
+  } else {
+    expandedRows.value = []
+  }
+}
+
+// 获取工序状态样式
+const getProcessStatusClass = (status) => {
+  const statusMap = {
+    'not_started': 'status-not-started',
+    'in_progress': 'status-in-progress',
+    'completed': 'status-completed'
+  }
+  return statusMap[status] || ''
+}
+
+// 检查工序是否逾期
+const isProcessOverdue = (process) => {
+  if (process.status === 'completed') {
+    return false; // Completed processes are not overdue
+  }
+  const planEndTime = new Date(process.planEndTime);
+  const now = new Date();
+  return planEndTime < now;
+}
+
+// 获取进度条状态
+const getProgressStatus = (status) => {
+  const statusMap = {
+    'not_started': '',
+    'in_progress': 'warning',
+    'completed': 'success'
+  }
+  return statusMap[status] || ''
+}
+
+// 获取状态文本
+const getStatusText = (status) => {
+  const statusMap = {
+    'not_started': '未开始',
+    'in_progress': '进行中',
+    'completed': '已完成'
+  }
+  return statusMap[status] || status
+}
+
+// 获取订单状态类型
+const getOrderStatusType = (status) => {
+  const statusMap = {
+    'draft': 'info',
+    'processing': 'warning',
+    'completed': 'success',
+    'cancelled': 'danger'
+  }
+  return statusMap[status] || ''
+}
+
+// 获取订单状态文本
+const getOrderStatusText = (status) => {
+  const statusMap = {
+    'draft': '草稿',
+    'processing': '生产中',
+    'completed': '已完成',
+    'cancelled': '已取消'
+  }
+  return statusMap[status] || status
+}
+
+// 格式化进度条显示
+const format = (percentage) => {
+  return percentage + '%'
+}
+
+// 获取工序提示内容
+const getProcessTooltipContent = (process) => {
+  return `
+    <div class="process-tooltip">
+      <p><strong>${process.name}</strong></p>
+      <p>计划开始：${process.planStartTime}</p>
+      <p>计划结束：${process.planEndTime}</p>
+      <p>实际开始：${process.actualStartTime || '未开始'}</p>
+      <p>实际结束：${process.actualEndTime || '未结束'}</p>
+      <p>完成进度：${process.progress}%</p>
+    </div>
+  `
+}
+
+// 模拟数据 - 10条记录
+const productionOrders = ref([
+  {
+    orderNo: 'PO20240501001',
+    orderName: '镀锌钢管钢圈生产订单',
+    productionType: '标准生产',
+    salesOrderNo: 'SO20240501001',
+    productType: '成品',
+    productCode: 'BH-GW-R8',
+    productName: '镀锌钢管钢圈BH-GW-R8',
+    productSpec: 'Φ100*2.5mm',
+    bomVersion: 'BOM-V1.0',
+    salesQuantity: 1000,
+    planQuantity: 1000,
+    unit: '个',
+    assignedQuantity: 800,
+    completedQuantity: 500,
+    status: 'processing',
+    planStartTime: '2024-05-10 08:00',
+    planEndTime: '2024-05-15 18:00',
+    publishTime: '2024-05-09 10:00',
+    deliveryDate: '2024-05-20',
+    actualStartTime: '2024-05-10 08:00',
+    actualEndTime: '',
+    creator: '张三',
+    createTime: '2024-05-09 09:00',
+    processes: [
+      {
+        id: 1,
+        name: '剪裁',
+        status: 'completed',
+        progress: 100,
+        planStartTime: '2024-05-10 08:00',
+        planEndTime: '2024-05-10 12:00',
+        actualStartTime: '2024-05-10 08:00',
+        actualEndTime: '2024-05-10 11:30'
+      },
+      {
+        id: 2,
+        name: '冲压',
+        status: 'in_progress',
+        progress: 60,
+        planStartTime: '2024-05-10 13:00',
+        planEndTime: '2024-05-11 12:00',
+        actualStartTime: '2024-05-10 13:00',
+        actualEndTime: ''
+      },
+      {
+        id: 3,
+        name: '焊接',
+        status: 'not_started',
+        progress: 0,
+        planStartTime: '2024-05-11 13:00',
+        planEndTime: '2024-05-13 12:00',
+        actualStartTime: '',
+        actualEndTime: ''
+      },
+      {
+        id: 4,
+        name: '喷涂',
+        status: 'not_started',
+        progress: 0,
+        planStartTime: '2024-05-13 13:00',
+        planEndTime: '2024-05-15 18:00',
+        actualStartTime: '',
+        actualEndTime: ''
+      }
+    ]
+  },
+  {
+    orderNo: 'PO20240501002',
+    orderName: '铝合金外壳加工订单',
+    productionType: '非标准生产',
+    salesOrderNo: 'SO20240501002',
+    productType: '配件',
+    productCode: 'AL-CASE-01',
+    productName: '铝合金外壳',
+    productSpec: '200*150*50mm',
+    bomVersion: 'BOM-V1.1',
+    salesQuantity: 500,
+    planQuantity: 500,
+    unit: '个',
+    assignedQuantity: 500,
+    completedQuantity: 300,
+    status: 'processing',
+    planStartTime: '2024-05-12 09:00',
+    planEndTime: '2024-05-18 17:00',
+    publishTime: '2024-05-11 11:00',
+    deliveryDate: '2024-05-22',
+    actualStartTime: '2024-05-12 09:00',
+    actualEndTime: '',
+    creator: '李四',
+    createTime: '2024-05-11 10:00',
+    processes: [
+      {
+        id: 1,
+        name: '切割',
+        status: 'completed',
+        progress: 100,
+        planStartTime: '2024-05-12 09:00',
+        planEndTime: '2024-05-12 11:00',
+        actualStartTime: '2024-05-12 09:00',
+        actualEndTime: '2024-05-12 10:30'
+      },
+      {
+        id: 2,
+        name: '铣削',
+        status: 'in_progress',
+        progress: 75,
+        planStartTime: '2024-05-12 12:00',
+        planEndTime: '2024-05-14 17:00',
+        actualStartTime: '2024-05-12 12:00',
+        actualEndTime: ''
+      },
+      {
+        id: 3,
+        name: '钻孔',
+        status: 'not_started',
+        progress: 0,
+        planStartTime: '2024-05-15 09:00',
+        planEndTime: '2024-05-16 17:00',
+        actualStartTime: '',
+        actualEndTime: ''
+      },
+      {
+        id: 4,
+        name: '表面处理',
+        status: 'not_started',
+        progress: 0,
+        planStartTime: '2024-05-17 09:00',
+        planEndTime: '2024-05-18 17:00',
+        actualStartTime: '',
+        actualEndTime: ''
+      }
+    ]
+  },
+  {
+    orderNo: 'PO20240501003',
+    orderName: '不锈钢支架生产订单',
+    productionType: '标准生产',
+    salesOrderNo: 'SO20240501003',
+    productType: '组件',
+    productCode: 'SS-BRACKET-02',
+    productName: '不锈钢支架',
+    productSpec: '厚度5mm',
+    bomVersion: 'BOM-V2.0',
+    salesQuantity: 2000,
+    planQuantity: 2000,
+    unit: '个',
+    assignedQuantity: 1800,
+    completedQuantity: 1500,
+    status: 'completed',
+    planStartTime: '2024-05-08 08:00',
+    planEndTime: '2024-05-14 18:00',
+    publishTime: '2024-05-07 09:00',
+    deliveryDate: '2024-05-19',
+    actualStartTime: '2024-05-08 08:00',
+    actualEndTime: '2024-05-14 17:30',
+    creator: '王五',
+    createTime: '2024-05-07 08:00',
+    processes: [
+      {
+        id: 1,
+        name: '下料',
+        status: 'completed',
+        progress: 100,
+        planStartTime: '2024-05-08 08:00',
+        planEndTime: '2024-05-08 10:00',
+        actualStartTime: '2024-05-08 08:00',
+        actualEndTime: '2024-05-08 09:45'
+      },
+      {
+        id: 2,
+        name: '折弯',
+        status: 'completed',
+        progress: 100,
+        planStartTime: '2024-05-08 11:00',
+        planEndTime: '2024-05-09 12:00',
+        actualStartTime: '2024-05-08 11:00',
+        actualEndTime: '2024-05-09 11:45'
+      },
+      {
+        id: 3,
+        name: '焊接',
+        status: 'completed',
+        progress: 100,
+        planStartTime: '2024-05-09 13:00',
+        planEndTime: '2024-05-12 18:00',
+        actualStartTime: '2024-05-09 13:00',
+        actualEndTime: '2024-05-12 17:00'
+      },
+      {
+        id: 4,
+        name: '打磨',
+        status: 'completed',
+        progress: 100,
+        planStartTime: '2024-05-13 08:00',
+        planEndTime: '2024-05-14 18:00',
+        actualStartTime: '2024-05-13 08:00',
+        actualEndTime: '2024-05-14 17:30'
+      }
+    ]
+  },
+  {
+    orderNo: 'PO20240501004',
+    orderName: '铜制连接器生产订单',
+    productionType: '标准生产',
+    salesOrderNo: 'SO20240501004',
+    productType: '零件',
+    productCode: 'CU-CONN-10',
+    productName: '铜连接器',
+    productSpec: 'M10',
+    bomVersion: 'BOM-V1.5',
+    salesQuantity: 5000,
+    planQuantity: 5000,
+    unit: '个',
+    assignedQuantity: 0,
+    completedQuantity: 0,
+    status: 'draft',
+    planStartTime: '2024-05-20 08:00',
+    planEndTime: '2024-05-25 18:00',
+    publishTime: '2024-05-18 10:00',
+    deliveryDate: '2024-05-30',
+    actualStartTime: '',
+    actualEndTime: '',
+    creator: '赵六',
+    createTime: '2024-05-18 09:00',
+    processes: [
+      {
+        id: 1,
+        name: '车削',
+        status: 'not_started',
+        progress: 0,
+        planStartTime: '2024-05-20 08:00',
+        planEndTime: '2024-05-21 18:00',
+        actualStartTime: '',
+        actualEndTime: ''
+      },
+      {
+        id: 2,
+        name: '攻丝',
+        status: 'not_started',
+        progress: 0,
+        planStartTime: '2024-05-22 08:00',
+        planEndTime: '2024-05-22 18:00',
+        actualStartTime: '',
+        actualEndTime: ''
+      },
+      {
+        id: 3,
+        name: '电镀',
+        status: 'not_started',
+        progress: 0,
+        planStartTime: '2024-05-23 08:00',
+        planEndTime: '2024-05-25 18:00',
+        actualStartTime: '',
+        actualEndTime: ''
+      }
+    ]
+  },
+  {
+    orderNo: 'PO20240501005',
+    orderName: '塑料注塑件生产订单',
+    productionType: '标准生产',
+    salesOrderNo: 'SO20240501005',
+    productType: '零件',
+    productCode: 'PL-PART-05',
+    productName: '塑料盖板',
+    productSpec: 'Φ50mm',
+    bomVersion: 'BOM-V1.2',
+    salesQuantity: 10000,
+    planQuantity: 10000,
+    unit: '个',
+    assignedQuantity: 5000,
+    completedQuantity: 5000,
+    status: 'processing',
+    planStartTime: '2024-05-15 08:00',
+    planEndTime: '2024-05-17 18:00',
+    publishTime: '2024-05-14 10:00',
+    deliveryDate: '2024-05-25',
+    actualStartTime: '2024-05-15 08:00',
+    actualEndTime: '',
+    creator: '钱七',
+    createTime: '2024-05-14 09:00',
+    processes: [
+      {
+        id: 1,
+        name: '注塑',
+        status: 'completed',
+        progress: 100,
+        planStartTime: '2024-05-15 08:00',
+        planEndTime: '2024-05-16 12:00',
+        actualStartTime: '2024-05-15 08:00',
+        actualEndTime: '2024-05-16 11:30'
+      },
+      {
+        id: 2,
+        name: '去毛边',
+        status: 'in_progress',
+        progress: 50,
+        planStartTime: '2024-05-16 13:00',
+        planEndTime: '2024-05-17 18:00',
+        actualStartTime: '2024-05-16 13:00',
+        actualEndTime: ''
+      }
+    ]
+  },
+  {
+    orderNo: 'PO20240501006',
+    orderName: '碳钢轴生产订单',
+    productionType: '标准生产',
+    salesOrderNo: 'SO20240501006',
+    productType: '零件',
+    productCode: 'CS-SHAFT-03',
+    productName: '碳钢轴',
+    productSpec: 'L300mm, Φ20mm',
+    bomVersion: 'BOM-V1.0',
+    salesQuantity: 800,
+    planQuantity: 800,
+    unit: '个',
+    assignedQuantity: 400,
+    completedQuantity: 200,
+    status: 'processing',
+    planStartTime: '2024-05-16 08:00',
+    planEndTime: '2024-05-20 18:00',
+    publishTime: '2024-05-15 10:00',
+    deliveryDate: '2024-05-28',
+    actualStartTime: '2024-05-16 08:00',
+    actualEndTime: '',
+    creator: '孙八',
+    createTime: '2024-05-15 09:00',
+    processes: [
+      {
+        id: 1,
+        name: '切割',
+        status: 'completed',
+        progress: 100,
+        planStartTime: '2024-05-16 08:00',
+        planEndTime: '2024-05-16 10:00',
+        actualStartTime: '2024-05-16 08:00',
+        actualEndTime: '2024-05-16 09:30'
+      },
+      {
+        id: 2,
+        name: '车削',
+        status: 'in_progress',
+        progress: 40,
+        planStartTime: '2024-05-16 11:00',
+        planEndTime: '2024-05-18 18:00',
+        actualStartTime: '2024-05-16 11:00',
+        actualEndTime: ''
+      },
+      {
+        id: 3,
+        name: '铣键槽',
+        status: 'not_started',
+        progress: 0,
+        planStartTime: '2024-05-19 08:00',
+        planEndTime: '2024-05-19 12:00',
+        actualStartTime: '',
+        actualEndTime: ''
+      },
+      {
+        id: 4,
+        name: '热处理',
+        status: 'not_started',
+        progress: 0,
+        planStartTime: '2024-05-20 08:00',
+        planEndTime: '2024-05-20 18:00',
+        actualStartTime: '',
+        actualEndTime: ''
+      }
+    ]
+  },
+  {
+    orderNo: 'PO20240501007',
+    orderName: '橡胶密封圈生产订单',
+    productionType: '标准生产',
+    salesOrderNo: 'SO20240501007',
+    productType: '零件',
+    productCode: 'RU-SEAL-01',
+    productName: '橡胶密封圈',
+    productSpec: '外径20mm',
+    bomVersion: 'BOM-V1.0',
+    salesQuantity: 20000,
+    planQuantity: 20000,
+    unit: '个',
+    assignedQuantity: 20000,
+    completedQuantity: 20000,
+    status: 'completed',
+    planStartTime: '2024-05-10 08:00',
+    planEndTime: '2024-05-12 18:00',
+    publishTime: '2024-05-09 10:00',
+    deliveryDate: '2024-05-15',
+    actualStartTime: '2024-05-10 08:00',
+    actualEndTime: '2024-05-12 17:00',
+    creator: '周九',
+    createTime: '2024-05-09 09:00',
+    processes: [
+      {
+        id: 1,
+        name: '混炼',
+        status: 'completed',
+        progress: 100,
+        planStartTime: '2024-05-10 08:00',
+        planEndTime: '2024-05-10 10:00',
+        actualStartTime: '2024-05-10 08:00',
+        actualEndTime: '2024-05-10 09:40'
+      },
+      {
+        id: 2,
+        name: '硫化成型',
+        status: 'completed',
+        progress: 100,
+        planStartTime: '2024-05-10 11:00',
+        planEndTime: '2024-05-12 18:00',
+        actualStartTime: '2024-05-10 11:00',
+        actualEndTime: '2024-05-12 17:00'
+      }
+    ]
+  },
+  {
+    orderNo: 'PO20240501008',
+    orderName: '弹簧生产订单',
+    productionType: '标准生产',
+    salesOrderNo: 'SO20240501008',
+    productType: '零件',
+    productCode: 'SP-SPRING-02',
+    productName: '压缩弹簧',
+    productSpec: '线径1mm, 外径10mm',
+    bomVersion: 'BOM-V1.0',
+    salesQuantity: 15000,
+    planQuantity: 15000,
+    unit: '个',
+    assignedQuantity: 0,
+    completedQuantity: 0,
+    status: 'draft',
+    planStartTime: '2024-05-22 08:00',
+    planEndTime: '2024-05-24 18:00',
+    publishTime: '2024-05-21 10:00',
+    deliveryDate: '2024-05-30',
+    actualStartTime: '',
+    actualEndTime: '',
+    creator: '吴十',
+    createTime: '2024-05-21 09:00',
+    processes: [
+      {
+        id: 1,
+        name: '卷簧',
+        status: 'not_started',
+        progress: 0,
+        planStartTime: '2024-05-22 08:00',
+        planEndTime: '2024-05-23 12:00',
+        actualStartTime: '',
+        actualEndTime: ''
+      },
+      {
+        id: 2,
+        name: '热处理',
+        status: 'not_started',
+        progress: 0,
+        planStartTime: '2024-05-23 13:00',
+        planEndTime: '2024-05-24 18:00',
+        actualStartTime: '',
+        actualEndTime: ''
+      }
+    ]
+  },
+  {
+    orderNo: 'PO20240501009',
+    orderName: '电缆组件生产订单',
+    productionType: '非标准生产',
+    salesOrderNo: 'SO20240501009',
+    productType: '组件',
+    productCode: 'CA-ASSY-01',
+    productName: '定制电缆组件',
+    productSpec: '5米,带接头',
+    bomVersion: 'BOM-V1.0',
+    salesQuantity: 300,
+    planQuantity: 300,
+    unit: '套',
+    assignedQuantity: 150,
+    completedQuantity: 100,
+    status: 'processing',
+    planStartTime: '2024-05-18 09:00',
+    planEndTime: '2024-05-25 17:00',
+    publishTime: '2024-05-17 11:00',
+    deliveryDate: '2024-06-01',
+    actualStartTime: '2024-05-18 09:00',
+    actualEndTime: '',
+    creator: '郑十一',
+    createTime: '2024-05-17 10:00',
+    processes: [
+      {
+        id: 1,
+        name: '剥线',
+        status: 'completed',
+        progress: 100,
+        planStartTime: '2024-05-18 09:00',
+        planEndTime: '2024-05-18 12:00',
+        actualStartTime: '2024-05-18 09:00',
+        actualEndTime: '2024-05-18 11:30'
+      },
+      {
+        id: 2,
+        name: '压接端子',
+        status: 'in_progress',
+        progress: 70,
+        planStartTime: '2024-05-18 13:00',
+        planEndTime: '2024-05-20 17:00',
+        actualStartTime: '2024-05-18 13:00',
+        actualEndTime: ''
+      },
+      {
+        id: 3,
+        name: '焊接接头',
+        status: 'not_started',
+        progress: 0,
+        planStartTime: '2024-05-21 09:00',
+        planEndTime: '2024-05-23 17:00',
+        actualStartTime: '',
+        actualEndTime: ''
+      },
+      {
+        id: 4,
+        name: '测试',
+        status: 'not_started',
+        progress: 0,
+        planStartTime: '2024-05-24 09:00',
+        planEndTime: '2024-05-25 17:00',
+        actualStartTime: '',
+        actualEndTime: ''
+      }
+    ]
+  },
+  {
+    orderNo: 'PO20240501010',
+    orderName: '紧固件套装生产订单',
+    productionType: '标准生产',
+    salesOrderNo: 'SO20240501010',
+    productType: '成品',
+    productCode: 'FAST-KIT-01',
+    productName: '螺栓螺母垫圈套装',
+    productSpec: 'M8',
+    bomVersion: 'BOM-V1.0',
+    salesQuantity: 5000,
+    planQuantity: 5000,
+    unit: '套',
+    assignedQuantity: 0,
+    completedQuantity: 0,
+    status: 'draft',
+    planStartTime: '2024-05-28 08:00',
+    planEndTime: '2024-05-30 18:00',
+    publishTime: '2024-05-27 10:00',
+    deliveryDate: '2024-06-05',
+    actualStartTime: '',
+    actualEndTime: '',
+    creator: '冯十二',
+    createTime: '2024-05-27 09:00',
+    processes: [
+      {
+        id: 1,
+        name: '分拣',
+        status: 'not_started',
+        progress: 0,
+        planStartTime: '2024-05-28 08:00',
+        planEndTime: '2024-05-29 12:00',
+        actualStartTime: '',
+        actualEndTime: ''
+      },
+      {
+        id: 2,
+        name: '包装',
+        status: 'not_started',
+        progress: 0,
+        planStartTime: '2024-05-29 13:00',
+        planEndTime: '2024-05-30 18:00',
+        actualStartTime: '',
+        actualEndTime: ''
+      }
+    ]
+  }
+])
+
+// 获取订单数据
+const fetchOrders = () => {
+  // TODO: 实现实际的API调用
+  console.log('Fetching orders:', { currentPage: currentPage.value, pageSize: pageSize.value })
+  // Assuming productionOrders is populated here either by mock data or API call
+  // After fetching or setting data, expand all rows:
+  expandedRows.value = productionOrders.value.map(order => order.orderNo);
+}
+
+// Initial fetch (or mock data load)
+fetchOrders()
+</script>
+
+<style scoped>
+.production-order-list {
+  padding: 20px;
+}
+
+.order-table-card {
+  margin-bottom: 24px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px #e6f7ff;
+  border: 1px solid #b3e5fc;
+}
+
+.order-table-header {
+  font-size: 17px;
+  font-weight: bold;
+  color: #409EFF;
+}
+
+.order-table {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+:deep(.order-table .el-table__header th) {
+  background: #e6f7ff !important;
+  color: #409EFF !important;
+  font-weight: bold;
+}
+
+:deep(.order-table .el-table__body td) {
+  background: #fafdff;
+}
+
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* 工序流程图样式 */
+.process-flow-container {
+  padding: 8px 0; /* Keep top/bottom padding, remove left/right */
+  background-color: #fafdff;
+  width: 100%;
+  margin-left: 50px; /* Adjusted margin to align with the start of the second column, considering expand icon width and padding */
+}
+
+.process-flow-container .process-flow {
+  display: flex;
+  align-items: center;
+  padding: 0; /* Remove padding here, padding is on the container */
+  position: relative;
+  gap: 80px; /* Increased gap for longer lines */
+  margin-top:5px;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  min-height: 80px;
+  width: auto; /* Allow width to be determined by content and overflow */
+}
+
+.process-flow::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: #e0e0e0;
+  z-index: 1;
+}
+
+.process-node {
+  position: relative;
+  z-index: 2;
+  background-color: white;
+  padding: 8px;
+  border-radius: 4px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  width:160px;
+  flex-shrink: 0;
+  text-align: center;
+  transition: all 0.2s ease;
+}
+
+.process-name {
+  font-weight: bold;
+  margin-bottom: 4px;
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.process-progress {
+  margin: 8px 0;
+}
+
+.process-status {
+  font-size: 12px;
+  margin-top: 4px;
+  color: #606266;
+}
+
+.process-time {
+  font-size: 11px;
+  color: #606266;
+  margin-top: 4px;
+}
+
+/* 工序状态样式 */
+.status-not-started {
+  border: 1px solid #909399;
+}
+
+.status-in-progress {
+  border: 1px solid #e6a23c;
+}
+
+.status-completed {
+  border: 1px solid #67c23a;
+}
+
+.status-overdue {
+  background-color: #fde2e2 !important; /* Light red background */
+  border-color: #f56c6c !important; /* Red border */
+}
+
+/* 移除旧的弹窗样式 */
+.process-detail-popup {
+  display: none;
+}
+
+/* 工具提示样式 */
+:deep(.process-tooltip-popper) {
+  max-width: 320px !important;
+  padding: 12px !important;
+  background-color: #ffffcc !important; /* Light yellow for visibility */
+  border: 2px solid #ffcc00 !important; /* Orange border for visibility */
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2) !important; /* Stronger shadow */
+  z-index: 99999 !important; /* Very high z-index */
+  /* You might need to inspect the element in the browser developer tools
+     to see if this popper class is being applied and if there are other
+     elements with higher z-index or overflow issues hiding it. */
+}
+
+:deep(.process-tooltip) {
+  text-align: left;
+}
+
+:deep(.process-tooltip p) {
+  margin: 4px 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: #606266;
+}
+
+:deep(.process-tooltip strong) {
+  color: #409EFF;
+  font-size: 14px;
+  display: block;
+  margin-bottom: 8px;
+}
+
+/* 自定义滚动条样式 */
+.process-flow::-webkit-scrollbar {
+  height: 8px;
+}
+
+.process-flow::-webkit-scrollbar-thumb {
+  background-color: #c0c4cc;
+  border-radius: 4px;
+}
+
+.process-flow::-webkit-scrollbar-track {
+  background-color: #f5f7fa;
+}
+</style>