feat(订单管理): 重构订单管理页面，优化UI和功能实现

src/views/order/order/index.js

@@ -100,6 +100,7 @@ import {
  * @property {string} customerName - 客户名称
  * @property {string} customerId - 客户ID
  */
+
 /**
  * 客户地址选项类型定义
  * @typedef {Object} CustomerAddressOption
@@ -112,6 +113,11 @@ import {
  * @property {number} isDefault - 是否默认地址 0-否 1-是
  */
 
+/**
+ * 弹窗模式类型定义
+ * @typedef {'add'|'edit'|'view'} DialogMode
+ */
+
 export default {
   name: 'OrderManagement',
 
@@ -122,68 +128,173 @@ export default {
   data() {
     return {
       /**
-       * 客户选项列表
-       * @type {CustomerOption[]}
+       * 表格数据
+       * @type {OrderItem[]}
        */
-      customerOptions: [],
+      tableData: [],
 
       /**
-       * 客户选项加载状态
+       * 加载状态
        * @type {boolean}
        */
-      customerLoading: false,
+      loading: false,
 
       /**
-       * 客户搜索关键词
-       * @type {string}
+       * 搜索表单数据
+       * @type {OrderQueryParams}
        */
-      customerSearchKeyword: '',
+      searchForm: {
+        orderCode: '',
+        orgCode: '',
+        orgName: '',
+        customerCode: '',
+        customerName: '',
+        orderType: '',
+        status: '',
+        receiverName: '',
+        receiverPhone: ''
+      },
 
       /**
-       * 明细管理弹窗显示状态
+       * 分页信息
+       * @type {{currentPage: number, pageSize: number, total: number}}
+       */
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      },
+
+      /**
+       * 选中的行数据
+       * @type {OrderItem[]}
+       */
+      selectionList: [],
+
+      /**
+       * 弹窗显示状态
        * @type {boolean}
        */
-      itemDialogVisible: false,
+      dialogVisible: false,
 
       /**
-       * 当前选中的订单
-       * @type {OrderItem|null}
+       * 弹窗模式
+       * @type {DialogMode}
        */
-      currentOrder: null,
+      dialogMode: 'add',
 
       /**
-       * 表单数据
+       * 弹窗标题
+       * @type {string}
+       */
+      dialogTitle: '',
+
+      /**
+       * 订单表单数据
        * @type {OrderForm}
        */
-      form: {},
+      orderForm: {
+        id: '',
+        orderCode: '',
+        orgId: '',
+        orgCode: '',
+        orgName: '',
+        customerId: '',
+        customerCode: '',
+        customerName: '',
+        orderType: ORDER_TYPES.NORMAL,
+        totalAmount: 0,
+        totalQuantity: 0,
+        addressId: '',
+        receiverName: '',
+        receiverPhone: '',
+        receiverAddress: '',
+        receiverRegion: '',
+        status: ORDER_STATUS.DRAFT,
+        createTime: '',
+        updateTime: '',
+        submitTime: '',
+        confirmTime: ''
+      },
 
       /**
-       * 查询条件
-       * @type {OrderQueryParams}
+       * 表单验证规则
+       * @type {Object}
        */
-      query: {},
+      formRules: {
+        orgCode: [
+          { required: true, message: '请输入组织编码', trigger: 'blur' }
+        ],
+        orgName: [
+          { required: true, message: '请输入组织名称', trigger: 'blur' }
+        ],
+        orgId: [
+          { required: true, message: '请输入组织ID', trigger: 'blur' }
+        ],
+        customerId: [
+          { required: true, message: '请选择客户', trigger: 'change' }
+        ],
+        customerCode: [
+          { required: true, message: '请输入客户编码', trigger: 'blur' }
+        ],
+        customerName: [
+          { required: true, message: '请输入客户名称', trigger: 'blur' }
+        ],
+        orderType: [
+          { required: true, message: '请选择订单类型', trigger: 'change' }
+        ],
+        totalAmount: [
+          { required: true, message: '请输入订单总金额', trigger: 'blur' },
+          { type: 'number', min: 0, message: '订单总金额不能小于0', trigger: 'blur' }
+        ],
+        totalQuantity: [
+          { required: true, message: '请输入订单总数量', trigger: 'blur' },
+          { type: 'number', min: 0, message: '订单总数量不能小于0', trigger: 'blur' }
+        ],
+        addressId: [
+          { required: true, message: '请选择收货地址', trigger: 'change' }
+        ],
+        receiverName: [
+          { required: true, message: '请输入收货人姓名', trigger: 'blur' }
+        ],
+        receiverPhone: [
+          { required: true, message: '请输入收货人电话', trigger: 'blur' },
+          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
+        ],
+        receiverAddress: [
+          { required: true, message: '请输入收货地址详情', trigger: 'blur' }
+        ],
+        receiverRegion: [
+          { required: true, message: '请输入收货地区', trigger: 'blur' }
+        ],
+        status: [
+          { required: true, message: '请选择订单状态', trigger: 'change' }
+        ]
+      },
 
       /**
-       * 加载状态
+       * 提交加载状态
        * @type {boolean}
        */
-      loading: true,
+      submitLoading: false,
 
       /**
-       * 分页信息
-       * @type {{pageSize: number, currentPage: number, total: number}}
+       * 客户选项列表
+       * @type {CustomerOption[]}
        */
-      page: {
-        pageSize: 10,
-        currentPage: 1,
-        total: 0
-      },
+      customerOptions: [],
 
       /**
-       * 选中的行数据
-       * @type {OrderItem[]}
+       * 客户选项加载状态
+       * @type {boolean}
        */
-      selectionList: [],
+      customerLoading: false,
+
+      /**
+       * 客户搜索定时器
+       * @type {number|null}
+       */
+      customerSearchTimer: null,
 
       /**
        * 客户地址选项列表
@@ -192,402 +303,44 @@ export default {
       addressOptions: [],
 
       /**
-       * 表格配置
-       * @type {Object}
+       * 订单类型选项
+       * @type {Array<{label: string, value: number}>}
        */
-      option: {
-        height: 'auto',
-        calcHeight: 30,
-        tip: false,
-        searchShow: true,
-        searchMenuSpan: 6,
-        border: true,
-        index: true,
-        selection: true,
-        viewBtn: true,
-        dialogClickModal: false,
-        dialogWidth: 1000,
-        menuWidth: 200,
-        column: [
-          {
-            label: '客户',
-            prop: 'customerId',
-            type: 'select',
-            search: false,
-            width: 200,
-            filterable: true,
-            remote: false,
-            reserveKeyword: true,
-            placeholder: '请选择客户',
-            dicData: [],
-            props: {
-              label: 'label',
-              value: 'value'
-            },
-            rules: [
-              {
-                required: true,
-                message: '请选择客户',
-                trigger: 'change'
-              }
-            ],
-            /**
-             * 客户选择变更事件
-             * @param {Object} param - 事件参数
-             * @param {string} param.value - 选中的客户编码
-             * @param {Object} param.column - 列配置
-             * @returns {void}
-             */
-            change: ({ value, column }) => {
-              if (value) {
-                const selectedCustomer = this.customerOptions.find(option => option.value === value)
-                if (selectedCustomer) {
-                  // Auto-fill customer information
-                  this.form.customerId = selectedCustomer.customerId
-                  this.form.customerCode = selectedCustomer.customerCode
-                  this.form.customerName = selectedCustomer.customerName
-                  // Load customer addresses
-                  this.loadCustomerAddresses(selectedCustomer.customerCode)
-                } else {
-                  this.clearCustomerData()
-                }
-              } else {
-                this.clearCustomerData()
-              }
-            }
-          },
-          {
-            label: '订单编码',
-            prop: 'orderCode',
-            search: true,
-            width: 150,
-            addDisplay: false,
-            editDisplay: false
-          },
-          {
-            label: '组织编码',
-            prop: 'orgCode',
-            search: true,
-            width: 120,
-            rules: [
-              {
-                required: true,
-                message: '请输入组织编码',
-                trigger: 'blur'
-              }
-            ]
-          },
-          {
-            label: '组织名称',
-            prop: 'orgName',
-            search: true,
-            width: 200,
-            rules: [
-              {
-                required: true,
-                message: '请输入组织名称',
-                trigger: 'blur'
-              }
-            ]
-          },
-          {
-            label: '客户编码',
-            prop: 'customerCode',
-            search: true,
-            width: 150,
-            rules: [
-              {
-                required: true,
-                message: '请输入客户编码',
-                trigger: 'blur'
-              }
-            ],
-            change: ({ value, column }) => {
-              if (value) {
-                this.loadCustomerAddresses(value)
-              } else {
-                this.addressOptions = []
-                this.form.addressId = ''
-                this.form.receiverName = ''
-                this.form.receiverPhone = ''
-                this.form.receiverAddress = ''
-                this.form.receiverRegion = ''
-              }
-            }
-          },
-          {
-            label: '客户名称',
-            prop: 'customerName',
-            search: true,
-            width: 200,
-            rules: [
-              {
-                required: true,
-                message: '请输入客户名称',
-                trigger: 'blur'
-              }
-            ]
-          },
-          {
-            label: '订单类型',
-            prop: 'orderType',
-            type: 'select',
-            dicData: ORDER_TYPE_OPTIONS,
-            search: true,
-            slot: true,
-            width: 100,
-            value: 1,
-            rules: [
-              {
-                required: true,
-                message: '请选择订单类型',
-                trigger: 'change'
-              }
-            ]
-          },
-          {
-            label: '订单总金额',
-            prop: 'totalAmount',
-            type: 'number',
-            precision: 2,
-            width: 120,
-            rules: [
-              {
-                required: true,
-                message: '请输入订单总金额',
-                trigger: 'blur'
-              },
-              {
-                type: 'number',
-                min: 0,
-                message: '订单总金额不能小于0',
-                trigger: 'blur'
-              }
-            ]
-          },
-          {
-            label: '订单总数量',
-            prop: 'totalQuantity',
-            type: 'number',
-            precision: 4,
-            width: 120,
-            rules: [
-              {
-                required: true,
-                message: '请输入订单总数量',
-                trigger: 'blur'
-              },
-              {
-                type: 'number',
-                min: 0,
-                message: '订单总数量不能小于0',
-                trigger: 'blur'
-              }
-            ]
-          },
-          {
-            label: '收货地址',
-            prop: 'addressId',
-            type: 'select',
-            dicData: [],
-            props: {
-              label: 'label',
-              value: 'value'
-            },
-            width: 200,
-            span: 24,
-            rules: [
-              {
-                required: true,
-                message: '请选择收货地址',
-                trigger: 'change'
-              }
-            ],
-            change: ({ value, column }) => {
-              if (value) {
-                const selectedAddress = this.addressOptions.find(addr => addr.value === value)
-                if (selectedAddress) {
-                  this.form.receiverName = selectedAddress.receiverName
-                  this.form.receiverPhone = selectedAddress.receiverPhone
-                  this.form.receiverAddress = selectedAddress.receiverAddress
-                  this.form.receiverRegion = selectedAddress.receiverRegion
-                }
-              }
-            }
-          },
-          {
-            label: '收货人姓名',
-            prop: 'receiverName',
-            search: true,
-            width: 120,
-            rules: [
-              {
-                required: true,
-                message: '请输入收货人姓名',
-                trigger: 'blur'
-              }
-            ]
-          },
-          {
-            label: '收货人电话',
-            prop: 'receiverPhone',
-            search: true,
-            width: 130,
-            rules: [
-              {
-                required: true,
-                message: '请输入收货人电话',
-                trigger: 'blur'
-              },
-              {
-                pattern: /^1[3-9]\d{9}$/,
-                message: '请输入正确的手机号码',
-                trigger: 'blur'
-              }
-            ]
-          },
-          {
-            label: '收货地址详情',
-            prop: 'receiverAddress',
-            width: 200,
-            overHidden: true,
-            span: 24,
-            rules: [
-              {
-                required: true,
-                message: '请输入收货地址详情',
-                trigger: 'blur'
-              }
-            ]
-          },
-          {
-            label: '收货地区',
-            prop: 'receiverRegion',
-            width: 180,
-            rules: [
-              {
-                required: true,
-                message: '请输入收货地区',
-                trigger: 'blur'
-              }
-            ]
-          },
-          {
-            label: '订单状态',
-            prop: 'status',
-            type: 'select',
-            dicData: ORDER_STATUS_OPTIONS,
-            search: true,
-            slot: true,
-            width: 100,
-            value: 0,
-            rules: [
-              {
-                required: true,
-                message: '请选择订单状态',
-                trigger: 'change'
-              }
-            ]
-          },
-          {
-            label: '组织ID',
-            prop: 'orgId',
-            type: 'number',
-            hide: true,
-            rules: [
-              {
-                required: true,
-                message: '请输入组织ID',
-                trigger: 'blur'
-              }
-            ]
-          },
-          {
-            label: '创建时间',
-            prop: 'createTime',
-            type: 'datetime',
-            format: 'yyyy-MM-dd HH:mm:ss',
-            valueFormat: 'yyyy-MM-dd HH:mm:ss',
-            width: 160,
-            addDisplay: false,
-            editDisplay: false
-          },
-          {
-            label: '更新时间',
-            prop: 'updateTime',
-            type: 'datetime',
-            format: 'yyyy-MM-dd HH:mm:ss',
-            valueFormat: 'yyyy-MM-dd HH:mm:ss',
-            width: 160,
-            addDisplay: false,
-            editDisplay: false
-          },
-          {
-            label: '提交时间',
-            prop: 'submitTime',
-            type: 'datetime',
-            format: 'yyyy-MM-dd HH:mm:ss',
-            valueFormat: 'yyyy-MM-dd HH:mm:ss',
-            width: 160,
-            addDisplay: false,
-            editDisplay: false
-          },
-          {
-            label: '确认时间',
-            prop: 'confirmTime',
-            type: 'datetime',
-            format: 'yyyy-MM-dd HH:mm:ss',
-            valueFormat: 'yyyy-MM-dd HH:mm:ss',
-            width: 160,
-            addDisplay: false,
-            editDisplay: false
-          }
-        ]
-      },
+      orderTypeOptions: ORDER_TYPE_OPTIONS,
 
       /**
-       * 表格数据
-       * @type {OrderItem[]}
+       * 订单状态选项
+       * @type {Array<{label: string, value: number}>}
+       */
+      orderStatusOptions: ORDER_STATUS_OPTIONS,
+
+      /**
+       * 明细管理弹窗显示状态
+       * @type {boolean}
+       */
+      itemDialogVisible: false,
+
+      /**
+       * 当前选中的订单
+       * @type {OrderItem|null}
        */
-      data: []
+      currentOrder: null
     }
   },
+
   computed: {
     ...mapGetters(['permission']),
 
     /**
-     * 权限配置
-     * @returns {{addBtn: boolean, viewBtn: boolean, delBtn: boolean, editBtn: boolean}}
-     */
-    permissionList() {
-      return {
-        // addBtn: this.vaildData(this.permission.order_order_add, false),
-        // viewBtn: this.vaildData(this.permission.order_order_view, false),
-        // delBtn: this.vaildData(this.permission.order_order_delete, false),
-        // editBtn: this.vaildData(this.permission.order_order_edit, false)
-        addBtn: true,
-        viewBtn: true,
-        delBtn: false,
-        editBtn: true
-      }
-    },
-
-    /**
      * 选中的ID字符串
      * @returns {string} 逗号分隔的ID字符串
      */
     ids() {
-      let ids = []
-      this.selectionList.forEach(ele => {
-        ids.push(ele.id)
-      })
-      return ids.join(',')
+      return this.selectionList.map(item => item.id).join(',')
     }
   },
-  methods: {
-
-    // 在methods中更新这些方法：
 
+  methods: {
     /**
      * 获取订单类型标签
      * @param {OrderType} orderType - 订单类型值
@@ -617,395 +370,470 @@ export default {
     getStatusType: getOrderStatusTagType,
 
     /**
-     * 加载客户选项列表
-     * @param {string} [keyword=''] - 搜索关键词
+     * 加载订单列表数据
      * @returns {Promise<void>}
      */
-    async loadCustomerOptions(keyword = '') {
+    async loadTableData() {
+      this.loading = true
       try {
-        this.customerLoading = true
-        const params = {}
-
-        // 如果有搜索关键词，添加到查询参数中
-        if (keyword.trim()) {
-          params.Customer_CODE = keyword
-          params.Customer_NAME = keyword
+        const params = {
+          ...this.searchForm
         }
+        
+        // 移除空值参数
+        Object.keys(params).forEach(key => {
+          if (params[key] === '' || params[key] === null || params[key] === undefined) {
+            delete params[key]
+          }
+        })
 
-        const response = await getCustomerList(1, 50, params)
+        const response = await getList(
+          this.pagination.currentPage,
+          this.pagination.pageSize,
+          params
+        )
 
         if (response.data && response.data.success) {
-          const customers = response.data.data.records || []
-          this.customerOptions = customers.map(customer => ({
-            value: customer.Customer_ID,
-            label: `${customer.Customer_CODE} - ${customer.Customer_NAME}`,
-            customerCode: customer.Customer_CODE,
-            customerName: customer.Customer_NAME,
-            customerId: customer.Customer_ID.toString()
-          }))
-
-          // 更新表格配置中的选项数据
-          this.updateCustomerOptionsInColumn()
+          const data = response.data.data
+          this.tableData = data.records || []
+          this.pagination.total = data.total || 0
         } else {
-          this.customerOptions = []
-          this.$message.warning('获取客户列表失败')
+          this.$message.error('获取订单列表失败')
+          this.tableData = []
+          this.pagination.total = 0
         }
       } catch (error) {
-        this.customerOptions = []
-        console.error('加载客户选项失败:', error)
-        this.$message.error('加载客户选项失败，请稍后重试')
+        console.error('加载订单列表失败:', error)
+        this.$message.error('加载订单列表失败，请稍后重试')
+        this.tableData = []
+        this.pagination.total = 0
       } finally {
-        this.customerLoading = false
+        this.loading = false
       }
     },
 
     /**
-     * 搜索客户（防抖处理）
-     * @param {string} query - 搜索关键词
+     * 搜索处理
      * @returns {void}
      */
-    searchCustomers(query) {
-      // 清除之前的定时器
-      if (this.customerSearchTimer) {
-        clearTimeout(this.customerSearchTimer)
-      }
-
-      // 设置新的定时器，300ms后执行搜索
-      this.customerSearchTimer = setTimeout(() => {
-        this.loadCustomerOptions(query)
-      }, 300)
+    handleSearch() {
+      this.pagination.currentPage = 1
+      this.loadTableData()
     },
 
     /**
-     * 更新表格配置中的客户选项数据
+     * 重置搜索
      * @returns {void}
      */
-    updateCustomerOptionsInColumn() {
-      const customerColumn = this.option.column.find(col => col.prop === 'customerId')
-      if (customerColumn) {
-        customerColumn.dicData = this.customerOptions
+    handleResetSearch() {
+      this.$refs.searchForm.resetFields()
+      this.searchForm = {
+        orderCode: '',
+        orgCode: '',
+        orgName: '',
+        customerCode: '',
+        customerName: '',
+        orderType: '',
+        status: '',
+        receiverName: '',
+        receiverPhone: ''
       }
+      this.pagination.currentPage = 1
+      this.loadTableData()
     },
 
     /**
-     * 清除客户相关数据
+     * 选择改变处理
+     * @param {OrderItem[]} selection - 选中的数据
      * @returns {void}
      */
-    clearCustomerData() {
-      this.form.customerName = ''
-      this.form.customerId = ''
-      this.addressOptions = []
-      this.form.addressId = ''
-      this.form.receiverName = ''
-      this.form.receiverPhone = ''
-      this.form.receiverAddress = ''
-      this.form.receiverRegion = ''
-      this.updateAddressOptions()
+    handleSelectionChange(selection) {
+      this.selectionList = selection
     },
 
     /**
-     * 处理明细管理
-     * @param {OrderItem} row - 订单行数据
+     * 页大小改变处理
+     * @param {number} pageSize - 新的页大小
+     * @returns {void}
      */
-    handleItemManagement(row) {
-      this.currentOrder = row
-      this.itemDialogVisible = true
+    handleSizeChange(pageSize) {
+      this.pagination.pageSize = pageSize
+      this.pagination.currentPage = 1
+      this.loadTableData()
     },
 
     /**
-     * 处理明细变化事件
+     * 当前页改变处理
+     * @param {number} currentPage - 新的当前页
+     * @returns {void}
      */
-    handleItemChanged() {
-      // 明细发生变化时，可以刷新订单列表或执行其他操作
-      console.log('订单明细已更新')
-      // 如果需要刷新订单列表，可以调用：
-      // this.onLoad(this.page)
+    handleCurrentChange(currentPage) {
+      this.pagination.currentPage = currentPage
+      this.loadTableData()
     },
 
     /**
-     * 新增前的回调
-     * @param {Function} done - 完成回调
-     * @param {string} type - 操作类型
-     * @returns {Promise<void>}
-     */
-    async beforeOpen(done, type) {
-      // 确保客户选项已加载
-      if (this.customerOptions.length === 0) {
-        await this.loadCustomerOptions()
-      }
-
-      // 更新客户选项到表格配置中
-      this.updateCustomerOptionsInColumn()
-
-      if (['edit', 'view'].includes(type)) {
-        try {
-          const res = await getDetail(this.form.id)
-          const orderData = res.data.data
-
-          // 先设置基本数据
-          this.form = { ...orderData }
-
-          // 如果有客户编码，加载对应的地址列表
-          if (this.form.customerCode) {
-            await this.loadCustomerAddresses(this.form.customerCode)
-
-            // 确保客户字段正确回显
-            // 查找匹配的客户选项
-            const matchedCustomer = this.customerOptions.find(option =>
-              option.customerCode === this.form.customerCode ||
-              option.value === this.form.customerId
-            )
-
-            if (matchedCustomer) {
-              // 确保客户ID字段正确设置
-              this.form.customerId = matchedCustomer.value
-            }
-          }
-        } catch (error) {
-          window.console.log(error)
-        }
-      } else {
-        // 新增时清空地址选项
-        this.addressOptions = []
-        this.updateAddressOptions()
-      }
-      done()
-    },
-
-    /**
-     * 获取数据
-     * @param {Object} page - 分页信息
-     * @param {OrderQueryParams} params - 查询参数
-     * @returns {Promise<void>}
+     * 新增订单处理
+     * @returns {void}
      */
-    async onLoad(page, params = {}) {
-      this.loading = true
-      try {
-        const res = await getList(page.currentPage, page.pageSize, Object.assign(params, this.query))
-        const data = res.data.data
-        this.page.total = data.total
-        this.data = data.records
-        this.loading = false
-        this.selectionClear()
-      } catch (error) {
-        this.loading = false
-        window.console.log(error)
-      }
+    handleAdd() {
+      this.dialogMode = 'add'
+      this.dialogTitle = '新增订单'
+      this.resetOrderForm()
+      this.dialogVisible = true
+      this.loadCustomerOptions()
     },
 
     /**
-     * 新增
-     * @param {OrderForm} row - 表单数据
-     * @param {Function} done - 完成回调
-     * @param {Function} loading - 加载状态回调
+     * 查看订单处理
+     * @param {OrderItem} row - 订单数据
      * @returns {Promise<void>}
      */
-    async rowSave(row, done, loading) {
-      try {
-        await add(row)
-        done()
-        this.onLoad(this.page)
-        this.$message({
-          type: 'success',
-          message: '操作成功!'
-        })
-      } catch (error) {
-        loading()
-        window.console.log(error)
-      }
+    async handleView(row) {
+      this.dialogMode = 'view'
+      this.dialogTitle = '查看订单'
+      await this.loadOrderDetail(row.id)
+      this.dialogVisible = true
     },
 
     /**
-     * 修改
-     * @param {OrderForm} row - 表单数据
-     * @param {number} index - 行索引
-     * @param {Function} done - 完成回调
-     * @param {Function} loading - 加载状态回调
+     * 编辑订单处理
+     * @param {OrderItem} row - 订单数据
      * @returns {Promise<void>}
      */
-    async rowUpdate(row, index, done, loading) {
-      try {
-        await update(row)
-        done()
-        this.onLoad(this.page)
-        this.$message({
-          type: 'success',
-          message: '操作成功!'
-        })
-      } catch (error) {
-        loading()
-        window.console.log(error)
-      }
+    async handleEdit(row) {
+      this.dialogMode = 'edit'
+      this.dialogTitle = '编辑订单'
+      await this.loadOrderDetail(row.id)
+      this.dialogVisible = true
+      this.loadCustomerOptions()
     },
 
     /**
-     * 删除
-     * @param {OrderItem} row - 行数据
-     * @param {number} index - 行索引
+     * 删除订单处理
+     * @param {OrderItem} row - 订单数据
      * @returns {Promise<void>}
      */
-    async rowDel(row, index) {
+    async handleDelete(row) {
       try {
-        await this.$confirm('确定将选择数据删除?', {
+        await this.$confirm('确定要删除这条订单记录吗？', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         })
+
         await remove(row.id)
-        this.onLoad(this.page)
-        this.$message({
-          type: 'success',
-          message: '操作成功!'
-        })
+        this.$message.success('删除成功')
+        this.loadTableData()
       } catch (error) {
-        // 用户取消删除或删除失败
         if (error !== 'cancel') {
-          window.console.log(error)
+          console.error('删除订单失败:', error)
+          this.$message.error('删除失败，请稍后重试')
         }
       }
     },
 
     /**
-     * 批量删除
+     * 批量删除处理
      * @returns {Promise<void>}
      */
-    async handleDelete() {
+    async handleBatchDelete() {
       if (this.selectionList.length === 0) {
-        this.$message.warning('请选择至少一条数据')
+        this.$message.warning('请选择要删除的订单')
         return
       }
+
       try {
-        await this.$confirm('确定将选择数据删除?', {
+        await this.$confirm(`确定要删除选中的 ${this.selectionList.length} 条订单记录吗？`, '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         })
+
         await remove(this.ids)
-        this.onLoad(this.page)
-        this.$message({
-          type: 'success',
-          message: '操作成功!'
-        })
-        this.$refs.crud.toggleSelection()
+        this.$message.success('批量删除成功')
+        this.loadTableData()
       } catch (error) {
-        // 用户取消删除或删除失败
         if (error !== 'cancel') {
-          window.console.log(error)
+          console.error('批量删除订单失败:', error)
+          this.$message.error('批量删除失败，请稍后重试')
         }
       }
     },
 
     /**
-     * 根据客户编码加载客户地址列表
-     * @param {string} customerCode - 客户编码
+     * 明细管理处理
+     * @param {OrderItem} row - 订单数据
+     * @returns {void}
+     */
+    handleItemManagement(row) {
+      this.currentOrder = row
+      this.itemDialogVisible = true
+    },
+
+    /**
+     * 明细变化处理
+     * @returns {void}
+     */
+    handleItemChanged() {
+      console.log('订单明细已更新')
+      // 可以在这里刷新订单列表或执行其他操作
+      // this.loadTableData()
+    },
+
+    /**
+     * 加载订单详情
+     * @param {string|number} orderId - 订单ID
      * @returns {Promise<void>}
      */
-    async loadCustomerAddresses(customerCode) {
+    async loadOrderDetail(orderId) {
       try {
-        const res = await getCustomerAddressList(customerCode)
-        const addresses = res.data.data.records || []
-        this.addressOptions = addresses.map(addr => ({
-          value: addr.id,
-          label: `${addr.receiverName} - ${addr.receiverPhone} - ${addr.regionName} ${addr.detailAddress}`,
-          receiverName: addr.receiverName,
-          receiverPhone: addr.receiverPhone,
-          receiverAddress: addr.detailAddress,
-          receiverRegion: addr.regionName,
-          isDefault: addr.isDefault
-        }))
-        this.updateAddressOptions()
+        const response = await getDetail(orderId)
+        if (response.data && response.data.success) {
+          const orderData = response.data.data
+          this.orderForm = { ...orderData }
+          
+          // 如果有客户编码，加载对应的地址列表
+          if (this.orderForm.customerCode) {
+            await this.loadCustomerAddresses(this.orderForm.customerCode)
+          }
+        } else {
+          this.$message.error('获取订单详情失败')
+        }
       } catch (error) {
-        this.addressOptions = []
-        this.updateAddressOptions()
-        window.console.log('加载客户地址失败:', error)
+        console.error('加载订单详情失败:', error)
+        this.$message.error('加载订单详情失败，请稍后重试')
       }
     },
 
     /**
-     * 更新地址选项到表格配置中
+     * 重置订单表单
      * @returns {void}
      */
-    updateAddressOptions() {
-      const addressColumn = this.option.column.find(col => col.prop === 'addressId')
-      if (addressColumn) {
-        addressColumn.dicData = this.addressOptions
+    resetOrderForm() {
+      this.orderForm = {
+        id: '',
+        orderCode: '',
+        orgId: '',
+        orgCode: '',
+        orgName: '',
+        customerId: '',
+        customerCode: '',
+        customerName: '',
+        orderType: ORDER_TYPES.NORMAL,
+        totalAmount: 0,
+        totalQuantity: 0,
+        addressId: '',
+        receiverName: '',
+        receiverPhone: '',
+        receiverAddress: '',
+        receiverRegion: '',
+        status: ORDER_STATUS.DRAFT,
+        createTime: '',
+        updateTime: '',
+        submitTime: '',
+        confirmTime: ''
       }
+      this.addressOptions = []
+      
+      // 清除表单验证
+      this.$nextTick(() => {
+        if (this.$refs.orderForm) {
+          this.$refs.orderForm.clearValidate()
+        }
+      })
     },
 
-
     /**
-     * 搜索回调
-     * @param {OrderQueryParams} params - 搜索参数
-     * @param {Function} done - 完成回调
+     * 弹窗关闭处理
      * @returns {void}
      */
-    searchChange(params, done) {
-      this.query = params
-      this.onLoad(this.page, params)
-      done()
+    handleDialogClose() {
+      this.dialogVisible = false
+      this.resetOrderForm()
     },
 
     /**
-     * 搜索重置回调
-     * @returns {void}
+     * 表单提交处理
+     * @returns {Promise<void>}
      */
-    searchReset() {
-      this.query = {}
-      this.onLoad(this.page)
+    async handleSubmit() {
+      try {
+        // 表单验证
+        await this.$refs.orderForm.validate()
+        
+        this.submitLoading = true
+        
+        if (this.dialogMode === 'add') {
+          await add(this.orderForm)
+          this.$message.success('新增订单成功')
+        } else if (this.dialogMode === 'edit') {
+          await update(this.orderForm)
+          this.$message.success('更新订单成功')
+        }
+        
+        this.dialogVisible = false
+        this.loadTableData()
+      } catch (error) {
+        if (error.fields) {
+          // 表单验证失败
+          this.$message.warning('请检查表单填写是否正确')
+        } else {
+          console.error('提交订单失败:', error)
+          this.$message.error('操作失败，请稍后重试')
+        }
+      } finally {
+        this.submitLoading = false
+      }
     },
 
     /**
-     * 选择改变回调
-     * @param {OrderItem[]} list - 选中的数据
-     * @returns {void}
+     * 加载客户选项列表
+     * @param {string} [keyword=''] - 搜索关键词
+     * @returns {Promise<void>}
      */
-    selectionChange(list) {
-      this.selectionList = list
+    async loadCustomerOptions(keyword = '') {
+      try {
+        this.customerLoading = true
+        const params = {}
+
+        // 如果有搜索关键词，添加到查询参数中
+        if (keyword.trim()) {
+          params.Customer_CODE = keyword
+          params.Customer_NAME = keyword
+        }
+
+        const response = await getCustomerList(1, 50, params)
+
+        if (response.data && response.data.success) {
+          const customers = response.data.data.records || []
+          this.customerOptions = customers.map(customer => ({
+            value: customer.Customer_ID,
+            label: `${customer.Customer_CODE} - ${customer.Customer_NAME}`,
+            customerCode: customer.Customer_CODE,
+            customerName: customer.Customer_NAME,
+            customerId: customer.Customer_ID.toString()
+          }))
+        } else {
+          this.customerOptions = []
+          this.$message.warning('获取客户列表失败')
+        }
+      } catch (error) {
+        this.customerOptions = []
+        console.error('加载客户选项失败:', error)
+        this.$message.error('加载客户选项失败，请稍后重试')
+      } finally {
+        this.customerLoading = false
+      }
     },
 
     /**
-     * 清空选择
+     * 搜索客户（防抖处理）
+     * @param {string} query - 搜索关键词
      * @returns {void}
      */
-    selectionClear() {
-      this.selectionList = []
-      this.$refs.crud.toggleSelection()
+    searchCustomers(query) {
+      // 清除之前的定时器
+      if (this.customerSearchTimer) {
+        clearTimeout(this.customerSearchTimer)
+      }
+
+      // 设置新的定时器，300ms后执行搜索
+      this.customerSearchTimer = setTimeout(() => {
+        this.loadCustomerOptions(query)
+      }, 300)
     },
 
     /**
-     * 当前页改变回调
-     * @param {number} currentPage - 当前页
+     * 客户选择变更处理
+     * @param {string|number} value - 选中的客户ID
      * @returns {void}
      */
-    currentChange(currentPage) {
-      this.page.currentPage = currentPage
+    handleCustomerChange(value) {
+      if (value) {
+        const selectedCustomer = this.customerOptions.find(option => option.value === value)
+        if (selectedCustomer) {
+          // 自动填充客户信息
+          this.orderForm.customerId = selectedCustomer.customerId
+          this.orderForm.customerCode = selectedCustomer.customerCode
+          this.orderForm.customerName = selectedCustomer.customerName
+          // 加载客户地址
+          this.loadCustomerAddresses(selectedCustomer.customerCode)
+        } else {
+          this.clearCustomerData()
+        }
+      } else {
+        this.clearCustomerData()
+      }
     },
 
     /**
-     * 页大小改变回调
-     * @param {number} pageSize - 页大小
+     * 清除客户相关数据
      * @returns {void}
      */
-    sizeChange(pageSize) {
-      this.page.pageSize = pageSize
+    clearCustomerData() {
+      this.orderForm.customerName = ''
+      this.orderForm.customerId = ''
+      this.addressOptions = []
+      this.orderForm.addressId = ''
+      this.orderForm.receiverName = ''
+      this.orderForm.receiverPhone = ''
+      this.orderForm.receiverAddress = ''
+      this.orderForm.receiverRegion = ''
     },
 
     /**
-     * 刷新回调
+     * 根据客户编码加载客户地址列表
+     * @param {string} customerCode - 客户编码
+     * @returns {Promise<void>}
+     */
+    async loadCustomerAddresses(customerCode) {
+      try {
+        const response = await getCustomerAddressList(customerCode)
+        const addresses = response.data.data.records || []
+        this.addressOptions = addresses.map(addr => ({
+          value: addr.id,
+          label: `${addr.receiverName} - ${addr.receiverPhone} - ${addr.regionName} ${addr.detailAddress}`,
+          receiverName: addr.receiverName,
+          receiverPhone: addr.receiverPhone,
+          receiverAddress: addr.detailAddress,
+          receiverRegion: addr.regionName,
+          isDefault: addr.isDefault
+        }))
+      } catch (error) {
+        this.addressOptions = []
+        console.error('加载客户地址失败:', error)
+      }
+    },
+
+    /**
+     * 地址选择变更处理
+     * @param {number} value - 选中的地址ID
      * @returns {void}
      */
-    refreshChange() {
-      this.onLoad(this.page, this.query)
+    handleAddressChange(value) {
+      if (value) {
+        const selectedAddress = this.addressOptions.find(addr => addr.value === value)
+        if (selectedAddress) {
+          this.orderForm.receiverName = selectedAddress.receiverName
+          this.orderForm.receiverPhone = selectedAddress.receiverPhone
+          this.orderForm.receiverAddress = selectedAddress.receiverAddress
+          this.orderForm.receiverRegion = selectedAddress.receiverRegion
+        }
+      }
     }
   },
+
   mounted() {
-    // 初始化加载客户选项
+    // 初始化加载数据
+    this.loadTableData()
     this.loadCustomerOptions()
   },
+
   beforeDestroy() {
     // 清理定时器
     if (this.customerSearchTimer) {
       clearTimeout(this.customerSearchTimer)
     }
   }
-}
+}

src/views/order/order/index.scss

@@ -1,13 +1,174 @@
+.search-container {
+  background: #fff;
+  padding: 20px;
+  margin-bottom: 20px;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+  .search-form {
+    .el-form-item {
+      margin-bottom: 16px;
+    }
+  }
+}
+
+.toolbar {
+  background: #fff;
+  padding: 16px 20px;
+  margin-bottom: 20px;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.pagination-container {
+  background: #fff;
+  padding: 20px;
+  margin-top: 20px;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  text-align: right;
+}
+
 .dialog-footer {
   text-align: right;
 }
 
-/* 无遮罩层弹窗样式 */
-:deep(.order-item-dialog-no-modal) {
+.order-form {
+  .el-form-item {
+    margin-bottom: 20px;
+  }
+
+  .el-input-number {
+    width: 100%;
+  }
+}
+
+/* 订单表单弹窗样式 */
+:deep(.order-form-dialog) {
+  .el-dialog__body {
+    padding: 20px 30px;
+    max-height: 70vh;
+    overflow-y: auto;
+  }
+
+  .el-dialog__footer {
+    padding: 15px 30px 20px;
+    border-top: 1px solid #e4e7ed;
+  }
+}
+
+/* 订单明细管理弹窗样式 */
+:deep(.order-item-dialog) {
   z-index: 2000 !important;
+
+  .el-dialog {
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    border: 1px solid #e4e7ed;
+  }
+
+  .el-dialog__body {
+    padding: 20px;
+    max-height: 75vh;
+    overflow-y: auto;
+  }
+}
+
+/* 表格样式优化 */
+.el-table {
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+  .el-table__header {
+    th {
+      background-color: #f5f7fa;
+      color: #606266;
+      font-weight: 600;
+    }
+  }
+
+  .el-table__row {
+    &:hover {
+      background-color: #f5f7fa;
+    }
+  }
+
+  .el-button--text {
+    padding: 0;
+    margin-right: 8px;
+    
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .search-container {
+    .search-form {
+      .el-form-item {
+        width: 100%;
+        
+        .el-input,
+        .el-select {
+          width: 100% !important;
+        }
+      }
+    }
+  }
+
+  .toolbar {
+    flex-direction: column;
+    align-items: stretch;
+    
+    .el-button {
+      margin-bottom: 8px;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  :deep(.order-form-dialog) {
+    width: 95% !important;
+    margin: 0 auto;
+    
+    .el-dialog__body {
+      padding: 15px 20px;
+    }
+  }
+}
+
+/* 加载状态样式 */
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+  color: #909399;
 }
 
-:deep(.order-item-dialog-no-modal .el-dialog) {
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
-  border: 1px solid #e4e7ed;
+/* 空数据状态样式 */
+.empty-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+  color: #909399;
+  
+  .empty-icon {
+    font-size: 48px;
+    margin-bottom: 16px;
+    color: #c0c4cc;
+  }
+  
+  .empty-text {
+    font-size: 14px;
+  }
 }

src/views/order/order/index.vue

@@ -1,62 +1,520 @@
 <template>
   <basic-container>
-    <avue-crud
-      :option="option"
-      :data="data"
-      ref="crud"
-      v-model="form"
-      :page.sync="page"
-      :permission="permissionList"
-      :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"
+    <!-- 搜索区域 -->
+    <div class="search-container">
+      <el-form :model="searchForm" ref="searchForm" :inline="true" class="search-form">
+        <el-form-item label="订单编码" prop="orderCode">
+          <el-input
+            v-model="searchForm.orderCode"
+            placeholder="请输入订单编码"
+            clearable
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="组织编码" prop="orgCode">
+          <el-input
+            v-model="searchForm.orgCode"
+            placeholder="请输入组织编码"
+            clearable
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="组织名称" prop="orgName">
+          <el-input
+            v-model="searchForm.orgName"
+            placeholder="请输入组织名称"
+            clearable
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="客户编码" prop="customerCode">
+          <el-input
+            v-model="searchForm.customerCode"
+            placeholder="请输入客户编码"
+            clearable
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="客户名称" prop="customerName">
+          <el-input
+            v-model="searchForm.customerName"
+            placeholder="请输入客户名称"
+            clearable
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="订单类型" prop="orderType">
+          <el-select
+            v-model="searchForm.orderType"
+            placeholder="请选择订单类型"
+            clearable
+            style="width: 150px"
+          >
+            <el-option
+              v-for="item in orderTypeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="订单状态" prop="status">
+          <el-select
+            v-model="searchForm.status"
+            placeholder="请选择订单状态"
+            clearable
+            style="width: 150px"
+          >
+            <el-option
+              v-for="item in orderStatusOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="收货人姓名" prop="receiverName">
+          <el-input
+            v-model="searchForm.receiverName"
+            placeholder="请输入收货人姓名"
+            clearable
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="收货人电话" prop="receiverPhone">
+          <el-input
+            v-model="searchForm.receiverPhone"
+            placeholder="请输入收货人电话"
+            clearable
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch" :loading="loading">
+            <i class="el-icon-search"></i> 搜索
+          </el-button>
+          <el-button @click="handleResetSearch">
+            <i class="el-icon-refresh"></i> 重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!-- 操作按钮区域 -->
+    <div class="toolbar">
+      <el-button
+        type="primary"
+        size="small"
+        icon="el-icon-plus"
+        @click="handleAdd"
+      >
+        新增订单
+      </el-button>
+      <el-button
+        type="danger"
+        size="small"
+        plain
+        icon="el-icon-delete"
+        v-if="permission.order_order_delete"
+        @click="handleBatchDelete"
+        :disabled="selectionList.length === 0"
+      >
+        批量删除
+      </el-button>
+    </div>
+
+    <!-- 表格区域 -->
+    <el-table
+      :data="tableData"
+      v-loading="loading"
+      border
+      stripe
+      @selection-change="handleSelectionChange"
+      style="width: 100%"
     >
-      <template slot="menuLeft">
-        <el-button
-          type="danger"
-          size="small"
-          plain
-          icon="el-icon-delete"
-          v-if="permission.order_order_delete"
-          @click="handleDelete"
-        >
-          删除
-        </el-button>
-      </template>
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column type="index" label="序号" width="60" align="center" />
+      
+      <el-table-column prop="orderCode" label="订单编码" width="150" show-overflow-tooltip />
+      <el-table-column prop="orgCode" label="组织编码" width="120" show-overflow-tooltip />
+      <el-table-column prop="orgName" label="组织名称" width="200" show-overflow-tooltip />
+      <el-table-column prop="customerCode" label="客户编码" width="150" show-overflow-tooltip />
+      <el-table-column prop="customerName" label="客户名称" width="200" show-overflow-tooltip />
+      
+      <el-table-column prop="orderType" label="订单类型" width="100" align="center">
+        <template slot-scope="{row}">
+          <el-tag :type="getOrderTypeTagType(row.orderType)">
+            {{ getOrderTypeLabel(row.orderType) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      
+      <el-table-column prop="totalAmount" label="订单总金额" width="120" align="right">
+        <template slot-scope="{row}">
+          ¥{{ parseFloat(row.totalAmount || 0).toFixed(2) }}
+        </template>
+      </el-table-column>
+      
+      <el-table-column prop="totalQuantity" label="订单总数量" width="120" align="right">
+        <template slot-scope="{row}">
+          {{ parseFloat(row.totalQuantity || 0).toFixed(4) }}
+        </template>
+      </el-table-column>
+      
+      <el-table-column prop="receiverName" label="收货人姓名" width="120" show-overflow-tooltip />
+      <el-table-column prop="receiverPhone" label="收货人电话" width="130" show-overflow-tooltip />
+      
+      <el-table-column prop="status" label="订单状态" width="100" align="center">
+        <template slot-scope="{row}">
+          <el-tag :type="getStatusType(row.status)">
+            {{ getStatusText(row.status) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      
+      <el-table-column prop="createTime" label="创建时间" width="160" show-overflow-tooltip />
+      
+      <el-table-column label="操作" width="280" align="center" fixed="right">
+        <template slot-scope="{row}">
+          <el-button
+            type="text"
+            size="small"
+            icon="el-icon-view"
+            @click="handleView(row)"
+          >
+            查看
+          </el-button>
+          <el-button
+            type="text"
+            size="small"
+            icon="el-icon-edit"
+            @click="handleEdit(row)"
+          >
+            编辑
+          </el-button>
+          <el-button
+            type="text"
+            size="small"
+            icon="el-icon-document"
+            @click="handleItemManagement(row)"
+          >
+            明细管理
+          </el-button>
+          <el-button
+            type="text"
+            size="small"
+            icon="el-icon-delete"
+            @click="handleDelete(row)"
+            v-if="permission.order_order_delete"
+            style="color: #f56c6c"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
 
-      <template slot-scope="{row}" slot="orderType">
-        <el-tag :type="getOrderTypeTagType(row.orderType)">
-          {{ getOrderTypeLabel(row.orderType) }}
-        </el-tag>
-      </template>
+    <!-- 分页组件 -->
+    <div class="pagination-container">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="pagination.currentPage"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pagination.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="pagination.total"
+      />
+    </div>
 
-      <template slot-scope="{row}" slot="status">
-        <el-tag :type="getStatusType(row.status)">
-          {{ getStatusText(row.status) }}
-        </el-tag>
-      </template>
+    <!-- 订单表单弹窗 -->
+    <el-dialog
+      :title="dialogTitle"
+      :visible.sync="dialogVisible"
+      width="1000px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :modal="true"
+      :modal-append-to-body="true"
+      :append-to-body="true"
+      custom-class="order-form-dialog"
+      @close="handleDialogClose"
+    >
+      <el-form
+        :model="orderForm"
+        :rules="formRules"
+        ref="orderForm"
+        label-width="120px"
+        class="order-form"
+      >
+        <el-row :gutter="20">
+          <!-- 基本信息 -->
+          <el-col :span="12">
+            <el-form-item label="订单编码" prop="orderCode">
+              <el-input
+                v-model="orderForm.orderCode"
+                placeholder="系统自动生成"
+                :disabled="true"
+              />
+            </el-form-item>
+          </el-col>
+          
+          <el-col :span="12">
+            <el-form-item label="订单类型" prop="orderType">
+              <el-select
+                v-model="orderForm.orderType"
+                placeholder="请选择订单类型"
+                :disabled="dialogMode === 'view'"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in orderTypeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          
+          <el-col :span="12">
+            <el-form-item label="组织编码" prop="orgCode">
+              <el-input
+                v-model="orderForm.orgCode"
+                placeholder="请输入组织编码"
+                :disabled="dialogMode === 'view'"
+              />
+            </el-form-item>
+          </el-col>
+          
+          <el-col :span="12">
+            <el-form-item label="组织名称" prop="orgName">
+              <el-input
+                v-model="orderForm.orgName"
+                placeholder="请输入组织名称"
+                :disabled="dialogMode === 'view'"
+              />
+            </el-form-item>
+          </el-col>
+          
+          <el-col :span="12">
+            <el-form-item label="组织ID" prop="orgId">
+              <el-input-number
+                v-model="orderForm.orgId"
+                placeholder="请输入组织ID"
+                :disabled="dialogMode === 'view'"
+                style="width: 100%"
+                :min="1"
+              />
+            </el-form-item>
+          </el-col>
+          
+          <!-- 客户信息 -->
+          <el-col :span="12">
+            <el-form-item label="客户" prop="customerId">
+              <el-select
+                v-model="orderForm.customerId"
+                placeholder="请选择客户"
+                :disabled="dialogMode === 'view'"
+                filterable
+                remote
+                reserve-keyword
+                :remote-method="searchCustomers"
+                :loading="customerLoading"
+                @change="handleCustomerChange"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in customerOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          
+          <el-col :span="12">
+            <el-form-item label="客户编码" prop="customerCode">
+              <el-input
+                v-model="orderForm.customerCode"
+                placeholder="请输入客户编码"
+                :disabled="dialogMode === 'view'"
+              />
+            </el-form-item>
+          </el-col>
+          
+          <el-col :span="12">
+            <el-form-item label="客户名称" prop="customerName">
+              <el-input
+                v-model="orderForm.customerName"
+                placeholder="请输入客户名称"
+                :disabled="dialogMode === 'view'"
+              />
+            </el-form-item>
+          </el-col>
+          
+          <!-- 订单金额信息 -->
+          <el-col :span="12">
+            <el-form-item label="订单总金额" prop="totalAmount">
+              <el-input-number
+                v-model="orderForm.totalAmount"
+                placeholder="请输入订单总金额"
+                :disabled="dialogMode === 'view'"
+                :precision="2"
+                :min="0"
+                style="width: 100%"
+              />
+            </el-form-item>
+          </el-col>
+          
+          <el-col :span="12">
+            <el-form-item label="订单总数量" prop="totalQuantity">
+              <el-input-number
+                v-model="orderForm.totalQuantity"
+                placeholder="请输入订单总数量"
+                :disabled="dialogMode === 'view'"
+                :precision="4"
+                :min="0"
+                style="width: 100%"
+              />
+            </el-form-item>
+          </el-col>
+          
+          <!-- 收货信息 -->
+          <el-col :span="24">
+            <el-form-item label="收货地址" prop="addressId">
+              <el-select
+                v-model="orderForm.addressId"
+                placeholder="请选择收货地址"
+                :disabled="dialogMode === 'view'"
+                @change="handleAddressChange"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in addressOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          
+          <el-col :span="12">
+            <el-form-item label="收货人姓名" prop="receiverName">
+              <el-input
+                v-model="orderForm.receiverName"
+                placeholder="请输入收货人姓名"
+                :disabled="dialogMode === 'view'"
+              />
+            </el-form-item>
+          </el-col>
+          
+          <el-col :span="12">
+            <el-form-item label="收货人电话" prop="receiverPhone">
+              <el-input
+                v-model="orderForm.receiverPhone"
+                placeholder="请输入收货人电话"
+                :disabled="dialogMode === 'view'"
+              />
+            </el-form-item>
+          </el-col>
+          
+          <el-col :span="12">
+            <el-form-item label="收货地区" prop="receiverRegion">
+              <el-input
+                v-model="orderForm.receiverRegion"
+                placeholder="请输入收货地区"
+                :disabled="dialogMode === 'view'"
+              />
+            </el-form-item>
+          </el-col>
+          
+          <el-col :span="24">
+            <el-form-item label="收货地址详情" prop="receiverAddress">
+              <el-input
+                v-model="orderForm.receiverAddress"
+                type="textarea"
+                :rows="3"
+                placeholder="请输入收货地址详情"
+                :disabled="dialogMode === 'view'"
+              />
+            </el-form-item>
+          </el-col>
+          
+          <!-- 状态信息 -->
+          <el-col :span="12">
+            <el-form-item label="订单状态" prop="status">
+              <el-select
+                v-model="orderForm.status"
+                placeholder="请选择订单状态"
+                :disabled="dialogMode === 'view'"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in orderStatusOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          
+          <!-- 时间信息（仅查看和编辑时显示） -->
+          <template v-if="dialogMode !== 'add'">
+            <el-col :span="12">
+              <el-form-item label="创建时间">
+                <el-input
+                  :value="orderForm.createTime"
+                  disabled
+                />
+              </el-form-item>
+            </el-col>
+            
+            <el-col :span="12">
+              <el-form-item label="更新时间">
+                <el-input
+                  :value="orderForm.updateTime"
+                  disabled
+                />
+              </el-form-item>
+            </el-col>
+            
+            <el-col :span="12" v-if="orderForm.submitTime">
+              <el-form-item label="提交时间">
+                <el-input
+                  :value="orderForm.submitTime"
+                  disabled
+                />
+              </el-form-item>
+            </el-col>
+            
+            <el-col :span="12" v-if="orderForm.confirmTime">
+              <el-form-item label="确认时间">
+                <el-input
+                  :value="orderForm.confirmTime"
+                  disabled
+                />
+              </el-form-item>
+            </el-col>
+          </template>
+        </el-row>
+      </el-form>
 
-      <!-- 添加明细管理按钮 -->
-      <template slot-scope="{row}" slot="menu">
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="handleDialogClose">取消</el-button>
         <el-button
-          type="text"
-          size="small"
-          icon="el-icon-document"
-          @click="handleItemManagement(row)"
+          v-if="dialogMode !== 'view'"
+          type="primary"
+          @click="handleSubmit"
+          :loading="submitLoading"
         >
-          明细管理
+          {{ dialogMode === 'add' ? '新增' : '保存' }}
         </el-button>
-      </template>
-    </avue-crud>
+      </div>
+    </el-dialog>
 
     <!-- 订单明细管理弹窗 -->
     <el-dialog