feat(订单管理): 新增订单明细管理功能

src/api/order/order-item.js

@@ -0,0 +1,174 @@
+import request from '@/router/axios';
+
+/**
+ * 订单明细查询参数类型定义
+ * @typedef {Object} OrderItemQueryParams
+ * @property {string|number} orderId - 订单ID
+ * @property {string} [orderCode] - 订单编码
+ * @property {string|number} [itemId] - 物料ID
+ * @property {string} [itemCode] - 物料编码
+ * @property {string} [itemName] - 物料名称
+ * @property {string} [specs] - 规格型号
+ * @property {string|number} [mainItemCategoryId] - 主物料分类ID
+ * @property {string} [mainItemCategoryName] - 主物料分类名称
+ * @property {string|number} [warehouseId] - 仓库ID
+ * @property {string} [warehouseName] - 仓库名称
+ * @property {number} [itemStatus] - 明细状态 0-待确认 1-已确认 2-生产中 3-已完成 4-已取消
+ */
+
+/**
+ * 订单明细表单数据类型定义
+ * @typedef {Object} OrderItemForm
+ * @property {string|number} [id] - 明细ID（修改时必填）
+ * @property {string|number} orderId - 订单ID
+ * @property {string} orderCode - 订单编码
+ * @property {string|number} itemId - 物料ID
+ * @property {string} itemCode - 物料编码
+ * @property {string} itemName - 物料名称
+ * @property {string} specs - 规格型号
+ * @property {string|number} mainItemCategoryId - 主物料分类ID
+ * @property {string} mainItemCategoryName - 主物料分类名称
+ * @property {string|number} warehouseId - 仓库ID
+ * @property {string} warehouseName - 仓库名称
+ * @property {string|number} availableQuantity - 可用数量
+ * @property {string|number} orderQuantity - 订单数量
+ * @property {string|number} confirmQuantity - 确认数量
+ * @property {string|number} unitPrice - 单价
+ * @property {string|number} taxRate - 税率
+ * @property {string|number} taxAmount - 税额
+ * @property {string|number} totalAmount - 总金额
+ * @property {number} itemStatus - 明细状态 0-待确认 1-已确认 2-生产中 3-已完成 4-已取消
+ */
+
+/**
+ * 订单明细列表项类型定义
+ * @typedef {Object} OrderItemRecord
+ * @property {string} id - 明细ID
+ * @property {string} createUser - 创建用户ID
+ * @property {string} createDept - 创建部门ID
+ * @property {string} createTime - 创建时间
+ * @property {string} updateUser - 更新用户ID
+ * @property {string} updateTime - 更新时间
+ * @property {number} status - 状态 1-正常 0-禁用
+ * @property {number} isDeleted - 是否删除 0-未删除 1-已删除
+ * @property {string|number} orderId - 订单ID
+ * @property {string} orderCode - 订单编码
+ * @property {string|number} itemId - 物料ID
+ * @property {string} itemCode - 物料编码
+ * @property {string} itemName - 物料名称
+ * @property {string} specs - 规格型号
+ * @property {string|number} mainItemCategoryId - 主物料分类ID
+ * @property {string} mainItemCategoryName - 主物料分类名称
+ * @property {string|number} warehouseId - 仓库ID
+ * @property {string} warehouseName - 仓库名称
+ * @property {string} availableQuantity - 可用数量
+ * @property {string} orderQuantity - 订单数量
+ * @property {string} confirmQuantity - 确认数量
+ * @property {string} unitPrice - 单价
+ * @property {string} taxRate - 税率
+ * @property {string} taxAmount - 税额
+ * @property {string} totalAmount - 总金额
+ * @property {number} itemStatus - 明细状态 0-待确认 1-已确认 2-生产中 3-已完成 4-已取消
+ */
+
+/**
+ * API响应类型定义
+ * @template T
+ * @typedef {Object} ApiResponse
+ * @property {number} code - 响应码
+ * @property {boolean} success - 是否成功
+ * @property {T} data - 响应数据
+ * @property {string} msg - 响应消息
+ */
+
+/**
+ * 分页结果类型定义
+ * @template T
+ * @typedef {Object} PageResult
+ * @property {T[]} records - 数据记录
+ * @property {number} total - 总记录数
+ * @property {number} size - 每页大小
+ * @property {number} current - 当前页码
+ * @property {Array} orders - 排序信息
+ * @property {boolean} optimizeCountSql - 是否优化count查询
+ * @property {boolean} hitCount - 是否命中count缓存
+ * @property {string|null} countId - count查询ID
+ * @property {string|null} maxLimit - 最大限制
+ * @property {boolean} searchCount - 是否查询count
+ * @property {number} pages - 总页数
+ */
+
+/**
+ * 订单明细分页查询
+ * @param {number} current - 当前页码
+ * @param {number} size - 每页大小
+ * @param {OrderItemQueryParams} params - 查询参数
+ * @returns {Promise<ApiResponse<PageResult<OrderItemRecord>>>} 分页查询结果
+ */
+export const getList = (current, size, params) => {
+  return request({
+    url: '/blade-factory/api/factory/order-item',
+    method: 'get',
+    params: {
+      ...params,
+      current,
+      size
+    }
+  })
+}
+
+/**
+ * 添加订单明细
+ * @param {OrderItemForm} row - 订单明细表单数据
+ * @returns {Promise<ApiResponse<boolean>>} 添加结果
+ */
+export const add = (row) => {
+  return request({
+    url: '/blade-factory/api/factory/order-item',
+    method: 'post',
+    data: row
+  })
+}
+
+/**
+ * 修改订单明细
+ * @param {OrderItemForm} row - 订单明细表单数据
+ * @returns {Promise<ApiResponse<boolean>>} 修改结果
+ */
+export const update = (row) => {
+  return request({
+    url: '/blade-factory/api/factory/order-item',
+    method: 'put',
+    data: row
+  })
+}
+
+/**
+ * 删除订单明细
+ * @param {string} ids - 要删除的ID，多个用逗号分隔
+ * @returns {Promise<ApiResponse<boolean>>} 删除结果
+ */
+export const remove = (ids) => {
+  return request({
+    url: '/blade-factory/api/factory/order-item',
+    method: 'delete',
+    params: {
+      ids
+    }
+  })
+}
+
+/**
+ * 获取订单明细详情
+ * @param {string|number} id - 明细ID
+ * @returns {Promise<ApiResponse<OrderItemRecord>>} 明细详情
+ */
+export const getDetail = (id) => {
+  return request({
+    url: '/blade-factory/api/factory/order-item/detail',
+    method: 'get',
+    params: {
+      id
+    }
+  })
+}

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

