feat(订单地址): 重构客户选择功能，使用客户ID作为主键

src/views/order/address/index.vue

@@ -32,13 +32,13 @@
           删除
         </el-button>
       </template>
-      
+
       <template slot-scope="{row}" slot="isDefault">
         <el-tag :type="row.isDefault === 1 ? 'success' : 'info'">
           {{ row.isDefault === 1 ? '是' : '否' }}
         </el-tag>
       </template>
-      
+
       <template slot-scope="{row}" slot="isActive">
         <el-tag :type="row.isActive === 1 ? 'success' : 'danger'">
           {{ row.isActive === 1 ? '启用' : '禁用' }}
@@ -59,6 +59,7 @@
 
 <script>
 import { getList, add, update, remove, getDetail } from '@/api/order/address'
+import { getCustomerList } from '@/api/common/index'
 import { mapGetters } from 'vuex'
 import RegionCascader from '@/components/region-cascader'
 
@@ -112,38 +113,71 @@ import RegionCascader from '@/components/region-cascader'
  * @property {string} updateTime - 更新时间
  */
 
+/**
+ * 客户选项类型定义
+ * @typedef {Object} CustomerOption
+ * @property {string} value - 客户ID
+ * @property {string} label - 显示标签（客户编码 - 客户名称）
+ * @property {string} customerCode - 客户编码
+ * @property {string} customerName - 客户名称
+ * @property {string} customerId - 客户ID
+ */
+
 export default {
   name: 'OrderAddress',
   components: {
     RegionCascader
   },
-  // 在data中添加regionCascaderValue
   data() {
     return {
       /**
+       * 客户选项列表
+       * @type {CustomerOption[]}
+       */
+      customerOptions: [],
+
+      /**
+       * 客户选项加载状态
+       * @type {boolean}
+       */
+      customerLoading: false,
+
+      /**
+       * 客户搜索关键词
+       * @type {string}
+       */
+      customerSearchKeyword: '',
+
+      /**
+       * 客户搜索定时器
+       * @type {number|null}
+       */
+      customerSearchTimer: null,
+
+      /**
        * 表单数据
        * @type {CustomerAddressForm}
        */
       form: {},
-      
+
       /**
        * 查询条件
        * @type {CustomerAddressQueryParams}
        */
       query: {},
-      
+
       /**
        * 加载状态
        * @type {boolean}
        */
       loading: true,
-      
+
       /**
        * 地区级联选择器的值
        * @type {Array}
        */
       regionCascaderValue: [],
-      
+
       /**
        * 分页信息
        * @type {{pageSize: number, currentPage: number, total: number}}
@@ -153,13 +187,13 @@ export default {
         currentPage: 1,
         total: 0
       },
-      
+
       /**
        * 选中的行数据
        * @type {CustomerAddressItem[]}
        */
       selectionList: [],
-      
+
       /**
        * 表格配置
        * @type {Object}
@@ -178,30 +212,71 @@ export default {
         dialogWidth: 900,
         column: [
           {
-            label: '客户编码',
-            prop: 'customerCode',
+            label: '客户',
+            prop: 'customerId',
+            type: 'select',
             search: true,
-            width: 120,
+            searchShow: true,
+            searchSubmit: false,
+            width: 200,
+            filterable: true,
+            remote: false,
+            reserveKeyword: true,
+            placeholder: '请选择客户',
+            dicData: [],
+            props: {
+              label: 'label',
+              value: 'value'
+            },
             rules: [
               {
                 required: true,
-                message: '请输入客户编码',
-                trigger: 'blur'
+                message: '请选择客户',
+                trigger: 'change'
               }
-            ]
+            ],
+            /**
+             * 客户选择变更事件
+             * @param {Object} param - 事件参数
+             * @param {string} param.value - 选中的客户ID
+             * @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.$set(this.query, 'customerCode', selectedCustomer.customerCode)
+                  this.$set(this.query, 'customerName', selectedCustomer.customerName)
+                } else {
+                  this.clearCustomerData()
+                }
+              } else {
+                this.clearCustomerData()
+              }
+            }
+          },
+          {
+            label: '客户编码',
+            prop: 'customerCode',
+            search: true,
+            width: 120,
+            // addDisplay: true,
+            // editDisplay: true
           },
           {
             label: '客户名称',
             prop: 'customerName',
             search: true,
             width: 200,
-            rules: [
-              {
-                required: true,
-                message: '请输入客户名称',
-                trigger: 'blur'
-              }
-            ]
+            // addDisplay: false,
+            // editDisplay: false
           },
           {
             label: '收货人姓名',
@@ -353,7 +428,7 @@ export default {
           }
         ]
       },
-      
+
       /**
        * 表格数据
        * @type {CustomerAddressItem[]}
@@ -363,7 +438,7 @@ export default {
   },
   computed: {
     ...mapGetters(['permission']),
-    
+
     /**
      * 权限配置
      * @returns {{addBtn: boolean, viewBtn: boolean, delBtn: boolean, editBtn: boolean}}
@@ -380,7 +455,7 @@ export default {
         editBtn: true
       }
     },
-    
+
     /**
      * 选中的ID字符串
      * @returns {string} 逗号分隔的ID字符串
@@ -395,15 +470,100 @@ 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_ID,
+            label: `${customer.Customer_CODE} - ${customer.Customer_NAME}`,
+            customerCode: customer.Customer_CODE,
+            customerName: customer.Customer_NAME,
+            customerId: customer.Customer_ID
+          }))
+
+          // 更新表格配置中的选项数据
+          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.customerCode = ''
+      this.form.customerName = ''
+      this.form.customerId = ''
+
+      // 清空搜索条件
+      this.$set(this.query, 'customerCode', '')
+      this.$set(this.query, 'customerName', '')
+    },
+
+    /**
      * 地区选择改变事件
      * @param {Object} data - 选择的地区数据
      */
     handleRegionChange(data) {
       const { regionName } = data
-      
+
       // 只设置regionName，regionCode保持独立
       this.form.regionName = regionName
-      
+
       // 手动触发表单验证
       this.$nextTick(() => {
         if (this.$refs.crud && this.$refs.crud.$refs.dialogForm) {
@@ -418,21 +578,59 @@ export default {
      * @param {string} type - 操作类型
      * @returns {Promise<void>}
      */
+    // async beforeOpen(done, type) {
+    //   if (['edit', 'view'].includes(type)) {
+    //     try {
+    //       const res = await getDetail(this.form.id)
+    //       this.form = res.data.data
+
+    //       // regionName会通过组件的watch自动解析和回显
+    //       // 不需要额外处理regionCascaderValue
+    //     } catch (error) {
+    //       window.console.log(error)
+    //     }
+    //   }
+    //   done()
+    // },
+
+   /**
+     * 新增前的回调
+     * @param {Function} done - 完成回调
+     * @param {string} type - 操作类型
+     * @returns {Promise<void>}
+     */
     async beforeOpen(done, type) {
+      // 确保客户选项已加载
+      if (this.customerOptions.length === 0) {
+        await this.loadCustomerOptions()
+      }
+
       if (['edit', 'view'].includes(type)) {
         try {
           const res = await getDetail(this.form.id)
           this.form = res.data.data
-          
-          // regionName会通过组件的watch自动解析和回显
-          // 不需要额外处理regionCascaderValue
+
+          // 如果有客户信息，确保客户选项中包含当前客户
+          if (this.form.customerId && this.form.customerCode && this.form.customerName) {
+            const existingCustomer = this.customerOptions.find(option => option.value === this.form.customerId.toString())
+            if (!existingCustomer) {
+              this.customerOptions.unshift({
+                value: this.form.customerId.toString(),
+                label: `${this.form.customerCode} - ${this.form.customerName}`,
+                customerCode: this.form.customerCode,
+                customerName: this.form.customerName,
+                customerId: this.form.customerId.toString()
+              })
+              this.updateCustomerOptionsInColumn()
+            }
+          }
         } catch (error) {
           window.console.log(error)
         }
       }
       done()
     },
-    
+
     /**
      * 获取数据
      * @param {Object} page - 分页信息
@@ -453,7 +651,7 @@ export default {
         window.console.log(error)
       }
     },
-    
+
     /**
      * 新增
      * @param {CustomerAddressForm} row - 表单数据
@@ -475,7 +673,7 @@ export default {
         window.console.log(error)
       }
     },
-    
+
     /**
      * 修改
      * @param {CustomerAddressForm} row - 表单数据
@@ -498,7 +696,7 @@ export default {
         window.console.log(error)
       }
     },
-    
+
     /**
      * 删除
      * @param {CustomerAddressItem} row - 行数据
@@ -525,7 +723,7 @@ export default {
         }
       }
     },
-    
+
     /**
      * 批量删除
      * @returns {Promise<void>}
@@ -555,7 +753,7 @@ export default {
         }
       }
     },
-    
+
     /**
      * 搜索回调
      * @param {CustomerAddressQueryParams} params - 搜索参数
@@ -567,7 +765,7 @@ export default {
       this.onLoad(this.page, params)
       done()
     },
-    
+
     /**
      * 搜索重置回调
      * @returns {void}
@@ -576,7 +774,7 @@ export default {
       this.query = {}
       this.onLoad(this.page)
     },
-    
+
     /**
      * 选择改变回调
      * @param {CustomerAddressItem[]} list - 选中的数据
@@ -585,7 +783,7 @@ export default {
     selectionChange(list) {
       this.selectionList = list
     },
-    
+
     /**
      * 清空选择
      * @returns {void}
@@ -594,7 +792,7 @@ export default {
       this.selectionList = []
       this.$refs.crud.toggleSelection()
     },
-    
+
     /**
      * 当前页改变回调
      * @param {number} currentPage - 当前页
@@ -603,7 +801,7 @@ export default {
     currentChange(currentPage) {
       this.page.currentPage = currentPage
     },
-    
+
     /**
      * 页大小改变回调
      * @param {number} pageSize - 页大小
@@ -612,7 +810,7 @@ export default {
     sizeChange(pageSize) {
       this.page.pageSize = pageSize
     },
-    
+
     /**
      * 刷新回调
      * @returns {void}
@@ -620,6 +818,23 @@ export default {
     refreshChange() {
       this.onLoad(this.page, this.query)
     }
+  },
+  /**
+   * 组件创建时加载客户选项
+   * @returns {Promise<void>}
+   */
+  async created() {
+    await this.loadCustomerOptions()
+  },
+
+  /**
+   * 组件销毁前清理定时器
+   * @returns {void}
+   */
+  beforeDestroy() {
+    if (this.customerSearchTimer) {
+      clearTimeout(this.customerSearchTimer)
+    }
   }
 }
-</script>
+</script>

src/views/order/order/index.vue

@@ -696,7 +696,7 @@ export default {
         if (response.data && response.data.success) {
           const customers = response.data.data.records || []
           this.customerOptions = customers.map(customer => ({
-            value: customer.Customer_CODE,
+            value: customer.Customer_ID,
             label: `${customer.Customer_CODE} - ${customer.Customer_NAME}`,
             customerCode: customer.Customer_CODE,
             customerName: customer.Customer_NAME,