feat(crm): 新增JSON表格输入组件并优化客户管理页面

refactor(OrderDetail): 允许orderId为undefined并添加空值检查
feat(JSONTableInput): 新增支持JSON与表格双向绑定的通用组件
refactor(customer): 重构客户详情页面，优化表单交互和字段映射
style(KLPList): 简化列表组件样式并修复字段显示逻辑

klp-ui/src/views/crm/components/JSONTableInput.vue

@@ -0,0 +1,319 @@
+<template>
+  <div class="json-table-input" ref="tableContainer">
+    <!-- JSON 解析错误提示 -->
+    <div v-if="error" class="error-tip">
+      <i class="el-icon-warning"></i> {{ error }}
+    </div>
+
+    <!-- 表格编辑区域 -->
+    <el-table :data="tableData" border size="mini" :show-header="columns.length > 0" class="table-container">
+      <!-- 动态渲染列 -->
+      <el-table-column v-for="col in columns" :key="col.prop" :label="col.label" :width="col.width">
+        <template slot-scope="scope">
+          <!-- 新增聚焦/失焦事件，全局记录聚焦状态 -->
+          <el-input v-model="scope.row[col.prop]" size="mini" @input="handleCellChange" @focus="handleInputFocus"
+            @blur="handleInputBlur" placeholder="请输入" />
+        </template>
+      </el-table-column>
+
+      <!-- 操作列：删除行（空行不可删） -->
+      <el-table-column label="操作" width="90">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteRow(scope.$index)"
+            :disabled="isLastEmptyRow(scope.$index)">
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 原始 JSON 预览（可选，方便调试） -->
+    <div class="json-preview" v-if="showPreview">
+      <div class="preview-label">JSON 预览（自动格式化）：</div>
+      <pre>{{ formattedJson }}</pre>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'JSONTableInput',
+  props: {
+    // 双向绑定的值（JSON 数组字符串 / JSON 数组对象）
+    value: {
+      type: [String, Array],
+      default: '[]'
+    },
+    // 表格列配置：[{ prop: 'name', label: '姓名', width: 150 }, ...]
+    columns: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    // 是否显示 JSON 预览（默认关闭）
+    showPreview: {
+      type: Boolean,
+      default: false
+    },
+    // 防抖延迟（ms）：所有输入停止 + 无输入框聚焦 后触发更新
+    debounceDelay: {
+      type: Number,
+      default: 500 // 默认500ms防抖
+    }
+  },
+  data() {
+    return {
+      tableData: [], // 表格内部数据
+      error: '', // JSON 解析错误提示
+      debounceTimer: null, // 组件级防抖定时器（所有input共用）
+      hasFocus: false // 全局标记：是否有任意input处于聚焦状态
+    }
+  },
+  computed: {
+    // 格式化后的 JSON 字符串（输出给 v-model）
+    formattedJson() {
+      try {
+        // 过滤空行（所有字段为空的行）
+        const validData = this.tableData.filter(row => this.isRowValid(row))
+        // 格式化 JSON（缩进2个空格，保证可读性）
+        return JSON.stringify(validData, null, 2)
+      } catch (e) {
+        this.error = 'JSON 格式化失败：' + e.message
+        return '[]'
+      }
+    }
+  },
+  watch: {
+    // 监听外部传入的 value 变化，解析为表格数据
+    value: {
+      immediate: true,
+      handler(val) {
+        this.parseValueToTableData(val)
+      }
+    },
+    // 监听聚焦状态变化：当失去所有焦点时，触发防抖检查
+    hasFocus(newVal) {
+      if (!newVal) {
+        this.triggerDebounceChange()
+      }
+    }
+  },
+  beforeDestroy() {
+    // 销毁时清除防抖定时器，防止内存泄漏
+    if (this.debounceTimer) clearTimeout(this.debounceTimer)
+  },
+  methods: {
+    /**
+     * 解析外部传入的 value 为表格数据
+     * @param {String|Array} val - 外部绑定的 value
+     */
+    parseValueToTableData(val) {
+      try {
+        this.error = ''
+        let data = []
+        // 1. 如果是字符串，解析为 JSON 数组
+        if (typeof val === 'string') {
+          data = val.trim() ? JSON.parse(val) : []
+        }
+        // 2. 如果是数组，直接使用
+        else if (Array.isArray(val)) {
+          data = [...val]
+        }
+        // 校验是否为数组
+        if (!Array.isArray(data)) {
+          throw new Error('数据必须是 JSON 数组')
+        }
+        // 3. 赋值并确保空行
+        this.tableData = data
+        this.ensureEmptyRow()
+      } catch (e) {
+        this.error = 'JSON 解析失败：' + e.message
+        this.tableData = []
+        this.ensureEmptyRow()
+      }
+    },
+
+    /**
+     * 确保表格最后一行是空行
+     */
+    ensureEmptyRow() {
+      if (this.tableData.length === 0) {
+        // 无数据时添加空行
+        this.tableData.push(this.createEmptyRow())
+      } else {
+        const lastRow = this.tableData[this.tableData.length - 1]
+        // 最后一行非空时，添加空行
+        if (this.isRowValid(lastRow)) {
+          this.tableData.push(this.createEmptyRow())
+        }
+      }
+    },
+
+    /**
+     * 创建空行（字段与列配置一致）
+     */
+    createEmptyRow() {
+      const emptyRow = {}
+      this.columns.forEach(col => {
+        emptyRow[col.prop] = ''
+      })
+      return emptyRow
+    },
+
+    /**
+     * 判断行是否有效（非空行）
+     * @param {Object} row - 表格行数据
+     */
+    isRowValid(row) {
+      return this.columns.some(col => {
+        const val = row[col.prop]
+        return val !== '' && val !== null && val !== undefined
+      })
+    },
+
+    /**
+     * 判断是否是最后一行空行（用于禁用删除按钮）
+     * @param {Number} index - 行索引
+     */
+    isLastEmptyRow(index) {
+      return index === this.tableData.length - 1 && !this.isRowValid(this.tableData[index])
+    },
+
+    /**
+     * 单元格内容变化（仅更新表格数据，触发防抖更新）
+     */
+    handleCellChange() {
+      // 确保始终保留一个空行
+      this.ensureEmptyRow()
+      // 触发防抖更新（跨input输入时，重置同一个定时器）
+      this.triggerDebounceChange()
+    },
+
+    /**
+     * 任意input聚焦：标记全局聚焦状态
+     */
+    handleInputFocus() {
+      this.hasFocus = true
+      // 聚焦时清除防抖定时器（用户还在输入，不触发更新）
+      if (this.debounceTimer) {
+        clearTimeout(this.debounceTimer)
+        this.debounceTimer = null
+      }
+    },
+
+    /**
+     * 任意input失焦：延迟判断是否真的无聚焦（避免切换input误触发）
+     */
+    handleInputBlur() {
+      // 延迟 100ms 检查聚焦状态（切换input时，新input的focus会先触发）
+      setTimeout(() => {
+        try {
+          // 1. 获取表格内所有 el-input 的原生 input 元素
+          const tableEl = this.$refs.tableContainer;
+          if (!tableEl) {
+            this.hasFocus = false;
+            return;
+          }
+          const inputs = tableEl.querySelectorAll('.el-input__inner'); // 精准匹配 Element UI 输入框
+
+          console.log('所有输入框:', inputs)
+          // 2. 判断是否有任意输入框处于聚焦状态
+          const hasAnyFocus = Array.from(inputs).some(input => {
+            // 核心：判断当前输入框是否是文档的激活元素
+            console.log('当前激活元素:', document.activeElement === input)
+            return input === document.activeElement;
+          });
+
+          // 3. 只有无任何输入框聚焦时，才标记全局失焦
+          this.hasFocus = hasAnyFocus;
+        } catch (e) {
+          // 异常兜底：标记为失焦
+          this.hasFocus = false;
+        }
+      }, 100);
+    },
+
+    /**
+     * 删除指定行
+     * @param {Number} index - 行索引
+     */
+    handleDeleteRow(index) {
+      if (this.isLastEmptyRow(index)) return // 空行不可删
+      this.tableData.splice(index, 1)
+      this.ensureEmptyRow() // 删除后重新检查空行
+      // 删除后立即触发更新（用户主动操作，无需防抖）
+      this.emitUpdate()
+    },
+
+    /**
+     * 防抖触发更新：仅当「无输入框聚焦 + 防抖超时」时触发
+     */
+    triggerDebounceChange() {
+      // 若还有输入框聚焦，直接返回（用户还在输入）
+      if (this.hasFocus) return
+
+      // 清除原有定时器（重置计时）
+      if (this.debounceTimer) clearTimeout(this.debounceTimer)
+      // 设置新定时器，延迟触发更新
+      this.debounceTimer = setTimeout(() => {
+        this.emitUpdate()
+        this.debounceTimer = null // 清空定时器标识
+      }, this.debounceDelay)
+    },
+
+    /**
+     * 统一触发更新父组件的逻辑
+     */
+    emitUpdate() {
+      // 触发 input（双向绑定）和 change（通知父组件）
+      this.$emit('input', this.formattedJson)
+      this.$emit('change', this.formattedJson)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.json-table-input {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.error-tip {
+  color: #f56c6c;
+  font-size: 12px;
+  margin-bottom: 8px;
+  padding: 4px 8px;
+  background: #fef0f0;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+}
+
+.error-tip i {
+  margin-right: 4px;
+}
+
+.table-container {
+  margin-bottom: 12px;
+}
+
+.json-preview {
+  background: #f5f7fa;
+  padding: 8px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.json-preview .preview-label {
+  color: #606266;
+  margin-bottom: 4px;
+}
+
+.json-preview pre {
+  margin: 0;
+  color: #303133;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+</style>

klp-ui/src/views/crm/components/OrderDetail.vue

@@ -68,7 +68,7 @@ export default {
   name: "OrderItem",
   props: {
     orderId: {
-      type: String,
+      type: [String, undefined],
       required: true
     }
   },
@@ -142,7 +142,12 @@ export default {
   },
   methods: {
     /** 查询正式订单明细列表 */
-    getList() {
+    getList() {  
+      if (!this.queryParams.orderId) {
+        this.orderItemList = [];
+        this.total = 0;
+        return;
+      }
       this.loading = true;
       listOrderItem(this.queryParams).then(response => {
         this.orderItemList = response.rows;

klp-ui/src/views/crm/customer/index.vue

@@ -6,86 +6,92 @@
         <div style="display: flex; align-items: center; gap: 5px; margin-top: 10px;">
           <!-- 主搜索和添加 -->
           <el-input style="flex: 1;" prefix-icon="el-icon-search" placeholder="输入客户编码搜索"
-            v-model="queryParams.customerCode"></el-input>
+            v-model="queryParams.customerCode" @change="getCustomerList" clearable></el-input>
           <el-button icon="el-icon-search" @click="toggleQuery"></el-button>
           <el-button type="primary" icon="el-icon-plus" style="margin-left: 0;" @click="handleAdd"></el-button>
         </div>
         <div v-show="showQuery" style="display: flex; align-items: center; gap: 5px; margin-top: 10px;">
           <!-- 查询区，通过上方的查询按钮控制显示隐藏 -->
           <!-- 客户行业和客户等级的下拉选 -->
-          <el-select style="width: 100px;" v-model="queryParams.industry" placeholder="客户行业" clearable>
+          <el-select style="width: 100px;" v-model="queryParams.industry" placeholder="客户行业" clearable
+            @change="getCustomerList">
             <el-option v-for="item in dict.type.customer_industry" :key="item.value" :label="item.label"
               :value="item.value" />
           </el-select>
-          <el-select style="width: 100px;" v-model="queryParams.customerLevel" placeholder="客户等级" clearable>
+          <el-select style="width: 100px;" v-model="queryParams.customerLevel" placeholder="客户等级" clearable
+            @change="getCustomerList">
             <el-option v-for="item in dict.type.customer_level" :key="item.value" :label="item.label"
               :value="item.value" />
           </el-select>
         </div>
         <div>
           <!-- 列表区域 -->
-          <KLPList :listData="customerList" listKey="customerId" :loading="customerLoading" info1Field="customerCode" info4Field="companyName" />
+          <KLPList :listData="customerList" listKey="customerId" :loading="customerLoading" field1="customerCode"
+            field4="companyName" @item-click="handleItemClick">
+            <template slot="actions" slot-scope="{ item }">
+              <el-button type="danger" size="mini" @click="handleDelete(item)" icon="el-icon-delete"></el-button>
+            </template>
+          </KLPList>
         </div>
       </el-col>
 
       <el-col :span="19">
-        <el-tabs v-model="activeTab" type="border-card">
+        <el-tabs v-model="activeTab" type="border-card" v-if="currentCustomer && currentCustomer.customerId">
           <el-tab-pane label="客户详情" name="detail">
             <!-- 客户详情区域 -->
-            <el-descriptions :column="2" v-if="activeTab === 'detail'">
+            <el-descriptions :column="2" border>
               <el-descriptions-item label="客户编号">
-                {{ currentCustomer.customerNum }}
+                {{ currentCustomer.customerCode || '-' }}
               </el-descriptions-item>
               <el-descriptions-item label="公司">
-                {{ currentCustomer.company }}
+                {{ currentCustomer.companyName || '-' }}
               </el-descriptions-item>
               <el-descriptions-item label="联系人">
-                {{ currentCustomer.contact }}
+                {{ currentCustomer.contactPerson || '-' }}
               </el-descriptions-item>
-              <el-descriptions-item label="客户联系电话">{{ currentCustomer.phone }}</el-descriptions-item>
-              <el-descriptions-item label="客户联系邮箱">{{ currentCustomer.email }}</el-descriptions-item>
+              <el-descriptions-item label="客户联系方式">{{ currentCustomer.contactWay || '-' }}</el-descriptions-item>
               <el-descriptions-item label="客户行业">
                 <dict-tag :value="currentCustomer.industry" :options="dict.type.customer_industry"></dict-tag>
               </el-descriptions-item>
               <el-descriptions-item label="客户等级">
-                <dict-tag :value="currentCustomer.level" :options="dict.type.customer_level"></dict-tag>
+                <dict-tag :value="currentCustomer.customerLevel" :options="dict.type.customer_level"></dict-tag>
               </el-descriptions-item>
-              <el-descriptions-item label="客户地址" v-hasPermi="['crm:customer:address']">{{ currentCustomer.address
-                }}</el-descriptions-item>
+              <el-descriptions-item label="客户地址" v-hasPermi="['crm:customer:address']">{{ currentCustomer.address || '-'
+              }}</el-descriptions-item>
             </el-descriptions>
           </el-tab-pane>
           <el-tab-pane label="信息编辑" name="edit">
             <!-- 客户联系人区域 -->
-            <el-form label-position="top" v-if="activeTab === 'edit'">
+            <el-form label-position="top" :model="currentCustomer" :disabled="updateLoading">
               <el-row :gutter="20">
                 <el-col :span="12">
-                  <el-form-item label="客户编号" prop="customerNum">
-                    <el-input v-model="currentCustomer.customerNum" placeholder="请输入客户编号" @change="handleDetailChange"/>
+                  <el-form-item label="客户编号" prop="customerCode">
+                    <el-input v-model="currentCustomer.customerCode" placeholder="请输入客户编号"
+                      @input="handleDetailChange" />
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
                   <el-form-item label="公司" prop="company">
-                    <el-input v-model="currentCustomer.company" placeholder="请输入公司名称" @change="handleDetailChange"/>
+                    <el-input v-model="currentCustomer.companyName" placeholder="请输入公司名称" @input="handleDetailChange" />
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                  <el-form-item label="联系人" prop="contact">
-                    <el-input v-model="currentCustomer.contact" placeholder="请输入联系人" @change="handleDetailChange"/>
+                  <el-form-item label="联系人" prop="contactPerson">
+                    <!-- 修复字段映射错误：contact → contactPerson -->
+                    <el-input v-model="currentCustomer.contactPerson" placeholder="请输入联系人"
+                      @input="handleDetailChange" />
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                  <el-form-item label="客户联系电话" prop="phone">
-                    <el-input v-model="currentCustomer.phone" placeholder="请输入客户联系电话" @change="handleDetailChange"/>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="12">
-                  <el-form-item label="客户联系邮箱" prop="email">
-                    <el-input v-model="currentCustomer.email" placeholder="请输入客户联系邮箱" @change="handleDetailChange"/>
+                  <el-form-item label="客户联系方式" prop="contactWay">
+                    <el-input v-model="currentCustomer.contactWay" placeholder="请输入客户联系方式"
+                      @input="handleDetailChange" />
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
                   <el-form-item label="客户行业" prop="industry">
-                    <el-select v-model="currentCustomer.industry" placeholder="请选择客户行业" clearable @change="handleDetailChange">
+                    <el-select v-model="currentCustomer.industry" placeholder="请选择客户行业" clearable
+                      @change="handleDetailChange">
                       <el-option v-for="item in dict.type.customer_industry" :key="item.value" :label="item.label"
                         :value="item.value" />
                     </el-select>
@@ -93,15 +99,23 @@
                 </el-col>
                 <el-col :span="12">
                   <el-form-item label="客户等级" prop="level">
-                    <el-select v-model="currentCustomer.level" placeholder="请选择客户等级" clearable @change="handleDetailChange">
+                    <el-select v-model="currentCustomer.customerLevel" placeholder="请选择客户等级" clearable
+                      @change="handleDetailChange">
                       <el-option v-for="item in dict.type.customer_level" :key="item.value" :label="item.label"
                         :value="item.value" />
                     </el-select>
                   </el-form-item>
                 </el-col>
-                <el-col :span="12" v-hasPermi="['crm:customer:address']">
+                <el-col :span="24" v-hasPermi="['crm:customer:address']">
                   <el-form-item label="客户地址" prop="address">
-                    <el-input v-model="currentCustomer.address" placeholder="请输入客户地址" @change="handleDetailChange"/>
+                    <el-input type="textarea" v-model="currentCustomer.address" placeholder="请输入客户地址"
+                      @input="handleDetailChange" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24" v-hasPermi="['crm:customer:bank']">
+                  <el-form-item label="银行信息" prop="bankInfo">
+                    <JSONTableInput @change="handleDetailChange" v-model="currentCustomer.bankInfo"
+                      :columns="[{ prop: 'bankName', label: '银行名称' }, { prop: 'bankAccount', label: '银行账号' }]" />
                   </el-form-item>
                 </el-col>
               </el-row>
@@ -110,17 +124,19 @@
 
           <el-tab-pane label="历史订单" name="transaction">
             <!-- 客户交易记录区域 -->
-            <div v-if="activeTab === 'transaction'">
-              <el-descriptions :column="2">
-                <el-descriptions-item label="客户总数">{{ currentCustomer.totalCount }}</el-descriptions-item>
-                <el-descriptions-item label="已成交订单数">{{ currentCustomer.dealCount }}</el-descriptions-item>
-                <el-descriptions-item label="待成交订单数">{{ currentCustomer.waitCount }}</el-descriptions-item>
-                <el-descriptions-item label="取消订单数">{{ currentCustomer.cancelCount }}</el-descriptions-item>
+            <div>
+              <el-descriptions :column="2" border>
+                <el-descriptions-item label="订单总数">{{ currentCustomer.totalCount || 0 }}</el-descriptions-item>
+                <el-descriptions-item label="已成交订单数">{{ currentCustomer.dealCount || 0 }}</el-descriptions-item>
+                <el-descriptions-item label="待成交订单数">{{ currentCustomer.waitCount || 0 }}</el-descriptions-item>
+                <el-descriptions-item label="取消订单数">{{ currentCustomer.cancelCount || 0 }}</el-descriptions-item>
               </el-descriptions>
-              <el-table></el-table>
+              <el-table :data="[]" border style="margin-top: 10px;" placeholder="暂无订单数据"></el-table>
             </div>
           </el-tab-pane>
         </el-tabs>
+
+        <el-empty v-else style="margin-top: 20px;" description="选择客户查看详情"></el-empty>
       </el-col>
     </el-row>
 
@@ -142,13 +158,13 @@
         <el-form-item label="所属行业" prop="industry">
           <el-select v-model="form.industry" placeholder="请选择所属行业" clearable>
             <el-option v-for="item in dict.type.customer_industry" :key="item.value" :label="item.label"
-                      :value="item.value" />
+              :value="item.value" />
           </el-select>
         </el-form-item>
         <el-form-item label="客户等级" prop="customerLevel">
           <el-select v-model="form.customerLevel" placeholder="请选择客户等级" clearable>
             <el-option v-for="item in dict.type.customer_level" :key="item.value" :label="item.label"
-                      :value="item.value" />
+              :value="item.value" />
           </el-select>
         </el-form-item>
         <el-form-item label="客户地址" prop="address">
@@ -157,6 +173,10 @@
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" placeholder="请输入备注" />
         </el-form-item>
+        <el-form-item label="银行信息" prop="transactionRecords">
+          <JSONTableInput v-model="form.bankInfo"
+            :columns="[{ prop: 'bankName', label: '银行名称' }, { prop: 'bankAccount', label: '银行账号' }]" />
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
@@ -168,12 +188,15 @@
 
 <script>
 import KLPList from '@/components/KLPUI/KLPList/index.vue'
-import { listCustomer, addCustomer } from '@/api/crm/customer'
+import JSONTableInput from '../components/JSONTableInput.vue'
+
+import { listCustomer, addCustomer, updateCustomer, delCustomer } from '@/api/crm/customer'
 
 export default {
   name: 'CustomerPage',
   components: {
-    KLPList
+    KLPList,
+    JSONTableInput
   },
   dicts: ['customer_industry', 'customer_level'],
   data() {
@@ -194,6 +217,8 @@ export default {
       open: false,
       form: {},
       buttonLoading: false,
+      updateLoading: false, // 编辑请求加载状态
+      debounceTimer: null, // 防抖定时器
       rules: {
         customerCode: [{ required: true, message: '请输入客户编码', trigger: 'blur' }],
         companyName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
@@ -213,20 +238,87 @@ export default {
   mounted() {
     this.getCustomerList();
   },
+  beforeDestroy() {
+    // 销毁时清除防抖定时器，避免内存泄漏
+    clearTimeout(this.debounceTimer);
+  },
   methods: {
     toggleQuery() {
       this.showQuery = !this.showQuery
     },
-    handleDetailChange() {
-      // 发送网络请求更新客户信息
+
+    /**
+     * 防抖函数（通用）
+     * @param {Function} fn - 执行函数
+     * @param {Number} delay - 延迟时间(ms)
+     * @returns {Function} 防抖后的函数
+     */
+    debounce(fn, delay) {
+      return (...args) => {
+        // 清除上一次定时器
+        if (this.debounceTimer) clearTimeout(this.debounceTimer);
+        // 重新设置定时器
+        this.debounceTimer = setTimeout(() => {
+          fn.apply(this, args);
+        }, delay);
+      };
     },
+
+    /** 表单编辑变更 - 防抖提交 */
+    handleDetailChange: function () {
+      // 绑定防抖函数（延迟2秒，仅最后一次变更后执行）
+      this.debounce(async () => {
+        // 无客户ID或加载中，不执行
+        if (!this.currentCustomerId || this.updateLoading) return;
+
+        try {
+          this.updateLoading = true;
+          // 深拷贝避免请求过程中数据被修改
+          const params = { ...this.currentCustomer };
+          const res = await updateCustomer(params);
+          this.$message({
+            type: 'success',
+            message: '客户信息更新成功'
+          });
+          // 同步列表数据（可选）
+          this.syncCustomerList(params);
+        } catch (error) {
+          this.$message({
+            type: 'error',
+            message: '更新失败：' + (error.msg || '服务器异常')
+          });
+        } finally {
+          this.updateLoading = false;
+        }
+      }, 1000)();
+    },
+
+    /** 同步列表数据（避免列表和详情数据不一致） */
+    syncCustomerList(updatedCustomer) {
+      const index = this.customerList.findIndex(item => item.customerId === updatedCustomer.customerId);
+      if (index > -1) {
+        this.$set(this.customerList, index, { ...this.customerList[index], ...updatedCustomer });
+      }
+    },
+
     getCustomerList() {
       this.customerLoading = true;
       listCustomer(this.queryParams).then(response => {
         this.customerList = response.rows || [];
+        this.total = response.total || 0; // 补充总数
         this.customerLoading = false;
+      }).catch(() => {
+        this.customerLoading = false;
+        this.$message.error('获取客户列表失败');
       });
     },
+
+    handleItemClick(item) {
+      // 深拷贝避免原数据被直接修改
+      this.currentCustomer = { ...item };
+      this.activeTab = 'detail';
+    },
+
     // 表单重置
     reset() {
       this.form = {
@@ -246,39 +338,69 @@ export default {
         updateTime: undefined,
         delFlag: undefined
       };
-      this.resetForm("form");
+      if (this.$refs.form) this.$refs.form.resetFields(); // 修复重置表单
     },
-     /** 新增按钮操作 */
+
+    /** 新增按钮操作 */
     handleAdd() {
       this.reset();
       this.open = true;
     },
+
     submitForm() {
-      this.$refs.form.validate(valid => {
+      this.$refs.form.validate(async (valid) => {
         if (valid) {
           this.buttonLoading = true;
-          // 提交表单数据
-          addCustomer(this.form).then(response => {
+          try {
+            await addCustomer(this.form);
             this.$message({
               message: '客户录入成功',
               type: 'success'
             });
-            this.buttonLoading = false;
             this.open = false;
             this.getCustomerList();
-          }).finally(() => {
+          } catch (error) {
+            this.$message.error('录入失败：' + (error.msg || '服务器异常'));
+          } finally {
             this.buttonLoading = false;
-          });
+          }
         }
       });
     },
+
     /** 取消按钮操作 */
     cancel() {
       this.reset();
       this.open = false;
     },
+
+    /** 处理删除（补充实现） */
+    handleDelete(item) {
+      this.$confirm('确定删除该客户吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        // 补充删除接口调用逻辑
+        await delCustomer(item.customerId);
+        this.$message.success('删除成功');
+        this.getCustomerList();
+      }).catch(() => {
+        this.$message.info('已取消删除');
+      });
+    }
   },
 }
 </script>
 
-<style></style>
+<style scoped>
+.app-container {
+  padding: 16px;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.dialog-footer {
+  text-align: center;
+}
+</style>