From 5ac2e78a3338a75aae6058c714a949bbf6eba1f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Tue, 16 Dec 2025 11:47:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(crm):=20=E6=96=B0=E5=A2=9EJSON=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E8=BE=93=E5=85=A5=E7=BB=84=E4=BB=B6=E5=B9=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=AE=A2=E6=88=B7=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

refactor(OrderDetail): 允许orderId为undefined并添加空值检查
feat(JSONTableInput): 新增支持JSON与表格双向绑定的通用组件
refactor(customer): 重构客户详情页面，优化表单交互和字段映射
style(KLPList): 简化列表组件样式并修复字段显示逻辑
---
 klp-ui/src/components/KLPUI/KLPList/index.vue | 510 ++++++------------
 .../views/crm/components/JSONTableInput.vue   | 319 +++++++++++
 .../src/views/crm/components/OrderDetail.vue  |   9 +-
 klp-ui/src/views/crm/customer/index.vue       | 228 ++++++--
 4 files changed, 666 insertions(+), 400 deletions(-)
 create mode 100644 klp-ui/src/views/crm/components/JSONTableInput.vue

diff --git a/klp-ui/src/components/KLPUI/KLPList/index.vue b/klp-ui/src/components/KLPUI/KLPList/index.vue
index f822090b..aa33866a 100644
--- a/klp-ui/src/components/KLPUI/KLPList/index.vue
+++ b/klp-ui/src/components/KLPUI/KLPList/index.vue
@@ -1,98 +1,64 @@
 <template>
-  <div class="klp-list-container">
-    <!-- 列表加载状态（Element UI Vue2 支持 v-loading 指令） -->
-    <div v-loading="loading" class="list-loading-wrapper">
-      <!-- 列表项渲染（分两行布局） -->
-      <div 
-        v-for="(item, index) in listData" 
-        :key="item[listKey] || index" 
-        class="klp-list-item"
-        :class="{ 'active': isSelected(item) }" 
-        @click.stop="handleItemClick(item)"
+  <div class="simple-list-container">
+    <!-- 加载状态容器 -->
+    <div v-loading="loading" class="list-wrapper">
+      <!-- 列表项循环 -->
+      <div
+        v-for="(item, index) in listData"
+        :key="item[listKey] || index"
+        class="list-item"
+        :class="{ active: isSelected(item) }"
+        @click="handleItemClick(item)"
       >
-        <!-- 核心内容区：分两行展示6个信息位 -->
-        <div class="klp-list-content">
-          <!-- 第一行：主标题 + 副标题 + 状态（info1~info3） -->
-          <div class="klp-list-row klp-list-row1" :style="{ gap: `${rowGap}px` }">
-            <!-- 信息位1：主标题（保留原Tooltip溢出检测） -->
-            <div class="klp-list-info-item" v-if="showInfoItem('info1', item)">
-              <slot name="info1" :item="item" :isSelected="isSelected(item)">
-                <!-- Vue2 作用域插槽后备内容需用 template + slot-scope 包裹 -->
-                <template slot-scope="{ item, isSelected }">
-                  <el-tooltip 
-                    :content="item[info1Field]" 
-                    placement="top" 
-                    :disabled="!isContentOverflow(item, 'info1')"
-                    effect="light"
-                  >
-                    <span class="info-value info-value--primary">{{ item[info1Field] }}</span>
-                  </el-tooltip>
-                </template>
+        <!-- 左侧内容区：两行布局 -->
+        <div class="list-content">
+          <!-- 第一行：field1-field3 -->
+          <div class="content-row row1">
+            <div class="field-item" v-if="showField('field1', item)">
+              <slot name="field1" :item="item" :selected="isSelected(item)">
+                <span class="field-text field1-text">{{ item[field1] }}</span>
               </slot>
             </div>
-
-            <!-- 信息位2：副标题 -->
-            <div class="klp-list-info-item" v-if="showInfoItem('info2', item)">
-              <slot name="info2" :item="item" :isSelected="isSelected(item)">
-                <template slot-scope="{ item, isSelected }">
-                  <span class="info-value">{{ item[info2Field] }}</span>
-                </template>
+            <div class="field-item" v-if="showField('field2', item)">
+              <slot name="field2" :item="item" :selected="isSelected(item)">
+                <span class="field-text">{{ item[field2] }}</span>
               </slot>
             </div>
