refactor(order): 将订单管理页面的JS和CSS代码拆分到单独文件

src/views/order/order/index.js

@@ -0,0 +1,996 @@
+import { getList, add, update, remove, getDetail, getCustomerAddressList } from '@/api/order/order'
+import { getCustomerList } from '@/api/common/index'
+import OrderItemManagement from '@/components/order-item-management'
+import { mapGetters } from 'vuex'
+
+/**
+ * 订单查询参数类型定义
+ * @typedef {Object} OrderQueryParams
+ * @property {string} [orderCode] - 订单编码
+ * @property {string} [orgCode] - 组织编码
+ * @property {string} [orgName] - 组织名称
+ * @property {string} [customerCode] - 客户编码
+ * @property {string} [customerName] - 客户名称
+ * @property {number} [orderType] - 订单类型 0-采购订单 1-销售订单
+ * @property {number} [status] - 订单状态 0-草稿 1-已提交 2-已确认 3-已完成 4-已取消
+ * @property {string} [receiverName] - 收货人姓名
+ * @property {string} [receiverPhone] - 收货人电话
+ * @property {string} [createTimeStart] - 创建时间开始
+ * @property {string} [createTimeEnd] - 创建时间结束
+ */
+
+/**
+ * 订单表单数据类型定义
+ * @typedef {Object} OrderForm
+ * @property {string|number} [id] - 订单ID（修改时必填）
+ * @property {string} [orderCode] - 订单编码（系统自动生成）
+ * @property {string|number} orgId - 组织ID
+ * @property {string} orgCode - 组织编码
+ * @property {string} orgName - 组织名称
+ * @property {string|number} customerId - 客户ID
+ * @property {string} customerCode - 客户编码
+ * @property {string} customerName - 客户名称
+ * @property {number} orderType - 订单类型 0-采购订单 1-销售订单
+ * @property {number|string} totalAmount - 订单总金额
+ * @property {number|string} totalQuantity - 订单总数量
+ * @property {string|number} addressId - 收货地址ID
+ * @property {string} receiverName - 收货人姓名
+ * @property {string} receiverPhone - 收货人电话
+ * @property {string} receiverAddress - 收货详细地址
+ * @property {string} receiverRegion - 收货地区
+ * @property {number} status - 订单状态 0-草稿 1-已提交 2-已确认 3-已完成 4-已取消
+ */
+
+/**
+ * 订单列表项类型定义
+ * @typedef {Object} OrderItem
+ * @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 - 订单状态 0-草稿 1-已提交 2-已确认 3-已完成 4-已取消
+ * @property {number} isDeleted - 是否删除 0-未删除 1-已删除
+ * @property {string} orderCode - 订单编码
+ * @property {number} orgId - 组织ID
+ * @property {string} orgCode - 组织编码
+ * @property {string} orgName - 组织名称
+ * @property {number} customerId - 客户ID
+ * @property {string} customerCode - 客户编码
+ * @property {string} customerName - 客户名称
+ * @property {number} orderType - 订单类型 0-采购订单 1-销售订单
+ * @property {string} totalAmount - 订单总金额
+ * @property {string} totalQuantity - 订单总数量
+ * @property {number} addressId - 收货地址ID
+ * @property {string} receiverName - 收货人姓名
+ * @property {string} receiverPhone - 收货人电话
+ * @property {string} receiverAddress - 收货详细地址
+ * @property {string} receiverRegion - 收货地区
+ * @property {string|null} submitTime - 提交时间
+ * @property {string|null} confirmTime - 确认时间
+ */
+
+/**
+ * 客户选项类型定义
+ * @typedef {Object} CustomerOption
+ * @property {string} value - 客户编码
+ * @property {string} label - 显示标签（客户编码 - 客户名称）
+ * @property {string} customerCode - 客户编码
+ * @property {string} customerName - 客户名称
+ * @property {string} customerId - 客户ID
+ */
+/**
+ * 客户地址选项类型定义
+ * @typedef {Object} CustomerAddressOption
+ * @property {number} value - 地址ID
+ * @property {string} label - 地址显示文本
+ * @property {string} receiverName - 收货人姓名
+ * @property {string} receiverPhone - 收货人电话
+ * @property {string} receiverAddress - 收货详细地址
+ * @property {string} receiverRegion - 收货地区
+ * @property {number} isDefault - 是否默认地址 0-否 1-是
+ */
+
+export default {
+  name: 'OrderManagement',
+
+  components: {
+    OrderItemManagement
+  },
+
+  data() {
+    return {
+      /**
+       * 客户选项列表
+       * @type {CustomerOption[]}
+       */
+      customerOptions: [],
+
+      /**
+       * 客户选项加载状态
+       * @type {boolean}
+       */
+      customerLoading: false,
+
+      /**
+       * 客户搜索关键词
+       * @type {string}
+       */
+      customerSearchKeyword: '',
+
+      /**
+       * 明细管理弹窗显示状态
+       * @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}}
+       */
+      page: {
+        pageSize: 10,
+        currentPage: 1,
+        total: 0
+      },
+
+      /**
+       * 选中的行数据
+       * @type {OrderItem[]}
+       */
+      selectionList: [],
+
+      /**
+       * 客户地址选项列表
+       * @type {CustomerAddressOption[]}
+       */
+      addressOptions: [],
+
+      /**
+       * 表格配置
+       * @type {Object}
+       */
+      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(value)
+                } 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: [
+              { label: '采购订单', value: 0 },
+              { label: '销售订单', value: 1 }
+            ],
+            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: [
+              { 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: 'orgId',
+            type: 'number',
+            hide: true,
+            rules: [
+              {
+                required: true,
+                message: '请输入组织ID',
+                trigger: 'blur'
+              }
+            ]
+          },
+          {
+            label: '客户ID',
+            prop: 'customerId',
+            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
+          }
+        ]
+      },
+
+      /**
+       * 表格数据
+       * @type {OrderItem[]}
+       */
+      data: []
+    }
+  },
+  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(',')
+    }
+  },
+  methods: {
+
+    /**
+     * 加载客户选项列表
+     * @param {string} [keyword=''] - 搜索关键词
+     * @returns {Promise<void>}
+     */
+    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()
+          }))
+
+          // 更新表格配置中的选项数据
+          this.updateCustomerOptionsInColumn()
+        } 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}
+     */
+    searchCustomers(query) {
+      // 清除之前的定时器
+      if (this.customerSearchTimer) {
+        clearTimeout(this.customerSearchTimer)
+      }
+
+      // 设置新的定时器，300ms后执行搜索
+      this.customerSearchTimer = setTimeout(() => {
+        this.loadCustomerOptions(query)
+      }, 300)
+    },
+
+    /**
+     * 更新表格配置中的客户选项数据
+     * @returns {void}
+     */
+    updateCustomerOptionsInColumn() {
+      const customerColumn = this.option.column.find(col => col.prop === 'customerId')
+      if (customerColumn) {
+        customerColumn.dicData = this.customerOptions
+      }
+    },
+
+    /**
+     * 清除客户相关数据
+     * @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()
+    },
+
+    /**
+     * 处理明细管理
+     * @param {OrderItem} row - 订单行数据
+     */
+    handleItemManagement(row) {
+      this.currentOrder = row
+      this.itemDialogVisible = true
+    },
+
+    /**
+     * 处理明细变化事件
+     */
+    handleItemChanged() {
+      // 明细发生变化时，可以刷新订单列表或执行其他操作
+      console.log('订单明细已更新')
+      // 如果需要刷新订单列表，可以调用：
+      // this.onLoad(this.page)
+    },
+
+    /**
+     * 新增前的回调
+     * @param {Function} done - 完成回调
+     * @param {string} type - 操作类型
+     * @returns {Promise<void>}
+     */
+    async beforeOpen(done, type) {
+
+      // 确保客户选项已加载
+      if (this.customerOptions.length === 0) {
+        this.loadCustomerOptions()
+      }
+
+      if (['edit', 'view'].includes(type)) {
+        try {
+          const res = await getDetail(this.form.id)
+          this.form = res.data.data
+          // 如果是编辑模式，加载对应客户的地址列表
+          if (this.form.customerCode) {
+            await this.loadCustomerAddresses(this.form.customerCode)
+          }
+        } catch (error) {
+          window.console.log(error)
+        }
+      } else {
+        // 新增时清空地址选项
+        this.addressOptions = []
+        this.updateAddressOptions()
+      }
+      done()
+    },
+
+    /**
+     * 获取数据
+     * @param {Object} page - 分页信息
+     * @param {OrderQueryParams} params - 查询参数
+     * @returns {Promise<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)
+      }
+    },
+
+    /**
+     * 新增
+     * @param {OrderForm} row - 表单数据
+     * @param {Function} done - 完成回调
+     * @param {Function} loading - 加载状态回调
+     * @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)
+      }
+    },
+
+    /**
+     * 修改
+     * @param {OrderForm} row - 表单数据
+     * @param {number} index - 行索引
+     * @param {Function} done - 完成回调
+     * @param {Function} loading - 加载状态回调
+     * @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)
+      }
+    },
+
+    /**
+     * 删除
+     * @param {OrderItem} row - 行数据
+     * @param {number} index - 行索引
+     * @returns {Promise<void>}
+     */
+    async rowDel(row, index) {
+      try {
+        await this.$confirm('确定将选择数据删除?', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+        await remove(row.id)
+        this.onLoad(this.page)
+        this.$message({
+          type: 'success',
+          message: '操作成功!'
+        })
+      } catch (error) {
+        // 用户取消删除或删除失败
+        if (error !== 'cancel') {
+          window.console.log(error)
+        }
+      }
+    },
+
+    /**
+     * 批量删除
+     * @returns {Promise<void>}
+     */
+    async handleDelete() {
+      if (this.selectionList.length === 0) {
+        this.$message.warning('请选择至少一条数据')
+        return
+      }
+      try {
+        await this.$confirm('确定将选择数据删除?', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+        await remove(this.ids)
+        this.onLoad(this.page)
+        this.$message({
+          type: 'success',
+          message: '操作成功!'
+        })
+        this.$refs.crud.toggleSelection()
+      } catch (error) {
+        // 用户取消删除或删除失败
+        if (error !== 'cancel') {
+          window.console.log(error)
+        }
+      }
+    },
+
+    /**
+     * 根据客户编码加载客户地址列表
+     * @param {string} customerCode - 客户编码
+     * @returns {Promise<void>}
+     */
+    async loadCustomerAddresses(customerCode) {
+      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()
+      } catch (error) {
+        this.addressOptions = []
+        this.updateAddressOptions()
+        window.console.log('加载客户地址失败:', error)
+      }
+    },
+
+    /**
+     * 更新地址选项到表格配置中
+     * @returns {void}
+     */
+    updateAddressOptions() {
+      const addressColumn = this.option.column.find(col => col.prop === 'addressId')
+      if (addressColumn) {
+        addressColumn.dicData = this.addressOptions
+      }
+    },
+
+    /**
+     * 获取状态类型
+     * @param {number} status - 状态值
+     * @returns {string} 状态类型
+     */
+    getStatusType(status) {
+      const statusMap = {
+        0: 'info',     // 草稿
+        1: 'warning',  // 已提交
+        2: 'primary',  // 已确认
+        3: 'success',  // 已完成
+        4: 'danger'    // 已取消
+      }
+      return statusMap[status] || 'info'
+    },
+
+    /**
+     * 获取状态文本
+     * @param {number} status - 状态值
+     * @returns {string} 状态文本
+     */
+    getStatusText(status) {
+      const statusMap = {
+        0: '草稿',
+        1: '已提交',
+        2: '已确认',
+        3: '已完成',
+        4: '已取消'
+      }
+      return statusMap[status] || '未知'
+    },
+
+    /**
+     * 搜索回调
+     * @param {OrderQueryParams} params - 搜索参数
+     * @param {Function} done - 完成回调
+     * @returns {void}
+     */
+    searchChange(params, done) {
+      this.query = params
+      this.onLoad(this.page, params)
+      done()
+    },
+
+    /**
+     * 搜索重置回调
+     * @returns {void}
+     */
+    searchReset() {
+      this.query = {}
+      this.onLoad(this.page)
+    },
+
+    /**
+     * 选择改变回调
+     * @param {OrderItem[]} list - 选中的数据
+     * @returns {void}
+     */
+    selectionChange(list) {
+      this.selectionList = list
+    },
+
+    /**
+     * 清空选择
+     * @returns {void}
+     */
+    selectionClear() {
+      this.selectionList = []
+      this.$refs.crud.toggleSelection()
+    },
+
+    /**
+     * 当前页改变回调
+     * @param {number} currentPage - 当前页
+     * @returns {void}
+     */
+    currentChange(currentPage) {
+      this.page.currentPage = currentPage
+    },
+
+    /**
+     * 页大小改变回调
+     * @param {number} pageSize - 页大小
+     * @returns {void}
+     */
+    sizeChange(pageSize) {
+      this.page.pageSize = pageSize
+    },
+
+    /**
+     * 刷新回调
+     * @returns {void}
+     */
+    refreshChange() {
+      this.onLoad(this.page, this.query)
+    }
+  },
+  mounted() {
+    // 初始化加载客户选项
+    this.loadCustomerOptions()
+  },
+  beforeDestroy() {
+    // 清理定时器
+    if (this.customerSearchTimer) {
+      clearTimeout(this.customerSearchTimer)
+    }
+  }
+}