@@ -0,0 +1,771 @@
+<template>
+  <div class="order-item-management">
+    <div v-if="orderInfo" class="order-info">
+      <el-descriptions title="订单信息" :column="3" border>
+        <el-descriptions-item label="订单编码">{{ orderInfo.orderCode }}</el-descriptions-item>
+        <el-descriptions-item label="客户名称">{{ orderInfo.customerName }}</el-descriptions-item>
+        <el-descriptions-item label="订单状态">
+          <el-tag :type="getOrderStatusType(orderInfo.status)">
+            {{ getOrderStatusText(orderInfo.status) }}
+          </el-tag>
+        </el-descriptions-item>
+      </el-descriptions>
+    </div>
+    
+    <div class="item-management" style="margin-top: 20px;">
+      <avue-crud
+        :option="option"
+        :data="data"
+        ref="crud"
+        v-model="form"
+        :page.sync="page"
+        :before-open="beforeOpen"
+        :table-loading="loading"
+        @row-del="rowDel"
+        @row-update="rowUpdate"
+        @row-save="rowSave"
+        @search-change="searchChange"
+        @search-reset="searchReset"
+        @selection-change="selectionChange"
+        @current-change="currentChange"
+        @size-change="sizeChange"
+        @refresh-change="refreshChange"
+        @on-load="onLoad"
+      >
+        <template slot="menuLeft">
+          <el-button
+            type="danger"
+            size="small"
+            plain
+            icon="el-icon-delete"
+            @click="handleDelete"
+          >
+            删除
+          </el-button>
+        </template>
+        
+        <template slot-scope="{row}" slot="itemStatus">
+          <el-tag :type="getItemStatusType(row.itemStatus)">
+            {{ getItemStatusText(row.itemStatus) }}
+          </el-tag>
+        </template>
+      </avue-crud>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getList, add, update, remove, getDetail } from '@/api/order/order-item'
+
+/**
+ * 订单明细查询参数类型定义
+ * @typedef {Object} OrderItemQueryParams
+ * @property {string|number} orderId - 订单ID
+ * @property {string} [orderCode] - 订单编码
+ * @property {string|number} [itemId] - 物料ID
+ * @property {string} [itemCode] - 物料编码
+ * @property {string} [itemName] - 物料名称
+ * @property {string} [specs] - 规格型号
+ * @property {string|number} [mainItemCategoryId] - 主物料分类ID
+ * @property {string} [mainItemCategoryName] - 主物料分类名称
+ * @property {string|number} [warehouseId] - 仓库ID
+ * @property {string} [warehouseName] - 仓库名称
+ * @property {number} [itemStatus] - 明细状态 0-待确认 1-已确认 2-生产中 3-已完成 4-已取消
+ */
+
+/**
+ * 订单明细表单数据类型定义
+ * @typedef {Object} OrderItemForm
+ * @property {string|number} [id] - 明细ID（修改时必填）
+ * @property {string|number} orderId - 订单ID
+ * @property {string} orderCode - 订单编码
+ * @property {string|number} itemId - 物料ID
+ * @property {string} itemCode - 物料编码
+ * @property {string} itemName - 物料名称
+ * @property {string} specs - 规格型号
+ * @property {string|number} mainItemCategoryId - 主物料分类ID
+ * @property {string} mainItemCategoryName - 主物料分类名称
+ * @property {string|number} warehouseId - 仓库ID
+ * @property {string} warehouseName - 仓库名称
+ * @property {string|number} availableQuantity - 可用数量
+ * @property {string|number} orderQuantity - 订单数量
+ * @property {string|number} confirmQuantity - 确认数量
+ * @property {string|number} unitPrice - 单价
+ * @property {string|number} taxRate - 税率
+ * @property {string|number} taxAmount - 税额
+ * @property {string|number} totalAmount - 总金额
+ * @property {number} itemStatus - 明细状态 0-待确认 1-已确认 2-生产中 3-已完成 4-已取消
+ */
+
+/**
+ * 订单明细列表项类型定义
+ * @typedef {Object} OrderItemRecord
+ * @property {string} id - 明细ID
+ * @property {string} createUser - 创建用户ID
+ * @property {string} createDept - 创建部门ID
+ * @property {string} createTime - 创建时间
+ * @property {string} updateUser - 更新用户ID
+ * @property {string} updateTime - 更新时间
+ * @property {number} status - 状态 1-正常 0-禁用
+ * @property {number} isDeleted - 是否删除 0-未删除 1-已删除
+ * @property {string|number} orderId - 订单ID
+ * @property {string} orderCode - 订单编码
+ * @property {string|number} itemId - 物料ID
+ * @property {string} itemCode - 物料编码
+ * @property {string} itemName - 物料名称
+ * @property {string} specs - 规格型号
+ * @property {string|number} mainItemCategoryId - 主物料分类ID
+ * @property {string} mainItemCategoryName - 主物料分类名称
+ * @property {string|number} warehouseId - 仓库ID
+ * @property {string} warehouseName - 仓库名称
+ * @property {string} availableQuantity - 可用数量
+ * @property {string} orderQuantity - 订单数量
+ * @property {string} confirmQuantity - 确认数量
+ * @property {string} unitPrice - 单价
+ * @property {string} taxRate - 税率
+ * @property {string} taxAmount - 税额
+ * @property {string} totalAmount - 总金额
+ * @property {number} itemStatus - 明细状态 0-待确认 1-已确认 2-生产中 3-已完成 4-已取消
+ */
+
+/**
+ * 订单信息类型定义
+ * @typedef {Object} OrderInfo
+ * @property {string} id - 订单ID
+ * @property {string} orderCode - 订单编码
+ * @property {string} customerName - 客户名称
+ * @property {number} status - 订单状态
+ */
+
+export default {
+  name: 'OrderItemManagement',
+  
+  props: {
+    /**
+     * 订单信息
+     * @type {OrderInfo}
+     */
+    orderInfo: {
+      type: Object,
+      default: () => null
+    },
+    
+    /**
+     * 是否显示组件
+     * @type {boolean}
+     */
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  
+  data() {
+    return {
+      /**
+       * 明细表单数据
+       * @type {OrderItemForm}
+       */
+      form: {},
+      
+      /**
+       * 明细数据列表
+       * @type {OrderItemRecord[]}
+       */
+      data: [],
+      
+      /**
+       * 明细加载状态
+       * @type {boolean}
+       */
+      loading: true,
+      
+      /**
+       * 明细分页信息
+       * @type {{pageSize: number, currentPage: number, total: number}}
+       */
+      page: {
+        pageSize: 10,
+        currentPage: 1,
+        total: 0
+      },
+      
+      /**
+       * 选中的明细行数据
+       * @type {OrderItemRecord[]}
+       */
+      selectionList: [],
+      
+      /**
+       * 明细表格配置
+       * @type {Object}
+       */
+      option: {
+        height: 'auto',
+        calcHeight: 30,
+        tip: false,
+        searchShow: true,
+        searchMenuSpan: 6,
+        border: true,
+        index: true,
+        selection: true,
+        viewBtn: true,
+        addBtn: true,
+        editBtn: true,
+        delBtn: true,
+        dialogClickModal: false,
+        dialogWidth: 800,
+        column: [
+          {
+            label: '物料编码',
+            prop: 'itemCode',
+            search: true,
+            width: 120,
+            rules: [
+              {
+                required: true,
+                message: '请输入物料编码',
+                trigger: 'blur'
+              }
+            ]
+          },
+          {
+            label: '物料名称',
+            prop: 'itemName',
+            search: true,
+            width: 150,
+            rules: [
+              {
+                required: true,
+                message: '请输入物料名称',
+                trigger: 'blur'
+              }
+            ]
+          },
+          {
+            label: '规格型号',
+            prop: 'specs',
+            width: 120,
+            rules: [
+              {
+                required: true,
+                message: '请输入规格型号',
+                trigger: 'blur'
+              }
+            ]
+          },
+          {
+            label: '主物料分类',
+            prop: 'mainItemCategoryName',
+            width: 120,
+            rules: [
+              {
+                required: true,
+                message: '请输入主物料分类名称',
+                trigger: 'blur'
+              }
+            ]
+          },
+          {
+            label: '仓库名称',
+            prop: 'warehouseName',
+            width: 120,
+            rules: [
+              {
+                required: true,
+                message: '请输入仓库名称',
+                trigger: 'blur'
+              }
+            ]
+          },
+          {
+            label: '可用数量',
+            prop: 'availableQuantity',
+            type: 'number',
+            precision: 4,
+            width: 100,
+            rules: [
+              {
+                required: true,
+                message: '请输入可用数量',
+                trigger: 'blur'
+              }
+            ]
+          },
+          {
+            label: '订单数量',
+            prop: 'orderQuantity',
+            type: 'number',
+            precision: 4,
+            width: 100,
+            rules: [
+              {
+                required: true,
+                message: '请输入订单数量',
+                trigger: 'blur'
+              }
+            ]
+          },
+          {
+            label: '确认数量',
+            prop: 'confirmQuantity',
+            type: 'number',
+            precision: 4,
+            width: 100,
+            rules: [
+              {
+                required: true,
+                message: '请输入确认数量',
+                trigger: 'blur'
+              }
+            ]
+          },
+          {
+            label: '单价',
+            prop: 'unitPrice',
+            type: 'number',
+            precision: 2,
+            width: 100,
+            rules: [
+              {
+                required: true,
+                message: '请输入单价',
+                trigger: 'blur'
+              }
+            ]
+          },
+          {
+            label: '税率',
+            prop: 'taxRate',
+            type: 'number',
+            precision: 2,
+            width: 80,
+            rules: [
+              {
+                required: true,
+                message: '请输入税率',
+                trigger: 'blur'
+              }
+            ]
+          },
+          {
+            label: '税额',
+            prop: 'taxAmount',
+            type: 'number',
+            precision: 2,
+            width: 100,
+            rules: [
+              {
+                required: true,
+                message: '请输入税额',
+                trigger: 'blur'
+              }
+            ]
+          },
+          {
+            label: '总金额',
+            prop: 'totalAmount',
+            type: 'number',
+            precision: 2,
+            width: 100,
+            rules: [
+              {
+                required: true,
+                message: '请输入总金额',
+                trigger: 'blur'
+              }
+            ]
+          },
+          {
+            label: '明细状态',
+            prop: 'itemStatus',
+            type: 'select',
+            dicData: [
+              { label: '待确认', value: 0 },
+              { label: '已确认', value: 1 },
+              { label: '生产中', value: 2 },
+              { label: '已完成', value: 3 },
+              { label: '已取消', value: 4 }
+            ],
+            search: true,
+            slot: true,
+            width: 100,
+            value: 0,
+            rules: [
+              {
+                required: true,
+                message: '请选择明细状态',
+                trigger: 'change'
+              }
+            ]
+          },
+          {
+            label: '物料ID',
+            prop: 'itemId',
+            type: 'number',
+            hide: true,
+            rules: [
+              {
+                required: true,
+                message: '请输入物料ID',
+                trigger: 'blur'
+              }
+            ]
+          },
+          {
+            label: '主物料分类ID',
+            prop: 'mainItemCategoryId',
+            type: 'number',
+            hide: true,
+            rules: [
+              {
+                required: true,
+                message: '请输入主物料分类ID',
+                trigger: 'blur'
+              }
+            ]
+          },
+          {
+            label: '仓库ID',
+            prop: 'warehouseId',
+            type: 'number',
+            hide: true,
+            rules: [
+              {
+                required: true,
+                message: '请输入仓库ID',
+                trigger: 'blur'
+              }
+            ]
+          }
+        ]
+      }
+    }
+  },
+  
+  watch: {
+    /**
+     * 监听订单信息变化
+     * @param {OrderInfo} newVal - 新的订单信息
+     * @param {OrderInfo} oldVal - 旧的订单信息
+     */
+    orderInfo: {
+      handler(newVal, oldVal) {
+        if (newVal && newVal.id !== (oldVal && oldVal.id)) {
+          this.page.currentPage = 1
+          this.onLoad(this.page)
+        }
+      },
+      immediate: true
+    },
+    
+    /**
+     * 监听显示状态变化
+     * @param {boolean} newVal - 新的显示状态
+     */
+    visible: {
+      handler(newVal) {
+        if (newVal && this.orderInfo) {
+          this.page.currentPage = 1
+          this.onLoad(this.page)
+        }
+      }
+    }
+  },
+  
+  methods: {
+    /**
+     * 明细数据加载
+     * @param {Object} page - 分页参数
+     * @param {Object} params - 查询参数
+     */
+    async onLoad(page, params = {}) {
+      if (!this.orderInfo || !this.orderInfo.id) {
+        this.data = []
+        this.page.total = 0
+        this.loading = false
+        return
+      }
+      
+      this.loading = true
+      try {
+        const queryParams = {
+          ...params,
+          orderId: this.orderInfo.id
+        }
+        
+        const response = await getList(page.currentPage, page.pageSize, queryParams)
+        
+        if (response.data && response.data.records) {
+          this.data = response.data.records
+          this.page.total = response.data.total
+        } else {
+          this.data = []
+          this.page.total = 0
+        }
+      } catch (error) {
+        console.error('加载明细数据失败:', error)
+        this.$message.error('加载明细数据失败')
+        this.data = []
+        this.page.total = 0
+      } finally {
+        this.loading = false
+      }
+    },
+    
+    /**
+     * 明细弹窗打开前处理
+     * @param {boolean} done - 完成回调
+     * @param {string} type - 操作类型 (add/edit/view)
+     */
+    beforeOpen(done, type) {
+      if (type === 'add') {
+        this.form = {
+          orderId: this.orderInfo && this.orderInfo.id,
+          orderCode: this.orderInfo && this.orderInfo.orderCode,
+          itemStatus: 0
+        }
+      }
+      done()
+    },
+    
+    /**
+     * 明细保存
+     * @param {OrderItemForm} row - 明细表单数据
+     * @param {boolean} done - 完成回调
+     * @param {boolean} loading - 加载状态回调
+     */
+    async rowSave(row, done, loading) {
+      try {
+        loading()
+        const formData = {
+          ...row,
+          orderId: this.orderInfo && this.orderInfo.id,
+          orderCode: this.orderInfo && this.orderInfo.orderCode
+        }
+        
+        await add(formData)
+        
+        this.$message.success('添加成功!')
+        done()
+        this.onLoad(this.page)
+        this.$emit('item-changed')
+      } catch (error) {
+        console.error('添加明细失败:', error)
+        this.$message.error('添加明细失败')
+        loading()
+      }
+    },
+    
+    /**
+     * 明细更新
+     * @param {OrderItemForm} row - 明细表单数据
+     * @param {number} index - 行索引
+     * @param {boolean} done - 完成回调
+     * @param {boolean} loading - 加载状态回调
+     */
+    async rowUpdate(row, index, done, loading) {
+      try {
+        loading()
+        const formData = {
+          ...row,
+          orderId: this.orderInfo && this.orderInfo.id,
+          orderCode: this.orderInfo && this.orderInfo.orderCode
+        }
+        
+        await update(formData)
+        
+        this.$message.success('修改成功!')
+        done()
+        this.onLoad(this.page)
+        this.$emit('item-changed')
+      } catch (error) {
+        console.error('修改明细失败:', error)
+        this.$message.error('修改明细失败')
+        loading()
+      }
+    },
+    
+    /**
+     * 明细删除
+     * @param {OrderItemRecord} row - 明细行数据
+     * @param {number} index - 行索引
+     */
+    async rowDel(row, index) {
+      try {
+        await remove(row.id)
+        this.$message.success('删除成功!')
+        this.onLoad(this.page)
+        this.$emit('item-changed')
+      } catch (error) {
+        console.error('删除明细失败:', error)
+        this.$message.error('删除明细失败')
+      }
+    },
+    
+    /**
+     * 明细批量删除
+     */
+    async handleDelete() {
+      if (this.selectionList.length === 0) {
+        this.$message.warning('请选择要删除的数据')
+        return
+      }
+      
+      try {
+        await this.$confirm('确定删除选中的明细吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+        
+        const ids = this.selectionList.map(item => item.id).join(',')
+        await remove(ids)
+        
+        this.$message.success('删除成功!')
+        this.selectionList = []
+        this.onLoad(this.page)
+        this.$emit('item-changed')
+      } catch (error) {
+        if (error !== 'cancel') {
+          console.error('批量删除明细失败:', error)
+          this.$message.error('批量删除明细失败')
+        }
+      }
+    },
+    
+    /**
+     * 明细搜索
+     * @param {Object} params - 搜索参数
+     * @param {boolean} done - 完成回调
+     */
+    searchChange(params, done) {
+      this.onLoad(this.page, params)
+      done()
+    },
+    
+    /**
+     * 明细搜索重置
+     */
+    searchReset() {
+      this.onLoad(this.page)
+    },
+    
+    /**
+     * 明细选择变化
+     * @param {OrderItemRecord[]} list - 选中的行数据
+     */
+    selectionChange(list) {
+      this.selectionList = list
+    },
+    
+    /**
+     * 明细页码变化
+     * @param {number} currentPage - 当前页码
+     */
+    currentChange(currentPage) {
+      this.page.currentPage = currentPage
+    },
+    
+    /**
+     * 明细页大小变化
+     * @param {number} pageSize - 页大小
+     */
+    sizeChange(pageSize) {
+      this.page.pageSize = pageSize
+    },
+    
+    /**
+     * 明细刷新
+     */
+    refreshChange() {
+      this.onLoad(this.page)
+    },
+    
+    /**
+     * 获取订单状态类型
+     * @param {number} status - 状态值
+     * @returns {string} 状态类型
+     */
+    getOrderStatusType(status) {
+      const statusMap = {
+        0: 'info',     // 草稿
+        1: 'warning',  // 已提交
+        2: 'primary',  // 已确认
+        3: 'success',  // 已完成
+        4: 'danger'    // 已取消
+      }
+      return statusMap[status] || 'info'
+    },
+    
+    /**
+     * 获取订单状态文本
+     * @param {number} status - 状态值
+     * @returns {string} 状态文本
+     */
+    getOrderStatusText(status) {
+      const statusMap = {
+        0: '草稿',
+        1: '已提交',
+        2: '已确认',
+        3: '已完成',
+        4: '已取消'
+      }
+      return statusMap[status] || '未知'
+    },
+    
+    /**
+     * 获取明细状态类型
+     * @param {number} status - 状态值
+     * @returns {string} 状态类型
+     */
+    getItemStatusType(status) {
+      const statusMap = {
+        0: 'info',     // 待确认
+        1: 'success',  // 已确认
+        2: 'warning',  // 生产中
+        3: 'success',  // 已完成
+        4: 'danger'    // 已取消
+      }
+      return statusMap[status] || 'info'
+    },
+    
+    /**
+     * 获取明细状态文本
+     * @param {number} status - 状态值
+     * @returns {string} 状态文本
+     */
+    getItemStatusText(status) {
+      const statusMap = {
+        0: '待确认',
+        1: '已确认',
+        2: '生产中',
+        3: '已完成',
+        4: '已取消'
+      }
+      return statusMap[status] || '未知'
+    },
+    
+    /**
+     * 刷新数据
+     */
+    refresh() {
+      this.onLoad(this.page)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.order-item-management {
+  width: 100%;
+}
+
+.order-info {
+  margin-bottom: 20px;
+}
+
+.item-management {
+  min-height: 400px;
+}
+</style>

src/views/order/order/index.vue

@@ -32,24 +32,57 @@
           删除
         </el-button>
       </template>
-      
+
       <template slot-scope="{row}" slot="orderType">
         <el-tag :type="row.orderType === 1 ? 'success' : 'warning'">
           {{ row.orderType === 1 ? '销售订单' : '采购订单' }}
         </el-tag>
       </template>
-      
+
       <template slot-scope="{row}" slot="status">
         <el-tag :type="getStatusType(row.status)">
           {{ getStatusText(row.status) }}
         </el-tag>
       </template>
+
+      <!-- 添加明细管理按钮 -->
+      <template slot-scope="{row}" slot="menu">
+        <el-button
+          type="text"
+          size="small"
+          icon="el-icon-document"
+          @click="handleItemManagement(row)"
+        >
+          明细管理
+        </el-button>
+      </template>
     </avue-crud>
+
+    <!-- 订单明细管理弹窗 -->
+    <el-dialog
+      title="订单明细管理"
+      :visible.sync="itemDialogVisible"
+      width="90%"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <order-item-management
+        :order-info="currentOrder"
+        :visible="itemDialogVisible"
+        @item-changed="handleItemChanged"
+        ref="orderItemManagement"
+      />
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="itemDialogVisible = false">关闭</el-button>
+      </div>
+    </el-dialog>
   </basic-container>
 </template>
 
 <script>
 import { getList, add, update, remove, getDetail, getCustomerAddressList } from '@/api/order/order'
+import OrderItemManagement from '@/components/order-item-management'
 import { mapGetters } from 'vuex'
 
 /**
@@ -134,26 +167,44 @@ import { mapGetters } from 'vuex'
 
 export default {
   name: 'OrderManagement',
+
+  components: {
+    OrderItemManagement
+  },
+
   data() {
     return {
+
+      /**
+       * 明细管理弹窗显示状态
+       * @type {boolean}
+       */
+      itemDialogVisible: false,
+
+      /**
+       * 当前选中的订单
+       * @type {OrderItem|null}
+       */
+      currentOrder: null,
+
       /**
        * 表单数据
        * @type {OrderForm}
        */
       form: {},
-      
+
       /**
        * 查询条件
        * @type {OrderQueryParams}
        */
       query: {},
-      
+
       /**
        * 加载状态
        * @type {boolean}
        */
       loading: true,
-      
+
       /**
        * 分页信息
        * @type {{pageSize: number, currentPage: number, total: number}}
@@ -163,19 +214,19 @@ export default {
         currentPage: 1,
         total: 0
       },
-      
+
       /**
        * 选中的行数据
        * @type {OrderItem[]}
        */
       selectionList: [],
-      
+
       /**
        * 客户地址选项列表
        * @type {CustomerAddressOption[]}
        */
       addressOptions: [],
-      
+
       /**
        * 表格配置
        * @type {Object}
@@ -192,6 +243,7 @@ export default {
         viewBtn: true,
         dialogClickModal: false,
         dialogWidth: 1000,
+        menuWidth: 200, // 增加操作列宽度
         column: [
           {
             label: '订单编码',
@@ -503,7 +555,7 @@ export default {
           }
         ]
       },
-      
+
       /**
        * 表格数据
        * @type {OrderItem[]}
@@ -513,7 +565,7 @@ export default {
   },
   computed: {
     ...mapGetters(['permission']),
-    
+
     /**
      * 权限配置
      * @returns {{addBtn: boolean, viewBtn: boolean, delBtn: boolean, editBtn: boolean}}
@@ -530,7 +582,7 @@ export default {
         editBtn: true
       }
     },
-    
+
     /**
      * 选中的ID字符串
      * @returns {string} 逗号分隔的ID字符串
@@ -544,6 +596,26 @@ export default {
     }
   },
   methods: {
+
+    /**
+     * 处理明细管理
+     * @param {OrderItem} row - 订单行数据
+     */
+    handleItemManagement(row) {
+      this.currentOrder = row
+      this.itemDialogVisible = true
+    },
+
+    /**
+     * 处理明细变化事件
+     */
+    handleItemChanged() {
+      // 明细发生变化时，可以刷新订单列表或执行其他操作
+      console.log('订单明细已更新')
+      // 如果需要刷新订单列表，可以调用：
+      // this.onLoad(this.page)
+    },
+
     /**
      * 新增前的回调
      * @param {Function} done - 完成回调
@@ -569,7 +641,7 @@ export default {
       }
       done()
     },
-    
+
     /**
      * 获取数据
      * @param {Object} page - 分页信息
@@ -590,7 +662,7 @@ export default {
         window.console.log(error)
       }
     },
-    
+
     /**
      * 新增
      * @param {OrderForm} row - 表单数据
@@ -612,7 +684,7 @@ export default {
         window.console.log(error)
       }
     },
-    
+
     /**
      * 修改
      * @param {OrderForm} row - 表单数据
@@ -635,7 +707,7 @@ export default {
         window.console.log(error)
       }
     },
-    
+
     /**
      * 删除
      * @param {OrderItem} row - 行数据
@@ -662,7 +734,7 @@ export default {
         }
       }
     },
-    
+
     /**
      * 批量删除
      * @returns {Promise<void>}
@@ -692,7 +764,7 @@ export default {
         }
       }
     },
-    
+
     /**
      * 根据客户编码加载客户地址列表
      * @param {string} customerCode - 客户编码
@@ -718,7 +790,7 @@ export default {
         window.console.log('加载客户地址失败:', error)
       }
     },
-    
+
     /**
      * 更新地址选项到表格配置中
      * @returns {void}
@@ -729,7 +801,7 @@ export default {
         addressColumn.dicData = this.addressOptions
       }
     },
-    
+
     /**
      * 获取状态类型
      * @param {number} status - 状态值
@@ -745,7 +817,7 @@ export default {
       }
       return statusMap[status] || 'info'
     },
-    
+
     /**
      * 获取状态文本
      * @param {number} status - 状态值
@@ -761,7 +833,7 @@ export default {
       }
       return statusMap[status] || '未知'
     },
-    
+
     /**
      * 搜索回调
      * @param {OrderQueryParams} params - 搜索参数
@@ -773,7 +845,7 @@ export default {
       this.onLoad(this.page, params)
       done()
     },
-    
+
     /**
      * 搜索重置回调
      * @returns {void}
@@ -782,7 +854,7 @@ export default {
       this.query = {}
       this.onLoad(this.page)
     },
-    
+
     /**
      * 选择改变回调
      * @param {OrderItem[]} list - 选中的数据
@@ -791,7 +863,7 @@ export default {
     selectionChange(list) {
       this.selectionList = list
     },
-    
+
     /**
      * 清空选择
      * @returns {void}
@@ -800,7 +872,7 @@ export default {
       this.selectionList = []
       this.$refs.crud.toggleSelection()
     },
-    
+
     /**
      * 当前页改变回调
      * @param {number} currentPage - 当前页
@@ -809,7 +881,7 @@ export default {
     currentChange(currentPage) {
       this.page.currentPage = currentPage
     },
-    
+
     /**
      * 页大小改变回调
      * @param {number} pageSize - 页大小
@@ -818,7 +890,7 @@ export default {
     sizeChange(pageSize) {
       this.page.pageSize = pageSize
     },
-    
+
     /**
      * 刷新回调
      * @returns {void}
@@ -828,4 +900,10 @@ export default {
     }
   }
 }
-</script>
+</script>
+
+<style scoped>
+.dialog-footer {
+  text-align: right;
+}
+</style>