feat(订单管理): 添加客户选择功能及相关逻辑

src/views/order/order/index.vue

@@ -86,6 +86,7 @@
 
 <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'
 
@@ -158,6 +159,15 @@ import { mapGetters } from 'vuex'
  */
 
 /**
+ * 客户选项类型定义
+ * @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
@@ -178,6 +188,23 @@ export default {
 
   data() {
     return {
+      /**
+       * 客户选项列表
+       * @type {CustomerOption[]}
+       */
+      customerOptions: [],
+
+      /**
+       * 客户选项加载状态
+       * @type {boolean}
+       */
+      customerLoading: false,
+
+      /**
+       * 客户搜索关键词
+       * @type {string}
+       */
+      customerSearchKeyword: '',
 
       /**
        * 明细管理弹窗显示状态
@@ -247,9 +274,70 @@ export default {
         viewBtn: true,
         dialogClickModal: false,
         dialogWidth: 1000,
-        menuWidth: 200, // 增加操作列宽度
+        menuWidth: 200,
         column: [
           {
+            label: '客户',
+            prop: 'customerData',
+            type: 'select',
+            search: true,
+            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) {
+                  // 自动填充客户名称
+                  this.form.customerId = selectedCustomer.customerId
+                  this.form.customerCode = selectedCustomer.customerCode
+                  this.form.customerName = selectedCustomer.customerName
+                  // 加载客户地址
+                  this.loadCustomerAddresses(value)
+                } else {
+                  this.form.customerName = ''
+                  this.form.customerId = ''
+                  this.addressOptions = []
+                  this.form.addressId = ''
+                  this.form.receiverName = ''
+                  this.form.receiverPhone = ''
+                  this.form.receiverAddress = ''
+                  this.form.receiverRegion = ''
+                }
+              } else {
+                this.form.customerName = ''
+                this.form.customerId = ''
+                this.addressOptions = []
+                this.form.addressId = ''
+                this.form.receiverName = ''
+                this.form.receiverPhone = ''
+                this.form.receiverAddress = ''
+                this.form.receiverRegion = ''
+              }
+            }
+          },
+          {
             label: '订单编码',
             prop: 'orderCode',
             search: true,
@@ -602,6 +690,77 @@ export default {
   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_CODE,
+            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 === 'customerData')
+      if (customerColumn) {
+        customerColumn.dicData = this.customerOptions
+      }
+    },
+
+    /**
      * 处理明细管理
      * @param {OrderItem} row - 订单行数据
      */
@@ -627,6 +786,12 @@ export default {
      * @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)
@@ -902,6 +1067,16 @@ export default {
     refreshChange() {
       this.onLoad(this.page, this.query)
     }
+  },
+  mounted() {
+    // 初始化加载客户选项
+    this.loadCustomerOptions()
+  },
+  beforeDestroy() {
+    // 清理定时器
+    if (this.customerSearchTimer) {
+      clearTimeout(this.customerSearchTimer)
+    }
   }
 }
 </script>
@@ -920,4 +1095,4 @@ export default {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
   border: 1px solid #e4e7ed;
 }
-</style>
+</style>