src/views/order/order/index.scss

@@ -0,0 +1,13 @@
+.dialog-footer {
+  text-align: right;
+}
+
+/* 无遮罩层弹窗样式 */
+:deep(.order-item-dialog-no-modal) {
+  z-index: 2000 !important;
+}
+
+:deep(.order-item-dialog-no-modal .el-dialog) {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+  border: 1px solid #e4e7ed;
+}

src/views/order/order/index.vue

@@ -84,1017 +84,10 @@
   </basic-container>
 </template>
 
-<script>
-import { getList, add, update, remove, getDetail, getCustomerAddressList } from '@/api/order/order'
-import { getCustomerList } from '@/api/common/index'
-import OrderItemManagement from '@/components/order-item-management'
-import { mapGetters } from 'vuex'
+<script src="./index.js">
 
-/**
- * 订单查询参数类型定义
- * @typedef {Object} OrderQueryParams
- * @property {string} [orderCode] - 订单编码
- * @property {string} [orgCode] - 组织编码
- * @property {string} [orgName] - 组织名称
- * @property {string} [customerCode] - 客户编码
- * @property {string} [customerName] - 客户名称
- * @property {number} [orderType] - 订单类型 0-采购订单 1-销售订单
- * @property {number} [status] - 订单状态 0-草稿 1-已提交 2-已确认 3-已完成 4-已取消
- * @property {string} [receiverName] - 收货人姓名
- * @property {string} [receiverPhone] - 收货人电话
- * @property {string} [createTimeStart] - 创建时间开始
- * @property {string} [createTimeEnd] - 创建时间结束
- */
-
-/**
- * 订单表单数据类型定义
- * @typedef {Object} OrderForm
- * @property {string|number} [id] - 订单ID（修改时必填）
- * @property {string} [orderCode] - 订单编码（系统自动生成）
- * @property {string|number} orgId - 组织ID
- * @property {string} orgCode - 组织编码
- * @property {string} orgName - 组织名称
- * @property {string|number} customerId - 客户ID
- * @property {string} customerCode - 客户编码
- * @property {string} customerName - 客户名称
- * @property {number} orderType - 订单类型 0-采购订单 1-销售订单
- * @property {number|string} totalAmount - 订单总金额
- * @property {number|string} totalQuantity - 订单总数量
- * @property {string|number} addressId - 收货地址ID
- * @property {string} receiverName - 收货人姓名
- * @property {string} receiverPhone - 收货人电话
- * @property {string} receiverAddress - 收货详细地址
- * @property {string} receiverRegion - 收货地区
- * @property {number} status - 订单状态 0-草稿 1-已提交 2-已确认 3-已完成 4-已取消
- */
-
-/**
- * 订单列表项类型定义
- * @typedef {Object} OrderItem
- * @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 - 订单状态 0-草稿 1-已提交 2-已确认 3-已完成 4-已取消
- * @property {number} isDeleted - 是否删除 0-未删除 1-已删除
- * @property {string} orderCode - 订单编码
- * @property {number} orgId - 组织ID
- * @property {string} orgCode - 组织编码
- * @property {string} orgName - 组织名称
- * @property {number} customerId - 客户ID
- * @property {string} customerCode - 客户编码
- * @property {string} customerName - 客户名称
- * @property {number} orderType - 订单类型 0-采购订单 1-销售订单
- * @property {string} totalAmount - 订单总金额
- * @property {string} totalQuantity - 订单总数量
- * @property {number} addressId - 收货地址ID
- * @property {string} receiverName - 收货人姓名
- * @property {string} receiverPhone - 收货人电话
- * @property {string} receiverAddress - 收货详细地址
- * @property {string} receiverRegion - 收货地区
- * @property {string|null} submitTime - 提交时间
- * @property {string|null} confirmTime - 确认时间
- */
-
-/**
- * 客户选项类型定义
- * @typedef {Object} CustomerOption
- * @property {string} value - 客户编码
- * @property {string} label - 显示标签（客户编码 - 客户名称）
- * @property {string} customerCode - 客户编码
- * @property {string} customerName - 客户名称
- * @property {string} customerId - 客户ID
- */
-/**
- * 客户地址选项类型定义
- * @typedef {Object} CustomerAddressOption
- * @property {number} value - 地址ID
- * @property {string} label - 地址显示文本
- * @property {string} receiverName - 收货人姓名
- * @property {string} receiverPhone - 收货人电话
- * @property {string} receiverAddress - 收货详细地址
- * @property {string} receiverRegion - 收货地区
- * @property {number} isDefault - 是否默认地址 0-否 1-是
- */
-
-export default {
-  name: 'OrderManagement',
-
-  components: {
-    OrderItemManagement
-  },
-
-  data() {
-    return {
-      /**
-       * 客户选项列表
-       * @type {CustomerOption[]}
-       */
-      customerOptions: [],
-
-      /**
-       * 客户选项加载状态
-       * @type {boolean}
-       */
-      customerLoading: false,
-
-      /**
-       * 客户搜索关键词
-       * @type {string}
-       */
-      customerSearchKeyword: '',
-
-      /**
-       * 明细管理弹窗显示状态
-       * @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}}
-       */
-      page: {
-        pageSize: 10,
-        currentPage: 1,
-        total: 0
-      },
-
-      /**
-       * 选中的行数据
-       * @type {OrderItem[]}
-       */
-      selectionList: [],
-
-      /**
-       * 客户地址选项列表
-       * @type {CustomerAddressOption[]}
-       */
-      addressOptions: [],
-
-      /**
-       * 表格配置
-       * @type {Object}
-       */
-      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(value)
-                } 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: [
-              { label: '采购订单', value: 0 },
-              { label: '销售订单', value: 1 }
-            ],
-            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: [
-              { 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: 'orgId',
-            type: 'number',
-            hide: true,
-            rules: [
-              {
-                required: true,
-                message: '请输入组织ID',
-                trigger: 'blur'
-              }
-            ]
-          },
-          {
-            label: '客户ID',
-            prop: 'customerId',
-            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
-          }
-        ]
-      },
-
-      /**
-       * 表格数据
-       * @type {OrderItem[]}
-       */
-      data: []
-    }
-  },
-  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(',')
-    }
-  },
-  methods: {
-
-    /**
-     * 加载客户选项列表
-     * @param {string} [keyword=''] - 搜索关键词
-     * @returns {Promise<void>}
-     */
-    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()
-          }))
-
-          // 更新表格配置中的选项数据
-          this.updateCustomerOptionsInColumn()
-        } 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}
-     */
-    searchCustomers(query) {
-      // 清除之前的定时器
-      if (this.customerSearchTimer) {
-        clearTimeout(this.customerSearchTimer)
-      }
-
-      // 设置新的定时器，300ms后执行搜索
-      this.customerSearchTimer = setTimeout(() => {
-        this.loadCustomerOptions(query)
-      }, 300)
-    },
-
-    /**
-     * 更新表格配置中的客户选项数据
-     * @returns {void}
-     */
-    updateCustomerOptionsInColumn() {
-      const customerColumn = this.option.column.find(col => col.prop === 'customerId')
-      if (customerColumn) {
-        customerColumn.dicData = this.customerOptions
-      }
-    },
-
-    /**
-     * 清除客户相关数据
-     * @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()
-    },
-
-    /**
-     * 处理明细管理
-     * @param {OrderItem} row - 订单行数据
-     */
-    handleItemManagement(row) {
-      this.currentOrder = row
-      this.itemDialogVisible = true
-    },
-
-    /**
-     * 处理明细变化事件
-     */
-    handleItemChanged() {
-      // 明细发生变化时，可以刷新订单列表或执行其他操作
-      console.log('订单明细已更新')
-      // 如果需要刷新订单列表，可以调用：
-      // this.onLoad(this.page)
-    },
-
-    /**
-     * 新增前的回调
-     * @param {Function} done - 完成回调
-     * @param {string} type - 操作类型
-     * @returns {Promise<void>}
-     */
-    async beforeOpen(done, type) {
-
-      // 确保客户选项已加载
-      if (this.customerOptions.length === 0) {
-        this.loadCustomerOptions()
-      }
-
-      if (['edit', 'view'].includes(type)) {
-        try {
-          const res = await getDetail(this.form.id)
-          this.form = res.data.data
-          // 如果是编辑模式，加载对应客户的地址列表
-          if (this.form.customerCode) {
-            await this.loadCustomerAddresses(this.form.customerCode)
-          }
-        } catch (error) {
-          window.console.log(error)
-        }
-      } else {
-        // 新增时清空地址选项
-        this.addressOptions = []
-        this.updateAddressOptions()
-      }
-      done()
-    },
-
-    /**
-     * 获取数据
-     * @param {Object} page - 分页信息
-     * @param {OrderQueryParams} params - 查询参数
-     * @returns {Promise<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)
-      }
-    },
-
-    /**
-     * 新增
-     * @param {OrderForm} row - 表单数据
-     * @param {Function} done - 完成回调
-     * @param {Function} loading - 加载状态回调
-     * @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)
-      }
-    },
-
-    /**
-     * 修改
-     * @param {OrderForm} row - 表单数据
-     * @param {number} index - 行索引
-     * @param {Function} done - 完成回调
-     * @param {Function} loading - 加载状态回调
-     * @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)
-      }
-    },
-
-    /**
-     * 删除
-     * @param {OrderItem} row - 行数据
-     * @param {number} index - 行索引
-     * @returns {Promise<void>}
-     */
-    async rowDel(row, index) {
-      try {
-        await this.$confirm('确定将选择数据删除?', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        })
-        await remove(row.id)
-        this.onLoad(this.page)
-        this.$message({
-          type: 'success',
-          message: '操作成功!'
-        })
-      } catch (error) {
-        // 用户取消删除或删除失败
-        if (error !== 'cancel') {
-          window.console.log(error)
-        }
-      }
-    },
-
-    /**
-     * 批量删除
-     * @returns {Promise<void>}
-     */
-    async handleDelete() {
-      if (this.selectionList.length === 0) {
-        this.$message.warning('请选择至少一条数据')
-        return
-      }
-      try {
-        await this.$confirm('确定将选择数据删除?', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        })
-        await remove(this.ids)
-        this.onLoad(this.page)
-        this.$message({
-          type: 'success',
-          message: '操作成功!'
-        })
-        this.$refs.crud.toggleSelection()
-      } catch (error) {
-        // 用户取消删除或删除失败
-        if (error !== 'cancel') {
-          window.console.log(error)
-        }
-      }
-    },
-
-    /**
-     * 根据客户编码加载客户地址列表
-     * @param {string} customerCode - 客户编码
-     * @returns {Promise<void>}
-     */
-    async loadCustomerAddresses(customerCode) {
-      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()
-      } catch (error) {
-        this.addressOptions = []
-        this.updateAddressOptions()
-        window.console.log('加载客户地址失败:', error)
-      }
-    },
-
-    /**
-     * 更新地址选项到表格配置中
-     * @returns {void}
-     */
-    updateAddressOptions() {
-      const addressColumn = this.option.column.find(col => col.prop === 'addressId')
-      if (addressColumn) {
-        addressColumn.dicData = this.addressOptions
-      }
-    },
-
-    /**
-     * 获取状态类型
-     * @param {number} status - 状态值
-     * @returns {string} 状态类型
-     */
-    getStatusType(status) {
-      const statusMap = {
-        0: 'info',     // 草稿
-        1: 'warning',  // 已提交
-        2: 'primary',  // 已确认
-        3: 'success',  // 已完成
-        4: 'danger'    // 已取消
-      }
-      return statusMap[status] || 'info'
-    },
-
-    /**
-     * 获取状态文本
-     * @param {number} status - 状态值
-     * @returns {string} 状态文本
-     */
-    getStatusText(status) {
-      const statusMap = {
-        0: '草稿',
-        1: '已提交',
-        2: '已确认',
-        3: '已完成',
-        4: '已取消'
-      }
-      return statusMap[status] || '未知'
-    },
-
-    /**
-     * 搜索回调
-     * @param {OrderQueryParams} params - 搜索参数
-     * @param {Function} done - 完成回调
-     * @returns {void}
-     */
-    searchChange(params, done) {
-      this.query = params
-      this.onLoad(this.page, params)
-      done()
-    },
-
-    /**
-     * 搜索重置回调
-     * @returns {void}
-     */
-    searchReset() {
-      this.query = {}
-      this.onLoad(this.page)
-    },
-
-    /**
-     * 选择改变回调
-     * @param {OrderItem[]} list - 选中的数据
-     * @returns {void}
-     */
-    selectionChange(list) {
-      this.selectionList = list
-    },
-
-    /**
-     * 清空选择
-     * @returns {void}
-     */
-    selectionClear() {
-      this.selectionList = []
-      this.$refs.crud.toggleSelection()
-    },
-
-    /**
-     * 当前页改变回调
-     * @param {number} currentPage - 当前页
-     * @returns {void}
-     */
-    currentChange(currentPage) {
-      this.page.currentPage = currentPage
-    },
-
-    /**
-     * 页大小改变回调
-     * @param {number} pageSize - 页大小
-     * @returns {void}
-     */
-    sizeChange(pageSize) {
-      this.page.pageSize = pageSize
-    },
-
-    /**
-     * 刷新回调
-     * @returns {void}
-     */
-    refreshChange() {
-      this.onLoad(this.page, this.query)
-    }
-  },
-  mounted() {
-    // 初始化加载客户选项
-    this.loadCustomerOptions()
-  },
-  beforeDestroy() {
-    // 清理定时器
-    if (this.customerSearchTimer) {
-      clearTimeout(this.customerSearchTimer)
-    }
-  }
-}
 </script>
 
-<style scoped>
-.dialog-footer {
-  text-align: right;
-}
-
-/* 无遮罩层弹窗样式 */
-:deep(.order-item-dialog-no-modal) {
-  z-index: 2000 !important;
-}
+<style lang="scss" scoped src="./index.scss">
 
-:deep(.order-item-dialog-no-modal .el-dialog) {
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
-  border: 1px solid #e4e7ed;
-}
 </style>