feat(订单): 添加订单明细行展开功能

src/components/order-item-table/index.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="order-item-table">
+    <el-table
+      :data="itemData"
+      :loading="loading"
+      border
+      size="small"
+      style="width: 100%"
+    >
+      <el-table-column prop="itemCode" label="物料编码" width="120" />
+      <el-table-column prop="itemName" label="物料名称" width="150" />
+      <el-table-column prop="specs" label="规格型号" width="120" />
+      <el-table-column prop="mainItemCategoryName" label="主物料分类" width="120" />
+      <el-table-column prop="warehouseName" label="仓库名称" width="120" />
+      <el-table-column prop="availableQuantity" label="可用数量" width="100" align="right">
+        <template slot-scope="scope">
+          {{ scope.row.availableQuantity | numberFormat(4) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="orderQuantity" label="订单数量" width="100" align="right">
+        <template slot-scope="scope">
+          {{ scope.row.orderQuantity | numberFormat(4) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="confirmQuantity" label="确认数量" width="100" align="right">
+        <template slot-scope="scope">
+          {{ scope.row.confirmQuantity | numberFormat(4) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="unitPrice" label="单价" width="100" align="right">
+        <template slot-scope="scope">
+          ¥{{ scope.row.unitPrice | numberFormat(2) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="taxRate" label="税率" width="80" align="right">
+        <template slot-scope="scope">
+          {{ scope.row.taxRate | numberFormat(2) }}%
+        </template>
+      </el-table-column>
+      <el-table-column prop="taxAmount" label="税额" width="100" align="right">
+        <template slot-scope="scope">
+          ¥{{ scope.row.taxAmount | numberFormat(2) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="totalAmount" label="总金额" width="100" align="right">
+        <template slot-scope="scope">
+          ¥{{ scope.row.totalAmount | numberFormat(2) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="itemStatus" label="明细状态" width="100" align="center">
+        <template slot-scope="scope">
+          <el-tag
+            :type="getStatusType(scope.row.itemStatus)"
+            size="mini"
+          >
+            {{ getStatusText(scope.row.itemStatus) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { getList } from '@/api/order/order-item'
+
+export default {
+  name: 'OrderItemTable',
+  props: {
+    orderId: {
+      type: [String, Number],
+      required: true
+    }
+  },
+  data() {
+    return {
+      itemData: [],
+      loading: false
+    }
+  },
+
+  watch: {
+    orderId: {
+      handler(newVal) {
+        if (newVal) {
+          this.loadItemData()
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    async loadItemData() {
+      if (!this.orderId) return
+      
+      this.loading = true
+      try {
+        const response = await getList(1, 1000, { orderId: this.orderId })
+        this.itemData = response.data.data.records || []
+      } catch (error) {
+        console.error('加载订单明细失败:', error)
+        this.$message.error('加载订单明细失败')
+        this.itemData = []
+      } finally {
+        this.loading = false
+      }
+    },
+    getStatusText(status) {
+      const statusMap = {
+        0: '待确认',
+        1: '已确认',
+        2: '生产中',
+        3: '已完成',
+        4: '已取消'
+      }
+      return statusMap[status] || '未知'
+    },
+    getStatusType(status) {
+      const typeMap = {
+        0: 'warning',
+        1: 'success',
+        2: 'primary',
+        3: 'info',
+        4: 'danger'
+      }
+      return typeMap[status] || 'info'
+    }
+  },
+  filters: {
+    numberFormat(value, precision = 2) {
+      if (value === null || value === undefined || value === '') return '0.00'
+      return parseFloat(value).toFixed(precision)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.order-item-table {
+  padding: 10px 0;
+}
+
+
+</style>

src/views/order/order/index-avue.vue

@@ -97,6 +97,19 @@
           删除
         </el-button>
       </template>
+
+      <!-- 行展开插槽 - 显示订单明细 -->
+      <template slot="expand" slot-scope="{row}">
+        <div class="order-expand-content">
+          <div class="expand-header">
+            <h4>订单明细信息</h4>
+            <span class="order-code">订单编码：{{ row.orderCode }}</span>
+          </div>
+          <div class="expand-body">
+            <order-item-table :order-id="row.id" />
+          </div>
+        </div>
+      </template>
     </avue-crud>
 
     <!-- 订单明细管理弹窗 -->
@@ -135,12 +148,14 @@ import {
   getOrderStatusTagType
 } from './constants'
 import OrderItemManagement from '@/components/order-item-management'
+import OrderItemTable from '@/components/order-item-table'
 import { mapGetters } from 'vuex'
 
 export default {
   name: 'OrderAvue',
   components: {
-    OrderItemManagement
+    OrderItemManagement,
+    OrderItemTable
   },
   data() {
     return {
@@ -319,10 +334,53 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
+.order-expand-content {
+  padding: 16px 24px;
+  background-color: #fafafa;
+  border-left: 3px solid #409eff;
+}
+
+.expand-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.expand-header h4 {
+  margin: 0;
+  color: #303133;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.order-code {
+  color: #606266;
+  font-size: 14px;
+  background-color: #f0f2f5;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+.expand-body {
+  margin-top: 12px;
+}
+
+/* 订单明细弹窗样式 */
 .order-item-dialog {
-  .el-dialog__body {
-    padding: 10px 20px;
-  }
+  border-radius: 8px;
+}
+
+.order-item-dialog .el-dialog__header {
+  background-color: #f5f7fa;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.order-item-dialog .el-dialog__title {
+  color: #303133;
+  font-weight: 600;
 }
 </style>

src/views/order/order/option.js

@@ -15,6 +15,10 @@ export const option = {
   viewBtn: true,
   selection: true,
   dialogClickModal: false,
+  // 行展开配置
+  expand: true, // 启用行展开功能
+  expandRowKeys: [], // 默认展开的行（通过主键数组控制）
+  defaultExpandAll: false, // 是否默认展开所有行
   
   // 列配置
   column: [