feat(订单): 重构客户选择功能并优化表单交互

src/api/order/lead.js

@@ -118,7 +118,7 @@ export const getDetail = (id) => {
  */
 export const add = (row) => {
   return request({
-    url: '/api/blade-factory/api/factory/lead-detail',
+    url: '/api/blade-factory/api/factory/lead',
     method: 'post',
     data: row
   })
@@ -135,4 +135,4 @@ export const update = (row) => {
     method: 'put',
     data: row
   })
-}
+}

src/views/order/lead/index.vue

@@ -119,9 +119,27 @@ export default {
             },
             /**
              * 客户选项列表
-             * @type {{label: string, value: string}[]}
+             * @type {{label: string, value: string, customerCode: string, customerName: string, customerId: string}[]}
              */
             customerOptions: [],
+
+            /**
+             * 客户选项加载状态
+             * @type {boolean}
+             */
+            customerLoading: false,
+
+            /**
+             * 客户搜索关键词
+             * @type {string}
+             */
+            customerSearchKeyword: '',
+
+            /**
+             * 客户搜索定时器
+             * @type {number|null}
+             */
+            customerSearchTimer: null,
             /**
              * 表格配置
              */
@@ -148,24 +166,71 @@ export default {
                         search: true
                     },
                     {
-                        label: '客户编码',
-                        prop: 'customerCode',
+                        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: 'blur'
+                            message: '请选择客户',
+                            trigger: 'change'
                         }],
-                        search: true
+                        /**
+                         * 客户选择变更事件
+                         * @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
+                                } else {
+                                    this.clearCustomerData()
+                                }
+                            } else {
+                                this.clearCustomerData()
+                            }
+                        },
+                        /**
+                         * 远程搜索方法
+                         * @param {string} query - 搜索关键词
+                         * @returns {void}
+                         */
+                        remoteMethod: (query) => {
+                            this.searchCustomers(query)
+                        }
+                    },
+                    {
+                        label: '客户编码',
+                        prop: 'customerCode',
+                        search: true,
+                        addDisplay: false,
+                        editDisplay: false,
+                        width: 120
                     },
                     {
                         label: '客户名称',
                         prop: 'customerName',
-                        rules: [{
-                            required: true,
-                            message: '请输入客户名称',
-                            trigger: 'blur'
-                        }],
-                        search: true
+                        search: true,
+                        addDisplay: false,
+                        editDisplay: false,
+                        width: 150
                     },
                     {
                         label: '联系人',
@@ -327,6 +392,109 @@ 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.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.customerCode = ''
+            this.form.customerId = ''
+        },
+
+        /**
+         * 新增前的回调
+         * @param {Function} done - 完成回调
+         * @param {string} type - 操作类型
+         */
+        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
+                } catch (error) {
+                    console.error('获取详情失败:', error)
+                }
+            }
+            done()
+        },
         /**
          * 获取状态文本
          * @param {number} status - 状态值
@@ -495,12 +663,19 @@ export default {
          * @param {Function} done - 完成回调
          * @param {string} type - 操作类型
          */
-        beforeOpen(done, type) {
+        async beforeOpen(done, type) {
+            // 确保客户选项已加载
+            if (this.customerOptions.length === 0) {
+                await this.loadCustomerOptions()
+            }
+
             if (['edit', 'view'].includes(type)) {
-                // 编辑和查看时获取详情
-                getDetail(this.form.id).then(res => {
+                try {
+                    const res = await getDetail(this.form.id)
                     this.form = res.data.data
-                })
+                } catch (error) {
+                    console.error('获取详情失败:', error)
+                }
             }
             done()
         },
@@ -592,6 +767,17 @@ export default {
         refreshChange() {
             this.onLoad(this.page, this.query)
         }
+    },
+    mounted() {
+        // 初始化加载客户选项
+        this.loadCustomerOptions()
+    },
+
+    beforeDestroy() {
+        // 清理定时器
+        if (this.customerSearchTimer) {
+            clearTimeout(this.customerSearchTimer)
+        }
     }
 }
 </script>