-
-            <!-- 信息位3：状态（常用插槽自定义，如标签） -->
-            <div class="klp-list-info-item" v-if="showInfoItem('info3', item)">
-              <slot name="info3" :item="item" :isSelected="isSelected(item)">
-                <template slot-scope="{ item, isSelected }">
-                  <span class="info-value">{{ item[info3Field] }}</span>
-                </template>
+            <div class="field-item" v-if="showField('field3', item)">
+              <slot name="field3" :item="item" :selected="isSelected(item)">
+                <span class="field-text">{{ item[field3] }}</span>
               </slot>
             </div>
           </div>
 
-          <!-- 第二行：时间 + 数量 + 备注（info4~info6） -->
-          <div class="klp-list-row klp-list-row2" :style="{ gap: `${rowGap}px`, marginBottom: `${rowMarginBottom}px` }">
-            <!-- 信息位4：时间 -->
-            <div class="klp-list-info-item" v-if="showInfoItem('info4', item)">
-              <slot name="info4" :item="item" :isSelected="isSelected(item)">
-                <template slot-scope="{ item, isSelected }">
-                  <span class="info-value">{{ item[info4Field] }}</span>
-                </template>
+          <!-- 第二行：field4-field6 -->
+          <div class="content-row row2">
+            <div class="field-item" v-if="showField('field4', item)">
+              <slot name="field4" :item="item" :selected="isSelected(item)">
+                <span class="field-text">{{ item[field4] }}</span>
               </slot>
             </div>
-
-            <!-- 信息位5：数量/金额 -->
-            <div class="klp-list-info-item" v-if="showInfoItem('info5', item)">
-              <slot name="info5" :item="item" :isSelected="isSelected(item)">
-                <template slot-scope="{ item, isSelected }">
-                  <span class="info-value">{{ item[info5Field] }}</span>
-                </template>
+            <div class="field-item" v-if="showField('field5', item)">
+              <slot name="field5" :item="item" :selected="isSelected(item)">
+                <span class="field-text">{{ item[field5] }}</span>
               </slot>
             </div>
-
-            <!-- 信息位6：备注 -->
-            <div class="klp-list-info-item" v-if="showInfoItem('info6', item)">
-              <slot name="info6" :item="item" :isSelected="isSelected(item)">
-                <template slot-scope="{ item, isSelected }">
-                  <span class="info-value">{{ item[info6Field] }}</span>
-                </template>
+            <div class="field-item" v-if="showField('field6', item)">
+              <slot name="field6" :item="item" :selected="isSelected(item)">
+                <span class="field-text">{{ item[field6] }}</span>
               </slot>
             </div>
           </div>
         </div>
 
-        <!-- 右侧操作按钮组（位置不变） -->
-        <div class="klp-list-actions">
-          <slot name="actions" :item="item" :isSelected="isSelected(item)">
-            <template slot-scope="{ item, isSelected }">
-              <!-- 操作栏后备内容（若父组件未提供则显示空） -->
-            </template>
-          </slot>
+        <!-- 右侧操作区 -->
+        <div class="list-actions">
+          <slot name="actions" :item="item" :selected="isSelected(item)"></slot>
         </div>
       </div>
 
-      <!-- 空状态提示（Vue2 需显式注册 ElEmpty 组件） -->
-      <div v-if="listData.length === 0 && !loading" class="klp-list-empty">
+      <!-- 空状态 -->
+      <div v-if="listData.length === 0 && !loading" class="empty-wrap">
         <el-empty description="暂无数据" />
       </div>
     </div>
@@ -101,347 +67,201 @@
 
 <script>
 export default {
-  name: "KLPList",
+  name: "SimpleList",
+  // 注册Element UI组件（确保全局未注册时可用）
+  components: {
+    ElEmpty: () => import("element-ui/lib/empty"),
+    ElTooltip: () => import("element-ui/lib/tooltip")
+  },
   props: {
-    // ---------------------- 原有核心Props（保留） ----------------------
-    /** 列表数据源（必传） */
+    // 核心必传
     listData: {
       type: Array,
       required: true,
       default: () => []
     },
-    /** 列表项唯一标识字段（必传） */
     listKey: {
       type: String,
-      required: true
+      required: true, // 列表项唯一标识字段（如id）
+      default: "id"
     },
-    /** 列表加载状态 */
     loading: {
       type: Boolean,
-      required: false,
       default: false
     },
 
-    // ---------------------- 新增：6个信息位配置 ----------------------
-    // 信息位1（主标题，兼容原titleField）
-    info1Field: {
-      type: String,
-      required: false,
-      default: "title" // 默认对应原titleField
-    },
-    // 信息位2（副标题）
-    info2Field: {
-      type: String,
-      required: false,
-      default: ""
-    },
-    // 信息位3（状态）
-    info3Field: {
-      type: String,
-      required: false,
-      default: ""
-    },
-    // 信息位4（时间）
-    info4Field: {
-      type: String,
-      required: false,
-      default: ""
-    },
-    // 信息位5（数量/金额）
-    info5Field: {
-      type: String,
-      required: false,
-      default: ""
-    },
-    // 信息位6（备注）
-    info6Field: {
-      type: String,
-      required: false,
-      default: ""
-    },
+    // 6个字段配置（非必传，传了就显示，支持插槽覆盖）
+    field1: { type: String, default: "" }, // 第一行第一个（主标题）
+    field2: { type: String, default: "" }, // 第一行第二个
+    field3: { type: String, default: "" }, // 第一行第三个
+    field4: { type: String, default: "" }, // 第二行第一个
+    field5: { type: String, default: "" }, // 第二行第二个
+    field6: { type: String, default: "" }, // 第二行第三个
 
-    // ---------------------- 新增：样式控制Props ----------------------
-    /** 每行内部信息位的间距（px） */
-    rowGap: {
-      type: Number,
-      required: false,
-      default: 16 // 默认间距16px
-    },
-    /** 两行之间的垂直间距（px） */
-    rowMarginBottom: {
-      type: Number,
-      required: false,
-      default: 4 // 默认4px
-    },
-    /** 主标题最大宽度占内容区的百分比（控制溢出） */
-    info1MaxPercent: {
-      type: Number,
-      required: false,
-      default: 60 // 主标题占比下调，给其他信息位留空间
-    }
+    // 样式配置（可选）
+    rowGap: { type: Number, default: 12 }, // 每行内字段间距（px）
+    rowMargin: { type: Number, default: 6 }, // 两行之间的间距（px）
+    itemPadding: { type: Number, default: 10 } // 列表项内边距（px）
   },
   data() {
     return {
-      selectedKey: null, // 选中状态（不变）
-      overflowCheckElements: {}, // 溢出检测临时元素（不变）
-      containerWidth: 0 // 容器宽度缓存（不变）
+      selectedItemKey: null // 选中项的唯一标识
     };
   },
   methods: {
-    // ---------------------- 原有核心方法（保留+微调） ----------------------
-    /** 判断列表项是否选中（不变） */
+    // 判断项是否选中
     isSelected(item) {
-      const itemKey = item[this.listKey];
-      return this.selectedKey === itemKey;
+      return this.selectedItemKey === item[this.listKey];
     },
 
-    /** 列表项点击事件（不变） */
+    // 列表项点击事件
     handleItemClick(item) {
-      const itemKey = item[this.listKey];
-      this.selectedKey = itemKey;
-      const selectedItem = this.selectedKey ? item : null;
-      this.$emit("item-click", selectedItem, item);
+      this.selectedItemKey = item[this.listKey];
+      this.$emit("item-click", item); // 向外抛出选中项
     },
 
-    /** 清空选中状态（不变） */
-    clearSelection() {
-      this.selectedKey = null;
-      this.$emit("selection-cleared");
+    // 简化版：判断字段是否显示（有插槽 或 配置了字段且值有效）
+    showField(fieldKey, item) {
+      // 1. 有插槽则强制显示（不管字段有没有值）
+      if (this.$scopedSlots[fieldKey]) return true;
+
+      // 2. 无插槽时：配置了字段名 + 字段值非空（兼容0/false等有效数据）
+      const fieldName = this[fieldKey];
+      if (!fieldName) return false; // 没配置字段名 → 不显示
+      const fieldValue = item[fieldName];
+      // 仅过滤：null/undefined/空字符串（保留0、false、0.0等）
+      return !(fieldValue === null || fieldValue === undefined || fieldValue === "");
     },
 
-    /** 主动设置选中项（不变） */
-    setSelection(targetKey) {
-      const isExist = this.listData.some(item => item[this.listKey] === targetKey);
-      if (isExist) {
-        this.selectedKey = targetKey;
-        const selectedItem = this.listData.find(item => item[this.listKey] === targetKey);
-        this.$emit("item-click", selectedItem);
+    // 手动清空选中状态（外部调用）
+    clearSelected() {
+      this.selectedItemKey = null;
+      this.$emit("clear-selected");
+    },
+
+    // 手动设置选中项（外部调用）
+    setSelected(key) {
+      const target = this.listData.find(item => item[this.listKey] === key);
+      if (target) {
+        this.selectedItemKey = key;
+        this.$emit("item-click", target);
       } else {
-        this.selectedKey = null;
-        console.warn(`列表中不存在key为${targetKey}的项`);
+        console.warn(`未找到key为${key}的列表项`);
       }
-    },
-
-    // ---------------------- 新增：信息位控制方法（适配Vue2插槽） ----------------------
-    /**
-     * 判断信息位是否需要显示（插槽存在 或 字段有值）
-     * @param {String} infoKey - 信息位标识（info1~info6）
-     * @param {Object} item - 列表项数据
-     * @returns {Boolean} 是否显示
-     */
-    showInfoItem(infoKey, item) {
-      // 前置容错：避免item为undefined导致报错
-      if (!item) return false;
-
-      // Vue2 作用域插槽判断：$scopedSlots 中插槽以函数形式存在
-      const hasSlot = typeof this.$scopedSlots[infoKey] === 'function';
-      if (hasSlot) return true;
-
-      // 2. 无插槽时，判断字段配置是否存在 + 字段值是否有效
-      const field = this[`${infoKey}Field`];
-      // 容错：字段未配置（如没传info1Field）则不显示
-      if (!field) return false;
-      // 字段值有效判断（排除 undefined/null/空字符串）
-      return item[field] !== undefined && item[field] !== null && item[field] !== "";
-    },
-
-    /**
-     * 信息位1（主标题）溢出检测（适配新字段）
-     * @param {Object} item - 列表项数据
-     * @param {String} infoKey - 信息位标识（仅info1需要）
-     * @returns {Boolean} 是否溢出
-     */
-    isContentOverflow(item, infoKey) {
-      const itemKey = item[this.listKey];
-      const field = this[`${infoKey}Field`];
-      const content = item[field] || "";
-
-      // 内容为空或无字段时不显示Tooltip
-      if (!content || !field) return false;
-
-      // 获取内容区宽度（原容器宽度改为内容区宽度）
-      // 注意：listData.indexOf(item) 可能因重复项导致索引错误，建议确保listData唯一
-      const itemIndex = this.listData.indexOf(item);
-      const contentEl = this.$el.querySelector(`.klp-list-item:nth-child(${itemIndex + 1}) .klp-list-content`);
-      if (!contentEl) return false;
-      const contentWidth = contentEl.clientWidth;
-
-      // 计算信息位1的最大可用宽度（减去标签宽度）
-      const labelEl = this.$el.querySelector(`.klp-list-item:nth-child(${itemIndex + 1}) .info-label`);
-      const labelWidth = labelEl ? labelEl.offsetWidth : 40;
-      const maxWidth = (contentWidth * this.info1MaxPercent) / 100 - labelWidth - 12;
-
-      // 复用临时元素检测宽度（不变）
-      if (!this.overflowCheckElements[itemKey]) {
-        const tempEl = document.createElement("span");
-        tempEl.style.cssText = `
-          visibility: hidden;
-          position: absolute;
-          white-space: nowrap;
-          font-size: 14px;
-          font-weight: 500;
-          color: #303133;
-        `;
-        tempEl.textContent = content;
-        document.body.appendChild(tempEl);
-        this.overflowCheckElements[itemKey] = tempEl;
-      }
-
-      const tempEl = this.overflowCheckElements[itemKey];
-      return tempEl.offsetWidth > maxWidth;
-    },
-
-    /** 窗口 resize 重新计算（不变） */
-    handleResize() {
-      this.$forceUpdate();
     }
-  },
-  watch: {
-    /** 列表数据变化时清理临时元素（不变） */
-    listData: {
-      deep: true,
-      handler() {
-        this.clearSelection();
-        Object.values(this.overflowCheckElements).forEach(el => {
-          document.body.removeChild(el);
-        });
-        this.overflowCheckElements = {};
-      }
-    },
-
-    /** 主标题占比变化时重新计算溢出（适配新prop） */
-    info1MaxPercent() {
-      this.$forceUpdate();
-    }
-  },
-  mounted() {
-    // 初始化内容区宽度（适配新结构）
-    this.$nextTick(() => {
-      const contentEl = this.$el.querySelector('.klp-list-content');
-      this.containerWidth = contentEl ? contentEl.clientWidth : 0;
-    });
-    window.addEventListener('resize', this.handleResize);
-  },
-  // Vue2 销毁钩子：beforeDestroy（Vue3为onBeforeUnmount）
-  beforeDestroy() {
-    // 清理临时元素和事件监听（不变）
-    Object.values(this.overflowCheckElements).forEach(el => {
-      document.body.removeChild(el);
-    });
-    window.removeEventListener('resize', this.handleResize);
   }
 };
 </script>
 
 <style scoped>
-/* 列表容器（不变） */
-.klp-list-container {
-  max-height: calc(100vh - 220px);
+/* 容器样式 - 哑光金属底色 */
+.simple-list-container {
+  width: 100%;
+  box-sizing: border-box;
+  height: 100%;
   overflow-y: auto;
-  padding-right: 8px;
-  margin-top: 10px;
-  width: 100%;
-  box-sizing: border-box;
 }
 
-/* 加载容器（不变） */
-.list-loading-wrapper {
+/* 列表包裹层 */
+.list-wrapper {
+  width: 100%;
   min-height: 100px;
+  padding: 8px 0;
 }
 
-/* 列表项：改为上下两行+右侧操作的布局 */
-.klp-list-item {
-  padding: 10px 12px;
-  /* 增加内边距，适配两行 */
-  margin-bottom: 8px;
-  border-bottom: 1px solid #f5f7fa;
-  /* 弱化底边框，突出选中态 */
-  cursor: pointer;
-  transition: all 0.2s ease;
+/* 列表项 - 磨砂金属质感 */
+.list-item {
   display: flex;
-  align-items: flex-start;
-  /* 顶部对齐，避免操作区下移 */
   justify-content: space-between;
+  align-items: center;
+  padding: v-bind(itemPadding + 'px') 12px;
+  margin-bottom: 8px;
+  /* 细腻金属边框 */
+  border: 1px solid #d1d5db;
+  background-color: white;
+  cursor: pointer;
+  transition: all 0.25s ease;
   box-sizing: border-box;
-  width: 100%;
-  background-color: #fafafa;
-  /* 未选中时浅背景，区分选中态 */
 }
 
-/* 列表项选中状态（不变） */
-.klp-list-item.active {
-  border-left: 3px solid #2bf;
-  background-color: #fff;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-  /* 增加轻微阴影，突出选中项 */
+/* 选中态 - 金属高亮（无阴影，靠边框+渐变体现） */
+.list-item.active {
+  /* 金属蓝边框（简约不夸张） */
+  border-left: 3px solid #475569;
+  /* 极细微内高光，模拟金属反光 */
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9) inset,
+              0 0 2px rgba(96, 165, 250, 0.2);
 }
 
-/* 内容区：包裹两行信息位，占满剩余空间 */
-.klp-list-content {
+/* 列表项hover - 金属微亮 */
+.list-item:hover:not(.active) {
+  border-color: #94a3b8; 
+}
+
+/* 内容区（占满左侧） */
+.list-content {
   flex: 1;
-  min-width: 0;
-  /* 关键：允许内容区缩小，避免溢出 */
-  display: flex;
-  flex-direction: column;
+  min-width: 0; /* 关键：避免内容溢出 */
 }
 
-/* 行容器：控制单行信息位布局 */
-.klp-list-row {
+/* 行容器 */
+.content-row {
   display: flex;
   align-items: center;
-  flex-wrap: nowrap;
-  /* 禁止换行，溢出省略 */
+  gap: v-bind(rowGap + 'px'); /* 字段间距 */
+  flex-wrap: wrap; /* 防止字段过多溢出 */
+}
+
+/* 第一行间距 */
+.row1 {
+  margin-bottom: v-bind(rowMargin + 'px');
+}
+
+/* 字段项 - 金属质感文本容器 */
+.field-item {
+  white-space: nowrap; /* 不换行 */
   overflow: hidden;
-  /* 隐藏超出行的内容 */
+  text-overflow: ellipsis; /* 溢出省略 */
+  padding: 2px 4px;
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.4);
 }
 
-/* 信息位容器：单个信息的最小单元 */
-.klp-list-info-item {
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  /* 禁止信息位内部换行 */
-}
-
-/* 信息位标签：次要文字，颜色偏浅 */
-.info-label {
-  color: #606266;
+/* 字段文本样式 - 金属灰调 */
+.field-text {
   font-size: 12px;
-  margin-right: 4px;
-  white-space: nowrap;
+  color: #475569;
+  /* 文本抗锯齿，贴合金属风格 */
+  -webkit-font-smoothing: antialiased;
 }
 
-/* 信息位值：默认样式 */
-.info-value {
-  color: #303133;
-  font-size: 12px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  /* 溢出显示省略号 */
-}
-
-/* 主标题（info1）值：加粗突出 */
-.info-value--primary {
+/* 主标题（field1）强调 - 深金属灰 */
+.field1-text {
   font-size: 14px;
   font-weight: 500;
+  color: #1e293b;
 }
 
-/* 右侧操作区（不变，增加顶部对齐） */
-.klp-list-actions {
+/* 操作区 - 金属质感按钮容器 */
+.list-actions {
+  flex-shrink: 0; /* 不被挤压 */
+  margin-left: 16px;
   display: flex;
-  align-items: flex-start;
-  /* 与内容区顶部对齐 */
-  gap: 6px;
-  flex-shrink: 0;
-  margin-left: 12px;
-  padding-top: 2px;
-  /* 微调垂直位置 */
+  gap: 8px;
+  /* 哑光背景，贴合整体风格 */
+  padding: 2px 4px;
+  border-radius: 2px;
 }
 
-/* 空状态（不变） */
-.klp-list-empty {
+/* 空状态 - 金属风格适配 */
+.empty-wrap {
   padding: 40px 0;
   text-align: center;
+  color: #64748b;
+  /* 空状态背景与金属容器融合 */
+  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
+  border-radius: 6px;
+  margin: 8px 0;
+  border: 1px solid #e2e8f0;
 }
 </style>
\ No newline at end of file
diff --git a/klp-ui/src/views/crm/components/JSONTableInput.vue b/klp-ui/src/views/crm/components/JSONTableInput.vue
new file mode 100644
index 00000000..58acfc5a
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/klp-ui/src/views/crm/components/OrderDetail.vue b/klp-ui/src/views/crm/components/OrderDetail.vue
index 72fbf0d7..51f69652 100644
--- a/klp-ui/src/views/crm/components/OrderDetail.vue
+++ b/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;
diff --git a/klp-ui/src/views/crm/customer/index.vue b/klp-ui/src/views/crm/customer/index.vue
index da3d39be..7d20b155 100644
--- a/klp-ui/src/views/crm/customer/index.vue
+++ b/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>
\ No newline at end of file
+<style scoped>
+.app-container {
+  padding: 16px;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.dialog-footer {
+  text-align: center;
+}
+</style>
\ No newline at end of file